commit 9202ff9aa943454332a71f3dc3728487bf849147
parent f96cd2b71c8607b7d59f45ba695584411176240c
Author: triesap <137732411+triesap@users.noreply.github.com>
Date: Thu, 29 Aug 2024 10:35:57 +0000
apps-lib: update types directory, add tabs component
Diffstat:
5 files changed, 141 insertions(+), 67 deletions(-)
diff --git a/apps-lib/src/lib/components/tabs.svelte b/apps-lib/src/lib/components/tabs.svelte
@@ -0,0 +1,53 @@
+<script lang="ts">
+ import { glyph, type ITabsBasis } from "..";
+
+ let {
+ basis,
+ }: {
+ basis: ITabsBasis;
+ } = $props();
+
+ let classes_blur = $derived(basis.blur ? `bg-layer-1-surface/30` : ``);
+
+ let el: HTMLElement | null;
+ let el_inner: HTMLElement | null;
+</script>
+
+<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}`}
+>
+ <div
+ bind:this={el_inner}
+ class={`relative flex flex-col h-full w-full justify-start items-center`}
+ >
+ <div
+ class={`absolute top-4 left-0 grid grid-cols-12 flex flex-row w-full justify-center items-center`}
+ >
+ {#each basis.list as tab, tab_i}
+ <button
+ class={`col-span-3 flex flex-col h-full justify-start items-center transition-all`}
+ onclick={async () => {
+ await tab.callback(tab_i);
+ }}
+ >
+ <svelte:component
+ this={glyph}
+ basis={{
+ classes:
+ basis.tab_active === tab_i
+ ? `text-layer-0-glyph text-lineActiveBlue`
+ : `text-layer-0-glyph text-lineMd`,
+ key: tab.icon,
+ dim: `md`,
+ weight:
+ basis.tab_active === tab_i
+ ? tab.active_weight || `fill`
+ : `bold`,
+ }}
+ />
+ </button>
+ {/each}
+ </div>
+ </div>
+</div>
diff --git a/apps-lib/src/lib/index.ts b/apps-lib/src/lib/index.ts
@@ -1,4 +1,5 @@
export * from "./locales/i18n"
+export { default as tabs } from "./components/tabs.svelte"
export { default as trellis } from "./components/trellis.svelte"
export { default as trellis_default_label } from "./components/trellis_default_label.svelte"
export { default as trellis_end } from "./components/trellis_end.svelte"
@@ -8,6 +9,7 @@ export { default as trellis_row_label } from "./components/trellis_row_label.sve
export { default as trellis_title } from "./components/trellis_title.svelte"
export { default as trellis_touch } from "./components/trellis_touch.svelte"
export * from "./types/client"
+export * from "./types/components"
export * from "./types/trellis"
export * from "./types/ui"
export { default as css_static } from "./ui/css_static.svelte"
diff --git a/apps-lib/src/lib/types/client.ts b/apps-lib/src/lib/types/client.ts
@@ -1,6 +1,6 @@
import type { ThemeLayer } from "@radroots/theme";
-import type { IGlyph } from "./ui";
import type { Snippet } from "svelte";
+import type { IGlyph } from "./ui";
export type PropChildren = {
children: Snippet;
@@ -31,71 +31,6 @@ export type GeometryGlyphDimension =
| `${GeometryDimension}-`
| `${GeometryDimension}+`;
-export type GlyphKey = |
- `devices` |
- `lock-key` |
- `gear-fine` |
- `bell-simple` |
- `envelope` |
- `house-line` |
- `arrows-left-right` |
- `list-plus` |
- `squares-four` |
- `list-plus` |
- `app-window` |
- `circle-notch` |
- `subtract-square` |
- `device-tablet-speaker` |
- `weather-cloud` |
- `warning` |
- `circle-notch` |
- `minus` |
- `key` |
- `arrow-u-up-left` |
- `arrow-counter-clockwise` |
- `circle` |
- `check-circle` |
- `circle-dashed` |
- `dots-three` |
- `cards-three` |
- `lightning` |
- `cards` |
- `note-pencil` |
- `tray` |
- `calendar-dots` |
- `notepad` |
- `network` |
- `calendar-blank` |
- `chats-circle` |
- `plant` |
- `farm` |
- `magnifying-glass` |
- `chat-circle-dots` |
- `dots-three-outline` |
- `copy` |
- `circles-four` |
- `waveform` |
- `film-strip` |
- `arrow-up` |
- `arrow-circle-up` |
- `plus` |
- `funnel-simple` |
- `user` |
- `camera` |
- `check` |
- `file` |
- `share-network` |
- `question` |
- `minus-circle` |
- `globe-simple` |
- `globe` |
- `warning-circle` |
- `x` |
- `info` |
- `caret-${GeometryCardinalDirection}` |
- `caret-up-down`;
-
-export type GlyphWeight = `light` | `regular` | `fill` | `bold`; // `thin` `duotone`
export type CallbackPromiseGeneric<T> = (value: T) => Promise<void>;
export type CallbackPromise = () => Promise<void>;
diff --git a/apps-lib/src/lib/types/components.ts b/apps-lib/src/lib/types/components.ts
@@ -0,0 +1,18 @@
+import type { CallbackPromiseGeneric } from "./client";
+import type { GlyphKey, GlyphWeight } from "./ui";
+
+export type ITabsBasisList = {
+ icon: GlyphKey;
+ classes?: string;
+ active_weight?: GlyphWeight;
+ indicator?: string
+ callback: CallbackPromiseGeneric<number>;
+};
+
+export type ITabsBasis = {
+ list: ITabsBasisList[];
+ blur?: boolean;
+ tab_active: number;
+ app_layout: string;
+};
+
diff --git a/apps-lib/src/lib/types/ui.ts b/apps-lib/src/lib/types/ui.ts
@@ -1,5 +1,71 @@
import type { ThemeLayer } from "@radroots/theme";
-import type { GeometryGlyphDimension, ICbOpt, GlyphKey, GlyphWeight } from "./client";
+import type { GeometryCardinalDirection, GeometryGlyphDimension, ICbOpt } from "./client";
+
+export type GlyphKey = |
+ `devices` |
+ `lock-key` |
+ `gear-fine` |
+ `bell-simple` |
+ `envelope` |
+ `house-line` |
+ `arrows-left-right` |
+ `list-plus` |
+ `squares-four` |
+ `list-plus` |
+ `app-window` |
+ `circle-notch` |
+ `subtract-square` |
+ `device-tablet-speaker` |
+ `weather-cloud` |
+ `warning` |
+ `circle-notch` |
+ `minus` |
+ `key` |
+ `arrow-u-up-left` |
+ `arrow-counter-clockwise` |
+ `circle` |
+ `check-circle` |
+ `circle-dashed` |
+ `dots-three` |
+ `cards-three` |
+ `lightning` |
+ `cards` |
+ `note-pencil` |
+ `tray` |
+ `calendar-dots` |
+ `notepad` |
+ `network` |
+ `calendar-blank` |
+ `chats-circle` |
+ `plant` |
+ `farm` |
+ `magnifying-glass` |
+ `chat-circle-dots` |
+ `dots-three-outline` |
+ `copy` |
+ `circles-four` |
+ `waveform` |
+ `film-strip` |
+ `arrow-up` |
+ `arrow-circle-up` |
+ `plus` |
+ `funnel-simple` |
+ `user` |
+ `camera` |
+ `check` |
+ `file` |
+ `share-network` |
+ `question` |
+ `minus-circle` |
+ `globe-simple` |
+ `globe` |
+ `warning-circle` |
+ `x` |
+ `info` |
+ `caret-${GeometryCardinalDirection}` |
+ `caret-up-down`;
+
+export type GlyphWeight = `light` | `regular` | `fill` | `bold`; // `thin` `duotone`
export type IGlyph = ICbOpt & {
layer?: ThemeLayer;
