@vue-interface/btn-dropdown 0.9.13 → 1.0.2

package/package.json

@@ -1,22 +1,23 @@
 {
   "name": "@vue-interface/btn-dropdown",
-  "version": "0.9.13",
+  "version": "1.0.2",
   "description": "A Vue button dropdown component.",
-  "main": "index.js",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "main": "./dist/btn-dropdown.umd.js",
+  "module": "./index.js",
+  "browserslist": "last 2 versions, > 0.5%, ie >= 11",
   "scripts": {
-    "watch": "npm run serve",
-    "serve": "vue-cli-service build --target lib --name=BtnDropdown ./main.vue --watch",
-    "build": "vue-cli-service build --target lib --name=BtnDropdown ./main.vue",
-    "lint": "vue-cli-service lint",
-    "fix": "vue-cli-service lint --fix",
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
     "pre-release": "npm run build; git add . -A; git commit -m 'pre-release commit'",
     "release-patch": "npm run pre-release && npm version patch -m \"%s\" && npm run release;",
     "release-minor": "npm run pre-release && npm version minor -m \"%s\" && npm run release;",
     "release-major": "npm run pre-release && npm version major -m \"%s\" && npm run release;",
-    "release": "git add . -A; git commit; git push --tags origin; npm publish;",
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "docs:dev": "./node_modules/.bin/vuepress dev docs",
-    "docs:build": "./node_modules/.bin/vuepress build docs"
+    "release": "git add . -A; git commit; git push --tags origin; npm publish;"
   },
   "repository": {
     "type": "git",
@@ -38,29 +39,24 @@
   },
   "homepage": "https://github.com/vue-interface/btn-dropdown/docs#readme",
   "dependencies": {
-    "@popperjs/core": "^2.4.4",
-    "@vue-interface/btn": "^0.9.8",
-    "@vue-interface/btn-group": "^0.9.1",
-    "@vue-interface/dropdown-menu": "^0.9.8",
-    "@vue-interface/tailwindcss": "^0.2.5",
-    "@vue-interface/utils": "^0.9.16",
-    "core-js": "^3.6.4",
-    "tailwindcss": "^1.7.6",
-    "vue": "^2.6.12"
+    "@popperjs/core": "^2.11.2",
+    "@vue-interface/btn": "^1.0.0",
+    "@vue-interface/btn-group": "^1.0.0",
+    "@vue-interface/dropdown-menu": "^1.0.0",
+    "vue": "^2.6.14"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "^4.0",
-    "@vue/cli-plugin-eslint": "^4.0",
-    "@vue/cli-service": "^4.0",
-    "@vuepress/plugin-register-components": "^1.5.4",
+    "@rollup/plugin-babel": "^5.3.0",
+    "autoprefixer": "^10.4.2",
     "babel-eslint": "^10.1.0",
+    "babel-preset-vue": "^2.0.2",
+    "change-case": "^4.1.2",
     "eslint": "^6.7.2",
     "eslint-plugin-vue": "^6.2.2",
-    "markdown-it-meta": "0.0.1",
-    "postcss-cli": "^7.1.1",
-    "vue-template-compiler": "^2.6.12",
-    "vuepress": "^1.5.4",
-    "vuepress-plugin-template-constants": "^0.2.1",
-    "webpack-manifest-plugin": "^2.2.0"
+    "pascalcase": "^2.0.0",
+    "postcss": "^8.4.6",
+    "tailwindcss": "^3.0.18",
+    "vite": "^2.7.2",
+    "vite-plugin-vue2": "^1.9.3"
   }
 }

package/src/BtnDropdown.vue

@@ -17,13 +17,19 @@
                 {{ $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';
-import BtnDropdownSingle from './BtnDropdownSingle';
+import BtnDropdownSplit from './BtnDropdownSplit.vue';
+import BtnDropdownSingle from './BtnDropdownSingle.vue';
 
 export default {
 
@@ -43,10 +49,9 @@ export default {
 @keyframes btnDropdownZoomIn {
     from {
         opacity: 0;
-        transform: scale3d(0.3, 0.3, 0.3);
     }
 
-    50% {
+    to {
         opacity: 1;
     }
 }
@@ -70,18 +75,18 @@ export default {
 
 .btn-dropdown.rounded-circle > .btn:last-child,
 .btn-dropdown.rounded-circle > .btn-group:last-child .dropdown-toggle {
-    border-top-right-radius: 1000rem;
-    border-bottom-right-radius: 1000rem;
+    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: 1000rem;
-    border-bottom-left-radius: 1000rem;
+    border-top-left-radius: 100%;
+    border-bottom-left-radius: 100%;
 }
 
 .btn-dropdown .rounded-circle {
-    border-radius: 1000rem;
+    border-radius: 100%;
 }
 
 .btn-dropdown .rotate-90 {
@@ -96,7 +101,8 @@ export default {
 }
 
 .btn-dropdown .dropdown-menu {
-    animation-duration: 125ms;
+    animation-timing-function: ease-in-out;
+    animation-duration: 200ms;
     animation-fill-mode: both;
 }
 

package/src/BtnDropdownSingle.vue

@@ -1,27 +1,30 @@
 <template>
     <btn-group :class="classes">
-        <btn-dropdown-action
-            :id="$attrs.id"
-            ref="button"
-            :expanded="isDropdownShowing"
-            :href="href"
-            :to="to"
-            :style="toggleStyle"
-            :class="toggleClasses"
-            @click.native="onClickToggle">
-            <slot name="icon" />
-            <slot name="label">
-                {{ label }}
-            </slot>
-        </btn-dropdown-action>
+        <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="isDropdownShowing"
+            :show="expanded"
             :class="{animated: triggerAnimation}"
-            @click-item="onClickItem"
-            @blur-item="onBlurItem">
+            @blur-item="onBlur"
+            @click-item="onClickItem">
             <slot />
         </dropdown-menu>
     </btn-group>

package/src/BtnDropdownSplit.vue

@@ -1,55 +1,62 @@
 <template>
     <btn-group :class="classes" class="btn-dropdown-split" @click="onClick">
-        <btn-dropdown-action
-            v-if="!dropleft"
-            :id="$attrs.id"
-            ref="button"
-            :expanded="isDropdownShowing"
-            :href="href"
-            :to="to"
-            :class="actionClasses"
-            @click.native="e => $emit('click', e)">
-            <slot name="icon" />
-            <slot name="label">
-                {{ label }}
-            </slot>
-        </btn-dropdown-action>
-        <btn-group>
-            <button
-                v-if="split"
+        <slot v-if="!dropleft" name="button" v-bind="this">
+            <btn-dropdown-action
+                v-if="!dropleft"
                 :id="$attrs.id"
-                ref="split"
-                type="button"
-                aria-haspopup="true"
-                :aria-expanded="isDropdownShowing"
-                :class="toggleClasses"
-                @click="onClickToggle" />
+                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="isDropdownShowing"
+                :show="expanded"
                 :class="{animated: triggerAnimation}"
                 @click-item="onClickItem"
-                @blur-item="onBlurItem">
+                @blur-item="onBlur">
                 <slot />
             </dropdown-menu>
         </btn-group>
-        <btn-dropdown-action
-            v-if="dropleft"
-            :id="$attrs.id"
-            ref="button"
-            :expanded="isDropdownShowing"
-            :href="href"
-            :to="to"
-            :class="actionClasses"
-            @click.native="e => $emit('click', e)">
-            <slot name="icon" />
-            <slot name="label">
-                {{ label }}
-            </slot>
-        </btn-dropdown-action>
+        <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>
 

package/src/DropdownHandler.js

@@ -1,9 +1,8 @@
-import BtnDropdownAction from './BtnDropdownAction';
 import { createPopper } from '@popperjs/core';
-import Btn from '@vue-interface/btn';
+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';
+import { DropdownMenu } from '@vue-interface/dropdown-menu';
+import BtnDropdownAction from './BtnDropdownAction.vue';
 
 const TAB_KEYCODE = 9;
 
@@ -42,12 +41,7 @@ export default {
             default: true
         },
 
-        /**
-         * The button icon that appears before the label.
-         *
-         * @property {Boolean}
-         */
-        autoclose: Boolean,
+        // buttonClass: String,
 
         /**
          * Show the caret.
@@ -64,10 +58,11 @@ export default {
          *
          * @property Boolean
          */
-        circle: {
-            type: Boolean,
-            default: false
-        },
+        
+        // circle: {
+        //     type: Boolean,
+        //     default: false
+        // },
 
         /**
          * Display as a dropup instead of a dropdown.
@@ -128,6 +123,11 @@ export default {
          */
         label: String,
 
+        offset: {
+            type: Number,
+            default: 5,
+        },
+
         /**
          * Should rotate the toggle button when opened.
          *
@@ -178,7 +178,7 @@ export default {
         return {
             popper: null,
             triggerAnimation: false,
-            isDropdownShowing: false
+            expanded: false
         };
     },
 
@@ -215,17 +215,17 @@ export default {
                 '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,
+                '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 && prefix(this.size, 'btn'),
-                !this.nav && prefix(this.variant, 'btn')
+                !this.nav && this.size && this.sizeableClass,
+                !this.nav && this.variant && this.variantClass,
             ]
                 .filter(value => !!value)
                 .join(' ');
@@ -240,14 +240,15 @@ export default {
 
         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' : '',
-                !this.split && this.rotate && this.isDropdownShowing ? 'rotate-90' : '',
+                // !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',
             ]
@@ -261,23 +262,23 @@ export default {
     },
 
     mounted() {
-        const toggle = this.$el.querySelector('.dropdown-toggle');
+        // const toggle = this.$el.querySelector('.dropdown-toggle');
 
-        toggle.addEventListener('click', () => {
-            if(!this.isDropdownShowing) {
-                toggle.blur();
-            }
-        });
+        // toggle.addEventListener('click', () => {
+        //     if(!this.expanded) {
+        //         toggle.blur();
+        //     }
+        // });
 
-        toggle.addEventListener('blur', this.onBlurItem);
+        // toggle.addEventListener('blur', this.onBlurItem);
 
-        const menu = this.$el.querySelector('.dropdown-menu');
+        // const menu = this.$el.querySelector('.dropdown-menu');
 
-        menu.addEventListener('click', e => {
-            if(e.target === menu) {
-                toggle.focus();
-            }
-        });
+        // menu.addEventListener('click', e => {
+        //     if(e.target === menu) {
+        //         toggle.focus();
+        //     }
+        // });
     },
 
     methods: {
@@ -323,7 +324,7 @@ export default {
          * @return void
          */
         toggle(e) {
-            !this.isDropdownShowing ? this.show() : this.hide();
+            !this.expanded ? this.show() : this.hide();
         },
 
         /**
@@ -332,13 +333,13 @@ export default {
          * @return void
          */
         show() {
-            this.isDropdownShowing = true;
+            this.expanded = true;
 
-            const target = this.$refs.split || this.$el;
+            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';
+            // 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, {
@@ -350,7 +351,8 @@ export default {
                         {
                             name: 'offset',
                             options: {
-                                offset: [0, !this.nav ? 4 : 1],
+                                offset: [0, !this.nav ? this.offset : 1]
+                                // offset: ['.125rem', !this.nav ? 4 : 1],
                             },
                         },
                     ]
@@ -367,7 +369,7 @@ export default {
          * @return void
          */
         hide() {
-            this.isDropdownShowing = false;
+            this.expanded = false;
         },
 
         /**
@@ -375,7 +377,7 @@ export default {
          *
          * @return void
          */
-        onBlurItem(e) {
+        onBlur(e) {
             if(!this.$el.contains(e.relatedTarget)) {
                 this.hide();
             }
@@ -408,7 +410,7 @@ export default {
     },
 
     watch: {
-        isDropdownShowing(value) {
+        expanded(value) {
             this.$nextTick(() => {
                 this.$emit(value ? 'show' : 'hide');
                 this.$emit('toggle', value);

package/.eslintrc.js

@@ -1,53 +0,0 @@
-module.exports = {
-    extends: [
-        'plugin:vue/recommended'
-    ],
-    parserOptions: {
-        'parser': 'babel-eslint'
-    },
-    // add your custom rules here
-    rules: {
-        'vue/no-v-html': 0,
-        'vue/require-default-prop': 0,
-        "vue/max-attributes-per-line": ["error", {
-            "singleline": 5,
-            "multiline": {
-                "max": 1,
-                "allowFirstLine": true
-            }
-        }],
-        "vue/html-indent": ["error", 4, {
-            "attribute": 1,
-            "baseIndent": 1,
-            "closeBracket": 1,
-            "alignAttributesVertically": false,
-            "ignores": []
-        }],
-        "vue/html-closing-bracket-newline": ["error", {
-            "singleline": "never",
-            "multiline": "never"
-        }],
-        // Ensure no space after keywords like if.
-        'keyword-spacing': ["error", {
-            "overrides": {
-                "if": { "after": false },
-                "for": { "after": false },
-                "while": { "after": false }
-            }
-        }],
-        // Use alternative brace style
-        'brace-style': ['error', 'stroustrup'],
-        // No spaces before parens
-        'space-before-function-paren': ['error', 'never'],
-        // Indent for tabs because spaces suck
-        'indent': ['error', 4],
-        // Semi colons always where they need to be
-        'semi': [2,'always'],
-        // allow paren-less arrow functions
-        'arrow-parens': 0,
-        // allow async-await
-        'generator-star-spacing': 0,
-        // allow debugger during development
-        'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
-    }
-};

package/babel.config.js

@@ -1,7 +0,0 @@
-module.exports = {
-    presets: [
-        ['@vue/cli-plugin-babel/preset', {
-            "modules": false
-        }]
-    ]
-};