npm - svelte-select-5 - Versions diffs - 6.0.0 - Mend

svelte-select-5 6.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (123) hide show

package/.claude/settings.local.json +20 -0
package/.prettierignore +2 -0
package/.prettierrc +17 -0
package/CHANGELOG.md +571 -0
package/LICENSE +9 -0
package/MIGRATION_GUIDE.md +98 -0
package/README.md +316 -0
package/docs/generate_theming_variables_md.cjs +53 -0
package/docs/theming_variables.md +113 -0
package/jsconfig.json +3 -0
package/package.json +77 -0
package/rollup.config.js +33 -0
package/src/app.html +29 -0
package/src/global.d.ts +1 -0
package/src/lib/ChevronIcon.svelte +22 -0
package/src/lib/ClearIcon.svelte +22 -0
package/src/lib/LoadingIcon.svelte +33 -0
package/src/lib/Select.svelte +1345 -0
package/src/lib/filter.js +38 -0
package/src/lib/get-items.js +25 -0
package/src/lib/index.js +1 -0
package/src/lib/tailwind.css +130 -0
package/src/post-prepare.cjs +6 -0
package/src/remove-styles.cjs +22 -0
package/src/routes/+layout.js +1 -0
package/src/routes/+layout.svelte +263 -0
package/src/routes/+page.js +5 -0
package/src/routes/+page.svelte +0 -0
package/src/routes/examples/+page.svelte +84 -0
package/src/routes/examples/advanced/create-item/+page.svelte +36 -0
package/src/routes/examples/advanced/create-item-multiple/+page.svelte +38 -0
package/src/routes/examples/advanced/floating-ui/+page.svelte +22 -0
package/src/routes/examples/advanced/form-action/+page.server.js +10 -0
package/src/routes/examples/advanced/form-action/+page.svelte +20 -0
package/src/routes/examples/advanced/limit-multi-value/+page.svelte +31 -0
package/src/routes/examples/advanced/long-item/+page.svelte +38 -0
package/src/routes/examples/advanced/multi-item-checkboxes/+page.svelte +49 -0
package/src/routes/examples/advanced/style-props/+page.svelte +14 -0
package/src/routes/examples/advanced/virtual-list/+page.svelte +95 -0
package/src/routes/examples/events/blur/+page.svelte +19 -0
package/src/routes/examples/events/change/+page.svelte +16 -0
package/src/routes/examples/events/clear/+page.svelte +18 -0
package/src/routes/examples/events/error/+page.svelte +17 -0
package/src/routes/examples/events/filter/+page.svelte +16 -0
package/src/routes/examples/events/focus/+page.svelte +16 -0
package/src/routes/examples/events/hoverItem/+page.svelte +16 -0
package/src/routes/examples/events/input/+page.svelte +16 -0
package/src/routes/examples/events/loaded/+page.svelte +23 -0
package/src/routes/examples/props/class/+page.svelte +17 -0
package/src/routes/examples/props/clearFilterTextOnBlur/+page.svelte +13 -0
package/src/routes/examples/props/clearable/+page.svelte +13 -0
package/src/routes/examples/props/closeListOnChange/+page.svelte +12 -0
package/src/routes/examples/props/container-styles/+page.svelte +11 -0
package/src/routes/examples/props/debounce-wait/+page.svelte +19 -0
package/src/routes/examples/props/disabled/+page.svelte +15 -0
package/src/routes/examples/props/filter-text/+page.svelte +14 -0
package/src/routes/examples/props/floating-config/+page.svelte +42 -0
package/src/routes/examples/props/focused/+page.svelte +16 -0
package/src/routes/examples/props/group-header-selectable/+page.svelte +18 -0
package/src/routes/examples/props/hide-empty-state/+page.svelte +8 -0
package/src/routes/examples/props/id/+page.svelte +15 -0
package/src/routes/examples/props/input-attributes/+page.svelte +11 -0
package/src/routes/examples/props/item-id/+page.svelte +15 -0
package/src/routes/examples/props/items/+page.svelte +15 -0
package/src/routes/examples/props/just-value/+page.svelte +16 -0
package/src/routes/examples/props/label/+page.svelte +15 -0
package/src/routes/examples/props/list-auto-width/+page.svelte +21 -0
package/src/routes/examples/props/list-offset/+page.svelte +21 -0
package/src/routes/examples/props/list-open/+page.svelte +31 -0
package/src/routes/examples/props/loadOptions/+page.svelte +16 -0
package/src/routes/examples/props/loading/+page.svelte +15 -0
package/src/routes/examples/props/multiFullItemClearable/+page.svelte +12 -0
package/src/routes/examples/props/multiple/+page.svelte +12 -0
package/src/routes/examples/props/name/+page.svelte +13 -0
package/src/routes/examples/props/placeholder/+page.svelte +14 -0
package/src/routes/examples/props/placeholder-always-show/+page.svelte +11 -0
package/src/routes/examples/props/required/+page.svelte +14 -0
package/src/routes/examples/props/searchable/+page.svelte +15 -0
package/src/routes/examples/props/show-chevron/+page.svelte +15 -0
package/src/routes/examples/props/value/+page.svelte +19 -0
package/src/routes/examples/slots/chevron-icon/+page.svelte +16 -0
package/src/routes/examples/slots/clear-icon/+page.svelte +21 -0
package/src/routes/examples/slots/empty/+page.svelte +18 -0
package/src/routes/examples/slots/input-hidden/+page.server.js +10 -0
package/src/routes/examples/slots/input-hidden/+page.svelte +22 -0
package/src/routes/examples/slots/item/+page.svelte +15 -0
package/src/routes/examples/slots/list/+page.svelte +49 -0
package/src/routes/examples/slots/list-append/+page.svelte +16 -0
package/src/routes/examples/slots/list-prepend/+page.svelte +16 -0
package/src/routes/examples/slots/loading-icon/+page.svelte +29 -0
package/src/routes/examples/slots/multi-clear-icon/+page.svelte +16 -0
package/src/routes/examples/slots/prepend/+page.svelte +22 -0
package/src/routes/examples/slots/required/+page.svelte +31 -0
package/src/routes/examples/slots/selection/+page.svelte +25 -0
package/static/nav-icon.svg +2 -0
package/static/svelte-select.png +0 -0
package/svelte-select.png +0 -0
package/svelte.config.js +10 -0
package/tailwind.config.cjs +4 -0
package/test/public/favicon.ico +0 -0
package/test/public/index.html +15 -0
package/test/src/ChevronSlotTest.svelte +19 -0
package/test/src/ClearIconSlotTest.svelte +12 -0
package/test/src/CustomItem.svelte +78 -0
package/test/src/GroupHeaderNotSelectable.svelte +17 -0
package/test/src/HoverItemIndexTest.svelte +21 -0
package/test/src/InputHiddenSlotTest.svelte +12 -0
package/test/src/ItemHeightTest.svelte +7 -0
package/test/src/ItemSlotTest.svelte +11 -0
package/test/src/ListSlotTest.svelte +14 -0
package/test/src/LoadOptionsGroup.svelte +21 -0
package/test/src/MultiItemColor.svelte +7 -0
package/test/src/OuterListTest.svelte +16 -0
package/test/src/PrependSlotTest.svelte +12 -0
package/test/src/Select/ParentContainer.svelte +11 -0
package/test/src/SelectionSlotMultipleTest.svelte +12 -0
package/test/src/SelectionSlotTest.svelte +12 -0
package/test/src/TestClearIcon.svelte +1 -0
package/test/src/TestIcon.svelte +15 -0
package/test/src/env.js +1 -0
package/test/src/test-utils.js +124 -0
package/test/src/tests.js +3745 -0
package/vite.config.js +9 -0

package/test/public/index.html ADDED Viewed

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>svelte-select tests</title>
+    </head>
+    <body>
+        <div id="testTemplate"></div>
+        <div id="extra"></div>
+        <script type="module" src="/tests.js"></script>
+    </body>
+</html>

package/test/src/ChevronSlotTest.svelte ADDED Viewed

@@ -0,0 +1,19 @@
+<script>
+    import Select from '../../src/lib/Select.svelte';
+    let items = $state(['one', 'two']);
+    let value = $state(undefined);
+    let listOpen = $state(true);
+</script>
+<Select bind:items bind:value bind:listOpen showChevron>
+    {#snippet chevronIcon({ listOpen })}
+        <div>
+            {#if listOpen}
+                ⬆️
+            {:else}
+                ⬇️
+            {/if}
+        </div>
+    {/snippet}
+</Select>

package/test/src/ClearIconSlotTest.svelte ADDED Viewed

@@ -0,0 +1,12 @@
+<script>
+    import Select from '../../src/lib/Select.svelte';
+    let items = $state(['one', 'two']);
+    let value = $state('one');
+</script>
+<Select bind:items bind:value>
+    {#snippet clearIcon()}
+        <div>x</div>
+    {/snippet}
+</Select>

package/test/src/CustomItem.svelte ADDED Viewed

@@ -0,0 +1,78 @@
+<script>
+    let { active = false, first = false, hover = false, item = undefined } = $props();
+    let itemClasses = $derived.by(() => {
+        const classes = [];
+        if (active) {
+            classes.push('active');
+        }
+        if (first) {
+            classes.push('first');
+        }
+        if (hover) {
+            classes.push('hover');
+        }
+        return classes.join(' ');
+    });
+</script>
+<div class="customItem {itemClasses}">
+    <img src={item.image_url} alt={item.name} />
+    <div class="customItem_title">
+        <div class="customItem_name">{item.name}</div>
+        <div class="customItem_tagline">{item.tagline}</div>
+    </div>
+</div>
+<style>
+    .customItem {
+        display: flex;
+        align-items: center;
+        cursor: default;
+        height: 42px;
+        line-height: 42px;
+        padding: 0 16px;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+    }
+    .customItem:active {
+        background: #b9daff;
+    }
+    .customItem.active {
+        background: #007aff;
+        color: #fff;
+    }
+    .customItem.first {
+        border-radius: 4px 4px 0 0;
+    }
+    .customItem.hover:not(.active) {
+        background: #e7f2ff;
+    }
+    img {
+        width: 5px;
+        padding: 5px 0;
+        margin: 0 10px;
+    }
+    .customItem_title {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+    .customItem_name {
+        display: inline-block;
+        font-weight: 700;
+        margin-right: 10px;
+    }
+    .customItem_tagline {
+        display: inline-block;
+    }
+</style>

package/test/src/GroupHeaderNotSelectable.svelte ADDED Viewed

@@ -0,0 +1,17 @@
+<script>
+    import Select from '../../src/lib/Select.svelte';
+    let { filterText = $bindable('') } = $props();
+    let items = [
+        { value: 'chocolate', label: 'Chocolate', group: 'Sweet' },
+        { value: 'pizza', label: 'Pizza', group: 'Savory' },
+        { value: 'cake', label: 'Cake', group: 'Sweet', selectable: false },
+        { value: 'chips', label: 'Chips', group: 'Savory' },
+        { value: 'ice-cream', label: 'Ice Cream', group: 'Sweet' },
+    ];
+    let value = $state(undefined);
+</script>
+<Select {items} groupBy={(item) => item.group} bind:value bind:filterText />

package/test/src/HoverItemIndexTest.svelte ADDED Viewed

@@ -0,0 +1,21 @@
+<script>
+    import Select from '../../src/lib/Select.svelte';
+    let items = [];
+    for (let i = 0; i < 100; i++) {
+        items.push({ label: i, value: i, group: 'a' });
+    }
+    let value = $state(null);
+    let { hoverItemIndex = $bindable() } = $props();
+</script>
+<Select {items} bind:value groupBy={(i) => i.group} bind:hoverItemIndex />
+{#if value}
+    <p>
+        Selected value: {value.label}
+    </p>
+{/if}

package/test/src/InputHiddenSlotTest.svelte ADDED Viewed

@@ -0,0 +1,12 @@
+<script>
+    import Select from '../../src/lib/Select.svelte';
+    let items = $state(['one', 'two']);
+    let value = $state('one');
+</script>
+<Select bind:items name="test" bind:value>
+    {#snippet inputHidden({ value })}
+        <input type="hidden" name="test" value={value.value} />
+    {/snippet}
+</Select>

package/test/src/ItemHeightTest.svelte ADDED Viewed

@@ -0,0 +1,7 @@
+<script>
+    import Select from '../../src/lib/Select.svelte';
+    let items = $state(['one', 'two']);
+</script>
+<Select bind:items listOpen --item-height="50px" />

package/test/src/ItemSlotTest.svelte ADDED Viewed

@@ -0,0 +1,11 @@
+<script>
+    import Select from '../../src/lib/Select.svelte';
+    let items = $state(['one', 'two']);
+</script>
+<Select bind:items listOpen>
+    {#snippet item({ item })}
+        * {item.label} *
+    {/snippet}
+</Select>

package/test/src/ListSlotTest.svelte ADDED Viewed

@@ -0,0 +1,14 @@
+<script>
+    import Select from '../../src/lib/Select.svelte';
+    let items = $state(['one', 'two']);
+    let value = $state('one');
+</script>
+<Select bind:items bind:value listOpen>
+    {#snippet list({ filteredItems })}
+        {#each filteredItems as item}
+            {item.label}
+        {/each}
+    {/snippet}
+</Select>

package/test/src/LoadOptionsGroup.svelte ADDED Viewed

@@ -0,0 +1,21 @@
+<script>
+    import Select from '../../src/lib/Select.svelte';
+    const items = [
+        { value: 'chocolate', label: 'Chocolate', group: 'Sweet' },
+        { value: 'pizza', label: 'Pizza', group: 'Savory' },
+        { value: 'cake', label: 'Cake', group: 'Sweet', selectable: false },
+        { value: 'chips', label: 'Chips', group: 'Savory' },
+        { value: 'ice-cream', label: 'Ice Cream', group: 'Sweet' },
+    ];
+    let { filterText = $bindable(), value = $bindable(undefined) } = $props();
+    async function loadOptions() {
+        return items.filter((i) => i.label.toLowerCase().includes(filterText.toLowerCase()));
+    }
+    const groupBy = (i) => i.group;
+</script>
+<Select {loadOptions} bind:filterText {groupBy} {value} />

package/test/src/MultiItemColor.svelte ADDED Viewed

@@ -0,0 +1,7 @@
+<script>
+    import Select from '../../src/lib/Select.svelte';
+    let items = $state(['one', 'two']);
+</script>
+<Select multiple bind:items value="one" listOpen --multi-item-color="red" />

package/test/src/OuterListTest.svelte ADDED Viewed

@@ -0,0 +1,16 @@
+<script>
+    import Select from '../../src/lib/Select.svelte';
+    let items = $state(['one', 'two']);
+    let value = $state('one');
+</script>
+<Select bind:items bind:value listOpen>
+    {#snippet listPrepend()}
+        prepend
+    {/snippet}
+    {#snippet listAppend()}
+        append
+    {/snippet}
+</Select>

package/test/src/PrependSlotTest.svelte ADDED Viewed

@@ -0,0 +1,12 @@
+<script>
+    import Select from '../../src/lib/Select.svelte';
+    let items = $state(['one', 'two']);
+    let value = $state(undefined);
+</script>
+<Select bind:items bind:value>
+    {#snippet prepend()}
+        <div class="before">Before it all</div>
+    {/snippet}
+</Select>

package/test/src/Select/ParentContainer.svelte ADDED Viewed

@@ -0,0 +1,11 @@
+<script>
+  import Select from '../../../src/lib/Select.svelte';
+  let { value = $bindable(), items } = $props();
+</script>
+<div class="container">
+  <Select bind:value {items}></Select>
+  <p class="result">{value.label}</p>
+</div>

package/test/src/SelectionSlotMultipleTest.svelte ADDED Viewed

@@ -0,0 +1,12 @@
+<script>
+    import Select from '../../src/lib/Select.svelte';
+    let items = $state(['one', 'two']);
+    let value = $state(['one', 'two']);
+</script>
+<Select bind:items bind:value multiple>
+    {#snippet selection({ selection, index })}
+        Index: {index} Slot: {selection.label}
+    {/snippet}
+</Select>

package/test/src/SelectionSlotTest.svelte ADDED Viewed

@@ -0,0 +1,12 @@
+<script>
+    import Select from '../../src/lib/Select.svelte';
+    let items = $state(['one', 'two']);
+    let value = $state('one');
+</script>
+<Select bind:items bind:value>
+    {#snippet selection({ selection })}
+        Slot: {selection.label}
+    {/snippet}
+</Select>

package/test/src/TestClearIcon.svelte ADDED Viewed

@@ -0,0 +1 @@

+ <svg class="testClearIcon" width="100%" height="100%" viewBox="0 0 512 512"><path d="m437 75c-100-100-262-100-362 0-100 100-100 262 0 362 100 100 262 100 362 0 100-100 100-262 0-362z m-86 274c-1 1-1 1 0 0-5 4-10 6-15 7-6 0-11-2-15-6l-65-65-65 65c-4 4-9 6-15 6-5 0-10-2-14-6-8-8-8-21-1-29 0 0 0 0 1 0l65-65-65-65c-8-8-8-21 0-29 8-8 21-8 29 0l65 65 65-65c8-8 21-8 29 0 8 8 8 21 0 29l-65 65 65 65c8 8 8 21 1 28z" fill="currentColor"></path></svg>

package/test/src/TestIcon.svelte ADDED Viewed

@@ -0,0 +1,15 @@
+<svg
+  id="testIcon"
+  width="16"
+  height="16"
+  viewBox="0 0 16 16"
+  xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M11.0526 0.294881L9.28328 2.06416L13.9577 6.71672L15.7051 4.94744C16.0983
+    4.55427 16.0983 4.00819 15.7051 3.61502L12.4068 0.294881C11.9918 -0.0982935
+    11.4457 -0.0982935 11.0526 0.294881ZM2.11877 11.2164L1.66007 13.4881L2.51195
+    14.3618L4.78362 13.8812L2.11877 11.2164ZM0 15.5631L1.11399 10.2116L8.51877
+    2.80683L13.1932 7.45939L5.76655 14.8642L0.371331 15.9563C0.349488 15.9782
+    0.327645 15.9782 0.305802 15.9782C0.174744 15.9782 0 15.8471 0 15.5631Z"
+    fill="currentColor" />
+</svg>

package/test/src/env.js ADDED Viewed

	@@ -0,0 +1 @@
1	+ export const browser = true;

package/test/src/test-utils.js ADDED Viewed

@@ -0,0 +1,124 @@
+/**
+ * Test utilities for Svelte 5 component testing
+ *
+ * This module provides backward-compatible helpers for testing Svelte 5 components
+ * using an API similar to Svelte 3/4.
+ */
+import { mount, unmount, flushSync } from 'svelte';
+/**
+ * Creates a test instance of a Svelte component with a backward-compatible API.
+ *
+ * In Svelte 5, components no longer have $set or direct property access.
+ * This wrapper provides those capabilities for testing purposes.
+ *
+ * @param {Component} Component - The Svelte component to instantiate
+ * @param {Object} options - Options for the component
+ * @param {HTMLElement} options.target - The DOM element to mount the component in
+ * @param {Object} options.props - Initial props for the component
+ * @returns {Object} A wrapper object with $set, $destroy, and property access
+ */
+export function createTestComponent(Component, { target, props = {} } = {}) {
+  let currentProps = { ...props };
+  let instance = null;
+  let eventHandlers = {};
+  // Create a proxy to intercept property access
+  const handler = {
+    get(obj, prop) {
+      if (prop === '$set') {
+        return async function(newProps) {
+          // Merge new props
+          currentProps = { ...currentProps, ...newProps };
+          // Unmount and remount with new props
+          if (instance) {
+            unmount(instance);
+          }
+          // Re-apply event handlers as callback props
+          const propsWithEvents = { ...currentProps };
+          for (const [event, handler] of Object.entries(eventHandlers)) {
+            propsWithEvents[event] = handler;
+          }
+          instance = mount(Component, { target, props: propsWithEvents });
+          flushSync();
+          return new Promise(f => setTimeout(f, 0));
+        };
+      }
+      if (prop === '$destroy') {
+        return function() {
+          if (instance) {
+            unmount(instance);
+            instance = null;
+          }
+        };
+      }
+      if (prop === '$on') {
+        return function(eventName, handler) {
+          // Store event handlers as callback props
+          const callbackName = `on${eventName}`;
+          eventHandlers[callbackName] = handler;
+          // Re-mount with new event handler
+          currentProps[callbackName] = (detail) => handler({ detail });
+          if (instance) {
+            unmount(instance);
+          }
+          instance = mount(Component, { target, props: currentProps });
+          flushSync();
+        };
+      }
+      // Return current prop value
+      if (prop in currentProps) {
+        return currentProps[prop];
+      }
+      return undefined;
+    },
+    set(obj, prop, value) {
+      // Update prop and re-mount
+      currentProps[prop] = value;
+      if (instance) {
+        unmount(instance);
+      }
+      const propsWithEvents = { ...currentProps };
+      for (const [event, handler] of Object.entries(eventHandlers)) {
+        propsWithEvents[event] = handler;
+      }
+      instance = mount(Component, { target, props: propsWithEvents });
+      flushSync();
+      return true;
+    }
+  };
+  // Initial mount
+  const propsWithEvents = { ...currentProps };
+  instance = mount(Component, { target, props: propsWithEvents });
+  flushSync();
+  return new Proxy({}, handler);
+}
+/**
+ * Helper to wait for next tick
+ */
+export function tick() {
+  return new Promise(f => setTimeout(f, 0));
+}
+/**
+ * Helper to flush pending updates synchronously
+ */
+export { flushSync };