comand-component-library 3.1.71 → 3.1.74

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 (56) 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 +314 -189
  5. package/src/assets/data/cookie-disclaimer.json +7 -6
  6. package/src/assets/styles/global-styles.scss +10 -40
  7. package/src/components/CmdBox.vue +7 -5
  8. package/src/components/CmdCookieDisclaimer.vue +76 -8
  9. package/src/components/CmdFakeSelect.vue +40 -50
  10. package/src/components/CmdFormElement.vue +32 -41
  11. package/src/components/CmdInputGroup.vue +158 -12
  12. package/src/components/CmdListOfRequirements.vue +128 -0
  13. package/src/components/CmdMainNavigation.vue +2 -2
  14. package/src/components/CmdToggleDarkMode.vue +27 -10
  15. package/src/components/CmdTooltip.vue +1 -1
  16. package/src/documentation/generated/CmdAddressDataPropertyDescriptions.json +32 -0
  17. package/src/documentation/generated/CmdBackToTopButtonPropertyDescriptions.json +12 -0
  18. package/src/documentation/generated/CmdBankAccountDataPropertyDescriptions.json +34 -0
  19. package/src/documentation/generated/CmdBoxPropertyDescriptions.json +96 -0
  20. package/src/documentation/generated/CmdBoxSiteSearchPropertyDescriptions.json +79 -0
  21. package/src/documentation/generated/CmdBoxWrapperPropertyDescriptions.json +47 -0
  22. package/src/documentation/generated/CmdBreadcrumbsPropertyDescriptions.json +17 -0
  23. package/src/documentation/generated/CmdCompanyLogoPropertyDescriptions.json +27 -0
  24. package/src/documentation/generated/CmdCookieDisclaimerPropertyDescriptions.json +37 -0
  25. package/src/documentation/generated/CmdCustomHeadlinePropertyDescriptions.json +22 -0
  26. package/src/documentation/generated/CmdFakeSelectPropertyDescriptions.json +84 -0
  27. package/src/documentation/generated/CmdFancyBoxPropertyDescriptions.json +62 -0
  28. package/src/documentation/generated/CmdFormElementPropertyDescriptions.json +253 -0
  29. package/src/documentation/generated/CmdFormFiltersPropertyDescriptions.json +32 -0
  30. package/src/documentation/generated/CmdFormPropertyDescriptions.json +40 -0
  31. package/src/documentation/generated/CmdGoogleMapsPropertyDescriptions.json +7 -0
  32. package/src/documentation/generated/CmdImageGalleryPropertyDescriptions.json +22 -0
  33. package/src/documentation/generated/CmdImageZoomPropertyDescriptions.json +12 -0
  34. package/src/documentation/generated/CmdInputGroupPropertyDescriptions.json +122 -0
  35. package/src/documentation/generated/CmdListOfLinksPropertyDescriptions.json +60 -0
  36. package/src/documentation/generated/CmdListOfRequirementsPropertyDescriptions.json +22 -0
  37. package/src/documentation/generated/CmdLoginFormPropertyDescriptions.json +90 -0
  38. package/src/documentation/generated/CmdMainNavigationPropertyDescriptions.json +62 -0
  39. package/src/documentation/generated/CmdMultistepFormProgressBarPropertyDescriptions.json +17 -0
  40. package/src/documentation/generated/CmdOpeningHoursPropertyDescriptions.json +42 -0
  41. package/src/documentation/generated/CmdPagerPropertyDescriptions.json +37 -0
  42. package/src/documentation/generated/CmdProgressBarPropertyDescriptions.json +32 -0
  43. package/src/documentation/generated/CmdShareButtonsPropertyDescriptions.json +34 -0
  44. package/src/documentation/generated/CmdSiteHeaderPropertyDescriptions.json +27 -0
  45. package/src/documentation/generated/CmdSlideButtonPropertyDescriptions.json +25 -0
  46. package/src/documentation/generated/CmdSlideshowPropertyDescriptions.json +42 -0
  47. package/src/documentation/generated/CmdSwitchLanguagePropertyDescriptions.json +7 -0
  48. package/src/documentation/generated/CmdSystemMessagePropertyDescriptions.json +40 -0
  49. package/src/documentation/generated/CmdTablePropertyDescriptions.json +72 -0
  50. package/src/documentation/generated/CmdTabsPropertyDescriptions.json +27 -0
  51. package/src/documentation/generated/CmdThumbnailScrollerPropertyDescriptions.json +32 -0
  52. package/src/documentation/generated/CmdTooltipPropertyDescriptions.json +17 -0
  53. package/src/documentation/generated/CmdUploadFormPropertyDescriptions.json +175 -0
  54. package/src/documentation/generated/CmdWidthLimitationWrapperPropertyDescriptions.json +41 -0
  55. package/src/mixins/CmdCookieDisclaimer/DefaultMessageProperties.js +10 -0
  56. package/src/mixins/FieldValidation.js +1 -1
package/src/App.vue CHANGED
@@ -62,18 +62,18 @@
62
62
  <h3>Form elements status:</h3>
63
63
  <div class="flex-container">
64
64
  <ul class="list-status">
65
- <li><a href="#" @click.prevent="formElementStatus = ''" :class="{'active' : formElementStatus === ''}"
65
+ <li><a href="#" @click.prevent="setStatus('', false)" :class="{'active' : validationStatus === '' && disabledStatus === false}"
66
66
  id="status-default">Default</a></li>
67
- <li class="error"><a href="#" @click.prevent="formElementStatus = 'error'"
68
- :class="{'active' : formElementStatus === 'error'}" id="status-error">Error</a></li>
69
- <li><a href="#" @click.prevent="formElementStatus = 'warning'"
70
- :class="{'active' : formElementStatus === 'warning'}" id="status-warning">Warning</a></li>
71
- <li><a href="#" @click.prevent="formElementStatus = 'success'"
72
- :class="{'active' : formElementStatus === 'success'}" id="status-success">Success</a></li>
73
- <li><a href="#" @click.prevent="formElementStatus = 'info'"
74
- :class="{'active' : formElementStatus === 'info'}" id="status-info">Info</a></li>
75
- <li><a href="#" @click.prevent="formElementStatus = 'disabled'"
76
- :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>
77
77
  </ul>
78
78
  </div>
79
79
 
@@ -90,7 +90,8 @@
90
90
  <CmdFormElement labelText="Input (type text):"
91
91
  element="input"
92
92
  type="text"
93
- :status="formElementStatus"
93
+ :status="validationStatus"
94
+ :disabled="disabledStatus"
94
95
  placeholder="Type in text"
95
96
  tooltipText="This is a tooltip"
96
97
  v-bind="{useCustomTooltip: false}"
@@ -98,14 +99,16 @@
98
99
  <CmdFormElement labelText="Input for selectbox:"
99
100
  element="select"
100
101
  required="required"
101
- :status="formElementStatus"
102
+ :status="validationStatus"
103
+ :disabled="disabledStatus"
102
104
  v-model="selectedOption"
103
105
  :selectOptions="selectOptionsData"
104
106
  />
105
107
  <CmdFormElement labelText="Input for datalist:"
106
108
  element="input"
107
109
  type="text"
108
- :status="formElementStatus"
110
+ :status="validationStatus"
111
+ :disabled="disabledStatus"
109
112
  placeholder="Type in option"
110
113
  :datalist="datalist"
111
114
  tooltipText="This is a tooltip"
@@ -114,7 +117,8 @@
114
117
  <CmdFormElement labelText="Input (type search (without search-button)):"
115
118
  element="input"
116
119
  type="search"
117
- :status="formElementStatus"
120
+ :status="validationStatus"
121
+ :disabled="disabledStatus"
118
122
  :showSearchButton="false"
119
123
  placeholder="Search"
120
124
  tooltipText="This is a tooltip"
@@ -123,30 +127,156 @@
123
127
  <CmdFormElement labelText="Input (type search (with search-button)):"
124
128
  element="input"
125
129
  type="search"
126
- :status="formElementStatus"
130
+ :status="validationStatus"
131
+ :disabled="disabledStatus"
127
132
  placeholder="Search"
128
133
  tooltipText="This is a tooltip"
129
134
  v-bind="{useCustomTooltip: false}"
130
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/>
131
258
  <h2>Fake Selects</h2>
132
259
  <div class="flex-container">
133
260
  <!-- type === default: normal selectbox (with optional icons) -->
134
261
  <CmdFakeSelect labelText="Default selectbox:"
135
- :status="formElementStatus"
262
+ :status="validationStatus"
263
+ :disabled="disabledStatus"
136
264
  :selectData="fakeSelectOptionsData"
137
265
  v-model="fakeSelectDefault"
138
266
  required
139
267
  defaultOptionName="Select an option:"
140
268
  />
141
269
  <CmdFakeSelect labelText="Default selectbox with icons:"
142
- :status="formElementStatus"
270
+ :status="validationStatus"
271
+ :disabled="disabledStatus"
143
272
  :selectData="fakeSelectOptionsWithIconsData"
144
273
  v-model="fakeSelectDefaultWithIcons"
145
274
  defaultOptionName="Select an option:"
146
275
  />
147
276
  <!-- type === checkboxOptions: selectbox with checkboxes for each option -->
148
277
  <CmdFakeSelect labelText="Selectbox with checkboxes:"
149
- :status="formElementStatus"
278
+ :status="validationStatus"
279
+ :disabled="disabledStatus"
150
280
  :selectData="fakeSelectOptionsData"
151
281
  v-model="fakeSelectCheckbox"
152
282
  defaultOptionName="Options:"
@@ -156,7 +286,8 @@
156
286
  :useCustomTooltip="true"
157
287
  />
158
288
  <CmdFakeSelect labelText="Selectbox with filters:"
159
- :status="formElementStatus"
289
+ :status="validationStatus"
290
+ :disabled="disabledStatus"
160
291
  :selectData="fakeSelectFilterOptionsData"
161
292
  v-model="fakeSelectFilters"
162
293
  defaultOptionName="Filters:"
@@ -165,7 +296,8 @@
165
296
  :useCustomTooltip="true"
166
297
  />
167
298
  <CmdFakeSelect labelText="Selectbox with slot-content:"
168
- :status="formElementStatus"
299
+ :status="validationStatus"
300
+ :disabled="disabledStatus"
169
301
  type="content"
170
302
  defaultOptionName="HTML-Content:">
171
303
  <ul class="custom-fake-select-content">
@@ -179,14 +311,16 @@
179
311
  </ul>
180
312
  </CmdFakeSelect>
181
313
  <CmdFakeSelect labelText="Selectbox with country flags:"
182
- :status="formElementStatus"
314
+ :status="validationStatus"
315
+ :disabled="disabledStatus"
183
316
  :selectData="fakeSelectCountriesData"
184
317
  v-model="selectedCountry"
185
318
  defaultOptionName="Select country:"
186
319
  type="country"
187
320
  />
188
321
  <CmdFakeSelect labelText="Selectbox with colors:"
189
- :status="formElementStatus"
322
+ :status="validationStatus"
323
+ :disabled="disabledStatus"
190
324
  :selectData="fakeSelectColorsData"
191
325
  v-model="selectedColor"
192
326
  required="required"
@@ -194,6 +328,8 @@
194
328
  />
195
329
  </div>
196
330
 
331
+ <hr/>
332
+
197
333
  <!-- begin progress bar -->
198
334
  <h2>Progress Bar [native]</h2>
199
335
  <CmdProgressBar labelText="Progress Bar (with optional output):" id="progress-bar2" max="100"/>
@@ -201,7 +337,7 @@
201
337
 
202
338
  <!-- begin slider -->
203
339
  <h2>Slider [native]</h2>
204
- <div class="label" :class="formElementStatus">
340
+ <div class="label" :class="validationStatus">
205
341
  <span class="label-text">Single-Slider (with in- and output):</span>
206
342
  <span class="flex-container no-flex">
207
343
  <label for="range-value">
@@ -210,9 +346,9 @@
210
346
  </span>
211
347
  <input
212
348
  type="number"
213
- :class="formElementStatus"
349
+ :class="validationStatus"
214
350
  v-model="rangeValue"
215
- :disabled="formElementStatus === 'disabled'"
351
+ :disabled="disabledStatus"
216
352
  min="0"
217
353
  max="100"
218
354
  id="range-value"
@@ -225,10 +361,9 @@
225
361
  <input
226
362
  type="range"
227
363
  class="range-slider"
228
- :class="{'disabled': formElementStatus === 'disabled'}"
229
364
  id="range-slider"
230
365
  v-model="rangeValue"
231
- :disabled="formElementStatus === 'disabled'"
366
+ :disabled="disabledStatus"
232
367
  min="0"
233
368
  max="100"
234
369
  />
@@ -240,37 +375,40 @@
240
375
  <hr/>
241
376
 
242
377
  <!-- begin toggle-switch-radio with switch-label (colored) -->
243
- <h2>Toggle Switches with CmdFormElement</h2>
378
+ <h2>Toggle-Switches</h2>
244
379
  <CmdFormElement element="input"
245
380
  type="checkbox"
246
381
  id="toggle-switch-checkbox"
247
382
  v-model="switchButtonCheckboxToggleSwitch"
248
- labelText="Labeltext for Switch-Button without Switch-Label"
383
+ labelText="Labeltext for Toggle-Switch without Switch-Label"
249
384
  :toggleSwitch="true"
250
- :status="formElementStatus"
385
+ :status="validationStatus"
386
+ :disabled="disabledStatus"
251
387
  />
252
388
  <CmdFormElement element="input"
253
389
  type="checkbox"
254
390
  id="toggle-switch-checkbox"
255
391
  v-model="switchButtonCheckbox"
256
- labelText="Labeltext for Switch-Button with Switch-Label"
392
+ labelText="Labeltext for Toggle-Switch with Switch-Label"
257
393
  inputValue="checkbox1"
258
394
  onLabel="Label on"
259
395
  offLabel="Label off"
260
396
  :toggleSwitch="true"
261
- :status="formElementStatus"
397
+ :status="validationStatus"
398
+ :disabled="disabledStatus"
262
399
  />
263
400
  <CmdFormElement element="input"
264
401
  type="checkbox"
265
402
  id="toggle-switch-checkbox-colored"
266
403
  v-model="switchButtonCheckbox"
267
404
  inputValue="checkbox2"
268
- labelText="Labeltext for Switch-Button (Checkbox, colored)"
405
+ labelText="Labeltext for Toggle-Switch (Checkbox, colored)"
269
406
  onLabel="Label on"
270
407
  offLabel="Label off"
271
408
  :colored="true"
272
409
  :toggleSwitch="true"
273
- :status="formElementStatus"
410
+ :status="validationStatus"
411
+ :disabled="disabledStatus"
274
412
  />
275
413
  <CmdFormElement element="input"
276
414
  type="radio"
@@ -281,9 +419,10 @@
281
419
  offLabel="Label off"
282
420
  :colored="true"
283
421
  :toggleSwitch="true"
284
- :status="formElementStatus"
422
+ :status="validationStatus"
423
+ :disabled="disabledStatus"
285
424
  inputValue="radio1"
286
- labelText="Labeltext for Switch-Button (Radio, colored) #1"
425
+ labelText="Labeltext for Toggle-Switch (Radio, colored) #1"
287
426
  />
288
427
  <CmdFormElement element="input"
289
428
  type="radio"
@@ -294,117 +433,30 @@
294
433
  offLabel="Label off"
295
434
  :colored="true"
296
435
  :toggleSwitch="true"
297
- :status="formElementStatus"
436
+ :status="validationStatus"
437
+ :disabled="disabledStatus"
298
438
  inputValue="radio2"
299
- labelText="Labeltext for Switch-Button (Radio, colored) #2"
439
+ labelText="Labeltext for Toggle-Switch (Radio, colored) #2"
300
440
  />
301
441
  <!-- end toggle-switch-radio with switch-label (colored) -->
302
442
 
303
- <h2>Inputfields in Columns</h2>
304
- <div class="flex-container">
305
- <CmdFormElement element="input"
306
- labelText="Label for inputfield (with tooltip):"
307
- type="text"
308
- minlength="5"
309
- id="inputfield1"
310
- placeholder="This is placeholder text"
311
- v-model="inputField1"
312
- tooltipText="This is a tooltip!"
313
- :status="formElementStatus"
314
- />
315
- <CmdFormElement element="input"
316
- labelText="Label for inputfield (required):"
317
- type="text"
318
- required="required"
319
- minlength="5"
320
- id="inputfield-required"
321
- placeholder="This is placeholder text"
322
- v-model="inputFieldRequired"
323
- tooltipText="This is a tooltip!"
324
- :status="formElementStatus"
325
- />
326
- <CmdFormElement element="input"
327
- labelText="Label for inputfield (with pattern):"
328
- type="text"
329
- id="inputfield-pattern"
330
- placeholder="This is placeholder text"
331
- pattern="/\d/"
332
- v-model="inputFieldPattern"
333
- tooltipText="This is a tooltip!"
334
- :status="formElementStatus"
335
- />
336
- </div>
337
- <!-- begin inputfield in two columns -->
338
- <div class="flex-container">
339
- <CmdFormElement labelText="Label for inputfield (with icon):"
340
- element="input"
341
- type="text"
342
- id="inputfield-username"
343
- fieldIconClass="icon-user-profile"
344
- placeholder="Type in username"
345
- tooltipText="This is a tooltip!"
346
- maxlength="100"
347
- v-model="inputUsername"
348
- :status="formElementStatus"
349
- />
350
- <CmdFormElement element="input"
351
- labelText="Label for passwordfield:"
352
- type="password"
353
- minlength="8"
354
- maxlength="255"
355
- id="inputfield-password"
356
- fieldIconClass="icon-security-settings"
357
- placeholder="Type in password"
358
- tooltipText="This is a tooltip!"
359
- :customRequirements="customRequirements"
360
- v-model="inputPassword"
361
- :status="formElementStatus"/>
362
- </div>
363
- <!-- end inputfield in two columns -->
364
-
443
+ <!-- begin checkboxes and radiobuttons -->
365
444
  <CmdFormElement element="input"
366
- labelText="Label (inline) for inputfield (number):"
367
- :displayLabelInline="true"
368
- type="number"
369
- id="inputfield-number"
445
+ labelText="Label for (required) checkbox with boolean"
446
+ type="checkbox"
370
447
  required="required"
371
- min="0"
372
- max="9"
373
- v-model="inputNumber"
374
- :customRequirements="[customRequirements[2]]"
375
- :status="formElementStatus"/>
376
- <CmdFormElement element="input"
377
- labelText="Label (inline) for inputfield (date):"
378
- :displayLabelInline="true"
379
- type="date"
380
- id="inputfield-date"
381
- v-model="inputDate"
382
- :status="formElementStatus"/>
383
- <CmdFormElement element="input"
384
- labelText="Label (inline) for inputfield (search) without search-button:"
385
- :displayLabelInline="true"
386
- type="search"
387
- id="inputfield-search-without-searchbutton"
388
- placeholder="Keyword(s)"
389
- v-model="inputSearch"
390
- :showSearchButton="false"
391
- :status="formElementStatus"/>
392
- <CmdFormElement element="input"
393
- labelText="Label (inline) for inputfield (search):"
394
- :displayLabelInline="true"
395
- type="search"
396
- id="inputfield-search-with-searchbutton"
397
- placeholder="Keyword(s)"
398
- v-model="inputSearch"
399
- :status="formElementStatus"/>
400
- <CmdFormElement element="textarea"
401
- labelText="Label for textarea:"
402
- id="textarea"
403
- minlength="1"
404
- maxlength="100"
405
- placeholder="Type in your message"
406
- v-model="textarea"
407
- :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>
408
460
  <div class="label inline">
409
461
  <span class="label-text">Label for native checkboxes:</span>
410
462
  <div class="flex-container no-flex">
@@ -413,35 +465,30 @@
413
465
  type="checkbox"
414
466
  id="checkbox-with-boolean"
415
467
  v-model="checkboxValue"
416
- :status="formElementStatus"/>
468
+ :status="validationStatus"
469
+ :disabled="disabledStatus"
470
+ />
417
471
  <CmdFormElement element="input"
418
472
  labelText="Label for checkbox with value"
419
473
  v-model="checkboxValues"
420
474
  inputValue="checkboxValue1"
421
475
  type="checkbox"
422
476
  id="checkbox-with-value-1"
423
- :status="formElementStatus"/>
477
+ :status="validationStatus"
478
+ :disabled="disabledStatus"
479
+ />
424
480
  <CmdFormElement element="input"
425
481
  labelText="Label for checkbox with value"
426
482
  v-model="checkboxValues"
427
483
  inputValue="checkboxValue2"
428
484
  type="checkbox"
429
485
  id="checkbox-with-value-2"
430
- :status="formElementStatus"/>
486
+ :status="validationStatus"
487
+ :disabled="disabledStatus"
488
+ />
431
489
  </div>
432
490
  </div>
433
- <CmdFormElement element="input"
434
- labelText="Label for (required) checkbox with boolean"
435
- type="checkbox"
436
- required="required"
437
- id="checkbox-required-with-boolean"
438
- v-model="checkboxRequiredValue"
439
- :status="formElementStatus"/>
440
- <p>
441
- checkbox (required) with boolean: {{ checkboxRequiredValue }}<br/>
442
- checkbox with boolean: {{ checkboxValue }}<br/>
443
- checkboxes with values: {{ checkboxValues }}
444
- </p>
491
+ <h3>Checkboxes (replaced)</h3>
445
492
  <div class="label inline">
446
493
  <span class="label-text">Label for Replaced Input-Type-Checkbox:</span>
447
494
  <div class="flex-container no-flex">
@@ -452,7 +499,9 @@
452
499
  id="inputfield9"
453
500
  v-model="replacedCheckboxValue"
454
501
  inputValue="checkboxValue1"
455
- :status="formElementStatus"/>
502
+ :status="validationStatus"
503
+ :disabled="disabledStatus"
504
+ />
456
505
  <CmdFormElement element="input"
457
506
  labelText="Label for replaced checkbox"
458
507
  v-model="replacedCheckboxValue"
@@ -460,9 +509,12 @@
460
509
  type="checkbox"
461
510
  :replaceInputType="true"
462
511
  id="inputfield10"
463
- :status="formElementStatus"/>
512
+ :status="validationStatus"
513
+ :disabled="disabledStatus"
514
+ />
464
515
  </div>
465
516
  </div>
517
+ <h3>Radiobuttons [native]</h3>
466
518
  <div class="label inline">
467
519
  <span class="label-text">Label for native radiobuttons:</span>
468
520
  <div class="flex-container no-flex">
@@ -473,7 +525,9 @@
473
525
  name="radiogroup"
474
526
  inputValue="radiobuttonValue1"
475
527
  v-model="radiobuttonValue"
476
- :status="formElementStatus"/>
528
+ :status="validationStatus"
529
+ :disabled="disabledStatus"
530
+ />
477
531
  <CmdFormElement element="input"
478
532
  labelText="Label for native radiobutton"
479
533
  type="radio"
@@ -481,12 +535,15 @@
481
535
  name="radiogroup"
482
536
  inputValue="radiobuttonValue2"
483
537
  v-model="radiobuttonValue"
484
- :status="formElementStatus"/>
538
+ :status="validationStatus"
539
+ :disabled="disabledStatus"
540
+ />
485
541
  </div>
486
542
  </div>
487
543
  <p>
488
544
  Radiobuttons with values: {{ radiobuttonValue }}
489
545
  </p>
546
+ <h3>Radiobuttons (replaced)</h3>
490
547
  <div class="label inline">
491
548
  <span class="label-text">Label for Replaced Input-Type-Radio:</span>
492
549
  <div class="flex-container no-flex">
@@ -498,7 +555,9 @@
498
555
  name="replaced-radiogroup"
499
556
  inputValue="radiobuttonValue1"
500
557
  v-model="replacedRadiobuttonValue"
501
- :status="formElementStatus"/>
558
+ :status="validationStatus"
559
+ :disabled="disabledStatus"
560
+ />
502
561
  <CmdFormElement element="input"
503
562
  labelText="Label for replaced radiobutton"
504
563
  type="radio"
@@ -507,13 +566,20 @@
507
566
  name="replaced-radiogroup"
508
567
  inputValue="radiobuttonValue2"
509
568
  v-model="replacedRadiobuttonValue"
510
- :status="formElementStatus"/>
569
+ :status="validationStatus"
570
+ :disabled="disabledStatus"
571
+ />
511
572
  </div>
512
573
  </div>
574
+ <!-- end checkboxes and radiobuttons -->
575
+
576
+ <!-- begin input-groups -->
513
577
  <h2>Input-Groups</h2>
514
578
  <CmdInputGroup
515
- labelText="Group label for radio-group given by slot"
579
+ labelText="Group label for radio-group given by slot:"
516
580
  :useSlot="true"
581
+ :status="validationStatus"
582
+ :disabled="disabledStatus"
517
583
  >
518
584
  <CmdFormElement element="input"
519
585
  labelText="Label for radiobutton"
@@ -522,7 +588,9 @@
522
588
  name="radiogroup2"
523
589
  inputValue="radiobuttonValue1"
524
590
  v-model="inputGroupValue1"
525
- :status="formElementStatus"/>
591
+ :status="validationStatus"
592
+ :disabled="disabledStatus"
593
+ />
526
594
  <CmdFormElement element="input"
527
595
  labelText="Label for radiobutton"
528
596
  type="radio"
@@ -530,7 +598,9 @@
530
598
  name="radiogroup2"
531
599
  inputValue="radiobuttonValue2"
532
600
  v-model="inputGroupValue1"
533
- :status="formElementStatus"/>
601
+ :status="validationStatus"
602
+ :disabled="disabledStatus"
603
+ />
534
604
  </CmdInputGroup>
535
605
  <dl>
536
606
  <dt>Selected value(s):</dt>
@@ -539,10 +609,13 @@
539
609
  </dd>
540
610
  </dl>
541
611
  <CmdInputGroup
542
- labelText="Grouplabel for radio-group given by property"
612
+ labelText="Grouplabel for radio-group given by property:"
613
+ :required="true"
543
614
  :inputElements="inputGroupRadiobuttons"
544
615
  inputTypes="radio"
545
616
  v-model="inputGroupValue2"
617
+ :status="validationStatus"
618
+ :disabled="disabledStatus"
546
619
  />
547
620
  <dl>
548
621
  <dt>Selected value(s):</dt>
@@ -551,11 +624,13 @@
551
624
  </dd>
552
625
  </dl>
553
626
  <CmdInputGroup
554
- labelText="Grouplabel for radio-group styled as replaced-input-type"
627
+ labelText="Grouplabel for radio-group styled as replaced-input-type:"
555
628
  :inputElements="inputGroupRadiobuttons"
556
629
  inputTypes="radio"
557
630
  v-model="inputGroupValueReplaceInputTypeRadio"
558
631
  :replaceInputType="true"
632
+ :status="validationStatus"
633
+ :disabled="disabledStatus"
559
634
  />
560
635
  <dl>
561
636
  <dt>Selected value(s):</dt>
@@ -564,12 +639,14 @@
564
639
  </dd>
565
640
  </dl>
566
641
  <CmdInputGroup
567
- labelText="Grouplabel for checkbox-group styled as replaced-input-type"
642
+ labelText="Grouplabel for checkbox-group styled as replaced-input-type:"
568
643
  :inputElements="inputGroupRadiobuttons"
569
644
  inputTypes="checkbox"
570
645
  v-model="inputGroupValueReplaceInputTypeCheckbox"
571
646
  :replaceInputType="true"
572
647
  required="required"
648
+ :status="validationStatus"
649
+ :disabled="disabledStatus"
573
650
  />
574
651
  <dl>
575
652
  <dt>Selected value(s):</dt>
@@ -578,11 +655,45 @@
578
655
  </dd>
579
656
  </dl>
580
657
  <CmdInputGroup
581
- labelText="Grouplabel for radio-group given by property styled as multiple-switch"
658
+ labelText="Grouplabel for checkbox-group styled as toggle-switches:"
659
+ :inputElements="inputGroupRadiobuttons"
660
+ inputTypes="checkbox"
661
+ v-model="inputGroupValueToggleSwitchCheckbox"
662
+ :toggleSwitch="true"
663
+ required="required"
664
+ :status="validationStatus"
665
+ :disabled="disabledStatus"
666
+ />
667
+ <dl>
668
+ <dt>Selected value(s):</dt>
669
+ <dd>
670
+ <output>{{ inputGroupValueToggleSwitchCheckbox }}</output>
671
+ </dd>
672
+ </dl>
673
+ <CmdInputGroup
674
+ labelText="Grouplabel for radio-group styled as toggle-switches:"
675
+ :inputElements="inputGroupRadiobuttons"
676
+ inputTypes="radio"
677
+ v-model="inputGroupValueToggleSwitchRadio"
678
+ :toggleSwitch="true"
679
+ required="required"
680
+ :status="validationStatus"
681
+ :disabled="disabledStatus"
682
+ />
683
+ <dl>
684
+ <dt>Selected value(s):</dt>
685
+ <dd>
686
+ <output>{{ inputGroupValueToggleSwitchRadio }}</output>
687
+ </dd>
688
+ </dl>
689
+ <CmdInputGroup
690
+ labelText="Grouplabel for radio-group given by property styled as multiple-switch:"
582
691
  :inputElements="inputGroupRadiobuttons.map(item => ({...item, id: item.id + '-multi', name: item.name + '-multi'}))"
583
692
  inputTypes="radio"
584
693
  :multipleSwitch="true"
585
694
  v-model="inputGroupValue3"
695
+ :status="validationStatus"
696
+ :disabled="disabledStatus"
586
697
  />
587
698
  <dl>
588
699
  <dt>Selected value(s):</dt>
@@ -591,12 +702,14 @@
591
702
  </dd>
592
703
  </dl>
593
704
  <CmdInputGroup
594
- labelText="Grouplabel for checkbox-group styled as multiple-switch (stretched horizontally)"
705
+ labelText="Grouplabel for checkbox-group styled as multiple-switch (stretched horizontally):"
595
706
  :inputElements="inputGroupCheckboxes"
596
707
  inputTypes="checkbox"
597
708
  :multipleSwitch="true"
598
709
  v-model="inputGroupValue4"
599
710
  :stretchHorizontally="true"
711
+ :status="validationStatus"
712
+ :disabled="disabledStatus"
600
713
  />
601
714
  <dl>
602
715
  <dt>Selected value(s):</dt>
@@ -612,8 +725,9 @@
612
725
  type="submit"
613
726
  id="submitbutton"
614
727
  name="submitbutton"
615
- :status="formElementStatus"/>
616
- <button type="submit" :disabled="formElementStatus === 'disabled'">
728
+ :disabled="disabledStatus"
729
+ />
730
+ <button type="submit" :disabled="disabledStatus">
617
731
  <span class="icon-check"></span>
618
732
  <span>Native submit-button</span>
619
733
  </button>
@@ -641,16 +755,21 @@
641
755
  <h3>Content boxes</h3>
642
756
  <div class="grid-container-create-columns">
643
757
  <div class="grid-small-item">
644
- <CmdBox>
758
+ <CmdBox :useSlots="['header', 'body', 'footer']">
645
759
  <template v-slot:header>
646
760
  <h3>
647
761
  Headline for box
648
762
  </h3>
649
763
  </template>
650
764
  <template v-slot:body>
651
- <p class="padding">
652
- Box body with paragraph
653
- </p>
765
+ <div class="padding">
766
+ <p>
767
+ This content with paragraphs inside is placed inside the box-body.
768
+ </p>
769
+ <p>
770
+ <strong>Header, Content and Footer of this box are given by slots.</strong>
771
+ </p>
772
+ </div>
654
773
  </template>
655
774
  <template v-slot:footer>
656
775
  <p>
@@ -682,20 +801,15 @@
682
801
  </CmdBox>
683
802
  </div>
684
803
  <div class="grid-small-item">
685
- <CmdBox>
804
+ <CmdBox :useSlots="['header', 'body']" :collapsible="true" :stretchVertically="false">
686
805
  <template v-slot:header>
687
806
  <h3>
688
- Box with image
807
+ Collapsible box with image
689
808
  </h3>
690
809
  </template>
691
810
  <template v-slot:body>
692
811
  <img src="media/images/content-images/logo-business-edition-landscape.jpg" alt="Alternative text"/>
693
812
  </template>
694
- <template v-slot:footer>
695
- <p>
696
- footer content
697
- </p>
698
- </template>
699
813
  </CmdBox>
700
814
  </div>
701
815
  <div class="grid-small-item">
@@ -1019,7 +1133,9 @@
1019
1133
  <CmdCookieDisclaimer :cookieOptions="cookieDisclaimerData"
1020
1134
  buttonLabelAcceptAllCookies="Accept all cookies"
1021
1135
  buttonLabelAcceptCurrentSettings="Accept current settings"
1022
- @closeCookieDisclaimer="fancyBoxCookieDisclaimer = false"
1136
+ @closeCookieDisclaimer="closeCookieDisclaimer"
1137
+ v-model="acceptedCookies"
1138
+
1023
1139
  >
1024
1140
  <template #privacy-text>
1025
1141
  <p>
@@ -1150,7 +1266,10 @@ export default {
1150
1266
 
1151
1267
  data() {
1152
1268
  return {
1269
+ acceptedCookies: ["google-maps"],
1153
1270
  showTooltip: false,
1271
+ disabledStatus: undefined,
1272
+ validationStatus: "",
1154
1273
  inputFieldPattern: "",
1155
1274
  inputSearch: "",
1156
1275
  textarea: "",
@@ -1158,6 +1277,8 @@ export default {
1158
1277
  inputGroupValue2: "website",
1159
1278
  inputGroupValueReplaceInputTypeRadio: "phone",
1160
1279
  inputGroupValueReplaceInputTypeCheckbox: ["phone"],
1280
+ inputGroupValueToggleSwitchCheckbox: ["phone"],
1281
+ inputGroupValueToggleSwitchRadio: "phone",
1161
1282
  inputGroupValue3: "email",
1162
1283
  inputGroupValue4: [],
1163
1284
  inputGroupRadiobuttons: [
@@ -1224,7 +1345,6 @@ export default {
1224
1345
  labelText: "Filters:",
1225
1346
  type: "checkboxOptions"
1226
1347
  },
1227
- formElementStatus: "",
1228
1348
  siteSearchInput1: "Doctor",
1229
1349
  siteSearchInput2: "New York",
1230
1350
  radius: 10,
@@ -1293,10 +1413,15 @@ export default {
1293
1413
  thumbnailScrollerData
1294
1414
  }
1295
1415
  },
1296
- mounted() {
1297
- document.querySelector('html').addEventListener('toggle-color-scheme', (event) => console.log('colorScheme:', event.detail))
1298
- },
1299
1416
  methods: {
1417
+ closeCookieDisclaimer(event) {
1418
+ this.fancyBoxCookieDisclaimer = false
1419
+ alert(event.join(", "))
1420
+ },
1421
+ setStatus(validationStatus, disabledStatus) {
1422
+ this.validationStatus = validationStatus
1423
+ this.disabledStatus = disabledStatus
1424
+ },
1300
1425
  siteSearchOutput(event) {
1301
1426
  console.log(event)
1302
1427
  },