array of strings

Author: larbish

playground/docus/content/authors/farnabaz.md

@@ -8,4 +8,5 @@ modules:
   - studio
   - content
   - mdc
+  - hub
 ---

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

@@ -36,6 +36,8 @@ const inputType = computed(() => {
   }
 })
 
+const isArrayType = computed(() => props.formItem.type === 'array')
+
 // Initialize model value
 const model = ref(computeValue(props.formItem))
 
@@ -46,7 +48,7 @@ watch(model, (newValue) => {
   }
 
   form.value = applyValueById(form.value, props.formItem.id, newValue)
-})
+}, { deep: true })
 
 // Watch for external form item changes
 watch(() => props.formItem, (newFormItem) => {
@@ -87,7 +89,13 @@ function computeValue(formItem: FormItem): unknown {
       label: 'text-xs font-medium tracking-tight',
     }"
   >
+    <FormInputArray
+      v-if="isArrayType"
+      v-model="model"
+      :form-item="formItem.arrayItemForm"
+    />
     <UInput
+      v-else
       :id="formItem.id"
       v-model="model"
       :placeholder="placeholder"

src/app/src/components/form/input/FormInputObject.vue

@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import { titleCase } from 'scule'
+import type { FormTree } from '../../../types'
+import type { PropType } from 'vue'
+import { computed } from 'vue'
+
+const props = defineProps({
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  children: {
+    type: Object as PropType<FormTree>,
+    default: null,
+  },
+})
+
+const model = defineModel({ type: Object as PropType<Record<string, unknown>>, default: () => ({}) })
+
+const entries = computed(() => {
+  if (!props.children) return []
+
+  return Object.entries(props.children).map(([key, child]) => ({
+    key,
+    label: titleCase(child.title || key),
+    value: model.value?.[key] ?? child.default ?? '',
+    type: child.type === 'number' ? 'number' : 'text',
+    placeholder: child.type === 'number' ? '0' : `Enter ${(child.title || key).toLowerCase()}...`,
+  }))
+})
+
+function updateValue(key: string, value: string | number) {
+  model.value = { ...model.value, [key]: value }
+}
+</script>
+
+<template>
+  <div class="space-y-2">
+    <template v-if="entries.length">
+      <div
+        v-for="entry in entries"
+        :key="entry.key"
+        class="flex flex-col gap-1"
+      >
+        <label
+          :for="`object-${entry.key}`"
+          class="text-xs font-medium text-muted tracking-tight"
+        >
+          {{ entry.label }}
+        </label>
+        <UInput
+          :id="`object-${entry.key}`"
+          :model-value="entry.value"
+          :placeholder="entry.placeholder"
+          :type="entry.type"
+          :disabled="disabled"
+          class="w-full"
+          @update:model-value="(v: string | number) => updateValue(entry.key, v)"
+        />
+      </div>
+    </template>
+
+    <div
+      v-else
+      class="flex flex-col items-center justify-center py-6 rounded-md border border-dashed border-muted"
+    >
+      <UIcon
+        name="i-lucide-box"
+        class="size-5 text-muted mb-2"
+      />
+      <p class="text-xs text-muted">
+        No properties defined
+      </p>
+    </div>
+  </div>
+</template>

src/app/src/types/form.ts

@@ -20,5 +20,5 @@ export type FormItem = {
   // Not in schema, created manually by user
   custom?: boolean
   // Items for array type
-  items?: FormItem
+  arrayItemForm?: FormItem
 }

src/app/src/utils/form.ts

@@ -95,7 +95,7 @@ export const buildFormTreeFromSchema = (treeKey: string, schema: Draft07): FormT
           id,
           title: upperFirst(itemKey),
           type: 'array',
-          items: buildFormTreeItem(def.items, `#${itemKey}/items`)!,
+          arrayItemForm: buildFormTreeItem(def.items, `#${itemKey}/items`)!,
         }
       }
 
@@ -127,7 +127,7 @@ export const buildFormTreeFromSchema = (treeKey: string, schema: Draft07): FormT
     }
 
     if (type === 'array' && def.items) {
-      item.items = buildFormTreeItem(def.items, `#${itemKey}/items`)!
+      item.arrayItemForm = buildFormTreeItem(def.items, `#${itemKey}/items`)!
     }
 
     if (def.enum && Array.isArray(def.enum) && def.enum.length > 0) {