├── .gitignore
├── LICENSE
├── index.js
├── package.json
├── readme.MD
└── src
    └── Droppler.vue


/.gitignore:
--------------------------------------------------------------------------------
1 | /node_modules
2 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2017 Joe Archer
 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 | 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
1 | var droppler = require('./src/Droppler.vue')
2 | droppler.install = function(Vue, options) {
3 |     options = options || { name: 'droppler' }
4 |     Vue.component(options.name, droppler)
5 | }
6 | module.exports = droppler
7 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-droppler",
 3 |   "version": "0.1.4",
 4 |   "description": "Super simple dropdowns for Vue using drop.js",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "git+ssh://git@github.com/joearcher/vue-droppler.git"
12 |   },
13 |   "keywords": [
14 |     "Dropdowns",
15 |     "crop",
16 |     "menus",
17 |     "dop.js",
18 |     "Vue",
19 |     "vuejs2"
20 |   ],
21 |   "author": "Joe Archer",
22 |   "license": "MIT",
23 |   "bugs": {
24 |     "url": "https://github.com/joearcher/vue-droppler/issues"
25 |   },
26 |   "homepage": "https://github.com/joearcher/vue-droppler#readme",
27 |   "dependencies": {
28 |     "tether-drop": "^1.4.2"
29 |   }
30 | }
31 | 


--------------------------------------------------------------------------------
/readme.MD:
--------------------------------------------------------------------------------
 1 | # Droppler
 2 | ## A super simple Vuejs2 dropdown component using drop.js
 3 | 
 4 | Droppler is a Vue 2 component for creating fixed position "dropdown" content using [drop.js](https://github.com/HubSpot/drop).
 5 | 
 6 | Droppler supports all of the options for drop.js.
 7 | 
 8 | ## Installation
 9 | 
10 | ```bash
11 | npm install vue-droppler
12 | ```
13 | 
14 | ## Use
15 | 
16 | Register droppler as a global component:
17 | ```javascript
18 | Vue.component('droppler', require('vue-droppler'));
19 | ```
20 | 
21 | or use it in a single component:
22 | 
23 | ```javascript
24 | var Droppler = require('droppler');
25 | 
26 | ...
27 | components: {
28 |     'droppler': Droppler
29 | }
30 | ...
31 | ```
32 | 
33 | ### Basic example
34 | 
35 | ```javascript
36 | 
37 | <droppler>
38 |     <button slot="drop-trigger">Click me</button>
39 |     <div slot="drop-content">
40 |         Some content for the dropdown.
41 |     </div>
42 | </droppler>
43 | ```
44 | 
45 | ### Options
46 | Here is the options object with default values. Any of these can be passed to droppler using a property.
47 | 
48 | For more information about these options, have a look at the [drop.js documentation](http://github.hubspot.com/drop/)
49 | 
50 | ```javascript
51 | {
52 |     position: 'bottom left',
53 |     openOn: 'click',
54 |     classes: 'drop-theme-basic',
55 |     constrainToWindow: false,
56 |     constrainToScrollParent: false,
57 |     hoverOpenDelay:  0,
58 |     hoverCloseDelay:  50,
59 |     focusDelay:  0,
60 |     blurDelay: 50,
61 |     tetherOptions: {}
62 | }
63 | ```
64 | 
65 | ### Example with options
66 | 
67 | ```javascript
68 | <droppler position="top right" openOn="hover" constrainToWindow="true">
69 |     <button slot="drop-trigger" href="#">Click me</button>
70 |     <div slot="drop-content">
71 |         Some content for the dropdown.
72 |     </div>
73 | </droppler>
74 | ```
75 | 
76 | ## License
77 | Copyright &copy; 2017 Joe Archer - [MIT License](LICENSE)
78 | 


--------------------------------------------------------------------------------
/src/Droppler.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | <span>
 3 |         <span ref="dropTrigger">
 4 |             <slot name="drop-trigger"></slot>
 5 |         </span>
 6 | <div ref="dropContent" class="">
 7 |     <slot name="drop-content"></slot>
 8 | </div>
 9 | </span>
10 | </template>
11 | 
12 | <script>
13 | const Drop = require('tether-drop');
14 | 
15 | export default {
16 | 
17 |     props: [
18 |         'position',
19 |         'openOn',
20 |         'classes',
21 |         'constrainToWindow',
22 |         'constrainToScrollParent',
23 |         'hoverOpenDelay',
24 |         'hoverCloseDelay',
25 |         'focusDelay',
26 |         'blurDelay',
27 |         'tetherOptions',
28 |         'remove'
29 |     ],
30 | 
31 |     data() {
32 |         return {
33 |             drop: null
34 |         }
35 |     },
36 | 
37 |     mounted() {
38 | 
39 |         this.drop = new Drop({
40 |             target: this.$refs.dropTrigger,
41 |             content: this.$refs.dropContent,
42 |             position: this.position ? this.position : 'bottom left',
43 |             openOn: this.openOn ? this.openOn : 'click',
44 |             classes: this.classes ? this.classes : 'drop-theme-basic',
45 |             constrainToWindow: this.constrainToWindow ? true : false,
46 |             constrainToScrollParent: this.constrainToScrollParent ? true : false,
47 |             hoverOpenDelay: this.hoverOpenDelay ? this.hoverOpenDelay : 0,
48 |             hoverCloseDelay: this.hoverCloseDelay ? this.hoverCloseDelay : 50,
49 |             focusDelay: this.focusDelay ? this.focusDelay : 0,
50 |             blurDelay: this.blurDelay ? this.blurDelay : 50,
51 |             tetherOptions: this.tetherOptions ? this.tetherOptions : {},
52 |             remove: this.remove ? true : false,
53 |         });
54 |     }
55 | }
56 | </script>
57 | 


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