├── .gitignore
├── Dropdown.vue
├── LICENSE
├── README.md
└── package.json


/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules/
 3 | /dist/
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | 
 8 | # Editor directories and files
 9 | .idea
10 | .vscode
11 | *.suo
12 | *.ntvs*
13 | *.njsproj
14 | *.sln
15 | .editorconfig
16 | 


--------------------------------------------------------------------------------
/Dropdown.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="bp-dropdown" :class="{ className, 'bp-dropdown--sub': role }">
  3 |     <span :class="{ [`bp-dropdown__${(role) ? 'sub' : 'btn'}`]: true, [`bp-dropdown__${(role) ? 'sub' : 'btn'}--active`]: !isHidden, [`${className}-bp__btn`]: className, [`${className}-bp__btn--active`]: !isHidden }"
  4 |           @click="_onToggle"
  5 |           @mouseenter="_onBtnEnter"
  6 |           @mouseleave="_onBtnLeave">
  7 |       <slot name="btn"></slot>
  8 |       <slot name="icon" v-if="isIcon">
  9 |         <svg v-if="isLoading"
 10 |              class="bp-dropdown__icon bp-dropdown__icon--spin"
 11 |              viewBox="0 0 512 512">
 12 |           <path fill="currentColor" d="M304 48c0 26.51-21.49 48-48 48s-48-21.49-48-48 21.49-48 48-48 48 21.49 48 48zm-48 368c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zm208-208c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zM96 256c0-26.51-21.49-48-48-48S0 229.49 0 256s21.49 48 48 48 48-21.49 48-48zm12.922 99.078c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.491-48-48-48zm294.156 0c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.49-48-48-48zM108.922 60.922c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.491-48-48-48z"></path>
 13 |         </svg>
 14 |         <svg v-else
 15 |              class="bp-dropdown__icon"
 16 |              :class="{ [`bp-dropdown__icon--${align}`]: align }"
 17 |              viewBox="0 0 256 512">
 18 |             <path fill="currentColor" d="M119.5 326.9L3.5 209.1c-4.7-4.7-4.7-12.3 0-17l7.1-7.1c4.7-4.7 12.3-4.7 17 0L128 287.3l100.4-102.2c4.7-4.7 12.3-4.7 17 0l7.1 7.1c4.7 4.7 4.7 12.3 0 17L136.5 327c-4.7 4.6-12.3 4.6-17-.1z"></path>
 19 |         </svg>
 20 |       </slot>
 21 |     </span>
 22 |         <transition name="fade">
 23 |             <div v-if="!isHidden"
 24 |                  class="bp-dropdown__body"
 25 |                  :id="id"
 26 |                  :style="{ minWidth: `${width}px`, top: `${top}px`, left: `${left}px` }"
 27 |                  :class="{ [`${className}-bp__body`]: className }"
 28 |                  @click="_onBodyClick"
 29 |                  @mouseenter="_onBodyEnter"
 30 |                  @mouseleave="_onBodyLeave">
 31 |                 <slot name="body"></slot>
 32 |             </div>
 33 |         </transition>
 34 |     </div>
 35 | </template>
 36 | 
 37 | <script>
 38 |     export default {
 39 |         name: 'bp-vuejs-dropdown',
 40 | 
 41 |         props: {
 42 |             role: {
 43 |                 type: String,
 44 |                 required: false,
 45 |                 default: ''
 46 |             },
 47 | 
 48 |             unscroll: {
 49 |                 type: [HTMLElement, String],
 50 |                 required: false,
 51 |                 default: null
 52 |             },
 53 | 
 54 |             align: {
 55 |                 type: String,
 56 |                 required: false,
 57 |                 default: 'auto'
 58 |             },
 59 | 
 60 |             alignOrder: {
 61 |                 type: Array,
 62 |                 required: false,
 63 |                 default: () => ['right-bottom', 'right-top', 'left-bottom', 'left-top', 'bottom-left', 'bottom-right', 'top-left', 'top-right']
 64 |             },
 65 | 
 66 |             x: {
 67 |                 type: Number,
 68 |                 required: false,
 69 |                 default: 0
 70 |             },
 71 | 
 72 |             y: {
 73 |                 type: Number,
 74 |                 required: false,
 75 |                 default: 0
 76 |             },
 77 | 
 78 |             beforeOpen: {
 79 |                 type: Function,
 80 |                 required: false,
 81 |                 default: resolve => resolve()
 82 |             },
 83 | 
 84 |             trigger: {
 85 |                 type: String,
 86 |                 required: false,
 87 |                 default: 'click'
 88 |             },
 89 | 
 90 |             closeOnClick: {
 91 |                 type: Boolean,
 92 |                 required: false,
 93 |                 default: false
 94 |             },
 95 | 
 96 |             isIcon: {
 97 |                 type: Boolean,
 98 |                 required: false,
 99 |                 default: true
100 |             },
101 | 
102 |             className: {
103 |                 type: String,
104 |                 required: false,
105 |                 default: ''
106 |             },
107 |         },
108 | 
109 |         data() {
110 |             return {
111 |                 isHidden: true,
112 |                 isLoading: false,
113 | 
114 |                 id: null,
115 |                 timeout: null,
116 | 
117 |                 top: undefined,
118 |                 right: undefined,
119 |                 bottom: undefined,
120 |                 left: undefined,
121 |                 width: undefined
122 |             }
123 |         },
124 | 
125 |         watch: {
126 |             isHidden(isHidden) {
127 |                 if (this.unscroll) {
128 |                     const el = (this.unscroll instanceof HTMLElement) ?
129 |                         this.unscroll : document.querySelector(this.unscroll);
130 | 
131 |                     if (el) {
132 |                         el.style.overflow = (!isHidden) ? 'hidden' : '';
133 |                     }
134 |                 }
135 |             }
136 |         },
137 | 
138 |         created() {
139 |             const $root = this.$root;
140 | 
141 |             // --- hide dropdown if other dropdowns show
142 |             // --- or document clicked
143 |             $root.$on('bp-dropdown:open', () => this.isHidden = true);
144 |             $root.$on('bp-dropdown:hide', () => this.isHidden = true);
145 | 
146 |             // --- hide dropdown on document click event
147 |             if (this.trigger === 'click' && !$root['is-bp-dropdown']) {
148 |                 Object.defineProperty($root, 'is-bp-dropdown', {
149 |                     enumerable: false,
150 |                     configurable: false,
151 |                     writable: false,
152 |                     value: true
153 |                 });
154 | 
155 |                 document.onmousedown = (e) => {
156 |                     const target = e.target;
157 |                     const dropdown = target.closest('.bp-dropdown__btn') || target.closest('.bp-dropdown__body');
158 | 
159 |                     if (!dropdown) {
160 |                         $root.$emit('bp-dropdown:hide');
161 |                     }
162 |                 }
163 |             }
164 | 
165 |             this.id = 'bp-dropdown-' + this.generateRandomId();
166 |         },
167 | 
168 |         methods: {
169 |             // --- generate random id for query selector
170 |             generateRandomId() {
171 |                 return Math.random().toString(36).substr(2, 10);
172 |             },
173 | 
174 |             _onToggle(e) {
175 |                 if (this.trigger !== 'click') {
176 |                     return;
177 |                 }
178 | 
179 |                 this.checkCustomCallback(e);
180 |             },
181 | 
182 |             _onBtnEnter(e) {
183 |                 if (this.trigger !== 'hover' || !this.isHidden) {
184 |                     return;
185 |                 }
186 | 
187 |                 this.checkCustomCallback(e);
188 |             },
189 | 
190 |             _onBtnLeave(e) {
191 |                 if (this.trigger !== 'hover') {
192 |                     return;
193 |                 }
194 | 
195 |                 if (this.role) {
196 |                     this.timeout = setTimeout(() => this.isHidden = true, 100);
197 |                 }
198 | 
199 |                 const to = e.toElement;
200 |                 if (!to) {
201 |                     return;
202 |                 }
203 | 
204 |                 const isDropdown = to.closest('.bp-dropdown__btn') || to.closest('.bp-dropdown__body');
205 |                 if (isDropdown) {
206 |                     return;
207 |                 }
208 | 
209 |                 this.prepare();
210 |             },
211 | 
212 |             _onBodyClick() {
213 |                 if (this.closeOnClick) {
214 |                     this.isHidden = true;
215 |                 }
216 |             },
217 | 
218 |             _onBodyEnter() {
219 |                 if (this.timeout) {
220 |                     clearTimeout(this.timeout);
221 |                 }
222 |             },
223 | 
224 |             _onBodyLeave(e) {
225 |                 if (this.trigger !== 'hover') {
226 |                     return;
227 |                 }
228 | 
229 |                 const to = e.toElement;
230 |                 if (!to) {
231 |                     return;
232 |                 }
233 | 
234 |                 if (to.closest('.bp-dropdown__btn') || to.closest('.bp-dropdown__sub')) {
235 |                     return;
236 |                 }
237 | 
238 |                 this.prepare();
239 |             },
240 | 
241 |             checkCustomCallback(e) {
242 |                 if (!this.isHidden) {
243 |                     this.prepare();
244 |                     return;
245 |                 }
246 | 
247 |                 // --- custom callback before open
248 |                 const promise = new Promise(resolve => {
249 |                     this.isLoading = true;
250 |                     this.beforeOpen.call(this, resolve);
251 |                 });
252 | 
253 |                 promise.then(() => {
254 |                     this.isLoading = false;
255 |                     if (!e.target.closest('.bp-dropdown__body')) {
256 |                         // --- hide dropdown if other dropdowns show
257 |                         this.$root.$emit('bp-dropdown:open');
258 |                     }
259 | 
260 |                     setTimeout(this.prepare, 0);
261 |                 });
262 | 
263 |                 promise.catch(() => { throw Error('bp-dropdown promise error') });
264 |             },
265 | 
266 |             prepare() {
267 |                 this.isHidden = !this.isHidden;
268 |                 if (!this.isHidden) {
269 |                     this.$nextTick(() => {
270 |                         const button = this.$el.firstElementChild;
271 |                         const container = document.getElementById(this.id);
272 | 
273 |                         this.setWidth(button.offsetWidth);
274 |                         this.setPosition(button, container);
275 |                     });
276 |                 }
277 |             },
278 | 
279 |             setWidth(width) {
280 |                 this.width = width;
281 |             },
282 | 
283 |             setPosition(btn, body) {
284 |                 if (!btn || !body) {
285 |                     return;
286 |                 }
287 | 
288 |                 let rect;
289 |                 if (this.align === 'auto') {
290 |                     // --- view port size
291 |                     const vpWidth = document.documentElement.clientWidth;
292 |                     const vpHeight = document.documentElement.clientHeight;
293 | 
294 |                     for (let i = 0; i <= this.alignOrder.length; i++) {
295 |                         const align = (i === this.alignOrder.length ? this.alignOrder[0] : this.alignOrder[i]);
296 |                         rect = this.calcRectFromAlign(btn, body, align);
297 | 
298 |                         if (rect.left >= pageXOffset &&
299 |                             rect.top >= pageYOffset &&
300 |                             rect.right <= pageXOffset + vpWidth &&
301 |                             rect.bottom <= pageYOffset + vpHeight) {
302 |                           break;
303 |                         }
304 |                     }
305 |                 } else {
306 |                   rect = this.calcRectFromAlign(btn, body, this.align);
307 |                 }
308 | 
309 |                 this.top = rect.top;
310 |                 this.left = rect.left;
311 |             },
312 | 
313 |             calcRectFromAlign (btn, body, align) {
314 |                 const coords = this.getCoords(btn);
315 | 
316 |                 // --- current position
317 |                 const currentTop = coords.top;
318 |                 const currentLeft = coords.left;
319 | 
320 |                 // --- btn size
321 |                 const btnWidth = btn.offsetWidth;
322 |                 const btnHeight = btn.offsetHeight;
323 | 
324 |                 // --- body size
325 |                 const bodyWidth = body.offsetWidth;
326 |                 const bodyHeight = body.offsetHeight;
327 | 
328 |                 let _top, _left;
329 | 
330 |                 switch(align) {
331 |                     case 'top':
332 |                     case 'top-right':
333 |                         _top = (currentTop + pageYOffset - bodyHeight);
334 |                         _left = (currentLeft + pageXOffset);
335 |                         break;
336 |                     case 'top-left':
337 |                         _top = (currentTop + pageYOffset - bodyHeight);
338 |                         _left = (currentLeft + pageXOffset - bodyWidth + btnWidth);
339 |                         break;
340 |                     case 'right':
341 |                     case 'right-bottom':
342 |                         _top = (currentTop + pageYOffset);
343 |                         _left = (currentLeft + pageXOffset + btnWidth);
344 |                         break;
345 |                     case 'right-top':
346 |                         _top = (currentTop + pageYOffset - bodyHeight + btnHeight);
347 |                         _left = (currentLeft + pageXOffset + btnWidth);
348 |                         break;
349 |                     case 'bottom-left':
350 |                         _top = (currentTop + pageYOffset + btnHeight);
351 |                         _left = (currentLeft + pageXOffset - bodyWidth + btnWidth);
352 |                         break;
353 |                     case 'left':
354 |                     case 'left-bottom':
355 |                         _top = (currentTop + pageYOffset);
356 |                         _left = (currentLeft + pageXOffset - bodyWidth);
357 |                         break;
358 |                     case 'left-top':
359 |                         _top = (currentTop + pageYOffset - bodyHeight + btnHeight);
360 |                         _left = (currentLeft + pageXOffset - bodyWidth);
361 |                         break;
362 |                     case 'bottom':
363 |                     case 'bottom-right':
364 |                     default:
365 |                         _top = (currentTop + pageYOffset + btnHeight);
366 |                         _left = (currentLeft + pageXOffset);
367 |                         break;
368 |                 }
369 | 
370 |                 _top += this.y;
371 |                 _left += this.x;
372 | 
373 |                 return {top: _top, left: _left, bottom: _top + bodyHeight, right: _left + bodyWidth};
374 |             },
375 | 
376 |             getCoords(el) {
377 |                 el = el.getBoundingClientRect();
378 |                 return {
379 |                     top: el.top - pageYOffset,
380 |                     left: el.left - pageXOffset
381 |                 };
382 |             }
383 |         }
384 |     }
385 | </script>
386 | 
387 | <style>
388 |     .bp-dropdown--sub {
389 |         width: 100%;
390 |     }
391 | 
392 |     .bp-dropdown--sub .bp-dropdown__btn,
393 |     .bp-dropdown--sub .bp-dropdown__sub {
394 |         width: 100%;
395 |     }
396 | 
397 |     .bp-dropdown--sub .bp-dropdown__icon {
398 |         margin-left: auto;
399 |     }
400 | 
401 |     .bp-dropdown__btn {
402 |         display: inline-flex;
403 |         align-items: center;
404 |         padding: 3px 5px;
405 |         border: 1px solid #efefef;
406 |         cursor: pointer;
407 |         transition: background-color .1s ease;
408 |     }
409 | 
410 |     .bp-dropdown__sub {
411 |         display: inline-flex;
412 |         align-items: center;
413 |     }
414 | 
415 |     .bp-dropdown__btn--active {
416 |         background-color: #eee;
417 |     }
418 | 
419 |     .bp-dropdown__icon {
420 |         display: inline-block;
421 |         width: 15px;
422 |         height: 15px;
423 |         overflow: visible;
424 |         transition: transform .1s ease;
425 |     }
426 | 
427 |     .bp-dropdown__icon--spin {
428 |         width: 12px;
429 |         height: 12px;
430 |         animation: spin 2s infinite linear;
431 |     }
432 | 
433 |     .bp-dropdown__icon--top {
434 |         transform: rotate(-180deg);
435 |     }
436 | 
437 |     .bp-dropdown__icon--right {
438 |         transform: rotate(-90deg);
439 |     }
440 | 
441 |     .bp-dropdown__icon--bottom {
442 |         transform: rotate(0);
443 |     }
444 | 
445 |     .bp-dropdown__icon--left {
446 |         transform: rotate(-270deg);
447 |     }
448 | 
449 |     .bp-dropdown__btn--active .bp-dropdown__icon--top,
450 |     .bp-dropdown__sub--active .bp-dropdown__icon--top {
451 |         transform: rotate(0);
452 |     }
453 | 
454 |     .bp-dropdown__btn--active .bp-dropdown__icon--right,
455 |     .bp-dropdown__sub--active .bp-dropdown__icon--right {
456 |         transform: rotate(-270deg);
457 |     }
458 | 
459 |     .bp-dropdown__btn--active .bp-dropdown__icon--bottom,
460 |     .bp-dropdown__sub--active .bp-dropdown__icon--bottom {
461 |         transform: rotate(-180deg);
462 |     }
463 | 
464 |     .bp-dropdown__btn--active .bp-dropdown__icon--left,
465 |     .bp-dropdown__sub--active .bp-dropdown__icon--left {
466 |         transform: rotate(-90deg);
467 |     }
468 | 
469 |     .bp-dropdown__body {
470 |         position: fixed;
471 |         top: 0;
472 |         left: 0;
473 |         padding: 6px 8px;
474 |         background-color: #fff;
475 |         box-shadow: 0 5px 15px -5px rgba(0, 0, 0, .5);
476 |         z-index: 9999;
477 |     }
478 | 
479 |     .fade-enter-active, .fade-leave-active {
480 |         transition: opacity .1s;
481 |     }
482 | 
483 |     .fade-enter, .fade-leave-to {
484 |         opacity: 0;
485 |     }
486 | 
487 |     @keyframes spin {
488 |         0% {
489 |             transform:rotate(0)
490 |         }
491 |         100% {
492 |             transform:rotate(360deg)
493 |         }
494 |     }
495 | </style>
496 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2017-present, Boris Butenko
 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 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # bp-vuejs-dropdown
 2 | 
 3 | [Documentation and demo](https://brandquad.github.io/bp-vuejs-demo/#/dropdown)
 4 | 
 5 | Install:
 6 | ```bash
 7 | npm i -D bp-vuejs-dropdown
 8 | ```
 9 | 
10 | ```bash
11 | import Vue from 'vue';
12 | import Dropdown from 'bp-vuejs-dropdown';
13 | ```
14 | 
15 | ```bash
16 | // global
17 | Vue.use(Dropdown)
18 | ```
19 | 
20 | ```bash
21 | // local
22 | components: { Dropdown }
23 | ```
24 | 
25 | Use:
26 | ```vue
27 | <dropdown>
28 |     <template slot="btn">Custom btn</template>
29 |     <template slot="icon">Custom icon</template>
30 |     <template slot="body">Custom body</template>
31 | </dropdown>
32 | ```


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "bp-vuejs-dropdown",
 3 |   "version": "2.1.1",
 4 |   "description": "dropdown with auto positioning for vuejs",
 5 |   "repository": {
 6 |     "type": "git",
 7 |     "url": "git+https://github.com/borisbutenko/bp-vuejs-dropdown.git"
 8 |   },
 9 |   "keywords": [
10 |     "vuejs",
11 |     "vue",
12 |     "component",
13 |     "dropdown"
14 |   ],
15 |   "author": "Boris Butenko",
16 |   "license": "MIT",
17 |   "bugs": {
18 |     "url": "https://github.com/borisbutenko/bp-vuejs-dropdown/issues"
19 |   },
20 |   "homepage": "https://brandquad.github.io/bp-vuejs-demo/#/dropdown",
21 |   "dependencies": {
22 |     "vue": "^2.5.13",
23 |     "vue-template-compiler": "^2.5.13"
24 |   },
25 |   "main": "Dropdown.vue",
26 |   "scripts": {
27 |     "build": "webpack --progress --colors"
28 |   },
29 |   "devDependencies": {
30 |     "babel-core": "^6.26.0",
31 |     "babel-loader": "^7.1.2",
32 |     "babel-plugin-syntax-jsx": "^6.18.0",
33 |     "babel-plugin-transform-runtime": "^6.23.0",
34 |     "babel-plugin-transform-vue-jsx": "^3.5.0",
35 |     "babel-preset-env": "^1.6.1",
36 |     "babel-preset-stage-2": "^6.24.1",
37 |     "css-loader": "^0.28.7",
38 |     "extract-text-webpack-plugin": "^3.0.2",
39 |     "optimize-css-assets-webpack-plugin": "^3.2.0",
40 |     "postcss-cssnext": "^3.0.2",
41 |     "postcss-import": "^11.0.0",
42 |     "vue-loader": "^13.6.2",
43 |     "webpack": "^3.10.0"
44 |   }
45 | }
46 | 


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