├── .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 |
38 |
39 |
40 | Some content for the dropdown.
41 |
42 |
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 |
69 |
70 |