comand-component-library 3.1.25 → 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/package.json
CHANGED
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
|
|
|
@@ -65,13 +64,14 @@
|
|
|
65
64
|
closeIconClass="icon-single-arrow-down"
|
|
66
65
|
ref="accordionGroup2"
|
|
67
66
|
/>
|
|
68
|
-
<h3>Customized headline-level</h3>
|
|
67
|
+
<h3>Customized headline-level (without transition of content)</h3>
|
|
69
68
|
<CmdAccordion :accordionData="accordionData.accordionData2"
|
|
70
69
|
toggleMode="multiple"
|
|
71
70
|
tooltip="Click to toggle content"
|
|
72
71
|
openIconClass="icon-single-arrow-up"
|
|
73
72
|
closeIconClass="icon-single-arrow-down"
|
|
74
73
|
accordion-headline-level="h4"
|
|
74
|
+
:use-transition="false"
|
|
75
75
|
/>
|
|
76
76
|
<h3>Data given by slots</h3>
|
|
77
77
|
<CmdAccordion :accordionData="1">
|
|
@@ -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
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,20 +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 v-if="!useCustomHeader" 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 ?
|
|
11
|
+
<span class="toggle-icon" :class="[accordionContent.status ? iconOpen.icon.iconClass : iconClosed.icon.iconClass]"></span>
|
|
12
12
|
</a>
|
|
13
13
|
<a v-else href="#" :title="tooltip" @click.prevent="toggleContentVisibility(accordionContent)">
|
|
14
14
|
<slot :name="'customHeadline' + index"><p>{{ accordionContent.headline }}</p></slot>
|
|
15
15
|
<span class="toggle-icon" :class="[accordionContent.status ? openIconClass : closeIconClass]"></span>
|
|
16
16
|
</a>
|
|
17
|
-
<transition name="
|
|
17
|
+
<transition :name="toggleTransition">
|
|
18
18
|
<div class="accordion-content" v-if="accordionContent.status" aria-expanded="true">
|
|
19
19
|
<slot :name="'accordionContent' + index">
|
|
20
20
|
<p>{{ accordionContent.content }}</p>
|
|
@@ -36,9 +36,12 @@ export default {
|
|
|
36
36
|
},
|
|
37
37
|
props: {
|
|
38
38
|
/**
|
|
39
|
-
*
|
|
39
|
+
* use transition to expand accordion-content
|
|
40
40
|
*/
|
|
41
|
-
|
|
41
|
+
useTransition: {
|
|
42
|
+
type: Boolean,
|
|
43
|
+
default: true
|
|
44
|
+
},
|
|
42
45
|
/**
|
|
43
46
|
* toggle if mode if only one accordion can be opened (or multiple ones)
|
|
44
47
|
*
|
|
@@ -87,25 +90,37 @@ export default {
|
|
|
87
90
|
required: true
|
|
88
91
|
},
|
|
89
92
|
/**
|
|
90
|
-
*
|
|
91
|
-
*/
|
|
92
|
-
openIconClass: {
|
|
93
|
-
type: String,
|
|
94
|
-
default: "icon-single-arrow-up"
|
|
95
|
-
},
|
|
96
|
-
/**
|
|
97
|
-
* iconClass for icon to collapse an accordion
|
|
93
|
+
* icon to expand an accordion
|
|
98
94
|
*/
|
|
99
|
-
|
|
100
|
-
type:
|
|
101
|
-
default:
|
|
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
|
+
},
|
|
102
105
|
},
|
|
103
106
|
/**
|
|
104
|
-
*
|
|
107
|
+
* icon to collapse an accordion
|
|
105
108
|
*/
|
|
106
|
-
|
|
107
|
-
type:
|
|
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'
|
|
109
124
|
}
|
|
110
125
|
},
|
|
111
126
|
methods: {
|