@ederzeel/nuxt-schema-form-nightly 0.1.0-29104650.63764c1 → 0.1.0-29104758.61b406e

package/dist/runtime/components/Array.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { Draft2019 } from 'json-schema-library'
 import SComponent from './Component.vue'
-import { ref, computed, h, resolveComponent, type Ref } from 'vue'
+import { ref, computed, h, resolveComponent } from 'vue'
 import type { TableColumn } from '@nuxt/ui'
 import type { Row } from '@tanstack/vue-table'
 
@@ -14,7 +14,7 @@ const props = defineProps<{
   description?: string
   jsonSchemaPath: string
   items: PropertiesType
-  modelValue: unknown[]
+  modelValue: Record<string, unknown>[]
   isRequired: boolean
   minItems?: number
   maxItems?: number
@@ -38,7 +38,7 @@ type PropertiesType = {
   [key: string]: unknown
 }
 const emit = defineEmits(['update:modelValue', 'submit'])
-const onInput = (value: unknown, index: number) => {
+const onInput = (value: Record<string, unknown>, index: number) => {
   props.modelValue[index] = value
   emit('update:modelValue', props.modelValue)
 }
@@ -57,7 +57,6 @@ const values = computed(() => {
 })
 
 const add = () => {
-  console.log('add')
   emit('update:modelValue', [...props.modelValue, schemaObject.value.getTemplate()])
 }
 
@@ -75,13 +74,14 @@ const massRemove = () => {
   emit('update:modelValue', res)
 }
 
-const model = ref({
+const model = ref<{ open: boolean; index: number; value: Record<string, unknown> }>({
   open: false,
-  index: 0
+  index: 0,
+  value: {}
 })
 
 const open = (index: number) => {
-  model.value = { open: true, index: index }
+  model.value = { open: true, index: index, value: structuredClone(values.value[index]) }
 }
 
 const massActions = [
@@ -185,7 +185,7 @@ const expand = ref({
 const options = computed(() => {
   let res: {
     modelValue?: any
-    // 'onUpdate:modelValue'?: (v: any) => void
+    'onUpdate:modelValue'?: (v: any) => void
     expand?: {
       openedRows: any[]
       row: null
@@ -195,7 +195,7 @@ const options = computed(() => {
 
   if (props.edit) {
     res.modelValue = selectedRows.value
-    // res['onUpdate:modelValue'] = value => (selectedRows.value = value)
+    res['onUpdate:modelValue'] = value => (selectedRows.value = value)
   }
   if (props.editInline) {
     res.expand = expand.value
@@ -214,15 +214,8 @@ const options = computed(() => {
     <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">
@@ -231,21 +224,14 @@ const options = computed(() => {
         </div>
       </div>
       <UTable v-bind="options" by="__id" :data="values" :columns="columns" class="flex-1">
-        <template #expanded="{ row, index }">
+        <template #expanded="{ row }">
+          {{ row }}
           <div class="p-4">
-            {{ row }}
-            <SComponent
-              :id="id.length <= 0 ? `${index}` : `${id}[${row.index}].${items.id}`"
-              :model-value="row.original"
-              :json-schema-path="
-                jsonSchemaPath?.length <= 0 ? `properties.${index}` : `${jsonSchemaPath}[${row.index}]`
-              "
-              v-bind="items"
-              :isRequired="false"
-              class="mt-4"
-              @update:model-value="(event: unknown) => onInput(event, row.index)"
-              @submit="() => emit('submit')"
-            />
+            <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>
@@ -253,20 +239,18 @@ const options = computed(() => {
     <UModal v-model:open="model.open">
       <template #content>
         <UCard>
-          <SComponent
-            :id="id.length <= 0 ? `${model.index}` : `${id}[0].${items.id}`"
-            :model-value="values[model.index]"
-            :json-schema-path="
-              jsonSchemaPath?.length <= 0 ? `properties.${model.index}` : `${jsonSchemaPath}[${model.index}]`
-            "
-            v-bind="items"
-            :isRequired="false"
-            class="mt-4"
-            @update:model-value="event => onInput(event, model.index)"
-            @submit="() => emit('submit')"
-          />
+          <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>Save</UButton>
+            <UButton @click="
+              () => {
+                onInput(model.value, model.index)
+                model.open = false
+              }
+            ">Save</UButton>
           </template>
         </UCard>
       </template>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ederzeel/nuxt-schema-form-nightly",
-  "version": "0.1.0-29104650.63764c1",
+  "version": "0.1.0-29104758.61b406e",
   "description": "A runtime form generator for nuxt",
   "type": "module",
   "exports": {
@@ -52,6 +52,7 @@
     "@nuxt/kit": "^3.15.4",
     "@nuxt/module-builder": "^0.8.4",
     "@nuxt/ui": "^3.0.0",
+    "@tanstack/vue-table": "^8.21.3",
     "@types/eslint": "^9.6.1",
     "eslint": "^9.19.0",
     "eslint-config-prettier": "^10.0.1",