@vue-interface/btn-dropdown 0.9.11 → 1.0.0

package/src/DropdownHandler.js

@@ -1,419 +0,0 @@
-import BtnDropdownAction from './BtnDropdownAction';
-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 { prefix } from '@vue-interface/utils';
-
-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
-        },
-
-        /**
-         * The button icon that appears before the label.
-         *
-         * @property {Boolean}
-         */
-        autoclose: Boolean,
-
-        /**
-         * 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,
-
-        /**
-         * 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,
-            isDropdownShowing: 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.isDropdownShowing,
-                'rounded-circle': !this.nav && this.split && this.circle,
-                'rotate-90': !this.nav && this.split && this.rotate && this.isDropdownShowing,
-            };
-        },
-
-        actionClasses() {
-            return [
-                !this.nav && 'btn',
-                !this.nav && prefix(this.size, 'btn'),
-                !this.nav && prefix(this.variant, 'btn')
-            ]
-                .filter(value => !!value)
-                .join(' ');
-        },
-
-        toggleStyle() {
-            return {
-                width: this.width,
-                height: this.height,
-            };
-        },
-
-        toggleClasses() {
-            return [
-                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' : '',
-                !this.split && this.rotate && this.isDropdownShowing ? '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.isDropdownShowing) {
-                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.isDropdownShowing ? this.show() : this.hide();
-        },
-
-        /**
-         * Show the dropdown menu
-         *
-         * @return void
-         */
-        show() {
-            this.isDropdownShowing = true;
-
-            const target = this.$refs.split || 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 ? 4 : 1],
-                            },
-                        },
-                    ]
-                });
-            }
-            else if(this.popper) {
-                this.popper.update();
-            }
-        },
-
-        /**
-         * Hide the dropdown menu
-         *
-         * @return void
-         */
-        hide() {
-            this.isDropdownShowing = false;
-        },
-
-        /**
-         * A callback function for the `blur-item` event.
-         *
-         * @return void
-         */
-        onBlurItem(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: {
-        isDropdownShowing(value) {
-            this.$nextTick(() => {
-                this.$emit(value ? 'show' : 'hide');
-                this.$emit('toggle', value);
-            });
-        }
-    }
-
-};

package/src/css/BtnDropdown.css

@@ -1 +0,0 @@
-@tailwind components;

package/tailwind.config.js

@@ -1,13 +0,0 @@
-const plugin = require('tailwindcss/plugin');
-
-module.exports = {
-    purge: false,
-    corePlugins: {
-        container: false,
-    },
-    plugins: [
-        require('@vue-interface/dropdown-menu/tailwindcss'),
-        require('@vue-interface/btn/tailwindcss'),
-        require('@vue-interface/btn-group/tailwindcss'),
-    ]
-};

package/vue.config.js

@@ -1,11 +0,0 @@
-module.exports = {
-    css: {
-        loaderOptions: {
-            postcss: {
-                plugins: [
-                    require('tailwindcss')
-                ]
-            }
-        }
-    }
-};