comand-component-library 4.0.29 → 4.0.31
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/comand-component-library.js +2565 -2354
- package/dist/comand-component-library.umd.cjs +7 -7
- package/dist/style.css +1 -1
- package/package.json +1 -1
- package/src/ComponentLibrary.vue +36 -3
- package/src/assets/data/box-user.json +17 -6
- package/src/assets/data/listOfComponents.json +1 -0
- package/src/componentSettingsDataAndControls.vue +25 -2
- package/src/components/CmdBankAccountData.vue +38 -22
- package/src/components/CmdBox.vue +59 -29
- package/src/components/CmdContainer.vue +18 -0
- package/src/components/CmdCookieDisclaimer.vue +134 -119
- package/src/components/CmdImage.vue +10 -4
- package/src/components/CmdLink.vue +108 -0
- package/src/components/CmdSlideshow.vue +7 -6
- package/src/components/CmdSwitchLanguage.vue +1 -1
- package/src/components/CmdThumbnailScroller.vue +1 -1
- package/src/index.js +1 -0
|
@@ -1,29 +1,37 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div class="cmd-bank-account-data">
|
|
3
|
-
<!-- begin
|
|
4
|
-
<
|
|
5
|
-
|
|
3
|
+
<!-- begin slot -->
|
|
4
|
+
<template v-if="useSlot">
|
|
5
|
+
<slot></slot>
|
|
6
|
+
</template>
|
|
7
|
+
<!-- end slot -->
|
|
6
8
|
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
<
|
|
10
|
-
|
|
11
|
-
<dd v-if="allowCopyByClick && entry.allowCopy">
|
|
12
|
-
<span>{{ entry.value }}</span>
|
|
13
|
-
<a href="#" @click.prevent="copyToClipboard(entry.value)" :title="iconCopy.tooltip">
|
|
14
|
-
<!-- begin CmdIcon -->
|
|
15
|
-
<CmdIcon :iconClass="iconCopy.iconClass" :type="iconCopy.iconType" />
|
|
16
|
-
<!-- end CmdIcon -->
|
|
17
|
-
</a>
|
|
18
|
-
</dd>
|
|
19
|
-
<dd v-else :key="index">{{ entry.value }}</dd>
|
|
20
|
-
</template>
|
|
21
|
-
</dl>
|
|
22
|
-
<!-- end account data -->
|
|
9
|
+
<template v-else>
|
|
10
|
+
<!-- begin CmdHeadline -->
|
|
11
|
+
<CmdHeadline v-if="cmdHeadline" v-bind="cmdHeadline"/>
|
|
12
|
+
<!-- end CmdHeadline -->
|
|
23
13
|
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
14
|
+
<!-- begin account data -->
|
|
15
|
+
<dl>
|
|
16
|
+
<template v-for="(entry, index) in accountData" :key="index">
|
|
17
|
+
<dt>{{ entry.text }}</dt>
|
|
18
|
+
<dd v-if="allowCopyByClick && entry.allowCopy">
|
|
19
|
+
<span>{{ entry.value }}</span>
|
|
20
|
+
<a href="#" @click.prevent="copyToClipboard(entry.value)" :title="iconCopy.tooltip">
|
|
21
|
+
<!-- begin CmdIcon -->
|
|
22
|
+
<CmdIcon :iconClass="iconCopy.iconClass" :type="iconCopy.iconType"/>
|
|
23
|
+
<!-- end CmdIcon -->
|
|
24
|
+
</a>
|
|
25
|
+
</dd>
|
|
26
|
+
<dd v-else :key="index">{{ entry.value }}</dd>
|
|
27
|
+
</template>
|
|
28
|
+
</dl>
|
|
29
|
+
<!-- end account data -->
|
|
30
|
+
|
|
31
|
+
<!-- begin additional information -->
|
|
32
|
+
<p v-if="additionalInformation">{{ additionalInformation }}</p>
|
|
33
|
+
<!-- end additional information -->
|
|
34
|
+
</template>
|
|
27
35
|
</div>
|
|
28
36
|
</template>
|
|
29
37
|
|
|
@@ -31,6 +39,13 @@
|
|
|
31
39
|
export default {
|
|
32
40
|
name: "CmdBankAccountData",
|
|
33
41
|
props: {
|
|
42
|
+
/**
|
|
43
|
+
* activate if you want to use slot instead for given structure
|
|
44
|
+
*/
|
|
45
|
+
useSlot: {
|
|
46
|
+
type: Boolean,
|
|
47
|
+
default: false
|
|
48
|
+
},
|
|
34
49
|
/**
|
|
35
50
|
* bank account data
|
|
36
51
|
*
|
|
@@ -102,5 +117,6 @@ export default {
|
|
|
102
117
|
}
|
|
103
118
|
}
|
|
104
119
|
}
|
|
120
|
+
|
|
105
121
|
/* end cmd-bank-account-data ---------------------------------------------------------------------------------------- */
|
|
106
122
|
</style>
|
|
@@ -58,6 +58,7 @@
|
|
|
58
58
|
|
|
59
59
|
<!-- begin box-body -->
|
|
60
60
|
<div v-show="open" :class="['box-body', boxBodyClass]" aria-expanded="true" role="article">
|
|
61
|
+
<!-- begin content given slot -->
|
|
61
62
|
<div v-if="useSlots?.includes('body')"
|
|
62
63
|
class="inner-box-body-wrapper"
|
|
63
64
|
:class="{'default-padding': useDefaultPadding, 'allow-scroll': allowContentToScroll}"
|
|
@@ -67,12 +68,14 @@
|
|
|
67
68
|
<!-- begin slot 'body' -->
|
|
68
69
|
<slot name="body">
|
|
69
70
|
<transition-group :name="toggleTransition">
|
|
70
|
-
<p
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
71
|
+
<p
|
|
72
|
+
:class="{
|
|
73
|
+
'cutoff-text': cutoffTextLines > 0,
|
|
74
|
+
'fade-last-line': fadeLastLine && !showCutOffText,
|
|
75
|
+
'show-text' : showCutOffText
|
|
76
|
+
}"
|
|
77
|
+
v-html='textBody'
|
|
78
|
+
>
|
|
76
79
|
</p>
|
|
77
80
|
<a v-if="cutoffTextLines > 0" href="#" @click.prevent="toggleCutOffText">
|
|
78
81
|
{{
|
|
@@ -83,11 +86,17 @@
|
|
|
83
86
|
</slot>
|
|
84
87
|
<!-- end slot 'body' -->
|
|
85
88
|
</div>
|
|
89
|
+
<!-- end content given slot -->
|
|
86
90
|
|
|
87
|
-
|
|
91
|
+
<!-- begin content given by properties -->
|
|
92
|
+
<div v-else
|
|
93
|
+
class="inner-box-body-wrapper"
|
|
94
|
+
:class="{'allow-scroll': allowContentToScroll}"
|
|
95
|
+
>
|
|
88
96
|
<img v-if="image" :src="image.src" :alt="image.altText"/>
|
|
89
97
|
|
|
90
|
-
<div v-
|
|
98
|
+
<div v-if="textBody"
|
|
99
|
+
:class="{'default-padding': useDefaultPadding, 'allow-scroll': allowContentToScroll}">
|
|
91
100
|
<!-- begin CmdHeadline -->
|
|
92
101
|
<CmdHeadline
|
|
93
102
|
v-if="cmdHeadline?.headlineText && repeatHeadlineInBoxBody"
|
|
@@ -95,9 +104,18 @@
|
|
|
95
104
|
/>
|
|
96
105
|
<!-- end CmdHeadline -->
|
|
97
106
|
|
|
98
|
-
|
|
107
|
+
<!-- begin textBody -->
|
|
108
|
+
<p v-if="textBody" v-html="textBody"></p>
|
|
109
|
+
<!-- end textBody -->
|
|
99
110
|
</div>
|
|
100
|
-
|
|
111
|
+
|
|
112
|
+
<!-- begin additionalLink in box-footer -->
|
|
113
|
+
<div v-if="cmdLink?.linkType" class="box-footer">
|
|
114
|
+
<CmdLink v-bind="cmdLink" />
|
|
115
|
+
</div>
|
|
116
|
+
<!-- end additionalLink in box-footer -->
|
|
117
|
+
</div>
|
|
118
|
+
<!-- end content given by properties -->
|
|
101
119
|
</div>
|
|
102
120
|
<!-- end box-body -->
|
|
103
121
|
|
|
@@ -159,18 +177,20 @@
|
|
|
159
177
|
<div class="box-header flex-container vertical">
|
|
160
178
|
<figure v-if="user.image">
|
|
161
179
|
<img :src="user.image.src" :alt="user.image.alt"/>
|
|
162
|
-
<figcaption>{{ user.name }}
|
|
180
|
+
<figcaption v-if="!rowView" class="user-name">{{ user.name }}<span v-if="user.age" class="user-age"> ({{
|
|
181
|
+
user.age
|
|
182
|
+
}})</span></figcaption>
|
|
163
183
|
</figure>
|
|
164
184
|
<div v-else>
|
|
165
185
|
<span :class="defaultProfileIconClass" :title="user.name"></span>
|
|
166
|
-
<p v-if="!rowView">{{ user.name }}</p>
|
|
186
|
+
<p v-if="!rowView" class="user-name">{{ user.name }}</p>
|
|
167
187
|
</div>
|
|
168
188
|
</div>
|
|
169
189
|
<!-- end box-header -->
|
|
170
190
|
|
|
171
191
|
<!-- begin box-body -->
|
|
172
192
|
<div class="box-body">
|
|
173
|
-
<p v-if="rowView">{{ user.name }}</p>
|
|
193
|
+
<p v-if="rowView" class="user-name">{{ user.name }}</p>
|
|
174
194
|
<p v-if="user.profession">{{ user.profession }}</p>
|
|
175
195
|
<p v-if="user.position">{{ user.position }}</p>
|
|
176
196
|
<p v-if="user.description" class="description">{{ user.description }}</p>
|
|
@@ -178,7 +198,7 @@
|
|
|
178
198
|
<!-- end box-body -->
|
|
179
199
|
|
|
180
200
|
<!-- begin user-tags -->
|
|
181
|
-
<ul
|
|
201
|
+
<ul v-if="user.tags && user.tags.length" class="tags">
|
|
182
202
|
<li v-for="(tag, index) in user.tags" :key="index">
|
|
183
203
|
{{ tag }}
|
|
184
204
|
</li>
|
|
@@ -437,6 +457,13 @@ export default {
|
|
|
437
457
|
cmdHeadline: {
|
|
438
458
|
type: Object,
|
|
439
459
|
required: false
|
|
460
|
+
},
|
|
461
|
+
/**
|
|
462
|
+
* properties for CmdLink-component to set additional link at bottom of box
|
|
463
|
+
*/
|
|
464
|
+
cmdLink: {
|
|
465
|
+
type: Object,
|
|
466
|
+
default: {}
|
|
440
467
|
}
|
|
441
468
|
},
|
|
442
469
|
/*
|
|
@@ -474,11 +501,11 @@ export default {
|
|
|
474
501
|
// set focus on first input if box contains form-elements
|
|
475
502
|
setFocus() {
|
|
476
503
|
this.$nextTick(() => {
|
|
477
|
-
if(this.open) {
|
|
478
|
-
|
|
504
|
+
if (this.open) {
|
|
505
|
+
const firstFormElement = this.$refs.cmdBox.querySelector(":is(input, select, textarea):first-of-type")
|
|
479
506
|
|
|
480
|
-
if(firstFormElement) {
|
|
481
|
-
|
|
507
|
+
if (firstFormElement) {
|
|
508
|
+
firstFormElement.focus()
|
|
482
509
|
}
|
|
483
510
|
}
|
|
484
511
|
})
|
|
@@ -542,7 +569,7 @@ export default {
|
|
|
542
569
|
overflow-y: auto;
|
|
543
570
|
|
|
544
571
|
& * {
|
|
545
|
-
|
|
572
|
+
flex-shrink: 0;
|
|
546
573
|
}
|
|
547
574
|
}
|
|
548
575
|
}
|
|
@@ -767,6 +794,15 @@ export default {
|
|
|
767
794
|
|
|
768
795
|
/* boxType === 'user' */
|
|
769
796
|
&.user {
|
|
797
|
+
.user-name {
|
|
798
|
+
color: var(--color-scheme-text-color);
|
|
799
|
+
font-size: 2rem;
|
|
800
|
+
}
|
|
801
|
+
|
|
802
|
+
.user-age {
|
|
803
|
+
font-size: var(--default-font-size);
|
|
804
|
+
}
|
|
805
|
+
|
|
770
806
|
> .box-header {
|
|
771
807
|
--default-icon-size: 6rem;
|
|
772
808
|
--box-header-text-color: var(--primary-color);
|
|
@@ -779,7 +815,7 @@ export default {
|
|
|
779
815
|
|
|
780
816
|
img, > div:first-child > [class*="icon-"] {
|
|
781
817
|
display: table;
|
|
782
|
-
margin: 0 auto var(--default-margin) auto;
|
|
818
|
+
margin: 0 auto var(--default-margin) auto !important;
|
|
783
819
|
padding: calc(var(--default-padding) * 3);
|
|
784
820
|
border-radius: var(--full-circle);
|
|
785
821
|
background: var(--box-header-background);
|
|
@@ -885,14 +921,6 @@ export default {
|
|
|
885
921
|
}
|
|
886
922
|
|
|
887
923
|
&.row-view {
|
|
888
|
-
[class*="icon"] {
|
|
889
|
-
--default-icon-size: 3rem;
|
|
890
|
-
}
|
|
891
|
-
|
|
892
|
-
.box-header > div:first-child > [class*="icon-"] {
|
|
893
|
-
padding: calc(var(--default-padding) * 1.5);
|
|
894
|
-
}
|
|
895
|
-
|
|
896
924
|
.box-body p {
|
|
897
925
|
text-align: left;
|
|
898
926
|
}
|
|
@@ -920,4 +948,6 @@ export default {
|
|
|
920
948
|
}
|
|
921
949
|
|
|
922
950
|
/* end cmd-box ------------------------------------------------------------------------------------------ */
|
|
923
|
-
</style>
|
|
951
|
+
</style>
|
|
952
|
+
<script setup>
|
|
953
|
+
</script>
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div class="cmd-container">
|
|
3
|
+
<div v-if="contentAboveSlot" v-html="contentAboveSlot"></div>
|
|
3
4
|
<slot></slot>
|
|
5
|
+
<div v-if="contentBelowSlot" v-html="contentBelowSlot"></div>
|
|
4
6
|
</div>
|
|
5
7
|
</template>
|
|
6
8
|
|
|
@@ -9,6 +11,22 @@ import EditMode from "../mixins/EditMode.vue"
|
|
|
9
11
|
export default {
|
|
10
12
|
name: "CmdContainer",
|
|
11
13
|
mixins: [EditMode],
|
|
14
|
+
props: {
|
|
15
|
+
/**
|
|
16
|
+
* define html-content to display above slot-content
|
|
17
|
+
*/
|
|
18
|
+
contentAboveSlot: {
|
|
19
|
+
type: String,
|
|
20
|
+
required: false
|
|
21
|
+
},
|
|
22
|
+
/**
|
|
23
|
+
* define html-content to display below slot-content
|
|
24
|
+
*/
|
|
25
|
+
contentBelowSlot: {
|
|
26
|
+
type: String,
|
|
27
|
+
required: false
|
|
28
|
+
}
|
|
29
|
+
},
|
|
12
30
|
methods: {
|
|
13
31
|
addHandlerProvider() {
|
|
14
32
|
return ""
|
|
@@ -1,130 +1,138 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<transition name="fade">
|
|
3
3
|
<div class="cmd-cookie-disclaimer flex-container vertical">
|
|
4
|
-
<!-- begin
|
|
5
|
-
<
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
/>
|
|
10
|
-
<!-- end CmdHeadline -->
|
|
4
|
+
<!-- begin slot -->
|
|
5
|
+
<template v-if="useSlot">
|
|
6
|
+
<slot></slot>
|
|
7
|
+
</template>
|
|
8
|
+
<!-- end slot -->
|
|
11
9
|
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
:headline-level="cmdBoxRequiredCookies?.headlineLevel "
|
|
21
|
-
/>
|
|
22
|
-
<!-- end CmdHeadline -->
|
|
10
|
+
<template v-else>
|
|
11
|
+
<!-- begin CmdHeadline -->
|
|
12
|
+
<CmdHeadline
|
|
13
|
+
v-if="cmdHeadlineCookieDisclaimer?.show && cmdHeadlineCookieDisclaimer?.headlineText && cmdHeadlineCookieDisclaimer?.headlineLevel"
|
|
14
|
+
:headlineText="cmdHeadlineCookieDisclaimer.headlineText"
|
|
15
|
+
:headlineLevel="cmdHeadlineCookieDisclaimer.headlineLevel"
|
|
16
|
+
/>
|
|
17
|
+
<!-- end CmdHeadline -->
|
|
23
18
|
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
:
|
|
39
|
-
:
|
|
40
|
-
:
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
19
|
+
<!-- begin slot for cookie-options -->
|
|
20
|
+
<slot name="cookie-options">
|
|
21
|
+
<!-- begin required cookies -->
|
|
22
|
+
<div v-if="cookieOptions?.required" class="flex-container vertical">
|
|
23
|
+
<!-- begin CmdHeadline -->
|
|
24
|
+
<CmdHeadline
|
|
25
|
+
v-if="cmdBoxRequiredCookies?.showHeadline"
|
|
26
|
+
:headline-text="cmdBoxRequiredCookies?.headlineText"
|
|
27
|
+
:headline-level="cmdBoxRequiredCookies?.headlineLevel "
|
|
28
|
+
/>
|
|
29
|
+
<!-- end CmdHeadline -->
|
|
30
|
+
|
|
31
|
+
<!-- begin CmdBox -->
|
|
32
|
+
<CmdBox v-for="(cookie, index) in cookieOptions.required.cookies || []"
|
|
33
|
+
:useSlots="['header', 'body']"
|
|
34
|
+
:collapsible="cmdBoxRequiredCookies?.collapsible"
|
|
35
|
+
:key="index"
|
|
36
|
+
>
|
|
37
|
+
<template v-slot:header>
|
|
38
|
+
<!-- begin CmdFormElement -->
|
|
39
|
+
<CmdFormElement
|
|
40
|
+
element="input"
|
|
41
|
+
type="checkbox"
|
|
42
|
+
v-model="acceptedCookies"
|
|
43
|
+
:inputValue="cookie.value"
|
|
44
|
+
:labelText="cookie.labelText"
|
|
45
|
+
:disabled="cookie.disabled"
|
|
46
|
+
:id="cookie.id"
|
|
47
|
+
:toggleSwitch="true"
|
|
48
|
+
:title="getMessage('cmdcookiedisclaimer.title.cookie_cannot_be_disabled')"
|
|
49
|
+
/>
|
|
50
|
+
<!-- end CmdFormElement -->
|
|
51
|
+
</template>
|
|
52
|
+
<template v-slot:body>
|
|
53
|
+
<p v-if="cookie.description">{{ cookie.description }}</p>
|
|
54
|
+
<p v-if="cookie.linkDataPrivacy">
|
|
55
|
+
{{ cookie.linkDataPrivacy.label }}
|
|
56
|
+
<a @click="openDataPrivacy"
|
|
57
|
+
:href="cookie.linkDataPrivacy.link"
|
|
58
|
+
:target="cookie.linkDataPrivacy.target">
|
|
59
|
+
{{ cookie.linkDataPrivacy.linkText }}
|
|
60
|
+
</a>
|
|
61
|
+
</p>
|
|
62
|
+
<div v-if="dataPrivacyContent" v-html="dataPrivacyContent"></div>
|
|
63
|
+
</template>
|
|
64
|
+
</CmdBox>
|
|
65
|
+
<!-- end CmdBox -->
|
|
66
|
+
</div>
|
|
67
|
+
<!-- end required cookies -->
|
|
61
68
|
|
|
62
|
-
|
|
69
|
+
<hr/>
|
|
63
70
|
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
+
<!-- begin optional cookies -->
|
|
72
|
+
<div v-if="cookieOptions?.optional" class="flex-container vertical">
|
|
73
|
+
<!-- begin CmdHeadline -->
|
|
74
|
+
<CmdHeadline
|
|
75
|
+
v-if="cmdBoxOptionalCookies?.showHeadline"
|
|
76
|
+
:headline-text="cmdBoxOptionalCookies?.headlineText"
|
|
77
|
+
:headline-level="cmdBoxOptionalCookies?.headlineLevel
|
|
71
78
|
"/>
|
|
72
|
-
|
|
79
|
+
<!-- end CmdHeadline -->
|
|
73
80
|
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
81
|
+
<!-- begin CmdBox -->
|
|
82
|
+
<CmdBox v-for="(cookie, index) in cookieOptions.optional.cookies || []"
|
|
83
|
+
:useSlots="['header', 'body']"
|
|
84
|
+
:collapsible="cmdBoxOptionalCookies?.collapsible"
|
|
85
|
+
:key="index"
|
|
86
|
+
>
|
|
87
|
+
<template v-slot:header>
|
|
88
|
+
<!-- begin CmdFormElement -->
|
|
89
|
+
<CmdFormElement
|
|
90
|
+
element="input"
|
|
91
|
+
type="checkbox"
|
|
92
|
+
v-model="acceptedCookies"
|
|
93
|
+
:inputValue="cookie.value"
|
|
94
|
+
:labelText="cookie.labelText"
|
|
95
|
+
:disabled="cookie.disabled"
|
|
96
|
+
:id="cookie.id"
|
|
97
|
+
:toggleSwitch="true"
|
|
98
|
+
:title="getMessage('cmdcookiedisclaimer.title.toggle_to_accept_cookie')"
|
|
99
|
+
/>
|
|
100
|
+
<!-- end CmdFormElement -->
|
|
101
|
+
</template>
|
|
102
|
+
<template v-slot:body>
|
|
103
|
+
<p v-if="cookie.description">{{ cookie.description }}</p>
|
|
104
|
+
<p v-if="cookie.linkDataPrivacy">
|
|
105
|
+
{{ cookie.linkDataPrivacy.label }}
|
|
106
|
+
<a @click="openDataPrivacy"
|
|
107
|
+
:href="cookie.linkDataPrivacy.link"
|
|
108
|
+
:target="cookie.linkDataPrivacy.target">
|
|
109
|
+
{{ cookie.linkDataPrivacy.linkText }}
|
|
110
|
+
</a>
|
|
111
|
+
</p>
|
|
112
|
+
<div v-if="dataPrivacyContent" v-html="dataPrivacyContent"></div>
|
|
113
|
+
</template>
|
|
114
|
+
</CmdBox>
|
|
115
|
+
<!-- end CmdBox -->
|
|
116
|
+
</div>
|
|
117
|
+
<!-- end optional cookies -->
|
|
118
|
+
</slot>
|
|
119
|
+
<!-- end slot for cookie-options -->
|
|
113
120
|
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
121
|
+
<!-- begin slot for privacy-text -->
|
|
122
|
+
<slot name="privacy-text"></slot>
|
|
123
|
+
<!-- end slot for privacy-text -->
|
|
117
124
|
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
125
|
+
<!-- begin button-wrapper for 'accept'-buttons -->
|
|
126
|
+
<div class="button-wrapper align-center">
|
|
127
|
+
<button v-if="buttonLabelAcceptCurrentSettings" type="button" @click="acceptCurrentCookies">
|
|
128
|
+
<span>{{ buttonLabelAcceptCurrentSettings }}</span>
|
|
129
|
+
</button>
|
|
130
|
+
<button v-if="buttonLabelAcceptAllCookies" type="button" class="primary" @click="acceptAllCookies">
|
|
131
|
+
<span>{{ buttonLabelAcceptAllCookies }}</span>
|
|
132
|
+
</button>
|
|
133
|
+
</div>
|
|
134
|
+
<!-- end button-wrapper for 'accept'-buttons -->
|
|
135
|
+
</template>
|
|
128
136
|
</div>
|
|
129
137
|
</transition>
|
|
130
138
|
</template>
|
|
@@ -144,6 +152,13 @@ export default {
|
|
|
144
152
|
}
|
|
145
153
|
},
|
|
146
154
|
props: {
|
|
155
|
+
/**
|
|
156
|
+
* activate if you want to use slot instead for given structure
|
|
157
|
+
*/
|
|
158
|
+
useSlot: {
|
|
159
|
+
type: Boolean,
|
|
160
|
+
default: false
|
|
161
|
+
},
|
|
147
162
|
/**
|
|
148
163
|
* set default v-model (must be named modelValue in Vue3)
|
|
149
164
|
*/
|
|
@@ -175,7 +190,7 @@ export default {
|
|
|
175
190
|
showHeadline: true,
|
|
176
191
|
headlineText: "Required cookies",
|
|
177
192
|
headlineLevel: 3
|
|
178
|
-
|
|
193
|
+
}
|
|
179
194
|
}
|
|
180
195
|
},
|
|
181
196
|
/**
|
|
@@ -220,8 +235,8 @@ export default {
|
|
|
220
235
|
const cookies = this.modelValue ? [...this.modelValue] : []
|
|
221
236
|
const requiredCookies = this.cookieOptions?.required?.cookies || []
|
|
222
237
|
for (let i = 0; i < requiredCookies.length; i++) {
|
|
223
|
-
if(!cookies.includes(requiredCookies[i].value)) {
|
|
224
|
-
|
|
238
|
+
if (!cookies.includes(requiredCookies[i].value)) {
|
|
239
|
+
cookies.push(requiredCookies[i].value)
|
|
225
240
|
}
|
|
226
241
|
}
|
|
227
242
|
return cookies
|
|
@@ -16,6 +16,7 @@
|
|
|
16
16
|
<figure :class="['cmd-image flex-container no-gap vertical', textAlign]">
|
|
17
17
|
<!-- begin figcaption above image -->
|
|
18
18
|
<template v-if="figcaption?.show && figcaption?.position === 'top'">
|
|
19
|
+
<!-- begin CmdFormElement -->
|
|
19
20
|
<CmdFormElement
|
|
20
21
|
v-if="slotProps.editing"
|
|
21
22
|
element="input"
|
|
@@ -25,7 +26,8 @@
|
|
|
25
26
|
labelText="Text figcaption"
|
|
26
27
|
v-model="editableFigcaptionText"
|
|
27
28
|
/>
|
|
28
|
-
|
|
29
|
+
<!-- end CmdFormElement -->
|
|
30
|
+
<figcaption v-else-if="figcaption?.text" v-html="figcaption?.text" />
|
|
29
31
|
</template>
|
|
30
32
|
<!-- end figcaption above image -->
|
|
31
33
|
|
|
@@ -62,6 +64,7 @@
|
|
|
62
64
|
|
|
63
65
|
<!-- begin figcaption below image -->
|
|
64
66
|
<template v-if="figcaption?.show && figcaption?.position !== 'top'">
|
|
67
|
+
<!-- begin CmdFormElement -->
|
|
65
68
|
<CmdFormElement
|
|
66
69
|
v-if="slotProps.editing"
|
|
67
70
|
element="input"
|
|
@@ -73,12 +76,15 @@
|
|
|
73
76
|
v-model="editableFigcaptionText"
|
|
74
77
|
placeholder="figcaption"
|
|
75
78
|
/>
|
|
76
|
-
|
|
79
|
+
<!-- end CmdFormElement -->
|
|
80
|
+
<figcaption v-else-if="figcaption?.text" v-html="figcaption?.text" />
|
|
77
81
|
</template>
|
|
78
82
|
<!-- end figcaption below image -->
|
|
79
83
|
|
|
80
84
|
<!-- begin show placeholder if no image exists (and component is not edited) -->
|
|
81
|
-
<button v-if="!slotProps.editing && !imageSource"
|
|
85
|
+
<button v-if="!slotProps.editing && !imageSource"
|
|
86
|
+
type="button"
|
|
87
|
+
class="button confirm"
|
|
82
88
|
@click="onAddItem">
|
|
83
89
|
<span class="icon-add"></span>
|
|
84
90
|
<span>Add new image</span>
|
|
@@ -112,7 +118,7 @@ export default {
|
|
|
112
118
|
mediumMaxWidth: 1023,
|
|
113
119
|
smallMaxWidth: 600,
|
|
114
120
|
currentWindowWidth: window.innerWidth,
|
|
115
|
-
allowedFileExtensions: ["jpg", "jpeg", "png", "webp"],
|
|
121
|
+
allowedFileExtensions: ["gif", "jpg", "jpeg", "png", "webp", "svg"],
|
|
116
122
|
uploadInitiated: false,
|
|
117
123
|
allowDrop: false,
|
|
118
124
|
showFigcaption: true,
|