feat: Add visibilityConditions for checkboxes and radio gorups, update seeds
This commit is contained in:
@@ -3,20 +3,40 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { FormOptionDto } from '~~/.api-client'
|
||||
import type { FormElementDto, FormOptionDto } from '~~/.api-client'
|
||||
import { useFormElementVisibility } from '~/composables/useFormElementVisibility'
|
||||
|
||||
const props = defineProps<{
|
||||
formOptions: FormOptionDto[]
|
||||
allFormElements?: FormElementDto[]
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:formOptions', value: FormOptionDto[]): void
|
||||
}>()
|
||||
|
||||
// Map options to items format expected by UCheckboxGroup
|
||||
const items = computed(() => props.formOptions.map((option) => ({ label: option.label, value: option.label })))
|
||||
const { isFormOptionVisible } = useFormElementVisibility()
|
||||
|
||||
const visibleOptions = computed(() => {
|
||||
if (!props.allFormElements) return props.formOptions
|
||||
return props.formOptions.filter((opt) => isFormOptionVisible(opt.visibilityConditions, props.allFormElements!))
|
||||
})
|
||||
|
||||
// Auto-clear hidden options that are still selected
|
||||
watchEffect(() => {
|
||||
if (!props.allFormElements) return
|
||||
const hiddenSelected = props.formOptions.filter(
|
||||
(opt) => opt.value === 'true' && !isFormOptionVisible(opt.visibilityConditions, props.allFormElements!)
|
||||
)
|
||||
if (hiddenSelected.length === 0) return
|
||||
emit(
|
||||
'update:formOptions',
|
||||
props.formOptions.map((opt) => (hiddenSelected.includes(opt) ? { ...opt, value: 'false' } : opt))
|
||||
)
|
||||
})
|
||||
|
||||
const items = computed(() => visibleOptions.value.map((option) => ({ label: option.label, value: option.label })))
|
||||
|
||||
// Model value is an array of labels for checkboxes where value === 'true'
|
||||
const modelValue = computed({
|
||||
get: () => props.formOptions.filter((option) => option.value === 'true').map((option) => option.label),
|
||||
set: (selectedLabels: string[]) => {
|
||||
|
||||
Reference in New Issue
Block a user