vueless 0.0.252 → 0.0.253

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.252",
+  "version": "0.0.253",
   "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-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-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.253",
   "contributions": {
     "html": {
       "description-markup": "markdown",