@sjsf/skeleton-theme 1.9.1 → 2.0.0-next.0

package/dist/widgets/select.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { getFormContext, selectAttributes, type ComponentProps } from '@sjsf/form';
+	import { indexMapper, singleOption } from '@sjsf/form/options.svelte';
+
+	let { value = $bindable(), options, config, handlers }: ComponentProps['selectWidget'] = $props();
+
+	const mapped = $derived(
+		singleOption({
+			mapper: () => indexMapper(options),
+			value: () => value,
+			update: (v) => (value = v)
+		})
+	);
+
+	const ctx = getFormContext();
+
+	const attributes = $derived(
+		selectAttributes(ctx, config, handlers, config.uiOptions?.select)
+	);
+</script>
+
+<select class="select" bind:value={mapped.value} {...attributes}>
+	{#if config.schema.default === undefined}
+		<option value={-1}>{attributes.placeholder}</option>
+	{/if}
+	{#each options as option, index (option.id)}
+		<option value={index} disabled={option.disabled}>
+			{option.label}
+		</option>
+	{/each}
+</select>

package/dist/widgets/select.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const Select: import("svelte").Component<import("@sjsf/form/fields/widgets").WidgetCommonProps<import("@sjsf/form").SchemaValue> & import("@sjsf/form/fields/widgets").Options, {}, "value">;
+type Select = ReturnType<typeof Select>;
+export default Select;

package/dist/widgets/text.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+	import { Datalist, getFormContext, inputAttributes, type ComponentProps } from '@sjsf/form';
+
+	let { value = $bindable(), config, handlers }: ComponentProps['textWidget'] = $props();
+
+	const ctx = getFormContext();
+
+	const attributes = $derived(inputAttributes(ctx, config, handlers, config.uiOptions?.text));
+</script>
+
+<input type="text" bind:value class="input" {...attributes} />
+<Datalist id={attributes.list} {config} />

package/dist/widgets/text.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const Text: import("svelte").Component<import("@sjsf/form/fields/widgets").WidgetCommonProps<string>, {}, "value">;
+type Text = ReturnType<typeof Text>;
+export default Text;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sjsf/skeleton-theme",
-  "version": "1.9.1",
+  "version": "2.0.0-next.0",
   "description": "The skeleton based theme for svelte-jsonschema-form",
   "license": "MIT",
   "keywords": [
@@ -25,6 +25,18 @@
   "bugs": "https://github.com/x0k/svelte-jsonschema-form/issues",
   "homepage": "https://x0k.github.io/svelte-jsonschema-form/",
   "exports": {
+    "./components/*": {
+      "types": "./dist/components/*.d.ts",
+      "svelte": "./dist/components/*"
+    },
+    "./widgets/*": {
+      "types": "./dist/widgets/*.d.ts",
+      "svelte": "./dist/widgets/*"
+    },
+    "./extra-widgets/*": {
+      "types": "./dist/extra-widgets/*.d.ts",
+      "svelte": "./dist/extra-widgets/*"
+    },
     ".": {
       "types": "./dist/index.d.ts",
       "svelte": "./dist/index.js"
@@ -36,38 +48,39 @@
     "./styles.css": "./dist/styles.css"
   },
   "peerDependencies": {
-    "@sjsf/form": "^1.9.1",
-    "@skeletonlabs/skeleton": "^3.0.0-next.5",
-    "@tailwindcss/forms": "^0.5.9",
-    "svelte": "^5.0.0"
+    "@sjsf/form": "^2.0.0-next.0",
+    "@skeletonlabs/skeleton": ">=3.0.0-next.0 <=3.0.0-next.10",
+    "@tailwindcss/forms": "^0.5.10",
+    "svelte": "^5.23.0"
   },
   "devDependencies": {
-    "@playwright/test": "^1.49.1",
+    "@playwright/test": "^1.51.0",
     "@skeletonlabs/skeleton": "3.0.0-next.10",
     "@sveltejs/adapter-static": "^3.0.8",
-    "@sveltejs/kit": "^2.15.3",
-    "@sveltejs/package": "^2.3.7",
+    "@sveltejs/kit": "^2.19.0",
+    "@sveltejs/package": "^2.3.10",
     "@sveltejs/vite-plugin-svelte": "^5.0.3",
     "@tailwindcss/forms": "^0.5.10",
     "@types/eslint": "^9.6.1",
     "ajv": "^8.17.1",
-    "autoprefixer": "^10.4.20",
-    "eslint": "^9.17.0",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-svelte": "^2.46.1",
-    "globals": "^15.14.0",
-    "postcss": "^8.4.49",
-    "prettier": "^3.4.2",
-    "prettier-plugin-svelte": "^3.3.2",
-    "svelte": "^5.18.0",
-    "svelte-check": "^4.1.3",
+    "autoprefixer": "^10.4.21",
+    "eslint": "^9.22.0",
+    "eslint-config-prettier": "^10.1.1",
+    "eslint-plugin-svelte": "^3.1.0",
+    "globals": "^16.0.0",
+    "postcss": "^8.5.3",
+    "prettier": "^3.5.3",
+    "prettier-plugin-svelte": "^3.3.3",
+    "svelte": "^5.23.0",
+    "svelte-check": "^4.1.5",
     "tailwindcss": "^3.4.17",
-    "typescript-eslint": "^8.19.1",
-    "vite": "6.0.11",
-    "vitest": "3.0.4",
-    "@sjsf/ajv8-validator": "1.9.1",
-    "@sjsf/form": "1.9.1",
-    "testing": "0.0.11"
+    "typescript-eslint": "^8.26.1",
+    "vite": "6.2.1",
+    "vitest": "3.0.8",
+    "@sjsf/ajv8-validator": "2.0.0-next.0",
+    "@sjsf/basic-theme": "2.0.0-next.0",
+    "@sjsf/form": "2.0.0-next.0",
+    "testing": "0.1.0-next.0"
   },
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",

package/dist/components/button-component.svelte

@@ -1,19 +0,0 @@
-<script lang="ts">
-	import type { ComponentProps } from '@sjsf/form';
-
-	const { children, type, attributes, disabled, onclick }: ComponentProps<'button'> = $props();
-
-	const isSubmit = $derived(type === 'submit');
-</script>
-
-<button
-	class="btn preset-filled"
-  class:preset-filled-primary-500={isSubmit}
-  class:w-full={isSubmit}
-	type={isSubmit ? 'submit' : 'button'}
-	{onclick}
-	{...attributes}
-	{disabled}
->
-	{@render children()}
-</button>

package/dist/components/button-component.svelte.d.ts

@@ -1,3 +0,0 @@
-import type { ComponentProps } from '@sjsf/form';
-declare const ButtonComponent: import("svelte").Component<ComponentProps<"button">, {}, "">;
-export default ButtonComponent;

package/dist/components/description-component.svelte

@@ -1,7 +0,0 @@
-<script lang="ts">
-  import type { ComponentProps } from "@sjsf/form";
-
-  const { description }: ComponentProps<"description"> = $props();
-</script>
-
-<div class="opacity-60">{description}</div>

package/dist/components/description-component.svelte.d.ts

@@ -1,3 +0,0 @@
-import type { ComponentProps } from "@sjsf/form";
-declare const DescriptionComponent: import("svelte").Component<ComponentProps<"description">, {}, "">;
-export default DescriptionComponent;

package/dist/components/form-component.svelte

@@ -1,9 +0,0 @@
-<script lang="ts">
-  import type { FormComponentProps } from '@sjsf/form'
-
-  let { children, form = $bindable(), onsubmit, attributes }: FormComponentProps = $props();
-</script>
-
-<form class="flex flex-col gap-4" {onsubmit} {...attributes} bind:this={form} >
-  {@render children?.()}
-</form>

package/dist/components/form-component.svelte.d.ts

@@ -1,3 +0,0 @@
-import type { FormComponentProps } from '@sjsf/form';
-declare const FormComponent: import("svelte").Component<FormComponentProps, {}, "form">;
-export default FormComponent;

package/dist/components/help-component.svelte

@@ -1,7 +0,0 @@
-<script lang="ts">
-  import type { ComponentProps } from "@sjsf/form";
-
-  const { help }: ComponentProps<"help"> = $props();
-</script>
-
-<div class="opacity-60">{help}</div>

package/dist/components/help-component.svelte.d.ts

@@ -1,3 +0,0 @@
-import type { ComponentProps } from "@sjsf/form";
-declare const HelpComponent: import("svelte").Component<ComponentProps<"help">, {}, "">;
-export default HelpComponent;

package/dist/components/index.d.ts

@@ -1,5 +0,0 @@
-import type { Component, Components, ComponentType } from "@sjsf/form";
-export declare const registry: {
-    [T in ComponentType]: Component<T>;
-};
-export declare const components: Components;

package/dist/components/index.js

@@ -1,17 +0,0 @@
-import FormComponent from "./form-component.svelte";
-import ButtonComponent from "./button-component.svelte";
-import LayoutComponent from "./layout-component.svelte";
-import TitleComponent from "./title-component.svelte";
-import DescriptionComponent from "./description-component.svelte";
-import HelpComponent from "./help-component.svelte";
-import ErrorsList from './errors-list.svelte';
-export const registry = {
-    form: FormComponent,
-    button: ButtonComponent,
-    layout: LayoutComponent,
-    title: TitleComponent,
-    description: DescriptionComponent,
-    help: HelpComponent,
-    errorsList: ErrorsList
-};
-export const components = (type) => registry[type];

package/dist/components/layout-component.svelte.d.ts

@@ -1,3 +0,0 @@
-import type { ComponentProps } from '@sjsf/form';
-declare const LayoutComponent: import("svelte").Component<ComponentProps<"layout">, {}, "">;
-export default LayoutComponent;

package/dist/components/title-component.svelte

@@ -1,16 +0,0 @@
-<script lang="ts">
-  import type { ComponentProps } from "@sjsf/form";
-
-  const { title, type, forId, required }: ComponentProps<"title"> = $props();
-</script>
-
-{#if type === "field"}
-  <label class="label-text" for={forId}>
-    {title}
-    {#if required}
-      <span>*</span>
-    {/if}
-  </label>
-{:else}
-  <div class="font-bold text-2xl">{title}</div>
-{/if}

package/dist/components/title-component.svelte.d.ts

@@ -1,3 +0,0 @@
-import type { ComponentProps } from "@sjsf/form";
-declare const TitleComponent: import("svelte").Component<ComponentProps<"title">, {}, "">;
-export default TitleComponent;

package/dist/widgets/checkbox-widget.svelte

@@ -1,15 +0,0 @@
-<script lang="ts">
-	import type { WidgetProps } from '@sjsf/form';
-
-	let { config, value = $bindable(), attributes }: WidgetProps<'checkbox'> = $props();
-</script>
-
-<label class="flex items-center space-x-2 cursor-pointer">
-	<input
-		type="checkbox"
-		class="checkbox"
-		bind:checked={value}
-		{...attributes}
-	/>
-	<p>{config.title}</p>
-</label>

package/dist/widgets/checkbox-widget.svelte.d.ts

@@ -1,2 +0,0 @@
-declare const CheckboxWidget: import("svelte").Component<import("@sjsf/form").WidgetCommonProps<boolean, import("svelte/elements").HTMLInputAttributes>, {}, "value">;
-export default CheckboxWidget;

package/dist/widgets/checkboxes-widget.svelte.d.ts

@@ -1,2 +0,0 @@
-declare const CheckboxesWidget: import("svelte").Component<import("@sjsf/form").RadioWidgetProps<import("@sjsf/form/dist/core").SchemaArrayValue>, {}, "value">;
-export default CheckboxesWidget;

package/dist/widgets/file-widget.svelte

@@ -1,21 +0,0 @@
-<script lang="ts">
-	import type { WidgetProps } from '@sjsf/form';
-
-	let {
-		attributes,
-		multiple,
-		loading,
-		processing,
-		value = $bindable()
-	}: WidgetProps<'file'> = $props();
-</script>
-
-<input
-	type="file"
-	bind:files={value}
-	{multiple}
-	class="input"
-	data-loading={loading}
-	data-processing={processing}
-	{...attributes}
-/>

package/dist/widgets/file-widget.svelte.d.ts

@@ -1,2 +0,0 @@
-declare const FileWidget: import("svelte").Component<import("@sjsf/form").FileWidgetProps<FileList>, {}, "value">;
-export default FileWidget;

package/dist/widgets/index.d.ts

@@ -1,5 +0,0 @@
-import type { Widget, Widgets, WidgetType } from '@sjsf/form';
-export declare const registry: {
-    [T in WidgetType]: Widget<T>;
-};
-export declare const widgets: Widgets;

package/dist/widgets/index.js

@@ -1,20 +0,0 @@
-import TextWidget from './text-widget.svelte';
-import TextareaWidget from './textarea-widget.svelte';
-import NumberWidget from './number-widget.svelte';
-import SelectWidget from './select-widget.svelte';
-import CheckBoxWidget from './checkbox-widget.svelte';
-import RadioWidget from './radio-widget.svelte';
-import CheckboxesWidget from './checkboxes-widget.svelte';
-import FileWidget from './file-widget.svelte';
-export const registry = {
-    text: TextWidget,
-    textarea: TextareaWidget,
-    number: NumberWidget,
-    select: SelectWidget,
-    checkbox: CheckBoxWidget,
-    radio: RadioWidget,
-    checkboxes: CheckboxesWidget,
-    file: FileWidget,
-};
-// @ts-expect-error TODO: improve `widgets` type
-export const widgets = (type) => registry[type];

package/dist/widgets/number-widget.svelte

@@ -1,14 +0,0 @@
-<script lang="ts">
-	import type { WidgetProps } from '@sjsf/form';
-
-	let { value = $bindable(), attributes }: WidgetProps<'number'> = $props();
-</script>
-
-<input
-	type="number"
-	bind:value
-	class={attributes.type === 'range'
-		? 'range grow w-0'
-		: 'input'}
-	{...attributes}
-/>

package/dist/widgets/number-widget.svelte.d.ts

@@ -1,2 +0,0 @@
-declare const NumberWidget: import("svelte").Component<import("@sjsf/form").WidgetCommonProps<number | null, import("svelte/elements").HTMLInputAttributes>, {}, "value">;
-export default NumberWidget;

package/dist/widgets/radio-widget.svelte.d.ts

@@ -1,2 +0,0 @@
-declare const RadioWidget: import("svelte").Component<import("@sjsf/form").RadioWidgetProps<import("@sjsf/form").SchemaValue>, {}, "value">;
-export default RadioWidget;

package/dist/widgets/select-widget.svelte

@@ -1,40 +0,0 @@
-<script lang="ts">
-	import { singleOption, indexMapper, multipleOptions, type WidgetProps } from '@sjsf/form';
-
-	let {
-		attributes,
-		value = $bindable(),
-		options,
-		multiple,
-		config
-	}: WidgetProps<'select'> = $props();
-
-	const mapped = $derived(
-		(multiple ? multipleOptions : singleOption)({
-			mapper: () => indexMapper(options),
-			// @ts-expect-error
-			value: () => value,
-			update: (v) => (value = v)
-		})
-	);
-</script>
-
-{#snippet children()}
-	{#if !multiple && config.schema.default === undefined}
-		<option value={-1}>{attributes.placeholder}</option>
-	{/if}
-	{#each options as option, index (option.id)}
-		<option value={index} disabled={option.disabled}>
-			{option.label}
-		</option>
-	{/each}
-{/snippet}
-{#if multiple}
-	<select class="select" bind:value={mapped.value} multiple {...attributes}>
-		{@render children()}
-	</select>
-{:else}
-	<select class="select" bind:value={mapped.value} {...attributes}>
-		{@render children()}
-	</select>
-{/if}

package/dist/widgets/select-widget.svelte.d.ts

@@ -1,2 +0,0 @@
-declare const SelectWidget: import("svelte").Component<import("@sjsf/form").SelectWidgetProps<import("@sjsf/form").SchemaValue>, {}, "value">;
-export default SelectWidget;

package/dist/widgets/text-widget.svelte

@@ -1,12 +0,0 @@
-<script lang="ts">
-	import { type WidgetProps } from '@sjsf/form';
-
-	let { value = $bindable(), attributes }: WidgetProps<'text'> = $props();
-</script>
-
-<input
-	type="text"
-	bind:value
-	class="input"
-	{...attributes}
-/>

package/dist/widgets/text-widget.svelte.d.ts

@@ -1,2 +0,0 @@
-declare const TextWidget: import("svelte").Component<import("@sjsf/form").WidgetCommonProps<string, import("svelte/elements").HTMLInputAttributes>, {}, "value">;
-export default TextWidget;

package/dist/widgets/textarea-widget.svelte

@@ -1,7 +0,0 @@
-<script lang="ts">
-	import type { WidgetProps } from '@sjsf/form';
-
-	let { value = $bindable(), attributes }: WidgetProps<'textarea'> = $props();
-</script>
-
-<textarea bind:value class="textarea" {...attributes}></textarea>

package/dist/widgets/textarea-widget.svelte.d.ts

@@ -1,2 +0,0 @@
-declare const TextareaWidget: import("svelte").Component<import("@sjsf/form").WidgetCommonProps<string, import("svelte/elements").HTMLTextareaAttributes>, {}, "value">;
-export default TextareaWidget;