@svadmin/lite 0.3.7 → 0.3.12

package/dist/components/LitePermissionMatrix.svelte

@@ -0,0 +1,147 @@
+<script lang="ts">
+  /**
+   * LitePermissionMatrix — SSR-compatible permission matrix.
+   * Pure HTML table with checkbox inputs. No client-side JS required.
+   * Works with form POST actions for state changes.
+   */
+
+  interface LiteRole {
+    code: string;
+    name: string;
+  }
+
+  interface LiteResource {
+    code: string;
+    name: string;
+    section?: string;
+  }
+
+  interface LiteAction {
+    code: string;
+    name: string;
+  }
+
+  interface Props {
+    roles: LiteRole[];
+    resources: LiteResource[];
+    actions: LiteAction[];
+    /** Current permissions map: { "resource:action": true } */
+    permissions: Record<string, boolean>;
+    selectedRole?: string;
+    /** Form POST action URL */
+    actionUrl?: string;
+    disabled?: boolean;
+  }
+
+  let {
+    roles,
+    resources,
+    actions,
+    permissions,
+    selectedRole = roles[0]?.code || '',
+    actionUrl = '?/updatePermissions',
+    disabled = false,
+  }: Props = $props();
+
+  function isGranted(resource: string, action: string): boolean {
+    return permissions[`${resource}:${action}`] === true;
+  }
+</script>
+
+<div class="lite-permission-matrix">
+  <!-- Role Tabs -->
+  <div class="lite-role-tabs">
+    {#each roles as role, _i (_i)}
+      <a
+        href="?role={role.code}"
+        class="lite-role-tab {selectedRole === role.code ? 'active' : ''}"
+      >
+        {role.name}
+      </a>
+    {/each}
+  </div>
+
+  <!-- Matrix Table -->
+  <form method="POST" action={actionUrl}>
+    <input type="hidden" name="role" value={selectedRole} />
+
+    <table class="lite-table" style="margin-top:0;">
+      <thead>
+        <tr>
+          <th style="width:200px;">Resource</th>
+          {#each actions as action, _i (_i)}
+            <th style="text-align:center;">{action.name}</th>
+          {/each}
+        </tr>
+      </thead>
+      <tbody>
+        {#each resources as resource, i (i)}
+          {#if resource.section && (i === 0 || resource.section !== resources[i-1].section)}
+            <tr>
+              <td colspan={actions.length + 1} style="background:#f1f5f9;font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:0.05em;color:#475569;">
+                {resource.section}
+              </td>
+            </tr>
+          {/if}
+          <tr>
+            <td><strong>{resource.name}</strong><br/><small style="color:#94a3b8;">{resource.code}</small></td>
+            {#each actions as action, _i (_i)}
+              <td style="text-align:center;">
+                <input
+                  type="checkbox"
+                  name="perm_{resource.code}_{action.code}"
+                  checked={isGranted(resource.code, action.code)}
+                  {disabled}
+                  style="width:18px;height:18px;cursor:{disabled ? 'not-allowed' : 'pointer'};"
+                />
+              </td>
+            {/each}
+          </tr>
+        {/each}
+        {#if resources.length === 0}
+          <tr>
+            <td colspan={actions.length + 1} style="text-align:center;padding:24px;color:#94a3b8;">
+              No resources configured.
+            </td>
+          </tr>
+        {/if}
+      </tbody>
+    </table>
+
+    {#if !disabled}
+      <div style="margin-top:12px;text-align:right;">
+        <button type="submit" class="lite-btn lite-btn-primary">Save Permissions</button>
+      </div>
+    {/if}
+  </form>
+</div>
+
+<style>
+  .lite-role-tabs {
+    display: flex;
+    flex-wrap: wrap;
+    margin-bottom: 16px;
+    border-bottom: 2px solid #e2e8f0;
+    padding-bottom: 0;
+  }
+  .lite-role-tab {
+    padding: 8px 16px;
+    margin-right: 4px;
+    text-decoration: none;
+    color: #64748b;
+    font-size: 14px;
+    font-weight: 500;
+    border-bottom: 2px solid transparent;
+    margin-bottom: -2px;
+    transition: color 0.15s ease, border-color 0.15s ease;
+  }
+  .lite-role-tab:hover {
+    color: #0f172a;
+    text-decoration: none;
+  }
+  .lite-role-tab.active {
+    color: #4f46e5;
+    border-bottom-color: #4f46e5;
+    font-weight: 600;
+  }
+</style>

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

@@ -0,0 +1,32 @@
+/**
+ * LitePermissionMatrix — SSR-compatible permission matrix.
+ * Pure HTML table with checkbox inputs. No client-side JS required.
+ * Works with form POST actions for state changes.
+ */
+interface LiteRole {
+    code: string;
+    name: string;
+}
+interface LiteResource {
+    code: string;
+    name: string;
+    section?: string;
+}
+interface LiteAction {
+    code: string;
+    name: string;
+}
+interface Props {
+    roles: LiteRole[];
+    resources: LiteResource[];
+    actions: LiteAction[];
+    /** Current permissions map: { "resource:action": true } */
+    permissions: Record<string, boolean>;
+    selectedRole?: string;
+    /** Form POST action URL */
+    actionUrl?: string;
+    disabled?: boolean;
+}
+declare const LitePermissionMatrix: import("svelte").Component<Props, {}, "">;
+type LitePermissionMatrix = ReturnType<typeof LitePermissionMatrix>;
+export default LitePermissionMatrix;

package/dist/components/LiteSearch.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+  /**
+   * LiteSearch — Search bar using native <form> GET submission.
+   * No JS needed — submits as ?q=searchterm via page navigation.
+   */
+  import { t } from '@svadmin/core/i18n';
+
+  interface Props {
+    value?: string;
+    placeholder?: string;
+    /** Additional hidden fields to preserve (e.g. sort, order) */
+    preserveParams?: Record<string, string>;
+  }
+
+  let {
+    value = '',
+    placeholder,
+    preserveParams = {},
+  }: Props = $props();
+</script>
+
+<form method="GET" class="lite-search">
+  {#each Object.entries(preserveParams) as [key, val] (key)}
+    <input type="hidden" name={key} value={val} />
+  {/each}
+  <input
+    type="text"
+    name="q"
+    value={value}
+    class="lite-input"
+    placeholder={placeholder || t('common.search') || 'Search...'}
+  />
+  <button type="submit" class="lite-btn lite-btn-primary">
+    {t('common.search') || 'Search'}
+  </button>
+  {#if value}
+    <a href="?" class="lite-btn" style="margin-left:4px;">
+      {t('common.clear') || 'Clear'}
+    </a>
+  {/if}
+</form>

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

@@ -0,0 +1,9 @@
+interface Props {
+    value?: string;
+    placeholder?: string;
+    /** Additional hidden fields to preserve (e.g. sort, order) */
+    preserveParams?: Record<string, string>;
+}
+declare const LiteSearch: import("svelte").Component<Props, {}, "">;
+type LiteSearch = ReturnType<typeof LiteSearch>;
+export default LiteSearch;

package/dist/components/LiteShow.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+  /**
+   * LiteShow — Detail/view page for a single record.
+   * Renders field labels and values in a key-value layout.
+   */
+  import type { ResourceDefinition } from '@svadmin/core';
+  import { t } from '@svadmin/core/i18n';
+  import LiteShowField from './LiteShowField.svelte';
+
+  interface Props {
+    record: Record<string, unknown>;
+    resource: ResourceDefinition;
+    basePath?: string;
+    canEdit?: boolean;
+  }
+
+  let {
+    record,
+    resource,
+    basePath = '/lite',
+    canEdit = true,
+  }: Props = $props();
+
+  let pk = $derived(resource.primaryKey ?? 'id');
+  let id = $derived(record[pk]);
+  const showFields = $derived(
+    resource.fields.filter(f => f.showInShow !== false)
+  );
+</script>
+
+<div class="lite-card">
+  <div class="lite-header">
+    <h1>{resource.label} #{id}</h1>
+    <div>
+      {#if canEdit}
+        <a href={`${basePath}/${resource.name}/edit/${id}`} class="lite-btn lite-btn-primary">
+          {t('common.edit') || 'Edit'}
+        </a>
+      {/if}
+      <a href={`${basePath}/${resource.name}`} class="lite-btn" style="margin-left:8px;">
+        {t('common.backToList') || 'Back to List'}
+      </a>
+    </div>
+  </div>
+
+  <table class="lite-table">
+    <tbody>
+      {#each showFields as field, _i (_i)}
+        {@const value = record[field.key]}
+        <tr>
+          <td style="width:200px;font-weight:600;color:#64748b;vertical-align:top;">
+            {field.label}
+          </td>
+          <td>
+            <LiteShowField {field} {value} />
+          </td>
+        </tr>
+      {/each}
+    </tbody>
+  </table>
+</div>

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

@@ -0,0 +1,14 @@
+/**
+   * LiteShow — Detail/view page for a single record.
+   * Renders field labels and values in a key-value layout.
+   */
+import type { ResourceDefinition } from '@svadmin/core';
+interface Props {
+    record: Record<string, unknown>;
+    resource: ResourceDefinition;
+    basePath?: string;
+    canEdit?: boolean;
+}
+declare const LiteShow: import("svelte").Component<Props, {}, "">;
+type LiteShow = ReturnType<typeof LiteShow>;
+export default LiteShow;

package/dist/components/LiteShowField.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+  /**
+   * LiteShowField — SSR-compatible field renderer for detail views.
+   * Renders a single field value based on its type definition.
+  */
+  import type { FieldDefinition } from '@svadmin/core';
+  import { toSafeHref, toSafeText } from '../security';
+
+  interface Props {
+    field: FieldDefinition;
+    value: unknown;
+  }
+
+  let { field, value }: Props = $props();
+
+  function formatValue(v: unknown, f: FieldDefinition): string {
+    if (v == null) return '—';
+    if (f.type === 'date') {
+      try { return new Date(v as string).toLocaleString(); } catch { return String(v); }
+    }
+    if (f.type === 'select' && f.options) {
+      const opt = f.options.find(o => o.value === v);
+      return opt?.label ?? String(v);
+    }
+    if (f.type === 'url') return String(v);
+    if (f.type === 'email') return String(v);
+    if (Array.isArray(v)) return v.join(', ');
+    if (typeof v === 'object') {
+      try { return JSON.stringify(v, null, 2); } catch { return String(v); }
+    }
+    return String(v);
+  }
+</script>
+
+{#if field.type === 'boolean'}
+  <span class="lite-bool {value ? 'lite-bool-true' : ''}"></span>
+  {value ? '✓ Yes' : '✗ No'}
+{:else if field.type === 'url' && value}
+  {@const href = toSafeHref(value)}
+  {#if href}
+    <a {href} target="_blank" rel="noopener noreferrer">{toSafeText(value)}</a>
+  {:else}
+    {toSafeText(value)}
+  {/if}
+{:else if field.type === 'email' && value}
+  {@const href = toSafeHref(`mailto:${toSafeText(value)}`)}
+  {#if href}
+    <a {href}>{toSafeText(value)}</a>
+  {:else}
+    {toSafeText(value)}
+  {/if}
+{:else if field.type === 'image' && value}
+  <img src={String(value)} alt={field.label} style="max-width:300px;max-height:200px;border-radius:6px;border:1px solid #e2e8f0;" />
+{:else if field.type === 'tags' && Array.isArray(value)}
+  {#each value as tag, _i (_i)}
+    <span class="lite-badge">{tag}</span>
+  {/each}
+{:else if field.type === 'json' && value}
+  <pre style="margin:0;font-size:12px;background:#f8fafc;padding:12px;border-radius:6px;border:1px solid #e2e8f0;overflow-x:auto;">{typeof value === 'string' ? value : JSON.stringify(value, null, 2)}</pre>
+{:else}
+  {formatValue(value, field)}
+{/if}

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

@@ -0,0 +1,12 @@
+/**
+   * LiteShowField — SSR-compatible field renderer for detail views.
+   * Renders a single field value based on its type definition.
+  */
+import type { FieldDefinition } from '@svadmin/core';
+interface Props {
+    field: FieldDefinition;
+    value: unknown;
+}
+declare const LiteShowField: import("svelte").Component<Props, {}, "">;
+type LiteShowField = ReturnType<typeof LiteShowField>;
+export default LiteShowField;

package/dist/components/LiteStatsCard.svelte

@@ -0,0 +1,70 @@
+<script lang="ts">
+  /**
+   * LiteStatsCard — SSR-compatible KPI statistics card.
+   * Pure HTML card with number, label, and optional trend indicator.
+   * No client-side JS required.
+   */
+
+  interface Props {
+    /** The main number/value to display */
+    value: string | number;
+    /** Label/title for the stat */
+    label: string;
+    /** Optional description text below the label */
+    description?: string;
+    /** Trend direction: 'up' shows green arrow, 'down' shows red arrow */
+    trend?: 'up' | 'down' | 'neutral';
+    /** Trend value text (e.g. "+12%", "-3%") */
+    trendValue?: string;
+    /** Optional icon character or HTML entity to display */
+    icon?: string;
+    /** Link to detail page */
+    href?: string;
+  }
+
+  let {
+    value,
+    label,
+    description,
+    trend,
+    trendValue,
+    icon,
+    href,
+  }: Props = $props();
+</script>
+
+{#if href}
+  <a href={href} class="lite-stats-card lite-card" style="text-decoration:none;display:block;">
+    {#if icon}
+      <div class="lite-stats-icon">{icon}</div>
+    {/if}
+    <div class="lite-stats-value">{value}</div>
+    <div class="lite-stats-label">{label}</div>
+    {#if trendValue}
+      <div class="lite-stats-trend lite-stats-trend-{trend || 'neutral'}">
+        {#if trend === 'up'}&#9650;{:else if trend === 'down'}&#9660;{:else}&#9644;{/if}
+        {trendValue}
+      </div>
+    {/if}
+    {#if description}
+      <div class="lite-stats-desc">{description}</div>
+    {/if}
+  </a>
+{:else}
+  <div class="lite-stats-card lite-card">
+    {#if icon}
+      <div class="lite-stats-icon">{icon}</div>
+    {/if}
+    <div class="lite-stats-value">{value}</div>
+    <div class="lite-stats-label">{label}</div>
+    {#if trendValue}
+      <div class="lite-stats-trend lite-stats-trend-{trend || 'neutral'}">
+        {#if trend === 'up'}&#9650;{:else if trend === 'down'}&#9660;{:else}&#9644;{/if}
+        {trendValue}
+      </div>
+    {/if}
+    {#if description}
+      <div class="lite-stats-desc">{description}</div>
+    {/if}
+  </div>
+{/if}

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

@@ -0,0 +1,24 @@
+/**
+ * LiteStatsCard — SSR-compatible KPI statistics card.
+ * Pure HTML card with number, label, and optional trend indicator.
+ * No client-side JS required.
+ */
+interface Props {
+    /** The main number/value to display */
+    value: string | number;
+    /** Label/title for the stat */
+    label: string;
+    /** Optional description text below the label */
+    description?: string;
+    /** Trend direction: 'up' shows green arrow, 'down' shows red arrow */
+    trend?: 'up' | 'down' | 'neutral';
+    /** Trend value text (e.g. "+12%", "-3%") */
+    trendValue?: string;
+    /** Optional icon character or HTML entity to display */
+    icon?: string;
+    /** Link to detail page */
+    href?: string;
+}
+declare const LiteStatsCard: import("svelte").Component<Props, {}, "">;
+type LiteStatsCard = ReturnType<typeof LiteStatsCard>;
+export default LiteStatsCard;

package/dist/components/LiteTable.svelte

@@ -0,0 +1,132 @@
+<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, _i (_i)}
+        <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, _i (_i)}
+      {@const id = record[pk]}
+      <tr>
+        {#each listFields as field, _i (_i)}
+          <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, _i (_i)}
+                <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/dist/components/LiteTable.svelte.d.ts

@@ -0,0 +1,19 @@
+/**
+   * LiteTable — Pure HTML table with <a> sort links.
+   * No JavaScript required — sorting and pagination are URL-driven.
+   */
+import type { ResourceDefinition } from '@svadmin/core';
+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;
+}
+declare const LiteTable: import("svelte").Component<Props, {}, "">;
+type LiteTable = ReturnType<typeof LiteTable>;
+export default LiteTable;

package/dist/components/LiteTabs.svelte

@@ -0,0 +1,57 @@
+<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, _i (_i)}
+    <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>