@svadmin/lite 0.6.0 → 0.8.0

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

@@ -0,0 +1,19 @@
+interface LiteEditableTableColumn {
+    key: string;
+    label: string;
+    type?: 'text' | 'number' | 'select' | 'boolean' | 'date';
+    options?: Array<{
+        label: string;
+        value: string | number;
+    }>;
+}
+interface Props {
+    columns: LiteEditableTableColumn[];
+    data?: Record<string, unknown>[];
+    action?: string;
+    method?: 'get' | 'post' | 'dialog' | 'GET' | 'POST' | 'DIALOG' | null;
+    rowKey?: string;
+}
+declare const LiteEditableTable: import("svelte").Component<Props, {}, "">;
+type LiteEditableTable = ReturnType<typeof LiteEditableTable>;
+export default LiteEditableTable;

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/LiteGanttChart.svelte

@@ -0,0 +1,144 @@
+<script lang="ts">
+  export interface GanttTask {
+    id: string;
+    title: string;
+    startDay: number;
+    durationDays: number;
+    progress?: number;
+    status?: 'planned' | 'in_progress' | 'completed' | 'delayed';
+  }
+
+  interface Props {
+    tasks?: GanttTask[];
+    totalDays?: number;
+    dayLabelPrefix?: string;
+    class?: string;
+  }
+
+  let {
+    tasks = [],
+    totalDays = 14,
+    dayLabelPrefix = 'D',
+    class: className = '',
+  }: Props = $props();
+
+  const days = $derived(
+    Array.from({ length: totalDays }, (_, i) => `${dayLabelPrefix}${i + 1}`)
+  );
+</script>
+
+<div class="sv-lite-gantt-container {className}">
+  <div class="sv-lite-gantt-title">
+    <strong>Project Schedule</strong> ({tasks.length} tasks / {totalDays} days)
+  </div>
+
+  <table class="sv-lite-gantt-table">
+    <thead>
+      <tr>
+        <th class="sv-lite-th-task">Task</th>
+        <th class="sv-lite-th-status">Status</th>
+        {#each days as day (day)}
+          <th class="sv-lite-th-day">{day}</th>
+        {/each}
+      </tr>
+    </thead>
+    <tbody>
+      {#each tasks as task (task.id)}
+        <tr>
+          <td class="sv-lite-td-task">{task.title}</td>
+          <td class="sv-lite-td-status">
+            <span class="sv-lite-gantt-badge sv-lite-{task.status ?? 'planned'}">{task.status ?? 'planned'}</span>
+          </td>
+          {#each days as _, dIdx (dIdx)}
+            {@const isCovered = dIdx >= task.startDay && dIdx < task.startDay + task.durationDays}
+            <td class="sv-lite-td-cell {isCovered ? 'sv-lite-cell-active sv-lite-bg-' + (task.status ?? 'planned') : ''}">
+              {#if isCovered && dIdx === task.startDay && task.progress !== undefined}
+                <span class="sv-lite-cell-progress">{task.progress}%</span>
+              {/if}
+            </td>
+          {/each}
+        </tr>
+      {/each}
+    </tbody>
+  </table>
+</div>
+
+<style>
+  .sv-lite-gantt-container {
+    display: block;
+    border: 1px solid #e2e8f0;
+    border-radius: 6px;
+    padding: 12px;
+    background-color: #ffffff;
+    font-size: 12px;
+    overflow-x: auto;
+  }
+  .sv-lite-gantt-title {
+    margin-bottom: 10px;
+    font-size: 13px;
+    color: #0f172a;
+  }
+  .sv-lite-gantt-table {
+    width: 100%;
+    border-collapse: collapse;
+    text-align: center;
+  }
+  .sv-lite-gantt-table th, .sv-lite-gantt-table td {
+    border: 1px solid #e2e8f0;
+    padding: 6px;
+  }
+  .sv-lite-th-task, .sv-lite-td-task {
+    text-align: left;
+    min-width: 140px;
+    font-weight: 500;
+  }
+  .sv-lite-th-day {
+    min-width: 28px;
+    font-size: 10px;
+    background-color: #f8fafc;
+    color: #64748b;
+  }
+  .sv-lite-gantt-badge {
+    display: inline-block;
+    padding: 2px 6px;
+    border-radius: 3px;
+    font-size: 10px;
+    text-transform: uppercase;
+  }
+  .sv-lite-completed {
+    background-color: #dcfce7;
+    color: #166534;
+  }
+  .sv-lite-delayed {
+    background-color: #fee2e2;
+    color: #991b1b;
+  }
+  .sv-lite-in_progress {
+    background-color: #e0e7ff;
+    color: #3730a3;
+  }
+  .sv-lite-planned {
+    background-color: #f1f5f9;
+    color: #475569;
+  }
+  .sv-lite-cell-active {
+    background-color: #818cf8;
+    color: #ffffff;
+  }
+  .sv-lite-bg-completed {
+    background-color: #4ade80;
+  }
+  .sv-lite-bg-delayed {
+    background-color: #f87171;
+  }
+  .sv-lite-bg-in_progress {
+    background-color: #6366f1;
+  }
+  .sv-lite-bg-planned {
+    background-color: #94a3b8;
+  }
+  .sv-lite-cell-progress {
+    font-size: 9px;
+    font-weight: bold;
+  }
+</style>

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

@@ -0,0 +1,17 @@
+export interface GanttTask {
+    id: string;
+    title: string;
+    startDay: number;
+    durationDays: number;
+    progress?: number;
+    status?: 'planned' | 'in_progress' | 'completed' | 'delayed';
+}
+interface Props {
+    tasks?: GanttTask[];
+    totalDays?: number;
+    dayLabelPrefix?: string;
+    class?: string;
+}
+declare const LiteGanttChart: import("svelte").Component<Props, {}, "">;
+type LiteGanttChart = ReturnType<typeof LiteGanttChart>;
+export default LiteGanttChart;

package/dist/components/LiteImageCropper.svelte

@@ -0,0 +1,81 @@
+<script lang="ts">
+  interface Props {
+    imageUrl: string;
+    aspectRatio?: number;
+    action?: string;
+    method?: 'get' | 'post' | 'dialog' | 'GET' | 'POST' | 'DIALOG' | null;
+  }
+
+  let {
+    imageUrl,
+    aspectRatio = 1,
+    action = '',
+    method = 'POST',
+  }: Props = $props();
+</script>
+
+<div class="lite-cropper-card">
+  <div class="lite-cropper-header">
+    <strong>Image Crop (Aspect Ratio: {aspectRatio}:1)</strong>
+  </div>
+
+  <div class="lite-cropper-preview">
+    <img src={imageUrl} alt="Source Preview" class="lite-cropper-img" />
+  </div>
+
+  <form {action} {method} class="lite-cropper-form">
+    <input type="hidden" name="imageUrl" value={imageUrl} />
+    <input type="hidden" name="aspectRatio" value={aspectRatio} />
+
+    <div class="lite-cropper-row">
+      <label for="lite_crop_scale_input" class="lite-label">Scale Factor:</label>
+      <select id="lite_crop_scale_input" name="zoom" class="lite-select" style="width: 100px;">
+        <option value="1">100%</option>
+        <option value="1.2">120%</option>
+        <option value="1.5">150%</option>
+        <option value="2">200%</option>
+      </select>
+    </div>
+
+    <div class="lite-cropper-footer">
+      <button type="submit" class="lite-btn lite-btn-primary lite-btn-sm">
+        Save Image
+      </button>
+    </div>
+  </form>
+</div>
+
+<style>
+  .lite-cropper-card {
+    background: #ffffff;
+    border: 1px solid #cbd5e1;
+    border-radius: 6px;
+    padding: 16px;
+    margin-bottom: 16px;
+    max-width: 480px;
+  }
+  .lite-cropper-header {
+    padding-bottom: 8px;
+    border-bottom: 1px solid #e2e8f0;
+    margin-bottom: 12px;
+    font-size: 13px;
+  }
+  .lite-cropper-preview {
+    text-align: center;
+    background: #f1f5f9;
+    padding: 12px;
+    border-radius: 4px;
+    margin-bottom: 12px;
+  }
+  .lite-cropper-img {
+    max-width: 100%;
+    max-height: 200px;
+  }
+  .lite-cropper-row {
+    margin-bottom: 12px;
+  }
+  .lite-cropper-footer {
+    display: flex;
+    justify-content: flex-end;
+  }
+</style>

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

@@ -0,0 +1,9 @@
+interface Props {
+    imageUrl: string;
+    aspectRatio?: number;
+    action?: string;
+    method?: 'get' | 'post' | 'dialog' | 'GET' | 'POST' | 'DIALOG' | null;
+}
+declare const LiteImageCropper: import("svelte").Component<Props, {}, "">;
+type LiteImageCropper = ReturnType<typeof LiteImageCropper>;
+export default LiteImageCropper;

package/dist/components/LiteImportWizard.svelte

@@ -0,0 +1,99 @@
+<script lang="ts">
+  import type { FieldDefinition } from '@svadmin/core';
+
+  interface Props {
+    resourceName: string;
+    fields?: FieldDefinition[];
+    action?: string;
+    method?: 'POST' | 'post';
+    submitText?: string;
+  }
+
+  let {
+    resourceName,
+    fields = [],
+    action = '',
+    method = 'POST',
+    submitText = 'Upload & Import CSV',
+  }: Props = $props();
+</script>
+
+<div class="lite-import-wizard lite-form-group">
+  <div class="lite-import-title">
+    <strong>📥 Import {resourceName}</strong>
+  </div>
+  <form {action} {method} enctype="multipart/form-data" class="lite-import-form">
+    <div class="lite-file-row">
+      <label for="import_file" class="lite-label">Select CSV / JSON file:</label>
+      <input type="file" id="import_file" name="file" accept=".csv,.json" class="lite-input" required />
+    </div>
+
+    {#if fields.length > 0}
+      <div class="lite-field-mapping-hints">
+        <span class="lite-hint-title">Target Schema Fields:</span>
+        <div class="lite-field-tags">
+          {#each fields as field (field.key)}
+            <span class="lite-badge">{field.label} ({field.key})</span>
+          {/each}
+        </div>
+      </div>
+    {/if}
+
+    <div class="lite-import-actions">
+      <button type="submit" class="lite-btn lite-btn-primary">
+        {submitText}
+      </button>
+    </div>
+  </form>
+</div>
+
+<style>
+  .lite-import-wizard {
+    padding: 12px;
+    background: #f8fafc;
+    border: 1px solid #cbd5e1;
+    border-radius: 6px;
+    margin-bottom: 16px;
+  }
+  .lite-import-title {
+    font-size: 13px;
+    color: #334155;
+    margin-bottom: 8px;
+  }
+  .lite-file-row {
+    margin-bottom: 10px;
+  }
+  .lite-label {
+    display: block;
+    font-size: 12px;
+    color: #475569;
+    margin-bottom: 4px;
+  }
+  .lite-field-mapping-hints {
+    margin-bottom: 12px;
+    font-size: 11px;
+    color: #64748b;
+  }
+  .lite-hint-title {
+    display: block;
+    margin-bottom: 4px;
+    font-weight: 600;
+  }
+  .lite-field-tags {
+    display: flex;
+    flex-wrap: wrap;
+  }
+  .lite-badge {
+    display: inline-block;
+    background: #e2e8f0;
+    color: #334155;
+    padding: 2px 6px;
+    border-radius: 3px;
+    margin-right: 6px;
+    margin-bottom: 4px;
+    font-size: 11px;
+  }
+  .lite-import-actions {
+    margin-top: 8px;
+  }
+</style>

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

@@ -0,0 +1,11 @@
+import type { FieldDefinition } from '@svadmin/core';
+interface Props {
+    resourceName: string;
+    fields?: FieldDefinition[];
+    action?: string;
+    method?: 'POST' | 'post';
+    submitText?: string;
+}
+declare const LiteImportWizard: import("svelte").Component<Props, {}, "">;
+type LiteImportWizard = ReturnType<typeof LiteImportWizard>;
+export default LiteImportWizard;