feat: Add alternate mimetype support, enhance validation for alternate mimetypes, and improve script loading performance

- mime_type.ts: Added a new column `public alternate_mimetype: string;`
- MimetypeController.ts: Extended validation and storage logic to accommodate the new `alternate_mimetype` attribute
- adonisrc.ts: Integrated new validation rule to validate user-provided mimetypes
- vite.ts: Set `defer: true` for script attributes to improve loading performance
- update_1_to_mime_types.ts: Added migration for the new `alternate_mimetype` column in the database
- UI improvements: Updated components such as AsideMenuLayer.vue, FormCheckRadioGroup.vue, MimeTypeInput.vue, NavBar.vue (lime-green background), NavBarMenu.vue, SectionBannerStarOnGitea.vue, Admin/mimetype/Create.vue, Admin/mimetype/Delete.vue, Admin/mimetype/Index.vue
- allowed_extensions_mimetype.ts: Enhanced rule to also check for alternate mimetypes
- referenceValidation.ts: Improved validation to allow only ISBNs with a '-' delimiter
- package-lock.json: Updated npm dependencie

resources/js/Components/FormCheckRadioGroup.vue

@@ -1,10 +1,22 @@
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed, ref } from 'vue';
 import FormCheckRadio from '@/Components/FormCheckRadio.vue';
+import BaseButton from '@/Components/BaseButton.vue';
+import FormControl from '@/Components/FormControl.vue';
+import { mdiPlusCircle } from '@mdi/js';
 const props = defineProps({
     options: {
         type: Object,
-        default: () => {},
+        default: () => { },
+    },
+    allowManualAdding: {
+        type: Boolean,
+        default: false,
+    },
+    manualAddingPlaceholder: {
+        type: String,
+        default: 'Add manually',
+        required: false,
     },
     name: {
         type: String,
@@ -55,6 +67,14 @@ const computedValue = computed({
 const hasIdAttribute = (obj: any): obj is { id: any } => {
     return typeof obj === 'object' && 'id' in obj;
 };
+
+const newOption = ref<string>('');
+const addOption = () => {
+    if (newOption.value && !props.options[newOption.value]) {
+        props.options[newOption.value] = newOption.value;
+        newOption.value = '';
+    }
+};
 </script>
 
 <template>
@@ -63,15 +83,11 @@ const hasIdAttribute = (obj: any): obj is { id: any } => {
         <!-- :label="value" -->
         <!-- :input-value="value.id"
       :label="value.name" -->
-        <FormCheckRadio
-            v-for="(value, key) in options"
-            :key="key"
-            v-model="computedValue"
-            :type="type"
-            :name="name"
-            :input-value="key"
-            :label="value"
-            :class="componentClass"
-        />
+        <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>
+        <FormCheckRadio v-for="(value, key) in options" :key="key" v-model="computedValue" :type="type" :name="name"
+            :input-value="key" :label="value" :class="componentClass" />
     </div>
 </template>