web_lib

commit c2d4bce3c1d660f4a0e0ce75baad116eea8e7566
parent 40ddff665f208d92332866590a0d863c1c3f4767
Author: triesap <137732411+triesap@users.noreply.github.com>
Date:   Mon,  2 Sep 2024 10:01:57 +0000

apps-lib: add loading view component, change default export naming convention of svelte components for compatibility with svelte 5 syntax

Diffstat:
A
apps-lib/src/lib/components/loading_view.svelte
 | 
9
+++++++++
M
apps-lib/src/lib/index.ts
 | 
30
++++++++++++++++--------------
M
apps-lib/src/lib/types/ui.ts
 | 
2
++
A
apps-lib/src/lib/utils/geo.ts
 | 
12
++++++++++++

4 files changed, 39 insertions(+), 14 deletions(-)
diff --git a/apps-lib/src/lib/components/loading_view.svelte b/apps-lib/src/lib/components/loading_view.svelte
@@ -0,0 +1,9 @@
+<script lang="ts">
+    import { loading as Loading } from "..";
+</script>
+
+<div
+    class={`absolute top-0 left-0 flex flex-row h-[100vh] w-full justify-center items-center`}
+>
+    <Loading basis={{ dim: `xl` }} />
+</div>
diff --git a/apps-lib/src/lib/index.ts b/apps-lib/src/lib/index.ts
@@ -1,25 +1,27 @@
 export * from "./locales/i18n"
-export { default as input_form } from "./components/input_form.svelte"
-export { default as tabs } from "./components/tabs.svelte"
-export { default as trellis } from "./components/trellis.svelte"
-export { default as trellis_default_label } from "./components/trellis_default_label.svelte"
-export { default as trellis_end } from "./components/trellis_end.svelte"
-export { default as trellis_offset } from "./components/trellis_offset.svelte"
-export { default as trellis_row_display_value } from "./components/trellis_row_display_value.svelte"
-export { default as trellis_row_label } from "./components/trellis_row_label.svelte"
-export { default as trellis_title } from "./components/trellis_title.svelte"
-export { default as trellis_touch } from "./components/trellis_touch.svelte"
+export { default as InputForm } from "./components/input_form.svelte"
+export { default as LoadingView } from "./components/loading_view.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"
+export { default as TrellisEnd } from "./components/trellis_end.svelte"
+export { default as TrellisOffset } from "./components/trellis_offset.svelte"
+export { default as TrellisRowDisplayValue } from "./components/trellis_row_display_value.svelte"
+export { default as TrellisRowLabel } from "./components/trellis_row_label.svelte"
+export { default as TrellisTitle } from "./components/trellis_title.svelte"
+export { default as TrellisTouch } from "./components/trellis_touch.svelte"
 export * from "./stores/client"
 export * from "./stores/ndk"
 export * from "./types/client"
 export * from "./types/components"
 export * from "./types/trellis"
 export * from "./types/ui"
-export { default as css_static } from "./ui/css_static.svelte"
-export { default as fill } from "./ui/fill.svelte"
-export { default as glyph } from "./ui/glyph.svelte"
-export { default as loading } from "./ui/loading.svelte"
+export { default as CssStatic } from "./ui/css_static.svelte"
+export { default as Fill } from "./ui/fill.svelte"
+export { default as Glyph } from "./ui/glyph.svelte"
+export { default as Loading } from "./ui/loading.svelte"
 export * from "./utils/client"
 export * from "./utils/dom"
+export * from "./utils/geo"
 export * from "./utils/ndk"
 export * from "./utils/time"
diff --git a/apps-lib/src/lib/types/ui.ts b/apps-lib/src/lib/types/ui.ts
@@ -2,6 +2,8 @@ import type { ThemeLayer } from "@radroots/theme";
 import type { GeometryCardinalDirection, GeometryGlyphDimension, ICbOpt } from "./client";
 
 export type GlyphKey = |
+    `compass` |
+    `map-pin-simple` |
     `handbag-simple` |
     `devices` |
     `lock-key` |
diff --git a/apps-lib/src/lib/utils/geo.ts b/apps-lib/src/lib/utils/geo.ts
@@ -0,0 +1,12 @@
+export const fmt_geo_direction = (opts: { lat: number } | { lng: number }): string => {
+    if ('lat' in opts) {
+        const lat = opts.lat;
+        const direction = lat >= 0 ? 'N' : 'S';
+        return `° ${direction}`;
+    } else {
+        const lng = opts.lng;
+        const direction = lng >= 0 ? 'E' : 'W';
+        return `° ${direction}`;
+    }
+};
+