comand-component-library 4.1.1 → 4.1.3
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 +2593 -2574
- package/dist/comand-component-library.umd.cjs +25 -25
- package/dist/style.css +1 -1
- package/package.json +1 -1
- package/src/components/CmdBox.vue +11 -5
- package/src/components/CmdFancyBox.vue +157 -155
- package/src/components/CmdGoogleMaps.vue +7 -0
- package/src/index.js +1 -0
- package/src/utils/cookie.js +28 -0
|
@@ -1,141 +1,141 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
>
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
<!-- begin CmdIcon -->
|
|
29
|
-
<CmdIcon
|
|
30
|
-
:iconClass="fancyboxOptions.printButtons.color?.iconClass"
|
|
31
|
-
:type="fancyboxOptions.printButtons.color?.iconType"
|
|
32
|
-
/>
|
|
33
|
-
<!-- end CmdIcon -->
|
|
34
|
-
</a>
|
|
35
|
-
<a v-if="showPrintButtons && fancyboxOptions.printButtons?.grayscale"
|
|
36
|
-
href="#"
|
|
37
|
-
class="button print-grayscale"
|
|
38
|
-
:title="fancyboxOptions.printButtons.grayscale?.tooltip"
|
|
39
|
-
@click.prevent="printInGrayscale = true">
|
|
40
|
-
<!-- begin CmdIcon -->
|
|
41
|
-
<CmdIcon
|
|
42
|
-
:iconClass="fancyboxOptions.printButtons.grayscale?.iconClass"
|
|
43
|
-
:type="fancyboxOptions.printButtons.grayscale?.iconType"
|
|
44
|
-
/>
|
|
45
|
-
<!-- end CmdIcon -->
|
|
46
|
-
</a>
|
|
47
|
-
<!-- end print buttons -->
|
|
48
|
-
|
|
49
|
-
<!-- begin close-icon -->
|
|
50
|
-
<a v-if="fancyboxOptions.closeIcon"
|
|
51
|
-
href="#"
|
|
52
|
-
class="button"
|
|
53
|
-
id="close-dialog"
|
|
54
|
-
:title="fancyboxOptions.closeIcon.tooltip"
|
|
55
|
-
ref="close-dialog"
|
|
56
|
-
@click.prevent="close">
|
|
57
|
-
<!-- begin CmdIcon -->
|
|
58
|
-
<CmdIcon
|
|
59
|
-
:iconClass="fancyboxOptions.closeIcon.iconClass"
|
|
60
|
-
:type="fancyboxOptions.closeIcon.iconType"
|
|
61
|
-
/>
|
|
62
|
-
<!-- end CmdIcon -->
|
|
63
|
-
</a>
|
|
64
|
-
<!-- end close-icon -->
|
|
65
|
-
</div>
|
|
66
|
-
<!-- end button-wrapper -->
|
|
67
|
-
</header>
|
|
68
|
-
<div :class="['outer-content-wrapper', {'grayscale' : printInGrayscale}]">
|
|
69
|
-
<div v-if="fancyBoxImageUrl || cmdImage?.image" class="content">
|
|
70
|
-
<!-- begin CmdImage -->
|
|
71
|
-
<CmdImage :image="largeSingleImage" :figcaption="cmdImage?.figcaption" />
|
|
72
|
-
<!-- end CmdImage -->
|
|
73
|
-
</div>
|
|
74
|
-
<div v-else-if="fancyBoxContent" class="content" v-html="fancyBoxContent"></div>
|
|
75
|
-
<div v-else-if="fancyBoxElements" class="content" ref="elements"></div>
|
|
76
|
-
<div v-else-if="fancyBoxGallery" class="content">
|
|
77
|
-
<!-- begin CmdSlideButton -->
|
|
78
|
-
<CmdSlideButton @click.prevent="showPrevItem" slideButtonType="prev"/>
|
|
79
|
-
<!-- end CmdSlideButton -->
|
|
80
|
-
|
|
81
|
-
<!-- begin enlarged image -->
|
|
82
|
-
<!-- begin CmdImage -->
|
|
83
|
-
<CmdImage :image="largeGalleryImage" :figcaption="fancyBoxGallery[index].figcaption" />
|
|
84
|
-
<!-- end CmdImage -->
|
|
85
|
-
<!-- end enlarged image -->
|
|
86
|
-
|
|
87
|
-
<!-- begin CmdSlideButton -->
|
|
88
|
-
<CmdSlideButton @click.prevent="showNextItem"/>
|
|
89
|
-
<!-- end CmdSlideButton -->
|
|
90
|
-
</div>
|
|
91
|
-
<div v-else class="content">
|
|
92
|
-
<!-- begin slot-content -->
|
|
93
|
-
<slot></slot>
|
|
94
|
-
<!-- end slot-content -->
|
|
95
|
-
</div>
|
|
96
|
-
</div>
|
|
97
|
-
|
|
98
|
-
<footer v-if="showSubmitButtons && fancyboxOptions.submitButtons" class="flex-container no-flex">
|
|
99
|
-
<!-- begin cancel-button -->
|
|
100
|
-
<button
|
|
101
|
-
v-if="fancyboxOptions.submitButtons?.cancel"
|
|
102
|
-
@click="cancel"
|
|
103
|
-
:title="fancyboxOptions.submitButtons.cancel?.tooltip">
|
|
2
|
+
<dialog
|
|
3
|
+
ref="dialog"
|
|
4
|
+
:class="['cmd-fancybox', {'show-overlay': showOverlay, 'image' : fancyBoxImageUrl || fancyBoxGallery, 'image-gallery': fancyBoxGallery}]"
|
|
5
|
+
:aria-label="ariaLabelText"
|
|
6
|
+
@cancel="onDialogCancel"
|
|
7
|
+
>
|
|
8
|
+
<header class="flex-container">
|
|
9
|
+
<!-- begin CmdHeadline -->
|
|
10
|
+
<CmdHeadline
|
|
11
|
+
v-if="cmdHeadline?.headlineText"
|
|
12
|
+
v-bind="cmdHeadline"
|
|
13
|
+
:id="htmlId"
|
|
14
|
+
/>
|
|
15
|
+
<!-- end CmdHeadline -->
|
|
16
|
+
|
|
17
|
+
<!-- begin button-wrapper -->
|
|
18
|
+
<div
|
|
19
|
+
v-if="(fancyboxOptions.printButtons?.color || fancyboxOptions.printButtons?.grayscale) || fancyboxOptions.closeIcon"
|
|
20
|
+
class="button-wrapper no-flex"
|
|
21
|
+
> <!-- begin print buttons -->
|
|
22
|
+
<a v-if="showPrintButtons && fancyboxOptions.printButtons?.color"
|
|
23
|
+
href="#"
|
|
24
|
+
class="button print-color"
|
|
25
|
+
:title="fancyboxOptions.printButtons.color?.tooltip"
|
|
26
|
+
@click.prevent="printInGrayscale = false">
|
|
27
|
+
<!-- begin CmdIcon -->
|
|
104
28
|
<CmdIcon
|
|
105
|
-
|
|
106
|
-
:
|
|
107
|
-
:type="fancyboxOptions.submitButtons.cancel?.iconType"
|
|
29
|
+
:iconClass="fancyboxOptions.printButtons.color?.iconClass"
|
|
30
|
+
:type="fancyboxOptions.printButtons.color?.iconType"
|
|
108
31
|
/>
|
|
109
|
-
|
|
110
|
-
</
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
:title="fancyboxOptions.submitButtons.cancel?.tooltip">
|
|
32
|
+
<!-- end CmdIcon -->
|
|
33
|
+
</a>
|
|
34
|
+
<a v-if="showPrintButtons && fancyboxOptions.printButtons?.grayscale"
|
|
35
|
+
href="#"
|
|
36
|
+
class="button print-grayscale"
|
|
37
|
+
:title="fancyboxOptions.printButtons.grayscale?.tooltip"
|
|
38
|
+
@click.prevent="printInGrayscale = true">
|
|
39
|
+
<!-- begin CmdIcon -->
|
|
118
40
|
<CmdIcon
|
|
119
|
-
|
|
120
|
-
:
|
|
121
|
-
:type="fancyboxOptions.submitButtons.confirm?.iconType"
|
|
41
|
+
:iconClass="fancyboxOptions.printButtons.grayscale?.iconClass"
|
|
42
|
+
:type="fancyboxOptions.printButtons.grayscale?.iconType"
|
|
122
43
|
/>
|
|
123
|
-
|
|
124
|
-
</
|
|
125
|
-
<!-- end
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
44
|
+
<!-- end CmdIcon -->
|
|
45
|
+
</a>
|
|
46
|
+
<!-- end print buttons -->
|
|
47
|
+
|
|
48
|
+
<!-- begin close-icon -->
|
|
49
|
+
<a v-if="fancyboxOptions.closeIcon"
|
|
50
|
+
href="#"
|
|
51
|
+
class="button"
|
|
52
|
+
id="close-dialog"
|
|
53
|
+
:title="fancyboxOptions.closeIcon.tooltip"
|
|
54
|
+
ref="close-dialog"
|
|
55
|
+
@click.prevent="close">
|
|
56
|
+
<!-- begin CmdIcon -->
|
|
57
|
+
<CmdIcon
|
|
58
|
+
:iconClass="fancyboxOptions.closeIcon.iconClass"
|
|
59
|
+
:type="fancyboxOptions.closeIcon.iconType"
|
|
60
|
+
/>
|
|
61
|
+
<!-- end CmdIcon -->
|
|
62
|
+
</a>
|
|
63
|
+
<!-- end close-icon -->
|
|
64
|
+
</div>
|
|
65
|
+
<!-- end button-wrapper -->
|
|
66
|
+
</header>
|
|
67
|
+
<div :class="['outer-content-wrapper', {'grayscale' : printInGrayscale}]">
|
|
68
|
+
<div v-if="fancyBoxImageUrl || cmdImage?.image" class="content">
|
|
69
|
+
<!-- begin CmdImage -->
|
|
70
|
+
<CmdImage :image="largeSingleImage" :figcaption="cmdImage?.figcaption"/>
|
|
71
|
+
<!-- end CmdImage -->
|
|
72
|
+
</div>
|
|
73
|
+
<div v-else-if="fancyBoxContent" class="content" v-html="fancyBoxContent"></div>
|
|
74
|
+
<div v-else-if="fancyBoxElements" class="content" ref="elements"></div>
|
|
75
|
+
<div v-else-if="fancyBoxGallery" class="content">
|
|
76
|
+
<!-- begin CmdSlideButton -->
|
|
77
|
+
<CmdSlideButton @click.prevent="showPrevItem" slideButtonType="prev"/>
|
|
78
|
+
<!-- end CmdSlideButton -->
|
|
79
|
+
|
|
80
|
+
<!-- begin enlarged image -->
|
|
81
|
+
<!-- begin CmdImage -->
|
|
82
|
+
<CmdImage :image="largeGalleryImage" :figcaption="fancyBoxGallery[index].figcaption"/>
|
|
83
|
+
<!-- end CmdImage -->
|
|
84
|
+
<!-- end enlarged image -->
|
|
85
|
+
|
|
86
|
+
<!-- begin CmdSlideButton -->
|
|
87
|
+
<CmdSlideButton @click.prevent="showNextItem"/>
|
|
88
|
+
<!-- end CmdSlideButton -->
|
|
89
|
+
</div>
|
|
90
|
+
<div v-else class="content">
|
|
91
|
+
<!-- begin slot-content -->
|
|
92
|
+
<slot></slot>
|
|
93
|
+
<!-- end slot-content -->
|
|
94
|
+
</div>
|
|
95
|
+
</div>
|
|
96
|
+
|
|
97
|
+
<footer v-if="showSubmitButtons && fancyboxOptions.submitButtons" class="flex-container no-flex">
|
|
98
|
+
<!-- begin cancel-button -->
|
|
99
|
+
<button
|
|
100
|
+
v-if="fancyboxOptions.submitButtons?.cancel"
|
|
101
|
+
@click="cancel"
|
|
102
|
+
:title="fancyboxOptions.submitButtons.cancel?.tooltip">
|
|
103
|
+
<CmdIcon
|
|
104
|
+
v-if="fancyboxOptions.submitButtons.cancel?.iconClass"
|
|
105
|
+
:iconClass="fancyboxOptions.submitButtons.cancel?.iconClass"
|
|
106
|
+
:type="fancyboxOptions.submitButtons.cancel?.iconType"
|
|
107
|
+
/>
|
|
108
|
+
<span
|
|
109
|
+
v-if="fancyboxOptions.submitButtons.cancel?.buttonText">{{ fancyboxOptions.submitButtons.cancel?.buttonText }}</span>
|
|
110
|
+
</button>
|
|
111
|
+
<!-- end cancel-button -->
|
|
112
|
+
|
|
113
|
+
<!-- begin confirm-button -->
|
|
114
|
+
<button
|
|
115
|
+
v-if="fancyboxOptions.submitButtons?.confirm"
|
|
116
|
+
@click="confirm"
|
|
117
|
+
:title="fancyboxOptions.submitButtons.cancel?.tooltip">
|
|
118
|
+
<CmdIcon
|
|
119
|
+
v-if="fancyboxOptions.submitButtons.confirm?.iconClass"
|
|
120
|
+
:iconClass="fancyboxOptions.submitButtons.confirm?.iconClass"
|
|
121
|
+
:type="fancyboxOptions.submitButtons.confirm?.iconType"
|
|
122
|
+
/>
|
|
123
|
+
<span
|
|
124
|
+
v-if="fancyboxOptions.submitButtons.confirm?.buttonText">{{ fancyboxOptions.submitButtons.confirm?.buttonText }}</span>
|
|
125
|
+
</button>
|
|
126
|
+
<!-- end confirm-button -->
|
|
127
|
+
</footer>
|
|
128
|
+
|
|
129
|
+
<!-- begin CmdThumbnailScroller -->
|
|
130
|
+
<CmdThumbnailScroller
|
|
131
|
+
v-if="fancyBoxGallery"
|
|
132
|
+
:thumbnailScrollerItems="[...fancyBoxGallery]"
|
|
133
|
+
:allowOpenFancyBox="false"
|
|
134
|
+
@click="showItem"
|
|
135
|
+
:activeItemIndex="index"
|
|
136
|
+
/>
|
|
137
|
+
<!-- end CmdThumbnailScroller -->
|
|
138
|
+
</dialog>
|
|
139
139
|
</template>
|
|
140
140
|
|
|
141
141
|
<script>
|
|
@@ -333,27 +333,27 @@ const FancyBox = defineComponent({
|
|
|
333
333
|
}
|
|
334
334
|
},
|
|
335
335
|
computed: {
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
336
|
+
largeGalleryImage() {
|
|
337
|
+
// change src-key for a single item/image in gallery to fit CmdImage-properties
|
|
338
|
+
const fancyBoxItem = {...this.fancyBoxGallery[this.index].image}
|
|
339
|
+
fancyBoxItem.src = fancyBoxItem.srcImageLarge
|
|
340
|
+
return fancyBoxItem
|
|
341
|
+
},
|
|
342
|
+
largeSingleImage() {
|
|
343
|
+
// change src-key for a single item/image to fit CmdImage-properties
|
|
344
|
+
const fancyBoxItem = {...this.cmdImage?.image || {}}
|
|
345
|
+
if (this.fancyBoxImageUrl) {
|
|
346
|
+
fancyBoxItem.src = this.fancyBoxImageUrl
|
|
347
|
+
}
|
|
348
|
+
return fancyBoxItem
|
|
349
|
+
},
|
|
350
|
+
ariaLabelText() {
|
|
351
|
+
if (this.fancyBoxGallery?.length) {
|
|
352
|
+
return this.fancyBoxGallery[this.index].figcaption.text
|
|
353
|
+
} else {
|
|
354
|
+
return this.defaultAriaLabelText
|
|
355
|
+
}
|
|
356
|
+
}
|
|
357
357
|
},
|
|
358
358
|
methods: {
|
|
359
359
|
onDialogCancel(event) {
|
|
@@ -370,7 +370,7 @@ const FancyBox = defineComponent({
|
|
|
370
370
|
this.$refs.dialog.showModal()
|
|
371
371
|
|
|
372
372
|
// overwrite default behavior of dialog-element, which sets focus on first focusable element inside
|
|
373
|
-
this.$refs["close-dialog"]
|
|
373
|
+
this.$refs["close-dialog"]?.focus()
|
|
374
374
|
},
|
|
375
375
|
updateContentOnPropertyChange() {
|
|
376
376
|
this.fancyBoxImageUrl = this.fancyBoxContent = this.fancyBoxElements = null
|
|
@@ -629,6 +629,7 @@ export default FancyBox
|
|
|
629
629
|
|
|
630
630
|
<style lang="scss">
|
|
631
631
|
@import "../assets/styles/variables";
|
|
632
|
+
|
|
632
633
|
.cmd-fancybox {
|
|
633
634
|
@media only screen and (max-width: $medium-max-width) {
|
|
634
635
|
.outer-content-wrapper {
|
|
@@ -678,5 +679,6 @@ export default FancyBox
|
|
|
678
679
|
margin-top: var(--default-margin);
|
|
679
680
|
}
|
|
680
681
|
}
|
|
682
|
+
|
|
681
683
|
/* end cmd-fancybox ------------------------------------------------------------------------------------------ */
|
|
682
684
|
</style>
|
|
@@ -19,6 +19,7 @@
|
|
|
19
19
|
// import mixins
|
|
20
20
|
import I18n from "../mixins/I18n"
|
|
21
21
|
import DefaultMessageProperties from "../mixins/CmdGoogleMaps/DefaultMessageProperties"
|
|
22
|
+
import {setCookieDisclaimerCookie, getCookieDisclaimerCookie} from "../utils/cookie"
|
|
22
23
|
|
|
23
24
|
export default {
|
|
24
25
|
name: "CmdGoogleMaps",
|
|
@@ -49,6 +50,11 @@ export default {
|
|
|
49
50
|
required: true
|
|
50
51
|
}
|
|
51
52
|
},
|
|
53
|
+
mounted() {
|
|
54
|
+
if(getCookieDisclaimerCookie().includes("google-maps")) {
|
|
55
|
+
this.cookiesAccepted = true
|
|
56
|
+
}
|
|
57
|
+
},
|
|
52
58
|
computed: {
|
|
53
59
|
locateAddress() {
|
|
54
60
|
if(this.address) {
|
|
@@ -62,6 +68,7 @@ export default {
|
|
|
62
68
|
},
|
|
63
69
|
methods: {
|
|
64
70
|
acceptCookies() {
|
|
71
|
+
setCookieDisclaimerCookie(["google-maps"])
|
|
65
72
|
this.cookiesAccepted = true
|
|
66
73
|
this.$emit("click", this.cookiesAccepted)
|
|
67
74
|
}
|
package/src/index.js
CHANGED
|
@@ -65,6 +65,7 @@ export { default as DirFancybox } from '@/directives/fancybox'
|
|
|
65
65
|
// export functions
|
|
66
66
|
export { createUuid, createHtmlId } from '@/utils/common'
|
|
67
67
|
export { getFileExtension } from '@/utils/getFileExtension'
|
|
68
|
+
export { setCookieDisclaimerCookie, getCookieDisclaimerCookie } from '@/utils/cookie'
|
|
68
69
|
|
|
69
70
|
// export composables
|
|
70
71
|
export { useSequence } from '@/composables/sequence'
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
const cookieDisclaimerCookieName = "acceptedCookies"
|
|
2
|
+
|
|
3
|
+
function setCookieDisclaimerCookie(listOfAcceptedCookies, daysToExpire = 365) {
|
|
4
|
+
const cookie = [...getCookieDisclaimerCookie(), ...listOfAcceptedCookies].join(",")
|
|
5
|
+
let expires = ""
|
|
6
|
+
const date = new Date()
|
|
7
|
+
date.setTime(date.getTime() + daysToExpire * 24 * 60 * 60 * 1000)
|
|
8
|
+
expires = "; expires=" + date.toUTCString()
|
|
9
|
+
document.cookie = cookieDisclaimerCookieName + "=" + encodeURIComponent(cookie) + expires + "; SameSite=strict; path=/"
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
function getCookieDisclaimerCookie() {
|
|
13
|
+
const cookie = document.cookie.split(";").map((cookie)=> {
|
|
14
|
+
return cookie.trim()
|
|
15
|
+
}).find((cookie) => {
|
|
16
|
+
return cookie.startsWith(cookieDisclaimerCookieName + "=")
|
|
17
|
+
})
|
|
18
|
+
|
|
19
|
+
if(cookie) {
|
|
20
|
+
const indexOfEqualSign = cookie.indexOf("=")
|
|
21
|
+
return decodeURIComponent(cookie.slice(indexOfEqualSign + 1)).split(",")
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
return []
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
export {setCookieDisclaimerCookie, getCookieDisclaimerCookie}
|
|
28
|
+
|