vueless 1.4.7-beta.1 → 1.4.7-beta.3

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

@@ -114,29 +114,51 @@ Sizes.args = { enum: "size" };
 export const LabelAlign = EnumTemplate.bind({});
 LabelAlign.args = { enum: "align" };
 
-export const LabelSlot = DefaultTemplate.bind({});
-LabelSlot.args = {
-  label: "Email Address",
-  slotTemplate: `
-    <template #label="{ label }">
-      <URow align="center" gap="xs">
-        <UIcon name="mail" size="sm" class="text-primary" />
-        <UChip icon="asterisk" color="error" size="2xs">
-          <UText :label="label" class="mr-2" />
-        </UChip>
-      </URow>
-    </template>
-  `,
-};
+export const Slots: StoryFn<ULabelArgs> = () => ({
+  components: { ULabel, UText, URow, ULink, UIcon, UCol, UChip },
+  template: `
+    <UCol gap="3xl">
+      <ULabel label="Work email">
+        <UText label="johndoe@example.com" />
+        <template #label="{ label }">
+          <URow align="center" gap="xs">
+            <UIcon name="mail" size="sm" class="text-primary" />
+            <UChip icon="asterisk" color="error" size="xs">
+              <UText :label="label" class="mr-2" />
+            </UChip>
+          </URow>
+        </template>
+      </ULabel>
 
-export const BottomSlot = DefaultTemplate.bind({});
-BottomSlot.args = {
-  slotTemplate: `
-    <template #bottom>
-      <URow align="center" gap="2xs" class="mt-1">
-        <UIcon name="error" size="xs" />
-        <UText>Invalid email address. <ULink label="Need help?" /></UText>
-      </URow>
-    </template>
+      <ULabel label="Work email">
+        <UText label="johndoe@example.com" />
+        <template #description>
+          <URow align="center" gap="2xs" class="text-neutral">
+            <UIcon name="mark_email_unread" size="xs" color="primary" />
+            <UText size="sm">
+              We will send a
+              <ULink label="confirmation link" underlined size="sm" />
+              to this address.
+            </UText>
+          </URow>
+        </template>
+      </ULabel>
+
+      <ULabel label="Email" :error="true">
+        <UText label="not-an-email" />
+        <template #error>
+          <URow align="center" gap="2xs">
+            <UIcon name="error" size="xs" color="error" />
+            <UText size="sm" color="error">
+              <ul>
+                <li>Email address format is invalid</li>
+                <li>Use a name@domain.com style address</li>
+                <li>Remove spaces and special characters from the local part</li>
+              </ul>
+            </UText>
+          </URow>
+        </template>
+      </ULabel>
+    </UCol>
   `,
-};
+});

package/ui.form-label/tests/ULabel.test.ts

@@ -369,18 +369,6 @@ describe("ULabel.vue", () => {
 
       expect(component.find("[vl-key='label']").text()).toBe(slotContent);
     });
-
-    it("Bottom – renders content from bottom slot", () => {
-      const testClass = "custom-bottom";
-
-      const component = mount(ULabel, {
-        slots: {
-          bottom: `<div class="${testClass}">Bottom Slot Content</div>`,
-        },
-      });
-
-      expect(component.find(`.${testClass}`).exists()).toBe(true);
-    });
   });
 
   describe("Events", () => {

package/ui.form-listbox/UListbox.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { watch, computed, useId, ref, useTemplateRef, nextTick } from "vue";
+import { watch, computed, useId, ref, useTemplateRef } from "vue";
 import { isEqual } from "lodash-es";
 
 import { useUI } from "../composables/useUI";
@@ -144,78 +144,77 @@ const filteredOptions = computed(() => {
 watch(
   () => [props.options, props.size, props.visibleOptions, props.searchable, searchModel.value],
   () => {
-    nextTick(() => {
-      const options = [
-        ...(optionsRef.value || []),
-        ...(addOptionRef.value ? [addOptionRef.value] : []),
-        ...(emptyOptionRef.value ? [emptyOptionRef.value] : []),
-      ];
-
-      if (props.visibleOptions) {
-        options.slice(0, props.visibleOptions);
-      }
-
-      const maxHeight = options
-        .slice(0, props.visibleOptions)
-        .map((el) => {
-          const styles = window.getComputedStyle(el);
-          const height = parseFloat(styles.height || "0");
-          const marginTop = parseFloat(styles.marginTop || "0");
-          const marginBottom = parseFloat(styles.marginBottom || "0");
-
-          return height + marginTop + marginBottom;
-        })
-        .reduce((acc, cur) => acc + cur, 0);
-
-      const wrapperStyle = getComputedStyle(wrapperRef.value as Element);
-      const wrapperPaddingTop = parseFloat(wrapperStyle.paddingTop || "0");
-      const wrapperPaddingBottom = parseFloat(wrapperStyle.paddingBottom || "0");
-      const wrapperBorderTop = parseFloat(wrapperStyle.borderTopWidth || "0");
-      const wrapperBorderBottom = parseFloat(wrapperStyle.borderBottomWidth || "0");
-      const wrapperGap = parseFloat(wrapperStyle.gap || "0");
-
-      const addOptionHeight = addOptionRef.value?.getBoundingClientRect().height || 0;
-
-      const inputEl = listboxInputRef.value?.input as HTMLInputElement | undefined;
-      let listboxInputHeight = 0;
-
-      let listboxInputWrapperPaddingTop = 0;
-      let listboxInputBorderTop = 0;
-      let listboxInputBorderBottom = 0;
-
-      if (inputEl) {
-        const listboxInputStyle = getComputedStyle(inputEl);
-        const listboxInputLabelStyle = inputEl.parentElement
-          ? getComputedStyle(inputEl.parentElement)
-          : undefined;
-        const listboxInputWrapperStyle = getComputedStyle(
-          inputEl.parentElement?.parentElement?.parentElement as Element,
-        );
-
-        listboxInputHeight = parseFloat(listboxInputStyle.height || "0");
-
-        listboxInputWrapperPaddingTop = parseFloat(listboxInputWrapperStyle.paddingTop || "0");
-
-        listboxInputBorderTop = parseFloat(listboxInputLabelStyle?.borderTop || "0");
-        listboxInputBorderBottom = parseFloat(listboxInputLabelStyle?.borderBottom || "0");
-      }
-
-      wrapperMaxHeight.value = `${
-        maxHeight +
-        addOptionHeight +
-        (props.searchable ? wrapperGap : 0) +
-        wrapperPaddingTop +
-        wrapperPaddingBottom +
-        wrapperBorderTop +
-        wrapperBorderBottom +
-        listboxInputHeight +
-        listboxInputBorderTop +
-        listboxInputBorderBottom +
-        listboxInputWrapperPaddingTop
-      }px`;
-    });
+    const options = [
+      ...(optionsRef.value || []),
+      ...(addOptionRef.value ? [addOptionRef.value] : []),
+      ...(emptyOptionRef.value ? [emptyOptionRef.value] : []),
+    ];
+
+    if (props.visibleOptions) {
+      options.slice(0, props.visibleOptions);
+    }
+
+    const maxHeight = options
+      .slice(0, props.visibleOptions)
+      .map((el) => {
+        const styles = window.getComputedStyle(el);
+        const height = parseFloat(styles.height || "0");
+        const marginTop = parseFloat(styles.marginTop || "0");
+        const marginBottom = parseFloat(styles.marginBottom || "0");
+
+        return height + marginTop + marginBottom;
+      })
+      .reduce((acc, cur) => acc + cur, 0);
+
+    const wrapperEl = wrapperRef.value;
+    const wrapperStyle = wrapperEl ? getComputedStyle(wrapperEl) : null;
+    const wrapperPaddingTop = parseFloat(wrapperStyle?.paddingTop || "0");
+    const wrapperPaddingBottom = parseFloat(wrapperStyle?.paddingBottom || "0");
+    const wrapperBorderTop = parseFloat(wrapperStyle?.borderTopWidth || "0");
+    const wrapperBorderBottom = parseFloat(wrapperStyle?.borderBottomWidth || "0");
+    const wrapperGap = parseFloat(wrapperStyle?.gap || "0");
+
+    const addOptionHeight = addOptionRef.value?.getBoundingClientRect().height || 0;
+
+    const inputEl = listboxInputRef.value?.input as HTMLInputElement | undefined;
+    let listboxInputHeight = 0;
+
+    let listboxInputWrapperPaddingTop = 0;
+    let listboxInputBorderTop = 0;
+    let listboxInputBorderBottom = 0;
+
+    if (inputEl) {
+      const listboxInputStyle = getComputedStyle(inputEl);
+      const listboxInputLabelStyle = inputEl.parentElement
+        ? getComputedStyle(inputEl.parentElement)
+        : undefined;
+      const listboxInputWrapperStyle = getComputedStyle(
+        inputEl.parentElement?.parentElement?.parentElement as Element,
+      );
+
+      listboxInputHeight = parseFloat(listboxInputStyle.height || "0");
+
+      listboxInputWrapperPaddingTop = parseFloat(listboxInputWrapperStyle.paddingTop || "0");
+
+      listboxInputBorderTop = parseFloat(listboxInputLabelStyle?.borderTop || "0");
+      listboxInputBorderBottom = parseFloat(listboxInputLabelStyle?.borderBottom || "0");
+    }
+
+    wrapperMaxHeight.value = `${
+      maxHeight +
+      addOptionHeight +
+      (props.searchable ? wrapperGap : 0) +
+      wrapperPaddingTop +
+      wrapperPaddingBottom +
+      wrapperBorderTop +
+      wrapperBorderBottom +
+      listboxInputHeight +
+      listboxInputBorderTop +
+      listboxInputBorderBottom +
+      listboxInputWrapperPaddingTop
+    }px`;
   },
-  { immediate: true },
+  { immediate: true, flush: "post" },
 );
 
 watch(

package/ui.form-listbox/tests/UListbox.test.ts

@@ -411,8 +411,10 @@ describe("UListbox.vue", () => {
       await flushPromises();
 
       const wrapper = component.find('[vl-key="wrapper"]');
+      const styleAttr = wrapper.attributes("style");
+      const inlineMaxHeight = (wrapper.element as HTMLElement).style.maxHeight;
 
-      expect(wrapper.attributes("style")).toContain(expectedStyle);
+      expect(styleAttr ?? inlineMaxHeight).toContain(expectedStyle);
     });
   });
 

package/ui.form-radio/URadio.vue

@@ -151,10 +151,5 @@ const { getDataTest, radioLabelAttrs, radioAttrs } = useUI<Config>(defaultConfig
       :data-test="getDataTest()"
       @change="onChange"
     />
-
-    <template #bottom>
-      <!-- @slot Use it to add something below the radio. -->
-      <slot name="bottom" />
-    </template>
   </ULabel>
 </template>

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

@@ -15,6 +15,8 @@ import UIcon from "../../ui.image-icon/UIcon.vue";
 
 import type { Meta, StoryFn } from "@storybook/vue3-vite";
 import type { Props } from "../types";
+import { ref } from "vue";
+import UCol from "../../ui.container-col/UCol.vue";
 
 interface URadioArgs extends Props {
   slotTemplate?: string;
@@ -107,30 +109,68 @@ Sizes.args = { name: "Sizes", enum: "size", label: "{enumValue}", modelValue: 1
 export const Colors = EnumTemplate.bind({});
 Colors.args = { name: "Colors", enum: "color", label: "{enumValue}", modelValue: 1 };
 
-export const LabelSlot = DefaultTemplate.bind({});
-LabelSlot.args = {
-  name: "LabelSlot",
-  value: "courier",
-  color: "primary",
-  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<URadioArgs> = (args) => ({
+  components: { URadio, UCol, UText, URow, ULink, UIcon },
+  setup: () => ({
+    args,
+    labelModel: ref(""),
+    descriptionModel: ref(""),
+    errorModel: ref(""),
+  }),
+  template: `
+    <UCol gap="3xl">
+      <URadio
+        v-bind="args"
+        v-model="labelModel"
+        name="LabelSlot"
+        value="courier"
+      >
+        <template #label>
+          <URow align="center" gap="2xs">
+            <UText>Courier delivery</UText>
+            <UIcon name="local_shipping" size="xs" color="neutral" />
+          </URow>
+        </template>
+      </URadio>
 
-export const BottomSlot = DefaultTemplate.bind({});
-BottomSlot.args = {
-  name: "terms",
-  label: "I agree to the Terms and Conditions",
-  value: "terms",
-  color: "primary",
-  slotTemplate: `
-    <template #bottom>
-      <UBadge label="Required to proceed" color="warning" variant="outlined" size="sm" class="mt-2" />
-    </template>
+      <URadio
+        v-bind="args"
+        v-model="descriptionModel"
+        name="DescriptionSlot"
+        value="pro"
+      >
+        <template #description>
+          <URow align="center" gap="2xs" class="text-neutral">
+            <UIcon name="workspace_premium" size="xs" class="mt-0.5" color="primary" />
+            <UText size="sm">
+              Includes all core features.
+              <ULink label="Compare plans" underlined size="sm" />.
+            </UText>
+          </URow>
+        </template>
+      </URadio>
+
+      <URadio
+        v-bind="args"
+        v-model="errorModel"
+        name="ErrorSlot"
+        label="Select"
+        value="1"
+        :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 select one of the available options</li>
+                <li>This field is required to proceed</li>
+                <li>Choose an option above to clear this error</li>
+              </ul>
+            </UText>
+          </URow>
+        </template>
+      </URadio>
+    </UCol>
   `,
-};
+});

package/ui.form-radio/tests/URadio.test.ts

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

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

@@ -13,9 +13,12 @@ import UCol from "../../ui.container-col/UCol.vue";
 import URow from "../../ui.container-row/URow.vue";
 import UBadge from "../../ui.text-badge/UBadge.vue";
 import UText from "../../ui.text-block/UText.vue";
+import ULink from "../../ui.button-link/ULink.vue";
+import UIcon from "../../ui.image-icon/UIcon.vue";
 
 import type { Meta, StoryFn } from "@storybook/vue3-vite";
 import type { Props } from "../types";
+import { ref } from "vue";
 
 interface URadioGroupArgs extends Props {
   slotTemplate?: string;
@@ -170,3 +173,67 @@ CustomKeys.parameters = {
     },
   },
 };
+
+export const Slots: StoryFn<URadioGroupArgs> = (args) => ({
+  components: { URadioGroup, UCol, UText, URow, ULink, UIcon },
+  setup: () => ({
+    args,
+    modelValueLabel: ref(null),
+    modelValueDescription: ref(null),
+    modelValueError: ref(null),
+  }),
+  template: `
+    <UCol gap="3xl">
+      <URadioGroup
+        v-bind="args"
+        v-model="modelValueLabel"
+        name="LabelSlot"
+      >
+        <template #label>
+          <URow align="center" gap="2xs">
+            <UText>Choose a delivery option</UText>
+            <UIcon name="local_shipping" size="xs" color="neutral" />
+          </URow>
+        </template>
+      </URadioGroup>
+
+      <URadioGroup
+        v-bind="args"
+        v-model="modelValueDescription"
+        name="SlotsDescription"
+        label="Delivery"
+      >
+        <template #description>
+          <URow align="center" gap="2xs" class="text-neutral">
+            <UIcon name="local_shipping" size="xs" color="primary" />
+            <UText size="sm">
+              Shipping times are estimates.
+              <ULink label="Full policy" underlined size="sm" />.
+            </UText>
+          </URow>
+        </template>
+      </URadioGroup>
+
+      <URadioGroup
+        v-bind="args"
+        v-model="modelValueError"
+        name="SlotsError"
+        label="Delivery"
+        :error="true"
+      >
+        <template #error>
+          <URow align="center" gap="2xs">
+            <UIcon name="error" size="xs" color="error" />
+            <UText size="sm" color="error">
+              <ul>
+                <li>Please choose one option from the group</li>
+                <li>At least one selection is required</li>
+                <li>Review the labels and pick a valid answer</li>
+              </ul>
+            </UText>
+          </URow>
+        </template>
+      </URadioGroup>
+    </UCol>
+  `,
+});

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

@@ -334,54 +334,109 @@ export const IconProps: StoryFn<USelectArgs> = (args) => ({
 });
 
 export const Slots: StoryFn<USelectArgs> = (args) => ({
-  components: { USelect, URow, UIcon, UText },
-  setup: () => ({ args, leftSlotModel: ref("paypal"), rightSlotModel: ref("bank") }),
+  components: { USelect, URow, UCol, UIcon, UText, ULink },
+  setup: () => ({
+    args,
+    leftSlotModel: ref("paypal"),
+    rightSlotModel: ref("bank"),
+    descriptionSlotModel: ref(null),
+    errorSlotModel: ref(null),
+  }),
   template: `
-    <URow>
-      <USelect
-        v-model="leftSlotModel"
-        label="Select Payment Method"
-        :options="[
-          { label: 'Visa', value: 'visa', icon: 'credit_card', details: '•••• 4242' },
-          { label: 'PayPal', value: 'paypal', icon: 'payments', details: 'user@example.com' },
-          { label: 'Bank Transfer', value: 'bank', icon: 'account_balance', details: 'Acct **** 1234' },
-          { label: 'Apple Pay', value: 'apple', icon: 'phone_iphone', details: 'iPhone 15' },
-        ]"
-      >
-        <template #left="{ options }">
-          <UIcon
-            v-if="leftSlotModel"
-            :name="options?.icon"
-            color="primary"
-            size="sm"
-          />
-        </template>
-      </USelect>
+    <UCol gap="3xl">
+      <URow block>
+        <USelect
+          v-model="leftSlotModel"
+          label="Select Payment Method"
+          :options="[
+            { label: 'Visa', value: 'visa', icon: 'credit_card', details: '•••• 4242' },
+            { label: 'PayPal', value: 'paypal', icon: 'payments', details: 'user@example.com' },
+            { label: 'Bank Transfer', value: 'bank', icon: 'account_balance', details: 'Acct **** 1234' },
+            { label: 'Apple Pay', value: 'apple', icon: 'phone_iphone', details: 'iPhone 15' },
+          ]"
+        >
+          <template #left="{ options }">
+            <UIcon
+              v-if="leftSlotModel"
+              :name="options?.icon"
+              color="primary"
+              size="sm"
+            />
+          </template>
+        </USelect>
+
+        <USelect
+          v-model="rightSlotModel"
+          label="Select Payment Method"
+          :options="[
+            { label: 'Visa', value: 'visa', icon: 'credit_card', details: '•••• 4242' },
+            { label: 'PayPal', value: 'paypal', icon: 'payments', details: 'user@example.com' },
+            { label: 'Bank Transfer', value: 'bank', icon: 'account_balance', details: 'Acct **** 1234' },
+            { label: 'Apple Pay', value: 'apple', icon: 'phone_iphone', details: 'iPhone 15' },
+          ]"
+        >
+          <template #right="{ options }">
+            <UText
+              v-if="rightSlotModel"
+              size="sm"
+              variant="lifted"
+              class="text-nowrap"
+            >
+              {{ options?.details }}
+            </UText>
+          </template>
+        </USelect>
+      </URow>
 
-      <USelect
-        v-model="rightSlotModel"
-        label="Select Payment Method"
-        :options="[
-          { label: 'Visa', value: 'visa', icon: 'credit_card', details: '•••• 4242' },
-          { label: 'PayPal', value: 'paypal', icon: 'payments', details: 'user@example.com' },
-          { label: 'Bank Transfer', value: 'bank', icon: 'account_balance', details: 'Acct **** 1234' },
-          { label: 'Apple Pay', value: 'apple', icon: 'phone_iphone', details: 'iPhone 15' },
-        ]"
-      >
-        <template #right="{ options }">
-          <UText
-            v-if="rightSlotModel"
-            size="sm"
-            variant="lifted"
-            class="text-nowrap"
-          >
-            {{ options?.details }}
-          </UText>
-        </template>
-      </USelect>
-    </URow>
+      <URow block>
+        <USelect
+          v-bind="args"
+          v-model="descriptionSlotModel"
+          label="City"
+          :options="args.options"
+        >
+          <template #description>
+            <URow align="center" gap="2xs" class="text-neutral">
+              <UIcon name="location_city" size="xs" color="primary" />
+              <UText size="sm">
+                Only cities we ship to.
+                <ULink label="Shipping zones" underlined size="sm" />.
+              </UText>
+            </URow>
+          </template>
+        </USelect>
+
+        <USelect
+          v-bind="args"
+          v-model="errorSlotModel"
+          label="City"
+          :options="args.options"
+          :error="true"
+        >
+          <template #error>
+            <URow align="center" gap="2xs">
+              <UIcon name="error" size="xs" color="error" />
+              <UText size="sm" color="error">
+                <ul>
+                  <li>Please select an option from the list</li>
+                  <li>The current value is not available anymore</li>
+                  <li>Pick a valid choice to continue</li>
+                </ul>
+              </UText>
+            </URow>
+          </template>
+        </USelect>
+      </URow>
+    </UCol>
   `,
 });
+Slots.parameters = {
+  docs: {
+    story: {
+      height: "400px",
+    },
+  },
+};
 
 export const ToggleSlots: StoryFn<USelectArgs> = (args) => ({
   components: { USelect, URow, UIcon },