comand-component-library 3.1.68 → 3.1.71

Sign up to get free protection for your applications and to get access to all the features.
Files changed (36) hide show
  1. package/dist/comand-component-library.css +1 -1
  2. package/dist/comand-component-library.umd.min.js +1 -1
  3. package/package.json +2 -2
  4. package/src/App.vue +271 -173
  5. package/src/assets/data/list-of-links.json +0 -1
  6. package/src/assets/fonts/iconfonts/logos-iconfont/icomoon.woff +0 -0
  7. package/src/assets/fonts/iconfonts/logos-iconfont/selection.json +1 -0
  8. package/src/assets/styles/global-styles.scss +56 -48
  9. package/src/assets/styles/logos-iconfont.css +47 -32
  10. package/src/components/CmdBackToTopButton.vue +1 -1
  11. package/src/components/CmdBox.vue +54 -28
  12. package/src/components/CmdBoxSiteSearch.vue +228 -46
  13. package/src/components/CmdCompanyLogo.vue +37 -12
  14. package/src/components/CmdCookieDisclaimer.vue +16 -17
  15. package/src/components/CmdCustomHeadline.vue +1 -1
  16. package/src/components/CmdFakeSelect.vue +24 -28
  17. package/src/components/CmdFormElement.vue +157 -141
  18. package/src/components/CmdInputGroup.vue +132 -4
  19. package/src/components/CmdLoginForm.vue +4 -2
  20. package/src/components/CmdMultipleSwitch.vue +14 -2
  21. package/src/components/CmdMultistepFormProgressBar.vue +2 -2
  22. package/src/components/CmdProgressBar.vue +2 -2
  23. package/src/components/CmdSiteHeader.vue +12 -3
  24. package/src/components/CmdTable.vue +1 -1
  25. package/src/components/CmdTabs.vue +3 -7
  26. package/src/components/CmdThumbnailScroller.vue +1 -1
  27. package/src/components/CmdToggleDarkMode.vue +66 -0
  28. package/src/components/CmdUploadForm.vue +5 -6
  29. package/src/index.js +1 -2
  30. package/src/mixins/CmdFormElement/DefaultMessageProperties.js +1 -1
  31. package/src/mixins/FieldValidation.js +1 -1
  32. package/src/mixins/GlobalDefaultMessageProperties.js +1 -2
  33. package/src/mixins/I18n.js +12 -2
  34. package/src/utils/{GetFileExtension.js → getFileExtension.js} +0 -0
  35. package/src/assets/fonts/iconfonts/logos-iconfont/logos-iconfont.json +0 -1
  36. 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 :link="companyLogoData.link"
7
- altText="CoManD Logo"
8
- :pathDefaultLogo="require('@/assets/images/logo.svg')"
9
- :pathDarkmodeLogo="require('@/assets/images/logo-darkmode.svg')"
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
- :class="{'active' : formElementStatus === 'error'}" id="status-error">Error</a></li>
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
- :status="formElementStatus"
110
- :selectData="fakeSelectOptionsData"
111
- v-model="fakeSelectDefault"
112
- required
113
- defaultOptionName="Select an option:"
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
- <label for="range-slider" :class="formElementStatus">
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
- <input type="number" :class="formElementStatus" v-model="rangeValue"
182
- :disabled="formElementStatus === 'disabled'" min="0" max="100"/>
183
- <input type="range"
184
- class="range-slider"
185
- :class="{'disabled': formElementStatus === 'disabled'}"
186
- id="range-slider"
187
- v-model="rangeValue"
188
- :disabled="formElementStatus === 'disabled'"
189
- min="0"
190
- max="100"/>
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
- </label>
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
- <div class="label inline">
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="switchButtonCheckbox"
284
- :displayLabelInline="true"
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
- :displayLabelInline="true"
294
- labelText="Labeltext for SwitchButton (Checkbox)"
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
- labelText="Labeltext for SwitchButton (Checkbox, colored)"
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="switchButtonCheckbox"
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="switchButtonCheckbox"
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
- class="replace-input-type"
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
- class="replace-input-type"
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
- class="replace-input-type"
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
- class="replace-input-type"
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
- <CmdInputGroup labelText="Group label for radio group">
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="radiobuttonValue"
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="radiobuttonValue"
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>{{ multipleSwitchCheckbox }}</output>
538
+ <output>{{ inputGroupValue1 }}</output>
575
539
  </dd>
576
540
  </dl>
577
- <CmdMultipleSwitch labelText="Label for multiple-switch with radiobuttons:"
578
- :multipleSwitches="multipleSwitchRadioData"
579
- switchTypes="radio"
580
- switchNames="swtich-names"
581
- :status="formElementStatus"
582
- v-model="multipleSwitchRadio"/>
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>{{ multipleSwitchRadio }}</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
- </CmdForm>
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 :results="executeSearch()" @click="executeSearch($event)"/>
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" :userCanToggleWidth="true" :table-data="tableDataSmall"/>
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" :userCanToggleWidth="true" :caption="{ text: 'Hidden caption', show: false}" :table-data="tableDataSmall"/>
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 ths web site yo accept the usage and saving of anonymous data!
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(--default-color);
1347
+ color: var(--text-color);
1251
1348
  text-decoration: none;
1349
+ background: none;
1252
1350
  }
1253
1351
  }
1254
1352
  </style>