@sveltia/ui 0.75.3 → 0.75.4

package/dist/components/button/button.svelte

@@ -6,6 +6,7 @@
 -->
 <script>
   import { activateKeyShortcuts } from '@sveltia/utils/events';
+  import { getValueType } from '../../services/value.js';
   import TruncatedText from '../typography/truncated-text.svelte';
   import Popup from '../util/popup.svelte';
 
@@ -25,7 +26,7 @@
     name = undefined,
     value = undefined,
     // svelte-ignore state_referenced_locally
-    valueType = typeof value,
+    valueType = getValueType(value),
     hidden = false,
     disabled = false,
     readonly = false,

package/dist/components/listbox/option.svelte

@@ -7,6 +7,7 @@
 <script>
   import { onDestroy } from 'svelte';
   import { getOptionRegistry } from '../../services/select.svelte.js';
+  import { getValueType } from '../../services/value.js';
   import Button from '../button/button.svelte';
   import Icon from '../icon/icon.svelte';
 
@@ -92,7 +93,7 @@
        * @returns {string} Type.
        */
       get type() {
-        return restProps.valueType ?? typeof value;
+        return restProps.valueType ?? getValueType(value);
       },
       /**
        * Get whether the option is selected.

package/dist/components/radio/radio.svelte

@@ -22,8 +22,8 @@
    * attribute.
    * @property {string} [name] The `data-name` attribute on the `<button>` element.
    * @property {any} [value] The `data-value` attribute on the `<button>` element.
-   * @property {string} [valueType] Data type of the `value`. Typically `string`, `number` or
-   * `boolean`. Default: auto detect.
+   * @property {string} [valueType] Data type of the `value`. Typically `string`, `number`,
+   * `boolean` or `null`. Default: auto detect.
    * @property {string} [label] Text label displayed next to the radio button.
    * @property {string} [ariaLabel] `aria-label` attribute on the `<button>` element, for a radio
    * button without a visible label.

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

@@ -37,8 +37,8 @@ declare const Radio: import("svelte").Component<{
      */
     value?: any;
     /**
-     * Data type of the `value`. Typically `string`, `number` or
-     * `boolean`. Default: auto detect.
+     * Data type of the `value`. Typically `string`, `number`,
+     * `boolean` or `null`. Default: auto detect.
      */
     valueType?: string | undefined;
     /**
@@ -101,8 +101,8 @@ type Props = {
      */
     value?: any;
     /**
-     * Data type of the `value`. Typically `string`, `number` or
-     * `boolean`. Default: auto detect.
+     * Data type of the `value`. Typically `string`, `number`,
+     * `boolean` or `null`. Default: auto detect.
      */
     valueType?: string | undefined;
     /**

package/dist/components/select/select-tags.svelte

@@ -250,9 +250,10 @@
       {required}
       {invalid}
       onChange={() => {
-        // The select only reports a change once an option has been picked
+        // The select only reports a change once an option has been picked. Check for `undefined`
+        // rather than a falsy value, as `null`, `false`, `0` and an empty string are valid values
         /* v8 ignore else */
-        if (selectedValue) {
+        if (selectedValue !== undefined) {
           values = [...values, selectedValue];
           onAddValue?.(new CustomEvent('AddValue', { detail: { value: selectedValue } }));
           // Reset the combobox

package/dist/components/slider/slider.svelte

@@ -167,20 +167,18 @@
     event.preventDefault();
     event.stopPropagation();
 
-    if (index > -1) {
-      if (
-        multiThumb &&
-        wouldCrossThumbs({ valueIndex, targetPosition: positionList[index], sliderPositions })
-      ) {
-        return;
-      }
+    if (
+      multiThumb &&
+      wouldCrossThumbs({ valueIndex, targetPosition: positionList[index], sliderPositions })
+    ) {
+      return;
+    }
 
-      if (multiThumb) {
-        /** @type {[number, number]} */ (values)[valueIndex] = valueList[index];
-        values = [.../** @type {[number, number]} */ (values)];
-      } else {
-        value = valueList[index];
-      }
+    if (multiThumb) {
+      /** @type {[number, number]} */ (values)[valueIndex] = valueList[index];
+      values = [.../** @type {[number, number]} */ (values)];
+    } else {
+      value = valueList[index];
     }
   };
 

package/dist/components/text-editor/shiki/version.d.ts

@@ -1,4 +1,4 @@
 /**
  * Version of this package, used to resolve the prebuilt Shiki engine chunk from a CDN.
  */
-export const UI_VERSION: "0.75.3";
+export const UI_VERSION: "0.75.4";

package/dist/components/text-editor/shiki/version.js

@@ -3,4 +3,4 @@
 /**
  * Version of this package, used to resolve the prebuilt Shiki engine chunk from a CDN.
  */
-export const UI_VERSION = '0.75.3';
+export const UI_VERSION = '0.75.4';

package/dist/components/tree/tree-item.svelte

@@ -8,6 +8,7 @@
 <script>
   import { isRTL } from '@sveltia/i18n';
   import { getContext, setContext } from 'svelte';
+  import { getValueType } from '../../services/value.js';
   import Icon from '../icon/icon.svelte';
 
   /**
@@ -29,8 +30,8 @@
    * attribute. Ignored if the item has no `items` slot content.
    * @property {string} [label] Text label displayed on the item.
    * @property {any} [value] The `data-value` attribute on the item. Default: the `label`.
-   * @property {string} [valueType] Data type of the `value`. Typically `string`, `number` or
-   * `boolean`. Default: auto detect.
+   * @property {string} [valueType] Data type of the `value`. Typically `string`, `number`,
+   * `boolean` or `null`. Default: auto detect.
    * @property {Snippet} [children] Primary slot content, used instead of the `label`.
    * @property {Snippet} [items] Child items slot content, which makes the item a parent node.
    * @property {Snippet} [startIcon] Start icon slot content.
@@ -57,7 +58,7 @@
     // svelte-ignore state_referenced_locally
     value = label,
     // svelte-ignore state_referenced_locally
-    valueType = typeof value,
+    valueType = getValueType(value),
     children,
     items,
     startIcon,

package/dist/components/tree/tree-item.svelte.d.ts

@@ -43,8 +43,8 @@ declare const TreeItem: import("svelte").Component<import("../../typedefs").Keyb
      */
     value?: any;
     /**
-     * Data type of the `value`. Typically `string`, `number` or
-     * `boolean`. Default: auto detect.
+     * Data type of the `value`. Typically `string`, `number`,
+     * `boolean` or `null`. Default: auto detect.
      */
     valueType?: string | undefined;
     /**
@@ -116,8 +116,8 @@ type Props = {
      */
     value?: any;
     /**
-     * Data type of the `value`. Typically `string`, `number` or
-     * `boolean`. Default: auto detect.
+     * Data type of the `value`. Typically `string`, `number`,
+     * `boolean` or `null`. Default: auto detect.
      */
     valueType?: string | undefined;
     /**

package/dist/services/select.svelte.js

@@ -1,4 +1,5 @@
 import { getContext, setContext } from 'svelte';
+import { castValue } from './value.js';
 
 /**
  * @import { OptionEntry, SelectedItemDetail } from '../typedefs';
@@ -115,20 +116,7 @@ export const getOptionRegistry = () => getContext(CONTEXT_KEY);
  */
 export const getSelectedItemDetail = (target) => {
   const { type = 'string', name, label } = target.dataset;
-  /** @type {any} */
-  let { value } = target.dataset;
-
-  if (type === 'number') {
-    value = Number(value);
-
-    if (Number.isNaN(value)) {
-      value = null;
-    }
-  } else if (type === 'boolean') {
-    value = value === 'true';
-  } else if (type === 'string') {
-    value = value ? String(value) : '';
-  }
+  const value = castValue(target.dataset.value, type);
 
   return { target, type, name, label, value };
 };

package/dist/services/value.d.ts

@@ -0,0 +1,2 @@
+export function getValueType(value: any): string;
+export function castValue(value: string | undefined, type: string): any;

package/dist/services/value.js

@@ -0,0 +1,42 @@
+/**
+ * Conversion of the values held by buttons and other items: a value is stored in the `data-value`
+ * attribute along with its type in the `data-type` attribute, so it can be cast back to the
+ * original type when the item is selected.
+ */
+
+/**
+ * Get the data type of a value, to be stored in the `data-type` attribute. `null` gets its own type
+ * because `typeof null` is `object`, and the `data-value` attribute is omitted for `null`.
+ * @param {any} value Value.
+ * @returns {string} Data type, e.g. `string`, `number`, `boolean` or `null`.
+ */
+export const getValueType = (value) => (value === null ? 'null' : typeof value);
+
+/**
+ * Cast a value read from the `data-value` attribute back to its original type.
+ * @param {string | undefined} value Attribute value, or `undefined` if the attribute is omitted.
+ * @param {string} type Data type stored in the `data-type` attribute.
+ * @returns {any} Cast value. Any other type than `number`, `boolean`, `null` and `string` is
+ * returned as is.
+ */
+export const castValue = (value, type) => {
+  if (type === 'number') {
+    const number = Number(value);
+
+    return Number.isNaN(number) ? null : number;
+  }
+
+  if (type === 'boolean') {
+    return value === 'true';
+  }
+
+  if (type === 'null') {
+    return null;
+  }
+
+  if (type === 'string') {
+    return value ? String(value) : '';
+  }
+
+  return value;
+};

package/dist/typedefs.d.ts

@@ -24,8 +24,8 @@ export type ButtonProps = {
      */
     value?: any;
     /**
-     * Data type of the `value`. Typically `string`, `number` or
-     * `boolean`. Default: auto detect.
+     * Data type of the `value`. Typically `string`, `number`, `boolean`
+     * or `null`. Default: auto detect.
      */
     valueType?: string | undefined;
     /**

package/dist/typedefs.js

@@ -12,8 +12,8 @@
  * @property {string} [role] The `role` attribute on the `<button>` element.
  * @property {string} [name] The `data-name` attribute on the `<button>` element.
  * @property {any} [value] The `data-value` attribute on the `<button>` element.
- * @property {string} [valueType] Data type of the `value`. Typically `string`, `number` or
- * `boolean`. Default: auto detect.
+ * @property {string} [valueType] Data type of the `value`. Typically `string`, `number`, `boolean`
+ * or `null`. Default: auto detect.
  * @property {boolean} [hidden] Whether to hide the widget. An alias of the `aria-hidden` attribute.
  * @property {boolean} [disabled] Whether to disable the widget. An alias of the `aria-disabled`
  * attribute.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltia/ui",
-  "version": "0.75.3",
+  "version": "0.75.4",
   "description": "A collection of Svelte components and utilities for building user interfaces.",
   "repository": {
     "type": "git",
@@ -64,16 +64,16 @@
     "eslint-config-airbnb-extended": "^3.2.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-import": "^2.32.0",
-    "eslint-plugin-jsdoc": "^64.5.2",
-    "eslint-plugin-package-json": "^1.8.1",
+    "eslint-plugin-jsdoc": "^64.5.4",
+    "eslint-plugin-package-json": "^1.9.0",
     "eslint-plugin-svelte": "^3.23.0",
     "globals": "^17.12.0",
     "happy-dom": "^20.14.5",
-    "oxlint": "^1.83.0",
+    "oxlint": "^1.85.0",
     "playwright": "^1.63.0",
     "postcss": "^8.5.28",
     "postcss-html": "^2.0.0",
-    "prettier": "^3.9.7",
+    "prettier": "^3.9.8",
     "prettier-plugin-svelte": "^4.1.1",
     "rolldown": "^1.2.9",
     "sass": "^1.104.1",
@@ -81,7 +81,7 @@
     "stylelint": "^17.15.0",
     "stylelint-config-recommended-scss": "^17.0.1",
     "stylelint-scss": "^7.3.0",
-    "svelte": "^5.57.0",
+    "svelte": "^5.57.1",
     "svelte-check": "^4.7.6",
     "svelte-preprocess": "^6.0.5",
     "tslib": "^2.8.1",