@svadmin/lite 0.3.3 → 0.3.5

package/package.json

@@ -1,11 +1,14 @@
 {
   "name": "@svadmin/lite",
-  "version": "0.3.3",
+  "version": "0.3.5",
   "description": "SSR-compatible lightweight admin UI for @svadmin — zero client-side JS, works in IE11",
   "type": "module",
   "files": [
-    "src/**/*",
-    "static/**/*"
+    "src/**/*.ts",
+    "!src/**/*.test.*",
+    "!src/**/*.spec.*",
+    "!src/**/vitest.config.*",
+    "!src/**/setupTest.*"
   ],
   "main": "src/index.ts",
   "types": "src/index.ts",
@@ -21,7 +24,7 @@
   },
   "peerDependencies": {
     "svelte": "^5.0.0",
-    "@svadmin/core": "^0.22.1",
+    "@svadmin/core": "^0.25.3",
     "@sveltejs/kit": "^2.0.0"
   },
   "dependencies": {
@@ -39,5 +42,16 @@
     "type": "git",
     "url": "https://github.com/zuohuadong/svadmin.git",
     "directory": "packages/lite"
+  },
+  "peerDependenciesMeta": {
+    "svelte": {
+      "optional": true
+    },
+    "@svadmin/core": {
+      "optional": true
+    },
+    "@sveltejs/kit": {
+      "optional": true
+    }
   }
 }

package/src/components/LiteAlert.svelte

@@ -1,19 +0,0 @@
-<script lang="ts">
-  /**
-   * LiteAlert — Success/error feedback banner for form actions.
-   * Renders from SvelteKit form action results.
-   */
-  interface Props {
-    type: 'success' | 'error' | 'info';
-    message: string;
-  }
-
-  let { type, message }: Props = $props();
-</script>
-
-{#if message}
-  <div class="lite-alert {type === 'success' ? 'lite-alert-success' : type === 'error' ? 'lite-alert-error' : ''}">
-    {#if type === 'success'}✓{:else if type === 'error'}✗{:else}ℹ{/if}
-    {message}
-  </div>
-{/if}

package/src/components/LiteArrayField.svelte

@@ -1,113 +0,0 @@
-<script lang="ts">
-  /**
-   * LiteArrayField — SSR-compatible dynamic array sub-form.
-   * Uses progressive enhancement: hidden inputs + JS optional add/remove.
-   * Falls back to server-side form POST for non-JS browsers.
-   */
-  import type { FieldDefinition } from '@svadmin/core';
-  import { fieldToInputType, fieldToPlaceholder } from '../schema-generator';
-
-  interface Props {
-    field: FieldDefinition;
-    /** Current array values */
-    values: Record<string, unknown>[];
-    /** Form field name prefix (for nested form encoding) */
-    namePrefix?: string;
-  }
-
-  let {
-    field,
-    values = [],
-    namePrefix = field.key,
-  }: Props = $props();
-
-  const subFields = $derived(field.subFields || []);
-</script>
-
-<fieldset class="lite-array-field">
-  <legend style="font-weight:600;font-size:14px;margin-bottom:8px;">
-    {field.label}
-    {#if field.required}<span style="color:#dc2626;">*</span>{/if}
-  </legend>
-
-  {#each values as item, i}
-    <div class="lite-array-item" style="border:1px solid #e2e8f0;border-radius:6px;padding:12px;margin-bottom:8px;background:#f8fafc;">
-      <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;">
-        <span style="font-size:12px;font-weight:600;color:#94a3b8;">#{i + 1}</span>
-        <button type="button" class="lite-btn lite-btn-sm" style="color:#dc2626;border-color:#fecaca;" onclick={(e) => (e.currentTarget as HTMLElement).closest('.lite-array-item')?.remove()}>
-          Remove
-        </button>
-      </div>
-      {#each subFields as sub}
-        <div style="margin-bottom:8px;">
-          <label for="{namePrefix}_{i}_{sub.key}" style="display:block;font-size:13px;font-weight:500;color:#374151;margin-bottom:4px;">
-            {sub.label}
-            {#if sub.required}<span style="color:#dc2626;">*</span>{/if}
-          </label>
-          {#if sub.type === 'textarea'}
-            <textarea
-              id="{namePrefix}_{i}_{sub.key}"
-              name="{namePrefix}[{i}][{sub.key}]"
-              class="lite-input"
-              rows="3"
-              placeholder={fieldToPlaceholder(sub)}
-            >{item[sub.key] ?? ''}</textarea>
-          {:else if sub.type === 'boolean'}
-            <input
-              id="{namePrefix}_{i}_{sub.key}"
-              name="{namePrefix}[{i}][{sub.key}]"
-              type="checkbox"
-              checked={!!item[sub.key]}
-              style="width:18px;height:18px;"
-            />
-          {:else if sub.type === 'select' && sub.options}
-            <select
-              id="{namePrefix}_{i}_{sub.key}"
-              name="{namePrefix}[{i}][{sub.key}]"
-              class="lite-input"
-            >
-              {#each sub.options as opt}
-                <option value={typeof opt === 'string' ? opt : opt.value} selected={item[sub.key] === (typeof opt === 'string' ? opt : opt.value)}>
-                  {typeof opt === 'string' ? opt : opt.label}
-                </option>
-              {/each}
-            </select>
-          {:else}
-            <input
-              id="{namePrefix}_{i}_{sub.key}"
-              name="{namePrefix}[{i}][{sub.key}]"
-              type={fieldToInputType(sub)}
-              value={item[sub.key] ?? ''}
-              class="lite-input"
-              placeholder={fieldToPlaceholder(sub)}
-            />
-          {/if}
-        </div>
-      {/each}
-    </div>
-  {/each}
-
-  {#if values.length === 0}
-    <p style="text-align:center;padding:16px;color:#94a3b8;font-size:14px;">No items added yet.</p>
-  {/if}
-
-  <button type="button" class="lite-btn" style="margin-top:4px;" onclick={(e) => {
-    const target = e.currentTarget as HTMLElement;
-    const template = target.previousElementSibling?.previousElementSibling?.cloneNode(true);
-    if (template && target.parentElement) target.parentElement.insertBefore(template, target.previousElementSibling);
-  }}>
-    + Add Item
-  </button>
-</fieldset>
-
-<style>
-  .lite-array-field {
-    border: 2px dashed #e2e8f0;
-    border-radius: 8px;
-    padding: 16px;
-    margin-bottom: 16px;
-  }
-  .lite-array-field legend {
-    padding: 0 8px;
-  }
-</style>

package/src/components/LiteAuditLog.svelte

@@ -1,104 +0,0 @@
-<script lang="ts">
-  /**
-   * LiteAuditLog — SSR-compatible audit log viewer.
-   * Pure HTML table with pagination links. No client-side JS required.
-   */
-
-  interface AuditEntry {
-    id: string | number;
-    userName?: string;
-    action: string;
-    resource?: string;
-    createdAt: string;
-    ipAddress?: string;
-    details?: string;
-  }
-
-  interface Props {
-    logs: AuditEntry[];
-    total?: number;
-    page?: number;
-    pageSize?: number;
-    basePath?: string;
-  }
-
-  let {
-    logs,
-    total = 0,
-    page = 1,
-    pageSize = 20,
-    basePath = '?',
-  }: Props = $props();
-
-  const totalPages = $derived(Math.ceil(total / pageSize) || 1);
-
-  function formatDate(d: string) {
-    return new Date(d).toLocaleString();
-  }
-
-  function actionClass(action: string): string {
-    const a = action.toLowerCase();
-    if (a.includes('delete') || a.includes('remove')) return 'lite-badge-danger';
-    if (a.includes('create') || a.includes('add')) return 'lite-badge-success';
-    if (a.includes('update') || a.includes('edit')) return 'lite-badge-warning';
-    return 'lite-badge-default';
-  }
-</script>
-
-<div class="lite-audit-log">
-  <h2 style="margin-bottom:16px;">Audit Logs</h2>
-  
-  <table class="lite-table">
-    <thead>
-      <tr>
-        <th style="width:160px;">Time</th>
-        <th>User</th>
-        <th>Action</th>
-        <th>Resource</th>
-        <th style="width:120px;">IP Address</th>
-      </tr>
-    </thead>
-    <tbody>
-      {#each logs as log}
-        <tr>
-          <td style="font-family:monospace;font-size:12px;color:#64748b;">{formatDate(log.createdAt)}</td>
-          <td>{log.userName ?? '—'}</td>
-          <td><span class="lite-badge {actionClass(log.action)}">{log.action}</span></td>
-          <td style="color:#64748b;">{log.resource ?? '—'}</td>
-          <td style="font-family:monospace;font-size:12px;color:#64748b;">{log.ipAddress ?? '—'}</td>
-        </tr>
-      {:else}
-        <tr>
-          <td colspan="5" style="text-align:center;padding:24px;color:#94a3b8;">No audit logs found.</td>
-        </tr>
-      {/each}
-    </tbody>
-  </table>
-
-  <!-- Pagination -->
-  {#if totalPages > 1}
-    <div class="lite-pagination" style="margin-top:12px;">
-      {#if page > 1}
-        <a href={`${basePath}page={page - 1}`} class="lite-btn lite-btn-sm">&laquo; Prev</a>
-      {/if}
-      <span style="padding:0 12px;font-size:14px;color:#64748b;">Page {page} / {totalPages} ({total} total)</span>
-      {#if page < totalPages}
-        <a href={`${basePath}page={page + 1}`} class="lite-btn lite-btn-sm">Next &raquo;</a>
-      {/if}
-    </div>
-  {/if}
-</div>
-
-<style>
-  .lite-badge {
-    display: inline-block;
-    padding: 2px 8px;
-    border-radius: 4px;
-    font-size: 12px;
-    font-weight: 600;
-  }
-  .lite-badge-danger { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }
-  .lite-badge-success { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }
-  .lite-badge-warning { background: #fffbeb; color: #92400e; border: 1px solid #fde68a; }
-  .lite-badge-default { background: #f1f5f9; color: #475569; border: 1px solid #e2e8f0; }
-</style>

package/src/components/LiteBreadcrumbs.svelte

@@ -1,39 +0,0 @@
-<script lang="ts">
-  /**
-   * LiteBreadcrumbs — SSR-compatible breadcrumb navigation.
-   * Pure HTML <nav> with <a> links. No client-side JS required.
-   */
-
-  interface BreadcrumbItem {
-    label: string;
-    href?: string;
-  }
-
-  interface Props {
-    items: BreadcrumbItem[];
-    /** Separator character between items */
-    separator?: string;
-  }
-
-  let {
-    items,
-    separator = '/',
-  }: Props = $props();
-</script>
-
-<nav class="lite-breadcrumbs" aria-label="Breadcrumb">
-  <ol>
-    {#each items as item, i}
-      <li>
-        {#if item.href && i < items.length - 1}
-          <a href={item.href}>{item.label}</a>
-        {:else}
-          <span class="current">{item.label}</span>
-        {/if}
-        {#if i < items.length - 1}
-          <span class="lite-breadcrumb-sep" aria-hidden="true">{separator}</span>
-        {/if}
-      </li>
-    {/each}
-  </ol>
-</nav>

package/src/components/LiteChatDialog.svelte

@@ -1,101 +0,0 @@
-<script lang="ts">
-  /**
-   * LiteChatDialog — SSR-compatible AI Chat Dialog fallback.
-   * Relies on standard <form> POST without polling or WebSockets.
-   * No client-side JS required.
-   */
-  import type { ChatMessage } from '@svadmin/core';
-
-  interface Props {
-    /** History of messages */
-    messages: ChatMessage[];
-    /** URL to handle the POST request for new messages */
-    actionRoute: string;
-    /** If true, shows a "Thinking..." indicator */
-    isLoading?: boolean;
-    title?: string;
-    placeholder?: string;
-    submitLabel?: string;
-  }
-
-  let {
-    messages = [],
-    actionRoute,
-    isLoading = false,
-    title = 'AI Assistant',
-    placeholder = 'Type your message...',
-    submitLabel = 'Send'
-  }: Props = $props();
-
-  function formatDate(ts: number) {
-    if (!ts) return '';
-    return new Date(ts).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
-  }
-
-  // Auto-scroll anchor logic: pure HTML way to scroll to bottom after page load
-  // User should include "#latest-msg" in the form action if possible
-</script>
-
-<div class="lite-chat-dialog lite-card" style="display:flex;flex-direction:column;height:560px;padding:0;overflow:hidden;max-width:400px;margin:0 auto;">
-  <!-- Header -->
-  <div style="background:#0f172a;color:#fff;padding:14px 16px;font-weight:600;flex-shrink:0;display:flex;align-items:center;border-top-left-radius:8px;border-top-right-radius:8px;">
-    {title}
-  </div>
-
-  <!-- Message History -->
-  <div class="lite-chat-history" style="flex:1;overflow-y:auto;padding:16px;background:#f8fafc;">
-    {#if messages.length === 0}
-      <div style="text-align:center;color:#64748b;margin-top:60px;font-size:14px;">
-        How can I help you today?
-      </div>
-    {/if}
-
-    {#each messages as msg, i}
-      {#if msg.role === 'user' || msg.role === 'assistant'}
-        <div 
-          id={i === messages.length - 1 ? 'latest-msg' : ''}
-          style="margin-bottom:16px;display:flex;flex-direction:column;align-items:{msg.role === 'user' ? 'flex-end' : 'flex-start'};"
-        >
-          <div style="
-            max-width:85%;
-            padding:10px 14px;
-            border-radius:12px;
-            font-size:14px;
-            line-height:1.5;
-            {msg.role === 'user'
-              ? 'background:#4f46e5;color:#fff;border-bottom-right-radius:2px;'
-              : 'background:#e2e8f0;color:#0f172a;border-bottom-left-radius:2px;'}"
-          >
-            <div style="white-space:pre-wrap;word-break:break-word;">{msg.content}</div>
-          </div>
-          <div style="font-size:11px;color:#94a3b8;margin-top:4px;">
-            {msg.role === 'user' ? 'You' : 'Assistant'} • {formatDate(msg.timestamp)}
-          </div>
-        </div>
-      {/if}
-    {/each}
-
-    {#if isLoading}
-      <div id="latest-msg" style="display:flex;flex-direction:column;align-items:flex-start;margin-bottom:16px;">
-        <div style="background:#e2e8f0;color:#64748b;padding:10px 14px;border-radius:12px;border-bottom-left-radius:2px;font-size:13px;font-style:italic;">
-          Thinking...
-        </div>
-      </div>
-    {/if}
-  </div>
-
-  <!-- Input Form -->
-  <form method="POST" action={actionRoute} style="display:flex;padding:12px;background:#fff;border-top:1px solid #e2e8f0;align-items:stretch;margin:0;flex-shrink:0;">
-    <textarea
-      name="message"
-      class="lite-input"
-      placeholder={placeholder}
-      required
-      rows="1"
-      style="min-height:40px;resize:none;margin-right:8px;"
-    ></textarea>
-    <button type="submit" class="lite-btn lite-btn-primary" disabled={isLoading} style="display:flex;align-items:center;padding:0 16px;">
-      {submitLabel}
-    </button>
-  </form>
-</div>

package/src/components/LiteConfirmDialog.svelte

@@ -1,60 +0,0 @@
-<script lang="ts">
-  /**
-   * LiteConfirmDialog — SSR-compatible confirmation dialog.
-   * Utilizes pure HTML <details> and <summary> to show a popup.
-   * No client-side JS required.
-   */
-
-  interface Props {
-    title?: string;
-    description?: string;
-    confirmLabel?: string;
-    cancelLabel?: string;
-    /** The summary element (button) that triggers the dropdown */
-    triggerLabel: string;
-    triggerClass?: string;
-    /** Form action to submit on confirm */
-    action: string;
-    /** Any hidden inputs to include in the form */
-    hiddenInputs?: Record<string, string>;
-    align?: 'left' | 'right';
-  }
-
-  let {
-    title = 'Are you sure?',
-    description = 'This action cannot be undone.',
-    confirmLabel = 'Confirm',
-    cancelLabel = 'Cancel',
-    triggerLabel,
-    triggerClass = 'lite-btn lite-btn-danger lite-btn-sm',
-    action,
-    hiddenInputs = {},
-    align = 'right'
-  }: Props = $props();
-</script>
-
-<details class="lite-confirm-details">
-  <summary class={triggerClass}>{triggerLabel}</summary>
-  <div class="lite-confirm-panel" style="text-align:left; {align === 'right' ? 'right:0;' : 'left:0;'}">
-    <div style="font-weight:600;margin-bottom:8px;color:#0f172a;">{title}</div>
-    {#if description}
-      <div style="font-size:12px;color:#64748b;margin-bottom:16px;">{description}</div>
-    {/if}
-    <form method="POST" {action} style="display:flex;margin:0;justify-content:flex-end;">
-      {#each Object.entries(hiddenInputs) as [key, val]}
-        <input type="hidden" name={key} value={val} />
-      {/each}
-      <button
-        type="button"
-        class="lite-btn lite-btn-sm"
-        style="margin-right:8px;"
-        onclick={(e) => (e.currentTarget as HTMLElement).closest('details')?.removeAttribute('open')}
-      >
-        {cancelLabel}
-      </button>
-      <button type="submit" class="lite-btn lite-btn-primary lite-btn-sm lite-btn-danger">
-        {confirmLabel}
-      </button>
-    </form>
-  </div>
-</details>

package/src/components/LiteEmptyState.svelte

@@ -1,39 +0,0 @@
-<script lang="ts">
-  /**
-   * LiteEmptyState — SSR-compatible empty state indicator.
-   * Renders a centered box with an icon, title, description, and link.
-   * No client-side JS required.
-   */
-
-  interface Props {
-    title: string;
-    description?: string;
-    /** Optional HTML entity or text icon */
-    icon?: string;
-    actionLabel?: string;
-    actionUrl?: string;
-  }
-
-  let {
-    title,
-    description,
-    icon,
-    actionLabel,
-    actionUrl,
-  }: Props = $props();
-</script>
-
-<div class="lite-empty-state lite-card" style="text-align:center;padding:48px 24px;">
-  {#if icon}
-    <div style="font-size:32px;color:#94a3b8;margin-bottom:16px;">{icon}</div>
-  {/if}
-  <h3 style="font-size:16px;font-weight:600;color:#0f172a;margin:0 0 8px 0;">{title}</h3>
-  {#if description}
-    <p style="font-size:14px;color:#64748b;margin:0 0 24px 0;">{description}</p>
-  {/if}
-  {#if actionLabel && actionUrl}
-    <a href={actionUrl} class="lite-btn lite-btn-primary">
-      {actionLabel}
-    </a>
-  {/if}
-</div>

package/src/components/LiteForm.svelte

@@ -1,138 +0,0 @@
-<script lang="ts">
-  /**
-   * LiteForm — Server-rendered form driven by FieldDefinitions.
-   * Uses native <form> with method="POST" for IE11 compatibility.
-   * Integrates with sveltekit-superforms for server-side validation.
-   */
-  import type { FieldDefinition, ResourceDefinition } from '@svadmin/core';
-  import { t } from '@svadmin/core/i18n';
-  import { fieldToInputType, fieldToPlaceholder } from '../schema-generator';
-
-  interface Props {
-    fields: FieldDefinition[];
-    /** Resource definition (used for primaryKey) */
-    resource?: ResourceDefinition;
-    /** Existing values (for edit mode) */
-    values?: Record<string, unknown>;
-    /** Validation errors from server */
-    errors?: Record<string, string[]>;
-    /** 'create' or 'edit' */
-    mode?: 'create' | 'edit';
-    /** Form action URL */
-    action?: string;
-    /** Submit button label */
-    submitLabel?: string;
-    /** Cancel URL */
-    cancelUrl?: string;
-  }
-
-  let {
-    fields,
-    resource,
-    values = {},
-    errors = {},
-    mode = 'create',
-    action = '',
-    submitLabel,
-    cancelUrl,
-  }: Props = $props();
-
-  const formFields = $derived(
-    fields.filter(f => {
-      if (f.showInForm === false) return false;
-      if (mode === 'create' && f.showInCreate === false) return false;
-      if (mode === 'edit' && f.showInEdit === false) return false;
-      return true;
-    })
-  );
-</script>
-
-<form method="POST" action={action || undefined} class="lite-card" enctype="multipart/form-data">
-  {#if mode === 'edit'}
-    {@const pk = resource?.primaryKey ?? 'id'}
-    {#if values[pk] != null}
-      <input type="hidden" name="_id" value={String(values[pk])} />
-    {/if}
-  {/if}
-
-  {#each formFields as field}
-    {@const inputType = fieldToInputType(field)}
-    {@const placeholder = fieldToPlaceholder(field)}
-    {@const value = values[field.key]}
-    {@const fieldErrors = errors[field.key]}
-    {@const hasError = fieldErrors && fieldErrors.length > 0}
-
-    <div class="lite-form-group">
-      {#if inputType === 'checkbox'}
-        <div class="lite-checkbox-group">
-          <input
-            type="checkbox"
-            name={field.key}
-            id={field.key}
-            checked={!!value}
-          />
-          <label for={field.key}>{field.label}</label>
-        </div>
-      {:else}
-        <label for={field.key}>
-          {field.label}
-          {#if field.required}<span class="required">*</span>{/if}
-        </label>
-
-        {#if inputType === 'textarea'}
-          <textarea
-            name={field.key}
-            id={field.key}
-            class="lite-input {hasError ? 'lite-input-error' : ''}"
-            placeholder={placeholder}
-          >{value ?? ''}</textarea>
-        {:else if inputType === 'select'}
-          <select
-            name={field.key}
-            id={field.key}
-            class="lite-select {hasError ? 'lite-input-error' : ''}"
-            {...field.type === 'multiselect' ? { multiple: true } : {}}
-          >
-            {#if field.type !== 'multiselect'}
-              <option value="">-- {t('common.select') || 'Select'} --</option>
-            {/if}
-            {#if field.options}
-              {#each field.options as opt}
-                <option 
-                  value={String(opt.value)} 
-                  selected={field.type === 'multiselect' ? (Array.isArray(value) && value.includes(opt.value)) : value === opt.value}
-                >
-                  {opt.label}
-                </option>
-              {/each}
-            {/if}
-          </select>
-        {:else}
-          <input
-            type={inputType}
-            name={field.key}
-            id={field.key}
-            value={String(value ?? '')}
-            class="lite-input {hasError ? 'lite-input-error' : ''}"
-            placeholder={placeholder}
-            {... field.required ? { required: true } : {}}
-            {... field.type === 'images' ? { multiple: true } : {}}
-          />
-        {/if}
-
-        {#if hasError}
-          {#each fieldErrors as err}
-            <div class="lite-error-text">{err}</div>
-          {/each}
-        {/if}
-      {/if}
-    </div>
-  {/each}
-
-  <div style="display:flex;align-items:center;margin-top:20px;">
-    <button type="submit" class="lite-btn lite-btn-primary">{submitLabel || t('common.save') || 'Save'}</button>
-    {#if cancelUrl}
-      <a href={cancelUrl} class="lite-btn" style="margin-left:8px;">{t('common.cancel') || 'Cancel'}</a>
-    {/if}
-  </div>
-</form>