comand-component-library 4.2.50 → 4.2.52

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 (57) hide show
  1. package/dist/comand-component-library.js +2663 -2332
  2. package/dist/style.css +1 -1
  3. package/package.json +2 -2
  4. package/src/ComponentLibrary.vue +639 -1267
  5. package/src/assets/data/box-product.json +15 -10
  6. package/src/assets/data/box-user.json +8 -8
  7. package/src/assets/data/list-of-tags.json +1 -1
  8. package/src/assets/data/pages/boxes-team-overview.json +8 -8
  9. package/src/componentSettingsDataAndControls.vue +82 -10
  10. package/src/components/CmdAddressData.vue +2 -0
  11. package/src/components/CmdAddressDataItem.vue +2 -1
  12. package/src/components/CmdBackToTopButton.vue +12 -3
  13. package/src/components/CmdBankAccountData.vue +2 -0
  14. package/src/components/CmdBasicForm.vue +6 -2
  15. package/src/components/CmdBox.vue +62 -35
  16. package/src/components/CmdBoxWrapper.vue +6 -0
  17. package/src/components/CmdBreadcrumbs.vue +2 -0
  18. package/src/components/CmdCodeOutput.vue +2 -0
  19. package/src/components/CmdCompanyLogo.vue +2 -0
  20. package/src/components/CmdContainer.vue +100 -87
  21. package/src/components/CmdCookieDisclaimer.vue +12 -1
  22. package/src/components/CmdCopyrightInformation.vue +2 -0
  23. package/src/components/CmdFakeSelect.vue +10 -6
  24. package/src/components/CmdFancyBox.vue +2 -0
  25. package/src/components/CmdFlexibleScrollContainer.vue +2 -0
  26. package/src/components/CmdForm.vue +2 -0
  27. package/src/components/CmdFormElement.vue +11 -1
  28. package/src/components/CmdFormFilters.vue +2 -0
  29. package/src/components/CmdGoogleMaps.vue +2 -0
  30. package/src/components/CmdHeadline.vue +23 -1
  31. package/src/components/CmdIcon.vue +2 -0
  32. package/src/components/CmdImage.vue +3 -0
  33. package/src/components/CmdImageGallery.vue +3 -1
  34. package/src/components/CmdImageZoom.vue +2 -0
  35. package/src/components/CmdInnerLink.vue +2 -0
  36. package/src/components/CmdInputGroup.vue +2 -0
  37. package/src/components/CmdLink.vue +16 -10
  38. package/src/components/CmdList.vue +168 -86
  39. package/src/components/CmdListOfLinksItem.vue +2 -0
  40. package/src/components/CmdListOfRequirements.vue +2 -0
  41. package/src/components/CmdLoginForm.vue +2 -2
  42. package/src/components/CmdMailTool.vue +2 -0
  43. package/src/components/CmdMailToolEntry.vue +2 -1
  44. package/src/components/CmdMailToolFilter.vue +2 -0
  45. package/src/components/CmdMainNavigation.vue +2 -0
  46. package/src/components/CmdMultistepFormProgressBar.vue +16 -10
  47. package/src/components/CmdProgressBar.vue +1 -1
  48. package/src/components/CmdSiteSearch.vue +10 -1
  49. package/src/components/CmdSlideButton.vue +3 -4
  50. package/src/components/CmdSlideshow.vue +10 -1
  51. package/src/components/CmdSmartSearch.vue +42 -11
  52. package/src/components/CmdSystemMessage.vue +8 -5
  53. package/src/components/CmdTable.vue +8 -6
  54. package/src/components/CmdTabs.vue +37 -3
  55. package/src/components/CmdThumbnailScroller.vue +12 -3
  56. package/src/components/CmdUploadForm.vue +12 -1
  57. package/src/components/CmdFlexContainer.vue +0 -109
package/src/ComponentLibrary.vue CHANGED
@@ -3,38 +3,24 @@
3
3
  <!-- begin .page-wrapper -->
4
4
  <div class="page-wrapper" :id="templateId" v-fancybox>
5
5
  <a id="anchor-back-to-top"></a>
6
- <CmdSidebar
7
- v-if="showLeftSidebar"
8
- :cmdHeadline="{headlineText: 'Site Settings', headlineLevel: 3, textAlign: 'center'}"
9
- :openSidebar="openLeftSidebar"
10
- @toggle-sidebar="setOpenStatusLeftSidebar"
11
- >
6
+ <CmdSidebar v-if="showLeftSidebar"
7
+ :cmdHeadline="{ headlineText: 'Site Settings', headlineLevel: 3, textAlign: 'center' }"
8
+ :openSidebar="openLeftSidebar" @toggle-sidebar="setOpenStatusLeftSidebar">
12
9
  <template #open>
13
- <CmdBoxWrapper
14
- :boxesPerRow="[1]"
15
- :allowMultipleExpandedBoxes="false"
16
- :allowUserToToggleOrientation="false"
17
- :openBoxesByDefault="openBoxes"
18
- :useGap="false"
19
- >
10
+ <CmdBoxWrapper :boxesPerRow="[1]" :allowMultipleExpandedBoxes="false"
11
+ :allowUserToToggleOrientation="false" :openBoxesByDefault="openBoxes" :useGap="false">
20
12
  <template v-slot="slotProps">
21
13
  <!-- begin box template selection -->
22
- <CmdBox
23
- :use-slots="['body']"
24
- :collapsible="true"
25
- :cmdHeadline="{headlineText: 'Template Settings', headlineLevel: 4, cmdIcon: {iconClass: 'icon-settings-template'}}"
14
+ <CmdBox :use-slots="['body']" :collapsible="true"
15
+ :cmdHeadline="{ headlineText: 'Template Settings', headlineLevel: 4, cmdIcon: { iconClass: 'icon-settings-template' } }"
26
16
  :openCollapsedBox="slotProps.boxIsOpen(0)"
27
- @toggleCollapse="slotProps.boxToggled(0, $event)"
28
- >
17
+ @toggleCollapse="slotProps.boxToggled(0, $event)">
29
18
  <template v-slot:body>
30
19
  <label for="select-template">
31
20
  <span>Select template</span>
32
21
  <select id="select-template" v-model="selectedTemplate">
33
22
  <option value="blank">Blank/Unstyled</option>
34
- <option value="business">Business</option>
35
- <option value="casual">Casual</option>
36
- <option value="dating">Dating</option>
37
- <option value="influencer">Influencer</option>
23
+ <option value="dating">Material-Web</option>
38
24
  </select>
39
25
  </label>
40
26
  <div>
@@ -42,19 +28,17 @@
42
28
  <div class="input-wrapper">
43
29
  <label for="default-color-scheme">
44
30
  <input type="radio" id="default-color-scheme" name="color-scheme"
45
- v-model="colorScheme"
46
- value="none"/>
31
+ v-model="colorScheme" value="none" />
47
32
  <span class="label-text">Color-Scheme by Browser/OS</span>
48
33
  </label>
49
34
  <label for="light-mode">
50
35
  <input type="radio" id="light-mode" name="color-scheme"
51
- v-model="colorScheme"
52
- value="light"/>
36
+ v-model="colorScheme" value="light" />
53
37
  <span class="label-text">Light Mode</span>
54
38
  </label>
55
39
  <label for="dark-mode">
56
40
  <input type="radio" id="dark-mode" name="color-scheme" v-model="colorScheme"
57
- value="dark"/>
41
+ value="dark" />
58
42
  <span class="label-text">Dark Mode</span>
59
43
  </label>
60
44
  </div>
@@ -64,23 +48,17 @@
64
48
  <!-- end box template selection -->
65
49
 
66
50
  <!-- begin box list of components-->
67
- <CmdBox
68
- :use-slots="['body']"
69
- :collapsible="true"
70
- :cmdHeadline="{headlineText: 'Components', headlineLevel: 4, cmdIcon: {iconClass: 'icon-settings-component'}}"
71
- :openCollapsedBox="slotProps.boxIsOpen(1)"
72
- @toggleCollapse="slotProps.boxToggled(1, $event)"
73
- id="list-of-components"
74
- >
51
+ <CmdBox :use-slots="['body']" :collapsible="true"
52
+ :cmdHeadline="{ headlineText: 'Components', headlineLevel: 4, cmdIcon: { iconClass: 'icon-settings-component' } }"
53
+ :openCollapsedBox="slotProps.boxIsOpen(1)" @toggleCollapse="slotProps.boxToggled(1, $event)"
54
+ id="list-of-components">
75
55
  <template v-slot:body>
76
56
  <ul>
77
57
  <li v-for="(componentName, index) in listOfComponents" :key="index"
78
- :class="{'active' : activeEntry === 'Cmd' + componentName}">
79
- <a
80
- :href="sectionName(componentName)"
58
+ :class="{ 'active': activeEntry === 'Cmd' + componentName }">
59
+ <a :href="sectionName(componentName)"
81
60
  @click="updateSettingsSidebar(componentNameWithPrefix(componentName))"
82
- title="Go to component"
83
- >
61
+ title="Go to component">
84
62
  {{ readableComponentName(componentName) }}
85
63
  </a>
86
64
  </li>
@@ -90,18 +68,15 @@
90
68
  <!-- end box list of components-->
91
69
 
92
70
  <!-- begin box page-templates -->
93
- <CmdBox
94
- :use-slots="['body']"
95
- :collapsible="true"
96
- :cmdHeadline="{headlineText: 'Page-Templates', headlineLevel: 4, cmdIcon: {iconClass: 'icon-file-settings'}}"
71
+ <CmdBox :use-slots="['body']" :collapsible="true"
72
+ :cmdHeadline="{ headlineText: 'Page-Templates', headlineLevel: 4, cmdIcon: { iconClass: 'icon-file-settings' } }"
97
73
  :openCollapsedBox="slotProps.boxIsOpen(2)"
98
- @toggleCollapse="slotProps.boxToggled(2, $event)"
99
- >
74
+ @toggleCollapse="slotProps.boxToggled(2, $event)">
100
75
  <template v-slot:body>
101
76
  <ul>
102
77
  <li>
103
78
  <a href="#section-contact-information"
104
- @click="updateSettingsSidebar('ContactInformation', 'page')">
79
+ @click="updateSettingsSidebar('ContactInformation', 'page')">
105
80
  Contact Information
106
81
  </a>
107
82
  </li>
@@ -110,13 +85,13 @@
110
85
  <ul>
111
86
  <li>
112
87
  <a href="#section-multiple-lists-of-links-downloads"
113
- @click="updateSettingsSidebar('MultipleListsOfLinks', 'page')">
88
+ @click="updateSettingsSidebar('MultipleListsOfLinks', 'page')">
114
89
  Downloads
115
90
  </a>
116
91
  </li>
117
92
  <li>
118
93
  <a href="#section-multiple-lists-of-links-sitemap"
119
- @click="updateSettingsSidebar('MultipleListsOfLinks', 'page')">
94
+ @click="updateSettingsSidebar('MultipleListsOfLinks', 'page')">
120
95
  SiteMap
121
96
  </a>
122
97
  </li>
@@ -127,13 +102,13 @@
127
102
  <ul>
128
103
  <li>
129
104
  <a href="#section-multiple-box-wrapper-faqs"
130
- @click="updateSettingsSidebar('MultipleBoxWrapperFAQs', 'page')">
105
+ @click="updateSettingsSidebar('MultipleBoxWrapperFAQs', 'page')">
131
106
  FAQs
132
107
  </a>
133
108
  </li>
134
109
  <li>
135
110
  <a href="#section-multiple-box-wrapper-team-overview"
136
- @click="updateSettingsSidebar('MultipleBoxWrapperTeamOverview', 'page')">
111
+ @click="updateSettingsSidebar('MultipleBoxWrapperTeamOverview', 'page')">
137
112
  Team Overview
138
113
  </a>
139
114
  </li>
@@ -176,18 +151,12 @@
176
151
  <CmdSiteHeader :sticky="true">
177
152
  <template v-slot:top-header>
178
153
  <!-- begin list ------------------------------------------------------------------------------------------->
179
- <CmdList
180
- :links="listData"
181
- orientation="horizontal"
182
- align="right"
183
- />
154
+ <CmdList :links="listData" orientation="horizontal" align="right" />
184
155
  <!-- end list ------------------------------------------------------------------------------------------->
185
156
  </template>
186
157
  <template v-slot:logo>
187
158
  <!-- begin company-logo ------------------------------------------------------------------------------------------->
188
- <CmdCompanyLogo
189
- v-bind="companyLogoData"
190
- />
159
+ <CmdCompanyLogo v-bind="companyLogoData" />
191
160
  <!-- end company-logo ------------------------------------------------------------------------------------------->
192
161
  </template>
193
162
  </CmdSiteHeader>
@@ -202,14 +171,11 @@
202
171
  <h2 class="headline-demopage" id="section-address-data">
203
172
  <span>Address Data</span>
204
173
  <a href="#" class="button small icon-cog" title="Open Component Settings"
205
- @click.prevent="openSettingsSidebar('CmdAddressData')"></a>
174
+ @click.prevent="openSettingsSidebar('CmdAddressData')"></a>
206
175
  </h2>
207
176
  <div class="flex-container">
208
- <CmdAddressData
209
- ref="CmdAddressData"
210
- :addressData="addressData"
211
- v-bind="cmdAddressDataSettingsData"
212
- />
177
+ <CmdAddressData ref="CmdAddressData" :addressData="addressData"
178
+ v-bind="cmdAddressDataSettingsData" />
213
179
  </div>
214
180
  </CmdWidthLimitationWrapper>
215
181
  <!-- end address-data --------------------------------------------------------------------------------------------------->
@@ -222,38 +188,38 @@
222
188
  <ul class="list-status">
223
189
  <li>
224
190
  <a href="#" @click.prevent="setStatus('', false)"
225
- :class="{'active' : validationStatus === '' && disabledStatus === false}"
226
- id="status-default">
191
+ :class="{ 'active': validationStatus === '' && disabledStatus === false }"
192
+ id="status-default">
227
193
  Default
228
194
  </a>
229
195
  </li>
230
196
  <li class="error">
231
197
  <a href="#" @click.prevent="setStatus('error', false)"
232
- :class="{'active' : validationStatus === 'error'}" id="status-error">
198
+ :class="{ 'active': validationStatus === 'error' }" id="status-error">
233
199
  Error
234
200
  </a>
235
201
  </li>
236
202
  <li>
237
203
  <a href="#" @click.prevent="setStatus('warning', false)"
238
- :class="{'active' : validationStatus === 'warning'}" id="status-warning">
204
+ :class="{ 'active': validationStatus === 'warning' }" id="status-warning">
239
205
  Warning
240
206
  </a>
241
207
  </li>
242
208
  <li>
243
209
  <a href="#" @click.prevent="setStatus('success', false)"
244
- :class="{'active' : validationStatus === 'success'}" id="status-success">
210
+ :class="{ 'active': validationStatus === 'success' }" id="status-success">
245
211
  Success
246
212
  </a>
247
213
  </li>
248
214
  <li>
249
215
  <a href="#" @click.prevent="setStatus('info', false)"
250
- :class="{'active' : validationStatus === 'info'}" id="status-info">
216
+ :class="{ 'active': validationStatus === 'info' }" id="status-info">
251
217
  Info
252
218
  </a>
253
219
  </li>
254
220
  <li>
255
221
  <a href="#" @click.prevent="setStatus('', true)"
256
- :class="{'active' : disabledStatus === true}" id="status-disabled">
222
+ :class="{ 'active': disabledStatus === true }" id="status-disabled">
257
223
  Disabled
258
224
  </a>
259
225
  </li>
@@ -261,7 +227,7 @@
261
227
  </div>
262
228
 
263
229
  <!-- begin form-filters -->
264
- <CmdFormFilters v-model="fakeSelectFilters" :selectedOptionsName="getOptionName"/>
230
+ <CmdFormFilters v-model="fakeSelectFilters" :selectedOptionsName="getOptionName" />
265
231
  <!-- end form-filters -->
266
232
 
267
233
  <CmdForm :use-fieldset="false" id="advanced-form-elements" novalidate="novalidate">
@@ -270,311 +236,133 @@
270
236
  <h2 class="headline-demopage">
271
237
  <span>Form Element-Component</span>
272
238
  <a href="#" class="button small icon-cog" title="Open Component Settings"
273
- @click.prevent="openSettingsSidebar('CmdFormElement')"></a>
239
+ @click.prevent="openSettingsSidebar('CmdFormElement')"></a>
274
240
  </h2>
275
- <CmdFormElement
276
- ref="CmdFormElement"
277
- v-bind="cmdFormElementSettingsData"
278
- :status="validationStatus"
279
- :disabled="disabledStatus"
280
- />
241
+ <CmdFormElement ref="CmdFormElement" v-bind="cmdFormElementSettingsData"
242
+ :status="validationStatus" :disabled="disabledStatus" />
281
243
  <div class="flex-container">
282
- <CmdFormElement
283
- labelText="Input for datalist:"
284
- element="input"
285
- type="text"
286
- :status="validationStatus"
287
- :disabled="disabledStatus"
288
- placeholder="Type in option"
289
- :datalist="datalist"
290
- tooltipText="This is a tooltip"
291
- />
244
+ <CmdFormElement labelText="Input for datalist:" element="input" type="text"
245
+ :status="validationStatus" :disabled="disabledStatus" placeholder="Type in option"
246
+ :datalist="datalist" tooltipText="This is a tooltip" />
292
247
  </div>
293
248
  <div class="flex-container">
294
- <CmdFormElement
295
- labelText="Input (type search (without search-button)):"
296
- element="input"
297
- type="search"
298
- :status="validationStatus"
299
- :disabled="disabledStatus"
300
- :showSearchButton="false"
301
- placeholder="Search"
302
- fieldIconClass="icon-search"
303
- tooltipText="This is a tooltip"
304
- v-bind="{useCustomTooltip: false}"
305
- />
306
- <CmdFormElement
307
- labelText="Input (type search (with search-button)):"
308
- element="input"
309
- type="search"
310
- :status="validationStatus"
311
- :disabled="disabledStatus"
312
- placeholder="Search"
313
- tooltipText="This is a tooltip"
314
- v-bind="{useCustomTooltip: false}"
315
- />
249
+ <CmdFormElement labelText="Input (type search (without search-button)):" element="input"
250
+ type="search" :status="validationStatus" :disabled="disabledStatus"
251
+ :showSearchButton="false" placeholder="Search" fieldIconClass="icon-search"
252
+ tooltipText="This is a tooltip" v-bind="{ useCustomTooltip: false }" />
253
+ <CmdFormElement labelText="Input (type search (with search-button)):" element="input"
254
+ type="search" :status="validationStatus" :disabled="disabledStatus" placeholder="Search"
255
+ tooltipText="This is a tooltip" v-bind="{ useCustomTooltip: false }" />
316
256
  </div>
317
257
  <h3>Inputfields in Columns</h3>
318
258
  <div class="flex-container">
319
- <CmdFormElement
320
- element="input"
321
- type="text"
322
- minlength="5"
323
- id="inputfield1"
324
- placeholder="This is placeholder text"
325
- v-model="inputField1"
326
- tooltipText="This is a tooltip!"
327
- :status="validationStatus"
328
- :disabled="disabledStatus">
259
+ <CmdFormElement element="input" type="text" minlength="5" id="inputfield1"
260
+ placeholder="This is placeholder text" v-model="inputField1"
261
+ tooltipText="This is a tooltip!" :status="validationStatus" :disabled="disabledStatus">
329
262
  <template v-slot:labeltext>
330
263
  <span v-html="'Label with <a href=\'#\'>Link</a> given by slot'"></span>
331
264
  </template>
332
265
  </CmdFormElement>
333
- <CmdFormElement
334
- element="input"
335
- labelText="Label for inputfield (required, with tooltip):"
336
- type="text"
337
- required="required"
338
- minlength="5"
339
- id="inputfield-required"
340
- placeholder="This is placeholder text"
341
- v-model="inputFieldRequired"
342
- tooltipText="This is a tooltip!"
343
- :status="validationStatus"
344
- :disabled="disabledStatus"
345
- />
346
- <CmdFormElement
347
- element="input"
348
- labelText="Label for inputfield (with pattern):"
349
- type="text"
350
- id="inputfield-pattern"
351
- placeholder="This is placeholder text"
352
- pattern="/\d/"
353
- v-model="inputFieldPattern"
354
- tooltipText="This is a tooltip!"
355
- :status="validationStatus"
356
- :disabled="disabledStatus"
357
- />
266
+ <CmdFormElement element="input" labelText="Label for inputfield (required, with tooltip):"
267
+ type="text" required="required" minlength="5" id="inputfield-required"
268
+ placeholder="This is placeholder text" v-model="inputFieldRequired"
269
+ tooltipText="This is a tooltip!" :status="validationStatus"
270
+ :disabled="disabledStatus" />
271
+ <CmdFormElement element="input" labelText="Label for inputfield (with pattern):" type="text"
272
+ id="inputfield-pattern" placeholder="This is placeholder text" pattern="/\d/"
273
+ v-model="inputFieldPattern" tooltipText="This is a tooltip!" :status="validationStatus"
274
+ :disabled="disabledStatus" />
358
275
  </div>
359
276
  <!-- begin inputfield in two columns -->
360
277
  <div class="flex-container">
361
- <CmdFormElement
362
- labelText="Label for emailfield (with icon):"
363
- element="input"
364
- type="email"
365
- id="inputfield-email"
366
- fieldIconClass="icon-mail"
367
- placeholder="Type in email-address"
368
- tooltipText="This is a tooltip!"
369
- maxlength="100"
370
- v-model="inputMail"
371
- :status="validationStatus"
372
- :disabled="disabledStatus"
373
- :required="true"
374
- />
375
- <CmdFormElement
376
- labelText="Label for inputfield (with icon):"
377
- element="input"
378
- type="text"
379
- id="inputfield-username"
380
- fieldIconClass="icon-user-profile"
381
- placeholder="Type in username"
382
- tooltipText="This is a tooltip!"
383
- maxlength="100"
384
- v-model="inputUsername"
385
- :status="validationStatus"
386
- :disabled="disabledStatus"
387
- />
388
- <CmdFormElement
389
- element="input"
390
- labelText="Label for password-field:"
391
- type="password"
392
- minlength="8"
393
- maxlength="255"
394
- id="inputfield-password"
395
- fieldIconClass="icon-security-settings"
396
- placeholder="Type in password"
397
- tooltipText="This is a tooltip!"
398
- :customRequirements="customRequirements"
399
- v-model="inputPassword"
400
- :status="validationStatus"
401
- :disabled="disabledStatus"
402
- />
278
+ <CmdFormElement labelText="Label for emailfield (with icon):" element="input" type="email"
279
+ id="inputfield-email" fieldIconClass="icon-mail" placeholder="Type in email-address"
280
+ tooltipText="This is a tooltip!" maxlength="100" v-model="inputMail"
281
+ :status="validationStatus" :disabled="disabledStatus" :required="true" />
282
+ <CmdFormElement labelText="Label for inputfield (with icon):" element="input" type="text"
283
+ id="inputfield-username" fieldIconClass="icon-user-profile"
284
+ placeholder="Type in username" tooltipText="This is a tooltip!" maxlength="100"
285
+ v-model="inputUsername" :status="validationStatus" :disabled="disabledStatus" />
286
+ <CmdFormElement element="input" labelText="Label for password-field:" type="password"
287
+ minlength="8" maxlength="255" id="inputfield-password"
288
+ fieldIconClass="icon-security-settings" placeholder="Type in password"
289
+ tooltipText="This is a tooltip!" :customRequirements="customRequirements"
290
+ v-model="inputPassword" :status="validationStatus" :disabled="disabledStatus" />
403
291
  </div>
404
292
  <!-- end inputfield in two columns -->
405
- <CmdFormElement
406
- element="input"
407
- labelText="Label:"
408
- type="number"
409
- class="flex-none"
410
- id="inputfield-number"
411
- required="required"
412
- min="0"
413
- max="9"
414
- style="width: 4rem;"
415
- v-model="inputNumber"
416
- :customRequirements="[customRequirements[2]]"
417
- :status="validationStatus"
418
- :disabled="disabledStatus"
419
- />
420
- <CmdFormElement
421
- element="input"
422
- labelText="Label for inputfield (number):"
423
- :displayLabelInline="true"
424
- type="number"
425
- id="inputfield-number"
426
- required="required"
427
- min="0"
428
- max="9"
429
- v-model="inputNumber"
430
- :customRequirements="[customRequirements[2]]"
431
- :status="validationStatus"
432
- :disabled="disabledStatus"
433
- />
434
- <CmdFormElement
435
- element="input"
436
- labelText="Label (inline) for inputfield (date):"
437
- :displayLabelInline="true"
438
- type="date"
439
- id="inputfield-date"
440
- v-model="inputDate"
441
- :status="validationStatus"
442
- :disabled="disabledStatus"
443
- />
293
+ <CmdFormElement element="input" labelText="Label:" type="number" class="flex-none"
294
+ id="inputfield-number" required="required" min="0" max="9" style="width: 4rem;"
295
+ v-model="inputNumber" :customRequirements="[customRequirements[2]]"
296
+ :status="validationStatus" :disabled="disabledStatus" />
297
+ <CmdFormElement element="input" labelText="Label for inputfield (number):"
298
+ :displayLabelInline="true" type="number" id="inputfield-number" required="required" min="0"
299
+ max="9" v-model="inputNumber" :customRequirements="[customRequirements[2]]"
300
+ :status="validationStatus" :disabled="disabledStatus" />
301
+ <CmdFormElement element="input" labelText="Label (inline) for inputfield (date):"
302
+ :displayLabelInline="true" type="date" id="inputfield-date" v-model="inputDate"
303
+ :status="validationStatus" :disabled="disabledStatus" />
444
304
  <h3>Searchfields</h3>
445
305
  <div class="flex-container">
446
- <CmdFormElement
447
- element="input"
448
- labelText="Label for inputfield (search) without search-button:"
449
- type="search"
450
- id="inputfield-search-without-searchbutton"
451
- placeholder="Keyword(s)"
452
- v-model="inputSearch"
453
- :showSearchButton="false"
454
- :status="validationStatus"
455
- :disabled="disabledStatus"
456
- />
457
- <CmdFormElement
458
- element="input"
459
- labelText="Label for inputfield (search):"
460
- type="search"
461
- id="inputfield-search-with-searchbutton"
462
- placeholder="Keyword(s)"
463
- v-model="inputSearch"
464
- :status="validationStatus"
465
- :disabled="disabledStatus"
466
- />
306
+ <CmdFormElement element="input"
307
+ labelText="Label for inputfield (search) without search-button:" type="search"
308
+ id="inputfield-search-without-searchbutton" placeholder="Keyword(s)"
309
+ v-model="inputSearch" :showSearchButton="false" :status="validationStatus"
310
+ :disabled="disabledStatus" />
311
+ <CmdFormElement element="input" labelText="Label for inputfield (search):" type="search"
312
+ id="inputfield-search-with-searchbutton" placeholder="Keyword(s)" v-model="inputSearch"
313
+ :status="validationStatus" :disabled="disabledStatus" />
467
314
  <!-- begin CmdSmartSearch -->
468
- <CmdSmartSearch
469
- :listOfRecommendations="smartSearchData.listOfRecommendations"
470
- :cmdFormElement="smartSearchData.cmdFormElement"
471
- :openListToTop="true"
472
- v-model="smartSearchObject"
473
- :disabled="disabledStatus"
474
- />
475
- <CmdSmartSearch
476
- :listOfRecommendations="smartSearchData.listOfRecommendations"
477
- :cmdFormElement="smartSearchData.cmdFormElement"
478
- :openListToTop="true"
479
- v-model="smartSearchString"
480
- :disabled="disabledStatus"
481
- />
315
+ <CmdSmartSearch :listOfRecommendations="smartSearchData.listOfRecommendations"
316
+ :cmdFormElement="smartSearchData.cmdFormElement" :openListToTop="true"
317
+ v-model="smartSearchObject" :disabled="disabledStatus" />
318
+ <CmdSmartSearch :listOfRecommendations="smartSearchData.listOfRecommendations"
319
+ :cmdFormElement="smartSearchData.cmdFormElement" :openListToTop="true"
320
+ v-model="smartSearchString" :disabled="disabledStatus" />
482
321
  <!-- end CmdSmartSearch -->
483
322
  </div>
484
323
  <h3>Textarea</h3>
485
- <CmdFormElement
486
- element="textarea"
487
- labelText="Label for textarea:"
488
- id="textarea"
489
- minlength="1"
490
- maxlength="100"
491
- placeholder="Type in your message"
492
- :required="true"
493
- v-model="textarea"
494
- :status="validationStatus"
495
- :disabled="disabledStatus"
496
- />
497
- <hr/>
324
+ <CmdFormElement element="textarea" labelText="Label for textarea:" id="textarea" minlength="1"
325
+ maxlength="100" placeholder="Type in your message" :required="true" v-model="textarea"
326
+ :status="validationStatus" :disabled="disabledStatus" />
327
+ <hr />
498
328
  <!-- begin FakeSelect -->
499
329
  <h3 class="headline-demopage">
500
330
  <span>Fake Selects</span>
501
331
  <a href="#" class="button small icon-cog" title="Open Component Settings"
502
- @click.prevent="openSettingsSidebar('CmdFakeSelect')"></a>
332
+ @click.prevent="openSettingsSidebar('CmdFakeSelect')"></a>
503
333
  </h3>
504
334
  <div class="flex-container">
505
335
  <!-- type === default: normal selectbox (with optional icons) -->
506
- <CmdFakeSelect
507
- ref="CmdFakeSelect"
508
- v-bind="cmdFakeSelectSettingsData"
509
- :selectData="fakeSelectOptionsData"
510
- v-model="fakeSelectDefault"
511
- >
336
+ <CmdFakeSelect ref="CmdFakeSelect" v-bind="cmdFakeSelectSettingsData"
337
+ :selectData="fakeSelectOptionsData" v-model="fakeSelectDefault">
512
338
  </CmdFakeSelect>
513
339
  <!-- type === checkboxOptions: selectbox with checkboxes for each option -->
514
- <CmdFakeSelect
515
- labelText="Selectbox with checkboxes:"
516
- :status="validationStatus"
517
- :disabled="disabledStatus"
518
- :selectData="fakeSelectOptionsData"
519
- v-model="fakeSelectCheckbox"
520
- defaultOptionName="Options:"
521
- :required="true"
522
- id="selectbox-with-checkboxes"
523
- type="checkboxOptions"
524
- :useCustomTooltip="true"
525
- />
526
- <CmdFakeSelect
527
- labelText="Selectbox with filters:"
528
- :status="validationStatus"
529
- :disabled="disabledStatus"
530
- :selectData="fakeSelectFilterOptionsData"
531
- v-model="fakeSelectFilters"
532
- defaultOptionName="Filters:"
533
- id="selectbox-with-filters"
534
- type="checkboxOptions"
535
- :useCustomTooltip="true"
536
- />
537
- <CmdFakeSelect
538
- labelText="Selectbox with country flags:"
539
- :status="validationStatus"
540
- :disabled="disabledStatus"
541
- pathFlags="https://comand-ui.com/samples/images/flags"
542
- :selectData="fakeSelectCountriesData"
543
- v-model="selectedCountryWithFlag"
544
- defaultOptionName="Select country:"
545
- type="country"
546
- />
547
- <CmdFormElement
548
- labelText="Selectbox with all countries:"
549
- element="select"
550
- :status="validationStatus"
551
- :disabled="disabledStatus"
552
- :selectOptions="allCountriesData"
553
- v-model="selectedCountry"
554
- :groupSelectOptionsByInitialLetters="true"
555
- max-height="10rem"
556
- defaultOptionName="Select country:"
557
- />
558
- <CmdFakeSelect
559
- labelText="Selectbox with colors:"
560
- :status="validationStatus"
561
- :disabled="disabledStatus"
562
- :selectData="fakeSelectColorsData"
563
- v-model="selectedColor"
564
- required="required"
565
- type="color"
566
- />
340
+ <CmdFakeSelect labelText="Selectbox with checkboxes:" :status="validationStatus"
341
+ :disabled="disabledStatus" :selectData="fakeSelectOptionsData"
342
+ v-model="fakeSelectCheckbox" defaultOptionName="Options:" :required="true"
343
+ id="selectbox-with-checkboxes" type="checkboxOptions" :useCustomTooltip="true" />
344
+ <CmdFakeSelect labelText="Selectbox with filters:" :status="validationStatus"
345
+ :disabled="disabledStatus" :selectData="fakeSelectFilterOptionsData"
346
+ v-model="fakeSelectFilters" defaultOptionName="Filters:" id="selectbox-with-filters"
347
+ type="checkboxOptions" :useCustomTooltip="true" />
348
+ <CmdFakeSelect labelText="Selectbox with country flags:" :status="validationStatus"
349
+ :disabled="disabledStatus" pathFlags="https://comand-ui.com/samples/images/flags"
350
+ :selectData="fakeSelectCountriesData" v-model="selectedCountryWithFlag"
351
+ defaultOptionName="Select country:" type="country" />
352
+ <CmdFormElement labelText="Selectbox with all countries:" element="select"
353
+ :status="validationStatus" :disabled="disabledStatus" :selectOptions="allCountriesData"
354
+ v-model="selectedCountry" :groupSelectOptionsByInitialLetters="true" max-height="10rem"
355
+ defaultOptionName="Select country:" />
356
+ <CmdFakeSelect labelText="Selectbox with colors:" :status="validationStatus"
357
+ :disabled="disabledStatus" :selectData="fakeSelectColorsData" v-model="selectedColor"
358
+ required="required" type="color" />
567
359
  </div>
568
360
  <!-- end FakeSelect -->
569
- <hr/>
361
+ <hr />
570
362
 
571
363
  <!-- begin progress bar -->
572
364
  <h2>Progress Bar [native]</h2>
573
- <CmdProgressBar
574
- labelText="Progress Bar (with optional output):"
575
- id="progress-bar2"
576
- max="100"
577
- />
365
+ <CmdProgressBar labelText="Progress Bar (with optional output):" id="progress-bar2" max="100" />
578
366
  <!-- end progress bar -->
579
367
 
580
368
  <!-- begin slider -->
@@ -582,139 +370,64 @@
582
370
  <div class="label" :class="validationStatus">
583
371
  <span class="label-text">Single-Slider (with in- and output):</span>
584
372
  <span class="flex-container flex-none">
585
- <label class="inline" for="range-value">
586
- <span class="label-text">
587
- <span>Range Value:</span>
588
- </span>
589
- <input
590
- type="number"
591
- :class="validationStatus"
592
- v-model="rangeValue"
593
- :disabled="disabledStatus"
594
- min="0"
595
- max="100"
596
- id="range-value"
597
- />
598
- </label>
599
- <label for="range-slider">
600
- <span class="label-text hidden">
601
- <span>Range Value</span>
602
- </span>
603
- <input
604
- type="range"
605
- class="range-slider"
606
- id="range-slider"
607
- v-model="rangeValue"
608
- :disabled="disabledStatus"
609
- min="0"
610
- max="100"
611
- />
612
- </label>
613
- </span>
373
+ <label class="inline" for="range-value">
374
+ <span class="label-text">
375
+ <span>Range Value:</span>
376
+ </span>
377
+ <input type="number" :class="validationStatus" v-model="rangeValue"
378
+ :disabled="disabledStatus" min="0" max="100" id="range-value" />
379
+ </label>
380
+ <label for="range-slider">
381
+ <span class="label-text hidden">
382
+ <span>Range Value</span>
383
+ </span>
384
+ <input type="range" class="range-slider" id="range-slider" v-model="rangeValue"
385
+ :disabled="disabledStatus" min="0" max="100" />
386
+ </label>
387
+ </span>
614
388
  </div>
615
389
  <!-- end slider -->
616
390
 
617
- <hr/>
391
+ <hr />
618
392
 
619
393
  <!-- begin toggle-switch-radio with switch-label (colored) -->
620
394
  <h2>Toggle-Switches</h2>
621
395
  <h3>Switches without switch-labels</h3>
622
- <CmdFormElement
623
- element="input"
624
- type="checkbox"
625
- id="toggle-switch-checkbox"
396
+ <CmdFormElement element="input" type="checkbox" id="toggle-switch-checkbox"
626
397
  v-model="switchButtonCheckboxToggleSwitch"
627
- labelText="Labeltext for Toggle-Switch without Switch-Label"
628
- :toggleSwitch="true"
629
- :status="validationStatus"
630
- :disabled="disabledStatus"
631
- :required="true"
632
- />
633
- <CmdFormElement
634
- element="input"
635
- type="checkbox"
636
- id="toggle-switch-checkbox-colored"
398
+ labelText="Labeltext for Toggle-Switch without Switch-Label" :toggleSwitch="true"
399
+ :status="validationStatus" :disabled="disabledStatus" :required="true" />
400
+ <CmdFormElement element="input" type="checkbox" id="toggle-switch-checkbox-colored"
637
401
  v-model="switchButtonCheckboxToggleSwitchColored"
638
- labelText="Labeltext for colored Toggle-Switch without Switch-Label"
639
- :toggleSwitch="true"
640
- :colored="true"
641
- :status="validationStatus"
642
- :disabled="disabledStatus"
643
- />
402
+ labelText="Labeltext for colored Toggle-Switch without Switch-Label" :toggleSwitch="true"
403
+ :colored="true" :status="validationStatus" :disabled="disabledStatus" />
644
404
  <h3>Switches with switch-labels</h3>
645
- <CmdFormElement
646
- element="input"
647
- type="checkbox"
648
- id="toggle-switch-checkbox-switch-label"
649
- v-model="switchButtonCheckbox"
650
- labelText="Labeltext for Toggle-Switch with Switch-Label"
651
- inputValue="checkbox1"
652
- onLabel="Label on"
653
- offLabel="Label off"
654
- :toggleSwitch="true"
655
- :status="validationStatus"
656
- :disabled="disabledStatus"
657
- />
658
- <CmdFormElement
659
- element="input"
660
- type="checkbox"
661
- id="toggle-switch-checkbox-switch-label-colored"
662
- v-model="switchButtonCheckbox"
663
- inputValue="checkbox2"
664
- labelText="Labeltext for Toggle-Switch (Checkbox, colored)"
665
- onLabel="Label on"
666
- offLabel="Label off"
667
- :colored="true"
668
- :toggleSwitch="true"
669
- :status="validationStatus"
670
- :disabled="disabledStatus"
671
- />
672
- <CmdFormElement
673
- element="input"
674
- type="radio"
675
- name="radiogroup"
676
- id="toggle-switch-radio1"
677
- v-model="switchButtonRadio"
678
- onLabel="Label on"
679
- offLabel="Label off"
680
- :colored="true"
681
- :toggleSwitch="true"
682
- :status="validationStatus"
683
- :disabled="disabledStatus"
684
- inputValue="radio1"
685
- labelText="Labeltext for Toggle-Switch (Radio, colored) #1"
686
- />
687
- <CmdFormElement
688
- element="input"
689
- type="radio"
690
- name="radiogroup"
691
- id="toggle-switch-radio2"
692
- v-model="switchButtonRadio"
693
- onLabel="Label on"
694
- offLabel="Label off"
695
- :colored="true"
696
- :toggleSwitch="true"
697
- :status="validationStatus"
698
- :disabled="disabledStatus"
699
- inputValue="radio2"
700
- labelText="Labeltext for Toggle-Switch (Radio, colored) #2"
701
- />
405
+ <CmdFormElement element="input" type="checkbox" id="toggle-switch-checkbox-switch-label"
406
+ v-model="switchButtonCheckbox" labelText="Labeltext for Toggle-Switch with Switch-Label"
407
+ inputValue="checkbox1" onLabel="Label on" offLabel="Label off" :toggleSwitch="true"
408
+ :status="validationStatus" :disabled="disabledStatus" />
409
+ <CmdFormElement element="input" type="checkbox" id="toggle-switch-checkbox-switch-label-colored"
410
+ v-model="switchButtonCheckbox" inputValue="checkbox2"
411
+ labelText="Labeltext for Toggle-Switch (Checkbox, colored)" onLabel="Label on"
412
+ offLabel="Label off" :colored="true" :toggleSwitch="true" :status="validationStatus"
413
+ :disabled="disabledStatus" />
414
+ <CmdFormElement element="input" type="radio" name="radiogroup" id="toggle-switch-radio1"
415
+ v-model="switchButtonRadio" onLabel="Label on" offLabel="Label off" :colored="true"
416
+ :toggleSwitch="true" :status="validationStatus" :disabled="disabledStatus"
417
+ inputValue="radio1" labelText="Labeltext for Toggle-Switch (Radio, colored) #1" />
418
+ <CmdFormElement element="input" type="radio" name="radiogroup" id="toggle-switch-radio2"
419
+ v-model="switchButtonRadio" onLabel="Label on" offLabel="Label off" :colored="true"
420
+ :toggleSwitch="true" :status="validationStatus" :disabled="disabledStatus"
421
+ inputValue="radio2" labelText="Labeltext for Toggle-Switch (Radio, colored) #2" />
702
422
  <!-- end toggle-switch-radio with switch-label (colored) -->
703
423
 
704
424
  <!-- begin checkboxes and radiobuttons -->
705
- <CmdFormElement
706
- element="input"
707
- labelText="Label for (required) checkbox with boolean"
708
- type="checkbox"
709
- required="required"
710
- id="checkbox-required-with-boolean"
711
- v-model="checkboxRequiredValue"
712
- :status="validationStatus"
713
- :disabled="disabledStatus"
714
- />
425
+ <CmdFormElement element="input" labelText="Label for (required) checkbox with boolean"
426
+ type="checkbox" required="required" id="checkbox-required-with-boolean"
427
+ v-model="checkboxRequiredValue" :status="validationStatus" :disabled="disabledStatus" />
715
428
  <p>
716
- checkbox (required) with boolean: {{ checkboxRequiredValue }}<br/>
717
- checkbox with boolean: {{ checkboxValue }}<br/>
429
+ checkbox (required) with boolean: {{ checkboxRequiredValue }}<br />
430
+ checkbox with boolean: {{ checkboxValue }}<br />
718
431
  checkboxes with values: {{ checkboxValues }}
719
432
  </p>
720
433
 
@@ -723,42 +436,17 @@
723
436
  <div class="label inline">
724
437
  <span class="label-text">Label for native checkboxes:</span>
725
438
  <div class="flex-container flex-none">
726
- <CmdFormElement
727
- element="input"
728
- labelText="Label for checkbox with boolean"
729
- type="checkbox"
730
- id="checkbox-with-boolean"
731
- v-model="checkboxValue"
732
- :status="validationStatus"
733
- :disabled="disabledStatus"
734
- />
735
- <CmdFormElement
736
- element="input"
737
- labelText="Label for checkbox with value"
738
- v-model="checkboxValues"
739
- inputValue="checkboxValue1"
740
- type="checkbox"
741
- id="checkbox-with-value-1"
742
- :status="validationStatus"
743
- :disabled="disabledStatus"
744
- />
745
- <CmdFormElement
746
- element="input"
747
- labelText="Label for checkbox with value"
748
- v-model="checkboxValues"
749
- inputValue="checkboxValue2"
750
- type="checkbox"
751
- id="checkbox-with-value-2"
752
- :status="validationStatus"
753
- :disabled="disabledStatus"
754
- />
755
- <CmdFormElement
756
- element="input"
757
- v-model="checkboxValues"
758
- inputValue="checkboxValue3"
759
- type="checkbox"
760
- id="checkbox-with-value-3"
761
- :status="validationStatus"
439
+ <CmdFormElement element="input" labelText="Label for checkbox with boolean"
440
+ type="checkbox" id="checkbox-with-boolean" v-model="checkboxValue"
441
+ :status="validationStatus" :disabled="disabledStatus" />
442
+ <CmdFormElement element="input" labelText="Label for checkbox with value"
443
+ v-model="checkboxValues" inputValue="checkboxValue1" type="checkbox"
444
+ id="checkbox-with-value-1" :status="validationStatus" :disabled="disabledStatus" />
445
+ <CmdFormElement element="input" labelText="Label for checkbox with value"
446
+ v-model="checkboxValues" inputValue="checkboxValue2" type="checkbox"
447
+ id="checkbox-with-value-2" :status="validationStatus" :disabled="disabledStatus" />
448
+ <CmdFormElement element="input" v-model="checkboxValues" inputValue="checkboxValue3"
449
+ type="checkbox" id="checkbox-with-value-3" :status="validationStatus"
762
450
  :disabled="disabledStatus">
763
451
  <template v-slot:labeltext>
764
452
  Labeltext with <a href="#">link</a> given by slot
@@ -770,56 +458,25 @@
770
458
  <div class="label inline">
771
459
  <span class="label-text">Label for Replaced Input-Type-Checkbox:</span>
772
460
  <div class="flex-container flex-none">
773
- <CmdFormElement
774
- element="input"
775
- labelText="Label for replaced checkbox"
776
- type="checkbox"
777
- :replaceInputType="true"
778
- id="inputfield9"
779
- v-model="replacedCheckboxValue"
780
- inputValue="checkboxValue1"
781
- :status="validationStatus"
782
- :disabled="disabledStatus"
783
- />
784
- <CmdFormElement
785
- element="input"
786
- labelText="Label for replaced checkbox"
787
- v-model="replacedCheckboxValue"
788
- inputValue="checkboxValue2"
789
- type="checkbox"
790
- :replaceInputType="true"
791
- id="inputfield10"
792
- :status="validationStatus"
793
- :disabled="disabledStatus"
794
- />
461
+ <CmdFormElement element="input" labelText="Label for replaced checkbox" type="checkbox"
462
+ :replaceInputType="true" id="inputfield9" v-model="replacedCheckboxValue"
463
+ inputValue="checkboxValue1" :status="validationStatus" :disabled="disabledStatus" />
464
+ <CmdFormElement element="input" labelText="Label for replaced checkbox"
465
+ v-model="replacedCheckboxValue" inputValue="checkboxValue2" type="checkbox"
466
+ :replaceInputType="true" id="inputfield10" :status="validationStatus"
467
+ :disabled="disabledStatus" />
795
468
  </div>
796
469
  </div>
797
470
  <h3>Radiobuttons [native]</h3>
798
471
  <div class="label inline">
799
472
  <span class="label-text">Label for native radiobuttons:</span>
800
473
  <div class="flex-container flex-none">
801
- <CmdFormElement
802
- element="input"
803
- labelText="Label for native radiobutton"
804
- type="radio"
805
- id="inputfield11"
806
- name="radiogroup"
807
- inputValue="radiobuttonValue1"
808
- v-model="radiobuttonValue"
809
- :status="validationStatus"
810
- :disabled="disabledStatus"
811
- />
812
- <CmdFormElement
813
- element="input"
814
- labelText="Label for native radiobutton"
815
- type="radio"
816
- id="inputfield12"
817
- name="radiogroup"
818
- inputValue="radiobuttonValue2"
819
- v-model="radiobuttonValue"
820
- :status="validationStatus"
821
- :disabled="disabledStatus"
822
- />
474
+ <CmdFormElement element="input" labelText="Label for native radiobutton" type="radio"
475
+ id="inputfield11" name="radiogroup" inputValue="radiobuttonValue1"
476
+ v-model="radiobuttonValue" :status="validationStatus" :disabled="disabledStatus" />
477
+ <CmdFormElement element="input" labelText="Label for native radiobutton" type="radio"
478
+ id="inputfield12" name="radiogroup" inputValue="radiobuttonValue2"
479
+ v-model="radiobuttonValue" :status="validationStatus" :disabled="disabledStatus" />
823
480
  </div>
824
481
  </div>
825
482
  <p>
@@ -829,30 +486,14 @@
829
486
  <div class="label inline">
830
487
  <span class="label-text">Label for Replaced Input-Type-Radio:</span>
831
488
  <div class="flex-container flex-none">
832
- <CmdFormElement
833
- element="input"
834
- labelText="Label for replaced radiobutton"
835
- type="radio"
836
- :replaceInputType="true"
837
- id="inputfield13"
838
- name="replaced-radiogroup"
839
- inputValue="radiobuttonValue1"
840
- v-model="replacedRadiobuttonValue"
841
- :status="validationStatus"
842
- :disabled="disabledStatus"
843
- />
844
- <CmdFormElement
845
- element="input"
846
- labelText="Label for replaced radiobutton"
847
- type="radio"
848
- :replaceInputType="true"
849
- id="inputfield14"
850
- name="replaced-radiogroup"
851
- inputValue="radiobuttonValue2"
852
- v-model="replacedRadiobuttonValue"
853
- :status="validationStatus"
854
- :disabled="disabledStatus"
855
- />
489
+ <CmdFormElement element="input" labelText="Label for replaced radiobutton" type="radio"
490
+ :replaceInputType="true" id="inputfield13" name="replaced-radiogroup"
491
+ inputValue="radiobuttonValue1" v-model="replacedRadiobuttonValue"
492
+ :status="validationStatus" :disabled="disabledStatus" />
493
+ <CmdFormElement element="input" labelText="Label for replaced radiobutton" type="radio"
494
+ :replaceInputType="true" id="inputfield14" name="replaced-radiogroup"
495
+ inputValue="radiobuttonValue2" v-model="replacedRadiobuttonValue"
496
+ :status="validationStatus" :disabled="disabledStatus" />
856
497
  </div>
857
498
  </div>
858
499
  <!-- end checkboxes and radiobuttons -->
@@ -861,37 +502,17 @@
861
502
  <h3 class="headline-demopage" id="section-input-group">
862
503
  Input-Group
863
504
  <a href="#" class="button small icon-cog" title="Open Component Settings"
864
- @click.prevent="openSettingsSidebar('CmdInputGroup')"></a>
505
+ @click.prevent="openSettingsSidebar('CmdInputGroup')"></a>
865
506
  </h3>
866
- <CmdInputGroup
867
- ref="CmdInputGroup"
868
- v-bind="cmdInputGroupSettingsData"
507
+ <CmdInputGroup ref="CmdInputGroup" v-bind="cmdInputGroupSettingsData"
869
508
  labelText="Grouplabel for radio-group given by property:"
870
- :inputElements="idForReplacedInputsInInputGroup('radio-group')"
871
- v-model="inputGroup"
872
- >
873
- <CmdFormElement
874
- element="input"
875
- labelText="Label for radiobutton"
876
- type="radio"
877
- id="input-group-radiobutton"
878
- name="radiogroup2"
879
- inputValue="radiobuttonValue1"
880
- v-model="inputGroup"
881
- :status="validationStatus"
882
- :disabled="disabledStatus"
883
- />
884
- <CmdFormElement
885
- element="input"
886
- labelText="Label for radiobutton"
887
- type="radio"
888
- id="input-group-radiobutton"
889
- name="radiogroup2"
890
- inputValue="radiobuttonValue2"
891
- v-model="inputGroup"
892
- :status="validationStatus"
893
- :disabled="disabledStatus"
894
- />
509
+ :inputElements="idForReplacedInputsInInputGroup('radio-group')" v-model="inputGroup">
510
+ <CmdFormElement element="input" labelText="Label for radiobutton" type="radio"
511
+ id="input-group-radiobutton" name="radiogroup2" inputValue="radiobuttonValue1"
512
+ v-model="inputGroup" :status="validationStatus" :disabled="disabledStatus" />
513
+ <CmdFormElement element="input" labelText="Label for radiobutton" type="radio"
514
+ id="input-group-radiobutton" name="radiogroup2" inputValue="radiobuttonValue2"
515
+ v-model="inputGroup" :status="validationStatus" :disabled="disabledStatus" />
895
516
  </CmdInputGroup>
896
517
  <dl>
897
518
  <dt>Selected value:</dt>
@@ -900,33 +521,20 @@
900
521
  </dd>
901
522
  </dl>
902
523
  <h3>Input Groups with Checkboxes/Radiobuttons (toggle-switches)</h3>
903
- <CmdInputGroup
904
- labelText="Grouplabel for checkbox-group styled as toggle-switches (colored):"
524
+ <CmdInputGroup labelText="Grouplabel for checkbox-group styled as toggle-switches (colored):"
905
525
  :inputElements="idForReplacedInputsInInputGroup('checkbox-group-toggle-switch')"
906
- inputTypes="checkbox"
907
- v-model="inputGroupValueToggleSwitchCheckbox"
908
- :toggleSwitches="true"
909
- :colored="true"
910
- required="required"
911
- :status="validationStatus"
912
- :disabled="disabledStatus"
913
- />
526
+ inputTypes="checkbox" v-model="inputGroupValueToggleSwitchCheckbox" :toggleSwitches="true"
527
+ :colored="true" required="required" :status="validationStatus" :disabled="disabledStatus" />
914
528
  <dl>
915
529
  <dt>Selected value(s):</dt>
916
530
  <dd>
917
531
  <output>{{ inputGroupValueToggleSwitchCheckbox }}</output>
918
532
  </dd>
919
533
  </dl>
920
- <CmdInputGroup
921
- labelText="Grouplabel for radio-group styled as toggle-switches:"
534
+ <CmdInputGroup labelText="Grouplabel for radio-group styled as toggle-switches:"
922
535
  :inputElements="idForReplacedInputsInInputGroup('radio-group-toggle-switch')"
923
- inputTypes="radio"
924
- v-model="inputGroupValueToggleSwitchRadio"
925
- :toggleSwitches="true"
926
- required="required"
927
- :status="validationStatus"
928
- :disabled="disabledStatus"
929
- />
536
+ inputTypes="radio" v-model="inputGroupValueToggleSwitchRadio" :toggleSwitches="true"
537
+ required="required" :status="validationStatus" :disabled="disabledStatus" />
930
538
  <dl>
931
539
  <dt>Selected value(s):</dt>
932
540
  <dd>
@@ -936,12 +544,8 @@
936
544
  <CmdInputGroup
937
545
  labelText="Grouplabel for radio-group given by property styled as multiple-switch:"
938
546
  :inputElements="idForReplacedInputsInInputGroup('radio-group-multiple-switch')"
939
- inputTypes="radio"
940
- :multipleSwitch="true"
941
- v-model="inputGroupValue3"
942
- :status="validationStatus"
943
- :disabled="disabledStatus"
944
- />
547
+ inputTypes="radio" :multipleSwitch="true" v-model="inputGroupValue3"
548
+ :status="validationStatus" :disabled="disabledStatus" />
945
549
  <dl>
946
550
  <dt>Selected value(s):</dt>
947
551
  <dd>
@@ -950,15 +554,9 @@
950
554
  </dl>
951
555
  <CmdInputGroup
952
556
  labelText="Grouplabel for checkbox-group styled as multiple-switch (stretched horizontally):"
953
- :inputElements="inputGroupCheckboxes"
954
- inputTypes="checkbox"
955
- :multipleSwitch="true"
956
- :required="true"
957
- v-model="inputGroupValue4"
958
- :stretchHorizontally="true"
959
- :status="validationStatus"
960
- :disabled="disabledStatus"
961
- />
557
+ :inputElements="inputGroupCheckboxes" inputTypes="checkbox" :multipleSwitch="true"
558
+ :required="true" v-model="inputGroupValue4" :stretchHorizontally="true"
559
+ :status="validationStatus" :disabled="disabledStatus" />
962
560
  <dl>
963
561
  <dt>Selected value(s):</dt>
964
562
  <dd>
@@ -970,14 +568,8 @@
970
568
  <div class="flex-container">
971
569
  <small>(values will not be submitted with the form!)</small>
972
570
  <div class="button-wrapper flex-none">
973
- <CmdFormElement
974
- element="button"
975
- :nativeButton="{text: 'Submit-button from component'}"
976
- type="submit"
977
- id="submitbutton"
978
- name="submitbutton"
979
- :disabled="disabledStatus"
980
- />
571
+ <CmdFormElement element="button" :nativeButton="{ text: 'Submit-button from component' }"
572
+ type="submit" id="submitbutton" name="submitbutton" :disabled="disabledStatus" />
981
573
  <button class="button" type="submit" :disabled="disabledStatus">
982
574
  <span class="icon-check"></span>
983
575
  <span>Native submit-button</span>
@@ -989,7 +581,7 @@
989
581
  <!-- end advanced form elements --------------------------------------------------------------------------------------------->
990
582
 
991
583
  <!-- begin back to top button --------------------------------------------------------------------------------------------->
992
- <CmdBackToTopButton href="#anchor-back-to-top" scroll-container=".page-wrapper"/>
584
+ <CmdBackToTopButton href="#anchor-back-to-top" scroll-container=".page-wrapper" />
993
585
  <!-- end back to top button --------------------------------------------------------------------------------------------->
994
586
 
995
587
  <!-- begin bank account data --------------------------------------------------------------------------------------------->
@@ -997,13 +589,10 @@
997
589
  <h2 class="headline-demopage" id="section-bank-account-data">
998
590
  <span>Bank Account Data</span>
999
591
  <a href="#" class="button small icon-cog" title="Open Component Settings"
1000
- @click.prevent="openSettingsSidebar('CmdBankAccountData')"></a>
592
+ @click.prevent="openSettingsSidebar('CmdBankAccountData')"></a>
1001
593
  </h2>
1002
- <CmdBankAccountData
1003
- :account-data="bankAccountData"
1004
- v-bind="cmdBankAccountDataSettingsData"
1005
- ref="CmdBankAccountData"
1006
- />
594
+ <CmdBankAccountData :account-data="bankAccountData" v-bind="cmdBankAccountDataSettingsData"
595
+ ref="CmdBankAccountData" />
1007
596
  </CmdWidthLimitationWrapper>
1008
597
  <!-- end bank account data --------------------------------------------------------------------------------------------------->
1009
598
 
@@ -1012,20 +601,15 @@
1012
601
  <h2 class="headline-demopage" id="section-basic-form">
1013
602
  <span>Basic Form</span>
1014
603
  <a href="#" class="button small icon-cog" title="Open Component Settings"
1015
- @click.prevent="openSettingsSidebar('CmdBasicForm')"></a>
604
+ @click.prevent="openSettingsSidebar('CmdBasicForm')"></a>
1016
605
  </h2>
1017
- <CmdBasicForm
1018
- ref="CmdBasicForm"
1019
- :cmdForm="{useValidation: true}"
1020
- :userMessage="{
1021
- 'required': false,
1022
- 'element': 'textarea',
1023
- 'maxLength': 500
1024
- }"
1025
- :submitButton="{
606
+ <CmdBasicForm ref="CmdBasicForm" :cmdForm="{ useValidation: true }" :userMessage="{
607
+ 'required': false,
608
+ 'element': 'textarea',
609
+ 'maxLength': 500
610
+ }" :submitButton="{
1026
611
  'text': 'Send request'
1027
- }"
1028
- />
612
+ }" />
1029
613
  <dl>
1030
614
  <dt>originalEvent</dt>
1031
615
  <dd>{{ basicFormData.originalEvent }}</dd>
@@ -1041,16 +625,10 @@
1041
625
  <h3 class="headline-demopage">
1042
626
  <span>Default Box</span>
1043
627
  <a href="#" class="button small icon-cog" title="Open Component Settings"
1044
- @click.prevent="openSettingsSidebar('CmdBox')"></a>
628
+ @click.prevent="openSettingsSidebar('CmdBox')"></a>
1045
629
  </h3>
1046
- <CmdBox
1047
- ref="CmdBox"
1048
- v-bind="cmdBoxSettingsData"
1049
- textBody="Content"
1050
- :useSlots="['body', 'footer']"
1051
- :cmd-headline="{headlineText: 'Headline for box', headlineLevel: 4}"
1052
- :stretchVertically="true"
1053
- >
630
+ <CmdBox ref="CmdBox" v-bind="cmdBoxSettingsData" textBody="Content" :useSlots="['body', 'footer']"
631
+ :cmd-headline="{ headlineText: 'Headline for box', headlineLevel: 4 }" :stretchVertically="true">
1054
632
  <template v-slot:header>
1055
633
  <h4>
1056
634
  Texts given by slots
@@ -1072,28 +650,16 @@
1072
650
  </p>
1073
651
  </template>
1074
652
  </CmdBox>
1075
- <CmdBoxWrapper
1076
- :useFlexbox="true"
1077
- :cmdHeadline="{headlineText: 'Boxes in BoxWrapper with flexbox', headlineLevel: 3}"
1078
- :useGap="true"
1079
- >
1080
- <CmdBox
1081
- v-for="index in 14"
1082
- :key="index"
1083
- textBody="Content"
1084
- :cmd-headline="{headlineText: 'Headline ' + index, headlineLevel: 4}"
1085
- />
653
+ <CmdBoxWrapper :useFlexbox="true"
654
+ :cmdHeadline="{ headlineText: 'Boxes in BoxWrapper with flexbox', headlineLevel: 3 }" :useGap="true">
655
+ <CmdBox v-for="index in 14" :key="index" textBody="Content"
656
+ :cmd-headline="{ headlineText: 'Headline ' + index, headlineLevel: 4 }" />
1086
657
  </CmdBoxWrapper>
1087
- <CmdBoxWrapper
1088
- :use-gap="true"
1089
- :cmdHeadline="{headlineText: 'Different examples of content-boxes (in BoxWrapper)', headlineLevel: 3}"
1090
- >
1091
- <CmdBox
1092
- :stretchVertically="false"
1093
- :cmdHeadline="{headlineText: 'Box with cutoff text', headlineLevel: 4}"
1094
- :useSlots="['body']"
1095
- :cutoff-text-lines="4"
1096
- >
658
+ <CmdBoxWrapper :use-gap="true"
659
+ :cmdHeadline="{ headlineText: 'Different examples of content-boxes (in BoxWrapper)', headlineLevel: 3 }">
660
+ <CmdBox :stretchVertically="false"
661
+ :cmdHeadline="{ headlineText: 'Box with cutoff text', headlineLevel: 4 }" :useSlots="['body']"
662
+ :cutoff-text-lines="4">
1097
663
  <template v-slot:body>
1098
664
  This is a long text that is cutoff after a specific number of lines that can be defined
1099
665
  by the property 'cutoffTextLines' and be toggled by a link below.
@@ -1128,21 +694,11 @@
1128
694
  </h4>
1129
695
  </template>
1130
696
  <template v-slot:body>
1131
- <CmdForm :legend="{show: false}">
1132
- <CmdFormElement
1133
- element="input"
1134
- type="text"
1135
- :required="true"
1136
- labelText="Username:"
1137
- placeholder="Username"
1138
- />
1139
- <CmdFormElement
1140
- element="input"
1141
- type="password"
1142
- :required="true"
1143
- labelText="Password:"
1144
- placeholder="Password"
1145
- />
697
+ <CmdForm :legend="{ show: false }">
698
+ <CmdFormElement element="input" type="text" :required="true" labelText="Username:"
699
+ placeholder="Username" />
700
+ <CmdFormElement element="input" type="password" :required="true" labelText="Password:"
701
+ placeholder="Password" />
1146
702
  </CmdForm>
1147
703
  </template>
1148
704
  <!-- will not be displayed, because useSlots-property does not contain 'footer' in array -->
@@ -1173,18 +729,15 @@
1173
729
  </p>
1174
730
  </template>
1175
731
  </CmdBox>
1176
- <CmdBox
1177
- :useSlots="['header', 'body']"
1178
- :useBoxBodyPadding="false"
1179
- :cmdHeadline="{headlineText: 'Collapsible box', headlineLevel: 4}"
1180
- :collapsible="true">
732
+ <CmdBox :useSlots="['header', 'body']" :useBoxBodyPadding="false"
733
+ :cmdHeadline="{ headlineText: 'Collapsible box', headlineLevel: 4 }" :collapsible="true">
1181
734
  <template v-slot:header>
1182
735
  <h4>
1183
736
  Collapsible box with image
1184
737
  </h4>
1185
738
  </template>
1186
739
  <template v-slot:body>
1187
- <img src="/media/images/content-images/landscape-medium.jpg" alt="Alternative text"/>
740
+ <img src="/media/images/content-images/landscape-medium.jpg" alt="Alternative text" />
1188
741
  </template>
1189
742
  </CmdBox>
1190
743
  <CmdBox :useSlots="['header', 'body', 'footer']" :useBoxBodyPadding="false">
@@ -1194,7 +747,7 @@
1194
747
  </h4>
1195
748
  </template>
1196
749
  <template v-slot:body>
1197
- <img src="/media/images/content-images/landscape-medium.jpg" alt="Alternative text"/>
750
+ <img src="/media/images/content-images/landscape-medium.jpg" alt="Alternative text" />
1198
751
  <div class="default-padding">
1199
752
  <h4>Custom headline</h4>
1200
753
  <p>Image, custom-headline and this text for the component are given by slot</p>
@@ -1206,72 +759,70 @@
1206
759
  </p>
1207
760
  </template>
1208
761
  </CmdBox>
1209
- <CmdBox
1210
- :repeatHeadlineInBoxBody="true"
1211
- :useBoxBodyPadding="true"
1212
- :cmdHeadline="{headlineText: 'Box with image, content and link', headlineLevel: 4}"
762
+ <CmdBox :repeatHeadlineInBoxBody="true" :useBoxBodyPadding="true"
763
+ :cmdHeadline="{ headlineText: 'Box with image, content and link', headlineLevel: 4 }"
1213
764
  textBody="Image, headline and this text for the component are given by property"
1214
- :cmdImage="{image: {src: '/media/images/content-images/landscape-medium.jpg', alt: 'Alternative text'}}"
765
+ :cmdImage="{ image: { src: '/media/images/content-images/landscape-medium.jpg', alt: 'Alternative text' } }"
1215
766
  :cmdLink="{
1216
- linkType: 'href',
1217
- path: '#',
1218
- icon: {
1219
- iconClass: 'icon-chevron-two-stripes-right',
1220
- position: 'right'
1221
- },
1222
- text: 'Read more'
1223
- }"
1224
- />
1225
- <CmdBox
1226
- :useBoxBodyPadding="true"
1227
- :cmdHeadline="{headlineText: 'Box with large icon and some content', headlineLevel: 4}"
1228
- headlinePosition="body"
1229
- :cmdIcon="{iconClass: 'icon-home', type: 'auto'}"
1230
- textBody="Box with large icon, headline in body and content all given by properties."
1231
- />
767
+ linkType: 'href',
768
+ path: '#',
769
+ icon: {
770
+ iconClass: 'icon-chevron-two-stripes-right',
771
+ position: 'right'
772
+ },
773
+ text: 'Read more'
774
+ }" />
775
+ <CmdBox :useBoxBodyPadding="true"
776
+ :cmdHeadline="{ headlineText: 'Box with large icon and some content', headlineLevel: 4 }"
777
+ headlinePosition="body" :cmdIcon="{ iconClass: 'icon-home', type: 'auto' }"
778
+ textBody="Box with large icon, headline in body and content all given by properties." />
1232
779
  </CmdBoxWrapper>
780
+
781
+ <!-- begin product boxes -->
1233
782
  <h3>Product boxes</h3>
1234
- <div class="grid-container-create-columns">
1235
- <div class="grid-small-item" v-for="(product, index) in boxProductData" :key="index">
1236
- <CmdBox boxType="product" :product="product" :cmdHeadline="{headlineLevel: 4}"/>
1237
- </div>
1238
- </div>
783
+ <CmdBoxWrapper :boxesPerRow="[5, 2, 1]" :useRowViewAsDefault="true" :useGap="true">
784
+ <template v-slot="slotProps">
785
+ <CmdBox
786
+ v-for="(product, index) in boxProductData"
787
+ :key="index"
788
+ boxType="product"
789
+ :product="product"
790
+ :cmdHeadline="{ headlineLevel: 4 }"
791
+ :rowView="slotProps.rowView"
792
+ />
793
+ </template>
794
+ </CmdBoxWrapper>
795
+ <!-- end product boxes -->
796
+
797
+ <!-- begin user boxes -->
1239
798
  <h3>User boxes</h3>
1240
799
  <CmdBoxWrapper :boxesPerRow="[5, 2, 1]" :useRowViewAsDefault="true" :useGap="true">
1241
800
  <template v-slot="slotProps">
1242
- <CmdBox
1243
- v-for="index in boxUserData.length"
1244
- :key="index" boxType="user"
1245
- :user="boxUserData[index - 1]"
1246
- :cmdHeadline="{headlineLevel: 5}"
1247
- :rowView="slotProps.rowView"
801
+ <CmdBox
802
+ v-for="index in boxUserData.length"
803
+ :key="index"
804
+ boxType="user"
805
+ :user="boxUserData[index - 1]"
806
+ :cmdHeadline="{ headlineLevel: 5 }"
807
+ :rowView="slotProps.rowView"
1248
808
  />
1249
809
  </template>
1250
810
  </CmdBoxWrapper>
811
+ <!-- end user boxes -->
812
+
1251
813
  <h3><span>Boxes in BoxWrapper (collapsible)</span>
1252
814
  <a href="#" class="button small icon-cog" title="Open Component Settings"
1253
- @click.prevent="openSettingsSidebar('CmdBoxWrapper')"></a>
815
+ @click.prevent="openSettingsSidebar('CmdBoxWrapper')"></a>
1254
816
  </h3>
1255
- <CmdBoxWrapper
1256
- ref="CmdBoxWrapper"
1257
- :boxesPerRow="[5, 2, 1]"
1258
- :openBoxesByDefault="[2]"
1259
- :useRowViewAsDefault="true"
1260
- :allowMultipleExpandedBoxes="false"
1261
- :stretch-boxes-vertically="true"
817
+ <CmdBoxWrapper ref="CmdBoxWrapper" :boxesPerRow="[4, 1]" :openBoxesByDefault="[2]"
818
+ :useRowViewAsDefault="true" :allowMultipleExpandedBoxes="false" :stretch-boxes-vertically="true"
1262
819
  :useGap="true">
1263
820
  <template v-slot="slotProps">
1264
- <CmdBox
1265
- v-for="index in boxProductData.length"
1266
- :key="index"
1267
- boxType="content"
1268
- :collapsible="true"
1269
- :useSlots="['body']"
1270
- :cmdHeadline="{headlineText: 'Box ' + index, headlineLevel: 5}"
1271
- :rowView="slotProps.rowView"
821
+ <CmdBox v-for="index in boxProductData.length" :key="index" boxType="content"
822
+ :collapsible="true" :useSlots="['body']"
823
+ :cmdHeadline="{ headlineText: 'Box ' + index, headlineLevel: 5 }" :rowView="slotProps.rowView"
1272
824
  :openCollapsedBox="slotProps.boxIsOpen(index - 1)"
1273
- @toggleCollapse="slotProps.boxToggled(index - 1, $event)"
1274
- >
825
+ @toggleCollapse="slotProps.boxToggled(index - 1, $event)">
1275
826
  <template #body>{{ slotProps.currentOpenBox }}Content {{ index }}</template>
1276
827
  </CmdBox>
1277
828
  </template>
@@ -1284,87 +835,92 @@
1284
835
  <h2 class="headline-demopage" id="section-breadcrumbs">
1285
836
  <span>Breadcrumbs</span>
1286
837
  <a href="#" class="button small icon-cog" title="Open Component Settings"
1287
- @click.prevent="openSettingsSidebar('CmdBreadcrumbs')"></a>
838
+ @click.prevent="openSettingsSidebar('CmdBreadcrumbs')"></a>
1288
839
  </h2>
1289
- <CmdBreadcrumbs
1290
- ref="CmdBreadcrumbs"
1291
- :breadcrumbLabel="breadcrumbsData.breadcrumbLabel"
1292
- :breadcrumbLinks="breadcrumbsData.breadcrumbLinks"
1293
- v-bind="cmdBreadcrumbsSettingsData"
1294
- />
840
+ <CmdBreadcrumbs ref="CmdBreadcrumbs" :breadcrumbLabel="breadcrumbsData.breadcrumbLabel"
841
+ :breadcrumbLinks="breadcrumbsData.breadcrumbLinks" v-bind="cmdBreadcrumbsSettingsData" />
1295
842
  </CmdWidthLimitationWrapper>
1296
843
  <!-- end breadcrumbs --------------------------------------------------------------------------------------------------->
1297
844
 
1298
- <!-- begin code-output --------------------------------------------------------------------------------------------------->
1299
-
845
+ <!-- begin code-output --------------------------------------------------------------------------------------------------->
846
+
1300
847
  <CmdWidthLimitationWrapper>
1301
848
  <h2 class="headline-demopage" id="section-code-output">
1302
849
  <span>Code Output</span>
1303
850
  <a href="#" class="button small icon-cog" title="Open Component Settings"
1304
- @click.prevent="openSettingsSidebar('CmdCodeOutput')"></a>
851
+ @click.prevent="openSettingsSidebar('CmdCodeOutput')"></a>
1305
852
  </h2>
1306
853
  <CmdCodeOutput ref="CmdCodeOutput" v-bind="cmdCodeOutputSettingsData">
1307
854
  {{ cmdCodeOutputSlotContent }}
1308
855
  </CmdCodeOutput>
1309
856
  </CmdWidthLimitationWrapper>
1310
- <!-- end code-output --------------------------------------------------------------------------------------------------->
857
+ <!-- end code-output --------------------------------------------------------------------------------------------------->
1311
858
 
1312
859
  <!-- begin company-logo --------------------------------------------------------------------------------------------------->
1313
860
  <CmdWidthLimitationWrapper>
1314
861
  <h2 class="headline-demopage" id="section-company-logo">
1315
862
  <span>Company Logo</span>
1316
863
  <a href="#" class="button small icon-cog" title="Open Component Settings"
1317
- @click.prevent="openSettingsSidebar('CmdCompanyLogo')"></a>
864
+ @click.prevent="openSettingsSidebar('CmdCompanyLogo')"></a>
1318
865
  </h2>
1319
- <CmdCompanyLogo
1320
- ref="CmdCompanyLogo"
1321
- :link="companyLogoData.link"
1322
- v-bind="cmdCompanyLogoSettingsData"
1323
- />
866
+ <CmdCompanyLogo ref="CmdCompanyLogo" :link="companyLogoData.link" v-bind="cmdCompanyLogoSettingsData" />
1324
867
  </CmdWidthLimitationWrapper>
1325
868
  <!-- end company-logo --------------------------------------------------------------------------------------------------->
1326
869
 
1327
870
  <!-- begin container --------------------------------------------------------------------------------------------------->
1328
871
  <CmdWidthLimitationWrapper>
1329
872
  <h2 class="headline-demopage" id="section-container">
1330
- <span>Container</span>
873
+ <span>Containers</span>
1331
874
  <a href="#" class="button small icon-cog" title="Open Component Settings"
1332
- @click.prevent="openSettingsSidebar('CmdContainer')"></a>
875
+ @click.prevent="openSettingsSidebar('CmdContainer')"></a>
1333
876
  </h2>
1334
- <h3>Default Container</h3>
1335
- <CmdContainer
1336
- style="border: 1px dotted gray"
1337
- ref="CmdContainer"
877
+ <h3>Container (type "default")</h3>
878
+ <CmdContainer
879
+ style="border: 1px dashed var(--color-gray-30)"
880
+ ref="CmdContainer"
1338
881
  v-bind="cmdContainerSettingsData"
1339
- />
1340
- <h3>Container with default-text</h3>
1341
- <CmdContainer
1342
- style="border: 1px dotted gray"
882
+ >
883
+ <p>Slot-content</p>
884
+ <p>Slot-content</p>
885
+ <p>Slot-content</p>
886
+ </CmdContainer>
887
+ <h3>Container (type "flex", horizontal)</h3>
888
+ <CmdContainer
889
+ style="border: 1px dashed var(--color-gray-30)"
1343
890
  ref="CmdContainer"
1344
- innerText="Some inner text"
1345
- containerType="flex"
891
+ v-bind="cmdContainerSettingsData"
892
+ containerType="flex"
1346
893
  contentOrientation="horizontal"
1347
- />
1348
- <h3>Container with vertical slots</h3>
1349
- <CmdContainer
1350
- style="border: 1px dotted gray"
1351
- ref="CmdContainer"
894
+ >
895
+ <p>Slot-content</p>
896
+ <p>Slot-content</p>
897
+ <p>Slot-content</p>
898
+ </CmdContainer>
899
+ <h3>Container (type "flex", vertical)</h3>
900
+ <CmdContainer
901
+ style="border: 1px dashed var(--color-gray-30)"
902
+ ref="CmdContainer"
1352
903
  v-bind="cmdContainerSettingsData"
904
+ containerType="flex"
905
+ contentOrientation="vertical"
1353
906
  >
1354
907
  <p>Slot-content</p>
1355
908
  <p>Slot-content</p>
1356
909
  <p>Slot-content</p>
1357
910
  </CmdContainer>
1358
911
  <h3>Container with horizontal slots</h3>
1359
- <CmdContainer
1360
- style="border: 1px dotted gray"
1361
- ref="CmdContainer"
912
+ <CmdContainer
913
+ style="border: 1px dashed var(--color-gray-30)"
914
+ ref="CmdContainer"
1362
915
  v-bind="cmdContainerSettingsData"
1363
- contentOrientation="horizontal"
1364
- innerClass="inner-class"
916
+ containerType="grid"
1365
917
  >
1366
- <component :is="componentNameForContainer" headlineText="Headline 1" headlineLevel="6"/>
1367
- <component :is="componentNameForContainer" headlineText="Headline 2" headlineLevel="6"/>
918
+ <p>Slot-content</p>
919
+ <p>Slot-content</p>
920
+ <p>Slot-content</p>
921
+ <p>Slot-content</p>
922
+ <p>Slot-content</p>
923
+ <p>Slot-content</p>
1368
924
  </CmdContainer>
1369
925
  </CmdWidthLimitationWrapper>
1370
926
  <!-- end container --------------------------------------------------------------------------------------------------->
@@ -1382,43 +938,17 @@
1382
938
  <CmdWidthLimitationWrapper>
1383
939
  <h2 class="headline-demopage" id="section-forms">Forms</h2>
1384
940
  <h3>Form elements given by data</h3>
1385
- <CmdForm
1386
- :useFieldset="true"
1387
- :useSlot="false"
1388
- id="form-component"
1389
- novalidate="novalidate"
1390
- :formElements="formElementsData"
1391
- @submit="doConsoleLog"
1392
- />
941
+ <CmdForm :useFieldset="true" :useSlot="false" id="form-component" novalidate="novalidate"
942
+ :formElements="formElementsData" @submit="doConsoleLog" />
1393
943
  <h3>Form elements given by slot</h3>
1394
- <CmdForm
1395
- :use-fieldset="true"
1396
- id="form-component"
1397
- novalidate="novalidate"
1398
- :submitButton="{position: 'belowFieldset'}"
1399
- @submit="doConsoleLog"
1400
- >
1401
- <CmdFormElement
1402
- element="input"
1403
- text="text"
1404
- name="input-text"
1405
- labelText="Text input"
1406
- placeholder="Text input"
1407
- />
1408
- <CmdFormElement
1409
- element="input"
1410
- text="number"
1411
- labelText="Number input"
1412
- name="input-number"
1413
- modelValue="1"
1414
- />
1415
- <CmdFormElement
1416
- element="input"
1417
- text="password"
1418
- labelText="Password input"
1419
- name="password-number"
1420
- placeholder="Password input"
1421
- />
944
+ <CmdForm :use-fieldset="true" id="form-component" novalidate="novalidate"
945
+ :submitButton="{ position: 'belowFieldset' }" @submit="doConsoleLog">
946
+ <CmdFormElement element="input" text="text" name="input-text" labelText="Text input"
947
+ placeholder="Text input" />
948
+ <CmdFormElement element="input" text="number" labelText="Number input" name="input-number"
949
+ modelValue="1" />
950
+ <CmdFormElement element="input" text="password" labelText="Password input" name="password-number"
951
+ placeholder="Password input" />
1422
952
  </CmdForm>
1423
953
  </CmdWidthLimitationWrapper>
1424
954
  <!-- end forms --------------------------------------------------------------------------------------------------->
@@ -1427,35 +957,28 @@
1427
957
  <CmdWidthLimitationWrapper>
1428
958
  <h2 class="headline-demopage" id="section-fancybox">Fancybox</h2>
1429
959
  <h3>FancyBox with text</h3>
1430
- <a href="#" @click.prevent="showFancyBox('text','Some text', 'FancyBox with text')">Open FancyBox
960
+ <a href="#" @click.prevent="showFancyBox('text', 'Some text', 'FancyBox with text')">Open FancyBox
1431
961
  with text</a>
1432
962
  <h3>FancyBox with large image given by url</h3>
1433
963
  <a href="#"
1434
- @click.prevent="showFancyBox('url', '/media/images/demo-images/large/landscape-01.jpg', 'FancyBox with large image given by url')"
1435
- title="Open FancyBox with large image given by url"
1436
- style="align-self: flex-start"
1437
- >
1438
- <img src="/media/images/demo-images/small/landscape-01.jpg" alt="Alternative text"/>
964
+ @click.prevent="showFancyBox('url', '/media/images/demo-images/large/landscape-01.jpg', 'FancyBox with large image given by url')"
965
+ title="Open FancyBox with large image given by url" style="align-self: flex-start">
966
+ <img src="/media/images/demo-images/small/landscape-01.jpg" alt="Alternative text" />
1439
967
  </a>
1440
968
  <h3>FancyBox with large image given by property</h3>
1441
969
  <a href="#"
1442
- @click.prevent="showFancyBox('image', {large:'/media/images/demo-images/large/landscape-02.jpg'}, 'FancyBox with large image given by property')"
1443
- title="Open FancyBox with large image given by property"
1444
- style="align-self: flex-start"
1445
- >
1446
- <img src="/media/images/demo-images/small/landscape-02.jpg" alt="Alternative text"/>
970
+ @click.prevent="showFancyBox('image', { large: '/media/images/demo-images/large/landscape-02.jpg' }, 'FancyBox with large image given by property')"
971
+ title="Open FancyBox with large image given by property" style="align-self: flex-start">
972
+ <img src="/media/images/demo-images/small/landscape-02.jpg" alt="Alternative text" />
1447
973
  </a>
1448
974
  <h3>FancyBox with image as object give by property</h3>
1449
- <a href="#"
1450
- @click.prevent="showFancyBox('image', {
1451
- small: '/media/images/demo-images/medium/landscape-03.jpg',
1452
- medium: '/media/images/demo-images/medium/landscape-03.jpg',
1453
- large: '/media/images/demo-images/large/landscape-03.jpg'
1454
- }, 'FancyBox with large image given by property')"
1455
- title="Open FancyBox with large image given by property"
1456
- style="align-self: flex-start"
1457
- >
1458
- <img src="/media/images/demo-images/small/landscape-03.jpg" alt="Alternative text"/>
975
+ <a href="#" @click.prevent="showFancyBox('image', {
976
+ small: '/media/images/demo-images/medium/landscape-03.jpg',
977
+ medium: '/media/images/demo-images/medium/landscape-03.jpg',
978
+ large: '/media/images/demo-images/large/landscape-03.jpg'
979
+ }, 'FancyBox with large image given by property')"
980
+ title="Open FancyBox with large image given by property" style="align-self: flex-start">
981
+ <img src="/media/images/demo-images/small/landscape-03.jpg" alt="Alternative text" />
1459
982
  </a>
1460
983
 
1461
984
  </CmdWidthLimitationWrapper>
@@ -1464,14 +987,14 @@
1464
987
  <!-- begin flexible-scroll-container --------------------------------------------------------------------------------------------------->
1465
988
  <CmdWidthLimitationWrapper>
1466
989
  <h2 class="headline-demopage" id="section-flexible-scroll-container">Flexible Scroll-Container</h2>
1467
- <CmdFlexibleScrollContainer style="border: 1px dotted gray">
990
+ <CmdFlexibleScrollContainer style="border: 1px dashed var(--color-gray-30)">
1468
991
  <template v-slot:fixed-wrapper>
1469
- <div class="default-padding" style="border: 1px dotted gray">
992
+ <div class="default-padding" style="border: 1px dashed var(--color-gray-30)">
1470
993
  Fixed content
1471
994
  </div>
1472
995
  </template>
1473
996
  <template v-slot:scroll-wrapper>
1474
- <div class="default-padding" style="border: 1px dotted gray">
997
+ <div class="default-padding" style="border: 1px dashed var(--color-gray-30)">
1475
998
  <ul>
1476
999
  <li>Dynamic Content</li>
1477
1000
  <li>Dynamic Content</li>
@@ -1509,7 +1032,7 @@
1509
1032
  <!-- begin google-maps --------------------------------------------------------------------------------------------------->
1510
1033
  <CmdWidthLimitationWrapper>
1511
1034
  <h2 class="headline-demopage" id="section-google-maps">Google Maps&trade;</h2>
1512
- <CmdGoogleMaps :address="addressData[1]"/>
1035
+ <CmdGoogleMaps :address="addressData[1]" />
1513
1036
  </CmdWidthLimitationWrapper>
1514
1037
  <!-- end google-maps --------------------------------------------------------------------------------------------------->
1515
1038
 
@@ -1518,31 +1041,15 @@
1518
1041
  <h2 class="headline-demopage" id="section-headlines">
1519
1042
  <span>Headlines</span>
1520
1043
  <a href="#" class="button small icon-cog" title="Open Component Settings"
1521
- @click.prevent="openSettingsSidebar('CmdHeadline')"></a>
1044
+ @click.prevent="openSettingsSidebar('CmdHeadline')"></a>
1522
1045
  </h2>
1523
- <CmdHeadline
1524
- ref="CmdHeadline"
1525
- v-bind="cmdHeadlineSettingsData"
1526
- />
1527
- <CmdHeadline
1528
- v-bind="cmdHeadlineSettingsData"
1529
- :cmdIcon="{iconClass: 'icon-home'}"
1530
- />
1531
- <CmdHeadline
1532
- headlineLevel="3"
1533
- headlineText="Headline text"
1534
- :cmdIcon="{iconClass: 'icon-home'}"
1535
- />
1536
- <CmdHeadline
1537
- ref="CmdHeadline"
1538
- headlineLevel="3"
1539
- headlineText="Headline text<br /> with html-content given by property"
1540
- />
1541
- <CmdHeadline
1542
- ref="CmdHeadline"
1543
- headlineLevel="3"
1544
- >
1545
- Headline text<br/> with html-content given by slot
1046
+ <CmdHeadline ref="CmdHeadline" v-bind="cmdHeadlineSettingsData" />
1047
+ <CmdHeadline v-bind="cmdHeadlineSettingsData" :cmdIcon="{ iconClass: 'icon-home' }" />
1048
+ <CmdHeadline headlineLevel="3" headlineText="Headline text" :cmdIcon="{ iconClass: 'icon-home' }" />
1049
+ <CmdHeadline ref="CmdHeadline" headlineLevel="3"
1050
+ headlineText="Headline text<br /> with html-content given by property" />
1051
+ <CmdHeadline ref="CmdHeadline" headlineLevel="3">
1052
+ Headline text<br /> with html-content given by slot
1546
1053
  </CmdHeadline>
1547
1054
 
1548
1055
  </CmdWidthLimitationWrapper>
@@ -1554,23 +1061,23 @@
1554
1061
  <ul>
1555
1062
  <li>
1556
1063
  <span>Icon from local iconfont</span>
1557
- <CmdIcon iconClass="icon-home"/>
1064
+ <CmdIcon iconClass="icon-home" />
1558
1065
  </li>
1559
1066
  <li>
1560
1067
  <span>Icon from iconify-api (icomoon-font)</span>
1561
- <CmdIcon iconClass="icomoon-free:home"/>
1068
+ <CmdIcon iconClass="icomoon-free:home" />
1562
1069
  </li>
1563
1070
  <li>
1564
1071
  <span>Icon from iconify-api (bootstrap-font)</span>
1565
- <CmdIcon iconClass="bi:house-fill"/>
1072
+ <CmdIcon iconClass="bi:house-fill" />
1566
1073
  </li>
1567
1074
  <li>
1568
1075
  <span>Icon from iconify-api (material-design-font)</span>
1569
- <CmdIcon iconClass="mdi:home"/>
1076
+ <CmdIcon iconClass="mdi:home" />
1570
1077
  </li>
1571
1078
  <li>
1572
1079
  <span>Icon from iconify-api (font-awesome-solid-font)</span>
1573
- <CmdIcon iconClass="fa6-solid:house-chimney"/>
1080
+ <CmdIcon iconClass="fa6-solid:house-chimney" />
1574
1081
  </li>
1575
1082
  </ul>
1576
1083
  </CmdWidthLimitationWrapper>
@@ -1581,19 +1088,12 @@
1581
1088
  <h2 class="headline-demopage" id="section-image">
1582
1089
  <span>Image</span>
1583
1090
  <a href="#" class="button small icon-cog" title="Open Component Settings"
1584
- @click.prevent="openSettingsSidebar('CmdImage')"></a>
1091
+ @click.prevent="openSettingsSidebar('CmdImage')"></a>
1585
1092
  </h2>
1586
1093
  <div class="flex-container">
1587
- <CmdImage
1588
- ref="CmdImage"
1589
- :image="imageData[0].image"
1590
- :figcaption="imageData[0].figcaption"
1591
- v-bind="cmdImageSettingsData"
1592
- />
1593
- <CmdImage
1594
- :image="imageData[1].image"
1595
- :figcaption="imageData[1].figcaption"
1596
- />
1094
+ <CmdImage ref="CmdImage" :image="imageData[0].image" :figcaption="imageData[0].figcaption"
1095
+ v-bind="cmdImageSettingsData" />
1096
+ <CmdImage :image="imageData[1].image" :figcaption="imageData[1].figcaption" />
1597
1097
  </div>
1598
1098
  </CmdWidthLimitationWrapper>
1599
1099
  <!-- end images --------------------------------------------------------------------------------------------------->
@@ -1603,13 +1103,10 @@
1603
1103
  <h2 class="headline-demopage" id="section-image-gallery">
1604
1104
  <span>Image-Gallery</span>
1605
1105
  <a href="#" class="button small icon-cog" title="Open Component Settings"
1606
- @click.prevent="openSettingsSidebar('CmdImageGallery')"></a>
1106
+ @click.prevent="openSettingsSidebar('CmdImageGallery')"></a>
1607
1107
  </h2>
1608
- <CmdImageGallery
1609
- ref="CmdImageGallery"
1610
- :images="imageGalleryData"
1611
- v-bind="cmdImageGallerySettingsData"
1612
- />
1108
+ <CmdImageGallery ref="CmdImageGallery" :images="imageGalleryData"
1109
+ v-bind="cmdImageGallerySettingsData" />
1613
1110
  </CmdWidthLimitationWrapper>
1614
1111
  <!-- end image-gallery --------------------------------------------------------------------------------------------------->
1615
1112
 
@@ -1618,10 +1115,7 @@
1618
1115
  <h2 class="headline-demopage" id="section-image-zoom">
1619
1116
  Image-Zoom
1620
1117
  </h2>
1621
- <CmdImageZoom
1622
- :imageSmall="imageZoomData.imageSmall"
1623
- :imageLarge="imageZoomData.imageLarge"
1624
- />
1118
+ <CmdImageZoom :imageSmall="imageZoomData.imageSmall" :imageLarge="imageZoomData.imageLarge" />
1625
1119
  </CmdWidthLimitationWrapper>
1626
1120
  <!-- end image-zoom --------------------------------------------------------------------------------------------------->
1627
1121
 
@@ -1630,71 +1124,35 @@
1630
1124
  <h2 class="headline-demopage" id="section-link">
1631
1125
  <span>Link</span>
1632
1126
  <a href="#" class="button small icon-cog" title="Open Component Settings"
1633
- @click.prevent="openSettingsSidebar('CmdLink')"></a>
1127
+ @click.prevent="openSettingsSidebar('CmdLink')"></a>
1634
1128
  </h2>
1635
- <CmdLink
1636
- linkType="href"
1637
- ref="CmdLink"
1638
- v-bind="cmdLinkSettingsData"
1639
- :icon="{iconClass: 'icon-chevron-one-stripe-right', position: 'right', tooltip: 'Tooltip for hyperlink'}"
1640
- @click="cmdLinkOutput"
1641
- />
1642
- <CmdLink
1643
- linkType="href"
1644
- ref="CmdLink"
1645
- v-bind="cmdLinkSettingsData"
1646
- :icon="{iconClass: 'icon-chevron-one-stripe-left', position: 'left', tooltip: 'Tooltip for hyperlink'}"
1647
- @click="cmdLinkOutput"
1648
- />
1649
- <CmdLink
1650
- linkType="href"
1651
- ref="CmdLink"
1652
- v-bind="cmdLinkSettingsData"
1653
- text="Link with fancybox"
1654
- :fancybox="true"
1655
- :icon="{iconClass: 'icon-chevron-one-stripe-right', position: 'right', tooltip: 'Tooltip for hyperlink'}"
1656
- />
1657
- <CmdLink
1658
- linkType="href"
1659
- ref="CmdLink"
1660
- style="align-self: flex-start"
1661
- v-bind="cmdLinkSettingsData"
1662
- text="Link styled as box"
1663
- :styleAsBox="true"
1664
- :icon="{iconClass: 'icon-home', position: 'top', tooltip: 'Tooltip for hyperlink'}"
1665
- />
1666
- <CmdLink
1667
- linkType="href"
1668
- :styleAsButton="true"
1669
- text="Link styled as button"
1670
- :icon="{iconClass: 'icon-home', position: 'left'}"
1671
- @click="cmdLinkOutput"
1672
- />
1673
- <CmdLink
1674
- linkType="submit"
1675
- text="Submit button"
1676
- :icon="{iconClass: 'icon-home', position: 'left'}"
1677
- @click="cmdLinkOutput"
1678
- />
1679
- <CmdLink
1680
- linkType="button"
1681
- text="Add link"
1682
- :primaryButton="true"
1683
- :icon="{iconClass: 'icon-link', position: 'right'}"
1684
- @click="showCmdLink = true"
1685
- />
1686
- <CmdLink
1687
- v-if="showCmdLink"
1688
- path="#"
1689
- linkType="href"
1690
- text="Link added on click"
1129
+ <CmdLink linkType="href" ref="CmdLink" v-bind="cmdLinkSettingsData"
1130
+ :icon="{ iconClass: 'icon-chevron-one-stripe-right', position: 'right', tooltip: 'Tooltip for hyperlink' }"
1131
+ @click="cmdLinkOutput" />
1132
+ <CmdLink linkType="href" ref="CmdLink" v-bind="cmdLinkSettingsData"
1133
+ :icon="{ iconClass: 'icon-chevron-one-stripe-left', position: 'left', tooltip: 'Tooltip for hyperlink' }"
1134
+ @click="cmdLinkOutput" />
1135
+ <CmdLink linkType="href" ref="CmdLink" v-bind="cmdLinkSettingsData" text="Link with fancybox"
1691
1136
  :fancybox="true"
1692
- :icon="{iconClass: 'icon-chevron-one-stripe-right', position: 'right', tooltip: 'Tooltip for hyperlink'}"
1693
- />
1137
+ :icon="{ iconClass: 'icon-chevron-one-stripe-right', position: 'right', tooltip: 'Tooltip for hyperlink' }" />
1138
+ <CmdLink linkType="href" ref="CmdLink" style="align-self: flex-start" v-bind="cmdLinkSettingsData"
1139
+ text="Link styled as box" :styleAsBox="true"
1140
+ :icon="{ iconClass: 'icon-home', position: 'top', tooltip: 'Tooltip for hyperlink' }" />
1141
+ <CmdLink linkType="href" :styleAsButton="true" text="Link styled as button"
1142
+ :icon="{ iconClass: 'icon-home', position: 'left' }" @click="cmdLinkOutput" />
1143
+ <CmdLink linkType="submit" text="Submit button" :icon="{ iconClass: 'icon-home', position: 'left' }"
1144
+ @click="cmdLinkOutput" />
1145
+ <CmdLink linkType="button" text="Add link" :primaryButton="true"
1146
+ :icon="{ iconClass: 'icon-link', position: 'right' }" @click="showCmdLink = true" />
1147
+ <CmdLink v-if="showCmdLink" path="#" linkType="href" text="Link added on click" :fancybox="true"
1148
+ :icon="{ iconClass: 'icon-chevron-one-stripe-right', position: 'right', tooltip: 'Tooltip for hyperlink' }" />
1694
1149
  <dl class="output">
1695
- <dt>Event:</dt><dd>{{outputCmdLink?.event?.originalEvent.originalEvent}}</dd>
1696
- <dt>Target:</dt><dd>{{outputCmdLink?.event?.originalEvent.target}}</dd>
1697
- <dt>LinkType:</dt><dd>{{outputCmdLink?.event?.originalEvent.linkType}}</dd>
1150
+ <dt>Event:</dt>
1151
+ <dd>{{ outputCmdLink?.event?.originalEvent.originalEvent }}</dd>
1152
+ <dt>Target:</dt>
1153
+ <dd>{{ outputCmdLink?.event?.originalEvent.target }}</dd>
1154
+ <dt>LinkType:</dt>
1155
+ <dd>{{ outputCmdLink?.event?.originalEvent.linkType }}</dd>
1698
1156
  </dl>
1699
1157
  </CmdWidthLimitationWrapper>
1700
1158
  <!-- end link --------------------------------------------------------------------------------------------------->
@@ -1704,33 +1162,49 @@
1704
1162
  <h2 class="headline-demopage" id="section-list">
1705
1163
  <span>List</span>
1706
1164
  <a href="#" class="button small icon-cog" title="Open Component Settings"
1707
- @click.prevent="openSettingsSidebar('CmdList')"></a>
1165
+ @click.prevent="openSettingsSidebar('CmdList')"></a>
1708
1166
  </h2>
1709
- <CmdList
1710
- :cmdHeadline="{headlineText: 'List of links', headlineLevel: 3}"
1711
- ref="CmdList"
1712
- v-bind="cmdListSettingsData"
1713
- :items="listData"
1714
- listType="links"
1715
- @click="cmdLinkOutput"
1716
- />
1167
+ <CmdList :cmdHeadline="{ headlineText: 'List of links', headlineLevel: 3 }" ref="CmdList"
1168
+ v-bind="cmdListSettingsData" :items="listData" listType="links" @click="cmdLinkOutput" />
1717
1169
  <dl class="output">
1718
- <dt>Event:</dt><dd>{{outputCmdLink?.event?.originalEvent}}</dd>
1719
- <dt>Target:</dt><dd>{{outputCmdLink?.event?.originalEvent.target}}</dd>
1720
- <dt>LinkType:</dt><dd>{{outputCmdLink?.event?.linkType}}</dd>
1170
+ <dt>Event:</dt>
1171
+ <dd>{{ outputCmdLink?.event?.originalEvent }}</dd>
1172
+ <dt>Target:</dt>
1173
+ <dd>{{ outputCmdLink?.event?.originalEvent.target }}</dd>
1174
+ <dt>LinkType:</dt>
1175
+ <dd>{{ outputCmdLink?.event?.linkType }}</dd>
1721
1176
  </dl>
1722
- <CmdList
1723
- :cmdHeadline="{headlineText: 'List of images', headlineLevel: 3}"
1724
- :items="imageGalleryData"
1725
- orientation="horizontal"
1726
- listType="images"
1727
- />
1728
- <CmdList
1729
- :cmdHeadline="{headlineText: 'List of tags', headlineLevel: 3}"
1730
- :items="listOfTagsData"
1731
- orientation="horizontal"
1732
- listType="tags"
1733
- />
1177
+ <CmdList :cmdHeadline="{ headlineText: 'List of images', headlineLevel: 3 }" :items="imageGalleryData"
1178
+ orientation="horizontal" listType="images" />
1179
+ <div class="flex-container">
1180
+ <CmdList
1181
+ :cmdHeadline="{ headlineText: 'List of tags (default)', headlineLevel: 3 }"
1182
+ :items="listOfTagsData"
1183
+ orientation="horizontal"
1184
+ listType="tags"
1185
+ />
1186
+ <CmdList
1187
+ :cmdHeadline="{ headlineText: 'List of tags (primary)', headlineLevel: 3 }"
1188
+ :items="listOfTagsData"
1189
+ orientation="horizontal"
1190
+ listType="tags"
1191
+ highlightLevel="primary"
1192
+ />
1193
+ <CmdList
1194
+ :cmdHeadline="{ headlineText: 'List of tags (secondary)', headlineLevel: 3 }"
1195
+ :items="listOfTagsData"
1196
+ orientation="horizontal"
1197
+ listType="tags"
1198
+ highlightLevel="secondary"
1199
+ />
1200
+ <CmdList
1201
+ :cmdHeadline="{ headlineText: 'List of tags (tertiary)', headlineLevel: 3 }"
1202
+ :items="listOfTagsData"
1203
+ orientation="horizontal"
1204
+ listType="tags"
1205
+ highlightLevel="tertiary"
1206
+ />
1207
+ </div>
1734
1208
  </CmdWidthLimitationWrapper>
1735
1209
  <!-- end list --------------------------------------------------------------------------------------------------->
1736
1210
 
@@ -1739,14 +1213,10 @@
1739
1213
  <h2 class="headline-demopage" id="section-login-form">
1740
1214
  <span>Login Form</span>
1741
1215
  <a href="#" class="button small icon-cog" title="Open Component Settings"
1742
- @click.prevent="openSettingsSidebar('CmdLoginForm')"></a>
1216
+ @click.prevent="openSettingsSidebar('CmdLoginForm')"></a>
1743
1217
  </h2>
1744
1218
  <CmdForm :use-fieldset="false">
1745
- <CmdLoginForm
1746
- ref="CmdLoginForm"
1747
- v-bind="cmdLoginFormSettingsData"
1748
- v-model="loginData"
1749
- />
1219
+ <CmdLoginForm ref="CmdLoginForm" v-bind="cmdLoginFormSettingsData" v-model="loginData" />
1750
1220
  </CmdForm>
1751
1221
  <p>LoginData: {{ loginData }}</p>
1752
1222
  </CmdWidthLimitationWrapper>
@@ -1757,11 +1227,7 @@
1757
1227
  <h2 class="headline-demopage" id="section-mail-tool">
1758
1228
  <span>Mail Tool</span>
1759
1229
  </h2>
1760
- <CmdMailTool
1761
- ref="CmdMailTool"
1762
- :mailsInbox="mailToolData.inbox"
1763
- :mailsOutbox="mailToolData.outbox"
1764
- />
1230
+ <CmdMailTool ref="CmdMailTool" :mailsInbox="mailToolData.inbox" :mailsOutbox="mailToolData.outbox" />
1765
1231
  </CmdWidthLimitationWrapper>
1766
1232
  <!-- end mail-tool --------------------------------------------------------------------------------------------------->
1767
1233
 
@@ -1770,13 +1236,10 @@
1770
1236
  <h2 class="headline-demopage" id="section-main-navigation">
1771
1237
  <span>Main Navigation</span>
1772
1238
  <a href="#" class="button small icon-cog" title="Open Component Settings"
1773
- @click.prevent="openSettingsSidebar('CmdMainNavigation')"></a>
1239
+ @click.prevent="openSettingsSidebar('CmdMainNavigation')"></a>
1774
1240
  </h2>
1775
- <CmdMainNavigation
1776
- ref="CmdMainNavigation"
1777
- v-bind="cmdMainNavigationSettingsData"
1778
- :navigationEntries="navigationDataModified"
1779
- />
1241
+ <CmdMainNavigation ref="CmdMainNavigation" v-bind="cmdMainNavigationSettingsData"
1242
+ :navigationEntries="navigationDataModified" />
1780
1243
  <!-- begin router-view -->
1781
1244
  <router-view v-if="useRouterLinks"></router-view>
1782
1245
  <!-- end router-view -->
@@ -1788,22 +1251,14 @@
1788
1251
  <h2 class="headline-demopage" id="section-multistep-form-progress-bar">
1789
1252
  <span>Multistepform-Progressbar</span>
1790
1253
  <a href="#" class="button small icon-cog" title="Open Component Settings"
1791
- @click.prevent="openSettingsSidebar('CmdMultistepFormProgressBar')"></a>
1254
+ @click.prevent="openSettingsSidebar('CmdMultistepFormProgressBar')"></a>
1792
1255
  </h2>
1793
1256
  <h3>Steps with icons</h3>
1794
- <CmdMultistepFormProgressBar
1795
- ref="CmdMultistepFormProgressBar"
1796
- :multisteps="multistepsData.withIcon"
1797
- v-bind="cmdMultistepFormProgressBarSettingsData"
1798
- @click="showPageMultistep = $event.index + 1"
1799
- />
1257
+ <CmdMultistepFormProgressBar ref="CmdMultistepFormProgressBar" :multisteps="multistepsData.withIcon"
1258
+ v-bind="cmdMultistepFormProgressBarSettingsData" @click="showPageMultistep = $event.index + 1" />
1800
1259
  <h3>Router</h3>
1801
- <CmdMultistepFormProgressBar
1802
- ref="CmdMultistepFormProgressBar"
1803
- :multisteps="multistepsData.router"
1804
- v-bind="cmdMultistepFormProgressBarSettingsData"
1805
- @click="showPageMultistep = $event.index + 1"
1806
- />
1260
+ <CmdMultistepFormProgressBar ref="CmdMultistepFormProgressBar" :multisteps="multistepsData.router"
1261
+ v-bind="cmdMultistepFormProgressBarSettingsData" @click="showPageMultistep = $event.index + 1" />
1807
1262
  <div>
1808
1263
  <p>Page {{ showPageMultistep }}</p>
1809
1264
  </div>
@@ -1815,15 +1270,12 @@
1815
1270
  <h2 class="headline-demopage" id="section-newsletter-subscription">
1816
1271
  <span>Newsletter Subscription</span>
1817
1272
  <a href="#" class="button small icon-cog" title="Open Component Settings"
1818
- @click.prevent="openSettingsSidebar('CmdNewsletterSubscription')"></a>
1273
+ @click.prevent="openSettingsSidebar('CmdNewsletterSubscription')"></a>
1819
1274
  </h2>
1820
1275
  <CmdForm :use-fieldset="false">
1821
- <CmdNewsletterSubscription
1822
- ref="CmdNewsletterSubscription"
1823
- v-bind="cmdNewsletterSubscriptionSettingsData"
1824
- v-model="newsletter"
1825
- @buttonClick="submitNewsletterRegistration"
1826
- />
1276
+ <CmdNewsletterSubscription ref="CmdNewsletterSubscription"
1277
+ v-bind="cmdNewsletterSubscriptionSettingsData" v-model="newsletter"
1278
+ @buttonClick="submitNewsletterRegistration" />
1827
1279
  </CmdForm>
1828
1280
  </CmdWidthLimitationWrapper>
1829
1281
  <!-- end newsletter-subscription --------------------------------------------------------------------------------------------------->
@@ -1833,15 +1285,10 @@
1833
1285
  <h2 class="headline-demopage" id="section-opening-hours">
1834
1286
  <span>Opening Hours</span>
1835
1287
  <a href="#" class="button small icon-cog" title="Open Component Settings"
1836
- @click.prevent="openSettingsSidebar('CmdOpeningHours')"></a>
1288
+ @click.prevent="openSettingsSidebar('CmdOpeningHours')"></a>
1837
1289
  </h2>
1838
- <CmdOpeningHours
1839
- ref="CmdOpeningHours"
1840
- v-bind="cmdOpeningHoursSettingsData"
1841
- :openingHours="openingHoursData"
1842
- :checkInterval="0"
1843
- :use24HoursFormat="false"
1844
- />
1290
+ <CmdOpeningHours ref="CmdOpeningHours" v-bind="cmdOpeningHoursSettingsData"
1291
+ :openingHours="openingHoursData" :checkInterval="0" :use24HoursFormat="false" />
1845
1292
  </CmdWidthLimitationWrapper>
1846
1293
  <!-- end opening-hours --------------------------------------------------------------------------------------------------->
1847
1294
 
@@ -1850,14 +1297,10 @@
1850
1297
  <h2 class="headline-demopage" id="section-page-footer">
1851
1298
  <span>Page Footer</span>
1852
1299
  <a href="#" class="button small icon-cog" title="Open Component Settings"
1853
- @click.prevent="openSettingsSidebar('CmdPageFooter')"></a>
1300
+ @click.prevent="openSettingsSidebar('CmdPageFooter')"></a>
1854
1301
  </h2>
1855
- <CmdPageFooter
1856
- ref="CmdPageFooter"
1857
- v-bind="cmdPageFooterSettingsData"
1858
- :button-print-view="{text: 'Print this page'}"
1859
- :cmdSocialNetworks="socialNetworksData"
1860
- >
1302
+ <CmdPageFooter ref="CmdPageFooter" v-bind="cmdPageFooterSettingsData"
1303
+ :button-print-view="{ text: 'Print this page' }" :cmdSocialNetworks="socialNetworksData">
1861
1304
  <button class="button primary" title="Button given by slot">
1862
1305
  <span class="icon-mail"></span>
1863
1306
  <span>Contact</span>
@@ -1871,12 +1314,10 @@
1871
1314
  <h2 class="headline-demopage" id="section-page-header">
1872
1315
  <span>Page Header</span>
1873
1316
  <a href="#" class="button small icon-cog" title="Open Component Settings"
1874
- @click.prevent="openSettingsSidebar('CmdPageHeader')"></a>
1317
+ @click.prevent="openSettingsSidebar('CmdPageHeader')"></a>
1875
1318
  </h2>
1876
- <CmdPageHeader
1877
- ref="CmdPageHeader"
1878
- :cmdBreadcrumbs="breadcrumbsData"
1879
- :cmdHeadline="{headlineText: 'Main headline for page', headlineLevel: 1}">
1319
+ <CmdPageHeader ref="CmdPageHeader" :cmdBreadcrumbs="breadcrumbsData"
1320
+ :cmdHeadline="{ headlineText: 'Main headline for page', headlineLevel: 1 }">
1880
1321
  <a href="#" title="Link given by slot">
1881
1322
  <span class="icon-user-profile"></span>
1882
1323
  <span>You are logged in</span>
@@ -1890,16 +1331,12 @@
1890
1331
  <h2 class="headline-demopage" id="section-pagination">
1891
1332
  <span>Pagination</span>
1892
1333
  <a href="#" class="button small icon-cog" title="Open Component Settings"
1893
- @click.prevent="openSettingsSidebar('CmdPagination')"></a>
1334
+ @click.prevent="openSettingsSidebar('CmdPagination')"></a>
1894
1335
  </h2>
1895
1336
  <div>
1896
1337
  <p>Page {{ showPagePager }}</p>
1897
1338
  </div>
1898
- <CmdPagination
1899
- ref="CmdPagination"
1900
- v-bind="cmdPaginationSettingsData"
1901
- @click="showPagePager = $event"
1902
- />
1339
+ <CmdPagination ref="CmdPagination" v-bind="cmdPaginationSettingsData" @click="showPagePager = $event" />
1903
1340
  </CmdWidthLimitationWrapper>
1904
1341
  <!-- end pagination --------------------------------------------------------------------------------------------------->
1905
1342
 
@@ -1908,13 +1345,11 @@
1908
1345
  <h2 class="headline-demopage" id="section-section">
1909
1346
  <span>Section</span>
1910
1347
  <a href="#" class="button small icon-cog" title="Open Component Settings"
1911
- @click.prevent="openSettingsSidebar('CmdSection')"></a>
1348
+ @click.prevent="openSettingsSidebar('CmdSection')"></a>
1912
1349
  </h2>
1913
1350
  <h3>Section with content provided by properties</h3>
1914
- <CmdSection
1915
- :cmdHeadline="{headlineText: 'Headline for section provided by property', headlineLevel: 4}"
1916
- content="Content for section provided by property."
1917
- />
1351
+ <CmdSection :cmdHeadline="{ headlineText: 'Headline for section provided by property', headlineLevel: 4 }"
1352
+ content="Content for section provided by property." />
1918
1353
  <h3>Section with content provided by slot</h3>
1919
1354
  <CmdSection :useSlot="true">
1920
1355
  <h4>Headline for section provided by slot</h4>
@@ -1932,13 +1367,9 @@
1932
1367
  <CmdWidthLimitationWrapper>
1933
1368
  <h2 class="headline-demopage" id="section-site-footer">Site Footer</h2>
1934
1369
  <CmdSiteFooter>
1935
- <CmdLink
1936
- linkType="href"
1937
- ref="CmdLink"
1938
- v-bind="cmdLinkSettingsData"
1939
- :icon="{iconClass: 'icon-chevron-one-stripe-left', position: 'left', tooltip: 'Tooltip for hyperlink'}"
1940
- @click="cmdLinkOutput"
1941
- />
1370
+ <CmdLink linkType="href" ref="CmdLink" v-bind="cmdLinkSettingsData"
1371
+ :icon="{ iconClass: 'icon-chevron-one-stripe-left', position: 'left', tooltip: 'Tooltip for hyperlink' }"
1372
+ @click="cmdLinkOutput" />
1942
1373
  </CmdSiteFooter>
1943
1374
  </CmdWidthLimitationWrapper>
1944
1375
  <!-- end site-footer --------------------------------------------------------------------------------------------------->
@@ -1948,19 +1379,11 @@
1948
1379
  <h2 class="headline-demopage" id="section-site-header">
1949
1380
  <span>Site Header</span>
1950
1381
  <a href="#" class="button small icon-cog" title="Open Component Settings"
1951
- @click.prevent="openSettingsSidebar('CmdSiteHeader')"></a>
1382
+ @click.prevent="openSettingsSidebar('CmdSiteHeader')"></a>
1952
1383
  </h2>
1953
- <CmdSiteHeader
1954
- ref="CmdSiteHeader"
1955
- v-bind="cmdSiteHeaderSettingsData"
1956
- :cmdCompanyLogo="companyLogoData"
1957
- >
1384
+ <CmdSiteHeader ref="CmdSiteHeader" v-bind="cmdSiteHeaderSettingsData" :cmdCompanyLogo="companyLogoData">
1958
1385
  <template v-slot:topheader>
1959
- <CmdList
1960
- :items="listData"
1961
- orientation="horizontal"
1962
- align="right"
1963
- />
1386
+ <CmdList :items="listData" orientation="horizontal" align="right" />
1964
1387
  </template>
1965
1388
  </CmdSiteHeader>
1966
1389
  </CmdWidthLimitationWrapper>
@@ -1971,18 +1394,12 @@
1971
1394
  <h2 class="headline-demopage" id="section-site-search">
1972
1395
  <span>Site Search</span>
1973
1396
  <a href="#" class="button small icon-cog" title="Open Component Settings"
1974
- @click.prevent="openSettingsSidebar('CmdSiteSearch')"></a>
1397
+ @click.prevent="openSettingsSidebar('CmdSiteSearch')"></a>
1975
1398
  </h2>
1976
- <CmdSiteSearch
1977
- ref="CmdSiteSearch"
1978
- v-bind="cmdSiteSearchSettingsData"
1979
- v-model:modelValueInput1="siteSearchInput1"
1980
- v-model:modelValueInput2="siteSearchInput2"
1981
- v-model:modelValueRadius="radius"
1982
- v-model:modelValueSearchFilters="filters"
1983
- @search="siteSearchOutput"
1984
- :cmdFakeSelect="siteSearchFilters"
1985
- />
1399
+ <CmdSiteSearch ref="CmdSiteSearch" v-bind="cmdSiteSearchSettingsData"
1400
+ v-model:modelValueInput1="siteSearchInput1" v-model:modelValueInput2="siteSearchInput2"
1401
+ v-model:modelValueRadius="radius" v-model:modelValueSearchFilters="filters"
1402
+ @search="siteSearchOutput" :cmdFakeSelect="siteSearchFilters" />
1986
1403
  </CmdWidthLimitationWrapper>
1987
1404
  <!-- end site-search --------------------------------------------------------------------------------------------------->
1988
1405
 
@@ -1991,39 +1408,56 @@
1991
1408
  <h2 class="headline-demopage" id="section-slideshow">
1992
1409
  <span>Slideshow</span>
1993
1410
  <a href="#" class="button small icon-cog" title="Open Component Settings"
1994
- @click.prevent="openSettingsSidebar('CmdSlideshow')"></a>
1411
+ @click.prevent="openSettingsSidebar('CmdSlideshow')"></a>
1995
1412
  </h2>
1996
- <CmdSlideshow
1997
- ref="CmdSlideshow"
1998
- v-bind="cmdSlideshowSettingsData"
1999
- :slideshow-items="slideshowData"
2000
- >Slot-Content
1413
+ <CmdSlideshow ref="CmdSlideshow" v-bind="cmdSlideshowSettingsData" :slideshow-items="slideshowData">
1414
+ Slot-Content
2001
1415
  </CmdSlideshow>
2002
1416
  </CmdWidthLimitationWrapper>
2003
1417
  <!-- end slideshow --------------------------------------------------------------------------------------------------->
2004
1418
 
1419
+
1420
+ <!-- begin smart-search --------------------------------------------------------------------------------------------------->
1421
+ <CmdWidthLimitationWrapper>
1422
+ <h2 class="headline-demopage" id="section-smart-search">
1423
+ <span>Smart Search</span>
1424
+ <a href="#" class="button small icon-cog" title="Open Component Settings"
1425
+ @click.prevent="openSettingsSidebar('CmdSmartSearch')"></a>
1426
+ </h2>
1427
+ smartSearchString: {{ smartSearchString }}
1428
+ <CmdSmartSearch
1429
+ ref="CmdSmartSearch"
1430
+ v-bind="smartSearchSettingsData"
1431
+ :listOfRecommendations="smartSearchData.listOfRecommendations"
1432
+ v-model="smartSearchString"
1433
+ />
1434
+ smartSearchObject: {{ smartSearchObject }}
1435
+ <CmdSmartSearch
1436
+ ref="CmdSmartSearch"
1437
+ v-bind="smartSearchSettingsData"
1438
+ :listOfRecommendations="smartSearchData.listOfRecommendations"
1439
+ v-model="smartSearchObject"
1440
+ />
1441
+ </CmdWidthLimitationWrapper>
1442
+ <!-- end smart-search --------------------------------------------------------------------------------------------------->
1443
+
2005
1444
  <!-- begin social-networks --------------------------------------------------------------------------------------------------->
2006
1445
  <CmdWidthLimitationWrapper>
2007
1446
  <h2 class="headline-demopage" id="section-social-networks">
2008
1447
  <span>Social Networks</span>
2009
1448
  <a href="#" class="button small icon-cog" title="Open Component Settings"
2010
- @click.prevent="openSettingsSidebar('CmdSocialNetworks')"></a>
1449
+ @click.prevent="openSettingsSidebar('CmdSocialNetworks')"></a>
2011
1450
  </h2>
2012
- <CmdSocialNetworks
2013
- ref="CmdSocialNetworks"
2014
- v-bind="{...cmdSocialNetworksSettingsData, ...socialNetworksData}"
2015
- />
1451
+ <CmdSocialNetworks ref="CmdSocialNetworks"
1452
+ v-bind="{ ...cmdSocialNetworksSettingsData, ...socialNetworksData }" />
2016
1453
  </CmdWidthLimitationWrapper>
2017
1454
  <!-- end social-networks --------------------------------------------------------------------------------------------------->
2018
1455
 
2019
1456
  <!-- begin switch-language --------------------------------------------------------------------------------------------------->
2020
1457
  <CmdWidthLimitationWrapper>
2021
1458
  <h2 class="headline-demopage" id="section-switch-language">Switch Language</h2>
2022
- <CmdSwitchLanguage
2023
- :pathFlags="switchLanguage.pathFlags"
2024
- :languages="switchLanguage.languages"
2025
- @click="updateLanguage"
2026
- />
1459
+ <CmdSwitchLanguage :pathFlags="switchLanguage.pathFlags" :languages="switchLanguage.languages"
1460
+ @click="updateLanguage" />
2027
1461
  <p>Selected language: {{ selectedLanguage }} </p>
2028
1462
  </CmdWidthLimitationWrapper>
2029
1463
  <!-- end switch-language --------------------------------------------------------------------------------------------------->
@@ -2033,17 +1467,10 @@
2033
1467
  <h2 class="headline-demopage" id="section-system-message">
2034
1468
  <span>System Message</span>
2035
1469
  <a href="#" class="button small icon-cog" title="Open Component Settings"
2036
- @click.prevent="openSettingsSidebar('CmdSystemMessage')"></a>
1470
+ @click.prevent="openSettingsSidebar('CmdSystemMessage')"></a>
2037
1471
  </h2>
2038
- <CmdSystemMessage
2039
- ref="CmdSystemMessage"
2040
- v-bind="cmdSystemMessageSettingsData"
2041
- :iconMessage="{iconClass: 'icon-error-circle', show: true}">
2042
- <ul>
2043
- <li>Error #1</li>
2044
- <li>Error #2</li>
2045
- <li>Error #3</li>
2046
- </ul>
1472
+ <CmdSystemMessage ref="CmdSystemMessage" v-bind="cmdSystemMessageSettingsData"
1473
+ :iconMessage="{ iconClass: 'icon-error-circle', show: true }">
2047
1474
  </CmdSystemMessage>
2048
1475
  </CmdWidthLimitationWrapper>
2049
1476
  <!-- end system-message --------------------------------------------------------------------------------------------------->
@@ -2053,21 +1480,13 @@
2053
1480
  <h2 class="headline-demopage" id="section-tables">
2054
1481
  <span>Tables</span>
2055
1482
  <a href="#" class="button small icon-cog" title="Open Component Settings"
2056
- @click.prevent="openSettingsSidebar('CmdTable')"></a>
1483
+ @click.prevent="openSettingsSidebar('CmdTable')"></a>
2057
1484
  </h2>
2058
1485
  <h3>Table as wide as its content (with caption)</h3>
2059
- <CmdTable
2060
- ref="CmdTable"
2061
- v-bind="cmdTableSettingsData"
2062
- :table-data="tableDataLarge"
2063
- />
1486
+ <CmdTable ref="CmdTable" v-bind="cmdTableSettingsData" :table-data="tableDataLarge" />
2064
1487
  <h3>Table as wide as possible</h3>
2065
- <CmdTable
2066
- :collapsible="true"
2067
- :fullWidthOnDefault="false"
2068
- :userCanToggleWidth="true"
2069
- :table-data="tableDataLarge"
2070
- />
1488
+ <CmdTable :collapsible="true" :fullWidthOnDefault="false" :userCanToggleWidth="true"
1489
+ :table-data="tableDataLarge" />
2071
1490
  </CmdWidthLimitationWrapper>
2072
1491
  <!-- end tables --------------------------------------------------------------------------------------------------->
2073
1492
 
@@ -2076,12 +1495,9 @@
2076
1495
  <h2 class="headline-demopage" id="section-tabs">
2077
1496
  <span>Tabs</span>
2078
1497
  <a href="#" class="button small icon-cog" title="Open Component Settings"
2079
- @click.prevent="openSettingsSidebar('CmdTabs')"></a>
1498
+ @click.prevent="openSettingsSidebar('CmdTabs')"></a>
2080
1499
  </h2>
2081
- <CmdTabs
2082
- ref="CmdTabs"
2083
- v-bind="cmdTabsSettingsData"
2084
- :tabs="tabsData">
1500
+ <CmdTabs ref="CmdTabs" v-bind="cmdTabsSettingsData" :tabs="tabsData">
2085
1501
  <template v-slot:tab-content-0>
2086
1502
  <h4>Tab 1 headline</h4>
2087
1503
  <p>Slot-Content Tab 1</p>
@@ -2103,49 +1519,43 @@
2103
1519
  <h2 class="headline-demopage" id="section-text-image-block">
2104
1520
  <span>Text-Image-Block</span>
2105
1521
  <a href="#" class="button small icon-cog" title="Open Component Settings"
2106
- @click.prevent="openSettingsSidebar('CmdTextImageBlock')"></a>
1522
+ @click.prevent="openSettingsSidebar('CmdTextImageBlock')"></a>
2107
1523
  </h2>
2108
1524
  <div class="flex-container">
2109
1525
  <CmdTextImageBlock
2110
- :cmdHeadline="{headlineText: 'Text-Image-Block (with html-text)', headlineLevel: 3}"
2111
- htmlContent="<p>This text is given as html-text and show below an optional image.</p>"
2112
- />
2113
- <CmdTextImageBlock
2114
- ref="CmdTextImageBlock"
2115
- v-bind="cmdTextImageBlockSettingsData"
2116
- :cmdHeadline="{headlineText: 'Text-Image-Block (with image and plain text)', headlineLevel: 3}"
1526
+ :cmdHeadline="{ headlineText: 'Text-Image-Block (with html-text)', headlineLevel: 3 }"
1527
+ htmlContent="<p>This text is given as html-text and show below an optional image.</p>" />
1528
+ <CmdTextImageBlock ref="CmdTextImageBlock" v-bind="cmdTextImageBlockSettingsData"
1529
+ :cmdHeadline="{ headlineText: 'Text-Image-Block (with image and plain text)', headlineLevel: 3 }"
2117
1530
  :cmdImage='{
2118
- "image": {
2119
- "src": "/media/images/demo-images/large/landscape-01.jpg",
2120
- "alt": "alternative text",
2121
- "tooltip": "tooltip"
2122
- },
2123
- "figcaption": {
2124
- "text": "figcaption",
2125
- "position": "bottom",
2126
- "textAlign": "center",
2127
- "show": true
2128
- }
2129
- }'
2130
- htmlContent="This text is given as plain text and show below an optional image."
2131
- />
1531
+ "image": {
1532
+ "src": "/media/images/demo-images/large/landscape-01.jpg",
1533
+ "alt": "alternative text",
1534
+ "tooltip": "tooltip"
1535
+ },
1536
+ "figcaption": {
1537
+ "text": "figcaption",
1538
+ "position": "bottom",
1539
+ "textAlign": "center",
1540
+ "show": true
1541
+ }
1542
+ }' htmlContent="This text is given as plain text and show below an optional image." />
2132
1543
  <CmdTextImageBlock
2133
- :cmdHeadline="{headlineText: 'Text-Image-Block (with image and html-text)', headlineLevel: 3}"
1544
+ :cmdHeadline="{ headlineText: 'Text-Image-Block (with image and html-text)', headlineLevel: 3 }"
2134
1545
  htmlContent="<p>This text is given as html-text and show below an optional image.</p>"
2135
1546
  :cmdImage='{
2136
- "image": {
2137
- "src": "/media/images/demo-images/large/landscape-02.jpg",
2138
- "alt": "alternative text",
2139
- "tooltip": "tooltip"
2140
- },
2141
- "figcaption": {
2142
- "text": "figcaption",
2143
- "position": "bottom",
2144
- "textAlign": "center",
2145
- "show": true
2146
- }
2147
- }'
2148
- />
1547
+ "image": {
1548
+ "src": "/media/images/demo-images/large/landscape-02.jpg",
1549
+ "alt": "alternative text",
1550
+ "tooltip": "tooltip"
1551
+ },
1552
+ "figcaption": {
1553
+ "text": "figcaption",
1554
+ "position": "bottom",
1555
+ "textAlign": "center",
1556
+ "show": true
1557
+ }
1558
+ }' />
2149
1559
  </div>
2150
1560
  </CmdWidthLimitationWrapper>
2151
1561
  <!-- end text-image-block --------------------------------------------------------------------------------------------------->
@@ -2155,18 +1565,15 @@
2155
1565
  <h2 class="headline-demopage" id="section-thumbnail-scroller">
2156
1566
  <span>Thumbnail-Scroller</span>
2157
1567
  <a href="#" class="button small icon-cog" title="Open Component Settings"
2158
- @click.prevent="openSettingsSidebar('CmdThumbnailScroller')"></a>
1568
+ @click.prevent="openSettingsSidebar('CmdThumbnailScroller')"></a>
2159
1569
  </h2>
2160
1570
  <p> date (YMD/default): {{ formatDate('2025-01-28', "", "-") }}</p>
2161
1571
  <p> date (DMY): {{ formatDate('2025-01-28', "dmy") }}</p>
2162
1572
  <p> date (MDY): {{ formatDate('2025-01-28', "mdy", "/") }}</p>
2163
1573
  <p> date (invalid)): {{ formatDate('invalid') }}</p>
2164
1574
  <div class="inline-size">
2165
- <CmdThumbnailScroller
2166
- ref="CmdThumbnailScroller"
2167
- v-bind="cmdThumbnailScrollerSettingsData"
2168
- :thumbnailScrollerItems="thumbnailScrollerData"
2169
- />
1575
+ <CmdThumbnailScroller ref="CmdThumbnailScroller" v-bind="cmdThumbnailScrollerSettingsData"
1576
+ :thumbnailScrollerItems="thumbnailScrollerData" />
2170
1577
  </div>
2171
1578
  </CmdWidthLimitationWrapper>
2172
1579
  <!-- end thumbnail-scroller --------------------------------------------------------------------------------------------------->
@@ -2176,12 +1583,9 @@
2176
1583
  <h2 class="headline-demopage" id="section-toggle-dark-mode">
2177
1584
  <span>Toggle Dark-Mode</span>
2178
1585
  <a href="#" class="button small icon-cog" title="Open Component Settings"
2179
- @click.prevent="openSettingsSidebar('CmdToggleDarkMode')"></a>
1586
+ @click.prevent="openSettingsSidebar('CmdToggleDarkMode')"></a>
2180
1587
  </h2>
2181
- <CmdToggleDarkMode
2182
- ref="CmdToggleDarkMode"
2183
- v-bind="cmdToggleDarkModeSettingsData"
2184
- />
1588
+ <CmdToggleDarkMode ref="CmdToggleDarkMode" v-bind="cmdToggleDarkModeSettingsData" />
2185
1589
  </CmdWidthLimitationWrapper>
2186
1590
  <!-- end toggle-darkmode --------------------------------------------------------------------------------------------------->
2187
1591
 
@@ -2190,31 +1594,20 @@
2190
1594
  <h2 class="headline-demopage" id="section-tooltip">
2191
1595
  <span>Tooltip</span>
2192
1596
  <a href="#" class="button small icon-cog" title="Open Component Settings"
2193
- @click.prevent="openSettingsSidebar('CmdTooltip')"></a>
1597
+ @click.prevent="openSettingsSidebar('CmdTooltip')"></a>
2194
1598
  </h2>
2195
1599
  <p>
2196
- <a href="#" @click.prevent id="show-on-hover">Show tooltip on hover!</a><br/>
2197
- <a href="#" @click.prevent id="show-with-delay">Show tooltip on hover with delay!</a><br/>
1600
+ <a href="#" @click.prevent id="show-on-hover">Show tooltip on hover!</a><br />
1601
+ <a href="#" @click.prevent id="show-with-delay">Show tooltip on hover with delay!</a><br />
2198
1602
  <a href="#" @click.prevent id="show-on-click" title="Native tooltip">Show tooltip on click!</a>
2199
1603
  </p>
2200
- <CmdTooltip
2201
- ref="CmdTooltip"
2202
- related-id="show-on-hover"
2203
- v-bind="cmdTooltipSettingsData"
2204
- >
1604
+ <CmdTooltip ref="CmdTooltip" related-id="show-on-hover" v-bind="cmdTooltipSettingsData">
2205
1605
  Tooltip on hover
2206
1606
  </CmdTooltip>
2207
- <CmdTooltip
2208
- :delay-to-show-tooltip="2000"
2209
- related-id="show-with-delay"
2210
- >
1607
+ <CmdTooltip :delay-to-show-tooltip="2000" related-id="show-with-delay">
2211
1608
  Tooltip on hover with delay
2212
1609
  </CmdTooltip>
2213
- <CmdTooltip
2214
- related-id="show-on-click"
2215
- :toggle-visibility-by-click="true"
2216
- :allowEscapeKey="true"
2217
- >
1610
+ <CmdTooltip related-id="show-on-click" :toggle-visibility-by-click="true" :allowEscapeKey="true">
2218
1611
  Tooltip on click
2219
1612
  </CmdTooltip>
2220
1613
  </CmdWidthLimitationWrapper>
@@ -2225,12 +1618,9 @@
2225
1618
  <h2 class="headline-demopage" id="section-upload-form">
2226
1619
  <span>Upload-Form</span>
2227
1620
  <a href="#" class="button small icon-cog" title="Open Component Settings"
2228
- @click.prevent="openSettingsSidebar('CmdUploadForm')"></a>
1621
+ @click.prevent="openSettingsSidebar('CmdUploadForm')"></a>
2229
1622
  </h2>
2230
- <CmdUploadForm
2231
- ref="CmdUploadForm"
2232
- v-bind="cmdUploadFormSettingsData"
2233
- />
1623
+ <CmdUploadForm ref="CmdUploadForm" v-bind="cmdUploadFormSettingsData" />
2234
1624
  </CmdWidthLimitationWrapper>
2235
1625
  <!-- end upload-form --------------------------------------------------------------------------------------------------->
2236
1626
 
@@ -2239,13 +1629,10 @@
2239
1629
  <h2 class="headline-demopage" id="section-width-limitation-wrapper">
2240
1630
  <span>Width Limitation Wrapper</span>
2241
1631
  <a href="#" class="button small icon-cog" title="Open Component Settings"
2242
- @click.prevent="openSettingsSidebar('CmdWidthLimitationWrapper')"></a>
1632
+ @click.prevent="openSettingsSidebar('CmdWidthLimitationWrapper')"></a>
2243
1633
  </h2>
2244
- <CmdWidthLimitationWrapper
2245
- style="border: 1px dotted gray"
2246
- ref="CmdWidthLimitationWrapper"
2247
- v-bind="cmdWidthLimitationWrapperSettingsData"
2248
- >
1634
+ <CmdWidthLimitationWrapper style="border: 1px dashed var(--color-gray-30)" ref="CmdWidthLimitationWrapper"
1635
+ v-bind="cmdWidthLimitationWrapperSettingsData">
2249
1636
  <p>Slot-content</p>
2250
1637
  <p>Slot-content</p>
2251
1638
  <p>Slot-content</p>
@@ -2260,7 +1647,7 @@
2260
1647
  <h1 class="headline-demopage">Page Overview</h1>
2261
1648
  </CmdWidthLimitationWrapper>
2262
1649
  <!-- begin page-overview -->
2263
- <PageOverview/>
1650
+ <PageOverview />
2264
1651
  <!-- end page-overview -->
2265
1652
  </main>
2266
1653
  <!-- end page view -->
@@ -2274,46 +1661,29 @@
2274
1661
  <!-- end cmd-site-footer -->
2275
1662
 
2276
1663
  <!-- begin copyright-information --------------------------------------------------------------------------------------------------->
2277
- <CmdCopyrightInformation/>
1664
+ <CmdCopyrightInformation />
2278
1665
  <!-- end copyright-information --------------------------------------------------------------------------------------------------->
2279
1666
 
2280
1667
  <!-- begin fancy-box --------------------------------------------------------------------------------------------------->
2281
- <CmdFancyBox
2282
- :show="fancyBoxCookieDisclaimer"
2283
- :fancyBoxOptions="{ 'closeIcon': {show: false}}"
2284
- :allowEscapeKey="false"
2285
- :cmdHeadline="{show: true, headlineText: 'Cookie Disclaimer', headlineLevel: 2}"
2286
- defaultAriaLabelText="Cookie Disclaimer"
2287
- >
1668
+ <CmdFancyBox :show="fancyBoxCookieDisclaimer" :fancyBoxOptions="{ 'closeIcon': { show: false } }"
1669
+ :allowEscapeKey="false" :cmdHeadline="{ show: true, headlineText: 'Cookie Disclaimer', headlineLevel: 2 }"
1670
+ defaultAriaLabelText="Cookie Disclaimer">
2288
1671
  <!-- begin cookie-disclaimer --------------------------------------------------------------------------------------------------->
2289
- <CmdCookieDisclaimer
2290
- :cookieOptions="cookieDisclaimerData"
2291
- @closeCookieDisclaimer="closeCookieDisclaimer"
2292
- v-model="acceptedCookies"
2293
- :cmdHeadlineCookieDisclaimer="{ show: false }"
2294
- privacyText="By browsing this website you accept the usage and saving of anonymous data!"
2295
- >
1672
+ <CmdCookieDisclaimer :cookieOptions="cookieDisclaimerData" @closeCookieDisclaimer="closeCookieDisclaimer"
1673
+ v-model="acceptedCookies" :cmdHeadlineCookieDisclaimer="{ show: false }"
1674
+ privacyText="By browsing this website you accept the usage and saving of anonymous data!">
2296
1675
  </CmdCookieDisclaimer>
2297
1676
  <!-- end cookie-disclaimer --------------------------------------------------------------------------------------------------->
2298
1677
  </CmdFancyBox>
2299
1678
  <!-- end fancy-box --------------------------------------------------------------------------------------------------->
2300
1679
 
2301
1680
  <!-- begin component-settings-sidebar --------------------------------------------------------------------------------------------------->
2302
- <CmdSidebar
2303
- v-if="showSettingsSidebar"
2304
- id="component-settings"
2305
- :cmdHeadline="{headlineText: 'Component Settings', headlineLevel: 3, textAlign: 'center'}"
2306
- :openSidebar="openRightSidebar"
2307
- @toggle-sidebar="setOpenStatusRightSidebar"
2308
- :collapseToLeft="false"
2309
- >
1681
+ <CmdSidebar v-if="showSettingsSidebar" id="component-settings"
1682
+ :cmdHeadline="{ headlineText: 'Component Settings', headlineLevel: 3, textAlign: 'center' }"
1683
+ :openSidebar="openRightSidebar" @toggle-sidebar="setOpenStatusRightSidebar" :collapseToLeft="false">
2310
1684
  <template #open>
2311
- <ComponentSettings
2312
- :componentName="componentName"
2313
- :componentProps="componentProps"
2314
- :componentSettings="componentSettings"
2315
- :componentControls="componentControls"
2316
- />
1685
+ <ComponentSettings :componentName="componentName" :componentProps="componentProps"
1686
+ :componentSettings="componentSettings" :componentControls="componentControls" />
2317
1687
  </template>
2318
1688
  </CmdSidebar>
2319
1689
  <!-- end component-settings-sidebar --------------------------------------------------------------------------------------------------->
@@ -2366,10 +1736,10 @@ import listOfComponents from "@/assets/data/listOfComponents.json"
2366
1736
  import PageOverview from "@/pages/PageOverview.vue"
2367
1737
 
2368
1738
  // import external functions
2369
- import {formatDate} from "@/utils/date.js"
1739
+ import { formatDate } from "@/utils/date.js"
2370
1740
  import * as functions from "@/mixins/FieldValidation.js"
2371
- import {openFancyBox} from "@/components/CmdFancyBox.vue"
2372
- import {localizedTime} from "./components/CmdOpeningHours.vue"
1741
+ import { openFancyBox } from "@/components/CmdFancyBox.vue"
1742
+ import { localizedTime } from "./components/CmdOpeningHours.vue"
2373
1743
 
2374
1744
  // import data and controls for settings
2375
1745
  import componentSettingsDataAndControls from "@/componentSettingsDataAndControls.vue"
@@ -2388,7 +1758,7 @@ export default {
2388
1758
  },
2389
1759
  data() {
2390
1760
  return {
2391
- smartSearchObject: {},
1761
+ smartSearchObject: {id: 3, displayValue: "smartSearchDisplayValue"},
2392
1762
  smartSearchString: "",
2393
1763
  selectedLanguage: "none",
2394
1764
  fancyBoxCookieDisclaimer: false,
@@ -2675,7 +2045,7 @@ export default {
2675
2045
  return (h, m) => (localizedTime(language))(h, m).toLowerCase()
2676
2046
  },
2677
2047
  idForReplacedInputsInInputGroup(prefix) {
2678
- return inputGroupRadiobuttonsData.map(item => ({...item, id: prefix + item.id, name: prefix + item.name}))
2048
+ return inputGroupRadiobuttonsData.map(item => ({ ...item, id: prefix + item.id, name: prefix + item.name }))
2679
2049
  },
2680
2050
  closeCookieDisclaimer(event) {
2681
2051
  this.fancyBoxCookieDisclaimer = false
@@ -2808,31 +2178,31 @@ export default {
2808
2178
 
2809
2179
  if (this.selectedTemplate === "blank") {
2810
2180
  this.companyLogoData =
2811
- {
2812
- "link": {
2813
- "type": "href",
2814
- "path": "./",
2815
- "tooltip": "Tooltip"
2816
- },
2817
- "pathDefaultLogo": "/media/images/logos/logo.svg",
2818
- "pathDarkmodeLogo": "/media/images/logos/logo-darkmode.svg",
2819
- "altText": "Company Logo"
2820
- }
2181
+ {
2182
+ "link": {
2183
+ "type": "href",
2184
+ "path": "./",
2185
+ "tooltip": "Tooltip"
2186
+ },
2187
+ "pathDefaultLogo": "/media/images/logos/logo.svg",
2188
+ "pathDarkmodeLogo": "/media/images/logos/logo-darkmode.svg",
2189
+ "altText": "Company Logo"
2190
+ }
2821
2191
  }
2822
2192
 
2823
2193
  // change logo
2824
2194
  if (this.selectedTemplate === "dating") {
2825
2195
  this.companyLogoData =
2826
- {
2827
- "link": {
2828
- "type": "href",
2829
- "path": "./",
2830
- "tooltip": "Tooltip"
2831
- },
2832
- "pathDefaultLogo": "/media/images/logos/logo-dating.svg",
2833
- "pathDarkmodeLogo": "/media/images/logos/logo-dating-darkmode.svg",
2834
- "altText": "Company Logo"
2835
- }
2196
+ {
2197
+ "link": {
2198
+ "type": "href",
2199
+ "path": "./",
2200
+ "tooltip": "Tooltip"
2201
+ },
2202
+ "pathDefaultLogo": "/media/images/logos/logo-dating.svg",
2203
+ "pathDarkmodeLogo": "/media/images/logos/logo-dating-darkmode.svg",
2204
+ "altText": "Company Logo"
2205
+ }
2836
2206
 
2837
2207
  }
2838
2208
  }
@@ -2874,7 +2244,9 @@ export default {
2874
2244
  border-color: var(--color-white);
2875
2245
  align-self: center;
2876
2246
 
2877
- &:hover, &:active, &:focus {
2247
+ &:hover,
2248
+ &:active,
2249
+ &:focus {
2878
2250
  background: var(--color-white);
2879
2251
  color: var(--primary-color) !important;
2880
2252
  }