@ederzeel/nuxt-schema-form-nightly 0.1.0-28998176.40c4602 → 0.1.0-29021155.86a2d08

package/README.md

@@ -6,6 +6,40 @@ Runtime form generation for Nuxt apps.
 
 ### Install
 
-1. Install the `@LiamEderzeel/nuxt-schema-form` module to your project
+1. Install the `@ederzeel/nuxt-schema-form` module to your project
 
-`pnpm install @LiamEderzeel/nuxt-schema-form`
+`$ npx nuxi module add @ederzeel/nuxt-schema-form`
+
+### Usage
+
+```ts
+<script lang="ts" setup>
+import { Draft2019 } from 'json-schema-library'
+
+const schemaObject = ref(
+  new Draft2019({
+    title: 'From',
+    description: 'A minimal form example',
+    type: 'object',
+    required: ['firstname'],
+    properties: {
+      firstname: {
+        title: 'Firstname',
+        description: 'Firstname field for submitting a first name',
+        type: 'string',
+        default: ''
+      }
+    }
+  })
+)
+
+const schema = ref(schemaObject.value.rootSchema)
+const state = ref(schemaObject.value.getTemplate())
+</script>
+
+<template>
+  <div>
+    <SForm v-if="schema" v-model="state" :schema="schema"> </SForm>
+  </div>
+</template>
+```

package/dist/runtime/components/SComponent.vue

@@ -30,7 +30,7 @@ const options = computed(() => ({
   <div class="s-form-group">
     <component
       v-bind="options"
-      :is="typeof renderer === 'string' ? renderer : renderer.name"
+      :is="typeof renderer === 'string' ? renderer : undefined"
       v-if="renderer"
       v-model="value"
     />

package/dist/runtime/components/SForm.vue

@@ -7,7 +7,7 @@ import { computed, ref } from 'vue'
 const props = defineProps<{ schema: JsonSchema }>()
 
 const value = defineModel<Record<string, unknown>>({ required: true })
-const formRef = ref(null)
+const formRef = ref()
 
 const emit = defineEmits(['submit'])
 
@@ -20,7 +20,7 @@ const formValidationSchema = computed(() => convertToYup(props.schema))
 const validateFields = async (fields: string[]) => {
   let allValid = true
   for (const field of fields) {
-    if (!(await formRef.value?.validate(field, { silent: true }))) {
+    if (!(await formRef.value.validate(field, { silent: true }))) {
       allValid = false
     }
   }
@@ -31,27 +31,12 @@ const validateFields = async (fields: string[]) => {
 
 <template>
   <div>
-    <UForm
-      ref="formRef"
-      :state="value"
-      :schema="formValidationSchema"
-      autocomplete="on"
-      @submit="onSubmit"
-    >
-      <SComponent
-        v-model="value"
-        v-bind="schema"
-        :validate-fields="validateFields"
-      />
+    <UForm ref="formRef" :state="value" :schema="formValidationSchema" autocomplete="on" @submit="onSubmit">
+      <SComponent v-model="value" v-bind="schema" :validate-fields="validateFields" />
       <slot />
 
       <slot name="submit">
-        <UButton
-          class="btn"
-          type="submit"
-        >
-          Submit
-        </UButton>
+        <UButton class="btn" type="submit"> Submit </UButton>
       </slot>
     </UForm>
   </div>

package/dist/runtime/components/SInputField.vue

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
 const props = defineProps<{
   id: string
-  title: string
-  description: string
+  title?: string
+  description?: string
   type: string
 }>()
 
@@ -11,15 +11,8 @@ const value = defineModel<string | number>({ required: true })
 
 <template>
   <div>
-    <UFormGroup
-      :label="props.title || id"
-      :description="props.description"
-      :name="props.id"
-    >
-      <UInput
-        v-model="value"
-        :type="props.type"
-      />
+    <UFormGroup :label="props.title || id" :description="props.description" :name="props.id">
+      <UInput v-model="value" :type="props.type" />
     </UFormGroup>
   </div>
 </template>

package/dist/runtime/components/SObject.vue

@@ -3,6 +3,8 @@ import SComponent from './SComponent.vue'
 
 const props = defineProps<{
   id: string
+  title?: string
+  description?: string
   jsonSchemaPath: string
   properties: PropertiesType
   modelValue: Record<string, unknown>
@@ -19,7 +21,8 @@ const onInput = (value: unknown, key: string) => {
 
 <template>
   <div>
-    <h3>{{ props.properties.title }}</h3>
+    <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>
 
     <SComponent
       v-for="[key, options] of Object.entries(properties)"

package/dist/runtime/components/SRow.vue

@@ -0,0 +1,38 @@
+<script lang="ts" setup>
+import SComponent from './SComponent.vue'
+
+const props = defineProps<{
+  id: string
+  title?: string
+  description?: string
+  jsonSchemaPath: string
+  properties: PropertiesType
+  modelValue: Record<string, unknown>
+}>()
+
+type PropertiesType = {
+  [key: string]: unknown
+}
+const emit = defineEmits(['update:modelValue'])
+const onInput = (value: unknown, key: string) => {
+  emit('update:modelValue', { ...props.modelValue, [key]: value })
+}
+</script>
+
+<template>
+  <div class="flex flex-row gap-4 justify-stretch">
+    <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>
+
+    <SComponent
+      v-for="[key, options] of Object.entries(properties)"
+      :id="id.length <= 0 ? `${key}` : `${id}.${key}`"
+      :key="key"
+      :model-value="modelValue[key]"
+      :json-schema-path="jsonSchemaPath?.length <= 0 ? `properties.${key}` : `${jsonSchemaPath}.properties.${key}`"
+      v-bind="options"
+      class="flex flex-col flex-1"
+      @update:model-value="event => onInput(event, key)"
+    />
+  </div>
+</template>

package/dist/runtime/components/SSelect.vue

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
 const props = defineProps<{
   id: string
-  title: string
-  description: string
+  title?: string
+  description?: string
   enum: string[]
 }>()
 
@@ -11,16 +11,8 @@ const value = defineModel<string>({ required: true })
 
 <template>
   <div>
-    <UFormGroup
-      :label="props.title || id"
-      :description="props.description"
-      :name="props.id"
-    >
-      <USelect
-        v-model="value"
-        placeholder="select size"
-        :options="props.enum"
-      />
+    <UFormGroup :label="props.title || id" :description="props.description" :name="props.id">
+      <USelect v-model="value" placeholder="select size" :options="props.enum" />
     </UFormGroup>
   </div>
 </template>

package/dist/runtime/components/STextarea.vue

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
 const props = defineProps<{
   id: string
-  title: string
-  description: string
+  title?: string
+  description?: string
 }>()
 
 const value = defineModel<string | number>({ required: true })
@@ -10,15 +10,8 @@ const value = defineModel<string | number>({ required: true })
 
 <template>
   <div>
-    <UFormGroup
-      :label="props.title || id"
-      :description="props.description"
-      :name="props.id"
-    >
-      <UTextarea
-        v-model="value"
-        v-bind="properties"
-      />
+    <UFormGroup :label="props.title || id" :description="props.description" :name="props.id">
+      <UTextarea v-model="value" v-bind="properties" />
     </UFormGroup>
   </div>
 </template>

package/dist/runtime/components/SToggle.vue

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
 const props = defineProps<{
   id: string
-  title: string
-  description: string
+  title?: string
+  description?: string
 }>()
 
 const value = defineModel<boolean>({ required: true })
@@ -10,11 +10,7 @@ const value = defineModel<boolean>({ required: true })
 
 <template>
   <div>
-    <UFormGroup
-      :label="props.title || id"
-      :description="props.description"
-      :name="props.id"
-    >
+    <UFormGroup :label="props.title || id" :description="props.description" :name="props.id">
       <UToggle v-model="value" />
     </UFormGroup>
   </div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ederzeel/nuxt-schema-form-nightly",
-  "version": "0.1.0-28998176.40c4602",
+  "version": "0.1.0-29021155.86a2d08",
   "description": "A runtime form generator for nuxt",
   "type": "module",
   "exports": {
@@ -34,6 +34,7 @@
     "form"
   ],
   "author": "Liam Ederzeel",
+  "funding": "https://github.com/sponsors/liamederzeel",
   "license": "MIT",
   "bugs": {
     "url": "https://github.com/LiamEderzeel/nuxt-schema-form/issues"