@ozdao/martyrs 0.2.488 → 0.2.489

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

@@ -0,0 +1,639 @@
+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) => {
+      var _a;
+      if ((_a = curr[values]) == null ? void 0 : _a.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(() => {
+      var _a;
+      if (props.searchable || props.multiple && ((_a = props.modelValue) == null ? void 0 : _a.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 == null ? void 0 : 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 == null ? void 0 : 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 = () => {
+      var _a;
+      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(() => {
+          var _a2;
+          return (_a2 = searchInput.value) == null ? void 0 : _a2.focus();
+        });
+      } else if (!props.preventAutofocus) {
+        (_a = multiselect.value) == null ? void 0 : _a.focus();
+      }
+      emit("open", props.id);
+    };
+    const deactivate = () => {
+      var _a, _b;
+      if (!isOpen.value) return;
+      isOpen.value = false;
+      if (props.searchable) {
+        (_a = searchInput.value) == null ? void 0 : _a.blur();
+      } else {
+        (_b = multiselect.value) == null ? void 0 : _b.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 = () => {
+      var _a;
+      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 (((_a = filteredOptions.value[pointer.value]) == null ? void 0 : _a.$isLabel) && !props.groupSelect) pointerForward();
+      }
+      pointerDirty.value = true;
+    };
+    const pointerBackward = () => {
+      var _a, _b;
+      if (pointer.value > 0) {
+        pointer.value--;
+        if (list.value.scrollTop >= pointerPosition.value) {
+          list.value.scrollTop = pointerPosition.value;
+        }
+        if (((_a = filteredOptions.value[pointer.value]) == null ? void 0 : _a.$isLabel) && !props.groupSelect) pointerBackward();
+      } else {
+        if (((_b = filteredOptions.value[pointer.value]) == null ? void 0 : _b.$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 = () => {
+      var _a;
+      if (pointer.value >= filteredOptions.value.length - 1) {
+        pointer.value = filteredOptions.value.length ? filteredOptions.value.length - 1 : 0;
+      }
+      if (filteredOptions.value.length > 0 && ((_a = filteredOptions.value[pointer.value]) == null ? void 0 : _a.$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, () => {
+      var _a;
+      (_a = searchInput.value) == null ? void 0 : _a.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
+          }, () => {
+            var _a;
+            return [
+              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]
+              ]),
+              ((_a = internalValue.value) == null ? void 0 : _a.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 == null ? void 0 : option.$isLabel) || (option == null ? void 0 : option.$isDisabled)) ? "option" : null
+                  }, [
+                    !((option == null ? void 0 : option.$isLabel) || (option == null ? void 0 : 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 == null ? void 0 : 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 == null ? void 0 : option.$isLabel) || (option == null ? void 0 : 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.vue2.js.map