svelte-multiselect 11.1.1 → 11.2.0

package/dist/CircleSpinner.svelte

@@ -8,7 +8,8 @@ let { color = `cornflowerblue`, duration = `1.5s`, size = `1em` } = $props();
   {color}"
   style:width={size}
   style:height={size}
-></div>
+>
+</div>
 
 <style>
   div {

package/dist/CmdPalette.svelte

@@ -1,6 +1,6 @@
-<script lang="ts">import { fade } from 'svelte/transition';
-import Select from './MultiSelect.svelte';
-let { actions, triggers = [`k`], close_keys = [`Escape`], fade_duration = 200, style = ``, open = $bindable(false), dialog = $bindable(null), input = $bindable(null), placeholder = `Filter actions...`, ...rest } = $props();
+<script lang="ts">import { MultiSelect } from './';
+import { fade } from 'svelte/transition';
+let { actions, triggers = [`k`], close_keys = [`Escape`], fade_duration = 200, dialog_style = ``, open = $bindable(false), dialog = $bindable(null), input = $bindable(null), placeholder = `Filter actions...`, ...rest } = $props();
 $effect(() => {
     if (open && input)
         input?.focus(); // focus input when palette is opened
@@ -18,8 +18,9 @@ function close_if_outside(event) {
         open = false;
     }
 }
-function trigger_action_and_close({ option }) {
-    option.action(option.label);
+function trigger_action_and_close(data) {
+    const { action, label } = data.option;
+    action(label);
     open = false;
 }
 </script>
@@ -27,8 +28,13 @@ function trigger_action_and_close({ option }) {
 <svelte:window onkeydown={toggle} onclick={close_if_outside} />
 
 {#if open}
-  <dialog open bind:this={dialog} transition:fade={{ duration: fade_duration }} {style}>
-    <Select
+  <dialog
+    open
+    bind:this={dialog}
+    transition:fade={{ duration: fade_duration }}
+    style={dialog_style}
+  >
+    <MultiSelect
       options={actions}
       bind:input
       {placeholder}

package/dist/CmdPalette.svelte.d.ts

@@ -1,20 +1,19 @@
-import type { MultiSelectProps } from './props';
-import type { ObjectOption } from './types';
+import type { MultiSelectProps, ObjectOption } from './types';
 interface Action extends ObjectOption {
     label: string;
     action: (label: string) => void;
 }
-interface Props extends Omit<MultiSelectProps<Action>, `options` | `onadd` | `onkeydown` | `placeholder`> {
+interface Props extends Omit<MultiSelectProps<Action>, `options`> {
     actions: Action[];
     triggers?: string[];
     close_keys?: string[];
     fade_duration?: number;
-    style?: string;
+    dialog_style?: string;
     open?: boolean;
     dialog?: HTMLDialogElement | null;
     input?: HTMLInputElement | null;
     placeholder?: string;
 }
-declare const CmdPalette: import("svelte").Component<Props, {}, "open" | "input" | "dialog">;
+declare const CmdPalette: import("svelte").Component<Props, {}, "open" | "dialog" | "input">;
 type CmdPalette = ReturnType<typeof CmdPalette>;
 export default CmdPalette;

package/dist/CodeExample.svelte

@@ -0,0 +1,80 @@
+<script lang="ts">// see svelte.config.js where this component is passed to mdsvexamples
+import { Icon } from './';
+let { src = ``, meta = {}, open = $bindable(!meta.collapsible), title, example, code, } = $props();
+let { id, collapsible, code_above, repl, github, repo, file } = $derived(meta);
+const links = { target: `_blank`, rel: `noreferrer` };
+</script>
+
+<nav>
+  {#each [
+      { cond: repl, href: repl, icon: `Svelte` },
+      {
+        cond: github && repo,
+        href: file ? `${repo}/blob/-/${github == true ? file : github}` : repo,
+        icon: `GitHub`,
+      },
+    ] as const as
+    { cond, href, icon }
+    (icon)
+  }
+    <a {href} {...links} title={icon} style:display={cond ? `inline-block` : `none`}>
+      <Icon {icon} />
+    </a>
+  {/each}
+  {#if collapsible}
+    {@render title?.()}
+    <button onclick={() => (open = !open)}>
+      <Icon icon={open ? `Collapse` : `Expand`} />
+      {open ? `Close` : `View code`}
+    </button>
+  {/if}
+</nav>
+<!-- wrap in div with id for precise CSS selectors in playwright E2E tests -->
+<div {id} class="code-example">
+  {#if !code_above}
+    {@render example?.()}
+  {/if}
+
+  <pre class:open>
+  <code>{#if code}{@render code()}{:else}{src}{/if}</code></pre>
+
+  {#if code_above}
+    {@render example?.()}
+  {/if}
+</div>
+
+<style>
+  div.code-example {
+    margin: var(--code-example-margin, 1em auto);
+    position: relative;
+  }
+  nav {
+    display: flex;
+    justify-content: end;
+    align-items: center;
+    margin: var(--code-example-nav-margin, initial);
+    gap: var(--code-example-nav-gap, 1ex);
+  }
+  pre code {
+    background-color: transparent;
+    display: inline-block;
+  }
+  pre {
+    position: relative;
+    overflow-x: auto;
+    visibility: hidden;
+    opacity: 0;
+    max-height: 0;
+    transition: max-height, opacity, visibility;
+    transition-duration: var(--code-example-pre-transition-duration, 0.3s);
+    border-radius: var(--code-example-pre-border-radius, 4pt);
+    background-color: var(--code-example-pre-bg, var(--pre-bg));
+    padding: var(--code-example-pre-padding, 1em);
+  }
+  pre.open {
+    visibility: visible;
+    opacity: 1;
+    max-height: 9999vh;
+    margin: var(--code-example-pre-margin, 1em 0 0 0);
+  }
+</style>

package/dist/CodeExample.svelte.d.ts

@@ -0,0 +1,22 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    src?: string;
+    meta?: {
+        collapsible?: boolean;
+        code_above?: boolean;
+        id?: string;
+        repl?: string;
+        github?: string | boolean;
+        repo?: string;
+        Wrapper?: string;
+        example?: boolean;
+        file?: string;
+    };
+    open?: boolean;
+    title?: Snippet<[]>;
+    example?: Snippet<[]>;
+    code?: Snippet<[]>;
+}
+declare const CodeExample: import("svelte").Component<Props, {}, "open">;
+type CodeExample = ReturnType<typeof CodeExample>;
+export default CodeExample;

package/dist/CopyButton.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">import { CopyButton, Icon } from './';
+import { mount } from 'svelte';
+let { content = ``, state = $bindable(`ready`), global_selector = null, global = false, skip_selector = `button`, as = `button`, labels = {
+    ready: { icon: `Copy`, text: `` },
+    success: { icon: `Check`, text: `` },
+    error: { icon: `Alert`, text: `` },
+}, children, ...rest } = $props();
+$effect(() => {
+    if (global || global_selector) {
+        for (const node of document.querySelectorAll(global_selector ?? `pre > code`)) {
+            // skip if <pre> already contains a button (presumably for copy)
+            const pre = node.parentElement;
+            if (!pre || (skip_selector && pre.querySelector(skip_selector)))
+                continue;
+            mount(CopyButton, {
+                target: pre,
+                props: {
+                    content: node.textContent ?? ``,
+                    style: `position: absolute; top: 9pt; right: 9pt;`,
+                },
+            });
+        }
+    }
+});
+async function copy() {
+    try {
+        await navigator.clipboard.writeText(content);
+        state = `success`;
+    }
+    catch (err) {
+        console.error(err);
+        state = `error`;
+    }
+    setTimeout(() => (state = `ready`), 2000);
+}
+</script>
+
+{#if !(global || global_selector)}
+  {@const { text, icon } = labels[state]}
+  <svelte:element this={as} onclick={copy} role="button" tabindex={0} {...rest}>
+    {#if children}
+      {@render children({ state, icon, text })}
+    {:else}
+      <Icon {icon} />{@html text}
+    {/if}
+  </svelte:element>
+{/if}

package/dist/CopyButton.svelte.d.ts

@@ -0,0 +1,25 @@
+import { CopyButton } from './';
+import type { Snippet } from 'svelte';
+import type { IconName } from './icons';
+type State = `ready` | `success` | `error`;
+interface Props {
+    content?: string;
+    state?: State;
+    global_selector?: string | null;
+    global?: boolean;
+    skip_selector?: string | null;
+    as?: string;
+    labels?: Record<State, {
+        icon: IconName;
+        text: string;
+    }>;
+    children?: Snippet<[{
+        state: State;
+        icon: IconName;
+        text: string;
+    }]>;
+    [key: string]: unknown;
+}
+declare const CopyButton: import("svelte").Component<Props, {}, "state">;
+type CopyButton = ReturnType<typeof CopyButton>;
+export default CopyButton;

package/dist/FileDetails.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">import hljs from 'highlight.js';
+import 'highlight.js/styles/vs2015.css';
+let { files = $bindable([]), toggle_all_btn_title = `Toggle all`, default_lang = `typescript`, as = `ol`, style = null, title_snippet, } = $props();
+function toggle_all() {
+    const any_open = files.some((file) => file.node?.open);
+    for (const file of files) {
+        if (!file.node)
+            continue;
+        file.node.open = !any_open;
+    }
+    files = [...files]; // trigger reactivity
+}
+</script>
+
+{#if files?.length > 1}
+  <button onclick={toggle_all} title={toggle_all_btn_title}>
+    {files.some((file) => file.node?.open) ? `Close` : `Open`} all
+  </button>
+{/if}
+
+<svelte:element this={as} {style}>
+  {#each files as file, idx (file.title)}
+    {@const { title, content, language = default_lang } = file ?? {}}
+    <li>
+      <!-- https://github.com/sveltejs/svelte/issues/12721#issuecomment-2269544690 -->
+      <details bind:this={file.node}>
+        {#if title || title_snippet}
+          <summary>
+            {#if title_snippet}
+              {@render title_snippet({ idx, ...file })}
+            {:else}
+              <code>{title.split(`/`).at(-1)}</code>
+            {/if}
+          </summary>
+        {/if}
+
+        <pre><code>{@html hljs.highlight(content, { language }).value}</code></pre>
+      </details>
+    </li>
+  {/each}
+</svelte:element>
+
+<style>
+  button {
+    float: right;
+  }
+  ol {
+    padding: 0;
+  }
+  ol > li {
+    margin: 1ex 0;
+  }
+</style>

package/dist/FileDetails.svelte.d.ts

@@ -0,0 +1,21 @@
+import 'highlight.js/styles/vs2015.css';
+import type { Snippet } from 'svelte';
+type File = {
+    title: string;
+    content: string;
+    language?: string;
+    node?: HTMLDetailsElement | null;
+};
+interface Props {
+    files?: File[];
+    toggle_all_btn_title?: string;
+    default_lang?: string;
+    as?: string;
+    style?: string | null;
+    title_snippet?: Snippet<[{
+        idx: number;
+    } & File]>;
+}
+declare const FileDetails: import("svelte").Component<Props, {}, "files">;
+type FileDetails = ReturnType<typeof FileDetails>;
+export default FileDetails;

package/dist/GitHubCorner.svelte

@@ -0,0 +1,82 @@
+<script lang="ts">"use strict";
+// Display an animated Octocat in a corner of the screen to link to the GitHub repo.
+let { href, title = `View code on GitHub`, aria_label = title, target = `_self`, color = null, fill = null, corner = `top-right`, style = ``, } = $props();
+</script>
+
+<a
+  {href}
+  {target}
+  {title}
+  aria-label={aria_label}
+  {style}
+  class={corner}
+  style:color
+  style:fill
+>
+  <svg viewBox="0 0 250 250" aria-hidden="true">
+    <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z" />
+    <path
+      d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
+      fill="currentColor"
+      style="transform-origin: 130px 106px"
+      class="octo-arm"
+    />
+    <path
+      d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
+      fill="currentColor"
+      class="octo-body"
+    />
+  </svg>
+</a>
+
+<style>
+  a {
+    position: fixed;
+    z-index: 1;
+    fill: var(--github-corner-bg, black);
+    color: var(--github-corner-color, white);
+    width: var(--github-corner-size, 70px);
+  }
+  a.top-right {
+    top: 0;
+    right: 0;
+  }
+  a.top-left {
+    top: 0;
+    left: 0;
+    transform: rotate(-90deg);
+  }
+  a.bottom-left {
+    bottom: 0;
+    left: 0;
+    transform: rotate(180deg);
+  }
+  a.bottom-right {
+    bottom: 0;
+    right: 0;
+    transform: rotate(90deg);
+  }
+  a:hover .octo-arm {
+    animation: octocat-wave 0.5s ease-in-out;
+  }
+  @keyframes octocat-wave {
+    0%,
+    100% {
+      transform: rotate(0);
+    }
+    20%,
+    60% {
+      transform: rotate(-25deg);
+    }
+    40%,
+    80% {
+      transform: rotate(10deg);
+    }
+  }
+  /* hide this component by default when printing since it would show up on every page */
+  @media print {
+    a {
+      display: var(--github-corner-print-display, none);
+    }
+  }
+</style>

package/dist/GitHubCorner.svelte.d.ts

@@ -0,0 +1,13 @@
+interface Props {
+    href: string;
+    title?: string;
+    aria_label?: string;
+    target?: `_self` | `_blank`;
+    color?: string | null;
+    fill?: string | null;
+    corner?: `top-left` | `top-right` | `bottom-left` | `bottom-right`;
+    style?: string;
+}
+declare const GitHubCorner: import("svelte").Component<Props, {}, "">;
+type GitHubCorner = ReturnType<typeof GitHubCorner>;
+export default GitHubCorner;

package/dist/Icon.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">import { icon_data } from './icons';
+let { icon, ...rest } = $props();
+const data = $derived.by(() => {
+    if (!(icon in icon_data)) {
+        console.error(`Icon '${icon}' not found`);
+        return icon_data.Alert; // fallback
+    }
+    return icon_data[icon];
+});
+</script>
+
+<svg viewBox={data.viewBox} fill="currentColor" {...rest}>
+  <path d={data.path} />
+</svg>
+
+<style>
+  svg {
+    width: 1em;
+    height: 1em;
+    display: inline-block;
+    vertical-align: middle;
+  }
+</style>

package/dist/Icon.svelte.d.ts

@@ -0,0 +1,8 @@
+import { type IconName } from './icons';
+interface Props {
+    icon: IconName;
+    [key: string]: unknown;
+}
+declare const Icon: import("svelte").Component<Props, {}, "">;
+type Icon = ReturnType<typeof Icon>;
+export default Icon;