@svadmin/lite 0.3.4 → 0.3.5

package/src/components/fields/LiteRichTextField.svelte

@@ -1,45 +0,0 @@
-<script lang="ts">
-  import type { FieldDefinition } from '@svadmin/core';
-
-  interface Props {
-    field: FieldDefinition;
-    value?: unknown;
-    error?: string[];
-    mode?: 'show' | 'edit' | 'create';
-  }
-
-  let { field, value, error = [], mode = 'show' }: Props = $props();
-  let hasError = $derived(error.length > 0);
-  
-</script>
-
-{#if mode === 'show'}
-  <!-- SSR fallback for rich text: render raw HTML if safe, or escaped. 
-       We use standard HTML output for SSR. If it includes scripts, 
-       backend should have sanitized it. -->
-  <div style="padding: 16px; border: 1px solid #e2e8f0; border-radius: 6px; max-height: 500px; overflow-y: auto; background: #fff;" class="prose">
-    {@html String(value ?? '—')}
-  </div>
-{:else}
-  <div class="lite-markdown-editor">
-    <div style="padding: 8px 12px; border: 1px solid #cbd5e1; border-bottom: none; border-radius: 6px 6px 0 0; background: #f8fafc; color: #64748b; font-size: 12px; display: flex; gap: 12px; font-weight: 500;">
-      <span>Markdown is supported</span>
-      <span style="color: #94a3b8;">**bold**</span>
-      <span style="color: #94a3b8; font-style: italic;">*italic*</span>
-      <span style="color: #94a3b8;"># heading</span>
-    </div>
-    <textarea
-      name={field.key}
-      id={field.key}
-      class="lite-input {hasError ? 'lite-input-error' : ''}"
-      style="min-height: 280px; font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; font-size: 13px; line-height: 1.6; padding: 16px; border-radius: 0 0 6px 6px; resize: vertical;"
-      placeholder="Wait... Rich Text Editor is disabled in lite mode.&#10;&#10;You can write standard HTML or use Markdown syntax here. Content will be safely rendered on the server."
-      {...field.required ? { required: true } : {}}
-    >{String(value ?? '')}</textarea>
-    {#if hasError}
-      {#each error as err}
-        <div class="lite-error-text">{err}</div>
-      {/each}
-    {/if}
-  </div>
-{/if}

package/src/components/fields/LiteSelectField.svelte

@@ -1,47 +0,0 @@
-<script lang="ts">
-  import type { FieldDefinition } from '@svadmin/core';
-  import { t } from '@svadmin/core/i18n';
-
-  interface Props {
-    field: FieldDefinition;
-    value?: unknown;
-    error?: string[];
-    mode?: 'show' | 'edit' | 'create';
-  }
-
-  let { field, value, error = [], mode = 'show' }: Props = $props();
-  let hasError = $derived(error.length > 0);
-
-  function displaySelect(v: unknown): string {
-    if (v == null) return '—';
-    const opt = field.options?.find(o => String(o.value) === String(v));
-    return opt?.label ?? String(v);
-  }
-</script>
-
-{#if mode === 'show'}
-  <span class="lite-badge">{displaySelect(value)}</span>
-{:else}
-  <div>
-    <select
-      name={field.key}
-      id={field.key}
-      class="lite-select {hasError ? 'lite-input-error' : ''}"
-      {...field.required ? { required: true } : {}}
-    >
-      <option value="">-- {t('common.select') || 'Select'} --</option>
-      {#if field.options}
-        {#each field.options as opt}
-          <option value={String(opt.value)} selected={String(value) === String(opt.value)}>
-            {opt.label}
-          </option>
-        {/each}
-      {/if}
-    </select>
-    {#if hasError}
-      {#each error as err}
-        <div class="lite-error-text">{err}</div>
-      {/each}
-    {/if}
-  </div>
-{/if}

package/src/components/fields/LiteTagField.svelte

@@ -1,44 +0,0 @@
-<script lang="ts">
-  import type { FieldDefinition } from '@svadmin/core';
-
-  interface Props {
-    field: FieldDefinition;
-    value?: unknown;
-    error?: string[];
-    mode?: 'show' | 'edit' | 'create';
-  }
-
-  let { field, value, error = [], mode = 'show' }: Props = $props();
-  let hasError = $derived(error.length > 0);
-  const tags = $derived(Array.isArray(value) ? value.map(String) : []);
-</script>
-
-{#if mode === 'show'}
-  <div style="display:flex; gap: 4px; flex-wrap: wrap;">
-    {#each tags as tag}
-      <span class="lite-badge">{tag}</span>
-    {:else}
-      <span>—</span>
-    {/each}
-  </div>
-{:else}
-  <div>
-    <!-- For SSR without JS, we just accept a comma-separated string -->
-    <input
-      type="text"
-      name={field.key}
-      id={field.key}
-      value={tags.join(', ')}
-      class="lite-input {hasError ? 'lite-input-error' : ''}"
-      placeholder="Comma separated tags (e.g. admin, user, internal)"
-    />
-    <span style="font-size: 11px; color: #6b7280; display: block; margin-top: 4px;">
-      Separate tags with commas.
-    </span>
-    {#if hasError}
-      {#each error as err}
-        <div class="lite-error-text">{err}</div>
-      {/each}
-    {/if}
-  </div>
-{/if}

package/src/components/fields/LiteTextField.svelte

@@ -1,34 +0,0 @@
-<script lang="ts">
-  import type { FieldDefinition } from '@svadmin/core';
-
-  interface Props {
-    field: FieldDefinition;
-    value?: unknown;
-    error?: string[];
-    mode?: 'show' | 'edit' | 'create';
-  }
-
-  let { field, value, error = [], mode = 'show' }: Props = $props();
-  let hasError = $derived(error.length > 0);
-</script>
-
-{#if mode === 'show'}
-  <span>{value == null ? '—' : String(value)}</span>
-{:else}
-  <div>
-    <input
-      type="text"
-      name={field.key}
-      id={field.key}
-      value={String(value ?? '')}
-      class="lite-input {hasError ? 'lite-input-error' : ''}"
-      placeholder={(field as any).placeholder ?? field.label}
-      {...field.required ? { required: true } : {}}
-    />
-    {#if hasError}
-      {#each error as err}
-        <div class="lite-error-text">{err}</div>
-      {/each}
-    {/if}
-  </div>
-{/if}

package/src/components/fields/LiteUrlField.svelte

@@ -1,40 +0,0 @@
-<script lang="ts">
-  import type { FieldDefinition } from '@svadmin/core';
-
-  interface Props {
-    field: FieldDefinition;
-    value?: unknown;
-    error?: string[];
-    mode?: 'show' | 'edit' | 'create';
-  }
-
-  let { field, value, error = [], mode = 'show' }: Props = $props();
-  let hasError = $derived(error.length > 0);
-</script>
-
-{#if mode === 'show'}
-  <span>
-    {#if value}
-      <a href="{String(value)}" target="_blank" rel="noopener noreferrer">{value}</a>
-    {:else}
-      —
-    {/if}
-  </span>
-{:else}
-  <div>
-    <input
-      type="url"
-      name={field.key}
-      id={field.key}
-      value={String(value ?? '')}
-      class="lite-input {hasError ? 'lite-input-error' : ''}"
-      placeholder={(field as any).placeholder ?? field.label}
-      {...field.required ? { required: true } : {}}
-    />
-    {#if hasError}
-      {#each error as err}
-        <div class="lite-error-text">{err}</div>
-      {/each}
-    {/if}
-  </div>
-{/if}

package/src/components/layout/LiteAuthenticated.svelte

@@ -1,23 +0,0 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-
-  interface Props {
-    /** True if server layout load confirms authentication */
-    isAuthenticated?: boolean;
-    loginUrl?: string;
-    children?: Snippet;
-  }
-
-  let { isAuthenticated = false, loginUrl = '/lite/login', children }: Props = $props();
-</script>
-
-{#if isAuthenticated}
-  {#if children}
-    {@render children()}
-  {/if}
-{:else}
-  <div style="padding: 40px; text-align: center; color: #475569;">
-    <h2>Authentication Required</h2>
-    <p>Please <a href={loginUrl} style="color: #2563eb;">login here</a> to access this page.</p>
-  </div>
-{/if}

package/src/components/layout/LiteCanAccess.svelte

@@ -1,27 +0,0 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-
-  interface Props {
-    /** Whether the user has access (computed from server load function) */
-    allowed: boolean;
-    children?: Snippet;
-    fallback?: Snippet;
-  }
-
-  let { allowed, children, fallback }: Props = $props();
-</script>
-
-{#if allowed}
-  {#if children}
-    {@render children()}
-  {/if}
-{:else}
-  {#if fallback}
-    {@render fallback()}
-  {:else}
-    <div style="padding: 24px; background: #fff1f2; color: #be123c; border-radius: 6px; border: 1px solid #fecdd3;">
-      <h3>Access Denied</h3>
-      <p>You do not have permission to view this content.</p>
-    </div>
-  {/if}
-{/if}

package/src/components/layout/LiteCatchAllNavigate.svelte

@@ -1,20 +0,0 @@
-<script lang="ts">
-  import { onMount } from 'svelte';
-
-  interface Props {
-    basePath?: string;
-    defaultResource?: string;
-  }
-
-  let { basePath = '/lite', defaultResource = '' }: Props = $props();
-  const target = $derived(`${basePath}${defaultResource ? '/' + defaultResource : ''}`);
-
-  onMount(() => {
-    window.location.href = target;
-  });
-</script>
-
-<noscript>
-  <meta http-equiv="refresh" content={`0; url=${target}`} />
-</noscript>
-<p>Redirecting...</p>

package/src/components/layout/LiteErrorBoundary.svelte

@@ -1,20 +0,0 @@
-<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/src/components/layout/LiteErrorComponent.svelte

@@ -1,37 +0,0 @@
-<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/src/components/layout/LiteHeader.svelte

@@ -1,19 +0,0 @@
-<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/src/components/layout/LiteNavigateToResource.svelte

@@ -1,25 +0,0 @@
-<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/src/components/layout/LiteSidebar.svelte

@@ -1,93 +0,0 @@
-<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}
-      {#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}
-            {#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}
-                  <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 ?? 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/src/components/pages/LiteCreatePage.svelte

@@ -1,39 +0,0 @@
-<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/src/components/pages/LiteEditPage.svelte

@@ -1,54 +0,0 @@
-<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/src/components/pages/LiteForgotPasswordPage.svelte

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