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.
Files changed (48) hide show
  1. package/dist/comand-component-library.css +1 -1
  2. package/dist/comand-component-library.umd.min.js +1 -1
  3. package/package.json +2 -2
  4. package/src/App.vue +97 -28
  5. package/src/assets/data/address-data.json +8 -0
  6. package/src/assets/data/image-gallery.json +44 -20
  7. package/src/assets/data/image.json +28 -0
  8. package/src/assets/data/slideshow.json +68 -51
  9. package/src/assets/data/thumbnail-scroller.json +96 -40
  10. package/src/assets/styles/global-styles.scss +1 -1
  11. package/src/components/CmdAddressData.vue +45 -2
  12. package/src/components/CmdBox.vue +112 -62
  13. package/src/components/CmdCompanyLogo.vue +19 -2
  14. package/src/components/CmdFakeSelect.vue +2 -2
  15. package/src/components/CmdFancyBox.vue +41 -43
  16. package/src/components/CmdFormElement.vue +52 -42
  17. package/src/components/CmdFormFilters.vue +1 -1
  18. package/src/components/CmdHeadline.vue +29 -4
  19. package/src/components/CmdIcon.vue +4 -4
  20. package/src/components/CmdImage.vue +55 -0
  21. package/src/components/CmdImageGallery.vue +16 -15
  22. package/src/components/CmdImageZoom.vue +29 -13
  23. package/src/components/CmdInputGroup.vue +1 -2
  24. package/src/components/CmdListOfRequirements.vue +1 -1
  25. package/src/components/CmdLoginForm.vue +1 -1
  26. package/src/components/CmdMainNavigation.vue +3 -3
  27. package/src/components/CmdMultistepFormProgressBar.vue +9 -9
  28. package/src/components/CmdPager.vue +124 -88
  29. package/src/components/CmdShareButtons.vue +1 -1
  30. package/src/components/CmdSlideButton.vue +10 -3
  31. package/src/components/CmdSlideshow.vue +38 -31
  32. package/src/components/CmdSystemMessage.vue +32 -16
  33. package/src/components/CmdTable.vue +1 -1
  34. package/src/components/CmdTabs.vue +11 -11
  35. package/src/components/CmdThumbnailScroller.vue +15 -12
  36. package/src/components/CmdTooltip.vue +3 -3
  37. package/src/components/CmdUploadForm.vue +20 -20
  38. package/src/documentation/generated/CmdBoxPropertyDescriptions.json +7 -0
  39. package/src/documentation/generated/CmdFancyBoxPropertyDescriptions.json +3 -13
  40. package/src/documentation/generated/CmdHeadlinePropertyDescriptions.json +10 -0
  41. package/src/documentation/generated/CmdIconPropertyDescriptions.json +1 -1
  42. package/src/documentation/generated/CmdImagePropertyDescriptions.json +12 -0
  43. package/src/documentation/generated/CmdImageZoomPropertyDescriptions.json +4 -4
  44. package/src/documentation/generated/CmdPagerPropertyDescriptions.json +14 -9
  45. package/src/index.js +3 -1
  46. package/src/mixins/CmdAddressData/DefaultMessageProperties.js +5 -2
  47. package/src/mixins/CmdBox/DefaultMessageProperties.js +3 -1
  48. 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 primary"
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 primary"
34
+ class="button print-grayscale"
36
35
  :title="fancyboxOptions.printButtons.grayscale.tooltip"
37
- id="print-grayscale"
38
36
  @click.prevent="printInGrayscale = true">
39
- <!-- begin CmdIcon -->
40
- <CmdIcon :iconClass="fancyboxOptions.printButtons.grayscale.iconClass" :type="fancyboxOptions.printButtons.grayscale.iconType" />
41
- <!-- end CmdIcon -->
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
- <!-- begin CmdIcon -->
54
- <CmdIcon :iconClass="fancyboxOptions.closeIcon.iconClass" :type="fancyboxOptions.closeIcon.iconType" />
55
- <!-- end CmdIcon -->
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
- <figure>
64
- <img :src="fancyBoxImageUrl" :alt="altText" />
65
- <figcaption v-if="figcaption">{{ figcaption }}</figcaption>
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
- <figure>
78
- <img :src="fancyBoxGallery[index].srcImageLarge" :alt="fancyBoxGallery[index].alt"/>
79
- <figcaption>{{ fancyBoxGallery[index].figcaption }}</figcaption>
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
- * alternative text for large image (required for images)
252
- *
253
- * @requiredForAccessibility: true
242
+ * properties for CmdImage-component
254
243
  */
255
- altText: {
256
- type: String,
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].imgId === imgId) {
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
- &.icon-print {
484
- 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%);
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
- &:hover, &:active, &:focus {
490
- background: var(--pure-white);
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
- &[class*="icon"] {
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
- <!-- begin icon inside field -->
62
- <span v-if="$attrs.type !== 'checkbox' && $attrs.type !== 'radio' && fieldIconClass" :class="['place-inside', fieldIconClass]"></span>
63
- <!-- end icon inside field -->
64
-
65
- <!-- begin inputfield -->
66
- <template v-if="element === 'input' && $attrs.type !== 'checkbox' && $attrs.type !== 'radio' && $attrs.type !== 'search'">
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
- </template>
84
- <!-- end inputfield -->
85
-
86
- <!-- begin show-password-icon -->
87
- <a v-if="$attrs.type === 'password'"
88
- href="#"
89
- @mousedown.prevent="showPassword"
90
- @mouseup.prevent="hidePassword"
91
- @mouseleave.prevent="hidePassword"
92
- @click.prevent
93
- :title="iconPasswordVisible.tooltip">
94
- <!-- begin CmdIcon -->
95
- <CmdIcon :iconClass="['place-inside', iconPasswordVisible.iconClass]" />
96
- <!-- end CmdIcon -->
97
- </a>
98
- <!-- end show-password-icon -->
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.show" href="#" @click.prevent="$emit('update:modelValue', '')" :title="iconDelete.tooltip">
206
+ <a v-if="iconDelete?.show" href="#" @click.prevent="$emit('update:modelValue', '')" :title="iconDelete?.tooltip">
199
207
  <!-- begin CmdIcon -->
200
- <CmdIcon :iconClass="iconDelete.iconClass" :type="iconDelete.iconType" />
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[class*="icon"] {
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
- & + a[class*="icon"] {
894
+ right: 0;
895
+
896
+ & + a {
887
897
  right: 5rem;
888
898
  }
889
899
  }
@@ -129,7 +129,7 @@ export default {
129
129
  }
130
130
 
131
131
  a {
132
- padding: 0 calc(var(--default-padding) / 2);
132
+ padding: calc(var(--default-padding) / 2);
133
133
  display: flex;
134
134
  align-items: center;
135
135
  text-decoration: none;
@@ -1,7 +1,7 @@
1
1
  <template>
2
- <div :class="['cmd-headline', { 'has-pre-headline-text': preHeadlineText, 'has-icon': iconClass}]">
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.iconClass" :type="headlineIcon.iconType" />
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--headline ------------------------------------------------------------------------------------------ */
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
- [class*="icon"] {
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
- <!-- being icon from local iconfont -->
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 iconfify icon (without api) from a local source (which must be defined)
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
- <figure>
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 cmd-imagezoom">
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
- <img :src="smallImageUrl"
7
- alt="Small Image"
8
- @mouseover="onMouseOver"
9
- @mousemove="onMouseMove"
10
- @mouseout="onMouseOut"/>
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
- <img :src="largeImageUrl" alt="Large Image"/>
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
- * url for small images
45
+ * object for small image
30
46
  */
31
- smallImageUrl: {
32
- type: String,
47
+ imageSmall: {
48
+ type: Object,
33
49
  required: true
34
50
  },
35
51
  /**
36
- * url for large image
52
+ * object for large image
37
53
  */
38
- largeImageUrl: {
39
- type: String,
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
- > a[class*="icon"] {
292
+ > [class*="icon-"] {
294
293
  margin-left: calc(var(--default-margin) / 2);
295
294
  }
296
295
  }
@@ -182,7 +182,7 @@ export default {
182
182
  color: var(--status-color);
183
183
  }
184
184
 
185
- span[class*="icon"] {
185
+ [class*="icon-"] {
186
186
  color: var(--status-color);
187
187
  }
188
188
 
@@ -446,7 +446,7 @@ export default {
446
446
  text-decoration: none;
447
447
  flex: none;
448
448
 
449
- span[class*="icon"] {
449
+ [class*="icon-"] {
450
450
  text-decoration: none;
451
451
  }
452
452
  }