@w5-ui/svelte 0.1.0

package/src/lib/components/DumbbellChart.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+  export interface DumbbellItem {
+    label: string;
+    start: number;
+    end: number;
+    color?: string;
+  }
+
+  export let items: DumbbellItem[] = [];
+  export let unit: string = '';
+  export let color: string = '#006FFF';
+  export let ariaLabel: string = 'Dumbbell chart';
+
+  const VW = 340;
+  const LABEL_W = 110;
+  const PAD_R = 8;
+  const TRACK_W = VW - LABEL_W - PAD_R;
+  const DOT_R = 5;
+  const ROW_H = 26;
+  const PAD_T = 6;
+  const AXIS_H = 18;
+  const TICKS = 4;
+
+  $: allValues = items.flatMap((it) => [it.start, it.end]);
+  $: minVal = allValues.length ? Math.min(...allValues) : 0;
+  $: maxVal = allValues.length ? Math.max(...allValues) : 1;
+  $: range = maxVal - minVal || 1;
+  $: svgH = PAD_T + items.length * ROW_H + AXIS_H;
+
+  function tx(v: number): number {
+    return LABEL_W + ((v - minVal) / range) * TRACK_W;
+  }
+
+  $: ticks = Array.from({ length: TICKS + 1 }, (_, i) =>
+    Math.round(minVal + (i / TICKS) * range),
+  );
+</script>
+
+<div role="img" aria-label={ariaLabel} style="width:100%;">
+  <svg viewBox="0 0 {VW} {svgH}" style="width:100%;height:auto;display:block;" aria-hidden="true" focusable="false">
+    {#each ticks as t, i}
+      <line x1={tx(t)} y1={PAD_T} x2={tx(t)} y2={PAD_T + items.length * ROW_H} stroke="rgba(255,255,255,0.06)" stroke-width="1" />
+      <text x={tx(t)} y={PAD_T + items.length * ROW_H + 13} fill="#6E7079" font-size="9" text-anchor="middle" font-family="inherit">{t}{unit}</text>
+    {/each}
+    {#each items as item, i}
+      {@const cy = PAD_T + i * ROW_H + ROW_H / 2}
+      {@const cx1 = tx(item.start)}
+      {@const cx2 = tx(item.end)}
+      {@const c = item.color ?? color}
+      <text x={LABEL_W - 6} y={cy + 4} fill="#A4A7B5" font-size="10" text-anchor="end" font-family="inherit">{item.label}</text>
+      <line x1={cx1} y1={cy} x2={cx2} y2={cy} stroke={c} stroke-width="2" opacity="0.4" />
+      <circle cx={cx1} cy={cy} r={DOT_R} fill="#13131A" stroke={c} stroke-width="1.5" />
+      <circle cx={cx2} cy={cy} r={DOT_R} fill={c} />
+    {/each}
+  </svg>
+</div>

package/src/lib/components/DurationInput.svelte

@@ -0,0 +1,118 @@
+<script context="module" lang="ts">
+  let counter = 0;
+</script>
+
+<script lang="ts">
+  import { createEventDispatcher } from 'svelte';
+
+  export let label: string | undefined = undefined;
+  export let value: number = 0;
+  export let maxHours: number = 99;
+  export let disabled: boolean = false;
+  let className = '';
+  export { className as class };
+
+  const dispatch = createEventDispatcher<{ change: number }>();
+  const uid = `dash-ui-dur-${++counter}`;
+
+  function toHMS(secs: number): [number, number, number] {
+    const t = Math.max(0, secs);
+    return [Math.floor(t / 3600), Math.floor((t % 3600) / 60), t % 60];
+  }
+
+  function fromHMS(h: number, m: number, s: number): number {
+    return h * 3600 + m * 60 + s;
+  }
+
+  function pad(n: number): string {
+    return String(n).padStart(2, '0');
+  }
+
+  $: [hours, minutes, seconds] = toHMS(value);
+
+  let inputs: [HTMLInputElement | null, HTMLInputElement | null, HTMLInputElement | null] = [null, null, null];
+
+  function focusAt(i: number) {
+    const el = inputs[i];
+    if (el) { el.focus(); el.select(); }
+  }
+
+  function commit(h: number, m: number, s: number) {
+    value = fromHMS(Math.min(maxHours, h), m, s);
+    dispatch('change', value);
+  }
+
+  function handleKey(field: number, e: KeyboardEvent) {
+    const vals: [number, number, number] = [hours, minutes, seconds];
+    const maxes = [maxHours, 59, 59];
+    if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      vals[field] = vals[field] >= maxes[field] ? 0 : vals[field] + 1;
+      commit(...vals);
+    } else if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      vals[field] = vals[field] <= 0 ? maxes[field] : vals[field] - 1;
+      commit(...vals);
+    } else if ((e.key === ':' || e.key === 'ArrowRight') && field < 2) {
+      e.preventDefault();
+      focusAt(field + 1);
+    } else if (e.key === 'ArrowLeft' && field > 0) {
+      e.preventDefault();
+      focusAt(field - 1);
+    }
+  }
+
+  function handleInput(field: number, e: Event) {
+    const raw = (e.currentTarget as HTMLInputElement).value;
+    if (!/^\d{0,2}$/.test(raw)) return;
+    const n = parseInt(raw, 10);
+    if (isNaN(n)) return;
+    const maxes = [maxHours, 59, 59];
+    const updated: [number, number, number] = [hours, minutes, seconds];
+    updated[field] = Math.min(maxes[field], n);
+    commit(...updated);
+    if (raw.length === 2 && field < 2) setTimeout(() => focusAt(field + 1), 0);
+  }
+
+  const FIELDS = [
+    { idx: 0, ariaLabel: 'Hours' },
+    { idx: 1, ariaLabel: 'Minutes' },
+    { idx: 2, ariaLabel: 'Seconds' },
+  ];
+
+  $: fieldVals = [hours, minutes, seconds];
+  $: fieldMaxes = [maxHours, 59, 59];
+</script>
+
+<div class="dur-input-wrapper {className}">
+  {#if label}
+    <label for="{uid}-h" class="dur-input__label">{label}</label>
+  {/if}
+  <div class="dur-input{disabled ? ' dur-input--disabled' : ''}" role="group" aria-label={label ?? 'Duration'}>
+    {#each FIELDS as { idx, ariaLabel }, i}
+      <input
+        bind:this={inputs[idx]}
+        id={idx === 0 ? `${uid}-h` : undefined}
+        type="text"
+        inputmode="numeric"
+        pattern="[0-9]*"
+        role="spinbutton"
+        aria-label={ariaLabel}
+        aria-valuenow={fieldVals[idx]}
+        aria-valuemin={0}
+        aria-valuemax={fieldMaxes[idx]}
+        aria-valuetext={pad(fieldVals[idx])}
+        value={pad(fieldVals[idx])}
+        {disabled}
+        maxlength={2}
+        class="dur-input__field"
+        on:input={(e) => handleInput(idx, e)}
+        on:keydown={(e) => handleKey(idx, e)}
+        on:focus={(e) => e.currentTarget.select()}
+      />
+      {#if i < 2}
+        <span class="dur-input__sep" aria-hidden="true">:</span>
+      {/if}
+    {/each}
+  </div>
+</div>

package/src/lib/components/EmptyState.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  export let title: string;
+  export let description: string | undefined = undefined;
+  let className = '';
+  export { className as class };
+</script>
+
+<div role="status" aria-live="polite" class="empty-state {className}">
+  <svg class="empty-state__icon" viewBox="0 0 48 48" fill="none" aria-hidden="true" focusable="false">
+    <rect x="6" y="11" width="36" height="28" rx="4" stroke="currentColor" stroke-width="1.5"/>
+    <path d="M6 30h10l3 5h10l3-5h10" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/>
+    <path d="M15 20h18M15 25h12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" opacity=".4"/>
+  </svg>
+  <p class="empty-state__title">{title}</p>
+  {#if description}
+    <p class="empty-state__desc">{description}</p>
+  {/if}
+  {#if $$slots.action}
+    <div class="empty-state__action"><slot name="action" /></div>
+  {/if}
+</div>

package/src/lib/components/ErrorBandChart.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">
+  export interface ErrorBandSeries {
+    label: string;
+    color: string;
+    mean: number[];
+    lower: number[];
+    upper: number[];
+  }
+
+  export let series: ErrorBandSeries[] = [];
+  export let xLabels: string[] = [];
+  export let yRange: [number, number] | undefined = undefined;
+  export let height = 180;
+  export let unit = '';
+  export let ariaLabel = 'Error band chart';
+
+  const VW = 340;
+  const PAD_L = 28;
+  const PAD_R = 8;
+  const PAD_T = 8;
+  const PAD_B = 20;
+  const PLOT_W = VW - PAD_L - PAD_R;
+
+  $: n = series.length ? series[0].mean.length : 0;
+  $: PLOT_H = height - PAD_T - PAD_B;
+  $: allVals = series.flatMap((s) => [...s.lower, ...s.upper]);
+  $: minV = yRange ? yRange[0] : allVals.length ? Math.min(...allVals) : 0;
+  $: maxV = yRange ? yRange[1] : allVals.length ? Math.max(...allVals) : 1;
+  $: vRange = maxV - minV || 1;
+  $: yTicks = [minV, (minV + maxV) / 2, maxV];
+
+  function tx(i: number): number {
+    return PAD_L + (i / (n - 1 || 1)) * PLOT_W;
+  }
+
+  function ty(v: number): number {
+    return PAD_T + (1 - (v - minV) / vRange) * PLOT_H;
+  }
+
+  function bandPath(lower: number[], upper: number[]): string {
+    const top = upper.map((v, i) => `${i === 0 ? 'M' : 'L'}${tx(i).toFixed(1)},${ty(v).toFixed(1)}`).join(' ');
+    const bot = [...lower].reverse().map((v, i) => `L${tx(n - 1 - i).toFixed(1)},${ty(v).toFixed(1)}`).join(' ');
+    return `${top} ${bot} Z`;
+  }
+
+  function linePath(mean: number[]): string {
+    return mean.map((v, i) => `${i === 0 ? 'M' : 'L'}${tx(i).toFixed(1)},${ty(v).toFixed(1)}`).join(' ');
+  }
+</script>
+
+{#if series.length && n > 0}
+  <div role="img" aria-label={ariaLabel} style="width:100%;">
+    <svg viewBox="0 0 {VW} {height}" style="width:100%;height:auto;display:block;" aria-hidden="true" focusable="false">
+      {#each yTicks as v, i (i)}
+        <line x1={PAD_L} y1={ty(v)} x2={PAD_L + PLOT_W} y2={ty(v)} stroke="rgba(255,255,255,0.06)" stroke-width="1" />
+        <text x={PAD_L - 4} y={ty(v) + 4} fill="#6E7079" font-size="8" text-anchor="end" font-family="inherit">{Math.round(v)}{unit}</text>
+      {/each}
+
+      {#each series as s, si (si)}
+        <path d={bandPath(s.lower, s.upper)} fill={s.color} opacity="0.12" />
+        <path d={linePath(s.mean)} fill="none" stroke={s.color} stroke-width="1.5" stroke-linejoin="round" stroke-linecap="round" />
+      {/each}
+
+      {#each xLabels as lbl, i (i)}
+        <text x={PAD_L + (i / (xLabels.length - 1 || 1)) * PLOT_W} y={height - 4} fill="#6E7079" font-size="9" text-anchor="middle" font-family="inherit">{lbl}</text>
+      {/each}
+    </svg>
+  </div>
+{/if}

package/src/lib/components/ExpandableRow.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+  export let colSpan: number;
+  export let defaultExpanded: boolean = false;
+
+  let open = defaultExpanded;
+  const detailId = `exp-${Math.random().toString(36).slice(2, 9)}`;
+</script>
+
+<tbody class="exp-tbody">
+  <tr class="exp-row">
+    <td class="exp-toggle-cell">
+      <button
+        type="button"
+        class="exp-toggle"
+        aria-expanded={open}
+        aria-controls={detailId}
+        on:click={() => (open = !open)}
+      >
+        <svg
+          class="exp-chevron"
+          class:exp-chevron--open={open}
+          viewBox="0 0 10 6"
+          fill="none"
+          aria-hidden="true"
+        >
+          <path d="M1 1l4 4 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+        </svg>
+      </button>
+    </td>
+    <slot name="row" />
+  </tr>
+  <tr
+    id={detailId}
+    class="exp-detail"
+    class:exp-detail--open={open}
+    aria-hidden={!open}
+  >
+    <td colspan={colSpan + 1} class="exp-detail-cell">
+      <slot name="detail" />
+    </td>
+  </tr>
+</tbody>

package/src/lib/components/Field.svelte

@@ -0,0 +1,40 @@
+<script context="module" lang="ts">
+  let counter = 0;
+</script>
+
+<script lang="ts">
+  export let label: string;
+  export let value: string = '';
+  export let id: string | undefined = undefined;
+  export let error: string | undefined = undefined;
+  export let required: boolean = false;
+  export let hint: string | undefined = undefined;
+  const inputId = id ?? `dash-ui-field-${++counter}`;
+  $: errorId = error ? `${inputId}-error` : undefined;
+  $: hintId = hint ? `${inputId}-hint` : undefined;
+  $: describedBy = [hintId, errorId].filter(Boolean).join(' ') || undefined;
+</script>
+
+<div class="field">
+  <label for={inputId}>
+    {label}{#if required}<span class="req" aria-hidden="true"> *</span>{/if}
+  </label>
+  {#if hint}
+    <div class="field-hint" id={hintId}>{hint}</div>
+  {/if}
+  {#if $$slots.default}
+    <slot />
+  {:else}
+    <input
+      class="input"
+      id={inputId}
+      bind:value
+      {required}
+      aria-invalid={error ? true : undefined}
+      aria-describedby={describedBy}
+    />
+  {/if}
+  {#if error}
+    <div class="field-error" id={errorId} role="alert">{error}</div>
+  {/if}
+</div>

package/src/lib/components/FileUpload.svelte

@@ -0,0 +1,96 @@
+<script lang="ts">
+  import { createEventDispatcher } from 'svelte';
+
+  export let label = 'Upload file';
+  export let hint: string | undefined = undefined;
+  export let accept: string | undefined = undefined;
+  export let multiple = false;
+  export let disabled = false;
+
+  const dispatch = createEventDispatcher<{ files: File[] }>();
+
+  let drag = false;
+  let done: string | null = null;
+  let inputEl: HTMLInputElement;
+
+  function handleFiles(files: FileList | null) {
+    if (!files || files.length === 0) return;
+    const arr = Array.from(files);
+    done = arr.length === 1 ? arr[0].name : `${arr.length} files selected`;
+    dispatch('files', arr);
+  }
+
+  function onChange(e: Event) {
+    handleFiles((e.target as HTMLInputElement).files);
+    (e.target as HTMLInputElement).value = '';
+  }
+
+  function onDragOver(e: DragEvent) {
+    e.preventDefault();
+    if (!disabled) drag = true;
+  }
+
+  function onDragLeave(e: DragEvent) {
+    if (!(e.currentTarget as HTMLElement).contains(e.relatedTarget as Node)) {
+      drag = false;
+    }
+  }
+
+  function onDrop(e: DragEvent) {
+    e.preventDefault();
+    drag = false;
+    if (!disabled) handleFiles(e.dataTransfer?.files ?? null);
+  }
+
+  function onClick() {
+    if (!disabled) inputEl.click();
+  }
+
+  function onKeyDown(e: KeyboardEvent) {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      if (!disabled) inputEl.click();
+    }
+  }
+</script>
+
+<div
+  role="button"
+  class="file-upload"
+  class:file-upload--drag={drag}
+  class:file-upload--done={done}
+  class:file-upload--disabled={disabled}
+  on:dragover={onDragOver}
+  on:dragleave={onDragLeave}
+  on:drop={onDrop}
+  on:click={onClick}
+  on:keydown={onKeyDown}
+  tabindex={disabled ? -1 : 0}
+  aria-label={done ?? label}
+>
+  <input
+    bind:this={inputEl}
+    type="file"
+    {accept}
+    {multiple}
+    {disabled}
+    class="sr-only"
+    aria-label={label}
+    tabindex="-1"
+    on:change={onChange}
+  />
+  <svg class="file-upload__icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
+    {#if done}
+      <path d="M5 13l4 4L19 7" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+    {:else}
+      <path d="M12 15V3m0 0L8 7m4-4 4 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
+      <path d="M3 15v4a2 2 0 002 2h14a2 2 0 002-2v-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" fill="none" />
+    {/if}
+  </svg>
+  <div>
+    <span class="file-upload__label">{done ?? label}</span>
+    {#if !done && hint}
+      <p class="file-upload__hint">{hint}</p>
+    {/if}
+  </div>
+</div>

package/src/lib/components/FilterBuilder.svelte

@@ -0,0 +1,160 @@
+<script context="module" lang="ts">
+  let counter = 0;
+  export interface FilterField {
+    key: string;
+    label: string;
+    type?: 'text' | 'number' | 'select';
+    options?: string[];
+  }
+  export interface FilterRule {
+    id: string;
+    field: string;
+    op: string;
+    value: string;
+  }
+
+  const TEXT_OPS = ['contains', 'not contains', 'equals', 'not equals', 'starts with'];
+  const NUM_OPS  = ['equals', 'not equals', 'greater than', 'less than', 'at least', 'at most'];
+  const SEL_OPS  = ['is', 'is not'];
+
+  function opsFor(type?: string) {
+    if (type === 'number') return NUM_OPS;
+    if (type === 'select') return SEL_OPS;
+    return TEXT_OPS;
+  }
+  function defaultOp(type?: string) { return opsFor(type)[0]; }
+</script>
+
+<script lang="ts">
+  import { createEventDispatcher } from 'svelte';
+
+  export let fields: FilterField[] = [];
+  export let value: FilterRule[] = [];
+  export let conjunction: 'and' | 'or' = 'and';
+  export let ariaLabel = 'Filter builder';
+
+  const uid = `dash-ui-fb-${++counter}`;
+  const dispatch = createEventDispatcher<{ change: { rules: FilterRule[]; conjunction: 'and' | 'or' } }>();
+
+  function emit(rules: FilterRule[], conj: 'and' | 'or' = conjunction) {
+    dispatch('change', { rules, conjunction: conj });
+  }
+
+  function addRule() {
+    const f = fields[0];
+    emit([...value, { id: String(Date.now()), field: f?.key ?? '', op: defaultOp(f?.type), value: '' }]);
+  }
+
+  function removeRule(id: string) {
+    emit(value.filter((r) => r.id !== id));
+  }
+
+  function setField(id: string, key: string) {
+    const f = fields.find((x) => x.key === key);
+    emit(value.map((r) => r.id === id ? { ...r, field: key, op: defaultOp(f?.type), value: '' } : r));
+  }
+
+  function setOp(id: string, op: string) {
+    emit(value.map((r) => r.id === id ? { ...r, op } : r));
+  }
+
+  function setValue(id: string, v: string) {
+    emit(value.map((r) => r.id === id ? { ...r, value: v } : r));
+  }
+</script>
+
+<div class="fb" role="group" aria-label={ariaLabel}>
+  <div class="fb-header">
+    <span class="fb-label">Filters</span>
+    {#if value.length > 0}
+      <span class="fb-conj-label">Match</span>
+      <div class="fb-conj" role="group" aria-label="Conjunction">
+        {#each ['and', 'or'] as c}
+          <button
+            type="button"
+            class="fb-conj-btn{conjunction === c ? ' is-active' : ''}"
+            aria-pressed={conjunction === c}
+            on:click={() => emit(value, c)}
+          >{c.toUpperCase()}</button>
+        {/each}
+      </div>
+      <span class="fb-conj-label">conditions</span>
+    {/if}
+    <button type="button" class="fb-add" on:click={addRule} aria-label="Add filter rule">+ Add rule</button>
+    {#if value.length > 0}
+      <button type="button" class="fb-clear" on:click={() => emit([])} aria-label="Clear all filters">Clear</button>
+    {/if}
+  </div>
+  {#if value.length > 0}
+    <ul class="fb-rules" aria-label="Filter rules">
+      {#each value as rule, i}
+        {@const f = fields.find((x) => x.key === rule.field)}
+        {@const ops = opsFor(f?.type)}
+        {@const fieldId = `${uid}-f${i}`}
+        {@const opId = `${uid}-op${i}`}
+        {@const valId = `${uid}-v${i}`}
+        <li class="fb-rule">
+          <label class="sr-only" for={fieldId}>Field {i + 1}</label>
+          <select
+            id={fieldId}
+            class="fb-select"
+            value={rule.field}
+            on:change={(e) => setField(rule.id, e.currentTarget.value)}
+            aria-label="Rule {i + 1} field"
+          >
+            {#each fields as x}
+              <option value={x.key}>{x.label}</option>
+            {/each}
+          </select>
+          <label class="sr-only" for={opId}>Operator {i + 1}</label>
+          <select
+            id={opId}
+            class="fb-select fb-select--op"
+            value={rule.op}
+            on:change={(e) => setOp(rule.id, e.currentTarget.value)}
+            aria-label="Rule {i + 1} operator"
+          >
+            {#each ops as op}
+              <option value={op}>{op}</option>
+            {/each}
+          </select>
+          <label class="sr-only" for={valId}>Value {i + 1}</label>
+          {#if f?.type === 'select'}
+            <select
+              id={valId}
+              class="fb-select fb-select--val"
+              value={rule.value}
+              on:change={(e) => setValue(rule.id, e.currentTarget.value)}
+              aria-label="Rule {i + 1} value"
+            >
+              <option value="">Any</option>
+              {#each f.options ?? [] as o}
+                <option value={o}>{o}</option>
+              {/each}
+            </select>
+          {:else}
+            <input
+              id={valId}
+              class="fb-input"
+              type={f?.type === 'number' ? 'number' : 'text'}
+              value={rule.value}
+              placeholder="Value…"
+              on:input={(e) => setValue(rule.id, e.currentTarget.value)}
+              aria-label="Rule {i + 1} value"
+            />
+          {/if}
+          <button
+            type="button"
+            class="fb-remove icon-btn"
+            on:click={() => removeRule(rule.id)}
+            aria-label="Remove rule {i + 1}"
+          >
+            <svg viewBox="0 0 12 12" width="10" height="10" aria-hidden="true" fill="currentColor">
+              <path d="M1 1l10 10M11 1L1 11" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
+            </svg>
+          </button>
+        </li>
+      {/each}
+    </ul>
+  {/if}
+</div>