comand-component-library 3.3.80 → 3.3.82
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/comand-component-library.js +659 -652
- package/dist/comand-component-library.umd.cjs +4 -4
- package/dist/style.css +1 -1
- package/package.json +1 -1
- package/src/App.vue +1310 -1297
- package/src/components/CmdBox.vue +21 -28
- package/src/components/CmdSocialNetworks.vue +43 -42
- package/src/components/CmdThumbnailScroller.vue +2 -2
|
@@ -40,7 +40,7 @@
|
|
|
40
40
|
|
|
41
41
|
<!-- begin default header with slot -->
|
|
42
42
|
<template v-else>
|
|
43
|
-
<div v-if="useSlots?.includes('header') ||cmdHeadline?.headlineText" class="box-header">
|
|
43
|
+
<div v-if="useSlots?.includes('header') || cmdHeadline?.headlineText" class="box-header">
|
|
44
44
|
<!-- begin slot 'header' -->
|
|
45
45
|
<slot v-if="useSlots?.includes('header')" name="header"></slot>
|
|
46
46
|
<!-- end slot 'header' -->
|
|
@@ -56,28 +56,30 @@
|
|
|
56
56
|
<!-- end default header with slot -->
|
|
57
57
|
|
|
58
58
|
<!-- begin box-body -->
|
|
59
|
-
<div v-show="open"
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
<
|
|
63
|
-
<
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
59
|
+
<div v-show="open" class="box-body" aria-expanded="true" role="article">
|
|
60
|
+
<div v-if="useSlots?.includes('body')" :class="{'default-padding': useDefaultPadding}">
|
|
61
|
+
<!-- begin slot 'body' -->
|
|
62
|
+
<slot name="body">
|
|
63
|
+
<transition-group :name="toggleTransition">
|
|
64
|
+
<p :class="{
|
|
65
|
+
'cutoff-text': cutoffTextLines > 0,
|
|
66
|
+
'fade-last-line': fadeLastLine && !showCutOffText,
|
|
67
|
+
'show-text' : showCutOffText
|
|
68
|
+
}">
|
|
69
|
+
{{ textBody }}
|
|
70
|
+
</p>
|
|
71
|
+
<a v-if="cutoffTextLines > 0" href="#" @click.prevent="toggleCutOffText">
|
|
72
|
+
{{ showCutOffText ? getMessage("cmdbox.contentbox.collapse_text") : getMessage("cmdbox.contentbox.expand_text") }}
|
|
73
|
+
</a>
|
|
74
|
+
</transition-group>
|
|
75
|
+
</slot>
|
|
76
|
+
<!-- end slot 'body' -->
|
|
77
|
+
</div>
|
|
76
78
|
|
|
77
79
|
<template v-else>
|
|
78
80
|
<img v-if="image" :src="image.src" :alt="image.altText"/>
|
|
79
81
|
|
|
80
|
-
<div class="
|
|
82
|
+
<div :class="{'default-padding': useDefaultPadding}">
|
|
81
83
|
<!-- begin CmdHeadline -->
|
|
82
84
|
<CmdHeadline
|
|
83
85
|
v-if="cmdHeadline?.headlineText && repeatHeadlineInBoxBody"
|
|
@@ -454,10 +456,6 @@ export default {
|
|
|
454
456
|
}
|
|
455
457
|
}
|
|
456
458
|
|
|
457
|
-
.box-body {
|
|
458
|
-
padding: var(--default-padding);
|
|
459
|
-
}
|
|
460
|
-
|
|
461
459
|
// boyType === 'content'
|
|
462
460
|
&.content {
|
|
463
461
|
> * {
|
|
@@ -502,11 +500,6 @@ export default {
|
|
|
502
500
|
|
|
503
501
|
.box-body {
|
|
504
502
|
flex-grow: 1;
|
|
505
|
-
padding: 0;
|
|
506
|
-
|
|
507
|
-
.text-wrapper {
|
|
508
|
-
padding: var(--default-padding);
|
|
509
|
-
}
|
|
510
503
|
|
|
511
504
|
p.cutoff-text {
|
|
512
505
|
padding: var(--default-padding);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div :class="['cmd-social-networks', {'stretch': stretchButtons, 'align-right': align === 'right'}]">
|
|
3
3
|
<!-- begin CmdHeadline -->
|
|
4
|
-
<CmdHeadline v-if="cmdHeadline" v-bind="cmdHeadline"
|
|
4
|
+
<CmdHeadline v-if="cmdHeadline" v-bind="cmdHeadline"/>
|
|
5
5
|
<!-- end CmdHeadline -->
|
|
6
6
|
|
|
7
7
|
<!-- begin CmdFormElement -->
|
|
@@ -20,21 +20,21 @@
|
|
|
20
20
|
<ul :class="['button-wrapper no-flex', {'no-gap': !useGap}]">
|
|
21
21
|
<li v-for="network in validNetworks">
|
|
22
22
|
<a
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
23
|
+
:key="network.path"
|
|
24
|
+
:class="['button', {disabled: userMustAcceptDataPrivacy && !dataPrivacyAccepted}, {'text-align-left': textAlign === 'left'}]"
|
|
25
|
+
:id="network.id"
|
|
26
|
+
:href="getUrl(network)"
|
|
27
|
+
@click="preventOnDisabled"
|
|
28
|
+
target="_blank"
|
|
29
|
+
:title="tooltip(network.tooltip)">
|
|
30
|
+
<!-- begin CmdIcon -->
|
|
31
|
+
<CmdIcon
|
|
32
|
+
v-if="network.iconClass"
|
|
33
|
+
:iconClass="network.iconClass"
|
|
34
|
+
:type="network.iconType"
|
|
35
|
+
/>
|
|
36
|
+
<!-- end CmdIcon -->
|
|
37
|
+
<span v-if="network.linkText">{{ network.linkText }}</span>
|
|
38
38
|
</a>
|
|
39
39
|
</li>
|
|
40
40
|
</ul>
|
|
@@ -157,7 +157,7 @@ export default {
|
|
|
157
157
|
},
|
|
158
158
|
methods: {
|
|
159
159
|
getUrl(network) {
|
|
160
|
-
if(this.userMustAcceptDataPrivacy && this.dataPrivacyAccepted) {
|
|
160
|
+
if (this.userMustAcceptDataPrivacy && this.dataPrivacyAccepted) {
|
|
161
161
|
// if path is not given completely by json-data
|
|
162
162
|
if (this.appendPage) {
|
|
163
163
|
// if page to share is given by property
|
|
@@ -177,19 +177,19 @@ export default {
|
|
|
177
177
|
preventOnDisabled(event) {
|
|
178
178
|
let clickedElement = event.target
|
|
179
179
|
|
|
180
|
-
if(clickedElement.tagName !== "A") {
|
|
180
|
+
if (clickedElement.tagName !== "A") {
|
|
181
181
|
// get surrounding <a> if inner <span> is clicked
|
|
182
182
|
clickedElement = clickedElement.closest("a")
|
|
183
183
|
}
|
|
184
184
|
|
|
185
185
|
// href must be set due to html-validity, so click must be prevented if href contains "#" only (equals button is styled as disabled)
|
|
186
|
-
if(clickedElement.getAttribute("href") === "#") {
|
|
186
|
+
if (clickedElement.getAttribute("href") === "#") {
|
|
187
187
|
event.preventDefault()
|
|
188
188
|
}
|
|
189
189
|
},
|
|
190
190
|
tooltip(tooltip) {
|
|
191
|
-
if(this.userMustAcceptDataPrivacy) {
|
|
192
|
-
if(this.dataPrivacyAccepted) {
|
|
191
|
+
if (this.userMustAcceptDataPrivacy) {
|
|
192
|
+
if (this.dataPrivacyAccepted) {
|
|
193
193
|
return tooltip
|
|
194
194
|
}
|
|
195
195
|
return this.tooltipAcceptDataPrivacy
|
|
@@ -202,7 +202,7 @@ export default {
|
|
|
202
202
|
|
|
203
203
|
<style lang="scss">
|
|
204
204
|
/* begin cmd-social-networks -------------------------------------------------------------------------------------------- */
|
|
205
|
-
@import
|
|
205
|
+
@import "../assets/styles/variables";
|
|
206
206
|
|
|
207
207
|
.cmd-social-networks {
|
|
208
208
|
display: flex;
|
|
@@ -220,21 +220,21 @@ export default {
|
|
|
220
220
|
gap: calc(var(--default-gap) / 2);
|
|
221
221
|
|
|
222
222
|
.button {
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
223
|
+
padding: calc(var(--default-padding) / 2) var(--default-padding);
|
|
224
|
+
gap: calc(var(--default-gap) / 2);
|
|
225
|
+
outline: 0;
|
|
226
226
|
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
227
|
+
span {
|
|
228
|
+
margin: 0;
|
|
229
|
+
}
|
|
230
230
|
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
231
|
+
&:first-of-type {
|
|
232
|
+
margin: 0;
|
|
233
|
+
}
|
|
234
234
|
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
235
|
+
&.text-align-left {
|
|
236
|
+
flex-direction: row-reverse;
|
|
237
|
+
}
|
|
238
238
|
}
|
|
239
239
|
|
|
240
240
|
&.no-gap {
|
|
@@ -245,18 +245,18 @@ export default {
|
|
|
245
245
|
|
|
246
246
|
&:first-of-type {
|
|
247
247
|
.button {
|
|
248
|
-
|
|
249
|
-
|
|
248
|
+
border-top-left-radius: var(--border-radius);
|
|
249
|
+
border-bottom-left-radius: var(--border-radius);
|
|
250
250
|
}
|
|
251
251
|
}
|
|
252
252
|
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
253
|
+
&:last-of-type {
|
|
254
|
+
.button {
|
|
255
|
+
border-top-right-radius: var(--border-radius);
|
|
256
|
+
border-bottom-right-radius: var(--border-radius);
|
|
257
|
+
}
|
|
257
258
|
}
|
|
258
|
-
|
|
259
|
-
}
|
|
259
|
+
}
|
|
260
260
|
}
|
|
261
261
|
}
|
|
262
262
|
|
|
@@ -329,5 +329,6 @@ export default {
|
|
|
329
329
|
}
|
|
330
330
|
}
|
|
331
331
|
}
|
|
332
|
+
|
|
332
333
|
/* end cmd-social-networks ------------------------------------------------------------------------------------------ */
|
|
333
334
|
</style>
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div :class="['cmd-thumbnail-scroller', {'gallery-scroller' : !allowOpenFancyBox, 'full-width' : fullWidth, 'large-icons': largeIcons}]"
|
|
3
3
|
ref="thumbnail-scroller">
|
|
4
|
-
<div>
|
|
4
|
+
<div class="inner-thumbnail-wrapper">
|
|
5
5
|
<!-- begin CmdSlideButton -->
|
|
6
6
|
<CmdSlideButton
|
|
7
7
|
v-if="showSlidebuttons"
|
|
@@ -266,7 +266,7 @@ export default {
|
|
|
266
266
|
}
|
|
267
267
|
}
|
|
268
268
|
|
|
269
|
-
>
|
|
269
|
+
> .inner-thumbnail-wrapper {
|
|
270
270
|
border-radius: var(--border-radius);
|
|
271
271
|
padding: var(--default-padding);
|
|
272
272
|
margin: 0 auto;
|