commit f1ecff22e415846388c55acb40f5b624545c847a
parent c823df01993eb71e991bec4b52fa0a2a14bcb880
Author: triesap <137732411+triesap@users.noreply.github.com>
Date: Sun, 15 Sep 2024 21:01:55 +0000
apps-lib: edit components, locales, stores, types
Diffstat:
7 files changed, 47 insertions(+), 25 deletions(-)
diff --git a/apps-lib/src/lib/components/app_config.svelte b/apps-lib/src/lib/components/app_config.svelte
@@ -1,16 +1,11 @@
<script lang="ts">
- import { app_config, app_layout, app_thc, app_win } from "$lib";
+ import { app_config, app_layout, app_win } from "$lib";
import { onMount } from "svelte";
onMount(async () => {
try {
app_win.set([window.innerHeight, window.innerWidth]);
- const prefers_dark = window.matchMedia(
- `(prefers-color-scheme: dark)`,
- ).matches;
-
- if (prefers_dark) app_thc.set(`dark`);
app_config.set(true);
} catch (e) {
console.log(`(layout mount) `, e);
diff --git a/apps-lib/src/lib/components/button_loading.svelte b/apps-lib/src/lib/components/button_loading.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+ import { type CallbackPromise, fmt_cl, Loading, t } from "$lib";
+
+ export let basis: {
+ classes?:string;
+ callback: CallbackPromise;
+ loading?: boolean;
+ label?: string;
+ };
+ $: basis = basis;
+</script>
+
+<button
+ class={`${fmt_cl(basis.classes)} button-submit`}
+ on:click={async () => {
+ await basis.callback();
+ }}
+>
+ {#if basis.loading}
+ <Loading basis={{ dim: `xs` }} />
+ {:else}
+ {basis.label || `${$t(`common.submit`, { default: `submit` })}`}
+ {/if}
+</button>
diff --git a/apps-lib/src/lib/components/input_form.svelte b/apps-lib/src/lib/components/input_form.svelte
@@ -7,6 +7,7 @@
export let basis: IInputFormBasis;
$: basis = basis;
+ $: id = basis.id ? basis.id : null;
$: layer =
typeof basis.layer === `boolean` ? false : parse_layer(basis.layer, 1);
$: classes_layer =
@@ -17,7 +18,7 @@
onMount(async () => {
try {
- if (basis.sync) {
+ if (basis.sync && basis.id) {
const kv_val = await kv.get(basis.id);
if (kv_val) el.value = kv_val;
await kv.set(basis.id, kv_val || "");
@@ -32,23 +33,26 @@
<input
bind:this={el}
type="text"
- id={basis.id}
+ {id}
class={`${fmt_cl(basis.classes)} form-input h-full text-layer-${layer}-glyph placeholder:text-layer-${layer}-glyph_pl caret-layer-${layer}-glyph`}
placeholder={basis.placeholder || ""}
on:input={async ({ currentTarget: el }) => {
let pass = true;
- const val = el.value
- .split("")
- .filter((char) => basis.field.charset.test(char))
- .join("");
- if (
- !basis.field.validate.test(val) &&
- basis.field.validate_keypress
- ) {
- //el.classList.add(`form-invalid-layer-${layer}`);
- pass = false;
- } else {
- //el.classList.remove(`form-invalid-layer-${layer}`);
+ let val = el.value;
+ if (basis.field) {
+ val = el.value
+ .split("")
+ .filter((char) => basis.field.charset.test(char))
+ .join("");
+ if (
+ !basis.field.validate.test(val) &&
+ basis.field.validate_keypress
+ ) {
+ //el.classList.add(`form-invalid-layer-${layer}`);
+ pass = false;
+ } else {
+ //el.classList.remove(`form-invalid-layer-${layer}`);
+ }
}
el.value = val;
if (basis.sync) await kv.set(basis.id, val);
diff --git a/apps-lib/src/lib/index.ts b/apps-lib/src/lib/index.ts
@@ -1,5 +1,6 @@
export * from "./locales/i18n"
export { default as AppConfig } 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 EnvelopeTitled } from "./components/envelope_titled.svelte"
export { default as InputForm } from "./components/input_form.svelte"
diff --git a/apps-lib/src/lib/locales/en/common.json b/apps-lib/src/lib/locales/en/common.json
@@ -1,4 +1,6 @@
{
+ "inbox": "Inbox",
+ "submit": "Submit",
"optional": "Optional",
"quantity": "Quantity",
"per": "Per",
diff --git a/apps-lib/src/lib/stores/client.ts b/apps-lib/src/lib/stores/client.ts
@@ -1,6 +1,5 @@
import { type AppLayoutKey } from "$lib";
import { queryParameters } from "sveltekit-search-params";
-import { type ColorMode, type ThemeKey } from "@radroots/theme";
import { writable } from "svelte/store";
//@ts-ignore
@@ -12,9 +11,6 @@ export const app_qp = queryParameters();
export let kv: Keyva;
if (typeof window !== 'undefined') kv = new Keyva({ name: kv_name });
-export const app_thc = writable<ColorMode>(`light`);
-export const app_th = writable<ThemeKey>(`earth`);
-
export const app_layout = writable<AppLayoutKey>(`base`);
export const app_config = writable<boolean>(false);
export const app_render = writable<boolean>(false);
diff --git a/apps-lib/src/lib/types/components.ts b/apps-lib/src/lib/types/components.ts
@@ -30,7 +30,7 @@ export type IInputFormBasis = IClOpt & ILyOptTs & ICbGOpt<{ val: string; pass: b
hidden?: boolean;
validate?: RegExp;
sync?: boolean;
- field: IFormField;
+ field?: IFormField;
notify_inline?: {
glyph: GlyphKey | IGlyph;
};
