@svadmin/lite 0.3.3 → 0.3.5

package/src/components/buttons/LiteImportButton.svelte

@@ -1,50 +0,0 @@
-<script lang="ts">
-  import { t } from '@svadmin/core/i18n';
-  import { Upload } from '@lucide/svelte';
-
-  interface Props {
-    resource: string;
-    basePath?: string;
-    hideText?: boolean;
-    class?: string;
-    size?: 'sm' | 'default' | 'icon';
-  }
-
-  let {
-    resource,
-    basePath = '/lite',
-    hideText = false,
-    class: className = '',
-    size = 'default'
-  }: Props = $props();
-</script>
-
-<details class="lite-confirm-details {className}">
-  <summary 
-    class="lite-btn {size === 'sm' ? 'lite-btn-sm' : ''}"
-    title={t('common.import') || 'Import'}
-  >
-    <Upload class="h-4 w-4" />
-    {#if !hideText}
-      <span style="marginLeft: 4px">{t('common.import') || 'Import'}</span>
-    {/if}
-  </summary>
-  <div class="lite-confirm-panel">
-    <p style="margin: 0 0 8px; font-size: 13px;">{t('common.importData') || 'Import data (CSV/JSON)'}</p>
-    <form method="POST" action="?/${resource}_import" enctype="multipart/form-data" style="display:flex; flex-direction: column; gap: 8px;">
-      <input type="file" name="file" accept=".csv,.json" required style="font-size: 13px;" />
-      <div style="display:flex; gap: 8px; justify-content: flex-end;">
-        <button 
-          type="button" 
-          class="lite-btn lite-btn-sm" 
-          onclick={(e) => (e.currentTarget as HTMLElement).closest('details')?.removeAttribute('open')}
-        >
-          {t('common.cancel') || 'Cancel'}
-        </button>
-        <button type="submit" class="lite-btn lite-btn-sm lite-btn-primary">
-          {t('common.upload') || 'Upload'}
-        </button>
-      </div>
-    </form>
-  </div>
-</details>

package/src/components/buttons/LiteListButton.svelte

@@ -1,31 +0,0 @@
-<script lang="ts">
-  import { t } from '@svadmin/core/i18n';
-  import { List } from '@lucide/svelte';
-
-  interface Props {
-    resource: string;
-    basePath?: string;
-    hideText?: boolean;
-    class?: string;
-    size?: 'sm' | 'default' | 'icon';
-  }
-
-  let {
-    resource,
-    basePath = '/lite',
-    hideText = false,
-    class: className = '',
-    size = 'default'
-  }: Props = $props();
-</script>
-
-<a
-  href={`${basePath}/${resource}`}
-  class="lite-btn {size === 'sm' ? 'lite-btn-sm' : ''} {className}"
-  title={t('common.list') || 'List'}
->
-  <List class="h-4 w-4" />
-  {#if !hideText}
-    <span style="marginLeft: 4px">{t('common.list') || 'List'}</span>
-  {/if}
-</a>

package/src/components/buttons/LiteRefreshButton.svelte

@@ -1,27 +0,0 @@
-<script lang="ts">
-  import { t } from '@svadmin/core/i18n';
-  import { RefreshCw } from '@lucide/svelte';
-
-  interface Props {
-    hideText?: boolean;
-    class?: string;
-    size?: 'sm' | 'default' | 'icon';
-  }
-
-  let {
-    hideText = false,
-    class: className = '',
-    size = 'default'
-  }: Props = $props();
-</script>
-
-<a
-  href=""
-  class="lite-btn {size === 'sm' ? 'lite-btn-sm' : ''} {className}"
-  title={t('common.refresh') || 'Refresh'}
->
-  <RefreshCw class="h-4 w-4" />
-  {#if !hideText}
-    <span style="marginLeft: 4px">{t('common.refresh') || 'Refresh'}</span>
-  {/if}
-</a>

package/src/components/buttons/LiteSaveButton.svelte

@@ -1,27 +0,0 @@
-<script lang="ts">
-  import { t } from '@svadmin/core/i18n';
-  import { Save } from '@lucide/svelte';
-
-  interface Props {
-    hideText?: boolean;
-    class?: string;
-    size?: 'sm' | 'default' | 'icon';
-  }
-
-  let {
-    hideText = false,
-    class: className = '',
-    size = 'default'
-  }: Props = $props();
-</script>
-
-<button
-  type="submit"
-  class="lite-btn lite-btn-primary {size === 'sm' ? 'lite-btn-sm' : ''} {className}"
-  title={t('common.save') || 'Save'}
->
-  <Save class="h-4 w-4" />
-  {#if !hideText}
-    <span style="marginLeft: 4px">{t('common.save') || 'Save'}</span>
-  {/if}
-</button>

package/src/components/buttons/LiteShowButton.svelte

@@ -1,33 +0,0 @@
-<script lang="ts">
-  import { t } from '@svadmin/core/i18n';
-  import { Eye } from '@lucide/svelte';
-
-  interface Props {
-    resource: string;
-    recordItemId: string | number;
-    basePath?: string;
-    hideText?: boolean;
-    class?: string;
-    size?: 'sm' | 'default' | 'icon';
-  }
-
-  let {
-    resource,
-    recordItemId,
-    basePath = '/lite',
-    hideText = false,
-    class: className = '',
-    size = 'default'
-  }: Props = $props();
-</script>
-
-<a
-  href={`${basePath}/${resource}/show/${recordItemId}`}
-  class="lite-btn {size === 'sm' ? 'lite-btn-sm' : ''} {className}"
-  title={t('common.show') || 'Show'}
->
-  <Eye class="h-4 w-4" />
-  {#if !hideText}
-    <span style="marginLeft: 4px">{t('common.show') || 'Show'}</span>
-  {/if}
-</a>

package/src/components/fields/LiteBooleanField.svelte

@@ -1,41 +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'}
-  <div>
-    <span class="lite-bool {value ? 'lite-bool-true' : ''}"></span>
-    {value ? '✓ Yes' : '✗ No'}
-  </div>
-{:else}
-  <div class="lite-checkbox-group">
-    <input
-      type="checkbox"
-      name={field.key}
-      id={field.key}
-      checked={!!value}
-      value="true"
-    />
-    <!-- Fallback hidden input so unchecked boxes submit "false" -->
-    <input type="hidden" name={field.key} value="false" />
-    
-    <label for={field.key}>
-      {(field as any).placeholder ?? (field.label || 'Yes')}
-    </label>
-    {#if hasError}
-      {#each error as err}
-        <div class="lite-error-text">{err}</div>
-      {/each}
-    {/if}
-  </div>
-{/if}

package/src/components/fields/LiteDateField.svelte

@@ -1,51 +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);
-
-  function formatDate(v: unknown): string {
-    if (!v) return '';
-    try {
-      return new Date(v as string).toISOString().substring(0, 16); // Formats for html datetime-local
-    } catch {
-      return '';
-    }
-  }
-
-  function displayDate(v: unknown): string {
-    if (!v) return '—';
-    try {
-      return new Date(v as string).toLocaleString();
-    } catch {
-      return String(v);
-    }
-  }
-</script>
-
-{#if mode === 'show'}
-  <span>{displayDate(value)}</span>
-{:else}
-  <div>
-    <input
-      type="datetime-local"
-      name={field.key}
-      id={field.key}
-      value={formatDate(value)}
-      class="lite-input {hasError ? 'lite-input-error' : ''}"
-      {...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/LiteEmailField.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="mailto:{value}">{value}</a>
-    {:else}
-      —
-    {/if}
-  </span>
-{:else}
-  <div>
-    <input
-      type="email"
-      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/LiteFileField.svelte

@@ -1,53 +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);
-
-  function getFiles(v: unknown): string[] {
-    if (!v) return [];
-    if (Array.isArray(v)) return v.map(String);
-    if (typeof v === 'string') return [v];
-    return [];
-  }
-</script>
-
-{#if mode === 'show'}
-  {@const files = getFiles(value)}
-  <div style="display:flex; flex-direction: column; gap: 4px;">
-    {#each files as f}
-      <a href={f} target="_blank" rel="noopener noreferrer">{f.split('/').pop() || 'Download'}</a>
-    {:else}
-      <span>—</span>
-    {/each}
-  </div>
-{:else}
-  {@const files = getFiles(value)}
-  <div>
-    {#if files.length > 0 && mode === 'edit'}
-      <div style="margin-bottom: 8px;">
-        <span style="font-size: 12px;">Current files: {files.length}</span>
-      </div>
-    {/if}
-    <input
-      type="file"
-      name={field.key}
-      id={field.key}
-      class="lite-input {hasError ? 'lite-input-error' : ''}"
-      {...(field.type as string) === 'files' ? { multiple: true } : {}}
-      {...field.required && !files.length ? { required: true } : {}}
-    />
-    {#if hasError}
-      {#each error as err}
-        <div class="lite-error-text">{err}</div>
-      {/each}
-    {/if}
-  </div>
-{/if}

package/src/components/fields/LiteImageField.svelte

@@ -1,57 +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);
-  
-  function getUrls(v: unknown): string[] {
-    if (!v) return [];
-    if (Array.isArray(v)) return v.map(String);
-    if (typeof v === 'string') return [v];
-    return [];
-  }
-</script>
-
-{#if mode === 'show'}
-  {@const urls = getUrls(value)}
-  <div style="display:flex; gap: 8px; flex-wrap: wrap;">
-    {#each urls as url}
-      <img src={url} alt={field.label} style="max-height: 100px; border-radius: 4px; border: 1px solid #e5e7eb;" />
-    {:else}
-      <span>—</span>
-    {/each}
-  </div>
-{:else}
-  {@const urls = getUrls(value)}
-  <div>
-    {#if urls.length > 0 && mode === 'edit'}
-      <div style="margin-bottom: 8px; display:flex; gap: 8px;">
-        {#each urls as url}
-          <img src={url} alt="Current" style="height: 60px; border-radius: 4px; border: 1px solid #e5e7eb; opacity: 0.6;" />
-        {/each}
-      </div>
-      <p style="font-size: 11px; color:#6b7280; margin: 0 0 4px;">Uploading new ones will overwrite.</p>
-    {/if}
-    <input
-      type="file"
-      name={field.key}
-      id={field.key}
-      accept="image/*"
-      class="lite-input {hasError ? 'lite-input-error' : ''}"
-      {...(field.type as string) === 'images' ? { multiple: true } : {}}
-      {...field.required && !urls.length ? { required: true } : {}}
-    />
-    {#if hasError}
-      {#each error as err}
-        <div class="lite-error-text">{err}</div>
-      {/each}
-    {/if}
-  </div>
-{/if}

package/src/components/fields/LiteJsonField.svelte

@@ -1,43 +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);
-  
-  function getJsonString(v: unknown): string {
-    if (v == null) return '';
-    if (typeof v === 'string') return v;
-    try {
-      return JSON.stringify(v, null, 2);
-    } catch {
-      return String(v);
-    }
-  }
-</script>
-
-{#if mode === 'show'}
-  <pre style="padding: 12px; background: #1e293b; color: #f8fafc; border-radius: 4px; overflow-x: auto; font-size: 13px;">{getJsonString(value)}</pre>
-{:else}
-  <div>
-    <textarea
-      name={field.key}
-      id={field.key}
-      class="lite-input {hasError ? 'lite-input-error' : ''}"
-      style="min-height: 150px; font-family: monospace;"
-      placeholder="&lbrace;&rbrace;"
-      {...field.required ? { required: true } : {}}
-    >{getJsonString(value)}</textarea>
-    {#if hasError}
-      {#each error as err}
-        <div class="lite-error-text">{err}</div>
-      {/each}
-    {/if}
-  </div>
-{/if}

package/src/components/fields/LiteMarkdownField.svelte

@@ -1,33 +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'}
-  <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

@@ -1,57 +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);
-
-  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

@@ -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 ? '—' : 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}
-        <div class="lite-error-text">{err}</div>
-      {/each}
-    {/if}
-  </div>
-{/if}

package/src/components/fields/LiteRelationField.svelte

@@ -1,66 +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);
-
-  // 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}
-          <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}