comand-component-library 3.1.22 → 3.1.26
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 +3 -4
- package/src/App.vue +30 -9
- package/src/assets/data/accordion.json +13 -4
- package/src/components/CmdAccordion.vue +84 -15
- package/src/components/CmdAddressData.vue +12 -0
- package/src/components/CmdBackToTopButton.vue +3 -0
- package/src/components/CmdBox.vue +16 -1
- package/src/components/CmdBoxSiteSearch.vue +3 -0
- package/src/components/CmdBreadcrumbs.vue +9 -0
- package/src/components/CmdCompanyLogo.vue +12 -0
- package/src/components/CmdCookieDisclaimer.vue +15 -4
- package/src/components/CmdCopyrightInformation.vue +2 -8
- package/src/components/CmdFakeSelect.vue +33 -6
- package/src/components/CmdFancyBox.vue +31 -1
- package/src/components/CmdFooterNavigation.vue +6 -0
- package/src/components/CmdGoogleMaps.vue +3 -0
- package/src/components/CmdImageGallery.vue +3 -2
- package/src/components/CmdImageZoom.vue +6 -0
- package/src/components/CmdMainHeadline.vue +9 -0
- package/src/components/CmdMainNavigation.vue +24 -0
- package/src/components/CmdMultipleSwitch.vue +1 -5
- package/src/components/CmdMultistepFormProgressBar.vue +6 -0
- package/src/components/CmdOpeningHours.vue +23 -2
- package/src/components/CmdPager.vue +24 -2
- package/src/components/CmdProgressBar.vue +10 -4
- package/src/components/CmdShareButtons.vue +6 -0
- package/src/components/CmdSiteHeader.vue +12 -16
- package/src/components/CmdSlideButton.vue +3 -0
- package/src/components/CmdSlideshow.vue +25 -6
- package/src/components/CmdUploadForm.vue +5 -5
- package/src/index.js +3 -1
- package/src/main.js +2 -2
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "comand-component-library",
|
3
|
-
"version": "3.1.
|
3
|
+
"version": "3.1.26",
|
4
4
|
"private": false,
|
5
5
|
"scripts": {
|
6
6
|
"serve": "vue-cli-service serve",
|
@@ -16,10 +16,9 @@
|
|
16
16
|
"src"
|
17
17
|
],
|
18
18
|
"dependencies": {
|
19
|
-
"clickout-event": "^1.1.
|
20
|
-
"comand-frontend-framework": "^3.2.
|
19
|
+
"clickout-event": "^1.1.2",
|
20
|
+
"comand-frontend-framework": "^3.2.12",
|
21
21
|
"core-js": "^3.16.1",
|
22
|
-
"v-click-outside": "^3.1.2",
|
23
22
|
"vue": "^3.2.1",
|
24
23
|
"vue-router": "^4.0.11",
|
25
24
|
"vuex": "^4.0.2"
|
package/src/App.vue
CHANGED
@@ -41,7 +41,6 @@
|
|
41
41
|
<li><a href="#section-upload-form">Upload-Form</a></li>
|
42
42
|
</ul>
|
43
43
|
</div>
|
44
|
-
|
45
44
|
<hr/>
|
46
45
|
</CmdWidthLimitationWrapper>
|
47
46
|
|
@@ -49,11 +48,13 @@
|
|
49
48
|
<CmdWidthLimitationWrapper>
|
50
49
|
<h2 class="headline-demopage">Accordion</h2>
|
51
50
|
<h3>Single mode (only one can be opened)</h3>
|
51
|
+
<a href="#" @click.prevent="toggleAllAccordions()">Toggle all accordions</a>
|
52
52
|
<CmdAccordion :accordionData="accordionData.accordionData1"
|
53
53
|
toggleMode="single"
|
54
54
|
tooltip="Click to toggle content"
|
55
55
|
openIconClass="icon-single-arrow-up"
|
56
56
|
closeIconClass="icon-single-arrow-down"
|
57
|
+
ref="accordionGroup1"
|
57
58
|
/>
|
58
59
|
<h3>Multiple mode (all can be opened)</h3>
|
59
60
|
<CmdAccordion :accordionData="accordionData.accordionData2"
|
@@ -61,14 +62,16 @@
|
|
61
62
|
tooltip="Click to toggle content"
|
62
63
|
openIconClass="icon-single-arrow-up"
|
63
64
|
closeIconClass="icon-single-arrow-down"
|
65
|
+
ref="accordionGroup2"
|
64
66
|
/>
|
65
|
-
<h3>Customized headline-level</h3>
|
67
|
+
<h3>Customized headline-level (without transition of content)</h3>
|
66
68
|
<CmdAccordion :accordionData="accordionData.accordionData2"
|
67
69
|
toggleMode="multiple"
|
68
70
|
tooltip="Click to toggle content"
|
69
71
|
openIconClass="icon-single-arrow-up"
|
70
72
|
closeIconClass="icon-single-arrow-down"
|
71
73
|
accordion-headline-level="h4"
|
74
|
+
:use-transition="false"
|
72
75
|
/>
|
73
76
|
<h3>Data given by slots</h3>
|
74
77
|
<CmdAccordion :accordionData="1">
|
@@ -81,6 +84,16 @@
|
|
81
84
|
</p>
|
82
85
|
</template>
|
83
86
|
</CmdAccordion>
|
87
|
+
<CmdAccordion :accordionData="1" :useCustomHeader="true">
|
88
|
+
<template v-slot:customHeadline0>
|
89
|
+
<h4>Some headline</h4>
|
90
|
+
</template>
|
91
|
+
<template v-slot:accordionContent0>
|
92
|
+
<p>
|
93
|
+
Content
|
94
|
+
</p>
|
95
|
+
</template>
|
96
|
+
</CmdAccordion>
|
84
97
|
</CmdWidthLimitationWrapper>
|
85
98
|
|
86
99
|
<!-- begin advanced form elements --------------------------------------------------------------------------------------------------------------------------------------------------->
|
@@ -409,6 +422,7 @@
|
|
409
422
|
<CmdFormElement element="input"
|
410
423
|
labelText="Label for replaced radiobutton"
|
411
424
|
type="radio"
|
425
|
+
class="replace-input-type"
|
412
426
|
id="inputfield13"
|
413
427
|
name="replaced-radiogroup"
|
414
428
|
inputValue="radiobuttonValue1"
|
@@ -417,6 +431,7 @@
|
|
417
431
|
<CmdFormElement element="input"
|
418
432
|
labelText="Label for replaced radiobutton"
|
419
433
|
type="radio"
|
434
|
+
class="replace-input-type"
|
420
435
|
id="inputfield14"
|
421
436
|
name="replaced-radiogroup"
|
422
437
|
inputValue="radiobuttonValue2"
|
@@ -647,9 +662,6 @@
|
|
647
662
|
:items="pagerData.length"
|
648
663
|
:itemsPerPage="1"
|
649
664
|
@click="showPagePager = $event"
|
650
|
-
:showLinksAsButtons="true"
|
651
|
-
:prevButton="{'iconClass': 'icon-single-arrow-left', 'buttonText': 'prev' }"
|
652
|
-
:nextButton="{'iconClass': 'icon-single-arrow-right', 'buttonText': 'next' }"
|
653
665
|
/>
|
654
666
|
</CmdWidthLimitationWrapper>
|
655
667
|
|
@@ -668,7 +680,7 @@
|
|
668
680
|
<a id="section-system-message"></a>
|
669
681
|
<CmdWidthLimitationWrapper>
|
670
682
|
<h2 class="headline-demopage">System Message</h2>
|
671
|
-
<CmdSystemMessage
|
683
|
+
<CmdSystemMessage status="error" :fullWidth="true" message="This is an error message!"
|
672
684
|
iconClass="icon-cancel">
|
673
685
|
<ul>
|
674
686
|
<li>Error #1</li>
|
@@ -676,14 +688,14 @@
|
|
676
688
|
<li>Error #3</li>
|
677
689
|
</ul>
|
678
690
|
</CmdSystemMessage>
|
679
|
-
<CmdSystemMessage
|
691
|
+
<CmdSystemMessage status="warning" :fullWidth="true" message="This is a warning message!">
|
680
692
|
<p>This is additional text!</p>
|
681
693
|
</CmdSystemMessage>
|
682
|
-
<CmdSystemMessage
|
694
|
+
<CmdSystemMessage status="success" :fullWidth="true" message="This is a success message!"
|
683
695
|
iconClass="icon-check">
|
684
696
|
<p>This is additional text!</p>
|
685
697
|
</CmdSystemMessage>
|
686
|
-
<CmdSystemMessage
|
698
|
+
<CmdSystemMessage status="info" :fullWidth="true" message="This is an info message!"
|
687
699
|
iconClass="icon-info">
|
688
700
|
<p>This is additional text!</p>
|
689
701
|
</CmdSystemMessage>
|
@@ -872,6 +884,7 @@ export default {
|
|
872
884
|
|
873
885
|
data() {
|
874
886
|
return {
|
887
|
+
accordionGroupOpen: false,
|
875
888
|
showPageMultistep: 1,
|
876
889
|
showPagePager: 1,
|
877
890
|
selectedOptions: [],
|
@@ -964,6 +977,14 @@ export default {
|
|
964
977
|
},
|
965
978
|
executeSearch() {
|
966
979
|
return Math.floor(Math.random() * 100)
|
980
|
+
},
|
981
|
+
toggleAllAccordions() {
|
982
|
+
if(this.accordionGroupOpen) {
|
983
|
+
this.$refs.accordionGroup1.closeAll()
|
984
|
+
} else{
|
985
|
+
this.$refs.accordionGroup1.openAll()
|
986
|
+
}
|
987
|
+
this.accordionGroupOpen = !this.accordionGroupOpen
|
967
988
|
}
|
968
989
|
}
|
969
990
|
}
|
@@ -2,19 +2,28 @@
|
|
2
2
|
"accordionData1": [
|
3
3
|
{
|
4
4
|
"headline": "First",
|
5
|
-
"
|
5
|
+
"icon": {
|
6
|
+
"iconClass": "icon-globe",
|
7
|
+
"tooltip": "Globe"
|
8
|
+
},
|
6
9
|
"content": "Text 1",
|
7
10
|
"status": false
|
8
11
|
},
|
9
12
|
{
|
10
13
|
"headline": "Second",
|
11
|
-
"
|
14
|
+
"icon": {
|
15
|
+
"iconClass": "icon-user-profile",
|
16
|
+
"tooltip": "User profile"
|
17
|
+
},
|
12
18
|
"content": "Text 2",
|
13
|
-
"status":
|
19
|
+
"status": true
|
14
20
|
},
|
15
21
|
{
|
16
22
|
"headline": "Third",
|
17
|
-
"
|
23
|
+
"icon": {
|
24
|
+
"iconClass": "icon-home",
|
25
|
+
"tooltip": "Home"
|
26
|
+
},
|
18
27
|
"content": "Text 3",
|
19
28
|
"status": false
|
20
29
|
}
|
@@ -1,16 +1,20 @@
|
|
1
1
|
<template>
|
2
2
|
<div :class="['cmd-accordion flex-container vertical', {'no-gap' : !gapBetween, 'active' : active}]">
|
3
3
|
<div v-for="(accordionContent, index) in accordion" :key="index">
|
4
|
-
<a href="#" :title="tooltip" @click.prevent="toggleContentVisibility(accordionContent)">
|
4
|
+
<a v-if="!useCustomHeader" href="#" :title="accordionContent.status ? iconOpen.icon.tooltip : iconClosed.icon.tooltip" @click.prevent="toggleContentVisibility(accordionContent)">
|
5
5
|
<slot :name="'accordionHeadline' + index">
|
6
6
|
<component :is="accordionHeadlineLevel">
|
7
|
-
<span v-if="accordionContent.iconClass" :class="accordionContent.iconClass"></span>
|
7
|
+
<span v-if="accordionContent.icon && accordionContent.icon.iconClass" :class="accordionContent.icon.iconClass" :title="accordionContent.icon.tooltip"></span>
|
8
8
|
<span v-if="accordionContent.headline">{{ accordionContent.headline }}</span>
|
9
9
|
</component>
|
10
10
|
</slot>
|
11
|
+
<span class="toggle-icon" :class="[accordionContent.status ? iconOpen.icon.iconClass : iconClosed.icon.iconClass]"></span>
|
12
|
+
</a>
|
13
|
+
<a v-else href="#" :title="tooltip" @click.prevent="toggleContentVisibility(accordionContent)">
|
14
|
+
<slot :name="'customHeadline' + index"><p>{{ accordionContent.headline }}</p></slot>
|
11
15
|
<span class="toggle-icon" :class="[accordionContent.status ? openIconClass : closeIconClass]"></span>
|
12
16
|
</a>
|
13
|
-
<transition name="
|
17
|
+
<transition :name="toggleTransition">
|
14
18
|
<div class="accordion-content" v-if="accordionContent.status" aria-expanded="true">
|
15
19
|
<slot :name="'accordionContent' + index">
|
16
20
|
<p>{{ accordionContent.content }}</p>
|
@@ -31,14 +35,39 @@ export default {
|
|
31
35
|
}
|
32
36
|
},
|
33
37
|
props: {
|
38
|
+
/**
|
39
|
+
* use transition to expand accordion-content
|
40
|
+
*/
|
41
|
+
useTransition: {
|
42
|
+
type: Boolean,
|
43
|
+
default: true
|
44
|
+
},
|
45
|
+
/**
|
46
|
+
* toggle if mode if only one accordion can be opened (or multiple ones)
|
47
|
+
*
|
48
|
+
* values: single, multiple
|
49
|
+
*/
|
34
50
|
toggleMode: {
|
35
51
|
type: String,
|
36
52
|
default: "single"
|
37
53
|
},
|
54
|
+
/**
|
55
|
+
* activate if you want to use a customized header
|
56
|
+
*/
|
57
|
+
useCustomHeader: {
|
58
|
+
type: Boolean,
|
59
|
+
default: false
|
60
|
+
},
|
61
|
+
/**
|
62
|
+
* set if a gap is shown between multiple accordions
|
63
|
+
*/
|
38
64
|
gapBetween: {
|
39
65
|
type: Boolean,
|
40
66
|
default: true
|
41
67
|
},
|
68
|
+
/**
|
69
|
+
* headline for accordion-box that is also visible is accordion is collapsed
|
70
|
+
*/
|
42
71
|
accordionHeadlineLevel: {
|
43
72
|
type: String,
|
44
73
|
default: "h3",
|
@@ -53,21 +82,45 @@ export default {
|
|
53
82
|
return true
|
54
83
|
}
|
55
84
|
},
|
85
|
+
/**
|
86
|
+
* all information about the contents in all shown accordions
|
87
|
+
*/
|
56
88
|
accordionData: {
|
57
89
|
type: [Array, Number],
|
58
90
|
required: true
|
59
91
|
},
|
60
|
-
|
61
|
-
|
62
|
-
|
63
|
-
|
64
|
-
|
65
|
-
|
66
|
-
|
92
|
+
/**
|
93
|
+
* icon to expand an accordion
|
94
|
+
*/
|
95
|
+
iconOpen: {
|
96
|
+
type: Object,
|
97
|
+
default: function() {
|
98
|
+
return {
|
99
|
+
icon: {
|
100
|
+
iconClass: "icon-single-arrow-up",
|
101
|
+
tooltip: "Close content"
|
102
|
+
}
|
103
|
+
}
|
104
|
+
},
|
67
105
|
},
|
68
|
-
|
69
|
-
|
70
|
-
|
106
|
+
/**
|
107
|
+
* icon to collapse an accordion
|
108
|
+
*/
|
109
|
+
iconClosed: {
|
110
|
+
type: Object,
|
111
|
+
default: function() {
|
112
|
+
return {
|
113
|
+
icon: {
|
114
|
+
iconClass: "icon-single-arrow-down",
|
115
|
+
tooltip: "Show content"
|
116
|
+
}
|
117
|
+
}
|
118
|
+
}
|
119
|
+
}
|
120
|
+
},
|
121
|
+
computed: {
|
122
|
+
toggleTransition() {
|
123
|
+
return this.useTransition && 'fade'
|
71
124
|
}
|
72
125
|
},
|
73
126
|
methods: {
|
@@ -82,6 +135,22 @@ export default {
|
|
82
135
|
}
|
83
136
|
}
|
84
137
|
}
|
138
|
+
},
|
139
|
+
/**
|
140
|
+
* method will be called from outside by $refs
|
141
|
+
*/
|
142
|
+
openAll() {
|
143
|
+
for (let i = 0; i < this.accordion.length; i++) {
|
144
|
+
this.accordion[i].status = true;
|
145
|
+
}
|
146
|
+
},
|
147
|
+
/**
|
148
|
+
* method will be called from outside by $refs
|
149
|
+
*/
|
150
|
+
closeAll() {
|
151
|
+
for (let i = 0; i < this.accordion.length; i++) {
|
152
|
+
this.accordion[i].status = false;
|
153
|
+
}
|
85
154
|
}
|
86
155
|
},
|
87
156
|
watch: {
|
@@ -109,7 +178,7 @@ export default {
|
|
109
178
|
margin-bottom: var(--default-margin);
|
110
179
|
|
111
180
|
> div {
|
112
|
-
> a {
|
181
|
+
> a, > div:first-child {
|
113
182
|
display: flex;
|
114
183
|
align-items: center;
|
115
184
|
gap: var(--grid-gap);
|
@@ -150,7 +219,7 @@ export default {
|
|
150
219
|
border-top: 0;
|
151
220
|
}
|
152
221
|
|
153
|
-
> span {
|
222
|
+
> span, > a {
|
154
223
|
font-size: inherit;
|
155
224
|
|
156
225
|
&[class*="icon-"] {
|
@@ -76,18 +76,30 @@
|
|
76
76
|
export default {
|
77
77
|
name: "CmdAddressData",
|
78
78
|
props: {
|
79
|
+
/**
|
80
|
+
* headline shown above address-data
|
81
|
+
*/
|
79
82
|
headline: {
|
80
83
|
type: String,
|
81
84
|
required: false
|
82
85
|
},
|
86
|
+
/**
|
87
|
+
* option to toggle labels (i.e. telephone, email etc.) in front/left of data
|
88
|
+
*/
|
83
89
|
showLabels: {
|
84
90
|
type: Boolean,
|
85
91
|
default: true
|
86
92
|
},
|
93
|
+
/**
|
94
|
+
* all address-data (incl. lables) that will be shown
|
95
|
+
*/
|
87
96
|
addressData: {
|
88
97
|
type: Object,
|
89
98
|
required: true
|
90
99
|
},
|
100
|
+
/**
|
101
|
+
* link physical address (street, no, zip and city) with Google Maps
|
102
|
+
*/
|
91
103
|
linkGoogleMaps: {
|
92
104
|
type: Boolean,
|
93
105
|
default: false
|
@@ -52,17 +52,32 @@
|
|
52
52
|
export default {
|
53
53
|
name: "CmdBox",
|
54
54
|
props: {
|
55
|
+
/**
|
56
|
+
* set boxtype to show different types of boxes/contents
|
57
|
+
*
|
58
|
+
* values: "content, product, user"
|
59
|
+
*/
|
55
60
|
boxType: {
|
56
61
|
type: String,
|
57
62
|
default: "content"
|
58
63
|
},
|
64
|
+
/**
|
65
|
+
* the shown product (incl. name, price, image, description)
|
66
|
+
*
|
67
|
+
* limitations: only available for boxtype===product
|
68
|
+
*/
|
59
69
|
product: {
|
60
70
|
type: Object,
|
61
71
|
required: false
|
62
72
|
},
|
73
|
+
/**
|
74
|
+
* the shown user-profile (incl. name, image, contact-data)
|
75
|
+
*
|
76
|
+
* limitations: only available for boxtype===user
|
77
|
+
*/
|
63
78
|
user: {
|
64
79
|
type: Object,
|
65
|
-
required:
|
80
|
+
required: false
|
66
81
|
}
|
67
82
|
}
|
68
83
|
}
|
@@ -23,14 +23,23 @@
|
|
23
23
|
export default {
|
24
24
|
name: "CmdBreadcrumbs",
|
25
25
|
props: {
|
26
|
+
/**
|
27
|
+
* list of breadcrumb-links (incl. path, icon and text)
|
28
|
+
*/
|
26
29
|
breadcrumbLinks: {
|
27
30
|
type: Array,
|
28
31
|
required: false
|
29
32
|
},
|
33
|
+
/**
|
34
|
+
* label in front/left of breadcrumbs
|
35
|
+
*/
|
30
36
|
breadcrumbLabel: {
|
31
37
|
type: String,
|
32
38
|
required: false
|
33
39
|
},
|
40
|
+
/**
|
41
|
+
* separator sign between entries
|
42
|
+
*/
|
34
43
|
breadcrumbSeparator: {
|
35
44
|
type: String,
|
36
45
|
default: ">"
|
@@ -20,18 +20,30 @@ export default {
|
|
20
20
|
}
|
21
21
|
},
|
22
22
|
props: {
|
23
|
+
/**
|
24
|
+
* link for company logo (i.e. to homepage)
|
25
|
+
*/
|
23
26
|
link: {
|
24
27
|
type: Object,
|
25
28
|
required: false
|
26
29
|
},
|
30
|
+
/**
|
31
|
+
* path to (default) logo-file
|
32
|
+
*/
|
27
33
|
pathDefaultLogo: {
|
28
34
|
type: String,
|
29
35
|
required: true
|
30
36
|
},
|
37
|
+
/**
|
38
|
+
* path to dark-mode logo-file
|
39
|
+
*/
|
31
40
|
pathDarkmodeLogo: {
|
32
41
|
type: String,
|
33
42
|
required: false
|
34
43
|
},
|
44
|
+
/**
|
45
|
+
* alternative text for image
|
46
|
+
*/
|
35
47
|
altText: {
|
36
48
|
type: String,
|
37
49
|
required: true /* w3c requirements */
|
@@ -3,9 +3,8 @@
|
|
3
3
|
<div class="cmd-cookie-disclaimer">
|
4
4
|
<h2 v-if="headline">{{ headline }}</h2>
|
5
5
|
<slot name="cookie-options">
|
6
|
-
<div class="grid-container-two-fractions">
|
7
6
|
<div v-if="cookieOptions.required">
|
8
|
-
<
|
7
|
+
<h3>{{ cookieOptions.required.headline }}</h3>
|
9
8
|
<CmdAccordion :accordion-data="cookieOptions.required.cookies.length" :accordionData="2">
|
10
9
|
<template v-for="(cookie, index) in cookieOptions.required.cookies"
|
11
10
|
v-slot:[`accordionHeadline${index}`]
|
@@ -35,8 +34,9 @@
|
|
35
34
|
</template>
|
36
35
|
</CmdAccordion>
|
37
36
|
</div>
|
37
|
+
<hr />
|
38
38
|
<div v-if="cookieOptions.optional">
|
39
|
-
<
|
39
|
+
<h3>{{ cookieOptions.optional.headline }}</h3>
|
40
40
|
<CmdAccordion :accordion-data="cookieOptions.optional.cookies.length" :accordionData="2">
|
41
41
|
<template v-for="(cookie, index) in cookieOptions.optional.cookies"
|
42
42
|
v-slot:[`accordionHeadline${index}`]
|
@@ -62,7 +62,6 @@
|
|
62
62
|
</template>
|
63
63
|
</CmdAccordion>
|
64
64
|
</div>
|
65
|
-
</div>
|
66
65
|
</slot>
|
67
66
|
<slot name="privacy-text">
|
68
67
|
</slot>
|
@@ -96,18 +95,30 @@ export default {
|
|
96
95
|
}
|
97
96
|
},
|
98
97
|
props: {
|
98
|
+
/**
|
99
|
+
* headline show above content
|
100
|
+
*/
|
99
101
|
headline: {
|
100
102
|
type: String,
|
101
103
|
required: false
|
102
104
|
},
|
105
|
+
/**
|
106
|
+
* list of cookie-options
|
107
|
+
*/
|
103
108
|
cookieOptions: {
|
104
109
|
type: Object,
|
105
110
|
required: false
|
106
111
|
},
|
112
|
+
/**
|
113
|
+
* label for button to accepting all cookies
|
114
|
+
*/
|
107
115
|
buttonLabelAcceptAllCookies: {
|
108
116
|
type: String,
|
109
117
|
default: "Accept all cookies!"
|
110
118
|
},
|
119
|
+
/**
|
120
|
+
* label for button for accepting current settings
|
121
|
+
*/
|
111
122
|
buttonLabelAcceptCurrentSettings: {
|
112
123
|
type: String,
|
113
124
|
default: "Proceed with current settings!"
|
@@ -1,18 +1,12 @@
|
|
1
1
|
<template>
|
2
|
-
<div
|
2
|
+
<div class="cmd-copyright-information">
|
3
3
|
<a href="http://www.comand-cms.com" target="_blank" lang="en" title="CoManD-Website">© CoManD</a>
|
4
4
|
</div>
|
5
5
|
</template>
|
6
6
|
|
7
7
|
<script>
|
8
8
|
export default {
|
9
|
-
name: "CmdCopyrightWrapper"
|
10
|
-
props: {
|
11
|
-
htmlClass: {
|
12
|
-
type: String,
|
13
|
-
required: false
|
14
|
-
}
|
15
|
-
}
|
9
|
+
name: "CmdCopyrightWrapper"
|
16
10
|
}
|
17
11
|
</script>
|
18
12
|
|
@@ -1,6 +1,6 @@
|
|
1
1
|
<template>
|
2
2
|
<div :class="[status, 'cmd-select label']">
|
3
|
-
<span>
|
3
|
+
<span>{{ labelText }}</span>
|
4
4
|
<ul :class="{'open': showOptions}" @clickout="closeOptions">
|
5
5
|
<li>
|
6
6
|
<a href="#" @click.prevent="toggleOptions">
|
@@ -8,7 +8,7 @@
|
|
8
8
|
<span v-else-if="type === 'color' && miscInfo" class="color"
|
9
9
|
:style="'background: ' + miscInfo"></span>
|
10
10
|
<span>{{ optionName }}</span>
|
11
|
-
<span :class="
|
11
|
+
<span :class="dropdownIconClass"></span>
|
12
12
|
</a>
|
13
13
|
<ul v-if="type === 'filterList' && showOptions" class="filter-list">
|
14
14
|
<li v-for="(option, index) in selectData" :key="index">
|
@@ -46,34 +46,61 @@
|
|
46
46
|
</template>
|
47
47
|
|
48
48
|
<script>
|
49
|
-
import "clickout-event"
|
50
|
-
|
51
49
|
export default {
|
52
50
|
name: 'CmdFakeSelect',
|
53
51
|
props: {
|
52
|
+
/**
|
53
|
+
* set different default selectbox-types for
|
54
|
+
*
|
55
|
+
* values: "(none), color, country, filterlist"
|
56
|
+
*/
|
54
57
|
type: {
|
55
58
|
type: String,
|
56
59
|
required: false
|
57
60
|
},
|
61
|
+
/**
|
62
|
+
* set default value
|
63
|
+
*/
|
58
64
|
value: {
|
59
65
|
type: [String, Array],
|
60
66
|
required: false
|
61
67
|
},
|
68
|
+
/**
|
69
|
+
* set default option name
|
70
|
+
*/
|
62
71
|
defaultOptionName: {
|
63
72
|
type: String,
|
64
73
|
required: false
|
65
74
|
},
|
75
|
+
/**
|
76
|
+
* list of options to select (incl. displayed names and values)
|
77
|
+
*/
|
66
78
|
selectData: {
|
67
79
|
type: Array,
|
68
80
|
required: false
|
69
81
|
},
|
82
|
+
/**
|
83
|
+
* status (i.e. for validation)
|
84
|
+
*
|
85
|
+
* values: "error, success, disabled"
|
86
|
+
*/
|
70
87
|
status: {
|
71
88
|
type: String,
|
72
89
|
required: false
|
73
90
|
},
|
74
|
-
|
91
|
+
/**
|
92
|
+
* icon-class for dropdown icon (i.e. an angle/arrow)
|
93
|
+
*/
|
94
|
+
dropdownIconClass: {
|
95
|
+
type: String,
|
96
|
+
default: "icon-single-arrow-down"
|
97
|
+
},
|
98
|
+
/**
|
99
|
+
* label-text for fake-select
|
100
|
+
*/
|
101
|
+
labelText: {
|
75
102
|
type: String,
|
76
|
-
required:
|
103
|
+
required: false
|
77
104
|
}
|
78
105
|
},
|
79
106
|
methods: {
|