@svadmin/lite 0.6.0 → 0.7.0

package/dist/components/LiteTransfer.svelte

@@ -0,0 +1,185 @@
+<script lang="ts">
+  import { t } from '@svadmin/core/i18n';
+
+  export interface TransferItem {
+    key: string | number;
+    title: string;
+    description?: string;
+    disabled?: boolean;
+  }
+
+  interface Props {
+    dataSource?: TransferItem[];
+    targetKeys?: (string | number)[];
+    titles?: [string, string];
+    name?: string;
+    disabled?: boolean;
+    label?: string;
+    description?: string;
+  }
+
+  let {
+    dataSource = [],
+    targetKeys = [],
+    titles = ['Available', 'Selected'],
+    name = 'targetKeys',
+    disabled = false,
+    label,
+    description,
+  }: Props = $props();
+
+  const targetKeySet = $derived(new Set(targetKeys.map(String)));
+  const sourceItems = $derived(dataSource.filter((item) => !targetKeySet.has(String(item.key))));
+  const targetItems = $derived(dataSource.filter((item) => targetKeySet.has(String(item.key))));
+</script>
+
+<div class="lite-transfer-container lite-form-group">
+  {#if label}
+    <span class="lite-label">{label}</span>
+  {/if}
+  {#if description}
+    <p class="lite-help-text">{description}</p>
+  {/if}
+
+  <div class="lite-transfer-boxes">
+    <!-- Source Box -->
+    <div class="lite-transfer-panel">
+      <div class="lite-transfer-header">
+        <strong>{titles[0]}</strong>
+        <span class="lite-badge">{sourceItems.length}</span>
+      </div>
+      <div class="lite-transfer-body">
+        {#if sourceItems.length === 0}
+          <div class="lite-transfer-empty">{t('common.empty') || 'No items'}</div>
+        {:else}
+          {#each sourceItems as item (item.key)}
+            <label class="lite-transfer-item">
+              <input
+                type="checkbox"
+                name="_transfer_source_keys"
+                value={String(item.key)}
+                disabled={disabled || item.disabled}
+              />
+              <span class="lite-transfer-item-title">{item.title}</span>
+            </label>
+          {/each}
+        {/if}
+      </div>
+    </div>
+
+    <!-- Move Actions -->
+    <div class="lite-transfer-operations">
+      <button
+        type="submit"
+        name="_action"
+        value="transfer_to_target"
+        class="lite-btn lite-btn-sm lite-btn-primary"
+        {disabled}
+        title="Move selected right"
+      >
+        →
+      </button>
+      <button
+        type="submit"
+        name="_action"
+        value="transfer_to_source"
+        class="lite-btn lite-btn-sm"
+        {disabled}
+        title="Move selected left"
+      >
+        ←
+      </button>
+    </div>
+
+    <!-- Target Box -->
+    <div class="lite-transfer-panel">
+      <div class="lite-transfer-header">
+        <strong>{titles[1]}</strong>
+        <span class="lite-badge lite-badge-indigo">{targetItems.length}</span>
+      </div>
+      <div class="lite-transfer-body">
+        {#if targetItems.length === 0}
+          <div class="lite-transfer-empty">{t('common.empty') || 'No items selected'}</div>
+        {:else}
+          {#each targetItems as item (item.key)}
+            <label class="lite-transfer-item">
+              <input
+                type="checkbox"
+                name="_transfer_target_keys"
+                value={String(item.key)}
+                disabled={disabled || item.disabled}
+              />
+              <input type="hidden" {name} value={String(item.key)} />
+              <span class="lite-transfer-item-title">{item.title}</span>
+            </label>
+          {/each}
+        {/if}
+      </div>
+    </div>
+  </div>
+</div>
+
+<style>
+  .lite-transfer-container {
+    margin-bottom: 16px;
+  }
+  .lite-transfer-boxes {
+    display: flex;
+    align-items: center;
+  }
+  .lite-transfer-panel {
+    flex: 1;
+    border: 1px solid #cbd5e1;
+    border-radius: 6px;
+    background: #ffffff;
+    min-height: 180px;
+    max-height: 280px;
+    display: flex;
+    flex-direction: column;
+  }
+  .lite-transfer-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 8px 12px;
+    background: #f8fafc;
+    border-bottom: 1px solid #e2e8f0;
+    font-size: 13px;
+  }
+  .lite-transfer-body {
+    flex: 1;
+    overflow-y: auto;
+    padding: 6px;
+  }
+  .lite-transfer-item {
+    display: flex;
+    align-items: center;
+    padding: 6px 8px;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 13px;
+  }
+  .lite-transfer-item:hover {
+    background: #f1f5f9;
+  }
+  .lite-transfer-item input {
+    margin-right: 8px;
+  }
+  .lite-transfer-operations {
+    display: flex;
+    flex-direction: column;
+    margin: 0 12px;
+  }
+  .lite-transfer-operations .lite-btn:first-child {
+    margin-bottom: 6px;
+  }
+  .lite-transfer-boxes > .lite-transfer-panel:first-child {
+    margin-right: 0;
+  }
+  .lite-transfer-empty {
+    text-align: center;
+    padding: 30px 10px;
+    color: #94a3b8;
+    font-size: 12px;
+  }
+</style>

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

@@ -0,0 +1,18 @@
+export interface TransferItem {
+    key: string | number;
+    title: string;
+    description?: string;
+    disabled?: boolean;
+}
+interface Props {
+    dataSource?: TransferItem[];
+    targetKeys?: (string | number)[];
+    titles?: [string, string];
+    name?: string;
+    disabled?: boolean;
+    label?: string;
+    description?: string;
+}
+declare const LiteTransfer: import("svelte").Component<Props, {}, "">;
+type LiteTransfer = ReturnType<typeof LiteTransfer>;
+export default LiteTransfer;

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;