@ederzeel/nuxt-schema-form-nightly 0.1.0-29022487.1f5312c → 0.1.0-29027236.c108247

package/dist/runtime/components/SComponent.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { computed } from 'vue'
+import { computed, defineEmits } from 'vue'
 
 type Properties = {
   properties?: { [key: string]: unknown }
@@ -23,26 +23,26 @@ export type SComponentProps = {
 
 const props = withDefaults(defineProps<SComponentProps>(), { id: '', jsonSchemaPath: 'test' })
 const value = defineModel<unknown>({ required: true, default: '' })
+const emit = defineEmits(['submit'])
 
 const options = computed(() => ({
   ...props,
-  jsonSchemaPath: `${props.id}${props.jsonSchemaPath}`
+  jsonSchemaPath: `${props.jsonSchemaPath}.${props.id}`
 }))
+const onSubmit = () => {
+  emit('submit')
+}
 </script>
 
 <template>
   <div class="s-form-group">
-    <component
-      v-bind="options"
-      :is="typeof renderer === 'string' ? renderer : undefined"
-      v-if="renderer"
-      v-model="value"
-    />
+    <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 === 'date-time'" v-bind="options" v-model="value" />
+    <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" />
+    <SObject v-else-if="type === 'object'" v-bind="options" v-model="value" @submit="onSubmit" />
     <div v-else>else</div>
   </div>
 </template>

package/dist/runtime/components/SDate.vue

@@ -1,7 +1,8 @@
 <script lang="ts" setup>
 import { format } from 'date-fns'
-import { computed, ref } from 'vue'
+import { ref, watch } from 'vue'
 import DatePicker from './DatePicker.vue'
+
 const props = defineProps<{
   id: string
   title?: string
@@ -12,6 +13,9 @@ const props = defineProps<{
 
 const value = defineModel<string>({ required: true })
 const date = ref(new Date(value.value))
+watch(date, () => {
+  value.value = date.value.toISOString()
+})
 </script>
 
 <template>

package/dist/runtime/components/SForm.vue

@@ -4,7 +4,7 @@ import convertToYup from 'json-schema-yup-transformer'
 import type { JsonSchema } from 'json-schema-library'
 import { computed, ref } from 'vue'
 
-const props = defineProps<{ schema: JsonSchema }>()
+const props = defineProps<{ schema: JsonSchema; customValidation?: CustomValidation[] }>()
 
 const value = defineModel<Record<string, unknown>>({ required: true })
 const formRef = ref()
@@ -17,6 +17,12 @@ async function onSubmit(_event: unknown) {
 
 const formValidationSchema = computed(() => convertToYup(props.schema))
 
+export type CustomValidation = {
+  field: string
+  message: string
+  validate(state: any): boolean
+}
+
 const validateFields = async (fields: string[]) => {
   let allValid = true
   for (const field of fields) {
@@ -25,14 +31,31 @@ const validateFields = async (fields: string[]) => {
     }
   }
 
+  if (props.customValidation) {
+    for (const { field, message, validate } of props.customValidation) {
+      if (!fields.includes(field)) continue
+      if (!validate(value.value)) {
+        const errors = [{ path: field, message }]
+        formRef.value.setErrors(errors, field)
+        allValid = false
+      }
+    }
+  }
+
   return allValid
 }
+
+const submit = () => {
+  formRef.value.submit()
+}
 </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" />
+      <SComponent v-model="value" v-bind="schema" :validate-fields="validateFields" @submit="submit"
+        :isRequired="true" />
       <slot />
 
       <slot name="submit">

package/dist/runtime/components/SObject.vue

@@ -15,7 +15,7 @@ const props = defineProps<{
 type PropertiesType = {
   [key: string]: unknown
 }
-const emit = defineEmits(['update:modelValue'])
+const emit = defineEmits(['update:modelValue', 'submit'])
 const onInput = (value: unknown, key: string) => {
   emit('update:modelValue', { ...props.modelValue, [key]: value })
 }
@@ -36,6 +36,7 @@ const onInput = (value: unknown, key: string) => {
       :isRequired="required.includes(key)"
       class="mt-4"
       @update:model-value="event => onInput(event, key)"
+      @submit="() => emit('submit')"
     />
   </div>
 </template>

package/dist/runtime/components/SRow.vue

@@ -8,6 +8,8 @@ const props = defineProps<{
   jsonSchemaPath: string
   properties: PropertiesType
   modelValue: Record<string, unknown>
+  required: string[]
+  isRequired: boolean
 }>()
 
 type PropertiesType = {
@@ -31,6 +33,7 @@ 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)"
       class="flex flex-col flex-1"
       @update:model-value="event => onInput(event, key)"
     />

package/dist/runtime/components/SSelect.vue

@@ -6,7 +6,7 @@ const props = defineProps<{
   title?: string
   description?: string
   enum: string[]
-  enum_titles: string[]
+  enum_titles?: string[]
   isRequired: boolean
 }>()
 

package/dist/runtime/components/STextarea.vue

@@ -17,7 +17,7 @@ const value = defineModel<string | number>({ required: true })
       :description="props.description"
       :name="props.id"
     >
-      <UTextarea v-model="value" v-bind="properties" />
+      <UTextarea v-model="value" />
     </UFormGroup>
   </div>
 </template>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ederzeel/nuxt-schema-form-nightly",
-  "version": "0.1.0-29022487.1f5312c",
+  "version": "0.1.0-29027236.c108247",
   "description": "A runtime form generator for nuxt",
   "type": "module",
   "exports": {
@@ -46,6 +46,7 @@
     "@nuxt/eslint-config": "^1.0.0",
     "@nuxt/kit": "^3.15.4",
     "@nuxt/module-builder": "^0.8.4",
+    "@nuxt/ui": "^2.21.0",
     "@types/eslint": "^9.6.1",
     "eslint": "^9.19.0",
     "eslint-config-prettier": "^10.0.1",