comand-component-library 3.1.69 → 3.1.72
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.css +1 -1
- package/dist/comand-component-library.umd.min.js +1 -1
- package/package.json +2 -2
- package/src/App.vue +468 -288
- package/src/assets/data/list-of-links.json +0 -1
- package/src/assets/fonts/iconfonts/logos-iconfont/icomoon.woff +0 -0
- package/src/assets/fonts/iconfonts/logos-iconfont/selection.json +1 -0
- package/src/assets/styles/global-styles.scss +26 -0
- package/src/assets/styles/logos-iconfont.css +47 -32
- package/src/components/CmdBox.vue +19 -7
- package/src/components/CmdCompanyLogo.vue +3 -3
- package/src/components/CmdCookieDisclaimer.vue +20 -4
- package/src/components/CmdFakeSelect.vue +31 -26
- package/src/components/CmdFormElement.vue +147 -129
- package/src/components/CmdInputGroup.vue +134 -3
- package/src/components/CmdMultistepFormProgressBar.vue +1 -1
- package/src/components/CmdProgressBar.vue +2 -2
- package/src/components/CmdTable.vue +1 -1
- package/src/components/CmdTabs.vue +0 -4
- package/src/components/CmdToggleDarkMode.vue +30 -10
- package/src/components/CmdTooltip.vue +1 -1
- package/src/components/CmdUploadForm.vue +1 -1
- package/src/index.js +1 -1
- package/src/mixins/CmdFormElement/DefaultMessageProperties.js +1 -1
- package/src/mixins/FieldValidation.js +1 -1
- package/src/mixins/GlobalDefaultMessageProperties.js +1 -2
- package/src/mixins/I18n.js +12 -2
- package/src/utils/{GetFileExtension.js → getFileExtension.js} +0 -0
- package/src/assets/fonts/iconfonts/logos-iconfont/logos-iconfont.json +0 -1
package/src/App.vue
CHANGED
|
@@ -10,10 +10,11 @@
|
|
|
10
10
|
/>
|
|
11
11
|
</template>
|
|
12
12
|
<template v-slot:logo>
|
|
13
|
-
<CmdCompanyLogo
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
13
|
+
<CmdCompanyLogo
|
|
14
|
+
:link="companyLogoData.link"
|
|
15
|
+
altText="CoManD Logo"
|
|
16
|
+
:pathDefaultLogo="require('@/assets/images/logo.svg')"
|
|
17
|
+
:pathDarkmodeLogo="require('@/assets/images/logo-darkmode.svg')"
|
|
17
18
|
/>
|
|
18
19
|
</template>
|
|
19
20
|
</CmdSiteHeader>
|
|
@@ -61,35 +62,36 @@
|
|
|
61
62
|
<h3>Form elements status:</h3>
|
|
62
63
|
<div class="flex-container">
|
|
63
64
|
<ul class="list-status">
|
|
64
|
-
<li><a href="#" @click.prevent="
|
|
65
|
+
<li><a href="#" @click.prevent="setStatus('', false)" :class="{'active' : validationStatus === '' && disabledStatus === false}"
|
|
65
66
|
id="status-default">Default</a></li>
|
|
66
|
-
<li class="error"><a href="#" @click.prevent="
|
|
67
|
-
|
|
68
|
-
<li><a href="#" @click.prevent="
|
|
69
|
-
:class="{'active' :
|
|
70
|
-
<li><a href="#" @click.prevent="
|
|
71
|
-
:class="{'active' :
|
|
72
|
-
<li><a href="#" @click.prevent="
|
|
73
|
-
:class="{'active' :
|
|
74
|
-
<li><a href="#" @click.prevent="
|
|
75
|
-
:class="{'active' :
|
|
67
|
+
<li class="error"><a href="#" @click.prevent="setStatus('error', false)"
|
|
68
|
+
:class="{'active' : validationStatus === 'error'}" id="status-error">Error</a></li>
|
|
69
|
+
<li><a href="#" @click.prevent="setStatus('warning', false)"
|
|
70
|
+
:class="{'active' : validationStatus === 'warning'}" id="status-warning">Warning</a></li>
|
|
71
|
+
<li><a href="#" @click.prevent="setStatus('success', false)"
|
|
72
|
+
:class="{'active' : validationStatus === 'success'}" id="status-success">Success</a></li>
|
|
73
|
+
<li><a href="#" @click.prevent="setStatus('info', false)"
|
|
74
|
+
:class="{'active' : validationStatus === 'info'}" id="status-info">Info</a></li>
|
|
75
|
+
<li><a href="#" @click.prevent="setStatus('', true)"
|
|
76
|
+
:class="{'active' : disabledStatus === true}" id="status-disabled">Disabled</a></li>
|
|
76
77
|
</ul>
|
|
77
78
|
</div>
|
|
78
79
|
|
|
79
80
|
<!-- begin cmd-form-filters -->
|
|
80
|
-
<CmdFormFilters v-model="fakeSelectFilters" :selectedOptionsName="getOptionName"
|
|
81
|
+
<CmdFormFilters v-model="fakeSelectFilters" :selectedOptionsName="getOptionName"/>
|
|
81
82
|
<!-- end cmd-form-filters -->
|
|
82
83
|
|
|
83
84
|
<CmdForm :use-fieldset="false" id="advanced-form-elements" novalidate="novalidate">
|
|
84
85
|
<fieldset class="grid-container-create-columns">
|
|
85
86
|
<legend>Legend</legend>
|
|
86
87
|
<h2>Form Element-Component</h2>
|
|
87
|
-
<CmdToggleDarkMode :showLabel="true"
|
|
88
|
+
<CmdToggleDarkMode :showLabel="true"/>
|
|
88
89
|
<div class="flex-container">
|
|
89
90
|
<CmdFormElement labelText="Input (type text):"
|
|
90
91
|
element="input"
|
|
91
92
|
type="text"
|
|
92
|
-
:status="
|
|
93
|
+
:status="validationStatus"
|
|
94
|
+
:disabled="disabledStatus"
|
|
93
95
|
placeholder="Type in text"
|
|
94
96
|
tooltipText="This is a tooltip"
|
|
95
97
|
v-bind="{useCustomTooltip: false}"
|
|
@@ -97,14 +99,16 @@
|
|
|
97
99
|
<CmdFormElement labelText="Input for selectbox:"
|
|
98
100
|
element="select"
|
|
99
101
|
required="required"
|
|
100
|
-
:status="
|
|
102
|
+
:status="validationStatus"
|
|
103
|
+
:disabled="disabledStatus"
|
|
101
104
|
v-model="selectedOption"
|
|
102
105
|
:selectOptions="selectOptionsData"
|
|
103
106
|
/>
|
|
104
107
|
<CmdFormElement labelText="Input for datalist:"
|
|
105
108
|
element="input"
|
|
106
109
|
type="text"
|
|
107
|
-
:status="
|
|
110
|
+
:status="validationStatus"
|
|
111
|
+
:disabled="disabledStatus"
|
|
108
112
|
placeholder="Type in option"
|
|
109
113
|
:datalist="datalist"
|
|
110
114
|
tooltipText="This is a tooltip"
|
|
@@ -113,7 +117,8 @@
|
|
|
113
117
|
<CmdFormElement labelText="Input (type search (without search-button)):"
|
|
114
118
|
element="input"
|
|
115
119
|
type="search"
|
|
116
|
-
:status="
|
|
120
|
+
:status="validationStatus"
|
|
121
|
+
:disabled="disabledStatus"
|
|
117
122
|
:showSearchButton="false"
|
|
118
123
|
placeholder="Search"
|
|
119
124
|
tooltipText="This is a tooltip"
|
|
@@ -122,30 +127,156 @@
|
|
|
122
127
|
<CmdFormElement labelText="Input (type search (with search-button)):"
|
|
123
128
|
element="input"
|
|
124
129
|
type="search"
|
|
125
|
-
:status="
|
|
130
|
+
:status="validationStatus"
|
|
131
|
+
:disabled="disabledStatus"
|
|
126
132
|
placeholder="Search"
|
|
127
133
|
tooltipText="This is a tooltip"
|
|
128
134
|
v-bind="{useCustomTooltip: false}"
|
|
129
135
|
/>
|
|
136
|
+
<h2>Inputfields in Columns</h2>
|
|
137
|
+
<div class="flex-container">
|
|
138
|
+
<CmdFormElement element="input"
|
|
139
|
+
labelText="Label for inputfield (with tooltip):"
|
|
140
|
+
type="text"
|
|
141
|
+
minlength="5"
|
|
142
|
+
id="inputfield1"
|
|
143
|
+
placeholder="This is placeholder text"
|
|
144
|
+
v-model="inputField1"
|
|
145
|
+
tooltipText="This is a tooltip!"
|
|
146
|
+
:status="validationStatus"
|
|
147
|
+
:disabled="disabledStatus"
|
|
148
|
+
/>
|
|
149
|
+
<CmdFormElement element="input"
|
|
150
|
+
labelText="Label for inputfield (required):"
|
|
151
|
+
type="text"
|
|
152
|
+
required="required"
|
|
153
|
+
minlength="5"
|
|
154
|
+
id="inputfield-required"
|
|
155
|
+
placeholder="This is placeholder text"
|
|
156
|
+
v-model="inputFieldRequired"
|
|
157
|
+
tooltipText="This is a tooltip!"
|
|
158
|
+
:status="validationStatus"
|
|
159
|
+
:disabled="disabledStatus"
|
|
160
|
+
/>
|
|
161
|
+
<CmdFormElement element="input"
|
|
162
|
+
labelText="Label for inputfield (with pattern):"
|
|
163
|
+
type="text"
|
|
164
|
+
id="inputfield-pattern"
|
|
165
|
+
placeholder="This is placeholder text"
|
|
166
|
+
pattern="/\d/"
|
|
167
|
+
v-model="inputFieldPattern"
|
|
168
|
+
tooltipText="This is a tooltip!"
|
|
169
|
+
:status="validationStatus"
|
|
170
|
+
:disabled="disabledStatus"
|
|
171
|
+
/>
|
|
172
|
+
</div>
|
|
173
|
+
<!-- begin inputfield in two columns -->
|
|
174
|
+
<div class="flex-container">
|
|
175
|
+
<CmdFormElement labelText="Label for inputfield (with icon):"
|
|
176
|
+
element="input"
|
|
177
|
+
type="text"
|
|
178
|
+
id="inputfield-username"
|
|
179
|
+
fieldIconClass="icon-user-profile"
|
|
180
|
+
placeholder="Type in username"
|
|
181
|
+
tooltipText="This is a tooltip!"
|
|
182
|
+
maxlength="100"
|
|
183
|
+
v-model="inputUsername"
|
|
184
|
+
:status="validationStatus"
|
|
185
|
+
:disabled="disabledStatus"
|
|
186
|
+
/>
|
|
187
|
+
<CmdFormElement element="input"
|
|
188
|
+
labelText="Label for passwordfield:"
|
|
189
|
+
type="password"
|
|
190
|
+
minlength="8"
|
|
191
|
+
maxlength="255"
|
|
192
|
+
id="inputfield-password"
|
|
193
|
+
fieldIconClass="icon-security-settings"
|
|
194
|
+
placeholder="Type in password"
|
|
195
|
+
tooltipText="This is a tooltip!"
|
|
196
|
+
:customRequirements="customRequirements"
|
|
197
|
+
v-model="inputPassword"
|
|
198
|
+
:status="validationStatus"
|
|
199
|
+
:disabled="disabledStatus"
|
|
200
|
+
/>
|
|
201
|
+
</div>
|
|
202
|
+
<!-- end inputfield in two columns -->
|
|
203
|
+
|
|
204
|
+
<CmdFormElement element="input"
|
|
205
|
+
labelText="Label (inline) for inputfield (number):"
|
|
206
|
+
:displayLabelInline="true"
|
|
207
|
+
type="number"
|
|
208
|
+
id="inputfield-number"
|
|
209
|
+
required="required"
|
|
210
|
+
min="0"
|
|
211
|
+
max="9"
|
|
212
|
+
v-model="inputNumber"
|
|
213
|
+
:customRequirements="[customRequirements[2]]"
|
|
214
|
+
:status="validationStatus"
|
|
215
|
+
:disabled="disabledStatus"
|
|
216
|
+
/>
|
|
217
|
+
<CmdFormElement element="input"
|
|
218
|
+
labelText="Label (inline) for inputfield (date):"
|
|
219
|
+
:displayLabelInline="true"
|
|
220
|
+
type="date"
|
|
221
|
+
id="inputfield-date"
|
|
222
|
+
v-model="inputDate"
|
|
223
|
+
:status="validationStatus"
|
|
224
|
+
:disabled="disabledStatus"
|
|
225
|
+
/>
|
|
226
|
+
<CmdFormElement element="input"
|
|
227
|
+
labelText="Label (inline) for inputfield (search) without search-button:"
|
|
228
|
+
:displayLabelInline="true"
|
|
229
|
+
type="search"
|
|
230
|
+
id="inputfield-search-without-searchbutton"
|
|
231
|
+
placeholder="Keyword(s)"
|
|
232
|
+
v-model="inputSearch"
|
|
233
|
+
:showSearchButton="false"
|
|
234
|
+
:status="validationStatus"
|
|
235
|
+
:disabled="disabledStatus"
|
|
236
|
+
/>
|
|
237
|
+
<CmdFormElement element="input"
|
|
238
|
+
labelText="Label (inline) for inputfield (search):"
|
|
239
|
+
:displayLabelInline="true"
|
|
240
|
+
type="search"
|
|
241
|
+
id="inputfield-search-with-searchbutton"
|
|
242
|
+
placeholder="Keyword(s)"
|
|
243
|
+
v-model="inputSearch"
|
|
244
|
+
:status="validationStatus"
|
|
245
|
+
:disabled="disabledStatus"
|
|
246
|
+
/>
|
|
247
|
+
<CmdFormElement element="textarea"
|
|
248
|
+
labelText="Label for textarea:"
|
|
249
|
+
id="textarea"
|
|
250
|
+
minlength="1"
|
|
251
|
+
maxlength="100"
|
|
252
|
+
placeholder="Type in your message"
|
|
253
|
+
v-model="textarea"
|
|
254
|
+
:status="validationStatus"
|
|
255
|
+
:disabled="disabledStatus"
|
|
256
|
+
/>
|
|
257
|
+
<hr/>
|
|
130
258
|
<h2>Fake Selects</h2>
|
|
131
259
|
<div class="flex-container">
|
|
132
260
|
<!-- type === default: normal selectbox (with optional icons) -->
|
|
133
261
|
<CmdFakeSelect labelText="Default selectbox:"
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
262
|
+
:status="validationStatus"
|
|
263
|
+
:disabled="disabledStatus"
|
|
264
|
+
:selectData="fakeSelectOptionsData"
|
|
265
|
+
v-model="fakeSelectDefault"
|
|
266
|
+
required
|
|
267
|
+
defaultOptionName="Select an option:"
|
|
139
268
|
/>
|
|
140
269
|
<CmdFakeSelect labelText="Default selectbox with icons:"
|
|
141
|
-
:status="
|
|
270
|
+
:status="validationStatus"
|
|
271
|
+
:disabled="disabledStatus"
|
|
142
272
|
:selectData="fakeSelectOptionsWithIconsData"
|
|
143
273
|
v-model="fakeSelectDefaultWithIcons"
|
|
144
274
|
defaultOptionName="Select an option:"
|
|
145
275
|
/>
|
|
146
276
|
<!-- type === checkboxOptions: selectbox with checkboxes for each option -->
|
|
147
277
|
<CmdFakeSelect labelText="Selectbox with checkboxes:"
|
|
148
|
-
:status="
|
|
278
|
+
:status="validationStatus"
|
|
279
|
+
:disabled="disabledStatus"
|
|
149
280
|
:selectData="fakeSelectOptionsData"
|
|
150
281
|
v-model="fakeSelectCheckbox"
|
|
151
282
|
defaultOptionName="Options:"
|
|
@@ -155,7 +286,8 @@
|
|
|
155
286
|
:useCustomTooltip="true"
|
|
156
287
|
/>
|
|
157
288
|
<CmdFakeSelect labelText="Selectbox with filters:"
|
|
158
|
-
:status="
|
|
289
|
+
:status="validationStatus"
|
|
290
|
+
:disabled="disabledStatus"
|
|
159
291
|
:selectData="fakeSelectFilterOptionsData"
|
|
160
292
|
v-model="fakeSelectFilters"
|
|
161
293
|
defaultOptionName="Filters:"
|
|
@@ -164,7 +296,8 @@
|
|
|
164
296
|
:useCustomTooltip="true"
|
|
165
297
|
/>
|
|
166
298
|
<CmdFakeSelect labelText="Selectbox with slot-content:"
|
|
167
|
-
:status="
|
|
299
|
+
:status="validationStatus"
|
|
300
|
+
:disabled="disabledStatus"
|
|
168
301
|
type="content"
|
|
169
302
|
defaultOptionName="HTML-Content:">
|
|
170
303
|
<ul class="custom-fake-select-content">
|
|
@@ -178,14 +311,16 @@
|
|
|
178
311
|
</ul>
|
|
179
312
|
</CmdFakeSelect>
|
|
180
313
|
<CmdFakeSelect labelText="Selectbox with country flags:"
|
|
181
|
-
:status="
|
|
314
|
+
:status="validationStatus"
|
|
315
|
+
:disabled="disabledStatus"
|
|
182
316
|
:selectData="fakeSelectCountriesData"
|
|
183
317
|
v-model="selectedCountry"
|
|
184
318
|
defaultOptionName="Select country:"
|
|
185
319
|
type="country"
|
|
186
320
|
/>
|
|
187
321
|
<CmdFakeSelect labelText="Selectbox with colors:"
|
|
188
|
-
:status="
|
|
322
|
+
:status="validationStatus"
|
|
323
|
+
:disabled="disabledStatus"
|
|
189
324
|
:selectData="fakeSelectColorsData"
|
|
190
325
|
v-model="selectedColor"
|
|
191
326
|
required="required"
|
|
@@ -193,6 +328,8 @@
|
|
|
193
328
|
/>
|
|
194
329
|
</div>
|
|
195
330
|
|
|
331
|
+
<hr/>
|
|
332
|
+
|
|
196
333
|
<!-- begin progress bar -->
|
|
197
334
|
<h2>Progress Bar [native]</h2>
|
|
198
335
|
<CmdProgressBar labelText="Progress Bar (with optional output):" id="progress-bar2" max="100"/>
|
|
@@ -200,279 +337,186 @@
|
|
|
200
337
|
|
|
201
338
|
<!-- begin slider -->
|
|
202
339
|
<h2>Slider [native]</h2>
|
|
203
|
-
<
|
|
204
|
-
<span>Single-Slider (with in- and output):</span>
|
|
340
|
+
<div class="label" :class="validationStatus">
|
|
341
|
+
<span class="label-text">Single-Slider (with in- and output):</span>
|
|
205
342
|
<span class="flex-container no-flex">
|
|
206
|
-
<
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
343
|
+
<label for="range-value">
|
|
344
|
+
<span class="label-text">
|
|
345
|
+
<span>Range Value</span>
|
|
346
|
+
</span>
|
|
347
|
+
<input
|
|
348
|
+
type="number"
|
|
349
|
+
:class="validationStatus"
|
|
350
|
+
v-model="rangeValue"
|
|
351
|
+
:disabled="disabledStatus"
|
|
352
|
+
min="0"
|
|
353
|
+
max="100"
|
|
354
|
+
id="range-value"
|
|
355
|
+
/>
|
|
356
|
+
</label>
|
|
357
|
+
<label for="range-slider" class="hidden">
|
|
358
|
+
<span class="label-text">
|
|
359
|
+
<span>Range Value</span>
|
|
360
|
+
</span>
|
|
361
|
+
<input
|
|
362
|
+
type="range"
|
|
363
|
+
class="range-slider"
|
|
364
|
+
id="range-slider"
|
|
365
|
+
v-model="rangeValue"
|
|
366
|
+
:disabled="disabledStatus"
|
|
367
|
+
min="0"
|
|
368
|
+
max="100"
|
|
369
|
+
/>
|
|
370
|
+
</label>
|
|
224
371
|
</span>
|
|
225
|
-
</
|
|
372
|
+
</div>
|
|
226
373
|
<!-- end slider -->
|
|
227
374
|
|
|
228
375
|
<hr/>
|
|
229
376
|
|
|
230
|
-
<h2>Group of checkboxes with CmdInputGroup</h2>
|
|
231
|
-
<CmdInputGroup label-text="Group-label:" :label-inline="true">
|
|
232
|
-
<CmdFormElement
|
|
233
|
-
element="input"
|
|
234
|
-
type="checkbox"
|
|
235
|
-
id="input-group-checkbox"
|
|
236
|
-
labelText="Checkbox-label #1"
|
|
237
|
-
/>
|
|
238
|
-
<CmdFormElement
|
|
239
|
-
element="input"
|
|
240
|
-
type="checkbox"
|
|
241
|
-
id="input-group-checkbox"
|
|
242
|
-
labelText="Checkbox-label #2"
|
|
243
|
-
/>
|
|
244
|
-
<CmdFormElement
|
|
245
|
-
element="input"
|
|
246
|
-
type="checkbox"
|
|
247
|
-
id="input-group-checkbox"
|
|
248
|
-
labelText="Checkbox-label #3"
|
|
249
|
-
/>
|
|
250
|
-
</CmdInputGroup>
|
|
251
|
-
|
|
252
377
|
<!-- begin toggle-switch-radio with switch-label (colored) -->
|
|
253
|
-
<h2>Toggle
|
|
378
|
+
<h2>Toggle-Switches</h2>
|
|
254
379
|
<CmdFormElement element="input"
|
|
255
380
|
type="checkbox"
|
|
256
381
|
id="toggle-switch-checkbox"
|
|
257
|
-
v-model="
|
|
258
|
-
labelText="Labeltext for Switch
|
|
382
|
+
v-model="switchButtonCheckboxToggleSwitch"
|
|
383
|
+
labelText="Labeltext for Toggle-Switch without Switch-Label"
|
|
259
384
|
:toggleSwitch="true"
|
|
260
|
-
:status="
|
|
385
|
+
:status="validationStatus"
|
|
386
|
+
:disabled="disabledStatus"
|
|
261
387
|
/>
|
|
262
388
|
<CmdFormElement element="input"
|
|
263
389
|
type="checkbox"
|
|
264
390
|
id="toggle-switch-checkbox"
|
|
265
391
|
v-model="switchButtonCheckbox"
|
|
266
|
-
labelText="Labeltext for Switch
|
|
392
|
+
labelText="Labeltext for Toggle-Switch with Switch-Label"
|
|
393
|
+
inputValue="checkbox1"
|
|
267
394
|
onLabel="Label on"
|
|
268
395
|
offLabel="Label off"
|
|
269
396
|
:toggleSwitch="true"
|
|
270
|
-
:status="
|
|
397
|
+
:status="validationStatus"
|
|
398
|
+
:disabled="disabledStatus"
|
|
271
399
|
/>
|
|
272
400
|
<CmdFormElement element="input"
|
|
273
401
|
type="checkbox"
|
|
274
402
|
id="toggle-switch-checkbox-colored"
|
|
275
403
|
v-model="switchButtonCheckbox"
|
|
276
|
-
|
|
404
|
+
inputValue="checkbox2"
|
|
405
|
+
labelText="Labeltext for Toggle-Switch (Checkbox, colored)"
|
|
277
406
|
onLabel="Label on"
|
|
278
407
|
offLabel="Label off"
|
|
279
408
|
:colored="true"
|
|
280
409
|
:toggleSwitch="true"
|
|
281
|
-
:status="
|
|
410
|
+
:status="validationStatus"
|
|
411
|
+
:disabled="disabledStatus"
|
|
282
412
|
/>
|
|
283
413
|
<CmdFormElement element="input"
|
|
284
414
|
type="radio"
|
|
285
415
|
name="radiogroup"
|
|
286
416
|
id="toggle-switch-radio1"
|
|
287
|
-
v-model="
|
|
417
|
+
v-model="switchButtonRadio"
|
|
288
418
|
onLabel="Label on"
|
|
289
419
|
offLabel="Label off"
|
|
290
420
|
:colored="true"
|
|
291
421
|
:toggleSwitch="true"
|
|
292
|
-
:status="
|
|
422
|
+
:status="validationStatus"
|
|
423
|
+
:disabled="disabledStatus"
|
|
293
424
|
inputValue="radio1"
|
|
294
|
-
labelText="Labeltext for Switch
|
|
425
|
+
labelText="Labeltext for Toggle-Switch (Radio, colored) #1"
|
|
295
426
|
/>
|
|
296
427
|
<CmdFormElement element="input"
|
|
297
428
|
type="radio"
|
|
298
429
|
name="radiogroup"
|
|
299
430
|
id="toggle-switch-radio2"
|
|
300
|
-
v-model="
|
|
431
|
+
v-model="switchButtonRadio"
|
|
301
432
|
onLabel="Label on"
|
|
302
433
|
offLabel="Label off"
|
|
303
434
|
:colored="true"
|
|
304
435
|
:toggleSwitch="true"
|
|
305
|
-
:status="
|
|
436
|
+
:status="validationStatus"
|
|
437
|
+
:disabled="disabledStatus"
|
|
306
438
|
inputValue="radio2"
|
|
307
|
-
labelText="Labeltext for Switch
|
|
439
|
+
labelText="Labeltext for Toggle-Switch (Radio, colored) #2"
|
|
308
440
|
/>
|
|
309
441
|
<!-- end toggle-switch-radio with switch-label (colored) -->
|
|
310
442
|
|
|
311
|
-
|
|
312
|
-
<div class="flex-container">
|
|
313
|
-
<CmdFormElement element="input"
|
|
314
|
-
labelText="Label for inputfield (with tooltip):"
|
|
315
|
-
type="text"
|
|
316
|
-
minlength="5"
|
|
317
|
-
id="inputfield1"
|
|
318
|
-
placeholder="This is placeholder text"
|
|
319
|
-
v-model="inputField1"
|
|
320
|
-
tooltipText="This is a tooltip!"
|
|
321
|
-
:status="formElementStatus"
|
|
322
|
-
/>
|
|
323
|
-
<CmdFormElement element="input"
|
|
324
|
-
labelText="Label for inputfield (required):"
|
|
325
|
-
type="text"
|
|
326
|
-
required="required"
|
|
327
|
-
minlength="5"
|
|
328
|
-
id="inputfield-required"
|
|
329
|
-
placeholder="This is placeholder text"
|
|
330
|
-
v-model="inputFieldRequired"
|
|
331
|
-
tooltipText="This is a tooltip!"
|
|
332
|
-
:status="formElementStatus"
|
|
333
|
-
/>
|
|
334
|
-
<CmdFormElement element="input"
|
|
335
|
-
labelText="Label for inputfield (with pattern):"
|
|
336
|
-
type="text"
|
|
337
|
-
id="inputfield-pattern"
|
|
338
|
-
placeholder="This is placeholder text"
|
|
339
|
-
pattern="/\d/"
|
|
340
|
-
v-model="inputFieldPattern"
|
|
341
|
-
tooltipText="This is a tooltip!"
|
|
342
|
-
:status="formElementStatus"
|
|
343
|
-
/>
|
|
344
|
-
</div>
|
|
345
|
-
<!-- begin inputfield in two columns -->
|
|
346
|
-
<div class="flex-container">
|
|
347
|
-
<CmdFormElement labelText="Label for inputfield (with icon):"
|
|
348
|
-
element="input"
|
|
349
|
-
type="text"
|
|
350
|
-
id="inputfield-username"
|
|
351
|
-
fieldIconClass="icon-user-profile"
|
|
352
|
-
placeholder="Type in username"
|
|
353
|
-
tooltipText="This is a tooltip!"
|
|
354
|
-
maxlength="100"
|
|
355
|
-
v-model="inputUsername"
|
|
356
|
-
:status="formElementStatus"
|
|
357
|
-
/>
|
|
358
|
-
<CmdFormElement element="input"
|
|
359
|
-
labelText="Label for passwordfield:"
|
|
360
|
-
type="password"
|
|
361
|
-
minlength="8"
|
|
362
|
-
maxlength="255"
|
|
363
|
-
id="inputfield-password"
|
|
364
|
-
fieldIconClass="icon-security-settings"
|
|
365
|
-
placeholder="Type in password"
|
|
366
|
-
tooltipText="This is a tooltip!"
|
|
367
|
-
:customRequirements="customRequirements"
|
|
368
|
-
v-model="inputPassword"
|
|
369
|
-
:status="formElementStatus"/>
|
|
370
|
-
</div>
|
|
371
|
-
<!-- end inputfield in two columns -->
|
|
372
|
-
|
|
443
|
+
<!-- begin checkboxes and radiobuttons -->
|
|
373
444
|
<CmdFormElement element="input"
|
|
374
|
-
labelText="Label (
|
|
375
|
-
|
|
376
|
-
type="number"
|
|
377
|
-
id="inputfield-number"
|
|
445
|
+
labelText="Label for (required) checkbox with boolean"
|
|
446
|
+
type="checkbox"
|
|
378
447
|
required="required"
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
:
|
|
383
|
-
|
|
384
|
-
<
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
<CmdFormElement element="input"
|
|
392
|
-
labelText="Label (inline) for inputfield (search) without search-button:"
|
|
393
|
-
:displayLabelInline="true"
|
|
394
|
-
type="search"
|
|
395
|
-
id="inputfield-search-without-searchbutton"
|
|
396
|
-
placeholder="Keyword(s)"
|
|
397
|
-
v-model="inputSearch"
|
|
398
|
-
:showSearchButton="false"
|
|
399
|
-
:status="formElementStatus"/>
|
|
400
|
-
<CmdFormElement element="input"
|
|
401
|
-
labelText="Label (inline) for inputfield (search):"
|
|
402
|
-
:displayLabelInline="true"
|
|
403
|
-
type="search"
|
|
404
|
-
id="inputfield-search-with-searchbutton"
|
|
405
|
-
placeholder="Keyword(s)"
|
|
406
|
-
v-model="inputSearch"
|
|
407
|
-
:status="formElementStatus"/>
|
|
408
|
-
<CmdFormElement element="textarea"
|
|
409
|
-
labelText="Label for textarea:"
|
|
410
|
-
id="textarea"
|
|
411
|
-
minlength="1"
|
|
412
|
-
maxlength="100"
|
|
413
|
-
placeholder="Type in your message"
|
|
414
|
-
v-model="textarea"
|
|
415
|
-
:status="formElementStatus"/>
|
|
448
|
+
id="checkbox-required-with-boolean"
|
|
449
|
+
v-model="checkboxRequiredValue"
|
|
450
|
+
:status="validationStatus"
|
|
451
|
+
:disabled="disabledStatus"
|
|
452
|
+
/>
|
|
453
|
+
<p>
|
|
454
|
+
checkbox (required) with boolean: {{ checkboxRequiredValue }}<br/>
|
|
455
|
+
checkbox with boolean: {{ checkboxValue }}<br/>
|
|
456
|
+
checkboxes with values: {{ checkboxValues }}
|
|
457
|
+
</p>
|
|
458
|
+
<h2>Checkboxes and Radibuttons</h2>
|
|
459
|
+
<h3>Checkboxes [native]</h3>
|
|
416
460
|
<div class="label inline">
|
|
417
|
-
<span>Label for native checkboxes:</span>
|
|
461
|
+
<span class="label-text">Label for native checkboxes:</span>
|
|
418
462
|
<div class="flex-container no-flex">
|
|
419
463
|
<CmdFormElement element="input"
|
|
420
464
|
labelText="Label for checkbox with boolean"
|
|
421
465
|
type="checkbox"
|
|
422
466
|
id="checkbox-with-boolean"
|
|
423
467
|
v-model="checkboxValue"
|
|
424
|
-
:status="
|
|
468
|
+
:status="validationStatus"
|
|
469
|
+
:disabled="disabledStatus"
|
|
470
|
+
/>
|
|
425
471
|
<CmdFormElement element="input"
|
|
426
472
|
labelText="Label for checkbox with value"
|
|
427
473
|
v-model="checkboxValues"
|
|
428
474
|
inputValue="checkboxValue1"
|
|
429
475
|
type="checkbox"
|
|
430
476
|
id="checkbox-with-value-1"
|
|
431
|
-
:status="
|
|
477
|
+
:status="validationStatus"
|
|
478
|
+
:disabled="disabledStatus"
|
|
479
|
+
/>
|
|
432
480
|
<CmdFormElement element="input"
|
|
433
481
|
labelText="Label for checkbox with value"
|
|
434
482
|
v-model="checkboxValues"
|
|
435
483
|
inputValue="checkboxValue2"
|
|
436
484
|
type="checkbox"
|
|
437
485
|
id="checkbox-with-value-2"
|
|
438
|
-
:status="
|
|
486
|
+
:status="validationStatus"
|
|
487
|
+
:disabled="disabledStatus"
|
|
488
|
+
/>
|
|
439
489
|
</div>
|
|
440
490
|
</div>
|
|
441
|
-
<
|
|
442
|
-
labelText="Label for (required) checkbox with boolean"
|
|
443
|
-
type="checkbox"
|
|
444
|
-
required="required"
|
|
445
|
-
id="checkbox-required-with-boolean"
|
|
446
|
-
v-model="checkboxRequiredValue"
|
|
447
|
-
:status="formElementStatus"/>
|
|
448
|
-
<p>
|
|
449
|
-
checkbox (required) with boolean: {{checkboxRequiredValue}}<br />
|
|
450
|
-
checkbox with boolean: {{checkboxValue}}<br />
|
|
451
|
-
checkboxes with values: {{checkboxValues}}
|
|
452
|
-
</p>
|
|
491
|
+
<h3>Checkboxes (replaced)</h3>
|
|
453
492
|
<div class="label inline">
|
|
454
|
-
<span>Label for Replaced Input-Type-Checkbox:</span>
|
|
493
|
+
<span class="label-text">Label for Replaced Input-Type-Checkbox:</span>
|
|
455
494
|
<div class="flex-container no-flex">
|
|
456
495
|
<CmdFormElement element="input"
|
|
457
496
|
labelText="Label for replaced checkbox"
|
|
458
497
|
type="checkbox"
|
|
459
|
-
|
|
498
|
+
:replaceInputType="true"
|
|
460
499
|
id="inputfield9"
|
|
461
500
|
v-model="replacedCheckboxValue"
|
|
462
501
|
inputValue="checkboxValue1"
|
|
463
|
-
:status="
|
|
502
|
+
:status="validationStatus"
|
|
503
|
+
:disabled="disabledStatus"
|
|
504
|
+
/>
|
|
464
505
|
<CmdFormElement element="input"
|
|
465
506
|
labelText="Label for replaced checkbox"
|
|
466
507
|
v-model="replacedCheckboxValue"
|
|
467
508
|
inputValue="checkboxValue2"
|
|
468
509
|
type="checkbox"
|
|
469
|
-
|
|
510
|
+
:replaceInputType="true"
|
|
470
511
|
id="inputfield10"
|
|
471
|
-
:status="
|
|
512
|
+
:status="validationStatus"
|
|
513
|
+
:disabled="disabledStatus"
|
|
514
|
+
/>
|
|
472
515
|
</div>
|
|
473
516
|
</div>
|
|
517
|
+
<h3>Radiobuttons [native]</h3>
|
|
474
518
|
<div class="label inline">
|
|
475
|
-
<span>Label for native radiobuttons:</span>
|
|
519
|
+
<span class="label-text">Label for native radiobuttons:</span>
|
|
476
520
|
<div class="flex-container no-flex">
|
|
477
521
|
<CmdFormElement element="input"
|
|
478
522
|
labelText="Label for native radiobutton"
|
|
@@ -481,7 +525,9 @@
|
|
|
481
525
|
name="radiogroup"
|
|
482
526
|
inputValue="radiobuttonValue1"
|
|
483
527
|
v-model="radiobuttonValue"
|
|
484
|
-
:status="
|
|
528
|
+
:status="validationStatus"
|
|
529
|
+
:disabled="disabledStatus"
|
|
530
|
+
/>
|
|
485
531
|
<CmdFormElement element="input"
|
|
486
532
|
labelText="Label for native radiobutton"
|
|
487
533
|
type="radio"
|
|
@@ -489,75 +535,153 @@
|
|
|
489
535
|
name="radiogroup"
|
|
490
536
|
inputValue="radiobuttonValue2"
|
|
491
537
|
v-model="radiobuttonValue"
|
|
492
|
-
:status="
|
|
538
|
+
:status="validationStatus"
|
|
539
|
+
:disabled="disabledStatus"
|
|
540
|
+
/>
|
|
493
541
|
</div>
|
|
494
542
|
</div>
|
|
495
543
|
<p>
|
|
496
|
-
Radiobuttons with values: {{radiobuttonValue}}
|
|
544
|
+
Radiobuttons with values: {{ radiobuttonValue }}
|
|
497
545
|
</p>
|
|
546
|
+
<h3>Radiobuttons (replaced)</h3>
|
|
498
547
|
<div class="label inline">
|
|
499
|
-
<span>Label for Replaced Input-Type-Radio:</span>
|
|
548
|
+
<span class="label-text">Label for Replaced Input-Type-Radio:</span>
|
|
500
549
|
<div class="flex-container no-flex">
|
|
501
550
|
<CmdFormElement element="input"
|
|
502
551
|
labelText="Label for replaced radiobutton"
|
|
503
552
|
type="radio"
|
|
504
|
-
|
|
553
|
+
:replaceInputType="true"
|
|
505
554
|
id="inputfield13"
|
|
506
555
|
name="replaced-radiogroup"
|
|
507
556
|
inputValue="radiobuttonValue1"
|
|
508
557
|
v-model="replacedRadiobuttonValue"
|
|
509
|
-
:status="
|
|
558
|
+
:status="validationStatus"
|
|
559
|
+
:disabled="disabledStatus"
|
|
560
|
+
/>
|
|
510
561
|
<CmdFormElement element="input"
|
|
511
562
|
labelText="Label for replaced radiobutton"
|
|
512
563
|
type="radio"
|
|
513
|
-
|
|
564
|
+
:replaceInputType="true"
|
|
514
565
|
id="inputfield14"
|
|
515
566
|
name="replaced-radiogroup"
|
|
516
567
|
inputValue="radiobuttonValue2"
|
|
517
568
|
v-model="replacedRadiobuttonValue"
|
|
518
|
-
:status="
|
|
569
|
+
:status="validationStatus"
|
|
570
|
+
:disabled="disabledStatus"
|
|
571
|
+
/>
|
|
519
572
|
</div>
|
|
520
573
|
</div>
|
|
521
|
-
|
|
574
|
+
<!-- end checkboxes and radiobuttons -->
|
|
575
|
+
|
|
576
|
+
<!-- begin input-groups -->
|
|
577
|
+
<h2>Input-Groups</h2>
|
|
578
|
+
<CmdInputGroup
|
|
579
|
+
labelText="Group label for radio-group given by slot"
|
|
580
|
+
:useSlot="true"
|
|
581
|
+
:status="validationStatus"
|
|
582
|
+
:disabled="disabledStatus"
|
|
583
|
+
>
|
|
522
584
|
<CmdFormElement element="input"
|
|
523
585
|
labelText="Label for radiobutton"
|
|
524
586
|
type="radio"
|
|
525
587
|
id="input-group-radiobutton"
|
|
526
588
|
name="radiogroup2"
|
|
527
589
|
inputValue="radiobuttonValue1"
|
|
528
|
-
v-model="
|
|
529
|
-
:status="
|
|
590
|
+
v-model="inputGroupValue1"
|
|
591
|
+
:status="validationStatus"
|
|
592
|
+
:disabled="disabledStatus"
|
|
593
|
+
/>
|
|
530
594
|
<CmdFormElement element="input"
|
|
531
595
|
labelText="Label for radiobutton"
|
|
532
596
|
type="radio"
|
|
533
597
|
id="input-group-radiobutton"
|
|
534
598
|
name="radiogroup2"
|
|
535
599
|
inputValue="radiobuttonValue2"
|
|
536
|
-
v-model="
|
|
537
|
-
:status="
|
|
600
|
+
v-model="inputGroupValue1"
|
|
601
|
+
:status="validationStatus"
|
|
602
|
+
:disabled="disabledStatus"
|
|
603
|
+
/>
|
|
538
604
|
</CmdInputGroup>
|
|
539
|
-
<CmdMultipleSwitch labelText="Label for multiple-switch with checkboxes:"
|
|
540
|
-
:multipleSwitches="multipleSwitchCheckboxData"
|
|
541
|
-
switchTypes="checkbox"
|
|
542
|
-
switchNames="checkboxgroup"
|
|
543
|
-
:status="formElementStatus"
|
|
544
|
-
v-model="multipleSwitchCheckbox"/>
|
|
545
605
|
<dl>
|
|
546
|
-
<dt>Selected value:</dt>
|
|
606
|
+
<dt>Selected value(s):</dt>
|
|
607
|
+
<dd>
|
|
608
|
+
<output>{{ inputGroupValue1 }}</output>
|
|
609
|
+
</dd>
|
|
610
|
+
</dl>
|
|
611
|
+
<CmdInputGroup
|
|
612
|
+
labelText="Grouplabel for radio-group given by property"
|
|
613
|
+
:inputElements="inputGroupRadiobuttons"
|
|
614
|
+
inputTypes="radio"
|
|
615
|
+
v-model="inputGroupValue2"
|
|
616
|
+
:status="validationStatus"
|
|
617
|
+
:disabled="disabledStatus"
|
|
618
|
+
/>
|
|
619
|
+
<dl>
|
|
620
|
+
<dt>Selected value(s):</dt>
|
|
621
|
+
<dd>
|
|
622
|
+
<output>{{ inputGroupValue2 }}</output>
|
|
623
|
+
</dd>
|
|
624
|
+
</dl>
|
|
625
|
+
<CmdInputGroup
|
|
626
|
+
labelText="Grouplabel for radio-group styled as replaced-input-type"
|
|
627
|
+
:inputElements="inputGroupRadiobuttons"
|
|
628
|
+
inputTypes="radio"
|
|
629
|
+
v-model="inputGroupValueReplaceInputTypeRadio"
|
|
630
|
+
:replaceInputType="true"
|
|
631
|
+
:status="validationStatus"
|
|
632
|
+
:disabled="disabledStatus"
|
|
633
|
+
/>
|
|
634
|
+
<dl>
|
|
635
|
+
<dt>Selected value(s):</dt>
|
|
636
|
+
<dd>
|
|
637
|
+
<output>{{ inputGroupValueReplaceInputTypeRadio }}</output>
|
|
638
|
+
</dd>
|
|
639
|
+
</dl>
|
|
640
|
+
<CmdInputGroup
|
|
641
|
+
labelText="Grouplabel for checkbox-group styled as replaced-input-type"
|
|
642
|
+
:inputElements="inputGroupRadiobuttons"
|
|
643
|
+
inputTypes="checkbox"
|
|
644
|
+
v-model="inputGroupValueReplaceInputTypeCheckbox"
|
|
645
|
+
:replaceInputType="true"
|
|
646
|
+
required="required"
|
|
647
|
+
:status="validationStatus"
|
|
648
|
+
:disabled="disabledStatus"
|
|
649
|
+
/>
|
|
650
|
+
<dl>
|
|
651
|
+
<dt>Selected value(s):</dt>
|
|
652
|
+
<dd>
|
|
653
|
+
<output>{{ inputGroupValueReplaceInputTypeCheckbox }}</output>
|
|
654
|
+
</dd>
|
|
655
|
+
</dl>
|
|
656
|
+
<CmdInputGroup
|
|
657
|
+
labelText="Grouplabel for radio-group given by property styled as multiple-switch"
|
|
658
|
+
:inputElements="inputGroupRadiobuttons.map(item => ({...item, id: item.id + '-multi', name: item.name + '-multi'}))"
|
|
659
|
+
inputTypes="radio"
|
|
660
|
+
:multipleSwitch="true"
|
|
661
|
+
v-model="inputGroupValue3"
|
|
662
|
+
:status="validationStatus"
|
|
663
|
+
:disabled="disabledStatus"
|
|
664
|
+
/>
|
|
665
|
+
<dl>
|
|
666
|
+
<dt>Selected value(s):</dt>
|
|
547
667
|
<dd>
|
|
548
|
-
<output>{{
|
|
668
|
+
<output>{{ inputGroupValue3 }}</output>
|
|
549
669
|
</dd>
|
|
550
670
|
</dl>
|
|
551
|
-
<
|
|
552
|
-
|
|
553
|
-
|
|
554
|
-
|
|
555
|
-
|
|
556
|
-
|
|
671
|
+
<CmdInputGroup
|
|
672
|
+
labelText="Grouplabel for checkbox-group styled as multiple-switch (stretched horizontally)"
|
|
673
|
+
:inputElements="inputGroupCheckboxes"
|
|
674
|
+
inputTypes="checkbox"
|
|
675
|
+
:multipleSwitch="true"
|
|
676
|
+
v-model="inputGroupValue4"
|
|
677
|
+
:stretchHorizontally="true"
|
|
678
|
+
:status="validationStatus"
|
|
679
|
+
:disabled="disabledStatus"
|
|
680
|
+
/>
|
|
557
681
|
<dl>
|
|
558
|
-
<dt>Selected value:</dt>
|
|
682
|
+
<dt>Selected value(s):</dt>
|
|
559
683
|
<dd>
|
|
560
|
-
<output>{{
|
|
684
|
+
<output>{{ inputGroupValue4 }}</output>
|
|
561
685
|
</dd>
|
|
562
686
|
</dl>
|
|
563
687
|
</fieldset><!-- end fieldset -->
|
|
@@ -568,13 +692,14 @@
|
|
|
568
692
|
type="submit"
|
|
569
693
|
id="submitbutton"
|
|
570
694
|
name="submitbutton"
|
|
571
|
-
:
|
|
572
|
-
|
|
695
|
+
:disabled="disabledStatus"
|
|
696
|
+
/>
|
|
697
|
+
<button type="submit" :disabled="disabledStatus">
|
|
573
698
|
<span class="icon-check"></span>
|
|
574
699
|
<span>Native submit-button</span>
|
|
575
700
|
</button>
|
|
576
701
|
</div>
|
|
577
|
-
|
|
702
|
+
</CmdForm>
|
|
578
703
|
</CmdWidthLimitationWrapper>
|
|
579
704
|
<!-- end advanced form elements ----------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
580
705
|
|
|
@@ -586,7 +711,7 @@
|
|
|
586
711
|
<a id="section-bank-account-data"></a>
|
|
587
712
|
<CmdWidthLimitationWrapper>
|
|
588
713
|
<h2 class="headline-demopage">Bank Account Data</h2>
|
|
589
|
-
<CmdBankAccountData :account-data="bankAccountData" :cmd-custom-headline="{ headlineText: 'Bank Account', headlineLevel: 3}" :allow-copy-by-click="true"
|
|
714
|
+
<CmdBankAccountData :account-data="bankAccountData" :cmd-custom-headline="{ headlineText: 'Bank Account', headlineLevel: 3}" :allow-copy-by-click="true"/>
|
|
590
715
|
</CmdWidthLimitationWrapper>
|
|
591
716
|
<!-- end bank account data ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
592
717
|
|
|
@@ -597,16 +722,21 @@
|
|
|
597
722
|
<h3>Content boxes</h3>
|
|
598
723
|
<div class="grid-container-create-columns">
|
|
599
724
|
<div class="grid-small-item">
|
|
600
|
-
<CmdBox>
|
|
725
|
+
<CmdBox :useSlots="['header', 'body', 'footer']">
|
|
601
726
|
<template v-slot:header>
|
|
602
727
|
<h3>
|
|
603
728
|
Headline for box
|
|
604
729
|
</h3>
|
|
605
730
|
</template>
|
|
606
731
|
<template v-slot:body>
|
|
607
|
-
<
|
|
608
|
-
|
|
609
|
-
|
|
732
|
+
<div class="padding">
|
|
733
|
+
<p>
|
|
734
|
+
This content with paragraphs inside is placed inside the box-body.
|
|
735
|
+
</p>
|
|
736
|
+
<p>
|
|
737
|
+
<strong>Header, Content and Footer of this box are given by slots.</strong>
|
|
738
|
+
</p>
|
|
739
|
+
</div>
|
|
610
740
|
</template>
|
|
611
741
|
<template v-slot:footer>
|
|
612
742
|
<p>
|
|
@@ -638,20 +768,15 @@
|
|
|
638
768
|
</CmdBox>
|
|
639
769
|
</div>
|
|
640
770
|
<div class="grid-small-item">
|
|
641
|
-
<CmdBox>
|
|
771
|
+
<CmdBox :useSlots="['header', 'body']" :collapsible="true" :stretchVertically="false">
|
|
642
772
|
<template v-slot:header>
|
|
643
773
|
<h3>
|
|
644
|
-
|
|
774
|
+
Collapsible box with image
|
|
645
775
|
</h3>
|
|
646
776
|
</template>
|
|
647
777
|
<template v-slot:body>
|
|
648
778
|
<img src="media/images/content-images/logo-business-edition-landscape.jpg" alt="Alternative text"/>
|
|
649
779
|
</template>
|
|
650
|
-
<template v-slot:footer>
|
|
651
|
-
<p>
|
|
652
|
-
footer content
|
|
653
|
-
</p>
|
|
654
|
-
</template>
|
|
655
780
|
</CmdBox>
|
|
656
781
|
</div>
|
|
657
782
|
<div class="grid-small-item">
|
|
@@ -679,13 +804,13 @@
|
|
|
679
804
|
<h3>Product boxes</h3>
|
|
680
805
|
<div class="grid-container-create-columns">
|
|
681
806
|
<div class="grid-small-item" v-for="(product, index) in boxProductData" :key="index">
|
|
682
|
-
<CmdBox boxType="product" :product="product" :cmdCustomHeadline="{headlineLevel: 4}"
|
|
807
|
+
<CmdBox boxType="product" :product="product" :cmdCustomHeadline="{headlineLevel: 4}"/>
|
|
683
808
|
</div>
|
|
684
809
|
</div>
|
|
685
810
|
<h3>User boxes</h3>
|
|
686
811
|
<div class="grid-container-create-columns">
|
|
687
812
|
<div class="grid-small-item" v-for="(user, index) in boxUserData" :key="index">
|
|
688
|
-
<CmdBox boxType="user" :user="user" :cmdCustomHeadline="{headlineLevel: 4}"
|
|
813
|
+
<CmdBox boxType="user" :user="user" :cmdCustomHeadline="{headlineLevel: 4}"/>
|
|
689
814
|
</div>
|
|
690
815
|
</div>
|
|
691
816
|
<h3>Box Site Search</h3>
|
|
@@ -696,12 +821,16 @@
|
|
|
696
821
|
v-model:modelValueSearchFilters="filters"
|
|
697
822
|
@search="siteSearchOutput"
|
|
698
823
|
textLegend="Search"
|
|
699
|
-
:cmdFakeSelect="siteSearchFilters"
|
|
824
|
+
:cmdFakeSelect="siteSearchFilters"/>
|
|
700
825
|
<dl>
|
|
701
|
-
<dt>siteSearchInput1:</dt
|
|
702
|
-
<
|
|
703
|
-
<dt>
|
|
704
|
-
<
|
|
826
|
+
<dt>siteSearchInput1:</dt>
|
|
827
|
+
<dd>{{ siteSearchInput1 }}</dd>
|
|
828
|
+
<dt>siteSearchInput2:</dt>
|
|
829
|
+
<dd>{{ siteSearchInput2 }}</dd>
|
|
830
|
+
<dt>Radius:</dt>
|
|
831
|
+
<dd>{{ radius }}</dd>
|
|
832
|
+
<dt>Filters:</dt>
|
|
833
|
+
<dd>{{ filters }}</dd>
|
|
705
834
|
</dl>
|
|
706
835
|
</CmdWidthLimitationWrapper>
|
|
707
836
|
<!-- end boxes ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
@@ -772,8 +901,8 @@
|
|
|
772
901
|
<a id="section-login-form"></a>
|
|
773
902
|
<CmdWidthLimitationWrapper>
|
|
774
903
|
<h2 class="headline-demopage">Login Form</h2>
|
|
775
|
-
<CmdLoginForm v-model="loginData" v-focus
|
|
776
|
-
<p>LoginData: {{loginData}}</p>
|
|
904
|
+
<CmdLoginForm v-model="loginData" v-focus/>
|
|
905
|
+
<p>LoginData: {{ loginData }}</p>
|
|
777
906
|
</CmdWidthLimitationWrapper>
|
|
778
907
|
|
|
779
908
|
<!-- begin list-of-links ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
@@ -781,13 +910,13 @@
|
|
|
781
910
|
<CmdWidthLimitationWrapper>
|
|
782
911
|
<h2 class="headline-demopage">List Of Links</h2>
|
|
783
912
|
<h3>Vertical</h3>
|
|
784
|
-
<CmdListOfLinks :links="listOfLinksData"
|
|
913
|
+
<CmdListOfLinks :links="listOfLinksData"/>
|
|
785
914
|
<h3>Horizontal (aligned left)</h3>
|
|
786
|
-
<CmdListOfLinks orientation="horizontal" align="left" :links="listOfLinksData"
|
|
915
|
+
<CmdListOfLinks orientation="horizontal" align="left" :links="listOfLinksData"/>
|
|
787
916
|
<h3>Horizontal (aligned center)</h3>
|
|
788
|
-
<CmdListOfLinks orientation="horizontal" align="center" :links="listOfLinksData"
|
|
917
|
+
<CmdListOfLinks orientation="horizontal" align="center" :links="listOfLinksData"/>
|
|
789
918
|
<h3>Horizontal (aligned right)</h3>
|
|
790
|
-
<CmdListOfLinks orientation="horizontal" align="right" :links="listOfLinksData"
|
|
919
|
+
<CmdListOfLinks orientation="horizontal" align="right" :links="listOfLinksData"/>
|
|
791
920
|
</CmdWidthLimitationWrapper>
|
|
792
921
|
<!-- end list-of-links ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
793
922
|
|
|
@@ -871,9 +1000,9 @@
|
|
|
871
1000
|
<CmdWidthLimitationWrapper>
|
|
872
1001
|
<h2 class="headline-demopage">Tables</h2>
|
|
873
1002
|
<h3>Table as wide as its content (with caption)</h3>
|
|
874
|
-
<CmdTable :collapsible="true" :fullWidthOnDefault="false"
|
|
1003
|
+
<CmdTable :collapsible="true" :fullWidthOnDefault="false" :userCanToggleWidth="true" :table-data="tableDataSmall"/>
|
|
875
1004
|
<h3>Table as wide as its content (without caption)</h3>
|
|
876
|
-
<CmdTable :collapsible="true" :fullWidthOnDefault="false"
|
|
1005
|
+
<CmdTable :collapsible="true" :fullWidthOnDefault="false" :userCanToggleWidth="true" :caption="{ text: 'Hidden caption', show: false}" :table-data="tableDataSmall"/>
|
|
877
1006
|
<h3>Table as wide as possible</h3>
|
|
878
1007
|
<CmdTable :collapsible="true" :fullWidthOnDefault="false" :userCanToggleWidth="true" :table-data="tableDataLarge"/>
|
|
879
1008
|
</CmdWidthLimitationWrapper>
|
|
@@ -906,14 +1035,14 @@
|
|
|
906
1035
|
<a id="section-thumbnail-scroller"></a>
|
|
907
1036
|
<CmdWidthLimitationWrapper>
|
|
908
1037
|
<h2 class="headline-demopage">Thumbnail-Scroller</h2>
|
|
909
|
-
<CmdThumbnailScroller :thumbnail-scroller-items="thumbnailScrollerData"
|
|
1038
|
+
<CmdThumbnailScroller :thumbnail-scroller-items="thumbnailScrollerData"/>
|
|
910
1039
|
</CmdWidthLimitationWrapper>
|
|
911
1040
|
|
|
912
1041
|
<a id="section-tooltip"></a>
|
|
913
1042
|
<CmdWidthLimitationWrapper>
|
|
914
1043
|
<h2 class="headline-demopage">Tooltip</h2>
|
|
915
1044
|
<p>
|
|
916
|
-
<a href="#" @click.prevent id="hoverme">Hover me!</a><br
|
|
1045
|
+
<a href="#" @click.prevent id="hoverme">Hover me!</a><br/>
|
|
917
1046
|
<a href="#" @click.prevent id="clickme" title="Native tooltip">Click me!</a>
|
|
918
1047
|
</p>
|
|
919
1048
|
<CmdTooltip related-id="hoverme">
|
|
@@ -976,7 +1105,7 @@
|
|
|
976
1105
|
<template #privacy-text>
|
|
977
1106
|
<p>
|
|
978
1107
|
<strong>
|
|
979
|
-
By browsing
|
|
1108
|
+
By browsing this web site to accept the usage and saving of anonymous data!
|
|
980
1109
|
</strong>
|
|
981
1110
|
</p>
|
|
982
1111
|
</template>
|
|
@@ -1003,8 +1132,6 @@ import listOfLinksData from '@/assets/data/list-of-links.json'
|
|
|
1003
1132
|
import imageGalleryData from '@/assets/data/image-gallery.json'
|
|
1004
1133
|
import languagesData from '@/assets/data/switch-language.json'
|
|
1005
1134
|
import multistepsData from '@/assets/data/multistep-form-progress-bar.json'
|
|
1006
|
-
import multipleSwitchCheckboxData from '@/assets/data/multipleswitch-checkbox.json'
|
|
1007
|
-
import multipleSwitchRadioData from '@/assets/data/multipleswitch-radio.json'
|
|
1008
1135
|
import navigationData from '@/assets/data/main-navigation.json'
|
|
1009
1136
|
import openingHoursData from '@/assets/data/opening-hours.json'
|
|
1010
1137
|
import selectOptionsData from '@/assets/data/select-options.json'
|
|
@@ -1038,7 +1165,6 @@ import CmdInputGroup from "./components/CmdInputGroup"
|
|
|
1038
1165
|
import CmdLoginForm from "@/components/CmdLoginForm.vue"
|
|
1039
1166
|
import CmdListOfLinks from "./components/CmdListOfLinks"
|
|
1040
1167
|
import CmdMainNavigation from "@/components/CmdMainNavigation.vue"
|
|
1041
|
-
import CmdMultipleSwitch from "@/components/CmdMultipleSwitch.vue"
|
|
1042
1168
|
import CmdMultistepFormProgressBar from "@/components/CmdMultistepFormProgressBar.vue"
|
|
1043
1169
|
import CmdOpeningHours from "@/components/CmdOpeningHours"
|
|
1044
1170
|
import CmdPager from "@/components/CmdPager.vue"
|
|
@@ -1086,7 +1212,6 @@ export default {
|
|
|
1086
1212
|
CmdLoginForm,
|
|
1087
1213
|
CmdMainNavigation,
|
|
1088
1214
|
CmdMultistepFormProgressBar,
|
|
1089
|
-
CmdMultipleSwitch,
|
|
1090
1215
|
CmdOpeningHours,
|
|
1091
1216
|
CmdPager,
|
|
1092
1217
|
CmdProgressBar,
|
|
@@ -1107,9 +1232,63 @@ export default {
|
|
|
1107
1232
|
data() {
|
|
1108
1233
|
return {
|
|
1109
1234
|
showTooltip: false,
|
|
1235
|
+
disabledStatus: undefined,
|
|
1236
|
+
validationStatus: "",
|
|
1110
1237
|
inputFieldPattern: "",
|
|
1111
1238
|
inputSearch: "",
|
|
1112
1239
|
textarea: "",
|
|
1240
|
+
inputGroupValue1: "radiobuttonValue1",
|
|
1241
|
+
inputGroupValue2: "website",
|
|
1242
|
+
inputGroupValueReplaceInputTypeRadio: "phone",
|
|
1243
|
+
inputGroupValueReplaceInputTypeCheckbox: ["phone"],
|
|
1244
|
+
inputGroupValue3: "email",
|
|
1245
|
+
inputGroupValue4: [],
|
|
1246
|
+
inputGroupRadiobuttons: [
|
|
1247
|
+
{
|
|
1248
|
+
labelText: "Website",
|
|
1249
|
+
id: "radio-id-1",
|
|
1250
|
+
name: "input-group-radio",
|
|
1251
|
+
iconClass: "icon-globe",
|
|
1252
|
+
value: "website"
|
|
1253
|
+
},
|
|
1254
|
+
{
|
|
1255
|
+
labelText: "E-Mail",
|
|
1256
|
+
id: "radio-id-2",
|
|
1257
|
+
name: "input-group-radio",
|
|
1258
|
+
iconClass: "icon-mail",
|
|
1259
|
+
value: "email"
|
|
1260
|
+
},
|
|
1261
|
+
{
|
|
1262
|
+
labelText: "Phone",
|
|
1263
|
+
id: "radio-id-3",
|
|
1264
|
+
name: "input-group-radio",
|
|
1265
|
+
iconClass: "icon-phone",
|
|
1266
|
+
value: "phone"
|
|
1267
|
+
}
|
|
1268
|
+
],
|
|
1269
|
+
inputGroupCheckboxes: [
|
|
1270
|
+
{
|
|
1271
|
+
labelText: "Website",
|
|
1272
|
+
id: "checkbox-id-1",
|
|
1273
|
+
name: "input-group-checkbox",
|
|
1274
|
+
iconClass: "icon-globe",
|
|
1275
|
+
value: "website"
|
|
1276
|
+
},
|
|
1277
|
+
{
|
|
1278
|
+
labelText: "E-Mail",
|
|
1279
|
+
id: "checkbox-id-2",
|
|
1280
|
+
name: "input-group-checkbox",
|
|
1281
|
+
iconClass: "icon-mail",
|
|
1282
|
+
value: "email"
|
|
1283
|
+
},
|
|
1284
|
+
{
|
|
1285
|
+
labelText: "Phone",
|
|
1286
|
+
id: "checkbox-id-3",
|
|
1287
|
+
name: "input-group-checkbox",
|
|
1288
|
+
iconClass: "icon-phone",
|
|
1289
|
+
value: "phone"
|
|
1290
|
+
}
|
|
1291
|
+
],
|
|
1113
1292
|
inputNumber: "",
|
|
1114
1293
|
inputDate: "",
|
|
1115
1294
|
accordionGroupOpen: false,
|
|
@@ -1128,12 +1307,12 @@ export default {
|
|
|
1128
1307
|
labelText: "Filters:",
|
|
1129
1308
|
type: "checkboxOptions"
|
|
1130
1309
|
},
|
|
1131
|
-
formElementStatus: "",
|
|
1132
1310
|
siteSearchInput1: "Doctor",
|
|
1133
1311
|
siteSearchInput2: "New York",
|
|
1134
1312
|
radius: 10,
|
|
1135
1313
|
filters: ["2"],
|
|
1136
1314
|
switchButtonRadio: "radio1",
|
|
1315
|
+
switchButtonCheckboxToggleSwitch: false,
|
|
1137
1316
|
switchButtonCheckbox: ["checkbox1"],
|
|
1138
1317
|
switchButtonCheckboxColored: false,
|
|
1139
1318
|
inputUsername: "",
|
|
@@ -1146,8 +1325,6 @@ export default {
|
|
|
1146
1325
|
replacedCheckboxValue: "checkboxValue1",
|
|
1147
1326
|
radiobuttonValue: "radiobuttonValue1",
|
|
1148
1327
|
replacedRadiobuttonValue: "radiobuttonValue1",
|
|
1149
|
-
multipleSwitchCheckbox: ['b'],
|
|
1150
|
-
multipleSwitchRadio: 'c',
|
|
1151
1328
|
fancyBoxCookieDisclaimer: false,
|
|
1152
1329
|
fakeSelectDefault: "2",
|
|
1153
1330
|
fakeSelectDefaultWithIcons: "1",
|
|
@@ -1187,8 +1364,6 @@ export default {
|
|
|
1187
1364
|
imageGalleryData,
|
|
1188
1365
|
languagesData,
|
|
1189
1366
|
multistepsData,
|
|
1190
|
-
multipleSwitchCheckboxData,
|
|
1191
|
-
multipleSwitchRadioData,
|
|
1192
1367
|
navigationData,
|
|
1193
1368
|
openingHoursData,
|
|
1194
1369
|
selectOptionsData,
|
|
@@ -1201,9 +1376,13 @@ export default {
|
|
|
1201
1376
|
}
|
|
1202
1377
|
},
|
|
1203
1378
|
mounted() {
|
|
1204
|
-
|
|
1379
|
+
document.querySelector('html').addEventListener('toggle-color-scheme', (event) => console.log('colorScheme:', event.detail))
|
|
1205
1380
|
},
|
|
1206
1381
|
methods: {
|
|
1382
|
+
setStatus(validationStatus, disabledStatus) {
|
|
1383
|
+
this.validationStatus = validationStatus
|
|
1384
|
+
this.disabledStatus = disabledStatus
|
|
1385
|
+
},
|
|
1207
1386
|
siteSearchOutput(event) {
|
|
1208
1387
|
console.log(event)
|
|
1209
1388
|
},
|
|
@@ -1251,8 +1430,9 @@ export default {
|
|
|
1251
1430
|
<style lang="scss">
|
|
1252
1431
|
.list-status {
|
|
1253
1432
|
.active {
|
|
1254
|
-
color: var(--
|
|
1433
|
+
color: var(--text-color);
|
|
1255
1434
|
text-decoration: none;
|
|
1435
|
+
background: none;
|
|
1256
1436
|
}
|
|
1257
1437
|
}
|
|
1258
1438
|
</style>
|