comand-component-library 3.1.67 → 3.1.70

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.
Files changed (31) 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 +214 -146
  5. package/src/assets/fonts/iconfonts/logos-iconfont/icomoon.woff +0 -0
  6. package/src/assets/fonts/iconfonts/logos-iconfont/selection.json +1 -0
  7. package/src/assets/styles/global-styles.scss +30 -48
  8. package/src/assets/styles/logos-iconfont.css +47 -32
  9. package/src/components/CmdBackToTopButton.vue +1 -1
  10. package/src/components/CmdBox.vue +47 -25
  11. package/src/components/CmdBoxSiteSearch.vue +228 -46
  12. package/src/components/CmdCompanyLogo.vue +34 -9
  13. package/src/components/CmdCookieDisclaimer.vue +0 -17
  14. package/src/components/CmdCustomHeadline.vue +1 -1
  15. package/src/components/CmdFakeSelect.vue +19 -19
  16. package/src/components/CmdFormElement.vue +135 -112
  17. package/src/components/CmdInputGroup.vue +120 -4
  18. package/src/components/CmdListOfLinks.vue +6 -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/CmdSiteHeader.vue +13 -4
  23. package/src/components/CmdTabs.vue +3 -7
  24. package/src/components/CmdThumbnailScroller.vue +1 -1
  25. package/src/components/CmdToggleDarkMode.vue +66 -0
  26. package/src/components/CmdUploadForm.vue +5 -6
  27. package/src/index.js +0 -1
  28. package/src/mixins/FieldValidation.js +1 -1
  29. package/src/utils/{GetFileExtension.js → getFileExtension.js} +0 -0
  30. package/src/assets/fonts/iconfonts/logos-iconfont/logos-iconfont.json +0 -1
  31. package/src/components/CmdSwitchButton.vue +0 -181
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "comand-component-library",
3
- "version": "3.1.67",
3
+ "version": "3.1.70",
4
4
  "private": false,
5
5
  "scripts": {
6
6
  "serve": "vue-cli-service serve",
@@ -18,7 +18,7 @@
18
18
  ],
19
19
  "dependencies": {
20
20
  "clickout-event": "^1.1.2",
21
- "comand-frontend-framework": "^3.2.48",
21
+ "comand-frontend-framework": "^3.2.59",
22
22
  "core-js": "^3.20.1",
23
23
  "prismjs": "^1.27.0",
24
24
  "vue": "^3.2.31",
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>
@@ -77,6 +85,7 @@
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,6 +111,23 @@
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) -->
@@ -178,111 +204,37 @@
178
204
  <label for="range-slider" :class="formElementStatus">
179
205
  <span>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
+ <input
208
+ type="number"
209
+ :class="formElementStatus"
210
+ v-model="rangeValue"
211
+ :disabled="formElementStatus === 'disabled'"
212
+ min="0"
213
+ max="100"
214
+ />
215
+ <input
216
+ type="range"
217
+ class="range-slider"
218
+ :class="{'disabled': formElementStatus === 'disabled'}"
219
+ id="range-slider"
220
+ v-model="rangeValue"
221
+ :disabled="formElementStatus === 'disabled'"
222
+ min="0"
223
+ max="100"
224
+ />
191
225
  </span>
192
226
  </label>
193
227
  <!-- end slider -->
194
228
 
195
229
  <hr/>
196
230
 
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
231
  <!-- 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>
232
+ <h2>Toggle Switches with CmdFormElement</h2>
280
233
  <CmdFormElement element="input"
281
234
  type="checkbox"
282
235
  id="toggle-switch-checkbox"
283
- v-model="switchButtonCheckbox"
284
- :displayLabelInline="true"
285
- labelText="Labeltext for Single-SwitchButton (Checkbox)"
236
+ v-model="switchButtonCheckboxToggleSwitch"
237
+ labelText="Labeltext for Switch-Button without Switch-Label"
286
238
  :toggleSwitch="true"
287
239
  :status="formElementStatus"
288
240
  />
@@ -290,8 +242,8 @@
290
242
  type="checkbox"
291
243
  id="toggle-switch-checkbox"
292
244
  v-model="switchButtonCheckbox"
293
- :displayLabelInline="true"
294
- labelText="Labeltext for SwitchButton (Checkbox)"
245
+ labelText="Labeltext for Switch-Button with Switch-Label"
246
+ inputValue="checkbox1"
295
247
  onLabel="Label on"
296
248
  offLabel="Label off"
297
249
  :toggleSwitch="true"
@@ -301,7 +253,8 @@
301
253
  type="checkbox"
302
254
  id="toggle-switch-checkbox-colored"
303
255
  v-model="switchButtonCheckbox"
304
- labelText="Labeltext for SwitchButton (Checkbox, colored)"
256
+ inputValue="checkbox2"
257
+ labelText="Labeltext for Switch-Button (Checkbox, colored)"
305
258
  onLabel="Label on"
306
259
  offLabel="Label off"
307
260
  :colored="true"
@@ -312,25 +265,27 @@
312
265
  type="radio"
313
266
  name="radiogroup"
314
267
  id="toggle-switch-radio1"
315
- v-model="switchButtonCheckbox"
268
+ v-model="switchButtonRadio"
316
269
  onLabel="Label on"
317
270
  offLabel="Label off"
318
271
  :colored="true"
319
272
  :toggleSwitch="true"
320
273
  :status="formElementStatus"
321
274
  inputValue="radio1"
275
+ labelText="Labeltext for Switch-Button (Radio, colored) #1"
322
276
  />
323
277
  <CmdFormElement element="input"
324
278
  type="radio"
325
279
  name="radiogroup"
326
280
  id="toggle-switch-radio2"
327
- v-model="switchButtonCheckbox"
281
+ v-model="switchButtonRadio"
328
282
  onLabel="Label on"
329
283
  offLabel="Label off"
330
284
  :colored="true"
331
285
  :toggleSwitch="true"
332
286
  :status="formElementStatus"
333
287
  inputValue="radio2"
288
+ labelText="Labeltext for Switch-Button (Radio, colored) #2"
334
289
  />
335
290
  <!-- end toggle-switch-radio with switch-label (colored) -->
336
291
 
@@ -440,7 +395,7 @@
440
395
  v-model="textarea"
441
396
  :status="formElementStatus"/>
442
397
  <div class="label inline">
443
- <span>Label for native checkboxes:</span>
398
+ <span class="label-text">Label for native checkboxes:</span>
444
399
  <div class="flex-container no-flex">
445
400
  <CmdFormElement element="input"
446
401
  labelText="Label for checkbox with boolean"
@@ -477,12 +432,12 @@
477
432
  checkboxes with values: {{checkboxValues}}
478
433
  </p>
479
434
  <div class="label inline">
480
- <span>Label for Replaced Input-Type-Checkbox:</span>
435
+ <span class="label-text">Label for Replaced Input-Type-Checkbox:</span>
481
436
  <div class="flex-container no-flex">
482
437
  <CmdFormElement element="input"
483
438
  labelText="Label for replaced checkbox"
484
439
  type="checkbox"
485
- class="replace-input-type"
440
+ :replaceInputType="true"
486
441
  id="inputfield9"
487
442
  v-model="replacedCheckboxValue"
488
443
  inputValue="checkboxValue1"
@@ -492,13 +447,13 @@
492
447
  v-model="replacedCheckboxValue"
493
448
  inputValue="checkboxValue2"
494
449
  type="checkbox"
495
- class="replace-input-type"
450
+ :replaceInputType="true"
496
451
  id="inputfield10"
497
452
  :status="formElementStatus"/>
498
453
  </div>
499
454
  </div>
500
455
  <div class="label inline">
501
- <span>Label for native radiobuttons:</span>
456
+ <span class="label-text">Label for native radiobuttons:</span>
502
457
  <div class="flex-container no-flex">
503
458
  <CmdFormElement element="input"
504
459
  labelText="Label for native radiobutton"
@@ -522,12 +477,12 @@
522
477
  Radiobuttons with values: {{radiobuttonValue}}
523
478
  </p>
524
479
  <div class="label inline">
525
- <span>Label for Replaced Input-Type-Radio:</span>
480
+ <span class="label-text">Label for Replaced Input-Type-Radio:</span>
526
481
  <div class="flex-container no-flex">
527
482
  <CmdFormElement element="input"
528
483
  labelText="Label for replaced radiobutton"
529
484
  type="radio"
530
- class="replace-input-type"
485
+ :replaceInputType="true"
531
486
  id="inputfield13"
532
487
  name="replaced-radiogroup"
533
488
  inputValue="radiobuttonValue1"
@@ -536,7 +491,7 @@
536
491
  <CmdFormElement element="input"
537
492
  labelText="Label for replaced radiobutton"
538
493
  type="radio"
539
- class="replace-input-type"
494
+ :replaceInputType="true"
540
495
  id="inputfield14"
541
496
  name="replaced-radiogroup"
542
497
  inputValue="radiobuttonValue2"
@@ -544,14 +499,17 @@
544
499
  :status="formElementStatus"/>
545
500
  </div>
546
501
  </div>
547
- <CmdInputGroup labelText="Group label for radio group">
502
+ <CmdInputGroup
503
+ labelText="Group label for radio-group given by slot"
504
+ :useSlot="true"
505
+ >
548
506
  <CmdFormElement element="input"
549
507
  labelText="Label for radiobutton"
550
508
  type="radio"
551
509
  id="input-group-radiobutton"
552
510
  name="radiogroup2"
553
511
  inputValue="radiobuttonValue1"
554
- v-model="radiobuttonValue"
512
+ v-model="inputGroupValue1"
555
513
  :status="formElementStatus"/>
556
514
  <CmdFormElement element="input"
557
515
  labelText="Label for radiobutton"
@@ -559,31 +517,52 @@
559
517
  id="input-group-radiobutton"
560
518
  name="radiogroup2"
561
519
  inputValue="radiobuttonValue2"
562
- v-model="radiobuttonValue"
520
+ v-model="inputGroupValue1"
563
521
  :status="formElementStatus"/>
564
522
  </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
523
  <dl>
572
- <dt>Selected value:</dt>
524
+ <dt>Selected value(s):</dt>
573
525
  <dd>
574
- <output>{{ multipleSwitchCheckbox }}</output>
526
+ <output>{{ inputGroupValue1 }}</output>
575
527
  </dd>
576
528
  </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"/>
529
+ <CmdInputGroup
530
+ labelText="Grouplabel for radio-group given by property"
531
+ :inputElements="inputGroupRadiobuttons"
532
+ inputTypes="radio"
533
+ v-model="inputGroupValue2"
534
+ />
535
+ <dl>
536
+ <dt>Selected value(s):</dt>
537
+ <dd>
538
+ <output>{{ inputGroupValue2 }}</output>
539
+ </dd>
540
+ </dl>
541
+ <CmdInputGroup
542
+ labelText="Grouplabel for radio-group given by property styled as multiple-switch"
543
+ :inputElements="inputGroupRadiobuttons.map(item => ({...item, id: item.id + '-multi', name: item.name + '-multi'}))"
544
+ inputTypes="radio"
545
+ :multipleSwitch="true"
546
+ v-model="inputGroupValue3"
547
+ />
548
+ <dl>
549
+ <dt>Selected value(s):</dt>
550
+ <dd>
551
+ <output>{{ inputGroupValue3 }}</output>
552
+ </dd>
553
+ </dl>
554
+ <CmdInputGroup
555
+ labelText="Grouplabel for checkbox-group styled as multiple-switch (stretched horizontally)"
556
+ :inputElements="inputGroupCheckboxes"
557
+ inputTypes="checkbox"
558
+ :multipleSwitch="true"
559
+ v-model="inputGroupValue4"
560
+ :stretchHorizontally="true"
561
+ />
583
562
  <dl>
584
- <dt>Selected value:</dt>
563
+ <dt>Selected value(s):</dt>
585
564
  <dd>
586
- <output>{{ multipleSwitchRadio }}</output>
565
+ <output>{{ inputGroupValue4 }}</output>
587
566
  </dd>
588
567
  </dl>
589
568
  </fieldset><!-- end fieldset -->
@@ -715,7 +694,20 @@
715
694
  </div>
716
695
  </div>
717
696
  <h3>Box Site Search</h3>
718
- <CmdBoxSiteSearch :results="executeSearch()" @click="executeSearch($event)"/>
697
+ <CmdBoxSiteSearch
698
+ v-model:modelValueInput1="siteSearchInput1"
699
+ v-model:modelValueInput2="siteSearchInput2"
700
+ v-model:modelValueRadius="radius"
701
+ v-model:modelValueSearchFilters="filters"
702
+ @search="siteSearchOutput"
703
+ textLegend="Search"
704
+ :cmdFakeSelect="siteSearchFilters" />
705
+ <dl>
706
+ <dt>siteSearchInput1:</dt><dd>{{ siteSearchInput1 }}</dd>
707
+ <dt>siteSearchInput2:</dt><dd>{{ siteSearchInput2 }}</dd>
708
+ <dt>Radius:</dt><dd>{{ radius }}</dd>
709
+ <dt>Filters:</dt><dd>{{ filters }}</dd>
710
+ </dl>
719
711
  </CmdWidthLimitationWrapper>
720
712
  <!-- end boxes ------------------------------------------------------------------------------------------------------------------------------------------------------->
721
713
 
@@ -789,6 +781,21 @@
789
781
  <p>LoginData: {{loginData}}</p>
790
782
  </CmdWidthLimitationWrapper>
791
783
 
784
+ <!-- begin list-of-links ------------------------------------------------------------------------------------------------------------------------------------------------------->
785
+ <a id="section-list-of-links"></a>
786
+ <CmdWidthLimitationWrapper>
787
+ <h2 class="headline-demopage">List Of Links</h2>
788
+ <h3>Vertical</h3>
789
+ <CmdListOfLinks :links="listOfLinksData" />
790
+ <h3>Horizontal (aligned left)</h3>
791
+ <CmdListOfLinks orientation="horizontal" align="left" :links="listOfLinksData" />
792
+ <h3>Horizontal (aligned center)</h3>
793
+ <CmdListOfLinks orientation="horizontal" align="center" :links="listOfLinksData" />
794
+ <h3>Horizontal (aligned right)</h3>
795
+ <CmdListOfLinks orientation="horizontal" align="right" :links="listOfLinksData" />
796
+ </CmdWidthLimitationWrapper>
797
+ <!-- end list-of-links ------------------------------------------------------------------------------------------------------------------------------------------------------->
798
+
792
799
  <a id="section-main-navigation"></a>
793
800
  <CmdWidthLimitationWrapper>
794
801
  <h2 class="headline-demopage">Main Navigation</h2>
@@ -947,7 +954,7 @@
947
954
 
948
955
  <CmdWidthLimitationWrapper id="site-footer" inner-component="footer">
949
956
  <CmdSwitchLanguage :languages="languagesData" @click="doSomething"/>
950
- <CmdListOfLinks :links="footerNavigationData"
957
+ <CmdListOfLinks :links="listOfLinksData"
951
958
  :cmdCustomHeadline="{headlineText: 'List of links', headlineLevel: 6}"
952
959
  />
953
960
  <CmdOpeningHours :openingHours="openingHoursData"
@@ -997,12 +1004,10 @@ import fakeSelectCountriesData from '@/assets/data/fake-select-countries.json'
997
1004
  import fakeSelectFilterOptionsData from '@/assets/data/fake-select-filter-options.json'
998
1005
  import fakeSelectOptionsData from '@/assets/data/fake-select-options.json'
999
1006
  import fakeSelectOptionsWithIconsData from '@/assets/data/fake-select-options-with-icons.json'
1000
- import footerNavigationData from '@/assets/data/list-of-links.json'
1007
+ import listOfLinksData from '@/assets/data/list-of-links.json'
1001
1008
  import imageGalleryData from '@/assets/data/image-gallery.json'
1002
1009
  import languagesData from '@/assets/data/switch-language.json'
1003
1010
  import multistepsData from '@/assets/data/multistep-form-progress-bar.json'
1004
- import multipleSwitchCheckboxData from '@/assets/data/multipleswitch-checkbox.json'
1005
- import multipleSwitchRadioData from '@/assets/data/multipleswitch-radio.json'
1006
1011
  import navigationData from '@/assets/data/main-navigation.json'
1007
1012
  import openingHoursData from '@/assets/data/opening-hours.json'
1008
1013
  import selectOptionsData from '@/assets/data/select-options.json'
@@ -1036,7 +1041,6 @@ import CmdInputGroup from "./components/CmdInputGroup"
1036
1041
  import CmdLoginForm from "@/components/CmdLoginForm.vue"
1037
1042
  import CmdListOfLinks from "./components/CmdListOfLinks"
1038
1043
  import CmdMainNavigation from "@/components/CmdMainNavigation.vue"
1039
- import CmdMultipleSwitch from "@/components/CmdMultipleSwitch.vue"
1040
1044
  import CmdMultistepFormProgressBar from "@/components/CmdMultistepFormProgressBar.vue"
1041
1045
  import CmdOpeningHours from "@/components/CmdOpeningHours"
1042
1046
  import CmdPager from "@/components/CmdPager.vue"
@@ -1044,12 +1048,12 @@ import CmdProgressBar from "@/components/CmdProgressBar.vue"
1044
1048
  import CmdShareButtons from "@/components/CmdShareButtons.vue"
1045
1049
  import CmdSiteHeader from "./components/CmdSiteHeader"
1046
1050
  import CmdSlideshow from "@/components/CmdSlideshow.vue"
1047
- import CmdSwitchButton from "@/components/CmdSwitchButton.vue"
1048
1051
  import CmdSwitchLanguage from "@/components/CmdSwitchLanguage.vue"
1049
1052
  import CmdSystemMessage from "@/components/CmdSystemMessage.vue"
1050
1053
  import CmdTabs from "@/components/CmdTabs.vue"
1051
1054
  import CmdTable from "@/components/CmdTable.vue"
1052
1055
  import CmdThumbnailScroller from "@/components/CmdThumbnailScroller.vue"
1056
+ import CmdToggleDarkMode from "@/components/CmdToggleDarkMode.vue"
1053
1057
  import CmdTooltip from "@/components/CmdTooltip.vue"
1054
1058
  import CmdUploadForm from "@/components/CmdUploadForm.vue"
1055
1059
  import CmdWidthLimitationWrapper from "@/components/CmdWidthLimitationWrapper"
@@ -1084,19 +1088,18 @@ export default {
1084
1088
  CmdLoginForm,
1085
1089
  CmdMainNavigation,
1086
1090
  CmdMultistepFormProgressBar,
1087
- CmdMultipleSwitch,
1088
1091
  CmdOpeningHours,
1089
1092
  CmdPager,
1090
1093
  CmdProgressBar,
1091
1094
  CmdShareButtons,
1092
1095
  CmdSiteHeader,
1093
1096
  CmdSlideshow,
1094
- CmdSwitchButton,
1095
1097
  CmdSwitchLanguage,
1096
1098
  CmdSystemMessage,
1097
1099
  CmdTabs,
1098
1100
  CmdTable,
1099
1101
  CmdThumbnailScroller,
1102
+ CmdToggleDarkMode,
1100
1103
  CmdTooltip,
1101
1104
  CmdUploadForm,
1102
1105
  CmdWidthLimitationWrapper
@@ -1108,6 +1111,56 @@ export default {
1108
1111
  inputFieldPattern: "",
1109
1112
  inputSearch: "",
1110
1113
  textarea: "",
1114
+ inputGroupValue1: "radiobuttonValue1",
1115
+ inputGroupValue2: "website",
1116
+ inputGroupValue3: "email",
1117
+ inputGroupValue4: [],
1118
+ inputGroupRadiobuttons: [
1119
+ {
1120
+ labelText: "Website",
1121
+ id: "radio-id-1",
1122
+ name: "input-group-radio",
1123
+ iconClass: "icon-globe",
1124
+ value: "website"
1125
+ },
1126
+ {
1127
+ labelText: "E-Mail",
1128
+ id: "radio-id-2",
1129
+ name: "input-group-radio",
1130
+ iconClass: "icon-mail",
1131
+ value: "email"
1132
+ },
1133
+ {
1134
+ labelText: "Phone",
1135
+ id: "radio-id-3",
1136
+ name: "input-group-radio",
1137
+ iconClass: "icon-phone",
1138
+ value: "phone"
1139
+ }
1140
+ ],
1141
+ inputGroupCheckboxes: [
1142
+ {
1143
+ labelText: "Website",
1144
+ id: "checkbox-id-1",
1145
+ name: "input-group-checkbox",
1146
+ iconClass: "icon-globe",
1147
+ value: "website"
1148
+ },
1149
+ {
1150
+ labelText: "E-Mail",
1151
+ id: "checkbox-id-2",
1152
+ name: "input-group-checkbox",
1153
+ iconClass: "icon-mail",
1154
+ value: "email"
1155
+ },
1156
+ {
1157
+ labelText: "Phone",
1158
+ id: "checkbox-id-3",
1159
+ name: "input-group-checkbox",
1160
+ iconClass: "icon-phone",
1161
+ value: "phone"
1162
+ }
1163
+ ],
1111
1164
  inputNumber: "",
1112
1165
  inputDate: "",
1113
1166
  accordionGroupOpen: false,
@@ -1119,8 +1172,20 @@ export default {
1119
1172
  selectedColor: "",
1120
1173
  rangeValue: 50,
1121
1174
  loginData: {},
1175
+ siteSearchFilters: {
1176
+ show: true,
1177
+ selectData: fakeSelectFilterOptionsData,
1178
+ defaultOptionName: "Select filters:",
1179
+ labelText: "Filters:",
1180
+ type: "checkboxOptions"
1181
+ },
1122
1182
  formElementStatus: "",
1183
+ siteSearchInput1: "Doctor",
1184
+ siteSearchInput2: "New York",
1185
+ radius: 10,
1186
+ filters: ["2"],
1123
1187
  switchButtonRadio: "radio1",
1188
+ switchButtonCheckboxToggleSwitch: false,
1124
1189
  switchButtonCheckbox: ["checkbox1"],
1125
1190
  switchButtonCheckboxColored: false,
1126
1191
  inputUsername: "",
@@ -1133,8 +1198,6 @@ export default {
1133
1198
  replacedCheckboxValue: "checkboxValue1",
1134
1199
  radiobuttonValue: "radiobuttonValue1",
1135
1200
  replacedRadiobuttonValue: "radiobuttonValue1",
1136
- multipleSwitchCheckbox: ['b'],
1137
- multipleSwitchRadio: 'c',
1138
1201
  fancyBoxCookieDisclaimer: false,
1139
1202
  fakeSelectDefault: "2",
1140
1203
  fakeSelectDefaultWithIcons: "1",
@@ -1170,12 +1233,10 @@ export default {
1170
1233
  fakeSelectFilterOptionsData,
1171
1234
  fakeSelectOptionsData,
1172
1235
  fakeSelectOptionsWithIconsData,
1173
- footerNavigationData,
1236
+ listOfLinksData,
1174
1237
  imageGalleryData,
1175
1238
  languagesData,
1176
1239
  multistepsData,
1177
- multipleSwitchCheckboxData,
1178
- multipleSwitchRadioData,
1179
1240
  navigationData,
1180
1241
  openingHoursData,
1181
1242
  selectOptionsData,
@@ -1187,7 +1248,13 @@ export default {
1187
1248
  thumbnailScrollerData
1188
1249
  }
1189
1250
  },
1251
+ mounted() {
1252
+ document.querySelector('html').addEventListener('toggle-color-scheme', (event) => console.log('colorScheme:', event.detail))
1253
+ },
1190
1254
  methods: {
1255
+ siteSearchOutput(event) {
1256
+ console.log(event)
1257
+ },
1191
1258
  showError(event) {
1192
1259
  console.log("EventMessages", event.messages)
1193
1260
  alert("Error")
@@ -1232,8 +1299,9 @@ export default {
1232
1299
  <style lang="scss">
1233
1300
  .list-status {
1234
1301
  .active {
1235
- color: var(--default-color);
1302
+ color: var(--text-color);
1236
1303
  text-decoration: none;
1304
+ background: none;
1237
1305
  }
1238
1306
  }
1239
1307
  </style>