comand-component-library 4.0.6 → 4.0.8
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 +2542 -2407
- package/dist/comand-component-library.umd.cjs +3 -3
- package/dist/style.css +1 -1
- package/package.json +2 -2
- package/src/ComponentLibrary.vue +106 -32
- package/src/assets/data/list-of-links.json +13 -1
- package/src/assets/data/pages/list-of-downloads.json +56 -0
- package/src/assets/data/pages/list-of-site-links.json +78 -0
- package/src/assets/data/social-networks-page-by-json.json +2 -2
- package/src/assets/styles/component-library-global-styles.scss +12 -0
- package/src/componentSettingsDataAndControls.vue +39 -6
- package/src/components/CmdFakeSelect.vue +16 -23
- package/src/components/CmdFancyBox.vue +1 -0
- package/src/components/CmdForm.vue +7 -2
- package/src/components/CmdFormElement.vue +12 -3
- package/src/components/CmdInputGroup.vue +6 -4
- package/src/components/CmdListOfLinks.vue +72 -12
- package/src/components/CmdListOfLinksItem.vue +14 -3
- package/src/components/CmdPageFooter.vue +83 -0
- package/src/components/CmdPagination.vue +4 -4
- package/src/components/CmdSidebar.vue +2 -1
- package/src/components/CmdSocialNetworks.vue +34 -22
- package/src/components/CmdSocialNetworksItem.vue +1 -1
- package/src/components/CmdSwitchLanguage.vue +3 -1
- package/src/components/CmdTextImageBlock.vue +44 -15
- package/src/components/CmdThumbnailScroller.vue +3 -2
- package/src/components/CmdUploadForm.vue +78 -64
- package/src/components/CmdWidthLimitationWrapper.vue +27 -6
- package/src/components/EditComponentWrapper.vue +77 -17
- package/src/index.js +2 -1
- package/src/mixins/CmdFakeSelect/DefaultMessageProperties.js +0 -1
- package/src/mixins/pages/BasicForm/DefaultMessageProperties.js +28 -0
- package/src/pages/BasicForm.vue +341 -0
- package/src/pages/PageOverview.vue +53 -0
- package/src/pages/PageWrapper.vue +260 -0
- package/src/pages/SegmentedListsOfLinks.vue +34 -0
- /package/src/mixins/{CmdPager → CmdPagination}/DefaultMessageProperties.js +0 -0
@@ -15,15 +15,26 @@
|
|
15
15
|
<!-- end use href --->
|
16
16
|
|
17
17
|
<!-- begin use router-link -->
|
18
|
-
<router-link
|
19
|
-
|
20
|
-
|
18
|
+
<router-link
|
19
|
+
v-else-if="link.type === 'router'"
|
20
|
+
:to="getRoute(link)"
|
21
|
+
:title="link.tooltip">
|
21
22
|
<!-- begin CmdIcon -->
|
22
23
|
<CmdIcon v-if="link.iconClass" :iconClass="link.iconClass" :type="link.iconType" />
|
23
24
|
<!-- end CmdIcon -->
|
24
25
|
<span v-if="link.text">{{ link.text }}</span>
|
25
26
|
</router-link>
|
26
27
|
<!-- end use router-link -->
|
28
|
+
|
29
|
+
<!-- begin CmdListOfLinksItem for nested children -->
|
30
|
+
<ul v-if="!editModeContext">
|
31
|
+
<CmdListOfLinksItem
|
32
|
+
v-for="(child, index) in link.children"
|
33
|
+
:key="index"
|
34
|
+
:link="child"
|
35
|
+
/>
|
36
|
+
</ul>
|
37
|
+
<!-- end CmdListOfLinksItem for nested children -->
|
27
38
|
</li>
|
28
39
|
<!-- end default-view -->
|
29
40
|
|
@@ -0,0 +1,83 @@
|
|
1
|
+
<template>
|
2
|
+
<div :class="['cmd-page-footer flex-container', {'small-buttons': useSmallButtons}]">
|
3
|
+
<!-- begin button print-preview -->
|
4
|
+
<button
|
5
|
+
v-if="buttonPrintView.show"
|
6
|
+
:class="['button', {'primary': buttonPrintView.primary}]"
|
7
|
+
:title="buttonPrintView.text ? buttonPrintView.icon?.tooltip : null"
|
8
|
+
>
|
9
|
+
<span v-if="buttonPrintView.icon?.show" :class="buttonPrintView.icon?.iconClass"></span>
|
10
|
+
<span v-if="buttonPrintView.text">{{buttonPrintView.text}}</span>
|
11
|
+
</button>
|
12
|
+
<!-- end button print-preview -->
|
13
|
+
|
14
|
+
<!-- begin slot-content -->
|
15
|
+
<slot></slot>
|
16
|
+
<!-- end slot-content -->
|
17
|
+
|
18
|
+
<!-- begin CmdSocialNetworks -->
|
19
|
+
<CmdSocialNetworks v-if="cmdSocialNetworks" :networks="cmdSocialNetworks">
|
20
|
+
<slot name="cmd-social-networks"></slot>
|
21
|
+
</CmdSocialNetworks>
|
22
|
+
<!-- end CmdSocialNetworks -->
|
23
|
+
</div>
|
24
|
+
</template>
|
25
|
+
|
26
|
+
<script>
|
27
|
+
export default {
|
28
|
+
name: "CmdPageFooter",
|
29
|
+
props: {
|
30
|
+
/**
|
31
|
+
* define button for print-preview
|
32
|
+
*/
|
33
|
+
buttonPrintView: {
|
34
|
+
type: Object,
|
35
|
+
default() {
|
36
|
+
return {
|
37
|
+
show: true,
|
38
|
+
primary: false,
|
39
|
+
icon: {
|
40
|
+
show: true,
|
41
|
+
iconClass: "icon-print-preview",
|
42
|
+
tooltip: "Open print preview"
|
43
|
+
},
|
44
|
+
text: "Print preview"
|
45
|
+
}
|
46
|
+
}
|
47
|
+
},
|
48
|
+
/**
|
49
|
+
* activate to use small buttons
|
50
|
+
*/
|
51
|
+
useSmallButtons: {
|
52
|
+
type: Boolean,
|
53
|
+
default: true
|
54
|
+
},
|
55
|
+
/**
|
56
|
+
* properties for CmdSocialNetworks-component
|
57
|
+
*/
|
58
|
+
cmdSocialNetworks: {
|
59
|
+
type: Array,
|
60
|
+
required: false
|
61
|
+
}
|
62
|
+
}
|
63
|
+
}
|
64
|
+
</script>
|
65
|
+
|
66
|
+
<style>
|
67
|
+
/* begin cmd-page-footer -------------------------------------------------------------------------------------------- */
|
68
|
+
.cmd-page-footer {
|
69
|
+
align-items: flex-end;
|
70
|
+
|
71
|
+
&.small-buttons {
|
72
|
+
button, .button {
|
73
|
+
padding: var(--button-padding-small);
|
74
|
+
min-height: var(--button-min-height-small);
|
75
|
+
|
76
|
+
span {
|
77
|
+
font-size: var(--font-size-small);
|
78
|
+
}
|
79
|
+
}
|
80
|
+
}
|
81
|
+
}
|
82
|
+
/* end cmd-page-footer -------------------------------------------------------------------------------------------- */
|
83
|
+
</style>
|
@@ -1,5 +1,5 @@
|
|
1
1
|
<template>
|
2
|
-
<div class="cmd-
|
2
|
+
<div class="cmd-pagination">
|
3
3
|
<!-- begin button/link to previous page -->
|
4
4
|
<a
|
5
5
|
:href="getPreviousHref"
|
@@ -47,10 +47,10 @@
|
|
47
47
|
<script>
|
48
48
|
// import mixins
|
49
49
|
import I18n from "../mixins/I18n"
|
50
|
-
import DefaultMessageProperties from "../mixins/
|
50
|
+
import DefaultMessageProperties from "../mixins/CmdPagination/DefaultMessageProperties"
|
51
51
|
|
52
52
|
export default {
|
53
|
-
name: "
|
53
|
+
name: "CmdPagination",
|
54
54
|
mixins: [
|
55
55
|
I18n,
|
56
56
|
DefaultMessageProperties
|
@@ -172,7 +172,7 @@ export default {
|
|
172
172
|
|
173
173
|
<style>
|
174
174
|
/* begin cmd-pagination ---------------------------------------------------------------------------------------- */
|
175
|
-
.cmd-
|
175
|
+
.cmd-pagination {
|
176
176
|
display: flex;
|
177
177
|
justify-content: space-between;
|
178
178
|
|
@@ -130,6 +130,8 @@ export default {
|
|
130
130
|
|
131
131
|
&.box {
|
132
132
|
padding: 0;
|
133
|
+
|
134
|
+
border-left: 0;
|
133
135
|
}
|
134
136
|
|
135
137
|
.cmd-box-wrapper > .grid-container-create-columns {
|
@@ -171,7 +173,6 @@ export default {
|
|
171
173
|
|
172
174
|
> a {
|
173
175
|
border-right: var(--default-border);
|
174
|
-
border-left: 0;
|
175
176
|
}
|
176
177
|
}
|
177
178
|
}
|
@@ -21,17 +21,22 @@
|
|
21
21
|
|
22
22
|
<!-- begin list of networks -->
|
23
23
|
<ul v-if="validNetworks.length > 0" :class="['button-wrapper', {'no-gap': !useGap}]">
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
24
|
+
<template v-if="!editModeContext">
|
25
|
+
<!-- begin cmd-social-networks (default view) -->
|
26
|
+
<CmdSocialNetworksItem
|
27
|
+
v-for="(entry, index) in validNetworks"
|
28
|
+
:key="index"
|
29
|
+
:network="entry"
|
30
|
+
:userMustAcceptDataPrivacy="userMustAcceptDataPrivacy"
|
31
|
+
:buttonTextAlign="buttonTextAlign"
|
32
|
+
:dataPrivacyAccepted="dataPrivacyAccepted"
|
33
|
+
/>
|
34
|
+
<!-- end cmd-social-networks (default view) -->
|
35
|
+
|
36
|
+
<!-- begin slot-content -->
|
37
|
+
<slot></slot>
|
38
|
+
<!-- end slot-content -->
|
39
|
+
</template>
|
35
40
|
|
36
41
|
<!-- begin edit-mode -->
|
37
42
|
<EditComponentWrapper
|
@@ -62,9 +67,12 @@
|
|
62
67
|
</template>
|
63
68
|
|
64
69
|
<script>
|
65
|
-
import
|
70
|
+
// import mixins (EditMode only)
|
66
71
|
import EditMode from "../mixins/EditMode.vue"
|
67
72
|
|
73
|
+
// import utils (EditMode only)
|
74
|
+
import {buildComponentPath} from "../utils/editmode.js"
|
75
|
+
|
68
76
|
export default {
|
69
77
|
name: "CmdSocialNetworks",
|
70
78
|
mixins: [EditMode],
|
@@ -110,7 +118,7 @@ export default {
|
|
110
118
|
default: false
|
111
119
|
},
|
112
120
|
/**
|
113
|
-
* list of networks (i.e. facebook,
|
121
|
+
* list of networks (i.e. facebook, linkedin etc.)
|
114
122
|
*/
|
115
123
|
networks: {
|
116
124
|
type: Array,
|
@@ -149,20 +157,20 @@ export default {
|
|
149
157
|
default: "You must accept data privacy conditions!"
|
150
158
|
},
|
151
159
|
/**
|
152
|
-
* alignment for buttons
|
160
|
+
* text-alignment for buttons
|
153
161
|
*
|
154
162
|
* @allowedValues: "left", "right"
|
155
163
|
*/
|
156
164
|
buttonTextAlign: {
|
157
165
|
type: String,
|
158
|
-
default: "
|
166
|
+
default: "right",
|
159
167
|
validator(value) {
|
160
168
|
return value === "left" ||
|
161
169
|
value === "right"
|
162
170
|
}
|
163
171
|
},
|
164
172
|
/**
|
165
|
-
* properties for
|
173
|
+
* properties for CmdFormElement-component
|
166
174
|
*
|
167
175
|
* userMustAcceptDataPrivacy-property must be activated
|
168
176
|
*/
|
@@ -217,7 +225,7 @@ export default {
|
|
217
225
|
this.itemProvider)
|
218
226
|
},
|
219
227
|
itemProvider() {
|
220
|
-
return
|
228
|
+
return {
|
221
229
|
"id": "social-network-facebook",
|
222
230
|
"path": "https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fdevelopment.comand-cms.com%2Fmodule%2Fteam.html",
|
223
231
|
"tooltip": "Share this page on facebook",
|
@@ -298,6 +306,10 @@ export default {
|
|
298
306
|
}
|
299
307
|
|
300
308
|
&.text-align-right {
|
309
|
+
flex-direction: row;
|
310
|
+
}
|
311
|
+
|
312
|
+
&.text-align-left {
|
301
313
|
flex-direction: row-reverse;
|
302
314
|
}
|
303
315
|
}
|
@@ -365,9 +377,9 @@ export default {
|
|
365
377
|
li {
|
366
378
|
flex: 1;
|
367
379
|
|
368
|
-
|
369
|
-
|
370
|
-
|
380
|
+
.button {
|
381
|
+
display: flex;
|
382
|
+
}
|
371
383
|
}
|
372
384
|
}
|
373
385
|
}
|
@@ -397,8 +409,8 @@ export default {
|
|
397
409
|
--social-network-color: #3c5a99;
|
398
410
|
}
|
399
411
|
|
400
|
-
#social-network-
|
401
|
-
--social-network-color: #
|
412
|
+
#social-network-x {
|
413
|
+
--social-network-color: #14171a;
|
402
414
|
}
|
403
415
|
|
404
416
|
#social-network-xing {
|
@@ -2,7 +2,7 @@
|
|
2
2
|
<li class="cmd-social-networks-item">
|
3
3
|
<a
|
4
4
|
:key="network.path"
|
5
|
-
:class="['button', {disabled: userMustAcceptDataPrivacy && !dataPrivacyAccepted},
|
5
|
+
:class="['button', {disabled: userMustAcceptDataPrivacy && !dataPrivacyAccepted}, 'text-align-' + buttonTextAlign]"
|
6
6
|
:id="network.id"
|
7
7
|
:href="getUrl(network)"
|
8
8
|
@click="preventOnDisabled"
|
@@ -95,8 +95,10 @@ export default {
|
|
95
95
|
a:not([class*="active"]) {
|
96
96
|
filter: contrast(.5);
|
97
97
|
|
98
|
-
&:hover, &:focus, &:active {
|
98
|
+
&:hover, &:focus-visible, &:active, &.active {
|
99
99
|
filter: none;
|
100
|
+
padding: 0; /* overwrite default settings from frontend-framework for .active */
|
101
|
+
background: none; /* overwrite default settings from frontend-framework for .active */
|
100
102
|
}
|
101
103
|
}
|
102
104
|
}
|
@@ -1,8 +1,8 @@
|
|
1
1
|
<template>
|
2
|
-
<div class="cmd-text-image-block flex-container
|
2
|
+
<div :class="['cmd-text-image-block flex-container', orientation]">
|
3
3
|
<!-- begin cmdHeadline -->
|
4
4
|
<CmdHeadline
|
5
|
-
v-if="(cmdHeadline?.headlineText || editModeContext) && headlinePosition === 'aboveImage'"
|
5
|
+
v-if="(cmdHeadline?.headlineText || editModeContext) && (headlinePosition === 'aboveImage' && orientation === 'vertical')"
|
6
6
|
v-bind="cmdHeadline"
|
7
7
|
/>
|
8
8
|
<!-- end cmdHeadline -->
|
@@ -16,14 +16,19 @@
|
|
16
16
|
/>
|
17
17
|
<!-- end cmdImage -->
|
18
18
|
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
19
|
+
<div class="flex-container vertical">
|
20
|
+
<!-- begin cmdHeadline -->
|
21
|
+
<CmdHeadline
|
22
|
+
v-if="(cmdHeadline?.headlineText || editModeContext) && (headlinePosition === 'belowImage' || orientation === 'horizontal')"
|
23
|
+
v-bind="cmdHeadline"
|
24
|
+
/>
|
25
|
+
<!-- end cmdHeadline -->
|
26
|
+
|
27
|
+
<!-- begin continuous text -->
|
28
|
+
<div v-if="htmlContent" v-html="htmlContent" :class="textAlign"></div>
|
29
|
+
<!-- end continuous text -->
|
30
|
+
</div>
|
25
31
|
|
26
|
-
<!-- begin continuous text -->
|
27
32
|
<!-- begin edit-mode -->
|
28
33
|
<EditComponentWrapper
|
29
34
|
v-if="editModeContext"
|
@@ -47,14 +52,14 @@
|
|
47
52
|
</template>
|
48
53
|
</EditComponentWrapper>
|
49
54
|
<!-- end edit-mode -->
|
50
|
-
|
51
|
-
<div v-else-if="htmlContent" v-html="htmlContent" :class="textAlign"></div>
|
52
|
-
<!-- end continuous text -->
|
53
55
|
</div>
|
54
56
|
</template>
|
55
57
|
|
56
58
|
<script>
|
59
|
+
// import mixins (editMode only)
|
57
60
|
import EditMode from "../mixins/EditMode.vue"
|
61
|
+
|
62
|
+
// import utils (editMode only)
|
58
63
|
import {updateHandlerProvider} from "../utils/editmode.js"
|
59
64
|
|
60
65
|
export default {
|
@@ -66,8 +71,18 @@ export default {
|
|
66
71
|
}
|
67
72
|
},
|
68
73
|
props: {
|
69
|
-
|
70
|
-
|
74
|
+
/**
|
75
|
+
* orientation for entire component
|
76
|
+
*
|
77
|
+
* @allowedValues: "vertical", "horizontal"
|
78
|
+
*/
|
79
|
+
orientation: {
|
80
|
+
type: String,
|
81
|
+
default: "vertical",
|
82
|
+
validator(value) {
|
83
|
+
return value === "vertical" ||
|
84
|
+
value === "horizontal"
|
85
|
+
}
|
71
86
|
},
|
72
87
|
/**
|
73
88
|
* content for continuous text (can contain html-tags)
|
@@ -104,7 +119,7 @@ export default {
|
|
104
119
|
}
|
105
120
|
},
|
106
121
|
/**
|
107
|
-
*
|
122
|
+
* property for CmdHeadline-component
|
108
123
|
*/
|
109
124
|
cmdHeadline: {
|
110
125
|
type: Object,
|
@@ -116,6 +131,12 @@ export default {
|
|
116
131
|
cmdImage: {
|
117
132
|
type: Object,
|
118
133
|
required: false
|
134
|
+
},
|
135
|
+
/**
|
136
|
+
* editMode only
|
137
|
+
*/
|
138
|
+
editModeContextData: {
|
139
|
+
type: Object
|
119
140
|
}
|
120
141
|
},
|
121
142
|
computed: {
|
@@ -163,7 +184,15 @@ export default {
|
|
163
184
|
</script>
|
164
185
|
|
165
186
|
<style>
|
187
|
+
/* begin cmd-text-image-block ---------------------------------------------------------------------------------------- */
|
188
|
+
.cmd-text-image-block {
|
189
|
+
> .flex-container {
|
190
|
+
gap: calc(var(--default-gap) / 2);
|
191
|
+
}
|
192
|
+
}
|
193
|
+
|
166
194
|
.edit-mode .cmd-text-image-block textarea {
|
167
195
|
width: 100%;
|
168
196
|
}
|
197
|
+
/* end cmd-text-image-block ---------------------------------------------------------------------------------------- */
|
169
198
|
</style>
|
@@ -421,7 +421,7 @@ export default {
|
|
421
421
|
text-align: center;
|
422
422
|
|
423
423
|
&.active {
|
424
|
-
color: var(--
|
424
|
+
color: var(--hyperlink-color-highlighted);
|
425
425
|
background: none; /* overwrite default behaviour from frontend-framework */
|
426
426
|
|
427
427
|
span, span[class*="icon"] {
|
@@ -438,6 +438,7 @@ export default {
|
|
438
438
|
figcaption {
|
439
439
|
background: var(--primary-color);
|
440
440
|
opacity: 1;
|
441
|
+
color: var(--pure-white);
|
441
442
|
}
|
442
443
|
}
|
443
444
|
|
@@ -545,7 +546,7 @@ export default {
|
|
545
546
|
}
|
546
547
|
|
547
548
|
&.large-icons {
|
548
|
-
li a {
|
549
|
+
ul li a {
|
549
550
|
display: flex;
|
550
551
|
flex-direction: column;
|
551
552
|
gap: calc(var(--default-gap) / 4);
|