svelte-select-5 6.0.0

package/src/lib/filter.js

@@ -0,0 +1,38 @@
+export default function filter({
+    loadOptions,
+    filterText,
+    items,
+    multiple,
+    value,
+    itemId,
+    groupBy,
+    filterSelectedItems,
+    itemFilter,
+    convertStringItemsToObjects,
+    filterGroupedItems,
+    label,
+}) {
+    if (items && loadOptions) return items;
+    if (!items) return [];
+
+    if (items && items.length > 0 && typeof items[0] !== 'object') {
+        items = convertStringItemsToObjects(items);
+    }
+
+    let filterResults = items.filter((item) => {
+        let matchesFilter = itemFilter(item[label], filterText, item);
+        if (matchesFilter && multiple && value?.length) {
+            matchesFilter = !value.some((x) => {
+                return filterSelectedItems ? x[itemId] === item[itemId] : false;
+            });
+        }
+
+        return matchesFilter;
+    });
+
+    if (groupBy) {
+        filterResults = filterGroupedItems(filterResults);
+    }
+
+    return filterResults;
+}

package/src/lib/get-items.js

@@ -0,0 +1,25 @@
+export default async function getItems({ dispatch, loadOptions, convertStringItemsToObjects, filterText }) {
+    let res = await loadOptions(filterText).catch((err) => {
+        console.warn('svelte-select loadOptions error :>> ', err);
+        dispatch('error', { type: 'loadOptions', details: err });
+    });
+
+    if (res && !res.cancelled) {        
+        if (res) {
+            if (res && res.length > 0 && typeof res[0] !== 'object') {
+                res = convertStringItemsToObjects(res);
+            }
+            
+            dispatch('loaded', { items: res });
+        } else {
+            res = [];
+        }
+
+        return {
+            filteredItems: res,
+            loading: false,
+            focused: true,
+            listOpen: true,
+        };
+    }
+}

package/src/lib/index.js

@@ -0,0 +1 @@
+export { default as default } from './Select.svelte';

package/src/lib/tailwind.css

@@ -0,0 +1,130 @@
+@import 'tailwindcss/base';
+
+.svelte-select {
+    @apply border rounded box-border h-10 relative flex items-center px-4 py-0 bg-white m-0	w-full
+        hover:border-gray-400;
+}
+
+.svelte-select input {
+    @apply cursor-default border-none text-gray-600 h-10 leading-10 px-4 py-0 bg-transparent text-sm absolute left-0 m-0 w-full 
+        focus:outline-none hover:border-gray-400;
+}
+
+.svelte-select.focused {
+    @apply border-blue-600;
+}
+
+.svelte-select.disabled {
+    @apply bg-gray-200 border-gray-200 text-gray-600;
+}
+
+.svelte-select.disabled input {
+    @apply placeholder:text-gray-400 placeholder:opacity-100;
+}
+
+.svelte-select .selected-item {
+    @apply leading-10 h-10 overflow-x-hidden pr-5
+        focus:outline-none;
+}
+
+.svelte-select .icons {
+    @apply absolute flex items-center right-0 translate-y-0 text-gray-200 pointer-events-none top-0 bottom-0;
+}
+
+.svelte-select .icons > * {
+    @apply transition-colors ease-in-out duration-200;
+}
+
+.svelte-select .clear-select {
+    @apply pointer-events-auto;
+}
+
+.svelte-select.focused .icons,
+.svelte-select .chevron:hover,
+.svelte-select .clear-select:hover {
+    @apply text-gray-600;
+}
+
+.svelte-select .clear-select {
+    @apply px-2 h-5 text-gray-300 flex-none w-9;
+}
+
+.svelte-select .chevron {
+    @apply flex pt-0 pr-2 pl-2 border-l-2 w-9 h-5 text-gray-300;
+}
+
+.svelte-select.multi {
+    @apply pr-9 pl-4 h-auto flex-wrap items-stretch;
+}
+
+.svelte-select.multi input {
+    @apply p-0 relative m-0;
+}
+
+.svelte-select.error {
+    @apply border-red-500 bg-white;
+}
+
+.a11y-text {
+    @apply sr-only;
+}
+
+.list {
+    @apply shadow-md rounded-sm max-h-64 overflow-y-auto bg-white border-none absolute z-10 w-full left-0 right-0;
+}
+
+.list .list-group-title {
+    @apply text-gray-400 cursor-default text-sm font-medium h-10 leading-10 px-5 overflow-ellipsis whitespace-nowrap uppercase;
+}
+
+.list .empty {
+    @apply text-center py-5 text-gray-500;
+}
+
+.item {
+    @apply cursor-default h-10 leading-10 px-5 text-gray-800 overflow-ellipsis overflow-hidden whitespace-nowrap;
+}
+
+.item.group-item {
+    @apply px-10;
+}
+
+.item:active {
+    @apply bg-blue-200;
+}
+
+.item.active {
+    @apply bg-blue-600 text-white;
+}
+
+.item.not-selectable {
+    @apply text-gray-300;
+}
+
+.item.first {
+    @apply rounded-t-sm;
+}
+
+.item.hover:not(.active) {
+    @apply bg-blue-100;
+}
+
+.multi input {
+    flex: 1 1 40px;
+}
+
+.multi-item {
+    @apply bg-gray-100 mt-1 mr-1 border border-gray-200 rounded-sm h-8 leading-8 flex cursor-default pr-1 pl-1 max-w-full items-center mr-1 overflow-hidden overflow-ellipsis whitespace-nowrap;
+}
+
+.multi-item.disabled {
+    @apply hover:bg-gray-300 hover:text-gray-500;
+}
+
+.multi-item-clear {
+    @apply flex items-center justify-center w-5;
+}
+
+.list-item {
+    @apply list-none;
+}

package/src/post-prepare.cjs

@@ -0,0 +1,6 @@
+const { rm } = require('fs/promises');
+const path = require("path");
+
+(async () => {
+    await rm(path.join(__dirname, '/lib/no-styles/'), { recursive: true });
+})();

package/src/remove-styles.cjs

@@ -0,0 +1,22 @@
+const { writeFile, mkdir } = require('fs/promises');
+const path = require("path");
+const { find } = require("find-in-files");
+
+const USAGE_PATTERN = /((.|\n)*)(?=<style)/;
+const SOURCE_FOLDER = path.join(__dirname, 'lib');
+
+(async () => {
+    const searchResults = await find(USAGE_PATTERN, SOURCE_FOLDER, '.svelte$');
+    let promises = [mkdir(path.join(__dirname, '/lib/no-styles'), { recursive: true })];
+
+    Object.keys(searchResults).forEach((key) => {
+        let fileName = key.split('/').pop();
+        if (fileName === 'Select.svelte') {
+            searchResults[key].matches[0] = searchResults[key].matches[0].replace('./filter', '../filter');
+            searchResults[key].matches[0] = searchResults[key].matches[0].replace('./get-items', '../get-items');
+        }
+        promises.push(writeFile(path.join(__dirname, '/lib/no-styles', fileName), searchResults[key].matches[0]));
+    });
+
+    const all = await Promise.all(promises);
+})();

package/src/routes/+layout.js

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

package/src/routes/+layout.svelte

@@ -0,0 +1,263 @@
+<script>
+    import { page, navigating } from '$app/stores';
+
+    import { HighlightSvelte } from 'svelte-highlight';
+    import highlightStyles from 'svelte-highlight/styles/atom-one-dark';
+
+    let { children } = $props();
+
+    const _props = import.meta.glob('./examples/props/*/*.svelte', { as: 'raw' });
+    const _slots = import.meta.glob('./examples/slots/*/*.svelte', { as: 'raw' });
+    const _events = import.meta.glob('./examples/events/*/*.svelte', { as: 'raw' });
+    const _advanced = import.meta.glob('./examples/advanced/*/*.svelte', { as: 'raw' });
+
+    let source = $state(null);
+    let showNav = $state(false);
+
+    function buildLinks(obj) {
+        return Object.keys(obj).map((key) => {
+            const sp = key.split('/');
+            const name = sp[3].split('.')[0];
+            return {
+                href: `${sp[1]}/${sp[2]}/` + name,
+                name: name.replace(/-./g, (x) => x[1].toUpperCase()),
+                source: obj[key],
+            };
+        });
+    }
+
+    const pascalToSpaced = (s) => {
+        return s.replace(/([A-Z])/g, ' $1').replace(/^./, (str) => str.toUpperCase());
+    };
+
+    async function handleExampleCode(newPage) {
+        source = null;
+
+        if (!newPage?.route?.id) return;
+
+        if (newPage?.route?.id?.includes('examples/')) {
+            const s = newPage.route.id.split('/');
+            const file = setup[s[2]].find((i) => i.href.split('/').pop() === s[3]);
+            const raw = await file.source();
+            source = raw.replace('$lib/Select.svelte', 'svelte-select');
+        }
+    }
+
+    function handleNav() {
+        showNav = !showNav;
+    }
+
+    let setup = $derived({
+        props: buildLinks(_props),
+        slots: buildLinks(_slots),
+        events: buildLinks(_events),
+        advanced: buildLinks(_advanced),
+    });
+
+    let route = $derived($page.route.id.substring(1));
+
+    $effect(() => {
+        if ($navigating) showNav = false;
+    });
+
+    $effect(() => {
+        handleExampleCode($page);
+    });
+</script>
+
+<svelte:head>
+    {@html highlightStyles}
+</svelte:head>
+
+<div class="container">
+    <button onclick={handleNav} class="show-nav" aria-label="Toggle navigation">
+        <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="currentcolor" /></svg>
+    </button>
+
+    <nav class:show={showNav} class:navigating={$navigating}>
+        <ul>
+            <li><a class:active={$page.route.id === 'examples'} href="/">Home</a></li>
+        </ul>
+
+        <h2>Props</h2>
+        <ul>
+            {#each setup.props as { href, name }}
+                <li><a class:active={route === href} href={`/${href}`}>{name}</a></li>
+            {/each}
+        </ul>
+
+        <h2>Slots</h2>
+        <ul>
+            {#each setup.slots as { href, name }}
+                <li><a class:active={route === href} href={`/${href}`}>{name}</a></li>
+            {/each}
+        </ul>
+
+        <h2>Events</h2>
+        <ul>
+            {#each setup.events as { href, name }}
+                <li><a class:active={route === href} href={`/${href}`}>{name}</a></li>
+            {/each}
+        </ul>
+
+        <h2>Advanced</h2>
+        <ul>
+            {#each setup.advanced as { href, name }}
+                <li><a class:active={route === href} href={`/${href}`}>{pascalToSpaced(name)}</a></li>
+            {/each}
+        </ul>
+    </nav>
+
+    <div class="content" class:spinning={$navigating}>
+        <img src="/svelte-select.png" alt="Svelte Select Logo" class="spinner" />
+
+        {#if !$navigating}
+            {@render children()}
+
+            {#if source}
+                <HighlightSvelte code={source} />
+            {/if}
+        {/if}
+    </div>
+</div>
+
+<style>
+    .show-nav {
+        position: fixed;
+        bottom: 20px;
+        right: 20px;
+        width: 40px;
+        background: #ff3e00;
+        border: none;
+        border-radius: 6px;
+        padding: 5px 8px;
+        color: #fff;
+        display: flex;
+    }
+
+    nav {
+        display: none;
+        position: fixed;
+        top: 0;
+        right: 0;
+        left: 0;
+        height: 100vh;
+        flex-direction: column;
+        background: #fff;
+        overflow-y: scroll;
+        position: fixed;
+        z-index: 1;
+    }
+
+    nav.show {
+        display: flex;
+    }
+
+    nav.show.navigating {
+        display: none;
+    }
+
+    .container {
+        display: flex;
+        flex-direction: column;
+    }
+
+    h2 {
+        margin: 0;
+        font-size: 16px;
+        padding: 10px;
+        border-bottom: 1px solid #f3f1fd;
+    }
+
+    ul {
+        padding: 0;
+        margin: 0 0 10px;
+        list-style: none;
+    }
+
+    li {
+        display: flex;
+        flex-direction: column;
+        border-bottom: 1px solid #f3f1fd;
+    }
+
+    a {
+        color: #696d75;
+        padding: 10px;
+        text-decoration: none;
+        font-size: 16px;
+    }
+
+    a.active {
+        background: #f3f1fd;
+        color: black;
+        font-weight: bold;
+    }
+
+    .content {
+        padding: 20px;
+    }
+
+    .content .spinner {
+        display: none;
+    }
+
+    .content.spinning {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .content.spinning .spinner {
+        display: block;
+        animation-name: spin;
+        animation-duration: 550ms;
+        animation-iteration-count: infinite;
+        animation-timing-function: linear;
+        width: 30px;
+    }
+
+    @keyframes spin {
+        from {
+            transform: rotate(0deg);
+        }
+        to {
+            transform: rotate(360deg);
+        }
+    }
+
+    @media (min-width: 800px) {
+        .show-nav {
+            display: none;
+        }
+
+        nav,
+        nav.navigating {
+            display: flex;
+            flex-direction: column;
+            width: 250px;
+            border-right: 1px solid #f3f1fd;
+            right: unset;
+        }
+
+        .container {
+            display: flex;
+            gap: 30px;
+        }
+
+        .content {
+            position: fixed;
+            left: 250px;
+            right: 0;
+            top: 0;
+            bottom: 0;
+            overflow-y: auto;
+            padding: 30px;
+            flex-grow: 1;
+        }
+    }
+</style>

package/src/routes/+page.js

@@ -0,0 +1,5 @@
+import { redirect } from '@sveltejs/kit';
+
+export async function load() {
+    throw redirect(301, "/examples");
+}

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

@@ -0,0 +1,84 @@
+<div class="container">
+    <header>
+        <img src="/svelte-select.png" alt="Svelte Select" />
+
+        <aside>
+            <h1>Svelte Select /</h1>
+            <h2>Examples</h2>
+        </aside>
+    </header>
+
+    <div class="badges">
+        <a href="https://npmjs.org/package/svelte-select">
+            <img src="https://badgen.now.sh/npm/v/svelte-select" alt="version" />
+        </a>
+        <a href="https://npmjs.org/package/svelte-select">
+            <img src="https://badgen.now.sh/npm/dm/svelte-select" alt="downloads" />
+        </a>
+        <a href="https://github.com/rob-balfre/svelte-select">
+            <img src="https://badgen.net/badge/icon/github?icon=github&label" alt="downloads" />
+        </a>
+    </div>
+</div>
+
+<style>
+    .container {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+
+    header {
+        display: flex;
+        gap: 10px;
+        margin-bottom: 20px;
+    }
+
+    header img {
+        width: 50px;
+    }
+
+    h1 {
+        font-size: 16px;
+        margin: 0;
+        text-transform: uppercase;
+        color: #999;
+    }
+
+    h2 {
+        margin: 0;
+        font-size: 36px;
+    }
+
+    .badges {
+        display: flex;
+        gap: 10px;
+    }
+
+    .badges a {
+        display: flex;
+    }
+
+    @media (min-width: 800px) {
+        
+        header img {
+            width:93px;
+            margin: 0;
+        }
+
+        aside {
+            display: flex;
+            flex-direction: column;
+            justify-content: flex-end;
+        }
+
+        h1 {
+            font-size: 24px;
+            line-height: 0px;
+        }
+
+        h2 {
+            font-size: 68px;
+        }
+    }
+</style>

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

@@ -0,0 +1,36 @@
+<script>
+    import Select from '$lib/Select.svelte';
+
+    let filterText = $state('');
+
+    let items = $state([
+        { value: 1, label: 'name 1' },
+        { value: 2, label: 'name 2' },
+        { value: 3, label: 'name 3' },
+        { value: 4, label: 'name 4' },
+        { value: 5, label: 'name 5' },
+    ]);
+
+    function handleFilter(filteredItems) {
+        if (filteredItems.length === 0 && filterText.length > 0) {
+            const prev = items.filter((i) => !i.created);
+            items = [...prev, { value: filterText, label: filterText, created: true }];
+        }
+    }
+
+    function handleChange(value) {
+        items = items.map((i) => {
+            delete i.created;
+            return i;
+        });
+    }
+</script>
+
+<Select onchange={handleChange} onfilter={handleFilter} bind:filterText {items}>
+    {#snippet item({ item })}
+        <div>
+            {item.created ? 'Add new: ' : ''}
+            {item.label}
+        </div>
+    {/snippet}
+</Select>

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

@@ -0,0 +1,38 @@
+<script>
+    import Select from '$lib/Select.svelte';
+
+    let filterText = $state('');
+    let value = $state(null);
+
+    let items = $state([
+        { value: 1, label: 'name 1' },
+        { value: 2, label: 'name 2' },
+        { value: 3, label: 'name 3' },
+        { value: 4, label: 'name 4' },
+        { value: 5, label: 'name 5' },
+    ]);
+
+    function handleFilter(filteredItems) {
+        if (value?.find(i => i.label === filterText)) return;
+        if (filteredItems.length === 0 && filterText.length > 0) {
+            const prev = items.filter((i) => !i.created);
+            items = [...prev, { value: filterText, label: filterText, created: true }];
+        }
+    }
+
+    function handleChange(newValue) {
+        items = items.map((i) => {
+            delete i.created;
+            return i;
+        });
+    }
+</script>
+
+<Select onchange={handleChange} multiple onfilter={handleFilter} bind:filterText bind:value {items}>
+    {#snippet item({ item })}
+        <div>
+            {item.created ? 'Add new: ' : ''}
+            {item.label}
+        </div>
+    {/snippet}
+</Select>

package/src/routes/examples/advanced/floating-ui/+page.svelte

@@ -0,0 +1,22 @@
+<script>
+    import Select from '$lib/Select.svelte';
+
+    let items = ['One', 'Two', 'Three'];
+</script>
+
+<div class="box"></div>
+
+<div style="position:fixed; left: 300px; top: 100px; width: 400px">
+    <Select
+        {items}
+        floatingConfig={{
+            strategy: 'fixed',
+        }} />
+</div>
+
+
+<style>
+    .box {
+        height: 300px;
+    }
+</style>

package/src/routes/examples/advanced/form-action/+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 foobar = data.get('foobar');
+        return { success: true, foobar };
+    },
+};