comand-component-library 3.1.67 → 3.1.70

Sign up to get free protection for your applications and to get access to all the features.
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>