@vue-interface/btn-dropdown 1.0.0 → 1.0.1

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@vue-interface/btn-dropdown",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "A Vue button dropdown component.",
   "files": [
     "dist",
-    "tailwindcss"
+    "src"
   ],
   "main": "./dist/btn-dropdown.umd.js",
-  "module": "./dist/btn-dropdown.es.js",
+  "module": "./index.js",
   "browserslist": "last 2 versions, > 0.5%, ie >= 11",
   "scripts": {
     "dev": "vite",

package/src/BtnDropdown.vue

@@ -0,0 +1,112 @@
+<template>
+    <component
+        :is="$attrs.split === undefined || !!$attrs.nav ? 'btn-dropdown-single' : 'btn-dropdown-split'"
+        class="btn-dropdown"
+        v-bind="$attrs"
+        @click="(...args) => this.$emit('click', ...args)"
+        @click-toggle="(...args) => this.$emit('click-toggle', ...args)"
+        @dropdown="(...args) => this.$emit('dropdown', ...args)"
+        @show="(...args) => this.$emit('show', ...args)"
+        @hide="(...args) => this.$emit('hide', ...args)"
+        @toggle="(...args) => this.$emit('toggle', ...args)">
+        <template #icon>
+            <slot name="icon" />
+        </template>
+        <template v-if="$attrs.label || this.$slots.label" #label>
+            <slot name="label">
+                {{ $attrs.label }}
+            </slot>
+        </template>
+        <template #button="slot">
+            <slot name="button" v-bind="slot" />
+        </template>
+        <template #split="slot">
+            <slot name="split" v-bind="slot" />
+        </template>
+        <slot />
+    </component>
+</template>
+
+<script>
+import BtnDropdownSplit from './BtnDropdownSplit.vue';
+import BtnDropdownSingle from './BtnDropdownSingle.vue';
+
+export default {
+
+    name: 'BtnDropdown',
+
+    components: {
+        BtnDropdownSplit,
+        BtnDropdownSingle
+    },
+
+    inheritAttrs: false
+
+};
+</script>
+
+<style>
+@keyframes btnDropdownZoomIn {
+    from {
+        opacity: 0;
+    }
+
+    to {
+        opacity: 1;
+    }
+}
+
+
+.btn-dropdown {
+    position: relative;
+}
+
+.btn-dropdown .dropdown-toggle {
+    display: flex;
+    transition: all 125ms ease-in;
+    align-items: center;
+    justify-content: center;
+}
+
+.nav-item .btn-group,
+.nav-item .btn-dropdown .dropdown-toggle {
+    display: block;
+}
+
+.btn-dropdown.rounded-circle > .btn:last-child,
+.btn-dropdown.rounded-circle > .btn-group:last-child .dropdown-toggle {
+    border-top-right-radius: 100%;
+    border-bottom-right-radius: 100%;
+}
+
+.btn-dropdown.rounded-circle > .btn:first-child,
+.btn-dropdown.rounded-circle > .btn-group:first-child .dropdown-toggle {
+    border-top-left-radius: 100%;
+    border-bottom-left-radius: 100%;
+}
+
+.btn-dropdown .rounded-circle {
+    border-radius: 100%;
+}
+
+.btn-dropdown .rotate-90 {
+    transform: rotate(90deg);
+}
+  
+.btn-dropdown.hide-caret .dropdown-toggle::after,
+.btn-dropdown.icon-only .dropdown-toggle::after,
+.btn-dropdown.hide-caret .dropdown-toggle::before,
+.btn-dropdown.icon-only .dropdown-toggle::before {
+    display: none;
+}
+
+.btn-dropdown .dropdown-menu {
+    animation-timing-function: ease-in-out;
+    animation-duration: 200ms;
+    animation-fill-mode: both;
+}
+
+.btn-dropdown .dropdown-menu.animated {
+    animation-name: btnDropdownZoomIn;
+}
+</style>

package/src/BtnDropdownAction.vue

@@ -0,0 +1,38 @@
+<template>
+    <component
+        :is="is"
+        :id="id"
+        v-bind="to ? { to } : { href }"
+        aria-haspopup="true"
+        :aria-expanded="expanded"
+        :type="is === 'button' ? 'button': undefined">
+        <slot />
+    </component>
+</template>
+
+<script>
+export default {
+    props: {
+        expanded: {
+            type: Boolean,
+            default: false
+        },
+        id: String,
+        href: String,
+        to: [String, Object]
+    },
+    computed: {
+        is() {
+            if(this.to) {
+                return 'router-link';
+            }
+
+            if(this.href) {
+                return 'a';
+            }
+
+            return 'button';
+        },
+    }
+};
+</script>

package/src/BtnDropdownSingle.vue

@@ -0,0 +1,43 @@
+<template>
+    <btn-group :class="classes">
+        <slot name="button" v-bind="this">
+            <btn-dropdown-action
+                :id="$attrs.id"
+                ref="button"
+                :expanded="expanded"
+                :href="href"
+                :to="to"
+                :style="toggleStyle"
+                :class="toggleClasses"
+                @blur.native="onBlur"
+                @click.native="onClickToggle">
+                <slot name="icon" />
+                <slot name="label">
+                    {{ label }}
+                </slot>
+            </btn-dropdown-action>
+        </slot>
+        <dropdown-menu
+            :id="$attrs.id"
+            ref="menu"
+            :align="align"
+            :show="expanded"
+            :class="{animated: triggerAnimation}"
+            @blur-item="onBlur"
+            @click-item="onClickItem">
+            <slot />
+        </dropdown-menu>
+    </btn-group>
+</template>
+
+<script>
+import DropdownHandler from './DropdownHandler';
+
+export default {
+
+    mixins: [
+        DropdownHandler
+    ]
+
+};
+</script>

package/src/BtnDropdownSplit.vue

@@ -0,0 +1,73 @@
+<template>
+    <btn-group :class="classes" class="btn-dropdown-split" @click="onClick">
+        <slot v-if="!dropleft" name="button" v-bind="this">
+            <btn-dropdown-action
+                v-if="!dropleft"
+                :id="$attrs.id"
+                ref="button"
+                :expanded="expanded"
+                :href="href"
+                :to="to"
+                :class="actionClasses"
+                @click.native="e => $emit('click', e)">
+                <slot name="icon" />
+                <slot name="label">
+                    {{ label }}
+                </slot>
+            </btn-dropdown-action>
+        </slot>
+
+        <btn-group ref="split">
+            <slot name="split" v-bind="this">
+                <button
+                    v-if="split"
+                    :id="$attrs.id"
+                    type="button"
+                    aria-haspopup="true"
+                    :aria-expanded="expanded"
+                    :class="toggleClasses"
+                    @blur="onBlur"
+                    @click="onClickToggle" />
+            </slot>
+            
+            <dropdown-menu
+                :id="$attrs.id"
+                ref="menu"
+                :align="align"
+                :show="expanded"
+                :class="{animated: triggerAnimation}"
+                @click-item="onClickItem"
+                @blur-item="onBlur">
+                <slot />
+            </dropdown-menu>
+        </btn-group>
+        <slot v-if="dropleft" name="button" v-bind="this">
+            <btn-dropdown-action
+                v-if="dropleft"
+                :id="$attrs.id"
+                ref="button"
+                :expanded="expanded"
+                :href="href"
+                :to="to"
+                :class="actionClasses"
+                @click.native="e => $emit('click', e)">
+                <slot name="icon" />
+                <slot name="label">
+                    {{ label }}
+                </slot>
+            </btn-dropdown-action>
+        </slot>
+    </btn-group>
+</template>
+
+<script>
+import DropdownHandler from './DropdownHandler';
+
+export default {
+
+    mixins: [
+        DropdownHandler
+    ]
+
+};
+</script>

package/src/DropdownHandler.js

@@ -0,0 +1,421 @@
+import { createPopper } from '@popperjs/core';
+import { Btn } from '@vue-interface/btn';
+import { BtnGroup } from '@vue-interface/btn-group';
+import { DropdownMenu } from '@vue-interface/dropdown-menu';
+import BtnDropdownAction from './BtnDropdownAction.vue';
+
+const TAB_KEYCODE = 9;
+
+export default {
+
+    components: {
+        BtnDropdownAction,
+        BtnGroup,
+        DropdownMenu
+    },
+
+    extends: Btn,
+
+    props: {
+
+        /**
+         * Display the dropdown menu aligned left or right
+         *
+         * @property String
+         */
+        align: {
+            type: String,
+            default: 'left',
+            validate(value) {
+                return ['left', 'right'].indexOf(value.toLowerCase()) !== -1;
+            }
+        },
+
+        /**
+         * Should animate the dropdown opening.
+         *
+         * @property {Boolean}
+         */
+        animated: {
+            type: Boolean,
+            default: true
+        },
+
+        // buttonClass: String,
+
+        /**
+         * Show the caret.
+         *
+         * @property {Boolean}
+         */
+        caret: {
+            type: Boolean,
+            default: true
+        },
+
+        /**
+         * Should display the toggle button as a circle.
+         *
+         * @property Boolean
+         */
+        
+        // circle: {
+        //     type: Boolean,
+        //     default: false
+        // },
+
+        /**
+         * Display as a dropup instead of a dropdown.
+         *
+         * @property Boolean
+         */
+        dropup: {
+            type: Boolean,
+            default: false
+        },
+
+        /**
+         * Display as a dropright instead of a dropdown.
+         *
+         * @property Boolean
+         */
+        dropright: {
+            type: Boolean,
+            default: false
+        },
+
+        /**
+         * Display as a dropleft instead of a dropdown.
+         *
+         * @property Boolean
+         */
+        dropleft: {
+            type: Boolean,
+            default: false
+        },
+
+        /**
+         * The action height.
+         *
+         * @property {String}
+         */
+        height: String,
+
+        /**
+         * The href action.
+         *
+         * @property {String}
+         */
+        href: String,
+
+        /**
+         * Is the dropdown a nav item?
+         *
+         * @property {Boolean}
+         */
+        nav: Boolean,
+
+        /**
+         * The toggle button's label. If not defined as an attribute,
+         * you can override with the component's slot (inner html).
+         *
+         * @property {String}
+         */
+        label: String,
+
+        offset: {
+            type: Number,
+            default: 5,
+        },
+
+        /**
+         * Should rotate the toggle button when opened.
+         *
+         * @property {Boolean}
+         */
+        rotate: {
+            type: Boolean,
+            default: false
+        },
+
+        /**
+         * Display the dropdown button with a split toggle button.
+         *
+         * @property {Boolean}
+         */
+        split: {
+            type: Boolean,
+            default: false
+        },
+
+        /**
+         * The "to" path, used for vue-router.
+         *
+         * @property {String|Object}
+         */
+        to: [String, Object],
+
+        /**
+         * The button type attribute.
+         *
+         * @property {String}
+         */
+        type: {
+            type: String,
+            default: 'button'
+        },
+
+        /**
+         * The action width.
+         *
+         * @property {String}
+         */
+        width: String,
+
+    },
+
+    data() {
+        return {
+            popper: null,
+            triggerAnimation: false,
+            expanded: false
+        };
+    },
+
+    computed: {
+        placement() {
+            if(this.dropup) {
+                return 'top';
+            }
+
+            if(this.dropleft) {
+                return 'left';
+            }
+
+            if(this.dropright) {
+                return 'right';
+            }
+
+            return 'bottom';
+        },
+
+        variantClassPrefix() {
+            return 'btn' + (this.outline ? '-outline' : '');
+        },
+
+        sizeableClassPrefix() {
+            return 'btn';
+        },
+
+        classes() {
+            return {
+                'dropdown': this.dropup && this.dropright && this.dropleft,
+                'dropup': this.dropup,
+                'dropright': this.dropright,
+                'dropleft': this.dropleft,
+                'icon-only': !this.nav && !this.split && !!this.$slots.icon && !this.$slots.label,
+                'hide-caret': !this.caret,
+                'expanded': this.expanded,
+                // 'rounded-circle': !this.nav && this.split && this.circle,
+                'rotate-90': !this.nav && this.split && this.rotate && this.expanded,
+            };
+        },
+
+        actionClasses() {
+            return [
+                !this.nav && 'btn',
+                !this.nav && this.size && this.sizeableClass,
+                !this.nav && this.variant && this.variantClass,
+            ]
+                .filter(value => !!value)
+                .join(' ');
+        },
+
+        toggleStyle() {
+            return {
+                width: this.width,
+                height: this.height,
+            };
+        },
+
+        toggleClasses() {
+            return [
+                // this.buttonClass,
+                this.nav && 'nav-link',
+                !this.nav && 'btn',
+                !this.nav && this.variantClass,
+                this.sizeableClass,
+                this.active ? 'active' : '',
+                this.block ? 'btn-block' : '',
+                // !this.split && this.circle ? 'rounded-circle p-0' : '',
+                !this.split && this.rotate && this.expanded ? 'rotate-90' : '',
+                !this.nav && this.split ? 'dropdown-toggle-split' : '',
+                'dropdown-toggle',
+            ]
+                .filter(value => !!value)
+                .join(' ');
+        }
+    },
+
+    beforeDestroy() {
+        this.popper && this.popper.destroy();
+    },
+
+    mounted() {
+        // const toggle = this.$el.querySelector('.dropdown-toggle');
+
+        // toggle.addEventListener('click', () => {
+        //     if(!this.expanded) {
+        //         toggle.blur();
+        //     }
+        // });
+
+        // toggle.addEventListener('blur', this.onBlurItem);
+
+        // const menu = this.$el.querySelector('.dropdown-menu');
+
+        // menu.addEventListener('click', e => {
+        //     if(e.target === menu) {
+        //         toggle.focus();
+        //     }
+        // });
+    },
+
+    methods: {
+
+        /**
+         * Focus on the the dropdown toggle button
+         *
+         * @return void
+         */
+        focus() {
+            this.$el.querySelector('.dropdown-toggle').focus();
+        },
+
+        /**
+         * Focus on the the dropdown toggle button
+         *
+         * @return void
+         */
+        queryFocusable() {
+            return this.$el.querySelector('.dropdown-menu').querySelectorAll('label, input, select, textarea, [tabindex]:not([tabindex="-1"])');
+        },
+
+        /**
+         * Method to check if the given element is focusable.
+         *
+         * @return void
+         */
+        isFocusable(element) {
+            const nodes = this.queryFocusable();
+
+            for(let i in nodes) {
+                if(element === nodes[i]) {
+                    return true;
+                }
+            }
+
+            return false;
+        },
+
+        /**
+         * Toggle the dropdown menu
+         *
+         * @return void
+         */
+        toggle(e) {
+            !this.expanded ? this.show() : this.hide();
+        },
+
+        /**
+         * Show the dropdown menu
+         *
+         * @return void
+         */
+        show() {
+            this.expanded = true;
+
+            const target = this.$refs.split && this.$refs.split.$el || this.$el;
+
+            // Hack for popper for align="right"
+            // this.$refs.menu.$el.style.left = 'auto';
+            // this.$refs.menu.$el.style.right = 'auto';
+
+            if(!this.nav && !this.popper) {
+                this.popper = createPopper(target, this.$refs.menu.$el, {
+                    placement: `${this.placement}-${this.align === 'left' ? 'start' : 'end'}`,
+                    onFirstUpdate: () => {
+                        this.triggerAnimation = this.animated;
+                    },
+                    modifiers: [
+                        {
+                            name: 'offset',
+                            options: {
+                                offset: [0, !this.nav ? this.offset : 1]
+                                // offset: ['.125rem', !this.nav ? 4 : 1],
+                            },
+                        },
+                    ]
+                });
+            }
+            else if(this.popper) {
+                this.popper.update();
+            }
+        },
+
+        /**
+         * Hide the dropdown menu
+         *
+         * @return void
+         */
+        hide() {
+            this.expanded = false;
+        },
+
+        /**
+         * A callback function for the `blur-item` event.
+         *
+         * @return void
+         */
+        onBlur(e) {
+            if(!this.$el.contains(e.relatedTarget)) {
+                this.hide();
+            }
+        },
+
+        /**
+         * A callback function for the `click-item` event.
+         *
+         * @return void
+         */
+        onClickItem(e) {
+            if(!this.isFocusable(e.target)) {
+                this.hide();
+            }
+        },
+
+        /**
+         * A callback function for the `click-toggle` event.
+         *
+         * @return void
+         */
+        onClickToggle(e) {
+            this.$emit('click-toggle', e);
+
+            if(!e.defaultPrevented) {
+                this.toggle();
+            }
+        }
+
+    },
+
+    watch: {
+        expanded(value) {
+            this.$nextTick(() => {
+                this.$emit(value ? 'show' : 'hide');
+                this.$emit('toggle', value);
+            });
+        }
+    }
+
+};