vueless 0.0.616 → 0.0.617

package/ui.form-date-picker-range/config.ts

@@ -12,7 +12,16 @@ export default /*tw*/ {
       },
     },
   },
-  rightIcon: "{UIcon}",
+  rightIcon: {
+    base: "{UIcon}",
+    defaults: {
+      size: {
+        sm: "xs",
+        md: "sm",
+        lg: "md",
+      },
+    },
+  },
   buttonWrapper: {
     base: `
       flex rounded-dynamic max-md:justify-between

package/ui.form-input/UInput.vue

@@ -12,7 +12,7 @@ import ULabel from "../ui.form-label/ULabel.vue";
 import defaultConfig from "./config.ts";
 import { COMPONENT_NAME } from "./constants.ts";
 
-import type { Props, IconSize, Config } from "./types.ts";
+import type { Props, Config } from "./types.ts";
 
 defineOptions({ inheritAttrs: false });
 
@@ -102,16 +102,6 @@ const applyPasswordClasses = computed(() => {
 
 const elementId = props.id || useId();
 
-const iconSize = computed(() => {
-  const sizes = {
-    sm: "xs",
-    md: "sm",
-    lg: "md",
-  };
-
-  return sizes[props.size] as IconSize;
-});
-
 const inputType = computed(() => {
   return isShownPassword.value || props.noAutocomplete ? "text" : props.type;
 });
@@ -290,16 +280,9 @@ const {
         <!--
           @slot Use it to add icon before the text.
           @binding {string} icon-name
-          @binding {string} icon-size
         -->
-        <slot name="left-icon" :icon-name="leftIcon" :icon-size="iconSize">
-          <UIcon
-            v-if="leftIcon"
-            :name="leftIcon"
-            :size="iconSize"
-            internal
-            v-bind="leftIconAttrs"
-          />
+        <slot name="left-icon" :icon-name="leftIcon">
+          <UIcon v-if="leftIcon" :name="leftIcon" internal v-bind="leftIconAttrs" />
         </slot>
       </span>
 
@@ -342,16 +325,9 @@ const {
         <!--
           @slot Use it to add icon after the text.
           @binding {string} icon-name
-          @binding {string} icon-size
         -->
-        <slot name="right-icon" :icon-name="rightIcon" :icon-size="iconSize">
-          <UIcon
-            v-if="rightIcon"
-            :name="rightIcon"
-            :size="iconSize"
-            internal
-            v-bind="rightIconAttrs"
-          />
+        <slot name="right-icon" :icon-name="rightIcon">
+          <UIcon v-if="rightIcon" :name="rightIcon" internal v-bind="rightIconAttrs" />
         </slot>
       </span>
 

package/ui.form-input/config.ts

@@ -24,9 +24,19 @@ export default /*tw*/ {
   },
   rightIconWrapper: "flex items-center justify-end whitespace-nowrap pr-2.5 gap-1 rounded-inherit rounded-l-none",
   leftIconWrapper: "flex items-center justify-end whitespace-nowrap pl-2.5 gap-1 rounded-inherit rounded-r-none",
-  leftIcon: "{UIcon}",
-  rightIcon: "{UIcon}",
-  passwordIcon: "{UIcon}",
+  inputIcon: {
+    base: "{UIcon}",
+    defaults: {
+      size: {
+        sm: "xs",
+        md: "sm",
+        lg: "md",
+      },
+    },
+  },
+  leftIcon: "{UIcon} {>inputIcon}",
+  rightIcon: "{UIcon} {>inputIcon}",
+  passwordIcon: "{UIcon} {>inputIcon}",
   input: {
     base: `
       block w-full py-2 px-3 font-normal !leading-none text-gray-900 bg-transparent

package/ui.form-input/types.ts

@@ -4,8 +4,6 @@ import type { ComponentConfig } from "../types.ts";
 
 export type Config = typeof defaultConfig;
 
-export type IconSize = "xs" | "sm" | "md";
-
 export interface Props {
   /**
    * Input value.

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

@@ -17,7 +17,7 @@ import { useLocale } from "../composables/useLocale.ts";
 import { COMPONENT_NAME } from "./constants.ts";
 import defaultConfig from "./config.ts";
 
-import type { Props, ButtonSize, Config } from "./types.ts";
+import type { Props, Config } from "./types.ts";
 
 defineOptions({ inheritAttrs: false });
 
@@ -90,16 +90,6 @@ const fileList = computed(() => {
   return currentFiles.value ? [currentFiles.value] : [];
 });
 
-const buttonSize = computed(() => {
-  const sizes = {
-    sm: "xs",
-    md: "sm",
-    lg: "md",
-  };
-
-  return sizes[props.size] as ButtonSize;
-});
-
 onMounted(() => {
   if (dropZoneRef.value) {
     dropZoneRef.value.addEventListener("dragover", onDragOver);
@@ -316,7 +306,6 @@ const {
               :for="elementId"
               tag="label"
               variant="thirdary"
-              :size="buttonSize"
               :right-icon="config.defaults.chooseFileIcon"
               :label="currentLocale.uploadFile"
               :disabled="disabled"
@@ -343,7 +332,6 @@ const {
             filled
             no-ring
             variant="thirdary"
-            :size="buttonSize"
             :disabled="disabled"
             :left-icon="config.defaults.clearIcon"
             v-bind="clearButtonAttrs"

package/ui.form-input-file/config.ts

@@ -58,8 +58,24 @@ export default /*tw*/ {
         true: "opacity-75",
       },
     },
+    defaults: {
+      size: {
+        sm: "xs",
+        md: "sm",
+        lg: "md",
+      },
+    },
+  },
+  clearButton: {
+    base: "{UButton}",
+    defaults: {
+      size: {
+        sm: "xs",
+        md: "sm",
+        lg: "md",
+      },
+    },
   },
-  clearButton: "{UButton}",
   input: "sr-only",
   i18n: {
     sizeError: "File size is too big.",

package/ui.form-input-file/types.ts

@@ -4,8 +4,6 @@ import type { ComponentConfig } from "../types.ts";
 
 export type Config = typeof defaultConfig;
 
-export type ButtonSize = "xs" | "sm" | "md";
-
 export interface Props {
   /**
    * Input value.

package/ui.form-input-rating/UInputRating.vue

@@ -11,7 +11,7 @@ import ULabel from "../ui.form-label/ULabel.vue";
 import { COMPONENT_NAME } from "./constants.ts";
 import defaultConfig from "./config.ts";
 
-import type { Props, IconSize, Config } from "./types.ts";
+import type { Props, Config } from "./types.ts";
 
 defineOptions({ inheritAttrs: false });
 
@@ -30,16 +30,6 @@ const emit = defineEmits([
 
 const hovered = ref<number | null>(null);
 
-const iconSize = computed(() => {
-  const sizes = {
-    sm: "xs",
-    md: "sm",
-    lg: "md",
-  };
-
-  return sizes[props.size] as IconSize;
-});
-
 const counterValue = computed(() => {
   return hovered.value || props.modelValue;
 });
@@ -102,7 +92,6 @@ const { config, inputLabelAttrs, containerAttrs, counterAttrs, totalAttrs, stars
           :key="star"
           internal
           :color="error ? 'red' : 'brand'"
-          :size="iconSize"
           :interactive="selectable"
           :name="starIcon(star)"
           v-bind="starAttrs"

package/ui.form-input-rating/config.ts

@@ -11,7 +11,16 @@ export default /*tw*/ {
     },
   },
   stars: "flex",
-  star: "{UIcon}",
+  star: {
+    base: "{UIcon}",
+    defaults: {
+      size: {
+        sm: "xs",
+        md: "sm",
+        lg: "md",
+      },
+    },
+  },
   counter: {
     variants: {
       size: {

package/ui.form-input-rating/types.ts

@@ -4,8 +4,6 @@ import type { ComponentConfig } from "../types.ts";
 
 export type Config = typeof defaultConfig;
 
-export type IconSize = "xs" | "sm" | "md";
-
 export interface Props {
   /**
    * Rating value.

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, useId, ref, watchEffect } from "vue";
+import { useId, ref, watchEffect } from "vue";
 
 import useUI from "../composables/useUI.ts";
 import { getDefaults } from "../utils/ui.ts";
@@ -12,7 +12,7 @@ import UButton from "../ui.button/UButton.vue";
 import { COMPONENT_NAME } from "./constants.ts";
 import defaultConfig from "./config.ts";
 
-import type { Props, IconSize, ButtonSize, Config } from "./types.ts";
+import type { Props, Config } from "./types.ts";
 
 defineOptions({ inheritAttrs: false });
 
@@ -51,26 +51,6 @@ const inputRef = ref(null);
 
 const elementId = props.id || useId();
 
-const iconSize = computed(() => {
-  const sizes = {
-    sm: "xs",
-    md: "sm",
-    lg: "md",
-  };
-
-  return sizes[props.size] as IconSize;
-});
-
-const buttonSize = computed(() => {
-  const sizes = {
-    sm: "xs",
-    md: "md",
-    lg: "lg",
-  };
-
-  return sizes[props.size] as ButtonSize;
-});
-
 watchEffect(() => {
   updateValueWithDebounce = createDebounce((value) => {
     emit("update:modelValue", value);
@@ -166,7 +146,6 @@ const { config, searchInputAttrs, searchIconAttrs, clearIconAttrs, searchButtonA
         interactive
         color="gray"
         :name="config.defaults.clearIcon"
-        :size="iconSize"
         v-bind="clearIconAttrs"
         :data-test="`${dataTest}-clear`"
         @click="onClickClear"
@@ -176,14 +155,12 @@ const { config, searchInputAttrs, searchIconAttrs, clearIconAttrs, searchButtonA
       <slot
         name="right-icon"
         :icon-name="config.defaults.searchIcon"
-        :icon-size="iconSize"
         :search-button-label="searchButtonLabel"
       >
         <UIcon
           v-if="!searchButtonLabel"
           internal
           interactive
-          :size="iconSize"
           :name="rightIcon || config.defaults.searchIcon"
           v-bind="searchIconAttrs"
           :data-test="`${dataTest}-search-icon`"
@@ -198,7 +175,6 @@ const { config, searchInputAttrs, searchIconAttrs, clearIconAttrs, searchButtonA
         <UButton
           v-if="searchButtonLabel"
           :label="searchButtonLabel"
-          :size="buttonSize"
           no-ring
           v-bind="searchButtonAttrs"
           :data-test="`${dataTest}-search-button`"

package/ui.form-input-search/config.ts

@@ -1,8 +1,35 @@
 export default /*tw*/ {
   searchInput: "{UInput}",
-  clearIcon: "{UIcon}",
-  searchIcon: "{UIcon}",
-  searchButton: "{UButton} rounded-l-none ml-1 outline outline-1 outline-gray-900",
+  clearIcon: {
+    base: "{UIcon}",
+    defaults: {
+      size: {
+        sm: "xs",
+        md: "sm",
+        lg: "md",
+      },
+    },
+  },
+  searchIcon: {
+    base: "{UIcon}",
+    defaults: {
+      size: {
+        sm: "xs",
+        md: "sm",
+        lg: "md",
+      },
+    },
+  },
+  searchButton: {
+    base: "{UButton} rounded-l-none ml-1 outline outline-1 outline-gray-900",
+    defaults: {
+      size: {
+        sm: "xs",
+        md: "md",
+        lg: "lg",
+      },
+    },
+  },
   defaults: {
     size: "md",
     labelAlign: "topInside",

package/ui.form-input-search/types.ts

@@ -4,9 +4,6 @@ import type { ComponentConfig } from "../types.ts";
 
 export type Config = typeof defaultConfig;
 
-export type IconSize = "xs" | "sm" | "md";
-export type ButtonSize = "xs" | "md" | "lg";
-
 export interface Props {
   /**
    * Search input value.

package/ui.form-select/USelect.vue

@@ -23,7 +23,7 @@ import { COMPONENT_NAME, DIRECTION, KEYS } from "./constants.ts";
 import { useLocale } from "../composables/useLocale.ts";
 
 import type { Option, Config as UDropdownListConfig } from "../ui.dropdown-list/types.ts";
-import type { Props, Config, IconSize } from "./types.ts";
+import type { Props, Config } from "./types.ts";
 import type { ComponentExposed, KeyAttrsWithConfig } from "../types.ts";
 
 defineOptions({ inheritAttrs: false });
@@ -106,16 +106,6 @@ const isTop = computed(() => {
   return preferredOpenDirection.value === DIRECTION.top;
 });
 
-const iconSize = computed(() => {
-  const sizes = {
-    sm: "xs",
-    md: "sm",
-    lg: "md",
-  };
-
-  return sizes[props.size] as IconSize;
-});
-
 const inputPlaceholder = computed(() => {
   const message = currentLocale.value.addMore;
 
@@ -490,16 +480,9 @@ const {
         <!--
             @slot Use it to add icon right.
             @binding {string} icon-name
-            @binding {string} icon-size
           -->
-        <slot name="right-icon" :icon-name="rightIcon" :icon-size="iconSize">
-          <UIcon
-            v-if="rightIcon"
-            :name="rightIcon"
-            :size="iconSize"
-            internal
-            v-bind="rightIconAttrs"
-          />
+        <slot name="right-icon" :icon-name="rightIcon">
+          <UIcon v-if="rightIcon" :name="rightIcon" internal v-bind="rightIconAttrs" />
         </slot>
       </div>
 
@@ -524,20 +507,13 @@ const {
         <!--
           @slot Use it to add something instead of the toggle icon.
           @binding {string} icon-name
-          @binding {string} icon-size
           @binding {boolean} opened
         -->
-        <slot
-          name="toggle"
-          :icon-name="config.defaults.dropdownIcon"
-          :icon-size="iconSize"
-          :opened="isOpen"
-        >
+        <slot name="toggle" :icon-name="config.defaults.dropdownIcon" :opened="isOpen">
           <UIcon
             internal
             interactive
             color="gray"
-            :size="iconSize"
             :name="config.defaults.dropdownIcon"
             v-bind="toggleIconAttrs"
             :tabindex="-1"
@@ -553,14 +529,12 @@ const {
         <!--
           @slot Use it to add something instead of the clear icon.
           @binding {string} icon-name
-          @binding {string} icon-size
         -->
-        <slot name="clear" :icon-name="config.defaults.clearIcon" :icon-size="iconSize">
+        <slot name="clear" :icon-name="config.defaults.clearIcon">
           <UIcon
             internal
             interactive
             color="gray"
-            :size="iconSize"
             :name="config.defaults.clearIcon"
             v-bind="clearIconAttrs"
           />
@@ -587,16 +561,9 @@ const {
           <!--
             @slot Use it to add icon left.
             @binding {string} icon-name
-            @binding {string} icon-size
           -->
-          <slot name="left-icon" :icon-name="leftIcon" :icon-size="iconSize">
-            <UIcon
-              v-if="leftIcon"
-              :name="leftIcon"
-              :size="iconSize"
-              internal
-              v-bind="leftIconAttrs"
-            />
+          <slot name="left-icon" :icon-name="leftIcon">
+            <UIcon v-if="leftIcon" :name="leftIcon" internal v-bind="leftIconAttrs" />
           </slot>
         </span>
 
@@ -640,18 +607,12 @@ const {
               <!--
                 @slot Use it to add something instead of the clear icon (when multiple prop enabled).
                 @binding {string} icon-name
-                @binding {string} icon-size
               -->
-              <slot
-                name="clear-multiple"
-                :icon-name="config.defaults.clearMultipleIcon"
-                :icon-size="iconSize"
-              >
+              <slot name="clear-multiple" :icon-name="config.defaults.clearMultipleIcon">
                 <UIcon
                   internal
                   interactive
                   color="gray"
-                  :size="iconSize"
                   :name="config.defaults.clearMultipleIcon"
                   v-bind="clearMultipleIconAttrs"
                 />

package/ui.form-select/config.ts

@@ -65,10 +65,20 @@ export default /*tw*/ {
       { size: "lg", multiple: true, class: "text-base" },
     ],
   },
+  selectIcon: {
+    base: "{UIcon}",
+    defaults: {
+      size: {
+        sm: "xs",
+        md: "sm",
+        lg: "md",
+      },
+    },
+  },
   leftIconWrapper: "pr-1.5",
   rightIconWrapper: "{>caret} pr-3",
-  leftIcon: "{UIcon}",
-  rightIcon: "{UIcon}",
+  leftIcon: "{UIcon} {>selectIcon}",
+  rightIcon: "{UIcon} {>selectIcon}",
   beforeCaret: "{>caret}",
   afterCaret: "{>caret} mr-3",
   caret: {
@@ -80,11 +90,11 @@ export default /*tw*/ {
     ],
   },
   toggle: "{>caret} mr-3",
-  toggleIcon: "{UIcon} transition duration-300 group-[]/active:rotate-180",
+  toggleIcon: "{UIcon} {>selectIcon}",
   clear: "{>caret}",
-  clearIcon: "{UIcon}",
+  clearIcon: "{UIcon} {>selectIcon}",
   clearMultiple: "flex items-center",
-  clearMultipleIcon: "{UIcon}",
+  clearMultipleIcon: "{UIcon} {>selectIcon}",
   clearMultipleText: {
     base: "cursor-pointer flex items-center text-sm font-normal text-gray-400 hover:text-gray-500 transition",
     compoundVariants: [

package/ui.form-select/types.ts

@@ -4,7 +4,6 @@ import type { Option } from "../ui.dropdown-list/types.ts";
 import type { ComponentConfig } from "../types.ts";
 
 export type Config = typeof defaultConfig;
-export type IconSize = "xs" | "sm" | "md";
 
 export interface Props {
   /**

package/ui.form-switch/USwitch.vue

@@ -12,7 +12,7 @@ import { COMPONENT_NAME } from "./constants.ts";
 import defaultConfig from "./config.ts";
 import { useLocale } from "../composables/useLocale.ts";
 
-import type { Props, IconSize, Config } from "./types.ts";
+import type { Props, Config } from "./types.ts";
 
 defineOptions({ inheritAttrs: false });
 
@@ -46,16 +46,6 @@ const switchLabel = computed(() => {
   return checkedValue.value ? currentLocale.value.active : currentLocale.value.inactive;
 });
 
-const iconSize = computed(() => {
-  const sizes = {
-    sm: "2xs",
-    md: "xs",
-    lg: "sm",
-  };
-
-  return sizes[props.size] as IconSize;
-});
-
 const iconColor = computed(() => {
   return checkedValue.value ? props.color : "grayscale";
 });
@@ -127,7 +117,6 @@ const {
           internal
           :name="toggleIconName"
           :color="iconColor"
-          :size="iconSize"
           v-bind="toggleIconAttrs"
         />
       </span>

package/ui.form-switch/config.ts

@@ -41,7 +41,16 @@ export default /*tw*/ {
       { checked: true, size: "lg", class: "ml-[calc(100%-1.25rem)]" },
     ],
   },
-  toggleIcon: "{UIcon}",
+  toggleIcon: {
+    base: "{UIcon}",
+    defaults: {
+      size: {
+        sm: "2xs",
+        md: "xs",
+        lg: "sm",
+      },
+    },
+  },
   toggleLabel: {
     base: "absolute text-center text-2xs font-medium uppercase text-white",
     compoundVariants: [

package/ui.form-switch/types.ts

@@ -4,8 +4,6 @@ import type { ComponentConfig } from "../types.ts";
 
 export type Config = typeof defaultConfig;
 
-export type IconSize = "2xs" | "xs" | "sm";
-
 export interface Props {
   /**
    * Switch value.

package/ui.image-avatar/UAvatar.vue

@@ -72,15 +72,8 @@ const { avatarAttrs, placeholderIconAttrs } = useUI<Config>(defaultConfig);
         @slot Use it to add something instead of the avatar image placeholder.
         @binding {string} icon-name
         @binding {string} icon-color
-        @binding {string} icon-size
       -->
-      <slot
-        v-else
-        name="placeholder"
-        :icon-name="placeholderIcon"
-        :icon-color="componentColor"
-        :icon-size="size"
-      >
+      <slot v-else name="placeholder" :icon-name="placeholderIcon" :icon-color="componentColor">
         <UIcon
           internal
           :size="size"