commit 5a346fa792d229459e7ea94ea842ad6b9d60c5cc
parent d5c9d86649f174c96f37f559fa24316915334a99
Author: triesap <137732411+triesap@users.noreply.github.com>
Date: Fri, 27 Sep 2024 06:09:39 +0000
apps-lib: add label swap component, edit nav option
Diffstat:
4 files changed, 93 insertions(+), 54 deletions(-)
diff --git a/apps-lib/src/lib/components/nav_option.svelte b/apps-lib/src/lib/components/nav_option.svelte
@@ -34,24 +34,24 @@
/>
{/if}
{#if `label` in basis && basis.label}
- {#if basis.label.swap}
+ {#if `swap` in basis.label}
<label bind:this={el_swap} class={`swap${classes_swap}`}>
<div class="swap-off">
<p
class={`${fmt_cl(basis.label.classes)} font-sans text-navPrevious text-layer-${layer}-glyph-hl -translate-y-[1px] transition-all`}
>
- {basis.label.value}
+ {basis.label.swap.value_on}
</p>
</div>
<div class="swap-on">
<p
class={`${fmt_cl(basis.label.classes)} font-sans text-navPrevious text-layer-${layer}-glyph-hl group-active:opacity-60 -translate-y-[1px] transition-all`}
>
- {basis.label.swap}
+ {basis.label.swap.value_off}
</p>
</div>
</label>
- {:else}
+ {:else if `value` in basis.label}
<p
class={`${fmt_cl(basis.label.classes)} font-sans text-navPrevious text-layer-1-glyph-hl group-active:opacity-60 transition-opacity`}
>
diff --git a/apps-lib/src/lib/index.ts b/apps-lib/src/lib/index.ts
@@ -1,47 +1,47 @@
-export { default as AppConfig, show_toast } from "./components/app_config.svelte"
-export { default as ButtonLoading } from "./components/button_loading.svelte"
-export { default as Envelope } from "./components/envelope.svelte"
-export { default as EnvelopeLower } from "./components/envelope_lower.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 NavOption } from "./components/nav_option.svelte"
-export { default as NotifyGlyph } from "./components/notify_glyph.svelte"
-export { default as Tabs } from "./components/tabs.svelte"
-export { default as Trellis } from "./components/trellis.svelte"
-export { default as TrellisDefaultLabel } from "./components/trellis_default_label.svelte"
-export { default as TrellisEnd } from "./components/trellis_end.svelte"
-export { default as TrellisInput } from "./components/trellis_input.svelte"
-export { default as TrellisOffset } from "./components/trellis_offset.svelte"
-export { default as TrellisRowDisplayValue } from "./components/trellis_row_display_value.svelte"
-export { default as TrellisRowLabel } from "./components/trellis_row_label.svelte"
-export { default as TrellisTitle } from "./components/trellis_title.svelte"
-export { default as TrellisTouch } from "./components/trellis_touch.svelte"
-export * from "./locales/i18n"
-export * from "./stores/client"
-export * from "./stores/ndk"
-export * from "./types/client"
-export * from "./types/components"
-export * from "./types/trellis"
-export * from "./types/ui"
-export { default as CssStatic } from "./ui/css_static.svelte"
-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 InputElement } from "./ui/input_element.svelte"
-export { default as Loading } from "./ui/loading.svelte"
-export { default as SelectElement } from "./ui/select_element.svelte"
-export { default as Toast } from "./ui/toast.svelte"
-export * from "./utils/client"
-export * from "./utils/dom"
-export * from "./utils/geo"
-export * from "./utils/ndk"
-export * from "./utils/routes"
-export * from "./utils/time"
-
+export * from "./locales/i18n";
+export { default as SelectElement } from "./ui/select_element.svelte";
+export { default as Toast } from "./ui/toast.svelte";
+export { default as CssStatic } from "./ui/css_static.svelte";
+export { default as Divider } from "./ui/divider.svelte";
+export { default as LabelSwap } from "./ui/label_swap.svelte";
+export { default as Glyph } from "./ui/glyph.svelte";
+export { default as Loading } from "./ui/loading.svelte";
+export { default as InputElement } from "./ui/input_element.svelte";
+export { default as Fill } from "./ui/fill.svelte";
+export * from "./types/trellis";
+export * from "./types/components";
+export * from "./types/client";
+export * from "./types/ui";
+export * from "./stores/ndk";
+export * from "./stores/client";
+export * from "./utils/routes";
+export * from "./utils/dom";
+export * from "./utils/ndk";
+export * from "./utils/client";
+export * from "./utils/time";
+export * from "./utils/geo";
+export { default as EnvelopeLower } from "./components/envelope_lower.svelte";
+export { default as TrellisInput } from "./components/trellis_input.svelte";
+export { default as TrellisEnd } from "./components/trellis_end.svelte";
+export { default as Envelope } from "./components/envelope.svelte";
+export { default as AppConfig, init_toast, show_toast } from "./components/app_config.svelte";
+export { default as LayoutTrellis } from "./components/layout_trellis.svelte";
+export { default as Tabs } from "./components/tabs.svelte";
+export { default as TrellisTitle } from "./components/trellis_title.svelte";
+export { default as TrellisTouch } from "./components/trellis_touch.svelte";
+export { default as Trellis } from "./components/trellis.svelte";
+export { default as TrellisRowDisplayValue } from "./components/trellis_row_display_value.svelte";
+export { default as LayoutWindow } from "./components/layout_window.svelte";
+export { default as LayoutTrellisLine } from "./components/layout_trellis_line.svelte";
+export { default as NotifyGlyph } from "./components/notify_glyph.svelte";
+export { default as TrellisDefaultLabel } from "./components/trellis_default_label.svelte";
+export { default as EnvelopeTitled } from "./components/envelope_titled.svelte";
+export { default as ButtonLoading } from "./components/button_loading.svelte";
+export { default as InputForm } from "./components/input_form.svelte";
+export { default as TrellisOffset } from "./components/trellis_offset.svelte";
+export { default as Nav } from "./components/nav.svelte";
+export { default as LoadingView } from "./components/loading_view.svelte";
+export { default as NavOption } from "./components/nav_option.svelte";
+export { default as InputSelect } from "./components/input_select.svelte";
+export { default as TrellisRowLabel } from "./components/trellis_row_label.svelte";
+export { default as LayoutView } from "./components/layout_view.svelte";
diff --git a/apps-lib/src/lib/types/client.ts b/apps-lib/src/lib/types/client.ts
@@ -125,15 +125,26 @@ export type ILabelTupFields = {
right?: ILableFields[];
};
+export type ILableFieldsSwap = {
+ on?: boolean;
+ value_on: string;
+ value_off: string;
+
+};
+
+export type ILabelSwap = {
+ swap: ILableFieldsSwap;
+}
+
export type ILableFields = IGlOpt & {
- value: string;
- swap?: string;
classes_wrap?: string
classes?: string;
kind?: LabelFieldKind
hide_truncate?: boolean;
hide_active?: boolean;
-};
+} & ({
+ value: string;
+} | ILabelSwap);
export type LabelFieldKind = `link` | `on` | `shade`;
diff --git a/apps-lib/src/lib/ui/label_swap.svelte b/apps-lib/src/lib/ui/label_swap.svelte
@@ -0,0 +1,28 @@
+<!-- svelte-ignore a11y-label-has-associated-control -->
+<script lang="ts">
+ import { fmt_cl, type IClOpt, type ILabelSwap, type ILyOpt } from "$lib";
+
+ export let el_swap: HTMLLabelElement | null = null;
+ export let basis: IClOpt & ILabelSwap & ILyOpt & {};
+ $: basis = basis;
+
+ $: layer = basis?.layer ? basis.layer : 1;
+ $: classes_swap = basis.swap?.on ? ` swap-active` : ``;
+</script>
+
+<label bind:this={el_swap} class={`swap${classes_swap}`}>
+ <div class="swap-off">
+ <p
+ class={`${fmt_cl(basis.classes)} font-sans text-navPrevious text-layer-${layer}-glyph-hl -translate-y-[1px] transition-all`}
+ >
+ {basis.swap.value_off}
+ </p>
+ </div>
+ <div class="swap-on">
+ <p
+ class={`${fmt_cl(basis.classes)} font-sans text-navPrevious text-layer-${layer}-glyph-hl group-active:opacity-60 -translate-y-[1px] transition-all`}
+ >
+ {basis.swap.value_on}
+ </p>
+ </div>
+</label>
