commit 448148b55b9b61490b2299cebb99bc0160c48216
parent 43697d1344ff8f6014faa279af8d7337c0f969b4
Author: triesap <137732411+triesap@users.noreply.github.com>
Date: Mon, 28 Oct 2024 02:27:31 +0000
apps-lib: edit entry wrap basis type and styles. edit trellis layout line notify styles. edit select element add arrows glyph. add/edit locales, types
Diffstat:
8 files changed, 70 insertions(+), 29 deletions(-)
diff --git a/apps-lib/src/lib/components/entry_wrap.svelte b/apps-lib/src/lib/components/entry_wrap.svelte
@@ -10,12 +10,12 @@
$: classes_layer =
layer === false
? `bg-transparent`
- : `bg-layer-${layer}-surface ${basis?.style_a ? `active:bg-layer-${layer}-surface_a` : ``}`;
+ : `bg-layer-${layer}-surface text-layer-${layer}-glyph_d ${basis?.style_a ? `active:bg-layer-${layer}-surface_a` : ``}`;
</script>
<button
id={basis?.id || null}
- class={`${fmt_cl(basis?.classes)} relative entry-line-wrap pl-6 pr-4 h-entry_${basis?.style ? basis.style : `line`} rounded-touch ${classes_layer} el-re`}
+ class={`${fmt_cl(basis?.classes)} relative entry-line-wrap ${!basis.no_pad ? ` pl-6 pr-4` : ``} h-entry_${basis?.style ? basis.style : `line`} rounded-touch ${classes_layer} el-re`}
>
<slot />
</button>
diff --git a/apps-lib/src/lib/components/layout_trellis_line.svelte b/apps-lib/src/lib/components/layout_trellis_line.svelte
@@ -38,32 +38,28 @@
</p>
{/if}
{#if basis?.notify}
- <div
+ <button
in:fade={{ duration: 200 }}
out:fade={{ delay: 50, duration: 200 }}
- class={`${fmt_cl(basis?.notify.classes)} flex flex-row justify-start items-center el-re`}
+ on:click={async () => {
+ await basis?.notify?.callback();
+ }}
+ class={`${fmt_cl(basis?.notify.classes || `w-full`)} flex flex-row gap-1 justify-end items-center text-layer-1-glyph_d el-re`}
>
- <button
- class={`flex flex-row justify-center items-center text-layer-2-glyph/80`}
- on:click={async () => {
- await basis?.notify?.callback();
- }}
- >
- {#if `glyph` in basis?.notify && basis?.notify?.glyph && !basis.notify.glyph_last}
- <Glyph basis={basis.notify.glyph} />
- {/if}
- {#if `label` in basis?.notify && basis?.notify?.label && `value` in basis?.notify?.label}
- <p
- class={`${fmt_cl(basis?.notify.label.classes)} font-sans font-[500] uppercase text-xs`}
- >
- {basis?.notify.label.value}
- </p>
- {/if}
- {#if `glyph` in basis?.notify && basis?.notify?.glyph && basis.notify.glyph_last}
- <Glyph basis={basis.notify.glyph} />
- {/if}
- </button>
- </div>
+ {#if `glyph` in basis?.notify && basis?.notify?.glyph && !basis.notify.glyph_last}
+ <Glyph basis={basis.notify.glyph} />
+ {/if}
+ {#if `label` in basis?.notify && basis?.notify?.label && `value` in basis?.notify?.label}
+ <p
+ class={`${fmt_cl(basis?.notify.label.classes)} font-sans font-[500] uppercase text-xs`}
+ >
+ {basis?.notify.label.value}
+ </p>
+ {/if}
+ {#if `glyph` in basis?.notify && basis?.notify?.glyph && basis.notify.glyph_last}
+ <Glyph basis={basis.notify.glyph} />
+ {/if}
+ </button>
{/if}
</div>
{/if}
diff --git a/apps-lib/src/lib/el/css_static.svelte b/apps-lib/src/lib/el/css_static.svelte
@@ -1 +1 @@
-<div class="hidden bg-layer-0-surface active:bg-layer-0-surface group-active:bg-layer-0-surface focus:bg-layer-0-surface group-focus:bg-layer-0-surface border-layer-0-surface active:border-layer-0-surface group-active:border-layer-0-surface focus:border-layer-0-surface group-focus:border-layer-0-surface bg-layer-0-surface_a active:bg-layer-0-surface_a group-active:bg-layer-0-surface_a focus:bg-layer-0-surface_a group-focus:bg-layer-0-surface_a border-layer-0-surface_a active:border-layer-0-surface_a group-active:border-layer-0-surface_a focus:border-layer-0-surface_a group-focus:border-layer-0-surface_a bg-layer-0-surface_w active:bg-layer-0-surface_w group-active:bg-layer-0-surface_w focus:bg-layer-0-surface_w group-focus:bg-layer-0-surface_w border-layer-0-surface_w active:border-layer-0-surface_w group-active:border-layer-0-surface_w focus:border-layer-0-surface_w group-focus:border-layer-0-surface_w bg-layer-0-surface-edge active:bg-layer-0-surface-edge group-active:bg-layer-0-surface-edge focus:bg-layer-0-surface-edge group-focus:bg-layer-0-surface-edge border-layer-0-surface-edge active:border-layer-0-surface-edge group-active:border-layer-0-surface-edge focus:border-layer-0-surface-edge group-focus:border-layer-0-surface-edge bg-layer-0-surface-blur active:bg-layer-0-surface-blur group-active:bg-layer-0-surface-blur focus:bg-layer-0-surface-blur group-focus:bg-layer-0-surface-blur border-layer-0-surface-blur active:border-layer-0-surface-blur group-active:border-layer-0-surface-blur focus:border-layer-0-surface-blur group-focus:border-layer-0-surface-blur bg-layer-1-surface active:bg-layer-1-surface group-active:bg-layer-1-surface focus:bg-layer-1-surface group-focus:bg-layer-1-surface border-layer-1-surface active:border-layer-1-surface group-active:border-layer-1-surface focus:border-layer-1-surface group-focus:border-layer-1-surface bg-layer-1-surface_a active:bg-layer-1-surface_a group-active:bg-layer-1-surface_a focus:bg-layer-1-surface_a group-focus:bg-layer-1-surface_a border-layer-1-surface_a active:border-layer-1-surface_a group-active:border-layer-1-surface_a focus:border-layer-1-surface_a group-focus:border-layer-1-surface_a bg-layer-1-surface-edge active:bg-layer-1-surface-edge group-active:bg-layer-1-surface-edge focus:bg-layer-1-surface-edge group-focus:bg-layer-1-surface-edge border-layer-1-surface-edge active:border-layer-1-surface-edge group-active:border-layer-1-surface-edge focus:border-layer-1-surface-edge group-focus:border-layer-1-surface-edge bg-layer-1-surface-err active:bg-layer-1-surface-err group-active:bg-layer-1-surface-err focus:bg-layer-1-surface-err group-focus:bg-layer-1-surface-err border-layer-1-surface-err active:border-layer-1-surface-err group-active:border-layer-1-surface-err focus:border-layer-1-surface-err group-focus:border-layer-1-surface-err bg-layer-1-surface-focus active:bg-layer-1-surface-focus group-active:bg-layer-1-surface-focus focus:bg-layer-1-surface-focus group-focus:bg-layer-1-surface-focus border-layer-1-surface-focus active:border-layer-1-surface-focus group-active:border-layer-1-surface-focus focus:border-layer-1-surface-focus group-focus:border-layer-1-surface-focus bg-layer-2-surface active:bg-layer-2-surface group-active:bg-layer-2-surface focus:bg-layer-2-surface group-focus:bg-layer-2-surface border-layer-2-surface active:border-layer-2-surface group-active:border-layer-2-surface focus:border-layer-2-surface group-focus:border-layer-2-surface bg-layer-2-surface_a active:bg-layer-2-surface_a group-active:bg-layer-2-surface_a focus:bg-layer-2-surface_a group-focus:bg-layer-2-surface_a border-layer-2-surface_a active:border-layer-2-surface_a group-active:border-layer-2-surface_a focus:border-layer-2-surface_a group-focus:border-layer-2-surface_a bg-layer-2-surface-edge active:bg-layer-2-surface-edge group-active:bg-layer-2-surface-edge focus:bg-layer-2-surface-edge group-focus:bg-layer-2-surface-edge border-layer-2-surface-edge active:border-layer-2-surface-edge group-active:border-layer-2-surface-edge focus:border-layer-2-surface-edge group-focus:border-layer-2-surface-edge text-layer-0-glyph active:text-layer-0-glyph group-active:text-layer-0-glyph focus:text-layer-0-glyph group-focus:text-layer-0-glyph text-layer-0-glyph_a active:text-layer-0-glyph_a group-active:text-layer-0-glyph_a focus:text-layer-0-glyph_a group-focus:text-layer-0-glyph_a text-layer-0-glyph-hl active:text-layer-0-glyph-hl group-active:text-layer-0-glyph-hl focus:text-layer-0-glyph-hl group-focus:text-layer-0-glyph-hl text-layer-0-glyph-hl_a active:text-layer-0-glyph-hl_a group-active:text-layer-0-glyph-hl_a focus:text-layer-0-glyph-hl_a group-focus:text-layer-0-glyph-hl_a text-layer-0-glyph-shade active:text-layer-0-glyph-shade group-active:text-layer-0-glyph-shade focus:text-layer-0-glyph-shade group-focus:text-layer-0-glyph-shade text-layer-0-glyph-label active:text-layer-0-glyph-label group-active:text-layer-0-glyph-label focus:text-layer-0-glyph-label group-focus:text-layer-0-glyph-label text-layer-1-glyph active:text-layer-1-glyph group-active:text-layer-1-glyph focus:text-layer-1-glyph group-focus:text-layer-1-glyph text-layer-1-glyph_a active:text-layer-1-glyph_a group-active:text-layer-1-glyph_a focus:text-layer-1-glyph_a group-focus:text-layer-1-glyph_a text-layer-1-glyph_d active:text-layer-1-glyph_d group-active:text-layer-1-glyph_d focus:text-layer-1-glyph_d group-focus:text-layer-1-glyph_d text-layer-1-glyph_pl active:text-layer-1-glyph_pl group-active:text-layer-1-glyph_pl focus:text-layer-1-glyph_pl group-focus:text-layer-1-glyph_pl text-layer-1-glyph-hl active:text-layer-1-glyph-hl group-active:text-layer-1-glyph-hl focus:text-layer-1-glyph-hl group-focus:text-layer-1-glyph-hl text-layer-1-glyph-hl_a active:text-layer-1-glyph-hl_a group-active:text-layer-1-glyph-hl_a focus:text-layer-1-glyph-hl_a group-focus:text-layer-1-glyph-hl_a text-layer-1-glyph-shade active:text-layer-1-glyph-shade group-active:text-layer-1-glyph-shade focus:text-layer-1-glyph-shade group-focus:text-layer-1-glyph-shade text-layer-1-glyph-label active:text-layer-1-glyph-label group-active:text-layer-1-glyph-label focus:text-layer-1-glyph-label group-focus:text-layer-1-glyph-label text-layer-2-glyph active:text-layer-2-glyph group-active:text-layer-2-glyph focus:text-layer-2-glyph group-focus:text-layer-2-glyph text-layer-2-glyph_a active:text-layer-2-glyph_a group-active:text-layer-2-glyph_a focus:text-layer-2-glyph_a group-focus:text-layer-2-glyph_a text-layer-2-glyph_pl active:text-layer-2-glyph_pl group-active:text-layer-2-glyph_pl focus:text-layer-2-glyph_pl group-focus:text-layer-2-glyph_pl text-layer-2-glyph-hl active:text-layer-2-glyph-hl group-active:text-layer-2-glyph-hl focus:text-layer-2-glyph-hl group-focus:text-layer-2-glyph-hl text-layer-2-glyph-hl_a active:text-layer-2-glyph-hl_a group-active:text-layer-2-glyph-hl_a focus:text-layer-2-glyph-hl_a group-focus:text-layer-2-glyph-hl_a text-layer-2-glyph-shade active:text-layer-2-glyph-shade group-active:text-layer-2-glyph-shade focus:text-layer-2-glyph-shade group-focus:text-layer-2-glyph-shade"></div>
+<div class="hidden bg-layer-0-surface active:bg-layer-0-surface group-active:bg-layer-0-surface focus:bg-layer-0-surface group-focus:bg-layer-0-surface border-layer-0-surface active:border-layer-0-surface group-active:border-layer-0-surface focus:border-layer-0-surface group-focus:border-layer-0-surface bg-layer-0-surface_a active:bg-layer-0-surface_a group-active:bg-layer-0-surface_a focus:bg-layer-0-surface_a group-focus:bg-layer-0-surface_a border-layer-0-surface_a active:border-layer-0-surface_a group-active:border-layer-0-surface_a focus:border-layer-0-surface_a group-focus:border-layer-0-surface_a bg-layer-0-surface_w active:bg-layer-0-surface_w group-active:bg-layer-0-surface_w focus:bg-layer-0-surface_w group-focus:bg-layer-0-surface_w border-layer-0-surface_w active:border-layer-0-surface_w group-active:border-layer-0-surface_w focus:border-layer-0-surface_w group-focus:border-layer-0-surface_w bg-layer-0-surface-edge active:bg-layer-0-surface-edge group-active:bg-layer-0-surface-edge focus:bg-layer-0-surface-edge group-focus:bg-layer-0-surface-edge border-layer-0-surface-edge active:border-layer-0-surface-edge group-active:border-layer-0-surface-edge focus:border-layer-0-surface-edge group-focus:border-layer-0-surface-edge bg-layer-0-surface-blur active:bg-layer-0-surface-blur group-active:bg-layer-0-surface-blur focus:bg-layer-0-surface-blur group-focus:bg-layer-0-surface-blur border-layer-0-surface-blur active:border-layer-0-surface-blur group-active:border-layer-0-surface-blur focus:border-layer-0-surface-blur group-focus:border-layer-0-surface-blur bg-layer-1-surface active:bg-layer-1-surface group-active:bg-layer-1-surface focus:bg-layer-1-surface group-focus:bg-layer-1-surface border-layer-1-surface active:border-layer-1-surface group-active:border-layer-1-surface focus:border-layer-1-surface group-focus:border-layer-1-surface bg-layer-1-surface_a active:bg-layer-1-surface_a group-active:bg-layer-1-surface_a focus:bg-layer-1-surface_a group-focus:bg-layer-1-surface_a border-layer-1-surface_a active:border-layer-1-surface_a group-active:border-layer-1-surface_a focus:border-layer-1-surface_a group-focus:border-layer-1-surface_a bg-layer-1-surface-edge active:bg-layer-1-surface-edge group-active:bg-layer-1-surface-edge focus:bg-layer-1-surface-edge group-focus:bg-layer-1-surface-edge border-layer-1-surface-edge active:border-layer-1-surface-edge group-active:border-layer-1-surface-edge focus:border-layer-1-surface-edge group-focus:border-layer-1-surface-edge bg-layer-1-surface-err active:bg-layer-1-surface-err group-active:bg-layer-1-surface-err focus:bg-layer-1-surface-err group-focus:bg-layer-1-surface-err border-layer-1-surface-err active:border-layer-1-surface-err group-active:border-layer-1-surface-err focus:border-layer-1-surface-err group-focus:border-layer-1-surface-err bg-layer-1-surface-focus active:bg-layer-1-surface-focus group-active:bg-layer-1-surface-focus focus:bg-layer-1-surface-focus group-focus:bg-layer-1-surface-focus border-layer-1-surface-focus active:border-layer-1-surface-focus group-active:border-layer-1-surface-focus focus:border-layer-1-surface-focus group-focus:border-layer-1-surface-focus bg-layer-2-surface active:bg-layer-2-surface group-active:bg-layer-2-surface focus:bg-layer-2-surface group-focus:bg-layer-2-surface border-layer-2-surface active:border-layer-2-surface group-active:border-layer-2-surface focus:border-layer-2-surface group-focus:border-layer-2-surface bg-layer-2-surface_a active:bg-layer-2-surface_a group-active:bg-layer-2-surface_a focus:bg-layer-2-surface_a group-focus:bg-layer-2-surface_a border-layer-2-surface_a active:border-layer-2-surface_a group-active:border-layer-2-surface_a focus:border-layer-2-surface_a group-focus:border-layer-2-surface_a bg-layer-2-surface-edge active:bg-layer-2-surface-edge group-active:bg-layer-2-surface-edge focus:bg-layer-2-surface-edge group-focus:bg-layer-2-surface-edge border-layer-2-surface-edge active:border-layer-2-surface-edge group-active:border-layer-2-surface-edge focus:border-layer-2-surface-edge group-focus:border-layer-2-surface-edge text-layer-0-glyph active:text-layer-0-glyph group-active:text-layer-0-glyph focus:text-layer-0-glyph group-focus:text-layer-0-glyph text-layer-0-glyph_a active:text-layer-0-glyph_a group-active:text-layer-0-glyph_a focus:text-layer-0-glyph_a group-focus:text-layer-0-glyph_a text-layer-0-glyph-hl active:text-layer-0-glyph-hl group-active:text-layer-0-glyph-hl focus:text-layer-0-glyph-hl group-focus:text-layer-0-glyph-hl text-layer-0-glyph-hl_a active:text-layer-0-glyph-hl_a group-active:text-layer-0-glyph-hl_a focus:text-layer-0-glyph-hl_a group-focus:text-layer-0-glyph-hl_a text-layer-0-glyph-shade active:text-layer-0-glyph-shade group-active:text-layer-0-glyph-shade focus:text-layer-0-glyph-shade group-focus:text-layer-0-glyph-shade text-layer-0-glyph-label active:text-layer-0-glyph-label group-active:text-layer-0-glyph-label focus:text-layer-0-glyph-label group-focus:text-layer-0-glyph-label text-layer-1-glyph active:text-layer-1-glyph group-active:text-layer-1-glyph focus:text-layer-1-glyph group-focus:text-layer-1-glyph text-layer-1-glyph_a active:text-layer-1-glyph_a group-active:text-layer-1-glyph_a focus:text-layer-1-glyph_a group-focus:text-layer-1-glyph_a text-layer-1-glyph_d active:text-layer-1-glyph_d group-active:text-layer-1-glyph_d focus:text-layer-1-glyph_d group-focus:text-layer-1-glyph_d text-layer-1-glyph_pl active:text-layer-1-glyph_pl group-active:text-layer-1-glyph_pl focus:text-layer-1-glyph_pl group-focus:text-layer-1-glyph_pl text-layer-1-glyph-hl active:text-layer-1-glyph-hl group-active:text-layer-1-glyph-hl focus:text-layer-1-glyph-hl group-focus:text-layer-1-glyph-hl text-layer-1-glyph-hl_a active:text-layer-1-glyph-hl_a group-active:text-layer-1-glyph-hl_a focus:text-layer-1-glyph-hl_a group-focus:text-layer-1-glyph-hl_a text-layer-1-glyph-shade active:text-layer-1-glyph-shade group-active:text-layer-1-glyph-shade focus:text-layer-1-glyph-shade group-focus:text-layer-1-glyph-shade text-layer-1-glyph-label active:text-layer-1-glyph-label group-active:text-layer-1-glyph-label focus:text-layer-1-glyph-label group-focus:text-layer-1-glyph-label text-layer-2-glyph active:text-layer-2-glyph group-active:text-layer-2-glyph focus:text-layer-2-glyph group-focus:text-layer-2-glyph text-layer-2-glyph_a active:text-layer-2-glyph_a group-active:text-layer-2-glyph_a focus:text-layer-2-glyph_a group-focus:text-layer-2-glyph_a text-layer-2-glyph_pl active:text-layer-2-glyph_pl group-active:text-layer-2-glyph_pl focus:text-layer-2-glyph_pl group-focus:text-layer-2-glyph_pl text-layer-2-glyph-hl active:text-layer-2-glyph-hl group-active:text-layer-2-glyph-hl focus:text-layer-2-glyph-hl group-focus:text-layer-2-glyph-hl text-layer-2-glyph-hl_a active:text-layer-2-glyph-hl_a group-active:text-layer-2-glyph-hl_a focus:text-layer-2-glyph-hl_a group-focus:text-layer-2-glyph-hl_a text-layer-2-glyph-shade active:text-layer-2-glyph-shade group-active:text-layer-2-glyph-shade focus:text-layer-2-glyph-shade group-focus:text-layer-2-glyph-shade"></div>
+\ No newline at end of file
diff --git a/apps-lib/src/lib/el/select_element.svelte b/apps-lib/src/lib/el/select_element.svelte
@@ -1,5 +1,5 @@
<script lang="ts">
- import { fmt_cl, kv, parse_layer, type ISelectElement } from "$lib";
+ import { fmt_cl, Glyph, kv, parse_layer, type ISelectElement } from "$lib";
import { onMount } from "svelte";
export let value: string;
@@ -57,6 +57,18 @@
};
</script>
+{#if basis?.show_arrows === "l"}
+ <div class={`flex flex-row justify-center items-center`}>
+ <Glyph
+ basis={{
+ key: `caret-up-down`,
+ dim: `xs`,
+ weight: `bold`,
+ classes: `text-layer-${layer}-glyph translate-y-[1px]`,
+ }}
+ />
+ </div>
+{/if}
<select
class={`${fmt_cl(basis.classes)} z-10 el-select ${classes_layer}`}
bind:this={el}
@@ -87,3 +99,15 @@
{/if}
{/each}
</select>
+{#if basis?.show_arrows === "r"}
+ <div class={`flex flex-row justify-center items-center`}>
+ <Glyph
+ basis={{
+ key: `caret-up-down`,
+ dim: `xs`,
+ weight: `bold`,
+ classes: `text-layer-${layer}-glyph translate-y-[1px]`,
+ }}
+ />
+ </div>
+{/if}
diff --git a/apps-lib/src/lib/locales/en/icu.json b/apps-lib/src/lib/locales/en/icu.json
@@ -6,6 +6,7 @@
"*_details": "{value} details",
"*_failure": "{value} failure",
"*_list": "{value} list",
+ "*_price": "{value} price",
"*_month": "{value} month",
"*_name": "{value} name",
"*_summary": "{value} summary",
diff --git a/apps-lib/src/lib/locales/en/trade.json b/apps-lib/src/lib/locales/en/trade.json
@@ -12,7 +12,16 @@
},
"key": {
"cacao": {
- "name": "Cacao"
+ "name": "Cacao",
+ "process": {
+ "raw": "Raw",
+ "fermented": "Fermented",
+ "dried": "Dried",
+ "roasted": "Roasted",
+ "cocoa_powder": "Cocoa Powder",
+ "cocoa_butter": "Cocoa Butter",
+ "chocolate": "Chocolate"
+ }
},
"coffee": {
"name": "Coffee",
@@ -28,7 +37,14 @@
}
},
"maca": {
- "name": "Maca"
+ "name": "Maca",
+ "process": {
+ "raw": "Raw",
+ "gelatinized": "Gelatinized",
+ "powdered": "Powdered",
+ "roasted": "Roasted",
+ "capsules": "Capsules"
+ }
}
}
}
diff --git a/apps-lib/src/lib/types/components.ts b/apps-lib/src/lib/types/components.ts
@@ -27,6 +27,7 @@ export type IEntryStyle = `guide` | `line`;
export type IEntryWrap = IClOpt & IIdOpt & ILyOptTs & {
style?: IEntryStyle;
style_a?: true;
+ no_pad?: true;
fade?: {
in?: TransitionConfig;
out?: TransitionConfig;
diff --git a/apps-lib/src/lib/types/el.ts b/apps-lib/src/lib/types/el.ts
@@ -4,6 +4,7 @@ import type { ThemeLayer } from "@radroots/theme";
export type GlyphKeyCurrency = `dollar` | `eur`;
export type GlyphKey = |
+ `selection-foreground` |
`image-square` |
`image-broken` |
`funnel` |
@@ -146,6 +147,7 @@ export type ISelectElement = IIdOpt & IClOpt & ILyOptTs &
sync?: true;
sync_init?: true | string;
options: { group?: string | true; entries: ISelectOption<string>[] }[];
+ show_arrows?: 'l' | 'r';
};
export type IInputElement = IId & IClOpt & ILyOptTs & {
