silva
/
adrema-form
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add custom-value for radio

This commit is contained in:
philipp lang 2024-04-16 22:30:31 +02:00
parent c86200e391
commit 2424b4e19f
1 changed files with 35 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
src/components/fields/Radio.vue
View File

@ -3,17 +3,32 @@
<field-label :name="field.name" :required="field.required" :hint="field.hint" inline></field-label> <field-label :name="field.name" :required="field.required" :hint="field.hint" inline></field-label>
<div class="grid grid-cols-1 gap-2 pt-1"> <div class="grid grid-cols-1 gap-2 pt-1">
<label v-for="(option, index) in field.options" :key="index" :for="`${innerId}-${index}`" class="block relative flex items-center"> <label v-for="(option, index) in field.options" :key="index" :for="`${innerId}-${index}`" class="block relative flex items-center">
<input :id="`${innerId}-${index}`" v-model="inner" type="radio" :name="field.key" :value="option" class="peer absolute invisible" /> <input :id="`${innerId}-${index}`" v-model="selected" type="radio" :name="field.key" :value="option" class="peer absolute invisible" />
<span class="border-neutral-400 border-4 border-solid peer-checked:border-primary absolute left-0 w-6 h-6 rounded-full block"></span> <span class="border-neutral-400 border-4 border-solid peer-checked:border-primary absolute left-0 w-6 h-6 rounded-full block"></span>
<span class="peer-checked:bg-primary left-2 w-2 h-2 absolute rounded-full block"></span> <span class="peer-checked:bg-primary left-2 w-2 h-2 absolute rounded-full block"></span>
<span class="pl-8 text-gray-600 text-sm @sm:text-base" v-text="option"></span> <span class="pl-8 text-gray-600 text-sm @sm:text-base" v-text="option"></span>
</label> </label>
<label v-if="field.allowcustom" :for="`${innerId}-custom-value-selected`" class="block relative flex items-center">
<input :id="`${innerId}-custom-value-selected`" v-model="selected" type="radio" :name="field.key" value="custom-value-selected" class="peer absolute invisible" />
<span class="border-neutral-400 border-4 border-solid peer-checked:border-primary absolute left-0 w-6 h-6 rounded-full block"></span>
<span class="peer-checked:bg-primary left-2 w-2 h-2 absolute rounded-full block"></span>
<span class="ml-8 w-full border border-solid border-gray-500 focus-within:border-primary rounded-lg relative flex h-6">
<input
:id="`${innerId}-custom-value`"
v-model="customValue"
:name="`${innerId}-custom-value`"
placeholder="eigener Wert"
class="bg-white group-[.info]:bg-blue-200 rounded-lg focus:outline-none text-gray-600 text-left w-full py-1 @sm:py-2 @sm:group-[.info]:py-1 px-2 @sm:px-3 @sm:group-[.info]:px-2 text-sm @sm:text-base @sm:group-[.info]:text-sm"
/>
</span>
</label>
</div> </div>
</div> </div>
</template> </template>
<script setup> <script setup>
import {computed} from 'vue'; import {computed, ref, watch} from 'vue';
import FieldLabel from '../FieldLabel.vue'; import FieldLabel from '../FieldLabel.vue';
const emit = defineEmits(['update:modelValue']); const emit = defineEmits(['update:modelValue']);
@ -25,8 +40,9 @@ const props = defineProps({
field: { field: {
required: true, required: true,
validator: (value) => validator: (value) =>
hasKeys(value, [...globalFieldRules(), 'required', 'options']) && hasKeys(value, [...globalFieldRules(), 'required', 'options', 'allowcustom']) &&
typeof value.required === 'boolean' && typeof value.required === 'boolean' &&
typeof value.allowcustom === 'boolean' &&
typeof value.key === 'string' && typeof value.key === 'string' &&
value.key.length > 0 && value.key.length > 0 &&
typeof value.name === 'string' && typeof value.name === 'string' &&
@ -41,8 +57,21 @@ const props = defineProps({
const innerId = computed(() => (props.id ? props.id : props.field.key)); const innerId = computed(() => (props.id ? props.id : props.field.key));
const inner = computed({ const selected = ref(props.modelValue === null || props.field.options.includes(props.modelValue) ? props.modelValue : 'custom-value-selected');
get: () => props.modelValue, watch(selected, (newValue) => {
set: (v) => emit('update:modelValue', v), customValue.value = newValue === 'custom-value-selected' ? '' : newValue;
});
const customValue = computed({
get: () => {
if (selected.value === 'custom-value-selected') {
return props.modelValue;
}
return '';
},
set: (v) => {
return emit('update:modelValue', v);
},
}); });
</script> </script>