commit 9b48a6c08f90f04aa931e9c9e06d5b20b7f3fdcf parent 1033ef6a7abad7ece62b35aa8f794be360bfa140 Author: triesap <137732411+triesap@users.noreply.github.com> Date: Sun, 15 Sep 2024 12:40:19 +0000 Move lib components and stores to `svelte-lib` Diffstat:
22 files changed, 72 insertions(+), 226 deletions(-)
diff --git a/src/lib/components/layout-trellis-line.svelte b/src/lib/components/layout-trellis-line.svelte @@ -1,42 +0,0 @@ -<script lang="ts"> - import { - fmt_cl, - type ICb, - type IClOpt, - type ILabel, - } from "@radroots/svelte-lib"; - - export let basis: ILabel & { - notify?: IClOpt & ICb & ILabel; - }; - $: basis = basis; -</script> - -<div class={`flex flex-col w-full gap-1 justify-start items-start`}> - <div class={`flex flex-row w-full px-2 gap-2 justify-start items-center`}> - <p - class={`${fmt_cl(basis.label.classes)} font-sans font-[400] uppercase text-layer-2-glyph text-sm`} - > - {basis.label.value} - </p> - {#if basis.notify} - <div - class={`${fmt_cl(basis.notify.classes)} flex flex-row justify-start items-center fade-in transition-all`} - > - <button - class={`flex flex-row justify-center items-center`} - on:click={async () => { - await basis.notify?.callback(); - }} - > - <p - class={`${fmt_cl(basis.notify.label.classes)} font-sans font-[600] uppercase text-layer-2-glyph/80 text-xs`} - > - {basis.notify.label.value} - </p> - </button> - </div> - {/if} - </div> - <slot /> -</div> diff --git a/src/lib/components/layout-trellis.svelte b/src/lib/components/layout-trellis.svelte @@ -1,3 +0,0 @@ -<div class={`flex flex-col w-full pt-4 px-6 pb-12 gap-4`}> - <slot /> -</div> diff --git a/src/lib/components/layout-view.svelte b/src/lib/components/layout-view.svelte @@ -1,59 +0,0 @@ -<script lang="ts"> - import { app_tabs_blur, app_tabs_visible } from "$lib/stores"; - import { - type AppLayoutKey, - type IClOpt, - app_layout, - app_nav_blur, - app_nav_visible, - fmt_cl, - } from "@radroots/svelte-lib"; - import { onDestroy, onMount } from "svelte"; - - const styles: Record<AppLayoutKey, string> = { - base: "pt-2", - lg: "pt-16", - }; - - export let basis: (IClOpt & { fade?: boolean }) | undefined = undefined; - $: basis = basis; - - let el: HTMLElement | null; - - onMount(async () => { - try { - el?.addEventListener("scroll", scrollChange); - } catch (e) { - } finally { - } - }); - - onDestroy(async () => { - try { - el?.removeEventListener("scroll", scrollChange); - } catch (e) { - } finally { - } - }); - - $: classes_nav = $app_nav_visible - ? `pt-h_nav_${$app_layout}` - : `${styles[$app_layout]}`; - $: classes_tabs = $app_tabs_visible ? `pb-h_tabs_${$app_layout}` : ``; - $: classes_fade = basis?.fade ? `fade-in` : ``; - - const scrollChange = (): void => { - if (Math.max(el?.scrollTop || 0, 0) > 10) app_nav_blur.set(true); - else app_nav_blur.set(false); - - if (Math.max(el?.scrollTop || 0, 0) > 10) app_tabs_blur.set(true); - else app_tabs_blur.set(false); - }; -</script> - -<div - bind:this={el} - class={`${fmt_cl(basis?.classes)} absolute top-0 left-0 flex flex-col h-[100vh] w-full overflow-y-scroll scroll-hide ${classes_nav} ${classes_tabs} ${classes_fade}`} -> - <slot /> -</div> diff --git a/src/lib/components/layout-window.svelte b/src/lib/components/layout-window.svelte @@ -1,7 +0,0 @@ -<div - class={`relative flex flex-col h-[100vh] w-full overflow-x-hidden overflow-y-hidden bg-layer-0-surface`} -> - <div class={`flex flex-col h-full w-full`}> - <slot /> - </div> -</div> diff --git a/src/lib/components/tabs.svelte b/src/lib/components/tabs.svelte @@ -1,51 +0,0 @@ -<script lang="ts"> - import { app_tab_active, app_tabs_blur } from "$lib/stores"; - import { Glyph, type ITabsBasis, app_layout } from "@radroots/svelte-lib"; - - export let basis: ITabsBasis; - $: basis = basis; - - $: classes_blur = $app_tabs_blur ? `bg-layer-1-surface/30` : ``; - - let el: HTMLElement | null; - let el_inner: HTMLElement | null; -</script> - -<div - bind:this={el} - class={`z-10 absolute bottom-0 left-0 flex flex-col w-full justify-start items-start transition-all backdrop-blur-md h-tabs_${$app_layout} ${classes_blur}`} -> - <div - bind:this={el_inner} - class={`relative flex flex-col h-full w-full justify-start items-center`} - > - <div - class={`absolute top-4 left-0 grid grid-cols-12 flex flex-row w-full justify-center items-center`} - > - {#each basis.list as tab, tab_i} - <button - class={`col-span-3 flex flex-col h-full justify-start items-center transition-all`} - on:click={async () => { - app_tab_active.set(tab_i); - await tab.callback(tab_i); - }} - > - <Glyph - basis={{ - classes: - $app_tab_active === tab_i - ? `text-layer-2-glyph text-lineActiveBlue` - : `text-layer-2-glyph text-lineMd`, - key: tab.icon, - dim: `md`, - weight: - $app_tab_active === tab_i - ? tab.active_weight || `fill` - : `bold`, - }} - /> - </button> - {/each} - </div> - </div> -</div> diff --git a/src/lib/stores.ts b/src/lib/stores.ts @@ -1,18 +1,6 @@ -import { type ColorMode, type ThemeKey } from "@radroots/theme"; import { type NumberTuple } from "@radroots/utils"; import { writable } from "svelte/store"; -export const app_thc = writable<ColorMode>(`light`); -export const app_th = writable<ThemeKey>(`earth`); - -export const app_config = writable<boolean>(false); -export const app_render = writable<boolean>(false); -export const app_win = writable<NumberTuple>([0, 0]); - -export const app_tabs_visible = writable<boolean>(false); -export const app_tabs_blur = writable<boolean>(false); -export const app_tab_active = writable<number>(0); - export const app_nostr_key = writable<string>(``); export const app_pwa_polyfills = writable<boolean>(false); export const app_sqlite = writable<boolean>(false); diff --git a/src/routes/(app)/+layout.svelte b/src/routes/(app)/+layout.svelte @@ -1,9 +1,12 @@ <script lang="ts"> import { goto } from "$app/navigation"; - import LayoutWindow from "$lib/components/layout-window.svelte"; - import Tabs from "$lib/components/tabs.svelte"; - import { app_tab_active, app_tabs_visible } from "$lib/stores"; - import { app_layout } from "@radroots/svelte-lib"; + import { + LayoutWindow, + Tabs, + app_layout, + app_tab_active, + app_tabs_visible, + } from "@radroots/svelte-lib"; </script> <LayoutWindow> diff --git a/src/routes/(app)/+page.svelte b/src/routes/(app)/+page.svelte @@ -1,16 +1,14 @@ <script lang="ts"> import { goto } from "$app/navigation"; - import LayoutView from "$lib/components/layout-view.svelte"; - import { - app_nostr_key, - app_tab_active, - app_tabs_visible, - } from "$lib/stores"; + import { app_nostr_key } from "$lib/stores"; import { Envelope, Glyph, type GlyphKey, type GlyphWeight, + LayoutView, + app_tab_active, + app_tabs_visible, } from "@radroots/svelte-lib"; import { onMount } from "svelte"; diff --git a/src/routes/(app)/models/location-gcs/+page.svelte b/src/routes/(app)/models/location-gcs/+page.svelte @@ -1,11 +1,14 @@ <script lang="ts"> import { lc } from "$lib/client"; - import LayoutTrellis from "$lib/components/layout-trellis.svelte"; - import LayoutView from "$lib/components/layout-view.svelte"; - import { app_tabs_visible } from "$lib/stores"; import { location_gcs_add } from "$lib/utils/location_gcs"; import { type LocationGcs } from "@radroots/client"; - import { Nav, Trellis } from "@radroots/svelte-lib"; + import { + app_tabs_visible, + LayoutTrellis, + LayoutView, + Nav, + Trellis, + } from "@radroots/svelte-lib"; import { onMount } from "svelte"; let models_list: LocationGcs[] = []; diff --git a/src/routes/(app)/models/trade-product/+page.svelte b/src/routes/(app)/models/trade-product/+page.svelte @@ -1,11 +1,16 @@ <script lang="ts"> import { goto } from "$app/navigation"; import { lc } from "$lib/client"; - import LayoutTrellis from "$lib/components/layout-trellis.svelte"; - import LayoutView from "$lib/components/layout-view.svelte"; - import { app_tabs_visible } from "$lib/stores"; import { type TradeProduct } from "@radroots/client"; - import { locale, Nav, time_fmt_iso, Trellis } from "@radroots/svelte-lib"; + import { + app_tabs_visible, + LayoutTrellis, + LayoutView, + locale, + Nav, + time_fmt_iso, + Trellis, + } from "@radroots/svelte-lib"; import { onMount } from "svelte"; let models_list: TradeProduct[] = []; @@ -104,7 +109,7 @@ ], right: [ { - value: li.lot, + value: li.lot || `@todo`, }, ], }, @@ -123,7 +128,8 @@ ], right: [ { - value: li.process, + value: + li.process || `(@todo)`, }, ], }, diff --git a/src/routes/(app)/models/trade-product/add/+page.svelte b/src/routes/(app)/models/trade-product/add/+page.svelte @@ -3,9 +3,6 @@ <script lang="ts"> import { goto } from "$app/navigation"; import { lc } from "$lib/client"; - import LayoutTrellisLine from "$lib/components/layout-trellis-line.svelte"; - import LayoutTrellis from "$lib/components/layout-trellis.svelte"; - import LayoutView from "$lib/components/layout-view.svelte"; import { location_gcs_add } from "$lib/utils/location_gcs"; import { trade_product_kv_init, @@ -22,6 +19,9 @@ InputForm, InputSelect, kv, + LayoutTrellis, + LayoutTrellisLine, + LayoutView, Nav, NotifyGlyph, t, diff --git a/src/routes/(app)/models/trade-product/add/preview/+page.svelte b/src/routes/(app)/models/trade-product/add/preview/+page.svelte @@ -1,7 +1,6 @@ <script lang="ts"> import { goto } from "$app/navigation"; import { lc } from "$lib/client"; - import LayoutView from "$lib/components/layout-view.svelte"; import { trade_product_kv_vals } from "$lib/utils/trade_product"; import { type LocationGcs, @@ -12,6 +11,7 @@ Glyph, int_step, kv, + LayoutView, locale, Nav, t, diff --git a/src/routes/(app)/nostr/+page.svelte b/src/routes/(app)/nostr/+page.svelte @@ -1,8 +1,11 @@ <script lang="ts"> import { goto } from "$app/navigation"; - import LayoutTrellis from "$lib/components/layout-trellis.svelte"; - import LayoutView from "$lib/components/layout-view.svelte"; - import { Nav, Trellis } from "@radroots/svelte-lib"; + import { + LayoutTrellis, + LayoutView, + Nav, + Trellis, + } from "@radroots/svelte-lib"; </script> <LayoutView> diff --git a/src/routes/(app)/nostr/keys/+page.svelte b/src/routes/(app)/nostr/keys/+page.svelte @@ -1,9 +1,12 @@ <script lang="ts"> import { lc } from "$lib/client"; - import LayoutTrellis from "$lib/components/layout-trellis.svelte"; - import LayoutView from "$lib/components/layout-view.svelte"; import { _cf } from "$lib/conf"; - import { Nav, Trellis } from "@radroots/svelte-lib"; + import { + LayoutTrellis, + LayoutView, + Nav, + Trellis, + } from "@radroots/svelte-lib"; import { onMount } from "svelte"; let nostr_public_key = ``; diff --git a/src/routes/(app)/nostr/notes/+page.svelte b/src/routes/(app)/nostr/notes/+page.svelte @@ -1,7 +1,5 @@ <script lang="ts"> import { goto } from "$app/navigation"; - import LayoutTrellis from "$lib/components/layout-trellis.svelte"; - import LayoutView from "$lib/components/layout-view.svelte"; import { app_nostr_key } from "$lib/stores"; import { NDKEvent, NDKKind, type NDKFilter } from "@nostr-dev-kit/ndk"; import type { @@ -9,6 +7,8 @@ NDKEventStore, } from "@nostr-dev-kit/ndk-svelte"; import { + LayoutTrellis, + LayoutView, locale, Nav, ndk, diff --git a/src/routes/(app)/nostr/notes/post/+page.svelte b/src/routes/(app)/nostr/notes/post/+page.svelte @@ -2,10 +2,15 @@ import { goto } from "$app/navigation"; import { lc } from "$lib/client"; import ButtonSubmit from "$lib/components/button-submit.svelte"; - import LayoutTrellis from "$lib/components/layout-trellis.svelte"; - import LayoutView from "$lib/components/layout-view.svelte"; import { NDKKind } from "@nostr-dev-kit/ndk"; - import { Nav, ndk, ndk_event, ndk_user } from "@radroots/svelte-lib"; + import { + LayoutTrellis, + LayoutView, + Nav, + ndk, + ndk_event, + ndk_user, + } from "@radroots/svelte-lib"; let loading = false; let value_note_content = ``; diff --git a/src/routes/(app)/nostr/profile/+page.svelte b/src/routes/(app)/nostr/profile/+page.svelte @@ -1,7 +1,5 @@ <script lang="ts"> import { lc } from "$lib/client"; - import LayoutTrellis from "$lib/components/layout-trellis.svelte"; - import LayoutView from "$lib/components/layout-view.svelte"; import { app_nostr_key } from "$lib/stores"; import { NDKEvent, NDKKind, type NDKFilter } from "@nostr-dev-kit/ndk"; import type { @@ -9,6 +7,8 @@ NDKEventStore, } from "@nostr-dev-kit/ndk-svelte"; import { + LayoutTrellis, + LayoutView, Nav, ndk, ndk_event, diff --git a/src/routes/(app)/settings/+page.svelte b/src/routes/(app)/settings/+page.svelte @@ -1,11 +1,16 @@ <script lang="ts"> import { lc } from "$lib/client"; - import LayoutTrellis from "$lib/components/layout-trellis.svelte"; - import LayoutView from "$lib/components/layout-view.svelte"; import { _cf } from "$lib/conf"; - import { app_tabs_visible, app_thc } from "$lib/stores"; import { restart } from "$lib/utils"; - import { Nav, toggle_color_mode, Trellis } from "@radroots/svelte-lib"; + import { + app_tabs_visible, + app_thc, + LayoutTrellis, + LayoutView, + Nav, + toggle_color_mode, + Trellis, + } from "@radroots/svelte-lib"; import { onMount } from "svelte"; onMount(async () => { diff --git a/src/routes/(app)/test/+page.svelte b/src/routes/(app)/test/+page.svelte @@ -1,6 +1,5 @@ <script lang="ts"> - import LayoutView from "$lib/components/layout-view.svelte"; - import { Nav } from "@radroots/svelte-lib"; + import { Nav,LayoutView } from "@radroots/svelte-lib"; </script> <LayoutView basis={{ classes: `px-4 gap-8` }}>test</LayoutView> diff --git a/src/routes/(map)/map/+page.svelte b/src/routes/(map)/map/+page.svelte @@ -2,8 +2,7 @@ import { lc } from "$lib/client"; import MapControlFull from "$lib/components/map_control_full.svelte"; import { _cf } from "$lib/conf"; - import { app_thc } from "$lib/stores"; - import { Fill, LoadingView, sleep } from "@radroots/svelte-lib"; + import { app_thc, Fill, LoadingView, sleep } from "@radroots/svelte-lib"; import { MapLibre, Marker, Popup } from "@radroots/svelte-maplibre"; import { type NumberTuple } from "@radroots/utils"; import { onMount } from "svelte"; diff --git a/src/routes/+error.svelte b/src/routes/+error.svelte @@ -1,6 +1,6 @@ <script lang="ts"> import { page } from "$app/stores"; - import LayoutView from "$lib/components/layout-view.svelte"; + import { LayoutView } from "@radroots/svelte-lib"; </script> {#if $page} diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte @@ -7,18 +7,14 @@ } from "$env/static/public"; import { lc } from "$lib/client"; import { _cf } from "$lib/conf"; + import { app_nostr_key, app_pwa_polyfills, app_sqlite } from "$lib/stores"; import { app_config, - app_nostr_key, - app_pwa_polyfills, + app_layout, app_render, - app_sqlite, app_th, app_thc, app_win, - } from "$lib/stores"; - import { - app_layout, CssStatic, kv, ndk,