vueless 0.0.433 → 0.0.435

package/package.json

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

package/ui.data-table/UTable.vue

@@ -184,6 +184,7 @@
               v-bind="getRowAttrs(row.id)"
               :class="cx([getRowAttrs(row.id).class, getRowClasses(row)])"
               @click="onClickRow"
+              @click-cell="onClickCell"
               @toggle-row-visibility="onToggleRowVisibility"
             >
               <template
@@ -297,6 +298,7 @@ import {
   toggleRowVisibility,
   switchRowCheck,
   getFlatRows,
+  rowsHasId,
 } from "./utilTable.js";
 
 import { PX_IN_REM } from "../constants.js";
@@ -395,6 +397,12 @@ const emit = defineEmits([
    */
   "clickRow",
 
+  /**
+   * Triggers when the cell is clicked.
+   * @property {object} cell
+   */
+  "clickCell",
+
   /**
    * Triggers when table rows are selected (updated).
    * @property {array} tableRows
@@ -563,6 +571,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;
@@ -676,6 +694,10 @@ function onClickRow(row) {
   emit("clickRow", row);
 }
 
+function onClickCell(cell, row) {
+  emit("clickCell", cell, row);
+}
+
 function onChangeSelectAll(selectAll) {
   if (selectAll && canSelectAll.value) {
     selectedRows.value = getFlatRows(tableRows.value).map((row) => row.id);

package/ui.data-table/UTableRow.vue

@@ -18,10 +18,9 @@
     <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)])"
+      @click="onClickCell(value, row)"
     >
       <div
         v-if="(row.row || nestedLevel || row.nestedData) && index === 0"
@@ -36,20 +35,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 +90,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 +115,21 @@
         :selectable="selectable"
         @toggle-row-visibility="onClickToggleRowChild"
         @click="onClick"
-      />
+        @click-cell="onClickCell"
+      >
+        <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>
@@ -157,7 +191,7 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(["toggleRowVisibility", "click"]);
+const emit = defineEmits(["toggleRowVisibility", "click", "click-cell"]);
 
 const selectedRows = defineModel("selectedRows", { type: Array, default: () => [] });
 
@@ -172,7 +206,6 @@ const {
   bodyCellNestedAttrs,
   bodyCellNestedExpandIconAttrs,
   bodyCellNestedCollapseIconAttrs,
-  bodyCellNestedRowAttrs,
   bodyCellBaseAttrs,
 } = props.attrs;
 
@@ -206,12 +239,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 +282,12 @@ function setElementTitle(element) {
 }
 
 function onClickToggleIcon() {
+  if (props.row.nestedData) {
+    onClickToggleRowChild(props.row.id);
+
+    return;
+  }
+
   if (isSingleNestedRow.value) {
     onClickToggleRowChild(props.row.row.id);
 
@@ -263,4 +296,8 @@ function onClickToggleIcon() {
 
   props.row.row.forEach(({ id }) => onClickToggleRowChild(id));
 }
+
+function onClickCell(cell, row) {
+  emit("click-cell", cell, row);
+}
 </script>

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.435",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -8401,6 +8401,18 @@
                 }
               ]
             },
+            {
+              "name": "clickCell",
+              "description": "Triggers when the cell is clicked.",
+              "properties": [
+                {
+                  "type": [
+                    "object"
+                  ],
+                  "name": "cell"
+                }
+              ]
+            },
             {
               "name": "update:rows",
               "description": "Triggers when table rows are selected (updated).",
@@ -8615,6 +8627,9 @@
             },
             {
               "name": "click"
+            },
+            {
+              "name": "click-cell"
             }
           ],
           "slots": [