@everchron/ec-shards 7.4.15 → 7.4.16
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/ec-shards.common.js +27 -28
- package/dist/ec-shards.common.js.map +1 -1
- package/dist/ec-shards.css +1 -1
- package/dist/ec-shards.umd.js +27 -28
- package/dist/ec-shards.umd.js.map +1 -1
- package/dist/ec-shards.umd.min.js +1 -1
- package/dist/ec-shards.umd.min.js.map +1 -1
- package/package.json +1 -1
- package/src/components/select/select.vue +18 -2
- package/src/stories/select/select.stories.js +21 -11
package/package.json
CHANGED
|
@@ -7,11 +7,10 @@
|
|
|
7
7
|
v-bind="{ id, name, disabled, required }"
|
|
8
8
|
:id="id"
|
|
9
9
|
:name="name"
|
|
10
|
-
:class="hasPlaceholder? 'placeholder' : ''"
|
|
11
10
|
v-model="currentValue">
|
|
12
|
-
<option v-if="placeholder" selected hidden disabled>{{placeholder}}</option>
|
|
13
11
|
<slot></slot>
|
|
14
12
|
</select>
|
|
13
|
+
<span v-if="placeholder && currentValue == ''" class="placeholder">{{ placeholder }}</span>
|
|
15
14
|
</div>
|
|
16
15
|
</template>
|
|
17
16
|
|
|
@@ -196,6 +195,17 @@ export default {
|
|
|
196
195
|
}
|
|
197
196
|
}
|
|
198
197
|
|
|
198
|
+
.placeholder{
|
|
199
|
+
font-size: $type-scale-3-font-size;
|
|
200
|
+
line-height: $type-scale-3-line-height;
|
|
201
|
+
color: $color-gray-9;
|
|
202
|
+
pointer-events: none;
|
|
203
|
+
position: absolute;
|
|
204
|
+
top: 50%;
|
|
205
|
+
left: $spacing-10;
|
|
206
|
+
margin-top: -($type-scale-3-line-height / 2);
|
|
207
|
+
}
|
|
208
|
+
|
|
199
209
|
&-subtle{
|
|
200
210
|
background-color: rgba($color-gray-8, .15);
|
|
201
211
|
border: 1px solid rgba($color-gray-8, .2);
|
|
@@ -258,6 +268,12 @@ export default {
|
|
|
258
268
|
line-height: $type-scale-2-line-height;
|
|
259
269
|
padding: 3px $spacing-30 3px $spacing-10;
|
|
260
270
|
}
|
|
271
|
+
|
|
272
|
+
.placeholder{
|
|
273
|
+
font-size: $type-scale-2-font-size;
|
|
274
|
+
line-height: $type-scale-2-line-height;
|
|
275
|
+
margin-top: -($type-scale-2-line-height / 2);
|
|
276
|
+
}
|
|
261
277
|
}
|
|
262
278
|
|
|
263
279
|
&-lg{
|
|
@@ -27,7 +27,7 @@ export const select = () => ({
|
|
|
27
27
|
<option value="basic">Basic</option>
|
|
28
28
|
<option value="guest">Guest</option>
|
|
29
29
|
</ecs-select>
|
|
30
|
-
<ecs-select disabled>
|
|
30
|
+
<ecs-select v-model="value" disabled>
|
|
31
31
|
<option value="admin">Admin</option>
|
|
32
32
|
<option value="basic">Basic</option>
|
|
33
33
|
<option value="guest">Guest</option>
|
|
@@ -38,17 +38,17 @@ export const select = () => ({
|
|
|
38
38
|
export const selectSizes = () => ({
|
|
39
39
|
components: { EcsSelect },
|
|
40
40
|
template: `<div>
|
|
41
|
-
<ecs-select size="sml" class="mb-4">
|
|
41
|
+
<ecs-select size="sml" value="admin" class="mb-4">
|
|
42
42
|
<option value="admin">Admin</option>
|
|
43
43
|
<option value="basic">Basic</option>
|
|
44
44
|
<option value="guest">Guest</option>
|
|
45
45
|
</ecs-select>
|
|
46
|
-
<ecs-select size="md" class="mb-4">
|
|
46
|
+
<ecs-select size="md" value="admin" class="mb-4">
|
|
47
47
|
<option value="admin">Admin</option>
|
|
48
48
|
<option value="basic">Basic</option>
|
|
49
49
|
<option value="guest">Guest</option>
|
|
50
50
|
</ecs-select>
|
|
51
|
-
<ecs-select size="lg">
|
|
51
|
+
<ecs-select size="lg" value="admin">
|
|
52
52
|
<option value="admin">Admin</option>
|
|
53
53
|
<option value="basic">Basic</option>
|
|
54
54
|
<option value="guest">Guest</option>
|
|
@@ -59,12 +59,12 @@ export const selectSizes = () => ({
|
|
|
59
59
|
export const selectSubtle = () => ({
|
|
60
60
|
components: { EcsSelect },
|
|
61
61
|
template: `<div>
|
|
62
|
-
<ecs-select type="subtle" class="mb-4">
|
|
62
|
+
<ecs-select type="subtle" value="admin" class="mb-4">
|
|
63
63
|
<option value="admin">Admin</option>
|
|
64
64
|
<option value="basic">Basic</option>
|
|
65
65
|
<option value="guest">Guest</option>
|
|
66
66
|
</ecs-select>
|
|
67
|
-
<ecs-select type="subtle" disabled>
|
|
67
|
+
<ecs-select type="subtle" value="admin" disabled>
|
|
68
68
|
<option value="admin">Admin</option>
|
|
69
69
|
<option value="basic">Basic</option>
|
|
70
70
|
<option value="guest">Guest</option>
|
|
@@ -75,12 +75,12 @@ export const selectSubtle = () => ({
|
|
|
75
75
|
export const selectInvisible = () => ({
|
|
76
76
|
components: { EcsSelect },
|
|
77
77
|
template: `<div>
|
|
78
|
-
<ecs-select type="invisible" class="mb-4">
|
|
78
|
+
<ecs-select type="invisible" value="admin" class="mb-4">
|
|
79
79
|
<option value="admin">Admin</option>
|
|
80
80
|
<option value="basic">Basic</option>
|
|
81
81
|
<option value="guest">Guest</option>
|
|
82
82
|
</ecs-select>
|
|
83
|
-
<ecs-select type="invisible" disabled>
|
|
83
|
+
<ecs-select type="invisible" value="admin" disabled>
|
|
84
84
|
<option value="admin">Admin</option>
|
|
85
85
|
<option value="basic">Basic</option>
|
|
86
86
|
<option value="guest">Guest</option>
|
|
@@ -91,12 +91,12 @@ export const selectInvisible = () => ({
|
|
|
91
91
|
export const selectNaked = () => ({
|
|
92
92
|
components: { EcsSelect },
|
|
93
93
|
template: `<div>
|
|
94
|
-
<ecs-select type="naked" class="mb-4">
|
|
94
|
+
<ecs-select type="naked" value="admin" class="mb-4">
|
|
95
95
|
<option value="admin">Admin</option>
|
|
96
96
|
<option value="basic">Basic</option>
|
|
97
97
|
<option value="guest">Guest</option>
|
|
98
98
|
</ecs-select>
|
|
99
|
-
<ecs-select type="naked" disabled>
|
|
99
|
+
<ecs-select type="naked" value="admin" disabled>
|
|
100
100
|
<option value="admin">Admin</option>
|
|
101
101
|
<option value="basic">Basic</option>
|
|
102
102
|
<option value="guest">Guest</option>
|
|
@@ -112,7 +112,17 @@ export const selectPlaceholders = () => ({
|
|
|
112
112
|
<option value="basic">Basic</option>
|
|
113
113
|
<option value="guest">Guest</option>
|
|
114
114
|
</ecs-select>
|
|
115
|
-
<ecs-select placeholder="Placeholder"
|
|
115
|
+
<ecs-select placeholder="Placeholder" class="mb-4" size="sml">
|
|
116
|
+
<option value="admin">Admin</option>
|
|
117
|
+
<option value="basic">Basic</option>
|
|
118
|
+
<option value="guest">Guest</option>
|
|
119
|
+
</ecs-select>
|
|
120
|
+
<ecs-select placeholder="Placeholder" class="mb-4" size="lg">
|
|
121
|
+
<option value="admin">Admin</option>
|
|
122
|
+
<option value="basic">Basic</option>
|
|
123
|
+
<option value="guest">Guest</option>
|
|
124
|
+
</ecs-select>
|
|
125
|
+
<ecs-select placeholder="Placeholder" type="subtle">
|
|
116
126
|
<option value="admin">Admin</option>
|
|
117
127
|
<option value="basic">Basic</option>
|
|
118
128
|
<option value="guest">Guest</option>
|