@svadmin/ui 0.64.0 → 0.65.1

package/dist/components/MentionsInput.svelte

@@ -0,0 +1,174 @@
+<script lang="ts">
+  import { cn } from '../utils.js';
+  import { Badge } from './ui/badge/index.js';
+  import { User, Hash } from '@lucide/svelte';
+
+  export interface MentionOption {
+    id: string;
+    label: string;
+    type?: 'user' | 'tag' | 'entity';
+    avatar?: string;
+    subtitle?: string;
+  }
+
+  interface Props {
+    value?: string;
+    placeholder?: string;
+    triggers?: string[];
+    users?: MentionOption[];
+    tags?: MentionOption[];
+    rows?: number;
+    disabled?: boolean;
+    onchange?: (value: string) => void;
+    class?: string;
+  }
+
+  let {
+    value = $bindable(''),
+    placeholder = 'Type @ to mention team members, or # to link tags...',
+    triggers = ['@', '#'],
+    users = [],
+    tags = [],
+    rows = 3,
+    disabled = false,
+    onchange,
+    class: className = '',
+  }: Props = $props();
+
+  let textareaEl: HTMLTextAreaElement | undefined = $state();
+  let showDropdown = $state(false);
+  let activeTrigger = $state<string | null>(null);
+  let searchQuery = $state('');
+  let selectedIndex = $state(0);
+  let triggerIndex = $state(-1);
+
+  const activeOptions = $derived<MentionOption[]>(
+    (() => {
+      const list = activeTrigger === '#' ? tags : users;
+      if (!searchQuery.trim()) return list;
+      return list.filter((item) =>
+        item.label.toLowerCase().includes(searchQuery.toLowerCase().trim())
+      );
+    })()
+  );
+
+  function handleInput(e: Event) {
+    const target = e.currentTarget as HTMLTextAreaElement;
+    value = target.value;
+    onchange?.(value);
+
+    const cursorPos = target.selectionStart ?? 0;
+    const textBeforeCursor = value.slice(0, cursorPos);
+
+    let matchTrigger: string | null = null;
+    let matchIdx = -1;
+
+    for (const trig of triggers) {
+      const idx = textBeforeCursor.lastIndexOf(trig);
+      if (idx !== -1 && (idx === 0 || /\s/.test(textBeforeCursor[idx - 1]))) {
+        const query = textBeforeCursor.slice(idx + 1);
+        if (!/\s/.test(query)) {
+          matchTrigger = trig;
+          matchIdx = idx;
+          searchQuery = query;
+          break;
+        }
+      }
+    }
+
+    if (matchTrigger !== null) {
+      activeTrigger = matchTrigger;
+      triggerIndex = matchIdx;
+      showDropdown = true;
+      selectedIndex = 0;
+    } else {
+      showDropdown = false;
+      activeTrigger = null;
+    }
+  }
+
+  function insertMention(opt: MentionOption) {
+    if (!textareaEl || triggerIndex === -1 || !activeTrigger) return;
+    const before = value.slice(0, triggerIndex);
+    const after = value.slice(textareaEl.selectionStart ?? triggerIndex);
+    const mentionToken = `${activeTrigger}${opt.label} `;
+    value = `${before}${mentionToken}${after}`;
+    onchange?.(value);
+    showDropdown = false;
+    activeTrigger = null;
+
+    setTimeout(() => {
+      if (textareaEl) {
+        const newPos = before.length + mentionToken.length;
+        textareaEl.focus();
+        textareaEl.setSelectionRange(newPos, newPos);
+      }
+    }, 0);
+  }
+
+  function handleKeyDown(e: KeyboardEvent) {
+    if (!showDropdown || activeOptions.length === 0) return;
+
+    if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      selectedIndex = (selectedIndex + 1) % activeOptions.length;
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      selectedIndex = (selectedIndex - 1 + activeOptions.length) % activeOptions.length;
+    } else if (e.key === 'Enter' || e.key === 'Tab') {
+      e.preventDefault();
+      if (activeOptions[selectedIndex]) {
+        insertMention(activeOptions[selectedIndex]);
+      }
+    } else if (e.key === 'Escape') {
+      showDropdown = false;
+      activeTrigger = null;
+    }
+  }
+</script>
+
+<div class={cn('relative w-full text-xs', className)}>
+  <textarea
+    bind:this={textareaEl}
+    {value}
+    {placeholder}
+    {rows}
+    {disabled}
+    class="w-full rounded-md border border-input bg-background p-2.5 text-xs text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 resize-y"
+    oninput={handleInput}
+    onkeydown={handleKeyDown}
+  ></textarea>
+
+  {#if showDropdown && activeOptions.length > 0}
+    <div
+      class="absolute left-0 top-full mt-1 z-50 min-w-48 max-h-56 overflow-y-auto rounded-lg border border-border bg-popover text-popover-foreground shadow-md p-1 animate-in fade-in-0 zoom-in-95"
+    >
+      <div class="px-2 py-1 text-[10px] font-semibold text-muted-foreground uppercase tracking-wider">
+        {activeTrigger === '#' ? 'Select Tag' : 'Mention Member'}
+      </div>
+      {#each activeOptions as opt, idx (opt.id)}
+        <button
+          type="button"
+          class={cn(
+            'w-full flex items-center justify-between gap-2 px-2 py-1.5 rounded-md text-left text-xs transition-colors cursor-pointer border-0',
+            idx === selectedIndex ? 'bg-accent text-accent-foreground font-medium' : 'bg-transparent text-foreground hover:bg-muted/60'
+          )}
+          onclick={() => insertMention(opt)}
+        >
+          <div class="flex items-center gap-2 truncate">
+            {#if activeTrigger === '#'}
+              <Hash class="h-3.5 w-3.5 text-primary shrink-0" />
+            {:else}
+              <User class="h-3.5 w-3.5 text-primary shrink-0" />
+            {/if}
+            <span class="truncate">{opt.label}</span>
+          </div>
+
+          {#if opt.subtitle}
+            <Badge variant="secondary" class="text-[10px] px-1 py-0">{opt.subtitle}</Badge>
+          {/if}
+        </button>
+      {/each}
+    </div>
+  {/if}
+</div>

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

@@ -0,0 +1,21 @@
+export interface MentionOption {
+    id: string;
+    label: string;
+    type?: 'user' | 'tag' | 'entity';
+    avatar?: string;
+    subtitle?: string;
+}
+interface Props {
+    value?: string;
+    placeholder?: string;
+    triggers?: string[];
+    users?: MentionOption[];
+    tags?: MentionOption[];
+    rows?: number;
+    disabled?: boolean;
+    onchange?: (value: string) => void;
+    class?: string;
+}
+declare const MentionsInput: import("svelte").Component<Props, {}, "value">;
+type MentionsInput = ReturnType<typeof MentionsInput>;
+export default MentionsInput;

package/dist/components/ModalForm.svelte

@@ -1,38 +1,123 @@
 <script lang="ts">
-  import { getResource } from '@svadmin/core';
-  import { useTranslation } from '@svadmin/core/i18n';
+  import type { Snippet } from 'svelte';
   import * as Dialog from './ui/dialog/index.js';
-  import AutoForm from './AutoForm.svelte';
+  import { Button } from './ui/button/index.js';
+  import { Loader2 } from '@lucide/svelte';
+  import { cn } from '../utils.js';
 
-  const i18n = useTranslation();
+  interface Props {
+    open?: boolean;
+    title: string;
+    description?: string;
+    triggerText?: string;
+    triggerVariant?: 'default' | 'outline' | 'secondary' | 'ghost' | 'destructive';
+    triggerSize?: 'default' | 'sm' | 'lg' | 'icon';
+    submitText?: string;
+    cancelText?: string;
+    widthClass?: string;
+    isSubmitting?: boolean;
+    disabled?: boolean;
+    onsubmit?: () => void | Promise<void>;
+    oncancel?: () => void;
+    class?: string;
+    triggerSnippet?: Snippet;
+    children?: Snippet;
+  }
+
+  let {
+    open = $bindable(false),
+    title,
+    description,
+    triggerText = 'Open Form',
+    triggerVariant = 'default',
+    triggerSize = 'sm',
+    submitText = 'Confirm',
+    cancelText = 'Cancel',
+    widthClass = 'sm:max-w-lg',
+    isSubmitting = false,
+    disabled = false,
+    onsubmit,
+    oncancel,
+    class: className = '',
+    triggerSnippet,
+    children,
+  }: Props = $props();
 
-  let { resourceName, mode = 'create', id, open = $bindable(false), onSuccess } = $props<{
-    resourceName: string;
-    mode?: 'create' | 'edit';
-    id?: string | number;
-    open: boolean;
-    onSuccess?: () => void;
-  }>();
+  let loading = $state(false);
 
-  const resource = $derived(getResource(resourceName));
-  const fieldCount = $derived(resource.fields.filter(f => f.showInForm !== false).length);
-  const dialogWidth = $derived(fieldCount > 8 ? 'sm:max-w-3xl' : fieldCount > 5 ? 'sm:max-w-2xl' : 'sm:max-w-lg');
+  async function handleSubmit(e: SubmitEvent) {
+    e.preventDefault();
+    loading = true;
+    try {
+      await onsubmit?.();
+      open = false;
+    } finally {
+      loading = false;
+    }
+  }
 
-  function handleSuccess() {
+  function handleCancel() {
+    oncancel?.();
     open = false;
-    onSuccess?.();
   }
 </script>
 
-{#if open}
-  <Dialog.Dialog bind:open>
-    <Dialog.DialogContent class="{dialogWidth} max-h-[85vh] overflow-y-auto">
-      <Dialog.DialogHeader>
-        <Dialog.DialogTitle>
-          {mode === 'create' ? `${i18n.t('common.create')}${resource.label}` : `${i18n.t('common.edit')}${resource.label}`}
-        </Dialog.DialogTitle>
-      </Dialog.DialogHeader>
-      <AutoForm {resourceName} {mode} {id} showHeader={false} onSuccess={handleSuccess} />
-    </Dialog.DialogContent>
-  </Dialog.Dialog>
-{/if}
+<Dialog.Root bind:open>
+  {#if triggerSnippet}
+    <Dialog.Trigger>
+      {#snippet child({ props })}
+        <div {...props} class="inline-flex">
+          {@render triggerSnippet()}
+        </div>
+      {/snippet}
+    </Dialog.Trigger>
+  {:else if triggerText}
+    <Dialog.Trigger>
+      {#snippet child({ props })}
+        <Button {...props} variant={triggerVariant} size={triggerSize} {disabled}>
+          {triggerText}
+        </Button>
+      {/snippet}
+    </Dialog.Trigger>
+  {/if}
+
+  <Dialog.Content class={cn(widthClass, 'max-h-[90vh] overflow-y-auto', className)}>
+    <form onsubmit={handleSubmit} class="space-y-4">
+      <Dialog.Header>
+        <Dialog.Title>{title}</Dialog.Title>
+        {#if description}
+          <Dialog.Description>{description}</Dialog.Description>
+        {/if}
+      </Dialog.Header>
+
+      <div class="py-2 text-sm text-foreground">
+        {#if children}
+          {@render children()}
+        {/if}
+      </div>
+
+      <Dialog.Footer class="gap-2 pt-2 border-t border-border/50">
+        <Button
+          type="button"
+          variant="outline"
+          size="sm"
+          disabled={loading || isSubmitting}
+          onclick={handleCancel}
+        >
+          {cancelText}
+        </Button>
+        <Button
+          type="submit"
+          size="sm"
+          disabled={loading || isSubmitting || disabled}
+          class="gap-1.5 min-w-20"
+        >
+          {#if loading || isSubmitting}
+            <Loader2 class="h-4 w-4 animate-spin" />
+          {/if}
+          {submitText}
+        </Button>
+      </Dialog.Footer>
+    </form>
+  </Dialog.Content>
+</Dialog.Root>

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

@@ -1,10 +1,22 @@
-type $$ComponentProps = {
-    resourceName: string;
-    mode?: 'create' | 'edit';
-    id?: string | number;
-    open: boolean;
-    onSuccess?: () => void;
-};
-declare const ModalForm: import("svelte").Component<$$ComponentProps, {}, "open">;
+import type { Snippet } from 'svelte';
+interface Props {
+    open?: boolean;
+    title: string;
+    description?: string;
+    triggerText?: string;
+    triggerVariant?: 'default' | 'outline' | 'secondary' | 'ghost' | 'destructive';
+    triggerSize?: 'default' | 'sm' | 'lg' | 'icon';
+    submitText?: string;
+    cancelText?: string;
+    widthClass?: string;
+    isSubmitting?: boolean;
+    disabled?: boolean;
+    onsubmit?: () => void | Promise<void>;
+    oncancel?: () => void;
+    class?: string;
+    triggerSnippet?: Snippet;
+    children?: Snippet;
+}
+declare const ModalForm: import("svelte").Component<Props, {}, "open">;
 type ModalForm = ReturnType<typeof ModalForm>;
 export default ModalForm;

package/dist/components/MultiTabKeepAlive.svelte

@@ -0,0 +1,143 @@
+<script lang="ts">
+  import { X, Pin, RefreshCw, XCircle } from '@lucide/svelte';
+  import { Button } from './ui/button/index.js';
+  import { cn } from '../utils.js';
+
+  export interface WorkspaceTab {
+    id: string;
+    title: string;
+    path: string;
+    closable?: boolean;
+    pinned?: boolean;
+    icon?: string;
+  }
+
+  interface Props {
+    tabs?: WorkspaceTab[];
+    activeTabId?: string;
+    onselect?: (tab: WorkspaceTab) => void;
+    onclose?: (tabId: string) => void;
+    oncloseothers?: (tabId: string) => void;
+    oncloseall?: () => void;
+    onrefresh?: (tab: WorkspaceTab) => void;
+    class?: string;
+  }
+
+  let {
+    tabs = $bindable([]),
+    activeTabId = $bindable(''),
+    onselect,
+    onclose,
+    oncloseothers,
+    oncloseall,
+    onrefresh,
+    class: className = '',
+  }: Props = $props();
+
+  function handleSelect(tab: WorkspaceTab) {
+    activeTabId = tab.id;
+    onselect?.(tab);
+  }
+
+  function handleClose(e: MouseEvent, tabId: string) {
+    e.stopPropagation();
+    const idx = tabs.findIndex((t) => t.id === tabId);
+    if (idx === -1) return;
+    const isCurrentActive = activeTabId === tabId;
+    tabs = tabs.filter((t) => t.id !== tabId);
+    onclose?.(tabId);
+
+    if (isCurrentActive && tabs.length > 0) {
+      const nextTab = tabs[Math.min(idx, tabs.length - 1)];
+      if (nextTab) {
+        activeTabId = nextTab.id;
+        onselect?.(nextTab);
+      }
+    }
+  }
+
+  function handleCloseAll() {
+    const pinned = tabs.filter((t) => t.pinned);
+    tabs = pinned;
+    if (pinned.length > 0 && pinned[0]) {
+      activeTabId = pinned[0].id;
+      onselect?.(pinned[0]);
+    }
+    oncloseall?.();
+  }
+
+  function handleContextMenu(e: MouseEvent, tabId: string) {
+    e.preventDefault();
+    if (oncloseothers) {
+      tabs = tabs.filter((t) => t.pinned || t.id === tabId);
+      activeTabId = tabId;
+      oncloseothers(tabId);
+    }
+  }
+</script>
+
+<div class={cn('flex items-center justify-between border-b border-border/80 bg-muted/30 px-2 text-xs select-none', className)}>
+  <!-- Tabs list -->
+  <div class="flex items-center gap-1 overflow-x-auto py-1 scrollbar-none">
+    {#each tabs as tab (tab.id)}
+      {@const isActive = tab.id === activeTabId}
+      <div
+        role="button"
+        tabindex="0"
+        class={cn(
+          'group relative flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-medium transition-all cursor-pointer border',
+          isActive
+            ? 'bg-card text-foreground border-border shadow-xs'
+            : 'bg-transparent text-muted-foreground border-transparent hover:bg-muted/60 hover:text-foreground'
+        )}
+        onclick={() => handleSelect(tab)}
+        onkeydown={(e) => { if (e.key === 'Enter') handleSelect(tab); }}
+        oncontextmenu={(e) => handleContextMenu(e, tab.id)}
+      >
+        {#if tab.pinned}
+          <Pin class="h-3 w-3 text-primary shrink-0 rotate-45" />
+        {/if}
+
+        <span class="truncate max-w-32">{tab.title}</span>
+
+        {#if tab.closable !== false && !tab.pinned}
+          <button
+            type="button"
+            class="flex h-3.5 w-3.5 items-center justify-center rounded-full text-muted-foreground/60 hover:bg-destructive/10 hover:text-destructive transition-colors p-0 border-0 cursor-pointer"
+            onclick={(e) => handleClose(e, tab.id)}
+          >
+            <X class="h-2.5 w-2.5" />
+          </button>
+        {/if}
+      </div>
+    {/each}
+  </div>
+
+  <!-- Actions (Close All / Refresh) -->
+  <div class="flex items-center gap-1 pl-2 shrink-0">
+    {#if onrefresh}
+      {@const curTab = tabs.find((t) => t.id === activeTabId)}
+      {#if curTab}
+        <Button
+          variant="ghost"
+          size="sm"
+          class="h-7 w-7 p-0 text-muted-foreground hover:text-foreground"
+          onclick={() => onrefresh(curTab)}
+        >
+          <RefreshCw class="h-3 w-3" />
+        </Button>
+      {/if}
+    {/if}
+
+    {#if tabs.some((t) => !t.pinned && t.closable !== false)}
+      <Button
+        variant="ghost"
+        size="sm"
+        class="h-7 w-7 p-0 text-muted-foreground hover:text-destructive"
+        onclick={handleCloseAll}
+      >
+        <XCircle class="h-3.5 w-3.5" />
+      </Button>
+    {/if}
+  </div>
+</div>

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

@@ -0,0 +1,21 @@
+export interface WorkspaceTab {
+    id: string;
+    title: string;
+    path: string;
+    closable?: boolean;
+    pinned?: boolean;
+    icon?: string;
+}
+interface Props {
+    tabs?: WorkspaceTab[];
+    activeTabId?: string;
+    onselect?: (tab: WorkspaceTab) => void;
+    onclose?: (tabId: string) => void;
+    oncloseothers?: (tabId: string) => void;
+    oncloseall?: () => void;
+    onrefresh?: (tab: WorkspaceTab) => void;
+    class?: string;
+}
+declare const MultiTabKeepAlive: import("svelte").Component<Props, {}, "tabs" | "activeTabId">;
+type MultiTabKeepAlive = ReturnType<typeof MultiTabKeepAlive>;
+export default MultiTabKeepAlive;