vueless 0.0.683 → 0.0.685

package/package.json

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

package/ui.data-table/UTable.vue

@@ -406,6 +406,20 @@ 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,
+  );
+
+  if (prevRow) {
+    return isPrevRowSelected && isRowsSelected;
+  }
+
+  return isRowsSelected;
+}
+
 defineExpose({
   /**
    * Allows to clear selected rows.
@@ -438,6 +452,7 @@ const {
   bodyRowBeforeCellAttrs,
   footerAttrs,
   bodyRowDateDividerAttrs,
+  bodyRowCheckedDateDividerAttrs,
   headerCellBaseAttrs,
   headerCellCheckboxAttrs,
   headerActionsCheckboxAttrs,
@@ -446,6 +461,7 @@ const {
   headerCounterAttrs,
   bodyEmptyStateAttrs,
   bodyDateDividerAttrs,
+  bodySelectedDateDividerAttrs,
   bodyCellDateDividerAttrs,
   headerActionsCounterAttrs,
   stickyHeaderCounterAttrs,
@@ -666,7 +682,10 @@ const {
               </td>
             </tr>
 
-            <tr v-if="isShownDateDivider(rowIndex) && row.rowDate" v-bind="bodyRowDateDividerAttrs">
+            <tr
+              v-if="isShownDateDivider(rowIndex) && !isRowSelectedWithin(rowIndex) && row.rowDate"
+              v-bind="bodyRowDateDividerAttrs"
+            >
               <td v-bind="bodyCellDateDividerAttrs" :colspan="colsCount">
                 <UDivider
                   size="xs"
@@ -676,6 +695,19 @@ const {
               </td>
             </tr>
 
+            <tr
+              v-if="isShownDateDivider(rowIndex) && isRowSelectedWithin(rowIndex) && row.rowDate"
+              v-bind="bodyRowCheckedDateDividerAttrs"
+            >
+              <td v-bind="bodyCellDateDividerAttrs" :colspan="colsCount">
+                <UDivider
+                  size="xs"
+                  :label="getDateDividerLabel(row.rowDate)"
+                  v-bind="bodySelectedDateDividerAttrs"
+                />
+              </td>
+            </tr>
+
             <UTableRow
               v-model:selected-rows="selectedRows"
               :selectable="selectable"

package/ui.data-table/config.ts

@@ -50,6 +50,7 @@ export default /*tw*/ {
   bodyRowBeforeCell: "{>bodyCellBase} py-1",
   bodyRowAfter: "!p-0",
   bodyRowDateDivider: "",
+  bodyRowCheckedDateDivider: "{>bodyRowChecked} {>bodyRowChecked}",
   bodyCellBase: {
     base: "p-4 truncate align-top",
     variants: {
@@ -78,6 +79,10 @@ export default /*tw*/ {
     base: "{UDivider}",
     label: "py-0",
   },
+  bodySelectedDateDivider: {
+    base: "{>bodyDateDivider}",
+    label: "bg-gray-200 transition",
+  },
   bodyEmptyState: "{UEmpty} my-8",
   footer: {
     base: "group/footer border-t border-solid border-gray-200",

package/ui.form-date-picker-range/UDatePickerRangePeriodMenu.vue

@@ -261,7 +261,10 @@ function getDatePeriodState(date: DatePeriodRange) {
     </div>
 
     <div v-if="isDatePeriodOutOfRange" v-bind="attrs.periodDateListAttrs.value">
-      <template v-for="date in periodDateList" :key="date.title">
+      <template
+        v-for="date in periodDateList"
+        :key="date.title + date.startRange.toISOString() + date.endRange.toISOString()"
+      >
         <UButton
           v-if="getDatePeriodState(date).isSelected && getDatePeriodState(date).isCurrentDate"
           filled