@svadmin/ui 0.20.3 → 0.22.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@svadmin/ui",
-  "version": "0.20.3",
+  "version": "0.22.0",
   "description": "Pre-built admin UI components — AdminApp, AutoTable, AutoForm, Sidebar, Layout",
   "type": "module",
   "sideEffects": [

package/src/components/AutoTable.svelte

@@ -46,8 +46,10 @@
     selectable?: boolean;
     /** Custom header actions (right side) */
     headerActions?: Snippet;
-    /** Custom cell renderer per field */
-    cellRenderer?: Snippet<[{ field: FieldDefinition; value: unknown; record: Record<string, unknown> }]>;
+    /** Custom cell renderers by field key */
+    columns?: Record<string, Snippet<[{ value: unknown; record: Record<string, unknown> }]>>;
+    /** Global fallback cell renderer */
+    defaultCellRenderer?: Snippet<[{ field: FieldDefinition; value: unknown; record: Record<string, unknown> }]>;
     /** Custom row actions (edit/delete column) */
     rowActions?: Snippet<[{ record: Record<string, unknown>; id: string | number }]>;
     /** Custom empty state */
@@ -64,7 +66,8 @@
     resourceName,
     selectable = true,
     headerActions,
-    cellRenderer,
+    columns: customColumns,
+    defaultCellRenderer,
     rowActions,
     emptyState,
     expandedRowRender,
@@ -560,8 +563,10 @@
                             </div>
                           {:else}
                             {@const field = visibleFields.find(f => f.key === cell.column.id)}
-                            {#if cellRenderer && field}
-                              {@render cellRenderer({ field, value: cell.getValue(), record })}
+                            {#if customColumns && field && customColumns[field.key]}
+                              {@render customColumns[field.key]({ value: cell.getValue(), record })}
+                            {:else if defaultCellRenderer && field}
+                              {@render defaultCellRenderer({ field, value: cell.getValue(), record })}
                             {:else if field?.type === 'boolean'}
                               <span class="inline-block h-2 w-2 rounded-full {cell.getValue() ? 'bg-success' : 'bg-muted-foreground/30'}"></span>
                             {:else if field?.type === 'date' && cell.getValue()}
@@ -694,8 +699,10 @@
                   <div class="flex items-start justify-between gap-4">
                     <span class="text-xs font-medium text-muted-foreground shrink-0">{field.label}</span>
                     <span class="text-sm text-right truncate max-w-[60%]">
-                      {#if cellRenderer}
-                        {@render cellRenderer({ field, value, record })}
+                      {#if customColumns && field && customColumns[field.key]}
+                        {@render customColumns[field.key]({ value, record })}
+                      {:else if defaultCellRenderer && field}
+                        {@render defaultCellRenderer({ field, value, record })}
                       {:else if field.type === 'boolean'}
                         <span class="inline-block h-2 w-2 rounded-full {value ? 'bg-success' : 'bg-muted-foreground/30'}"></span>
                       {:else if field.type === 'date' && value}

package/src/components/ComboboxField.svelte

@@ -18,6 +18,9 @@
     placeholder?: string;
     searchable?: boolean;
     onSearch?: (value: string) => Filter[];
+    id?: string;
+    class?: string;
+    [key: string]: any;
   }
 
   let {
@@ -29,6 +32,7 @@
     placeholder = 'Select...',
     searchable = true,
     onSearch,
+    ...restProps
   }: Props = $props();
 
   const { options, query, onSearchChange } = useSelect({
@@ -71,6 +75,7 @@
     type="button"
     class="w-full justify-between font-normal"
     onclick={() => { open = !open; }}
+    {...restProps}
   >
     {#if selectedLabel}
       <span class="truncate">{selectedLabel}</span>

package/src/components/DraggableGrid.svelte

@@ -1,12 +1,6 @@
-<script context="module">
-  export interface GridModule {
-    id: string;
-    [key: string]: unknown;
-  }
-</script>
-
 <script lang="ts">
   import type { Snippet } from 'svelte';
+  import type { GridModule } from '../types.js';
 
   let {
     modules = $bindable<GridModule[]>([]),

package/src/components/FieldRenderer.svelte

@@ -18,6 +18,7 @@
   import ArrayField from './fields/ArrayField.svelte';
   import { Plus, X } from 'lucide-svelte';
   import type { Snippet } from 'svelte';
+  import { getRichTextEditor } from '../editor-config.svelte.js';
 
   let { field, value, onchange, children } = $props<{
     field: FieldDefinition;
@@ -164,24 +165,16 @@
     />
 
   {:else if field.type === 'richtext'}
-    {#await import('@svadmin/editor')}
-      <Textarea
+    {@const EditorComp = getRichTextEditor()}
+    {#if EditorComp}
+      <EditorComp
         id={field.key}
-        value={strVal}
-        oninput={(e) => onchange((e.target as HTMLTextAreaElement).value)}
-        required={field.required}
-        rows={10}
-        placeholder={t('field.enterValue', { label: field.label })}
-        class="resize-y"
-      />
-    {:then editorMod}
-      <editorMod.Editor
         value={strVal}
         placeholder={t('field.enterValue', { label: field.label })}
         preset="full"
-        onchange={(html) => onchange(html)}
+        onchange={(html: string) => onchange(html)}
       />
-    {:catch}
+    {:else}
       <Textarea
         id={field.key}
         value={strVal}
@@ -191,7 +184,7 @@
         placeholder={t('field.enterValue', { label: field.label })}
         class="resize-y"
       />
-    {/await}
+    {/if}
 
   {:else if field.type === 'textarea'}
     <Textarea
@@ -206,6 +199,7 @@
 
   {:else if field.type === 'relation' && field.resource}
     <ComboboxField
+      id={field.key}
       resource={field.resource}
       value={value as string | number | null}
       onchange={(v) => onchange(v)}
@@ -218,6 +212,7 @@
     {#if (field.options?.length ?? 0) > 8}
       <!-- Many options → use ComboboxField-style search -->
       <ComboboxField
+        id={field.key}
         resource=""
         value={value as string | number | null}
         onchange={(v) => onchange(v)}
@@ -242,6 +237,7 @@
       {#each field.options ?? [] as opt}
         <label class="flex items-center gap-2 text-sm cursor-pointer hover:bg-muted/50 rounded px-1 py-0.5 transition-colors">
           <Checkbox
+            id={`${field.key}-${opt.value}`}
             checked={multiVal.includes(opt.value)}
             onCheckedChange={() => toggleMulti(opt.value)}
           />
@@ -267,6 +263,7 @@
   {:else if field.type === 'boolean'}
     <div class="flex items-center gap-2 pt-1">
       <Switch
+        id={field.key}
         checked={boolVal}
         onCheckedChange={(v) => onchange(v)}
       />
@@ -289,6 +286,7 @@
         {/each}
       </div>
       <Input
+        id={field.key}
         type="text"
         placeholder={t('field.tagsPlaceholder')}
         onkeydown={handleTagKeydown}
@@ -309,6 +307,7 @@
       {#each imagesVal as url, i}
         <div class="flex items-center gap-2">
           <Input
+            id={i === 0 ? field.key : undefined}
             type="text"
             value={url}
             oninput={(e) => updateImage(i, (e.target as HTMLInputElement).value)}

package/src/components/PermissionMatrix.svelte

@@ -1,12 +1,7 @@
-<script context="module">
-  export type RoleInfo = { code: string; name: string; [key: string]: any };
-  export type ResourceInfo = { code: string; name: string; section?: string; [key: string]: any };
-  export type ActionInfo = { code: string; name: string; [key: string]: any };
-</script>
-
 <script lang="ts">
   import { Shield, AlertCircle, Check } from 'lucide-svelte';
   import type { Snippet } from 'svelte';
+  import type { RoleInfo, ResourceInfo, ActionInfo } from '../types.js';
   
   let {
     // Basic metadata lists

package/src/components/Sidebar.svelte

@@ -17,13 +17,14 @@
     ChevronLeft, ChevronDown, LogOut, Sun, Moon, Palette
   } from 'lucide-svelte';
 
-  let { collapsed, identity, title, onToggle, onLogout, menu }: {
+  let { collapsed, identity, title, onToggle, onLogout, menu, legacyHashRouting = false }: {
     collapsed: boolean;
     identity: Identity | null;
     title: string;
     onToggle: () => void;
     onLogout: () => void;
     menu?: MenuItem[];
+    legacyHashRouting?: boolean;
   } = $props();
 
   const resources = getResources();
@@ -205,7 +206,7 @@
               {#each group.items as item}
                 {@const active = isActive(item.path)}
                 <a
-                  href={`#${item.path}`}
+                  href={legacyHashRouting ? `#${item.path}` : item.path}
                   class="flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-all duration-200
                   {active
                     ? 'bg-sidebar-accent text-sidebar-accent-foreground sidebar-nav-active'
@@ -228,7 +229,7 @@
                 {#snippet child({ props }: { props: Record<string, unknown> })}
                   <a
                     {...props}
-                    href={`#${item.path}`}
+                    href={legacyHashRouting ? `#${item.path}` : item.path}
                     class="flex items-center justify-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-all duration-200
                     {active
                       ? 'bg-sidebar-accent text-sidebar-accent-foreground'
@@ -244,7 +245,7 @@
             </Tooltip.Root>
           {:else}
             <a
-              href={`#${item.path}`}
+              href={legacyHashRouting ? `#${item.path}` : item.path}
               class="flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-all duration-200
               {active
                 ? 'bg-sidebar-accent text-sidebar-accent-foreground sidebar-nav-active'
@@ -284,7 +285,7 @@
               {#each colorThemes as ct}
                 <button
                   class="flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-sm hover:bg-accent hover:text-accent-foreground transition-colors"
-                  onclick={() => { setColorTheme(ct.id); colorPickerOpen = false; }}
+                  onclick={() => { setColorTheme(ct.id as typeof ct.id & import('@svadmin/core').ColorTheme); colorPickerOpen = false; }}
                 >
                   <span
                     class="h-3.5 w-3.5 rounded-full {getColorTheme() === ct.id ? 'ring-2 ring-offset-1 scale-110' : 'opacity-70'}"

package/src/components/TaskQueueDrawer.svelte

@@ -1,23 +1,9 @@
-<script context="module">
-  export type TaskStatus = 'pending' | 'running' | 'completed' | 'failed';
-
-  export interface BackgroundTask {
-    id: string;
-    title: string;
-    status: TaskStatus;
-    progress?: number; // 0-100
-    message?: string;
-    createdAt: string | Date;
-    downloadUrl?: string;
-    [key: string]: unknown;
-  }
-</script>
-
 <script lang="ts">
   import type { Snippet } from 'svelte';
   import { Loader2, CheckCircle2, XCircle, Clock, Download, X, ListTodo } from 'lucide-svelte';
   import { Button } from './ui/button/index.js';
   import { Badge } from './ui/badge/index.js';
+  import type { BackgroundTask, TaskStatus } from '../types.js';
 
   let {
     open = $bindable(false),

package/src/components/TenantSwitcher.svelte

@@ -1,17 +1,9 @@
-<script context="module">
-  export interface Tenant {
-    id: string;
-    name: string;
-    logo?: string;
-    [key: string]: unknown;
-  }
-</script>
-
 <script lang="ts">
   import type { Snippet } from 'svelte';
   import { ChevronsUpDown, Building2, Check } from 'lucide-svelte';
   import { Button } from './ui/button/index.js';
   import * as DropdownMenu from './ui/dropdown-menu/index.js';
+  import type { Tenant } from '../types.js';
 
   let {
     tenants = [],

package/src/editor-config.svelte.ts

@@ -0,0 +1,23 @@
+import type { Component } from 'svelte';
+
+let registeredEditor: Component<any> | undefined = $state(undefined);
+
+/**
+ * Register a global Rich Text Editor component.
+ * This decouples @svadmin/ui from @svadmin/editor, making the editor completely optional.
+ * 
+ * Usage:
+ * ```ts
+ * import { Editor } from '@svadmin/editor';
+ * import { setRichTextEditor } from '@svadmin/ui';
+ * 
+ * setRichTextEditor(Editor);
+ * ```
+ */
+export function setRichTextEditor(editorComponent: Component<any>): void {
+  registeredEditor = editorComponent;
+}
+
+export function getRichTextEditor(): Component<any> | undefined {
+  return registeredEditor;
+}

package/src/index.ts

@@ -61,18 +61,23 @@ export { default as InlineEdit } from "./components/InlineEdit.svelte";
 export { default as VirtualTable } from "./components/VirtualTable.svelte";
 export { default as DraggableHeader } from "./components/DraggableHeader.svelte";
 export { default as SettingsPage } from "./components/SettingsPage.svelte";
+
+// Editor Registry
+export { setRichTextEditor, getRichTextEditor } from "./editor-config.svelte.js";
+
+// Settings & Preferences
 export { default as AppearanceSettings } from "./components/AppearanceSettings.svelte";
 export { default as AboutSettings } from "./components/AboutSettings.svelte";
 export { default as PermissionMatrix } from "./components/PermissionMatrix.svelte";
-export type { RoleInfo, ResourceInfo, ActionInfo } from "./components/PermissionMatrix.svelte";
+export type { RoleInfo, ResourceInfo, ActionInfo } from "./types.js";
 export { default as RolesSettings } from "./components/RolesSettings.svelte";
 export { default as AuditLogViewer } from "./components/AuditLogViewer.svelte";
 export { default as TenantSwitcher } from "./components/TenantSwitcher.svelte";
-export type { Tenant } from "./components/TenantSwitcher.svelte";
+export type { Tenant } from "./types.js";
 export { default as TaskQueueDrawer } from "./components/TaskQueueDrawer.svelte";
-export type { BackgroundTask, TaskStatus } from "./components/TaskQueueDrawer.svelte";
+export type { BackgroundTask, TaskStatus } from "./types.js";
 export { default as DraggableGrid } from "./components/DraggableGrid.svelte";
-export type { GridModule } from "./components/DraggableGrid.svelte";
+export type { GridModule } from "./types.js";
 
 // Dashboard Charts (zero-dependency SVG)
 export { BarChart, LineChart, PieChart } from './components/charts/index.js';

package/src/types.ts

@@ -0,0 +1,33 @@
+export type RoleInfo = { code: string; name: string; [key: string]: any };
+export type ResourceInfo = { code: string; name: string; section?: string; [key: string]: any };
+export type ActionInfo = { code: string; name: string; [key: string]: any };
+
+export interface Tenant {
+  id: string;
+  name: string;
+  logo?: string;
+  [key: string]: unknown;
+}
+
+export type TaskStatus = 'pending' | 'running' | 'completed' | 'failed';
+
+export interface BackgroundTask {
+  id: string;
+  title: string;
+  status: TaskStatus;
+  progress?: number; // 0-100
+  message?: string;
+  createdAt: string | Date;
+  downloadUrl?: string;
+  [key: string]: unknown;
+}
+
+export interface GridModule {
+  id: string;
+  w: number;
+  h: number;
+  x: number;
+  y: number;
+  title?: string;
+  componentProps?: any; // Component specific props
+}