@svadmin/ui 0.64.0 → 0.65.0

package/dist/components/CanvasAnnotation.svelte

@@ -0,0 +1,389 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { Button } from './ui/button/index.js';
+  import {
+    Pencil,
+    Square,
+    Circle,
+    MoveUpRight,
+    Type,
+    Eraser,
+    RotateCcw,
+    Trash2,
+    Download,
+  } from '@lucide/svelte';
+  import { cn } from '../utils.js';
+
+  export type AnnotationTool = 'pen' | 'rect' | 'circle' | 'arrow' | 'text' | 'eraser';
+
+  interface Props {
+    imageUrl?: string;
+    width?: number;
+    height?: number;
+    activeTool?: AnnotationTool;
+    strokeWidth?: number;
+    onchange?: (dataUrl: string) => void;
+    onexport?: (dataUrl: string) => void;
+    class?: string;
+  }
+
+  let {
+    imageUrl = '',
+    width = 700,
+    height = 450,
+    activeTool = $bindable('pen'),
+    strokeWidth = 3,
+    onchange,
+    onexport,
+    class: className = '',
+  }: Props = $props();
+
+  let canvasEl = $state<HTMLCanvasElement | null>(null);
+  let isDrawing = $state(false);
+  let startX = 0;
+  let startY = 0;
+  let history = $state<ImageData[]>([]);
+  let bgImage: HTMLImageElement | null = null;
+  let textInputPrompt = $state('');
+  let showTextPrompt = $state(false);
+  let textPos = $state({ x: 0, y: 0 });
+
+  interface Point {
+    x: number;
+    y: number;
+  }
+
+  function getCanvasPos(e: MouseEvent | TouchEvent): Point | null {
+    if (!canvasEl) return null;
+    const rect = canvasEl.getBoundingClientRect();
+    const scaleX = canvasEl.width / rect.width;
+    const scaleY = canvasEl.height / rect.height;
+
+    if ('touches' in e) {
+      if (e.touches.length === 0) return null;
+      const touch = e.touches[0];
+      if (!touch) return null;
+      return {
+        x: (touch.clientX - rect.left) * scaleX,
+        y: (touch.clientY - rect.top) * scaleY,
+      };
+    } else {
+      return {
+        x: (e.clientX - rect.left) * scaleX,
+        y: (e.clientY - rect.top) * scaleY,
+      };
+    }
+  }
+
+  function saveHistory() {
+    if (!canvasEl) return;
+    const ctx = canvasEl.getContext('2d');
+    if (ctx) {
+      history = [...history, ctx.getImageData(0, 0, canvasEl.width, canvasEl.height)];
+    }
+  }
+
+  function drawArrow(ctx: CanvasRenderingContext2D, fromX: number, fromY: number, toX: number, toY: number) {
+    const headlen = 12;
+    const angle = Math.atan2(toY - fromY, toX - fromX);
+    ctx.beginPath();
+    ctx.moveTo(fromX, fromY);
+    ctx.lineTo(toX, toY);
+    ctx.lineTo(toX - headlen * Math.cos(angle - Math.PI / 6), toY - headlen * Math.sin(angle - Math.PI / 6));
+    ctx.moveTo(toX, toY);
+    ctx.lineTo(toX - headlen * Math.cos(angle + Math.PI / 6), toY - headlen * Math.sin(angle + Math.PI / 6));
+    ctx.stroke();
+  }
+
+  function startAction(e: MouseEvent | TouchEvent) {
+    if (!canvasEl) return;
+    const pos = getCanvasPos(e);
+    if (!pos) return;
+
+    if (activeTool === 'text') {
+      textPos = pos;
+      showTextPrompt = true;
+      return;
+    }
+
+    saveHistory();
+    isDrawing = true;
+    startX = pos.x;
+    startY = pos.y;
+
+    const ctx = canvasEl.getContext('2d');
+    if (!ctx) return;
+    ctx.lineWidth = strokeWidth;
+    ctx.lineCap = 'round';
+    ctx.lineJoin = 'round';
+
+    if (activeTool === 'eraser') {
+      ctx.globalCompositeOperation = 'destination-out';
+    } else {
+      ctx.globalCompositeOperation = 'source-over';
+      ctx.strokeStyle = getComputedStyle(canvasEl).color || 'rgb(225, 29, 72)';
+    }
+
+    if (activeTool === 'pen') {
+      ctx.beginPath();
+      ctx.moveTo(pos.x, pos.y);
+    }
+  }
+
+  function handleMove(e: MouseEvent | TouchEvent) {
+    if (!isDrawing || !canvasEl) return;
+    const pos = getCanvasPos(e);
+    if (!pos) return;
+
+    const ctx = canvasEl.getContext('2d');
+    if (!ctx) return;
+
+    if (activeTool === 'pen' || activeTool === 'eraser') {
+      ctx.lineTo(pos.x, pos.y);
+      ctx.stroke();
+    } else if (activeTool === 'rect' || activeTool === 'circle' || activeTool === 'arrow') {
+      const last = history[history.length - 1];
+      if (last) {
+        ctx.putImageData(last, 0, 0);
+      }
+      ctx.strokeStyle = getComputedStyle(canvasEl).color || 'rgb(225, 29, 72)';
+      ctx.lineWidth = strokeWidth;
+
+      if (activeTool === 'rect') {
+        ctx.strokeRect(startX, startY, pos.x - startX, pos.y - startY);
+      } else if (activeTool === 'circle') {
+        ctx.beginPath();
+        const rx = Math.abs(pos.x - startX) / 2;
+        const ry = Math.abs(pos.y - startY) / 2;
+        const cx = Math.min(startX, pos.x) + rx;
+        const cy = Math.min(startY, pos.y) + ry;
+        ctx.ellipse(cx, cy, rx, ry, 0, 0, Math.PI * 2);
+        ctx.stroke();
+      } else if (activeTool === 'arrow') {
+        drawArrow(ctx, startX, startY, pos.x, pos.y);
+      }
+    }
+  }
+
+  function stopAction() {
+    if (!isDrawing || !canvasEl) return;
+    isDrawing = false;
+    const ctx = canvasEl.getContext('2d');
+    if (ctx) {
+      ctx.globalCompositeOperation = 'source-over';
+    }
+    const dataUrl = canvasEl.toDataURL('image/png');
+    onchange?.(dataUrl);
+  }
+
+  function submitText() {
+    if (!canvasEl || !textInputPrompt.trim()) {
+      showTextPrompt = false;
+      textInputPrompt = '';
+      return;
+    }
+    saveHistory();
+    const ctx = canvasEl.getContext('2d');
+    if (ctx) {
+      ctx.fillStyle = getComputedStyle(canvasEl).color || 'rgb(225, 29, 72)';
+      ctx.font = 'bold 14px sans-serif';
+      ctx.fillText(textInputPrompt.trim(), textPos.x, textPos.y);
+    }
+    showTextPrompt = false;
+    textInputPrompt = '';
+    const dataUrl = canvasEl.toDataURL('image/png');
+    onchange?.(dataUrl);
+  }
+
+  export function undo() {
+    if (!canvasEl || history.length === 0) return;
+    const ctx = canvasEl.getContext('2d');
+    if (!ctx) return;
+    const previous = history[history.length - 1];
+    history = history.slice(0, -1);
+    if (previous) {
+      ctx.putImageData(previous, 0, 0);
+    }
+    const dataUrl = canvasEl.toDataURL('image/png');
+    onchange?.(dataUrl);
+  }
+
+  export function clear() {
+    if (!canvasEl) return;
+    saveHistory();
+    const ctx = canvasEl.getContext('2d');
+    if (!ctx) return;
+    ctx.clearRect(0, 0, canvasEl.width, canvasEl.height);
+    if (bgImage) {
+      ctx.drawImage(bgImage, 0, 0, canvasEl.width, canvasEl.height);
+    }
+    const dataUrl = canvasEl.toDataURL('image/png');
+    onchange?.(dataUrl);
+  }
+
+  function handleExport() {
+    if (!canvasEl) return;
+    const dataUrl = canvasEl.toDataURL('image/png');
+    onexport?.(dataUrl);
+
+    const a = document.createElement('a');
+    a.href = dataUrl;
+    a.download = `annotation_${Date.now()}.png`;
+    a.click();
+  }
+
+  function redrawBg() {
+    if (!canvasEl || !imageUrl) return;
+    bgImage = new Image();
+    bgImage.crossOrigin = 'anonymous';
+    bgImage.onload = () => {
+      if (!canvasEl) return;
+      const ctx = canvasEl.getContext('2d');
+      if (ctx) {
+        ctx.clearRect(0, 0, canvasEl.width, canvasEl.height);
+        if (bgImage) ctx.drawImage(bgImage, 0, 0, canvasEl.width, canvasEl.height);
+      }
+    };
+    bgImage.src = imageUrl;
+  }
+
+  onMount(() => {
+    redrawBg();
+  });
+</script>
+
+<div class={cn('rounded-xl border border-border bg-card p-4 shadow-xs text-xs space-y-3', className)}>
+  <!-- Header & Toolbar -->
+  <div class="flex flex-wrap items-center justify-between gap-2 pb-2 border-b border-border/60">
+    <div class="flex items-center gap-1 bg-muted/40 p-1 rounded-lg border border-border/60">
+      <Button
+        variant={activeTool === 'pen' ? 'default' : 'ghost'}
+        size="sm"
+        class="h-7 w-7 p-0"
+        onclick={() => { activeTool = 'pen'; }}
+        title="Pen"
+      >
+        <Pencil class="h-3.5 w-3.5" />
+      </Button>
+
+      <Button
+        variant={activeTool === 'rect' ? 'default' : 'ghost'}
+        size="sm"
+        class="h-7 w-7 p-0"
+        onclick={() => { activeTool = 'rect'; }}
+        title="Rectangle"
+      >
+        <Square class="h-3.5 w-3.5" />
+      </Button>
+
+      <Button
+        variant={activeTool === 'circle' ? 'default' : 'ghost'}
+        size="sm"
+        class="h-7 w-7 p-0"
+        onclick={() => { activeTool = 'circle'; }}
+        title="Circle"
+      >
+        <Circle class="h-3.5 w-3.5" />
+      </Button>
+
+      <Button
+        variant={activeTool === 'arrow' ? 'default' : 'ghost'}
+        size="sm"
+        class="h-7 w-7 p-0"
+        onclick={() => { activeTool = 'arrow'; }}
+        title="Arrow"
+      >
+        <MoveUpRight class="h-3.5 w-3.5" />
+      </Button>
+
+      <Button
+        variant={activeTool === 'text' ? 'default' : 'ghost'}
+        size="sm"
+        class="h-7 w-7 p-0"
+        onclick={() => { activeTool = 'text'; }}
+        title="Text Note"
+      >
+        <Type class="h-3.5 w-3.5" />
+      </Button>
+
+      <Button
+        variant={activeTool === 'eraser' ? 'default' : 'ghost'}
+        size="sm"
+        class="h-7 w-7 p-0"
+        onclick={() => { activeTool = 'eraser'; }}
+        title="Eraser"
+      >
+        <Eraser class="h-3.5 w-3.5" />
+      </Button>
+    </div>
+
+    <div class="flex items-center gap-1.5">
+      <Button
+        variant="ghost"
+        size="sm"
+        class="h-7 text-xs gap-1 text-muted-foreground hover:text-foreground"
+        disabled={history.length === 0}
+        onclick={undo}
+      >
+        <RotateCcw class="h-3 w-3" />
+        Undo
+      </Button>
+
+      <Button
+        variant="ghost"
+        size="sm"
+        class="h-7 text-xs gap-1 text-muted-foreground hover:text-destructive hover:bg-destructive/10"
+        onclick={clear}
+      >
+        <Trash2 class="h-3 w-3" />
+        Clear
+      </Button>
+
+      <Button
+        variant="outline"
+        size="sm"
+        class="h-7 text-xs gap-1"
+        onclick={handleExport}
+      >
+        <Download class="h-3 w-3" />
+        Export
+      </Button>
+    </div>
+  </div>
+
+  <!-- Canvas Container -->
+  <div class="relative w-full rounded-lg border border-border/80 bg-muted/20 overflow-hidden flex items-center justify-center">
+    <canvas
+      bind:this={canvasEl}
+      {width}
+      {height}
+      class="touch-none cursor-crosshair max-w-full h-auto block bg-card"
+      onmousedown={startAction}
+      onmousemove={handleMove}
+      onmouseup={stopAction}
+      onmouseleave={stopAction}
+      ontouchstart={(e) => { e.preventDefault(); startAction(e); }}
+      ontouchmove={(e) => { e.preventDefault(); handleMove(e); }}
+      ontouchend={(e) => { e.preventDefault(); stopAction(); }}
+    ></canvas>
+
+    {#if showTextPrompt}
+      <div
+        class="absolute z-50 p-2 rounded-lg border border-border bg-popover shadow-md flex items-center gap-1.5"
+        style={`left: ${Math.min(textPos.x, width - 180)}px; top: ${Math.min(textPos.y, height - 50)}px;`}
+      >
+        <input
+          type="text"
+          bind:value={textInputPrompt}
+          placeholder="Annotation text..."
+          class="h-7 w-36 rounded border border-input bg-background px-2 text-xs text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+          onkeydown={(e) => {
+            if (e.key === 'Enter') submitText();
+            else if (e.key === 'Escape') showTextPrompt = false;
+          }}
+        />
+        <Button size="sm" class="h-7 text-xs px-2" onclick={submitText}>Add</Button>
+      </div>
+    {/if}
+  </div>
+</div>

package/dist/components/CanvasAnnotation.svelte.d.ts

@@ -0,0 +1,17 @@
+export type AnnotationTool = 'pen' | 'rect' | 'circle' | 'arrow' | 'text' | 'eraser';
+interface Props {
+    imageUrl?: string;
+    width?: number;
+    height?: number;
+    activeTool?: AnnotationTool;
+    strokeWidth?: number;
+    onchange?: (dataUrl: string) => void;
+    onexport?: (dataUrl: string) => void;
+    class?: string;
+}
+declare const CanvasAnnotation: import("svelte").Component<Props, {
+    undo: () => void;
+    clear: () => void;
+}, "activeTool">;
+type CanvasAnnotation = ReturnType<typeof CanvasAnnotation>;
+export default CanvasAnnotation;

package/dist/components/ColumnHeaderFilter.svelte

@@ -0,0 +1,178 @@
+<script lang="ts">
+  import { untrack } from 'svelte';
+  import type { FieldDefinition, CrudOperator } from '@svadmin/core';
+  import { useTranslation } from '@svadmin/core/i18n';
+  import * as Popover from './ui/popover/index.js';
+  import { Button } from './ui/button/index.js';
+  import { Filter, Check, RotateCcw } from '@lucide/svelte';
+  import { cn } from '../utils.js';
+
+  interface Props {
+    field: FieldDefinition;
+    currentValue?: unknown;
+    currentOperator?: CrudOperator;
+    onapply?: (operator: CrudOperator, value: unknown) => void;
+    onclear?: () => void;
+    class?: string;
+  }
+
+  let {
+    field,
+    currentValue,
+    currentOperator = 'contains',
+    onapply,
+    onclear,
+    class: className = '',
+  }: Props = $props();
+
+  const i18n = useTranslation();
+  let open = $state(false);
+  let operator = $state<CrudOperator>(untrack(() => currentOperator));
+  let filterVal = $state<string>(untrack(() => String(currentValue ?? '')));
+
+  const hasActiveFilter = $derived(currentValue !== undefined && String(currentValue).trim().length > 0);
+
+  const applicableOperators = $derived.by(() => {
+    switch (field.type) {
+      case 'number':
+      case 'currency':
+        return [
+          { value: 'eq' as const, label: '= Equal' },
+          { value: 'gt' as const, label: '> Greater than' },
+          { value: 'gte' as const, label: '>= Greater equal' },
+          { value: 'lt' as const, label: '< Less than' },
+          { value: 'lte' as const, label: '<= Less equal' },
+        ];
+      case 'date':
+        return [
+          { value: 'eq' as const, label: '= On date' },
+          { value: 'gte' as const, label: '>= After or on' },
+          { value: 'lte' as const, label: '<= Before or on' },
+        ];
+      case 'boolean':
+        return [
+          { value: 'eq' as const, label: 'Is' },
+        ];
+      default:
+        return [
+          { value: 'contains' as const, label: 'Contains' },
+          { value: 'eq' as const, label: 'Equals' },
+          { value: 'ne' as const, label: 'Not equals' },
+        ];
+    }
+  });
+
+  function handleApply() {
+    let finalVal: unknown = filterVal.trim();
+    if (field.type === 'number' || field.type === 'currency') {
+      const num = Number(finalVal);
+      finalVal = isNaN(num) ? finalVal : num;
+    }
+    onapply?.(operator, finalVal);
+    open = false;
+  }
+
+  function handleClear() {
+    filterVal = '';
+    onclear?.();
+    open = false;
+  }
+</script>
+
+<Popover.Root bind:open>
+  <Popover.Trigger>
+    {#snippet child({ props })}
+      <button
+        {...props}
+        type="button"
+        class={cn(
+          'inline-flex items-center justify-center h-6 w-6 rounded-md transition-colors cursor-pointer',
+          hasActiveFilter
+            ? 'bg-primary/15 text-primary'
+            : 'text-muted-foreground/60 hover:text-foreground hover:bg-muted/50',
+          className
+        )}
+        aria-label="Filter {field.label}"
+      >
+        <Filter class="h-3 w-3" />
+      </button>
+    {/snippet}
+  </Popover.Trigger>
+  <Popover.Content class="w-64 p-3 text-xs" align="start">
+    <div class="space-y-3">
+      <div class="font-medium text-foreground pb-1 border-b border-border/50">
+        Filter {field.label}
+      </div>
+
+      <div class="space-y-1">
+        <label class="block text-[11px] text-muted-foreground" for="header_filter_op_{field.key}">Operator</label>
+        <select
+          id="header_filter_op_{field.key}"
+          bind:value={operator}
+          class="h-7.5 w-full rounded-md border border-input bg-background px-2 text-xs focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+        >
+          {#each applicableOperators as op (op.value)}
+            <option value={op.value}>{op.label}</option>
+          {/each}
+        </select>
+      </div>
+
+      <div class="space-y-1">
+        <label class="block text-[11px] text-muted-foreground" for="header_filter_val_{field.key}">Value</label>
+        {#if field.type === 'select' && field.options}
+          <select
+            id="header_filter_val_{field.key}"
+            bind:value={filterVal}
+            class="h-7.5 w-full rounded-md border border-input bg-background px-2 text-xs focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+          >
+            <option value="">All</option>
+            {#each field.options as opt (opt.value)}
+              <option value={String(opt.value)}>{opt.label}</option>
+            {/each}
+          </select>
+        {:else if field.type === 'boolean'}
+          <select
+            id="header_filter_val_{field.key}"
+            bind:value={filterVal}
+            class="h-7.5 w-full rounded-md border border-input bg-background px-2 text-xs focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+          >
+            <option value="">All</option>
+            <option value="true">Yes / True</option>
+            <option value="false">No / False</option>
+          </select>
+        {:else if field.type === 'date'}
+          <input
+            id="header_filter_val_{field.key}"
+            type="date"
+            bind:value={filterVal}
+            class="h-7.5 w-full rounded-md border border-input bg-background px-2 text-xs focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+          />
+        {:else}
+          <input
+            id="header_filter_val_{field.key}"
+            type="text"
+            bind:value={filterVal}
+            placeholder="Search {field.label}..."
+            class="h-7.5 w-full rounded-md border border-input bg-background px-2 text-xs focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+          />
+        {/if}
+      </div>
+
+      <div class="flex items-center justify-between pt-1 border-t border-border/50">
+        <Button
+          variant="ghost"
+          size="sm"
+          class="h-7 px-2 text-xs text-muted-foreground hover:text-foreground gap-1"
+          onclick={handleClear}
+        >
+          <RotateCcw class="h-3 w-3" />
+          {i18n.t('common.clear', { defaultValue: 'Clear' })}
+        </Button>
+        <Button size="sm" class="h-7 px-2.5 text-xs gap-1" onclick={handleApply}>
+          <Check class="h-3 w-3" />
+          {i18n.t('common.apply', { defaultValue: 'Apply' })}
+        </Button>
+      </div>
+    </div>
+  </Popover.Content>
+</Popover.Root>

package/dist/components/ColumnHeaderFilter.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { FieldDefinition, CrudOperator } from '@svadmin/core';
+interface Props {
+    field: FieldDefinition;
+    currentValue?: unknown;
+    currentOperator?: CrudOperator;
+    onapply?: (operator: CrudOperator, value: unknown) => void;
+    onclear?: () => void;
+    class?: string;
+}
+declare const ColumnHeaderFilter: import("svelte").Component<Props, {}, "">;
+type ColumnHeaderFilter = ReturnType<typeof ColumnHeaderFilter>;
+export default ColumnHeaderFilter;