@svadmin/lite 0.7.0 → 0.8.0

package/dist/components/LiteTableSummary.svelte

@@ -0,0 +1,93 @@
+<script lang="ts">
+  interface LiteTableSummaryColumn {
+    key: string;
+    label?: string;
+    align?: 'left' | 'center' | 'right';
+  }
+
+  interface Props {
+    columns: LiteTableSummaryColumn[];
+    data?: Record<string, unknown>[];
+    aggregations?: Record<string, string | ((rows: Record<string, unknown>[]) => string | number)>;
+    title?: string;
+    titleColumnKey?: string;
+    prefix?: Record<string, string>;
+    suffix?: Record<string, string>;
+  }
+
+  let {
+    columns,
+    data = [],
+    aggregations = {},
+    title = 'Total',
+    titleColumnKey,
+    prefix = {},
+    suffix = {},
+  }: Props = $props();
+
+  const titleKey = $derived(titleColumnKey || (columns[0]?.key ?? ''));
+
+  function calculate(key: string, type: unknown): string | number {
+    if (!data.length) return '—';
+    if (typeof type === 'function') return type(data);
+    if (type === 'count') return data.length;
+
+    const numbers = data
+      .map((row) => Number(row[key]))
+      .filter((val) => !isNaN(val) && val !== null && val !== undefined);
+
+    if (numbers.length === 0) return '—';
+
+    if (type === 'sum') {
+      const sum = numbers.reduce((acc, curr) => acc + curr, 0);
+      return Number.isInteger(sum) ? sum : sum.toFixed(2);
+    }
+    if (type === 'avg') {
+      const avg = numbers.reduce((acc, curr) => acc + curr, 0) / numbers.length;
+      return avg.toFixed(2);
+    }
+    return '—';
+  }
+</script>
+
+<div class="lite-table-summary-container">
+  <table class="lite-table lite-summary-table">
+    <tbody>
+      <tr>
+        {#each columns as col (col.key)}
+          {@const isTitle = col.key === titleKey}
+          {@const aggType = aggregations[col.key]}
+          <td style="text-align: {col.align || 'left'}; font-weight: {isTitle || aggType ? 'bold' : 'normal'};">
+            {#if isTitle && !aggType}
+              <span>{title}</span>
+            {:else if aggType}
+              <span>
+                {#if prefix[col.key]}{prefix[col.key]}{/if}{calculate(col.key, aggType)}{#if suffix[col.key]}{suffix[col.key]}{/if}
+              </span>
+            {:else}
+              <span style="color: #94a3b8;">—</span>
+            {/if}
+          </td>
+        {/each}
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+<style>
+  .lite-table-summary-container {
+    width: 100%;
+    overflow-x: auto;
+    background: #f8fafc;
+    border-top: 2px solid #cbd5e1;
+  }
+  .lite-summary-table {
+    width: 100%;
+    margin-bottom: 0;
+  }
+  .lite-summary-table td {
+    padding: 8px 12px;
+    font-size: 12px;
+    color: #1e293b;
+  }
+</style>

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

@@ -0,0 +1,17 @@
+interface LiteTableSummaryColumn {
+    key: string;
+    label?: string;
+    align?: 'left' | 'center' | 'right';
+}
+interface Props {
+    columns: LiteTableSummaryColumn[];
+    data?: Record<string, unknown>[];
+    aggregations?: Record<string, string | ((rows: Record<string, unknown>[]) => string | number)>;
+    title?: string;
+    titleColumnKey?: string;
+    prefix?: Record<string, string>;
+    suffix?: Record<string, string>;
+}
+declare const LiteTableSummary: import("svelte").Component<Props, {}, "">;
+type LiteTableSummary = ReturnType<typeof LiteTableSummary>;
+export default LiteTableSummary;

package/dist/components/LiteTreeTable.svelte

@@ -0,0 +1,85 @@
+<script lang="ts">
+  export interface LiteTreeColumn {
+    key: string;
+    label: string;
+  }
+
+  interface Props {
+    data: Record<string, unknown>[];
+    columns: LiteTreeColumn[];
+    primaryKey?: string;
+    childrenKey?: string;
+  }
+
+  let {
+    data = [],
+    columns = [],
+    primaryKey = 'id',
+    childrenKey = 'children',
+  }: Props = $props();
+
+  interface FlatLiteItem {
+    record: Record<string, unknown>;
+    id: string | number;
+    level: number;
+    hasChildren: boolean;
+  }
+
+  function flatten(items: Record<string, unknown>[], level = 0): FlatLiteItem[] {
+    const flat: FlatLiteItem[] = [];
+    for (const item of items) {
+      const id = item[primaryKey] as string | number;
+      const children = item[childrenKey] as Record<string, unknown>[] | undefined;
+      const hasChildren = Array.isArray(children) && children.length > 0;
+      flat.push({ record: item, id, level, hasChildren });
+      if (hasChildren && children) {
+        flat.push(...flatten(children, level + 1));
+      }
+    }
+    return flat;
+  }
+
+  const flattened = $derived(flatten(data));
+</script>
+
+<div class="lite-tree-table lite-form-group">
+  <table class="lite-table">
+    <thead>
+      <tr>
+        {#each columns as col (col.key)}
+          <th>{col.label}</th>
+        {/each}
+      </tr>
+    </thead>
+    <tbody>
+      {#each flattened as row (row.id)}
+        <tr>
+          {#each columns as col, idx (col.key)}
+            <td>
+              {#if idx === 0}
+                <span style="display: inline-block; padding-left: {row.level * 16}px;">
+                  {#if row.level > 0}↳ {/if}
+                  {row.record[col.key] ?? '—'}
+                </span>
+              {:else}
+                {row.record[col.key] ?? '—'}
+              {/if}
+            </td>
+          {/each}
+        </tr>
+      {:else}
+        <tr>
+          <td colspan={columns.length} style="text-align: center; color: #94a3b8; padding: 24px;">
+            No tree data
+          </td>
+        </tr>
+      {/each}
+    </tbody>
+  </table>
+</div>
+
+<style>
+  .lite-tree-table {
+    overflow-x: auto;
+  }
+</style>

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

@@ -0,0 +1,13 @@
+export interface LiteTreeColumn {
+    key: string;
+    label: string;
+}
+interface Props {
+    data: Record<string, unknown>[];
+    columns: LiteTreeColumn[];
+    primaryKey?: string;
+    childrenKey?: string;
+}
+declare const LiteTreeTable: import("svelte").Component<Props, {}, "">;
+type LiteTreeTable = ReturnType<typeof LiteTreeTable>;
+export default LiteTreeTable;

package/dist/components/LiteVersionDiffViewer.svelte

@@ -0,0 +1,129 @@
+<script lang="ts">
+  interface Props {
+    oldValue?: Record<string, unknown>;
+    newValue?: Record<string, unknown>;
+    oldTitle?: string;
+    newTitle?: string;
+    fieldLabels?: Record<string, string>;
+  }
+
+  let {
+    oldValue = {},
+    newValue = {},
+    oldTitle = 'Previous Version',
+    newTitle = 'Current Version',
+    fieldLabels = {},
+  }: Props = $props();
+
+  const allKeys = $derived(
+    Array.from(new Set([...Object.keys(oldValue || {}), ...Object.keys(newValue || {})]))
+  );
+
+  function getStatus(key: string): 'added' | 'removed' | 'modified' | 'unchanged' {
+    const hasOld = key in oldValue && oldValue[key] !== undefined;
+    const hasNew = key in newValue && newValue[key] !== undefined;
+    if (!hasOld && hasNew) return 'added';
+    if (hasOld && !hasNew) return 'removed';
+    if (JSON.stringify(oldValue[key]) !== JSON.stringify(newValue[key])) return 'modified';
+    return 'unchanged';
+  }
+
+  function formatVal(val: unknown): string {
+    if (val === undefined || val === null) return '—';
+    if (typeof val === 'object') return JSON.stringify(val);
+    return String(val);
+  }
+</script>
+
+<div class="lite-diff-viewer">
+  <div class="lite-diff-header">
+    <strong>Record Comparison</strong>
+  </div>
+
+  <table class="lite-table lite-diff-table">
+    <thead>
+      <tr>
+        <th style="width: 25%;">Field</th>
+        <th style="width: 37.5%;">{oldTitle}</th>
+        <th style="width: 37.5%;">{newTitle}</th>
+      </tr>
+    </thead>
+    <tbody>
+      {#each allKeys as key (key)}
+        {@const status = getStatus(key)}
+        <tr class="lite-diff-row lite-diff-{status}">
+          <td>
+            <strong>{fieldLabels[key] || key}</strong>
+            {#if status !== 'unchanged'}
+              <span class="lite-badge lite-badge-{status}">[{status.toUpperCase()}]</span>
+            {/if}
+          </td>
+          <td class="lite-diff-old">
+            {#if status === 'removed'}
+              <del>{formatVal(oldValue[key])}</del>
+            {:else}
+              {formatVal(oldValue[key])}
+            {/if}
+          </td>
+          <td class="lite-diff-new">
+            {#if status === 'added'}
+              <ins>{formatVal(newValue[key])}</ins>
+            {:else if status === 'modified'}
+              <strong>{formatVal(newValue[key])}</strong>
+            {:else}
+              {formatVal(newValue[key])}
+            {/if}
+          </td>
+        </tr>
+      {/each}
+    </tbody>
+  </table>
+</div>
+
+<style>
+  .lite-diff-viewer {
+    background: #ffffff;
+    border: 1px solid #cbd5e1;
+    border-radius: 6px;
+    margin-bottom: 16px;
+  }
+  .lite-diff-header {
+    padding: 10px 12px;
+    background: #f8fafc;
+    border-bottom: 1px solid #e2e8f0;
+    font-size: 13px;
+  }
+  .lite-diff-table {
+    width: 100%;
+    margin-bottom: 0;
+    font-size: 12px;
+  }
+  .lite-diff-table th {
+    background: #f1f5f9;
+    padding: 8px 12px;
+    text-align: left;
+  }
+  .lite-diff-table td {
+    padding: 8px 12px;
+    border-top: 1px solid #e2e8f0;
+  }
+  .lite-diff-added {
+    background: #ecfdf5;
+  }
+  .lite-diff-removed {
+    background: #fef2f2;
+  }
+  .lite-diff-modified {
+    background: #fffbeb;
+  }
+  .lite-diff-old del {
+    color: #ef4444;
+  }
+  .lite-diff-new ins {
+    color: #10b981;
+    text-decoration: none;
+  }
+  .lite-diff-new strong {
+    color: #f59e0b;
+  }
+</style>

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

@@ -0,0 +1,10 @@
+interface Props {
+    oldValue?: Record<string, unknown>;
+    newValue?: Record<string, unknown>;
+    oldTitle?: string;
+    newTitle?: string;
+    fieldLabels?: Record<string, string>;
+}
+declare const LiteVersionDiffViewer: import("svelte").Component<Props, {}, "">;
+type LiteVersionDiffViewer = ReturnType<typeof LiteVersionDiffViewer>;
+export default LiteVersionDiffViewer;

package/dist/components/LiteVirtualTable.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+  interface LiteVirtualTableColumn {
+    key: string;
+    label: string;
+    width?: string;
+    align?: 'left' | 'center' | 'right';
+  }
+
+  interface Props {
+    items?: Record<string, unknown>[];
+    columns: LiteVirtualTableColumn[];
+    rowKey?: string;
+  }
+
+  let {
+    items = [],
+    columns,
+    rowKey = 'id',
+  }: Props = $props();
+</script>
+
+<div class="lite-table-scroll">
+  <table class="lite-table">
+    <thead>
+      <tr>
+        {#each columns as col (col.key)}
+          <th style={col.width ? `width: ${col.width}; text-align: ${col.align || 'left'};` : `text-align: ${col.align || 'left'};`}>
+            {col.label}
+          </th>
+        {/each}
+      </tr>
+    </thead>
+    <tbody>
+      {#each items as item, index (item[rowKey] ?? index)}
+        <tr>
+          {#each columns as col (col.key)}
+            <td style="text-align: {col.align || 'left'};">
+              {item[col.key] ?? '—'}
+            </td>
+          {/each}
+        </tr>
+      {/each}
+      {#if items.length === 0}
+        <tr>
+          <td colspan={columns.length} style="text-align: center; color: #94a3b8; padding: 24px;">
+            No records to display
+          </td>
+        </tr>
+      {/if}
+    </tbody>
+  </table>
+</div>

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

@@ -0,0 +1,14 @@
+interface LiteVirtualTableColumn {
+    key: string;
+    label: string;
+    width?: string;
+    align?: 'left' | 'center' | 'right';
+}
+interface Props {
+    items?: Record<string, unknown>[];
+    columns: LiteVirtualTableColumn[];
+    rowKey?: string;
+}
+declare const LiteVirtualTable: import("svelte").Component<Props, {}, "">;
+type LiteVirtualTable = ReturnType<typeof LiteVirtualTable>;
+export default LiteVirtualTable;

package/dist/components/LiteWatermark.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    content?: string | string[];
+    opacity?: number;
+    rotate?: number;
+    class?: string;
+    children?: Snippet;
+  }
+
+  let {
+    content = 'CONFIDENTIAL',
+    opacity = 0.1,
+    rotate = -22,
+    class: className = '',
+    children,
+  }: Props = $props();
+
+  const text = $derived(Array.isArray(content) ? content.join(' ') : content);
+  const svgEncoded = $derived(
+    encodeURIComponent(
+      `<svg xmlns="http://www.w3.org/2000/svg" width="240" height="160"><text x="50%" y="50%" text-anchor="middle" dominant-baseline="middle" font-family="sans-serif" font-size="14" fill="#888888" fill-opacity="${opacity}" transform="rotate(${rotate} 120 80)">${text}</text></svg>`
+    )
+  );
+</script>
+
+<div
+  class="lite-watermark-wrapper {className}"
+  style="position: relative; overflow: hidden; background-image: url('data:image/svg+xml;utf8,{svgEncoded}'); background-repeat: repeat;"
+>
+  {#if children}
+    {@render children()}
+  {/if}
+</div>

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

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    content?: string | string[];
+    opacity?: number;
+    rotate?: number;
+    class?: string;
+    children?: Snippet;
+}
+declare const LiteWatermark: import("svelte").Component<Props, {}, "">;
+type LiteWatermark = ReturnType<typeof LiteWatermark>;
+export default LiteWatermark;

package/dist/index.d.ts

@@ -28,6 +28,41 @@ export { default as LiteTabs } from './components/LiteTabs.svelte';
 export { default as LiteShowField } from './components/LiteShowField.svelte';
 export { default as LiteMediaThumbnail } from './components/LiteMediaThumbnail.svelte';
 export { default as LiteChatDialog } from './components/LiteChatDialog.svelte';
+export { default as LiteWatermark } from './components/LiteWatermark.svelte';
+export { default as LiteColumnSettings } from './components/LiteColumnSettings.svelte';
+export { default as LiteImportWizard } from './components/LiteImportWizard.svelte';
+export { default as LiteColumnHeaderFilter } from './components/LiteColumnHeaderFilter.svelte';
+export { default as LiteTreeTable } from './components/LiteTreeTable.svelte';
+export { default as LiteSensitiveDataMask } from './components/LiteSensitiveDataMask.svelte';
+export { default as LiteApprovalActionCard } from './components/LiteApprovalActionCard.svelte';
+export { default as LiteStepForm } from './components/LiteStepForm.svelte';
+export { default as LiteModalForm } from './components/LiteModalForm.svelte';
+export { default as LiteDrawerForm } from './components/LiteDrawerForm.svelte';
+export { default as LiteTableSummary } from './components/LiteTableSummary.svelte';
+export { default as LiteVersionDiffViewer } from './components/LiteVersionDiffViewer.svelte';
+export { default as LiteVirtualTable } from './components/LiteVirtualTable.svelte';
+export { default as LiteEditableTable } from './components/LiteEditableTable.svelte';
+export { default as LiteDraggableRowTable } from './components/LiteDraggableRowTable.svelte';
+export { default as LiteSplitPaneLayout } from './components/LiteSplitPaneLayout.svelte';
+export { default as LiteMasterDetailView } from './components/LiteMasterDetailView.svelte';
+export { default as LiteMediaLibraryModal } from './components/LiteMediaLibraryModal.svelte';
+export { default as LiteImageCropper } from './components/LiteImageCropper.svelte';
+export { default as LiteActivityFeed } from './components/LiteActivityFeed.svelte';
+export { default as LitePresenceAvatarGroup } from './components/LitePresenceAvatarGroup.svelte';
+export { default as LitePrintableBill } from './components/LitePrintableBill.svelte';
+export { default as LiteJsonSchemaForm } from './components/LiteJsonSchemaForm.svelte';
+export { default as LiteMentionsInput } from './components/LiteMentionsInput.svelte';
+export { default as LiteKanbanBoard } from './components/LiteKanbanBoard.svelte';
+export { default as LitePivotTable } from './components/LitePivotTable.svelte';
+export { default as LiteMultiTabKeepAlive } from './components/LiteMultiTabKeepAlive.svelte';
+export { default as LiteGanttChart } from './components/LiteGanttChart.svelte';
+export { default as LiteCanvasAnnotation } from './components/LiteCanvasAnnotation.svelte';
+export type { AnnotationItem } from './components/LiteCanvasAnnotation.svelte';
+export { default as LiteSignaturePad } from './components/LiteSignaturePad.svelte';
+export { default as LitePdfDocumentViewer } from './components/LitePdfDocumentViewer.svelte';
+export { default as LiteSpreadsheetView } from './components/LiteSpreadsheetView.svelte';
+export { default as LiteDecisionTable } from './components/LiteDecisionTable.svelte';
+export { default as LiteOfflineSyncBanner } from './components/LiteOfflineSyncBanner.svelte';
 export * from './components/compatibility/index';
 export * from './components/buttons/index';
 export * from './components/fields/index';

package/dist/index.js

@@ -30,6 +30,40 @@ export { default as LiteTabs } from './components/LiteTabs.svelte';
 export { default as LiteShowField } from './components/LiteShowField.svelte';
 export { default as LiteMediaThumbnail } from './components/LiteMediaThumbnail.svelte';
 export { default as LiteChatDialog } from './components/LiteChatDialog.svelte';
+export { default as LiteWatermark } from './components/LiteWatermark.svelte';
+export { default as LiteColumnSettings } from './components/LiteColumnSettings.svelte';
+export { default as LiteImportWizard } from './components/LiteImportWizard.svelte';
+export { default as LiteColumnHeaderFilter } from './components/LiteColumnHeaderFilter.svelte';
+export { default as LiteTreeTable } from './components/LiteTreeTable.svelte';
+export { default as LiteSensitiveDataMask } from './components/LiteSensitiveDataMask.svelte';
+export { default as LiteApprovalActionCard } from './components/LiteApprovalActionCard.svelte';
+export { default as LiteStepForm } from './components/LiteStepForm.svelte';
+export { default as LiteModalForm } from './components/LiteModalForm.svelte';
+export { default as LiteDrawerForm } from './components/LiteDrawerForm.svelte';
+export { default as LiteTableSummary } from './components/LiteTableSummary.svelte';
+export { default as LiteVersionDiffViewer } from './components/LiteVersionDiffViewer.svelte';
+export { default as LiteVirtualTable } from './components/LiteVirtualTable.svelte';
+export { default as LiteEditableTable } from './components/LiteEditableTable.svelte';
+export { default as LiteDraggableRowTable } from './components/LiteDraggableRowTable.svelte';
+export { default as LiteSplitPaneLayout } from './components/LiteSplitPaneLayout.svelte';
+export { default as LiteMasterDetailView } from './components/LiteMasterDetailView.svelte';
+export { default as LiteMediaLibraryModal } from './components/LiteMediaLibraryModal.svelte';
+export { default as LiteImageCropper } from './components/LiteImageCropper.svelte';
+export { default as LiteActivityFeed } from './components/LiteActivityFeed.svelte';
+export { default as LitePresenceAvatarGroup } from './components/LitePresenceAvatarGroup.svelte';
+export { default as LitePrintableBill } from './components/LitePrintableBill.svelte';
+export { default as LiteJsonSchemaForm } from './components/LiteJsonSchemaForm.svelte';
+export { default as LiteMentionsInput } from './components/LiteMentionsInput.svelte';
+export { default as LiteKanbanBoard } from './components/LiteKanbanBoard.svelte';
+export { default as LitePivotTable } from './components/LitePivotTable.svelte';
+export { default as LiteMultiTabKeepAlive } from './components/LiteMultiTabKeepAlive.svelte';
+export { default as LiteGanttChart } from './components/LiteGanttChart.svelte';
+export { default as LiteCanvasAnnotation } from './components/LiteCanvasAnnotation.svelte';
+export { default as LiteSignaturePad } from './components/LiteSignaturePad.svelte';
+export { default as LitePdfDocumentViewer } from './components/LitePdfDocumentViewer.svelte';
+export { default as LiteSpreadsheetView } from './components/LiteSpreadsheetView.svelte';
+export { default as LiteDecisionTable } from './components/LiteDecisionTable.svelte';
+export { default as LiteOfflineSyncBanner } from './components/LiteOfflineSyncBanner.svelte';
 // Compatibility fallbacks for browser-only and third-party UI capabilities.
 export * from './components/compatibility/index';
 // Action Buttons

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@svadmin/lite",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "SSR-first lightweight admin UI for @svadmin with optional progressive enhancement",
   "type": "module",
   "sideEffects": [
@@ -49,7 +49,7 @@
   },
   "peerDependencies": {
     "svelte": "^5.56.10",
-    "@svadmin/core": ">=0.34.2 <0.47.0",
+    "@svadmin/core": ">=0.34.2 <0.48.0",
     "@sveltejs/kit": "^2.70.3"
   },
   "dependencies": {