@svadmin/lite 0.3.3 → 0.3.5

package/src/components/LiteTable.svelte

@@ -1,132 +0,0 @@
-<script lang="ts">
-  /**
-   * LiteTable — Pure HTML table with <a> sort links.
-   * No JavaScript required — sorting and pagination are URL-driven.
-   */
-  import type { ResourceDefinition, FieldDefinition } from '@svadmin/core';
-  import { t } from '@svadmin/core/i18n';
-
-  interface Props {
-    records: Record<string, unknown>[];
-    resource: ResourceDefinition;
-    currentSort?: string;
-    currentOrder?: 'asc' | 'desc';
-    currentSearch?: string;
-    basePath?: string;
-    /** Show edit/delete action buttons */
-    canEdit?: boolean;
-    canDelete?: boolean;
-  }
-
-  let {
-    records,
-    resource,
-    currentSort,
-    currentOrder = 'asc',
-    currentSearch,
-    basePath = '/lite',
-    canEdit = true,
-    canDelete = true,
-  }: Props = $props();
-
-  let pk = $derived(resource.primaryKey ?? 'id');
-  const listFields = $derived(
-    resource.fields.filter(f => f.showInList !== false)
-  );
-
-  function sortUrl(field: FieldDefinition): string {
-    const newOrder = currentSort === field.key && currentOrder === 'asc' ? 'desc' : 'asc';
-    const params = new URLSearchParams({ sort: field.key, order: newOrder });
-    if (currentSearch) params.set('q', currentSearch);
-    return `?${params.toString()}`;
-  }
-
-  function sortIndicator(field: FieldDefinition): string {
-    if (currentSort !== field.key) return '⇅';
-    return currentOrder === 'asc' ? '↑' : '↓';
-  }
-
-  function formatValue(value: unknown, field: FieldDefinition): string {
-    if (value == null) return '—';
-    if (field.type === 'boolean') return '';  // handled in template
-    if (field.type === 'date') {
-      try { return new Date(value as string).toLocaleDateString(); } catch { return String(value); }
-    }
-    if (field.type === 'select' && field.options) {
-      const opt = field.options.find(o => o.value === value);
-      return opt?.label ?? String(value);
-    }
-    if (Array.isArray(value)) return value.join(', ');
-    return String(value);
-  }
-</script>
-
-<table class="lite-table">
-  <thead>
-    <tr>
-      {#each listFields as field}
-        <th>
-          {#if field.sortable !== false}
-            <a href={sortUrl(field)}>
-              {field.label}
-              <span class="sort-indicator">{sortIndicator(field)}</span>
-            </a>
-          {:else}
-            {field.label}
-          {/if}
-        </th>
-      {/each}
-      {#if canEdit || canDelete}
-        <th style="text-align:right;">{t('common.actions') || 'Actions'}</th>
-      {/if}
-    </tr>
-  </thead>
-  <tbody>
-    {#each records as record}
-      {@const id = record[pk]}
-      <tr>
-        {#each listFields as field}
-          <td>
-            {#if field.type === 'boolean'}
-              <span class="lite-bool {record[field.key] ? 'lite-bool-true' : ''}"></span>
-            {:else if field.type === 'tags' && Array.isArray(record[field.key])}
-              {#each (record[field.key] as string[]).slice(0, 3) as tag}
-                <span class="lite-badge">{tag}</span>
-              {/each}
-            {:else if field.type === 'select' && field.options}
-              <span class="lite-badge">{formatValue(record[field.key], field)}</span>
-            {:else}
-              {formatValue(record[field.key], field)}
-            {/if}
-          </td>
-        {/each}
-        {#if canEdit || canDelete}
-          <td class="actions">
-            {#if canEdit}
-              <a href={`${basePath}/${resource.name}/edit/${id}`} class="lite-btn lite-btn-sm">{t('common.edit') || 'Edit'}</a>
-            {/if}
-            {#if canDelete}
-              <!-- Delete uses <details> for no-JS confirmation -->
-              <details class="lite-confirm-details">
-                <summary class="lite-btn lite-btn-sm lite-btn-danger">{t('common.delete') || 'Delete'}</summary>
-                <div class="lite-confirm-panel">
-                  <p style="margin:0 0 8px;font-size:13px;">{t('common.areYouSure') || 'Are you sure?'}</p>
-                  <form method="POST" action="?/delete" style="display:inline;">
-                    <input type="hidden" name="id" value={String(id)} />
-                    <button type="submit" class="lite-btn lite-btn-sm lite-btn-danger">{t('common.confirm') || 'Confirm'}</button>
-                  </form>
-                </div>
-              </details>
-            {/if}
-          </td>
-        {/if}
-      </tr>
-    {:else}
-      <tr>
-        <td colspan={listFields.length + (canEdit || canDelete ? 1 : 0)} style="text-align:center;padding:40px;color:#9ca3af;">
-          {t('common.noData') || 'No records found.'}
-        </td>
-      </tr>
-    {/each}
-  </tbody>
-</table>

package/src/components/LiteTabs.svelte

@@ -1,57 +0,0 @@
-<script lang="ts">
-  /**
-   * LiteTabs — SSR-compatible tab navigation.
-   * Uses simple <a> tags and flexbox. No JS required.
-   */
-
-  interface TabItem {
-    label: string;
-    value: string;
-    href: string;
-  }
-
-  interface Props {
-    items: TabItem[];
-    activeValue: string;
-  }
-
-  let { items, activeValue }: Props = $props();
-</script>
-
-<div class="lite-tabs">
-  {#each items as item}
-    <a href={item.href} class="lite-tab {activeValue === item.value ? 'active' : ''}">
-      {item.label}
-    </a>
-  {/each}
-</div>
-
-<style>
-  .lite-tabs {
-    display: flex;
-    flex-wrap: wrap;
-    border-bottom: 2px solid #e2e8f0;
-    margin-bottom: 24px;
-    padding-bottom: 0;
-  }
-  .lite-tab {
-    padding: 8px 16px;
-    margin-right: 4px;
-    font-size: 14px;
-    font-weight: 500;
-    color: #64748b;
-    border-bottom: 2px solid transparent;
-    margin-bottom: -2px;
-    text-decoration: none;
-    transition: color 0.15s ease, border-color 0.15s ease;
-  }
-  .lite-tab:hover {
-    color: #0f172a;
-    text-decoration: none;
-  }
-  .lite-tab.active {
-    color: #4f46e5;
-    border-bottom-color: #4f46e5;
-    font-weight: 600;
-  }
-</style>

package/src/components/advanced/LiteAutoSaveIndicator.svelte

@@ -1,26 +0,0 @@
-<script lang="ts">
-  /**
-   * SSR AutoSaveIndicator — Degraded to a static status label.
-   * Without JS, there is no auto-save. This component simply renders
-   * the last known save status passed from the server.
-   */
-  interface Props {
-    status?: 'idle' | 'saved' | 'error';
-    message?: string;
-  }
-
-  let { status = 'idle', message }: Props = $props();
-
-  const statusConfig: Record<string, { icon: string; color: string; text: string }> = {
-    idle: { icon: '☁', color: '#64748b', text: 'All changes saved' },
-    saved: { icon: '✓', color: '#10b981', text: 'Saved' },
-    error: { icon: '✕', color: '#ef4444', text: 'Save failed' },
-  };
-
-  const cfg = $derived(statusConfig[status] ?? statusConfig.idle);
-</script>
-
-<span style="display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: {cfg.color};">
-  <span>{cfg.icon}</span>
-  <span>{message ?? cfg.text}</span>
-</span>

package/src/components/advanced/LiteDraggableHeader.svelte

@@ -1,33 +0,0 @@
-<script lang="ts">
-  /**
-   * SSR DraggableHeader — Degraded to a static table header.
-   * Column dragging/resizing requires JS mouse/touch events.
-   * In lite mode, columns are rendered at natural widths.
-   * Sort is achieved via URL query parameters as in LiteTable.
-   */
-  import type { FieldDefinition } from '@svadmin/core';
-
-  interface Props {
-    fields: FieldDefinition[];
-    currentSort?: string;
-    currentOrder?: 'asc' | 'desc';
-  }
-
-  let { fields, currentSort, currentOrder = 'asc' }: Props = $props();
-</script>
-
-<tr>
-  {#each fields as field}
-    <th style="padding: 10px 12px; text-align: left; font-weight: 600; font-size: 13px; color: #475569; white-space: nowrap;">
-      {#if currentSort === field.key}
-        <a href="?sort={field.key}&order={currentOrder === 'asc' ? 'desc' : 'asc'}" style="color: #0f172a; text-decoration: none;">
-          {field.label} {currentOrder === 'asc' ? '↑' : '↓'}
-        </a>
-      {:else}
-        <a href="?sort={field.key}&order=asc" style="color: inherit; text-decoration: none;">
-          {field.label}
-        </a>
-      {/if}
-    </th>
-  {/each}
-</tr>

package/src/components/advanced/LiteDrawerForm.svelte

@@ -1,42 +0,0 @@
-<script lang="ts">
-  /**
-   * SSR DrawerForm — Degraded to a dedicated page redirect.
-   * Side drawers require JS for sliding panel rendering. In lite mode,
-   * this component works identically to LiteModalForm: a plain link.
-   */
-  import type { ResourceDefinition } from '@svadmin/core';
-  import { t } from '@svadmin/core/i18n';
-
-  interface Props {
-    resource: ResourceDefinition;
-    mode?: 'create' | 'edit';
-    recordId?: string | number;
-    basePath?: string;
-    label?: string;
-  }
-
-  let {
-    resource,
-    mode = 'create',
-    recordId,
-    basePath = '/lite',
-    label,
-  }: Props = $props();
-
-  const href = $derived(
-    mode === 'create'
-      ? `${basePath}/${resource.name}/create`
-      : `${basePath}/${resource.name}/edit/${recordId}`
-  );
-
-  const buttonLabel = $derived(
-    label ??
-    (mode === 'create'
-      ? `${t('common.create') || 'Create'} ${resource.label || resource.name}`
-      : `${t('common.edit') || 'Edit'} ${resource.label || resource.name}`)
-  );
-</script>
-
-<a href={href} class="lite-btn lite-btn-outline">
-  {buttonLabel}
-</a>

package/src/components/advanced/LiteInlineEdit.svelte

@@ -1,32 +0,0 @@
-<script lang="ts">
-  /**
-   * SSR InlineEdit — Degraded to a show-value + edit-link pattern.
-   * True inline editing requires JS for focus management, key events,
-   * and async save. In lite mode, we display the value as static text
-   * and provide a small "edit" link that navigates to the edit page.
-   */
-  import type { FieldDefinition } from '@svadmin/core';
-
-  interface Props {
-    field: FieldDefinition;
-    value: unknown;
-    editUrl?: string;
-  }
-
-  let { field, value, editUrl }: Props = $props();
-
-  const displayValue = $derived(
-    value == null ? '—' : String(value)
-  );
-</script>
-
-<span style="display: inline-flex; align-items: center; gap: 6px;">
-  <span>{displayValue}</span>
-  {#if editUrl}
-    <a
-      href={editUrl}
-      style="font-size: 11px; color: #6366f1; text-decoration: none;"
-      title="Edit {field.label}"
-    >✎</a>
-  {/if}
-</span>

package/src/components/advanced/LiteModalForm.svelte

@@ -1,44 +0,0 @@
-<script lang="ts">
-  /**
-   * SSR ModalForm — Degraded to a dedicated page redirect.
-   * True modals require JS for overlay rendering. In lite mode,
-   * this component simply renders a link that navigates to the
-   * create/edit page for the resource (a full page load).
-   */
-  import type { ResourceDefinition } from '@svadmin/core';
-  import { t } from '@svadmin/core/i18n';
-
-  interface Props {
-    resource: ResourceDefinition;
-    mode?: 'create' | 'edit';
-    recordId?: string | number;
-    basePath?: string;
-    label?: string;
-  }
-
-  let {
-    resource,
-    mode = 'create',
-    recordId,
-    basePath = '/lite',
-    label,
-  }: Props = $props();
-
-  const href = $derived(
-    mode === 'create'
-      ? `${basePath}/${resource.name}/create`
-      : `${basePath}/${resource.name}/edit/${recordId}`
-  );
-
-  const buttonLabel = $derived(
-    label ??
-    (mode === 'create'
-      ? `${t('common.create') || 'Create'} ${resource.label || resource.name}`
-      : `${t('common.edit') || 'Edit'} ${resource.label || resource.name}`)
-  );
-</script>
-
-<!-- In lite mode, modals degrade to a full-page navigation -->
-<a href={href} class="lite-btn lite-btn-primary">
-  {buttonLabel}
-</a>

package/src/components/advanced/LiteToast.svelte

@@ -1,34 +0,0 @@
-<script lang="ts">
-  /**
-   * SSR Toast — Degraded to a static alert banner.
-   * In SSR-only mode, toast notifications are rendered as inline banners
-   * by the server and included in the page HTML. They persist until the
-   * next full-page navigation (no auto-dismiss without JS).
-   */
-  interface Props {
-    message: string;
-    type?: 'success' | 'error' | 'warning' | 'info';
-    dismissUrl?: string;
-  }
-
-  let { message, type = 'info', dismissUrl }: Props = $props();
-
-  const colors: Record<string, { bg: string; border: string; text: string }> = {
-    success: { bg: '#ecfdf5', border: '#a7f3d0', text: '#065f46' },
-    error: { bg: '#fef2f2', border: '#fecaca', text: '#991b1b' },
-    warning: { bg: '#fffbeb', border: '#fed7aa', text: '#92400e' },
-    info: { bg: '#eff6ff', border: '#bfdbfe', text: '#1e40af' },
-  };
-
-  const style = $derived(colors[type] ?? colors.info);
-</script>
-
-<div
-  role="alert"
-  style="padding: 12px 16px; background: {style.bg}; border: 1px solid {style.border}; color: {style.text}; border-radius: 6px; margin-bottom: 16px; display: flex; justify-content: space-between; align-items: center; font-size: 14px;"
->
-  <span>{message}</span>
-  {#if dismissUrl}
-    <a href={dismissUrl} style="color: {style.text}; text-decoration: none; font-weight: 600; margin-left: 12px;">✕</a>
-  {/if}
-</div>

package/src/components/advanced/LiteUndoableNotification.svelte

@@ -1,25 +0,0 @@
-<script lang="ts">
-  /**
-   * SSR UndoableNotification — Degraded to a static banner with an undo link.
-   * Without JS there's no countdown timer. Instead, the server provides an
-   * undo URL that performs the reversal action. If the user navigates away,
-   * the action is considered confirmed.
-   */
-  interface Props {
-    message: string;
-    undoUrl: string;
-  }
-
-  let { message, undoUrl }: Props = $props();
-</script>
-
-<div
-  role="alert"
-  style="padding: 12px 16px; background: #fefce8; border: 1px solid #fde68a; color: #713f12; border-radius: 6px; margin-bottom: 16px; display: flex; justify-content: space-between; align-items: center; font-size: 14px;"
->
-  <span>{message}</span>
-  <a
-    href={undoUrl}
-    style="color: #b45309; font-weight: 600; text-decoration: underline; margin-left: 16px; white-space: nowrap;"
-  >Undo</a>
-</div>

package/src/components/advanced/LiteVirtualTable.svelte

@@ -1,44 +0,0 @@
-<script lang="ts">
-  /**
-   * SSR VirtualTable — Identical to LiteTable.
-   * Virtual scrolling (rendering only visible rows) requires JS.
-   * In lite mode, all rows are rendered server-side. For large datasets,
-   * rely on server-side pagination instead.
-   */
-  import type { ResourceDefinition } from '@svadmin/core';
-  import LiteTable from '../LiteTable.svelte';
-
-  interface Props {
-    records: Record<string, unknown>[];
-    resource: ResourceDefinition;
-    currentSort?: string;
-    currentOrder?: 'asc' | 'desc';
-    currentSearch?: string;
-    basePath?: string;
-    canEdit?: boolean;
-    canDelete?: boolean;
-  }
-
-  let {
-    records,
-    resource,
-    currentSort,
-    currentOrder = 'asc',
-    currentSearch,
-    basePath = '/lite',
-    canEdit = true,
-    canDelete = true,
-  }: Props = $props();
-</script>
-
-<!-- Virtual scrolling is not available without JS. All rows are rendered. -->
-<LiteTable
-  {records}
-  {resource}
-  {currentSort}
-  {currentOrder}
-  {currentSearch}
-  {basePath}
-  {canEdit}
-  {canDelete}
-/>

package/src/components/buttons/LiteCloneButton.svelte

@@ -1,33 +0,0 @@
-<script lang="ts">
-  import { t } from '@svadmin/core/i18n';
-  import { Copy } from '@lucide/svelte';
-
-  interface Props {
-    resource: string;
-    recordItemId: string | number;
-    basePath?: string;
-    hideText?: boolean;
-    class?: string;
-    size?: 'sm' | 'default' | 'icon';
-  }
-
-  let {
-    resource,
-    recordItemId,
-    basePath = '/lite',
-    hideText = false,
-    class: className = '',
-    size = 'default'
-  }: Props = $props();
-</script>
-
-<a
-  href={`${basePath}/${resource}/clone/${recordItemId}`}
-  class="lite-btn {size === 'sm' ? 'lite-btn-sm' : ''} {className}"
-  title={t('common.clone') || 'Clone'}
->
-  <Copy class="h-4 w-4" />
-  {#if !hideText}
-    <span style="marginLeft: 4px">{t('common.clone') || 'Clone'}</span>
-  {/if}
-</a>

package/src/components/buttons/LiteCreateButton.svelte

@@ -1,31 +0,0 @@
-<script lang="ts">
-  import { t } from '@svadmin/core/i18n';
-  import { Plus } from '@lucide/svelte';
-
-  interface Props {
-    resource: string;
-    basePath?: string;
-    hideText?: boolean;
-    class?: string;
-    size?: 'sm' | 'default' | 'icon';
-  }
-
-  let {
-    resource,
-    basePath = '/lite',
-    hideText = false,
-    class: className = '',
-    size = 'default'
-  }: Props = $props();
-</script>
-
-<a
-  href={`${basePath}/${resource}/create`}
-  class="lite-btn lite-btn-primary {size === 'sm' ? 'lite-btn-sm' : ''} {className}"
-  title={t('common.create') || 'Create'}
->
-  <Plus class="h-4 w-4" />
-  {#if !hideText}
-    <span style="marginLeft: 4px">{t('common.create') || 'Create'}</span>
-  {/if}
-</a>

package/src/components/buttons/LiteDeleteButton.svelte

@@ -1,57 +0,0 @@
-<script lang="ts">
-  import { t } from '@svadmin/core/i18n';
-  import { Trash2 } from '@lucide/svelte';
-
-  interface Props {
-    resource: string;
-    recordItemId: string | number;
-    basePath?: string;
-    hideText?: boolean;
-    class?: string;
-    size?: 'sm' | 'default' | 'icon';
-    redirectUrl?: string;
-  }
-
-  let {
-    resource,
-    recordItemId,
-    basePath = '/lite',
-    hideText = false,
-    class: className = '',
-    size = 'default',
-    redirectUrl = ''
-  }: Props = $props();
-</script>
-
-<details class="lite-confirm-details {className}">
-  <summary 
-    class="lite-btn lite-btn-danger {size === 'sm' ? 'lite-btn-sm' : ''}"
-    title={t('common.delete') || 'Delete'}
-  >
-    <Trash2 class="h-4 w-4" />
-    {#if !hideText}
-      <span style="marginLeft: 4px">{t('common.delete') || 'Delete'}</span>
-    {/if}
-  </summary>
-  <div class="lite-confirm-panel" style="right: 0; left: auto;">
-    <p style="margin: 0 0 8px; font-size: 13px; color: #111827;">
-      {t('common.areYouSure') || 'Are you sure?'}
-    </p>
-    <form method="POST" action="?/delete" style="display:inline-flex; gap: 8px;">
-      <input type="hidden" name="id" value={String(recordItemId)} />
-      {#if redirectUrl}
-        <input type="hidden" name="redirect" value={redirectUrl} />
-      {/if}
-      <button 
-        type="button" 
-        class="lite-btn lite-btn-sm" 
-        onclick={(e) => (e.currentTarget as HTMLElement).closest('details')?.removeAttribute('open')}
-      >
-        {t('common.cancel') || 'Cancel'}
-      </button>
-      <button type="submit" class="lite-btn lite-btn-sm lite-btn-danger">
-        {t('common.confirm') || 'Confirm'}
-      </button>
-    </form>
-  </div>
-</details>

package/src/components/buttons/LiteEditButton.svelte

@@ -1,33 +0,0 @@
-<script lang="ts">
-  import { t } from '@svadmin/core/i18n';
-  import { Pencil } from '@lucide/svelte';
-
-  interface Props {
-    resource: string;
-    recordItemId: string | number;
-    basePath?: string;
-    hideText?: boolean;
-    class?: string;
-    size?: 'sm' | 'default' | 'icon';
-  }
-
-  let {
-    resource,
-    recordItemId,
-    basePath = '/lite',
-    hideText = false,
-    class: className = '',
-    size = 'default'
-  }: Props = $props();
-</script>
-
-<a
-  href={`${basePath}/${resource}/edit/${recordItemId}`}
-  class="lite-btn {size === 'sm' ? 'lite-btn-sm' : ''} {className}"
-  title={t('common.edit') || 'Edit'}
->
-  <Pencil class="h-4 w-4" />
-  {#if !hideText}
-    <span style="marginLeft: 4px">{t('common.edit') || 'Edit'}</span>
-  {/if}
-</a>

package/src/components/buttons/LiteExportButton.svelte

@@ -1,31 +0,0 @@
-<script lang="ts">
-  import { t } from '@svadmin/core/i18n';
-  import { Download } from '@lucide/svelte';
-
-  interface Props {
-    resource: string;
-    basePath?: string;
-    hideText?: boolean;
-    class?: string;
-    size?: 'sm' | 'default' | 'icon';
-  }
-
-  let {
-    resource,
-    basePath = '/lite',
-    hideText = false,
-    class: className = '',
-    size = 'default'
-  }: Props = $props();
-</script>
-
-<a
-  href="?action=export"
-  class="lite-btn {size === 'sm' ? 'lite-btn-sm' : ''} {className}"
-  title={t('common.export') || 'Export'}
->
-  <Download class="h-4 w-4" />
-  {#if !hideText}
-    <span style="marginLeft: 4px">{t('common.export') || 'Export'}</span>
-  {/if}
-</a>