vueless 0.0.436 → 0.0.437

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.436",
+  "version": "0.0.437",
   "license": "MIT",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "keywords": [

package/ui.data-table/UTable.vue

@@ -181,8 +181,6 @@
               :columns="columns"
               :config="config"
               :attrs="keysAttrs"
-              v-bind="getRowAttrs(row.id)"
-              :class="cx([getRowAttrs(row.id).class, getRowClasses(row)])"
               @click="onClickRow"
               @click-cell="onClickCell"
               @toggle-row-visibility="onToggleRowVisibility"
@@ -526,8 +524,6 @@ const {
   bodyRowAfterCellAttrs,
   bodyRowBeforeAttrs,
   bodyRowBeforeCellAttrs,
-  bodyRowAttrs,
-  bodyRowCheckedAttrs,
   footerAttrs,
   bodyRowDateDividerAttrs,
   headerCellBaseAttrs,
@@ -614,16 +610,6 @@ function getDateDividerLabel(rowDate) {
     : rowDate;
 }
 
-function getRowAttrs(rowId) {
-  return selectedRows.value.includes(rowId) ? bodyRowCheckedAttrs.value : bodyRowAttrs.value;
-}
-
-function getRowClasses(row) {
-  const rowClasses = row?.class || "";
-
-  return typeof rowClasses === "function" ? rowClasses(row) : rowClasses;
-}
-
 function setFooterCellWidth(width) {
   const ZERO_WIDTH = 0;
 

package/ui.data-table/UTableRow.vue

@@ -1,5 +1,9 @@
 <template>
-  <tr v-bind="$attrs" @click="onClick(props.row)">
+  <tr
+    v-bind="{ ...$attrs, ...getRowAttrs(row.id) }"
+    :class="cx([getRowAttrs(row.id).class, getRowClasses(row)])"
+    @click="onClick(props.row)"
+  >
     <td
       v-if="selectable"
       :style="getNestedCheckboxShift()"
@@ -79,8 +83,12 @@
 
   <UTableRow
     v-if="isSingleNestedRow && row.row && !row.row.isHidden && !row.nestedData"
-    v-bind="$attrs"
+    v-bind="{
+      ...$attrs,
+      ...getRowAttrs(row.row.id),
+    }"
     v-model:selected-rows="selectedRows"
+    :class="cx([getRowAttrs(row.row.id).class, getRowClasses(row.row)])"
     :attrs="attrs"
     :columns="columns"
     :row="row.row"
@@ -104,8 +112,12 @@
     <template v-for="nestedRow in row.row" :key="nestedRow.id">
       <UTableRow
         v-if="!nestedRow.isHidden"
-        v-bind="$attrs"
+        v-bind="{
+          ...$attrs,
+          ...getRowAttrs(nestedRow.id),
+        }"
         v-model:selected-rows="selectedRows"
+        :class="cx([getRowAttrs(nestedRow.id).class, getRowClasses(nestedRow)])"
         :attrs="attrs"
         :columns="columns"
         :row="nestedRow"
@@ -210,7 +222,9 @@ const {
 } = props.attrs;
 
 const toggleIconConfig = computed(() =>
-  props.row?.row?.isHidden ? bodyCellNestedExpandIconAttrs : bodyCellNestedCollapseIconAttrs,
+  props.row?.row?.isHidden
+    ? bodyCellNestedExpandIconAttrs.value
+    : bodyCellNestedCollapseIconAttrs.value,
 );
 
 const shift = computed(() => (props.row.row ? 1.5 : 2));
@@ -304,4 +318,16 @@ function onClickToggleIcon() {
 function onClickCell(cell, row) {
   emit("click-cell", cell, row);
 }
+
+function getRowClasses(row) {
+  const rowClasses = row?.class || "";
+
+  return typeof rowClasses === "function" ? rowClasses(row) : rowClasses;
+}
+
+function getRowAttrs(rowId) {
+  return selectedRows.value.includes(rowId)
+    ? props.attrs.bodyRowCheckedAttrs.value
+    : props.attrs.bodyRowAttrs.value;
+}
 </script>

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.436",
+  "version": "0.0.437",
   "contributions": {
     "html": {
       "description-markup": "markdown",