vueless 0.0.812 → 0.0.813

package/package.json

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

package/ui.data-table/UTable.vue

@@ -13,13 +13,12 @@ import {
 import { merge, isEqual } from "lodash-es";
 
 import UEmpty from "../ui.text-empty/UEmpty.vue";
-import UDivider from "../ui.container-divider/UDivider.vue";
 import UCheckbox from "../ui.form-checkbox/UCheckbox.vue";
 import ULoaderProgress from "../ui.loader-progress/ULoaderProgress.vue";
 import UTableRow from "./UTableRow.vue";
 
 import useUI from "../composables/useUI.ts";
-import { getDefaults, cx, getMergedConfig } from "../utils/ui.ts";
+import { getDefaults, cx } from "../utils/ui.ts";
 import { hasSlotContent } from "../utils/helper.ts";
 import { useLocale } from "../composables/useLocale.ts";
 import { PX_IN_REM } from "../constants.js";
@@ -38,7 +37,6 @@ import {
 import { COMPONENT_NAME } from "./constants.ts";
 
 import type { Ref, ComputedRef } from "vue";
-import type { Config as UDividerConfig } from "../ui.container-divider/types.ts";
 import type {
   Cell,
   Row,
@@ -103,7 +101,6 @@ const selectAll = ref(false);
 const canSelectAll = ref(true);
 const selectedRows: Ref<RowId[]> = ref([]);
 const tableRows: Ref<Row[]> = ref([]);
-const firstRow = ref(0);
 const tableWidth = ref(0);
 const tableHeight = ref(0);
 const pagePositionY = ref(0);
@@ -166,10 +163,6 @@ const colsCount = computed(() => {
   return normalizedColumns.value.length + 1;
 });
 
-const lastRow = computed(() => {
-  return props.rows.length - 1;
-});
-
 const isShownActionsHeader = computed(
   () => hasSlotContent(slots["header-actions"]) && Boolean(selectedRows.value.length),
 );
@@ -195,7 +188,7 @@ const isCheckedMoreOneTableItems = computed(() => {
 
 const tableRowWidthStyle = computed(() => ({ width: `${tableWidth.value / PX_IN_REM}rem` }));
 
-const flatTableRows = computed(() => getFlatRows(tableRows.value));
+const flatTableRows = computed(() => getFlatRows(props.rows));
 
 const isSelectedAllRows = computed(() => {
   return selectedRows.value.length === flatTableRows.value.length;
@@ -212,6 +205,11 @@ const tableRowAttrs = computed(() => ({
   bodyCellNestedExpandIconWrapperAttrs,
   bodyRowCheckedAttrs,
   bodyRowAttrs,
+  bodyDateDividerAttrs,
+  bodySelectedDateDividerAttrs,
+  bodyCellDateDividerAttrs,
+  bodyRowDateDividerAttrs,
+  bodyRowCheckedDateDividerAttrs,
 }));
 
 watch(selectAll, onChangeSelectAll, { deep: true });
@@ -265,7 +263,14 @@ function onWindowResize() {
   setFooterCellWidth();
 }
 
-function getDateDividerData(rowDate: string | Date) {
+function getDateDividerData(rowDate: string | Date | undefined) {
+  if (!rowDate) {
+    return {
+      label: "",
+      config: {},
+    };
+  }
+
   let dividerItem = {} as DateDivider;
 
   if (Array.isArray(props.dateDivider)) {
@@ -333,7 +338,9 @@ function synchronizeTableItemsWithProps() {
 }
 
 function updateSelectedRows() {
-  const newSelectedRows = tableRows.value.filter((row) => row.isChecked).map((row) => row.id);
+  const newSelectedRows = getFlatRows(tableRows.value)
+    .filter((row) => row.isChecked)
+    .map((row) => row.id);
   const isNewRowsSelected = newSelectedRows.every((newRow) => selectedRows.value.includes(newRow));
   const isSelectedSameRows = selectedRows.value.every((selectedRow) =>
     newSelectedRows.includes(selectedRow),
@@ -363,7 +370,7 @@ function isShownDateDivider(rowIndex: number) {
 
   const isPrevSameDate = prevItem?.rowDate === currentItem?.rowDate;
 
-  return !isPrevSameDate && props.dateDivider;
+  return Boolean(!isPrevSameDate && props.dateDivider);
 }
 
 function onClickRow(row: Row) {
@@ -422,16 +429,19 @@ function onToggleExpand(row: Row, expanded: boolean) {
 
 function isRowSelectedWithin(rowIndex: number) {
   const prevRow = sortedRows.value[rowIndex - 1];
-  const isPrevRowSelected = prevRow && selectedRows.value.find((rowId) => rowId === prevRow.id);
-  const isRowsSelected = selectedRows.value.find(
-    (rowId) => rowId === sortedRows.value[rowIndex].id,
-  );
+  const targetRow = sortedRows.value[rowIndex];
 
   if (prevRow) {
-    return isPrevRowSelected && isRowsSelected;
+    return Boolean(prevRow.isChecked && targetRow.isChecked);
   }
 
-  return isRowsSelected;
+  return Boolean(targetRow.isChecked);
+}
+
+function onToggleRowCheckbox(rowId: RowId) {
+  const targetIndex = selectedRows.value.findIndex((selectedId) => selectedId === rowId);
+
+  ~targetIndex ? selectedRows.value.splice(targetIndex, 1) : selectedRows.value.push(rowId);
 }
 
 defineExpose({
@@ -468,6 +478,9 @@ const {
   footerAttrs,
   bodyRowDateDividerAttrs,
   bodyRowCheckedDateDividerAttrs,
+  bodyDateDividerAttrs,
+  bodySelectedDateDividerAttrs,
+  bodyCellDateDividerAttrs,
   headerCellBaseAttrs,
   headerCellCheckboxAttrs,
   headerActionsCheckboxAttrs,
@@ -476,9 +489,6 @@ const {
   headerCounterAttrs,
   bodyEmptyStateAttrs,
   bodyEmptyStateCellAttrs,
-  bodyDateDividerAttrs,
-  bodySelectedDateDividerAttrs,
-  bodyCellDateDividerAttrs,
   headerActionsCounterAttrs,
   stickyHeaderCounterAttrs,
   stickyHeaderLoaderAttrs,
@@ -671,125 +681,93 @@ const {
           <ULoaderProgress :loading="loading" v-bind="headerLoaderAttrs" />
         </thead>
 
-        <tbody v-if="tableRows.length" v-bind="bodyAttrs">
-          <template v-for="(row, rowIndex) in sortedRows" :key="row.id">
-            <tr
-              v-if="rowIndex === firstRow && hasSlotContent($slots['before-first-row'])"
-              v-bind="tableRows[0]?.isChecked ? bodyRowBeforeCheckedAttrs : bodyRowBeforeAttrs"
-            >
-              <td :colspan="colsCount" v-bind="bodyRowBeforeCellAttrs">
-                <!-- @slot Use it to add something before first row. -->
-                <slot name="before-first-row" />
-              </td>
-            </tr>
-
-            <tr
-              v-if="isShownDateDivider(rowIndex) && !isRowSelectedWithin(rowIndex) && row.rowDate"
-              v-bind="bodyRowDateDividerAttrs"
-            >
-              <td v-bind="bodyCellDateDividerAttrs" :colspan="colsCount">
-                <UDivider
-                  size="xs"
-                  :label="getDateDividerData(row.rowDate).label"
-                  v-bind="bodyDateDividerAttrs"
-                  :config="
-                    getMergedConfig({
-                      defaultConfig: bodyDateDividerAttrs.config,
-                      globalConfig: getDateDividerData(row.rowDate).config,
-                    }) as UDividerConfig
-                  "
-                />
-              </td>
-            </tr>
+        <tbody v-if="sortedRows.length" v-bind="bodyAttrs">
+          <tr
+            v-if="hasSlotContent($slots['before-first-row'])"
+            v-bind="sortedRows[0]?.isChecked ? bodyRowBeforeCheckedAttrs : bodyRowBeforeAttrs"
+          >
+            <td :colspan="colsCount" v-bind="bodyRowBeforeCellAttrs">
+              <!-- @slot Use it to add something before first row. -->
+              <slot name="before-first-row" />
+            </td>
+          </tr>
 
-            <tr
-              v-if="isShownDateDivider(rowIndex) && isRowSelectedWithin(rowIndex) && row.rowDate"
-              v-bind="bodyRowCheckedDateDividerAttrs"
-            >
-              <td v-bind="bodyCellDateDividerAttrs" :colspan="colsCount">
-                <UDivider
-                  size="xs"
-                  :label="getDateDividerData(row.rowDate).label"
-                  v-bind="bodySelectedDateDividerAttrs"
-                  :config="
-                    getMergedConfig({
-                      defaultConfig: bodyDateDividerAttrs.config,
-                      globalConfig: getDateDividerData(row.rowDate).config,
-                    }) as UDividerConfig
-                  "
-                />
-              </td>
-            </tr>
-
-            <UTableRow
-              v-model:selected-rows="selectedRows"
-              :selectable="selectable"
-              :row="row"
-              :columns="normalizedColumns"
-              :config="config"
-              :attrs="tableRowAttrs as unknown as UTableRowAttrs"
-              :nested-level="0"
-              :empty-cell-label="emptyCellLabel"
-              :data-test="getDataTest('row')"
-              @click="onClickRow"
-              @dblclick="onDoubleClickRow"
-              @click-cell="onClickCell"
-              @toggle-expand="onToggleExpand"
-              @toggle-row-visibility="onToggleRowVisibility"
+          <UTableRow
+            v-for="(row, rowIndex) in sortedRows"
+            :key="row.id"
+            v-memo="[selectedRows.includes(row.id), isRowSelectedWithin(rowIndex)]"
+            :selectable="selectable"
+            :row="row"
+            :is-date-divider="isShownDateDivider(rowIndex)"
+            :columns="normalizedColumns"
+            :config="config"
+            :selected-within="isRowSelectedWithin(rowIndex)"
+            :date-divider-data="getDateDividerData(row.rowDate)"
+            :attrs="tableRowAttrs as unknown as UTableRowAttrs"
+            :cols-count="colsCount"
+            :nested-level="0"
+            :empty-cell-label="emptyCellLabel"
+            :data-test="getDataTest('row')"
+            @click="onClickRow"
+            @dblclick="onDoubleClickRow"
+            @click-cell="onClickCell"
+            @toggle-expand="onToggleExpand"
+            @toggle-row-visibility="onToggleRowVisibility"
+            @toggle-checkbox="onToggleRowCheckbox"
+          >
+            <template
+              v-for="(value, key, index) in mapRowColumns(row, normalizedColumns)"
+              :key="index"
+              #[`cell-${key}`]="slotValues"
             >
-              <template
-                v-for="(value, key, index) in mapRowColumns(row, normalizedColumns)"
-                :key="index"
-                #[`cell-${key}`]="slotValues"
-              >
-                <!--
+              <!--
                   @slot Use it to customize needed table cell.
                   @binding {string} value
                   @binding {object} row
                   @binding {number} index
+                  @binding {number} cellIndex
                 -->
-                <slot
-                  :name="`cell-${key}`"
-                  :value="slotValues.value"
-                  :row="slotValues.row"
-                  :index="index"
-                />
-              </template>
+              <slot
+                :name="`cell-${key}`"
+                :value="slotValues.value"
+                :row="slotValues.row"
+                :index="rowIndex"
+                :cell-index="index"
+              />
+            </template>
 
-              <template #expand="{ row: expandedRow, expanded }">
-                <!--
+            <template #expand="{ row: expandedRow, expanded }">
+              <!--
                   @slot Use it to customize row expand icon.
                   @binding {object} row
                   @binding {boolean} expanded
+                  @binding {number} index
                 -->
-                <slot name="expand" :row="expandedRow" :expanded="expanded" />
-              </template>
+              <slot name="expand" :index="rowIndex" :row="expandedRow" :expanded="expanded" />
+            </template>
 
-              <template #nested-content>
-                <!--
+            <template #nested-content>
+              <!--
                   @slot Use it to add nested content inside a row.
                   @binding {object} row
+                  @binding {number} index
                 -->
-                <slot v-if="row" name="nested-content" :row="row" />
-              </template>
-            </UTableRow>
+              <slot v-if="row" name="nested-content" :index="rowIndex" :row="row" />
+            </template>
+          </UTableRow>
 
-            <tr
-              v-if="rowIndex === lastRow && hasSlotContent($slots['after-last-row'])"
-              v-bind="bodyRowAfterAttrs"
-            >
-              <!--
+          <tr v-if="hasSlotContent($slots['after-last-row'])" v-bind="bodyRowAfterAttrs">
+            <!--
                 @slot Use it to add something after last row.
                 @binding {number} cols-count
                 @classes {string} classes
               -->
-              <slot
-                name="after-last-row"
-                :cols-count="colsCount"
-                :classes="bodyCellBaseAttrs.class"
-              />
-            </tr>
-          </template>
+            <slot
+              name="after-last-row"
+              :cols-count="colsCount"
+              :classes="bodyCellBaseAttrs.class"
+            />
+          </tr>
         </tbody>
 
         <tbody v-else>

package/ui.data-table/UTableRow.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, onMounted, useSlots, useTemplateRef } from "vue";
-import { cx } from "../utils/ui.ts";
+import { cx, getMergedConfig } from "../utils/ui.ts";
 import { hasSlotContent } from "../utils/helper.ts";
 
 import { PX_IN_REM } from "../constants.js";
@@ -11,10 +11,13 @@ import useUI from "../composables/useUI.ts";
 
 import UIcon from "../ui.image-icon/UIcon.vue";
 import UCheckbox from "../ui.form-checkbox/UCheckbox.vue";
+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,
@@ -31,9 +34,14 @@ defineOptions({ internal: true });
 
 const props = defineProps<UTableRowProps>();
 
-const emit = defineEmits(["toggleRowVisibility", "click", "dblclick", "clickCell", "toggleExpand"]);
-
-const selectedRows = defineModel("selectedRows", { type: Array, default: () => [] });
+const emit = defineEmits([
+  "click",
+  "dblclick",
+  "clickCell",
+  "toggleExpand",
+  "toggleCheckbox",
+  "toggleRowVisibility",
+]);
 
 const cellRef = useTemplateRef<HTMLDivElement[]>("cell");
 const toggleWrapperRef = useTemplateRef<HTMLDivElement[]>("toggle-wrapper");
@@ -85,7 +93,10 @@ const isNestedRowEmpty = computed(() => {
 const isNestedDataEmpty = computed(() => {
   if (!props.row.nestedData) return true;
 
-  return !props.row.nestedData.rows || !props.row.nestedData.rows.length;
+  return (
+    !props.row.nestedData.rows ||
+    (Array.isArray(props.row.nestedData.rows) && !props.row.nestedData.rows.length)
+  );
 });
 
 const isShownToggleIcon = computed(() => {
@@ -239,23 +250,63 @@ function getRowClasses(row: Row) {
   return typeof rowClasses === "function" ? rowClasses(row) : rowClasses;
 }
 
-function getRowAttrs(rowId: string | number) {
-  return selectedRows.value.includes(rowId)
-    ? props.attrs.bodyRowCheckedAttrs.value
-    : props.attrs.bodyRowAttrs.value;
+function getRowAttrs(row: Row) {
+  return row.isChecked ? props.attrs.bodyRowCheckedAttrs.value : props.attrs.bodyRowAttrs.value;
 }
 
 function onToggleExpand(row: Row, expanded?: boolean) {
   emit("toggleExpand", row, expanded || isExpanded(row));
 }
 
+function onInputCheckbox(rowId: RowId) {
+  emit("toggleCheckbox", rowId);
+}
+
 const { getDataTest } = useUI<Config>(defaultConfig);
 </script>
 
 <template>
   <tr
-    v-bind="{ ...$attrs, ...getRowAttrs(row.id) }"
-    :class="cx([getRowAttrs(row.id).class, getRowClasses(row)])"
+    v-if="isDateDivider && !selectedWithin && row.rowDate"
+    v-bind="attrs.bodyRowDateDividerAttrs.value"
+  >
+    <td v-bind="attrs.bodyCellDateDividerAttrs.value" :colspan="colsCount">
+      <UDivider
+        size="xs"
+        :label="dateDividerData.label"
+        v-bind="attrs.bodyDateDividerAttrs.value"
+        :config="
+          getMergedConfig({
+            defaultConfig: attrs.bodyDateDividerAttrs.value.config,
+            globalConfig: dateDividerData.config,
+          }) as UDividerConfig
+        "
+      />
+    </td>
+  </tr>
+
+  <tr
+    v-if="isDateDivider && selectedWithin && row.rowDate"
+    v-bind="attrs.bodyRowCheckedDateDividerAttrs.value"
+  >
+    <td v-bind="attrs.bodyCellDateDividerAttrs.value" :colspan="colsCount">
+      <UDivider
+        size="xs"
+        :label="dateDividerData.label"
+        v-bind="attrs.bodySelectedDateDividerAttrs.value"
+        :config="
+          getMergedConfig({
+            defaultConfig: attrs.bodyDateDividerAttrs.value.config,
+            globalConfig: dateDividerData.config,
+          }) as UDividerConfig
+        "
+      />
+    </td>
+  </tr>
+
+  <tr
+    v-bind="{ ...$attrs, ...getRowAttrs(row) }"
+    :class="cx([getRowAttrs(row).class, getRowClasses(row)])"
     @click="onClick(props.row)"
     @dblclick="onDoubleClick(props.row)"
   >
@@ -266,12 +317,12 @@ const { getDataTest } = useUI<Config>(defaultConfig);
       @click.stop
     >
       <UCheckbox
-        v-model="selectedRows"
+        :model-value="row.isChecked"
         size="md"
-        :value="row.id"
         v-bind="attrs.bodyCheckboxAttrs.value"
         :data-id="row.id"
         :data-test="getDataTest('body-checkbox')"
+        @input="onInputCheckbox(row.id)"
       />
     </td>
 
@@ -357,10 +408,13 @@ const { getDataTest } = useUI<Config>(defaultConfig);
     v-if="isSingleNestedRow && singleNestedRow && singleNestedRow.isShown && !row.nestedData"
     v-bind="{
       ...$attrs,
-      ...getRowAttrs(singleNestedRow.id),
+      ...getRowAttrs(singleNestedRow),
     }"
-    v-model:selected-rows="selectedRows"
-    :class="cx([getRowAttrs(singleNestedRow.id).class, getRowClasses(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"
@@ -369,6 +423,7 @@ const { getDataTest } = useUI<Config>(defaultConfig);
     :config="config"
     :selectable="selectable"
     :empty-cell-label="emptyCellLabel"
+    @toggle-checkbox="onInputCheckbox"
     @toggle-expand="onToggleExpand"
     @toggle-row-visibility="onClickToggleRowChild"
     @click="onClick"
@@ -393,11 +448,14 @@ const { getDataTest } = useUI<Config>(defaultConfig);
         v-if="nestedRow.isShown"
         v-bind="{
           ...$attrs,
-          ...getRowAttrs(nestedRow.id),
+          ...getRowAttrs(nestedRow),
         }"
-        v-model:selected-rows="selectedRows"
-        :class="cx([getRowAttrs(nestedRow.id).class, getRowClasses(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()"
@@ -410,6 +468,7 @@ const { getDataTest } = useUI<Config>(defaultConfig);
         @click="onClick"
         @dblclick="onDoubleClick"
         @click-cell="onClickCell"
+        @toggle-checkbox="onInputCheckbox"
       >
         <template
           v-for="(value, key, index) in mapRowColumns(nestedRow, columns)"

package/ui.data-table/types.ts

@@ -127,6 +127,11 @@ export interface UTableRowAttrs {
   bodyCellNestedExpandIconWrapperAttrs: Ref<UnknownObject>;
   bodyRowCheckedAttrs: Ref<UnknownObject>;
   bodyRowAttrs: Ref<UnknownObject>;
+  bodyDateDividerAttrs: Ref<UnknownObject>;
+  bodySelectedDateDividerAttrs: Ref<UnknownObject>;
+  bodyCellDateDividerAttrs: Ref<UnknownObject>;
+  bodyRowDateDividerAttrs: Ref<UnknownObject>;
+  bodyRowCheckedDateDividerAttrs: Ref<UnknownObject>;
 }
 
 export interface UTableRowProps {
@@ -137,5 +142,9 @@ export interface UTableRowProps {
   nestedLevel: number;
   dataTest: string | null;
   attrs: UTableRowAttrs;
+  isDateDivider: boolean;
+  selectedWithin: boolean;
+  dateDividerData: DateDivider;
+  colsCount: number;
   config: Config;
 }

package/ui.data-table/utilTable.ts

@@ -23,6 +23,10 @@ export function syncRowCheck(row: Row, selectedRows: RowId[]) {
     row.row = syncRowCheck(row.row, selectedRows);
   }
 
+  if (row.row && Array.isArray(row.row)) {
+    row.row = row.row.map((nestedRow) => syncRowCheck(nestedRow, selectedRows));
+  }
+
   return row;
 }