@svadmin/lite 0.7.0 → 0.8.1

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;

package/dist/components/LiteJsonSchemaForm.svelte

@@ -0,0 +1,102 @@
+<script lang="ts">
+  interface Props {
+    schema: Record<string, unknown>;
+    value?: Record<string, unknown>;
+    action?: string;
+    method?: 'get' | 'post' | 'dialog' | 'GET' | 'POST' | 'DIALOG' | null;
+    submitText?: string;
+  }
+
+  let {
+    schema,
+    value = {},
+    action = '',
+    method = 'POST',
+    submitText = 'Submit Form',
+  }: Props = $props();
+
+  interface FieldMeta {
+    key: string;
+    title: string;
+    type: string;
+    enum?: Array<string | number>;
+    required?: boolean;
+  }
+
+  const properties = $derived.by<FieldMeta[]>(() => {
+    const propsObj = (schema.properties ?? {}) as Record<string, Record<string, unknown>>;
+    const requiredKeys = Array.isArray(schema.required) ? (schema.required as string[]) : [];
+
+    return Object.entries(propsObj).map(([key, propDef]) => ({
+      key,
+      title: String(propDef.title ?? key),
+      type: String(propDef.type ?? 'string'),
+      enum: Array.isArray(propDef.enum) ? (propDef.enum as Array<string | number>) : undefined,
+      required: requiredKeys.includes(key),
+    }));
+  });
+</script>
+
+<div class="lite-schema-form-card">
+  {#if schema.title}
+    <div class="lite-schema-form-header">
+      <strong>{schema.title}</strong>
+    </div>
+  {/if}
+
+  <form {action} {method} class="lite-schema-form">
+    {#each properties as field (field.key)}
+      <div class="lite-schema-field">
+        <label for="lite_json_{field.key}" class="lite-label">
+          {field.title} {#if field.required}<span style="color: #ef4444;">*</span>{/if}
+        </label>
+        {#if field.enum}
+          <select id="lite_json_{field.key}" name={field.key} class="lite-select" required={field.required}>
+            {#each field.enum as option (option)}
+              <option value={String(option)} selected={String(value[field.key]) === String(option)}>
+                {option}
+              </option>
+            {/each}
+          </select>
+        {:else if field.type === 'boolean'}
+          <input id="lite_json_{field.key}" type="checkbox" name={field.key} checked={Boolean(value[field.key])} />
+        {:else if field.type === 'number' || field.type === 'integer'}
+          <input id="lite_json_{field.key}" type="number" name={field.key} value={Number(value[field.key] ?? 0)} class="lite-input" required={field.required} />
+        {:else}
+          <input id="lite_json_{field.key}" type="text" name={field.key} value={String(value[field.key] ?? '')} class="lite-input" required={field.required} />
+        {/if}
+      </div>
+    {/each}
+
+    <div class="lite-schema-footer">
+      <button type="submit" class="lite-btn lite-btn-primary lite-btn-sm">
+        {submitText}
+      </button>
+    </div>
+  </form>
+</div>
+
+<style>
+  .lite-schema-form-card {
+    background: #ffffff;
+    border: 1px solid #cbd5e1;
+    border-radius: 6px;
+    padding: 16px;
+    margin-bottom: 16px;
+  }
+  .lite-schema-form-header {
+    padding-bottom: 8px;
+    border-bottom: 1px solid #e2e8f0;
+    margin-bottom: 12px;
+    font-size: 14px;
+  }
+  .lite-schema-field {
+    margin-bottom: 12px;
+  }
+  .lite-schema-footer {
+    display: flex;
+    justify-content: flex-end;
+    padding-top: 12px;
+    border-top: 1px solid #e2e8f0;
+  }
+</style>

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

@@ -0,0 +1,10 @@
+interface Props {
+    schema: Record<string, unknown>;
+    value?: Record<string, unknown>;
+    action?: string;
+    method?: 'get' | 'post' | 'dialog' | 'GET' | 'POST' | 'DIALOG' | null;
+    submitText?: string;
+}
+declare const LiteJsonSchemaForm: import("svelte").Component<Props, {}, "">;
+type LiteJsonSchemaForm = ReturnType<typeof LiteJsonSchemaForm>;
+export default LiteJsonSchemaForm;

package/dist/components/LiteKanbanBoard.svelte

@@ -0,0 +1,169 @@
+<script lang="ts">
+  export interface KanbanCard {
+    id: string;
+    title: string;
+    description?: string;
+    columnId: string;
+    priority?: 'low' | 'medium' | 'high' | 'urgent';
+    tags?: string[];
+  }
+
+  export interface KanbanColumn {
+    id: string;
+    title: string;
+  }
+
+  interface Props {
+    columns: KanbanColumn[];
+    cards?: KanbanCard[];
+    formAction?: string;
+    class?: string;
+  }
+
+  let {
+    columns = [],
+    cards = [],
+    formAction = '',
+    class: className = '',
+  }: Props = $props();
+</script>
+
+<div class="sv-lite-kanban-board {className}">
+  {#each columns as col (col.id)}
+    {@const colCards = cards.filter((c) => c.columnId === col.id)}
+    <div class="sv-lite-kanban-column">
+      <div class="sv-lite-column-header">
+        <span class="sv-lite-column-title">{col.title}</span>
+        <span class="sv-lite-column-count">({colCards.length})</span>
+      </div>
+
+      <div class="sv-lite-column-cards">
+        {#each colCards as card (card.id)}
+          <div class="sv-lite-kanban-card">
+            <div class="sv-lite-card-title">{card.title}</div>
+            {#if card.description}
+              <div class="sv-lite-card-desc">{card.description}</div>
+            {/if}
+            <div class="sv-lite-card-meta">
+              {#if card.priority}
+                <span class="sv-lite-priority-badge sv-lite-{card.priority}">{card.priority}</span>
+              {/if}
+              {#each card.tags ?? [] as tag (tag)}
+                <span class="sv-lite-tag-badge">#{tag}</span>
+              {/each}
+            </div>
+          </div>
+        {/each}
+      </div>
+
+      {#if formAction}
+        <form method="POST" action={formAction} class="sv-lite-card-form">
+          <input type="hidden" name="columnId" value={col.id} />
+          <input type="text" name="title" placeholder="+ Add card..." class="sv-lite-card-input" />
+          <button type="submit" class="sv-lite-card-btn">Add</button>
+        </form>
+      {/if}
+    </div>
+  {/each}
+</div>
+
+<style>
+  .sv-lite-kanban-board {
+    display: block;
+    white-space: nowrap;
+    overflow-x: auto;
+    padding-bottom: 12px;
+    font-size: 12px;
+  }
+  .sv-lite-kanban-column {
+    display: inline-block;
+    vertical-align: top;
+    width: 260px;
+    margin-right: 12px;
+    background-color: #f8fafc;
+    border: 1px solid #e2e8f0;
+    border-radius: 6px;
+    padding: 10px;
+    white-space: normal;
+    box-sizing: border-box;
+  }
+  .sv-lite-column-header {
+    font-weight: bold;
+    padding-bottom: 8px;
+    border-bottom: 1px solid #cbd5e1;
+    color: #1e293b;
+    margin-bottom: 8px;
+  }
+  .sv-lite-column-count {
+    color: #64748b;
+    font-weight: normal;
+    font-size: 11px;
+    margin-left: 4px;
+  }
+  .sv-lite-kanban-card {
+    background-color: #ffffff;
+    border: 1px solid #cbd5e1;
+    border-radius: 4px;
+    padding: 8px;
+    margin-bottom: 8px;
+  }
+  .sv-lite-card-title {
+    font-weight: 600;
+    color: #0f172a;
+    margin-bottom: 4px;
+  }
+  .sv-lite-card-desc {
+    color: #64748b;
+    font-size: 11px;
+    margin-bottom: 6px;
+  }
+  .sv-lite-card-meta {
+    padding-top: 4px;
+    border-top: 1px solid #f1f5f9;
+  }
+  .sv-lite-priority-badge {
+    display: inline-block;
+    padding: 1px 4px;
+    font-size: 10px;
+    border-radius: 2px;
+    text-transform: uppercase;
+    margin-right: 4px;
+  }
+  .sv-lite-urgent, .sv-lite-high {
+    background-color: #fee2e2;
+    color: #991b1b;
+  }
+  .sv-lite-medium {
+    background-color: #e0e7ff;
+    color: #3730a3;
+  }
+  .sv-lite-low {
+    background-color: #f1f5f9;
+    color: #475569;
+  }
+  .sv-lite-tag-badge {
+    display: inline-block;
+    color: #64748b;
+    font-size: 10px;
+    margin-right: 4px;
+  }
+  .sv-lite-card-form {
+    margin-top: 6px;
+  }
+  .sv-lite-card-input {
+    width: 170px;
+    padding: 4px 6px;
+    font-size: 11px;
+    border: 1px solid #cbd5e1;
+    border-radius: 3px;
+  }
+  .sv-lite-card-btn {
+    padding: 4px 8px;
+    font-size: 11px;
+    background-color: #4f46e5;
+    color: #ffffff;
+    border: none;
+    border-radius: 3px;
+    cursor: pointer;
+  }
+</style>

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

@@ -0,0 +1,21 @@
+export interface KanbanCard {
+    id: string;
+    title: string;
+    description?: string;
+    columnId: string;
+    priority?: 'low' | 'medium' | 'high' | 'urgent';
+    tags?: string[];
+}
+export interface KanbanColumn {
+    id: string;
+    title: string;
+}
+interface Props {
+    columns: KanbanColumn[];
+    cards?: KanbanCard[];
+    formAction?: string;
+    class?: string;
+}
+declare const LiteKanbanBoard: import("svelte").Component<Props, {}, "">;
+type LiteKanbanBoard = ReturnType<typeof LiteKanbanBoard>;
+export default LiteKanbanBoard;

package/dist/components/LiteMasterDetailView.svelte

@@ -0,0 +1,113 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    items?: Record<string, unknown>[];
+    selectedId?: string | number;
+    idKey?: string;
+    titleKey?: string;
+    detailSnippet?: Snippet<[Record<string, unknown>]>;
+  }
+
+  let {
+    items = [],
+    selectedId,
+    idKey = 'id',
+    titleKey = 'title',
+    detailSnippet,
+  }: Props = $props();
+
+  const activeItem = $derived(
+    items.find((i) => String(i[idKey]) === String(selectedId)) ?? items[0]
+  );
+</script>
+
+<div class="lite-master-detail-card">
+  <!-- Left Master List -->
+  <div class="lite-master-list">
+    <div class="lite-master-header">
+      <strong>Item Directory</strong>
+    </div>
+    <ul class="lite-master-items">
+      {#each items as item (item[idKey])}
+        {@const isSelected = String(item[idKey]) === String(activeItem?.[idKey])}
+        <li class="lite-master-item {isSelected ? 'lite-master-item-active' : ''}">
+          <a href="?selectedId={item[idKey]}" class="lite-master-link">
+            {item[titleKey] ?? item.name ?? `Item #${item[idKey]}`}
+          </a>
+        </li>
+      {/each}
+    </ul>
+  </div>
+
+  <!-- Right Detail View -->
+  <div class="lite-detail-pane">
+    {#if activeItem}
+      {#if detailSnippet}
+        {@render detailSnippet(activeItem)}
+      {:else}
+        <div class="lite-detail-content">
+          <h4 style="margin: 0 0 12px 0;">{activeItem[titleKey] ?? activeItem.name ?? `Item #${activeItem[idKey]}`}</h4>
+          <table class="lite-table">
+            <tbody>
+              {#each Object.entries(activeItem) as [k, v] (k)}
+                <tr>
+                  <th style="width: 30%; text-align: left; background: #f8fafc;">{k}</th>
+                  <td>{typeof v === 'object' ? JSON.stringify(v) : String(v ?? '—')}</td>
+                </tr>
+              {/each}
+            </tbody>
+          </table>
+        </div>
+      {/if}
+    {:else}
+      <div style="color: #94a3b8; padding: 24px; text-align: center;">
+        Select an item to view details
+      </div>
+    {/if}
+  </div>
+</div>
+
+<style>
+  .lite-master-detail-card {
+    display: flex;
+    background: #ffffff;
+    border: 1px solid #cbd5e1;
+    border-radius: 6px;
+    margin-bottom: 16px;
+    min-height: 320px;
+  }
+  .lite-master-list {
+    flex: 0 0 240px;
+    border-right: 1px solid #e2e8f0;
+    background: #f8fafc;
+  }
+  .lite-master-header {
+    padding: 10px 12px;
+    border-bottom: 1px solid #e2e8f0;
+    font-size: 12px;
+  }
+  .lite-master-items {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+  }
+  .lite-master-item {
+    border-bottom: 1px solid #f1f5f9;
+  }
+  .lite-master-item-active {
+    background: #e0e7ff;
+    font-weight: bold;
+  }
+  .lite-master-link {
+    display: block;
+    padding: 8px 12px;
+    color: #1e293b;
+    text-decoration: none;
+    font-size: 12px;
+  }
+  .lite-detail-pane {
+    flex: 1 1 auto;
+    padding: 16px;
+  }
+</style>

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

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    items?: Record<string, unknown>[];
+    selectedId?: string | number;
+    idKey?: string;
+    titleKey?: string;
+    detailSnippet?: Snippet<[Record<string, unknown>]>;
+}
+declare const LiteMasterDetailView: import("svelte").Component<Props, {}, "">;
+type LiteMasterDetailView = ReturnType<typeof LiteMasterDetailView>;
+export default LiteMasterDetailView;