comand-component-library 4.0.2 → 4.0.3

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 (50) hide show
  1. package/README.md +32 -32
  2. package/dist/comand-component-library.js +3264 -1450
  3. package/dist/comand-component-library.umd.cjs +3 -4
  4. package/dist/index.html +16 -16
  5. package/dist/style.css +1 -1
  6. package/dist/styles/demopage-only.css +4 -0
  7. package/dist/styles/templates/casual.css +3 -0
  8. package/package.json +4 -4
  9. package/src/App.vue +2117 -0
  10. package/src/ComponentLibrary.vue +150 -586
  11. package/src/assets/data/fake-select-options.json +3 -2
  12. package/src/assets/data/form-elements.json +1 -1
  13. package/src/assets/styles/global-styles.scss +17 -4
  14. package/src/componentSettingsDataAndControls.vue +705 -0
  15. package/src/components/CmdAddressData.vue +1 -2
  16. package/src/components/CmdBox.vue +60 -42
  17. package/src/components/CmdCopyrightInformation.vue +5 -3
  18. package/src/components/CmdFakeSelect.vue +138 -67
  19. package/src/components/CmdFancyBox.vue +2 -2
  20. package/src/components/CmdFormElement.vue +53 -27
  21. package/src/components/CmdGoogleMaps.vue +5 -0
  22. package/src/components/CmdHeadline.vue +13 -5
  23. package/src/components/CmdIcon.vue +6 -2
  24. package/src/components/CmdImage.vue +6 -1
  25. package/src/components/CmdImageGallery.vue +15 -4
  26. package/src/components/CmdInputGroup.vue +76 -24
  27. package/src/components/CmdListOfLinks.vue +20 -7
  28. package/src/components/CmdListOfRequirements.vue +10 -18
  29. package/src/components/CmdLoginForm.vue +14 -2
  30. package/src/components/CmdMainNavigation.vue +5 -1
  31. package/src/components/CmdMultistepFormProgressBar.vue +12 -7
  32. package/src/components/CmdOpeningHoursItem.vue +1 -3
  33. package/src/components/CmdPagination.vue +5 -1
  34. package/src/components/CmdSiteFooter.vue +11 -1
  35. package/src/components/CmdSiteHeader.vue +1 -0
  36. package/src/components/CmdSlideButton.vue +7 -1
  37. package/src/components/CmdSlideshow.vue +33 -5
  38. package/src/components/CmdSocialNetworks.vue +18 -13
  39. package/src/components/CmdSocialNetworksItem.vue +5 -1
  40. package/src/components/CmdSystemMessage.vue +7 -1
  41. package/src/components/CmdTabs.vue +5 -5
  42. package/src/components/CmdTextImageBlock.vue +11 -2
  43. package/src/components/CmdThumbnailScroller.vue +22 -4
  44. package/src/components/CmdTooltip.vue +49 -14
  45. package/src/components/CmdTooltipForFormElements.vue +96 -0
  46. package/src/components/CmdUploadForm.vue +25 -20
  47. package/src/components/CmdWidthLimitationWrapper.vue +1 -1
  48. package/src/components/ComponentSettings.vue +1 -1
  49. package/src/main.js +1 -1
  50. package/src/assets/data/accordion.json +0 -45
@@ -88,7 +88,12 @@ export default {
88
88
  */
89
89
  align: {
90
90
  type: String,
91
- default: "left"
91
+ default: "left",
92
+ validator(value) {
93
+ return value === "left" ||
94
+ value === "center" ||
95
+ value === "right"
96
+ }
92
97
  },
93
98
  /**
94
99
  * activate if gap between buttons should appear
@@ -150,7 +155,11 @@ export default {
150
155
  */
151
156
  buttonTextAlign: {
152
157
  type: String,
153
- default: "left"
158
+ default: "left",
159
+ validator(value) {
160
+ return value === "left" ||
161
+ value === "right"
162
+ }
154
163
  },
155
164
  /**
156
165
  * properties for cmdFormElement
@@ -301,15 +310,15 @@ export default {
301
310
 
302
311
  &:first-of-type {
303
312
  .button {
304
- border-top-left-radius: var(--border-radius);
305
- border-bottom-left-radius: var(--border-radius);
313
+ border-top-left-radius: var(--default-border-radius);
314
+ border-bottom-left-radius: var(--default-border-radius);
306
315
  }
307
316
  }
308
317
 
309
318
  &:last-of-type {
310
319
  .button {
311
- border-top-right-radius: var(--border-radius);
312
- border-bottom-right-radius: var(--border-radius);
320
+ border-top-right-radius: var(--default-border-radius);
321
+ border-bottom-right-radius: var(--default-border-radius);
313
322
  }
314
323
  }
315
324
  }
@@ -322,23 +331,19 @@ export default {
322
331
  }
323
332
 
324
333
  &.align-right {
325
- .share-button-wrapper {
334
+ .button-wrapper {
326
335
  justify-content: flex-end;
327
336
  }
328
337
  }
329
338
 
330
339
  &.align-center {
331
- .cmd-headline > * {
332
- text-align: center;
340
+ .button-wrapper {
341
+ justify-content: center;
333
342
  }
334
343
 
335
344
  .toggle-switch {
336
345
  margin: auto;
337
346
  }
338
-
339
- .share-button-wrapper {
340
- justify-content: center;
341
- }
342
347
  }
343
348
 
344
349
  &.align-right {
@@ -51,7 +51,11 @@ export default {
51
51
  */
52
52
  buttonTextAlign: {
53
53
  type: String,
54
- default: "left"
54
+ default: "left",
55
+ validator(value) {
56
+ return value === "left" ||
57
+ value === "right"
58
+ }
55
59
  },
56
60
  /**
57
61
  * information if the user has accepted the data privacy (by checking the checkbox)
@@ -57,7 +57,13 @@ export default {
57
57
  */
58
58
  validationStatus: {
59
59
  type: String,
60
- required: true
60
+ required: true,
61
+ validator(value) {
62
+ return value === "error" ||
63
+ value === "warning" ||
64
+ value === "success" ||
65
+ value === "info"
66
+ }
61
67
  },
62
68
  /**
63
69
  * activate to stretch message-box as wide as parent container (else message-box is as wide as message (+padding))
@@ -113,8 +113,8 @@ export default {
113
113
  > li {
114
114
  z-index: 10;
115
115
  margin-left: 0;
116
- border-top-left-radius: var(--border-radius);
117
- border-top-right-radius: var(--border-radius);
116
+ border-top-left-radius: var(--default-border-radius);
117
+ border-top-right-radius: var(--default-border-radius);
118
118
  list-style-type: none;
119
119
  background: var(--color-scheme-background-color);
120
120
 
@@ -125,8 +125,8 @@ export default {
125
125
  padding: var(--default-padding);
126
126
  border: var(--default-border);
127
127
  border-bottom: 0;
128
- border-top-left-radius: var(--border-radius);
129
- border-top-right-radius: var(--border-radius);
128
+ border-top-left-radius: var(--default-border-radius);
129
+ border-top-right-radius: var(--default-border-radius);
130
130
  text-decoration: none;
131
131
 
132
132
  &:hover, &:active, &:focus {
@@ -185,7 +185,7 @@ export default {
185
185
  > div {
186
186
  padding: var(--default-padding);
187
187
  border: var(--primary-border);
188
- border-radius: var(--border-radius);
188
+ border-radius: var(--default-border-radius);
189
189
  background: var(--color-scheme-background-color);
190
190
  border-top-left-radius: 0;
191
191
 
@@ -83,7 +83,12 @@ export default {
83
83
  */
84
84
  paragraphTextAlign: {
85
85
  type: String,
86
- required: false
86
+ required: false,
87
+ validator(value) {
88
+ return value === "left" ||
89
+ value === "center" ||
90
+ value === "right"
91
+ }
87
92
  },
88
93
  /**
89
94
  * position for headline
@@ -92,7 +97,11 @@ export default {
92
97
  */
93
98
  headlinePosition: {
94
99
  type: String,
95
- default: "aboveImage"
100
+ default: "aboveImage",
101
+ validator(value) {
102
+ return value === "aboveImage" ||
103
+ value === "belowImage"
104
+ }
96
105
  },
97
106
  /**
98
107
  * properties for CmdHeadline-component
@@ -151,7 +151,11 @@ export default {
151
151
  */
152
152
  contentType: {
153
153
  type: String,
154
- default: "image"
154
+ default: "image",
155
+ validator(value) {
156
+ return value === "image" ||
157
+ value === "text"
158
+ }
155
159
  },
156
160
  /**
157
161
  * set type to define what will be executed on click on a thumbnail-scroller-item
@@ -160,7 +164,12 @@ export default {
160
164
  */
161
165
  executeOnClick: {
162
166
  type: String,
163
- default: "fancybox"
167
+ default: "fancybox",
168
+ validator(value) {
169
+ return value === "fancybox" ||
170
+ value === "url" ||
171
+ value === "emit"
172
+ }
164
173
  },
165
174
  /**
166
175
  * list of thumbnail-scroller-items
@@ -379,7 +388,7 @@ export default {
379
388
  }
380
389
 
381
390
  > .inner-thumbnail-wrapper {
382
- border-radius: var(--border-radius);
391
+ border-radius: var(--default-border-radius);
383
392
  padding: calc(var(--default-padding) * 2);
384
393
  padding-top: 0;
385
394
  margin: 0 auto;
@@ -403,7 +412,6 @@ export default {
403
412
  flex: none; /* avoids items to shrink to small on small screens */
404
413
 
405
414
  img {
406
- border-radius: var(--border-radius);
407
415
  min-width: 15rem;
408
416
  max-height: 10rem;
409
417
  }
@@ -414,12 +422,21 @@ export default {
414
422
 
415
423
  &.active {
416
424
  color: var(--pure-white);
425
+ background: none; /* overwrite default behaviour from frontend-framework */
417
426
 
418
427
  span, span[class*="icon"] {
419
428
  color: inherit
420
429
  }
421
430
 
431
+ &:has(figcaption) {
432
+ img {
433
+ border-bottom-left-radius: 0;
434
+ border-bottom-right-radius: 0;
435
+ }
436
+ }
437
+
422
438
  figcaption {
439
+ background: var(--primary-color);
423
440
  opacity: 1;
424
441
  }
425
442
  }
@@ -432,6 +449,7 @@ export default {
432
449
  &.active {
433
450
  figcaption {
434
451
  color: var(--hyperlink-color);
452
+ background: none;
435
453
  }
436
454
  }
437
455
  }
@@ -1,5 +1,5 @@
1
1
  <template>
2
- <div v-if="tooltipVisibility" :class="['cmd-tooltip', status]" ref="tooltip">
2
+ <div v-if="tooltipVisibility" :class="['cmd-tooltip', validationStatus]" ref="tooltip">
3
3
  <div v-if="cmdHeadline || iconClose.show" class="headline-wrapper">
4
4
  <!-- begin CmdHeadline -->
5
5
  <CmdHeadline
@@ -19,6 +19,7 @@
19
19
  </a>
20
20
  <!-- end icon to close tooltip -->
21
21
  </div>
22
+
22
23
  <!-- begin slot-content -->
23
24
  <slot>
24
25
  {{ tooltipText }}
@@ -69,13 +70,27 @@ export default {
69
70
  required: false
70
71
  },
71
72
  /**
72
- * status
73
+ * validation-status for tooltip
73
74
  *
74
- * @allowedValues: error, warning, success, info
75
+ * @allowedValues: "", error, warning, success, info
75
76
  */
76
- status: {
77
+ validationStatus: {
77
78
  type: String,
78
- required: false
79
+ required: false,
80
+ validator(value) {
81
+ return value === "" ||
82
+ value === "error" ||
83
+ value === "warning" ||
84
+ value === "success" ||
85
+ value === "info"
86
+ }
87
+ },
88
+ /**
89
+ * id of container that scrolls the content of the site
90
+ */
91
+ idOfScrollContainer: {
92
+ type: String,
93
+ default: "page-wrapper"
79
94
  },
80
95
  /**
81
96
  * icon 'close'
@@ -101,28 +116,23 @@ export default {
101
116
  }
102
117
  },
103
118
  mounted() {
104
- window.addEventListener('scroll', this.hideOnScroll);
105
-
106
119
  if(this.relatedId) {
107
120
  const relatedElement = document.getElementById(this.relatedId)
108
121
 
109
122
  if(relatedElement) {
110
- relatedElement.addEventListener("mouseenter", this.showTooltip)
111
- document.addEventListener("scroll", this.hideTooltip) // avoid fixed tooltip on scroll
123
+ document.getElementById(this.idOfScrollContainer).addEventListener("scroll", this.hideTooltip) // avoid fixed tooltip on scroll
112
124
  document.addEventListener("keyup", this.hideTooltipOnEsc) // close tooltip by using "escape"-key
113
125
 
114
126
  if (this.toggleVisibilityByClick) {
115
127
  relatedElement.addEventListener("click", this.toggleTooltipVisibility)
116
128
  } else {
129
+ relatedElement.addEventListener("mouseenter", this.showTooltip)
117
130
  relatedElement.addEventListener("mouseleave", this.hideTooltip)
118
131
  }
119
132
  }
120
133
  }
121
134
  },
122
135
  methods: {
123
- hideOnScroll() {
124
- this.tooltipVisibility = true
125
- },
126
136
  toggleTooltipVisibility(event) {
127
137
  this.getPointerPosition(event)
128
138
  this.tooltipVisibility = !this.tooltipVisibility
@@ -160,16 +170,16 @@ export default {
160
170
  },
161
171
  unmounted() {
162
172
  if(this.relatedId) {
163
- const relatedElement = document.getElementById(this.npm )
173
+ const relatedElement = document.getElementById(this.relatedId)
164
174
 
165
175
  if(relatedElement) {
166
- relatedElement.removeEventListener("mouseenter", this.showTooltip)
167
176
  document.removeEventListener("scroll", this.hideTooltip)
168
177
  document.removeEventListener("keyup", this.hideTooltipOnEsc)
169
178
 
170
179
  if (this.toggleVisibilityByClick) {
171
180
  relatedElement.removeEventListener("click", this.toggleTooltipVisibility)
172
181
  } else {
182
+ relatedElement.removeEventListener("mouseenter", this.showTooltip)
173
183
  relatedElement.removeEventListener("mouseleave", this.showTooltip)
174
184
  }
175
185
  }
@@ -206,6 +216,26 @@ export default {
206
216
  display: flex;
207
217
  flex-direction: column;
208
218
 
219
+ &.error, &.warning, &.success, &.info {
220
+ border-color: var(--status-color);
221
+ }
222
+
223
+ &.error {
224
+ --status-color: var(--error-color);
225
+ }
226
+
227
+ &.warning {
228
+ --status-color: var(--warning-color);
229
+ }
230
+
231
+ &.success {
232
+ --status-color: var(--success-color);
233
+ }
234
+
235
+ &.info {
236
+ --status-color: var(--info-color);
237
+ }
238
+
209
239
  .headline-wrapper {
210
240
  display: flex;
211
241
 
@@ -215,6 +245,11 @@ export default {
215
245
  [class*="icon-"] {
216
246
  padding-left: 1rem;
217
247
  font-size: var(--font-size-small);
248
+ color: var(--hyperlink-color);
249
+
250
+ &:hover, &:active, &:focus {
251
+ color: var(--hyperlink-color-highlighted);
252
+ }
218
253
  }
219
254
  }
220
255
  }
@@ -0,0 +1,96 @@
1
+ <template>
2
+ <!-- begin CmdTooltip -->
3
+ <CmdTooltip
4
+ ref="tooltip"
5
+ class="box cmd-tooltip-for-form-elements"
6
+ :class="validationStatus"
7
+ :relatedId="relatedId"
8
+ :toggle-visibility-by-click="true">
9
+
10
+ <!-- begin CmdListOfRequirements -->
11
+ <CmdListOfRequirements
12
+ v-if="cmdListOfRequirements.showRequirements"
13
+ :showHeadline="cmdListOfRequirements.showHeadline"
14
+ :inputRequirements="cmdListOfRequirements.inputRequirements"
15
+ :helplink="cmdListOfRequirements.helplink"
16
+ :inputModelValue="cmdListOfRequirements.inputModelValue"
17
+ :inputAttributes="cmdListOfRequirements.inputAttributes"
18
+ :labelText="cmdListOfRequirements.labelText"
19
+ />
20
+ <!-- end CmdListOfRequirements -->
21
+ </CmdTooltip>
22
+ <!-- end CmdTooltip -->
23
+ </template>
24
+
25
+ <script>
26
+ export default {
27
+ name: "CmdTooltipForFormElements",
28
+ props: {
29
+ /**
30
+ * related-id for CmdTooltip-component
31
+ */
32
+ relatedId: {
33
+ type: String,
34
+ default: ""
35
+ },
36
+ /**
37
+ * validation-status for CmdTooltip-component
38
+ *
39
+ * @allowedValues: "", error, warning, success, info
40
+ *
41
+ * @affectsStyling: true
42
+ */
43
+ validationStatus: {
44
+ type: String,
45
+ default: "",
46
+ validator(value) {
47
+ return value === "" ||
48
+ value === "error" ||
49
+ value === "warning" ||
50
+ value === "success" ||
51
+ value === "info"
52
+ }
53
+ },
54
+ /**
55
+ * properties for CmdListOfRequirements-component
56
+ */
57
+ cmdListOfRequirements: {
58
+ type: Object,
59
+ default() {
60
+ return {
61
+ showRequirements: true,
62
+ validationTooltip: "",
63
+ inputRequirements: [],
64
+ inputAttributes: {},
65
+ showHeadline: true,
66
+ inputModelValue: "",
67
+ helplink: {},
68
+ labelText: ""
69
+ }
70
+ }
71
+ }
72
+ },
73
+ methods: {
74
+ hideTooltip() {
75
+ // close tooltip by calling function from CmdTooltip using $refs
76
+ this.$refs.tooltip.hideTooltip()
77
+ }
78
+ }
79
+ }
80
+ </script>
81
+
82
+ <style>
83
+ /* begin cmd-tooltip-for-form-elements ---------------------------------------------------------------------------------------- */
84
+ .cmd-tooltip-for-form-elements {
85
+ .headline-wrapper {
86
+ a[class*="icon-"], a:has([class*="icon-"]) {
87
+ margin-left: auto;
88
+
89
+ &:hover, &:active, &:focus {
90
+ background: none;
91
+ }
92
+ }
93
+ }
94
+ }
95
+ /* end cmd-tooltip-for-form-elements ---------------------------------------------------------------------------------------- */
96
+ </style>
@@ -491,7 +491,7 @@ export default {
491
491
  /**
492
492
  * set icon for delete-icons
493
493
  */
494
- deleteIcon: {
494
+ iconDelete: {
495
495
  type: Object,
496
496
  default() {
497
497
  return {
@@ -1063,8 +1063,30 @@ export default {
1063
1063
  justify-content: center;
1064
1064
  }
1065
1065
 
1066
+ /* begin box for simple-mode */
1067
+ &.box {
1068
+ display: inline-flex;
1069
+ flex-direction: column;
1070
+ background: var(--default-background-color);
1071
+
1072
+ text-decoration: none;
1073
+ text-align: center;
1074
+ padding: var(--default-padding);
1075
+
1076
+ span {
1077
+ margin: 0;
1078
+
1079
+ &[class*="icon-"] {
1080
+ font-size: 5rem;
1081
+ }
1082
+ }
1083
+ }
1084
+ /* end box for simple-mode */
1085
+
1066
1086
  .box {
1087
+ box-shadow: none;
1067
1088
  background: var(--color-scheme-background-color);
1089
+ border: var(--default-border);
1068
1090
 
1069
1091
  dl {
1070
1092
  justify-content: center;
@@ -1111,8 +1133,8 @@ export default {
1111
1133
  background: var(--color-scheme-background-color);
1112
1134
 
1113
1135
  &::-moz-progress-bar {
1114
- border-top-left-radius: var(--border-radius);
1115
- border-bottom-left-radius: var(--border-radius);
1136
+ border-top-left-radius: var(--default-border-radius);
1137
+ border-bottom-left-radius: var(--default-border-radius);
1116
1138
  background: var(--primary-color);
1117
1139
  }
1118
1140
  }
@@ -1206,23 +1228,6 @@ export default {
1206
1228
  font-size: 5rem;
1207
1229
  }
1208
1230
  }
1209
-
1210
- &.box {
1211
- display: inline-flex;
1212
- flex-direction: column;
1213
- background: var(--default-background-color);
1214
- text-decoration: none;
1215
- text-align: center;
1216
- padding: var(--default-padding);
1217
-
1218
- span {
1219
- margin: 0;
1220
-
1221
- &[class*="icon-"] {
1222
- font-size: 5rem;
1223
- }
1224
- }
1225
- }
1226
1231
  }
1227
1232
 
1228
1233
  /* end cmd-upload-form ---------------------------------------------------------------------------------------------- */
@@ -1,7 +1,7 @@
1
1
  <template>
2
2
  <div class="cmd-width-limitation-wrapper" :class="{'sticky': sticky}">
3
3
  <!-- begin slot-content in section -->
4
- <section v-if="innerWrapper" :class="setInnerClass" :id="{anchorId: anchorId}">
4
+ <section v-if="innerWrapper" :class="setInnerClass" :id="anchorId">
5
5
  <!-- begin cmd-headline -->
6
6
  <CmdHeadline
7
7
  v-if="cmdHeadline"
@@ -4,6 +4,7 @@
4
4
  :collapsible="true"
5
5
  :cmdHeadline="{headlineText: readableName(componentName), headlineLevel: 4, headlineIcon: {iconClass: 'icon-settings-template'}}"
6
6
  :openCollapsedBox="true"
7
+ :allowContentToScroll="true"
7
8
  boxBodyClass="settings-body"
8
9
  >
9
10
  <template v-slot:body>
@@ -24,7 +25,6 @@
24
25
  </template>
25
26
 
26
27
  <script>
27
-
28
28
  export default {
29
29
  name: "ComponentSettings",
30
30
  data() {
package/src/main.js CHANGED
@@ -36,7 +36,7 @@ import '@/assets/styles/template.css'
36
36
  import "prismjs/themes/prism.css"
37
37
 
38
38
  /* import css for demopage only */
39
- //import 'comand-frontend-framework/public/demopage-only.css'
39
+ import 'comand-frontend-framework/demopage-only.css'
40
40
  /* end imports css from comand-component-library ---------------------------------------------------------------------------------------- */
41
41
 
42
42
  import router from "./router"
@@ -1,45 +0,0 @@
1
- {
2
- "accordionData1": [
3
- {
4
- "headlineText": "First",
5
- "headlineLevel": 5,
6
- "iconClass": "icon-globe",
7
- "content": "Content 1",
8
- "status": false
9
- },
10
- {
11
- "headlineText": "Second",
12
- "headlineLevel": 5,
13
- "iconClass": "icon-user-profile",
14
- "content": "Content 2",
15
- "status": true
16
- },
17
- {
18
- "headlineText": "Third",
19
- "headlineLevel": 5,
20
- "iconClass": "icon-home",
21
- "content": "Content 3",
22
- "status": false
23
- }
24
- ],
25
- "accordionData2": [
26
- {
27
- "headlineText": "First",
28
- "headlineLevel": 5,
29
- "content": "Content 1",
30
- "status": false
31
- },
32
- {
33
- "headlineText": "Second",
34
- "headlineLevel": 5,
35
- "content": "Content 2",
36
- "status": false
37
- },
38
- {
39
- "headlineText": "Third",
40
- "headlineLevel": 5,
41
- "content": "Content 3",
42
- "status": false
43
- }
44
- ]
45
- }