├── .gitignore
├── CHANGELOG.md
├── README.md
├── dropdown.scss
├── dropdown.vue
└── package.json


/.gitignore:
--------------------------------------------------------------------------------
1 | .idea
2 | '.idea' 
3 | 


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
 1 | # Change Log
 2 | All notable changes to this project will be documented in this file.
 3 | 
 4 | The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 5 | and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 6 | 
 7 | ## [Unreleased]
 8 | #### Added
 9 | #### Changed
10 | #### Removed
11 | 
12 | ## Major Releases:
13 | 
14 | ### v1.1.0 - 2019 6 1
15 | #### Added
16 | * CHANGELOG.md
17 | * Required dependencies
18 | 
19 | #### Changed
20 | * Updated README.md to clarify instructions and correct typos/grammar
21 | 
22 | ### v1.0.0 - 2018 12 1
23 | * Initial Release
24 | 
25 | 
26 | ## Minor Releases:
27 | ### [v1.0.8] - 2018 12 1 through 2019 3 3
28 | #### Changed
29 | * Work to get to current release
30 | 
31 | <!-- LINKS -->
32 | <!-- RELEASES -->
33 | [Unreleased]: https://github.com/JonathanDn/vue-dropdown/compare/v1.1.0...HEAD
34 | [v1.1.0]: https://github.com/JonathanDn/vue-dropdown/compare/v1.0.8...v1.1.0
35 | [v1.0.8]: https://github.com/JonathanDn/vue-dropdown/compare/v1.0.0...v1.0.8
36 | 
37 | <!-- ISSUES -->
38 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # vue-dynamic-dropdown
  2 | ## A Highly Customizable, easy-to-use, elegant, dropdown component
  3 | 
  4 | Feedback would be much appreciated, questions, suggestions, issues are more than welcome.
  5 | 
  6 | ![MIT License](https://badgen.net/badge/license/MIT/blue "MIT License")
  7 | [![view on npm](http://img.shields.io/npm/v/vue-dynamic-dropdown.svg?colorB=red)](https://www.npmjs.org/package/vue-dynamic-dropdown)
  8 | 
  9 | ###### Demo
 10 | ![A dropdown demo gif](https://media.giphy.com/media/5QLuCj7YGvcAj49MGh/giphy.gif)
 11 | 
 12 | [![Edit Vue Dynamic Dropdown Component](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/vue-dynamic-dropdown-component-dm7bf)
 13 | 
 14 | # Usage:
 15 | 
 16 | ## First
 17 | Install via NPM ```npm i vue-dynamic-dropdown```
 18 | 
 19 | ## Second
 20 | Require in your project:
 21 | ```
 22 | var VueDropdown = require('vue-dynamic-dropdown');
 23 | ```
 24 | or ES6 syntax:
 25 | ```js
 26 | import VueDropdown from 'vue-dynamic-dropdown'
 27 | ```
 28 | 
 29 | # Third
 30 | You can register the component globally:
 31 | ```
 32 | Vue.component('vue-dropdown', VueDropdown);
 33 | ```
 34 | Or locally in a single Vue component:
 35 | ```
 36 | components: {
 37 |   VueDropdown
 38 | }
 39 | ```
 40 | 
 41 | Insert the following selector anywhere in your project (global) or in your existing component (local):
 42 | **NOTE:** To get up and running quickly the package now supports rendering just the selector with default values.
 43 | ```
 44 | <vue-dropdown></vue-dropdown>
 45 | ```
 46 | 
 47 | # Docs:
 48 | ```config: {...}``` is a configuration object that is to be bound to vue-dropdown, API properties are:
 49 | 
 50 | ## Basics
 51 | 
 52 | | Property | Type  | Description |
 53 | | --- | ---  | --- |
 54 | | **options** | array | Holds the inner selection options of the dropdown (shown when open), each single option is an object that has the ```value``` key that pairs with the given value e.g ```{ value: '1st Option' }``` |
 55 | | **width** | number | Determines the width of the dropdown button & options drawer |
 56 | | **placeholder** | string | The text shown on the dropdown button by default |
 57 | | **prefix** | string | A text prefix that will be added before the placeholder text |
 58 | | **disabled** | boolean | Set true if the dropdown should be disabled |
 59 | 
 60 | ## Customized Styling
 61 | 
 62 | | Property | Type  | Description |
 63 | | --- | ---  | --- |
 64 | | **backgroundColor** | string | Set the dropdown button & options area background color |
 65 | | **hoverBackgroundColor** | string | Set the dropdown button & options hover background color |
 66 | | **border** | string | Set the dropdown button & options border |
 67 | | **textColor** | string | Set the dropdown button & options text color |
 68 | | **disabledBackgroundColor** | string | Set the disabled dropdown button background color |
 69 | | **disabledTextColor** | string | Set the disabled dropdown button text color |
 70 | 
 71 | ## Events
 72 | | Event Name | Returns | Description |
 73 | | --- | ---  | --- |
 74 | | **setSelectedOption** | Option Object | Clicking a dropdown option emits an option data object upwards |
 75 | 
 76 | Listening to the event e.g:
 77 | ```html
 78 | <vue-dropdown @setSelectedOption="myLocalSetterFunction($event)"></vue-dropdown>
 79 | ```
 80 | 
 81 | ## Implementation Example
 82 | Define your **config** options object in the component importing VueDropdown e.g
 83 | ```js
 84 | data: function() {
 85 |     return {
 86 |         config: {
 87 |             options: [
 88 |                 {
 89 |                     value: "option 1"
 90 |                 },
 91 |                 {
 92 |                     value: "option 2"
 93 |                 },
 94 |                 {
 95 |                     value: "option 3"
 96 |                 },
 97 |             ],
 98 |             prefix: "The",
 99 |             backgroundColor: "green", 
100 |             disabled: false,
101 |         }
102 |     }
103 | }
104 | ```
105 | And bind it to the selector like so
106 | ```html
107 | <vue-dropdown :config="config"></vue-dropdown>
108 | 
109 | ```
110 | 
111 | ---
112 | 👨‍💻 Follow me on [Twitter](https://twitter.com/jodoron).
113 | 
114 | ### Donation
115 | If this project helped you reduce development time, you can buy me a cup of coffee :)
116 | 
117 | * Paypal - yonidn7@gmail.com
118 | 
119 | 


--------------------------------------------------------------------------------
/dropdown.scss:
--------------------------------------------------------------------------------
  1 | // * * * Variables * * *
  2 | $default-text-hover-color: black;
  3 | $default-hover-color: #cde4f5;
  4 | $default-text-color: #fff;
  5 | $option-padding: 4px 10px;
  6 | 
  7 | .dropdown {
  8 |   display: flex;
  9 |   align-items: center;
 10 |   justify-content: space-between;
 11 |   flex-direction: column;
 12 |   width: var(--dropdown-width);
 13 |   position: relative;
 14 |   border: 1px solid transparent;
 15 |   border-radius: var(--main-el-border-radius);
 16 |   cursor: pointer;
 17 |   color: var(--dropdown-default-text-color);
 18 |   background: var(--dropdown-background-color);
 19 |   user-select: none;
 20 |   transition: all 0.7s linear;
 21 |   .dropdown-label-container {
 22 |     display: flex;
 23 |     width: 100%;
 24 |     .dropdown-label {
 25 |       display: flex;
 26 |       justify-content: space-between;
 27 |       flex: 1 1 auto;
 28 |       align-items: center;
 29 |       height: var(--option-height);
 30 |       padding: $option-padding;
 31 |       .text {
 32 |         font-family: "Source Sans Pro", sans-serif;
 33 |         font-size: 24px;
 34 |       }
 35 |       .angle-down {
 36 |         display: flex;
 37 |         justify-content: center;
 38 |         align-items: center;
 39 |         border: solid $default-text-color;
 40 |         background: transparent;
 41 |         border-width: 0 2px 2px 0;
 42 |         padding: 4px;
 43 |         width: 1px;
 44 |         height: 1px;
 45 |         margin: -3px 5px 0 0;
 46 |         border-color: var(--dropdown-default-text-color);
 47 |         transform: rotate(45deg);
 48 |         transition: all 0.7s;
 49 |       }
 50 |       .toggled {
 51 |         margin-bottom: -12px;
 52 |         transform: rotate(-135deg);
 53 |         transition: all 0.7s;
 54 |       }
 55 |     }
 56 |   }
 57 | 
 58 |   .options {
 59 |     width: 100%;
 60 |     .option {
 61 |       display: flex;
 62 |       align-items: center;
 63 |       padding: $option-padding;
 64 |       height: 35px;
 65 |       font-family: "Source Sans Pro", sans-serif;
 66 |       font-size: 18px;
 67 |     }
 68 |     .option:hover {
 69 |       color: $default-text-hover-color;
 70 |       background: $default-hover-color;
 71 |       transition: all 0.7s;
 72 |     }
 73 |     .option:last-child {
 74 |       border-radius: 0 0 var(--main-el-border-radius)
 75 |       var(--main-el-border-radius);
 76 |     }
 77 |     .option:last-child:hover {
 78 |       border-radius: 0 0 var(--main-el-border-radius)
 79 |       var(--main-el-border-radius);
 80 |     }
 81 |   }
 82 | 
 83 |   &.disabled {
 84 |     cursor: not-allowed;
 85 |   }
 86 | }
 87 | .dropdown.expanded {
 88 |   background: var(--dropdown-expanded-color);
 89 |   border: var(--dropdown-border);
 90 |   transition: all 0.7s linear;
 91 | }
 92 | 
 93 | // Expand Class - Most important part
 94 | .expand {
 95 |   overflow: hidden;
 96 |   transition-property: height;
 97 |   transition-duration: 0.4s; // Durations can be changed without touching JS
 98 |   transition-timing-function: cubic-bezier(
 99 |                   0.175,
100 |                   0.885,
101 |                   0.32,
102 |                   1.275
103 |   ); // Timing functions also!
104 | 
105 |   &[aria-expanded="false"] {
106 |     height: 0 !important;
107 |     transition-timing-function: cubic-bezier(
108 |                     0.6,
109 |                     -0.28,
110 |                     0.735,
111 |                     0.045
112 |     ); // Timing function can be different for each direction
113 |   }
114 | }
115 | 
116 | // Smartphones - Landscape + Portrait
117 | @media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
118 | }
119 | 


--------------------------------------------------------------------------------
/dropdown.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<div
  3 | 		class="dropdown"
  4 | 		@click.stop="shouldToggleDropdown"
  5 | 		:class="computedClasses"
  6 | 		:style="computedStyles"
  7 | 	>
  8 | 		<div class="dropdown-label-container">
  9 | 			<div class="dropdown-label">
 10 | 				<span class="text">
 11 | 					{{ (config && config.prefix ? config.prefix : "") + " "
 12 | 					}}{{ config && config.placeholder ? config.placeholder : placeholder }}
 13 | 				</span>
 14 | 				<i class="angle-down" :class="{ toggled: isExpanded }"></i>
 15 | 			</div>
 16 | 		</div>
 17 | 
 18 | 		<div v-expand="isExpanded" class="options expand">
 19 | 			<div
 20 | 				v-for="(i, option) in configOptions"
 21 | 				:key="'option-' + i"
 22 | 				class="option"
 23 | 				@click="setCurrentSelectedOption(option);"
 24 | 			>
 25 | 				{{ option.value }}
 26 | 			</div>
 27 | 		</div>
 28 | 	</div>
 29 | </template>
 30 | <script>
 31 | 	export default {
 32 | 		name: "dropdown",
 33 | 		data() {
 34 | 			return {
 35 | 				isBottomSectionToggled: false,
 36 | 				optionsHeight: 0,
 37 | 				optionHeight: 35,
 38 | 				configOptions: [
 39 | 					{
 40 | 						value: "option 1"
 41 | 					},
 42 | 					{
 43 | 						value: "option 2"
 44 | 					},
 45 | 					{
 46 | 						value: "option 3"
 47 | 					}
 48 | 				],
 49 | 				backgroundColor: "#cde4f5",
 50 | 				backgroundExpandedColor: "#fff",
 51 | 				hoverBackgroundColor: "#0084d4",
 52 | 				disabledBackgroundColor: "#ccc",
 53 | 				disabledTextColor: "#555",
 54 | 				isExpanded: false,
 55 | 				placeholder: "Placeholder",
 56 | 				textColor: "black",
 57 | 				borderRadius: "1.5em",
 58 | 				border: "1px solid gray",
 59 | 				width: 180
 60 | 			};
 61 | 		},
 62 | 		components: {},
 63 | 		props: ["config"],
 64 | 		computed: {
 65 | 			computedStyles: function () {
 66 | 				return [
 67 | 					{"--options-height": this.optionsHeight + "px"},
 68 | 					{"--options-height-neg": "-" + this.optionsHeight + "px"},
 69 | 					{"--option-height": this.optionHeight + "px"},
 70 | 					{"--main-el-border-radius": this.borderRadius},
 71 | 					{"--dropdown-width": this.width + "px"},
 72 | 					{"--dropdown-background-color": this.config.disabled ? this.disabledBackgroundColor : this.backgroundColor},
 73 | 					{"--dropdown-expanded-color": this.backgroundExpandedColor},
 74 | 					{"--dropdown-border": this.border},
 75 | 					{"--dropdown-hover-background-color": this.hoverBackgroundColor},
 76 | 					{"--dropdown-default-text-color":  this.config.disabled ? this.disabledTextColor : this.textColor}
 77 | 				];
 78 | 			},
 79 | 			computedClasses: function() {
 80 | 				return { 
 81 | 					'expanded': this.isExpanded, 
 82 | 					'disabled': this.config.disabled 
 83 | 				}
 84 | 			}
 85 | 		},
 86 | 		directives: {
 87 | 			expand: {
 88 | 				inserted: function (el, binding) {
 89 | 					if (binding.value !== null) {
 90 | 						function calcHeight() {
 91 | 							const currentState = el.getAttribute("aria-expanded");
 92 | 							el.classList.add("u-no-transition");
 93 | 							el.removeAttribute("aria-expanded");
 94 | 							el.style.height = null;
 95 | 							el.style.height = el.clientHeight + "px";
 96 | 							el.setAttribute("aria-expanded", currentState);
 97 | 
 98 | 							setTimeout(function () {
 99 | 								el.classList.remove("u-no-transition");
100 | 							});
101 | 						}
102 | 
103 | 						el.classList.add("expand");
104 | 						el.setAttribute("aria-expanded", binding.value ? "true" : "false");
105 | 						calcHeight();
106 | 						window.addEventListener("resize", calcHeight);
107 | 					}
108 | 				},
109 | 				update: function (el, binding) {
110 | 					if (el.style.height && binding.value !== null) {
111 | 						el.setAttribute("aria-expanded", binding.value ? "true" : "false");
112 | 					}
113 | 				}
114 | 			}
115 | 		},
116 | 		methods: {
117 | 			setCurrentSelectedOption(option) {
118 | 				this.$emit("setSelectedOption", option);
119 | 			},
120 | 			setConfigData() {
121 | 				if (this.config) {
122 | 					this.configOptions = this.config.options;
123 | 					this.width = this.config.width;
124 | 					this.placeholder = this.config.placeholder;
125 | 					if (this.config.backgroundColor) {
126 | 						this.backgroundColor = this.config.backgroundColor;
127 | 					}
128 | 					if (this.config.backgroundExpandedColor) {
129 | 						this.backgroundExpandedColor = this.config.backgroundExpandedColor;
130 | 					}
131 | 					if (this.config.border) {
132 | 						this.border = this.config.border;
133 | 					}
134 | 					if (this.config.hoverBackgroundColor) {
135 | 						this.hoverBackgroundColor = this.config.hoverBackgroundColor;
136 | 					}
137 | 					if (this.config.textColor) {
138 | 						this.textColor = this.config.textColor;
139 | 					}
140 | 					if (this.config.borderRadius) {
141 | 						this.borderRadius = this.config.borderRadius;
142 | 					}
143 | 				}
144 | 			},
145 | 			setOptionsHeight() {
146 | 				this.optionsHeight = this.optionHeight * this.configOptions.length;
147 | 			},
148 | 			documentClicked() {
149 | 				if (this.isExpanded) {
150 | 					this.isExpanded = false
151 | 				}
152 | 			}, 
153 | 			shouldToggleDropdown() {
154 | 				if (!this.config.disabled) {
155 | 					this.isExpanded = !this.isExpanded;
156 | 				} 
157 | 			},
158 | 		},
159 | 		created() {
160 | 			document.addEventListener('click', this.documentClicked);
161 | 			this.setConfigData();
162 | 			this.setOptionsHeight();
163 | 		},
164 | 		beforeUdate() {
165 | 			// this.setOptionsHeight();
166 | 		},
167 | 		destroyed() {
168 | 			document.removeEventListener('click', this.documentClicked);
169 | 		}
170 | 	};
171 | </script>
172 | 
173 | <style lang="scss" scoped>
174 | 	@import "./dropdown";
175 | </style>
176 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-dynamic-dropdown",
 3 |   "version": "1.0.12",
 4 |   "description": "A Highly Customizeable vue dropdown",
 5 |   "main": "dropdown.vue",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "peerDependencies": {
10 |     "vue": "^2.5.17"
11 |   },
12 |   "repository": {
13 |     "type": "git",
14 |     "url": "git+https://github.com/JonathanDn/vue-dropdown.git"
15 |   },
16 |   "keywords": [
17 |     "vue", "vue.js", "frontend", "web", "dropdown", "dynamic", "customize"
18 |   ],
19 |   "author": "Jonathan Doron <yonidn7@gmail.com>",
20 |   "license": "MIT",
21 |   "bugs": {
22 |     "url": "https://github.com/JonathanDn/vue-dropdown/issues"
23 |   },
24 | 	"homepage": "https://github.com/JonathanDn/vue-dropdown#readme",
25 | 	"dependencies": {
26 |     "css-loader": "^3.4.2",
27 | 		"node-sass": "^4.12.0",
28 |     "sass-loader": "^7.1.0",
29 |     "style-loader": "^0.23.1"
30 | 	}
31 | }
32 | 


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