@ederzeel/nuxt-schema-form-nightly 0.1.0-29022347.538d6e6 → 0.1.0-29022475.0a845ef

package/dist/runtime/components/SComponent.vue

@@ -16,6 +16,8 @@ export type SComponentProps = {
   format?: string
   description?: string
   jsonSchemaPath?: string
+  required?: string[]
+  isRequired: boolean
   validateFields?: (fields: string[]) => Promise<boolean>
 }
 

package/dist/runtime/components/SDate.vue

@@ -7,6 +7,7 @@ const props = defineProps<{
   title?: string
   description?: string
   type: string
+  isRequired: boolean
 }>()
 
 const value = defineModel<string>({ required: true })
@@ -15,7 +16,12 @@ const date = ref(new Date(value.value))
 
 <template>
   <div>
-    <UFormGroup :label="props.title || id" :description="props.description" :name="props.id">
+    <UFormGroup
+      :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')" />
 

package/dist/runtime/components/SInputField.vue

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

package/dist/runtime/components/SObject.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="mt-4"
       @update:model-value="event => onInput(event, key)"
     />

package/dist/runtime/components/SSelect.vue

@@ -7,6 +7,7 @@ const props = defineProps<{
   description?: string
   enum: string[]
   enum_titles: string[]
+  isRequired: boolean
 }>()
 
 const options = computed(() => props.enum.map((x, i) => ({ key: props?.enum_titles?.[i] ?? x, value: x })))
@@ -16,7 +17,12 @@ const value = defineModel<string>({ required: true })
 
 <template>
   <div>
-    <UFormGroup :label="props.title || id" :description="props.description" :name="props.id">
+    <UFormGroup
+      :label="props.title || id"
+      :hint="!props.isRequired ? 'optional' : undefined"
+      :description="props.description"
+      :name="props.id"
+    >
       <USelect
         v-model="value"
         placeholder="select size"

package/dist/runtime/components/STextarea.vue

@@ -3,6 +3,7 @@ const props = defineProps<{
   id: string
   title?: string
   description?: string
+  isRequired: boolean
 }>()
 
 const value = defineModel<string | number>({ required: true })
@@ -10,7 +11,12 @@ const value = defineModel<string | number>({ required: true })
 
 <template>
   <div>
-    <UFormGroup :label="props.title || id" :description="props.description" :name="props.id">
+    <UFormGroup
+      :label="props.title || id"
+      :hint="!props.isRequired ? 'optional' : undefined"
+      :description="props.description"
+      :name="props.id"
+    >
       <UTextarea v-model="value" v-bind="properties" />
     </UFormGroup>
   </div>

package/dist/runtime/components/SToggle.vue

@@ -3,6 +3,8 @@ const props = defineProps<{
   id: string
   title?: string
   description?: string
+  enum?: boolean[]
+  isRequired: boolean
 }>()
 
 const value = defineModel<boolean>({ required: true })
@@ -10,7 +12,12 @@ const value = defineModel<boolean>({ required: true })
 
 <template>
   <div>
-    <UFormGroup :label="props.title || id" :description="props.description" :name="props.id">
+    <UFormGroup
+      :label="props.title || id"
+      :hint="!props.isRequired ? 'optional' : undefined"
+      :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-29022347.538d6e6",
+  "version": "0.1.0-29022475.0a845ef",
   "description": "A runtime form generator for nuxt",
   "type": "module",
   "exports": {
@@ -47,7 +47,6 @@
     "@nuxt/kit": "^3.15.4",
     "@nuxt/module-builder": "^0.8.4",
     "@types/eslint": "^9.6.1",
-    "date-fns": "^4.1.0",
     "eslint": "^9.19.0",
     "eslint-config-prettier": "^10.0.1",
     "globals": "^15.14.0",
@@ -69,6 +68,9 @@
     "v-calendar": "^3.1.2",
     "yup": "^1.6.1"
   },
+  "dependencies": {
+    "date-fns": "^4.1.0"
+  },
   "resolutions": {
     "@ederzeel/nuxt-schema-form": "workspace:*"
   },