@ozdao/martyrs 0.2.581 → 0.2.583

package/dist/martyrs/src/components/SelectMulti/SelectMulti.vue.js

@@ -1,625 +0,0 @@
-import { ref, computed, watch, onMounted, createElementBlock, openBlock, withKeys, normalizeClass, withModifiers, renderSlot, createElementVNode, createVNode, createCommentVNode, withDirectives, Fragment, renderList, toDisplayString, vShow, Transition, withCtx, normalizeStyle, createTextVNode, nextTick } from "vue";
-/* empty css                 */
-const _hoisted_1 = ["tabindex", "onKeydown", "onKeypress", "aria-owns"];
-const _hoisted_2 = { class: "multiselect__tags-wrap" };
-const _hoisted_3 = { class: "multiselect__tag" };
-const _hoisted_4 = ["textContent"];
-const _hoisted_5 = ["onKeypress", "onMousedown"];
-const _hoisted_6 = ["textContent"];
-const _hoisted_7 = { class: "multiselect__spinner" };
-const _hoisted_8 = ["name", "id", "placeholder", "value", "disabled", "tabindex", "onKeydown", "onKeypress", "aria-controls"];
-const _hoisted_9 = ["id"];
-const _hoisted_10 = { key: 0 };
-const _hoisted_11 = { class: "multiselect__option" };
-const _hoisted_12 = ["id", "role"];
-const _hoisted_13 = ["onClick", "onMouseenter", "data-select", "data-selected", "data-deselect"];
-const _hoisted_14 = ["data-select", "data-deselect", "onMouseenter", "onMousedown"];
-const _hoisted_15 = { class: "multiselect__option" };
-const _hoisted_16 = { class: "multiselect__option" };
-const _sfc_main = {
-  __name: "SelectMulti",
-  props: {
-    modelValue: { type: null, default: () => [] },
-    options: { type: Array, required: true },
-    multiple: { type: Boolean, default: false },
-    trackBy: String,
-    label: String,
-    searchable: { type: Boolean, default: true },
-    clearOnSelect: { type: Boolean, default: true },
-    hideSelected: { type: Boolean, default: false },
-    placeholder: { type: String, default: "Select option" },
-    allowEmpty: { type: Boolean, default: true },
-    resetAfter: { type: Boolean, default: false },
-    closeOnSelect: { type: Boolean, default: true },
-    customLabel: {
-      type: Function,
-      default: (option, label) => {
-        if (!option && option !== 0) return "";
-        return label ? option[label] : option;
-      }
-    },
-    taggable: { type: Boolean, default: false },
-    tagPlaceholder: { type: String, default: "Press enter to create a tag" },
-    tagPosition: { type: String, default: "top" },
-    max: { type: [Number, Boolean], default: false },
-    id: { default: null },
-    optionsLimit: { type: Number, default: 1e3 },
-    groupValues: String,
-    groupLabel: String,
-    groupSelect: { type: Boolean, default: false },
-    blockKeys: { type: Array, default: () => [] },
-    preserveSearch: { type: Boolean, default: false },
-    preselectFirst: { type: Boolean, default: false },
-    preventAutofocus: { type: Boolean, default: false },
-    internalSearch: { type: Boolean, default: true },
-    name: { type: String, default: "" },
-    selectLabel: { type: String, default: "Press enter to select" },
-    selectGroupLabel: { type: String, default: "Press enter to select group" },
-    selectedLabel: { type: String, default: "Selected" },
-    deselectLabel: { type: String, default: "Press enter to remove" },
-    deselectGroupLabel: { type: String, default: "Press enter to deselect group" },
-    showLabels: { type: Boolean, default: true },
-    limit: { type: Number, default: 99999 },
-    maxHeight: { type: Number, default: 300 },
-    limitText: { type: Function, default: (count) => `and ${count} more` },
-    loading: { type: Boolean, default: false },
-    disabled: { type: Boolean, default: false },
-    openDirection: { type: String, default: "" },
-    showNoOptions: { type: Boolean, default: true },
-    showNoResults: { type: Boolean, default: true },
-    tabindex: { type: Number, default: 0 },
-    showPointer: { type: Boolean, default: true },
-    optionHeight: { type: Number, default: 40 }
-  },
-  emits: ["open", "search-change", "close", "select", "update:modelValue", "remove", "tag"],
-  setup(__props, { emit: __emit }) {
-    const props = __props;
-    const emit = __emit;
-    const multiselect = ref(null);
-    const searchInput = ref(null);
-    const list = ref(null);
-    const tags = ref(null);
-    const search = ref("");
-    const isOpen = ref(false);
-    const preferredOpenDirection = ref("below");
-    const optimizedHeight = ref(props.maxHeight);
-    const pointer = ref(0);
-    const pointerDirty = ref(false);
-    const isEmpty = (opt) => {
-      if (opt === 0) return false;
-      if (Array.isArray(opt) && opt.length === 0) return true;
-      return !opt;
-    };
-    const includes = (str, query) => {
-      if (str === void 0) str = "undefined";
-      if (str === null) str = "null";
-      if (str === false) str = "false";
-      return str.toString().toLowerCase().indexOf(query.trim()) !== -1;
-    };
-    const filterOptions = (options, search2, label, customLabel) => {
-      return search2 ? options.filter((option) => includes(customLabel(option, label), search2)).sort((a, b) => customLabel(a, label).length - customLabel(b, label).length) : options;
-    };
-    const flattenOptions = (values, label) => (options) => options.reduce((prev, curr) => {
-      if (curr[values]?.length) {
-        prev.push({ $groupLabel: curr[label], $isLabel: true });
-        return prev.concat(curr[values]);
-      }
-      return prev;
-    }, []);
-    const stripGroups = (options) => options.filter((option) => !option.$isLabel);
-    const filterGroups = (search2, label, values, groupLabel, customLabel) => (groups) => groups.map((group) => {
-      if (!group[values]) {
-        console.warn(`Options passed to vue-multiselect do not contain groups, despite the config.`);
-        return [];
-      }
-      const groupOptions = filterOptions(group[values], search2, label, customLabel);
-      return groupOptions.length ? { [groupLabel]: group[groupLabel], [values]: groupOptions } : [];
-    });
-    const flow = (...fns) => (x) => fns.reduce((v, f) => f(v), x);
-    const internalValue = computed(() => {
-      const val = props.modelValue;
-      return val || val === 0 ? Array.isArray(val) ? val : [val] : [];
-    });
-    const filteredOptions = computed(() => {
-      const searchVal = search.value || "";
-      const normalizedSearch = searchVal.toLowerCase().trim();
-      let options = props.options.concat();
-      if (props.internalSearch) {
-        options = props.groupValues ? filterAndFlat(options, normalizedSearch, props.label) : filterOptions(options, normalizedSearch, props.label, props.customLabel);
-      } else {
-        options = props.groupValues ? flattenOptions(props.groupValues, props.groupLabel)(options) : options;
-      }
-      options = props.hideSelected ? options.filter((o) => !isSelected(o)) : options;
-      if (props.taggable && normalizedSearch.length && !isExistingOption(normalizedSearch)) {
-        if (props.tagPosition === "bottom") {
-          options.push({ isTag: true, label: searchVal });
-        } else {
-          options.unshift({ isTag: true, label: searchVal });
-        }
-      }
-      return options.slice(0, props.optionsLimit);
-    });
-    const valueKeys = computed(
-      () => props.trackBy ? internalValue.value.map((el) => el[props.trackBy]) : internalValue.value
-    );
-    const optionKeys = computed(() => {
-      const options = props.groupValues ? flatAndStrip(props.options) : props.options;
-      return options.map((el) => props.customLabel(el, props.label).toString().toLowerCase());
-    });
-    const currentOptionLabel = computed(
-      () => props.multiple ? props.searchable ? "" : props.placeholder : internalValue.value.length ? getOptionLabel(internalValue.value[0]) : props.searchable ? "" : props.placeholder
-    );
-    const hasOptionGroup = computed(() => props.groupValues && props.groupLabel && props.groupSelect);
-    const isSingleLabelVisible = computed(
-      () => (singleValue.value || singleValue.value === 0) && (!isOpen.value || !props.searchable) && !visibleValues.value.length
-    );
-    const isPlaceholderVisible = computed(
-      () => !internalValue.value.length && (!props.searchable || !isOpen.value)
-    );
-    const visibleValues = computed(
-      () => props.multiple ? internalValue.value.slice(0, props.limit) : []
-    );
-    const singleValue = computed(() => internalValue.value[0]);
-    const deselectLabelText = computed(() => props.showLabels ? props.deselectLabel : "");
-    const deselectGroupLabelText = computed(() => props.showLabels ? props.deselectGroupLabel : "");
-    const selectLabelText = computed(() => props.showLabels ? props.selectLabel : "");
-    const selectGroupLabelText = computed(() => props.showLabels ? props.selectGroupLabel : "");
-    const selectedLabelText = computed(() => props.showLabels ? props.selectedLabel : "");
-    const inputStyle = computed(() => {
-      if (props.searchable || props.multiple && props.modelValue?.length) {
-        return isOpen.value ? { width: "100%" } : { width: "0", position: "absolute", padding: "0" };
-      }
-      return "";
-    });
-    const contentStyle = computed(
-      () => props.options.length ? { display: "inline-block" } : { display: "block" }
-    );
-    const isAbove = computed(() => {
-      if (["above", "top"].includes(props.openDirection)) return true;
-      if (["below", "bottom"].includes(props.openDirection)) return false;
-      return preferredOpenDirection.value === "above";
-    });
-    const pointerPosition = computed(() => pointer.value * props.optionHeight);
-    const visibleElements = computed(() => optimizedHeight.value / props.optionHeight);
-    const filterAndFlat = (options, search2, label) => flow(
-      filterGroups(search2, label, props.groupValues, props.groupLabel, props.customLabel),
-      flattenOptions(props.groupValues, props.groupLabel)
-    )(options);
-    const flatAndStrip = (options) => flow(
-      flattenOptions(props.groupValues, props.groupLabel),
-      stripGroups
-    )(options);
-    const updateSearch = (query) => {
-      search.value = query;
-    };
-    const isExistingOption = (query) => props.options ? optionKeys.value.indexOf(query) > -1 : false;
-    const isSelected = (option) => {
-      const opt = props.trackBy ? option[props.trackBy] : option;
-      return valueKeys.value.indexOf(opt) > -1;
-    };
-    const isOptionDisabled = (option) => !!option?.$isDisabled;
-    const getOptionLabel = (option) => {
-      if (isEmpty(option)) return "";
-      if (option.isTag) return option.label;
-      if (option.$isLabel) return option.$groupLabel;
-      const label = props.customLabel(option, props.label);
-      return isEmpty(label) ? "" : label;
-    };
-    const select = (option, key) => {
-      if (option.$isLabel && props.groupSelect) {
-        selectGroup(option);
-        return;
-      }
-      if (props.blockKeys.indexOf(key) !== -1 || props.disabled || option.$isDisabled || option.$isLabel) return;
-      if (props.max && props.multiple && internalValue.value.length === props.max) return;
-      if (key === "Tab" && !pointerDirty.value) return;
-      if (option.isTag) {
-        emit("tag", option.label, props.id);
-        search.value = "";
-        if (props.closeOnSelect && !props.multiple) deactivate();
-      } else {
-        if (isSelected(option)) {
-          if (key !== "Tab") removeElement(option);
-          return;
-        }
-        emit("update:modelValue", props.multiple ? internalValue.value.concat([option]) : option);
-        emit("select", option, props.id);
-        if (props.clearOnSelect) search.value = "";
-      }
-      if (props.closeOnSelect) deactivate();
-    };
-    const selectGroup = (selectedGroup) => {
-      const group = props.options.find(
-        (option) => option[props.groupLabel] === selectedGroup.$groupLabel
-      );
-      if (!group) return;
-      if (wholeGroupSelected(group)) {
-        emit("remove", group[props.groupValues], props.id);
-        const newValue = internalValue.value.filter(
-          (option) => group[props.groupValues].indexOf(option) === -1
-        );
-        emit("update:modelValue", newValue);
-      } else {
-        let optionsToAdd = group[props.groupValues].filter(
-          (option) => !(isOptionDisabled(option) || isSelected(option))
-        );
-        if (props.max) optionsToAdd.splice(props.max - internalValue.value.length);
-        emit("select", optionsToAdd, props.id);
-        emit("update:modelValue", internalValue.value.concat(optionsToAdd));
-      }
-      if (props.closeOnSelect) deactivate();
-    };
-    const wholeGroupSelected = (group) => group[props.groupValues].every((option) => isSelected(option) || isOptionDisabled(option));
-    const wholeGroupDisabled = (group) => group[props.groupValues].every(isOptionDisabled);
-    const removeElement = (option, shouldClose = true) => {
-      if (props.disabled || option?.$isDisabled) return;
-      if (!props.allowEmpty && internalValue.value.length <= 1) {
-        deactivate();
-        return;
-      }
-      const index = typeof option === "object" ? valueKeys.value.indexOf(option[props.trackBy]) : valueKeys.value.indexOf(option);
-      const newValue = props.multiple ? internalValue.value.slice(0, index).concat(internalValue.value.slice(index + 1)) : null;
-      emit("update:modelValue", newValue);
-      emit("remove", option, props.id);
-      if (props.closeOnSelect && shouldClose) deactivate();
-    };
-    const removeLastElement = () => {
-      if (props.blockKeys.indexOf("Delete") !== -1) return;
-      if (search.value.length === 0 && Array.isArray(internalValue.value) && internalValue.value.length) {
-        removeElement(internalValue.value[internalValue.value.length - 1], false);
-      }
-    };
-    const activate = () => {
-      if (isOpen.value || props.disabled) return;
-      adjustPosition();
-      if (props.groupValues && pointer.value === 0 && filteredOptions.value.length) {
-        pointer.value = 1;
-      }
-      isOpen.value = true;
-      if (props.searchable) {
-        if (!props.preserveSearch) search.value = "";
-        if (!props.preventAutofocus) nextTick(() => searchInput.value?.focus());
-      } else if (!props.preventAutofocus) {
-        multiselect.value?.focus();
-      }
-      emit("open", props.id);
-    };
-    const deactivate = () => {
-      if (!isOpen.value) return;
-      isOpen.value = false;
-      if (props.searchable) {
-        searchInput.value?.blur();
-      } else {
-        multiselect.value?.blur();
-      }
-      if (!props.preserveSearch) search.value = "";
-      emit("close", getValue(), props.id);
-    };
-    const toggle = () => {
-      isOpen.value ? deactivate() : activate();
-    };
-    const adjustPosition = () => {
-      if (typeof window === "undefined") return;
-      const spaceAbove = multiselect.value.getBoundingClientRect().top;
-      const spaceBelow = window.innerHeight - multiselect.value.getBoundingClientRect().bottom;
-      const hasEnoughSpaceBelow = spaceBelow > props.maxHeight;
-      if (hasEnoughSpaceBelow || spaceBelow > spaceAbove || ["below", "bottom"].includes(props.openDirection)) {
-        preferredOpenDirection.value = "below";
-        optimizedHeight.value = Math.min(spaceBelow - 40, props.maxHeight);
-      } else {
-        preferredOpenDirection.value = "above";
-        optimizedHeight.value = Math.min(spaceAbove - 40, props.maxHeight);
-      }
-    };
-    const getValue = () => props.multiple ? internalValue.value : internalValue.value.length === 0 ? null : internalValue.value[0];
-    const optionHighlight = (index, option) => ({
-      "multiselect__option--highlight": index === pointer.value && props.showPointer,
-      "multiselect__option--selected": isSelected(option)
-    });
-    const groupHighlight = (index, selectedGroup) => {
-      if (!props.groupSelect) {
-        return ["multiselect__option--disabled", { "multiselect__option--group": selectedGroup.$isLabel }];
-      }
-      const group = props.options.find(
-        (option) => option[props.groupLabel] === selectedGroup.$groupLabel
-      );
-      return group && !wholeGroupDisabled(group) ? [
-        "multiselect__option--group",
-        { "multiselect__option--highlight": index === pointer.value && props.showPointer },
-        { "multiselect__option--group-selected": wholeGroupSelected(group) }
-      ] : "multiselect__option--disabled";
-    };
-    const addPointerElement = ({ key } = "Enter") => {
-      if (filteredOptions.value.length > 0) {
-        select(filteredOptions.value[pointer.value], key);
-      }
-      pointerReset();
-    };
-    const pointerForward = () => {
-      if (pointer.value < filteredOptions.value.length - 1) {
-        pointer.value++;
-        if (list.value.scrollTop <= pointerPosition.value - (visibleElements.value - 1) * props.optionHeight) {
-          list.value.scrollTop = pointerPosition.value - (visibleElements.value - 1) * props.optionHeight;
-        }
-        if (filteredOptions.value[pointer.value]?.$isLabel && !props.groupSelect) pointerForward();
-      }
-      pointerDirty.value = true;
-    };
-    const pointerBackward = () => {
-      if (pointer.value > 0) {
-        pointer.value--;
-        if (list.value.scrollTop >= pointerPosition.value) {
-          list.value.scrollTop = pointerPosition.value;
-        }
-        if (filteredOptions.value[pointer.value]?.$isLabel && !props.groupSelect) pointerBackward();
-      } else {
-        if (filteredOptions.value[pointer.value]?.$isLabel && !props.groupSelect) pointerForward();
-      }
-      pointerDirty.value = true;
-    };
-    const pointerReset = () => {
-      if (!props.closeOnSelect) return;
-      pointer.value = 0;
-      if (list.value) list.value.scrollTop = 0;
-    };
-    const pointerAdjust = () => {
-      if (pointer.value >= filteredOptions.value.length - 1) {
-        pointer.value = filteredOptions.value.length ? filteredOptions.value.length - 1 : 0;
-      }
-      if (filteredOptions.value.length > 0 && filteredOptions.value[pointer.value]?.$isLabel && !props.groupSelect) {
-        pointerForward();
-      }
-    };
-    const pointerSet = (index) => {
-      pointer.value = index;
-      pointerDirty.value = true;
-    };
-    watch(() => internalValue.value, () => {
-      if (props.resetAfter && internalValue.value.length) {
-        search.value = "";
-        emit("update:modelValue", props.multiple ? [] : null);
-      }
-    }, { deep: true });
-    watch(search, () => emit("search-change", search.value));
-    watch(filteredOptions, () => pointerAdjust());
-    watch(isOpen, () => pointerDirty.value = false);
-    watch(pointer, () => {
-      searchInput.value?.setAttribute("aria-activedescendant", `${props.id}-${pointer.value}`);
-    });
-    onMounted(() => {
-      if (!props.multiple && props.max) {
-        console.warn("[Vue-Multiselect warn]: Max prop should not be used when prop Multiple equals false.");
-      }
-      if (props.preselectFirst && !internalValue.value.length && props.options.length) {
-        select(filteredOptions.value[0]);
-      }
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        ref_key: "multiselect",
-        ref: multiselect,
-        tabindex: __props.searchable ? -1 : __props.tabindex,
-        class: normalizeClass([{
-          "multiselect--active": isOpen.value,
-          "multiselect--disabled": __props.disabled,
-          "multiselect--above": isAbove.value,
-          "multiselect--has-options-group": hasOptionGroup.value
-        }, "multiselect flex flex-v-center"]),
-        onFocus: activate,
-        onBlur: _cache[2] || (_cache[2] = ($event) => __props.searchable ? false : deactivate),
-        onKeydown: [
-          withKeys(withModifiers(pointerForward, ["self", "prevent"]), ["down"]),
-          withKeys(withModifiers(pointerBackward, ["self", "prevent"]), ["up"])
-        ],
-        onKeypress: withKeys(withModifiers(addPointerElement, ["stop", "self"]), ["enter", "tab"]),
-        onKeyup: withKeys(deactivate, ["esc"]),
-        role: "combobox",
-        "aria-owns": `listbox-${__props.id}`
-      }, [
-        renderSlot(_ctx.$slots, "caret", { toggle }, () => [
-          createElementVNode("div", {
-            onMousedown: withModifiers(toggle, ["prevent", "stop"]),
-            class: "multiselect__select"
-          }, null, 32)
-        ]),
-        renderSlot(_ctx.$slots, "clear", { search: search.value }),
-        createElementVNode("div", {
-          ref_key: "tags",
-          ref: tags,
-          class: "multiselect__tags"
-        }, [
-          renderSlot(_ctx.$slots, "selection", {
-            search: search.value,
-            remove: removeElement,
-            values: visibleValues.value,
-            isOpen: isOpen.value
-          }, () => [
-            withDirectives(createElementVNode("div", _hoisted_2, [
-              (openBlock(true), createElementBlock(Fragment, null, renderList(visibleValues.value, (option, index) => {
-                return renderSlot(_ctx.$slots, "tag", {
-                  key: index,
-                  option,
-                  search: search.value,
-                  remove: removeElement
-                }, () => [
-                  createElementVNode("span", _hoisted_3, [
-                    createElementVNode("span", {
-                      textContent: toDisplayString(getOptionLabel(option))
-                    }, null, 8, _hoisted_4),
-                    createElementVNode("i", {
-                      tabindex: "1",
-                      onKeypress: withKeys(withModifiers(($event) => removeElement(option), ["prevent"]), ["enter"]),
-                      onMousedown: withModifiers(($event) => removeElement(option), ["prevent"]),
-                      class: "multiselect__tag-icon"
-                    }, null, 40, _hoisted_5)
-                  ])
-                ]);
-              }), 128))
-            ], 512), [
-              [vShow, visibleValues.value.length > 0]
-            ]),
-            internalValue.value?.length > __props.limit ? renderSlot(_ctx.$slots, "limit", { key: 0 }, () => [
-              createElementVNode("strong", {
-                class: "multiselect__strong",
-                textContent: toDisplayString(__props.limitText(internalValue.value.length - __props.limit))
-              }, null, 8, _hoisted_6)
-            ]) : createCommentVNode("", true)
-          ]),
-          createVNode(Transition, { name: "multiselect__loading" }, {
-            default: withCtx(() => [
-              renderSlot(_ctx.$slots, "loading", {}, () => [
-                withDirectives(createElementVNode("div", _hoisted_7, null, 512), [
-                  [vShow, __props.loading]
-                ])
-              ])
-            ]),
-            _: 3
-          }),
-          __props.searchable ? (openBlock(), createElementBlock("input", {
-            key: 0,
-            ref_key: "searchInput",
-            ref: searchInput,
-            name: __props.name,
-            id: __props.id,
-            type: "text",
-            autocomplete: "off",
-            spellcheck: "false",
-            placeholder: __props.placeholder,
-            style: normalizeStyle(inputStyle.value),
-            value: search.value,
-            disabled: __props.disabled,
-            tabindex: __props.tabindex,
-            onInput: _cache[0] || (_cache[0] = ($event) => updateSearch($event.target.value)),
-            onFocus: withModifiers(activate, ["prevent"]),
-            onBlur: withModifiers(deactivate, ["prevent"]),
-            onKeyup: withKeys(deactivate, ["esc"]),
-            onKeydown: [
-              withKeys(withModifiers(pointerForward, ["prevent"]), ["down"]),
-              withKeys(withModifiers(pointerBackward, ["prevent"]), ["up"]),
-              withKeys(withModifiers(removeLastElement, ["stop"]), ["delete"])
-            ],
-            onKeypress: withKeys(withModifiers(addPointerElement, ["prevent", "stop", "self"]), ["enter"]),
-            class: "multiselect__input",
-            "aria-controls": `listbox-${__props.id}`
-          }, null, 44, _hoisted_8)) : createCommentVNode("", true),
-          isSingleLabelVisible.value ? (openBlock(), createElementBlock("span", {
-            key: 1,
-            class: "multiselect__single",
-            onMousedown: withModifiers(toggle, ["prevent"])
-          }, [
-            renderSlot(_ctx.$slots, "singleLabel", { option: singleValue.value }, () => [
-              createTextVNode(toDisplayString(currentOptionLabel.value), 1)
-            ])
-          ], 32)) : createCommentVNode("", true),
-          isPlaceholderVisible.value ? (openBlock(), createElementBlock("span", {
-            key: 2,
-            class: "multiselect__placeholder",
-            onMousedown: withModifiers(toggle, ["prevent"])
-          }, [
-            renderSlot(_ctx.$slots, "placeholder", {}, () => [
-              createTextVNode(toDisplayString(__props.placeholder), 1)
-            ])
-          ], 32)) : createCommentVNode("", true)
-        ], 512),
-        createVNode(Transition, { name: "multiselect" }, {
-          default: withCtx(() => [
-            withDirectives(createElementVNode("div", {
-              class: "multiselect__content-wrapper",
-              onFocus: activate,
-              tabindex: "-1",
-              onMousedown: _cache[1] || (_cache[1] = withModifiers(() => {
-              }, ["prevent"])),
-              style: normalizeStyle({ maxHeight: `${optimizedHeight.value}px` }),
-              ref_key: "list",
-              ref: list
-            }, [
-              createElementVNode("ul", {
-                class: "multiselect__content",
-                style: normalizeStyle(contentStyle.value),
-                role: "listbox",
-                id: `listbox-${__props.id}`
-              }, [
-                renderSlot(_ctx.$slots, "beforeList"),
-                __props.multiple && __props.max === internalValue.value.length ? (openBlock(), createElementBlock("li", _hoisted_10, [
-                  createElementVNode("span", _hoisted_11, [
-                    renderSlot(_ctx.$slots, "maxElements", {}, () => [
-                      createTextVNode(" Maximum of " + toDisplayString(__props.max) + " options selected. First remove a selected option to select another. ", 1)
-                    ])
-                  ])
-                ])) : createCommentVNode("", true),
-                !__props.max || internalValue.value.length < __props.max ? (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(filteredOptions.value, (option, index) => {
-                  return openBlock(), createElementBlock("li", {
-                    class: "multiselect__element",
-                    key: index,
-                    id: `${__props.id}-${index}`,
-                    role: !(option?.$isLabel || option?.$isDisabled) ? "option" : null
-                  }, [
-                    !(option?.$isLabel || option?.$isDisabled) ? (openBlock(), createElementBlock("span", {
-                      key: 0,
-                      class: normalizeClass([optionHighlight(index, option), "multiselect__option"]),
-                      onClick: withModifiers(($event) => select(option), ["stop"]),
-                      onMouseenter: withModifiers(($event) => pointerSet(index), ["self"]),
-                      "data-select": option?.isTag ? __props.tagPlaceholder : selectLabelText.value,
-                      "data-selected": selectedLabelText.value,
-                      "data-deselect": deselectLabelText.value
-                    }, [
-                      renderSlot(_ctx.$slots, "option", {
-                        option,
-                        search: search.value,
-                        index
-                      }, () => [
-                        createElementVNode("span", null, toDisplayString(getOptionLabel(option)), 1)
-                      ])
-                    ], 42, _hoisted_13)) : createCommentVNode("", true),
-                    option?.$isLabel || option?.$isDisabled ? (openBlock(), createElementBlock("span", {
-                      key: 1,
-                      "data-select": __props.groupSelect && selectGroupLabelText.value,
-                      "data-deselect": __props.groupSelect && deselectGroupLabelText.value,
-                      class: normalizeClass([groupHighlight(index, option), "multiselect__option"]),
-                      onMouseenter: withModifiers(($event) => __props.groupSelect && pointerSet(index), ["self"]),
-                      onMousedown: withModifiers(($event) => selectGroup(option), ["prevent"])
-                    }, [
-                      renderSlot(_ctx.$slots, "option", {
-                        option,
-                        search: search.value,
-                        index
-                      }, () => [
-                        createElementVNode("span", null, toDisplayString(getOptionLabel(option)), 1)
-                      ])
-                    ], 42, _hoisted_14)) : createCommentVNode("", true)
-                  ], 8, _hoisted_12);
-                }), 128)) : createCommentVNode("", true),
-                withDirectives(createElementVNode("li", null, [
-                  createElementVNode("span", _hoisted_15, [
-                    renderSlot(_ctx.$slots, "noResult", { search: search.value }, () => [
-                      _cache[3] || (_cache[3] = createTextVNode(" No elements found. Consider changing the search query. "))
-                    ])
-                  ])
-                ], 512), [
-                  [vShow, __props.showNoResults && filteredOptions.value.length === 0 && search.value && !__props.loading]
-                ]),
-                withDirectives(createElementVNode("li", null, [
-                  createElementVNode("span", _hoisted_16, [
-                    renderSlot(_ctx.$slots, "noOptions", {}, () => [
-                      _cache[4] || (_cache[4] = createTextVNode("List is empty."))
-                    ])
-                  ])
-                ], 512), [
-                  [vShow, __props.showNoOptions && (__props.options.length === 0 || hasOptionGroup.value && filteredOptions.value.length === 0) && !search.value && !__props.loading]
-                ]),
-                renderSlot(_ctx.$slots, "afterList")
-              ], 12, _hoisted_9)
-            ], 36), [
-              [vShow, isOpen.value]
-            ])
-          ]),
-          _: 3
-        })
-      ], 42, _hoisted_1);
-    };
-  }
-};
-export {
-  _sfc_main as default
-};
-//# sourceMappingURL=SelectMulti.vue.js.map