68 lines
1.8 KiB
Vue
68 lines
1.8 KiB
Vue
<script setup lang="ts">
|
|
import { ref, watch, shallowRef, type PropType } from 'vue';
|
|
|
|
const props = defineProps({
|
|
checkBoxForm: {
|
|
type: Object as PropType<{
|
|
checkBoxField: { label: string };
|
|
fields: Record<string, {
|
|
label: string;
|
|
component: any;
|
|
value: any;
|
|
disabled: boolean;
|
|
props?: Record<string, any>;
|
|
}>;
|
|
}>,
|
|
required: true,
|
|
},
|
|
value: {
|
|
type: Boolean,
|
|
required: true,
|
|
},
|
|
});
|
|
|
|
// Reactive state for the checkbox and nested fields
|
|
const isChecked = ref(props.value);
|
|
// TODO performance issue by using ref, but losing connectivity to main data struct if not
|
|
// Either cycle trough each field and add it to a ref var, so its value is updated but the rest is not tracked
|
|
const fields = ref(props.checkBoxForm.fields);
|
|
|
|
// Watch for changes in the checkbox state and update the disabled state of nested fields
|
|
watch(isChecked, (isChecked) => {
|
|
for (const key in fields.value) {
|
|
fields.value[key].disabled = !isChecked;
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<v-card>
|
|
<v-card-text>
|
|
<!-- Checkbox to toggle nested fields -->
|
|
<v-checkbox
|
|
:label="props.checkBoxForm.checkBoxField.label"
|
|
v-model="isChecked"
|
|
></v-checkbox>
|
|
|
|
<!-- Dynamically render nested fields -->
|
|
<template v-for="(field, key) in fields" :key="key">
|
|
<component
|
|
:is="field.component"
|
|
v-model="field.value"
|
|
:label="field.label"
|
|
:disabled="field.disabled"
|
|
:density="'compact'"
|
|
rows="2"
|
|
item-title="type_name"
|
|
hide-details="auto"
|
|
class="mb-2"
|
|
clearable
|
|
:active="true"
|
|
v-bind="field.props || {}"
|
|
/>
|
|
</template>
|
|
</v-card-text>
|
|
</v-card>
|
|
</template>
|
|
|
|
<style scoped></style>
|