@svadmin/lite 0.6.0 → 0.8.0

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;

package/dist/components/LiteMediaLibraryModal.svelte

@@ -0,0 +1,110 @@
+<script lang="ts">
+  interface LiteMediaItem {
+    id: string;
+    name: string;
+    url: string;
+    size?: string;
+    category?: string;
+  }
+
+  interface Props {
+    title?: string;
+    multiple?: boolean;
+    mediaItems?: LiteMediaItem[];
+    action?: string;
+    method?: 'get' | 'post' | 'dialog' | 'GET' | 'POST' | 'DIALOG' | null;
+  }
+
+  let {
+    title = 'Media Library',
+    multiple = false,
+    mediaItems = [],
+    action = '',
+    method = 'POST',
+  }: Props = $props();
+</script>
+
+<div class="lite-media-library-card">
+  <div class="lite-media-header">
+    <strong>{title}</strong>
+  </div>
+
+  <form {action} {method} enctype="multipart/form-data">
+    <!-- Upload Section -->
+    <div class="lite-media-upload-row">
+      <label for="media_upload_input" class="lite-label">Upload New Media:</label>
+      <input id="media_upload_input" type="file" name="files" multiple={multiple} class="lite-file-input" />
+      <button type="submit" name="_media_action" value="upload" class="lite-btn lite-btn-sm lite-btn-outline" style="margin-left: 8px;">
+        Upload File
+      </button>
+    </div>
+
+    <!-- Media Table List -->
+    <table class="lite-table">
+      <thead>
+        <tr>
+          <th style="width: 40px;">Select</th>
+          <th>File Name</th>
+          <th>Category</th>
+          <th>Size</th>
+          <th>Preview</th>
+        </tr>
+      </thead>
+      <tbody>
+        {#each mediaItems as item (item.id)}
+          <tr>
+            <td style="text-align: center;">
+              {#if multiple}
+                <input type="checkbox" name="selectedUrls" value={item.url} />
+              {:else}
+                <input type="radio" name="selectedUrls" value={item.url} />
+              {/if}
+            </td>
+            <td><strong>{item.name}</strong></td>
+            <td>{item.category ?? 'General'}</td>
+            <td>{item.size ?? '—'}</td>
+            <td><a href={item.url} target="_blank" rel="noreferrer" class="lite-link">View</a></td>
+          </tr>
+        {/each}
+        {#if mediaItems.length === 0}
+          <tr>
+            <td colspan="5" style="text-align: center; color: #94a3b8; padding: 24px;">No media files available</td>
+          </tr>
+        {/if}
+      </tbody>
+    </table>
+
+    <div class="lite-media-footer">
+      <button type="submit" name="_media_action" value="select" class="lite-btn lite-btn-primary lite-btn-sm">
+        Confirm Selection
+      </button>
+    </div>
+  </form>
+</div>
+
+<style>
+  .lite-media-library-card {
+    background: #ffffff;
+    border: 1px solid #cbd5e1;
+    border-radius: 6px;
+    padding: 16px;
+    margin-bottom: 16px;
+  }
+  .lite-media-header {
+    padding-bottom: 10px;
+    border-bottom: 1px solid #e2e8f0;
+    margin-bottom: 12px;
+    font-size: 14px;
+  }
+  .lite-media-upload-row {
+    margin-bottom: 12px;
+    padding: 8px;
+    background: #f8fafc;
+    border-radius: 4px;
+  }
+  .lite-media-footer {
+    margin-top: 12px;
+    display: flex;
+    justify-content: flex-end;
+  }
+</style>

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

@@ -0,0 +1,17 @@
+interface LiteMediaItem {
+    id: string;
+    name: string;
+    url: string;
+    size?: string;
+    category?: string;
+}
+interface Props {
+    title?: string;
+    multiple?: boolean;
+    mediaItems?: LiteMediaItem[];
+    action?: string;
+    method?: 'get' | 'post' | 'dialog' | 'GET' | 'POST' | 'DIALOG' | null;
+}
+declare const LiteMediaLibraryModal: import("svelte").Component<Props, {}, "">;
+type LiteMediaLibraryModal = ReturnType<typeof LiteMediaLibraryModal>;
+export default LiteMediaLibraryModal;

package/dist/components/LiteMentionsInput.svelte

@@ -0,0 +1,98 @@
+<script lang="ts">
+  export interface MentionOption {
+    id: string;
+    label: string;
+    type?: 'user' | 'tag' | 'entity';
+    subtitle?: string;
+  }
+
+  interface Props {
+    name?: string;
+    value?: string;
+    placeholder?: string;
+    users?: MentionOption[];
+    tags?: MentionOption[];
+    rows?: number;
+    disabled?: boolean;
+    class?: string;
+  }
+
+  let {
+    name = 'content',
+    value = '',
+    placeholder = 'Type @ or # to mention...',
+    users = [],
+    tags = [],
+    rows = 3,
+    disabled = false,
+    class: className = '',
+  }: Props = $props();
+</script>
+
+<div class="sv-lite-mentions {className}">
+  <textarea
+    {name}
+    {value}
+    {placeholder}
+    {rows}
+    {disabled}
+    class="sv-lite-textarea"
+  ></textarea>
+
+  {#if users.length > 0 || tags.length > 0}
+    <div class="sv-lite-mentions-hints">
+      <span class="sv-lite-hints-title">Quick Mentions:</span>
+      {#each users as u (u.id)}
+        <span class="sv-lite-mention-badge">@{u.label}</span>
+      {/each}
+      {#each tags as t (t.id)}
+        <span class="sv-lite-mention-badge sv-lite-tag">#{t.label}</span>
+      {/each}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .sv-lite-mentions {
+    display: block;
+    width: 100%;
+    font-size: 12px;
+  }
+  .sv-lite-textarea {
+    width: 100%;
+    padding: 8px;
+    border: 1px solid #cbd5e1;
+    border-radius: 4px;
+    font-size: 12px;
+    font-family: inherit;
+    box-sizing: border-box;
+    background-color: #ffffff;
+    color: #0f172a;
+  }
+  .sv-lite-mentions-hints {
+    margin-top: 6px;
+    padding: 4px 6px;
+    background-color: #f8fafc;
+    border: 1px solid #e2e8f0;
+    border-radius: 4px;
+  }
+  .sv-lite-hints-title {
+    font-weight: 600;
+    color: #64748b;
+    margin-right: 6px;
+  }
+  .sv-lite-mention-badge {
+    display: inline-block;
+    padding: 2px 6px;
+    margin-right: 4px;
+    margin-bottom: 2px;
+    background-color: #e0e7ff;
+    color: #4338ca;
+    border-radius: 3px;
+    font-size: 11px;
+  }
+  .sv-lite-tag {
+    background-color: #f1f5f9;
+    color: #475569;
+  }
+</style>

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

@@ -0,0 +1,19 @@
+export interface MentionOption {
+    id: string;
+    label: string;
+    type?: 'user' | 'tag' | 'entity';
+    subtitle?: string;
+}
+interface Props {
+    name?: string;
+    value?: string;
+    placeholder?: string;
+    users?: MentionOption[];
+    tags?: MentionOption[];
+    rows?: number;
+    disabled?: boolean;
+    class?: string;
+}
+declare const LiteMentionsInput: import("svelte").Component<Props, {}, "">;
+type LiteMentionsInput = ReturnType<typeof LiteMentionsInput>;
+export default LiteMentionsInput;