@ederzeel/nuxt-schema-form-nightly 0.1.0-29031029.c108247 → 0.1.0-29032610.195dce6

package/dist/runtime/components/SArray.vue

@@ -0,0 +1,235 @@
+<script lang="ts" setup>
+import { Draft2019 } from 'json-schema-library'
+import SComponent from './SComponent.vue'
+import { ref, computed } from 'vue'
+
+const props = defineProps<{
+  id: string
+  title?: string
+  description?: string
+  jsonSchemaPath: string
+  items: PropertiesType
+  modelValue: unknown[]
+  isRequired: boolean
+  minItems?: number
+  maxItems?: number
+  edit?: boolean
+  columns?: ColumnItem[]
+  editInline?: boolean
+}>()
+
+type ColumnItem = {
+  key: string
+  label?: string
+  class?: string
+}
+
+type PropertiesType = {
+  properties: {
+    [key: string]: unknown
+  }
+  [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 schemaObject = ref(new Draft2019(props.items))
+
+const values = computed(() => {
+  if (props.modelValue.length > 0) {
+    return props.modelValue.map((x, i) => ({ ...x, __id: i }))
+  } else if (props.minItems && props.minItems > 0) {
+    const template = schemaObject.value.getTemplate()
+    return [...Array(props.minItems)].map((_, i) => ({ ...template, __id: i }))
+  }
+
+  return []
+})
+
+const add = () => {
+  emit('update:modelValue', [...props.modelValue, schemaObject.value.getTemplate()])
+}
+
+const remove = (index: number) => {
+  const res = props.modelValue.splice(index, 1)
+  emit('update:modelValue', res)
+}
+
+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 actions = (i: number) => [
+  [
+    {
+      label: 'edit',
+      click: () => open(i)
+    }
+  ],
+  [
+    {
+      label: 'delete',
+      click: () => {
+        remove(i)
+        selectedRows.value = []
+      }
+    }
+  ]
+]
+
+const massActions = [
+  [
+    {
+      label: 'delete',
+      click: () => {
+        massRemove()
+        selectedRows.value = []
+      }
+    }
+  ]
+]
+
+const columns = computed(() => {
+  const columns = props.columns ?? []
+
+  if (props.items.type === 'object') {
+    for (const column of Object.keys(props?.items?.properties).map(x => ({ key: x, label: x }))) {
+      columns.push(column)
+    }
+  }
+
+  if (props.edit) {
+    columns.push({
+      key: 'actions',
+      class: 'w-2'
+    })
+  }
+
+  return columns
+})
+
+const selectedRows = ref([])
+
+const todoStatus = [
+  {
+    key: 'uncompleted',
+    label: 'In Progress',
+    value: false
+  },
+  {
+    key: 'completed',
+    label: 'Completed',
+    value: true
+  }
+]
+
+const expand = ref({
+  openedRows: [],
+  row: null
+})
+
+const options = computed(() => {
+  const res = {}
+  if (props.edit) {
+    res.modelValue = selectedRows.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>
+
+<template>
+  <div>
+    <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>
+
+    <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="gray"
+            size="xs"
+          />
+        </div>
+        <div class="flex gap-1.5 items-center">
+          <UDropdown v-if="selectedRows.length > 0" :items="massActions">
+            <UButton icon="i-heroicons-chevron-down" trailing color="gray" size="xs"> Action </UButton>
+          </UDropdown>
+        </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 }">
+          <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')"
+            />
+          </div>
+        </template>
+
+        <template #actions-data="{ index }">
+          <UDropdown :items="actions(index)">
+            <UButton color="gray" variant="ghost" icon="i-heroicons-ellipsis-horizontal-20-solid" />
+          </UDropdown>
+        </template>
+      </UTable>
+    </div>
+    <UModal v-model="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>
+    </UModal>
+  </div>
+</template>

package/dist/runtime/components/SComponent.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { computed, defineEmits } from 'vue'
+import { computed } from 'vue'
 
 type Properties = {
   properties?: { [key: string]: unknown }
@@ -9,7 +9,7 @@ export type SComponentProps = {
   id?: string
   title?: string
   renderer?: string
-  type: string
+  type?: string
   properties?: Properties
   enum?: string[]
   enum_titles?: string[]
@@ -18,10 +18,15 @@ export type SComponentProps = {
   jsonSchemaPath?: string
   required?: string[]
   isRequired: boolean
+  items?: { [key: string]: unknown }
+  edit?: boolean
+  minItems?: number
+  maxItems?: number
+  editInline?: boolean
   validateFields?: (fields: string[]) => Promise<boolean>
 }
 
-const props = withDefaults(defineProps<SComponentProps>(), { id: '', jsonSchemaPath: 'test' })
+const props = withDefaults(defineProps<SComponentProps>(), { id: '', jsonSchemaPath: '' })
 const value = defineModel<unknown>({ required: true, default: '' })
 const emit = defineEmits(['submit'])
 
@@ -36,13 +41,19 @@ const onSubmit = () => {
 
 <template>
   <div class="s-form-group">
-    <component v-if="renderer" v-bind="options" v-model="value"
-      :is="typeof renderer === 'string' ? renderer : undefined" @submit="onSubmit" />
+    <component
+      v-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" />
     <SInputField v-else-if="type === 'string'" v-bind="options" v-model="value" />
     <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>
 </template>

package/dist/runtime/components/SForm.vue

@@ -52,14 +52,19 @@ const submit = () => {
 
 <template>
   <div>
-    <!-- {{ formRef ? formRef.errors : undefined }} -->
+    {{ 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" />
+      <SComponent
+        v-model="value"
+        v-bind="schema"
+        :validate-fields="validateFields"
+        @submit="submit"
+        :isRequired="true"
+      />
       <slot />
 
       <slot name="submit">
-        <UButton class="btn" type="submit"> Submit </UButton>
+        <UButton class="btn mt-4" type="submit"> Submit </UButton>
       </slot>
     </UForm>
   </div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ederzeel/nuxt-schema-form-nightly",
-  "version": "0.1.0-29031029.c108247",
+  "version": "0.1.0-29032610.195dce6",
   "description": "A runtime form generator for nuxt",
   "type": "module",
   "exports": {