@vue-interface/btn-dropdown 2.0.0-beta.21 → 2.0.0-beta.23

package/dist/btn-dropdown.js

@@ -1,4 +1,4 @@
-import { defineComponent as A, openBlock as M, createBlock as N, resolveDynamicComponent as G, mergeProps as z, withCtx as p, renderSlot as s, ref as w, computed as k, onBeforeMount as x, unref as e, normalizeClass as C, normalizeProps as T, guardReactiveProps as V, createVNode as h, createTextVNode as I, toDisplayString as P, withKeys as R, withModifiers as U, createCommentVNode as O, createElementVNode as ee, useSlots as te, createSlots as oe } from "vue";
+import { defineComponent as A, openBlock as M, createBlock as N, resolveDynamicComponent as G, mergeProps as z, withCtx as p, renderSlot as s, ref as w, computed as k, onBeforeMount as x, unref as e, normalizeClass as B, normalizeProps as T, guardReactiveProps as V, createVNode as h, createTextVNode as I, toDisplayString as P, withKeys as R, withModifiers as U, createCommentVNode as O, createElementVNode as ee, useSlots as te, createSlots as oe } from "vue";
 import { BtnGroup as q } from "@vue-interface/btn-group";
 import { DropdownMenu as H } from "@vue-interface/dropdown-menu";
 import { createPopper as ne } from "@popperjs/core";
@@ -46,45 +46,46 @@ function se(t, g, i, f, r, c) {
 }
 const F = /* @__PURE__ */ ae(le, [["render", se]]);
 function J(t, g) {
-  const i = w(!1), f = w(!1), r = w(), c = w(), o = w(), v = w(), m = (l) => {
-    c.value = l;
+  const i = w(!1), f = w(!1), r = w(), c = w(), n = w(), b = w(), m = (o) => {
+    c.value = o;
   }, K = k(
     () => {
-      var l;
-      return c.value instanceof Element ? c.value : (l = c.value) == null ? void 0 : l.$el;
+      var o;
+      return c.value instanceof Element ? c.value : (o = c.value) == null ? void 0 : o.$el;
     }
   ), $ = k(
-    () => o.value instanceof Element ? o.value : o.value.$el
+    () => {
+      var o;
+      return n.value instanceof Element ? n.value : (o = n.value) == null ? void 0 : o.$el;
+    }
   ), d = k(
-    () => v.value instanceof Element ? v.value : v.value.$el
-  ), B = k(() => ({
+    () => {
+      var o;
+      return b.value instanceof Element ? b.value : (o = b.value) == null ? void 0 : o.$el;
+    }
+  ), C = k(() => ({
     [t.size]: !!t.size,
     dropdown: t.dropdown || !(t.dropright || t.dropleft || t.dropup),
     dropup: t.dropup,
     dropright: t.dropright,
     dropleft: t.dropleft,
-    // 'icon-only': !this.nav && !this.split && !!this.$slots.icon && !this.$slots.label,
-    // 'hide-caret': !this.caret,
     expanded: i.value
-    // 'rotate-90': !this.nav && this.split && this.rotate && this.expanded,
-  })), b = k(() => ({
-    // [props.size]: !!props.size,
+  })), v = k(() => ({
     [t.variant]: !!t.variant,
     ...y.value
-  })), y = k(() => typeof t.buttonClass == "object" ? { btn: !0, ...t.buttonClass } : {
+  })), y = k(() => ({
     btn: !0,
-    [t.buttonClass]: !!t.buttonClass
-  }), n = k(() => ({
+    ...typeof t.buttonClass == "object" ? t.buttonClass : { [t.buttonClass]: !!t.buttonClass }
+  })), l = k(() => ({
     active: t.active,
     "dropdown-toggle": !0,
     "dropdown-toggle-split": t.split,
-    // [props.size]: !!props.size,
     [t.variant]: !!t.variant,
     ...y.value
   })), u = k(() => t.dropup ? "top" : t.dropleft ? "left" : t.dropright ? "right" : "bottom"), a = k(() => t.align && t.align === "right" ? "end" : "start");
   function S() {
-    var l;
-    (l = K.value) == null || l.focus(), i.value = !0, r.value ? r.value.update() : r.value = ne($.value, d.value.querySelector(".dropdown-menu"), {
+    var o;
+    (o = K.value) == null || o.focus(), i.value = !0, r.value ? r.value.update() : r.value = ne($.value, d.value.querySelector(".dropdown-menu"), {
       placement: `${u.value}-${a.value}`,
       onFirstUpdate: () => {
         f.value = !0;
@@ -110,37 +111,37 @@ function J(t, g) {
       'label, input, select, textarea, [tabindex]:not([tabindex="-1"])'
     );
   }
-  function Q(l) {
+  function Q(o) {
     const E = L();
     for (const _ in E)
-      if (l === E[_])
+      if (o === E[_])
         return !0;
     return !1;
   }
-  function W(l) {
-    g("blur", l), !l.defaultPrevented && (d.value && !d.value.contains(l.relatedTarget) || !d.value.contains(l.relatedTarget)) && D();
+  function W(o) {
+    g("blur", o), !o.defaultPrevented && (d.value && !d.value.contains(o.relatedTarget) || !d.value.contains(o.relatedTarget)) && D();
   }
-  function X(l) {
-    Q(l.target) || D();
+  function X(o) {
+    Q(o.target) || D();
   }
-  function Y(l) {
-    g("click-toggle", l), l.defaultPrevented || j();
+  function Y(o) {
+    g("click-toggle", o), o.defaultPrevented || j();
   }
-  function Z(l) {
+  function Z(o) {
     var E;
-    ((E = $.value.parentElement) == null ? void 0 : E.lastElementChild) === l.target && D();
+    ((E = $.value.parentElement) == null ? void 0 : E.lastElementChild) === o.target && D();
   }
   return x(() => {
     r.value && r.value.destroy();
   }), {
-    actionClasses: b,
+    actionClasses: v,
     button: c,
     $button: m,
-    classes: B,
+    classes: C,
     expanded: i,
-    menu: v,
-    target: o,
-    toggleClasses: n,
+    menu: b,
+    target: n,
+    toggleClasses: l,
     triggerAnimation: f,
     hide: D,
     show: S,
@@ -172,32 +173,32 @@ const re = /* @__PURE__ */ A({
     const i = t, f = g, {
       button: r,
       $button: c,
-      target: o,
-      classes: v,
+      target: n,
+      classes: b,
       expanded: m,
       menu: K,
       toggleClasses: $,
       triggerAnimation: d,
-      toggle: B,
-      onBlur: b,
+      toggle: C,
+      onBlur: v,
       onClickToggle: y,
-      onClickItem: n,
+      onClickItem: l,
       onKeydown: u
     } = J(i, f);
     return (a, S) => (M(), N(e(q), {
       ref_key: "target",
-      ref: o,
-      class: C(e(v))
+      ref: n,
+      class: B(e(b))
     }, {
       default: p(() => [
-        s(a.$slots, "button", T(V({ button: e(r), $button: e(c), expanded: e(m), target: e(o), toggle: e(B), onBlur: e(b), onClickToggle: e(y), onClickItem: e(n), onKeydown: e(u) })), () => [
+        s(a.$slots, "button", T(V({ button: e(r), $button: e(c), expanded: e(m), target: e(n), toggle: e(C), onBlur: e(v), onClickToggle: e(y), onClickItem: e(l), onKeydown: e(u) })), () => [
           h(F, {
             id: a.$attrs.id,
             ref_key: "button",
             ref: r,
             expanded: e(m),
-            class: C(e($)),
-            onBlur: e(b),
+            class: B(e($)),
+            onBlur: e(v),
             onClick: e(y)
           }, {
             default: p(() => [
@@ -215,9 +216,9 @@ const re = /* @__PURE__ */ A({
           ref: K,
           align: a.align,
           show: e(m),
-          class: C({ animated: e(d) }),
-          onBlur: e(b),
-          onClick: e(n),
+          class: B({ animated: e(d) }),
+          onBlur: e(v),
+          onClick: e(l),
           onKeydown: R(e(u), ["tab"]),
           onMousedown: S[0] || (S[0] = U(() => {
           }, ["prevent"]))
@@ -252,31 +253,31 @@ const re = /* @__PURE__ */ A({
     const i = t, f = g, {
       actionClasses: r,
       classes: c,
-      expanded: o,
-      menu: v,
+      expanded: n,
+      menu: b,
       target: m,
       toggleClasses: K,
       triggerAnimation: $,
       onBlur: d,
-      onClickToggle: B,
-      onClickItem: b,
+      onClickToggle: C,
+      onClickItem: v,
       onKeydown: y
     } = J(i, f);
-    return (n, u) => (M(), N(e(q), {
-      class: C([e(c), "btn-dropdown-split"])
+    return (l, u) => (M(), N(e(q), {
+      class: B([e(c), "btn-dropdown-split"])
     }, {
       default: p(() => [
-        n.dropleft ? O("", !0) : s(n.$slots, "button", T(z({ key: 0 }, { expanded: e(o), onBlur: e(d), onClickToggle: e(B), onClickItem: e(b), onKeydown: e(y) })), () => [
+        l.dropleft ? O("", !0) : s(l.$slots, "button", T(z({ key: 0 }, { expanded: e(n), onBlur: e(d), onClickToggle: e(C), onClickItem: e(v), onKeydown: e(y) })), () => [
           h(F, {
-            id: n.$attrs.id,
-            expanded: e(o),
-            class: C(e(r)),
+            id: l.$attrs.id,
+            expanded: e(n),
+            class: B(e(r)),
             onClick: u[0] || (u[0] = (a) => f("click", a))
           }, {
             default: p(() => [
-              s(n.$slots, "icon"),
-              s(n.$slots, "label", {}, () => [
-                I(P(n.label), 1)
+              s(l.$slots, "icon"),
+              s(l.$slots, "label", {}, () => [
+                I(P(l.label), 1)
               ])
             ]),
             _: 3
@@ -287,50 +288,50 @@ const re = /* @__PURE__ */ A({
           ref: m
         }, {
           default: p(() => [
-            s(n.$slots, "split", {}, () => [
+            s(l.$slots, "split", {}, () => [
               ee("button", {
-                id: n.$attrs.id,
+                id: l.$attrs.id,
                 type: "button",
                 "aria-haspopup": "true",
-                "aria-expanded": e(o),
-                class: C(e(K)),
+                "aria-expanded": e(n),
+                class: B(e(K)),
                 onBlur: u[1] || (u[1] = //@ts-ignore
                 (...a) => e(d) && e(d)(...a)),
                 onClick: u[2] || (u[2] = //@ts-ignore
-                (...a) => e(B) && e(B)(...a))
+                (...a) => e(C) && e(C)(...a))
               }, null, 42, ie)
             ]),
             h(e(H), {
               ref_key: "menu",
-              ref: v,
-              align: n.align,
-              show: e(o),
-              class: C({ animated: e($) }),
+              ref: b,
+              align: l.align,
+              show: e(n),
+              class: B({ animated: e($) }),
               onBlur: e(d),
-              onClick: e(b),
+              onClick: e(v),
               onKeydown: R(e(y), ["tab"]),
               onMousedown: u[3] || (u[3] = U(() => {
               }, ["prevent"]))
             }, {
               default: p(() => [
-                s(n.$slots, "default")
+                s(l.$slots, "default")
               ]),
               _: 3
             }, 8, ["align", "show", "class", "onBlur", "onClick", "onKeydown"])
           ]),
           _: 3
         }, 512),
-        n.dropleft ? s(n.$slots, "button", T(z({ key: 1 }, { expanded: e(o), onBlur: e(d), onClickToggle: e(B), onClickItem: e(b), onKeydown: e(y) })), () => [
+        l.dropleft ? s(l.$slots, "button", T(z({ key: 1 }, { expanded: e(n), onBlur: e(d), onClickToggle: e(C), onClickItem: e(v), onKeydown: e(y) })), () => [
           h(F, {
-            id: n.$attrs.id,
-            expanded: e(o),
-            class: C(e(r)),
+            id: l.$attrs.id,
+            expanded: e(n),
+            class: B(e(r)),
             onClick: u[4] || (u[4] = (a) => f("click", a))
           }, {
             default: p(() => [
-              s(n.$slots, "icon"),
-              s(n.$slots, "label", {}, () => [
-                I(P(n.label), 1)
+              s(l.$slots, "icon"),
+              s(l.$slots, "label", {}, () => [
+                I(P(l.label), 1)
               ])
             ]),
             _: 3
@@ -359,33 +360,33 @@ const re = /* @__PURE__ */ A({
   emits: ["click"],
   setup(t, { emit: g }) {
     const i = t, f = g;
-    function r(o) {
-      return f("click", o);
+    function r(n) {
+      return f("click", n);
     }
     const c = te();
-    return (o, v) => (M(), N(G(o.split ? ue : re), z(i, {
+    return (n, b) => (M(), N(G(n.split ? ue : re), z(i, {
       class: "btn-dropdown",
       onClick: r
     }), oe({
       icon: p(() => [
-        s(o.$slots, "icon")
+        s(n.$slots, "icon")
       ]),
       button: p((m) => [
-        s(o.$slots, "button", T(V(m)))
+        s(n.$slots, "button", T(V(m)))
       ]),
       split: p((m) => [
-        s(o.$slots, "split", T(V(m)))
+        s(n.$slots, "split", T(V(m)))
       ]),
       default: p(() => [
-        s(o.$slots, "default")
+        s(n.$slots, "default")
       ]),
       _: 2
     }, [
-      o.label || e(c).label ? {
+      n.label || e(c).label ? {
         name: "label",
         fn: p(() => [
-          s(o.$slots, "label", {}, () => [
-            I(P(o.label), 1)
+          s(n.$slots, "label", {}, () => [
+            I(P(n.label), 1)
           ])
         ]),
         key: "0"

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: MouseEvent): void,\n    (name: 'blur', e: FocusEvent): 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 button = ref<Element|ComponentPublicInstance>();\n    const target = ref<Element|ComponentPublicInstance>();\n    const menu = ref<Element|ComponentPublicInstance>();\n\n    const $button: (ref: Element | ComponentPublicInstance | null, refs: Record<string, any>) => void = (ref) => {\n        button.value = ref;\n    }\n\n    const buttonEl = computed(() => \n        button.value instanceof Element\n            ? button.value\n            : button.value?.$el\n    );\n\n    const targetEl = computed(() => \n        target.value instanceof Element\n            ? target.value\n            : target.value.$el\n    );\n\n    const menuEl = computed(() => \n        menu.value instanceof Element\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\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        buttonEl.value?.focus();\n        \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: FocusEvent) {\n        emit('blur', e);\n\n        if(e.defaultPrevented) {\n            return;\n        }\n\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: MouseEvent) {\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        button,\n        $button,\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    button,\n    $button,\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=\"{ button, $button, expanded, target, toggle, onBlur, onClickToggle, onClickItem, onKeydown }\">\n            <BtnDropdownAction\n                :id=\"($attrs.id as string)\"\n                ref=\"button\"\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        <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\nfunction onClick(e: Event) {\n    return emit('click', e);\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=\"onClick\">\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","_renderSlot","useBtnDropdown","props","emit","expanded","ref","triggerAnimation","popper","button","target","menu","$button","buttonEl","computed","_a","targetEl","menuEl","classes","actionClasses","buttonsClasses","toggleClasses","placement","align","show","createPopper","hide","toggle","queryFocusable","isFocusable","element","nodes","i","onBlur","e","onClickItem","onClickToggle","onKeydown","onBeforeMount","__props","__emit","onClick","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, ComputedRef, 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: MouseEvent): void,\n    (name: 'blur', e: FocusEvent): 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 button = ref<Element|ComponentPublicInstance>();\n    const target = ref<Element|ComponentPublicInstance>();\n    const menu = ref<Element|ComponentPublicInstance>();\n\n    const $button: any = (ref) => {\n        button.value = ref;\n    }\n\n    const buttonEl = computed<HTMLButtonElement|undefined>(() => \n        button.value instanceof Element\n            ? button.value\n            : button.value?.$el\n    );\n\n    const targetEl = computed<Element|undefined>(() => \n        target.value instanceof Element\n            ? target.value\n            : target.value?.$el\n    );\n\n    const menuEl = computed<Element|undefined>(() => \n        menu.value instanceof Element\n            ? menu.value\n            : menu.value?.$el\n    );\n\n    const classes = computed(() => ({\n        [props.size]: !!props.size,        \n        'dropdown': props.dropdown || !(props.dropright || props.dropleft || props.dropup),\n        'dropup': props.dropup,\n        'dropright': props.dropright,\n        'dropleft': props.dropleft,\n        'expanded': expanded.value,\n    }));\n\n    const actionClasses = computed(() => ({\n        [props.variant]: !!props.variant,\n        ...buttonsClasses.value,\n    }));\n\n    const buttonsClasses: ComputedRef<{\n        btn: true,\n        [x: string]: boolean\n    }> = computed(() => {\n        const buttonClass = typeof props.buttonClass === 'object'\n            ? props.buttonClass\n            : {[props.buttonClass]: !!props.buttonClass};\n            \n        return {\n            btn: true,\n            ...buttonClass\n        };\n    });\n\n    const toggleClasses = computed(() => ({\n        'active': props.active,\n        'dropdown-toggle': true,\n        'dropdown-toggle-split': props.split,\n        [props.variant]: !!props.variant,\n        ...buttonsClasses.value,\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        buttonEl.value?.focus();\n        \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: FocusEvent) {\n        emit('blur', e);\n\n        if(e.defaultPrevented) {\n            return;\n        }\n\n        if(menuEl.value && !menuEl.value.contains((e as any).relatedTarget) || !menuEl.value.contains((e as any).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: MouseEvent) {\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        button,\n        $button,\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    button,\n    $button,\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=\"{ button, $button, expanded, target, toggle, onBlur, onClickToggle, onClickItem, onKeydown }\">\n            <BtnDropdownAction\n                :id=\"($attrs.id as string)\"\n                ref=\"button\"\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        <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\nfunction onClick(e: Event) {\n    return emit('click', e);\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=\"onClick\">\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","_renderSlot","useBtnDropdown","props","emit","expanded","ref","triggerAnimation","popper","button","target","menu","$button","buttonEl","computed","_a","targetEl","menuEl","classes","actionClasses","buttonsClasses","toggleClasses","placement","align","show","createPopper","hide","toggle","queryFocusable","isFocusable","element","nodes","i","onBlur","e","onClickItem","onClickToggle","onKeydown","onBeforeMount","__props","__emit","onClick","slots","useSlots"],"mappings":"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"}

package/dist/btn-dropdown.umd.cjs

@@ -1,2 +1,2 @@
-(function(m,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):(m=typeof globalThis<"u"?globalThis:m||self,e(m.BtnDropdown={},m.Vue,m.VueInterfaceBtnGroup,m.VueInterfaceDropdownMenu,m.PopperjsCore))})(this,function(m,e,S,P,T){"use strict";const N=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"}}}),K=(t,c)=>{const i=t.__vccOpts||t;for(const[f,a]of c)i[f]=a;return i};function E(t,c,i,f,a,p){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 z=K(N,[["render",E]]);function D(t,c){const i=e.ref(!1),f=e.ref(!1),a=e.ref(),p=e.ref(),n=e.ref(),g=e.ref(),u=r=>{p.value=r},B=e.computed(()=>{var r;return p.value instanceof Element?p.value:(r=p.value)==null?void 0:r.$el}),w=e.computed(()=>n.value instanceof Element?n.value:n.value.$el),d=e.computed(()=>g.value instanceof Element?g.value:g.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:i.value})),C=e.computed(()=>({[t.variant]:!!t.variant,...y.value})),y=e.computed(()=>typeof t.buttonClass=="object"?{btn:!0,...t.buttonClass}:{btn:!0,[t.buttonClass]:!!t.buttonClass}),o=e.computed(()=>({active:t.active,"dropdown-toggle":!0,"dropdown-toggle-split":t.split,[t.variant]:!!t.variant,...y.value})),s=e.computed(()=>t.dropup?"top":t.dropleft?"left":t.dropright?"right":"bottom"),l=e.computed(()=>t.align&&t.align==="right"?"end":"start");function k(){var r;(r=B.value)==null||r.focus(),i.value=!0,a.value?a.value.update():a.value=T.createPopper(w.value,d.value.querySelector(".dropdown-menu"),{placement:`${s.value}-${l.value}`,onFirstUpdate:()=>{f.value=!0},modifiers:[{name:"offset",options:{offset:[0,t.offset??5]}}]})}function h(){i.value=!1}function V(){i.value?h():k()}function x(){return d.value&&d.value.querySelectorAll('label, input, select, textarea, [tabindex]:not([tabindex="-1"])')}function A(r){const $=x();for(const U in $)if(r===$[U])return!0;return!1}function F(r){c("blur",r),!r.defaultPrevented&&(d.value&&!d.value.contains(r.relatedTarget)||!d.value.contains(r.relatedTarget))&&h()}function O(r){A(r.target)||h()}function R(r){c("click-toggle",r),r.defaultPrevented||V()}function G(r){var $;(($=w.value.parentElement)==null?void 0:$.lastElementChild)===r.target&&h()}return e.onBeforeMount(()=>{a.value&&a.value.destroy()}),{actionClasses:C,button:p,$button:u,classes:b,expanded:i,menu:g,target:n,toggleClasses:o,triggerAnimation:f,hide:h,show:k,toggle:V,onBlur:F,onClickItem:O,onClickToggle:R,onKeydown:G}}const I=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","blur"],setup(t,{emit:c}){const i=t,f=c,{button:a,$button:p,target:n,classes:g,expanded:u,menu:B,toggleClasses:w,triggerAnimation:d,toggle:b,onBlur:C,onClickToggle:y,onClickItem:o,onKeydown:s}=D(i,f);return(l,k)=>(e.openBlock(),e.createBlock(e.unref(S.BtnGroup),{ref_key:"target",ref:n,class:e.normalizeClass(e.unref(g))},{default:e.withCtx(()=>[e.renderSlot(l.$slots,"button",e.normalizeProps(e.guardReactiveProps({button:e.unref(a),$button:e.unref(p),expanded:e.unref(u),target:e.unref(n),toggle:e.unref(b),onBlur:e.unref(C),onClickToggle:e.unref(y),onClickItem:e.unref(o),onKeydown:e.unref(s)})),()=>[e.createVNode(z,{id:l.$attrs.id,ref_key:"button",ref:a,expanded:e.unref(u),class:e.normalizeClass(e.unref(w)),onBlur:e.unref(C),onClick:e.unref(y)},{default:e.withCtx(()=>[e.renderSlot(l.$slots,"icon"),e.renderSlot(l.$slots,"label",{},()=>[e.createTextVNode(e.toDisplayString(l.label),1)])]),_:3},8,["id","expanded","class","onBlur","onClick"])]),e.createVNode(e.unref(P.DropdownMenu),{id:l.$attrs.id,ref_key:"menu",ref:B,align:l.align,show:e.unref(u),class:e.normalizeClass({animated:e.unref(d)}),onBlur:e.unref(C),onClick:e.unref(o),onKeydown:e.withKeys(e.unref(s),["tab"]),onMousedown:k[0]||(k[0]=e.withModifiers(()=>{},["prevent"]))},{default:e.withCtx(()=>[e.renderSlot(l.$slots,"default")]),_:3},8,["id","align","show","class","onBlur","onClick","onKeydown"])]),_:3},8,["class"]))}}),M=["id","aria-expanded"],j=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","blur"],setup(t,{emit:c}){const i=t,f=c,{actionClasses:a,classes:p,expanded:n,menu:g,target:u,toggleClasses:B,triggerAnimation:w,onBlur:d,onClickToggle:b,onClickItem:C,onKeydown:y}=D(i,f);return(o,s)=>(e.openBlock(),e.createBlock(e.unref(S.BtnGroup),{class:e.normalizeClass([e.unref(p),"btn-dropdown-split"])},{default:e.withCtx(()=>[o.dropleft?e.createCommentVNode("",!0):e.renderSlot(o.$slots,"button",e.normalizeProps(e.mergeProps({key:0},{expanded:e.unref(n),onBlur:e.unref(d),onClickToggle:e.unref(b),onClickItem:e.unref(C),onKeydown:e.unref(y)})),()=>[e.createVNode(z,{id:o.$attrs.id,expanded:e.unref(n),class:e.normalizeClass(e.unref(a)),onClick:s[0]||(s[0]=l=>f("click",l))},{default:e.withCtx(()=>[e.renderSlot(o.$slots,"icon"),e.renderSlot(o.$slots,"label",{},()=>[e.createTextVNode(e.toDisplayString(o.label),1)])]),_:3},8,["id","expanded","class"])]),e.createVNode(e.unref(S.BtnGroup),{ref_key:"target",ref:u},{default:e.withCtx(()=>[e.renderSlot(o.$slots,"split",{},()=>[e.createElementVNode("button",{id:o.$attrs.id,type:"button","aria-haspopup":"true","aria-expanded":e.unref(n),class:e.normalizeClass(e.unref(B)),onBlur:s[1]||(s[1]=(...l)=>e.unref(d)&&e.unref(d)(...l)),onClick:s[2]||(s[2]=(...l)=>e.unref(b)&&e.unref(b)(...l))},null,42,M)]),e.createVNode(e.unref(P.DropdownMenu),{ref_key:"menu",ref:g,align:o.align,show:e.unref(n),class:e.normalizeClass({animated:e.unref(w)}),onBlur:e.unref(d),onClick:e.unref(C),onKeydown:e.withKeys(e.unref(y),["tab"]),onMousedown:s[3]||(s[3]=e.withModifiers(()=>{},["prevent"]))},{default:e.withCtx(()=>[e.renderSlot(o.$slots,"default")]),_:3},8,["align","show","class","onBlur","onClick","onKeydown"])]),_:3},512),o.dropleft?e.renderSlot(o.$slots,"button",e.normalizeProps(e.mergeProps({key:1},{expanded:e.unref(n),onBlur:e.unref(d),onClickToggle:e.unref(b),onClickItem:e.unref(C),onKeydown:e.unref(y)})),()=>[e.createVNode(z,{id:o.$attrs.id,expanded:e.unref(n),class:e.normalizeClass(e.unref(a)),onClick:s[4]||(s[4]=l=>f("click",l))},{default:e.withCtx(()=>[e.renderSlot(o.$slots,"icon"),e.renderSlot(o.$slots,"label",{},()=>[e.createTextVNode(e.toDisplayString(o.label),1)])]),_:3},8,["id","expanded","class"])]):e.createCommentVNode("",!0)]),_:3},8,["class"]))}}),q=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:c}){const i=t,f=c;function a(n){return f("click",n)}const p=e.useSlots();return(n,g)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(n.split?j:I),e.mergeProps(i,{class:"btn-dropdown",onClick:a}),e.createSlots({icon:e.withCtx(()=>[e.renderSlot(n.$slots,"icon")]),button:e.withCtx(u=>[e.renderSlot(n.$slots,"button",e.normalizeProps(e.guardReactiveProps(u)))]),split:e.withCtx(u=>[e.renderSlot(n.$slots,"split",e.normalizeProps(e.guardReactiveProps(u)))]),default:e.withCtx(()=>[e.renderSlot(n.$slots,"default")]),_:2},[n.label||e.unref(p).label?{name:"label",fn:e.withCtx(()=>[e.renderSlot(n.$slots,"label",{},()=>[e.createTextVNode(e.toDisplayString(n.label),1)])]),key:"0"}:void 0]),1040))}});m.BtnDropdown=q,Object.defineProperty(m,Symbol.toStringTag,{value:"Module"})});
+(function(m,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):(m=typeof globalThis<"u"?globalThis:m||self,e(m.BtnDropdown={},m.Vue,m.VueInterfaceBtnGroup,m.VueInterfaceDropdownMenu,m.PopperjsCore))})(this,function(m,e,S,P,T){"use strict";const N=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"}}}),K=(t,c)=>{const i=t.__vccOpts||t;for(const[f,a]of c)i[f]=a;return i};function E(t,c,i,f,a,p){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 z=K(N,[["render",E]]);function D(t,c){const i=e.ref(!1),f=e.ref(!1),a=e.ref(),p=e.ref(),o=e.ref(),g=e.ref(),u=n=>{p.value=n},B=e.computed(()=>{var n;return p.value instanceof Element?p.value:(n=p.value)==null?void 0:n.$el}),w=e.computed(()=>{var n;return o.value instanceof Element?o.value:(n=o.value)==null?void 0:n.$el}),d=e.computed(()=>{var n;return g.value instanceof Element?g.value:(n=g.value)==null?void 0:n.$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:i.value})),C=e.computed(()=>({[t.variant]:!!t.variant,...y.value})),y=e.computed(()=>({btn:!0,...typeof t.buttonClass=="object"?t.buttonClass:{[t.buttonClass]:!!t.buttonClass}})),r=e.computed(()=>({active:t.active,"dropdown-toggle":!0,"dropdown-toggle-split":t.split,[t.variant]:!!t.variant,...y.value})),s=e.computed(()=>t.dropup?"top":t.dropleft?"left":t.dropright?"right":"bottom"),l=e.computed(()=>t.align&&t.align==="right"?"end":"start");function k(){var n;(n=B.value)==null||n.focus(),i.value=!0,a.value?a.value.update():a.value=T.createPopper(w.value,d.value.querySelector(".dropdown-menu"),{placement:`${s.value}-${l.value}`,onFirstUpdate:()=>{f.value=!0},modifiers:[{name:"offset",options:{offset:[0,t.offset??5]}}]})}function h(){i.value=!1}function V(){i.value?h():k()}function x(){return d.value&&d.value.querySelectorAll('label, input, select, textarea, [tabindex]:not([tabindex="-1"])')}function A(n){const $=x();for(const U in $)if(n===$[U])return!0;return!1}function F(n){c("blur",n),!n.defaultPrevented&&(d.value&&!d.value.contains(n.relatedTarget)||!d.value.contains(n.relatedTarget))&&h()}function O(n){A(n.target)||h()}function R(n){c("click-toggle",n),n.defaultPrevented||V()}function G(n){var $;(($=w.value.parentElement)==null?void 0:$.lastElementChild)===n.target&&h()}return e.onBeforeMount(()=>{a.value&&a.value.destroy()}),{actionClasses:C,button:p,$button:u,classes:b,expanded:i,menu:g,target:o,toggleClasses:r,triggerAnimation:f,hide:h,show:k,toggle:V,onBlur:F,onClickItem:O,onClickToggle:R,onKeydown:G}}const I=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","blur"],setup(t,{emit:c}){const i=t,f=c,{button:a,$button:p,target:o,classes:g,expanded:u,menu:B,toggleClasses:w,triggerAnimation:d,toggle:b,onBlur:C,onClickToggle:y,onClickItem:r,onKeydown:s}=D(i,f);return(l,k)=>(e.openBlock(),e.createBlock(e.unref(S.BtnGroup),{ref_key:"target",ref:o,class:e.normalizeClass(e.unref(g))},{default:e.withCtx(()=>[e.renderSlot(l.$slots,"button",e.normalizeProps(e.guardReactiveProps({button:e.unref(a),$button:e.unref(p),expanded:e.unref(u),target:e.unref(o),toggle:e.unref(b),onBlur:e.unref(C),onClickToggle:e.unref(y),onClickItem:e.unref(r),onKeydown:e.unref(s)})),()=>[e.createVNode(z,{id:l.$attrs.id,ref_key:"button",ref:a,expanded:e.unref(u),class:e.normalizeClass(e.unref(w)),onBlur:e.unref(C),onClick:e.unref(y)},{default:e.withCtx(()=>[e.renderSlot(l.$slots,"icon"),e.renderSlot(l.$slots,"label",{},()=>[e.createTextVNode(e.toDisplayString(l.label),1)])]),_:3},8,["id","expanded","class","onBlur","onClick"])]),e.createVNode(e.unref(P.DropdownMenu),{id:l.$attrs.id,ref_key:"menu",ref:B,align:l.align,show:e.unref(u),class:e.normalizeClass({animated:e.unref(d)}),onBlur:e.unref(C),onClick:e.unref(r),onKeydown:e.withKeys(e.unref(s),["tab"]),onMousedown:k[0]||(k[0]=e.withModifiers(()=>{},["prevent"]))},{default:e.withCtx(()=>[e.renderSlot(l.$slots,"default")]),_:3},8,["id","align","show","class","onBlur","onClick","onKeydown"])]),_:3},8,["class"]))}}),M=["id","aria-expanded"],j=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","blur"],setup(t,{emit:c}){const i=t,f=c,{actionClasses:a,classes:p,expanded:o,menu:g,target:u,toggleClasses:B,triggerAnimation:w,onBlur:d,onClickToggle:b,onClickItem:C,onKeydown:y}=D(i,f);return(r,s)=>(e.openBlock(),e.createBlock(e.unref(S.BtnGroup),{class:e.normalizeClass([e.unref(p),"btn-dropdown-split"])},{default:e.withCtx(()=>[r.dropleft?e.createCommentVNode("",!0):e.renderSlot(r.$slots,"button",e.normalizeProps(e.mergeProps({key:0},{expanded:e.unref(o),onBlur:e.unref(d),onClickToggle:e.unref(b),onClickItem:e.unref(C),onKeydown:e.unref(y)})),()=>[e.createVNode(z,{id:r.$attrs.id,expanded:e.unref(o),class:e.normalizeClass(e.unref(a)),onClick:s[0]||(s[0]=l=>f("click",l))},{default:e.withCtx(()=>[e.renderSlot(r.$slots,"icon"),e.renderSlot(r.$slots,"label",{},()=>[e.createTextVNode(e.toDisplayString(r.label),1)])]),_:3},8,["id","expanded","class"])]),e.createVNode(e.unref(S.BtnGroup),{ref_key:"target",ref:u},{default:e.withCtx(()=>[e.renderSlot(r.$slots,"split",{},()=>[e.createElementVNode("button",{id:r.$attrs.id,type:"button","aria-haspopup":"true","aria-expanded":e.unref(o),class:e.normalizeClass(e.unref(B)),onBlur:s[1]||(s[1]=(...l)=>e.unref(d)&&e.unref(d)(...l)),onClick:s[2]||(s[2]=(...l)=>e.unref(b)&&e.unref(b)(...l))},null,42,M)]),e.createVNode(e.unref(P.DropdownMenu),{ref_key:"menu",ref:g,align:r.align,show:e.unref(o),class:e.normalizeClass({animated:e.unref(w)}),onBlur:e.unref(d),onClick:e.unref(C),onKeydown:e.withKeys(e.unref(y),["tab"]),onMousedown:s[3]||(s[3]=e.withModifiers(()=>{},["prevent"]))},{default:e.withCtx(()=>[e.renderSlot(r.$slots,"default")]),_:3},8,["align","show","class","onBlur","onClick","onKeydown"])]),_:3},512),r.dropleft?e.renderSlot(r.$slots,"button",e.normalizeProps(e.mergeProps({key:1},{expanded:e.unref(o),onBlur:e.unref(d),onClickToggle:e.unref(b),onClickItem:e.unref(C),onKeydown:e.unref(y)})),()=>[e.createVNode(z,{id:r.$attrs.id,expanded:e.unref(o),class:e.normalizeClass(e.unref(a)),onClick:s[4]||(s[4]=l=>f("click",l))},{default:e.withCtx(()=>[e.renderSlot(r.$slots,"icon"),e.renderSlot(r.$slots,"label",{},()=>[e.createTextVNode(e.toDisplayString(r.label),1)])]),_:3},8,["id","expanded","class"])]):e.createCommentVNode("",!0)]),_:3},8,["class"]))}}),q=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:c}){const i=t,f=c;function a(o){return f("click",o)}const p=e.useSlots();return(o,g)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(o.split?j:I),e.mergeProps(i,{class:"btn-dropdown",onClick:a}),e.createSlots({icon:e.withCtx(()=>[e.renderSlot(o.$slots,"icon")]),button:e.withCtx(u=>[e.renderSlot(o.$slots,"button",e.normalizeProps(e.guardReactiveProps(u)))]),split:e.withCtx(u=>[e.renderSlot(o.$slots,"split",e.normalizeProps(e.guardReactiveProps(u)))]),default:e.withCtx(()=>[e.renderSlot(o.$slots,"default")]),_:2},[o.label||e.unref(p).label?{name:"label",fn:e.withCtx(()=>[e.renderSlot(o.$slots,"label",{},()=>[e.createTextVNode(e.toDisplayString(o.label),1)])]),key:"0"}:void 0]),1040))}});m.BtnDropdown=q,Object.defineProperty(m,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: MouseEvent): void,\n    (name: 'blur', e: FocusEvent): 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 button = ref<Element|ComponentPublicInstance>();\n    const target = ref<Element|ComponentPublicInstance>();\n    const menu = ref<Element|ComponentPublicInstance>();\n\n    const $button: (ref: Element | ComponentPublicInstance | null, refs: Record<string, any>) => void = (ref) => {\n        button.value = ref;\n    }\n\n    const buttonEl = computed(() => \n        button.value instanceof Element\n            ? button.value\n            : button.value?.$el\n    );\n\n    const targetEl = computed(() => \n        target.value instanceof Element\n            ? target.value\n            : target.value.$el\n    );\n\n    const menuEl = computed(() => \n        menu.value instanceof Element\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\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        buttonEl.value?.focus();\n        \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: FocusEvent) {\n        emit('blur', e);\n\n        if(e.defaultPrevented) {\n            return;\n        }\n\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: MouseEvent) {\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        button,\n        $button,\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    button,\n    $button,\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=\"{ button, $button, expanded, target, toggle, onBlur, onClickToggle, onClickItem, onKeydown }\">\n            <BtnDropdownAction\n                :id=\"($attrs.id as string)\"\n                ref=\"button\"\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        <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\nfunction onClick(e: Event) {\n    return emit('click', e);\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=\"onClick\">\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","_renderSlot","useBtnDropdown","props","emit","expanded","ref","triggerAnimation","popper","button","target","menu","$button","buttonEl","computed","_a","targetEl","menuEl","classes","actionClasses","buttonsClasses","toggleClasses","placement","align","show","createPopper","hide","toggle","queryFocusable","isFocusable","element","nodes","i","onBlur","e","onClickItem","onClickToggle","onKeydown","onBeforeMount","__props","__emit","onClick","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, ComputedRef, 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: MouseEvent): void,\n    (name: 'blur', e: FocusEvent): 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 button = ref<Element|ComponentPublicInstance>();\n    const target = ref<Element|ComponentPublicInstance>();\n    const menu = ref<Element|ComponentPublicInstance>();\n\n    const $button: any = (ref) => {\n        button.value = ref;\n    }\n\n    const buttonEl = computed<HTMLButtonElement|undefined>(() => \n        button.value instanceof Element\n            ? button.value\n            : button.value?.$el\n    );\n\n    const targetEl = computed<Element|undefined>(() => \n        target.value instanceof Element\n            ? target.value\n            : target.value?.$el\n    );\n\n    const menuEl = computed<Element|undefined>(() => \n        menu.value instanceof Element\n            ? menu.value\n            : menu.value?.$el\n    );\n\n    const classes = computed(() => ({\n        [props.size]: !!props.size,        \n        'dropdown': props.dropdown || !(props.dropright || props.dropleft || props.dropup),\n        'dropup': props.dropup,\n        'dropright': props.dropright,\n        'dropleft': props.dropleft,\n        'expanded': expanded.value,\n    }));\n\n    const actionClasses = computed(() => ({\n        [props.variant]: !!props.variant,\n        ...buttonsClasses.value,\n    }));\n\n    const buttonsClasses: ComputedRef<{\n        btn: true,\n        [x: string]: boolean\n    }> = computed(() => {\n        const buttonClass = typeof props.buttonClass === 'object'\n            ? props.buttonClass\n            : {[props.buttonClass]: !!props.buttonClass};\n            \n        return {\n            btn: true,\n            ...buttonClass\n        };\n    });\n\n    const toggleClasses = computed(() => ({\n        'active': props.active,\n        'dropdown-toggle': true,\n        'dropdown-toggle-split': props.split,\n        [props.variant]: !!props.variant,\n        ...buttonsClasses.value,\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        buttonEl.value?.focus();\n        \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: FocusEvent) {\n        emit('blur', e);\n\n        if(e.defaultPrevented) {\n            return;\n        }\n\n        if(menuEl.value && !menuEl.value.contains((e as any).relatedTarget) || !menuEl.value.contains((e as any).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: MouseEvent) {\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        button,\n        $button,\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    button,\n    $button,\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=\"{ button, $button, expanded, target, toggle, onBlur, onClickToggle, onClickItem, onKeydown }\">\n            <BtnDropdownAction\n                :id=\"($attrs.id as string)\"\n                ref=\"button\"\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        <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\nfunction onClick(e: Event) {\n    return emit('click', e);\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=\"onClick\">\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","_renderSlot","useBtnDropdown","props","emit","expanded","ref","triggerAnimation","popper","button","target","menu","$button","buttonEl","computed","_a","targetEl","menuEl","classes","actionClasses","buttonsClasses","toggleClasses","placement","align","show","createPopper","hide","toggle","queryFocusable","isFocusable","element","nodes","i","onBlur","e","onClickItem","onClickToggle","onKeydown","onBeforeMount","__props","__emit","onClick","slots","useSlots"],"mappings":"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"}

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

@@ -1,35 +1,34 @@
 import { BtnDropdownProps } from './dropdown.js';
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<BtnDropdownProps>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    click: (e: Event) => void;
-}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<BtnDropdownProps>>> & {
-    onClick?: (e: Event) => any;
-}, {}, {}>, {
-    icon?(_: {}): any;
-    label?(_: {}): any;
-    button?(_: {
-        button: Element | import("vue").ComponentPublicInstance;
-        $button: (ref: Element | import("vue").ComponentPublicInstance, refs: Record<string, any>) => void;
-        expanded: boolean;
-        target: Element | import("vue").ComponentPublicInstance;
-        toggle: () => void;
-        onBlur: (e: FocusEvent) => void;
-        onClickToggle: (e: MouseEvent) => void;
-        onClickItem: (e: any) => void;
-        onKeydown: (e: KeyboardEvent) => void;
-    }): any;
-    split?(_: any): any;
-    default?(_: {}): any;
-}>;
-export default _default;
-type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-type __VLS_TypePropsToRuntimeProps<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
-    } : {
-        type: import('vue').PropType<T[K]>;
-        required: true;
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        icon?(_: {}): any;
+        label?(_: {}): any;
+        button?(_: {
+            button: Element | import("vue").ComponentPublicInstance;
+            $button: any;
+            expanded: boolean;
+            target: Element | import("vue").ComponentPublicInstance;
+            toggle: () => void;
+            onBlur: (e: FocusEvent) => void;
+            onClickToggle: (e: MouseEvent) => void;
+            onClickItem: (e: any) => void;
+            onKeydown: (e: KeyboardEvent) => void;
+        }): any;
+        split?(_: any): any;
+        default?(_: {}): any;
     };
+    refs: {};
+    rootEl: any;
 };
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import("vue").DefineComponent<BtnDropdownProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    click: (e: Event) => any;
+}, string, import("vue").PublicProps, Readonly<BtnDropdownProps> & Readonly<{
+    onClick?: (e: Event) => any;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -1,4 +1,4 @@
-declare const _default: import("vue").DefineComponent<{
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     expanded: {
         type: BooleanConstructor;
         default: boolean;
@@ -15,7 +15,7 @@ declare const _default: import("vue").DefineComponent<{
         type: (StringConstructor | ObjectConstructor)[];
         default: any;
     };
-}, unknown, unknown, {
+}>, {}, {}, {
     is(): "router-link" | "a" | "button";
 }, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     expanded: {
@@ -34,10 +34,10 @@ declare const _default: import("vue").DefineComponent<{
         type: (StringConstructor | ObjectConstructor)[];
         default: any;
     };
-}>>, {
+}>> & Readonly<{}>, {
     expanded: boolean;
     id: string;
     href: string;
     to: string | Record<string, any>;
-}, {}>;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

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

@@ -1,38 +1,223 @@
 import { BtnDropdownProps } from './dropdown.js';
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<BtnDropdownProps>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    click: (e: PointerEvent) => void;
-    "click-toggle": (e: MouseEvent) => void;
-    blur: (e: FocusEvent) => void;
-}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<BtnDropdownProps>>> & {
-    onBlur?: (e: FocusEvent) => any;
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        button?(_: {
+            button: Element | import("vue").ComponentPublicInstance;
+            $button: any;
+            expanded: boolean;
+            target: Element | import("vue").ComponentPublicInstance;
+            toggle: () => void;
+            onBlur: (e: FocusEvent) => void;
+            onClickToggle: (e: MouseEvent) => void;
+            onClickItem: (e: any) => void;
+            onKeydown: (e: KeyboardEvent) => void;
+        }): any;
+        icon?(_: {}): any;
+        label?(_: {}): any;
+        default?(_: {}): any;
+    };
+    refs: {
+        target: {
+            $: import("vue").ComponentInternalInstance;
+            $data: {};
+            $props: Partial<{}> & Omit<{
+                readonly size?: string;
+                readonly toggle?: boolean;
+                readonly vertical?: boolean;
+            } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>;
+            $attrs: {
+                [x: string]: unknown;
+            };
+            $refs: {
+                [x: string]: unknown;
+            };
+            $slots: Readonly<{
+                [name: string]: import("vue").Slot<any>;
+            }>;
+            $root: import("vue").ComponentPublicInstance | null;
+            $parent: import("vue").ComponentPublicInstance | null;
+            $host: Element | null;
+            $emit: (event: string, ...args: any[]) => void;
+            $el: any;
+            $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
+                size: {
+                    type: import("vue").PropType<string>;
+                };
+                toggle: {
+                    type: import("vue").PropType<boolean>;
+                };
+                vertical: {
+                    type: import("vue").PropType<boolean>;
+                };
+            }>>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & {
+                beforeCreate?: (() => void) | (() => void)[];
+                created?: (() => void) | (() => void)[];
+                beforeMount?: (() => void) | (() => void)[];
+                mounted?: (() => void) | (() => void)[];
+                beforeUpdate?: (() => void) | (() => void)[];
+                updated?: (() => void) | (() => void)[];
+                activated?: (() => void) | (() => void)[];
+                deactivated?: (() => void) | (() => void)[];
+                beforeDestroy?: (() => void) | (() => void)[];
+                beforeUnmount?: (() => void) | (() => void)[];
+                destroyed?: (() => void) | (() => void)[];
+                unmounted?: (() => void) | (() => void)[];
+                renderTracked?: ((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[];
+                renderTriggered?: ((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[];
+                errorCaptured?: ((err: unknown, instance: import("vue").ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: import("vue").ComponentPublicInstance | null, info: string) => boolean | void)[];
+            };
+            $forceUpdate: () => void;
+            $nextTick: typeof import("vue").nextTick;
+            $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import("@vue/reactivity").OnCleanup]) => any : (...args: [any, any, import("@vue/reactivity").OnCleanup]) => any, options?: import("vue").WatchOptions): import("vue").WatchStopHandle;
+        } & Readonly<{}> & Omit<Readonly<import("vue").ExtractPropTypes<{
+            size: {
+                type: import("vue").PropType<string>;
+            };
+            toggle: {
+                type: import("vue").PropType<boolean>;
+            };
+            vertical: {
+                type: import("vue").PropType<boolean>;
+            };
+        }>>, never> & import("vue").ShallowUnwrapRef<{}> & {} & import("vue").ComponentCustomProperties & {} & {
+            $slots: {
+                default?(_: {}): any;
+            };
+        };
+        button: import("vue").CreateComponentPublicInstanceWithMixins<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;
+            };
+        }>> & Readonly<{}>, {}, {}, {
+            is(): "router-link" | "a" | "button";
+        }, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {
+            expanded: boolean;
+            id: string;
+            href: string;
+            to: string | Record<string, any>;
+        }, true, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
+            P: {};
+            B: {};
+            D: {};
+            C: {};
+            M: {};
+            Defaults: {};
+        }, 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;
+            };
+        }>> & Readonly<{}>, {}, {}, {
+            is(): "router-link" | "a" | "button";
+        }, {}, {
+            expanded: boolean;
+            id: string;
+            href: string;
+            to: string | Record<string, any>;
+        }>;
+        menu: {
+            $: import("vue").ComponentInternalInstance;
+            $data: {};
+            $props: Partial<{}> & Omit<{
+                readonly align: "left" | "right";
+                readonly show?: boolean;
+            } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>;
+            $attrs: {
+                [x: string]: unknown;
+            };
+            $refs: {
+                [x: string]: unknown;
+            };
+            $slots: Readonly<{
+                [name: string]: import("vue").Slot<any>;
+            }>;
+            $root: import("vue").ComponentPublicInstance | null;
+            $parent: import("vue").ComponentPublicInstance | null;
+            $host: Element | null;
+            $emit: (event: string, ...args: any[]) => void;
+            $el: any;
+            $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
+                align: {
+                    type: import("vue").PropType<"left" | "right">;
+                    required: true;
+                };
+                show: {
+                    type: import("vue").PropType<boolean>;
+                };
+            }>>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & {
+                beforeCreate?: (() => void) | (() => void)[];
+                created?: (() => void) | (() => void)[];
+                beforeMount?: (() => void) | (() => void)[];
+                mounted?: (() => void) | (() => void)[];
+                beforeUpdate?: (() => void) | (() => void)[];
+                updated?: (() => void) | (() => void)[];
+                activated?: (() => void) | (() => void)[];
+                deactivated?: (() => void) | (() => void)[];
+                beforeDestroy?: (() => void) | (() => void)[];
+                beforeUnmount?: (() => void) | (() => void)[];
+                destroyed?: (() => void) | (() => void)[];
+                unmounted?: (() => void) | (() => void)[];
+                renderTracked?: ((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[];
+                renderTriggered?: ((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[];
+                errorCaptured?: ((err: unknown, instance: import("vue").ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: import("vue").ComponentPublicInstance | null, info: string) => boolean | void)[];
+            };
+            $forceUpdate: () => void;
+            $nextTick: typeof import("vue").nextTick;
+            $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import("@vue/reactivity").OnCleanup]) => any : (...args: [any, any, import("@vue/reactivity").OnCleanup]) => any, options?: import("vue").WatchOptions): import("vue").WatchStopHandle;
+        } & Readonly<{}> & Omit<Readonly<import("vue").ExtractPropTypes<{
+            align: {
+                type: import("vue").PropType<"left" | "right">;
+                required: true;
+            };
+            show: {
+                type: import("vue").PropType<boolean>;
+            };
+        }>>, never> & import("vue").ShallowUnwrapRef<{}> & {} & import("vue").ComponentCustomProperties & {} & {
+            $slots: {
+                default?(_: {}): any;
+            };
+        };
+    };
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import("vue").DefineComponent<BtnDropdownProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    click: (e: PointerEvent) => any;
+    "click-toggle": (e: MouseEvent) => any;
+    blur: (e: FocusEvent) => any;
+}, string, import("vue").PublicProps, Readonly<BtnDropdownProps> & Readonly<{
     onClick?: (e: PointerEvent) => any;
     "onClick-toggle"?: (e: MouseEvent) => any;
-}, {}, {}>, {
-    button?(_: {
-        button: Element | import("vue").ComponentPublicInstance;
-        $button: (ref: Element | import("vue").ComponentPublicInstance, refs: Record<string, any>) => void;
-        expanded: boolean;
-        target: Element | import("vue").ComponentPublicInstance;
-        toggle: () => void;
-        onBlur: (e: FocusEvent) => void;
-        onClickToggle: (e: MouseEvent) => void;
-        onClickItem: (e: any) => void;
-        onKeydown: (e: KeyboardEvent) => void;
-    }): any;
-    icon?(_: {}): any;
-    label?(_: {}): any;
-    default?(_: {}): any;
-}>;
+    onBlur?: (e: FocusEvent) => any;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
-type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-type __VLS_TypePropsToRuntimeProps<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
-    } : {
-        type: import('vue').PropType<T[K]>;
-        required: true;
-    };
-};
 type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -1,35 +1,173 @@
 import { BtnDropdownProps } from './dropdown.js';
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<BtnDropdownProps>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    click: (e: PointerEvent) => void;
-    "click-toggle": (e: MouseEvent) => void;
-    blur: (e: FocusEvent) => void;
-}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<BtnDropdownProps>>> & {
-    onBlur?: (e: FocusEvent) => any;
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        button?(_: {
+            expanded: boolean;
+            onBlur: (e: FocusEvent) => void;
+            onClickToggle: (e: MouseEvent) => void;
+            onClickItem: (e: any) => void;
+            onKeydown: (e: KeyboardEvent) => void;
+        }): any;
+        button?(_: {
+            expanded: boolean;
+            onBlur: (e: FocusEvent) => void;
+            onClickToggle: (e: MouseEvent) => void;
+            onClickItem: (e: any) => void;
+            onKeydown: (e: KeyboardEvent) => void;
+        }): any;
+        icon?(_: {}): any;
+        icon?(_: {}): any;
+        label?(_: {}): any;
+        label?(_: {}): any;
+        split?(_: {}): any;
+        default?(_: {}): any;
+    };
+    refs: {
+        target: {
+            $: import("vue").ComponentInternalInstance;
+            $data: {};
+            $props: Partial<{}> & Omit<{
+                readonly size?: string;
+                readonly toggle?: boolean;
+                readonly vertical?: boolean;
+            } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>;
+            $attrs: {
+                [x: string]: unknown;
+            };
+            $refs: {
+                [x: string]: unknown;
+            };
+            $slots: Readonly<{
+                [name: string]: import("vue").Slot<any>;
+            }>;
+            $root: import("vue").ComponentPublicInstance | null;
+            $parent: import("vue").ComponentPublicInstance | null;
+            $host: Element | null;
+            $emit: (event: string, ...args: any[]) => void;
+            $el: any;
+            $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
+                size: {
+                    type: import("vue").PropType<string>;
+                };
+                toggle: {
+                    type: import("vue").PropType<boolean>;
+                };
+                vertical: {
+                    type: import("vue").PropType<boolean>;
+                };
+            }>>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & {
+                beforeCreate?: (() => void) | (() => void)[];
+                created?: (() => void) | (() => void)[];
+                beforeMount?: (() => void) | (() => void)[];
+                mounted?: (() => void) | (() => void)[];
+                beforeUpdate?: (() => void) | (() => void)[];
+                updated?: (() => void) | (() => void)[];
+                activated?: (() => void) | (() => void)[];
+                deactivated?: (() => void) | (() => void)[];
+                beforeDestroy?: (() => void) | (() => void)[];
+                beforeUnmount?: (() => void) | (() => void)[];
+                destroyed?: (() => void) | (() => void)[];
+                unmounted?: (() => void) | (() => void)[];
+                renderTracked?: ((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[];
+                renderTriggered?: ((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[];
+                errorCaptured?: ((err: unknown, instance: import("vue").ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: import("vue").ComponentPublicInstance | null, info: string) => boolean | void)[];
+            };
+            $forceUpdate: () => void;
+            $nextTick: typeof import("vue").nextTick;
+            $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import("@vue/reactivity").OnCleanup]) => any : (...args: [any, any, import("@vue/reactivity").OnCleanup]) => any, options?: import("vue").WatchOptions): import("vue").WatchStopHandle;
+        } & Readonly<{}> & Omit<Readonly<import("vue").ExtractPropTypes<{
+            size: {
+                type: import("vue").PropType<string>;
+            };
+            toggle: {
+                type: import("vue").PropType<boolean>;
+            };
+            vertical: {
+                type: import("vue").PropType<boolean>;
+            };
+        }>>, never> & import("vue").ShallowUnwrapRef<{}> & {} & import("vue").ComponentCustomProperties & {} & {
+            $slots: {
+                default?(_: {}): any;
+            };
+        };
+        menu: {
+            $: import("vue").ComponentInternalInstance;
+            $data: {};
+            $props: Partial<{}> & Omit<{
+                readonly align: "left" | "right";
+                readonly show?: boolean;
+            } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>;
+            $attrs: {
+                [x: string]: unknown;
+            };
+            $refs: {
+                [x: string]: unknown;
+            };
+            $slots: Readonly<{
+                [name: string]: import("vue").Slot<any>;
+            }>;
+            $root: import("vue").ComponentPublicInstance | null;
+            $parent: import("vue").ComponentPublicInstance | null;
+            $host: Element | null;
+            $emit: (event: string, ...args: any[]) => void;
+            $el: any;
+            $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
+                align: {
+                    type: import("vue").PropType<"left" | "right">;
+                    required: true;
+                };
+                show: {
+                    type: import("vue").PropType<boolean>;
+                };
+            }>>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & {
+                beforeCreate?: (() => void) | (() => void)[];
+                created?: (() => void) | (() => void)[];
+                beforeMount?: (() => void) | (() => void)[];
+                mounted?: (() => void) | (() => void)[];
+                beforeUpdate?: (() => void) | (() => void)[];
+                updated?: (() => void) | (() => void)[];
+                activated?: (() => void) | (() => void)[];
+                deactivated?: (() => void) | (() => void)[];
+                beforeDestroy?: (() => void) | (() => void)[];
+                beforeUnmount?: (() => void) | (() => void)[];
+                destroyed?: (() => void) | (() => void)[];
+                unmounted?: (() => void) | (() => void)[];
+                renderTracked?: ((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[];
+                renderTriggered?: ((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[];
+                errorCaptured?: ((err: unknown, instance: import("vue").ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: import("vue").ComponentPublicInstance | null, info: string) => boolean | void)[];
+            };
+            $forceUpdate: () => void;
+            $nextTick: typeof import("vue").nextTick;
+            $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import("@vue/reactivity").OnCleanup]) => any : (...args: [any, any, import("@vue/reactivity").OnCleanup]) => any, options?: import("vue").WatchOptions): import("vue").WatchStopHandle;
+        } & Readonly<{}> & Omit<Readonly<import("vue").ExtractPropTypes<{
+            align: {
+                type: import("vue").PropType<"left" | "right">;
+                required: true;
+            };
+            show: {
+                type: import("vue").PropType<boolean>;
+            };
+        }>>, never> & import("vue").ShallowUnwrapRef<{}> & {} & import("vue").ComponentCustomProperties & {} & {
+            $slots: {
+                default?(_: {}): any;
+            };
+        };
+    };
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import("vue").DefineComponent<BtnDropdownProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    click: (e: PointerEvent) => any;
+    "click-toggle": (e: MouseEvent) => any;
+    blur: (e: FocusEvent) => any;
+}, string, import("vue").PublicProps, Readonly<BtnDropdownProps> & Readonly<{
     onClick?: (e: PointerEvent) => any;
     "onClick-toggle"?: (e: MouseEvent) => any;
-}, {}, {}>, {
-    button?(_: {
-        expanded: boolean;
-        onBlur: (e: FocusEvent) => void;
-        onClickToggle: (e: MouseEvent) => void;
-        onClickItem: (e: any) => void;
-        onKeydown: (e: KeyboardEvent) => void;
-    }): any;
-    icon?(_: {}): any;
-    label?(_: {}): any;
-    split?(_: {}): any;
-    default?(_: {}): any;
-}>;
+    onBlur?: (e: FocusEvent) => any;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
-type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-type __VLS_TypePropsToRuntimeProps<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
-    } : {
-        type: import('vue').PropType<T[K]>;
-        required: true;
-    };
-};
 type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/src/dropdown.d.ts

@@ -1,4 +1,4 @@
-import { ComponentPublicInstance } from 'vue';
+import { ComponentPublicInstance, ComputedRef } from 'vue';
 export type BtnDropdownProps = {
     active?: boolean;
     align?: 'left' | 'right';
@@ -19,12 +19,13 @@ export type BtnDropdownEmits = {
     (name: 'blur', e: FocusEvent): void;
 };
 export declare function useBtnDropdown<Props extends BtnDropdownProps, Emits extends BtnDropdownEmits>(props: Props, emit: Emits): {
-    actionClasses: import("vue").ComputedRef<{
-        btn: boolean;
+    actionClasses: ComputedRef<{
+        [x: string]: boolean;
+        btn: true;
     }>;
-    button: import("vue").Ref<Element | ComponentPublicInstance>;
-    $button: (ref: Element | ComponentPublicInstance | null, refs: Record<string, any>) => void;
-    classes: import("vue").ComputedRef<{
+    button: import("vue").Ref<Element | ComponentPublicInstance, Element | ComponentPublicInstance>;
+    $button: any;
+    classes: ComputedRef<{
         [x: string]: boolean;
         dropdown: boolean;
         dropup: boolean;
@@ -32,16 +33,17 @@ export declare function useBtnDropdown<Props extends BtnDropdownProps, Emits ext
         dropleft: boolean;
         expanded: boolean;
     }>;
-    expanded: import("vue").Ref<boolean>;
-    menu: import("vue").Ref<Element | ComponentPublicInstance>;
-    target: import("vue").Ref<Element | ComponentPublicInstance>;
-    toggleClasses: import("vue").ComputedRef<{
-        btn: boolean;
+    expanded: import("vue").Ref<boolean, boolean>;
+    menu: import("vue").Ref<Element | ComponentPublicInstance, Element | ComponentPublicInstance>;
+    target: import("vue").Ref<Element | ComponentPublicInstance, Element | ComponentPublicInstance>;
+    toggleClasses: ComputedRef<{
+        [x: string]: boolean;
+        btn: true;
         active: boolean;
         'dropdown-toggle': boolean;
         'dropdown-toggle-split': boolean;
     }>;
-    triggerAnimation: import("vue").Ref<boolean>;
+    triggerAnimation: import("vue").Ref<boolean, boolean>;
     hide: () => void;
     show: () => void;
     toggle: () => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue-interface/btn-dropdown",
-  "version": "2.0.0-beta.21",
+  "version": "2.0.0-beta.23",
   "description": "A Vue button dropdown component.",
   "files": [
     "dist"
@@ -43,35 +43,35 @@
   },
   "homepage": "https://github.com/vue-interface/btn-dropdown",
   "dependencies": {
-    "@popperjs/core": "^2.11.2",
-    "@vue-interface/btn": "^3.0.0-beta.21",
-    "@vue-interface/btn-group": "^2.0.0-beta.8",
-    "@vue-interface/dropdown-menu": "^2.0.0-beta.13"
+    "@popperjs/core": "^2.11.8",
+    "@vue-interface/btn": "^3.0.0-beta.26",
+    "@vue-interface/btn-group": "^2.0.0-beta.10",
+    "@vue-interface/dropdown-menu": "^2.0.0-beta.21"
   },
   "peerDependencies": {
     "vue": "^3.3.4"
   },
   "devDependencies": {
-    "@commitlint/config-conventional": "^17.7.0",
+    "@commitlint/config-conventional": "^17.8.1",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
-    "@semantic-release/npm": "^10.0.5",
-    "@types/color": "^3.0.3",
-    "@vitejs/plugin-vue": "^4.3.2",
-    "@vue-interface/eslint-config": "^1.0.0-beta.0",
-    "autoprefixer": "^10.4.15",
+    "@semantic-release/npm": "^10.0.6",
+    "@types/color": "^3.0.6",
+    "@vitejs/plugin-vue": "^4.6.2",
+    "@vue-interface/eslint-config": "^1.0.0-beta.4",
+    "autoprefixer": "^10.4.20",
     "change-case": "^4.1.2",
-    "commitlint": "^17.7.1",
-    "dotenv": "^16.3.1",
-    "eslint": "^8.47.0",
+    "commitlint": "^17.8.1",
+    "dotenv": "^16.4.7",
+    "eslint": "^8.57.1",
     "husky": "^8.0.3",
     "pascalcase": "^2.0.0",
-    "postcss": "^8.4.6",
-    "semantic-release": "^21.0.7",
-    "tailwindcss": "^3.3.3",
-    "typescript": "^5.2.2",
-    "vite": "^4.4.9",
-    "vue": "^3.4.0",
-    "vue-tsc": "^1.8.8"
+    "postcss": "^8.4.49",
+    "semantic-release": "^21.1.2",
+    "tailwindcss": "^3.4.16",
+    "typescript": "~5.6.0",
+    "vite": "^4.5.5",
+    "vue": "^3.5.13",
+    "vue-tsc": "^2.1.10"
   }
 }