web_lib

Common web application libraries
git clone https://radroots.dev/git/web_lib.git
Log | Files | Refs | LICENSE

commit 8ecfc2513e706b45442b35cb4fa92bb13421f57e
parent 6e63afc3fc082c96ecf194ee6cb1697b14ca1ec4
Author: triesap <triesap@radroots.dev>
Date:   Sun, 21 Dec 2025 01:35:26 +0000

apps-lib-pwa: refined several svelte components by standardizing naming/formatting, swapping the loading indicator, adding a conditional action button

Diffstat:
Mapps-lib-pwa/src/lib/components/button/button-round-nav.svelte | 4++--
Mapps-lib-pwa/src/lib/components/layout/layout-view.svelte | 10++++++----
Mapps-lib-pwa/src/lib/components/lib/float-page.svelte | 1-
Mapps-lib-pwa/src/lib/components/map/map.svelte | 4++--
Mapps-lib-pwa/src/lib/views/farms/farms-add.svelte | 6+++---
Mapps-lib-pwa/src/lib/views/profile/profile-edit.svelte | 6+++---
Mapps-lib-pwa/src/lib/views/profile/profile.svelte | 14++++++++++++++
Mapps-lib-pwa/svelte.config.js | 1-
8 files changed, 30 insertions(+), 16 deletions(-)

diff --git a/apps-lib-pwa/src/lib/components/button/button-round-nav.svelte b/apps-lib-pwa/src/lib/components/button/button-round-nav.svelte @@ -1,7 +1,7 @@ <script lang="ts"> - import { LoadSymbol } from "$lib"; import type { IButtonNavRound } from "$lib/types/components/lib"; import { Glyph } from "@radroots/apps-lib"; + import LoadCircle from "../lib/load-circle.svelte"; let { basis }: { basis: IButtonNavRound } = $props(); </script> @@ -12,7 +12,7 @@ onclick={basis.callback} > {#if basis.loading} - <LoadSymbol /> + <LoadCircle /> {:else} <Glyph basis={{ diff --git a/apps-lib-pwa/src/lib/components/layout/layout-view.svelte b/apps-lib-pwa/src/lib/components/layout/layout-view.svelte @@ -15,7 +15,7 @@ onMount(async () => { try { - el?.addEventListener("scroll", scrollChange); + el?.addEventListener("scroll", on_scroll_change); } catch (e) { } finally { } @@ -23,13 +23,13 @@ onDestroy(async () => { try { - el?.removeEventListener("scroll", scrollChange); + el?.removeEventListener("scroll", on_scroll_change); } catch (e) { } finally { } }); - const scrollChange = (): void => { + const on_scroll_change = (): void => { if (Math.max(el?.scrollTop || 0, 0) > 10) nav_blur.set(true); else nav_blur.set(false); if (Math.max(el?.scrollTop || 0, 0) > 10) tabs_blur.set(true); @@ -41,7 +41,9 @@ <div bind:this={el} - class={`${fmt_cl(basis?.classes)} absolute top-0 left-0 flex flex-col h-[100vh] w-full justify-start items-center scroll-hide overflow-auto`} + class={`${fmt_cl( + basis?.classes, + )} absolute top-0 left-0 flex flex-col h-[100vh] w-full justify-start items-center scroll-hide overflow-auto`} class:fade-in={basis?.fade} > {@render children()} diff --git a/apps-lib-pwa/src/lib/components/lib/float-page.svelte b/apps-lib-pwa/src/lib/components/lib/float-page.svelte @@ -9,4 +9,3 @@ <div class={`absolute top-10 ${basis.posx}-6 flex flex-row`}> {@render children()} </div> -<div class="hidden left-6 right-6"></div> diff --git a/apps-lib-pwa/src/lib/components/map/map.svelte b/apps-lib-pwa/src/lib/components/map/map.svelte @@ -22,7 +22,7 @@ typeof basis?.interactive === `boolean` ? basis?.interactive : true, ); - const zoomOnDoubleClick = $derived( + const double_click_zoom = $derived( typeof basis?.zoom_click_off === `boolean` ? basis?.zoom_click_off : true, @@ -36,7 +36,7 @@ style={cfg_map.styles.base[$theme_mode ?? "light"]} attributionControl={false} interactive={!!interactive} - {zoomOnDoubleClick} + zoomOnDoubleClick={double_click_zoom} > {@render children()} </MapLibre> diff --git a/apps-lib-pwa/src/lib/views/farms/farms-add.svelte b/apps-lib-pwa/src/lib/views/farms/farms-add.svelte @@ -102,7 +102,7 @@ const handle_continue_1 = async (): Promise<void> => { if (!map_geop || !map_geoc) - return void lc_gui_alert(`No farm location provided.`); //@todo + return void lc_gui_alert(`No farm location provided.`); // @todo const farms_add_submission = schema_view_farms_add_submission.safeParse( { farm_name: val_farmname, @@ -122,7 +122,7 @@ if (!farms_add_submission.success) { return void lc_gui_alert( `Request invalid: ${farms_add_submission.error}`, - ); //@todo + ); // @todo } await basis.on_submit({ payload: farms_add_submission.data }); }; @@ -165,7 +165,7 @@ }} > {#snippet header_option()} - <!-- @todo {#if $casl_i === 0} + <!-- {#if $casl_i === 0} <button class={`flex flex-row justify-center items-center`} onclick={async () => { diff --git a/apps-lib-pwa/src/lib/views/profile/profile-edit.svelte b/apps-lib-pwa/src/lib/views/profile/profile-edit.svelte @@ -36,15 +36,15 @@ const param: Record<ViewProfileEditFieldKey, { placeholder: string }> = { name: { - placeholder: `${$ls(`icu.enter_*`, { value: `profile username` })}`, //@todo + placeholder: `${$ls(`icu.enter_*`, { value: `profile username` })}`, // @todo }, display_name: { placeholder: `${$ls(`icu.enter_*`, { value: `profile display name`, - })}`, //@todo + })}`, // @todo }, about: { - placeholder: `${$ls(`icu.enter_*`, { value: `profile bio` })}`, //@todo + placeholder: `${$ls(`icu.enter_*`, { value: `profile bio` })}`, // @todo }, }; diff --git a/apps-lib-pwa/src/lib/views/profile/profile.svelte b/apps-lib-pwa/src/lib/views/profile/profile.svelte @@ -50,6 +50,10 @@ let val_sel_options_button = $state(``); + $effect(() => { + console.log(JSON.stringify(basis.data, null, 4), `data`); + }); + onMount(async () => { try { if (!basis.kv_init_prevent) await idb_kv_init_page(); @@ -107,6 +111,16 @@ }} /> </FloatPage> + {#if photo_path} + <button + class={`absolute top-12 flex flex-row h-7 px-6 justify-center items-center bg-ly1 active:bg-ly1-a rounded-full`} + onclick={async () => {}} + > + <p class={`font-sans font-[400] text-sm text-ly0-gl`}> + {`Post Photo`} + </p> + </button> + {/if} <FloatPage basis={{ posx: `right`, diff --git a/apps-lib-pwa/svelte.config.js b/apps-lib-pwa/svelte.config.js @@ -1,7 +1,6 @@ import adapter from '@sveltejs/adapter-auto'; import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'; -/** @type {import('@sveltejs/kit').Config} */ const config = { preprocess: vitePreprocess(), kit: {