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
@@ -10,6 +10,7 @@
10
10
  </a>
11
11
  </li>
12
12
  </ul>
13
+
13
14
  <!-- begin slot -->
14
15
  <template v-if="useSlot">
15
16
  <div v-show="showTab === index - 1" v-for="index in tabs.length" :key="index" aria-live="assertive">
@@ -19,6 +20,7 @@
19
20
  </div>
20
21
  </template>
21
22
  <!-- end slot -->
23
+
22
24
  <div v-else aria-live="assertive">
23
25
  <!-- begin CmdHeadline -->
24
26
  <CmdHeadline
@@ -125,37 +127,35 @@ export default {
125
127
  list-style-type: none;
126
128
  background: var(--color-scheme-background-color);
127
129
 
128
- &.active {
129
- border-color: var(--primary-color);
130
- }
131
-
132
130
  a {
133
131
  display: flex;
134
132
  align-items: center;
135
133
  justify-content: center;
136
134
  padding: var(--default-padding);
137
- color: var(--color-scheme-text-color);
138
135
  border: var(--default-border);
139
136
  border-bottom: 0;
140
137
  border-top-left-radius: var(--border-radius);
141
138
  border-top-right-radius: var(--border-radius);
142
139
  text-decoration: none;
143
140
 
144
- &:hover, &:active, &:focus, &.active {
141
+ &:hover, &:active, &:focus {
145
142
  cursor: pointer;
146
- color: var(--hyperlink-color);
143
+ color: var(--hyperlink-color-highlighted);
147
144
  border-color: var(--hyperlink-color);
148
145
 
149
- span, span[class*="icon"] {
146
+ span, [class*="icon-"] {
150
147
  color: inherit;
151
148
  }
152
149
  }
153
150
 
154
151
  &.active {
155
- color: var(--pure-white);
156
-
157
152
  &:hover, &:active, &:focus {
158
- background: var(--hyperlink-color);
153
+ color: var(--hyperlink-color-highlighted);
154
+ background: var(--pure-white);
155
+
156
+ span, [class*="icon-"] {
157
+ color: inherit;
158
+ }
159
159
  }
160
160
  }
161
161
  }
@@ -9,13 +9,9 @@
9
9
 
10
10
  <!-- begin list of images to slide -->
11
11
  <transition-group name="slide" tag="ul">
12
- <li v-for="(image, index) in thumbnails" :key="image.imgId" :class="{'active' : imgIndex === index}">
12
+ <li v-for="(image, index) in thumbnails" :key="image.id" :class="{'active' : imgIndex === index}">
13
13
  <a href="#" @click.prevent="showFancyBox(index)" :title="getMessage('cmdthumbnailscroller.tooltip.open_large_image')">
14
- <figure>
15
- <figcaption v-if="figcaption.show && figcaption.position === 'above-image' && image.figcaption.length">{{ image.figcaption }}</figcaption>
16
- <img :src="image.srcImageSmall" :alt="image.alt"/>
17
- <figcaption v-if="figcaption.show && figcaption.position === 'below-image' && image.figcaption.length">{{ image.figcaption }}</figcaption>
18
- </figure>
14
+ <CmdImage :image="image.image" :figcaption="image.figcaption" />
19
15
  </a>
20
16
  </li>
21
17
  </transition-group>
@@ -31,19 +27,21 @@
31
27
  </template>
32
28
 
33
29
  <script>
34
- // import mixins
35
- import I18n from "../mixins/I18n"
36
- import DefaultMessageProperties from "../mixins/CmdThumbnailScroller/DefaultMessageProperties"
37
-
38
30
  // import components
31
+ import CmdImage from "./CmdImage.vue"
39
32
  import CmdSlideButton from "./CmdSlideButton.vue"
40
33
 
41
34
  // import functions
42
35
  import {openFancyBox} from './CmdFancyBox.vue'
43
36
 
37
+ // import mixins
38
+ import I18n from "../mixins/I18n"
39
+ import DefaultMessageProperties from "../mixins/CmdThumbnailScroller/DefaultMessageProperties"
40
+
44
41
  export default {
45
42
  name: "CmdThumbnailScroller",
46
43
  components: {
44
+ CmdImage,
47
45
  CmdSlideButton
48
46
  },
49
47
  mixins: [
@@ -142,13 +140,18 @@ export default {
142
140
  if (this.allowOpenFancyBox) {
143
141
  openFancyBox({fancyBoxGallery: this.thumbnails, defaultGalleryIndex: index})
144
142
  }
145
- this.$emit("click", this.thumbnails[index].imgId)
143
+ this.$emit("click", this.thumbnails[index].id)
146
144
  }
147
145
  },
148
146
  watch: {
149
147
  thumbnailScrollerItems: {
150
148
  handler() {
151
- this.thumbnails = [...this.thumbnailScrollerItems]
149
+ // change keys for images to fit CmdImage-properties
150
+ this.thumbnails = this.thumbnailScrollerItems.map((item) => {
151
+ const newItem = {image: {...item.image}, figcaption: {...item.figcaption}}
152
+ newItem.image.src = newItem.image.srcImageSmall
153
+ return newItem
154
+ })
152
155
  },
153
156
  immediate: true
154
157
  }
@@ -179,7 +179,7 @@ export default {
179
179
  .cmd-tooltip {
180
180
  padding: .6rem .7rem .4rem .7rem;
181
181
  line-height: 100%;
182
- font-size: 1.1rem;
182
+ font-size: var(--font-size-small);
183
183
  position: fixed;
184
184
  background: var(--color-scheme-background-color);
185
185
  z-index: 100;
@@ -196,9 +196,9 @@ export default {
196
196
  a {
197
197
  margin-left: auto;
198
198
 
199
- span[class*="icon"] {
199
+ [class*="icon-"] {
200
200
  padding-left: 1rem;
201
- font-size: 1.1rem;
201
+ font-size: var(--font-size-small);
202
202
  }
203
203
  }
204
204
  }
@@ -1182,32 +1182,32 @@ export default {
1182
1182
  & + .cmd-form-element {
1183
1183
  display: none;
1184
1184
  }
1185
- }
1186
1185
 
1187
- .drop-area {
1188
- border: var(--default-border);
1189
- border-style: dashed;
1190
- background: var(--color-scheme-background-color);
1191
- padding: (var(--default-padding));
1192
- text-align: center;
1186
+ .drop-area {
1187
+ border: var(--default-border);
1188
+ border-style: dashed;
1189
+ background: var(--color-scheme-background-color);
1190
+ padding: (var(--default-padding));
1191
+ text-align: center;
1193
1192
 
1194
- &.allow-drop {
1195
- border-style: solid;
1196
- }
1193
+ &.allow-drop {
1194
+ border-style: solid;
1195
+ }
1197
1196
 
1198
- > span[class*="icon"] {
1199
- font-size: 5rem;
1197
+ > [class*="icon-"] {
1198
+ font-size: 5rem;
1199
+ }
1200
1200
  }
1201
- }
1202
1201
 
1203
- a.drop-area {
1204
- display: inline-flex;
1205
- flex-direction: column;
1206
- text-decoration: none;
1207
- background: var(--default-background-color);
1202
+ a.drop-area {
1203
+ display: inline-flex;
1204
+ flex-direction: column;
1205
+ text-decoration: none;
1206
+ background: var(--default-background-color);
1208
1207
 
1209
- span {
1210
- margin: 0;
1208
+ span {
1209
+ margin: 0;
1210
+ }
1211
1211
  }
1212
1212
  }
1213
1213
 
@@ -68,6 +68,13 @@
68
68
  "if false textBody-property must be set"
69
69
  ]
70
70
  },
71
+ "image": {
72
+ "comments": [
73
+ "image-object for box-body of content-box",
74
+ "",
75
+ "src and altText must be set if image is sed"
76
+ ]
77
+ },
71
78
  "textBody": {
72
79
  "comments": [
73
80
  "String used as content (placed in a paragraph-tag) for box-body",
@@ -14,11 +14,6 @@
14
14
  "set if content should be loaded by url"
15
15
  ]
16
16
  },
17
- "figcaption": {
18
- "comments": [
19
- "figcaption if image is given by url"
20
- ]
21
- },
22
17
  "fancyboxOptions": {
23
18
  "comments": [
24
19
  "options to show at top (closeIcon, printButtons)"
@@ -64,15 +59,10 @@
64
59
  ]
65
60
  }
66
61
  },
67
- "altText": {
62
+ "cmdImage": {
68
63
  "comments": [
69
- "alternative text for large image (required for images)"
70
- ],
71
- "annotations": {
72
- "requiredForAccessibility": [
73
- "true"
74
- ]
75
- }
64
+ "properties for CmdImage-component"
65
+ ]
76
66
  },
77
67
  "cmdHeadline": {
78
68
  "comments": [
@@ -18,5 +18,15 @@
18
18
  "comments": [
19
19
  "icon-class for icon shown left/before headline"
20
20
  ]
21
+ },
22
+ "textAlign": {
23
+ "comments": [
24
+ "text-alignment"
25
+ ],
26
+ "annotations": {
27
+ "allowedValues": [
28
+ "\"left\", \"center\", \"right\""
29
+ ]
30
+ }
21
31
  }
22
32
  }
@@ -4,7 +4,7 @@
4
4
  "type that defines where the icon is loaded from",
5
5
  "'auto' is for letting the component check (by classname) if the icon should be loaded from the local iconfont (class=\"icon-'iconname'\")",
6
6
  " or if the icon should be loaded form iconify-api (class='fontprefix':'iconname') (https://iconify.design/)",
7
- "'iconify' forces the component to load an iconfify icon (without api) from a local source (which must be defined)"
7
+ "'iconify' forces the component to load an iconify icon (without api) from a local source (which must be defined)"
8
8
  ],
9
9
  "annotations": {
10
10
  "allowedValues": [
@@ -0,0 +1,12 @@
1
+ {
2
+ "image": {
3
+ "comments": [
4
+ "image-object including source, alternative text, tooltip (not required)"
5
+ ]
6
+ },
7
+ "figcaption": {
8
+ "comments": [
9
+ "figcaption-object including visibility, position (top/bottom), text"
10
+ ]
11
+ }
12
+ }
@@ -1,12 +1,12 @@
1
1
  {
2
- "smallImageUrl": {
2
+ "imageSmall": {
3
3
  "comments": [
4
- "url for small images"
4
+ "object for small image"
5
5
  ]
6
6
  },
7
- "largeImageUrl": {
7
+ "imageLarge": {
8
8
  "comments": [
9
- "url for large image"
9
+ "object for large image"
10
10
  ]
11
11
  }
12
12
  }
@@ -1,7 +1,7 @@
1
1
  {
2
- "items": {
2
+ "pages": {
3
3
  "comments": [
4
- "number of items displayed"
4
+ "number of pages displayed"
5
5
  ]
6
6
  },
7
7
  "itemsPerPage": {
@@ -9,14 +9,19 @@
9
9
  "number of items shown per page"
10
10
  ]
11
11
  },
12
- "showLinksAsButtons": {
12
+ "linkType": {
13
13
  "comments": [
14
- "show links as buttons"
15
- ]
14
+ "set type of links"
15
+ ],
16
+ "annotations": {
17
+ "allowedValues": [
18
+ "\"href\", \"button\""
19
+ ]
20
+ }
16
21
  },
17
- "prevButton": {
22
+ "prevLink": {
18
23
  "comments": [
19
- "button to switch to previous page"
24
+ "link to switch to previous page"
20
25
  ],
21
26
  "annotations": {
22
27
  "requiredForAccessibility": [
@@ -24,9 +29,9 @@
24
29
  ]
25
30
  }
26
31
  },
27
- "nextButton": {
32
+ "nextLink": {
28
33
  "comments": [
29
- "button to switch to next page"
34
+ "link to switch to next page"
30
35
  ],
31
36
  "annotations": {
32
37
  "requiredForAccessibility": [
package/src/index.js CHANGED
@@ -18,6 +18,7 @@ export { default as CmdFormFilters } from '@/components/CmdFormFilters'
18
18
  export { default as CmdGoogleMaps } from '@/components/CmdGoogleMaps'
19
19
  export { default as CmdHeadline } from '@/components/CmdHeadline'
20
20
  export { default as CmdIcon } from '@/components/CmdIcon'
21
+ export { default as CmdImage } from '@/components/CmdImage'
21
22
  export { default as CmdImageGallery } from '@/components/CmdImageGallery'
22
23
  export { default as CmdImageZoom } from '@/components/CmdImageZoom'
23
24
  export { default as CmdInputGroup } from '@/components/CmdInputGroup'
@@ -48,8 +49,9 @@ export { default as CmdWidthLimitationWrapper } from '@/components/CmdWidthLimit
48
49
  export { default as DirFocus } from '@/directives/focus'
49
50
  export { default as DirTelephone } from '@/directives/telephone'
50
51
 
51
- // export directives
52
+ // export functions
52
53
  export { createUuid, createHtmlId } from '@/utils/common'
54
+ export { getFileExtension } from '@/utils/getFileExtension'
53
55
 
54
56
  // export composables
55
57
  export { useSequence } from '@/composables/sequence'
@@ -8,9 +8,12 @@ export default {
8
8
  "cmdaddressdata.labeltext.mobile_phone": "Mobile phone:",
9
9
  "cmdaddressdata.labeltext.fax": "Fax:",
10
10
  "cmdaddressdata.labeltext.email": "Email:",
11
- "cmdaddressdata.title.open_address_on_google_maps:": "Open address on GoogleMaps™ in new tab",
11
+ "cmdaddressdata.labeltext.website": "Web site:",
12
+ "cmdaddressdata.labeltext.custom": "Custom:",
13
+ "cmdaddressdata.title.open_address_on_google_maps:": "Open address on GoogleMaps™ (in new tab)",
12
14
  "cmdaddressdata.title.call_number": "Call number",
13
- "cmdaddressdata.title.send_email": "Send email"
15
+ "cmdaddressdata.title.send_email": "Send email",
16
+ "cmdaddressdata.title.visit_website": "Visit web site (in new tab)"
14
17
  }
15
18
  }
16
19
  }
@@ -3,7 +3,9 @@ export default {
3
3
  return {
4
4
  defaultMessageProperties: {
5
5
  "cmdbox.productbox.new": "New",
6
- "cmdbox.productbox.article_no": "Article No:"
6
+ "cmdbox.productbox.article_no": "Article No:",
7
+ "cmdbox.contentbox.collapse_text": "Collapse text",
8
+ "cmdbox.contentbox.expand_text": "Expand text"
7
9
  }
8
10
  }
9
11
  }
@@ -0,0 +1,10 @@
1
+ export default {
2
+ data() {
3
+ return {
4
+ defaultMessageProperties: {
5
+ "cmdpager.tooltip.go_to_page": "Go to page {0}",
6
+ "cmdpager.tooltip.not_possible": "Not possible (current page is shown already)"
7
+ }
8
+ }
9
+ }
10
+ }