vueless 1.4.7 → 1.4.8

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,63 @@ 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>
+          <UText size="sm" variant="lifted">
+            Includes all core features,
+            <ULink label="compare plans" underlined size="sm" />
+            for upgrades.
+          </UText>
+        </template>
+      </URadio>
+
+      <URadio
+        v-bind="args"
+        v-model="errorModel"
+        name="ErrorSlot"
+        label="Select"
+        value="1"
+        :error="true"
+      >
+        <template #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>
+        </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,61 @@ 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>
+          <UText size="sm" variant="lifted">
+            Shipping times are estimates, see the
+            <ULink label="full policy" underlined size="sm" />.
+          </UText>
+        </template>
+      </URadioGroup>
+
+      <URadioGroup
+        v-bind="args"
+        v-model="modelValueError"
+        name="SlotsError"
+        label="Delivery"
+        :error="true"
+      >
+        <template #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>
+        </template>
+      </URadioGroup>
+    </UCol>
+  `,
+});

package/ui.form-select/config.ts

@@ -117,7 +117,10 @@ export default /*tw*/ {
     ],
   },
   toggleWrapper: "{>toggle} mr-3",
-  toggleIcon: "{UIcon} {>selectIcon} -mr-1 transition duration-300 group-[*]/active:rotate-180",
+  toggleIcon: {
+    base: "{UIcon} {>selectIcon} -mr-1 transition duration-300",
+    compoundVariants: [{ opened: true, class: "rotate-180" }],
+  },
   leftIcon: "{UIcon} {>selectIcon}",
   rightIcon: "{UIcon} {>selectIcon}",
   leftSlot: "{>toggle} pl-2.5",

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

@@ -148,6 +148,13 @@ NotClearable.args = { clearable: false };
 
 export const Searchable = DefaultTemplate.bind({});
 Searchable.args = { searchable: true };
+Searchable.parameters = {
+  docs: {
+    story: {
+      height: "350px",
+    },
+  },
+};
 
 export const SearchModelValue = DefaultTemplate.bind({});
 SearchModelValue.args = { search: "New York", searchable: true };
@@ -163,10 +170,10 @@ export const NoCloseOnSelect = DefaultTemplate.bind({});
 NoCloseOnSelect.args = { modelValue: 3, closeOnSelect: false };
 
 export const Readonly = DefaultTemplate.bind({});
-Readonly.args = { readonly: true, modelValue: "1", clearable: false };
+Readonly.args = { readonly: true, modelValue: 1, clearable: false };
 
 export const Disabled = DefaultTemplate.bind({});
-Disabled.args = { disabled: true, modelValue: "2", clearable: false };
+Disabled.args = { disabled: true, modelValue: 2, clearable: false };
 
 export const LabelAlign = EnumTemplate.bind({});
 LabelAlign.args = {
@@ -184,6 +191,13 @@ LargeItemList.args = {
     return { value: index + 1, label: `value ${index + 1}`, badge: "badge" };
   }),
 };
+LargeItemList.parameters = {
+  docs: {
+    story: {
+      height: "400px",
+    },
+  },
+};
 
 export const Multiple = DefaultTemplate.bind({});
 Multiple.args = { multiple: true, modelValue: [] };
@@ -334,54 +348,103 @@ 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>
+            <UText size="sm" variant="lifted">
+              Only cities we ship to, see
+              <ULink label="shipping zones" underlined size="sm" />.
+            </UText>
+          </template>
+        </USelect>
+
+        <USelect
+          v-bind="args"
+          v-model="errorSlotModel"
+          label="City"
+          :options="args.options"
+          :error="true"
+        >
+          <template #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>
+          </template>
+        </USelect>
+      </URow>
+    </UCol>
   `,
 });
+Slots.parameters = {
+  docs: {
+    story: {
+      height: "400px",
+    },
+  },
+};
 
 export const ToggleSlots: StoryFn<USelectArgs> = (args) => ({
   components: { USelect, URow, UIcon },

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

@@ -15,6 +15,7 @@ import ULink from "../../ui.button-link/ULink.vue";
 
 import type { Meta, StoryFn } from "@storybook/vue3-vite";
 import type { Props } from "../types";
+import { ref } from "vue";
 
 interface USwitchArgs extends Props {
   slotTemplate?: string;
@@ -89,15 +90,38 @@ ToggleIcon.args = { toggleIcon: true };
 export const Disabled = DefaultTemplate.bind({});
 Disabled.args = { disabled: true };
 
-export const LabelSlot = DefaultTemplate.bind({});
-LabelSlot.args = {
-  label: "Enable Notifications",
-  slotTemplate: `
-    <template #label="{ 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<USwitchArgs> = (args) => ({
+  components: { USwitch, UCol, UText, URow, ULink, UIcon },
+  setup: () => ({ args, labelSlotValue: ref(false), descriptionSlotValue: ref(false) }),
+  template: `
+    <UCol gap="3xl">
+      <USwitch
+        v-bind="args"
+        v-model="labelSlotValue"
+        label="Enable Notifications"
+      >
+        <template #label="{ label }">
+          <URow gap="2xs" align="center">
+            <UText :label="label" />
+            <UIcon name="notifications" size="xs" />
+          </URow>
+        </template>
+      </USwitch>
+
+      <USwitch
+        v-model="descriptionSlotValue"
+        label="Auto-save drafts"
+      >
+        <template #description>
+          <URow align="center" gap="2xs" class="text-neutral">
+            <UIcon name="cloud_sync" size="xs" class="mt-0.5" color="primary" />
+            <UText size="sm" variant="lifted">
+              Drafts sync across devices,
+              <ULink label="learn more" underlined size="sm" />.
+            </UText>
+          </URow>
+        </template>
+      </USwitch>
+    </UCol>
   `,
-};
+});

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

@@ -12,9 +12,11 @@ import UCol from "../../ui.container-col/UCol.vue";
 import URow from "../../ui.container-row/URow.vue";
 import tooltip from "../../v.tooltip/vTooltip";
 import UText from "../../ui.text-block/UText.vue";
+import ULink from "../../ui.button-link/ULink.vue";
 
 import type { Meta, StoryFn } from "@storybook/vue3-vite";
 import type { Props } from "../types";
+import { ref } from "vue";
 
 interface UTextareaArgs extends Props {
   slotTemplate?: string;
@@ -138,27 +140,60 @@ NoAutocomplete.parameters = {
 };
 
 export const Slots: StoryFn<UTextareaArgs> = (args) => ({
-  components: { UTextarea, URow, UIcon, UText },
+  components: { UTextarea, URow, UCol, UIcon, UText, ULink },
   directives: { tooltip },
-  setup: () => ({ args }),
+  setup: () => ({
+    args,
+    descriptionSlotValue: ref(""),
+    errorSlotValue: ref(""),
+  }),
   template: `
-    <URow>
-      <UTextarea v-bind="args" v-model="args.modelValue" :max-length="300">
-        <template #left>
-          <UText :label="args.modelValue?.length + '/300'" variant="lifted" />
-        </template>
-      </UTextarea>
-
-      <UTextarea v-bind="args">
-        <template #right>
-          <UIcon
-            name="send"
-            color="success"
-            v-tooltip="'Send message'"
-            interactive
-          />
-        </template>
-      </UTextarea>
-    </URow>
+    <UCol gap="3xl">
+      <URow block>
+        <UTextarea v-bind="args" v-model="args.modelValue" :max-length="300">
+          <template #left>
+            <UText :label="args.modelValue?.length + '/300'" variant="lifted" />
+          </template>
+        </UTextarea>
+
+        <UTextarea v-bind="args">
+          <template #right>
+            <UIcon
+              name="send"
+              color="success"
+              v-tooltip="'Send message'"
+              interactive
+            />
+          </template>
+        </UTextarea>
+      </URow>
+
+      <URow block>
+        <UTextarea v-model="descriptionSlotValue" label="Feedback">
+          <template #description>
+            <UText size="sm" variant="lifted">
+              Markdown is not supported, see
+              <ULink label="content guidelines" underlined size="sm" />.
+            </UText>
+          </template>
+        </UTextarea>
+
+        <UTextarea
+          v-model="errorSlotValue"
+          label="Message"
+          :error="true"
+        >
+          <template #error>
+            <UText size="sm" color="error">
+              <ul>
+                <li>Message is too short (minimum 10 characters)</li>
+                <li>Remove disallowed characters from your text</li>
+                <li>Try again after fixing the issues above</li>
+              </ul>
+            </UText>
+          </template>
+        </UTextarea>
+      </URow>
+    </UCol>
   `,
 });

package/ui.loader/tests/ULoader.test.ts

@@ -57,10 +57,10 @@ describe("ULoader.vue", () => {
         // Check if the ellipses have the correct color class
         const ellipses = component.findAll("[vl-key='ellipse']");
 
+        const expectedClass = color === "inherit" ? "bg-current" : `bg-${color}`;
+
         ellipses.forEach((ellipse) => {
-          color === "inherit"
-            ? expect(ellipse.classes()).toContain("bg-current")
-            : expect(ellipse.classes()).toContain(`bg-${color}`);
+          expect(ellipse.classes()).toContain(expectedClass);
         });
       });
     });

package/ui.navigation-progress/tests/UProgress.test.ts

@@ -133,9 +133,8 @@ describe("UProgress.vue", () => {
         const progressElement = component.find("progress");
         const stepperElement = component.findComponent(UStepperProgress);
 
-        isProgress
-          ? expect(progressElement.exists()).toBe(isProgress)
-          : expect(stepperElement.exists()).toBe(!isProgress);
+        expect(progressElement.exists()).toBe(isProgress);
+        expect(stepperElement.exists()).toBe(!isProgress);
       });
     });
 

package/ui.text-block/tests/UText.test.ts

@@ -66,9 +66,9 @@ describe("UText.vue", () => {
           },
         });
 
-        color === "text"
-          ? expect(component.attributes("class")).toContain("text-default")
-          : expect(component.attributes("class")).toContain(color);
+        const expectedInClass = color === "text" ? "text-default" : color;
+
+        expect(component.attributes("class")).toContain(expectedInClass);
       });
     });
 

package/ui.text-files/storybook/stories.ts

@@ -8,7 +8,10 @@ import {
 
 import UFiles from "../../ui.text-files/UFiles.vue";
 import URow from "../../ui.container-row/URow.vue";
+import UCol from "../../ui.container-col/UCol.vue";
 import UIcon from "../../ui.image-icon/UIcon.vue";
+import UText from "../../ui.text-block/UText.vue";
+import ULink from "../../ui.button-link/ULink.vue";
 
 import type { Meta, StoryFn } from "@storybook/vue3-vite";
 import type { Props } from "../types";
@@ -80,25 +83,39 @@ export const Sizes = EnumTemplate.bind({});
 Sizes.args = { enum: "size" };
 
 export const Slots: StoryFn<UFilesArgs> = (args) => ({
-  components: { UFiles, URow, UIcon },
+  components: { UFiles, URow, UCol, UIcon, UText, ULink },
   setup() {
     return { args };
   },
   template: `
-    <URow>
-      <UFiles v-bind="args">
-        <template #before-file="{ index }">
-          <UIcon v-if="index === 0" name="info" color="warning" size="xs" />
-          <UIcon v-if="index === 1" name="check_circle" color="success" size="xs" />
-        </template>
-      </UFiles>
+    <UCol gap="3xl">
+      <URow block>
+        <UFiles v-bind="args">
+          <template #before-file="{ index }">
+            <UIcon v-if="index === 0" name="info" color="warning" size="xs" />
+            <UIcon v-if="index === 1" name="check_circle" color="success" size="xs" />
+          </template>
+        </UFiles>
 
-      <UFiles v-bind="args">
-        <template #after-file="{ index }">
-          <UIcon v-if="index === 0" name="info" color="warning" size="xs" />
-          <UIcon v-if="index === 1" name="check_circle" color="success" size="xs" />
+        <UFiles v-bind="args">
+          <template #after-file="{ index }">
+            <UIcon v-if="index === 0" name="info" color="warning" size="xs" />
+            <UIcon v-if="index === 1" name="check_circle" color="success" size="xs" />
+          </template>
+        </UFiles>
+      </URow>
+
+      <UFiles v-bind="args" label="Documents">
+        <template #description>
+          <URow align="center" gap="2xs" class="text-neutral">
+            <UIcon name="folder" size="xs" class="mt-0.5" color="primary" />
+            <UText size="sm" variant="lifted">
+              Files are read-only here,
+              <ULink label="manage in storage" underlined size="sm" />.
+            </UText>
+          </URow>
         </template>
       </UFiles>
-    </URow>
+    </UCol>
   `,
 });