@svadmin/lite 0.3.7 → 0.3.12

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

@@ -0,0 +1,16 @@
+/**
+ * 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;
+}
+declare const LiteTabs: import("svelte").Component<Props, {}, "">;
+type LiteTabs = ReturnType<typeof LiteTabs>;
+export default LiteTabs;

package/dist/components/advanced/LiteAutoSaveIndicator.svelte

@@ -0,0 +1,26 @@
+<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/dist/components/advanced/LiteAutoSaveIndicator.svelte.d.ts

@@ -0,0 +1,12 @@
+/**
+ * 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;
+}
+declare const LiteAutoSaveIndicator: import("svelte").Component<Props, {}, "">;
+type LiteAutoSaveIndicator = ReturnType<typeof LiteAutoSaveIndicator>;
+export default LiteAutoSaveIndicator;

package/dist/components/advanced/LiteDraggableHeader.svelte

@@ -0,0 +1,33 @@
+<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, _i (_i)}
+    <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/dist/components/advanced/LiteDraggableHeader.svelte.d.ts

@@ -0,0 +1,15 @@
+/**
+   * 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';
+}
+declare const LiteDraggableHeader: import("svelte").Component<Props, {}, "">;
+type LiteDraggableHeader = ReturnType<typeof LiteDraggableHeader>;
+export default LiteDraggableHeader;

package/dist/components/advanced/LiteDrawerForm.svelte

@@ -0,0 +1,42 @@
+<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/dist/components/advanced/LiteDrawerForm.svelte.d.ts

@@ -0,0 +1,16 @@
+/**
+   * 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';
+interface Props {
+    resource: ResourceDefinition;
+    mode?: 'create' | 'edit';
+    recordId?: string | number;
+    basePath?: string;
+    label?: string;
+}
+declare const LiteDrawerForm: import("svelte").Component<Props, {}, "">;
+type LiteDrawerForm = ReturnType<typeof LiteDrawerForm>;
+export default LiteDrawerForm;

package/dist/components/advanced/LiteInlineEdit.svelte

@@ -0,0 +1,32 @@
+<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/dist/components/advanced/LiteInlineEdit.svelte.d.ts

@@ -0,0 +1,15 @@
+/**
+   * 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;
+}
+declare const LiteInlineEdit: import("svelte").Component<Props, {}, "">;
+type LiteInlineEdit = ReturnType<typeof LiteInlineEdit>;
+export default LiteInlineEdit;

package/dist/components/advanced/LiteModalForm.svelte

@@ -0,0 +1,44 @@
+<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/dist/components/advanced/LiteModalForm.svelte.d.ts

@@ -0,0 +1,17 @@
+/**
+   * 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';
+interface Props {
+    resource: ResourceDefinition;
+    mode?: 'create' | 'edit';
+    recordId?: string | number;
+    basePath?: string;
+    label?: string;
+}
+declare const LiteModalForm: import("svelte").Component<Props, {}, "">;
+type LiteModalForm = ReturnType<typeof LiteModalForm>;
+export default LiteModalForm;

package/dist/components/advanced/LiteToast.svelte

@@ -0,0 +1,34 @@
+<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/dist/components/advanced/LiteToast.svelte.d.ts

@@ -0,0 +1,14 @@
+/**
+ * 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;
+}
+declare const LiteToast: import("svelte").Component<Props, {}, "">;
+type LiteToast = ReturnType<typeof LiteToast>;
+export default LiteToast;

package/dist/components/advanced/LiteUndoableNotification.svelte

@@ -0,0 +1,25 @@
+<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/dist/components/advanced/LiteUndoableNotification.svelte.d.ts

@@ -0,0 +1,13 @@
+/**
+ * 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;
+}
+declare const LiteUndoableNotification: import("svelte").Component<Props, {}, "">;
+type LiteUndoableNotification = ReturnType<typeof LiteUndoableNotification>;
+export default LiteUndoableNotification;

package/dist/components/advanced/LiteVirtualTable.svelte

@@ -0,0 +1,44 @@
+<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/dist/components/advanced/LiteVirtualTable.svelte.d.ts

@@ -0,0 +1,20 @@
+/**
+   * 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';
+interface Props {
+    records: Record<string, unknown>[];
+    resource: ResourceDefinition;
+    currentSort?: string;
+    currentOrder?: 'asc' | 'desc';
+    currentSearch?: string;
+    basePath?: string;
+    canEdit?: boolean;
+    canDelete?: boolean;
+}
+declare const LiteVirtualTable: import("svelte").Component<Props, {}, "">;
+type LiteVirtualTable = ReturnType<typeof LiteVirtualTable>;
+export default LiteVirtualTable;

package/dist/components/advanced/index.js

@@ -0,0 +1,8 @@
+export { default as LiteToast } from './LiteToast.svelte';
+export { default as LiteUndoableNotification } from './LiteUndoableNotification.svelte';
+export { default as LiteModalForm } from './LiteModalForm.svelte';
+export { default as LiteDrawerForm } from './LiteDrawerForm.svelte';
+export { default as LiteInlineEdit } from './LiteInlineEdit.svelte';
+export { default as LiteAutoSaveIndicator } from './LiteAutoSaveIndicator.svelte';
+export { default as LiteVirtualTable } from './LiteVirtualTable.svelte';
+export { default as LiteDraggableHeader } from './LiteDraggableHeader.svelte';

package/dist/components/buttons/LiteCloneButton.svelte

@@ -0,0 +1,33 @@
+<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/dist/components/buttons/LiteCloneButton.svelte.d.ts

@@ -0,0 +1,11 @@
+interface Props {
+    resource: string;
+    recordItemId: string | number;
+    basePath?: string;
+    hideText?: boolean;
+    class?: string;
+    size?: 'sm' | 'default' | 'icon';
+}
+declare const LiteCloneButton: import("svelte").Component<Props, {}, "">;
+type LiteCloneButton = ReturnType<typeof LiteCloneButton>;
+export default LiteCloneButton;

package/dist/components/buttons/LiteCreateButton.svelte

@@ -0,0 +1,31 @@
+<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/dist/components/buttons/LiteCreateButton.svelte.d.ts

@@ -0,0 +1,10 @@
+interface Props {
+    resource: string;
+    basePath?: string;
+    hideText?: boolean;
+    class?: string;
+    size?: 'sm' | 'default' | 'icon';
+}
+declare const LiteCreateButton: import("svelte").Component<Props, {}, "">;
+type LiteCreateButton = ReturnType<typeof LiteCreateButton>;
+export default LiteCreateButton;

package/dist/components/buttons/LiteDeleteButton.svelte

@@ -0,0 +1,57 @@
+<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={`${basePath}/${resource}?/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/dist/components/buttons/LiteDeleteButton.svelte.d.ts

@@ -0,0 +1,12 @@
+interface Props {
+    resource: string;
+    recordItemId: string | number;
+    basePath?: string;
+    hideText?: boolean;
+    class?: string;
+    size?: 'sm' | 'default' | 'icon';
+    redirectUrl?: string;
+}
+declare const LiteDeleteButton: import("svelte").Component<Props, {}, "">;
+type LiteDeleteButton = ReturnType<typeof LiteDeleteButton>;
+export default LiteDeleteButton;

package/dist/components/buttons/LiteEditButton.svelte

@@ -0,0 +1,33 @@
+<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/dist/components/buttons/LiteEditButton.svelte.d.ts

@@ -0,0 +1,11 @@
+interface Props {
+    resource: string;
+    recordItemId: string | number;
+    basePath?: string;
+    hideText?: boolean;
+    class?: string;
+    size?: 'sm' | 'default' | 'icon';
+}
+declare const LiteEditButton: import("svelte").Component<Props, {}, "">;
+type LiteEditButton = ReturnType<typeof LiteEditButton>;
+export default LiteEditButton;