@svadmin/ui 0.63.0 → 0.65.0

package/dist/components/JsonSchemaForm.svelte

@@ -0,0 +1,149 @@
+<script lang="ts">
+  import { Button } from './ui/button/index.js';
+  import { Loader2 } from '@lucide/svelte';
+  import { cn } from '../utils.js';
+
+  interface Props {
+    schema: Record<string, unknown>;
+    value?: Record<string, unknown>;
+    onsubmit?: (data: Record<string, unknown>) => void | Promise<void>;
+    submitText?: string;
+    class?: string;
+  }
+
+  let {
+    schema,
+    value = $bindable({}),
+    onsubmit,
+    submitText = 'Submit Form',
+    class: className = '',
+  }: Props = $props();
+
+  let isSubmitting = $state(false);
+
+  interface FieldMeta {
+    key: string;
+    title: string;
+    description?: string;
+    type: string;
+    enum?: Array<string | number>;
+    required?: boolean;
+    default?: unknown;
+  }
+
+  const properties = $derived.by<FieldMeta[]>(() => {
+    const propsObj = (schema.properties ?? {}) as Record<string, Record<string, unknown>>;
+    const requiredKeys = Array.isArray(schema.required) ? (schema.required as string[]) : [];
+
+    return Object.entries(propsObj).map(([key, propDef]) => ({
+      key,
+      title: String(propDef.title ?? key),
+      description: propDef.description ? String(propDef.description) : undefined,
+      type: String(propDef.type ?? 'string'),
+      enum: Array.isArray(propDef.enum) ? (propDef.enum as Array<string | number>) : undefined,
+      required: requiredKeys.includes(key),
+      default: propDef.default,
+    }));
+  });
+
+  async function handleSubmit(e: SubmitEvent) {
+    e.preventDefault();
+    isSubmitting = true;
+    try {
+      await onsubmit?.(value);
+    } finally {
+      isSubmitting = false;
+    }
+  }
+
+  function updateValue(key: string, val: unknown) {
+    value = {
+      ...value,
+      [key]: val,
+    };
+  }
+</script>
+
+<form
+  onsubmit={handleSubmit}
+  class={cn('space-y-4 rounded-xl border border-border bg-card p-6 shadow-xs text-xs', className)}
+>
+  {#if schema.title}
+    <div class="pb-2 border-b border-border/60">
+      <h3 class="text-sm font-semibold text-foreground">{schema.title}</h3>
+      {#if schema.description}
+        <p class="text-xs text-muted-foreground mt-0.5">{schema.description}</p>
+      {/if}
+    </div>
+  {/if}
+
+  <div class="space-y-3.5">
+    {#each properties as field (field.key)}
+      <div class="space-y-1">
+        <label for="json_field_{field.key}" class="block font-medium text-foreground">
+          {field.title}
+          {#if field.required}
+            <span class="text-destructive">*</span>
+          {/if}
+        </label>
+
+        {#if field.description}
+          <p class="text-[11px] text-muted-foreground">{field.description}</p>
+        {/if}
+
+        {#if field.enum}
+          <select
+            id="json_field_{field.key}"
+            required={field.required}
+            value={String(value[field.key] ?? field.default ?? '')}
+            onchange={(e) => updateValue(field.key, e.currentTarget.value)}
+            class="h-8 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="">Select an option...</option>
+            {#each field.enum as option (option)}
+              <option value={String(option)}>{option}</option>
+            {/each}
+          </select>
+        {:else if field.type === 'boolean'}
+          <div class="flex items-center gap-2 pt-1">
+            <input
+              id="json_field_{field.key}"
+              type="checkbox"
+              checked={Boolean(value[field.key] ?? field.default)}
+              onchange={(e) => updateValue(field.key, e.currentTarget.checked)}
+              class="h-4 w-4 rounded border-border text-primary focus:ring-primary/20 cursor-pointer"
+            />
+            <span class="text-xs text-muted-foreground">{field.title}</span>
+          </div>
+        {:else if field.type === 'number' || field.type === 'integer'}
+          <input
+            id="json_field_{field.key}"
+            type="number"
+            required={field.required}
+            value={Number(value[field.key] ?? field.default ?? 0)}
+            oninput={(e) => updateValue(field.key, Number(e.currentTarget.value))}
+            class="h-8 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="json_field_{field.key}"
+            type="text"
+            required={field.required}
+            value={String(value[field.key] ?? field.default ?? '')}
+            oninput={(e) => updateValue(field.key, e.currentTarget.value)}
+            class="h-8 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>
+    {/each}
+  </div>
+
+  <div class="pt-4 border-t border-border/60 flex justify-end">
+    <Button type="submit" size="sm" disabled={isSubmitting} class="gap-1 min-w-24">
+      {#if isSubmitting}
+        <Loader2 class="h-3.5 w-3.5 animate-spin" />
+      {/if}
+      {submitText}
+    </Button>
+  </div>
+</form>

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

@@ -0,0 +1,10 @@
+interface Props {
+    schema: Record<string, unknown>;
+    value?: Record<string, unknown>;
+    onsubmit?: (data: Record<string, unknown>) => void | Promise<void>;
+    submitText?: string;
+    class?: string;
+}
+declare const JsonSchemaForm: import("svelte").Component<Props, {}, "value">;
+type JsonSchemaForm = ReturnType<typeof JsonSchemaForm>;
+export default JsonSchemaForm;

package/dist/components/KanbanBoard.svelte

@@ -0,0 +1,212 @@
+<script lang="ts">
+  import { Button } from './ui/button/index.js';
+  import { Badge } from './ui/badge/index.js';
+  import { Plus, GripVertical } from '@lucide/svelte';
+  import { cn } from '../utils.js';
+
+  export interface KanbanCard {
+    id: string;
+    title: string;
+    description?: string;
+    columnId: string;
+    priority?: 'low' | 'medium' | 'high' | 'urgent';
+    tags?: string[];
+    assignee?: { name: string; avatar?: string };
+    dueDate?: string;
+  }
+
+  export interface KanbanColumn {
+    id: string;
+    title: string;
+    colorBadge?: string;
+  }
+
+  interface Props {
+    columns: KanbanColumn[];
+    cards?: KanbanCard[];
+    allowAddCard?: boolean;
+    oncardmove?: (cardId: string, targetColumnId: string) => void;
+    oncardclick?: (card: KanbanCard) => void;
+    oncardadd?: (columnId: string, title: string) => void;
+    class?: string;
+  }
+
+  let {
+    columns = [],
+    cards = $bindable([]),
+    allowAddCard = true,
+    oncardmove,
+    oncardclick,
+    oncardadd,
+    class: className = '',
+  }: Props = $props();
+
+  let draggedCardId = $state<string | null>(null);
+  let addingColumnId = $state<string | null>(null);
+  let newCardTitle = $state('');
+
+  function handleDragStart(e: DragEvent, cardId: string) {
+    draggedCardId = cardId;
+    if (e.dataTransfer) {
+      e.dataTransfer.effectAllowed = 'move';
+      e.dataTransfer.setData('text/plain', cardId);
+    }
+  }
+
+  function handleDragOver(e: DragEvent) {
+    e.preventDefault();
+    if (e.dataTransfer) {
+      e.dataTransfer.dropEffect = 'move';
+    }
+  }
+
+  function handleDrop(targetColId: string) {
+    if (!draggedCardId) return;
+    const card = cards.find((c) => c.id === draggedCardId);
+    if (card && card.columnId !== targetColId) {
+      cards = cards.map((c) =>
+        c.id === draggedCardId ? { ...c, columnId: targetColId } : c
+      );
+      oncardmove?.(draggedCardId, targetColId);
+    }
+    draggedCardId = null;
+  }
+
+  function submitAddCard(columnId: string) {
+    if (!newCardTitle.trim()) {
+      addingColumnId = null;
+      return;
+    }
+    const newCard: KanbanCard = {
+      id: `k_${Date.now()}_${Math.random().toString(36).slice(2, 6)}`,
+      title: newCardTitle.trim(),
+      columnId,
+    };
+    cards = [...cards, newCard];
+    oncardadd?.(columnId, newCardTitle.trim());
+    newCardTitle = '';
+    addingColumnId = null;
+  }
+
+  function getPriorityClass(priority?: string) {
+    switch (priority) {
+      case 'urgent':
+        return 'bg-destructive/15 text-destructive border-destructive/30';
+      case 'high':
+        return 'bg-warning/15 text-warning border-warning/30';
+      case 'medium':
+        return 'bg-primary/10 text-primary border-primary/20';
+      default:
+        return 'bg-muted text-muted-foreground border-border/40';
+    }
+  }
+</script>
+
+<div class={cn('flex gap-4 overflow-x-auto pb-4 text-xs select-none', className)}>
+  {#each columns as col (col.id)}
+    {@const colCards = cards.filter((c) => c.columnId === col.id)}
+    <div
+      role="region"
+      aria-label={col.title}
+      class="flex flex-col w-72 shrink-0 rounded-xl border border-border/70 bg-card/60 shadow-xs max-h-[80vh]"
+      ondragover={handleDragOver}
+      ondrop={() => handleDrop(col.id)}
+    >
+      <!-- Column Header -->
+      <div class="flex items-center justify-between p-3 border-b border-border/50">
+        <div class="flex items-center gap-2 font-semibold text-foreground">
+          <span>{col.title}</span>
+          <span class="flex h-5 w-5 items-center justify-center rounded-full bg-muted text-[10px] font-mono text-muted-foreground">
+            {colCards.length}
+          </span>
+        </div>
+
+        {#if allowAddCard}
+          <Button
+            variant="ghost"
+            size="sm"
+            class="h-6 w-6 p-0 text-muted-foreground hover:text-foreground"
+            onclick={() => {
+              addingColumnId = col.id;
+              newCardTitle = '';
+            }}
+          >
+            <Plus class="h-3.5 w-3.5" />
+          </Button>
+        {/if}
+      </div>
+
+      <!-- Column Card List -->
+      <div class="flex-1 overflow-y-auto p-2 space-y-2 min-h-24">
+        {#each colCards as card (card.id)}
+          <div
+            role="button"
+            tabindex="0"
+            draggable="true"
+            class={cn(
+              'group relative flex flex-col gap-2 rounded-lg border border-border/60 bg-card p-3 shadow-xs transition-all cursor-grab active:cursor-grabbing hover:border-border hover:shadow-sm text-left',
+              draggedCardId === card.id ? 'opacity-40 ring-2 ring-primary/40' : ''
+            )}
+            ondragstart={(e) => handleDragStart(e, card.id)}
+            onclick={() => oncardclick?.(card)}
+            onkeydown={(e) => { if (e.key === 'Enter') oncardclick?.(card); }}
+          >
+            <div class="flex items-start justify-between gap-2">
+              <div class="font-medium text-foreground leading-snug">{card.title}</div>
+              <GripVertical class="h-3.5 w-3.5 text-muted-foreground/40 opacity-0 group-hover:opacity-100 transition-opacity shrink-0" />
+            </div>
+
+            {#if card.description}
+              <div class="text-[11px] text-muted-foreground line-clamp-2">{card.description}</div>
+            {/if}
+
+            <div class="flex flex-wrap items-center justify-between gap-1.5 pt-1 border-t border-border/40 text-[10px]">
+              <div class="flex flex-wrap items-center gap-1">
+                {#if card.priority}
+                  <Badge variant="outline" class={cn('text-[9px] px-1 py-0 uppercase font-mono font-medium', getPriorityClass(card.priority))}>
+                    {card.priority}
+                  </Badge>
+                {/if}
+                {#each card.tags ?? [] as tag (tag)}
+                  <span class="rounded bg-muted/60 px-1 py-0.5 text-muted-foreground">#{tag}</span>
+                {/each}
+              </div>
+
+              {#if card.assignee}
+                <div class="flex items-center gap-1 text-muted-foreground">
+                  <div class="flex h-4 w-4 items-center justify-center rounded-full bg-primary/20 text-[9px] font-semibold text-primary">
+                    {card.assignee.name.slice(0, 1).toUpperCase()}
+                  </div>
+                  <span class="truncate max-w-16">{card.assignee.name}</span>
+                </div>
+              {/if}
+            </div>
+          </div>
+        {/each}
+
+        {#if addingColumnId === col.id}
+          <div class="rounded-lg border border-primary/40 bg-card p-2.5 space-y-2 shadow-xs">
+            <textarea
+              bind:value={newCardTitle}
+              placeholder="Card title..."
+              rows={2}
+              class="w-full rounded border border-input bg-background p-1.5 text-xs text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring resize-none"
+              onkeydown={(e) => {
+                if (e.key === 'Enter' && !e.shiftKey) {
+                  e.preventDefault();
+                  submitAddCard(col.id);
+                } else if (e.key === 'Escape') {
+                  addingColumnId = null;
+                }
+              }}
+            ></textarea>
+            <div class="flex items-center justify-end gap-1.5">
+              <Button variant="ghost" size="sm" class="h-6 text-[11px] px-2" onclick={() => { addingColumnId = null; }}>Cancel</Button>
+              <Button size="sm" class="h-6 text-[11px] px-2" onclick={() => submitAddCard(col.id)}>Add</Button>
+            </div>
+          </div>
+        {/if}
+      </div>
+    </div>
+  {/each}
+</div>

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

@@ -0,0 +1,30 @@
+export interface KanbanCard {
+    id: string;
+    title: string;
+    description?: string;
+    columnId: string;
+    priority?: 'low' | 'medium' | 'high' | 'urgent';
+    tags?: string[];
+    assignee?: {
+        name: string;
+        avatar?: string;
+    };
+    dueDate?: string;
+}
+export interface KanbanColumn {
+    id: string;
+    title: string;
+    colorBadge?: string;
+}
+interface Props {
+    columns: KanbanColumn[];
+    cards?: KanbanCard[];
+    allowAddCard?: boolean;
+    oncardmove?: (cardId: string, targetColumnId: string) => void;
+    oncardclick?: (card: KanbanCard) => void;
+    oncardadd?: (columnId: string, title: string) => void;
+    class?: string;
+}
+declare const KanbanBoard: import("svelte").Component<Props, {}, "cards">;
+type KanbanBoard = ReturnType<typeof KanbanBoard>;
+export default KanbanBoard;

package/dist/components/MasterDetailView.svelte

@@ -0,0 +1,134 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { Search } from '@lucide/svelte';
+  import { cn } from '../utils.js';
+
+  interface Props {
+    items: Record<string, unknown>[];
+    selectedId?: string | number;
+    idKey?: string;
+    titleKey?: string;
+    subtitleKey?: string;
+    listWidth?: string;
+    emptyText?: string;
+    itemSnippet?: Snippet<[Record<string, unknown>, boolean]>;
+    detailSnippet?: Snippet<[Record<string, unknown>]>;
+    class?: string;
+  }
+
+  let {
+    items = [],
+    selectedId = $bindable(items[0]?.id as (string | number | undefined)),
+    idKey = 'id',
+    titleKey = 'title',
+    subtitleKey = 'subtitle',
+    listWidth = 'w-72 sm:w-80',
+    emptyText = 'No items found',
+    itemSnippet,
+    detailSnippet,
+    class: className = '',
+  }: Props = $props();
+
+  let searchQuery = $state('');
+
+  const filteredItems = $derived(
+    items.filter((item) => {
+      if (!searchQuery.trim()) return true;
+      const title = String(item[titleKey] ?? '').toLowerCase();
+      const subtitle = String(item[subtitleKey] ?? '').toLowerCase();
+      const q = searchQuery.toLowerCase().trim();
+      return title.includes(q) || subtitle.includes(q);
+    })
+  );
+
+  const activeItem = $derived(
+    items.find((item) => String(item[idKey]) === String(selectedId)) ?? filteredItems[0]
+  );
+</script>
+
+<div class={cn('flex h-full min-h-[420px] rounded-xl border border-border bg-card shadow-xs overflow-hidden text-xs', className)}>
+  <!-- Master List Panel -->
+  <div class={cn('flex flex-col border-r border-border/60 bg-muted/15 shrink-0', listWidth)}>
+    <!-- Search Bar -->
+    <div class="p-3 border-b border-border/60">
+      <div class="relative">
+        <Search class="absolute left-2.5 top-2.5 h-3.5 w-3.5 text-muted-foreground" />
+        <input
+          type="text"
+          bind:value={searchQuery}
+          placeholder="Search items..."
+          class="h-8 w-full rounded-md border border-input bg-background pl-8 pr-2 text-xs focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+        />
+      </div>
+    </div>
+
+    <!-- Scrollable Items List -->
+    <div class="flex-1 overflow-y-auto divide-y divide-border/40">
+      {#each filteredItems as item (item[idKey])}
+        {@const isSelected = String(item[idKey]) === String(activeItem?.[idKey])}
+        <button
+          type="button"
+          class={cn(
+            'w-full text-left p-3 transition-colors cursor-pointer border-0 bg-transparent',
+            isSelected
+              ? 'bg-primary/10 border-l-3 border-primary text-foreground font-medium'
+              : 'hover:bg-muted/40 text-muted-foreground'
+          )}
+          onclick={() => { selectedId = item[idKey] as (string | number); }}
+        >
+          {#if itemSnippet}
+            {@render itemSnippet(item, isSelected)}
+          {:else}
+            <div class={cn('font-semibold truncate', isSelected ? 'text-primary' : 'text-foreground')}>
+              {item[titleKey] ?? item.name ?? `Item #${item[idKey]}`}
+            </div>
+            {#if item[subtitleKey]}
+              <div class="text-[11px] text-muted-foreground truncate mt-0.5">
+                {item[subtitleKey]}
+              </div>
+            {/if}
+          {/if}
+        </button>
+      {/each}
+
+      {#if filteredItems.length === 0}
+        <div class="p-6 text-center text-muted-foreground">
+          {emptyText}
+        </div>
+      {/if}
+    </div>
+  </div>
+
+  <!-- Detail Content Panel -->
+  <div class="flex-1 flex flex-col overflow-y-auto p-6 bg-card">
+    {#if activeItem}
+      {#if detailSnippet}
+        {@render detailSnippet(activeItem)}
+      {:else}
+        <div class="space-y-4">
+          <div class="pb-3 border-b border-border/60">
+            <h3 class="text-base font-semibold text-foreground">
+              {activeItem[titleKey] ?? activeItem.name ?? `Item #${activeItem[idKey]}`}
+            </h3>
+            {#if activeItem[subtitleKey]}
+              <p class="text-xs text-muted-foreground mt-0.5">{activeItem[subtitleKey]}</p>
+            {/if}
+          </div>
+
+          <div class="grid grid-cols-2 gap-3 text-xs">
+            {#each Object.entries(activeItem) as [k, v] (k)}
+              <div class="p-2.5 rounded-lg bg-muted/20 border border-border/40">
+                <span class="text-muted-foreground font-medium block text-[11px] mb-0.5">{k}</span>
+                <span class="font-mono text-foreground break-words">{typeof v === 'object' ? JSON.stringify(v) : String(v ?? '—')}</span>
+              </div>
+            {/each}
+          </div>
+        </div>
+      {/if}
+    {:else}
+      <div class="flex-1 flex items-center justify-center text-muted-foreground">
+        Select an item from the list to view details
+      </div>
+    {/if}
+  </div>
+</div>

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

@@ -0,0 +1,16 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    items: Record<string, unknown>[];
+    selectedId?: string | number;
+    idKey?: string;
+    titleKey?: string;
+    subtitleKey?: string;
+    listWidth?: string;
+    emptyText?: string;
+    itemSnippet?: Snippet<[Record<string, unknown>, boolean]>;
+    detailSnippet?: Snippet<[Record<string, unknown>]>;
+    class?: string;
+}
+declare const MasterDetailView: import("svelte").Component<Props, {}, "selectedId">;
+type MasterDetailView = ReturnType<typeof MasterDetailView>;
+export default MasterDetailView;