comand-component-library 3.3.85 → 3.3.86
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/package.json
CHANGED
|
@@ -15,18 +15,18 @@
|
|
|
15
15
|
<template v-slot="slotProps">
|
|
16
16
|
<figure :class="['cmd-image flex-container no-gap vertical', textAlign]">
|
|
17
17
|
<!-- begin figcaption above image -->
|
|
18
|
-
<template v-if="figcaption
|
|
19
|
-
|
|
18
|
+
<template v-if="figcaption?.show && figcaption?.position === 'top'">
|
|
19
|
+
<CmdFormElement
|
|
20
20
|
v-if="slotProps.editing"
|
|
21
|
-
|
|
22
|
-
|
|
21
|
+
element="input"
|
|
22
|
+
type="text"
|
|
23
23
|
:class="[textAlign, 'edit-mode']"
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
24
|
+
:required="true"
|
|
25
|
+
labelText="Text figcaption"
|
|
26
|
+
v-model="editableFigcaptionText"
|
|
27
|
+
/>
|
|
28
28
|
<figcaption v-else-if="figcaption?.text">{{ figcaption?.text }}</figcaption>
|
|
29
|
-
|
|
29
|
+
</template>
|
|
30
30
|
<!-- end figcaption above image -->
|
|
31
31
|
|
|
32
32
|
<!-- begin image-wrapper -->
|
|
@@ -36,7 +36,7 @@
|
|
|
36
36
|
v-on="dragAndDropHandler"
|
|
37
37
|
@click.prevent="selectFiles"
|
|
38
38
|
title="Drag new image to this area to replace old one!">
|
|
39
|
-
|
|
39
|
+
<span class="icon-image"></span>
|
|
40
40
|
<img :src="imageSource" :alt="image?.alt" :title="image?.tooltip"/>
|
|
41
41
|
</a>
|
|
42
42
|
<!-- end image with drop-area -->
|
|
@@ -61,20 +61,20 @@
|
|
|
61
61
|
<!-- end image-wrapper -->
|
|
62
62
|
|
|
63
63
|
<!-- begin figcaption below image -->
|
|
64
|
-
<template v-if="figcaption
|
|
65
|
-
|
|
64
|
+
<template v-if="figcaption?.show && figcaption?.position !== 'top'">
|
|
65
|
+
<CmdFormElement
|
|
66
66
|
v-if="slotProps.editing"
|
|
67
|
-
|
|
68
|
-
|
|
67
|
+
element="input"
|
|
68
|
+
type="text"
|
|
69
69
|
:class="[textAlign, 'edit-mode']"
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
70
|
+
:required="true"
|
|
71
|
+
labelText="Text figcaption"
|
|
72
|
+
:showLabel="false"
|
|
73
|
+
v-model="editableFigcaptionText"
|
|
74
74
|
placeholder="figcaption"
|
|
75
|
-
|
|
75
|
+
/>
|
|
76
76
|
<figcaption v-else-if="figcaption?.text">{{ figcaption?.text }}</figcaption>
|
|
77
|
-
|
|
77
|
+
</template>
|
|
78
78
|
<!-- end figcaption below image -->
|
|
79
79
|
|
|
80
80
|
<!-- begin show placeholder if no image exists (and component is not edited) -->
|
|
@@ -84,7 +84,7 @@
|
|
|
84
84
|
<span>Add new image</span>
|
|
85
85
|
</button>
|
|
86
86
|
<!-- end show placeholder if no image exists (and component is not edited) -->
|
|
87
|
-
|
|
87
|
+
</figure>
|
|
88
88
|
</template>
|
|
89
89
|
</EditComponentWrapper>
|
|
90
90
|
<!-- end edit-mode -->
|
|
@@ -196,7 +196,7 @@ export default {
|
|
|
196
196
|
},
|
|
197
197
|
imageSource() {
|
|
198
198
|
// check if a new image is provided
|
|
199
|
-
if(this.newImageSource) {
|
|
199
|
+
if (this.newImageSource) {
|
|
200
200
|
return this.newImageSource
|
|
201
201
|
}
|
|
202
202
|
|
|
@@ -207,13 +207,13 @@ export default {
|
|
|
207
207
|
return null
|
|
208
208
|
}
|
|
209
209
|
|
|
210
|
-
if(typeof imgSrc === "string") {
|
|
210
|
+
if (typeof imgSrc === "string") {
|
|
211
211
|
return imgSrc
|
|
212
212
|
}
|
|
213
213
|
|
|
214
214
|
const deviceWidth = this.currentWindowWidth;
|
|
215
215
|
// return image for small-devices (if exists)
|
|
216
|
-
if(imgSrc.small && deviceWidth <= this.smallMaxWidth) {
|
|
216
|
+
if (imgSrc.small && deviceWidth <= this.smallMaxWidth) {
|
|
217
217
|
return imgSrc.small
|
|
218
218
|
}
|
|
219
219
|
// return image for medium-devices (if exists)
|
|
@@ -372,55 +372,55 @@ export default {
|
|
|
372
372
|
<style lang="scss">
|
|
373
373
|
/* begin cmd-image ------------------------------------------------------------------------------------------ */
|
|
374
374
|
.cmd-image {
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
375
|
+
img {
|
|
376
|
+
display: block;
|
|
377
|
+
}
|
|
378
378
|
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
379
|
+
&.text-center {
|
|
380
|
+
figcaption {
|
|
381
|
+
text-align: center;
|
|
382
|
+
}
|
|
382
383
|
}
|
|
383
|
-
}
|
|
384
384
|
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
385
|
+
&.text-right {
|
|
386
|
+
figcaption {
|
|
387
|
+
text-align: right;
|
|
388
|
+
}
|
|
388
389
|
}
|
|
389
|
-
}
|
|
390
390
|
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
391
|
+
.drop-area {
|
|
392
|
+
border: 0;
|
|
393
|
+
align-items: center;
|
|
394
|
+
justify-content: center;
|
|
395
|
+
padding: 0;
|
|
396
396
|
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
397
|
+
> [class*="icon"] {
|
|
398
|
+
position: absolute;
|
|
399
|
+
top: 50%;
|
|
400
|
+
left: 50%;
|
|
401
|
+
transform: translateX(-50%) translateY(-50%);
|
|
402
|
+
font-size: 10rem;
|
|
403
|
+
color: var(--pure-white);
|
|
404
|
+
text-shadow: var(--text-shadow);
|
|
405
|
+
z-index: 10;
|
|
406
|
+
}
|
|
407
407
|
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
408
|
+
img {
|
|
409
|
+
opacity: .7;
|
|
410
|
+
transition: var(--default-transition);
|
|
411
411
|
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
412
|
+
&:hover, :active, :focus {
|
|
413
|
+
opacity: 1;
|
|
414
|
+
transition: var(--default-transition);
|
|
415
|
+
}
|
|
416
416
|
|
|
417
417
|
&:not([src]) {
|
|
418
418
|
display: block;
|
|
419
419
|
width: 100%;
|
|
420
420
|
min-height: 30rem;
|
|
421
421
|
}
|
|
422
|
+
}
|
|
422
423
|
}
|
|
423
|
-
}
|
|
424
424
|
}
|
|
425
425
|
|
|
426
426
|
.edit-mode .edit-component-wrapper .cmd-image {
|