@vue-interface/btn-dropdown 2.0.0-beta.12 → 2.0.0-beta.13

package/dist/btn-dropdown.js

@@ -1,9 +1,8 @@
-import { defineComponent as m, openBlock as a, createBlock as d, resolveDynamicComponent as S, mergeProps as b, withCtx as n, renderSlot as s, resolveComponent as p, normalizeClass as l, normalizeProps as u, guardReactiveProps as c, createVNode as C, normalizeStyle as P, createTextVNode as w, toDisplayString as y, withKeys as D, withModifiers as T, createCommentVNode as g, createElementBlock as z, createSlots as F } from "vue";
-import { createPopper as K } from "@popperjs/core";
-import { Btn as M } from "@vue-interface/btn";
-import { BtnGroup as j } from "@vue-interface/btn-group";
-import { DropdownMenu as q } from "@vue-interface/dropdown-menu";
-const E = m({
+import { defineComponent as M, openBlock as z, createBlock as I, resolveDynamicComponent as F, mergeProps as T, withCtx as d, renderSlot as a, ref as K, computed as k, onBeforeMount as Y, unref as e, normalizeClass as C, normalizeProps as S, guardReactiveProps as A, createVNode as B, createTextVNode as D, toDisplayString as E, withKeys as j, withModifiers as H, createCommentVNode as q, createElementVNode as Z, useSlots as x, createSlots as _ } from "vue";
+import { BtnGroup as P } from "@vue-interface/btn-group";
+import { DropdownMenu as L } from "@vue-interface/dropdown-menu";
+import { createPopper as ee } from "@popperjs/core";
+const te = M({
   props: {
     expanded: {
       type: Boolean,
@@ -27,575 +26,361 @@ const E = m({
       return this.to ? "router-link" : this.href ? "a" : "button";
     }
   }
-}), k = (e, t) => {
-  const i = e.__vccOpts || e;
-  for (const [h, f] of t)
-    i[h] = f;
-  return i;
+}), oe = (t, c) => {
+  const r = t.__vccOpts || t;
+  for (const [u, n] of c)
+    r[u] = n;
+  return r;
 };
-function O(e, t, i, h, f, B) {
-  return a(), d(S(e.is), b({ id: e.id }, e.to ? { to: e.to } : { href: e.href }, {
+function ne(t, c, r, u, n, l) {
+  return z(), I(F(t.is), T({ id: t.id }, t.to ? { to: t.to } : { href: t.href }, {
     "aria-haspopup": "true",
-    "aria-expanded": e.expanded,
-    type: e.is === "button" ? "button" : void 0
+    "aria-expanded": t.expanded,
+    type: t.is === "button" ? "button" : void 0
   }), {
-    default: n(() => [
-      s(e.$slots, "default")
+    default: d(() => [
+      a(t.$slots, "default")
     ]),
     _: 3
   }, 16, ["id", "aria-expanded", "type"]);
 }
-const G = /* @__PURE__ */ k(E, [["render", O]]), A = m({
-  components: {
-    BtnDropdownAction: G,
-    BtnGroup: j,
-    DropdownMenu: q
-  },
-  extends: M,
-  props: {
-    /**
-     * Display the dropdown menu aligned left or right
-     *
-     * @property String
-     */
-    align: {
-      type: String,
-      default: "left",
-      validate(e) {
-        return ["left", "right"].indexOf(e.toLowerCase()) !== -1;
-      }
-    },
-    /**
-     * Should animate the dropdown opening.
-     *
-     * @property {Boolean}
-     */
-    animated: {
-      type: Boolean,
-      default: !0
-    },
-    /**
-     * Additional button classes.
-     * 
-     * @property {Object|String}
-     */
-    buttonClass: [Object, String],
-    /**
-     * Show the caret.
-     *
-     * @property {Boolean}
-     */
-    caret: {
-      type: Boolean,
-      default: !0
-    },
-    /**
-     * Should display the toggle button as a circle.
-     *
-     * @property Boolean
-     */
-    // circle: {
-    //     type: Boolean,
-    //     default: false
-    // },
-    /**
-     * Display as a dropup instead of a dropdown.
-     *
-     * @property Boolean
-     */
-    dropup: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * Display as a dropright instead of a dropdown.
-     *
-     * @property Boolean
-     */
-    dropright: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * Display as a dropleft instead of a dropdown.
-     *
-     * @property Boolean
-     */
-    dropleft: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * The action height.
-     *
-     * @property {String}
-     */
-    height: String,
-    /**
-     * The href action.
-     *
-     * @property {String}
-     */
-    href: String,
-    /**
-     * Is the dropdown a nav item?
-     *
-     * @property {Boolean}
-     */
-    nav: Boolean,
-    /**
-     * The toggle button's label. If not defined as an attribute,
-     * you can override with the component's slot (inner html).
-     *
-     * @property {String}
-     */
-    label: String,
-    offset: {
-      type: Number,
-      default: 5
-    },
-    /**
-     * Should rotate the toggle button when opened.
-     *
-     * @property {Boolean}
-     */
-    rotate: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * Display the dropdown button with a split toggle button.
-     *
-     * @property {Boolean}
-     */
-    split: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * The "to" path, used for vue-router.
-     *
-     * @property {String|Object}
-     */
-    to: [String, Object],
-    /**
-     * The button type attribute.
-     *
-     * @property {String}
-     */
-    type: {
-      type: String,
-      default: "button"
-    },
-    /**
-     * The action width.
-     *
-     * @property {String}
-     */
-    width: String
-  },
-  emits: [
-    "click-toggle",
-    "show",
-    "hide",
-    "toggle"
-  ],
-  data() {
-    return {
-      popper: null,
-      triggerAnimation: !1,
-      expanded: !1
-    };
-  },
-  computed: {
-    scope() {
-      return {
-        // Pass the computed props.
-        placement: this.placement,
-        variantClassPrefix: this.variantClassPrefix,
-        sizeableClassPrefix: this.sizeableClassPrefix,
-        classes: this.classes,
-        actionClasses: this.actionClasses,
-        toggleStyle: this.toggleStyle,
-        toggleClasses: this.toggleClasses,
-        // Pass the methods                
-        focus: this.focus,
-        queryFocusable: this.queryFocusable,
-        isFocusable: this.isFocusable,
-        toggle: this.toggle,
-        show: this.show,
-        hide: this.hide,
-        onBlur: this.onBlur,
-        onClickItem: this.onClickItem,
-        onClickToggle: this.onClickToggle,
-        expanded: this.expanded
-      };
-    },
-    placement() {
-      return this.dropup ? "top" : this.dropleft ? "left" : this.dropright ? "right" : "bottom";
-    },
-    variantClassPrefix() {
-      return "btn" + (this.outline ? "-outline" : "");
-    },
-    sizeableClassPrefix() {
-      return "btn";
-    },
-    classes() {
-      return {
-        dropdown: this.dropup && this.dropright && this.dropleft,
-        dropup: this.dropup,
-        dropright: this.dropright,
-        dropleft: this.dropleft,
-        "icon-only": !this.nav && !this.split && !!this.$slots.icon && !this.$slots.label,
-        "hide-caret": !this.caret,
-        expanded: this.expanded,
-        "rotate-90": !this.nav && this.split && this.rotate && this.expanded
-      };
-    },
-    actionClasses() {
-      return Object.assign({
-        btn: !this.nav,
-        [this.variantClass]: !this.nav && !!this.variant,
-        [this.sizeableClass]: !!this.size
-      }, typeof this.buttonClass == "object" ? this.buttonClass : {
-        [this.buttonClass]: !!this.buttonClass
-      });
-    },
-    toggleStyle() {
-      return {
-        width: this.width,
-        height: this.height
-      };
-    },
-    toggleClasses() {
-      return Object.assign({
-        active: this.active,
-        btn: !this.nav,
-        "btn-block": !!this.block,
-        "nav-link": !!this.nav,
-        "rotate-90": !this.split && this.rotate && this.expanded,
-        "dropdown-toggle": !0,
-        "dropdown-toggle-split": !this.nav && this.split,
-        [this.variantClass]: !this.nav && !!this.variant,
-        [this.sizeableClass]: !!this.size
-      }, typeof this.buttonClass == "object" ? this.buttonClass : {
-        [this.buttonClass]: !!this.buttonClass
-      });
-    }
-  },
-  watch: {
-    expanded(e) {
-      this.$nextTick(() => {
-        this.$emit(e ? "show" : "hide"), this.$emit("toggle", e);
-      }), setTimeout(() => {
-        e ? document.addEventListener("click", this.onClickDocument) : document.removeEventListener("click", this.onClickDocument);
-      });
-    }
-  },
-  beforeUnmount() {
-    this.popper && this.popper.destroy();
-  },
-  methods: {
-    /**
-     * Focus on the the dropdown toggle button
-     *
-     * @return void
-     */
-    focus() {
-      var e;
-      (e = this.$el) == null || e.querySelector(".dropdown-toggle").focus();
-    },
-    /**
-     * Focus on the the dropdown toggle button
-     *
-     * @return void
-     */
-    queryFocusable() {
-      var e;
-      return (e = this.$el) == null ? void 0 : e.querySelector(".dropdown-menu").querySelectorAll('label, input, select, textarea, [tabindex]:not([tabindex="-1"])');
-    },
-    /**
-     * Method to check if the given element is focusable.
-     *
-     * @return void
-     */
-    isFocusable(e) {
-      const t = this.queryFocusable();
-      for (const i in t)
-        if (e === t[i])
-          return !0;
-      return !1;
-    },
-    /**
-     * Toggle the dropdown menu
-     *
-     * @return void
-     */
-    toggle() {
-      this.expanded ? this.hide() : this.show();
-    },
-    /**
-     * Show the dropdown menu
-     *
-     * @return void
-     */
-    show() {
-      var t, i;
-      this.expanded = !0;
-      const e = this.$refs.split && ((t = this.$refs.split) == null ? void 0 : t.$el) || this.$el;
-      !this.nav && !this.popper ? this.popper = K(e, (i = this.$refs.menu) == null ? void 0 : i.$el, {
-        placement: `${this.placement}-${this.align === "left" ? "start" : "end"}`,
-        onFirstUpdate: () => {
-          this.triggerAnimation = this.animated;
-        },
-        modifiers: [
-          {
-            name: "offset",
-            options: {
-              offset: [0, this.nav ? 1 : this.offset]
-              // offset: ['.125rem', !this.nav ? 4 : 1],
-            }
+const N = /* @__PURE__ */ oe(te, [["render", ne]]);
+function O(t, c) {
+  const r = K(!1), u = K(!1), n = K(), l = K(), i = K(), w = k(
+    () => l.value instanceof HTMLElement ? l.value : l.value.$el
+  ), m = k(
+    () => i.value instanceof HTMLElement ? i.value : i.value.$el
+  ), $ = k(() => ({
+    [t.size]: !!t.size,
+    dropdown: t.dropdown || !(t.dropright || t.dropleft || t.dropup),
+    dropup: t.dropup,
+    dropright: t.dropright,
+    dropleft: t.dropleft,
+    // 'icon-only': !this.nav && !this.split && !!this.$slots.icon && !this.$slots.label,
+    // 'hide-caret': !this.caret,
+    expanded: r.value
+    // 'rotate-90': !this.nav && this.split && this.rotate && this.expanded,
+  })), g = k(() => ({
+    // [props.size]: !!props.size,
+    [t.variant]: !!t.variant,
+    ...v.value
+  })), v = k(() => typeof t.buttonClass == "object" ? { btn: !0, ...t.buttonClass } : {
+    btn: !0,
+    [t.buttonClass]: !0
+  }), y = k(() => ({
+    active: t.active,
+    "dropdown-toggle": !0,
+    "dropdown-toggle-split": t.split,
+    // [props.size]: !!props.size,
+    [t.variant]: !!t.variant,
+    ...v.value
+    // toggleClasses() {
+    //     return Object.assign({
+    //         'active': this.active,
+    //         'btn': !this.nav,
+    //         'btn-block': !!this.block,
+    //         'nav-link': !!this.nav,
+    //         'rotate-90': !this.split && this.rotate && this.expanded,
+    //         'dropdown-toggle': true,
+    //         'dropdown-toggle-split': !this.nav && this.split,
+    //         [this.variant]: !this.nav && !!this.variant,
+    //         [this.size]: !!this.size,
+    //     }, typeof this.buttonClass === 'object' ? this.buttonClass : {
+    //         [this.buttonClass]: !!this.buttonClass
+    //     });
+    // }
+  })), b = k(() => t.dropup ? "top" : t.dropleft ? "left" : t.dropright ? "right" : "bottom"), o = k(() => t.align && t.align === "right" ? "end" : "start");
+  function s() {
+    r.value = !0, n.value ? n.value.update() : n.value = ee(w.value, m.value.querySelector(".dropdown-menu"), {
+      placement: `${b.value}-${o.value}`,
+      onFirstUpdate: () => {
+        u.value = !0;
+      },
+      modifiers: [
+        {
+          name: "offset",
+          options: {
+            offset: [0, t.offset ?? 5]
           }
-        ]
-      }) : this.popper && this.popper.update();
-    },
-    /**
-     * Hide the dropdown menu
-     *
-     * @return void
-     */
-    hide() {
-      this.expanded = !1;
-    },
-    /**
-     * A callback function for the `blur-item` event.
-     *
-     * @return void
-     */
-    onBlur(e) {
-      var t;
-      (this.$refs.menu && !((t = this.$refs.menu) != null && t.$el.contains(e.relatedTarget)) || !(this != null && this.$el.contains(e.relatedTarget))) && this.hide();
-    },
-    onClickDocument(e) {
-      this != null && this.$el.contains(e.target) || this.hide();
-    },
-    /**
-     * A callback function for the `click-item` event.
-     *
-     * @return void
-     */
-    onClickItem(e) {
-      this.isFocusable(e.target) || this.hide();
-    },
-    /**
-     * A callback function for the `click-toggle` event.
-     *
-     * @return void
-     */
-    onClickToggle(e) {
-      e.target.dispatchEvent(new Event("focus", e)), this.$emit("click-toggle", e), e.defaultPrevented || this.toggle();
-    },
-    onKeydown(e) {
-      e.target.parentElement.lastElementChild === e.target && this.hide();
-    }
+        }
+      ]
+    });
   }
-}), I = m({
-  mixins: [
-    A
-  ]
-});
-function N(e, t, i, h, f, B) {
-  const o = p("BtnDropdownAction"), v = p("DropdownMenu"), $ = p("BtnGroup");
-  return a(), d($, {
-    class: l(e.classes)
-  }, {
-    default: n(() => [
-      s(e.$slots, "button", u(c(e.scope)), () => [
-        C(o, {
-          id: e.$attrs.id,
-          ref: "button",
-          expanded: e.expanded,
-          href: e.href,
-          to: e.to,
-          style: P(e.toggleStyle),
-          class: l(e.toggleClasses),
-          onBlur: e.onBlur,
-          onClick: e.onClickToggle
-        }, {
-          default: n(() => [
-            s(e.$slots, "icon"),
-            s(e.$slots, "label", {}, () => [
-              w(y(e.label), 1)
-            ])
-          ]),
-          _: 3
-        }, 8, ["id", "expanded", "href", "to", "style", "class", "onBlur", "onClick"])
-      ]),
-      C(v, {
-        id: e.$attrs.id,
-        ref: "menu",
-        align: e.align,
-        show: e.expanded,
-        class: l({ animated: e.triggerAnimation }),
-        onBlur: e.onBlur,
-        onClick: e.onClickItem,
-        onKeydown: D(e.onKeydown, ["tab"]),
-        onMousedown: t[0] || (t[0] = T(() => {
-        }, ["prevent"]))
-      }, {
-        default: n(() => [
-          s(e.$slots, "default")
-        ]),
-        _: 3
-      }, 8, ["id", "align", "show", "class", "onBlur", "onClick", "onKeydown"])
-    ]),
-    _: 3
-  }, 8, ["class"]);
+  function p() {
+    r.value = !1;
+  }
+  function V() {
+    r.value ? p() : s();
+  }
+  function G() {
+    return m.value && m.value.querySelectorAll(
+      'label, input, select, textarea, [tabindex]:not([tabindex="-1"])'
+    );
+  }
+  function R(f) {
+    const h = G();
+    for (const X in h)
+      if (f === h[X])
+        return !0;
+    return !1;
+  }
+  function U(f) {
+    (m.value && !m.value.contains(f.relatedTarget) || !m.value.contains(f.relatedTarget)) && p();
+  }
+  function J(f) {
+    R(f.target) || p();
+  }
+  function Q(f) {
+    f.target.dispatchEvent(new Event("focus", f)), c("click-toggle", f), f.defaultPrevented || V();
+  }
+  function W(f) {
+    var h;
+    ((h = w.value.parentElement) == null ? void 0 : h.lastElementChild) === f.target && p();
+  }
+  return Y(() => {
+    n.value && n.value.destroy();
+  }), {
+    actionClasses: g,
+    classes: $,
+    expanded: r,
+    menu: i,
+    target: l,
+    toggleClasses: y,
+    triggerAnimation: u,
+    hide: p,
+    show: s,
+    toggle: V,
+    onBlur: U,
+    onClickItem: J,
+    onClickToggle: Q,
+    onKeydown: W
+  };
 }
-const L = /* @__PURE__ */ k(I, [["render", N]]), V = m({
-  mixins: [
-    A
-  ],
-  emits: [
-    "click"
-  ]
-}), H = ["id", "aria-expanded"];
-function U(e, t, i, h, f, B) {
-  const o = p("BtnDropdownAction"), v = p("DropdownMenu"), $ = p("BtnGroup");
-  return a(), d($, {
-    class: l([e.classes, "btn-dropdown-split"])
-  }, {
-    default: n(() => [
-      e.dropleft ? g("", !0) : s(e.$slots, "button", u(b({ key: 0 }, e.scope)), () => [
-        e.dropleft ? g("", !0) : (a(), d(o, {
-          key: 0,
-          id: e.$attrs.id,
-          ref: "button",
-          expanded: e.expanded,
-          href: e.href,
-          to: e.to,
-          class: l(e.actionClasses),
-          onClick: t[0] || (t[0] = (r) => e.$emit("click", r))
+const le = /* @__PURE__ */ M({
+  __name: "BtnDropdownSingle",
+  props: {
+    active: { type: Boolean },
+    align: {},
+    buttonClass: {},
+    dropdown: { type: Boolean },
+    dropup: { type: Boolean },
+    dropleft: { type: Boolean },
+    dropright: { type: Boolean },
+    label: {},
+    offset: {},
+    size: {},
+    split: { type: Boolean },
+    variant: {}
+  },
+  emits: ["click", "click-toggle"],
+  setup(t, { emit: c }) {
+    const r = t, {
+      target: u,
+      classes: n,
+      expanded: l,
+      menu: i,
+      toggleClasses: w,
+      triggerAnimation: m,
+      toggle: $,
+      onBlur: g,
+      onClickToggle: v,
+      onClickItem: y,
+      onKeydown: b
+    } = O(r, c);
+    return (o, s) => (z(), I(e(P), {
+      ref_key: "target",
+      ref: u,
+      class: C(e(n))
+    }, {
+      default: d(() => [
+        a(o.$slots, "button", S(A({ expanded: e(l), target: e(u), toggle: e($), onBlur: e(g), onClickToggle: e(v), onClickItem: e(y), onKeydown: e(b) })), () => [
+          B(N, {
+            id: o.$attrs.id,
+            expanded: e(l),
+            class: C(e(w)),
+            onBlur: e(g),
+            onClick: e(v)
+          }, {
+            default: d(() => [
+              a(o.$slots, "icon"),
+              a(o.$slots, "label", {}, () => [
+                D(E(o.label), 1)
+              ])
+            ]),
+            _: 3
+          }, 8, ["id", "expanded", "class", "onBlur", "onClick"])
+        ]),
+        B(e(L), {
+          id: o.$attrs.id,
+          ref_key: "menu",
+          ref: i,
+          align: o.align,
+          show: e(l),
+          class: C({ animated: e(m) }),
+          onBlur: e(g),
+          onClick: e(y),
+          onKeydown: j(e(b), ["tab"]),
+          onMousedown: s[0] || (s[0] = H(() => {
+          }, ["prevent"]))
         }, {
-          default: n(() => [
-            s(e.$slots, "icon"),
-            s(e.$slots, "label", {}, () => [
-              w(y(e.label), 1)
-            ])
+          default: d(() => [
+            a(o.$slots, "default")
           ]),
           _: 3
-        }, 8, ["id", "expanded", "href", "to", "class"]))
+        }, 8, ["id", "align", "show", "class", "onBlur", "onClick", "onKeydown"])
       ]),
-      C($, { ref: "split" }, {
-        default: n(() => [
-          s(e.$slots, "split", u(c(e.scope)), () => [
-            e.split ? (a(), z("button", {
-              key: 0,
-              id: e.$attrs.id,
-              type: "button",
-              "aria-haspopup": "true",
-              "aria-expanded": e.expanded,
-              class: l(e.toggleClasses),
-              onBlur: t[1] || (t[1] = (...r) => e.onBlur && e.onBlur(...r)),
-              onClick: t[2] || (t[2] = (...r) => e.onClickToggle && e.onClickToggle(...r))
-            }, null, 42, H)) : g("", !0)
-          ]),
-          C(v, {
-            id: e.$attrs.id,
-            ref: "menu",
-            align: e.align,
-            show: e.expanded,
-            class: l({ animated: e.triggerAnimation }),
-            onBlur: e.onBlur,
-            onClick: e.onClickItem,
-            onKeydown: D(e.onKeydown, ["tab"]),
-            onMousedown: t[3] || (t[3] = T(() => {
-            }, ["prevent"]))
+      _: 3
+    }, 8, ["class"]));
+  }
+}), ae = ["id", "aria-expanded"], se = /* @__PURE__ */ M({
+  __name: "BtnDropdownSplit",
+  props: {
+    active: { type: Boolean },
+    align: {},
+    buttonClass: {},
+    dropdown: { type: Boolean },
+    dropup: { type: Boolean },
+    dropleft: { type: Boolean },
+    dropright: { type: Boolean },
+    label: {},
+    offset: {},
+    size: {},
+    split: { type: Boolean },
+    variant: {}
+  },
+  emits: ["click", "click-toggle"],
+  setup(t, { emit: c }) {
+    const r = t, {
+      actionClasses: u,
+      classes: n,
+      expanded: l,
+      menu: i,
+      target: w,
+      toggleClasses: m,
+      triggerAnimation: $,
+      onBlur: g,
+      onClickToggle: v,
+      onClickItem: y,
+      onKeydown: b
+    } = O(r, c);
+    return (o, s) => (z(), I(e(P), {
+      class: C([e(n), "btn-dropdown-split"])
+    }, {
+      default: d(() => [
+        o.dropleft ? q("", !0) : a(o.$slots, "button", S(T({ key: 0 }, { expanded: e(l), onBlur: e(g), onClickToggle: e(v), onClickItem: e(y), onKeydown: e(b) })), () => [
+          B(N, {
+            id: o.$attrs.id,
+            expanded: e(l),
+            class: C(e(u)),
+            onClick: s[0] || (s[0] = (p) => c("click", p))
           }, {
-            default: n(() => [
-              s(e.$slots, "default")
+            default: d(() => [
+              a(o.$slots, "icon"),
+              a(o.$slots, "label", {}, () => [
+                D(E(o.label), 1)
+              ])
             ]),
             _: 3
-          }, 8, ["id", "align", "show", "class", "onBlur", "onClick", "onKeydown"])
+          }, 8, ["id", "expanded", "class"])
         ]),
-        _: 3
-      }, 512),
-      e.dropleft ? s(e.$slots, "button", u(b({ key: 1 }, e.scope)), () => [
-        e.dropleft ? (a(), d(o, {
-          key: 0,
-          id: e.$attrs.id,
-          ref: "button",
-          expanded: e.expanded,
-          href: e.href,
-          to: e.to,
-          class: l(e.actionClasses),
-          onClick: t[4] || (t[4] = (r) => e.$emit("click", r))
+        B(e(P), {
+          ref_key: "target",
+          ref: w
         }, {
-          default: n(() => [
-            s(e.$slots, "icon"),
-            s(e.$slots, "label", {}, () => [
-              w(y(e.label), 1)
-            ])
+          default: d(() => [
+            a(o.$slots, "split", {}, () => [
+              Z("button", {
+                id: o.$attrs.id,
+                type: "button",
+                "aria-haspopup": "true",
+                "aria-expanded": e(l),
+                class: C(e(m)),
+                onBlur: s[1] || (s[1] = //@ts-ignore
+                (...p) => e(g) && e(g)(...p)),
+                onClick: s[2] || (s[2] = //@ts-ignore
+                (...p) => e(v) && e(v)(...p))
+              }, null, 42, ae)
+            ]),
+            B(e(L), {
+              ref_key: "menu",
+              ref: i,
+              align: o.align,
+              show: e(l),
+              class: C({ animated: e($) }),
+              onBlur: e(g),
+              onClick: e(y),
+              onKeydown: j(e(b), ["tab"]),
+              onMousedown: s[3] || (s[3] = H(() => {
+              }, ["prevent"]))
+            }, {
+              default: d(() => [
+                a(o.$slots, "default")
+              ]),
+              _: 3
+            }, 8, ["align", "show", "class", "onBlur", "onClick", "onKeydown"])
           ]),
           _: 3
-        }, 8, ["id", "expanded", "href", "to", "class"])) : g("", !0)
-      ]) : g("", !0)
-    ]),
-    _: 3
-  }, 8, ["class"]);
-}
-const R = /* @__PURE__ */ k(V, [["render", U]]), J = m({
-  name: "BtnDropdown",
-  components: {
-    BtnDropdownSplit: R,
-    BtnDropdownSingle: L
+        }, 512),
+        o.dropleft ? a(o.$slots, "button", S(T({ key: 1 }, { expanded: e(l), onBlur: e(g), onClickToggle: e(v), onClickItem: e(y), onKeydown: e(b) })), () => [
+          B(N, {
+            id: o.$attrs.id,
+            expanded: e(l),
+            class: C(e(u)),
+            onClick: s[4] || (s[4] = (p) => c("click", p))
+          }, {
+            default: d(() => [
+              a(o.$slots, "icon"),
+              a(o.$slots, "label", {}, () => [
+                D(E(o.label), 1)
+              ])
+            ]),
+            _: 3
+          }, 8, ["id", "expanded", "class"])
+        ]) : q("", !0)
+      ]),
+      _: 3
+    }, 8, ["class"]));
+  }
+}), pe = /* @__PURE__ */ M({
+  __name: "BtnDropdown",
+  props: {
+    label: {},
+    split: { type: Boolean }
   },
-  inheritAttrs: !1,
-  emits: [
-    "click",
-    "click-toggle",
-    "dropdown",
-    "show",
-    "hide",
-    "toggle"
-  ]
-});
-function Q(e, t, i, h, f, B) {
-  return a(), d(S(e.$attrs.split === void 0 || e.$attrs.nav ? "btn-dropdown-single" : "btn-dropdown-split"), b({ class: "btn-dropdown" }, e.$attrs, {
-    onClick: t[0] || (t[0] = (...o) => e.$emit("click", ...o)),
-    onClickToggle: t[1] || (t[1] = (...o) => e.$emit("click-toggle", ...o)),
-    onDropdown: t[2] || (t[2] = (...o) => e.$emit("dropdown", ...o)),
-    onShow: t[3] || (t[3] = (...o) => e.$emit("show", ...o)),
-    onHide: t[4] || (t[4] = (...o) => e.$emit("hide", ...o)),
-    onToggle: t[5] || (t[5] = (...o) => e.$emit("toggle", ...o))
-  }), F({
-    icon: n(() => [
-      s(e.$slots, "icon")
-    ]),
-    button: n((o) => [
-      s(e.$slots, "button", u(c(o)))
-    ]),
-    split: n((o) => [
-      s(e.$slots, "split", u(c(o)))
-    ]),
-    default: n(() => [
-      s(e.$slots, "default")
-    ]),
-    _: 2
-  }, [
-    e.$attrs.label || e.$slots.label ? {
-      name: "label",
-      fn: n(() => [
-        s(e.$slots, "label", {}, () => [
-          w(y(e.$attrs.label), 1)
-        ])
+  emits: ["click"],
+  setup(t, { emit: c }) {
+    const r = t, u = x();
+    return (n, l) => (z(), I(F(n.split ? se : le), T(r, {
+      class: "btn-dropdown",
+      onClick: l[0] || (l[0] = (i) => c("click", i))
+    }), _({
+      icon: d(() => [
+        a(n.$slots, "icon")
       ]),
-      key: "0"
-    } : void 0
-  ]), 1040);
-}
-const _ = /* @__PURE__ */ k(J, [["render", Q]]);
+      button: d((i) => [
+        a(n.$slots, "button", S(A(i)))
+      ]),
+      split: d((i) => [
+        a(n.$slots, "split", S(A(i)))
+      ]),
+      default: d(() => [
+        a(n.$slots, "default")
+      ]),
+      _: 2
+    }, [
+      n.label || e(u).label ? {
+        name: "label",
+        fn: d(() => [
+          a(n.$slots, "label", {}, () => [
+            D(E(n.label), 1)
+          ])
+        ]),
+        key: "0"
+      } : void 0
+    ]), 1040));
+  }
+});
 export {
-  _ as BtnDropdown
+  pe as BtnDropdown
 };
 //# sourceMappingURL=btn-dropdown.js.map