Skip to content

Commit 739afc1

Browse files
JonathanDnJonathanDn
authored
Merge pull request #13 from Awatea/disabled-option
Added "disabled" option
2 parents 45d0f82 + fe72419 commit 739afc1

File tree

3 files changed

+184
-164
lines changed

3 files changed

+184
-164
lines changed

‎README.md

+5-1
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,7 @@ Insert the following selector anywhere in your project (global) or in your exist
5555
| **width** | number | Determines the width of the dropdown button & options drawer |
5656
| **placeholder** | string | The text shown on the dropdown button by default |
5757
| **prefix** | string | A text prefix that will be added before the placeholder text |
58+
| **disabled** | boolean | Set true if the dropdown should be disabled |
5859

5960
## Customized Styling
6061

@@ -64,6 +65,8 @@ Insert the following selector anywhere in your project (global) or in your exist
6465
| **hoverBackgroundColor** | string | Set the dropdown button & options hover background color |
6566
| **border** | string | Set the dropdown button & options border |
6667
| **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 |
6770

6871
## Events
6972
| Event Name | Returns | Description |
@@ -93,7 +96,8 @@ data: function() {
9396
},
9497
],
9598
prefix: "The",
96-
backgroundColor: "green"
99+
backgroundColor: "green",
100+
disabled: false,
97101
}
98102
}
99103
}

‎dropdown.scss

+4
Original file line numberDiff line numberDiff line change
@@ -79,6 +79,10 @@ $option-padding: 4px 10px;
7979
var(--main-el-border-radius);
8080
}
8181
}
82+
83+
&.disabled {
84+
cursor: not-allowed;
85+
}
8286
}
8387
.dropdown.expanded {
8488
background: var(--dropdown-expanded-color);

‎dropdown.vue

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

0 commit comments

Comments
 (0)