@svadmin/lite 0.1.0 → 0.2.2

package/src/components/buttons/LiteCloneButton.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+  import { t } from '@svadmin/core/i18n';
+  import { Copy } 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}/create?cloneId={recordItemId}"
+  class="lite-btn {size === 'sm' ? 'lite-btn-sm' : ''} {className}"
+  title={t('common.clone') || 'Clone'}
+>
+  <Copy class="h-4 w-4" />
+  {#if !hideText}
+    <span style="marginLeft: 4px">{t('common.clone') || 'Clone'}</span>
+  {/if}
+</a>

package/src/components/buttons/LiteCreateButton.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+  import { t } from '@svadmin/core/i18n';
+  import { Plus } 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}/create"
+  class="lite-btn lite-btn-primary {size === 'sm' ? 'lite-btn-sm' : ''} {className}"
+  title={t('common.create') || 'Create'}
+>
+  <Plus class="h-4 w-4" />
+  {#if !hideText}
+    <span style="marginLeft: 4px">{t('common.create') || 'Create'}</span>
+  {/if}
+</a>

package/src/components/buttons/LiteDeleteButton.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+  import { t } from '@svadmin/core/i18n';
+  import { Trash2 } from 'lucide-svelte';
+
+  interface Props {
+    resource: string;
+    recordItemId: string | number;
+    basePath?: string;
+    hideText?: boolean;
+    class?: string;
+    size?: 'sm' | 'default' | 'icon';
+    redirectUrl?: string;
+  }
+
+  let {
+    resource,
+    recordItemId,
+    basePath = '/lite',
+    hideText = false,
+    class: className = '',
+    size = 'default',
+    redirectUrl = ''
+  }: Props = $props();
+</script>
+
+<details class="lite-confirm-details {className}">
+  <summary 
+    class="lite-btn lite-btn-danger {size === 'sm' ? 'lite-btn-sm' : ''}"
+    title={t('common.delete') || 'Delete'}
+  >
+    <Trash2 class="h-4 w-4" />
+    {#if !hideText}
+      <span style="marginLeft: 4px">{t('common.delete') || 'Delete'}</span>
+    {/if}
+  </summary>
+  <div class="lite-confirm-panel" style="right: 0; left: auto;">
+    <p style="margin: 0 0 8px; font-size: 13px; color: #111827;">
+      {t('common.areYouSure') || 'Are you sure?'}
+    </p>
+    <form method="POST" action="?/{resource}_delete" style="display:inline-flex; gap: 8px;">
+      <input type="hidden" name="id" value={String(recordItemId)} />
+      {#if redirectUrl}
+        <input type="hidden" name="redirect" value={redirectUrl} />
+      {/if}
+      <button 
+        type="button" 
+        class="lite-btn lite-btn-sm" 
+        onclick="this.closest('details').removeAttribute('open')"
+      >
+        {t('common.cancel') || 'Cancel'}
+      </button>
+      <button type="submit" class="lite-btn lite-btn-sm lite-btn-danger">
+        {t('common.confirm') || 'Confirm'}
+      </button>
+    </form>
+  </div>
+</details>

package/src/components/buttons/LiteEditButton.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+  import { t } from '@svadmin/core/i18n';
+  import { Pencil } 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}/edit/{recordItemId}"
+  class="lite-btn {size === 'sm' ? 'lite-btn-sm' : ''} {className}"
+  title={t('common.edit') || 'Edit'}
+>
+  <Pencil class="h-4 w-4" />
+  {#if !hideText}
+    <span style="marginLeft: 4px">{t('common.edit') || 'Edit'}</span>
+  {/if}
+</a>

package/src/components/buttons/LiteExportButton.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+  import { t } from '@svadmin/core/i18n';
+  import { Download } 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="?action=export"
+  class="lite-btn {size === 'sm' ? 'lite-btn-sm' : ''} {className}"
+  title={t('common.export') || 'Export'}
+>
+  <Download class="h-4 w-4" />
+  {#if !hideText}
+    <span style="marginLeft: 4px">{t('common.export') || 'Export'}</span>
+  {/if}
+</a>

package/src/components/buttons/LiteImportButton.svelte

@@ -0,0 +1,50 @@
+<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="this.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

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

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

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

@@ -0,0 +1,33 @@
+<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/buttons/index.ts

@@ -0,0 +1,10 @@
+export { default as LiteCreateButton } from './LiteCreateButton.svelte';
+export { default as LiteEditButton } from './LiteEditButton.svelte';
+export { default as LiteShowButton } from './LiteShowButton.svelte';
+export { default as LiteListButton } from './LiteListButton.svelte';
+export { default as LiteDeleteButton } from './LiteDeleteButton.svelte';
+export { default as LiteCloneButton } from './LiteCloneButton.svelte';
+export { default as LiteExportButton } from './LiteExportButton.svelte';
+export { default as LiteImportButton } from './LiteImportButton.svelte';
+export { default as LiteRefreshButton } from './LiteRefreshButton.svelte';
+export { default as LiteSaveButton } from './LiteSaveButton.svelte';

package/src/components/fields/LiteBooleanField.svelte

@@ -0,0 +1,41 @@
+<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'}
+  <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.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

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

@@ -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="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.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

@@ -0,0 +1,53 @@
+<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 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}
+  <div>
+    {@const files = getFiles(value)}
+    {#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 === '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

@@ -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 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}
+  <div>
+    {@const urls = getUrls(value)}
+    {#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 === '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

@@ -0,0 +1,43 @@
+<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 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="{}"
+      {...field.required ? { required: true } : {}}
+    >{getJsonString(value)}</textarea>
+    {#if hasError}
+      {#each error as err}
+        <div class="lite-error-text">{err}</div>
+      {/each}
+    {/if}
+  </div>
+{/if}