@vue-interface/btn-dropdown 2.0.0-beta.1 → 2.0.0-beta.10

package/dist/btn-dropdown.js

@@ -0,0 +1,600 @@
+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({
+  props: {
+    expanded: {
+      type: Boolean,
+      default: !1
+    },
+    id: {
+      type: String,
+      default: void 0
+    },
+    href: {
+      type: String,
+      default: void 0
+    },
+    to: {
+      type: [String, Object],
+      default: void 0
+    }
+  },
+  computed: {
+    is() {
+      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;
+};
+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 }, {
+    "aria-haspopup": "true",
+    "aria-expanded": e.expanded,
+    type: e.is === "button" ? "button" : void 0
+  }), {
+    default: n(() => [
+      s(e.$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],
+            }
+          }
+        ]
+      }) : 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"]);
+}
+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))
+        }, {
+          default: n(() => [
+            s(e.$slots, "icon"),
+            s(e.$slots, "label", {}, () => [
+              w(y(e.label), 1)
+            ])
+          ]),
+          _: 3
+        }, 8, ["id", "expanded", "href", "to", "class"]))
+      ]),
+      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"]))
+          }, {
+            default: n(() => [
+              s(e.$slots, "default")
+            ]),
+            _: 3
+          }, 8, ["id", "align", "show", "class", "onBlur", "onClick", "onKeydown"])
+        ]),
+        _: 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))
+        }, {
+          default: n(() => [
+            s(e.$slots, "icon"),
+            s(e.$slots, "label", {}, () => [
+              w(y(e.label), 1)
+            ])
+          ]),
+          _: 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
+  },
+  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)
+        ])
+      ]),
+      key: "0"
+    } : void 0
+  ]), 1040);
+}
+const _ = /* @__PURE__ */ k(J, [["render", Q]]);
+export {
+  _ as BtnDropdown
+};

package/dist/btn-dropdown.umd.cjs

@@ -0,0 +1 @@
+(function(s,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("vue"),require("@popperjs/core"),require("@vue-interface/btn"),require("@vue-interface/btn-group"),require("@vue-interface/dropdown-menu")):typeof define=="function"&&define.amd?define(["exports","vue","@popperjs/core","@vue-interface/btn","@vue-interface/btn-group","@vue-interface/dropdown-menu"],t):(s=typeof globalThis<"u"?globalThis:s||self,t(s.BtnDropdown={},s.Vue,s.PopperjsCore,s.VueInterfaceBtn,s.VueInterfaceBtnGroup,s.VueInterfaceDropdownMenu))})(this,function(s,t,m,c,u,C){"use strict";const $=t.defineComponent({props:{expanded:{type:Boolean,default:!1},id:{type:String,default:void 0},href:{type:String,default:void 0},to:{type:[String,Object],default:void 0}},computed:{is(){return this.to?"router-link":this.href?"a":"button"}}}),d=(e,o)=>{const i=e.__vccOpts||e;for(const[l,a]of o)i[l]=a;return i};function w(e,o,i,l,a,h){return t.openBlock(),t.createBlock(t.resolveDynamicComponent(e.is),t.mergeProps({id:e.id},e.to?{to:e.to}:{href:e.href},{"aria-haspopup":"true","aria-expanded":e.expanded,type:e.is==="button"?"button":void 0}),{default:t.withCtx(()=>[t.renderSlot(e.$slots,"default")]),_:3},16,["id","aria-expanded","type"])}const b=d($,[["render",w]]),g=t.defineComponent({components:{BtnDropdownAction:b,BtnGroup:u.BtnGroup,DropdownMenu:C.DropdownMenu},extends:c.Btn,props:{align:{type:String,default:"left",validate(e){return["left","right"].indexOf(e.toLowerCase())!==-1}},animated:{type:Boolean,default:!0},buttonClass:[Object,String],caret:{type:Boolean,default:!0},dropup:{type:Boolean,default:!1},dropright:{type:Boolean,default:!1},dropleft:{type:Boolean,default:!1},height:String,href:String,nav:Boolean,label:String,offset:{type:Number,default:5},rotate:{type:Boolean,default:!1},split:{type:Boolean,default:!1},to:[String,Object],type:{type:String,default:"button"},width:String},emits:["click-toggle","show","hide","toggle"],data(){return{popper:null,triggerAnimation:!1,expanded:!1}},computed:{scope(){return{placement:this.placement,variantClassPrefix:this.variantClassPrefix,sizeableClassPrefix:this.sizeableClassPrefix,classes:this.classes,actionClasses:this.actionClasses,toggleStyle:this.toggleStyle,toggleClasses:this.toggleClasses,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(){var e;(e=this.$el)==null||e.querySelector(".dropdown-toggle").focus()},queryFocusable(){var e;return(e=this.$el)==null?void 0:e.querySelector(".dropdown-menu").querySelectorAll('label, input, select, textarea, [tabindex]:not([tabindex="-1"])')},isFocusable(e){const o=this.queryFocusable();for(const i in o)if(e===o[i])return!0;return!1},toggle(){this.expanded?this.hide():this.show()},show(){var o,i;this.expanded=!0;const e=this.$refs.split&&((o=this.$refs.split)==null?void 0:o.$el)||this.$el;!this.nav&&!this.popper?this.popper=m.createPopper(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]}}]}):this.popper&&this.popper.update()},hide(){this.expanded=!1},onBlur(e){var o;(this.$refs.menu&&!((o=this.$refs.menu)!=null&&o.$el.contains(e.relatedTarget))||!(this!=null&&this.$el.contains(e.relatedTarget)))&&this.hide()},onClickDocument(e){this!=null&&this.$el.contains(e.target)||this.hide()},onClickItem(e){this.isFocusable(e.target)||this.hide()},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()}}}),y=t.defineComponent({mixins:[g]});function k(e,o,i,l,a,h){const n=t.resolveComponent("BtnDropdownAction"),f=t.resolveComponent("DropdownMenu"),p=t.resolveComponent("BtnGroup");return t.openBlock(),t.createBlock(p,{class:t.normalizeClass(e.classes)},{default:t.withCtx(()=>[t.renderSlot(e.$slots,"button",t.normalizeProps(t.guardReactiveProps(e.scope)),()=>[t.createVNode(n,{id:e.$attrs.id,ref:"button",expanded:e.expanded,href:e.href,to:e.to,style:t.normalizeStyle(e.toggleStyle),class:t.normalizeClass(e.toggleClasses),onBlur:e.onBlur,onClick:e.onClickToggle},{default:t.withCtx(()=>[t.renderSlot(e.$slots,"icon"),t.renderSlot(e.$slots,"label",{},()=>[t.createTextVNode(t.toDisplayString(e.label),1)])]),_:3},8,["id","expanded","href","to","style","class","onBlur","onClick"])]),t.createVNode(f,{id:e.$attrs.id,ref:"menu",align:e.align,show:e.expanded,class:t.normalizeClass({animated:e.triggerAnimation}),onBlur:e.onBlur,onClick:e.onClickItem,onKeydown:t.withKeys(e.onKeydown,["tab"]),onMousedown:o[0]||(o[0]=t.withModifiers(()=>{},["prevent"]))},{default:t.withCtx(()=>[t.renderSlot(e.$slots,"default")]),_:3},8,["id","align","show","class","onBlur","onClick","onKeydown"])]),_:3},8,["class"])}const B=d(y,[["render",k]]),S=t.defineComponent({mixins:[g],emits:["click"]}),D=["id","aria-expanded"];function P(e,o,i,l,a,h){const n=t.resolveComponent("BtnDropdownAction"),f=t.resolveComponent("DropdownMenu"),p=t.resolveComponent("BtnGroup");return t.openBlock(),t.createBlock(p,{class:t.normalizeClass([e.classes,"btn-dropdown-split"])},{default:t.withCtx(()=>[e.dropleft?t.createCommentVNode("",!0):t.renderSlot(e.$slots,"button",t.normalizeProps(t.mergeProps({key:0},e.scope)),()=>[e.dropleft?t.createCommentVNode("",!0):(t.openBlock(),t.createBlock(n,{key:0,id:e.$attrs.id,ref:"button",expanded:e.expanded,href:e.href,to:e.to,class:t.normalizeClass(e.actionClasses),onClick:o[0]||(o[0]=r=>e.$emit("click",r))},{default:t.withCtx(()=>[t.renderSlot(e.$slots,"icon"),t.renderSlot(e.$slots,"label",{},()=>[t.createTextVNode(t.toDisplayString(e.label),1)])]),_:3},8,["id","expanded","href","to","class"]))]),t.createVNode(p,{ref:"split"},{default:t.withCtx(()=>[t.renderSlot(e.$slots,"split",t.normalizeProps(t.guardReactiveProps(e.scope)),()=>[e.split?(t.openBlock(),t.createElementBlock("button",{key:0,id:e.$attrs.id,type:"button","aria-haspopup":"true","aria-expanded":e.expanded,class:t.normalizeClass(e.toggleClasses),onBlur:o[1]||(o[1]=(...r)=>e.onBlur&&e.onBlur(...r)),onClick:o[2]||(o[2]=(...r)=>e.onClickToggle&&e.onClickToggle(...r))},null,42,D)):t.createCommentVNode("",!0)]),t.createVNode(f,{id:e.$attrs.id,ref:"menu",align:e.align,show:e.expanded,class:t.normalizeClass({animated:e.triggerAnimation}),onBlur:e.onBlur,onClick:e.onClickItem,onKeydown:t.withKeys(e.onKeydown,["tab"]),onMousedown:o[3]||(o[3]=t.withModifiers(()=>{},["prevent"]))},{default:t.withCtx(()=>[t.renderSlot(e.$slots,"default")]),_:3},8,["id","align","show","class","onBlur","onClick","onKeydown"])]),_:3},512),e.dropleft?t.renderSlot(e.$slots,"button",t.normalizeProps(t.mergeProps({key:1},e.scope)),()=>[e.dropleft?(t.openBlock(),t.createBlock(n,{key:0,id:e.$attrs.id,ref:"button",expanded:e.expanded,href:e.href,to:e.to,class:t.normalizeClass(e.actionClasses),onClick:o[4]||(o[4]=r=>e.$emit("click",r))},{default:t.withCtx(()=>[t.renderSlot(e.$slots,"icon"),t.renderSlot(e.$slots,"label",{},()=>[t.createTextVNode(t.toDisplayString(e.label),1)])]),_:3},8,["id","expanded","href","to","class"])):t.createCommentVNode("",!0)]):t.createCommentVNode("",!0)]),_:3},8,["class"])}const z=d(S,[["render",P]]),T=t.defineComponent({name:"BtnDropdown",components:{BtnDropdownSplit:z,BtnDropdownSingle:B},inheritAttrs:!1,emits:["click","click-toggle","dropdown","show","hide","toggle"]}),j="";function V(e,o,i,l,a,h){return t.openBlock(),t.createBlock(t.resolveDynamicComponent(e.$attrs.split===void 0||e.$attrs.nav?"btn-dropdown-single":"btn-dropdown-split"),t.mergeProps({class:"btn-dropdown"},e.$attrs,{onClick:o[0]||(o[0]=(...n)=>e.$emit("click",...n)),onClickToggle:o[1]||(o[1]=(...n)=>e.$emit("click-toggle",...n)),onDropdown:o[2]||(o[2]=(...n)=>e.$emit("dropdown",...n)),onShow:o[3]||(o[3]=(...n)=>e.$emit("show",...n)),onHide:o[4]||(o[4]=(...n)=>e.$emit("hide",...n)),onToggle:o[5]||(o[5]=(...n)=>e.$emit("toggle",...n))}),t.createSlots({icon:t.withCtx(()=>[t.renderSlot(e.$slots,"icon")]),button:t.withCtx(n=>[t.renderSlot(e.$slots,"button",t.normalizeProps(t.guardReactiveProps(n)))]),split:t.withCtx(n=>[t.renderSlot(e.$slots,"split",t.normalizeProps(t.guardReactiveProps(n)))]),default:t.withCtx(()=>[t.renderSlot(e.$slots,"default")]),_:2},[e.$attrs.label||e.$slots.label?{name:"label",fn:t.withCtx(()=>[t.renderSlot(e.$slots,"label",{},()=>[t.createTextVNode(t.toDisplayString(e.$attrs.label),1)])]),key:"0"}:void 0]),1040)}const N=d(T,[["render",V]]);s.BtnDropdown=N,Object.defineProperty(s,Symbol.toStringTag,{value:"Module"})});

package/{index.js → dist/index.d.ts}

@@ -1,5 +1,2 @@
 import BtnDropdown from './src/BtnDropdown.vue';
-
-export {
-    BtnDropdown
-};
+export { BtnDropdown };

package/dist/src/BtnDropdown.vue.d.ts

@@ -0,0 +1,9 @@
+declare const _sfc_main: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("toggle" | "show" | "click-toggle" | "hide" | "click" | "dropdown")[], "toggle" | "show" | "click-toggle" | "hide" | "click" | "dropdown", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>> & {
+    onToggle?: ((...args: any[]) => any) | undefined;
+    onShow?: ((...args: any[]) => any) | undefined;
+    "onClick-toggle"?: ((...args: any[]) => any) | undefined;
+    onHide?: ((...args: any[]) => any) | undefined;
+    onClick?: ((...args: any[]) => any) | undefined;
+    onDropdown?: ((...args: any[]) => any) | undefined;
+}, {}>;
+export default _sfc_main;

package/dist/src/BtnDropdownAction.vue.d.ts

@@ -0,0 +1,43 @@
+declare const _sfc_main: import("vue").DefineComponent<{
+    expanded: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    id: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    href: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    to: {
+        type: (StringConstructor | ObjectConstructor)[];
+        default: undefined;
+    };
+}, unknown, unknown, {
+    is(): "button" | "router-link" | "a";
+}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    expanded: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    id: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    href: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    to: {
+        type: (StringConstructor | ObjectConstructor)[];
+        default: undefined;
+    };
+}>>, {
+    expanded: boolean;
+    id: string;
+    href: string;
+    to: string | Record<string, any>;
+}>;
+export default _sfc_main;