Skip to content

Commit ff7c43e

Browse files
linspwlinspw
committed
feat: update select-component
1 parent cb2b12e commit ff7c43e

File tree

3 files changed

+287
-66
lines changed

3 files changed

+287
-66
lines changed

‎src/components/atoms/a-select/a-select.stories.mdx‎

Lines changed: 14 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -12,18 +12,20 @@ import ASelect from './a-select.vue';
1212
<Story name="Default use">
1313
{{
1414
components: { ASelect },
15-
template: `<a-select :options="[{ value: 'example1', text: 'Example' }]" placeholder="Testando"/>`,
16-
}}
17-
</Story>
18-
</Canvas>
19-
20-
### Options use:
21-
22-
<Canvas>
23-
<Story name="Options use">
24-
{{
25-
components: { ASelect },
26-
template: `<a-select :options="[{ value: 'example1', text: 'Example 1' }, { value: 'example2', text: 'Example 2' }]" placeholder="Testando"/>`,
15+
data() {
16+
return {
17+
selected: 'blah',
18+
};
19+
},
20+
template: `
21+
<div style="height: 40vh;">
22+
<a-select
23+
v-model="selected"
24+
:options="['example1', 'Example 1']"
25+
/>
26+
{{ selected }}
27+
</div>
28+
`,
2729
}}
2830
</Story>
2931
</Canvas>

‎src/components/atoms/a-select/a-select.vue‎

Lines changed: 153 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,69 +1,123 @@
11
<template>
22
<div
3+
class="a-select"
34
:class="{
4-
'a-select': true,
5-
[`a-select--behavior-${behavior}`]: behavior != 'default',
65
[`a-select--size-${size}`]: size,
6+
[`a-select--behavior-${behavior}`]: behavior != 'default',
77
}"
8+
:tabindex="tabindex"
9+
@blur="open = false"
810
>
9-
<select
10-
:class="{
11-
'a-select__field': true,
12-
}"
13-
v-bind="$attrs"
14-
v-on="$listeners"
11+
<div
12+
class="a-select__field"
13+
:class="{ 'a-select__field--open': open }"
14+
@click="open = !open"
1515
>
16-
<option
17-
v-if="placeholder"
18-
:value="placeholder"
19-
disabled
20-
hidden
21-
selected
22-
>
23-
{{ placeholder }}
24-
</option>
16+
{{ selected }}
17+
</div>
2518

26-
<option
27-
v-for="option in options"
28-
:key="option.value"
29-
:value="option.value"
19+
<AIcon
20+
v-if="icon"
21+
:icon="icon"
22+
:color="iconColor"
23+
class="a-select__icon"
24+
@click.native="open = !open"
25+
/>
26+
27+
<div
28+
v-if="options && options.length"
29+
class="a-select__list-items"
30+
:class="{ 'a-select__list-items--hide': !open }"
31+
>
32+
<div
33+
v-for="(option, index) of options"
34+
:key="index"
35+
class="a-select__item"
36+
@click="
37+
selected = option;
38+
open = false;
39+
$emit('input', option);
40+
"
3041
>
31-
{{ option.text }}
32-
</option>
33-
</select>
42+
{{ option }}
43+
</div>
44+
</div>
3445
</div>
3546
</template>
3647

3748
<script>
49+
import { AIcon } from '@/components/atoms/a-icon';
3850
import { shouldBeOneOf } from 'vue-prop-validation-helper';
3951
4052
export default {
53+
components: {
54+
AIcon,
55+
},
4156
props: {
57+
placeholder: {
58+
type: String,
59+
default: null,
60+
},
61+
icon: {
62+
type: String,
63+
default: 'fas fa-chevron-down',
64+
},
65+
iconColor: {
66+
type: String,
67+
default: 'inherit',
68+
validator: shouldBeOneOf([
69+
'inherit',
70+
'primary',
71+
'secondary',
72+
'tertiary',
73+
'interactive',
74+
'grey',
75+
'success',
76+
'danger',
77+
'warn',
78+
'info',
79+
'inverse',
80+
]),
81+
},
4282
behavior: {
4383
type: String,
4484
default: 'default',
4585
validator: shouldBeOneOf(['default', 'block']),
4686
},
47-
size: {
48-
default: 'medium',
49-
type: String,
50-
validator: shouldBeOneOf(['small', 'medium']),
51-
},
5287
options: {
53-
default() {
54-
return [];
55-
},
5688
type: Array,
89+
default: () => [],
5790
},
58-
placeholder: {
59-
default: '',
91+
value: {
6092
type: String,
93+
required: false,
94+
default: null,
95+
},
96+
tabindex: {
97+
type: Number,
98+
required: false,
99+
default: 0,
100+
},
101+
size: {
102+
type: String,
103+
default: 'medium',
61104
},
62105
},
106+
data() {
107+
return {
108+
selected: null,
109+
open: false,
110+
};
111+
},
112+
mounted() {
113+
this.selected = this.value || this.placeholder;
114+
115+
this.$emit('input', this.selected);
116+
},
63117
};
64118
</script>
65119

66-
<style lang="scss">
120+
<style scoped lang="scss">
67121
.a-select {
68122
border-radius: var(--border-radius-normal);
69123
border: var(--size-micro) solid var(--colors-scale-grey-medium);
@@ -94,26 +148,71 @@ export default {
94148
width: 100%;
95149
}
96150
}
151+
}
97152
98-
&__field {
99-
background-color: var(--colors-original-white);
100-
border-radius: var(--border-radius-normal);
101-
border: none;
102-
color: var(--colors-scale-grey-dark);
103-
flex: 1;
104-
font-family: 'Red Hat Text', sans-serif;
105-
font-weight: 500;
106-
height: 100%;
107-
left: 0;
108-
padding-left: var(--size-medium);
109-
padding-right: var(--size-medium);
110-
top: 0;
111-
transition: background-color 250ms, color 250ms;
112-
width: 100%;
113-
&::placeholder {
114-
color: var(--colors-scale-grey-medium);
115-
font-weight: 500;
116-
}
153+
.a-select__field {
154+
align-items: center;
155+
background-color: var(--colors-original-white);
156+
border-radius: var(--border-radius-normal);
157+
border: none;
158+
color: var(--colors-scale-grey-dark);
159+
cursor: pointer;
160+
display: flex;
161+
flex: 1;
162+
font-family: 'Red Hat Text', sans-serif;
163+
font-weight: 500;
164+
height: 100%;
165+
left: 0;
166+
padding-left: var(--size-medium);
167+
padding-right: var(--size-medium);
168+
position: relative;
169+
top: 0;
170+
transition: background-color 250ms, color 250ms;
171+
user-select: none;
172+
width: 100%;
173+
174+
&--open {
175+
border: var(--size-nano) solid var(--color-theme-secondary);
176+
}
177+
}
178+
179+
.a-select__icon {
180+
color: var(--colors-scale-grey-dark);
181+
position: absolute;
182+
right: var(--size-extra-small);
183+
display: flex;
184+
align-items: center;
185+
height: 100%;
186+
}
187+
188+
.a-select__list-items {
189+
background-color: var(--colors-original-white);
190+
border-radius: var(--border-radius-normal);
191+
border: var(--size-micro) solid var(--color-theme-primary);
192+
color: var(--color-theme-secondary);
193+
overflow: hidden;
194+
position: absolute;
195+
left: 0;
196+
right: 0;
197+
top: 120%;
198+
z-index: 1;
199+
}
200+
201+
.a-select__list-items--hide {
202+
display: none;
203+
}
204+
205+
.a-select__item {
206+
color: var(--color-theme-secondary);
207+
padding: var(--size-small) var(--size-medium);
208+
font-family: 'Red Hat Text', sans-serif;
209+
font-weight: 500;
210+
cursor: pointer;
211+
user-select: none;
212+
213+
&:hover {
214+
background-color: var(--colors-scale-grey-light);
117215
}
118216
}
217+
119218
</style>

0 commit comments

Comments
 (0)