@sjsf-lab/svar-theme - npm Package Compare versions

Comparing version 3.0.0 to 3.1.0

dist/extra-widgets/color-picker-include.d.ts

+import './color-picker.svelte';
+declare module '../definitions.js' {
+    interface ExtraWidgets {
+        svarColorPickerWidget: {};
+    }
+}

dist/extra-widgets/color-picker-include.js

+import { definitions } from '../definitions.js';
+import ColorPicker from './color-picker.svelte';
+import './color-picker.svelte';
+definitions.svarColorPickerWidget = ColorPicker;

dist/extra-widgets/color-picker.svelte

+<script lang="ts" module>
+	import type { ComponentProps as SvelteComponentProps } from 'svelte';
+	import { ColorPicker as SvarColorPicker } from '@svar-ui/svelte-core';
+	import type { WidgetCommonProps } from '@sjsf/form/fields/widgets';
+
+	declare module '@sjsf/form' {
+		interface ComponentProps {
+			svarColorPickerWidget: WidgetCommonProps<string>;
+		}
+		interface ComponentBindings {
+			svarColorPickerWidget: 'value';
+		}
+		interface UiOptions {
+			svarColorPicker?: SvelteComponentProps<typeof SvarColorPicker>;
+		}
+	}
+</script>
+
+<script lang="ts">
+	import {
+		getFormContext,
+		getId,
+		isDisabled,
+		uiOptionProps,
+		type ComponentProps
+	} from '@sjsf/form';
+
+	let {
+		value = $bindable(),
+		config,
+		handlers,
+		errors
+	}: ComponentProps['svarColorPickerWidget'] = $props();
+
+	const ctx = getFormContext();
+
+	const id = $derived(getId(ctx, config.path));
+
+	function onchange() {
+		handlers.oninput?.();
+		handlers.onchange?.();
+	}
+</script>
+
+<SvarColorPicker
+	bind:value={() => value ?? '', (v) => (value = v)}
+	{...uiOptionProps('svarColorPicker')(
+		{
+			id,
+			disabled: isDisabled(ctx),
+			error: errors.length > 0,
+			onchange
+		},
+		config,
+		ctx
+	)}
+/>

dist/extra-widgets/color-picker.svelte.d.ts

+import type { ComponentProps as SvelteComponentProps } from 'svelte';
+import { ColorPicker as SvarColorPicker } from '@svar-ui/svelte-core';
+import type { WidgetCommonProps } from '@sjsf/form/fields/widgets';
+declare module '@sjsf/form' {
+    interface ComponentProps {
+        svarColorPickerWidget: WidgetCommonProps<string>;
+    }
+    interface ComponentBindings {
+        svarColorPickerWidget: 'value';
+    }
+    interface UiOptions {
+        svarColorPicker?: SvelteComponentProps<typeof SvarColorPicker>;
+    }
+}
+declare const ColorPicker: import("svelte").Component<WidgetCommonProps<string>, {}, "value">;
+type ColorPicker = ReturnType<typeof ColorPicker>;
+export default ColorPicker;

dist/extra-widgets/color-select-include.d.ts

+import './color-select.svelte';
+declare module '../definitions.js' {
+    interface ExtraWidgets {
+        svarColorSelectWidget: {};
+    }
+}

dist/extra-widgets/color-select-include.js

+import { definitions } from '../definitions.js';
+import ColorSelect from './color-select.svelte';
+import './color-select.svelte';
+definitions.svarColorSelectWidget = ColorSelect;

dist/extra-widgets/color-select.svelte

+<script lang="ts" module>
+	import type { ComponentProps as SvelteComponentProps } from 'svelte';
+	import { ColorSelect as SvarColorSelect } from '@svar-ui/svelte-core';
+	import type { WidgetCommonProps } from '@sjsf/form/fields/widgets';
+
+	declare module '@sjsf/form' {
+		interface ComponentProps {
+			svarColorSelectWidget: WidgetCommonProps<string>;
+		}
+		interface ComponentBindings {
+			svarColorSelectWidget: 'value';
+		}
+		interface UiOptions {
+			svarColorSelect?: SvelteComponentProps<typeof SvarColorSelect>;
+		}
+	}
+</script>
+
+<script lang="ts">
+	import {
+		getFormContext,
+		getId,
+		isDisabled,
+		uiOptionProps,
+		type ComponentProps
+	} from '@sjsf/form';
+
+	let {
+		value = $bindable(),
+		config,
+		handlers,
+		errors
+	}: ComponentProps['svarColorSelectWidget'] = $props();
+
+	const ctx = getFormContext();
+
+	const id = $derived(getId(ctx, config.path));
+
+	function onchange() {
+		handlers.oninput?.();
+		handlers.onchange?.();
+	}
+</script>
+
+<SvarColorSelect
+	bind:value={() => value ?? '', (v) => (value = v)}
+	{...uiOptionProps('svarColorSelect')(
+		{
+			id,
+			disabled: isDisabled(ctx),
+			error: errors.length > 0,
+			onchange
+		},
+		config,
+		ctx
+	)}
+/>

dist/extra-widgets/color-select.svelte.d.ts

+import type { ComponentProps as SvelteComponentProps } from 'svelte';
+import { ColorSelect as SvarColorSelect } from '@svar-ui/svelte-core';
+import type { WidgetCommonProps } from '@sjsf/form/fields/widgets';
+declare module '@sjsf/form' {
+    interface ComponentProps {
+        svarColorSelectWidget: WidgetCommonProps<string>;
+    }
+    interface ComponentBindings {
+        svarColorSelectWidget: 'value';
+    }
+    interface UiOptions {
+        svarColorSelect?: SvelteComponentProps<typeof SvarColorSelect>;
+    }
+}
+declare const ColorSelect: import("svelte").Component<WidgetCommonProps<string>, {}, "value">;
+type ColorSelect = ReturnType<typeof ColorSelect>;
+export default ColorSelect;

dist/extra-widgets/combobox-include.d.ts

+import './combobox.svelte';
+declare module '../definitions.js' {
+    interface ExtraWidgets {
+        comboboxWidget: {};
+    }
+}

dist/extra-widgets/combobox-include.js

+import { definitions } from '../definitions.js';
+import Combobox from './combobox.svelte';
+import './combobox.svelte';
+definitions.comboboxWidget = Combobox;

dist/extra-widgets/combobox.svelte

+<script lang="ts" module>
+	import type { ComponentProps as SvelteComponentProps } from 'svelte';
+	import { Combo } from '@svar-ui/svelte-core';
+	import '@sjsf/form/fields/extra-widgets/combobox';
+
+	declare module '@sjsf/form' {
+		interface UiOptions {
+			svarCombobox?: SvelteComponentProps<typeof Combo>;
+		}
+	}
+</script>
+
+<script lang="ts">
+	import {
+		getFormContext,
+		getId,
+		isDisabled,
+		uiOptionProps,
+		type ComponentProps
+	} from '@sjsf/form';
+	import { idMapper, singleOption, UNDEFINED_ID } from '@sjsf/form/options.svelte';
+
+	let {
+		value = $bindable(),
+		config,
+		handlers,
+		options,
+		errors
+	}: ComponentProps['comboboxWidget'] = $props();
+
+	const ctx = getFormContext();
+
+	const id = $derived(getId(ctx, config.path));
+
+	const mapped = singleOption({
+		mapper: () => idMapper(options),
+		value: () => value,
+		update: (v) => (value = v)
+	});
+
+	function onchange() {
+		handlers.oninput?.();
+		handlers.onchange?.();
+	}
+
+	const { placeholder = ' ', ...attributes } = $derived(
+		uiOptionProps('svarCombobox')(
+			{
+				id,
+				disabled: isDisabled(ctx),
+				error: errors.length > 0,
+				onchange
+			},
+			config,
+			ctx
+		)
+	);
+
+	const items = $derived(
+		config.schema.default === undefined
+			? [{ id: UNDEFINED_ID, label: placeholder }, ...options]
+			: options
+	);
+</script>
+
+<Combo options={items} bind:value={mapped.value} {...attributes} />

dist/extra-widgets/combobox.svelte.d.ts

+import type { ComponentProps as SvelteComponentProps } from 'svelte';
+import { Combo } from '@svar-ui/svelte-core';
+import '@sjsf/form/fields/extra-widgets/combobox';
+declare module '@sjsf/form' {
+    interface UiOptions {
+        svarCombobox?: SvelteComponentProps<typeof Combo>;
+    }
+}
+declare const Combobox: import("svelte").Component<import("@sjsf/form/fields/widgets").WidgetCommonProps<import("@sjsf/form").SchemaValue> & import("@sjsf/form/fields/widgets").Options, {}, "value">;
+type Combobox = ReturnType<typeof Combobox>;
+export default Combobox;

dist/extra-widgets/date-range-picker-include.d.ts

+import './date-range-picker.svelte';
+declare module '../definitions.js' {
+    interface ExtraWidgets {
+        svarDateRangePickerWidget: {};
+    }
+}

dist/extra-widgets/date-range-picker-include.js

+import { definitions } from '../definitions.js';
+import DateRangePicker from './date-range-picker.svelte';
+import './date-range-picker.svelte';
+definitions.svarDateRangePickerWidget = DateRangePicker;

dist/extra-widgets/date-range-picker.svelte

+<script lang="ts" module>
+	import type { ComponentProps as SvelteComponentProps } from 'svelte';
+	import { DateRangePicker as SvarDateRangePicker } from '@svar-ui/svelte-core';
+	import type { Range } from '@sjsf/form/lib/range';
+	import type { WidgetCommonProps } from '@sjsf/form/fields/widgets';
+
+	declare module '@sjsf/form' {
+		interface ComponentProps {
+			svarDateRangePickerWidget: WidgetCommonProps<Partial<Range<string>>>;
+		}
+		interface ComponentBindings {
+			svarDateRangePickerWidget: 'value';
+		}
+		interface UiOptions {
+			svarDateRangePicker?: SvelteComponentProps<typeof SvarDateRangePicker>;
+		}
+	}
+</script>
+
+<script lang="ts">
+	import {
+		getFormContext,
+		getId,
+		isDisabled,
+		uiOptionProps,
+		type ComponentProps
+	} from '@sjsf/form';
+
+	import { parseLocalDate, toLocalDate } from '../local-date.js';
+
+	let {
+		value = $bindable(),
+		config,
+		handlers,
+    errors
+	}: ComponentProps['svarDateRangePickerWidget'] = $props();
+
+	const ctx = getFormContext();
+
+	const id = $derived(getId(ctx, config.path));
+
+	const parsed = $derived(
+		value?.start
+			? value.end
+				? {
+						start: parseLocalDate(value.start),
+						end: parseLocalDate(value.end)
+					}
+				: { start: parseLocalDate(value.start) }
+			: undefined
+	);
+
+	function onchange() {
+		handlers.oninput?.();
+		handlers.onchange?.();
+	}
+</script>
+
+<SvarDateRangePicker
+	bind:value={
+		() => parsed,
+		(v) => {
+			value = v && {
+				start: v?.start && toLocalDate(v.start),
+				end: v?.end && toLocalDate(v.end)
+			};
+		}
+	}
+	{...uiOptionProps('svarDateRangePicker')(
+		{
+			id,
+			disabled: isDisabled(ctx),
+			error: errors.length > 0,
+			onchange,
+			editable: true
+		},
+		config,
+		ctx
+	)}
+/>

dist/extra-widgets/date-range-picker.svelte.d.ts

+import type { ComponentProps as SvelteComponentProps } from 'svelte';
+import { DateRangePicker as SvarDateRangePicker } from '@svar-ui/svelte-core';
+import type { Range } from '@sjsf/form/lib/range';
+import type { WidgetCommonProps } from '@sjsf/form/fields/widgets';
+declare module '@sjsf/form' {
+    interface ComponentProps {
+        svarDateRangePickerWidget: WidgetCommonProps<Partial<Range<string>>>;
+    }
+    interface ComponentBindings {
+        svarDateRangePickerWidget: 'value';
+    }
+    interface UiOptions {
+        svarDateRangePicker?: SvelteComponentProps<typeof SvarDateRangePicker>;
+    }
+}
+declare const DateRangePicker: import("svelte").Component<WidgetCommonProps<Partial<Range<string>>>, {}, "value">;
+type DateRangePicker = ReturnType<typeof DateRangePicker>;
+export default DateRangePicker;

dist/extra-widgets/radio-buttons-include.d.ts

+import './radio-buttons.svelte';
+declare module '../definitions.js' {
+    interface ExtraWidgets {
+        radioButtonsWidget: {};
+    }
+}

dist/extra-widgets/radio-buttons-include.js

+import { definitions } from '../definitions.js';
+import RadioButtons from './radio-buttons.svelte';
+import './radio-buttons.svelte';
+definitions.radioButtonsWidget = RadioButtons;

dist/extra-widgets/radio-buttons.svelte

+<script lang="ts" module>
+	import type { ComponentProps as SvelteComponentProps } from 'svelte';
+	import { Segmented } from '@svar-ui/svelte-core';
+	import '@sjsf/form/fields/extra-widgets/radio-buttons';
+
+	declare module '@sjsf/form' {
+		interface UiOptions {
+			svarRadioButtons?: SvelteComponentProps<typeof Segmented>;
+		}
+	}
+</script>
+
+<script lang="ts">
+	import { getFormContext, uiOptionProps, type ComponentProps } from '@sjsf/form';
+	import { idMapper, singleOption } from '@sjsf/form/options.svelte';
+
+	let {
+		value = $bindable(),
+		options,
+		config,
+		handlers
+	}: ComponentProps['radioButtonsWidget'] = $props();
+
+	const ctx = getFormContext();
+
+	const mapped = singleOption({
+		mapper: () => idMapper(options),
+		value: () => value,
+		update: (v) => (value = v)
+	});
+
+	function onchange() {
+		handlers.oninput?.();
+		handlers.onchange?.();
+	}
+</script>
+
+<Segmented
+	{options}
+	bind:value={mapped.value}
+	{...uiOptionProps('svarRadioButtons')(
+		{
+			onchange
+		},
+		config,
+		ctx
+	)}
+/>

dist/extra-widgets/radio-buttons.svelte.d.ts

+import type { ComponentProps as SvelteComponentProps } from 'svelte';
+import { Segmented } from '@svar-ui/svelte-core';
+import '@sjsf/form/fields/extra-widgets/radio-buttons';
+declare module '@sjsf/form' {
+    interface UiOptions {
+        svarRadioButtons?: SvelteComponentProps<typeof Segmented>;
+    }
+}
+declare const RadioButtons: import("svelte").Component<import("@sjsf/form/fields/widgets").WidgetCommonProps<import("@sjsf/form").SchemaValue> & import("@sjsf/form/fields/widgets").Options, {}, "value">;
+type RadioButtons = ReturnType<typeof RadioButtons>;
+export default RadioButtons;

dist/extra-widgets/switch-include.d.ts

+import './switch.svelte';
+declare module '../definitions.js' {
+    interface ExtraWidgets {
+        switchWidget: {};
+    }
+}

dist/extra-widgets/switch-include.js

+import { definitions } from '../definitions.js';
+import Switch from './switch.svelte';
+import './switch.svelte';
+definitions.switchWidget = Switch;

dist/extra-widgets/switch.svelte

+<script lang="ts" module>
+	import type { ComponentProps as SvelteComponentProps } from 'svelte';
+	import { Switch as SvarSwitch } from '@svar-ui/svelte-core';
+	import '@sjsf/form/fields/extra-widgets/switch';
+
+	declare module '@sjsf/form' {
+		interface UiOptions {
+			svarSwitch?: SvelteComponentProps<typeof SvarSwitch>;
+		}
+	}
+</script>
+
+<script lang="ts">
+	import {
+		getFormContext,
+		getId,
+		isDisabled,
+		uiOptionProps,
+		type ComponentProps
+	} from '@sjsf/form';
+
+	let { value = $bindable(), config, handlers }: ComponentProps['switchWidget'] = $props();
+
+	const ctx = getFormContext();
+
+	const id = $derived(getId(ctx, config.path));
+
+	function onchange() {
+		handlers.oninput?.();
+		handlers.onchange?.();
+	}
+</script>
+
+<SvarSwitch
+	bind:value={() => value ?? false, (v) => (value = v)}
+	{...uiOptionProps('svarSwitch')(
+		{
+			id,
+			disabled: isDisabled(ctx),
+			onchange
+		},
+		config,
+		ctx
+	)}
+/>

dist/extra-widgets/switch.svelte.d.ts

+import type { ComponentProps as SvelteComponentProps } from 'svelte';
+import { Switch as SvarSwitch } from '@svar-ui/svelte-core';
+import '@sjsf/form/fields/extra-widgets/switch';
+declare module '@sjsf/form' {
+    interface UiOptions {
+        svarSwitch?: SvelteComponentProps<typeof SvarSwitch>;
+    }
+}
+declare const Switch: import("svelte").Component<import("@sjsf/form/fields/widgets").WidgetCommonProps<boolean>, {}, "value">;
+type Switch = ReturnType<typeof Switch>;
+export default Switch;

dist/local-date.d.ts

+export declare function parseLocalDate(date: string): Date;
+export declare function toLocalDate(date: Date): string;

dist/local-date.js

+export function parseLocalDate(date) {
+    const [year, month, day] = date.split('-').map(Number);
+    return new Date(year, month - 1, day);
+}
+export function toLocalDate(date) {
+    return date.toLocaleDateString('en-CA');
+}

dist/extra-widgets/date-picker.svelte

@@ -22,2 +22,4 @@ <script lang="ts" module>
 
+	import { parseLocalDate, toLocalDate } from '../local-date.js';
+
 	let {
@@ -34,7 +36,2 @@ value = $bindable(),
 
-	function parseLocalDate(date: string) {
-		const [year, month, day] = date.split('-').map(Number);
-		return new Date(year, month - 1, day);
-	}
-
 	function onchange() {
@@ -48,4 +45,3 @@ handlers.oninput?.();
 	bind:value={
-		() => (value ? parseLocalDate(value) : undefined),
-		(v) => (value = v?.toLocaleDateString('en-CA'))
+		() => (value ? parseLocalDate(value) : undefined), (v) => (value = v && toLocalDate(v))
 	}
@@ -52,0 +48,0 @@ {...uiOptionProps('svarDatePicker')(

dist/specs.d.ts

 import { s } from 'theme-testing/specs';
 import '@sjsf/form/fields/extra/array-tags-include';
 import '@sjsf/form/fields/extra/array-files-include';
+import '@sjsf/form/fields/extra/aggregated-include';
 import './extra-widgets/checkboxes-include.js';
+import './extra-widgets/color-picker-include.js';
+import './extra-widgets/color-select-include.js';
+import './extra-widgets/combobox-include.js';
 import './extra-widgets/date-picker-include.js';
+import './extra-widgets/date-range-picker-include.js';
 import './extra-widgets/multi-select-include.js';
+import './extra-widgets/radio-buttons-include.js';
 import './extra-widgets/radio-include.js';
 import './extra-widgets/range-include.js';
+import './extra-widgets/switch-include.js';
 import './extra-widgets/textarea-include.js';
 export declare const specs: s.Specs;
 export declare const extraWidgets: string[];

dist/specs.js

 import { s, DEFAULT_SPECS } from 'theme-testing/specs';
 import '@sjsf/form/fields/extra/array-tags-include';
 import '@sjsf/form/fields/extra/array-files-include';
+import '@sjsf/form/fields/extra/aggregated-include';
 import './extra-widgets/checkboxes-include.js';
+import './extra-widgets/color-picker-include.js';
+import './extra-widgets/color-select-include.js';
+import './extra-widgets/combobox-include.js';
 import './extra-widgets/date-picker-include.js';
+import './extra-widgets/date-range-picker-include.js';
 import './extra-widgets/multi-select-include.js';
+import './extra-widgets/radio-buttons-include.js';
 import './extra-widgets/radio-include.js';
 import './extra-widgets/range-include.js';
+import './extra-widgets/switch-include.js';
 import './extra-widgets/textarea-include.js';
@@ -36,2 +43,14 @@ function prepareSpecs(specs) {
     ...prepareSpecs(DEFAULT_SPECS),
+    colorPicker: [s.text, { 'ui:components': { textWidget: 'svarColorPickerWidget' } }, {}],
+    colorSelect: [s.text, { 'ui:components': { textWidget: 'svarColorSelectWidget' } }, {}],
+    combobox: [
+        s.enumeration,
+        {
+            'ui:components': {
+                stringField: 'enumField',
+                selectWidget: 'comboboxWidget'
+            }
+        },
+        {}
+    ],
     datePicker: [
@@ -44,2 +63,14 @@ s.text,
     ],
+    dateRangePicker: [
+        s.range(s.text),
+        {
+            'ui:components': {
+                objectField: 'aggregatedField',
+                aggregatedWidget: 'svarDateRangePickerWidget'
+            }
+        },
+        {
+            onchange: 'changeSvarDateRangePicker'
+        }
+    ],
     multiSelect: [
@@ -59,2 +90,15 @@ s.uniqueArray,
     ],
+    radioButtons: [
+        s.enumeration,
+        {
+            'ui:components': {
+                stringField: 'enumField',
+                selectWidget: 'radioButtonsWidget'
+            },
+            'ui:options': {
+                useLabel: false
+            }
+        },
+        {}
+    ],
     radio: [
@@ -82,2 +126,3 @@ s.enumeration,
     ],
+    switch: [s.boolean, { 'ui:components': { checkboxWidget: 'switchWidget' } }, {}],
     textarea: [
@@ -84,0 +129,0 @@ s.text,

dist/widgets/select.svelte

@@ -32,11 +32,10 @@ <script lang="ts" module>
 
-	const mapped = $derived(
-		singleOption({
-			mapper: () => idMapper(options),
-			value: () => value,
-			update: (v) => (value = v)
-		})
-	);
 	const id = $derived(getId(ctx, config.path));
 
+	const mapped = singleOption({
+		mapper: () => idMapper(options),
+		value: () => value,
+		update: (v) => (value = v)
+	});
+
 	function onchange() {
@@ -43,0 +42,0 @@ handlers.oninput?.();

package.json

 {
   "name": "@sjsf-lab/svar-theme",
-  "version": "3.0.0",
+  "version": "3.1.0",
   "description": "The SVAR v2 based theme for svelte-jsonschema-form",
@@ -48,8 +48,8 @@ "license": "MIT",
   "dependencies": {
-    "@sjsf/basic-theme": "^3.0.0"
+    "@sjsf/basic-theme": "^3.1.0"
   },
   "peerDependencies": {
-    "@sjsf/form": "^3.0.0",
+    "@sjsf/form": "^3.1.0",
     "@svar-ui/svelte-core": "^2.3.0",
-    "svelte": "^5.30.0"
+    "svelte": "^5.34.8"
   },
@@ -60,6 +60,6 @@ "devDependencies": {
     "globals": "16.5.0",
-    "svelte": "^5.43.3",
-    "@sjsf/ajv8-validator": "3.0.0",
-    "@sjsf/form": "3.0.0",
-    "theme-testing": "1.0.13"
+    "svelte": "^5.45.4",
+    "@sjsf/ajv8-validator": "3.1.0",
+    "@sjsf/form": "3.1.0",
+    "theme-testing": "1.0.17"
   },
@@ -66,0 +66,0 @@ "keywords": [

No alert changes

Improved metrics

Total package byte prevSize

127080

24.45%

Number of package files

90

40.63%

Lines of code

867

39.17%

Dependency changes

• Updated

  @sjsf/basic-theme@^3.1.0