npm - @vue-interface/btn-dropdown - Versions diffs - 0.9.10 → 0.9.14 - Mend

@vue-interface/btn-dropdown 0.9.10 → 0.9.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (51) hide show

package/dist/btn-dropdown.es.js +2179 -0
package/dist/btn-dropdown.umd.js +1 -0
package/dist/style.css +1 -0
package/package.json +26 -29
package/.eslintrc.js +0 -53
package/babel.config.js +0 -7
package/dist/BtnDropdown.common.js +0 -6903
package/dist/BtnDropdown.common.js.map +0 -1
package/dist/BtnDropdown.css +0 -1
package/dist/BtnDropdown.umd.js +0 -6913
package/dist/BtnDropdown.umd.js.map +0 -1
package/dist/BtnDropdown.umd.min.js +0 -2
package/dist/BtnDropdown.umd.min.js.map +0 -1
package/dist/demo.html +0 -19
package/docs/.vuepress/config.js +0 -44
package/docs/.vuepress/dist/404.html +0 -19
package/docs/.vuepress/dist/assets/css/0.styles.275ee968.css +0 -1
package/docs/.vuepress/dist/assets/img/search.83621669.svg +0 -1
package/docs/.vuepress/dist/assets/js/10.5d93d289.js +0 -1
package/docs/.vuepress/dist/assets/js/11.97ab3884.js +0 -1
package/docs/.vuepress/dist/assets/js/2.f3d148c3.js +0 -1
package/docs/.vuepress/dist/assets/js/3.81681fff.js +0 -1
package/docs/.vuepress/dist/assets/js/4.82fa7382.js +0 -1
package/docs/.vuepress/dist/assets/js/5.3dae6ad4.js +0 -1
package/docs/.vuepress/dist/assets/js/6.6a04f815.js +0 -1
package/docs/.vuepress/dist/assets/js/7.c033cb49.js +0 -1
package/docs/.vuepress/dist/assets/js/8.6d6eb599.js +0 -1
package/docs/.vuepress/dist/assets/js/9.eaefe866.js +0 -1
package/docs/.vuepress/dist/assets/js/app.7ed065d3.js +0 -13
package/docs/.vuepress/dist/examples/index.html +0 -21
package/docs/.vuepress/dist/examples/test.html +0 -17
package/docs/.vuepress/dist/index.html +0 -53
package/docs/.vuepress/dist/options.html +0 -41
package/docs/.vuepress/dist/tailwindcss.html +0 -85
package/docs/README.md +0 -17
package/docs/examples/README.md +0 -3
package/docs/options.md +0 -44
package/index.html +0 -339
package/index.js +0 -3
package/main.vue +0 -5
package/postcss.config.js +0 -1
package/public/favicon.ico +0 -0
package/public/index.html +0 -17
package/src/BtnDropdown.vue +0 -108
package/src/BtnDropdownAction.vue +0 -38
package/src/BtnDropdownSingle.vue +0 -40
package/src/BtnDropdownSplit.vue +0 -66
package/src/DropdownHandler.js +0 -420
package/src/css/BtnDropdown.css +0 -1
package/tailwind.config.js +0 -13
package/vue.config.js +0 -11

package/index.html DELETED Viewed

@@ -1,339 +0,0 @@
-<!DOCTYPE html>
-<html>
-    <head>
-        <meta charset="utf-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-        <title>BtnDropdown</title>
-        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap-reboot.min.css">
-        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap-grid.min.css">
-        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@vue-interface/navigation/dist/Navigation.css">
-        <link rel="stylesheet" href="./dist/BtnDropdown.css">
-    </head>
-    <body>
-        <div id="app" class="container">
-            <h1 class="mb-5">btn-dropdown</h1>
-            <h3>Basic Usage</h3>
-            <navigation>
-                <a href="#">Item #1</a>
-                <btn-dropdown label="Item #2">
-                    <a href="#">Dropdown Item #1</a>
-                    <a href="#">Dropdown Item #2</a>
-                </btn-dropdown>
-            </navigation>
-            <!--
-            <btn-dropdown variant="secondary" label="Dropdown" @click-toggle="onToggle">
-                <router-link to="/" @click="onClickItem">Action</router-link>
-                <a href="#">Another Action</a>
-                <a href="#">Something else here</a>
-            </btn-dropdown>
-            <btn-dropdown variant="secondary" label="Dropdown" split @click="onClick" @click-toggle="onToggle">
-                <router-link to="/" @click="onClickItem">Action</router-link>
-                <a href="#">Another Action</a>
-                <a href="#">Something else here</a>
-            </btn-dropdown>
-            <hr>
-            <h3>Variants</h3>
-            <btn-dropdown label="Primary" variant="primary">
-                <a href="#">Action</a>
-                <a href="#">Another Action</a>
-                <a href="#">Something else here</a>
-            </btn-dropdown>
-            <btn-dropdown label="Secondary" variant="secondary">
-                <a href="#">Action</a>
-                <a href="#">Another Action</a>
-                <a href="#">Something else here</a>
-            </btn-dropdown>
-            <btn-dropdown label="Success" variant="success">
-                <a href="#">Action</a>
-                <a href="#">Another Action</a>
-                <a href="#">Something else here</a>
-            </btn-dropdown>
-            <btn-dropdown label="Info" variant="info">
-                <a href="#">Action</a>
-                <a href="#">Another Action</a>
-                <a href="#">Something else here</a>
-            </btn-dropdown>
-            <btn-dropdown label="Warning" variant="warning">
-                <a href="#">Action</a>
-                <a href="#">Another Action</a>
-                <a href="#">Something else here</a>
-            </btn-dropdown>
-            <btn-dropdown label="Danger" variant="danger">
-                <a href="#">Action</a>
-                <a href="#">Another Action</a>
-                <a href="#">Something else here</a>
-            </btn-dropdown>
-            <btn-dropdown label="Dark" variant="dark">
-                <a href="#">Action</a>
-                <a href="#">Another Action</a>
-                <a href="#">Something else here</a>
-            </btn-dropdown>
-            <btn-dropdown label="Light" variant="light">
-                <a href="#">Action</a>
-                <a href="#">Another Action</a>
-                <a href="#">Something else here</a>
-            </btn-dropdown>
-            <btn-dropdown label="Muted" variant="muted">
-                <a href="#">Action</a>
-                <a href="#">Another Action</a>
-                <a href="#">Something else here</a>
-            </btn-dropdown>
-            <hr>
-            <h3>Split button dropdowns</h3>
-            <btn-dropdown label="Primary" variant="primary" split>
-                <a href="#">Action</a>
-                <a href="#">Another Action</a>
-                <a href="#">Something else here</a>
-            </btn-dropdown>
-            <btn-dropdown label="Secondary" variant="secondary" split>
-                <a href="#">Action</a>
-                <a href="#">Another Action</a>
-                <a href="#">Something else here</a>
-            </btn-dropdown>
-            <btn-dropdown label="Success" variant="success" split>
-                <a href="#">Action</a>
-                <a href="#">Another Action</a>
-                <a href="#">Something else here</a>
-            </btn-dropdown>
-            <btn-dropdown label="Info" variant="info" split>
-                <a href="#">Action</a>
-                <a href="#">Another Action</a>
-                <a href="#">Something else here</a>
-            </btn-dropdown>
-            <btn-dropdown label="Warning" variant="warning" split>
-                <a href="#">Action</a>
-                <a href="#">Another Action</a>
-                <a href="#">Something else here</a>
-            </btn-dropdown>
-            <btn-dropdown label="Danger" variant="danger" split>
-                <a href="#">Action</a>
-                <a href="#">Another Action</a>
-                <a href="#">Something else here</a>
-            </btn-dropdown>
-            <btn-dropdown label="Dark" variant="dark" split>
-                <a href="#">Action</a>
-                <a href="#">Another Action</a>
-                <a href="#">Something else here</a>
-            </btn-dropdown>
-            <btn-dropdown label="Light" variant="light" split>
-                <a href="#">Action</a>
-                <a href="#">Another Action</a>
-                <a href="#">Something else here</a>
-            </btn-dropdown>
-            <btn-dropdown label="Muted" variant="muted" split>
-                <a href="#">Action</a>
-                <a href="#">Another Action</a>
-                <a href="#">Something else here</a>
-            </btn-dropdown>
-            <hr>
-            <h3>Split button dropdowns</h3>
-            <p>
-                <btn-dropdown label="Small button" size="sm" variant="secondary">
-                    <a href="#">Action</a>
-                    <a href="#">Another Action</a>
-                    <a href="#">Something else here</a>
-                </btn-dropdown>
-                <btn-dropdown label="Medium button" size="md" variant="secondary">
-                    <a href="#">Action</a>
-                    <a href="#">Another Action</a>
-                    <a href="#">Something else here</a>
-                </btn-dropdown>
-                <btn-dropdown label="Large button" size="lg" variant="secondary">
-                    <a href="#">Action</a>
-                    <a href="#">Another Action</a>
-                    <a href="#">Something else here</a>
-                </btn-dropdown>
-            </p>
-            <p>
-                <btn-dropdown label="Small button" size="sm" variant="secondary" split>
-                    <a href="#">Action</a>
-                    <a href="#">Another Action</a>
-                    <a href="#">Something else here</a>
-                </btn-dropdown>
-                <btn-dropdown label="Medium button" size="md" variant="secondary" split>
-                    <a href="#">Action</a>
-                    <a href="#">Another Action</a>
-                    <a href="#">Something else here</a>
-                </btn-dropdown>
-                <btn-dropdown label="Large button" size="lg" variant="secondary" split>
-                    <a href="#">Action</a>
-                    <a href="#">Another Action</a>
-                    <a href="#">Something else here</a>
-                </btn-dropdown>
-            </p>
-            <hr>
-            <h3>Menu Alignment</h3>
-            <p>
-                <btn-dropdown align="left" label="Align Left" variant="secondary">
-                    <a href="#">Action</a>
-                    <a href="#">Another Action</a>
-                    <a href="#">Something else here</a>
-                </btn-dropdown>
-                <btn-dropdown align="right" label="Align Right" variant="secondary">
-                    <a href="#">Action</a>
-                    <a href="#">Another Action</a>
-                    <a href="#">Something else here</a>
-                </btn-dropdown>
-            </p>
-            <p>
-                <btn-dropdown split align="left" label="Align Left Split" variant="secondary">
-                    <a href="#">Action</a>
-                    <a href="#">Another Action</a>
-                    <a href="#">Something else here</a>
-                </btn-dropdown>
-                <btn-dropdown split align="right" label="Align Right Split" variant="secondary">
-                    <a href="#">Action</a>
-                    <a href="#">Another Action</a>
-                    <a href="#">Something else here</a>
-                </btn-dropdown>
-            </p>
-            <hr>
-            <h3>Dropup variation</h3>
-            <btn-dropdown label="Dropup" variant="secondary" dropup>
-                <a href="#">Action</a>
-                <a href="#">Another Action</a>
-                <a href="#">Something else here</a>
-            </btn-dropdown>
-            <btn-dropdown label="Split Dropup" variant="secondary" split dropup>
-                <a href="#">Action</a>
-                <a href="#">Another Action</a>
-                <a href="#">Something else here</a>
-            </btn-dropdown>
-            <hr>
-            <h3>Dropright variation</h3>
-            <btn-dropdown label="Dropup" variant="secondary" dropright>
-                <a href="#">Action</a>
-                <a href="#">Another Action</a>
-                <a href="#">Something else here</a>
-            </btn-dropdown>
-            <btn-dropdown label="Split Dropup" variant="secondary" split dropright>
-                <a href="#">Action</a>
-                <a href="#">Another Action</a>
-                <a href="#">Something else here</a>
-            </btn-dropdown>
-            <hr>
-            <h3>Dropleft variation</h3>
-            <btn-dropdown label="Dropleft" variant="secondary" dropleft>
-                <a href="#">Action</a>
-                <a href="#">Another Action</a>
-                <a href="#">Something else here</a>
-            </btn-dropdown>
-            <btn-dropdown label="Dropleft" variant="secondary" split dropleft>
-                <a href="#">Action</a>
-                <a href="#">Another Action</a>
-                <a href="#">Something else here</a>
-            </btn-dropdown>
-            <hr>
-            <h3>Button Menu Items</h3>
-            <btn-dropdown label="Dropup" variant="secondary">
-                <a>Action</a>
-                <a>Another Action</a>
-                <a >Something else here</a>
-            </btn-dropdown>
-            <btn-dropdown label="Split Dropup" variant="secondary" split>
-                <a>Action</a>
-                <a>Another Action</a>
-                <a>Something else here</a>
-            </btn-dropdown>
-            -->
-        </div>
-        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
-        <script src="https://cdn.jsdelivr.net/npm/vue-router/dist/vue-router.js"></script>
-        <script src="https://cdn.jsdelivr.net/npm/@vue-interface/navigation/dist/Navigation.umd.min.js"></script>
-        <script type="text/javascript" src="./dist/BtnDropdown.umd.js"></script>
-        <script type="text/javascript">
-            Vue.use(VueRouter);
-            const router = new VueRouter({
-                routes: [{
-                    path: '/test',
-                    name: 'Home'
-                }]
-            });
-            const vue = new Vue({
-                router,
-                el: '#app',
-                components: {
-                    BtnDropdown,
-                    Navigation
-                },
-                methods: {
-                    onClick(e) {
-                        console.log('click', e);
-                    },
-                    onToggle(e) {
-                        console.log('toggle', e);
-                        // e.preventDefault() will stop the toggle.
-                    },
-                    onClickItem(e) {
-                        e.stopPropagation();
-                    }
-                },
-                data() {
-                    return {
-                        hasClicked: false,
-                        hasClicked2: false
-                    }
-                }
-            });
-        </script>
-    </body>
-</html>

package/index.js DELETED Viewed

@@ -1,3 +0,0 @@
-import './src/css/BtnDropdown.css';
-import BtnDropdown from './src/BtnDropdown';
-export default BtnDropdown;

package/main.vue DELETED Viewed

@@ -1,5 +0,0 @@
-<script>
-import './src/css/BtnDropdown.css';
-import BtnDropdown from './src/BtnDropdown';
-export default BtnDropdown;
-</script>

package/postcss.config.js DELETED Viewed

	@@ -1 +0,0 @@
1	- module.exports = {};

package/public/favicon.ico DELETED Viewed

Binary file

package/public/index.html DELETED Viewed

@@ -1,17 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <title><%= htmlWebpackPlugin.options.title %></title>
-  </head>
-  <body>
-    <noscript>
-      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
-    </noscript>
-    <div id="app"></div>
-    <!-- built files will be auto injected -->
-  </body>
-</html>

package/src/BtnDropdown.vue DELETED Viewed

@@ -1,108 +0,0 @@
-<template>
-    <component
-        :is="$attrs.split === undefined ? '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>
-        <slot />
-    </component>
-</template>
-<script>
-import BtnDropdownSplit from './BtnDropdownSplit';
-import BtnDropdownSingle from './BtnDropdownSingle';
-export default {
-    name: 'BtnDropdown',
-    components: {
-        BtnDropdownSplit,
-        BtnDropdownSingle
-    },
-    inheritAttrs: false
-};
-</script>
-<style>
-@keyframes btnDropdownZoomIn {
-    from {
-        opacity: 0;
-        transform: scale3d(0.3, 0.3, 0.3);
-    }
-    50% {
-        opacity: 1;
-    }
-}
-.btn-dropdown {
-    position: relative;
-}
-.btn-dropdown.nav-link .dropdown-toggle {
-    background: none;
-    border: 0;
-    padding: .5rem .25em;
-    margin-left: .25rem;
-    margin-right: -.25rem;
-}
-.btn-dropdown .dropdown-toggle {
-    display: flex;
-    transition: all 125ms ease-in;
-    align-items: center;
-    justify-content: center;
-}
-.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;
-}
-.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;
-}
-.btn-dropdown .rounded-circle {
-    border-radius: 1000rem;
-}
-.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-duration: 125ms;
-    animation-fill-mode: both;
-}
-.btn-dropdown .dropdown-menu.animated {
-    animation-name: btnDropdownZoomIn;
-}
-</style>

package/src/BtnDropdownAction.vue DELETED Viewed

@@ -1,38 +0,0 @@
-<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 DELETED Viewed

@@ -1,40 +0,0 @@
-<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>
-        <dropdown-menu
-            :id="$attrs.id"
-            ref="menu"
-            :align="align"
-            :show="isDropdownShowing"
-            :class="{animated: triggerAnimation}"
-            @click-item="onClickItem"
-            @blur-item="onBlurItem">
-            <slot />
-        </dropdown-menu>
-    </btn-group>
-</template>
-<script>
-import DropdownHandler from './DropdownHandler';
-export default {
-    mixins: [
-        DropdownHandler
-    ]
-};
-</script>

package/src/BtnDropdownSplit.vue DELETED Viewed

@@ -1,66 +0,0 @@
-<template>
-    <btn-group :class="classes" @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"
-                :id="$attrs.id"
-                ref="split"
-                type="button"
-                aria-haspopup="true"
-                :aria-expanded="isDropdownShowing"
-                :class="toggleClasses"
-                @click="onClickToggle" />
-            <dropdown-menu
-                :id="$attrs.id"
-                ref="menu"
-                :align="align"
-                :show="isDropdownShowing"
-                :class="{animated: triggerAnimation}"
-                @click-item="onClickItem"
-                @blur-item="onBlurItem">
-                <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>
-    </btn-group>
-</template>
-<script>
-import DropdownHandler from './DropdownHandler';
-export default {
-    mixins: [
-        DropdownHandler
-    ]
-};
-</script>