svelte-select-5 6.0.0

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

@@ -0,0 +1,15 @@
+<script>
+    import Select from '$lib/Select.svelte';
+
+    let items = [
+        { foo: '1', label: 'One' },
+        { foo: '2', label: 'Two' },
+        { foo: '3', label: 'Three' },
+    ];
+
+    let justValue;
+</script>
+
+<Select {items} itemId="foo" bind:justValue />
+
+<p>{justValue}</p>

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

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

package/src/routes/examples/props/just-value/+page.svelte

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

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

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

package/src/routes/examples/props/list-auto-width/+page.svelte

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

package/src/routes/examples/props/list-offset/+page.svelte

@@ -0,0 +1,21 @@
+<script>
+    import Select from '$lib/Select.svelte';
+
+    let items = [
+        { value: 'one', label: 'One' },
+        { value: 'two', label: 'Two' },
+        { value: 'three', label: 'Three' },
+    ];
+</script>
+
+<div>
+    <Select {items} listOffset={10}></Select>
+
+    
+</div>
+
+<style>
+    div {
+        display: flex;
+    }
+</style>

package/src/routes/examples/props/list-open/+page.svelte

@@ -0,0 +1,31 @@
+<script>
+    import Select from '$lib/Select.svelte';
+
+    let items = [
+        { value: 'one', label: 'One' },
+        { value: 'two', label: 'Two' },
+        { value: 'three', label: 'Three' },
+    ];
+
+    let listOpen = $state(false);
+    let show = $state(false);
+</script>
+
+<button
+    onpointerdown={(e) => {
+        e.preventDefault();
+        listOpen = !listOpen;
+    }}>Open</button>
+
+<Select {items} bind:listOpen />
+
+<br />
+
+<button
+    onclick={() => {
+        show = !show;
+    }}>Show Select</button>
+
+{#if show}
+    <Select {items} listOpen />
+{/if}

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

@@ -0,0 +1,16 @@
+<script>
+    import Select from '$lib/Select.svelte';
+    import Fuse from 'fuse.js';
+
+    let items = ['one', 'two', 'three'];
+
+    async function handleOptions(filterText) {
+        if (filterText.length === 0) return [...items];
+        
+        const fuse = new Fuse([...items]);
+
+        return fuse.search(filterText).map(({ item }) => item);
+    }
+</script>
+
+<Select loadOptions={handleOptions} debounceWait="0" />

package/src/routes/examples/props/loading/+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 loading = $state(true);
+</script>
+
+<button onclick={() => (loading = !loading)}>Toggle Loading</button>
+
+<Select {items} bind:loading />

package/src/routes/examples/props/multiFullItemClearable/+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} multiple multiFullItemClearable />
+

package/src/routes/examples/props/multiple/+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} multiple />
+

package/src/routes/examples/props/name/+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' },
+    ];
+
+    let name = 'numbers';
+</script>
+
+<Select {items} {name} />

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

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

package/src/routes/examples/props/placeholder-always-show/+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} placeholderAlwaysShow multiple />

package/src/routes/examples/props/required/+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' },
+    ];
+</script>
+
+<form onsubmit={(e) => e.preventDefault()}>
+    <Select {items} required />
+    <button type="submit">Submit</button>
+</form>

package/src/routes/examples/props/searchable/+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 searchable = $state(true);
+</script>
+
+<button onclick={() => searchable = !searchable}>Searchable: {searchable}</button>
+
+<Select {items} {searchable} />

package/src/routes/examples/props/show-chevron/+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>
+
+<Select {items} showChevron />
+
+<style>
+
+</style>

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

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

package/src/routes/examples/slots/chevron-icon/+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' },
+    ];
+</script>
+
+
+<Select {items} showChevron>
+    {#snippet chevronIcon({ listOpen })}
+        <div>{listOpen ? '⬆️' : '⬇️'}</div>
+    {/snippet}
+</Select>

package/src/routes/examples/slots/clear-icon/+page.svelte

@@ -0,0 +1,21 @@
+<script>
+    import Select from '$lib/Select.svelte';
+
+    let items = [
+        { value: 'one', label: 'One' },
+        { value: 'two', label: 'Two' },
+        { value: 'three', label: 'Three' },
+    ];
+</script>
+
+<Select {items}>
+    {#snippet clearIcon()}
+        <div class="clear-icon">❌</div>
+    {/snippet}
+</Select>
+
+<style>
+    .clear-icon {
+        cursor: default;
+    }
+</style>

package/src/routes/examples/slots/empty/+page.svelte

@@ -0,0 +1,18 @@
+<script>
+    import Select from '$lib/Select.svelte';
+
+    let items = [];
+</script>
+
+<Select {items}>
+    {#snippet empty()}
+        <div class="empty-message">Nothing to see here...</div>
+    {/snippet}
+</Select>
+
+<style>
+    .empty-message {
+        padding: 10px;
+        text-align: center;
+    }
+</style>

package/src/routes/examples/slots/input-hidden/+page.server.js

@@ -0,0 +1,10 @@
+export const prerender = false;
+
+/** @type {import('./$types').Actions} */
+export const actions = {
+    someaction: async ({ request }) => {
+        const data = await request.formData();
+        const demo = data.get('demo');
+        return { success: true, demo };
+    },
+};

package/src/routes/examples/slots/input-hidden/+page.svelte

@@ -0,0 +1,22 @@
+<script>
+    import Select from '$lib/Select.svelte';
+
+    let { form } = $props();
+
+    let value = $state(undefined);
+    let items = ['pizza', 'crisps', 'ice-cream'];
+</script>
+
+<form method="POST" action="?/someaction">
+    <Select {items} bind:value>
+        {#snippet inputHidden({ value })}
+            <input type="hidden" name="demo" value={value ? JSON.stringify(value) : ''} />
+        {/snippet}
+    </Select>
+
+    <button>Send</button>
+</form>
+
+{#if form?.success}
+    <p>Data: {form?.demo}</p>
+{/if}

package/src/routes/examples/slots/item/+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>
+
+<Select {items}>
+    {#snippet item({ item, index })}
+        <div>{index}: {item.label}</div>
+    {/snippet}
+</Select>

package/src/routes/examples/slots/list/+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 value = $state([]);
+
+    function handleClick(item) {
+        if (!value) value = [item];
+        else value = [...value, item]
+    }
+</script>
+
+<Select {items} bind:value multiple>
+    {#snippet list({ filteredItems })}
+        <div class="custom-list">
+            {#each filteredItems as item }
+                <span
+                    role="option"
+                    aria-selected={value?.some(v => v.value === item.value) ?? false}
+                    tabindex="0"
+                    onclick={() => handleClick(item)}
+                    onkeydown={(e) => { if (e.key === 'Enter' || e.key === ' ') handleClick(item); }}>
+                    {item.label}
+                </span>
+            {/each}
+        </div>
+    {/snippet}
+</Select>
+
+
+<style>
+    .custom-list {
+        display: flex;
+        flex-direction: column;
+        font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
+    }
+
+    span {
+        height: 50px;
+        display: flex;
+        align-items: center;
+        padding: 20px;
+    }
+</style>

package/src/routes/examples/slots/list-append/+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' },
+    ];
+</script>
+
+
+<Select {items} listOpen>
+    {#snippet listAppend()}
+        <div>* AFTER *</div>
+    {/snippet}
+</Select>

package/src/routes/examples/slots/list-prepend/+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' },
+    ];
+</script>
+
+
+<Select {items} listOpen>
+    {#snippet listPrepend()}
+        <div>* BEFORE *</div>
+    {/snippet}
+</Select>

package/src/routes/examples/slots/loading-icon/+page.svelte

@@ -0,0 +1,29 @@
+<script>
+    import Select from '$lib/Select.svelte';
+
+    let items = [
+        { value: 'one', label: 'One' },
+        { value: 'two', label: 'Two' },
+        { value: 'three', label: 'Three' },
+    ];
+</script>
+
+<Select {items} loading>
+    {#snippet loadingIcon()}
+        <div class="spin">★</div>
+    {/snippet}
+</Select>
+
+<style>
+    .spin {
+        animation: rotate 0.75s linear infinite;
+        transform-origin: center center;
+        transform: none;
+    }
+
+    @keyframes rotate {
+        100% {
+            transform: rotate(360deg);
+        }
+    }
+</style>

package/src/routes/examples/slots/multi-clear-icon/+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' },
+    ];
+</script>
+
+
+<Select {items} multiple>
+    {#snippet multiClearIcon()}
+        <div>❌</div>
+    {/snippet}
+</Select>

package/src/routes/examples/slots/prepend/+page.svelte

@@ -0,0 +1,22 @@
+<script>
+    import Select from '$lib/Select.svelte';
+
+    let items = [
+        { value: 'one', label: 'One' },
+        { value: 'two', label: 'Two' },
+        { value: 'three', label: 'Three' },
+    ];
+</script>
+
+
+<Select {items}>
+    {#snippet prepend()}
+        <div class="prepend-icon">💪</div>
+    {/snippet}
+</Select>
+
+<style>
+    .prepend-icon {
+        margin-right: 5px;
+    }
+</style>

package/src/routes/examples/slots/required/+page.svelte

@@ -0,0 +1,31 @@
+<script>
+    import Select from '$lib/Select.svelte';
+
+    let items = [
+        { value: 'one', label: 'One' },
+        { value: 'two', label: 'Two' },
+        { value: 'three', label: 'Three' },
+    ];
+</script>
+
+
+<Select {items} required>
+    {#snippet requiredSlot({ value })}
+        <div class="required">
+            REQUIRED
+        </div>
+    {/snippet}
+</Select>
+
+<style>
+    .required {
+        color: red;
+        position: absolute;
+        height: 40px;
+        line-height: 40px;
+        right: 0;
+        border: 1px solid;
+        padding: 0 15px;
+        background: #fff;
+    }
+</style>

package/src/routes/examples/slots/selection/+page.svelte

@@ -0,0 +1,25 @@
+<script>
+    import Select from '$lib/Select.svelte';
+
+    let items = [
+        { value: 'one', label: 'One' },
+        { value: 'two', label: 'Two' },
+        { value: 'three', label: 'Three' },
+    ];
+</script>
+
+
+<Select {items}>
+    {#snippet selection({ selection })}
+        <div>🎉 {selection.label} 🎉</div>
+    {/snippet}
+</Select>
+
+<br />
+<br />
+
+<Select {items} multiple>
+    {#snippet selection({ selection, index })}
+        <div>🎉 {index} : {selection.label} 🎉</div>
+    {/snippet}
+</Select>

package/static/nav-icon.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000"><path d="M 3 5 A 1.0001 1.0001 0 1 0 3 7 L 21 7 A 1.0001 1.0001 0 1 0 21 5 L 3 5 z M 3 11 A 1.0001 1.0001 0 1 0 3 13 L 21 13 A 1.0001 1.0001 0 1 0 21 11 L 3 11 z M 3 17 A 1.0001 1.0001 0 1 0 3 19 L 21 19 A 1.0001 1.0001 0 1 0 21 17 L 3 17 z" fill="#000000"/></svg>

package/svelte.config.js

@@ -0,0 +1,10 @@
+import adapter from '@sveltejs/adapter-auto';
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+	kit: {
+		adapter: adapter()
+	}
+};
+
+export default config;

package/tailwind.config.cjs

@@ -0,0 +1,4 @@
+module.exports = {
+    mode: 'jit',
+    purge: ['./src/**/*.svelte'],
+};