@svadmin/lite 0.5.0 → 0.7.0

package/dist/components/LiteFilterBuilder.svelte

@@ -0,0 +1,205 @@
+<script lang="ts">
+  import type { CrudOperator, FieldDefinition, Filter } from '@svadmin/core';
+  import { t } from '@svadmin/core/i18n';
+
+  export interface FilterRuleItem {
+    id: string;
+    field: string;
+    operator: CrudOperator;
+    value: unknown;
+  }
+
+  interface Props {
+    fields?: FieldDefinition[];
+    filters?: Filter[];
+    logicalOperator?: 'and' | 'or';
+    action?: string;
+    method?: 'GET' | 'POST';
+    disabled?: boolean;
+    onApply?: (filters: Filter[]) => void;
+  }
+
+  let {
+    fields = [],
+    filters = [],
+    logicalOperator = 'and',
+    action = '',
+    disabled = false,
+  }: Props = $props();
+
+  const operatorOptions: { value: CrudOperator; label: string }[] = [
+    { value: 'eq', label: '= 等于' },
+    { value: 'ne', label: '!= 不等于' },
+    { value: 'contains', label: '包含' },
+    { value: 'ncontains', label: '不包含' },
+    { value: 'gt', label: '> 大于' },
+    { value: 'gte', label: '>= 大于等于' },
+    { value: 'lt', label: '< 小于' },
+    { value: 'lte', label: '<= 小于等于' },
+    { value: 'null', label: '为空 (null)' },
+    { value: 'nnull', label: '不为空' },
+  ];
+
+  // Flatten initial filters or fallback to 1 empty rule
+  const initialRules = $derived.by(() => {
+    if (filters.length > 0) {
+      return filters.map((f, i) => ({
+        id: `rule_${i}`,
+        field: 'field' in f ? String(f.field) : (fields[0]?.key ?? ''),
+        operator: ('operator' in f ? f.operator : 'eq') as CrudOperator,
+        value: 'value' in f ? f.value : '',
+      }));
+    }
+    return [
+      {
+        id: 'rule_0',
+        field: fields[0]?.key ?? '',
+        operator: 'eq' as CrudOperator,
+        value: '',
+      },
+    ];
+  });
+</script>
+
+<div class="lite-filter-builder lite-form-group">
+  <div class="lite-filter-header">
+    <div class="lite-filter-title">
+      <strong>{t('common.filters') || '高级多条件筛选'}</strong>
+      <select
+        name="logical_op"
+        class="lite-select lite-select-sm"
+        style="width: 120px; display: inline-block; margin-left: 8px;"
+        value={logicalOperator}
+        {disabled}
+      >
+        <option value="and">符合全部 (AND)</option>
+        <option value="or">符合任一 (OR)</option>
+      </select>
+    </div>
+    <div>
+      <button type="submit" name="_action" value="add_filter_rule" class="lite-btn lite-btn-sm" {disabled}>
+        + 添加条件
+      </button>
+    </div>
+  </div>
+
+  <div class="lite-filter-rules">
+    {#each initialRules as rule, idx (rule.id)}
+      <div class="lite-filter-row">
+        <!-- Field select -->
+        <select
+          name="filter_field_{idx}"
+          class="lite-select lite-filter-field"
+          value={rule.field}
+          {disabled}
+        >
+          {#each fields as fld (fld.key)}
+            <option value={fld.key}>{fld.label || fld.key}</option>
+          {/each}
+        </select>
+
+        <!-- Operator select -->
+        <select
+          name="filter_op_{idx}"
+          class="lite-select lite-filter-op"
+          value={rule.operator}
+          {disabled}
+        >
+          {#each operatorOptions as op (op.value)}
+            <option value={op.value}>{op.label}</option>
+          {/each}
+        </select>
+
+        <!-- Value input -->
+        {#if rule.operator !== 'null' && rule.operator !== 'nnull'}
+          <input
+            type="text"
+            name="filter_val_{idx}"
+            class="lite-input lite-filter-val"
+            value={String(rule.value ?? '')}
+            placeholder="输入筛选值..."
+            {disabled}
+          />
+        {/if}
+
+        <!-- Remove row button -->
+        <button
+          type="submit"
+          name="_action"
+          value="remove_filter_rule_{idx}"
+          class="lite-btn lite-btn-sm lite-btn-danger"
+          {disabled}
+          title="删除此行条件"
+        >
+          ✕
+        </button>
+      </div>
+    {/each}
+  </div>
+
+  <div class="lite-filter-footer">
+    <button type="submit" class="lite-btn lite-btn-primary">
+      应用筛选
+    </button>
+    <a href={action || '?'} class="lite-btn" style="margin-left: 8px;">
+      重置
+    </a>
+  </div>
+</div>
+
+<style>
+  .lite-filter-builder {
+    border: 1px solid #cbd5e1;
+    border-radius: 6px;
+    padding: 14px;
+    background: #f8fafc;
+    margin-bottom: 16px;
+  }
+  .lite-filter-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 12px;
+  }
+  .lite-filter-rules {
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 12px;
+  }
+  .lite-filter-row {
+    display: flex;
+    align-items: center;
+    background: #ffffff;
+    padding: 8px;
+    border: 1px solid #e2e8f0;
+    border-radius: 4px;
+    margin-bottom: 8px;
+  }
+  .lite-filter-row:last-child {
+    margin-bottom: 0;
+  }
+  .lite-filter-row > * {
+    margin-right: 8px;
+  }
+  .lite-filter-row > *:last-child {
+    margin-right: 0;
+  }
+  .lite-filter-field {
+    flex: 2;
+    min-width: 130px;
+  }
+  .lite-filter-op {
+    flex: 2;
+    min-width: 120px;
+  }
+  .lite-filter-val {
+    flex: 3;
+    min-width: 140px;
+  }
+  .lite-filter-footer {
+    display: flex;
+    align-items: center;
+    border-top: 1px solid #e2e8f0;
+    padding-top: 10px;
+  }
+</style>

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

@@ -0,0 +1,19 @@
+import type { CrudOperator, FieldDefinition, Filter } from '@svadmin/core';
+export interface FilterRuleItem {
+    id: string;
+    field: string;
+    operator: CrudOperator;
+    value: unknown;
+}
+interface Props {
+    fields?: FieldDefinition[];
+    filters?: Filter[];
+    logicalOperator?: 'and' | 'or';
+    action?: string;
+    method?: 'GET' | 'POST';
+    disabled?: boolean;
+    onApply?: (filters: Filter[]) => void;
+}
+declare const LiteFilterBuilder: import("svelte").Component<Props, {}, "">;
+type LiteFilterBuilder = ReturnType<typeof LiteFilterBuilder>;
+export default LiteFilterBuilder;

package/dist/components/LiteShowField.svelte

@@ -2,66 +2,96 @@
   /**
    * LiteShowField — SSR-compatible field renderer for detail views.
    * Renders a single field value based on its type definition.
-  */
-  import type { FieldDefinition } from '@svadmin/core';
-  import { toSafeHref, toSafeText } from '../security';
-  import { isExplicitBooleanTrue, getStatusBadgeClass } from '../value-normalization';
-  import LiteMediaThumbnail from './LiteMediaThumbnail.svelte';
+   */
+  import type { FieldDefinition } from "@svadmin/core";
+  import { toSafeHref, toSafeText } from "../security";
+  import { isExplicitBooleanTrue, getStatusBadgeClass } from "../value-normalization";
+  import LiteMediaThumbnail from "./LiteMediaThumbnail.svelte";
+  import LiteAvatarField from "./fields/LiteAvatarField.svelte";
+  import LiteCurrencyField from "./fields/LiteCurrencyField.svelte";
+  import LitePhoneField from "./fields/LitePhoneField.svelte";
+  import LiteRatingField from "./fields/LiteRatingField.svelte";
+  import LiteCodeField from "./fields/LiteCodeField.svelte";
 
   interface Props {
     field: FieldDefinition;
     value: unknown;
+    basePath?: string;
   }
 
-  let { field, value }: Props = $props();
+  let { field, value, basePath = "/lite" }: Props = $props();
 
   function formatValue(v: unknown, f: FieldDefinition): string {
-    if (v == null) return '—';
-    if (f.type === 'date') {
+    if (v == null) return "—";
+    if (f.type === "date") {
       try { return new Date(v as string).toLocaleString(); } catch { return String(v); }
     }
-    if (f.type === 'select' && f.options) {
+    if (f.type === "select" && f.options) {
       const opt = f.options.find(o => String(o.value) === String(v));
       return opt?.label ?? String(v);
     }
-    if (f.type === 'url') return String(v);
-    if (f.type === 'email') return String(v);
-    if (Array.isArray(v)) return v.join(', ');
-    if (typeof v === 'object') {
+    if (f.type === "relation" && typeof v === "object" && v !== null) {
+      return String((v as Record<string, unknown>)[f.optionLabel ?? "name"] ?? (v as Record<string, unknown>)[f.optionValue ?? "id"] ?? v);
+    }
+    if (f.type === "url") return String(v);
+    if (f.type === "email") return String(v);
+    if (Array.isArray(v)) return v.join(", ");
+    if (typeof v === "object") {
       try { return JSON.stringify(v, null, 2); } catch { return String(v); }
     }
     return String(v);
   }
 </script>
 
-{#if field.type === 'boolean'}
+{#if field.type === "boolean"}
   {@const checked = isExplicitBooleanTrue(value)}
-  <span class="lite-bool {checked ? 'lite-bool-true' : ''}"></span>
-  {checked ? '✓ Yes' : '✗ No'}
-{:else if field.type === 'url' && value}
+  <span class="lite-bool {checked ? "lite-bool-true" : ""}"></span>
+  {checked ? "✓ Yes" : "✗ No"}
+{:else if field.type === "avatar"}
+  <LiteAvatarField {field} value={value as unknown} mode="show" />
+{:else if field.type === "rating"}
+  <LiteRatingField {field} value={value as string | number | null | undefined} mode="show" />
+{:else if field.type === "code"}
+  <LiteCodeField {field} value={value as string | number | Record<string, unknown> | unknown[] | null | undefined} mode="show" />
+{:else if field.type === "currency"}
+  <LiteCurrencyField {field} value={value as string | number | null | undefined} mode="show" />
+{:else if field.type === "phone"}
+  <LitePhoneField {field} value={value as string | number | null | undefined} mode="show" />
+{:else if field.type === "password"}
+  <span>••••••••</span>
+{:else if field.type === "color" && value}
+  <span style="display:inline-flex;align-items:center;">
+    <span style="display:inline-block;width:14px;height:14px;border-radius:3px;background:{toSafeText(value)};border:1px solid #cbd5e1;margin-right:6px;"></span>
+    <span class="lite-font-mono">{toSafeText(value)}</span>
+  </span>
+{:else if field.type === "url" && value}
   {@const href = toSafeHref(value)}
   {#if href}
     <a {href} target="_blank" rel="noopener noreferrer">{toSafeText(value)}</a>
   {:else}
     {toSafeText(value)}
   {/if}
-{:else if field.type === 'email' && value}
+{:else if field.type === "email" && value}
   {@const href = toSafeHref(`mailto:${toSafeText(value)}`)}
   {#if href}
     <a {href}>{toSafeText(value)}</a>
   {:else}
     {toSafeText(value)}
   {/if}
-{:else if field.type === 'image' && value}
+{:else if field.type === "image" && value}
   <LiteMediaThumbnail src={String(value)} alt={field.label} height={200} />
-{:else if field.type === 'tags' && Array.isArray(value)}
+{:else if field.type === "tags" && Array.isArray(value)}
   {#each value as tag, _i (_i)}
     <span class="lite-badge">{tag}</span>
   {/each}
-{:else if field.type === 'json' && value}
-  <pre style="margin:0;font-size:12px;background:#f8fafc;padding:12px;border-radius:6px;border:1px solid #e2e8f0;overflow-x:auto;">{typeof value === 'string' ? value : JSON.stringify(value, null, 2)}</pre>
+{:else if field.type === "json" && value}
+  <pre style="margin:0;font-size:12px;background:#f8fafc;padding:12px;border-radius:6px;border:1px solid #e2e8f0;overflow-x:auto;">{typeof value === "string" ? value : JSON.stringify(value, null, 2)}</pre>
 {:else if field.type === "select" && field.options}
   <span class={getStatusBadgeClass(value)}>{formatValue(value, field)}</span>
+{:else if field.type === "relation" && field.resource && value != null}
+  <a href={`${basePath}/${field.resource}/show/${value}`} class="lite-badge lite-badge-info">
+    {formatValue(value, field)} &rarr;
+  </a>
 {:else}
   {formatValue(value, field)}
 {/if}

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

@@ -1,11 +1,12 @@
 /**
    * LiteShowField — SSR-compatible field renderer for detail views.
    * Renders a single field value based on its type definition.
-  */
-import type { FieldDefinition } from '@svadmin/core';
+   */
+import type { FieldDefinition } from "@svadmin/core";
 interface Props {
     field: FieldDefinition;
     value: unknown;
+    basePath?: string;
 }
 declare const LiteShowField: import("svelte").Component<Props, {}, "">;
 type LiteShowField = ReturnType<typeof LiteShowField>;

package/dist/components/LiteTable.svelte

@@ -3,77 +3,105 @@
    * LiteTable — Pure HTML table with <a> sort links.
    * No JavaScript required — sorting and pagination are URL-driven.
    */
-  import type { ResourceDefinition, FieldDefinition } from '@svadmin/core';
-  import { t } from '@svadmin/core/i18n';
-  import { isExplicitBooleanTrue, getStatusBadgeClass } from '../value-normalization';
-  import { liteFragmentId } from '../fragment-id';
+  import type { ResourceDefinition, FieldDefinition } from "@svadmin/core";
+  import { t } from "@svadmin/core/i18n";
+  import { isExplicitBooleanTrue, getStatusBadgeClass } from "../value-normalization";
+  import { liteFragmentId } from "../fragment-id";
 
   interface Props {
     records: Record<string, unknown>[];
     resource: ResourceDefinition;
     currentSort?: string;
-    currentOrder?: 'asc' | 'desc';
+    currentOrder?: "asc" | "desc";
     currentSearch?: string;
     basePath?: string;
     /** Show edit/delete action buttons */
     canShow?: boolean;
     canEdit?: boolean;
     canDelete?: boolean;
+    enableBatch?: boolean;
   }
 
   let {
     records,
     resource,
     currentSort,
-    currentOrder = 'asc',
+    currentOrder = "asc",
     currentSearch,
-    basePath = '/lite',
+    basePath = "/lite",
     canShow,
     canEdit,
     canDelete,
+    enableBatch = false,
   }: Props = $props();
 
   const tableId = $props.id();
 
-  let pk = $derived(resource.primaryKey ?? 'id');
+  let pk = $derived(resource.primaryKey ?? "id");
   const showView = $derived(canShow ?? resource.canShow !== false);
   const showEdit = $derived(canEdit ?? resource.canEdit !== false);
   const showDelete = $derived(canDelete ?? resource.canDelete !== false);
+  const showBatch = $derived(enableBatch && showDelete);
   const listFields = $derived(
     resource.fields.filter(f => f.showInList !== false)
   );
 
   function sortUrl(field: FieldDefinition): string {
-    const newOrder = currentSort === field.key && currentOrder === 'asc' ? 'desc' : 'asc';
+    const newOrder = currentSort === field.key && currentOrder === "asc" ? "desc" : "asc";
     const params = new URLSearchParams({ sort: field.key, order: newOrder });
-    if (currentSearch) params.set('q', currentSearch);
-    return `?${params.toString()}`;
+    if (currentSearch) params.set("q", currentSearch);
+    return "?" + params.toString();
   }
 
   function sortIndicator(field: FieldDefinition): string {
-    if (currentSort !== field.key) return '⇅';
-    return currentOrder === 'asc' ? '↑' : '↓';
+    if (currentSort !== field.key) return "⇅";
+    return currentOrder === "asc" ? "↑" : "↓";
+  }
+
+  function toggleAll(e: Event) {
+    const target = e.target as HTMLInputElement | null;
+    if (typeof document !== "undefined" && target) {
+      const checkboxes = document.querySelectorAll("input[name=ids]");
+      checkboxes.forEach((cb) => {
+        (cb as HTMLInputElement).checked = target.checked;
+      });
+    }
   }
 
   function formatValue(value: unknown, field: FieldDefinition): string {
-    if (value == null) return '—';
-    if (field.type === 'boolean') return '';  // handled in template
-    if (field.type === 'date') {
+    if (value == null) return "—";
+    if (field.type === "boolean") return "";
+    if (field.type === "date") {
       try { return new Date(value as string).toLocaleDateString(); } catch { return String(value); }
     }
-    if (field.type === 'select' && field.options) {
+    if (field.type === "select" && field.options) {
       const opt = field.options.find(o => String(o.value) === String(value));
       return opt?.label ?? String(value);
     }
-    if (Array.isArray(value)) return value.join(', ');
+    if (field.type === "relation" && typeof value === "object" && value !== null) {
+      return String((value as Record<string, unknown>)[field.optionLabel ?? "name"] ?? (value as Record<string, unknown>)[field.optionValue ?? "id"] ?? value);
+    }
+    if (Array.isArray(value)) return value.join(", ");
     return String(value);
   }
-
 </script>
 
+{#if showBatch}
+  <form id={"batch-delete-" + tableId} method="POST" action="?/batchDelete" style="display:none;"></form>
+{/if}
+
 <table class="lite-table">
   <thead>
     <tr>
+      {#if showBatch}
+        <th style="width: 36px; text-align: center;">
+          <input
+            type="checkbox"
+            title="Select all"
+            onchange={toggleAll}
+          />
+        </th>
+      {/if}
       {#each listFields as field, _i (_i)}
         <th>
           {#if field.sortable !== false}
@@ -87,7 +115,7 @@
         </th>
       {/each}
       {#if showView || showEdit || showDelete}
-        <th style="text-align:right;">{t('common.actions') || 'Actions'}</th>
+        <th style="text-align:right;">{t("common.actions") || "Actions"}</th>
       {/if}
     </tr>
   </thead>
@@ -95,16 +123,25 @@
     {#each records as record, _i (_i)}
       {@const id = record[pk]}
       <tr>
+        {#if showBatch}
+          <td style="text-align: center;">
+            <input type="checkbox" name="ids" value={String(id)} form={"batch-delete-" + tableId} />
+          </td>
+        {/if}
         {#each listFields as field, _i (_i)}
           <td>
-            {#if field.type === 'boolean'}
-              <span class="lite-bool {isExplicitBooleanTrue(record[field.key]) ? 'lite-bool-true' : ''}"></span>
-            {:else if field.type === 'tags' && Array.isArray(record[field.key])}
+            {#if field.type === "boolean"}
+              <span class="lite-bool {isExplicitBooleanTrue(record[field.key]) ? "lite-bool-true" : ""}"></span>
+            {:else if field.type === "tags" && Array.isArray(record[field.key])}
               {#each (record[field.key] as string[]).slice(0, 3) as tag, _i (_i)}
                 <span class="lite-badge">{tag}</span>
               {/each}
-            {:else if field.type === 'select' && field.options}
+            {:else if field.type === "select" && field.options}
               <span class={getStatusBadgeClass(record[field.key])}>{formatValue(record[field.key], field)}</span>
+            {:else if field.type === "relation" && field.resource && record[field.key] != null}
+              <a href={basePath + "/" + field.resource + "/show/" + record[field.key]} class="lite-badge lite-badge-info">
+                {formatValue(record[field.key], field)}
+              </a>
             {:else}
               {formatValue(record[field.key], field)}
             {/if}
@@ -113,28 +150,28 @@
         {#if showView || showEdit || showDelete}
           <td class="actions">
             {#if showView}
-              <a href={`${basePath}/${resource.name}/show/${id}`} class="lite-btn lite-btn-sm">{t('common.show') || 'Show'}</a>
+              <a href={basePath + "/" + resource.name + "/show/" + id} class="lite-btn lite-btn-sm">{t("common.show") || "Show"}</a>
             {/if}
             {#if showEdit}
-              <a href={`${basePath}/${resource.name}/edit/${id}`} class="lite-btn lite-btn-sm">{t('common.edit') || 'Edit'}</a>
+              <a href={basePath + "/" + resource.name + "/edit/" + id} class="lite-btn lite-btn-sm">{t("common.edit") || "Edit"}</a>
             {/if}
             {#if showDelete}
-              {@const confirmationId = liteFragmentId('delete', tableId, resource.name, String(id))}
-              {@const confirmationTitleId = `${confirmationId}-title`}
+              {@const confirmationId = liteFragmentId("delete", tableId, resource.name, String(id))}
+              {@const confirmationTitleId = confirmationId + "-title"}
               <div class="lite-confirm">
-                <span id={`${confirmationId}-closed`} class="lite-confirm-cancel-target" aria-hidden="true"></span>
+                <span id={confirmationId + "-closed"} class="lite-confirm-cancel-target" aria-hidden="true"></span>
                 <a
-                  href={`#${confirmationId}`}
+                  href={"#" + confirmationId}
                   class="lite-btn lite-btn-sm lite-btn-danger"
                   aria-controls={confirmationId}
                   aria-haspopup="dialog"
-                >{t('common.delete') || 'Delete'}</a>
+                >{t("common.delete") || "Delete"}</a>
                 <div id={confirmationId} class="lite-confirm-panel lite-confirm-target" role="dialog" aria-labelledby={confirmationTitleId} tabindex="-1">
-                  <p id={confirmationTitleId} style="margin:0 0 8px;font-size:13px;">{t('common.areYouSure') || 'Are you sure?'}</p>
+                  <p id={confirmationTitleId} style="margin:0 0 8px;font-size:13px;">{t("common.areYouSure") || "Are you sure?"}</p>
                   <form method="POST" action="?/delete" class="lite-inline-actions">
                     <input type="hidden" name="id" value={String(id)} />
-                    <a href={`#${confirmationId}-closed`} class="lite-btn lite-btn-sm">{t('common.cancel') || 'Cancel'}</a>
-                    <button type="submit" class="lite-btn lite-btn-sm lite-btn-danger">{t('common.confirm') || 'Confirm'}</button>
+                    <a href={"#" + confirmationId + "-closed"} class="lite-btn lite-btn-sm">{t("common.cancel") || "Cancel"}</a>
+                    <button type="submit" class="lite-btn lite-btn-sm lite-btn-danger">{t("common.confirm") || "Confirm"}</button>
                   </form>
                 </div>
               </div>
@@ -144,10 +181,26 @@
       </tr>
     {:else}
       <tr>
-        <td colspan={listFields.length + (showView || showEdit || showDelete ? 1 : 0)} style="text-align:center;padding:40px;color:#9ca3af;">
-          {t('common.noData') || 'No records found.'}
+        <td colspan={listFields.length + (showView || showEdit || showDelete ? 1 : 0) + (showBatch ? 1 : 0)} style="text-align:center;padding:40px;color:#9ca3af;">
+          {t("common.noData") || "No records found."}
         </td>
       </tr>
     {/each}
   </tbody>
 </table>
+
+{#if showBatch && records.length > 0}
+  <div class="lite-batch-bar">
+    <span style="font-size: 13px; color: #64748b;">
+      Select items above to perform batch actions
+    </span>
+    <button
+      type="submit"
+      form={"batch-delete-" + tableId}
+      class="lite-btn lite-btn-sm lite-btn-danger"
+
+    >
+      {t("common.delete") || "Delete Selected"}
+    </button>
+  </div>
+{/if}

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

@@ -2,18 +2,19 @@
    * LiteTable — Pure HTML table with <a> sort links.
    * No JavaScript required — sorting and pagination are URL-driven.
    */
-import type { ResourceDefinition } from '@svadmin/core';
+import type { ResourceDefinition } from "@svadmin/core";
 interface Props {
     records: Record<string, unknown>[];
     resource: ResourceDefinition;
     currentSort?: string;
-    currentOrder?: 'asc' | 'desc';
+    currentOrder?: "asc" | "desc";
     currentSearch?: string;
     basePath?: string;
     /** Show edit/delete action buttons */
     canShow?: boolean;
     canEdit?: boolean;
     canDelete?: boolean;
+    enableBatch?: boolean;
 }
 declare const LiteTable: import("svelte").Component<Props, {}, "">;
 type LiteTable = ReturnType<typeof LiteTable>;