lutra 0.1.0 → 0.1.4

package/dist/components/OverlayLayer.svelte

@@ -0,0 +1,168 @@
+<script lang="ts">
+    import { type OverlayItem, type OverlayPosition } from "./overlays.svelte.js";
+	import { slidefade } from "../util/transitions.js";
+	import { BROWSER } from "esm-env";
+	import { untrack } from "svelte";
+
+    let {
+        position,
+        items,
+    }: {
+        position?: OverlayPosition;
+        items: OverlayItem[]
+    } = $props();
+
+    const fudge = 8;
+    
+    let contentEls: Record<string, HTMLElement> = $state({});
+    let scrollX = $state(BROWSER ? window.scrollX : 0);
+    let scrollY = $state(BROWSER ? window.scrollY : 0);
+    let innerWidth = $state(BROWSER ? window.innerWidth : 0);
+    let innerHeight = $state(BROWSER ? window.innerHeight : 0);
+
+    let positions = $derived.by(() => {
+
+        innerWidth;
+        innerHeight;
+        scrollX;
+        scrollY;
+        contentEls;
+
+        return items.map((item) => {
+            const contentEl = contentEls[item.id];
+            if(!item.anchor || !contentEl) return { left: 0, top: 0, index: 1 };
+            const triggerPos = item.anchor.getBoundingClientRect();
+
+            const height = contentEl.clientHeight;
+            const width = contentEl.clientWidth;
+
+            const isOffBottom = triggerPos.bottom + height > window.innerHeight - fudge;
+            const isOffRight = triggerPos.left + width > window.innerWidth - fudge;
+
+            let left = triggerPos.left;
+            let top = triggerPos.top + triggerPos.height + fudge;
+
+            if(isOffRight) left = left - width + triggerPos.width;
+            if(isOffBottom) top = top - height - triggerPos.height - (fudge * 2);
+
+            return {
+                left,
+                top,
+                index: 1,
+            };
+        });
+    });
+
+    let originCache: Record<string, string> = $state({});
+
+    /**
+     * The origin of the menu content based on the trigger position.
+     */
+    let origins = $derived.by(() => {
+        return items.map((item, index) => {
+            if (!item.anchor || item.position !== "anchor") {
+                return item.position || "center";
+            }
+
+            const triggerPos = item.anchor!.getBoundingClientRect();
+            const contentEl = document.getElementById(item.id);
+            const contentRect = contentEl?.getBoundingClientRect();
+
+            const height = contentRect!.height;
+            const width = contentRect!.width;
+
+            const isOffBottom = triggerPos.bottom + height > innerHeight - fudge;
+            const isOffRight = triggerPos.left + width > innerWidth - fudge;
+
+            let text = "top left";
+
+            if (isOffRight) text = text.replace("left", "right");
+            if (isOffBottom) text = text.replace("top", "bottom");
+
+            return text;
+        });
+    });
+
+    $effect(() => {
+        origins;
+        origins.forEach((origin, index) => {
+            originCache[untrack(() => items[index].id)] = origin;
+        });
+    });
+
+    function introstart(item: OverlayItem) {
+        document.getElementById(item.id)!.style.pointerEvents = "none";
+    }
+
+    function introend(item: OverlayItem) {
+        document.getElementById(item.id)!.style.pointerEvents = "auto";
+    }
+</script>
+
+<svelte:window bind:scrollX bind:scrollY bind:innerWidth bind:innerHeight />
+
+<div class="Layer {position}">
+    {#each items as item, index (item.id)}
+        <div
+            id={item.id}
+            bind:this={contentEls[item.id]}
+            class="LayerItem"
+            class:anchor={item.anchor ? true : false}
+            onintrostart={() => introstart(item)}
+            onintroend={() => introend(item)}
+            transition:slidefade|global={{ duration: 150, origin: originCache[item.id] || origins[index], noMargin: !!!item.anchor }}
+            style="--index: {index}; --z: {item.z}; --left: {positions[index].left}px; --top: {positions[index].top}px;"
+        >
+            {#if item.component}
+                <item.component {...item.props} />
+            {:else if item.snippet}
+                {@render item.snippet()}
+            {/if}
+        </div>
+    {/each}
+</div>
+
+<style>
+    .Layer {
+        pointer-events: auto;
+        position: absolute;
+        display: flex;
+        flex-direction: column-reverse;
+        gap: 0.75rem;
+    }
+    .Layer.center {
+        left: 50%;
+        right: auto;
+        transform: translateX(-50%);
+    }
+    .Layer.top {
+        top: calc(1rem + env(safe-area-inset-top));
+        bottom: unset;
+    }
+    .Layer.bottom {
+        top: unset;
+        bottom: calc(1rem + env(safe-area-inset-bottom));
+    }
+    .Layer.right {
+        left: unset;
+        right: calc(1rem + env(safe-area-inset-right));
+    }
+    .Layer.left {
+        left: calc(1rem + env(safe-area-inset-left));
+        right: unset;
+    }
+    .Layer.center:not(.top):not(.bottom):not(.anchor) {
+        top: 50%;
+        bottom: auto;
+        transform: translate(calc(-50% + env(safe-area-inset-left) + env(safe-area-inset-right)), calc(-50% + env(safe-area-inset-top) + env(safe-area-inset-bottom)));
+    }
+    .LayerItem {
+        position: relative;
+        z-index: calc(100 + var(--z, 1) - var(--index, 0));
+    }
+    .LayerItem.anchor {
+        position: absolute;
+        top: var(--top, 0);
+        left: var(--left, 0);
+    }
+</style>

package/dist/components/OverlayLayer.svelte.d.ts

@@ -0,0 +1,8 @@
+import { type OverlayItem, type OverlayPosition } from "./overlays.svelte.js";
+type $$ComponentProps = {
+    position?: OverlayPosition;
+    items: OverlayItem[];
+};
+declare const OverlayLayer: import("svelte").Component<$$ComponentProps, {}, "">;
+type OverlayLayer = ReturnType<typeof OverlayLayer>;
+export default OverlayLayer;

package/dist/components/TabbedContent.svelte

@@ -0,0 +1,74 @@
+<script lang="ts">
+	import { page } from "$app/stores";
+	import { setContext, type Snippet } from "svelte";
+    import type { TabbedContentItem } from "./MenuTypes.js";
+	import Tabs from "./Tabs.svelte";
+
+    /**
+     * @description
+     * Tabbed content that will display the content of the selected tab.
+     * @cssprop --gap - The gap between the tabs and the content. (Default: 1.5rem)
+     * @example
+     * {#snippet c1()}
+     *     <p>foo</p>
+     * {/snippet}
+     * {#snippet c2()}
+     *     <p>bar</p>
+     * {/snippet}
+     * <TabbedContent contained rounded items={[
+     *     {
+     *         label: 'Tab 1',
+     *         hash: '#tab1',
+     *         content: c1,
+     *     },
+     *     {
+     *         label: 'Tab 2',
+     *         hash: '#tab2',
+     *         content: c2,
+     *     },
+     * ]} />
+     */
+    let {
+        contained,
+        rounded,
+        children,
+    }: {
+        /** Contain the element in a box. */
+        contained?: boolean;
+        /** Round the corners of the element if contained. */
+        rounded?: boolean;
+        children: Snippet;
+    } = $props();
+
+    function formatHash(hash: string) {
+        hash = hash.toLowerCase().replace(/\s/g, '-');
+        if(!hash.startsWith('#')) {
+            hash = `#${hash}`;
+        }
+        return hash;
+    };
+
+    /**
+     * Construct the tabs from the children. Each child calls the setTabItem function.
+     */
+    let items = $state<{ id: string, label: string, href?: string }[]>([]);
+
+    function setTabItem(id: string, label: string, href?: string) {
+        items.push({ id, label, href });
+    }
+
+    setContext('TabbedContent.setTabItem', setTabItem);
+</script>
+
+<div>
+    <Tabs items={items} {contained} {rounded} />
+    {@render children()}
+</div>
+
+<style>
+    div {
+        display: flex;
+        flex-direction: column;
+        gap: var(--gap, 1.5rem);
+    }
+</style>

package/dist/components/TabbedContent.svelte.d.ts

@@ -0,0 +1,11 @@
+import { type Snippet } from "svelte";
+type $$ComponentProps = {
+    /** Contain the element in a box. */
+    contained?: boolean;
+    /** Round the corners of the element if contained. */
+    rounded?: boolean;
+    children: Snippet;
+};
+declare const TabbedContent: import("svelte").Component<$$ComponentProps, {}, "">;
+type TabbedContent = ReturnType<typeof TabbedContent>;
+export default TabbedContent;

package/dist/components/TabbedContentItem.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+	import { getContext, type Snippet } from "svelte";
+
+    let {
+        id,
+        label,
+        href,
+        children,
+    }: {
+        id?: string;
+        label: string;
+        href?: string;
+        children: Snippet;
+    } = $props();
+
+    if(!id) {
+        id = label.toLowerCase().replace(/ /g, '-');
+    }
+
+    if(href && !href.startsWith('#')) {
+        href = `#${encodeURIComponent(href)}`;
+    }
+
+    const setTabItem = getContext<((id: string, label: string, href?: string) => void)>('TabbedContent.setTabItem');
+    setTabItem(id, label, href);
+</script>
+
+<div class="TabbedContentItem">
+    {@render children()}
+</div>
+
+<style>
+</style>

package/dist/components/TabbedContentItem.svelte.d.ts

@@ -0,0 +1,10 @@
+import { type Snippet } from "svelte";
+type $$ComponentProps = {
+    id?: string;
+    label: string;
+    href?: string;
+    children: Snippet;
+};
+declare const TabbedContentItem: import("svelte").Component<$$ComponentProps, {}, "">;
+type TabbedContentItem = ReturnType<typeof TabbedContentItem>;
+export default TabbedContentItem;

package/dist/components/Table.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+    import { getContext, type Snippet } from "svelte";
+
+    let {
+        colored,
+        contained,
+        rounded,
+        hoverable,
+        hang,
+        fullWidth,
+        children,
+    }: {
+        colored?: boolean;
+        contained?: boolean;
+        rounded?: boolean;
+        hang?: boolean;
+        hoverable?: boolean;
+        fullWidth?: boolean;
+        children: Snippet;
+    } = $props();
+
+    if(contained === undefined) { contained = getContext('lutra.table.contained') ?? getContext('lutra.contained') ?? false; }
+</script>
+
+<div
+    class="table-container"
+    class:hang
+    class:contained
+    class:rounded
+>
+    <table
+        class:colored
+        class:contained
+        class:rounded
+        class:hang
+        class:fullWidth
+        class:hoverable
+    >
+        {@render children()}
+    </table>
+</div>

package/dist/components/Table.svelte.d.ts

@@ -0,0 +1,13 @@
+import { type Snippet } from "svelte";
+type $$ComponentProps = {
+    colored?: boolean;
+    contained?: boolean;
+    rounded?: boolean;
+    hang?: boolean;
+    hoverable?: boolean;
+    fullWidth?: boolean;
+    children: Snippet;
+};
+declare const Table: import("svelte").Component<$$ComponentProps, {}, "">;
+type Table = ReturnType<typeof Table>;
+export default Table;

package/dist/components/Tabs.svelte

@@ -0,0 +1,216 @@
+<script lang="ts">
+	import { browser } from "$app/environment";
+	import { page } from "$app/stores";
+	import type { TabItem } from "./MenuTypes.js";
+	import { onMount } from "svelte";
+
+    /**
+     * @description
+     * A tabbed navigation menu used to navigate between pages or sections of content.
+     * Clicking a tab will change the URL or trigger a JavaScript event.
+     * @example
+     * <Tabs contained rounded items={[
+     *     {
+     *         label: 'Tab 1',
+     *         href: '#tab1',
+     *     },
+     *     {
+     *         label: 'Tab 2',
+     *         href: '#tab2',
+     *     },
+     *     {
+     *         label: 'Tab 3',
+     *         href: '#tab3',
+     *     },
+     * ]} />
+     */
+    let {
+        items,
+        underline,
+        contained,
+        rounded,
+        selected = $bindable<{ label: string, href?: string, index: number } | null>(null)
+    }: {
+        /** Tab items to display. */
+        items: TabItem[];
+        /** Underline the active tab. The underline will slide to the selected tab unless reduced motion is enabled. */
+        underline?: boolean;
+        /** Contain the element in a box. */
+        contained?: boolean;
+        /** Round the corners of the element if contained. */
+        rounded?: boolean;
+        /** The index of the selected tab (bindable). */
+        selected?: { label: string, href?: string, index: number } | null;
+    } = $props();
+
+    const id = $state(`Tabs-${Math.random().toString(36).slice(2)}`);
+
+    const itemsWithId = $derived(items.map((item, index) => {
+        return { ...item, id: `Tab-${id}-${index}` };
+    }));
+
+    function onClickButton(event: MouseEvent, item: TabItem, index: number) {
+        if(item.onclick) {
+            item.onclick(event, item, index);
+        }
+        selected = { label: item.label, href: item.href, index };
+    }
+
+    let activeIndex = $derived.by(() => {
+        return items.findIndex((item, index) => {
+            console.log(item.href);
+            if(!item.href) return false;
+            // check if href ends in *
+            if(item.href.endsWith('*')) {
+                return $page.url.pathname.startsWith(item.href.slice(0, -1));
+            } else {
+                return $page.url.pathname.endsWith(item.href);
+            }
+        })
+    });
+
+    $effect(() => {
+        console.log(activeIndex);
+    });
+
+    let loaded = $state(false);
+
+    onMount(async () => {
+        await new Promise((resolve) => setTimeout(resolve, 50));
+        loaded = true;
+    });
+
+    let underlineStyle = $derived.by(() => {
+        if(browser && underline && loaded) {
+            let active = items[activeIndex];
+            let activeElement: HTMLElement | null = document.querySelector(`#${id} li[data-index="${activeIndex}"]`);
+            if(activeElement) {
+                return `
+                    opacity: 1;
+                    width: ${activeElement.clientWidth}px;
+                    transform: translateX(${activeElement.offsetLeft}px)
+                `
+            }
+        }
+        return 'height: 0;';
+    
+    });
+
+    function removePossibleStar(href: string) {
+        return href.endsWith('*') ? href.slice(0, -1) : href;
+    }
+
+</script>
+
+<svelte:window onresize={() => { loaded = false; loaded = true; }} />
+
+<nav class="Tabs" {id} class:contained class:rounded>
+    <menu>
+        {#each items as item, index}
+            <li data-index={index} aria-current={item.active || activeIndex === index ? 'page' : undefined}>
+                {#if item.href}
+                    <a draggable="false" href={removePossibleStar(item.href)}>
+                        {item.label}
+                    </a>
+                {:else if item.onclick}
+                    <button type="button" draggable="false" onclick={(event) => onClickButton(event, item, index)}>
+                        {item.label}
+                    </button>
+                {/if}
+            </li>
+        {/each}
+        <div class="Underline" style={underlineStyle}></div>
+    </menu>
+</nav>
+
+<style>
+    .Tabs {
+        display: flex;
+        z-index: 2;
+        background: var(--menu-bg);
+        overflow: clip;
+    }
+    .Tabs.contained {
+        border: var(--menu-border);
+    }
+    .Tabs.rounded {
+        border-radius: var(--border-radius);
+    }
+    menu, li {
+        list-style: none;
+        margin: 0;
+    }
+    menu {
+        position: relative;
+        display: flex;
+        flex-direction: row;
+        flex-wrap: nowrap;
+        align-items: center;
+        justify-content: flex-start;
+        padding: 0;
+        gap: var(--gap, 1rem);
+        inline-size: 100%;
+        border-block-end: var(--menu-border);
+    }
+    .Tabs.contained menu {
+        gap: 0;
+        flex-grow: 1;
+        justify-content: stretch;
+        border-block-end: 0;
+    }
+    a,
+    button {
+        display: block;
+        padding: var(--padding, 0.75rem 0.5rem);
+        color: var(--menu-text);
+        transition: all var(--menu-trans);
+        font-weight: 500;
+        font-size: var(--font-size, 0.9em);
+        letter-spacing: -0.05ch;
+        background: transparent;
+        border: none;
+        border-block-end: 2px solid transparent;
+        cursor: pointer;
+        text-decoration: none;
+    }
+    menu li:first-child > * {
+        padding-inline-start: 0;
+    }
+    .Tabs.contained li {
+        flex-grow: 1;
+        border-inline-end: var(--menu-border);
+        flex-basis: auto;
+    }
+    .Tabs.contained menu li:last-of-type {
+        border-inline-end: 0;
+    }
+    .Tabs.contained a,
+    .Tabs.contained button {
+        flex-grow: 1;
+        inline-size: 100%;
+        text-align: center;
+        padding-block-start: calc(0.75rem + 3px);
+        color: var(--menu-text);
+        font-weight: 600;
+    }
+    a:hover,
+    button:hover {
+        color: color-mix(in hsl shorter hue, var(--menu-text) var(--mix-amount), var(--mix-target));
+        background-color: color-mix(in hsl shorter hue, var(--menu-bg) var(--mix-amount), var(--mix-target));
+    }
+    li[aria-current="page"] a,
+    li[aria-current="page"] button {
+        background: var(--menu-bg-active);
+        color: var(--menu-text-active);
+        opacity: 1;
+    }
+    .Underline {
+        height: 2px;
+        background-color: var(--menu-text-active);
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        transition: all 0.2s ease-out;
+        opacity: 0;
+    }
+</style>

package/dist/components/Tabs.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { TabItem } from "./MenuTypes.js";
+type $$ComponentProps = {
+    /** Tab items to display. */
+    items: TabItem[];
+    /** Underline the active tab. The underline will slide to the selected tab unless reduced motion is enabled. */
+    underline?: boolean;
+    /** Contain the element in a box. */
+    contained?: boolean;
+    /** Round the corners of the element if contained. */
+    rounded?: boolean;
+    /** The index of the selected tab (bindable). */
+    selected?: {
+        label: string;
+        href?: string;
+        index: number;
+    } | null;
+};
+declare const Tabs: import("svelte").Component<$$ComponentProps, {}, "selected">;
+type Tabs = ReturnType<typeof Tabs>;
+export default Tabs;