energy-components 1.6.0-beta.1 → 1.7.0

package/dist/components/multiselect.es.js

@@ -1,38 +1,39 @@
-import { openBlock as d, createElementBlock as p, normalizeClass as v, withKeys as f, withModifiers as r, renderSlot as u, createElementVNode as o, withDirectives as b, Fragment as L, renderList as $, toDisplayString as m, vShow as y, createCommentVNode as c, createVNode as B, Transition as k, withCtx as D, normalizeStyle as S, createTextVNode as V } from "vue";
-import { _ as A } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-import './style/multiselect.css';function O(e) {
+import k from "./multiselectcontentwrapper.es.js";
+import { resolveComponent as E, openBlock as c, createElementBlock as g, normalizeClass as P, withKeys as a, withModifiers as o, renderSlot as u, createElementVNode as p, withDirectives as S, Fragment as A, renderList as v, toDisplayString as O, vShow as L, createCommentVNode as m, createVNode as b, Transition as T, withCtx as y, normalizeStyle as N, createTextVNode as C, createSlots as B, normalizeProps as $, guardReactiveProps as G, createBlock as F, Teleport as x } from "vue";
+import { _ as K } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+import './style/multiselect.css';function w(e) {
   return e === 0 ? !1 : Array.isArray(e) && e.length === 0 ? !0 : !e;
 }
 function M(e) {
   return (...t) => !e(...t);
 }
-function P(e, t) {
+function R(e, t) {
   return e === void 0 && (e = "undefined"), e === null && (e = "null"), e === !1 && (e = "false"), e.toString().toLowerCase().indexOf(t.trim()) !== -1;
 }
-function T(e, t, i, l) {
-  return t ? e.filter((a) => P(l(a, i), t)).sort((a, n) => l(a, i).length - l(n, i).length) : e;
+function H(e, t, i, n) {
+  return t ? e.filter((r) => R(n(r, i), t)).sort((r, l) => n(r, i).length - n(l, i).length) : e;
 }
-function H(e) {
+function z(e) {
   return e.filter((t) => !t.$isLabel);
 }
-function w(e, t) {
-  return (i) => i.reduce((l, a) => a[e] && a[e].length ? (l.push({
-    $groupLabel: a[t],
+function V(e, t) {
+  return (i) => i.reduce((n, r) => r[e] && r[e].length ? (n.push({
+    $groupLabel: r[t],
     $isLabel: !0
-  }), l.concat(a[e])) : l, []);
+  }), n.concat(r[e])) : n, []);
 }
-function G(e, t, i, l, a) {
-  return (n) => n.map((s) => {
-    if (!s[i])
+function j(e, t, i, n, r) {
+  return (l) => l.map((d) => {
+    if (!d[i])
       return console.warn("Options passed to vue-multiselect do not contain groups, despite the config."), [];
-    const h = T(s[i], e, t, a);
-    return h.length ? {
-      [l]: s[l],
-      [i]: h
+    const s = H(d[i], e, t, r);
+    return s.length ? {
+      [n]: d[n],
+      [i]: s
     } : [];
   });
 }
-const E = (...e) => (t) => e.reduce((i, l) => l(i), t), C = {
+const D = (...e) => (t) => e.reduce((i, n) => n(i), t), q = {
   data() {
     return {
       search: "",
@@ -158,7 +159,7 @@ const E = (...e) => (t) => e.reduce((i, l) => l(i), t), C = {
     customLabel: {
       type: Function,
       default(e, t) {
-        return O(e) ? "" : t ? e[t] : e;
+        return w(e) ? "" : t ? e[t] : e;
       }
     },
     /**
@@ -296,7 +297,7 @@ const E = (...e) => (t) => e.reduce((i, l) => l(i), t), C = {
     filteredOptions() {
       const e = this.search || "", t = e.toLowerCase().trim();
       let i = this.options.concat();
-      return this.internalSearch ? i = this.groupValues ? this.filterAndFlat(i, t, this.label) : T(i, t, this.label, this.customLabel) : i = this.groupValues ? w(this.groupValues, this.groupLabel)(i) : i, i = this.hideSelected ? i.filter(M(this.isSelected)) : i, this.taggable && t.length && !this.isExistingOption(t) && (this.tagPosition === "bottom" ? i.push({ isTag: !0, label: e }) : i.unshift({ isTag: !0, label: e })), i.slice(0, this.optionsLimit);
+      return this.internalSearch ? i = this.groupValues ? this.filterAndFlat(i, t, this.label) : H(i, t, this.label, this.customLabel) : i = this.groupValues ? V(this.groupValues, this.groupLabel)(i) : i, i = this.hideSelected ? i.filter(M(this.isSelected)) : i, this.taggable && t.length && !this.isExistingOption(t) && (this.tagPosition === "bottom" ? i.push({ isTag: !0, label: e }) : i.unshift({ isTag: !0, label: e })), i.slice(0, this.optionsLimit);
     },
     valueKeys() {
       return this.trackBy ? this.internalValue.map((e) => e[this.trackBy]) : this.internalValue;
@@ -334,9 +335,9 @@ const E = (...e) => (t) => e.reduce((i, l) => l(i), t), C = {
      * @return {Array} returns a filtered and flat options list
      */
     filterAndFlat(e, t, i) {
-      return E(
-        G(t, i, this.groupValues, this.groupLabel, this.customLabel),
-        w(this.groupValues, this.groupLabel)
+      return D(
+        j(t, i, this.groupValues, this.groupLabel, this.customLabel),
+        V(this.groupValues, this.groupLabel)
       )(e);
     },
     /**
@@ -345,9 +346,9 @@ const E = (...e) => (t) => e.reduce((i, l) => l(i), t), C = {
      * @return {Array} returns a flat options list without group labels
      */
     flatAndStrip(e) {
-      return E(
-        w(this.groupValues, this.groupLabel),
-        H
+      return D(
+        V(this.groupValues, this.groupLabel),
+        z
       )(e);
     },
     /**
@@ -393,11 +394,11 @@ const E = (...e) => (t) => e.reduce((i, l) => l(i), t), C = {
      * @returns {Object||String}
      */
     getOptionLabel(e) {
-      if (O(e)) return "";
+      if (w(e)) return "";
       if (e.isTag) return e.label;
       if (e.$isLabel) return e.$groupLabel;
       const t = this.customLabel(e, this.label);
-      return O(t) ? "" : t;
+      return w(t) ? "" : t;
     },
     /**
      * Add the given option to the list of selected options
@@ -436,13 +437,13 @@ const E = (...e) => (t) => e.reduce((i, l) => l(i), t), C = {
       if (t) {
         if (this.wholeGroupSelected(t)) {
           this.$emit("remove", t[this.groupValues], this.id);
-          const i = this.trackBy ? t[this.groupValues].map((a) => a[this.trackBy]) : t[this.groupValues], l = this.internalValue.filter(
-            (a) => i.indexOf(this.trackBy ? a[this.trackBy] : a) === -1
+          const i = this.trackBy ? t[this.groupValues].map((r) => r[this.trackBy]) : t[this.groupValues], n = this.internalValue.filter(
+            (r) => i.indexOf(this.trackBy ? r[this.trackBy] : r) === -1
           );
-          this.$emit("update:modelValue", l);
+          this.$emit("update:modelValue", n);
         } else {
           let i = t[this.groupValues].filter(
-            (l) => !(this.isOptionDisabled(l) || this.isSelected(l))
+            (n) => !(this.isOptionDisabled(n) || this.isSelected(n))
           );
           this.max && i.splice(this.max - this.internalValue.length), this.$emit("select", i, this.id), this.$emit(
             "update:modelValue",
@@ -486,8 +487,8 @@ const E = (...e) => (t) => e.reduce((i, l) => l(i), t), C = {
       }
       const i = typeof e == "object" ? this.valueKeys.indexOf(e[this.trackBy]) : this.valueKeys.indexOf(e);
       if (this.multiple) {
-        const l = this.internalValue.slice(0, i).concat(this.internalValue.slice(i + 1));
-        this.$emit("update:modelValue", l);
+        const n = this.internalValue.slice(0, i).concat(this.internalValue.slice(i + 1));
+        this.$emit("update:modelValue", n);
       } else
         this.$emit("update:modelValue", null);
       this.$emit("remove", e, this.id), this.closeOnSelect && t && this.deactivate();
@@ -535,7 +536,7 @@ const E = (...e) => (t) => e.reduce((i, l) => l(i), t), C = {
       t > this.maxHeight || t > e || this.openDirection === "below" || this.openDirection === "bottom" ? (this.preferredOpenDirection = "below", this.optimizedHeight = Math.min(t - 40, this.maxHeight)) : (this.preferredOpenDirection = "above", this.optimizedHeight = Math.min(e - 40, this.maxHeight));
     }
   }
-}, K = {
+}, W = {
   data() {
     return {
       pointer: 0,
@@ -589,7 +590,7 @@ const E = (...e) => (t) => e.reduce((i, l) => l(i), t), C = {
           "multiselect__option--disabled",
           { "multiselect__option--group": t.$isLabel }
         ];
-      const i = this.options.find((l) => l[this.groupLabel] === t.$groupLabel);
+      const i = this.options.find((n) => n[this.groupLabel] === t.$groupLabel);
       return i && !this.wholeGroupDisabled(i) ? [
         "multiselect__option--group",
         { "multiselect__option--highlight": e === this.pointer && this.showPointer },
@@ -606,7 +607,11 @@ const E = (...e) => (t) => e.reduce((i, l) => l(i), t), C = {
       this.pointer > 0 ? (this.pointer--, this.$refs.list.scrollTop >= this.pointerPosition && (this.$refs.list.scrollTop = this.pointerPosition), this.filteredOptions[this.pointer] && this.filteredOptions[this.pointer].$isLabel && !this.groupSelect && this.pointerBackward()) : this.filteredOptions[this.pointer] && this.filteredOptions[0].$isLabel && !this.groupSelect && this.pointerForward(), this.pointerDirty = !0;
     },
     pointerReset() {
-      this.closeOnSelect && (this.pointer = 0, this.$refs.list && (this.$refs.list.scrollTop = 0));
+      var e;
+      if (this.closeOnSelect && (this.pointer = 0, this.$refs.list)) {
+        const t = ((e = this.$refs.list.$refs) == null ? void 0 : e.wrapper) || this.$refs.list;
+        t.scrollTop && (t.scrollTop = 0);
+      }
     },
     pointerAdjust() {
       this.pointer >= this.filteredOptions.length - 1 && (this.pointer = this.filteredOptions.length ? this.filteredOptions.length - 1 : 0), this.filteredOptions.length > 0 && this.filteredOptions[this.pointer].$isLabel && !this.groupSelect && this.pointerForward();
@@ -615,13 +620,30 @@ const E = (...e) => (t) => e.reduce((i, l) => l(i), t), C = {
       this.pointer = e, this.pointerDirty = !0;
     }
   }
-}, F = {
+}, I = {
   name: "vue-multiselect",
-  mixins: [C, K],
+  components: {
+    MultiselectContentWrapper: k
+  },
+  mixins: [q, W],
   compatConfig: {
     MODE: 3,
     ATTR_ENUMERATED_COERCION: !1
   },
+  inject: {
+    isFocusWithinDropdown: {
+      default: null
+    }
+  },
+  methods: {
+    onBlur(e) {
+      if (this.isFocusWithinDropdown && e.relatedTarget && this.isFocusWithinDropdown(e.relatedTarget)) {
+        e.preventDefault();
+        return;
+      }
+      this.deactivate();
+    }
+  },
   props: {
     /**
        * name attribute to match optional label element
@@ -632,6 +654,10 @@ const E = (...e) => (t) => e.reduce((i, l) => l(i), t), C = {
       type: String,
       default: ""
     },
+    appendToBody: {
+      type: Boolean,
+      default: !1
+    },
     /**
        * Presets the selected options value.
        * @type Object || Array || String || Integer
@@ -826,88 +852,108 @@ const E = (...e) => (t) => e.reduce((i, l) => l(i), t), C = {
     contentStyle() {
       return this.options.length ? { display: "inline-block" } : { display: "block" };
     },
+    dropdownStyle() {
+      return {
+        ...this.contentStyle,
+        maxHeight: `${this.maxHeight}px`,
+        overflow: "auto"
+      };
+    },
     isAbove() {
       return this.openDirection === "above" || this.openDirection === "top" ? !0 : this.openDirection === "below" || this.openDirection === "bottom" ? !1 : this.preferredOpenDirection === "above";
     },
     showSearchInput() {
       return this.searchable && (this.hasSingleSelectedSlot && (this.visibleSingleValue || this.visibleSingleValue === 0) ? this.isOpen : !0);
+    },
+    teleportedContentStyle() {
+      if (!this.$el) return {};
+      const e = this.$el.getBoundingClientRect(), t = {
+        position: "fixed",
+        width: `${e.width}px`,
+        zIndex: 9999,
+        maxHeight: `${this.maxHeight}px`,
+        overflow: "auto",
+        "-webkit-overflow-scrolling": "touch"
+      };
+      return this.isAbove ? (t.bottom = `${window.innerHeight - e.top}px`, t.left = `${e.left}px`) : (t.top = `${e.bottom}px`, t.left = `${e.left}px`), t;
     }
   }
-}, N = ["tabindex", "aria-owns"], R = {
+}, U = ["tabindex", "aria-owns"], J = {
   ref: "tags",
   class: "multiselect__tags"
-}, z = { class: "multiselect__tags-wrap" }, q = ["textContent"], j = ["onKeypress", "onMousedown"], I = ["textContent"], U = { class: "multiselect__spinner" }, J = ["name", "id", "spellcheck", "placeholder", "required", "value", "disabled", "tabindex", "aria-controls"], Q = ["id", "aria-multiselectable"], W = { key: 0 }, X = { class: "multiselect__option" }, Y = ["aria-selected", "id", "role"], Z = ["onClick", "onMouseenter", "data-select", "data-selected", "data-deselect"], x = ["data-select", "data-deselect", "onMouseenter", "onMousedown"], _ = { class: "multiselect__option" }, ee = { class: "multiselect__option" };
-function te(e, t, i, l, a, n) {
-  return d(), p("div", {
+}, Q = { class: "multiselect__tags-wrap" }, X = ["textContent"], Y = ["onKeypress", "onMousedown"], Z = ["textContent"], _ = { class: "multiselect__spinner" }, ee = ["name", "id", "spellcheck", "placeholder", "required", "value", "disabled", "tabindex", "aria-controls"];
+function te(e, t, i, n, r, l) {
+  const d = E("MultiselectContentWrapper");
+  return c(), g("div", {
     tabindex: e.searchable ? -1 : i.tabindex,
-    class: v([{ "multiselect--active": e.isOpen, "multiselect--disabled": i.disabled, "multiselect--above": n.isAbove, "multiselect--has-options-group": n.hasOptionGroup }, "multiselect"]),
-    onFocus: t[13] || (t[13] = (s) => e.activate()),
-    onBlur: t[14] || (t[14] = (s) => e.searchable ? !1 : e.deactivate()),
+    class: P([{ "multiselect--active": e.isOpen, "multiselect--disabled": i.disabled, "multiselect--above": l.isAbove, "multiselect--has-options-group": l.hasOptionGroup }, "multiselect"]),
+    onFocus: t[12] || (t[12] = (s) => e.activate()),
+    onBlur: t[13] || (t[13] = (...s) => l.onBlur && l.onBlur(...s)),
     onKeydown: [
-      t[15] || (t[15] = f(r((s) => e.pointerForward(), ["self", "prevent"]), ["down"])),
-      t[16] || (t[16] = f(r((s) => e.pointerBackward(), ["self", "prevent"]), ["up"]))
+      t[14] || (t[14] = a(o((s) => e.pointerForward(), ["self", "prevent"]), ["down"])),
+      t[15] || (t[15] = a(o((s) => e.pointerBackward(), ["self", "prevent"]), ["up"]))
     ],
-    onKeypress: t[17] || (t[17] = f(r((s) => e.addPointerElement(s), ["stop", "self"]), ["enter", "tab"])),
-    onKeyup: t[18] || (t[18] = f((s) => e.deactivate(), ["esc"])),
+    onKeypress: t[16] || (t[16] = a(o((s) => e.addPointerElement(s), ["stop", "self"]), ["enter", "tab"])),
+    onKeyup: t[17] || (t[17] = a((s) => e.deactivate(), ["esc"])),
     role: "combobox",
     "aria-owns": "listbox-" + e.id
   }, [
     u(e.$slots, "caret", { toggle: e.toggle }, () => [
-      o("div", {
-        onMousedown: t[0] || (t[0] = r((s) => e.toggle(), ["prevent", "stop"])),
+      p("div", {
+        onMousedown: t[0] || (t[0] = o((s) => e.toggle(), ["prevent", "stop"])),
         class: "multiselect__select"
       }, null, 32)
     ], !0),
     u(e.$slots, "clear", { search: e.search }, void 0, !0),
-    o("div", R, [
+    p("div", J, [
       u(e.$slots, "selection", {
         search: e.search,
         remove: e.removeElement,
-        values: n.visibleValues,
+        values: l.visibleValues,
         isOpen: e.isOpen
       }, () => [
-        b(o("div", z, [
-          (d(!0), p(L, null, $(n.visibleValues, (s, h) => u(e.$slots, "tag", {
+        S(p("div", Q, [
+          (c(!0), g(A, null, v(l.visibleValues, (s, h) => u(e.$slots, "tag", {
             option: s,
             search: e.search,
             remove: e.removeElement
           }, () => [
-            (d(), p("span", {
+            (c(), g("span", {
               class: "multiselect__tag",
               key: h
             }, [
-              o("span", {
-                textContent: m(e.getOptionLabel(s))
-              }, null, 8, q),
-              o("i", {
+              p("span", {
+                textContent: O(e.getOptionLabel(s))
+              }, null, 8, X),
+              p("i", {
                 tabindex: "1",
-                onKeypress: f(r((g) => e.removeElement(s), ["prevent"]), ["enter"]),
-                onMousedown: r((g) => e.removeElement(s), ["prevent"]),
+                onKeypress: a(o((f) => e.removeElement(s), ["prevent"]), ["enter"]),
+                onMousedown: o((f) => e.removeElement(s), ["prevent"]),
                 class: "multiselect__tag-icon"
-              }, null, 40, j)
+              }, null, 40, Y)
             ]))
           ], !0)), 256))
         ], 512), [
-          [y, n.visibleValues.length > 0]
+          [L, l.visibleValues.length > 0]
         ]),
         e.internalValue && e.internalValue.length > i.limit ? u(e.$slots, "limit", { key: 0 }, () => [
-          o("strong", {
+          p("strong", {
             class: "multiselect__strong",
-            textContent: m(i.limitText(e.internalValue.length - i.limit))
-          }, null, 8, I)
-        ], !0) : c("", !0)
+            textContent: O(i.limitText(e.internalValue.length - i.limit))
+          }, null, 8, Z)
+        ], !0) : m("", !0)
       ], !0),
-      B(k, { name: "multiselect__loading" }, {
-        default: D(() => [
+      b(T, { name: "multiselect__loading" }, {
+        default: y(() => [
           u(e.$slots, "loading", {}, () => [
-            b(o("div", U, null, 512), [
-              [y, i.loading]
+            S(p("div", _, null, 512), [
+              [L, i.loading]
             ])
           ], !0)
         ]),
         _: 3
       }),
-      e.searchable ? (d(), p("input", {
+      e.searchable ? (c(), g("input", {
         key: 0,
         ref: "search",
         name: i.name,
@@ -917,132 +963,132 @@ function te(e, t, i, l, a, n) {
         spellcheck: i.spellcheck,
         placeholder: e.placeholder,
         required: i.required,
-        style: S({
-          ...n.inputStyle
+        style: N({
+          ...l.inputStyle
         }),
         value: e.search,
         disabled: i.disabled,
         tabindex: i.tabindex,
         onInput: t[1] || (t[1] = (s) => e.updateSearch(s.target.value)),
-        onFocus: t[2] || (t[2] = r((s) => e.activate(), ["prevent"])),
-        onBlur: t[3] || (t[3] = r((s) => e.deactivate(), ["prevent"])),
-        onKeyup: t[4] || (t[4] = f((s) => e.deactivate(), ["esc"])),
+        onFocus: t[2] || (t[2] = o((s) => e.activate(), ["prevent"])),
+        onBlur: t[3] || (t[3] = o((s) => e.deactivate(), ["prevent"])),
+        onKeyup: t[4] || (t[4] = a((s) => e.deactivate(), ["esc"])),
         onKeydown: [
-          t[5] || (t[5] = f(r((s) => e.pointerForward(), ["prevent"]), ["down"])),
-          t[6] || (t[6] = f(r((s) => e.pointerBackward(), ["prevent"]), ["up"])),
-          t[8] || (t[8] = f(r((s) => e.removeLastElement(), ["stop"]), ["delete"]))
+          t[5] || (t[5] = a(o((s) => e.pointerForward(), ["prevent"]), ["down"])),
+          t[6] || (t[6] = a(o((s) => e.pointerBackward(), ["prevent"]), ["up"])),
+          t[8] || (t[8] = a(o((s) => e.removeLastElement(), ["stop"]), ["delete"]))
         ],
-        onKeypress: t[7] || (t[7] = f(r((s) => e.addPointerElement(s), ["prevent", "stop", "self"]), ["enter"])),
+        onKeypress: t[7] || (t[7] = a(o((s) => e.addPointerElement(s), ["prevent", "stop", "self"]), ["enter"])),
         class: "multiselect__input",
         "aria-controls": "listbox-" + e.id
-      }, null, 44, J)) : c("", !0),
-      n.isSingleLabelVisible ? (d(), p("span", {
+      }, null, 44, ee)) : m("", !0),
+      l.isSingleLabelVisible ? (c(), g("span", {
         key: 1,
         class: "multiselect__single",
-        onMousedown: t[9] || (t[9] = r((...s) => e.toggle && e.toggle(...s), ["prevent"]))
+        onMousedown: t[9] || (t[9] = o((...s) => e.toggle && e.toggle(...s), ["prevent"]))
       }, [
-        u(e.$slots, "singleLabel", { option: n.singleValue }, () => [
-          V(m(e.currentOptionLabel), 1)
+        u(e.$slots, "singleLabel", { option: l.singleValue }, () => [
+          C(O(e.currentOptionLabel), 1)
         ], !0)
-      ], 32)) : c("", !0),
-      c("", !0)
+      ], 32)) : m("", !0),
+      m("", !0)
     ], 512),
-    B(k, { name: "multiselect" }, {
-      default: D(() => [
-        b(o("div", {
-          class: v(["multiselect__content-wrapper", { "multiselect__content-wrapper--small": i.small }]),
-          onFocus: t[11] || (t[11] = (...s) => e.activate && e.activate(...s)),
-          tabindex: "-1",
-          onMousedown: t[12] || (t[12] = r(() => {
-          }, ["prevent"])),
-          style: S({ maxHeight: e.optimizedHeight + "px" }),
-          ref: "list"
-        }, [
-          o("ul", {
-            class: "multiselect__content",
-            style: S(n.contentStyle),
-            role: "listbox",
-            id: "listbox-" + e.id,
-            "aria-multiselectable": e.multiple
-          }, [
-            u(e.$slots, "beforeList", {}, void 0, !0),
-            e.multiple && e.max === e.internalValue.length ? (d(), p("li", W, [
-              o("span", X, [
-                u(e.$slots, "maxElements", {}, () => [
-                  V("Maximum of " + m(e.max) + " options selected. First remove a selected option to select another.", 1)
-                ], !0)
-              ])
-            ])) : c("", !0),
-            !e.max || e.internalValue.length < e.max ? (d(!0), p(L, { key: 1 }, $(e.filteredOptions, (s, h) => (d(), p("li", {
-              class: "multiselect__element",
-              key: h,
-              "aria-selected": e.isSelected(s),
-              id: e.id + "-" + h,
-              role: s && (s.$isLabel || s.$isDisabled) ? null : "option"
-            }, [
-              s && (s.$isLabel || s.$isDisabled) ? c("", !0) : (d(), p("span", {
-                key: 0,
-                class: v([e.optionHighlight(h, s), "multiselect__option"]),
-                onClick: r((g) => e.select(s), ["stop"]),
-                onMouseenter: r((g) => e.pointerSet(h), ["self"]),
-                "data-select": s && s.isTag ? e.tagPlaceholder : n.selectLabelText,
-                "data-selected": n.selectedLabelText,
-                "data-deselect": n.deselectLabelText
-              }, [
-                u(e.$slots, "option", {
-                  option: s,
-                  search: e.search,
-                  index: h
-                }, () => [
-                  o("span", null, m(e.getOptionLabel(s)), 1)
-                ], !0)
-              ], 42, Z)),
-              s && (s.$isLabel || s.$isDisabled) ? (d(), p("span", {
-                key: 1,
-                "data-select": e.groupSelect && n.selectGroupLabelText,
-                "data-deselect": e.groupSelect && n.deselectGroupLabelText,
-                class: v([e.groupHighlight(h, s), "multiselect__option"]),
-                onMouseenter: r((g) => e.groupSelect && e.pointerSet(h), ["self"]),
-                onMousedown: r((g) => e.selectGroup(s), ["prevent"])
-              }, [
-                u(e.$slots, "option", {
-                  option: s,
-                  search: e.search,
-                  index: h
-                }, () => [
-                  o("span", null, m(e.getOptionLabel(s)), 1)
-                ], !0)
-              ], 42, x)) : c("", !0)
-            ], 8, Y))), 128)) : c("", !0),
-            b(o("li", null, [
-              o("span", _, [
-                u(e.$slots, "noResult", { search: e.search }, () => [
-                  t[19] || (t[19] = V("No elements found. Consider changing the search query."))
-                ], !0)
-              ])
-            ], 512), [
-              [y, i.showNoResults && e.filteredOptions.length === 0 && e.search && !i.loading]
-            ]),
-            b(o("li", null, [
-              o("span", ee, [
-                u(e.$slots, "noOptions", {}, () => [
-                  t[20] || (t[20] = V("List is empty."))
-                ], !0)
-              ])
-            ], 512), [
-              [y, i.showNoOptions && (e.options.length === 0 || n.hasOptionGroup === !0 && e.filteredOptions.length === 0) && !e.search && !i.loading]
-            ]),
-            u(e.$slots, "afterList", {}, void 0, !0)
-          ], 12, Q)
-        ], 38), [
-          [y, e.isOpen]
+    b(T, { name: "multiselect" }, {
+      default: y(() => [
+        S(b(d, {
+          teleported: !1,
+          id: e.id,
+          multiple: e.multiple,
+          max: e.max,
+          internalValue: e.internalValue,
+          filteredOptions: e.filteredOptions,
+          isSelected: e.isSelected,
+          optionHighlight: e.optionHighlight,
+          select: e.select,
+          pointerSet: e.pointerSet,
+          selectLabelText: l.selectLabelText,
+          selectedLabelText: l.selectedLabelText,
+          deselectLabelText: l.deselectLabelText,
+          tagPlaceholder: e.tagPlaceholder,
+          groupSelect: e.groupSelect,
+          selectGroupLabelText: l.selectGroupLabelText,
+          deselectGroupLabelText: l.deselectGroupLabelText,
+          getOptionLabel: e.getOptionLabel,
+          groupHighlight: e.groupHighlight,
+          selectGroup: e.selectGroup,
+          options: e.options,
+          hasOptionGroup: l.hasOptionGroup,
+          search: e.search,
+          loading: i.loading,
+          showNoResults: i.showNoResults,
+          showNoOptions: i.showNoOptions,
+          small: i.small,
+          contentStyle: l.contentStyle,
+          customStyle: l.dropdownStyle,
+          ref: "list",
+          onFocus: e.activate
+        }, B({ _: 2 }, [
+          v(e.$slots, (s, h) => ({
+            name: h,
+            fn: y((f) => [
+              u(e.$slots, h, $(G(f)), void 0, !0)
+            ])
+          }))
+        ]), 1032, ["id", "multiple", "max", "internalValue", "filteredOptions", "isSelected", "optionHighlight", "select", "pointerSet", "selectLabelText", "selectedLabelText", "deselectLabelText", "tagPlaceholder", "groupSelect", "selectGroupLabelText", "deselectGroupLabelText", "getOptionLabel", "groupHighlight", "selectGroup", "options", "hasOptionGroup", "search", "loading", "showNoResults", "showNoOptions", "small", "contentStyle", "customStyle", "onFocus"]), [
+          [L, e.isOpen]
         ])
       ]),
       _: 3
-    })
-  ], 42, N);
+    }),
+    i.appendToBody && e.isOpen ? (c(), F(x, {
+      key: 0,
+      to: "body"
+    }, [
+      b(d, {
+        teleported: !0,
+        id: e.id,
+        multiple: e.multiple,
+        max: e.max,
+        internalValue: e.internalValue,
+        filteredOptions: e.filteredOptions,
+        isSelected: e.isSelected,
+        optionHighlight: e.optionHighlight,
+        select: e.select,
+        pointerSet: e.pointerSet,
+        selectLabelText: l.selectLabelText,
+        selectedLabelText: l.selectedLabelText,
+        deselectLabelText: l.deselectLabelText,
+        tagPlaceholder: e.tagPlaceholder,
+        groupSelect: e.groupSelect,
+        selectGroupLabelText: l.selectGroupLabelText,
+        deselectGroupLabelText: l.deselectGroupLabelText,
+        getOptionLabel: e.getOptionLabel,
+        groupHighlight: e.groupHighlight,
+        selectGroup: e.selectGroup,
+        options: e.options,
+        hasOptionGroup: l.hasOptionGroup,
+        search: e.search,
+        loading: i.loading,
+        showNoResults: i.showNoResults,
+        showNoOptions: i.showNoOptions,
+        small: i.small,
+        contentStyle: l.contentStyle,
+        customStyle: l.teleportedContentStyle,
+        onFocus: e.activate,
+        onClick: t[11] || (t[11] = o(() => {
+        }, ["stop"]))
+      }, B({ _: 2 }, [
+        v(e.$slots, (s, h) => ({
+          name: h,
+          fn: y((f) => [
+            u(e.$slots, h, $(G(f)), void 0, !0)
+          ])
+        }))
+      ]), 1032, ["id", "multiple", "max", "internalValue", "filteredOptions", "isSelected", "optionHighlight", "select", "pointerSet", "selectLabelText", "selectedLabelText", "deselectLabelText", "tagPlaceholder", "groupSelect", "selectGroupLabelText", "deselectGroupLabelText", "getOptionLabel", "groupHighlight", "selectGroup", "options", "hasOptionGroup", "search", "loading", "showNoResults", "showNoOptions", "small", "contentStyle", "customStyle", "onFocus"])
+    ])) : m("", !0)
+  ], 42, U);
 }
-const le = /* @__PURE__ */ A(F, [["render", te], ["__scopeId", "data-v-a1db52fd"]]);
+const ne = /* @__PURE__ */ K(I, [["render", te], ["__scopeId", "data-v-c725aeeb"]]);
 export {
-  le as default
+  ne as default
 };