comand-component-library 3.1.69 → 3.1.72

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