comand-component-library 4.0.9 → 4.0.10
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 +3479 -3009
- package/dist/comand-component-library.umd.cjs +3 -3
- package/dist/style.css +1 -1
- package/package.json +2 -2
- package/src/ComponentLibrary.vue +30 -5
- package/src/assets/data/box-user.json +4 -4
- package/src/assets/data/pages/boxes-faqs.json +45 -0
- package/src/assets/data/pages/boxes-team-overview.json +302 -0
- package/src/assets/data/pages/list-of-downloads.json +2 -2
- package/src/assets/data/pages/list-of-site-links.json +2 -2
- package/src/componentSettingsDataAndControls.vue +0 -10
- package/src/components/CmdBox.vue +11 -4
- package/src/components/CmdCopyrightInformation.vue +2 -2
- package/src/components/CmdSiteHeader.vue +8 -1
- package/src/index.js +6 -0
- package/src/mixins/pages/BasicForm/DefaultMessageProperties.js +2 -0
- package/src/pages/BasicForm.vue +142 -111
- package/src/pages/ContactInformation.vue +59 -0
- package/src/pages/MultipleBoxWrapper.vue +48 -0
- package/src/pages/{SegmentedListsOfLinks.vue → MultipleListsOfLinks.vue} +3 -3
- package/src/pages/PageOverview.vue +41 -14
|
@@ -0,0 +1,302 @@
|
|
|
1
|
+
[
|
|
2
|
+
{
|
|
3
|
+
"boxesPerRow": 4,
|
|
4
|
+
"useRowViewAsDefault": true,
|
|
5
|
+
"useGap": true,
|
|
6
|
+
"cmdHeadline": {
|
|
7
|
+
"headlineText": "Team 1",
|
|
8
|
+
"headlineLevel": 3
|
|
9
|
+
},
|
|
10
|
+
"boxes": [
|
|
11
|
+
{
|
|
12
|
+
"boxType": "user",
|
|
13
|
+
"user": {
|
|
14
|
+
"name": "User name 1",
|
|
15
|
+
"age": 35,
|
|
16
|
+
"gender": "m",
|
|
17
|
+
"imageSrc": "/media/images/user-images/fake-user-1.jpg",
|
|
18
|
+
"profession": "User profession",
|
|
19
|
+
"position": "User position",
|
|
20
|
+
"description": "User profile with image",
|
|
21
|
+
"tag": [
|
|
22
|
+
"Tagname",
|
|
23
|
+
"Long tag",
|
|
24
|
+
"One more tag"
|
|
25
|
+
],
|
|
26
|
+
"links": [
|
|
27
|
+
{
|
|
28
|
+
"path": "mailto:",
|
|
29
|
+
"iconClass": "icon-mail",
|
|
30
|
+
"tooltip": "Send mail"
|
|
31
|
+
}
|
|
32
|
+
]
|
|
33
|
+
}
|
|
34
|
+
},
|
|
35
|
+
{
|
|
36
|
+
"boxType": "user",
|
|
37
|
+
"user": {
|
|
38
|
+
"name": "User name 2",
|
|
39
|
+
"age": 35,
|
|
40
|
+
"gender": "m",
|
|
41
|
+
"imageSrc": "/media/images/user-images/fake-user-2.jpg",
|
|
42
|
+
"profession": "User profession",
|
|
43
|
+
"position": "User position",
|
|
44
|
+
"description": "User description",
|
|
45
|
+
"links": [
|
|
46
|
+
{
|
|
47
|
+
"path": "mailto:",
|
|
48
|
+
"iconClass": "icon-mail",
|
|
49
|
+
"tooltip": "Send mail"
|
|
50
|
+
},
|
|
51
|
+
{
|
|
52
|
+
"path": "https://www.comand-cms.com",
|
|
53
|
+
"target": "comand",
|
|
54
|
+
"iconClass": "icon-globe",
|
|
55
|
+
"tooltip": "Visit website"
|
|
56
|
+
}
|
|
57
|
+
]
|
|
58
|
+
}
|
|
59
|
+
},
|
|
60
|
+
{
|
|
61
|
+
"boxType": "user",
|
|
62
|
+
"user": {
|
|
63
|
+
"name": "User name 3",
|
|
64
|
+
"age": 35,
|
|
65
|
+
"gender": "m",
|
|
66
|
+
"imageSrc": "/media/images/user-images/fake-user-3.jpg",
|
|
67
|
+
"profession": "User profession",
|
|
68
|
+
"position": "User position",
|
|
69
|
+
"description": "User with a long text as description that wraps over multiple lines",
|
|
70
|
+
"links": [
|
|
71
|
+
{
|
|
72
|
+
"path": "mailto:",
|
|
73
|
+
"iconClass": "icon-mail",
|
|
74
|
+
"tooltip": "Send mail"
|
|
75
|
+
},
|
|
76
|
+
{
|
|
77
|
+
"path": "https://www.comand-cms.com",
|
|
78
|
+
"target": "comand",
|
|
79
|
+
"iconClass": "icon-globe",
|
|
80
|
+
"tooltip": "Visit website"
|
|
81
|
+
},
|
|
82
|
+
{
|
|
83
|
+
"path": "tel:",
|
|
84
|
+
"iconClass": "icon-phone",
|
|
85
|
+
"tooltip": "Make call"
|
|
86
|
+
}
|
|
87
|
+
]
|
|
88
|
+
}
|
|
89
|
+
},
|
|
90
|
+
{
|
|
91
|
+
"boxType": "user",
|
|
92
|
+
"user": {
|
|
93
|
+
"name": "User name 4",
|
|
94
|
+
"age": 35,
|
|
95
|
+
"gender": "m",
|
|
96
|
+
"imageSrc": "/media/images/user-images/fake-user-4.jpg",
|
|
97
|
+
"profession": "User profession",
|
|
98
|
+
"position": "User position",
|
|
99
|
+
"description": "User description",
|
|
100
|
+
"links": [
|
|
101
|
+
{
|
|
102
|
+
"path": "mailto:",
|
|
103
|
+
"iconClass": "icon-mail",
|
|
104
|
+
"tooltip": "Send mail"
|
|
105
|
+
},
|
|
106
|
+
{
|
|
107
|
+
"path": "https://www.comand-cms.com",
|
|
108
|
+
"target": "comand",
|
|
109
|
+
"iconClass": "icon-globe",
|
|
110
|
+
"tooltip": "Visit website"
|
|
111
|
+
},
|
|
112
|
+
{
|
|
113
|
+
"path": "tel:",
|
|
114
|
+
"iconClass": "icon-phone",
|
|
115
|
+
"tooltip": "Make call"
|
|
116
|
+
}
|
|
117
|
+
]
|
|
118
|
+
}
|
|
119
|
+
},
|
|
120
|
+
{
|
|
121
|
+
"boxType": "user",
|
|
122
|
+
"user": {
|
|
123
|
+
"name": "User name 5",
|
|
124
|
+
"age": 35,
|
|
125
|
+
"gender": "m",
|
|
126
|
+
"imageSrc": "/media/images/user-images/fake-user-5.jpg",
|
|
127
|
+
"profession": "User profession",
|
|
128
|
+
"position": "User position",
|
|
129
|
+
"description": "User description",
|
|
130
|
+
"links": [
|
|
131
|
+
{
|
|
132
|
+
"path": "mailto:",
|
|
133
|
+
"iconClass": "icon-mail",
|
|
134
|
+
"tooltip": "Send mail"
|
|
135
|
+
},
|
|
136
|
+
{
|
|
137
|
+
"path": "https://www.comand-cms.com",
|
|
138
|
+
"target": "comand",
|
|
139
|
+
"iconClass": "icon-globe",
|
|
140
|
+
"tooltip": "Visit website"
|
|
141
|
+
},
|
|
142
|
+
{
|
|
143
|
+
"path": "tel:",
|
|
144
|
+
"iconClass": "icon-phone",
|
|
145
|
+
"tooltip": "Make call"
|
|
146
|
+
}
|
|
147
|
+
]
|
|
148
|
+
}
|
|
149
|
+
}
|
|
150
|
+
]
|
|
151
|
+
},
|
|
152
|
+
{
|
|
153
|
+
"boxesPerRow": 4,
|
|
154
|
+
"useRowViewAsDefault": true,
|
|
155
|
+
"useGap": true,
|
|
156
|
+
"cmdHeadline": {
|
|
157
|
+
"headlineText": "Team 1",
|
|
158
|
+
"headlineLevel": 3
|
|
159
|
+
},
|
|
160
|
+
"boxes": [
|
|
161
|
+
{
|
|
162
|
+
"boxType": "user",
|
|
163
|
+
"user": {
|
|
164
|
+
"name": "User name 1",
|
|
165
|
+
"age": 35,
|
|
166
|
+
"gender": "m",
|
|
167
|
+
"imageSrc": "/media/images/user-images/fake-user-1.jpg",
|
|
168
|
+
"profession": "User profession",
|
|
169
|
+
"position": "User position",
|
|
170
|
+
"description": "User profile with image",
|
|
171
|
+
"tag": [
|
|
172
|
+
"Tagname",
|
|
173
|
+
"Long tag",
|
|
174
|
+
"One more tag"
|
|
175
|
+
],
|
|
176
|
+
"links": [
|
|
177
|
+
{
|
|
178
|
+
"path": "mailto:",
|
|
179
|
+
"iconClass": "icon-mail",
|
|
180
|
+
"tooltip": "Send mail"
|
|
181
|
+
}
|
|
182
|
+
]
|
|
183
|
+
}
|
|
184
|
+
},
|
|
185
|
+
{
|
|
186
|
+
"boxType": "user",
|
|
187
|
+
"user": {
|
|
188
|
+
"name": "User name 2",
|
|
189
|
+
"age": 35,
|
|
190
|
+
"gender": "m",
|
|
191
|
+
"imageSrc": "/media/images/user-images/fake-user-2.jpg",
|
|
192
|
+
"profession": "User profession",
|
|
193
|
+
"position": "User position",
|
|
194
|
+
"description": "User description",
|
|
195
|
+
"links": [
|
|
196
|
+
{
|
|
197
|
+
"path": "mailto:",
|
|
198
|
+
"iconClass": "icon-mail",
|
|
199
|
+
"tooltip": "Send mail"
|
|
200
|
+
},
|
|
201
|
+
{
|
|
202
|
+
"path": "https://www.comand-cms.com",
|
|
203
|
+
"target": "comand",
|
|
204
|
+
"iconClass": "icon-globe",
|
|
205
|
+
"tooltip": "Visit website"
|
|
206
|
+
}
|
|
207
|
+
]
|
|
208
|
+
}
|
|
209
|
+
},
|
|
210
|
+
{
|
|
211
|
+
"boxType": "user",
|
|
212
|
+
"user": {
|
|
213
|
+
"name": "User name 3",
|
|
214
|
+
"age": 35,
|
|
215
|
+
"gender": "m",
|
|
216
|
+
"imageSrc": "/media/images/user-images/fake-user-3.jpg",
|
|
217
|
+
"profession": "User profession",
|
|
218
|
+
"position": "User position",
|
|
219
|
+
"description": "User with a long text as description that wraps over multiple lines",
|
|
220
|
+
"links": [
|
|
221
|
+
{
|
|
222
|
+
"path": "mailto:",
|
|
223
|
+
"iconClass": "icon-mail",
|
|
224
|
+
"tooltip": "Send mail"
|
|
225
|
+
},
|
|
226
|
+
{
|
|
227
|
+
"path": "https://www.comand-cms.com",
|
|
228
|
+
"target": "comand",
|
|
229
|
+
"iconClass": "icon-globe",
|
|
230
|
+
"tooltip": "Visit website"
|
|
231
|
+
},
|
|
232
|
+
{
|
|
233
|
+
"path": "tel:",
|
|
234
|
+
"iconClass": "icon-phone",
|
|
235
|
+
"tooltip": "Make call"
|
|
236
|
+
}
|
|
237
|
+
]
|
|
238
|
+
}
|
|
239
|
+
},
|
|
240
|
+
{
|
|
241
|
+
"boxType": "user",
|
|
242
|
+
"user": {
|
|
243
|
+
"name": "User name 4",
|
|
244
|
+
"age": 35,
|
|
245
|
+
"gender": "m",
|
|
246
|
+
"imageSrc": "/media/images/user-images/fake-user-4.jpg",
|
|
247
|
+
"profession": "User profession",
|
|
248
|
+
"position": "User position",
|
|
249
|
+
"description": "User description",
|
|
250
|
+
"links": [
|
|
251
|
+
{
|
|
252
|
+
"path": "mailto:",
|
|
253
|
+
"iconClass": "icon-mail",
|
|
254
|
+
"tooltip": "Send mail"
|
|
255
|
+
},
|
|
256
|
+
{
|
|
257
|
+
"path": "https://www.comand-cms.com",
|
|
258
|
+
"target": "comand",
|
|
259
|
+
"iconClass": "icon-globe",
|
|
260
|
+
"tooltip": "Visit website"
|
|
261
|
+
},
|
|
262
|
+
{
|
|
263
|
+
"path": "tel:",
|
|
264
|
+
"iconClass": "icon-phone",
|
|
265
|
+
"tooltip": "Make call"
|
|
266
|
+
}
|
|
267
|
+
]
|
|
268
|
+
}
|
|
269
|
+
},
|
|
270
|
+
{
|
|
271
|
+
"boxType": "user",
|
|
272
|
+
"user": {
|
|
273
|
+
"name": "User name 5",
|
|
274
|
+
"age": 35,
|
|
275
|
+
"gender": "m",
|
|
276
|
+
"imageSrc": "/media/images/user-images/fake-user-5.jpg",
|
|
277
|
+
"profession": "User profession",
|
|
278
|
+
"position": "User position",
|
|
279
|
+
"description": "User description",
|
|
280
|
+
"links": [
|
|
281
|
+
{
|
|
282
|
+
"path": "mailto:",
|
|
283
|
+
"iconClass": "icon-mail",
|
|
284
|
+
"tooltip": "Send mail"
|
|
285
|
+
},
|
|
286
|
+
{
|
|
287
|
+
"path": "https://www.comand-cms.com",
|
|
288
|
+
"target": "comand",
|
|
289
|
+
"iconClass": "icon-globe",
|
|
290
|
+
"tooltip": "Visit website"
|
|
291
|
+
},
|
|
292
|
+
{
|
|
293
|
+
"path": "tel:",
|
|
294
|
+
"iconClass": "icon-phone",
|
|
295
|
+
"tooltip": "Make call"
|
|
296
|
+
}
|
|
297
|
+
]
|
|
298
|
+
}
|
|
299
|
+
}
|
|
300
|
+
]
|
|
301
|
+
}
|
|
302
|
+
]
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
{
|
|
3
3
|
"headline": {
|
|
4
4
|
"headlineLevel": 4,
|
|
5
|
-
"headlineText": "
|
|
5
|
+
"headlineText": "List #1 (vertical list)"
|
|
6
6
|
},
|
|
7
7
|
"orientation": "vertical",
|
|
8
8
|
"links": [
|
|
@@ -29,7 +29,7 @@
|
|
|
29
29
|
{
|
|
30
30
|
"headline": {
|
|
31
31
|
"headlineLevel": 4,
|
|
32
|
-
"headlineText": "
|
|
32
|
+
"headlineText": "List #2 (horizontal list)"
|
|
33
33
|
},
|
|
34
34
|
"orientation": "horizontal",
|
|
35
35
|
"links": [
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
{
|
|
3
3
|
"headline": {
|
|
4
4
|
"headlineLevel": 4,
|
|
5
|
-
"headlineText": "
|
|
5
|
+
"headlineText": "List #1 (vertical list)"
|
|
6
6
|
},
|
|
7
7
|
"orientation": "vertical",
|
|
8
8
|
"links": [
|
|
@@ -42,7 +42,7 @@
|
|
|
42
42
|
{
|
|
43
43
|
"headline": {
|
|
44
44
|
"headlineLevel": 4,
|
|
45
|
-
"headlineText": "
|
|
45
|
+
"headlineText": "List #2 (horizontal list)"
|
|
46
46
|
},
|
|
47
47
|
"orientation": "horizontal",
|
|
48
48
|
"links": [
|
|
@@ -367,16 +367,6 @@ data() {
|
|
|
367
367
|
text: "Horizontal",
|
|
368
368
|
value: "horizontal"
|
|
369
369
|
}
|
|
370
|
-
],
|
|
371
|
-
showListStyleItems: [
|
|
372
|
-
{
|
|
373
|
-
text: "False (default)",
|
|
374
|
-
value: false
|
|
375
|
-
},
|
|
376
|
-
{
|
|
377
|
-
text: "True",
|
|
378
|
-
value: true
|
|
379
|
-
}
|
|
380
370
|
]
|
|
381
371
|
},
|
|
382
372
|
cmdLoginFormSettingsData: {
|
|
@@ -61,7 +61,7 @@
|
|
|
61
61
|
<div v-if="useSlots?.includes('body')"
|
|
62
62
|
:class="{'default-padding': useDefaultPadding, 'allow-scroll': allowContentToScroll}"
|
|
63
63
|
ref="boxBody"
|
|
64
|
-
:style="'max-height: ' + calculatedBodyHeight"
|
|
64
|
+
:style="allowContentToScroll ? 'max-height: ' + calculatedBodyHeight : null"
|
|
65
65
|
>
|
|
66
66
|
<!-- begin slot 'body' -->
|
|
67
67
|
<slot name="body">
|
|
@@ -86,7 +86,7 @@
|
|
|
86
86
|
<template v-else>
|
|
87
87
|
<img v-if="image" :src="image.src" :alt="image.altText"/>
|
|
88
88
|
|
|
89
|
-
<div :class="{'default-padding': useDefaultPadding, 'allow-scroll': allowContentToScroll}">
|
|
89
|
+
<div v-else :class="{'default-padding': useDefaultPadding, 'allow-scroll': allowContentToScroll}">
|
|
90
90
|
<!-- begin CmdHeadline -->
|
|
91
91
|
<CmdHeadline
|
|
92
92
|
v-if="cmdHeadline?.headlineText && repeatHeadlineInBoxBody"
|
|
@@ -261,7 +261,7 @@ export default {
|
|
|
261
261
|
*/
|
|
262
262
|
maxBoxBodyHeight: {
|
|
263
263
|
type: String,
|
|
264
|
-
default: "
|
|
264
|
+
default: "10rem"
|
|
265
265
|
},
|
|
266
266
|
/**
|
|
267
267
|
* activate if box should be collapsible
|
|
@@ -438,12 +438,14 @@ export default {
|
|
|
438
438
|
required: false
|
|
439
439
|
}
|
|
440
440
|
},
|
|
441
|
+
/*
|
|
441
442
|
mounted() {
|
|
443
|
+
|
|
442
444
|
if (this.allowContentToScroll && this.$refs.boxBody) {
|
|
443
445
|
const topPosition = this.$refs.boxBody.getBoundingClientRect().top
|
|
444
446
|
this.calculatedBodyHeight = (document.documentElement.clientHeight - topPosition) + "px"
|
|
445
447
|
}
|
|
446
|
-
}
|
|
448
|
+
},*/
|
|
447
449
|
computed: {
|
|
448
450
|
toggleTransition() {
|
|
449
451
|
if (this.useTransition) {
|
|
@@ -587,9 +589,14 @@ export default {
|
|
|
587
589
|
}
|
|
588
590
|
|
|
589
591
|
.box-body {
|
|
592
|
+
display: flex;
|
|
590
593
|
flex-grow: 1;
|
|
591
594
|
border-top: var(--box-border);
|
|
592
595
|
|
|
596
|
+
& > div:only-child {
|
|
597
|
+
flex-grow: 1;
|
|
598
|
+
}
|
|
599
|
+
|
|
593
600
|
p.cutoff-text {
|
|
594
601
|
padding: var(--default-padding);
|
|
595
602
|
margin: 0;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div class="cmd-copyright-information" role="contentinfo">
|
|
3
|
-
<a href="
|
|
3
|
+
<a href="https://www.comand-cms.com" target="comand-website" lang="en" title="CoManD-Website">© CoManD</a>
|
|
4
4
|
</div>
|
|
5
5
|
</template>
|
|
6
6
|
|
|
@@ -13,7 +13,7 @@ export default {
|
|
|
13
13
|
<style>
|
|
14
14
|
/* begin cmd-copyright-information ---------------------------------------------------------------------------------------- */
|
|
15
15
|
.cmd-copyright-information {
|
|
16
|
-
background: var(--
|
|
16
|
+
background: var(--dark-gray);
|
|
17
17
|
border-top: var(--default-border-width) var(--default-border-style) var(--pure-white);
|
|
18
18
|
text-align: center;
|
|
19
19
|
padding: var(--default-padding);
|
|
@@ -117,7 +117,7 @@ export default {
|
|
|
117
117
|
}
|
|
118
118
|
</script>
|
|
119
119
|
|
|
120
|
-
<style
|
|
120
|
+
<style>
|
|
121
121
|
/* begin cmd-site-header ---------------------------------------------------------------------------------------- */
|
|
122
122
|
.cmd-site-header {
|
|
123
123
|
grid-area: site-header;
|
|
@@ -155,6 +155,13 @@ export default {
|
|
|
155
155
|
border-bottom: 0;
|
|
156
156
|
}
|
|
157
157
|
|
|
158
|
+
& + #main-navigation-wrapper {
|
|
159
|
+
nav {
|
|
160
|
+
border-left: 0;
|
|
161
|
+
border-right: 0;
|
|
162
|
+
}
|
|
163
|
+
}
|
|
164
|
+
|
|
158
165
|
/* use id to ensure high specificity */
|
|
159
166
|
> .cmd-main-navigation#main-navigation-wrapper:last-child {
|
|
160
167
|
border-bottom: 0;
|
package/src/index.js
CHANGED
|
@@ -49,6 +49,12 @@ export { default as CmdUploadForm } from '@/components/CmdUploadForm.vue'
|
|
|
49
49
|
export { default as CmdWidthLimitationWrapper } from '@/components/CmdWidthLimitationWrapper.vue'
|
|
50
50
|
export { default as EditComponentWrapper } from '@/components/EditComponentWrapper.vue'
|
|
51
51
|
|
|
52
|
+
// export page-components
|
|
53
|
+
export { default as BasicForm } from '@/pages/BasicForm.vue'
|
|
54
|
+
export { default as ContactInformation } from '@/pages/ContactInformation.vue'
|
|
55
|
+
export { default as MultipleBoxWrapper } from '@/pages/MultipleBoxWrapper.vue'
|
|
56
|
+
export { default as MultipleListsOfLinks } from '@/pages/MultipleListsOfLinks.vue'
|
|
57
|
+
|
|
52
58
|
// export directives
|
|
53
59
|
export { default as DirFocus } from '@/directives/focus'
|
|
54
60
|
export { default as DirTelephone } from '@/directives/telephone'
|
|
@@ -21,6 +21,8 @@ export default {
|
|
|
21
21
|
"basic_form.placeholder.city": "City:",
|
|
22
22
|
"basic_form.labeltext.additional_address_info": "Additional address information",
|
|
23
23
|
"basic_form.placeholder.additional_address_info": "Additional address information",
|
|
24
|
+
"basic_form.labeltext.additional_text": "Additional text",
|
|
25
|
+
"basic_form.placeholder.additional_text": "Additional text",
|
|
24
26
|
"basic_form.labeltext.data_privacy": "I accept handling and saving of my personal data a mentioned in the <a href='/content/data-privacy-en.html' class='fancybox'>private policy</a>."
|
|
25
27
|
}
|
|
26
28
|
}
|