vueless 0.0.415 → 0.0.416

package/package.json

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

package/ui.data-table/UTable.vue

@@ -11,7 +11,6 @@
           <UCheckbox
             v-if="selectable"
             v-model="selectAll"
-            size="sm"
             :partial="!isSelectedAllRows"
             :data-test="`${dataTest}-select-all`"
             v-bind="stickyHeaderActionsCheckboxAttrs"
@@ -36,7 +35,6 @@
           <UCheckbox
             v-if="selectable"
             v-model="selectAll"
-            size="sm"
             :partial="!isSelectedAllRows"
             :data-test="`${dataTest}-select-all`"
             v-bind="stickyHeaderCheckboxAttrs"
@@ -107,7 +105,6 @@
             <th v-if="selectable" v-bind="headerCellCheckboxAttrs">
               <UCheckbox
                 v-model="selectAll"
-                size="sm"
                 :partial="!isSelectedAllRows"
                 :data-test="`${dataTest}-select-all`"
                 v-bind="headerCheckboxAttrs"
@@ -165,19 +162,12 @@
               </td>
             </tr>
 
-            <tr
-              v-if="isShownDateSeparator(rowIndex) && row.date"
-              v-bind="
-                shouldDisplayDateSeparator(rowIndex)
-                  ? bodyRowDateSeparatorCheckedAttrs
-                  : bodyRowDateSeparatorAttrs
-              "
-            >
-              <td v-bind="bodyCellDateSeparatorAttrs(rowIndex)" :colspan="colsCount">
+            <tr v-if="isShownDateDivider(rowIndex) && row.rowDate" v-bind="bodyRowDateDividerAttrs">
+              <td v-bind="bodyCellDateDividerAttrs" :colspan="colsCount">
                 <UDivider
                   size="xs"
-                  :label="getDateSeparatorLabel(row.date.separatorDate)"
-                  v-bind="bodyDateSeparatorAttrs"
+                  :label="getDateDividerLabel(row.rowDate)"
+                  v-bind="bodyDateDividerAttrs"
                 />
               </td>
             </tr>
@@ -235,7 +225,7 @@
               <!-- @slot Use it to add custom empty state. -->
               <slot name="empty-state">
                 <UEmpty
-                  size="sm"
+                  size="md"
                   :description="currentLocale.noData"
                   :data-test="`${dataTest}-empty`"
                   v-bind="bodyEmptyStateAttrs"
@@ -525,8 +515,7 @@ const {
   bodyRowAttrs,
   bodyRowCheckedAttrs,
   footerAttrs,
-  bodyRowDateSeparatorAttrs,
-  bodyRowDateSeparatorCheckedAttrs,
+  bodyRowDateDividerAttrs,
   headerCellBaseAttrs,
   headerCellCheckboxAttrs,
   stickyHeaderActionsCheckboxAttrs,
@@ -534,8 +523,8 @@ const {
   headerCheckboxAttrs,
   headerCounterAttrs,
   bodyEmptyStateAttrs,
-  bodyDateSeparatorAttrs,
-  bodyCellDateSeparatorAttrs,
+  bodyDateDividerAttrs,
+  bodyCellDateDividerAttrs,
   stickyHeaderActionsCounterAttrs,
   stickyHeaderCounterAttrs,
   stickyHeaderLoaderAttrs,
@@ -595,18 +584,10 @@ function onWindowResize() {
   setFooterCellWidth();
 }
 
-function getDateSeparatorLabel(separatorDate) {
+function getDateDividerLabel(rowDate) {
   return Array.isArray(props.dateDivider)
-    ? props.dateDivider.find((dateItem) => dateItem.date === separatorDate)?.label || separatorDate
-    : separatorDate;
-}
-
-function shouldDisplayDateSeparator(rowIndex) {
-  const isPreviousRowChecked = tableRows.value[rowIndex - 1]?.isChecked;
-  const isCheckedRowAfter = tableRows.value[rowIndex]?.isChecked;
-  const isFirstRowAndNextChecked = rowIndex === 0 && isCheckedRowAfter;
-
-  return (isPreviousRowChecked && isCheckedRowAfter) || isFirstRowAndNextChecked;
+    ? props.dateDivider.find((dateItem) => dateItem.date === rowDate)?.label || rowDate
+    : rowDate;
 }
 
 function getRowAttrs(rowId) {
@@ -668,7 +649,7 @@ function onKeyupEsc(event) {
   }
 }
 
-function isShownDateSeparator(rowIndex) {
+function isShownDateDivider(rowIndex) {
   const prevIndex = rowIndex ? rowIndex - 1 : rowIndex;
   const nextIndex = rowIndex ? rowIndex + 1 : rowIndex;
   const prevItem = tableRows.value[prevIndex];
@@ -679,8 +660,8 @@ function isShownDateSeparator(rowIndex) {
     return hasSlotContentBeforeFirstRow.value;
   }
 
-  const isPrevSameDate = prevItem?.date?.primary === currentItem?.date?.primary;
-  const isNextSameDate = nextItem?.date?.primary === currentItem?.date?.primary;
+  const isPrevSameDate = prevItem?.rowDate === currentItem?.rowDate;
+  const isNextSameDate = nextItem?.rowDate === currentItem?.rowDate;
 
   return isPrevSameDate && !isNextSameDate && props.dateDivider;
 }
@@ -720,6 +701,7 @@ function clearSelectedItems() {
 }
 
 function onToggleRowVisibility(rowId) {
+  // TODO: Use map instead of forEach to get rid of implicit array mutation.
   tableRows.value.forEach((row) => toggleRowVisibility(row, rowId));
 }
 </script>

package/ui.data-table/UTableRow.vue

@@ -1,11 +1,15 @@
 <template>
   <tr v-bind="$attrs" @click="onClick(props.row)">
-    <td v-if="selectable" :style="getNestedCheckboxShift()" v-bind="bodyCellCheckboxAttrs">
+    <td
+      v-if="selectable"
+      :style="getNestedCheckboxShift()"
+      v-bind="bodyCellCheckboxAttrs"
+      @click.stop
+    >
       <UCheckbox
         v-model="selectedRows"
         :data-id="row.id"
         :value="row.id"
-        size="sm"
         :data-test="`${dataTest}-body-checkbox`"
         v-bind="bodyCheckboxAttrs"
       />

package/ui.data-table/config.js

@@ -22,7 +22,7 @@ export default /*tw*/ {
   header: "border-b border-gray-200",
   headerRow: "",
   headerCellBase: {
-    base: "p-4 first:p-5 text-sm font-normal text-gray-500 text-left text-nowrap",
+    base: "p-4 text-sm font-normal text-gray-500 text-left text-nowrap",
     variants: {
       compact: {
         true: "px-4 py-3 last:px-4 last:py-3 first:px-4 first:py-3",
@@ -32,7 +32,7 @@ export default /*tw*/ {
   headerCellCheckbox: "w-10",
   headerCheckbox: "{UCheckbox}",
   headerCounter: {
-    base: "absolute top-5 mt-px left-11 bg-gradient-to-r from-white from-80% ml-px",
+    base: "absolute top-4 mt-px left-11 bg-gradient-to-r from-white from-80% ml-px",
     variants: {
       compact: {
         true: "top-3",
@@ -47,9 +47,9 @@ export default /*tw*/ {
   bodyRowBeforeCell: "py-1",
   bodyRowAfter: "!p-0",
   bodyRowAfterCell: "py-1",
-  bodyRowDateSeparator: "",
+  bodyRowDateDivider: "",
   bodyCellBase: {
-    base: "p-[1.125rem] py-5 first:!p-5 truncate align-top last:p-5",
+    base: "p-[1.125rem] py-5 truncate align-top",
     variants: {
       compact: {
         true: "px-4 py-3 last:px-4 last:py-3 first:!px-3.5 first:py-3",
@@ -61,7 +61,7 @@ export default /*tw*/ {
   bodyCellSecondary: "mt-1 text-xs text-gray-500 overflow-hidden text-ellipsis",
   bodyCellSecondaryEmpty: "inline-block",
   bodyCellCheckbox: "first:px-4", // try to remove first
-  bodyCellDateSeparator: "",
+  bodyCellDateDivider: "",
   bodyCellNested: "mr-2 mt-0.5",
   bodyCellNestedExpandIcon: {
     component: "{UIcon}",
@@ -74,7 +74,7 @@ export default /*tw*/ {
     container: "bg-gray-200",
   },
   bodyCheckbox: "{UCheckbox}",
-  bodyDateSeparator: "{UDivider}",
+  bodyDateDivider: "{UDivider}",
   bodyEmptyState: "{UEmpty} my-8",
   footer: "group/footer border-t border-solid border-gray-200",
   footerRow: {

package/ui.data-table/storybook/Docs.mdx

@@ -1,4 +1,4 @@
-import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/blocks";
+import { Markdown, Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/blocks";
 import { getSource } from "../../utils/utilStorybook.js";
 
 import * as stories from "./stories.js";
@@ -12,5 +12,22 @@ import defaultConfig from "../config.js?raw"
 <Controls of={stories.Default} />
 <Stories of={stories} />
 
+## Formatting tokens
+Each character in the table below can be used in `dateFormat` and `userDateFormat` / `userDateTimeFormat` options to achieve the format you need.
+
+## Row meta keys
+Keys you have/may to provide to component in row object.
+
+<Markdown>
+{`
+|  Key name         | Description                    | Type           | Required     |
+| ------------------| ------------------------------ | ---------------| ------------ |
+| id                | A unique identifier for row    | String, Number | true         |
+| isChecked         | Indicates if row checked       | Boolean        | false        |
+| isHidden          | Indicated if nested row hidden | Boolean        | false        |
+| rowDate           | Row date for date divider      | String, Date   | false        |
+`}
+</Markdown>
+
 ## Default config
 <Source code={getSource(defaultConfig)} language="jsx" dark />

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

@@ -8,7 +8,7 @@ import UMoney from "../../ui.text-money/UMoney.vue";
 import UBadge from "../../ui.text-badge/UBadge.vue";
 import URow from "../../ui.container-row/URow.vue";
 
-const STICKY_PARAMETERS = {
+const SHORT_STORY_PARAMETERS = {
   docs: {
     story: {
       inline: false,
@@ -47,6 +47,18 @@ export default {
   },
 };
 
+function getDateDividerRow() {
+  return {
+    id: getRandomId(),
+    isChecked: false,
+    rowDate: new Date().toString(),
+    key_1: "Info",
+    key_2: "Statistics",
+    key_3: "Reports",
+    key_4: "Discounts",
+  };
+}
+
 function getNestedRow() {
   return {
     id: getRandomId(),
@@ -321,11 +333,11 @@ export const Selectable = DefaultTemplate.bind({});
 Selectable.args = { selectable: true };
 
 export const StickyHeader = DefaultTemplate.bind({});
-StickyHeader.parameters = STICKY_PARAMETERS;
+StickyHeader.parameters = SHORT_STORY_PARAMETERS;
 StickyHeader.args = { numberOfRows: 50, selectable: true, stickyHeader: true };
 
 export const StickyFooter = DefaultTemplate.bind({});
-StickyFooter.parameters = STICKY_PARAMETERS;
+StickyFooter.parameters = SHORT_STORY_PARAMETERS;
 StickyFooter.args = {
   numberOfRows: 50,
   selectable: true,
@@ -346,16 +358,12 @@ export const Compact = DefaultTemplate.bind({});
 Compact.args = { compact: true };
 
 export const DateDivider = DefaultTemplate.bind({});
-DateDivider.args = { dateDivider: true };
+DateDivider.args = { dateDivider: true, row: getDateDividerRow };
 
 export const DateDividerCustomLabel = DefaultTemplate.bind({});
 DateDividerCustomLabel.args = {
-  dateDivider: [
-    {
-      date: new Date(1709046013 * 1000).toString(),
-      label: "Label for this date",
-    },
-  ],
+  row: getDateDividerRow,
+  dateDivider: [{ date: new Date().toString(), label: "Custom label for specific date" }],
 };
 
 export const SlotDefault = DefaultTemplate.bind({});
@@ -368,6 +376,7 @@ SlotDefault.args = {
 };
 
 export const SlotHeaderActions = DefaultTemplate.bind({});
+SlotHeaderActions.parameters = SHORT_STORY_PARAMETERS;
 SlotHeaderActions.args = {
   numberOfRows: 50,
   stickyHeader: true,

package/web-types.json

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