@svadmin/ui 0.29.3 → 0.30.0

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

@@ -0,0 +1,11 @@
+interface Props {
+    /** The raw markdown string to render */
+    content: string;
+    /** Whether to enable streaming/typing effect styling */
+    streaming?: boolean;
+    /** Custom class for the container */
+    class?: string;
+}
+declare const MarkdownRenderer: import("svelte").Component<Props, {}, "">;
+type MarkdownRenderer = ReturnType<typeof MarkdownRenderer>;
+export default MarkdownRenderer;

package/dist/components/ModalForm.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import type { FieldDefinition } from '@svadmin/core';
+  import { getResource, useForm } from '@svadmin/core';
+  import { t } from '@svadmin/core/i18n';
+  import * as Dialog from './ui/dialog/index.js';
+  import AutoForm from './AutoForm.svelte';
+
+  let { resourceName, mode = 'create', id, open = $bindable(false), onSuccess } = $props<{
+    resourceName: string;
+    mode?: 'create' | 'edit';
+    id?: string | number;
+    open: boolean;
+    onSuccess?: () => void;
+  }>();
+
+  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');
+
+  function handleClose() {
+    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' ? `${t('common.create')}${resource.label}` : `${t('common.edit')}${resource.label}`}
+        </Dialog.DialogTitle>
+      </Dialog.DialogHeader>
+      <AutoForm {resourceName} {mode} {id} />
+    </Dialog.DialogContent>
+  </Dialog.Dialog>
+{/if}

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

@@ -0,0 +1,10 @@
+type $$ComponentProps = {
+    resourceName: string;
+    mode?: 'create' | 'edit';
+    id?: string | number;
+    open: boolean;
+    onSuccess?: () => void;
+};
+declare const ModalForm: import("svelte").Component<$$ComponentProps, {}, "open">;
+type ModalForm = ReturnType<typeof ModalForm>;
+export default ModalForm;

package/dist/components/NavigateToResource.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import { useMenu } from '@svadmin/core';
+  import { navigate } from '@svadmin/core/router';
+  
+  const { menuItems } = useMenu();
+
+  $effect(() => {
+    // Automatically navigate to the first defined resource
+    if (menuItems.length > 0) {
+      navigate(menuItems[0].route);
+    }
+  });
+</script>
+
+<div class="flex h-screen w-screen items-center justify-center p-4 text-muted-foreground">
+  <div class="text-center">
+    <div class="mb-4 inline-block h-8 w-8 animate-spin rounded-full border-4 border-primary border-r-transparent"></div>
+    <p>Navigating to default resource...</p>
+  </div>
+</div>

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

@@ -0,0 +1,3 @@
+declare const NavigateToResource: import("svelte").Component<Record<string, never>, {}, "">;
+type NavigateToResource = ReturnType<typeof NavigateToResource>;
+export default NavigateToResource;

package/dist/components/PageHeader.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import Breadcrumbs from './Breadcrumbs.svelte';
+
+  interface Props {
+    title: string;
+    description?: string;
+    actions?: Snippet;
+    showBreadcrumbs?: boolean;
+    class?: string;
+  }
+
+  let {
+    title,
+    description,
+    actions,
+    showBreadcrumbs = true,
+    class: className = '',
+  }: Props = $props();
+</script>
+
+<div class="space-y-4 {className}">
+  {#if showBreadcrumbs}
+    <Breadcrumbs />
+  {/if}
+  <div class="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
+    <div>
+      <h1 class="text-xl font-semibold tracking-tight text-foreground">{title}</h1>
+      {#if description}
+        <p class="text-sm text-muted-foreground">{description}</p>
+      {/if}
+    </div>
+    {#if actions}
+      <div class="flex items-center gap-2">
+        {@render actions()}
+      </div>
+    {/if}
+  </div>
+</div>

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

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    title: string;
+    description?: string;
+    actions?: Snippet;
+    showBreadcrumbs?: boolean;
+    class?: string;
+}
+declare const PageHeader: import("svelte").Component<Props, {}, "">;
+type PageHeader = ReturnType<typeof PageHeader>;
+export default PageHeader;

package/dist/components/PageSkeleton.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+  import { fade } from 'svelte/transition';
+  import { Skeleton } from './ui/skeleton';
+
+  let {
+    type = 'list',
+    rows = 5,
+  } = $props<{
+    type?: 'list' | 'show' | 'form';
+    rows?: number;
+  }>();
+</script>
+
+<div class="w-full space-y-6" out:fade={{ duration: 200 }}>
+  <!-- Header Skeleton -->
+  <div class="flex items-center justify-between">
+    <div class="space-y-2">
+      <Skeleton class="h-8 w-[200px]" />
+      <Skeleton class="h-4 w-[300px]" />
+    </div>
+    {#if type === 'list'}
+      <Skeleton class="h-10 w-[120px]" />
+    {/if}
+  </div>
+
+  <div class="rounded-md border p-4 space-y-4">
+    {#if type === 'list'}
+      <!-- Table Header -->
+      <div class="flex gap-4 border-b pb-4">
+        {#each Array(4) as _}
+          <Skeleton class="h-6 flex-1" />
+        {/each}
+      </div>
+      <!-- Table Rows -->
+      <div class="space-y-4">
+        {#each Array(rows) as _}
+          <div class="flex gap-4">
+            <Skeleton class="h-6 flex-1" />
+            <Skeleton class="h-6 flex-1" />
+            <Skeleton class="h-6 flex-1" />
+            <Skeleton class="h-6 flex-1" />
+          </div>
+        {/each}
+      </div>
+    {:else if type === 'show'}
+      <!-- Key-Value pairs -->
+      <div class="space-y-6">
+        {#each Array(rows) as _}
+          <div class="space-y-2">
+            <Skeleton class="h-4 w-[100px]" />
+            <Skeleton class="h-6 w-[250px]" />
+          </div>
+        {/each}
+      </div>
+    {:else if type === 'form'}
+      <!-- Form Inputs -->
+      <div class="space-y-6">
+        {#each Array(rows) as _}
+          <div class="space-y-2">
+            <Skeleton class="h-4 w-[100px]" />
+            <Skeleton class="h-10 w-full max-w-md" />
+          </div>
+        {/each}
+        <div class="pt-4 flex gap-2">
+          <Skeleton class="h-10 w-[100px]" />
+          <Skeleton class="h-10 w-[100px]" />
+        </div>
+      </div>
+    {/if}
+  </div>
+</div>

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

@@ -0,0 +1,7 @@
+type $$ComponentProps = {
+    type?: 'list' | 'show' | 'form';
+    rows?: number;
+};
+declare const PageSkeleton: import("svelte").Component<$$ComponentProps, {}, "">;
+type PageSkeleton = ReturnType<typeof PageSkeleton>;
+export default PageSkeleton;

package/dist/components/PasswordInput.svelte

@@ -0,0 +1,96 @@
+<script lang="ts">
+  import { Input } from './ui/input/index.js';
+  import { Button } from './ui/button/index.js';
+  import TooltipButton from './TooltipButton.svelte';
+  import { Label } from './ui/label/index.js';
+  import { Progress } from './ui/progress/index.js';
+  import { Lock, Eye, EyeOff } from '@lucide/svelte';
+  import { t } from '@svadmin/core/i18n';
+
+  interface Props {
+    id: string;
+    label: string;
+    value: string;
+    placeholder?: string;
+    autocomplete?: string;
+    showStrength?: boolean;
+    class?: string;
+  }
+
+  let {
+    id,
+    label,
+    value = $bindable(''),
+    placeholder = '••••••••',
+    autocomplete = 'current-password',
+    showStrength = false,
+    class: className = '',
+  }: Props = $props();
+
+  let showPassword = $state(false);
+
+  // Password strength calculation
+  const strength = $derived.by(() => {
+    if (!showStrength || !value) return 0;
+    let score = 0;
+    if (value.length >= 8) score += 25;
+    if (value.length >= 12) score += 10;
+    if (/[a-z]/.test(value) && /[A-Z]/.test(value)) score += 25;
+    if (/\d/.test(value)) score += 20;
+    if (/[^a-zA-Z0-9]/.test(value)) score += 20;
+    return Math.min(score, 100);
+  });
+
+  const strengthColor = $derived(
+    strength < 30 ? 'bg-destructive' :
+    strength < 60 ? 'bg-warning' :
+    strength < 80 ? 'bg-info' : 'bg-success'
+  );
+
+  const strengthLabel = $derived(
+    strength < 30 ? 'Weak' :
+    strength < 60 ? 'Fair' :
+    strength < 80 ? 'Good' : 'Strong'
+  );
+</script>
+
+<div class="space-y-2 {className}">
+  <Label for={id}>{label}</Label>
+  <div class="relative">
+    <Lock class="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground pointer-events-none z-[1]" />
+    <Input
+      {id}
+      type={showPassword ? 'text' : 'password'}
+      {placeholder}
+      bind:value
+      class="pl-9 pr-9"
+      autocomplete={autocomplete as any}
+    />
+    <TooltipButton
+      tooltip={showPassword ? t('common.hidePassword') : t('common.showPassword')}
+      variant="ghost"
+      size="icon"
+      type="button"
+      class="absolute right-1 top-1/2 -translate-y-1/2 h-7 w-7 z-[1]"
+      onclick={(e) => { e.preventDefault(); showPassword = !showPassword; }}
+      tabindex={-1}
+    >
+      {#if showPassword}
+        <EyeOff class="h-4 w-4" />
+      {:else}
+        <Eye class="h-4 w-4" />
+      {/if}
+    </TooltipButton>
+  </div>
+  {#if showStrength && value}
+    <div class="flex items-center gap-2">
+      <div class="flex-1 h-1.5 rounded-full bg-muted overflow-hidden">
+        <div
+          class="h-full rounded-full transition-all duration-300 {strengthColor}"
+          style="width: {strength}%"
+        ></div>
+      </div>
+      <span class="text-xs text-muted-foreground w-12 text-right">{strengthLabel}</span>
+    </div>
+  {/if}
+</div>

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

@@ -0,0 +1,12 @@
+interface Props {
+    id: string;
+    label: string;
+    value: string;
+    placeholder?: string;
+    autocomplete?: string;
+    showStrength?: boolean;
+    class?: string;
+}
+declare const PasswordInput: import("svelte").Component<Props, {}, "value">;
+type PasswordInput = ReturnType<typeof PasswordInput>;
+export default PasswordInput;

package/dist/components/PermissionMatrix.svelte

@@ -0,0 +1,185 @@
+<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
+    roles = [],
+    resources = [],
+    actions = [],
+    
+    // Authorization state resolver
+    // isGranted(roleCode, resourceCode, actionCode) => boolean
+    isGranted,
+    
+    // Interactive states
+    selectedRole = $bindable(roles[0]?.code || ''),
+    loading = false,
+    
+    // Feedback and alerts (passed down from upper business logic)
+    message = '',
+    messageType = 'success', // 'success' | 'error' | 'warning'
+    conflictCount = 0,
+    
+    // Custom slots for injecting multi-tenant switchers or security filters
+    sidebarExtra,
+    headerExtra,
+
+    // Callback event
+    onToggle
+  }: {
+    roles: RoleInfo[];
+    resources: ResourceInfo[];
+    actions: ActionInfo[];
+    isGranted: (role: string, resource: string, action: string) => boolean;
+    selectedRole?: string;
+    loading?: boolean;
+    message?: string;
+    messageType?: 'success' | 'error' | 'warning';
+    conflictCount?: number;
+    sidebarExtra?: Snippet;
+    headerExtra?: Snippet;
+    onToggle: (role: string, resource: string, action: string, grant: boolean) => void;
+  } = $props();
+
+</script>
+
+<div class="h-full flex flex-col pt-2">
+  <!-- Header Title -->
+  <div class="mb-6 flex items-center justify-between">
+    <div>
+      <h1 class="text-2xl font-bold text-foreground flex items-center gap-2">
+        <Shield class="w-6 h-6 text-primary" />
+        统一操作权限矩阵
+      </h1>
+      <p class="text-muted-foreground mt-1 text-sm">直观配置系统模块与角色的鉴权规则网络。</p>
+    </div>
+    
+    <!-- Toast Feedback -->
+    {#if message}
+      <div class={`px-4 py-2 rounded-lg text-sm font-medium shadow-sm transition-all flex items-center gap-2 ${messageType === 'success' ? 'bg-green-500/10 text-green-600 dark:text-green-400 ring-1 ring-green-500/20' : 'bg-destructive/10 text-destructive ring-1 ring-destructive/20'}`}>
+        {#if messageType === 'success'}
+           <Check class="w-4 h-4" />
+        {:else}
+           <AlertCircle class="w-4 h-4" />
+        {/if}
+        {message}
+      </div>
+    {/if}
+  </div>
+
+  <div class="flex flex-col md:flex-row gap-6 flex-1 min-h-[500px]">
+    <!-- Left: Role Selector Sidebar -->
+    <div class="w-full md:w-64 flex-shrink-0 bg-card rounded-xl shadow-sm border border-border p-4 flex flex-col">
+      <h2 class="text-sm font-semibold text-muted-foreground uppercase tracking-wider mb-4 px-2">业务受众角色</h2>
+      <div class="space-y-1 flex-1 overflow-y-auto">
+        {#each roles as role}
+          <button 
+            onclick={() => selectedRole = role.code}
+            class="w-full text-left px-3 py-2.5 rounded-lg text-sm transition-all duration-200 {selectedRole === role.code ? 'bg-primary/10 text-primary font-medium shadow-sm ring-1 ring-primary/20' : 'text-foreground hover:bg-muted'}"
+          >
+            {role.name}
+            <div class="text-[10px] mt-0.5 opacity-60 font-mono tracking-tighter">{role.code}</div>
+          </button>
+        {/each}
+        {#if roles.length === 0}
+          <p class="text-center text-muted-foreground text-sm p-4">暂无角色</p>
+        {/if}
+      </div>
+      
+      <!-- Slot for Upper Logic inject (e.g. Org Switcher, Security Level Filter) -->
+      {#if sidebarExtra}
+         <div class="mt-4 pt-4 border-t border-border">
+           {@render sidebarExtra()}
+         </div>
+      {/if}
+    </div>
+
+    <!-- Right: Matrix Grid -->
+    <div class="flex-1 bg-card rounded-xl shadow-sm border border-border overflow-hidden flex flex-col">
+      <!-- Matrix Header -->
+      <div class="p-5 border-b border-border bg-muted/30 flex items-center justify-between">
+        <div class="flex items-center gap-4">
+          <div>
+            <h2 class="text-lg font-bold text-foreground">当前视角: 
+              <span class="text-primary">{roles.find(r => r.code === selectedRole)?.name || '未选择'}</span>
+            </h2>
+            <p class="text-xs text-muted-foreground mt-1">勾选以即时挂载/收回操作权限</p>
+          </div>
+          
+          <!-- Slot for header extra logic -->
+          {#if headerExtra}
+            {@render headerExtra()}
+          {/if}
+        </div>
+        
+        {#if conflictCount > 0}
+          <div class="px-3 py-1.5 bg-destructive/10 text-destructive rounded-lg text-xs font-medium ring-1 ring-destructive/20 flex items-center gap-1.5">
+            <AlertCircle class="w-4 h-4" /> {conflictCount} 重叠/冲突规则
+          </div>
+        {/if}
+      </div>
+      
+      <!-- Table Area -->
+      <div class="flex-1 overflow-auto p-4">
+        <table class="min-w-full rounded-lg overflow-hidden shadow-sm ring-1 ring-border/10">
+          <thead class="bg-muted/50">
+            <tr>
+              <th scope="col" class="py-3 pr-3 pl-4 text-left text-sm font-semibold text-foreground w-48">模块域与资源点</th>
+              {#each actions as action}
+                <th scope="col" class="px-2 py-3 text-center text-sm font-semibold text-foreground">
+                  <div class="flex flex-col items-center">
+                    <span>{action.name}</span>
+                    <span class="text-[10px] text-muted-foreground font-mono">{action.code}</span>
+                  </div>
+                </th>
+              {/each}
+            </tr>
+          </thead>
+          <tbody class="bg-card">
+            {#if resources.length === 0}
+              <tr>
+                 <td colspan={actions.length + 1} class="py-10 text-center text-muted-foreground">暂无可用资源</td>
+              </tr>
+            {/if}
+            {#each resources as resource, i}
+              <!-- Section Grouping Header -->
+              {#if resource.section && (i === 0 || resource.section !== resources[i-1].section)}
+                <tr class="bg-primary/5">
+                  <td colspan="{actions.length + 1}" class="px-4 py-2 text-xs font-bold text-primary uppercase tracking-wider">{resource.section}</td>
+                </tr>
+              {/if}
+              
+              <tr class="even:bg-muted/30 hover:bg-muted/50 transition-colors">
+                <td class="whitespace-nowrap py-3 pl-4 pr-3 text-sm">
+                  <div class="font-medium text-foreground">{resource.name}</div>
+                  <div class="text-xs text-muted-foreground font-mono">{resource.code}</div>
+                </td>
+                
+                <!-- Action Checkboxes -->
+                {#each actions as action}
+                  {@const granted = selectedRole ? isGranted(selectedRole, resource.code, action.code) : false}
+                  <td class="whitespace-nowrap px-3 py-3 text-center">
+                    <div class="flex items-center justify-center">
+                      <button 
+                        disabled={loading || !selectedRole}
+                        aria-label="Toggle {action.name}"
+                        onclick={() => onToggle(selectedRole!, resource.code, action.code, !granted)}
+                        class="w-6 h-6 rounded border flex items-center justify-center transition-all focus:outline-none focus:ring-2 focus:ring-primary/50 {granted ? 'bg-primary border-primary text-primary-foreground' : 'border-input bg-background hover:bg-accent'} {loading || !selectedRole ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}"
+                      >
+                        <svg class="w-3.5 h-3.5 {granted ? 'block' : 'hidden'}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3">
+                          <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
+                        </svg>
+                      </button>
+                    </div>
+                  </td>
+                {/each}
+              </tr>
+            {/each}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,19 @@
+import type { Snippet } from 'svelte';
+import type { RoleInfo, ResourceInfo, ActionInfo } from '../types.js';
+type $$ComponentProps = {
+    roles: RoleInfo[];
+    resources: ResourceInfo[];
+    actions: ActionInfo[];
+    isGranted: (role: string, resource: string, action: string) => boolean;
+    selectedRole?: string;
+    loading?: boolean;
+    message?: string;
+    messageType?: 'success' | 'error' | 'warning';
+    conflictCount?: number;
+    sidebarExtra?: Snippet;
+    headerExtra?: Snippet;
+    onToggle: (role: string, resource: string, action: string, grant: boolean) => void;
+};
+declare const PermissionMatrix: import("svelte").Component<$$ComponentProps, {}, "selectedRole">;
+type PermissionMatrix = ReturnType<typeof PermissionMatrix>;
+export default PermissionMatrix;