- add EventEmmitter for directly binding Events to component

- add NotificationToast for messages
- add leaflet map component and zoom control component
- change focus:ring to focus:ring-2 inside BaseButton
-  `@tailwindcss/line-clamp` plugin is now included by default...remove it from tailwind.config.js
- npm updates

resources/js/Pages/Admin/Role/Index.vue

@@ -15,6 +15,7 @@ import { stardust } from '@eidellev/adonis-stardust/client';
 import CardBoxModal from '@/Components/CardBoxModal.vue';
 
 const isModalDangerActive = ref(false);
+const deleteId = ref();
 
 const props = defineProps({
     roles: {
@@ -51,22 +52,27 @@ const formDelete = useForm({});
 // };
 
 const destroy = (id, e) => {
-    console.log(id);
+    // console.log(id);
+    deleteId.value = id;
     isModalDangerActive.value = true;
 };
 
-const onConfirm = async () => {
-    await ormDelete.delete(stardust.route('role.destroy', [id]));
+const onConfirm = async (id) => {
+    // let id = 6;
+    await formDelete.delete(stardust.route('role.destroy', [id]));
+    deleteId.value = null;
 };
 
-const onCancel = () => {
-    console.log('cancel');
+const onCancel = (id) => {
+    // console.log('cancel');
+    deleteId.value = null;
 };
 </script>
 
 <template>
     <CardBoxModal
         v-model="isModalDangerActive"
+        :delete-id="deleteId"
         large-title="Please confirm"
         button="danger"
         button-label="Delete"

resources/js/Pages/Submitter/Dataset/Create.vue

@@ -10,6 +10,7 @@ import {
     mdiInformationOutline,
     mdiBookOpenPageVariant,
     mdiImageText,
+    mdiEarthPlus,
 } from '@mdi/js';
 import LayoutAuthenticated from '@/Layouts/LayoutAuthenticated.vue';
 import SectionMain from '@/Components/SectionMain.vue';
@@ -35,7 +36,9 @@ import SearchAutocomplete from '@/Components/SearchAutocomplete.vue';
 import TablePersons from '@/Components/TablePersons.vue';
 import { MainService } from '@/Stores/main';
 import { notify } from '@/notiwind';
-// import NotificationToast from '@/Components/NotificationToast.vue';
+import LocationMap from '@/Components/Map/map.component.vue';
+import { MapOptions, LatLngBoundsExpression } from 'leaflet';
+import { LayerOptions } from '@/Components/Map/MapOptions';
 
 const props = defineProps({
     licenses: {
@@ -89,6 +92,21 @@ if (Object.keys(mainService.dataset).length == 0) {
         contributors: [],
         project_id: undefined,
         embargo_date: '',
+        coverage: {
+            x_min: 0,
+            y_min: 0,
+            x_max: 0,
+            y_max: 0,
+            elevation_min: undefined,
+            elevation_max: undefined,
+            elevation_absolut: undefined,
+            depth_min: undefined,
+            depth_max: undefined,
+            depth_absolut: undefined,
+            time_min: undefined,
+            time_max: undefined,
+            time_absolut: undefined,
+        },
         // errors: undefined,
     };
     // mainService.setDataset(dataset, language);
@@ -109,6 +127,7 @@ if (Object.keys(mainService.dataset).length == 0) {
         contributors: mainService.dataset.contributors,
         project_id: mainService.dataset.project_id,
         embargo_date: mainService.dataset.embargo_date,
+        coverage: mainService.dataset.coverage,
     };
     for (let index in mainService.dataset.titles) {
         let title: Title = mainService.dataset.titles[index];
@@ -134,7 +153,6 @@ if (Object.keys(mainService.dataset).length == 0) {
 //     descriptions: [{ value: '', type: 'Abstract', language: language }],
 // });
 const form = useForm<Dataset>(dataset);
-// dataset.language.value = 'de';
 
 // const emit = defineEmits(['update:modelValue', 'setRef']);
 // computed({
@@ -147,6 +165,18 @@ const form = useForm<Dataset>(dataset);
 const isModalActive = ref(false);
 const formStep = ref(1);
 
+const mapOptions: MapOptions = {
+    center: [48.208174, 16.373819],
+    zoom: 3,
+    zoomControl: false,
+};
+const baseMaps: Map<string, LayerOptions> = new Map<string, LayerOptions>();
+const fitBounds: LatLngBoundsExpression = [   
+    [46.4318173285, 9.47996951665],
+    [49.0390742051, 16.9796667823],
+];
+const mapId = "test";
+
 // const submit = async () => {
 //     await router.post(stardust.route('user.store'), form, {
 //         onSuccess: () => {
@@ -224,6 +254,11 @@ const onAddContributor = (person) => {
         notify({ type: 'info', text: 'person has been successfully added as contributor' }, 4000);
     }
 };
+
+const onMapInitialized = (newItem) => {
+    // notify({ type: 'info', text: message });
+    console.log(newItem);
+};
 </script>
 
 <template>
@@ -698,6 +733,18 @@ const onAddContributor = (person) => {
                                 </FormControl>
                             </FormField>
                         </div>
+                        <CardBox class="mb-6 shadow" has-table title="Geo Location" :icon="mdiEarthPlus">
+                            <!-- @onMapInitialized="onMapInitialized" -->
+                            <!-- v-bind-event="{ mapId, name: mapId }" -->
+                            <LocationMap                           
+                                :mapOptions="mapOptions"
+                                :baseMaps="baseMaps"
+                                :fitBounds="fitBounds"
+                                :mapId="mapId"     
+                                v-bind-event:onMapInitializedEvent="onMapInitialized"
+                            ></LocationMap>
+                            <!-- <label v-bind-event="{ for: mapId }" /> -->
+                        </CardBox>
                     </div>
 
                     <div v-if="formStep == 4">