@sjsf/basic-theme - npm Package Compare versions

Comparing version 3.3.2 to 3.4.0

dist/extra-widgets/checkboxes.svelte

@@ -25,2 +25,7 @@ <script lang="ts" module>
     options,
+    mapped = multipleOptions({
+      mapper: () => idMapper(options),
+      value: () => value,
+      update: (v) => (value = v),
+    }),
   }: ComponentProps["checkboxesWidget"] = $props();
@@ -33,10 +38,4 @@
       type: "checkbox",
-    })
+    }),
   );
-
-  const mapped = multipleOptions({
-    mapper: () => idMapper(options),
-    value: () => value,
-    update: (v) => (value = v),
-  });
 </script>
@@ -48,3 +47,3 @@
       bind:group={mapped.current}
-      value={option.id}
+      value={option.mappedValue ?? option.id}
       {...attributes}
@@ -51,0 +50,0 @@ id={option.id}

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

@@ -8,4 +8,4 @@ import type { HTMLInputAttributes } from "svelte/elements";
 }
-declare const Checkboxes: import("svelte").Component<import("@sjsf/form/fields/widgets").WidgetCommonProps<import("@sjsf/form/core").SchemaArrayValue> & import("@sjsf/form/fields/widgets").Options, {}, "value">;
+declare const Checkboxes: import("svelte").Component<import("@sjsf/form/fields/widgets").WidgetCommonProps<import("@sjsf/form/core").SchemaArrayValue> & import("@sjsf/form/fields/widgets").MultiSelectOptions, {}, "value">;
 type Checkboxes = ReturnType<typeof Checkboxes>;
 export default Checkboxes;

dist/extra-widgets/multi-select.svelte

@@ -25,2 +25,7 @@ <script lang="ts" module>
     handlers,
+    mapped = multipleOptions({
+      mapper: () => idMapper(options),
+      value: () => value,
+      update: (v) => (value = v),
+    }),
   }: ComponentProps["multiSelectWidget"] = $props();
@@ -32,11 +37,5 @@
     selectAttributes(ctx, config, "multiSelect", handlers, {
-      class: "sjsf-multi-select"
-    })
+      class: "sjsf-multi-select",
+    }),
   );
-
-  const mapped = multipleOptions({
-      mapper: () => idMapper(options),
-      value: () => value,
-      update: (v) => (value = v),
-    })
 </script>
@@ -46,3 +45,3 @@
   {#each options as option (option.id)}
-    <option value={option.id} disabled={option.disabled}>
+    <option value={option.mappedValue ?? option.id} disabled={option.disabled}>
       {option.label}
@@ -49,0 +48,0 @@ </option>

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

@@ -8,4 +8,4 @@ import type { HTMLSelectAttributes } from "svelte/elements";
 }
-declare const MultiSelect: import("svelte").Component<import("@sjsf/form/fields/widgets").WidgetCommonProps<import("@sjsf/form/core").SchemaArrayValue> & import("@sjsf/form/fields/widgets").Options, {}, "value">;
+declare const MultiSelect: import("svelte").Component<import("@sjsf/form/fields/widgets").WidgetCommonProps<import("@sjsf/form/core").SchemaArrayValue> & import("@sjsf/form/fields/widgets").MultiSelectOptions, {}, "value">;
 type MultiSelect = ReturnType<typeof MultiSelect>;
 export default MultiSelect;

dist/extra-widgets/radio.svelte

@@ -25,2 +25,7 @@ <script lang="ts" module>
     options,
+    mapped = singleOption({
+      mapper: () => idMapper(options),
+      value: () => value,
+      update: (v) => (value = v),
+    }),
   }: ComponentProps["radioWidget"] = $props();
@@ -33,17 +38,11 @@
       type: "radio",
-    })
+    }),
   );
-
-  const mapped = singleOption({
-    mapper: () => idMapper(options),
-    value: () => value,
-    update: (v) => (value = v),
-  });
 </script>
 
 {#each options as option (option.id)}
-  <label class="sjsf-radio" >
+  <label class="sjsf-radio">
     <input
       bind:group={mapped.current}
-      value={option.id}
+      value={option.mappedValue ?? option.id}
       {...attributes}
@@ -50,0 +49,0 @@ id={option.id}

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

@@ -8,4 +8,4 @@ import type { HTMLInputAttributes } from "svelte/elements";
 }
-declare const Radio: import("svelte").Component<import("@sjsf/form/fields/widgets").WidgetCommonProps<import("@sjsf/form").SchemaValue> & import("@sjsf/form/fields/widgets").Options, {}, "value">;
+declare const Radio: import("svelte").Component<import("@sjsf/form/fields/widgets").WidgetCommonProps<import("@sjsf/form").SchemaValue> & import("@sjsf/form/fields/widgets").SingleSelectOptions, {}, "value">;
 type Radio = ReturnType<typeof Radio>;
 export default Radio;

dist/widgets/select.svelte

@@ -17,3 +17,7 @@ <script lang="ts" module>
   } from "@sjsf/form";
-  import { idMapper, singleOption, UNDEFINED_ID } from "@sjsf/form/options.svelte";
+  import {
+    idMapper,
+    singleOption,
+    EMPTY_VALUE,
+  } from "@sjsf/form/options.svelte";
 
@@ -25,2 +29,8 @@ let {
     config,
+    hasInitialValue = config.schema.default !== undefined,
+    mapped = singleOption({
+      mapper: () => idMapper(options),
+      value: () => value,
+      update: (v) => (value = v),
+    }),
   }: ComponentProps["selectWidget"] = $props();
@@ -32,19 +42,13 @@
     selectAttributes(ctx, config, "select", handlers, {
-      class: "sjsf-select"
-    })
+      class: "sjsf-select",
+    }),
   );
-
-  const mapped = singleOption({
-    mapper: () => idMapper(options),
-    value: () => value,
-    update: (v) => (value = v),
-  })
 </script>
 
 <select bind:value={mapped.current} {...attributes}>
-  {#if config.schema.default === undefined}
-    <option value={UNDEFINED_ID}>{placeholder}</option>
+  {#if !hasInitialValue}
+    <option value={EMPTY_VALUE}>{placeholder}</option>
   {/if}
   {#each options as option (option.id)}
-    <option value={option.id} disabled={option.disabled}>
+    <option value={option.mappedValue ?? option.id} disabled={option.disabled}>
       {option.label}
@@ -51,0 +55,0 @@ </option>

dist/widgets/select.svelte.d.ts

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

package.json

 {
   "name": "@sjsf/basic-theme",
-  "version": "3.3.2",
+  "version": "3.4.0",
   "description": "Basic theme for svelte-jsonschema-form",
@@ -29,3 +29,3 @@ "license": "MIT",
   "peerDependencies": {
-    "@sjsf/form": "^3.3.2",
+    "@sjsf/form": "^3.4.0",
     "svelte": "^5.34.8"
@@ -35,6 +35,6 @@ },
     "@picocss/pico": "^2.1.1",
-    "svelte": "^5.55.0",
-    "vite": "^8.0.2",
-    "@sjsf/form": "3.3.2",
-    "theme-testing": "1.0.24"
+    "svelte": "^5.55.1",
+    "vite": "^8.0.3",
+    "@sjsf/form": "3.4.0",
+    "theme-testing": "1.0.25"
   },
@@ -41,0 +41,0 @@ "types": "./dist/index.d.ts",

No alert changes

Improved metrics

Total package byte prevSize

47205

0.42%

No dependency changes