lutra 0.0.13 → 0.0.15

package/dist/layout/UIContent.svelte

@@ -1,4 +1,4 @@
-<script>let {
+<script lang="ts">let {
   children
 } = $props();
 </script>

package/dist/nav/Breadcrumb.svelte

@@ -1,4 +1,4 @@
-<script>const {
+<script lang="ts">const {
   items,
   separator = "/",
   contained,

package/dist/nav/Menu.svelte

@@ -1,180 +1,196 @@
-<script>import { page } from "$app/stores";
+<script lang="ts">import MenuItem from "./MenuItem.svelte";
+import { isComponent } from "../utils/isSnippet.js";
+import { createId } from "../utils/id.js";
+import { slidefade } from "../utils/transitions.js";
+import UiContent from "../layout/UIContent.svelte";
+import { arrowNavigation, getNextFocusableElement, matchOnType } from "../utils/keyboard.svelte.js";
+import StringOrComponentOrSnippet from "../utils/StringOrComponentOrSnippet.svelte";
 let {
-  items
+  open = $bindable(false),
+  items,
+  trigger
 } = $props();
-function parseHref(href) {
-  if (!href)
-    return {
-      href: void 0,
-      exact: false
-    };
-  if (href.endsWith("*")) {
-    return {
-      href: href.slice(0, -1),
-      exact: false
-    };
+let _open = $state(open);
+let triggerEl = $state(null);
+let contentEl = $state(null);
+let menuEl = $state(null);
+let menuHeight = $state(0);
+let menuWidth = $state(0);
+const id = createId();
+const fudge = 16;
+$effect(() => {
+  if (_open) {
+    window.addEventListener("click", clickoutside);
+    window.addEventListener("keydown", onkeydown);
+  } else {
+    window.removeEventListener("click", clickoutside);
+    window.removeEventListener("keydown", onkeydown);
   }
-  return {
-    href,
-    exact: true
-  };
+});
+function toggle() {
+  _open = !_open;
 }
-function parseLinks(items2) {
-  return items2.map((item) => {
-    if (item.href) {
-      return {
-        ...item,
-        ...parseHref(item.href)
-      };
-    }
-    if (!item.children)
-      return item;
-    return {
-      ...item,
-      children: parseLinks(item.children)
-    };
-  });
+let origin = $derived.by(() => {
+  if (!triggerEl || !contentEl)
+    return "top-left";
+  const triggerPos = triggerEl.getBoundingClientRect();
+  const elPos = contentEl.getBoundingClientRect();
+  const isOffRight = triggerPos.left + elPos.width > window.innerWidth - fudge;
+  const isOffBottom = triggerPos.bottom + elPos.height > window.innerHeight - fudge;
+  let text = "top left";
+  if (isOffRight)
+    text = text.replace("left", "right");
+  if (isOffBottom)
+    text = text.replace("top", "bottom");
+  return text;
+});
+let posLeft = $derived.by(() => {
+  if (!triggerEl || !contentEl)
+    return 0;
+  const triggerPos = triggerEl.getBoundingClientRect();
+  const isOffRight = triggerPos.left + menuWidth > window.innerWidth - fudge;
+  if (isOffRight) {
+    return triggerPos.left + triggerPos.width - menuWidth;
+  }
+  return triggerPos.left;
+});
+let posTop = $derived.by(() => {
+  if (!triggerEl || !contentEl)
+    return 0;
+  const triggerPos = triggerEl.getBoundingClientRect();
+  const scrollY = window.scrollY;
+  const isOffBottom = triggerPos.bottom + menuHeight > window.innerHeight - fudge;
+  if (isOffBottom) {
+    return triggerPos.top - menuHeight - triggerPos.height + scrollY;
+  }
+  return triggerPos.top + scrollY;
+});
+function onclick(e) {
+  e.preventDefault();
+  _open = !_open;
+}
+function clickoutside(e) {
+  if (!_open)
+    return;
+  if (contentEl && !contentEl.contains(e.target) && !triggerEl?.contains(e.target)) {
+    _open = false;
+  }
+}
+function onkeydown(e) {
+  if (!_open)
+    return;
+  const active = document.activeElement;
+  switch (e.key) {
+    case "Escape":
+      e.preventDefault();
+      _open = false;
+      break;
+    case "Tab":
+      e.preventDefault();
+      e.stopPropagation();
+      _open = false;
+      setTimeout(() => {
+        const nextEl = getNextFocusableElement(menuEl, triggerEl, e.shiftKey ? "previous" : "next");
+        console.log("nextEl", nextEl);
+        if (nextEl) {
+          nextEl.focus();
+          if (nextEl.tagName === "BUTTON" || nextEl.tagName === "A" && nextEl.parentElement?.classList.contains("Trigger")) {
+            nextEl.click();
+          }
+        }
+      }, 0);
+      break;
+    case "ArrowDown":
+      e.preventDefault();
+      arrowNavigation(contentEl, "down");
+      matchOnType(contentEl, e);
+      break;
+    case "ArrowUp":
+      e.preventDefault();
+      arrowNavigation(contentEl, "up");
+      matchOnType(contentEl, e);
+      break;
+    case "Enter":
+    case "Space":
+      e.preventDefault();
+      active.click();
+      break;
+    default:
+      matchOnType(contentEl, e);
+  }
 }
-const parsedItems = parseLinks(items);
 </script>
 
-<nav>
-    <ul>
-        {#snippet link(i)}
-            <li aria-current={i.exact ? ($page?.url?.pathname === i.href ? 'page' : undefined) : ($page?.url?.pathname?.startsWith(i.href) ? 'page' : undefined)}>
-                {#if i.href}
-                    <a href={i.href}>
-                        {#if i.icon}
-                            <svelte:component this={i.icon} />
-                        {/if}
-                        {i.label}
-                    </a>
-                {:else}
-                    <span>
-                        {#if i.icon}
-                            <svelte:component this={i.icon} />
-                        {/if}
-                        {i.label}
-                    </span>
-                {/if}
-                {#if i.children}
-                    <ul>
-                        {#each i.children as child}
-                            {@render link(child)}
-                        {/each}
-                    </ul>
-                {/if}
-            </li>
-        {/snippet}
-        {#each parsedItems as item, index}
-            {@render link(item)}
-        {/each}
-    </ul>
-</nav>
+<UiContent>
+    <div class="Menu" bind:this={menuEl}>
+        <div
+            class="Trigger"
+            bind:this={triggerEl}
+        >
+            {#if typeof trigger === "string" || isComponent(trigger)}
+                <button type="button" class="button" {onclick} aria-haspopup="true" aria-controls={id} aria-expanded="{_open}">
+                    <StringOrComponentOrSnippet content={trigger} />
+                </button>
+            {:else}
+                {@render trigger({ toggle: toggle, isOpen: _open })}
+            {/if}
+        </div>
+        {#if _open}
+            <div {id}
+                class="MenuContent"
+                role="menu"
+                bind:clientWidth={menuWidth}
+                bind:clientHeight={menuHeight}
+                bind:this={contentEl}
+                style="--left: {posLeft}px; --top: {posTop}px;"
+                transition:slidefade={{ y: 5, origin: origin, duration: 100 }}
+            >
+                <ul>
+                    {#each items as item}
+                        <MenuItem item={item} />
+                    {/each}
+                </ul>
+            </div>
+        {/if}
+    </div>
+</UiContent>
 
 <style>
-    nav {
-    }
-    ul {
-        display: flex;
-        list-style: none;
-        padding: 0;
-        margin: 0;
-    }
-    a, span {
-        display: flex;
-        align-items: center;
-        padding: 0.5rem 0.75rem;
-        text-decoration: none;
-        font-weight: 500;
-        color: var(--menu-link);
-    }
-    a:hover, span:hover {
-        background: var(--menu-bg-hover);
-        color: var(--menu-link-hover);
-    }
-    /** loop */
-    ul > li > ul {
-        display: none;
-        position: absolute;
-        flex-direction: column;
-        top: 100%;
-        left: 0;
-        background: var(--menu-bg);
-        border: var(--menu-border);
-    }
-    ul > li:hover > ul,
-    ul > li:focus-within > ul {
-        display: flex;
-    }
-    ul > li:hover,
-    ul > li:focus-within {
-        background: var(--menu-bg-hover);
-    }
-    ul > li:hover > a,
-    ul > li:focus-within > a,
-    ul > li:hover > span,
-    ul > li:focus-within > span {
-        color: var(--menu-link-hover);
-    }
-
-    ul > li {
-        border-block-end: var(--menu-border);
+    .Menu {
         position: relative;
-        white-space: nowrap;
     }
-    ul > li:last-child {
-        border-block-end: none;
-    }
-    ul > li > ul {
-        left: 100%;
-        top: -1px;
-    }
-    ul > li:has(ul) > a {
-        padding-inline-end: 2rem;
-    }
-    ul > li:has(ul) > a::after {
-        content: "▶";
-        padding-inline-start: 0.5rem;
-        font-size: 9px;
-        position: absolute;
-        right: 0.75rem;
-        color: var(--menu-link);
-    }
-    /** top level */
-    nav > ul {
-        flex-direction: row;
-        gap: 1px;
+
+    .Trigger {
         position: relative;
+        display: inline-flex;
     }
-    nav > ul > li {
-        border-block-end: none;
-    }
-    nav > ul > li > a {
-        border-radius: var(--border-radius);
-    }
-    nav > ul > li > a:hover {
+
+    .MenuContent {
+        position: fixed;
+        left: var(--left, 0);
+        top: var(--top, 0);
+        margin: 0;
+        z-index: 1000;
+        margin: 0;
+        border: var(--menu-border);
         border-radius: var(--border-radius);
+        box-shadow: 0 0.5rem 1rem var(--shadow);
+        background-color: var(--menu-bg);
+        width: var(--width, 25ch);
+        overflow: clip;
     }
-    nav > ul > li > ul {
-        top: 100%;
-        left: 0;
-        background: var(--menu-bg);
-        border: var(--menu-border);
-        filter: drop-shadow(0 0.25rem 0.5rem var(--shadow));
+
+    .MenuContent:has(li:last-of-type[data-type="item"]) {
+        padding-block-end: 0.5rem;
     }
-    nav > ul > li:has(ul) > a {
-        padding: 0.75rem 1rem;
+
+    nav[aria-expanded="true"] {
+        display: block;
     }
-    nav > ul > li:has(ul) > a::after {
-        content: "";
+
+    ul {
+        margin: 0;
+        list-style: none;
         padding: 0;
     }
-    ul > li[aria-current="page"] a {
-        background: var(--menu-bg-active);
-        color: var(--menu-link-active);
-    }
-    ul > li[aria-current="page"] a:hover {
-        color: var(--menu-link-active-hover);
-    }
-</style>
+</style>

package/dist/nav/Menu.svelte.d.ts

@@ -1,9 +1,17 @@
 import { SvelteComponent } from "svelte";
-import type { MenuItem } from "./MenuTypes.js";
+import type { ComponentType, Snippet } from "svelte";
+import type { MenuItem as Item } from "./MenuTypes.js";
 declare const __propDef: {
     props: {
-        /** Menu items to display */
-        items: MenuItem[];
+        /** Whether the menu is open */
+        open?: boolean | undefined;
+        /** The items to display in the menu */
+        items: Item[];
+        /** The trigger for the menu */
+        trigger: string | ComponentType | Snippet<[{
+            toggle: () => void;
+            isOpen: boolean;
+        }]>;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/nav/MenuItem.svelte

@@ -0,0 +1,122 @@
+<script lang="ts">import StringOrComponentOrSnippet from "../utils/StringOrComponentOrSnippet.svelte";
+import { isStatusColor } from "../utils/color.js";
+import { isComponent, isSnippet } from "../utils/isSnippet.js";
+let {
+  item
+} = $props();
+let isSet = $derived(item.type !== "divider" ? isStatusColor(item.color) : false);
+</script>
+
+<li class:divider={item.type === 'divider'} class:header={item.type === 'header'} data-type="{item.type}" style="--color: {isSet && item.type !== 'divider' ? 'var(--status-'+item.color+')' : (item.type !== 'divider' && item.color ? item.color : 'var(--menu-text)')}">
+    {#if item.type === 'divider'}
+        <hr />
+    {:else if item.type === 'header'}
+        <div class="Header">
+            <StringOrComponentOrSnippet content={item.content} />
+        </div>
+    {:else if item.type === 'item'}
+        {#if item.href}
+            <a href="{item.href}" class="Item">
+                <span class="Content">
+                    <StringOrComponentOrSnippet content={item.content} />
+                </span>
+                {#if item.shortcut}
+                    <span class="Shortcut">{item.shortcut}</span>
+                {/if}
+            </a>
+        {:else if item.onclick}
+            <button type="button" onclick={(e) => item.type === 'item' ? item.onclick!(e, item) : undefined} class="Item">
+                <span class="Content">
+                    <StringOrComponentOrSnippet content={item.content} />
+                </span>
+                {#if item.shortcut}
+                    <span class="Shortcut">{item.shortcut}</span>
+                {/if}
+            </button>
+        {:else if isSnippet(item.content)}
+            <div class="Item Custom">
+                {@render item.content()}
+            </div>
+        {:else if isComponent(item.content)}
+            <div class="Item Custom">
+                <svelte:component this={item.content} />
+            </div>
+        {/if}
+    {/if}
+</li>
+
+<style>
+    li {
+        margin: 0;
+        list-style: none;
+        padding: 0;
+        user-select: none;
+    }
+
+    li .Item,
+    li .Header {
+        font-size: 1em;
+        text-align: left;
+        padding-block: 0.5rem;
+        padding-inline: 1rem;
+        display: inline-flex;
+        align-items: center;
+        justify-content: space-between;
+        width: 100%;
+        color: inherit;
+        text-decoration: none;
+        color: var(--color);
+        --inset-block: 0.5rem;
+        --inset-inline: 1rem;
+    }
+
+    li .Header {
+        font-weight: 600;
+    }
+
+    li .Item:not(.Custom):hover,
+    li .Item:not(.Custom):focus-visible {
+        background-color: var(--menu-bg-hover);
+        cursor: pointer;
+        outline: none;
+    }
+
+    li .Item span.Shortcut {
+        font-size: max(0.75em, 9px);
+        text-align: right;
+        color: var(--text-subtle);
+    }
+
+    li .Item:not(.Custom):active {
+        scale: 1;
+    }
+
+    li.divider {
+        padding-block: 0.5rem;
+    }
+
+    hr {
+        display: block;
+        border: none;
+        margin: 0;
+        border-top: 1px solid var(--border-color);
+    }
+
+    li:first-child[data-type="item"] {
+        margin-block-start: 0.5rem;
+    }
+
+    li:first-child[data-type="header"]:has(+ li[data-type="item"]) {
+        margin-block-end: 0.5rem;
+    }
+
+    li:nth-last-child(2)[data-type="item"]:has(+ li[data-type="header"]:last-child) {
+        margin-block-end: 0.5rem;
+    }
+
+    @media (pointer: none) {
+        li .Item span.Shortcut {
+            display: none;
+        }        
+    }
+</style>

package/dist/nav/MenuItem.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponent } from "svelte";
+import type { MenuItem as Item } from "./MenuTypes.js";
+declare const __propDef: {
+    props: {
+        item: Item;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type MenuItemProps = typeof __propDef.props;
+export type MenuItemEvents = typeof __propDef.events;
+export type MenuItemSlots = typeof __propDef.slots;
+export default class MenuItem extends SvelteComponent<MenuItemProps, MenuItemEvents, MenuItemSlots> {
+}
+export {};

package/dist/nav/MenuTypes.d.ts

@@ -1,11 +1,32 @@
+import type { StatusColorOrString } from "../utils/color.js";
 import type { ComponentType, Snippet } from "svelte";
 export type MenuItem = {
+    /** Type of menu item to render. */
+    type: 'divider';
+} | {
+    /** Type of menu item to render. */
+    type: 'header';
     /** Text label of the item to display to the user. */
-    label: string;
-    /** Path or URL to use for the menu item. If the href ends with a star (*), it will match any path that starts with the given path. This allows for nested active menu items. */
-    href?: string;
+    content: string | ComponentType | Snippet;
+    /** Color to use for the item. */
+    color?: StatusColorOrString;
+} | {
+    /** Type of menu item to render. */
+    type: 'item';
+    /** Text label of the item to display to the user. */
+    content: string | ComponentType | Snippet;
+    /** Keyboard shortcut to display next to the item. */
+    shortcut?: string;
     /** Icon to display. Pass either a Svelte Component or an URL. Use the Icon component to recolor your icons according to the user theme. */
     icon?: string | ComponentType;
+    /** Path or URL to use for the menu item. */
+    href?: string;
+    /** Click event handler. */
+    onclick?: (event: MouseEvent, item: MenuItem) => void;
+    /** If true, disables the item. */
+    disabled?: boolean;
+    /** Color to use for the item. */
+    color?: StatusColorOrString;
     /** Menu item children. Pass an array of menu items to create a nested menu. */
     children?: MenuItem[];
 };