commit 9868bde250bc427fb129970e47f9faf1287fa0c3
parent 534e077cabd5e5001b66137530309911dfab2d45
Author: triesap <137732411+triesap@users.noreply.github.com>
Date: Sat, 7 Sep 2024 09:54:53 +0000
apps-lib: add nav component, migrate stores from `app`, include svelte kit as peer dependency, remove tsconfig compileroptions, edit global types
Diffstat:
7 files changed, 145 insertions(+), 29 deletions(-)
diff --git a/apps-lib/package.json b/apps-lib/package.json
@@ -27,6 +27,7 @@
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
},
"peerDependencies": {
+ "@sveltejs/kit": "^2.0.0",
"svelte": "^4.2.19"
},
"devDependencies": {
diff --git a/apps-lib/src/lib/components/nav.svelte b/apps-lib/src/lib/components/nav.svelte
@@ -0,0 +1,123 @@
+<script lang="ts">
+ import { goto } from "$app/navigation";
+ import {
+ app_layout,
+ app_nav_blur,
+ app_nav_visible,
+ Fill,
+ fmt_cl,
+ Glyph,
+ type INavBasis,
+ } from "$lib";
+ import { onDestroy, onMount } from "svelte";
+
+ export let basis: INavBasis;
+ $: basis = basis;
+
+ let el: HTMLElement | null;
+ let el_inner: HTMLElement | null;
+
+ onMount(async () => {
+ try {
+ app_nav_visible.set(true);
+ } catch (e) {
+ } finally {
+ }
+ });
+
+ onDestroy(async () => {
+ try {
+ app_nav_visible.set(false);
+ } catch (e) {
+ } finally {
+ }
+ });
+</script>
+
+<div
+ bind:this={el}
+ class={`z-10 absolute top-0 left-0 flex flex-col w-full justify-start items-start transition-all duration-[250ms] h-nav_${$app_layout} ${$app_nav_blur ? `bg-layer-0-surface-blur/30 backdrop-blur-md` : ``}`}
+>
+ <div
+ bind:this={el_inner}
+ class={`relative flex flex-col h-full w-full justify-end items-center bg-transparent`}
+ >
+ <div
+ class={`absolute bottom-[5px] left-0 grid grid-cols-12 flex flex-row h-8 w-full justify-start items-center`}
+ >
+ <button
+ class={`col-span-4 flex flex-row h-full pl-2 justify-start items-center`}
+ on:click={async () => {
+ await goto(basis.prev.route);
+ }}
+ >
+ <Glyph
+ basis={{
+ key: `caret-left`,
+ weight: `bold`,
+ dim: `md+`,
+ classes: `text-layer-1-glyph-hl group-active:opacity-70 transition-opacity`,
+ }}
+ />
+ {#if basis.prev.label}
+ <p
+ class={`font-sans text-navPrevious text-layer-1-glyph-hl group-active:opacity-60 transition-opacity`}
+ >
+ {basis.prev.label}
+ </p>
+ {:else}
+ <Fill />
+ {/if}
+ </button>
+ <div
+ class={`col-span-4 flex flex-row h-full justify-center items-center`}
+ >
+ {#if basis.title}
+ <button
+ class={`flex flex-row justify-center items-center`}
+ on:click={async () => {
+ // await restart();
+ }}
+ >
+ <p
+ class={`font-sans text-navCurrent text-layer-1-glyph`}
+ >
+ {basis.title.label}
+ </p>
+ </button>
+ {:else}
+ <Fill />
+ {/if}
+ </div>
+ <div
+ class={`col-span-4 flex flex-row h-full justify-end items-center`}
+ >
+ {#if basis.option}
+ <button
+ class={`col-span-4 flex flex-row h-full pr-6 gap-2 justify-end items-center`}
+ on:click={async () => {
+ await basis.option?.callback();
+ }}
+ >
+ {#if `glyph` in basis.option && basis.option.glyph}
+ <Glyph
+ basis={{
+ ...basis.option.glyph,
+ }}
+ />
+ {/if}
+ {#if `label` in basis.option && basis.option.label}
+ <p
+ class={`${fmt_cl(basis.option.label.classes)} font-sans text-navPrevious text-layer-1-glyph-hl group-active:opacity-60 transition-opacity`}
+ >
+ {basis.option.label.value}
+ </p>
+ {/if}
+ </button>
+ {:else}
+ <Fill />
+ {/if}
+ </div>
+ </div>
+ </div>
+</div>
diff --git a/apps-lib/src/lib/global.d.ts b/apps-lib/src/lib/global.d.ts
@@ -1,3 +1,5 @@
+declare module "$app/navigation";
+
declare class Keyva {
/**
* An IDBKeyRange that has no upper or lower bounding.
diff --git a/apps-lib/src/lib/index.ts b/apps-lib/src/lib/index.ts
@@ -3,6 +3,7 @@ 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"
export { default as LoadingView } from "./components/loading_view.svelte"
+export { default as Nav } from "./components/nav.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"
diff --git a/apps-lib/src/lib/stores/client.ts b/apps-lib/src/lib/stores/client.ts
@@ -1,3 +1,4 @@
+import { type AppLayoutKey } from "$lib";
import { queryParameters } from "@radroots/sveltekit-search-params";
import { writable } from "svelte/store";
@@ -5,3 +6,8 @@ export const app_qp = queryParameters();
export const kv = writable<Keyva>();
if (typeof window !== 'undefined') kv.set(new Keyva({ name: 'app-kv' }));
+
+export const app_layout = writable<AppLayoutKey>(`base`);
+
+export const app_nav_visible = writable<boolean>(false);
+export const app_nav_blur = writable<boolean>(false);
diff --git a/apps-lib/src/lib/types/components.ts b/apps-lib/src/lib/types/components.ts
@@ -1,4 +1,4 @@
-import type { CallbackPromise, CallbackPromiseGeneric, ICb, IClOpt, IGl, ILabelFieldsOpt, ILabelOptFieldsOpt, ILy, ILyOpt } from "./client";
+import type { CallbackPromise, CallbackPromiseGeneric, ICb, IClOpt, IGl, IGlOpt, ILabelFieldsOpt, ILabelOpt, ILabelOptFieldsOpt, ILy, ILyOpt } from "./client";
import type { GlyphKey, GlyphWeight } from "./ui";
export type ITabsBasisList = {
@@ -53,3 +53,14 @@ export type IEnvelopeTitledBasis = {
}
};
+export type INavBasis = {
+ prev: {
+ label?: string;
+ route: string;
+ };
+ title?: {
+ label: string;
+ };
+ option?: ICb & IGlOpt & ILabelOpt;
+};
+
diff --git a/apps-lib/tsconfig.json b/apps-lib/tsconfig.json
@@ -2,34 +2,6 @@
"$schema": "https://json.schemastore.org/tsconfig",
"display": "svelte-lib",
"extends": "./.svelte-kit/tsconfig.json",
- "compilerOptions": {
- "moduleResolution": "node",
- "module": "ESNext",
- "lib": [
- "es2020",
- "ESNext",
- "DOM"
- ],
- "target": "es2020",
- "isolatedModules": true,
- "resolveJsonModule": true,
- "sourceMap": true,
- "esModuleInterop": true,
- "skipLibCheck": true,
- "forceConsistentCasingInFileNames": true,
- "baseUrl": ".",
- "allowJs": true,
- "checkJs": true,
- "paths": {
- "$lib": [
- "src/lib"
- ],
- "$lib/*": [
- "src/lib/*"
- ]
- },
- "strict": false
- },
"include": [
"src/**/*.d.ts",
"src/**/*.js",
