comand-component-library 4.0.29 → 4.0.30
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 +2550 -2352
- package/dist/comand-component-library.umd.cjs +6 -6
- 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/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
|
@@ -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-html="contentAboveSlot"></div>
|
|
3
4
|
<slot></slot>
|
|
5
|
+
<div 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
|