vueless 0.0.252 → 0.0.254

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.252",
+  "version": "0.0.254",
   "license": "MIT",
   "description": "Vue Styleless Component Framework.",
   "homepage": "https://vueless.com",

package/ui.button/configs/default.config.js

@@ -10,12 +10,12 @@ export default /*tw*/ {
     `,
     variants: {
       size: {
-        "2xs": "px-2 py-1 text-xs leading-tight gap-0.5",
-        xs: "px-3 py-1.5 text-xs leading-tight gap-0.5",
-        sm: "px-4 py-2 text-sm leading-tight gap-1",
-        md: "px-5 py-3 text-sm leading-tight gap-1",
-        lg: "px-6 py-3.5 text-base leading-tight gap-1.5",
-        xl: "px-7 py-4 text-base leading-tight gap-1.5",
+        "2xs": "px-2 py-1 text-xs gap-0.5",
+        xs: "px-3 py-1.5 text-xs gap-1",
+        sm: "px-4 py-2 text-sm gap-1.5",
+        md: "px-5 py-3 text-sm gap-1.5",
+        lg: "px-6 py-3.5 text-base gap-1.5",
+        xl: "px-7 py-4 text-base gap-2",
       },
       variant: {
         primary: `
@@ -134,11 +134,11 @@ export default /*tw*/ {
       },
       { filled: true, variant: "thirdary", color: "white", class: "bg-gray-50" },
       { iconLeft: true, size: "2xs", class: "pl-1" },
-      { iconLeft: true, size: "xs", class: "pl-1.5" },
-      { iconLeft: true, size: "sm", class: "pl-2" },
+      { iconLeft: true, size: "xs", class: "pl-2" },
+      { iconLeft: true, size: "sm", class: "pl-3" },
       { iconLeft: true, size: "md", class: "pl-4" },
-      { iconLeft: true, size: "lg", class: "pl-3.5" },
-      { iconLeft: true, size: "xl", class: "pl-4" },
+      { iconLeft: true, size: "lg", class: "pl-5" },
+      { iconLeft: true, size: "xl", class: "pl-6" },
       { iconRight: true, size: "2xs", class: "pr-1" },
       { iconRight: true, size: "xs", class: "pr-2" },
       { iconRight: true, size: "sm", class: "pr-3" },
@@ -154,6 +154,8 @@ export default /*tw*/ {
     ],
   },
   text: "whitespace-nowrap focus-visible:outline-none",
+  iconLeft: "{UIcon}",
+  iconRight: "{UIcon}",
   defaultVariants: {
     color: "brand",
     variant: "primary",

package/ui.button/index.vue

@@ -33,6 +33,7 @@
             :size="iconSize"
             :color="componentColor"
             internal
+            v-bind="iconLeftAttrs"
           />
         </slot>
       </div>
@@ -71,6 +72,7 @@
             :size="iconSize"
             :color="componentColor"
             internal
+            v-bind="iconRightAttrs"
           />
         </slot>
       </div>
@@ -234,7 +236,8 @@ const props = defineProps({
   },
 });
 
-const { buttonAttrs, loaderAttrs, textAttrs, hasSlotContent } = useAttrs(props);
+const { buttonAttrs, loaderAttrs, textAttrs, iconLeftAttrs, iconRightAttrs, hasSlotContent } =
+  useAttrs(props);
 
 const buttonRef = ref(null);
 
@@ -255,12 +258,12 @@ const loaderSize = computed(() => {
 
 const iconSize = computed(() => {
   const sizes = {
-    "2xs": "3xs",
-    xs: "2xs",
-    sm: "xs",
+    "2xs": "xs",
+    xs: "xs",
+    sm: "sm",
     md: "sm",
     lg: "md",
-    xl: "lg",
+    xl: "md",
   };
 
   return sizes[props.size];

package/ui.form-calendar/index.stories.js

@@ -1,4 +1,4 @@
-import { getArgTypes, getSlotNames, allSlotsFragment } from "../service.storybook";
+import { getArgTypes, getSlotNames, getSlotsFragment } from "../service.storybook";
 
 import UCalendar from "../ui.form-calendar";
 
@@ -36,7 +36,7 @@ const DefaultTemplate = (args) => ({
   },
   template: `
       <UCalendar v-bind="args" v-model="value">
-        ${allSlotsFragment}
+        ${args.slotTemplate || getSlotsFragment()}
       </UCalendar>
 
       <div class="mt-4">
@@ -52,8 +52,8 @@ export const Range = DefaultTemplate.bind({});
 Range.args = {
   range: true,
   value: {
-    from: new Date(2022, 2),
-    to: new Date(2024, 2, 14, 12, 24, 14),
+    from: new Date(new Date().setDate(new Date().getDate() - new Date().getDay())),
+    to: new Date(new Date().setDate(new Date().getDate() + (6 - new Date().getDay()))),
   },
 };
 

package/ui.form-color-picker/index.stories.js

@@ -1,4 +1,4 @@
-import { getArgTypes } from "../service.storybook";
+import { getArgTypes, getSlotNames, getSlotsFragment } from "../service.storybook";
 import UColorPicker from "../ui.form-color-picker";
 import UCol from "../ui.container-col";
 
@@ -21,30 +21,34 @@ export default {
 const DefaultTemplate = (args) => ({
   components: { UColorPicker },
   setup() {
-    return { args };
+    const slots = getSlotNames(UColorPicker.name);
+
+    return { args, slots };
   },
   template: `
-    <UColorPicker v-bind="args" v-model="args.value"/>
+    <UColorPicker v-bind="args" v-model="args.value">
+      ${args.slotTemplate || getSlotsFragment()}
+    </UColorPicker>
   `,
 });
 
-const SizesTemplate = (args, { argTypes } = {}) => ({
+const EnumVariantTemplate = (args, { argTypes } = {}) => ({
   components: { UCol, UColorPicker },
   setup() {
     return {
       args,
-      sizes: argTypes.size.options,
+      options: argTypes[args.enum].options,
     };
   },
   template: `
     <UCol>
       <UColorPicker
-        v-for="(size, index) in sizes"
-        v-bind="args"
-        :size="size"
+        v-for="(option, index) in options"
         :key="index"
-        :name="size"
+        v-bind="args"
         v-model="args.value"
+        :[args.enum]="option"
+        :name="option"
       />
     </UCol>
   `,
@@ -53,8 +57,8 @@ const SizesTemplate = (args, { argTypes } = {}) => ({
 export const Default = DefaultTemplate.bind({});
 Default.args = {};
 
-export const Sizes = SizesTemplate.bind({});
-Sizes.args = {};
+export const Sizes = EnumVariantTemplate.bind({});
+Sizes.args = { enum: "size" };
 
 export const Description = DefaultTemplate.bind({});
 Description.args = { description: "Description" };

package/ui.form-date-picker/configs/default.config.js

@@ -15,6 +15,7 @@ export default /*tw*/ {
       },
       openDirectionY: {
         top: "bottom-full mt-0",
+        bottom: "top-full mb-0",
       },
     },
   },

package/ui.form-date-picker/index.stories.js

@@ -1,4 +1,4 @@
-import { getArgTypes, getSlotNames, allSlotsFragment } from "../service.storybook";
+import { getArgTypes, getSlotNames, getSlotsFragment } from "../service.storybook";
 
 import UDatePicker from "../ui.form-date-picker";
 import UIcon from "../ui.image-icon";
@@ -27,7 +27,7 @@ export default {
 };
 
 const DefaultTemplate = (args) => ({
-  components: { UDatePicker },
+  components: { UDatePicker, UIcon },
   setup() {
     const slots = getSlotNames(UDatePicker.name);
 
@@ -40,7 +40,7 @@ const DefaultTemplate = (args) => ({
   },
   template: `
     <UDatePicker v-bind="args" v-model="value">
-      ${allSlotsFragment}
+      ${args.slotTemplate || getSlotsFragment()}
     </UDatePicker>
 
     <div class="mt-4">
@@ -49,24 +49,23 @@ const DefaultTemplate = (args) => ({
   `,
 });
 
-const SizesTemplate = (args, { argTypes } = {}) => ({
+const EnumVariantTemplate = (args, { argTypes } = {}) => ({
   components: { UDatePicker, URow },
   setup() {
     return {
       args,
-      sizes: argTypes.size.options,
+      options: argTypes[args.enum].options,
     };
   },
   template: `
     <URow>
       <UDatePicker
-        v-for="(size, index) in sizes"
-        :size="size"
-        :label="size"
-        v-bind="args"
+        v-for="(option, index) in options"
         :key="index"
-      >
-      </UDatePicker>
+        v-bind="args"
+        :[args.enum]="option"
+        :label="option"
+      />
     </URow>
   `,
 });
@@ -83,50 +82,44 @@ const OpenDirectionTemplate = (args) => ({
       <UDatePicker
         class="w-full"
         open-direction-y="top"
+        open-direction-x="left"
         v-bind="args"
         v-model="args.value"
+        label="Top Left"
       />
       <UDatePicker
         class="w-full"
-        open-direction-y="bottom"
+        open-direction-y="top"
         open-direction-x="right"
         v-bind="args"
         v-model="args.value"
+        label="Top Right"
       />
       <UDatePicker
         class="w-full"
         open-direction-y="bottom"
+        open-direction-x="left"
         v-bind="args"
         v-model="args.value"
+        label="Bottom Left"
       />
       <UDatePicker
         class="w-full"
         open-direction-y="bottom"
-        open-direction-x="left"
+        open-direction-x="right"
         v-bind="args"
         v-model="args.value"
+        label="Bottom Right"
       />
     </URow>
   `,
 });
 
-const SlotTemplate = (args) => ({
-  components: { UDatePicker, UIcon },
-  setup() {
-    return { args };
-  },
-  template: `
-    <UDatePicker v-bind="args">
-      ${args.slotTemplate}
-    </UDatePicker>
-  `,
-});
-
 export const Default = DefaultTemplate.bind({});
 Default.args = { value: new Date() };
 
-export const sizes = SizesTemplate.bind({});
-sizes.args = { label: "" };
+export const sizes = EnumVariantTemplate.bind({});
+sizes.args = { enum: "size", label: "" };
 
 export const openDirection = OpenDirectionTemplate.bind({});
 openDirection.args = {};
@@ -156,32 +149,29 @@ MinMax.args = {
   value: new Date(2022, 2, 24),
 };
 
-export const slotIcon = SlotTemplate.bind({});
+export const slotIcon = DefaultTemplate.bind({});
 slotIcon.args = {
   slotTemplate: `
     <template #right-icon>
-      <UIcon
-        name="star"
-        color="black"
-       />
+      <UIcon name="star" color="black" />
     </template>
   `,
 };
 
-export const slotRight = SlotTemplate.bind({});
+export const slotRight = DefaultTemplate.bind({});
 slotRight.args = {
   slotTemplate: `
     <template #right>
-        🤘🤘🤘
+      🤘🤘🤘
     </template>
   `,
 };
 
-export const slotLeft = SlotTemplate.bind({});
+export const slotLeft = DefaultTemplate.bind({});
 slotRight.args = {
   slotTemplate: `
     <template #left>
-        🤘🤘🤘
+      🤘🤘🤘
     </template>
   `,
 };

package/ui.form-date-picker-range/index.stories.js

@@ -1,4 +1,4 @@
-import { getArgTypes, getSlotNames, allSlotsFragment } from "../service.storybook";
+import { getArgTypes, getSlotNames, getSlotsFragment } from "../service.storybook";
 
 import UDatePickerRange from "../ui.form-date-picker-range";
 import URow from "../ui.container-row";
@@ -44,7 +44,7 @@ const DefaultTemplate = (args) => ({
   },
   template: `
     <UDatePickerRange v-bind="args" v-model="value">
-      ${allSlotsFragment}
+      ${args.slotTemplate || getSlotsFragment()}
     </UDatePickerRange>
 
     <div class="mt-4">
@@ -53,74 +53,65 @@ const DefaultTemplate = (args) => ({
   `,
 });
 
-const SlotTemplate = (args) => ({
-  components: { UDatePickerRange },
-  setup() {
-    return { args };
-  },
-  template: `
-    <UDatePickerRange v-bind="args" v-model="args.value">
-      ${args.slotTemplate}
-    </UDatePickerRange>
-  `,
-});
-
-const VariantsTemplate = (args, { argTypes } = {}) => ({
+const EnumVariantTemplate = (args, { argTypes } = {}) => ({
   components: { UDatePickerRange, URow },
   setup() {
     return {
       args,
-      variants: argTypes.variant.options,
+      options: argTypes[args.enum].options,
     };
   },
   template: `
     <URow>
       <UDatePickerRange
-        v-for="(variant, index) in variants"
-        :variant="variant"
+        v-for="(option, index) in options"
+        :key="index"
         v-bind="args"
         v-model="args.value"
-        :key="index"
+        :[args.enum]="option"
       />
     </URow>
   `,
 });
 
-const OpenDirectionTemplate = (args, { argTypes } = {}) => ({
+const OpenDirectionTemplate = (args) => ({
   components: { UDatePickerRange, URow },
   setup() {
-    return {
-      args,
-      directions: argTypes.openDirection.options,
-    };
+    return { args };
   },
   template: `
     <URow class="!flex-col">
       <UDatePickerRange
         class="w-full"
         open-direction-y="top"
+        open-direction-x="left"
         v-bind="args"
         v-model="args.value"
+        label="Top Left"
       />
       <UDatePickerRange
         class="w-full"
-        open-direction-y="bottom"
+        open-direction-y="top"
         open-direction-x="right"
         v-bind="args"
         v-model="args.value"
+        label="Top Right"
       />
       <UDatePickerRange
         class="w-full"
         open-direction-y="bottom"
+        open-direction-x="left"
         v-bind="args"
         v-model="args.value"
+        label="Bottom Left"
       />
       <UDatePickerRange
         class="w-full"
         open-direction-y="bottom"
-        open-direction-x="left"
+        open-direction-x="right"
         v-bind="args"
         v-model="args.value"
+        label="Bottom Right"
       />
     </URow>
   `,
@@ -129,14 +120,14 @@ const OpenDirectionTemplate = (args, { argTypes } = {}) => ({
 export const Default = DefaultTemplate.bind({});
 Default.args = {};
 
-export const variants = VariantsTemplate.bind({});
-variants.args = {};
+export const variants = EnumVariantTemplate.bind({});
+variants.args = { enum: "variant" };
 
 export const openDirection = OpenDirectionTemplate.bind({});
 openDirection.args = {};
 
-export const disabled = VariantsTemplate.bind({});
-disabled.args = { disabled: true };
+export const disabled = EnumVariantTemplate.bind({});
+disabled.args = { enum: "variant", disabled: true };
 
 export const label = DefaultTemplate.bind({});
 label.args = { variant: "input", label: "some label" };
@@ -174,7 +165,7 @@ customRangeButton.args = {
   value: { from: null, to: null },
 };
 
-export const slotLeft = SlotTemplate.bind({});
+export const slotLeft = DefaultTemplate.bind({});
 slotLeft.args = {
   variant: "input",
   slotTemplate: `
@@ -184,7 +175,7 @@ slotLeft.args = {
   `,
 };
 
-export const slotRight = SlotTemplate.bind({});
+export const slotRight = DefaultTemplate.bind({});
 slotRight.args = {
   variant: "input",
   slotTemplate: `

package/ui.form-input/configs/default.config.js

@@ -3,6 +3,8 @@ export default /*tw*/ {
   inputWrapper: "flex relative w-full",
   rightIconSlot: "flex items-center justify-end whitespace-nowrap pr-2 gap-1 rounded-dynamic rounded-l-none",
   leftIconSlot: "flex items-center justify-end whitespace-nowrap pl-2 gap-1 rounded-dynamic rounded-r-none",
+  iconLeft: "{UIcon}",
+  iconRight: "{UIcon}",
   passwordIcon: "",
   passwordVisibleIconName: "visibility-fill",
   passwordHiddenIconName: "visibility_off-fill",

package/ui.form-radio/index.stories.js

@@ -1,4 +1,4 @@
-import { getArgTypes, getSlotNames, allSlotsFragment } from "../service.storybook";
+import { getArgTypes, getSlotNames, getSlotsFragment } from "../service.storybook";
 
 import URadio from "../ui.form-radio";
 import UBadge from "../ui.text-badge";
@@ -22,7 +22,7 @@ export default {
 };
 
 const DefaultTemplate = (args) => ({
-  components: { URadio },
+  components: { URadio, UBadge },
   setup() {
     const slots = getSlotNames(URadio.name);
 
@@ -30,19 +30,7 @@ const DefaultTemplate = (args) => ({
   },
   template: `
     <URadio v-bind="args">
-      ${allSlotsFragment}
-    </URadio>
-  `,
-});
-
-const SlotTemplate = (args) => ({
-  components: { URadio, UBadge },
-  setup() {
-    return { args };
-  },
-  template: `
-    <URadio v-bind="args">
-      ${args.slotTemplate}
+      ${args.slotTemplate || getSlotsFragment()}
     </URadio>
   `,
 });
@@ -59,14 +47,14 @@ description.args = { name: "radio3", description: "description" };
 export const checked = DefaultTemplate.bind({});
 checked.args = { checked: true, name: "radio4" };
 
-export const slotFooter = SlotTemplate.bind({});
+export const slotFooter = DefaultTemplate.bind({});
 slotFooter.args = {
   name: "radio5",
   label: "radio",
   value: "radio",
   slotTemplate: `
     <template #footer>
-       <UBadge label="favourite" color="green" size="sm" />
+      <UBadge label="favourite" color="green" size="sm" />
     </template>
   `,
 };

package/ui.form-radio-group/index.stories.js

@@ -1,4 +1,4 @@
-import { getArgTypes } from "../service.storybook";
+import { getArgTypes, getSlotNames, getSlotsFragment } from "../service.storybook";
 
 import URadioGroup from "../ui.form-radio-group";
 import URadio from "../ui.form-radio";
@@ -13,24 +13,28 @@ export default {
   id: "3160",
   title: "Form Inputs & Controls / Radio Group",
   component: URadioGroup,
-  args: {
-    label: "Label",
-    value: "One",
-    radios: [
-      { name: "radio", label: "Radio 1", value: "1" },
-      { name: "radio", label: "Radio 2", value: "2" },
-      { name: "radio", label: "Radio 3", value: "3" },
-    ],
-  },
+  args: {},
   argTypes: {
     ...getArgTypes(URadioGroup.name),
   },
 };
 
+const defaultRadios = [
+  { name: "slotValues", label: "Boolean", value: false },
+  { name: "slotValues", label: "String", value: "One" },
+  { name: "slotValues", label: "Number", value: 3 },
+  { name: "slotValues", label: "Object", value: { key: "value" } },
+  { name: "slotValues", label: "Array", value: ["Array", 1] },
+];
+
 const DefaultTemplate = (args) => ({
   components: { URadioGroup, URadio, UAlert, URow, UCol },
   setup() {
-    return { args };
+    const slots = getSlotNames(URadioGroup.name);
+
+    const radios = args.radios ? args.radios : defaultRadios;
+
+    return { args, slots, radios };
   },
   data() {
     return {
@@ -40,7 +44,13 @@ const DefaultTemplate = (args) => ({
   template: `
     <UCol gap="2xl">
       <URadioGroup v-bind="args" v-model="value">
-        <URadio v-for="(radio, index) in args.radios" :key="index" v-bind="radio" />
+        <URadio
+          v-for="(radio, index) in radios"
+          :key="index"
+          v-bind="radio"
+        >
+          ${args.slotTemplate || getSlotsFragment()}
+        </URadio>
       </URadioGroup>
       <UAlert color="gray" size="xs">
         <code>Selected value: <b>{{ value }}</b></code>
@@ -49,78 +59,33 @@ const DefaultTemplate = (args) => ({
   `,
 });
 
-const OptionsTemplate = (args) => ({
-  components: { URadioGroup, URadio, UAlert, URow },
-  setup() {
-    return { args };
-  },
-  data() {
-    return {
-      value: args.value,
-    };
-  },
-  template: `
-    <URow class="!flex-col">
-      <URadioGroup v-bind="args" v-model="value" :options="args.radios" />
-
-      <URow>
-        <UAlert color="blue">
-          <p>Selected value: {{ value }}</p>
-        </UAlert>
-      </URow>
-    </URow>
-  `,
-});
-
-const ColorsTemplate = (args, { argTypes } = {}) => ({
+const EnumVariantTemplate = (args, { argTypes } = {}) => ({
   components: { URadioGroup, URow },
   setup() {
-    return { args };
-  },
-  data() {
+    const radios = defaultRadios;
+
     return {
-      value: args.value,
-      colors: argTypes.color.options,
+      args,
+      options: argTypes[args.enum].options,
+      radios,
     };
   },
-  template: `
-    <URow class="!flex-col">
-      <URadioGroup
-        v-bind="args"
-        v-for="color in colors"
-        :key="color"
-        :label="color"
-        :color="color"
-        :options="args.radios"
-        :name="color"
-        v-model="value"
-      />
-    </URow>
-  `,
-});
-
-const SizesTemplate = (args, { argTypes } = {}) => ({
-  components: { URadioGroup, URow },
-  setup() {
-    return { args };
-  },
   data() {
     return {
       value: args.value,
-      sizes: argTypes.size.options,
     };
   },
   template: `
     <URow class="!flex-col">
       <URadioGroup
+        v-for="(option, index) in options"
+        :key="index"
         v-bind="args"
-        v-for="size in sizes"
-        :key="size"
-        :label="size"
-        :size="size"
-        :options="args.radios"
-        :name="size"
         v-model="value"
+        :[args.enum]="option"
+        :label="option"
+        :options="radios"
+        :name="option"
       />
     </URow>
   `,
@@ -129,30 +94,22 @@ const SizesTemplate = (args, { argTypes } = {}) => ({
 export const Default = DefaultTemplate.bind({});
 Default.args = {
   name: "Default",
-  isDefaultStory: true,
-  radios: [
-    { name: "slotValues", label: "Boolean", value: false },
-    { name: "slotValues", label: "String", value: "One" },
-    { name: "slotValues", label: "Number", value: 3 },
-    { name: "slotValues", label: "Object", value: { key: "value" } },
-    { name: "slotValues", label: "Array", value: ["Array", 1] },
-  ],
 };
 
-export const Options = OptionsTemplate.bind({});
+export const Options = DefaultTemplate.bind({});
 Options.args = {
   name: "Options",
   radios: [
     { name: "radioValues", label: "Boolean", value: false },
-    { name: "radioValues", label: "String", value: "One" },
-    { name: "radioValues", label: "Number", value: 3 },
-    { name: "radioValues", label: "Object", value: { key: "value" } },
-    { name: "radioValues", label: "Array", value: ["Array", 1] },
+    { name: "radioValues", label: "String", value: "Custom string value" },
+    { name: "radioValues", label: "Number", value: 4 },
+    { name: "radioValues", label: "Object", value: { key: "Custom object value" } },
+    { name: "radioValues", label: "Array", value: ["Custom array value", 2] },
   ],
 };
 
-export const Colors = ColorsTemplate.bind({});
-Colors.args = { name: "Colors" };
+export const Colors = EnumVariantTemplate.bind({});
+Colors.args = { enum: "color", name: "Colors" };
 
-export const Sizes = SizesTemplate.bind({});
-Sizes.args = { name: "Sizes" };
+export const Sizes = EnumVariantTemplate.bind({});
+Sizes.args = { enum: "size", name: "Sizes" };

package/ui.form-select/configs/default.config.js

@@ -64,8 +64,10 @@ export default /*tw*/ {
       { size: "lg", multiple: true, class: "text-base" },
     ],
   },
-  leftIcon: "pr-3 flex items-center",
-  rightIcon: "pl-3 flex items-center",
+  leftIconWrapper: "pr-3 flex items-center",
+  rightIconWrapper: "pl-3 flex items-center",
+  iconLeft: "{UIcon}",
+  iconRight: "{UIcon}",
   beforeCaret: "",
   afterCaret: "mr-3",
   caret: {

package/ui.form-select/index.vue

@@ -78,7 +78,7 @@
         <span
           v-if="hasSlotContent($slots['icon-left']) || iconLeft"
           ref="leftSlotWrapperRef"
-          v-bind="leftIconAttrs"
+          v-bind="leftIconWrapperAttrs"
         >
           <!--
             @slot Use it to add icon before option.
@@ -86,7 +86,13 @@
             @binding {string} icon-size
           -->
           <slot name="icon-left" :icon-name="iconLeft" :icon-size="iconSize">
-            <UIcon v-if="iconLeft" :name="iconLeft" :size="iconSize" internal />
+            <UIcon
+              v-if="iconLeft"
+              :name="iconLeft"
+              :size="iconSize"
+              internal
+              v-bind="iconLeftAttrs"
+            />
           </slot>
         </span>
 
@@ -190,14 +196,23 @@
         <!-- @slot Use it to add something after input. -->
         <slot name="right" />
 
-        <span v-if="hasSlotContent($slots['icon-right']) || iconRight" v-bind="rightIconAttrs">
+        <span
+          v-if="hasSlotContent($slots['icon-right']) || iconRight"
+          v-bind="rightIconWrapperAttrs"
+        >
           <!--
             @slot Use it to add icon after option.
             @binding {string} icon-name
             @binding {string} icon-size
           -->
           <slot name="icon-right" :icon-name="iconRight" :icon-size="iconSize">
-            <UIcon v-if="iconRight" :name="iconRight" :size="iconSize" internal />
+            <UIcon
+              v-if="iconRight"
+              :name="iconRight"
+              :size="iconSize"
+              internal
+              v-bind="iconRightAttrs"
+            />
           </slot>
         </span>
       </div>
@@ -565,8 +580,10 @@ const {
   labelAttrs,
   wrapperAttrs,
   innerWrapperAttrs,
-  leftIconAttrs,
-  rightIconAttrs,
+  leftIconWrapperAttrs,
+  rightIconWrapperAttrs,
+  iconLeftAttrs,
+  iconRightAttrs,
   beforeCaretAttrs,
   afterCaretAttrs,
   toggleAttrs,

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.252",
+  "version": "0.0.254",
   "contributions": {
     "html": {
       "description-markup": "markdown",