comand-component-library 3.3.7 → 3.3.8
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.css +1 -1
- package/dist/comand-component-library.umd.min.js +1 -1
- package/package.json +2 -2
- package/src/App.vue +97 -28
- package/src/assets/data/address-data.json +8 -0
- package/src/assets/data/image-gallery.json +44 -20
- package/src/assets/data/image.json +28 -0
- package/src/assets/data/slideshow.json +68 -51
- package/src/assets/data/thumbnail-scroller.json +96 -40
- package/src/assets/styles/global-styles.scss +1 -1
- package/src/components/CmdAddressData.vue +45 -2
- package/src/components/CmdBox.vue +112 -62
- package/src/components/CmdCompanyLogo.vue +19 -2
- package/src/components/CmdFakeSelect.vue +2 -2
- package/src/components/CmdFancyBox.vue +41 -43
- package/src/components/CmdFormElement.vue +52 -42
- package/src/components/CmdFormFilters.vue +1 -1
- package/src/components/CmdHeadline.vue +29 -4
- package/src/components/CmdIcon.vue +4 -4
- package/src/components/CmdImage.vue +55 -0
- package/src/components/CmdImageGallery.vue +16 -15
- package/src/components/CmdImageZoom.vue +29 -13
- package/src/components/CmdInputGroup.vue +1 -2
- package/src/components/CmdListOfRequirements.vue +1 -1
- package/src/components/CmdLoginForm.vue +1 -1
- package/src/components/CmdMainNavigation.vue +3 -3
- package/src/components/CmdMultistepFormProgressBar.vue +9 -9
- package/src/components/CmdPager.vue +124 -88
- package/src/components/CmdShareButtons.vue +1 -1
- package/src/components/CmdSlideButton.vue +10 -3
- package/src/components/CmdSlideshow.vue +38 -31
- package/src/components/CmdSystemMessage.vue +32 -16
- package/src/components/CmdTable.vue +1 -1
- package/src/components/CmdTabs.vue +11 -11
- package/src/components/CmdThumbnailScroller.vue +15 -12
- package/src/components/CmdTooltip.vue +3 -3
- package/src/components/CmdUploadForm.vue +20 -20
- package/src/documentation/generated/CmdBoxPropertyDescriptions.json +7 -0
- package/src/documentation/generated/CmdFancyBoxPropertyDescriptions.json +3 -13
- package/src/documentation/generated/CmdHeadlinePropertyDescriptions.json +10 -0
- package/src/documentation/generated/CmdIconPropertyDescriptions.json +1 -1
- package/src/documentation/generated/CmdImagePropertyDescriptions.json +12 -0
- package/src/documentation/generated/CmdImageZoomPropertyDescriptions.json +4 -4
- package/src/documentation/generated/CmdPagerPropertyDescriptions.json +14 -9
- package/src/index.js +3 -1
- package/src/mixins/CmdAddressData/DefaultMessageProperties.js +5 -2
- package/src/mixins/CmdBox/DefaultMessageProperties.js +3 -1
- package/src/mixins/CmdPager/DefaultMessageProperties.js +10 -0
@@ -22,9 +22,8 @@
|
|
22
22
|
> <!-- begin print buttons -->
|
23
23
|
<a v-if="fancyboxOptions.printButtons && fancyboxOptions.printButtons.color && fancyboxOptions.printButtons.color.show"
|
24
24
|
href="#"
|
25
|
-
class="button
|
25
|
+
class="button print-color"
|
26
26
|
:title="fancyboxOptions.printButtons.color.tooltip"
|
27
|
-
id="print-color"
|
28
27
|
@click.prevent="printInGrayscale = false">
|
29
28
|
<!-- begin CmdIcon -->
|
30
29
|
<CmdIcon :iconClass="fancyboxOptions.printButtons.color.iconClass" :type="fancyboxOptions.printButtons.color.iconType" />
|
@@ -32,13 +31,12 @@
|
|
32
31
|
</a>
|
33
32
|
<a v-if="fancyboxOptions.printButtons && fancyboxOptions.printButtons.grayscale && fancyboxOptions.printButtons.grayscale.show"
|
34
33
|
href="#"
|
35
|
-
class="button
|
34
|
+
class="button print-grayscale"
|
36
35
|
:title="fancyboxOptions.printButtons.grayscale.tooltip"
|
37
|
-
id="print-grayscale"
|
38
36
|
@click.prevent="printInGrayscale = true">
|
39
|
-
|
40
|
-
|
41
|
-
|
37
|
+
<!-- begin CmdIcon -->
|
38
|
+
<CmdIcon :iconClass="fancyboxOptions.printButtons.grayscale.iconClass" :type="fancyboxOptions.printButtons.grayscale.iconType" />
|
39
|
+
<!-- end CmdIcon -->
|
42
40
|
</a>
|
43
41
|
<!-- end print buttons -->
|
44
42
|
|
@@ -50,9 +48,9 @@
|
|
50
48
|
:title="fancyboxOptions.closeIcon.tooltip"
|
51
49
|
ref="close-dialog"
|
52
50
|
@click.prevent="close">
|
53
|
-
|
54
|
-
|
55
|
-
|
51
|
+
<!-- begin CmdIcon -->
|
52
|
+
<CmdIcon :iconClass="fancyboxOptions.closeIcon.iconClass" :type="fancyboxOptions.closeIcon.iconType" />
|
53
|
+
<!-- end CmdIcon -->
|
56
54
|
</a>
|
57
55
|
<!-- end close-icon -->
|
58
56
|
</div>
|
@@ -60,10 +58,9 @@
|
|
60
58
|
</header>
|
61
59
|
<div :class="['outer-content-wrapper', {'grayscale' : printInGrayscale}]">
|
62
60
|
<div v-if="fancyBoxImageUrl" class="content">
|
63
|
-
|
64
|
-
|
65
|
-
|
66
|
-
</figure>
|
61
|
+
<!-- begin CmdImage -->
|
62
|
+
<CmdImage :image="largeSingleImage" :figcaption="cmdImage?.figcaption" />
|
63
|
+
<!-- end CmdImage -->
|
67
64
|
</div>
|
68
65
|
<div v-else-if="fancyBoxContent" class="content" v-html="fancyBoxContent"></div>
|
69
66
|
<div v-else-if="fancyBoxElements" class="content"></div>
|
@@ -74,10 +71,9 @@
|
|
74
71
|
<!-- end CmdSlideButton -->
|
75
72
|
|
76
73
|
<!-- begin enlarged image -->
|
77
|
-
|
78
|
-
|
79
|
-
|
80
|
-
</figure>
|
74
|
+
<!-- begin CmdImage -->
|
75
|
+
<CmdImage :image="largeGalleryImage" :figcaption="fancyBoxGallery[index].figcaption" />
|
76
|
+
<!-- end CmdImage -->
|
81
77
|
<!-- end enlarged image -->
|
82
78
|
|
83
79
|
<!-- begin CmdSlideButton -->
|
@@ -112,6 +108,7 @@ import Identifier from "../mixins/Identifier"
|
|
112
108
|
// import components
|
113
109
|
import CmdHeadline from "./CmdHeadline"
|
114
110
|
import CmdIcon from "./CmdIcon"
|
111
|
+
import CmdImage from "./CmdImage"
|
115
112
|
import CmdSlideButton from "./CmdSlideButton.vue"
|
116
113
|
import CmdThumbnailScroller from './CmdThumbnailScroller.vue'
|
117
114
|
|
@@ -130,6 +127,7 @@ const FancyBox = defineComponent({
|
|
130
127
|
components: {
|
131
128
|
CmdHeadline,
|
132
129
|
CmdIcon,
|
130
|
+
CmdImage,
|
133
131
|
CmdSlideButton,
|
134
132
|
CmdThumbnailScroller
|
135
133
|
},
|
@@ -163,13 +161,6 @@ const FancyBox = defineComponent({
|
|
163
161
|
type: String,
|
164
162
|
required: false
|
165
163
|
},
|
166
|
-
/**
|
167
|
-
* figcaption if image is given by url
|
168
|
-
*/
|
169
|
-
figcaption: {
|
170
|
-
type: String,
|
171
|
-
required: false
|
172
|
-
},
|
173
164
|
/**
|
174
165
|
* options to show at top (closeIcon, printButtons)
|
175
166
|
*/
|
@@ -248,12 +239,10 @@ const FancyBox = defineComponent({
|
|
248
239
|
default: true
|
249
240
|
},
|
250
241
|
/**
|
251
|
-
*
|
252
|
-
*
|
253
|
-
* @requiredForAccessibility: true
|
242
|
+
* properties for CmdImage-component
|
254
243
|
*/
|
255
|
-
|
256
|
-
type:
|
244
|
+
cmdImage: {
|
245
|
+
type: Object,
|
257
246
|
required: false
|
258
247
|
},
|
259
248
|
/**
|
@@ -299,6 +288,20 @@ const FancyBox = defineComponent({
|
|
299
288
|
document.querySelector("body").removeEventListener("keyup", this.$_FancyBox_escapeKeyHandler)
|
300
289
|
}
|
301
290
|
},
|
291
|
+
computed: {
|
292
|
+
largeGalleryImage() {
|
293
|
+
// change src-key for a single item/image in gallery to fit CmdImage-properties
|
294
|
+
const fancyBoxItem = {...this.fancyBoxGallery[this.index].image}
|
295
|
+
fancyBoxItem.src = fancyBoxItem.srcImageLarge
|
296
|
+
return fancyBoxItem
|
297
|
+
},
|
298
|
+
largeSingleImage() {
|
299
|
+
// change src-key for a single item/image to fit CmdImage-properties
|
300
|
+
const fancyBoxItem = {...this.cmdImage?.image || {}}
|
301
|
+
fancyBoxItem.src = this.fancyBoxImageUrl
|
302
|
+
return fancyBoxItem
|
303
|
+
}
|
304
|
+
},
|
302
305
|
methods: {
|
303
306
|
showDialog() {
|
304
307
|
// avoid scrolling if fancybox is shown
|
@@ -341,7 +344,7 @@ const FancyBox = defineComponent({
|
|
341
344
|
},
|
342
345
|
showItem(imgId) {
|
343
346
|
for (let i = 0; i < this.fancyBoxGallery.length; i++) {
|
344
|
-
if (this.fancyBoxGallery[i].
|
347
|
+
if (this.fancyBoxGallery[i].id === imgId) {
|
345
348
|
this.index = i
|
346
349
|
break;
|
347
350
|
}
|
@@ -475,28 +478,23 @@ export default FancyBox
|
|
475
478
|
min-width: 0;
|
476
479
|
min-height: 0;
|
477
480
|
|
478
|
-
&[class*="icon"] {
|
481
|
+
&[class*="print"] > [class*="icon-"] {
|
479
482
|
color: var(--text-color);
|
480
|
-
background: var(--pure-white);
|
481
483
|
}
|
482
484
|
|
483
|
-
&.
|
484
|
-
background: linear-gradient(135deg,
|
485
|
-
|
486
|
-
&#print-grayscale {
|
487
|
-
background: linear-gradient(135deg, var(--medium-gray) 0%, var(--medium-gray) 50%, var(--pure-white) 50%, var(--pure-white) 100%);
|
485
|
+
&.print-grayscale {
|
486
|
+
background: linear-gradient(135deg, var(--medium-gray) 0%, var(--medium-gray) 50%, var(--pure-white) 50%, var(--pure-white) 100%);
|
487
|
+
}
|
488
488
|
|
489
|
-
|
490
|
-
|
491
|
-
}
|
492
|
-
}
|
489
|
+
&.print-color {
|
490
|
+
background: linear-gradient(135deg, #009fe3 0%, #009fe3 25%, #e6007e 25%, #e6007e 50%, #ffed00 50%, #ffed00 50%, #ffed00 75%, var(--medium-gray) 75%, var(--medium-gray) 100%);
|
493
491
|
}
|
494
492
|
|
495
493
|
&:hover, &:active, &:focus {
|
496
494
|
border: var(--primary-border);
|
497
495
|
background: var(--pure-white);
|
498
496
|
|
499
|
-
|
497
|
+
[class*="icon-"] {
|
500
498
|
color: var(--primary-color);
|
501
499
|
}
|
502
500
|
}
|
@@ -58,44 +58,52 @@
|
|
58
58
|
</span>
|
59
59
|
<!-- end label-text (+ required asterisk) -->
|
60
60
|
|
61
|
-
|
62
|
-
|
63
|
-
|
64
|
-
|
65
|
-
|
66
|
-
|
67
|
-
<input
|
68
|
-
v-bind="elementAttributes"
|
69
|
-
:id="htmlId"
|
70
|
-
:class="inputClass"
|
71
|
-
@focus="tooltip = true"
|
72
|
-
@blur="onBlur"
|
73
|
-
@input="onInput"
|
74
|
-
@mouseover="datalistFocus"
|
75
|
-
@keyup="checkForCapsLock"
|
76
|
-
@change="$emit('change', $event)"
|
77
|
-
:autocomplete="autocomplete"
|
78
|
-
:list="datalist ? datalist.id : null"
|
79
|
-
:value="modelValue"
|
80
|
-
:maxlength="getMaxLength()"
|
81
|
-
ref="input"
|
61
|
+
<span class="flex-container"><!-- container required to place inner icons correctly -->
|
62
|
+
<!-- begin CmdIcon (for icon inside field) -->
|
63
|
+
<CmdIcon
|
64
|
+
v-if="$attrs.type !== 'checkbox' && $attrs.type !== 'radio' && fieldIconClass"
|
65
|
+
class="place-inside"
|
66
|
+
:iconClass="fieldIconClass"
|
82
67
|
/>
|
83
|
-
|
84
|
-
|
85
|
-
|
86
|
-
|
87
|
-
|
88
|
-
|
89
|
-
|
90
|
-
|
91
|
-
|
92
|
-
|
93
|
-
|
94
|
-
|
95
|
-
|
96
|
-
|
97
|
-
|
98
|
-
|
68
|
+
<!-- end CmdIcon (for icon inside field) -->
|
69
|
+
|
70
|
+
<!-- begin inputfield -->
|
71
|
+
<template v-if="element === 'input' && $attrs.type !== 'checkbox' && $attrs.type !== 'radio' && $attrs.type !== 'search'">
|
72
|
+
<input
|
73
|
+
v-bind="elementAttributes"
|
74
|
+
:id="htmlId"
|
75
|
+
:class="inputClass"
|
76
|
+
@focus="tooltip = true"
|
77
|
+
@blur="onBlur"
|
78
|
+
@input="onInput"
|
79
|
+
@mouseover="datalistFocus"
|
80
|
+
@keyup="checkForCapsLock"
|
81
|
+
@change="$emit('change', $event)"
|
82
|
+
:autocomplete="autocomplete"
|
83
|
+
:list="datalist ? datalist.id : null"
|
84
|
+
:value="modelValue"
|
85
|
+
:maxlength="getMaxLength()"
|
86
|
+
ref="input"
|
87
|
+
/>
|
88
|
+
</template>
|
89
|
+
<!-- end inputfield -->
|
90
|
+
|
91
|
+
<!-- begin show-password-icon -->
|
92
|
+
<a v-if="$attrs.type === 'password'"
|
93
|
+
href="#"
|
94
|
+
class="place-inside"
|
95
|
+
@mousedown.prevent="showPassword"
|
96
|
+
@mouseup.prevent="hidePassword"
|
97
|
+
@mouseleave.prevent="hidePassword"
|
98
|
+
@click.prevent
|
99
|
+
:title="iconPasswordVisible.tooltip"
|
100
|
+
>
|
101
|
+
<!-- begin CmdIcon -->
|
102
|
+
<CmdIcon :iconClass="iconPasswordVisible.iconClass" />
|
103
|
+
<!-- end CmdIcon -->
|
104
|
+
</a>
|
105
|
+
<!-- end show-password-icon -->
|
106
|
+
</span>
|
99
107
|
|
100
108
|
<!-- begin datalist -->
|
101
109
|
<template v-if="datalist && datalist.options.length">
|
@@ -195,9 +203,9 @@
|
|
195
203
|
<CmdIcon :iconClass="iconSearch.iconClass" />
|
196
204
|
<!-- end CmdIcon -->
|
197
205
|
</a>
|
198
|
-
<a v-if="iconDelete
|
206
|
+
<a v-if="iconDelete?.show" href="#" @click.prevent="$emit('update:modelValue', '')" :title="iconDelete?.tooltip">
|
199
207
|
<!-- begin CmdIcon -->
|
200
|
-
<CmdIcon :iconClass="iconDelete
|
208
|
+
<CmdIcon :iconClass="iconDelete?.iconClass" :type="iconDelete?.iconType" />
|
201
209
|
<!-- end CmdIcon -->
|
202
210
|
</a>
|
203
211
|
</span>
|
@@ -839,7 +847,7 @@ export default {
|
|
839
847
|
<style lang="scss">
|
840
848
|
/* begin cmd-form-element ------------------------------------------------------------------------------------------ */
|
841
849
|
.cmd-form-element {
|
842
|
-
input + .place-inside[class*="icon"] {
|
850
|
+
input + .place-inside[class*="icon-"] {
|
843
851
|
left: auto;
|
844
852
|
right: .5rem
|
845
853
|
}
|
@@ -869,7 +877,7 @@ export default {
|
|
869
877
|
.search-field-wrapper {
|
870
878
|
margin: 0;
|
871
879
|
|
872
|
-
a
|
880
|
+
a {
|
873
881
|
position: absolute;
|
874
882
|
top: 50%;
|
875
883
|
right: 1rem;
|
@@ -883,7 +891,9 @@ export default {
|
|
883
891
|
}
|
884
892
|
|
885
893
|
a.button {
|
886
|
-
|
894
|
+
right: 0;
|
895
|
+
|
896
|
+
& + a {
|
887
897
|
right: 5rem;
|
888
898
|
}
|
889
899
|
}
|
@@ -1,7 +1,7 @@
|
|
1
1
|
<template>
|
2
|
-
<div :class="['cmd-headline', {
|
2
|
+
<div :class="['cmd-headline', {'has-pre-headline-text': preHeadlineText, 'has-icon': headlineIcon?.iconClass}, getTextAlign]">
|
3
3
|
<!-- begin CmdIcon -->
|
4
|
-
<CmdIcon v-if="headlineIcon" :iconClass="headlineIcon
|
4
|
+
<CmdIcon v-if="headlineIcon" :iconClass="headlineIcon?.iconClass" :type="headlineIcon?.iconType" />
|
5
5
|
<!-- end CmdIcon -->
|
6
6
|
|
7
7
|
<div v-if="preHeadlineText">
|
@@ -57,6 +57,15 @@ export default {
|
|
57
57
|
headlineIcon: {
|
58
58
|
type: Object,
|
59
59
|
required: false
|
60
|
+
},
|
61
|
+
/**
|
62
|
+
* text-alignment
|
63
|
+
*
|
64
|
+
* @allowedValues: "left", "center", "right"
|
65
|
+
*/
|
66
|
+
textAlign: {
|
67
|
+
type: String,
|
68
|
+
default: "left"
|
60
69
|
}
|
61
70
|
},
|
62
71
|
computed: {
|
@@ -65,26 +74,42 @@ export default {
|
|
65
74
|
return "h" + this.headlineLevel
|
66
75
|
}
|
67
76
|
return "h3"
|
77
|
+
},
|
78
|
+
getTextAlign() {
|
79
|
+
if(this.textAlign) {
|
80
|
+
return "text-" + this.textAlign
|
81
|
+
}
|
82
|
+
return ''
|
68
83
|
}
|
69
84
|
}
|
70
85
|
}
|
71
86
|
</script>
|
72
87
|
|
73
88
|
<style lang="scss">
|
74
|
-
/* begin cmd
|
89
|
+
/* begin cmd-headline ------------------------------------------------------------------------------------------ */
|
75
90
|
@import '../assets/styles/variables';
|
76
91
|
|
77
92
|
.cmd-headline {
|
78
93
|
margin-bottom: var(--default-margin);
|
79
94
|
gap: calc(var(--default-gap) / 2);
|
80
95
|
|
96
|
+
&.text-center > * {
|
97
|
+
text-align: center;
|
98
|
+
}
|
99
|
+
|
100
|
+
&.text-right > * {
|
101
|
+
text-align: right;
|
102
|
+
}
|
103
|
+
|
81
104
|
&.has-icon {
|
82
105
|
display: flex;
|
83
106
|
align-items: center;
|
84
107
|
}
|
85
108
|
|
86
109
|
&.has-pre-headline-text {
|
87
|
-
|
110
|
+
text-align: inherit;
|
111
|
+
|
112
|
+
[class*="icon-"] {
|
88
113
|
font-size: 5rem;
|
89
114
|
}
|
90
115
|
}
|
@@ -1,10 +1,10 @@
|
|
1
1
|
<template>
|
2
2
|
<!-- begin iconify-icon -->
|
3
|
-
<Icon v-if="isIconify" :icon="iconClass" :title="tooltip"></Icon>
|
3
|
+
<Icon v-if="isIconify" :icon="iconClass" :title="tooltip" :class="$attrs.class"></Icon>
|
4
4
|
<!-- end iconify-icon -->
|
5
5
|
|
6
|
-
<!--
|
7
|
-
<span v-else :class="iconClass" :title="tooltip"></span>
|
6
|
+
<!-- begin icon from local iconfont -->
|
7
|
+
<span v-else :class="[iconClass, $attrs.class]" :title="tooltip"></span>
|
8
8
|
<!-- end icon from local iconfont -->
|
9
9
|
</template>
|
10
10
|
|
@@ -22,7 +22,7 @@ export default {
|
|
22
22
|
* type that defines where the icon is loaded from
|
23
23
|
* 'auto' is for letting the component check (by classname) if the icon should be loaded from the local iconfont (class="icon-'iconname'")
|
24
24
|
* or if the icon should be loaded form iconify-api (class='fontprefix':'iconname') (https://iconify.design/)
|
25
|
-
* 'iconify' forces the component to load an
|
25
|
+
* 'iconify' forces the component to load an iconify icon (without api) from a local source (which must be defined)
|
26
26
|
*
|
27
27
|
* @allowedValues: 'auto', 'iconify'
|
28
28
|
*/
|
@@ -0,0 +1,55 @@
|
|
1
|
+
<template>
|
2
|
+
<figure :class="['cmd-image', getTextAlign]">
|
3
|
+
<figcaption v-if="figcaption?.show && figcaption?.position === 'top'">{{figcaption?.text}}</figcaption>
|
4
|
+
<img :src="image.src" :alt="image.alt" :title="image.tooltip" />
|
5
|
+
<figcaption v-if="figcaption?.show && figcaption?.position !== 'top'">{{figcaption?.text}}</figcaption>
|
6
|
+
</figure>
|
7
|
+
</template>
|
8
|
+
|
9
|
+
<script>
|
10
|
+
export default {
|
11
|
+
name: "CmdImage",
|
12
|
+
props: {
|
13
|
+
/**
|
14
|
+
* image-object including source, alternative text, tooltip (not required)
|
15
|
+
*/
|
16
|
+
image: {
|
17
|
+
type: Object,
|
18
|
+
required: true
|
19
|
+
},
|
20
|
+
/**
|
21
|
+
* figcaption-object including visibility, position (top/bottom), text
|
22
|
+
*/
|
23
|
+
figcaption: {
|
24
|
+
type: Object,
|
25
|
+
required: false
|
26
|
+
}
|
27
|
+
},
|
28
|
+
computed: {
|
29
|
+
getTextAlign() {
|
30
|
+
if(this.figcaption?.textAlign) {
|
31
|
+
return "text-" + this.figcaption.textAlign
|
32
|
+
}
|
33
|
+
return ''
|
34
|
+
}
|
35
|
+
}
|
36
|
+
}
|
37
|
+
</script>
|
38
|
+
|
39
|
+
<style lang="scss">
|
40
|
+
/* begin cmd-image ------------------------------------------------------------------------------------------ */
|
41
|
+
.cmd-image {
|
42
|
+
&.text-center {
|
43
|
+
figcaption {
|
44
|
+
text-align: center;
|
45
|
+
}
|
46
|
+
}
|
47
|
+
|
48
|
+
&.text-right {
|
49
|
+
figcaption {
|
50
|
+
text-align: right;
|
51
|
+
}
|
52
|
+
}
|
53
|
+
}
|
54
|
+
/* end cmd-image ------------------------------------------------------------------------------------------ */
|
55
|
+
</style>
|
@@ -5,16 +5,16 @@
|
|
5
5
|
@click.prevent="showFancyBox(index)"
|
6
6
|
href="#"
|
7
7
|
:title="getMessage('cmdimagegallery.tooltip.open_large_image')">
|
8
|
-
|
9
|
-
<figcaption v-if="image.figcaption && figcaptionPosition === 'top'">{{ image.figcaption }}</figcaption>
|
10
|
-
<img :src="image.srcImageSmall" :alt="image.alt" />
|
11
|
-
<figcaption v-if="image.figcaption && figcaptionPosition === 'bottom'">{{ image.figcaption }}</figcaption>
|
12
|
-
</figure>
|
8
|
+
<CmdImage :image="image.image" :figcaption="image.figcaption" />
|
13
9
|
</a>
|
14
10
|
</div>
|
15
11
|
</template>
|
16
12
|
|
17
13
|
<script>
|
14
|
+
// import components
|
15
|
+
import CmdImage from "./CmdImage.vue"
|
16
|
+
|
17
|
+
// import functions
|
18
18
|
import {openFancyBox} from "./CmdFancyBox"
|
19
19
|
|
20
20
|
// import mixins
|
@@ -23,6 +23,9 @@ import DefaultMessageProperties from "../mixins/CmdImageGallery/DefaultMessagePr
|
|
23
23
|
|
24
24
|
export default {
|
25
25
|
name: "CmdImageGallery",
|
26
|
+
components: {
|
27
|
+
CmdImage
|
28
|
+
},
|
26
29
|
mixins: [I18n, DefaultMessageProperties],
|
27
30
|
props: {
|
28
31
|
/**
|
@@ -64,22 +67,20 @@ export default {
|
|
64
67
|
border: var(--default-border);
|
65
68
|
border-radius: var(--border-radius);
|
66
69
|
max-height: 30rem;
|
67
|
-
|
68
|
-
&:hover, &:active, &:focus {
|
69
|
-
img {
|
70
|
-
border: var(--primary-border);
|
71
|
-
}
|
72
|
-
|
73
|
-
figcaption {
|
74
|
-
text-decoration: none;
|
75
|
-
}
|
76
|
-
}
|
77
70
|
}
|
78
71
|
|
79
72
|
figcaption {
|
80
73
|
padding: calc(var(--default-padding) / 2);
|
81
74
|
}
|
82
75
|
|
76
|
+
&:hover, &:active, &:focus {
|
77
|
+
text-decoration: none;
|
78
|
+
|
79
|
+
img {
|
80
|
+
border: var(--primary-border);
|
81
|
+
}
|
82
|
+
}
|
83
|
+
|
83
84
|
& + .pager {
|
84
85
|
margin-top: calc(var(--default-margin) * 2);
|
85
86
|
}
|
@@ -1,20 +1,30 @@
|
|
1
1
|
<template>
|
2
|
-
<div class="grid-container-create-columns
|
2
|
+
<div class="cmd-imagezoom grid-container-create-columns">
|
3
3
|
<div class="grid-small-item">
|
4
4
|
<!-- begin small image -->
|
5
5
|
<a href="#" class="thumbnails-imagezoom">
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
6
|
+
<!-- begin CmdImage -->
|
7
|
+
<CmdImage
|
8
|
+
:image="imageSmall"
|
9
|
+
@mouseover="onMouseOver"
|
10
|
+
@mousemove="onMouseMove"
|
11
|
+
@mouseout="onMouseOut"
|
12
|
+
/>
|
13
|
+
<!-- end CmdImage -->
|
11
14
|
</a>
|
12
15
|
<!-- end small image -->
|
13
16
|
</div>
|
14
17
|
|
15
18
|
<!-- begin large image -->
|
16
19
|
<div v-if="showLargeImage" class="zoom-container grid-large-item">
|
17
|
-
|
20
|
+
<!-- begin CmdImage -->
|
21
|
+
<CmdImage
|
22
|
+
:image="imageLarge"
|
23
|
+
@mouseover="onMouseOver"
|
24
|
+
@mousemove="onMouseMove"
|
25
|
+
@mouseout="onMouseOut"
|
26
|
+
/>
|
27
|
+
<!-- end CmdImage -->
|
18
28
|
</div>
|
19
29
|
<div v-if="showLargeImage" class="zoom-overlay"></div>
|
20
30
|
<!-- end large image -->
|
@@ -22,21 +32,27 @@
|
|
22
32
|
</template>
|
23
33
|
|
24
34
|
<script>
|
35
|
+
// import components
|
36
|
+
import CmdImage from "./CmdImage"
|
37
|
+
|
25
38
|
export default {
|
26
39
|
name: "CmdImageZoom",
|
40
|
+
components: {
|
41
|
+
CmdImage
|
42
|
+
},
|
27
43
|
props: {
|
28
44
|
/**
|
29
|
-
*
|
45
|
+
* object for small image
|
30
46
|
*/
|
31
|
-
|
32
|
-
type:
|
47
|
+
imageSmall: {
|
48
|
+
type: Object,
|
33
49
|
required: true
|
34
50
|
},
|
35
51
|
/**
|
36
|
-
*
|
52
|
+
* object for large image
|
37
53
|
*/
|
38
|
-
|
39
|
-
type:
|
54
|
+
imageLarge: {
|
55
|
+
type: Object,
|
40
56
|
required: true
|
41
57
|
}
|
42
58
|
},
|
@@ -32,7 +32,6 @@
|
|
32
32
|
<a v-if="required || inputRequirements.length"
|
33
33
|
href="#"
|
34
34
|
@click.prevent
|
35
|
-
:class="getStatusIconClass"
|
36
35
|
:title="validationTooltip"
|
37
36
|
:aria-errormessage="tooltipId"
|
38
37
|
aria-live="assertive"
|
@@ -290,7 +289,7 @@ export default {
|
|
290
289
|
.label-text {
|
291
290
|
display: inline-flex;
|
292
291
|
|
293
|
-
>
|
292
|
+
> [class*="icon-"] {
|
294
293
|
margin-left: calc(var(--default-margin) / 2);
|
295
294
|
}
|
296
295
|
}
|