comand-component-library 4.0.34 → 4.0.35
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 +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
|
}
|