comand-component-library 4.0.19 → 4.0.22
Sign up to get free protection for your applications and to get access to all the features.
- 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 ------------------------------------------------------------------------------------------------------------------------------------------------------->
|