@svadmin/ui 0.29.3 → 0.30.0

package/dist/components/charts/LineChart.svelte

@@ -0,0 +1,115 @@
+<script lang="ts">
+  interface DataPoint {
+    label: string;
+    value: number;
+  }
+
+  interface Props {
+    data: DataPoint[];
+    height?: number;
+    color?: string;
+    /** Show dots at data points */
+    showDots?: boolean;
+    /** Fill area under the line */
+    fill?: boolean;
+    class?: string;
+  }
+
+  let { data, height = 200, color = 'var(--primary)', showDots = true, fill = true, class: className = '' }: Props = $props();
+
+  const padding = { top: 20, right: 20, bottom: 30, left: 40 };
+  const chartWidth = $derived(Math.max(data.length * 60, 300));
+  const chartHeight = $derived(height - padding.top - padding.bottom);
+
+  const maxValue = $derived(Math.max(...data.map(d => d.value), 1));
+  const minValue = $derived(Math.min(...data.map(d => d.value), 0));
+  const range = $derived(maxValue - minValue || 1);
+
+  function getX(i: number): number {
+    if (data.length <= 1) return padding.left + chartWidth / 2;
+    return padding.left + (i / (data.length - 1)) * (chartWidth - padding.left - padding.right);
+  }
+
+  function getY(value: number): number {
+    return padding.top + chartHeight - ((value - minValue) / range) * chartHeight;
+  }
+
+  const linePath = $derived(
+    data.map((d, i) => `${i === 0 ? 'M' : 'L'} ${getX(i)} ${getY(d.value)}`).join(' ')
+  );
+
+  const areaPath = $derived(
+    linePath + ` L ${getX(data.length - 1)} ${padding.top + chartHeight} L ${getX(0)} ${padding.top + chartHeight} Z`
+  );
+</script>
+
+<div class="w-full overflow-x-auto {className}">
+  <svg viewBox="0 0 {chartWidth} {height}" class="w-full" style="min-width: {Math.min(chartWidth, 300)}px;">
+    <!-- Grid lines -->
+    {#each [0, 0.25, 0.5, 0.75, 1] as ratio}
+      {@const y = padding.top + chartHeight * (1 - ratio)}
+      <line
+        x1={padding.left}
+        y1={y}
+        x2={chartWidth - padding.right}
+        y2={y}
+        stroke="var(--border)"
+        stroke-width="1"
+        stroke-dasharray={ratio === 0 ? 'none' : '4 4'}
+        opacity="0.5"
+      />
+      <text x={padding.left - 8} y={y + 4} text-anchor="end" fill="var(--muted-foreground)" font-size="10">
+        {Math.round(minValue + range * ratio)}
+      </text>
+    {/each}
+
+    <!-- Area fill -->
+    {#if fill && data.length > 1}
+      <path
+        d={areaPath}
+        fill={color}
+        opacity="0.08"
+      />
+    {/if}
+
+    <!-- Line -->
+    {#if data.length > 1}
+      <path
+        d={linePath}
+        fill="none"
+        stroke={color}
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <animate attributeName="stroke-dashoffset" from="2000" to="0" dur="1s" fill="freeze" />
+      </path>
+    {/if}
+
+    <!-- Dots -->
+    {#if showDots}
+      {#each data as point, i}
+        <circle
+          cx={getX(i)}
+          cy={getY(point.value)}
+          r="4"
+          fill="var(--background)"
+          stroke={color}
+          stroke-width="2"
+          class="transition-all duration-200 hover:r-[6]"
+        />
+      {/each}
+    {/if}
+
+    <!-- X-axis labels -->
+    {#each data as point, i}
+      <text
+        x={getX(i)}
+        y={height - 4}
+        text-anchor="middle"
+        fill="var(--muted-foreground)"
+        font-size="10"
+      >{point.label}</text>
+    {/each}
+  </svg>
+</div>

package/dist/components/charts/LineChart.svelte.d.ts

@@ -0,0 +1,17 @@
+interface DataPoint {
+    label: string;
+    value: number;
+}
+interface Props {
+    data: DataPoint[];
+    height?: number;
+    color?: string;
+    /** Show dots at data points */
+    showDots?: boolean;
+    /** Fill area under the line */
+    fill?: boolean;
+    class?: string;
+}
+declare const LineChart: import("svelte").Component<Props, {}, "">;
+type LineChart = ReturnType<typeof LineChart>;
+export default LineChart;

package/dist/components/charts/PieChart.svelte

@@ -0,0 +1,95 @@
+<script lang="ts">
+  interface Slice {
+    label: string;
+    value: number;
+    color: string;
+  }
+
+  interface Props {
+    data: Slice[];
+    size?: number;
+    /** Donut hole ratio (0 = pie, 0.6 = donut) */
+    donut?: number;
+    class?: string;
+  }
+
+  let { data, size = 200, donut = 0.6, class: className = '' }: Props = $props();
+
+  const total = $derived(data.reduce((sum, d) => sum + d.value, 0) || 1);
+  const center = $derived(size / 2);
+  const radius = $derived(size / 2 - 8);
+  const innerRadius = $derived(radius * donut);
+
+  function getArcPath(startAngle: number, endAngle: number, outer: number, inner: number): string {
+    const startOuter = polarToCartesian(center, center, outer, endAngle);
+    const endOuter = polarToCartesian(center, center, outer, startAngle);
+    const startInner = polarToCartesian(center, center, inner, startAngle);
+    const endInner = polarToCartesian(center, center, inner, endAngle);
+    const largeArc = endAngle - startAngle > 180 ? 1 : 0;
+
+    return [
+      `M ${startOuter.x} ${startOuter.y}`,
+      `A ${outer} ${outer} 0 ${largeArc} 0 ${endOuter.x} ${endOuter.y}`,
+      inner > 0 ? `L ${startInner.x} ${startInner.y}` : `L ${center} ${center}`,
+      inner > 0 ? `A ${inner} ${inner} 0 ${largeArc} 1 ${endInner.x} ${endInner.y}` : '',
+      'Z',
+    ].join(' ');
+  }
+
+  function polarToCartesian(cx: number, cy: number, r: number, angleDeg: number) {
+    const rad = ((angleDeg - 90) * Math.PI) / 180;
+    return { x: cx + r * Math.cos(rad), y: cy + r * Math.sin(rad) };
+  }
+
+  const slices = $derived.by(() => {
+    let currentAngle = 0;
+    return data.map(d => {
+      const angle = (d.value / total) * 360;
+      const slice = {
+        ...d,
+        startAngle: currentAngle,
+        endAngle: currentAngle + angle,
+        percentage: ((d.value / total) * 100).toFixed(1),
+      };
+      currentAngle += angle;
+      return slice;
+    });
+  });
+</script>
+
+<div class="inline-flex flex-col items-center gap-3 {className}">
+  <svg viewBox="0 0 {size} {size}" width={size} height={size}>
+    {#each slices as slice, i}
+      <path
+        d={getArcPath(slice.startAngle, slice.endAngle, radius, innerRadius)}
+        fill={slice.color}
+        class="transition-all duration-200 hover:opacity-80"
+        stroke="var(--background)"
+        stroke-width="2"
+      >
+        <animate attributeName="opacity" from="0" to="1" dur="0.4s" begin="{i * 0.1}s" fill="freeze" />
+      </path>
+    {/each}
+
+    <!-- Center label (donut only) -->
+    {#if donut > 0}
+      <text x={center} y={center - 6} text-anchor="middle" fill="var(--foreground)" font-size="20" font-weight="600">
+        {total.toLocaleString()}
+      </text>
+      <text x={center} y={center + 12} text-anchor="middle" fill="var(--muted-foreground)" font-size="11">
+        Total
+      </text>
+    {/if}
+  </svg>
+
+  <!-- Legend -->
+  <div class="flex flex-wrap justify-center gap-x-4 gap-y-1">
+    {#each slices as slice}
+      <div class="flex items-center gap-1.5 text-xs">
+        <span class="h-2.5 w-2.5 rounded-full" style="background-color: {slice.color};"></span>
+        <span class="text-muted-foreground">{slice.label}</span>
+        <span class="font-medium text-foreground">{slice.percentage}%</span>
+      </div>
+    {/each}
+  </div>
+</div>

package/dist/components/charts/PieChart.svelte.d.ts

@@ -0,0 +1,15 @@
+interface Slice {
+    label: string;
+    value: number;
+    color: string;
+}
+interface Props {
+    data: Slice[];
+    size?: number;
+    /** Donut hole ratio (0 = pie, 0.6 = donut) */
+    donut?: number;
+    class?: string;
+}
+declare const PieChart: import("svelte").Component<Props, {}, "">;
+type PieChart = ReturnType<typeof PieChart>;
+export default PieChart;

package/dist/components/charts/index.d.ts

@@ -0,0 +1,3 @@
+export { default as BarChart } from './BarChart.svelte';
+export { default as LineChart } from './LineChart.svelte';
+export { default as PieChart } from './PieChart.svelte';

package/dist/components/charts/index.js

@@ -0,0 +1,3 @@
+export { default as BarChart } from './BarChart.svelte';
+export { default as LineChart } from './LineChart.svelte';
+export { default as PieChart } from './PieChart.svelte';

package/dist/components/fieldComponentMap.d.ts

@@ -0,0 +1,24 @@
+import type { Component } from 'svelte';
+export interface FieldComponentMap {
+    [fieldType: string]: Component<any>;
+}
+/**
+ * Built-in display components for show/detail pages.
+ * Keys match FieldDefinition.type values.
+ */
+export declare const builtinDisplayComponents: FieldComponentMap;
+/**
+ * Register a custom field display component for a given field type.
+ * The component will be used by ShowPage and any other display contexts.
+ */
+export declare function registerDisplayComponent(fieldType: string, component: Component<any>): void;
+/**
+ * Get the display component for a field type.
+ * Custom components take precedence over built-in ones.
+ * Returns undefined if no component is registered for the type.
+ */
+export declare function getDisplayComponent(fieldType: string): Component<any> | undefined;
+/**
+ * Check if a field type has a display component (custom or built-in).
+ */
+export declare function hasDisplayComponent(fieldType: string): boolean;

package/dist/components/fieldComponentMap.js

@@ -0,0 +1,65 @@
+// Shared field type → display component mapping
+// Used by both ShowPage and FieldRenderer to avoid duplicate if/else chains.
+// Components are lazily resolved by field type at runtime.
+// Default display component map (read-only field display)
+// Dynamically imports components only when first used
+const displayCache = new Map();
+// Pre-import all field display components (tree-shaken by bundler)
+import BooleanField from './fields/BooleanField.svelte';
+import ImageField from './fields/ImageField.svelte';
+import TagField from './fields/TagField.svelte';
+import DateField from './fields/DateField.svelte';
+import EmailField from './fields/EmailField.svelte';
+import UrlField from './fields/UrlField.svelte';
+import SelectField from './fields/SelectField.svelte';
+import MultiSelectField from './fields/MultiSelectField.svelte';
+import RelationField from './fields/RelationField.svelte';
+import JsonField from './fields/JsonField.svelte';
+import RichTextField from './fields/RichTextField.svelte';
+import NumberField from './fields/NumberField.svelte';
+import FileField from './fields/FileField.svelte';
+/**
+ * Built-in display components for show/detail pages.
+ * Keys match FieldDefinition.type values.
+ */
+export const builtinDisplayComponents = {
+    boolean: BooleanField,
+    image: ImageField,
+    images: ImageField,
+    tags: TagField,
+    date: DateField,
+    email: EmailField,
+    url: UrlField,
+    select: SelectField,
+    multiselect: MultiSelectField,
+    relation: RelationField,
+    json: JsonField,
+    richtext: RichTextField,
+    textarea: RichTextField,
+    number: NumberField,
+    file: FileField,
+};
+// ─── Custom component registry ─────────────────────────────────
+// Users can register custom field display components at runtime
+const customDisplayComponents = new Map();
+/**
+ * Register a custom field display component for a given field type.
+ * The component will be used by ShowPage and any other display contexts.
+ */
+export function registerDisplayComponent(fieldType, component) {
+    customDisplayComponents.set(fieldType, component);
+}
+/**
+ * Get the display component for a field type.
+ * Custom components take precedence over built-in ones.
+ * Returns undefined if no component is registered for the type.
+ */
+export function getDisplayComponent(fieldType) {
+    return customDisplayComponents.get(fieldType) ?? builtinDisplayComponents[fieldType];
+}
+/**
+ * Check if a field type has a display component (custom or built-in).
+ */
+export function hasDisplayComponent(fieldType) {
+    return customDisplayComponents.has(fieldType) || fieldType in builtinDisplayComponents;
+}

package/dist/components/fields/ArrayField.svelte

@@ -0,0 +1,86 @@
+<script lang="ts">
+  import type { FieldDefinition } from '@svadmin/core';
+  import { t } from '@svadmin/core/i18n';
+  import { Button } from '../ui/button/index.js';
+  import { Plus, Trash2 } from '@lucide/svelte';
+  import TooltipButton from '../TooltipButton.svelte';
+  import FieldRenderer from '../FieldRenderer.svelte';
+
+  let { field, value, onchange } = $props<{
+    field: FieldDefinition;
+    value: unknown;
+    onchange: (val: unknown) => void;
+  }>();
+
+  const arrayVal = $derived(Array.isArray(value) ? value : []);
+  const subFields = $derived(field.subFields || []);
+
+  function getDefaultForType(type: string): unknown {
+    switch (type) {
+      case 'text': case 'textarea': case 'richtext': case 'image': return '';
+      case 'number': return 0;
+      case 'boolean': return false;
+      case 'tags': case 'images': case 'multiselect': case 'array': return [];
+      case 'json': return {};
+      default: return '';
+    }
+  }
+
+  function handleAdd() {
+    const newItem: Record<string, unknown> = {};
+    for (const f of subFields) {
+      newItem[f.key] = f.defaultValue ?? getDefaultForType(f.type);
+    }
+    onchange([...arrayVal, newItem]);
+  }
+
+  function handleRemove(index: number) {
+    onchange(arrayVal.filter((_, i) => i !== index));
+  }
+
+  function handleChange(index: number, key: string, val: unknown) {
+    const next = [...arrayVal];
+    next[index] = { ...next[index], [key]: val };
+    onchange(next);
+  }
+</script>
+
+<div class="space-y-4 rounded-lg border border-dashed p-4">
+  <div class="flex items-center justify-between">
+    <div class="text-sm font-medium text-foreground">
+      {field.label}
+      {#if field.required}
+        <span class="text-destructive">*</span>
+      {/if}
+    </div>
+    <Button variant="outline" size="sm" type="button" onclick={handleAdd}>
+      <Plus class="h-3.5 w-3.5 mr-1" /> {t('common.add') || 'Add'}
+    </Button>
+  </div>
+  
+  <div class="space-y-4 pt-2">
+    {#each arrayVal as item, i}
+      <div class="relative rounded-md border bg-card p-4 pt-6 shadow-sm">
+        <div class="absolute right-2 top-2">
+          <TooltipButton tooltip={t('common.remove') || 'Remove'} variant="ghost" size="icon" class="h-8 w-8 text-muted-foreground hover:text-destructive transition-colors" onclick={() => handleRemove(i)}>
+            <Trash2 class="h-4 w-4" />
+          </TooltipButton>
+        </div>
+        <div class="grid gap-5">
+          {#each subFields as subField (subField.key)}
+            <FieldRenderer
+              field={subField}
+              value={item[subField.key]}
+              onchange={(val) => handleChange(i, subField.key, val)}
+            />
+          {/each}
+        </div>
+      </div>
+    {/each}
+    {#if arrayVal.length === 0}
+      <div class="flex flex-col items-center justify-center py-6 text-sm text-muted-foreground bg-muted/10 rounded-md">
+        <span>{t('common.noData') || 'No items added yet.'}</span>
+      </div>
+    {/if}
+  </div>
+</div>

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

@@ -0,0 +1,9 @@
+import type { FieldDefinition } from '@svadmin/core';
+type $$ComponentProps = {
+    field: FieldDefinition;
+    value: unknown;
+    onchange: (val: unknown) => void;
+};
+declare const ArrayField: import("svelte").Component<$$ComponentProps, {}, "">;
+type ArrayField = ReturnType<typeof ArrayField>;
+export default ArrayField;

package/dist/components/fields/BooleanField.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  interface Props { value: boolean | null | undefined; trueIcon?: string; falseIcon?: string }
+  let { value, trueIcon = '✓', falseIcon = '✗' }: Props = $props();
+</script>
+{#if value}
+  <span class="inline-flex items-center justify-center w-6 h-6 rounded-full text-sm bg-success/10 text-success">
+    {trueIcon}
+  </span>
+{:else}
+  <span class="inline-flex items-center justify-center w-6 h-6 rounded-full text-sm bg-destructive/10 text-destructive">
+    {falseIcon}
+  </span>
+{/if}

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

@@ -0,0 +1,8 @@
+interface Props {
+    value: boolean | null | undefined;
+    trueIcon?: string;
+    falseIcon?: string;
+}
+declare const BooleanField: import("svelte").Component<Props, {}, "">;
+type BooleanField = ReturnType<typeof BooleanField>;
+export default BooleanField;

package/dist/components/fields/DateField.svelte

@@ -0,0 +1,6 @@
+<script lang="ts">
+  interface Props { value: string | number | Date | null | undefined; locale?: string; options?: Intl.DateTimeFormatOptions }
+  let { value, locale = 'en-US', options = { dateStyle: 'medium' } }: Props = $props();
+  const formatted = $derived(value != null ? new Intl.DateTimeFormat(locale, options).format(new Date(value as string | number | Date)) : '—');
+</script>
+<span class="field-date">{formatted}</span>

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

@@ -0,0 +1,8 @@
+interface Props {
+    value: string | number | Date | null | undefined;
+    locale?: string;
+    options?: Intl.DateTimeFormatOptions;
+}
+declare const DateField: import("svelte").Component<Props, {}, "">;
+type DateField = ReturnType<typeof DateField>;
+export default DateField;

package/dist/components/fields/EmailField.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+  interface Props { value: string | null | undefined }
+  let { value }: Props = $props();
+</script>
+{#if value}
+  <a href="mailto:{value}" class="text-primary hover:underline no-underline">{value}</a>
+{:else}
+  <span class="text-muted-foreground">—</span>
+{/if}

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

@@ -0,0 +1,6 @@
+interface Props {
+    value: string | null | undefined;
+}
+declare const EmailField: import("svelte").Component<Props, {}, "">;
+type EmailField = ReturnType<typeof EmailField>;
+export default EmailField;

package/dist/components/fields/FileField.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+  import { Download } from '@lucide/svelte';
+  interface Props { value: string | null | undefined; title?: string }
+  let { value, title }: Props = $props();
+  const fileName = $derived(value ? value.split('/').pop() ?? value : null);
+</script>
+{#if value}
+  <a href={value} download class="text-primary hover:underline no-underline inline-flex items-center gap-1" title={title ?? fileName ?? ''}>
+    <Download class="h-3.5 w-3.5 opacity-60" />
+    {fileName}
+  </a>
+{:else}
+  <span class="text-muted-foreground">—</span>
+{/if}

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

@@ -0,0 +1,7 @@
+interface Props {
+    value: string | null | undefined;
+    title?: string;
+}
+declare const FileField: import("svelte").Component<Props, {}, "">;
+type FileField = ReturnType<typeof FileField>;
+export default FileField;

package/dist/components/fields/ImageField.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+  interface Props { value: string | null | undefined; alt?: string; width?: number; height?: number }
+  let { value, alt = '', width = 80, height = 80 }: Props = $props();
+</script>
+{#if value}
+  <img src={value} {alt} {width} {height} class="rounded-lg object-cover border border-border" />
+{:else}
+  <span class="inline-flex items-center justify-center w-20 h-20 bg-muted rounded-lg text-muted-foreground">—</span>
+{/if}

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

@@ -0,0 +1,9 @@
+interface Props {
+    value: string | null | undefined;
+    alt?: string;
+    width?: number;
+    height?: number;
+}
+declare const ImageField: import("svelte").Component<Props, {}, "">;
+type ImageField = ReturnType<typeof ImageField>;
+export default ImageField;

package/dist/components/fields/JsonField.svelte

@@ -0,0 +1,72 @@
+<script lang="ts">
+  import { t } from '@svadmin/core/i18n';
+  import { Button } from '../ui/button/index.js';
+  import { Copy, Check, ChevronDown, ChevronRight } from '@lucide/svelte';
+
+  let { value } = $props<{
+    value: unknown;
+  }>();
+
+  let expanded = $state(false);
+  let copied = $state(false);
+  let copyTimer: ReturnType<typeof setTimeout> | undefined;
+
+  $effect(() => {
+    return () => { if (copyTimer) clearTimeout(copyTimer); };
+  });
+
+  const formatted = $derived(
+    value != null ? JSON.stringify(value, null, 2) : '—'
+  );
+
+  const preview = $derived(
+    value != null ? JSON.stringify(value).slice(0, 80) + (JSON.stringify(value).length > 80 ? '...' : '') : '—'
+  );
+
+  function copyJson() {
+    navigator.clipboard.writeText(formatted);
+    copied = true;
+    if (copyTimer) clearTimeout(copyTimer);
+    copyTimer = setTimeout(() => { copied = false; }, 2000);
+  }
+</script>
+
+{#if value == null}
+  <span class="text-muted-foreground">—</span>
+{:else}
+  <div class="space-y-1">
+    <div class="flex items-center gap-2">
+      <Button
+        variant="ghost"
+        size="sm"
+        class="flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground h-auto py-0.5 px-1"
+        onclick={() => { expanded = !expanded; }}
+      >
+        {#if expanded}
+          <ChevronDown class="h-3 w-3" />
+        {:else}
+          <ChevronRight class="h-3 w-3" />
+        {/if}
+        {expanded ? t('common.collapse') : t('common.expand')}
+      </Button>
+      <Button
+        variant="ghost"
+        size="sm"
+        class="flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground h-auto py-0.5 px-1"
+        onclick={copyJson}
+        aria-label={t('common.copy')}
+      >
+        {#if copied}
+          <Check class="h-3 w-3 text-emerald-500" />
+        {:else}
+          <Copy class="h-3 w-3" />
+        {/if}
+      </Button>
+    </div>
+    {#if expanded}
+      <pre class="rounded-lg bg-muted p-3 text-xs overflow-auto max-h-64 font-mono">{formatted}</pre>
+    {:else}
+      <code class="text-xs font-mono bg-muted px-1.5 py-0.5 rounded">{preview}</code>
+    {/if}
+  </div>
+{/if}

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

@@ -0,0 +1,6 @@
+type $$ComponentProps = {
+    value: unknown;
+};
+declare const JsonField: import("svelte").Component<$$ComponentProps, {}, "">;
+type JsonField = ReturnType<typeof JsonField>;
+export default JsonField;

package/dist/components/fields/MarkdownField.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+  interface Props { value: string | null | undefined }
+  let { value }: Props = $props();
+</script>
+{#if value}
+  <div class="prose prose-sm dark:prose-invert max-w-none leading-relaxed [&_code]:bg-muted [&_code]:px-1.5 [&_code]:py-0.5 [&_code]:rounded [&_code]:text-[0.875em] [&_pre]:bg-muted [&_pre]:p-3 [&_pre]:rounded-lg [&_pre]:overflow-x-auto [&_a]:text-primary">{@html value}</div>
+{:else}
+  <span class="text-muted-foreground">—</span>
+{/if}

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

@@ -0,0 +1,6 @@
+interface Props {
+    value: string | null | undefined;
+}
+declare const MarkdownField: import("svelte").Component<Props, {}, "">;
+type MarkdownField = ReturnType<typeof MarkdownField>;
+export default MarkdownField;