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.
Files changed (37) hide show
  1. package/dist/comand-component-library.js +2542 -2407
  2. package/dist/comand-component-library.umd.cjs +3 -3
  3. package/dist/style.css +1 -1
  4. package/package.json +2 -2
  5. package/src/ComponentLibrary.vue +106 -32
  6. package/src/assets/data/list-of-links.json +13 -1
  7. package/src/assets/data/pages/list-of-downloads.json +56 -0
  8. package/src/assets/data/pages/list-of-site-links.json +78 -0
  9. package/src/assets/data/social-networks-page-by-json.json +2 -2
  10. package/src/assets/styles/component-library-global-styles.scss +12 -0
  11. package/src/componentSettingsDataAndControls.vue +39 -6
  12. package/src/components/CmdFakeSelect.vue +16 -23
  13. package/src/components/CmdFancyBox.vue +1 -0
  14. package/src/components/CmdForm.vue +7 -2
  15. package/src/components/CmdFormElement.vue +12 -3
  16. package/src/components/CmdInputGroup.vue +6 -4
  17. package/src/components/CmdListOfLinks.vue +72 -12
  18. package/src/components/CmdListOfLinksItem.vue +14 -3
  19. package/src/components/CmdPageFooter.vue +83 -0
  20. package/src/components/CmdPagination.vue +4 -4
  21. package/src/components/CmdSidebar.vue +2 -1
  22. package/src/components/CmdSocialNetworks.vue +34 -22
  23. package/src/components/CmdSocialNetworksItem.vue +1 -1
  24. package/src/components/CmdSwitchLanguage.vue +3 -1
  25. package/src/components/CmdTextImageBlock.vue +44 -15
  26. package/src/components/CmdThumbnailScroller.vue +3 -2
  27. package/src/components/CmdUploadForm.vue +78 -64
  28. package/src/components/CmdWidthLimitationWrapper.vue +27 -6
  29. package/src/components/EditComponentWrapper.vue +77 -17
  30. package/src/index.js +2 -1
  31. package/src/mixins/CmdFakeSelect/DefaultMessageProperties.js +0 -1
  32. package/src/mixins/pages/BasicForm/DefaultMessageProperties.js +28 -0
  33. package/src/pages/BasicForm.vue +341 -0
  34. package/src/pages/PageOverview.vue +53 -0
  35. package/src/pages/PageWrapper.vue +260 -0
  36. package/src/pages/SegmentedListsOfLinks.vue +34 -0
  37. /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 v-else-if="link.type === 'router'"
19
- :to="getRoute(link)"
20
- :title="link.tooltip">
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-pager">
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/CmdPager/DefaultMessageProperties"
50
+ import DefaultMessageProperties from "../mixins/CmdPagination/DefaultMessageProperties"
51
51
 
52
52
  export default {
53
- name: "CmdPager",
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-pager {
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
- <!-- begin cmd-social-networks (default view) -->
25
- <CmdSocialNetworksItem
26
- v-if="!editModeContext"
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) -->
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 {buildComponentPath} from "../utils/editmode.js"
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, twitter etc.)
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: "left",
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 cmdFormElement
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
- .button {
369
- display: flex;
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-twitter {
401
- --social-network-color: #6bacde;
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}, {'text-align-right': buttonTextAlign === 'right'}]"
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 vertical">
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
- <!-- begin cmdHeadline -->
20
- <CmdHeadline
21
- v-if="(cmdHeadline?.headlineText || editModeContext) && headlinePosition === 'belowImage'"
22
- v-bind="cmdHeadline"
23
- />
24
- <!-- end cmdHeadline -->
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
- editModeContextData: {
70
- type: Object
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
- * properties for CmdHeadline-component
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(--pure-white);
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);