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.
- package/README.md +32 -32
- package/dist/comand-component-library.js +3264 -1450
- package/dist/comand-component-library.umd.cjs +3 -4
- package/dist/index.html +16 -16
- package/dist/style.css +1 -1
- package/dist/styles/demopage-only.css +4 -0
- package/dist/styles/templates/casual.css +3 -0
- package/package.json +4 -4
- package/src/App.vue +2117 -0
- package/src/ComponentLibrary.vue +150 -586
- package/src/assets/data/fake-select-options.json +3 -2
- package/src/assets/data/form-elements.json +1 -1
- package/src/assets/styles/global-styles.scss +17 -4
- package/src/componentSettingsDataAndControls.vue +705 -0
- package/src/components/CmdAddressData.vue +1 -2
- package/src/components/CmdBox.vue +60 -42
- package/src/components/CmdCopyrightInformation.vue +5 -3
- package/src/components/CmdFakeSelect.vue +138 -67
- package/src/components/CmdFancyBox.vue +2 -2
- package/src/components/CmdFormElement.vue +53 -27
- package/src/components/CmdGoogleMaps.vue +5 -0
- package/src/components/CmdHeadline.vue +13 -5
- package/src/components/CmdIcon.vue +6 -2
- package/src/components/CmdImage.vue +6 -1
- package/src/components/CmdImageGallery.vue +15 -4
- package/src/components/CmdInputGroup.vue +76 -24
- package/src/components/CmdListOfLinks.vue +20 -7
- package/src/components/CmdListOfRequirements.vue +10 -18
- package/src/components/CmdLoginForm.vue +14 -2
- package/src/components/CmdMainNavigation.vue +5 -1
- package/src/components/CmdMultistepFormProgressBar.vue +12 -7
- package/src/components/CmdOpeningHoursItem.vue +1 -3
- package/src/components/CmdPagination.vue +5 -1
- package/src/components/CmdSiteFooter.vue +11 -1
- package/src/components/CmdSiteHeader.vue +1 -0
- package/src/components/CmdSlideButton.vue +7 -1
- package/src/components/CmdSlideshow.vue +33 -5
- package/src/components/CmdSocialNetworks.vue +18 -13
- package/src/components/CmdSocialNetworksItem.vue +5 -1
- package/src/components/CmdSystemMessage.vue +7 -1
- package/src/components/CmdTabs.vue +5 -5
- package/src/components/CmdTextImageBlock.vue +11 -2
- package/src/components/CmdThumbnailScroller.vue +22 -4
- package/src/components/CmdTooltip.vue +49 -14
- package/src/components/CmdTooltipForFormElements.vue +96 -0
- package/src/components/CmdUploadForm.vue +25 -20
- package/src/components/CmdWidthLimitationWrapper.vue +1 -1
- package/src/components/ComponentSettings.vue +1 -1
- package/src/main.js +1 -1
- 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
|
-
.
|
334
|
+
.button-wrapper {
|
326
335
|
justify-content: flex-end;
|
327
336
|
}
|
328
337
|
}
|
329
338
|
|
330
339
|
&.align-center {
|
331
|
-
.
|
332
|
-
|
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',
|
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
|
-
|
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
|
-
|
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.
|
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
|
-
|
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="
|
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
|
-
|
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
|
-
}
|