@svadmin/lite 0.1.0 → 0.2.1

package/README.md

@@ -2,7 +2,7 @@
 
 **Lightweight, SSR-compatible admin UI for [@svadmin](https://github.com/zuohuadong/svadmin).**
 
-Zero client-side JavaScript required. Works in IE11 and legacy browsers.
+Zero client-side JavaScript required. Works in IE11 and all modern browsers.
 
 ## Why?
 
@@ -25,6 +25,7 @@ However, some enterprise/government environments require IE11 compatibility.
 | **Auth Guard** | Server hook redirects unauthenticated users |
 | **UA Detection** | Auto-redirect IE11 users to `/lite/` routes |
 | **i18n** | Uses `@svadmin/core` `t()` translations |
+| **Multi-level Menu** | Config-driven 2/3 level menus via `MenuItem[]` |
 | **Print** | `@media print` optimized styles |
 
 ## Quick Start
@@ -81,6 +82,45 @@ export const actions = createCrudActions(dataProvider, postsResource);
 </LiteLayout>
 ```
 
+### 2b. Multi-level menu (optional)
+
+Pass a `menu` prop to `LiteLayout` to replace the auto-generated flat resource list with a multi-level sidebar:
+
+```svelte
+<script lang="ts">
+  import type { MenuItem } from '@svadmin/core';
+
+  const menu: MenuItem[] = [
+    { name: 'home', label: 'Dashboard', href: '/lite' },
+    {
+      name: 'content', label: 'Content',
+      children: [
+        { name: 'posts', label: 'Posts', href: '/lite/posts' },
+        { name: 'categories', label: 'Categories', href: '/lite/categories' },
+      ],
+    },
+    {
+      name: 'system', label: 'System',
+      children: [
+        { name: 'users', label: 'Users', href: '/lite/users' },
+        {
+          name: 'settings', label: 'Settings',
+          children: [
+            { name: 'general', label: 'General', href: '/lite/settings/general' },
+            { name: 'security', label: 'Security', href: '/lite/settings/security' },
+          ],
+        },
+      ],
+    },
+    { name: 'docs', label: 'Documentation', href: 'https://docs.example.com', target: '_blank' },
+  ];
+</script>
+
+<LiteLayout {resources} {menu} currentResource="posts" brandName="My Admin">
+  <!-- ... -->
+</LiteLayout>
+```
+
 ### 3. Auto-redirect legacy browsers
 
 ```typescript
@@ -105,7 +145,7 @@ export const handle = createLegacyRedirectHook('/lite');
 
 | Component | Description |
 |-----------|-------------|
-| `LiteLayout` | Sidebar + main area layout |
+| `LiteLayout` | Sidebar + main area layout (supports `menu` prop for multi-level menus) |
 | `LiteTable` | HTML table with sort links and delete confirmation |
 | `LiteSearch` | GET-based search form |
 | `LitePagination` | Page number links |
@@ -129,11 +169,14 @@ export const handle = createLegacyRedirectHook('/lite');
 ## CSS
 
 Import `@svadmin/lite/src/lite.css` in your layout. It's fully self-contained:
-- No CSS variables
-- No modern CSS features
-- Vendor-prefixed flexbox for IE11
+- IE11+ baseline (standard flexbox, no CSS variables)
+- Custom-styled checkboxes, radios, and selects (no `appearance: none` needed)
+- Indigo/Slate color system aligned with `@svadmin/ui`
+- Modern focus rings (`box-shadow` based)
+- Smooth transitions on all interactive elements
+- Multi-layer translucent shadows
 - Print-optimized styles
-- 350 lines, ~10KB unminified
+- ~500 lines, ~14KB unminified
 
 ## Optional: Progressive Enhancement
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@svadmin/lite",
-  "version": "0.1.0",
+  "version": "0.2.1",
   "description": "SSR-compatible lightweight admin UI for @svadmin — zero client-side JS, works in IE11",
   "type": "module",
   "files": [
@@ -29,6 +29,10 @@
     "zod": "^3.24.0"
   },
   "license": "MIT",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
   "author": "zuohuadong",
   "repository": {
     "type": "git",

package/src/components/LiteArrayField.svelte

@@ -0,0 +1,112 @@
+<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="this.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="
+    const template = this.previousElementSibling?.previousElementSibling?.cloneNode(true);
+    if (template) this.parentElement.insertBefore(template, this.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

@@ -0,0 +1,104 @@
+<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

@@ -0,0 +1,39 @@
+<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

@@ -0,0 +1,101 @@
+<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

@@ -0,0 +1,60 @@
+<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="this.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

@@ -0,0 +1,39 @@
+<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/LiteLayout.svelte

@@ -2,8 +2,9 @@
   /**
    * LiteLayout — Minimal server-rendered sidebar + main layout.
    * No client-side JS required. Uses only IE11-safe CSS classes.
+   * Supports multi-level menus via <details>/<summary> (pure HTML).
    */
-  import type { ResourceDefinition } from '@svadmin/core';
+  import type { ResourceDefinition, MenuItem } from '@svadmin/core';
   import { t } from '@svadmin/core/i18n';
 
   interface Props {
@@ -12,6 +13,8 @@
     brandName?: string;
     userName?: string;
     basePath?: string;
+    /** Optional multi-level menu configuration */
+    menu?: MenuItem[];
     children: any;
   }
 
@@ -21,26 +24,70 @@
     brandName = 'Admin',
     userName = '',
     basePath = '/lite',
+    menu,
     children,
   }: Props = $props();
 
   const menuResources = $derived(
-    resources.filter(r => r.showInMenu !== false)
+    resources.filter((r: ResourceDefinition) => r.showInMenu !== false)
   );
+
+  function isActive(href: string | undefined): boolean {
+    if (!href) return false;
+    return currentResource === href.replace(basePath + '/', '');
+  }
 </script>
 
 <div class="lite-wrapper">
   <!-- Sidebar -->
   <nav class="lite-sidebar">
     <div class="lite-sidebar-brand">{brandName}</div>
-    {#each menuResources as res}
-      <a
-        href="{basePath}/{res.name}"
-        class={res.name === currentResource ? 'active' : ''}
-      >
-        {res.label}
-      </a>
-    {/each}
+    {#if menu && menu.length > 0}
+      {#each menu as item}
+        {#if item.children && item.children.length > 0}
+          <details class="lite-menu-group">
+            <summary class="lite-menu-parent">{item.label ?? item.name}</summary>
+            {#each item.children as child}
+              {#if child.children && child.children.length > 0}
+                <details class="lite-menu-group" style="margin-left:12px">
+                  <summary class="lite-menu-parent">{child.label ?? child.name}</summary>
+                  {#each child.children as grandchild}
+                    <a
+                      href={grandchild.href ?? `${basePath}/${grandchild.name}`}
+                      class={isActive(grandchild.href ?? `${basePath}/${grandchild.name}`) ? 'active' : ''}
+                      target={grandchild.target === '_blank' ? '_blank' : undefined}
+                      style="padding-left:40px"
+                    >{grandchild.label ?? grandchild.name}</a>
+                  {/each}
+                </details>
+              {:else}
+                <a
+                  href={child.href ?? `${basePath}/${child.name}`}
+                  class={isActive(child.href ?? `${basePath}/${child.name}`) ? 'active' : ''}
+                  target={child.target === '_blank' ? '_blank' : undefined}
+                  style="padding-left:28px"
+                >{child.label ?? child.name}</a>
+              {/if}
+            {/each}
+          </details>
+        {:else}
+          <a
+            href={item.href ?? `${basePath}/${item.name}`}
+            class={isActive(item.href ?? `${basePath}/${item.name}`) ? 'active' : ''}
+            target={item.target === '_blank' ? '_blank' : undefined}
+          >{item.label ?? item.name}</a>
+        {/if}
+      {/each}
+    {:else}
+      {#each menuResources as res}
+        <a
+          href="{basePath}/{res.name}"
+          class={res.name === currentResource ? 'active' : ''}
+        >
+          {res.label}
+        </a>
+      {/each}
+    {/if}
     {#if userName}
       <div style="position:absolute;bottom:0;left:0;right:0;padding:12px 16px;border-top:1px solid #334155;font-size:12px;color:#94a3b8;">
         {userName}
@@ -56,3 +103,4 @@
     {@render children()}
   </main>
 </div>
+