lutra 0.1.0 → 0.1.5

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

@@ -4,105 +4,27 @@
     /**
      * @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>
+     * <PageContent>
      *   <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}>
+<div class="PageContent">
     {@render children()}
 </div>
 
 <style>
     .PageContent {
-        display: block;
-        min-width: 0;
-        min-height: 0;
+        display: contents;
+        --isPage: 1;
     }
 </style>

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

@@ -1,37 +1,6 @@
 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>;

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;