comand-component-library 4.0.28 → 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 +2556 -2357
- package/dist/comand-component-library.umd.cjs +6 -6
- package/dist/style.css +1 -1
- package/package.json +2 -2
- package/src/ComponentLibrary.vue +40 -9
- package/src/assets/data/address-data.json +1 -1
- package/src/assets/data/box-user.json +17 -6
- package/src/assets/data/listOfComponents.json +1 -0
- package/src/assets/styles/component-library-global-styles.scss +1 -1
- package/src/componentSettingsDataAndControls.vue +25 -2
- package/src/components/CmdAddressData.vue +9 -0
- package/src/components/CmdAddressDataItem.vue +2 -1
- 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/CmdSiteHeader.vue +1 -1
- package/src/components/CmdSlideshow.vue +7 -6
- package/src/components/CmdSwitchLanguage.vue +1 -1
- package/src/components/CmdThumbnailScroller.vue +1 -1
- package/src/components/CmdTooltip.vue +4 -4
- package/src/pages/PageWrapper.vue +7 -3
|
@@ -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
|
|
@@ -0,0 +1,108 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<!-- begin CmdLink -->
|
|
3
|
+
<!-- begin href -->
|
|
4
|
+
<a v-if="linkType === 'href'" :href="path" :target="target" :class="['cmd-link', {'button': styleAsButton, 'primary': primaryButton}]" @click.prevent="emitClick($event, 'href')">
|
|
5
|
+
<span v-if="icon.iconClass && icon.position !== 'right'" :class="icon.iconClass" :title="icon.tooltip"></span>
|
|
6
|
+
<span v-if="text">{{ text }}</span>
|
|
7
|
+
<span v-if="icon.iconClass && icon.position === 'right'" :class="icon.iconClass" :title="icon.tooltip"></span>
|
|
8
|
+
</a>
|
|
9
|
+
<!-- end href -->
|
|
10
|
+
|
|
11
|
+
<!-- begin router -->
|
|
12
|
+
<router-link v-else-if="linkType === 'router'" :to="path" :class="['cmd-link', {'button': styleAsButton, 'primary': primaryButton}]" @click.prevent="emitClick($event, 'router')">
|
|
13
|
+
<span v-if="icon.iconClass && icon.position !== 'right'" :class="icon.iconClass" :title="icon.tooltip"></span>
|
|
14
|
+
<span v-if="text">{{ text }}</span>
|
|
15
|
+
<span v-if="icon.iconClass && icon.position === 'right'" :class="icon.iconClass" :title="icon.tooltip"></span>
|
|
16
|
+
</router-link>
|
|
17
|
+
<!-- end router -->
|
|
18
|
+
|
|
19
|
+
<!-- begin button -->
|
|
20
|
+
<button v-else-if="linkType === 'button'" :class="['cmd-link button', {'primary': primaryButton}]" type="submit" @click.prevent="emitClick($event, 'button')">
|
|
21
|
+
<span v-if="icon.iconClass && icon.position !== 'right'" :class="icon.iconClass" :title="icon.tooltip"></span>
|
|
22
|
+
<span v-if="text">{{ text }}</span>
|
|
23
|
+
<span v-if="icon.iconClass && icon.position === 'right'" :class="icon.iconClass" :title="icon.tooltip"></span>
|
|
24
|
+
</button>
|
|
25
|
+
<!-- end button -->
|
|
26
|
+
<!-- end CmdLink -->
|
|
27
|
+
</template>
|
|
28
|
+
|
|
29
|
+
<script>
|
|
30
|
+
export default {
|
|
31
|
+
name: "CmdLink",
|
|
32
|
+
emits: ["click"],
|
|
33
|
+
props: {
|
|
34
|
+
/**
|
|
35
|
+
* set type of link
|
|
36
|
+
* @allowedValues: 'href', 'router', 'button'
|
|
37
|
+
*/
|
|
38
|
+
linkType: {
|
|
39
|
+
type: String,
|
|
40
|
+
default: "href"
|
|
41
|
+
},
|
|
42
|
+
/**
|
|
43
|
+
* set path
|
|
44
|
+
*
|
|
45
|
+
* linkType must be 'href', 'router'
|
|
46
|
+
*/
|
|
47
|
+
path: {
|
|
48
|
+
type: String,
|
|
49
|
+
default: "#"
|
|
50
|
+
},
|
|
51
|
+
/**
|
|
52
|
+
* set target
|
|
53
|
+
*
|
|
54
|
+
* linkType must be 'href'
|
|
55
|
+
*/
|
|
56
|
+
target: {
|
|
57
|
+
type: String,
|
|
58
|
+
default: ""
|
|
59
|
+
},
|
|
60
|
+
/**
|
|
61
|
+
* icon to display
|
|
62
|
+
*/
|
|
63
|
+
icon: {
|
|
64
|
+
type: Object,
|
|
65
|
+
default: {}
|
|
66
|
+
},
|
|
67
|
+
/**
|
|
68
|
+
* displayed text
|
|
69
|
+
*
|
|
70
|
+
*/
|
|
71
|
+
text: {
|
|
72
|
+
type: String,
|
|
73
|
+
default: ""
|
|
74
|
+
},
|
|
75
|
+
/**
|
|
76
|
+
* toggle if link should be styled as button
|
|
77
|
+
*
|
|
78
|
+
* (type 'button' will always be styles as button)
|
|
79
|
+
*/
|
|
80
|
+
styleAsButton: {
|
|
81
|
+
type: Boolean,
|
|
82
|
+
default: false
|
|
83
|
+
},
|
|
84
|
+
/**
|
|
85
|
+
* activate if button should be styled as primary-button
|
|
86
|
+
*
|
|
87
|
+
* (type must be 'button' or styleAsButton-property must be activated)
|
|
88
|
+
*/
|
|
89
|
+
primaryButton: {
|
|
90
|
+
type: Boolean,
|
|
91
|
+
default: false
|
|
92
|
+
}
|
|
93
|
+
},
|
|
94
|
+
methods: {
|
|
95
|
+
emitClick(event, linkType) {
|
|
96
|
+
this.$emit('click', {originalEvent: event, linkType: linkType})
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
}
|
|
100
|
+
</script>
|
|
101
|
+
|
|
102
|
+
<style>
|
|
103
|
+
.cmd-link {
|
|
104
|
+
span[class*="icon"]:not(:only-child) {
|
|
105
|
+
font-size: 1rem;
|
|
106
|
+
}
|
|
107
|
+
}
|
|
108
|
+
</style>
|
|
@@ -16,14 +16,15 @@
|
|
|
16
16
|
<template v-if="currentItem">
|
|
17
17
|
<template v-if="!useSlot">
|
|
18
18
|
<template v-if="!editModeContext">
|
|
19
|
-
<a v-if="currentItem?.link?.href"
|
|
19
|
+
<a v-if="currentItem?.link?.href"
|
|
20
|
+
:href="currentItem?.link?.href"
|
|
20
21
|
:title="currentItem?.link?.tooltip">
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
22
|
+
<!-- begin CmdImage -->
|
|
23
|
+
<CmdImage :image="currentItem?.image" :figcaption="currentItem?.figcaption"/>
|
|
24
|
+
<!-- begin CmdImage -->
|
|
25
|
+
</a>
|
|
25
26
|
|
|
26
|
-
|
|
27
|
+
<!-- begin CmdImage -->
|
|
27
28
|
<CmdImage v-else :image="currentItem?.image" :figcaption="currentItem?.figcaption"/>
|
|
28
29
|
<!-- begin CmdImage -->
|
|
29
30
|
</template>
|
|
@@ -86,11 +86,11 @@ export default {
|
|
|
86
86
|
}
|
|
87
87
|
},
|
|
88
88
|
/**
|
|
89
|
-
*
|
|
89
|
+
* selector of container that scrolls the content of the site
|
|
90
90
|
*/
|
|
91
|
-
|
|
91
|
+
scrollContainer: {
|
|
92
92
|
type: String,
|
|
93
|
-
default: "page-wrapper"
|
|
93
|
+
default: ".page-wrapper"
|
|
94
94
|
},
|
|
95
95
|
/**
|
|
96
96
|
* icon 'close'
|
|
@@ -120,7 +120,7 @@ export default {
|
|
|
120
120
|
const relatedElement = document.getElementById(this.relatedId)
|
|
121
121
|
|
|
122
122
|
if(relatedElement) {
|
|
123
|
-
document.
|
|
123
|
+
document.querySelector(this.scrollContainer).addEventListener("scroll", this.hideTooltip) // avoid fixed tooltip on scroll
|
|
124
124
|
document.addEventListener("keyup", this.hideTooltipOnEsc) // close tooltip by using "escape"-key
|
|
125
125
|
|
|
126
126
|
if (this.toggleVisibilityByClick) {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<a id="anchor-back-to-top"></a>
|
|
3
|
-
<div :class="{'overflow-hidden': offCanvasOpen}"
|
|
3
|
+
<div :class="{'overflow-hidden': offCanvasOpen}" class="page-wrapper" :id="templateId"
|
|
4
4
|
:style="{'scroll-padding-top': heightSiteHeader + 'px'}">
|
|
5
5
|
<!-- begin cmd-site-header -->
|
|
6
6
|
<CmdSiteHeader
|
|
@@ -104,7 +104,7 @@
|
|
|
104
104
|
<CmdBackToTopButton
|
|
105
105
|
href="#anchor-back-to-top"
|
|
106
106
|
:iconBackToTop="iconBackToTop"
|
|
107
|
-
scroll-container="
|
|
107
|
+
scroll-container=".page-wrapper"
|
|
108
108
|
/>
|
|
109
109
|
<!-- end cmd-back-to-top-button -->
|
|
110
110
|
|
|
@@ -154,6 +154,10 @@ export default {
|
|
|
154
154
|
}
|
|
155
155
|
},
|
|
156
156
|
props: {
|
|
157
|
+
templateId: {
|
|
158
|
+
type: String,
|
|
159
|
+
default: null
|
|
160
|
+
},
|
|
157
161
|
topHeaderNavigationEntries: {
|
|
158
162
|
default: []
|
|
159
163
|
},
|
|
@@ -195,7 +199,7 @@ export default {
|
|
|
195
199
|
|
|
196
200
|
if (siteHeader.length > 0) {
|
|
197
201
|
const resizeObserver = new ResizeObserver(entries => {
|
|
198
|
-
// get height of site-header to set scroll-padding on
|
|
202
|
+
// get height of site-header to set scroll-padding on .page-wrapper
|
|
199
203
|
this.heightSiteHeader = entries[0].target.offsetHeight
|
|
200
204
|
})
|
|
201
205
|
resizeObserver.observe(siteHeader[0])
|