vueless 0.0.628 → 0.0.630

package/constants.js

@@ -21,7 +21,9 @@ export const DEFAULT_RING = 4; /* pixels */
 export const DEFAULT_RING_OFFSET = 0; /* pixels */
 export const DEFAULT_RING_OFFSET_COLOR_LIGHT = "#ffffff"; // white
 export const DEFAULT_RING_OFFSET_COLOR_DARK = "#111827"; // gray-900
+export const DEFAULT_ROUNDING_SM = 4; /* pixels */
 export const DEFAULT_ROUNDING = 8; /* pixels */
+export const DEFAULT_ROUNDING_LG = 16; /* pixels */
 
 /* Vueless supported colors and shades */
 export const COLOR_SHADES = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
@@ -171,21 +173,21 @@ export const TAILWIND_MERGE_EXTENSION = {
       "ring-offset-w": [{ "ring-offset": ["dynamic"] }],
       "ring-offset-color": [{ "ring-offset": ["color-dynamic"] }],
       "font-size": [{ text: ["2xs"] }],
-      rounded: [{ rounded: ["dynamic", "inherit"] }],
-      "rounded-s": [{ "rounded-s": ["dynamic", "inherit"] }],
-      "rounded-e": [{ "rounded-e": ["dynamic", "inherit"] }],
-      "rounded-t": [{ "rounded-t": ["dynamic", "inherit"] }],
-      "rounded-r": [{ "rounded-r": ["dynamic", "inherit"] }],
-      "rounded-b": [{ "rounded-b": ["dynamic", "inherit"] }],
-      "rounded-l": [{ "rounded-l": ["dynamic", "inherit"] }],
-      "rounded-ss": [{ "rounded-ss": ["dynamic", "inherit"] }],
-      "rounded-se": [{ "rounded-se": ["dynamic", "inherit"] }],
-      "rounded-ee": [{ "rounded-ee": ["dynamic", "inherit"] }],
-      "rounded-es": [{ "rounded-es": ["dynamic", "inherit"] }],
-      "rounded-tl": [{ "rounded-tl": ["dynamic", "inherit"] }],
-      "rounded-tr": [{ "rounded-tr": ["dynamic", "inherit"] }],
-      "rounded-br": [{ "rounded-br": ["dynamic", "inherit"] }],
-      "rounded-bl": [{ "rounded-bl": ["dynamic", "inherit"] }],
+      rounded: [{ rounded: ["dynamic", "dynamic-sm", "dynamic-lg", "inherit"] }],
+      "rounded-s": [{ "rounded-s": ["dynamic", "dynamic-sm", "dynamic-lg", "inherit"] }],
+      "rounded-e": [{ "rounded-e": ["dynamic", "dynamic-sm", "dynamic-lg", "inherit"] }],
+      "rounded-t": [{ "rounded-t": ["dynamic", "dynamic-sm", "dynamic-lg", "inherit"] }],
+      "rounded-r": [{ "rounded-r": ["dynamic", "dynamic-sm", "dynamic-lg", "inherit"] }],
+      "rounded-b": [{ "rounded-b": ["dynamic", "dynamic-sm", "dynamic-lg", "inherit"] }],
+      "rounded-l": [{ "rounded-l": ["dynamic", "dynamic-sm", "dynamic-lg", "inherit"] }],
+      "rounded-ss": [{ "rounded-ss": ["dynamic", "dynamic-sm", "dynamic-lg", "inherit"] }],
+      "rounded-se": [{ "rounded-se": ["dynamic", "dynamic-sm", "dynamic-lg", "inherit"] }],
+      "rounded-ee": [{ "rounded-ee": ["dynamic", "dynamic-sm", "dynamic-lg", "inherit"] }],
+      "rounded-es": [{ "rounded-es": ["dynamic", "dynamic-sm", "dynamic-lg", "inherit"] }],
+      "rounded-tl": [{ "rounded-tl": ["dynamic", "dynamic-sm", "dynamic-lg", "inherit"] }],
+      "rounded-tr": [{ "rounded-tr": ["dynamic", "dynamic-sm", "dynamic-lg", "inherit"] }],
+      "rounded-br": [{ "rounded-br": ["dynamic", "dynamic-sm", "dynamic-lg", "inherit"] }],
+      "rounded-bl": [{ "rounded-bl": ["dynamic", "dynamic-sm", "dynamic-lg", "inherit"] }],
     },
   },
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.628",
+  "version": "0.0.630",
   "license": "MIT",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "keywords": [
@@ -27,13 +27,13 @@
     "access": "public"
   },
   "scripts": {
-    "pre:start": "npx @vueless/web-types && node .scripts/icons",
+    "pre:start": "npx node .scripts/icons",
     "dev:docs": "npm run pre:start && storybook dev -p 6006 --docs --no-open",
     "dev": "npm run pre:start && STORYBOOK_FULL=1 storybook dev -p 6006 --no-open",
     "build": "npm run pre:start && storybook build --docs",
     "preview": "vite preview --host --outDir=storybook-static",
     "ts:check": "vue-tsc --build --force",
-    "release:prepare": "npm run pre:start && rm -rf dist && mkdir -p dist && cp -r src/. package.json LICENSE README.md node_modules/.cache/vueless/web-types.json dist/ && node .scripts/package",
+    "release:prepare": "npm run pre:start && rm -rf dist && mkdir -p dist && cp -r src/. package.json LICENSE README.md dist/",
     "release:beta": "release-it --ci --npm.publish --preRelease=beta --increment=prerelease",
     "release:patch": "release-it patch --ci --npm.publish",
     "release:minor": "release-it minor --ci --npm.publish --git.tag --github.release",
@@ -66,8 +66,7 @@
     "@vue/eslint-config-prettier": "^10.0.0",
     "@vue/eslint-config-typescript": "^14.1.1",
     "@vue/tsconfig": "^0.5.1",
-    "@vueless/storybook": "^0.0.53",
-    "@vueless/web-types": "^0.0.21",
+    "@vueless/storybook": "^0.0.54",
     "autoprefixer": "^10.4.19",
     "cssnano": "^6.1.2",
     "eslint": "^9.12.0",

package/plugin-vite.js

@@ -11,6 +11,7 @@ import { createTailwindSafelist, clearTailwindSafelist } from "./utils/node/tail
 import { getNuxtFiles, getVueFiles } from "./utils/node/helper.js";
 import { componentResolver, directiveResolver } from "./utils/node/vuelessResolver.js";
 import { setCustomPropTypes, removeCustomPropTypes } from "./utils/node/dynamicProps.js";
+import { buildWebTypes } from "./utils/node/webTypes.js";
 
 /* Automatically importing Vueless components on demand */
 export const VuelessUnpluginComponents = (options) =>
@@ -66,6 +67,10 @@ export const Vueless = function (options = {}) {
         await createTailwindSafelist({ mode, env, debug, targetFiles });
       }
 
+      if ((config.command.includes("sb:") && mode === "storybook") || isVuelessEnv) {
+        await buildWebTypes();
+      }
+
       if (config.command === "build") {
         /* remove cached icons */
         await removeIconsCache(mirrorCacheDir, debug);

package/preset-tailwind.js

@@ -11,7 +11,9 @@ import {
   GRAY_COLOR,
   COOL_COLOR,
   DARK_MODE_SELECTOR,
+  DEFAULT_ROUNDING_SM,
   DEFAULT_ROUNDING,
+  DEFAULT_ROUNDING_LG,
   DEFAULT_RING,
   DEFAULT_RING_OFFSET,
   DEFAULT_RING_OFFSET_COLOR_LIGHT,
@@ -88,7 +90,9 @@ export const vuelessTailwindConfig = {
       },
       borderRadius: {
         inherit: "inherit",
+        "dynamic-sm": "var(--vl-rounding-sm)",
         dynamic: "var(--vl-rounding)",
+        "dynamic-lg": "var(--vl-rounding-lg)",
       },
       ringWidth: {
         dynamic: "var(--vl-ring)",
@@ -106,7 +110,9 @@ export const vuelessTailwindConfig = {
         "var(--vl-ring)": DEFAULT_RING,
         "var(--vl-ring-offset)": DEFAULT_RING_OFFSET,
         "var(--vl-ring-offset-color)": DEFAULT_RING_OFFSET_COLOR_LIGHT,
+        "var(--vl-rounding-sm)": DEFAULT_ROUNDING_SM,
         "var(--vl-rounding)": DEFAULT_ROUNDING,
+        "var(--vl-rounding-lg)": DEFAULT_ROUNDING_LG,
         ...getReplacementColors(GRAY_COLOR, grayColor),
         ...getReplacementColors(BRAND_COLOR, brandColor),
       },

package/types.ts

@@ -77,11 +77,21 @@ export interface ThemeConfig {
    */
   gray?: GrayColors;
 
+  /**
+   * Default components "sm" size rounding (border-radius).
+   */
+  roundingSm?: number;
+
   /**
    * Default components rounding (border-radius).
    */
   rounding?: number;
 
+  /**
+   * Default components "lg" size rounding (border-radius).
+   */
+  roundingLg?: number;
+
   /**
    * Default components ring width.
    */
@@ -324,7 +334,9 @@ export interface VuelessCssVariables {
   "--vl-ring": string;
   "--vl-ring-offset": string;
   "--vl-ring-offset-color": string;
+  "--vl-rounding-sm": string;
   "--vl-rounding": string;
+  "--vl-rounding-lg": string;
   /* Gray CSS variables */
   "--vl-color-gray-50": string;
   "--vl-color-gray-100": string;

package/ui.button-link/config.ts

@@ -48,6 +48,12 @@ export default /*tw*/ {
         false: "no-underline",
       },
       color: {
+        gray: `
+          text-gray-500 decoration-gray-500
+          hover:text-gray-600 hover:decoration-gray-600
+          focus:text-gray-600 focus:decoration-gray-600
+          active:text-gray-700 active:decoration-gray-700
+        `,
         grayscale: `
           text-gray-900 decoration-gray-900
           hover:text-gray-800 hover:decoration-gray-800

package/ui.button-toggle-item/config.ts

@@ -9,6 +9,7 @@ export default /*tw*/ {
     base: "{UButton} font-normal !bg-{color}-600/15",
     defaults: {
       variant: "thirdary",
+      color: "brand",
       filled: true,
     },
   },

package/ui.container-card/config.ts

@@ -1,5 +1,5 @@
 export default /*tw*/ {
-  wrapper: "p-4 md:p-5 border rounded-dynamic border-gray-200 bg-white space-y-4 w-full",
+  wrapper: "p-4 md:p-5 border rounded-dynamic-lg border-gray-200 bg-white space-y-4 w-full",
   header: "flex justify-between",
   headerLeft: "flex items-center gap-2 w-fit",
   headerLeftFallback: "flex flex-col w-fit",

package/ui.form-checkbox/config.ts

@@ -2,7 +2,7 @@ export default /*tw*/ {
   checkboxLabel: "{ULabel}",
   checkbox: {
     base: `
-      border rounded bg-white cursor-pointer transition checked:text-{color}-600
+      border rounded-dynamic-sm bg-white cursor-pointer transition checked:text-{color}-600
       border-gray-300 hover:border-gray-400 focus:border-{color}-500 active:border-{color}-800
       focus:ring-{color}-700/15 focus:ring-dynamic focus:ring-offset-dynamic
       disabled:border-gray-300 disabled:bg-gray-100 disabled:cursor-not-allowed
@@ -23,7 +23,7 @@ export default /*tw*/ {
   },
   iconWrapper: {
     base: `
-      flex items-center justify-center absolute rounded cursor-pointer transition
+      flex items-center justify-center absolute rounded-dynamic-sm cursor-pointer transition
       bg-{color}-600 hover:bg-{color}-700 active:bg-{color}-800
     `,
     variants: {

package/ui.form-date-picker/UDatePicker.vue

@@ -300,33 +300,27 @@ watchEffect(() => {
       @keydown.esc="deactivate"
       @keydown="onTextInputKeyDown"
     >
-      <template #left>
-        <!-- @slot Use it add something before the date. -->
-        <slot name="left" />
-      </template>
-
-      <template #left-icon="{ iconName }">
+      <template #left="{ iconName }">
         <!--
-          @slot Use it add an icon before the date.
+          @slot Use it add something before the date.
           @binding {string} icon-name
         -->
         <slot name="left-icon" :icon-name="iconName" />
       </template>
 
       <template #right-icon="{ iconName }">
+        <slot name="left" :icon-name="iconName" />
+      </template>
+
+      <template #right="{ iconName }">
         <!--
-          @slot Use it add an icon after the date.
+          @slot Use it add something after the date.
           @binding {string} icon-name
         -->
-        <slot name="right-icon" :icon-name="iconName">
+        <slot name="right" :icon-name="iconName">
           <UIcon :name="iconName" color="gray" v-bind="rightIconAttrs" />
         </slot>
       </template>
-
-      <template #right>
-        <!-- @slot Use it add something after the date. -->
-        <slot name="right" />
-      </template>
     </UInput>
 
     <Transition v-bind="config.datepickerCalendarTransition">

package/ui.form-date-picker/storybook/stories.ts

@@ -178,27 +178,3 @@ export const RightIcon = DefaultTemplate.bind({});
 RightIcon.args = {
   rightIcon: "star",
 };
-
-export const LeftIconSlot = DefaultTemplate.bind({});
-LeftIconSlot.args = {
-  slotTemplate: `
-    <template #left-icon>
-      <UIcon
-        name="archive"
-        color="red"
-      />
-    </template>
-  `,
-};
-
-export const RightIconSlot = DefaultTemplate.bind({});
-RightIconSlot.args = {
-  slotTemplate: `
-    <template #right-icon>
-      <UIcon
-        name="archive"
-        color="red"
-      />
-    </template>
-  `,
-};

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

@@ -600,30 +600,23 @@ watchEffect(() => {
       @focus="activate"
       @keydown.esc="deactivate"
     >
-      <template #left>
-        <!-- @slot Use it to add something before the date. -->
-        <slot name="left" />
-      </template>
-
-      <template #left-icon>
-        <!-- @slot Use it to add icon before the date. -->
-        <slot name="left-icon" />
+      <template #left="{ iconName }">
+        <!--
+          @slot Use it to add something before the date.
+          @binding {string} icon-name
+        -->
+        <slot name="left" :icon-name="iconName" />
       </template>
 
-      <template #right-icon="{ iconName }">
+      <template #right="{ iconName }">
         <!--
-          @slot Use it add an icon after the date.
+          @slot Use it to add something after the date.
           @binding {string} icon-name
         -->
-        <slot name="right-icon" :icon-name="iconName">
+        <slot name="right" :icon-name="iconName">
           <UIcon :name="iconName" color="gray" v-bind="rightIconAttrs" />
         </slot>
       </template>
-
-      <template #right>
-        <!-- @slot Use it to add something after the date. -->
-        <slot name="right" />
-      </template>
     </UInput>
 
     <div v-if="isVariant.button" v-bind="buttonWrapperAttrs">

package/ui.form-date-picker-range/storybook/stories.ts

@@ -194,32 +194,6 @@ LeftIcon.args = { leftIcon: "star", variant: "input" };
 export const RightIcon = DefaultTemplate.bind({});
 RightIcon.args = { rightIcon: "star", variant: "input" };
 
-export const LeftIconSlot = DefaultTemplate.bind({});
-LeftIconSlot.args = {
-  variant: "input",
-  slotTemplate: `
-    <template #left-icon>
-      <UIcon
-        name="archive"
-        color="red"
-      />
-    </template>
-  `,
-};
-
-export const RightIconSlot = DefaultTemplate.bind({});
-RightIconSlot.args = {
-  variant: "input",
-  slotTemplate: `
-    <template #right-icon>
-      <UIcon
-        name="archive"
-        color="red"
-      />
-    </template>
-  `,
-};
-
 export const LeftSlot = DefaultTemplate.bind({});
 LeftSlot.args = {
   variant: "input",

package/ui.form-input/UInput.vue

@@ -203,8 +203,7 @@ useMutationObserver(leftSlotWrapperRef, (mutations) => {
 });
 
 function setLabelPosition() {
-  const shouldAlignLabelOnTop =
-    !hasSlotContent(slots["left-icon"]) && !hasSlotContent(slots["left"]) && !props.leftIcon;
+  const shouldAlignLabelOnTop = !hasSlotContent(slots["left"]) && !props.leftIcon;
 
   if (props.labelAlign === "top" || shouldAlignLabelOnTop) {
     return;
@@ -245,10 +244,11 @@ const {
   wrapperAttrs,
   inputLabelAttrs,
   passwordIconAttrs,
-  leftIconWrapperAttrs,
   leftIconAttrs,
+  leftSlotAttrs,
   rightIconAttrs,
-  rightIconWrapperAttrs,
+  rightSlotAttrs,
+  passwordIconWrapperAttrs,
 } = useUI<Config>(defaultConfig, mutatedProps);
 </script>
 
@@ -267,22 +267,17 @@ const {
     v-bind="inputLabelAttrs"
   >
     <label :for="elementId" v-bind="wrapperAttrs">
-      <span v-if="hasSlotContent($slots['left'])" ref="leftSlotWrapperRef">
-        <!-- @slot Use it to add something before the text. -->
-        <slot name="left" />
-      </span>
-
       <span
-        v-if="hasSlotContent($slots['left-icon']) || leftIcon"
+        v-if="hasSlotContent($slots['left']) || leftIcon"
+        v-bind="leftSlotAttrs"
         ref="leftSlotWrapperRef"
-        v-bind="leftIconWrapperAttrs"
       >
         <!--
-          @slot Use it to add icon before the text.
+          @slot Use it to add something before the text.
           @binding {string} icon-name
         -->
-        <slot name="left-icon" :icon-name="leftIcon">
-          <UIcon v-if="leftIcon" :name="leftIcon" internal v-bind="leftIconAttrs" />
+        <slot name="left" :icon-name="leftIcon">
+          <UIcon v-if="leftIcon" internal color="inherit" :name="leftIcon" v-bind="leftIconAttrs" />
         </slot>
       </span>
 
@@ -308,7 +303,7 @@ const {
         @copy="onCopy"
       />
 
-      <label v-if="isTypePassword" v-bind="rightIconWrapperAttrs" :for="elementId">
+      <label v-if="isTypePassword" v-bind="passwordIconWrapperAttrs" :for="elementId">
         <UIcon
           v-if="isTypePassword"
           :name="passwordIcon"
@@ -321,18 +316,21 @@ const {
         />
       </label>
 
-      <span v-if="hasSlotContent($slots['right-icon']) || rightIcon" v-bind="rightIconWrapperAttrs">
+      <div v-if="hasSlotContent($slots['right']) || rightIcon" v-bind="rightSlotAttrs">
         <!--
-          @slot Use it to add icon after the text.
+          @slot Use it to add something after the text.
           @binding {string} icon-name
         -->
-        <slot name="right-icon" :icon-name="rightIcon">
-          <UIcon v-if="rightIcon" :name="rightIcon" internal v-bind="rightIconAttrs" />
+        <slot name="right" :icon-name="rightIcon">
+          <UIcon
+            v-if="rightIcon"
+            internal
+            color="inherit"
+            :name="rightIcon"
+            v-bind="rightIconAttrs"
+          />
         </slot>
-      </span>
-
-      <!-- @slot Use it to add something after the text. -->
-      <slot name="right" />
+      </div>
     </label>
   </ULabel>
 </template>

package/ui.form-input/config.ts

@@ -22,8 +22,6 @@ 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",
   inputIcon: {
     base: "{UIcon}",
     defaults: {
@@ -37,6 +35,9 @@ export default /*tw*/ {
   leftIcon: "{UIcon} {>inputIcon}",
   rightIcon: "{UIcon} {>inputIcon}",
   passwordIcon: "{UIcon} {>inputIcon}",
+  passwordIconWrapper: "flex items-center justify-end whitespace-nowrap pr-2.5 gap-1 rounded-inherit rounded-l-none",
+  leftSlot: "pl-3 flex items-center",
+  rightSlot: "pr-3 flex items-center",
   input: {
     base: `
       block w-full py-2 px-3 font-normal !leading-none text-gray-900 bg-transparent

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

@@ -110,36 +110,11 @@ LeftIcon.args = { leftIcon: "star" };
 export const RightIcon = DefaultTemplate.bind({});
 RightIcon.args = { rightIcon: "star" };
 
-export const LeftIconSlot = DefaultTemplate.bind({});
-LeftIconSlot.args = {
-  slotTemplate: `
-    <template #left-icon>
-      <UIcon
-        name="star"
-        color="green"
-      />
-    </template>
-  `,
-};
-
-export const RightIconSlot = DefaultTemplate.bind({});
-RightIconSlot.args = {
-  slotTemplate: `
-    <template #right-icon>
-      <UIcon
-        interactive
-        name="star"
-        color="green"
-      />
-    </template>
-  `,
-};
-
 export const LeftSlot = DefaultTemplate.bind({});
 LeftSlot.args = {
   slotTemplate: `
     <template #left>
-      <UButton variant="thirdary" filled square noRing label="Filter" class="rounded-r-none h-full" />
+      <UIcon name="star" />
     </template>
   `,
 };
@@ -148,7 +123,7 @@ export const RightSlot = DefaultTemplate.bind({});
 RightSlot.args = {
   slotTemplate: `
     <template #right>
-      <UButton variant="thirdary" filled square noRing label="Filter" class="rounded-l-none" />
+      <UIcon name="star" />
     </template>
   `,
 };

package/ui.form-input-money/UInputMoney.vue

@@ -130,23 +130,19 @@ const { moneyInputAttrs } = useUI<Config>(defaultConfig);
     @input="onInput"
   >
     <template #left>
-      <!-- @slot Use it to add something left. -->
-      <slot name="left" />
-    </template>
-
-    <template #left-icon>
-      <!-- @slot Use it to add icon before the text. -->
-      <slot name="left-icon" />
-    </template>
-
-    <template #right-icon>
-      <!-- @slot Use it to add icon after the text. -->
-      <slot name="right-icon" />
+      <!-- 
+        @slot Use it to add something left. 
+        @binding {string} icon-name
+      -->
+      <slot name="left" :icon-name="leftIcon" />
     </template>
 
     <template #right>
-      <!-- @slot Use it to add something right. -->
-      <slot name="right" />
+      <!-- 
+        @slot Use it to add something right. 
+        @binding {string} icon-name
+      -->
+      <slot name="right" :icon-name="leftIcon" />
     </template>
   </UInput>
 </template>

package/ui.form-input-money/storybook/stories.ts

@@ -125,30 +125,6 @@ LeftIcon.args = { leftIcon: "star" };
 export const RightIcon = DefaultTemplate.bind({});
 RightIcon.args = { rightIcon: "star" };
 
-export const LeftIconSlot = DefaultTemplate.bind({});
-LeftIconSlot.args = {
-  slotTemplate: `
-    <template #left-icon>
-      <UIcon
-        name="archive"
-        color="red"
-      />
-    </template>
-  `,
-};
-
-export const RightIconSlot = DefaultTemplate.bind({});
-RightIconSlot.args = {
-  slotTemplate: `
-    <template #right-icon>
-      <UIcon
-        name="archive"
-        color="red"
-      />
-    </template>
-  `,
-};
-
 export const LeftSlot = DefaultTemplate.bind({});
 LeftSlot.args = {
   slotTemplate: `

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

@@ -104,9 +104,14 @@ defineExpose({
  * Get element / nested component attributes for each config token ✨
  * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
  */
-
-const { config, searchInputAttrs, searchIconAttrs, clearIconAttrs, searchButtonAttrs } =
-  useUI<Config>(defaultConfig);
+const {
+  config,
+  searchInputAttrs,
+  searchInputWithButtonAttrs,
+  searchIconAttrs,
+  clearIconAttrs,
+  searchButtonAttrs,
+} = useUI<Config>(defaultConfig);
 </script>
 
 <template>
@@ -124,7 +129,7 @@ const { config, searchInputAttrs, searchIconAttrs, clearIconAttrs, searchButtonA
     :placeholder="placeholder"
     inputmode="search"
     :left-icon="leftIcon"
-    v-bind="searchInputAttrs"
+    v-bind="searchButtonLabel ? searchInputWithButtonAttrs : searchInputAttrs"
     :data-test="dataTest"
     @update:model-value="onUpdateValue"
     @keyup.enter="onKeyupEnter"
@@ -134,12 +139,7 @@ const { config, searchInputAttrs, searchIconAttrs, clearIconAttrs, searchButtonA
       <slot name="left" />
     </template>
 
-    <template #left-icon>
-      <!-- @slot Use it to add icon before the text. -->
-      <slot name="left-icon" />
-    </template>
-
-    <template #right-icon>
+    <template #right>
       <UIcon
         v-if="localValue"
         internal
@@ -151,10 +151,13 @@ const { config, searchInputAttrs, searchIconAttrs, clearIconAttrs, searchButtonA
         @click="onClickClear"
       />
 
-      <!-- @slot Use it to add icon after the text. -->
+      <!-- 
+        @slot Use it to add something after the text. 
+        @binding {string} icon-name
+      -->
       <slot
-        name="right-icon"
-        :icon-name="config.defaults.searchIcon"
+        name="right"
+        :icon-name="rightIcon || config.defaults.searchIcon"
         :search-button-label="searchButtonLabel"
       >
         <UIcon
@@ -166,12 +169,7 @@ const { config, searchInputAttrs, searchIconAttrs, clearIconAttrs, searchButtonA
           :data-test="`${dataTest}-search-icon`"
           @click="onClickSearch"
         />
-      </slot>
-    </template>
 
-    <template #right>
-      <!-- @slot Use it to add something after the text. -->
-      <slot name="right">
         <UButton
           v-if="searchButtonLabel"
           :label="searchButtonLabel"

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

@@ -1,5 +1,9 @@
 export default /*tw*/ {
   searchInput: "{UInput}",
+  searchInputWithButton: {
+    base: "{UInput} {>searchInput}",
+    rightSlot: "pr-0",
+  },
   clearIcon: {
     base: "{UIcon}",
     defaults: {