feat: Adjust z-index values for map components, enhance ISBN validation message, and add dynamic placeholders for reference inputs, add additional mimetypes

resources/js/Components/FormCheckRadioGroup.vue

@@ -75,6 +75,21 @@ const addOption = () => {
         newOption.value = '';
     }
 };
+
+const inputElClass = computed(() => {
+    const base = [
+        'px-3 py-2 max-w-full focus:ring focus:outline-none border-gray-700 rounded w-full',
+        'dark:placeholder-gray-400',
+        'h-12',
+        'border',
+       'bg-transparent'
+        // props.isReadOnly ? 'bg-gray-50 dark:bg-slate-600' : 'bg-white dark:bg-slate-800',
+    ];
+    // if (props.icon) {
+    // base.push('pl-10');
+    // }
+    return base;
+});
 </script>
 
 <template>
@@ -83,9 +98,15 @@ const addOption = () => {
         <!-- :label="value" -->
         <!-- :input-value="value.id"
       :label="value.name" -->
-        <div v-if="allowManualAdding && type === 'checkbox'" class="flex items-center mt-2 mb-2">
-            <FormControl v-model="newOption" :placeholder="manualAddingPlaceholder" class="mr-2" />
-            <BaseButton small rounded-full color="info" :icon="mdiPlusCircle" @click.prevent="addOption" />
+        <div v-if="allowManualAdding && type === 'checkbox'" class="flex items-center mt-2 mb-2 relative">
+            <input v-model="newOption" :placeholder="manualAddingPlaceholder" :class="inputElClass"
+                @keydown.prevent.enter="addOption" />
+            <svg v-show="newOption.length >= 2" @click.prevent="addOption" xmlns="http://www.w3.org/2000/svg"
+                class="w-6 h-6 absolute right-2 top-1/2 transform -translate-y-1/2 cursor-pointer text-gray-500"
+                viewBox="0 0 24 24" fill="currentColor">
+                <path
+                    d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-6H5v-2h6V5h2v6h6v2h-6v6z" />
+            </svg>
         </div>
         <FormCheckRadio v-for="(value, key) in options" :key="key" v-model="computedValue" :type="type" :name="name"
             :input-value="key" :label="value" :class="componentClass" />

resources/js/Components/Map/draw.component.vue

@@ -268,7 +268,7 @@ export default class DrawControlComponent extends Vue {
     position: absolute;
     left: 10px;
     top: 100px;
-    z-index: 999;
+    z-index: 40;
 }
 
 .btn-group-vertical button {

resources/js/Components/Map/map.component.vue

@@ -372,6 +372,9 @@ export default class MapComponent extends Vue {
     margin-top: 0.5em;
 }
 
+.leaflet-container .leaflet-pane {
+    z-index: 30!important;
+}
 /* .leaflet-pane  {
     z-index: 30;
 } */

resources/js/Components/Map/zoom.component.vue

@@ -100,7 +100,7 @@ export default class ZoomControlComponent extends Vue {
     position: absolute;
     left: 10px;
     top: 10px;
-    z-index: 999;
+    z-index: 40;
 }
 
 .btn-group-vertical button {

resources/js/Components/NavBar.vue

@@ -72,7 +72,7 @@ const menuNavBarToggle = () => {
 const menuOpenLg = () => {
     layoutStore.isAsideLgActive = true;
 };
-const userHasRoles = (roleNames): boolean => {
+const userHasRoles = (roleNames: Array<string>): boolean => {
     return user.value.roles.some(role => roleNames.includes(role.name));
 };