comand-component-library 3.1.40 → 3.1.44
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 +849 -834
- package/src/assets/data/fake-select-colors.json +10 -10
- package/src/assets/data/fake-select-countries.json +14 -21
- package/src/assets/data/fake-select-options-with-icons.json +23 -0
- package/src/assets/data/fake-select-options.json +6 -6
- package/src/assets/data/select-options.json +14 -0
- package/src/components/CmdFakeSelect.vue +113 -56
- package/src/components/CmdFormElement.vue +2 -6
- 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
@@ -1,22 +1,22 @@
|
|
1
1
|
[
|
2
2
|
{
|
3
|
-
"
|
4
|
-
"
|
3
|
+
"value": "#ffffff",
|
4
|
+
"text": "White"
|
5
5
|
},
|
6
6
|
{
|
7
|
-
"
|
8
|
-
"
|
7
|
+
"value": "#ff0000",
|
8
|
+
"text": "Red"
|
9
9
|
},
|
10
10
|
{
|
11
|
-
"
|
12
|
-
"
|
11
|
+
"value": "#00ff00",
|
12
|
+
"text": "Green"
|
13
13
|
},
|
14
14
|
{
|
15
|
-
"
|
16
|
-
"
|
15
|
+
"value": "#0000ff",
|
16
|
+
"text": "Blue"
|
17
17
|
},
|
18
18
|
{
|
19
|
-
"
|
20
|
-
"
|
19
|
+
"value": "#000000",
|
20
|
+
"text": "Black"
|
21
21
|
}
|
22
22
|
]
|
@@ -1,37 +1,30 @@
|
|
1
1
|
[
|
2
2
|
{
|
3
|
-
"
|
4
|
-
"
|
5
|
-
"flagPath": "/media/images/flags/flag-cn.svg"
|
3
|
+
"value": "cn",
|
4
|
+
"text": "China"
|
6
5
|
},
|
7
6
|
{
|
8
|
-
"
|
9
|
-
"
|
10
|
-
"flagPath": "/media/images/flags/flag-de.svg"
|
7
|
+
"value": "de",
|
8
|
+
"text": "Germany"
|
11
9
|
},
|
12
10
|
{
|
13
|
-
"
|
14
|
-
"
|
15
|
-
"flagPath": "/media/images/flags/flag-en.svg"
|
11
|
+
"value": "en",
|
12
|
+
"text": "United Kingdom"
|
16
13
|
},
|
17
14
|
{
|
18
|
-
"
|
19
|
-
"
|
20
|
-
"flagPath": "/media/images/flags/flag-es.svg"
|
15
|
+
"value": "es",
|
16
|
+
"text": "Spain"
|
21
17
|
},
|
22
18
|
{
|
23
|
-
"
|
24
|
-
"
|
25
|
-
"flagPath": "/media/images/flags/flag-fr.svg"
|
19
|
+
"value": "fr",
|
20
|
+
"text": "France"
|
26
21
|
},
|
27
22
|
{
|
28
|
-
"
|
29
|
-
"
|
30
|
-
"flagPath": "/media/images/flags/flag-it.svg"
|
23
|
+
"value": "it",
|
24
|
+
"text": "Italy"
|
31
25
|
},
|
32
26
|
{
|
33
|
-
"
|
34
|
-
"
|
35
|
-
"flagPath": "/media/images/flags/flag-ru.svg"
|
27
|
+
"value": "ru",
|
28
|
+
"text": "Russia"
|
36
29
|
}
|
37
30
|
]
|
@@ -0,0 +1,23 @@
|
|
1
|
+
[
|
2
|
+
{
|
3
|
+
"text": "Optionname 1",
|
4
|
+
"value": "1",
|
5
|
+
"icon": {
|
6
|
+
"iconClass": "icon-home"
|
7
|
+
}
|
8
|
+
},
|
9
|
+
{
|
10
|
+
"text": "Optionname 2",
|
11
|
+
"value": "2",
|
12
|
+
"icon": {
|
13
|
+
"iconClass": "icon-globe"
|
14
|
+
}
|
15
|
+
},
|
16
|
+
{
|
17
|
+
"text": "Optionname 3",
|
18
|
+
"value": "3",
|
19
|
+
"icon": {
|
20
|
+
"iconClass": "icon-user-profile"
|
21
|
+
}
|
22
|
+
}
|
23
|
+
]
|
@@ -1,14 +1,14 @@
|
|
1
1
|
[
|
2
2
|
{
|
3
|
-
"
|
4
|
-
"
|
3
|
+
"text": "Optionname 1",
|
4
|
+
"value": "1"
|
5
5
|
},
|
6
6
|
{
|
7
|
-
"
|
8
|
-
"
|
7
|
+
"text": "Optionname 2",
|
8
|
+
"value": "2"
|
9
9
|
},
|
10
10
|
{
|
11
|
-
"
|
12
|
-
"
|
11
|
+
"text": "Optionname 3",
|
12
|
+
"value": "3"
|
13
13
|
}
|
14
14
|
]
|
@@ -4,42 +4,56 @@
|
|
4
4
|
<ul :class="{'open': showOptions}" @clickout="closeOptions">
|
5
5
|
<li>
|
6
6
|
<a href="#" @click.prevent="toggleOptions">
|
7
|
-
<img v-if="type === 'country'
|
8
|
-
<span v-else-if="type === 'color'
|
9
|
-
:style="'background: ' +
|
7
|
+
<img v-if="type === 'country'" :src="pathFlag(optionCountry)" :alt="optionCountry" class="flag" :class="optionCountry"/>
|
8
|
+
<span v-else-if="type === 'color'" class="color"
|
9
|
+
:style="'background: ' + optionColor"></span>
|
10
|
+
<span v-if="optionIcon" :class="optionIcon"></span>
|
10
11
|
<span>{{ optionName }}</span>
|
11
12
|
<span :class="dropdownIconClass"></span>
|
12
13
|
</a>
|
13
|
-
|
14
|
+
|
15
|
+
<!-- begin default dropdown (incl. optional icon) -->
|
16
|
+
<ul v-if="type === 'default' && showOptions">
|
14
17
|
<li v-for="(option, index) in selectData" :key="index">
|
15
|
-
<
|
16
|
-
<
|
17
|
-
|
18
|
-
<span>{{ option.optionName }}</span>
|
19
|
-
</label>
|
20
|
-
</li>
|
21
|
-
</ul>
|
22
|
-
<ul v-else-if="type === 'country' && showOptions">
|
23
|
-
<li v-for="(country, index) in selectData" :key="index">
|
24
|
-
<a href="#"
|
25
|
-
@click.prevent="selectOption(country.countryName, country.isoCode)">
|
26
|
-
<img class="flag" :src="pathFlag(country.isoCode)"
|
27
|
-
:alt="country.countryName"/><span>{{ country.countryName }}</span>
|
18
|
+
<a href="#" @click.prevent="selectOption(option.value)" :class="{'active' : option.value === value}">
|
19
|
+
<span v-if="option.icon?.iconClass" :class="option.icon.iconClass"></span>
|
20
|
+
<span>{{ option.text }}</span>
|
28
21
|
</a>
|
29
22
|
</li>
|
30
23
|
</ul>
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
24
|
+
<!-- end default dropdown (incl. optional icon) -->
|
25
|
+
|
26
|
+
<!-- begin dropdown with checkboxes -->
|
27
|
+
<ul v-else-if="type !== 'default' && type !== 'content' && showOptions" class="checkbox-options">
|
28
|
+
<li v-for="(option, index) in selectData" :key="index">
|
29
|
+
<label v-if="type === 'checkboxOptions'" :for="'option-' + (index + 1)" :class="{'active' : value.includes(`${option.value}`)}">
|
30
|
+
<input type="checkbox" :value="option.value" @change="optionSelect"
|
31
|
+
:checked="value.includes(`${option.value}`)" :id="'option-' + (index + 1)"/>
|
32
|
+
<span>{{ option.text }}</span>
|
33
|
+
</label>
|
34
|
+
|
35
|
+
<a v-else-if="type === 'country'" href="#"
|
36
|
+
@click.prevent="selectOption(option.value)" :class="{'active' : option.value === value}">
|
37
|
+
<img class="flag" :src="pathFlag(option.value)"
|
38
|
+
:alt="option.text"/>
|
39
|
+
<span>{{ option.text }}</span>
|
40
|
+
</a>
|
41
|
+
|
42
|
+
<a v-else href="#" @click.prevent="selectOption(option.value)" :class="{'active' : option.value === value}">
|
43
|
+
<span class="color" :style="'background: ' + option.value"></span>
|
44
|
+
<span>{{
|
45
|
+
option.text
|
36
46
|
}}</span>
|
37
47
|
</a>
|
38
48
|
</li>
|
39
49
|
</ul>
|
40
|
-
|
50
|
+
<!-- end dropdown with checkboxes -->
|
51
|
+
|
52
|
+
<!-- begin dropdown with slot -->
|
53
|
+
<template v-else-if="type === 'content' && showOptions">
|
41
54
|
<slot></slot>
|
42
55
|
</template>
|
56
|
+
<!-- end dropdown with slot -->
|
43
57
|
</li>
|
44
58
|
</ul>
|
45
59
|
</div>
|
@@ -48,6 +62,11 @@
|
|
48
62
|
<script>
|
49
63
|
export default {
|
50
64
|
name: 'CmdFakeSelect',
|
65
|
+
data() {
|
66
|
+
return {
|
67
|
+
showOptions: false
|
68
|
+
}
|
69
|
+
},
|
51
70
|
props: {
|
52
71
|
/**
|
53
72
|
* set different default selectbox-types for
|
@@ -56,7 +75,7 @@ export default {
|
|
56
75
|
*/
|
57
76
|
type: {
|
58
77
|
type: String,
|
59
|
-
|
78
|
+
default: "default"
|
60
79
|
},
|
61
80
|
/**
|
62
81
|
* set default value
|
@@ -110,6 +129,58 @@ export default {
|
|
110
129
|
default: "/media/images/flags"
|
111
130
|
}
|
112
131
|
},
|
132
|
+
computed: {
|
133
|
+
// get the displayed option name
|
134
|
+
optionName() {
|
135
|
+
// fake a normal checkbox
|
136
|
+
if (this.type !== "checkboxOptions" && this.type !== "content" && this.value) {
|
137
|
+
const result = this.selectData.find(option => option.value === this.value)?.text
|
138
|
+
|
139
|
+
// if find() returns some data, return this data
|
140
|
+
if (result) {
|
141
|
+
return result
|
142
|
+
}
|
143
|
+
}
|
144
|
+
|
145
|
+
// selectbox with checkbox-options
|
146
|
+
else if (this.type === "checkboxOptions") {
|
147
|
+
if (this.value.length === 1) {
|
148
|
+
return this.selectData.find(option => option.value === this.value[0])?.text
|
149
|
+
} else if (this.value.length > 1) {
|
150
|
+
return this.value.length + " options selected"
|
151
|
+
}
|
152
|
+
}
|
153
|
+
|
154
|
+
// if nothing is selected return the set default option name
|
155
|
+
if (this.defaultOptionName) {
|
156
|
+
return this.defaultOptionName
|
157
|
+
}
|
158
|
+
|
159
|
+
// if nothing is selected and no default option name is set, return default text (so selectbox is not empty)
|
160
|
+
return "Please select\u2026"
|
161
|
+
},
|
162
|
+
// get the displayed icon (only available for default selectbox)
|
163
|
+
optionIcon() {
|
164
|
+
if (this.type === "default") {
|
165
|
+
return this.selectData.find(option => {
|
166
|
+
return option.value === this.value
|
167
|
+
})?.icon?.iconClass
|
168
|
+
}
|
169
|
+
return null
|
170
|
+
},
|
171
|
+
optionCountry() {
|
172
|
+
if (this.type === "country") {
|
173
|
+
return this.value
|
174
|
+
}
|
175
|
+
return null
|
176
|
+
},
|
177
|
+
optionColor() {
|
178
|
+
if (this.type === "color") {
|
179
|
+
return this.value
|
180
|
+
}
|
181
|
+
return null
|
182
|
+
}
|
183
|
+
},
|
113
184
|
methods: {
|
114
185
|
toggleOptions() {
|
115
186
|
if (this.status !== 'disabled') {
|
@@ -125,11 +196,9 @@ export default {
|
|
125
196
|
}
|
126
197
|
this.$emit('update:value', value);
|
127
198
|
},
|
128
|
-
selectOption(
|
129
|
-
this.optionName = optionName
|
130
|
-
this.miscInfo = miscInfo
|
199
|
+
selectOption(optionValue) {
|
131
200
|
this.showOptions = false
|
132
|
-
this.$emit('update:value',
|
201
|
+
this.$emit('update:value', optionValue);
|
133
202
|
},
|
134
203
|
closeOptions() {
|
135
204
|
this.showOptions = false
|
@@ -137,32 +206,6 @@ export default {
|
|
137
206
|
pathFlag(isoCode) {
|
138
207
|
return this.pathFlags + "/flag-" + isoCode + ".svg"
|
139
208
|
}
|
140
|
-
},
|
141
|
-
data() {
|
142
|
-
return {
|
143
|
-
showOptions: false,
|
144
|
-
optionName: this.defaultOptionName,
|
145
|
-
miscInfo: ""
|
146
|
-
}
|
147
|
-
},
|
148
|
-
watch: {
|
149
|
-
value: {
|
150
|
-
handler() {
|
151
|
-
if (this.selectData) {
|
152
|
-
for (let i = 0; i < this.selectData.length; i++) {
|
153
|
-
let currentEntry = this.selectData[i]
|
154
|
-
if (this.type === 'country' && this.value === currentEntry.isoCode) {
|
155
|
-
this.optionName = currentEntry.countryName
|
156
|
-
this.miscInfo = currentEntry.isoCode
|
157
|
-
} else if (this.type === 'color' && this.value === currentEntry.hexCode) {
|
158
|
-
this.optionName = currentEntry.colorName
|
159
|
-
this.miscInfo = currentEntry.hexCode
|
160
|
-
}
|
161
|
-
}
|
162
|
-
}
|
163
|
-
},
|
164
|
-
immediate: true
|
165
|
-
}
|
166
209
|
}
|
167
210
|
}
|
168
211
|
</script>
|
@@ -193,7 +236,7 @@ export default {
|
|
193
236
|
height: inherit;
|
194
237
|
border: var(--default-border);
|
195
238
|
|
196
|
-
[class*='icon-'] {
|
239
|
+
> [class*='icon-']:last-child {
|
197
240
|
margin-left: auto;
|
198
241
|
font-size: 1rem;
|
199
242
|
}
|
@@ -245,6 +288,20 @@ export default {
|
|
245
288
|
margin: 0 calc(var(--default-margin) / 2) 0 0;
|
246
289
|
}
|
247
290
|
}
|
291
|
+
|
292
|
+
&.active {
|
293
|
+
background: var(--light-gray);
|
294
|
+
|
295
|
+
&:hover, &:active, &:focus {
|
296
|
+
background: var(--primary-color);
|
297
|
+
}
|
298
|
+
}
|
299
|
+
}
|
300
|
+
|
301
|
+
label {
|
302
|
+
&.active {
|
303
|
+
background: var(--light-gray);
|
304
|
+
}
|
248
305
|
}
|
249
306
|
|
250
307
|
ul {
|
@@ -268,7 +325,7 @@ export default {
|
|
268
325
|
}
|
269
326
|
}
|
270
327
|
|
271
|
-
&.
|
328
|
+
&.checkbox-options {
|
272
329
|
li {
|
273
330
|
padding: calc(var(--default-padding) / 2);
|
274
331
|
}
|
@@ -28,7 +28,6 @@
|
|
28
28
|
@change="$emit('change', $event)"
|
29
29
|
:autocomplete="datalist ? 'off' : 'on'"
|
30
30
|
:list="datalist ? datalist.id : false"
|
31
|
-
:disabled="status === 'disabled'"
|
32
31
|
:value="value"
|
33
32
|
/>
|
34
33
|
</template>
|
@@ -50,7 +49,6 @@
|
|
50
49
|
:value="inputValue"
|
51
50
|
:class="[htmlClass, status, { 'replace-input-type': replaceInputType }]"
|
52
51
|
:id="id"
|
53
|
-
:disabled="status === 'disabled'"
|
54
52
|
:aria-invalid="status === 'error'"
|
55
53
|
:aria-describedby="`status-message-${id}`"
|
56
54
|
/>
|
@@ -66,7 +64,6 @@
|
|
66
64
|
<select v-if="element === 'select'"
|
67
65
|
v-bind="$attrs"
|
68
66
|
:id="id"
|
69
|
-
:disabled="status === 'disabled'"
|
70
67
|
@change="$emit('input', $event.target.value)"
|
71
68
|
>
|
72
69
|
<option v-for="(option, index) in selectOptions" :key="index" :value="option.value"
|
@@ -79,7 +76,6 @@
|
|
79
76
|
<textarea v-if="element === 'textarea'"
|
80
77
|
v-bind="$attrs"
|
81
78
|
:id="id"
|
82
|
-
:disabled="status === 'disabled'"
|
83
79
|
:value="value"
|
84
80
|
@input="onInput"
|
85
81
|
@focus="tooltip = true"
|
@@ -94,7 +90,7 @@
|
|
94
90
|
<!-- begin searchfield -->
|
95
91
|
<span v-else-if="element === 'input' && $attrs.type === 'search'" class="flex-container no-gap">
|
96
92
|
<input v-bind="$attrs" :id="id" @input="onInput" :value="value"/>
|
97
|
-
<button class="no-flex" type="button"
|
93
|
+
<button class="no-flex" type="button">
|
98
94
|
<span class="icon-search"></span>
|
99
95
|
</button>
|
100
96
|
</span>
|
@@ -102,7 +98,7 @@
|
|
102
98
|
</label>
|
103
99
|
|
104
100
|
<!-- begin button -->
|
105
|
-
<button v-else class="button" v-bind="$attrs"
|
101
|
+
<button v-else class="button" v-bind="$attrs">
|
106
102
|
<span v-if="buttonIcon.iconPosition === 'before'" :class="buttonIcon.iconClass"></span>
|
107
103
|
<span v-if="buttonIcon.iconPosition">{{ buttonText }}</span>
|
108
104
|
<template v-else>
|
@@ -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>
|