vueless 1.4.7 → 1.4.8

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,54 @@ 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>
+          <UText size="sm" variant="lifted">
+            Unsubscribe anytime, see our
+            <ULink label="privacy policy" underlined size="sm" />.
+          </UText>
+        </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>
+          <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>
+        </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" variant="lifted">
+              You can change this later in
+              <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,91 @@ 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>
+            <UText size="sm" variant="lifted">
+              Uses your local timezone, see our
+              <ULink label="date policy" underlined size="sm" />.
+            </UText>
+          </template>
+        </UDatePicker>
+
+        <UDatePicker
+          v-bind="args"
+          v-model="errorSlotValue"
+          label="Due date"
+          :error="true"
+          class="w-full"
+        >
+          <template #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>
+          </template>
+        </UDatePicker>
+      </URow>
+    </UCol>
   `,
 });
+
+Slots.parameters = {
+  docs: {
+    story: {
+      height: "550px",
+    },
+  },
+};

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

@@ -15,6 +15,7 @@ import UCol from "../../ui.container-col/UCol.vue";
 import UIcon from "../../ui.image-icon/UIcon.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 { addDays } from "../../ui.form-calendar/utilDate";
 
@@ -296,44 +297,96 @@ export const IconProps: StoryFn<DefaultUDatePickerRangeArgs> = (args) => ({
 });
 
 export const Slots: StoryFn<DefaultUDatePickerRangeArgs> = (args) => ({
-  components: { UDatePickerRange, URow, UButton },
-  setup: () => ({ args, fromDate, toDate, leftModel: ref({ from: null, to: null }) }),
+  components: { UDatePickerRange, URow, UCol, UButton, UText, ULink, UIcon },
+  setup: () => ({
+    args,
+    fromDate,
+    toDate,
+    leftModel: ref({ from: null, to: null }),
+    descriptionSlotValue: ref({ from: fromDate, to: toDate }),
+    errorSlotValue: ref({ from: null, to: null }),
+  }),
   template: `
-    <URow align="stretch">
-      <UDatePickerRange
-        label="Select date range"
-        v-model="leftModel"
-        variant="input"
-        class="w-full"
-        :config="{ datepickerInput: { wrapper: 'pl-0' } }"
-      >
-        <template #left>
-          <UButton
-            label="2 weeks"
-            size="sm"
-            variant="soft"
-            class="h-full rounded-r-none"
-            @click="leftModel = { from: fromDate, to: toDate }"
-          />
-        </template>
-      </UDatePickerRange>
-      <UDatePickerRange
-        label="Select date range"
-        v-model="args.modelValue"
-        variant="input"
-        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 = { from: null, to: null }"
-          />
-        </template>
-      </UDatePickerRange>
-    </URow>
+    <UCol gap="3xl">
+      <URow block>
+        <UDatePickerRange
+          label="Select date range"
+          v-model="leftModel"
+          variant="input"
+          class="w-full"
+          :config="{ datepickerInput: { wrapper: 'pl-0' } }"
+        >
+          <template #left>
+            <UButton
+              label="2 weeks"
+              size="sm"
+              variant="soft"
+              class="h-full rounded-r-none"
+              @click="leftModel = { from: fromDate, to: toDate }"
+            />
+          </template>
+        </UDatePickerRange>
+        <UDatePickerRange
+          label="Select date range"
+          v-model="args.modelValue"
+          variant="input"
+          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 = { from: null, to: null }"
+            />
+          </template>
+        </UDatePickerRange>
+      </URow>
+
+      <URow block>
+        <UDatePickerRange
+          v-bind="args"
+          v-model="descriptionSlotValue"
+          variant="input"
+          label="Report period"
+          class="w-full"
+        >
+          <template #description>
+            <UText size="sm" variant="lifted">
+              Inclusive of start and end, see the
+              <ULink label="fiscal calendar" underlined size="sm" />.
+            </UText>
+          </template>
+        </UDatePickerRange>
+
+        <UDatePickerRange
+          v-bind="args"
+          v-model="errorSlotValue"
+          variant="input"
+          label="Stay dates"
+          :error="true"
+          class="w-full"
+        >
+          <template #error>
+            <UText size="sm" color="error">
+              <ul>
+                <li>End date must be after the start date</li>
+                <li>Range cannot span more than 30 days</li>
+                <li>Select both dates from the calendar</li>
+              </ul>
+            </UText>
+          </template>
+        </UDatePickerRange>
+      </URow>
+    </UCol>
   `,
 });
+Slots.parameters = {
+  docs: {
+    story: {
+      height: "700px",
+    },
+  },
+};

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

@@ -13,6 +13,7 @@ import URow from "../../ui.container-row/URow.vue";
 import UDropdownButton from "../../ui.dropdown-button/UDropdownButton.vue";
 import UText from "../../ui.text-block/UText.vue";
 import UChip from "../../ui.other-chip/UChip.vue";
+import ULink from "../../ui.button-link/ULink.vue";
 
 import type { Meta, StoryFn } from "@storybook/vue3-vite";
 import type { Props } from "../types";
@@ -190,7 +191,7 @@ export const IconProps: StoryFn<UInputArgs> = (args) => ({
 });
 
 export const Slots: StoryFn<UInputArgs> = (args) => ({
-  components: { UInput, URow, UDropdownButton, UText, UChip },
+  components: { UInput, URow, UCol, UDropdownButton, UText, UChip, ULink, UIcon },
   setup() {
     const countryCodes = [
       { label: "+33", value: "+33" },
@@ -199,50 +200,83 @@ export const Slots: StoryFn<UInputArgs> = (args) => ({
     ];
 
     const countryCode = ref("+33");
+    const descriptionSlotValue = ref("");
+    const errorSlotValue = ref("");
 
-    return { args, countryCode, countryCodes };
+    return { args, countryCode, countryCodes, descriptionSlotValue, errorSlotValue };
   },
   template: `
-    <URow>
-      <UInput
-        label="Phone Number"
-        placeholder="Enter your phone number"
-        :config="{ wrapper: 'pl-0' }"
-      >
-        <template #label="{ label }">
-          {{ label }}
-          <span class="text-red-500">*</span>
-        </template>
-
-        <template #left>
-          <UDropdownButton
-            v-model="countryCode"
-            :options="countryCodes"
-            square
-            size="sm"
-            variant="soft"
-            class="rounded-r-none h-[49px]"
-          />
-        </template>
-      </UInput>
-
-      <UInput label="Website" placeholder="Enter your website">
-        <template #label="{ label }">
-          {{ label }}
-          <span class="text-red-500">*</span>
-        </template>
-
-        <template #right>
-          <UText label=".com" variant="lifted" />
-        </template>
-      </UInput>
-    </URow>
+    <UCol gap="3xl">
+      <URow block>
+        <UInput
+          label="Phone Number"
+          placeholder="Enter your phone number"
+          :config="{ wrapper: 'pl-0' }"
+        >
+          <template #label="{ label }">
+            {{ label }}
+            <span class="text-red-500">*</span>
+          </template>
+
+          <template #left>
+            <UDropdownButton
+              v-model="countryCode"
+              :options="countryCodes"
+              square
+              size="sm"
+              variant="soft"
+              class="rounded-r-none h-[49px]"
+            />
+          </template>
+        </UInput>
+
+        <UInput label="Website" placeholder="Enter your website">
+          <template #label="{ label }">
+            {{ label }}
+            <span class="text-red-500">*</span>
+          </template>
+
+          <template #right>
+            <UText label=".com" variant="lifted" :wrap="false" />
+          </template>
+        </UInput>
+      </URow>
+
+      <URow block>
+        <UInput v-model="descriptionSlotValue" label="Display name">
+          <template #description>
+            <UText size="sm" variant="lifted">
+              Shown on your public profile, read the
+              <ULink label="naming policy" underlined size="sm" />.
+            </UText>
+          </template>
+        </UInput>
+
+        <UInput
+          v-model="errorSlotValue"
+          label="Name"
+          :error="true"
+        >
+          <template #error>
+            <URow align="center" gap="2xs">
+              <UText size="sm" color="error">
+                <ul>
+                  <li>This field failed validation</li>
+                  <li>Check minimum and maximum length rules</li>
+                  <li>Only allowed characters may be used</li>
+                </ul>
+              </UText>
+            </URow>
+          </template>
+        </UInput>
+      </URow>
+    </UCol>
   `,
 });
 Slots.parameters = {
   docs: {
     story: {
-      height: "250px",
+      height: "300px",
     },
   },
 };