svelte-select-5 6.0.0

package/src/routes/examples/advanced/form-action/+page.svelte

@@ -0,0 +1,20 @@
+<script>
+    import Select from '$lib/Select.svelte';
+
+    let { form } = $props();
+
+    const items = ['Foo', 'Bar'];
+    let value = $state(null);
+    let multiple = $state(false);
+</script>
+
+<label for="toggle"><input id="toggle" type="checkbox" bind:checked={multiple} />Multiple</label>
+
+<form method="POST" action="?/someaction">
+    <Select name="foobar" {multiple} required {items} bind:value />
+    <button>Send</button>
+</form>
+
+{#if form?.success}
+    <p>Data: {form?.foobar}</p>
+{/if}

package/src/routes/examples/advanced/limit-multi-value/+page.svelte

@@ -0,0 +1,31 @@
+<script>
+    import Select from '$lib/Select.svelte';
+
+    const _items = [
+        { value: 'one', label: 'One' },
+        { value: 'two', label: 'Two' },
+        { value: 'three', label: 'Three' },
+        { value: 'four', label: 'Four' },
+        { value: 'five', label: 'Five' },
+        { value: 'six', label: 'Six' },
+    ];
+
+    let value = $state(undefined);
+
+    let maxItems = $derived(value?.length === 4);
+    let items = $derived(maxItems ? [] : [..._items]);
+</script>
+
+<Select {items} multiple bind:value>
+    {#snippet empty()}
+        <div class="empty">{maxItems ? 'Max 4 items' : 'No options'}</div>
+    {/snippet}
+</Select>
+
+
+<style>
+    .empty {
+        text-align: center;
+        padding: 20px 0;
+    }
+</style>

package/src/routes/examples/advanced/long-item/+page.svelte

@@ -0,0 +1,38 @@
+<script>
+    import Select from '$lib/Select.svelte';
+
+    let collection = [
+        {
+            value: 'one',
+            label: 'One one one one one one one one one One one one one one one one one one One one one one one one one one one One one one one one one one one one',
+        },
+        { value: 'two', label: 'Two' },
+        { value: 'three', label: 'Three' },
+    ];
+</script>
+
+<div class="container">
+    <Select items={collection} --item-height="auto" --item-line-height="auto">
+        {#snippet item({ item })}
+            <div class="item">
+                {item.label}
+            </div>
+        {/snippet}
+    </Select>
+</div>
+
+<style>
+    .container {
+        width: 500px;
+    }
+
+    .item {
+        min-height: 16px;
+        padding: 10px 0;
+        line-height: 16px;
+        display: flex;
+        line-break: auto;
+        white-space: pre-wrap;
+        align-items: center;
+    }
+</style>

package/src/routes/examples/advanced/multi-item-checkboxes/+page.svelte

@@ -0,0 +1,49 @@
+<script>
+    import Select from '$lib/Select.svelte';
+
+    let items = [
+        { value: 'one', label: 'One' },
+        { value: 'two', label: 'Two' },
+        { value: 'three', label: 'Three' },
+    ];
+
+    let checked = $state([]);
+    let value = $derived(checked.map((c) => items.find((i) => i.value === c)));
+    let isChecked = $derived.by(() => {
+        const result = {};
+        checked.forEach((c) => (result[c] = true));
+        return result;
+    });
+
+    function handleChange(e, type) {
+        if (type === 'clear' && Array.isArray(e)) checked = [];
+        else
+            checked.includes(e.value)
+                ? (checked = checked.filter((i) => i != e.value))
+                : (checked = [...checked, e.value]);
+    }
+</script>
+
+<Select
+    {items}
+    {value}
+    multiple={true}
+    filterSelectedItems={false}
+    closeListOnChange={false}
+    onselect={(e) => handleChange(e, 'select')}
+    onclear={(e) => handleChange(e, 'clear')}>
+    {#snippet item({ item })}
+        <div class="item">
+            <label for={item.value}>
+                <input type="checkbox" id={item.value} checked={isChecked[item.value]} />
+                {item.label}
+            </label>
+        </div>
+    {/snippet}
+</Select>
+
+<style>
+    .item {
+        pointer-events: none;
+    }
+</style>

package/src/routes/examples/advanced/style-props/+page.svelte

@@ -0,0 +1,14 @@
+<script>
+    import Select from '$lib/Select.svelte';
+
+    let items = ['One', 'Two', 'Three'];
+    let listOpen = false;
+</script>
+
+<Select
+    bind:listOpen
+    {items}
+    listOffset={0}
+    --list-border-radius="0 0 5px 5px"
+    --item-first-border-radius="0"
+    --border-radius={listOpen ? '5px 5px 0 0' : '5px'} />

package/src/routes/examples/advanced/virtual-list/+page.svelte

@@ -0,0 +1,95 @@
+<script>
+    import VirtualList from 'svelte-tiny-virtual-list';
+    import { tick } from 'svelte';
+    import Select from '$lib/Select.svelte';
+
+    const items = [];
+
+    for (let i = 0; i < 8000; i++) {
+        items.push(i.toString());
+    }
+
+    let value = $state(undefined);
+    let listOpen = $state(false);
+    let activeIndex = $state(null);
+    let justValue = $state(undefined);
+    let hoverItemIndex = $state(0);
+
+    function handleClick(i) {
+        activeIndex = i;
+        value = items[i];
+        listOpen = false;
+    }
+
+    function handleHover(e) {
+        hoverItemIndex = e;
+    }
+
+    async function handleListOpen() {
+        if (!value) return;
+        await tick();
+        hoverItemIndex = activeIndex;
+    }
+
+    $effect(() => {
+        if (listOpen) {
+            handleListOpen();
+        }
+    });
+</script>
+
+<Select
+    --list-max-height="300px"
+    {items}
+    bind:listOpen
+    bind:value
+    bind:justValue
+    bind:hoverItemIndex
+    onhoverItem={(e) => handleHover(e)}>
+    {#snippet list({ filteredItems })}
+        {#if filteredItems.length > 0}
+            <VirtualList
+                width="100%"
+                height={300}
+                itemCount={filteredItems?.length}
+                itemSize={50}
+                scrollToIndex={hoverItemIndex}>
+                {#snippet item({ index, style })}
+                    <div
+                        class="item"
+                        class:active={activeIndex === index}
+                        class:hover={hoverItemIndex === index}
+                        {style}
+                        role="option"
+                        aria-selected={activeIndex === index}
+                        tabindex="0"
+                        onclick={() => handleClick(index)}
+                        onkeydown={(e) => { if (e.key === 'Enter' || e.key === ' ') handleClick(index); }}
+                        onfocus={() => handleHover(index)}
+                        onmouseover={() => handleHover(index)}>
+                        Item: {filteredItems[index].label}, Index: #{index}
+                    </div>
+                {/snippet}
+            </VirtualList>
+        {/if}
+    {/snippet}
+</Select>
+
+<style>
+    .item {
+        height: 30px;
+        display: flex;
+        align-items: center;
+        padding: 20px;
+        cursor: default;
+    }
+
+    .item.hover {
+        background: var(--item-hover-bg, #e7f2ff);
+    }
+
+    .item.active {
+        background: var(--item-is-active-bg, #007aff);
+        color: var(--item-is-active-color, #fff);
+    }
+</style>

package/src/routes/examples/events/blur/+page.svelte

@@ -0,0 +1,19 @@
+<script>
+    import Select from '$lib/Select.svelte';
+
+    let items = [
+        { value: 'one', label: 'One' },
+        { value: 'two', label: 'Two' },
+        { value: 'three', label: 'Three' },
+    ];
+
+    function handle(event) {
+        console.log(event);
+    }
+</script>
+
+<Select {items} onblur={handle} searchable={false} />
+
+<br />
+
+<Select {items} onblur={handle} multiple />

package/src/routes/examples/events/change/+page.svelte

@@ -0,0 +1,16 @@
+<script>
+    import Select from '$lib/Select.svelte';
+
+    let items = [
+        { value: 'one', label: 'One' },
+        { value: 'two', label: 'Two' },
+        { value: 'three', label: 'Three' },
+    ];
+
+    function handle(value) {
+        console.log(value);
+    }
+</script>
+
+<Select {items} onchange={handle} />
+

package/src/routes/examples/events/clear/+page.svelte

@@ -0,0 +1,18 @@
+<script>
+    import Select from '$lib/Select.svelte';
+
+    let items = [
+        { value: 'one', label: 'One' },
+        { value: 'two', label: 'Two' },
+        { value: 'three', label: 'Three' },
+    ];
+
+    function handle(value) {
+        console.log(value);
+    }
+</script>
+
+<Select {items} onclear={handle} />
+<br />
+<Select {items} onclear={handle} multiple />
+

package/src/routes/examples/events/error/+page.svelte

@@ -0,0 +1,17 @@
+<script>
+    import Select from '$lib/Select.svelte';
+
+    function loadOptions() {
+        return new Promise((resolve, reject) => {
+            setTimeout(() => {
+                reject('error');
+            });
+        });
+    }
+
+    function handle(error) {
+        console.log(error);
+    }
+</script>
+
+<Select onerror={handle} {loadOptions} />

package/src/routes/examples/events/filter/+page.svelte

@@ -0,0 +1,16 @@
+<script>
+    import Select from '$lib/Select.svelte';
+
+    let items = [
+        { value: 'one', label: 'One' },
+        { value: 'two', label: 'Two' },
+        { value: 'three', label: 'Three' },
+    ];
+
+    function handle(filteredItems) {
+        console.log(filteredItems);
+    }
+</script>
+
+<Select {items} onfilter={handle} />
+

package/src/routes/examples/events/focus/+page.svelte

@@ -0,0 +1,16 @@
+<script>
+    import Select from '$lib/Select.svelte';
+
+    let items = [
+        { value: 'one', label: 'One' },
+        { value: 'two', label: 'Two' },
+        { value: 'three', label: 'Three' },
+    ];
+
+    function handle(event) {
+        console.log(event);
+    }
+</script>
+
+<Select {items} onfocus={handle} />
+

package/src/routes/examples/events/hoverItem/+page.svelte

@@ -0,0 +1,16 @@
+<script>
+    import Select from '$lib/Select.svelte';
+
+    let items = [
+        { value: 'one', label: 'One' },
+        { value: 'two', label: 'Two' },
+        { value: 'three', label: 'Three' },
+    ];
+
+    function handle(index) {
+        console.log(index);
+    }
+</script>
+
+<Select {items} onhoverItem={handle} />
+

package/src/routes/examples/events/input/+page.svelte

@@ -0,0 +1,16 @@
+<script>
+    import Select from '$lib/Select.svelte';
+
+    let items = [
+        { value: 'one', label: 'One' },
+        { value: 'two', label: 'Two' },
+        { value: 'three', label: 'Three' },
+    ];
+
+    function handle(value) {
+        console.log(value);
+    }
+</script>
+
+<Select {items} oninput={handle} />
+

package/src/routes/examples/events/loaded/+page.svelte

@@ -0,0 +1,23 @@
+<script>
+    import Select from '$lib/Select.svelte';
+
+    let items = [
+        { value: 'one', label: 'One' },
+        { value: 'two', label: 'Two' },
+        { value: 'three', label: 'Three' },
+    ];
+
+    function loadOptions() {
+        return new Promise((resolve) => {
+            setTimeout(() => {
+                resolve(JSON.parse(JSON.stringify(items)));
+            });
+        });
+    }
+
+    function handle(data) {
+        console.log(data);
+    }
+</script>
+
+<Select onloaded={handle} {loadOptions} />

package/src/routes/examples/props/class/+page.svelte

@@ -0,0 +1,17 @@
+<script>
+    import Select from '$lib/Select.svelte';
+
+    let items = [
+        { value: 'one', label: 'One' },
+        { value: 'two', label: 'Two' },
+        { value: 'three', label: 'Three' },
+    ];
+</script>
+
+<Select {items} class="foo bar" />
+
+<style>
+    :global(.foo) {
+        background: pink !important; 
+    }
+</style>

package/src/routes/examples/props/clearFilterTextOnBlur/+page.svelte

@@ -0,0 +1,13 @@
+<script>
+    import Select from '$lib/Select.svelte';
+
+    let items = [
+        { value: 'one', label: 'One' },
+        { value: 'two', label: 'Two' },
+        { value: 'three', label: 'Three' },
+    ];
+
+</script>
+
+<Select {items} clearFilterTextOnBlur={false} />
+<Select {items} multiple clearFilterTextOnBlur={false} />

package/src/routes/examples/props/clearable/+page.svelte

@@ -0,0 +1,13 @@
+<script>
+    import Select from '$lib/Select.svelte';
+
+    let items = [
+        { value: 'one', label: 'One' },
+        { value: 'two', label: 'Two' },
+        { value: 'three', label: 'Three' },
+    ];
+</script>
+
+<Select {items} clearable={false} />
+<br />
+<Select {items} clearable={true} />

package/src/routes/examples/props/closeListOnChange/+page.svelte

@@ -0,0 +1,12 @@
+<script>
+    import Select from '$lib/Select.svelte';
+
+    let items = [
+        { value: 'one', label: 'One' },
+        { value: 'two', label: 'Two' },
+        { value: 'three', label: 'Three' },
+    ];
+</script>
+
+<Select {items} closeListOnChange={false} multiple />
+

package/src/routes/examples/props/container-styles/+page.svelte

@@ -0,0 +1,11 @@
+<script>
+    import Select from '$lib/Select.svelte';
+
+    let items = [
+        { value: 'one', label: 'One' },
+        { value: 'two', label: 'Two' },
+        { value: 'three', label: 'Three' },
+    ];
+</script>
+
+<Select {items} containerStyles="background: pink !important;" />

package/src/routes/examples/props/debounce-wait/+page.svelte

@@ -0,0 +1,19 @@
+<script>
+    import Select from '$lib/Select.svelte';
+
+    let items = [
+        { value: 'one', label: 'One' },
+        { value: 'two', label: 'Two' },
+        { value: 'three', label: 'Three' },
+    ];
+
+    let loadOptionsCalled = false;
+
+    function loadOptions() {
+        loadOptionsCalled = true;
+        return Promise.resolve(items);
+    }    
+</script>
+
+<p>loadOptions called: {loadOptionsCalled}</p>
+<Select {loadOptions} debounceWait="2000" />

package/src/routes/examples/props/disabled/+page.svelte

@@ -0,0 +1,15 @@
+<script>
+    import Select from '$lib/Select.svelte';
+
+    let items = [
+        { value: 'one', label: 'One' },
+        { value: 'two', label: 'Two' },
+        { value: 'three', label: 'Three' },
+    ];
+
+    let disabled = $state(false);
+</script>
+
+<button onclick={() => disabled = !disabled}>Toggle disabled</button>
+
+<Select {items} {disabled} />

package/src/routes/examples/props/filter-text/+page.svelte

@@ -0,0 +1,14 @@
+<script>
+    import Select from '$lib/Select.svelte';
+
+    let items = [
+        { value: 'one', label: 'One' },
+        { value: 'two', label: 'Two' },
+        { value: 'three', label: 'Three' },
+    ];
+
+    let filterText;
+</script>
+
+<p>{filterText}</p>
+<Select {items} bind:filterText />

package/src/routes/examples/props/floating-config/+page.svelte

@@ -0,0 +1,42 @@
+<script>
+    import Select from '$lib/Select.svelte';
+
+    let items = [
+        { value: 'one', label: 'One' },
+        { value: 'two', label: 'Two' },
+        { value: 'three', label: 'Three' },
+    ];
+
+    let floatingConfig = {
+        strategy: 'fixed',
+    };
+
+    let topConfig = {
+        placement: 'top-start',
+    };
+</script>
+
+<div class="container">
+    <Select {items} {floatingConfig} --list-position="fixed" />
+</div>
+
+<div class="container tall">
+    <Select {items} floatingConfig={topConfig} />
+</div>
+
+<style>
+    .container {
+        margin: 0 0 20px;
+        overflow: hidden;
+        width: 300px;
+        background: grey;
+        padding: 20px;
+        height: 100px;
+        overflow-y: scroll;
+    }
+
+    .tall {
+        padding-top: 200px;
+        height: 300px;
+    }
+</style>

package/src/routes/examples/props/focused/+page.svelte

@@ -0,0 +1,16 @@
+<script>
+    import Select from '$lib/Select.svelte';
+    import { tick } from 'svelte';
+
+    let items = [
+        { value: 'one', label: 'One' },
+        { value: 'two', label: 'Two' },
+        { value: 'three', label: 'Three' },
+    ];
+
+    let focused = true;
+</script>
+
+<p>focused: {focused}</p>
+
+<Select {items} bind:focused />

package/src/routes/examples/props/group-header-selectable/+page.svelte

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

package/src/routes/examples/props/hide-empty-state/+page.svelte

@@ -0,0 +1,8 @@
+<script>
+    import Select from '$lib/Select.svelte';
+
+    let items = ['One', 'Two', 'Three'];
+</script>
+
+<Select {items} hideEmptyState />
+

package/src/routes/examples/props/id/+page.svelte

@@ -0,0 +1,15 @@
+<script>
+    import Select from '$lib/Select.svelte';
+
+    let items = [
+        { value: 'one', label: 'One' },
+        { value: 'two', label: 'Two' },
+        { value: 'three', label: 'Three' },
+    ];
+
+</script>
+
+<form>
+    <label for="foo">Foo</label>
+    <Select {items} id="foo" />
+</form>

package/src/routes/examples/props/input-attributes/+page.svelte

@@ -0,0 +1,11 @@
+<script>
+    import Select from '$lib/Select.svelte';
+
+    let items = [
+        { value: 'one', label: 'One' },
+        { value: 'two', label: 'Two' },
+        { value: 'three', label: 'Three' },
+    ];
+</script>
+
+<Select id="username" {items} inputAttributes={{ autocomplete: 'off' }} />