vueless 0.0.800 → 0.0.802

package/ui.container-row/storybook/stories.ts

@@ -15,7 +15,7 @@ import type { Props } from "../types.ts";
 
 interface URowArgs extends Props {
   slotTemplate?: string;
-  enum: "gap" | "align";
+  enum: "gap" | "align" | "justify" | "content";
 }
 
 export default {
@@ -33,7 +33,7 @@ export default {
 } as Meta;
 
 const defaultTemplate = `
-  <UInput label="Name" />
+  <UInput label="Name" placeholder="Please enter your name..." />
   <UButton label="Submit" size="xs" block />
 `;
 
@@ -69,14 +69,16 @@ const EnumVariantTemplate: StoryFn<URowArgs> = (args: URowArgs, { argTypes }) =>
         v-bind="args"
         :[args.enum]="option"
         :key="index"
+        class="border border-brand-500 rounded p-2"
+        :class="{ 'h-24': args.enum === 'align' }"
       >
         <template v-if="isGapEnum">
           <UInput :label="option" />
           <UInput :label="option" />
         </template>
         <template v-else>
-          <UButton :label="option" size="xs" block />
-          <UInput label="Name" />
+          <UButton :label="args.enum" />
+          <UButton :label="option" />
         </template>
       </URow>
     </UCol>
@@ -86,56 +88,87 @@ const EnumVariantTemplate: StoryFn<URowArgs> = (args: URowArgs, { argTypes }) =>
 export const Default = DefaultTemplate.bind({});
 Default.args = {};
 
+export const Reverse = DefaultTemplate.bind({});
+Reverse.args = { reverse: true };
+Reverse.parameters = {
+  docs: {
+    description: {
+      story: "Reverse nested items order.",
+    },
+  },
+};
+
 export const Gap = EnumVariantTemplate.bind({});
-Gap.args = { enum: "gap" };
+Gap.args = { enum: "gap", config: { wrapper: "border-none" } };
+Gap.parameters = {
+  docs: {
+    description: {
+      story: "The distance between nested elements.",
+    },
+  },
+};
 
 export const Align = EnumVariantTemplate.bind({});
 Align.args = { enum: "align" };
+Align.parameters = {
+  docs: {
+    description: {
+      story: "Items vertical align (align-items).",
+    },
+  },
+};
+
+export const Justify = EnumVariantTemplate.bind({});
+Justify.args = { enum: "justify" };
+Justify.parameters = {
+  docs: {
+    description: {
+      story: "Items horizontal align (justify-content).",
+    },
+  },
+};
 
 export const NoMobile = DefaultTemplate.bind({});
 NoMobile.args = {
   noMobile: true,
   slotTemplate: `
-    <UInput label="Name" />
-    <UInput label="Lastname" />
+    <UInput label="First Name" />
+    <UInput label="Last Name" />
   `,
 };
-
-export const NestedRows = DefaultTemplate.bind({});
-NestedRows.args = {
-  slotTemplate: `
-    <UInput label="Name" />
-
-    <URow>
-      <UInput label="Lastname" />
-      <UInput label="Age"/>
-    </URow>
-  `,
+NoMobile.parameters = {
+  docs: {
+    description: {
+      story: "Disables mobile adaptivity.",
+    },
+  },
 };
 
-export const TextBlocksExample = DefaultTemplate.bind({});
-TextBlocksExample.args = {
+export const SlotDefault = DefaultTemplate.bind({});
+SlotDefault.args = {
   slotTemplate: `
-    <p>
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit,
-      sed do eiusmod tempor incididunt ut labore et dolore magna
-      aliqua. Ut enim ad minim veniam, quis nostrud exercitation
-      ullamco laboris nisi ut aliquip ex ea commodo consequat.
-      Duis aute irure dolor in reprehenderit in voluptate velit
-      esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
-      occaecat cupidatat non proident, sunt in culpa qui officia
-      deserunt mollit anim id est laborum.
-    </p>
-
-    <p>
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit,
-      sed do eiusmod tempor incididunt ut labore et dolore magna
-      aliqua. Ut enim ad minim veniam, quis nostrud exercitation
-      ullamco laboris nisi ut aliquip ex ea commodo consequat.
-      Duis aute irure dolor in reprehenderit in voluptate velit
-      esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
-      occaecat cupidatat non proident, sunt in culpa qui officia
-      deserunt mollit anim id est laborum.
-    </p>
+    <template #default>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+        sed do eiusmod tempor incididunt ut labore et dolore magna
+        aliqua. Ut enim ad minim veniam, quis nostrud exercitation
+        ullamco laboris nisi ut aliquip ex ea commodo consequat.
+        Duis aute irure dolor in reprehenderit in voluptate velit
+        esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
+        occaecat cupidatat non proident, sunt in culpa qui officia
+        deserunt mollit anim id est laborum.
+      </p>
+
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+        sed do eiusmod tempor incididunt ut labore et dolore magna
+        aliqua. Ut enim ad minim veniam, quis nostrud exercitation
+        ullamco laboris nisi ut aliquip ex ea commodo consequat.
+        Duis aute irure dolor in reprehenderit in voluptate velit
+        esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
+        occaecat cupidatat non proident, sunt in culpa qui officia
+        deserunt mollit anim id est laborum.
+      </p>
+    </template>
   `,
 };

package/ui.container-row/types.ts

@@ -30,7 +30,7 @@ export interface Props {
     | "baseline";
 
   /**
-   * Items horizontally align (justify-content).
+   * Items horizontal align (justify-content).
    */
   justify?: "start" | "end" | "center" | "around" | "evenly" | "between";
 

package/ui.data-table/config.ts

@@ -49,7 +49,7 @@ export default /*tw*/ {
   bodyRowBeforeChecked: "{>bodyRowChecked} !p-0",
   bodyRowBeforeCell: "{>bodyCellBase} py-1",
   bodyRowAfter: "!p-0",
-  bodyRowDateDivider: "",
+  bodyRowDateDivider: "first:hidden",
   bodyRowCheckedDateDivider: "{>bodyRowChecked} {>bodyRowChecked}",
   bodyCellBase: {
     base: "p-4 truncate align-top",

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

@@ -64,16 +64,30 @@ export default {
   },
 } as Meta;
 
-function getDateDividerRow() {
-  return {
-    id: getRandomId(),
-    isChecked: false,
-    rowDate: new Date().toString(),
-    key_1: "Info",
-    key_2: "Statistics",
-    key_3: "Reports",
-    key_4: "Discounts",
-  };
+function getDateDividerRow(rowAmount: number) {
+  return Array(rowAmount)
+    .fill({})
+    .map((_, index) => {
+      let rowDate = new Date().toString();
+
+      if (index > Math.round(rowAmount / 2)) {
+        const date = new Date();
+
+        date.setFullYear(date.getFullYear() + 1);
+
+        rowDate = date.toDateString();
+      }
+
+      return {
+        id: getRandomId(),
+        isChecked: false,
+        rowDate,
+        key_1: "Info",
+        key_2: "Statistics",
+        key_3: "Reports",
+        key_4: "Discounts",
+      };
+    });
 }
 
 function getNestedRow() {
@@ -327,16 +341,17 @@ export const Compact = DefaultTemplate.bind({});
 Compact.args = { compact: true };
 
 export const DateDivider = DefaultTemplate.bind({});
-DateDivider.args = { dateDivider: true, row: getDateDividerRow };
+DateDivider.args = { dateDivider: true, rows: getDateDividerRow(10) };
 
 export const DateDividerCustomLabel = DefaultTemplate.bind({});
+
+const dateDividerCustomLabelRows = getDateDividerRow(10);
+
 DateDividerCustomLabel.args = {
-  rows: Array(10)
-    .fill({})
-    .map(() => getDateDividerRow()),
+  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" },
     },