@polymarbot/nuxt-layer-shadcn-ui 0.3.4 → 0.3.6

package/app/components/ui/AdminLayout/index.vue

@@ -22,57 +22,51 @@ withDefaults(defineProps<AdminLayoutProps>(), {
 </script>
 
 <template>
-  <!-- Wrap with a real DOM element to avoid Vue <Transition> warning.
-       SidebarProvider's root is reka-ui TooltipProvider (renderless), which
-       Nuxt's layoutTransition cannot animate. `display: contents` keeps
-       layout unaffected. -->
-  <div class="contents">
-    <SidebarProvider>
-      <Sidebar
-        :variant="variant"
-        :collapsible="collapsible"
-      >
-        <SidebarHeader>
-          <slot name="header">
-            <SidebarDropdown
-              v-if="headerDropdown"
-              :profile="headerDropdown.profile"
-              :menuItems="headerDropdown.menuItems"
-            />
-          </slot>
-        </SidebarHeader>
+  <SidebarProvider>
+    <Sidebar
+      :variant="variant"
+      :collapsible="collapsible"
+    >
+      <SidebarHeader>
+        <slot name="header">
+          <SidebarDropdown
+            v-if="headerDropdown"
+            :profile="headerDropdown.profile"
+            :menuItems="headerDropdown.menuItems"
+          />
+        </slot>
+      </SidebarHeader>
 
-        <SidebarContent>
-          <SidebarMenus :menus="menus" />
-        </SidebarContent>
+      <SidebarContent>
+        <SidebarMenus :menus="menus" />
+      </SidebarContent>
 
-        <SidebarFooter>
-          <slot name="footer">
-            <SidebarDropdown
-              v-if="footerDropdown"
-              :profile="footerDropdown.profile"
-              :menuItems="footerDropdown.menuItems"
-            />
-          </slot>
-        </SidebarFooter>
+      <SidebarFooter>
+        <slot name="footer">
+          <SidebarDropdown
+            v-if="footerDropdown"
+            :profile="footerDropdown.profile"
+            :menuItems="footerDropdown.menuItems"
+          />
+        </slot>
+      </SidebarFooter>
 
-        <SidebarRail />
-      </Sidebar>
+      <SidebarRail />
+    </Sidebar>
 
-      <SidebarInset class="min-w-0">
-        <Navbar>
-          <div class="flex flex-1 items-center gap-3">
-            <slot name="navbar-left" />
-          </div>
-          <div class="flex items-center gap-3">
-            <slot name="navbar-right" />
-          </div>
-        </Navbar>
-
-        <div class="flex-1 overflow-auto">
-          <slot />
+    <SidebarInset class="min-w-0">
+      <Navbar>
+        <div class="gap-3 flex flex-1 items-center">
+          <slot name="navbar-left" />
+        </div>
+        <div class="gap-3 flex items-center">
+          <slot name="navbar-right" />
         </div>
-      </SidebarInset>
-    </SidebarProvider>
-  </div>
+      </Navbar>
+
+      <div class="flex-1 overflow-auto">
+        <slot />
+      </div>
+    </SidebarInset>
+  </SidebarProvider>
 </template>

package/app/components/ui/AsyncDataTable/index.vue

@@ -29,7 +29,7 @@ const props = withDefaults(defineProps<AsyncDataTableProps<TData>>(), {
 const emit = defineEmits<{
   'update:filters': [filters: Record<string, any>]
   'update:selection': [value: TData[]]
-  'rowClick': [row: TData, event: MouseEvent]
+  'rowClick': [row: TData, index: number, event: MouseEvent]
 }>()
 
 const T = useTranslations('components.ui.AsyncDataTable')
@@ -264,7 +264,7 @@ onMounted(() => {
       @update:selection="onSelectionChange"
       @update:sortBy="onSortByUpdate"
       @update:sortOrder="onSortOrderUpdate"
-      @rowClick="(row: TData, event: MouseEvent) => emit('rowClick', row, event)"
+      @rowClick="(row: TData, index: number, event: MouseEvent) => emit('rowClick', row, index, event)"
     >
       <template
         v-for="name in Object.keys($slots).filter(n => n !== 'toolbar')"

package/app/components/ui/DataTable/index.vue

@@ -31,7 +31,7 @@ const props = withDefaults(defineProps<DataTableProps<TData>>(), {
 const emit = defineEmits<{
   'update:sortBy': [value: string | null]
   'update:sortOrder': [value: number | null]
-  'rowClick': [row: TData, event: MouseEvent]
+  'rowClick': [row: TData, index: number, event: MouseEvent]
 }>()
 
 const selection = defineModel<TData | TData[] | null>('selection', { default: null })
@@ -93,8 +93,8 @@ function toggleRow (row: TData) {
   }
 }
 
-function onRowClick (row: TData, event: MouseEvent) {
-  emit('rowClick', row, event)
+function onRowClick (row: TData, index: number, event: MouseEvent) {
+  emit('rowClick', row, index, event)
   if (showSelectionColumn.value) toggleRow(row)
 }
 
@@ -358,7 +358,7 @@ const selectionColumnShadowDir = computed<FrozenShadow | undefined>(() =>
             :key="index"
             :class="(showSelectionColumn || clickable) && 'cursor-pointer'"
             :data-state="isRowSelected(row) ? 'selected' : undefined"
-            @click="onRowClick(row, $event)"
+            @click="onRowClick(row, index, $event)"
           >
             <!-- Selection cell: stop click to prevent double toggle with row click -->
             <TableCell

package/app/components/ui/FormItem/index.vue

@@ -16,8 +16,8 @@ const errorArray = computed(() => {
 })
 
 const labelClass = computed(() => {
-  if (props.orientation === 'horizontal') return '!flex-initial mt-2'
-  if (props.orientation === 'responsive') return '@md/field-group:!flex-initial @md/field-group:mt-2'
+  if (props.orientation === 'horizontal') return 'justify-end text-right mt-2'
+  if (props.orientation === 'responsive') return '@md/field-group:justify-end @md/field-group:text-right @md/field-group:mt-2'
   return undefined
 })
 </script>

package/app/components/ui/Pagination/index.vue

@@ -43,8 +43,14 @@ const pageReport = computed(() => {
   return T('pageReport', { first, last, total: props.total })
 })
 
+const pageItemClass = computed(() => props.size === 'sm'
+  ? 'min-w-8 w-auto! px-1.5'
+  : 'min-w-9 w-auto! px-2',
+)
+
 const activePageClass = computed(() => cn(
   buttonVariants({ variant: 'default', size: iconButtonSize.value }),
+  pageItemClass.value,
   `
     hover:text-primary-foreground
     dark:hover:bg-primary/90
@@ -65,7 +71,7 @@ const pageSizeMenuItems = computed<DropdownItem[]>(() =>
 <template>
   <div
     v-if="hasData"
-    class="flex items-center gap-2"
+    class="gap-2 flex items-center"
   >
     <!-- Simple mode: ‹ 1/9 › -->
     <template v-if="simple">
@@ -86,7 +92,7 @@ const pageSizeMenuItems = computed<DropdownItem[]>(() =>
         <Icon name="chevron-left" />
       </Button>
       <span
-        class="min-w-12 text-center text-sm text-muted-foreground tabular-nums"
+        class="min-w-12 text-sm text-muted-foreground text-center tabular-nums"
       >
         {{ page }} / {{ totalPages }}
       </span>
@@ -110,7 +116,7 @@ const pageSizeMenuItems = computed<DropdownItem[]>(() =>
 
     <!-- Full mode -->
     <template v-else>
-      <span class="text-sm whitespace-nowrap text-muted-foreground">
+      <span class="text-sm text-muted-foreground whitespace-nowrap">
         {{ pageReport }}
       </span>
       <ShadcnPagination
@@ -135,7 +141,7 @@ const pageSizeMenuItems = computed<DropdownItem[]>(() =>
               :key="index"
               :value="item.value"
               :size="iconButtonSize"
-              :class="item.value === page ? activePageClass : ''"
+              :class="item.value === page ? activePageClass : pageItemClass"
             >
               {{ item.value }}
             </PaginationItem>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@polymarbot/nuxt-layer-shadcn-ui",
-  "version": "0.3.4",
+  "version": "0.3.6",
   "description": "Nuxt layer providing shadcn-vue based UI components",
   "type": "module",
   "main": "./nuxt.config.ts",
@@ -42,5 +42,5 @@
     "vue-i18n": "^11",
     "vue-router": "^4 || ^5"
   },
-  "gitHead": "39ac87e0e1062027fbe9691cdf9d091f74a8f0ad"
+  "gitHead": "1cab3200649169317e33b3677a1ad906b6ba4683"
 }