init form v1

Author: larbish

src/app/src/components/content/ContentEditorForm.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, watch } from 'vue'
+import { ref, watch, computed } from 'vue'
 import { ContentFileExtension, type DatabasePageItem, type DraftItem } from '../../types'
 import type { PropType } from 'vue'
 import { jsonToYaml, yamlToJson } from '../../utils/data'
@@ -20,11 +20,16 @@ const props = defineProps({
 const document = defineModel<DatabasePageItem>()
 
 const { host } = useStudio()
+
 // const { t } = useI18n()
 
 const skipFirstUpdate = ref(true)
 const contentJSON = ref({})
 
+const collection = computed(() => {
+  return host.collection.getByFsPath(document.value!.fsPath!)
+})
+
 // Trigger on document changes
 watch(() => document.value?.id + '-' + props.draftItem.version, async () => {
   if (document.value) {
@@ -95,7 +100,11 @@ async function setJSON(document: DatabasePageItem) {
 </script>
 
 <template>
-  <SchemaBasedForm
-    v-model="contentJSON"
-  />
+  <div class="p-4">
+    <FormSchemaBased
+      v-model="contentJSON"
+      :collection-name="collection!.name"
+      :schema="collection!.schema"
+    />
+  </div>
 </template>

src/app/src/components/shared/form/FormPanelInput.vue

@@ -0,0 +1,113 @@
+<template>
+  <UFormField
+    :name="formItem.id"
+    :label="label"
+    :ui="{
+      root: 'w-full',
+      label: 'text-xs font-semibold tracking-tight',
+      container: 'mt-1',
+    }"
+  >
+    <UInput
+      :id="formItem.id"
+      v-model="model"
+      :placeholder="placeholder"
+      :type="inputType"
+      class="w-full"
+    />
+  </UFormField>
+</template>
+
+<script setup lang="ts">
+import { titleCase } from 'scule'
+import type { FormItem, FormTree } from '../../../types'
+import type { PropType } from 'vue'
+import { computed, ref, watch } from 'vue'
+
+const props = defineProps({
+  formItem: {
+    type: Object as PropType<FormItem>,
+    required: true,
+  },
+})
+
+const form = defineModel({ type: Object as PropType<FormTree>, default: () => ({}) })
+
+const label = computed(() => titleCase(props.formItem.title))
+
+const placeholder = computed(() => {
+  switch (props.formItem.type) {
+    case 'string':
+      return `Enter ${props.formItem.title.toLowerCase()}...`
+    case 'number':
+      return '0'
+    default:
+      return ''
+  }
+})
+
+const inputType = computed(() => {
+  switch (props.formItem.type) {
+    case 'number':
+      return 'number'
+    default:
+      return 'text'
+  }
+})
+
+// Initialize model value
+const model = ref(computeValue(props.formItem))
+
+// Sync changes back to parent form
+watch(model, (newValue) => {
+  form.value = applyValueById(form.value, props.formItem.id, newValue)
+})
+
+// Watch for external form item changes
+watch(() => props.formItem, (newFormItem) => {
+  model.value = computeValue(newFormItem)
+}, { deep: true })
+
+function computeValue(formItem: FormItem): unknown {
+  if (formItem.value !== undefined) {
+    return formItem.value
+  }
+
+  switch (formItem.type) {
+    case 'string':
+    case 'icon':
+    case 'media':
+    case 'file':
+      return ''
+    case 'boolean':
+      return false
+    case 'number':
+      return 0
+    case 'array':
+      return []
+    case 'object':
+      return {}
+    default:
+      return null
+  }
+}
+
+function applyValueById(tree: FormTree, id: string, value: unknown): FormTree {
+  const result = { ...tree }
+  const paths = id.split('/').filter(Boolean)
+
+  let current: Record<string, unknown> = result
+  for (let i = 0; i < paths.length - 1; i++) {
+    const key = paths[i]
+    if (!current[key] || typeof current[key] !== 'object') {
+      current[key] = {}
+    }
+    current = current[key] as Record<string, unknown>
+  }
+
+  const lastKey = paths[paths.length - 1]
+  current[lastKey] = value
+
+  return result
+}
+</script>

src/app/src/components/shared/form/FormPanelSection.vue

@@ -0,0 +1,68 @@
+<template>
+  <UCollapsible
+    v-if="formItem.children"
+    class="w-full group/collapsible"
+    :default-open="true"
+  >
+    <div
+      class="flex items-center gap-2 w-full py-2"
+    >
+      <div class="flex items-center justify-center size-4 rounded bg-gray-100 dark:bg-gray-800 transition-colors duration-200 group-hover/collapsible:bg-gray-200 dark:group-hover/collapsible:bg-gray-700">
+        <UIcon
+          name="i-lucide-chevron-right"
+          class="size-2.5 text-gray-500 dark:text-gray-400 transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90"
+        />
+      </div>
+      <div class="flex gap-2 items-center">
+        <span class="font-semibold text-gray-900 dark:text-gray-100 tracking-tight">
+          {{ formItem.title }}
+        </span>
+        <UBadge
+          v-if="childrenCount"
+          variant="soft"
+          size="xs"
+          class="text-muted"
+        >
+          {{ childrenCount }} child{{ childrenCount === 1 ? '' : 'ren' }}
+        </UBadge>
+      </div>
+    </div>
+
+    <template #content>
+      <div class="mt-1 ml-5 pl-4 border-l border-gray-200 dark:border-gray-700/50 space-y-0.5">
+        <FormPanelSection
+          v-for="childKey in Object.keys(formItem.children)"
+          :key="formItem.children[childKey].id"
+          v-model="form"
+          :form-item="formItem.children[childKey]"
+        />
+      </div>
+    </template>
+  </UCollapsible>
+
+  <FormPanelInput
+    v-else
+    v-model="form"
+    :form-item="formItem"
+  />
+</template>
+
+<script lang="ts" setup>
+import type { FormItem, FormTree } from '../../../types'
+import type { PropType } from 'vue'
+import { computed } from 'vue'
+
+const props = defineProps({
+  formItem: {
+    type: Object as PropType<FormItem>,
+    required: true,
+  },
+})
+
+const form = defineModel({ type: Object as PropType<FormTree>, default: () => ({}) })
+
+const childrenCount = computed(() => {
+  if (!props.formItem.children) return 0
+  return Object.keys(props.formItem.children).length
+})
+</script>

src/app/src/components/shared/form/FormSchemaBased.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { FormTree } from '../../../types'
+import type { PropType } from 'vue'
+import type { Draft07 } from '@nuxt/content'
+import { buildFormTreeFromSchema } from '../../../utils/form'
+
+const props = defineProps({
+  collectionName: {
+    type: String,
+    required: true,
+  },
+  schema: {
+    type: Object as PropType<Draft07>,
+    required: true,
+  },
+})
+
+console.log('props.schema', props.schema)
+
+defineModel<Record<string, unknown>>({ required: true })
+
+const formTree = computed<FormTree>(() => {
+  return buildFormTreeFromSchema(props.collectionName, props.schema)
+})
+
+console.log('formTree', formTree.value)
+
+// const jsonString = computed({
+//   get: () => JSON.stringify(model.value, null, 2),
+//   set: (value: string) => {
+//     try {
+//       model.value = JSON.parse(value)
+//     }
+//     catch {
+//       // Invalid JSON, don't update
+//     }
+//   },
+// })
+</script>
+
+<template>
+  <FormPanelSection
+    v-for="formItem in formTree[collectionName].children"
+    :key="formItem.id"
+    v-model="formTree"
+    :form-item="formItem"
+  />
+</template>

src/app/src/components/shared/form/SchemaBasedForm.vue

@@ -11,7 +11,6 @@ export type FormItem = {
   default?: unknown
   options?: string[]
   title: string
-  description?: string
   icon?: string
   children?: FormTree
   disabled?: boolean

src/app/src/types/form.ts

@@ -5,6 +5,7 @@ import type { MediaItem } from './media'
 import type { Repository } from './git'
 import type { ComponentMeta } from './component'
 import type { MarkdownParsingOptions, SyntaxHighlightTheme } from './content'
+import type { CollectionInfo } from '@nuxt/content'
 
 export * from './file'
 export * from './item'
@@ -72,6 +73,9 @@ export interface StudioHost {
     upsert: (fsPath: string, media: MediaItem) => Promise<void>
     delete: (fsPath: string) => Promise<void>
   }
+  collection: {
+    getByFsPath: (fsPath: string) => CollectionInfo | undefined
+  }
   user: {
     get: () => StudioUser
   }

src/app/src/types/index.ts

@@ -57,7 +57,7 @@ export const buildFormTreeFromSchema = (treeKey: string, schema: Draft07): FormT
         return item
       }
 
-      // Handle custom object form
+      // Object form
       if (def.type === 'object' && def.properties) {
         const children = Object.keys(def.properties).reduce((acc, key) => {
           // Hide content internal keys
@@ -88,6 +88,7 @@ export const buildFormTreeFromSchema = (treeKey: string, schema: Draft07): FormT
         return item
       }
 
+      // Array form
       if (def.type === 'array' && def.items) {
         return {
           id,
@@ -97,7 +98,7 @@ export const buildFormTreeFromSchema = (treeKey: string, schema: Draft07): FormT
         }
       }
 
-      // Handle primitive types
+      // Primitive form
       const editorType = editor?.input
       const type = def.type === 'string' && def.format?.includes('date') ? 'date' : editorType ?? def.type as never
 
@@ -136,6 +137,6 @@ export const buildFormTreeFromSchema = (treeKey: string, schema: Draft07): FormT
   }
 
   return {
-    [treeKey]: buildFormTreeItem(schema.definitions[treeKey]),
+    [treeKey]: buildFormTreeItem(schema.definitions[treeKey] as Draft07DefinitionProperty) as FormItem,
   }
 }

src/app/src/utils/form.ts

@@ -141,6 +141,9 @@ export const createMockHost = (): StudioHost => ({
     name: 'test-repo',
     branch: 'main',
   },
+  collection: {
+    getByFsPath: vi.fn().mockReturnValue(undefined),
+  },
 } as never)
 
 export const clearMockHost = () => {