@sjsf/skeleton-theme 2.0.0-next.7 → 2.0.0-next.9

package/README.md

@@ -2,7 +2,7 @@
 
 The [skeleton](https://github.com/skeletonlabs/skeleton) v3 (tailwind v3) based theme for [svelte-jsonschema-form](https://github.com/x0k/svelte-jsonschema-form).
 
-- [Documentation](https://x0k.github.io/svelte-jsonschema-form/themes/skeleton/)
+- [Documentation](https://x0k.github.io/svelte-jsonschema-form/v2/themes/skeleton/)
 - [Playground](https://x0k.github.io/svelte-jsonschema-form/playground2/)
 
 ## Installation

package/dist/components/button.svelte

@@ -10,7 +10,9 @@
 		defineDisabled(ctx, {
 			disabled,
 			...config.uiOptions?.button,
-			...config.uiOptions?.buttons?.[type]
+			...config.uiOptions?.buttons?.[type],
+			...ctx.extraUiOptions?.('button', config),
+			...ctx.extraUiOptions?.('buttons', config)?.[type]
 		})
 	);
 </script>

package/dist/components/description.svelte

@@ -1,8 +1,16 @@
 <script lang="ts">
-	import type { ComponentProps } from '@sjsf/form';
+	import { getFormContext, type ComponentProps } from '@sjsf/form';
 	import '@sjsf/basic-theme/components/description.svelte';
 
 	const { description, config }: ComponentProps['description'] = $props();
+
+	const ctx = getFormContext();
 </script>
 
-<div class="opacity-60" {...config.uiOptions?.descriptionAttributes}>{description}</div>
+<div
+	class="opacity-60"
+	{...config.uiOptions?.descriptionAttributes}
+	{...ctx.extraUiOptions?.('descriptionAttributes', config)}
+>
+	{description}
+</div>

package/dist/components/errors-list.svelte

@@ -1,11 +1,18 @@
 <script lang="ts">
-	import type { ComponentProps } from '@sjsf/form';
+	import { getFormContext, type ComponentProps } from '@sjsf/form';
 	import '@sjsf/basic-theme/components/errors-list.svelte';
 
 	const { errors, config }: ComponentProps['errorsList'] = $props();
+
+	const ctx = getFormContext();
 </script>
 
-<ui class="text-error-500" data-errors-for={config.id} {...config.uiOptions?.errorsList}>
+<ui
+	class="text-error-500"
+	data-errors-for={config.id}
+	{...config.uiOptions?.errorsList}
+	{...ctx.extraUiOptions?.('errorsList', config)}
+>
 	{#each errors as err}
 		<li>{err.message}</li>
 	{/each}

package/dist/components/form.svelte

@@ -12,6 +12,7 @@
 	use:enhance={ctx}
 	class="flex flex-col gap-4"
 	{...config.uiOptions?.form}
+	{...ctx.extraUiOptions?.('form', config)}
 	{...attributes}
 >
 	{@render children?.()}

package/dist/components/help.svelte

@@ -1,8 +1,16 @@
 <script lang="ts">
-	import type { ComponentProps } from '@sjsf/form';
+	import { getFormContext, type ComponentProps } from '@sjsf/form';
 	import '@sjsf/basic-theme/components/help.svelte';
 
 	const { help, config }: ComponentProps['help'] = $props();
+
+	const ctx = getFormContext();
 </script>
 
-<div class="opacity-60" {...config.uiOptions?.helpAttributes}>{help}</div>
+<div
+	class="opacity-60"
+	{...config.uiOptions?.helpAttributes}
+	{...ctx.extraUiOptions?.('helpAttributes', config)}
+>
+	{help}
+</div>

package/dist/components/label.svelte

@@ -1,11 +1,18 @@
 <script lang="ts">
-	import type { ComponentProps } from '@sjsf/form';
+	import { getFormContext, type ComponentProps } from '@sjsf/form';
 	import '@sjsf/basic-theme/components/label.svelte';
 
 	const { title, config }: ComponentProps['label'] = $props();
+
+	const ctx = getFormContext();
 </script>
 
-<label class="label-text" for={config.id} {...config.uiOptions?.labelAttributes}>
+<label
+	class="label-text"
+	for={config.id}
+	{...config.uiOptions?.labelAttributes}
+	{...ctx.extraUiOptions?.('labelAttributes', config)}
+>
 	{title}
 	{#if config.required}
 		<span>*</span>

package/dist/components/layout.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { ComponentProps } from '@sjsf/form';
+	import { getFormContext, type ComponentProps } from '@sjsf/form';
 	import '@sjsf/basic-theme/components/layout.svelte';
 
 	const { type, children, config }: ComponentProps['layout'] = $props();
@@ -23,9 +23,13 @@
 			type === 'object-properties'
 	);
 
+	const ctx = getFormContext();
+
 	const attributes = $derived({
 		...config.uiOptions?.layout,
-		...config.uiOptions?.layouts?.[type]
+		...config.uiOptions?.layouts?.[type],
+		...ctx.extraUiOptions?.('layout', config),
+		...ctx.extraUiOptions?.('layouts', config)?.[type]
 	});
 </script>
 

package/dist/components/submit-button.svelte

@@ -6,7 +6,12 @@
 
 	const ctx = getFormContext();
 
-	const attributes = $derived(defineDisabled(ctx, config.uiOptions?.submitButton ?? {}));
+	const attributes = $derived(
+		defineDisabled(ctx, {
+			...config.uiOptions?.submitButton,
+			...ctx.extraUiOptions?.('submitButton', config)
+		})
+	);
 </script>
 
 <button class="btn preset-filled preset-filled-primary-500 w-full" type="submit" {...attributes}>

package/dist/components/title.svelte

@@ -1,13 +1,16 @@
 <script lang="ts">
-	import type { ComponentProps } from '@sjsf/form';
+	import { getFormContext, type ComponentProps } from '@sjsf/form';
 	import '@sjsf/basic-theme/components/title.svelte';
 
 	const { title, type, config }: ComponentProps['title'] = $props();
+
+	const ctx = getFormContext();
 </script>
 
 <div
 	class={type === 'field' ? 'label-text' : 'font-bold text-xl'}
 	{...config.uiOptions?.titleAttributes}
+	{...ctx.extraUiOptions?.('titleAttributes', config)}
 >
 	{title}
 </div>

package/dist/extra-widgets/checkboxes.svelte

@@ -18,7 +18,15 @@
 
 	const ctx = getFormContext();
 
-	const attributes = $derived(inputAttributes(ctx, config, handlers, config.uiOptions?.checkboxes));
+	const attributes = $derived(
+		inputAttributes(
+			ctx,
+			config,
+			handlers,
+			config.uiOptions?.checkboxes,
+			ctx.extraUiOptions?.('checkbox', config)
+		)
+	);
 </script>
 
 {#each options as option, index (option.id)}

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

@@ -6,7 +6,15 @@
 
 	const ctx = getFormContext();
 
-	const attributes = $derived(inputAttributes(ctx, config, handlers, config.uiOptions?.datePicker));
+	const attributes = $derived(
+		inputAttributes(
+			ctx,
+			config,
+			handlers,
+			config.uiOptions?.datePicker,
+			ctx.extraUiOptions?.('datePicker', config)
+		)
+	);
 </script>
 
 <input type="date" bind:value class="input" {...attributes} />

package/dist/extra-widgets/file.svelte

@@ -13,7 +13,15 @@
 
 	const ctx = getFormContext();
 
-	const attributes = $derived(inputAttributes(ctx, config, handlers, config.uiOptions?.file));
+	const attributes = $derived(
+		inputAttributes(
+			ctx,
+			config,
+			handlers,
+			config.uiOptions?.file,
+			ctx.extraUiOptions?.('file', config)
+		)
+	);
 </script>
 
 <input

package/dist/extra-widgets/multi-select.svelte

@@ -13,7 +13,13 @@
 	const ctx = getFormContext();
 
 	const attributes = $derived(
-		selectAttributes(ctx, config, handlers, config.uiOptions?.multiSelect)
+		selectAttributes(
+			ctx,
+			config,
+			handlers,
+			config.uiOptions?.multiSelect,
+			ctx.extraUiOptions?.('multiSelect', config)
+		)
 	);
 
 	const mapped = $derived(

package/dist/extra-widgets/radio.svelte

@@ -13,7 +13,15 @@
 
 	const ctx = getFormContext();
 
-	const attributes = $derived(inputAttributes(ctx, config, handlers, config.uiOptions?.radio));
+	const attributes = $derived(
+		inputAttributes(
+			ctx,
+			config,
+			handlers,
+			config.uiOptions?.radio,
+			ctx.extraUiOptions?.('radio', config)
+		)
+	);
 </script>
 
 {#each options as option, index (option.id)}

package/dist/extra-widgets/range.svelte

@@ -6,7 +6,15 @@
 
 	const ctx = getFormContext();
 
-	const attributes = $derived(inputAttributes(ctx, config, handlers, config.uiOptions?.range));
+	const attributes = $derived(
+		inputAttributes(
+			ctx,
+			config,
+			handlers,
+			config.uiOptions?.range,
+			ctx.extraUiOptions?.('range', config)
+		)
+	);
 </script>
 
 <input

package/dist/extra-widgets/textarea.svelte

@@ -7,7 +7,13 @@
 	const ctx = getFormContext();
 
 	const attributes = $derived(
-		textareaAttributes(ctx, config, handlers, config.uiOptions?.textarea)
+		textareaAttributes(
+			ctx,
+			config,
+			handlers,
+			config.uiOptions?.textarea,
+			ctx.extraUiOptions?.('textarea', config)
+		)
 	);
 </script>
 

package/dist/index.d.ts

@@ -1 +1 @@
-export declare const theme: import("@sjsf/form/lib/resolver").Resolver<import("@sjsf/form/lib/resolver").Chain<Record<"stringField" | "numberField" | "integerField" | "booleanField" | "objectField" | "arrayField" | "tupleField" | "nullField" | "oneOfField" | "anyOfField" | "arrayItemField" | "objectPropertyField" | keyof import("@sjsf/form/fields/resolver/definitions").ExtraFields, any>, Record<"form" | "button" | "submitButton" | "fieldTemplate" | "objectTemplate" | "objectPropertyTemplate" | "arrayTemplate" | "arrayItemTemplate" | "multiFieldTemplate" | "layout" | "textWidget" | "numberWidget" | "selectWidget" | "checkboxWidget" | "title" | "label" | "description" | "help" | "errorsList" | keyof import("./definitions").ExtraWidgets, any>>, import("@sjsf/form/lib/resolver").Chain<typeof import("@sjsf/form/fields/exports") & Pick<import("@sjsf/form").ComponentDefinitions, keyof import("@sjsf/form/fields/resolver/definitions").ExtraFields>, typeof import("@sjsf/form/templates/exports") & typeof import("./components/exports.js") & typeof import("./widgets/exports.js") & Pick<import("@sjsf/form").ComponentDefinitions, keyof import("./definitions").ExtraWidgets>>>;
+export declare const theme: import("@sjsf/form/lib/resolver").Resolver<import("@sjsf/form/lib/resolver").Chain<Record<"stringField" | "numberField" | "integerField" | "booleanField" | "objectField" | "arrayField" | "tupleField" | "nullField" | "oneOfField" | "anyOfField" | "arrayItemField" | "objectPropertyField" | keyof import("@sjsf/form/fields/resolver/definitions").ExtraFields, any>, Record<"form" | "button" | "title" | "description" | "help" | "submitButton" | "layout" | "errorsList" | "fieldTemplate" | "objectTemplate" | "objectPropertyTemplate" | "arrayTemplate" | "arrayItemTemplate" | "multiFieldTemplate" | "textWidget" | "numberWidget" | "selectWidget" | "checkboxWidget" | "label" | keyof import("./definitions").ExtraWidgets, any>>, import("@sjsf/form/lib/resolver").Chain<typeof import("@sjsf/form/fields/exports") & Pick<import("@sjsf/form").ComponentDefinitions, keyof import("@sjsf/form/fields/resolver/definitions").ExtraFields>, typeof import("@sjsf/form/templates/exports") & typeof import("./components/exports.js") & typeof import("./widgets/exports.js") & Pick<import("@sjsf/form").ComponentDefinitions, keyof import("./definitions").ExtraWidgets>>>;

package/dist/specs.d.ts

@@ -7,3 +7,4 @@ import './extra-widgets/radio-include';
 import './extra-widgets/range-include';
 import './extra-widgets/textarea-include';
 export declare const specs: s.Specs;
+export declare const extraWidgets: string[];

package/dist/specs.js

@@ -13,3 +13,4 @@ export const specs = {
     range: [s.number, { 'ui:components': { numberWidget: 'rangeWidget' } }],
     textarea: [s.text, { 'ui:components': { textWidget: 'textareaWidget' } }]
 };
+export const extraWidgets = Object.keys(import.meta.glob('./extra-widgets/*.svelte')).map((widget) => widget.substring(16, widget.length - 7));

package/dist/widgets/checkbox.svelte

@@ -6,7 +6,15 @@
 
 	const ctx = getFormContext();
 
-	const attributes = $derived(inputAttributes(ctx, config, handlers, config.uiOptions?.checkbox));
+	const attributes = $derived(
+		inputAttributes(
+			ctx,
+			config,
+			handlers,
+			config.uiOptions?.checkbox,
+			ctx.extraUiOptions?.('checkbox', config)
+		)
+	);
 </script>
 
 <label class="flex items-center space-x-2 cursor-pointer">

package/dist/widgets/number.svelte

@@ -6,7 +6,15 @@
 
 	const ctx = getFormContext();
 
-	const attributes = $derived(inputAttributes(ctx, config, handlers, config.uiOptions?.number));
+	const attributes = $derived(
+		inputAttributes(
+			ctx,
+			config,
+			handlers,
+			config.uiOptions?.number,
+			ctx.extraUiOptions?.('number', config)
+		)
+	);
 </script>
 
 <input

package/dist/widgets/select.svelte

@@ -15,7 +15,15 @@
 
 	const ctx = getFormContext();
 
-	const attributes = $derived(selectAttributes(ctx, config, handlers, config.uiOptions?.select));
+	const attributes = $derived(
+		selectAttributes(
+			ctx,
+			config,
+			handlers,
+			config.uiOptions?.select,
+			ctx.extraUiOptions?.('select', config)
+		)
+	);
 </script>
 
 <select class="select" bind:value={mapped.value} {...attributes}>

package/dist/widgets/text.svelte

@@ -6,7 +6,15 @@
 
 	const ctx = getFormContext();
 
-	const attributes = $derived(inputAttributes(ctx, config, handlers, config.uiOptions?.text));
+	const attributes = $derived(
+		inputAttributes(
+			ctx,
+			config,
+			handlers,
+			config.uiOptions?.text,
+			ctx.extraUiOptions?.('text', config)
+		)
+	);
 </script>
 
 <input type="text" bind:value class="input" {...attributes} />

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sjsf/skeleton-theme",
-  "version": "2.0.0-next.7",
+  "version": "2.0.0-next.9",
   "description": "The skeleton based theme for svelte-jsonschema-form",
   "license": "MIT",
   "keywords": [
@@ -52,40 +52,40 @@
     }
   },
   "peerDependencies": {
-    "@sjsf/form": "^2.0.0-next.7",
-    "@sjsf/basic-theme": "^2.0.0-next.7",
+    "@sjsf/form": "^2.0.0-next.9",
+    "@sjsf/basic-theme": "^2.0.0-next.9",
     "@skeletonlabs/skeleton": ">=3.0.0-next.0 <=3.0.0-next.10",
     "@tailwindcss/forms": "^0.5.0",
     "svelte": "^5.25.0"
   },
   "devDependencies": {
-    "@playwright/test": "^1.51.0",
+    "@playwright/test": "^1.51.1",
     "@skeletonlabs/skeleton": "3.0.0-next.10",
     "@sveltejs/adapter-static": "^3.0.8",
-    "@sveltejs/kit": "^2.20.2",
-    "@sveltejs/package": "^2.3.10",
+    "@sveltejs/kit": "^2.20.7",
+    "@sveltejs/package": "^2.3.11",
     "@sveltejs/vite-plugin-svelte": "^5.0.3",
     "@tailwindcss/forms": "^0.5.10",
     "@types/eslint": "^9.6.1",
     "ajv": "^8.17.1",
     "autoprefixer": "^10.4.21",
-    "eslint": "^9.23.0",
-    "eslint-config-prettier": "^10.1.1",
-    "eslint-plugin-svelte": "^3.3.3",
+    "eslint": "^9.24.0",
+    "eslint-config-prettier": "^10.1.2",
+    "eslint-plugin-svelte": "^3.5.1",
     "globals": "^16.0.0",
     "postcss": "^8.5.3",
     "prettier": "^3.5.3",
     "prettier-plugin-svelte": "^3.3.3",
-    "svelte": "^5.25.6",
-    "svelte-check": "^4.1.5",
+    "svelte": "^5.27.3",
+    "svelte-check": "^4.1.6",
     "tailwindcss": "^3.4.17",
-    "typescript-eslint": "^8.27.0",
-    "vite": "6.2.2",
-    "vitest": "3.0.9",
-    "@sjsf/ajv8-validator": "2.0.0-next.7",
-    "@sjsf/basic-theme": "2.0.0-next.7",
-    "@sjsf/form": "2.0.0-next.7",
-    "testing": "0.1.0-next.7"
+    "typescript-eslint": "^8.30.1",
+    "vite": "6.3.2",
+    "vitest": "3.1.1",
+    "@sjsf/ajv8-validator": "2.0.0-next.9",
+    "@sjsf/basic-theme": "2.0.0-next.9",
+    "@sjsf/form": "2.0.0-next.9",
+    "testing": "0.1.0-next.9"
   },
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",