@svadmin/ui 0.63.0 → 0.65.0

package/dist/components/MediaLibraryModal.svelte

@@ -0,0 +1,195 @@
+<script lang="ts">
+  import * as Dialog from './ui/dialog/index.js';
+  import { Button } from './ui/button/index.js';
+  import { Badge } from './ui/badge/index.js';
+  import { Upload, Image as ImageIcon, Check, Search, Folder } from '@lucide/svelte';
+  import { cn } from '../utils.js';
+
+  export interface MediaItem {
+    id: string;
+    name: string;
+    url: string;
+    size?: string;
+    type?: string;
+    category?: string;
+  }
+
+  interface Props {
+    open?: boolean;
+    title?: string;
+    multiple?: boolean;
+    selectedUrls?: string[];
+    mediaItems?: MediaItem[];
+    categories?: string[];
+    onselect?: (urls: string[]) => void;
+    onupload?: (files: File[]) => void | Promise<void>;
+    class?: string;
+  }
+
+  let {
+    open = $bindable(false),
+    title = 'Media Asset Library',
+    multiple = false,
+    selectedUrls = $bindable([]),
+    mediaItems = [],
+    categories = ['All', 'Images', 'Documents', 'Banners'],
+    onselect,
+    onupload,
+    class: className = '',
+  }: Props = $props();
+
+  let activeCategory = $state('All');
+  let searchQuery = $state('');
+  let localSelected = $state<string[]>([...selectedUrls]);
+
+  const filteredMedia = $derived(
+    mediaItems.filter((item) => {
+      const matchCat = activeCategory === 'All' || item.category === activeCategory;
+      const matchSearch = !searchQuery.trim() || item.name.toLowerCase().includes(searchQuery.toLowerCase().trim());
+      return matchCat && matchSearch;
+    })
+  );
+
+  function toggleSelect(url: string) {
+    if (multiple) {
+      if (localSelected.includes(url)) {
+        localSelected = localSelected.filter((u) => u !== url);
+      } else {
+        localSelected = [...localSelected, url];
+      }
+    } else {
+      localSelected = [url];
+    }
+  }
+
+  function handleConfirm() {
+    selectedUrls = [...localSelected];
+    onselect?.(selectedUrls);
+    open = false;
+  }
+
+  function handleFileInput(e: Event) {
+    const target = e.currentTarget as HTMLInputElement;
+    if (target.files?.length) {
+      onupload?.(Array.from(target.files));
+    }
+  }
+</script>
+
+<Dialog.Root bind:open>
+  <Dialog.Content class={cn('sm:max-w-3xl max-h-[85vh] flex flex-col p-0 overflow-hidden text-xs', className)}>
+    <!-- Header -->
+    <Dialog.Header class="p-4 border-b border-border/60">
+      <Dialog.Title class="flex items-center gap-2">
+        <ImageIcon class="h-4 w-4 text-primary" />
+        <span>{title}</span>
+      </Dialog.Title>
+    </Dialog.Header>
+
+    <!-- Toolbar: Search & Categories -->
+    <div class="flex flex-wrap items-center justify-between gap-3 p-3 bg-muted/20 border-b border-border/60">
+      <div class="flex items-center gap-1.5 overflow-x-auto">
+        {#each categories as cat (cat)}
+          <button
+            type="button"
+            class={cn(
+              'px-2.5 py-1 rounded-md text-xs font-medium transition-colors cursor-pointer border-0',
+              activeCategory === cat
+                ? 'bg-primary text-primary-foreground'
+                : 'bg-card text-muted-foreground hover:text-foreground hover:bg-muted/60'
+            )}
+            onclick={() => { activeCategory = cat; }}
+          >
+            {cat}
+          </button>
+        {/each}
+      </div>
+
+      <div class="flex items-center gap-2">
+        <div class="relative w-48">
+          <Search class="absolute left-2.5 top-2 h-3.5 w-3.5 text-muted-foreground" />
+          <input
+            type="text"
+            bind:value={searchQuery}
+            placeholder="Search media..."
+            class="h-7.5 w-full rounded-md border border-input bg-background pl-7.5 pr-2 text-xs focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+          />
+        </div>
+
+        <label class="inline-flex">
+          <input type="file" multiple class="hidden" onchange={handleFileInput} />
+          <span class="inline-flex items-center gap-1 h-7.5 px-2.5 rounded-md bg-secondary text-secondary-foreground text-xs font-medium hover:bg-secondary/80 cursor-pointer">
+            <Upload class="h-3.5 w-3.5" />
+            Upload
+          </span>
+        </label>
+      </div>
+    </div>
+
+    <!-- Media Grid -->
+    <div class="flex-1 overflow-y-auto p-4 min-h-64">
+      <div class="grid grid-cols-2 sm:grid-cols-4 gap-3">
+        {#each filteredMedia as item (item.id)}
+          {@const isChosen = localSelected.includes(item.url)}
+          <button
+            type="button"
+            class={cn(
+              'group relative flex flex-col rounded-lg border text-left overflow-hidden transition-all cursor-pointer p-0 bg-card',
+              isChosen
+                ? 'border-primary ring-2 ring-primary/30 shadow-xs'
+                : 'border-border/60 hover:border-border hover:shadow-xs'
+            )}
+            onclick={() => toggleSelect(item.url)}
+          >
+            <!-- Thumbnail preview -->
+            <div class="relative h-28 w-full bg-muted/40 flex items-center justify-center overflow-hidden">
+              {#if item.type?.startsWith('image') || item.url.match(/\.(jpeg|jpg|gif|png|webp|svg)$/i)}
+                <img src={item.url} alt={item.name} class="h-full w-full object-cover group-hover:scale-105 transition-transform duration-200" />
+              {:else}
+                <Folder class="h-8 w-8 text-muted-foreground/60" />
+              {/if}
+
+              <!-- Select Checkmark Badge -->
+              {#if isChosen}
+                <div class="absolute top-1.5 right-1.5 flex h-5 w-5 items-center justify-center rounded-full bg-primary text-primary-foreground shadow-xs">
+                  <Check class="h-3 w-3" />
+                </div>
+              {/if}
+            </div>
+
+            <!-- Metadata Info -->
+            <div class="p-2 space-y-0.5">
+              <div class="font-medium text-foreground truncate">{item.name}</div>
+              <div class="flex items-center justify-between text-[10px] text-muted-foreground">
+                <span>{item.size ?? '—'}</span>
+                {#if item.category}
+                  <Badge variant="secondary" class="text-[9px] px-1 py-0">{item.category}</Badge>
+                {/if}
+              </div>
+            </div>
+          </button>
+        {/each}
+      </div>
+
+      {#if filteredMedia.length === 0}
+        <div class="flex flex-col items-center justify-center py-16 text-muted-foreground text-center space-y-2">
+          <ImageIcon class="h-8 w-8 opacity-40" />
+          <p>No media files found</p>
+        </div>
+      {/if}
+    </div>
+
+    <!-- Footer -->
+    <Dialog.Footer class="p-3 border-t border-border/60 bg-muted/20 flex items-center justify-between">
+      <div class="text-muted-foreground">
+        Selected <strong class="text-foreground">{localSelected.length}</strong> file(s)
+      </div>
+      <div class="flex items-center gap-2">
+        <Button variant="outline" size="sm" onclick={() => { open = false; }}>Cancel</Button>
+        <Button size="sm" disabled={localSelected.length === 0} onclick={handleConfirm}>
+          Insert Selected
+        </Button>
+      </div>
+    </Dialog.Footer>
+  </Dialog.Content>
+</Dialog.Root>

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

@@ -0,0 +1,22 @@
+export interface MediaItem {
+    id: string;
+    name: string;
+    url: string;
+    size?: string;
+    type?: string;
+    category?: string;
+}
+interface Props {
+    open?: boolean;
+    title?: string;
+    multiple?: boolean;
+    selectedUrls?: string[];
+    mediaItems?: MediaItem[];
+    categories?: string[];
+    onselect?: (urls: string[]) => void;
+    onupload?: (files: File[]) => void | Promise<void>;
+    class?: string;
+}
+declare const MediaLibraryModal: import("svelte").Component<Props, {}, "open" | "selectedUrls">;
+type MediaLibraryModal = ReturnType<typeof MediaLibraryModal>;
+export default MediaLibraryModal;

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;