geolba/tethys.backend
geolba/tethys.backend
2
0
Fork 2
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

hotfix(dataset): enhance radio button and checkbox components and add arrayContainsTypes validation

Browse source 
- Added checkbox support to the `FormCheckRadio` component.
- Updated the styling of the radio button and checkbox components.
- Added the `arrayContainsTypes` validation rule to ensure that arrays contain specific types.
- Updated the `dataset` validators and controllers to use the new validation rule.
- Updated the `FormCheckRadioGroup` component to correctly handle the `input-value` as a number.
- Removed the default value from the `id` column in the `collections` migration.
- Added the `array_contains_types` rule to the `adonisrc.ts` file.
This commit is contained in:
Kaimbacher 2025-03-28 17:34:46 +01:00
parent 9823364670
commit 09f65359f9
8 changed files with 116 additions and 41 deletions
Download patch file Download diff file Expand all files Collapse all files

37
resources/js/Components/FormCheckRadio.vue
View file

@ -56,27 +56,15 @@ const isChecked = computed(() => {
return Array.isArray(computedValue.value) &&
computedValue.value.length > 0 &&
computedValue.value[0] === props.inputValue;
} else if (props.type === 'checkbox') {
return Array.isArray(computedValue.value) &&
computedValue.value.length > 0 &&
computedValue.value.includes(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">
@ -85,14 +73,19 @@ const isChecked = computed(() => {
: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
'bg-radio-checked bg-no-repeat bg-center bg-lime-600 border-lime-600 border-4': isChecked
}" />
<span class="pl-2">{{ label }}</span>
<span class="pl-2 control-label">{{ 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 v-else-if="type === 'checkbox'" :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" />
<span class="check border transition-colors duration-200 dark:bg-slate-800 block w-5 h-5 rounded" :class="{
'border-gray-700': !isChecked,
'bg-checkbox-checked bg-no-repeat bg-center bg-lime-600 border-lime-600 border-4': isChecked
}" />
<span class="pl-2 control-label">{{ label }}</span>
</label>
</template>

4
resources/js/Components/FormCheckRadioGroup.vue
View file

@ -47,7 +47,7 @@ const computedValue = computed({
if (props.modelValue.every((item) => typeof item === 'number')) {
return props.modelValue;
} else if (props.modelValue.every((item) => hasIdAttribute(item))) {
const ids = props.modelValue.map((obj) => obj.id.toString());
const ids = props.modelValue.map((obj) => obj.id);
return ids;
}
return props.modelValue;
@ -109,6 +109,6 @@ const inputElClass = computed(() => {
</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" />
:name="name" :input-value="Number(key)" :label="value" :class="componentClass" />
</div>
</template>