@svadmin/lite 0.1.0 → 0.2.2

package/src/components/fields/LiteMarkdownField.svelte

@@ -0,0 +1,33 @@
+<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();
+  const hasError = error.length > 0;
+</script>
+
+{#if mode === 'show'}
+  <pre style="white-space: pre-wrap; padding: 12px; background: #f8fafc; border: 1px solid #e5e7eb; border-radius: 4px;">{String(value ?? '—')}</pre>
+{:else}
+  <div>
+    <textarea
+      name={field.key}
+      id={field.key}
+      class="lite-input {hasError ? 'lite-input-error' : ''}"
+      style="min-height: 200px; font-family: monospace;"
+      placeholder="Enter markdown..."
+      {...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/LiteMultiSelectField.svelte

@@ -0,0 +1,57 @@
+<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();
+  const hasError = error.length > 0;
+
+  function displayOptions(valuesRaw: unknown): string[] {
+    if (!valuesRaw || !Array.isArray(valuesRaw)) return [];
+    return valuesRaw.map(v => {
+      const opt = field.options?.find(o => String(o.value) === String(v));
+      return opt?.label ?? String(v);
+    });
+  }
+
+  const valuesArray = $derived(Array.isArray(value) ? value.map(String) : []);
+</script>
+
+{#if mode === 'show'}
+  <div style="display:flex; gap: 4px; flex-wrap: wrap;">
+    {#each displayOptions(value) as opt}
+      <span class="lite-badge">{opt}</span>
+    {:else}
+      <span>—</span>
+    {/each}
+  </div>
+{:else}
+  <div>
+    <select
+      name={field.key}
+      id={field.key}
+      multiple
+      class="lite-select {hasError ? 'lite-input-error' : ''}"
+      style="height: 120px;"
+      {...field.required ? { required: true } : {}}
+    >
+      {#if field.options}
+        {#each field.options as opt}
+          <option value={String(opt.value)} selected={valuesArray.includes(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/LiteNumberField.svelte

@@ -0,0 +1,34 @@
+<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();
+  const hasError = error.length > 0;
+</script>
+
+{#if mode === 'show'}
+  <span>{value == null ? '—' : Number(value).toLocaleString()}</span>
+{:else}
+  <div>
+    <input
+      type="number"
+      name={field.key}
+      id={field.key}
+      value={value == null ? '' : Number(value)}
+      class="lite-input {hasError ? 'lite-input-error' : ''}"
+      placeholder={field.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/LiteRelationField.svelte

@@ -0,0 +1,66 @@
+<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();
+  const hasError = error.length > 0;
+
+  // In Lite version, relations might need to be rendered via server-side joined data 
+  // passed through options, or just standard inputs requesting ID.
+  function displayRelation(v: unknown): string {
+    if (v == null) return '—';
+    if (typeof v === 'object' && v !== null && 'id' in v) {
+      // It's a populated relation object
+      const labelField = field.relation?.labelField || 'name';
+      return String((v as Record<string, unknown>)[labelField] || (v as Record<string, unknown>).id);
+    }
+    // Try options
+    const opt = field.options?.find(o => String(o.value) === String(v));
+    return opt?.label ?? String(v);
+  }
+</script>
+
+{#if mode === 'show'}
+  <span class="lite-badge">{displayRelation(value)}</span>
+{:else}
+  <div>
+    {#if field.options && field.options.length > 0}
+      <!-- Render as select if options provided by loader -->
+      <select
+        name={field.key}
+        id={field.key}
+        class="lite-select {hasError ? 'lite-input-error' : ''}"
+      >
+        <option value="">-- {t('common.select') || 'Select'} Reference --</option>
+        {#each field.options as opt}
+          <option value={String(opt.value)} selected={String(value) === String(opt.value)}>
+            {opt.label}
+          </option>
+        {/each}
+      </select>
+    {:else}
+      <!-- Fallback text input for target ID -->
+      <input
+        type="text"
+        name={field.key}
+        id={field.key}
+        value={typeof value === 'object' && value ? String((value as Record<string, unknown>).id || '') : String(value ?? '')}
+        class="lite-input {hasError ? 'lite-input-error' : ''}"
+        placeholder="Enter reference ID"
+        {...field.required ? { required: true } : {}}
+      />
+    {/if}
+    {#if hasError}
+      {#each error as err}
+        <div class="lite-error-text">{err}</div>
+      {/each}
+    {/if}
+  </div>
+{/if}

package/src/components/fields/LiteRichTextField.svelte

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

@@ -0,0 +1,47 @@
+<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();
+  const hasError = 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

@@ -0,0 +1,44 @@
+<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();
+  const hasError = 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

@@ -0,0 +1,34 @@
+<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();
+  const hasError = 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.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

@@ -0,0 +1,40 @@
+<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();
+  const hasError = error.length > 0;
+</script>
+
+{#if mode === 'show'}
+  <span>
+    {#if value}
+      <a href="{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.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/index.ts

@@ -0,0 +1,15 @@
+export { default as LiteTextField } from './LiteTextField.svelte';
+export { default as LiteEmailField } from './LiteEmailField.svelte';
+export { default as LiteUrlField } from './LiteUrlField.svelte';
+export { default as LiteNumberField } from './LiteNumberField.svelte';
+export { default as LiteDateField } from './LiteDateField.svelte';
+export { default as LiteBooleanField } from './LiteBooleanField.svelte';
+export { default as LiteSelectField } from './LiteSelectField.svelte';
+export { default as LiteMultiSelectField } from './LiteMultiSelectField.svelte';
+export { default as LiteTagField } from './LiteTagField.svelte';
+export { default as LiteRelationField } from './LiteRelationField.svelte';
+export { default as LiteImageField } from './LiteImageField.svelte';
+export { default as LiteFileField } from './LiteFileField.svelte';
+export { default as LiteRichTextField } from './LiteRichTextField.svelte';
+export { default as LiteMarkdownField } from './LiteMarkdownField.svelte';
+export { default as LiteJsonField } from './LiteJsonField.svelte';

package/src/components/layout/LiteAuthenticated.svelte

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

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

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

@@ -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/src/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/src/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/src/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>