comand-component-library 4.2.10 → 4.2.12
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.js +8106 -8023
- package/dist/style.css +1 -1
- package/package.json +3 -2
- package/src/ComponentLibrary.vue +24 -5
- package/src/assets/data/switch-language.json +28 -28
- package/src/assets/lists-of-data/.htaccess +1 -1
- package/src/assets/lists-of-data/casual-01.json +1 -1
- package/src/assets/lists-of-data/founder-01.json +111 -0
- package/src/assets/lists-of-data/investor-01.json +114 -0
- package/src/components/CmdFakeSelect.vue +5 -5
- package/src/components/CmdForm.vue +1 -1
- package/src/components/CmdImageZoom.vue +33 -7
- package/src/components/CmdInputGroup.vue +3 -4
- package/src/components/CmdLink.vue +3 -2
- package/src/components/CmdListOfImages.vue +5 -5
- package/src/components/CmdListOfRequirements.vue +6 -6
- package/src/components/CmdLoginForm.vue +92 -63
- package/src/components/CmdMailTool.vue +1 -7
- package/src/components/CmdMailToolEntry.vue +51 -6
- package/src/components/CmdMailToolFilter.vue +35 -29
- package/src/components/CmdMultistepFormProgressBar.vue +68 -96
- package/src/components/CmdNewsletterSubscription.vue +1 -0
- package/src/components/CmdSiteSearch.vue +6 -1
- package/src/components/CmdSwitchLanguage.vue +0 -3
- package/src/components/CmdTabs.vue +6 -2
- package/src/components/CmdTooltip.vue +16 -2
- package/src/components/CmdUploadForm.vue +3 -1
- package/src/main.js +5 -1
- package/src/mixins/CmdMailToolEntry/DefaultMessageProperties.js +2 -1
- package/src/mixins/CmdSiteSearch/DefaultMessageProperties.js +1 -1
- package/src/mixins/FieldValidation.js +1 -1
|
@@ -1,21 +1,24 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<ol :class="['cmd-multistep-form-progress-bar', {'use-gap': useGap}]">
|
|
2
|
+
<ol :class="['cmd-multistep-form-progress-bar', {'use-gap': useGap, 'full-width': fullWidth}]">
|
|
3
3
|
<li v-for="(step, index) in multisteps" :key="index" :class="{active : activeLink === index}">
|
|
4
4
|
<!-- begin CmdLink -->
|
|
5
5
|
<CmdLink
|
|
6
|
-
:linkType="step.
|
|
6
|
+
:linkType="step.linkType"
|
|
7
|
+
:class="['stretch-on-small-devices', {active : activeLink === index}]"
|
|
8
|
+
:primaryButton="usePrimaryButtons"
|
|
7
9
|
:path="step.path"
|
|
8
10
|
:title="step.tooltip"
|
|
9
|
-
|
|
11
|
+
:styleAsButton="false"
|
|
12
|
+
@click="clickedStep($event, index)"
|
|
10
13
|
>
|
|
11
14
|
<span v-if="showStepNumber" class="number">{{ index + 1 }}</span>
|
|
12
15
|
<!-- begin CmdIcon -->
|
|
13
16
|
<CmdIcon v-if="step.iconClass" :iconClass="step.iconClass" :type="step.iconType" />
|
|
14
17
|
<!-- end CmdIcon -->
|
|
15
18
|
<span v-if="step.text">{{ step.text }}</span>
|
|
16
|
-
<span :class="separatorIconClass"></span>
|
|
17
19
|
</CmdLink>
|
|
18
20
|
<!-- end CmdLink -->
|
|
21
|
+
<span v-if="index + 1 !== multisteps.length && useGap" :class="['separator', separatorIconClass]"></span>
|
|
19
22
|
</li>
|
|
20
23
|
</ol>
|
|
21
24
|
</template>
|
|
@@ -25,13 +28,20 @@
|
|
|
25
28
|
import {getRoute} from "../utilities.js"
|
|
26
29
|
|
|
27
30
|
export default {
|
|
28
|
-
name:
|
|
31
|
+
name: "CmdMultistepFormProgressBar",
|
|
29
32
|
data() {
|
|
30
33
|
return {
|
|
31
34
|
activeLink: 0
|
|
32
35
|
}
|
|
33
36
|
},
|
|
34
37
|
props: {
|
|
38
|
+
/**
|
|
39
|
+
* toggle if steps should be stretched to full-width of parent container (else steps will be centered)
|
|
40
|
+
*/
|
|
41
|
+
fullWidth: {
|
|
42
|
+
type: Boolean,
|
|
43
|
+
default: false
|
|
44
|
+
},
|
|
35
45
|
/**
|
|
36
46
|
* toggle visibility of step-number in front/left of link-icon and -name
|
|
37
47
|
*/
|
|
@@ -39,6 +49,13 @@ export default {
|
|
|
39
49
|
type: Boolean,
|
|
40
50
|
default: false
|
|
41
51
|
},
|
|
52
|
+
/**
|
|
53
|
+
* activate if step-buttons should be primary-buttons (linkType for steps must be "button" or styleAsButton-property must be activated=)
|
|
54
|
+
*/
|
|
55
|
+
usePrimaryButtons: {
|
|
56
|
+
type: Boolean,
|
|
57
|
+
default: true
|
|
58
|
+
},
|
|
42
59
|
/**
|
|
43
60
|
* list of multisteps
|
|
44
61
|
*/
|
|
@@ -63,7 +80,7 @@ export default {
|
|
|
63
80
|
methods: {
|
|
64
81
|
clickedStep(event, index) {
|
|
65
82
|
this.activeLink = index;
|
|
66
|
-
this.$emit(
|
|
83
|
+
this.$emit("click", {event: event, index: index, stepPath: this.multisteps[index].path})
|
|
67
84
|
},
|
|
68
85
|
getRoute(step) {
|
|
69
86
|
return getRoute(step)
|
|
@@ -77,20 +94,23 @@ export default {
|
|
|
77
94
|
|
|
78
95
|
.cmd-multistep-form-progress-bar {
|
|
79
96
|
display: flex;
|
|
80
|
-
|
|
81
|
-
|
|
97
|
+
align-items: center;
|
|
98
|
+
justify-content: center;
|
|
82
99
|
margin: 0;
|
|
83
100
|
border-radius: var(--default-border-radius);
|
|
84
101
|
|
|
85
|
-
&.
|
|
86
|
-
|
|
87
|
-
gap: var(--default-gap);
|
|
102
|
+
&.full-width {
|
|
103
|
+
justify-content: stretch;
|
|
88
104
|
|
|
89
105
|
li {
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
106
|
+
flex: 1 !important;
|
|
107
|
+
}
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
&.use-gap {
|
|
111
|
+
gap: calc(var(--default-gap) / 2);
|
|
93
112
|
|
|
113
|
+
li {
|
|
94
114
|
a, a.active {
|
|
95
115
|
border: 0;
|
|
96
116
|
border-radius: inherit;
|
|
@@ -108,11 +128,15 @@ export default {
|
|
|
108
128
|
}
|
|
109
129
|
}
|
|
110
130
|
|
|
111
|
-
|
|
112
|
-
|
|
131
|
+
.separator {
|
|
132
|
+
display: flex;
|
|
133
|
+
align-items: center;
|
|
134
|
+
justify-content: center;
|
|
135
|
+
}
|
|
113
136
|
|
|
114
|
-
|
|
115
|
-
|
|
137
|
+
&.active {
|
|
138
|
+
.separator {
|
|
139
|
+
color: var(--color-scheme-text-color); /* overwrite icon-color inside active links */
|
|
116
140
|
}
|
|
117
141
|
}
|
|
118
142
|
}
|
|
@@ -123,35 +147,42 @@ export default {
|
|
|
123
147
|
flex: 1;
|
|
124
148
|
list-style-type: none;
|
|
125
149
|
margin: 0;
|
|
150
|
+
gap: calc(var(--default-gap) / 2);
|
|
126
151
|
|
|
127
152
|
&:first-child, &:first-child > a {
|
|
128
153
|
border-top-left-radius: inherit;
|
|
129
154
|
border-bottom-left-radius: inherit;
|
|
130
155
|
}
|
|
131
156
|
|
|
132
|
-
&:
|
|
133
|
-
|
|
134
|
-
|
|
157
|
+
&:has(:not(.button)) {
|
|
158
|
+
flex: none;
|
|
159
|
+
|
|
160
|
+
&:is(:hover, :active, :focus) {
|
|
161
|
+
span, span[class*="icon-"] {
|
|
162
|
+
color: var(--hyperlink-color);
|
|
163
|
+
}
|
|
164
|
+
}
|
|
135
165
|
}
|
|
136
166
|
|
|
137
|
-
a {
|
|
167
|
+
a, button {
|
|
138
168
|
display: flex;
|
|
139
169
|
text-decoration: none;
|
|
140
|
-
padding: var(--default-padding);
|
|
141
170
|
align-items: center;
|
|
142
171
|
justify-content: center;
|
|
143
172
|
width: 100%;
|
|
144
|
-
|
|
173
|
+
|
|
174
|
+
&.button {
|
|
175
|
+
flex: 1;
|
|
176
|
+
max-height: none;
|
|
177
|
+
}
|
|
145
178
|
|
|
146
179
|
:is(span, [class*="icon-"]) {
|
|
147
|
-
color: var(--color-white);
|
|
148
180
|
font-size: var(--icon-size-medium) !important;
|
|
149
181
|
|
|
150
182
|
& + [class*="icon-"] {
|
|
151
183
|
&:last-child {
|
|
152
184
|
border: var(--default-border);
|
|
153
185
|
border-radius: var(--full-circle);
|
|
154
|
-
background: var(--color-white);
|
|
155
186
|
color: var(--color-scheme-text-color);
|
|
156
187
|
margin: 0;
|
|
157
188
|
position: absolute;
|
|
@@ -170,12 +201,6 @@ export default {
|
|
|
170
201
|
}
|
|
171
202
|
|
|
172
203
|
&:hover, &:active, &:focus {
|
|
173
|
-
background: var(--primary-color);
|
|
174
|
-
|
|
175
|
-
:is(span, [class*="icon-"]) {
|
|
176
|
-
color: var(--color-white);
|
|
177
|
-
}
|
|
178
|
-
|
|
179
204
|
.number {
|
|
180
205
|
color: var(--hyperlink-color);
|
|
181
206
|
}
|
|
@@ -191,9 +216,9 @@ export default {
|
|
|
191
216
|
justify-content: center;
|
|
192
217
|
border-radius: var(--full-circle);
|
|
193
218
|
border: var(--default-border);
|
|
194
|
-
border-color: var(--color-white);
|
|
195
219
|
background: var(--color-white);
|
|
196
|
-
|
|
220
|
+
text-decoration: none !important;
|
|
221
|
+
color: var(--primary-color);
|
|
197
222
|
}
|
|
198
223
|
}
|
|
199
224
|
|
|
@@ -208,60 +233,15 @@ export default {
|
|
|
208
233
|
}
|
|
209
234
|
|
|
210
235
|
&.active {
|
|
211
|
-
a {
|
|
212
|
-
background: var(--primary-color);
|
|
213
|
-
|
|
214
|
-
span, [class*="icon-"] {
|
|
215
|
-
color: var(--color-white);
|
|
216
|
-
}
|
|
217
|
-
|
|
218
|
-
&:hover, &:active, &:focus {
|
|
219
|
-
span, [class*="icon-"] {
|
|
220
|
-
color: var(--color-white);
|
|
221
|
-
|
|
222
|
-
& + [class*="icon-"] {
|
|
223
|
-
&:last-child {
|
|
224
|
-
color: var(--color-scheme-text-color);
|
|
225
|
-
}
|
|
226
|
-
}
|
|
227
|
-
}
|
|
228
|
-
}
|
|
229
|
-
}
|
|
230
|
-
|
|
231
236
|
.number {
|
|
232
|
-
background: var(--color
|
|
237
|
+
background: var(--primary-color);
|
|
233
238
|
border-color: var(--color-white);
|
|
234
|
-
color: var(--
|
|
239
|
+
color: var(--color-white) !important;
|
|
235
240
|
}
|
|
236
241
|
|
|
237
242
|
& ~ li {
|
|
238
|
-
background: var(--default-background);
|
|
239
|
-
border-left-color: var(--border-color);
|
|
240
|
-
|
|
241
243
|
a {
|
|
242
|
-
color: var(--color-white);
|
|
243
|
-
|
|
244
|
-
span, span[class*='color'] {
|
|
245
|
-
color: inherit;
|
|
246
|
-
|
|
247
|
-
& + [class*="icon-"] {
|
|
248
|
-
&:last-child {
|
|
249
|
-
border-color: var(--border-color);
|
|
250
|
-
color: var(--color-white);
|
|
251
|
-
background: var(--secondary-color);
|
|
252
|
-
}
|
|
253
|
-
}
|
|
254
|
-
}
|
|
255
|
-
|
|
256
244
|
&:hover, &:active, &:focus {
|
|
257
|
-
background: var(--color-white);
|
|
258
|
-
|
|
259
|
-
span, [class*="icon-"] {
|
|
260
|
-
&:not(:last-child) {
|
|
261
|
-
color: var(--hyperlink-color);
|
|
262
|
-
}
|
|
263
|
-
}
|
|
264
|
-
|
|
265
245
|
.number {
|
|
266
246
|
border-color: var(--hyperlink-color);
|
|
267
247
|
}
|
|
@@ -273,10 +253,6 @@ export default {
|
|
|
273
253
|
border-color: var(--border-color);
|
|
274
254
|
}
|
|
275
255
|
}
|
|
276
|
-
|
|
277
|
-
& + li {
|
|
278
|
-
border-left-color: var(--border-color);
|
|
279
|
-
}
|
|
280
256
|
}
|
|
281
257
|
}
|
|
282
258
|
}
|
|
@@ -290,11 +266,12 @@ export default {
|
|
|
290
266
|
flex-direction: column;
|
|
291
267
|
|
|
292
268
|
li {
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
}
|
|
269
|
+
width: 100%;
|
|
270
|
+
flex-direction: column;
|
|
296
271
|
|
|
297
272
|
a {
|
|
273
|
+
width: 100% !important;
|
|
274
|
+
|
|
298
275
|
:is(span, [class*="icon-"]) {
|
|
299
276
|
& + [class*="icon-"] {
|
|
300
277
|
&:last-child {
|
|
@@ -302,19 +279,14 @@ export default {
|
|
|
302
279
|
right: auto;
|
|
303
280
|
bottom: 0;
|
|
304
281
|
transform: translateY(50%);
|
|
305
|
-
|
|
306
|
-
&::before {
|
|
307
|
-
transform: rotate(90deg);
|
|
308
|
-
}
|
|
309
282
|
}
|
|
310
283
|
}
|
|
311
284
|
}
|
|
312
285
|
}
|
|
313
286
|
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
border-bottom-color: var(--border-color);
|
|
287
|
+
.separator {
|
|
288
|
+
&::before {
|
|
289
|
+
transform: rotate(90deg);
|
|
318
290
|
}
|
|
319
291
|
}
|
|
320
292
|
}
|
|
@@ -238,7 +238,8 @@ export default {
|
|
|
238
238
|
position: "before",
|
|
239
239
|
iconClass: "icon-search"
|
|
240
240
|
},
|
|
241
|
-
text: "Search"
|
|
241
|
+
text: "Search",
|
|
242
|
+
primary: true
|
|
242
243
|
}
|
|
243
244
|
}
|
|
244
245
|
},
|
|
@@ -399,6 +400,10 @@ export default {
|
|
|
399
400
|
@media only screen and (max-width: $small-max-width) {
|
|
400
401
|
.cmd-box-site-search {
|
|
401
402
|
flex-wrap: nowrap;
|
|
403
|
+
|
|
404
|
+
> a.filter-options {
|
|
405
|
+
align-self: center;
|
|
406
|
+
}
|
|
402
407
|
}
|
|
403
408
|
}
|
|
404
409
|
/* end cmd-box-site-search ---------------------------------------------------------------------------------------- */
|
|
@@ -29,8 +29,6 @@
|
|
|
29
29
|
|
|
30
30
|
<script>
|
|
31
31
|
import {getRoute} from "../utilities.js"
|
|
32
|
-
//import * as flags from "media/images/flags"
|
|
33
|
-
import {switchLanguage} from "@/assets/data/export-example-data.js"
|
|
34
32
|
|
|
35
33
|
export default {
|
|
36
34
|
name: "CmdSwitchLanguage",
|
|
@@ -61,7 +59,6 @@ export default {
|
|
|
61
59
|
this.getInitialLanguage()
|
|
62
60
|
},
|
|
63
61
|
methods: {
|
|
64
|
-
switchLanguage,
|
|
65
62
|
getInitialLanguage() {
|
|
66
63
|
// assign initially set value for lang in html-tag to data-property
|
|
67
64
|
this.currentLanguage = document.documentElement.lang
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
<!-- being tab-list -->
|
|
4
4
|
<ul :class="{'stretch-tabs' : stretchTabs}" role="tablist">
|
|
5
5
|
<li v-for="(tab, index) in tabs" :class="{active : showTab === index}" :key="index" role="tab">
|
|
6
|
-
<a href="#" @click.prevent="setActiveTab(index)" :title="!tab.text ? tab.tooltip : undefined">
|
|
6
|
+
<a href="#" class="button" @click.prevent="setActiveTab(index)" :title="!tab.text ? tab.tooltip : undefined">
|
|
7
7
|
<!-- begin CmdIcon -->
|
|
8
8
|
<CmdIcon v-if="tab.iconClass" :iconClass="tab.iconClass" :type="tab.iconType" />
|
|
9
9
|
<!-- end CmdIcon -->
|
|
@@ -141,7 +141,11 @@ export default {
|
|
|
141
141
|
border-bottom: 0;
|
|
142
142
|
border-top-left-radius: var(--default-border-radius);
|
|
143
143
|
border-top-right-radius: var(--default-border-radius);
|
|
144
|
-
text-decoration: none;
|
|
144
|
+
text-decoration: none !important;
|
|
145
|
+
|
|
146
|
+
span, span[class*="icon-"] {
|
|
147
|
+
text-decoration: none !important;
|
|
148
|
+
}
|
|
145
149
|
|
|
146
150
|
&:hover, &:active, &:focus {
|
|
147
151
|
cursor: pointer;
|
|
@@ -36,6 +36,11 @@ export default {
|
|
|
36
36
|
pointerY: 0
|
|
37
37
|
}
|
|
38
38
|
},
|
|
39
|
+
inject: {
|
|
40
|
+
injectScrollContainer: {
|
|
41
|
+
default: ""
|
|
42
|
+
}
|
|
43
|
+
},
|
|
39
44
|
props: {
|
|
40
45
|
/**
|
|
41
46
|
* properties for CmdHeadline-component
|
|
@@ -119,8 +124,17 @@ export default {
|
|
|
119
124
|
const relatedElement = document.getElementById(this.relatedId)
|
|
120
125
|
|
|
121
126
|
if (relatedElement) {
|
|
122
|
-
|
|
123
|
-
|
|
127
|
+
const scrollContainerSelector = this.injectScrollContainer || this.scrollContainer
|
|
128
|
+
|
|
129
|
+
if (scrollContainerSelector) {
|
|
130
|
+
const scrollContainerElement = document.querySelector(scrollContainerSelector)
|
|
131
|
+
|
|
132
|
+
if(scrollContainerElement) {
|
|
133
|
+
scrollContainerElement.addEventListener("scroll", this.hideTooltip) // avoid fixed tooltip on scroll
|
|
134
|
+
} else {
|
|
135
|
+
console.warn( "'CmdTooltip-Component': Element accessed by " + scrollContainerSelector + " does not exist! Please provide selector for an existing element!")
|
|
136
|
+
}
|
|
137
|
+
|
|
124
138
|
document.addEventListener("keyup", this.hideTooltipOnEsc) // close tooltip by using "escape"-key
|
|
125
139
|
}
|
|
126
140
|
|
|
@@ -252,7 +252,8 @@
|
|
|
252
252
|
/>
|
|
253
253
|
<!-- end CmdFormElement -->
|
|
254
254
|
|
|
255
|
-
|
|
255
|
+
<!-- begin button-wrapper -->
|
|
256
|
+
<div class="button-wrapper stretch-on-small-devices">
|
|
256
257
|
<button
|
|
257
258
|
:class="[
|
|
258
259
|
'button primary',
|
|
@@ -285,6 +286,7 @@
|
|
|
285
286
|
<span>{{ getMessage("upload_form.buttontext.cancel") }}</span>
|
|
286
287
|
</button>
|
|
287
288
|
</div>
|
|
289
|
+
<!-- end button-wrapper -->
|
|
288
290
|
</fieldset>
|
|
289
291
|
<!-- end advanced mode -->
|
|
290
292
|
|
package/src/main.js
CHANGED
|
@@ -43,4 +43,8 @@ import router from "./router"
|
|
|
43
43
|
// })
|
|
44
44
|
|
|
45
45
|
// createApp(App).use(router).directive('telephone', directiveTelephone).directive('focus', directiveFocus).mount('#app')
|
|
46
|
-
createApp(ComponentLibrary)
|
|
46
|
+
createApp(ComponentLibrary)
|
|
47
|
+
.use(router).directive('telephone', directiveTelephone)
|
|
48
|
+
.directive('focus', directiveFocus)
|
|
49
|
+
.directive('fancybox', directiveFancybox)
|
|
50
|
+
.mount('#app')
|
|
@@ -5,7 +5,8 @@ export default {
|
|
|
5
5
|
"mail_tool_entry.tooltip.read_this_mail": "Read this mail",
|
|
6
6
|
"mail_tool_entry.description_label.from": "From:",
|
|
7
7
|
"mail_tool_entry.description_label.to": "To:",
|
|
8
|
-
"mail_tool_entry.description_label.subject": "Subject:"
|
|
8
|
+
"mail_tool_entry.description_label.subject": "Subject:",
|
|
9
|
+
"mail_tool_entry.description_label.received": "Received:"
|
|
9
10
|
}
|
|
10
11
|
}
|
|
11
12
|
}
|