@rokkit/forms 1.8.0 → 1.8.2

package/README.md

@@ -86,10 +86,15 @@ form.isDirty // any field changed
 ```js
 import { validateField, validateAll, patterns } from '@rokkit/forms'
 
-const result = validateField(value, { required: true, pattern: patterns.email })
-// result → { state: 'error', text: 'Invalid email address' } | null
+const result = validateField('bad', { type: 'string', required: true, pattern: patterns.email }, 'Email')
+// result → { state: 'error', text: 'Email format is invalid' } — null when valid
+// Rules are checked per `type`: without one, only `required` applies.
 ```
 
+A field is required when it says `required: true`, or when its parent object lists it, the
+JSON Schema way (`{ type: 'object', required: ['email'], properties: { email } }`), at any depth.
+`validateAll` / `form.validate()` and the rendered input's `required` attribute honour both.
+
 ### Dependent lookups with createLookup
 
 `createLookup` creates a reactive dropdown data source that can depend on other field values:

package/dist/lib/fields.js

@@ -75,9 +75,11 @@ export function findAttributeByPath(scope, schema) {
 
 	const pathArray = scope.split('/').slice(1)
 	let schemaPointer = schema
+	let parent = null
 	let currentKey = ''
 
 	pathArray.forEach((key) => {
+		parent = schemaPointer
 		schemaPointer = schemaPointer.properties[key]
 		currentKey = key
 	})
@@ -86,10 +88,21 @@ export function findAttributeByPath(scope, schema) {
 
 	return {
 		key: currentKey,
-		props: { ...schemaPointer }
+		props: requiredProps(schemaPointer, parent, currentKey)
 	}
 }
 
+/**
+ * A field's props with `required` as the input reads it: true when the field says so or its
+ * parent's JSON Schema `required` list names it. An object's own list is its children's rule —
+ * dropped here so it never reaches an input as a truthy `required`.
+ */
+function requiredProps(fieldSchema, parent, key) {
+	const { required, ...props } = fieldSchema
+	const listed = Array.isArray(parent?.required) && parent.required.includes(key)
+	return required === true || listed ? { ...props, required: true } : props
+}
+
 /**
  * Combines an element from layout with schema
  *

package/dist/lib/schema.d.ts

@@ -18,3 +18,15 @@ export function deriveSchemaFromValue(data: any): import("../types").DataSchema;
  * @returns {Object | null}
  */
 export function schemaAt(schema: Object | null | undefined, path: string): Object | null;
+/**
+ * Whether the field at a slash path must have a value.
+ *
+ * JSON Schema states it on the PARENT object — `{ type: 'object', required: ['city'], … }` — at
+ * any depth. The field-level `required: true` form is also honoured. An object's own `required`
+ * array is its children's rule, never a claim that the object itself is required.
+ *
+ * @param {Object | null | undefined} schema
+ * @param {string} path
+ * @returns {boolean}
+ */
+export function requiredAt(schema: Object | null | undefined, path: string): boolean;

package/dist/lib/schema.js

@@ -56,3 +56,22 @@ export function schemaAt(schema, path) {
 	for (const key of path.split('/').slice(1)) current = childSchema(current, key)
 	return isSchemaObject(current) ? current : null
 }
+
+/**
+ * Whether the field at a slash path must have a value.
+ *
+ * JSON Schema states it on the PARENT object — `{ type: 'object', required: ['city'], … }` — at
+ * any depth. The field-level `required: true` form is also honoured. An object's own `required`
+ * array is its children's rule, never a claim that the object itself is required.
+ *
+ * @param {Object | null | undefined} schema
+ * @param {string} path
+ * @returns {boolean}
+ */
+export function requiredAt(schema, path) {
+	if (schemaAt(schema, path)?.required === true) return true
+	const keys = path.split('/')
+	const key = keys.pop()
+	const parent = keys.length > 0 ? schemaAt(schema, keys.join('/')) : schema
+	return Array.isArray(parent?.required) && parent.required.includes(key)
+}

package/dist/lib/validation.js

@@ -1,4 +1,4 @@
-import { schemaAt } from './schema.js'
+import { schemaAt, requiredAt } from './schema.js'
 
 /**
  * Validation utility for FormBuilder
@@ -223,7 +223,8 @@ function validateByType(value, fieldSchema, fieldLabel) {
  * @returns {ValidationMessage|null|'skip'}
  */
 function checkPresence(value, fieldSchema, fieldLabel) {
-	if (fieldSchema.required && isEmpty(value)) return errorMsg(`${fieldLabel} is required`)
+	// `=== true`: an object schema's `required` is an ARRAY naming its children, not a flag.
+	if (fieldSchema.required === true && isEmpty(value)) return errorMsg(`${fieldLabel} is required`)
 	if (isEmpty(value)) return 'skip'
 	return null
 }
@@ -243,6 +244,16 @@ export function validateField(value, fieldSchema, fieldLabel = 'Field') {
 	return validateByType(value, fieldSchema, fieldLabel)
 }
 
+/**
+ * The field's schema with `required` decided by its path — the parent's JSON Schema `required`
+ * list counts, not only the field's own flag. Null for a path the schema does not know.
+ * @private
+ */
+function effectiveSchema(schema, path) {
+	const fieldSchema = schemaAt(schema, path)
+	return fieldSchema && { ...fieldSchema, required: requiredAt(schema, path) }
+}
+
 /**
  * Validate one element from the layout
  * @private
@@ -253,11 +264,10 @@ function validateElement(element, data, schema, results) {
 	if (!element.scope) return
 
 	const fieldPath = element.scope.replace(/^#\//, '')
-	const fieldSchema = schemaAt(schema, fieldPath)
 	const fieldLabel = element.label || element.title || fieldPath
 	const value = getValueByPath(data, fieldPath)
 
-	const result = validateField(value, fieldSchema, fieldLabel)
+	const result = validateField(value, effectiveSchema(schema, fieldPath), fieldLabel)
 	if (result) {
 		results[fieldPath] = result
 	}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokkit/forms",
-  "version": "1.8.0",
+  "version": "1.8.2",
   "description": "Form building components for Rokkit applications",
   "repository": {
     "type": "git",

package/dist/lib/conditions.spec.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/lib/conditions.spec.js

@@ -1,58 +0,0 @@
-import { describe, it, expect } from 'vitest'
-import { evaluateCondition } from './conditions.js'
-
-describe('evaluateCondition', () => {
-	it('returns true when condition is null', () => {
-		expect(evaluateCondition(null, { accountType: 'personal' })).toBe(true)
-	})
-
-	it('returns true when condition is undefined', () => {
-		expect(evaluateCondition(undefined, { accountType: 'personal' })).toBe(true)
-	})
-
-	it('returns true when neither operator is set', () => {
-		expect(evaluateCondition({ field: 'accountType' }, { accountType: 'business' })).toBe(true)
-	})
-
-	describe('equals operator', () => {
-		it('returns true when value matches', () => {
-			expect(
-				evaluateCondition({ field: 'accountType', equals: 'business' }, { accountType: 'business' })
-			).toBe(true)
-		})
-
-		it('returns false when value does not match', () => {
-			expect(
-				evaluateCondition({ field: 'accountType', equals: 'business' }, { accountType: 'personal' })
-			).toBe(false)
-		})
-
-		it('returns false when field is absent (undefined)', () => {
-			expect(evaluateCondition({ field: 'accountType', equals: 'business' }, {})).toBe(false)
-		})
-	})
-
-	describe('notEquals operator', () => {
-		it('returns true when value does not match', () => {
-			expect(
-				evaluateCondition(
-					{ field: 'accountType', notEquals: 'business' },
-					{ accountType: 'personal' }
-				)
-			).toBe(true)
-		})
-
-		it('returns false when value matches', () => {
-			expect(
-				evaluateCondition(
-					{ field: 'accountType', notEquals: 'business' },
-					{ accountType: 'business' }
-				)
-			).toBe(false)
-		})
-
-		it('returns true when field is absent (undefined !== value)', () => {
-			expect(evaluateCondition({ field: 'accountType', notEquals: 'business' }, {})).toBe(true)
-		})
-	})
-})

package/dist/lib/fields.spec.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/lib/fields.spec.js

@@ -1,250 +0,0 @@
-import { describe, it, expect } from 'vitest'
-import { deriveSchemaFromValue } from './schema.js'
-import { deriveLayoutFromValue } from './layout.js'
-import { findAttributeByPath, getSchemaWithLayout } from './fields.js'
-
-import inputLayout from './fixtures/input-layout.json'
-import inputSchema from './fixtures/input-schema.json'
-import resultWithGeneratedSchema from './fixtures/result-with-generated-schema.json'
-import resultWithGeneratedLayout from './fixtures/result-with-generated-layout.json'
-import combinedSchemaLayout from './fixtures/combined-schema-layout.json'
-import resultWithOnlyData from './fixtures/result-with-only-data.json'
-
-describe('fields', () => {
-	describe('findAttributeByPath', () => {
-		it('should find attribute from path', () => {
-			const schema = {
-				type: 'object',
-				properties: {
-					name: { type: 'string' },
-					age: { type: 'integer', min: 0, max: 100 }
-				}
-			}
-			let attribute = findAttributeByPath('#/name', schema)
-			expect(attribute).toEqual({
-				key: 'name',
-				props: {
-					type: 'string'
-				}
-			})
-
-			attribute = findAttributeByPath('#/age', schema)
-			expect(attribute).toEqual({
-				key: 'age',
-				props: {
-					type: 'integer',
-					min: 0,
-					max: 100
-				}
-			})
-		})
-
-		it('should find attribute from nested path', () => {
-			const schema = {
-				type: 'object',
-				properties: {
-					address: {
-						type: 'object',
-						properties: {
-							street: { type: 'string' },
-							city: { type: 'string' },
-							state: { type: 'string' },
-							zip: { type: 'integer' }
-						}
-					}
-				}
-			}
-			let attribute = findAttributeByPath('#/address/street', schema)
-			expect(attribute).toEqual({
-				key: 'street',
-				props: {
-					type: 'string'
-				}
-			})
-
-			attribute = findAttributeByPath('#/address/city', schema)
-			expect(attribute).toEqual({
-				key: 'city',
-				props: {
-					type: 'string'
-				}
-			})
-
-			attribute = findAttributeByPath('#/address/state', schema)
-			expect(attribute).toEqual({
-				key: 'state',
-				props: {
-					type: 'string'
-				}
-			})
-
-			attribute = findAttributeByPath('#/address/zip', schema)
-			expect(attribute).toEqual({
-				key: 'zip',
-				props: {
-					type: 'integer'
-				}
-			})
-		})
-
-		it('should throw error if path is invalid', () => {
-			const schema = {
-				type: 'object',
-				properties: {
-					name: { type: 'string' },
-					age: { type: 'integer', min: 0, max: 100 }
-				}
-			}
-			expect(() => {
-				findAttributeByPath('#/invalid', schema)
-			}).toThrowError('Invalid scope: #/invalid')
-		})
-
-		it('should return props if scope is missing', () => {
-			const schema = {
-				type: 'object',
-				properties: {
-					name: { type: 'string' },
-					age: { type: 'integer', min: 0, max: 100 }
-				}
-			}
-			const attribute = findAttributeByPath(null, schema)
-			expect(attribute).toEqual({
-				props: schema
-			})
-		})
-	})
-
-	describe('getSchemaWithLayout', () => {
-		const value = {
-			name: 'John',
-			age: 30,
-			address: {
-				street: '123 Main St',
-				city: 'New York',
-				state: 'NY',
-				zip: 10001
-			}
-		}
-		const schema = inputSchema
-		const layout = inputLayout
-
-		it('should combine generated schema and layout', () => {
-			const value = {
-				name: 'John',
-				age: 30
-			}
-			const schema = getSchemaWithLayout(deriveSchemaFromValue(value), deriveLayoutFromValue(value))
-			expect(schema).toEqual({
-				type: 'vertical',
-				elements: [
-					{
-						key: 'name',
-
-						props: {
-							label: 'name',
-							type: 'string'
-						}
-					},
-					{
-						key: 'age',
-
-						props: {
-							label: 'age',
-							type: 'integer'
-						}
-					}
-				]
-			})
-		})
-
-		it('should combine generated schema & layout for nested data', () => {
-			const schema = getSchemaWithLayout(deriveSchemaFromValue(value), deriveLayoutFromValue(value))
-			expect(schema).toEqual(resultWithOnlyData)
-		})
-
-		it('should combine schema with generated layout', () => {
-			const combined = getSchemaWithLayout(schema, deriveLayoutFromValue(value))
-			expect(combined).toEqual(resultWithGeneratedLayout)
-		})
-
-		it('should combine layout with generated schema', () => {
-			const combined = getSchemaWithLayout(deriveSchemaFromValue(value), layout)
-			expect(combined).toEqual(resultWithGeneratedSchema)
-		})
-
-		it('should combine the schema and layout', () => {
-			const combined = getSchemaWithLayout(schema, layout)
-			expect(combined).toEqual(combinedSchemaLayout)
-		})
-
-		it('should combine the schema and layout for nested array', () => {
-			const schema = {
-				type: 'object',
-				properties: {
-					users: {
-						type: 'array',
-						items: {
-							type: 'object',
-							properties: {
-								name: { type: 'string' },
-								age: { type: 'integer' }
-							}
-						}
-					}
-				}
-			}
-			const layout = {
-				type: 'vertical',
-				elements: [
-					{
-						scope: '#/users',
-						schema: {
-							type: 'vertical',
-
-							elements: [
-								{
-									scope: '#/name',
-									label: 'name'
-								},
-								{
-									scope: '#/age',
-									label: 'age'
-								}
-							]
-						}
-					}
-				]
-			}
-
-			const combined = getSchemaWithLayout(schema, layout)
-			expect(combined).toEqual({
-				type: 'vertical',
-				elements: [
-					{
-						key: 'users',
-						props: {
-							type: 'array',
-							schema: {
-								type: 'vertical',
-								elements: [
-									{
-										key: 'name',
-										props: {
-											label: 'name',
-											type: 'string'
-										}
-									},
-									{
-										key: 'age',
-										props: { label: 'age', type: 'integer' }
-									}
-								]
-							}
-						}
-					}
-				]
-			})
-		})
-	})
-})

package/dist/lib/fixtures/combined-schema-layout.json

@@ -1,64 +0,0 @@
-{
-  "type": "vertical",
-  "elements": [
-    {
-      "key": "name",
-      "component": "custom",
-      "props": {
-        "type": "string",
-        "label": "Name"
-      }
-    },
-    {
-      "key": "age",
-
-      "props": {
-        "label": "age",
-        "type": "number",
-        "min": 0,
-        "max": 100
-      }
-    },
-    {
-      "type": "vertical",
-      "key": "address",
-      "title": "Address",
-      "elements": [
-        {
-          "key": "street",
-
-          "props": {
-            "label": "street",
-            "type": "string"
-          }
-        },
-        {
-          "key": "city",
-
-          "props": {
-            "label": "city",
-            "type": "string"
-          }
-        },
-        {
-          "key": "state",
-
-          "props": {
-            "label": "state",
-            "type": "string"
-          }
-        },
-        {
-          "key": "zip",
-
-          "props": {
-            "label": "zip",
-            "type": "number",
-            "min": 0,
-            "max": 99999
-          }
-        }
-      ]
-    }
-  ]
-}

package/dist/lib/fixtures/input-layout.json

@@ -1,68 +0,0 @@
-{
-  "type": "vertical",
-  "elements": [
-    {
-      "scope": "#/name",
-      "key": "name",
-      "label": "name",
-      "component": "custom",
-      "props": {
-        "type": "string",
-        "label": "Name"
-      }
-    },
-    {
-      "scope": "#/age",
-      "key": "age",
-      "label": "age",
-
-      "props": {
-        "type": "number"
-      }
-    },
-    {
-      "type": "vertical",
-      "scope": "#/address",
-      "key": "address",
-      "title": "Address",
-      "elements": [
-        {
-          "scope": "#/address/street",
-          "key": "street",
-          "label": "street",
-
-          "props": {
-            "type": "string"
-          }
-        },
-        {
-          "scope": "#/address/city",
-          "key": "city",
-          "label": "city",
-
-          "props": {
-            "type": "string"
-          }
-        },
-        {
-          "scope": "#/address/state",
-          "key": "state",
-          "label": "state",
-
-          "props": {
-            "type": "string"
-          }
-        },
-        {
-          "scope": "#/address/zip",
-          "key": "zip",
-          "label": "zip",
-
-          "props": {
-            "type": "number"
-          }
-        }
-      ]
-    }
-  ]
-}

package/dist/lib/fixtures/input-schema.json

@@ -1,16 +0,0 @@
-{
-  "type": "object",
-  "properties": {
-    "name": { "type": "string" },
-    "age": { "type": "number", "min": 0, "max": 100 },
-    "address": {
-      "type": "object",
-      "properties": {
-        "street": { "type": "string" },
-        "city": { "type": "string" },
-        "state": { "type": "string" },
-        "zip": { "type": "number", "min": 0, "max": 99999 }
-      }
-    }
-  }
-}

package/dist/lib/fixtures/result-with-generated-layout.json

@@ -1,64 +0,0 @@
-{
-  "type": "vertical",
-  "elements": [
-    {
-      "key": "name",
-
-      "props": {
-        "label": "name",
-        "type": "string"
-      }
-    },
-    {
-      "key": "age",
-
-      "props": {
-        "label": "age",
-        "type": "number",
-        "min": 0,
-        "max": 100
-      }
-    },
-    {
-      "type": "vertical",
-      "key": "address",
-      "title": "address",
-      "elements": [
-        {
-          "key": "street",
-
-          "props": {
-            "label": "street",
-            "type": "string"
-          }
-        },
-        {
-          "key": "city",
-
-          "props": {
-            "label": "city",
-            "type": "string"
-          }
-        },
-        {
-          "key": "state",
-
-          "props": {
-            "label": "state",
-            "type": "string"
-          }
-        },
-        {
-          "key": "zip",
-
-          "props": {
-            "label": "zip",
-            "type": "number",
-            "min": 0,
-            "max": 99999
-          }
-        }
-      ]
-    }
-  ]
-}

package/dist/lib/fixtures/result-with-generated-schema.json

@@ -1,60 +0,0 @@
-{
-  "type": "vertical",
-  "elements": [
-    {
-      "key": "name",
-      "component": "custom",
-      "props": {
-        "type": "string",
-        "label": "Name"
-      }
-    },
-    {
-      "key": "age",
-
-      "props": {
-        "label": "age",
-        "type": "number"
-      }
-    },
-    {
-      "type": "vertical",
-      "key": "address",
-      "title": "Address",
-      "elements": [
-        {
-          "key": "street",
-
-          "props": {
-            "label": "street",
-            "type": "string"
-          }
-        },
-        {
-          "key": "city",
-
-          "props": {
-            "label": "city",
-            "type": "string"
-          }
-        },
-        {
-          "key": "state",
-
-          "props": {
-            "label": "state",
-            "type": "string"
-          }
-        },
-        {
-          "key": "zip",
-
-          "props": {
-            "label": "zip",
-            "type": "number"
-          }
-        }
-      ]
-    }
-  ]
-}

package/dist/lib/fixtures/result-with-only-data.json

@@ -1,60 +0,0 @@
-{
-  "type": "vertical",
-  "elements": [
-    {
-      "key": "name",
-
-      "props": {
-        "type": "string",
-        "label": "name"
-      }
-    },
-    {
-      "key": "age",
-
-      "props": {
-        "label": "age",
-        "type": "integer"
-      }
-    },
-    {
-      "type": "vertical",
-      "key": "address",
-      "title": "address",
-      "elements": [
-        {
-          "key": "street",
-
-          "props": {
-            "label": "street",
-            "type": "string"
-          }
-        },
-        {
-          "key": "city",
-
-          "props": {
-            "label": "city",
-            "type": "string"
-          }
-        },
-        {
-          "key": "state",
-
-          "props": {
-            "label": "state",
-            "type": "string"
-          }
-        },
-        {
-          "key": "zip",
-
-          "props": {
-            "label": "zip",
-            "type": "integer"
-          }
-        }
-      ]
-    }
-  ]
-}