@svadmin/ui 0.35.0 → 0.37.0

package/dist/components/account/SecurityLogPage.svelte

@@ -43,7 +43,7 @@
 
 </script>
 
-<div class="space-y-6">
+<div class="space-y-6" data-svadmin-content-page="account">
   <div class="flex items-start justify-between gap-4">
     <div>
       <h2 class="text-xl font-semibold text-foreground">{t('account.securityLog')}</h2>
@@ -74,7 +74,7 @@
   <!-- Log table -->
   <Card.Card class="border-border/60">
     <Card.CardContent class="p-0">
-      <div class="overflow-x-auto">
+      <div class="hidden overflow-x-auto md:block">
         <table class="w-full">
           <thead>
             <tr class="border-b bg-muted/30">
@@ -103,6 +103,33 @@
           </tbody>
         </table>
       </div>
+      <div class="divide-y md:hidden">
+        {#each filteredLogs as log (log.id)}
+          <div class="space-y-3 p-4">
+            <div class="flex items-start justify-between gap-3">
+              <div class="flex min-w-0 items-center gap-2">
+                <span class="inline-flex h-2 w-2 shrink-0 rounded-full {log.severity === 'critical' ? 'bg-red-500' : log.severity === 'warning' ? 'bg-amber-500' : 'bg-blue-500'}"></span>
+                <span class="truncate text-sm font-medium text-foreground">{log.eventLabel}</span>
+              </div>
+              <span class="shrink-0 text-xs text-muted-foreground">{log.time}</span>
+            </div>
+            <div class="grid gap-2 text-xs text-muted-foreground">
+              <div class="flex items-center justify-between gap-3">
+                <span>{t('securityLog.ip')}</span>
+                <span class="font-mono text-foreground">{log.ip}</span>
+              </div>
+              <div class="flex items-center justify-between gap-3">
+                <span>{t('securityLog.device')}</span>
+                <span class="truncate text-foreground">{log.device}</span>
+              </div>
+              <div class="flex items-center justify-between gap-3">
+                <span>{t('securityLog.location')}</span>
+                <span class="truncate text-foreground">{log.location}</span>
+              </div>
+            </div>
+          </div>
+        {/each}
+      </div>
     </Card.CardContent>
   </Card.Card>
 </div>

package/dist/components/account/SettingsEnterprisePage.svelte

@@ -25,7 +25,7 @@
   }
 </script>
 
-<div class="space-y-6">
+<div class="space-y-6" data-svadmin-content-page="account">
   <div class="flex items-start justify-between gap-4">
     <div>
       <h2 class="text-xl font-semibold text-foreground">{t('account.settingsEnterprise')}</h2>

package/dist/components/account/SettingsPlainPage.svelte

@@ -22,7 +22,7 @@
   }
 </script>
 
-<div class="space-y-6">
+<div class="space-y-6" data-svadmin-content-page="account">
   <div>
     <h2 class="text-xl font-semibold text-foreground">{t('account.settingsPlain')}</h2>
     <p class="mt-1 text-sm text-muted-foreground">{t('account.settingsPlainDescription')}</p>

package/dist/components/account/SettingsSidebarPage.svelte

@@ -21,7 +21,7 @@
   }
 </script>
 
-<div class="space-y-6">
+<div class="space-y-6" data-svadmin-content-page="account">
   <div>
     <h2 class="text-xl font-semibold text-foreground">{t('account.settingsSidebar')}</h2>
     <p class="mt-1 text-sm text-muted-foreground">{t('account.settingsSidebarDescription')}</p>

package/dist/components/account/TeamMembersPage.svelte

@@ -48,7 +48,7 @@
   const initials = (name: string) => name.split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2);
 </script>
 
-<div class="space-y-6">
+<div class="space-y-6" data-svadmin-content-page="account">
   <div class="flex items-start justify-between gap-4">
     <div>
       <h2 class="text-xl font-semibold text-foreground">{t('account.membersStarter')}</h2>

package/dist/components/network/TeamCrewTablePage.svelte

@@ -45,7 +45,7 @@
   const initials = (name: string) => name.split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2);
 </script>
 
-<div class="space-y-6">
+<div class="space-y-6" data-svadmin-content-page="network">
   <div class="flex items-start justify-between gap-4">
     <div>
       <h2 class="text-xl font-semibold text-foreground">{t('network.teamCrew')}</h2>
@@ -69,7 +69,7 @@
   <!-- Table -->
   <Card.Card class="border-border/60">
     <Card.CardContent class="p-0">
-      <div class="overflow-x-auto">
+      <div class="hidden overflow-x-auto lg:block">
         <table class="w-full">
           <thead>
             <tr class="border-b bg-muted/30">
@@ -117,6 +117,39 @@
           </tbody>
         </table>
       </div>
+      <div class="divide-y lg:hidden">
+        {#each filtered as member (member.id)}
+          {@const sc = statusConfig[member.status]}
+          <div class="space-y-3 p-4">
+            <div class="flex items-start justify-between gap-3">
+              <div class="flex min-w-0 items-center gap-3">
+                <div class="relative shrink-0">
+                  <div class="flex h-9 w-9 items-center justify-center rounded-full bg-primary/10 text-sm font-semibold text-primary">
+                    {initials(member.name)}
+                  </div>
+                  <span class="absolute -bottom-0.5 -right-0.5 h-2.5 w-2.5 rounded-full {sc.dot} ring-2 ring-card"></span>
+                </div>
+                <div class="min-w-0">
+                  <p class="truncate text-sm font-medium text-foreground">{member.name}</p>
+                  <p class="truncate text-xs text-muted-foreground">{member.email}</p>
+                </div>
+              </div>
+              <Button variant="ghost" size="icon-sm" class="shrink-0"><MoreHorizontal class="h-4 w-4" /></Button>
+            </div>
+            <div class="grid gap-2 text-xs text-muted-foreground sm:grid-cols-2">
+              <div class="min-w-0">
+                <span class="block font-medium text-foreground">{member.role}</span>
+                <span class="truncate">{member.department}</span>
+              </div>
+              <div class="flex items-center gap-1 {sc.color}">
+                <sc.icon class="h-3 w-3" />{sc.label}
+              </div>
+              <div>{t('publicProfile.projects')}: <span class="font-medium text-foreground">{member.projects}</span></div>
+              <div>{t('account.joined')}: <span class="font-medium text-foreground">{member.joinedAt}</span></div>
+            </div>
+          </div>
+        {/each}
+      </div>
     </Card.CardContent>
   </Card.Card>
 </div>

package/dist/components/network/UserCardsNFTPage.svelte

@@ -51,7 +51,7 @@
   }
 </script>
 
-<div class="space-y-6">
+<div class="space-y-6" data-svadmin-content-page="network">
   <div>
     <h2 class="text-xl font-semibold text-foreground">{t('network.userCards')}</h2>
     <p class="mt-1 text-sm text-muted-foreground">{t('network.userCardsDescription')}</p>

package/dist/components/profile/PublicProfilePage.svelte

@@ -99,7 +99,7 @@
   ];
 </script>
 
-<div class="space-y-6">
+<div class="space-y-6" data-svadmin-content-page="public-profile">
   <!-- Cover + Profile Header -->
   <Card.Card class="overflow-hidden border-border/60">
     <div class="h-40 bg-gradient-to-r from-primary/25 via-primary/15 to-accent/20 relative">

package/dist/components/ui/pagination/pagination-ellipsis.svelte

@@ -6,7 +6,7 @@
   let { class: className, ...restProps }: HTMLAttributes<HTMLSpanElement> = $props();
 </script>
 
-<span aria-hidden="true" data-slot="pagination-ellipsis" class={cn("flex size-9 items-center justify-center", className)} {...restProps}>
+<span aria-hidden="true" data-slot="pagination-ellipsis" class={cn("flex size-8 items-center justify-center", className)} {...restProps}>
   <Ellipsis class="size-4" />
   <span class="sr-only">More pages</span>
 </span>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@svadmin/ui",
-  "version": "0.35.0",
+  "version": "0.37.0",
   "description": "Pre-built admin UI components — AdminApp, AutoTable, AutoForm, Sidebar, Layout",
   "type": "module",
   "sideEffects": [
@@ -33,7 +33,7 @@
     "./components/*": "./dist/components/*"
   },
   "peerDependencies": {
-    "@svadmin/core": "^0.28.0",
+    "@svadmin/core": "^0.30.0",
     "@tanstack/svelte-query": "^6.1.29",
     "highlight.js": "^11.11.1",
     "isomorphic-dompurify": "^3.15.0",