hotfix: enhance radio button and file upload components

- Improved the styling and functionality of the radio button component, including a new radio button style.
- Added a loading spinner to the file upload component to indicate when large files are being processed.
- Added the ability to sort files in the file upload component.
- Fixed an issue where the radio button component was not correctly updating the model value.
- Updated the dataset creation and edit forms to use the new radio button component.
- Added a global declaration for the `sort_order` property on the `File` interface.
- Updated the API to filter authors by first and last name.
- Removed the import of `_checkbox-radio-switch.css` as the radio button styling is now handled within the component.

resources/js/Components/FormCheckRadio.vue

@@ -1,6 +1,15 @@
-<script setup>
+<script setup lang="ts">
 import { computed } from 'vue';
 
+
+interface Props {
+    name: string;
+    type?: 'checkbox' | 'radio' | 'switch';
+    label?: string | null;
+    modelValue: Array<any> | string | number | boolean | null;
+    inputValue: string | number | boolean;
+}
+
 const props = defineProps({
     name: {
         type: String,
@@ -9,7 +18,7 @@ const props = defineProps({
     type: {
         type: String,
         default: 'checkbox',
-        validator: (value) => ['checkbox', 'radio', 'switch'].includes(value),
+        validator: (value: string) => ['checkbox', 'radio', 'switch'].includes(value),
     },
     label: {
         type: String,
@@ -23,19 +32,65 @@ const props = defineProps({
         type: [String, Number, Boolean],
         required: true,
     },
-});
-const emit = defineEmits(['update:modelValue']);
+});// const props = defineProps<Props>();
+
+// const emit = defineEmits(['update:modelValue']);
+const emit = defineEmits<{ (e: 'update:modelValue', value: Props['modelValue']): void }>();
+
 const computedValue = computed({
     get: () => props.modelValue,
     set: (value) => {
-        emit('update:modelValue', value);
+        // If type is radio, wrap the new value inside an array.
+        if (props.type === 'radio') {
+            emit('update:modelValue', [value]);
+        } else {
+            emit('update:modelValue', value);
+        }
     },
 });
 const inputType = computed(() => (props.type === 'radio' ? 'radio' : 'checkbox'));
+
+// Define isChecked for radio inputs: it's true when the current modelValue equals the inputValue
+const isChecked = computed(() => {
+  if (props.type === 'radio') {
+    return Array.isArray(computedValue.value) &&
+           computedValue.value.length > 0 &&
+           computedValue.value[0] === props.inputValue;
+  }
+  return computedValue.value === props.inputValue;
+});
 </script>
 
+
+<!-- <template>
+    <label v-if="type == 'radio'" :class="[type, 'mr-6 mb-3 last:mr-0 inline-flex items-center cursor-pointer relative']">
+        <input v-model="computedValue" :type="inputType" :name="name" :value="inputValue" class="absolute left-0 opacity-0 -z-1 focus:outline-none focus:ring-0" />
+        <span 
+        class="check border-gray-700 border transition-colors duration-200 dark:bg-slate-800  block w-5 h-5 rounded-full" 
+        :class="{ 'bg-no-repeat bg-center bg-blue-600 border-blue-600 border-4': isChecked }"/>
+        <span class="pl-2">{{ label }}</span>
+    </label>
+    <label v-else :class="[type, 'mr-6 mb-3 last:mr-0']">
+        <input v-model="computedValue" :type="inputType" :name="name" :value="inputValue" />
+        <span class="check" />
+        <span class="pl-2">{{ label }}</span>
+    </label>   
+</template> -->
+
 <template>
-    <label :class="type" class="mr-6 mb-3 last:mr-0">
+    <label v-if="type === 'radio'" :class="[type]"
+        class="mr-6 mb-3 last:mr-0 inline-flex items-center cursor-pointer relative">
+        <input v-model="computedValue" :type="inputType" :name="name" :value="inputValue"
+            class="absolute left-0 opacity-0 -z-1 focus:outline-none focus:ring-0"
+            :checked="isChecked" />
+        <span class="check border transition-colors duration-200 dark:bg-slate-800 block w-5 h-5 rounded-full" :class="{
+            'border-gray-700': !isChecked,
+            'bg-radio-checked bg-no-repeat bg-center bg-blue-600 border-blue-600 border-4': isChecked
+        }" />
+        <span class="pl-2">{{ label }}</span>
+    </label>
+
+    <label v-else class="mr-6 mb-3 last:mr-0" :class="[type]">
         <input v-model="computedValue" :type="inputType" :name="name" :value="inputValue" />
         <span class="check" />
         <span class="pl-2">{{ label }}</span>