@svadmin/ui 0.63.0 → 0.65.0

package/dist/components/PivotTable.svelte

@@ -0,0 +1,140 @@
+<script lang="ts">
+  import { cn } from '../utils.js';
+
+  export type AggregationFn = 'sum' | 'count' | 'avg' | 'min' | 'max';
+
+  interface Props {
+    data: Record<string, unknown>[];
+    rowField: string;
+    rowLabel?: string;
+    columnField: string;
+    columnLabel?: string;
+    valueField: string;
+    valueLabel?: string;
+    aggregator?: AggregationFn;
+    formatValue?: (val: number) => string;
+    class?: string;
+  }
+
+  let {
+    data = [],
+    rowField,
+    rowLabel = rowField,
+    columnField,
+    columnLabel = columnField,
+    valueField,
+    valueLabel = valueField,
+    aggregator = 'sum',
+    formatValue = (v: number) => v.toLocaleString(undefined, { maximumFractionDigits: 2 }),
+    class: className = '',
+  }: Props = $props();
+
+  const distinctRowValues = $derived(
+    Array.from(new Set(data.map((d) => String(d[rowField] ?? '—')))).sort()
+  );
+
+  const distinctColValues = $derived(
+    Array.from(new Set(data.map((d) => String(d[columnField] ?? '—')))).sort()
+  );
+
+  function computeAgg(vals: number[]): number {
+    if (vals.length === 0) return 0;
+    if (aggregator === 'count') return vals.length;
+    if (aggregator === 'sum') return vals.reduce((a, b) => a + b, 0);
+    if (aggregator === 'avg') return vals.reduce((a, b) => a + b, 0) / vals.length;
+    if (aggregator === 'min') return Math.min(...vals);
+    if (aggregator === 'max') return Math.max(...vals);
+    return 0;
+  }
+
+  const pivotMatrix = $derived(() => {
+    const map = new Map<string, number[]>();
+    for (const item of data) {
+      const r = String(item[rowField] ?? '—');
+      const c = String(item[columnField] ?? '—');
+      const key = `${r}:::${c}`;
+      const num = Number(item[valueField]) || 0;
+      const existing = map.get(key);
+      if (existing) {
+        existing.push(num);
+      } else {
+        map.set(key, [num]);
+      }
+    }
+    return map;
+  });
+
+  function getCellValue(r: string, c: string): number {
+    const key = `${r}:::${c}`;
+    const vals = pivotMatrix().get(key) ?? [];
+    return computeAgg(vals);
+  }
+
+  function getRowTotal(r: string): number {
+    const vals = data
+      .filter((d) => String(d[rowField] ?? '—') === r)
+      .map((d) => Number(d[valueField]) || 0);
+    return computeAgg(vals);
+  }
+
+  function getColTotal(c: string): number {
+    const vals = data
+      .filter((d) => String(d[columnField] ?? '—') === c)
+      .map((d) => Number(d[valueField]) || 0);
+    return computeAgg(vals);
+  }
+
+  const grandTotal = $derived(
+    computeAgg(data.map((d) => Number(d[valueField]) || 0))
+  );
+</script>
+
+<div class={cn('rounded-xl border border-border bg-card p-4 shadow-xs text-xs space-y-3', className)}>
+  <div class="flex items-center justify-between gap-2 pb-2 border-b border-border/60">
+    <div class="font-semibold text-foreground">
+      Pivot Analysis <span class="text-muted-foreground font-normal">({rowLabel} × {columnLabel})</span>
+    </div>
+    <div class="text-muted-foreground">
+      Aggregator: <strong class="text-primary uppercase">{aggregator}</strong> ({valueLabel})
+    </div>
+  </div>
+
+  <div class="overflow-x-auto rounded-lg border border-border/60">
+    <table class="w-full text-right border-collapse">
+      <thead class="bg-muted/40 font-semibold text-muted-foreground border-b border-border/60">
+        <tr>
+          <th class="px-3 py-2.5 text-left bg-muted/60">{rowLabel} \ {columnLabel}</th>
+          {#each distinctColValues as col (col)}
+            <th class="px-3 py-2.5 font-semibold text-foreground">{col}</th>
+          {/each}
+          <th class="px-3 py-2.5 bg-muted/60 font-semibold text-foreground">Total</th>
+        </tr>
+      </thead>
+      <tbody class="divide-y divide-border/40 font-mono">
+        {#each distinctRowValues as row (row)}
+          <tr class="hover:bg-muted/20 transition-colors">
+            <td class="px-3 py-2 text-left font-medium text-foreground bg-muted/20 font-sans">{row}</td>
+            {#each distinctColValues as col (col)}
+              {@const val = getCellValue(row, col)}
+              <td class={cn('px-3 py-2', val === 0 ? 'text-muted-foreground/40' : 'text-foreground')}>
+                {formatValue(val)}
+              </td>
+            {/each}
+            <td class="px-3 py-2 font-semibold text-foreground bg-muted/20">
+              {formatValue(getRowTotal(row))}
+            </td>
+          </tr>
+        {/each}
+      </tbody>
+      <tfoot class="bg-muted/60 font-semibold font-mono border-t-2 border-border text-foreground">
+        <tr>
+          <td class="px-3 py-2.5 text-left font-sans">Grand Total</td>
+          {#each distinctColValues as col (col)}
+            <td class="px-3 py-2.5">{formatValue(getColTotal(col))}</td>
+          {/each}
+          <td class="px-3 py-2.5 text-primary">{formatValue(grandTotal)}</td>
+        </tr>
+      </tfoot>
+    </table>
+  </div>
+</div>

package/dist/components/PivotTable.svelte.d.ts

@@ -0,0 +1,16 @@
+export type AggregationFn = 'sum' | 'count' | 'avg' | 'min' | 'max';
+interface Props {
+    data: Record<string, unknown>[];
+    rowField: string;
+    rowLabel?: string;
+    columnField: string;
+    columnLabel?: string;
+    valueField: string;
+    valueLabel?: string;
+    aggregator?: AggregationFn;
+    formatValue?: (val: number) => string;
+    class?: string;
+}
+declare const PivotTable: import("svelte").Component<Props, {}, "">;
+type PivotTable = ReturnType<typeof PivotTable>;
+export default PivotTable;

package/dist/components/PresenceAvatarGroup.svelte

@@ -0,0 +1,89 @@
+<script lang="ts">
+  import { Users } from '@lucide/svelte';
+  import { cn } from '../utils.js';
+
+  export interface PresenceUser {
+    id: string;
+    name: string;
+    avatar?: string;
+    status?: 'online' | 'idle' | 'editing';
+  }
+
+  interface Props {
+    users?: PresenceUser[];
+    maxVisible?: number;
+    label?: string;
+    class?: string;
+  }
+
+  let {
+    users = [],
+    maxVisible = 4,
+    label = 'Viewing now',
+    class: className = '',
+  }: Props = $props();
+
+  const visibleUsers = $derived(users.slice(0, maxVisible));
+  const hiddenCount = $derived(Math.max(0, users.length - maxVisible));
+
+  function getInitials(name: string): string {
+    return name
+      .split(' ')
+      .map((n) => n[0])
+      .join('')
+      .toUpperCase()
+      .slice(0, 2);
+  }
+
+  function getStatusIndicator(status?: PresenceUser['status']) {
+    switch (status) {
+      case 'editing':
+        return 'bg-warning ring-warning/30 animate-pulse';
+      case 'idle':
+        return 'bg-muted-foreground ring-muted-foreground/30';
+      default:
+        return 'bg-success ring-success/30';
+    }
+  }
+</script>
+
+<div class={cn('inline-flex items-center gap-2 text-xs select-none', className)}>
+  {#if label}
+    <span class="text-muted-foreground flex items-center gap-1">
+      <Users class="h-3.5 w-3.5" />
+      {label}:
+    </span>
+  {/if}
+
+  <div class="flex items-center -space-x-2 overflow-hidden py-1">
+    {#each visibleUsers as user (user.id)}
+      <div
+        class="relative inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-full border-2 border-background bg-muted text-[11px] font-semibold text-foreground shadow-xs transition-transform hover:z-10 hover:scale-110"
+        title="{user.name} ({user.status ?? 'online'})"
+      >
+        {#if user.avatar}
+          <img src={user.avatar} alt={user.name} class="h-full w-full rounded-full object-cover" />
+        {:else}
+          <span>{getInitials(user.name)}</span>
+        {/if}
+
+        <!-- Status Dot Indicator -->
+        <span
+          class={cn(
+            'absolute bottom-0 right-0 h-2 w-2 rounded-full ring-2 ring-background',
+            getStatusIndicator(user.status)
+          )}
+        ></span>
+      </div>
+    {/each}
+
+    {#if hiddenCount > 0}
+      <div
+        class="relative inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-full border-2 border-background bg-secondary text-[10px] font-medium text-secondary-foreground shadow-xs"
+        title="{hiddenCount} more users"
+      >
+        +{hiddenCount}
+      </div>
+    {/if}
+  </div>
+</div>

package/dist/components/PresenceAvatarGroup.svelte.d.ts

@@ -0,0 +1,15 @@
+export interface PresenceUser {
+    id: string;
+    name: string;
+    avatar?: string;
+    status?: 'online' | 'idle' | 'editing';
+}
+interface Props {
+    users?: PresenceUser[];
+    maxVisible?: number;
+    label?: string;
+    class?: string;
+}
+declare const PresenceAvatarGroup: import("svelte").Component<Props, {}, "">;
+type PresenceAvatarGroup = ReturnType<typeof PresenceAvatarGroup>;
+export default PresenceAvatarGroup;

package/dist/components/PrintableBill.svelte

@@ -0,0 +1,149 @@
+<script lang="ts">
+  import { Button } from './ui/button/index.js';
+  import { Printer } from '@lucide/svelte';
+  import { cn } from '../utils.js';
+
+  export interface BillItem {
+    name: string;
+    spec?: string;
+    quantity: number;
+    unitPrice: number;
+    total?: number;
+  }
+
+  interface Props {
+    title?: string;
+    billNumber: string;
+    date: string;
+    companyName?: string;
+    companyAddress?: string;
+    customerName: string;
+    customerAddress?: string;
+    items?: BillItem[];
+    notes?: string;
+    issuer?: string;
+    onprint?: () => void;
+    class?: string;
+  }
+
+  let {
+    title = 'INVOICE / RECEIPT',
+    billNumber,
+    date,
+    companyName = 'Enterprise Admin Co., Ltd.',
+    companyAddress,
+    customerName,
+    customerAddress,
+    items = [],
+    notes,
+    issuer,
+    onprint,
+    class: className = '',
+  }: Props = $props();
+
+  const subtotal = $derived(
+    items.reduce((acc, item) => acc + (item.total ?? item.quantity * item.unitPrice), 0)
+  );
+
+  function handlePrint() {
+    if (onprint) {
+      onprint();
+    } else if (typeof window !== 'undefined') {
+      window.print();
+    }
+  }
+</script>
+
+<div class={cn('space-y-4 text-xs', className)}>
+  <!-- Print Trigger Bar (Hidden during actual print) -->
+  <div class="flex items-center justify-between p-3 rounded-xl border border-border bg-card shadow-xs print:hidden">
+    <div class="text-muted-foreground">
+      Document Ready: <strong class="text-foreground">{billNumber}</strong>
+    </div>
+    <Button size="sm" class="h-8 text-xs gap-1.5" onclick={handlePrint}>
+      <Printer class="h-3.5 w-3.5" />
+      Print Document
+    </Button>
+  </div>
+
+  <!-- Printable A4 Paper Container -->
+  <div class="rounded-xl border border-border bg-card p-8 shadow-xs max-w-3xl mx-auto space-y-6 print:border-none print:shadow-none print:p-0 print:m-0">
+    <!-- Header -->
+    <div class="flex items-start justify-between border-b-2 border-primary/40 pb-4">
+      <div>
+        <h2 class="text-xl font-bold text-foreground tracking-tight">{title}</h2>
+        <p class="text-muted-foreground font-mono mt-0.5">No: {billNumber}</p>
+      </div>
+      <div class="text-right space-y-0.5">
+        <h3 class="font-semibold text-foreground">{companyName}</h3>
+        {#if companyAddress}
+          <p class="text-muted-foreground text-[11px]">{companyAddress}</p>
+        {/if}
+        <p class="text-muted-foreground text-[11px]">Date: {date}</p>
+      </div>
+    </div>
+
+    <!-- Customer Info -->
+    <div class="p-3 rounded-lg bg-muted/20 border border-border/40 space-y-1">
+      <span class="text-muted-foreground font-semibold uppercase text-[10px] block">Bill To</span>
+      <div class="font-semibold text-foreground">{customerName}</div>
+      {#if customerAddress}
+        <div class="text-muted-foreground text-[11px]">{customerAddress}</div>
+      {/if}
+    </div>
+
+    <!-- Items Table -->
+    <table class="w-full text-left border-collapse border border-border/60">
+      <thead class="bg-muted/40 font-semibold text-foreground border-b border-border/60">
+        <tr>
+          <th class="p-2 border-r border-border/40 w-12 text-center">#</th>
+          <th class="p-2 border-r border-border/40">Item Description</th>
+          <th class="p-2 border-r border-border/40 text-center w-20">Qty</th>
+          <th class="p-2 border-r border-border/40 text-right w-24">Unit Price</th>
+          <th class="p-2 text-right w-28">Amount</th>
+        </tr>
+      </thead>
+      <tbody class="divide-y divide-border/40">
+        {#each items as item, index (index)}
+          {@const rowTotal = item.total ?? item.quantity * item.unitPrice}
+          <tr>
+            <td class="p-2 border-r border-border/40 text-center text-muted-foreground">{index + 1}</td>
+            <td class="p-2 border-r border-border/40 font-medium text-foreground">
+              {item.name}
+              {#if item.spec}
+                <span class="block text-[11px] text-muted-foreground">{item.spec}</span>
+              {/if}
+            </td>
+            <td class="p-2 border-r border-border/40 text-center tabular-nums">{item.quantity}</td>
+            <td class="p-2 border-r border-border/40 text-right tabular-nums">¥{item.unitPrice.toFixed(2)}</td>
+            <td class="p-2 text-right tabular-nums font-semibold text-foreground">¥{rowTotal.toFixed(2)}</td>
+          </tr>
+        {/each}
+      </tbody>
+      <tfoot class="border-t-2 border-border font-semibold text-foreground bg-muted/20">
+        <tr>
+          <td colspan="4" class="p-2.5 text-right border-r border-border/40">Total Summary:</td>
+          <td class="p-2.5 text-right text-sm tabular-nums text-primary font-bold">¥{subtotal.toFixed(2)}</td>
+        </tr>
+      </tfoot>
+    </table>
+
+    <!-- Footer Notes & Signatures -->
+    <div class="flex items-end justify-between pt-4 border-t border-border/40 text-xs">
+      <div class="space-y-1 max-w-sm">
+        {#if notes}
+          <span class="font-semibold text-muted-foreground block text-[11px]">Notes:</span>
+          <p class="text-muted-foreground">{notes}</p>
+        {/if}
+      </div>
+
+      <div class="text-right space-y-4">
+        {#if issuer}
+          <p class="text-muted-foreground">Issued By: <strong class="text-foreground">{issuer}</strong></p>
+        {/if}
+        <div class="w-40 border-b border-foreground/40 pt-6"></div>
+        <p class="text-[10px] text-muted-foreground text-center">Authorized Signature & Stamp</p>
+      </div>
+    </div>
+  </div>
+</div>

package/dist/components/PrintableBill.svelte.d.ts

@@ -0,0 +1,24 @@
+export interface BillItem {
+    name: string;
+    spec?: string;
+    quantity: number;
+    unitPrice: number;
+    total?: number;
+}
+interface Props {
+    title?: string;
+    billNumber: string;
+    date: string;
+    companyName?: string;
+    companyAddress?: string;
+    customerName: string;
+    customerAddress?: string;
+    items?: BillItem[];
+    notes?: string;
+    issuer?: string;
+    onprint?: () => void;
+    class?: string;
+}
+declare const PrintableBill: import("svelte").Component<Props, {}, "">;
+type PrintableBill = ReturnType<typeof PrintableBill>;
+export default PrintableBill;

package/dist/components/SensitiveDataMask.svelte

@@ -0,0 +1,125 @@
+<script lang="ts">
+  import { untrack } from 'svelte';
+  import { Eye, EyeOff, Copy, Check } from '@lucide/svelte';
+  import { Button } from './ui/button/index.js';
+  import { cn } from '../utils.js';
+
+  export type MaskType = 'phone' | 'id-card' | 'email' | 'bank-card' | 'secret' | 'custom';
+
+  interface Props {
+    value?: string | number | null;
+    type?: MaskType;
+    maskPattern?: (val: string) => string;
+    allowUnmask?: boolean;
+    defaultMasked?: boolean;
+    onUnmask?: () => void | Promise<void>;
+    class?: string;
+  }
+
+  let {
+    value = '',
+    type = 'phone',
+    maskPattern,
+    allowUnmask = true,
+    defaultMasked = true,
+    onUnmask,
+    class: className = '',
+  }: Props = $props();
+
+  let isMasked = $state(untrack(() => defaultMasked));
+  let isCopied = $state(false);
+
+  const rawString = $derived(String(value ?? ''));
+
+  function maskValue(val: string, maskType: MaskType): string {
+    if (!val) return '—';
+    if (maskPattern) return maskPattern(val);
+
+    switch (maskType) {
+      case 'phone':
+        // e.g. 13812345678 -> 138****5678
+        return val.length >= 7
+          ? `${val.slice(0, 3)}****${val.slice(-4)}`
+          : '****';
+      case 'id-card':
+        // e.g. 110101199001011234 -> 110101********1234
+        return val.length >= 10
+          ? `${val.slice(0, 6)}********${val.slice(-4)}`
+          : '********';
+      case 'email': {
+        const parts = val.split('@');
+        if (parts.length === 2) {
+          const name = parts[0];
+          const maskedName = name.length > 2 ? `${name[0]}***${name.slice(-1)}` : `${name[0]}***`;
+          return `${maskedName}@${parts[1]}`;
+        }
+        return '***@***.***';
+      }
+      case 'bank-card':
+        return val.length >= 8
+          ? `${val.slice(0, 4)} **** **** ${val.slice(-4)}`
+          : '**** ****';
+      case 'secret':
+        return val.length >= 8
+          ? `${val.slice(0, 3)}••••••••••••${val.slice(-4)}`
+          : '••••••••';
+      default:
+        return '••••••••';
+    }
+  }
+
+  const displayedText = $derived(isMasked ? maskValue(rawString, type) : rawString);
+
+  async function toggleMask() {
+    if (isMasked && onUnmask) {
+      await onUnmask();
+    }
+    isMasked = !isMasked;
+  }
+
+  async function handleCopy() {
+    if (typeof navigator !== 'undefined' && navigator.clipboard) {
+      await navigator.clipboard.writeText(rawString);
+      isCopied = true;
+      setTimeout(() => {
+        isCopied = false;
+      }, 1500);
+    }
+  }
+</script>
+
+<div class={cn('inline-flex items-center gap-1.5 font-mono text-xs text-foreground', className)}>
+  <span class="truncate select-all">{displayedText}</span>
+
+  {#if allowUnmask && rawString}
+    <Button
+      variant="ghost"
+      size="icon"
+      class="h-5 w-5 text-muted-foreground hover:text-foreground"
+      onclick={toggleMask}
+      aria-label={isMasked ? 'Reveal sensitive data' : 'Mask sensitive data'}
+    >
+      {#if isMasked}
+        <Eye class="h-3 w-3" />
+      {:else}
+        <EyeOff class="h-3 w-3" />
+      {/if}
+    </Button>
+  {/if}
+
+  {#if rawString}
+    <Button
+      variant="ghost"
+      size="icon"
+      class="h-5 w-5 text-muted-foreground hover:text-foreground"
+      onclick={handleCopy}
+      aria-label="Copy to clipboard"
+    >
+      {#if isCopied}
+        <Check class="h-3 w-3 text-success" />
+      {:else}
+        <Copy class="h-3 w-3" />
+      {/if}
+    </Button>
+  {/if}
+</div>

package/dist/components/SensitiveDataMask.svelte.d.ts

@@ -0,0 +1,13 @@
+export type MaskType = 'phone' | 'id-card' | 'email' | 'bank-card' | 'secret' | 'custom';
+interface Props {
+    value?: string | number | null;
+    type?: MaskType;
+    maskPattern?: (val: string) => string;
+    allowUnmask?: boolean;
+    defaultMasked?: boolean;
+    onUnmask?: () => void | Promise<void>;
+    class?: string;
+}
+declare const SensitiveDataMask: import("svelte").Component<Props, {}, "">;
+type SensitiveDataMask = ReturnType<typeof SensitiveDataMask>;
+export default SensitiveDataMask;