@svadmin/lite 0.6.0 → 0.8.0

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/components/fields/LiteAvatarField.svelte

@@ -0,0 +1,127 @@
+<script module lang="ts">
+  export type LiteAvatarStatus = 'online' | 'offline' | 'busy' | 'away' | 'success' | 'warning' | 'error' | 'neutral';
+  export type LiteAvatarSize = 'xs' | 'sm' | 'default' | 'lg';
+</script>
+
+<script lang="ts">
+  import type { FieldDefinition } from '@svadmin/core';
+
+  interface Props {
+    field?: FieldDefinition;
+    value?: unknown;
+    error?: string[];
+    mode?: 'show' | 'edit' | 'create';
+    src?: string | null;
+    name?: string | null;
+    subtitle?: string | null;
+    status?: LiteAvatarStatus;
+    size?: LiteAvatarSize;
+    shape?: 'circle' | 'square';
+    showName?: boolean;
+    nullLabel?: string;
+    class?: string;
+  }
+
+  let {
+    field,
+    value,
+    error = [],
+    mode = 'show',
+    src,
+    name,
+    subtitle,
+    status,
+    size = 'sm',
+    shape = 'circle',
+    showName = false,
+    nullLabel = '—',
+    class: className = '',
+  }: Props = $props();
+
+  const resolvedSrc = $derived.by(() => {
+    if (src !== undefined) return src;
+    if (typeof value === 'string' && (value.startsWith('http://') || value.startsWith('https://') || value.startsWith('/'))) {
+      return value;
+    }
+    if (value && typeof value === 'object' && 'src' in (value as Record<string, unknown>)) {
+      return String((value as Record<string, unknown>).src ?? '');
+    }
+    return null;
+  });
+
+  const resolvedName = $derived.by(() => {
+    if (name !== undefined) return name;
+    if (typeof value === 'string' && !value.startsWith('http://') && !value.startsWith('https://') && !value.startsWith('/')) {
+      return value;
+    }
+    if (value && typeof value === 'object' && 'name' in (value as Record<string, unknown>)) {
+      return String((value as Record<string, unknown>).name ?? '');
+    }
+    return null;
+  });
+
+  function getInitials(text?: string | null): string {
+    const trimmed = text?.trim();
+    if (!trimmed) return '?';
+    const parts = trimmed.split(/\s+/);
+    if (parts.length >= 2) {
+      return `${parts[0][0]}${parts[parts.length - 1][0]}`.toUpperCase();
+    }
+    return trimmed.slice(0, 2).toUpperCase();
+  }
+
+  const initials = $derived(getInitials(resolvedName));
+  const hasContent = $derived(Boolean(resolvedSrc || resolvedName?.trim()));
+  const hasError = $derived(error.length > 0);
+</script>
+
+{#if mode === 'show'}
+  {#if !hasContent}
+    <span class="lite-text-muted lite-text-sm {className}">{nullLabel}</span>
+  {:else}
+    <span class="lite-avatar-wrapper {className}">
+      <span class="lite-avatar-container">
+        <span class="lite-avatar lite-avatar-{size} lite-avatar-{shape}">
+          {#if resolvedSrc}
+            <img src={resolvedSrc} alt={resolvedName?.trim() || 'Avatar'} class="lite-avatar-img" />
+          {:else}
+            <span class="lite-avatar-initials">{initials}</span>
+          {/if}
+        </span>
+        {#if status}
+          <span
+            class="lite-avatar-dot lite-avatar-dot-{size} lite-avatar-status-{status}"
+            title={`Status: ${status}`}
+          ></span>
+        {/if}
+      </span>
+      {#if showName && (resolvedName || subtitle)}
+        <span class="lite-avatar-text-block">
+          {#if resolvedName}
+            <span class="lite-avatar-name">{resolvedName}</span>
+          {/if}
+          {#if subtitle}
+            <span class="lite-avatar-subtitle">{subtitle}</span>
+          {/if}
+        </span>
+      {/if}
+    </span>
+  {/if}
+{:else}
+  <div>
+    <input
+      type="text"
+      name={field?.key ?? 'avatar'}
+      id={field?.key ?? 'avatar'}
+      value={String(resolvedSrc ?? resolvedName ?? value ?? '')}
+      class="lite-input {hasError ? 'lite-input-error' : ''}"
+      placeholder={field?.label ?? 'Avatar URL or name'}
+      {...field?.required ? { required: true } : {}}
+    />
+    {#if hasError}
+      {#each error as err, _i (_i)}
+        <div class="lite-error-text">{err}</div>
+      {/each}
+    {/if}
+  </div>
+{/if}

package/dist/components/fields/LiteAvatarField.svelte.d.ts

@@ -0,0 +1,21 @@
+export type LiteAvatarStatus = 'online' | 'offline' | 'busy' | 'away' | 'success' | 'warning' | 'error' | 'neutral';
+export type LiteAvatarSize = 'xs' | 'sm' | 'default' | 'lg';
+import type { FieldDefinition } from '@svadmin/core';
+interface Props {
+    field?: FieldDefinition;
+    value?: unknown;
+    error?: string[];
+    mode?: 'show' | 'edit' | 'create';
+    src?: string | null;
+    name?: string | null;
+    subtitle?: string | null;
+    status?: LiteAvatarStatus;
+    size?: LiteAvatarSize;
+    shape?: 'circle' | 'square';
+    showName?: boolean;
+    nullLabel?: string;
+    class?: string;
+}
+declare const LiteAvatarField: import("svelte").Component<Props, {}, "">;
+type LiteAvatarField = ReturnType<typeof LiteAvatarField>;
+export default LiteAvatarField;

package/dist/components/fields/LiteCascader.svelte

@@ -0,0 +1,119 @@
+<script lang="ts">
+  import type { FieldDefinition } from '@svadmin/core';
+  import { t } from '@svadmin/core/i18n';
+
+  export interface CascaderOption {
+    value: string | number;
+    label: string;
+    children?: CascaderOption[];
+    disabled?: boolean;
+    isLeaf?: boolean;
+  }
+
+  interface Props {
+    field?: FieldDefinition;
+    name?: string;
+    label?: string;
+    value?: (string | number)[];
+    options?: CascaderOption[];
+    separator?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    required?: boolean;
+    error?: string[];
+    mode?: 'show' | 'edit' | 'create';
+  }
+
+  let {
+    field,
+    name = field?.key ?? 'cascader',
+    label = field?.label,
+    value = [],
+    options = [],
+    separator = ' / ',
+    placeholder,
+    disabled = false,
+    required = field?.required ?? false,
+    error = [],
+    mode = 'show',
+  }: Props = $props();
+
+  const hasError = $derived(error.length > 0);
+
+  interface FlatPathOption {
+    pathValue: string;
+    pathLabels: string[];
+    disabled?: boolean;
+  }
+
+  function generatePaths(
+    nodes: CascaderOption[],
+    currentValues: (string | number)[] = [],
+    currentLabels: string[] = []
+  ): FlatPathOption[] {
+    const paths: FlatPathOption[] = [];
+    for (const node of nodes) {
+      const nextValues = [...currentValues, node.value];
+      const nextLabels = [...currentLabels, node.label];
+
+      if (node.children && node.children.length > 0) {
+        paths.push(...generatePaths(node.children, nextValues, nextLabels));
+      } else {
+        paths.push({
+          pathValue: nextValues.join('/'),
+          pathLabels: nextLabels,
+          disabled: node.disabled,
+        });
+      }
+    }
+    return paths;
+  }
+
+  const allPaths = $derived(generatePaths(options));
+  const currentPathString = $derived(Array.isArray(value) ? value.join('/') : String(value ?? ''));
+
+  function formatDisplay(v: (string | number)[]): string {
+    if (!v || v.length === 0) return '—';
+    const str = v.join('/');
+    const matched = allPaths.find((p) => p.pathValue === str);
+    if (matched) return matched.pathLabels.join(separator);
+    return v.join(separator);
+  }
+</script>
+
+{#if mode === 'show'}
+  <span class="lite-badge">{formatDisplay(value)}</span>
+{:else}
+  <div class="lite-form-group">
+    {#if label}
+      <label class="lite-label" for={name}>
+        {label}
+        {#if required}<span class="required">*</span>{/if}
+      </label>
+    {/if}
+    <select
+      id={name}
+      {name}
+      class="lite-select {hasError ? 'lite-input-error' : ''}"
+      {disabled}
+      {required}
+      value={currentPathString}
+    >
+      <option value="">-- {placeholder || t('common.select') || 'Select Path'} --</option>
+      {#each allPaths as p (p.pathValue)}
+        <option
+          value={p.pathValue}
+          disabled={p.disabled}
+          selected={p.pathValue === currentPathString}
+        >
+          {p.pathLabels.join(separator)}
+        </option>
+      {/each}
+    </select>
+    {#if hasError}
+      {#each error as err, i (i)}
+        <div class="lite-error-text">{err}</div>
+      {/each}
+    {/if}
+  </div>
+{/if}

package/dist/components/fields/LiteCascader.svelte.d.ts

@@ -0,0 +1,24 @@
+import type { FieldDefinition } from '@svadmin/core';
+export interface CascaderOption {
+    value: string | number;
+    label: string;
+    children?: CascaderOption[];
+    disabled?: boolean;
+    isLeaf?: boolean;
+}
+interface Props {
+    field?: FieldDefinition;
+    name?: string;
+    label?: string;
+    value?: (string | number)[];
+    options?: CascaderOption[];
+    separator?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    required?: boolean;
+    error?: string[];
+    mode?: 'show' | 'edit' | 'create';
+}
+declare const LiteCascader: import("svelte").Component<Props, {}, "">;
+type LiteCascader = ReturnType<typeof LiteCascader>;
+export default LiteCascader;

package/dist/components/fields/LiteCodeField.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+  import type { FieldDefinition } from '@svadmin/core';
+
+  interface Props {
+    field?: FieldDefinition;
+    value?: string | number | Record<string, unknown> | unknown[] | null;
+    language?: string;
+    copyable?: boolean;
+    title?: string;
+    nullLabel?: string;
+    maxHeight?: string;
+    class?: string;
+    error?: string[];
+    mode?: 'show' | 'edit' | 'create';
+  }
+
+  let {
+    field,
+    value,
+    language,
+    nullLabel = '—',
+    maxHeight = '200px',
+    class: className = '',
+    error = [],
+    mode = 'show',
+  }: Props = $props();
+
+  const formattedCode = $derived.by(() => {
+    if (value == null || value === '') return '';
+    if (typeof value === 'string') return value;
+    if (typeof value === 'number' || typeof value === 'boolean') return String(value);
+    try {
+      return JSON.stringify(value, null, 2);
+    } catch {
+      return String(value);
+    }
+  });
+
+  const hasError = $derived(error.length > 0);
+</script>
+
+{#if mode === 'show'}
+  {#if !formattedCode}
+    <span class="lite-text-muted lite-text-sm {className}">{nullLabel}</span>
+  {:else}
+    <div class="lite-code-block {className}">
+      {#if language}
+        <div class="lite-code-header">
+          <span class="lite-badge">{language.toUpperCase()}</span>
+        </div>
+      {/if}
+      <pre class="lite-code-pre" style="max-height: {maxHeight};"><code>{formattedCode}</code></pre>
+    </div>
+  {/if}
+{:else}
+  <div>
+    <textarea
+      name={field?.key ?? 'code'}
+      id={field?.key ?? 'code'}
+      class="lite-input {hasError ? 'lite-input-error' : ''}"
+      style="min-height: 120px; font-family: monospace; font-size: 12px;"
+      placeholder={field?.label ?? 'Code / content'}
+      {...field?.required ? { required: true } : {}}
+    >{formattedCode}</textarea>
+    {#if hasError}
+      {#each error as err, _i (_i)}
+        <div class="lite-error-text">{err}</div>
+      {/each}
+    {/if}
+  </div>
+{/if}

package/dist/components/fields/LiteCodeField.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { FieldDefinition } from '@svadmin/core';
+interface Props {
+    field?: FieldDefinition;
+    value?: string | number | Record<string, unknown> | unknown[] | null;
+    language?: string;
+    copyable?: boolean;
+    title?: string;
+    nullLabel?: string;
+    maxHeight?: string;
+    class?: string;
+    error?: string[];
+    mode?: 'show' | 'edit' | 'create';
+}
+declare const LiteCodeField: import("svelte").Component<Props, {}, "">;
+type LiteCodeField = ReturnType<typeof LiteCodeField>;
+export default LiteCodeField;

package/dist/components/fields/LiteCopyField.svelte

@@ -0,0 +1,74 @@
+<script lang="ts">
+  import type { FieldDefinition } from '@svadmin/core';
+
+  interface Props {
+    field?: FieldDefinition;
+    value?: string | number | null;
+    displayValue?: string;
+    masked?: boolean;
+    monospace?: boolean;
+    copyable?: boolean;
+    title?: string;
+    nullLabel?: string;
+    oncopy?: (value: string) => void;
+    class?: string;
+    error?: string[];
+    mode?: 'show' | 'edit' | 'create';
+  }
+
+  let {
+    field,
+    value,
+    displayValue,
+    masked = false,
+    monospace = true,
+    nullLabel = '—',
+    class: className = '',
+    error = [],
+    mode = 'show',
+  }: Props = $props();
+
+  function maskText(str: string): string {
+    if (str.length <= 8) return '****';
+    return `${str.slice(0, 4)}...${str.slice(-4)}`;
+  }
+
+  const rawString = $derived(value != null && value !== '' ? String(value) : '');
+  const displayText = $derived.by(() => {
+    if (!rawString) return nullLabel;
+    if (displayValue) return displayValue;
+    if (masked) return maskText(rawString);
+    return rawString;
+  });
+
+  const hasError = $derived(error.length > 0);
+</script>
+
+{#if mode === 'show'}
+  {#if !rawString}
+    <span class="lite-text-muted lite-text-sm {className}">{nullLabel}</span>
+  {:else}
+    <span class="lite-copy-field {className}">
+      <span class="lite-copy-text {monospace ? 'lite-font-mono' : ''}">
+        {displayText}
+      </span>
+    </span>
+  {/if}
+{:else}
+  <div>
+    <input
+      type="text"
+      name={field?.key ?? 'copy_text'}
+      id={field?.key ?? 'copy_text'}
+      value={rawString}
+      class="lite-input {hasError ? 'lite-input-error' : ''}"
+      placeholder={field?.label ?? 'Value'}
+      {...field?.required ? { required: true } : {}}
+    />
+    {#if hasError}
+      {#each error as err, _i (_i)}
+        <div class="lite-error-text">{err}</div>
+      {/each}
+    {/if}
+  </div>
+{/if}

package/dist/components/fields/LiteCopyField.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { FieldDefinition } from '@svadmin/core';
+interface Props {
+    field?: FieldDefinition;
+    value?: string | number | null;
+    displayValue?: string;
+    masked?: boolean;
+    monospace?: boolean;
+    copyable?: boolean;
+    title?: string;
+    nullLabel?: string;
+    oncopy?: (value: string) => void;
+    class?: string;
+    error?: string[];
+    mode?: 'show' | 'edit' | 'create';
+}
+declare const LiteCopyField: import("svelte").Component<Props, {}, "">;
+type LiteCopyField = ReturnType<typeof LiteCopyField>;
+export default LiteCopyField;