@sjsf/basic-theme - npm Package Compare versions

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

dist/components/button.svelte

@@ -30,4 +30,9 @@ <script lang="ts" module>
 
-  const { children, type, onclick, config, disabled }: ComponentProps["button"] =
-    $props();
+  const {
+    children,
+    type,
+    onclick,
+    config,
+    disabled,
+  }: ComponentProps["button"] = $props();
 
@@ -51,2 +56,4 @@ const ctx = getFormContext();
       ...config.uiOptions?.buttons?.[type],
+      ...ctx.extraUiOptions?.("button", config),
+      ...ctx.extraUiOptions?.('buttons', config)?.[type]
     })
@@ -53,0 +60,0 @@ );

dist/components/description.svelte

@@ -15,9 +15,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 style="font-weight: 300;" {...config.uiOptions?.descriptionAttributes}>
+<div
+  style="font-weight: 300;"
+  {...config.uiOptions?.descriptionAttributes}
+  {...ctx.extraUiOptions?.("descriptionAttributes", config)}
+>
   {description}
 </div>

dist/components/errors-list.svelte

@@ -15,5 +15,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>
@@ -25,2 +27,3 @@
   {...config.uiOptions?.errorsList}
+  {...ctx.extraUiOptions?.("errorsList", config)}
 >
@@ -27,0 +30,0 @@ {#each errors as err}

dist/components/form.svelte

@@ -29,2 +29,3 @@ <script lang="ts" module>
   {...config.uiOptions?.form}
+  {...ctx.extraUiOptions?.('form', config)}
   {...attributes}
@@ -31,0 +32,0 @@ >

dist/components/help.svelte

@@ -15,9 +15,15 @@ <script lang="ts" module>
 <script lang="ts">
-  import type { ComponentProps } from "@sjsf/form";
+  import { getFormContext, type ComponentProps } from "@sjsf/form";
 
   const { help, config }: ComponentProps["help"] = $props();
+
+  const ctx = getFormContext();
 </script>
 
-<div style="font-weight: 300;" {...config.uiOptions?.helpAttributes}>
+<div
+  style="font-weight: 300;"
+  {...config.uiOptions?.helpAttributes}
+  {...ctx.extraUiOptions?.("helpAttributes", config)}
+>
   {help}
 </div>

dist/components/label.svelte

@@ -15,5 +15,7 @@ <script lang="ts" module>
 <script lang="ts">
-  import type { ComponentProps } from "@sjsf/form";
+  import { getFormContext, type ComponentProps } from "@sjsf/form";
 
   const { title, config }: ComponentProps["label"] = $props();
+
+  const ctx = getFormContext()
 </script>
@@ -25,2 +27,3 @@
   {...config.uiOptions?.labelAttributes}
+  {...ctx.extraUiOptions?.('labelAttributes', config)}
 >
@@ -27,0 +30,0 @@ {title}

dist/components/layout.svelte

@@ -24,3 +24,3 @@ <script lang="ts" module>
 <script lang="ts">
-  import type { ComponentProps } from "@sjsf/form";
+  import { getFormContext, type ComponentProps } from "@sjsf/form";
 
@@ -64,5 +64,9 @@ const { type, children, config }: ComponentProps["layout"] = $props();
 
+  const ctx = getFormContext();
+
   const attributes = $derived({
     ...config.uiOptions?.layout,
     ...config.uiOptions?.layouts?.[type],
+    ...ctx.extraUiOptions?.("layout", config),
+    ...ctx.extraUiOptions?.("layouts", config)?.[type],
   });
@@ -69,0 +73,0 @@ </script>

dist/components/submit-button.svelte

@@ -23,3 +23,6 @@ <script lang="ts" module>
   const attributes = $derived(
-    defineDisabled(ctx, config.uiOptions?.submitButton ?? {})
+    defineDisabled(ctx, {
+      ...config.uiOptions?.submitButton,
+      ...ctx.extraUiOptions?.("submitButton", config),
+    })
   );
@@ -26,0 +29,0 @@ </script>

dist/components/title.svelte

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

dist/extra-widgets/checkboxes.svelte

 <script lang="ts" module>
   import type { HTMLInputAttributes } from "svelte/elements";
-  import '@sjsf/form/fields/extra-widgets/checkboxes';
+  import "@sjsf/form/fields/extra-widgets/checkboxes";
 
@@ -30,3 +30,9 @@ declare module "@sjsf/form" {
   const attributes = $derived(
-    inputAttributes(ctx, config, handlers, config.uiOptions?.checkboxes)
+    inputAttributes(
+      ctx,
+      config,
+      handlers,
+      config.uiOptions?.checkboxes,
+      ctx.extraUiOptions?.("checkboxes", config)
+    )
   );
@@ -33,0 +39,0 @@

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

 import type { HTMLInputAttributes } from "svelte/elements";
-import '@sjsf/form/fields/extra-widgets/checkboxes';
+import "@sjsf/form/fields/extra-widgets/checkboxes";
 declare module "@sjsf/form" {
@@ -4,0 +4,0 @@ interface UiOptions {

dist/extra-widgets/date-picker.svelte

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

dist/extra-widgets/file.svelte

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

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

 import type { HTMLInputAttributes } from "svelte/elements";
-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

@@ -30,3 +30,9 @@ <script lang="ts" module>
   const attributes = $derived(
-    selectAttributes(ctx, config, handlers, config.uiOptions?.multiSelect)
+    selectAttributes(
+      ctx,
+      config,
+      handlers,
+      config.uiOptions?.multiSelect,
+      ctx.extraUiOptions?.("multiSelect", config)
+    )
   );
@@ -33,0 +39,0 @@

dist/extra-widgets/radio.svelte

@@ -30,3 +30,9 @@ <script lang="ts" module>
   const attributes = $derived(
-    inputAttributes(ctx, config, handlers, config.uiOptions?.radio)
+    inputAttributes(
+      ctx,
+      config,
+      handlers,
+      config.uiOptions?.radio,
+      ctx.extraUiOptions?.("radio", config)
+    )
   );
@@ -33,0 +39,0 @@

dist/extra-widgets/range.svelte

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

dist/extra-widgets/textarea.svelte

@@ -28,3 +28,9 @@ <script lang="ts" module>
   const attributes = $derived(
-    textareaAttributes(ctx, config, handlers, config.uiOptions?.textarea)
+    textareaAttributes(
+      ctx,
+      config,
+      handlers,
+      config.uiOptions?.textarea,
+      ctx.extraUiOptions?.("textarea", config)
+    )
   );
@@ -31,0 +37,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" | "submitButton" | "fieldTemplate" | "objectTemplate" | "objectPropertyTemplate" | "arrayTemplate" | "arrayItemTemplate" | "multiFieldTemplate" | "layout" | "textWidget" | "numberWidget" | "selectWidget" | "checkboxWidget" | "title" | "label" | "description" | "help" | "errorsList" | keyof import("./definitions.js").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.js").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.js").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.js").ExtraWidgets>>>;

dist/specs.d.ts

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

dist/specs.js

@@ -28,1 +28,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

@@ -27,3 +27,9 @@ <script lang="ts" module>
   const attributes = $derived(
-    inputAttributes(ctx, config, handlers, config.uiOptions?.checkbox)
+    inputAttributes(
+      ctx,
+      config,
+      handlers,
+      config.uiOptions?.checkbox,
+      ctx.extraUiOptions?.("checkbox", config)
+    )
   );
@@ -33,4 +39,8 @@ </script>
 <label>
-  <input type="checkbox" bind:checked={() => value ?? false, (v) => (value = v)} {...attributes} />
+  <input
+    type="checkbox"
+    bind:checked={() => value ?? false, (v) => (value = v)}
+    {...attributes}
+  />
   {config.title}
 </label>

dist/widgets/number.svelte

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

dist/widgets/select.svelte

@@ -29,3 +29,9 @@ <script lang="ts" module>
   const attributes = $derived(
-    selectAttributes(ctx, config, handlers, config.uiOptions?.select)
+    selectAttributes(
+      ctx,
+      config,
+      handlers,
+      config.uiOptions?.select,
+      ctx.extraUiOptions?.("select", config)
+    )
   );
@@ -32,0 +38,0 @@

dist/widgets/text.svelte

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

package.json

 {
   "name": "@sjsf/basic-theme",
-  "version": "2.0.0-next.7",
+  "version": "2.0.0-next.8",
   "description": "Basic theme for svelte-jsonschema-form",
@@ -29,3 +29,3 @@ "license": "MIT",
     "svelte": "^5.25.0",
-    "@sjsf/form": "^2.0.0-next.7"
+    "@sjsf/form": "^2.0.0-next.8"
   },
@@ -36,8 +36,8 @@ "devDependencies": {
     "@tsconfig/svelte": "^5.0.4",
-    "svelte": "^5.25.6",
+    "svelte": "^5.25.9",
     "svelte-check": "^4.1.5",
-    "vite": "6.2.2",
-    "vitest": "3.0.9",
-    "@sjsf/form": "2.0.0-next.7",
-    "testing": "0.1.0-next.7"
+    "vite": "6.2.5",
+    "vitest": "3.1.1",
+    "@sjsf/form": "2.0.0-next.8",
+    "testing": "0.1.0-next.8"
   },
@@ -44,0 +44,0 @@ "types": "./dist/index.d.ts",

No alert changes

Improved metrics

Total package byte prevSize

40738

5.03%

Lines of code

440

0.46%

No dependency changes