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

package/components/dialog/Dialog.vue.js

@@ -4,11 +4,12 @@ import { useTimeoutFn } from '@vueuse/core';
 import Text from '../typography/Text.vue.js';
 import { NOOP } from '@vue/shared';
 import { Reason } from './Reason.vue.js';
-import IconButton from '../button/IconButton.vue.js';
-import Icon from '../icon/Icon.vue.js';
 import { DialogTestIdModifiers } from '../../testids/index.vue.js';
-/* empty css                                                        */import _export_sfc from '../../_virtual/plugin-vue_export-helper.vue.js';
-
+/* empty css                                                                     */import _export_sfc from '../../_virtual/plugin-vue_export-helper.vue.js';
+import Icon from '../icon/Icon.vue.js';
+/* empty css                                                                   */import IconButton from '../button/v3/IconButton.vue.js';
+/* empty css                                                                               */import 'floating-vue';
+/* empty css                                                      *//* empty css                                                                         *//* empty css                                                        */
 import "../../Dialog.vue_vue_type_style_index_0_scoped_true_lang.css";
 const _hoisted_1 = ["data-testid"];
 const _hoisted_2 = ["data-testid"];
@@ -44,7 +45,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   setup(__props, { emit }) {
     const props = __props;
     useCssVars((_ctx) => ({
-      "7d57480a": __props.width
+      "49d1a718": __props.width
     }));
     const visible = ref(false);
     let openTimer = void 0;
@@ -136,7 +137,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                         _: 1
                       })
                     ], true) : createCommentVNode("", true),
-                    __props.showCloseButton ? (openBlock(), createBlock(IconButton, {
+                    __props.showCloseButton ? (openBlock(), createBlock(unref(IconButton), {
                       key: 1,
                       class: "button close-button",
                       size: "md",
@@ -202,6 +203,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-var Dialog = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-55aea585"]]);
+var Dialog = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-544e927f"]]);
 
 export { Dialog as default };

package/components/dialog/index.d.ts

@@ -1,4 +1,9 @@
 declare const DialogTypes: () => import("vue").DefineComponent<{
+    themeClass: {
+        type: import("vue").PropType<string>;
+    } & {
+        default: string;
+    };
     title: {
         type: import("vue").PropType<string>;
     } & {
@@ -68,11 +73,6 @@ declare const DialogTypes: () => import("vue").DefineComponent<{
     } & {
         default: any;
     };
-    themeClass: {
-        type: import("vue").PropType<string>;
-    } & {
-        default: string;
-    };
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: boolean) => void;
 } & {
@@ -80,6 +80,11 @@ declare const DialogTypes: () => import("vue").DefineComponent<{
 } & {
     close: (reason: import("./Reason").Reason) => void;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    themeClass: {
+        type: import("vue").PropType<string>;
+    } & {
+        default: string;
+    };
     title: {
         type: import("vue").PropType<string>;
     } & {
@@ -149,16 +154,12 @@ declare const DialogTypes: () => import("vue").DefineComponent<{
     } & {
         default: any;
     };
-    themeClass: {
-        type: import("vue").PropType<string>;
-    } & {
-        default: string;
-    };
 }>> & {
     "onUpdate:modelValue"?: (value: boolean) => any;
     onClose?: (reason: import("./Reason").Reason) => any;
     onOpen?: () => any;
 }, {
+    themeClass: string;
     title: string;
     testId: string;
     content: string;
@@ -172,7 +173,6 @@ declare const DialogTypes: () => import("vue").DefineComponent<{
     showCloseButton: boolean;
     escapeToClose: boolean;
     beforeClose: (show: () => void) => void;
-    themeClass: string;
 }>[];
 export { default as Dialog } from './Dialog.vue';
 export { DialogTypes };

package/components/dropdown/common/Dropdown.common.d.ts

@@ -0,0 +1,36 @@
+import { UseVirtualListItem } from '@vueuse/core';
+import { Ref } from 'vue';
+export declare const dropdownCommon: (props: any, emit: any) => {
+    onKeydown: (event: any) => void;
+    location: import("vue").ComputedRef<any>;
+    open: Ref<boolean>;
+    toggleMenu: (value?: any, withFocus?: boolean) => void;
+    onButtonKeydown: (event: any) => void;
+    displayedValue: import("vue").ComputedRef<any>;
+    labelRef: Ref<HTMLLabelElement>;
+    query: Ref<string>;
+    containerProps: {
+        ref: Ref<HTMLElement>;
+        onScroll: () => void;
+    };
+    calculateTableHeight: import("vue").ComputedRef<number>;
+    wrapperProps: Ref<{
+        style: {
+            width: string;
+            height: string;
+            marginTop: string;
+        };
+    }>;
+    filteredOptions: import("vue").ComputedRef<any>;
+    allSelected: import("vue").ComputedRef<boolean>;
+    isIndeterminate: import("vue").ComputedRef<boolean>;
+    onSelectAll: () => void;
+    virtualOptions: Ref<UseVirtualListItem<unknown>[]>;
+    isSelected: (arr: any, element: any) => boolean;
+    selectedOption: import("vue").WritableComputedRef<unknown>;
+    onSelect: (option: any, index?: number) => void;
+    activeIndex: Ref<number>;
+    onCancel: () => void;
+    onApply: () => void;
+    scrollTo: (index: number) => void;
+};

package/components/dropdown/common/Dropdown.common.vue.js

@@ -0,0 +1,456 @@
+import { useToggle } from '../../../composables/useToggle.vue.js';
+import { ref, computed, watch, useSlots, nextTick, toRaw, provide, onMounted } from 'vue';
+import { isObjectInArray } from '../../../utils/array.vue.js';
+import { objectsEqual } from '../../../utils/object.vue.js';
+import { useClamp, useVirtualList, onClickOutside } from '@vueuse/core';
+import { Mode, Type, DropdownContext } from './DropdownContext.vue.js';
+import { pxToRem } from '../../../utils/style.vue.js';
+
+const dropdownCommon = (props, emit) => {
+  const isSelected = (arr, element) => {
+    if (props.multi) {
+      return isObjectInArray(arr, element);
+    }
+    return toRaw(arr) === element;
+  };
+  const MULTILINE_LIST_HEIGHT = 48;
+  const LIST_HEIGHT = 34;
+  let Focus;
+  ((Focus2) => {
+    Focus2[Focus2["None"] = 0] = "None";
+    Focus2[Focus2["Next"] = 1] = "Next";
+    Focus2[Focus2["Previous"] = -1] = "Previous";
+    Focus2[Focus2["NextPage"] = 10] = "NextPage";
+    Focus2[Focus2["PrevPage"] = -10] = "PrevPage";
+  })(Focus || (Focus = {}));
+  const selectedOptionRef = ref(
+    props.selected
+  );
+  const selectedOption = computed({
+    get() {
+      return selectedOptionRef.value;
+    },
+    set(value) {
+      emit("update:selected", value);
+    }
+  });
+  watch(
+    () => props.selected,
+    () => {
+      selectedOptionRef.value = props.selected;
+    }
+  );
+  const slots = useSlots();
+  const listRef = ref(null);
+  const inputRef = ref(null);
+  const el = ref(null);
+  const activeOption = ref(null);
+  const labelRef = ref(null);
+  const buttonRef = ref(null);
+  const apply = ref(null);
+  const cancel = ref(null);
+  const IS_ON_TOP_PADDING = 8;
+  const location = computed(() => {
+    return buttonRef.value?.getBoundingClientRect().height + IS_ON_TOP_PADDING + props.distance;
+  });
+  const optionsIds = ref([]);
+  const selectedIndex = ref(-1);
+  const query = ref("");
+  const selectedOptionPrevious = ref([]);
+  const focusButton = () => buttonRef.value?.focus();
+  const [open, _toggle, disable] = useToggle({
+    disabled: props.disabled,
+    initialValue: props.defaultOpen
+  });
+  watch(
+    () => props.disabled,
+    (value) => {
+      if (value !== void 0) {
+        disable(value);
+      }
+    }
+  );
+  const toggle = (value) => {
+    isOpen.value = _toggle(value);
+  };
+  const isOpen = computed({
+    get() {
+      return props.isOpen;
+    },
+    set(value) {
+      emit("update:isOpen", value);
+    }
+  });
+  const maxClamped = computed(() => {
+    return filteredOptions.value.length - 1;
+  });
+  const activeIndex = useClamp(0, 0, maxClamped);
+  const selectedValue = computed(() => {
+    if (selectedOption.value) {
+      return props.displayValue(selectedOption.value);
+    }
+    return "";
+  });
+  const getMultiselectValueToShow = (selectedOption2) => {
+    if (!selectedOption2.value.length && !props.multiOptionsPlaceholderPrefix && !props.multiOptionsPlaceholderSuffix)
+      return props.placeholder;
+    const multipleOptionsPlaceholder = !props.multiOptionsPlaceholderPrefix && !props.multiOptionsPlaceholderSuffix ? `${selectedOption2.value.length} selected` : `${props.multiOptionsPlaceholderPrefix ?? ""}${selectedOption2.value.length ?? "0"}${props.multiOptionsPlaceholderSuffix ?? ""}`;
+    return selectedOption2.value.length == 1 && !!props.displayValue ? props.displayValue(selectedOption2.value[0]) : multipleOptionsPlaceholder;
+  };
+  const displayedValue = computed(() => {
+    if (!props.multi) {
+      return selectedOption.value ? props.displayValue(selectedOption.value) : props.placeholder;
+    }
+    if (!Array.isArray(selectedOptionRef.value)) {
+      return;
+    }
+    return getMultiselectValueToShow(selectedOptionRef);
+  });
+  const allSelected = computed(() => {
+    if (!Array.isArray(selectedOptionRef.value)) {
+      return;
+    }
+    return selectedOptionRef.value.length === filteredOptions.value.length;
+  });
+  const isIndeterminate = computed(() => {
+    if (!props.multi) {
+      return false;
+    }
+    if (!Array.isArray(selectedOptionRef.value)) {
+      return false;
+    }
+    return selectedOptionRef.value.length > 0 && selectedOptionRef.value.length < filteredOptions.value.length;
+  });
+  const queryChanged = (value) => {
+    query.value = value;
+  };
+  const filteredOptions = computed(
+    () => props.options.filter((option) => props.onSearch(option, query.value))
+  );
+  const hasSubtitle = computed(() => optionsIds.value[0]?.hasSubtitle);
+  const isMulti = computed(() => api.mode === Mode.Multi);
+  const itemHeight = computed(
+    () => hasSubtitle.value ? MULTILINE_LIST_HEIGHT : LIST_HEIGHT
+  );
+  const {
+    list: virtualOptions,
+    containerProps,
+    wrapperProps,
+    scrollTo
+  } = useVirtualList(filteredOptions, {
+    itemHeight: itemHeight.value
+  });
+  watch(
+    () => props.isOpen,
+    (value) => {
+      toggle(value);
+    }
+  );
+  watch([selectedIndex], async () => {
+    await nextTick();
+  });
+  watch(
+    [open, activeIndex, selectedIndex],
+    async ([openNewValue], [openOldValue]) => {
+      if (!open.value) {
+        return;
+      }
+      await nextTick();
+      if (selectedIndex.value !== -1 && openNewValue !== openOldValue) {
+        setTimeout(() => {
+          scrollTo(selectedIndex.value);
+        });
+      }
+      if (activeIndex.value) {
+        setTimeout(() => {
+          scrollTo(activeIndex.value);
+        });
+      }
+    }
+  );
+  const toggleMenu = (value, withFocus = false) => {
+    if (props.disabled) {
+      return;
+    }
+    toggle(value);
+    nextTick(() => {
+      if (open.value) {
+        emit("opened");
+      }
+      if (!open.value) {
+        emit("closed");
+      }
+      if (listRef.value && withFocus) {
+        listRef.value.focus();
+      }
+    });
+  };
+  watch(open, (isOpen2) => {
+    if (isOpen2) {
+      if (isMulti.value && Array.isArray(selectedOption.value)) {
+        selectedOptionPrevious.value = toRaw(selectedOption.value).slice();
+      }
+      return;
+    }
+    focusButton();
+  });
+  const onSelectAll = () => {
+    selectAll();
+    selectedOption.value = selectedOptionRef.value;
+  };
+  const selectAll = () => {
+    if (allSelected.value) {
+      selectedOptionRef.value = [];
+      return;
+    }
+    if (!Array.isArray(selectedOptionRef.value)) {
+      return;
+    }
+    if (selectedOptionRef.value.length === filteredOptions.value.length) {
+      selectedOptionRef.value = [];
+      return;
+    }
+    selectedOptionRef.value = filteredOptions.value;
+  };
+  const onSelect = (option, index) => {
+    option = toRaw(option);
+    const isDisabled = optionsIds.value[index]?.disabled;
+    if (isDisabled) {
+      return;
+    }
+    selectedIndex.value = index;
+    if (api.mode !== Mode.Multi) {
+      if (!props.keepOpen) {
+        toggleMenu(false);
+      }
+      api.goToOption(0 /* None */);
+      selectedOption.value = option;
+      queryChanged("");
+      focusButton();
+      if (api.type === Type.Search && inputRef.value) {
+        inputRef.value.value = props.displayValue(option);
+      }
+      return;
+    }
+    if (!Array.isArray(selectedOptionRef.value)) {
+      return;
+    }
+    inputRef.value?.focus();
+    const rawSelectedOption = toRaw(selectedOptionRef.value);
+    if (isObjectInArray(rawSelectedOption, option)) {
+      selectedOptionRef.value = rawSelectedOption.filter(
+        (item) => !objectsEqual(item, option)
+      );
+      return;
+    } else {
+      selectedOptionRef.value = [...rawSelectedOption, option];
+      return;
+    }
+  };
+  const canFocus = (index) => {
+    return optionsIds.value[index]?.disabled;
+  };
+  const api = {
+    activeIndex,
+    options: optionsIds,
+    selectedOption,
+    labelRef,
+    activeOption,
+    listRef,
+    clearable: props.clearable,
+    type: slots.input ? Type.Search : Type.Dropdown,
+    mode: props.multi ? Mode.Multi : Mode.Single,
+    query,
+    selectedValue,
+    toggle: toggleMenu,
+    disabled: props.disabled,
+    open,
+    mandatory: props.mandatory,
+    size: props.size,
+    placeholder: props.placeholder,
+    select: onSelect,
+    clearSelection: () => {
+      queryChanged("");
+      selectedOption.value = api.mode === Mode.Single ? null : [];
+      if (inputRef.value) {
+        inputRef.value.value = "";
+      }
+    },
+    search: queryChanged,
+    goToOption: async (focus) => {
+      if (!open.value) {
+        return;
+      }
+      let index = activeIndex.value + focus;
+      const totalDisabled = optionsIds.value.filter(
+        (item) => item.disabled
+      ).length;
+      const total = filteredOptions.value.length - totalDisabled;
+      if (index > total) {
+        index = total + 1;
+      }
+      while (true) {
+        if (!optionsIds.value[index]?.disabled) {
+          activeOption.value = filteredOptions.value[index];
+          activeIndex.value = index;
+          return;
+        }
+        if (focus === 1 /* Next */ || focus === 10 /* NextPage */) {
+          index = index + 1 /* Next */;
+        }
+        if (focus === -1 /* Previous */ || focus === -10 /* PrevPage */) {
+          index = index + -1 /* Previous */;
+        }
+        if (!canFocus(activeIndex.value)) {
+          continue;
+        }
+        activeOption.value = filteredOptions.value[index];
+        activeIndex.value = index;
+        return;
+      }
+    },
+    registerInput: (ref2) => {
+      inputRef.value = ref2.value;
+    },
+    registerOption: (id, disabled, hasSubtitle2) => {
+      optionsIds.value = [...optionsIds.value, { id, disabled, hasSubtitle: hasSubtitle2 }];
+    },
+    unRegisterOption(id) {
+      optionsIds.value = optionsIds.value.filter((item) => item.id !== id);
+    }
+  };
+  provide(DropdownContext, api);
+  onClickOutside(
+    listRef,
+    () => {
+      if (open.value) {
+        onCancel();
+      }
+    },
+    {
+      ignore: [buttonRef, apply, cancel, inputRef, containerProps.ref]
+    }
+  );
+  const resetInput = () => {
+    if (!inputRef.value) {
+      return;
+    }
+    inputRef.value.value = api.query.value = "";
+  };
+  onMounted(async () => {
+    if (props.autoFocus) {
+      await nextTick();
+      setTimeout(() => {
+        el.value.focus();
+      });
+    }
+    api.goToOption(0);
+  });
+  const onApply = () => {
+    selectedOption.value = selectedOptionRef.value;
+    emit("apply", selectedOption.value);
+    toggleMenu(false);
+    resetInput();
+  };
+  const onCancel = () => {
+    if (isMulti.value && Array.isArray(selectedOptionPrevious.value)) {
+      selectedOption.value = toRaw(selectedOptionPrevious.value).slice();
+    }
+    toggleMenu(false);
+  };
+  const onButtonKeydown = (event) => {
+    if (props.disableKeyboardEvents)
+      return;
+    switch (event.key) {
+      case "Space":
+      case "Enter":
+      case "ArrowUp":
+      case "ArrowDown": {
+        toggleMenu(true);
+        event.preventDefault();
+      }
+    }
+  };
+  const onKeydown = (event) => {
+    if (props.disableKeyboardEvents)
+      return;
+    switch (event.key) {
+      case "ArrowUp": {
+        api.goToOption(-1 /* Previous */);
+        event.preventDefault();
+        event.stopPropagation();
+        break;
+      }
+      case "ArrowDown": {
+        api.goToOption(1 /* Next */);
+        event.preventDefault();
+        event.stopPropagation();
+        break;
+      }
+      case "Escape": {
+        toggleMenu(false);
+        event.preventDefault();
+        break;
+      }
+      case "PageUp": {
+        api.goToOption(10 /* NextPage */);
+        event.preventDefault();
+        break;
+      }
+      case "PageDown": {
+        api.goToOption(-10 /* PrevPage */);
+        event.preventDefault();
+        break;
+      }
+      case "Enter": {
+        if (!open.value) {
+          toggleMenu(true);
+          return;
+        }
+        onSelect(filteredOptions.value[activeIndex.value], activeIndex.value);
+        if (api.mode === Mode.Single && !props.keepOpen) {
+          toggleMenu(false);
+        }
+        event.preventDefault();
+        break;
+      }
+    }
+  };
+  const calculateTableHeight = computed(() => {
+    const MAX_NUMBER_OF_OPTIONS = 7;
+    const PADDING_PX = 8;
+    const optionsLength = virtualOptions.value.length;
+    const showSelectAllAddition = props.showSelectAll ? 1 : 0;
+    const isThereMoreOptionsThenMax = optionsLength > MAX_NUMBER_OF_OPTIONS;
+    const numberOfRows = optionsLength + showSelectAllAddition;
+    const numToCalculate = isThereMoreOptionsThenMax ? MAX_NUMBER_OF_OPTIONS + 0.5 : numberOfRows;
+    return pxToRem(numToCalculate * itemHeight.value + PADDING_PX);
+  });
+  return {
+    onKeydown,
+    location,
+    open,
+    toggleMenu,
+    onButtonKeydown,
+    displayedValue,
+    labelRef,
+    query,
+    containerProps,
+    calculateTableHeight,
+    wrapperProps,
+    filteredOptions,
+    allSelected,
+    isIndeterminate,
+    onSelectAll,
+    virtualOptions,
+    isSelected,
+    selectedOption,
+    onSelect,
+    activeIndex,
+    onCancel,
+    onApply,
+    scrollTo
+  };
+};
+
+export { dropdownCommon };

package/components/dropdown/{Label.vue.js → common/Label.vue.js}

@@ -1,10 +1,10 @@
 import { defineComponent, openBlock, createElementBlock, unref, normalizeClass, createVNode, withCtx, renderSlot, createBlock, createTextVNode, createCommentVNode } from 'vue';
-/* empty css                                                                     */import _export_sfc from '../../_virtual/plugin-vue_export-helper.vue.js';
-import Text from '../typography/Text.vue.js';
+/* empty css                                                                        */import _export_sfc from '../../../_virtual/plugin-vue_export-helper.vue.js';
+import Text from '../../typography/Text.vue.js';
 import { useDropdownContext } from './DropdownContext.vue.js';
-import { useId } from '../../composables/useId.vue.js';
+import { useId } from '../../../composables/useId.vue.js';
 /* empty css                                                       */
-import "../../Label.vue_vue_type_style_index_0_scoped_true_lang.css";
+import "../../../Label.vue_vue_type_style_index_0_scoped_true_lang.css";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "Label",
   setup(__props) {
@@ -36,6 +36,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-var Label = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-4bba4499"]]);
+var Label = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-5151f81e"]]);
 
 export { Label as default };

package/components/dropdown/{Option.vue.js → common/Option.vue.js}

@@ -1,13 +1,13 @@
 import { defineComponent, ref, onMounted, onUnmounted, computed, toRaw, openBlock, createElementBlock, normalizeClass, unref, createElementVNode, createBlock, createCommentVNode, renderSlot, createVNode, withCtx, createTextVNode, toDisplayString, withModifiers } from 'vue';
-/* empty css                                                                     */import _export_sfc from '../../_virtual/plugin-vue_export-helper.vue.js';
-import Text from '../typography/Text.vue.js';
+/* empty css                                                                        */import _export_sfc from '../../../_virtual/plugin-vue_export-helper.vue.js';
+import Text from '../../typography/Text.vue.js';
 import { useDropdownContext, Mode } from './DropdownContext.vue.js';
-import { useId } from '../../composables/useId.vue.js';
-import Checkbox from '../checkbox/Checkbox.vue.js';
-import Icon from '../icon/Icon.vue.js';
+import { useId } from '../../../composables/useId.vue.js';
+import Checkbox from '../../checkbox/Checkbox.vue.js';
+import Icon from '../../icon/Icon.vue.js';
 import { NOOP } from '@vue/shared';
 /* empty css                                                        */
-import "../../Option.vue_vue_type_style_index_0_scoped_true_lang.css";
+import "../../../Option.vue_vue_type_style_index_0_scoped_true_lang.css";
 const _hoisted_1 = {
   key: 1,
   class: "image"
@@ -128,6 +128,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-var Option = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-0ea361f0"]]);
+var Option = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-c60d0d70"]]);
 
 export { Option as default };

package/components/dropdown/{SearchInput.vue.js → common/SearchInput.vue.js}

@@ -1,10 +1,11 @@
 import { defineComponent, useSlots, ref, onMounted, computed, watch, renderSlot, unref, createElementVNode, normalizeClass, openBlock, createElementBlock, createCommentVNode, createVNode, withCtx, createBlock } from 'vue';
 import { useDropdownContext, Mode } from './DropdownContext.vue.js';
-import Icon from '../icon/Icon.vue.js';
-import IconButton from '../button/IconButton.vue.js';
-/* empty css                                                             */import _export_sfc from '../../_virtual/plugin-vue_export-helper.vue.js';
-
-import "../../SearchInput.vue_vue_type_style_index_0_scoped_true_lang.css";
+import Icon from '../../icon/Icon.vue.js';
+/* empty css                                                                        */import _export_sfc from '../../../_virtual/plugin-vue_export-helper.vue.js';
+/* empty css                                                                     *//* empty css                                                                      */import IconButton from '../../button/v3/IconButton.vue.js';
+/* empty css                                                                                  */import 'floating-vue';
+/* empty css                                                         *//* empty css                                                                            *//* empty css                                                             */
+import "../../../SearchInput.vue_vue_type_style_index_0_scoped_true_lang.css";
 const _hoisted_1 = {
   key: 0,
   class: "prefix"
@@ -86,7 +87,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             onFocusout: _cache[1] || (_cache[1] = ($event) => isFocused.value = false),
             onInput: onChange
           }, null, 42, _hoisted_2),
-          createVNode(IconButton, {
+          createVNode(unref(IconButton), {
             variant: "colorized",
             size: "sm",
             theme: "secondary",
@@ -114,6 +115,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-var SearchInput = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-35368fc5"]]);
+var SearchInput = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-3f453145"]]);
 
 export { SearchInput as default };