@ederzeel/nuxt-schema-form-nightly 0.1.0-29104650.63764c1 → 0.1.0-29104769.df64a23

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
@@ -22,14 +22,7 @@ const props = defineProps<{
   columns?: TableColumn<{}>[]
   editInline?: boolean
 }>()
-
-type ColumnItem = {
-  key: string
-  label?: string
-  header?: string
-  accessorKey?: string
-  class?: string
-}
+const emit = defineEmits(['update:modelValue', 'submit'])
 
 type PropertiesType = {
   properties: {
@@ -37,13 +30,30 @@ type PropertiesType = {
   }
   [key: string]: unknown
 }
-const emit = defineEmits(['update:modelValue', 'submit'])
-const onInput = (value: 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) {
@@ -56,46 +66,6 @@ const values = computed(() => {
   return []
 })
 
-const add = () => {
-  console.log('add')
-  emit('update:modelValue', [...props.modelValue, schemaObject.value.getTemplate()])
-}
-
-const remove = (index: number) => {
-  const res = 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)
-}
-
-const model = ref({
-  open: false,
-  index: 0
-})
-
-const open = (index: number) => {
-  model.value = { open: true, index: index }
-}
-
-const massActions = [
-  [
-    {
-      label: 'delete',
-      click: () => {
-        massRemove()
-        selectedRows.value = []
-      }
-    }
-  ]
-]
-
 const columns = computed<TableColumn<{}>[]>(() => {
   const columns = props.columns ?? []
   if (props.editInline) {
@@ -175,17 +145,10 @@ function getRowItems(row: Row<{}>) {
   ]
 }
 
-const selectedRows = ref<{ __id: any }[]>([])
-
-const expand = ref({
-  openedRows: [],
-  row: null
-})
-
 const options = computed(() => {
   let res: {
     modelValue?: any
-    // 'onUpdate:modelValue'?: (v: any) => void
+    'onUpdate:modelValue'?: (v: any) => void
     expand?: {
       openedRows: any[]
       row: null
@@ -195,7 +158,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
@@ -204,6 +167,33 @@ const options = computed(() => {
 
   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>
@@ -214,15 +204,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 +214,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 +229,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-29104769.df64a23",
   "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",