svseeds 0.4.9 → 0.4.10

package/_svseeds/_ComboBox.svelte

@@ -34,7 +34,6 @@
 
   const preset = "svs-combo-box";
   const NA = -1;
-  const optionStyle = "cursor: default; user-select: none;";
 
   import { type Snippet } from "svelte";
   import { type Action } from "svelte/action";
@@ -56,7 +55,7 @@
   let listElem: HTMLUListElement | undefined = $state();
 
   // *** Bind Handlers *** //
-  let listboxStyle = $derived(`position:absolute;visibility: ${expanded ? "visible" : "hidden"};${overflow.x ? "right:0%;" : ""}${overflow.y ? "bottom:100%;" : ""}`);
+  let listboxStyle = $derived(`position:absolute;cursor:default;user-select:none;visibility: ${expanded ? "visible" : "hidden"};${overflow.x ? "right:0%;" : ""}${overflow.y ? "bottom:100%;" : ""}`);
   let opts = $derived([...options.keys()]);
   let maxlen = $derived(opts.reduce((max, x) => Math.max(max, [...x].length), 0));
 
@@ -133,7 +132,7 @@
       <input bind:value bind:this={element} class={cls(PARTS.MAIN, variant)} type="text" role="combobox" aria-haspopup="listbox" aria-autocomplete="none" aria-controls={idList} aria-expanded={expanded} onfocus={() => open()} onblur={close} {onkeydown} {oninput} {...attrs} />
     {/if}
     {#if extra}
-      <div class={cls(PARTS.EXTRA, variant)} style="position:absolute;margin:auto 0;top:0%;right:0%;">
+      <div class={cls(PARTS.EXTRA, variant)} style="position:absolute;top:50%;right:0%;transform:translateY(-50%);pointer-events:none;">
         {@render extra(expanded, variant)}
       </div>
     {/if}
@@ -142,7 +141,7 @@
         {@const isSelected = i === selected}
         {@const labelStatus = isSelected ? VARIANT.ACTIVE : variant}
         {@const onpointerenter = () => selected = i}
-        <li class={cls(PARTS.LABEL, labelStatus)} aria-selected={isSelected} role="option" style={optionStyle} onpointerdown={apply} {onpointerenter}>
+        <li class={cls(PARTS.LABEL, labelStatus)} aria-selected={isSelected} role="option" onpointerdown={apply} {onpointerenter}>
           {opt}
         </li>
       {/each}

package/_svseeds/_ContextMenu.svelte

@@ -6,6 +6,7 @@
     children: Snippet<[string]>; // Snippet<[variant]>
     open?: boolean; // bindable (false); to observe state, not to control
     lock?: boolean; // bindable (false)
+    target?: HTMLElement;
     element?: HTMLElement; // bindable
     styling?: SVSClass;
     variant?: string; // bindable (VARIANT.NEUTRAL)
@@ -17,6 +18,7 @@
     children: Snippet<[string]>; // Snippet<[variant]>
     open?: boolean; // bindable (false); to observe state, not to control
     lock?: boolean; // bindable (false)
+    target?: HTMLElement;
     element?: HTMLElement; // bindable
     styling?: SVSClass;
     variant?: string; // bindable (VARIANT.NEUTRAL)
@@ -26,39 +28,47 @@
 
   const preset = "svs-context-menu";
 
-  import { type Snippet } from "svelte";
+  import { type Snippet, onDestroy } from "svelte";
+  import { on } from "svelte/events";
   import { type SVSClass, VARIANT, PARTS, fnClass } from "./core";
 </script>
 
 <!---------------------------------------->
 
 <script lang="ts">
-  let { children, open = $bindable(false), lock = $bindable(false), element = $bindable(), styling, variant = $bindable("") }: ContextMenuProps = $props();
+  let { children, open = $bindable(false), lock = $bindable(false), target, element = $bindable(), styling, variant = $bindable("") }: ContextMenuProps = $props();
 
   // *** Initialize *** //
   if (!variant) variant = VARIANT.NEUTRAL;
   const cls = fnClass(preset, styling);
   let position = $state({ x: 0, y: 0 });
+  let listeners: (() => void)[] = [];
+  $effect(() => {
+    listeners.push(on(target ?? document, "contextmenu", show));
+    if (target) listeners.push(on(document, "contextmenu", hide));
+  });
+  onDestroy(() => listeners.forEach((x) => x()));
 
   // *** Bind Handlers *** //
-  let visibility = $derived(open ? "visibility: visible;" : "visibility: hidden; z-index: -9999;");
-  let dynStyle = $derived(`position: fixed; left:${position.x}px; top:${position.y}px; ${visibility}`);
+  let dynStyle = $derived(`position:fixed;left:${position.x}px;top:${position.y}px;${open ? "visibility:visible;" : "visibility:hidden;z-index:-9999;"}`);
 
   // *** Event Handlers *** //
-  function show(ev: MouseEvent) {
+  function show(ev: Event) {
     if (lock) return;
     ev.preventDefault();
+    ev.stopPropagation();
 
+    const [x, y] = [(ev as MouseEvent).clientX, (ev as MouseEvent).clientY];
     const menu = { width: element?.offsetWidth ?? 0, height: element?.offsetHeight ?? 0 };
-    position.x = window.innerWidth-ev.clientX < menu.width ? ev.clientX-menu.width : ev.clientX;
-    position.y = window.innerHeight-ev.clientY < menu.height ? (ev.clientY < menu.height ? ev.clientY : ev.clientY-menu.height) : ev.clientY;
+    position.x = window.innerWidth-x < menu.width ? x-menu.width : x;
+    position.y = window.innerHeight-y < menu.height ? (y < menu.height ? y : y-menu.height) : y;
     open = true;
   }
   function hide() { if (!lock) open = false; }
 </script>
 
 <!---------------------------------------->
-<svelte:document oncontextmenu={show} onclick={hide} />
+<svelte:document onclick={hide} />
 
 <nav class={cls(PARTS.WHOLE, variant)} style={dynStyle} bind:this={element}>
   {@render children(variant)}

package/_svseeds/_ContextMenu.svelte.d.ts

@@ -2,6 +2,7 @@ export interface ContextMenuProps {
     children: Snippet<[string]>;
     open?: boolean;
     lock?: boolean;
+    target?: HTMLElement;
     element?: HTMLElement;
     styling?: SVSClass;
     variant?: string;
@@ -17,6 +18,7 @@ import { type SVSClass } from "./core";
  *   children: Snippet<[string]>; // Snippet<[variant]>
  *   open?: boolean; // bindable (false); to observe state, not to control
  *   lock?: boolean; // bindable (false)
+ *   target?: HTMLElement;
  *   element?: HTMLElement; // bindable
  *   styling?: SVSClass;
  *   variant?: string; // bindable (VARIANT.NEUTRAL)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "svseeds",
-  "version": "0.4.9",
+  "version": "0.4.10",
   "description": "Simple components for Svelte.",
   "type": "module",
   "main": "./index.js",