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
@@ -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
|
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,
|
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
|
-
|
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.
|
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
|
-
<
|
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].
|
143
|
+
this.$emit("click", this.thumbnails[index].id)
|
146
144
|
}
|
147
145
|
},
|
148
146
|
watch: {
|
149
147
|
thumbnailScrollerItems: {
|
150
148
|
handler() {
|
151
|
-
|
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:
|
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
|
-
|
199
|
+
[class*="icon-"] {
|
200
200
|
padding-left: 1rem;
|
201
|
-
font-size:
|
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
|
-
|
1189
|
-
|
1190
|
-
|
1191
|
-
|
1192
|
-
|
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
|
-
|
1195
|
-
|
1196
|
-
|
1193
|
+
&.allow-drop {
|
1194
|
+
border-style: solid;
|
1195
|
+
}
|
1197
1196
|
|
1198
|
-
|
1199
|
-
|
1197
|
+
> [class*="icon-"] {
|
1198
|
+
font-size: 5rem;
|
1199
|
+
}
|
1200
1200
|
}
|
1201
|
-
}
|
1202
1201
|
|
1203
|
-
a.drop-area {
|
1204
|
-
|
1205
|
-
|
1206
|
-
|
1207
|
-
|
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
|
-
|
1210
|
-
|
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
|
-
"
|
62
|
+
"cmdImage": {
|
68
63
|
"comments": [
|
69
|
-
"
|
70
|
-
]
|
71
|
-
"annotations": {
|
72
|
-
"requiredForAccessibility": [
|
73
|
-
"true"
|
74
|
-
]
|
75
|
-
}
|
64
|
+
"properties for CmdImage-component"
|
65
|
+
]
|
76
66
|
},
|
77
67
|
"cmdHeadline": {
|
78
68
|
"comments": [
|
@@ -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
|
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": [
|
@@ -1,7 +1,7 @@
|
|
1
1
|
{
|
2
|
-
"
|
2
|
+
"pages": {
|
3
3
|
"comments": [
|
4
|
-
"number of
|
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
|
-
"
|
12
|
+
"linkType": {
|
13
13
|
"comments": [
|
14
|
-
"
|
15
|
-
]
|
14
|
+
"set type of links"
|
15
|
+
],
|
16
|
+
"annotations": {
|
17
|
+
"allowedValues": [
|
18
|
+
"\"href\", \"button\""
|
19
|
+
]
|
20
|
+
}
|
16
21
|
},
|
17
|
-
"
|
22
|
+
"prevLink": {
|
18
23
|
"comments": [
|
19
|
-
"
|
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
|
-
"
|
32
|
+
"nextLink": {
|
28
33
|
"comments": [
|
29
|
-
"
|
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
|
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.
|
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
|
}
|