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

package/dist/btn-dropdown.js

@@ -1,8 +1,8 @@
-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 { defineComponent as z, openBlock as M, 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 B, normalizeProps as S, guardReactiveProps as A, createVNode as w, 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({
+const te = z({
   props: {
     expanded: {
       type: Boolean,
@@ -33,7 +33,7 @@ const te = M({
   return r;
 };
 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 }, {
+  return M(), I(F(t.is), T({ id: t.id }, t.to ? { to: t.to } : { href: t.href }, {
     "aria-haspopup": "true",
     "aria-expanded": t.expanded,
     type: t.is === "button" ? "button" : void 0
@@ -46,7 +46,7 @@ function ne(t, c, r, u, n, l) {
 }
 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(
+  const r = K(!1), u = K(!1), n = K(), l = K(), i = K(), C = k(
     () => l.value instanceof HTMLElement ? l.value : l.value.$el
   ), m = k(
     () => i.value instanceof HTMLElement ? i.value : i.value.$el
@@ -66,7 +66,7 @@ function O(t, c) {
     ...v.value
   })), v = k(() => typeof t.buttonClass == "object" ? { btn: !0, ...t.buttonClass } : {
     btn: !0,
-    [t.buttonClass]: !0
+    [t.buttonClass]: !!t.buttonClass
   }), y = k(() => ({
     active: t.active,
     "dropdown-toggle": !0,
@@ -91,7 +91,7 @@ function O(t, c) {
     // }
   })), 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"), {
+    r.value = !0, n.value ? n.value.update() : n.value = ee(C.value, m.value.querySelector(".dropdown-menu"), {
       placement: `${b.value}-${o.value}`,
       onFirstUpdate: () => {
         u.value = !0;
@@ -135,7 +135,7 @@ function O(t, c) {
   }
   function W(f) {
     var h;
-    ((h = w.value.parentElement) == null ? void 0 : h.lastElementChild) === f.target && p();
+    ((h = C.value.parentElement) == null ? void 0 : h.lastElementChild) === f.target && p();
   }
   return Y(() => {
     n.value && n.value.destroy();
@@ -156,7 +156,7 @@ function O(t, c) {
     onKeydown: W
   };
 }
-const le = /* @__PURE__ */ M({
+const le = /* @__PURE__ */ z({
   __name: "BtnDropdownSingle",
   props: {
     active: { type: Boolean },
@@ -179,7 +179,7 @@ const le = /* @__PURE__ */ M({
       classes: n,
       expanded: l,
       menu: i,
-      toggleClasses: w,
+      toggleClasses: C,
       triggerAnimation: m,
       toggle: $,
       onBlur: g,
@@ -187,17 +187,17 @@ const le = /* @__PURE__ */ M({
       onClickItem: y,
       onKeydown: b
     } = O(r, c);
-    return (o, s) => (z(), I(e(P), {
+    return (o, s) => (M(), I(e(P), {
       ref_key: "target",
       ref: u,
-      class: C(e(n))
+      class: B(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, {
+          w(N, {
             id: o.$attrs.id,
             expanded: e(l),
-            class: C(e(w)),
+            class: B(e(C)),
             onBlur: e(g),
             onClick: e(v)
           }, {
@@ -210,13 +210,13 @@ const le = /* @__PURE__ */ M({
             _: 3
           }, 8, ["id", "expanded", "class", "onBlur", "onClick"])
         ]),
-        B(e(L), {
+        w(e(L), {
           id: o.$attrs.id,
           ref_key: "menu",
           ref: i,
           align: o.align,
           show: e(l),
-          class: C({ animated: e(m) }),
+          class: B({ animated: e(m) }),
           onBlur: e(g),
           onClick: e(y),
           onKeydown: j(e(b), ["tab"]),
@@ -232,7 +232,7 @@ const le = /* @__PURE__ */ M({
       _: 3
     }, 8, ["class"]));
   }
-}), ae = ["id", "aria-expanded"], se = /* @__PURE__ */ M({
+}), ae = ["id", "aria-expanded"], se = /* @__PURE__ */ z({
   __name: "BtnDropdownSplit",
   props: {
     active: { type: Boolean },
@@ -255,7 +255,7 @@ const le = /* @__PURE__ */ M({
       classes: n,
       expanded: l,
       menu: i,
-      target: w,
+      target: C,
       toggleClasses: m,
       triggerAnimation: $,
       onBlur: g,
@@ -263,15 +263,15 @@ const le = /* @__PURE__ */ M({
       onClickItem: y,
       onKeydown: b
     } = O(r, c);
-    return (o, s) => (z(), I(e(P), {
-      class: C([e(n), "btn-dropdown-split"])
+    return (o, s) => (M(), I(e(P), {
+      class: B([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, {
+          w(N, {
             id: o.$attrs.id,
             expanded: e(l),
-            class: C(e(u)),
+            class: B(e(u)),
             onClick: s[0] || (s[0] = (p) => c("click", p))
           }, {
             default: d(() => [
@@ -283,9 +283,9 @@ const le = /* @__PURE__ */ M({
             _: 3
           }, 8, ["id", "expanded", "class"])
         ]),
-        B(e(P), {
+        w(e(P), {
           ref_key: "target",
-          ref: w
+          ref: C
         }, {
           default: d(() => [
             a(o.$slots, "split", {}, () => [
@@ -294,19 +294,19 @@ const le = /* @__PURE__ */ M({
                 type: "button",
                 "aria-haspopup": "true",
                 "aria-expanded": e(l),
-                class: C(e(m)),
+                class: B(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), {
+            w(e(L), {
               ref_key: "menu",
               ref: i,
               align: o.align,
               show: e(l),
-              class: C({ animated: e($) }),
+              class: B({ animated: e($) }),
               onBlur: e(g),
               onClick: e(y),
               onKeydown: j(e(b), ["tab"]),
@@ -322,10 +322,10 @@ const le = /* @__PURE__ */ M({
           _: 3
         }, 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, {
+          w(N, {
             id: o.$attrs.id,
             expanded: e(l),
-            class: C(e(u)),
+            class: B(e(u)),
             onClick: s[4] || (s[4] = (p) => c("click", p))
           }, {
             default: d(() => [
@@ -341,16 +341,26 @@ const le = /* @__PURE__ */ M({
       _: 3
     }, 8, ["class"]));
   }
-}), pe = /* @__PURE__ */ M({
+}), pe = /* @__PURE__ */ z({
   __name: "BtnDropdown",
   props: {
+    active: { type: Boolean },
+    align: {},
+    buttonClass: {},
+    dropdown: { type: Boolean },
+    dropup: { type: Boolean },
+    dropleft: { type: Boolean },
+    dropright: { type: Boolean },
     label: {},
-    split: { type: Boolean }
+    offset: {},
+    size: {},
+    split: { type: Boolean },
+    variant: {}
   },
   emits: ["click"],
   setup(t, { emit: c }) {
     const r = t, u = x();
-    return (n, l) => (z(), I(F(n.split ? se : le), T(r, {
+    return (n, l) => (M(), I(F(n.split ? se : le), T(r, {
       class: "btn-dropdown",
       onClick: l[0] || (l[0] = (i) => c("click", i))
     }), _({

package/dist/btn-dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"btn-dropdown.js","sources":["../src/BtnDropdownAction.vue","../src/dropdown.ts","../src/BtnDropdownSingle.vue","../src/BtnDropdownSplit.vue","../src/BtnDropdown.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { defineComponent } from 'vue';\n\nexport default defineComponent({\n    props: {\n        expanded: {\n            type: Boolean,\n            default: false\n        },\n        id: {\n            type: String,\n            default: undefined\n        },\n        href: {\n            type: String,\n            default: undefined\n        },\n        to: {\n            type: [String, Object],\n            default: undefined\n        }\n    },\n    computed: {\n        is() {\n            if(this.to) {\n                return 'router-link';\n            }\n\n            if(this.href) {\n                return 'a';\n            }\n\n            return 'button';\n        },\n    }\n});\n</script>\n\n<template>\n    <Component\n        :is=\"is\"\n        :id=\"id\"\n        v-bind=\"to ? { to } : { href }\"\n        aria-haspopup=\"true\"\n        :aria-expanded=\"expanded\"\n        :type=\"is === 'button' ? 'button': undefined\">\n        <slot />\n    </Component>\n</template>","import { Instance, Placement, createPopper } from '@popperjs/core';\nimport { ComponentPublicInstance, computed, onBeforeMount, ref } from 'vue';\n\nexport type BtnDropdownProps = {\n    active?: boolean,\n    align?: 'left' | 'right',\n    buttonClass?: string|Record<string|undefined,boolean>,\n    dropdown?: boolean,\n    dropup?: boolean,\n    dropleft?: boolean,\n    dropright?: boolean,\n    label?: string,\n    offset?: number,\n    size?: string,\n    split?: boolean,\n    variant?: string,\n}\n\nexport type BtnDropdownEmits = {\n    (name: 'click', e: PointerEvent): void,\n    (name: 'click-toggle', e: PointerEvent): void\n}\n\nexport function useBtnDropdown<Props extends BtnDropdownProps, Emits extends BtnDropdownEmits>(props: Props, emit: Emits) {\n    const expanded = ref(false);\n    const triggerAnimation = ref(false);\n    const popper = ref<Instance>();\n    const target = ref<HTMLElement|ComponentPublicInstance>();\n    const menu = ref<HTMLElement|ComponentPublicInstance>();\n\n    const targetEl = computed(() => \n        target.value instanceof HTMLElement\n            ? target.value\n            : target.value.$el\n    );\n\n    const menuEl = computed(() => \n        menu.value instanceof HTMLElement\n            ? menu.value\n            : menu.value.$el\n    );\n\n    const classes = computed(() => ({\n        [props.size]: !!props.size,\n        \n        'dropdown': props.dropdown || !(props.dropright || props.dropleft || props.dropup),\n        'dropup': props.dropup,\n        'dropright': props.dropright,\n        'dropleft': props.dropleft,\n        // 'icon-only': !this.nav && !this.split && !!this.$slots.icon && !this.$slots.label,\n        // 'hide-caret': !this.caret,\n        'expanded': expanded.value,\n        // 'rotate-90': !this.nav && this.split && this.rotate && this.expanded,\n    }));\n\n    const actionClasses = computed(() => ({\n        // [props.size]: !!props.size,\n        [props.variant]: !!props.variant,\n        \n        ...buttonsClasses.value,\n    }));\n\n    const buttonsClasses = computed(() => {\n        if(typeof props.buttonClass === 'object') {\n            return { btn: true, ...props.buttonClass };\n        }\n\n        return {\n            btn: true,\n            [props.buttonClass]: true\n        }\n    });\n\n    const toggleClasses = computed(() => ({\n        'active': props.active,\n        'dropdown-toggle': true,\n        'dropdown-toggle-split': props.split,\n        // [props.size]: !!props.size,\n        [props.variant]: !!props.variant,\n        \n        ...buttonsClasses.value,\n\n        // toggleClasses() {\n        //     return Object.assign({\n        //         'active': this.active,\n        //         'btn': !this.nav,\n        //         'btn-block': !!this.block,\n        //         'nav-link': !!this.nav,\n        //         'rotate-90': !this.split && this.rotate && this.expanded,\n        //         'dropdown-toggle': true,\n        //         'dropdown-toggle-split': !this.nav && this.split,\n        //         [this.variant]: !this.nav && !!this.variant,\n        //         [this.size]: !!this.size,\n        //     }, typeof this.buttonClass === 'object' ? this.buttonClass : {\n        //         [this.buttonClass]: !!this.buttonClass\n        //     });\n        // }\n    }));\n\n    const placement = computed(() => {\n        if(props.dropup) {\n            return 'top';\n        }\n\n        if(props.dropleft) {\n            return 'left';\n        }\n\n        if(props.dropright) {\n            return 'right';\n        }\n\n        return 'bottom';\n    });\n    \n    const align = computed(() => {\n        if(props.align) {\n            return props.align === 'right' ? 'end' : 'start';\n        }\n\n        return 'start'\n    });\n    \n    function show() {\n        expanded.value = true;\n\n        if(!popper.value) {\n            popper.value = createPopper(targetEl.value, menuEl.value.querySelector('.dropdown-menu'), {\n                placement: `${placement.value}-${align.value}` as Placement,\n                onFirstUpdate: () => {\n                    triggerAnimation.value = true;\n                },\n                modifiers: [\n                    {\n                        name: 'offset',\n                        options: {\n                            offset: [0, props.offset ?? 5]\n                        },\n                    },\n                ]\n            });\n        }\n        else {\n            popper.value.update();\n        }\n    }\n\n    function hide() {\n        expanded.value = false;\n    }\n\n    function toggle() {\n        !expanded.value ? show() : hide();\n    }\n    \n    function queryFocusable() {\n        return menuEl.value && menuEl.value.querySelectorAll(\n            'label, input, select, textarea, [tabindex]:not([tabindex=\"-1\"])'\n        );\n    }\n\n    function isFocusable(element: HTMLElement) {\n        const nodes = queryFocusable();\n\n        for(const i in nodes) {\n            if(element === nodes[i]) {\n                return true;\n            }\n        }\n\n        return false;\n    }\n\n    function onBlur(e: any) {\n        if(menuEl.value && !menuEl.value.contains(e.relatedTarget) || !menuEl.value.contains(e.relatedTarget)) {\n            hide();\n        }\n    }\n\n    function onClickItem(e: any) {\n        if(!isFocusable(e.target)) {\n            hide();\n        }\n    }\n\n    function onClickToggle(e: PointerEvent) {\n        e.target.dispatchEvent(new Event('focus', e));\n            \n        emit('click-toggle', e);\n\n        if(!e.defaultPrevented) {\n            toggle();\n        }\n    }\n\n    function onKeydown(e: KeyboardEvent) {\n        if(targetEl.value.parentElement?.lastElementChild === e.target) {\n            hide();\n        }\n    }\n\n    onBeforeMount(() => {\n        popper.value && popper.value.destroy();\n    });\n\n    return {\n        actionClasses,\n        classes,\n        expanded,\n        menu,\n        target,\n        toggleClasses,\n        triggerAnimation,\n        hide,\n        show,\n        toggle,\n        onBlur,\n        onClickItem,\n        onClickToggle,\n        onKeydown\n    }\n}","<script setup lang=\"ts\">\nimport { BtnGroup } from '@vue-interface/btn-group';\nimport { DropdownMenu } from '@vue-interface/dropdown-menu';\nimport BtnDropdownAction from './BtnDropdownAction.vue';\nimport { BtnDropdownEmits, BtnDropdownProps, useBtnDropdown } from './dropdown.js';\n\nconst props = defineProps<BtnDropdownProps>();\nconst emit = defineEmits<BtnDropdownEmits>();\n\nconst {\n    target,\n    classes,\n    expanded,\n    menu,\n    toggleClasses,\n    triggerAnimation,\n    toggle,\n    onBlur,\n    onClickToggle,\n    onClickItem,\n    onKeydown\n} = useBtnDropdown(props, emit);\n</script>\n\n<template>\n    <BtnGroup\n        ref=\"target\"\n        :class=\"classes\">\n        <slot\n            name=\"button\"\n            v-bind=\"{ expanded, target, toggle, onBlur, onClickToggle, onClickItem, onKeydown }\">\n\n            <!-- :href=\"href\"\n                :to=\"to\" -->\n            <BtnDropdownAction\n                :id=\"($attrs.id as string)\"\n                :expanded=\"expanded\"\n                :class=\"toggleClasses\"\n                @blur=\"onBlur\"\n                @click=\"onClickToggle\">\n                <slot name=\"icon\" />\n                <slot name=\"label\">\n                    {{ label }}\n                </slot>\n            </BtnDropdownAction>\n        </slot>\n        <DropdownMenu\n            :id=\"$attrs.id\"\n            ref=\"menu\"\n            :align=\"align\"\n            :show=\"expanded\"\n            :class=\"{animated: triggerAnimation}\"\n            @blur=\"onBlur\"\n            @click=\"onClickItem\"\n            @keydown.tab=\"onKeydown\"\n            @mousedown.prevent=\"\">\n            <slot />\n        </DropdownMenu>\n    </BtnGroup>\n</template>","<script setup lang=\"ts\">\nimport { BtnGroup } from '@vue-interface/btn-group';\nimport { DropdownMenu } from '@vue-interface/dropdown-menu';\nimport BtnDropdownAction from './BtnDropdownAction.vue';\nimport { BtnDropdownEmits, BtnDropdownProps, useBtnDropdown } from './dropdown.js';\n\nconst props = defineProps<BtnDropdownProps>();\nconst emit = defineEmits<BtnDropdownEmits>();\n\nconst {\n    actionClasses,\n    classes,\n    expanded,\n    menu,\n    target,\n    toggleClasses,\n    triggerAnimation,\n    onBlur,\n    onClickToggle,\n    onClickItem,\n    onKeydown\n} = useBtnDropdown(props, emit);\n</script>\n\n<template>\n    <BtnGroup\n        :class=\"classes\"\n        class=\"btn-dropdown-split\">\n\n        <slot\n            v-if=\"!dropleft\"\n            v-bind=\"{ expanded, onBlur, onClickToggle, onClickItem, onKeydown }\"\n            name=\"button\">\n            <BtnDropdownAction\n                :id=\"($attrs.id as string)\"\n                :expanded=\"expanded\"\n                :class=\"actionClasses\"\n                @click=\"emit('click', $event)\">\n                <slot name=\"icon\" />\n                <slot name=\"label\">\n                    {{ label }}\n                </slot>\n            </BtnDropdownAction>\n        </slot>\n   \n        <BtnGroup ref=\"target\">\n            <slot\n                name=\"split\">\n                <button\n                    :id=\"($attrs.id as string)\"\n                    type=\"button\"\n                    aria-haspopup=\"true\"\n                    :aria-expanded=\"expanded\"\n                    :class=\"toggleClasses\"\n                    @blur=\"onBlur\"\n                    @click=\"onClickToggle\" />\n            </slot>\n            \n            <DropdownMenu\n                ref=\"menu\"\n                :align=\"align\"\n                :show=\"expanded\"\n                :class=\"{animated: triggerAnimation}\"\n                @blur=\"onBlur\"\n                @click=\"onClickItem\"\n                @keydown.tab=\"onKeydown\"\n                @mousedown.prevent=\"\">\n                <slot />\n            </DropdownMenu>\n        </BtnGroup>\n\n        <slot\n            v-if=\"dropleft\"\n            v-bind=\"{ expanded, onBlur, onClickToggle, onClickItem, onKeydown }\"\n            name=\"button\">\n            <BtnDropdownAction\n                :id=\"($attrs.id as string)\"\n                :expanded=\"expanded\"\n                :class=\"actionClasses\"\n                @click=\"emit('click', $event)\">\n                <slot name=\"icon\" />\n                <slot name=\"label\">\n                    {{ label }}\n                </slot>\n            </BtnDropdownAction>\n        </slot>\n    </BtnGroup>\n</template>","<script setup lang=\"ts\">\nimport { useSlots } from 'vue';\nimport BtnDropdownSingle from './BtnDropdownSingle.vue';\nimport BtnDropdownSplit from './BtnDropdownSplit.vue';\n\nexport type BtnDropdownProps = {\n    label?: string,\n    split?: boolean\n}\n\nconst props = defineProps<BtnDropdownProps>();\n\nconst emit = defineEmits<{\n    click: [e: Event]\n}>();\n\nconst slots = useSlots();\n</script>\n\n<template>\n    <Component\n        :is=\"split ? BtnDropdownSplit : BtnDropdownSingle\"\n        v-bind=\"props\"\n        class=\"btn-dropdown\"\n        @click=\"(e: Event) => emit('click', e)\">\n        <!-- @click-toggle=\"(...args: any[]) => $emit('click-toggle', ...args)\"\n        @dropdown=\"(...args: any[]) => $emit('dropdown', ...args)\"\n        @show=\"(...args: any[]) => $emit('show', ...args)\"\n        @hide=\"(...args: any[]) => $emit('hide', ...args)\"\n        @toggle=\"(...args: any[]) => $emit('toggle', ...args)\" -->\n        <template #icon>\n            <slot name=\"icon\" />\n        </template>\n        <template\n            v-if=\"label || slots.label\"\n            #label>\n            <slot name=\"label\">\n                {{ label }}\n            </slot>\n        </template>\n        <template #button=\"slot\">\n            <slot\n                name=\"button\"\n                v-bind=\"slot\" />\n        </template>\n        <template #split=\"slot\">\n            <slot\n                name=\"split\"\n                v-bind=\"slot\" />\n        </template>\n        <slot />\n    </Component>\n</template>"],"names":["_sfc_main$3","defineComponent","_sfc_render","_ctx","_cache","$props","$setup","$data","$options","_openBlock","_createBlock","_resolveDynamicComponent","_mergeProps","_withCtx","useBtnDropdown","props","emit","expanded","ref","triggerAnimation","popper","target","menu","targetEl","computed","menuEl","classes","actionClasses","buttonsClasses","toggleClasses","placement","align","show","createPopper","hide","toggle","queryFocusable","isFocusable","element","nodes","i","onBlur","e","onClickItem","onClickToggle","onKeydown","_a","onBeforeMount","slots","useSlots"],"mappings":"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"}
+{"version":3,"file":"btn-dropdown.js","sources":["../src/BtnDropdownAction.vue","../src/dropdown.ts","../src/BtnDropdownSingle.vue","../src/BtnDropdownSplit.vue","../src/BtnDropdown.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { defineComponent } from 'vue';\n\nexport default defineComponent({\n    props: {\n        expanded: {\n            type: Boolean,\n            default: false\n        },\n        id: {\n            type: String,\n            default: undefined\n        },\n        href: {\n            type: String,\n            default: undefined\n        },\n        to: {\n            type: [String, Object],\n            default: undefined\n        }\n    },\n    computed: {\n        is() {\n            if(this.to) {\n                return 'router-link';\n            }\n\n            if(this.href) {\n                return 'a';\n            }\n\n            return 'button';\n        },\n    }\n});\n</script>\n\n<template>\n    <Component\n        :is=\"is\"\n        :id=\"id\"\n        v-bind=\"to ? { to } : { href }\"\n        aria-haspopup=\"true\"\n        :aria-expanded=\"expanded\"\n        :type=\"is === 'button' ? 'button': undefined\">\n        <slot />\n    </Component>\n</template>","import { Instance, Placement, createPopper } from '@popperjs/core';\nimport { ComponentPublicInstance, computed, onBeforeMount, ref } from 'vue';\n\nexport type BtnDropdownProps = {\n    active?: boolean,\n    align?: 'left' | 'right',\n    buttonClass?: string|Record<string|undefined,boolean>,\n    dropdown?: boolean,\n    dropup?: boolean,\n    dropleft?: boolean,\n    dropright?: boolean,\n    label?: string,\n    offset?: number,\n    size?: string,\n    split?: boolean,\n    variant?: string,\n}\n\nexport type BtnDropdownEmits = {\n    (name: 'click', e: PointerEvent): void,\n    (name: 'click-toggle', e: PointerEvent): void\n}\n\nexport function useBtnDropdown<Props extends BtnDropdownProps, Emits extends BtnDropdownEmits>(props: Props, emit: Emits) {\n    const expanded = ref(false);\n    const triggerAnimation = ref(false);\n    const popper = ref<Instance>();\n    const target = ref<HTMLElement|ComponentPublicInstance>();\n    const menu = ref<HTMLElement|ComponentPublicInstance>();\n\n    const targetEl = computed(() => \n        target.value instanceof HTMLElement\n            ? target.value\n            : target.value.$el\n    );\n\n    const menuEl = computed(() => \n        menu.value instanceof HTMLElement\n            ? menu.value\n            : menu.value.$el\n    );\n\n    const classes = computed(() => ({\n        [props.size]: !!props.size,\n        \n        'dropdown': props.dropdown || !(props.dropright || props.dropleft || props.dropup),\n        'dropup': props.dropup,\n        'dropright': props.dropright,\n        'dropleft': props.dropleft,\n        // 'icon-only': !this.nav && !this.split && !!this.$slots.icon && !this.$slots.label,\n        // 'hide-caret': !this.caret,\n        'expanded': expanded.value,\n        // 'rotate-90': !this.nav && this.split && this.rotate && this.expanded,\n    }));\n\n    const actionClasses = computed(() => ({\n        // [props.size]: !!props.size,\n        [props.variant]: !!props.variant,\n        \n        ...buttonsClasses.value,\n    }));\n\n    const buttonsClasses = computed(() => {\n        if(typeof props.buttonClass === 'object') {\n            return { btn: true, ...props.buttonClass };\n        }\n\n        return {\n            btn: true,\n            [props.buttonClass]: !!props.buttonClass\n        }\n    });\n\n    const toggleClasses = computed(() => ({\n        'active': props.active,\n        'dropdown-toggle': true,\n        'dropdown-toggle-split': props.split,\n        // [props.size]: !!props.size,\n        [props.variant]: !!props.variant,\n        \n        ...buttonsClasses.value,\n\n        // toggleClasses() {\n        //     return Object.assign({\n        //         'active': this.active,\n        //         'btn': !this.nav,\n        //         'btn-block': !!this.block,\n        //         'nav-link': !!this.nav,\n        //         'rotate-90': !this.split && this.rotate && this.expanded,\n        //         'dropdown-toggle': true,\n        //         'dropdown-toggle-split': !this.nav && this.split,\n        //         [this.variant]: !this.nav && !!this.variant,\n        //         [this.size]: !!this.size,\n        //     }, typeof this.buttonClass === 'object' ? this.buttonClass : {\n        //         [this.buttonClass]: !!this.buttonClass\n        //     });\n        // }\n    }));\n\n    const placement = computed(() => {\n        if(props.dropup) {\n            return 'top';\n        }\n\n        if(props.dropleft) {\n            return 'left';\n        }\n\n        if(props.dropright) {\n            return 'right';\n        }\n\n        return 'bottom';\n    });\n    \n    const align = computed(() => {\n        if(props.align) {\n            return props.align === 'right' ? 'end' : 'start';\n        }\n\n        return 'start'\n    });\n    \n    function show() {\n        expanded.value = true;\n\n        if(!popper.value) {\n            popper.value = createPopper(targetEl.value, menuEl.value.querySelector('.dropdown-menu'), {\n                placement: `${placement.value}-${align.value}` as Placement,\n                onFirstUpdate: () => {\n                    triggerAnimation.value = true;\n                },\n                modifiers: [\n                    {\n                        name: 'offset',\n                        options: {\n                            offset: [0, props.offset ?? 5]\n                        },\n                    },\n                ]\n            });\n        }\n        else {\n            popper.value.update();\n        }\n    }\n\n    function hide() {\n        expanded.value = false;\n    }\n\n    function toggle() {\n        !expanded.value ? show() : hide();\n    }\n    \n    function queryFocusable() {\n        return menuEl.value && menuEl.value.querySelectorAll(\n            'label, input, select, textarea, [tabindex]:not([tabindex=\"-1\"])'\n        );\n    }\n\n    function isFocusable(element: HTMLElement) {\n        const nodes = queryFocusable();\n\n        for(const i in nodes) {\n            if(element === nodes[i]) {\n                return true;\n            }\n        }\n\n        return false;\n    }\n\n    function onBlur(e: any) {\n        if(menuEl.value && !menuEl.value.contains(e.relatedTarget) || !menuEl.value.contains(e.relatedTarget)) {\n            hide();\n        }\n    }\n\n    function onClickItem(e: any) {\n        if(!isFocusable(e.target)) {\n            hide();\n        }\n    }\n\n    function onClickToggle(e: PointerEvent) {\n        e.target.dispatchEvent(new Event('focus', e));\n            \n        emit('click-toggle', e);\n\n        if(!e.defaultPrevented) {\n            toggle();\n        }\n    }\n\n    function onKeydown(e: KeyboardEvent) {\n        if(targetEl.value.parentElement?.lastElementChild === e.target) {\n            hide();\n        }\n    }\n\n    onBeforeMount(() => {\n        popper.value && popper.value.destroy();\n    });\n\n    return {\n        actionClasses,\n        classes,\n        expanded,\n        menu,\n        target,\n        toggleClasses,\n        triggerAnimation,\n        hide,\n        show,\n        toggle,\n        onBlur,\n        onClickItem,\n        onClickToggle,\n        onKeydown\n    }\n}","<script setup lang=\"ts\">\nimport { BtnGroup } from '@vue-interface/btn-group';\nimport { DropdownMenu } from '@vue-interface/dropdown-menu';\nimport BtnDropdownAction from './BtnDropdownAction.vue';\nimport { BtnDropdownEmits, BtnDropdownProps, useBtnDropdown } from './dropdown.js';\n\nconst props = defineProps<BtnDropdownProps>();\nconst emit = defineEmits<BtnDropdownEmits>();\n\nconst {\n    target,\n    classes,\n    expanded,\n    menu,\n    toggleClasses,\n    triggerAnimation,\n    toggle,\n    onBlur,\n    onClickToggle,\n    onClickItem,\n    onKeydown\n} = useBtnDropdown(props, emit);\n</script>\n\n<template>\n    <BtnGroup\n        ref=\"target\"\n        :class=\"classes\">\n        <slot\n            name=\"button\"\n            v-bind=\"{ expanded, target, toggle, onBlur, onClickToggle, onClickItem, onKeydown }\">\n\n            <!-- :href=\"href\"\n                :to=\"to\" -->\n            <BtnDropdownAction\n                :id=\"($attrs.id as string)\"\n                :expanded=\"expanded\"\n                :class=\"toggleClasses\"\n                @blur=\"onBlur\"\n                @click=\"onClickToggle\">\n                <slot name=\"icon\" />\n                <slot name=\"label\">\n                    {{ label }}\n                </slot>\n            </BtnDropdownAction>\n        </slot>\n        <DropdownMenu\n            :id=\"$attrs.id\"\n            ref=\"menu\"\n            :align=\"align\"\n            :show=\"expanded\"\n            :class=\"{animated: triggerAnimation}\"\n            @blur=\"onBlur\"\n            @click=\"onClickItem\"\n            @keydown.tab=\"onKeydown\"\n            @mousedown.prevent=\"\">\n            <slot />\n        </DropdownMenu>\n    </BtnGroup>\n</template>","<script setup lang=\"ts\">\nimport { BtnGroup } from '@vue-interface/btn-group';\nimport { DropdownMenu } from '@vue-interface/dropdown-menu';\nimport BtnDropdownAction from './BtnDropdownAction.vue';\nimport { BtnDropdownEmits, BtnDropdownProps, useBtnDropdown } from './dropdown.js';\n\nconst props = defineProps<BtnDropdownProps>();\nconst emit = defineEmits<BtnDropdownEmits>();\n\nconst {\n    actionClasses,\n    classes,\n    expanded,\n    menu,\n    target,\n    toggleClasses,\n    triggerAnimation,\n    onBlur,\n    onClickToggle,\n    onClickItem,\n    onKeydown\n} = useBtnDropdown(props, emit);\n</script>\n\n<template>\n    <BtnGroup\n        :class=\"classes\"\n        class=\"btn-dropdown-split\">\n\n        <slot\n            v-if=\"!dropleft\"\n            v-bind=\"{ expanded, onBlur, onClickToggle, onClickItem, onKeydown }\"\n            name=\"button\">\n            <BtnDropdownAction\n                :id=\"($attrs.id as string)\"\n                :expanded=\"expanded\"\n                :class=\"actionClasses\"\n                @click=\"emit('click', $event)\">\n                <slot name=\"icon\" />\n                <slot name=\"label\">\n                    {{ label }}\n                </slot>\n            </BtnDropdownAction>\n        </slot>\n   \n        <BtnGroup ref=\"target\">\n            <slot\n                name=\"split\">\n                <button\n                    :id=\"($attrs.id as string)\"\n                    type=\"button\"\n                    aria-haspopup=\"true\"\n                    :aria-expanded=\"expanded\"\n                    :class=\"toggleClasses\"\n                    @blur=\"onBlur\"\n                    @click=\"onClickToggle\" />\n            </slot>\n            \n            <DropdownMenu\n                ref=\"menu\"\n                :align=\"align\"\n                :show=\"expanded\"\n                :class=\"{animated: triggerAnimation}\"\n                @blur=\"onBlur\"\n                @click=\"onClickItem\"\n                @keydown.tab=\"onKeydown\"\n                @mousedown.prevent=\"\">\n                <slot />\n            </DropdownMenu>\n        </BtnGroup>\n\n        <slot\n            v-if=\"dropleft\"\n            v-bind=\"{ expanded, onBlur, onClickToggle, onClickItem, onKeydown }\"\n            name=\"button\">\n            <BtnDropdownAction\n                :id=\"($attrs.id as string)\"\n                :expanded=\"expanded\"\n                :class=\"actionClasses\"\n                @click=\"emit('click', $event)\">\n                <slot name=\"icon\" />\n                <slot name=\"label\">\n                    {{ label }}\n                </slot>\n            </BtnDropdownAction>\n        </slot>\n    </BtnGroup>\n</template>","<script setup lang=\"ts\">\nimport { useSlots } from 'vue';\nimport BtnDropdownSingle from './BtnDropdownSingle.vue';\nimport BtnDropdownSplit from './BtnDropdownSplit.vue';\nimport { BtnDropdownProps } from './dropdown.js';\n\nconst props = defineProps<BtnDropdownProps>();\n\nconst emit = defineEmits<{\n    click: [e: Event]\n}>();\n\nconst slots = useSlots();\n</script>\n\n<template>\n    <Component\n        :is=\"split ? BtnDropdownSplit : BtnDropdownSingle\"\n        v-bind=\"props\"\n        class=\"btn-dropdown\"\n        @click=\"(e: Event) => emit('click', e)\">\n        <!-- @click-toggle=\"(...args: any[]) => $emit('click-toggle', ...args)\"\n        @dropdown=\"(...args: any[]) => $emit('dropdown', ...args)\"\n        @show=\"(...args: any[]) => $emit('show', ...args)\"\n        @hide=\"(...args: any[]) => $emit('hide', ...args)\"\n        @toggle=\"(...args: any[]) => $emit('toggle', ...args)\" -->\n        <template #icon>\n            <slot name=\"icon\" />\n        </template>\n        <template\n            v-if=\"label || slots.label\"\n            #label>\n            <slot name=\"label\">\n                {{ label }}\n            </slot>\n        </template>\n        <template #button=\"slot\">\n            <slot\n                name=\"button\"\n                v-bind=\"slot\" />\n        </template>\n        <template #split=\"slot\">\n            <slot\n                name=\"split\"\n                v-bind=\"slot\" />\n        </template>\n        <slot />\n    </Component>\n</template>"],"names":["_sfc_main$3","defineComponent","_sfc_render","_ctx","_cache","$props","$setup","$data","$options","_openBlock","_createBlock","_resolveDynamicComponent","_mergeProps","_withCtx","useBtnDropdown","props","emit","expanded","ref","triggerAnimation","popper","target","menu","targetEl","computed","menuEl","classes","actionClasses","buttonsClasses","toggleClasses","placement","align","show","createPopper","hide","toggle","queryFocusable","isFocusable","element","nodes","i","onBlur","e","onClickItem","onClickToggle","onKeydown","_a","onBeforeMount","slots","useSlots"],"mappings":"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"}

package/dist/btn-dropdown.umd.cjs

@@ -1,2 +1,2 @@
-(function(u,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("@vue-interface/btn-group"),require("@vue-interface/dropdown-menu"),require("@popperjs/core")):typeof define=="function"&&define.amd?define(["exports","vue","@vue-interface/btn-group","@vue-interface/dropdown-menu","@popperjs/core"],e):(u=typeof globalThis<"u"?globalThis:u||self,e(u.BtnDropdown={},u.Vue,u.VueInterfaceBtnGroup,u.VueInterfaceDropdownMenu,u.PopperjsCore))})(this,function(u,e,b,$,T){"use strict";const D=e.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"}}}),P=(n,p)=>{const a=n.__vccOpts||n;for(const[s,o]of p)a[s]=o;return a};function V(n,p,a,s,o,r){return e.openBlock(),e.createBlock(e.resolveDynamicComponent(n.is),e.mergeProps({id:n.id},n.to?{to:n.to}:{href:n.href},{"aria-haspopup":"true","aria-expanded":n.expanded,type:n.is==="button"?"button":void 0}),{default:e.withCtx(()=>[e.renderSlot(n.$slots,"default")]),_:3},16,["id","aria-expanded","type"])}const h=P(D,[["render",V]]);function S(n,p){const a=e.ref(!1),s=e.ref(!1),o=e.ref(),r=e.ref(),i=e.ref(),y=e.computed(()=>r.value instanceof HTMLElement?r.value:r.value.$el),g=e.computed(()=>i.value instanceof HTMLElement?i.value:i.value.$el),k=e.computed(()=>({[n.size]:!!n.size,dropdown:n.dropdown||!(n.dropright||n.dropleft||n.dropup),dropup:n.dropup,dropright:n.dropright,dropleft:n.dropleft,expanded:a.value})),c=e.computed(()=>({[n.variant]:!!n.variant,...m.value})),m=e.computed(()=>typeof n.buttonClass=="object"?{btn:!0,...n.buttonClass}:{btn:!0,[n.buttonClass]:!0}),C=e.computed(()=>({active:n.active,"dropdown-toggle":!0,"dropdown-toggle-split":n.split,[n.variant]:!!n.variant,...m.value})),w=e.computed(()=>n.dropup?"top":n.dropleft?"left":n.dropright?"right":"bottom"),t=e.computed(()=>n.align&&n.align==="right"?"end":"start");function l(){a.value=!0,o.value?o.value.update():o.value=T.createPopper(y.value,g.value.querySelector(".dropdown-menu"),{placement:`${w.value}-${t.value}`,onFirstUpdate:()=>{s.value=!0},modifiers:[{name:"offset",options:{offset:[0,n.offset??5]}}]})}function d(){a.value=!1}function z(){a.value?d():l()}function I(){return g.value&&g.value.querySelectorAll('label, input, select, textarea, [tabindex]:not([tabindex="-1"])')}function j(f){const B=I();for(const O in B)if(f===B[O])return!0;return!1}function q(f){(g.value&&!g.value.contains(f.relatedTarget)||!g.value.contains(f.relatedTarget))&&d()}function x(f){j(f.target)||d()}function A(f){f.target.dispatchEvent(new Event("focus",f)),p("click-toggle",f),f.defaultPrevented||z()}function F(f){var B;((B=y.value.parentElement)==null?void 0:B.lastElementChild)===f.target&&d()}return e.onBeforeMount(()=>{o.value&&o.value.destroy()}),{actionClasses:c,classes:k,expanded:a,menu:i,target:r,toggleClasses:C,triggerAnimation:s,hide:d,show:l,toggle:z,onBlur:q,onClickItem:x,onClickToggle:A,onKeydown:F}}const N=e.defineComponent({__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(n,{emit:p}){const a=n,{target:s,classes:o,expanded:r,menu:i,toggleClasses:y,triggerAnimation:g,toggle:k,onBlur:c,onClickToggle:m,onClickItem:C,onKeydown:w}=S(a,p);return(t,l)=>(e.openBlock(),e.createBlock(e.unref(b.BtnGroup),{ref_key:"target",ref:s,class:e.normalizeClass(e.unref(o))},{default:e.withCtx(()=>[e.renderSlot(t.$slots,"button",e.normalizeProps(e.guardReactiveProps({expanded:e.unref(r),target:e.unref(s),toggle:e.unref(k),onBlur:e.unref(c),onClickToggle:e.unref(m),onClickItem:e.unref(C),onKeydown:e.unref(w)})),()=>[e.createVNode(h,{id:t.$attrs.id,expanded:e.unref(r),class:e.normalizeClass(e.unref(y)),onBlur:e.unref(c),onClick:e.unref(m)},{default:e.withCtx(()=>[e.renderSlot(t.$slots,"icon"),e.renderSlot(t.$slots,"label",{},()=>[e.createTextVNode(e.toDisplayString(t.label),1)])]),_:3},8,["id","expanded","class","onBlur","onClick"])]),e.createVNode(e.unref($.DropdownMenu),{id:t.$attrs.id,ref_key:"menu",ref:i,align:t.align,show:e.unref(r),class:e.normalizeClass({animated:e.unref(g)}),onBlur:e.unref(c),onClick:e.unref(C),onKeydown:e.withKeys(e.unref(w),["tab"]),onMousedown:l[0]||(l[0]=e.withModifiers(()=>{},["prevent"]))},{default:e.withCtx(()=>[e.renderSlot(t.$slots,"default")]),_:3},8,["id","align","show","class","onBlur","onClick","onKeydown"])]),_:3},8,["class"]))}}),K=["id","aria-expanded"],M=e.defineComponent({__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(n,{emit:p}){const a=n,{actionClasses:s,classes:o,expanded:r,menu:i,target:y,toggleClasses:g,triggerAnimation:k,onBlur:c,onClickToggle:m,onClickItem:C,onKeydown:w}=S(a,p);return(t,l)=>(e.openBlock(),e.createBlock(e.unref(b.BtnGroup),{class:e.normalizeClass([e.unref(o),"btn-dropdown-split"])},{default:e.withCtx(()=>[t.dropleft?e.createCommentVNode("",!0):e.renderSlot(t.$slots,"button",e.normalizeProps(e.mergeProps({key:0},{expanded:e.unref(r),onBlur:e.unref(c),onClickToggle:e.unref(m),onClickItem:e.unref(C),onKeydown:e.unref(w)})),()=>[e.createVNode(h,{id:t.$attrs.id,expanded:e.unref(r),class:e.normalizeClass(e.unref(s)),onClick:l[0]||(l[0]=d=>p("click",d))},{default:e.withCtx(()=>[e.renderSlot(t.$slots,"icon"),e.renderSlot(t.$slots,"label",{},()=>[e.createTextVNode(e.toDisplayString(t.label),1)])]),_:3},8,["id","expanded","class"])]),e.createVNode(e.unref(b.BtnGroup),{ref_key:"target",ref:y},{default:e.withCtx(()=>[e.renderSlot(t.$slots,"split",{},()=>[e.createElementVNode("button",{id:t.$attrs.id,type:"button","aria-haspopup":"true","aria-expanded":e.unref(r),class:e.normalizeClass(e.unref(g)),onBlur:l[1]||(l[1]=(...d)=>e.unref(c)&&e.unref(c)(...d)),onClick:l[2]||(l[2]=(...d)=>e.unref(m)&&e.unref(m)(...d))},null,42,K)]),e.createVNode(e.unref($.DropdownMenu),{ref_key:"menu",ref:i,align:t.align,show:e.unref(r),class:e.normalizeClass({animated:e.unref(k)}),onBlur:e.unref(c),onClick:e.unref(C),onKeydown:e.withKeys(e.unref(w),["tab"]),onMousedown:l[3]||(l[3]=e.withModifiers(()=>{},["prevent"]))},{default:e.withCtx(()=>[e.renderSlot(t.$slots,"default")]),_:3},8,["align","show","class","onBlur","onClick","onKeydown"])]),_:3},512),t.dropleft?e.renderSlot(t.$slots,"button",e.normalizeProps(e.mergeProps({key:1},{expanded:e.unref(r),onBlur:e.unref(c),onClickToggle:e.unref(m),onClickItem:e.unref(C),onKeydown:e.unref(w)})),()=>[e.createVNode(h,{id:t.$attrs.id,expanded:e.unref(r),class:e.normalizeClass(e.unref(s)),onClick:l[4]||(l[4]=d=>p("click",d))},{default:e.withCtx(()=>[e.renderSlot(t.$slots,"icon"),e.renderSlot(t.$slots,"label",{},()=>[e.createTextVNode(e.toDisplayString(t.label),1)])]),_:3},8,["id","expanded","class"])]):e.createCommentVNode("",!0)]),_:3},8,["class"]))}}),E=e.defineComponent({__name:"BtnDropdown",props:{label:{},split:{type:Boolean}},emits:["click"],setup(n,{emit:p}){const a=n,s=e.useSlots();return(o,r)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(o.split?M:N),e.mergeProps(a,{class:"btn-dropdown",onClick:r[0]||(r[0]=i=>p("click",i))}),e.createSlots({icon:e.withCtx(()=>[e.renderSlot(o.$slots,"icon")]),button:e.withCtx(i=>[e.renderSlot(o.$slots,"button",e.normalizeProps(e.guardReactiveProps(i)))]),split:e.withCtx(i=>[e.renderSlot(o.$slots,"split",e.normalizeProps(e.guardReactiveProps(i)))]),default:e.withCtx(()=>[e.renderSlot(o.$slots,"default")]),_:2},[o.label||e.unref(s).label?{name:"label",fn:e.withCtx(()=>[e.renderSlot(o.$slots,"label",{},()=>[e.createTextVNode(e.toDisplayString(o.label),1)])]),key:"0"}:void 0]),1040))}});u.BtnDropdown=E,Object.defineProperty(u,Symbol.toStringTag,{value:"Module"})});
+(function(u,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("@vue-interface/btn-group"),require("@vue-interface/dropdown-menu"),require("@popperjs/core")):typeof define=="function"&&define.amd?define(["exports","vue","@vue-interface/btn-group","@vue-interface/dropdown-menu","@popperjs/core"],e):(u=typeof globalThis<"u"?globalThis:u||self,e(u.BtnDropdown={},u.Vue,u.VueInterfaceBtnGroup,u.VueInterfaceDropdownMenu,u.PopperjsCore))})(this,function(u,e,b,$,T){"use strict";const D=e.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"}}}),P=(t,p)=>{const a=t.__vccOpts||t;for(const[s,o]of p)a[s]=o;return a};function V(t,p,a,s,o,r){return e.openBlock(),e.createBlock(e.resolveDynamicComponent(t.is),e.mergeProps({id:t.id},t.to?{to:t.to}:{href:t.href},{"aria-haspopup":"true","aria-expanded":t.expanded,type:t.is==="button"?"button":void 0}),{default:e.withCtx(()=>[e.renderSlot(t.$slots,"default")]),_:3},16,["id","aria-expanded","type"])}const h=P(D,[["render",V]]);function S(t,p){const a=e.ref(!1),s=e.ref(!1),o=e.ref(),r=e.ref(),i=e.ref(),w=e.computed(()=>r.value instanceof HTMLElement?r.value:r.value.$el),g=e.computed(()=>i.value instanceof HTMLElement?i.value:i.value.$el),B=e.computed(()=>({[t.size]:!!t.size,dropdown:t.dropdown||!(t.dropright||t.dropleft||t.dropup),dropup:t.dropup,dropright:t.dropright,dropleft:t.dropleft,expanded:a.value})),c=e.computed(()=>({[t.variant]:!!t.variant,...m.value})),m=e.computed(()=>typeof t.buttonClass=="object"?{btn:!0,...t.buttonClass}:{btn:!0,[t.buttonClass]:!!t.buttonClass}),C=e.computed(()=>({active:t.active,"dropdown-toggle":!0,"dropdown-toggle-split":t.split,[t.variant]:!!t.variant,...m.value})),y=e.computed(()=>t.dropup?"top":t.dropleft?"left":t.dropright?"right":"bottom"),n=e.computed(()=>t.align&&t.align==="right"?"end":"start");function l(){a.value=!0,o.value?o.value.update():o.value=T.createPopper(w.value,g.value.querySelector(".dropdown-menu"),{placement:`${y.value}-${n.value}`,onFirstUpdate:()=>{s.value=!0},modifiers:[{name:"offset",options:{offset:[0,t.offset??5]}}]})}function d(){a.value=!1}function z(){a.value?d():l()}function I(){return g.value&&g.value.querySelectorAll('label, input, select, textarea, [tabindex]:not([tabindex="-1"])')}function j(f){const k=I();for(const O in k)if(f===k[O])return!0;return!1}function q(f){(g.value&&!g.value.contains(f.relatedTarget)||!g.value.contains(f.relatedTarget))&&d()}function x(f){j(f.target)||d()}function A(f){f.target.dispatchEvent(new Event("focus",f)),p("click-toggle",f),f.defaultPrevented||z()}function F(f){var k;((k=w.value.parentElement)==null?void 0:k.lastElementChild)===f.target&&d()}return e.onBeforeMount(()=>{o.value&&o.value.destroy()}),{actionClasses:c,classes:B,expanded:a,menu:i,target:r,toggleClasses:C,triggerAnimation:s,hide:d,show:l,toggle:z,onBlur:q,onClickItem:x,onClickToggle:A,onKeydown:F}}const N=e.defineComponent({__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:p}){const a=t,{target:s,classes:o,expanded:r,menu:i,toggleClasses:w,triggerAnimation:g,toggle:B,onBlur:c,onClickToggle:m,onClickItem:C,onKeydown:y}=S(a,p);return(n,l)=>(e.openBlock(),e.createBlock(e.unref(b.BtnGroup),{ref_key:"target",ref:s,class:e.normalizeClass(e.unref(o))},{default:e.withCtx(()=>[e.renderSlot(n.$slots,"button",e.normalizeProps(e.guardReactiveProps({expanded:e.unref(r),target:e.unref(s),toggle:e.unref(B),onBlur:e.unref(c),onClickToggle:e.unref(m),onClickItem:e.unref(C),onKeydown:e.unref(y)})),()=>[e.createVNode(h,{id:n.$attrs.id,expanded:e.unref(r),class:e.normalizeClass(e.unref(w)),onBlur:e.unref(c),onClick:e.unref(m)},{default:e.withCtx(()=>[e.renderSlot(n.$slots,"icon"),e.renderSlot(n.$slots,"label",{},()=>[e.createTextVNode(e.toDisplayString(n.label),1)])]),_:3},8,["id","expanded","class","onBlur","onClick"])]),e.createVNode(e.unref($.DropdownMenu),{id:n.$attrs.id,ref_key:"menu",ref:i,align:n.align,show:e.unref(r),class:e.normalizeClass({animated:e.unref(g)}),onBlur:e.unref(c),onClick:e.unref(C),onKeydown:e.withKeys(e.unref(y),["tab"]),onMousedown:l[0]||(l[0]=e.withModifiers(()=>{},["prevent"]))},{default:e.withCtx(()=>[e.renderSlot(n.$slots,"default")]),_:3},8,["id","align","show","class","onBlur","onClick","onKeydown"])]),_:3},8,["class"]))}}),K=["id","aria-expanded"],M=e.defineComponent({__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:p}){const a=t,{actionClasses:s,classes:o,expanded:r,menu:i,target:w,toggleClasses:g,triggerAnimation:B,onBlur:c,onClickToggle:m,onClickItem:C,onKeydown:y}=S(a,p);return(n,l)=>(e.openBlock(),e.createBlock(e.unref(b.BtnGroup),{class:e.normalizeClass([e.unref(o),"btn-dropdown-split"])},{default:e.withCtx(()=>[n.dropleft?e.createCommentVNode("",!0):e.renderSlot(n.$slots,"button",e.normalizeProps(e.mergeProps({key:0},{expanded:e.unref(r),onBlur:e.unref(c),onClickToggle:e.unref(m),onClickItem:e.unref(C),onKeydown:e.unref(y)})),()=>[e.createVNode(h,{id:n.$attrs.id,expanded:e.unref(r),class:e.normalizeClass(e.unref(s)),onClick:l[0]||(l[0]=d=>p("click",d))},{default:e.withCtx(()=>[e.renderSlot(n.$slots,"icon"),e.renderSlot(n.$slots,"label",{},()=>[e.createTextVNode(e.toDisplayString(n.label),1)])]),_:3},8,["id","expanded","class"])]),e.createVNode(e.unref(b.BtnGroup),{ref_key:"target",ref:w},{default:e.withCtx(()=>[e.renderSlot(n.$slots,"split",{},()=>[e.createElementVNode("button",{id:n.$attrs.id,type:"button","aria-haspopup":"true","aria-expanded":e.unref(r),class:e.normalizeClass(e.unref(g)),onBlur:l[1]||(l[1]=(...d)=>e.unref(c)&&e.unref(c)(...d)),onClick:l[2]||(l[2]=(...d)=>e.unref(m)&&e.unref(m)(...d))},null,42,K)]),e.createVNode(e.unref($.DropdownMenu),{ref_key:"menu",ref:i,align:n.align,show:e.unref(r),class:e.normalizeClass({animated:e.unref(B)}),onBlur:e.unref(c),onClick:e.unref(C),onKeydown:e.withKeys(e.unref(y),["tab"]),onMousedown:l[3]||(l[3]=e.withModifiers(()=>{},["prevent"]))},{default:e.withCtx(()=>[e.renderSlot(n.$slots,"default")]),_:3},8,["align","show","class","onBlur","onClick","onKeydown"])]),_:3},512),n.dropleft?e.renderSlot(n.$slots,"button",e.normalizeProps(e.mergeProps({key:1},{expanded:e.unref(r),onBlur:e.unref(c),onClickToggle:e.unref(m),onClickItem:e.unref(C),onKeydown:e.unref(y)})),()=>[e.createVNode(h,{id:n.$attrs.id,expanded:e.unref(r),class:e.normalizeClass(e.unref(s)),onClick:l[4]||(l[4]=d=>p("click",d))},{default:e.withCtx(()=>[e.renderSlot(n.$slots,"icon"),e.renderSlot(n.$slots,"label",{},()=>[e.createTextVNode(e.toDisplayString(n.label),1)])]),_:3},8,["id","expanded","class"])]):e.createCommentVNode("",!0)]),_:3},8,["class"]))}}),E=e.defineComponent({__name:"BtnDropdown",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"],setup(t,{emit:p}){const a=t,s=e.useSlots();return(o,r)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(o.split?M:N),e.mergeProps(a,{class:"btn-dropdown",onClick:r[0]||(r[0]=i=>p("click",i))}),e.createSlots({icon:e.withCtx(()=>[e.renderSlot(o.$slots,"icon")]),button:e.withCtx(i=>[e.renderSlot(o.$slots,"button",e.normalizeProps(e.guardReactiveProps(i)))]),split:e.withCtx(i=>[e.renderSlot(o.$slots,"split",e.normalizeProps(e.guardReactiveProps(i)))]),default:e.withCtx(()=>[e.renderSlot(o.$slots,"default")]),_:2},[o.label||e.unref(s).label?{name:"label",fn:e.withCtx(()=>[e.renderSlot(o.$slots,"label",{},()=>[e.createTextVNode(e.toDisplayString(o.label),1)])]),key:"0"}:void 0]),1040))}});u.BtnDropdown=E,Object.defineProperty(u,Symbol.toStringTag,{value:"Module"})});
 //# sourceMappingURL=btn-dropdown.umd.cjs.map

package/dist/btn-dropdown.umd.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"btn-dropdown.umd.cjs","sources":["../src/BtnDropdownAction.vue","../src/dropdown.ts","../src/BtnDropdownSingle.vue","../src/BtnDropdownSplit.vue","../src/BtnDropdown.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { defineComponent } from 'vue';\n\nexport default defineComponent({\n    props: {\n        expanded: {\n            type: Boolean,\n            default: false\n        },\n        id: {\n            type: String,\n            default: undefined\n        },\n        href: {\n            type: String,\n            default: undefined\n        },\n        to: {\n            type: [String, Object],\n            default: undefined\n        }\n    },\n    computed: {\n        is() {\n            if(this.to) {\n                return 'router-link';\n            }\n\n            if(this.href) {\n                return 'a';\n            }\n\n            return 'button';\n        },\n    }\n});\n</script>\n\n<template>\n    <Component\n        :is=\"is\"\n        :id=\"id\"\n        v-bind=\"to ? { to } : { href }\"\n        aria-haspopup=\"true\"\n        :aria-expanded=\"expanded\"\n        :type=\"is === 'button' ? 'button': undefined\">\n        <slot />\n    </Component>\n</template>","import { Instance, Placement, createPopper } from '@popperjs/core';\nimport { ComponentPublicInstance, computed, onBeforeMount, ref } from 'vue';\n\nexport type BtnDropdownProps = {\n    active?: boolean,\n    align?: 'left' | 'right',\n    buttonClass?: string|Record<string|undefined,boolean>,\n    dropdown?: boolean,\n    dropup?: boolean,\n    dropleft?: boolean,\n    dropright?: boolean,\n    label?: string,\n    offset?: number,\n    size?: string,\n    split?: boolean,\n    variant?: string,\n}\n\nexport type BtnDropdownEmits = {\n    (name: 'click', e: PointerEvent): void,\n    (name: 'click-toggle', e: PointerEvent): void\n}\n\nexport function useBtnDropdown<Props extends BtnDropdownProps, Emits extends BtnDropdownEmits>(props: Props, emit: Emits) {\n    const expanded = ref(false);\n    const triggerAnimation = ref(false);\n    const popper = ref<Instance>();\n    const target = ref<HTMLElement|ComponentPublicInstance>();\n    const menu = ref<HTMLElement|ComponentPublicInstance>();\n\n    const targetEl = computed(() => \n        target.value instanceof HTMLElement\n            ? target.value\n            : target.value.$el\n    );\n\n    const menuEl = computed(() => \n        menu.value instanceof HTMLElement\n            ? menu.value\n            : menu.value.$el\n    );\n\n    const classes = computed(() => ({\n        [props.size]: !!props.size,\n        \n        'dropdown': props.dropdown || !(props.dropright || props.dropleft || props.dropup),\n        'dropup': props.dropup,\n        'dropright': props.dropright,\n        'dropleft': props.dropleft,\n        // 'icon-only': !this.nav && !this.split && !!this.$slots.icon && !this.$slots.label,\n        // 'hide-caret': !this.caret,\n        'expanded': expanded.value,\n        // 'rotate-90': !this.nav && this.split && this.rotate && this.expanded,\n    }));\n\n    const actionClasses = computed(() => ({\n        // [props.size]: !!props.size,\n        [props.variant]: !!props.variant,\n        \n        ...buttonsClasses.value,\n    }));\n\n    const buttonsClasses = computed(() => {\n        if(typeof props.buttonClass === 'object') {\n            return { btn: true, ...props.buttonClass };\n        }\n\n        return {\n            btn: true,\n            [props.buttonClass]: true\n        }\n    });\n\n    const toggleClasses = computed(() => ({\n        'active': props.active,\n        'dropdown-toggle': true,\n        'dropdown-toggle-split': props.split,\n        // [props.size]: !!props.size,\n        [props.variant]: !!props.variant,\n        \n        ...buttonsClasses.value,\n\n        // toggleClasses() {\n        //     return Object.assign({\n        //         'active': this.active,\n        //         'btn': !this.nav,\n        //         'btn-block': !!this.block,\n        //         'nav-link': !!this.nav,\n        //         'rotate-90': !this.split && this.rotate && this.expanded,\n        //         'dropdown-toggle': true,\n        //         'dropdown-toggle-split': !this.nav && this.split,\n        //         [this.variant]: !this.nav && !!this.variant,\n        //         [this.size]: !!this.size,\n        //     }, typeof this.buttonClass === 'object' ? this.buttonClass : {\n        //         [this.buttonClass]: !!this.buttonClass\n        //     });\n        // }\n    }));\n\n    const placement = computed(() => {\n        if(props.dropup) {\n            return 'top';\n        }\n\n        if(props.dropleft) {\n            return 'left';\n        }\n\n        if(props.dropright) {\n            return 'right';\n        }\n\n        return 'bottom';\n    });\n    \n    const align = computed(() => {\n        if(props.align) {\n            return props.align === 'right' ? 'end' : 'start';\n        }\n\n        return 'start'\n    });\n    \n    function show() {\n        expanded.value = true;\n\n        if(!popper.value) {\n            popper.value = createPopper(targetEl.value, menuEl.value.querySelector('.dropdown-menu'), {\n                placement: `${placement.value}-${align.value}` as Placement,\n                onFirstUpdate: () => {\n                    triggerAnimation.value = true;\n                },\n                modifiers: [\n                    {\n                        name: 'offset',\n                        options: {\n                            offset: [0, props.offset ?? 5]\n                        },\n                    },\n                ]\n            });\n        }\n        else {\n            popper.value.update();\n        }\n    }\n\n    function hide() {\n        expanded.value = false;\n    }\n\n    function toggle() {\n        !expanded.value ? show() : hide();\n    }\n    \n    function queryFocusable() {\n        return menuEl.value && menuEl.value.querySelectorAll(\n            'label, input, select, textarea, [tabindex]:not([tabindex=\"-1\"])'\n        );\n    }\n\n    function isFocusable(element: HTMLElement) {\n        const nodes = queryFocusable();\n\n        for(const i in nodes) {\n            if(element === nodes[i]) {\n                return true;\n            }\n        }\n\n        return false;\n    }\n\n    function onBlur(e: any) {\n        if(menuEl.value && !menuEl.value.contains(e.relatedTarget) || !menuEl.value.contains(e.relatedTarget)) {\n            hide();\n        }\n    }\n\n    function onClickItem(e: any) {\n        if(!isFocusable(e.target)) {\n            hide();\n        }\n    }\n\n    function onClickToggle(e: PointerEvent) {\n        e.target.dispatchEvent(new Event('focus', e));\n            \n        emit('click-toggle', e);\n\n        if(!e.defaultPrevented) {\n            toggle();\n        }\n    }\n\n    function onKeydown(e: KeyboardEvent) {\n        if(targetEl.value.parentElement?.lastElementChild === e.target) {\n            hide();\n        }\n    }\n\n    onBeforeMount(() => {\n        popper.value && popper.value.destroy();\n    });\n\n    return {\n        actionClasses,\n        classes,\n        expanded,\n        menu,\n        target,\n        toggleClasses,\n        triggerAnimation,\n        hide,\n        show,\n        toggle,\n        onBlur,\n        onClickItem,\n        onClickToggle,\n        onKeydown\n    }\n}","<script setup lang=\"ts\">\nimport { BtnGroup } from '@vue-interface/btn-group';\nimport { DropdownMenu } from '@vue-interface/dropdown-menu';\nimport BtnDropdownAction from './BtnDropdownAction.vue';\nimport { BtnDropdownEmits, BtnDropdownProps, useBtnDropdown } from './dropdown.js';\n\nconst props = defineProps<BtnDropdownProps>();\nconst emit = defineEmits<BtnDropdownEmits>();\n\nconst {\n    target,\n    classes,\n    expanded,\n    menu,\n    toggleClasses,\n    triggerAnimation,\n    toggle,\n    onBlur,\n    onClickToggle,\n    onClickItem,\n    onKeydown\n} = useBtnDropdown(props, emit);\n</script>\n\n<template>\n    <BtnGroup\n        ref=\"target\"\n        :class=\"classes\">\n        <slot\n            name=\"button\"\n            v-bind=\"{ expanded, target, toggle, onBlur, onClickToggle, onClickItem, onKeydown }\">\n\n            <!-- :href=\"href\"\n                :to=\"to\" -->\n            <BtnDropdownAction\n                :id=\"($attrs.id as string)\"\n                :expanded=\"expanded\"\n                :class=\"toggleClasses\"\n                @blur=\"onBlur\"\n                @click=\"onClickToggle\">\n                <slot name=\"icon\" />\n                <slot name=\"label\">\n                    {{ label }}\n                </slot>\n            </BtnDropdownAction>\n        </slot>\n        <DropdownMenu\n            :id=\"$attrs.id\"\n            ref=\"menu\"\n            :align=\"align\"\n            :show=\"expanded\"\n            :class=\"{animated: triggerAnimation}\"\n            @blur=\"onBlur\"\n            @click=\"onClickItem\"\n            @keydown.tab=\"onKeydown\"\n            @mousedown.prevent=\"\">\n            <slot />\n        </DropdownMenu>\n    </BtnGroup>\n</template>","<script setup lang=\"ts\">\nimport { BtnGroup } from '@vue-interface/btn-group';\nimport { DropdownMenu } from '@vue-interface/dropdown-menu';\nimport BtnDropdownAction from './BtnDropdownAction.vue';\nimport { BtnDropdownEmits, BtnDropdownProps, useBtnDropdown } from './dropdown.js';\n\nconst props = defineProps<BtnDropdownProps>();\nconst emit = defineEmits<BtnDropdownEmits>();\n\nconst {\n    actionClasses,\n    classes,\n    expanded,\n    menu,\n    target,\n    toggleClasses,\n    triggerAnimation,\n    onBlur,\n    onClickToggle,\n    onClickItem,\n    onKeydown\n} = useBtnDropdown(props, emit);\n</script>\n\n<template>\n    <BtnGroup\n        :class=\"classes\"\n        class=\"btn-dropdown-split\">\n\n        <slot\n            v-if=\"!dropleft\"\n            v-bind=\"{ expanded, onBlur, onClickToggle, onClickItem, onKeydown }\"\n            name=\"button\">\n            <BtnDropdownAction\n                :id=\"($attrs.id as string)\"\n                :expanded=\"expanded\"\n                :class=\"actionClasses\"\n                @click=\"emit('click', $event)\">\n                <slot name=\"icon\" />\n                <slot name=\"label\">\n                    {{ label }}\n                </slot>\n            </BtnDropdownAction>\n        </slot>\n   \n        <BtnGroup ref=\"target\">\n            <slot\n                name=\"split\">\n                <button\n                    :id=\"($attrs.id as string)\"\n                    type=\"button\"\n                    aria-haspopup=\"true\"\n                    :aria-expanded=\"expanded\"\n                    :class=\"toggleClasses\"\n                    @blur=\"onBlur\"\n                    @click=\"onClickToggle\" />\n            </slot>\n            \n            <DropdownMenu\n                ref=\"menu\"\n                :align=\"align\"\n                :show=\"expanded\"\n                :class=\"{animated: triggerAnimation}\"\n                @blur=\"onBlur\"\n                @click=\"onClickItem\"\n                @keydown.tab=\"onKeydown\"\n                @mousedown.prevent=\"\">\n                <slot />\n            </DropdownMenu>\n        </BtnGroup>\n\n        <slot\n            v-if=\"dropleft\"\n            v-bind=\"{ expanded, onBlur, onClickToggle, onClickItem, onKeydown }\"\n            name=\"button\">\n            <BtnDropdownAction\n                :id=\"($attrs.id as string)\"\n                :expanded=\"expanded\"\n                :class=\"actionClasses\"\n                @click=\"emit('click', $event)\">\n                <slot name=\"icon\" />\n                <slot name=\"label\">\n                    {{ label }}\n                </slot>\n            </BtnDropdownAction>\n        </slot>\n    </BtnGroup>\n</template>","<script setup lang=\"ts\">\nimport { useSlots } from 'vue';\nimport BtnDropdownSingle from './BtnDropdownSingle.vue';\nimport BtnDropdownSplit from './BtnDropdownSplit.vue';\n\nexport type BtnDropdownProps = {\n    label?: string,\n    split?: boolean\n}\n\nconst props = defineProps<BtnDropdownProps>();\n\nconst emit = defineEmits<{\n    click: [e: Event]\n}>();\n\nconst slots = useSlots();\n</script>\n\n<template>\n    <Component\n        :is=\"split ? BtnDropdownSplit : BtnDropdownSingle\"\n        v-bind=\"props\"\n        class=\"btn-dropdown\"\n        @click=\"(e: Event) => emit('click', e)\">\n        <!-- @click-toggle=\"(...args: any[]) => $emit('click-toggle', ...args)\"\n        @dropdown=\"(...args: any[]) => $emit('dropdown', ...args)\"\n        @show=\"(...args: any[]) => $emit('show', ...args)\"\n        @hide=\"(...args: any[]) => $emit('hide', ...args)\"\n        @toggle=\"(...args: any[]) => $emit('toggle', ...args)\" -->\n        <template #icon>\n            <slot name=\"icon\" />\n        </template>\n        <template\n            v-if=\"label || slots.label\"\n            #label>\n            <slot name=\"label\">\n                {{ label }}\n            </slot>\n        </template>\n        <template #button=\"slot\">\n            <slot\n                name=\"button\"\n                v-bind=\"slot\" />\n        </template>\n        <template #split=\"slot\">\n            <slot\n                name=\"split\"\n                v-bind=\"slot\" />\n        </template>\n        <slot />\n    </Component>\n</template>"],"names":["_sfc_main$3","defineComponent","_sfc_render","_ctx","_cache","$props","$setup","$data","$options","_openBlock","_createBlock","_resolveDynamicComponent","_mergeProps","_withCtx","useBtnDropdown","props","emit","expanded","ref","triggerAnimation","popper","target","menu","targetEl","computed","menuEl","classes","actionClasses","buttonsClasses","toggleClasses","placement","align","show","createPopper","hide","toggle","queryFocusable","isFocusable","element","nodes","i","onBlur","e","onClickItem","onClickToggle","onKeydown","_a","onBeforeMount","slots","useSlots"],"mappings":"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"}
+{"version":3,"file":"btn-dropdown.umd.cjs","sources":["../src/BtnDropdownAction.vue","../src/dropdown.ts","../src/BtnDropdownSingle.vue","../src/BtnDropdownSplit.vue","../src/BtnDropdown.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { defineComponent } from 'vue';\n\nexport default defineComponent({\n    props: {\n        expanded: {\n            type: Boolean,\n            default: false\n        },\n        id: {\n            type: String,\n            default: undefined\n        },\n        href: {\n            type: String,\n            default: undefined\n        },\n        to: {\n            type: [String, Object],\n            default: undefined\n        }\n    },\n    computed: {\n        is() {\n            if(this.to) {\n                return 'router-link';\n            }\n\n            if(this.href) {\n                return 'a';\n            }\n\n            return 'button';\n        },\n    }\n});\n</script>\n\n<template>\n    <Component\n        :is=\"is\"\n        :id=\"id\"\n        v-bind=\"to ? { to } : { href }\"\n        aria-haspopup=\"true\"\n        :aria-expanded=\"expanded\"\n        :type=\"is === 'button' ? 'button': undefined\">\n        <slot />\n    </Component>\n</template>","import { Instance, Placement, createPopper } from '@popperjs/core';\nimport { ComponentPublicInstance, computed, onBeforeMount, ref } from 'vue';\n\nexport type BtnDropdownProps = {\n    active?: boolean,\n    align?: 'left' | 'right',\n    buttonClass?: string|Record<string|undefined,boolean>,\n    dropdown?: boolean,\n    dropup?: boolean,\n    dropleft?: boolean,\n    dropright?: boolean,\n    label?: string,\n    offset?: number,\n    size?: string,\n    split?: boolean,\n    variant?: string,\n}\n\nexport type BtnDropdownEmits = {\n    (name: 'click', e: PointerEvent): void,\n    (name: 'click-toggle', e: PointerEvent): void\n}\n\nexport function useBtnDropdown<Props extends BtnDropdownProps, Emits extends BtnDropdownEmits>(props: Props, emit: Emits) {\n    const expanded = ref(false);\n    const triggerAnimation = ref(false);\n    const popper = ref<Instance>();\n    const target = ref<HTMLElement|ComponentPublicInstance>();\n    const menu = ref<HTMLElement|ComponentPublicInstance>();\n\n    const targetEl = computed(() => \n        target.value instanceof HTMLElement\n            ? target.value\n            : target.value.$el\n    );\n\n    const menuEl = computed(() => \n        menu.value instanceof HTMLElement\n            ? menu.value\n            : menu.value.$el\n    );\n\n    const classes = computed(() => ({\n        [props.size]: !!props.size,\n        \n        'dropdown': props.dropdown || !(props.dropright || props.dropleft || props.dropup),\n        'dropup': props.dropup,\n        'dropright': props.dropright,\n        'dropleft': props.dropleft,\n        // 'icon-only': !this.nav && !this.split && !!this.$slots.icon && !this.$slots.label,\n        // 'hide-caret': !this.caret,\n        'expanded': expanded.value,\n        // 'rotate-90': !this.nav && this.split && this.rotate && this.expanded,\n    }));\n\n    const actionClasses = computed(() => ({\n        // [props.size]: !!props.size,\n        [props.variant]: !!props.variant,\n        \n        ...buttonsClasses.value,\n    }));\n\n    const buttonsClasses = computed(() => {\n        if(typeof props.buttonClass === 'object') {\n            return { btn: true, ...props.buttonClass };\n        }\n\n        return {\n            btn: true,\n            [props.buttonClass]: !!props.buttonClass\n        }\n    });\n\n    const toggleClasses = computed(() => ({\n        'active': props.active,\n        'dropdown-toggle': true,\n        'dropdown-toggle-split': props.split,\n        // [props.size]: !!props.size,\n        [props.variant]: !!props.variant,\n        \n        ...buttonsClasses.value,\n\n        // toggleClasses() {\n        //     return Object.assign({\n        //         'active': this.active,\n        //         'btn': !this.nav,\n        //         'btn-block': !!this.block,\n        //         'nav-link': !!this.nav,\n        //         'rotate-90': !this.split && this.rotate && this.expanded,\n        //         'dropdown-toggle': true,\n        //         'dropdown-toggle-split': !this.nav && this.split,\n        //         [this.variant]: !this.nav && !!this.variant,\n        //         [this.size]: !!this.size,\n        //     }, typeof this.buttonClass === 'object' ? this.buttonClass : {\n        //         [this.buttonClass]: !!this.buttonClass\n        //     });\n        // }\n    }));\n\n    const placement = computed(() => {\n        if(props.dropup) {\n            return 'top';\n        }\n\n        if(props.dropleft) {\n            return 'left';\n        }\n\n        if(props.dropright) {\n            return 'right';\n        }\n\n        return 'bottom';\n    });\n    \n    const align = computed(() => {\n        if(props.align) {\n            return props.align === 'right' ? 'end' : 'start';\n        }\n\n        return 'start'\n    });\n    \n    function show() {\n        expanded.value = true;\n\n        if(!popper.value) {\n            popper.value = createPopper(targetEl.value, menuEl.value.querySelector('.dropdown-menu'), {\n                placement: `${placement.value}-${align.value}` as Placement,\n                onFirstUpdate: () => {\n                    triggerAnimation.value = true;\n                },\n                modifiers: [\n                    {\n                        name: 'offset',\n                        options: {\n                            offset: [0, props.offset ?? 5]\n                        },\n                    },\n                ]\n            });\n        }\n        else {\n            popper.value.update();\n        }\n    }\n\n    function hide() {\n        expanded.value = false;\n    }\n\n    function toggle() {\n        !expanded.value ? show() : hide();\n    }\n    \n    function queryFocusable() {\n        return menuEl.value && menuEl.value.querySelectorAll(\n            'label, input, select, textarea, [tabindex]:not([tabindex=\"-1\"])'\n        );\n    }\n\n    function isFocusable(element: HTMLElement) {\n        const nodes = queryFocusable();\n\n        for(const i in nodes) {\n            if(element === nodes[i]) {\n                return true;\n            }\n        }\n\n        return false;\n    }\n\n    function onBlur(e: any) {\n        if(menuEl.value && !menuEl.value.contains(e.relatedTarget) || !menuEl.value.contains(e.relatedTarget)) {\n            hide();\n        }\n    }\n\n    function onClickItem(e: any) {\n        if(!isFocusable(e.target)) {\n            hide();\n        }\n    }\n\n    function onClickToggle(e: PointerEvent) {\n        e.target.dispatchEvent(new Event('focus', e));\n            \n        emit('click-toggle', e);\n\n        if(!e.defaultPrevented) {\n            toggle();\n        }\n    }\n\n    function onKeydown(e: KeyboardEvent) {\n        if(targetEl.value.parentElement?.lastElementChild === e.target) {\n            hide();\n        }\n    }\n\n    onBeforeMount(() => {\n        popper.value && popper.value.destroy();\n    });\n\n    return {\n        actionClasses,\n        classes,\n        expanded,\n        menu,\n        target,\n        toggleClasses,\n        triggerAnimation,\n        hide,\n        show,\n        toggle,\n        onBlur,\n        onClickItem,\n        onClickToggle,\n        onKeydown\n    }\n}","<script setup lang=\"ts\">\nimport { BtnGroup } from '@vue-interface/btn-group';\nimport { DropdownMenu } from '@vue-interface/dropdown-menu';\nimport BtnDropdownAction from './BtnDropdownAction.vue';\nimport { BtnDropdownEmits, BtnDropdownProps, useBtnDropdown } from './dropdown.js';\n\nconst props = defineProps<BtnDropdownProps>();\nconst emit = defineEmits<BtnDropdownEmits>();\n\nconst {\n    target,\n    classes,\n    expanded,\n    menu,\n    toggleClasses,\n    triggerAnimation,\n    toggle,\n    onBlur,\n    onClickToggle,\n    onClickItem,\n    onKeydown\n} = useBtnDropdown(props, emit);\n</script>\n\n<template>\n    <BtnGroup\n        ref=\"target\"\n        :class=\"classes\">\n        <slot\n            name=\"button\"\n            v-bind=\"{ expanded, target, toggle, onBlur, onClickToggle, onClickItem, onKeydown }\">\n\n            <!-- :href=\"href\"\n                :to=\"to\" -->\n            <BtnDropdownAction\n                :id=\"($attrs.id as string)\"\n                :expanded=\"expanded\"\n                :class=\"toggleClasses\"\n                @blur=\"onBlur\"\n                @click=\"onClickToggle\">\n                <slot name=\"icon\" />\n                <slot name=\"label\">\n                    {{ label }}\n                </slot>\n            </BtnDropdownAction>\n        </slot>\n        <DropdownMenu\n            :id=\"$attrs.id\"\n            ref=\"menu\"\n            :align=\"align\"\n            :show=\"expanded\"\n            :class=\"{animated: triggerAnimation}\"\n            @blur=\"onBlur\"\n            @click=\"onClickItem\"\n            @keydown.tab=\"onKeydown\"\n            @mousedown.prevent=\"\">\n            <slot />\n        </DropdownMenu>\n    </BtnGroup>\n</template>","<script setup lang=\"ts\">\nimport { BtnGroup } from '@vue-interface/btn-group';\nimport { DropdownMenu } from '@vue-interface/dropdown-menu';\nimport BtnDropdownAction from './BtnDropdownAction.vue';\nimport { BtnDropdownEmits, BtnDropdownProps, useBtnDropdown } from './dropdown.js';\n\nconst props = defineProps<BtnDropdownProps>();\nconst emit = defineEmits<BtnDropdownEmits>();\n\nconst {\n    actionClasses,\n    classes,\n    expanded,\n    menu,\n    target,\n    toggleClasses,\n    triggerAnimation,\n    onBlur,\n    onClickToggle,\n    onClickItem,\n    onKeydown\n} = useBtnDropdown(props, emit);\n</script>\n\n<template>\n    <BtnGroup\n        :class=\"classes\"\n        class=\"btn-dropdown-split\">\n\n        <slot\n            v-if=\"!dropleft\"\n            v-bind=\"{ expanded, onBlur, onClickToggle, onClickItem, onKeydown }\"\n            name=\"button\">\n            <BtnDropdownAction\n                :id=\"($attrs.id as string)\"\n                :expanded=\"expanded\"\n                :class=\"actionClasses\"\n                @click=\"emit('click', $event)\">\n                <slot name=\"icon\" />\n                <slot name=\"label\">\n                    {{ label }}\n                </slot>\n            </BtnDropdownAction>\n        </slot>\n   \n        <BtnGroup ref=\"target\">\n            <slot\n                name=\"split\">\n                <button\n                    :id=\"($attrs.id as string)\"\n                    type=\"button\"\n                    aria-haspopup=\"true\"\n                    :aria-expanded=\"expanded\"\n                    :class=\"toggleClasses\"\n                    @blur=\"onBlur\"\n                    @click=\"onClickToggle\" />\n            </slot>\n            \n            <DropdownMenu\n                ref=\"menu\"\n                :align=\"align\"\n                :show=\"expanded\"\n                :class=\"{animated: triggerAnimation}\"\n                @blur=\"onBlur\"\n                @click=\"onClickItem\"\n                @keydown.tab=\"onKeydown\"\n                @mousedown.prevent=\"\">\n                <slot />\n            </DropdownMenu>\n        </BtnGroup>\n\n        <slot\n            v-if=\"dropleft\"\n            v-bind=\"{ expanded, onBlur, onClickToggle, onClickItem, onKeydown }\"\n            name=\"button\">\n            <BtnDropdownAction\n                :id=\"($attrs.id as string)\"\n                :expanded=\"expanded\"\n                :class=\"actionClasses\"\n                @click=\"emit('click', $event)\">\n                <slot name=\"icon\" />\n                <slot name=\"label\">\n                    {{ label }}\n                </slot>\n            </BtnDropdownAction>\n        </slot>\n    </BtnGroup>\n</template>","<script setup lang=\"ts\">\nimport { useSlots } from 'vue';\nimport BtnDropdownSingle from './BtnDropdownSingle.vue';\nimport BtnDropdownSplit from './BtnDropdownSplit.vue';\nimport { BtnDropdownProps } from './dropdown.js';\n\nconst props = defineProps<BtnDropdownProps>();\n\nconst emit = defineEmits<{\n    click: [e: Event]\n}>();\n\nconst slots = useSlots();\n</script>\n\n<template>\n    <Component\n        :is=\"split ? BtnDropdownSplit : BtnDropdownSingle\"\n        v-bind=\"props\"\n        class=\"btn-dropdown\"\n        @click=\"(e: Event) => emit('click', e)\">\n        <!-- @click-toggle=\"(...args: any[]) => $emit('click-toggle', ...args)\"\n        @dropdown=\"(...args: any[]) => $emit('dropdown', ...args)\"\n        @show=\"(...args: any[]) => $emit('show', ...args)\"\n        @hide=\"(...args: any[]) => $emit('hide', ...args)\"\n        @toggle=\"(...args: any[]) => $emit('toggle', ...args)\" -->\n        <template #icon>\n            <slot name=\"icon\" />\n        </template>\n        <template\n            v-if=\"label || slots.label\"\n            #label>\n            <slot name=\"label\">\n                {{ label }}\n            </slot>\n        </template>\n        <template #button=\"slot\">\n            <slot\n                name=\"button\"\n                v-bind=\"slot\" />\n        </template>\n        <template #split=\"slot\">\n            <slot\n                name=\"split\"\n                v-bind=\"slot\" />\n        </template>\n        <slot />\n    </Component>\n</template>"],"names":["_sfc_main$3","defineComponent","_sfc_render","_ctx","_cache","$props","$setup","$data","$options","_openBlock","_createBlock","_resolveDynamicComponent","_mergeProps","_withCtx","useBtnDropdown","props","emit","expanded","ref","triggerAnimation","popper","target","menu","targetEl","computed","menuEl","classes","actionClasses","buttonsClasses","toggleClasses","placement","align","show","createPopper","hide","toggle","queryFocusable","isFocusable","element","nodes","i","onBlur","e","onClickItem","onClickToggle","onKeydown","_a","onBeforeMount","slots","useSlots"],"mappings":"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"}

package/dist/demo/App.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
+export default _default;

package/dist/index.d.ts

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

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

@@ -0,0 +1,91 @@
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
+    active: {
+        type: import("vue").PropType<boolean>;
+    };
+    align: {
+        type: import("vue").PropType<"left" | "right">;
+    };
+    buttonClass: {
+        type: import("vue").PropType<string | Record<string, boolean>>;
+    };
+    dropdown: {
+        type: import("vue").PropType<boolean>;
+    };
+    dropup: {
+        type: import("vue").PropType<boolean>;
+    };
+    dropleft: {
+        type: import("vue").PropType<boolean>;
+    };
+    dropright: {
+        type: import("vue").PropType<boolean>;
+    };
+    label: {
+        type: import("vue").PropType<string>;
+    };
+    offset: {
+        type: import("vue").PropType<number>;
+    };
+    size: {
+        type: import("vue").PropType<string>;
+    };
+    split: {
+        type: import("vue").PropType<boolean>;
+    };
+    variant: {
+        type: import("vue").PropType<string>;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    click: (e: Event) => void;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    active: {
+        type: import("vue").PropType<boolean>;
+    };
+    align: {
+        type: import("vue").PropType<"left" | "right">;
+    };
+    buttonClass: {
+        type: import("vue").PropType<string | Record<string, boolean>>;
+    };
+    dropdown: {
+        type: import("vue").PropType<boolean>;
+    };
+    dropup: {
+        type: import("vue").PropType<boolean>;
+    };
+    dropleft: {
+        type: import("vue").PropType<boolean>;
+    };
+    dropright: {
+        type: import("vue").PropType<boolean>;
+    };
+    label: {
+        type: import("vue").PropType<string>;
+    };
+    offset: {
+        type: import("vue").PropType<number>;
+    };
+    size: {
+        type: import("vue").PropType<string>;
+    };
+    split: {
+        type: import("vue").PropType<boolean>;
+    };
+    variant: {
+        type: import("vue").PropType<string>;
+    };
+}>> & {
+    onClick?: (e: Event) => any;
+}, {}, {}>, {
+    icon?(_: {}): any;
+    label?(_: {}): any;
+    button?(_: any): any;
+    split?(_: any): any;
+    default?(_: {}): any;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,43 @@
+declare const _default: import("vue").DefineComponent<{
+    expanded: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    id: {
+        type: StringConstructor;
+        default: any;
+    };
+    href: {
+        type: StringConstructor;
+        default: any;
+    };
+    to: {
+        type: (StringConstructor | ObjectConstructor)[];
+        default: any;
+    };
+}, unknown, unknown, {
+    is(): "router-link" | "a" | "button";
+}, {}, 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: any;
+    };
+    href: {
+        type: StringConstructor;
+        default: any;
+    };
+    to: {
+        type: (StringConstructor | ObjectConstructor)[];
+        default: any;
+    };
+}>>, {
+    expanded: boolean;
+    id: string;
+    href: string;
+    to: string | Record<string, any>;
+}, {}>;
+export default _default;

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

@@ -0,0 +1,100 @@
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
+    active: {
+        type: import("vue").PropType<boolean>;
+    };
+    align: {
+        type: import("vue").PropType<"left" | "right">;
+    };
+    buttonClass: {
+        type: import("vue").PropType<string | Record<string, boolean>>;
+    };
+    dropdown: {
+        type: import("vue").PropType<boolean>;
+    };
+    dropup: {
+        type: import("vue").PropType<boolean>;
+    };
+    dropleft: {
+        type: import("vue").PropType<boolean>;
+    };
+    dropright: {
+        type: import("vue").PropType<boolean>;
+    };
+    label: {
+        type: import("vue").PropType<string>;
+    };
+    offset: {
+        type: import("vue").PropType<number>;
+    };
+    size: {
+        type: import("vue").PropType<string>;
+    };
+    split: {
+        type: import("vue").PropType<boolean>;
+    };
+    variant: {
+        type: import("vue").PropType<string>;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    click: (e: PointerEvent) => void;
+    "click-toggle": (e: PointerEvent) => void;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    active: {
+        type: import("vue").PropType<boolean>;
+    };
+    align: {
+        type: import("vue").PropType<"left" | "right">;
+    };
+    buttonClass: {
+        type: import("vue").PropType<string | Record<string, boolean>>;
+    };
+    dropdown: {
+        type: import("vue").PropType<boolean>;
+    };
+    dropup: {
+        type: import("vue").PropType<boolean>;
+    };
+    dropleft: {
+        type: import("vue").PropType<boolean>;
+    };
+    dropright: {
+        type: import("vue").PropType<boolean>;
+    };
+    label: {
+        type: import("vue").PropType<string>;
+    };
+    offset: {
+        type: import("vue").PropType<number>;
+    };
+    size: {
+        type: import("vue").PropType<string>;
+    };
+    split: {
+        type: import("vue").PropType<boolean>;
+    };
+    variant: {
+        type: import("vue").PropType<string>;
+    };
+}>> & {
+    onClick?: (e: PointerEvent) => any;
+    "onClick-toggle"?: (e: PointerEvent) => any;
+}, {}, {}>, {
+    button?(_: {
+        expanded: boolean;
+        target: HTMLElement | import("vue").ComponentPublicInstance;
+        toggle: () => void;
+        onBlur: (e: any) => void;
+        onClickToggle: (e: PointerEvent) => void;
+        onClickItem: (e: any) => void;
+        onKeydown: (e: KeyboardEvent) => void;
+    }): any;
+    icon?(_: {}): any;
+    label?(_: {}): any;
+    default?(_: {}): any;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,99 @@
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
+    active: {
+        type: import("vue").PropType<boolean>;
+    };
+    align: {
+        type: import("vue").PropType<"left" | "right">;
+    };
+    buttonClass: {
+        type: import("vue").PropType<string | Record<string, boolean>>;
+    };
+    dropdown: {
+        type: import("vue").PropType<boolean>;
+    };
+    dropup: {
+        type: import("vue").PropType<boolean>;
+    };
+    dropleft: {
+        type: import("vue").PropType<boolean>;
+    };
+    dropright: {
+        type: import("vue").PropType<boolean>;
+    };
+    label: {
+        type: import("vue").PropType<string>;
+    };
+    offset: {
+        type: import("vue").PropType<number>;
+    };
+    size: {
+        type: import("vue").PropType<string>;
+    };
+    split: {
+        type: import("vue").PropType<boolean>;
+    };
+    variant: {
+        type: import("vue").PropType<string>;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    click: (e: PointerEvent) => void;
+    "click-toggle": (e: PointerEvent) => void;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    active: {
+        type: import("vue").PropType<boolean>;
+    };
+    align: {
+        type: import("vue").PropType<"left" | "right">;
+    };
+    buttonClass: {
+        type: import("vue").PropType<string | Record<string, boolean>>;
+    };
+    dropdown: {
+        type: import("vue").PropType<boolean>;
+    };
+    dropup: {
+        type: import("vue").PropType<boolean>;
+    };
+    dropleft: {
+        type: import("vue").PropType<boolean>;
+    };
+    dropright: {
+        type: import("vue").PropType<boolean>;
+    };
+    label: {
+        type: import("vue").PropType<string>;
+    };
+    offset: {
+        type: import("vue").PropType<number>;
+    };
+    size: {
+        type: import("vue").PropType<string>;
+    };
+    split: {
+        type: import("vue").PropType<boolean>;
+    };
+    variant: {
+        type: import("vue").PropType<string>;
+    };
+}>> & {
+    onClick?: (e: PointerEvent) => any;
+    "onClick-toggle"?: (e: PointerEvent) => any;
+}, {}, {}>, {
+    button?(_: {
+        expanded: boolean;
+        onBlur: (e: any) => void;
+        onClickToggle: (e: PointerEvent) => void;
+        onClickItem: (e: any) => void;
+        onKeydown: (e: KeyboardEvent) => void;
+    }): any;
+    icon?(_: {}): any;
+    label?(_: {}): any;
+    split?(_: {}): any;
+    default?(_: {}): any;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/src/dropdown.d.ts

@@ -0,0 +1,49 @@
+import { ComponentPublicInstance } from 'vue';
+export type BtnDropdownProps = {
+    active?: boolean;
+    align?: 'left' | 'right';
+    buttonClass?: string | Record<string | undefined, boolean>;
+    dropdown?: boolean;
+    dropup?: boolean;
+    dropleft?: boolean;
+    dropright?: boolean;
+    label?: string;
+    offset?: number;
+    size?: string;
+    split?: boolean;
+    variant?: string;
+};
+export type BtnDropdownEmits = {
+    (name: 'click', e: PointerEvent): void;
+    (name: 'click-toggle', e: PointerEvent): void;
+};
+export declare function useBtnDropdown<Props extends BtnDropdownProps, Emits extends BtnDropdownEmits>(props: Props, emit: Emits): {
+    actionClasses: import("vue").ComputedRef<{
+        btn: boolean;
+    }>;
+    classes: import("vue").ComputedRef<{
+        [x: string]: boolean;
+        dropdown: boolean;
+        dropup: boolean;
+        dropright: boolean;
+        dropleft: boolean;
+        expanded: boolean;
+    }>;
+    expanded: import("vue").Ref<boolean>;
+    menu: import("vue").Ref<HTMLElement | ComponentPublicInstance>;
+    target: import("vue").Ref<HTMLElement | ComponentPublicInstance>;
+    toggleClasses: import("vue").ComputedRef<{
+        btn: boolean;
+        active: boolean;
+        'dropdown-toggle': boolean;
+        'dropdown-toggle-split': boolean;
+    }>;
+    triggerAnimation: import("vue").Ref<boolean>;
+    hide: () => void;
+    show: () => void;
+    toggle: () => void;
+    onBlur: (e: any) => void;
+    onClickItem: (e: any) => void;
+    onClickToggle: (e: PointerEvent) => void;
+    onKeydown: (e: KeyboardEvent) => void;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue-interface/btn-dropdown",
-  "version": "2.0.0-beta.13",
+  "version": "2.0.0-beta.15",
   "description": "A Vue button dropdown component.",
   "files": [
     "dist"
@@ -20,7 +20,7 @@
   "browserslist": "last 2 versions, > 0.5%, ie >= 11",
   "scripts": {
     "dev": "vite",
-    "build": "vite build",
+    "build": "vite build && vue-tsc",
     "preview": "vite preview"
   },
   "repository": {
@@ -44,9 +44,9 @@
   "homepage": "https://github.com/vue-interface/btn-dropdown",
   "dependencies": {
     "@popperjs/core": "^2.11.2",
-    "@vue-interface/btn": "^3.0.0-beta.19",
-    "@vue-interface/btn-group": "^2.0.0-beta.7",
-    "@vue-interface/dropdown-menu": "^2.0.0-beta.12"
+    "@vue-interface/btn": "^3.0.0-beta.20",
+    "@vue-interface/btn-group": "^2.0.0-beta.8",
+    "@vue-interface/dropdown-menu": "^2.0.0-beta.13"
   },
   "peerDependencies": {
     "vue": "^3.3.4"