@svadmin/ui 0.64.0 → 0.65.1

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;

package/dist/components/SignaturePad.svelte

@@ -0,0 +1,264 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { Button } from './ui/button/index.js';
+  import { RotateCcw, Trash2, Check, Download } from '@lucide/svelte';
+  import { cn } from '../utils.js';
+
+  interface Props {
+    value?: string;
+    width?: number;
+    height?: number;
+    strokeColor?: string;
+    strokeWidth?: number;
+    disabled?: boolean;
+    onchange?: (dataUrl: string) => void;
+    onsave?: (dataUrl: string) => void;
+    class?: string;
+  }
+
+  let {
+    value = $bindable(''),
+    width = 500,
+    height = 200,
+    strokeColor = 'currentColor',
+    strokeWidth = 2.5,
+    disabled = false,
+    onchange,
+    onsave,
+    class: className = '',
+  }: Props = $props();
+
+  let canvasEl = $state<HTMLCanvasElement | null>(null);
+  let isDrawing = $state(false);
+  let isEmpty = $state(true);
+  let history = $state<ImageData[]>([]);
+
+  interface Point {
+    x: number;
+    y: number;
+  }
+
+  let points: Point[] = [];
+
+  function getCanvasPos(e: MouseEvent | TouchEvent): Point | null {
+    if (!canvasEl) return null;
+    const rect = canvasEl.getBoundingClientRect();
+    const scaleX = canvasEl.width / rect.width;
+    const scaleY = canvasEl.height / rect.height;
+
+    if ('touches' in e) {
+      if (e.touches.length === 0) return null;
+      const touch = e.touches[0];
+      if (!touch) return null;
+      return {
+        x: (touch.clientX - rect.left) * scaleX,
+        y: (touch.clientY - rect.top) * scaleY,
+      };
+    } else {
+      return {
+        x: (e.clientX - rect.left) * scaleX,
+        y: (e.clientY - rect.top) * scaleY,
+      };
+    }
+  }
+
+  function startDrawing(e: MouseEvent | TouchEvent) {
+    if (disabled || !canvasEl) return;
+    const pos = getCanvasPos(e);
+    if (!pos) return;
+
+    const ctx = canvasEl.getContext('2d');
+    if (ctx) {
+      history = [...history, ctx.getImageData(0, 0, canvasEl.width, canvasEl.height)];
+    }
+
+    isDrawing = true;
+    points = [pos];
+  }
+
+  function draw(e: MouseEvent | TouchEvent) {
+    if (!isDrawing || disabled || !canvasEl) return;
+    const pos = getCanvasPos(e);
+    if (!pos) return;
+
+    points.push(pos);
+    const ctx = canvasEl.getContext('2d');
+    if (!ctx) return;
+
+    ctx.strokeStyle = strokeColor === 'currentColor' ? (canvasEl ? getComputedStyle(canvasEl).color : 'rgb(0,0,0)') : strokeColor;
+    ctx.lineWidth = strokeWidth;
+    ctx.lineCap = 'round';
+    ctx.lineJoin = 'round';
+
+    if (points.length < 3) {
+      const b = points[0];
+      if (b) {
+        ctx.beginPath();
+        ctx.arc(b.x, b.y, ctx.lineWidth / 2, 0, Math.PI * 2, !0);
+        ctx.fillStyle = ctx.strokeStyle;
+        ctx.fill();
+        ctx.closePath();
+      }
+      return;
+    }
+
+    ctx.beginPath();
+    const p0 = points[0];
+    if (p0) {
+      ctx.moveTo(p0.x, p0.y);
+    }
+    for (let i = 1; i < points.length - 1; i++) {
+      const pi = points[i];
+      const pi1 = points[i + 1];
+      if (pi && pi1) {
+        const xc = (pi.x + pi1.x) / 2;
+        const yc = (pi.y + pi1.y) / 2;
+        ctx.quadraticCurveTo(pi.x, pi.y, xc, yc);
+      }
+    }
+    ctx.stroke();
+    isEmpty = false;
+  }
+
+  function stopDrawing() {
+    if (!isDrawing || !canvasEl) return;
+    isDrawing = false;
+    points = [];
+
+    const dataUrl = canvasEl.toDataURL('image/png');
+    value = dataUrl;
+    onchange?.(dataUrl);
+  }
+
+  export function clear() {
+    if (!canvasEl) return;
+    const ctx = canvasEl.getContext('2d');
+    if (!ctx) return;
+    ctx.clearRect(0, 0, canvasEl.width, canvasEl.height);
+    history = [];
+    isEmpty = true;
+    value = '';
+    onchange?.('');
+  }
+
+  export function undo() {
+    if (!canvasEl || history.length === 0) return;
+    const ctx = canvasEl.getContext('2d');
+    if (!ctx) return;
+    const previous = history[history.length - 1];
+    history = history.slice(0, -1);
+    if (previous) {
+      ctx.putImageData(previous, 0, 0);
+    }
+    isEmpty = history.length === 0;
+    const dataUrl = isEmpty ? '' : canvasEl.toDataURL('image/png');
+    value = dataUrl;
+    onchange?.(dataUrl);
+  }
+
+  function handleSave() {
+    if (isEmpty || !canvasEl) return;
+    const dataUrl = canvasEl.toDataURL('image/png');
+    onsave?.(dataUrl);
+  }
+
+  function handleDownload() {
+    if (isEmpty || !canvasEl) return;
+    const a = document.createElement('a');
+    a.href = canvasEl.toDataURL('image/png');
+    a.download = `signature_${Date.now()}.png`;
+    a.click();
+  }
+
+  onMount(() => {
+    if (canvasEl && value) {
+      const img = new Image();
+      img.onload = () => {
+        const ctx = canvasEl?.getContext('2d');
+        if (ctx && canvasEl) {
+          ctx.drawImage(img, 0, 0);
+          isEmpty = false;
+        }
+      };
+      img.src = value;
+    }
+  });
+</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">
+      Electronic Signature <span class="text-muted-foreground font-normal">(Sign inside the box)</span>
+    </div>
+
+    <div class="flex items-center gap-1.5">
+      <Button
+        variant="ghost"
+        size="sm"
+        class="h-7 text-xs gap-1 text-muted-foreground hover:text-foreground"
+        disabled={history.length === 0 || disabled}
+        onclick={undo}
+      >
+        <RotateCcw class="h-3 w-3" />
+        Undo
+      </Button>
+
+      <Button
+        variant="ghost"
+        size="sm"
+        class="h-7 text-xs gap-1 text-muted-foreground hover:text-destructive hover:bg-destructive/10"
+        disabled={isEmpty || disabled}
+        onclick={clear}
+      >
+        <Trash2 class="h-3 w-3" />
+        Clear
+      </Button>
+
+      {#if onsave}
+        <Button
+          size="sm"
+          class="h-7 text-xs gap-1"
+          disabled={isEmpty || disabled}
+          onclick={handleSave}
+        >
+          <Check class="h-3 w-3" />
+          Confirm
+        </Button>
+      {:else}
+        <Button
+          variant="outline"
+          size="sm"
+          class="h-7 text-xs gap-1"
+          disabled={isEmpty || disabled}
+          onclick={handleDownload}
+        >
+          <Download class="h-3 w-3" />
+          Download
+        </Button>
+      {/if}
+    </div>
+  </div>
+
+  <!-- Canvas Drawing Board -->
+  <div class="relative w-full rounded-lg border-2 border-dashed border-border/80 bg-background overflow-hidden flex items-center justify-center">
+    <canvas
+      bind:this={canvasEl}
+      {width}
+      {height}
+      class="touch-none cursor-crosshair max-w-full h-auto block"
+      onmousedown={startDrawing}
+      onmousemove={draw}
+      onmouseup={stopDrawing}
+      onmouseleave={stopDrawing}
+      ontouchstart={(e) => { e.preventDefault(); startDrawing(e); }}
+      ontouchmove={(e) => { e.preventDefault(); draw(e); }}
+      ontouchend={(e) => { e.preventDefault(); stopDrawing(); }}
+    ></canvas>
+
+    {#if isEmpty}
+      <div class="absolute inset-0 flex items-center justify-center pointer-events-none text-muted-foreground/40 font-mono text-xs select-none">
+        Sign here with mouse or touch
+      </div>
+    {/if}
+  </div>
+</div>

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

@@ -0,0 +1,17 @@
+interface Props {
+    value?: string;
+    width?: number;
+    height?: number;
+    strokeColor?: string;
+    strokeWidth?: number;
+    disabled?: boolean;
+    onchange?: (dataUrl: string) => void;
+    onsave?: (dataUrl: string) => void;
+    class?: string;
+}
+declare const SignaturePad: import("svelte").Component<Props, {
+    clear: () => void;
+    undo: () => void;
+}, "value">;
+type SignaturePad = ReturnType<typeof SignaturePad>;
+export default SignaturePad;