commit 807bbaf1badfac1c5c55b1f9111fc639f4170559
parent 20617458d450acc3213ece9e91dc66ce80de2f3c
Author: triesap <137732411+triesap@users.noreply.github.com>
Date: Sun, 15 Sep 2024 12:39:16 +0000
apps-lib: add components from `app`
Diffstat:
6 files changed, 125 insertions(+), 8 deletions(-)
diff --git a/apps-lib/src/lib/components/layout_trellis.svelte b/apps-lib/src/lib/components/layout_trellis.svelte
@@ -0,0 +1,3 @@
+<div class={`flex flex-col w-full pt-4 px-6 pb-12 gap-4`}>
+ <slot />
+</div>
diff --git a/apps-lib/src/lib/components/layout_trellis_line.svelte b/apps-lib/src/lib/components/layout_trellis_line.svelte
@@ -0,0 +1,37 @@
+<script lang="ts">
+ import { fmt_cl, type ICb, type IClOpt, type ILabel } from "$lib";
+
+ export let basis: ILabel & {
+ notify?: IClOpt & ICb & ILabel;
+ };
+ $: basis = basis;
+</script>
+
+<div class={`flex flex-col w-full gap-1 justify-start items-start`}>
+ <div class={`flex flex-row w-full px-2 gap-2 justify-start items-center`}>
+ <p
+ class={`${fmt_cl(basis.label.classes)} font-sans font-[400] uppercase text-layer-2-glyph text-sm`}
+ >
+ {basis.label.value}
+ </p>
+ {#if basis.notify}
+ <div
+ class={`${fmt_cl(basis.notify.classes)} flex flex-row justify-start items-center fade-in transition-all`}
+ >
+ <button
+ class={`flex flex-row justify-center items-center`}
+ on:click={async () => {
+ await basis.notify?.callback();
+ }}
+ >
+ <p
+ class={`${fmt_cl(basis.notify.label.classes)} font-sans font-[600] uppercase text-layer-2-glyph/80 text-xs`}
+ >
+ {basis.notify.label.value}
+ </p>
+ </button>
+ </div>
+ {/if}
+ </div>
+ <slot />
+</div>
diff --git a/apps-lib/src/lib/components/layout_view.svelte b/apps-lib/src/lib/components/layout_view.svelte
@@ -0,0 +1,60 @@
+<script lang="ts">
+ import {
+ type AppLayoutKey,
+ type IClOpt,
+ app_layout,
+ app_nav_blur,
+ app_nav_visible,
+ app_tabs_blur,
+ app_tabs_visible,
+ fmt_cl,
+ } from "$lib";
+ import { onDestroy, onMount } from "svelte";
+
+ const styles: Record<AppLayoutKey, string> = {
+ base: "pt-2",
+ lg: "pt-16",
+ };
+
+ export let basis: (IClOpt & { fade?: boolean }) | undefined = undefined;
+ $: basis = basis;
+
+ let el: HTMLElement | null;
+
+ onMount(async () => {
+ try {
+ el?.addEventListener("scroll", scrollChange);
+ } catch (e) {
+ } finally {
+ }
+ });
+
+ onDestroy(async () => {
+ try {
+ el?.removeEventListener("scroll", scrollChange);
+ } catch (e) {
+ } finally {
+ }
+ });
+
+ $: classes_nav = $app_nav_visible
+ ? `pt-h_nav_${$app_layout}`
+ : `${styles[$app_layout]}`;
+ $: classes_tabs = $app_tabs_visible ? `pb-h_tabs_${$app_layout}` : ``;
+ $: classes_fade = basis?.fade ? `fade-in` : ``;
+
+ const scrollChange = (): void => {
+ if (Math.max(el?.scrollTop || 0, 0) > 10) app_nav_blur.set(true);
+ else app_nav_blur.set(false);
+
+ if (Math.max(el?.scrollTop || 0, 0) > 10) app_tabs_blur.set(true);
+ else app_tabs_blur.set(false);
+ };
+</script>
+
+<div
+ bind:this={el}
+ class={`${fmt_cl(basis?.classes)} absolute top-0 left-0 flex flex-col h-[100vh] w-full overflow-y-scroll scroll-hide ${classes_nav} ${classes_tabs} ${classes_fade}`}
+>
+ <slot />
+</div>
diff --git a/apps-lib/src/lib/components/layout_window.svelte b/apps-lib/src/lib/components/layout_window.svelte
@@ -0,0 +1,7 @@
+<div
+ class={`relative flex flex-col h-[100vh] w-full overflow-x-hidden overflow-y-hidden bg-layer-0-surface`}
+>
+ <div class={`flex flex-col h-full w-full`}>
+ <slot />
+ </div>
+</div>
diff --git a/apps-lib/src/lib/components/tabs.svelte b/apps-lib/src/lib/components/tabs.svelte
@@ -1,11 +1,16 @@
<script lang="ts">
- import Glyph from "$lib/ui/glyph.svelte";
- import { type ITabsBasis } from "..";
+ import {
+ Glyph,
+ type ITabsBasis,
+ app_layout,
+ app_tab_active,
+ app_tabs_blur,
+ } from "$lib";
export let basis: ITabsBasis;
$: basis = basis;
- $: classes_blur = basis.blur ? `bg-layer-1-surface/30` : ``;
+ $: classes_blur = $app_tabs_blur ? `bg-layer-1-surface/30` : ``;
let el: HTMLElement | null;
let el_inner: HTMLElement | null;
@@ -13,7 +18,7 @@
<div
bind:this={el}
- class={`z-10 absolute bottom-0 left-0 flex flex-col w-full justify-start items-start transition-all backdrop-blur-md h-tabs_${basis.app_layout} ${classes_blur}`}
+ class={`z-10 absolute bottom-0 left-0 flex flex-col w-full justify-start items-start transition-all backdrop-blur-md h-tabs_${$app_layout} ${classes_blur}`}
>
<div
bind:this={el_inner}
@@ -26,19 +31,20 @@
<button
class={`col-span-3 flex flex-col h-full justify-start items-center transition-all`}
on:click={async () => {
+ app_tab_active.set(tab_i);
await tab.callback(tab_i);
}}
>
<Glyph
basis={{
classes:
- basis.tab_active === tab_i
- ? `text-layer-0-glyph text-lineActiveBlue`
- : `text-layer-0-glyph text-lineMd`,
+ $app_tab_active === tab_i
+ ? `text-layer-2-glyph text-lineActiveBlue`
+ : `text-layer-2-glyph text-lineMd`,
key: tab.icon,
dim: `md`,
weight:
- basis.tab_active === tab_i
+ $app_tab_active === tab_i
? tab.active_weight || `fill`
: `bold`,
}}
diff --git a/apps-lib/src/lib/index.ts b/apps-lib/src/lib/index.ts
@@ -3,6 +3,10 @@ export { default as Envelope } from "./components/envelope.svelte"
export { default as EnvelopeTitled } from "./components/envelope_titled.svelte"
export { default as InputForm } from "./components/input_form.svelte"
export { default as InputSelect } from "./components/input_select.svelte"
+export { default as LayoutTrellis } from "./components/layout_trellis.svelte"
+export { default as LayoutTrellisLine } from "./components/layout_trellis_line.svelte"
+export { default as LayoutView } from "./components/layout_view.svelte"
+export { default as LayoutWindow } from "./components/layout_window.svelte"
export { default as LoadingView } from "./components/loading_view.svelte"
export { default as Nav } from "./components/nav.svelte"
export { default as NotifyGlyph } from "./components/notify_glyph.svelte"
