comand-component-library 4.0.19 → 4.0.22
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.js +1535 -1535
- package/dist/comand-component-library.umd.cjs +3 -3
- package/dist/style.css +1 -1
- package/package.json +3 -2
- package/src/ComponentLibrary.vue +78 -25
- package/src/assets/data/social-networks-page-by-json.json +1 -1
- package/src/assets/data/social-networks-page-by-property.json +1 -1
- package/src/assets/data/tabs.json +3 -3
- package/src/assets/fonts/iconfonts/logos-iconfont/fonts/icomoon-logos.woff +0 -0
- package/src/assets/fonts/iconfonts/logos-iconfont/fonts/icomoon.eot +0 -0
- package/src/assets/fonts/iconfonts/logos-iconfont/fonts/icomoon.svg +46 -0
- package/src/assets/fonts/iconfonts/logos-iconfont/fonts/icomoon.ttf +0 -0
- package/src/assets/fonts/iconfonts/logos-iconfont/icomoon-logos.woff +0 -0
- package/src/assets/fonts/iconfonts/logos-iconfont/selection.json +1 -1
- package/src/assets/styles/logos-iconfont.css +44 -33
- package/src/componentSettingsDataAndControls.vue +7 -7
- package/src/components/CmdBackToTopButton.vue +1 -1
- package/src/components/CmdBasicForm.vue +2 -2
- package/src/components/CmdBox.vue +24 -3
- package/src/components/CmdBoxWrapper.vue +2 -2
- package/src/components/CmdFakeSelect.vue +2 -2
- package/src/components/CmdListOfLinks.vue +1 -1
- package/src/components/CmdLoginForm.vue +1 -1
- package/src/components/CmdMainNavigation.vue +2 -2
- package/src/components/CmdMultistepFormProgressBar.vue +1 -1
- package/src/components/CmdPagination.vue +2 -2
- package/src/components/CmdProgressBar.vue +1 -0
- package/src/components/CmdSidebar.vue +4 -4
- package/src/components/CmdSiteHeader.vue +3 -3
- package/src/components/CmdSiteSearch.vue +2 -2
- package/src/components/CmdSlideButton.vue +4 -6
- package/src/components/CmdSlideshow.vue +4 -3
- package/src/components/CmdTable.vue +6 -3
- package/src/components/CmdTabs.vue +1 -1
- package/src/components/CmdThumbnailScroller.vue +8 -2
- package/src/components/CmdUploadForm.vue +1 -0
- package/src/documentation/generated/CmdFakeSelectPropertyDescriptions.json +1 -1
- package/src/pages/ContactInformation.vue +4 -4
- package/src/pages/PageOverview.vue +5 -5
- package/src/pages/PageWrapper.vue +1 -1
|
@@ -395,7 +395,7 @@ export default {
|
|
|
395
395
|
type: Object,
|
|
396
396
|
default: function () {
|
|
397
397
|
return {
|
|
398
|
-
iconClass: "icon-
|
|
398
|
+
iconClass: "icon-chevron-one-stripe-up",
|
|
399
399
|
tooltip: "Close content",
|
|
400
400
|
iconType: "auto"
|
|
401
401
|
}
|
|
@@ -410,7 +410,7 @@ export default {
|
|
|
410
410
|
type: Object,
|
|
411
411
|
default: function () {
|
|
412
412
|
return {
|
|
413
|
-
iconClass: "icon-
|
|
413
|
+
iconClass: "icon-chevron-one-stripe-down",
|
|
414
414
|
tooltip: "Show content",
|
|
415
415
|
iconType: "auto"
|
|
416
416
|
}
|
|
@@ -827,6 +827,21 @@ export default {
|
|
|
827
827
|
li {
|
|
828
828
|
flex: 1;
|
|
829
829
|
border-radius: var(--box-border-radius);
|
|
830
|
+
border-top-left-radius: 0;
|
|
831
|
+
border-top-right-radius: 0;
|
|
832
|
+
|
|
833
|
+
&:not(:only-child) {
|
|
834
|
+
border-bottom-left-radius: 0;
|
|
835
|
+
border-bottom-right-radius: 0;
|
|
836
|
+
|
|
837
|
+
&:first-child {
|
|
838
|
+
border-bottom-left-radius: var(--box-border-radius);
|
|
839
|
+
}
|
|
840
|
+
|
|
841
|
+
&:last-child {
|
|
842
|
+
border-bottom-right-radius: var(--box-border-radius);
|
|
843
|
+
}
|
|
844
|
+
}
|
|
830
845
|
|
|
831
846
|
a {
|
|
832
847
|
flex: 1;
|
|
@@ -834,7 +849,8 @@ export default {
|
|
|
834
849
|
text-align: center;
|
|
835
850
|
background: var(--color-scheme-background);
|
|
836
851
|
border-left: var(--box-border);
|
|
837
|
-
border-radius:
|
|
852
|
+
border-radius: inherit;
|
|
853
|
+
line-height: 100%;
|
|
838
854
|
}
|
|
839
855
|
|
|
840
856
|
&:hover, &:active, &:focus {
|
|
@@ -878,6 +894,11 @@ export default {
|
|
|
878
894
|
.cmd-list-of-links {
|
|
879
895
|
background: none;
|
|
880
896
|
|
|
897
|
+
ul li {
|
|
898
|
+
aspect-ratio: 1/1;
|
|
899
|
+
border-radius: var(--box-border-radius) !important; /* overwrite settings from default-/column-view */
|
|
900
|
+
}
|
|
901
|
+
|
|
881
902
|
ul, ul * {
|
|
882
903
|
border: 0;
|
|
883
904
|
background: inherit;
|
|
@@ -103,7 +103,7 @@ export default {
|
|
|
103
103
|
type: Object,
|
|
104
104
|
default() {
|
|
105
105
|
return {
|
|
106
|
-
iconClass: "icon-
|
|
106
|
+
iconClass: "icon-chevron-two-stripes-down",
|
|
107
107
|
tooltip: "Collapse all boxes"
|
|
108
108
|
}
|
|
109
109
|
}
|
|
@@ -115,7 +115,7 @@ export default {
|
|
|
115
115
|
type: Object,
|
|
116
116
|
default() {
|
|
117
117
|
return {
|
|
118
|
-
iconClass: "icon-
|
|
118
|
+
iconClass: "icon-chevron-two-stripes-up",
|
|
119
119
|
tooltip: "Expand all boxes"
|
|
120
120
|
}
|
|
121
121
|
}
|
|
@@ -279,13 +279,13 @@ export default {
|
|
|
279
279
|
* icon for dropdown-icon (i.e. an angle/arrow)
|
|
280
280
|
*
|
|
281
281
|
* @requiredForAccessibility: partial
|
|
282
|
-
* @defaultIcon: icon-
|
|
282
|
+
* @defaultIcon: icon-chevron-one-stripe-down
|
|
283
283
|
*/
|
|
284
284
|
iconDropdown: {
|
|
285
285
|
type: Object,
|
|
286
286
|
default() {
|
|
287
287
|
return {
|
|
288
|
-
iconClass: "icon-
|
|
288
|
+
iconClass: "icon-chevron-one-stripe-down",
|
|
289
289
|
tooltip: "Toggle dropdown visibility",
|
|
290
290
|
iconType: "auto"
|
|
291
291
|
}
|
|
@@ -247,14 +247,14 @@ export default {
|
|
|
247
247
|
*/
|
|
248
248
|
subentriesIconClass: {
|
|
249
249
|
type: String,
|
|
250
|
-
default: "icon-
|
|
250
|
+
default: "icon-chevron-one-stripe-down"
|
|
251
251
|
},
|
|
252
252
|
/**
|
|
253
253
|
* icon to show if a sub-entry has further sub-entries
|
|
254
254
|
*/
|
|
255
255
|
subSubentriesIconClass: {
|
|
256
256
|
type: String,
|
|
257
|
-
default: "icon-
|
|
257
|
+
default: "icon-chevron-one-stripe-right"
|
|
258
258
|
}
|
|
259
259
|
},
|
|
260
260
|
methods: {
|
|
@@ -105,7 +105,7 @@ export default {
|
|
|
105
105
|
type: Object,
|
|
106
106
|
default: function () {
|
|
107
107
|
return {
|
|
108
|
-
iconClass: "icon-
|
|
108
|
+
iconClass: "icon-chevron-one-stripe-left",
|
|
109
109
|
text: "prev",
|
|
110
110
|
showText: true
|
|
111
111
|
}
|
|
@@ -120,7 +120,7 @@ export default {
|
|
|
120
120
|
type: Object,
|
|
121
121
|
default: function () {
|
|
122
122
|
return {
|
|
123
|
-
iconClass: "icon-
|
|
123
|
+
iconClass: "icon-chevron-one-stripe-right",
|
|
124
124
|
text: "next",
|
|
125
125
|
showText: true
|
|
126
126
|
}
|
|
@@ -94,14 +94,14 @@ export default {
|
|
|
94
94
|
iconClassOpenCollapse() {
|
|
95
95
|
if (this.collapseToLeft) {
|
|
96
96
|
if (this.open) {
|
|
97
|
-
return "icon-
|
|
97
|
+
return "icon-chevron-one-stripe-left"
|
|
98
98
|
}
|
|
99
|
-
return "icon-
|
|
99
|
+
return "icon-chevron-one-stripe-right"
|
|
100
100
|
} else {
|
|
101
101
|
if (this.open) {
|
|
102
|
-
return "icon-
|
|
102
|
+
return "icon-chevron-one-stripe-right"
|
|
103
103
|
}
|
|
104
|
-
return "icon-
|
|
104
|
+
return "icon-chevron-one-stripe-left"
|
|
105
105
|
}
|
|
106
106
|
}
|
|
107
107
|
},
|
|
@@ -257,8 +257,8 @@ export default {
|
|
|
257
257
|
}
|
|
258
258
|
|
|
259
259
|
header {
|
|
260
|
-
padding-top:
|
|
261
|
-
padding-bottom:
|
|
260
|
+
padding-top: var(--default-padding);
|
|
261
|
+
padding-bottom: var(--default-padding);
|
|
262
262
|
row-gap: 0;
|
|
263
263
|
|
|
264
264
|
&.has-navigation {
|
|
@@ -292,7 +292,7 @@ export default {
|
|
|
292
292
|
&.has-navigation {
|
|
293
293
|
grid-template-rows: 1fr;
|
|
294
294
|
grid-template-areas: "company-logo main-navigation";
|
|
295
|
-
padding-bottom:
|
|
295
|
+
padding-bottom: var(--default-padding);
|
|
296
296
|
}
|
|
297
297
|
|
|
298
298
|
.cmd-company-logo {
|
|
@@ -294,11 +294,11 @@ export default {
|
|
|
294
294
|
default() {
|
|
295
295
|
return {
|
|
296
296
|
showFilters: {
|
|
297
|
-
iconClass: "icon-
|
|
297
|
+
iconClass: "icon-chevron-one-stripe-up",
|
|
298
298
|
type: "auto"
|
|
299
299
|
},
|
|
300
300
|
hideFilters: {
|
|
301
|
-
iconClass: "icon-
|
|
301
|
+
iconClass: "icon-chevron-one-stripe-down",
|
|
302
302
|
type: "auto"
|
|
303
303
|
}
|
|
304
304
|
}
|
|
@@ -39,19 +39,19 @@ export default {
|
|
|
39
39
|
default: function() {
|
|
40
40
|
return {
|
|
41
41
|
prev: {
|
|
42
|
-
iconClass: "icon-
|
|
42
|
+
iconClass: "icon-chevron-one-stripe-left",
|
|
43
43
|
tooltip: "Previous"
|
|
44
44
|
},
|
|
45
45
|
next: {
|
|
46
|
-
iconClass: "icon-
|
|
46
|
+
iconClass: "icon-chevron-one-stripe-right",
|
|
47
47
|
tooltip: "Next"
|
|
48
48
|
},
|
|
49
49
|
up: {
|
|
50
|
-
iconClass: "icon-
|
|
50
|
+
iconClass: "icon-chevron-one-stripe-up",
|
|
51
51
|
tooltip: "Previous"
|
|
52
52
|
},
|
|
53
53
|
down: {
|
|
54
|
-
iconClass: "icon-
|
|
54
|
+
iconClass: "icon-chevron-one-stripe-down",
|
|
55
55
|
tooltip: "Next"
|
|
56
56
|
}
|
|
57
57
|
}
|
|
@@ -110,8 +110,6 @@ export default {
|
|
|
110
110
|
top: auto;
|
|
111
111
|
}
|
|
112
112
|
}
|
|
113
|
-
|
|
114
|
-
|
|
115
113
|
}
|
|
116
114
|
</style>
|
|
117
115
|
|
|
@@ -164,14 +164,14 @@ export default {
|
|
|
164
164
|
return {
|
|
165
165
|
next: {
|
|
166
166
|
next: {
|
|
167
|
-
"iconClass": "icon-
|
|
167
|
+
"iconClass": "icon-chevron-one-stripe-right",
|
|
168
168
|
"tooltip": "Next"
|
|
169
169
|
}
|
|
170
170
|
},
|
|
171
171
|
prev: {
|
|
172
172
|
prev: {
|
|
173
173
|
"type": "prev",
|
|
174
|
-
"iconClass": "icon-
|
|
174
|
+
"iconClass": "icon-chevron-one-stripe-left",
|
|
175
175
|
"tooltip": "Previous"
|
|
176
176
|
}
|
|
177
177
|
}
|
|
@@ -367,6 +367,7 @@ export default {
|
|
|
367
367
|
justify-content: center;
|
|
368
368
|
|
|
369
369
|
> a:not(.button) {
|
|
370
|
+
display: block;
|
|
370
371
|
text-decoration: none;
|
|
371
372
|
|
|
372
373
|
figcaption {
|
|
@@ -417,9 +418,9 @@ export default {
|
|
|
417
418
|
padding: .2rem;
|
|
418
419
|
list-style-type: none;
|
|
419
420
|
margin: 0;
|
|
420
|
-
border: var(--default-border-reduced-opacity);
|
|
421
421
|
border-radius: var(--full-circle);
|
|
422
422
|
background: var(--light-gray);
|
|
423
|
+
border: var(--default-border-reduced-opacity);
|
|
423
424
|
|
|
424
425
|
a {
|
|
425
426
|
display: block;
|
|
@@ -141,7 +141,7 @@ export default {
|
|
|
141
141
|
type: Object,
|
|
142
142
|
default: function () {
|
|
143
143
|
return {
|
|
144
|
-
iconClass: "icon-
|
|
144
|
+
iconClass: "icon-chevron-one-stripe-down",
|
|
145
145
|
tooltip: "Expand table"
|
|
146
146
|
}
|
|
147
147
|
}
|
|
@@ -155,7 +155,7 @@ export default {
|
|
|
155
155
|
type: Object,
|
|
156
156
|
default: function () {
|
|
157
157
|
return {
|
|
158
|
-
iconClass: "icon-
|
|
158
|
+
iconClass: "icon-chevron-one-stripe-up",
|
|
159
159
|
tooltip: "Collapse table"
|
|
160
160
|
}
|
|
161
161
|
}
|
|
@@ -183,7 +183,7 @@ export default {
|
|
|
183
183
|
type: Object,
|
|
184
184
|
default: function () {
|
|
185
185
|
return {
|
|
186
|
-
iconClass: "icon-
|
|
186
|
+
iconClass: "icon-chevron-one-stripe-right",
|
|
187
187
|
tooltip: "Stretch table"
|
|
188
188
|
}
|
|
189
189
|
}
|
|
@@ -306,7 +306,10 @@ export default {
|
|
|
306
306
|
}
|
|
307
307
|
|
|
308
308
|
.cmd-slide-button {
|
|
309
|
+
top: 50% !important;
|
|
309
310
|
display: none;
|
|
311
|
+
height: auto;
|
|
312
|
+
transform: translateY(-50%);
|
|
310
313
|
}
|
|
311
314
|
|
|
312
315
|
.inner-wrapper {
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
<div class="cmd-tabs">
|
|
3
3
|
<ul :class="{'stretch-tabs' : stretchTabs}" role="tablist">
|
|
4
4
|
<li v-for="(tab, index) in tabs" :class="{active : showTab === index}" :key="index" role="tab">
|
|
5
|
-
<a
|
|
5
|
+
<a href="#" @click.prevent="setActiveTab(index)" :title="!tab.name ? tab.tooltip : undefined">
|
|
6
6
|
<!-- begin CmdIcon -->
|
|
7
7
|
<CmdIcon v-if="tab.iconClass" :iconClass="tab.iconClass" :type="tab.iconType" />
|
|
8
8
|
<!-- end CmdIcon -->
|
|
@@ -230,14 +230,14 @@ export default {
|
|
|
230
230
|
next: {
|
|
231
231
|
next: {
|
|
232
232
|
type: "next",
|
|
233
|
-
iconClass: "icon-
|
|
233
|
+
iconClass: "icon-chevron-one-stripe-right",
|
|
234
234
|
tooltip: "Next"
|
|
235
235
|
}
|
|
236
236
|
},
|
|
237
237
|
prev: {
|
|
238
238
|
prev: {
|
|
239
239
|
type: "prev",
|
|
240
|
-
iconClass: "icon-
|
|
240
|
+
iconClass: "icon-chevron-one-stripe-left",
|
|
241
241
|
tooltip: "Previous"
|
|
242
242
|
}
|
|
243
243
|
}
|
|
@@ -387,6 +387,12 @@ export default {
|
|
|
387
387
|
}
|
|
388
388
|
}
|
|
389
389
|
|
|
390
|
+
.cmd-slide-button {
|
|
391
|
+
top: 50% !important;
|
|
392
|
+
height: auto;
|
|
393
|
+
transform: translateY(-50%);
|
|
394
|
+
}
|
|
395
|
+
|
|
390
396
|
> .inner-thumbnail-wrapper {
|
|
391
397
|
border-radius: var(--default-border-radius);
|
|
392
398
|
padding: calc(var(--default-padding) * 2);
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<!-- begin basicForm -->
|
|
3
|
-
<
|
|
3
|
+
<CmdBasicForm v-if="contactFormOnly" v-bind="basicForm" />
|
|
4
4
|
<!-- end basicForm -->
|
|
5
5
|
|
|
6
6
|
<div v-else class="flex-container">
|
|
7
7
|
<!-- begin basicForm -->
|
|
8
|
-
<
|
|
8
|
+
<CmdBasicForm v-bind="basicForm" />
|
|
9
9
|
<!-- end basicForm -->
|
|
10
10
|
|
|
11
11
|
<!-- begin additional-columns -->
|
|
@@ -31,9 +31,9 @@ export default {
|
|
|
31
31
|
name: "ContactInformation",
|
|
32
32
|
props: {
|
|
33
33
|
/**
|
|
34
|
-
* properties for
|
|
34
|
+
* properties for CmdBasicForm-component
|
|
35
35
|
*/
|
|
36
|
-
|
|
36
|
+
cmdBasicForm: {
|
|
37
37
|
type: Object,
|
|
38
38
|
default: null
|
|
39
39
|
},
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
<span>Contact Information</span>
|
|
7
7
|
</h2>
|
|
8
8
|
<ContactInformation
|
|
9
|
-
:
|
|
9
|
+
:cmdBasicForm="basicForm"
|
|
10
10
|
:cmdAddressData="{}"
|
|
11
11
|
:cmdGoogleMaps="{}">
|
|
12
12
|
<template v-slot:additional-info>
|
|
@@ -21,10 +21,10 @@
|
|
|
21
21
|
<h2 class="headline-demopage" id="section-multiple-lists-of-links-downloads">
|
|
22
22
|
<span>Multiple Lists of links</span>
|
|
23
23
|
</h2>
|
|
24
|
-
<h3>Downloads</h3>
|
|
24
|
+
<h3 id="section-multiple-lists-of-links-downloads">Downloads</h3>
|
|
25
25
|
<MultipleListsOfLinks :segments="listOfDownloadsData" />
|
|
26
26
|
<hr />
|
|
27
|
-
<h3>SiteMap</h3>
|
|
27
|
+
<h3 id="section-multiple-lists-of-links-sitemap">SiteMap</h3>
|
|
28
28
|
<MultipleListsOfLinks :segments="listOfSiteLinksData" />
|
|
29
29
|
</CmdWidthLimitationWrapper>
|
|
30
30
|
<!-- end multiple-lists-of-links ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
@@ -34,10 +34,10 @@
|
|
|
34
34
|
<h2 class="headline-demopage" id="section-multiple-box-wrapper">
|
|
35
35
|
<span>Multiple Box Wrapper</span>
|
|
36
36
|
</h2>
|
|
37
|
-
<h3>FAQs</h3>
|
|
37
|
+
<h3 id="section-multiple-box-wrapper-faqs">FAQs</h3>
|
|
38
38
|
<MultipleBoxWrapper :segments="faqsData" />
|
|
39
39
|
<hr />
|
|
40
|
-
<h3>Team Overview</h3>
|
|
40
|
+
<h3 id="section-multiple-box-wrapper-team-overview">Team Overview</h3>
|
|
41
41
|
<MultipleBoxWrapper :segments="boxesTeamOverviewData" />
|
|
42
42
|
</CmdWidthLimitationWrapper>
|
|
43
43
|
<!-- end multiple-box-wrapper ------------------------------------------------------------------------------------------------------------------------------------------------------->
|