vueless 0.0.433 → 0.0.434

package/package.json

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

package/ui.data-table/UTable.vue

@@ -297,6 +297,7 @@ import {
   toggleRowVisibility,
   switchRowCheck,
   getFlatRows,
+  rowsHasId,
 } from "./utilTable.js";
 
 import { PX_IN_REM } from "../constants.js";
@@ -563,6 +564,16 @@ watch(
     tableRows.value = tableRows.value.map((row) => syncRowCheck(row, selectedRows.value));
   },
 );
+watch(
+  () => props.rows,
+  () => {
+    if (!rowsHasId(props.rows)) {
+      // eslint-disable-next-line no-console
+      console.warn("[Vueless][UTable]: Each table row must have unique id.");
+    }
+  },
+  { deep: true, immediate: true },
+);
 
 onMounted(() => {
   tableRows.value = props.rows;

package/ui.data-table/UTableRow.vue

@@ -18,10 +18,8 @@
     <td
       v-for="(value, key, index) in getFilteredRow(row, columns)"
       :key="index"
-      v-bind="getCellAttrs(row, index)"
-      :class="
-        cx([getCellAttrs(row, index).class, columns[index].tdClass, getCellClasses(row, key)])
-      "
+      v-bind="bodyCellBaseAttrs"
+      :class="cx([columns[index].tdClass, getCellClasses(row, key)])"
     >
       <div
         v-if="(row.row || nestedLevel || row.nestedData) && index === 0"
@@ -36,20 +34,33 @@
           :name="getToggleIconName(row)"
           color="brand"
           v-bind="toggleIconConfig"
-          @click="onClickToggleIcon"
+          @click.stop="onClickToggleIcon"
         />
+
+        <slot :name="`cell-${key}`" :value="value" :row="row" :index="index">
+          <div
+            v-bind="bodyCellContentAttrs"
+            ref="cellRef"
+            :class="cx([bodyCellContentAttrs.class, getCellContentClasses(row, key)])"
+            :data-test="`${dataTest}-${key}-cell`"
+          >
+            {{ value.value || value || HYPHEN_SYMBOL }}
+          </div>
+        </slot>
       </div>
 
-      <slot :name="`cell-${key}`" :value="value" :row="row" :index="index">
-        <div
-          v-bind="bodyCellContentAttrs"
-          ref="cellRef"
-          :class="cx([bodyCellContentAttrs.class, getCellContentClasses(row, key)])"
-          :data-test="`${dataTest}-${key}-cell`"
-        >
-          {{ value.value || value || HYPHEN_SYMBOL }}
-        </div>
-      </slot>
+      <template v-else>
+        <slot :name="`cell-${key}`" :value="value" :row="row" :index="index">
+          <div
+            v-bind="bodyCellContentAttrs"
+            ref="cellRef"
+            :class="cx([bodyCellContentAttrs.class, getCellContentClasses(row, key)])"
+            :data-test="`${dataTest}-${key}-cell`"
+          >
+            {{ value.value || value || HYPHEN_SYMBOL }}
+          </div>
+        </slot>
+      </template>
     </td>
   </tr>
 
@@ -78,7 +89,15 @@
     :selectable="selectable"
     @toggle-row-visibility="onClickToggleRowChild"
     @click="onClick"
-  />
+  >
+    <template
+      v-for="(value, key, index) in getFilteredRow(row.row, columns)"
+      :key="index"
+      #[`cell-${key}`]="slotValues"
+    >
+      <slot :name="`cell-${key}`" :value="slotValues.value" :row="slotValues.row" :index="index" />
+    </template>
+  </UTableRow>
 
   <template v-if="!isSingleNestedRow && row.row.length && !row.nestedData">
     <template v-for="nestedRow in row.row" :key="nestedRow.id">
@@ -95,7 +114,20 @@
         :selectable="selectable"
         @toggle-row-visibility="onClickToggleRowChild"
         @click="onClick"
-      />
+      >
+        <template
+          v-for="(value, key, index) in getFilteredRow(nestedRow, columns)"
+          :key="index"
+          #[`cell-${key}`]="slotValues"
+        >
+          <slot
+            :name="`cell-${key}`"
+            :value="slotValues.value"
+            :row="slotValues.row"
+            :index="index"
+          />
+        </template>
+      </UTableRow>
     </template>
   </template>
 </template>
@@ -172,7 +204,6 @@ const {
   bodyCellNestedAttrs,
   bodyCellNestedExpandIconAttrs,
   bodyCellNestedCollapseIconAttrs,
-  bodyCellNestedRowAttrs,
   bodyCellBaseAttrs,
 } = props.attrs;
 
@@ -206,12 +237,6 @@ function getCellContentClasses(row, key) {
   return typeof cellClasses === "function" ? cellClasses(row[key].value, row) : cellClasses;
 }
 
-function getCellAttrs(row, cellIndex) {
-  const isNestedRow = (row.row || row.nestedData || props.nestedLevel > 0) && cellIndex === 0;
-
-  return isNestedRow ? bodyCellNestedRowAttrs.value : bodyCellBaseAttrs.value;
-}
-
 function getNestedShift() {
   return { marginLeft: `${props.nestedLevel * shift.value}rem` };
 }
@@ -255,6 +280,12 @@ function setElementTitle(element) {
 }
 
 function onClickToggleIcon() {
+  if (props.row.nestedData) {
+    onClickToggleRowChild(props.row.id);
+
+    return;
+  }
+
   if (isSingleNestedRow.value) {
     onClickToggleRowChild(props.row.row.id);
 

package/ui.data-table/config.js

@@ -56,11 +56,10 @@ export default /*tw*/ {
       },
     },
   },
-  bodyCellNestedRow: "flex",
   bodyCellContent: "text-ellipsis overflow-hidden",
   bodyCellCheckbox: "first:px-4", // try to remove first
   bodyCellDateDivider: "",
-  bodyCellNested: "mr-2 mt-0.5",
+  bodyCellNested: "mr-2 flex gap-0.5",
   bodyCellNestedExpandIcon: {
     component: "{UIcon}",
     wrapper: "rounded-sm",

package/ui.data-table/storybook/stories.js

@@ -406,6 +406,7 @@ CellSlots.args = {
     { key: "tags", label: "tags" },
   ],
   row: {
+    id: getRandomId(),
     link: "some link",
     money: {
       sum: 10,
@@ -416,6 +417,36 @@ CellSlots.args = {
       tags: { label: "some tag" },
       variant: "orange",
     },
+    row: [
+      {
+        id: getRandomId(),
+        isHidden: false,
+        link: "some link",
+        money: {
+          sum: 10,
+          currencySymbol: "$",
+        },
+        email: "some@email.ua",
+        tags: {
+          tags: { label: "some tag" },
+          variant: "orange",
+        },
+      },
+      {
+        id: getRandomId(),
+        isHidden: false,
+        link: "some link",
+        money: {
+          sum: 10,
+          currencySymbol: "$",
+        },
+        email: "some@email.ua",
+        tags: {
+          tags: { label: "some tag" },
+          variant: "orange",
+        },
+      },
+    ],
   },
 
   slotTemplate: `

package/ui.data-table/useAttrs.js

@@ -52,9 +52,6 @@ export default function useAttrs(
     headerCellCheckbox: {
       base: computed(() => [extendingKeysClasses.headerCellBase.value]),
     },
-    bodyCellNestedRow: {
-      base: computed(() => [extendingKeysClasses.bodyCellBase.value]),
-    },
     bodyCellCheckbox: {
       base: computed(() => [extendingKeysClasses.bodyCellBase.value]),
     },

package/ui.data-table/utilTable.js

@@ -60,12 +60,41 @@ export function getFlatRows(tableRows) {
   function addRow(row) {
     rows.push(row);
 
-    if (row.row) {
+    if (row.row && !Array.isArray(row.row)) {
       addRow(row.row);
     }
+
+    if (row.row && Array.isArray(row.row)) {
+      row.row.forEach(addRow);
+    }
   }
 
   tableRows.forEach((row) => addRow(row));
 
   return rows;
 }
+
+export function rowsHasId(rows) {
+  const ids = new Set();
+  let totalRows = 0;
+
+  function addId(row) {
+    totalRows++;
+
+    if (typeof row.id !== "undefined") {
+      ids.add(row.id);
+    }
+
+    if (row.row && !Array.isArray(row.row)) {
+      addId(row.row);
+    }
+
+    if (row.row && Array.isArray(row.row)) {
+      row.row.forEach(addId);
+    }
+  }
+
+  rows.forEach((row) => addId(row));
+
+  return ids.size === totalRows;
+}

package/web-types.json

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