@svadmin/lite 0.3.7 → 0.3.12

package/dist/components/LiteConfirmDialog.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+  /**
+   * LiteConfirmDialog — SSR-compatible confirmation dialog.
+   * Utilizes pure HTML <details> and <summary> to show a popup.
+   * No client-side JS required.
+   */
+
+  interface Props {
+    title?: string;
+    description?: string;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    /** The summary element (button) that triggers the dropdown */
+    triggerLabel: string;
+    triggerClass?: string;
+    /** Form action to submit on confirm */
+    action: string;
+    /** Any hidden inputs to include in the form */
+    hiddenInputs?: Record<string, string>;
+    align?: 'left' | 'right';
+  }
+
+  let {
+    title = 'Are you sure?',
+    description = 'This action cannot be undone.',
+    confirmLabel = 'Confirm',
+    cancelLabel = 'Cancel',
+    triggerLabel,
+    triggerClass = 'lite-btn lite-btn-danger lite-btn-sm',
+    action,
+    hiddenInputs = {},
+    align = 'right'
+  }: Props = $props();
+</script>
+
+<details class="lite-confirm-details">
+  <summary class={triggerClass}>{triggerLabel}</summary>
+  <div class="lite-confirm-panel" style="text-align:left; {align === 'right' ? 'right:0;' : 'left:0;'}">
+    <div style="font-weight:600;margin-bottom:8px;color:#0f172a;">{title}</div>
+    {#if description}
+      <div style="font-size:12px;color:#64748b;margin-bottom:16px;">{description}</div>
+    {/if}
+    <form method="POST" {action} style="display:flex;margin:0;justify-content:flex-end;">
+      {#each Object.entries(hiddenInputs) as [key, val] (key)}
+        <input type="hidden" name={key} value={val} />
+      {/each}
+      <button
+        type="button"
+        class="lite-btn lite-btn-sm"
+        style="margin-right:8px;"
+        onclick={(e) => (e.currentTarget as HTMLElement).closest('details')?.removeAttribute('open')}
+      >
+        {cancelLabel}
+      </button>
+      <button type="submit" class="lite-btn lite-btn-primary lite-btn-sm lite-btn-danger">
+        {confirmLabel}
+      </button>
+    </form>
+  </div>
+</details>

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

@@ -0,0 +1,22 @@
+/**
+ * LiteConfirmDialog — SSR-compatible confirmation dialog.
+ * Utilizes pure HTML <details> and <summary> to show a popup.
+ * No client-side JS required.
+ */
+interface Props {
+    title?: string;
+    description?: string;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    /** The summary element (button) that triggers the dropdown */
+    triggerLabel: string;
+    triggerClass?: string;
+    /** Form action to submit on confirm */
+    action: string;
+    /** Any hidden inputs to include in the form */
+    hiddenInputs?: Record<string, string>;
+    align?: 'left' | 'right';
+}
+declare const LiteConfirmDialog: import("svelte").Component<Props, {}, "">;
+type LiteConfirmDialog = ReturnType<typeof LiteConfirmDialog>;
+export default LiteConfirmDialog;

package/dist/components/LiteEmptyState.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+  /**
+   * LiteEmptyState — SSR-compatible empty state indicator.
+   * Renders a centered box with an icon, title, description, and link.
+   * No client-side JS required.
+   */
+
+  interface Props {
+    title: string;
+    description?: string;
+    /** Optional HTML entity or text icon */
+    icon?: string;
+    actionLabel?: string;
+    actionUrl?: string;
+  }
+
+  let {
+    title,
+    description,
+    icon,
+    actionLabel,
+    actionUrl,
+  }: Props = $props();
+</script>
+
+<div class="lite-empty-state lite-card" style="text-align:center;padding:48px 24px;">
+  {#if icon}
+    <div style="font-size:32px;color:#94a3b8;margin-bottom:16px;">{icon}</div>
+  {/if}
+  <h3 style="font-size:16px;font-weight:600;color:#0f172a;margin:0 0 8px 0;">{title}</h3>
+  {#if description}
+    <p style="font-size:14px;color:#64748b;margin:0 0 24px 0;">{description}</p>
+  {/if}
+  {#if actionLabel && actionUrl}
+    <a href={actionUrl} class="lite-btn lite-btn-primary">
+      {actionLabel}
+    </a>
+  {/if}
+</div>

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

@@ -0,0 +1,16 @@
+/**
+ * LiteEmptyState — SSR-compatible empty state indicator.
+ * Renders a centered box with an icon, title, description, and link.
+ * No client-side JS required.
+ */
+interface Props {
+    title: string;
+    description?: string;
+    /** Optional HTML entity or text icon */
+    icon?: string;
+    actionLabel?: string;
+    actionUrl?: string;
+}
+declare const LiteEmptyState: import("svelte").Component<Props, {}, "">;
+type LiteEmptyState = ReturnType<typeof LiteEmptyState>;
+export default LiteEmptyState;

package/dist/components/LiteForm.svelte

@@ -0,0 +1,165 @@
+<script lang="ts">
+  /**
+   * LiteForm — Server-rendered form driven by FieldDefinitions.
+   * Uses a native <form> with method="POST" for no-JavaScript submission.
+   * Integrates with sveltekit-superforms for server-side validation.
+   */
+  import type { FieldDefinition, ResourceDefinition } from '@svadmin/core';
+  import { t } from '@svadmin/core/i18n';
+  import { fieldToInputType, fieldToPlaceholder } from '../schema-generator';
+  import LiteArrayField from './LiteArrayField.svelte';
+
+  interface Props {
+    fields: FieldDefinition[];
+    /** Resource definition (used for primaryKey) */
+    resource?: ResourceDefinition;
+    /** Existing values (for edit mode) */
+    values?: Record<string, unknown>;
+    /** Validation errors from server */
+    errors?: Record<string, string[]>;
+    /** 'create' or 'edit' */
+    mode?: 'create' | 'edit';
+    /** Form action URL */
+    action?: string;
+    /** Submit button label */
+    submitLabel?: string;
+    /** Cancel URL */
+    cancelUrl?: string;
+  }
+
+  let {
+    fields,
+    resource,
+    values = {},
+    errors = {},
+    mode = 'create',
+    action = '',
+    submitLabel,
+    cancelUrl,
+  }: Props = $props();
+
+  const formFields = $derived(
+    fields.filter(f => {
+      if (f.showInForm === false) return false;
+      if (mode === 'create' && f.showInCreate === false) return false;
+      if (mode === 'edit' && f.showInEdit === false) return false;
+      return true;
+    })
+  );
+
+  function hasExistingUpload(value: unknown): boolean {
+    if (typeof value === 'string') return value.trim().length > 0;
+    if (Array.isArray(value)) return value.some(hasExistingUpload);
+    return typeof File !== 'undefined'
+      && value instanceof File
+      && value.size > 0
+      && value.name !== '';
+  }
+</script>
+
+<form method="POST" action={action || undefined} class="lite-card" enctype="multipart/form-data">
+  {#if mode === 'edit'}
+    {@const pk = resource?.primaryKey ?? 'id'}
+    {#if values[pk] != null}
+      <input type="hidden" name="_id" value={String(values[pk])} />
+    {/if}
+  {/if}
+
+  {#each formFields as field, _i (_i)}
+    {@const inputType = fieldToInputType(field)}
+    {@const placeholder = fieldToPlaceholder(field)}
+    {@const value = values[field.key]}
+    {@const fieldErrors = errors[field.key]}
+    {@const hasError = fieldErrors && fieldErrors.length > 0}
+
+    <div class="lite-form-group">
+      {#if field.type === 'array'}
+        <LiteArrayField
+          {field}
+          {mode}
+          values={Array.isArray(value)
+            ? value.filter((item): item is Record<string, unknown> => typeof item === 'object' && item !== null)
+            : []}
+        />
+      {:else if inputType === 'checkbox'}
+        <div class="lite-checkbox-group">
+          <input
+            type="checkbox"
+            name={field.key}
+            id={field.key}
+            checked={!!value}
+          />
+          <label for={field.key}>{field.label}</label>
+        </div>
+      {:else}
+        <label for={field.key}>
+          {field.label}
+          {#if field.required}<span class="required">*</span>{/if}
+        </label>
+
+        {#if inputType === 'textarea'}
+          <textarea
+            name={field.key}
+            id={field.key}
+            class="lite-input {hasError ? 'lite-input-error' : ''}"
+            placeholder={placeholder}
+          >{value ?? ''}</textarea>
+        {:else if inputType === 'select'}
+          <select
+            name={field.key}
+            id={field.key}
+            class="lite-select {hasError ? 'lite-input-error' : ''}"
+            {...field.type === 'multiselect' ? { multiple: true } : {}}
+          >
+            {#if field.type !== 'multiselect'}
+              <option value="">-- {t('common.select') || 'Select'} --</option>
+            {/if}
+            {#if field.options}
+              {#each field.options as opt, _i (_i)}
+                <option 
+                  value={String(opt.value)} 
+                  selected={field.type === 'multiselect' ? (Array.isArray(value) && value.includes(opt.value)) : value === opt.value}
+                >
+                  {opt.label}
+                </option>
+              {/each}
+            {/if}
+          </select>
+        {:else if inputType === 'file'}
+          <input
+            type="file"
+            name={field.key}
+            id={field.key}
+            class="lite-input {hasError ? 'lite-input-error' : ''}"
+            required={field.required && (mode === 'create' || !hasExistingUpload(value))}
+            multiple={field.type === 'images'}
+          />
+        {:else}
+          <input
+            type={inputType}
+            name={field.key}
+            id={field.key}
+            value={String(value ?? '')}
+            class="lite-input {hasError ? 'lite-input-error' : ''}"
+            placeholder={placeholder}
+            {... field.required ? { required: true } : {}}
+          />
+        {/if}
+
+      {/if}
+
+      {#if hasError}
+        {#each fieldErrors as err (err)}
+          <div class="lite-error-text">{err}</div>
+        {/each}
+      {/if}
+    </div>
+  {/each}
+
+  <div style="display:flex;align-items:center;margin-top:20px;">
+    <button type="submit" class="lite-btn lite-btn-primary">{submitLabel || t('common.save') || 'Save'}</button>
+    {#if cancelUrl}
+      <a href={cancelUrl} class="lite-btn" style="margin-left:8px;">{t('common.cancel') || 'Cancel'}</a>
+    {/if}
+  </div>
+</form>

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

@@ -0,0 +1,26 @@
+/**
+   * LiteForm — Server-rendered form driven by FieldDefinitions.
+   * Uses a native <form> with method="POST" for no-JavaScript submission.
+   * Integrates with sveltekit-superforms for server-side validation.
+   */
+import type { FieldDefinition, ResourceDefinition } from '@svadmin/core';
+interface Props {
+    fields: FieldDefinition[];
+    /** Resource definition (used for primaryKey) */
+    resource?: ResourceDefinition;
+    /** Existing values (for edit mode) */
+    values?: Record<string, unknown>;
+    /** Validation errors from server */
+    errors?: Record<string, string[]>;
+    /** 'create' or 'edit' */
+    mode?: 'create' | 'edit';
+    /** Form action URL */
+    action?: string;
+    /** Submit button label */
+    submitLabel?: string;
+    /** Cancel URL */
+    cancelUrl?: string;
+}
+declare const LiteForm: import("svelte").Component<Props, {}, "">;
+type LiteForm = ReturnType<typeof LiteForm>;
+export default LiteForm;

package/dist/components/LiteLayout.svelte

@@ -0,0 +1,147 @@
+<script lang="ts">
+  /**
+   * LiteLayout — Minimal server-rendered sidebar + main layout.
+   * No client-side JS required. Supports multi-level menus via native HTML.
+   */
+  import type { ResourceDefinition, MenuItem } from '@svadmin/core';
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    resources: ResourceDefinition[];
+    currentResource?: string;
+    brandName?: string;
+    userName?: string;
+    basePath?: string;
+    /** Optional multi-level menu configuration */
+    menu?: MenuItem[];
+    children: Snippet;
+  }
+
+  let {
+    resources,
+    currentResource = '',
+    brandName = 'Admin',
+    userName = '',
+    basePath = '/lite',
+    menu,
+    children,
+  }: Props = $props();
+
+  const menuResources = $derived(
+    resources.filter((r: ResourceDefinition) => r.showInMenu !== false)
+  );
+
+  const mobileItems = $derived.by(() => {
+    if (!menu?.length) {
+      return menuResources.map((resource): MenuItem => ({
+        name: resource.name,
+        label: resource.label,
+        href: `${basePath}/${resource.name}`,
+      }));
+    }
+
+    const result: MenuItem[] = [];
+    const visit = (items: MenuItem[]) => {
+      for (const item of items) {
+        if (item.href || !item.children?.length) result.push(item);
+        if (item.children?.length) visit(item.children);
+      }
+    };
+    visit(menu);
+    return result;
+  });
+
+  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, _i (_i)}
+        {#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, _i (_i)}
+              {#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, _i (_i)}
+                    <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, _i (_i)}
+        <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>
+
+  <nav class="lite-mobile-nav" aria-label="Mobile navigation">
+    <details>
+      <summary>{brandName}</summary>
+      <div class="lite-mobile-nav-links">
+        {#each mobileItems as item (item.name)}
+          <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>
+        {/each}
+        {#if userName}
+          <div class="lite-mobile-user">
+            <span>{userName}</span>
+            <form method="POST" action={`${basePath}/login?/logout`}>
+              <button type="submit" class="lite-btn lite-btn-sm">Logout</button>
+            </form>
+          </div>
+        {/if}
+      </div>
+    </details>
+  </nav>
+
+  <!-- Main Content -->
+  <main class="lite-main">
+    {@render children()}
+  </main>
+</div>

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

@@ -0,0 +1,19 @@
+/**
+   * LiteLayout — Minimal server-rendered sidebar + main layout.
+   * No client-side JS required. Supports multi-level menus via native HTML.
+   */
+import type { ResourceDefinition, MenuItem } from '@svadmin/core';
+import type { Snippet } from 'svelte';
+interface Props {
+    resources: ResourceDefinition[];
+    currentResource?: string;
+    brandName?: string;
+    userName?: string;
+    basePath?: string;
+    /** Optional multi-level menu configuration */
+    menu?: MenuItem[];
+    children: Snippet;
+}
+declare const LiteLayout: import("svelte").Component<Props, {}, "">;
+type LiteLayout = ReturnType<typeof LiteLayout>;
+export default LiteLayout;

package/dist/components/LiteLogin.svelte

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

@@ -0,0 +1,8 @@
+interface Props {
+    error?: string;
+    brandName?: string;
+    action?: string;
+}
+declare const LiteLogin: import("svelte").Component<Props, {}, "">;
+type LiteLogin = ReturnType<typeof LiteLogin>;
+export default LiteLogin;

package/dist/components/LitePagination.svelte

@@ -0,0 +1,73 @@
+<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, _i (_i)}
+      {#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/dist/components/LitePagination.svelte.d.ts

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