@sveltia/ui 0.32.2 → 0.33.0

package/dist/components/resizable-pane/resizable-pane.svelte

@@ -0,0 +1,76 @@
+<!--
+  @component
+  A resizable pane within a `<ResizablePaneGroup>`. Must be a direct child of
+  `<ResizablePaneGroup>`.
+-->
+<script>
+  import { getContext, untrack } from 'svelte';
+
+  /**
+   * @import { Snippet } from 'svelte';
+   * @import { PaneGroupContext } from '../../typedefs.js';
+   */
+
+  /**
+   * @typedef {object} Props
+   * @property {number} [defaultSize] Default size as a percentage (0–100). Panes without
+   * `defaultSize` share the remaining space equally.
+   * @property {number} [minSize] Minimum size as a percentage. Defaults to `0`.
+   * @property {number} [maxSize] Maximum size as a percentage. Defaults to `100`.
+   * @property {string} [class] The `class` attribute on the wrapper element.
+   * @property {Snippet} [children] Primary slot content.
+   * @property {(detail: { size: number }) => void} [onResize] Called whenever this pane’s size (in
+   * percent) changes.
+   */
+
+  /**
+   * @type {Props & Record<string, any>}
+   */
+  let {
+    /* eslint-disable prefer-const */
+    defaultSize = undefined,
+    minSize = 0,
+    maxSize = 100,
+    class: className,
+    children,
+    onResize,
+    ...restProps
+    /* eslint-enable prefer-const */
+  } = $props();
+
+  const id = $props.id();
+
+  /** @type {PaneGroupContext} */
+  const ctx = getContext('paneGroup');
+
+  if (!ctx) {
+    throw new Error('<ResizablePane> must be used inside a <ResizablePaneGroup>');
+  }
+
+  // svelte-ignore state_referenced_locally
+  const { index: paneIndex } = ctx.registerPane({ id, defaultSize, minSize, maxSize });
+
+  const direction = $derived(ctx.direction);
+  const size = $derived(ctx.sizes[paneIndex]);
+  const sizeStyle = $derived(size !== undefined ? size : (defaultSize ?? 0));
+
+  $effect(() => {
+    if (size !== undefined) {
+      untrack(() => onResize?.({ size: Number(size.toFixed(1)) }));
+    }
+  });
+</script>
+
+<div
+  {...restProps}
+  {id}
+  role="none"
+  class="sui resizable-pane {className ?? ''}"
+  style:flex-basis="{sizeStyle}%"
+  style:flex-grow="0"
+  style:flex-shrink="0"
+  style:overflow-x={direction === 'horizontal' ? 'auto' : undefined}
+  style:overflow-y={direction === 'vertical' ? 'auto' : undefined}
+>
+  {@render children?.()}
+</div>

package/dist/components/resizable-pane/resizable-pane.svelte.d.ts

@@ -0,0 +1,70 @@
+export default ResizablePane;
+type ResizablePane = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props & Record<string, any>>): void;
+};
+/**
+ * A resizable pane within a `<ResizablePaneGroup>`. Must be a direct child of
+ * `<ResizablePaneGroup>`.
+ */
+declare const ResizablePane: import("svelte").Component<{
+    /**
+     * Default size as a percentage (0–100). Panes without
+     * `defaultSize` share the remaining space equally.
+     */
+    defaultSize?: number | undefined;
+    /**
+     * Minimum size as a percentage. Defaults to `0`.
+     */
+    minSize?: number | undefined;
+    /**
+     * Maximum size as a percentage. Defaults to `100`.
+     */
+    maxSize?: number | undefined;
+    /**
+     * The `class` attribute on the wrapper element.
+     */
+    class?: string | undefined;
+    /**
+     * Primary slot content.
+     */
+    children?: Snippet<[]> | undefined;
+    /**
+     * Called whenever this pane’s size (in
+     * percent) changes.
+     */
+    onResize?: ((detail: {
+        size: number;
+    }) => void) | undefined;
+} & Record<string, any>, {}, "">;
+type Props = {
+    /**
+     * Default size as a percentage (0–100). Panes without
+     * `defaultSize` share the remaining space equally.
+     */
+    defaultSize?: number | undefined;
+    /**
+     * Minimum size as a percentage. Defaults to `0`.
+     */
+    minSize?: number | undefined;
+    /**
+     * Maximum size as a percentage. Defaults to `100`.
+     */
+    maxSize?: number | undefined;
+    /**
+     * The `class` attribute on the wrapper element.
+     */
+    class?: string | undefined;
+    /**
+     * Primary slot content.
+     */
+    children?: Snippet<[]> | undefined;
+    /**
+     * Called whenever this pane’s size (in
+     * percent) changes.
+     */
+    onResize?: ((detail: {
+        size: number;
+    }) => void) | undefined;
+};
+import type { Snippet } from 'svelte';

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

@@ -1,5 +1,8 @@
 <script>
+  import { tick } from 'svelte';
   import { _ } from 'svelte-i18n';
+  import { flip } from 'svelte/animate';
+  import { isRTL } from '../../services/i18n.js';
   import Button from '../button/button.svelte';
   import Icon from '../icon/icon.svelte';
   import Option from '../listbox/option.svelte';
@@ -25,8 +28,12 @@
    * @property {boolean} [invalid] Whether to mark the widget invalid. An alias of the
    * `aria-invalid` attribute.
    * @property {Snippet} [children] Primary slot content.
-   * @property {(event: CustomEvent) => void} [onAddValue] Custom `AddValue` event handler.
-   * @property {(event: CustomEvent) => void} [onRemoveValue] Custom `RemoveValue` event handler.
+   * @property {(event: CustomEvent<{ value: string }>) => void} [onAddValue] Custom `AddValue`
+   * event handler.
+   * @property {(event: CustomEvent<{ value: string }>) => void} [onRemoveValue] Custom
+   * `RemoveValue` event handler.
+   * @property {(event: CustomEvent<{ values: string[] }>) => void} [onReorder] Custom `Reorder`
+   * event handler fired when the order of selected values changes.
    */
 
   /**
@@ -46,39 +53,184 @@
     children,
     onAddValue,
     onRemoveValue,
+    onReorder,
     ...restProps
     /* eslint-enable prefer-const */
   } = $props();
 
+  /** @type {Map<any, { label: string, value: any, searchValue?: string }>} */
+  const optionMap = $derived(new Map(options.map((o) => [o.value, o])));
+  const prevKey = $derived($isRTL ? 'ArrowRight' : 'ArrowLeft');
+  const nextKey = $derived($isRTL ? 'ArrowLeft' : 'ArrowRight');
+
+  /**
+   * Reference to the wrapper element.
+   * @type {HTMLElement | undefined}
+   */
+  let wrapperElement = $state();
+
   /**
    * @type {string | undefined}
    */
   let selectedValue = $state();
+
+  /**
+   * Index of the tag currently being dragged.
+   * @type {number | undefined}
+   */
+  let dragIndex = $state();
+
+  /**
+   * Insertion position during drag: the dragged item will be placed *before* this index (0 = before
+   * first, values.length = after last).
+   * @type {number | undefined}
+   */
+  let dropIndex = $state();
+
+  /**
+   * Move a selected value from one position to another and dispatch the `Reorder` event.
+   * @param {number} from Source index.
+   * @param {number} to Destination index.
+   */
+  const moveValue = (from, to) => {
+    if (from === to) return;
+
+    const newValues = [...values];
+    const [item] = newValues.splice(from, 1);
+
+    newValues.splice(to, 0, item);
+    values = newValues;
+    onReorder?.(new CustomEvent('Reorder', { detail: { values: newValues } }));
+  };
+
+  /**
+   * Move a value and focus the tag at the destination index.
+   * @param {number} from Source index.
+   * @param {number} to Destination index.
+   */
+  const moveAndFocus = async (from, to) => {
+    moveValue(from, to);
+    await tick();
+
+    /** @type {HTMLElement} */ (
+      wrapperElement?.querySelectorAll('.label[tabindex]')?.[to]
+    )?.focus();
+  };
 </script>
 
-<div role="none" class="sui select-tags {className}" class:disabled={disabled || readonly} {hidden}>
-  {#each values as value}
-    {@const option = options.find((o) => o.value === value)}
-    {#if option}
-      <span role="none">
-        {option.label}
-        <Button
-          iconic
-          size="small"
-          disabled={disabled || readonly}
-          aria-label={$_('remove_x', { values: { name: option.label } })}
-          onclick={() => {
-            values = values.filter((v) => v !== value);
-            onRemoveValue?.(new CustomEvent('RemoveValue', { detail: { value } }));
+<div
+  role="none"
+  class="sui select-tags {className}"
+  class:disabled={disabled || readonly}
+  {hidden}
+  bind:this={wrapperElement}
+>
+  <span
+    role="listbox"
+    aria-multiselectable="true"
+    aria-label={$_('_sui.select_tags.selected_options')}
+  >
+    {#each values as value, index (value)}
+      {@const option = optionMap.get(value)}
+      {@const label = option?.label || option?.value || value}
+      <span
+        role="none"
+        draggable={!disabled && !readonly}
+        class:drag-source={dragIndex === index}
+        class:drop-before={dropIndex === index && dragIndex !== index && dragIndex !== index - 1}
+        class:drop-after={dropIndex === values.length &&
+          index === values.length - 1 &&
+          dragIndex !== values.length - 1}
+        ondragstart={(event) => {
+          dragIndex = index;
+
+          if (event.dataTransfer) {
+            event.dataTransfer.setData('text/plain', label);
+            event.dataTransfer.effectAllowed = 'move';
+          }
+        }}
+        ondragover={(event) => {
+          event.preventDefault();
+
+          if (event.dataTransfer) {
+            event.dataTransfer.dropEffect = 'move';
+          }
+
+          const rect = event.currentTarget.getBoundingClientRect();
+          const inFirstHalf = event.clientX < rect.left + rect.width / 2;
+
+          dropIndex = inFirstHalf !== $isRTL ? index : index + 1;
+        }}
+        ondrop={async (event) => {
+          event.preventDefault();
+
+          const fromIndex = dragIndex;
+          const toIndex = dropIndex;
+
+          dragIndex = undefined;
+          dropIndex = undefined;
+
+          if (
+            fromIndex !== undefined &&
+            toIndex !== undefined &&
+            toIndex !== fromIndex &&
+            toIndex !== fromIndex + 1
+          ) {
+            await moveAndFocus(fromIndex, toIndex > fromIndex ? toIndex - 1 : toIndex);
+          }
+        }}
+        ondragend={() => {
+          dragIndex = undefined;
+          dropIndex = undefined;
+        }}
+        animate:flip={{ duration: 200 }}
+      >
+        <span
+          class="label"
+          role="option"
+          aria-selected="true"
+          tabindex={disabled || readonly ? undefined : 0}
+          onkeydown={async (event) => {
+            const { key } = event;
+
+            const targetIndex =
+              key === prevKey && index > 0
+                ? index - 1
+                : key === nextKey && index < values.length - 1
+                  ? index + 1
+                  : key === 'Home' && index > 0
+                    ? 0
+                    : key === 'End' && index < values.length - 1
+                      ? values.length - 1
+                      : -1;
+
+            if (targetIndex === -1) return;
+
+            event.preventDefault();
+            await moveAndFocus(index, targetIndex);
           }}
         >
-          {#snippet startIcon()}
-            <Icon name="close" />
-          {/snippet}
-        </Button>
+          {label}
+        </span>
+        {#if option}
+          <Button
+            iconic
+            size="small"
+            disabled={disabled || readonly}
+            aria-label={$_('_sui.select_tags.remove_x', { values: { name: label } })}
+            onclick={() => {
+              values = values.filter((v) => v !== value);
+              onRemoveValue?.(new CustomEvent('RemoveValue', { detail: { value } }));
+            }}
+          >
+            {#snippet startIcon()}
+              <Icon name="close" />
+            {/snippet}
+          </Button>
+        {/if}
       </span>
-    {/if}
-  {/each}
+    {/each}
+  </span>
   {#if (typeof max !== 'number' || values.length < max) && values.length < options.length}
     <Select
       {...restProps}
@@ -116,15 +268,49 @@
 .select-tags.disabled > * {
   opacity: 0.5;
 }
-.select-tags span {
+.select-tags span[role=listbox] {
+  display: contents;
+}
+.select-tags span[draggable] {
   display: inline-flex;
   align-items: center;
+  position: relative;
   margin: var(--sui-focus-ring-width);
   padding: 0;
   padding-inline-start: 8px;
   border-radius: var(--sui-control-medium-border-radius);
   background-color: var(--sui-secondary-background-color);
+  cursor: grab;
+  outline: none;
+}
+.select-tags span[draggable]:focus-within {
+  outline: var(--sui-focus-ring-width) solid var(--sui-primary-accent-color-translucent);
+  outline-offset: 1px;
+}
+.select-tags span[draggable].drag-source {
+  opacity: 0.4;
+  cursor: grabbing;
+}
+.select-tags span[draggable].drop-before::before, .select-tags span[draggable].drop-after::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  margin-left: -1px;
+  border-radius: 1px;
+  width: 4px;
+  background-color: var(--sui-primary-accent-color);
+  pointer-events: none;
+}
+.select-tags span[draggable].drop-before::before {
+  inset-inline-start: calc(-1 * var(--sui-focus-ring-width) - 1px);
+}
+.select-tags span[draggable].drop-after::after {
+  inset-inline-end: calc(-1 * var(--sui-focus-ring-width) - 1px);
+}
+.select-tags span[draggable] .label {
+  outline: none;
 }
-.select-tags span :global(.icon) {
+.select-tags span[draggable] :global(.icon) {
   font-size: var(--sui-font-size-large);
 }</style>

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

@@ -53,13 +53,26 @@ declare const SelectTags: import("svelte").Component<{
      */
     children?: Snippet<[]> | undefined;
     /**
-     * Custom `AddValue` event handler.
+     * Custom `AddValue`
+     * event handler.
      */
-    onAddValue?: ((event: CustomEvent) => void) | undefined;
+    onAddValue?: ((event: CustomEvent<{
+        value: string;
+    }>) => void) | undefined;
     /**
-     * Custom `RemoveValue` event handler.
+     * Custom
+     * `RemoveValue` event handler.
      */
-    onRemoveValue?: ((event: CustomEvent) => void) | undefined;
+    onRemoveValue?: ((event: CustomEvent<{
+        value: string;
+    }>) => void) | undefined;
+    /**
+     * Custom `Reorder`
+     * event handler fired when the order of selected values changes.
+     */
+    onReorder?: ((event: CustomEvent<{
+        values: string[];
+    }>) => void) | undefined;
 } & Record<string, any>, {}, "values">;
 type Props = {
     /**
@@ -111,12 +124,25 @@ type Props = {
      */
     children?: Snippet<[]> | undefined;
     /**
-     * Custom `AddValue` event handler.
+     * Custom `AddValue`
+     * event handler.
+     */
+    onAddValue?: ((event: CustomEvent<{
+        value: string;
+    }>) => void) | undefined;
+    /**
+     * Custom
+     * `RemoveValue` event handler.
      */
-    onAddValue?: ((event: CustomEvent) => void) | undefined;
+    onRemoveValue?: ((event: CustomEvent<{
+        value: string;
+    }>) => void) | undefined;
     /**
-     * Custom `RemoveValue` event handler.
+     * Custom `Reorder`
+     * event handler fired when the order of selected values changes.
      */
-    onRemoveValue?: ((event: CustomEvent) => void) | undefined;
+    onReorder?: ((event: CustomEvent<{
+        values: string[];
+    }>) => void) | undefined;
 };
 import type { Snippet } from 'svelte';

package/dist/components/tabs/tab-box.svelte.d.ts

@@ -16,7 +16,7 @@ declare const TabBox: import("svelte").Component<{
      * Orientation of the widget. This is
      * typically contrary to `<TabList>`’s `orientation`.
      */
-    orientation?: "vertical" | "horizontal" | undefined;
+    orientation?: "horizontal" | "vertical" | undefined;
     /**
      * Primary slot content.
      */
@@ -31,7 +31,7 @@ type Props = {
      * Orientation of the widget. This is
      * typically contrary to `<TabList>`’s `orientation`.
      */
-    orientation?: "vertical" | "horizontal" | undefined;
+    orientation?: "horizontal" | "vertical" | undefined;
     /**
      * Primary slot content.
      */

package/dist/components/tabs/tab-list.svelte.d.ts

@@ -26,7 +26,7 @@ declare const TabList: import("svelte").Component<{
      * Orientation of the widget. An alias of the
      * `aria-orientation` attribute.
      */
-    orientation?: "vertical" | "horizontal" | undefined;
+    orientation?: "horizontal" | "vertical" | undefined;
     /**
      * The `data-name` attribute on the wrapper element.
      */
@@ -58,7 +58,7 @@ type Props = {
      * Orientation of the widget. An alias of the
      * `aria-orientation` attribute.
      */
-    orientation?: "vertical" | "horizontal" | undefined;
+    orientation?: "horizontal" | "vertical" | undefined;
     /**
      * The `data-name` attribute on the wrapper element.
      */

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

@@ -26,7 +26,7 @@ declare const Toolbar: import("svelte").Component<{
      * Orientation of the widget. An alias of the
      * `aria-orientation` attribute.
      */
-    orientation?: "vertical" | "horizontal" | undefined;
+    orientation?: "horizontal" | "vertical" | undefined;
     /**
      * The style variant of the toolbar.
      */
@@ -54,7 +54,7 @@ type Props = {
      * Orientation of the widget. An alias of the
      * `aria-orientation` attribute.
      */
-    orientation?: "vertical" | "horizontal" | undefined;
+    orientation?: "horizontal" | "vertical" | undefined;
     /**
      * The style variant of the toolbar.
      */

package/dist/components/util/app-shell.svelte.d.ts

@@ -12,7 +12,7 @@ declare const AppShell: import("svelte").Component<{
     /**
      * Orientation of the app shell’s children.
      */
-    orientation?: "vertical" | "horizontal" | undefined;
+    orientation?: "horizontal" | "vertical" | undefined;
     /**
      * Primary slot content.
      */
@@ -22,7 +22,7 @@ type Props = {
     /**
      * Orientation of the app shell’s children.
      */
-    orientation?: "vertical" | "horizontal" | undefined;
+    orientation?: "horizontal" | "vertical" | undefined;
     /**
      * Primary slot content.
      */

package/dist/index.d.ts

@@ -40,6 +40,9 @@ export { default as Menu } from "./components/menu/menu.svelte";
 export { default as Progressbar } from "./components/progressbar/progressbar.svelte";
 export { default as RadioGroup } from "./components/radio/radio-group.svelte";
 export { default as Radio } from "./components/radio/radio.svelte";
+export { default as ResizableHandle } from "./components/resizable-pane/resizable-handle.svelte";
+export { default as ResizablePaneGroup } from "./components/resizable-pane/resizable-pane-group.svelte";
+export { default as ResizablePane } from "./components/resizable-pane/resizable-pane.svelte";
 export { default as InfiniteScroll } from "./components/scroll/infinite-scroll.svelte";
 export { default as Combobox } from "./components/select/combobox.svelte";
 export { default as SelectTags } from "./components/select/select-tags.svelte";

package/dist/index.js

@@ -44,6 +44,9 @@ export { default as Menu } from './components/menu/menu.svelte';
 export { default as Progressbar } from './components/progressbar/progressbar.svelte';
 export { default as RadioGroup } from './components/radio/radio-group.svelte';
 export { default as Radio } from './components/radio/radio.svelte';
+export { default as ResizableHandle } from './components/resizable-pane/resizable-handle.svelte';
+export { default as ResizablePaneGroup } from './components/resizable-pane/resizable-pane-group.svelte';
+export { default as ResizablePane } from './components/resizable-pane/resizable-pane.svelte';
 export { default as InfiniteScroll } from './components/scroll/infinite-scroll.svelte';
 export { default as Combobox } from './components/select/combobox.svelte';
 export { default as SelectTags } from './components/select/select-tags.svelte';

package/dist/locales/en.d.ts

@@ -35,6 +35,10 @@ export namespace strings {
         let show_password: string;
         let hide_password: string;
     }
+    namespace select_tags {
+        let selected_options: string;
+        let remove_x: string;
+    }
     namespace text_editor {
         let text_editor_1: string;
         export { text_editor_1 as text_editor };

package/dist/locales/en.js

@@ -35,6 +35,10 @@ export const strings = {
     show_password: 'Show Password',
     hide_password: 'Hide Password',
   },
+  select_tags: {
+    selected_options: 'Selected options',
+    remove_x: 'Remove {name}',
+  },
   text_editor: {
     text_editor: 'Text Editor',
     code_editor: 'Code Editor',

package/dist/locales/ja.d.ts

@@ -35,6 +35,10 @@ export namespace strings {
         let show_password: string;
         let hide_password: string;
     }
+    namespace select_tags {
+        let selected_options: string;
+        let remove_x: string;
+    }
     namespace text_editor {
         let text_editor_1: string;
         export { text_editor_1 as text_editor };

package/dist/locales/ja.js

@@ -35,6 +35,10 @@ export const strings = {
     show_password: 'パスワードを表示',
     hide_password: 'パスワードを隠す',
   },
+  select_tags: {
+    selected_options: '選択済みのオプション',
+    remove_x: '{name} を削除',
+  },
   text_editor: {
     text_editor: 'テキストエディター',
     code_editor: 'コードエディター',