vueless 0.0.175 → 0.0.176

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.175",
+  "version": "0.0.176",
   "license": "MIT",
   "description": "Vue Styleless Component Framework.",
   "homepage": "https://vueless.com",

package/ui.data-table/components/TableRow.vue

@@ -0,0 +1,170 @@
+<template>
+  <tr v-bind="$attrs" @click="onClick(props.row)">
+    <td
+      v-if="selectable"
+      :style="getNestedCheckboxShift()"
+      v-bind="attrs.bodyCellAttrs(config.bodyCellCheckbox)"
+    >
+      <UCheckbox
+        v-model="selectedRows"
+        :data-id="row.id"
+        :value="row.id"
+        size="sm"
+        :data-cy="`${dataCy}-body-checkbox`"
+        v-bind="attrs.bodyCheckboxAttrs"
+        @click.stop
+      />
+    </td>
+
+    <td
+      v-for="(value, key, index) in getFilteredRow(row, columns)"
+      :key="index"
+      v-bind="attrs.bodyCellAttrs(getCellClasses(key, row, index))"
+    >
+      <div
+        v-if="(row.row || nestedLevel) && index === 0"
+        :style="getNestedShift()"
+        v-bind="attrs.bodyCellNestedAttrs"
+      >
+        <UIcon
+          v-if="row.row"
+          size="xs"
+          internal
+          interactive
+          :name="
+            row?.row?.isHidden
+              ? config.bodyCellNestedExpandIconName
+              : config.bodyCellNestedCollapseIconName
+          "
+          color="brand"
+          v-bind="toggleIconConfig"
+          @click="onClickToggleRowChild(row.row.id)"
+        />
+      </div>
+
+      <div v-if="value?.hasOwnProperty('secondary')">
+        <slot :name="`cell-${key}`" :value="value" :row="row">
+          <div :data-cy="`${dataCy}-${key}-cell`">
+            {{ value.primary || HYPHEN_SYMBOL }}
+          </div>
+
+          <div v-bind="attrs.bodyCellSecondaryAttrs">
+            <template v-if="Array.isArray(value.secondary)">
+              <div v-for="(secondary, idx) in value.secondary" :key="idx">
+                <span v-bind="attrs.bodyCellSecondaryEmptyAttrs">
+                  {{ secondary }}
+                </span>
+              </div>
+            </template>
+
+            <template v-else>
+              {{ value.secondary }}
+            </template>
+          </div>
+        </slot>
+      </div>
+
+      <template v-else>
+        <slot :name="`cell-${key}`" :value="value" :row="row">
+          <div :data-cy="`${dataCy}-${key}-cell`">
+            {{ value || HYPHEN_SYMBOL }}
+          </div>
+        </slot>
+      </template>
+    </td>
+  </tr>
+
+  <TableRow
+    v-if="row.row && !row.row.isHidden"
+    v-bind="$attrs"
+    v-model:selected-rows="selectedRows"
+    :attrs="attrs"
+    :columns="columns"
+    :row="row.row"
+    :data-cy="dataCy"
+    :nested-level="nestedLevel + 1"
+    :config="config"
+    :selectable="selectable"
+    @toggle-row-visibility="onClickToggleRowChild"
+    @click="onClick"
+  />
+</template>
+
+<script setup>
+import { computed } from "vue";
+
+import { HYPHEN_SYMBOL } from "../../service.ui";
+import { getFilteredRow } from "../services/table.service.js";
+
+import UIcon from "../../ui.image-icon";
+import UCheckbox from "../../ui.form-checkbox";
+
+const props = defineProps({
+  row: {
+    type: Object,
+    required: true,
+  },
+  columns: {
+    type: Array,
+    required: true,
+  },
+  tag: {
+    type: String,
+    default: "tr",
+  },
+  selectable: {
+    type: Boolean,
+    default: false,
+  },
+  nestedLevel: {
+    type: Number,
+    default: 0,
+  },
+  dataCy: {
+    type: String,
+    required: true,
+  },
+  attrs: {
+    type: Object,
+    required: true,
+  },
+  config: {
+    type: Object,
+    required: true,
+  },
+});
+
+const emit = defineEmits(["toggleRowVisibility", "click"]);
+
+const selectedRows = defineModel("selectedRows", { type: Array, default: () => [] });
+
+const toggleIconConfig = computed(() =>
+  props.row?.row?.isHidden
+    ? props.attrs.bodyCellNestedExpandIconAttrs
+    : props.attrs.bodyCellNestedCollapseIconAttrs,
+);
+
+const shift = computed(() => (props.row.row ? 1.5 : 2));
+
+function getCellClasses(key, row, cellIndex) {
+  const isNestedRow = (row.row || props.nestedLevel) && cellIndex === 0;
+
+  return [props.columns.find((column) => column.key === key)?.tdClass, isNestedRow && "flex"];
+}
+
+function getNestedShift() {
+  return { marginLeft: `${props.nestedLevel * shift.value}rem` };
+}
+
+function getNestedCheckboxShift() {
+  return { transform: `translateX(${props.nestedLevel * shift.value}rem)` };
+}
+
+function onClickToggleRowChild(rowId) {
+  emit("toggleRowVisibility", rowId);
+}
+
+function onClick(row) {
+  emit("click", row);
+}
+</script>

package/ui.data-table/composables/attrs.composable.js

@@ -5,10 +5,18 @@ import { computed } from "vue";
 
 export function useAttrs(
   props,
-  { tableRows, isNesting, isShownActionsHeader, isHeaderSticky, isFooterSticky },
+  { tableRows, isShownActionsHeader, isHeaderSticky, isFooterSticky },
 ) {
   const { config, getAttrs, hasSlotContent } = useUI(defaultConfig, () => props.config);
-  const { stickyHeaderCell, headerCell, footerRow, bodyCell, headerCellGeneral } = config.value;
+  const {
+    stickyHeaderCell,
+    headerCell,
+    footerRow,
+    bodyCell,
+    headerCellGeneral,
+    stickyHeaderCounter,
+    headerCounter,
+  } = config.value;
 
   const cvaHeaderCellGeneral = cva({
     base: headerCellGeneral.base,
@@ -40,19 +48,37 @@ export function useAttrs(
     compoundVariants: bodyCell.compoundVariants,
   });
 
+  const cvaStickyHeaderCounter = cva({
+    base: stickyHeaderCounter.base,
+    variants: stickyHeaderCounter.variants,
+    compoundVariants: stickyHeaderCounter.compoundVariants,
+  });
+
+  const cvaHeaderCounter = cva({
+    base: headerCounter.base,
+    variants: headerCounter.variants,
+    compoundVariants: headerCounter.compoundVariants,
+  });
+
   const stickyHeaderCellClasses = computed(() => cvaCustomHeaderItem({ compact: props.compact }));
   const headerCellClasses = computed(() => cvaHeaderCell({ compact: props.compact }));
   const footerRowClasses = computed(() => cvaFooterRow({ compact: props.compact }));
   const bodyCellClasses = computed(() => cvaBodyCell({ compact: props.compact }));
   const headerCellGeneralClasses = computed(() => cvaHeaderCellGeneral({ compact: props.compact }));
+  const headerCounterClasses = computed(() => cvaHeaderCounter({ compact: props.compact }));
+  const stickyHeaderCounterClasses = computed(() =>
+    cvaStickyHeaderCounter({ compact: props.compact }),
+  );
 
   const wrapperAttrs = getAttrs("wrapper");
   const stickyHeaderAttrsRaw = getAttrs("stickyHeader");
   const stickyHeaderCellAttrsRaw = getAttrs("stickyHeaderCell", {
     classes: stickyHeaderCellClasses,
   });
-  const headerCounterAttrsRaw = getAttrs("headerCounter");
-  const stickyHeaderCounterAttrsRaw = getAttrs("stickyHeaderCounter");
+  const headerCounterAttrsRaw = getAttrs("headerCounter", { classes: headerCounterClasses });
+  const stickyHeaderCounterAttrsRaw = getAttrs("stickyHeaderCounter", {
+    classes: stickyHeaderCounterClasses,
+  });
   const stickyHeaderActionsCounterAttrsRaw = getAttrs("stickyHeaderActionsCounter");
   const stickyHeaderCheckboxAttrs = getAttrs("stickyHeaderCheckbox", {
     isComponent: true,
@@ -88,7 +114,6 @@ export function useAttrs(
   const bodyRowBeforeCellAttrsRaw = getAttrs("bodyRowBeforeCell");
   const bodyRowAfterAttrs = getAttrs("bodyRowAfter");
   const bodyRowAfterCellAttrsRaw = getAttrs("bodyRowAfterCell");
-  const bodyCellNestedWrapperAttrsRaw = getAttrs("bodyCellNestedWrapper");
 
   const bodyRowAttrsRaw = getAttrs("bodyRow");
 
@@ -195,11 +220,6 @@ export function useAttrs(
     return getAttrs("bodyRowDateSeparator", { classes: activeClass }).value;
   };
 
-  const bodyCellNestedWrapperAttrs = computed(() => (index) => ({
-    ...bodyCellNestedWrapperAttrsRaw.value,
-    class: index === 0 && isNesting.value ? config.value.bodyCellNestedWrapper : "",
-  }));
-
   return {
     config,
     wrapperAttrs,
@@ -215,7 +235,6 @@ export function useAttrs(
     bodyRowBeforeAttrs,
     bodyRowBeforeCellAttrs,
     bodyRowDateSeparatorAttrs,
-    bodyCellNestedWrapperAttrs,
     bodyCellAttrs,
     stickyHeaderCounterAttrs,
     stickyHeaderActionsCounterAttrs,

package/ui.data-table/configs/default.config.js

@@ -13,7 +13,14 @@ export default /*tw*/ {
   stickyHeaderRow: "border-gray-200 bg-white",
   stickyHeaderCell: "flex-none whitespace-nowrap",
   stickyHeaderCheckbox: "",
-  stickyHeaderCounter: "absolute top-4 left-11 bg-gradient-to-r from-white from-80%",
+  stickyHeaderCounter: {
+    base: "absolute top-5 left-11 bg-gradient-to-r from-white from-80%",
+    variants: {
+      compact: {
+        true: "top-3",
+      },
+    },
+  },
   stickyHeaderLoader: "",
   stickyHeaderActions: "absolute rounded-t-lg border-blue-200 bg-blue-50",
   stickyHeaderActionsCheckbox: "",
@@ -25,7 +32,14 @@ export default /*tw*/ {
   headerCell: "",
   headerCellCheckbox: "w-10",
   headerCheckbox: "",
-  headerCounter: "absolute top-4 left-11 bg-gradient-to-r from-white from-80% mt-px ml-px",
+  headerCounter: {
+    base: "absolute top-5 mt-px left-11 bg-gradient-to-r from-white from-80% ml-px",
+    variants: {
+      compact: {
+        true: "top-3",
+      },
+    },
+  },
   headerLoader: "absolute !top-auto",
   body: "group/body divide-none",
   bodyRow: "hover:bg-gray-50",
@@ -36,10 +50,10 @@ export default /*tw*/ {
   bodyRowAfterCell: "py-1",
   bodyRowDateSeparator: "",
   bodyCell: {
-    base: "p-[1.125rem] py-5 first:p-5 truncate align-top last:p-5",
+    base: "p-[1.125rem] py-5 first:!p-5 truncate align-top last:p-5",
     variants: {
       compact: {
-        true: "px-4 py-3 last:px-4 last:py-3 first:px-4 first:py-3",
+        true: "px-4 py-3 last:px-4 last:py-3 first:!px-3.5 first:py-3",
       },
     },
   },
@@ -47,11 +61,16 @@ export default /*tw*/ {
   bodyCellSecondaryEmpty: "inline-block",
   bodyCellCheckbox: "first:px-4", // try to remove first
   bodyCellDateSeparator: "",
-  bodyCellNestedWrapper: "flex items-center",
-  bodyCellNested: "flex relative -top-px",
-  bodyCellNestedExpandIcon: "mr-2 rounded-sm bg-gray-200",
+  bodyCellNested: "mr-2 mt-0.5",
+  bodyCellNestedExpandIcon: {
+    wrapper: "rounded-sm",
+    container: "bg-gray-200",
+  },
   bodyCellNestedExpandIconName: "add",
-  bodyCellNestedCollapseIcon: "mr-2 rounded-sm bg-gray-200",
+  bodyCellNestedCollapseIcon: {
+    wrapper: "rounded-sm",
+    container: "bg-gray-200",
+  },
   bodyCellNestedCollapseIconName: "remove",
   bodyCheckbox: "",
   bodyDateSeparator: "",

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

@@ -42,29 +42,119 @@ export default {
       { key: "key_3", label: "title 3" },
       { key: "key_4", label: "title 4" },
     ],
+    row: getRow,
+    numberOfRows: 5,
+  },
+};
+
+function getNestedRow() {
+  return {
+    id: getRandomId(),
+    isChecked: false,
+    key_1: {
+      primary: "primary",
+      secondary: "secondary",
+    },
+    key_2: {
+      primary: "primary",
+      secondary: "secondary",
+    },
+    key_3: {
+      primary: "primary",
+      secondary: "secondary",
+    },
+    key_4: {
+      primary: "primary",
+      secondary: "secondary",
+    },
     row: {
-      id: 1,
+      id: getRandomId(),
       isChecked: false,
+      isHidden: true,
       key_1: {
-        primary: "primary",
+        primary: "Nesting",
         secondary: "secondary",
       },
       key_2: {
-        primary: "primary",
+        primary: "Nesting",
         secondary: "secondary",
       },
       key_3: {
-        primary: "primary",
+        primary: "Nesting",
         secondary: "secondary",
       },
       key_4: {
-        primary: "primary",
+        primary: "Nesting",
         secondary: "secondary",
       },
+      row: {
+        id: getRandomId(),
+        isChecked: false,
+        isHidden: true,
+        key_1: {
+          primary: "Two level nesting",
+          secondary: "secondary",
+        },
+        key_2: {
+          primary: "Two level nesting",
+          secondary: "secondary",
+        },
+        key_3: {
+          primary: "Two level nesting",
+          secondary: "secondary",
+        },
+        key_4: {
+          primary: "Two level nesting",
+          secondary: "secondary",
+        },
+        row: {
+          id: getRandomId(),
+          isChecked: false,
+          isHidden: true,
+          key_1: {
+            primary: "Three level nesting",
+            secondary: "secondary",
+          },
+          key_2: {
+            primary: "Three level nesting",
+            secondary: "secondary",
+          },
+          key_3: {
+            primary: "Three level nesting",
+            secondary: "secondary",
+          },
+          key_4: {
+            primary: "Three level nesting",
+            secondary: "secondary",
+          },
+        },
+      },
     },
-    numberOfRows: 5,
-  },
-};
+  };
+}
+
+function getRow() {
+  return {
+    id: getRandomId(),
+    isChecked: false,
+    key_1: {
+      primary: "primary",
+      secondary: "secondary",
+    },
+    key_2: {
+      primary: "primary",
+      secondary: "secondary",
+    },
+    key_3: {
+      primary: "primary",
+      secondary: "secondary",
+    },
+    key_4: {
+      primary: "primary",
+      secondary: "secondary",
+    },
+  };
+}
 
 const DefaultTemplate = (args) => ({
   components: { UTable },
@@ -85,10 +175,7 @@ const DefaultTemplate = (args) => ({
       let rows = [];
 
       for (let i = 0; i < args.numberOfRows; i++) {
-        const newRow = { ...args.row };
-
-        newRow.id = getRandomId();
-        rows.push(newRow);
+        rows.push(args.row());
       }
 
       return rows;
@@ -126,10 +213,7 @@ const SlotTemplate = (args) => ({
       let rows = [];
 
       for (let i = 0; i < args.numberOfRows; i++) {
-        const newRow = { ...args.row };
-
-        newRow.id = getRandomId();
-        rows.push(newRow);
+        rows.push(args.row());
       }
 
       return rows;
@@ -140,6 +224,12 @@ const SlotTemplate = (args) => ({
 export const Default = DefaultTemplate.bind({});
 Default.args = {};
 
+export const Nesting = DefaultTemplate.bind({});
+Nesting.args = {
+  row: getNestedRow,
+  selectable: true,
+};
+
 export const Empty = EmptyTemplate.bind({});
 Empty.args = {};
 

package/ui.data-table/index.vue

@@ -154,89 +154,33 @@
               </td>
             </tr>
 
-            <tr
-              v-if="!isShownRow(row)"
+            <TableRow
               v-bind="bodyRowAttrs(getRowClasses(row))"
+              v-model:selectedRows="selectedRows"
+              :selectable="selectable"
               :data-cy="`${dataCy}-row`"
-              @click="onClickRow(row)"
+              :row="row"
+              :columns="columns"
+              :config="config"
+              :attrs="{
+                bodyCellAttrs,
+                bodyCellSecondaryAttrs,
+                bodyCellSecondaryEmptyAttrs,
+                bodyCellNestedCollapseIconAttrs,
+                bodyCellNestedExpandIconAttrs,
+                bodyCellNestedAttrs,
+              }"
+              @click="onClickRow"
+              @toggle-row-visibility="onToggleRowVisibility"
             >
-              <td v-if="selectable" v-bind="bodyCellAttrs(config.bodyCellCheckbox)">
-                <UCheckbox
-                  v-model="selectedRows"
-                  :data-id="row.id"
-                  :value="row.id"
-                  size="sm"
-                  :data-cy="`${dataCy}-body-checkbox`"
-                  v-bind="bodyCheckboxAttrs"
-                  @click.stop
-                />
-              </td>
-
-              <td
-                v-for="(value, key, index) in TableService.getFilteredRow(row, columns)"
+              <template
+                v-for="(value, key, index) in getFilteredRow(row, columns)"
                 :key="index"
-                v-bind="bodyCellAttrs(getCellClasses(key))"
+                #[`cell-${key}`]="slotValues"
               >
-                <template v-if="hasSlotContent($slots[`cell-${key}`])">
-                  <div
-                    v-if="isNesting"
-                    :style="getNestedShift(row.nestedLevel)"
-                    v-bind="bodyCellNestedWrapperAttrs(index)"
-                    @click="onClickNestedWrapper(row)"
-                  >
-                    <div v-if="isShownNestedIcon({ index, row })" v-bind="bodyCellNestedAttrs">
-                      <UIcon
-                        v-if="row.isHidden"
-                        size="xs"
-                        internal
-                        interactive
-                        :name="config.bodyCellNestedExpandIconName"
-                        :color="isActiveNestedIcon(row)"
-                        v-bind="bodyCellNestedExpandIconAttrs"
-                      />
-
-                      <UIcon
-                        v-else
-                        size="xs"
-                        internal
-                        interactive
-                        :name="config.bodyCellNestedCollapseIconName"
-                        v-bind="bodyCellNestedCollapseIconAttrs"
-                      />
-                    </div>
-                  </div>
-
-                  <!-- @slot Use it to customise table cell item (in whole column). -->
-                  <slot :name="`cell-${key}`" :value="value" :row="row" />
-                </template>
-
-                <template v-else-if="value?.hasOwnProperty('secondary')">
-                  <div :data-cy="`${dataCy}-${key}-cell`">
-                    {{ value.primary || HYPHEN_SYMBOL }}
-                  </div>
-
-                  <div v-bind="bodyCellSecondaryAttrs">
-                    <template v-if="Array.isArray(value.secondary)">
-                      <div v-for="(secondary, idx) in value.secondary" :key="idx">
-                        <span v-bind="bodyCellSecondaryEmptyAttrs">
-                          {{ secondary }}
-                        </span>
-                      </div>
-                    </template>
-
-                    <template v-else>
-                      {{ value.secondary }}
-                    </template>
-                  </div>
-                </template>
-
-                <template v-else>
-                  <div :data-cy="`${dataCy}-${key}-cell`">
-                    {{ value || HYPHEN_SYMBOL }}
-                  </div>
-                </template>
-              </td>
-            </tr>
+                <slot :name="`cell-${key}`" :value="slotValues.value" :row="slotValues.row" />
+              </template>
+            </TableRow>
 
             <tr
               v-if="rowIndex === lastRow && hasSlotContent($slots['after-last-row'])"
@@ -300,18 +244,25 @@ import {
 } from "vue";
 import { merge } from "lodash-es";
 
-import UIcon from "../ui.image-icon";
 import UEmpty from "../ui.text-empty";
 import UDivider from "../ui.container-divider";
 import UCheckbox from "../ui.form-checkbox";
 import ULoaderTop from "../ui.loader-top";
+import TableRow from "./components/TableRow";
 
 import UIService from "../service.ui";
 
 import defaultConfig from "./configs/default.config";
-import TableService from "./services/table.service";
-
-import { HYPHEN_SYMBOL, PX_IN_REM } from "../service.ui";
+import {
+  normalizeColumns,
+  getFilteredRow,
+  syncRowCheck,
+  toggleRowVisibility,
+  switchRowCheck,
+  getFlatRows,
+} from "./services/table.service";
+
+import { PX_IN_REM } from "../service.ui";
 import { UTable } from "./constants";
 import { useAttrs } from "./composables/attrs.composable";
 import { useLocale } from "../composable.locale";
@@ -376,14 +327,6 @@ const props = defineProps({
     default: UIService.get(defaultConfig, UTable).default.stickyFooter,
   },
 
-  /**
-   * Sets the nesting level from which folding button need to be shown.
-   */
-  nesting: {
-    type: [Number, Boolean],
-    default: UIService.get(defaultConfig, UTable).default.nesting,
-  },
-
   /**
    * Set loader resource name to activate table top loader exact for that resource.
    */
@@ -420,7 +363,6 @@ const selectAll = ref(false);
 const canSelectAll = ref(true);
 const selectedRows = ref([]);
 const tableRows = ref([]);
-const hiddenIds = ref([]);
 const firstRow = ref(0);
 const tableWidth = ref(0);
 const tableHeight = ref(0);
@@ -443,11 +385,7 @@ const isFooterSticky = computed(
     isCheckedMoreOneTableItems.value,
 );
 
-const normalizedColumns = computed(() => TableService.normalizeColumns(props.columns));
-
-const isSelectedAllRows = computed(() => {
-  return selectedRows.value.length === tableRows.value.length;
-});
+const normalizedColumns = computed(() => normalizeColumns(props.columns));
 
 const colsCount = computed(() => {
   return props.columns.length + 1;
@@ -458,7 +396,7 @@ const lastRow = computed(() => {
 });
 
 const isShownActionsHeader = computed(
-  () => hasSlotContent(slots["header-actions"]) && selectedRows.value.length,
+  () => hasSlotContent(slots["header-actions"]) && Boolean(selectedRows.value.length),
 );
 
 const isHeaderSticky = computed(() => {
@@ -487,8 +425,10 @@ const hasSlotContentBeforeFirstRow = computed(() => {
     : false;
 });
 
-const isNesting = computed(() => {
-  return Boolean(props.nesting) || props.nesting === 0;
+const isSelectedAllRows = computed(() => {
+  const rows = getFlatRows(tableRows.value);
+
+  return selectedRows.value.length === rows.length;
 });
 
 const {
@@ -505,14 +445,12 @@ const {
   bodyRowAttrs,
   footerClassesAttrs,
   bodyRowDateSeparatorAttrs,
-  bodyCellNestedWrapperAttrs,
   headerCellAttrs,
   bodyCellAttrs,
   stickyHeaderActionsCheckboxAttrs,
   stickyHeaderCheckboxAttrs,
   headerCheckboxAttrs,
   headerCounterAttrs,
-  bodyCheckboxAttrs,
   bodyCellNestedCollapseIconAttrs,
   bodyCellNestedExpandIconAttrs,
   bodyEmptyStateAttrs,
@@ -533,7 +471,6 @@ const {
   headerAttrs,
 } = useAttrs(props, {
   tableRows,
-  isNesting,
   isShownActionsHeader,
   isHeaderSticky,
   isFooterSticky,
@@ -551,11 +488,7 @@ watch(isFooterSticky, (newValue) =>
 watch(
   () => selectedRows.value.length,
   () => {
-    tableRows.value = tableRows.value.map((row) => {
-      row.isChecked = selectedRows.value.includes(row.id);
-
-      return row;
-    });
+    tableRows.value = tableRows.value.map((row) => syncRowCheck(row, selectedRows.value));
   },
 );
 
@@ -585,56 +518,12 @@ function onWindowResize() {
   setFooterCellWidth();
 }
 
-function isShownNestedIcon({ index, row }) {
-  const nestedLevel = props.nesting === true ? 0 : Number(props.nesting);
-  const isWithinNestingLevel = row.nestedLevel >= nestedLevel;
-  const isChildren = row.childrenIds?.length > 0;
-
-  const isFirstRow = index === 0;
-
-  return isFirstRow && (isChildren || row.isNestingRow) && isNesting.value && isWithinNestingLevel;
-}
-
-function isActiveNestedIcon(row) {
-  return !row.childrenIds?.length ? "grayscale" : "";
-}
-
-function onClickNestedWrapper(row) {
-  if (!isNesting.value || !row.childrenIds.length) return;
-  const [firstElement] = row.childrenIds;
-
-  row.isHidden = !row.isHidden;
-
-  if (row.isHidden && row.childrenIds.length) {
-    hiddenIds.value.push(...row.childrenIds);
-  } else {
-    const nestedLevel = props.nesting === true ? 0 : Number(props.nesting);
-
-    hiddenIds.value =
-      row.nestedLevel === nestedLevel
-        ? row.childrenIds.filter((item) => !hiddenIds.value.includes(item))
-        : hiddenIds.value.filter((item) => item !== firstElement);
-  }
-}
-
-function getNestedShift(nestedLevel) {
-  return { marginLeft: `${nestedLevel * 1.5}rem` };
-}
-
 function getDateSeparatorLabel(separatorDate) {
   return Array.isArray(props.dateDivider)
     ? props.dateDivider.find((dateItem) => dateItem.date === separatorDate)?.label || separatorDate
     : separatorDate;
 }
 
-function isShownRow(row) {
-  if (hiddenIds.value.includes(row.id)) {
-    row.isHidden = true;
-  }
-
-  return hiddenIds.value.includes(row.id);
-}
-
 function setFooterCellWidth(width) {
   const ZERO_WIDTH = 0;
 
@@ -670,12 +559,6 @@ function synchronizeTableItemsWithProps() {
   }
 
   tableRows.value = props.rows;
-
-  tableRows.value.forEach((item) => {
-    if (isNesting.value && item.isHidden && item.childrenIds?.length) {
-      hiddenIds.value.push(...item.childrenIds);
-    }
-  });
 }
 
 function updateSelectedRows() {
@@ -715,19 +598,15 @@ function getRowClasses(row) {
   return selectedRows.value.includes(row.id) ? config.value.bodyRowChecked : "";
 }
 
-function getCellClasses(key) {
-  return props.columns.find((column) => column.key === key)?.tdClass;
-}
-
 function onChangeSelectAll(selectAll) {
   if (selectAll && canSelectAll.value) {
-    selectedRows.value = tableRows.value.map((item) => item.id);
+    selectedRows.value = getFlatRows(tableRows.value).map((row) => row.id);
 
-    tableRows.value.forEach((item) => (item.isChecked = true));
+    tableRows.value.forEach((row) => switchRowCheck(row, true));
   } else if (!selectAll) {
     selectedRows.value = [];
 
-    tableRows.value.forEach((item) => (item.isChecked = false));
+    tableRows.value.forEach((row) => switchRowCheck(row, false));
   }
 
   canSelectAll.value = true;
@@ -748,4 +627,8 @@ function onChangeSelectedRows(selectedRows) {
 function clearSelectedItems() {
   selectedRows.value = [];
 }
+
+function onToggleRowVisibility(rowId) {
+  tableRows.value.forEach((row) => toggleRowVisibility(row, rowId));
+}
 </script>

package/ui.data-table/services/table.service.js

@@ -1,15 +1,55 @@
-export default class TableService {
-  static normalizeColumns(columns) {
-    return columns.map((column) => (typeof column === "string" ? { label: column } : column));
+export function normalizeColumns(columns) {
+  return columns.map((column) => (typeof column === "string" ? { label: column } : column));
+}
+
+export function getFilteredRow(row, columns) {
+  const filteredRow = Object.entries(row).filter((item) => {
+    const isShownColumn = columns.some((column) => column.key === item[0]);
+
+    if (isShownColumn) return item;
+  });
+
+  return Object.fromEntries(filteredRow);
+}
+
+export function syncRowCheck(row, selectedRows) {
+  row.isChecked = selectedRows.includes(row.id);
+
+  if (row.row) {
+    row.row = syncRowCheck(row.row, selectedRows);
   }
 
-  static getFilteredRow(row, columns) {
-    const filteredRow = Object.entries(row).filter((item) => {
-      const isShownColumn = columns.some((column) => column.key === item[0]);
+  return row;
+}
 
-      if (isShownColumn) return item;
-    });
+export function toggleRowVisibility(row, targetRowId) {
+  if (row.id === targetRowId) row.isHidden = !row.isHidden;
 
-    return Object.fromEntries(filteredRow);
+  if (row.row) {
+    toggleRowVisibility(row.row, targetRowId);
   }
 }
+
+export function switchRowCheck(row, isChecked) {
+  row.isChecked = isChecked;
+
+  if (row.row) {
+    switchRowCheck(row.row, isChecked);
+  }
+}
+
+export function getFlatRows(tableRows) {
+  const rows = [];
+
+  function addRow(row) {
+    rows.push(row);
+
+    if (row.row) {
+      addRow(row.row);
+    }
+  }
+
+  tableRows.forEach((row) => addRow(row));
+
+  return rows;
+}

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.175",
+  "version": "0.0.176",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -181,6 +181,93 @@
             "symbol": "default"
           }
         },
+        {
+          "name": "TableRow",
+          "description": "",
+          "attributes": [
+            {
+              "name": "row",
+              "required": true,
+              "value": {
+                "kind": "expression",
+                "type": "object"
+              }
+            },
+            {
+              "name": "columns",
+              "required": true,
+              "value": {
+                "kind": "expression",
+                "type": "array"
+              }
+            },
+            {
+              "name": "tag",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "\"tr\""
+            },
+            {
+              "name": "selectable",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "nestedLevel",
+              "value": {
+                "kind": "expression",
+                "type": "number"
+              },
+              "default": "0"
+            },
+            {
+              "name": "dataCy",
+              "required": true,
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "attrs",
+              "required": true,
+              "value": {
+                "kind": "expression",
+                "type": "object"
+              }
+            },
+            {
+              "name": "config",
+              "required": true,
+              "value": {
+                "kind": "expression",
+                "type": "object"
+              }
+            }
+          ],
+          "events": [
+            {
+              "name": "toggleRowVisibility"
+            },
+            {
+              "name": "click"
+            }
+          ],
+          "slots": [
+            {
+              "name": "`cell-${key}`"
+            }
+          ],
+          "source": {
+            "module": "./src/ui.data-table/components/TableRow.vue",
+            "symbol": "default"
+          }
+        },
         {
           "name": "UAccordion",
           "description": "",
@@ -6642,15 +6729,6 @@
               },
               "default": "false"
             },
-            {
-              "name": "nesting",
-              "description": "Sets the nesting level from which folding button need to be shown.",
-              "value": {
-                "kind": "expression",
-                "type": "number|boolean"
-              },
-              "default": "false"
-            },
             {
               "name": "resource",
               "description": "Set loader resource name to activate table top loader exact for that resource.",
@@ -6709,8 +6787,7 @@
               "description": "Use it to add something before first row."
             },
             {
-              "name": "`cell-${key}`",
-              "description": "Use it to customise table cell item (in whole column)."
+              "name": "`cell-${key}`"
             },
             {
               "name": "after-last-row",