vueless 1.4.7-beta.0 → 1.4.7-beta.2

package/icons/storybook/cloud_sync.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M167.48-156.41v-62.63h124.26q-64-48.72-100.14-109.22t-36.14-148.5q0-102.98 61.63-191.22T391.54-789.5v70.13q-71 24.57-119.36 91.21-48.35 66.64-48.35 151.4 0 62.95 26.9 114.94 26.9 51.99 87.47 91.28V-390h62.63v233.59H167.48Zm436.59 5.98q-52.14 0-88.82-36.62-36.68-36.61-36.68-88.92 0-49.41 33.59-85.6 33.6-36.19 82.56-39.39 17.95-36.24 52.29-58.36 34.34-22.11 77.07-22.11 54.94 0 94.85 34.85 39.92 34.86 47.68 85.62h2q42.48 1.44 71.84 32.28 29.35 30.83 29.35 71.79 0 44-30.78 75.23-30.79 31.23-74.95 31.23h-260ZM732.18-520q-11.01-50.28-37.33-91.45-26.32-41.18-69.81-78.01V-570h-62.87v-233.59h233.59v62.63H670.5q49 41.96 85.99 101.46Q793.48-580 801.54-520h-69.36ZM604.07-215.93h260q17 0 28.5-11.5t11.5-28.5q0-16.77-11.5-28.39-11.5-11.61-28.5-11.61h-50v-30q0-37.77-26-63.89-26-26.11-64-26.11-37.77 0-63.89 24.5-26.11 24.5-26.11 55.5h-30q-25 0-42.5 17.5t-17.5 42.5q0 25 17.5 42.5t42.5 17.5Zm120-100Z"/></svg>

package/icons/storybook/date_range.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M303.1-394.48q-17.93 0-30.02-12.2-12.1-12.2-12.1-30.05 0-17.86 12.13-30.07 12.12-12.22 30.05-12.22t30.02 12.25q12.1 12.25 12.1 30.16 0 17.73-12.12 29.93-12.13 12.2-30.06 12.2Zm179.87 0q-17.93 0-30.02-12.2-12.1-12.2-12.1-30.05 0-17.86 12.12-30.07 12.13-12.22 30.06-12.22t30.02 12.25q12.1 12.25 12.1 30.16 0 17.73-12.12 29.93-12.13 12.2-30.06 12.2Zm172.87 0q-17.93 0-30.02-12.2-12.1-12.2-12.1-30.05 0-17.86 12.12-30.07 12.13-12.22 30.06-12.22t30.02 12.25q12.1 12.25 12.1 30.16 0 17.73-12.13 29.93-12.12 12.2-30.05 12.2ZM182.15-74.02q-27.6 0-47.86-20.27-20.27-20.26-20.27-47.86v-615.7q0-27.7 20.27-48.03 20.26-20.34 47.86-20.34H245v-60h69.07v60h331.86v-60H715v60h62.85q27.7 0 48.03 20.34 20.34 20.33 20.34 48.03v615.7q0 27.6-20.34 47.86-20.33 20.27-48.03 20.27h-595.7Zm0-68.13h595.7V-570h-595.7v427.85Zm0-487.85h595.7v-127.85h-595.7V-630Zm0 0v-127.85V-630Z"/></svg>

package/icons/storybook/event.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M596.82-220Q556-220 528-248.18q-28-28.19-28-69Q500-358 528.18-386q28.19-28 69-28Q638-414 666-385.82q28 28.19 28 69Q694-276 665.82-248q-28.19 28-69 28ZM182.15-74.02q-27.6 0-47.86-20.27-20.27-20.26-20.27-47.86v-615.7q0-27.7 20.27-48.03 20.26-20.34 47.86-20.34H245v-60h69.07v60h331.86v-60H715v60h62.85q27.7 0 48.03 20.34 20.34 20.33 20.34 48.03v615.7q0 27.6-20.34 47.86-20.33 20.27-48.03 20.27h-595.7Zm0-68.13h595.7V-570h-595.7v427.85Zm0-487.85h595.7v-127.85h-595.7V-630Zm0 0v-127.85V-630Z"/></svg>

package/icons/storybook/folder.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M142.15-154.02q-27.6 0-47.86-20.77-20.27-20.76-20.27-47.36v-515.7q0-26.7 20.27-47.53 20.26-20.84 47.86-20.84h276.22L481-743.35h336.85q26.7 0 47.53 20.77 20.84 20.76 20.84 47.36v453.07q0 26.6-20.84 47.36-20.83 20.77-47.53 20.77h-675.7Zm0-68.13h675.7v-453.07h-365.2l-62.63-62.63H142.15v515.7Zm0 0v-515.7 515.7Z"/></svg>

package/icons/storybook/format_quote.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="m238.67-234.5 95.92-164.87q-5 1-11 1.5t-11 .5q-66.48-1.43-112.88-49.03Q153.3-494 153.3-560q0-67.76 47.92-115.55 47.91-47.8 115.67-47.8 67.44 0 115.27 47.8Q480-627.76 480-560q0 21.09-5.44 41.35T458.48-480L317.37-234.5h-78.7Zm366.7 0 95.67-164.87q-5 1-11 1.5t-11 .5q-66.47-1.43-112.76-49.03Q520-494 520-560q0-67.76 47.8-115.55 47.79-47.8 115.55-47.8 67.43 0 115.39 47.8Q846.7-627.76 846.7-560q0 21.09-5.44 41.35T825.17-480L683.83-234.5h-78.46ZM316.54-482.15q32.39 0 55.18-22.63 22.78-22.62 22.78-54.94 0-32.32-22.57-55.23-22.56-22.9-54.8-22.9-32.52 0-55.3 22.63-22.79 22.62-22.79 54.94 0 32.32 22.55 55.23 22.55 22.9 54.95 22.9Zm366.46 0q32.39 0 55.29-22.63 22.91-22.62 22.91-54.94 0-32.32-22.64-55.23-22.64-22.9-54.98-22.9-32.43 0-55.26 22.63-22.82 22.62-22.82 54.94 0 32.32 22.6 55.23 22.61 22.9 54.9 22.9Zm.35-77.85Zm-366.46 0Z"/></svg>

package/icons/storybook/local_shipping.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M225.55-155.5q-49.59 0-84.81-34.18-35.22-34.17-35.7-83.82H34.5v-463.87q0-27.6 20.27-47.86 20.26-20.27 47.86-20.27h579v164.13h103.33L925.5-454.02v180.52h-73.87q-.72 49.65-35.82 83.82-35.1 34.18-84.69 34.18-49.6 0-84.82-34.18-35.21-34.17-35.69-83.82H345.83q-.72 49.24-35.7 83.62-34.98 34.38-84.58 34.38Zm-.12-62.87q24 0 41-17t17-41q0-24-17-41t-41-17q-24 0-41 17t-17 41q0 24 17 41t41 17Zm-122.8-123.26h23.04q16.92-25.8 42.46-41.09Q193.66-398 224.45-398t56.81 15.63q26.01 15.64 42.78 40.74H613.5v-395.74H102.63v395.74ZM731-218.37q24 0 41-17t17-41q0-24-17-41t-41-17q-24 0-41 17t-17 41q0 24 17 41t41 17ZM681.63-425h180.26l-111-148h-69.26v148ZM358.57-529Z"/></svg>

package/icons/storybook/location_city.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M111.87-111.87v-574.5h247v-86.26L480-891l121.37 118.37v252.26h247v408.5h-736.5ZM180-180h106v-106H180v106Zm0-166h106v-106H180v106Zm0-166h106v-106H180v106Zm247 332h106v-106H427v106Zm0-166h106v-106H427v106Zm0-166h106v-106H427v106Zm0-166h106v-106H427v106Zm247 498h106v-106H674v106Zm0-166h106v-106H674v106Z"/></svg>

package/icons/storybook/mark_email_unread.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M142.15-154.02q-27.6 0-47.86-20.27-20.27-20.26-20.27-47.86v-515.7q0-27.7 20.27-48.03 20.26-20.34 47.86-20.34h429.46q-4.44 17.15-5.68 34.19-1.23 17.03 1.24 34.18H147.15l332.85 218 148.37-97.04q10.96 9.96 23.39 18.11 12.44 8.15 25.87 13.8L480-454.35l-337.85-223v455.2h675.7v-353.31q19.18-5.02 36.07-14.7 16.88-9.67 32.3-22.6v390.61q0 27.6-20.34 47.86-20.33 20.27-48.03 20.27h-675.7Zm0-583.83v515.7-515.7Zm617.73 91.92q-47.57 0-80.76-33.31-33.19-33.3-33.19-80.88 0-47.57 33.31-80.76 33.3-33.19 80.88-33.19 47.57 0 80.76 33.31 33.19 33.3 33.19 80.88 0 47.57-33.31 80.76-33.3 33.19-80.88 33.19Z"/></svg>

package/icons/storybook/notifications.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M154.02-194.02v-68.13h77.85v-298.02q0-86.08 50.34-154.77 50.33-68.69 133.72-86.41v-20.56q0-26.8 18.69-45.55 18.69-18.76 45.38-18.76t45.38 18.76q18.69 18.75 18.69 45.55v20.56q83.39 17.48 133.84 86.25 50.46 68.77 50.46 154.93v298.02h77.85v68.13h-652.2ZM480-501.04Zm.12 429.17q-33.83 0-57.93-24.13t-24.1-58.02h164.06q0 33.95-24.15 58.05-24.15 24.1-57.88 24.1ZM300-262.15h360v-298.02q0-74.76-52.5-127.38Q555-740.17 480-740.17t-127.5 52.62Q300-634.93 300-560.17v298.02Z"/></svg>

package/icons/storybook/shield.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M479.98-74.78q-142.59-35.67-234.27-164.87-91.69-129.2-91.69-283.27v-242.26L480-887.22l326.22 122.05V-523q0 154.1-91.82 283.32-91.82 129.23-234.42 164.9Zm.02-70.13q113.8-39.2 185.83-143.62 72.02-104.43 72.02-234.4v-194.4L480-814.61l-257.85 97.4v194.17q0 130.08 72.02 234.51Q366.2-184.11 480-144.91Zm0-334.85Z"/></svg>

package/icons/storybook/workspace_premium.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="m381.89-408.89 36.96-119.31-98.59-75.43h120.36L480-728.37l38.38 124.74h121.36l-98.35 75.43 35.96 119.31L480-482.76l-98.11 73.87ZM241.37-34.5v-304.72q-46.44-47.95-66.89-105.66-20.46-57.7-20.46-116.32 0-138.39 93.8-232.18 93.79-93.79 232.12-93.79 138.33 0 232.31 93.79 93.97 93.79 93.97 232.18 0 58.62-20.58 116.32-20.57 57.71-67.01 105.66V-34.5L480-113.98 241.37-34.5Zm238.59-268.85q108.08 0 182.99-74.78 74.9-74.78 74.9-182.95 0-108.16-74.86-183.06t-182.95-74.9q-108.08 0-182.99 74.87-74.9 74.87-74.9 182.97 0 108.29 74.86 183.07 74.86 74.78 182.95 74.78ZM304-121.13l176-56.2 176 56.2V-289.5q-40.24 28.76-86.16 41.63-45.92 12.86-89.84 12.86t-89.84-12.86Q344.24-260.74 304-289.5v168.37Zm176-84.57Z"/></svg>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "1.4.7-beta.0",
+  "version": "1.4.7-beta.2",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "author": "Johnny Grid <hello@vueless.com> (https://vueless.com)",
   "homepage": "https://vueless.com",

package/ui.container-col/config.ts

@@ -13,10 +13,12 @@ export default /*tw*/ {
         true: "w-full",
       },
       grow: {
-        true: "flex-grow",
+        true: "grow",
+        false: "grow-0",
       },
       shrink: {
-        true: "flex-shrink",
+        true: "shrink",
+        false: "shrink-0",
       },
       gap: {
         none: "gap-0",

package/ui.container-col/tests/UCol.test.ts

@@ -141,29 +141,37 @@ describe("UCol.vue", () => {
     });
 
     it("Grow – applies the correct grow class", () => {
-      const grow = true;
-      const expectedClasses = "flex-grow";
+      const growClasses = {
+        true: "grow",
+        false: "grow-0",
+      };
 
-      const component = mount(UCol, {
-        props: {
-          grow,
-        },
-      });
+      Object.entries(growClasses).forEach(([grow, classes]) => {
+        const component = mount(UCol, {
+          props: {
+            grow: grow === "true",
+          },
+        });
 
-      expect(component.attributes("class")).toContain(expectedClasses);
+        expect(component.attributes("class")).toContain(classes);
+      });
     });
 
     it("Shrink – applies the correct shrink class", () => {
-      const shrink = true;
-      const expectedClasses = "flex-shrink";
+      const shrinkClasses = {
+        true: "shrink",
+        false: "shrink-0",
+      };
 
-      const component = mount(UCol, {
-        props: {
-          shrink,
-        },
-      });
+      Object.entries(shrinkClasses).forEach(([shrink, classes]) => {
+        const component = mount(UCol, {
+          props: {
+            shrink: shrink === "true",
+          },
+        });
 
-      expect(component.attributes("class")).toContain(expectedClasses);
+        expect(component.attributes("class")).toContain(classes);
+      });
     });
 
     it("Tag – renders the correct HTML tag", () => {

package/ui.container-row/config.ts

@@ -13,10 +13,12 @@ export default /*tw*/ {
         true: "w-full",
       },
       grow: {
-        true: "flex-grow",
+        true: "grow",
+        false: "grow-0",
       },
       shrink: {
-        true: "flex-shrink",
+        true: "shrink",
+        false: "shrink-0",
       },
       gap: {
         none: "gap-0",

package/ui.container-row/tests/URow.test.ts

@@ -141,29 +141,37 @@ describe("URow.vue", () => {
     });
 
     it("Grow – applies the correct grow class", () => {
-      const grow = true;
-      const expectedClasses = "flex-grow";
+      const growClasses = {
+        true: "grow",
+        false: "grow-0",
+      };
 
-      const component = mount(URow, {
-        props: {
-          grow,
-        },
-      });
+      Object.entries(growClasses).forEach(([grow, classes]) => {
+        const component = mount(URow, {
+          props: {
+            grow: grow === "true",
+          },
+        });
 
-      expect(component.attributes("class")).toContain(expectedClasses);
+        expect(component.attributes("class")).toContain(classes);
+      });
     });
 
     it("Shrink – applies the correct shrink class", () => {
-      const shrink = true;
-      const expectedClasses = "flex-shrink";
+      const shrinkClasses = {
+        true: "shrink",
+        false: "shrink-0",
+      };
 
-      const component = mount(URow, {
-        props: {
-          shrink,
-        },
-      });
+      Object.entries(shrinkClasses).forEach(([shrink, classes]) => {
+        const component = mount(URow, {
+          props: {
+            shrink: shrink === "true",
+          },
+        });
 
-      expect(component.attributes("class")).toContain(expectedClasses);
+        expect(component.attributes("class")).toContain(classes);
+      });
     });
 
     it("Tag – renders the correct HTML tag", () => {

package/ui.form-checkbox/UCheckbox.vue

@@ -211,10 +211,5 @@ const {
 
       <UIcon v-else :name="config.defaults.checkedIcon" color="inherit" v-bind="checkedIconAttrs" />
     </label>
-
-    <template #bottom>
-      <!-- @slot Use it to add something below the checkbox. -->
-      <slot name="bottom" />
-    </template>
   </ULabel>
 </template>

package/ui.form-checkbox/storybook/stories.ts

@@ -17,6 +17,7 @@ import UChip from "../../ui.other-chip/UChip.vue";
 
 import type { Meta, StoryFn } from "@storybook/vue3-vite";
 import type { Props } from "../types";
+import { ref } from "vue";
 
 interface UCheckboxArgs extends Props {
   slotTemplate?: string;
@@ -142,23 +143,60 @@ Partial.parameters = {
   },
 };
 
-export const LabelSlot = DefaultTemplate.bind({});
-LabelSlot.args = {
-  slotTemplate: `
-    <template #label>
-      <URow gap="2xs" align="center">
-        <UText>I agree to the <ULink label="Privacy Policy" /></UText>
-        <UIcon name="contract" size="xs" />
-      </URow>
-    </template>
-  `,
-};
+export const Slots: StoryFn<UCheckboxArgs> = (args) => ({
+  components: { UCheckbox, UCol, UText, URow, ULink, UIcon },
+  setup: () => ({
+    args,
+    labelSlotValue: ref(false),
+    descriptionSlotValue: ref(false),
+    errorSlotValue: ref(false),
+  }),
+  template: `
+    <UCol gap="3xl">
+      <UCheckbox v-bind="args" v-model="labelSlotValue">
+        <template #label>
+          <URow gap="2xs" align="center">
+            <UText>I agree to the Privacy Policy</UText>
+            <UIcon name="contract" size="xs" />
+          </URow>
+        </template>
+      </UCheckbox>
+
+      <UCheckbox
+        v-bind="args"
+        v-model="descriptionSlotValue"
+        label="Email me product updates"
+      >
+        <template #description>
+          <URow align="center" gap="2xs" class="text-neutral">
+            <UIcon name="mail" size="xs" class="mt-0.5" color="primary" />
+            <UText size="sm">
+              Unsubscribe anytime.
+              <ULink label="Privacy policy" underlined size="sm" />.
+            </UText>
+          </URow>
+        </template>
+      </UCheckbox>
 
-export const BottomSlot = DefaultTemplate.bind({});
-BottomSlot.args = {
-  slotTemplate: `
-    <template #bottom>
-      <ULink label="Learn more" size="sm" class="mr-1.5" />
-    </template>
+      <UCheckbox
+        v-bind="args"
+        v-model="errorSlotValue"
+        label="Accept terms"
+        :error="true"
+      >
+        <template #error>
+          <URow align="center" gap="2xs">
+            <UIcon name="error" size="xs" color="error" />
+            <UText size="sm" color="error">
+              <ul>
+                <li>You must accept the terms to continue</li>
+                <li>This checkbox is required for registration</li>
+                <li>Clear the error by checking the box above</li>
+              </ul>
+            </UText>
+          </URow>
+        </template>
+      </UCheckbox>
+    </UCol>
   `,
-};
+});

package/ui.form-checkbox/tests/UCheckbox.test.ts

@@ -319,23 +319,6 @@ describe("UCheckbox.vue", () => {
 
       expect(errorElement.text()).toBe(customError);
     });
-
-    it("Bottom – renders custom content from bottom slot", () => {
-      const customBottomContent = "Custom Bottom Content";
-
-      const component = mount(UCheckbox, {
-        props: {
-          label: "Test Label",
-        },
-        slots: {
-          bottom: customBottomContent,
-        },
-      });
-
-      const labelComponent = component.getComponent(ULabel);
-
-      expect(labelComponent.text()).toContain(customBottomContent);
-    });
   });
 
   describe("Events", () => {

package/ui.form-checkbox-group/storybook/stories.ts

@@ -189,3 +189,64 @@ CustomKeys.parameters = {
     },
   },
 };
+
+export const Slots: StoryFn<UCheckboxGroupArgs> = (args) => ({
+  components: { UCheckboxGroup, UCol, UText, URow, ULink, UIcon },
+  setup: () => ({
+    args,
+    modelValueLabel: ref(""),
+    modelValueDescription: ref(""),
+    modelValueError: ref(""),
+  }),
+  template: `
+    <UCol gap="3xl">
+      <UCheckboxGroup
+        v-bind="args"
+        v-model="modelValueLabel"
+        name="LabelSlot"
+      >
+        <template #label>
+          <URow align="center" gap="2xs">
+            <UText>Choose how we notify you</UText>
+            <UIcon name="notifications" size="xs" color="neutral" />
+          </URow>
+        </template>
+      </UCheckboxGroup>
+
+      <UCheckboxGroup
+        v-bind="args"
+        v-model="modelValueDescription"
+        name="SlotsDescription"
+        label="Notification channels"
+      >
+        <template #description>
+          <URow align="center" gap="2xs" class="text-neutral">
+            <UIcon name="notifications" size="xs" color="primary" />
+            <UText size="sm">
+              You can change this later.
+              <ULink label="Notification settings" underlined size="sm" />.
+            </UText>
+          </URow>
+        </template>
+      </UCheckboxGroup>
+
+      <UCheckboxGroup
+        v-bind="args"
+        v-model="modelValueError"
+        name="SlotsError"
+        label="Select options"
+        :error="true"
+      >
+        <template #error>
+          <UText size="sm" color="error">
+            <ul>
+              <li>Invalid selection</li>
+              <li>At least one channel is required</li>
+              <li>Choose at least one option before submitting</li>
+            </ul>
+          </UText>
+        </template>
+      </UCheckboxGroup>
+    </UCol>
+  `,
+});

package/ui.form-date-picker/storybook/stories.ts

@@ -1,4 +1,5 @@
 import type { Meta, StoryFn } from "@storybook/vue3-vite";
+import { ref } from "vue";
 import {
   getArgs,
   getArgTypes,
@@ -13,6 +14,7 @@ import URow from "../../ui.container-row/URow.vue";
 import UCol from "../../ui.container-col/UCol.vue";
 import UButton from "../../ui.button/UButton.vue";
 import UText from "../../ui.text-block/UText.vue";
+import ULink from "../../ui.button-link/ULink.vue";
 
 import { COMPONENT_NAME } from "../constants";
 
@@ -364,43 +366,89 @@ export const IconProps: StoryFn<DefaultUDatePickerArgs> = (args) => ({
 });
 
 export const Slots: StoryFn<DefaultUDatePickerArgs> = (args) => ({
-  components: { UDatePicker, URow, UButton },
-  setup: () => ({ args }),
+  components: { UDatePicker, URow, UCol, UButton, UText, ULink, UIcon },
+  setup: () => ({
+    args,
+    descriptionSlotValue: ref(dateValue),
+    errorSlotValue: ref<Date | null>(null),
+  }),
   template: `
-    <URow align="stretch">
-      <UDatePicker
-        v-bind="args"
-        v-model="args.leftModel"
-        class="w-full"
-        :config="{ datepickerInput: { wrapper: 'pl-0' } }"
-      >
-        <template #left>
-          <UButton
-            label="Today"
-            size="sm"
-            variant="soft"
-            class="h-full rounded-r-none"
-            @click="args.leftModel = new Date()"
-          />
-        </template>
-      </UDatePicker>
-
-      <UDatePicker
-        v-bind="args"
-        v-model="args.modelValue"
-        class="w-full"
-        :config="{ datepickerInput: { wrapper: 'pr-0' } }"
-      >
-        <template #right>
-          <UButton
-            label="Clear"
-            size="sm"
-            variant="ghost"
-            class="h-full rounded-l-none"
-            @click="args.modelValue = null"
-          />
-        </template>
-      </UDatePicker>
-    </URow>
+    <UCol gap="3xl">
+      <URow block>
+        <UDatePicker
+          v-bind="args"
+          v-model="args.leftModel"
+          class="w-full"
+          :config="{ datepickerInput: { wrapper: 'pl-0' } }"
+        >
+          <template #left>
+            <UButton
+              label="Today"
+              size="sm"
+              variant="soft"
+              class="h-full rounded-r-none"
+              @click="args.leftModel = new Date()"
+            />
+          </template>
+        </UDatePicker>
+
+        <UDatePicker
+          v-bind="args"
+          v-model="args.modelValue"
+          class="w-full"
+          :config="{ datepickerInput: { wrapper: 'pr-0' } }"
+        >
+          <template #right>
+            <UButton
+              label="Clear"
+              size="sm"
+              variant="ghost"
+              class="h-full rounded-l-none"
+              @click="args.modelValue = null"
+            />
+          </template>
+        </UDatePicker>
+      </URow>
+
+      <URow block>
+        <UDatePicker
+          v-bind="args"
+          v-model="descriptionSlotValue"
+          label="Event date"
+          class="w-full"
+        >
+          <template #description>
+            <URow align="center" gap="2xs" class="text-neutral">
+              <UIcon name="event" size="xs" color="primary" />
+              <UText size="sm">
+                Uses your local timezone.
+                <ULink label="Date policy" underlined size="sm" />.
+              </UText>
+            </URow>
+          </template>
+        </UDatePicker>
+
+        <UDatePicker
+          v-bind="args"
+          v-model="errorSlotValue"
+          label="Due date"
+          :error="true"
+          class="w-full"
+        >
+          <template #error>
+            <URow align="center" gap="2xs">
+              <UIcon name="error" size="xs" color="error" />
+              <UText size="sm" color="error">
+                <ul>
+                  <li>The selected date is not available</li>
+                  <li>Pick a day within the allowed range</li>
+                  <li>Weekends and holidays are excluded</li>
+                </ul>
+              </UText>
+            </URow>
+          </template>
+        </UDatePicker>
+      </URow>
+    </UCol>
   `,
 });