@w5-ui/svelte 0.1.0 → 0.2.0

package/src/lib/components/LogViewer.svelte

@@ -1,6 +1,4 @@
-<script lang="ts">
-  import { afterUpdate } from 'svelte';
-
+<script module lang="ts">
   export interface LogEntry {
     id?: string;
     timestamp: string;
@@ -10,15 +8,28 @@
     subject?: string;
     detail?: string;
   }
+</script>
+
+<script lang="ts">
+  interface Props {
+    entries?: LogEntry[];
+    height?: number;
+    defaultFollow?: boolean;
+    ariaLabel?: string;
+    className?: string;
+  }
 
-  export let entries: LogEntry[] = [];
-  export let height: number = 360;
-  export let defaultFollow: boolean = true;
-  export let ariaLabel: string = 'Log entries';
-  export let className: string = '';
+  let {
+    entries = [],
+    height = 360,
+    defaultFollow = true,
+    ariaLabel = 'Log entries',
+    className = '',
+  }: Props = $props();
 
-  let follow = defaultFollow;
-  let bodyEl: HTMLDivElement;
+  // svelte-ignore state_referenced_locally
+  let follow = $state(defaultFollow);
+  let bodyEl = $state<HTMLDivElement | undefined>(undefined);
 
   const SEV_DOT: Record<string, string> = {
     error: '#F03A3A',
@@ -27,7 +38,11 @@
     debug: '#4A4B53',
   };
 
-  afterUpdate(() => {
+  // Replaces `afterUpdate`: `$effect` runs after every DOM commit triggered
+  // by reactive dependencies. Reading `entries` ensures we re-scroll on
+  // every new batch.
+  $effect(() => {
+    void entries.length;
     if (follow && bodyEl) bodyEl.scrollTop = bodyEl.scrollHeight;
   });
 </script>
@@ -38,7 +53,7 @@
     <button
       type="button"
       class="lv__follow{follow ? ' lv__follow--on' : ''}"
-      on:click={() => { follow = !follow; }}
+      onclick={() => { follow = !follow; }}
       aria-pressed={follow}
     >Follow</button>
   </div>

package/src/lib/components/LollipopChart.svelte

@@ -1,14 +1,26 @@
-<script lang="ts">
+<script module lang="ts">
   export interface LollipopItem {
     label: string;
     value: number;
     color?: string;
   }
+</script>
+
+<script lang="ts">
+
+  interface Props {
+    items?: LollipopItem[];
+    unit?: string;
+    color?: string;
+    ariaLabel?: string;
+  }
 
-  export let items: LollipopItem[] = [];
-  export let unit: string = '';
-  export let color: string = '#006FFF';
-  export let ariaLabel: string = 'Lollipop chart';
+  let {
+    items = [],
+    unit = '',
+    color = '#006FFF',
+    ariaLabel = 'Lollipop chart'
+  }: Props = $props();
 
   const VW = 340;
   const LABEL_W = 110;
@@ -21,9 +33,9 @@
   const AXIS_H = 18;
   const TICKS = 4;
 
-  $: maxVal = Math.max(...items.map((it) => it.value), 1);
-  $: svgH = PAD_T + items.length * ROW_H + AXIS_H;
-  $: ticks = Array.from({ length: TICKS + 1 }, (_, i) => Math.round((i / TICKS) * maxVal));
+  let maxVal = $derived(Math.max(...items.map((it) => it.value), 1));
+  let svgH = $derived(PAD_T + items.length * ROW_H + AXIS_H);
+  let ticks = $derived(Array.from({ length: TICKS + 1 }, (_, i) => Math.round((i / TICKS) * maxVal)));
 
   function tx(v: number): number {
     return LABEL_W + (v / maxVal) * TRACK_W;

package/src/lib/components/MACInput.svelte

@@ -1,17 +1,25 @@
-<script context="module" lang="ts">
+<script module lang="ts">
   let counter = 0;
 </script>
 
 <script lang="ts">
-  import { createEventDispatcher } from 'svelte';
+  
 
-  export let label: string | undefined = undefined;
-  export let value: string = '00:00:00:00:00:00';
-  export let disabled: boolean = false;
-  let className = '';
-  export { className as class };
+  interface Props {
+    label?: string | undefined;
+    value?: string;
+    disabled?: boolean;
+    class?: string;
+    onchange?: (payload: string) => void;
+  }
 
-  const dispatch = createEventDispatcher<{ change: string }>();
+  let {
+    label = undefined,
+    value = $bindable('00:00:00:00:00:00'),
+    disabled = false,
+    class: className = '',
+    onchange,
+  }: Props = $props();
   const uid = `dash-ui-mac-${++counter}`;
 
   const HEX_RE = /^[0-9a-fA-F]{0,2}$/;
@@ -25,8 +33,8 @@
     ];
   }
 
-  let pairs: [string, string, string, string, string, string] = parseMAC(value);
-  let inputs: (HTMLInputElement | null)[] = [null, null, null, null, null, null];
+  let pairs: [string, string, string, string, string, string] = $state(parseMAC(value));
+  let inputs: (HTMLInputElement | null)[] = $state([null, null, null, null, null, null]);
 
   function focusAt(i: number) {
     const el = inputs[i];
@@ -38,7 +46,7 @@
     pairs[i] = raw.toUpperCase();
     pairs = pairs as [string, string, string, string, string, string];
     value = pairs.join(':');
-    dispatch('change', value);
+    onchange?.(value);
     if (raw.length === 2 && i < 5) setTimeout(() => focusAt(i + 1), 0);
   }
 
@@ -63,7 +71,7 @@
       const normalized = text.replace(/-/g, ':').replace(/:/g, '').match(/.{1,2}/g)?.join(':') ?? text;
       pairs = normalized.split(':').map((p) => p.toUpperCase()) as [string, string, string, string, string, string];
       value = pairs.join(':');
-      dispatch('change', value);
+      onchange?.(value);
       setTimeout(() => focusAt(5), 0);
     }
   }
@@ -85,10 +93,10 @@
         {disabled}
         maxlength={2}
         class="mac-input__pair"
-        on:input={(e) => commitPair(i, e.currentTarget.value)}
-        on:keydown={(e) => handleKey(i, e)}
-        on:paste={handlePaste}
-        on:focus={(e) => e.currentTarget.select()}
+        oninput={(e) => commitPair(i, e.currentTarget.value)}
+        onkeydown={(e) => handleKey(i, e)}
+        onpaste={handlePaste}
+        onfocus={(e) => e.currentTarget.select()}
       />
       {#if i < 5}
         <span class="mac-input__colon" aria-hidden="true">:</span>

package/src/lib/components/MarimekkoChart.svelte

@@ -1,18 +1,25 @@
-<script lang="ts">
+<script module lang="ts">
   export interface MarimekkoSegment {
     label: string;
     value: number;
     color?: string;
   }
-
   export interface MarimekkoColumn {
     label: string;
     segments: MarimekkoSegment[];
   }
+</script>
+
+<script lang="ts">
+
+
+  interface Props {
+    columns: MarimekkoColumn[];
+    height?: number;
+    ariaLabel?: string;
+  }
 
-  export let columns: MarimekkoColumn[];
-  export let height = 160;
-  export let ariaLabel = 'Marimekko chart';
+  let { columns, height = 160, ariaLabel = 'Marimekko chart' }: Props = $props();
 
   const PALETTE = ['#006FFF', '#00C875', '#F5A623', '#A78BFA', '#FF7B7B', '#00C8C8', '#FB923C'];
   const VW = 340;
@@ -22,7 +29,7 @@
   interface Cell { x: number; y: number; w: number; h: number; color: string; label: string; }
   interface Header { x: number; w: number; label: string; }
 
-  $: layout = (() => {
+  let layout = $derived((() => {
     const colTotals = columns.map(col => col.segments.reduce((s, seg) => s + seg.value, 0));
     const grandTotal = colTotals.reduce((s, t) => s + t, 0);
     if (grandTotal === 0) return { cells: [] as Cell[], headers: [] as Header[] };
@@ -50,7 +57,7 @@
       cx += colW;
     });
     return { cells, headers };
-  })();
+  })());
 </script>
 
 {#if layout.cells.length > 0}

package/src/lib/components/MatrixChart.svelte

@@ -1,9 +1,19 @@
 <script lang="ts">
-  export let rows: string[] = [];
-  export let cols: string[] = [];
-  export let values: number[][] = [];
-  export let unit = '';
-  export let ariaLabel = 'Matrix chart';
+  interface Props {
+    rows?: string[];
+    cols?: string[];
+    values?: number[][];
+    unit?: string;
+    ariaLabel?: string;
+  }
+
+  let {
+    rows = [],
+    cols = [],
+    values = [],
+    unit = '',
+    ariaLabel = 'Matrix chart'
+  }: Props = $props();
 
   const LEFT = 80;
   const TOP = 60;
@@ -19,10 +29,10 @@
     return String(n);
   }
 
-  $: allVals = values.flat();
-  $: max = Math.max(...allVals, 1);
-  $: W = LEFT + cols.length * CELL;
-  $: H = TOP + rows.length * CELL;
+  let allVals = $derived(values.flat());
+  let max = $derived(Math.max(...allVals, 1));
+  let W = $derived(LEFT + cols.length * CELL);
+  let H = $derived(TOP + rows.length * CELL);
 </script>
 
 <div role="img" aria-label={ariaLabel} style="width:100%;">

package/src/lib/components/Menubar.svelte

@@ -1,28 +1,35 @@
-<script context="module" lang="ts">
+<script module lang="ts">
   let counter = 0;
   export interface MenubarItem { id: string; label: string; disabled?: boolean; separator?: boolean; }
   export interface MenubarMenu { id: string; label: string; items: MenubarItem[]; }
 </script>
 
 <script lang="ts">
-  import { createEventDispatcher, onMount, onDestroy } from 'svelte';
+  import { onMount, onDestroy } from 'svelte';
 
-  export let menus: MenubarMenu[] = [];
-  export let label: string = 'Menu';
-  let klass = '';
-  export { klass as class };
+  interface Props {
+    menus?: MenubarMenu[];
+    label?: string;
+    class?: string;
+    onaction?: (payload: { menuId: string; itemId: string }) => void;
+  }
 
-  const dispatch = createEventDispatcher<{ action: { menuId: string; itemId: string } }>();
+  let {
+    menus = [],
+    label = 'Menu',
+    class: klass = '',
+    onaction,
+  }: Props = $props();
   const uid = `dash-ui-mb-${++counter}`;
 
-  let openIdx: number | null = null;
-  let activeItemIdx = 0;
-  let triggerEls: HTMLButtonElement[] = [];
-  let rootEl: HTMLDivElement;
+  let openIdx: number | null = $state(null);
+  let activeItemIdx = $state(0);
+  let triggerEls: HTMLButtonElement[] = $state([]);
+  let rootEl = $state<HTMLDivElement | undefined>(undefined);
 
-  $: currentEligible = openIdx !== null
+  let currentEligible = $derived(openIdx !== null
     ? menus[openIdx].items.filter((i) => !i.separator && !i.disabled)
-    : [];
+    : []);
 
   function openMenu(idx: number, focusLast = false) {
     const items = menus[idx].items.filter((i) => !i.separator && !i.disabled);
@@ -33,7 +40,7 @@
   function closeMenu() { openIdx = null; }
 
   function activate(menuId: string, itemId: string) {
-    dispatch('action', { menuId, itemId });
+    onaction?.({ menuId, itemId });
     openIdx = null;
   }
 
@@ -101,8 +108,8 @@
         aria-expanded={isOpen}
         aria-controls={isOpen ? menuId : undefined}
         class={`menubar-trigger${isOpen ? ' is-open' : ''}`}
-        on:click={() => { if (isOpen) closeMenu(); else openMenu(idx); }}
-        on:keydown={(e) => handleTriggerKeyDown(e, idx)}
+        onclick={() => { if (isOpen) closeMenu(); else openMenu(idx); }}
+        onkeydown={(e) => handleTriggerKeyDown(e, idx)}
       >
         {menu.label}
       </button>
@@ -110,7 +117,7 @@
         <ul id={menuId} role="menu" aria-label={menu.label} class="menubar-dropdown">
           {#each menu.items as item (item.id)}
             {#if item.separator}
-              <li role="separator" class="menubar-sep" aria-hidden="true" />
+              <li role="separator" class="menubar-sep" aria-hidden="true"></li>
             {:else}
               {@const eligIdx = elig.indexOf(item)}
               <li
@@ -119,8 +126,8 @@
                 aria-disabled={item.disabled}
                 data-active={eligIdx === activeItemIdx && !item.disabled ? 'true' : undefined}
                 class="menubar-item"
-                on:mouseenter={() => { if (!item.disabled) activeItemIdx = eligIdx; }}
-                on:mousedown|preventDefault={() => { if (!item.disabled) activate(menu.id, item.id); }}
+                onmouseenter={() => { if (!item.disabled) activeItemIdx = eligIdx; }}
+                onmousedown={(e) => { e.preventDefault(); (() => { if (!item.disabled) activate(menu.id, item.id); })(); }}
               >{item.label}</li>
             {/if}
           {/each}

package/src/lib/components/MirroredBarChart.svelte

@@ -1,17 +1,32 @@
-<script lang="ts">
+<script module lang="ts">
   export interface MirroredBarItem {
     label: string;
     left: number;
     right: number;
   }
+</script>
+
+<script lang="ts">
+
+  interface Props {
+    items?: MirroredBarItem[];
+    leftLabel?: string;
+    rightLabel?: string;
+    leftColor?: string;
+    rightColor?: string;
+    unit?: string;
+    ariaLabel?: string;
+  }
 
-  export let items: MirroredBarItem[] = [];
-  export let leftLabel: string = 'Download';
-  export let rightLabel: string = 'Upload';
-  export let leftColor: string = '#006FFF';
-  export let rightColor: string = '#00C8C8';
-  export let unit: string = '';
-  export let ariaLabel: string = 'Mirrored bar chart';
+  let {
+    items = [],
+    leftLabel = 'Download',
+    rightLabel = 'Upload',
+    leftColor = '#006FFF',
+    rightColor = '#00C8C8',
+    unit = '',
+    ariaLabel = 'Mirrored bar chart'
+  }: Props = $props();
 
   const VW = 340;
   const LABEL_W = 80;
@@ -21,8 +36,8 @@
   const HALF_W = (VW - LABEL_W) / 2;
   const CX = VW / 2;
 
-  $: svgH = PAD_T + items.length * ROW_H + PAD_B;
-  $: maxVal = Math.max(...items.flatMap((it) => [it.left, it.right]), 1);
+  let svgH = $derived(PAD_T + items.length * ROW_H + PAD_B);
+  let maxVal = $derived(Math.max(...items.flatMap((it) => [it.left, it.right]), 1));
 
   function bw(val: number): number {
     return (val / maxVal) * HALF_W;

package/src/lib/components/Modal.svelte

@@ -2,36 +2,49 @@
   import { tick } from 'svelte';
   import IconButton from './IconButton.svelte';
   import CloseIcon from '../icons/CloseIcon.svelte';
-  export let open: boolean = false;
-  export let title: string;
+  interface Props {
+    open?: boolean;
+    title: string;
+    children?: import('svelte').Snippet;
+    footer?: import('svelte').Snippet;
+  }
+
+  let {
+    open = $bindable(false),
+    title,
+    children,
+    footer
+  }: Props = $props();
   const titleId = `modal-title-${Math.random().toString(36).slice(2, 9)}`;
   const FOCUSABLE =
     'a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])';
-  let modalEl: HTMLDivElement;
-  let previouslyFocused: HTMLElement | null = null;
-  let prevOverflow = '';
-  let wasOpen = false;
-  let downOnBackdrop = false;
-  $: if (open && !wasOpen) {
-    previouslyFocused = (typeof document !== 'undefined'
-      ? (document.activeElement as HTMLElement | null)
-      : null);
-    if (typeof document !== 'undefined') {
-      prevOverflow = document.body.style.overflow;
-      document.body.style.overflow = 'hidden';
+  let modalEl = $state<HTMLDivElement | undefined>(undefined);
+  let previouslyFocused: HTMLElement | null = $state(null);
+  let prevOverflow = $state('');
+  let wasOpen = $state(false);
+  let downOnBackdrop = $state(false);
+  $effect(() => {
+    if (open && !wasOpen) {
+      previouslyFocused = (typeof document !== 'undefined'
+        ? (document.activeElement as HTMLElement | null)
+        : null);
+      if (typeof document !== 'undefined') {
+        prevOverflow = document.body.style.overflow;
+        document.body.style.overflow = 'hidden';
+      }
+      wasOpen = true;
+      tick().then(() => {
+        const first = modalEl?.querySelector<HTMLElement>(FOCUSABLE);
+        (first ?? modalEl)?.focus();
+      });
+    } else if (!open && wasOpen) {
+      wasOpen = false;
+      if (typeof document !== 'undefined') {
+        document.body.style.overflow = prevOverflow;
+      }
+      previouslyFocused?.focus?.();
     }
-    wasOpen = true;
-    tick().then(() => {
-      const first = modalEl?.querySelector<HTMLElement>(FOCUSABLE);
-      (first ?? modalEl)?.focus();
-    });
-  } else if (!open && wasOpen) {
-    wasOpen = false;
-    if (typeof document !== 'undefined') {
-      document.body.style.overflow = prevOverflow;
-    }
-    previouslyFocused?.focus?.();
-  }
+  });
   function onKeydown(e: KeyboardEvent) {
     if (!open) return;
     if (e.key === 'Escape') {
@@ -57,12 +70,12 @@
   }
 </script>
 
-<svelte:window on:keydown={onKeydown} />
+<svelte:window onkeydown={onKeydown} />
 
 <div
   class="backdrop {open ? 'show' : ''}"
-  on:mousedown={(e) => (downOnBackdrop = e.target === e.currentTarget)}
-  on:click={(e) => {
+  onmousedown={(e) => (downOnBackdrop = e.target === e.currentTarget)}
+  onclick={(e) => {
     if (downOnBackdrop && e.target === e.currentTarget) open = false;
     downOnBackdrop = false;
   }}
@@ -78,13 +91,13 @@
   >
     <div class="modal-h">
       <h2 id={titleId}>{title}</h2>
-      <IconButton title="Close" on:click={() => (open = false)}>
+      <IconButton title="Close" onclick={() => (open = false)}>
         <CloseIcon />
       </IconButton>
     </div>
-    <div class="modal-b"><slot /></div>
-    {#if $$slots.footer}
-      <div class="modal-f"><slot name="footer" /></div>
+    <div class="modal-b">{@render children?.()}</div>
+    {#if footer}
+      <div class="modal-f">{@render footer?.()}</div>
     {/if}
   </div>
 </div>