@sjsf/flowbite-theme - npm Package Compare versions

Comparing version 2.0.0-next.7 to 2.0.0-next.8

dist/components/button.svelte

@@ -31,3 +31,5 @@ <script lang="ts" module>
 			...config.uiOptions?.flowbiteButton,
-			...config.uiOptions?.flowbiteButtons?.[type]
+			...config.uiOptions?.flowbiteButtons?.[type],
+			...ctx.extraUiOptions?.('flowbiteButton', config),
+			...ctx.extraUiOptions?.('flowbiteButtons', config)?.[type]
 		})
@@ -34,0 +36,0 @@ );

dist/components/description.svelte

@@ -12,7 +12,15 @@ <script lang="ts" module>
 <script lang="ts">
-	import type { ComponentProps } from '@sjsf/form';
+	import { getFormContext, type ComponentProps } from '@sjsf/form';
 
 	const { description, config }: ComponentProps['description'] = $props();
+
+	const ctx = getFormContext();
 </script>
 
-<div class="text-sm opacity-70" {...config.uiOptions?.flowbiteDescription}>{description}</div>
+<div
+	class="text-sm opacity-70"
+	{...config.uiOptions?.flowbiteDescription}
+	{...ctx.extraUiOptions?.('flowbiteDescription', config)}
+>
+	{description}
+</div>

dist/components/errors-list.svelte

@@ -11,5 +11,7 @@ <script lang="ts" module>
 <script lang="ts">
-	import type { ComponentProps } from '@sjsf/form';
+	import { getFormContext, type ComponentProps } from '@sjsf/form';
 
 	const { errors, config }: ComponentProps['errorsList'] = $props();
+
+	const ctx = getFormContext()
 </script>
@@ -21,2 +23,3 @@
 	{...config.uiOptions?.flowbiteErrorsList}
+	{...ctx.extraUiOptions?.('flowbiteErrorsList', config)}
 >
@@ -23,0 +26,0 @@ {#each errors as err}

dist/components/form.svelte

@@ -24,2 +24,3 @@ <script lang="ts" module>
 	{...config.uiOptions?.flowbiteForm}
+	{...ctx.extraUiOptions?.('flowbiteForm', config)}
 	{...attributes}
@@ -26,0 +27,0 @@ >

dist/components/help.svelte

@@ -12,8 +12,12 @@ <script lang="ts" module>
 <script lang="ts">
-	import type { ComponentProps } from '@sjsf/form';
+	import { getFormContext, type ComponentProps } from '@sjsf/form';
 	import Helper from 'flowbite-svelte/Helper.svelte';
 
 	const { config, help }: ComponentProps['help'] = $props();
+
+	const ctx = getFormContext();
 </script>
 
-<Helper {...config.uiOptions?.flowbiteHelp}>{help}</Helper>
+<Helper {...config.uiOptions?.flowbiteHelp} {...ctx.extraUiOptions?.('flowbiteHelp', config)}>
+	{help}
+</Helper>

dist/components/label.svelte

@@ -12,9 +12,15 @@ <script lang="ts" module>
 <script lang="ts">
-	import type { ComponentProps } from '@sjsf/form';
+	import { getFormContext, type ComponentProps } from '@sjsf/form';
 	import Label from 'flowbite-svelte/Label.svelte';
 
 	const { title, config }: ComponentProps['label'] = $props();
+
+	const ctx = getFormContext();
 </script>
 
-<Label for={config.id} {...config.uiOptions?.flowbiteLabel}>
+<Label
+	for={config.id}
+	{...config.uiOptions?.flowbiteLabel}
+	{...ctx.extraUiOptions?.('flowbiteLabel', config)}
+>
 	{title}
@@ -21,0 +27,0 @@ {#if config.required}

dist/components/layout.svelte

@@ -18,3 +18,3 @@ <script lang="ts" module>
 <script lang="ts">
-	import type { ComponentProps } from '@sjsf/form';
+	import { getFormContext, type ComponentProps } from '@sjsf/form';
 	import ButtonGroup from 'flowbite-svelte/ButtonGroup.svelte';
@@ -40,6 +40,11 @@
 	);
+
+	const ctx = getFormContext();
 </script>
 
 {#if isControls}
-	<ButtonGroup {...config.uiOptions?.flowbiteButtonGroup}>
+	<ButtonGroup
+		{...config.uiOptions?.flowbiteButtonGroup}
+		{...ctx.extraUiOptions?.('flowbiteButtonGroup', config)}
+	>
 		{@render children()}
@@ -60,2 +65,4 @@ </ButtonGroup>
 		{...config.uiOptions?.flowbiteLayouts?.[type]}
+		{...ctx.extraUiOptions?.('flowbiteLayout', config)}
+		{...ctx.extraUiOptions?.('flowbiteLayouts', config)?.[type]}
 	>
@@ -62,0 +69,0 @@ {@render children()}

dist/components/submit-button.svelte

@@ -22,3 +22,8 @@ <script lang="ts" module>
 
-	const attributes = $derived(defineDisabled(ctx, config.uiOptions?.flowbiteSubmitButton ?? {}));
+	const attributes = $derived(
+		defineDisabled(ctx, {
+			...config.uiOptions?.flowbiteSubmitButton,
+			...ctx.extraUiOptions?.('flowbiteSubmitButton', config)
+		})
+	);
 </script>
@@ -25,0 +30,0 @@

dist/components/title.svelte

@@ -12,5 +12,7 @@ <script lang="ts" module>
 <script lang="ts">
-	import type { ComponentProps } from '@sjsf/form';
+	import { getFormContext, type ComponentProps } from '@sjsf/form';
 
 	const { title, type, config }: ComponentProps['title'] = $props();
+
+	const ctx = getFormContext();
 </script>
@@ -21,4 +23,5 @@
 	{...config.uiOptions?.flowbiteTitle}
+	{...ctx.extraUiOptions?.('flowbiteTitle', config)}
 >
 	{title}
 </p>

dist/extra-widgets/checkboxes.svelte

@@ -40,3 +40,9 @@ <script lang="ts" module>
 	const attributes = $derived(
-		inputAttributes(ctx, config, handlers, config.uiOptions?.flowbiteCheckboxes)
+		inputAttributes(
+			ctx,
+			config,
+			handlers,
+			config.uiOptions?.flowbiteCheckboxes,
+			ctx.extraUiOptions?.('flowbiteCheckboxes', config)
+		)
 	);
@@ -43,0 +49,0 @@ </script>

dist/extra-widgets/date-picker.svelte

@@ -28,3 +28,4 @@ <script lang="ts" module>
 			required: config.required,
-			...config.uiOptions?.flowbiteDatepicker
+			...config.uiOptions?.flowbiteDatepicker,
+			...ctx.extraUiOptions?.('flowbiteDatepicker', config)
 		})
@@ -31,0 +32,0 @@ );

dist/extra-widgets/file.svelte

 <script lang="ts" module>
 	import type { FileuploadProps } from 'flowbite-svelte/Fileupload.svelte';
-	import '@sjsf/form/fields/extra-widgets/file-widget';
+	import '@sjsf/form/fields/extra-widgets/file';
 
@@ -28,3 +28,9 @@ declare module '@sjsf/form' {
 	const attributes = $derived(
-		inputAttributes(ctx, config, handlers, config.uiOptions?.flowbiteFile)
+		inputAttributes(
+			ctx,
+			config,
+			handlers,
+			config.uiOptions?.flowbiteFile,
+			ctx.extraUiOptions?.('flowbiteFile', config)
+		)
 	);
@@ -31,0 +37,0 @@ </script>

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

 import type { FileuploadProps } from 'flowbite-svelte/Fileupload.svelte';
-import '@sjsf/form/fields/extra-widgets/file-widget';
+import '@sjsf/form/fields/extra-widgets/file';
 declare module '@sjsf/form' {
@@ -4,0 +4,0 @@ interface UiOptions {

dist/extra-widgets/multi-select.svelte

@@ -43,3 +43,9 @@ <script lang="ts" module>
 	const attributes = $derived(
-		selectAttributes(ctx, config, handlers, config.uiOptions?.flowbiteMultiSelect)
+		selectAttributes(
+			ctx,
+			config,
+			handlers,
+			config.uiOptions?.flowbiteMultiSelect,
+			ctx.extraUiOptions?.('flowbiteMultiSelect', config)
+		)
 	);
@@ -46,0 +52,0 @@ </script>

dist/extra-widgets/radio.svelte

@@ -28,3 +28,9 @@ <script lang="ts" module>
 	const attributes = $derived(
-		inputAttributes(ctx, config, handlers, config.uiOptions?.flowbiteRadio)
+		inputAttributes(
+			ctx,
+			config,
+			handlers,
+			config.uiOptions?.flowbiteRadio,
+			ctx.extraUiOptions?.('flowbiteRadio', config)
+		)
 	);
@@ -31,0 +37,0 @@ </script>

dist/extra-widgets/range.svelte

@@ -21,3 +21,9 @@ <script lang="ts" module>
 	const attributes = $derived(
-		inputAttributes(ctx, config, handlers, config.uiOptions?.flowbiteRange)
+		inputAttributes(
+			ctx,
+			config,
+			handlers,
+			config.uiOptions?.flowbiteRange,
+			ctx.extraUiOptions?.('flowbiteRange', config)
+		)
 	);
@@ -24,0 +30,0 @@ </script>

dist/extra-widgets/switch.svelte

@@ -21,3 +21,9 @@ <script lang="ts" module>
 	const attributes = $derived(
-		inputAttributes(ctx, config, handlers, config.uiOptions?.flowbiteSwitch)
+		inputAttributes(
+			ctx,
+			config,
+			handlers,
+			config.uiOptions?.flowbiteSwitch,
+			ctx.extraUiOptions?.('flowbiteSwitch', config)
+		)
 	);
@@ -24,0 +30,0 @@ </script>

dist/extra-widgets/textarea.svelte

@@ -21,3 +21,9 @@ <script lang="ts" module>
 	const attributes = $derived(
-		textareaAttributes(ctx, config, handlers, config.uiOptions?.flowbiteTextarea)
+		textareaAttributes(
+			ctx,
+			config,
+			handlers,
+			config.uiOptions?.flowbiteTextarea,
+			ctx.extraUiOptions?.('flowbiteTextarea', config)
+		)
 	);
@@ -24,0 +30,0 @@ </script>

dist/index.d.ts

@@ -1,1 +0,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" | "title" | "submitButton" | "fieldTemplate" | "objectTemplate" | "objectPropertyTemplate" | "arrayTemplate" | "arrayItemTemplate" | "multiFieldTemplate" | "layout" | "textWidget" | "numberWidget" | "selectWidget" | "checkboxWidget" | "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" | "fieldTemplate" | "objectTemplate" | "objectPropertyTemplate" | "arrayTemplate" | "arrayItemTemplate" | "multiFieldTemplate" | "layout" | "textWidget" | "numberWidget" | "selectWidget" | "checkboxWidget" | "label" | "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>>>;

dist/specs.d.ts

@@ -11,1 +11,2 @@ import { s } from 'testing/demo';
 export declare const specs: s.Specs;
+export declare const extraWidgets: string[];

dist/specs.js

@@ -18,1 +18,2 @@ import { s } from 'testing/demo';
 };
+export const extraWidgets = Object.keys(import.meta.glob('./extra-widgets/*.svelte')).map((widget) => widget.substring(16, widget.length - 7));

dist/widgets/checkbox.svelte

@@ -20,3 +20,9 @@ <script lang="ts" module>
 	const attributes = $derived(
-		inputAttributes(ctx, config, handlers, config.uiOptions?.flowbiteCheckbox)
+		inputAttributes(
+			ctx,
+			config,
+			handlers,
+			config.uiOptions?.flowbiteCheckbox,
+			ctx.extraUiOptions?.('flowbiteCheckbox', config)
+		)
 	);
@@ -23,0 +29,0 @@ </script>

dist/widgets/number.svelte

@@ -20,3 +20,9 @@ <script lang="ts" module>
 	const attributes = $derived(
-		inputAttributes(ctx, config, handlers, config.uiOptions?.flowbiteNumber)
+		inputAttributes(
+			ctx,
+			config,
+			handlers,
+			config.uiOptions?.flowbiteNumber,
+			ctx.extraUiOptions?.('flowbiteNumber', config)
+		)
 	);
@@ -23,0 +29,0 @@ </script>

dist/widgets/select.svelte

@@ -26,7 +26,13 @@ <script lang="ts" module>
 
-	const ctx = getFormContext()
+	const ctx = getFormContext();
 
 	const attributes = $derived(
-		selectAttributes(ctx, config, handlers, config.uiOptions?.flowbiteSelect)
-	)
+		selectAttributes(
+			ctx,
+			config,
+			handlers,
+			config.uiOptions?.flowbiteSelect,
+			ctx.extraUiOptions?.('flowbiteSelect', config)
+		)
+	);
 </script>
@@ -33,0 +39,0 @@

dist/widgets/text.svelte

@@ -20,3 +20,9 @@ <script lang="ts" module>
 	const attributes = $derived(
-		inputAttributes(ctx, config, handlers, config.uiOptions?.flowbiteText)
+		inputAttributes(
+			ctx,
+			config,
+			handlers,
+			config.uiOptions?.flowbiteText,
+			ctx.extraUiOptions?.('flowbiteText', config)
+		)
 	);
@@ -23,0 +29,0 @@ </script>

package.json

 {
   "name": "@sjsf/flowbite-theme",
-  "version": "2.0.0-next.7",
+  "version": "2.0.0-next.8",
   "description": "The flowbite based theme for svelte-jsonschema-form",
@@ -55,3 +55,3 @@ "license": "MIT",
   "peerDependencies": {
-    "@sjsf/form": "^2.0.0-next.7",
+    "@sjsf/form": "^2.0.0-next.8",
     "flowbite": "^2.5.0",
@@ -62,5 +62,5 @@ "flowbite-svelte": "~0.47.0",
   "devDependencies": {
-    "@playwright/test": "^1.51.0",
+    "@playwright/test": "^1.51.1",
     "@sveltejs/adapter-static": "^3.0.8",
-    "@sveltejs/kit": "^2.20.2",
+    "@sveltejs/kit": "^2.20.4",
     "@sveltejs/package": "^2.3.10",
@@ -71,5 +71,5 @@ "@sveltejs/vite-plugin-svelte": "^5.0.3",
     "autoprefixer": "^10.4.21",
-    "eslint": "^9.23.0",
+    "eslint": "^9.24.0",
     "eslint-config-prettier": "^10.1.1",
-    "eslint-plugin-svelte": "^3.3.3",
+    "eslint-plugin-svelte": "^3.5.1",
     "flowbite": "^2.5.2",
@@ -81,11 +81,11 @@ "flowbite-svelte": "0.47.4",
     "prettier-plugin-svelte": "^3.3.3",
-    "svelte": "^5.25.6",
+    "svelte": "^5.25.9",
     "svelte-check": "^4.1.5",
     "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/form": "2.0.0-next.7",
-    "testing": "0.1.0-next.7"
+    "typescript-eslint": "^8.29.1",
+    "vite": "6.2.5",
+    "vitest": "3.1.1",
+    "@sjsf/form": "2.0.0-next.8",
+    "@sjsf/ajv8-validator": "2.0.0-next.8",
+    "testing": "0.1.0-next.8"
   },
@@ -92,0 +92,0 @@ "svelte": "./dist/index.js",

No alert changes

Improved metrics

Total package byte prevSize

177833

1.12%

Lines of code

936

0.21%

No dependency changes