@vue-interface/btn-dropdown 4.1.0 → 4.1.2

package/dist/btn-dropdown.js

@@ -3,7 +3,7 @@ import { DropdownMenu as R } from "@vue-interface/dropdown-menu";
 import { offset as Q, flip as U } from "@floating-ui/dom";
 import { useFloating as W } from "@floating-ui/vue";
 function j(t, k) {
-  const g = D(), p = D(), s = D(!1), u = x(() => t.align ?? "start"), c = x(() => t.dropup ? "top" : t.dropleft ? "left" : t.dropright ? "right" : "bottom"), a = x(() => `${c.value}-${u.value}`), i = x(() => ({
+  const p = D(), g = D(), s = D(!1), u = x(() => t.align ?? "start"), c = x(() => t.dropup ? "top" : t.dropleft ? "left" : t.dropright ? "right" : "bottom"), a = x(() => `${c.value}-${u.value}`), i = x(() => ({
     dropdown: t.dropup && t.dropright && t.dropleft,
     dropup: t.dropup,
     dropright: t.dropright,
@@ -24,7 +24,7 @@ function j(t, k) {
         l[E] = !0;
     else t.buttonClass && Object.assign(l, t.buttonClass);
     return l;
-  }), { floatingStyles: T, update: B } = W(g, p, {
+  }), { floatingStyles: T, update: B } = W(p, g, {
     placement: a,
     middleware: t.middleware ?? [
       Q(t.offset ?? 5),
@@ -32,16 +32,16 @@ function j(t, k) {
     ]
   });
   function w() {
-    s.value = !0, !(!g.value || !p.value) && (B(), k("show"));
+    s.value = !0, !(!p.value || !g.value) && (B(), k("show"));
   }
   function b() {
-    s.value = !1, g.value?.blur(), k("hide");
+    s.value = !1, p.value?.blur(), k("hide");
   }
   function r() {
     s.value ? b() : w();
   }
   function m(l) {
-    const E = Array.from(p.value?.$el.querySelectorAll("label, input, select, textarea") ?? []);
+    const E = Array.from(g.value?.$el.querySelectorAll("label, input, select, textarea") ?? []);
     for (const q in E)
       if (l === E[q])
         return !0;
@@ -52,7 +52,7 @@ function j(t, k) {
       b();
       return;
     }
-    (p.value && !p.value?.$el.contains(l.relatedTarget) || !g.value?.contains(l.relatedTarget)) && b();
+    (g.value && !g.value?.$el.contains(l.relatedTarget) || !p.value?.contains(l.relatedTarget)) && b();
   }
   function f(l) {
     k("click", l);
@@ -70,8 +70,8 @@ function j(t, k) {
   return O(() => {
     s.value ? window.addEventListener("resize", B) : window.removeEventListener("resize", B);
   }), {
-    target: g,
-    menu: p,
+    target: p,
+    menu: g,
     alignment: u,
     expanded: s,
     floatingStyles: T,
@@ -107,8 +107,8 @@ const X = ["aria-expanded"], Y = /* @__PURE__ */ A({
     variant: { default: "btn-primary" }
   },
   emits: ["click", "clickToggle", "show", "hide"],
-  setup(t, { expose: k, emit: g }) {
-    const p = t, s = g, {
+  setup(t, { expose: k, emit: p }) {
+    const g = t, s = p, {
       target: u,
       menu: c,
       buttonClasses: a,
@@ -121,7 +121,7 @@ const X = ["aria-expanded"], Y = /* @__PURE__ */ A({
       onBlur: r,
       onClickToggle: m,
       onClickItem: $
-    } = j(p, s);
+    } = j(g, s);
     return k({
       show: B,
       hide: w,
@@ -181,8 +181,8 @@ const X = ["aria-expanded"], Y = /* @__PURE__ */ A({
     variant: { default: "btn-primary" }
   },
   emits: ["click", "clickToggle", "show", "hide"],
-  setup(t, { expose: k, emit: g }) {
-    const p = t, s = g, {
+  setup(t, { expose: k, emit: p }) {
+    const g = t, s = p, {
       target: u,
       menu: c,
       buttonClasses: a,
@@ -195,7 +195,7 @@ const X = ["aria-expanded"], Y = /* @__PURE__ */ A({
       onBlur: r,
       onClickToggle: m,
       onClickItem: $
-    } = j(p, s);
+    } = j(g, s);
     return k({
       show: B,
       hide: w,
@@ -281,16 +281,16 @@ const X = ["aria-expanded"], Y = /* @__PURE__ */ A({
     variant: {}
   },
   emits: ["click", "clickToggle", "show", "hide"],
-  setup(t, { expose: k, emit: g }) {
-    const p = t, s = g, u = G("el");
+  setup(t, { expose: k, emit: p }) {
+    const g = t, s = p, u = G("el");
     return k({
-      show: () => u.value?.show(),
       hide: () => u.value?.hide(),
-      toggle: () => u.value?.hide()
+      show: () => u.value?.show(),
+      toggle: () => u.value?.toggle()
     }), (c, a) => (H(), J(K(t.split ? oe : Y), P({
       ref_key: "el",
       ref: u
-    }, p, {
+    }, g, {
       onClick: a[0] || (a[0] = (i) => s("click", i)),
       onClickToggle: a[1] || (a[1] = (i) => s("clickToggle", i)),
       onShow: a[2] || (a[2] = () => s("show")),

package/dist/btn-dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"btn-dropdown.js","sources":["../src/useDropdownHandler.ts","../src/BtnDropdownSingle.vue","../src/BtnDropdownSplit.vue","../src/BtnDropdown.vue"],"sourcesContent":["import { flip, offset, Placement, type Alignment, type Middleware, type OffsetOptions, type Side } from '@floating-ui/dom';\nimport { useFloating } from '@floating-ui/vue';\nimport { DropdownMenu } from '@vue-interface/dropdown-menu';\nimport { computed, ref, watchEffect, type EmitFn, type HTMLAttributes } from 'vue';\n\ntype LiteralUnion<T extends U, U = string> = T | (U & Record<never, never>);\n\nexport type BtnGroupSizes = 'btn-group-xs'\n    | 'btn-group-sm' \n    | 'btn-group-md'\n    | 'btn-group-lg'\n    | 'btn-group-xl'\n    | 'btn-group-2xl'\n    | 'btn-group-3xl'\n    | 'btn-group-4xl';\n\nexport type BtnDropdownProps = {\n    align?: Alignment;\n    block?: boolean;\n    buttonClass?: HTMLAttributes['class'],\n    caret?: boolean;\n    dropup?: boolean;\n    dropright?: boolean;\n    dropleft?: boolean;\n    label?: string;\n    offset?: OffsetOptions,\n    middleware?: Middleware[],\n    side?: Side;\n    size?: LiteralUnion<BtnGroupSizes>;\n    split?: boolean;\n    variant?: string;\n}\n\nexport type BtnDropdownEvents = {\n    click: [event: MouseEvent];\n    clickToggle: [event: MouseEvent];\n    show: [],\n    hide: []\n}\n\nexport function useDropdownHandler(props: BtnDropdownProps, emit: EmitFn<BtnDropdownEvents>) {\n    const target = ref<HTMLElement>();\n    const menu = ref<InstanceType<typeof DropdownMenu>>();\n    const expanded = ref(false);\n\n\n    const alignment = computed<Alignment>(() => props.align ?? 'start');\n\n    const side = computed<Side>(() => {\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 placement = computed<Placement>(() => `${side.value}-${alignment.value}`);\n\n    const classes = computed(() => ({\n        'dropdown': props.dropup && props.dropright && props.dropleft,\n        'dropup': props.dropup,\n        'dropright': props.dropright,\n        'dropleft': props.dropleft,\n        'expanded': expanded.value,\n        [props.size ?? '']: !!props.size,\n    }));\n    \n    const buttonClasses = computed(() => {\n        const classes = {\n            btn: true,\n            [props.variant ?? '']: !!props.variant,\n            'btn-block': !!props.block,\n            'no-caret': !props.caret\n        };\n        \n        if(typeof props.buttonClass === 'string') {\n            classes[props.buttonClass] = true;\n        }\n        else if(Array.isArray(props.buttonClass)) {\n            for(const value of props.buttonClass) {\n                classes[value] = true;\n            }\n        }\n        else if(props.buttonClass) {\n            Object.assign(classes, props.buttonClass);\n        }\n\n        return classes;\n    });\n\n    const { floatingStyles, update } = useFloating(target, menu, {\n        placement: placement,\n        middleware: props.middleware ?? [\n            offset(props.offset ?? 5),\n            flip()\n        ]\n    });\n\n    function show() {\n        expanded.value = true;\n\n        if(!target.value || !menu.value) {\n            return;\n        }\n\n        update();\n\n        emit('show');\n    }\n\n    function hide() {\n        expanded.value = false;\n\n        target.value?.blur();\n\n        emit('hide');\n    }\n\n    function toggle() {\n        if(!expanded.value) {\n            show();\n        }\n        else {\n            hide();\n        }\n    }\n\n    function isFocusable(element: HTMLElement) {\n        const nodes = Array.from(menu.value?.$el.querySelectorAll('label, input, select, textarea') ?? []);\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        if(!(e.relatedTarget instanceof HTMLElement)) {\n            hide();\n            \n            return;\n        }\n        \n        if(menu.value && !menu.value?.$el.contains(e.relatedTarget) || !target.value?.contains(e.relatedTarget)) {\n            hide();\n        }\n    }\n\n    function onClick(e: MouseEvent) {\n        emit('click', e);\n    }\n\n    function onClickToggle(e: MouseEvent) {\n        e.target?.dispatchEvent(new Event('focus', e));\n            \n        emit('clickToggle', e);\n\n        if(!e.defaultPrevented) {\n            toggle();\n        }\n    }\n\n    function onClickItem(e: PointerEvent) {\n        if(!(e.target instanceof HTMLElement)) {\n            hide();\n\n            return;\n        }\n\n        if(!isFocusable(e.target) && !e.defaultPrevented) {\n            hide();\n        }\n    }\n\n    watchEffect(() => {\n        if(expanded.value) {\n            window.addEventListener('resize', update);\n        }\n        else {\n            window.removeEventListener('resize', update);\n        }\n    });\n\n    return {\n        target,\n        menu,\n        alignment,\n        expanded,\n        floatingStyles,\n        placement,\n        side,\n        classes,\n        buttonClasses,\n        show,\n        hide,\n        toggle,\n        onBlur,\n        onClick,\n        onClickToggle,\n        onClickItem\n    };\n}","<script setup lang=\"ts\">\nimport { DropdownMenu } from '@vue-interface/dropdown-menu';\nimport { BtnDropdownEvents, BtnDropdownProps, useDropdownHandler } from './useDropdownHandler';\n\nconst props = withDefaults(defineProps<BtnDropdownProps>(), {\n    caret: true,\n    variant: 'btn-primary'\n});\n\nconst emit = defineEmits<BtnDropdownEvents>();\n\nconst {\n    target,\n    menu,\n    buttonClasses,\n    classes,\n    expanded,\n    floatingStyles,\n    show,\n    hide,\n    toggle,\n    onBlur,\n    onClickToggle,\n    onClickItem\n} = useDropdownHandler(props, emit);\n\ndefineExpose({\n    show,\n    hide,\n    toggle,\n});\n</script>\n\n<template>\n    <div\n        class=\"btn-group\"\n        :class=\"classes\">\n        <slot\n            name=\"button\"\n            v-bind=\"{ target: (el: HTMLElement) => target = el, expanded, onBlur, onClickToggle }\">\n            <button\n                ref=\"target\"\n                type=\"button\"\n                :class=\"{...buttonClasses, ['dropdown-toggle']: true}\"\n                aria-haspopup=\"true\"\n                :aria-expanded=\"expanded\"\n                @blur=\"onBlur\"\n                @click=\"onClickToggle\">\n                {{ label }}\n            </button>\n        </slot>\n        <DropdownMenu\n            ref=\"menu\"\n            :class=\"{\n                'show': expanded\n            }\"\n            :style=\"floatingStyles\"\n            @blur=\"onBlur\"\n            @click=\"onClickItem\"\n            @mousedown.prevent>\n            <slot />\n        </DropdownMenu>\n    </div>\n</template>","<script setup lang=\"ts\">\nimport { DropdownMenu } from '@vue-interface/dropdown-menu';\nimport { BtnDropdownEvents, BtnDropdownProps, useDropdownHandler } from './useDropdownHandler';\n\nconst props = withDefaults(defineProps<BtnDropdownProps>(), {\n    caret: true,\n    variant: 'btn-primary'\n});\n\nconst emit = defineEmits<BtnDropdownEvents>();\n\nconst {\n    target,\n    menu,\n    buttonClasses,\n    classes,\n    expanded,\n    floatingStyles,\n    show,\n    hide,\n    toggle,\n    onBlur,\n    onClickToggle,\n    onClickItem\n} = useDropdownHandler(props, emit);\n\ndefineExpose({\n    show,\n    hide,\n    toggle,\n});\n</script>\n\n<template>\n    <div\n        class=\"btn-group btn-dropdown-split\"\n        :class=\"classes\">\n        <slot\n            v-if=\"!dropleft\"\n            name=\"button\"\n            v-bind=\"{ expanded, onBlur, onClickToggle }\">\n            <button\n                type=\"button\"\n                :class=\"buttonClasses\"\n                aria-haspopup=\"true\"\n                :aria-expanded=\"expanded\"\n                @blur=\"onBlur\"\n                @click=\"onClick\">\n                {{ label }}\n            </button>\n        </slot>\n        <div class=\"btn-group\">\n            <slot\n                name=\"toggle\"\n                v-bind=\"{ target: (el: HTMLElement) => target = el, expanded, onBlur, onClickToggle }\">\n                <button\n                    ref=\"target\"\n                    type=\"button\"\n                    aria-haspopup=\"true\"\n                    :aria-expanded=\"expanded\"\n                    :class=\"{...buttonClasses, 'dropdown-toggle': true, 'dropdown-toggle-split': split}\"\n                    @blur=\"onBlur\"\n                    @click=\"onClickToggle\" />\n            </slot>\n            <DropdownMenu\n                ref=\"menu\"\n                :class=\"{\n                    'show': expanded\n                }\"\n                :style=\"floatingStyles\"\n                @blur=\"onBlur\"\n                @click=\"onClickItem\"\n                @mousedown.prevent>\n                <slot />\n            </DropdownMenu>\n        </div>\n        <slot\n            v-if=\"dropleft\"\n            name=\"button\"\n            v-bind=\"{ expanded, onBlur, onClickToggle }\">\n            <button\n                type=\"button\"\n                :class=\"buttonClasses\"\n                aria-haspopup=\"true\"\n                :aria-expanded=\"expanded\"\n                @blur=\"onBlur\"\n                @click=\"onClick\">\n                {{ label }}\n            </button>\n        </slot>\n    </div>\n</template>","<script setup lang=\"ts\">\nimport { useTemplateRef } from 'vue';\nimport { ComponentExposed } from 'vue-component-type-helpers';\nimport BtnDropdownSingle from './BtnDropdownSingle.vue';\nimport BtnDropdownSplit from './BtnDropdownSplit.vue';\nimport { BtnDropdownEvents, BtnDropdownProps } from './useDropdownHandler';\n\nconst props = withDefaults(defineProps<{\n    split?: boolean\n} & BtnDropdownProps>(), {\n    split: false,\n    caret: true\n});\n\nconst emit = defineEmits<BtnDropdownEvents>();\nconst el = useTemplateRef<ComponentExposed<typeof BtnDropdownSingle | typeof BtnDropdownSplit>>('el');\n\ndefineExpose({\n    show: () => el.value?.show(),\n    hide: () => el.value?.hide(),\n    toggle: () => el.value?.hide(),\n});\n</script>\n\n<template>\n    <Component\n        ref=\"el\"\n        :is=\"!split ? BtnDropdownSingle : BtnDropdownSplit\"\n        v-bind=\"props\"\n        @click=\"(e: MouseEvent) => emit('click', e)\"\n        @click-toggle=\"(e: MouseEvent) => emit('clickToggle', e)\"\n        @show=\"() => emit('show')\"\n        @hide=\"() => emit('hide')\">\n        <template #button=\"slot\">\n            <slot\n                name=\"button\"\n                v-bind=\"slot\" />\n        </template>\n        <template #toggle=\"slot\">\n            <slot\n                name=\"toggle\"\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":["useDropdownHandler","props","emit","target","ref","menu","expanded","alignment","computed","side","placement","classes","buttonClasses","value","floatingStyles","update","useFloating","offset","flip","show","hide","toggle","isFocusable","element","nodes","i","onBlur","e","onClick","onClickToggle","onClickItem","watchEffect","__props","__emit","__expose","_createElementBlock","_normalizeClass","_unref","_renderSlot","_ctx","_normalizeProps","_guardReactiveProps","el","_createElementVNode","_cache","args","_hoisted_1","_createVNode","DropdownMenu","_hoisted_2","_hoisted_4","useTemplateRef","_openBlock","_createBlock","_resolveDynamicComponent","BtnDropdownSplit","BtnDropdownSingle","_mergeProps","_withCtx","slot"],"mappings":"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"}
+{"version":3,"file":"btn-dropdown.js","sources":["../src/useDropdownHandler.ts","../src/BtnDropdownSingle.vue","../src/BtnDropdownSplit.vue","../src/BtnDropdown.vue"],"sourcesContent":["import { flip, offset, Placement, type Alignment, type Middleware, type OffsetOptions, type Side } from '@floating-ui/dom';\nimport { useFloating, UseFloatingReturn } from '@floating-ui/vue';\nimport { DropdownMenu } from '@vue-interface/dropdown-menu';\nimport { computed, ComputedRef, Ref, ref, watchEffect, type EmitFn, type HTMLAttributes } from 'vue';\n\ntype LiteralUnion<T extends U, U = string> = T | (U & Record<never, never>);\n\nexport type BtnGroupSizes = 'btn-group-xs'\n    | 'btn-group-sm' \n    | 'btn-group-md'\n    | 'btn-group-lg'\n    | 'btn-group-xl'\n    | 'btn-group-2xl'\n    | 'btn-group-3xl'\n    | 'btn-group-4xl';\n\nexport type BtnDropdownProps = {\n    align?: Alignment;\n    block?: boolean;\n    buttonClass?: HTMLAttributes['class'],\n    caret?: boolean;\n    dropup?: boolean;\n    dropright?: boolean;\n    dropleft?: boolean;\n    label?: string;\n    offset?: OffsetOptions,\n    middleware?: Middleware[],\n    side?: Side;\n    size?: LiteralUnion<BtnGroupSizes>;\n    split?: boolean;\n    variant?: string;\n}\n\nexport type BtnDropdownEvents = {\n    click: [event: MouseEvent];\n    clickToggle: [event: MouseEvent];\n    show: [],\n    hide: []\n}\n\nexport type UseDropdownHandler = {\n    target: Ref<HTMLElement|undefined>;\n    menu: Ref<InstanceType<typeof DropdownMenu>|undefined>;\n    alignment: ComputedRef<Alignment>;\n    expanded: Ref<boolean>;\n    floatingStyles: UseFloatingReturn['floatingStyles'];\n    placement: ComputedRef<Placement>;\n    side: ComputedRef<Side>;\n    classes: ComputedRef<Record<string, boolean|undefined>>;\n    buttonClasses: ComputedRef<Record<string, boolean>>;\n    show: () => void;\n    hide: () => void;\n    toggle: () => void;\n    onBlur: (e: FocusEvent) => void;\n    onClick: (e: MouseEvent) => void;\n    onClickToggle: (e: MouseEvent) => void;\n    onClickItem: (e: PointerEvent) => void;\n}\n\nexport function useDropdownHandler(props: BtnDropdownProps, emit: EmitFn<BtnDropdownEvents>): UseDropdownHandler {\n    const target = ref<HTMLElement>();\n    const menu = ref<InstanceType<typeof DropdownMenu>>();\n    const expanded = ref(false);\n\n    const alignment = computed<Alignment>(() => props.align ?? 'start');\n\n    const side = computed<Side>(() => {\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 placement = computed<Placement>(() => `${side.value}-${alignment.value}`);\n\n    const classes = computed<Record<string,boolean|undefined>>(() => ({\n        'dropdown': props.dropup && props.dropright && props.dropleft,\n        'dropup': props.dropup,\n        'dropright': props.dropright,\n        'dropleft': props.dropleft,\n        'expanded': expanded.value,\n        [props.size ?? '']: !!props.size,\n    }));\n    \n    const buttonClasses = computed(() => {\n        const classes = {\n            btn: true,\n            [props.variant ?? '']: !!props.variant,\n            'btn-block': !!props.block,\n            'no-caret': !props.caret\n        };\n        \n        if(typeof props.buttonClass === 'string') {\n            classes[props.buttonClass] = true;\n        }\n        else if(Array.isArray(props.buttonClass)) {\n            for(const value of props.buttonClass) {\n                classes[value] = true;\n            }\n        }\n        else if(props.buttonClass) {\n            Object.assign(classes, props.buttonClass);\n        }\n\n        return classes;\n    });\n\n    const { floatingStyles, update } = useFloating(target, menu, {\n        placement: placement,\n        middleware: props.middleware ?? [\n            offset(props.offset ?? 5),\n            flip()\n        ]\n    });\n\n    function show() {\n        expanded.value = true;\n\n        if(!target.value || !menu.value) {\n            return;\n        }\n\n        update();\n\n        emit('show');\n    }\n\n    function hide() {\n        expanded.value = false;\n\n        target.value?.blur();\n\n        emit('hide');\n    }\n\n    function toggle() {\n        if(!expanded.value) {\n            show();\n        }\n        else {\n            hide();\n        }\n    }\n\n    function isFocusable(element: HTMLElement) {\n        const nodes = Array.from(menu.value?.$el.querySelectorAll('label, input, select, textarea') ?? []);\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        if(!(e.relatedTarget instanceof HTMLElement)) {\n            hide();\n            \n            return;\n        }\n        \n        if(menu.value && !menu.value?.$el.contains(e.relatedTarget) || !target.value?.contains(e.relatedTarget)) {\n            hide();\n        }\n    }\n\n    function onClick(e: MouseEvent) {\n        emit('click', e);\n    }\n\n    function onClickToggle(e: MouseEvent) {\n        e.target?.dispatchEvent(new Event('focus', e));\n            \n        emit('clickToggle', e);\n\n        if(!e.defaultPrevented) {\n            toggle();\n        }\n    }\n\n    function onClickItem(e: PointerEvent) {\n        if(!(e.target instanceof HTMLElement)) {\n            hide();\n\n            return;\n        }\n\n        if(!isFocusable(e.target) && !e.defaultPrevented) {\n            hide();\n        }\n    }\n\n    watchEffect(() => {\n        if(expanded.value) {\n            window.addEventListener('resize', update);\n        }\n        else {\n            window.removeEventListener('resize', update);\n        }\n    });\n\n    return {\n        target,\n        menu,\n        alignment,\n        expanded,\n        floatingStyles,\n        placement,\n        side,\n        classes,\n        buttonClasses,\n        show,\n        hide,\n        toggle,\n        onBlur,\n        onClick,\n        onClickToggle,\n        onClickItem\n    };\n}","<script setup lang=\"ts\">\nimport { DropdownMenu } from '@vue-interface/dropdown-menu';\nimport { BtnDropdownEvents, BtnDropdownProps, useDropdownHandler } from './useDropdownHandler';\n\nconst props = withDefaults(defineProps<BtnDropdownProps>(), {\n    caret: true,\n    variant: 'btn-primary'\n});\n\nconst emit = defineEmits<BtnDropdownEvents>();\n\nconst {\n    target,\n    menu,\n    buttonClasses,\n    classes,\n    expanded,\n    floatingStyles,\n    show,\n    hide,\n    toggle,\n    onBlur,\n    onClickToggle,\n    onClickItem\n} = useDropdownHandler(props, emit);\n\ndefineExpose({\n    show,\n    hide,\n    toggle,\n});\n</script>\n\n<template>\n    <div\n        class=\"btn-group\"\n        :class=\"classes\">\n        <slot\n            name=\"button\"\n            v-bind=\"{ target: (el: HTMLElement) => target = el, expanded, onBlur, onClickToggle }\">\n            <button\n                ref=\"target\"\n                type=\"button\"\n                :class=\"{...buttonClasses, ['dropdown-toggle']: true}\"\n                aria-haspopup=\"true\"\n                :aria-expanded=\"expanded\"\n                @blur=\"onBlur\"\n                @click=\"onClickToggle\">\n                {{ label }}\n            </button>\n        </slot>\n        <DropdownMenu\n            ref=\"menu\"\n            :class=\"{\n                'show': expanded\n            }\"\n            :style=\"floatingStyles\"\n            @blur=\"onBlur\"\n            @click=\"onClickItem\"\n            @mousedown.prevent>\n            <slot />\n        </DropdownMenu>\n    </div>\n</template>","<script setup lang=\"ts\">\nimport { DropdownMenu } from '@vue-interface/dropdown-menu';\nimport { BtnDropdownEvents, BtnDropdownProps, useDropdownHandler } from './useDropdownHandler';\n\nconst props = withDefaults(defineProps<BtnDropdownProps>(), {\n    caret: true,\n    variant: 'btn-primary'\n});\n\nconst emit = defineEmits<BtnDropdownEvents>();\n\nconst {\n    target,\n    menu,\n    buttonClasses,\n    classes,\n    expanded,\n    floatingStyles,\n    show,\n    hide,\n    toggle,\n    onBlur,\n    onClickToggle,\n    onClickItem\n} = useDropdownHandler(props, emit);\n\ndefineExpose({\n    show,\n    hide,\n    toggle,\n});\n</script>\n\n<template>\n    <div\n        class=\"btn-group btn-dropdown-split\"\n        :class=\"classes\">\n        <slot\n            v-if=\"!dropleft\"\n            name=\"button\"\n            v-bind=\"{ expanded, onBlur, onClickToggle }\">\n            <button\n                type=\"button\"\n                :class=\"buttonClasses\"\n                aria-haspopup=\"true\"\n                :aria-expanded=\"expanded\"\n                @blur=\"onBlur\"\n                @click=\"onClick\">\n                {{ label }}\n            </button>\n        </slot>\n        <div class=\"btn-group\">\n            <slot\n                name=\"toggle\"\n                v-bind=\"{ target: (el: HTMLElement) => target = el, expanded, onBlur, onClickToggle }\">\n                <button\n                    ref=\"target\"\n                    type=\"button\"\n                    aria-haspopup=\"true\"\n                    :aria-expanded=\"expanded\"\n                    :class=\"{...buttonClasses, 'dropdown-toggle': true, 'dropdown-toggle-split': split}\"\n                    @blur=\"onBlur\"\n                    @click=\"onClickToggle\" />\n            </slot>\n            <DropdownMenu\n                ref=\"menu\"\n                :class=\"{\n                    'show': expanded\n                }\"\n                :style=\"floatingStyles\"\n                @blur=\"onBlur\"\n                @click=\"onClickItem\"\n                @mousedown.prevent>\n                <slot />\n            </DropdownMenu>\n        </div>\n        <slot\n            v-if=\"dropleft\"\n            name=\"button\"\n            v-bind=\"{ expanded, onBlur, onClickToggle }\">\n            <button\n                type=\"button\"\n                :class=\"buttonClasses\"\n                aria-haspopup=\"true\"\n                :aria-expanded=\"expanded\"\n                @blur=\"onBlur\"\n                @click=\"onClick\">\n                {{ label }}\n            </button>\n        </slot>\n    </div>\n</template>","<script setup lang=\"ts\">\nimport { useTemplateRef } from 'vue';\nimport { type ComponentExposed } from 'vue-component-type-helpers';\nimport BtnDropdownSingle from './BtnDropdownSingle.vue';\nimport BtnDropdownSplit from './BtnDropdownSplit.vue';\nimport { BtnDropdownEvents, BtnDropdownProps } from './useDropdownHandler';\n\nconst props = withDefaults(defineProps<{\n    split?: boolean\n} & BtnDropdownProps>(), {\n    split: false,\n    caret: true\n});\n\nconst emit = defineEmits<BtnDropdownEvents>();\n\nconst el = useTemplateRef<ComponentExposed<typeof BtnDropdownSingle | typeof BtnDropdownSplit>>('el');\n\ndefineExpose({\n    hide: () => el.value?.hide(),\n    show: () => el.value?.show(),\n    toggle: () => el.value?.toggle(),\n});\n</script>\n\n<template>\n    <Component\n        ref=\"el\"\n        :is=\"!split ? BtnDropdownSingle : BtnDropdownSplit\"\n        v-bind=\"props\"\n        @click=\"(e: MouseEvent) => emit('click', e)\"\n        @click-toggle=\"(e: MouseEvent) => emit('clickToggle', e)\"\n        @show=\"() => emit('show')\"\n        @hide=\"() => emit('hide')\">\n        <template #button=\"slot\">\n            <slot\n                name=\"button\"\n                v-bind=\"slot\" />\n        </template>\n        <template #toggle=\"slot\">\n            <slot\n                name=\"toggle\"\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":["useDropdownHandler","props","emit","target","ref","menu","expanded","alignment","computed","side","placement","classes","buttonClasses","value","floatingStyles","update","useFloating","offset","flip","show","hide","toggle","isFocusable","element","nodes","i","onBlur","e","onClick","onClickToggle","onClickItem","watchEffect","__props","__emit","__expose","_createElementBlock","_normalizeClass","_unref","_renderSlot","_ctx","_normalizeProps","_guardReactiveProps","el","_createElementVNode","_cache","args","_hoisted_1","_createVNode","DropdownMenu","_hoisted_2","_hoisted_4","useTemplateRef","_openBlock","_createBlock","_resolveDynamicComponent","BtnDropdownSplit","BtnDropdownSingle","_mergeProps","_withCtx","slot"],"mappings":"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"}

package/dist/btn-dropdown.umd.cjs

@@ -1,2 +1,2 @@
-(function(C,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("@vue-interface/dropdown-menu"),require("@floating-ui/dom"),require("@floating-ui/vue")):typeof define=="function"&&define.amd?define(["exports","vue","@vue-interface/dropdown-menu","@floating-ui/dom","@floating-ui/vue"],e):(C=typeof globalThis<"u"?globalThis:C||self,e(C.BtnDropdown={},C.Vue,C.VueInterfaceDropdownMenu,C.FloatingUiDom,C.FloatingUiVue))})(this,(function(C,e,S,T,x){"use strict";function P(t,k){const c=e.ref(),p=e.ref(),a=e.ref(!1),d=e.computed(()=>t.align??"start"),g=e.computed(()=>t.dropup?"top":t.dropleft?"left":t.dropright?"right":"bottom"),i=e.computed(()=>`${g.value}-${d.value}`),s=e.computed(()=>({dropdown:t.dropup&&t.dropright&&t.dropleft,dropup:t.dropup,dropright:t.dropright,dropleft:t.dropleft,expanded:a.value,[t.size??""]:!!t.size})),f=e.computed(()=>{const r={btn:!0,[t.variant??""]:!!t.variant,"btn-block":!!t.block,"no-caret":!t.caret};if(typeof t.buttonClass=="string")r[t.buttonClass]=!0;else if(Array.isArray(t.buttonClass))for(const z of t.buttonClass)r[z]=!0;else t.buttonClass&&Object.assign(r,t.buttonClass);return r}),{floatingStyles:B,update:w}=x.useFloating(c,p,{placement:i,middleware:t.middleware??[T.offset(t.offset??5),T.flip()]});function b(){a.value=!0,!(!c.value||!p.value)&&(w(),k("show"))}function y(){a.value=!1,c.value?.blur(),k("hide")}function l(){a.value?y():b()}function m(r){const z=Array.from(p.value?.$el.querySelectorAll("label, input, select, textarea")??[]);for(const A in z)if(r===z[A])return!0;return!1}function h(r){if(!(r.relatedTarget instanceof HTMLElement)){y();return}(p.value&&!p.value?.$el.contains(r.relatedTarget)||!c.value?.contains(r.relatedTarget))&&y()}function u(r){k("click",r)}function n(r){r.target?.dispatchEvent(new Event("focus",r)),k("clickToggle",r),r.defaultPrevented||l()}function o(r){if(!(r.target instanceof HTMLElement)){y();return}!m(r.target)&&!r.defaultPrevented&&y()}return e.watchEffect(()=>{a.value?window.addEventListener("resize",w):window.removeEventListener("resize",w)}),{target:c,menu:p,alignment:d,expanded:a,floatingStyles:B,placement:i,side:g,classes:s,buttonClasses:f,show:b,hide:y,toggle:l,onBlur:h,onClick:u,onClickToggle:n,onClickItem:o}}const $=["aria-expanded"],D=e.defineComponent({__name:"BtnDropdownSingle",props:{align:{},block:{type:Boolean},buttonClass:{},caret:{type:Boolean,default:!0},dropup:{type:Boolean},dropright:{type:Boolean},dropleft:{type:Boolean},label:{},offset:{},middleware:{},side:{},size:{},split:{type:Boolean},variant:{default:"btn-primary"}},emits:["click","clickToggle","show","hide"],setup(t,{expose:k,emit:c}){const p=t,a=c,{target:d,menu:g,buttonClasses:i,classes:s,expanded:f,floatingStyles:B,show:w,hide:b,toggle:y,onBlur:l,onClickToggle:m,onClickItem:h}=P(p,a);return k({show:w,hide:b,toggle:y}),(u,n)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["btn-group",e.unref(s)])},[e.renderSlot(u.$slots,"button",e.normalizeProps(e.guardReactiveProps({target:o=>d.value=o,expanded:e.unref(f),onBlur:e.unref(l),onClickToggle:e.unref(m)})),()=>[e.createElementVNode("button",{ref_key:"target",ref:d,type:"button",class:e.normalizeClass({...e.unref(i),"dropdown-toggle":!0}),"aria-haspopup":"true","aria-expanded":e.unref(f),onBlur:n[0]||(n[0]=(...o)=>e.unref(l)&&e.unref(l)(...o)),onClick:n[1]||(n[1]=(...o)=>e.unref(m)&&e.unref(m)(...o))},e.toDisplayString(t.label),43,$)]),e.createVNode(e.unref(S.DropdownMenu),{ref_key:"menu",ref:g,class:e.normalizeClass({show:e.unref(f)}),style:e.normalizeStyle(e.unref(B)),onBlur:e.unref(l),onClick:e.unref(h),onMousedown:n[2]||(n[2]=e.withModifiers(()=>{},["prevent"]))},{default:e.withCtx(()=>[e.renderSlot(u.$slots,"default")]),_:3},8,["class","style","onBlur","onClick"])],2))}}),E=["aria-expanded"],V={class:"btn-group"},M=["aria-expanded"],N=["aria-expanded"],R=e.defineComponent({__name:"BtnDropdownSplit",props:{align:{},block:{type:Boolean},buttonClass:{},caret:{type:Boolean,default:!0},dropup:{type:Boolean},dropright:{type:Boolean},dropleft:{type:Boolean},label:{},offset:{},middleware:{},side:{},size:{},split:{type:Boolean},variant:{default:"btn-primary"}},emits:["click","clickToggle","show","hide"],setup(t,{expose:k,emit:c}){const p=t,a=c,{target:d,menu:g,buttonClasses:i,classes:s,expanded:f,floatingStyles:B,show:w,hide:b,toggle:y,onBlur:l,onClickToggle:m,onClickItem:h}=P(p,a);return k({show:w,hide:b,toggle:y}),(u,n)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["btn-group btn-dropdown-split",e.unref(s)])},[t.dropleft?e.createCommentVNode("",!0):e.renderSlot(u.$slots,"button",e.normalizeProps(e.mergeProps({key:0},{expanded:e.unref(f),onBlur:e.unref(l),onClickToggle:e.unref(m)})),()=>[e.createElementVNode("button",{type:"button",class:e.normalizeClass(e.unref(i)),"aria-haspopup":"true","aria-expanded":e.unref(f),onBlur:n[0]||(n[0]=(...o)=>e.unref(l)&&e.unref(l)(...o)),onClick:n[1]||(n[1]=(...o)=>u.onClick&&u.onClick(...o))},e.toDisplayString(t.label),43,E)]),e.createElementVNode("div",V,[e.renderSlot(u.$slots,"toggle",e.normalizeProps(e.guardReactiveProps({target:o=>d.value=o,expanded:e.unref(f),onBlur:e.unref(l),onClickToggle:e.unref(m)})),()=>[e.createElementVNode("button",{ref_key:"target",ref:d,type:"button","aria-haspopup":"true","aria-expanded":e.unref(f),class:e.normalizeClass({...e.unref(i),"dropdown-toggle":!0,"dropdown-toggle-split":t.split}),onBlur:n[2]||(n[2]=(...o)=>e.unref(l)&&e.unref(l)(...o)),onClick:n[3]||(n[3]=(...o)=>e.unref(m)&&e.unref(m)(...o))},null,42,M)]),e.createVNode(e.unref(S.DropdownMenu),{ref_key:"menu",ref:g,class:e.normalizeClass({show:e.unref(f)}),style:e.normalizeStyle(e.unref(B)),onBlur:e.unref(l),onClick:e.unref(h),onMousedown:n[4]||(n[4]=e.withModifiers(()=>{},["prevent"]))},{default:e.withCtx(()=>[e.renderSlot(u.$slots,"default")]),_:3},8,["class","style","onBlur","onClick"])]),t.dropleft?e.renderSlot(u.$slots,"button",e.normalizeProps(e.mergeProps({key:1},{expanded:e.unref(f),onBlur:e.unref(l),onClickToggle:e.unref(m)})),()=>[e.createElementVNode("button",{type:"button",class:e.normalizeClass(e.unref(i)),"aria-haspopup":"true","aria-expanded":e.unref(f),onBlur:n[5]||(n[5]=(...o)=>e.unref(l)&&e.unref(l)(...o)),onClick:n[6]||(n[6]=(...o)=>u.onClick&&u.onClick(...o))},e.toDisplayString(t.label),43,N)]):e.createCommentVNode("",!0)],2))}}),q=e.defineComponent({__name:"BtnDropdown",props:{split:{type:Boolean,default:!1},align:{},block:{type:Boolean},buttonClass:{},caret:{type:Boolean,default:!0},dropup:{type:Boolean},dropright:{type:Boolean},dropleft:{type:Boolean},label:{},offset:{},middleware:{},side:{},size:{},variant:{}},emits:["click","clickToggle","show","hide"],setup(t,{expose:k,emit:c}){const p=t,a=c,d=e.useTemplateRef("el");return k({show:()=>d.value?.show(),hide:()=>d.value?.hide(),toggle:()=>d.value?.hide()}),(g,i)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(t.split?R:D),e.mergeProps({ref_key:"el",ref:d},p,{onClick:i[0]||(i[0]=s=>a("click",s)),onClickToggle:i[1]||(i[1]=s=>a("clickToggle",s)),onShow:i[2]||(i[2]=()=>a("show")),onHide:i[3]||(i[3]=()=>a("hide"))}),{button:e.withCtx(s=>[e.renderSlot(g.$slots,"button",e.normalizeProps(e.guardReactiveProps(s)))]),toggle:e.withCtx(s=>[e.renderSlot(g.$slots,"toggle",e.normalizeProps(e.guardReactiveProps(s)))]),split:e.withCtx(s=>[e.renderSlot(g.$slots,"split",e.normalizeProps(e.guardReactiveProps(s)))]),default:e.withCtx(()=>[e.renderSlot(g.$slots,"default")]),_:3},16))}});C.BtnDropdown=q,Object.defineProperty(C,Symbol.toStringTag,{value:"Module"})}));
+(function(C,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("@vue-interface/dropdown-menu"),require("@floating-ui/dom"),require("@floating-ui/vue")):typeof define=="function"&&define.amd?define(["exports","vue","@vue-interface/dropdown-menu","@floating-ui/dom","@floating-ui/vue"],e):(C=typeof globalThis<"u"?globalThis:C||self,e(C.BtnDropdown={},C.Vue,C.VueInterfaceDropdownMenu,C.FloatingUiDom,C.FloatingUiVue))})(this,(function(C,e,S,T,x){"use strict";function P(t,k){const c=e.ref(),p=e.ref(),a=e.ref(!1),d=e.computed(()=>t.align??"start"),g=e.computed(()=>t.dropup?"top":t.dropleft?"left":t.dropright?"right":"bottom"),i=e.computed(()=>`${g.value}-${d.value}`),s=e.computed(()=>({dropdown:t.dropup&&t.dropright&&t.dropleft,dropup:t.dropup,dropright:t.dropright,dropleft:t.dropleft,expanded:a.value,[t.size??""]:!!t.size})),f=e.computed(()=>{const r={btn:!0,[t.variant??""]:!!t.variant,"btn-block":!!t.block,"no-caret":!t.caret};if(typeof t.buttonClass=="string")r[t.buttonClass]=!0;else if(Array.isArray(t.buttonClass))for(const z of t.buttonClass)r[z]=!0;else t.buttonClass&&Object.assign(r,t.buttonClass);return r}),{floatingStyles:B,update:w}=x.useFloating(c,p,{placement:i,middleware:t.middleware??[T.offset(t.offset??5),T.flip()]});function b(){a.value=!0,!(!c.value||!p.value)&&(w(),k("show"))}function y(){a.value=!1,c.value?.blur(),k("hide")}function l(){a.value?y():b()}function m(r){const z=Array.from(p.value?.$el.querySelectorAll("label, input, select, textarea")??[]);for(const A in z)if(r===z[A])return!0;return!1}function h(r){if(!(r.relatedTarget instanceof HTMLElement)){y();return}(p.value&&!p.value?.$el.contains(r.relatedTarget)||!c.value?.contains(r.relatedTarget))&&y()}function u(r){k("click",r)}function n(r){r.target?.dispatchEvent(new Event("focus",r)),k("clickToggle",r),r.defaultPrevented||l()}function o(r){if(!(r.target instanceof HTMLElement)){y();return}!m(r.target)&&!r.defaultPrevented&&y()}return e.watchEffect(()=>{a.value?window.addEventListener("resize",w):window.removeEventListener("resize",w)}),{target:c,menu:p,alignment:d,expanded:a,floatingStyles:B,placement:i,side:g,classes:s,buttonClasses:f,show:b,hide:y,toggle:l,onBlur:h,onClick:u,onClickToggle:n,onClickItem:o}}const $=["aria-expanded"],D=e.defineComponent({__name:"BtnDropdownSingle",props:{align:{},block:{type:Boolean},buttonClass:{},caret:{type:Boolean,default:!0},dropup:{type:Boolean},dropright:{type:Boolean},dropleft:{type:Boolean},label:{},offset:{},middleware:{},side:{},size:{},split:{type:Boolean},variant:{default:"btn-primary"}},emits:["click","clickToggle","show","hide"],setup(t,{expose:k,emit:c}){const p=t,a=c,{target:d,menu:g,buttonClasses:i,classes:s,expanded:f,floatingStyles:B,show:w,hide:b,toggle:y,onBlur:l,onClickToggle:m,onClickItem:h}=P(p,a);return k({show:w,hide:b,toggle:y}),(u,n)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["btn-group",e.unref(s)])},[e.renderSlot(u.$slots,"button",e.normalizeProps(e.guardReactiveProps({target:o=>d.value=o,expanded:e.unref(f),onBlur:e.unref(l),onClickToggle:e.unref(m)})),()=>[e.createElementVNode("button",{ref_key:"target",ref:d,type:"button",class:e.normalizeClass({...e.unref(i),"dropdown-toggle":!0}),"aria-haspopup":"true","aria-expanded":e.unref(f),onBlur:n[0]||(n[0]=(...o)=>e.unref(l)&&e.unref(l)(...o)),onClick:n[1]||(n[1]=(...o)=>e.unref(m)&&e.unref(m)(...o))},e.toDisplayString(t.label),43,$)]),e.createVNode(e.unref(S.DropdownMenu),{ref_key:"menu",ref:g,class:e.normalizeClass({show:e.unref(f)}),style:e.normalizeStyle(e.unref(B)),onBlur:e.unref(l),onClick:e.unref(h),onMousedown:n[2]||(n[2]=e.withModifiers(()=>{},["prevent"]))},{default:e.withCtx(()=>[e.renderSlot(u.$slots,"default")]),_:3},8,["class","style","onBlur","onClick"])],2))}}),E=["aria-expanded"],V={class:"btn-group"},M=["aria-expanded"],N=["aria-expanded"],R=e.defineComponent({__name:"BtnDropdownSplit",props:{align:{},block:{type:Boolean},buttonClass:{},caret:{type:Boolean,default:!0},dropup:{type:Boolean},dropright:{type:Boolean},dropleft:{type:Boolean},label:{},offset:{},middleware:{},side:{},size:{},split:{type:Boolean},variant:{default:"btn-primary"}},emits:["click","clickToggle","show","hide"],setup(t,{expose:k,emit:c}){const p=t,a=c,{target:d,menu:g,buttonClasses:i,classes:s,expanded:f,floatingStyles:B,show:w,hide:b,toggle:y,onBlur:l,onClickToggle:m,onClickItem:h}=P(p,a);return k({show:w,hide:b,toggle:y}),(u,n)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["btn-group btn-dropdown-split",e.unref(s)])},[t.dropleft?e.createCommentVNode("",!0):e.renderSlot(u.$slots,"button",e.normalizeProps(e.mergeProps({key:0},{expanded:e.unref(f),onBlur:e.unref(l),onClickToggle:e.unref(m)})),()=>[e.createElementVNode("button",{type:"button",class:e.normalizeClass(e.unref(i)),"aria-haspopup":"true","aria-expanded":e.unref(f),onBlur:n[0]||(n[0]=(...o)=>e.unref(l)&&e.unref(l)(...o)),onClick:n[1]||(n[1]=(...o)=>u.onClick&&u.onClick(...o))},e.toDisplayString(t.label),43,E)]),e.createElementVNode("div",V,[e.renderSlot(u.$slots,"toggle",e.normalizeProps(e.guardReactiveProps({target:o=>d.value=o,expanded:e.unref(f),onBlur:e.unref(l),onClickToggle:e.unref(m)})),()=>[e.createElementVNode("button",{ref_key:"target",ref:d,type:"button","aria-haspopup":"true","aria-expanded":e.unref(f),class:e.normalizeClass({...e.unref(i),"dropdown-toggle":!0,"dropdown-toggle-split":t.split}),onBlur:n[2]||(n[2]=(...o)=>e.unref(l)&&e.unref(l)(...o)),onClick:n[3]||(n[3]=(...o)=>e.unref(m)&&e.unref(m)(...o))},null,42,M)]),e.createVNode(e.unref(S.DropdownMenu),{ref_key:"menu",ref:g,class:e.normalizeClass({show:e.unref(f)}),style:e.normalizeStyle(e.unref(B)),onBlur:e.unref(l),onClick:e.unref(h),onMousedown:n[4]||(n[4]=e.withModifiers(()=>{},["prevent"]))},{default:e.withCtx(()=>[e.renderSlot(u.$slots,"default")]),_:3},8,["class","style","onBlur","onClick"])]),t.dropleft?e.renderSlot(u.$slots,"button",e.normalizeProps(e.mergeProps({key:1},{expanded:e.unref(f),onBlur:e.unref(l),onClickToggle:e.unref(m)})),()=>[e.createElementVNode("button",{type:"button",class:e.normalizeClass(e.unref(i)),"aria-haspopup":"true","aria-expanded":e.unref(f),onBlur:n[5]||(n[5]=(...o)=>e.unref(l)&&e.unref(l)(...o)),onClick:n[6]||(n[6]=(...o)=>u.onClick&&u.onClick(...o))},e.toDisplayString(t.label),43,N)]):e.createCommentVNode("",!0)],2))}}),q=e.defineComponent({__name:"BtnDropdown",props:{split:{type:Boolean,default:!1},align:{},block:{type:Boolean},buttonClass:{},caret:{type:Boolean,default:!0},dropup:{type:Boolean},dropright:{type:Boolean},dropleft:{type:Boolean},label:{},offset:{},middleware:{},side:{},size:{},variant:{}},emits:["click","clickToggle","show","hide"],setup(t,{expose:k,emit:c}){const p=t,a=c,d=e.useTemplateRef("el");return k({hide:()=>d.value?.hide(),show:()=>d.value?.show(),toggle:()=>d.value?.toggle()}),(g,i)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(t.split?R:D),e.mergeProps({ref_key:"el",ref:d},p,{onClick:i[0]||(i[0]=s=>a("click",s)),onClickToggle:i[1]||(i[1]=s=>a("clickToggle",s)),onShow:i[2]||(i[2]=()=>a("show")),onHide:i[3]||(i[3]=()=>a("hide"))}),{button:e.withCtx(s=>[e.renderSlot(g.$slots,"button",e.normalizeProps(e.guardReactiveProps(s)))]),toggle:e.withCtx(s=>[e.renderSlot(g.$slots,"toggle",e.normalizeProps(e.guardReactiveProps(s)))]),split:e.withCtx(s=>[e.renderSlot(g.$slots,"split",e.normalizeProps(e.guardReactiveProps(s)))]),default:e.withCtx(()=>[e.renderSlot(g.$slots,"default")]),_:3},16))}});C.BtnDropdown=q,Object.defineProperty(C,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/useDropdownHandler.ts","../src/BtnDropdownSingle.vue","../src/BtnDropdownSplit.vue","../src/BtnDropdown.vue"],"sourcesContent":["import { flip, offset, Placement, type Alignment, type Middleware, type OffsetOptions, type Side } from '@floating-ui/dom';\nimport { useFloating } from '@floating-ui/vue';\nimport { DropdownMenu } from '@vue-interface/dropdown-menu';\nimport { computed, ref, watchEffect, type EmitFn, type HTMLAttributes } from 'vue';\n\ntype LiteralUnion<T extends U, U = string> = T | (U & Record<never, never>);\n\nexport type BtnGroupSizes = 'btn-group-xs'\n    | 'btn-group-sm' \n    | 'btn-group-md'\n    | 'btn-group-lg'\n    | 'btn-group-xl'\n    | 'btn-group-2xl'\n    | 'btn-group-3xl'\n    | 'btn-group-4xl';\n\nexport type BtnDropdownProps = {\n    align?: Alignment;\n    block?: boolean;\n    buttonClass?: HTMLAttributes['class'],\n    caret?: boolean;\n    dropup?: boolean;\n    dropright?: boolean;\n    dropleft?: boolean;\n    label?: string;\n    offset?: OffsetOptions,\n    middleware?: Middleware[],\n    side?: Side;\n    size?: LiteralUnion<BtnGroupSizes>;\n    split?: boolean;\n    variant?: string;\n}\n\nexport type BtnDropdownEvents = {\n    click: [event: MouseEvent];\n    clickToggle: [event: MouseEvent];\n    show: [],\n    hide: []\n}\n\nexport function useDropdownHandler(props: BtnDropdownProps, emit: EmitFn<BtnDropdownEvents>) {\n    const target = ref<HTMLElement>();\n    const menu = ref<InstanceType<typeof DropdownMenu>>();\n    const expanded = ref(false);\n\n\n    const alignment = computed<Alignment>(() => props.align ?? 'start');\n\n    const side = computed<Side>(() => {\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 placement = computed<Placement>(() => `${side.value}-${alignment.value}`);\n\n    const classes = computed(() => ({\n        'dropdown': props.dropup && props.dropright && props.dropleft,\n        'dropup': props.dropup,\n        'dropright': props.dropright,\n        'dropleft': props.dropleft,\n        'expanded': expanded.value,\n        [props.size ?? '']: !!props.size,\n    }));\n    \n    const buttonClasses = computed(() => {\n        const classes = {\n            btn: true,\n            [props.variant ?? '']: !!props.variant,\n            'btn-block': !!props.block,\n            'no-caret': !props.caret\n        };\n        \n        if(typeof props.buttonClass === 'string') {\n            classes[props.buttonClass] = true;\n        }\n        else if(Array.isArray(props.buttonClass)) {\n            for(const value of props.buttonClass) {\n                classes[value] = true;\n            }\n        }\n        else if(props.buttonClass) {\n            Object.assign(classes, props.buttonClass);\n        }\n\n        return classes;\n    });\n\n    const { floatingStyles, update } = useFloating(target, menu, {\n        placement: placement,\n        middleware: props.middleware ?? [\n            offset(props.offset ?? 5),\n            flip()\n        ]\n    });\n\n    function show() {\n        expanded.value = true;\n\n        if(!target.value || !menu.value) {\n            return;\n        }\n\n        update();\n\n        emit('show');\n    }\n\n    function hide() {\n        expanded.value = false;\n\n        target.value?.blur();\n\n        emit('hide');\n    }\n\n    function toggle() {\n        if(!expanded.value) {\n            show();\n        }\n        else {\n            hide();\n        }\n    }\n\n    function isFocusable(element: HTMLElement) {\n        const nodes = Array.from(menu.value?.$el.querySelectorAll('label, input, select, textarea') ?? []);\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        if(!(e.relatedTarget instanceof HTMLElement)) {\n            hide();\n            \n            return;\n        }\n        \n        if(menu.value && !menu.value?.$el.contains(e.relatedTarget) || !target.value?.contains(e.relatedTarget)) {\n            hide();\n        }\n    }\n\n    function onClick(e: MouseEvent) {\n        emit('click', e);\n    }\n\n    function onClickToggle(e: MouseEvent) {\n        e.target?.dispatchEvent(new Event('focus', e));\n            \n        emit('clickToggle', e);\n\n        if(!e.defaultPrevented) {\n            toggle();\n        }\n    }\n\n    function onClickItem(e: PointerEvent) {\n        if(!(e.target instanceof HTMLElement)) {\n            hide();\n\n            return;\n        }\n\n        if(!isFocusable(e.target) && !e.defaultPrevented) {\n            hide();\n        }\n    }\n\n    watchEffect(() => {\n        if(expanded.value) {\n            window.addEventListener('resize', update);\n        }\n        else {\n            window.removeEventListener('resize', update);\n        }\n    });\n\n    return {\n        target,\n        menu,\n        alignment,\n        expanded,\n        floatingStyles,\n        placement,\n        side,\n        classes,\n        buttonClasses,\n        show,\n        hide,\n        toggle,\n        onBlur,\n        onClick,\n        onClickToggle,\n        onClickItem\n    };\n}","<script setup lang=\"ts\">\nimport { DropdownMenu } from '@vue-interface/dropdown-menu';\nimport { BtnDropdownEvents, BtnDropdownProps, useDropdownHandler } from './useDropdownHandler';\n\nconst props = withDefaults(defineProps<BtnDropdownProps>(), {\n    caret: true,\n    variant: 'btn-primary'\n});\n\nconst emit = defineEmits<BtnDropdownEvents>();\n\nconst {\n    target,\n    menu,\n    buttonClasses,\n    classes,\n    expanded,\n    floatingStyles,\n    show,\n    hide,\n    toggle,\n    onBlur,\n    onClickToggle,\n    onClickItem\n} = useDropdownHandler(props, emit);\n\ndefineExpose({\n    show,\n    hide,\n    toggle,\n});\n</script>\n\n<template>\n    <div\n        class=\"btn-group\"\n        :class=\"classes\">\n        <slot\n            name=\"button\"\n            v-bind=\"{ target: (el: HTMLElement) => target = el, expanded, onBlur, onClickToggle }\">\n            <button\n                ref=\"target\"\n                type=\"button\"\n                :class=\"{...buttonClasses, ['dropdown-toggle']: true}\"\n                aria-haspopup=\"true\"\n                :aria-expanded=\"expanded\"\n                @blur=\"onBlur\"\n                @click=\"onClickToggle\">\n                {{ label }}\n            </button>\n        </slot>\n        <DropdownMenu\n            ref=\"menu\"\n            :class=\"{\n                'show': expanded\n            }\"\n            :style=\"floatingStyles\"\n            @blur=\"onBlur\"\n            @click=\"onClickItem\"\n            @mousedown.prevent>\n            <slot />\n        </DropdownMenu>\n    </div>\n</template>","<script setup lang=\"ts\">\nimport { DropdownMenu } from '@vue-interface/dropdown-menu';\nimport { BtnDropdownEvents, BtnDropdownProps, useDropdownHandler } from './useDropdownHandler';\n\nconst props = withDefaults(defineProps<BtnDropdownProps>(), {\n    caret: true,\n    variant: 'btn-primary'\n});\n\nconst emit = defineEmits<BtnDropdownEvents>();\n\nconst {\n    target,\n    menu,\n    buttonClasses,\n    classes,\n    expanded,\n    floatingStyles,\n    show,\n    hide,\n    toggle,\n    onBlur,\n    onClickToggle,\n    onClickItem\n} = useDropdownHandler(props, emit);\n\ndefineExpose({\n    show,\n    hide,\n    toggle,\n});\n</script>\n\n<template>\n    <div\n        class=\"btn-group btn-dropdown-split\"\n        :class=\"classes\">\n        <slot\n            v-if=\"!dropleft\"\n            name=\"button\"\n            v-bind=\"{ expanded, onBlur, onClickToggle }\">\n            <button\n                type=\"button\"\n                :class=\"buttonClasses\"\n                aria-haspopup=\"true\"\n                :aria-expanded=\"expanded\"\n                @blur=\"onBlur\"\n                @click=\"onClick\">\n                {{ label }}\n            </button>\n        </slot>\n        <div class=\"btn-group\">\n            <slot\n                name=\"toggle\"\n                v-bind=\"{ target: (el: HTMLElement) => target = el, expanded, onBlur, onClickToggle }\">\n                <button\n                    ref=\"target\"\n                    type=\"button\"\n                    aria-haspopup=\"true\"\n                    :aria-expanded=\"expanded\"\n                    :class=\"{...buttonClasses, 'dropdown-toggle': true, 'dropdown-toggle-split': split}\"\n                    @blur=\"onBlur\"\n                    @click=\"onClickToggle\" />\n            </slot>\n            <DropdownMenu\n                ref=\"menu\"\n                :class=\"{\n                    'show': expanded\n                }\"\n                :style=\"floatingStyles\"\n                @blur=\"onBlur\"\n                @click=\"onClickItem\"\n                @mousedown.prevent>\n                <slot />\n            </DropdownMenu>\n        </div>\n        <slot\n            v-if=\"dropleft\"\n            name=\"button\"\n            v-bind=\"{ expanded, onBlur, onClickToggle }\">\n            <button\n                type=\"button\"\n                :class=\"buttonClasses\"\n                aria-haspopup=\"true\"\n                :aria-expanded=\"expanded\"\n                @blur=\"onBlur\"\n                @click=\"onClick\">\n                {{ label }}\n            </button>\n        </slot>\n    </div>\n</template>","<script setup lang=\"ts\">\nimport { useTemplateRef } from 'vue';\nimport { ComponentExposed } from 'vue-component-type-helpers';\nimport BtnDropdownSingle from './BtnDropdownSingle.vue';\nimport BtnDropdownSplit from './BtnDropdownSplit.vue';\nimport { BtnDropdownEvents, BtnDropdownProps } from './useDropdownHandler';\n\nconst props = withDefaults(defineProps<{\n    split?: boolean\n} & BtnDropdownProps>(), {\n    split: false,\n    caret: true\n});\n\nconst emit = defineEmits<BtnDropdownEvents>();\nconst el = useTemplateRef<ComponentExposed<typeof BtnDropdownSingle | typeof BtnDropdownSplit>>('el');\n\ndefineExpose({\n    show: () => el.value?.show(),\n    hide: () => el.value?.hide(),\n    toggle: () => el.value?.hide(),\n});\n</script>\n\n<template>\n    <Component\n        ref=\"el\"\n        :is=\"!split ? BtnDropdownSingle : BtnDropdownSplit\"\n        v-bind=\"props\"\n        @click=\"(e: MouseEvent) => emit('click', e)\"\n        @click-toggle=\"(e: MouseEvent) => emit('clickToggle', e)\"\n        @show=\"() => emit('show')\"\n        @hide=\"() => emit('hide')\">\n        <template #button=\"slot\">\n            <slot\n                name=\"button\"\n                v-bind=\"slot\" />\n        </template>\n        <template #toggle=\"slot\">\n            <slot\n                name=\"toggle\"\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":["useDropdownHandler","props","emit","target","ref","menu","expanded","alignment","computed","side","placement","classes","buttonClasses","value","floatingStyles","update","useFloating","offset","flip","show","hide","toggle","isFocusable","element","nodes","i","onBlur","e","onClick","onClickToggle","onClickItem","watchEffect","__props","__emit","__expose","_createElementBlock","_normalizeClass","_unref","_renderSlot","_ctx","_normalizeProps","_guardReactiveProps","el","_createElementVNode","_cache","args","_hoisted_1","_createVNode","DropdownMenu","_hoisted_2","_hoisted_4","useTemplateRef","_openBlock","_createBlock","_resolveDynamicComponent","BtnDropdownSplit","BtnDropdownSingle","_mergeProps","_withCtx","slot"],"mappings":"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"}
+{"version":3,"file":"btn-dropdown.umd.cjs","sources":["../src/useDropdownHandler.ts","../src/BtnDropdownSingle.vue","../src/BtnDropdownSplit.vue","../src/BtnDropdown.vue"],"sourcesContent":["import { flip, offset, Placement, type Alignment, type Middleware, type OffsetOptions, type Side } from '@floating-ui/dom';\nimport { useFloating, UseFloatingReturn } from '@floating-ui/vue';\nimport { DropdownMenu } from '@vue-interface/dropdown-menu';\nimport { computed, ComputedRef, Ref, ref, watchEffect, type EmitFn, type HTMLAttributes } from 'vue';\n\ntype LiteralUnion<T extends U, U = string> = T | (U & Record<never, never>);\n\nexport type BtnGroupSizes = 'btn-group-xs'\n    | 'btn-group-sm' \n    | 'btn-group-md'\n    | 'btn-group-lg'\n    | 'btn-group-xl'\n    | 'btn-group-2xl'\n    | 'btn-group-3xl'\n    | 'btn-group-4xl';\n\nexport type BtnDropdownProps = {\n    align?: Alignment;\n    block?: boolean;\n    buttonClass?: HTMLAttributes['class'],\n    caret?: boolean;\n    dropup?: boolean;\n    dropright?: boolean;\n    dropleft?: boolean;\n    label?: string;\n    offset?: OffsetOptions,\n    middleware?: Middleware[],\n    side?: Side;\n    size?: LiteralUnion<BtnGroupSizes>;\n    split?: boolean;\n    variant?: string;\n}\n\nexport type BtnDropdownEvents = {\n    click: [event: MouseEvent];\n    clickToggle: [event: MouseEvent];\n    show: [],\n    hide: []\n}\n\nexport type UseDropdownHandler = {\n    target: Ref<HTMLElement|undefined>;\n    menu: Ref<InstanceType<typeof DropdownMenu>|undefined>;\n    alignment: ComputedRef<Alignment>;\n    expanded: Ref<boolean>;\n    floatingStyles: UseFloatingReturn['floatingStyles'];\n    placement: ComputedRef<Placement>;\n    side: ComputedRef<Side>;\n    classes: ComputedRef<Record<string, boolean|undefined>>;\n    buttonClasses: ComputedRef<Record<string, boolean>>;\n    show: () => void;\n    hide: () => void;\n    toggle: () => void;\n    onBlur: (e: FocusEvent) => void;\n    onClick: (e: MouseEvent) => void;\n    onClickToggle: (e: MouseEvent) => void;\n    onClickItem: (e: PointerEvent) => void;\n}\n\nexport function useDropdownHandler(props: BtnDropdownProps, emit: EmitFn<BtnDropdownEvents>): UseDropdownHandler {\n    const target = ref<HTMLElement>();\n    const menu = ref<InstanceType<typeof DropdownMenu>>();\n    const expanded = ref(false);\n\n    const alignment = computed<Alignment>(() => props.align ?? 'start');\n\n    const side = computed<Side>(() => {\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 placement = computed<Placement>(() => `${side.value}-${alignment.value}`);\n\n    const classes = computed<Record<string,boolean|undefined>>(() => ({\n        'dropdown': props.dropup && props.dropright && props.dropleft,\n        'dropup': props.dropup,\n        'dropright': props.dropright,\n        'dropleft': props.dropleft,\n        'expanded': expanded.value,\n        [props.size ?? '']: !!props.size,\n    }));\n    \n    const buttonClasses = computed(() => {\n        const classes = {\n            btn: true,\n            [props.variant ?? '']: !!props.variant,\n            'btn-block': !!props.block,\n            'no-caret': !props.caret\n        };\n        \n        if(typeof props.buttonClass === 'string') {\n            classes[props.buttonClass] = true;\n        }\n        else if(Array.isArray(props.buttonClass)) {\n            for(const value of props.buttonClass) {\n                classes[value] = true;\n            }\n        }\n        else if(props.buttonClass) {\n            Object.assign(classes, props.buttonClass);\n        }\n\n        return classes;\n    });\n\n    const { floatingStyles, update } = useFloating(target, menu, {\n        placement: placement,\n        middleware: props.middleware ?? [\n            offset(props.offset ?? 5),\n            flip()\n        ]\n    });\n\n    function show() {\n        expanded.value = true;\n\n        if(!target.value || !menu.value) {\n            return;\n        }\n\n        update();\n\n        emit('show');\n    }\n\n    function hide() {\n        expanded.value = false;\n\n        target.value?.blur();\n\n        emit('hide');\n    }\n\n    function toggle() {\n        if(!expanded.value) {\n            show();\n        }\n        else {\n            hide();\n        }\n    }\n\n    function isFocusable(element: HTMLElement) {\n        const nodes = Array.from(menu.value?.$el.querySelectorAll('label, input, select, textarea') ?? []);\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        if(!(e.relatedTarget instanceof HTMLElement)) {\n            hide();\n            \n            return;\n        }\n        \n        if(menu.value && !menu.value?.$el.contains(e.relatedTarget) || !target.value?.contains(e.relatedTarget)) {\n            hide();\n        }\n    }\n\n    function onClick(e: MouseEvent) {\n        emit('click', e);\n    }\n\n    function onClickToggle(e: MouseEvent) {\n        e.target?.dispatchEvent(new Event('focus', e));\n            \n        emit('clickToggle', e);\n\n        if(!e.defaultPrevented) {\n            toggle();\n        }\n    }\n\n    function onClickItem(e: PointerEvent) {\n        if(!(e.target instanceof HTMLElement)) {\n            hide();\n\n            return;\n        }\n\n        if(!isFocusable(e.target) && !e.defaultPrevented) {\n            hide();\n        }\n    }\n\n    watchEffect(() => {\n        if(expanded.value) {\n            window.addEventListener('resize', update);\n        }\n        else {\n            window.removeEventListener('resize', update);\n        }\n    });\n\n    return {\n        target,\n        menu,\n        alignment,\n        expanded,\n        floatingStyles,\n        placement,\n        side,\n        classes,\n        buttonClasses,\n        show,\n        hide,\n        toggle,\n        onBlur,\n        onClick,\n        onClickToggle,\n        onClickItem\n    };\n}","<script setup lang=\"ts\">\nimport { DropdownMenu } from '@vue-interface/dropdown-menu';\nimport { BtnDropdownEvents, BtnDropdownProps, useDropdownHandler } from './useDropdownHandler';\n\nconst props = withDefaults(defineProps<BtnDropdownProps>(), {\n    caret: true,\n    variant: 'btn-primary'\n});\n\nconst emit = defineEmits<BtnDropdownEvents>();\n\nconst {\n    target,\n    menu,\n    buttonClasses,\n    classes,\n    expanded,\n    floatingStyles,\n    show,\n    hide,\n    toggle,\n    onBlur,\n    onClickToggle,\n    onClickItem\n} = useDropdownHandler(props, emit);\n\ndefineExpose({\n    show,\n    hide,\n    toggle,\n});\n</script>\n\n<template>\n    <div\n        class=\"btn-group\"\n        :class=\"classes\">\n        <slot\n            name=\"button\"\n            v-bind=\"{ target: (el: HTMLElement) => target = el, expanded, onBlur, onClickToggle }\">\n            <button\n                ref=\"target\"\n                type=\"button\"\n                :class=\"{...buttonClasses, ['dropdown-toggle']: true}\"\n                aria-haspopup=\"true\"\n                :aria-expanded=\"expanded\"\n                @blur=\"onBlur\"\n                @click=\"onClickToggle\">\n                {{ label }}\n            </button>\n        </slot>\n        <DropdownMenu\n            ref=\"menu\"\n            :class=\"{\n                'show': expanded\n            }\"\n            :style=\"floatingStyles\"\n            @blur=\"onBlur\"\n            @click=\"onClickItem\"\n            @mousedown.prevent>\n            <slot />\n        </DropdownMenu>\n    </div>\n</template>","<script setup lang=\"ts\">\nimport { DropdownMenu } from '@vue-interface/dropdown-menu';\nimport { BtnDropdownEvents, BtnDropdownProps, useDropdownHandler } from './useDropdownHandler';\n\nconst props = withDefaults(defineProps<BtnDropdownProps>(), {\n    caret: true,\n    variant: 'btn-primary'\n});\n\nconst emit = defineEmits<BtnDropdownEvents>();\n\nconst {\n    target,\n    menu,\n    buttonClasses,\n    classes,\n    expanded,\n    floatingStyles,\n    show,\n    hide,\n    toggle,\n    onBlur,\n    onClickToggle,\n    onClickItem\n} = useDropdownHandler(props, emit);\n\ndefineExpose({\n    show,\n    hide,\n    toggle,\n});\n</script>\n\n<template>\n    <div\n        class=\"btn-group btn-dropdown-split\"\n        :class=\"classes\">\n        <slot\n            v-if=\"!dropleft\"\n            name=\"button\"\n            v-bind=\"{ expanded, onBlur, onClickToggle }\">\n            <button\n                type=\"button\"\n                :class=\"buttonClasses\"\n                aria-haspopup=\"true\"\n                :aria-expanded=\"expanded\"\n                @blur=\"onBlur\"\n                @click=\"onClick\">\n                {{ label }}\n            </button>\n        </slot>\n        <div class=\"btn-group\">\n            <slot\n                name=\"toggle\"\n                v-bind=\"{ target: (el: HTMLElement) => target = el, expanded, onBlur, onClickToggle }\">\n                <button\n                    ref=\"target\"\n                    type=\"button\"\n                    aria-haspopup=\"true\"\n                    :aria-expanded=\"expanded\"\n                    :class=\"{...buttonClasses, 'dropdown-toggle': true, 'dropdown-toggle-split': split}\"\n                    @blur=\"onBlur\"\n                    @click=\"onClickToggle\" />\n            </slot>\n            <DropdownMenu\n                ref=\"menu\"\n                :class=\"{\n                    'show': expanded\n                }\"\n                :style=\"floatingStyles\"\n                @blur=\"onBlur\"\n                @click=\"onClickItem\"\n                @mousedown.prevent>\n                <slot />\n            </DropdownMenu>\n        </div>\n        <slot\n            v-if=\"dropleft\"\n            name=\"button\"\n            v-bind=\"{ expanded, onBlur, onClickToggle }\">\n            <button\n                type=\"button\"\n                :class=\"buttonClasses\"\n                aria-haspopup=\"true\"\n                :aria-expanded=\"expanded\"\n                @blur=\"onBlur\"\n                @click=\"onClick\">\n                {{ label }}\n            </button>\n        </slot>\n    </div>\n</template>","<script setup lang=\"ts\">\nimport { useTemplateRef } from 'vue';\nimport { type ComponentExposed } from 'vue-component-type-helpers';\nimport BtnDropdownSingle from './BtnDropdownSingle.vue';\nimport BtnDropdownSplit from './BtnDropdownSplit.vue';\nimport { BtnDropdownEvents, BtnDropdownProps } from './useDropdownHandler';\n\nconst props = withDefaults(defineProps<{\n    split?: boolean\n} & BtnDropdownProps>(), {\n    split: false,\n    caret: true\n});\n\nconst emit = defineEmits<BtnDropdownEvents>();\n\nconst el = useTemplateRef<ComponentExposed<typeof BtnDropdownSingle | typeof BtnDropdownSplit>>('el');\n\ndefineExpose({\n    hide: () => el.value?.hide(),\n    show: () => el.value?.show(),\n    toggle: () => el.value?.toggle(),\n});\n</script>\n\n<template>\n    <Component\n        ref=\"el\"\n        :is=\"!split ? BtnDropdownSingle : BtnDropdownSplit\"\n        v-bind=\"props\"\n        @click=\"(e: MouseEvent) => emit('click', e)\"\n        @click-toggle=\"(e: MouseEvent) => emit('clickToggle', e)\"\n        @show=\"() => emit('show')\"\n        @hide=\"() => emit('hide')\">\n        <template #button=\"slot\">\n            <slot\n                name=\"button\"\n                v-bind=\"slot\" />\n        </template>\n        <template #toggle=\"slot\">\n            <slot\n                name=\"toggle\"\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":["useDropdownHandler","props","emit","target","ref","menu","expanded","alignment","computed","side","placement","classes","buttonClasses","value","floatingStyles","update","useFloating","offset","flip","show","hide","toggle","isFocusable","element","nodes","i","onBlur","e","onClick","onClickToggle","onClickItem","watchEffect","__props","__emit","__expose","_createElementBlock","_normalizeClass","_unref","_renderSlot","_ctx","_normalizeProps","_guardReactiveProps","el","_createElementVNode","_cache","args","_hoisted_1","_createVNode","DropdownMenu","_hoisted_2","_hoisted_4","useTemplateRef","_openBlock","_createBlock","_resolveDynamicComponent","BtnDropdownSplit","BtnDropdownSingle","_mergeProps","_withCtx","slot"],"mappings":"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"}

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

@@ -0,0 +1,358 @@
+import { BtnDropdownProps } from './useDropdownHandler';
+type __VLS_Props = {
+    split?: boolean;
+} & BtnDropdownProps;
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        button?(_: {
+            target: (el: HTMLElement) => HTMLElement;
+            expanded: boolean;
+            onBlur: (e: FocusEvent) => void;
+            onClickToggle: (e: MouseEvent) => void;
+        }): any;
+        toggle?(_: any): any;
+        split?(_: any): any;
+        default?(_: {}): any;
+    };
+    refs: {
+        el: ({
+            $: import('vue').ComponentInternalInstance;
+            $data: {};
+            $props: {
+                readonly align?: import('@floating-ui/dom').Alignment | undefined;
+                readonly block?: boolean | undefined;
+                readonly buttonClass?: import('vue').HTMLAttributes["class"];
+                readonly caret?: boolean | undefined;
+                readonly dropup?: boolean | undefined;
+                readonly dropright?: boolean | undefined;
+                readonly dropleft?: boolean | undefined;
+                readonly label?: string | undefined;
+                readonly offset?: import('@floating-ui/dom').OffsetOptions | undefined;
+                readonly middleware?: import('@floating-ui/dom').Middleware[] | undefined;
+                readonly side?: import('@floating-ui/dom').Side | undefined;
+                readonly size?: (import('./useDropdownHandler').BtnGroupSizes | (string & Record<never, never>)) | undefined;
+                readonly split?: boolean | undefined;
+                readonly variant?: string | undefined;
+                readonly onShow?: (() => any) | undefined;
+                readonly onClick?: ((event: MouseEvent) => any) | undefined;
+                readonly onClickToggle?: ((event: MouseEvent) => any) | undefined;
+                readonly onHide?: (() => any) | undefined;
+            } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps;
+            $attrs: {
+                [x: string]: unknown;
+            };
+            $refs: {
+                [x: string]: unknown;
+            } & {
+                target: HTMLButtonElement;
+                menu: ({
+                    $: import('vue').ComponentInternalInstance;
+                    $data: {};
+                    $props: {
+                        readonly align?: "left" | "right" | undefined;
+                        readonly show?: boolean | undefined;
+                    } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps;
+                    $attrs: {
+                        [x: string]: unknown;
+                    };
+                    $refs: {
+                        [x: string]: unknown;
+                    };
+                    $slots: Readonly<{
+                        [name: string]: import('vue').Slot<any> | undefined;
+                    }>;
+                    $root: import('vue').ComponentPublicInstance | null;
+                    $parent: import('vue').ComponentPublicInstance | null;
+                    $host: Element | null;
+                    $emit: (event: string, ...args: any[]) => void;
+                    $el: HTMLDivElement;
+                    $options: import('vue').ComponentOptionsBase<Readonly<{
+                        align?: "left" | "right";
+                        show?: boolean;
+                    }> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {
+                        align: "left" | "right";
+                    }, {}, 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<{
+                    align: "left" | "right";
+                }> & Omit<Readonly<{
+                    align?: "left" | "right";
+                    show?: boolean;
+                }> & Readonly<{}>, "align"> & import('vue').ShallowUnwrapRef<{}> & {} & import('vue').ComponentCustomProperties & {} & {
+                    $slots: {
+                        default?(_: {}): any;
+                    };
+                }) | null;
+            };
+            $slots: Readonly<{
+                [name: string]: import('vue').Slot<any> | undefined;
+            }>;
+            $root: import('vue').ComponentPublicInstance | null;
+            $parent: import('vue').ComponentPublicInstance | null;
+            $host: Element | null;
+            $emit: ((event: "show") => void) & ((event: "click", event: MouseEvent) => void) & ((event: "clickToggle", event: MouseEvent) => void) & ((event: "hide") => void);
+            $el: HTMLDivElement;
+            $options: import('vue').ComponentOptionsBase<Readonly<BtnDropdownProps> & Readonly<{
+                onShow?: (() => any) | undefined;
+                onClick?: ((event: MouseEvent) => any) | undefined;
+                onClickToggle?: ((event: MouseEvent) => any) | undefined;
+                onHide?: (() => any) | undefined;
+            }>, {
+                show: () => void;
+                hide: () => void;
+                toggle: () => void;
+            }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+                show: () => any;
+                click: (event: MouseEvent) => any;
+                clickToggle: (event: MouseEvent) => any;
+                hide: () => any;
+            }, string, {
+                caret: boolean;
+                variant: 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<{
+            caret: boolean;
+            variant: string;
+        }> & Omit<Readonly<BtnDropdownProps> & Readonly<{
+            onShow?: (() => any) | undefined;
+            onClick?: ((event: MouseEvent) => any) | undefined;
+            onClickToggle?: ((event: MouseEvent) => any) | undefined;
+            onHide?: (() => any) | undefined;
+        }>, "show" | "hide" | "toggle" | ("caret" | "variant")> & import('vue').ShallowUnwrapRef<{
+            show: () => void;
+            hide: () => void;
+            toggle: () => void;
+        }> & {} & import('vue').ComponentCustomProperties & {} & {
+            $slots: {
+                button?(_: {
+                    target: (el: HTMLElement) => HTMLElement;
+                    expanded: boolean;
+                    onBlur: (e: FocusEvent) => void;
+                    onClickToggle: (e: MouseEvent) => void;
+                }): any;
+                default?(_: {}): any;
+            };
+        }) | null;
+    };
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {
+    hide: () => void | undefined;
+    show: () => void | undefined;
+    toggle: () => void | undefined;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    show: () => any;
+    click: (event: MouseEvent) => any;
+    clickToggle: (event: MouseEvent) => any;
+    hide: () => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onShow?: (() => any) | undefined;
+    onClick?: ((event: MouseEvent) => any) | undefined;
+    onClickToggle?: ((event: MouseEvent) => any) | undefined;
+    onHide?: (() => any) | undefined;
+}>, {
+    split: boolean;
+    caret: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    el: ({
+        $: import('vue').ComponentInternalInstance;
+        $data: {};
+        $props: {
+            readonly align?: import('@floating-ui/dom').Alignment | undefined;
+            readonly block?: boolean | undefined;
+            readonly buttonClass?: import('vue').HTMLAttributes["class"];
+            readonly caret?: boolean | undefined;
+            readonly dropup?: boolean | undefined;
+            readonly dropright?: boolean | undefined;
+            readonly dropleft?: boolean | undefined;
+            readonly label?: string | undefined;
+            readonly offset?: import('@floating-ui/dom').OffsetOptions | undefined;
+            readonly middleware?: import('@floating-ui/dom').Middleware[] | undefined;
+            readonly side?: import('@floating-ui/dom').Side | undefined;
+            readonly size?: (import('./useDropdownHandler').BtnGroupSizes | (string & Record<never, never>)) | undefined;
+            readonly split?: boolean | undefined;
+            readonly variant?: string | undefined;
+            readonly onShow?: (() => any) | undefined;
+            readonly onClick?: ((event: MouseEvent) => any) | undefined;
+            readonly onClickToggle?: ((event: MouseEvent) => any) | undefined;
+            readonly onHide?: (() => any) | undefined;
+        } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps;
+        $attrs: {
+            [x: string]: unknown;
+        };
+        $refs: {
+            [x: string]: unknown;
+        } & {
+            target: HTMLButtonElement;
+            menu: ({
+                $: import('vue').ComponentInternalInstance;
+                $data: {};
+                $props: {
+                    readonly align?: "left" | "right" | undefined;
+                    readonly show?: boolean | undefined;
+                } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps;
+                $attrs: {
+                    [x: string]: unknown;
+                };
+                $refs: {
+                    [x: string]: unknown;
+                };
+                $slots: Readonly<{
+                    [name: string]: import('vue').Slot<any> | undefined;
+                }>;
+                $root: import('vue').ComponentPublicInstance | null;
+                $parent: import('vue').ComponentPublicInstance | null;
+                $host: Element | null;
+                $emit: (event: string, ...args: any[]) => void;
+                $el: HTMLDivElement;
+                $options: import('vue').ComponentOptionsBase<Readonly<{
+                    align?: "left" | "right";
+                    show?: boolean;
+                }> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {
+                    align: "left" | "right";
+                }, {}, 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<{
+                align: "left" | "right";
+            }> & Omit<Readonly<{
+                align?: "left" | "right";
+                show?: boolean;
+            }> & Readonly<{}>, "align"> & import('vue').ShallowUnwrapRef<{}> & {} & import('vue').ComponentCustomProperties & {} & {
+                $slots: {
+                    default?(_: {}): any;
+                };
+            }) | null;
+        };
+        $slots: Readonly<{
+            [name: string]: import('vue').Slot<any> | undefined;
+        }>;
+        $root: import('vue').ComponentPublicInstance | null;
+        $parent: import('vue').ComponentPublicInstance | null;
+        $host: Element | null;
+        $emit: ((event: "show") => void) & ((event: "click", event: MouseEvent) => void) & ((event: "clickToggle", event: MouseEvent) => void) & ((event: "hide") => void);
+        $el: HTMLDivElement;
+        $options: import('vue').ComponentOptionsBase<Readonly<BtnDropdownProps> & Readonly<{
+            onShow?: (() => any) | undefined;
+            onClick?: ((event: MouseEvent) => any) | undefined;
+            onClickToggle?: ((event: MouseEvent) => any) | undefined;
+            onHide?: (() => any) | undefined;
+        }>, {
+            show: () => void;
+            hide: () => void;
+            toggle: () => void;
+        }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+            show: () => any;
+            click: (event: MouseEvent) => any;
+            clickToggle: (event: MouseEvent) => any;
+            hide: () => any;
+        }, string, {
+            caret: boolean;
+            variant: 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<{
+        caret: boolean;
+        variant: string;
+    }> & Omit<Readonly<BtnDropdownProps> & Readonly<{
+        onShow?: (() => any) | undefined;
+        onClick?: ((event: MouseEvent) => any) | undefined;
+        onClickToggle?: ((event: MouseEvent) => any) | undefined;
+        onHide?: (() => any) | undefined;
+    }>, "show" | "hide" | "toggle" | ("caret" | "variant")> & import('vue').ShallowUnwrapRef<{
+        show: () => void;
+        hide: () => void;
+        toggle: () => void;
+    }> & {} & import('vue').ComponentCustomProperties & {} & {
+        $slots: {
+            button?(_: {
+                target: (el: HTMLElement) => HTMLElement;
+                expanded: boolean;
+                onBlur: (e: FocusEvent) => void;
+                onClickToggle: (e: MouseEvent) => void;
+            }): any;
+            default?(_: {}): any;
+        };
+    }) | null;
+}, HTMLDivElement>;
+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/BtnDropdownSingle.vue.d.ts

@@ -0,0 +1,157 @@
+import { BtnDropdownProps } from './useDropdownHandler';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        button?(_: {
+            target: (el: HTMLElement) => HTMLElement;
+            expanded: boolean;
+            onBlur: (e: FocusEvent) => void;
+            onClickToggle: (e: MouseEvent) => void;
+        }): any;
+        default?(_: {}): any;
+    };
+    refs: {
+        target: HTMLButtonElement;
+        menu: ({
+            $: import('vue').ComponentInternalInstance;
+            $data: {};
+            $props: {
+                readonly align?: "left" | "right" | undefined;
+                readonly show?: boolean | undefined;
+            } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps;
+            $attrs: {
+                [x: string]: unknown;
+            };
+            $refs: {
+                [x: string]: unknown;
+            };
+            $slots: Readonly<{
+                [name: string]: import('vue').Slot<any> | undefined;
+            }>;
+            $root: import('vue').ComponentPublicInstance | null;
+            $parent: import('vue').ComponentPublicInstance | null;
+            $host: Element | null;
+            $emit: (event: string, ...args: any[]) => void;
+            $el: HTMLDivElement;
+            $options: import('vue').ComponentOptionsBase<Readonly<{
+                align?: "left" | "right";
+                show?: boolean;
+            }> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {
+                align: "left" | "right";
+            }, {}, 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<{
+            align: "left" | "right";
+        }> & Omit<Readonly<{
+            align?: "left" | "right";
+            show?: boolean;
+        }> & Readonly<{}>, "align"> & import('vue').ShallowUnwrapRef<{}> & {} & import('vue').ComponentCustomProperties & {} & {
+            $slots: {
+                default?(_: {}): any;
+            };
+        }) | null;
+    };
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<BtnDropdownProps, {
+    show: () => void;
+    hide: () => void;
+    toggle: () => void;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    show: () => any;
+    click: (event: MouseEvent) => any;
+    clickToggle: (event: MouseEvent) => any;
+    hide: () => any;
+}, string, import('vue').PublicProps, Readonly<BtnDropdownProps> & Readonly<{
+    onShow?: (() => any) | undefined;
+    onClick?: ((event: MouseEvent) => any) | undefined;
+    onClickToggle?: ((event: MouseEvent) => any) | undefined;
+    onHide?: (() => any) | undefined;
+}>, {
+    caret: boolean;
+    variant: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    target: HTMLButtonElement;
+    menu: ({
+        $: import('vue').ComponentInternalInstance;
+        $data: {};
+        $props: {
+            readonly align?: "left" | "right" | undefined;
+            readonly show?: boolean | undefined;
+        } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps;
+        $attrs: {
+            [x: string]: unknown;
+        };
+        $refs: {
+            [x: string]: unknown;
+        };
+        $slots: Readonly<{
+            [name: string]: import('vue').Slot<any> | undefined;
+        }>;
+        $root: import('vue').ComponentPublicInstance | null;
+        $parent: import('vue').ComponentPublicInstance | null;
+        $host: Element | null;
+        $emit: (event: string, ...args: any[]) => void;
+        $el: HTMLDivElement;
+        $options: import('vue').ComponentOptionsBase<Readonly<{
+            align?: "left" | "right";
+            show?: boolean;
+        }> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {
+            align: "left" | "right";
+        }, {}, 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<{
+        align: "left" | "right";
+    }> & Omit<Readonly<{
+        align?: "left" | "right";
+        show?: boolean;
+    }> & Readonly<{}>, "align"> & import('vue').ShallowUnwrapRef<{}> & {} & import('vue').ComponentCustomProperties & {} & {
+        $slots: {
+            default?(_: {}): any;
+        };
+    }) | null;
+}, HTMLDivElement>;
+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/BtnDropdownSplit.vue.d.ts

@@ -0,0 +1,167 @@
+import { BtnDropdownProps } from './useDropdownHandler';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        button?(_: {
+            expanded: boolean;
+            onBlur: (e: FocusEvent) => void;
+            onClickToggle: (e: MouseEvent) => void;
+        }): any;
+        button?(_: {
+            expanded: boolean;
+            onBlur: (e: FocusEvent) => void;
+            onClickToggle: (e: MouseEvent) => void;
+        }): any;
+        toggle?(_: {
+            target: (el: HTMLElement) => HTMLElement;
+            expanded: boolean;
+            onBlur: (e: FocusEvent) => void;
+            onClickToggle: (e: MouseEvent) => void;
+        }): any;
+        default?(_: {}): any;
+    };
+    refs: {
+        target: HTMLButtonElement;
+        menu: ({
+            $: import('vue').ComponentInternalInstance;
+            $data: {};
+            $props: {
+                readonly align?: "left" | "right" | undefined;
+                readonly show?: boolean | undefined;
+            } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps;
+            $attrs: {
+                [x: string]: unknown;
+            };
+            $refs: {
+                [x: string]: unknown;
+            };
+            $slots: Readonly<{
+                [name: string]: import('vue').Slot<any> | undefined;
+            }>;
+            $root: import('vue').ComponentPublicInstance | null;
+            $parent: import('vue').ComponentPublicInstance | null;
+            $host: Element | null;
+            $emit: (event: string, ...args: any[]) => void;
+            $el: HTMLDivElement;
+            $options: import('vue').ComponentOptionsBase<Readonly<{
+                align?: "left" | "right";
+                show?: boolean;
+            }> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {
+                align: "left" | "right";
+            }, {}, 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<{
+            align: "left" | "right";
+        }> & Omit<Readonly<{
+            align?: "left" | "right";
+            show?: boolean;
+        }> & Readonly<{}>, "align"> & import('vue').ShallowUnwrapRef<{}> & {} & import('vue').ComponentCustomProperties & {} & {
+            $slots: {
+                default?(_: {}): any;
+            };
+        }) | null;
+    };
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<BtnDropdownProps, {
+    show: () => void;
+    hide: () => void;
+    toggle: () => void;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    show: () => any;
+    click: (event: MouseEvent) => any;
+    clickToggle: (event: MouseEvent) => any;
+    hide: () => any;
+}, string, import('vue').PublicProps, Readonly<BtnDropdownProps> & Readonly<{
+    onShow?: (() => any) | undefined;
+    onClick?: ((event: MouseEvent) => any) | undefined;
+    onClickToggle?: ((event: MouseEvent) => any) | undefined;
+    onHide?: (() => any) | undefined;
+}>, {
+    caret: boolean;
+    variant: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    target: HTMLButtonElement;
+    menu: ({
+        $: import('vue').ComponentInternalInstance;
+        $data: {};
+        $props: {
+            readonly align?: "left" | "right" | undefined;
+            readonly show?: boolean | undefined;
+        } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps;
+        $attrs: {
+            [x: string]: unknown;
+        };
+        $refs: {
+            [x: string]: unknown;
+        };
+        $slots: Readonly<{
+            [name: string]: import('vue').Slot<any> | undefined;
+        }>;
+        $root: import('vue').ComponentPublicInstance | null;
+        $parent: import('vue').ComponentPublicInstance | null;
+        $host: Element | null;
+        $emit: (event: string, ...args: any[]) => void;
+        $el: HTMLDivElement;
+        $options: import('vue').ComponentOptionsBase<Readonly<{
+            align?: "left" | "right";
+            show?: boolean;
+        }> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {
+            align: "left" | "right";
+        }, {}, 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<{
+        align: "left" | "right";
+    }> & Omit<Readonly<{
+        align?: "left" | "right";
+        show?: boolean;
+    }> & Readonly<{}>, "align"> & import('vue').ShallowUnwrapRef<{}> & {} & import('vue').ComponentCustomProperties & {} & {
+        $slots: {
+            default?(_: {}): any;
+        };
+    }) | null;
+}, HTMLDivElement>;
+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/useDropdownHandler.d.ts

@@ -0,0 +1,48 @@
+import { Placement, Alignment, Middleware, OffsetOptions, Side } from '@floating-ui/dom';
+import { UseFloatingReturn } from '@floating-ui/vue';
+import { DropdownMenu } from '@vue-interface/dropdown-menu';
+import { ComputedRef, Ref, EmitFn, HTMLAttributes } from 'vue';
+type LiteralUnion<T extends U, U = string> = T | (U & Record<never, never>);
+export type BtnGroupSizes = 'btn-group-xs' | 'btn-group-sm' | 'btn-group-md' | 'btn-group-lg' | 'btn-group-xl' | 'btn-group-2xl' | 'btn-group-3xl' | 'btn-group-4xl';
+export type BtnDropdownProps = {
+    align?: Alignment;
+    block?: boolean;
+    buttonClass?: HTMLAttributes['class'];
+    caret?: boolean;
+    dropup?: boolean;
+    dropright?: boolean;
+    dropleft?: boolean;
+    label?: string;
+    offset?: OffsetOptions;
+    middleware?: Middleware[];
+    side?: Side;
+    size?: LiteralUnion<BtnGroupSizes>;
+    split?: boolean;
+    variant?: string;
+};
+export type BtnDropdownEvents = {
+    click: [event: MouseEvent];
+    clickToggle: [event: MouseEvent];
+    show: [];
+    hide: [];
+};
+export type UseDropdownHandler = {
+    target: Ref<HTMLElement | undefined>;
+    menu: Ref<InstanceType<typeof DropdownMenu> | undefined>;
+    alignment: ComputedRef<Alignment>;
+    expanded: Ref<boolean>;
+    floatingStyles: UseFloatingReturn['floatingStyles'];
+    placement: ComputedRef<Placement>;
+    side: ComputedRef<Side>;
+    classes: ComputedRef<Record<string, boolean | undefined>>;
+    buttonClasses: ComputedRef<Record<string, boolean>>;
+    show: () => void;
+    hide: () => void;
+    toggle: () => void;
+    onBlur: (e: FocusEvent) => void;
+    onClick: (e: MouseEvent) => void;
+    onClickToggle: (e: MouseEvent) => void;
+    onClickItem: (e: PointerEvent) => void;
+};
+export declare function useDropdownHandler(props: BtnDropdownProps, emit: EmitFn<BtnDropdownEvents>): UseDropdownHandler;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue-interface/btn-dropdown",
-  "version": "4.1.0",
+  "version": "4.1.2",
   "description": "A Vue button dropdown component.",
   "type": "module",
   "main": "./dist/btn-dropdown.umd.cjs",
@@ -49,9 +49,9 @@
     "@floating-ui/vue": "^1.1.6",
     "vue": "^3.3.4",
     "@vue-interface/btn": "5.0.5",
-    "@vue-interface/dropdown-menu": "3.0.6"
+    "@vue-interface/dropdown-menu": "3.0.7"
   },
-  "dependencies": {
+  "devDependencies": {
     "vue-component-type-helpers": "^3.2.2"
   },
   "scripts": {

package/src/BtnDropdown.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useTemplateRef } from 'vue';
-import { ComponentExposed } from 'vue-component-type-helpers';
+import { type ComponentExposed } from 'vue-component-type-helpers';
 import BtnDropdownSingle from './BtnDropdownSingle.vue';
 import BtnDropdownSplit from './BtnDropdownSplit.vue';
 import { BtnDropdownEvents, BtnDropdownProps } from './useDropdownHandler';
@@ -13,12 +13,13 @@ const props = withDefaults(defineProps<{
 });
 
 const emit = defineEmits<BtnDropdownEvents>();
+
 const el = useTemplateRef<ComponentExposed<typeof BtnDropdownSingle | typeof BtnDropdownSplit>>('el');
 
 defineExpose({
-    show: () => el.value?.show(),
     hide: () => el.value?.hide(),
-    toggle: () => el.value?.hide(),
+    show: () => el.value?.show(),
+    toggle: () => el.value?.toggle(),
 });
 </script>
 

package/src/useDropdownHandler.ts

@@ -1,7 +1,7 @@
 import { flip, offset, Placement, type Alignment, type Middleware, type OffsetOptions, type Side } from '@floating-ui/dom';
-import { useFloating } from '@floating-ui/vue';
+import { useFloating, UseFloatingReturn } from '@floating-ui/vue';
 import { DropdownMenu } from '@vue-interface/dropdown-menu';
-import { computed, ref, watchEffect, type EmitFn, type HTMLAttributes } from 'vue';
+import { computed, ComputedRef, Ref, ref, watchEffect, type EmitFn, type HTMLAttributes } from 'vue';
 
 type LiteralUnion<T extends U, U = string> = T | (U & Record<never, never>);
 
@@ -38,12 +38,30 @@ export type BtnDropdownEvents = {
     hide: []
 }
 
-export function useDropdownHandler(props: BtnDropdownProps, emit: EmitFn<BtnDropdownEvents>) {
+export type UseDropdownHandler = {
+    target: Ref<HTMLElement|undefined>;
+    menu: Ref<InstanceType<typeof DropdownMenu>|undefined>;
+    alignment: ComputedRef<Alignment>;
+    expanded: Ref<boolean>;
+    floatingStyles: UseFloatingReturn['floatingStyles'];
+    placement: ComputedRef<Placement>;
+    side: ComputedRef<Side>;
+    classes: ComputedRef<Record<string, boolean|undefined>>;
+    buttonClasses: ComputedRef<Record<string, boolean>>;
+    show: () => void;
+    hide: () => void;
+    toggle: () => void;
+    onBlur: (e: FocusEvent) => void;
+    onClick: (e: MouseEvent) => void;
+    onClickToggle: (e: MouseEvent) => void;
+    onClickItem: (e: PointerEvent) => void;
+}
+
+export function useDropdownHandler(props: BtnDropdownProps, emit: EmitFn<BtnDropdownEvents>): UseDropdownHandler {
     const target = ref<HTMLElement>();
     const menu = ref<InstanceType<typeof DropdownMenu>>();
     const expanded = ref(false);
 
-
     const alignment = computed<Alignment>(() => props.align ?? 'start');
 
     const side = computed<Side>(() => {
@@ -64,7 +82,7 @@ export function useDropdownHandler(props: BtnDropdownProps, emit: EmitFn<BtnDrop
 
     const placement = computed<Placement>(() => `${side.value}-${alignment.value}`);
 
-    const classes = computed(() => ({
+    const classes = computed<Record<string,boolean|undefined>>(() => ({
         'dropdown': props.dropup && props.dropright && props.dropleft,
         'dropup': props.dropup,
         'dropright': props.dropright,