@ironsource/shared-ui 1.4.2-rc.6 → 1.4.2-test.1

package/components/dropdown/Dropdown.vue.js

@@ -1,773 +1,6 @@
-import { defineComponent, ref, computed, watch, useSlots, nextTick, toRaw, provide, onMounted, openBlock, createElementBlock, normalizeClass, renderSlot, createVNode, unref, withCtx, Transition, createElementVNode, createTextVNode, toDisplayString, createCommentVNode, createBlock, mergeProps, withModifiers, Fragment, renderList, pushScopeId, popScopeId } from 'vue';
-import Button from '../button/Button.vue.js';
-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                                                                    *//* empty css                                                                               */import { Dropdown as Dropdown$1 } from 'floating-vue';
-/* empty css                                                      *//* empty css                                                                      */import Option from './Option.vue.js';
-import Search from '../search/Search.vue.js';
-import { useToggle } from '../../composables/useToggle.vue.js';
-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';
-/* empty css                                                          *//* empty css                                              */
-import "../../Dropdown.vue_vue_type_style_index_0_scoped_true_lang.css";import "../../Dropdown.vue_vue_type_style_index_1_lang.css";
-const _withScopeId = (n) => (pushScopeId("data-v-12b53c10"), n = n(), popScopeId(), n);
-const _hoisted_1 = ["tabindex"];
-const _hoisted_2 = ["disabled", "aria-expanded", "aria-labelledby", "aria-disabled"];
-const _hoisted_3 = {
-  key: 0,
-  class: "image-slot"
+import o from "./Dropdown.vue2.js";
+/* empty css               *//* empty css               */import r from "../../_virtual/_plugin-vue_export-helper.js";
+const c = /* @__PURE__ */ r(o, [["__scopeId", "data-v-c681a7ca"]]);
+export {
+  c as default
 };
-const _hoisted_4 = { class: "angle-down" };
-const _hoisted_5 = {
-  key: 0,
-  class: "dropdown-title"
-};
-const _hoisted_6 = {
-  key: 0,
-  class: "dropdown-title__text"
-};
-const _hoisted_7 = {
-  key: 0,
-  class: "no-result-container"
-};
-const _hoisted_8 = {
-  key: 1,
-  class: "loader"
-};
-const _hoisted_9 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElementVNode("svg", {
-  width: "100",
-  height: "100",
-  viewBox: "0 0 100 100"
-}, [
-  /* @__PURE__ */ createElementVNode("circle", {
-    cx: "50",
-    cy: "50",
-    fill: "none",
-    stroke: "currentColor",
-    "stroke-width": "6",
-    r: "35",
-    "stroke-dasharray": "164.93361431346415 56.97787143782138"
-  }, [
-    /* @__PURE__ */ createElementVNode("animateTransform", {
-      attributeName: "transform",
-      type: "rotate",
-      repeatCount: "indefinite",
-      dur: "1s",
-      values: "0 50 50;360 50 50",
-      keyTimes: "0;1"
-    })
-  ])
-], -1));
-const _hoisted_10 = { key: 2 };
-const _hoisted_11 = ["aria-selected", "aria-disabled", "onClick"];
-const _hoisted_12 = {
-  key: 0,
-  class: "actions"
-};
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  __name: "Dropdown",
-  props: {
-    modelValue: { default: null },
-    placeholder: { default: "" },
-    disabled: { type: Boolean, default: false },
-    mandatory: { type: Boolean, default: false },
-    helperText: { default: "" },
-    searchPlaceholder: { default: "" },
-    isOnTop: { type: Boolean, default: false },
-    multi: { type: Boolean, default: false },
-    title: { default: "" },
-    inlineSearch: { type: Boolean, default: false },
-    popperClass: { default: "" },
-    noResultsText: { default: "No results found" },
-    loading: { type: Boolean },
-    selected: { default: null },
-    showSelectAll: { type: Boolean },
-    defaultOpen: { type: Boolean, default: false },
-    showButtonOnOpen: { type: Boolean, default: true },
-    autoFocus: { type: Boolean, default: false },
-    distance: { default: 0 },
-    isOpen: { type: Boolean },
-    skidding: { default: 0 },
-    placement: { default: "bottom-start" },
-    clearable: { type: Boolean, default: false },
-    error: { default: "" },
-    size: { default: "lg" },
-    displayValue: null,
-    options: null,
-    onSearch: { type: Function, default: () => true },
-    theme: { default: "is-dropdown" },
-    container: { default: "body" },
-    flip: { type: Boolean, default: true },
-    keepOpen: { type: Boolean, default: false },
-    autoSize: { type: Boolean, default: false },
-    disableKeyboardEvents: { type: Boolean, default: false },
-    multiOptionsPlaceholderPrefix: { default: "" },
-    multiOptionsPlaceholderSuffix: { default: "" }
-  },
-  emits: ["update:selected", "update:isOpen", "closed", "opened", "apply"],
-  setup(__props, { expose, emit }) {
-    const props = __props;
-    const isSelected = (arr, element) => {
-      if (props.multi) {
-        return isObjectInArray(arr, element);
-      }
-      return toRaw(arr) === element;
-    };
-    const MULTILINE_LIST_HEIGHT = 48;
-    const LIST_HEIGHT = 34;
-    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);
-    });
-    expose({
-      selectItem: onSelect,
-      scrollTo
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        ref_key: "el",
-        ref: el,
-        class: normalizeClass(["dropdown", { "dropdown--disabled": __props.disabled }]),
-        tabindex: __props.disabled ? -1 : 0,
-        onKeydown
-      }, [
-        renderSlot(_ctx.$slots, "label", {}, void 0, true),
-        createVNode(unref(Dropdown$1), {
-          theme: __props.theme,
-          "popper-class": [
-            __props.popperClass,
-            __props.autoSize ? "v-popper--theme-is-dropdown--auto-size" : null
-          ],
-          placement: __props.placement,
-          skidding: __props.isOnTop ? 0 : __props.skidding,
-          distance: __props.isOnTop ? -unref(location) : __props.distance,
-          flip: __props.flip,
-          triggers: [],
-          shown: !!unref(open),
-          "auto-hide": false,
-          container: __props.container,
-          "auto-size": __props.autoSize
-        }, {
-          popper: withCtx(() => [
-            createVNode(Transition, null, {
-              default: withCtx(() => [
-                createElementVNode("div", {
-                  ref_key: "listRef",
-                  ref: listRef
-                }, [
-                  __props.inlineSearch || __props.title ? (openBlock(), createElementBlock("div", _hoisted_5, [
-                    __props.title ? (openBlock(), createElementBlock("div", _hoisted_6, [
-                      createVNode(unref(Text), { strong: "" }, {
-                        default: withCtx(() => [
-                          createTextVNode(toDisplayString(__props.title), 1)
-                        ]),
-                        _: 1
-                      })
-                    ])) : createCommentVNode("", true),
-                    __props.inlineSearch ? (openBlock(), createBlock(unref(Search), {
-                      key: 1,
-                      modelValue: query.value,
-                      "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => query.value = $event),
-                      placeholder: __props.searchPlaceholder,
-                      class: "dropdown-title__search",
-                      variant: "transparent",
-                      size: "md",
-                      onKeydown
-                    }, null, 8, ["modelValue", "placeholder"])) : createCommentVNode("", true)
-                  ])) : createCommentVNode("", true),
-                  unref(open) ? (openBlock(), createElementBlock("div", {
-                    key: 1,
-                    class: "dropdown",
-                    onKeydown
-                  }, [
-                    renderSlot(_ctx.$slots, "input-list", { open: unref(open) }, void 0, true),
-                    createElementVNode("div", mergeProps(unref(containerProps), {
-                      class: ["list-container", { "list-container--multi": __props.multi }],
-                      style: { height: `${unref(calculateTableHeight)}rem` }
-                    }), [
-                      createElementVNode("ul", mergeProps(unref(wrapperProps), {
-                        role: "listbox",
-                        class: ["list", { "list--multi": __props.multi }]
-                      }), [
-                        !unref(filteredOptions).length && !__props.loading ? (openBlock(), createElementBlock("li", _hoisted_7, [
-                          createVNode(unref(Text), {
-                            size: "sm",
-                            class: "no-result"
-                          }, {
-                            default: withCtx(() => [
-                              createTextVNode(toDisplayString(__props.noResultsText), 1)
-                            ]),
-                            _: 1
-                          })
-                        ])) : createCommentVNode("", true),
-                        __props.loading ? (openBlock(), createElementBlock("li", _hoisted_8, [
-                          createVNode(unref(Icon), {
-                            "font-size": "md",
-                            class: "loader-icon"
-                          }, {
-                            default: withCtx(() => [
-                              _hoisted_9
-                            ]),
-                            _: 1
-                          }),
-                          createVNode(unref(Text), null, {
-                            default: withCtx(() => [
-                              createTextVNode("Loading...")
-                            ]),
-                            _: 1
-                          })
-                        ])) : createCommentVNode("", true),
-                        __props.showSelectAll ? (openBlock(), createElementBlock("li", _hoisted_10, [
-                          createVNode(Option, {
-                            "aria-selected": unref(allSelected),
-                            "aria-disabled": !!__props.disabled,
-                            "selected-prop": unref(allSelected),
-                            "is-indeterminate": unref(isIndeterminate),
-                            "select-all-option": "",
-                            onClick: _cache[3] || (_cache[3] = withModifiers(($event) => onSelectAll(), ["stop"]))
-                          }, {
-                            default: withCtx(() => [
-                              createTextVNode("Select all ")
-                            ]),
-                            _: 1
-                          }, 8, ["aria-selected", "aria-disabled", "selected-prop", "is-indeterminate"])
-                        ])) : createCommentVNode("", true),
-                        unref(virtualOptions).length && !__props.loading ? (openBlock(true), createElementBlock(Fragment, { key: 3 }, renderList(unref(virtualOptions), ({ data, index }) => {
-                          return openBlock(), createElementBlock("li", {
-                            key: index,
-                            "aria-selected": isSelected(toRaw(unref(selectedOption)), data),
-                            "aria-disabled": !!__props.disabled,
-                            onClick: withModifiers(() => onSelect(data, index), ["stop"])
-                          }, [
-                            renderSlot(_ctx.$slots, "default", {
-                              option: data,
-                              selected: isSelected(toRaw(unref(selectedOption)), data),
-                              active: toRaw(unref(activeIndex)) === index
-                            }, void 0, true)
-                          ], 8, _hoisted_11);
-                        }), 128)) : createCommentVNode("", true)
-                      ], 16)
-                    ], 16),
-                    __props.multi ? (openBlock(), createElementBlock("div", _hoisted_12, [
-                      createVNode(unref(Button), {
-                        ref_key: "cancel",
-                        ref: cancel,
-                        size: "sm",
-                        variant: "border",
-                        theme: "third",
-                        onClick: onCancel
-                      }, {
-                        default: withCtx(() => [
-                          createTextVNode(" Cancel ")
-                        ]),
-                        _: 1
-                      }, 512),
-                      createVNode(unref(Button), {
-                        ref_key: "apply",
-                        ref: apply,
-                        "data-testid": "mutli-apply",
-                        size: "sm",
-                        class: "apply-button",
-                        onClick: onApply
-                      }, {
-                        default: withCtx(() => [
-                          createTextVNode("Apply ")
-                        ]),
-                        _: 1
-                      }, 512)
-                    ])) : createCommentVNode("", true)
-                  ], 32)) : createCommentVNode("", true)
-                ], 512)
-              ]),
-              _: 3
-            })
-          ]),
-          default: withCtx(() => [
-            createElementVNode("div", {
-              class: normalizeClass(["button__container", {
-                "button__container--open": !!unref(open),
-                [`button__container--${__props.size}`]: true,
-                "button__container--disabled": __props.disabled
-              }])
-            }, [
-              _ctx.$slots.input ? (openBlock(), createElementBlock("div", {
-                key: 0,
-                ref_key: "buttonRef",
-                ref: buttonRef,
-                onClick: _cache[0] || (_cache[0] = ($event) => toggleMenu()),
-                onKeydown: onButtonKeydown
-              }, [
-                renderSlot(_ctx.$slots, "input", {
-                  open: unref(open),
-                  value: unref(displayedValue),
-                  disabled: __props.disabled
-                }, void 0, true)
-              ], 544)) : createCommentVNode("", true),
-              !_ctx.$slots.input ? (openBlock(), createElementBlock("button", {
-                key: 1,
-                ref_key: "buttonRef",
-                ref: buttonRef,
-                disabled: __props.disabled,
-                "aria-haspopup": true,
-                "aria-expanded": !!unref(open),
-                "aria-labelledby": labelRef.value?.id,
-                "aria-disabled": __props.disabled,
-                class: normalizeClass([{
-                  "button--open": !!unref(open),
-                  [`button--${__props.size}`]: true,
-                  "button--disabled": __props.disabled
-                }, "button"]),
-                onKeydown: onButtonKeydown,
-                onClick: _cache[1] || (_cache[1] = ($event) => toggleMenu())
-              }, [
-                _ctx.$slots.image ? (openBlock(), createElementBlock("div", _hoisted_3, [
-                  renderSlot(_ctx.$slots, "image", {}, void 0, true)
-                ])) : createCommentVNode("", true),
-                createVNode(unref(Text), {
-                  size: "sm",
-                  "is-truncated": ""
-                }, {
-                  default: withCtx(() => [
-                    createTextVNode(toDisplayString(unref(displayedValue)), 1)
-                  ]),
-                  _: 1
-                }),
-                createElementVNode("div", _hoisted_4, [
-                  createVNode(unref(Icon), {
-                    name: "angle-down",
-                    "font-size": "sm"
-                  })
-                ])
-              ], 42, _hoisted_2)) : createCommentVNode("", true)
-            ], 2)
-          ]),
-          _: 3
-        }, 8, ["theme", "popper-class", "placement", "skidding", "distance", "flip", "shown", "container", "auto-size"]),
-        !__props.error && __props.helperText ? (openBlock(), createBlock(unref(Text), {
-          key: 0,
-          size: "caption",
-          class: "helper-text"
-        }, {
-          default: withCtx(() => [
-            createTextVNode(toDisplayString(__props.helperText), 1)
-          ]),
-          _: 1
-        })) : createCommentVNode("", true),
-        __props.error ? (openBlock(), createBlock(unref(Text), {
-          key: 1,
-          size: "caption",
-          class: "helper-text helper-text--error"
-        }, {
-          default: withCtx(() => [
-            createTextVNode(toDisplayString(__props.error), 1)
-          ]),
-          _: 1
-        })) : createCommentVNode("", true)
-      ], 42, _hoisted_1);
-    };
-  }
-});
-var Dropdown = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-12b53c10"]]);
-
-export { Dropdown as default };