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
@@ -11,7 +11,19 @@
|
|
11
11
|
"text": "Internal link",
|
12
12
|
"path": "/content/fancybox-content.html",
|
13
13
|
"tooltip": "Open local file in fancybox",
|
14
|
-
"fancybox": true
|
14
|
+
"fancybox": true,
|
15
|
+
"children": [
|
16
|
+
{
|
17
|
+
"type": "href",
|
18
|
+
"text": "Link for child #1",
|
19
|
+
"path": "#"
|
20
|
+
},
|
21
|
+
{
|
22
|
+
"type": "href",
|
23
|
+
"text": "Link for child #2",
|
24
|
+
"path": "#"
|
25
|
+
}
|
26
|
+
]
|
15
27
|
},
|
16
28
|
{
|
17
29
|
"iconClass": "icon-export",
|
@@ -0,0 +1,56 @@
|
|
1
|
+
[
|
2
|
+
{
|
3
|
+
"headline": {
|
4
|
+
"headlineLevel": 4,
|
5
|
+
"headlineText": "Segment #1 (vertical list)"
|
6
|
+
},
|
7
|
+
"orientation": "vertical",
|
8
|
+
"links": [
|
9
|
+
{
|
10
|
+
"iconClass": "icon-file-pdf",
|
11
|
+
"type": "href",
|
12
|
+
"text": "Download file #1",
|
13
|
+
"path": "#"
|
14
|
+
},
|
15
|
+
{
|
16
|
+
"iconClass": "icon-file-excel",
|
17
|
+
"type": "href",
|
18
|
+
"text": "Download file #2",
|
19
|
+
"path": "#"
|
20
|
+
},
|
21
|
+
{
|
22
|
+
"iconClass": "icon-file-other",
|
23
|
+
"type": "href",
|
24
|
+
"text": "Download file #3",
|
25
|
+
"path": "#"
|
26
|
+
}
|
27
|
+
]
|
28
|
+
},
|
29
|
+
{
|
30
|
+
"headline": {
|
31
|
+
"headlineLevel": 4,
|
32
|
+
"headlineText": "Segment #2 (horizontal list)"
|
33
|
+
},
|
34
|
+
"orientation": "horizontal",
|
35
|
+
"links": [
|
36
|
+
{
|
37
|
+
"iconClass": "icon-file-pdf",
|
38
|
+
"type": "href",
|
39
|
+
"text": "Download file #1",
|
40
|
+
"path": "#"
|
41
|
+
},
|
42
|
+
{
|
43
|
+
"iconClass": "icon-file-excel",
|
44
|
+
"type": "href",
|
45
|
+
"text": "Download file #2",
|
46
|
+
"path": "#"
|
47
|
+
},
|
48
|
+
{
|
49
|
+
"iconClass": "icon-file-other",
|
50
|
+
"type": "href",
|
51
|
+
"text": "Download file #3",
|
52
|
+
"path": "#"
|
53
|
+
}
|
54
|
+
]
|
55
|
+
}
|
56
|
+
]
|
@@ -0,0 +1,78 @@
|
|
1
|
+
[
|
2
|
+
{
|
3
|
+
"headline": {
|
4
|
+
"headlineLevel": 4,
|
5
|
+
"headlineText": "Segment #1 (vertical list)"
|
6
|
+
},
|
7
|
+
"orientation": "vertical",
|
8
|
+
"links": [
|
9
|
+
{
|
10
|
+
"iconClass": "icon-home",
|
11
|
+
"type": "href",
|
12
|
+
"text": "Link #1",
|
13
|
+
"path": "#"
|
14
|
+
},
|
15
|
+
{
|
16
|
+
"iconClass": "icon-user-profile",
|
17
|
+
"type": "href",
|
18
|
+
"text": "Link #2",
|
19
|
+
"path": "#",
|
20
|
+
"children": [
|
21
|
+
{
|
22
|
+
"iconClass": "icon-link",
|
23
|
+
"type": "href",
|
24
|
+
"text": "Sublink #1",
|
25
|
+
"path": "#"
|
26
|
+
},
|
27
|
+
{
|
28
|
+
"iconClass": "icon-export",
|
29
|
+
"type": "href",
|
30
|
+
"text": "Sublink #2",
|
31
|
+
"path": "#"
|
32
|
+
}
|
33
|
+
]
|
34
|
+
},
|
35
|
+
{
|
36
|
+
"type": "href",
|
37
|
+
"text": "Link #3",
|
38
|
+
"path": "#"
|
39
|
+
}
|
40
|
+
]
|
41
|
+
},
|
42
|
+
{
|
43
|
+
"headline": {
|
44
|
+
"headlineLevel": 4,
|
45
|
+
"headlineText": "Segment #2 (horizontal list)"
|
46
|
+
},
|
47
|
+
"orientation": "horizontal",
|
48
|
+
"links": [
|
49
|
+
{
|
50
|
+
"type": "href",
|
51
|
+
"text": "Link #1",
|
52
|
+
"path": "#"
|
53
|
+
},
|
54
|
+
{
|
55
|
+
"type": "href",
|
56
|
+
"text": "Link #2",
|
57
|
+
"path": "#",
|
58
|
+
"children": [
|
59
|
+
{
|
60
|
+
"type": "href",
|
61
|
+
"text": "Sublink #1",
|
62
|
+
"path": "#"
|
63
|
+
},
|
64
|
+
{
|
65
|
+
"type": "href",
|
66
|
+
"text": "Sublink #2",
|
67
|
+
"path": "#"
|
68
|
+
}
|
69
|
+
]
|
70
|
+
},
|
71
|
+
{
|
72
|
+
"type": "href",
|
73
|
+
"text": "Link #3",
|
74
|
+
"path": "#"
|
75
|
+
}
|
76
|
+
]
|
77
|
+
}
|
78
|
+
]
|
@@ -7,9 +7,9 @@
|
|
7
7
|
"linkText": "Share"
|
8
8
|
},
|
9
9
|
{
|
10
|
-
"id": "social-network-
|
10
|
+
"id": "social-network-x",
|
11
11
|
"path": "https://twitter.com/home?status=http%3A%2F%2Fdevelopment.comand-cms.com%2Fmodule%2Fteam.html",
|
12
|
-
"tooltip": "Share this page on
|
12
|
+
"tooltip": "Share this page on X",
|
13
13
|
"iconClass": "icon-twitter",
|
14
14
|
"linkText": "Share"
|
15
15
|
},
|
@@ -250,6 +250,18 @@ body.avoid-scrolling {
|
|
250
250
|
|
251
251
|
&.success {
|
252
252
|
--status-color: var(--success-color);
|
253
|
+
|
254
|
+
.label-text > a {
|
255
|
+
&:has([class*="icon-"]) {
|
256
|
+
&:hover, &:active, &:focus {
|
257
|
+
cursor: default;
|
258
|
+
|
259
|
+
[class*="icon-"] {
|
260
|
+
color: var(--success-color);
|
261
|
+
}
|
262
|
+
}
|
263
|
+
}
|
264
|
+
}
|
253
265
|
}
|
254
266
|
|
255
267
|
&.info {
|
@@ -5,6 +5,10 @@ export default {
|
|
5
5
|
data() {
|
6
6
|
return {
|
7
7
|
cmdAddressDataSettingsData: {
|
8
|
+
cmdHeadline: {
|
9
|
+
headlineText: "Address Data",
|
10
|
+
headlineLevel: 3
|
11
|
+
},
|
8
12
|
useSlot: false,
|
9
13
|
showLabelIcons: true,
|
10
14
|
showLabelTexts: false,
|
@@ -12,6 +16,10 @@ data() {
|
|
12
16
|
showLabels: true
|
13
17
|
},
|
14
18
|
cmdBankAccountDataSettingsData: {
|
19
|
+
cmdHeadline: {
|
20
|
+
headlineText: "Bank Account Data",
|
21
|
+
headlineLevel: 3
|
22
|
+
},
|
15
23
|
allowCopyByClick: false,
|
16
24
|
additionalInformation: ""
|
17
25
|
},
|
@@ -331,7 +339,8 @@ data() {
|
|
331
339
|
largeIcons: false,
|
332
340
|
sectionAnchors: false,
|
333
341
|
orientation: "vertical",
|
334
|
-
align: "left"
|
342
|
+
align: "left",
|
343
|
+
showListStyleItems: false
|
335
344
|
},
|
336
345
|
cmdListOfLinksSettingsControls: {
|
337
346
|
align: [
|
@@ -358,6 +367,16 @@ data() {
|
|
358
367
|
text: "Horizontal",
|
359
368
|
value: "horizontal"
|
360
369
|
}
|
370
|
+
],
|
371
|
+
showListStyleItems: [
|
372
|
+
{
|
373
|
+
text: "False (default)",
|
374
|
+
value: false
|
375
|
+
},
|
376
|
+
{
|
377
|
+
text: "True",
|
378
|
+
value: true
|
379
|
+
}
|
361
380
|
]
|
362
381
|
},
|
363
382
|
cmdLoginFormSettingsData: {
|
@@ -450,6 +469,9 @@ data() {
|
|
450
469
|
headlineLevel: 3
|
451
470
|
}
|
452
471
|
},
|
472
|
+
cmdPageFooterSettingsData: {
|
473
|
+
useSmallButtons: false
|
474
|
+
},
|
453
475
|
cmdPaginationSettingsData: {
|
454
476
|
pages: 3,
|
455
477
|
itemsPerPage: 1,
|
@@ -523,12 +545,12 @@ data() {
|
|
523
545
|
],
|
524
546
|
buttonTextAlign: [
|
525
547
|
{
|
526
|
-
text: "
|
527
|
-
value: "
|
548
|
+
text: "Right (default)",
|
549
|
+
value: "right"
|
528
550
|
},
|
529
551
|
{
|
530
|
-
text: "
|
531
|
-
value: "
|
552
|
+
text: "Left",
|
553
|
+
value: "left"
|
532
554
|
}
|
533
555
|
]
|
534
556
|
},
|
@@ -572,7 +594,8 @@ data() {
|
|
572
594
|
cmdTextImageBlockSettingsData: {
|
573
595
|
htmlContent: "Text given as html-content",
|
574
596
|
paragraphTextAlign: "left",
|
575
|
-
headlinePosition: "aboveImage"
|
597
|
+
headlinePosition: "aboveImage",
|
598
|
+
orientation: "vertical"
|
576
599
|
},
|
577
600
|
cmdTextImageBlockSettingsControls: {
|
578
601
|
paragraphTextAlign: [
|
@@ -598,6 +621,16 @@ data() {
|
|
598
621
|
text: "Below Image",
|
599
622
|
value: "belowImage"
|
600
623
|
}
|
624
|
+
],
|
625
|
+
orientation: [
|
626
|
+
{
|
627
|
+
text: "Vertical (default)",
|
628
|
+
value: "vertical"
|
629
|
+
},
|
630
|
+
{
|
631
|
+
text: "Horizontal",
|
632
|
+
value: "horizontal"
|
633
|
+
}
|
601
634
|
]
|
602
635
|
},
|
603
636
|
cmdThumbnailScrollerSettingsData: {
|
@@ -18,12 +18,13 @@
|
|
18
18
|
<template v-if="showLabel">
|
19
19
|
<!-- begin label -->
|
20
20
|
<span class="label-text">
|
21
|
-
<span :id="htmlId">{{ labelText }}<sup v-if="$attrs.required !== undefined">*</sup></span>
|
21
|
+
<span :id="htmlId">{{ labelText }}<sup v-if="$attrs.required !== undefined" aria-hidden="true">*</sup></span>
|
22
22
|
|
23
|
+
<!-- begin status-icon (linked with tooltip) -->
|
23
24
|
<a v-if="($attrs.required || inputRequirements.length) && showStatusIcon"
|
24
25
|
href="#"
|
25
26
|
@click.prevent
|
26
|
-
:title="
|
27
|
+
:title="validationTooltip"
|
27
28
|
:aria-errormessage="tooltipId"
|
28
29
|
aria-live="assertive"
|
29
30
|
:id="tooltipId">
|
@@ -31,6 +32,7 @@
|
|
31
32
|
<CmdIcon :iconClass="getStatusIconClass"/>
|
32
33
|
<!-- end CmdIcon -->
|
33
34
|
</a>
|
35
|
+
<!-- end status-icon (linked with tooltip) -->
|
34
36
|
|
35
37
|
<!-- begin CmdTooltipForFormElements -->
|
36
38
|
<CmdTooltipForFormElements
|
@@ -51,7 +53,9 @@
|
|
51
53
|
<!-- begin default/selected-option -->
|
52
54
|
<a href="#" @click.prevent="toggleOptions" @blur="onBlur" :title="optionIcon?.tooltip">
|
53
55
|
<!-- begin show flag -->
|
54
|
-
<img v-if="type === 'country' && optionCountry"
|
56
|
+
<img v-if="type === 'country' && optionCountry"
|
57
|
+
:src="pathFlag(optionCountry)"
|
58
|
+
:alt="optionCountry"
|
55
59
|
:class="['flag', optionCountry]"/>
|
56
60
|
<!-- end show flag -->
|
57
61
|
|
@@ -67,7 +71,7 @@
|
|
67
71
|
<!-- end optional icon -->
|
68
72
|
|
69
73
|
<!-- begin text -->
|
70
|
-
<span v-if="optionName" class="option-name"
|
74
|
+
<span v-if="optionName" class="option-name">{{ optionName }}</span>
|
71
75
|
<!-- end text -->
|
72
76
|
|
73
77
|
<!-- begin custom dropdown-icon -->
|
@@ -175,7 +179,8 @@
|
|
175
179
|
<script>
|
176
180
|
// import mixins
|
177
181
|
import I18n from "../mixins/I18n"
|
178
|
-
import
|
182
|
+
import DefaultMessagePropertiesFakeSelect from "../mixins/CmdFakeSelect/DefaultMessageProperties"
|
183
|
+
import DefaultMessagePropertiesFormElement from "../mixins/CmdFormElement/DefaultMessageProperties"
|
179
184
|
import FieldValidation from "../mixins/FieldValidation"
|
180
185
|
import Identifier from "../mixins/Identifier"
|
181
186
|
import Tooltip from "../mixins/Tooltip"
|
@@ -185,7 +190,8 @@ export default {
|
|
185
190
|
inheritAttrs: false,
|
186
191
|
mixins: [
|
187
192
|
I18n,
|
188
|
-
|
193
|
+
DefaultMessagePropertiesFakeSelect,
|
194
|
+
DefaultMessagePropertiesFormElement,
|
189
195
|
FieldValidation,
|
190
196
|
Identifier,
|
191
197
|
Tooltip
|
@@ -194,7 +200,6 @@ export default {
|
|
194
200
|
return {
|
195
201
|
showOptions: false,
|
196
202
|
validationStatus: "",
|
197
|
-
limitWidthStyle: null,
|
198
203
|
allOptionsSelected: false
|
199
204
|
}
|
200
205
|
},
|
@@ -424,16 +429,6 @@ export default {
|
|
424
429
|
return this.getMessage("cmdfakeselect.linktext.select_all_options")
|
425
430
|
}
|
426
431
|
},
|
427
|
-
mounted() {
|
428
|
-
//this.$nextTick(this.limitWidth)
|
429
|
-
//setTimeout(this.limitWidth, 250)
|
430
|
-
const hnd = setInterval(() => {
|
431
|
-
if (this.$refs.fakeselect) {
|
432
|
-
clearInterval(hnd)
|
433
|
-
this.limitWidth()
|
434
|
-
}
|
435
|
-
}, 100)
|
436
|
-
},
|
437
432
|
methods: {
|
438
433
|
toggleAllOptions() {
|
439
434
|
this.validationStatus = "success"
|
@@ -450,12 +445,6 @@ export default {
|
|
450
445
|
|
451
446
|
this.$emit("update:modelValue", checkboxValues)
|
452
447
|
},
|
453
|
-
limitWidth() {
|
454
|
-
if (this.$refs.fakeselect) {
|
455
|
-
const outerWidth = this.$refs.fakeselect.offsetWidth
|
456
|
-
this.limitWidthStyle = {width: outerWidth / 100 * 90 + "px"}
|
457
|
-
}
|
458
|
-
},
|
459
448
|
toggleOptions() {
|
460
449
|
if (this.$attrs.disabled !== 'disabled') {
|
461
450
|
this.showOptions = !this.showOptions
|
@@ -566,6 +555,10 @@ export default {
|
|
566
555
|
color: var(--color-scheme-text-color);
|
567
556
|
border-radius: var(--default-border-radius);
|
568
557
|
|
558
|
+
img {
|
559
|
+
flex-shrink: 0;
|
560
|
+
}
|
561
|
+
|
569
562
|
span, [class*="icon"] {
|
570
563
|
color: var(--color-scheme-text-color);
|
571
564
|
}
|
@@ -474,6 +474,7 @@ export default FancyBox
|
|
474
474
|
<style>
|
475
475
|
/* begin cmd-fancybox ---------------------------------------------------------------------------------------- */
|
476
476
|
.cmd-fancybox {
|
477
|
+
position: fixed;
|
477
478
|
z-index: 500;
|
478
479
|
flex-direction: column;
|
479
480
|
padding: var(--default-padding);
|
@@ -31,10 +31,13 @@
|
|
31
31
|
:nativeButton="item.nativeButton"
|
32
32
|
/>
|
33
33
|
<!-- end loop for formElements -->
|
34
|
-
|
34
|
+
|
35
|
+
<!-- begin submit-button -->
|
36
|
+
<button v-if="submitButton" :class="['button', {primary: submitButton.primary}]" :type="submitButton.type">
|
35
37
|
<span v-if="submitButton.iconClass" :class="submitButton.iconClass"></span>
|
36
38
|
<span v-if="submitButton.text">{{ submitButton.text }}</span>
|
37
39
|
</button>
|
40
|
+
<!-- end submit-button -->
|
38
41
|
</fieldset>
|
39
42
|
|
40
43
|
<!-- begin button-row-slot-content -->
|
@@ -128,7 +131,9 @@ export default {
|
|
128
131
|
default() {
|
129
132
|
return {
|
130
133
|
iconClass: "icon-check",
|
131
|
-
text: "Submit"
|
134
|
+
text: "Submit",
|
135
|
+
type: "submit",
|
136
|
+
primary: true
|
132
137
|
}
|
133
138
|
}
|
134
139
|
}
|
@@ -22,12 +22,17 @@
|
|
22
22
|
:class="['label-text', { hidden: !showLabel }]">
|
23
23
|
<span>
|
24
24
|
<template v-if="labelText">{{ labelText }}</template>
|
25
|
+
|
25
26
|
<!-- begin slot 'labeltext' -->
|
26
27
|
<slot v-else name="labeltext"/>
|
27
28
|
<!-- end slot 'labeltext' -->
|
28
|
-
|
29
|
+
|
30
|
+
<!-- begin required asterisk -->
|
31
|
+
<sup v-if="$attrs.required !== undefined" aria-hidden="true">*</sup>
|
32
|
+
<!-- end required asterisk -->
|
29
33
|
</span>
|
30
34
|
|
35
|
+
<!-- begin status-icon (linked with tooltip) -->
|
31
36
|
<a v-if="($attrs.required || inputRequirements.length) && showStatusIcon"
|
32
37
|
href="#"
|
33
38
|
@click.prevent
|
@@ -39,6 +44,7 @@
|
|
39
44
|
<CmdIcon :iconClass="getStatusIconClass"/>
|
40
45
|
<!-- end CmdIcon -->
|
41
46
|
</a>
|
47
|
+
<!-- end status-icon (linked with tooltip) -->
|
42
48
|
|
43
49
|
<!-- begin CmdTooltipForFormElements -->
|
44
50
|
<CmdTooltipForFormElements
|
@@ -875,8 +881,11 @@ export default {
|
|
875
881
|
}
|
876
882
|
|
877
883
|
&.has-state, & + .cmd-tooltip {
|
878
|
-
|
879
|
-
|
884
|
+
|
885
|
+
&.error {
|
886
|
+
* {
|
887
|
+
--status-color: var(--error-color);
|
888
|
+
}
|
880
889
|
}
|
881
890
|
|
882
891
|
::placeholder {
|
@@ -14,9 +14,9 @@
|
|
14
14
|
|
15
15
|
<!-- begin label -->
|
16
16
|
<span v-show="showLabel" class="label-text">
|
17
|
-
<span :id="htmlId">{{ labelText }}<sup v-if="required">*</sup></span>
|
17
|
+
<span :id="htmlId">{{ labelText }}<sup v-if="required" aria-hidden="true">*</sup></span>
|
18
18
|
|
19
|
-
<!-- begin status-icon -->
|
19
|
+
<!-- begin status-icon (linked with tooltip) -->
|
20
20
|
<a v-if="(required || inputRequirements.length > 0) && showStatusIcon"
|
21
21
|
href="#"
|
22
22
|
@click.prevent
|
@@ -28,7 +28,7 @@
|
|
28
28
|
<CmdIcon :iconClass="getStatusIconClass"/>
|
29
29
|
<!-- end CmdIcon -->
|
30
30
|
</a>
|
31
|
-
<!-- end status-icon -->
|
31
|
+
<!-- end status-icon (linked with tooltip) -->
|
32
32
|
|
33
33
|
<!-- begin CmdTooltipForFormElements -->
|
34
34
|
<CmdTooltipForFormElements
|
@@ -87,9 +87,11 @@
|
|
87
87
|
import FieldValidation from "../mixins/FieldValidation.js"
|
88
88
|
import Identifier from "../mixins/Identifier"
|
89
89
|
import Tooltip from "../mixins/Tooltip.js"
|
90
|
+
import DefaultMessageProperties from "../mixins/CmdFormElement/DefaultMessageProperties"
|
90
91
|
|
91
92
|
export default {
|
92
93
|
mixins: [
|
94
|
+
DefaultMessageProperties,
|
93
95
|
FieldValidation,
|
94
96
|
Identifier,
|
95
97
|
Tooltip
|
@@ -240,7 +242,7 @@ export default {
|
|
240
242
|
updateStatus() {
|
241
243
|
if (this.required) {
|
242
244
|
if (this.inputValue?.length) {
|
243
|
-
this.validationStatus = ""
|
245
|
+
this.validationStatus = "success"
|
244
246
|
return
|
245
247
|
}
|
246
248
|
this.validationStatus = "error"
|
@@ -1,5 +1,12 @@
|
|
1
1
|
<template>
|
2
|
-
<div :class="['cmd-list-of-links',
|
2
|
+
<div :class="['cmd-list-of-links',
|
3
|
+
{
|
4
|
+
box: styleAsBox, horizontal: orientation === 'horizontal',
|
5
|
+
'section-anchors': sectionAnchors,
|
6
|
+
'large-icons': largeIcons,
|
7
|
+
'show-list-style-items': showListStyleItems
|
8
|
+
}
|
9
|
+
]">
|
3
10
|
<!-- begin cmd-headline -->
|
4
11
|
<CmdHeadline
|
5
12
|
v-if="cmdHeadline?.headlineText || editModeContext"
|
@@ -9,6 +16,7 @@
|
|
9
16
|
|
10
17
|
<!-- begin list of links -->
|
11
18
|
<ul :class="['flex-container', {'no-gap': !useGap}, 'align-' + align, setStretchClass]">
|
19
|
+
<!-- begin CmdListOfLinksItem-->
|
12
20
|
<CmdListOfLinksItem
|
13
21
|
v-if="!editModeContext"
|
14
22
|
v-for="(link, index) in links"
|
@@ -16,6 +24,7 @@
|
|
16
24
|
:class="{'active': sectionAnchors && activeSection === index}"
|
17
25
|
:link="link"
|
18
26
|
/>
|
27
|
+
<!-- end CmdListOfLinksItem-->
|
19
28
|
|
20
29
|
<!-- begin edit-mode -->
|
21
30
|
<li v-else>
|
@@ -31,11 +40,14 @@
|
|
31
40
|
:componentPath="['props', 'links', index]"
|
32
41
|
:itemProvider="itemProvider"
|
33
42
|
>
|
43
|
+
<!-- begin CmdListOfLinksItem-->
|
34
44
|
<CmdListOfLinksItem
|
35
45
|
:class="{'active': sectionAnchors && activeSection === index}"
|
36
46
|
:link="link"
|
37
47
|
/>
|
48
|
+
<!-- end CmdListOfLinksItem-->
|
38
49
|
</EditComponentWrapper>
|
50
|
+
|
39
51
|
<button v-if="links.length === 0" type="button" class="button confirm small" @click="onAddItem">
|
40
52
|
<span class="icon-plus"></span>
|
41
53
|
<span>Add new entry</span>
|
@@ -48,7 +60,10 @@
|
|
48
60
|
</template>
|
49
61
|
|
50
62
|
<script>
|
63
|
+
// import mixins (editMode only)
|
51
64
|
import EditMode from "../mixins/EditMode.vue"
|
65
|
+
|
66
|
+
// import utils (editMode only)
|
52
67
|
import {buildComponentPath, updateHandlerProvider} from "../utils/editmode.js"
|
53
68
|
|
54
69
|
export default {
|
@@ -97,6 +112,15 @@ export default {
|
|
97
112
|
type: Number,
|
98
113
|
default: 0
|
99
114
|
},
|
115
|
+
/**
|
116
|
+
* toggle list-style-items visibility
|
117
|
+
*
|
118
|
+
* @affectsStyling: true
|
119
|
+
*/
|
120
|
+
showListStyleItems: {
|
121
|
+
type: Boolean,
|
122
|
+
default: false
|
123
|
+
},
|
100
124
|
/**
|
101
125
|
* set horizontal alignment
|
102
126
|
*
|
@@ -200,6 +224,19 @@ export default {
|
|
200
224
|
&.align-right li {
|
201
225
|
text-align: right;
|
202
226
|
}
|
227
|
+
|
228
|
+
ul {
|
229
|
+
display: flex;
|
230
|
+
flex-direction: column;
|
231
|
+
margin-left: calc(var(--default-padding) * 2);
|
232
|
+
}
|
233
|
+
}
|
234
|
+
|
235
|
+
&.show-list-style-items {
|
236
|
+
li {
|
237
|
+
list-style-type: disc;
|
238
|
+
margin-left: 1.7rem;
|
239
|
+
}
|
203
240
|
}
|
204
241
|
|
205
242
|
&.horizontal {
|
@@ -210,6 +247,7 @@ export default {
|
|
210
247
|
> li {
|
211
248
|
flex: none;
|
212
249
|
display: flex;
|
250
|
+
flex-direction: column;
|
213
251
|
}
|
214
252
|
|
215
253
|
&.align-right {
|
@@ -224,20 +262,42 @@ export default {
|
|
224
262
|
}
|
225
263
|
|
226
264
|
&.large-icons {
|
227
|
-
li
|
228
|
-
|
229
|
-
|
230
|
-
|
231
|
-
|
232
|
-
|
233
|
-
|
265
|
+
li {
|
266
|
+
list-style-type: none;
|
267
|
+
|
268
|
+
a {
|
269
|
+
display: flex;
|
270
|
+
flex-direction: column;
|
271
|
+
gap: calc(var(--default-gap) / 4);
|
272
|
+
text-decoration: none;
|
273
|
+
align-items: center;
|
274
|
+
justify-content: center;
|
275
|
+
|
276
|
+
span {
|
277
|
+
margin: 0;
|
278
|
+
}
|
234
279
|
|
235
|
-
|
236
|
-
|
280
|
+
[class*="icon-"] {
|
281
|
+
font-size: 5rem;
|
282
|
+
}
|
237
283
|
}
|
284
|
+
}
|
285
|
+
}
|
286
|
+
}
|
287
|
+
</style>
|
238
288
|
|
239
|
-
|
240
|
-
|
289
|
+
<style lang="scss">
|
290
|
+
@import '../assets/styles/variables';
|
291
|
+
|
292
|
+
@media only screen and (max-width: $medium-max-width) {
|
293
|
+
.cmd-list-of-links {
|
294
|
+
> ul {
|
295
|
+
ul {
|
296
|
+
gap: calc(var(--default-gap) / 2);
|
297
|
+
|
298
|
+
> li:first-child {
|
299
|
+
margin-top: calc(var(--default-gap) / 2);
|
300
|
+
}
|
241
301
|
}
|
242
302
|
}
|
243
303
|
}
|