@rokkit/forms 1.0.0-next.145 → 1.0.0-next.146

package/dist/src/index.d.ts

@@ -5,7 +5,7 @@ export { default as FormRenderer } from "./FormRenderer.svelte";
 export { default as Input } from "./Input.svelte";
 export { default as InputField } from "./InputField.svelte";
 export { default as InfoField } from "./InfoField.svelte";
-export { default as ValidationReport } from "./ValidationReport.svelte";
+export { default as StatusList } from "./StatusList.svelte";
 export * from "./display";
 export * from "./input";
 export { createLookup, createLookupManager, clearLookupCache } from "./lib/lookup.svelte.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokkit/forms",
-  "version": "1.0.0-next.145",
+  "version": "1.0.0-next.146",
   "description": "Form building components for Rokkit applications",
   "repository": {
     "type": "git",

package/src/{ValidationReport.svelte → StatusList.svelte}

@@ -1,6 +1,6 @@
 <script>
 	/**
-	 * ValidationReport — grouped summary of validation messages
+	 * StatusList — grouped summary of validation messages
 	 * Groups items by severity (error, warning, info, success) with count headers.
 	 * Supports click-to-focus via onclick callback.
 	 */
@@ -19,11 +19,11 @@
 </script>
 
 {#if items.length > 0}
-	<div data-validation-report class={className} role="status">
+	<div data-status-list class={className} role="status">
 		{#each grouped as group (group.state)}
-			<div data-validation-group data-severity={group.state}>
-				<div data-validation-group-header>
-					<span data-validation-count>{group.items.length}</span>
+			<div data-status-group data-severity={group.state}>
+				<div data-status-header>
+					<span data-status-count>{group.items.length}</span>
 					<span
 						>{group.items.length === 1
 							? SEVERITY_LABELS[group.state]
@@ -33,7 +33,7 @@
 				{#each group.items as item (item.path)}
 					{#if onclick}
 						<button
-							data-validation-item
+							data-status-item
 							data-status={item.state}
 							onclick={() => onclick(item.path)}
 							type="button"
@@ -41,7 +41,7 @@
 							{item.text}
 						</button>
 					{:else}
-						<div data-validation-item data-status={item.state}>
+						<div data-status-item data-status={item.state}>
 							{item.text}
 						</div>
 					{/if}

package/src/display/DisplayTable.svelte

@@ -28,7 +28,8 @@
 	}
 
 	const formatters = {
-		currency: (v) => new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(v),
+		currency: (v) =>
+			new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(v),
 		datetime: (v) => new Date(v).toLocaleString(),
 		duration: (v) => formatDuration(v),
 		number: (v) => new Intl.NumberFormat().format(v),

package/src/display/DisplayValue.svelte

@@ -21,7 +21,8 @@
 	}
 
 	const valueFormatters = {
-		currency: (v) => new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(v),
+		currency: (v) =>
+			new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(v),
 		datetime: (v) => new Date(v).toLocaleString(),
 		duration: (v) => formatDuration(v),
 		number: (v) => new Intl.NumberFormat().format(v),

package/src/index.js

@@ -13,7 +13,7 @@ export { default as FormRenderer } from './FormRenderer.svelte'
 export { default as Input } from './Input.svelte'
 export { default as InputField } from './InputField.svelte'
 export { default as InfoField } from './InfoField.svelte'
-export { default as ValidationReport } from './ValidationReport.svelte'
+export { default as StatusList } from './StatusList.svelte'
 
 // Display Components
 export * from './display'

package/src/lib/builder.svelte.js

@@ -658,7 +658,8 @@ export class FormBuilder {
 		const value = this.getValue(fieldPath)
 
 		if (element.elements) return this.#convertNestedElement(element, fieldPath, scope, value)
-		if (element.props.readonly) return this.#convertReadonlyElement(element, fieldPath, scope, value)
+		if (element.props.readonly)
+			return this.#convertReadonlyElement(element, fieldPath, scope, value)
 		return this.#buildStandardElement(element, fieldPath, scope, value)
 	}
 
@@ -726,13 +727,9 @@ export class FormBuilder {
 	 */
 	getVisibleData() {
 		const visiblePaths = new SvelteSet(
-			this.elements
-				.filter((el) => el.scope)
-				.map((el) => el.scope.replace(/^#\//, ''))
-		)
-		return Object.fromEntries(
-			Object.entries(this.#data).filter(([key]) => visiblePaths.has(key))
+			this.elements.filter((el) => el.scope).map((el) => el.scope.replace(/^#\//, ''))
 		)
+		return Object.fromEntries(Object.entries(this.#data).filter(([key]) => visiblePaths.has(key)))
 	}
 
 	/**

package/src/lib/conditions.js

@@ -7,9 +7,9 @@
  * @returns {boolean}
  */
 export function evaluateCondition(condition, data) {
-  if (!condition) return true
-  const value = data[condition.field]
-  if ('equals' in condition) return value === condition.equals
-  if ('notEquals' in condition) return value !== condition.notEquals
-  return true
+	if (!condition) return true
+	const value = data[condition.field]
+	if ('equals' in condition) return value === condition.equals
+	if ('notEquals' in condition) return value !== condition.notEquals
+	return true
 }

package/src/lib/conditions.spec.js

@@ -2,57 +2,57 @@ 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)
-    })
-  })
+	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/src/lib/lookup.svelte.js

@@ -186,12 +186,24 @@ async function runWithLoadingState(asyncFn, state) {
 function buildLookupApi(ctx, fns) {
 	const { state, meta } = ctx
 	return {
-		get options() { return state.options },
-		get loading() { return state.loading },
-		get error() { return state.error },
-		get disabled() { return state.disabled },
-		get dependsOn() { return meta.dependsOn },
-		get fields() { return meta.fields },
+		get options() {
+			return state.options
+		},
+		get loading() {
+			return state.loading
+		},
+		get error() {
+			return state.error
+		},
+		get disabled() {
+			return state.disabled
+		},
+		get dependsOn() {
+			return meta.dependsOn
+		},
+		get fields() {
+			return meta.fields
+		},
 		...fns
 	}
 }
@@ -241,7 +253,10 @@ function fetchDispatch(params, ctx) {
 	}
 
 	if (fetchHook) {
-		return runWithLoadingState(() => fetchFromHook({ fetchHook, cacheKeyFn, cacheTime, transform }, params), state)
+		return runWithLoadingState(
+			() => fetchFromHook({ fetchHook, cacheKeyFn, cacheTime, transform }, params),
+			state
+		)
 	}
 
 	return runWithLoadingState(() => fetchFromUrl({ url, cacheTime, transform }, params), state)
@@ -253,8 +268,17 @@ function fetchDispatch(params, ctx) {
  * @returns {Object} Lookup provider with reactive state
  */
 export function createLookup(config) {
-	const { url, fetch: fetchHook, source, filter, cacheKey: cacheKeyFn,
-		dependsOn = [], fields = {}, cacheTime = DEFAULT_CACHE_TIME, transform } = config
+	const {
+		url,
+		fetch: fetchHook,
+		source,
+		filter,
+		cacheKey: cacheKeyFn,
+		dependsOn = [],
+		fields = {},
+		cacheTime = DEFAULT_CACHE_TIME,
+		transform
+	} = config
 
 	let state = $state({ options: [], loading: false, error: null, disabled: false })
 	const ctx = { state, dependsOn, source, filter, fetchHook, cacheKeyFn, cacheTime, transform, url }
@@ -319,8 +343,12 @@ export function createLookupManager(lookupConfigs) {
 		handleFieldChange: (changedField, formData) =>
 			triggerDependentLookups(lookups, changedField, formData),
 		initialize: (formData) => initializeAllLookups(lookups, formData),
-		clearAllCaches: () => { for (const lookup of lookups.values()) lookup.clearCache() },
-		get lookups() { return lookups }
+		clearAllCaches: () => {
+			for (const lookup of lookups.values()) lookup.clearCache()
+		},
+		get lookups() {
+			return lookups
+		}
 	}
 }