lutra 0.0.33 → 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/PageContent.svelte

@@ -0,0 +1,108 @@
+<script lang="ts">
+    import type { Snippet } from "svelte";
+
+    /**
+     * @description
+     * A container for page content.
+     * If you want to add padding to the container, pass in `pad`. You can also pass in an array of booleans or strings to specify padding on the block and inline axis.
+     * Padding will be halved for smaller viewport sizes.
+     * @example
+     * <PageContent pad>
+     *   <p>Paragraph</p>
+     * </PageContent>
+     */
+    let {
+        children,
+        pad = false,
+        middle = false,
+        center = false,
+        style,
+    }: {
+        children: Snippet;
+        /** Add padding to the container. Pass in either a boolean or an array of booleans to specify padding on the block and inline axes. */
+        pad?: boolean |
+            [boolean, boolean] |
+            [boolean, boolean, boolean] |
+            [boolean, boolean, boolean, boolean] |
+            string |
+            [string, string] |
+            [string, string, string] |
+            [string, string, string, string] |
+            'xs' |
+            's' |
+            'm' |
+            'l' |
+            'xl' |
+            'xxl';
+        /** Center the content in the block direction. */
+        middle?: boolean;
+        /** Center the content in the inline direction. */
+        center?: boolean;
+        style?: string;
+    } = $props();
+
+    let padStyle = $derived.by(() => {
+        if(typeof pad === 'boolean') {
+            return `--padBlockStart: ${pad ? 'var(--page-padding, var(--padding-block, var(--pad-xl)))' : '0'};
+                    --padBlockEnd: ${pad ? 'var(--page-padding, var(--padding-block, var(--pad-xl)))' : '0'};
+                    --padInlineStart: ${pad ? 'var(--page-padding, var(--padding-inline, var(--pad-xl)))' : '0'};
+                    --padInlineEnd: ${pad ? 'var(--page-padding, var(--padding-inline, var(--pad-xl)))' : '0'};`;
+        } else if(typeof pad === 'string') {
+            return `--padBlockStart: ${pad};
+                    --padBlockEnd: ${pad};
+                    --padInlineStart: ${pad};
+                    --padInlineEnd: ${pad};`;
+        }
+        else if(Array.isArray(pad) && pad.length > 1 && typeof pad[0] === 'string') {
+            switch(pad.length) {
+                case 2:
+                    return `--padBlockStart: ${pad[0]};
+                            --padBlockEnd: ${pad[0]};
+                            --padInlineStart: ${pad[1]};
+                            --padInlineEnd: ${pad[1]};`;
+                case 3:
+                    return `--padBlockStart: ${pad[0]};
+                            --padBlockEnd: ${pad[1]};
+                            --padInlineStart: ${pad[2]};
+                            --padInlineEnd: ${pad[2]};`;
+                case 4:
+                    return `--padBlockStart: ${pad[0]};
+                            --padBlockEnd: ${pad[1]};
+                            --padInlineStart: ${pad[2]};
+                            --padInlineEnd: ${pad[3]};`;
+            }
+        } else if(Array.isArray(pad) && pad.length > 1) {
+            switch(pad.length) {
+                case 2:
+                    return `--padBlockStart: ${pad[0] ? 'var(--page-padding, var(--padding-block, var(--pad-xl)))' : '0'};
+                            --padBlockEnd: ${pad[0] ? 'var(--page-padding, var(--padding-block, var(--pad-xl)))' : '0'};
+                            --padInlineStart: ${pad[1] ? 'var(--page-padding, var(--padding-inline, var(--pad-xl)))' : '0'};
+                            --padInlineEnd: ${pad[1] ? 'var(--page-padding, var(--padding-inline, var(--pad-xl)))' : '0'};`;
+                case 3:
+                    return `--padBlockStart: ${pad[0] ? 'var(--page-padding, var(--padding-block, var(--pad-xl)))' : '0'};
+                            --padBlockEnd: ${pad[1] ? 'var(--page-padding, var(--padding-block, var(--pad-xl)))' : '0'};
+                            --padInlineStart: ${pad[2] ? 'var(--page-padding, var(--padding-inline, var(--pad-xl)))' : '0'};
+                            --padInlineEnd: ${pad[2] ? 'var(--page-padding, var(--padding-inline, var(--pad-xl)))' : '0'};`;
+                case 4:
+                    return `--padBlockStart: ${pad[0] ? 'var(--page-padding, var(--padding-block, var(--pad-xl)))' : '0'};
+                            --padBlockEnd: ${pad[1] ? 'var(--page-padding, var(--padding-block, var(--pad-xl)))' : '0'};
+                            --padInlineStart: ${pad[2] ? 'var(--page-padding, var(--padding-inline, var(--pad-xl)))' : '0'};
+                            --padInlineEnd: ${pad[3] ? 'var(--page-padding, var(--padding-inline, var(--pad-xl)))' : '0'};`;
+            }
+        }
+        return '';
+    });
+
+</script>
+
+<div class="PageContent" class:middle class:center style={padStyle}>
+    {@render children()}
+</div>
+
+<style>
+    .PageContent {
+        display: block;
+        min-width: 0;
+        min-height: 0;
+    }
+</style>

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

@@ -0,0 +1,38 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    children: Snippet;
+    /** Add padding to the container. Pass in either a boolean or an array of booleans to specify padding on the block and inline axes. */
+    pad?: boolean | [
+        boolean,
+        boolean
+    ] | [
+        boolean,
+        boolean,
+        boolean
+    ] | [
+        boolean,
+        boolean,
+        boolean,
+        boolean
+    ] | string | [
+        string,
+        string
+    ] | [
+        string,
+        string,
+        string
+    ] | [
+        string,
+        string,
+        string,
+        string
+    ] | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl';
+    /** Center the content in the block direction. */
+    middle?: boolean;
+    /** Center the content in the inline direction. */
+    center?: boolean;
+    style?: string;
+};
+declare const PageContent: import("svelte").Component<$$ComponentProps, {}, "">;
+type PageContent = ReturnType<typeof PageContent>;
+export default PageContent;

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/{nav → components}/Tabs.svelte

@@ -1,47 +1,105 @@
-<script lang="ts">import { browser } from "$app/environment";
-import { page } from "$app/stores";
-import { onMount } from "svelte";
-let {
-  items,
-  underline,
-  contained,
-  rounded
-} = $props();
-const id = $state(`Tabs-${Math.random().toString(36).slice(2)}`);
-function onClickButton(event, item, index) {
-}
-let activeIndex = $derived.by(() => {
-  return items.findIndex((item, index) => {
-    if (!item.href) return false;
-    if (item.href.endsWith("*")) {
-      return $page.url.pathname.startsWith(item.href.slice(0, -1));
-    } else {
-      return $page.url.pathname.endsWith(item.href);
-    }
-  });
-});
-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 = document.querySelector(`#${id} li[data-index="${activeIndex}"]`);
-    if (activeElement) {
-      return `
+<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) {
-  return href.endsWith("*") ? href.slice(0, -1) : href;
-}
+                `
+            }
+        }
+        return 'height: 0;';
+    
+    });
+
+    function removePossibleStar(href: string) {
+        return href.endsWith('*') ? href.slice(0, -1) : href;
+    }
+
 </script>
 
 <svelte:window onresize={() => { loaded = false; loaded = true; }} />

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;