comand-component-library 3.3.80 → 3.3.82
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 +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;
|