commit b405de194befe06f6e448fbe797a6b0d09f8190b parent b355772acfc9140026c4054bccdd75ceffcf4418 Author: triesap <137732411+triesap@users.noreply.github.com> Date: Sat, 7 Sep 2024 09:56:20 +0000 Migrate nav component and stores to `svelte-lib`, update imports Diffstat:
20 files changed, 231 insertions(+), 170 deletions(-)
diff --git a/src/lib/components/layout-view.svelte b/src/lib/components/layout-view.svelte @@ -1,12 +1,11 @@ <script lang="ts"> + import { app_tabs_blur, app_tabs_visible } from "$lib/stores"; import { + type AppLayoutKey, app_layout, app_nav_blur, app_nav_visible, - app_tabs_blur, - app_tabs_visible, - } from "$lib/stores"; - import { type AppLayoutKey } from "@radroots/svelte-lib"; + } from "@radroots/svelte-lib"; import { onDestroy, onMount } from "svelte"; const styles: Record<AppLayoutKey, string> = { diff --git a/src/lib/components/map_control_full.svelte b/src/lib/components/map_control_full.svelte @@ -1,7 +1,6 @@ <script lang="ts"> import { goto } from "$app/navigation"; - import { app_layout } from "$lib/stores"; - import { Glyph } from "@radroots/svelte-lib"; + import { Glyph, app_layout } from "@radroots/svelte-lib"; let el_zoom: HTMLElement | null; </script> diff --git a/src/lib/components/map_full_envelope.svelte b/src/lib/components/map_full_envelope.svelte @@ -1,7 +1,6 @@ <script lang="ts"> import { goto } from "$app/navigation"; - import { app_layout } from "$lib/stores"; - import { Glyph } from "@radroots/svelte-lib"; + import { Glyph, app_layout } from "@radroots/svelte-lib"; let el: HTMLElement | null; </script> diff --git a/src/lib/components/nav.svelte b/src/lib/components/nav.svelte @@ -1,118 +0,0 @@ -<script lang="ts"> - import { goto } from "$app/navigation"; - import { app_layout, app_nav_blur, app_nav_visible } from "$lib/stores"; - import type { INavBasis } from "$lib/types"; - import { restart } from "$lib/utils"; - import { Fill, fmt_cl, Glyph } from "@radroots/svelte-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/src/lib/components/tabs.svelte b/src/lib/components/tabs.svelte @@ -1,6 +1,6 @@ <script lang="ts"> - import { app_layout, app_tab_active, app_tabs_blur } from "$lib/stores"; - import { Glyph, type ITabsBasis } from "@radroots/svelte-lib"; + 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; diff --git a/src/lib/stores.ts b/src/lib/stores.ts @@ -1,4 +1,3 @@ -import type { AppLayoutKey } from "@radroots/svelte-lib"; import { type ColorMode, type ThemeKey } from "@radroots/theme"; import { type NumberTuple } from "@radroots/utils"; import { writable } from "svelte/store"; @@ -8,11 +7,8 @@ export const app_thm = writable<ThemeKey>(`os`); export const app_config = writable<boolean>(false); export const app_render = writable<boolean>(false); -export const app_layout = writable<AppLayoutKey>(`base`); export const app_win = writable<NumberTuple>([0, 0]); -export const app_nav_blur = writable<boolean>(false); - export const app_tabs_visible = writable<boolean>(false); export const app_tabs_blur = writable<boolean>(false); export const app_tab_active = writable<number>(0); @@ -21,10 +17,6 @@ export const app_nostr_key = writable<string>(``); export const app_pwa_polyfills = writable<boolean>(false); export const app_sqlite = writable<boolean>(false); -export const app_nav_visible = writable<boolean>(false); -//export const app_nav_prev = writable<NavParamPrev>([]); -//export const app_nav_title = writable<NavParamTitle | false>(false); - export const app_init_route = writable<string>(``); export const map_full_center = writable<NumberTuple>([0, 0]); diff --git a/src/lib/types.ts b/src/lib/types.ts @@ -1,19 +1,7 @@ -import type { ICb, IGlOpt, ILabelOpt, NavigationPreviousParam } from "@radroots/svelte-lib"; +import type { NavigationPreviousParam } from "@radroots/svelte-lib"; export type NavParamPrev = NavigationPreviousParam[]; export type NavParamTitle = { label: string; }; - - -export type INavBasis = { - prev: { - label?: string; - route: string; - }; - title?: { - label: string; - }; - option?: ICb & IGlOpt & ILabelOpt; -}; -\ No newline at end of file diff --git a/src/routes/(app)/+layout.svelte b/src/routes/(app)/+layout.svelte @@ -2,7 +2,8 @@ import { goto } from "$app/navigation"; import LayoutWindow from "$lib/components/layout-window.svelte"; import Tabs from "$lib/components/tabs.svelte"; - import { app_layout, app_tab_active, app_tabs_visible } from "$lib/stores"; + import { app_tab_active, app_tabs_visible } from "$lib/stores"; + import { app_layout } from "@radroots/svelte-lib"; </script> <LayoutWindow> @@ -24,7 +25,7 @@ { icon: `compass`, callback: async (tab_i) => { - await goto(`/map/test`); + await goto(`/models/trade-offer`); }, }, { diff --git a/src/routes/(app)/models/location-gcs/+page.svelte b/src/routes/(app)/models/location-gcs/+page.svelte @@ -2,12 +2,11 @@ import { lc } from "$lib/client"; import LayoutTrellis from "$lib/components/layout-trellis.svelte"; import LayoutView from "$lib/components/layout-view.svelte"; - import Nav from "$lib/components/nav.svelte"; import { _cf } from "$lib/conf"; import { app_tabs_visible, app_thc } from "$lib/stores"; import { location_gcs_add } from "$lib/utils/models"; import { type LocationGcs } from "@radroots/client"; - import { Fill, fmt_geo_direction } from "@radroots/svelte-lib"; + import { Fill, fmt_geo_direction, Nav } from "@radroots/svelte-lib"; import { MapLibre, Marker } from "@radroots/svelte-maplibre"; import { onMount } from "svelte"; diff --git a/src/routes/(app)/models/trade-offer/+page.svelte b/src/routes/(app)/models/trade-offer/+page.svelte @@ -0,0 +1,137 @@ +<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 TradeOffer } from "@radroots/client"; + import { Nav, Trellis } from "@radroots/svelte-lib"; + import { onMount } from "svelte"; + + let models_list: TradeOffer[] = []; + let loading_models = false; + + onMount(async () => { + try { + app_tabs_visible.set(false); + await fetch_models(); + } catch (e) { + } finally { + } + }); + + const fetch_models = async (): Promise<void> => { + try { + loading_models = true; + const res = await lc.db.trade_offer_get({ + list: [`all`], + }); + if (typeof res !== `string`) models_list = res; + } catch (e) { + console.log(`(error) fetch_models `, e); + } finally { + loading_models = false; + } + }; +</script> + +<LayoutView> + <LayoutTrellis> + {#if models_list.length} + {#each models_list as li, li_i} + <Trellis + basis={{ + args: { + layer: 1, + title: + li_i === 0 + ? { + value: `Trade Offers`, + } + : undefined, + list: [ + { + hide_active: true, + touch: { + label: { + left: [ + { + value: `Price:`, + classes: `capitalize`, + }, + ], + right: [ + { + value: `${li.price_amt} ${li.price_currency}`, + classes: `capitalize`, + }, + ], + }, + callback: async () => {}, + }, + }, + { + hide_active: true, + touch: { + label: { + left: [ + { + value: `Quantity:`, + classes: `capitalize`, + }, + ], + right: [ + { + value: `${li.quantity_amt} ${li.quantity_unit}`, + classes: `capitalize`, + }, + ], + }, + callback: async () => {}, + }, + }, + ], + }, + }} + /> + {/each} + {:else if !loading_models} + <div + class={`flex flex-col w-full justify-center items-center px-4 gap-3`} + > + <p class={`font-sans font-[400] text-layer-2-glyph`}> + {`No items to display.`} + </p> + <a href={`/models/trade-offer/add`}> + <p + class={`font-sans font-[400] text-layer-2-glyph-hl text-sm`} + > + {`Click to add a new product`} + </p> + </a> + </div> + {/if} + </LayoutTrellis> +</LayoutView> +<Nav + basis={{ + prev: { + label: `Home`, + route: `/`, + }, + title: { + label: `Products`, + }, + option: models_list.length + ? { + label: { + value: `Add`, + classes: `tap-color`, + }, + callback: async () => { + await goto(`/models/trade-offer/add`); + }, + } + : undefined, + }} +/> diff --git a/src/routes/(app)/models/trade-offer/add/+page.svelte b/src/routes/(app)/models/trade-offer/add/+page.svelte @@ -0,0 +1,66 @@ +<script lang="ts"> + import LayoutTrellis from "$lib/components/layout-trellis.svelte"; + import LayoutView from "$lib/components/layout-view.svelte"; + import { trade_offer_form_fields } from "@radroots/client"; + import { fmt_id, InputForm, Nav } from "@radroots/svelte-lib"; +</script> + +<LayoutView> + <LayoutTrellis> + <div + class={`flex flex-col w-full px-4 gap-3 justify-center items-center`} + > + {#each Object.entries(trade_offer_form_fields) as [field_k, field], field_i} + <div + class={`flex flex-col w-full gap-1 justify-start items-start`} + > + <div + class={`flex flex-row w-full px-2 justify-start items-center`} + > + <p + class={`font-sans font-[400] uppercase text-layer-2-glyph text-sm`} + > + {`Product - ${field_k}`} + </p> + </div> + <div + class={`form-line-e bg-layer-1-surface text-layer-1-glyph/70 rounded-xl`} + > + <InputForm + basis={{ + id: fmt_id(field_k), + layer: 1, + sync: true, + field: { + charset: field.charset, + validate: field.validation, + }, + }} + /> + </div> + </div> + {/each} + </div> + </LayoutTrellis> +</LayoutView> +<Nav + basis={{ + prev: { + label: `Offers`, + route: `/models/trade-offer`, + }, + title: { + label: `Add New`, + }, + option: { + glyph: { + key: `info`, + dim: `md`, + classes: `text-layer-1-glyph-hl tap-scale`, + }, + callback: async () => { + alert(`Todo!`); + }, + }, + }} +/> diff --git a/src/routes/(app)/models/trade-product/+page.svelte b/src/routes/(app)/models/trade-product/+page.svelte @@ -3,10 +3,9 @@ import { lc } from "$lib/client"; import LayoutTrellis from "$lib/components/layout-trellis.svelte"; import LayoutView from "$lib/components/layout-view.svelte"; - import Nav from "$lib/components/nav.svelte"; import { app_tabs_visible } from "$lib/stores"; import { type TradeProduct } from "@radroots/client"; - import { locale, time_fmt_iso, Trellis } from "@radroots/svelte-lib"; + import { locale, Nav, time_fmt_iso, Trellis } from "@radroots/svelte-lib"; import { onMount } from "svelte"; let models_list: TradeProduct[] = []; diff --git a/src/routes/(app)/models/trade-product/add/+page.svelte b/src/routes/(app)/models/trade-product/add/+page.svelte @@ -4,7 +4,6 @@ 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 Nav from "$lib/components/nav.svelte"; import { location_gcs_add } from "$lib/utils/models"; import { parse_trade_product_form_keys, @@ -18,6 +17,7 @@ InputForm, kv, Loading, + Nav, } from "@radroots/svelte-lib"; import { trade_keys } from "@radroots/utils"; @@ -295,7 +295,6 @@ classes: `text-layer-1-glyph-hl tap-scale`, }, callback: async () => { - //await fetch_models(); alert(`Todo!`); }, }, diff --git a/src/routes/(app)/nostr/+page.svelte b/src/routes/(app)/nostr/+page.svelte @@ -2,8 +2,7 @@ import { goto } from "$app/navigation"; import LayoutTrellis from "$lib/components/layout-trellis.svelte"; import LayoutView from "$lib/components/layout-view.svelte"; - import Nav from "$lib/components/nav.svelte"; - import { Trellis } from "@radroots/svelte-lib"; + import { 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 @@ -2,9 +2,8 @@ import { lc } from "$lib/client"; import LayoutTrellis from "$lib/components/layout-trellis.svelte"; import LayoutView from "$lib/components/layout-view.svelte"; - import Nav from "$lib/components/nav.svelte"; import { _cf } from "$lib/conf"; - import { Trellis } from "@radroots/svelte-lib"; + import { 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 @@ -2,7 +2,6 @@ import { goto } from "$app/navigation"; import LayoutTrellis from "$lib/components/layout-trellis.svelte"; import LayoutView from "$lib/components/layout-view.svelte"; - import Nav from "$lib/components/nav.svelte"; import { app_nostr_key } from "$lib/stores"; import { NDKEvent, NDKKind, type NDKFilter } from "@nostr-dev-kit/ndk"; import type { @@ -11,6 +10,7 @@ } from "@nostr-dev-kit/ndk-svelte"; import { locale, + Nav, ndk, time_fmt_epoch_s, Trellis, diff --git a/src/routes/(app)/nostr/notes/post/+page.svelte b/src/routes/(app)/nostr/notes/post/+page.svelte @@ -4,9 +4,8 @@ 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 Nav from "$lib/components/nav.svelte"; import { NDKKind } from "@nostr-dev-kit/ndk"; - import { ndk, ndk_event, ndk_user } from "@radroots/svelte-lib"; + import { 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 @@ -2,14 +2,20 @@ import { lc } from "$lib/client"; import LayoutTrellis from "$lib/components/layout-trellis.svelte"; import LayoutView from "$lib/components/layout-view.svelte"; - import Nav from "$lib/components/nav.svelte"; import { app_nostr_key } from "$lib/stores"; import { NDKEvent, NDKKind, type NDKFilter } from "@nostr-dev-kit/ndk"; import type { ExtendedBaseType, NDKEventStore, } from "@nostr-dev-kit/ndk-svelte"; - import { ndk, ndk_event, ndk_user, t, Trellis } from "@radroots/svelte-lib"; + import { + Nav, + ndk, + ndk_event, + ndk_user, + t, + Trellis, + } from "@radroots/svelte-lib"; import { onDestroy } from "svelte"; let events_store: NDKEventStore<ExtendedBaseType<NDKEvent>>; diff --git a/src/routes/(app)/settings/+page.svelte b/src/routes/(app)/settings/+page.svelte @@ -2,11 +2,10 @@ import { lc } from "$lib/client"; import LayoutTrellis from "$lib/components/layout-trellis.svelte"; import LayoutView from "$lib/components/layout-view.svelte"; - import Nav from "$lib/components/nav.svelte"; import { _cf } from "$lib/conf"; import { app_tabs_visible, app_thc } from "$lib/stores"; import { restart } from "$lib/utils"; - import { toggle_color_mode, Trellis } from "@radroots/svelte-lib"; + import { Nav, toggle_color_mode, Trellis } from "@radroots/svelte-lib"; import { onMount } from "svelte"; onMount(async () => { diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte @@ -10,7 +10,6 @@ import { app_config, app_init_route, - app_layout, app_nostr_key, app_pwa_polyfills, app_render, @@ -20,6 +19,7 @@ app_win, } from "$lib/stores"; import { + app_layout, CssStatic, ndk, ndk_setup_privkey,