├── .browserslistrc
├── babel.config.js
├── postcss.config.js
├── docs
    ├── .vuepress
    │   ├── style.styl
    │   ├── config.js
    │   └── components
    │   │   └── DropdownMenuDemo.vue
    └── README.md
├── src
    ├── index.js
    └── components
    │   └── DropdownMenu.vue
├── .gitignore
├── .eslintrc.js
├── README.md
├── deploy.sh
├── package.json
└── LICENCE.md


/.browserslistrc:
--------------------------------------------------------------------------------
1 | > 1%
2 | last 2 versions
3 | ie 11


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/app'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     autoprefixer: {}
4 |   }
5 | }
6 | 


--------------------------------------------------------------------------------
/docs/.vuepress/style.styl:
--------------------------------------------------------------------------------
1 | // showing default values
2 | $accentColor = #3eaf7c
3 | $textColor = #2c3e50
4 | $borderColor = #eaecef
5 | $codeBgColor = #282c34
6 | 
7 | .navbar {
8 |   position: fixed !important;
9 | }


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import DropdownMenu from './components/DropdownMenu'
 2 | 
 3 | const install = (Vue) => {
 4 |   Vue.component('DropdownMenu', DropdownMenu)
 5 | }
 6 | 
 7 | // auto install if used in browser
 8 | if (typeof window !== 'undefined' && window.Vue) {
 9 |   install(window.Vue)
10 | }
11 | 
12 | export { DropdownMenu as default }


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | # local env files
 6 | .env.local
 7 | .env.*.local
 8 | 
 9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | 
14 | # Editor directories and files
15 | .idea
16 | .vscode
17 | *.suo
18 | *.ntvs*
19 | *.njsproj
20 | *.sln
21 | *.sw?
22 | 
23 | 
24 | docs/.vuepress/dist


--------------------------------------------------------------------------------
/docs/.vuepress/config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   ga: 'UA-141652960-2',
 3 |   base: '/vue-dropdown-menu/',
 4 |   title: 'Dropdown menu library',
 5 |   description: 'Dropdown menu library by Innologica',
 6 |   themeConfig: {
 7 |     nav: [
 8 |       { text: 'Github', link: 'https://github.com/Innologica/vue-dropdown-menu' }
 9 |     ],
10 |     sidebar: 'auto'
11 |   },
12 | }


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: {
 4 |     node: true
 5 |   },
 6 |   'extends': [
 7 |     'plugin:vue/essential',
 8 |     'eslint:recommended'
 9 |   ],
10 |   rules: {
11 |     'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
12 |     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
13 |   },
14 |   parserOptions: {
15 |     parser: 'babel-eslint'
16 |   }
17 | }
18 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Dropdown menu
 2 | 
 3 | Universal dropdown menu component for Vue. Any element can be dropdown trigger and anything can be dropdown content.
 4 | 
 5 | Fully customizable - supports left/right opening, open on hover/click, interactive mode ...
 6 | 
 7 | ## Installation
 8 | 
 9 | ```shell
10 | npm i @innologica/vue-dropdown-menu --save
11 | ```
12 | 
13 | or 
14 | 
15 | ```shell
16 | yarn add @innologica/vue-dropdown-menu
17 | ```
18 | 
19 | import to use:
20 | 
21 | ```JS
22 | import DropdownMenu from '@innologica/vue-dropdown-menu'
23 | ```
24 | 
25 | ## Demo
26 | 
27 | Demo and documentation at https://innologica.github.io/vue-dropdown-menu/


--------------------------------------------------------------------------------
/deploy.sh:
--------------------------------------------------------------------------------
 1 | #!/usr/bin/env sh
 2 | 
 3 | # abort on errors
 4 | set -e
 5 | 
 6 | # build
 7 | npm run docs:build
 8 | 
 9 | # navigate into the build output directory
10 | cd docs/.vuepress/dist
11 | 
12 | # if you are deploying to a custom domain
13 | # echo 'www.example.com' > CNAME
14 | 
15 | git init
16 | git add -A
17 | git commit -m 'deploy'
18 | 
19 | # if you are deploying to https://<USERNAME>.github.io
20 | # git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git master
21 | 
22 | # if you are deploying to https://<USERNAME>.github.io/<REPO>
23 | git push -f git@github.com:Innologica/vue-dropdown-menu.git master:gh-pages
24 | 
25 | 
26 | cd -


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "@innologica/vue-dropdown-menu",
 3 |   "version": "0.1.4",
 4 |   "scripts": {
 5 |     "lint": "vue-cli-service lint",
 6 |     "lib": "vue-cli-service build --target lib --name vue-dropdown-menu ./src/index.js",
 7 |     "docs:dev": "vuepress dev docs",
 8 |     "docs:build": "vuepress build docs",
 9 |     "prepublish": "npm run lib"
10 |   },
11 |   "dependencies": {
12 |     "core-js": "^2.6.5",
13 |     "vue": "^2.6.10"
14 |   },
15 |   "files": [
16 |     "dist",
17 |     "src"
18 |   ],
19 |   "main": "dist/vue-dropdown-menu.umd.min.js",
20 |   "jsnext:main": "dist/vue-dropdown-menu.umd.min.js",
21 |   "devDependencies": {
22 |     "@vue/cli-plugin-babel": "^3.8.0",
23 |     "@vue/cli-plugin-eslint": "^3.8.0",
24 |     "@vue/cli-service": "^3.8.0",
25 |     "babel-eslint": "^10.0.1",
26 |     "eslint": "^5.16.0",
27 |     "eslint-plugin-vue": "^5.0.0",
28 |     "node-sass": "^4.9.0",
29 |     "sass-loader": "^7.1.0",
30 |     "vue-template-compiler": "^2.6.10",
31 |     "vuepress": "^0.14.11"
32 |   }
33 | }
34 | 


--------------------------------------------------------------------------------
/LICENCE.md:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2022 Innologica Ltd
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/docs/README.md:
--------------------------------------------------------------------------------
 1 | # Dropdown menu
 2 | 
 3 | Universal dropdown menu component for Vue. Any element can be dropdown trigger and anything can be dropdown content.
 4 | 
 5 | Fully customizable - supports left/right opening, open on hover/click, interactive mode ...
 6 | 
 7 | ## Installation
 8 | 
 9 | ```shell
10 | npm i @innologica/vue-dropdown-menu --save
11 | ```
12 | 
13 | or 
14 | 
15 | ```shell
16 | yarn add @innologica/vue-dropdown-menu
17 | ```
18 | 
19 | import to use:
20 | 
21 | ```JS
22 | import DropdownMenu from '@innologica/vue-dropdown-menu'
23 | ```
24 | 
25 | ## Example
26 | 
27 | <DropdownMenuDemo/>
28 | 
29 | ### Demo source
30 | 
31 | ```vue
32 | <dropdown-menu
33 |         v-model="show"
34 |         :right="right"
35 |         :hover="hover"
36 |         :interactive="interactive"
37 | >
38 |     <button class="btn btn-primary dropdown-toggle">
39 |         Click to open dropdown
40 |     </button>
41 |     <div slot="dropdown">
42 |         <a class="dropdown-item" href="#">Action</a>
43 |         <a class="dropdown-item" href="#">Another action</a>
44 |         <a class="dropdown-item" href="#">Something else here</a>
45 |     </div>
46 | </dropdown-menu>
47 | ```
48 | 
49 | ## Props
50 | 
51 | | Prop        | Type           | Default  |Description  |
52 | | ------------- |:-------------| -----|-----|
53 | | value      | Boolean | false |Opens/closes the dropdown. The component uses v-model to control the state of the dropdown.|
54 | | right      | Boolean | false |Whether to stick the dropdown on the right side of the element.|
55 | | hover      | Boolean | false |If true the menu is open on hover (after hover_time) else it is open on click.|
56 | | closeOnClickOutside      | Boolean | true |Should the menu close when clicked outside|
57 | | hover_time      | Integer | false |Time before the menu opens in hover model. Default: 100ms|
58 | | transition      | String | '' |The vue transition name used to open the menu. |
59 | 
60 | ## Slots
61 | 
62 | ### default 
63 | This slot is the element that triggers the dropdown. It can be any HTML element, the components surrounds it with a div which handles the events like hover/click etc.
64 | 
65 | ### dropdown 
66 | This slot is the content of the dropdown menu.
67 | 


--------------------------------------------------------------------------------
/src/components/DropdownMenu.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div
  3 |             class="dropdown"
  4 |             :class="{ dropup: top }"
  5 |             @mouseleave="mouseLeave"
  6 |             @mouseover="mouseOver"
  7 |             @mouseenter="mouseEnter"
  8 |             @click="toggleMenu"
  9 |     >
 10 |         <slot></slot>
 11 |         <transition :name="transition">
 12 |             <div
 13 |                     v-show="value"
 14 |                     class="dropdown-menu show"
 15 |                     :class="{ 'dropdown-menu-right': right}"
 16 |                     :style="styles"
 17 |                     @mouseleave="startTimer"
 18 |                     @mouseenter="stopTimer"
 19 |                     @click.stop
 20 |                     ref="dropdown"
 21 |             >
 22 |                 <slot name="dropdown"></slot>
 23 |             </div>
 24 |         </transition>
 25 |     </div>
 26 | </template>
 27 | 
 28 | <script>
 29 |   export default {
 30 |     props: {
 31 |       value: Boolean,
 32 |       right: Boolean,
 33 |       hover: Boolean,
 34 |       hover_time: {
 35 |         type: Number,
 36 |         default: 100
 37 |       },
 38 |       hover_timeout: {
 39 |         type: Number,
 40 |         default: 500
 41 |       },
 42 |       styles: {
 43 |         type: Object,
 44 |         default () {
 45 |           return {}
 46 |         }
 47 |       },
 48 |       interactive: { //whether should stay open until clicked outside
 49 |         type: Boolean,
 50 |         default: false,
 51 |       },
 52 |       transition: {
 53 |         type: String,
 54 |         default: '',
 55 |       },
 56 |       closeOnClickOutside: {
 57 |         type: Boolean,
 58 |         default: true
 59 |       }
 60 |     },
 61 |     data () {
 62 |       return {
 63 |         hovering: false,
 64 |         top: false,
 65 |       }
 66 |     },
 67 |     destroyed () {
 68 |       document.body.removeEventListener('click', this.closeMenu)
 69 |     },
 70 |     methods: {
 71 |       mouseEnter () {
 72 |         // console.log('mouseEnter', $event.target)
 73 |         this.stopTimer()
 74 |         if (this.hover && this.hover_time > 0 && !this.value) {
 75 |           // console.log('start open timer', this.hover_time)
 76 |           this.hoverOpenTimer = setTimeout(() => {
 77 |             this.$emit('input', true)
 78 |             //disable for a moment
 79 |             this.hovering = true
 80 |             setTimeout(() => {
 81 |               this.hovering = false
 82 |             }, this.hover_timeout)
 83 |           }, this.hover_time)
 84 |         }
 85 | 
 86 |         if (this.hover && !this.value && this.hover_time === 0) {
 87 |           this.hovering = true
 88 |           setTimeout(() => {
 89 |             this.hovering = false
 90 |           }, this.hover_timeout)
 91 |           this.$emit('input', true)
 92 |         }
 93 | 
 94 |       },
 95 |       mouseLeave () {
 96 |         // console.log('mouseLeave', $event.target)
 97 |         if (!this.hoverTimer) { //left the link and no time active
 98 |           this.startTimer()
 99 |         }
100 | 
101 |         if (this.hover_time > 0 && this.hover) {
102 |           // console.log('clear hover timer')
103 |           clearTimeout(this.hoverOpenTimer)
104 |         }
105 |       },
106 |       mouseOver () {
107 |         this.stopTimer()
108 |         // console.log('mouseOver')
109 |       },
110 |       closeMenu ($event) {
111 |         if (!$event || !this.$el.contains($event.target)) {
112 |           if (this.value && this.closeOnClickOutside) {
113 |             this.$emit('input', false)
114 |           }
115 |         }
116 |       },
117 |       toggleMenu () {
118 |         if (this.hovering)
119 |           return
120 |         if (this.value && this.hover)
121 |           return
122 |         this.$emit('input', !this.value)
123 |       },
124 |       stopTimer () {
125 |         // console.log('stop timer')
126 |         clearTimeout(this.hoverTimer)
127 |         this.hoverTimer = null
128 |       },
129 |       startTimer () {
130 |         // console.log('start timer')
131 |         if (!this.interactive)
132 |           this.hoverTimer = setTimeout(this.closeMenu, this.hover_timeout)
133 |       },
134 |     },
135 |     watch: {
136 |       value (v) {
137 |         if (v) {
138 |           let vm = this
139 |           this.top = false
140 |           this.$nextTick(() => {
141 |               let rect = vm.$refs.dropdown.getBoundingClientRect()
142 |               let window_height = (window.innerHeight || document.documentElement.clientHeight)
143 |               this.top = (rect.bottom > window_height) && (rect.top >= rect.height)
144 |             }
145 |           )
146 |         }
147 |       },
148 |       interactive: {
149 |         handler (value) {
150 |           if(typeof document === "object")
151 |             value ? document.body.addEventListener('click', this.closeMenu) : document.body.removeEventListener('click', this.closeMenu)
152 |         },
153 |         immediate: true
154 |       }
155 |     }
156 |   }
157 | </script>


--------------------------------------------------------------------------------
/docs/.vuepress/components/DropdownMenuDemo.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="py-4">
  3 |         <div class="form-check">
  4 |             <input class="form-check-input" type="checkbox" v-model="show" id="show">
  5 |             <label class="form-check-label" for="show">show</label>
  6 |             <small class="text-muted">
  7 |                 (boolean) toggle the dropdown
  8 |             </small>
  9 |         </div>
 10 |         <div class="form-check">
 11 |             <input class="form-check-input" type="checkbox" v-model="right" id="right">
 12 |             <label class="form-check-label" for="right">right</label>
 13 |             <small class="text-muted">
 14 |                 (boolean) open menu on the right side of the element
 15 |             </small>
 16 |         </div>
 17 |         <div class="form-check">
 18 |             <input class="form-check-input" type="checkbox" v-model="hover" id="hover">
 19 |             <label class="form-check-label" for="hover">hover</label>
 20 |             <small class="text-muted">
 21 |                 (boolean) open menu on hover (instead of click)
 22 |             </small>
 23 | 
 24 |         </div>
 25 |         <div class="form-check">
 26 |             <input class="form-check-input" type="checkbox" v-model="interactive" id="interactive">
 27 |             <label class="form-check-label" for="interactive">interactive</label>
 28 |             <small class="text-muted">
 29 |                 (boolean) do not close the dropdown until clicked outside
 30 |             </small>
 31 |         </div>
 32 |         <div class="form-check">
 33 |             <input class="form-check-input" type="checkbox" v-model="closeOnClickOutside" id="closeOnClickOutside">
 34 |             <label class="form-check-label" for="closeOnClickOutside">closeOnClickOutside</label>
 35 |             <small class="text-muted">
 36 |                 (boolean) do not close the dropdown WHEN clicked outside
 37 |             </small>
 38 |         </div>
 39 |         <div class="form-check">
 40 |             <input class="form-check-input" type="checkbox" v-model="transition" id="transition">
 41 |             <label class="form-check-label" for="transition">transition</label>
 42 |             <small class="text-muted">
 43 |                 (string) the transition for the menu. If checked in the demo we use "translate-fade-down" which is added in the demo component.
 44 | 
 45 |                 Below is the source of the css effect.
 46 |             </small>
 47 |             <details>
 48 |                 <summary>translate-fade-down.css</summary>
 49 |                 <pre style="color: white;">
 50 | /*translate fade (top to down)*/
 51 | .translate-fade-down-enter-active, .translate-fade-down-leave-active {
 52 |     transition: all 250ms;
 53 |     transition-timing-function: cubic-bezier(.53,2,.36,.85);
 54 | }
 55 | .translate-fade-down-enter, .translate-fade-down-leave-active {
 56 |     opacity: 0;
 57 | }
 58 | .translate-fade-down-enter, .translate-fade-down-leave-to {
 59 |     position: absolute;
 60 | }
 61 | 
 62 | .translate-fade-down-enter {
 63 |     transform: translateY(-10px);
 64 | }
 65 | .translate-fade-down-leave-active {
 66 |     transform: translateY(10px);
 67 | }
 68 |                 </pre>
 69 |             </details>
 70 |         </div>
 71 | 
 72 | 
 73 |         <div class="py-4">
 74 |             <dropdown-menu
 75 |                     v-model="show"
 76 |                     :right="right"
 77 |                     :hover="hover"
 78 |                     :interactive="interactive"
 79 |                     :transition="transition ? 'translate-fade-down':''"
 80 |                     :closeOnClickOutside="closeOnClickOutside"
 81 |                     style="display: inline-block;"
 82 |             >
 83 |                 <button class="btn btn-primary dropdown-toggle">Click to open dropdown</button>
 84 |                 <div slot="dropdown">
 85 |                     <a class="dropdown-item" href="#">Action</a>
 86 |                     <a class="dropdown-item" href="#">Another action</a>
 87 |                     <a class="dropdown-item" href="#">Something else here</a>
 88 |                 </div>
 89 |             </dropdown-menu>
 90 |         </div>
 91 |     </div>
 92 | </template>
 93 | 
 94 | <script>
 95 |   import DropdownMenu from '../../../src/components/DropdownMenu'
 96 | 
 97 |   export default {
 98 |     name: "DropdownMenuDemo",
 99 |     components: {DropdownMenu},
100 |     data () {
101 |       return {
102 |         show: false,
103 |         right: false,
104 |         hover: false,
105 |         interactive: false,
106 |         transition: false,
107 |         closeOnClickOutside: true,
108 |       }
109 |     },
110 |   }
111 | </script>
112 | 
113 | <style>
114 |     @import "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css";
115 | </style>
116 | 
117 | <style>
118 |     /*translate fade (top to down)*/
119 |     .translate-fade-down-enter-active, .translate-fade-down-leave-active {
120 |         transition: all 250ms;
121 |         transition-timing-function: cubic-bezier(.53,2,.36,.85);
122 |     }
123 |     .translate-fade-down-enter, .translate-fade-down-leave-active {
124 |         opacity: 0;
125 |     }
126 |     .translate-fade-down-enter, .translate-fade-down-leave-to {
127 |         position: absolute;
128 |     }
129 | 
130 |     .translate-fade-down-enter {
131 |         transform: translateY(-10px);
132 |     }
133 |     .translate-fade-down-leave-active {
134 |         transform: translateY(10px);
135 |     }
136 | </style>


--------------------------------------------------------------------------------