vueless 0.0.821 → 0.0.823

package/package.json

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

package/ui.data-table/UTable.vue

@@ -45,6 +45,7 @@ import type {
   UTableRowAttrs,
   Config,
   DateDivider,
+  FlatRow,
 } from "./types.ts";
 
 defineOptions({ inheritAttrs: false });
@@ -116,12 +117,12 @@ const actionHeaderRowRef = useTemplateRef<HTMLDivElement>("action-header-row");
 const i18nGlobal = tm(COMPONENT_NAME);
 const currentLocale = computed(() => merge({}, defaultConfig.i18n, i18nGlobal, props.config.i18n));
 
-const sortedRows: ComputedRef<Row[]> = computed(() => {
+const sortedRows: ComputedRef<FlatRow[]> = computed(() => {
   const headerKeys = props.columns.map((column) =>
     typeof column === "object" ? column.key : column,
   );
 
-  return tableRows.value.map((row) => {
+  return flatTableRows.value.map((row) => {
     const rowEntries = Object.entries(row);
 
     const sortedEntries: typeof rowEntries = new Array(rowEntries.length);
@@ -141,7 +142,7 @@ const sortedRows: ComputedRef<Row[]> = computed(() => {
 
     const sortedRow = Object.fromEntries(sortedEntries.filter((value) => value));
 
-    return sortedRow as Row;
+    return sortedRow as FlatRow;
   });
 });
 
@@ -188,7 +189,7 @@ const isCheckedMoreOneTableItems = computed(() => {
 
 const tableRowWidthStyle = computed(() => ({ width: `${tableWidth.value / PX_IN_REM}rem` }));
 
-const flatTableRows = computed(() => getFlatRows(props.rows));
+const flatTableRows = computed(() => getFlatRows(tableRows.value));
 
 const isSelectedAllRows = computed(() => {
   return selectedRows.value.length === flatTableRows.value.length;
@@ -266,6 +267,7 @@ function onWindowResize() {
 function getDateDividerData(rowDate: string | Date | undefined) {
   if (!rowDate) {
     return {
+      date: "",
       label: "",
       config: {},
     };
@@ -282,6 +284,7 @@ function getDateDividerData(rowDate: string | Date | undefined) {
   }
 
   return {
+    date: dividerItem?.date || "",
     label: dividerItem?.label || String(rowDate),
     config: dividerItem?.config,
   };
@@ -415,8 +418,22 @@ function clearSelectedItems() {
   selectedRows.value = [];
 }
 
-function onToggleRowVisibility(rowId: string | number) {
-  tableRows.value = tableRows.value.map((row) => toggleRowVisibility({ ...row }, rowId));
+function onToggleRowVisibility(row: FlatRow | Row) {
+  const nestedRows = flatTableRows.value.filter((flatRow) => flatRow.parentId === row.id);
+
+  if (row.nestedData && row.nestedData.hasOwnProperty("isShown")) {
+    row.nestedData.isShown = !row.nestedData.isShown;
+  }
+
+  if (nestedRows.length) {
+    let updatedRows: Row[] = [];
+
+    nestedRows.forEach((nestedRow) => {
+      updatedRows = tableRows.value.map((row) => toggleRowVisibility({ ...row }, nestedRow.id));
+    });
+
+    tableRows.value = updatedRows;
+  }
 }
 
 function onToggleExpand(row: Row, expanded: boolean) {
@@ -695,7 +712,7 @@ const {
           <UTableRow
             v-for="(row, rowIndex) in sortedRows"
             :key="row.id"
-            v-memo="[selectedRows.includes(row.id), isRowSelectedWithin(rowIndex)]"
+            v-memo="[selectedRows.includes(row.id), row.isShown, isRowSelectedWithin(rowIndex)]"
             :selectable="selectable"
             :row="row"
             :is-date-divider="isShownDateDivider(rowIndex)"
@@ -705,7 +722,7 @@ const {
             :date-divider-data="getDateDividerData(row.rowDate)"
             :attrs="tableRowAttrs as unknown as UTableRowAttrs"
             :cols-count="colsCount"
-            :nested-level="0"
+            :nested-level="Number(row.nestedLevel || 0)"
             :empty-cell-label="emptyCellLabel"
             :data-test="getDataTest('row')"
             @click="onClickRow"

package/ui.data-table/UTableRow.vue

@@ -16,16 +16,7 @@ import UDivider from "../ui.container-divider/UDivider.vue";
 import defaultConfig from "./config.ts";
 import type { Config as UDividerConfig } from "../ui.container-divider/types.ts";
 
-import type {
-  RowId,
-  Cell,
-  CellObject,
-  Row,
-  RowScopedExpandProps,
-  RowScopedProps,
-  UTableRowProps,
-  Config,
-} from "./types.ts";
+import type { RowId, Cell, CellObject, Row, UTableRowProps, Config } from "./types.ts";
 
 const NESTED_ROW_SHIFT_REM = 1;
 const LAST_NESTED_ROW_SHIFT_REM = 1.1;
@@ -71,13 +62,6 @@ const toggleIconConfig = computed(() => {
     : props.attrs.bodyCellNestedExpandIconAttrs.value;
 });
 
-const isSingleNestedRow = computed(() => !Array.isArray(props.row.row));
-
-const singleNestedRow = computed(() =>
-  Array.isArray(props.row.row) ? props.row.row.at(0) : props.row.row,
-);
-const nestedRows = computed(() => props.row.row as unknown as Row[]);
-
 const isNestedRowEmpty = computed(() => {
   if (!props.row.row) return true;
 
@@ -180,12 +164,6 @@ function getNestedCheckboxShift() {
   return { transform: `translateX(${props.nestedLevel * LAST_NESTED_ROW_SHIFT_REM}rem)` };
 }
 
-function onClickToggleRowChild(rowId: string | number) {
-  if (props.row.row || props.row.nestedData) {
-    emit("toggleRowVisibility", rowId);
-  }
-}
-
 function onClick(row: Row) {
   emit("click", row);
 }
@@ -224,20 +202,8 @@ function setElementTitle(element: HTMLElement) {
   }
 }
 
-function onClickToggleIcon() {
-  if (props.row.nestedData) {
-    onClickToggleRowChild(props.row.id);
-
-    return;
-  }
-
-  if (isSingleNestedRow.value) {
-    onClickToggleRowChild((props.row.row as Row).id);
-
-    return;
-  }
-
-  (props.row.row as Row[]).forEach(({ id }) => onClickToggleRowChild(id));
+function onClickToggleIcon(row: Row) {
+  emit("toggleRowVisibility", row);
 }
 
 function onClickCell(cell: unknown | string | number, row: Row, key: string | number) {
@@ -296,7 +262,7 @@ const { getDataTest } = useUI<Config>(defaultConfig);
         v-bind="attrs.bodySelectedDateDividerAttrs.value"
         :config="
           getMergedConfig({
-            defaultConfig: attrs.bodyDateDividerAttrs.value.config,
+            defaultConfig: attrs.bodySelectedDateDividerAttrs.value.config,
             globalConfig: dateDividerData.config,
           }) as UDividerConfig
         "
@@ -305,6 +271,7 @@ const { getDataTest } = useUI<Config>(defaultConfig);
   </tr>
 
   <tr
+    v-if="row.isShown || typeof row.isShown === 'undefined'"
     v-bind="{ ...$attrs, ...getRowAttrs(row) }"
     :class="cx([getRowAttrs(row).class, getRowClasses(row)])"
     @click="onClick(props.row)"
@@ -340,7 +307,7 @@ const { getDataTest } = useUI<Config>(defaultConfig);
       >
         <div
           :data-row-toggle-icon="row.id"
-          @click.stop="() => (onClickToggleIcon(), onToggleExpand(row))"
+          @click.stop="() => (onClickToggleIcon(row), onToggleExpand(row))"
         >
           <slot name="expand" :row="row" :expanded="isExpanded(row)">
             <div
@@ -403,89 +370,4 @@ const { getDataTest } = useUI<Config>(defaultConfig);
       </td>
     </tr>
   </template>
-
-  <UTableRow
-    v-if="isSingleNestedRow && singleNestedRow && singleNestedRow.isShown && !row.nestedData"
-    v-bind="{
-      ...$attrs,
-      ...getRowAttrs(singleNestedRow),
-    }"
-    :is-date-divider="isDateDivider"
-    :selected-within="selectedWithin"
-    :date-divider-data="dateDividerData"
-    :cols-count="colsCount"
-    :class="cx([getRowAttrs(singleNestedRow).class, getRowClasses(singleNestedRow)])"
-    :attrs="attrs"
-    :columns="columns"
-    :row="row.row as Row"
-    :data-test="getDataTest()"
-    :nested-level="nestedLevel + 1"
-    :config="config"
-    :selectable="selectable"
-    :empty-cell-label="emptyCellLabel"
-    @toggle-checkbox="onInputCheckbox"
-    @toggle-expand="onToggleExpand"
-    @toggle-row-visibility="onClickToggleRowChild"
-    @click="onClick"
-    @dblclick="onDoubleClick"
-  >
-    <template
-      v-for="(value, key, index) in mapRowColumns(singleNestedRow, columns)"
-      :key="index"
-      #[`cell-${key}`]="slotValues: RowScopedProps"
-    >
-      <slot :name="`cell-${key}`" :value="slotValues.value" :row="slotValues.row" :index="index" />
-    </template>
-
-    <template #expand="slotValues: RowScopedExpandProps">
-      <slot name="expand" :row="slotValues.row" :expanded="slotValues.expanded" />
-    </template>
-  </UTableRow>
-
-  <template v-if="!isSingleNestedRow && nestedRows.length && !row.nestedData">
-    <template v-for="nestedRow in nestedRows" :key="nestedRow.id">
-      <UTableRow
-        v-if="nestedRow.isShown"
-        v-bind="{
-          ...$attrs,
-          ...getRowAttrs(nestedRow),
-        }"
-        :class="cx([getRowAttrs(nestedRow).class, getRowClasses(nestedRow)])"
-        :attrs="attrs"
-        :is-date-divider="isDateDivider"
-        :selected-within="selectedWithin"
-        :date-divider-data="dateDividerData"
-        :cols-count="colsCount"
-        :columns="columns"
-        :row="nestedRow"
-        :data-test="getDataTest()"
-        :nested-level="nestedLevel + 1"
-        :config="config"
-        :selectable="selectable"
-        :empty-cell-label="emptyCellLabel"
-        @toggle-expand="onToggleExpand"
-        @toggle-row-visibility="onClickToggleRowChild"
-        @click="onClick"
-        @dblclick="onDoubleClick"
-        @click-cell="onClickCell"
-        @toggle-checkbox="onInputCheckbox"
-      >
-        <template
-          v-for="(value, key, index) in mapRowColumns(nestedRow, columns)"
-          :key="index"
-          #[`cell-${key}`]="slotValues: RowScopedProps"
-        >
-          <slot
-            :name="`cell-${key}`"
-            :value="slotValues.value"
-            :row="slotValues.row"
-            :index="index"
-          />
-        </template>
-        <template #expand="slotValues: RowScopedExpandProps">
-          <slot name="expand" :row="slotValues.row" :expanded="slotValues.expanded" />
-        </template>
-      </UTableRow>
-    </template>
-  </template>
 </template>

package/ui.data-table/types.ts

@@ -38,6 +38,11 @@ export interface Row {
   [key: string]: Cell | RowKeys;
 }
 
+export interface FlatRow extends Row {
+  parentId?: RowId;
+  nestedLeveL: number;
+}
+
 export interface ColumnObject {
   key: string;
   label?: string;
@@ -49,16 +54,6 @@ export interface ColumnObject {
 
 export type Column = ColumnObject | string;
 
-export interface RowScopedProps {
-  value: unknown | string | number;
-  row: Row;
-}
-
-export interface RowScopedExpandProps {
-  expanded: boolean;
-  row: Row;
-}
-
 export interface UTableProps {
   /**
    * Table columns (headers).
@@ -135,7 +130,7 @@ export interface UTableRowAttrs {
 }
 
 export interface UTableRowProps {
-  row: Row;
+  row: FlatRow;
   columns: ColumnObject[];
   emptyCellLabel?: string;
   selectable: boolean;

package/ui.data-table/utilTable.ts

@@ -1,6 +1,6 @@
 import { getRandomId } from "../utils/helper.ts";
 
-import type { Column, ColumnObject, Row, RowData, RowId } from "./types.ts";
+import type { Column, ColumnObject, FlatRow, Row, RowData, RowId } from "./types.ts";
 
 export function normalizeColumns(columns: Column[]): ColumnObject[] {
   return columns.map((column) =>
@@ -50,8 +50,6 @@ export function toggleRowVisibility(row: Row, targetRowId: string | number) {
   if (row.id === targetRowId) {
     if (row.hasOwnProperty("isShown")) {
       row.isShown = !row.isShown;
-    } else if (row.nestedData && row.nestedData.hasOwnProperty("isShown")) {
-      row.nestedData.isShown = !row.nestedData.isShown;
     }
 
     return row;
@@ -87,21 +85,27 @@ export function switchRowCheck(row: Row, isChecked: boolean) {
 }
 
 export function getFlatRows(tableRows: Row[]) {
-  const rows: Row[] = [];
+  const rows: FlatRow[] = [];
 
-  function addRow(row: Row) {
-    rows.push(row);
+  function addRow(row: Row, nestedLevel: number, parentId?: string | number) {
+    if (parentId) {
+      row.parentId = parentId;
+    }
+
+    row.nestedLevel = nestedLevel;
+
+    rows.push(row as FlatRow);
 
     if (row.row && !Array.isArray(row.row)) {
-      addRow(row.row);
+      addRow(row.row, nestedLevel + 1, row.id);
     }
 
     if (row.row && Array.isArray(row.row)) {
-      row.row.forEach(addRow);
+      row.row.forEach((nestedRow) => addRow(nestedRow, nestedLevel + 1, row.id));
     }
   }
 
-  tableRows.forEach((row) => addRow(row));
+  tableRows.forEach((row) => addRow(row, 0));
 
   return rows;
 }