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

package/README.md

@@ -1,6 +1,6 @@
 # @sjsf/skeleton-theme
 
-The [skeleton](https://github.com/skeletonlabs/skeleton) based theme for [svelte-jsonschema-form](https://github.com/x0k/svelte-jsonschema-form).
+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/)
 - [Playground](https://x0k.github.io/svelte-jsonschema-form/playground/)
@@ -66,11 +66,12 @@ Bundled themes:
 
 ```svelte
 <script lang="ts">
-  import { createForm3 } from '@sjsf/form';
+  import { createForm } from '@sjsf/form';
   import { theme } from '@sjsf/skeleton-theme';
 
-  const form = createForm3({
-    ...theme,
+  const form = createForm({
+    theme,
+    ...
   })
 </script>
 ```

package/dist/components/button.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { defineDisabled, getFormContext, type ComponentProps } from '@sjsf/form';
+
+	const { children, onclick, config, disabled, type }: ComponentProps['button'] = $props();
+
+	const ctx = getFormContext();
+
+	const attributes = $derived(
+		defineDisabled(ctx, {
+			disabled,
+			...config.uiOptions?.button,
+			...config.uiOptions?.buttons?.[type]
+		})
+	);
+</script>
+
+<button class="btn preset-filled" type="button" {onclick} {...attributes}>
+	{@render children()}
+</button>

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

@@ -0,0 +1,8 @@
+declare const Button: import("svelte").Component<import("@sjsf/form/fields/components").ComponentCommonProps & {
+    type: import("@sjsf/form/fields/components").ButtonType;
+    disabled: boolean;
+    children: import("svelte").Snippet;
+    onclick: () => void;
+}, {}, "">;
+type Button = ReturnType<typeof Button>;
+export default Button;

package/dist/components/description.svelte

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

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

@@ -0,0 +1,6 @@
+declare const Description: import("svelte").Component<import("@sjsf/form/fields/components").ComponentCommonProps & {
+    type: import("@sjsf/form/templates/components").ParentTemplateType;
+    description: string;
+}, {}, "">;
+type Description = ReturnType<typeof Description>;
+export default Description;

package/dist/components/errors-list.svelte

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

package/dist/components/errors-list.svelte.d.ts

@@ -1,3 +1,5 @@
-import type { ComponentProps } from "@sjsf/form";
-declare const ErrorsList: import("svelte").Component<ComponentProps<"errorsList">, {}, "">;
+declare const ErrorsList: import("svelte").Component<import("@sjsf/form/fields/components").ComponentCommonProps & {
+    forId: string;
+}, {}, "">;
+type ErrorsList = ReturnType<typeof ErrorsList>;
 export default ErrorsList;

package/dist/components/exports.d.ts

@@ -0,0 +1,8 @@
+export { default as form } from './form.svelte';
+export { default as submitButton } from './submit-button.svelte';
+export { default as button } from './button.svelte';
+export { default as layout } from './layout.svelte';
+export { default as title } from './title.svelte';
+export { default as description } from './description.svelte';
+export { default as help } from './help.svelte';
+export { default as errorsList } from './errors-list.svelte';

package/dist/components/exports.js

@@ -0,0 +1,8 @@
+export { default as form } from './form.svelte';
+export { default as submitButton } from './submit-button.svelte';
+export { default as button } from './button.svelte';
+export { default as layout } from './layout.svelte';
+export { default as title } from './title.svelte';
+export { default as description } from './description.svelte';
+export { default as help } from './help.svelte';
+export { default as errorsList } from './errors-list.svelte';

package/dist/components/form.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { enhance, getFormContext, type ComponentProps } from '@sjsf/form';
+
+	let { config, children, ref = $bindable(), attributes }: ComponentProps['form'] = $props();
+
+	const ctx = getFormContext();
+</script>
+
+<form
+	bind:this={ref}
+	use:enhance={ctx}
+	class="flex flex-col gap-4"
+	{...config.uiOptions?.form}
+	{...attributes}
+>
+	{@render children?.()}
+</form>

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

@@ -0,0 +1,8 @@
+declare const Form: import("svelte").Component<{
+    config: import("@sjsf/form").Config;
+    ref?: HTMLFormElement | undefined;
+    children: import("svelte").Snippet;
+    attributes?: import("svelte/elements").HTMLFormAttributes | undefined;
+}, {}, "ref">;
+type Form = ReturnType<typeof Form>;
+export default Form;

package/dist/components/help.svelte

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

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

@@ -0,0 +1,5 @@
+declare const Help: import("svelte").Component<import("@sjsf/form/fields/components").ComponentCommonProps & {
+    help: string;
+}, {}, "">;
+type Help = ReturnType<typeof Help>;
+export default Help;

package/dist/components/{layout-component.svelte → layout.svelte}

@@ -1,12 +1,14 @@
 <script lang="ts">
 	import type { ComponentProps } from '@sjsf/form';
 
-	const { type, children, attributes }: ComponentProps<'layout'> = $props();
+	const { type, children, config }: ComponentProps['layout'] = $props();
 
-	const isItem = $derived(
-		type === 'array-item' || type === 'object-property' || type === 'field-content'
+	const isItemOrControls = $derived(
+		type === 'array-item' ||
+			type === 'object-property' ||
+			type === 'field-content' ||
+			type === 'array-item-controls'
 	);
-	const isControls = $derived(type === 'array-item-controls');
 	const isGrowable = $derived(
 		type === 'array-item-content' ||
 			type === 'object-property-key-input' ||
@@ -17,18 +19,20 @@
 		type === 'array-field' ||
 			type === 'object-field' ||
 			type === 'array-items' ||
-			type === 'object-properties' ||
-			type === 'root-field'
+			type === 'object-properties'
 	);
+
+	const attributes = $derived({
+		...config.uiOptions?.layout,
+		...config.uiOptions?.layouts?.[type]
+	});
 </script>
 
 <div
-	class:flex={isItem || isControls || isField || isColumn}
-	class:gap-2={isItem || isField}
+	class:flex={isItemOrControls || isField || isColumn}
+	class:gap-2={isItemOrControls || isField}
 	class:gap-4={isColumn}
-	class:items-start={isItem || isControls}
-	class:btn-group={isControls}
-	class:preset-outlined-surface-200-800={isControls}
+	class:items-start={isItemOrControls}
 	class:grow={isGrowable}
 	class:flex-col={isColumn || isField}
 	data-layout={type}

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

@@ -0,0 +1,6 @@
+declare const Layout: import("svelte").Component<import("@sjsf/form/fields/components").ComponentCommonProps & {
+    type: import("@sjsf/form/fields/components").LayoutType;
+    children: import("svelte").Snippet;
+}, {}, "">;
+type Layout = ReturnType<typeof Layout>;
+export default Layout;

package/dist/components/submit-button.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import { defineDisabled, getFormContext, type ComponentProps } from '@sjsf/form';
+
+	const { children, config }: ComponentProps['submitButton'] = $props();
+
+	const ctx = getFormContext();
+
+	const attributes = $derived(defineDisabled(ctx, config.uiOptions?.submitButton ?? {}));
+</script>
+
+<button class="btn preset-filled preset-filled-primary-500 w-full" type="submit" {...attributes}>
+	{@render children()}
+</button>

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

@@ -0,0 +1,6 @@
+declare const SubmitButton: import("svelte").Component<{
+    config: import("@sjsf/form").Config;
+    children: import("svelte").Snippet;
+}, {}, "">;
+type SubmitButton = ReturnType<typeof SubmitButton>;
+export default SubmitButton;

package/dist/components/title.svelte

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

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

@@ -0,0 +1,8 @@
+declare const Title: import("svelte").Component<import("@sjsf/form/fields/components").ComponentCommonProps & {
+    type: import("@sjsf/form/templates/components").ParentTemplateType;
+    title: string;
+    forId: string;
+    required: boolean;
+}, {}, "">;
+type Title = ReturnType<typeof Title>;
+export default Title;

package/dist/definitions.d.ts

@@ -0,0 +1,72 @@
+import type { ExtendableComponentDefinitionsWithoutFields } from '@sjsf/form/fields/resolver';
+import * as templates from '@sjsf/form/templates/exports';
+export declare const definitions: {
+    textWidget: import("svelte").Component<import("@sjsf/form/fields/widgets").WidgetCommonProps<string>, {}, "value">;
+    numberWidget: import("svelte").Component<import("@sjsf/form/fields/widgets").WidgetCommonProps<number>, {}, "value">;
+    selectWidget: import("svelte").Component<import("@sjsf/form/fields/widgets").WidgetCommonProps<import("@sjsf/form").SchemaValue> & import("@sjsf/form/fields/widgets").Options, {}, "value">;
+    checkboxWidget: import("svelte").Component<import("@sjsf/form/fields/widgets").WidgetCommonProps<boolean>, {}, "value">;
+    checkboxesWidget: import("svelte").Component<import("@sjsf/form/fields/widgets").WidgetCommonProps<import("@sjsf/form/core").SchemaArrayValue> & import("@sjsf/form/fields/widgets").Options, {}, "value">;
+    fileWidget: import("svelte").Component<import("@sjsf/form/fields/widgets").WidgetCommonProps<FileList> & {
+        multiple: boolean;
+        loading: boolean;
+        processing: boolean;
+    }, {}, "value">;
+    form: import("svelte").Component<{
+        config: import("@sjsf/form").Config;
+        ref?: HTMLFormElement | undefined;
+        children: import("svelte").Snippet;
+        attributes?: import("svelte/elements").HTMLFormAttributes | undefined;
+    }, {}, "ref">;
+    submitButton: import("svelte").Component<{
+        config: import("@sjsf/form").Config;
+        children: import("svelte").Snippet;
+    }, {}, "">;
+    button: import("svelte").Component<import("@sjsf/form/fields/components").ComponentCommonProps & {
+        type: import("@sjsf/form/fields/components").ButtonType;
+        disabled: boolean;
+        children: import("svelte").Snippet;
+        onclick: () => void;
+    }, {}, "">;
+    layout: import("svelte").Component<import("@sjsf/form/fields/components").ComponentCommonProps & {
+        type: import("@sjsf/form/fields/components").LayoutType;
+        children: import("svelte").Snippet;
+    }, {}, "">;
+    title: import("svelte").Component<import("@sjsf/form/fields/components").ComponentCommonProps & {
+        type: templates.ParentTemplateType;
+        title: string;
+        forId: string;
+        required: boolean;
+    }, {}, "">;
+    description: import("svelte").Component<import("@sjsf/form/fields/components").ComponentCommonProps & {
+        type: templates.ParentTemplateType;
+        description: string;
+    }, {}, "">;
+    help: import("svelte").Component<import("@sjsf/form/fields/components").ComponentCommonProps & {
+        help: string;
+    }, {}, "">;
+    errorsList: import("svelte").Component<import("@sjsf/form/fields/components").ComponentCommonProps & {
+        forId: string;
+    }, {}, "">;
+    fieldTemplate: import("svelte").Component<import("@sjsf/form/fields/templates").TemplateCommonProps<import("@sjsf/form").SchemaValue> & {
+        showTitle: boolean;
+    }, {}, "">;
+    objectTemplate: import("svelte").Component<import("@sjsf/form/fields/templates").TemplateCommonProps<import("@sjsf/form/core").SchemaObjectValue> & {
+        addButton?: import("svelte").Snippet;
+    }, {}, "">;
+    objectPropertyTemplate: import("svelte").Component<import("@sjsf/form/fields/templates").TemplateCommonProps<import("@sjsf/form").SchemaValue> & {
+        property: string;
+        keyInput?: import("svelte").Snippet;
+        removeButton?: import("svelte").Snippet;
+    }, {}, "">;
+    arrayTemplate: import("svelte").Component<import("@sjsf/form/fields/templates").TemplateCommonProps<import("@sjsf/form/core").SchemaArrayValue> & {
+        addButton?: import("svelte").Snippet;
+    }, {}, "">;
+    arrayItemTemplate: import("svelte").Component<import("@sjsf/form/fields/templates").TemplateCommonProps<import("@sjsf/form").SchemaValue> & {
+        index: number;
+        buttons?: import("svelte").Snippet;
+    }, {}, "">;
+    multiFieldTemplate: import("svelte").Component<import("@sjsf/form/fields/templates").TemplateCommonProps<import("@sjsf/form").SchemaValue> & {
+        optionSelector: import("svelte").Snippet;
+    }, {}, "">;
+};
+export declare const extendable: ExtendableComponentDefinitionsWithoutFields;

package/dist/definitions.js

@@ -0,0 +1,9 @@
+import * as templates from '@sjsf/form/templates/exports';
+import * as components from './components/exports';
+import * as widgets from './widgets/exports';
+export const definitions = {
+    ...templates,
+    ...components,
+    ...widgets
+};
+export const extendable = definitions;

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

@@ -0,0 +1 @@
+import './date-picker.svelte';

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

@@ -0,0 +1,4 @@
+import { extendable } from '../definitions';
+import DatePicker from './date-picker.svelte';
+import './date-picker.svelte';
+extendable.datePickerWidget = DatePicker;

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

@@ -0,0 +1,12 @@
+<script lang="ts">
+	import { getFormContext, inputAttributes, type ComponentProps } from '@sjsf/form';
+	import '@sjsf/basic-theme/extra-widgets/date-picker.svelte';
+
+	let { value = $bindable(), config, handlers }: ComponentProps['datePickerWidget'] = $props();
+
+	const ctx = getFormContext();
+
+	const attributes = $derived(inputAttributes(ctx, config, handlers, config.uiOptions?.datePicker));
+</script>
+
+<input type="date" bind:value class="input" {...attributes} />

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

@@ -0,0 +1,4 @@
+import '@sjsf/basic-theme/extra-widgets/date-picker.svelte';
+declare const DatePicker: import("svelte").Component<import("@sjsf/form/fields/widgets").WidgetCommonProps<string>, {}, "value">;
+type DatePicker = ReturnType<typeof DatePicker>;
+export default DatePicker;

package/dist/extra-widgets/multi-select-include.d.ts

@@ -0,0 +1 @@
+import './multi-select.svelte';

package/dist/extra-widgets/multi-select-include.js

@@ -0,0 +1,4 @@
+import { extendable } from '../definitions.js';
+import MultiSelect from './multi-select.svelte';
+import './multi-select.svelte';
+extendable.multiSelectWidget = MultiSelect;

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

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import { getFormContext, selectAttributes, type ComponentProps } from '@sjsf/form';
+	import { indexMapper, multipleOptions } from '@sjsf/form/options.svelte';
+	import '@sjsf/basic-theme/extra-widgets/multi-select.svelte';
+
+	let {
+		value = $bindable(),
+		options,
+		config,
+		handlers
+	}: ComponentProps['multiSelectWidget'] = $props();
+
+	const ctx = getFormContext();
+
+	const attributes = $derived(
+		selectAttributes(ctx, config, handlers, config.uiOptions?.multiSelect)
+	);
+
+	const mapped = $derived(
+		multipleOptions({
+			mapper: () => indexMapper(options),
+			value: () => value,
+			update: (v) => (value = v)
+		})
+	);
+</script>
+
+<select multiple bind:value={mapped.value} class="select" {...attributes}>
+	{#each options as option, index (option.id)}
+		<option value={index} disabled={option.disabled}>
+			{option.label}
+		</option>
+	{/each}
+</select>

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

@@ -0,0 +1,4 @@
+import '@sjsf/basic-theme/extra-widgets/multi-select.svelte';
+declare const MultiSelect: import("svelte").Component<import("@sjsf/form/fields/widgets").WidgetCommonProps<import("@sjsf/form/core").SchemaArrayValue> & import("@sjsf/form/fields/widgets").Options, {}, "value">;
+type MultiSelect = ReturnType<typeof MultiSelect>;
+export default MultiSelect;

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

@@ -0,0 +1 @@
+import "./radio.svelte";

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

@@ -0,0 +1,4 @@
+import { extendable } from "../definitions.js";
+import Radio from "./radio.svelte";
+import "./radio.svelte";
+extendable.radioWidget = Radio;

package/dist/{widgets/radio-widget.svelte → extra-widgets/radio.svelte}

@@ -1,23 +1,29 @@
 <script lang="ts">
-	import { type WidgetProps, indexMapper, singleOption } from '@sjsf/form';
+	import { getFormContext, inputAttributes, type ComponentProps } from '@sjsf/form';
+	import { indexMapper, singleOption } from '@sjsf/form/options.svelte';
+	import '@sjsf/basic-theme/extra-widgets/radio.svelte';
 
-	let { attributes, value = $bindable(), options }: WidgetProps<'radio'> = $props();
+	let { config, handlers, value = $bindable(), options }: ComponentProps['radioWidget'] = $props();
 
 	const mapped = singleOption({
 		mapper: () => indexMapper(options),
 		value: () => value,
 		update: (v) => (value = v)
 	});
+
+	const ctx = getFormContext();
+
+	const attributes = $derived(inputAttributes(ctx, config, handlers, config.uiOptions?.radio));
 </script>
 
 {#each options as option, index (option.id)}
 	<label class="flex items-center space-x-2 cursor-pointer">
 		<input
-			type="radio"
 			class="radio"
 			bind:group={mapped.value}
 			value={index}
 			{...attributes}
+			type="radio"
 			id={option.id}
 			disabled={option.disabled || attributes.disabled}
 		/>

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

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

package/dist/extra-widgets/range-include.d.ts

@@ -0,0 +1 @@
+import './range.svelte';

package/dist/extra-widgets/range-include.js

@@ -0,0 +1,4 @@
+import { extendable } from '../definitions';
+import Range from './range.svelte';
+import './range.svelte';
+extendable.rangeWidget = Range;

package/dist/extra-widgets/range.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+	import { getFormContext, inputAttributes, type ComponentProps } from '@sjsf/form';
+	import '@sjsf/basic-theme/extra-widgets/range.svelte';
+
+	let { value = $bindable(), config, handlers }: ComponentProps['rangeWidget'] = $props();
+
+	const ctx = getFormContext();
+
+	const attributes = $derived(inputAttributes(ctx, config, handlers, config.uiOptions?.range));
+</script>
+
+<input type="range" bind:value class="range grow w-0" {...attributes} />

package/dist/extra-widgets/range.svelte.d.ts

@@ -0,0 +1,4 @@
+import '@sjsf/basic-theme/extra-widgets/range.svelte';
+declare const Range: import("svelte").Component<import("@sjsf/form/fields/widgets").WidgetCommonProps<number>, {}, "value">;
+type Range = ReturnType<typeof Range>;
+export default Range;

package/dist/extra-widgets/textarea-include.d.ts

@@ -0,0 +1 @@
+import "./textarea.svelte";

package/dist/extra-widgets/textarea-include.js

@@ -0,0 +1,4 @@
+import { extendable } from "../definitions.js";
+import Textarea from "./textarea.svelte";
+import "./textarea.svelte";
+extendable.textareaWidget = Textarea;

package/dist/extra-widgets/textarea.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import { getFormContext, textareaAttributes, type ComponentProps } from '@sjsf/form';
+	import '@sjsf/basic-theme/extra-widgets/textarea.svelte';
+
+	let { value = $bindable(), config, handlers }: ComponentProps['textareaWidget'] = $props();
+
+	const ctx = getFormContext();
+
+	const attributes = $derived(
+		textareaAttributes(ctx, config, handlers, config.uiOptions?.textarea)
+	);
+</script>
+
+<textarea bind:value class="textarea" {...attributes}></textarea>

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

@@ -0,0 +1,4 @@
+import '@sjsf/basic-theme/extra-widgets/textarea.svelte';
+declare const Textarea: import("svelte").Component<import("@sjsf/form/fields/widgets").WidgetCommonProps<string>, {}, "value">;
+type Textarea = ReturnType<typeof Textarea>;
+export default Textarea;