vueless 0.0.436 → 0.0.438

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.436",
+  "version": "0.0.438",
   "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()"
@@ -28,7 +32,7 @@
         v-bind="bodyCellNestedAttrs"
       >
         <UIcon
-          v-if="row.row || (row.nestedData && hasSlotContent($slots['nested-content']))"
+          v-if="isShownToggleIcon"
           size="xs"
           internal
           interactive
@@ -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"
@@ -135,7 +147,7 @@
 </template>
 
 <script setup>
-import { computed, onMounted, ref } from "vue";
+import { computed, onMounted, ref, useSlots } from "vue";
 import { cx } from "../utils/utilUI.js";
 import useUI from "../composables/useUI.js";
 
@@ -196,6 +208,7 @@ const emit = defineEmits(["toggleRowVisibility", "click", "click-cell"]);
 const selectedRows = defineModel("selectedRows", { type: Array, default: () => [] });
 
 const cellRef = ref([]);
+const slots = useSlots();
 
 useMutationObserver(cellRef, setCellTitle, { childList: true });
 
@@ -210,13 +223,34 @@ 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));
 
 const isSingleNestedRow = computed(() => !Array.isArray(props.row.row));
 
+const isNestedRowEmpty = computed(() => {
+  if (!props.row.row) return true;
+
+  if (Array.isArray(props.row.row)) {
+    return props.row.row.some(
+      (nestedRow) => !Object.keys(getFilteredRow(nestedRow, props.columns)).length,
+    );
+  }
+
+  return !Object.keys(getFilteredRow(props.row.row, props.columns)).length;
+});
+
+const isShownToggleIcon = computed(() => {
+  return (
+    (props.row.row && !isNestedRowEmpty.value) ||
+    (props.row.nestedData && hasSlotContent(slots["nested-content"]))
+  );
+});
+
 const getToggleIconName = computed(() => (row) => {
   const isHiddenNestedRow = Array.isArray(row.row)
     ? row.row.some((nestedRow) => nestedRow.isHidden)
@@ -304,4 +338,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.438",
   "contributions": {
     "html": {
       "description-markup": "markdown",