@svadmin/ui 0.18.0 → 0.20.0

package/src/components/TenantSwitcher.svelte

@@ -0,0 +1,90 @@
+<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';
+
+  export interface Tenant {
+    id: string;
+    name: string;
+    logo?: string;
+    [key: string]: unknown;
+  }
+
+  let {
+    tenants = [],
+    currentTenantId = $bindable(''),
+    collapsed = false,
+    onSwitch,
+    headerSnippet,
+  }: {
+    tenants: Tenant[];
+    currentTenantId?: string;
+    collapsed?: boolean;
+    onSwitch?: (tenantId: string) => void;
+    headerSnippet?: Snippet;
+  } = $props();
+
+  let currentTenant = $derived(tenants.find(t => t.id === currentTenantId) ?? tenants[0]);
+
+  function selectTenant(id: string) {
+    currentTenantId = id;
+    onSwitch?.(id);
+  }
+</script>
+
+{#if tenants.length > 0}
+  <DropdownMenu.Root>
+    <DropdownMenu.Trigger>
+      {#snippet child({ props }: { props: Record<string, unknown> })}
+        <button
+          {...props}
+          class="flex w-full items-center gap-3 rounded-lg px-3 py-2 text-left transition-colors hover:bg-sidebar-accent/50
+            {collapsed ? 'justify-center' : ''}"
+        >
+          <div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary text-sm font-bold">
+            {#if currentTenant?.logo}
+              <img src={currentTenant.logo} alt={currentTenant.name} class="h-full w-full rounded-lg object-cover" />
+            {:else}
+              <Building2 class="h-4 w-4" />
+            {/if}
+          </div>
+          {#if !collapsed}
+            <div class="flex-1 min-w-0">
+              <p class="truncate text-sm font-semibold text-sidebar-foreground">{currentTenant?.name ?? 'Select'}</p>
+              <p class="truncate text-[10px] text-sidebar-foreground/50">Workspace</p>
+            </div>
+            <ChevronsUpDown class="h-4 w-4 shrink-0 text-sidebar-foreground/40" />
+          {/if}
+        </button>
+      {/snippet}
+    </DropdownMenu.Trigger>
+    <DropdownMenu.Content class="w-56" align="start" side="right" sideOffset={8}>
+      {#if headerSnippet}
+        <div class="px-2 py-1.5">
+          {@render headerSnippet()}
+        </div>
+        <DropdownMenu.Separator />
+      {/if}
+      <DropdownMenu.Label class="text-xs text-muted-foreground">Workspaces</DropdownMenu.Label>
+      {#each tenants as tenant}
+        <DropdownMenu.Item
+          class="flex items-center gap-3 cursor-pointer"
+          onclick={() => selectTenant(tenant.id)}
+        >
+          <div class="flex h-6 w-6 shrink-0 items-center justify-center rounded bg-primary/10 text-primary text-xs font-bold">
+            {#if tenant.logo}
+              <img src={tenant.logo} alt={tenant.name} class="h-full w-full rounded object-cover" />
+            {:else}
+              {tenant.name.charAt(0).toUpperCase()}
+            {/if}
+          </div>
+          <span class="flex-1 truncate">{tenant.name}</span>
+          {#if tenant.id === currentTenantId}
+            <Check class="h-4 w-4 text-primary" />
+          {/if}
+        </DropdownMenu.Item>
+      {/each}
+    </DropdownMenu.Content>
+  </DropdownMenu.Root>
+{/if}

package/src/components/buttons/CloneButton.svelte

@@ -12,8 +12,8 @@
   }>();
 
   const nav = useNavigation();
-  const can = $derived(accessControl?.enabled ? useCan(resource, 'create') : null);
-  const hidden = $derived(accessControl?.hideIfUnauthorized && can && !can.allowed);
+  const can = useCan(() => ({ resource, action: 'create', queryOptions: { enabled: accessControl?.enabled ?? true } }));
+  const hidden = $derived(accessControl?.hideIfUnauthorized && !can.allowed);
 </script>
 
 {#if !hidden}
@@ -21,7 +21,7 @@
     variant="outline"
     size={hideText ? 'icon' : 'sm'}
     class={className}
-    disabled={can ? !can.allowed : false}
+    disabled={!can.allowed}
     onclick={() => nav.clone(resource, recordItemId)}
   >
     <Copy class="h-4 w-4" />

package/src/components/buttons/CreateButton.svelte

@@ -11,8 +11,8 @@
   }>();
 
   const nav = useNavigation();
-  const can = $derived(accessControl?.enabled ? useCan(resource, 'create') : null);
-  const hidden = $derived(accessControl?.hideIfUnauthorized && can && !can.allowed);
+  const can = useCan(() => ({ resource, action: 'create', queryOptions: { enabled: accessControl?.enabled ?? true } }));
+  const hidden = $derived(accessControl?.hideIfUnauthorized && !can.allowed);
 </script>
 
 {#if !hidden}
@@ -20,7 +20,7 @@
     variant="default"
     size={hideText ? 'icon' : 'default'}
     class={className}
-    disabled={can ? !can.allowed : false}
+    disabled={!can.allowed}
     onclick={() => nav.create(resource)}
   >
     <Plus class="h-4 w-4" />

package/src/components/buttons/DeleteButton.svelte

@@ -17,8 +17,8 @@
   }>();
 
   const deleteMut = useDelete({ get resource() { return resource; }, get mutationMode() { return undoable ? 'undoable' as const : 'pessimistic' as const; } });
-  const can = $derived(accessControl?.enabled ? useCan(resource, 'delete') : null);
-  const hidden = $derived(accessControl?.hideIfUnauthorized && can && !can.allowed);
+  const can = useCan(() => ({ resource, action: 'delete', queryOptions: { enabled: accessControl?.enabled ?? true } }));
+  const hidden = $derived(accessControl?.hideIfUnauthorized && !can.allowed);
   let confirming = $state(false);
 
   async function handleDelete() {
@@ -49,7 +49,7 @@
       variant="ghost"
       size={hideText ? 'icon' : 'sm'}
       class="text-destructive hover:text-destructive {className}"
-      disabled={can ? !can.allowed : false}
+      disabled={!can.allowed}
       onclick={handleDelete}
     >
       <Trash2 class="h-4 w-4" />

package/src/components/buttons/EditButton.svelte

@@ -12,8 +12,8 @@
   }>();
 
   const nav = useNavigation();
-  const can = $derived(accessControl?.enabled ? useCan(resource, 'edit') : null);
-  const hidden = $derived(accessControl?.hideIfUnauthorized && can && !can.allowed);
+  const can = useCan(() => ({ resource, action: 'edit', queryOptions: { enabled: accessControl?.enabled ?? true } }));
+  const hidden = $derived(accessControl?.hideIfUnauthorized && !can.allowed);
 </script>
 
 {#if !hidden}
@@ -21,7 +21,7 @@
     variant="outline"
     size={hideText ? 'icon' : 'sm'}
     class={className}
-    disabled={can ? !can.allowed : false}
+    disabled={!can.allowed}
     onclick={() => nav.edit(resource, recordItemId)}
   >
     <Pencil class="h-4 w-4" />

package/src/components/buttons/ExportButton.svelte

@@ -11,8 +11,8 @@
   }>();
 
   const { triggerExport, isLoading } = useExport({ get resource() { return resource; } });
-  const can = $derived(accessControl?.enabled ? useCan(resource, 'export') : null);
-  const hidden = $derived(accessControl?.hideIfUnauthorized && can && !can.allowed);
+  const can = useCan(() => ({ resource, action: 'export', queryOptions: { enabled: accessControl?.enabled ?? true } }));
+  const hidden = $derived(accessControl?.hideIfUnauthorized && !can.allowed);
 </script>
 
 {#if !hidden}
@@ -21,7 +21,7 @@
     variant="outline"
     size={hideText ? 'icon' : 'sm'}
     class={className}
-    disabled={isLoading || (can ? !can.allowed : false)}
+    disabled={isLoading || !can.allowed}
     onclick={triggerExport}
   >
     <Download class="h-4 w-4" />

package/src/components/buttons/ImportButton.svelte

@@ -31,8 +31,8 @@
     }
   }
 
-  const can = $derived(accessControl?.enabled ? useCan(resource, 'import') : null);
-  const hidden = $derived(accessControl?.hideIfUnauthorized && can && !can.allowed);
+  const can = useCan(() => ({ resource, action: 'import', queryOptions: { enabled: accessControl?.enabled ?? true } }));
+  const hidden = $derived(accessControl?.hideIfUnauthorized && !can.allowed);
 </script>
 
 {#if !hidden}
@@ -47,7 +47,7 @@
     variant="outline"
     size={hideText ? 'icon' : 'sm'}
     class={className}
-    disabled={importHook.isLoading || (can ? !can.allowed : false)}
+    disabled={importHook.isLoading || !can.allowed}
     onclick={triggerImport}
   >
     <Upload class="h-4 w-4" />

package/src/components/buttons/ShowButton.svelte

@@ -12,8 +12,8 @@
   }>();
 
   const nav = useNavigation();
-  const can = $derived(accessControl?.enabled ? useCan(resource, 'show') : null);
-  const hidden = $derived(accessControl?.hideIfUnauthorized && can && !can.allowed);
+  const can = useCan(() => ({ resource, action: 'show', queryOptions: { enabled: accessControl?.enabled ?? true } }));
+  const hidden = $derived(accessControl?.hideIfUnauthorized && !can.allowed);
 </script>
 
 {#if !hidden}
@@ -22,7 +22,7 @@
     variant="ghost"
     size={hideText ? 'icon' : 'sm'}
     class={className}
-    disabled={can ? !can.allowed : false}
+    disabled={!can.allowed}
     onclick={() => nav.show(resource, recordItemId)}
   >
     <Eye class="h-4 w-4" />

package/src/components/fields/ArrayField.svelte

@@ -0,0 +1,86 @@
+<script lang="ts">
+  import type { FieldDefinition } from '@svadmin/core';
+  import { t } from '@svadmin/core/i18n';
+  import { Button } from '../ui/button/index.js';
+  import { Plus, Trash2 } from 'lucide-svelte';
+  import TooltipButton from '../TooltipButton.svelte';
+  import FieldRenderer from '../FieldRenderer.svelte';
+
+  let { field, value, onchange } = $props<{
+    field: FieldDefinition;
+    value: unknown;
+    onchange: (val: unknown) => void;
+  }>();
+
+  const arrayVal = $derived(Array.isArray(value) ? value : []);
+  const subFields = $derived(field.subFields || []);
+
+  function getDefaultForType(type: string): unknown {
+    switch (type) {
+      case 'text': case 'textarea': case 'richtext': case 'image': return '';
+      case 'number': return 0;
+      case 'boolean': return false;
+      case 'tags': case 'images': case 'multiselect': case 'array': return [];
+      case 'json': return {};
+      default: return '';
+    }
+  }
+
+  function handleAdd() {
+    const newItem: Record<string, unknown> = {};
+    for (const f of subFields) {
+      newItem[f.key] = f.defaultValue ?? getDefaultForType(f.type);
+    }
+    onchange([...arrayVal, newItem]);
+  }
+
+  function handleRemove(index: number) {
+    onchange(arrayVal.filter((_, i) => i !== index));
+  }
+
+  function handleChange(index: number, key: string, val: unknown) {
+    const next = [...arrayVal];
+    next[index] = { ...next[index], [key]: val };
+    onchange(next);
+  }
+</script>
+
+<div class="space-y-4 rounded-lg border border-dashed p-4">
+  <div class="flex items-center justify-between">
+    <div class="text-sm font-medium text-foreground">
+      {field.label}
+      {#if field.required}
+        <span class="text-destructive">*</span>
+      {/if}
+    </div>
+    <Button variant="outline" size="sm" type="button" onclick={handleAdd}>
+      <Plus class="h-3.5 w-3.5 mr-1" /> {t('common.add') || 'Add'}
+    </Button>
+  </div>
+  
+  <div class="space-y-4 pt-2">
+    {#each arrayVal as item, i}
+      <div class="relative rounded-md border bg-card p-4 pt-6 shadow-sm">
+        <div class="absolute right-2 top-2">
+          <TooltipButton tooltip={t('common.remove') || 'Remove'} variant="ghost" size="icon" class="h-8 w-8 text-muted-foreground hover:text-destructive transition-colors" onclick={() => handleRemove(i)}>
+            <Trash2 class="h-4 w-4" />
+          </TooltipButton>
+        </div>
+        <div class="grid gap-5">
+          {#each subFields as subField (subField.key)}
+            <FieldRenderer
+              field={subField}
+              value={item[subField.key]}
+              onchange={(val) => handleChange(i, subField.key, val)}
+            />
+          {/each}
+        </div>
+      </div>
+    {/each}
+    {#if arrayVal.length === 0}
+      <div class="flex flex-col items-center justify-center py-6 text-sm text-muted-foreground bg-muted/10 rounded-md">
+        <span>{t('common.noData') || 'No items added yet.'}</span>
+      </div>
+    {/if}
+  </div>
+</div>

package/src/index.ts

@@ -22,6 +22,7 @@ export { default as LoginPage } from './components/LoginPage.svelte';
 export { default as RegisterPage } from './components/RegisterPage.svelte';
 export { default as ForgotPasswordPage } from './components/ForgotPasswordPage.svelte';
 export { default as CanAccess } from './components/CanAccess.svelte';
+export { default as Can } from './components/CanAccess.svelte';
 export { default as UndoableNotification } from './components/UndoableNotification.svelte';
 export { default as ModalForm } from './components/ModalForm.svelte';
 export { default as DrawerForm } from './components/DrawerForm.svelte';
@@ -62,6 +63,16 @@ export { default as DraggableHeader } from "./components/DraggableHeader.svelte"
 export { default as SettingsPage } from "./components/SettingsPage.svelte";
 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 { 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 { default as TaskQueueDrawer } from "./components/TaskQueueDrawer.svelte";
+export type { BackgroundTask, TaskStatus } from "./components/TaskQueueDrawer.svelte";
+export { default as DraggableGrid } from "./components/DraggableGrid.svelte";
+export type { GridModule } from "./components/DraggableGrid.svelte";
 
 // Dashboard Charts (zero-dependency SVG)
 export { BarChart, LineChart, PieChart } from './components/charts/index.js';
@@ -82,6 +93,9 @@ export { default as RelationField } from './components/fields/RelationField.svel
 export { default as JsonField } from './components/fields/JsonField.svelte';
 export { default as RichTextField } from './components/fields/RichTextField.svelte';
 
+// Rich text editor (requires @svadmin/editor)
+export { Editor as RichTextEditor } from '@svadmin/editor';
+
 // CRUD Buttons
 export {
   CreateButton, EditButton, DeleteButton, ShowButton, ListButton,

package/src/markdown-deps.d.ts

@@ -0,0 +1,21 @@
+// Type declarations for MarkdownRenderer dependencies
+declare module 'marked' {
+  export class Marked {
+    constructor(...extensions: unknown[]);
+    parse(src: string): string;
+  }
+}
+
+declare module 'marked-highlight' {
+  export function markedHighlight(options: {
+    langPrefix?: string;
+    highlight: (code: string, lang: string) => string;
+  }): unknown;
+}
+
+declare module 'isomorphic-dompurify' {
+  const DOMPurify: {
+    sanitize(dirty: string, config?: Record<string, unknown>): string;
+  };
+  export default DOMPurify;
+}

package/src/components/stories/BarChart.stories.ts

@@ -1,43 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/svelte';
-import BarChart from '../charts/BarChart.svelte';
-
-const meta = {
-  title: 'Charts/BarChart',
-  component: BarChart,
-  tags: ['autodocs'],
-  argTypes: {
-    height: { control: { type: 'number', min: 100, max: 500 } },
-    showValues: { control: 'boolean' },
-  },
-} satisfies Meta<BarChart>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    data: [
-      { label: 'Jan', value: 120 },
-      { label: 'Feb', value: 180 },
-      { label: 'Mar', value: 95 },
-      { label: 'Apr', value: 210 },
-      { label: 'May', value: 165 },
-      { label: 'Jun', value: 245 },
-    ],
-    height: 200,
-    showValues: true,
-  },
-};
-
-export const CustomColors: Story = {
-  args: {
-    data: [
-      { label: 'Users', value: 1200, color: '#6366f1' },
-      { label: 'Orders', value: 850, color: '#f59e0b' },
-      { label: 'Revenue', value: 2100, color: '#10b981' },
-      { label: 'Returns', value: 120, color: '#ef4444' },
-    ],
-    height: 250,
-    showValues: true,
-  },
-};

package/src/components/stories/LineChart.stories.ts

@@ -1,48 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/svelte';
-import LineChart from '../charts/LineChart.svelte';
-
-const meta = {
-  title: 'Charts/LineChart',
-  component: LineChart,
-  tags: ['autodocs'],
-  argTypes: {
-    height: { control: { type: 'number', min: 100, max: 500 } },
-    showDots: { control: 'boolean' },
-    fill: { control: 'boolean' },
-  },
-} satisfies Meta<LineChart>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    data: [
-      { label: 'Mon', value: 120 },
-      { label: 'Tue', value: 180 },
-      { label: 'Wed', value: 150 },
-      { label: 'Thu', value: 210 },
-      { label: 'Fri', value: 190 },
-      { label: 'Sat', value: 250 },
-      { label: 'Sun', value: 220 },
-    ],
-    height: 200,
-    showDots: true,
-    fill: true,
-  },
-};
-
-export const NoFill: Story = {
-  args: {
-    data: [
-      { label: 'Q1', value: 3200 },
-      { label: 'Q2', value: 4100 },
-      { label: 'Q3', value: 3800 },
-      { label: 'Q4', value: 5200 },
-    ],
-    height: 250,
-    showDots: true,
-    fill: false,
-    color: '#10b981',
-  },
-};

package/src/components/stories/PieChart.stories.ts

@@ -1,41 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/svelte';
-import PieChart from '../charts/PieChart.svelte';
-
-const meta = {
-  title: 'Charts/PieChart',
-  component: PieChart,
-  tags: ['autodocs'],
-  argTypes: {
-    size: { control: { type: 'number', min: 100, max: 400 } },
-    donut: { control: { type: 'number', min: 0, max: 0.8, step: 0.1 } },
-  },
-} satisfies Meta<PieChart>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Donut: Story = {
-  args: {
-    data: [
-      { label: 'Desktop', value: 580, color: '#6366f1' },
-      { label: 'Mobile', value: 320, color: '#f59e0b' },
-      { label: 'Tablet', value: 100, color: '#10b981' },
-    ],
-    size: 200,
-    donut: 0.6,
-  },
-};
-
-export const Pie: Story = {
-  args: {
-    data: [
-      { label: 'Chrome', value: 64, color: '#4285f4' },
-      { label: 'Safari', value: 19, color: '#5ac8fa' },
-      { label: 'Firefox', value: 10, color: '#ff7139' },
-      { label: 'Edge', value: 4, color: '#0078d7' },
-      { label: 'Other', value: 3, color: '#a0a0a0' },
-    ],
-    size: 220,
-    donut: 0,
-  },
-};