@svadmin/lite 0.3.6 → 0.3.10

package/dist/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();
+  let hasError = $derived(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, _i (_i)}
+        <div class="lite-error-text">{err}</div>
+      {/each}
+    {/if}
+  </div>
+{/if}

package/dist/components/fields/LiteMarkdownField.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { FieldDefinition } from '@svadmin/core';
+interface Props {
+    field: FieldDefinition;
+    value?: unknown;
+    error?: string[];
+    mode?: 'show' | 'edit' | 'create';
+}
+declare const LiteMarkdownField: import("svelte").Component<Props, {}, "">;
+type LiteMarkdownField = ReturnType<typeof LiteMarkdownField>;
+export default LiteMarkdownField;

package/dist/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();
+  let hasError = $derived(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, _i (_i)}
+      <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, _i (_i)}
+          <option value={String(opt.value)} selected={valuesArray.includes(String(opt.value))}>
+            {opt.label}
+          </option>
+        {/each}
+      {/if}
+    </select>
+    {#if hasError}
+      {#each error as err, _i (_i)}
+        <div class="lite-error-text">{err}</div>
+      {/each}
+    {/if}
+  </div>
+{/if}

package/dist/components/fields/LiteMultiSelectField.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { FieldDefinition } from '@svadmin/core';
+interface Props {
+    field: FieldDefinition;
+    value?: unknown;
+    error?: string[];
+    mode?: 'show' | 'edit' | 'create';
+}
+declare const LiteMultiSelectField: import("svelte").Component<Props, {}, "">;
+type LiteMultiSelectField = ReturnType<typeof LiteMultiSelectField>;
+export default LiteMultiSelectField;

package/dist/components/fields/LiteNumberField.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+/* eslint-disable @typescript-eslint/no-explicit-any */
+  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 ? '—' : 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 as any).placeholder ?? field.label}
+      {...field.required ? { required: true } : {}}
+    />
+    {#if hasError}
+      {#each error as err, _i (_i)}
+        <div class="lite-error-text">{err}</div>
+      {/each}
+    {/if}
+  </div>
+{/if}

package/dist/components/fields/LiteNumberField.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { FieldDefinition } from '@svadmin/core';
+interface Props {
+    field: FieldDefinition;
+    value?: unknown;
+    error?: string[];
+    mode?: 'show' | 'edit' | 'create';
+}
+declare const LiteNumberField: import("svelte").Component<Props, {}, "">;
+type LiteNumberField = ReturnType<typeof LiteNumberField>;
+export default LiteNumberField;

package/dist/components/fields/LiteRelationField.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+/* eslint-disable @typescript-eslint/no-explicit-any */
+  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);
+
+  // 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 as any).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, _i (_i)}
+          <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, _i (_i)}
+        <div class="lite-error-text">{err}</div>
+      {/each}
+    {/if}
+  </div>
+{/if}

package/dist/components/fields/LiteRelationField.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { FieldDefinition } from '@svadmin/core';
+interface Props {
+    field: FieldDefinition;
+    value?: unknown;
+    error?: string[];
+    mode?: 'show' | 'edit' | 'create';
+}
+declare const LiteRelationField: import("svelte").Component<Props, {}, "">;
+type LiteRelationField = ReturnType<typeof LiteRelationField>;
+export default LiteRelationField;

package/dist/components/fields/LiteRichTextField.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+  import type { FieldDefinition } from '@svadmin/core';
+  import { toSafeText } from '../../security.js';
+
+  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 displayValue = $derived(toSafeText(value, '—'));
+</script>
+
+{#if mode === 'show'}
+  <!-- Lite mode intentionally renders rich content as text to keep SSR output safe without a sanitizer dependency. -->
+  <div style="padding: 16px; border: 1px solid #e2e8f0; border-radius: 6px; max-height: 500px; overflow-y: auto; background: #fff; white-space: pre-wrap;" class="prose">
+    {displayValue}
+  </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 } : {}}
+    >{toSafeText(value)}</textarea>
+    {#if hasError}
+      {#each error as err, _i (_i)}
+        <div class="lite-error-text">{err}</div>
+      {/each}
+    {/if}
+  </div>
+{/if}

package/dist/components/fields/LiteRichTextField.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { FieldDefinition } from '@svadmin/core';
+interface Props {
+    field: FieldDefinition;
+    value?: unknown;
+    error?: string[];
+    mode?: 'show' | 'edit' | 'create';
+}
+declare const LiteRichTextField: import("svelte").Component<Props, {}, "">;
+type LiteRichTextField = ReturnType<typeof LiteRichTextField>;
+export default LiteRichTextField;

package/dist/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();
+  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, _i (_i)}
+          <option value={String(opt.value)} selected={String(value) === String(opt.value)}>
+            {opt.label}
+          </option>
+        {/each}
+      {/if}
+    </select>
+    {#if hasError}
+      {#each error as err, _i (_i)}
+        <div class="lite-error-text">{err}</div>
+      {/each}
+    {/if}
+  </div>
+{/if}

package/dist/components/fields/LiteSelectField.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { FieldDefinition } from '@svadmin/core';
+interface Props {
+    field: FieldDefinition;
+    value?: unknown;
+    error?: string[];
+    mode?: 'show' | 'edit' | 'create';
+}
+declare const LiteSelectField: import("svelte").Component<Props, {}, "">;
+type LiteSelectField = ReturnType<typeof LiteSelectField>;
+export default LiteSelectField;

package/dist/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();
+  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, _i (_i)}
+      <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, _i (_i)}
+        <div class="lite-error-text">{err}</div>
+      {/each}
+    {/if}
+  </div>
+{/if}

package/dist/components/fields/LiteTagField.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { FieldDefinition } from '@svadmin/core';
+interface Props {
+    field: FieldDefinition;
+    value?: unknown;
+    error?: string[];
+    mode?: 'show' | 'edit' | 'create';
+}
+declare const LiteTagField: import("svelte").Component<Props, {}, "">;
+type LiteTagField = ReturnType<typeof LiteTagField>;
+export default LiteTagField;

package/dist/components/fields/LiteTextField.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+/* eslint-disable @typescript-eslint/no-explicit-any */
+  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, _i (_i)}
+        <div class="lite-error-text">{err}</div>
+      {/each}
+    {/if}
+  </div>
+{/if}

package/dist/components/fields/LiteTextField.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { FieldDefinition } from '@svadmin/core';
+interface Props {
+    field: FieldDefinition;
+    value?: unknown;
+    error?: string[];
+    mode?: 'show' | 'edit' | 'create';
+}
+declare const LiteTextField: import("svelte").Component<Props, {}, "">;
+type LiteTextField = ReturnType<typeof LiteTextField>;
+export default LiteTextField;

package/dist/components/fields/LiteUrlField.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+  import type { FieldDefinition } from '@svadmin/core';
+  import { toSafeHref, toSafeText } from '../../security';
+
+  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);
+  let displayValue = $derived(toSafeText(value));
+  let safeHref = $derived(toSafeHref(value));
+  const placeholder = $derived(
+    'placeholder' in field && typeof field.placeholder === 'string'
+      ? field.placeholder
+      : field.label
+  );
+</script>
+
+{#if mode === 'show'}
+  <span>
+    {#if displayValue}
+      {#if safeHref}
+        <a href={safeHref} target="_blank" rel="noopener noreferrer">{displayValue}</a>
+      {:else}
+        {displayValue}
+      {/if}
+    {: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.required ? { required: true } : {}}
+    />
+    {#if hasError}
+      {#each error as err, _i (_i)}
+        <div class="lite-error-text">{err}</div>
+      {/each}
+    {/if}
+  </div>
+{/if}

package/dist/components/fields/LiteUrlField.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { FieldDefinition } from '@svadmin/core';
+interface Props {
+    field: FieldDefinition;
+    value?: unknown;
+    error?: string[];
+    mode?: 'show' | 'edit' | 'create';
+}
+declare const LiteUrlField: import("svelte").Component<Props, {}, "">;
+type LiteUrlField = ReturnType<typeof LiteUrlField>;
+export default LiteUrlField;

package/dist/components/fields/index.js

@@ -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/dist/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/dist/components/layout/LiteAuthenticated.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    /** True if server layout load confirms authentication */
+    isAuthenticated?: boolean;
+    loginUrl?: string;
+    children?: Snippet;
+}
+declare const LiteAuthenticated: import("svelte").Component<Props, {}, "">;
+type LiteAuthenticated = ReturnType<typeof LiteAuthenticated>;
+export default LiteAuthenticated;

package/dist/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/dist/components/layout/LiteCanAccess.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    /** Whether the user has access (computed from server load function) */
+    allowed: boolean;
+    children?: Snippet;
+    fallback?: Snippet;
+}
+declare const LiteCanAccess: import("svelte").Component<Props, {}, "">;
+type LiteCanAccess = ReturnType<typeof LiteCanAccess>;
+export default LiteCanAccess;

package/dist/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/dist/components/layout/LiteCatchAllNavigate.svelte.d.ts

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