comand-component-library 3.1.65 → 3.1.66
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.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;
|