@w5-ui/svelte 0.1.0 → 0.2.1

package/src/lib/components/IPInput.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 = '0.0.0.0';
-  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('0.0.0.0'),
+    disabled = false,
+    class: className = '',
+    onchange,
+  }: Props = $props();
   const uid = `dash-ui-ip-${++counter}`;
 
   function clampOctet(s: string): string {
@@ -26,8 +34,8 @@
     return [parts[0] ?? '0', parts[1] ?? '0', parts[2] ?? '0', parts[3] ?? '0'];
   }
 
-  let octets: [string, string, string, string] = parseIP(value);
-  let inputs: (HTMLInputElement | null)[] = [null, null, null, null];
+  let octets: [string, string, string, string] = $state(parseIP(value));
+  let inputs: (HTMLInputElement | null)[] = $state([null, null, null, null]);
 
   function focusAt(i: number) {
     const el = inputs[i];
@@ -39,7 +47,7 @@
     octets[i] = clampOctet(raw);
     octets = octets as [string, string, string, string];
     value = octets.join('.');
-    dispatch('change', value);
+    onchange?.(value);
     if (raw.length === 3 && i < 3) setTimeout(() => focusAt(i + 1), 0);
   }
 
@@ -63,7 +71,7 @@
       e.preventDefault();
       octets = text.split('.').map(clampOctet) as [string, string, string, string];
       value = octets.join('.');
-      dispatch('change', value);
+      onchange?.(value);
       setTimeout(() => focusAt(3), 0);
     }
   }
@@ -90,10 +98,10 @@
         {disabled}
         maxlength={3}
         class="ip-input__octet"
-        on:input={(e) => commitOctet(i, e.currentTarget.value)}
-        on:keydown={(e) => handleKey(i, e)}
-        on:paste={handlePaste}
-        on:focus={(e) => e.currentTarget.select()}
+        oninput={(e) => commitOctet(i, e.currentTarget.value)}
+        onkeydown={(e) => handleKey(i, e)}
+        onpaste={handlePaste}
+        onfocus={(e) => e.currentTarget.select()}
       />
       {#if i < 3}
         <span class="ip-input__dot" aria-hidden="true">.</span>

package/src/lib/components/IcicleChart.svelte

@@ -1,14 +1,21 @@
-<script lang="ts">
+<script module lang="ts">
   export interface IcicleNode {
     label: string;
     value?: number;
     color?: string;
     children?: IcicleNode[];
   }
+</script>
+
+<script lang="ts">
+
+  interface Props {
+    root: IcicleNode;
+    height?: number;
+    ariaLabel?: string;
+  }
 
-  export let root: IcicleNode;
-  export let height = 160;
-  export let ariaLabel = 'Icicle chart';
+  let { root, height = 160, ariaLabel = 'Icicle chart' }: Props = $props();
 
   const PALETTE = ['#FF7B7B', '#F5A623', '#A78BFA', '#34D399', '#006FFF', '#00C875', '#FB923C'];
   const VW = 340;
@@ -49,9 +56,9 @@
     return cells;
   }
 
-  $: depth = treeDepth(root);
-  $: levelH = height / (depth + 1);
-  $: cells = flatten(root, 0, 0, VW, levelH, 0, PALETTE[0], { n: 0 });
+  let depth = $derived(treeDepth(root));
+  let levelH = $derived(height / (depth + 1));
+  let cells = $derived(flatten(root, 0, 0, VW, levelH, 0, PALETTE[0], { n: 0 }));
 </script>
 
 {#if cells.length > 0}

package/src/lib/components/IconButton.svelte

@@ -1,9 +1,27 @@
 <script lang="ts">
-  export let title: string | undefined = undefined;
-  export let type: 'button' | 'submit' | 'reset' = 'button';
-  let className = '';
-  export { className as class };
-  export let style: string = '';
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    title?: string | undefined;
+    type?: 'button' | 'submit' | 'reset';
+    class?: string;
+    style?: string;
+    onclick?: (event: MouseEvent) => void;
+    children?: Snippet;
+    [key: string]: unknown;
+  }
+
+  // svelte-ignore state_referenced_locally
+  // svelte-ignore state_referenced_locally
+  let {
+    title = undefined,
+    type = 'button',
+    class: className = '',
+    style = '',
+    onclick,
+    children,
+    ...rest
+  }: Props = $props();
 </script>
 
 <button
@@ -11,9 +29,9 @@
   class="icon-btn {className}"
   {title}
   {style}
-  {...$$restProps}
-  aria-label={$$restProps['aria-label'] ?? title}
-  on:click
+  {...rest}
+  aria-label={(rest['aria-label'] as string | undefined) ?? title}
+  {onclick}
 >
-  <slot />
+  {@render children?.()}
 </button>

package/src/lib/components/InlineEdit.svelte

@@ -1,15 +1,25 @@
 <script lang="ts">
   import { tick } from 'svelte';
 
-  export let value: string;
-  export let onconfirm: (v: string) => void;
-  export let label: string;
-  export let placeholder: string = '';
+  interface Props {
+    value: string;
+    onconfirm: (v: string) => void;
+    label: string;
+    placeholder?: string;
+  }
+
+  let {
+    value,
+    onconfirm,
+    label,
+    placeholder = ''
+  }: Props = $props();
 
-  let editing = false;
-  let draft = value;
-  let inputEl: HTMLInputElement;
-  let editBtnEl: HTMLButtonElement;
+  let editing = $state(false);
+  // svelte-ignore state_referenced_locally
+  let draft = $state(value);
+  let inputEl = $state<HTMLInputElement | undefined>(undefined);
+  let editBtnEl = $state<HTMLButtonElement | undefined>(undefined);
 
   async function startEdit() {
     draft = value;
@@ -47,14 +57,14 @@
       aria-label="Edit {label}"
       bind:value={draft}
       {placeholder}
-      on:keydown={handleKeydown}
+      onkeydown={handleKeydown}
     />
-    <button type="button" class="ie__btn ie__btn--save" aria-label="Save" on:click={confirm}>
+    <button type="button" class="ie__btn ie__btn--save" aria-label="Save" onclick={confirm}>
       <svg viewBox="0 0 14 14" width="12" height="12" fill="none" aria-hidden="true" focusable="false">
         <path d="M2.5 7.5l3.5 3.5L12 3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
       </svg>
     </button>
-    <button type="button" class="ie__btn ie__btn--cancel" aria-label="Cancel" on:click={cancel}>
+    <button type="button" class="ie__btn ie__btn--cancel" aria-label="Cancel" onclick={cancel}>
       <svg viewBox="0 0 14 14" width="12" height="12" fill="none" aria-hidden="true" focusable="false">
         <path d="M3 3l8 8M11 3l-8 8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
       </svg>
@@ -63,7 +73,7 @@
 {:else}
   <span class="ie">
     <span class="ie__text">{value}</span>
-    <button bind:this={editBtnEl} type="button" class="ie__edit" aria-label="Edit {label}" on:click={startEdit}>
+    <button bind:this={editBtnEl} type="button" class="ie__edit" aria-label="Edit {label}" onclick={startEdit}>
       <svg viewBox="0 0 14 14" width="12" height="12" fill="none" aria-hidden="true" focusable="false">
         <path d="M9.5 2l2.5 2.5-8 8H1.5v-2.5l8-8z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
       </svg>

package/src/lib/components/Input.svelte

@@ -1,18 +1,75 @@
 <script lang="ts">
-  export let value: string = '';
-  export let placeholder: string = '';
-  export let type: string = 'text';
-  let className = '';
-  export { className as class };
-  export let style: string = '';
+  interface Props {
+    value?: string;
+    placeholder?: string;
+    type?: string;
+    class?: string;
+    style?: string;
+    oninput?: (event: Event) => void;
+    onchange?: (event: Event) => void;
+    onfocus?: (event: FocusEvent) => void;
+    onblur?: (event: FocusEvent) => void;
+  }
+
+  let {
+    value = $bindable(''),
+    placeholder = '',
+    type = 'text',
+    class: className = '',
+    style = '',
+    oninput,
+    onchange,
+    onfocus,
+    onblur,
+  }: Props = $props();
 </script>
 
 {#if type === 'text'}
-  <input class="input {className}" type="text" {placeholder} bind:value {style} on:input on:change on:focus on:blur />
+  <input
+    class="input {className}"
+    type="text"
+    {placeholder}
+    bind:value
+    {style}
+    {oninput}
+    {onchange}
+    {onfocus}
+    {onblur}
+  />
 {:else if type === 'password'}
-  <input class="input {className}" type="password" {placeholder} bind:value {style} on:input on:change on:focus on:blur />
+  <input
+    class="input {className}"
+    type="password"
+    {placeholder}
+    bind:value
+    {style}
+    {oninput}
+    {onchange}
+    {onfocus}
+    {onblur}
+  />
 {:else if type === 'number'}
-  <input class="input {className}" type="number" {placeholder} bind:value {style} on:input on:change on:focus on:blur />
+  <input
+    class="input {className}"
+    type="number"
+    {placeholder}
+    bind:value
+    {style}
+    {oninput}
+    {onchange}
+    {onfocus}
+    {onblur}
+  />
 {:else}
-  <input class="input {className}" {type} {placeholder} value={value} {style} on:input on:change on:focus on:blur />
+  <input
+    class="input {className}"
+    {type}
+    {placeholder}
+    {value}
+    {style}
+    {oninput}
+    {onchange}
+    {onfocus}
+    {onblur}
+  />
 {/if}

package/src/lib/components/InputGroup.svelte

@@ -1,13 +1,18 @@
 <script lang="ts">
-  export let prefix: string | undefined = undefined;
-  export let suffix: string | undefined = undefined;
+  interface Props {
+    prefix?: string | undefined;
+    suffix?: string | undefined;
+    children?: import('svelte').Snippet;
+  }
+
+  let { prefix = undefined, suffix = undefined, children }: Props = $props();
 </script>
 
 <div class="input-group">
   {#if prefix !== undefined}
     <span class="input-group-addon input-group-addon--prefix">{prefix}</span>
   {/if}
-  <slot />
+  {@render children?.()}
   {#if suffix !== undefined}
     <span class="input-group-addon input-group-addon--suffix">{suffix}</span>
   {/if}

package/src/lib/components/JsonViewer.svelte

@@ -1,15 +1,26 @@
-<script context="module" lang="ts">
+<script module lang="ts">
   export type { JsVal } from './JsonViewerNode.svelte';
 </script>
 
 <script lang="ts">
   import JsonViewerNode from './JsonViewerNode.svelte';
-  export let data: unknown;
-  export let label: string = 'JSON viewer';
-  export let defaultExpanded: boolean = true;
-  export let maxDepth: number = 3;
+  import type { JsVal } from './JsonViewerNode.svelte';
+  interface Props {
+    data: unknown;
+    label?: string;
+    defaultExpanded?: boolean;
+    maxDepth?: number;
+  }
+
+  let {
+    data,
+    label = 'JSON viewer',
+    defaultExpanded = true,
+    maxDepth = 3
+  }: Props = $props();
+  let root = $derived(data as JsVal);
 </script>
 
 <div class="json-viewer" role="tree" aria-label={label}>
-  <JsonViewerNode v={data} depth={0} {maxDepth} startOpen={defaultExpanded} />
+  <JsonViewerNode v={root} depth={0} {maxDepth} startOpen={defaultExpanded} />
 </div>

package/src/lib/components/JsonViewerNode.svelte

@@ -1,26 +1,44 @@
-<script lang="ts">
+<script module lang="ts">
   export type JsVal = string | number | boolean | null | JsVal[] | { [k: string]: JsVal };
-  export let v: JsVal;
-  export let k: string | undefined = undefined;
-  export let depth = 0;
-  export let maxDepth = 3;
-  export let startOpen = true;
+</script>
+
+<script lang="ts">
+  import JsonViewerNode from './JsonViewerNode.svelte';
+  interface Props {
+    v: JsVal;
+    k?: string | undefined;
+    depth?: number;
+    maxDepth?: number;
+    startOpen?: boolean;
+  }
+
+  let {
+    v,
+    k = undefined,
+    depth = 0,
+    maxDepth = 3,
+    startOpen = true
+  }: Props = $props();
 
-  $: isArr = Array.isArray(v);
-  $: isObj = v !== null && typeof v === 'object';
-  $: expandable = isArr || isObj;
+  let isArr = $derived(Array.isArray(v));
+  let isObj = $derived(v !== null && typeof v === 'object');
+  let expandable = $derived(isArr || isObj);
 
-  let open = startOpen && depth < maxDepth;
+  // `open` is initialised from `startOpen`/`depth`/`maxDepth` props but is
+  // intentionally a one-shot snapshot at construction time — afterwards
+  // the user controls it via the toggle.
+  // svelte-ignore state_referenced_locally
+  let open = $state(startOpen && depth < maxDepth);
 
-  $: entries = isArr
+  let entries = $derived(isArr
     ? (v as JsVal[]).map((item: JsVal, i: number) => ({ ek: String(i), ev: item, arrItem: true }))
     : isObj
     ? Object.entries(v as { [key: string]: JsVal }).map(([ek, ev]) => ({ ek, ev, arrItem: false }))
-    : [];
-  $: count = entries.length;
-  $: ob = isArr ? '[' : '{';
-  $: cb = isArr ? ']' : '}';
-  $: indent = depth * 14;
+    : []);
+  let count = $derived(entries.length);
+  let ob = $derived(isArr ? '[' : '{');
+  let cb = $derived(isArr ? ']' : '}');
+  let indent = $derived(depth * 14);
 </script>
 
 {#if !expandable}
@@ -36,7 +54,7 @@
     <button
       type="button"
       class="jv-toggle-row"
-      on:click={() => (open = !open)}
+      onclick={() => (open = !open)}
       aria-label="{open ? 'Collapse' : 'Expand'} {k ?? (isArr ? 'array' : 'object')}"
       style:padding-left="{indent}px"
     >
@@ -48,7 +66,7 @@
     {#if open}
       <div role="group" class="jv-children">
         {#each entries as { ek, ev, arrItem } (ek)}
-          <svelte:self v={ev} k={arrItem ? undefined : ek} depth={depth + 1} {maxDepth} {startOpen} />
+          <JsonViewerNode v={ev} k={arrItem ? undefined : ek} depth={depth + 1} {maxDepth} {startOpen} />
         {/each}
         <div class="jv-row jv-close" style:padding-left="{indent}px">
           <span class="jv-bracket">{cb}</span>

package/src/lib/components/KVTable.svelte

@@ -1,6 +1,10 @@
 <script lang="ts">
-  export let rows: Array<{ label: string; value: string; valueColor?: string }> = [];
-  export let caption: string | undefined = undefined;
+  interface Props {
+    rows?: Array<{ label: string; value: string; valueColor?: string }>;
+    caption?: string | undefined;
+  }
+
+  let { rows = [], caption = undefined }: Props = $props();
 </script>
 
 <table class="kv-table">

package/src/lib/components/KanbanBoard.svelte

@@ -1,27 +1,34 @@
-<script lang="ts">
+<script module lang="ts">
   export interface KanbanCard {
     id: string;
     title: string;
     subtitle?: string;
     meta?: string;
   }
-
   export interface KanbanColumn {
     id: string;
     title: string;
     color?: string;
     cards: KanbanCard[];
   }
+</script>
+
+<script lang="ts">
+
+
+  interface Props {
+    columns: KanbanColumn[];
+    onCardMove?: ((cardId: string, fromColId: string, toColId: string) => void) | undefined;
+    ariaLabel?: string;
+  }
 
-  export let columns: KanbanColumn[];
-  export let onCardMove: ((cardId: string, fromColId: string, toColId: string) => void) | undefined = undefined;
-  export let ariaLabel: string = 'Kanban board';
+  let { columns, onCardMove = undefined, ariaLabel = 'Kanban board' }: Props = $props();
 
-  let announce = '';
-  let grabbed: { cardId: string; colId: string } | null = null;
-  let dragSrc: { cardId: string; colId: string } | null = null;
-  let dragOverCol: string | null = null;
-  let cardRefs: Record<string, HTMLButtonElement> = {};
+  let announce = $state('');
+  let grabbed: { cardId: string; colId: string } | null = $state(null);
+  let dragSrc: { cardId: string; colId: string } | null = $state(null);
+  let dragOverCol: string | null = $state(null);
+  let cardRefs: Record<string, HTMLButtonElement> = $state({});
 
   const announceId = `kanban-announce-${Math.random().toString(36).slice(2, 9)}`;
 
@@ -96,13 +103,13 @@
         class="kanban-col"
         class:kanban-col--over={dragOverCol === col.id}
         role="listitem"
-        on:dragover={e => handleDragOver(e, col.id)}
-        on:dragleave={() => { dragOverCol = null; }}
-        on:drop={e => handleDrop(e, col.id)}
+        ondragover={e => handleDragOver(e, col.id)}
+        ondragleave={() => { dragOverCol = null; }}
+        ondrop={e => handleDrop(e, col.id)}
       >
         <div class="kanban-col-header">
           {#if col.color}
-            <span class="kanban-col-dot" style="background:{col.color}" aria-hidden="true" />
+            <span class="kanban-col-dot" style="background:{col.color}" aria-hidden="true"></span>
           {/if}
           <span class="kanban-col-title">{col.title}</span>
           <span class="kanban-col-count" aria-label="{col.cards.length} card{col.cards.length !== 1 ? 's' : ''}">
@@ -121,9 +128,9 @@
                 draggable={true}
                 aria-pressed={isGrabbed}
                 aria-label="{card.title}{card.subtitle ? `, ${card.subtitle}` : ''}{card.meta ? `, ${card.meta}` : ''}. {isGrabbed ? 'Moving. Use arrow keys to change column, Space to drop, Escape to cancel.' : 'Press Space to move.'}"
-                on:keydown={e => handleKeyDown(e, card, col)}
-                on:dragstart={e => handleDragStart(e, card.id, col.id)}
-                on:dragend={() => { dragSrc = null; dragOverCol = null; }}
+                onkeydown={e => handleKeyDown(e, card, col)}
+                ondragstart={e => handleDragStart(e, card.id, col.id)}
+                ondragend={() => { dragSrc = null; dragOverCol = null; }}
               >
                 <span class="kanban-card-title">{card.title}</span>
                 {#if card.subtitle}<span class="kanban-card-sub">{card.subtitle}</span>{/if}

package/src/lib/components/Kbd.svelte

@@ -1,9 +1,13 @@
 <script lang="ts">
-  export let keys: string | string[];
-  let className = '';
-  export { className as class };
+  interface Props {
+    keys: string | string[];
+    class?: string;
+  }
 
-  $: parts = typeof keys === 'string' ? keys.split('+') : keys;
+  let { keys, class: className = '' }: Props = $props();
+  
+
+  let parts = $derived(typeof keys === 'string' ? keys.split('+') : keys);
 </script>
 
 <kbd class="kbd {className}">

package/src/lib/components/LineChart.svelte

@@ -1,25 +1,37 @@
-<script lang="ts">
+<script module lang="ts">
   export interface LineChartSeries {
     label: string;
     color: string;
     values: number[];
   }
+</script>
+
+<script lang="ts">
+
+  interface Props {
+    series?: LineChartSeries[];
+    labels?: string[];
+    height?: number;
+    ariaLabel?: string;
+  }
 
-  export let series: LineChartSeries[] = [];
-  export let labels: string[] = [];
-  export let height: number = 160;
-  export let ariaLabel: string = 'Line chart';
+  let {
+    series = [],
+    labels = [],
+    height = 160,
+    ariaLabel = 'Line chart'
+  }: Props = $props();
 
   const VW = 400;
   const PAD = { t: 12, r: 8, b: 28, l: 8 };
 
-  $: allValues = series.flatMap((s) => s.values);
-  $: minV = allValues.length ? Math.min(...allValues) : 0;
-  $: maxV = allValues.length ? Math.max(...allValues) : 1;
-  $: range = maxV - minV || 1;
-  $: chartW = VW - PAD.l - PAD.r;
-  $: chartH = height - PAD.t - PAD.b;
-  $: n = series[0]?.values.length ?? 0;
+  let allValues = $derived(series.flatMap((s) => s.values));
+  let minV = $derived(allValues.length ? Math.min(...allValues) : 0);
+  let maxV = $derived(allValues.length ? Math.max(...allValues) : 1);
+  let range = $derived(maxV - minV || 1);
+  let chartW = $derived(VW - PAD.l - PAD.r);
+  let chartH = $derived(height - PAD.t - PAD.b);
+  let n = $derived(series[0]?.values.length ?? 0);
 
   function toX(i: number): number {
     return PAD.l + (n > 1 ? (i / (n - 1)) * chartW : chartW / 2);
@@ -28,14 +40,14 @@
     return PAD.t + chartH - ((v - minV) / range) * chartH;
   }
 
-  $: gridLines = [0, 0.25, 0.5, 0.75, 1].map((f) => PAD.t + (1 - f) * chartH);
+  let gridLines = $derived([0, 0.25, 0.5, 0.75, 1].map((f) => PAD.t + (1 - f) * chartH));
 
-  $: paths = series.map((s) => {
+  let paths = $derived(series.map((s) => {
     const pts = s.values.map((v, i) => `${toX(i).toFixed(1)},${toY(v).toFixed(1)}`);
     return { color: s.color, label: s.label, d: `M ${pts.join(' L ')}` };
-  });
+  }));
 
-  $: areas = series.map((s) => {
+  let areas = $derived(series.map((s) => {
     const pts = s.values.map((v, i) => `${toX(i).toFixed(1)},${toY(v).toFixed(1)}`);
     const bot = (PAD.t + chartH).toFixed(1);
     return {
@@ -43,7 +55,7 @@
       label: s.label,
       d: `M ${toX(0).toFixed(1)},${bot} L ${pts.join(' L ')} L ${toX(n - 1).toFixed(1)},${bot} Z`,
     };
-  });
+  }));
 </script>
 
 <div role="img" aria-label={ariaLabel} style="width:100%;">