comand-component-library 4.0.34 → 4.0.35
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/comand-component-library.js +2190 -2124
- package/dist/comand-component-library.umd.cjs +6 -6
- package/dist/style.css +1 -1
- package/package.json +2 -2
- package/src/ComponentLibrary.vue +5 -1
- package/src/componentSettingsDataAndControls.vue +31 -9
- package/src/components/CmdBasicForm.vue +7 -0
- package/src/components/CmdContainer.vue +74 -8
- package/src/components/CmdCookieDisclaimer.vue +1 -0
- package/src/components/CmdHeadline.vue +1 -1
- package/src/components/CmdLoginForm.vue +50 -32
- 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>
|
|
@@ -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">
|
|
@@ -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' -->
|
|
@@ -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>
|
|
@@ -199,6 +197,18 @@ export default {
|
|
|
199
197
|
}
|
|
200
198
|
}
|
|
201
199
|
},
|
|
200
|
+
/**
|
|
201
|
+
* orientation for inputfields
|
|
202
|
+
*
|
|
203
|
+
* @allowedValues 'vertical', 'horizontal'
|
|
204
|
+
*/
|
|
205
|
+
orientation: {
|
|
206
|
+
type: String,
|
|
207
|
+
default: null,
|
|
208
|
+
validator(event) {
|
|
209
|
+
return event === "vertical" || event === "horizontal"
|
|
210
|
+
}
|
|
211
|
+
},
|
|
202
212
|
/**
|
|
203
213
|
* text used as legend for login-fieldset
|
|
204
214
|
*
|
|
@@ -441,6 +451,14 @@ export default {
|
|
|
441
451
|
<style>
|
|
442
452
|
/* begin cmd-login-form ---------------------------------------------------------------------------------------- */
|
|
443
453
|
.cmd-login-form {
|
|
454
|
+
.login-fields {
|
|
455
|
+
&.vertical {
|
|
456
|
+
.cmd-form-element {
|
|
457
|
+
width: 100%;
|
|
458
|
+
}
|
|
459
|
+
}
|
|
460
|
+
}
|
|
461
|
+
|
|
444
462
|
.option-wrapper {
|
|
445
463
|
align-items: center;
|
|
446
464
|
|
|
@@ -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
|
}
|