diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml index 08e3c7b9..75d73e4a 100644 --- a/.pre-commit-config.yaml +++ b/.pre-commit-config.yaml @@ -38,7 +38,7 @@ repos: exclude: changelog\.md - repo: https://github.com/pre-commit/mirrors-eslint - rev: v9.26.0 + rev: v9.27.0 hooks: - id: eslint types: [file] diff --git a/package.json b/package.json index efeaaa67..043f6d6b 100644 --- a/package.json +++ b/package.json @@ -16,7 +16,7 @@ "package": "svelte-package", "serve": "vite build && vite preview", "check": "svelte-check src", - "test": "vitest --run --coverage tests/unit/*.ts && npm run test:e2e", + "test": "vitest run && playwright test", "test:unit": "vitest tests/unit/*.ts", "test:e2e": "playwright test tests/*.test.ts", "changelog": "npx auto-changelog --package --output changelog.md --hide-empty-releases --hide-credit --commit-limit false", diff --git a/readme.md b/readme.md index b5952af8..936db142 100644 --- a/readme.md +++ b/readme.md @@ -8,7 +8,7 @@ [![Tests](https://github.com/janosh/svelte-multiselect/actions/workflows/test.yml/badge.svg)](https://github.com/janosh/svelte-multiselect/actions/workflows/test.yml) [![GitHub Pages](https://github.com/janosh/svelte-multiselect/actions/workflows/gh-pages.yml/badge.svg)](https://github.com/janosh/svelte-multiselect/actions/workflows/gh-pages.yml) [![NPM version](https://img.shields.io/npm/v/svelte-multiselect?logo=NPM&color=purple)](https://npmjs.com/package/svelte-multiselect) -[![Needs Svelte version](https://img.shields.io/npm/dependency-version/svelte-multiselect/svelte?color=teal&logo=Svelte&label=Svelte)](https://github.com/sveltejs/svelte/blob/master/packages/svelte/CHANGELOG.md) +[![Needs Svelte version](https://img.shields.io/npm/dependency-version/svelte-multiselect/peer/svelte?color=teal&logo=Svelte&label=Svelte)](https://github.com/sveltejs/svelte/blob/master/packages/svelte/CHANGELOG.md) [![REPL](https://img.shields.io/badge/Svelte-REPL-blue?label=Try%20it!)](https://svelte.dev/repl/a5a14b8f15d64cb083b567292480db05) [![Open in StackBlitz](https://img.shields.io/badge/Open%20in-StackBlitz-darkblue?logo=stackblitz)](https://stackblitz.com/github/janosh/svelte-multiselect) diff --git a/src/app.css b/src/app.css index c7433651..5c8a2a39 100644 --- a/src/app.css +++ b/src/app.css @@ -2,6 +2,7 @@ --night: #0b0b1b; --blue: cornflowerblue; --text-color: #ccc; + --main-max-width: 50em; --sms-active-color: rgba(255, 255, 255, 0.1); --sms-focus-border: 1pt solid cornflowerblue; @@ -28,7 +29,7 @@ main { margin: auto; margin-bottom: 3em; width: 100%; - max-width: 50em; + max-width: var(--main-max-width); } button, a.btn { @@ -139,7 +140,7 @@ div.multiselect.invalid { aside.toc.desktop { position: fixed; top: 3em; - left: calc(50vw + 50em / 2); + left: calc(50vw + var(--main-max-width) / 2); max-width: 16em; } diff --git a/src/lib/CmdPalette.svelte b/src/lib/CmdPalette.svelte index ba049cf6..e917c107 100644 --- a/src/lib/CmdPalette.svelte +++ b/src/lib/CmdPalette.svelte @@ -1,7 +1,5 @@ @@ -80,22 +73,18 @@ onadd={trigger_action_and_close} onkeydown={toggle} {...rest} - > - {#snippet children({ option })} - - {#if children_render} - {@render children_render()} - {:else} - {option.label} - {/if} - {/snippet} - + --sms-bg="var(--sms-options-bg)" + --sms-width="min(20em, 90vw)" + --sms-max-width="none" + --sms-placeholder-color="lightgray" + --sms-options-margin="1px 0" + --sms-options-border-radius="0 0 1ex 1ex" + /> {/if} diff --git a/src/lib/MultiSelect.svelte b/src/lib/MultiSelect.svelte index 5a75274e..92708baf 100644 --- a/src/lib/MultiSelect.svelte +++ b/src/lib/MultiSelect.svelte @@ -1,7 +1,7 @@ 1} ondragstart={dragstart(idx)} + ondragover={(event) => { + event.preventDefault() // needed for ondrop to fire + }} ondrop={drop(idx)} ondragenter={() => (drag_idx = idx)} class:active={drag_idx === idx} @@ -674,6 +723,7 @@ {#if (searchText && noMatchingOptionsMsg) || options?.length > 0}