web_lib

commit 18d1b82f879400a04983facf0dd1b5e263366f5f
parent 64a177062ba58185715aaa83d15579561c575fc6
Author: triesap <137732411+triesap@users.noreply.github.com>
Date:   Sat, 31 Aug 2024 13:38:55 +0000

apps-lib: add loading component, edit trellis row label

Diffstat:
M
apps-lib/src/lib/components/trellis_row_label.svelte
 | 
6
++++--
M
apps-lib/src/lib/index.ts
 | 
1
+
M
apps-lib/src/lib/types/ui.ts
 | 
8
++++++++
A
apps-lib/src/lib/ui/loading.svelte
 | 
64
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

4 files changed, 77 insertions(+), 2 deletions(-)
diff --git a/apps-lib/src/lib/components/trellis_row_label.svelte b/apps-lib/src/lib/components/trellis_row_label.svelte
@@ -7,7 +7,7 @@
 	export let hide_active: boolean;
 </script>
 
-<div class={`flex flex-row h-full items-center justify-between`}>
+<div class={`flex flex-row h-full w-full items-center justify-between`}>
 	{#if basis.left && basis.left.length}
 		<div class={`flex flex-row h-full w-content items-center`}>
 			{#each basis.left as title_l}
@@ -34,7 +34,9 @@
 		</div>
 	{/if}
 	{#if basis.right && basis.right.length}
-		<div class={`flex flex-row h-full w-content items-center justify-end`}>
+		<div
+			class={`flex flex-row h-full w-content items-center justify-end pr-4`}
+		>
 			{#each basis.right.reverse() as title_r}
 				<div
 					class={`${fmt_cl(title_r.classes)} flex flex-row h-full max-w-fit gap-1 items-center ${title_r.hide_truncate ? `` : `truncate`}`}
diff --git a/apps-lib/src/lib/index.ts b/apps-lib/src/lib/index.ts
@@ -17,6 +17,7 @@ export * from "./types/ui"
 export { default as css_static } from "./ui/css_static.svelte"
 export { default as fill } from "./ui/fill.svelte"
 export { default as glyph } from "./ui/glyph.svelte"
+export { default as loading } from "./ui/loading.svelte"
 export * from "./utils/client"
 export * from "./utils/dom"
 export * from "./utils/ndk"
diff --git a/apps-lib/src/lib/types/ui.ts b/apps-lib/src/lib/types/ui.ts
@@ -74,3 +74,11 @@ export type IGlyph = ICbOpt & {
     key: GlyphKey;
     dim?: GeometryGlyphDimension;
 };
+
+export type ILoadingBlades = 6 | 12;
+
+export type ILoading = {
+    classes?: string;
+    blades?: ILoadingBlades;
+    dim?: GeometryGlyphDimension;
+};
diff --git a/apps-lib/src/lib/ui/loading.svelte b/apps-lib/src/lib/ui/loading.svelte
@@ -0,0 +1,64 @@
+<script lang="ts">
+    import { fmt_cl, type GeometryGlyphDimension, type ILoading } from "$lib";
+
+    export const lm: Map<GeometryGlyphDimension, [string, string]> = new Map([
+        [`xl`, [`h-[36px] w-[36px]`, `text-[22px]`]],
+        [`lg`, [`h-[32px] w-[32px]`, `text-[18px]`]],
+        [`md`, [`h-[32px] w-[32px]`, `text-[18px]`]],
+        [`sm`, [`h-[32px] w-[32px]`, `text-[18px]`]],
+        [`xs`, [`h-[32px] w-[32px]`, `text-[18px]`]],
+    ]);
+
+    export let basis: ILoading | undefined = undefined;
+    $: basis = basis;
+
+    $: dim = lm.get(basis?.dim || "sm");
+    $: num_blades = basis?.blades || 12;
+</script>
+
+<div
+    class={`relative flex flex-row justify-center items-center ${fmt_cl(dim?.[0])} fade-in transition-all`}
+>
+    <div
+        class={`${num_blades === 12 ? `spinner12 center` : `spinner6 center`} ${fmt_cl(dim?.[1])}`}
+    >
+        <div
+            class={`${num_blades === 12 ? `spinner12-blade` : `spinner6-blade`}`}
+        />
+        <div
+            class={`${num_blades === 12 ? `spinner12-blade` : `spinner6-blade`}`}
+        />
+        <div
+            class={`${num_blades === 12 ? `spinner12-blade` : `spinner6-blade`}`}
+        />
+        <div
+            class={`${num_blades === 12 ? `spinner12-blade` : `spinner6-blade`}`}
+        />
+        <div
+            class={`${num_blades === 12 ? `spinner12-blade` : `spinner6-blade`}`}
+        />
+        <div
+            class={`${num_blades === 12 ? `spinner12-blade` : `spinner6-blade`}`}
+        />
+        {#if num_blades === 12}
+            <div
+                class={`${num_blades === 12 ? `spinner12-blade` : `spinner6-blade`}`}
+            />
+            <div
+                class={`${num_blades === 12 ? `spinner12-blade` : `spinner6-blade`}`}
+            />
+            <div
+                class={`${num_blades === 12 ? `spinner12-blade` : `spinner6-blade`}`}
+            />
+            <div
+                class={`${num_blades === 12 ? `spinner12-blade` : `spinner6-blade`}`}
+            />
+            <div
+                class={`${num_blades === 12 ? `spinner12-blade` : `spinner6-blade`}`}
+            />
+            <div
+                class={`${num_blades === 12 ? `spinner12-blade` : `spinner6-blade`}`}
+            />
+        {/if}
+    </div>
+</div>