@svadmin/lite 0.6.0 → 0.8.0

package/dist/components/LiteDecisionTable.svelte

@@ -0,0 +1,178 @@
+<script lang="ts">
+  export interface DecisionColumn {
+    key: string;
+    label: string;
+    type: 'condition' | 'action';
+  }
+
+  export interface DecisionRule {
+    id: string;
+    description?: string;
+    values: Record<string, string>;
+  }
+
+  interface Props {
+    title?: string;
+    columns?: DecisionColumn[];
+    rules?: DecisionRule[];
+    hitPolicy?: string;
+    formAction?: string;
+    class?: string;
+  }
+
+  let {
+    title = 'Decision Table Matrix',
+    columns = [
+      { key: 'tier', label: 'Tier', type: 'condition' },
+      { key: 'discount', label: 'Discount', type: 'action' },
+    ],
+    rules = [
+      { id: 'r1', description: 'VIP', values: { tier: 'VIP', discount: '20%' } },
+      { id: 'r2', description: 'Standard', values: { tier: 'Standard', discount: '10%' } },
+    ],
+    hitPolicy = 'FIRST',
+    formAction = '',
+    class: className = '',
+  }: Props = $props();
+
+  const conditionCols = $derived(columns.filter((c) => c.type === 'condition'));
+  const actionCols = $derived(columns.filter((c) => c.type === 'action'));
+</script>
+
+<div class="sv-lite-decision-container {className}">
+  <div class="sv-lite-decision-header">
+    <strong>{title}</strong>
+    <span class="sv-lite-hit-policy">[Policy: {hitPolicy}]</span>
+  </div>
+
+  <form method="POST" action={formAction}>
+    <table class="sv-lite-decision-table">
+      <thead>
+        <tr>
+          <th rowspan="2" class="sv-lite-th-idx">#</th>
+          <th colspan={conditionCols.length} class="sv-lite-th-cond">Conditions (IF)</th>
+          <th colspan={actionCols.length} class="sv-lite-th-act">Actions (THEN)</th>
+        </tr>
+        <tr>
+          {#each conditionCols as col (col.key)}
+            <th class="sv-lite-th-sub">{col.label}</th>
+          {/each}
+          {#each actionCols as col (col.key)}
+            <th class="sv-lite-th-sub">{col.label}</th>
+          {/each}
+        </tr>
+      </thead>
+      <tbody>
+        {#each rules as rule, idx (rule.id)}
+          <tr>
+            <td class="sv-lite-td-idx">{idx + 1}</td>
+            {#each conditionCols as col (col.key)}
+              <td>
+                <input
+                  type="text"
+                  name={`rule_${rule.id}_${col.key}`}
+                  value={rule.values[col.key] ?? ''}
+                  class="sv-lite-rule-input"
+                />
+              </td>
+            {/each}
+            {#each actionCols as col (col.key)}
+              <td>
+                <input
+                  type="text"
+                  name={`rule_${rule.id}_${col.key}`}
+                  value={rule.values[col.key] ?? ''}
+                  class="sv-lite-rule-input sv-lite-act-input"
+                />
+              </td>
+            {/each}
+          </tr>
+        {/each}
+      </tbody>
+    </table>
+
+    {#if formAction}
+      <div class="sv-lite-decision-actions">
+        <button type="submit" class="sv-lite-save-btn">Save Rules</button>
+      </div>
+    {/if}
+  </form>
+</div>
+
+<style>
+  .sv-lite-decision-container {
+    display: block;
+    border: 1px solid #e2e8f0;
+    border-radius: 6px;
+    padding: 12px;
+    background-color: #ffffff;
+    font-size: 12px;
+    overflow-x: auto;
+  }
+  .sv-lite-decision-header {
+    margin-bottom: 10px;
+    font-size: 13px;
+    color: #0f172a;
+  }
+  .sv-lite-hit-policy {
+    font-size: 10px;
+    color: #64748b;
+    margin-left: 6px;
+  }
+  .sv-lite-decision-table {
+    width: 100%;
+    border-collapse: collapse;
+    font-family: monospace;
+  }
+  .sv-lite-decision-table th, .sv-lite-decision-table td {
+    border: 1px solid #cbd5e1;
+    padding: 4px 6px;
+  }
+  .sv-lite-th-idx, .sv-lite-td-idx {
+    background-color: #f1f5f9;
+    text-align: center;
+    width: 28px;
+    font-size: 10px;
+  }
+  .sv-lite-th-cond {
+    background-color: #e0e7ff;
+    color: #3730a3;
+    text-align: center;
+    font-weight: bold;
+  }
+  .sv-lite-th-act {
+    background-color: #dcfce7;
+    color: #166534;
+    text-align: center;
+    font-weight: bold;
+  }
+  .sv-lite-th-sub {
+    background-color: #f8fafc;
+    color: #475569;
+    font-weight: 600;
+  }
+  .sv-lite-rule-input {
+    width: 100%;
+    border: 1px solid #cbd5e1;
+    padding: 3px;
+    font-size: 11px;
+    box-sizing: border-box;
+  }
+  .sv-lite-act-input {
+    font-weight: bold;
+    color: #4338ca;
+  }
+  .sv-lite-decision-actions {
+    margin-top: 10px;
+    text-align: right;
+  }
+  .sv-lite-save-btn {
+    padding: 5px 12px;
+    background-color: #4f46e5;
+    color: #ffffff;
+    border: none;
+    border-radius: 3px;
+    font-size: 11px;
+    cursor: pointer;
+  }
+</style>

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

@@ -0,0 +1,21 @@
+export interface DecisionColumn {
+    key: string;
+    label: string;
+    type: 'condition' | 'action';
+}
+export interface DecisionRule {
+    id: string;
+    description?: string;
+    values: Record<string, string>;
+}
+interface Props {
+    title?: string;
+    columns?: DecisionColumn[];
+    rules?: DecisionRule[];
+    hitPolicy?: string;
+    formAction?: string;
+    class?: string;
+}
+declare const LiteDecisionTable: import("svelte").Component<Props, {}, "">;
+type LiteDecisionTable = ReturnType<typeof LiteDecisionTable>;
+export default LiteDecisionTable;

package/dist/components/LiteDraggableRowTable.svelte

@@ -0,0 +1,70 @@
+<script lang="ts">
+  interface LiteDraggableColumn {
+    key: string;
+    label: string;
+  }
+
+  interface Props {
+    columns: LiteDraggableColumn[];
+    items?: Record<string, unknown>[];
+    action?: string;
+    method?: 'get' | 'post' | 'dialog' | 'GET' | 'POST' | 'DIALOG' | null;
+    rowKey?: string;
+  }
+
+  let {
+    columns,
+    items = [],
+    action = '',
+    method = 'POST',
+    rowKey = 'id',
+  }: Props = $props();
+</script>
+
+<div class="lite-sortable-table-card">
+  <form {action} {method}>
+    <table class="lite-table">
+      <thead>
+        <tr>
+          <th style="width: 70px;">Order</th>
+          {#each columns as col (col.key)}
+            <th>{col.label}</th>
+          {/each}
+        </tr>
+      </thead>
+      <tbody>
+        {#each items as item, index (item[rowKey] ?? index)}
+          <tr>
+            <td>
+              <input type="number" name="order_{item[rowKey] ?? index}" value={index + 1} class="lite-input" style="width: 55px;" />
+            </td>
+            {#each columns as col (col.key)}
+              <td>{item[col.key] ?? '—'}</td>
+            {/each}
+          </tr>
+        {/each}
+      </tbody>
+    </table>
+
+    <div class="lite-sortable-actions">
+      <button type="submit" class="lite-btn lite-btn-primary lite-btn-sm">
+        Update Order
+      </button>
+    </div>
+  </form>
+</div>
+
+<style>
+  .lite-sortable-table-card {
+    background: #ffffff;
+    border: 1px solid #cbd5e1;
+    border-radius: 6px;
+    padding: 12px;
+    margin-bottom: 16px;
+  }
+  .lite-sortable-actions {
+    margin-top: 12px;
+    display: flex;
+    justify-content: flex-end;
+  }
+</style>

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

@@ -0,0 +1,14 @@
+interface LiteDraggableColumn {
+    key: string;
+    label: string;
+}
+interface Props {
+    columns: LiteDraggableColumn[];
+    items?: Record<string, unknown>[];
+    action?: string;
+    method?: 'get' | 'post' | 'dialog' | 'GET' | 'POST' | 'DIALOG' | null;
+    rowKey?: string;
+}
+declare const LiteDraggableRowTable: import("svelte").Component<Props, {}, "">;
+type LiteDraggableRowTable = ReturnType<typeof LiteDraggableRowTable>;
+export default LiteDraggableRowTable;

package/dist/components/LiteDrawerForm.svelte

@@ -0,0 +1,85 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    title: string;
+    description?: string;
+    action?: string;
+    method?: "get" | "post" | "dialog" | "GET" | "POST" | "DIALOG" | null;
+    submitText?: string;
+    cancelText?: string;
+    children?: Snippet;
+  }
+
+  let {
+    title,
+    description,
+    action = '',
+    method = 'POST',
+    submitText = 'Save',
+    cancelText = 'Cancel',
+    children,
+  }: Props = $props();
+</script>
+
+<div class="lite-drawer-card">
+  <div class="lite-drawer-header">
+    <h3 class="lite-drawer-title">{title}</h3>
+    {#if description}
+      <p class="lite-drawer-desc">{description}</p>
+    {/if}
+  </div>
+
+  <form {action} {method} class="lite-drawer-form">
+    <div class="lite-drawer-body">
+      {#if children}
+        {@render children()}
+      {/if}
+    </div>
+
+    <div class="lite-drawer-footer">
+      <button type="button" class="lite-btn lite-btn-outline lite-btn-sm" onclick={() => history.back()}>
+        {cancelText}
+      </button>
+      <button type="submit" class="lite-btn lite-btn-primary lite-btn-sm" style="margin-left: 8px;">
+        {submitText}
+      </button>
+    </div>
+  </form>
+</div>
+
+<style>
+  .lite-drawer-card {
+    padding: 16px;
+    background: #f8fafc;
+    border: 1px solid #cbd5e1;
+    border-left: 4px solid #3b82f6;
+    border-radius: 4px;
+    margin-bottom: 16px;
+  }
+  .lite-drawer-header {
+    padding-bottom: 10px;
+    border-bottom: 1px solid #e2e8f0;
+    margin-bottom: 12px;
+  }
+  .lite-drawer-title {
+    margin: 0;
+    font-size: 14px;
+    color: #1e293b;
+  }
+  .lite-drawer-desc {
+    margin: 4px 0 0 0;
+    font-size: 12px;
+    color: #64748b;
+  }
+  .lite-drawer-body {
+    margin-bottom: 16px;
+    font-size: 13px;
+  }
+  .lite-drawer-footer {
+    display: flex;
+    justify-content: flex-end;
+    padding-top: 12px;
+    border-top: 1px solid #e2e8f0;
+  }
+</style>

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

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    title: string;
+    description?: string;
+    action?: string;
+    method?: "get" | "post" | "dialog" | "GET" | "POST" | "DIALOG" | null;
+    submitText?: string;
+    cancelText?: string;
+    children?: Snippet;
+}
+declare const LiteDrawerForm: import("svelte").Component<Props, {}, "">;
+type LiteDrawerForm = ReturnType<typeof LiteDrawerForm>;
+export default LiteDrawerForm;

package/dist/components/LiteDynamicFormList.svelte

@@ -0,0 +1,169 @@
+<script lang="ts" generics="T = Record<string, unknown>">
+  import type { Snippet } from 'svelte';
+  import { t } from '@svadmin/core/i18n';
+
+  interface Props {
+    items?: T[];
+    name?: string;
+    label?: string;
+    description?: string;
+    addButtonLabel?: string;
+    minItems?: number;
+    maxItems?: number;
+    defaultItem?: T | (() => T);
+    disabled?: boolean;
+    emptyText?: string;
+    children?: Snippet<[{
+      item: T;
+      index: number;
+      isFirst: boolean;
+      isLast: boolean;
+    }]>;
+    headerExtra?: Snippet<[{ count: number }]>;
+  }
+
+  let {
+    items = [],
+    name = 'items',
+    label,
+    description,
+    addButtonLabel = '+ Add Item',
+    minItems = 0,
+    maxItems = Infinity,
+    disabled = false,
+    emptyText = 'No items yet',
+    children,
+    headerExtra,
+  }: Props = $props();
+
+  const renderedItems = $derived(items.length > 0 ? items : (minItems > 0 ? Array(minItems).fill({}) as T[] : []));
+</script>
+
+<div class="lite-dynamic-form-list lite-form-group">
+  <div class="lite-dynamic-header">
+    <div>
+      {#if label}
+        <span class="lite-label">{label}</span>
+      {/if}
+      {#if description}
+        <p class="lite-help-text">{description}</p>
+      {/if}
+    </div>
+    <div class="lite-dynamic-actions">
+      {#if headerExtra}
+        {@render headerExtra({ count: renderedItems.length })}
+      {/if}
+      <span class="lite-badge">{renderedItems.length} {t('common.items') || 'items'}</span>
+    </div>
+  </div>
+
+  {#if renderedItems.length === 0}
+    <div class="lite-empty-box">
+      <p>{emptyText}</p>
+    </div>
+  {:else}
+    <div class="lite-dynamic-items">
+      {#each renderedItems as item, idx (idx)}
+        <div class="lite-dynamic-item-card">
+          <div class="lite-dynamic-item-header">
+            <span class="lite-badge lite-badge-indigo">#{idx + 1}</span>
+            <div class="lite-dynamic-item-tools">
+              {#if idx > 0}
+                <button type="submit" name="_action" value="move_up_{name}_{idx}" class="lite-btn lite-btn-sm" {disabled} title="Move Up">↑</button>
+              {/if}
+              {#if idx < renderedItems.length - 1}
+                <button type="submit" name="_action" value="move_down_{name}_{idx}" class="lite-btn lite-btn-sm" {disabled} title="Move Down">↓</button>
+              {/if}
+              {#if renderedItems.length > minItems}
+                <button type="submit" name="_action" value="remove_{name}_{idx}" class="lite-btn lite-btn-sm lite-btn-danger" {disabled} title="Remove">✕</button>
+              {/if}
+            </div>
+          </div>
+          <div class="lite-dynamic-item-body">
+            {#if children}
+              {@render children({
+                item,
+                index: idx,
+                isFirst: idx === 0,
+                isLast: idx === renderedItems.length - 1,
+              })}
+            {:else}
+              <div class="lite-form-row">
+                {#each Object.entries((item as Record<string, unknown>) ?? {}) as [k, v] (k)}
+                  <div class="lite-form-group" style="flex: 1; min-width: 140px;">
+                    <label class="lite-label" for="{name}_{idx}_{k}">{k}</label>
+                    <input
+                      type="text"
+                      id="{name}_{idx}_{k}"
+                      name="{name}[{idx}][{k}]"
+                      value={String(v ?? '')}
+                      class="lite-input"
+                      {disabled}
+                    />
+                  </div>
+                {/each}
+              </div>
+            {/if}
+          </div>
+        </div>
+      {/each}
+    </div>
+  {/if}
+
+  {#if renderedItems.length < maxItems && !disabled}
+    <div style="margin-top: 10px;">
+      <button type="submit" name="_action" value="add_{name}" class="lite-btn">
+        {addButtonLabel}
+      </button>
+    </div>
+  {/if}
+</div>
+
+<style>
+  .lite-dynamic-form-list {
+    border: 1px solid #e2e8f0;
+    border-radius: 6px;
+    padding: 14px;
+    background-color: #fafafa;
+    margin-bottom: 16px;
+  }
+  .lite-dynamic-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 12px;
+  }
+  .lite-dynamic-items {
+    display: flex;
+    flex-direction: column;
+  }
+  .lite-dynamic-item-card {
+    background: #ffffff;
+    border: 1px solid #e2e8f0;
+    border-radius: 4px;
+    padding: 12px;
+    margin-bottom: 10px;
+  }
+  .lite-dynamic-item-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 8px;
+    border-bottom: 1px dashed #e2e8f0;
+    padding-bottom: 6px;
+  }
+  .lite-dynamic-item-tools {
+    display: flex;
+  }
+  .lite-dynamic-item-tools button {
+    margin-left: 4px;
+  }
+  .lite-empty-box {
+    text-align: center;
+    padding: 24px 12px;
+    color: #64748b;
+    background: #ffffff;
+    border: 1px dashed #cbd5e1;
+    border-radius: 4px;
+  }
+</style>

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

@@ -0,0 +1,45 @@
+import type { Snippet } from 'svelte';
+declare function $$render<T = Record<string, unknown>>(): {
+    props: {
+        items?: T[];
+        name?: string;
+        label?: string;
+        description?: string;
+        addButtonLabel?: string;
+        minItems?: number;
+        maxItems?: number;
+        defaultItem?: T | (() => T);
+        disabled?: boolean;
+        emptyText?: string;
+        children?: Snippet<[{
+            item: T;
+            index: number;
+            isFirst: boolean;
+            isLast: boolean;
+        }]>;
+        headerExtra?: Snippet<[{
+            count: number;
+        }]>;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T = Record<string, unknown>> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T = Record<string, unknown>>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T = Record<string, unknown>>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const LiteDynamicFormList: $$IsomorphicComponent;
+type LiteDynamicFormList<T = Record<string, unknown>> = InstanceType<typeof LiteDynamicFormList<T>>;
+export default LiteDynamicFormList;

package/dist/components/LiteEditableTable.svelte

@@ -0,0 +1,84 @@
+<script lang="ts">
+  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;
+  }
+
+  let {
+    columns,
+    data = [],
+    action = '',
+    method = 'POST',
+    rowKey = 'id',
+  }: Props = $props();
+</script>
+
+<div class="lite-editable-table-card">
+  <form {action} {method}>
+    <table class="lite-table">
+      <thead>
+        <tr>
+          {#each columns as col (col.key)}
+            <th>{col.label}</th>
+          {/each}
+        </tr>
+      </thead>
+      <tbody>
+        {#each data as row, rowIndex (row[rowKey] ?? rowIndex)}
+          <tr>
+            {#each columns as col (col.key)}
+              <td>
+                {#if col.type === 'select' && col.options}
+                  <select name="{col.key}_{rowIndex}" class="lite-select">
+                    {#each col.options as opt (opt.value)}
+                      <option value={String(opt.value)} selected={String(row[col.key]) === String(opt.value)}>
+                        {opt.label}
+                      </option>
+                    {/each}
+                  </select>
+                {:else if col.type === 'boolean'}
+                  <input type="checkbox" name="{col.key}_{rowIndex}" checked={Boolean(row[col.key])} />
+                {:else if col.type === 'number'}
+                  <input type="number" name="{col.key}_{rowIndex}" value={Number(row[col.key] ?? 0)} class="lite-input" />
+                {:else}
+                  <input type="text" name="{col.key}_{rowIndex}" value={String(row[col.key] ?? '')} class="lite-input" />
+                {/if}
+              </td>
+            {/each}
+          </tr>
+        {/each}
+      </tbody>
+    </table>
+
+    <div class="lite-editable-actions">
+      <button type="submit" class="lite-btn lite-btn-primary lite-btn-sm">
+        Save All Changes
+      </button>
+    </div>
+  </form>
+</div>
+
+<style>
+  .lite-editable-table-card {
+    background: #ffffff;
+    border: 1px solid #cbd5e1;
+    border-radius: 6px;
+    padding: 12px;
+    margin-bottom: 16px;
+  }
+  .lite-editable-actions {
+    margin-top: 12px;
+    display: flex;
+    justify-content: flex-end;
+  }
+</style>