comand-component-library 3.1.65 → 3.1.66
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/comand-component-library.css +1 -1
- package/dist/comand-component-library.umd.min.js +1 -1
- package/package.json +1 -1
- package/src/App.vue +10 -9
- package/src/assets/data/cookie-disclaimer.json +3 -3
- package/src/components/CmdBox.vue +18 -5
- package/src/components/CmdCookieDisclaimer.vue +88 -101
- package/src/components/CmdUploadForm.vue +123 -97
- package/src/mixins/CmdUploadForm/DefaultMessageProperties.js +1 -1
package/package.json
CHANGED
package/src/App.vue
CHANGED
|
@@ -723,12 +723,12 @@
|
|
|
723
723
|
<a id="section-custom-headline"></a>
|
|
724
724
|
<CmdWidthLimitationWrapper>
|
|
725
725
|
<h2 class="headline-demopage">Custom Headline</h2>
|
|
726
|
-
<CmdCustomHeadline icon-class="icon-home" pre-headline-text="Pre-headline"
|
|
727
|
-
<CmdCustomHeadline
|
|
728
|
-
<CmdCustomHeadline
|
|
729
|
-
<CmdCustomHeadline
|
|
730
|
-
<CmdCustomHeadline
|
|
731
|
-
<CmdCustomHeadline
|
|
726
|
+
<CmdCustomHeadline icon-class="icon-home" pre-headline-text="Pre-headline" headlineText="Headline level 1" :headlineLevel="1"/>
|
|
727
|
+
<CmdCustomHeadline headlineText="Headline level 2" :headlineLevel="2"/>
|
|
728
|
+
<CmdCustomHeadline headlineText="Headline level 3" :headlineLevel="3"/>
|
|
729
|
+
<CmdCustomHeadline headlineText="Headline level 4" :headlineLevel="4"/>
|
|
730
|
+
<CmdCustomHeadline headlineText="Headline level 5" :headlineLevel="5"/>
|
|
731
|
+
<CmdCustomHeadline headlineText="Headline level 6" :headlineLevel="6"/>
|
|
732
732
|
</CmdWidthLimitationWrapper>
|
|
733
733
|
<!-- end custom-headline ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
734
734
|
|
|
@@ -913,14 +913,16 @@
|
|
|
913
913
|
:allowedFileExtensions="['jpg', 'png']"
|
|
914
914
|
:allowMultipleFileUploads="true"
|
|
915
915
|
:advancedMode="false"
|
|
916
|
+
textLegend="Simple upload form"
|
|
916
917
|
@error="showError"
|
|
917
918
|
:uploadOptions="{url: 'http://localhost:8888'}"
|
|
918
919
|
/>
|
|
919
920
|
<h3>Advanced mode</h3>
|
|
920
921
|
<CmdUploadForm headline="Select files to upload"
|
|
921
922
|
:enableDragAndDrop="true"
|
|
922
|
-
:allowedFileExtensions="['jpg']"
|
|
923
|
+
:allowedFileExtensions="['jpg', 'png']"
|
|
923
924
|
:allowMultipleFileUploads="true"
|
|
925
|
+
textLegend="Advanced upload form"
|
|
924
926
|
:uploadOptions="{url: 'http://localhost:8888'}"
|
|
925
927
|
/>
|
|
926
928
|
</CmdWidthLimitationWrapper>
|
|
@@ -947,8 +949,7 @@
|
|
|
947
949
|
<CmdCopyrightInformation/>
|
|
948
950
|
|
|
949
951
|
<CmdFancyBox :show="fancyBoxCookieDisclaimer" :fancyboxOptions="{}" :allowEscapeKey="false">
|
|
950
|
-
<CmdCookieDisclaimer
|
|
951
|
-
:cookieOptions="cookieDisclaimerData"
|
|
952
|
+
<CmdCookieDisclaimer :cookieOptions="cookieDisclaimerData"
|
|
952
953
|
buttonLabelAcceptAllCookies="Accept all cookies"
|
|
953
954
|
buttonLabelAcceptCurrentSettings="Accept current settings"
|
|
954
955
|
@closeCookieDisclaimer="fancyBoxCookieDisclaimer = false"
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
"cookies": [
|
|
5
5
|
{
|
|
6
6
|
"id": "cookie-sessionid",
|
|
7
|
-
"description": "
|
|
7
|
+
"description": "This cookie is required for functionality",
|
|
8
8
|
"labelText": "SessionID",
|
|
9
9
|
"checked": true,
|
|
10
10
|
"status": "disabled",
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
},
|
|
17
17
|
{
|
|
18
18
|
"id": "cookie-google-recaptcha",
|
|
19
|
-
"description": "This
|
|
19
|
+
"description": "This cookie prevents bots from sending forms",
|
|
20
20
|
"labelText": "Google reCaptcha™",
|
|
21
21
|
"checked": true,
|
|
22
22
|
"status": "disabled",
|
|
@@ -34,7 +34,7 @@
|
|
|
34
34
|
"cookies": [
|
|
35
35
|
{
|
|
36
36
|
"id": "cookie-google-maps",
|
|
37
|
-
"description": "
|
|
37
|
+
"description": "This cookie enables the Google Map™",
|
|
38
38
|
"labelText": "Google Maps™",
|
|
39
39
|
"checked": false,
|
|
40
40
|
"linkDataPrivacy": {
|
|
@@ -1,11 +1,24 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<!-- begin boxType 'content' -->
|
|
3
3
|
<div v-if="boxType === 'content'" :class="['cmd-box box content', {open : open, collapsible: collapsible}]">
|
|
4
|
-
<
|
|
5
|
-
<!-- begin
|
|
6
|
-
<
|
|
7
|
-
|
|
8
|
-
|
|
4
|
+
<template v-if="useSlots?.includes('header')">
|
|
5
|
+
<!-- begin collapsible header with slot -->
|
|
6
|
+
<a v-if="collapsible" href="#" :title="open ? iconOpen.tooltip : iconClosed.tooltip" @click.prevent="toggleContentVisibility">
|
|
7
|
+
<!-- begin slot 'header' -->
|
|
8
|
+
<slot name="header"></slot>
|
|
9
|
+
<!-- end slot 'header' -->
|
|
10
|
+
<span class="toggle-icon" :class="[open ? iconOpen.iconClass : iconClosed.iconClass]"></span>
|
|
11
|
+
</a>
|
|
12
|
+
<!-- end collapsible header with slot -->
|
|
13
|
+
|
|
14
|
+
<!-- begin default header with slot -->
|
|
15
|
+
<header v-else>
|
|
16
|
+
<!-- begin slot 'header' -->
|
|
17
|
+
<slot name="header"></slot>
|
|
18
|
+
<!-- end slot 'header' -->
|
|
19
|
+
</header>
|
|
20
|
+
<!-- end default header with slot -->
|
|
21
|
+
</template>
|
|
9
22
|
<template v-else>
|
|
10
23
|
<!-- begin header for collapsible -->
|
|
11
24
|
<a v-if="collapsible" href="#" :title="open ? iconOpen.tooltip : iconClosed.tooltip" @click.prevent="toggleContentVisibility">
|
|
@@ -12,82 +12,75 @@
|
|
|
12
12
|
|
|
13
13
|
<!-- begin slot for cookie-options -->
|
|
14
14
|
<slot name="cookie-options">
|
|
15
|
-
<div v-if="cookieOptions.required">
|
|
16
|
-
<CmdCustomHeadline
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
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
|
-
<!-- </p>-->
|
|
50
|
-
<!-- <div v-if="dataPrivacyContent" v-html="dataPrivacyContent"></div>-->
|
|
51
|
-
<!-- </template>-->
|
|
52
|
-
<!-- </CmdAccordion>-->
|
|
53
|
-
<!-- <!– end CmdAccordion –>-->
|
|
15
|
+
<div v-if="cookieOptions.required" class="flex-container vertical">
|
|
16
|
+
<CmdCustomHeadline v-if="cmdBoxRequiredCookies?.showHeadline" :headline-text="cmdBoxRequiredCookies?.headlineText" :headline-level="cmdBoxRequiredCookies?.headlineLevel "/>
|
|
17
|
+
<!-- begin CmdBox -->
|
|
18
|
+
<CmdBox v-for="(cookie, index) in cookieOptions.required.cookies"
|
|
19
|
+
:useSlots="['header', 'body']"
|
|
20
|
+
v-bind="cmdBoxRequiredCookies"
|
|
21
|
+
:key="index"
|
|
22
|
+
>
|
|
23
|
+
<template v-slot:header>
|
|
24
|
+
<!-- begin CmdSwitchButton -->
|
|
25
|
+
<CmdSwitchButton
|
|
26
|
+
type="checkbox"
|
|
27
|
+
:id="cookie.id"
|
|
28
|
+
:labelText="cookie.labelText"
|
|
29
|
+
v-model="cookie.checked"
|
|
30
|
+
:status="cookie.status"
|
|
31
|
+
disabled="disabled"
|
|
32
|
+
/>
|
|
33
|
+
<!-- end CmdSwitchButton -->
|
|
34
|
+
</template>
|
|
35
|
+
<template v-slot:body>
|
|
36
|
+
<p v-if="cookie.description">{{ cookie.description }}</p>
|
|
37
|
+
<p v-if="cookie.linkDataPrivacy">
|
|
38
|
+
{{ cookie.linkDataPrivacy.label }}
|
|
39
|
+
<a @click="openDataPrivacy"
|
|
40
|
+
:href="cookie.linkDataPrivacy.link"
|
|
41
|
+
:target="cookie.linkDataPrivacy.target">
|
|
42
|
+
{{ cookie.linkDataPrivacy.linkText }}
|
|
43
|
+
</a>
|
|
44
|
+
</p>
|
|
45
|
+
<div v-if="dataPrivacyContent" v-html="dataPrivacyContent"></div>
|
|
46
|
+
</template>
|
|
47
|
+
</CmdBox>
|
|
48
|
+
<!-- end CmdBox -->
|
|
54
49
|
</div>
|
|
55
|
-
<hr
|
|
56
|
-
<div v-if="cookieOptions.optional">
|
|
57
|
-
<CmdCustomHeadline
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
<!--
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
<!--
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
<!--
|
|
89
|
-
<!-- </CmdAccordion>-->
|
|
90
|
-
<!-- <!– end CmdAccordion –>-->
|
|
50
|
+
<hr/>
|
|
51
|
+
<div v-if="cookieOptions.optional" class="flex-container vertical">
|
|
52
|
+
<CmdCustomHeadline v-if="cmdBoxOptionalCookies?.showHeadline" :headline-text="cmdBoxOptionalCookies?.headlineText" :headline-level="cmdBoxOptionalCookies?.headlineLevel "/>
|
|
53
|
+
<!-- begin CmdBox -->
|
|
54
|
+
<CmdBox v-for="(cookie, index) in cookieOptions.optional.cookies"
|
|
55
|
+
:useSlots="['header', 'body']"
|
|
56
|
+
v-bind="cmdBoxOptionalCookies"
|
|
57
|
+
:key="index"
|
|
58
|
+
>
|
|
59
|
+
<template v-slot:header>
|
|
60
|
+
<!-- begin CmdSwitchButton -->
|
|
61
|
+
<CmdSwitchButton
|
|
62
|
+
type="checkbox"
|
|
63
|
+
:id="cookie.id"
|
|
64
|
+
:labelText="cookie.labelText"
|
|
65
|
+
v-model="cookie.checked"
|
|
66
|
+
:status="cookie.status"
|
|
67
|
+
/>
|
|
68
|
+
<!-- end CmdSwitchButton -->
|
|
69
|
+
</template>
|
|
70
|
+
<template v-slot:body>
|
|
71
|
+
<p v-if="cookie.description">{{ cookie.description }}</p>
|
|
72
|
+
<p v-if="cookie.linkDataPrivacy">
|
|
73
|
+
{{ cookie.linkDataPrivacy.label }}
|
|
74
|
+
<a @click="openDataPrivacy"
|
|
75
|
+
:href="cookie.linkDataPrivacy.link"
|
|
76
|
+
:target="cookie.linkDataPrivacy.target">
|
|
77
|
+
{{ cookie.linkDataPrivacy.linkText }}
|
|
78
|
+
</a>
|
|
79
|
+
</p>
|
|
80
|
+
<div v-if="dataPrivacyContent" v-html="dataPrivacyContent"></div>
|
|
81
|
+
</template>
|
|
82
|
+
</CmdBox>
|
|
83
|
+
<!-- end CmdBox -->
|
|
91
84
|
</div>
|
|
92
85
|
</slot>
|
|
93
86
|
<!-- end slot for cookie-options -->
|
|
@@ -98,7 +91,7 @@
|
|
|
98
91
|
|
|
99
92
|
<!-- begin button-wrapper for 'accept'-buttons -->
|
|
100
93
|
<div class="button-wrapper align-center">
|
|
101
|
-
<button
|
|
94
|
+
<button v-if="buttonLabelAcceptCurrentSettings" type="button" @click="acceptCookies('currentSettings')">
|
|
102
95
|
<span>{{ buttonLabelAcceptCurrentSettings }}</span>
|
|
103
96
|
</button>
|
|
104
97
|
<button v-if="buttonLabelAcceptAllCookies" type="button" class="primary" @click="acceptCookies('allCookies')">
|
|
@@ -112,14 +105,16 @@
|
|
|
112
105
|
|
|
113
106
|
<script>
|
|
114
107
|
// import components
|
|
108
|
+
import CmdBox from "./CmdBox"
|
|
115
109
|
import CmdCustomHeadline from "./CmdCustomHeadline"
|
|
116
|
-
|
|
110
|
+
import CmdSwitchButton from "./CmdSwitchButton"
|
|
117
111
|
|
|
118
112
|
export default {
|
|
119
113
|
name: "CmdCookieDisclaimer",
|
|
120
114
|
components: {
|
|
121
|
-
|
|
122
|
-
|
|
115
|
+
CmdBox,
|
|
116
|
+
CmdCustomHeadline,
|
|
117
|
+
CmdSwitchButton
|
|
123
118
|
},
|
|
124
119
|
data() {
|
|
125
120
|
return {
|
|
@@ -142,26 +137,28 @@ export default {
|
|
|
142
137
|
}
|
|
143
138
|
},
|
|
144
139
|
/**
|
|
145
|
-
*
|
|
140
|
+
* property for CmdBox-component surrounding the required cookies
|
|
146
141
|
*/
|
|
147
|
-
|
|
142
|
+
cmdBoxRequiredCookies: {
|
|
148
143
|
type: Object,
|
|
149
144
|
default() {
|
|
150
145
|
return {
|
|
151
|
-
|
|
146
|
+
collapsible: true,
|
|
147
|
+
showHeadline: true,
|
|
152
148
|
headlineText: "Required cookies",
|
|
153
149
|
headlineLevel: 3
|
|
154
150
|
}
|
|
155
151
|
}
|
|
156
152
|
},
|
|
157
153
|
/**
|
|
158
|
-
*
|
|
154
|
+
* property for CmdBox-component surrounding the optional cookies
|
|
159
155
|
*/
|
|
160
|
-
|
|
156
|
+
cmdBoxOptionalCookies: {
|
|
161
157
|
type: Object,
|
|
162
158
|
default() {
|
|
163
159
|
return {
|
|
164
|
-
|
|
160
|
+
collapsible: true,
|
|
161
|
+
showHeadline: true,
|
|
165
162
|
headlineText: "Optional cookies",
|
|
166
163
|
headlineLevel: 3
|
|
167
164
|
}
|
|
@@ -218,6 +215,12 @@ export default {
|
|
|
218
215
|
bottom: 0;
|
|
219
216
|
top: auto;
|
|
220
217
|
|
|
218
|
+
.cmd-box {
|
|
219
|
+
.box-body {
|
|
220
|
+
padding: var(--default-padding);
|
|
221
|
+
}
|
|
222
|
+
}
|
|
223
|
+
|
|
221
224
|
h1 {
|
|
222
225
|
text-align: center;
|
|
223
226
|
}
|
|
@@ -234,22 +237,6 @@ export default {
|
|
|
234
237
|
margin-bottom: var(--default-margin);
|
|
235
238
|
}
|
|
236
239
|
|
|
237
|
-
.cmd-accordion {
|
|
238
|
-
.accordion-headline {
|
|
239
|
-
&:hover, &:active, &:focus {
|
|
240
|
-
label, .label {
|
|
241
|
-
span {
|
|
242
|
-
color: var(--pure-white) !important;
|
|
243
|
-
}
|
|
244
|
-
}
|
|
245
|
-
}
|
|
246
|
-
}
|
|
247
|
-
|
|
248
|
-
.toggle-switch {
|
|
249
|
-
display: flex;
|
|
250
|
-
}
|
|
251
|
-
}
|
|
252
|
-
|
|
253
240
|
p {
|
|
254
241
|
a {
|
|
255
242
|
text-decoration: underline;
|