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


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


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-dropdowns",
 3 |   "version": "1.1.2",
 4 |   "description": "An easier way to display select boxes using objects",
 5 |   "main": "Dropdown.vue",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 | 
10 |   "repository": {
11 |     "type": "git",
12 |     "url": "git+https://github.com/mikerodham/vue-dropdowns.git"
13 |   },
14 |   "keywords": [
15 |     "vue",
16 |     "dropdown",
17 |     "vue-dropdown",
18 |     "vue-dropdowns"
19 |   ],
20 |   "author": "Mike Rodham",
21 |   "license": "MIT"
22 | }
23 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2017 Mike Rodham
 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 | # vue-dropdowns
 2 | A better way to handle `v-for` on objects.
 3 | 
 4 | No special dependencies, no jquery, no bootstrap, just VueJS and CSS goodness.
 5 | 
 6 | # Demo
 7 |  - [Demo - https://mikerodham.github.io/vue-dropdowns/](https://mikerodham.github.io/vue-dropdowns/)
 8 | 
 9 | # Requirements
10 | 
11 | - [Vue.js](https://github.com/vuejs/vue) `^2.0.0`
12 | 
13 | # Installation
14 | 
15 | ```shell
16 | $ npm install vue-dropdowns
17 | // OR
18 | $ yarn add vue-dropdowns
19 | ```
20 | 
21 | # Usage
22 | 
23 | ```html
24 | <dropdown class="my-dropdown-toggle"
25 |           :options="arrayOfObjects" 
26 |           :selected="object" 
27 |           v-on:updateOption="methodToRunOnSelect" 
28 |           :placeholder="'Select an Item'"
29 |           :closeOnOutsideClick="boolean">
30 | </dropdown>
31 | 
32 | <script>
33 | import dropdown from 'vue-dropdowns';
34 | 
35 | export default {
36 |         data() {
37 |           return {
38 |             arrayOfObjects: [],
39 |             object: {
40 |               name: 'Object Name',
41 |             }
42 |           }
43 |         },
44 | 
45 |         components: {
46 |             'dropdown': dropdown,
47 |         },
48 | 
49 |         methods: {
50 |           methodToRunOnSelect(payload) {
51 |             this.object = payload;
52 |           }
53 |         }
54 |       }
55 | </script>
56 | 
57 | <style scoped>
58 | .my-dropdown-toggle {
59 |   border-radius: 5px;
60 | 
61 |   ::v-deep .dropdown-toggle {
62 |     color: tomato;
63 |     font-size: 25px;
64 |     font-weight: 800;
65 |   }
66 | 
67 |   ::v-deep .dropdown-toggle-placeholder {
68 |     color: #c4c4c4;
69 |   }
70 | }
71 | </style>
72 | 
73 | ```
74 | 
75 | # Default values of props
76 | | Property             | Type          | Default value   |
77 | | -------------------- |:-------------:| ---------------:|
78 | | closeOnOutsideClick  | boolean       | true            |
79 | | placeholder          | string        | 'Select an Item' |
80 | 
81 | # License
82 | 
83 | [The MIT License](http://opensource.org/licenses/MIT)
84 | 


--------------------------------------------------------------------------------
/Dropdown.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="btn-group">
  3 |         <li @click="toggleMenu()" class="dropdown-toggle" v-if="selectedOption.name !== undefined">
  4 |           {{ selectedOption.name }}
  5 |           <span class="caret"></span>
  6 |         </li>
  7 | 
  8 |         <li @click="toggleMenu()" class="dropdown-toggle dropdown-toggle-placeholder" v-if="selectedOption.name === undefined">
  9 |           {{placeholderText}}
 10 |           <span class="caret"></span>
 11 |         </li>
 12 | 
 13 |         <ul class="dropdown-menu" v-if="showMenu">
 14 |             <li v-for="(option, idx) in options" :key="idx">
 15 |                 <a href="javascript:void(0)" @click="updateOption(option)">
 16 |                     {{ option.name }}
 17 |                 </a>
 18 |             </li>
 19 |         </ul>
 20 |     </div>
 21 | </template>
 22 | 
 23 | <script>
 24 |     export default {
 25 |         data() {
 26 |             return {
 27 |                 selectedOption: {
 28 |                   name: '',
 29 |                 },
 30 |                 showMenu: false,
 31 |                 placeholderText: 'Please select an item',
 32 |             }
 33 |         },
 34 |         props: {
 35 |             options: {
 36 |                 type: [Array, Object]
 37 |             },
 38 |             selected: {},
 39 |             placeholder: [String],
 40 |             closeOnOutsideClick: {
 41 |               type: [Boolean],
 42 |               default: true,
 43 |             },
 44 |         },
 45 | 
 46 |         mounted() {
 47 |             this.selectedOption = this.selected;
 48 |             if (this.placeholder)
 49 |             {
 50 |                 this.placeholderText = this.placeholder;
 51 |             }
 52 | 
 53 |             if (this.closeOnOutsideClick) {
 54 |               document.addEventListener('click', this.clickHandler);
 55 |             }
 56 |         },
 57 | 
 58 |         beforeDestroy() {
 59 |             document.removeEventListener('click', this.clickHandler);
 60 |         },
 61 | 
 62 |         methods: {
 63 |             updateOption(option) {
 64 |                 this.selectedOption = option;
 65 |                 this.showMenu = false;
 66 |                 this.$emit('updateOption', this.selectedOption);
 67 |             },
 68 | 
 69 |             toggleMenu() {
 70 |               this.showMenu = !this.showMenu;
 71 |             },
 72 | 
 73 |             clickHandler(event) {
 74 |                 const { target } = event;
 75 |                 const { $el } = this;
 76 | 
 77 |                 if (!$el.contains(target)) {
 78 |                   this.showMenu = false;
 79 |                 }
 80 |             },
 81 |         }
 82 |     }
 83 | </script>
 84 | 
 85 | <style>
 86 | 
 87 | .btn-group {
 88 |   min-width: 160px;
 89 |   height: 40px;
 90 |   position: relative;
 91 |   margin: 10px 1px;
 92 |   display: inline-block;
 93 |   vertical-align: middle;
 94 | }
 95 | .btn-group a:hover {
 96 |   text-decoration: none;
 97 | }
 98 | 
 99 | .dropdown-toggle {
100 |   color: #636b6f;
101 |   min-width: 160px;
102 |   padding: 10px 20px 10px 10px;
103 |   text-transform: none;
104 |   font-weight: 300;
105 |   margin-bottom: 7px;
106 |   border: 0;
107 |   background-image: linear-gradient(#009688, #009688), linear-gradient(#D2D2D2, #D2D2D2);
108 |   background-size: 0 2px, 100% 1px;
109 |   background-repeat: no-repeat;
110 |   background-position: center bottom, center calc(100% - 1px);
111 |   background-color: transparent;
112 |   transition: background 0s ease-out;
113 |   float: none;
114 |   box-shadow: none;
115 |   border-radius: 0;
116 |   white-space: nowrap;
117 |   text-overflow: ellipsis;
118 |   overflow: hidden;
119 | }
120 | .dropdown-toggle:hover {
121 |   background: #e1e1e1;
122 |   cursor: pointer;
123 | }
124 | 
125 | .dropdown-menu {
126 |   position: absolute;
127 |   top: 100%;
128 |   left: 0;
129 |   z-index: 1000;
130 |   float: left;
131 |   min-width: 160px;
132 |   padding: 5px 0;
133 |   margin: 2px 0 0;
134 |   list-style: none;
135 |   font-size: 14px;
136 |   text-align: left;
137 |   background-color: #fff;
138 |   border: 1px solid #ccc;
139 |   border-radius: 4px;
140 |   box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
141 |   background-clip: padding-box;
142 | }
143 | 
144 | .dropdown-menu > li > a {
145 |   padding: 10px 30px;
146 |   display: block;
147 |   clear: both;
148 |   font-weight: normal;
149 |   line-height: 1.6;
150 |   color: #333333;
151 |   white-space: nowrap;
152 |   text-decoration: none;
153 | }
154 | .dropdown-menu > li > a:hover {
155 |   background: #efefef;
156 |   color: #409FCB;
157 | }
158 | 
159 | .dropdown-menu > li {
160 |   overflow: hidden;
161 |   width: 100%;
162 |   position: relative;
163 |   margin: 0;
164 | }
165 | 
166 | .caret {
167 |   width: 0;
168 |   position: absolute;
169 |   top: 19px;
170 |   height: 0;
171 |   margin-left: -24px;
172 |   vertical-align: middle;
173 |   border-top: 4px dashed;
174 |   border-top: 4px solid \9;
175 |   border-right: 4px solid transparent;
176 |   border-left: 4px solid transparent;
177 |   right: 10px;
178 | }
179 | 
180 | li {
181 |     list-style: none;
182 | }
183 | </style>
184 | 


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