@svadmin/ui 0.29.0 → 0.29.2

package/src/components/buttons/ImportButton.svelte

@@ -1,56 +0,0 @@
-<script lang="ts">
-  import { useImport, useCan, t, type UseImportOptions } from '@svadmin/core';
-  import { Button } from '../ui/button/index.js';
-  import { Upload } from '@lucide/svelte';
-
-  let { resource, hideText = false, onFinish, accessControl = { enabled: true, hideIfUnauthorized: true }, class: className = '' } = $props<{
-    resource: string;
-    hideText?: boolean;
-    onFinish?: (result: { succeeded: unknown[]; errored: { request: unknown; error: unknown }[] }) => void;
-    accessControl?: { enabled?: boolean; hideIfUnauthorized?: boolean };
-    class?: string;
-  }>();
-
-  let fileInput: HTMLInputElement | undefined = $state();
-
-  const importHook = useImport({
-    get resource() { return resource; },
-    onFinish: (result) => onFinish?.(result),
-  });
-
-  function triggerImport() {
-    fileInput?.click();
-  }
-
-  function handleFileChange(e: Event) {
-    const input = e.target as HTMLInputElement;
-    const file = input.files?.[0];
-    if (file) {
-      importHook.handleChange({ file });
-      input.value = ''; // reset for re-import
-    }
-  }
-
-  const can = useCan(() => ({ resource, action: 'import', queryOptions: { enabled: accessControl?.enabled ?? true } }));
-  const hidden = $derived(accessControl?.hideIfUnauthorized && !can.allowed);
-</script>
-
-{#if !hidden}
-<input
-  bind:this={fileInput}
-  type="file"
-  accept=".csv"
-  style="display:none"
-  onchange={handleFileChange}
-/>
-  <Button
-    variant="outline"
-    size={hideText ? 'icon' : 'sm'}
-    class={className}
-    disabled={importHook.isLoading || !can.allowed}
-    onclick={triggerImport}
-  >
-    <Upload class="h-4 w-4" />
-    {#if !hideText}<span class="ml-1">{t('common.import')}</span>{/if}
-  </Button>
-{/if}

package/src/components/buttons/ListButton.svelte

@@ -1,23 +0,0 @@
-<script lang="ts">
-  import { useNavigation, t } from '@svadmin/core';
-  import { Button } from '../ui/button/index.js';
-  import { List } from '@lucide/svelte';
-
-  let { resource, hideText = false, class: className = '' } = $props<{
-    resource: string;
-    hideText?: boolean;
-    class?: string;
-  }>();
-
-  const nav = useNavigation();
-</script>
-
-<Button
-  variant="outline"
-  size={hideText ? 'icon' : 'sm'}
-  class={className}
-  onclick={() => nav.list(resource)}
->
-  <List class="h-4 w-4" />
-  {#if !hideText}<span class="ml-1">{resource}</span>{/if}
-</Button>

package/src/components/buttons/RefreshButton.svelte

@@ -1,36 +0,0 @@
-<script lang="ts">
-  import { useInvalidate, t } from '@svadmin/core';
-  import { Button } from '../ui/button/index.js';
-  import { RefreshCw } from '@lucide/svelte';
-
-  let { resource, hideText = false, class: className = '' } = $props<{
-    resource: string;
-    hideText?: boolean;
-    class?: string;
-  }>();
-
-  const invalidate = useInvalidate();
-  let spinning = $state(false);
-  let spinTimer: ReturnType<typeof setTimeout> | undefined;
-
-  $effect(() => {
-    return () => { if (spinTimer) clearTimeout(spinTimer); };
-  });
-
-  function refresh() {
-    spinning = true;
-    invalidate({ resource, invalidates: ['list', 'many'] });
-    if (spinTimer) clearTimeout(spinTimer);
-    spinTimer = setTimeout(() => { spinning = false; }, 600);
-  }
-</script>
-
-<Button
-  variant="ghost"
-  size={hideText ? 'icon' : 'sm'}
-  class={className}
-  onclick={refresh}
->
-  <RefreshCw class="h-4 w-4 {spinning ? 'animate-spin' : ''}" />
-  {#if !hideText}<span class="ml-1">{t('common.retry')}</span>{/if}
-</Button>

package/src/components/buttons/SaveButton.svelte

@@ -1,27 +0,0 @@
-<script lang="ts">
-  import { t } from '@svadmin/core';
-  import { Button } from '../ui/button/index.js';
-  import { Save, Loader2 } from '@lucide/svelte';
-
-  let { loading = false, hideText = false, type = 'submit', class: className = '' } = $props<{
-    loading?: boolean;
-    hideText?: boolean;
-    type?: 'submit' | 'button';
-    class?: string;
-  }>();
-</script>
-
-<Button
-  {type}
-  variant="default"
-  size={hideText ? 'icon' : 'default'}
-  class={className}
-  disabled={loading}
->
-  {#if loading}
-    <Loader2 class="h-4 w-4 animate-spin" />
-  {:else}
-    <Save class="h-4 w-4" />
-  {/if}
-  {#if !hideText}<span class="ml-1">{t('common.save')}</span>{/if}
-</Button>

package/src/components/buttons/ShowButton.svelte

@@ -1,31 +0,0 @@
-<script lang="ts">
-  import { useNavigation, useCan, t } from '@svadmin/core';
-  import { Button } from '../ui/button/index.js';
-  import { Eye } from '@lucide/svelte';
-
-  let { resource, recordItemId, hideText = false, accessControl = { enabled: true, hideIfUnauthorized: true }, class: className = '' } = $props<{
-    resource: string;
-    recordItemId: string | number;
-    hideText?: boolean;
-    accessControl?: { enabled?: boolean; hideIfUnauthorized?: boolean };
-    class?: string;
-  }>();
-
-  const nav = useNavigation();
-  const can = useCan(() => ({ resource, action: 'show', queryOptions: { enabled: accessControl?.enabled ?? true } }));
-  const hidden = $derived(accessControl?.hideIfUnauthorized && !can.allowed);
-</script>
-
-{#if !hidden}
-
-  <Button
-    variant="ghost"
-    size={hideText ? 'icon' : 'sm'}
-    class={className}
-    disabled={!can.allowed}
-    onclick={() => nav.show(resource, recordItemId)}
-  >
-    <Eye class="h-4 w-4" />
-    {#if !hideText}<span class="ml-1">{t('common.detail')}</span>{/if}
-  </Button>
-{/if}

package/src/components/buttons/index.ts

@@ -1,10 +0,0 @@
-export { default as CreateButton } from './CreateButton.svelte';
-export { default as EditButton } from './EditButton.svelte';
-export { default as DeleteButton } from './DeleteButton.svelte';
-export { default as ShowButton } from './ShowButton.svelte';
-export { default as ListButton } from './ListButton.svelte';
-export { default as RefreshButton } from './RefreshButton.svelte';
-export { default as ExportButton } from './ExportButton.svelte';
-export { default as ImportButton } from './ImportButton.svelte';
-export { default as SaveButton } from './SaveButton.svelte';
-export { default as CloneButton } from './CloneButton.svelte';

package/src/components/charts/BarChart.svelte

@@ -1,69 +0,0 @@
-<script lang="ts">
-  interface DataPoint {
-    label: string;
-    value: number;
-    color?: string;
-  }
-
-  interface Props {
-    data: DataPoint[];
-    height?: number;
-    /** Show value labels on top of bars */
-    showValues?: boolean;
-    class?: string;
-  }
-
-  let { data, height = 200, showValues = true, class: className = '' }: Props = $props();
-
-  const maxValue = $derived(Math.max(...data.map(d => d.value), 1));
-  const barWidth = $derived(Math.max(20, Math.min(60, 400 / data.length)));
-  const gap = $derived(Math.max(4, barWidth * 0.3));
-  const totalWidth = $derived(data.length * (barWidth + gap) - gap + 40);
-</script>
-
-<div class="w-full overflow-x-auto {className}">
-  <svg viewBox="0 0 {totalWidth} {height + 30}" class="w-full" style="min-width: {Math.min(totalWidth, 300)}px;">
-    <!-- Bars -->
-    {#each data as point, i}
-      {@const barHeight = (point.value / maxValue) * (height - 20)}
-      {@const x = 20 + i * (barWidth + gap)}
-      {@const y = height - barHeight}
-
-      <!-- Bar with animation -->
-      <rect
-        {x}
-        {y}
-        width={barWidth}
-        height={barHeight}
-        rx="4"
-        fill={point.color || 'var(--primary)'}
-        opacity="0.85"
-        class="transition-all duration-500 hover:opacity-100"
-      >
-        <animate attributeName="height" from="0" to={barHeight} dur="0.6s" fill="freeze" calcMode="spline" keySplines="0.16 1 0.3 1" />
-        <animate attributeName="y" from={height} to={y} dur="0.6s" fill="freeze" calcMode="spline" keySplines="0.16 1 0.3 1" />
-      </rect>
-
-      <!-- Value label -->
-      {#if showValues}
-        <text
-          x={x + barWidth / 2}
-          y={y - 6}
-          text-anchor="middle"
-          fill="var(--muted-foreground)"
-          font-size="11"
-          font-weight="500"
-        >{point.value}</text>
-      {/if}
-
-      <!-- X-axis label -->
-      <text
-        x={x + barWidth / 2}
-        y={height + 16}
-        text-anchor="middle"
-        fill="var(--muted-foreground)"
-        font-size="10"
-      >{point.label}</text>
-    {/each}
-  </svg>
-</div>

package/src/components/charts/LineChart.svelte

@@ -1,115 +0,0 @@
-<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/src/components/charts/PieChart.svelte

@@ -1,95 +0,0 @@
-<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/src/components/charts/index.ts

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

package/src/components/fieldComponentMap.ts

@@ -1,79 +0,0 @@
-// 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.
-
-import type { Component } from 'svelte';
-
-export interface FieldComponentMap {
-  [fieldType: string]: Component<any>;
-}
-
-// Default display component map (read-only field display)
-// Dynamically imports components only when first used
-const displayCache = new Map<string, Component<any>>();
-
-// 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: FieldComponentMap = {
-  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<string, Component<any>>();
-
-/**
- * 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: string, component: Component<any>): void {
-  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: string): Component<any> | undefined {
-  return customDisplayComponents.get(fieldType) ?? builtinDisplayComponents[fieldType];
-}
-
-/**
- * Check if a field type has a display component (custom or built-in).
- */
-export function hasDisplayComponent(fieldType: string): boolean {
-  return customDisplayComponents.has(fieldType) || fieldType in builtinDisplayComponents;
-}

package/src/components/fields/ArrayField.svelte

@@ -1,86 +0,0 @@
-<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/src/components/fields/BooleanField.svelte

@@ -1,13 +0,0 @@
-<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/src/components/fields/DateField.svelte

@@ -1,6 +0,0 @@
-<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/src/components/fields/EmailField.svelte

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