@svadmin/ui 0.29.1 → 0.29.3

package/src/components/RolesSettings.svelte

@@ -1,146 +0,0 @@
-<script lang="ts">
-  import { t } from '@svadmin/core/i18n';
-  import { getAuthProvider, getResources } from '@svadmin/core';
-  import type { Role } from '@svadmin/core';
-  import PermissionMatrix from './PermissionMatrix.svelte';
-  import type { RoleInfo, ResourceInfo, ActionInfo } from '../types.js';
-  import { toast } from '@svadmin/core/toast';
-  import { AlertCircle } from '@lucide/svelte';
-
-  const authProvider = getAuthProvider();
-  const rawResources = getResources();
-
-  let roles = $state<RoleInfo[]>([]);
-  let selectedRoleCode = $state<string>('');
-  
-  // Matrix format: { "roleId": { "resourceName": ["action1", "action2"] } }
-  let permissionsCache = $state<Record<string, Record<string, string[]>>>({});
-  
-  let loadingRoles = $state(true);
-  let loadingPermissions = $state(false);
-  let saving = $state(false);
-  let error = $state<string | null>(null);
-
-  // Convert system resources to MatrixResource format
-  let matrixResources = $derived<ResourceInfo[]>(
-    rawResources.map(r => ({
-      code: r.name,
-      name: r.label || r.name,
-    }))
-  );
-
-  let matrixActions = $state<ActionInfo[]>([
-    { code: 'create', name: t('common.create') ?? 'Create' },
-    { code: 'read', name: t('common.detail') ?? 'Read' },
-    { code: 'update', name: t('common.edit') ?? 'Update' },
-    { code: 'delete', name: t('common.delete') ?? 'Delete' },
-  ]);
-
-  async function loadRoles() {
-    if (!authProvider?.getRoles) {
-      error = t('settings.rbacNotSupported') ?? 'RBAC not supported by AuthProvider';
-      loadingRoles = false;
-      return;
-    }
-    try {
-      const fetchedRoles = await authProvider.getRoles();
-      roles = fetchedRoles.map(r => ({ code: r.id, ...r }));
-      if (roles.length > 0 && !selectedRoleCode) {
-        selectedRoleCode = roles[0].code;
-      }
-    } catch (e) {
-      error = (e as Error).message;
-    } finally {
-      loadingRoles = false;
-    }
-  }
-
-  async function loadPermissionsForRole(roleId: string) {
-    if (!authProvider?.getRolePermissions || permissionsCache[roleId]) return;
-    
-    loadingPermissions = true;
-    try {
-      const perms = await authProvider.getRolePermissions(roleId);
-      permissionsCache[roleId] = perms;
-    } catch (e) {
-      toast.error((e as Error).message);
-    } finally {
-      loadingPermissions = false;
-    }
-  }
-
-  // Load permissions whenever the selected role changes
-  $effect(() => {
-    if (selectedRoleCode && !permissionsCache[selectedRoleCode] && !loadingPermissions) {
-      loadPermissionsForRole(selectedRoleCode);
-    }
-  });
-
-  $effect(() => {
-    loadRoles();
-  });
-
-  // isGranted logic
-  function checkGrant(roleCode: string, resourceCode: string, actionCode: string) {
-    const rolePerms = permissionsCache[roleCode];
-    if (!rolePerms) return false;
-    return rolePerms[resourceCode]?.includes(actionCode) ?? false;
-  }
-
-  async function handleToggle(roleCode: string, resourceCode: string, actionCode: string, grant: boolean) {
-    if (!authProvider?.updateRolePermissions) return;
-    
-    // Copy state
-    const currentRolePerms = { ...(permissionsCache[roleCode] || {}) };
-    const currentResPerms = [...(currentRolePerms[resourceCode] || [])];
-
-    // Optimistic update
-    if (grant) {
-      if (!currentResPerms.includes(actionCode)) currentResPerms.push(actionCode);
-    } else {
-      const idx = currentResPerms.indexOf(actionCode);
-      if (idx > -1) currentResPerms.splice(idx, 1);
-    }
-    
-    currentRolePerms[resourceCode] = currentResPerms;
-    permissionsCache[roleCode] = currentRolePerms;
-
-    saving = true;
-    try {
-      // Send the entire role's permissions back (as defined by our AuthProvider interface)
-      const result = await authProvider.updateRolePermissions(roleCode, currentRolePerms);
-      if (result.success) {
-        // Success silently
-      } else {
-         throw new Error(result.error?.message ?? t('common.operationFailed'));
-      }
-    } catch (e) {
-      toast.error((e as Error).message);
-      // Rollback on fail
-      delete permissionsCache[roleCode];
-      loadPermissionsForRole(roleCode);
-    } finally {
-      saving = false;
-    }
-  }
-</script>
-
-{#if error}
-  <div class="h-full flex items-center justify-center">
-    <div class="max-w-md p-6 border border-destructive/20 bg-destructive/10 text-destructive rounded-lg flex flex-col items-center gap-3 text-center">
-      <AlertCircle class="h-8 w-8" />
-      <h3 class="font-bold text-lg">{t('common.error') ?? 'Error'}</h3>
-      <p>{error}</p>
-    </div>
-  </div>
-{:else}
-  <PermissionMatrix 
-    {roles}
-    resources={matrixResources}
-    actions={matrixActions}
-    isGranted={checkGrant}
-    bind:selectedRole={selectedRoleCode}
-    loading={loadingRoles || loadingPermissions || saving}
-    onToggle={handleToggle}
-  />
-{/if}

package/src/components/SettingsPage.svelte

@@ -1,113 +0,0 @@
-<script lang="ts">
-  import { t } from '@svadmin/core/i18n';
-  import { navigate } from '@svadmin/core/router';
-  import { currentPath } from '@svadmin/core/router';
-  import { User, Palette, Info, Shield, FileSearch } from '@lucide/svelte';
-  import ProfilePage from './ProfilePage.svelte';
-  import AppearanceSettings from './AppearanceSettings.svelte';
-  import AboutSettings from './AboutSettings.svelte';
-  import RolesSettings from './RolesSettings.svelte';
-  import AuditLogViewer from './AuditLogViewer.svelte';
-
-  const sections = [
-    {
-      group: 'settings.general',
-      items: [
-        { key: 'profile', path: '/settings/profile', icon: User, label: 'settings.profile' },
-        { key: 'appearance', path: '/settings/appearance', icon: Palette, label: 'settings.appearance' },
-      ],
-    },
-    {
-      group: 'settings.system',
-      items: [
-        { key: 'roles', path: '/settings/roles', icon: Shield, label: 'settings.rolesAndPermissions' },
-        { key: 'audit', path: '/settings/audit', icon: FileSearch, label: 'settings.auditLogs' },
-        { key: 'about', path: '/settings/about', icon: Info, label: 'settings.about' },
-      ],
-    },
-  ];
-
-  let activeKey = $derived.by(() => {
-    const path = currentPath();
-    if (path.includes('/settings/appearance')) return 'appearance';
-    if (path.includes('/settings/roles')) return 'roles';
-    if (path.includes('/settings/audit')) return 'audit';
-    if (path.includes('/settings/about')) return 'about';
-    return 'profile';
-  });
-
-  // Default redirect to profile
-  $effect(() => {
-    const path = currentPath();
-    if (path === '/settings') {
-      navigate('/settings/profile');
-    }
-  });
-</script>
-
-<div class="flex flex-col lg:flex-row gap-0 min-h-full">
-  <!-- Left sidebar navigation -->
-  <nav class="w-full lg:w-56 shrink-0 bg-muted/10 shadow-[inset_0_-1px_0_rgba(0,0,0,0.05)] lg:shadow-[inset_-1px_0_0_rgba(0,0,0,0.05)] dark:shadow-[inset_-1px_0_0_rgba(255,255,255,0.05)]">
-    <!-- Mobile: horizontal scroll tabs -->
-    <div class="flex lg:hidden overflow-x-auto px-4 py-2 gap-1">
-      {#each sections as section}
-        {#each section.items as item}
-          {@const active = activeKey === item.key}
-          <button
-            class="flex items-center gap-2 px-3 py-2 text-sm font-medium rounded-md whitespace-nowrap transition-colors
-              {active ? 'bg-background text-foreground shadow-sm' : 'text-muted-foreground hover:text-foreground hover:bg-background/50'}"
-            onclick={() => navigate(item.path)}
-          >
-            <item.icon class="h-4 w-4" />
-            {t(item.label)}
-          </button>
-        {/each}
-      {/each}
-    </div>
-
-    <!-- Desktop: vertical nav with groups -->
-    <div class="hidden lg:block py-6 px-3 space-y-6">
-      <div class="px-3">
-        <h2 class="text-lg font-semibold text-foreground">{t('settings.title')}</h2>
-        <p class="text-xs text-muted-foreground mt-1">{t('settings.settingsDescription')}</p>
-      </div>
-      {#each sections as section}
-        <div>
-          <h3 class="px-3 mb-1 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground/60">
-            {t(section.group)}
-          </h3>
-          <div class="space-y-0.5">
-            {#each section.items as item}
-              {@const active = activeKey === item.key}
-              <button
-                class="flex w-full items-center gap-3 rounded-lg px-3 py-2 text-sm transition-all
-                  {active
-                    ? 'bg-primary/10 text-primary font-medium'
-                    : 'text-muted-foreground hover:bg-accent hover:text-accent-foreground'}"
-                onclick={() => navigate(item.path)}
-              >
-                <item.icon class="h-4 w-4 shrink-0" />
-                {t(item.label)}
-              </button>
-            {/each}
-          </div>
-        </div>
-      {/each}
-    </div>
-  </nav>
-
-  <!-- Right content area -->
-  <div class="flex-1 p-6 lg:p-8 {activeKey === 'roles' || activeKey === 'audit' ? 'max-w-6xl' : 'max-w-3xl'}">
-    {#if activeKey === 'profile'}
-      <ProfilePage />
-    {:else if activeKey === 'appearance'}
-      <AppearanceSettings />
-    {:else if activeKey === 'roles'}
-      <RolesSettings />
-    {:else if activeKey === 'audit'}
-      <AuditLogViewer />
-    {:else if activeKey === 'about'}
-      <AboutSettings />
-    {/if}
-  </div>
-</div>

package/src/components/ShowPage.svelte

@@ -1,73 +0,0 @@
-<script lang="ts">
-  import { useShow, getResource } from '@svadmin/core';
-  import type { FieldDefinition } from '@svadmin/core';
-  import { navigate } from '@svadmin/core/router';
-  import { t, getLocale } from '@svadmin/core/i18n';
-  import { Button } from './ui/button/index.js';
-  import * as Card from './ui/card/index.js';
-  import { Skeleton } from './ui/skeleton/index.js';
-  import PageHeader from './PageHeader.svelte';
-  import { getDisplayComponent } from './fieldComponentMap';
-  import ListButton from './buttons/ListButton.svelte';
-  import EditButton from './buttons/EditButton.svelte';
-  import DeleteButton from './buttons/DeleteButton.svelte';
-  import RefreshButton from './buttons/RefreshButton.svelte';
-
-  let { resourceName, id } = $props<{ resourceName: string; id: string | number }>();
-
-  const resource = $derived(getResource(resourceName));
-  const showFields = $derived(resource.fields.filter(f => f.showInShow !== false));
-
-  const query = useShow({ get resource() { return resourceName; }, get id() { return id; } });
-</script>
-
-<div class="space-y-6">
-  <PageHeader title="{resource.label} {t('common.detail')}">
-    {#snippet actions()}
-      <ListButton resource={resourceName} hideText />
-      {#if resource.canEdit !== false}
-        <EditButton resource={resourceName} recordItemId={id} hideText />
-      {/if}
-      {#if resource.canDelete !== false}
-        <DeleteButton resource={resourceName} recordItemId={id} hideText onSuccess={() => navigate(`/${resourceName}`)} />
-      {/if}
-      <RefreshButton resource={resourceName} hideText />
-    {/snippet}
-  </PageHeader>
-
-  {#if query.query.isLoading}
-    <Card.Root class="overflow-hidden border-border/40 shadow-sm">
-      <Card.Content class="p-0">
-        {#each showFields.slice(0, 6) as _, i}
-          <div class="flex flex-col sm:flex-row px-4 sm:px-6 py-3 sm:py-4 {i % 2 === 1 ? 'bg-muted/20' : ''}">
-            <Skeleton class="h-4 w-1/2 sm:w-1/4" />
-            <Skeleton class="h-4 w-3/4 sm:w-2/5 mt-1 sm:mt-0 sm:ml-auto" />
-          </div>
-        {/each}
-      </Card.Content>
-    </Card.Root>
-  {:else if query.query.data?.data}
-    <Card.Root class="overflow-hidden border-border/40 shadow-sm">
-      <Card.Content class="p-0">
-        {#each showFields as field, i}
-          {@const value = (query.query.data!.data as Record<string, unknown>)[field.key]}
-          {@const DisplayComponent = getDisplayComponent(field.type)}
-          <div class="flex flex-col sm:flex-row px-4 sm:px-6 py-3 sm:py-4 {i % 2 === 1 ? 'bg-muted/20' : ''}">
-            <div class="sm:w-1/3 text-xs sm:text-sm font-medium text-muted-foreground mb-1 sm:mb-0">{field.label}</div>
-            <div class="sm:w-2/3 text-sm text-foreground">
-              {#if DisplayComponent && value != null}
-                <DisplayComponent
-                  {value}
-                  options={field.options}
-                  resourceName={field.resource}
-                />
-              {:else}
-                {value != null ? String(value) : '—'}
-              {/if}
-            </div>
-          </div>
-        {/each}
-      </Card.Content>
-    </Card.Root>
-  {/if}
-</div>