@svadmin/lite 0.7.0 → 0.8.0

package/dist/components/LiteActivityFeed.svelte

@@ -0,0 +1,98 @@
+<script lang="ts">
+  interface LiteActivityItem {
+    id: string;
+    user?: { name: string };
+    action: string;
+    target?: string;
+    timestamp: string;
+    comment?: string;
+    status?: 'info' | 'success' | 'warning' | 'destructive';
+  }
+
+  interface Props {
+    activities?: LiteActivityItem[];
+    action?: string;
+    method?: 'get' | 'post' | 'dialog' | 'GET' | 'POST' | 'DIALOG' | null;
+  }
+
+  let {
+    activities = [],
+    action = '',
+    method = 'POST',
+  }: Props = $props();
+</script>
+
+<div class="lite-activity-card">
+  <div class="lite-activity-header">
+    <strong>Activity & Timeline Stream</strong>
+  </div>
+
+  <ul class="lite-activity-list">
+    {#each activities as act (act.id)}
+      <li class="lite-activity-item">
+        <div class="lite-activity-title">
+          <strong>{act.user?.name ?? 'System'}</strong> {act.action}
+          {#if act.target}<strong>{act.target}</strong>{/if}
+          <span class="lite-activity-time">{act.timestamp}</span>
+        </div>
+        {#if act.comment}
+          <div class="lite-activity-comment">
+            {act.comment}
+          </div>
+        {/if}
+      </li>
+    {/each}
+  </ul>
+
+  <!-- Comment Form -->
+  <form {action} {method} class="lite-activity-form">
+    <div style="margin-bottom: 8px;">
+      <label for="lite_act_comment" class="lite-label">Add Note / Comment:</label>
+      <textarea id="lite_act_comment" name="comment" class="lite-textarea" style="height: 50px;" placeholder="Write a comment..."></textarea>
+    </div>
+    <div style="text-align: right;">
+      <button type="submit" class="lite-btn lite-btn-primary lite-btn-sm">
+        Post Comment
+      </button>
+    </div>
+  </form>
+</div>
+
+<style>
+  .lite-activity-card {
+    background: #ffffff;
+    border: 1px solid #cbd5e1;
+    border-radius: 6px;
+    padding: 16px;
+    margin-bottom: 16px;
+  }
+  .lite-activity-header {
+    padding-bottom: 8px;
+    border-bottom: 1px solid #e2e8f0;
+    margin-bottom: 12px;
+    font-size: 13px;
+  }
+  .lite-activity-list {
+    list-style: none;
+    padding: 0;
+    margin: 0 0 16px 0;
+  }
+  .lite-activity-item {
+    padding: 8px 0;
+    border-bottom: 1px solid #f1f5f9;
+    font-size: 12px;
+  }
+  .lite-activity-time {
+    color: #94a3b8;
+    margin-left: 8px;
+    font-size: 11px;
+  }
+  .lite-activity-comment {
+    background: #f8fafc;
+    border: 1px solid #e2e8f0;
+    padding: 6px 10px;
+    border-radius: 4px;
+    margin-top: 4px;
+    color: #475569;
+  }
+</style>

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

@@ -0,0 +1,19 @@
+interface LiteActivityItem {
+    id: string;
+    user?: {
+        name: string;
+    };
+    action: string;
+    target?: string;
+    timestamp: string;
+    comment?: string;
+    status?: 'info' | 'success' | 'warning' | 'destructive';
+}
+interface Props {
+    activities?: LiteActivityItem[];
+    action?: string;
+    method?: 'get' | 'post' | 'dialog' | 'GET' | 'POST' | 'DIALOG' | null;
+}
+declare const LiteActivityFeed: import("svelte").Component<Props, {}, "">;
+type LiteActivityFeed = ReturnType<typeof LiteActivityFeed>;
+export default LiteActivityFeed;

package/dist/components/LiteApprovalActionCard.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    title?: string;
+    status?: 'pending' | 'approved' | 'rejected' | 'recalled';
+    action?: string;
+    children?: Snippet;
+  }
+
+  let {
+    title = 'Approval Request',
+    status = 'pending',
+    action = '',
+    children,
+  }: Props = $props();
+</script>
+
+<div class="lite-approval-card lite-form-group">
+  <div class="lite-approval-header">
+    <strong>{title}</strong>
+    <span class="lite-badge lite-badge-{status}">{status.toUpperCase()}</span>
+  </div>
+
+  {#if children}
+    <div class="lite-approval-body">
+      {@render children()}
+    </div>
+  {/if}
+
+  {#if status === 'pending'}
+    <form {action} method="POST" class="lite-approval-form">
+      <div class="lite-approval-field">
+        <label for="approval_comment" class="lite-label">Approval / Rejection Comment:</label>
+        <textarea id="approval_comment" name="comment" class="lite-textarea" style="height: 60px;" placeholder="Optional comment or rejection reason..."></textarea>
+      </div>
+      <div class="lite-approval-actions">
+        <button type="submit" name="_action" value="approve" class="lite-btn lite-btn-sm lite-btn-success">
+          ✔ Approve
+        </button>
+        <button type="submit" name="_action" value="reject" class="lite-btn lite-btn-sm lite-btn-danger" style="margin-left: 8px;">
+          ✕ Reject
+        </button>
+      </div>
+    </form>
+  {/if}
+</div>
+
+<style>
+  .lite-approval-card {
+    padding: 12px;
+    background: #f8fafc;
+    border: 1px solid #cbd5e1;
+    border-radius: 6px;
+    margin-bottom: 16px;
+  }
+  .lite-approval-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 8px;
+    font-size: 13px;
+  }
+  .lite-approval-body {
+    font-size: 12px;
+    color: #475569;
+    margin-bottom: 12px;
+  }
+  .lite-approval-field {
+    margin-bottom: 8px;
+  }
+  .lite-approval-actions {
+    display: flex;
+  }
+</style>

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

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    title?: string;
+    status?: 'pending' | 'approved' | 'rejected' | 'recalled';
+    action?: string;
+    children?: Snippet;
+}
+declare const LiteApprovalActionCard: import("svelte").Component<Props, {}, "">;
+type LiteApprovalActionCard = ReturnType<typeof LiteApprovalActionCard>;
+export default LiteApprovalActionCard;

package/dist/components/LiteCanvasAnnotation.svelte

@@ -0,0 +1,136 @@
+<script lang="ts">
+  export interface AnnotationItem {
+    id: string;
+    type: string;
+    text?: string;
+    color?: string;
+  }
+
+  interface Props {
+    imageUrl?: string;
+    annotations?: AnnotationItem[];
+    title?: string;
+    formAction?: string;
+    class?: string;
+  }
+
+  let {
+    imageUrl = '',
+    annotations = [],
+    title = 'Image Annotation & Markings',
+    formAction = '',
+    class: className = '',
+  }: Props = $props();
+</script>
+
+<div class="sv-lite-annotation-box {className}">
+  <div class="sv-lite-anno-header">
+    <strong>{title}</strong>
+    <span class="sv-lite-anno-count">({annotations.length} markers)</span>
+  </div>
+
+  {#if imageUrl}
+    <div class="sv-lite-anno-preview">
+      <img src={imageUrl} alt="Annotation Target" class="sv-lite-anno-img" />
+    </div>
+  {/if}
+
+  {#if annotations.length > 0}
+    <div class="sv-lite-anno-list">
+      <div class="sv-lite-list-title">Annotations:</div>
+      {#each annotations as anno (anno.id)}
+        <div class="sv-lite-anno-item">
+          <span class="sv-lite-anno-badge">{anno.type}</span>
+          <span class="sv-lite-anno-text">{anno.text ?? 'Defect / Mark'}</span>
+        </div>
+      {/each}
+    </div>
+  {/if}
+
+  {#if formAction}
+    <div class="sv-lite-anno-upload">
+      <form method="POST" action={formAction} enctype="multipart/form-data">
+        <input type="file" name="annotatedImage" accept="image/*" class="sv-lite-file-input" />
+        <button type="submit" class="sv-lite-upload-btn">Upload Markup</button>
+      </form>
+    </div>
+  {/if}
+</div>
+
+<style>
+  .sv-lite-annotation-box {
+    display: block;
+    border: 1px solid #e2e8f0;
+    border-radius: 6px;
+    padding: 12px;
+    background-color: #ffffff;
+    font-size: 12px;
+  }
+  .sv-lite-anno-header {
+    margin-bottom: 10px;
+    font-size: 13px;
+    color: #0f172a;
+  }
+  .sv-lite-anno-count {
+    color: #64748b;
+    font-size: 11px;
+    margin-left: 6px;
+  }
+  .sv-lite-anno-preview {
+    text-align: center;
+    background-color: #f8fafc;
+    border: 1px solid #cbd5e1;
+    border-radius: 4px;
+    padding: 8px;
+    margin-bottom: 10px;
+  }
+  .sv-lite-anno-img {
+    max-width: 100%;
+    max-height: 240px;
+    vertical-align: middle;
+  }
+  .sv-lite-anno-list {
+    margin-bottom: 10px;
+    padding: 8px;
+    background-color: #f8fafc;
+    border-radius: 4px;
+  }
+  .sv-lite-list-title {
+    font-weight: 600;
+    color: #475569;
+    margin-bottom: 6px;
+  }
+  .sv-lite-anno-item {
+    margin-bottom: 4px;
+  }
+  .sv-lite-anno-badge {
+    display: inline-block;
+    padding: 1px 5px;
+    background-color: #fee2e2;
+    color: #991b1b;
+    border-radius: 3px;
+    font-size: 10px;
+    text-transform: uppercase;
+    margin-right: 6px;
+  }
+  .sv-lite-anno-text {
+    color: #334155;
+  }
+  .sv-lite-anno-upload {
+    padding-top: 8px;
+    border-top: 1px solid #e2e8f0;
+  }
+  .sv-lite-file-input {
+    font-size: 11px;
+    margin-right: 8px;
+  }
+  .sv-lite-upload-btn {
+    padding: 4px 10px;
+    font-size: 11px;
+    background-color: #4f46e5;
+    color: #ffffff;
+    border: none;
+    border-radius: 3px;
+    cursor: pointer;
+  }
+</style>

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

@@ -0,0 +1,16 @@
+export interface AnnotationItem {
+    id: string;
+    type: string;
+    text?: string;
+    color?: string;
+}
+interface Props {
+    imageUrl?: string;
+    annotations?: AnnotationItem[];
+    title?: string;
+    formAction?: string;
+    class?: string;
+}
+declare const LiteCanvasAnnotation: import("svelte").Component<Props, {}, "">;
+type LiteCanvasAnnotation = ReturnType<typeof LiteCanvasAnnotation>;
+export default LiteCanvasAnnotation;

package/dist/components/LiteColumnHeaderFilter.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+  import type { FieldDefinition } from '@svadmin/core';
+
+  interface Props {
+    field: FieldDefinition;
+    action?: string;
+  }
+
+  let {
+    field,
+    action = '',
+  }: Props = $props();
+</script>
+
+<span class="lite-column-header-filter">
+  <a
+    href="{action}?filter_field={field.key}"
+    class="lite-filter-icon"
+    title="Filter by {field.label}"
+  >
+    🔍
+  </a>
+</span>
+
+<style>
+  .lite-column-header-filter {
+    display: inline-block;
+    margin-left: 4px;
+  }
+  .lite-filter-icon {
+    font-size: 11px;
+    text-decoration: none;
+    opacity: 0.6;
+  }
+  .lite-filter-icon:hover {
+    opacity: 1;
+  }
+</style>

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

@@ -0,0 +1,8 @@
+import type { FieldDefinition } from '@svadmin/core';
+interface Props {
+    field: FieldDefinition;
+    action?: string;
+}
+declare const LiteColumnHeaderFilter: import("svelte").Component<Props, {}, "">;
+type LiteColumnHeaderFilter = ReturnType<typeof LiteColumnHeaderFilter>;
+export default LiteColumnHeaderFilter;

package/dist/components/LiteColumnSettings.svelte

@@ -0,0 +1,82 @@
+<script lang="ts">
+  export interface LiteColumnOption {
+    key: string;
+    label: string;
+    visible: boolean;
+  }
+
+  interface Props {
+    columns: LiteColumnOption[];
+    action?: string;
+    method?: 'GET' | 'POST' | 'get' | 'post';
+    title?: string;
+    submitText?: string;
+  }
+
+  let {
+    columns = [],
+    action = '',
+    method = 'GET',
+    title = 'Column Visibility',
+    submitText = 'Apply',
+  }: Props = $props();
+</script>
+
+<div class="lite-column-settings lite-form-group">
+  <div class="lite-column-settings-title">
+    <strong>⚙ {title}</strong>
+  </div>
+  <form {action} {method} class="lite-column-settings-form">
+    <div class="lite-column-options">
+      {#each columns as col (col.key)}
+        <label class="lite-column-option">
+          <input
+            type="checkbox"
+            name="columns"
+            value={col.key}
+            checked={col.visible}
+          />
+          <span>{col.label}</span>
+        </label>
+      {/each}
+    </div>
+    <div class="lite-column-actions">
+      <button type="submit" class="lite-btn lite-btn-sm lite-btn-primary">
+        {submitText}
+      </button>
+    </div>
+  </form>
+</div>
+
+<style>
+  .lite-column-settings {
+    margin-bottom: 12px;
+    padding: 8px 12px;
+    background: #f8fafc;
+    border: 1px solid #cbd5e1;
+    border-radius: 4px;
+  }
+  .lite-column-settings-title {
+    font-size: 12px;
+    color: #475569;
+    margin-bottom: 6px;
+  }
+  .lite-column-options {
+    display: flex;
+    flex-wrap: wrap;
+  }
+  .lite-column-option {
+    display: inline-flex;
+    align-items: center;
+    margin-right: 12px;
+    margin-bottom: 4px;
+    font-size: 12px;
+    cursor: pointer;
+  }
+  .lite-column-option input {
+    margin-right: 4px;
+  }
+  .lite-column-actions {
+    margin-top: 6px;
+  }
+</style>

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

@@ -0,0 +1,15 @@
+export interface LiteColumnOption {
+    key: string;
+    label: string;
+    visible: boolean;
+}
+interface Props {
+    columns: LiteColumnOption[];
+    action?: string;
+    method?: 'GET' | 'POST' | 'get' | 'post';
+    title?: string;
+    submitText?: string;
+}
+declare const LiteColumnSettings: import("svelte").Component<Props, {}, "">;
+type LiteColumnSettings = ReturnType<typeof LiteColumnSettings>;
+export default LiteColumnSettings;

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;