comand-component-library 3.1.41 → 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 +3 -2
- package/src/App.vue +11 -4
- 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 +26 -15
- package/src/components/CmdLoginForm.vue +29 -7
- package/src/components/CmdProgressBar.vue +1 -1
- package/src/components/CmdSwitchButton.vue +5 -3
- package/src/components/CmdUploadForm.vue +722 -174
- package/src/mixins/CmdUploadForm/DefaultMessageProperties.js +49 -0
- package/src/mixins/I18n.js +56 -0
- package/src/utils/GetFileExtension.js +15 -0
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "comand-component-library",
|
3
|
-
"version": "3.1.
|
3
|
+
"version": "3.1.45",
|
4
4
|
"private": false,
|
5
5
|
"scripts": {
|
6
6
|
"serve": "vue-cli-service serve",
|
@@ -17,7 +17,7 @@
|
|
17
17
|
],
|
18
18
|
"dependencies": {
|
19
19
|
"clickout-event": "^1.1.2",
|
20
|
-
"comand-frontend-framework": "^3.2.
|
20
|
+
"comand-frontend-framework": "^3.2.27",
|
21
21
|
"core-js": "^3.16.1",
|
22
22
|
"vue": "^3.2.1",
|
23
23
|
"vue-router": "^4.0.11",
|
@@ -30,6 +30,7 @@
|
|
30
30
|
"@vue/cli-plugin-vuex": "^4.5.13",
|
31
31
|
"@vue/cli-service": "^4.5.13",
|
32
32
|
"@vue/compiler-sfc": "^3.1.5",
|
33
|
+
"axios": "^0.24.0",
|
33
34
|
"babel-eslint": "^10.1.0",
|
34
35
|
"eslint": "^6.7.2",
|
35
36
|
"eslint-plugin-vue": "^7.14.0",
|
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"/>
|
@@ -637,7 +637,8 @@
|
|
637
637
|
<a id="section-login-form"></a>
|
638
638
|
<CmdWidthLimitationWrapper>
|
639
639
|
<h2 class="headline-demopage">Login Form</h2>
|
640
|
-
<CmdLoginForm/>
|
640
|
+
<CmdLoginForm v-model="loginData" />
|
641
|
+
<p>LoginData: {{loginData}}</p>
|
641
642
|
</CmdWidthLimitationWrapper>
|
642
643
|
|
643
644
|
<a id="section-main-headline"></a>
|
@@ -757,7 +758,12 @@
|
|
757
758
|
<a id="section-upload-form"></a>
|
758
759
|
<CmdWidthLimitationWrapper>
|
759
760
|
<h2 class="headline-demopage">Upload-Form</h2>
|
760
|
-
<CmdUploadForm headline="Select files to upload"
|
761
|
+
<CmdUploadForm headline="Select files to upload"
|
762
|
+
:enableDragAndDrop="true"
|
763
|
+
:allowedFileExtensions="['jpg']"
|
764
|
+
:allowMultipleFileUploads="true"
|
765
|
+
:uploadOptions="{url: 'http://localhost:8888'}"
|
766
|
+
/>
|
761
767
|
</CmdWidthLimitationWrapper>
|
762
768
|
</main>
|
763
769
|
|
@@ -913,6 +919,7 @@ export default {
|
|
913
919
|
selectedCountry: "de",
|
914
920
|
selectedColor: "",
|
915
921
|
rangeValue: 50,
|
922
|
+
loginData: {},
|
916
923
|
formElementStatus: "",
|
917
924
|
switchButtonRadio: "radio1",
|
918
925
|
switchButtonCheckbox: ["checkbox1"],
|
@@ -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
|
@@ -28,12 +27,15 @@
|
|
28
27
|
@change="$emit('change', $event)"
|
29
28
|
:autocomplete="datalist ? 'off' : 'on'"
|
30
29
|
:list="datalist ? datalist.id : false"
|
31
|
-
:disabled="status === 'disabled'"
|
32
30
|
:value="value"
|
33
31
|
/>
|
34
32
|
</template>
|
35
33
|
<!-- end inputfield -->
|
36
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
|
+
|
37
39
|
<!-- begin datalist -->
|
38
40
|
<template v-if="datalist && datalist.options.length">
|
39
41
|
<datalist :id="datalist.id">
|
@@ -50,14 +52,13 @@
|
|
50
52
|
:value="inputValue"
|
51
53
|
:class="[htmlClass, status, { 'replace-input-type': replaceInputType }]"
|
52
54
|
:id="id"
|
53
|
-
:disabled="status === 'disabled'"
|
54
55
|
:aria-invalid="status === 'error'"
|
55
56
|
:aria-describedby="`status-message-${id}`"
|
56
57
|
/>
|
57
58
|
<span v-if="labelText">
|
58
|
-
|
59
|
-
|
60
|
-
|
59
|
+
<span>{{ labelText }}</span>
|
60
|
+
<sup v-if="$attrs.required">*</sup>
|
61
|
+
</span>
|
61
62
|
<slot v-else></slot>
|
62
63
|
</template>
|
63
64
|
<!-- end checkbox and radiobutton -->
|
@@ -66,7 +67,6 @@
|
|
66
67
|
<select v-if="element === 'select'"
|
67
68
|
v-bind="$attrs"
|
68
69
|
:id="id"
|
69
|
-
:disabled="status === 'disabled'"
|
70
70
|
@change="$emit('input', $event.target.value)"
|
71
71
|
>
|
72
72
|
<option v-for="(option, index) in selectOptions" :key="index" :value="option.value"
|
@@ -79,7 +79,6 @@
|
|
79
79
|
<textarea v-if="element === 'textarea'"
|
80
80
|
v-bind="$attrs"
|
81
81
|
:id="id"
|
82
|
-
:disabled="status === 'disabled'"
|
83
82
|
:value="value"
|
84
83
|
@input="onInput"
|
85
84
|
@focus="tooltip = true"
|
@@ -94,7 +93,7 @@
|
|
94
93
|
<!-- begin searchfield -->
|
95
94
|
<span v-else-if="element === 'input' && $attrs.type === 'search'" class="flex-container no-gap">
|
96
95
|
<input v-bind="$attrs" :id="id" @input="onInput" :value="value"/>
|
97
|
-
<button class="no-flex" type="button"
|
96
|
+
<button class="no-flex" type="button">
|
98
97
|
<span class="icon-search"></span>
|
99
98
|
</button>
|
100
99
|
</span>
|
@@ -102,7 +101,7 @@
|
|
102
101
|
</label>
|
103
102
|
|
104
103
|
<!-- begin button -->
|
105
|
-
<button v-else class="button" v-bind="$attrs"
|
104
|
+
<button v-else class="button" v-bind="$attrs">
|
106
105
|
<span v-if="buttonIcon.iconPosition === 'before'" :class="buttonIcon.iconClass"></span>
|
107
106
|
<span v-if="buttonIcon.iconPosition">{{ buttonText }}</span>
|
108
107
|
<template v-else>
|
@@ -304,7 +303,19 @@ export default {
|
|
304
303
|
},
|
305
304
|
onInput(e) {
|
306
305
|
this.$emit('update:value', e.target.value)
|
306
|
+
},
|
307
|
+
showPassword() {
|
308
|
+
alert(this.$el)
|
307
309
|
}
|
308
310
|
}
|
309
311
|
}
|
310
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>
|
@@ -78,7 +78,7 @@
|
|
78
78
|
v-if="buttons.login.linkType === 'button'"
|
79
79
|
:type="buttons.login.type === 'submit' ? 'submit' : 'button'"
|
80
80
|
:class="['button', { primary: buttons.login.primary }]"
|
81
|
-
@click
|
81
|
+
@click="onClick"
|
82
82
|
>
|
83
83
|
<span
|
84
84
|
v-if="buttons.login.icon.iconClass"
|
@@ -140,12 +140,11 @@
|
|
140
140
|
v-if="buttons.sendLogin.linkType === 'button'"
|
141
141
|
:type="buttons.sendLogin.type === 'submit' ? 'submit' : 'button'"
|
142
142
|
:class="['button', { primary: buttons.sendLogin.primary }]"
|
143
|
-
@click.prevent="sendLogin"
|
144
143
|
>
|
145
144
|
<span
|
146
|
-
v-if="buttons.sendLogin.icon
|
147
|
-
:class="buttons.sendLogin.icon
|
148
|
-
:title="buttons.sendLogin.icon
|
145
|
+
v-if="buttons.sendLogin.icon?.iconClass"
|
146
|
+
:class="buttons.sendLogin.icon?.iconClass"
|
147
|
+
:title="buttons.sendLogin.icon?.tooltip"
|
149
148
|
></span>
|
150
149
|
<span v-if="buttons.sendLogin.text">{{ buttons.sendLogin.text }}</span>
|
151
150
|
</button>
|
@@ -174,6 +173,18 @@ export default {
|
|
174
173
|
CmdFormElement
|
175
174
|
},
|
176
175
|
props: {
|
176
|
+
/**
|
177
|
+
* value for v-model (modelValue is default name in vue 3)
|
178
|
+
*/
|
179
|
+
modelValue: {
|
180
|
+
type: Object,
|
181
|
+
default() {
|
182
|
+
return {
|
183
|
+
username: "",
|
184
|
+
password: ""
|
185
|
+
}
|
186
|
+
}
|
187
|
+
},
|
177
188
|
/**
|
178
189
|
* legend for login-fieldset (required for accessibility)
|
179
190
|
*/
|
@@ -332,12 +343,23 @@ export default {
|
|
332
343
|
}
|
333
344
|
},
|
334
345
|
methods: {
|
335
|
-
|
336
|
-
this.$emit("
|
346
|
+
modelChange() {
|
347
|
+
this.$emit("update:modelValue", { "username": this.username, "password": this.password })
|
348
|
+
},
|
349
|
+
onClick(event) {
|
350
|
+
this.$emit("click", event)
|
337
351
|
},
|
338
352
|
getRoute(language) {
|
339
353
|
return getRoute(language)
|
340
354
|
}
|
355
|
+
},
|
356
|
+
watch: {
|
357
|
+
username() {
|
358
|
+
this.modelChange()
|
359
|
+
},
|
360
|
+
password() {
|
361
|
+
this.modelChange()
|
362
|
+
}
|
341
363
|
}
|
342
364
|
}
|
343
365
|
</script>
|
@@ -4,9 +4,11 @@
|
|
4
4
|
'colored' : colored, 'on' : colored && isChecked,
|
5
5
|
'off' : colored && !isChecked, 'disabled': $attrs.disabled
|
6
6
|
}
|
7
|
-
]"
|
8
|
-
|
9
|
-
|
7
|
+
]"
|
8
|
+
:for="id"
|
9
|
+
:title="$attrs.title"
|
10
|
+
>
|
11
|
+
<input :type="type" :id="id" :name="name" :value="inputValue" :checked="isChecked" @change="onChange" v-bind="$attrs"/>
|
10
12
|
<span class="label" v-if="onLabel && offLabel && !labelText">{{ onLabel }}</span>
|
11
13
|
<span class="label" v-if="onLabel && offLabel && !labelText">{{ offLabel }}</span>
|
12
14
|
<span class="label" v-if="!onLabel && !offLabel && labelText">{{ labelText }}</span>
|