comand-component-library 3.1.70 → 3.1.73

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