web_lib

commit 0f89ab01bd303c0655606314b871d3e24ff66b0e
parent e637580c481252d1ed27d2ad25a274b9ea69231c
Author: triesap <137732411+triesap@users.noreply.github.com>
Date:   Sun, 17 Nov 2024 04:10:49 +0000

apps-lib: edit image elements, add inset white component

Diffstat:
A
apps-lib/src/lib/components/inset_white.svelte
 | 
9
+++++++++
M
apps-lib/src/lib/el/image_blob.svelte
 | 
5
+++--
M
apps-lib/src/lib/el/image_path.svelte
 | 
22
+++++++++++++++++-----
M
apps-lib/src/lib/index.ts
 | 
1
+

4 files changed, 30 insertions(+), 7 deletions(-)
diff --git a/apps-lib/src/lib/components/inset_white.svelte b/apps-lib/src/lib/components/inset_white.svelte
@@ -0,0 +1,9 @@
+<script lang="ts">
+    import { Fill } from "$lib";
+</script>
+
+<div
+    class={`absolute inset-0 flex flex-row justify-start items-center bg-white/10`}
+>
+    <Fill />
+</div>
diff --git a/apps-lib/src/lib/el/image_blob.svelte b/apps-lib/src/lib/el/image_blob.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
+    import type { IIdOpt } from "$lib";
     import { onDestroy, onMount } from "svelte";
 
-    export let basis: {
+    export let basis: IIdOpt & {
         data: Uint8Array | undefined;
         alt?: string;
     };
@@ -29,7 +30,7 @@
 </script>
 
 {#if img_url}
-    <img src={img_url} alt={basis.alt || null} />
+    <img id={basis.id || null} src={img_url} alt={basis.alt || null} />
 {/if}
 
 <style>
diff --git a/apps-lib/src/lib/el/image_path.svelte b/apps-lib/src/lib/el/image_path.svelte
@@ -1,12 +1,20 @@
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
 <script lang="ts">
-    import type { IClOpt } from "$lib/types/client";
+    import type { ICbGOpt, IClOpt, IIdOpt } from "$lib/types/client";
     import { fmt_cl } from "$lib/utils/client";
     import { onMount } from "svelte";
 
-    export let basis: IClOpt & {
-        path?: string;
-        alt?: string;
-    };
+    export let basis: IClOpt &
+        ICbGOpt<
+            MouseEvent & {
+                currentTarget: EventTarget & HTMLImageElement;
+            }
+        > &
+        IIdOpt & {
+            path?: string;
+            alt?: string;
+        };
 
     let img_src = ``;
 
@@ -21,9 +29,13 @@
 
 {#if img_src}
     <img
+        id={basis.id || null}
         class={`${fmt_cl(basis.path)}`}
         src={img_src}
         alt={basis.alt || null}
+        on:click|stopPropagation={async (ev) => {
+            if (basis.callback) await basis.callback(ev);
+        }}
     />
 {/if}
 
diff --git a/apps-lib/src/lib/index.ts b/apps-lib/src/lib/index.ts
@@ -37,6 +37,7 @@ export { default as TrellisLine } from "./components/trellis_line.svelte";
 export { default as EnvelopeLower } from "./components/envelope_lower.svelte";
 export { default as TrellisSelect } from "./components/trellis_select.svelte";
 export { default as TrellisInput } from "./components/trellis_input.svelte";
+export { default as InsetWhite } from "./components/inset_white.svelte";
 export { default as TrellisEnd } from "./components/trellis_end.svelte";
 export { default as ButtonGlyph } from "./components/button_glyph.svelte";
 export { default as Envelope } from "./components/envelope.svelte";