@ederzeel/nuxt-schema-form-nightly 0.1.0-29041090.dfa7689 → 0.1.0-29072953.6ee0e39

package/dist/runtime/components/{SForm.vue → Form.vue}

@@ -4,6 +4,7 @@ import convertToYup from 'json-schema-yup-transformer'
 import type { JsonSchema } from 'json-schema-library'
 import { computed, ref } from 'vue'
 import type { Config } from 'json-schema-yup-transformer'
+import type { CustomValidation } from '#schema-form-types'
 
 const props = defineProps<{
   schema: JsonSchema
@@ -19,19 +20,21 @@ async function onSubmit(_event: unknown) {
   emit('submit', value.value)
 }
 
-const formValidationSchema = computed(() => convertToYup(props.schema, props?.options?.jsonSchemaYupTransfromer ?? {}))
-
-export type CustomValidation = {
-  field: string
-  message: string
-  validate(state: any): boolean
-}
+const formValidationSchema = computed(() => {
+  if (props?.options == null) return {}
+  return convertToYup(props.schema, props?.options?.jsonSchemaYupTransfromer ?? {})
+})
 
 const validateFields = async (fields: string[]) => {
   let allValid = true
   for (const field of fields) {
-    if (!(await formRef.value.validate(field, { silent: true }))) {
-      allValid = false
+    try {
+      if (!(await formRef.value.validate({ name: field, silent: true }))) {
+        allValid = false
+      }
+    } catch (err) {
+      console.log(err)
+      return false
     }
   }
 
@@ -39,7 +42,7 @@ const validateFields = async (fields: string[]) => {
     for (const { field, message, validate } of props.options.customValidation) {
       if (!fields.includes(field)) continue
       if (!validate(value.value)) {
-        const errors = [{ path: field, message }]
+        const errors = [{ field, message }]
         formRef.value.setErrors(errors, field)
         allValid = false
       }

package/dist/runtime/components/SArray.vue

@@ -173,14 +173,14 @@ const options = computed(() => {
             @click="add"
             icon="i-heroicons-plus"
             trailing
-            color="gray"
+            color="neutral"
             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>
+          <UDropdownMenu v-if="selectedRows.length > 0" :items="massActions">
+            <UButton icon="i-heroicons-chevron-down" trailing color="neutral" size="xs"> Action </UButton>
+          </UDropdownMenu>
         </div>
       </div>
       <UTable v-bind="options" by="__id" :rows="values" :columns="columns">
@@ -206,13 +206,13 @@ const options = computed(() => {
         </template>
 
         <template #actions-data="{ index }">
-          <UDropdown :items="actions(index)">
-            <UButton color="gray" variant="ghost" icon="i-heroicons-ellipsis-horizontal-20-solid" />
-          </UDropdown>
+          <UDropdownMenu :items="actions(index)">
+            <UButton color="neutral" variant="ghost" icon="i-heroicons-ellipsis-horizontal-20-solid" />
+          </UDropdownMenu>
         </template>
       </UTable>
     </div>
-    <UModal v-model="model.open">
+    <UModal v-model:open="model.open">
       <UCard>
         <SComponent
           :id="id.length <= 0 ? `${model.index}` : `${id}[0].${items.id}`"

package/dist/runtime/components/SComponent.vue

@@ -27,7 +27,7 @@ export type SComponentProps = {
 }
 
 const props = withDefaults(defineProps<SComponentProps>(), { id: '', jsonSchemaPath: '' })
-const value = defineModel<unknown>({ required: true, default: '' })
+const value = defineModel<unknown>({ required: true })
 const emit = defineEmits(['submit'])
 
 const options = computed(() => ({
@@ -41,15 +41,12 @@ 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"
-    />
+    <template v-if="renderer != null && renderer === 'none'">test</template>
+    <component v-else-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" />
+    <SInputNumber v-else-if="type === 'number' || type === 'integer'" 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" />

package/dist/runtime/components/SDate.vue

@@ -1,7 +1,6 @@
 <script lang="ts" setup>
-import { format } from 'date-fns'
 import { ref, watch } from 'vue'
-import DatePicker from './DatePicker.vue'
+import { CalendarDate, DateFormatter, getLocalTimeZone } from '@internationalized/date'
 
 const props = defineProps<{
   id: string
@@ -11,28 +10,34 @@ const props = defineProps<{
   isRequired: boolean
 }>()
 
+const df = new DateFormatter('nl-NL', { dateStyle: 'medium' })
+
 const value = defineModel<string>({ required: true })
-const date = ref(new Date(value.value))
+const date = ref(new CalendarDate(2000, 1, 1))
+
 watch(date, () => {
-  value.value = date.value.toISOString()
+  value.value = date.value.toDate(getLocalTimeZone()).toISOString()
 })
+const open = ref(false)
 </script>
 
 <template>
   <div>
-    <UFormGroup
+    <UFormField
       :label="props.title || id"
       :hint="!props.isRequired ? 'optional' : undefined"
       :description="props.description"
       :name="props.id"
     >
-      <UPopover :popper="{ placement: 'bottom-start' }">
-        <UButton icon="i-heroicons-calendar-days-20-solid" :label="format(date, 'd MMM, yyy')" />
+      <UPopover :open="open">
+        <UButton color="neutral" variant="subtle" icon="i-lucide-calendar" class="w-full" @click="() => (open = true)">
+          {{ value ? df.format(date.toDate(getLocalTimeZone())) : 'Select a date' }}
+        </UButton>
 
-        <template #panel="{ close }">
-          <DatePicker v-model="date" is-required @close="close" />
+        <template #content>
+          <UCalendar v-model="date" class="p-2" @update:modelValue="() => (open = false)" />
         </template>
       </UPopover>
-    </UFormGroup>
+    </UFormField>
   </div>
 </template>

package/dist/runtime/components/SInputField.vue

@@ -7,18 +7,18 @@ const props = defineProps<{
   isRequired: boolean
 }>()
 
-const value = defineModel<string | number>({ required: true })
+const value = defineModel<string>({ required: true, default: '' })
 </script>
 
 <template>
   <div>
-    <UFormGroup
+    <UFormField
       :label="props.title || id"
       :hint="!props.isRequired ? 'optional' : undefined"
       :description="props.description"
       :name="props.id"
     >
-      <UInput v-model="value" :type="props.type" />
-    </UFormGroup>
+      <UInput v-model="value" :type="props.type" class="w-full" />
+    </UFormField>
   </div>
 </template>

package/dist/runtime/components/SInputNumber.vue

@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+const props = defineProps<{
+  id: string
+  title?: string
+  description?: string
+  type: string
+  isRequired: boolean
+}>()
+
+const value = defineModel<number>({ required: true, default: 0 })
+</script>
+
+<template>
+  <div>
+    <UFormField :label="props.title || id" :hint="!props.isRequired ? 'optional' : undefined"
+      :description="props.description" :name="props.id">
+      <UInputNumber v-model="value" class="w-full" :step="0.01" orientation="vertical"
+        :stepSnapping="props.type === 'number'" :format-options="{
+          minimumFractionDigits: 1
+        }" />
+    </UFormField>
+  </div>
+</template>

package/dist/runtime/components/SSelect.vue

@@ -10,14 +10,14 @@ const props = defineProps<{
   isRequired: boolean
 }>()
 
-const options = computed(() => props.enum.map((x, i) => ({ key: props?.enum_titles?.[i] ?? x, value: x })))
+const options = computed(() => props.enum.map((x, i) => ({ label: props?.enum_titles?.[i] ?? x, value: x })))
 
 const value = defineModel<string>({ required: true })
 </script>
 
 <template>
   <div>
-    <UFormGroup
+    <UFormField
       :label="props.title || id"
       :hint="!props.isRequired ? 'optional' : undefined"
       :description="props.description"
@@ -26,10 +26,11 @@ const value = defineModel<string>({ required: true })
       <USelect
         v-model="value"
         placeholder="select size"
-        :options="options"
+        :items="options"
         value-attribute="value"
         option-attribute="key"
+        class="w-full"
       />
-    </UFormGroup>
+    </UFormField>
   </div>
 </template>

package/dist/runtime/components/STextarea.vue

@@ -11,13 +11,13 @@ const value = defineModel<string | number>({ required: true })
 
 <template>
   <div>
-    <UFormGroup
+    <UFormField
       :label="props.title || id"
       :hint="!props.isRequired ? 'optional' : undefined"
       :description="props.description"
       :name="props.id"
     >
-      <UTextarea v-model="value" />
-    </UFormGroup>
+      <UTextarea v-model="value" class="w-full" />
+    </UFormField>
   </div>
 </template>

package/dist/runtime/components/SToggle.vue

@@ -12,13 +12,13 @@ const value = defineModel<boolean>({ required: true })
 
 <template>
   <div>
-    <UFormGroup
+    <UFormField
       :label="props.title || id"
       :hint="!props.isRequired ? 'optional' : undefined"
       :description="props.description"
       :name="props.id"
     >
-      <UToggle v-model="value" />
-    </UFormGroup>
+      <USwitch v-model="value" />
+    </UFormField>
   </div>
 </template>

package/dist/runtime/types/index.d.ts

@@ -0,0 +1,5 @@
+export type CustomValidation = {
+    field: string;
+    message: string;
+    validate(state: any): boolean;
+};

package/dist/runtime/utils/index.d.ts

@@ -0,0 +1,10 @@
+export declare function pick<Data extends object, Keys extends keyof Data>(data: Data, keys: Keys[]): Pick<Data, Keys>;
+export declare function omit<Data extends object, Keys extends keyof Data>(data: Data, keys: Keys[]): Omit<Data, Keys>;
+export declare function get<T>(object: NestedObject | undefined, path: (string | number)[] | string, defaultValue?: T): T | undefined;
+type NestedObject = {
+    [key: string]: any;
+};
+export declare function set(object: NestedObject, path: (string | number)[] | string, value: unknown): void;
+export declare function looseToNumber(val: any): any;
+export declare function compare<T>(value?: T, currentValue?: T, comparator?: string | ((a: T, b: T) => boolean)): boolean;
+export {};

package/dist/runtime/utils/index.js

@@ -0,0 +1,74 @@
+import { isEqual } from "ohash/utils";
+export function pick(data, keys) {
+  const result = {};
+  for (const key of keys) {
+    result[key] = data[key];
+  }
+  return result;
+}
+export function omit(data, keys) {
+  const result = { ...data };
+  for (const key of keys) {
+    delete result[key];
+  }
+  return result;
+}
+export function get(object, path, defaultValue) {
+  if (typeof path === "string") {
+    path = path.split(".").map((key) => {
+      const numKey = Number(key);
+      return Number.isNaN(numKey) ? key : numKey;
+    });
+  }
+  let result = object;
+  for (const key of path) {
+    if (result === void 0 || result === null) {
+      return defaultValue;
+    }
+    if (typeof key === "string" && !(key in result)) {
+      return defaultValue;
+    }
+    result = result[key];
+  }
+  return result !== void 0 ? result : defaultValue;
+}
+export function set(object, path, value) {
+  if (typeof path === "string") {
+    path = path.split(".").map((key) => {
+      const numKey = Number(key);
+      return Number.isNaN(numKey) ? key : numKey;
+    });
+  }
+  const keys = path;
+  keys.reduce((acc, key, i) => {
+    if (acc[key] === void 0) {
+      acc[key] = isLastKey(i, keys) ? value : {};
+    } else if (i === keys.length - 1) {
+      acc[key] = value;
+    }
+    return acc[key];
+  }, object);
+}
+function isLastKey(index, keys) {
+  return index === keys.length - 1;
+}
+export function looseToNumber(val) {
+  if (typeof val !== "string") return val;
+  const n = Number.parseFloat(val);
+  return Number.isNaN(n) ? val : n;
+}
+export function compare(value, currentValue, comparator) {
+  if (value === void 0 || currentValue === void 0) {
+    return false;
+  }
+  if (typeof value === "string") {
+    return value === currentValue;
+  }
+  if (typeof comparator === "function") {
+    return comparator(value, currentValue);
+  }
+  if (typeof comparator === "string") {
+    return get(value, comparator) === get(currentValue, comparator);
+  }
+  return isEqual(value, currentValue);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ederzeel/nuxt-schema-form-nightly",
-  "version": "0.1.0-29041090.dfa7689",
+  "version": "0.1.0-29072953.6ee0e39",
   "description": "A runtime form generator for nuxt",
   "type": "module",
   "exports": {
@@ -8,6 +8,10 @@
       "types": "./dist/module.d.ts",
       "import": "./dist/module.mjs",
       "require": "./dist/module.cjs"
+    },
+    "./utils/*": {
+      "types": "./dist/runtime/utils/*.d.ts",
+      "import": "./dist/runtime/utils/*.js"
     }
   },
   "main": "./dist/module.mjs",
@@ -20,6 +24,7 @@
     "dev": "nuxi dev playground",
     "dev:build": "nuxi build playground",
     "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground",
+    "docs:dev": "nuxi dev docs",
     "test": "vitest test",
     "lint": "eslint .",
     "release": "bumpp --commit \"release: v%s\" --push --tag"
@@ -46,7 +51,7 @@
     "@nuxt/eslint-config": "^1.0.0",
     "@nuxt/kit": "^3.15.4",
     "@nuxt/module-builder": "^0.8.4",
-    "@nuxt/ui": "^2.21.0",
+    "@nuxt/ui": "^3.0.0",
     "@types/eslint": "^9.6.1",
     "eslint": "^9.19.0",
     "eslint-config-prettier": "^10.0.1",
@@ -56,8 +61,9 @@
     "json-schema-yup-transformer": "^1.6.12",
     "magic-string": "^0.30.17",
     "mlly": "^1.7.4",
-    "nuxt": "^3.15.4",
+    "nuxt": "^3.16.0",
     "nuxt-component-meta": "^0.10.0",
+    "ohash": "^2.0.11",
     "pathe": "^2.0.2",
     "prettier": "^3.4.2",
     "tinyglobby": "^0.2.10",
@@ -69,8 +75,7 @@
     "yup": "^1.6.1"
   },
   "dependencies": {
-    "date-fns": "^4.1.0",
-    "v-calendar": "^3.1.2"
+    "@internationalized/date": "^3.7.0"
   },
   "resolutions": {
     "@ederzeel/nuxt-schema-form": "workspace:*"

package/dist/runtime/components/DatePicker.vue

@@ -1,56 +0,0 @@
-<script setup lang="ts">
-import { computed, type PropType } from 'vue'
-import { DatePicker as VCalendarDatePicker } from 'v-calendar'
-// @ts-ignore
-import type { DatePickerDate, DatePickerRangeObject } from 'v-calendar/dist/types/src/use/datePicker'
-import 'v-calendar/dist/style.css'
-
-defineOptions({
-  inheritAttrs: false
-})
-
-const props = defineProps({
-  modelValue: {
-    type: [Date, Object] as PropType<DatePickerDate | DatePickerRangeObject | null>,
-    default: null
-  }
-})
-
-const emit = defineEmits(['update:model-value', 'close'])
-
-const date = computed({
-  get: () => props.modelValue,
-  set: value => {
-    emit('update:model-value', value)
-    emit('close')
-  }
-})
-
-const attrs = {
-  transparent: true,
-  borderless: true,
-  color: 'primary',
-  'is-dark': { selector: 'html', darkClass: 'dark' },
-  'first-day-of-week': 2
-}
-
-function onDayClick(_: any, event: MouseEvent): void {
-  const target = event.target as HTMLElement
-  target.blur()
-}
-</script>
-
-<template>
-  <VCalendarDatePicker
-    v-if="date && (date as DatePickerRangeObject)?.start && (date as DatePickerRangeObject)?.end"
-    v-model.range="date"
-    :columns="2"
-    v-bind="{ ...attrs, ...$attrs }"
-    @dayclick="onDayClick"
-  />
-  <VCalendarDatePicker v-else v-model="date" v-bind="{ ...attrs, ...$attrs }" @dayclick="onDayClick" />
-</template>
-
-<style>
-:root{--vc-gray-50:rgb(var(--color-gray-50));--vc-gray-100:rgb(var(--color-gray-100));--vc-gray-200:rgb(var(--color-gray-200));--vc-gray-300:rgb(var(--color-gray-300));--vc-gray-400:rgb(var(--color-gray-400));--vc-gray-500:rgb(var(--color-gray-500));--vc-gray-600:rgb(var(--color-gray-600));--vc-gray-700:rgb(var(--color-gray-700));--vc-gray-800:rgb(var(--color-gray-800));--vc-gray-900:rgb(var(--color-gray-900))}.vc-primary{--vc-accent-50:rgb(var(--color-primary-50));--vc-accent-100:rgb(var(--color-primary-100));--vc-accent-200:rgb(var(--color-primary-200));--vc-accent-300:rgb(var(--color-primary-300));--vc-accent-400:rgb(var(--color-primary-400));--vc-accent-500:rgb(var(--color-primary-500));--vc-accent-600:rgb(var(--color-primary-600));--vc-accent-700:rgb(var(--color-primary-700));--vc-accent-800:rgb(var(--color-primary-800));--vc-accent-900:rgb(var(--color-primary-900))}
-</style>