chore(show form): soon to be removed, the data struct and the current gen. of forms is not flexible enough to enable nested components to make them conditional

resources/js/components/content/partials/fields/misc/CheckBoxConditional.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import {ref, reactive, type PropType} from 'vue';
+
+const props = defineProps({
+  checkBoxForm: {
+    type: Object,
+    required: true,
+  },
+});
+
+const checkBoxForm = ref(props.checkBoxForm);
+
+const checkBoxField = ref(checkBoxForm.checkBoxField);
+const fields = ref(checkBoxForm.value.fields);
+
+
+const toggleFields = () => {
+  checkBoxForm.value.fields.forEach(field => {
+    field.disabled = !field.disabled;
+  });
+};
+</script>
+
+<template>
+  <v-card>
+    <v-card-title>Live Stream Configuration</v-card-title>
+    <v-card-text>
+      <v-checkbox
+          :label="checkboxField.label"
+          @change="toggleFields"
+      ></v-checkbox>
+      <component
+          v-for="field in checkBoxForm.fields"
+          :is="field.component"
+          v-model="field[key]"
+          :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 || {}"
+      />
+    </v-card-text>
+  </v-card>
+</template>
+
+<style scoped>
+
+</style>