comand-component-library 3.1.70 → 3.1.73

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 (59) 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 +356 -225
  5. package/src/assets/data/list-of-links.json +0 -1
  6. package/src/assets/styles/global-styles.scss +26 -0
  7. package/src/components/CmdBox.vue +12 -6
  8. package/src/components/CmdCompanyLogo.vue +3 -3
  9. package/src/components/CmdCookieDisclaimer.vue +20 -4
  10. package/src/components/CmdFakeSelect.vue +17 -12
  11. package/src/components/CmdFormElement.vue +85 -81
  12. package/src/components/CmdInputGroup.vue +31 -7
  13. package/src/components/CmdProgressBar.vue +2 -2
  14. package/src/components/CmdTable.vue +1 -1
  15. package/src/components/CmdToggleDarkMode.vue +30 -10
  16. package/src/components/CmdTooltip.vue +1 -1
  17. package/src/documentation/generated/CmdAddressDataPropertyDescriptions.json +32 -0
  18. package/src/documentation/generated/CmdBackToTopButtonPropertyDescriptions.json +12 -0
  19. package/src/documentation/generated/CmdBankAccountDataPropertyDescriptions.json +34 -0
  20. package/src/documentation/generated/CmdBoxPropertyDescriptions.json +96 -0
  21. package/src/documentation/generated/CmdBoxSiteSearchPropertyDescriptions.json +79 -0
  22. package/src/documentation/generated/CmdBoxWrapperPropertyDescriptions.json +47 -0
  23. package/src/documentation/generated/CmdBreadcrumbsPropertyDescriptions.json +17 -0
  24. package/src/documentation/generated/CmdCompanyLogoPropertyDescriptions.json +27 -0
  25. package/src/documentation/generated/CmdCookieDisclaimerPropertyDescriptions.json +32 -0
  26. package/src/documentation/generated/CmdCustomHeadlinePropertyDescriptions.json +22 -0
  27. package/src/documentation/generated/CmdFakeSelectPropertyDescriptions.json +84 -0
  28. package/src/documentation/generated/CmdFancyBoxPropertyDescriptions.json +62 -0
  29. package/src/documentation/generated/CmdFormElementPropertyDescriptions.json +253 -0
  30. package/src/documentation/generated/CmdFormFiltersPropertyDescriptions.json +32 -0
  31. package/src/documentation/generated/CmdFormPropertyDescriptions.json +40 -0
  32. package/src/documentation/generated/CmdGoogleMapsPropertyDescriptions.json +7 -0
  33. package/src/documentation/generated/CmdImageGalleryPropertyDescriptions.json +22 -0
  34. package/src/documentation/generated/CmdImageZoomPropertyDescriptions.json +12 -0
  35. package/src/documentation/generated/CmdInputGroupPropertyDescriptions.json +86 -0
  36. package/src/documentation/generated/CmdListOfLinksPropertyDescriptions.json +60 -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/index.js +1 -1
  56. package/src/mixins/CmdFormElement/DefaultMessageProperties.js +1 -1
  57. package/src/mixins/FieldValidation.js +1 -1
  58. package/src/mixins/GlobalDefaultMessageProperties.js +1 -2
  59. package/src/mixins/I18n.js +12 -2
package/src/App.vue CHANGED
@@ -62,35 +62,36 @@
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
 
80
80
  <!-- begin cmd-form-filters -->
81
- <CmdFormFilters v-model="fakeSelectFilters" :selectedOptionsName="getOptionName" />
81
+ <CmdFormFilters v-model="fakeSelectFilters" :selectedOptionsName="getOptionName"/>
82
82
  <!-- end cmd-form-filters -->
83
83
 
84
84
  <CmdForm :use-fieldset="false" id="advanced-form-elements" novalidate="novalidate">
85
85
  <fieldset class="grid-container-create-columns">
86
86
  <legend>Legend</legend>
87
87
  <h2>Form Element-Component</h2>
88
- <CmdToggleDarkMode :showLabel="true" />
88
+ <CmdToggleDarkMode :showLabel="true"/>
89
89
  <div class="flex-container">
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"
136
- :selectData="fakeSelectOptionsData"
137
- v-model="fakeSelectDefault"
138
- required
139
- defaultOptionName="Select an option:"
262
+ :status="validationStatus"
263
+ :disabled="disabledStatus"
264
+ :selectData="fakeSelectOptionsData"
265
+ v-model="fakeSelectDefault"
266
+ required
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,65 +337,78 @@
201
337
 
202
338
  <!-- begin slider -->
203
339
  <h2>Slider [native]</h2>
204
- <label for="range-slider" :class="formElementStatus">
205
- <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>
206
342
  <span class="flex-container no-flex">
207
- <input
208
- type="number"
209
- :class="formElementStatus"
210
- v-model="rangeValue"
211
- :disabled="formElementStatus === 'disabled'"
212
- min="0"
213
- max="100"
214
- />
215
- <input
216
- type="range"
217
- class="range-slider"
218
- :class="{'disabled': formElementStatus === 'disabled'}"
219
- id="range-slider"
220
- v-model="rangeValue"
221
- :disabled="formElementStatus === 'disabled'"
222
- min="0"
223
- max="100"
224
- />
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>
225
371
  </span>
226
- </label>
372
+ </div>
227
373
  <!-- end slider -->
228
374
 
229
375
  <hr/>
230
376
 
231
377
  <!-- begin toggle-switch-radio with switch-label (colored) -->
232
- <h2>Toggle Switches with CmdFormElement</h2>
378
+ <h2>Toggle-Switches</h2>
233
379
  <CmdFormElement element="input"
234
380
  type="checkbox"
235
381
  id="toggle-switch-checkbox"
236
382
  v-model="switchButtonCheckboxToggleSwitch"
237
- labelText="Labeltext for Switch-Button without Switch-Label"
383
+ labelText="Labeltext for Toggle-Switch without Switch-Label"
238
384
  :toggleSwitch="true"
239
- :status="formElementStatus"
385
+ :status="validationStatus"
386
+ :disabled="disabledStatus"
240
387
  />
241
388
  <CmdFormElement element="input"
242
389
  type="checkbox"
243
390
  id="toggle-switch-checkbox"
244
391
  v-model="switchButtonCheckbox"
245
- labelText="Labeltext for Switch-Button with Switch-Label"
392
+ labelText="Labeltext for Toggle-Switch with Switch-Label"
246
393
  inputValue="checkbox1"
247
394
  onLabel="Label on"
248
395
  offLabel="Label off"
249
396
  :toggleSwitch="true"
250
- :status="formElementStatus"
397
+ :status="validationStatus"
398
+ :disabled="disabledStatus"
251
399
  />
252
400
  <CmdFormElement element="input"
253
401
  type="checkbox"
254
402
  id="toggle-switch-checkbox-colored"
255
403
  v-model="switchButtonCheckbox"
256
404
  inputValue="checkbox2"
257
- labelText="Labeltext for Switch-Button (Checkbox, colored)"
405
+ labelText="Labeltext for Toggle-Switch (Checkbox, colored)"
258
406
  onLabel="Label on"
259
407
  offLabel="Label off"
260
408
  :colored="true"
261
409
  :toggleSwitch="true"
262
- :status="formElementStatus"
410
+ :status="validationStatus"
411
+ :disabled="disabledStatus"
263
412
  />
264
413
  <CmdFormElement element="input"
265
414
  type="radio"
@@ -270,9 +419,10 @@
270
419
  offLabel="Label off"
271
420
  :colored="true"
272
421
  :toggleSwitch="true"
273
- :status="formElementStatus"
422
+ :status="validationStatus"
423
+ :disabled="disabledStatus"
274
424
  inputValue="radio1"
275
- labelText="Labeltext for Switch-Button (Radio, colored) #1"
425
+ labelText="Labeltext for Toggle-Switch (Radio, colored) #1"
276
426
  />
277
427
  <CmdFormElement element="input"
278
428
  type="radio"
@@ -283,117 +433,30 @@
283
433
  offLabel="Label off"
284
434
  :colored="true"
285
435
  :toggleSwitch="true"
286
- :status="formElementStatus"
436
+ :status="validationStatus"
437
+ :disabled="disabledStatus"
287
438
  inputValue="radio2"
288
- labelText="Labeltext for Switch-Button (Radio, colored) #2"
439
+ labelText="Labeltext for Toggle-Switch (Radio, colored) #2"
289
440
  />
290
441
  <!-- end toggle-switch-radio with switch-label (colored) -->
291
442
 
292
- <h2>Inputfields in Columns</h2>
293
- <div class="flex-container">
294
- <CmdFormElement element="input"
295
- labelText="Label for inputfield (with tooltip):"
296
- type="text"
297
- minlength="5"
298
- id="inputfield1"
299
- placeholder="This is placeholder text"
300
- v-model="inputField1"
301
- tooltipText="This is a tooltip!"
302
- :status="formElementStatus"
303
- />
304
- <CmdFormElement element="input"
305
- labelText="Label for inputfield (required):"
306
- type="text"
307
- required="required"
308
- minlength="5"
309
- id="inputfield-required"
310
- placeholder="This is placeholder text"
311
- v-model="inputFieldRequired"
312
- tooltipText="This is a tooltip!"
313
- :status="formElementStatus"
314
- />
315
- <CmdFormElement element="input"
316
- labelText="Label for inputfield (with pattern):"
317
- type="text"
318
- id="inputfield-pattern"
319
- placeholder="This is placeholder text"
320
- pattern="/\d/"
321
- v-model="inputFieldPattern"
322
- tooltipText="This is a tooltip!"
323
- :status="formElementStatus"
324
- />
325
- </div>
326
- <!-- begin inputfield in two columns -->
327
- <div class="flex-container">
328
- <CmdFormElement labelText="Label for inputfield (with icon):"
329
- element="input"
330
- type="text"
331
- id="inputfield-username"
332
- fieldIconClass="icon-user-profile"
333
- placeholder="Type in username"
334
- tooltipText="This is a tooltip!"
335
- maxlength="100"
336
- v-model="inputUsername"
337
- :status="formElementStatus"
338
- />
339
- <CmdFormElement element="input"
340
- labelText="Label for passwordfield:"
341
- type="password"
342
- minlength="8"
343
- maxlength="255"
344
- id="inputfield-password"
345
- fieldIconClass="icon-security-settings"
346
- placeholder="Type in password"
347
- tooltipText="This is a tooltip!"
348
- :customRequirements="customRequirements"
349
- v-model="inputPassword"
350
- :status="formElementStatus"/>
351
- </div>
352
- <!-- end inputfield in two columns -->
353
-
443
+ <!-- begin checkboxes and radiobuttons -->
354
444
  <CmdFormElement element="input"
355
- labelText="Label (inline) for inputfield (number):"
356
- :displayLabelInline="true"
357
- type="number"
358
- id="inputfield-number"
445
+ labelText="Label for (required) checkbox with boolean"
446
+ type="checkbox"
359
447
  required="required"
360
- min="0"
361
- max="9"
362
- v-model="inputNumber"
363
- :customRequirements="[customRequirements[2]]"
364
- :status="formElementStatus"/>
365
- <CmdFormElement element="input"
366
- labelText="Label (inline) for inputfield (date):"
367
- :displayLabelInline="true"
368
- type="date"
369
- id="inputfield-date"
370
- v-model="inputDate"
371
- :status="formElementStatus"/>
372
- <CmdFormElement element="input"
373
- labelText="Label (inline) for inputfield (search) without search-button:"
374
- :displayLabelInline="true"
375
- type="search"
376
- id="inputfield-search-without-searchbutton"
377
- placeholder="Keyword(s)"
378
- v-model="inputSearch"
379
- :showSearchButton="false"
380
- :status="formElementStatus"/>
381
- <CmdFormElement element="input"
382
- labelText="Label (inline) for inputfield (search):"
383
- :displayLabelInline="true"
384
- type="search"
385
- id="inputfield-search-with-searchbutton"
386
- placeholder="Keyword(s)"
387
- v-model="inputSearch"
388
- :status="formElementStatus"/>
389
- <CmdFormElement element="textarea"
390
- labelText="Label for textarea:"
391
- id="textarea"
392
- minlength="1"
393
- maxlength="100"
394
- placeholder="Type in your message"
395
- v-model="textarea"
396
- :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>
397
460
  <div class="label inline">
398
461
  <span class="label-text">Label for native checkboxes:</span>
399
462
  <div class="flex-container no-flex">
@@ -402,35 +465,30 @@
402
465
  type="checkbox"
403
466
  id="checkbox-with-boolean"
404
467
  v-model="checkboxValue"
405
- :status="formElementStatus"/>
468
+ :status="validationStatus"
469
+ :disabled="disabledStatus"
470
+ />
406
471
  <CmdFormElement element="input"
407
472
  labelText="Label for checkbox with value"
408
473
  v-model="checkboxValues"
409
474
  inputValue="checkboxValue1"
410
475
  type="checkbox"
411
476
  id="checkbox-with-value-1"
412
- :status="formElementStatus"/>
477
+ :status="validationStatus"
478
+ :disabled="disabledStatus"
479
+ />
413
480
  <CmdFormElement element="input"
414
481
  labelText="Label for checkbox with value"
415
482
  v-model="checkboxValues"
416
483
  inputValue="checkboxValue2"
417
484
  type="checkbox"
418
485
  id="checkbox-with-value-2"
419
- :status="formElementStatus"/>
486
+ :status="validationStatus"
487
+ :disabled="disabledStatus"
488
+ />
420
489
  </div>
421
490
  </div>
422
- <CmdFormElement element="input"
423
- labelText="Label for (required) checkbox with boolean"
424
- type="checkbox"
425
- required="required"
426
- id="checkbox-required-with-boolean"
427
- v-model="checkboxRequiredValue"
428
- :status="formElementStatus"/>
429
- <p>
430
- checkbox (required) with boolean: {{checkboxRequiredValue}}<br />
431
- checkbox with boolean: {{checkboxValue}}<br />
432
- checkboxes with values: {{checkboxValues}}
433
- </p>
491
+ <h3>Checkboxes (replaced)</h3>
434
492
  <div class="label inline">
435
493
  <span class="label-text">Label for Replaced Input-Type-Checkbox:</span>
436
494
  <div class="flex-container no-flex">
@@ -441,7 +499,9 @@
441
499
  id="inputfield9"
442
500
  v-model="replacedCheckboxValue"
443
501
  inputValue="checkboxValue1"
444
- :status="formElementStatus"/>
502
+ :status="validationStatus"
503
+ :disabled="disabledStatus"
504
+ />
445
505
  <CmdFormElement element="input"
446
506
  labelText="Label for replaced checkbox"
447
507
  v-model="replacedCheckboxValue"
@@ -449,9 +509,12 @@
449
509
  type="checkbox"
450
510
  :replaceInputType="true"
451
511
  id="inputfield10"
452
- :status="formElementStatus"/>
512
+ :status="validationStatus"
513
+ :disabled="disabledStatus"
514
+ />
453
515
  </div>
454
516
  </div>
517
+ <h3>Radiobuttons [native]</h3>
455
518
  <div class="label inline">
456
519
  <span class="label-text">Label for native radiobuttons:</span>
457
520
  <div class="flex-container no-flex">
@@ -462,7 +525,9 @@
462
525
  name="radiogroup"
463
526
  inputValue="radiobuttonValue1"
464
527
  v-model="radiobuttonValue"
465
- :status="formElementStatus"/>
528
+ :status="validationStatus"
529
+ :disabled="disabledStatus"
530
+ />
466
531
  <CmdFormElement element="input"
467
532
  labelText="Label for native radiobutton"
468
533
  type="radio"
@@ -470,12 +535,15 @@
470
535
  name="radiogroup"
471
536
  inputValue="radiobuttonValue2"
472
537
  v-model="radiobuttonValue"
473
- :status="formElementStatus"/>
538
+ :status="validationStatus"
539
+ :disabled="disabledStatus"
540
+ />
474
541
  </div>
475
542
  </div>
476
543
  <p>
477
- Radiobuttons with values: {{radiobuttonValue}}
544
+ Radiobuttons with values: {{ radiobuttonValue }}
478
545
  </p>
546
+ <h3>Radiobuttons (replaced)</h3>
479
547
  <div class="label inline">
480
548
  <span class="label-text">Label for Replaced Input-Type-Radio:</span>
481
549
  <div class="flex-container no-flex">
@@ -487,7 +555,9 @@
487
555
  name="replaced-radiogroup"
488
556
  inputValue="radiobuttonValue1"
489
557
  v-model="replacedRadiobuttonValue"
490
- :status="formElementStatus"/>
558
+ :status="validationStatus"
559
+ :disabled="disabledStatus"
560
+ />
491
561
  <CmdFormElement element="input"
492
562
  labelText="Label for replaced radiobutton"
493
563
  type="radio"
@@ -496,12 +566,20 @@
496
566
  name="replaced-radiogroup"
497
567
  inputValue="radiobuttonValue2"
498
568
  v-model="replacedRadiobuttonValue"
499
- :status="formElementStatus"/>
569
+ :status="validationStatus"
570
+ :disabled="disabledStatus"
571
+ />
500
572
  </div>
501
573
  </div>
574
+ <!-- end checkboxes and radiobuttons -->
575
+
576
+ <!-- begin input-groups -->
577
+ <h2>Input-Groups</h2>
502
578
  <CmdInputGroup
503
579
  labelText="Group label for radio-group given by slot"
504
580
  :useSlot="true"
581
+ :status="validationStatus"
582
+ :disabled="disabledStatus"
505
583
  >
506
584
  <CmdFormElement element="input"
507
585
  labelText="Label for radiobutton"
@@ -510,7 +588,9 @@
510
588
  name="radiogroup2"
511
589
  inputValue="radiobuttonValue1"
512
590
  v-model="inputGroupValue1"
513
- :status="formElementStatus"/>
591
+ :status="validationStatus"
592
+ :disabled="disabledStatus"
593
+ />
514
594
  <CmdFormElement element="input"
515
595
  labelText="Label for radiobutton"
516
596
  type="radio"
@@ -518,7 +598,9 @@
518
598
  name="radiogroup2"
519
599
  inputValue="radiobuttonValue2"
520
600
  v-model="inputGroupValue1"
521
- :status="formElementStatus"/>
601
+ :status="validationStatus"
602
+ :disabled="disabledStatus"
603
+ />
522
604
  </CmdInputGroup>
523
605
  <dl>
524
606
  <dt>Selected value(s):</dt>
@@ -531,6 +613,8 @@
531
613
  :inputElements="inputGroupRadiobuttons"
532
614
  inputTypes="radio"
533
615
  v-model="inputGroupValue2"
616
+ :status="validationStatus"
617
+ :disabled="disabledStatus"
534
618
  />
535
619
  <dl>
536
620
  <dt>Selected value(s):</dt>
@@ -539,11 +623,44 @@
539
623
  </dd>
540
624
  </dl>
541
625
  <CmdInputGroup
542
- labelText="Grouplabel for radio-group given by property styled as multiple-switch"
543
- :inputElements="inputGroupRadiobuttons.map(item => ({...item, id: item.id + '-multi', name: item.name + '-multi'}))"
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'}))"
544
659
  inputTypes="radio"
545
660
  :multipleSwitch="true"
546
661
  v-model="inputGroupValue3"
662
+ :status="validationStatus"
663
+ :disabled="disabledStatus"
547
664
  />
548
665
  <dl>
549
666
  <dt>Selected value(s):</dt>
@@ -558,6 +675,8 @@
558
675
  :multipleSwitch="true"
559
676
  v-model="inputGroupValue4"
560
677
  :stretchHorizontally="true"
678
+ :status="validationStatus"
679
+ :disabled="disabledStatus"
561
680
  />
562
681
  <dl>
563
682
  <dt>Selected value(s):</dt>
@@ -573,13 +692,14 @@
573
692
  type="submit"
574
693
  id="submitbutton"
575
694
  name="submitbutton"
576
- :status="formElementStatus"/>
577
- <button type="submit" :disabled="formElementStatus === 'disabled'">
695
+ :disabled="disabledStatus"
696
+ />
697
+ <button type="submit" :disabled="disabledStatus">
578
698
  <span class="icon-check"></span>
579
699
  <span>Native submit-button</span>
580
700
  </button>
581
701
  </div>
582
- </CmdForm>
702
+ </CmdForm>
583
703
  </CmdWidthLimitationWrapper>
584
704
  <!-- end advanced form elements ----------------------------------------------------------------------------------------------------------------------------------------------------->
585
705
 
@@ -591,7 +711,7 @@
591
711
  <a id="section-bank-account-data"></a>
592
712
  <CmdWidthLimitationWrapper>
593
713
  <h2 class="headline-demopage">Bank Account Data</h2>
594
- <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"/>
595
715
  </CmdWidthLimitationWrapper>
596
716
  <!-- end bank account data ------------------------------------------------------------------------------------------------------------------------------------------------------->
597
717
 
@@ -602,16 +722,21 @@
602
722
  <h3>Content boxes</h3>
603
723
  <div class="grid-container-create-columns">
604
724
  <div class="grid-small-item">
605
- <CmdBox>
725
+ <CmdBox :useSlots="['header', 'body', 'footer']">
606
726
  <template v-slot:header>
607
727
  <h3>
608
728
  Headline for box
609
729
  </h3>
610
730
  </template>
611
731
  <template v-slot:body>
612
- <p class="padding">
613
- Box body with paragraph
614
- </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>
615
740
  </template>
616
741
  <template v-slot:footer>
617
742
  <p>
@@ -643,20 +768,15 @@
643
768
  </CmdBox>
644
769
  </div>
645
770
  <div class="grid-small-item">
646
- <CmdBox>
771
+ <CmdBox :useSlots="['header', 'body']" :collapsible="true" :stretchVertically="false">
647
772
  <template v-slot:header>
648
773
  <h3>
649
- Box with image
774
+ Collapsible box with image
650
775
  </h3>
651
776
  </template>
652
777
  <template v-slot:body>
653
778
  <img src="media/images/content-images/logo-business-edition-landscape.jpg" alt="Alternative text"/>
654
779
  </template>
655
- <template v-slot:footer>
656
- <p>
657
- footer content
658
- </p>
659
- </template>
660
780
  </CmdBox>
661
781
  </div>
662
782
  <div class="grid-small-item">
@@ -684,13 +804,13 @@
684
804
  <h3>Product boxes</h3>
685
805
  <div class="grid-container-create-columns">
686
806
  <div class="grid-small-item" v-for="(product, index) in boxProductData" :key="index">
687
- <CmdBox boxType="product" :product="product" :cmdCustomHeadline="{headlineLevel: 4}" />
807
+ <CmdBox boxType="product" :product="product" :cmdCustomHeadline="{headlineLevel: 4}"/>
688
808
  </div>
689
809
  </div>
690
810
  <h3>User boxes</h3>
691
811
  <div class="grid-container-create-columns">
692
812
  <div class="grid-small-item" v-for="(user, index) in boxUserData" :key="index">
693
- <CmdBox boxType="user" :user="user" :cmdCustomHeadline="{headlineLevel: 4}" />
813
+ <CmdBox boxType="user" :user="user" :cmdCustomHeadline="{headlineLevel: 4}"/>
694
814
  </div>
695
815
  </div>
696
816
  <h3>Box Site Search</h3>
@@ -701,12 +821,16 @@
701
821
  v-model:modelValueSearchFilters="filters"
702
822
  @search="siteSearchOutput"
703
823
  textLegend="Search"
704
- :cmdFakeSelect="siteSearchFilters" />
824
+ :cmdFakeSelect="siteSearchFilters"/>
705
825
  <dl>
706
- <dt>siteSearchInput1:</dt><dd>{{ siteSearchInput1 }}</dd>
707
- <dt>siteSearchInput2:</dt><dd>{{ siteSearchInput2 }}</dd>
708
- <dt>Radius:</dt><dd>{{ radius }}</dd>
709
- <dt>Filters:</dt><dd>{{ filters }}</dd>
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>
710
834
  </dl>
711
835
  </CmdWidthLimitationWrapper>
712
836
  <!-- end boxes ------------------------------------------------------------------------------------------------------------------------------------------------------->
@@ -777,8 +901,8 @@
777
901
  <a id="section-login-form"></a>
778
902
  <CmdWidthLimitationWrapper>
779
903
  <h2 class="headline-demopage">Login Form</h2>
780
- <CmdLoginForm v-model="loginData" v-focus />
781
- <p>LoginData: {{loginData}}</p>
904
+ <CmdLoginForm v-model="loginData" v-focus/>
905
+ <p>LoginData: {{ loginData }}</p>
782
906
  </CmdWidthLimitationWrapper>
783
907
 
784
908
  <!-- begin list-of-links ------------------------------------------------------------------------------------------------------------------------------------------------------->
@@ -786,13 +910,13 @@
786
910
  <CmdWidthLimitationWrapper>
787
911
  <h2 class="headline-demopage">List Of Links</h2>
788
912
  <h3>Vertical</h3>
789
- <CmdListOfLinks :links="listOfLinksData" />
913
+ <CmdListOfLinks :links="listOfLinksData"/>
790
914
  <h3>Horizontal (aligned left)</h3>
791
- <CmdListOfLinks orientation="horizontal" align="left" :links="listOfLinksData" />
915
+ <CmdListOfLinks orientation="horizontal" align="left" :links="listOfLinksData"/>
792
916
  <h3>Horizontal (aligned center)</h3>
793
- <CmdListOfLinks orientation="horizontal" align="center" :links="listOfLinksData" />
917
+ <CmdListOfLinks orientation="horizontal" align="center" :links="listOfLinksData"/>
794
918
  <h3>Horizontal (aligned right)</h3>
795
- <CmdListOfLinks orientation="horizontal" align="right" :links="listOfLinksData" />
919
+ <CmdListOfLinks orientation="horizontal" align="right" :links="listOfLinksData"/>
796
920
  </CmdWidthLimitationWrapper>
797
921
  <!-- end list-of-links ------------------------------------------------------------------------------------------------------------------------------------------------------->
798
922
 
@@ -876,9 +1000,9 @@
876
1000
  <CmdWidthLimitationWrapper>
877
1001
  <h2 class="headline-demopage">Tables</h2>
878
1002
  <h3>Table as wide as its content (with caption)</h3>
879
- <CmdTable :collapsible="true" :fullWidthOnDefault="false" :userCanToggleWidth="true" :table-data="tableDataSmall"/>
1003
+ <CmdTable :collapsible="true" :fullWidthOnDefault="false" :userCanToggleWidth="true" :table-data="tableDataSmall"/>
880
1004
  <h3>Table as wide as its content (without caption)</h3>
881
- <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"/>
882
1006
  <h3>Table as wide as possible</h3>
883
1007
  <CmdTable :collapsible="true" :fullWidthOnDefault="false" :userCanToggleWidth="true" :table-data="tableDataLarge"/>
884
1008
  </CmdWidthLimitationWrapper>
@@ -911,14 +1035,14 @@
911
1035
  <a id="section-thumbnail-scroller"></a>
912
1036
  <CmdWidthLimitationWrapper>
913
1037
  <h2 class="headline-demopage">Thumbnail-Scroller</h2>
914
- <CmdThumbnailScroller :thumbnail-scroller-items="thumbnailScrollerData" />
1038
+ <CmdThumbnailScroller :thumbnail-scroller-items="thumbnailScrollerData"/>
915
1039
  </CmdWidthLimitationWrapper>
916
1040
 
917
1041
  <a id="section-tooltip"></a>
918
1042
  <CmdWidthLimitationWrapper>
919
1043
  <h2 class="headline-demopage">Tooltip</h2>
920
1044
  <p>
921
- <a href="#" @click.prevent id="hoverme">Hover me!</a><br />
1045
+ <a href="#" @click.prevent id="hoverme">Hover me!</a><br/>
922
1046
  <a href="#" @click.prevent id="clickme" title="Native tooltip">Click me!</a>
923
1047
  </p>
924
1048
  <CmdTooltip related-id="hoverme">
@@ -981,7 +1105,7 @@
981
1105
  <template #privacy-text>
982
1106
  <p>
983
1107
  <strong>
984
- 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!
985
1109
  </strong>
986
1110
  </p>
987
1111
  </template>
@@ -1108,11 +1232,15 @@ export default {
1108
1232
  data() {
1109
1233
  return {
1110
1234
  showTooltip: false,
1235
+ disabledStatus: undefined,
1236
+ validationStatus: "",
1111
1237
  inputFieldPattern: "",
1112
1238
  inputSearch: "",
1113
1239
  textarea: "",
1114
1240
  inputGroupValue1: "radiobuttonValue1",
1115
1241
  inputGroupValue2: "website",
1242
+ inputGroupValueReplaceInputTypeRadio: "phone",
1243
+ inputGroupValueReplaceInputTypeCheckbox: ["phone"],
1116
1244
  inputGroupValue3: "email",
1117
1245
  inputGroupValue4: [],
1118
1246
  inputGroupRadiobuttons: [
@@ -1179,7 +1307,6 @@ export default {
1179
1307
  labelText: "Filters:",
1180
1308
  type: "checkboxOptions"
1181
1309
  },
1182
- formElementStatus: "",
1183
1310
  siteSearchInput1: "Doctor",
1184
1311
  siteSearchInput2: "New York",
1185
1312
  radius: 10,
@@ -1249,9 +1376,13 @@ export default {
1249
1376
  }
1250
1377
  },
1251
1378
  mounted() {
1252
- 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))
1253
1380
  },
1254
1381
  methods: {
1382
+ setStatus(validationStatus, disabledStatus) {
1383
+ this.validationStatus = validationStatus
1384
+ this.disabledStatus = disabledStatus
1385
+ },
1255
1386
  siteSearchOutput(event) {
1256
1387
  console.log(event)
1257
1388
  },