catalyst/ui/src/components/form/JSONSchemaFormFields.vue

<script setup lang="ts">
import { Checkbox } from '@/components/ui/checkbox'
import { FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form'
import { Input } from '@/components/ui/input'

import { onMounted, ref, watch } from 'vue'

import type { JSONSchema } from '@/lib/types'

const model = defineModel<Record<string, any>>()

const props = defineProps<{
  schema: JSONSchema
}>()

const formdata = ref<Record<string, any>>({})

onMounted(() => {
  if (!model.value) return

  for (const key in props.schema.properties) {
    formdata.value[key] = model.value[key]
  }
})

watch(
  formdata,
  (newVal) => {
    model.value = { ...newVal }
  },
  { deep: true }
)
</script>

<template>
  <div v-for="(property, key) in schema.properties" :key="key">
    <FormField
      v-if="property.type === 'string'"
      :name="key"
      v-slot="{ componentField }"
      v-model="formdata[key]"
    >
      <FormItem>
        <FormLabel :for="key" class="text-right">
          {{ property.title }}
        </FormLabel>
        <Input :id="key" class="col-span-3" v-bind="componentField" />
        <FormMessage />
      </FormItem>
    </FormField>
    <FormField
      v-else-if="property.type === 'boolean'"
      :name="key"
      v-slot="{ value, handleChange }"
      type="checkbox"
      v-model="formdata[key]"
    >
      <FormItem class="flex flex-row items-start gap-x-3 space-y-0 py-4">
        <FormControl>
          <Checkbox :checked="value" @update:checked="handleChange" />
        </FormControl>
        <div class="space-y-1 leading-none">
          <FormLabel>
            {{ property.title }}
          </FormLabel>
          <FormMessage />
        </div>
      </FormItem>
    </FormField>
  </div>
</template>