Move examples to new src/routes/demos dir

.pre-commit-config.yaml

@@ -38,8 +38,7 @@ repos:
     hooks:
       - id: eslint
         types: [file]
-        files: \.(svelte|js)$
-        args: [--plugin, eslint-plugin-svelte3]
+        files: \.(svelte|js|ts)$
         additional_dependencies:
           - eslint
           - svelte

readme.md

@@ -1,6 +1,6 @@
 <h1 align="center">
-  <img src="https://raw.githubusercontent.com/janosh/svelte-toc/main/static/favicon.svg" alt="Svelte MultiSelect" height=60>
-  <br>&ensp;Svelte MultiSelect
+  <img src="https://raw.githubusercontent.com/janosh/svelte-multiselect/main/static/favicon.svg" alt="Svelte MultiSelect" height="60" width="60">
+  <br class="hide-in-docs">&ensp;Svelte MultiSelect
 </h1>
 
 <h4 align="center">

static/global.css → src/app.css

@@ -34,10 +34,12 @@ main {
   margin: auto;
   margin-bottom: 3em;
   width: 100%;
+  max-width: 50em;
 }
 a {
   color: var(--blue);
   text-decoration: none;
+  transition: 0.2s;
 }
 a:hover {
   color: orange;
@@ -60,6 +62,9 @@ pre {
 a code {
   color: white;
 }
+ul li {
+  margin: 1ex 0;
+}
 
 div.table {
   overflow: scroll;
@@ -76,6 +81,14 @@ tbody tr:nth-child(odd) {
   background: black;
 }
 
+h1 {
+  display: flex;
+  font-size: clamp(2rem, 2rem + 2vw, 3rem);
+  place-items: center;
+  place-content: center;
+  margin: 1.2em 0;
+}
+
 :where(h2, h3, h4, h5, h6) {
   scroll-margin-top: 50px;
   transition: 0.3s;

src/app.html

@@ -17,7 +17,6 @@
     <meta property="og:site_name" content="Svelte MultiSelect" />
 
     <link rel="icon" href="/favicon.svg" />
-    <link rel="stylesheet" href="/global.css" />
     <link rel="stylesheet" href="/prism-vsc-dark-plus.css" />
 
     <!-- see netlify.toml for this script's origin -->

src/routes/__error.svelte

@@ -1,6 +1,61 @@
-<script lang="ts">
-  import { goto } from '$app/navigation'
-  import { onMount } from 'svelte'
+<script lang="ts" context="module">
+  import { dev } from '$app/env'
+  import type { ErrorLoad } from '@sveltejs/kit'
+
+  export const load: ErrorLoad = ({ error, status }) => ({
+    props: { error, status },
+  })
+</script>
 
-  onMount(() => goto(`/`)) // go back to index page on missing routes
+<script lang="ts">
+  export let status: number
+  export let error: Error
 </script>
+
+<svelte:head>
+  <title>{status} error</title>
+</svelte:head>
+
+<div>
+  {#if status === 404}
+    <h1>{error.name} {status}: Page not found 😅</h1>
+  {:else if status >= 500}
+    <h1>{error.name} {status}</h1>
+    <p>
+      This may be our fault. If page reloading doesn't help, please raise an issue on
+      <a href="https://github.com/janosh/svelte-multiselect/issues">GitHub</a>. Thanks! 🙏
+    </p>
+  {:else}
+    <h1>⚠️ {error.name} {status}</h1>
+  {/if}
+  <p>
+    Return to <a sveltekit:prefetch href="/">index page</a>.
+  </p>
+
+  {#if dev && error?.stack}
+    <h2>Stack Trace</h2>
+    <pre>{error.stack}</pre>
+  {/if}
+</div>
+
+<style>
+  div {
+    font-size: 1.2em;
+    max-width: 45em;
+    padding: 5em 3em 1em;
+    margin: auto;
+  }
+  p {
+    text-align: center;
+    max-width: 35em;
+    margin: auto;
+  }
+  pre {
+    overflow: scroll;
+    font-size: 0.9em;
+    white-space: pre-wrap;
+    background: var(--accentBg);
+    padding: 5pt 1em;
+    border-radius: 3pt;
+  }
+</style>

src/routes/__layout.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+  import GitHubCorner from 'svelte-github-corner'
+  import '../app.css'
+</script>
+
+<GitHubCorner href="https://github.com/janosh/svelte-multiselect" />
+
+<slot />

src/routes/demos/__layout.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+  import { page } from '$app/stores'
+
+  const routes = Object.keys(import.meta.glob(`./*.svx`)).map((filename) =>
+    filename.split(`.`)[1].split(`/`).at(-1)
+  ) as string[]
+
+  $: isCurrent = (path: string) => {
+    if (path === $page.url.pathname) return `page`
+    if (path !== `/` && $page.url.pathname.includes(path)) return `page`
+    return undefined
+  }
+</script>
+
+<a href="/" sveltekit:prefetch aria-label="Back to index page">&laquo; back</a>
+<h1>
+  <img src="/favicon.svg" alt="Svelte MultiSelect" height="50" width="50" />&ensp;Svelte
+  MultiSelect
+</h1>
+
+<p>Other examples</p>
+<nav>
+  {#each routes as route, idx}
+    {#if idx > 0}<strong>&bull;</strong>{/if}
+    <a href={route} sveltekit:prefetch aria-current={isCurrent(route)}>/{route}</a>
+  {/each}
+</nav>
+
+<main>
+  <slot />
+</main>
+
+<style>
+  h1,
+  p {
+    text-align: center;
+    display: flex;
+    place-content: center;
+    place-items: center;
+  }
+  a[href='/'] {
+    font-size: 16pt;
+    position: absolute;
+    top: 2em;
+    left: 2em;
+    background-color: rgba(255, 255, 255, 0.1);
+    padding: 1pt 5pt;
+    border-radius: 3pt;
+    transition: 0.2s;
+  }
+  nav > a {
+    padding-bottom: 2pt;
+  }
+  nav > a[aria-current='page'] {
+    border-bottom: 1px solid lightgray;
+  }
+  a:hover {
+    background-color: rgba(255, 255, 255, 0.2);
+  }
+  nav {
+    display: flex;
+    gap: 1ex;
+    place-content: center;
+    margin: 1em 0 3em;
+  }
+</style>

src/routes/css-classes.svx → src/routes/demos/css-classes.svx

@@ -1,13 +1,9 @@
 <script>
-  import MultiSelect from '../lib'
-  import { fruits } from '../options'
+  import MultiSelect from '$lib'
+  import { fruits } from '$src/options'
 </script>
 
-<main>
-
-# External CSS Classes
-
-When using CSS frameworks like Tailwind, you can customize the appearance of `<MultiSelect />` through the following classes:
+## External CSS Classes
 
 ```svelte
 <MultiSelect
@@ -22,7 +18,11 @@ When using CSS frameworks like Tailwind, you can customize the appearance of `<M
 />
 ```
 
+<br />
+
+<label for="fruits"><strong>Fruit Picker</strong></label>
 <MultiSelect
+  id="fruits"
   options={fruits}
   outerDivClass="foo"
   ulSelectedClass="bar"
@@ -33,4 +33,6 @@ When using CSS frameworks like Tailwind, you can customize the appearance of `<M
   liActiveOptionClass="mom"
 />
 
-</main>
+<br />
+
+When using CSS frameworks like Tailwind, you can customize the appearance of `<MultiSelect />` through the following classes:

src/routes/disabled.svx → src/routes/demos/disabled.svx

@@ -1,10 +1,9 @@
 <script>
-  import MultiSelect from '../lib'
+  import MultiSelect from '$lib'
+  import { fruits } from '$src/options'
 </script>
 
-<main>
-
-# Disabled
+## Disabled
 
 ```svelte
 <MultiSelect
@@ -17,13 +16,15 @@
 </MultiSelect>
 ```
 
+<br />
+
+<label for="disabled"><strong>Disabled MultiSelect</strong></label>
 <MultiSelect
+  id="disabled"
   options={[{ label: `Svelte`, value: `Svelte`, preselected: true }]}
   disabled
   disabledTitle="Super special disabled message"
   --sms-disabled-bg="darkred"
 >
   <span slot="disabled-icon">This component is disabled. Get outta here!</span>
 </MultiSelect>
-
-</main>

src/routes/max-select.svx → src/routes/demos/max-select.svx

@@ -1,19 +1,10 @@
 <script>
-  import MultiSelect from '../lib'
-  import { languages } from '../options'
+  import MultiSelect from '$lib'
+  import { languages } from '$src/options'
+  import LanguageSlot from '$src/components/LanguageSlot.svelte'
 </script>
 
-<main>
-
-# Disabled MultiSelect
-
-Test that component in disabled state:
-
-- has attribute aria-disabled
-- has disabled title
-- has `<input disabled="true">`
-- renders no buttons
-- renders disabled slot
+## Disabled MultiSelect
 
 ```svelte
 <MultiSelect
@@ -23,10 +14,22 @@ Test that component in disabled state:
 />
 ```
 
+<br />
+
 <MultiSelect
   options={languages}
   maxSelect={10}
   placeholder="What languages do you know?"
-/>
+>
+  <LanguageSlot let:option {option} slot="selected" />
+</MultiSelect>
+
+<br />
 
-</main>
+Test that component in disabled state:
+
+- has attribute aria-disabled
+- has disabled title
+- has `<input disabled="true">`
+- renders no buttons
+- renders disabled slot

src/routes/ui.svx → src/routes/demos/ui.svx

@@ -1,11 +1,31 @@
 <script>
-  import MultiSelect from '../lib'
-  import { fruits } from '../options'
+  import MultiSelect from '$lib'
+  import { fruits } from '$src/options'
 </script>
 
-<main>
+## User interface
 
-# User interface
+```svelte
+<MultiSelect
+  options={fruits}
+  placeholder="Pick your favorite fruits"
+  removeAllTitle="Delete all fruits"
+  invalid
+/>
+```
+
+<br />
+
+<label for="fruits"><strong>Fruit Picker</strong></label>
+<MultiSelect
+  id="fruits"
+  options={fruits}
+  placeholder="Pick your favorite fruits!"
+  removeAllTitle="Delete all fruits"
+  invalid
+/>
+
+<br />
 
 This page is mostly used for testing. It checks that:
 
@@ -15,29 +35,12 @@ This page is mostly used for testing. It checks that:
   - has custom title (if supplied with `removeAllTitle`)
 - component can be focused
   - which opens dropdown
-  - and closes dropdown when input looses focus
+  - and closes dropdown when user tabs out of input or clicks outside component
+  - importantly, we don't close dropdown when input looses focus
 - filters options to only list matches when entering text
 - accessibility
   - input is `aria-invalid` when component has `invalid=true`
   - has `aria-expanded='false'` when closed
   - has `aria-expanded='true'` when open
   - options have `aria-selected='false'` and selected items have `aria-selected='true`
   - invisible `input.form-control` is `aria-hidden`
-
-```svelte
-<MultiSelect
-  options={fruits}
-  placeholder="Pick your favorite fruits"
-  removeAllTitle="Delete all fruits"
-  invalid
-/>
-```
-
-<MultiSelect
-  options={fruits}
-  placeholder="Pick your favorite fruits"
-  removeAllTitle="Delete all fruits"
-  invalid
-/>
-
-</main>