Hidden first date divider and fixed stories

vuelessjs · Feb 20, 2025 · 8b98e67 · 8b98e67
1 parent b21b044
commit 8b98e67
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 5 deletions.
diff --git a/src/ui.data-table/config.ts b/src/ui.data-table/config.ts
@@ -49,7 +49,7 @@ export default /*tw*/ {
   bodyRowBeforeChecked: "{>bodyRowChecked} !p-0",
   bodyRowBeforeCell: "{>bodyCellBase} py-1",
   bodyRowAfter: "!p-0",
-  bodyRowDateDivider: "group/row-divider",
+  bodyRowDateDivider: "first:hidden",
   bodyRowCheckedDateDivider: "{>bodyRowChecked} {>bodyRowChecked}",
   bodyCellBase: {
     base: "p-4 truncate align-top",
@@ -76,7 +76,7 @@ export default /*tw*/ {
   },
   bodyCheckbox: "{UCheckbox}",
   bodyDateDivider: {
-    base: "{UDivider} group-first/row-divider:mt-2",
+    base: "{UDivider}",
     label: "py-0",
   },
   bodySelectedDateDivider: {

diff --git a/src/ui.data-table/storybook/stories.ts b/src/ui.data-table/storybook/stories.ts
@@ -65,7 +65,7 @@ export default {
 } as Meta;
 
 function getDateDividerRow(rowAmount: number) {
-  return Array(10)
+  return Array(rowAmount)
     .fill({})
     .map((_, index) => {
       let rowDate = new Date().toString();
@@ -344,11 +344,14 @@ export const DateDivider = DefaultTemplate.bind({});
 DateDivider.args = { dateDivider: true, rows: getDateDividerRow(10) };
 
 export const DateDividerCustomLabel = DefaultTemplate.bind({});
+
+const dateDividerCustomLabelRows = getDateDividerRow(10);
+
 DateDividerCustomLabel.args = {
-  rows: getDateDividerRow(10),
+  rows: dateDividerCustomLabelRows,
   dateDivider: [
     {
-      date: new Date().toString(),
+      date: dateDividerCustomLabelRows.at(6)!.rowDate,
       label: "Custom label for specific date",
       config: { label: "!text-orange-400", divider: "!border-orange-300" },
     },