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

package/dist/btn-dropdown.js

@@ -81,21 +81,6 @@ function J(t, g) {
     // [props.size]: !!props.size,
     [t.variant]: !!t.variant,
     ...y.value
-    // toggleClasses() {
-    //     return Object.assign({
-    //         'active': this.active,
-    //         'btn': !this.nav,
-    //         'btn-block': !!this.block,
-    //         'nav-link': !!this.nav,
-    //         'rotate-90': !this.split && this.rotate && this.expanded,
-    //         'dropdown-toggle': true,
-    //         'dropdown-toggle-split': !this.nav && this.split,
-    //         [this.variant]: !this.nav && !!this.variant,
-    //         [this.size]: !!this.size,
-    //     }, typeof this.buttonClass === 'object' ? this.buttonClass : {
-    //         [this.buttonClass]: !!this.buttonClass
-    //     });
-    // }
   })), u = k(() => t.dropup ? "top" : t.dropleft ? "left" : t.dropright ? "right" : "bottom"), a = k(() => t.align && t.align === "right" ? "end" : "start");
   function S() {
     var l;

package/dist/btn-dropdown.js.map

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

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

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

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

@@ -8,7 +8,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     label?(_: {}): any;
     button?(_: {
         button: Element | import("vue").ComponentPublicInstance;
-        $button: (ref: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}>, {}, {}> | Element, refs: Record<string, any>) => void;
+        $button: (ref: Element | import("vue").ComponentPublicInstance, refs: Record<string, any>) => void;
         expanded: boolean;
         target: Element | import("vue").ComponentPublicInstance;
         toggle: () => void;

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

@@ -10,7 +10,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
 }, {}, {}>, {
     button?(_: {
         button: Element | import("vue").ComponentPublicInstance;
-        $button: (ref: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}>, {}, {}> | Element, refs: Record<string, any>) => void;
+        $button: (ref: Element | import("vue").ComponentPublicInstance, refs: Record<string, any>) => void;
         expanded: boolean;
         target: Element | import("vue").ComponentPublicInstance;
         toggle: () => void;

package/dist/src/dropdown.d.ts

@@ -23,7 +23,7 @@ export declare function useBtnDropdown<Props extends BtnDropdownProps, Emits ext
         btn: boolean;
     }>;
     button: import("vue").Ref<Element | ComponentPublicInstance>;
-    $button: (ref: ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}>, {}, {}> | Element, refs: Record<string, any>) => void;
+    $button: (ref: Element | ComponentPublicInstance | null, refs: Record<string, any>) => void;
     classes: import("vue").ComputedRef<{
         [x: string]: boolean;
         dropdown: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue-interface/btn-dropdown",
-  "version": "2.0.0-beta.20",
+  "version": "2.0.0-beta.21",
   "description": "A Vue button dropdown component.",
   "files": [
     "dist"