comand-component-library 3.1.68 → 3.1.71
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 +271 -173
- 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 +56 -48
- package/src/assets/styles/logos-iconfont.css +47 -32
- package/src/components/CmdBackToTopButton.vue +1 -1
- package/src/components/CmdBox.vue +54 -28
- package/src/components/CmdBoxSiteSearch.vue +228 -46
- package/src/components/CmdCompanyLogo.vue +37 -12
- package/src/components/CmdCookieDisclaimer.vue +16 -17
- package/src/components/CmdCustomHeadline.vue +1 -1
- package/src/components/CmdFakeSelect.vue +24 -28
- package/src/components/CmdFormElement.vue +157 -141
- package/src/components/CmdInputGroup.vue +132 -4
- package/src/components/CmdLoginForm.vue +4 -2
- package/src/components/CmdMultipleSwitch.vue +14 -2
- package/src/components/CmdMultistepFormProgressBar.vue +2 -2
- package/src/components/CmdProgressBar.vue +2 -2
- package/src/components/CmdSiteHeader.vue +12 -3
- package/src/components/CmdTable.vue +1 -1
- package/src/components/CmdTabs.vue +3 -7
- package/src/components/CmdThumbnailScroller.vue +1 -1
- package/src/components/CmdToggleDarkMode.vue +66 -0
- package/src/components/CmdUploadForm.vue +5 -6
- package/src/index.js +1 -2
- 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/components/CmdSwitchButton.vue +0 -181
package/src/App.vue
CHANGED
|
@@ -2,11 +2,19 @@
|
|
|
2
2
|
<template>
|
|
3
3
|
<a id="anchor-back-to-top"></a>
|
|
4
4
|
<CmdSiteHeader :cmdMainNavigation="navigationData" :sticky="true">
|
|
5
|
+
<template v-slot:top-header>
|
|
6
|
+
<CmdListOfLinks
|
|
7
|
+
:links="listOfLinksData"
|
|
8
|
+
orientation="horizontal"
|
|
9
|
+
align="right"
|
|
10
|
+
/>
|
|
11
|
+
</template>
|
|
5
12
|
<template v-slot:logo>
|
|
6
|
-
<CmdCompanyLogo
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
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')"
|
|
10
18
|
/>
|
|
11
19
|
</template>
|
|
12
20
|
</CmdSiteHeader>
|
|
@@ -57,7 +65,7 @@
|
|
|
57
65
|
<li><a href="#" @click.prevent="formElementStatus = ''" :class="{'active' : formElementStatus === ''}"
|
|
58
66
|
id="status-default">Default</a></li>
|
|
59
67
|
<li class="error"><a href="#" @click.prevent="formElementStatus = 'error'"
|
|
60
|
-
|
|
68
|
+
:class="{'active' : formElementStatus === 'error'}" id="status-error">Error</a></li>
|
|
61
69
|
<li><a href="#" @click.prevent="formElementStatus = 'warning'"
|
|
62
70
|
:class="{'active' : formElementStatus === 'warning'}" id="status-warning">Warning</a></li>
|
|
63
71
|
<li><a href="#" @click.prevent="formElementStatus = 'success'"
|
|
@@ -70,13 +78,14 @@
|
|
|
70
78
|
</div>
|
|
71
79
|
|
|
72
80
|
<!-- begin cmd-form-filters -->
|
|
73
|
-
<CmdFormFilters v-model="fakeSelectFilters" :selectedOptionsName="getOptionName"
|
|
81
|
+
<CmdFormFilters v-model="fakeSelectFilters" :selectedOptionsName="getOptionName"/>
|
|
74
82
|
<!-- end cmd-form-filters -->
|
|
75
83
|
|
|
76
84
|
<CmdForm :use-fieldset="false" id="advanced-form-elements" novalidate="novalidate">
|
|
77
85
|
<fieldset class="grid-container-create-columns">
|
|
78
86
|
<legend>Legend</legend>
|
|
79
87
|
<h2>Form Element-Component</h2>
|
|
88
|
+
<CmdToggleDarkMode :showLabel="true"/>
|
|
80
89
|
<div class="flex-container">
|
|
81
90
|
<CmdFormElement labelText="Input (type text):"
|
|
82
91
|
element="input"
|
|
@@ -102,15 +111,32 @@
|
|
|
102
111
|
tooltipText="This is a tooltip"
|
|
103
112
|
/>
|
|
104
113
|
</div>
|
|
114
|
+
<CmdFormElement labelText="Input (type search (without search-button)):"
|
|
115
|
+
element="input"
|
|
116
|
+
type="search"
|
|
117
|
+
:status="formElementStatus"
|
|
118
|
+
:showSearchButton="false"
|
|
119
|
+
placeholder="Search"
|
|
120
|
+
tooltipText="This is a tooltip"
|
|
121
|
+
v-bind="{useCustomTooltip: false}"
|
|
122
|
+
/>
|
|
123
|
+
<CmdFormElement labelText="Input (type search (with search-button)):"
|
|
124
|
+
element="input"
|
|
125
|
+
type="search"
|
|
126
|
+
:status="formElementStatus"
|
|
127
|
+
placeholder="Search"
|
|
128
|
+
tooltipText="This is a tooltip"
|
|
129
|
+
v-bind="{useCustomTooltip: false}"
|
|
130
|
+
/>
|
|
105
131
|
<h2>Fake Selects</h2>
|
|
106
132
|
<div class="flex-container">
|
|
107
133
|
<!-- type === default: normal selectbox (with optional icons) -->
|
|
108
134
|
<CmdFakeSelect labelText="Default selectbox:"
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
135
|
+
:status="formElementStatus"
|
|
136
|
+
:selectData="fakeSelectOptionsData"
|
|
137
|
+
v-model="fakeSelectDefault"
|
|
138
|
+
required
|
|
139
|
+
defaultOptionName="Select an option:"
|
|
114
140
|
/>
|
|
115
141
|
<CmdFakeSelect labelText="Default selectbox with icons:"
|
|
116
142
|
:status="formElementStatus"
|
|
@@ -175,114 +201,51 @@
|
|
|
175
201
|
|
|
176
202
|
<!-- begin slider -->
|
|
177
203
|
<h2>Slider [native]</h2>
|
|
178
|
-
<
|
|
179
|
-
<span>Single-Slider (with in- and output):</span>
|
|
204
|
+
<div class="label" :class="formElementStatus">
|
|
205
|
+
<span class="label-text">Single-Slider (with in- and output):</span>
|
|
180
206
|
<span class="flex-container no-flex">
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
207
|
+
<label for="range-value">
|
|
208
|
+
<span class="label-text">
|
|
209
|
+
<span>Range Value</span>
|
|
210
|
+
</span>
|
|
211
|
+
<input
|
|
212
|
+
type="number"
|
|
213
|
+
:class="formElementStatus"
|
|
214
|
+
v-model="rangeValue"
|
|
215
|
+
:disabled="formElementStatus === 'disabled'"
|
|
216
|
+
min="0"
|
|
217
|
+
max="100"
|
|
218
|
+
id="range-value"
|
|
219
|
+
/>
|
|
220
|
+
</label>
|
|
221
|
+
<label for="range-slider" class="hidden">
|
|
222
|
+
<span class="label-text">
|
|
223
|
+
<span>Range Value</span>
|
|
224
|
+
</span>
|
|
225
|
+
<input
|
|
226
|
+
type="range"
|
|
227
|
+
class="range-slider"
|
|
228
|
+
:class="{'disabled': formElementStatus === 'disabled'}"
|
|
229
|
+
id="range-slider"
|
|
230
|
+
v-model="rangeValue"
|
|
231
|
+
:disabled="formElementStatus === 'disabled'"
|
|
232
|
+
min="0"
|
|
233
|
+
max="100"
|
|
234
|
+
/>
|
|
235
|
+
</label>
|
|
191
236
|
</span>
|
|
192
|
-
</
|
|
237
|
+
</div>
|
|
193
238
|
<!-- end slider -->
|
|
194
239
|
|
|
195
240
|
<hr/>
|
|
196
241
|
|
|
197
|
-
<!-- begin toggle-switch-radio with switch-label -->
|
|
198
|
-
<h2>Toggle-Switches (Radio and Checkbox) with Switch-Label</h2>
|
|
199
|
-
<div class="label inline">
|
|
200
|
-
<span>Label for Toggle-Switch-Checkbox with Switch-Label:</span>
|
|
201
|
-
<span class="flex-container no-flex">
|
|
202
|
-
<CmdSwitchButton
|
|
203
|
-
type="checkbox"
|
|
204
|
-
id="checkbox1"
|
|
205
|
-
name="checkbox1"
|
|
206
|
-
onLabel="Label on"
|
|
207
|
-
offLabel="Label off"
|
|
208
|
-
inputValue="checkbox1"
|
|
209
|
-
:disabled="formElementStatus === 'disabled'"
|
|
210
|
-
v-model="switchButtonCheckbox"/>
|
|
211
|
-
<CmdSwitchButton
|
|
212
|
-
type="checkbox"
|
|
213
|
-
id="checkbox2"
|
|
214
|
-
name="checkbox2"
|
|
215
|
-
onLabel="Label on"
|
|
216
|
-
offLabel="Label off"
|
|
217
|
-
labelText="Labeltext"
|
|
218
|
-
inputValue="checkbox2"
|
|
219
|
-
:disabled="formElementStatus === 'disabled'"
|
|
220
|
-
v-model="switchButtonCheckbox"/>
|
|
221
|
-
<CmdSwitchButton
|
|
222
|
-
type="checkbox"
|
|
223
|
-
id="checkbox3"
|
|
224
|
-
name="checkbox3"
|
|
225
|
-
inputValue="checkbox3"
|
|
226
|
-
labelText="Labeltext"
|
|
227
|
-
:disabled="formElementStatus === 'disabled'"
|
|
228
|
-
v-model="switchButtonCheckbox"/>
|
|
229
|
-
</span>
|
|
230
|
-
<span>Current value: {{ switchButtonCheckbox }}</span>
|
|
231
|
-
</div>
|
|
232
|
-
<!-- end toggle-switch-radio with switch-label -->
|
|
233
|
-
|
|
234
|
-
<div class="label inline">
|
|
235
|
-
<span>Label for Toggle-Switch-Checkbox with Switch-Label (colored):</span>
|
|
236
|
-
<span class="flex-container no-flex">
|
|
237
|
-
<CmdSwitchButton
|
|
238
|
-
type="checkbox"
|
|
239
|
-
id="checkbox4"
|
|
240
|
-
name="checkbox4"
|
|
241
|
-
onLabel="Label on"
|
|
242
|
-
offLabel="Label off"
|
|
243
|
-
:colored="true"
|
|
244
|
-
inputValue="checkbox3"
|
|
245
|
-
:disabled="formElementStatus === 'disabled'"
|
|
246
|
-
v-model="switchButtonCheckboxColored"/>
|
|
247
|
-
</span>
|
|
248
|
-
<span>Current value: {{ switchButtonCheckboxColored }}</span>
|
|
249
|
-
</div>
|
|
250
|
-
<!-- end toggle-switch-radio with switch-label -->
|
|
251
|
-
|
|
252
242
|
<!-- begin toggle-switch-radio with switch-label (colored) -->
|
|
253
|
-
<
|
|
254
|
-
<span>Label for Toggle-Switch-Radio with Switch-Label (colored):</span>
|
|
255
|
-
<span class="flex-container no-flex">
|
|
256
|
-
<CmdSwitchButton
|
|
257
|
-
type="radio"
|
|
258
|
-
id="radio1"
|
|
259
|
-
name="radiogroup"
|
|
260
|
-
onLabel="Label on"
|
|
261
|
-
offLabel="Label off"
|
|
262
|
-
:colored="true"
|
|
263
|
-
inputValue="radio1"
|
|
264
|
-
:disabled="formElementStatus === 'disabled'"
|
|
265
|
-
v-model="switchButtonRadio"/>
|
|
266
|
-
<CmdSwitchButton
|
|
267
|
-
type="radio"
|
|
268
|
-
id="radio2"
|
|
269
|
-
name="radiogroup"
|
|
270
|
-
onLabel="Label on"
|
|
271
|
-
offLabel="Label off"
|
|
272
|
-
:colored="true"
|
|
273
|
-
inputValue="radio2"
|
|
274
|
-
:disabled="formElementStatus === 'disabled'"
|
|
275
|
-
v-model="switchButtonRadio"/>
|
|
276
|
-
</span>
|
|
277
|
-
</div>
|
|
278
|
-
<hr />
|
|
279
|
-
<h3>Toggle Switches with CmdFormElement</h3>
|
|
243
|
+
<h2>Toggle Switches with CmdFormElement</h2>
|
|
280
244
|
<CmdFormElement element="input"
|
|
281
245
|
type="checkbox"
|
|
282
246
|
id="toggle-switch-checkbox"
|
|
283
|
-
v-model="
|
|
284
|
-
|
|
285
|
-
labelText="Labeltext for Single-SwitchButton (Checkbox)"
|
|
247
|
+
v-model="switchButtonCheckboxToggleSwitch"
|
|
248
|
+
labelText="Labeltext for Switch-Button without Switch-Label"
|
|
286
249
|
:toggleSwitch="true"
|
|
287
250
|
:status="formElementStatus"
|
|
288
251
|
/>
|
|
@@ -290,8 +253,8 @@
|
|
|
290
253
|
type="checkbox"
|
|
291
254
|
id="toggle-switch-checkbox"
|
|
292
255
|
v-model="switchButtonCheckbox"
|
|
293
|
-
|
|
294
|
-
|
|
256
|
+
labelText="Labeltext for Switch-Button with Switch-Label"
|
|
257
|
+
inputValue="checkbox1"
|
|
295
258
|
onLabel="Label on"
|
|
296
259
|
offLabel="Label off"
|
|
297
260
|
:toggleSwitch="true"
|
|
@@ -301,7 +264,8 @@
|
|
|
301
264
|
type="checkbox"
|
|
302
265
|
id="toggle-switch-checkbox-colored"
|
|
303
266
|
v-model="switchButtonCheckbox"
|
|
304
|
-
|
|
267
|
+
inputValue="checkbox2"
|
|
268
|
+
labelText="Labeltext for Switch-Button (Checkbox, colored)"
|
|
305
269
|
onLabel="Label on"
|
|
306
270
|
offLabel="Label off"
|
|
307
271
|
:colored="true"
|
|
@@ -312,25 +276,27 @@
|
|
|
312
276
|
type="radio"
|
|
313
277
|
name="radiogroup"
|
|
314
278
|
id="toggle-switch-radio1"
|
|
315
|
-
v-model="
|
|
279
|
+
v-model="switchButtonRadio"
|
|
316
280
|
onLabel="Label on"
|
|
317
281
|
offLabel="Label off"
|
|
318
282
|
:colored="true"
|
|
319
283
|
:toggleSwitch="true"
|
|
320
284
|
:status="formElementStatus"
|
|
321
285
|
inputValue="radio1"
|
|
286
|
+
labelText="Labeltext for Switch-Button (Radio, colored) #1"
|
|
322
287
|
/>
|
|
323
288
|
<CmdFormElement element="input"
|
|
324
289
|
type="radio"
|
|
325
290
|
name="radiogroup"
|
|
326
291
|
id="toggle-switch-radio2"
|
|
327
|
-
v-model="
|
|
292
|
+
v-model="switchButtonRadio"
|
|
328
293
|
onLabel="Label on"
|
|
329
294
|
offLabel="Label off"
|
|
330
295
|
:colored="true"
|
|
331
296
|
:toggleSwitch="true"
|
|
332
297
|
:status="formElementStatus"
|
|
333
298
|
inputValue="radio2"
|
|
299
|
+
labelText="Labeltext for Switch-Button (Radio, colored) #2"
|
|
334
300
|
/>
|
|
335
301
|
<!-- end toggle-switch-radio with switch-label (colored) -->
|
|
336
302
|
|
|
@@ -380,7 +346,7 @@
|
|
|
380
346
|
maxlength="100"
|
|
381
347
|
v-model="inputUsername"
|
|
382
348
|
:status="formElementStatus"
|
|
383
|
-
|
|
349
|
+
/>
|
|
384
350
|
<CmdFormElement element="input"
|
|
385
351
|
labelText="Label for passwordfield:"
|
|
386
352
|
type="password"
|
|
@@ -440,7 +406,7 @@
|
|
|
440
406
|
v-model="textarea"
|
|
441
407
|
:status="formElementStatus"/>
|
|
442
408
|
<div class="label inline">
|
|
443
|
-
<span>Label for native checkboxes:</span>
|
|
409
|
+
<span class="label-text">Label for native checkboxes:</span>
|
|
444
410
|
<div class="flex-container no-flex">
|
|
445
411
|
<CmdFormElement element="input"
|
|
446
412
|
labelText="Label for checkbox with boolean"
|
|
@@ -472,17 +438,17 @@
|
|
|
472
438
|
v-model="checkboxRequiredValue"
|
|
473
439
|
:status="formElementStatus"/>
|
|
474
440
|
<p>
|
|
475
|
-
checkbox (required) with boolean: {{checkboxRequiredValue}}<br
|
|
476
|
-
checkbox with boolean: {{checkboxValue}}<br
|
|
477
|
-
checkboxes with values: {{checkboxValues}}
|
|
441
|
+
checkbox (required) with boolean: {{ checkboxRequiredValue }}<br/>
|
|
442
|
+
checkbox with boolean: {{ checkboxValue }}<br/>
|
|
443
|
+
checkboxes with values: {{ checkboxValues }}
|
|
478
444
|
</p>
|
|
479
445
|
<div class="label inline">
|
|
480
|
-
<span>Label for Replaced Input-Type-Checkbox:</span>
|
|
446
|
+
<span class="label-text">Label for Replaced Input-Type-Checkbox:</span>
|
|
481
447
|
<div class="flex-container no-flex">
|
|
482
448
|
<CmdFormElement element="input"
|
|
483
449
|
labelText="Label for replaced checkbox"
|
|
484
450
|
type="checkbox"
|
|
485
|
-
|
|
451
|
+
:replaceInputType="true"
|
|
486
452
|
id="inputfield9"
|
|
487
453
|
v-model="replacedCheckboxValue"
|
|
488
454
|
inputValue="checkboxValue1"
|
|
@@ -492,13 +458,13 @@
|
|
|
492
458
|
v-model="replacedCheckboxValue"
|
|
493
459
|
inputValue="checkboxValue2"
|
|
494
460
|
type="checkbox"
|
|
495
|
-
|
|
461
|
+
:replaceInputType="true"
|
|
496
462
|
id="inputfield10"
|
|
497
463
|
:status="formElementStatus"/>
|
|
498
464
|
</div>
|
|
499
465
|
</div>
|
|
500
466
|
<div class="label inline">
|
|
501
|
-
<span>Label for native radiobuttons:</span>
|
|
467
|
+
<span class="label-text">Label for native radiobuttons:</span>
|
|
502
468
|
<div class="flex-container no-flex">
|
|
503
469
|
<CmdFormElement element="input"
|
|
504
470
|
labelText="Label for native radiobutton"
|
|
@@ -519,15 +485,15 @@
|
|
|
519
485
|
</div>
|
|
520
486
|
</div>
|
|
521
487
|
<p>
|
|
522
|
-
Radiobuttons with values: {{radiobuttonValue}}
|
|
488
|
+
Radiobuttons with values: {{ radiobuttonValue }}
|
|
523
489
|
</p>
|
|
524
490
|
<div class="label inline">
|
|
525
|
-
<span>Label for Replaced Input-Type-Radio:</span>
|
|
491
|
+
<span class="label-text">Label for Replaced Input-Type-Radio:</span>
|
|
526
492
|
<div class="flex-container no-flex">
|
|
527
493
|
<CmdFormElement element="input"
|
|
528
494
|
labelText="Label for replaced radiobutton"
|
|
529
495
|
type="radio"
|
|
530
|
-
|
|
496
|
+
:replaceInputType="true"
|
|
531
497
|
id="inputfield13"
|
|
532
498
|
name="replaced-radiogroup"
|
|
533
499
|
inputValue="radiobuttonValue1"
|
|
@@ -536,7 +502,7 @@
|
|
|
536
502
|
<CmdFormElement element="input"
|
|
537
503
|
labelText="Label for replaced radiobutton"
|
|
538
504
|
type="radio"
|
|
539
|
-
|
|
505
|
+
:replaceInputType="true"
|
|
540
506
|
id="inputfield14"
|
|
541
507
|
name="replaced-radiogroup"
|
|
542
508
|
inputValue="radiobuttonValue2"
|
|
@@ -544,14 +510,18 @@
|
|
|
544
510
|
:status="formElementStatus"/>
|
|
545
511
|
</div>
|
|
546
512
|
</div>
|
|
547
|
-
<
|
|
513
|
+
<h2>Input-Groups</h2>
|
|
514
|
+
<CmdInputGroup
|
|
515
|
+
labelText="Group label for radio-group given by slot"
|
|
516
|
+
:useSlot="true"
|
|
517
|
+
>
|
|
548
518
|
<CmdFormElement element="input"
|
|
549
519
|
labelText="Label for radiobutton"
|
|
550
520
|
type="radio"
|
|
551
521
|
id="input-group-radiobutton"
|
|
552
522
|
name="radiogroup2"
|
|
553
523
|
inputValue="radiobuttonValue1"
|
|
554
|
-
v-model="
|
|
524
|
+
v-model="inputGroupValue1"
|
|
555
525
|
:status="formElementStatus"/>
|
|
556
526
|
<CmdFormElement element="input"
|
|
557
527
|
labelText="Label for radiobutton"
|
|
@@ -559,31 +529,79 @@
|
|
|
559
529
|
id="input-group-radiobutton"
|
|
560
530
|
name="radiogroup2"
|
|
561
531
|
inputValue="radiobuttonValue2"
|
|
562
|
-
v-model="
|
|
532
|
+
v-model="inputGroupValue1"
|
|
563
533
|
:status="formElementStatus"/>
|
|
564
534
|
</CmdInputGroup>
|
|
565
|
-
<CmdMultipleSwitch labelText="Label for multiple-switch with checkboxes:"
|
|
566
|
-
:multipleSwitches="multipleSwitchCheckboxData"
|
|
567
|
-
switchTypes="checkbox"
|
|
568
|
-
switchNames="checkboxgroup"
|
|
569
|
-
:status="formElementStatus"
|
|
570
|
-
v-model="multipleSwitchCheckbox"/>
|
|
571
535
|
<dl>
|
|
572
|
-
<dt>Selected value:</dt>
|
|
536
|
+
<dt>Selected value(s):</dt>
|
|
573
537
|
<dd>
|
|
574
|
-
<output>{{
|
|
538
|
+
<output>{{ inputGroupValue1 }}</output>
|
|
575
539
|
</dd>
|
|
576
540
|
</dl>
|
|
577
|
-
<
|
|
578
|
-
|
|
579
|
-
|
|
580
|
-
|
|
581
|
-
|
|
582
|
-
|
|
541
|
+
<CmdInputGroup
|
|
542
|
+
labelText="Grouplabel for radio-group given by property"
|
|
543
|
+
:inputElements="inputGroupRadiobuttons"
|
|
544
|
+
inputTypes="radio"
|
|
545
|
+
v-model="inputGroupValue2"
|
|
546
|
+
/>
|
|
583
547
|
<dl>
|
|
584
|
-
<dt>Selected value:</dt>
|
|
548
|
+
<dt>Selected value(s):</dt>
|
|
585
549
|
<dd>
|
|
586
|
-
<output>{{
|
|
550
|
+
<output>{{ inputGroupValue2 }}</output>
|
|
551
|
+
</dd>
|
|
552
|
+
</dl>
|
|
553
|
+
<CmdInputGroup
|
|
554
|
+
labelText="Grouplabel for radio-group styled as replaced-input-type"
|
|
555
|
+
:inputElements="inputGroupRadiobuttons"
|
|
556
|
+
inputTypes="radio"
|
|
557
|
+
v-model="inputGroupValueReplaceInputTypeRadio"
|
|
558
|
+
:replaceInputType="true"
|
|
559
|
+
/>
|
|
560
|
+
<dl>
|
|
561
|
+
<dt>Selected value(s):</dt>
|
|
562
|
+
<dd>
|
|
563
|
+
<output>{{ inputGroupValueReplaceInputTypeRadio }}</output>
|
|
564
|
+
</dd>
|
|
565
|
+
</dl>
|
|
566
|
+
<CmdInputGroup
|
|
567
|
+
labelText="Grouplabel for checkbox-group styled as replaced-input-type"
|
|
568
|
+
:inputElements="inputGroupRadiobuttons"
|
|
569
|
+
inputTypes="checkbox"
|
|
570
|
+
v-model="inputGroupValueReplaceInputTypeCheckbox"
|
|
571
|
+
:replaceInputType="true"
|
|
572
|
+
required="required"
|
|
573
|
+
/>
|
|
574
|
+
<dl>
|
|
575
|
+
<dt>Selected value(s):</dt>
|
|
576
|
+
<dd>
|
|
577
|
+
<output>{{ inputGroupValueReplaceInputTypeCheckbox }}</output>
|
|
578
|
+
</dd>
|
|
579
|
+
</dl>
|
|
580
|
+
<CmdInputGroup
|
|
581
|
+
labelText="Grouplabel for radio-group given by property styled as multiple-switch"
|
|
582
|
+
:inputElements="inputGroupRadiobuttons.map(item => ({...item, id: item.id + '-multi', name: item.name + '-multi'}))"
|
|
583
|
+
inputTypes="radio"
|
|
584
|
+
:multipleSwitch="true"
|
|
585
|
+
v-model="inputGroupValue3"
|
|
586
|
+
/>
|
|
587
|
+
<dl>
|
|
588
|
+
<dt>Selected value(s):</dt>
|
|
589
|
+
<dd>
|
|
590
|
+
<output>{{ inputGroupValue3 }}</output>
|
|
591
|
+
</dd>
|
|
592
|
+
</dl>
|
|
593
|
+
<CmdInputGroup
|
|
594
|
+
labelText="Grouplabel for checkbox-group styled as multiple-switch (stretched horizontally)"
|
|
595
|
+
:inputElements="inputGroupCheckboxes"
|
|
596
|
+
inputTypes="checkbox"
|
|
597
|
+
:multipleSwitch="true"
|
|
598
|
+
v-model="inputGroupValue4"
|
|
599
|
+
:stretchHorizontally="true"
|
|
600
|
+
/>
|
|
601
|
+
<dl>
|
|
602
|
+
<dt>Selected value(s):</dt>
|
|
603
|
+
<dd>
|
|
604
|
+
<output>{{ inputGroupValue4 }}</output>
|
|
587
605
|
</dd>
|
|
588
606
|
</dl>
|
|
589
607
|
</fieldset><!-- end fieldset -->
|
|
@@ -600,7 +618,7 @@
|
|
|
600
618
|
<span>Native submit-button</span>
|
|
601
619
|
</button>
|
|
602
620
|
</div>
|
|
603
|
-
|
|
621
|
+
</CmdForm>
|
|
604
622
|
</CmdWidthLimitationWrapper>
|
|
605
623
|
<!-- end advanced form elements ----------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
606
624
|
|
|
@@ -612,7 +630,7 @@
|
|
|
612
630
|
<a id="section-bank-account-data"></a>
|
|
613
631
|
<CmdWidthLimitationWrapper>
|
|
614
632
|
<h2 class="headline-demopage">Bank Account Data</h2>
|
|
615
|
-
<CmdBankAccountData :account-data="bankAccountData" :cmd-custom-headline="{ headlineText: 'Bank Account', headlineLevel: 3}" :allow-copy-by-click="true"
|
|
633
|
+
<CmdBankAccountData :account-data="bankAccountData" :cmd-custom-headline="{ headlineText: 'Bank Account', headlineLevel: 3}" :allow-copy-by-click="true"/>
|
|
616
634
|
</CmdWidthLimitationWrapper>
|
|
617
635
|
<!-- end bank account data ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
618
636
|
|
|
@@ -705,17 +723,34 @@
|
|
|
705
723
|
<h3>Product boxes</h3>
|
|
706
724
|
<div class="grid-container-create-columns">
|
|
707
725
|
<div class="grid-small-item" v-for="(product, index) in boxProductData" :key="index">
|
|
708
|
-
<CmdBox boxType="product" :product="product" :cmdCustomHeadline="{headlineLevel: 4}"
|
|
726
|
+
<CmdBox boxType="product" :product="product" :cmdCustomHeadline="{headlineLevel: 4}"/>
|
|
709
727
|
</div>
|
|
710
728
|
</div>
|
|
711
729
|
<h3>User boxes</h3>
|
|
712
730
|
<div class="grid-container-create-columns">
|
|
713
731
|
<div class="grid-small-item" v-for="(user, index) in boxUserData" :key="index">
|
|
714
|
-
<CmdBox boxType="user" :user="user" :cmdCustomHeadline="{headlineLevel: 4}"
|
|
732
|
+
<CmdBox boxType="user" :user="user" :cmdCustomHeadline="{headlineLevel: 4}"/>
|
|
715
733
|
</div>
|
|
716
734
|
</div>
|
|
717
735
|
<h3>Box Site Search</h3>
|
|
718
|
-
<CmdBoxSiteSearch
|
|
736
|
+
<CmdBoxSiteSearch
|
|
737
|
+
v-model:modelValueInput1="siteSearchInput1"
|
|
738
|
+
v-model:modelValueInput2="siteSearchInput2"
|
|
739
|
+
v-model:modelValueRadius="radius"
|
|
740
|
+
v-model:modelValueSearchFilters="filters"
|
|
741
|
+
@search="siteSearchOutput"
|
|
742
|
+
textLegend="Search"
|
|
743
|
+
:cmdFakeSelect="siteSearchFilters"/>
|
|
744
|
+
<dl>
|
|
745
|
+
<dt>siteSearchInput1:</dt>
|
|
746
|
+
<dd>{{ siteSearchInput1 }}</dd>
|
|
747
|
+
<dt>siteSearchInput2:</dt>
|
|
748
|
+
<dd>{{ siteSearchInput2 }}</dd>
|
|
749
|
+
<dt>Radius:</dt>
|
|
750
|
+
<dd>{{ radius }}</dd>
|
|
751
|
+
<dt>Filters:</dt>
|
|
752
|
+
<dd>{{ filters }}</dd>
|
|
753
|
+
</dl>
|
|
719
754
|
</CmdWidthLimitationWrapper>
|
|
720
755
|
<!-- end boxes ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
721
756
|
|
|
@@ -785,8 +820,8 @@
|
|
|
785
820
|
<a id="section-login-form"></a>
|
|
786
821
|
<CmdWidthLimitationWrapper>
|
|
787
822
|
<h2 class="headline-demopage">Login Form</h2>
|
|
788
|
-
<CmdLoginForm v-model="loginData" v-focus
|
|
789
|
-
<p>LoginData: {{loginData}}</p>
|
|
823
|
+
<CmdLoginForm v-model="loginData" v-focus/>
|
|
824
|
+
<p>LoginData: {{ loginData }}</p>
|
|
790
825
|
</CmdWidthLimitationWrapper>
|
|
791
826
|
|
|
792
827
|
<!-- begin list-of-links ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
@@ -794,13 +829,13 @@
|
|
|
794
829
|
<CmdWidthLimitationWrapper>
|
|
795
830
|
<h2 class="headline-demopage">List Of Links</h2>
|
|
796
831
|
<h3>Vertical</h3>
|
|
797
|
-
<CmdListOfLinks :links="listOfLinksData"
|
|
832
|
+
<CmdListOfLinks :links="listOfLinksData"/>
|
|
798
833
|
<h3>Horizontal (aligned left)</h3>
|
|
799
|
-
<CmdListOfLinks orientation="horizontal" align="left" :links="listOfLinksData"
|
|
834
|
+
<CmdListOfLinks orientation="horizontal" align="left" :links="listOfLinksData"/>
|
|
800
835
|
<h3>Horizontal (aligned center)</h3>
|
|
801
|
-
<CmdListOfLinks orientation="horizontal" align="center" :links="listOfLinksData"
|
|
836
|
+
<CmdListOfLinks orientation="horizontal" align="center" :links="listOfLinksData"/>
|
|
802
837
|
<h3>Horizontal (aligned right)</h3>
|
|
803
|
-
<CmdListOfLinks orientation="horizontal" align="right" :links="listOfLinksData"
|
|
838
|
+
<CmdListOfLinks orientation="horizontal" align="right" :links="listOfLinksData"/>
|
|
804
839
|
</CmdWidthLimitationWrapper>
|
|
805
840
|
<!-- end list-of-links ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
806
841
|
|
|
@@ -884,9 +919,9 @@
|
|
|
884
919
|
<CmdWidthLimitationWrapper>
|
|
885
920
|
<h2 class="headline-demopage">Tables</h2>
|
|
886
921
|
<h3>Table as wide as its content (with caption)</h3>
|
|
887
|
-
<CmdTable :collapsible="true" :fullWidthOnDefault="false"
|
|
922
|
+
<CmdTable :collapsible="true" :fullWidthOnDefault="false" :userCanToggleWidth="true" :table-data="tableDataSmall"/>
|
|
888
923
|
<h3>Table as wide as its content (without caption)</h3>
|
|
889
|
-
<CmdTable :collapsible="true" :fullWidthOnDefault="false"
|
|
924
|
+
<CmdTable :collapsible="true" :fullWidthOnDefault="false" :userCanToggleWidth="true" :caption="{ text: 'Hidden caption', show: false}" :table-data="tableDataSmall"/>
|
|
890
925
|
<h3>Table as wide as possible</h3>
|
|
891
926
|
<CmdTable :collapsible="true" :fullWidthOnDefault="false" :userCanToggleWidth="true" :table-data="tableDataLarge"/>
|
|
892
927
|
</CmdWidthLimitationWrapper>
|
|
@@ -919,14 +954,14 @@
|
|
|
919
954
|
<a id="section-thumbnail-scroller"></a>
|
|
920
955
|
<CmdWidthLimitationWrapper>
|
|
921
956
|
<h2 class="headline-demopage">Thumbnail-Scroller</h2>
|
|
922
|
-
<CmdThumbnailScroller :thumbnail-scroller-items="thumbnailScrollerData"
|
|
957
|
+
<CmdThumbnailScroller :thumbnail-scroller-items="thumbnailScrollerData"/>
|
|
923
958
|
</CmdWidthLimitationWrapper>
|
|
924
959
|
|
|
925
960
|
<a id="section-tooltip"></a>
|
|
926
961
|
<CmdWidthLimitationWrapper>
|
|
927
962
|
<h2 class="headline-demopage">Tooltip</h2>
|
|
928
963
|
<p>
|
|
929
|
-
<a href="#" @click.prevent id="hoverme">Hover me!</a><br
|
|
964
|
+
<a href="#" @click.prevent id="hoverme">Hover me!</a><br/>
|
|
930
965
|
<a href="#" @click.prevent id="clickme" title="Native tooltip">Click me!</a>
|
|
931
966
|
</p>
|
|
932
967
|
<CmdTooltip related-id="hoverme">
|
|
@@ -989,7 +1024,7 @@
|
|
|
989
1024
|
<template #privacy-text>
|
|
990
1025
|
<p>
|
|
991
1026
|
<strong>
|
|
992
|
-
By browsing
|
|
1027
|
+
By browsing this web site to accept the usage and saving of anonymous data!
|
|
993
1028
|
</strong>
|
|
994
1029
|
</p>
|
|
995
1030
|
</template>
|
|
@@ -1016,8 +1051,6 @@ import listOfLinksData from '@/assets/data/list-of-links.json'
|
|
|
1016
1051
|
import imageGalleryData from '@/assets/data/image-gallery.json'
|
|
1017
1052
|
import languagesData from '@/assets/data/switch-language.json'
|
|
1018
1053
|
import multistepsData from '@/assets/data/multistep-form-progress-bar.json'
|
|
1019
|
-
import multipleSwitchCheckboxData from '@/assets/data/multipleswitch-checkbox.json'
|
|
1020
|
-
import multipleSwitchRadioData from '@/assets/data/multipleswitch-radio.json'
|
|
1021
1054
|
import navigationData from '@/assets/data/main-navigation.json'
|
|
1022
1055
|
import openingHoursData from '@/assets/data/opening-hours.json'
|
|
1023
1056
|
import selectOptionsData from '@/assets/data/select-options.json'
|
|
@@ -1051,7 +1084,6 @@ import CmdInputGroup from "./components/CmdInputGroup"
|
|
|
1051
1084
|
import CmdLoginForm from "@/components/CmdLoginForm.vue"
|
|
1052
1085
|
import CmdListOfLinks from "./components/CmdListOfLinks"
|
|
1053
1086
|
import CmdMainNavigation from "@/components/CmdMainNavigation.vue"
|
|
1054
|
-
import CmdMultipleSwitch from "@/components/CmdMultipleSwitch.vue"
|
|
1055
1087
|
import CmdMultistepFormProgressBar from "@/components/CmdMultistepFormProgressBar.vue"
|
|
1056
1088
|
import CmdOpeningHours from "@/components/CmdOpeningHours"
|
|
1057
1089
|
import CmdPager from "@/components/CmdPager.vue"
|
|
@@ -1059,12 +1091,12 @@ import CmdProgressBar from "@/components/CmdProgressBar.vue"
|
|
|
1059
1091
|
import CmdShareButtons from "@/components/CmdShareButtons.vue"
|
|
1060
1092
|
import CmdSiteHeader from "./components/CmdSiteHeader"
|
|
1061
1093
|
import CmdSlideshow from "@/components/CmdSlideshow.vue"
|
|
1062
|
-
import CmdSwitchButton from "@/components/CmdSwitchButton.vue"
|
|
1063
1094
|
import CmdSwitchLanguage from "@/components/CmdSwitchLanguage.vue"
|
|
1064
1095
|
import CmdSystemMessage from "@/components/CmdSystemMessage.vue"
|
|
1065
1096
|
import CmdTabs from "@/components/CmdTabs.vue"
|
|
1066
1097
|
import CmdTable from "@/components/CmdTable.vue"
|
|
1067
1098
|
import CmdThumbnailScroller from "@/components/CmdThumbnailScroller.vue"
|
|
1099
|
+
import CmdToggleDarkMode from "@/components/CmdToggleDarkMode.vue"
|
|
1068
1100
|
import CmdTooltip from "@/components/CmdTooltip.vue"
|
|
1069
1101
|
import CmdUploadForm from "@/components/CmdUploadForm.vue"
|
|
1070
1102
|
import CmdWidthLimitationWrapper from "@/components/CmdWidthLimitationWrapper"
|
|
@@ -1099,19 +1131,18 @@ export default {
|
|
|
1099
1131
|
CmdLoginForm,
|
|
1100
1132
|
CmdMainNavigation,
|
|
1101
1133
|
CmdMultistepFormProgressBar,
|
|
1102
|
-
CmdMultipleSwitch,
|
|
1103
1134
|
CmdOpeningHours,
|
|
1104
1135
|
CmdPager,
|
|
1105
1136
|
CmdProgressBar,
|
|
1106
1137
|
CmdShareButtons,
|
|
1107
1138
|
CmdSiteHeader,
|
|
1108
1139
|
CmdSlideshow,
|
|
1109
|
-
CmdSwitchButton,
|
|
1110
1140
|
CmdSwitchLanguage,
|
|
1111
1141
|
CmdSystemMessage,
|
|
1112
1142
|
CmdTabs,
|
|
1113
1143
|
CmdTable,
|
|
1114
1144
|
CmdThumbnailScroller,
|
|
1145
|
+
CmdToggleDarkMode,
|
|
1115
1146
|
CmdTooltip,
|
|
1116
1147
|
CmdUploadForm,
|
|
1117
1148
|
CmdWidthLimitationWrapper
|
|
@@ -1123,6 +1154,58 @@ export default {
|
|
|
1123
1154
|
inputFieldPattern: "",
|
|
1124
1155
|
inputSearch: "",
|
|
1125
1156
|
textarea: "",
|
|
1157
|
+
inputGroupValue1: "radiobuttonValue1",
|
|
1158
|
+
inputGroupValue2: "website",
|
|
1159
|
+
inputGroupValueReplaceInputTypeRadio: "phone",
|
|
1160
|
+
inputGroupValueReplaceInputTypeCheckbox: ["phone"],
|
|
1161
|
+
inputGroupValue3: "email",
|
|
1162
|
+
inputGroupValue4: [],
|
|
1163
|
+
inputGroupRadiobuttons: [
|
|
1164
|
+
{
|
|
1165
|
+
labelText: "Website",
|
|
1166
|
+
id: "radio-id-1",
|
|
1167
|
+
name: "input-group-radio",
|
|
1168
|
+
iconClass: "icon-globe",
|
|
1169
|
+
value: "website"
|
|
1170
|
+
},
|
|
1171
|
+
{
|
|
1172
|
+
labelText: "E-Mail",
|
|
1173
|
+
id: "radio-id-2",
|
|
1174
|
+
name: "input-group-radio",
|
|
1175
|
+
iconClass: "icon-mail",
|
|
1176
|
+
value: "email"
|
|
1177
|
+
},
|
|
1178
|
+
{
|
|
1179
|
+
labelText: "Phone",
|
|
1180
|
+
id: "radio-id-3",
|
|
1181
|
+
name: "input-group-radio",
|
|
1182
|
+
iconClass: "icon-phone",
|
|
1183
|
+
value: "phone"
|
|
1184
|
+
}
|
|
1185
|
+
],
|
|
1186
|
+
inputGroupCheckboxes: [
|
|
1187
|
+
{
|
|
1188
|
+
labelText: "Website",
|
|
1189
|
+
id: "checkbox-id-1",
|
|
1190
|
+
name: "input-group-checkbox",
|
|
1191
|
+
iconClass: "icon-globe",
|
|
1192
|
+
value: "website"
|
|
1193
|
+
},
|
|
1194
|
+
{
|
|
1195
|
+
labelText: "E-Mail",
|
|
1196
|
+
id: "checkbox-id-2",
|
|
1197
|
+
name: "input-group-checkbox",
|
|
1198
|
+
iconClass: "icon-mail",
|
|
1199
|
+
value: "email"
|
|
1200
|
+
},
|
|
1201
|
+
{
|
|
1202
|
+
labelText: "Phone",
|
|
1203
|
+
id: "checkbox-id-3",
|
|
1204
|
+
name: "input-group-checkbox",
|
|
1205
|
+
iconClass: "icon-phone",
|
|
1206
|
+
value: "phone"
|
|
1207
|
+
}
|
|
1208
|
+
],
|
|
1126
1209
|
inputNumber: "",
|
|
1127
1210
|
inputDate: "",
|
|
1128
1211
|
accordionGroupOpen: false,
|
|
@@ -1134,8 +1217,20 @@ export default {
|
|
|
1134
1217
|
selectedColor: "",
|
|
1135
1218
|
rangeValue: 50,
|
|
1136
1219
|
loginData: {},
|
|
1220
|
+
siteSearchFilters: {
|
|
1221
|
+
show: true,
|
|
1222
|
+
selectData: fakeSelectFilterOptionsData,
|
|
1223
|
+
defaultOptionName: "Select filters:",
|
|
1224
|
+
labelText: "Filters:",
|
|
1225
|
+
type: "checkboxOptions"
|
|
1226
|
+
},
|
|
1137
1227
|
formElementStatus: "",
|
|
1228
|
+
siteSearchInput1: "Doctor",
|
|
1229
|
+
siteSearchInput2: "New York",
|
|
1230
|
+
radius: 10,
|
|
1231
|
+
filters: ["2"],
|
|
1138
1232
|
switchButtonRadio: "radio1",
|
|
1233
|
+
switchButtonCheckboxToggleSwitch: false,
|
|
1139
1234
|
switchButtonCheckbox: ["checkbox1"],
|
|
1140
1235
|
switchButtonCheckboxColored: false,
|
|
1141
1236
|
inputUsername: "",
|
|
@@ -1148,8 +1243,6 @@ export default {
|
|
|
1148
1243
|
replacedCheckboxValue: "checkboxValue1",
|
|
1149
1244
|
radiobuttonValue: "radiobuttonValue1",
|
|
1150
1245
|
replacedRadiobuttonValue: "radiobuttonValue1",
|
|
1151
|
-
multipleSwitchCheckbox: ['b'],
|
|
1152
|
-
multipleSwitchRadio: 'c',
|
|
1153
1246
|
fancyBoxCookieDisclaimer: false,
|
|
1154
1247
|
fakeSelectDefault: "2",
|
|
1155
1248
|
fakeSelectDefaultWithIcons: "1",
|
|
@@ -1189,8 +1282,6 @@ export default {
|
|
|
1189
1282
|
imageGalleryData,
|
|
1190
1283
|
languagesData,
|
|
1191
1284
|
multistepsData,
|
|
1192
|
-
multipleSwitchCheckboxData,
|
|
1193
|
-
multipleSwitchRadioData,
|
|
1194
1285
|
navigationData,
|
|
1195
1286
|
openingHoursData,
|
|
1196
1287
|
selectOptionsData,
|
|
@@ -1202,7 +1293,13 @@ export default {
|
|
|
1202
1293
|
thumbnailScrollerData
|
|
1203
1294
|
}
|
|
1204
1295
|
},
|
|
1296
|
+
mounted() {
|
|
1297
|
+
document.querySelector('html').addEventListener('toggle-color-scheme', (event) => console.log('colorScheme:', event.detail))
|
|
1298
|
+
},
|
|
1205
1299
|
methods: {
|
|
1300
|
+
siteSearchOutput(event) {
|
|
1301
|
+
console.log(event)
|
|
1302
|
+
},
|
|
1206
1303
|
showError(event) {
|
|
1207
1304
|
console.log("EventMessages", event.messages)
|
|
1208
1305
|
alert("Error")
|
|
@@ -1247,8 +1344,9 @@ export default {
|
|
|
1247
1344
|
<style lang="scss">
|
|
1248
1345
|
.list-status {
|
|
1249
1346
|
.active {
|
|
1250
|
-
color: var(--
|
|
1347
|
+
color: var(--text-color);
|
|
1251
1348
|
text-decoration: none;
|
|
1349
|
+
background: none;
|
|
1252
1350
|
}
|
|
1253
1351
|
}
|
|
1254
1352
|
</style>
|