comand-component-library 3.1.71 → 3.1.74

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