@ederzeel/nuxt-schema-form-nightly 0.1.0-29150768.3ab740d → 0.1.0-29160663.c20ef12

package/dist/runtime/components/Array.vue

@@ -10,7 +10,7 @@ const props = defineProps<{
   title?: string
   description?: string
   jsonSchemaPath: string
-  items: PropertiesType
+  items: PropertiesType & { required?: string[] }
   isRequired: boolean
   minItems?: number
   maxItems?: number
@@ -19,6 +19,7 @@ const props = defineProps<{
   editInline?: boolean
   modelValue: unknown[]
   required?: string[]
+  setHidden?: (value: boolean) => void
 }>()
 
 const emit = defineEmits(['update:modelValue', 'submit'])

package/dist/runtime/components/Component.vue

@@ -35,6 +35,7 @@ export type SComponentProps = {
   editInline?: boolean
   columns?: TableColumn<{}>[]
   validateFields?: (fields: string[]) => Promise<boolean>
+  setHidden?: (value: boolean) => void
 }
 
 const props = withDefaults(defineProps<SComponentProps>(), { id: '', jsonSchemaPath: '' })
@@ -142,6 +143,7 @@ const Render = () => {
       isRequired: props.isRequired,
       jsonSchemaPath: `${props.jsonSchemaPath}.${props.id}`,
       onSubmit,
+      setHidden: props.setHidden,
       modelValue: value.value as Record<string, unknown>,
       'onUpdate:modelValue': (v: Record<string, unknown>) => {
         value.value = v
@@ -163,6 +165,7 @@ const Render = () => {
       editInline: props.editInline,
       jsonSchemaPath: `${props.jsonSchemaPath}.${props.id}`,
       onSubmit,
+      setHidden: props.setHidden,
       modelValue: value.value as unknown[],
       'onUpdate:modelValue': (v: unknown) => {
         value.value = v as unknown[]

package/dist/runtime/components/Form.vue

@@ -58,19 +58,39 @@ const submit = () => {
 defineExpose({
   submit
 })
+const isHidden = ref(false)
+const setHidden = (value: boolean) => (isHidden.value = value)
 </script>
 
 <template>
   <div>
     <!-- {{ formRef ? formRef.errors : undefined }} -->
-    <UForm ref="formRef" :state="value" :schema="formValidationSchema" autocomplete="on" @submit="onSubmit">
-      <SComponent v-model="value" v-bind="schema" :validate-fields="validateFields" @submit="submit"
-        :isRequired="true" />
-      <slot />
+    <div id="test-teleport" class="top-0 w-full h-full">
+      <UForm
+        class="overflow-auto bg-white"
+        ref="formRef"
+        :state="value"
+        :schema="formValidationSchema"
+        autocomplete="on"
+        @submit="onSubmit"
+        v-show="!isHidden"
+      >
+        <SComponent
+          v-model="value"
+          v-bind="schema"
+          :validate-fields="validateFields"
+          :setHidden="setHidden"
+          @submit="submit"
+          :isRequired="true"
+        />
+        <slot />
 
-      <slot name="submit">
-        <UButton class="btn mt-4" type="submit"> Submit </UButton>
-      </slot>
-    </UForm>
+        <div class="mt-4 flex gap-2 justify-end">
+          <slot name="submit">
+            <UButton class="btn mt-4" type="submit"> Submit </UButton>
+          </slot>
+        </div>
+      </UForm>
+    </div>
   </div>
 </template>

package/dist/runtime/components/Object.vue

@@ -8,8 +8,9 @@ const props = defineProps<{
   jsonSchemaPath: string
   properties: PropertiesType
   modelValue: Record<string, unknown>
-  required: string[]
+  required?: string[]
   isRequired: boolean
+  setHidden?: (value: boolean) => void
 }>()
 
 type PropertiesType = {
@@ -33,7 +34,8 @@ const onInput = (value: unknown, key: string) => {
       :model-value="modelValue[key]"
       :json-schema-path="jsonSchemaPath?.length <= 0 ? `properties.${key}` : `${jsonSchemaPath}.properties.${key}`"
       v-bind="options"
-      :isRequired="required.includes(key)"
+      :isRequired="required ? required.includes(key) : false"
+      :setHidden="setHidden"
       class="mt-4"
       @update:model-value="(event: unknown) => onInput(event, key)"
       @submit="() => emit('submit')"

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

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { compileSchema } from 'json-schema-library'
 import SComponent from '../Component.vue'
-import { ref, computed, h, resolveComponent } from 'vue'
+import { ref, toRaw, computed, h, resolveComponent } from 'vue'
 import type { TableColumn } from '@nuxt/ui'
 import type { Row } from '@tanstack/vue-table'
 import type { PropertiesType } from '../../types'
@@ -23,6 +23,7 @@ const props = defineProps<{
   columns?: TableColumn<{}>[]
   editInline?: boolean
   required?: string[]
+  setHidden?: (value: boolean) => void
 }>()
 const emit = defineEmits(['update:modelValue', 'submit'])
 
@@ -40,10 +41,9 @@ const massActions = [
 
 const selectedRows = ref<{ __id: any }[]>([])
 const schemaObject = ref(compileSchema(props.items))
-const model = ref<{ open: boolean; index: number; value: Record<string, unknown> }>({
-  open: false,
+const model = ref<{ index: number; value: Record<string, unknown> | undefined }>({
   index: 0,
-  value: {}
+  value: undefined
 })
 const expand = ref({
   openedRows: [],
@@ -52,7 +52,7 @@ const expand = ref({
 
 const values = computed(() => {
   if (props.modelValue.length > 0) {
-    return props.modelValue.map((x, i) => ({ ...x, __id: i }))
+    return toRaw(props.modelValue).map((x, i) => ({ ...x, __id: i }))
   } else if (props.minItems && props.minItems > 0) {
     const template = schemaObject.value.getData()
     return [...Array(props.minItems)].map((_, i) => ({ ...template, __id: i }))
@@ -61,8 +61,36 @@ const values = computed(() => {
   return []
 })
 
+type Entries<T> = {
+  [K in keyof T]: [K, T[K]]
+}[keyof T][]
+
+const geneateColumnsFromSchema = (items: PropertiesType): TableColumn<{}>[] => {
+  if (!items.properties) return []
+  const res: TableColumn<{}>[] = (Object.entries(items.properties) as [string, PropertiesType][]).map(
+    ([key, value]): TableColumn<{}, unknown[]> => {
+      if (value.type === 'array') {
+        return {
+          header: value.title || key,
+          accessorKey: key,
+          cell: ({ getValue }) => {
+            return getValue().length
+          }
+        }
+      }
+      return {
+        header: value.title || key,
+        accessorKey: key
+      }
+    }
+  ) as TableColumn<{}>[]
+
+  return res
+}
+
 const columns = computed<TableColumn<{}>[]>(() => {
-  const columns = props.columns ? Array.from(props.columns) : []
+  console.log(geneateColumnsFromSchema(props.items))
+  const columns = props.columns ? Array.from(props.columns) : geneateColumnsFromSchema(props.items)
 
   if (props.editInline) {
     columns.unshift({
@@ -80,16 +108,6 @@ const columns = computed<TableColumn<{}>[]>(() => {
           onClick: () => row.toggleExpanded()
         })
     })
-
-    if (!props.columns && 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) {
@@ -165,6 +183,9 @@ const options = computed(() => {
 })
 
 const open = (index: number) => {
+  console.log('click')
+  console.log(values.value[index])
+  if (props.setHidden) props.setHidden(true)
   model.value = { open: true, index: index, value: structuredClone(values.value[index]) }
 }
 
@@ -190,6 +211,9 @@ const massRemove = () => {
 
   emit('update:modelValue', res)
 }
+
+const setHiddenSelf = (value: boolean) => (hidden.value = value)
+const hidden = ref(false)
 </script>
 
 <template>
@@ -235,34 +259,44 @@ const massRemove = () => {
         </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}]`
+    <Teleport to="#test-teleport">
+      <div v-if="model.value" v-show="!hidden" class="overflow-auto bg-white" style="background-color: white">
+        <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"
+          :setHidden="setHiddenSelf"
+          @update:model-value="(event: Record<string, unknown>) => (model.value = event)"
+          @submit="() => emit('submit')"
+        />
+        <div class="mt-4 flex gap-2 justify-end">
+          <UButton
+            @click="
+              () => {
+                onInput(model.value, model.index)
+                if (props.setHidden) props.setHidden(false)
+                model.value = undefined
+              }
             "
-            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>
+            >Save</UButton
+          >
+          <UButton
+            variant="outline"
+            @click="
+              () => {
+                if (props.setHidden) props.setHidden(false)
+                model.value = undefined
+              }
+            "
+            >Cancle</UButton
+          >
+        </div>
+      </div>
+    </Teleport>
   </div>
 </template>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ederzeel/nuxt-schema-form-nightly",
-  "version": "0.1.0-29150768.3ab740d",
+  "version": "0.1.0-29160663.c20ef12",
   "description": "A runtime form generator for nuxt",
   "type": "module",
   "exports": {