@svadmin/lite 0.3.4 → 0.3.6

package/src/components/LiteLayout.svelte

@@ -1,106 +0,0 @@
-<script lang="ts">
-  /**
-   * LiteLayout — Minimal server-rendered sidebar + main layout.
-   * No client-side JS required. Uses only IE11-safe CSS classes.
-   * Supports multi-level menus via <details>/<summary> (pure HTML).
-   */
-  import type { ResourceDefinition, MenuItem } from '@svadmin/core';
-  import { t } from '@svadmin/core/i18n';
-
-  interface Props {
-    resources: ResourceDefinition[];
-    currentResource?: string;
-    brandName?: string;
-    userName?: string;
-    basePath?: string;
-    /** Optional multi-level menu configuration */
-    menu?: MenuItem[];
-    children: any;
-  }
-
-  let {
-    resources,
-    currentResource = '',
-    brandName = 'Admin',
-    userName = '',
-    basePath = '/lite',
-    menu,
-    children,
-  }: Props = $props();
-
-  const menuResources = $derived(
-    resources.filter((r: ResourceDefinition) => r.showInMenu !== false)
-  );
-
-  function isActive(href: string | undefined): boolean {
-    if (!href) return false;
-    return currentResource === href.replace(basePath + '/', '');
-  }
-</script>
-
-<div class="lite-wrapper">
-  <!-- Sidebar -->
-  <nav class="lite-sidebar">
-    <div class="lite-sidebar-brand">{brandName}</div>
-    {#if menu && menu.length > 0}
-      {#each menu as item}
-        {#if item.children && item.children.length > 0}
-          <details class="lite-menu-group">
-            <summary class="lite-menu-parent">{item.label ?? item.name}</summary>
-            {#each item.children as child}
-              {#if child.children && child.children.length > 0}
-                <details class="lite-menu-group" style="margin-left:12px">
-                  <summary class="lite-menu-parent">{child.label ?? child.name}</summary>
-                  {#each child.children as grandchild}
-                    <a
-                      href={grandchild.href ?? `${basePath}/${grandchild.name}`}
-                      class={isActive(grandchild.href ?? `${basePath}/${grandchild.name}`) ? 'active' : ''}
-                      target={grandchild.target === '_blank' ? '_blank' : undefined}
-                      style="padding-left:40px"
-                    >{grandchild.label ?? grandchild.name}</a>
-                  {/each}
-                </details>
-              {:else}
-                <a
-                  href={child.href ?? `${basePath}/${child.name}`}
-                  class={isActive(child.href ?? `${basePath}/${child.name}`) ? 'active' : ''}
-                  target={child.target === '_blank' ? '_blank' : undefined}
-                  style="padding-left:28px"
-                >{child.label ?? child.name}</a>
-              {/if}
-            {/each}
-          </details>
-        {:else}
-          <a
-            href={item.href ?? `${basePath}/${item.name}`}
-            class={isActive(item.href ?? `${basePath}/${item.name}`) ? 'active' : ''}
-            target={item.target === '_blank' ? '_blank' : undefined}
-          >{item.label ?? item.name}</a>
-        {/if}
-      {/each}
-    {:else}
-      {#each menuResources as res}
-        <a
-          href={`${basePath}/${res.name}`}
-          class={res.name === currentResource ? 'active' : ''}
-        >
-          {res.label}
-        </a>
-      {/each}
-    {/if}
-    {#if userName}
-      <div style="position:absolute;bottom:0;left:0;right:0;padding:12px 16px;border-top:1px solid #334155;font-size:12px;color:#94a3b8;">
-        {userName}
-        <form method="POST" action={`${basePath}/login?/logout`} style="display:inline;margin-left:8px;">
-          <button type="submit" class="lite-btn lite-btn-sm" style="color:#94a3b8;border-color:#475569;background:transparent;">Logout</button>
-        </form>
-      </div>
-    {/if}
-  </nav>
-
-  <!-- Main Content -->
-  <main class="lite-main">
-    {@render children()}
-  </main>
-</div>
-

package/src/components/LiteLogin.svelte

@@ -1,41 +0,0 @@
-<script lang="ts">
-  /**
-   * LiteLogin — Simple login form for SSR.
-   * Posts to SvelteKit form action, no JS needed.
-   */
-  import { t } from '@svadmin/core/i18n';
-
-  interface Props {
-    error?: string;
-    brandName?: string;
-    action?: string;
-  }
-
-  let { error, brandName = 'Admin', action = '?/login' }: Props = $props();
-</script>
-
-<div class="lite-login-wrapper">
-  <div class="lite-login-card">
-    <div class="lite-card">
-      <h2 style="text-align:center;margin:0 0 20px;font-size:20px;font-weight:600;">{brandName}</h2>
-
-      {#if error}
-        <div class="lite-alert lite-alert-error">{error}</div>
-      {/if}
-
-      <form method="POST" action={action}>
-        <div class="lite-form-group">
-          <label for="email">{t('auth.email') || 'Email'}</label>
-          <input type="text" name="email" id="email" class="lite-input" placeholder="user@example.com" required />
-        </div>
-        <div class="lite-form-group">
-          <label for="password">{t('auth.password') || 'Password'}</label>
-          <input type="password" name="password" id="password" class="lite-input" required />
-        </div>
-        <button type="submit" class="lite-btn lite-btn-primary" style="width:100%;padding:10px;">
-          {t('auth.signIn') || 'Sign In'}
-        </button>
-      </form>
-    </div>
-  </div>
-</div>

package/src/components/LitePagination.svelte

@@ -1,73 +0,0 @@
-<script lang="ts">
-  /**
-   * LitePagination — Pure <a> tag pagination for SSR.
-   * No JavaScript. All page transitions are full page navigations.
-   */
-  import { t } from '@svadmin/core/i18n';
-
-  interface Props {
-    page: number;
-    totalPages: number;
-    /** Base URL that page numbers will be appended to */
-    baseUrl?: string;
-    /** Additional parameters to preserve (like sort, order, q) */
-    preserveParams?: Record<string, string>;
-  }
-
-  let { page, totalPages, baseUrl = '', preserveParams = {} }: Props = $props();
-
-  // Show max 7 page links
-  const visiblePages = $derived.by(() => {
-    const pages: (number | '...')[] = [];
-    if (totalPages <= 7) {
-      for (let i = 1; i <= totalPages; i++) pages.push(i);
-    } else {
-      pages.push(1);
-      if (page > 3) pages.push('...');
-      for (let i = Math.max(2, page - 1); i <= Math.min(totalPages - 1, page + 1); i++) {
-        pages.push(i);
-      }
-      if (page < totalPages - 2) pages.push('...');
-      pages.push(totalPages);
-    }
-    return pages;
-  });
-
-  function pageUrl(p: number): string {
-    const params = new URLSearchParams(preserveParams);
-    params.set('page', String(p));
-    const qs = params.toString();
-    const sep = baseUrl.includes('?') ? '&' : '?';
-    return `${baseUrl}${baseUrl && !baseUrl.includes('?') ? '?' : sep}${qs}`;
-  }
-</script>
-
-{#if totalPages > 1}
-  <nav class="lite-pagination">
-    {#if page > 1}
-      <a href={pageUrl(page - 1)}>← {t('common.prev') || 'Prev'}</a>
-    {:else}
-      <span class="disabled">← {t('common.prev') || 'Prev'}</span>
-    {/if}
-
-    {#each visiblePages as p}
-      {#if p === '...'}
-        <span class="disabled">…</span>
-      {:else if p === page}
-        <span class="active">{p}</span>
-      {:else}
-        <a href={pageUrl(p)}>{p}</a>
-      {/if}
-    {/each}
-
-    {#if page < totalPages}
-      <a href={pageUrl(page + 1)}>{t('common.next') || 'Next'} →</a>
-    {:else}
-      <span class="disabled">{t('common.next') || 'Next'} →</span>
-    {/if}
-
-    <span class="lite-pagination-info">
-      {t('common.pageOf', { page, total: totalPages }) || `Page ${page} of ${totalPages}`}
-    </span>
-  </nav>
-{/if}

package/src/components/LitePermissionMatrix.svelte

@@ -1,147 +0,0 @@
-<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}
-      <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}
-            <th style="text-align:center;">{action.name}</th>
-          {/each}
-        </tr>
-      </thead>
-      <tbody>
-        {#each resources as resource, 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}
-              <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/src/components/LiteSearch.svelte

@@ -1,41 +0,0 @@
-<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]}
-    <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/src/components/LiteShow.svelte

@@ -1,61 +0,0 @@
-<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}
-        {@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/src/components/LiteShowField.svelte

@@ -1,51 +0,0 @@
-<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';
-
-  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}
-  <a href={String(value)} target="_blank" rel="noopener">{value}</a>
-{:else if field.type === 'email' && value}
-  <a href="mailto:{value}">{value}</a>
-{: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}
-    <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/src/components/LiteStatsCard.svelte

@@ -1,70 +0,0 @@
-<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}