commit 82a83ec7800be4364cc18dfba4de3b8e182fa9c8
parent 8660ab9e6172ce5714d7ed064af56f47b2b39635
Author: triesap <137732411+triesap@users.noreply.github.com>
Date: Wed, 13 Nov 2024 16:16:43 +0000
apps-lib: edit trellis components. add/edit locales, types, utils
Diffstat:
13 files changed, 94 insertions(+), 34 deletions(-)
diff --git a/apps-lib/src/lib/components/trellis.svelte b/apps-lib/src/lib/components/trellis.svelte
@@ -7,6 +7,7 @@
TrellisDefaultLabel,
TrellisInput,
TrellisOffset,
+ TrellisSelect,
TrellisTitle,
TrellisTouch,
type ITrellis,
@@ -98,6 +99,14 @@
{hide_border_b}
{hide_border_t}
/>
+ {:else if `select` in basis && basis.select}
+ <TrellisSelect
+ basis={basis.select}
+ layer={args.layer}
+ {hide_border_b}
+ {hide_border_t}
+ hide_active={!!basis.hide_active}
+ />
{/if}
</div>
</div>
diff --git a/apps-lib/src/lib/components/trellis_end.svelte b/apps-lib/src/lib/components/trellis_end.svelte
@@ -16,13 +16,13 @@
if (basis.callback) await basis.callback(ev);
}}
>
- {#if basis.icon}
+ {#if basis.glyph}
<Glyph
basis={{
classes: `text-layer-${layer}-glyph-shade ${hide_active ? `` : `group-active:text-layer-${layer}-glyph_a`} translate-y-[1px] opacity-70`,
- dim: `xs`,
+ dim: `xs+`,
weight: `bold`,
- ...basis.icon,
+ ...basis.glyph,
}}
/>
{/if}
diff --git a/apps-lib/src/lib/components/trellis_line.svelte b/apps-lib/src/lib/components/trellis_line.svelte
@@ -1,7 +1,8 @@
<script lang="ts">
- import { fmt_trellis, type CallbackPromiseGeneric } from "$lib";
+ import { fmt_trellis, Loading, type CallbackPromiseGeneric } from "$lib";
import type { ThemeLayer } from "@radroots/theme";
+ export let loading: boolean = false;
export let layer: ThemeLayer;
export let callback: CallbackPromiseGeneric<MouseEvent>;
export let hide_border_t: boolean;
@@ -17,15 +18,23 @@
<div
class={`${fmt_trellis(hide_border_b, hide_border_t)} flex flex-row h-full w-full justify-center items-center border-t-line border-layer-${layer}-surface-edge el-re`}
>
- <div
- class={`relative group flex flex-row h-line w-full pr-[2px] justify-between items-center el-re`}
- >
+ {#if loading}
<div
- class={`flex flex-row h-full w-trellis_display justify-between items-center`}
+ class={`flex flex-row h-full w-full justify-center items-center`}
>
- <slot />
+ <Loading basis={{ dim: `sm` }} />
</div>
- <slot name="end" />
- </div>
+ {:else}
+ <div
+ class={`relative group flex flex-row h-line w-full pr-[2px] justify-between items-center el-re`}
+ >
+ <div
+ class={`flex flex-row h-full w-trellis_display justify-between items-center`}
+ >
+ <slot />
+ </div>
+ <slot name="end" />
+ </div>
+ {/if}
</div>
</button>
diff --git a/apps-lib/src/lib/components/trellis_row_display_value.svelte b/apps-lib/src/lib/components/trellis_row_display_value.svelte
@@ -1,5 +1,10 @@
<script lang="ts">
- import { fmt_cl, Glyph, type ITrellisKindDisplayValue } from "$lib";
+ import {
+ fmt_cl,
+ get_label_classes_kind,
+ Glyph,
+ type ITrellisKindDisplayValue,
+ } from "$lib";
import type { ThemeLayer } from "@radroots/theme";
export let basis: ITrellisKindDisplayValue;
@@ -18,7 +23,8 @@
basis={{
classes:
basis.icon.classes ||
- `text-layer-${layer}-glyph-shade ${hide_active ? `` : `group-active:text-layer-${layer}-glyph_a`}`,
+ `${get_label_classes_kind(layer, `shade`, hide_active)}`,
+ // `text-layer-${layer}-glyph-shade ${hide_active ? `` : `group-active:text-layer-${layer}-glyph_a`}`,
key: basis.icon.key,
weight: `bold`,
dim: `sm`,
diff --git a/apps-lib/src/lib/components/trellis_row_label.svelte b/apps-lib/src/lib/components/trellis_row_label.svelte
@@ -1,9 +1,15 @@
<script lang="ts">
- import { ButtonGlyph, fmt_cl, type ILabelTupFields } from "$lib";
+ import {
+ ButtonGlyph,
+ fmt_cl,
+ get_label_classes_kind,
+ type ILabelTupFields,
+ } from "$lib";
import type { ThemeLayer } from "@radroots/theme";
export let basis: ILabelTupFields;
export let layer: ThemeLayer;
+ export let hide_active: boolean;
</script>
<div class={`flex flex-row h-full items-center justify-between`}>
@@ -11,7 +17,7 @@
<div class={`flex flex-row h-full items-center truncate`}>
{#each basis.left as title_l}
<div
- class={`${fmt_cl(title_l.classes_wrap)} flex flex-row h-full items-center ${title_l.hide_truncate ? `` : `truncate`}`}
+ class={`${fmt_cl(title_l.classes_wrap)} flex flex-row h-full items-center ${get_label_classes_kind(layer, undefined, hide_active)} ${title_l.hide_truncate ? `` : `truncate`}`}
>
{#if `glyph` in title_l}
<div
@@ -21,7 +27,7 @@
</div>
{:else if `value` in title_l}
<p
- class={`${fmt_cl(title_l.classes)} font-sans text-line_display text-layer-${layer}-glyph_d ${title_l.hide_truncate ? `` : `truncate`} el-re`}
+ class={`${fmt_cl(title_l.classes)} font-sans text-line_display ${title_l.hide_truncate ? `` : `truncate`} el-re`}
>
{title_l.value || ``}
</p>
diff --git a/apps-lib/src/lib/components/trellis_select.svelte b/apps-lib/src/lib/components/trellis_select.svelte
@@ -1,31 +1,54 @@
<script lang="ts">
import {
+ Loading,
+ SelectMenu,
TrellisEnd,
+ TrellisLine,
TrellisRowDisplayValue,
TrellisRowLabel,
type ITrellisBasisSelect,
} from "$lib";
import type { ThemeLayer } from "@radroots/theme";
- import TrellisLine from "./trellis_line.svelte";
export let basis: ITrellisBasisSelect;
export let layer: ThemeLayer;
export let hide_border_t: boolean;
export let hide_border_b: boolean;
export let hide_active: boolean;
+
+ $: value = basis.el.value;
+ $: loading = typeof basis?.loading === `boolean` ? basis.loading : false;
</script>
-<TrellisLine {layer} {hide_border_b} {hide_border_t}>
+<TrellisLine
+ {layer}
+ {loading}
+ {hide_border_b}
+ {hide_border_t}
+ callback={basis.callback}
+>
<TrellisRowLabel basis={basis.label} {layer} {hide_active} />
{#if basis.display}
- <TrellisRowDisplayValue
- basis={{ ...basis.display }}
- {layer}
- {hide_active}
- />
+ <SelectMenu {value} basis={basis.el}>
+ <svelte:fragment slot="element">
+ {#if basis.display.loading}
+ <div
+ class={`flex flex-row h-full w-full justify-end items-center`}
+ >
+ <Loading basis={{ dim: `sm` }} />
+ </div>
+ {:else}
+ <TrellisRowDisplayValue
+ basis={{ ...basis.display }}
+ {layer}
+ {hide_active}
+ />
+ {/if}
+ </svelte:fragment>
+ </SelectMenu>
{/if}
<div slot="end">
- {#if basis.end}
+ {#if basis.end && !basis.display.loading}
<TrellisEnd basis={basis.end} {layer} {hide_active} />
{/if}
</div>
diff --git a/apps-lib/src/lib/components/trellis_touch.svelte b/apps-lib/src/lib/components/trellis_touch.svelte
@@ -16,7 +16,7 @@
</script>
<TrellisLine {layer} {hide_border_b} {hide_border_t} callback={basis.callback}>
- <TrellisRowLabel basis={basis.label} {layer} />
+ <TrellisRowLabel basis={basis.label} {layer} {hide_active} />
{#if basis.display}
<TrellisRowDisplayValue
basis={{
diff --git a/apps-lib/src/lib/el/select_menu.svelte b/apps-lib/src/lib/el/select_menu.svelte
@@ -20,7 +20,7 @@
bind:this={el_wrap}
>
<div
- class={`${fmt_cl(basis.classes)} z-10 absolute top-0 left-0 flex flex-row h-full w-full justify-end items-center ${classes_layer}`}
+ class={`${fmt_cl(basis.classes)} z-20 absolute top-0 left-0 flex flex-row h-full w-full justify-end items-center ${classes_layer}`}
>
<select
class={`select select-ghost h-full w-full bg-transparent focus:border-0 focus:outline-0 text-transparent focus:text-transparent`}
diff --git a/apps-lib/src/lib/index.ts b/apps-lib/src/lib/index.ts
@@ -33,7 +33,9 @@ export * from "./utils/client";
export * from "./utils/conf";
export * from "./utils/time";
export * from "./utils/geo";
+export { default as TrellisLine } from "./components/trellis_line.svelte";
export { default as EnvelopeLower } from "./components/envelope_lower.svelte";
+export { default as TrellisSelect } from "./components/trellis_select.svelte";
export { default as TrellisInput } from "./components/trellis_input.svelte";
export { default as TrellisEnd } from "./components/trellis_end.svelte";
export { default as ButtonGlyph } from "./components/button_glyph.svelte";
diff --git a/apps-lib/src/lib/locales/en/common.json b/apps-lib/src/lib/locales/en/common.json
@@ -1,4 +1,9 @@
{
+ "dark": "Dark",
+ "light": "Light",
+ "color_mode": "Color mode",
+ "endpoint": "Endpoint",
+ "new": "New",
"accept": "Accept",
"activation": "Activation",
"active": "Active",
diff --git a/apps-lib/src/lib/locales/en/icu.json b/apps-lib/src/lib/locales/en/icu.json
@@ -1,4 +1,5 @@
{
+ "toggle_*": "Toggle {value}",
"*_as": "{value} as",
"*_available": "{value} Available",
"*_copied": "{value} copied",
diff --git a/apps-lib/src/lib/types/trellis.ts b/apps-lib/src/lib/types/trellis.ts
@@ -1,4 +1,4 @@
-import type { CallbackPromise, GlyphKey, ICbGOpt, ICbOpt, ICbROpt, IClOpt, IGlOpt, IGlyph, IGlyphCircle, IInputElement, ILabel, ILabelOpt, ILabelTup, ILy } from "$lib";
+import type { CallbackPromise, GlyphKey, ICbGOpt, ICbOpt, ICbROpt, IClOpt, IGl, IGlOpt, IGlyph, IGlyphCircle, IInputElement, ILabel, ILabelOpt, ILabelTup, ILoadingOpt, ILy, ISelectElement } from "$lib";
export type ITrellis = ILy &
IClOpt &
@@ -72,12 +72,10 @@ export type ITrellisBasisOffset = ICbGOpt<MouseEvent> &
export type ITrellisKindDisplay = {
display?: ITrellisKindDisplayValue;
}
-export type ITrellisKindDisplayValue = ICbGOpt<MouseEvent> &
+export type ITrellisKindDisplayValue = ICbGOpt<MouseEvent> & ILoadingOpt &
(ITrellisKindDisplayValueIcon | ILabel);
-export type ITrellisBasisTouchEnd = ICbGOpt<MouseEvent> & {
- icon: IGlyph;
-};
+export type ITrellisBasisTouchEnd = ICbGOpt<MouseEvent> & IGl;
export type ITrellisKindDisplayValueIcon = {
icon: {
@@ -117,7 +115,8 @@ export type ITrellisKindSelect = ITrellisBasis & {
select: ITrellisBasisSelect;
};
-export type ITrellisBasisSelect =
- ILabelTup & ITrellisKindDisplay & {
+export type ITrellisBasisSelect = ICbGOpt<MouseEvent> &
+ ILabelTup & ITrellisKindDisplay & ILoadingOpt & {
end?: ITrellisBasisTouchEnd;
+ el: ISelectElement & { value: string; };
};
diff --git a/apps-lib/src/lib/utils/client.ts b/apps-lib/src/lib/utils/client.ts
@@ -25,7 +25,7 @@ export const get_label_classes = (layer: ThemeLayer, glyph_kind: LayerGlyphBasis
return `text-layer-${layer}-glyph${glyph_kind ? `${glyph_kind}` : `_d`} ${hide_active ? `` : `group-active:text-layer-${layer}-glyph_a`}`
};
-export const get_label_classes_ext = (layer: ThemeLayer, label_kind: LabelFieldKind | undefined, hide_active: boolean): string => {
+export const get_label_classes_kind = (layer: ThemeLayer, label_kind: LabelFieldKind | undefined, hide_active: boolean): string => {
return `text-layer-${layer}-glyph${label_kind ? `-${label_kind}` : ``} ${hide_active ? `` : `group-active:text-layer-${layer}-glyph${label_kind ? `-${label_kind}_a` : `_a`}`}`
};
