@ironsource/shared-ui 1.4.3 → 2.0.0-rc.1

package/components/includeExclude/IncludeExclude.vue.js

@@ -1,11 +1,11 @@
 import { defineComponent, computed, ref, watch, provide, openBlock, createBlock, unref, withCtx, createElementVNode, renderSlot, createTextVNode, toDisplayString, createCommentVNode, createVNode, Transition, createElementBlock, normalizeClass, mergeProps, Fragment, renderList, toRaw, nextTick } from 'vue';
 import _sfc_main$1 from '../popover/Popover.vue.js';
-import Button from '../button/Button.vue.js';
+import Button from '../button/v3/Button.vue.js';
 /* empty css                                                            */import _export_sfc from '../../_virtual/plugin-vue_export-helper.vue.js';
 import { IncludeExcludeTestIdModifiers } from '../../testids/index.vue.js';
 /* empty css                                                                     */import Text from '../typography/Text.vue.js';
-/* empty css                                                                    *//* empty css                                                                    *//* empty css                                                                               */import 'floating-vue';
-/* empty css                                                      *//* empty css                                                                      */import Search from '../search/Search.vue.js';
+/* empty css                                                                           *//* empty css                                                                       *//* empty css                                                                               */import 'floating-vue';
+/* empty css                                                      *//* empty css                                                                         */import Search from '../search/v3/Search.vue.js';
 import Checkbox from '../checkbox/Checkbox.vue.js';
 import Skeleton from '../skeleton/Skeleton.vue.js';
 import EmptyState from '../emptyState/EmptyState.vue.js';
@@ -559,6 +559,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-var IncludeExclude = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-63d6a000"]]);
+var IncludeExclude = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-b08ff240"]]);
 
 export { IncludeExclude as default };

package/components/includeExclude/IncludeExcludeAppHeader.vue.js

@@ -5,11 +5,11 @@ import { useSearch } from '../../composables/useSearch.vue.js';
 import IncludeExclude from './IncludeExclude.vue.js';
 import 'floating-vue';
 /* empty css                                                      *//* empty css                                                                     */import _export_sfc from '../../_virtual/plugin-vue_export-helper.vue.js';
-/* empty css                                                                  *//* empty css                                                                    *//* empty css                                                                *//* empty css                                                                    *//* empty css                                                                               *//* empty css                                                      *//* empty css                                                                      *//* empty css                                                                *//* empty css                                                                    *//* empty css                                                                    *//* empty css                                                                            *//* empty css                                                                        */import '@vueuse/core';
+/* empty css                                                                  *//* empty css                                                                   *//* empty css                                                                           *//* empty css                                                                       *//* empty css                                                                               *//* empty css                                                      *//* empty css                                                                         *//* empty css                                                                   *//* empty css                                                                    *//* empty css                                                                    *//* empty css                                                                            *//* empty css                                                                        */import '@vueuse/core';
 import 'vuedraggable';
 /* empty css                                                                        */import IncludeExcludeOption from './IncludeExcludeOption.vue.js';
 /* empty css                                                                               */import IncludeExcludeAppTrigger from './IncludeExcludeAppTrigger.vue.js';
-/* empty css                                                                         *//* empty css                                                            *//* empty css                                                                          */
+/* empty css                                                                         *//* empty css                                                               *//* empty css                                                                          */
 import "../../IncludeExcludeAppHeader.vue_vue_type_style_index_0_scoped_true_lang.css";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "IncludeExcludeAppHeader",

package/components/includeExclude/IncludeExcludeAppTrigger.vue.js

@@ -1,10 +1,10 @@
 import { defineComponent, computed, openBlock, createElementBlock, normalizeClass, unref, renderSlot, createElementVNode, createBlock, createCommentVNode, createVNode, withCtx, createTextVNode, toDisplayString } from 'vue';
-import Icon from '../icon/Icon.vue.js';
 /* empty css                                                                     */import _export_sfc from '../../_virtual/plugin-vue_export-helper.vue.js';
 import Text from '../typography/Text.vue.js';
-/* empty css                                                                    *//* empty css                                                                */import IconButton from '../button/IconButton.vue.js';
+import Icon from '../icon/Icon.vue.js';
+/* empty css                                                                   */import IconButton from '../button/v3/IconButton.vue.js';
 import _sfc_main$1 from '../tooltip/Tooltip.vue.js';
-/* empty css                                                                      */import AppIcon from '../appIcon/AppIcon.vue.js';
+/* empty css                                                                         */import AppIcon from '../appIcon/AppIcon.vue.js';
 /* empty css                                                                          */
 import "../../IncludeExcludeAppTrigger.vue_vue_type_style_index_0_scoped_true_lang.css";
 const _hoisted_1 = { class: "include-exclude-trigger-left-image" };
@@ -168,6 +168,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-var IncludeExcludeAppTrigger = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-103f63a6"]]);
+var IncludeExcludeAppTrigger = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-168ad4b0"]]);
 
 export { IncludeExcludeAppTrigger as default };

package/components/includeExclude/IncludeExcludeChipFilter.vue.js

@@ -1,11 +1,11 @@
 import { defineComponent, computed, openBlock, createBlock, unref, mergeProps, isRef, withCtx, renderSlot, createVNode, createTextVNode, toDisplayString, createSlots, createElementVNode } from 'vue';
 import Icon from '../icon/Icon.vue.js';
-import Chip from '../chip/Chip.vue.js';
+import Chip from '../chip/v3/Chip.vue.js';
 import { useSearch } from '../../composables/useSearch.vue.js';
 import IncludeExclude from './IncludeExclude.vue.js';
 import 'floating-vue';
 /* empty css                                                      *//* empty css                                                                     */import _export_sfc from '../../_virtual/plugin-vue_export-helper.vue.js';
-/* empty css                                                                  *//* empty css                                                                    *//* empty css                                                                *//* empty css                                                                    *//* empty css                                                                               *//* empty css                                                      *//* empty css                                                                      *//* empty css                                                                *//* empty css                                                                    *//* empty css                                                                    *//* empty css                                                                            *//* empty css                                                                        */import '@vueuse/core';
+/* empty css                                                                  *//* empty css                                                                   *//* empty css                                                                           *//* empty css                                                                       *//* empty css                                                                               *//* empty css                                                      *//* empty css                                                                         *//* empty css                                                                   *//* empty css                                                                    *//* empty css                                                                    *//* empty css                                                                            *//* empty css                                                                        */import '@vueuse/core';
 import 'vuedraggable';
 /* empty css                                                                        */import IncludeExcludeOption from './IncludeExcludeOption.vue.js';
 /* empty css                                                                               *//* empty css                                                                  *//* empty css                                                                          *//* empty css                                                                         *//* empty css                                                                          */
@@ -152,6 +152,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-var IncludeExcludeChipFilter = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-a97a34d2"]]);
+var IncludeExcludeChipFilter = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-566f7125"]]);
 
 export { IncludeExcludeChipFilter as default };

package/components/includeExclude/IncludeExcludeDragDrop.vue.d.ts

@@ -93,13 +93,13 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     loading: boolean;
     placement: Placement;
     disabled: boolean;
+    hasSubtitle: boolean;
     searchPlaceholder: string;
     isOnTop: boolean;
     distance: number;
     autoFocus: boolean;
     defaultOpen: boolean;
     onSearch: (option: any, term: string) => boolean;
-    hasSubtitle: boolean;
     titleText: string;
     showClearAll: boolean;
     alwayesOpen: boolean;

package/components/includeExclude/IncludeExcludeDragDrop.vue.js

@@ -1,10 +1,10 @@
 import { defineComponent, computed, ref, watch, provide, openBlock, createBlock, unref, withCtx, createElementVNode, renderSlot, normalizeClass, createTextVNode, toDisplayString, createCommentVNode, createVNode, Transition, createElementBlock, mergeProps, Fragment, renderList, toRaw, isRef, nextTick } from 'vue';
 import _sfc_main$1 from '../popover/Popover.vue.js';
-import Button from '../button/Button.vue.js';
+import Button from '../button/v3/Button.vue.js';
 /* empty css                                                            */import _export_sfc from '../../_virtual/plugin-vue_export-helper.vue.js';
 /* empty css                                                                     */import Text from '../typography/Text.vue.js';
-/* empty css                                                                    *//* empty css                                                                    *//* empty css                                                                               */import 'floating-vue';
-/* empty css                                                      *//* empty css                                                                      */import Search from '../search/Search.vue.js';
+/* empty css                                                                           *//* empty css                                                                       *//* empty css                                                                               */import 'floating-vue';
+/* empty css                                                      *//* empty css                                                                         */import Search from '../search/v3/Search.vue.js';
 import Checkbox from '../checkbox/Checkbox.vue.js';
 import Skeleton from '../skeleton/Skeleton.vue.js';
 import EmptyState from '../emptyState/EmptyState.vue.js';
@@ -605,6 +605,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-var IncludeExcludeDragDrop = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-22459799"]]);
+var IncludeExcludeDragDrop = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-678a4af9"]]);
 
 export { IncludeExcludeDragDrop as default };

package/components/includeExclude/index.d.ts

@@ -34,6 +34,11 @@ declare const IncludeExcludeTypes: () => (import("vue").DefineComponent<{
         type: import("vue").PropType<unknown>;
         required: true;
     };
+    hasSubtitle: {
+        type: import("vue").PropType<boolean>;
+    } & {
+        default: boolean;
+    };
     searchPlaceholder: {
         type: import("vue").PropType<string>;
     } & {
@@ -67,11 +72,6 @@ declare const IncludeExcludeTypes: () => (import("vue").DefineComponent<{
     } & {
         default: () => true;
     };
-    hasSubtitle: {
-        type: import("vue").PropType<boolean>;
-    } & {
-        default: boolean;
-    };
     titleText: {
         type: import("vue").PropType<string>;
     } & {
@@ -132,6 +132,11 @@ declare const IncludeExcludeTypes: () => (import("vue").DefineComponent<{
         type: import("vue").PropType<unknown>;
         required: true;
     };
+    hasSubtitle: {
+        type: import("vue").PropType<boolean>;
+    } & {
+        default: boolean;
+    };
     searchPlaceholder: {
         type: import("vue").PropType<string>;
     } & {
@@ -165,11 +170,6 @@ declare const IncludeExcludeTypes: () => (import("vue").DefineComponent<{
     } & {
         default: () => true;
     };
-    hasSubtitle: {
-        type: import("vue").PropType<boolean>;
-    } & {
-        default: boolean;
-    };
     titleText: {
         type: import("vue").PropType<string>;
     } & {
@@ -206,13 +206,13 @@ declare const IncludeExcludeTypes: () => (import("vue").DefineComponent<{
     loading: boolean;
     placement: import("floating-vue").Placement;
     disabled: boolean;
+    hasSubtitle: boolean;
     searchPlaceholder: string;
     isOnTop: boolean;
     distance: number;
     autoFocus: boolean;
     defaultOpen: boolean;
     onSearch: (option: any, term: string) => boolean;
-    hasSubtitle: boolean;
     titleText: string;
     showClearAll: boolean;
     alwayesOpen: boolean;
@@ -242,6 +242,11 @@ declare const IncludeExcludeTypes: () => (import("vue").DefineComponent<{
         type: import("vue").PropType<unknown>;
         required: true;
     };
+    hasSubtitle: {
+        type: import("vue").PropType<boolean>;
+    } & {
+        default: boolean;
+    };
     searchPlaceholder: {
         type: import("vue").PropType<string>;
     } & {
@@ -275,11 +280,6 @@ declare const IncludeExcludeTypes: () => (import("vue").DefineComponent<{
     } & {
         default: () => true;
     };
-    hasSubtitle: {
-        type: import("vue").PropType<boolean>;
-    } & {
-        default: boolean;
-    };
     titleText: {
         type: import("vue").PropType<string>;
     } & {
@@ -349,6 +349,11 @@ declare const IncludeExcludeTypes: () => (import("vue").DefineComponent<{
         type: import("vue").PropType<unknown>;
         required: true;
     };
+    hasSubtitle: {
+        type: import("vue").PropType<boolean>;
+    } & {
+        default: boolean;
+    };
     searchPlaceholder: {
         type: import("vue").PropType<string>;
     } & {
@@ -382,11 +387,6 @@ declare const IncludeExcludeTypes: () => (import("vue").DefineComponent<{
     } & {
         default: () => true;
     };
-    hasSubtitle: {
-        type: import("vue").PropType<boolean>;
-    } & {
-        default: boolean;
-    };
     titleText: {
         type: import("vue").PropType<string>;
     } & {
@@ -434,13 +434,13 @@ declare const IncludeExcludeTypes: () => (import("vue").DefineComponent<{
     loading: boolean;
     placement: import("floating-vue").Placement;
     disabled: boolean;
+    hasSubtitle: boolean;
     searchPlaceholder: string;
     isOnTop: boolean;
     distance: number;
     autoFocus: boolean;
     defaultOpen: boolean;
     onSearch: (option: any, term: string) => boolean;
-    hasSubtitle: boolean;
     titleText: string;
     showClearAll: boolean;
     alwayesOpen: boolean;

package/components/input/Input.vue.d.ts

@@ -79,9 +79,9 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
 }>>> & {
     "onUpdate:modelValue"?: (value: string | number) => any;
 }, {
-    size: 'sm' | 'lg';
-    label: string;
     type: 'text' | 'number' | 'password';
+    label: string;
+    size: 'sm' | 'lg';
     testId: string;
     disabled: boolean;
     modelValue: string | number;

package/components/input/Input.vue.js

@@ -1,11 +1,11 @@
 import { defineComponent, ref, computed, onMounted, nextTick, openBlock, createElementBlock, normalizeClass, unref, createVNode, withCtx, createTextVNode, toDisplayString, createBlock, createCommentVNode, createElementVNode, renderSlot, mergeProps, withKeys, withModifiers } from 'vue';
-import Icon from '../icon/Icon.vue.js';
 import { InputTestIdModifiers } from '../../testids/index.vue.js';
 /* empty css                                                                     */import _export_sfc from '../../_virtual/plugin-vue_export-helper.vue.js';
 import Text from '../typography/Text.vue.js';
-/* empty css                                                                    *//* empty css                                                                */import IconButton from '../button/IconButton.vue.js';
+import Icon from '../icon/Icon.vue.js';
+/* empty css                                                                   */import IconButton from '../button/v3/IconButton.vue.js';
 import _sfc_main$1 from '../tooltip/Tooltip.vue.js';
-/* empty css                                                                      */import { useEditableContext } from '../table-cells/EditableContext.vue.js';
+/* empty css                                                                         */import { useEditableContext } from '../table-cells/EditableContext.vue.js';
 import '@vueuse/core';
 /* empty css                                                                       */import { REGEX_NUMBER_INPUT } from '../../consts/regex.vue.js';
 /* empty css                                                       */
@@ -254,6 +254,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-var Input = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-1ccecdef"]]);
+var Input = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-6e6469d3"]]);
 
 export { Input as default };

package/components/input/index.d.ts

@@ -3,8 +3,8 @@ import DollarInput from './DollarInput.vue';
 import PercentageInput from './PercentageInput.vue';
 import PasswordInput from './PasswordInput.vue';
 declare const InputTypes: () => (import("vue").DefineComponent<{
-    size: {
-        type: import("vue").PropType<"sm" | "lg">;
+    type: {
+        type: import("vue").PropType<"number" | "text" | "password">;
     } & {
         default: string;
     };
@@ -13,8 +13,8 @@ declare const InputTypes: () => (import("vue").DefineComponent<{
     } & {
         default: string;
     };
-    type: {
-        type: import("vue").PropType<"number" | "text" | "password">;
+    size: {
+        type: import("vue").PropType<"sm" | "lg">;
     } & {
         default: string;
     };
@@ -96,8 +96,8 @@ declare const InputTypes: () => (import("vue").DefineComponent<{
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: string | number) => void;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    size: {
-        type: import("vue").PropType<"sm" | "lg">;
+    type: {
+        type: import("vue").PropType<"number" | "text" | "password">;
     } & {
         default: string;
     };
@@ -106,8 +106,8 @@ declare const InputTypes: () => (import("vue").DefineComponent<{
     } & {
         default: string;
     };
-    type: {
-        type: import("vue").PropType<"number" | "text" | "password">;
+    size: {
+        type: import("vue").PropType<"sm" | "lg">;
     } & {
         default: string;
     };
@@ -189,9 +189,9 @@ declare const InputTypes: () => (import("vue").DefineComponent<{
 }>> & {
     "onUpdate:modelValue"?: (value: string | number) => any;
 }, {
-    size: "sm" | "lg";
-    label: string;
     type: "number" | "text" | "password";
+    label: string;
+    size: "sm" | "lg";
     testId: string;
     disabled: boolean;
     modelValue: string | number;
@@ -211,15 +211,15 @@ declare const InputTypes: () => (import("vue").DefineComponent<{
     ref: {
         type: import("vue").PropType<import("vue").VNodeRef>;
     };
-    size: {
-        type: import("vue").PropType<"sm" | "lg">;
-    };
     label: {
         type: import("vue").PropType<string>;
     };
     style: {
         type: import("vue").PropType<unknown>;
     };
+    size: {
+        type: import("vue").PropType<"sm" | "lg">;
+    };
     testId: {
         type: import("vue").PropType<string>;
     };
@@ -330,15 +330,15 @@ declare const InputTypes: () => (import("vue").DefineComponent<{
     ref: {
         type: import("vue").PropType<import("vue").VNodeRef>;
     };
-    size: {
-        type: import("vue").PropType<"sm" | "lg">;
-    };
     label: {
         type: import("vue").PropType<string>;
     };
     style: {
         type: import("vue").PropType<unknown>;
     };
+    size: {
+        type: import("vue").PropType<"sm" | "lg">;
+    };
     testId: {
         type: import("vue").PropType<string>;
     };

package/components/menu/Menu.vue.d.ts

@@ -27,8 +27,8 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     skidding: number;
     testId: string;
 }>>>, {
-    testId: string;
     theme: string;
+    testId: string;
     isOnTop: boolean;
     distance: number;
     skidding: number;

package/components/menu/index.d.ts

@@ -1,10 +1,10 @@
 declare const MenuTypes: () => import("vue").DefineComponent<{
-    testId: {
+    theme: {
         type: import("vue").PropType<string>;
     } & {
         default: string;
     };
-    theme: {
+    testId: {
         type: import("vue").PropType<string>;
     } & {
         default: string;
@@ -30,12 +30,12 @@ declare const MenuTypes: () => import("vue").DefineComponent<{
         default: string;
     };
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    testId: {
+    theme: {
         type: import("vue").PropType<string>;
     } & {
         default: string;
     };
-    theme: {
+    testId: {
         type: import("vue").PropType<string>;
     } & {
         default: string;
@@ -61,8 +61,8 @@ declare const MenuTypes: () => import("vue").DefineComponent<{
         default: string;
     };
 }>>, {
-    testId: string;
     theme: string;
+    testId: string;
     isOnTop: boolean;
     distance: number;
     skidding: number;

package/components/search/common/Search.common.d.ts

@@ -0,0 +1,9 @@
+export declare const searchCommon: (props: any, emit: any) => {
+    showLeftIcon: import("vue").ComputedRef<boolean>;
+    updateValue: (e: Event) => void;
+    showRightIcon: import("vue").ComputedRef<boolean>;
+    showClear: import("vue").ComputedRef<boolean>;
+    rightIcon: import("vue").ComputedRef<"cancel" | "search">;
+    onRightIconClick: () => void;
+    inputRef: import("vue").Ref<HTMLInputElement>;
+};

package/components/search/common/Search.common.vue.js

@@ -0,0 +1,52 @@
+import { ref, computed } from 'vue';
+
+const searchCommon = (props, emit) => {
+  const inputRef = ref();
+  const updateValue = (e) => {
+    emit("update:modelValue", e.target.value);
+  };
+  const clearValue = () => {
+    emit("update:modelValue", "");
+    focusOnInput();
+  };
+  const onRightIconClick = () => {
+    if (showClear.value) {
+      clearValue();
+    } else {
+      focusOnInput();
+    }
+  };
+  const focusOnInput = () => inputRef.value.focus();
+  const showClear = computed(() => {
+    return props.modelValue !== "";
+  });
+  const inline = computed(() => {
+    return props.variant === "inline-table";
+  });
+  const transparent = computed(() => {
+    return props.variant === "transparent";
+  });
+  const showRightIcon = computed(() => {
+    if (inline.value || transparent.value) {
+      showClear.value;
+    }
+    return showClear.value;
+  });
+  const showLeftIcon = computed(() => {
+    return transparent.value || inline.value;
+  });
+  const rightIcon = computed(() => {
+    return showClear.value ? "cancel" : "search";
+  });
+  return {
+    showLeftIcon,
+    updateValue,
+    showRightIcon,
+    showClear,
+    rightIcon,
+    onRightIconClick,
+    inputRef
+  };
+};
+
+export { searchCommon };

package/components/search/{Search.vue.js → v3/Search.vue.js}

@@ -1,9 +1,10 @@
-import { defineComponent, ref, computed, openBlock, createElementBlock, normalizeClass, unref, createBlock, createCommentVNode, createElementVNode } from 'vue';
-import Icon from '../icon/Icon.vue.js';
-import { SearchTestIdModifiers } from '../../testids/index.vue.js';
-/* empty css                                                        */import _export_sfc from '../../_virtual/plugin-vue_export-helper.vue.js';
+import { defineComponent, openBlock, createElementBlock, normalizeClass, unref, createBlock, createCommentVNode, createElementVNode } from 'vue';
+import Icon from '../../icon/Icon.vue.js';
+import { SearchTestIdModifiers } from '../../../testids/index.vue.js';
+import { searchCommon } from '../common/Search.common.vue.js';
+/* empty css                                                        */import _export_sfc from '../../../_virtual/plugin-vue_export-helper.vue.js';
 
-import "../../Search.vue_vue_type_style_index_0_scoped_true_lang.css";
+import "../../../Search.vue_vue_type_style_index_0_scoped_true_lang.css";
 const _hoisted_1 = ["data-testid"];
 const _hoisted_2 = ["value", "placeholder", "disabled", "data-testid"];
 const _sfc_main = /* @__PURE__ */ defineComponent({
@@ -19,43 +20,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   emits: ["update:modelValue"],
   setup(__props, { expose, emit }) {
     const props = __props;
-    const inputRef = ref();
-    const updateValue = (e) => {
-      emit("update:modelValue", e.target.value);
-    };
-    const clearValue = () => {
-      emit("update:modelValue", "");
-      focusOnInput();
-    };
-    const onRightIconClick = () => {
-      if (showClear.value) {
-        clearValue();
-      } else {
-        focusOnInput();
-      }
-    };
-    const focusOnInput = () => inputRef.value.focus();
-    const showClear = computed(() => {
-      return props.modelValue !== "";
-    });
-    const inline = computed(() => {
-      return props.variant === "inline-table";
-    });
-    const transparent = computed(() => {
-      return props.variant === "transparent";
-    });
-    const showRightIcon = computed(() => {
-      if (inline.value || transparent.value) {
-        showClear.value;
-      }
-      return showClear.value;
-    });
-    const showLeftIcon = computed(() => {
-      return transparent.value || inline.value;
-    });
-    const rightIcon = computed(() => {
-      return showClear.value ? "cancel" : "search";
-    });
+    const {
+      showLeftIcon,
+      updateValue,
+      showRightIcon,
+      showClear,
+      rightIcon,
+      onRightIconClick,
+      inputRef
+    } = searchCommon(props, emit);
     expose({
       inputRef
     });
@@ -78,7 +51,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           placeholder: __props.placeholder,
           disabled: __props.disabled,
           "data-testid": `${__props.testId}-${unref(SearchTestIdModifiers).FIELD}`,
-          onInput: updateValue
+          onInput: _cache[0] || (_cache[0] = (...args) => unref(updateValue) && unref(updateValue)(...args))
         }, null, 42, _hoisted_2),
         unref(showRightIcon) ? (openBlock(), createBlock(unref(Icon), {
           key: 1,
@@ -86,12 +59,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           name: unref(rightIcon),
           "font-size": "sm",
           "data-testid": `${__props.testId}-${unref(SearchTestIdModifiers).CLOSE}`,
-          onClick: onRightIconClick
-        }, null, 8, ["class", "name", "data-testid"])) : createCommentVNode("", true)
+          onClick: unref(onRightIconClick)
+        }, null, 8, ["class", "name", "data-testid", "onClick"])) : createCommentVNode("", true)
       ], 10, _hoisted_1);
     };
   }
 });
-var Search = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-3550fe6c"]]);
+var Search = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-5ec84660"]]);
 
 export { Search as default };

package/components/search/{index.d.ts → v3/index.d.ts}

@@ -10,7 +10,7 @@ declare const SearchTypes: () => import("vue").DefineComponent<{
         default: string;
     };
     variant: {
-        type: import("vue").PropType<"default" | "inline-table" | "transparent">;
+        type: import("vue").PropType<"default" | "transparent" | "inline-table">;
     } & {
         default: string;
     };
@@ -43,7 +43,7 @@ declare const SearchTypes: () => import("vue").DefineComponent<{
         default: string;
     };
     variant: {
-        type: import("vue").PropType<"default" | "inline-table" | "transparent">;
+        type: import("vue").PropType<"default" | "transparent" | "inline-table">;
     } & {
         default: string;
     };
@@ -65,7 +65,7 @@ declare const SearchTypes: () => import("vue").DefineComponent<{
 }, {
     size: "md" | "sm";
     testId: string;
-    variant: "default" | "inline-table" | "transparent";
+    variant: "default" | "transparent" | "inline-table";
     disabled: boolean;
 }>[];
 export { default as Search } from './Search.vue';