vueless 0.0.282 → 0.0.284

package/package.json

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

package/ui.button/composables/attrs.composable.js

@@ -22,8 +22,8 @@ export default function useAttrs(props) {
           ...props,
           color: getColor(props.color),
           square: props.loading || props.square,
-          iconLeft: Boolean(props.iconLeft) || hasSlotContent(slots["icon-left"]),
-          iconRight: Boolean(props.iconRight) || hasSlotContent(slots["icon-right"]),
+          leftIcon: Boolean(props.iconLeft) || hasSlotContent(slots["left-icon"]),
+          rightIcon: Boolean(props.iconRight) || hasSlotContent(slots["right-icon"]),
         });
       }
 

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

@@ -124,18 +124,18 @@ export default /*tw*/ {
       { filled: true, variant: "thirdary", class: "bg-{color}-600/10" },
       { filled: true, variant: "thirdary", color: "grayscale", class: "bg-gray-900/10" },
       { filled: true, variant: "thirdary", color: "white", class: "bg-gray-50" },
-      { iconLeft: true, size: "2xs", class: "pl-1" },
-      { 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-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" },
-      { iconRight: true, size: "md", class: "pr-4" },
-      { iconRight: true, size: "lg", class: "pr-5" },
-      { iconRight: true, size: "xl", class: "pr-6" },
+      { leftIcon: true, size: "2xs", class: "pl-1" },
+      { leftIcon: true, size: "xs", class: "pl-2" },
+      { leftIcon: true, size: "sm", class: "pl-3" },
+      { leftIcon: true, size: "md", class: "pl-4" },
+      { leftIcon: true, size: "lg", class: "pl-5" },
+      { leftIcon: true, size: "xl", class: "pl-6" },
+      { rightIcon: true, size: "2xs", class: "pr-1" },
+      { rightIcon: true, size: "xs", class: "pr-2" },
+      { rightIcon: true, size: "sm", class: "pr-3" },
+      { rightIcon: true, size: "md", class: "pr-4" },
+      { rightIcon: true, size: "lg", class: "pr-5" },
+      { rightIcon: true, size: "xl", class: "pr-6" },
       { square: true, size: "2xs", class: "p-1" },
       { square: true, size: "xs", class: "p-1.5" },
       { square: true, size: "sm", class: "p-2" },
@@ -145,8 +145,8 @@ export default /*tw*/ {
     ],
   },
   text: "whitespace-nowrap focus-visible:outline-none",
-  iconLeft: "{UIcon}",
-  iconRight: "{UIcon}",
+  leftIcon: "{UIcon}",
+  rightIcon: "{UIcon}",
   defaultVariants: {
     color: "brand",
     variant: "primary",

package/ui.button/index.stories.js

@@ -100,14 +100,14 @@ noRing.args = { noRing: true };
 export const colors = ColorTemplate.bind({});
 colors.args = {};
 
-export const iconLeft = DefaultTemplate.bind({});
-iconLeft.args = {
-  iconLeft: "star",
+export const leftIcon = DefaultTemplate.bind({});
+leftIcon.args = {
+  leftIcon: "star",
 };
 
-export const iconRight = DefaultTemplate.bind({});
-iconRight.args = {
-  iconRight: "star",
+export const rightIcon = DefaultTemplate.bind({});
+rightIcon.args = {
+  rightIcon: "star",
 };
 
 export const slotDefault = DefaultTemplate.bind({});
@@ -119,10 +119,10 @@ slotDefault.args = {
   `,
 };
 
-export const iconLeftSlot = DefaultTemplate.bind({});
-iconLeftSlot.args = {
+export const leftIconSlot = DefaultTemplate.bind({});
+leftIconSlot.args = {
   slotTemplate: `
-    <template #icon-left>
+    <template #left-icon>
       <UIcon
         name="star"
         color="green"
@@ -131,10 +131,10 @@ iconLeftSlot.args = {
   `,
 };
 
-export const iconRightSlot = DefaultTemplate.bind({});
-iconRightSlot.args = {
+export const rightIconSlot = DefaultTemplate.bind({});
+rightIconSlot.args = {
   slotTemplate: `
-    <template #icon-right>
+    <template #right-icon>
       <UIcon
         name="star"
         color="green"

package/ui.button/index.vue

@@ -14,7 +14,7 @@
     </template>
 
     <template v-else>
-      <div v-if="hasSlotContent($slots['icon-left']) || iconLeft">
+      <div v-if="hasSlotContent($slots['left-icon']) || leftIcon">
         <!--
           @slot Use it to add icon before the text.
           @binding {string} icon-name
@@ -22,18 +22,18 @@
           @binding {string} icon-color
         -->
         <slot
-          name="icon-left"
-          :icon-name="iconLeft"
+          name="left-icon"
+          :icon-name="leftIcon"
           :icon-size="iconSize"
           :icon-color="componentColor"
         >
           <UIcon
-            v-if="iconLeft"
-            :name="iconLeft"
+            v-if="leftIcon"
+            :name="leftIcon"
             :size="iconSize"
             :color="componentColor"
             internal
-            v-bind="iconLeftAttrs"
+            v-bind="leftIconAttrs"
           />
         </slot>
       </div>
@@ -53,7 +53,7 @@
       <!-- @slot Use it to add something after the text. -->
       <slot name="right" />
 
-      <div v-if="hasSlotContent($slots['icon-right']) || iconRight">
+      <div v-if="hasSlotContent($slots['right-icon']) || rightIcon">
         <!--
           @slot Use it to add icon after the text.
           @binding {string} icon-name
@@ -61,18 +61,18 @@
           @binding {string} icon-color
         -->
         <slot
-          name="icon-right"
-          :icon-name="iconRight"
+          name="right-icon"
+          :icon-name="rightIcon"
           :icon-size="iconSize"
           :icon-color="componentColor"
         >
           <UIcon
-            v-if="iconRight"
-            :name="iconRight"
+            v-if="rightIcon"
+            :name="rightIcon"
             :size="iconSize"
             :color="componentColor"
             internal
-            v-bind="iconRightAttrs"
+            v-bind="rightIconAttrs"
           />
         </slot>
       </div>
@@ -125,7 +125,7 @@ const props = defineProps({
   /**
    * Left side icon name.
    */
-  iconLeft: {
+  leftIcon: {
     type: String,
     default: "",
   },
@@ -133,7 +133,7 @@ const props = defineProps({
   /**
    * Right side icon name.
    */
-  iconRight: {
+  rightIcon: {
     type: String,
     default: "",
   },
@@ -236,7 +236,7 @@ const props = defineProps({
   },
 });
 
-const { buttonAttrs, loaderAttrs, textAttrs, iconLeftAttrs, iconRightAttrs, hasSlotContent } =
+const { buttonAttrs, loaderAttrs, textAttrs, leftIconAttrs, rightIconAttrs, hasSlotContent } =
   useAttrs(props);
 
 const buttonRef = ref(null);

package/ui.dropdown-button/index.vue

@@ -14,7 +14,7 @@
       v-bind="buttonAttrs"
       @click="onClickButton"
     >
-      <template #icon-right>
+      <template #right-icon>
         <UIcon
           v-if="!noIcon"
           internal

package/ui.form-calendar/index.vue

@@ -11,7 +11,7 @@
           no-ring
           size="sm"
           variant="thirdary"
-          :icon-right="config.dayViewSwitchLabelIconName"
+          :right-icon="config.dayViewSwitchLabelIconName"
           v-bind="navigationSwitchViewButtonAttrs"
           @mousedown.prevent.capture
           @click="onClickViewSwitch"
@@ -31,7 +31,7 @@
           no-ring
           size="sm"
           variant="thirdary"
-          :icon-left="config.prevIconName"
+          :left-icon="config.prevIconName"
           v-bind="nextPrevButtonAttrs"
           @mousedown.prevent.capture
           @click="onClickPrevButton"
@@ -44,7 +44,7 @@
           no-ring
           size="sm"
           variant="thirdary"
-          :icon-left="config.nextIconName"
+          :left-icon="config.nextIconName"
           v-bind="nextPrevButtonAttrs"
           @mousedown.prevent.capture
           @click="onClickNextButton"

package/ui.form-date-picker-range/index.vue

@@ -19,8 +19,8 @@
         <slot name="left" />
       </template>
 
-      <template #icon-right>
-        <slot name="icon-right" />
+      <template #right-icon>
+        <slot name="right-icon" />
       </template>
 
       <template #right>
@@ -37,7 +37,7 @@
         :size="size"
         :disabled="disabled"
         variant="thirdary"
-        :icon-left="config.prevIconName"
+        :left-icon="config.prevIconName"
         v-bind="shiftRangeButtonAttrs"
         @click="onClickShiftRange('prev')"
       />
@@ -64,7 +64,7 @@
         :size="size"
         :disabled="disabled"
         variant="thirdary"
-        :icon-left="config.nextIconName"
+        :left-icon="config.nextIconName"
         v-bind="shiftRangeButtonAttrs"
         @click="onClickShiftRange('next')"
       />
@@ -116,7 +116,7 @@
             size="xs"
             variant="thirdary"
             :label="locale.ownRange"
-            :icon-left="config.periodButtonIconName"
+            :left-icon="config.periodButtonIconName"
             v-bind="periodButtonAttrs(getPeriodButtonsClasses(PERIOD.ownRange))"
             @click="onClickOwnRange"
           />
@@ -130,7 +130,7 @@
               size="xs"
               color="gray"
               variant="thirdary"
-              :icon-left="config.prevIconName"
+              :left-icon="config.prevIconName"
               v-bind="rangeSwitchButtonAttrs"
               @click="onClickShiftDatesList('prev')"
             />
@@ -145,7 +145,7 @@
               size="xs"
               color="gray"
               variant="thirdary"
-              :icon-left="config.nextIconName"
+              :left-icon="config.nextIconName"
               v-bind="rangeSwitchButtonAttrs"
               @click="onClickShiftDatesList('next')"
             />

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

@@ -3,8 +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}",
+  leftIcon: "{UIcon}",
+  rightIcon: "{UIcon}",
   passwordIcon: "",
   passwordVisibleIconName: "visibility-fill",
   passwordHiddenIconName: "visibility_off-fill",

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

@@ -89,20 +89,20 @@ sizes.args = { enum: "size" };
 export const validationRules = EnumVariantTemplate.bind({});
 validationRules.args = { enum: "validationRule" };
 
-export const iconLeft = DefaultTemplate.bind({});
-iconLeft.args = {
-  iconLeft: "star",
+export const leftIcon = DefaultTemplate.bind({});
+leftIcon.args = {
+  leftIcon: "star",
 };
 
-export const iconRight = DefaultTemplate.bind({});
-iconRight.args = {
-  iconRight: "star",
+export const rightIcon = DefaultTemplate.bind({});
+rightIcon.args = {
+  rightIcon: "star",
 };
 
-export const iconLeftSlot = DefaultTemplate.bind({});
-iconLeftSlot.args = {
+export const leftIconSlot = DefaultTemplate.bind({});
+leftIconSlot.args = {
   slotTemplate: `
-    <template #icon-left>
+    <template #left-icon>
       <UIcon
         name="star"
         color="green"
@@ -111,10 +111,10 @@ iconLeftSlot.args = {
   `,
 };
 
-export const iconRightSlot = DefaultTemplate.bind({});
-iconRightSlot.args = {
+export const rightIconSlot = DefaultTemplate.bind({});
+rightIconSlot.args = {
   slotTemplate: `
-    <template #icon-right>
+    <template #right-icon>
       <UIcon
         name="star"
         color="green"

package/ui.form-input/index.vue

@@ -18,7 +18,7 @@
       </span>
 
       <span
-        v-if="hasSlotContent($slots['icon-left']) || iconLeft"
+        v-if="hasSlotContent($slots['left-icon']) || leftIcon"
         ref="leftSlotWrapperRef"
         v-bind="leftIconSlotAttrs"
       >
@@ -27,8 +27,14 @@
           @binding {string} icon-name
           @binding {string} icon-size
         -->
-        <slot name="icon-left" :icon-name="iconLeft" :icon-size="iconSize">
-          <UIcon v-if="iconLeft" :name="iconLeft" :size="iconSize" internal />
+        <slot name="left-icon" :icon-name="leftIcon" :icon-size="iconSize">
+          <UIcon
+            v-if="leftIcon"
+            :name="leftIcon"
+            :size="iconSize"
+            internal
+            v-bind="leftIconAttrs"
+          />
         </slot>
       </span>
 
@@ -67,14 +73,20 @@
         />
       </label>
 
-      <span v-if="hasSlotContent($slots['icon-right']) || iconRight" v-bind="rightIconSlotAttrs">
+      <span v-if="hasSlotContent($slots['right-icon']) || rightIcon" v-bind="rightIconSlotAttrs">
         <!--
           @slot Use it to add icon after the text.
           @binding {string} icon-name
           @binding {string} icon-size
         -->
-        <slot name="icon-right" :icon-name="iconLeft" :icon-size="iconSize">
-          <UIcon v-if="iconRight" :name="iconRight" :size="iconSize" internal />
+        <slot name="right-icon" :icon-name="rightIcon" :icon-size="iconSize">
+          <UIcon
+            v-if="rightIcon"
+            :name="rightIcon"
+            :size="iconSize"
+            internal
+            v-bind="rightIconAttrs"
+          />
         </slot>
       </span>
 
@@ -211,7 +223,7 @@ const props = defineProps({
   /**
    * Left side icon name.
    */
-  iconLeft: {
+  leftIcon: {
     type: String,
     default: "",
   },
@@ -219,7 +231,7 @@ const props = defineProps({
   /**
    * Right side icon name.
    */
-  iconRight: {
+  rightIcon: {
     type: String,
     default: "",
   },
@@ -340,7 +352,9 @@ const {
   labelAttrs,
   passwordIconAttrs,
   leftIconSlotAttrs,
+  leftIconAttrs,
   inputWrapperAttrs,
+  rightIconAttrs,
   rightIconSlotAttrs,
   hasSlotContent,
 } = useAttrs(props, { isTypePassword, inputPasswordClasses });
@@ -433,7 +447,7 @@ function transformValue(value, exp) {
 
 function setLabelPosition() {
   const shouldAlignLabelOnTop =
-    !hasSlotContent(slots["icon-left"]) && !hasSlotContent(slots["left"]) && !props.iconLeft;
+    !hasSlotContent(slots["left-icon"]) && !hasSlotContent(slots["left"]) && !props.leftIcon;
 
   if (props.labelAlign === "top" || shouldAlignLabelOnTop) {
     return;

package/ui.form-input-file/index.vue

@@ -47,7 +47,7 @@
               tag="label"
               variant="thirdary"
               :size="buttonSize"
-              :icon-right="config.chooseFileIconName"
+              :right-icon="config.chooseFileIconName"
               :label="currentLocale.uploadFile"
               :disabled="disabled"
               v-bind="chooseFileButtonAttrs"
@@ -74,7 +74,7 @@
             variant="thirdary"
             :size="buttonSize"
             :disabled="disabled"
-            :icon-left="config.clearIconName"
+            :left-icon="config.clearIconName"
             v-bind="clearButtonAttrs"
             :data-cy="`${dataCy}-clear`"
             @click="onClickResetFiles"

package/ui.form-input-search/index.vue

@@ -21,12 +21,12 @@
       <slot name="left" />
     </template>
 
-    <template #icon-left>
+    <template #left-icon>
       <!-- @slot Use it to add icon before the text. -->
-      <slot name="icon-left" />
+      <slot name="left-icon" />
     </template>
 
-    <template #icon-right>
+    <template #right-icon>
       <UIcon
         v-if="modelValue"
         internal
@@ -41,7 +41,7 @@
 
       <!-- @slot Use it to add icon after the text. -->
       <slot
-        name="icon-right"
+        name="right-icon"
         :icon-name="config.searchIconName"
         :icon-size="iconSize"
         :search-button-label="searchButtonLabel"

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

@@ -66,8 +66,8 @@ export default /*tw*/ {
   },
   leftIconWrapper: "pr-3 flex items-center",
   rightIconWrapper: "pl-3 flex items-center",
-  iconLeft: "{UIcon}",
-  iconRight: "{UIcon}",
+  leftIcon: "{UIcon}",
+  rightIcon: "{UIcon}",
   beforeCaret: "",
   afterCaret: "mr-3",
   caret: {

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

@@ -234,29 +234,29 @@ slotBeforeOption.args = {
   `,
 };
 
-export const iconLeft = DefaultTemplate.bind({});
-iconLeft.args = {
-  iconLeft: "star",
+export const leftIcon = DefaultTemplate.bind({});
+leftIcon.args = {
+  leftIcon: "star",
 };
 
-export const iconRight = DefaultTemplate.bind({});
-iconRight.args = {
-  iconRight: "star",
+export const rightIcon = DefaultTemplate.bind({});
+rightIcon.args = {
+  rightIcon: "star",
 };
 
-export const iconLeftSlot = DefaultTemplate.bind({});
-iconLeftSlot.args = {
+export const leftIconSlot = DefaultTemplate.bind({});
+leftIconSlot.args = {
   slotTemplate: `
-    <template #icon-left>
+    <template #left-icon>
       <UIcon name="star" color="green" />
     </template>
   `,
 };
 
-export const iconRightSlot = DefaultTemplate.bind({});
-iconRightSlot.args = {
+export const rightIconSlot = DefaultTemplate.bind({});
+rightIconSlot.args = {
   slotTemplate: `
-    <template #icon-right>
+    <template #right-icon>
       <UIcon name="star" color="green" />
     </template>
   `,

package/ui.form-select/index.vue

@@ -76,7 +76,7 @@
 
       <div ref="innerWrapperRef" v-bind="innerWrapperAttrs">
         <span
-          v-if="hasSlotContent($slots['icon-left']) || iconLeft"
+          v-if="hasSlotContent($slots['left-icon']) || leftIcon"
           ref="leftSlotWrapperRef"
           v-bind="leftIconWrapperAttrs"
         >
@@ -85,13 +85,13 @@
             @binding {string} icon-name
             @binding {string} icon-size
           -->
-          <slot name="icon-left" :icon-name="iconLeft" :icon-size="iconSize">
+          <slot name="left-icon" :icon-name="leftIcon" :icon-size="iconSize">
             <UIcon
-              v-if="iconLeft"
-              :name="iconLeft"
+              v-if="leftIcon"
+              :name="leftIcon"
               :size="iconSize"
               internal
-              v-bind="iconLeftAttrs"
+              v-bind="leftIconAttrs"
             />
           </slot>
         </span>
@@ -197,7 +197,7 @@
         <slot name="right" />
 
         <span
-          v-if="hasSlotContent($slots['icon-right']) || iconRight"
+          v-if="hasSlotContent($slots['right-icon']) || rightIcon"
           v-bind="rightIconWrapperAttrs"
         >
           <!--
@@ -205,13 +205,13 @@
             @binding {string} icon-name
             @binding {string} icon-size
           -->
-          <slot name="icon-right" :icon-name="iconRight" :icon-size="iconSize">
+          <slot name="right-icon" :icon-name="rightIcon" :icon-size="iconSize">
             <UIcon
-              v-if="iconRight"
-              :name="iconRight"
+              v-if="rightIcon"
+              :name="rightIcon"
               :size="iconSize"
               internal
-              v-bind="iconRightAttrs"
+              v-bind="rightIconAttrs"
             />
           </slot>
         </span>
@@ -363,7 +363,7 @@ const props = defineProps({
   /**
    * Left side icon name.
    */
-  iconLeft: {
+  leftIcon: {
     type: String,
     default: "",
   },
@@ -371,7 +371,7 @@ const props = defineProps({
   /**
    * Right side icon name.
    */
-  iconRight: {
+  rightIcon: {
     type: String,
     default: "",
   },
@@ -583,8 +583,8 @@ const {
   innerWrapperAttrs,
   leftIconWrapperAttrs,
   rightIconWrapperAttrs,
-  iconLeftAttrs,
-  iconRightAttrs,
+  leftIconAttrs,
+  rightIconAttrs,
   beforeCaretAttrs,
   afterCaretAttrs,
   toggleAttrs,
@@ -824,7 +824,7 @@ function setLabelPosition() {
   if (
     props.labelAlign === "top" ||
     !hasSlotContent(slots["left"]) ||
-    (!hasSlotContent(slots["icon-left"]) && !props.iconLeft)
+    (!hasSlotContent(slots["left-icon"]) && !props.leftIcon)
   ) {
     return;
   }

package/ui.text-badge/configs/default.config.js

@@ -37,6 +37,8 @@ export default /*tw*/ {
       },
     },
   },
+  leftIcon: "{UIcon}",
+  rightIcon: "{UIcon}",
   defaultVariants: {
     color: "brand",
     size: "md",

package/ui.text-badge/index.stories.js

@@ -96,28 +96,54 @@ Weight.args = { enum: "weight" };
 export const Colors = ColorsTemplate.bind({});
 Colors.args = {};
 
-export const slotRight = DefaultTemplate.bind({});
-slotRight.args = {
+export const leftIcon = DefaultTemplate.bind({});
+leftIcon.args = {
+  leftIcon: "star",
+};
+
+export const rightIcon = DefaultTemplate.bind({});
+rightIcon.args = {
+  rightIcon: "star",
+};
+
+export const leftIconSlot = DefaultTemplate.bind({});
+leftIconSlot.args = {
   slotTemplate: `
-    <template #right>
+    <template #left-icon>
       <UIcon
-        tooltip="tooltip text"
         name="info"
-        size="xs"
+        color="red"
       />
     </template>
   `,
 };
 
-export const slotLeft = DefaultTemplate.bind({});
-slotLeft.args = {
+export const rightIconSlot = DefaultTemplate.bind({});
+rightIconSlot.args = {
   slotTemplate: `
-    <template #left>
+    <template #right-icon>
       <UIcon
-        tooltip="tooltip text"
         name="info"
-        size="xs"
+        color="red"
       />
     </template>
   `,
 };
+
+export const slotLeft = DefaultTemplate.bind({});
+slotLeft.args = {
+  slotTemplate: `
+    <template #left>
+      🤘
+    </template>
+  `,
+};
+
+export const slotRight = DefaultTemplate.bind({});
+slotRight.args = {
+  slotTemplate: `
+    <template #right>
+      🤘
+    </template>
+  `,
+};

package/ui.text-badge/index.vue

@@ -13,6 +13,25 @@
       <!-- @slot Use it to add something before text. -->
       <slot name="left" />
 
+      <div v-if="hasSlotContent($slots['left-icon']) || leftIcon">
+        <!--
+          @slot Use it to add icon before the text.
+          @binding {string} icon-name
+          @binding {string} icon-size
+          @binding {string} icon-color
+        -->
+        <slot name="left-icon" :icon-name="leftIcon" :icon-size="iconSize" :icon-color="color">
+          <UIcon
+            v-if="leftIcon"
+            :name="leftIcon"
+            :size="iconSize"
+            :color="color"
+            internal
+            v-bind="leftIconAttrs"
+          />
+        </slot>
+      </div>
+
       <!-- @slot Use it to add something instead of text. -->
       <slot>
         <div v-if="!hasSlotContent($slots['default'])">
@@ -20,6 +39,25 @@
         </div>
       </slot>
 
+      <div v-if="hasSlotContent($slots['right-icon']) || rightIcon">
+        <!--
+          @slot Use it to add icon after the text.
+          @binding {string} icon-name
+          @binding {string} icon-size
+          @binding {string} icon-color
+        -->
+        <slot name="right-icon" :icon-name="rightIcon" :icon-size="iconSize" :icon-color="color">
+          <UIcon
+            v-if="rightIcon"
+            :name="rightIcon"
+            :size="iconSize"
+            :color="color"
+            internal
+            v-bind="rightIconAttrs"
+          />
+        </slot>
+      </div>
+
       <!-- @slot Use it to add something after text. -->
       <slot name="right" />
     </div>
@@ -27,9 +65,10 @@
 </template>
 
 <script setup>
-import { ref } from "vue";
+import { ref, computed } from "vue";
 
 import { getDefault } from "../service.ui";
+import UIcon from "../ui.image-icon";
 
 import { UBadge } from "./constants";
 import useAttrs from "./composables/attrs.composable";
@@ -66,6 +105,22 @@ const props = defineProps({
     default: getDefault(defaultConfig, UBadge).size,
   },
 
+  /**
+   * Left side icon name.
+   */
+  leftIcon: {
+    type: String,
+    default: "",
+  },
+
+  /**
+   * Right side icon name.
+   */
+  rightIcon: {
+    type: String,
+    default: "",
+  },
+
   /**
    * Badge font weight.
    * @values regular, medium, bold
@@ -123,12 +178,22 @@ const emit = defineEmits([
   "click",
 ]);
 
-const { bodyAttrs, wrapperAttrs, hasSlotContent } = useAttrs(props);
+const { bodyAttrs, wrapperAttrs, leftIconAttrs, rightIconAttrs, hasSlotContent } = useAttrs(props);
 
 const wrapperRef = ref(null);
 
 defineExpose({ wrapperRef });
 
+const iconSize = computed(() => {
+  const sizes = {
+    sm: "xs",
+    md: "sm",
+    lg: "md",
+  };
+
+  return sizes[props.size];
+});
+
 function onFocus() {
   emit("focus");
 }

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.282",
+  "version": "0.0.284",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -686,6 +686,24 @@
               },
               "default": "md"
             },
+            {
+              "name": "leftIcon",
+              "description": "Left side icon name.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "\"\""
+            },
+            {
+              "name": "rightIcon",
+              "description": "Right side icon name.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "\"\""
+            },
             {
               "name": "weight",
               "description": "Badge font weight.",
@@ -746,10 +764,48 @@
               "name": "left",
               "description": "Use it to add something before text."
             },
+            {
+              "name": "left-icon",
+              "scoped": true,
+              "description": "Use it to add icon before the text.",
+              "bindings": [
+                {
+                  "type": "string",
+                  "name": "icon-name"
+                },
+                {
+                  "type": "string",
+                  "name": "icon-size"
+                },
+                {
+                  "type": "string",
+                  "name": "icon-color"
+                }
+              ]
+            },
             {
               "name": "default",
               "description": "Use it to add something instead of text."
             },
+            {
+              "name": "right-icon",
+              "scoped": true,
+              "description": "Use it to add icon after the text.",
+              "bindings": [
+                {
+                  "type": "string",
+                  "name": "icon-name"
+                },
+                {
+                  "type": "string",
+                  "name": "icon-size"
+                },
+                {
+                  "type": "string",
+                  "name": "icon-color"
+                }
+              ]
+            },
             {
               "name": "right",
               "description": "Use it to add something after text."
@@ -792,7 +848,7 @@
               "default": "md"
             },
             {
-              "name": "iconLeft",
+              "name": "leftIcon",
               "description": "Left side icon name.",
               "value": {
                 "kind": "expression",
@@ -801,7 +857,7 @@
               "default": "\"\""
             },
             {
-              "name": "iconRight",
+              "name": "rightIcon",
               "description": "Right side icon name.",
               "value": {
                 "kind": "expression",
@@ -920,7 +976,7 @@
           ],
           "slots": [
             {
-              "name": "icon-left",
+              "name": "left-icon",
               "scoped": true,
               "description": "Use it to add icon before the text.",
               "bindings": [
@@ -951,7 +1007,7 @@
               "description": "Use it to add something after the text."
             },
             {
-              "name": "icon-right",
+              "name": "right-icon",
               "scoped": true,
               "description": "Use it to add icon after the text.",
               "bindings": [
@@ -2438,7 +2494,7 @@
               "name": "left"
             },
             {
-              "name": "icon-right"
+              "name": "right-icon"
             },
             {
               "name": "right"
@@ -4023,7 +4079,7 @@
               "default": "md"
             },
             {
-              "name": "iconLeft",
+              "name": "leftIcon",
               "description": "Left side icon name.",
               "value": {
                 "kind": "expression",
@@ -4032,7 +4088,7 @@
               "default": "\"\""
             },
             {
-              "name": "iconRight",
+              "name": "rightIcon",
               "description": "Right side icon name.",
               "value": {
                 "kind": "expression",
@@ -4189,7 +4245,7 @@
               "description": "Use it to add something before the text."
             },
             {
-              "name": "icon-left",
+              "name": "left-icon",
               "scoped": true,
               "description": "Use it to add icon before the text.",
               "bindings": [
@@ -4204,7 +4260,7 @@
               ]
             },
             {
-              "name": "icon-right",
+              "name": "right-icon",
               "scoped": true,
               "description": "Use it to add icon after the text.",
               "bindings": [
@@ -5029,11 +5085,11 @@
               "description": "Use it to add something before the text."
             },
             {
-              "name": "icon-left",
+              "name": "left-icon",
               "description": "Use it to add icon before the text."
             },
             {
-              "name": "icon-right",
+              "name": "right-icon",
               "scoped": true,
               "description": "Use it to add icon after the text.",
               "bindings": [
@@ -6931,7 +6987,7 @@
               "default": "md"
             },
             {
-              "name": "iconLeft",
+              "name": "leftIcon",
               "description": "Left side icon name.",
               "value": {
                 "kind": "expression",
@@ -6940,7 +6996,7 @@
               "default": "\"\""
             },
             {
-              "name": "iconRight",
+              "name": "rightIcon",
               "description": "Right side icon name.",
               "value": {
                 "kind": "expression",
@@ -7176,7 +7232,7 @@
               ]
             },
             {
-              "name": "icon-left",
+              "name": "left-icon",
               "scoped": true,
               "description": "Use it to add icon before option.",
               "bindings": [
@@ -7225,7 +7281,7 @@
               "description": "Use it to add something after input."
             },
             {
-              "name": "icon-right",
+              "name": "right-icon",
               "scoped": true,
               "description": "Use it to add icon after option.",
               "bindings": [