@ederzeel/nuxt-schema-form-nightly 0.1.0-29118956.9ee4a3d → 0.1.0-29119142.f6bc066

package/dist/runtime/components/Array.vue

@@ -1,12 +1,9 @@
 <script lang="ts" setup>
-import { Draft2019 } from 'json-schema-library'
-import SComponent from './Component.vue'
-import { ref, computed, h, resolveComponent } from 'vue'
+import { h } from 'vue'
 import type { TableColumn } from '@nuxt/ui'
-import type { Row } from '@tanstack/vue-table'
-
-const UDropdownMenu = resolveComponent('UDropdownMenu')
-const UButton = resolveComponent('UButton')
+import type { PropertiesType } from '../types'
+import SObject from './array/ArrayObject.vue'
+import SMultiSelect from './MultiSelect.vue'
 
 const props = defineProps<{
   id: string
@@ -14,236 +11,53 @@ const props = defineProps<{
   description?: string
   jsonSchemaPath: string
   items: PropertiesType
-  modelValue: Record<string, unknown>[]
   isRequired: boolean
   minItems?: number
   maxItems?: number
   edit?: boolean
   columns?: TableColumn<{}>[]
   editInline?: boolean
+  modelValue: unknown[]
 }>()
+
 const emit = defineEmits(['update:modelValue', 'submit'])
 
-type PropertiesType = {
-  properties: {
-    [key: string]: unknown
-  }
-  [key: string]: unknown
+const onInput = (value: Record<string, unknown>, index: number) => {
+  props.modelValue[index] = value
+  emit('update:modelValue', props.modelValue)
 }
 
-const massActions = [
-  [
-    {
-      label: 'delete',
-      click: () => {
-        massRemove()
-        selectedRows.value = []
-      }
-    }
-  ]
-]
-
-const selectedRows = ref<{ __id: any }[]>([])
-const schemaObject = ref(new Draft2019(props.items))
-const model = ref<{ open: boolean; index: number; value: Record<string, unknown> }>({
-  open: false,
-  index: 0,
-  value: {}
-})
-const expand = ref({
-  openedRows: [],
-  row: null
-})
-
-const values = computed(() => {
-  if (props.modelValue.length > 0) {
-    return props.modelValue.map((x, i) => ({ ...x, __id: i }))
-  } else if (props.minItems && props.minItems > 0) {
-    const template = schemaObject.value.getTemplate()
-    return [...Array(props.minItems)].map((_, i) => ({ ...template, __id: i }))
-  }
-
-  return []
-})
-
-const columns = computed<TableColumn<{}>[]>(() => {
-  const columns = props.columns ?? []
-  if (props.editInline) {
-    columns.push({
-      id: 'expand',
-      cell: ({ row }) =>
-        h(UButton, {
-          color: 'neutral',
-          variant: 'ghost',
-          icon: 'i-lucide-chevron-down',
-          square: true,
-          'aria-label': 'Expand',
-          ui: {
-            leadingIcon: ['transition-transform', row.getIsExpanded() ? 'duration-200 rotate-180' : '']
-          },
-          onClick: () => row.toggleExpanded()
-        })
-    })
-  }
-
+const Renderer = () => {
   if (props.items.type === 'object') {
-    for (const column of Object.keys(props?.items?.properties).map<TableColumn<{}>>(x => ({
-      header: x,
-      accessorKey: x,
-      cell: ({ row }) => row.getValue(x)
-    }))) {
-      columns.push(column)
-    }
-  }
-
-  if (props.edit) {
-    columns.push({
-      id: 'actions',
-      cell: ({ row }) => {
-        return h(
-          'div',
-          { class: 'text-right' },
-          h(
-            UDropdownMenu,
-            {
-              content: {
-                align: 'end'
-              },
-              items: getRowItems(row),
-              'aria-label': 'Actions dropdown'
-            },
-            () =>
-              h(UButton, {
-                icon: 'i-lucide-ellipsis-vertical',
-                color: 'neutral',
-                variant: 'ghost',
-                class: 'ml-auto',
-                'aria-label': 'Actions dropdown'
-              })
-          )
-        )
+    return h(SObject, {
+      ...props,
+      required: props.items.required,
+      isRequired: props.isRequired,
+      modelValue: props.modelValue as Record<string, unknown>[],
+      'onUpdate:modelValue': (v: Record<string, unknown>[]) => {
+        emit('update:modelValue', v)
       }
     })
-  }
-
-  return columns
-})
-
-function getRowItems(row: Row<{}>) {
-  return [
-    {
-      label: 'edit',
-      onSelect: () => open(row.index)
-    },
-    {
-      label: 'delete',
-      onSelect: () => {
-        remove(row.index)
-        selectedRows.value = []
+  } else if (props.items.type === 'string' && props.items.enum) {
+    return h(SMultiSelect, {
+      ...props,
+      items: props.items as unknown as {
+        id: string
+        enum: string[]
+        enum_titles?: string[]
+      },
+      isRequired: props.isRequired,
+      modelValue: props.modelValue as string[],
+      'onUpdate:modelValue': (v: string[]) => {
+        emit('update:modelValue', v)
       }
-    }
-  ]
-}
-
-const options = computed(() => {
-  let res: {
-    modelValue?: any
-    'onUpdate:modelValue'?: (v: any) => void
-    expand?: {
-      openedRows: any[]
-      row: null
-    }
-    'update:expand'?: (v: any) => void
-  } = {}
-
-  if (props.edit) {
-    res.modelValue = selectedRows.value
-    res['onUpdate:modelValue'] = value => (selectedRows.value = value)
-  }
-  if (props.editInline) {
-    res.expand = expand.value
-    res['update:expand'] = value => (expand.value = value)
-  }
-
-  return res
-})
-
-const open = (index: number) => {
-  model.value = { open: true, index: index, value: structuredClone(values.value[index]) }
-}
-
-const onInput = (value: Record<string, unknown>, index: number) => {
-  props.modelValue[index] = value
-  emit('update:modelValue', props.modelValue)
-}
-
-const add = () => {
-  emit('update:modelValue', [...props.modelValue, schemaObject.value.getTemplate()])
-}
-
-const remove = (index: number) => {
-  props.modelValue.splice(index, 1)
-  emit('update:modelValue', props.modelValue)
-}
-
-const massRemove = () => {
-  let res = props.modelValue
-  for (const index of selectedRows.value.map(x => x.__id)) {
-    res.splice(index, 1)
+    })
   }
-
-  emit('update:modelValue', res)
 }
 </script>
 
 <template>
   <div>
-    <h2 v-if="props.title" class="mb-4 text-2xl leading-none tracking-tight">{{ props.title }}</h2>
-    <p v-if="props.description" class="mb-4">{{ props.description }}</p>
-
-    <div>
-      <div class="flex justify-between items-center w-full px-4 py-3">
-        <div class="flex gap-1.5 items-center">
-          <UButton v-if="edit" :disabled="maxItems && values.length >= maxItems" @click="add" icon="i-heroicons-plus"
-            trailing color="neutral" size="xs" />
-        </div>
-        <div class="flex gap-1.5 items-center">
-          <UDropdownMenu v-if="selectedRows.length > 0" :items="massActions">
-            <UButton icon="i-heroicons-chevron-down" trailing color="neutral" size="xs"> Action </UButton>
-          </UDropdownMenu>
-        </div>
-      </div>
-      <UTable v-bind="options" by="__id" :data="values" :columns="columns" class="flex-1">
-        <template #expanded="{ row }">
-          {{ row }}
-          <div class="p-4">
-            <SComponent :id="id.length <= 0 ? `${row.index}` : `${id}[${row.index}].${items.id}`"
-              :model-value="row.original" :json-schema-path="jsonSchemaPath?.length <= 0 ? `properties.${row.index}` : `${jsonSchemaPath}[${row.index}]`
-                " v-bind="items" :isRequired="false" class="mt-4"
-              @update:model-value="(event: Record<string, unknown>) => onInput(event, row.index)"
-              @submit="() => emit('submit')" />
-          </div>
-        </template>
-      </UTable>
-    </div>
-    <UModal v-model:open="model.open">
-      <template #content>
-        <UCard>
-          <SComponent :id="id.length <= 0 ? `${model.index}` : `${id}[0].${items.id}`" :model-value="model.value"
-            :json-schema-path="jsonSchemaPath?.length <= 0 ? `properties.${model.index}` : `${jsonSchemaPath}[${model.index}]`
-              " v-bind="items" :isRequired="false" class="mt-4"
-            @update:model-value="(event: Record<string, unknown>) => (model.value = event)"
-            @submit="() => emit('submit')" />
-          <template #footer>
-            <UButton @click="
-              () => {
-                onInput(model.value, model.index)
-                model.open = false
-              }
-            ">Save</UButton>
-          </template>
-        </UCard>
-      </template>
-    </UModal>
+    <Renderer />
   </div>
 </template>

package/dist/runtime/components/Component.vue

@@ -1,11 +1,13 @@
 <script lang="ts" setup>
-import { computed } from 'vue'
+import { h, resolveComponent } from 'vue'
 import SObject from './Object.vue'
 import SDate from './Date.vue'
 import SToggle from './Toggle.vue'
 import SArray from './Array.vue'
 import SInputNumber from './InputNumber.vue'
 import SInputField from './InputField.vue'
+import type { PropertiesType } from '../types'
+import type { TableColumn } from '@nuxt/ui'
 
 type Properties = {
   properties?: { [key: string]: unknown }
@@ -24,11 +26,12 @@ export type SComponentProps = {
   jsonSchemaPath?: string
   required?: string[]
   isRequired: boolean
-  items?: { [key: string]: unknown }
+  items?: PropertiesType
   edit?: boolean
   minItems?: number
   maxItems?: number
   editInline?: boolean
+  columns?: TableColumn<{}>[]
   validateFields?: (fields: string[]) => Promise<boolean>
 }
 
@@ -36,20 +39,133 @@ const props = withDefaults(defineProps<SComponentProps>(), { id: '', jsonSchemaP
 const value = defineModel<unknown>({ required: true })
 const emit = defineEmits(['submit'])
 
-const options = computed(() => ({
-  ...props,
-  jsonSchemaPath: `${props.jsonSchemaPath}.${props.id}`
-}))
 const onSubmit = () => {
   emit('submit')
 }
+
+const Render = () => {
+  const { type, renderer, format } = props
+  if (type == null || (renderer != null && renderer === 'none')) {
+    return undefined
+  } else if (renderer) {
+    return h(resolveComponent(renderer), {
+      ...props,
+      jsonSchemaPath: `${props.jsonSchemaPath}.${props.id}`,
+      onSubmit,
+      // is: typeof renderer === 'string' ? renderer : undefined,
+      modelValue: value.value,
+      'onUpdate:modelValue': (v: unknown) => {
+        value.value = v
+      }
+    })
+  } else if (type === 'string') {
+    if (format === 'full-date') {
+      return h(SDate, {
+        id: props.id,
+        title: props.title,
+        description: props.description,
+        type: props.type,
+        isRequired: props.isRequired,
+        jsonSchemaPath: `${props.jsonSchemaPath}.${props.id}`,
+        modelValue: value.value as string,
+        'onUpdate:modelValue': (v: string) => {
+          value.value = v
+        }
+      })
+    } else {
+      return h(SInputField, {
+        id: props.id,
+        title: props.title,
+        isRequired: props.isRequired,
+        type,
+        jsonSchemaPath: `${props.jsonSchemaPath}.${props.id}`,
+        modelValue: value.value as string,
+        'onUpdate:modelValue': (v: string) => {
+          value.value = v
+        }
+      })
+    }
+  } else if (type === 'number' || type === 'integer') {
+    return h(SInputNumber, {
+      id: props.id,
+      title: props.title,
+      description: props.description,
+      type,
+      isRequired: props.isRequired,
+      jsonSchemaPath: `${props.jsonSchemaPath}.${props.id}`,
+      modelValue: value.value as number,
+      'onUpdate:modelValue': (v: number) => {
+        value.value = v
+      }
+    })
+  } else if (type === 'boolean') {
+    return h(SToggle, {
+      id: props.id,
+      title: props.title,
+      description: props.description,
+      isRequired: props.isRequired,
+      jsonSchemaPath: `${props.jsonSchemaPath}.${props.id}`,
+      modelValue: value.value as boolean,
+      'onUpdate:modelValue': (v: boolean) => {
+        value.value = v
+      }
+    })
+  } else if (type === 'object') {
+    if (!props.properties) throw new Error('object is missing properties')
+    if (!props.required) throw new Error('object is missing required')
+
+    return h(SObject, {
+      id: props.id,
+      title: props.title,
+      description: props.description,
+      properties: props.properties,
+      required: props.required,
+      isRequired: props.isRequired,
+      jsonSchemaPath: `${props.jsonSchemaPath}.${props.id}`,
+      onSubmit,
+      modelValue: value.value as Record<string, unknown>,
+      'onUpdate:modelValue': (v: Record<string, unknown>) => {
+        value.value = v
+      }
+    })
+  } else if (type === 'array') {
+    if (!props.items) throw new Error('array has no items')
+
+    return h(SArray, {
+      id: props.id,
+      title: props.title,
+      description: props.description,
+      items: props.items,
+      isRequired: props.isRequired,
+      minItems: props.minItems,
+      maxItems: props.maxItems,
+      edit: props.edit,
+      columns: props.columns,
+      editInline: props.editInline,
+      jsonSchemaPath: `${props.jsonSchemaPath}.${props.id}`,
+      onSubmit,
+      modelValue: value.value as unknown[],
+      'onUpdate:modelValue': (v: unknown) => {
+        value.value = v as unknown[]
+      }
+    })
+  }
+  return undefined
+}
 </script>
 
 <template>
   <div class="s-form-group">
-    <template v-if="renderer != null && renderer === 'none'">{{ undefined }}</template>
-    <component v-else-if="renderer" v-bind="options" v-model="value"
-      :is="typeof renderer === 'string' ? renderer : undefined" @submit="onSubmit" />
+    <Render />
+
+    <!--<template v-if="renderer != null && renderer === 'none'">{{ undefined }}</template>
+    <component
+      v-else-if="renderer"
+      v-bind="options"
+      v-model="value"
+      :is="typeof renderer === 'string' ? renderer : undefined"
+      @submit="onSubmit"
+    />
 
     <SDate v-else-if="type === 'string' && format === 'full-date'" v-bind="options" v-model="value" />
     <SInputNumber v-else-if="type === 'number' || type === 'integer'" v-bind="options" v-model="value" />
@@ -57,6 +173,6 @@ const onSubmit = () => {
     <SToggle v-else-if="type === 'boolean'" v-bind="options" v-model="value" />
     <SObject v-else-if="type === 'object'" v-bind="options" v-model="value" @submit="onSubmit" />
     <SArray v-else-if="type === 'array'" v-bind="options" v-model="value" />
-    <div v-else>else</div>
+    <div v-else>else</div>-->
   </div>
 </template>

package/dist/runtime/components/Date.vue

@@ -6,7 +6,6 @@ const props = defineProps<{
   id: string
   title?: string
   description?: string
-  type: string
   isRequired: boolean
 }>()
 
@@ -23,13 +22,14 @@ const open = ref(false)
 
 <template>
   <div>
+    {{ open }}
     <UFormField
       :label="props.title || id"
       :hint="!props.isRequired ? 'optional' : undefined"
       :description="props.description"
       :name="props.id"
     >
-      <UPopover :open="open">
+      <UPopover v-model="open" :open="open" :dismissable="true">
         <UButton color="neutral" variant="subtle" icon="i-lucide-calendar" class="w-full" @click="() => (open = true)">
           {{ value ? df.format(date.toDate(getLocalTimeZone())) : 'Select a date' }}
         </UButton>

package/dist/runtime/components/MultiSelect.vue

@@ -0,0 +1,48 @@
+<script lang="ts" setup>
+import { computed } from 'vue'
+
+const props = defineProps<{
+  id: string
+  title?: string
+  description?: string
+  jsonSchemaPath: string
+  items: {
+    id: string
+    enum: string[]
+    enum_titles?: string[]
+  }
+  modelValue: string[]
+  isRequired: boolean
+  minItems?: number
+  maxItems?: number
+  edit?: boolean
+  editInline?: boolean
+}>()
+
+const options = computed(() =>
+  props.items.enum.map((x, i) => ({ label: props?.items.enum_titles?.[i] ?? x, value: x }))
+)
+
+const value = defineModel<string[]>({ required: true })
+</script>
+
+<template>
+  <div>
+    <UFormField
+      :label="props.title || id"
+      :hint="!props.isRequired ? 'optional' : undefined"
+      :description="props.description"
+      :name="props.id"
+    >
+      <USelect
+        v-model="value"
+        placeholder="select size"
+        :items="options"
+        multiple
+        value-attribute="value"
+        option-attribute="key"
+        class="w-full"
+      />
+    </UFormField>
+  </div>
+</template>

package/dist/runtime/components/Object.vue

@@ -26,10 +26,17 @@ const onInput = (value: unknown, key: string) => {
     <h2 v-if="props.title" class="mb-4 text-2xl leading-none tracking-tight">{{ props.title }}</h2>
     <p v-if="props.description" class="mb-4">{{ props.description }}</p>
 
-    <SComponent v-for="[key, options] of Object.entries(properties)" :id="id.length <= 0 ? `${key}` : `${id}.${key}`"
-      :key="key" :model-value="modelValue[key]"
+    <SComponent
+      v-for="[key, options] of Object.entries(properties)"
+      :id="id.length <= 0 ? `${key}` : `${id}.${key}`"
+      :key="key"
+      :model-value="modelValue[key]"
       :json-schema-path="jsonSchemaPath?.length <= 0 ? `properties.${key}` : `${jsonSchemaPath}.properties.${key}`"
-      v-bind="options" :isRequired="required.includes(key)" class="mt-4"
-      @update:model-value="(event: unknown) => onInput(event, key)" @submit="() => emit('submit')" />
+      v-bind="options"
+      :isRequired="required.includes(key)"
+      class="mt-4"
+      @update:model-value="(event: unknown) => onInput(event, key)"
+      @submit="() => emit('submit')"
+    />
   </div>
 </template>

package/dist/runtime/components/Toggle.vue

@@ -3,7 +3,6 @@ const props = defineProps<{
   id: string
   title?: string
   description?: string
-  enum?: boolean[]
   isRequired: boolean
 }>()
 

package/dist/runtime/components/array/ArrayObject.vue

@@ -0,0 +1,266 @@
+<script lang="ts" setup>
+import { Draft2019 } from 'json-schema-library'
+import SComponent from '../Component.vue'
+import { ref, computed, h, resolveComponent } from 'vue'
+import type { TableColumn } from '@nuxt/ui'
+import type { Row } from '@tanstack/vue-table'
+import type { PropertiesType } from '../../types'
+
+const UDropdownMenu = resolveComponent('UDropdownMenu')
+const UButton = resolveComponent('UButton')
+
+const props = defineProps<{
+  id: string
+  title?: string
+  description?: string
+  jsonSchemaPath: string
+  items: PropertiesType
+  modelValue: Record<string, unknown>[]
+  isRequired: boolean
+  minItems?: number
+  maxItems?: number
+  edit?: boolean
+  columns?: TableColumn<{}>[]
+  editInline?: boolean
+}>()
+const emit = defineEmits(['update:modelValue', 'submit'])
+
+const massActions = [
+  [
+    {
+      label: 'delete',
+      click: () => {
+        massRemove()
+        selectedRows.value = []
+      }
+    }
+  ]
+]
+
+const selectedRows = ref<{ __id: any }[]>([])
+const schemaObject = ref(new Draft2019(props.items))
+const model = ref<{ open: boolean; index: number; value: Record<string, unknown> }>({
+  open: false,
+  index: 0,
+  value: {}
+})
+const expand = ref({
+  openedRows: [],
+  row: null
+})
+
+const values = computed(() => {
+  if (props.modelValue.length > 0) {
+    return props.modelValue.map((x, i) => ({ ...x, __id: i }))
+  } else if (props.minItems && props.minItems > 0) {
+    const template = schemaObject.value.getTemplate()
+    return [...Array(props.minItems)].map((_, i) => ({ ...template, __id: i }))
+  }
+
+  return []
+})
+
+const columns = computed<TableColumn<{}>[]>(() => {
+  const columns = props.columns ?? []
+  if (props.editInline) {
+    columns.push({
+      id: 'expand',
+      cell: ({ row }) =>
+        h(UButton, {
+          color: 'neutral',
+          variant: 'ghost',
+          icon: 'i-lucide-chevron-down',
+          square: true,
+          'aria-label': 'Expand',
+          ui: {
+            leadingIcon: ['transition-transform', row.getIsExpanded() ? 'duration-200 rotate-180' : '']
+          },
+          onClick: () => row.toggleExpanded()
+        })
+    })
+  }
+
+  if (props.items.type === 'object') {
+    for (const column of Object.keys(props?.items?.properties).map<TableColumn<{}>>(x => ({
+      header: x,
+      accessorKey: x,
+      cell: ({ row }) => row.getValue(x)
+    }))) {
+      columns.push(column)
+    }
+  }
+
+  if (props.edit) {
+    columns.push({
+      id: 'actions',
+      cell: ({ row }) => {
+        return h(
+          'div',
+          { class: 'text-right' },
+          h(
+            UDropdownMenu,
+            {
+              content: {
+                align: 'end'
+              },
+              items: getRowItems(row),
+              'aria-label': 'Actions dropdown'
+            },
+            () =>
+              h(UButton, {
+                icon: 'i-lucide-ellipsis-vertical',
+                color: 'neutral',
+                variant: 'ghost',
+                class: 'ml-auto',
+                'aria-label': 'Actions dropdown'
+              })
+          )
+        )
+      }
+    })
+  }
+
+  return columns
+})
+
+function getRowItems(row: Row<{}>) {
+  return [
+    {
+      label: 'edit',
+      onSelect: () => open(row.index)
+    },
+    {
+      label: 'delete',
+      onSelect: () => {
+        remove(row.index)
+        selectedRows.value = []
+      }
+    }
+  ]
+}
+
+const options = computed(() => {
+  let res: {
+    modelValue?: any
+    'onUpdate:modelValue'?: (v: any) => void
+    expand?: {
+      openedRows: any[]
+      row: null
+    }
+    'update:expand'?: (v: any) => void
+  } = {}
+
+  if (props.edit) {
+    res.modelValue = selectedRows.value
+    res['onUpdate:modelValue'] = value => (selectedRows.value = value)
+  }
+  if (props.editInline) {
+    res.expand = expand.value
+    res['update:expand'] = value => (expand.value = value)
+  }
+
+  return res
+})
+
+const open = (index: number) => {
+  model.value = { open: true, index: index, value: structuredClone(values.value[index]) }
+}
+
+const onInput = (value: Record<string, unknown>, index: number) => {
+  props.modelValue[index] = value
+  emit('update:modelValue', props.modelValue)
+}
+
+const add = () => {
+  emit('update:modelValue', [...props.modelValue, schemaObject.value.getTemplate()])
+}
+
+const remove = (index: number) => {
+  props.modelValue.splice(index, 1)
+  emit('update:modelValue', props.modelValue)
+}
+
+const massRemove = () => {
+  let res = props.modelValue
+  for (const index of selectedRows.value.map(x => x.__id)) {
+    res.splice(index, 1)
+  }
+
+  emit('update:modelValue', res)
+}
+</script>
+
+<template>
+  <div>
+    <h2 v-if="props.title" class="mb-4 text-2xl leading-none tracking-tight">{{ props.title }}</h2>
+    <p v-if="props.description" class="mb-4">{{ props.description }}</p>
+
+    <div>
+      <div class="flex justify-between items-center w-full px-4 py-3">
+        <div class="flex gap-1.5 items-center">
+          <UButton
+            v-if="edit"
+            :disabled="maxItems && values.length >= maxItems"
+            @click="add"
+            icon="i-heroicons-plus"
+            trailing
+            color="neutral"
+            size="xs"
+          />
+        </div>
+        <div class="flex gap-1.5 items-center">
+          <UDropdownMenu v-if="selectedRows.length > 0" :items="massActions">
+            <UButton icon="i-heroicons-chevron-down" trailing color="neutral" size="xs"> Action </UButton>
+          </UDropdownMenu>
+        </div>
+      </div>
+      <UTable v-bind="options" by="__id" :data="values" :columns="columns" class="flex-1">
+        <template #expanded="{ row }">
+          <div class="p-4">
+            <SComponent
+              :id="id.length <= 0 ? `${row.index}` : `${id}[${row.index}]`"
+              :model-value="row.original"
+              :json-schema-path="
+                jsonSchemaPath?.length <= 0 ? `properties.${row.index}` : `${jsonSchemaPath}[${row.index}]`
+              "
+              v-bind="items"
+              :isRequired="false"
+              class="mt-4"
+              @update:model-value="(event: Record<string, unknown>) => onInput(event, row.index)"
+              @submit="() => emit('submit')"
+            />
+          </div>
+        </template>
+      </UTable>
+    </div>
+    <UModal v-model:open="model.open">
+      <template #content>
+        <UCard>
+          <SComponent
+            :id="id.length <= 0 ? `${model.index}` : `${id}[0]`"
+            :model-value="model.value"
+            :json-schema-path="
+              jsonSchemaPath?.length <= 0 ? `properties.${model.index}` : `${jsonSchemaPath}[${model.index}]`
+            "
+            v-bind="items"
+            :isRequired="false"
+            class="mt-4"
+            @update:model-value="(event: Record<string, unknown>) => (model.value = event)"
+            @submit="() => emit('submit')"
+          />
+          <template #footer>
+            <UButton
+              @click="
+                () => {
+                  onInput(model.value, model.index)
+                  model.open = false
+                }
+              "
+              >Save</UButton
+            >
+          </template>
+        </UCard>
+      </template>
+    </UModal>
+  </div>
+</template>

package/dist/runtime/types/index.d.ts

@@ -3,3 +3,9 @@ export type CustomValidation = {
     message: string;
     validate(state: any): boolean;
 };
+export type PropertiesType = {
+    properties: {
+        [key: string]: unknown;
+    };
+    [key: string]: unknown;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ederzeel/nuxt-schema-form-nightly",
-  "version": "0.1.0-29118956.9ee4a3d",
+  "version": "0.1.0-29119142.f6bc066",
   "description": "A runtime form generator for nuxt",
   "type": "module",
   "exports": {