commit 04e54a1408ddd41ec5c678af335ee3d333166c2b
parent 3a93a94aa0da0fd6723b256a6e880552d59f73e4
Author: triesap <137732411+triesap@users.noreply.github.com>
Date: Tue, 17 Sep 2024 10:58:39 +0000
apps-lib: edit layout view and tabs components, add locales, edit types, edit ui
Diffstat:
8 files changed, 54 insertions(+), 29 deletions(-)
diff --git a/apps-lib/src/lib/components/layout_view.svelte b/apps-lib/src/lib/components/layout_view.svelte
@@ -12,7 +12,7 @@
import { onDestroy, onMount } from "svelte";
const styles: Record<AppLayoutKey, string> = {
- base: "",
+ base: "pt-4",
lg: "pt-16",
};
diff --git a/apps-lib/src/lib/components/tabs.svelte b/apps-lib/src/lib/components/tabs.svelte
@@ -5,6 +5,8 @@
app_layout,
app_tab_active,
app_tabs_blur,
+ fmt_cl,
+ sleep,
} from "$lib";
export let basis: ITabsBasis;
@@ -12,13 +14,15 @@
$: classes_blur = $app_tabs_blur ? `bg-layer-1-surface/30` : ``;
+ let tab_focus: number | null = null;
+
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_${$app_layout} ${classes_blur}`}
+ class={`${fmt_cl(basis?.classes)} 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}
@@ -27,30 +31,42 @@
<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`}
- on:click={async () => {
- if (!tab.hide_active) app_tab_active.set(tab_i);
- await tab.callback(tab_i);
- }}
- >
- <Glyph
- basis={{
- classes:
- $app_tab_active === tab_i
- ? `text-layer-2-glyph text-lineActiveBlue`
- : `text-layer-2-glyph text-lineMd`,
- key: tab.icon,
- dim: `md`,
- weight:
- $app_tab_active === tab_i
- ? tab.active_weight || `fill`
- : `bold`,
+ {#if $$slots.default}
+ <slot />
+ {:else}
+ {#each basis?.list || [] as tab, tab_i}
+ <button
+ class={`col-span-3 flex flex-col h-full justify-start items-center transition-all`}
+ on:click={async () => {
+ tab_focus = tab_i;
+ if (!tab.hide_active) app_tab_active.set(tab_i);
+ await tab.callback(tab_i);
+ await sleep(150);
+ tab_focus = null;
}}
- />
- </button>
- {/each}
+ >
+ <Glyph
+ basis={{
+ classes:
+ !basis.hide_active &&
+ $app_tab_active === tab_i
+ ? `text-layer-2-glyph text-lineActiveBlue`
+ : `text-layer-2-glyph text-lineMd`,
+ key: tab.icon,
+ dim: `md`,
+ weight:
+ typeof tab_focus === `number` &&
+ tab_focus === tab_i
+ ? `fill`
+ : !basis.hide_active &&
+ $app_tab_active === tab_i
+ ? tab.active_weight || `fill`
+ : `bold`,
+ }}
+ />
+ </button>
+ {/each}
+ {/if}
</div>
</div>
</div>
diff --git a/apps-lib/src/lib/index.ts b/apps-lib/src/lib/index.ts
@@ -32,6 +32,7 @@ export { default as Divider } from "./ui/divider.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 { default as Loading2 } from "./ui/loading2.svelte"
export * from "./utils/client"
export * from "./utils/dom"
export * from "./utils/geo"
diff --git a/apps-lib/src/lib/locales/en/common.json b/apps-lib/src/lib/locales/en/common.json
@@ -1,4 +1,6 @@
{
+ "from": "From",
+ "to": "To",
"inbox": "Inbox",
"submit": "Submit",
"optional": "Optional",
diff --git a/apps-lib/src/lib/types/client.ts b/apps-lib/src/lib/types/client.ts
@@ -24,6 +24,7 @@ export type GeometryDimension =
export type GeometryGlyphDimension =
| `${GeometryDimension}`
| `${GeometryDimension}-`
+ | `${GeometryDimension}--`
| `${GeometryDimension}+`;
diff --git a/apps-lib/src/lib/types/components.ts b/apps-lib/src/lib/types/components.ts
@@ -10,11 +10,10 @@ export type ITabsBasisList = {
callback: CallbackPromiseGeneric<number>;
};
-export type ITabsBasis = {
- list: ITabsBasisList[];
+export type ITabsBasis = IClOpt & {
+ list?: ITabsBasisList[];
blur?: boolean;
- tab_active: number;
- app_layout: string;
+ hide_active?: boolean;
};
export type IFormField = {
diff --git a/apps-lib/src/lib/types/ui.ts b/apps-lib/src/lib/types/ui.ts
@@ -4,6 +4,10 @@ import type { GeometryCardinalDirection, GeometryGlyphDimension, ICbOpt } from "
export type GlyphKeyCurrency = `dollar` | `eur`;
export type GlyphKey = |
+ `note-pencil` |
+ `share-fat` |
+ `folder` |
+ `trash` |
`plus-circle` |
`currency-${GlyphKeyCurrency}` |
`arrow-down` |
@@ -91,6 +95,7 @@ export type ILoadingBlades = 6 | 12;
export type ILoading = {
classes?: string;
+ color?: 'white';
blades?: ILoadingBlades;
dim?: GeometryGlyphDimension;
};
diff --git a/apps-lib/src/lib/ui/glyph.svelte b/apps-lib/src/lib/ui/glyph.svelte
@@ -4,6 +4,7 @@
import { fmt_cl } from "../utils/client";
const glyph_map: Map<GeometryGlyphDimension, string> = new Map([
+ [`xs--`, `text-[12px]`],
[`xs-`, `text-[13px]`],
[`xs`, `text-[15px]`],
[`xs+`, `text-[18px]`],
