@svadmin/lite 0.7.0 → 0.8.1

package/dist/components/LitePivotTable.svelte

@@ -0,0 +1,163 @@
+<script lang="ts">
+  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;
+    class?: string;
+  }
+
+  let {
+    data = [],
+    rowField,
+    rowLabel = rowField,
+    columnField,
+    columnLabel = columnField,
+    valueField,
+    valueLabel = valueField,
+    aggregator = 'sum',
+    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;
+  }
+
+  function getCellValue(r: string, c: string): number {
+    const vals = data
+      .filter((d) => String(d[rowField] ?? '—') === r && String(d[columnField] ?? '—') === c)
+      .map((d) => Number(d[valueField]) || 0);
+    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="sv-lite-pivot-container {className}">
+  <div class="sv-lite-pivot-header">
+    <strong>Pivot Analysis</strong> ({rowLabel} × {columnLabel})
+    <span class="sv-lite-pivot-sub">Aggregator: {aggregator.toUpperCase()} ({valueLabel})</span>
+  </div>
+
+  <table class="sv-lite-pivot-table">
+    <thead>
+      <tr>
+        <th class="sv-lite-th-dim">{rowLabel} \ {columnLabel}</th>
+        {#each distinctColValues as col (col)}
+          <th>{col}</th>
+        {/each}
+        <th class="sv-lite-th-total">Total</th>
+      </tr>
+    </thead>
+    <tbody>
+      {#each distinctRowValues as row (row)}
+        <tr>
+          <td class="sv-lite-td-dim">{row}</td>
+          {#each distinctColValues as col (col)}
+            {@const val = getCellValue(row, col)}
+            <td class="sv-lite-td-val">{val.toLocaleString(undefined, { maximumFractionDigits: 2 })}</td>
+          {/each}
+          <td class="sv-lite-td-rowtotal">{getRowTotal(row).toLocaleString(undefined, { maximumFractionDigits: 2 })}</td>
+        </tr>
+      {/each}
+    </tbody>
+    <tfoot>
+      <tr>
+        <td class="sv-lite-td-dim">Grand Total</td>
+        {#each distinctColValues as col (col)}
+          <td class="sv-lite-td-val">{getColTotal(col).toLocaleString(undefined, { maximumFractionDigits: 2 })}</td>
+        {/each}
+        <td class="sv-lite-td-grandtotal">{grandTotal.toLocaleString(undefined, { maximumFractionDigits: 2 })}</td>
+      </tr>
+    </tfoot>
+  </table>
+</div>
+
+<style>
+  .sv-lite-pivot-container {
+    display: block;
+    border: 1px solid #e2e8f0;
+    border-radius: 6px;
+    padding: 12px;
+    background-color: #ffffff;
+    font-size: 12px;
+    overflow-x: auto;
+  }
+  .sv-lite-pivot-header {
+    margin-bottom: 10px;
+    font-size: 13px;
+    color: #0f172a;
+  }
+  .sv-lite-pivot-sub {
+    color: #64748b;
+    font-size: 11px;
+    margin-left: 8px;
+  }
+  .sv-lite-pivot-table {
+    width: 100%;
+    border-collapse: collapse;
+    text-align: right;
+  }
+  .sv-lite-pivot-table th, .sv-lite-pivot-table td {
+    border: 1px solid #e2e8f0;
+    padding: 6px 10px;
+  }
+  .sv-lite-pivot-table thead {
+    background-color: #f8fafc;
+    color: #475569;
+  }
+  .sv-lite-th-dim, .sv-lite-td-dim {
+    text-align: left;
+    background-color: #f8fafc;
+    font-weight: 600;
+  }
+  .sv-lite-th-total, .sv-lite-td-rowtotal {
+    background-color: #f1f5f9;
+    font-weight: 600;
+  }
+  .sv-lite-pivot-table tfoot {
+    background-color: #f1f5f9;
+    font-weight: bold;
+    border-top: 2px solid #cbd5e1;
+  }
+  .sv-lite-td-grandtotal {
+    color: #4338ca;
+    font-weight: bold;
+  }
+</style>

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

@@ -0,0 +1,15 @@
+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;
+    class?: string;
+}
+declare const LitePivotTable: import("svelte").Component<Props, {}, "">;
+type LitePivotTable = ReturnType<typeof LitePivotTable>;
+export default LitePivotTable;

package/dist/components/LitePresenceAvatarGroup.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+  interface LitePresenceUser {
+    id: string;
+    name: string;
+    status?: 'online' | 'idle' | 'editing';
+  }
+
+  interface Props {
+    users?: LitePresenceUser[];
+    label?: string;
+  }
+
+  let {
+    users = [],
+    label = 'Viewing now',
+  }: Props = $props();
+</script>
+
+<div class="lite-presence-container">
+  <span class="lite-presence-label">{label}:</span>
+  {#each users as user (user.id)}
+    <span class="lite-presence-badge" title="{user.name} ({user.status ?? 'online'})">
+      👤 {user.name}
+    </span>
+  {/each}
+  {#if users.length === 0}
+    <span style="color: #94a3b8; font-size: 11px;">No active viewers</span>
+  {/if}
+</div>
+
+<style>
+  .lite-presence-container {
+    display: inline-flex;
+    align-items: center;
+    font-size: 12px;
+    margin-bottom: 8px;
+  }
+  .lite-presence-label {
+    color: #64748b;
+    margin-right: 6px;
+    font-weight: 500;
+  }
+  .lite-presence-badge {
+    display: inline-block;
+    padding: 2px 6px;
+    background: #f1f5f9;
+    border: 1px solid #cbd5e1;
+    border-radius: 4px;
+    margin-right: 4px;
+    font-size: 11px;
+  }
+</style>

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

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

package/dist/components/LitePrintableBill.svelte

@@ -0,0 +1,119 @@
+<script lang="ts">
+  interface LiteBillItem {
+    name: string;
+    spec?: string;
+    quantity: number;
+    unitPrice: number;
+    total?: number;
+  }
+
+  interface Props {
+    title?: string;
+    billNumber: string;
+    date: string;
+    companyName?: string;
+    customerName: string;
+    items?: LiteBillItem[];
+    notes?: string;
+  }
+
+  let {
+    title = 'INVOICE / RECEIPT',
+    billNumber,
+    date,
+    companyName = 'Enterprise Admin',
+    customerName,
+    items = [],
+    notes,
+  }: Props = $props();
+
+  const total = $derived(
+    items.reduce((acc, item) => acc + (item.total ?? item.quantity * item.unitPrice), 0)
+  );
+</script>
+
+<div class="lite-bill-card">
+  <div class="lite-bill-header">
+    <div style="float: left;">
+      <h3 style="margin: 0;">{title}</h3>
+      <span style="color: #64748b; font-size: 11px;">No: {billNumber}</span>
+    </div>
+    <div style="float: right; text-align: right;">
+      <strong>{companyName}</strong>
+      <div style="color: #64748b; font-size: 11px;">Date: {date}</div>
+    </div>
+    <div style="clear: both;"></div>
+  </div>
+
+  <div class="lite-bill-customer">
+    <strong>Bill To:</strong> {customerName}
+  </div>
+
+  <table class="lite-table lite-bill-table">
+    <thead>
+      <tr>
+        <th style="width: 30px;">#</th>
+        <th>Item Description</th>
+        <th style="width: 50px; text-align: center;">Qty</th>
+        <th style="width: 80px; text-align: right;">Price</th>
+        <th style="width: 90px; text-align: right;">Total</th>
+      </tr>
+    </thead>
+    <tbody>
+      {#each items as item, index (index)}
+        {@const rowTotal = item.total ?? item.quantity * item.unitPrice}
+        <tr>
+          <td style="text-align: center;">{index + 1}</td>
+          <td>{item.name} {#if item.spec}({item.spec}){/if}</td>
+          <td style="text-align: center;">{item.quantity}</td>
+          <td style="text-align: right;">¥{item.unitPrice.toFixed(2)}</td>
+          <td style="text-align: right; font-weight: bold;">¥{rowTotal.toFixed(2)}</td>
+        </tr>
+      {/each}
+    </tbody>
+    <tfoot>
+      <tr>
+        <td colspan="4" style="text-align: right; font-weight: bold;">Grand Total:</td>
+        <td style="text-align: right; font-weight: bold; color: #2563eb;">¥{total.toFixed(2)}</td>
+      </tr>
+    </tfoot>
+  </table>
+
+  {#if notes}
+    <div class="lite-bill-notes">
+      <strong>Notes:</strong> {notes}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .lite-bill-card {
+    background: #ffffff;
+    border: 1px solid #cbd5e1;
+    border-radius: 6px;
+    padding: 20px;
+    margin-bottom: 16px;
+  }
+  .lite-bill-header {
+    border-bottom: 2px solid #3b82f6;
+    padding-bottom: 12px;
+    margin-bottom: 12px;
+  }
+  .lite-bill-customer {
+    background: #f8fafc;
+    padding: 8px 12px;
+    border-radius: 4px;
+    margin-bottom: 16px;
+    font-size: 13px;
+  }
+  .lite-bill-table {
+    width: 100%;
+    margin-bottom: 12px;
+  }
+  .lite-bill-notes {
+    font-size: 12px;
+    color: #64748b;
+    border-top: 1px solid #e2e8f0;
+    padding-top: 8px;
+  }
+</style>

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

@@ -0,0 +1,19 @@
+interface LiteBillItem {
+    name: string;
+    spec?: string;
+    quantity: number;
+    unitPrice: number;
+    total?: number;
+}
+interface Props {
+    title?: string;
+    billNumber: string;
+    date: string;
+    companyName?: string;
+    customerName: string;
+    items?: LiteBillItem[];
+    notes?: string;
+}
+declare const LitePrintableBill: import("svelte").Component<Props, {}, "">;
+type LitePrintableBill = ReturnType<typeof LitePrintableBill>;
+export default LitePrintableBill;

package/dist/components/LiteSensitiveDataMask.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+  interface Props {
+    value?: string | number | null;
+    type?: 'phone' | 'id-card' | 'email' | 'bank-card' | 'secret' | 'custom';
+  }
+
+  let {
+    value = '',
+    type = 'phone',
+  }: Props = $props();
+
+  const rawString = $derived(String(value ?? ''));
+
+  function mask(val: string, maskType: string): string {
+    if (!val) return '—';
+    switch (maskType) {
+      case 'phone':
+        return val.length >= 7 ? `${val.slice(0, 3)}****${val.slice(-4)}` : '****';
+      case 'id-card':
+        return val.length >= 10 ? `${val.slice(0, 6)}********${val.slice(-4)}` : '********';
+      case 'email': {
+        const parts = val.split('@');
+        return parts.length === 2 ? `${parts[0].slice(0, 1)}***@${parts[1]}` : '***@***.***';
+      }
+      default:
+        return '••••••••';
+    }
+  }
+
+  const masked = $derived(mask(rawString, type));
+</script>
+
+<span class="lite-sensitive-mask" style="font-family: monospace; font-size: 12px;">
+  {masked}
+</span>

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

@@ -0,0 +1,7 @@
+interface Props {
+    value?: string | number | null;
+    type?: 'phone' | 'id-card' | 'email' | 'bank-card' | 'secret' | 'custom';
+}
+declare const LiteSensitiveDataMask: import("svelte").Component<Props, {}, "">;
+type LiteSensitiveDataMask = ReturnType<typeof LiteSensitiveDataMask>;
+export default LiteSensitiveDataMask;

package/dist/components/LiteSignaturePad.svelte

@@ -0,0 +1,99 @@
+<script lang="ts">
+  interface Props {
+    name?: string;
+    value?: string;
+    label?: string;
+    formAction?: string;
+    disabled?: boolean;
+    class?: string;
+  }
+
+  let {
+    name = 'signature',
+    value = '',
+    label = 'Electronic Signature',
+    formAction = '',
+    disabled = false,
+    class: className = '',
+  }: Props = $props();
+</script>
+
+<div class="sv-lite-signature-card {className}">
+  <div class="sv-lite-sig-header">
+    <strong>{label}</strong>
+    <span class="sv-lite-sig-sub">(Upload or review signed receipt)</span>
+  </div>
+
+  {#if value}
+    <div class="sv-lite-sig-preview">
+      <img src={value} alt="Signature Preview" class="sv-lite-sig-img" />
+    </div>
+  {:else}
+    <div class="sv-lite-sig-empty">
+      No signature registered
+    </div>
+  {/if}
+
+  <div class="sv-lite-sig-actions">
+    <form method="POST" action={formAction} enctype="multipart/form-data">
+      <input type="file" name={name} accept="image/*" {disabled} class="sv-lite-sig-file" />
+      <button type="submit" {disabled} class="sv-lite-sig-btn">Upload Signature</button>
+    </form>
+  </div>
+</div>
+
+<style>
+  .sv-lite-signature-card {
+    display: block;
+    border: 1px solid #e2e8f0;
+    border-radius: 6px;
+    padding: 12px;
+    background-color: #ffffff;
+    font-size: 12px;
+  }
+  .sv-lite-sig-header {
+    margin-bottom: 8px;
+    font-size: 13px;
+    color: #0f172a;
+  }
+  .sv-lite-sig-sub {
+    color: #64748b;
+    font-size: 11px;
+    margin-left: 6px;
+  }
+  .sv-lite-sig-preview {
+    border: 2px dashed #cbd5e1;
+    border-radius: 4px;
+    padding: 10px;
+    text-align: center;
+    background-color: #f8fafc;
+    margin-bottom: 10px;
+  }
+  .sv-lite-sig-img {
+    max-height: 80px;
+    max-width: 100%;
+    vertical-align: middle;
+  }
+  .sv-lite-sig-empty {
+    border: 2px dashed #cbd5e1;
+    border-radius: 4px;
+    padding: 24px;
+    text-align: center;
+    color: #94a3b8;
+    background-color: #f8fafc;
+    margin-bottom: 10px;
+  }
+  .sv-lite-sig-file {
+    font-size: 11px;
+    margin-right: 8px;
+  }
+  .sv-lite-sig-btn {
+    padding: 4px 10px;
+    font-size: 11px;
+    background-color: #4f46e5;
+    color: #ffffff;
+    border: none;
+    border-radius: 3px;
+    cursor: pointer;
+  }
+</style>

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

@@ -0,0 +1,11 @@
+interface Props {
+    name?: string;
+    value?: string;
+    label?: string;
+    formAction?: string;
+    disabled?: boolean;
+    class?: string;
+}
+declare const LiteSignaturePad: import("svelte").Component<Props, {}, "">;
+type LiteSignaturePad = ReturnType<typeof LiteSignaturePad>;
+export default LiteSignaturePad;

package/dist/components/LiteSplitPaneLayout.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    direction?: 'horizontal' | 'vertical';
+    pane1?: Snippet;
+    pane2?: Snippet;
+  }
+
+  let {
+    direction = 'horizontal',
+    pane1,
+    pane2,
+  }: Props = $props();
+</script>
+
+<div class="lite-split-layout lite-split-{direction}">
+  <div class="lite-split-pane-1">
+    {#if pane1}
+      {@render pane1()}
+    {/if}
+  </div>
+
+  <div class="lite-split-divider"></div>
+
+  <div class="lite-split-pane-2">
+    {#if pane2}
+      {@render pane2()}
+    {/if}
+  </div>
+</div>
+
+<style>
+  .lite-split-layout {
+    display: flex;
+    background: #ffffff;
+    border: 1px solid #cbd5e1;
+    border-radius: 6px;
+    margin-bottom: 16px;
+    min-height: 300px;
+  }
+  .lite-split-horizontal {
+    flex-direction: row;
+  }
+  .lite-split-vertical {
+    flex-direction: column;
+  }
+  .lite-split-pane-1 {
+    flex: 0 0 35%;
+    padding: 12px;
+    overflow-y: auto;
+  }
+  .lite-split-pane-2 {
+    flex: 1 1 auto;
+    padding: 12px;
+    overflow-y: auto;
+  }
+  .lite-split-divider {
+    background: #e2e8f0;
+    width: 2px;
+  }
+  .lite-split-vertical .lite-split-divider {
+    width: 100%;
+    height: 2px;
+  }
+</style>

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

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    direction?: 'horizontal' | 'vertical';
+    pane1?: Snippet;
+    pane2?: Snippet;
+}
+declare const LiteSplitPaneLayout: import("svelte").Component<Props, {}, "">;
+type LiteSplitPaneLayout = ReturnType<typeof LiteSplitPaneLayout>;
+export default LiteSplitPaneLayout;