commit 14897507a57ebf9a73500b5e5a19246f8d3f0593
parent 55c417af23209ba8dfe796b2eab69c3eef2a5d86
Author: triesap <137732411+triesap@users.noreply.github.com>
Date: Fri, 13 Sep 2024 06:41:03 +0000
apps-lib: change i18n to use icu parser, add locales, edit components, types, ui, utils
Diffstat:
16 files changed, 99 insertions(+), 36 deletions(-)
diff --git a/apps-lib/src/lib/components/input_form.svelte b/apps-lib/src/lib/components/input_form.svelte
@@ -14,6 +14,7 @@
? `bg-transparent`
: `bg-layer-${layer}-surface`;
$: classes_wrap = `px-4`;
+
onMount(async () => {
try {
if (basis.sync) {
diff --git a/apps-lib/src/lib/components/input_select.svelte b/apps-lib/src/lib/components/input_select.svelte
@@ -1,3 +1,4 @@
+<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
<script lang="ts">
import {
fmt_cl,
@@ -22,6 +23,7 @@
? `bg-transparent`
: `bg-layer-${layer}-surface`;
$: classes_wrap = typeof layer === `boolean` ? `` : `px-4`;
+ $: classes_focus = basis.id_wrap ? `form-line-active` : ``;
onMount(async () => {
try {
@@ -34,7 +36,9 @@
</script>
<div
- class={`${fmt_cl(basis.classes_wrap)} relative form-line-wrap ${classes_wrap} ${classes_layer} transition-all`}
+ id={basis.id_wrap || null}
+ tabindex={-1}
+ class={`${fmt_cl(basis.classes_wrap)} relative form-line-wrap ${classes_wrap} ${classes_layer} ${classes_focus} transition-all`}
>
{#if basis.loading}
<div class={`flex flex-row w-full justify-center items-center`}>
@@ -44,6 +48,7 @@
<select
bind:this={el}
bind:value
+ id={basis.id || null}
class={`${fmt_cl(basis.classes)} z-10 form-select form-line-select text-layer-${layer}-glyph`}
on:change={async ({ currentTarget: el }) => {
const val = el.value;
diff --git a/apps-lib/src/lib/components/nav.svelte b/apps-lib/src/lib/components/nav.svelte
@@ -78,7 +78,8 @@
<button
class={`flex flex-row justify-center items-center`}
on:click={async () => {
- // await restart();
+ if (basis.title.callback)
+ await basis.title.callback();
}}
>
<p
diff --git a/apps-lib/src/lib/components/notify_glyph.svelte b/apps-lib/src/lib/components/notify_glyph.svelte
@@ -1,15 +1,16 @@
<script lang="ts">
- import { Glyph, type GlyphKey, type IGlyph } from "$lib";
+ import { fmt_cl, Glyph, type GlyphKey, type IGlyph } from "$lib";
import type { ThemeLayer } from "@radroots/theme";
export let basis: {
+ classes?: string;
glyph: GlyphKey | IGlyph;
layer: ThemeLayer;
};
</script>
<div
- class={`z-5 absolute right-0 top-0 flex flex-row h-full pr-3 justify-end items-center translate-x-[34px] fade-in transition-all`}
+ class={`${fmt_cl(basis.classes)} z-5 absolute right-0 top-0 flex flex-row h-full pr-3 justify-end items-center fade-in transition-all`}
>
<Glyph
basis={typeof basis.glyph === `string`
diff --git a/apps-lib/src/lib/index.ts b/apps-lib/src/lib/index.ts
@@ -22,6 +22,7 @@ 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 Loading } from "./ui/loading.svelte"
diff --git a/apps-lib/src/lib/locales/en/common.json b/apps-lib/src/lib/locales/en/common.json
@@ -1,4 +1,10 @@
{
+ "quantity": "Quantity",
+ "per": "Per",
+ "price": "Price",
+ "product": "Product",
+ "location": "Location",
+ "edit": "Edit",
"other": "Other",
"add_current_location": "Add current location",
"add_new_location": "Add new location",
diff --git a/apps-lib/src/lib/locales/en/currency.json b/apps-lib/src/lib/locales/en/currency.json
@@ -0,0 +1,12 @@
+{
+ "usd": {
+ "symbol": "$",
+ "name": "United States Dollar",
+ "name_short": "U.S. Dollar"
+ },
+ "eur": {
+ "symbol": "€",
+ "name": "Euro",
+ "name_short": "Euro"
+ }
+}
+\ No newline at end of file
diff --git a/apps-lib/src/lib/locales/en/icu.json b/apps-lib/src/lib/locales/en/icu.json
@@ -0,0 +1,3 @@
+{
+ "*_available": "{value} Available"
+}
+\ No newline at end of file
diff --git a/apps-lib/src/lib/locales/en/measurement.json b/apps-lib/src/lib/locales/en/measurement.json
@@ -0,0 +1,18 @@
+{
+ "mass": {
+ "unit": {
+ "g": "Gram",
+ "g_pl": "Grams",
+ "g_ab": "g.",
+ "hg": "100 Gram",
+ "hg_pl": "100 Grams",
+ "hg_ab": "100g.",
+ "kg": "Kilogram",
+ "kg_pl": "Kilograms",
+ "kg_ab": "kg.",
+ "lb": "Pound",
+ "lb_pl": "Pounds",
+ "lb_ab": "lb."
+ }
+ }
+}
+\ No newline at end of file
diff --git a/apps-lib/src/lib/locales/en/trade.json b/apps-lib/src/lib/locales/en/trade.json
@@ -1,37 +1,17 @@
{
- "quantity": {
- "mass_unit": {
- "g": "Gram",
- "g_pl": "Grams",
- "g_ab": "g.",
- "hg": "100 Gram",
- "hg_pl": "100 Grams",
- "hg_ab": "100g.",
- "kg": "Kilogram",
- "kg_pl": "Kilograms",
- "kg_ab": "kg.",
- "lb": "Pound",
- "lb_pl": "Pounds",
- "lb_ab": "lb."
- }
- },
- "currency": {
- "usd": {
- "symbol": "$",
- "name": "United States Dollar",
- "name_short": "U.S. Dollar"
- },
- "eur": {
- "symbol": "€",
- "name": "Euro",
- "name_short": "Euro"
- }
- },
"product": {
"key": {
"coffee": "Coffee",
"cacao": "Cacao",
"maca": "Maca"
+ },
+ "fields": {
+ "price_amt": {
+ "err_invalid": "Please enter the price"
+ }
}
+ },
+ "glossary": {
+ "process": "Process"
}
}
\ No newline at end of file
diff --git a/apps-lib/src/lib/locales/i18n.ts b/apps-lib/src/lib/locales/i18n.ts
@@ -1,13 +1,17 @@
-import i18n, { type Config } from '@radroots/sveltekit-i18n';
+//import i18n, { type Config } from '@radroots/sveltekit-i18n';
+import i18n from '@sveltekit-i18n/base';
+import type { Config } from '@sveltekit-i18n/parser-icu';
+import parser from '@sveltekit-i18n/parser-icu';
import locales_keys from './locales.json';
type Locale = keyof typeof locales_keys;
type LanguageConfig = {
default?: string;
+ value?: string;
};
-const locales_files = [`app`, `common`, `trade`] as const;
+const locales_files = [`app`, `common`, `currency`, `icu`, `measurement`, `trade`] as const;
const translations_keys: Record<Locale, any> = {
en: { locales_keys },
};
@@ -16,6 +20,7 @@ export const default_locale: Locale = `en`;
const config: Config<LanguageConfig> = {
initLocale: default_locale,
translations: translations_keys,
+ parser: parser(),
loaders: [
...Object.keys(translations_keys).map((locale) => locales_files.map(key => ({
locale,
diff --git a/apps-lib/src/lib/types/components.ts b/apps-lib/src/lib/types/components.ts
@@ -45,6 +45,7 @@ export type IInputSelectBasisOption = {
export type IInputSelectBasis = IClOpt & ILyOptTs & ICbGOpt<string> & {
classes_wrap?: string;
+ id_wrap?: string;
id?: string;
label?: string;
hidden?: boolean;
@@ -81,7 +82,7 @@ export type INavBasis = {
label?: string;
route: string;
};
- title?: {
+ title?: ICbOpt & {
label: string;
};
option?: ICb & IGlOpt & ILabelOpt & {
diff --git a/apps-lib/src/lib/types/ui.ts b/apps-lib/src/lib/types/ui.ts
@@ -1,7 +1,11 @@
import type { ThemeLayer } from "@radroots/theme";
import type { GeometryCardinalDirection, GeometryGlyphDimension, ICbOpt } from "./client";
+export type GlyphKeyCurrency = `dollar` | `eur`;
+
export type GlyphKey = |
+ `currency-${GlyphKeyCurrency}` |
+ `arrow-down` |
`caret-circle-down` |
`caret-circle-up` |
`shopping-bag-open` |
diff --git a/apps-lib/src/lib/ui/divider.svelte b/apps-lib/src/lib/ui/divider.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+ import { Fill, fmt_cl } from "$lib";
+
+ export let basis:
+ | {
+ classes?: string;
+ }
+ | undefined = undefined;
+</script>
+
+<div
+ class={`${fmt_cl(basis.classes)} flex flex-row h-[1px] w-full justify-start items-center bg-layer-1-edge`}
+>
+ <Fill />
+</div>
diff --git a/apps-lib/src/lib/ui/glyph.svelte b/apps-lib/src/lib/ui/glyph.svelte
@@ -14,6 +14,7 @@
[`md+`, `text-[27px]`],
[`lg`, `text-[28px]`],
[`xl`, `text-[30px]`],
+ [`xl+`, `text-[40px]`],
]);
export let basis: IGlyph;
diff --git a/apps-lib/src/lib/utils/client.ts b/apps-lib/src/lib/utils/client.ts
@@ -78,6 +78,12 @@ export const fmt_capitalize = (val: string): string => {
export const zoom_step = (num: number, op: `inc` | `dec`): number => {
const int_num = Math.round(num);
if (op === 'inc') return Math.min(int_num + 1, 14);
- else return Math.max(int_num - 1, 0);
+ return Math.max(int_num - 1, 0);
+};
+
+export const int_step = (num: number, op: `+` | `-`, bounds?: number): number => {
+ const int_num = Math.round(num);
+ if (op === '+') return Math.min(int_num + 1, bounds || Number.POSITIVE_INFINITY);
+ return Math.max(int_num - 1, bounds || 0);
};
