@ederzeel/nuxt-schema-form-nightly 0.1.0-29104388.947c8fa → 0.1.0-29104650.63764c1

package/dist/runtime/components/Array.vue

@@ -1,7 +1,12 @@
 <script lang="ts" setup>
 import { Draft2019 } from 'json-schema-library'
 import SComponent from './Component.vue'
-import { ref, computed } from 'vue'
+import { ref, computed, h, resolveComponent, type Ref } from 'vue'
+import type { TableColumn } from '@nuxt/ui'
+import type { Row } from '@tanstack/vue-table'
+
+const UDropdownMenu = resolveComponent('UDropdownMenu')
+const UButton = resolveComponent('UButton')
 
 const props = defineProps<{
   id: string
@@ -14,13 +19,15 @@ const props = defineProps<{
   minItems?: number
   maxItems?: number
   edit?: boolean
-  columns?: ColumnItem[]
+  columns?: TableColumn<{}>[]
   editInline?: boolean
 }>()
 
 type ColumnItem = {
   key: string
   label?: string
+  header?: string
+  accessorKey?: string
   class?: string
 }
 
@@ -50,12 +57,13 @@ const values = computed(() => {
 })
 
 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', res)
+  emit('update:modelValue', props.modelValue)
 }
 
 const massRemove = () => {
@@ -76,24 +84,6 @@ const open = (index: number) => {
   model.value = { open: true, index: index }
 }
 
-const actions = (i: number) => [
-  [
-    {
-      label: 'edit',
-      click: () => open(i)
-    }
-  ],
-  [
-    {
-      label: 'delete',
-      click: () => {
-        remove(i)
-        selectedRows.value = []
-      }
-    }
-  ]
-]
-
 const massActions = [
   [
     {
@@ -106,39 +96,86 @@ const massActions = [
   ]
 ]
 
-const columns = computed(() => {
+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(x => ({ key: x, label: x }))) {
+    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({
-      key: 'actions',
-      class: 'w-2'
+      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
 })
 
-const selectedRows = ref([])
-
-const todoStatus = [
-  {
-    key: 'uncompleted',
-    label: 'In Progress',
-    value: false
-  },
-  {
-    key: 'completed',
-    label: 'Completed',
-    value: true
-  }
-]
+function getRowItems(row: Row<{}>) {
+  return [
+    {
+      label: 'edit',
+      onSelect: () => open(row.index)
+    },
+    {
+      label: 'delete',
+      onSelect: () => {
+        remove(row.index)
+        selectedRows.value = []
+      }
+    }
+  ]
+}
+
+const selectedRows = ref<{ __id: any }[]>([])
 
 const expand = ref({
   openedRows: [],
@@ -146,15 +183,25 @@ const expand = ref({
 })
 
 const options = computed(() => {
-  const res = {}
+  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)
+    // res['onUpdate:modelValue'] = value => (selectedRows.value = value)
   }
   if (props.editInline) {
     res.expand = expand.value
     res['update:expand'] = value => (expand.value = value)
   }
+
   return res
 })
 </script>
@@ -167,8 +214,15 @@ 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">
@@ -176,39 +230,46 @@ const options = computed(() => {
           </UDropdownMenu>
         </div>
       </div>
-      <UTable v-bind="options" by="__id" :rows="values" :columns="columns">
-        <template #name-data="{ row }">
-          <span :class="[selected.find(person => person.id === row.id) && 'text-primary-500 dark:text-primary-400']">{{
-            row.name
-            }}</span>
-        </template>
-
-        <template #expand="{ row, index }">
+      <UTable v-bind="options" by="__id" :data="values" :columns="columns" class="flex-1">
+        <template #expanded="{ row, index }">
           <div class="p-4">
-            <SComponent :id="id.length <= 0 ? `${index}` : `${id}[${index}].${items.id}`" :model-value="row"
-              :json-schema-path="jsonSchemaPath?.length <= 0 ? `properties.${index}` : `${jsonSchemaPath}[${index}]`"
-              v-bind="items" :isRequired="false" class="mt-4" @update:model-value="event => onInput(event, index)"
-              @submit="() => emit('submit')" />
+            {{ 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')"
+            />
           </div>
         </template>
-
-        <template #actions-data="{ index }">
-          <UDropdownMenu :items="actions(index)">
-            <UButton color="neutral" variant="ghost" icon="i-heroicons-ellipsis-horizontal-20-solid" />
-          </UDropdownMenu>
-        </template>
       </UTable>
     </div>
     <UModal v-model:open="model.open">
-      <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')" />
-        <template #footer>
-          <UButton>Save</UButton>
-        </template>
-      </UCard>
+      <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')"
+          />
+          <template #footer>
+            <UButton>Save</UButton>
+          </template>
+        </UCard>
+      </template>
     </UModal>
   </div>
 </template>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ederzeel/nuxt-schema-form-nightly",
-  "version": "0.1.0-29104388.947c8fa",
+  "version": "0.1.0-29104650.63764c1",
   "description": "A runtime form generator for nuxt",
   "type": "module",
   "exports": {