@svadmin/lite 0.3.6 → 0.3.10

package/dist/components/layout/LiteErrorBoundary.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  /**
+   * SSR Error Boundary.
+   * Since native Svelte <svelte:boundary> relies on CSR to catch JS exceptions, 
+   * this component delegates error handling upstream to the SvelteKit +error.svelte mechanism.
+   * In CSR disabled environments, returning just the slot is standard practice.
+   */
+  import type { Snippet } from 'svelte';
+  
+  interface Props {
+    children?: Snippet;
+  }
+  
+  let { children }: Props = $props();
+</script>
+
+<!-- The error interception must be handled by the backend SSR framework (e.g. SvelteKit) -->
+{#if children}
+  {@render children()}
+{/if}

package/dist/components/layout/LiteErrorBoundary.svelte.d.ts

@@ -0,0 +1,13 @@
+/**
+   * SSR Error Boundary.
+   * Since native Svelte <svelte:boundary> relies on CSR to catch JS exceptions,
+   * this component delegates error handling upstream to the SvelteKit +error.svelte mechanism.
+   * In CSR disabled environments, returning just the slot is standard practice.
+   */
+import type { Snippet } from 'svelte';
+interface Props {
+    children?: Snippet;
+}
+declare const LiteErrorBoundary: import("svelte").Component<Props, {}, "">;
+type LiteErrorBoundary = ReturnType<typeof LiteErrorBoundary>;
+export default LiteErrorBoundary;

package/dist/components/layout/LiteErrorComponent.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+  import { t } from '@svadmin/core/i18n';
+  import { AlertTriangle } from '@lucide/svelte';
+
+  interface Props {
+    title?: string;
+    message?: string;
+    code?: string | number;
+    homeUrl?: string;
+  }
+
+  let {
+    title = 'An error occurred',
+    message = 'Something went wrong while processing your request.',
+    code = 500,
+    homeUrl = '/lite',
+  }: Props = $props();
+</script>
+
+<div style="min-height: 50vh; display: flex; align-items: center; justify-content: center; padding: 20px;">
+  <div class="lite-card" style="max-width: 480px; width: 100%; text-align: center; padding: 40px;">
+    <AlertTriangle style="width: 48px; height: 48px; color: #ef4444; margin: 0 auto 16px;" />
+    
+    <h1 style="font-size: 24px; font-weight: 600; color: #0f172a; margin: 0 0 8px;">
+      {#if code}
+        <span style="color: #ef4444; margin-right: 8px;">{code}</span>
+      {/if}
+      {title}
+    </h1>
+    
+    <p style="color: #64748b; font-size: 15px; margin: 0 0 24px; line-height: 1.5;">{message}</p>
+    
+    <a href={homeUrl} class="lite-btn lite-btn-primary" style="display: inline-block;">
+      {t('common.returnHome') || 'Return to Home'}
+    </a>
+  </div>
+</div>

package/dist/components/layout/LiteErrorComponent.svelte.d.ts

@@ -0,0 +1,9 @@
+interface Props {
+    title?: string;
+    message?: string;
+    code?: string | number;
+    homeUrl?: string;
+}
+declare const LiteErrorComponent: import("svelte").Component<Props, {}, "">;
+type LiteErrorComponent = ReturnType<typeof LiteErrorComponent>;
+export default LiteErrorComponent;

package/dist/components/layout/LiteHeader.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    title?: string;
+    children?: Snippet;
+  }
+
+  let { title = '', children }: Props = $props();
+</script>
+
+<header class="lite-header" style="padding: 16px 24px; background: white; border-bottom: 1px solid #e2e8f0; display: flex; justify-content: space-between; align-items: center;">
+  <h2 style="margin: 0; font-size: 18px; font-weight: 600; color: #0f172a;">{title}</h2>
+  <div style="display: flex; gap: 12px; align-items: center;">
+    {#if children}
+      {@render children()}
+    {/if}
+  </div>
+</header>

package/dist/components/layout/LiteHeader.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    title?: string;
+    children?: Snippet;
+}
+declare const LiteHeader: import("svelte").Component<Props, {}, "">;
+type LiteHeader = ReturnType<typeof LiteHeader>;
+export default LiteHeader;

package/dist/components/layout/LiteNavigateToResource.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+  /**
+   * SSR redirection helper component
+   * Normally redirection is done via +page.server.ts load() function in SvelteKit.
+   * This component will do a client-side fallback redirect if rendered.
+   */
+  import { onMount } from 'svelte';
+
+  interface Props {
+    resource: string;
+    basePath?: string;
+  }
+
+  let { resource, basePath = '/lite' }: Props = $props();
+
+  onMount(() => {
+    // Only fires if JS somehow runs, otherwise server should have redirected.
+    window.location.href = `${basePath}/${resource}`;
+  });
+</script>
+
+<noscript>
+  <meta http-equiv="refresh" content={`0; url=${basePath}/${resource}`} />
+</noscript>
+<p>Redirecting to {resource}...</p>

package/dist/components/layout/LiteNavigateToResource.svelte.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    resource: string;
+    basePath?: string;
+}
+declare const LiteNavigateToResource: import("svelte").Component<Props, {}, "">;
+type LiteNavigateToResource = ReturnType<typeof LiteNavigateToResource>;
+export default LiteNavigateToResource;

package/dist/components/layout/LiteSidebar.svelte

@@ -0,0 +1,93 @@
+<script lang="ts">
+  import type { ResourceDefinition, MenuItem } from '@svadmin/core';
+
+  interface Props {
+    resources: ResourceDefinition[];
+    currentResource?: string;
+    brandName?: string;
+    userName?: string;
+    basePath?: string;
+    menu?: MenuItem[];
+  }
+
+  let {
+    resources,
+    currentResource = '',
+    brandName = 'Admin',
+    userName = '',
+    basePath = '/lite',
+    menu,
+  }: 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 + '/', '');
+  }
+
+  function hasActiveChild(children?: MenuItem[]): boolean {
+    if (!children) return false;
+    return children.some(c => isActive(c.href ?? `${basePath}/${c.name}`));
+  }
+</script>
+
+<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" open={hasActiveChild(item.children)}>
+          <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" open={hasActiveChild(child.children)}>
+                <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 ?? res.name}
+      </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;padding:2px 8px;">Logout</button>
+      </form>
+    </div>
+  {/if}
+</nav>

package/dist/components/layout/LiteSidebar.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { ResourceDefinition, MenuItem } from '@svadmin/core';
+interface Props {
+    resources: ResourceDefinition[];
+    currentResource?: string;
+    brandName?: string;
+    userName?: string;
+    basePath?: string;
+    menu?: MenuItem[];
+}
+declare const LiteSidebar: import("svelte").Component<Props, {}, "">;
+type LiteSidebar = ReturnType<typeof LiteSidebar>;
+export default LiteSidebar;

package/dist/components/layout/index.js

@@ -0,0 +1,8 @@
+export { default as LiteSidebar } from './LiteSidebar.svelte';
+export { default as LiteHeader } from './LiteHeader.svelte';
+export { default as LiteNavigateToResource } from './LiteNavigateToResource.svelte';
+export { default as LiteCatchAllNavigate } from './LiteCatchAllNavigate.svelte';
+export { default as LiteCanAccess } from './LiteCanAccess.svelte';
+export { default as LiteAuthenticated } from './LiteAuthenticated.svelte';
+export { default as LiteErrorComponent } from './LiteErrorComponent.svelte';
+export { default as LiteErrorBoundary } from './LiteErrorBoundary.svelte';

package/dist/components/pages/LiteCreatePage.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+  import type { ResourceDefinition } from '@svadmin/core';
+  import { t } from '@svadmin/core/i18n';
+  import LiteForm from '../LiteForm.svelte';
+  import LiteListButton from '../buttons/LiteListButton.svelte';
+
+  interface Props {
+    resource: ResourceDefinition;
+    errors?: Record<string, string[]>;
+    values?: Record<string, unknown>;
+    basePath?: string;
+  }
+
+  let {
+    resource,
+    errors = {},
+    values = {},
+    basePath = '/lite',
+  }: Props = $props();
+</script>
+
+<div class="lite-page">
+  <div class="lite-page-header">
+    <h1 class="lite-page-title">{t('common.create') || 'Create'} {resource.label || resource.name}</h1>
+    <div class="lite-page-actions">
+      <LiteListButton resource={resource.name} {basePath} />
+    </div>
+  </div>
+
+  <LiteForm
+    fields={resource.fields}
+    mode="create"
+    {resource}
+    {errors}
+    {values}
+    action="?/create"
+    cancelUrl={`${basePath}/${resource.name}`}
+  />
+</div>

package/dist/components/pages/LiteCreatePage.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { ResourceDefinition } from '@svadmin/core';
+interface Props {
+    resource: ResourceDefinition;
+    errors?: Record<string, string[]>;
+    values?: Record<string, unknown>;
+    basePath?: string;
+}
+declare const LiteCreatePage: import("svelte").Component<Props, {}, "">;
+type LiteCreatePage = ReturnType<typeof LiteCreatePage>;
+export default LiteCreatePage;

package/dist/components/pages/LiteEditPage.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+  import type { ResourceDefinition } from '@svadmin/core';
+  import { t } from '@svadmin/core/i18n';
+  import LiteForm from '../LiteForm.svelte';
+  import LiteListButton from '../buttons/LiteListButton.svelte';
+  import LiteShowButton from '../buttons/LiteShowButton.svelte';
+  import LiteDeleteButton from '../buttons/LiteDeleteButton.svelte';
+
+  interface Props {
+    resource: ResourceDefinition;
+    record: Record<string, unknown>;
+    errors?: Record<string, string[]>;
+    basePath?: string;
+    canDelete?: boolean;
+    canShow?: boolean;
+  }
+
+  let {
+    resource,
+    record,
+    errors = {},
+    basePath = '/lite',
+    canDelete = true,
+    canShow = true,
+  }: Props = $props();
+
+  let pk = $derived(resource.primaryKey ?? 'id');
+  let idStr = $derived(String(record[pk]));
+</script>
+
+<div class="lite-page">
+  <div class="lite-page-header">
+    <h1 class="lite-page-title">{t('common.edit') || 'Edit'} {resource.label || resource.name} #{idStr}</h1>
+    <div class="lite-page-actions">
+      {#if canShow}
+        <LiteShowButton resource={resource.name} recordItemId={idStr} {basePath} />
+      {/if}
+      <LiteListButton resource={resource.name} {basePath} />
+      {#if canDelete}
+        <LiteDeleteButton resource={resource.name} recordItemId={idStr} redirectUrl={`${basePath}/${resource.name}`} {basePath} />
+      {/if}
+    </div>
+  </div>
+
+  <LiteForm
+    fields={resource.fields}
+    mode="edit"
+    {resource}
+    {errors}
+    values={record}
+    action="?/update"
+    cancelUrl={`${basePath}/${resource.name}`}
+  />
+</div>

package/dist/components/pages/LiteEditPage.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { ResourceDefinition } from '@svadmin/core';
+interface Props {
+    resource: ResourceDefinition;
+    record: Record<string, unknown>;
+    errors?: Record<string, string[]>;
+    basePath?: string;
+    canDelete?: boolean;
+    canShow?: boolean;
+}
+declare const LiteEditPage: import("svelte").Component<Props, {}, "">;
+type LiteEditPage = ReturnType<typeof LiteEditPage>;
+export default LiteEditPage;

package/dist/components/pages/LiteForgotPasswordPage.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+  interface Props {
+    title?: string;
+    description?: string;
+    action?: string;
+    loginUrl?: string;
+    errors?: string[];
+    successMessage?: string;
+  }
+
+  let {
+    title = 'Forgot Password',
+    description = 'Enter your email to receive a password reset link',
+    action = '?/forgot_password',
+    loginUrl = '/lite/login',
+    errors = [],
+    successMessage = '',
+  }: Props = $props();
+</script>
+
+<div style="min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #f8fafc; padding: 20px;">
+  <div class="lite-card" style="width: 100%; max-width: 400px; padding: 32px;">
+    <div style="text-align: center; margin-bottom: 24px;">
+      <h1 style="font-size: 24px; font-weight: 600; color: #0f172a; margin: 0 0 8px;">{title}</h1>
+      <p style="font-size: 14px; color: #64748b; margin: 0;">{description}</p>
+    </div>
+
+    <!-- Native form action -->
+    <form method="POST" {action} style="display: flex; flex-direction: column; gap: 16px;">
+      <div class="lite-form-group">
+        <label for="email">Email</label>
+        <input type="email" id="email" name="email" class="lite-input" required />
+      </div>
+
+      {#if errors.length > 0}
+        <div style="padding: 12px; background: #fef2f2; border-radius: 6px; color: #ef4444; font-size: 13px;">
+          <ul style="margin: 0; padding-left: 20px;">
+            {#each errors as err, _i (_i)}
+              <li>{err}</li>
+            {/each}
+          </ul>
+        </div>
+      {/if}
+
+      {#if successMessage}
+        <div style="padding: 12px; background: #ecfdf5; border-radius: 6px; color: #10b981; font-size: 13px;">
+          {successMessage}
+        </div>
+      {/if}
+
+      <button type="submit" class="lite-btn lite-btn-primary" style="width: 100%; justify-content: center; padding: 10px;">
+        Send Reset Link
+      </button>
+
+      <div style="text-align: center; font-size: 13px; color: #64748b; margin-top: 8px;">
+        Remember your password? <a href={loginUrl} style="color: #2563eb; text-decoration: none;">Back to Login</a>
+      </div>
+    </form>
+  </div>
+</div>

package/dist/components/pages/LiteForgotPasswordPage.svelte.d.ts

@@ -0,0 +1,11 @@
+interface Props {
+    title?: string;
+    description?: string;
+    action?: string;
+    loginUrl?: string;
+    errors?: string[];
+    successMessage?: string;
+}
+declare const LiteForgotPasswordPage: import("svelte").Component<Props, {}, "">;
+type LiteForgotPasswordPage = ReturnType<typeof LiteForgotPasswordPage>;
+export default LiteForgotPasswordPage;

package/dist/components/pages/LiteListPage.svelte

@@ -0,0 +1,81 @@
+<script lang="ts">
+  import type { ResourceDefinition } from '@svadmin/core';
+  import { t } from '@svadmin/core/i18n';
+  import LiteTable from '../LiteTable.svelte';
+  import LitePagination from '../LitePagination.svelte';
+  import LiteSearch from '../LiteSearch.svelte';
+  import LiteCreateButton from '../buttons/LiteCreateButton.svelte';
+  import LiteRefreshButton from '../buttons/LiteRefreshButton.svelte';
+
+  interface Props {
+    resource: ResourceDefinition;
+    records: Record<string, unknown>[];
+    total: number;
+    pagination: { page: number; perPage: number };
+    currentSort?: string;
+    currentOrder?: 'asc' | 'desc';
+    currentSearch?: string;
+    basePath?: string;
+    canCreate?: boolean;
+    canEdit?: boolean;
+    canDelete?: boolean;
+  }
+
+  let {
+    resource,
+    records,
+    total,
+    pagination,
+    currentSort,
+    currentOrder = 'asc',
+    currentSearch,
+    basePath = '/lite',
+    canCreate = true,
+    canEdit = true,
+    canDelete = true,
+  }: Props = $props();
+</script>
+
+<div class="lite-page">
+  <div class="lite-page-header">
+    <h1 class="lite-page-title">{resource.label || resource.name} {t('common.list') || 'List'}</h1>
+    <div class="lite-page-actions">
+      {#if canCreate}
+        <LiteCreateButton resource={resource.name} {basePath} />
+      {/if}
+      <LiteRefreshButton hideText />
+    </div>
+  </div>
+
+  <div class="lite-card" style="margin-bottom: 20px;">
+    <div style="padding: 16px; border-bottom: 1px solid #e2e8f0; display: flex; justify-content: space-between; align-items: center;">
+      <LiteSearch value={currentSearch} placeholder={t('common.search') || 'Search...'} />
+      <span style="font-size: 13px; color: #64748b;">
+        {t('common.total') || 'Total'}: {total}
+      </span>
+    </div>
+
+    <LiteTable
+      {records}
+      {resource}
+      {currentSort}
+      {currentOrder}
+      {currentSearch}
+      {basePath}
+      {canEdit}
+      {canDelete}
+    />
+    
+    {#if total > pagination.perPage}
+      <LitePagination
+        page={pagination.page}
+        totalPages={Math.ceil(total / pagination.perPage)}
+        preserveParams={{
+          ...(currentSort ? { sort: currentSort } : {}),
+          ...(currentOrder ? { order: currentOrder } : {}),
+          ...(currentSearch ? { q: currentSearch } : {})
+        }}
+      />
+    {/if}
+  </div>
+</div>

package/dist/components/pages/LiteListPage.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { ResourceDefinition } from '@svadmin/core';
+interface Props {
+    resource: ResourceDefinition;
+    records: Record<string, unknown>[];
+    total: number;
+    pagination: {
+        page: number;
+        perPage: number;
+    };
+    currentSort?: string;
+    currentOrder?: 'asc' | 'desc';
+    currentSearch?: string;
+    basePath?: string;
+    canCreate?: boolean;
+    canEdit?: boolean;
+    canDelete?: boolean;
+}
+declare const LiteListPage: import("svelte").Component<Props, {}, "">;
+type LiteListPage = ReturnType<typeof LiteListPage>;
+export default LiteListPage;

package/dist/components/pages/LiteProfilePage.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+  import { t } from '@svadmin/core/i18n';
+
+  interface Props {
+    user: { id?: string | number; name?: string; email?: string; [key: string]: unknown };
+    action?: string;
+    errors?: string[];
+    successMessage?: string;
+  }
+
+  let {
+    user,
+    action = '?/update_profile',
+    errors = [],
+    successMessage = '',
+  }: Props = $props();
+</script>
+
+<div class="lite-page">
+  <div class="lite-page-header">
+    <h1 class="lite-page-title">{t('common.profile') || 'User Profile'}</h1>
+  </div>
+
+  <div class="lite-card" style="max-width: 600px; margin: 0 auto; padding: 24px;">
+    <form method="POST" {action} style="display: flex; flex-direction: column; gap: 16px;">
+      <div class="lite-form-group">
+        <label for="name">Name</label>
+        <input type="text" id="name" name="name" class="lite-input" value={user?.name ?? ''} />
+      </div>
+
+      <div class="lite-form-group">
+        <label for="email">Email</label>
+        <input type="email" id="email" name="email" class="lite-input" value={user?.email ?? ''} required />
+      </div>
+      
+      <!-- Password update fields can be added here or handled in a separate form -->
+
+      {#if errors.length > 0}
+        <div style="padding: 12px; background: #fef2f2; border-radius: 6px; color: #ef4444; font-size: 13px;">
+          <ul style="margin: 0; padding-left: 20px;">
+            {#each errors as err, _i (_i)}
+              <li>{err}</li>
+            {/each}
+          </ul>
+        </div>
+      {/if}
+
+      {#if successMessage}
+        <div style="padding: 12px; background: #ecfdf5; border-radius: 6px; color: #10b981; font-size: 13px;">
+          {successMessage}
+        </div>
+      {/if}
+
+      <div style="display: flex; justify-content: flex-end; margin-top: 8px;">
+        <button type="submit" class="lite-btn lite-btn-primary">
+          {t('common.save') || 'Save Profile'}
+        </button>
+      </div>
+    </form>
+  </div>
+</div>

package/dist/components/pages/LiteProfilePage.svelte.d.ts

@@ -0,0 +1,14 @@
+interface Props {
+    user: {
+        id?: string | number;
+        name?: string;
+        email?: string;
+        [key: string]: unknown;
+    };
+    action?: string;
+    errors?: string[];
+    successMessage?: string;
+}
+declare const LiteProfilePage: import("svelte").Component<Props, {}, "">;
+type LiteProfilePage = ReturnType<typeof LiteProfilePage>;
+export default LiteProfilePage;