Arno Kaimbacher
9823364670
- 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.
98 lines
3.5 KiB
Vue
98 lines
3.5 KiB
Vue
<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,
|
|
required: true,
|
|
},
|
|
type: {
|
|
type: String,
|
|
default: 'checkbox',
|
|
validator: (value: string) => ['checkbox', 'radio', 'switch'].includes(value),
|
|
},
|
|
label: {
|
|
type: String,
|
|
default: null,
|
|
},
|
|
modelValue: {
|
|
type: [Array, String, Number, Boolean],
|
|
default: null,
|
|
},
|
|
inputValue: {
|
|
type: [String, Number, Boolean],
|
|
required: true,
|
|
},
|
|
});// 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) => {
|
|
// 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 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>
|
|
</label>
|
|
</template>
|