comand-component-library 3.1.44 → 3.1.45
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/comand-component-library.css +1 -1
- package/dist/comand-component-library.umd.min.js +1 -1
- package/package.json +1 -1
- package/src/App.vue +2 -2
- package/src/assets/data/fake-select-countries.json +12 -12
- package/src/assets/data/fake-select-options.json +1 -1
- package/src/assets/styles/global-styles.scss +0 -1
- package/src/components/CmdFakeSelect.vue +56 -17
- package/src/components/CmdFormElement.vue +24 -9
package/package.json
CHANGED
package/src/App.vue
CHANGED
@@ -329,7 +329,7 @@
|
|
329
329
|
element="input"
|
330
330
|
type="text"
|
331
331
|
id="inputfield2"
|
332
|
-
|
332
|
+
innerIconClass="icon-user-profile"
|
333
333
|
placeholder="Type in username"
|
334
334
|
tooltipText="This is a tooltip!"
|
335
335
|
:status="formElementStatus"/>
|
@@ -337,7 +337,7 @@
|
|
337
337
|
labelText="Label for inputfield (with icon):"
|
338
338
|
type="password"
|
339
339
|
id="inputfield3"
|
340
|
-
|
340
|
+
innerIconClass="icon-security-settings"
|
341
341
|
placeholder="Type in password"
|
342
342
|
tooltipText="This is a tooltip!"
|
343
343
|
:status="formElementStatus"/>
|
@@ -3,22 +3,14 @@
|
|
3
3
|
"value": "cn",
|
4
4
|
"text": "China"
|
5
5
|
},
|
6
|
-
{
|
7
|
-
"value": "de",
|
8
|
-
"text": "Germany"
|
9
|
-
},
|
10
|
-
{
|
11
|
-
"value": "en",
|
12
|
-
"text": "United Kingdom"
|
13
|
-
},
|
14
|
-
{
|
15
|
-
"value": "es",
|
16
|
-
"text": "Spain"
|
17
|
-
},
|
18
6
|
{
|
19
7
|
"value": "fr",
|
20
8
|
"text": "France"
|
21
9
|
},
|
10
|
+
{
|
11
|
+
"value": "de",
|
12
|
+
"text": "Germany"
|
13
|
+
},
|
22
14
|
{
|
23
15
|
"value": "it",
|
24
16
|
"text": "Italy"
|
@@ -26,5 +18,13 @@
|
|
26
18
|
{
|
27
19
|
"value": "ru",
|
28
20
|
"text": "Russia"
|
21
|
+
},
|
22
|
+
{
|
23
|
+
"value": "es",
|
24
|
+
"text": "Spain"
|
25
|
+
},
|
26
|
+
{
|
27
|
+
"value": "en",
|
28
|
+
"text": "United Kingdom"
|
29
29
|
}
|
30
30
|
]
|
@@ -52,7 +52,6 @@ label, .label {
|
|
52
52
|
/* begin flags --------------------------------------------------------------------------------------------------------------------------------------------------- */
|
53
53
|
.flag {
|
54
54
|
width: 3rem;
|
55
|
-
height: 2rem;
|
56
55
|
background-size: 100% 100%;
|
57
56
|
display: block;
|
58
57
|
}
|
@@ -1,16 +1,17 @@
|
|
1
1
|
<template>
|
2
|
-
<div :class="[status, 'cmd-fake-select label']">
|
2
|
+
<div :class="[status, 'cmd-fake-select label', {color: type === 'color'}]">
|
3
3
|
<span>{{ labelText }}</span>
|
4
4
|
<ul :class="{'open': showOptions}" @clickout="closeOptions">
|
5
5
|
<li>
|
6
|
+
<!-- begin default/selected-option -->
|
6
7
|
<a href="#" @click.prevent="toggleOptions">
|
7
|
-
<img v-if="type === 'country'" :src="pathFlag(optionCountry)" :alt="optionCountry" class="flag
|
8
|
-
<span v-else-if="type === 'color'"
|
9
|
-
:style="'background: ' + optionColor"></span>
|
8
|
+
<img v-if="type === 'country' && optionCountry" :src="pathFlag(optionCountry)" :alt="optionCountry" :class="['flag', optionCountry]"/>
|
9
|
+
<span v-else-if="type === 'color'" :style="'background: ' + optionColor"></span>
|
10
10
|
<span v-if="optionIcon" :class="optionIcon"></span>
|
11
11
|
<span>{{ optionName }}</span>
|
12
|
-
<span :class="dropdownIconClass"></span>
|
12
|
+
<span :class="dropdownIconClass" title="Toggle dropdown visibility"></span>
|
13
13
|
</a>
|
14
|
+
<!-- end default/selected-option-->
|
14
15
|
|
15
16
|
<!-- begin default dropdown (incl. optional icon) -->
|
16
17
|
<ul v-if="type === 'default' && showOptions">
|
@@ -24,7 +25,7 @@
|
|
24
25
|
<!-- end default dropdown (incl. optional icon) -->
|
25
26
|
|
26
27
|
<!-- begin dropdown with checkboxes -->
|
27
|
-
<ul v-else-if="type !== 'default' && type !== 'content' && showOptions" class="checkbox-options">
|
28
|
+
<ul v-else-if="type !== 'default' && type !== 'content' && showOptions" :class="{'checkbox-options': type === 'checkboxOptions'}">
|
28
29
|
<li v-for="(option, index) in selectData" :key="index">
|
29
30
|
<label v-if="type === 'checkboxOptions'" :for="'option-' + (index + 1)" :class="{'active' : value.includes(`${option.value}`)}">
|
30
31
|
<input type="checkbox" :value="option.value" @change="optionSelect"
|
@@ -42,8 +43,8 @@
|
|
42
43
|
<a v-else href="#" @click.prevent="selectOption(option.value)" :class="{'active' : option.value === value}">
|
43
44
|
<span class="color" :style="'background: ' + option.value"></span>
|
44
45
|
<span>{{
|
45
|
-
|
46
|
-
|
46
|
+
option.text
|
47
|
+
}}</span>
|
47
48
|
</a>
|
48
49
|
</li>
|
49
50
|
</ul>
|
@@ -170,7 +171,7 @@ export default {
|
|
170
171
|
},
|
171
172
|
optionCountry() {
|
172
173
|
if (this.type === "country") {
|
173
|
-
|
174
|
+
return this.value
|
174
175
|
}
|
175
176
|
return null
|
176
177
|
},
|
@@ -179,6 +180,10 @@ export default {
|
|
179
180
|
return this.value
|
180
181
|
}
|
181
182
|
return null
|
183
|
+
},
|
184
|
+
overflowWidth() {
|
185
|
+
let outerWidth = document.querySelector(".cmd-fake-select").outerWidth()
|
186
|
+
return "width: " + outerWidth + "px;"
|
182
187
|
}
|
183
188
|
},
|
184
189
|
methods: {
|
@@ -236,7 +241,13 @@ export default {
|
|
236
241
|
height: inherit;
|
237
242
|
border: var(--default-border);
|
238
243
|
|
239
|
-
> [class*=
|
244
|
+
> span:not([class*="icon"]) {
|
245
|
+
text-overflow: ellipsis;
|
246
|
+
overflow: hidden;
|
247
|
+
width: 95%;
|
248
|
+
}
|
249
|
+
|
250
|
+
> [class*="icon-"]:last-child {
|
240
251
|
margin-left: auto;
|
241
252
|
font-size: 1rem;
|
242
253
|
}
|
@@ -245,6 +256,8 @@ export default {
|
|
245
256
|
}
|
246
257
|
|
247
258
|
&.open {
|
259
|
+
border-bottom: 0;
|
260
|
+
|
248
261
|
> li {
|
249
262
|
&:first-child {
|
250
263
|
> a {
|
@@ -299,23 +312,23 @@ export default {
|
|
299
312
|
}
|
300
313
|
|
301
314
|
label {
|
302
|
-
|
303
|
-
|
304
|
-
|
315
|
+
display: flex;
|
316
|
+
}
|
317
|
+
|
318
|
+
span {
|
319
|
+
white-space: nowrap;
|
305
320
|
}
|
306
321
|
|
307
322
|
ul {
|
308
323
|
position: absolute;
|
309
324
|
list-style: none;
|
310
325
|
z-index: 10;
|
311
|
-
width: 100%;
|
312
|
-
margin
|
313
|
-
border-top: 0;
|
326
|
+
min-width: 100%;
|
327
|
+
margin: 0;
|
314
328
|
border-bottom-right-radius: var(--border-radius);
|
315
329
|
border-bottom-left-radius: var(--border-radius);
|
316
330
|
background: var(--pure-white);
|
317
331
|
border: var(--primary-border);
|
318
|
-
border-top: 0;
|
319
332
|
|
320
333
|
li {
|
321
334
|
&:last-child {
|
@@ -325,6 +338,14 @@ export default {
|
|
325
338
|
}
|
326
339
|
}
|
327
340
|
|
341
|
+
&.custom-fake-select-content {
|
342
|
+
padding: var(--default-padding);
|
343
|
+
|
344
|
+
img {
|
345
|
+
display: block;
|
346
|
+
}
|
347
|
+
}
|
348
|
+
|
328
349
|
&.checkbox-options {
|
329
350
|
li {
|
330
351
|
padding: calc(var(--default-padding) / 2);
|
@@ -390,6 +411,24 @@ export default {
|
|
390
411
|
}
|
391
412
|
}
|
392
413
|
}
|
414
|
+
|
415
|
+
&.color {
|
416
|
+
li {
|
417
|
+
a {
|
418
|
+
gap: calc(var(--default-gap) / 2);
|
419
|
+
|
420
|
+
> span:first-child {
|
421
|
+
width: 1.5rem;
|
422
|
+
aspect-ratio: 1;
|
423
|
+
border: var(--default-border);
|
424
|
+
|
425
|
+
&[style=""] {
|
426
|
+
display: none;
|
427
|
+
}
|
428
|
+
}
|
429
|
+
}
|
430
|
+
}
|
431
|
+
}
|
393
432
|
}
|
394
433
|
|
395
434
|
/* end cmd-fake-select ------------------------------------------------------------------------------------------ */
|
@@ -3,18 +3,17 @@
|
|
3
3
|
:for="id"
|
4
4
|
:class="['cmd-form-element', status, {'inline' : displayLabelInline, 'checked': isChecked}]"
|
5
5
|
ref="label">
|
6
|
-
<!-- begin label (+ required) -->
|
6
|
+
<!-- begin label (+ required asterisk) -->
|
7
7
|
<span v-if="labelText && $attrs.type !== 'checkbox' && $attrs.type !== 'radio'"
|
8
8
|
:class="{'hidden': hideLabel}">
|
9
9
|
<span>{{ labelText }}</span>
|
10
10
|
<sup v-if="$attrs.required">*</sup>
|
11
11
|
</span>
|
12
|
-
<!-- end label (+ required) -->
|
12
|
+
<!-- end label (+ required asterisk) -->
|
13
13
|
|
14
|
-
<!-- begin icon -->
|
15
|
-
<span v-if="$attrs.type !== 'checkbox' && $attrs.type !== 'radio' && innerIconClass" class="place-inside"
|
16
|
-
|
17
|
-
<!-- end icon -->
|
14
|
+
<!-- begin inner-icon -->
|
15
|
+
<span v-if="$attrs.type !== 'checkbox' && $attrs.type !== 'radio' && innerIconClass" :class="['place-inside', status, innerIconClass]"></span>
|
16
|
+
<!-- end inner-icon -->
|
18
17
|
|
19
18
|
<!-- begin inputfield -->
|
20
19
|
<template
|
@@ -33,6 +32,10 @@
|
|
33
32
|
</template>
|
34
33
|
<!-- end inputfield -->
|
35
34
|
|
35
|
+
<!-- begin show-password-icon -->
|
36
|
+
<a v-if="$attrs.type === 'password'" href="#" @click.prevent="showPassword" class="place-inside icon-visible" title="Toggle password visibility"></a>
|
37
|
+
<!-- end show-password-icon -->
|
38
|
+
|
36
39
|
<!-- begin datalist -->
|
37
40
|
<template v-if="datalist && datalist.options.length">
|
38
41
|
<datalist :id="datalist.id">
|
@@ -53,9 +56,9 @@
|
|
53
56
|
:aria-describedby="`status-message-${id}`"
|
54
57
|
/>
|
55
58
|
<span v-if="labelText">
|
56
|
-
|
57
|
-
|
58
|
-
|
59
|
+
<span>{{ labelText }}</span>
|
60
|
+
<sup v-if="$attrs.required">*</sup>
|
61
|
+
</span>
|
59
62
|
<slot v-else></slot>
|
60
63
|
</template>
|
61
64
|
<!-- end checkbox and radiobutton -->
|
@@ -300,7 +303,19 @@ export default {
|
|
300
303
|
},
|
301
304
|
onInput(e) {
|
302
305
|
this.$emit('update:value', e.target.value)
|
306
|
+
},
|
307
|
+
showPassword() {
|
308
|
+
alert(this.$el)
|
303
309
|
}
|
304
310
|
}
|
305
311
|
}
|
306
312
|
</script>
|
313
|
+
|
314
|
+
<style lang="scss">
|
315
|
+
.cmd-form-element {
|
316
|
+
input + .place-inside[class*="icon"] {
|
317
|
+
left: auto;
|
318
|
+
right: .5rem
|
319
|
+
}
|
320
|
+
}
|
321
|
+
</style>
|