comand-component-library 4.2.83 → 4.2.85
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/ComponentLibrary.vue
CHANGED
|
@@ -1283,7 +1283,7 @@
|
|
|
1283
1283
|
<h2 class="headline-demopage" id="section-multistep-form-wrapper">
|
|
1284
1284
|
<span>Multistepform-Wrapper</span>
|
|
1285
1285
|
<a href="#" class="button small icon-cog" title="Open Component Settings"
|
|
1286
|
-
@click.prevent="openSettingsSidebar('
|
|
1286
|
+
@click.prevent="openSettingsSidebar('CmdMultistepFormWrapper')">
|
|
1287
1287
|
</a>
|
|
1288
1288
|
</h2>
|
|
1289
1289
|
<h3>Data provided by property</h3>
|
|
@@ -1372,15 +1372,14 @@
|
|
|
1372
1372
|
</div>
|
|
1373
1373
|
</CmdForm>
|
|
1374
1374
|
</template>
|
|
1375
|
-
<template v-slot:page-4>
|
|
1375
|
+
<template v-slot:page-4="props">
|
|
1376
1376
|
<h3>Page 4</h3>
|
|
1377
|
-
Content Page 4
|
|
1378
|
-
</template>
|
|
1379
|
-
<template v-slot:page-5="props">
|
|
1380
|
-
<h3>Page 5</h3>
|
|
1381
1377
|
<CmdForm
|
|
1382
|
-
|
|
1378
|
+
:cmdHeadline=" { headlineText: 'Confirmation', headlineLevel: 3 }"
|
|
1379
|
+
:submitButton="{ disabled : props.atleastOneStepWithError }"
|
|
1380
|
+
:cancelButton="{ show: false }"
|
|
1383
1381
|
>
|
|
1382
|
+
<p>Please confirm that all data ou provided is legit.</p>
|
|
1384
1383
|
<CmdFormElement
|
|
1385
1384
|
element="input"
|
|
1386
1385
|
type="checkbox"
|
|
@@ -1393,12 +1392,12 @@
|
|
|
1393
1392
|
@validation-status-change="setValidationStatusCheckbox($event, 'confirm-data-privacy', props)"
|
|
1394
1393
|
/>
|
|
1395
1394
|
</CmdForm>
|
|
1396
|
-
props.
|
|
1395
|
+
props.atleastOneStepWithError: {{ props.atleastOneStepWithError }}
|
|
1396
|
+
</template>
|
|
1397
|
+
<template>
|
|
1398
|
+
<h3>Page 5 - Confirmation</h3>
|
|
1399
|
+
<p>Thank you for sending your request!</p>
|
|
1397
1400
|
</template>
|
|
1398
|
-
<twmplate>
|
|
1399
|
-
<h3>Page 6 - Confirmation</h3>
|
|
1400
|
-
<p>Thank you for seding your request!</p>
|
|
1401
|
-
</twmplate>
|
|
1402
1401
|
</CmdMultistepFormWrapper>
|
|
1403
1402
|
<h3>Data provided by slot</h3>
|
|
1404
1403
|
<CmdMultistepFormWrapper>
|
|
@@ -62,129 +62,133 @@
|
|
|
62
62
|
</span>
|
|
63
63
|
<!-- end label-text (+ required asterisk) -->
|
|
64
64
|
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
65
|
+
<!-- begin element 'input' -->
|
|
66
|
+
<template v-if="element === 'input'">
|
|
67
|
+
<span v-if="$attrs.type !== 'checkbox' && $attrs.type !== 'radio' && $attrs.type !== 'search'"
|
|
68
|
+
class="flex-container inner-input-wrapper"><!-- container required to place inner icons correctly -->
|
|
69
|
+
<!-- begin CmdIcon (for icon inside field) -->
|
|
70
|
+
<CmdIcon v-if="fieldIconClass" class="place-inside" :iconClass="fieldIconClass" />
|
|
71
|
+
<!-- end CmdIcon (for icon inside field) -->
|
|
70
72
|
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
73
|
+
<!-- begin inputfield -->
|
|
74
|
+
<template v-if="element === 'input' && $attrs.type !== 'search'">
|
|
75
|
+
<input
|
|
76
|
+
:id="htmlId"
|
|
77
|
+
:class="inputClass"
|
|
78
|
+
@focus="tooltip = true"
|
|
79
|
+
@blur="onBlur"
|
|
80
|
+
@input="onInput"
|
|
81
|
+
@mouseover="datalistFocus"
|
|
82
|
+
@keyup="checkForCapsLock"
|
|
83
|
+
@change="$emit('change', $event)"
|
|
84
|
+
:autocomplete="autocomplete"
|
|
85
|
+
:list="datalist ? datalist.id : null"
|
|
86
|
+
:value="modelValue"
|
|
87
|
+
:minlength="$attrs.type === 'password' ? '8' : null"
|
|
88
|
+
:maxlength="getMaxLength()"
|
|
89
|
+
ref="input"
|
|
90
|
+
v-bind="elementAttributes"
|
|
91
|
+
/>
|
|
92
|
+
<!-- begin delete-icon -->
|
|
93
|
+
<a v-if="iconDelete?.show && !$attrs.disabled && ($attrs.type === 'text' || $attrs.type === 'email' || $attrs.type === 'phone')"
|
|
94
|
+
class="deleteicon"
|
|
95
|
+
href="#"
|
|
96
|
+
@click.prevent="deleteInput"
|
|
97
|
+
:title="iconDelete?.tooltip">
|
|
98
|
+
<!-- begin CmdIcon -->
|
|
99
|
+
<CmdIcon :iconClass="iconDelete?.iconClass" :type="iconDelete?.iconType"/>
|
|
100
|
+
<!-- end CmdIcon -->
|
|
101
|
+
</a>
|
|
102
|
+
<!-- end delete-icon -->
|
|
103
|
+
</template>
|
|
104
|
+
<!-- end inputfield -->
|
|
105
|
+
|
|
106
|
+
<!-- begin show-password-icon -->
|
|
107
|
+
<a v-if="$attrs.type === 'password'"
|
|
108
|
+
href="#"
|
|
109
|
+
class="place-inside"
|
|
110
|
+
@mousedown.prevent="showPassword"
|
|
111
|
+
@mouseup.prevent="hidePassword"
|
|
112
|
+
@mouseleave.prevent="hidePassword"
|
|
113
|
+
@click.prevent
|
|
114
|
+
:title="iconPasswordVisible.tooltip"
|
|
115
|
+
>
|
|
116
|
+
<!-- begin CmdIcon -->
|
|
117
|
+
<CmdIcon :iconClass="iconPasswordVisible.iconClass"/>
|
|
98
118
|
<!-- end CmdIcon -->
|
|
99
119
|
</a>
|
|
100
|
-
<!-- end
|
|
101
|
-
</
|
|
102
|
-
<!-- end inputfield -->
|
|
103
|
-
|
|
104
|
-
<!-- begin show-password-icon -->
|
|
105
|
-
<a v-if="$attrs.type === 'password'"
|
|
106
|
-
href="#"
|
|
107
|
-
class="place-inside"
|
|
108
|
-
@mousedown.prevent="showPassword"
|
|
109
|
-
@mouseup.prevent="hidePassword"
|
|
110
|
-
@mouseleave.prevent="hidePassword"
|
|
111
|
-
@click.prevent
|
|
112
|
-
:title="iconPasswordVisible.tooltip"
|
|
113
|
-
>
|
|
114
|
-
<!-- begin CmdIcon -->
|
|
115
|
-
<CmdIcon :iconClass="iconPasswordVisible.iconClass"/>
|
|
116
|
-
<!-- end CmdIcon -->
|
|
117
|
-
</a>
|
|
118
|
-
<!-- end show-password-icon -->
|
|
119
|
-
</span>
|
|
120
|
-
|
|
121
|
-
<!-- begin datalist -->
|
|
122
|
-
<template v-if="datalist && datalist.options.length">
|
|
123
|
-
<datalist :id="datalist.id">
|
|
124
|
-
<option v-for="(option, index) in datalist.options" :key="index" :value="option"></option>
|
|
125
|
-
</datalist>
|
|
126
|
-
</template>
|
|
127
|
-
<!-- end datalist -->
|
|
128
|
-
|
|
129
|
-
<!-- begin checkbox and radiobutton -->
|
|
130
|
-
<template v-else-if="element === 'input' && ($attrs.type === 'checkbox' || $attrs.type === 'radio')">
|
|
131
|
-
<!-- begin default checkbox/radiobutton -->
|
|
132
|
-
<template v-if="!(onLabel && offLabel)">
|
|
133
|
-
<input
|
|
134
|
-
v-bind="elementAttributes"
|
|
135
|
-
@change="onChange"
|
|
136
|
-
@blur="onBlur"
|
|
137
|
-
@input="onInput"
|
|
138
|
-
:checked="isChecked"
|
|
139
|
-
:value="inputValue"
|
|
140
|
-
:class="[inputClass, validationStatus, toggleSwitchIconClass, { 'replace-input-type': replaceInputType}]"
|
|
141
|
-
:id="htmlId"
|
|
142
|
-
:disabled="$attrs.disabled"
|
|
143
|
-
:aria-invalid="validationStatus === 'error'"
|
|
144
|
-
/>
|
|
145
|
-
<span v-if="labelText || $slots.labeltext" :class="['label-text', { hidden: !showLabel }]">
|
|
146
|
-
<span>
|
|
147
|
-
<!-- begin labelText for checkbox/radio/toggle-switch (without switch-label) -->
|
|
148
|
-
<span v-if="labelText" v-html="labelText"></span>
|
|
149
|
-
<!-- end labelText for checkbox/radio/toggle-switch (without switch-label) -->
|
|
150
|
-
|
|
151
|
-
<!-- begin slot 'labeltext' -->
|
|
152
|
-
<slot v-else name="labeltext"/>
|
|
153
|
-
<!-- end slot 'labeltext' -->
|
|
120
|
+
<!-- end show-password-icon -->
|
|
121
|
+
</span>
|
|
154
122
|
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
123
|
+
<!-- begin datalist -->
|
|
124
|
+
<template v-if="datalist && datalist.options.length">
|
|
125
|
+
<datalist :id="datalist.id">
|
|
126
|
+
<option v-for="(option, index) in datalist.options" :key="index" :value="option"></option>
|
|
127
|
+
</datalist>
|
|
158
128
|
</template>
|
|
159
|
-
<!-- end
|
|
160
|
-
|
|
161
|
-
<!-- begin
|
|
162
|
-
<template v-else-if="
|
|
163
|
-
|
|
129
|
+
<!-- end datalist -->
|
|
130
|
+
|
|
131
|
+
<!-- begin checkbox and radiobutton -->
|
|
132
|
+
<template v-else-if="$attrs.type === 'checkbox' || $attrs.type === 'radio'">
|
|
133
|
+
<!-- begin default checkbox/radiobutton -->
|
|
134
|
+
<template v-if="!(onLabel && offLabel)">
|
|
164
135
|
<input
|
|
165
136
|
v-bind="elementAttributes"
|
|
166
137
|
@change="onChange"
|
|
167
138
|
@blur="onBlur"
|
|
139
|
+
@input="onInput"
|
|
168
140
|
:checked="isChecked"
|
|
169
141
|
:value="inputValue"
|
|
170
|
-
:class="
|
|
142
|
+
:class="[inputClass, validationStatus, toggleSwitchIconClass, { 'replace-input-type': replaceInputType}]"
|
|
171
143
|
:id="htmlId"
|
|
172
144
|
:disabled="$attrs.disabled"
|
|
173
145
|
:aria-invalid="validationStatus === 'error'"
|
|
174
146
|
/>
|
|
175
|
-
<span class="label-text
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
147
|
+
<span v-if="labelText || $slots.labeltext" :class="['label-text', { hidden: !showLabel }]">
|
|
148
|
+
<span>
|
|
149
|
+
<!-- begin labelText for checkbox/radio/toggle-switch (without switch-label) -->
|
|
150
|
+
<span v-if="labelText" v-html="labelText"></span>
|
|
151
|
+
<!-- end labelText for checkbox/radio/toggle-switch (without switch-label) -->
|
|
152
|
+
|
|
153
|
+
<!-- begin slot 'labeltext' -->
|
|
154
|
+
<slot v-else name="labeltext"/>
|
|
155
|
+
<!-- end slot 'labeltext' -->
|
|
156
|
+
|
|
157
|
+
<sup v-if="$attrs.required">*</sup>
|
|
158
|
+
</span>
|
|
159
|
+
</span>
|
|
160
|
+
</template>
|
|
161
|
+
<!-- end default checkbox/radiobutton -->
|
|
162
|
+
|
|
163
|
+
<!-- begin labels for toggle-switch with switch-label -->
|
|
164
|
+
<template v-else-if="onLabel && offLabel">
|
|
165
|
+
<span class="switch-label-wrapper">
|
|
166
|
+
<input
|
|
167
|
+
v-bind="elementAttributes"
|
|
168
|
+
@change="onChange"
|
|
169
|
+
@blur="onBlur"
|
|
170
|
+
:checked="isChecked"
|
|
171
|
+
:value="inputValue"
|
|
172
|
+
:class="{inputClass, validationStatus}"
|
|
173
|
+
:id="htmlId"
|
|
174
|
+
:disabled="$attrs.disabled"
|
|
175
|
+
:aria-invalid="validationStatus === 'error'"
|
|
176
|
+
/>
|
|
177
|
+
<span class="label-text">{{ onLabel }}</span>
|
|
178
|
+
<span class="label-text">{{ offLabel }}</span>
|
|
179
|
+
</span>
|
|
180
|
+
<!-- begin labelText for checkbox/radio/toggle-switch (with switch-label) -->
|
|
181
|
+
<span v-if="labelText" :class="['label-text', {hidden: !showLabel}]">
|
|
182
|
+
<span v-html="labelText"></span><sup v-if="$attrs.required">*</sup>
|
|
183
|
+
</span>
|
|
184
|
+
<!-- end labelText for checkbox/radio/toggle-switch (with switch-label) -->
|
|
185
|
+
</template>
|
|
186
|
+
<slot v-else></slot>
|
|
187
|
+
<!-- end labels for toggle-switch with switch-label -->
|
|
183
188
|
</template>
|
|
184
|
-
|
|
185
|
-
<!-- end labels for toggle-switch with switch-label -->
|
|
189
|
+
<!-- end checkbox and radiobutton -->
|
|
186
190
|
</template>
|
|
187
|
-
<!-- end
|
|
191
|
+
<!-- end element 'input' -->
|
|
188
192
|
|
|
189
193
|
<!-- begin selectbox -->
|
|
190
194
|
<select v-if="element === 'select'"
|
|
@@ -15,19 +15,22 @@
|
|
|
15
15
|
</slot>
|
|
16
16
|
<!-- begin slot for progress-bar -->
|
|
17
17
|
|
|
18
|
+
<!-- begin main cntent for page -->
|
|
18
19
|
<div v-show="page === currentPage" :class="'multistep-page-' + page" v-for="(page, index) in numberOfPages" :key="index">
|
|
19
|
-
<CmdSystemMessage v-if="
|
|
20
|
+
<CmdSystemMessage v-if="validationStatusForSteps.some(item => item.page === page)" :systemMessage="getSystemMessage(page)" validationStatus="error" />
|
|
21
|
+
|
|
20
22
|
<!-- begin slot for page content -->
|
|
21
23
|
<slot
|
|
22
24
|
:name="'page-' + page"
|
|
23
25
|
:setErrorOnPage="(message) => setErrorOnPage(page, message)"
|
|
24
26
|
:removeErrorOnPage="() => removeErrorOnPage(page)"
|
|
25
|
-
:
|
|
27
|
+
:atleastOneStepWithError="atleastOneStepWithError"
|
|
26
28
|
:formDataForPage="formDataForPage(page)"
|
|
27
29
|
:updateFormDataForPage="(event) => updateFormDataForPage(page, event)"
|
|
28
30
|
/>
|
|
29
31
|
<!-- end slot for page content -->
|
|
30
32
|
</div>
|
|
33
|
+
<!-- end main cntent for page -->
|
|
31
34
|
|
|
32
35
|
<!-- begin slot for pagination -->
|
|
33
36
|
<slot name="pagination"
|
|
@@ -56,7 +59,7 @@ export default {
|
|
|
56
59
|
data () {
|
|
57
60
|
return {
|
|
58
61
|
currentPage: 1,
|
|
59
|
-
|
|
62
|
+
validationStatusForSteps: [],
|
|
60
63
|
inputMade: [],
|
|
61
64
|
formData: {}
|
|
62
65
|
}
|
|
@@ -72,13 +75,6 @@ export default {
|
|
|
72
75
|
show: true
|
|
73
76
|
}
|
|
74
77
|
}
|
|
75
|
-
},
|
|
76
|
-
/**
|
|
77
|
-
* properties for CmdMultistepFormProgressBar-component
|
|
78
|
-
*/
|
|
79
|
-
showButtonWrapper: {
|
|
80
|
-
type: Boolean,
|
|
81
|
-
default: true
|
|
82
78
|
},
|
|
83
79
|
/**
|
|
84
80
|
* properties for CmdLink-component
|
|
@@ -117,29 +113,29 @@ export default {
|
|
|
117
113
|
this.formData[page] = event
|
|
118
114
|
},
|
|
119
115
|
getSystemMessage(page) {
|
|
120
|
-
const pageEntry = this.
|
|
116
|
+
const pageEntry = this.validationStatusForSteps.find(item => item.page === page);
|
|
121
117
|
return pageEntry.message
|
|
122
118
|
},
|
|
123
119
|
setErrorOnPage(page, message) {
|
|
124
|
-
const exists = this.
|
|
120
|
+
const exists = this.validationStatusForSteps.some(item => item.page === page);
|
|
125
121
|
|
|
126
122
|
if(!this.inputMade.includes(page)) {
|
|
127
123
|
this.inputMade.push(page)
|
|
128
124
|
}
|
|
129
125
|
|
|
130
126
|
if (!exists) {
|
|
131
|
-
this.
|
|
127
|
+
this.validationStatusForSteps.push({ page: page, message: message });
|
|
132
128
|
}
|
|
133
129
|
},
|
|
134
130
|
removeErrorOnPage(page) {
|
|
135
|
-
const index = this.
|
|
131
|
+
const index = this.validationStatusForSteps.findIndex(item => item.page === page);
|
|
136
132
|
|
|
137
133
|
if(!this.inputMade.includes(page)) {
|
|
138
134
|
this.inputMade.push(page)
|
|
139
135
|
}
|
|
140
136
|
|
|
141
137
|
if (index !== -1) {
|
|
142
|
-
this.
|
|
138
|
+
this.validationStatusForSteps.splice(index, 1);
|
|
143
139
|
}
|
|
144
140
|
},
|
|
145
141
|
setCurrentPage(page) {
|
|
@@ -157,24 +153,27 @@ export default {
|
|
|
157
153
|
}
|
|
158
154
|
},
|
|
159
155
|
computed: {
|
|
160
|
-
|
|
161
|
-
|
|
156
|
+
// check if at leat one step has status 'error'
|
|
157
|
+
atleastOneStepWithError() {
|
|
158
|
+
return this.validationStatusForSteps.length > 0 || this.inputMade.length === 0
|
|
162
159
|
},
|
|
160
|
+
// check if a page ha
|
|
163
161
|
pageHasError() {
|
|
164
|
-
return this.
|
|
162
|
+
return this.validationStatusForSteps.some((item) => {
|
|
165
163
|
return item.page === this.currentPage
|
|
166
164
|
})
|
|
167
165
|
},
|
|
166
|
+
// get steps filled correctly (status 'success')
|
|
168
167
|
successSteps() {
|
|
169
168
|
const steps = []
|
|
170
169
|
|
|
171
170
|
if(this.inputMade.length) {
|
|
172
171
|
for(let i = 0; i < this.numberOfPages; i++) {
|
|
173
|
-
const success = !this.
|
|
172
|
+
const success = !this.validationStatusForSteps.find((item) => {
|
|
174
173
|
return item.page === i + 1
|
|
175
174
|
})
|
|
176
175
|
|
|
177
|
-
// if no
|
|
176
|
+
// if no validationStatusForSteps is found (all steps are 'success' ant at least one input was made)
|
|
178
177
|
if(success && this.inputMade.includes(i + 1)) {
|
|
179
178
|
steps.push(i + 1)
|
|
180
179
|
}
|
|
@@ -183,9 +182,10 @@ export default {
|
|
|
183
182
|
|
|
184
183
|
return steps
|
|
185
184
|
},
|
|
185
|
+
// get steps filled incorrectly (status 'error')
|
|
186
186
|
errorSteps() {
|
|
187
187
|
const steps = []
|
|
188
|
-
this.
|
|
188
|
+
this.validationStatusForSteps.forEach((item) => {
|
|
189
189
|
steps.push(item.page)
|
|
190
190
|
})
|
|
191
191
|
|
|
@@ -200,9 +200,11 @@ export default {
|
|
|
200
200
|
|
|
201
201
|
return steps
|
|
202
202
|
},
|
|
203
|
+
// get number of pages
|
|
203
204
|
numberOfPages() {
|
|
204
205
|
return Object.keys(this.$slots).filter(key => key.startsWith("page-")).length
|
|
205
206
|
},
|
|
207
|
+
// set properties for inner CmdMultistepFormProgressBar
|
|
206
208
|
cmdMultistepFormProgressBarProperties() {
|
|
207
209
|
return {
|
|
208
210
|
show: true,
|
|
@@ -210,6 +212,7 @@ export default {
|
|
|
210
212
|
...this.cmdMultistepFormProgressBar
|
|
211
213
|
}
|
|
212
214
|
},
|
|
215
|
+
// set properties for inner CmdPagination
|
|
213
216
|
cmdPaginationProperties() {
|
|
214
217
|
return {
|
|
215
218
|
pages: null,
|
|
@@ -233,9 +236,11 @@ export default {
|
|
|
233
236
|
</script>
|
|
234
237
|
|
|
235
238
|
<style>
|
|
239
|
+
/* begin cmd-multistepform-wrapper ------------------------------------------------------------------------------------------ */
|
|
236
240
|
.cmd-multistepform-wrapper {
|
|
237
241
|
display: flex;
|
|
238
242
|
flex-direction: column;
|
|
239
243
|
gap: var(--default-gap);
|
|
240
244
|
}
|
|
245
|
+
/* end cmd-multistepform-wrapper ------------------------------------------------------------------------------------------ */
|
|
241
246
|
</style>
|