@polymarbot/nuxt-layer-shadcn-ui 0.9.1 → 0.9.3

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

@@ -57,7 +57,7 @@ const rootProps = computed<AccordionRootProps>(() => {
       :value="item.value"
       :disabled="item.disabled"
     >
-      <AccordionTrigger>
+      <AccordionTrigger :class="triggerClass">
         <slot
           name="title"
           :item="item"
@@ -66,7 +66,7 @@ const rootProps = computed<AccordionRootProps>(() => {
           {{ item.title }}
         </slot>
       </AccordionTrigger>
-      <AccordionContent>
+      <AccordionContent :class="contentClass">
         <slot
           name="content"
           :item="item"

package/app/components/ui/Accordion/types.ts

@@ -8,6 +8,8 @@ export interface AccordionItem {
 export type AccordionBaseProps = {
   items?: AccordionItem[]
   disabled?: boolean
+  triggerClass?: ClassValue
+  contentClass?: ClassValue
 }
 
 export type AccordionSingleProps = AccordionBaseProps & {

package/app/components/ui/DataTable/index.stories.ts

@@ -220,6 +220,49 @@ export const RowClick: Story = {
   }),
 }
 
+/** `active` highlights a specific row with the selected style. Independent from `selection` — typically paired with `@rowClick` to mark the row currently shown in a detail view. */
+export const ActiveRow: Story = {
+  parameters: {
+    ...noControls,
+    docs: {
+      source: {
+        code: `
+<template>
+  <DataTable
+    :data="data"
+    :columns="columns"
+    :active="active"
+    clickable
+    @rowClick="row => active = row"
+  />
+</template>
+`.trim(),
+      },
+    },
+  },
+  render: () => ({
+    components: { DataTable: DataTable as any },
+    setup () {
+      const active = ref<User | null>(sampleData[1]!)
+      return { data: sampleData, basicColumns, active }
+    },
+    template: `
+      <div class="w-full">
+        <DataTable
+          :data="data"
+          :columns="basicColumns"
+          :active="active"
+          clickable
+          @rowClick="row => active = row"
+        />
+        <div class="mt-2 text-sm text-muted-foreground">
+          Active: {{ active?.name ?? 'none' }}
+        </div>
+      </div>
+    `,
+  }),
+}
+
 export const Loading: Story = {
   parameters: {
     ...noControls,

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

@@ -27,6 +27,7 @@ const props = withDefaults(defineProps<DataTableProps<TData>>(), {
   loading: false,
   clickable: false,
   height: undefined,
+  active: null,
 })
 
 const emit = defineEmits<{
@@ -85,6 +86,10 @@ function isRowSelected (row: TData): boolean {
   return toRaw(selection.value) === toRaw(row)
 }
 
+function isRowActive (row: TData): boolean {
+  return props.active != null && toRaw(props.active) === toRaw(row)
+}
+
 function toggleRow (row: TData) {
   const rawRow = toRaw(row) as TData
   if (props.selectionMode === 'single') {
@@ -387,7 +392,7 @@ defineExpose({
             v-for="(row, index) in data"
             :key="index"
             :class="(showSelectionColumn || clickable) && 'cursor-pointer'"
-            :data-state="isRowSelected(row) ? 'selected' : undefined"
+            :data-state="(isRowSelected(row) || isRowActive(row)) ? 'selected' : undefined"
             @click="onRowClick(row, index, $event)"
           >
             <!-- Selection cell: stop click to prevent double toggle with row click -->
@@ -520,7 +525,8 @@ defineExpose({
   --cell-bg: var(--color-card);
 }
 
-:deep(tbody tr:not([data-virtual-row]):hover) {
+:deep(tbody tr:not([data-virtual-row]):hover),
+:deep(tbody tr[data-state="selected"]) {
   --cell-bg: var(--color-muted);
 }
 

package/app/components/ui/DataTable/types.ts

@@ -39,6 +39,8 @@ export interface DataTableProps<T = Record<string, any>> {
   columns?: DataTableColumn[]
   /** Selection mode: single or multiple */
   selectionMode?: DataTableSelectionMode
+  /** Row to highlight as active. Independent from selection; uses the same highlight style. */
+  active?: T | null
   /** Current sort field */
   sortBy?: string | null
   /** Current sort order: 1 for asc, -1 for desc */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@polymarbot/nuxt-layer-shadcn-ui",
-  "version": "0.9.1",
+  "version": "0.9.3",
   "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": "84fc05150b4f347b2927ab7bd444101fa8696b76"
+  "gitHead": "b822984cfbf1b5492a79e13b08e99909b9a70630"
 }