comand-component-library 4.0.34 → 4.0.36
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 +2310 -2228
- package/dist/comand-component-library.umd.cjs +6 -6
- package/dist/style.css +1 -1
- package/package.json +2 -2
- package/src/ComponentLibrary.vue +17 -1
- package/src/componentSettingsDataAndControls.vue +41 -13
- package/src/components/CmdBasicForm.vue +18 -1
- package/src/components/CmdContainer.vue +74 -8
- package/src/components/CmdCookieDisclaimer.vue +1 -0
- package/src/components/CmdForm.vue +23 -22
- package/src/components/CmdHeadline.vue +1 -1
- package/src/components/CmdLoginForm.vue +82 -41
- package/src/components/CmdSiteSearch.vue +12 -14
- package/src/components/CmdWidthLimitationWrapper.vue +22 -8
|
@@ -1,26 +1,49 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<div class="cmd-container"
|
|
2
|
+
<div class="cmd-container">
|
|
3
|
+
<!-- begin cmd-headline -->
|
|
4
|
+
<CmdHeadline
|
|
5
|
+
v-if="cmdHeadline"
|
|
6
|
+
:pre-headline-text="cmdHeadline.preHeadlineText"
|
|
7
|
+
:headline-text="cmdHeadline.headlineText"
|
|
8
|
+
:headline-level="cmdHeadline.headlineLevel"
|
|
9
|
+
/>
|
|
10
|
+
<!-- end cmd-headline -->
|
|
11
|
+
|
|
12
|
+
<!-- begin contentAboveSlot -->
|
|
3
13
|
<div v-if="contentAboveSlot" v-html="contentAboveSlot"></div>
|
|
4
|
-
|
|
14
|
+
<!-- end contentAboveSlot -->
|
|
15
|
+
|
|
16
|
+
<!-- begin slot-content (one column/slot-item only) -->
|
|
17
|
+
<slot v-if="oneSlotItem()"></slot>
|
|
18
|
+
<!-- end slot-content (one column/slot-item only) -->
|
|
19
|
+
|
|
20
|
+
<!-- begin grid-/flex-container to wrap multiple columns/items -->
|
|
21
|
+
<div v-else :class="setInnerClass">
|
|
22
|
+
<!-- begin slot-content (multiple columns only) -->
|
|
23
|
+
<slot></slot>
|
|
24
|
+
<!-- end slot-content (multiple columns only) -->
|
|
25
|
+
</div>
|
|
26
|
+
<!-- end grid-/flex-container to wrap multiple columns/items -->
|
|
27
|
+
|
|
28
|
+
<!-- begin contentBelowSlot -->
|
|
5
29
|
<div v-if="contentBelowSlot" v-html="contentBelowSlot"></div>
|
|
30
|
+
<!-- end contentBelowSlot -->
|
|
6
31
|
</div>
|
|
7
32
|
</template>
|
|
8
33
|
|
|
9
34
|
<script>
|
|
10
|
-
import EditMode from "../mixins/EditMode.vue"
|
|
11
35
|
export default {
|
|
12
36
|
name: "CmdContainer",
|
|
13
|
-
mixins: [EditMode],
|
|
14
37
|
props: {
|
|
15
38
|
/**
|
|
16
|
-
* define html-content to display above slot-content
|
|
39
|
+
* define (html-)content to display above slot-content
|
|
17
40
|
*/
|
|
18
41
|
contentAboveSlot: {
|
|
19
42
|
type: String,
|
|
20
43
|
required: false
|
|
21
44
|
},
|
|
22
45
|
/**
|
|
23
|
-
* define html-content to display below slot-content
|
|
46
|
+
* define (html-)content to display below slot-content
|
|
24
47
|
*/
|
|
25
48
|
contentBelowSlot: {
|
|
26
49
|
type: String,
|
|
@@ -34,17 +57,46 @@ export default {
|
|
|
34
57
|
containerType: {
|
|
35
58
|
type: String,
|
|
36
59
|
required: false
|
|
60
|
+
},
|
|
61
|
+
/**
|
|
62
|
+
* define content-orientation
|
|
63
|
+
*
|
|
64
|
+
* @allowedValues: "vertical", "horizontal"
|
|
65
|
+
*/
|
|
66
|
+
contentOrientation: {
|
|
67
|
+
type: String,
|
|
68
|
+
default: "vertical",
|
|
69
|
+
validator(value) {
|
|
70
|
+
return value === "horizontal" ||
|
|
71
|
+
value === "vertical"
|
|
72
|
+
}
|
|
73
|
+
},
|
|
74
|
+
/**
|
|
75
|
+
* properties for CmdHeadline-component
|
|
76
|
+
*
|
|
77
|
+
* @requiredForAccessibilty
|
|
78
|
+
*/
|
|
79
|
+
cmdHeadline: {
|
|
80
|
+
type: Object,
|
|
81
|
+
required: false
|
|
37
82
|
}
|
|
38
83
|
},
|
|
39
84
|
methods: {
|
|
40
85
|
addHandlerProvider() {
|
|
41
86
|
return ""
|
|
87
|
+
},
|
|
88
|
+
oneSlotItem() {
|
|
89
|
+
const vnodes = this.$slots.default();
|
|
90
|
+
if (vnodes.length === 1 && typeof vnodes[0].type === "symbol" && Array.isArray(vnodes[0].children)) {
|
|
91
|
+
return vnodes[0].children.length === 1
|
|
92
|
+
}
|
|
93
|
+
return vnodes.length === 1
|
|
42
94
|
}
|
|
43
95
|
},
|
|
44
96
|
computed: {
|
|
45
97
|
containerClass() {
|
|
46
98
|
let htmlClass = null
|
|
47
|
-
switch(this.containerType) {
|
|
99
|
+
switch (this.containerType) {
|
|
48
100
|
case "grid":
|
|
49
101
|
htmlClass = "grid-container-create-columns"
|
|
50
102
|
break
|
|
@@ -56,6 +108,20 @@ export default {
|
|
|
56
108
|
break
|
|
57
109
|
}
|
|
58
110
|
return htmlClass
|
|
111
|
+
},
|
|
112
|
+
setInnerClass() {
|
|
113
|
+
if(this.containerType === "grid") {
|
|
114
|
+
return "grid-container-create-columns"
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
if(this.containerType === "flex") {
|
|
118
|
+
if(this.contentOrientation === "horizontal") {
|
|
119
|
+
return "flex-container"
|
|
120
|
+
} else if(this.contentOrientation === "vertical") {
|
|
121
|
+
return "flex-container vertical"
|
|
122
|
+
}
|
|
123
|
+
}
|
|
124
|
+
return ""
|
|
59
125
|
}
|
|
60
126
|
}
|
|
61
127
|
}
|
|
@@ -63,6 +129,6 @@ export default {
|
|
|
63
129
|
|
|
64
130
|
<style>
|
|
65
131
|
.cmd-container {
|
|
66
|
-
min-height:
|
|
132
|
+
min-height: 1rem;
|
|
67
133
|
}
|
|
68
134
|
</style>
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
<form class="cmd-form" :action="formAction" :data-use-validation="useValidation" @submit="onSubmit" :class="{error: errorOccurred}" :novalidate="novalidate">
|
|
3
3
|
<template v-if="useFieldset">
|
|
4
4
|
<fieldset class="flex-container">
|
|
5
|
-
<legend :class="{hidden : !
|
|
5
|
+
<legend :class="{hidden : !legend.show, 'align-left': legend.align === 'left'}">{{ legend.text }}</legend>
|
|
6
6
|
<!-- begin default-slot-content -->
|
|
7
7
|
<slot v-if="useSlot"></slot>
|
|
8
8
|
<!-- end default-slot-content -->
|
|
@@ -80,6 +80,22 @@ export default {
|
|
|
80
80
|
type: String,
|
|
81
81
|
required: false
|
|
82
82
|
},
|
|
83
|
+
/**
|
|
84
|
+
* legend for form
|
|
85
|
+
*
|
|
86
|
+
* useFieldset-property must be activated
|
|
87
|
+
*
|
|
88
|
+
* @requiredForAccessiblity: true
|
|
89
|
+
*/
|
|
90
|
+
legend: {
|
|
91
|
+
default() {
|
|
92
|
+
return {
|
|
93
|
+
show: true,
|
|
94
|
+
align: "left",
|
|
95
|
+
text: "Legend"
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
},
|
|
83
99
|
/**
|
|
84
100
|
* activate if form-elements should be given by slot
|
|
85
101
|
*/
|
|
@@ -119,26 +135,6 @@ export default {
|
|
|
119
135
|
type: Boolean,
|
|
120
136
|
default: true
|
|
121
137
|
},
|
|
122
|
-
/**
|
|
123
|
-
* toggle visibility for legend-text
|
|
124
|
-
*
|
|
125
|
-
* useFieldset must be activated
|
|
126
|
-
*/
|
|
127
|
-
showLegend: {
|
|
128
|
-
type: Boolean,
|
|
129
|
-
default: true
|
|
130
|
-
},
|
|
131
|
-
/**
|
|
132
|
-
* text for legend
|
|
133
|
-
*
|
|
134
|
-
* useFieldset must be activated
|
|
135
|
-
*
|
|
136
|
-
* @requiredForAccessibility: true
|
|
137
|
-
*/
|
|
138
|
-
textLegend: {
|
|
139
|
-
type: String,
|
|
140
|
-
required: false
|
|
141
|
-
},
|
|
142
138
|
/**
|
|
143
139
|
* submit-button to submit all form-data
|
|
144
140
|
*/
|
|
@@ -217,12 +213,17 @@ export default {
|
|
|
217
213
|
color: var(--error-color);
|
|
218
214
|
}
|
|
219
215
|
|
|
220
|
-
:where(input, select, textarea):valid:focus[required],
|
|
216
|
+
:where(input, select, textarea):user-valid:focus[required],
|
|
221
217
|
select:invalid:focus[required] option:not(:first-child) {
|
|
222
218
|
color: var(--success-color);
|
|
223
219
|
}
|
|
224
220
|
}
|
|
225
221
|
|
|
222
|
+
legend.align-left {
|
|
223
|
+
left: 0;
|
|
224
|
+
right: auto;
|
|
225
|
+
}
|
|
226
|
+
|
|
226
227
|
&.error {
|
|
227
228
|
fieldset, *:invalid {
|
|
228
229
|
border-color: var(--error-color);
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<!-- begin default-view -->
|
|
3
|
-
<div v-if="!editModeContext || settingsContext || mainSidebarContext"
|
|
3
|
+
<div v-if="!editModeContext || settingsContext || mainSidebarContext || headlineText"
|
|
4
4
|
:class="['cmd-headline', {'has-pre-headline-text': preHeadlineText, 'has-icon': headlineIcon?.iconClass}, getTextAlign]">
|
|
5
5
|
<template v-if="preHeadlineText">
|
|
6
6
|
<component v-if="headlineText" :is="headlineTag">
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<!-- begin login-form -->
|
|
3
3
|
<fieldset v-show="!sendLogin" class="cmd-login-form flex-container">
|
|
4
|
-
<legend :class="{hidden : !
|
|
4
|
+
<legend :class="{hidden : !legendLoginForm.show, 'align-left': legendLoginForm.align === 'left'}">{{ legendLoginForm.text }}</legend>
|
|
5
5
|
<!-- begin CmdHeadline -->
|
|
6
6
|
<CmdHeadline
|
|
7
7
|
v-if="cmdHeadlineLoginForm"
|
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
<!-- end CmdHeadline -->
|
|
11
11
|
|
|
12
12
|
<!-- begin form elements -->
|
|
13
|
-
<div class="flex-container">
|
|
13
|
+
<div :class="['login-fields flex-container', {'vertical': orientation === 'vertical'}]">
|
|
14
14
|
<!-- begin CmdFormElement -->
|
|
15
15
|
<CmdFormElement
|
|
16
16
|
element="input"
|
|
@@ -44,6 +44,10 @@
|
|
|
44
44
|
</div>
|
|
45
45
|
<!-- end form elements -->
|
|
46
46
|
|
|
47
|
+
<!-- begin slot for login-form -->
|
|
48
|
+
<slot name="login"></slot>
|
|
49
|
+
<!-- end slot for login-form -->
|
|
50
|
+
|
|
47
51
|
<div class="option-wrapper flex-container">
|
|
48
52
|
<template v-if="options.forgotPassword || options.createAccount">
|
|
49
53
|
<!-- begin link for 'forgot password' -->
|
|
@@ -59,30 +63,20 @@
|
|
|
59
63
|
</a>
|
|
60
64
|
<!-- end link for 'forgot password' -->
|
|
61
65
|
|
|
62
|
-
<!-- begin link
|
|
63
|
-
<
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
<!-- begin link-type 'router' for 'create account' -->
|
|
75
|
-
<router-link v-else-if="options.createAccount && options.createAccount.linkType === 'router'" :to="options.createAccount.path">
|
|
76
|
-
<!-- begin CmdIcon -->
|
|
77
|
-
<CmdIcon v-if="options.createAccount.icon && options.createAccount.icon.show && options.createAccount.icon.iconClass"
|
|
78
|
-
:class="options.createAccount.icon.iconClass"
|
|
79
|
-
:type="options.createAccount.icon.iconType"
|
|
80
|
-
:title="options.createAccount.icon.tooltip" />
|
|
66
|
+
<!-- begin link for 'create account' -->
|
|
67
|
+
<template v-if="options.createAccount">
|
|
68
|
+
<CmdLink
|
|
69
|
+
:linkType="options.createAccount.linkType"
|
|
70
|
+
:path="options.createAccount.path"
|
|
71
|
+
:text="options.createAccount.text"
|
|
72
|
+
:icon="{
|
|
73
|
+
iconClass: options.createAccount.icon?.iconClass,
|
|
74
|
+
tooltip: options.createAccount.icon?.tooltip,
|
|
75
|
+
position: options.createAccount.icon?.position
|
|
76
|
+
}"
|
|
81
77
|
/>
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
</router-link>
|
|
85
|
-
<!-- end link-type 'router' for 'create account' -->
|
|
78
|
+
</template>
|
|
79
|
+
<!-- end link for 'create account' -->
|
|
86
80
|
</template>
|
|
87
81
|
|
|
88
82
|
<!-- begin link-type 'button' -->
|
|
@@ -110,7 +104,7 @@
|
|
|
110
104
|
|
|
111
105
|
<!-- begin send-login-form -->
|
|
112
106
|
<fieldset v-show="sendLogin" class="cmd-login-form flex-container">
|
|
113
|
-
<legend :class="{
|
|
107
|
+
<legend :class="{hidden : !legendForgotLoginForm.show, 'align-left': legendForgotLoginForm.align === 'left'}">{{ legendForgotLoginForm .text }}</legend>
|
|
114
108
|
<!-- begin CmdHeadline -->
|
|
115
109
|
<CmdHeadline
|
|
116
110
|
v-if="cmdHeadlineSendLoginForm"
|
|
@@ -134,8 +128,12 @@
|
|
|
134
128
|
/>
|
|
135
129
|
<!-- end CmdFormElement -->
|
|
136
130
|
|
|
131
|
+
<!-- begin slot for send-login-form -->
|
|
132
|
+
<slot name="send-login"></slot>
|
|
133
|
+
<!-- end slot for send-login-form -->
|
|
134
|
+
|
|
137
135
|
<div class="option-wrapper flex-container">
|
|
138
|
-
<a href="#" @click.prevent="toggleSendLoginView">
|
|
136
|
+
<a v-if="options.backToLoginForm" href="#" @click.prevent="toggleSendLoginView">
|
|
139
137
|
<!-- begin CmdIcon -->
|
|
140
138
|
<CmdIcon
|
|
141
139
|
v-if="options.backToLoginForm && options.backToLoginForm.icon && options.backToLoginForm.icon.show && options.backToLoginForm.icon.iconClass"
|
|
@@ -151,19 +149,19 @@
|
|
|
151
149
|
|
|
152
150
|
<!-- begin link-type 'button' -->
|
|
153
151
|
<button
|
|
154
|
-
v-if="buttons.sendLogin
|
|
155
|
-
:type="buttons.sendLogin
|
|
156
|
-
:class="['button', { primary: buttons.sendLogin
|
|
152
|
+
v-if="buttons.sendLogin?.linkType === 'button'"
|
|
153
|
+
:type="buttons.sendLogin?.type === 'submit' ? 'submit' : 'button'"
|
|
154
|
+
:class="['button', { primary: buttons.sendLogin?.primary }]"
|
|
157
155
|
:disabled="buttonSendLoginDisabled"
|
|
158
156
|
>
|
|
159
157
|
<!-- begin CmdIcon -->
|
|
160
158
|
<CmdIcon
|
|
161
|
-
v-if="buttons.sendLogin
|
|
162
|
-
:iconClass="buttons.sendLogin
|
|
163
|
-
:title="buttons.sendLogin
|
|
159
|
+
v-if="buttons.sendLogin?.icon?.iconClass"
|
|
160
|
+
:iconClass="buttons.sendLogin?.icon?.iconClass"
|
|
161
|
+
:title="buttons.sendLogin?.icon?.tooltip"
|
|
164
162
|
/>
|
|
165
163
|
<!-- end CmdIcon -->
|
|
166
|
-
<span v-if="buttons.sendLogin
|
|
164
|
+
<span v-if="buttons.sendLogin?.text">{{ buttons.sendLogin?.text }}</span>
|
|
167
165
|
</button>
|
|
168
166
|
<!-- end link-type 'button' -->
|
|
169
167
|
</div>
|
|
@@ -200,13 +198,31 @@ export default {
|
|
|
200
198
|
}
|
|
201
199
|
},
|
|
202
200
|
/**
|
|
203
|
-
*
|
|
201
|
+
* orientation for inputfields
|
|
204
202
|
*
|
|
205
|
-
* @
|
|
203
|
+
* @allowedValues 'vertical', 'horizontal'
|
|
206
204
|
*/
|
|
207
|
-
|
|
205
|
+
orientation: {
|
|
208
206
|
type: String,
|
|
209
|
-
default:
|
|
207
|
+
default: null,
|
|
208
|
+
validator(event) {
|
|
209
|
+
return event === "vertical" || event === "horizontal"
|
|
210
|
+
}
|
|
211
|
+
},
|
|
212
|
+
/**
|
|
213
|
+
* options for legend for login-fieldset
|
|
214
|
+
*
|
|
215
|
+
* @requiredForAccessibility: true
|
|
216
|
+
*/
|
|
217
|
+
legendLoginForm: {
|
|
218
|
+
type: Object,
|
|
219
|
+
default() {
|
|
220
|
+
return {
|
|
221
|
+
show: true,
|
|
222
|
+
align: "right",
|
|
223
|
+
text: "Login form"
|
|
224
|
+
}
|
|
225
|
+
}
|
|
210
226
|
},
|
|
211
227
|
/**
|
|
212
228
|
* toggle legend visibility
|
|
@@ -220,9 +236,15 @@ export default {
|
|
|
220
236
|
*
|
|
221
237
|
* @requiredForAccessibility: true
|
|
222
238
|
*/
|
|
223
|
-
|
|
224
|
-
type:
|
|
225
|
-
default
|
|
239
|
+
legendForgotLoginForm: {
|
|
240
|
+
type: Object,
|
|
241
|
+
default() {
|
|
242
|
+
return {
|
|
243
|
+
show: true,
|
|
244
|
+
align: 'right"',
|
|
245
|
+
text: 'Forgot login form'
|
|
246
|
+
}
|
|
247
|
+
}
|
|
226
248
|
},
|
|
227
249
|
/**
|
|
228
250
|
* properties for CmdHeadline-component for login-form
|
|
@@ -441,7 +463,26 @@ export default {
|
|
|
441
463
|
<style>
|
|
442
464
|
/* begin cmd-login-form ---------------------------------------------------------------------------------------- */
|
|
443
465
|
.cmd-login-form {
|
|
466
|
+
.cmd-headline {
|
|
467
|
+
flex: none;
|
|
468
|
+
margin: 0;
|
|
469
|
+
}
|
|
470
|
+
|
|
471
|
+
legend.align-left {
|
|
472
|
+
left: 0;
|
|
473
|
+
right: auto;
|
|
474
|
+
}
|
|
475
|
+
|
|
476
|
+
.login-fields {
|
|
477
|
+
&.vertical {
|
|
478
|
+
.cmd-form-element {
|
|
479
|
+
width: 100%;
|
|
480
|
+
}
|
|
481
|
+
}
|
|
482
|
+
}
|
|
483
|
+
|
|
444
484
|
.option-wrapper {
|
|
485
|
+
flex: none;
|
|
445
486
|
align-items: center;
|
|
446
487
|
|
|
447
488
|
> a:not(.button) {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<fieldset class="cmd-box-site-search flex-container">
|
|
3
3
|
<!-- begin legend -->
|
|
4
|
-
<legend :class="{
|
|
4
|
+
<legend :class="{hidden : !legend.show, 'align-left': legend.align === 'left'}">{{ legend.text }}</legend>
|
|
5
5
|
<!-- end legend -->
|
|
6
6
|
|
|
7
7
|
<!-- begin CmdHeadline -->
|
|
@@ -160,22 +160,20 @@ export default {
|
|
|
160
160
|
default: true
|
|
161
161
|
},
|
|
162
162
|
/**
|
|
163
|
-
*
|
|
163
|
+
* legend for form
|
|
164
164
|
*
|
|
165
|
-
*
|
|
166
|
-
*/
|
|
167
|
-
showLegend: {
|
|
168
|
-
type: Boolean,
|
|
169
|
-
default: true
|
|
170
|
-
},
|
|
171
|
-
/**
|
|
172
|
-
* text for legend
|
|
165
|
+
* useFieldset-property must be activated
|
|
173
166
|
*
|
|
174
|
-
* @
|
|
167
|
+
* @requiredForAccessiblity: true
|
|
175
168
|
*/
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
169
|
+
legend: {
|
|
170
|
+
default() {
|
|
171
|
+
return {
|
|
172
|
+
show: true,
|
|
173
|
+
align: "left",
|
|
174
|
+
text: "Legend"
|
|
175
|
+
}
|
|
176
|
+
}
|
|
179
177
|
},
|
|
180
178
|
/**
|
|
181
179
|
* send search result from outside to display inside this component
|
|
@@ -40,7 +40,12 @@
|
|
|
40
40
|
export default {
|
|
41
41
|
name: "CmdWidthLimitationWrapper",
|
|
42
42
|
props: {
|
|
43
|
-
|
|
43
|
+
/**
|
|
44
|
+
* define container-type
|
|
45
|
+
*
|
|
46
|
+
* @allowedValues: "grid", "flex"
|
|
47
|
+
*/
|
|
48
|
+
containerType: {
|
|
44
49
|
type: String,
|
|
45
50
|
default: "flex"
|
|
46
51
|
},
|
|
@@ -93,9 +98,18 @@ export default {
|
|
|
93
98
|
type: String,
|
|
94
99
|
required: false
|
|
95
100
|
},
|
|
96
|
-
|
|
101
|
+
/**
|
|
102
|
+
* define content-orientation
|
|
103
|
+
*
|
|
104
|
+
* @allowedValues: "vertical", "horizontal"
|
|
105
|
+
*/
|
|
106
|
+
contentOrientation: {
|
|
97
107
|
type: String,
|
|
98
|
-
default: "vertical"
|
|
108
|
+
default: "vertical",
|
|
109
|
+
validator(value) {
|
|
110
|
+
return value === "horizontal" ||
|
|
111
|
+
value === "vertical"
|
|
112
|
+
}
|
|
99
113
|
},
|
|
100
114
|
/**
|
|
101
115
|
* properties for CmdHeadline-component
|
|
@@ -105,7 +119,7 @@ export default {
|
|
|
105
119
|
cmdHeadline: {
|
|
106
120
|
type: Object,
|
|
107
121
|
required: false
|
|
108
|
-
}
|
|
122
|
+
}
|
|
109
123
|
},
|
|
110
124
|
computed: {
|
|
111
125
|
setSectionClass() {
|
|
@@ -121,14 +135,14 @@ export default {
|
|
|
121
135
|
return ""
|
|
122
136
|
},
|
|
123
137
|
setInnerClass() {
|
|
124
|
-
if(this.
|
|
138
|
+
if(this.containerType === "grid") {
|
|
125
139
|
return "grid-container-create-columns"
|
|
126
140
|
}
|
|
127
141
|
|
|
128
|
-
if(this.
|
|
129
|
-
if(this.
|
|
142
|
+
if(this.containerType === "flex") {
|
|
143
|
+
if(this.contentOrientation === "horizontal") {
|
|
130
144
|
return "flex-container"
|
|
131
|
-
} else if(this.
|
|
145
|
+
} else if(this.contentOrientation === "vertical") {
|
|
132
146
|
return "flex-container vertical"
|
|
133
147
|
}
|
|
134
148
|
}
|