@ederzeel/nuxt-schema-form-nightly 0.1.0-29118956.9ee4a3d → 0.1.0-29119026.5bb3293

package/dist/runtime/components/Array.vue

@@ -4,6 +4,7 @@ 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')
@@ -24,13 +25,6 @@ const props = defineProps<{
 }>()
 const emit = defineEmits(['update:modelValue', 'submit'])
 
-type PropertiesType = {
-  properties: {
-    [key: string]: unknown
-  }
-  [key: string]: unknown
-}
-
 const massActions = [
   [
     {
@@ -204,8 +198,15 @@ const massRemove = () => {
     <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" />
+          <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">
@@ -215,13 +216,19 @@ const massRemove = () => {
       </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"
+            <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')" />
+              @submit="() => emit('submit')"
+            />
           </div>
         </template>
       </UTable>
@@ -229,18 +236,28 @@ const massRemove = () => {
     <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"
+          <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')" />
+            @submit="() => emit('submit')"
+          />
           <template #footer>
-            <UButton @click="
-              () => {
-                onInput(model.value, model.index)
-                model.open = false
-              }
-            ">Save</UButton>
+            <UButton
+              @click="
+                () => {
+                  onInput(model.value, model.index)
+                  model.open = false
+                }
+              "
+              >Save</UButton
+            >
           </template>
         </UCard>
       </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 Record<string, unknown>[],
+      'onUpdate:modelValue': (v: string) => {
+        value.value = v
+      }
+    })
+  }
+  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
 }>()
 

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/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-29119026.5bb3293",
   "description": "A runtime form generator for nuxt",
   "type": "module",
   "exports": {