comand-component-library 3.3.87 → 4.0.1

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 (73) hide show
  1. package/dist/comand-component-library.js +1728 -1655
  2. package/dist/comand-component-library.umd.cjs +4 -4
  3. package/dist/media/images/slideshow-images/large/slide1.jpg +0 -0
  4. package/dist/media/images/slideshow-images/large/slide2.jpg +0 -0
  5. package/dist/media/images/slideshow-images/large/slide3.jpg +0 -0
  6. package/dist/media/images/slideshow-images/large/slide4.jpg +0 -0
  7. package/dist/media/images/slideshow-images/medium/slide1.jpg +0 -0
  8. package/dist/media/images/slideshow-images/medium/slide2.jpg +0 -0
  9. package/dist/media/images/slideshow-images/medium/slide3.jpg +0 -0
  10. package/dist/media/images/slideshow-images/medium/slide4.jpg +0 -0
  11. package/dist/media/images/slideshow-images/small/slide1.jpg +0 -0
  12. package/dist/media/images/slideshow-images/small/slide2.jpg +0 -0
  13. package/dist/media/images/slideshow-images/small/slide3.jpg +0 -0
  14. package/dist/media/images/slideshow-images/small/slide4.jpg +0 -0
  15. package/dist/style.css +1 -1
  16. package/package.json +2 -2
  17. package/src/ComponentLibrary.vue +2629 -0
  18. package/src/assets/data/address-data.json +3 -3
  19. package/src/assets/data/main-navigation.json +2 -0
  20. package/src/components/CmdAddressData.vue +91 -97
  21. package/src/components/CmdAddressDataItem.vue +60 -52
  22. package/src/components/CmdBankAccountData.vue +1 -1
  23. package/src/components/CmdBox.vue +50 -14
  24. package/src/components/CmdBoxWrapper.vue +23 -9
  25. package/src/components/CmdBreadcrumbs.vue +1 -1
  26. package/src/components/CmdCompanyLogo.vue +14 -11
  27. package/src/components/CmdContainer.vue +1 -1
  28. package/src/components/CmdCookieDisclaimer.vue +1 -1
  29. package/src/components/CmdCopyrightInformation.vue +1 -1
  30. package/src/components/CmdFancyBox.vue +8 -5
  31. package/src/components/CmdForm.vue +7 -1
  32. package/src/components/CmdFormElement.vue +58 -108
  33. package/src/components/CmdFormFilters.vue +2 -1
  34. package/src/components/CmdGoogleMaps.vue +1 -1
  35. package/src/components/CmdHeadline.vue +116 -52
  36. package/src/components/CmdIcon.vue +1 -1
  37. package/src/components/CmdImage.vue +1 -1
  38. package/src/components/CmdImageGallery.vue +1 -1
  39. package/src/components/CmdImageZoom.vue +1 -1
  40. package/src/components/CmdInputGroup.vue +8 -7
  41. package/src/components/CmdListOfLinks.vue +25 -25
  42. package/src/components/CmdListOfLinksItem.vue +0 -4
  43. package/src/components/CmdListOfRequirements.vue +10 -2
  44. package/src/components/CmdLoginForm.vue +2 -1
  45. package/src/components/CmdMainNavigation.vue +38 -26
  46. package/src/components/CmdMultistepFormProgressBar.vue +50 -4
  47. package/src/components/CmdNewsletterSubscription.vue +8 -15
  48. package/src/components/CmdOpeningHours.vue +34 -19
  49. package/src/components/CmdOpeningHoursItem.vue +22 -14
  50. package/src/components/CmdPagination.vue +22 -16
  51. package/src/components/CmdProgressBar.vue +1 -1
  52. package/src/components/CmdSidebar.vue +13 -2
  53. package/src/components/CmdSiteFooter.vue +14 -14
  54. package/src/components/CmdSiteHeader.vue +14 -29
  55. package/src/components/CmdSiteSearch.vue +12 -11
  56. package/src/components/CmdSlideButton.vue +9 -7
  57. package/src/components/CmdSlideshow.vue +14 -12
  58. package/src/components/CmdSocialNetworks.vue +11 -4
  59. package/src/components/CmdSocialNetworksItem.vue +2 -7
  60. package/src/components/CmdSwitchLanguage.vue +1 -1
  61. package/src/components/CmdSystemMessage.vue +11 -6
  62. package/src/components/CmdTable.vue +64 -16
  63. package/src/components/CmdTabs.vue +2 -2
  64. package/src/components/CmdTextImageBlock.vue +3 -1
  65. package/src/components/CmdThumbnailScroller.vue +180 -155
  66. package/src/components/CmdToggleDarkMode.vue +1 -1
  67. package/src/components/CmdTooltip.vue +6 -1
  68. package/src/components/CmdUploadForm.vue +69 -43
  69. package/src/components/CmdWidthLimitationWrapper.vue +7 -3
  70. package/src/components/ComponentSettings.vue +171 -0
  71. package/src/main.js +3 -3
  72. package/src/mixins/FieldValidation.js +0 -17
  73. package/src/App.vue +0 -2119
package/src/ComponentLibrary.vue ADDED
@@ -0,0 +1,2629 @@
1
+ <!--suppress HtmlUnknownTarget, NpmUsedModulesInstalled, JSUnresolvedVariable -->
2
+ <template>
3
+ <div :id="templateId">
4
+ <!-- begin #page-wrapper -->
5
+ <div id="page-wrapper">
6
+ <a id="anchor-back-to-top"></a>
7
+ <CmdSidebar
8
+ :cmdHeadline="{headlineText: 'Site Settings', headlineLevel: 3, textAlign: 'center'}"
9
+ :openSidebar="openSidebar"
10
+ @toggle-sidebar="setOpenStatusLeftSidebar"
11
+ >
12
+ <template #open>
13
+ <CmdBoxWrapper
14
+ :boxesPerRow="[1]"
15
+ :allowMultipleExpandedBoxes="false"
16
+ :allowUserToToggleOrientation="false"
17
+ :openBoxesByDefault="openBoxes"
18
+ :useGap="false"
19
+ >
20
+ <template v-slot="slotProps">
21
+ <CmdBox
22
+ :use-slots="['body']"
23
+ :collapsible="true"
24
+ :cmdHeadline="{headlineText: 'Template Settings', headlineLevel: 4, headlineIcon: {iconClass: 'icon-settings-template'}}"
25
+ :openCollapsedBox="slotProps.boxIsOpen(0)"
26
+ @toggleCollapse="slotProps.boxToggled(0, $event)"
27
+ >
28
+ <template v-slot:body>
29
+ <label for="select-template">
30
+ <span>Select template</span>
31
+ <select id="select-template" v-model="selectedTemplate">
32
+ <option value="blank">Blank</option>
33
+ <option value="business">Business</option>
34
+ <option value="casual">Casual</option>
35
+ <option value="dating">Dating</option>
36
+ <option value="influencer">Influencer</option>
37
+ </select>
38
+ </label>
39
+ </template>
40
+ </CmdBox>
41
+ <CmdBox
42
+ :use-slots="['body']"
43
+ :collapsible="true"
44
+ :cmdHeadline="{headlineText: 'Components', headlineLevel: 4, headlineIcon: {iconClass: 'icon-settings-component'}}"
45
+ :openCollapsedBox="slotProps.boxIsOpen(1)"
46
+ @toggleCollapse="slotProps.boxToggled(1, $event)"
47
+ >
48
+ <template v-slot:body>
49
+ <ul>
50
+ <li><a href="#section-address-data"
51
+ @click="updateSettingsSidebar('CmdAddressData')">Address Data</a></li>
52
+ <li><a href="#section-advanced-form-elements">Advanced Form Elements</a></li>
53
+ <li><a href="#section-bank-account-data"
54
+ @click="updateSettingsSidebar('CmdBankAccountData')">Bank Account
55
+ Data</a></li>
56
+ <li><a href="#section-boxes" @click="updateSettingsSidebar('CmdBox')">Boxes</a>
57
+ </li>
58
+ <li><a href="#section-breadcrumbs"
59
+ @click="updateSettingsSidebar('CmdBreadcrumbs')">Breadcrumbs</a></li>
60
+ <li><a href="#section-cookie-disclaimer" @click="hideSettingsSidebar">Cookie-Disclaimer</a>
61
+ </li>
62
+ <li><a href="#section-fancybox" @click="hideSettingsSidebar">Fancybox</a></li>
63
+ <li><a href="#section-forms" @click="hideSettingsSidebar">Forms</a></li>
64
+ <li><a href="#section-google-maps" @click="hideSettingsSidebar">Google-Maps&trade;</a>
65
+ </li>
66
+ <li><a href="#section-headlines" @click="updateSettingsSidebar('CmdHeadline')">Headlines</a>
67
+ </li>
68
+ <li><a href="#section-icons" @click="hideSettingsSidebar">Icons</a></li>
69
+ <li><a href="#section-input-group"
70
+ @click="updateSettingsSidebar('CmdInputGroup')">Input-Group</a></li>
71
+ <li><a href="#section-image" @click="hideSettingsSidebar">Image</a></li>
72
+ <li><a href="#section-image-gallery" @click="hideSettingsSidebar">Image
73
+ Gallery</a></li>
74
+ <li><a href="#section-image-zoom" @click="hideSettingsSidebar">Image-Zoom</a>
75
+ </li>
76
+ <li><a href="#section-list-of-links"
77
+ @click="updateSettingsSidebar('CmdLinkOfLists')">List Of Links</a></li>
78
+ <li><a href="#section-login-form"
79
+ @click="updateSettingsSidebar('CmdLoginForm')">Login Form</a></li>
80
+ <li><a href="#section-main-navigation"
81
+ @click="updateSettingsSidebar('CmdMainNavigation')">Main-Navigation</a>
82
+ </li>
83
+ <li><a href="#section-multistep-form-progress-bar"
84
+ @click="updateSettingsSidebar('CmdMultistepFormProgressBar')">Multistepform-Progressbar</a>
85
+ </li>
86
+ <li><a href="#section-newsletter-subscription"
87
+ @click="updateSettingsSidebar('CmdNewsletterSubscription')">Newsletter
88
+ Subscription</a></li>
89
+ <li><a href="#section-opening-hours"
90
+ @click="updateSettingsSidebar('CmdOpeningHours')">Opening Hours</a></li>
91
+ <li><a href="#section-pagination"
92
+ @click="updateSettingsSidebar('CmdPagination')">Pagination</a></li>
93
+ <li><a href="#section-site-footer" @click="hideSettingsSidebar">Site Footer</a>
94
+ </li>
95
+ <li><a href="#section-site-header"
96
+ @click="updateSettingsSidebar('CmdSiteHeader')">Site Header</a></li>
97
+ <li><a href="#section-site-search"
98
+ @click="updateSettingsSidebar('CmdSiteSearch')">Site Search</a></li>
99
+ <li><a href="#section-slideshow" @click="updateSettingsSidebar('CmdSlideshow')">Slideshow</a>
100
+ </li>
101
+ <li><a href="#section-social-networks"
102
+ @click="updateSettingsSidebar('CmdSocialNetworks')">Social Networks</a>
103
+ </li>
104
+ <li><a href="#section-switch-language" @click="hideSettingsSidebar">Switch
105
+ Language</a></li>
106
+ <li><a href="#section-system-message"
107
+ @click="updateSettingsSidebar('CmdSystemMessage')">System-Message</a>
108
+ </li>
109
+ <li><a href="#section-tables"
110
+ @click="updateSettingsSidebar('CmdSystemMeCmdTablesssage')">Tables</a>
111
+ </li>
112
+ <li><a href="#section-tabs" @click="updateSettingsSidebar('CmdTabs')">Tabs</a>
113
+ </li>
114
+ <li><a href="#section-text-image-block"
115
+ @click="updateSettingsSidebar('CmdTextImageBlock')">Text Image Block</a>
116
+ </li>
117
+ <li><a href="#section-thumbnail-scroller"
118
+ @click="updateSettingsSidebar('CmdThumbnailScroller')">Thumbnail-Scroller</a>
119
+ </li>
120
+ <li><a href="#section-toggle-darkmode"
121
+ @click="updateSettingsSidebar('CmdToggleDarkMode')">ToggleDarkMode</a>
122
+ </li>
123
+ <li><a href="#section-tooltip" @click="updateSettingsSidebar('CmdTooltip')">Tooltip</a>
124
+ </li>
125
+ <li><a href="#section-upload-form"
126
+ @click="updateSettingsSidebar('CmdUploadForm')">Upload-Form</a></li>
127
+ </ul>
128
+ </template>
129
+ </CmdBox>
130
+ </template>
131
+ </CmdBoxWrapper>
132
+ <dl class="comand-versions">
133
+ <dt>Frontend-Framework Version:</dt>
134
+ <dd>{{ packageJson.dependencies['comand-frontend-framework'].replace("^", "") }}</dd>
135
+ <dt>Component-Library Version:</dt>
136
+ <dd>{{ packageJson.version }}</dd>
137
+ </dl>
138
+ </template>
139
+ <template #closed>
140
+ <div class="closed-sidebar">
141
+ <a href="#" class="button primary" title="Open Template Settings" @click.prevent="openBox(0)">
142
+ <span class="icon-settings-template"></span>
143
+ </a>
144
+ <a href="#" class="button primary" title="Open Template Settings" @click.prevent="openBox(1)">
145
+ <span class="icon-settings-component"></span>
146
+ </a>
147
+ </div>
148
+ </template>
149
+ </CmdSidebar>
150
+ <!-- begin site-header --------------------------------------------------------------------------------------------------------------------------------------------------->
151
+ <CmdSiteHeader :sticky="true">
152
+ <template v-slot:top-header>
153
+ <!-- begin list-of-links --------------------------------------------------------------------------------------------------------------------------------------------------->
154
+ <CmdListOfLinks
155
+ :links="listOfLinksData"
156
+ orientation="horizontal"
157
+ align="right"
158
+ />
159
+ <!-- end list-of-links --------------------------------------------------------------------------------------------------------------------------------------------------->
160
+ </template>
161
+ <template v-slot:logo>
162
+ <!-- begin company-logo --------------------------------------------------------------------------------------------------------------------------------------------------->
163
+ <CmdCompanyLogo
164
+ :link="companyLogoData.link"
165
+ altText="CoManD Logo"
166
+ :pathDefaultLogo="companyLogoData.pathDefaultLogo"
167
+ :pathDarkmodeLogo="companyLogoData.pathDarkmodeLogo"
168
+ />
169
+ <!-- end company-logo --------------------------------------------------------------------------------------------------------------------------------------------------->
170
+ </template>
171
+ </CmdSiteHeader>
172
+ <!-- end site-header --------------------------------------------------------------------------------------------------------------------------------------------------->
173
+ <main id="content">
174
+ <!-- begin address-data ------------------------------------------------------------------------------------------------------------------------------------------------------->
175
+ <CmdWidthLimitationWrapper>
176
+ <h2 class="headline-demopage" id="section-address-data">
177
+ Address Data
178
+ <a href="#" class="icon-cog" title="Open Component Settings"
179
+ @click.prevent="openSettingsSidebar('CmdAddressData')"></a>
180
+ </h2>
181
+ <div class="flex-container">
182
+ <CmdAddressData
183
+ ref="CmdAddressData"
184
+ :addressData="addressData"
185
+ v-bind="cmdAddressDataSettingsData"
186
+ :cmdHeadline="{headlineText: 'Address Data Headline', headlineLevel: 3}"
187
+ />
188
+ </div>
189
+ </CmdWidthLimitationWrapper>
190
+ <!-- end address-data ------------------------------------------------------------------------------------------------------------------------------------------------------->
191
+
192
+ <!-- begin advanced form elements --------------------------------------------------------------------------------------------------------------------------------------------------->
193
+ <CmdWidthLimitationWrapper>
194
+ <h2 class="headline-demopage" id="section-advanced-form-elements">Advanced Form Elements</h2>
195
+ <h3>Form elements status:</h3>
196
+ <div class="flex-container">
197
+ <ul class="list-status">
198
+ <li>
199
+ <a href="#" @click.prevent="setStatus('', false)"
200
+ :class="{'active' : validationStatus === '' && disabledStatus === false}"
201
+ id="status-default">
202
+ Default
203
+ </a>
204
+ </li>
205
+ <li class="error">
206
+ <a href="#" @click.prevent="setStatus('error', false)"
207
+ :class="{'active' : validationStatus === 'error'}" id="status-error">
208
+ Error
209
+ </a>
210
+ </li>
211
+ <li>
212
+ <a href="#" @click.prevent="setStatus('warning', false)"
213
+ :class="{'active' : validationStatus === 'warning'}" id="status-warning">
214
+ Warning
215
+ </a>
216
+ </li>
217
+ <li>
218
+ <a href="#" @click.prevent="setStatus('success', false)"
219
+ :class="{'active' : validationStatus === 'success'}" id="status-success">
220
+ Success
221
+ </a>
222
+ </li>
223
+ <li>
224
+ <a href="#" @click.prevent="setStatus('info', false)"
225
+ :class="{'active' : validationStatus === 'info'}" id="status-info">
226
+ Info
227
+ </a>
228
+ </li>
229
+ <li>
230
+ <a href="#" @click.prevent="setStatus('', true)"
231
+ :class="{'active' : disabledStatus === true}" id="status-disabled">
232
+ Disabled
233
+ </a>
234
+ </li>
235
+ </ul>
236
+ </div>
237
+
238
+ <!-- begin cmd-form-filters -->
239
+ <CmdFormFilters v-model="fakeSelectFilters" :selectedOptionsName="getOptionName"/>
240
+ <!-- end cmd-form-filters -->
241
+
242
+ <CmdForm :use-fieldset="false" id="advanced-form-elements" novalidate="novalidate">
243
+ <fieldset class="grid-container-create-columns">
244
+ <legend>Legend</legend>
245
+ <h2>Form Element-Component</h2>
246
+ <div class="flex-container">
247
+ <CmdFormElement
248
+ labelText="Input (type text):"
249
+ element="input"
250
+ type="text"
251
+ :status="validationStatus"
252
+ :disabled="disabledStatus"
253
+ placeholder="Type in text"
254
+ tooltipText="This is a tooltip"
255
+ v-bind="{useCustomTooltip: false}"
256
+ />
257
+ <CmdFormElement
258
+ labelText="Input for selectbox:"
259
+ element="select"
260
+ required="required"
261
+ :status="validationStatus"
262
+ :disabled="disabledStatus"
263
+ v-model="selectedOption"
264
+ :selectOptions="selectOptionsData"
265
+ />
266
+ <CmdFormElement
267
+ labelText="Input for datalist:"
268
+ element="input"
269
+ type="text"
270
+ :status="validationStatus"
271
+ :disabled="disabledStatus"
272
+ placeholder="Type in option"
273
+ :datalist="datalist"
274
+ tooltipText="This is a tooltip"
275
+ />
276
+ </div>
277
+ <CmdFormElement
278
+ labelText="Input (type search (without search-button)):"
279
+ element="input"
280
+ type="search"
281
+ :status="validationStatus"
282
+ :disabled="disabledStatus"
283
+ :showSearchButton="false"
284
+ placeholder="Search"
285
+ tooltipText="This is a tooltip"
286
+ v-bind="{useCustomTooltip: false}"
287
+ />
288
+ <CmdFormElement
289
+ labelText="Input (type search (with search-button)):"
290
+ element="input"
291
+ type="search"
292
+ :status="validationStatus"
293
+ :disabled="disabledStatus"
294
+ placeholder="Search"
295
+ tooltipText="This is a tooltip"
296
+ v-bind="{useCustomTooltip: false}"
297
+ />
298
+ <h2>Inputfields in Columns</h2>
299
+ <div class="flex-container">
300
+ <CmdFormElement
301
+ element="input"
302
+ type="text"
303
+ minlength="5"
304
+ id="inputfield1"
305
+ placeholder="This is placeholder text"
306
+ v-model="inputField1"
307
+ tooltipText="This is a tooltip!"
308
+ :status="validationStatus"
309
+ :disabled="disabledStatus">
310
+ <template v-slot:labeltext>
311
+ <span v-html="'Label with <a href=\'#\'>Link</a> given by slot'"></span>
312
+ </template>
313
+ </CmdFormElement>
314
+ <CmdFormElement
315
+ element="input"
316
+ labelText="Label for inputfield (required, with tooltip):"
317
+ type="text"
318
+ required="required"
319
+ minlength="5"
320
+ id="inputfield-required"
321
+ placeholder="This is placeholder text"
322
+ v-model="inputFieldRequired"
323
+ tooltipText="This is a tooltip!"
324
+ :status="validationStatus"
325
+ :disabled="disabledStatus"
326
+ />
327
+ <CmdFormElement
328
+ element="input"
329
+ labelText="Label for inputfield (with pattern):"
330
+ type="text"
331
+ id="inputfield-pattern"
332
+ placeholder="This is placeholder text"
333
+ pattern="/\d/"
334
+ v-model="inputFieldPattern"
335
+ tooltipText="This is a tooltip!"
336
+ :status="validationStatus"
337
+ :disabled="disabledStatus"
338
+ />
339
+ </div>
340
+ <!-- begin inputfield in two columns -->
341
+ <div class="flex-container">
342
+ <CmdFormElement
343
+ labelText="Label for emailfield (with icon):"
344
+ element="input"
345
+ type="email"
346
+ id="inputfield-email"
347
+ fieldIconClass="icon-mail"
348
+ placeholder="Type in email-address"
349
+ tooltipText="This is a tooltip!"
350
+ maxlength="100"
351
+ v-model="inputMail"
352
+ :status="validationStatus"
353
+ :disabled="disabledStatus"
354
+ :required="true"
355
+ />
356
+ <CmdFormElement
357
+ labelText="Label for inputfield (with icon):"
358
+ element="input"
359
+ type="text"
360
+ id="inputfield-username"
361
+ fieldIconClass="icon-user-profile"
362
+ placeholder="Type in username"
363
+ tooltipText="This is a tooltip!"
364
+ maxlength="100"
365
+ v-model="inputUsername"
366
+ :status="validationStatus"
367
+ :disabled="disabledStatus"
368
+ />
369
+ <CmdFormElement
370
+ element="input"
371
+ labelText="Label for password-field:"
372
+ type="password"
373
+ minlength="8"
374
+ maxlength="255"
375
+ id="inputfield-password"
376
+ fieldIconClass="icon-security-settings"
377
+ placeholder="Type in password"
378
+ tooltipText="This is a tooltip!"
379
+ :customRequirements="customRequirements"
380
+ v-model="inputPassword"
381
+ :status="validationStatus"
382
+ :disabled="disabledStatus"
383
+ />
384
+ </div>
385
+ <!-- end inputfield in two columns -->
386
+
387
+ <CmdFormElement
388
+ element="input"
389
+ labelText="Label (inline) for inputfield (number):"
390
+ :displayLabelInline="true"
391
+ type="number"
392
+ id="inputfield-number"
393
+ required="required"
394
+ min="0"
395
+ max="9"
396
+ v-model="inputNumber"
397
+ :customRequirements="[customRequirements[2]]"
398
+ :status="validationStatus"
399
+ :disabled="disabledStatus"
400
+ />
401
+ <CmdFormElement
402
+ element="input"
403
+ labelText="Label (inline) for inputfield (date):"
404
+ :displayLabelInline="true"
405
+ type="date"
406
+ id="inputfield-date"
407
+ v-model="inputDate"
408
+ :status="validationStatus"
409
+ :disabled="disabledStatus"
410
+ />
411
+ <CmdFormElement
412
+ element="input"
413
+ labelText="Label (inline) for inputfield (search) without search-button:"
414
+ :displayLabelInline="true"
415
+ type="search"
416
+ id="inputfield-search-without-searchbutton"
417
+ placeholder="Keyword(s)"
418
+ v-model="inputSearch"
419
+ :showSearchButton="false"
420
+ :status="validationStatus"
421
+ :disabled="disabledStatus"
422
+ />
423
+ <CmdFormElement
424
+ element="input"
425
+ labelText="Label (inline) for inputfield (search):"
426
+ :displayLabelInline="true"
427
+ type="search"
428
+ id="inputfield-search-with-searchbutton"
429
+ placeholder="Keyword(s)"
430
+ v-model="inputSearch"
431
+ :status="validationStatus"
432
+ :disabled="disabledStatus"
433
+ />
434
+ <CmdFormElement
435
+ element="textarea"
436
+ labelText="Label for textarea:"
437
+ id="textarea"
438
+ minlength="1"
439
+ maxlength="100"
440
+ placeholder="Type in your message"
441
+ :required="true"
442
+ v-model="textarea"
443
+ :status="validationStatus"
444
+ :disabled="disabledStatus"
445
+ />
446
+ <hr/>
447
+ <h2>Fake Selects</h2>
448
+ <div class="flex-container">
449
+ <!-- type === default: normal selectbox (with optional icons) -->
450
+ <CmdFakeSelect
451
+ labelText="Default selectbox:"
452
+ :status="validationStatus"
453
+ :disabled="disabledStatus"
454
+ :selectData="fakeSelectOptionsData"
455
+ v-model="fakeSelectDefault"
456
+ :required="true"
457
+ defaultOptionName="Select an option:"
458
+ title="Title for FakeSelect"
459
+ />
460
+ <CmdFakeSelect
461
+ labelText="Default selectbox with icons:"
462
+ :status="validationStatus"
463
+ :disabled="disabledStatus"
464
+ :selectData="fakeSelectOptionsWithIconsData"
465
+ v-model="fakeSelectDefaultWithIcons"
466
+ defaultOptionName="Select an option:"
467
+ />
468
+ <!-- type === checkboxOptions: selectbox with checkboxes for each option -->
469
+ <CmdFakeSelect
470
+ labelText="Selectbox with checkboxes:"
471
+ :status="validationStatus"
472
+ :disabled="disabledStatus"
473
+ :selectData="fakeSelectOptionsData"
474
+ v-model="fakeSelectCheckbox"
475
+ defaultOptionName="Options:"
476
+ :required="true"
477
+ id="selectbox-with-checkboxes"
478
+ type="checkboxOptions"
479
+ :useCustomTooltip="true"
480
+ />
481
+ <CmdFakeSelect
482
+ labelText="Selectbox with filters:"
483
+ :status="validationStatus"
484
+ :disabled="disabledStatus"
485
+ :selectData="fakeSelectFilterOptionsData"
486
+ v-model="fakeSelectFilters"
487
+ defaultOptionName="Filters:"
488
+ id="selectbox-with-filters"
489
+ type="checkboxOptions"
490
+ :useCustomTooltip="true"
491
+ />
492
+ <CmdFakeSelect
493
+ labelText="Selectbox with slot-content:"
494
+ :status="validationStatus"
495
+ :disabled="disabledStatus"
496
+ type="content"
497
+ defaultOptionName="HTML-Content:">
498
+ <ul class="custom-fake-select-content">
499
+ <li>
500
+ <div>
501
+ <h3>Headline</h3>
502
+ <p>Some content inside a paragraph</p>
503
+ </div>
504
+ <img
505
+ src="media/images/thumbnail-scroller/thumbnail/logo-cmd-blue-landscape.jpg"
506
+ alt="image"/>
507
+ </li>
508
+ </ul>
509
+ </CmdFakeSelect>
510
+ <CmdFakeSelect
511
+ labelText="Selectbox with country flags:"
512
+ :status="validationStatus"
513
+ :disabled="disabledStatus"
514
+ :selectData="fakeSelectCountriesData"
515
+ v-model="selectedCountry"
516
+ defaultOptionName="Select country:"
517
+ type="country"
518
+ />
519
+ <CmdFakeSelect
520
+ labelText="Selectbox with colors:"
521
+ :status="validationStatus"
522
+ :disabled="disabledStatus"
523
+ :selectData="fakeSelectColorsData"
524
+ v-model="selectedColor"
525
+ required="required"
526
+ type="color"
527
+ />
528
+ </div>
529
+
530
+ <hr/>
531
+
532
+ <!-- begin progress bar -->
533
+ <h2>Progress Bar [native]</h2>
534
+ <CmdProgressBar
535
+ labelText="Progress Bar (with optional output):"
536
+ id="progress-bar2"
537
+ max="100"
538
+ />
539
+ <!-- end progress bar -->
540
+
541
+ <!-- begin slider -->
542
+ <h2>Slider [native]</h2>
543
+ <div class="label" :class="validationStatus">
544
+ <span class="label-text">Single-Slider (with in- and output):</span>
545
+ <span class="flex-container no-flex">
546
+ <label class="inline" for="range-value">
547
+ <span class="label-text">
548
+ <span>Range Value:</span>
549
+ </span>
550
+ <input
551
+ type="number"
552
+ :class="validationStatus"
553
+ v-model="rangeValue"
554
+ :disabled="disabledStatus"
555
+ min="0"
556
+ max="100"
557
+ id="range-value"
558
+ />
559
+ </label>
560
+ <label for="range-slider">
561
+ <span class="label-text hidden">
562
+ <span>Range Value</span>
563
+ </span>
564
+ <input
565
+ type="range"
566
+ class="range-slider"
567
+ id="range-slider"
568
+ v-model="rangeValue"
569
+ :disabled="disabledStatus"
570
+ min="0"
571
+ max="100"
572
+ />
573
+ </label>
574
+ </span>
575
+ </div>
576
+ <!-- end slider -->
577
+
578
+ <hr/>
579
+
580
+ <!-- begin toggle-switch-radio with switch-label (colored) -->
581
+ <h2>Toggle-Switches</h2>
582
+ <h3>Switches without switch-labels</h3>
583
+ <CmdFormElement
584
+ element="input"
585
+ type="checkbox"
586
+ id="toggle-switch-checkbox"
587
+ v-model="switchButtonCheckboxToggleSwitch"
588
+ labelText="Labeltext for Toggle-Switch without Switch-Label"
589
+ :toggleSwitch="true"
590
+ :status="validationStatus"
591
+ :disabled="disabledStatus"
592
+ />
593
+ <CmdFormElement
594
+ element="input"
595
+ type="checkbox"
596
+ id="toggle-switch-checkbox-colored"
597
+ v-model="switchButtonCheckboxToggleSwitchColored"
598
+ labelText="Labeltext for colored Toggle-Switch without Switch-Label"
599
+ :toggleSwitch="true"
600
+ :colored="true"
601
+ :status="validationStatus"
602
+ :disabled="disabledStatus"
603
+ />
604
+ <h3>Switches with switch-labels</h3>
605
+ <CmdFormElement
606
+ element="input"
607
+ type="checkbox"
608
+ id="toggle-switch-checkbox-switch-label"
609
+ v-model="switchButtonCheckbox"
610
+ labelText="Labeltext for Toggle-Switch with Switch-Label"
611
+ inputValue="checkbox1"
612
+ onLabel="Label on"
613
+ offLabel="Label off"
614
+ :toggleSwitch="true"
615
+ :status="validationStatus"
616
+ :disabled="disabledStatus"
617
+ />
618
+ <CmdFormElement
619
+ element="input"
620
+ type="checkbox"
621
+ id="toggle-switch-checkbox-switch-label-colored"
622
+ v-model="switchButtonCheckbox"
623
+ inputValue="checkbox2"
624
+ labelText="Labeltext for Toggle-Switch (Checkbox, colored)"
625
+ onLabel="Label on"
626
+ offLabel="Label off"
627
+ :colored="true"
628
+ :toggleSwitch="true"
629
+ :status="validationStatus"
630
+ :disabled="disabledStatus"
631
+ />
632
+ <CmdFormElement
633
+ element="input"
634
+ type="radio"
635
+ name="radiogroup"
636
+ id="toggle-switch-radio1"
637
+ v-model="switchButtonRadio"
638
+ onLabel="Label on"
639
+ offLabel="Label off"
640
+ :colored="true"
641
+ :toggleSwitch="true"
642
+ :status="validationStatus"
643
+ :disabled="disabledStatus"
644
+ inputValue="radio1"
645
+ labelText="Labeltext for Toggle-Switch (Radio, colored) #1"
646
+ />
647
+ <CmdFormElement
648
+ element="input"
649
+ type="radio"
650
+ name="radiogroup"
651
+ id="toggle-switch-radio2"
652
+ v-model="switchButtonRadio"
653
+ onLabel="Label on"
654
+ offLabel="Label off"
655
+ :colored="true"
656
+ :toggleSwitch="true"
657
+ :status="validationStatus"
658
+ :disabled="disabledStatus"
659
+ inputValue="radio2"
660
+ labelText="Labeltext for Toggle-Switch (Radio, colored) #2"
661
+ />
662
+ <!-- end toggle-switch-radio with switch-label (colored) -->
663
+
664
+ <!-- begin checkboxes and radiobuttons -->
665
+ <CmdFormElement
666
+ element="input"
667
+ labelText="Label for (required) checkbox with boolean"
668
+ type="checkbox"
669
+ required="required"
670
+ id="checkbox-required-with-boolean"
671
+ v-model="checkboxRequiredValue"
672
+ :status="validationStatus"
673
+ :disabled="disabledStatus"
674
+ />
675
+ <p>
676
+ checkbox (required) with boolean: {{ checkboxRequiredValue }}<br/>
677
+ checkbox with boolean: {{ checkboxValue }}<br/>
678
+ checkboxes with values: {{ checkboxValues }}
679
+ </p>
680
+
681
+ <h3 id="section-toggle-darkmode">
682
+ Toggle Dark-Mode
683
+ <a href="#" class="icon-cog" title="Open Component Settings"
684
+ @click.prevent="openSettingsSidebar('CmdToggleDarkMode')"></a>
685
+ </h3>
686
+ <CmdToggleDarkMode
687
+ ref="CmdToggleDarkMode"
688
+ v-bind="cmdToggleDarkModeSettingsData"
689
+ />
690
+
691
+ <h2>Checkboxes and Radiobuttons</h2>
692
+ <h3>Checkboxes [native]</h3>
693
+ <div class="label inline">
694
+ <span class="label-text">Label for native checkboxes:</span>
695
+ <div class="flex-container no-flex">
696
+ <CmdFormElement
697
+ element="input"
698
+ labelText="Label for checkbox with boolean"
699
+ type="checkbox"
700
+ id="checkbox-with-boolean"
701
+ v-model="checkboxValue"
702
+ :status="validationStatus"
703
+ :disabled="disabledStatus"
704
+ />
705
+ <CmdFormElement
706
+ element="input"
707
+ labelText="Label for checkbox with value"
708
+ v-model="checkboxValues"
709
+ inputValue="checkboxValue1"
710
+ type="checkbox"
711
+ id="checkbox-with-value-1"
712
+ :status="validationStatus"
713
+ :disabled="disabledStatus"
714
+ />
715
+ <CmdFormElement
716
+ element="input"
717
+ labelText="Label for checkbox with value"
718
+ v-model="checkboxValues"
719
+ inputValue="checkboxValue2"
720
+ type="checkbox"
721
+ id="checkbox-with-value-2"
722
+ :status="validationStatus"
723
+ :disabled="disabledStatus"
724
+ />
725
+ <CmdFormElement
726
+ element="input"
727
+ v-model="checkboxValues"
728
+ inputValue="checkboxValue3"
729
+ type="checkbox"
730
+ id="checkbox-with-value-3"
731
+ :status="validationStatus"
732
+ :disabled="disabledStatus">
733
+ <template v-slot:labeltext>
734
+ Labeltext with <a href="#">link</a> given by slot
735
+ </template>
736
+ </CmdFormElement>
737
+ </div>
738
+ </div>
739
+ <h3>Checkboxes (replaced)</h3>
740
+ <div class="label inline">
741
+ <span class="label-text">Label for Replaced Input-Type-Checkbox:</span>
742
+ <div class="flex-container no-flex">
743
+ <CmdFormElement
744
+ element="input"
745
+ labelText="Label for replaced checkbox"
746
+ type="checkbox"
747
+ :replaceInputType="true"
748
+ id="inputfield9"
749
+ v-model="replacedCheckboxValue"
750
+ inputValue="checkboxValue1"
751
+ :status="validationStatus"
752
+ :disabled="disabledStatus"
753
+ />
754
+ <CmdFormElement
755
+ element="input"
756
+ labelText="Label for replaced checkbox"
757
+ v-model="replacedCheckboxValue"
758
+ inputValue="checkboxValue2"
759
+ type="checkbox"
760
+ :replaceInputType="true"
761
+ id="inputfield10"
762
+ :status="validationStatus"
763
+ :disabled="disabledStatus"
764
+ />
765
+ </div>
766
+ </div>
767
+ <h3>Radiobuttons [native]</h3>
768
+ <div class="label inline">
769
+ <span class="label-text">Label for native radiobuttons:</span>
770
+ <div class="flex-container no-flex">
771
+ <CmdFormElement
772
+ element="input"
773
+ labelText="Label for native radiobutton"
774
+ type="radio"
775
+ id="inputfield11"
776
+ name="radiogroup"
777
+ inputValue="radiobuttonValue1"
778
+ v-model="radiobuttonValue"
779
+ :status="validationStatus"
780
+ :disabled="disabledStatus"
781
+ />
782
+ <CmdFormElement
783
+ element="input"
784
+ labelText="Label for native radiobutton"
785
+ type="radio"
786
+ id="inputfield12"
787
+ name="radiogroup"
788
+ inputValue="radiobuttonValue2"
789
+ v-model="radiobuttonValue"
790
+ :status="validationStatus"
791
+ :disabled="disabledStatus"
792
+ />
793
+ </div>
794
+ </div>
795
+ <p>
796
+ Radiobuttons with values: {{ radiobuttonValue }}
797
+ </p>
798
+ <h3>Radiobuttons (replaced)</h3>
799
+ <div class="label inline">
800
+ <span class="label-text">Label for Replaced Input-Type-Radio:</span>
801
+ <div class="flex-container no-flex">
802
+ <CmdFormElement
803
+ element="input"
804
+ labelText="Label for replaced radiobutton"
805
+ type="radio"
806
+ :replaceInputType="true"
807
+ id="inputfield13"
808
+ name="replaced-radiogroup"
809
+ inputValue="radiobuttonValue1"
810
+ v-model="replacedRadiobuttonValue"
811
+ :status="validationStatus"
812
+ :disabled="disabledStatus"
813
+ />
814
+ <CmdFormElement
815
+ element="input"
816
+ labelText="Label for replaced radiobutton"
817
+ type="radio"
818
+ :replaceInputType="true"
819
+ id="inputfield14"
820
+ name="replaced-radiogroup"
821
+ inputValue="radiobuttonValue2"
822
+ v-model="replacedRadiobuttonValue"
823
+ :status="validationStatus"
824
+ :disabled="disabledStatus"
825
+ />
826
+ </div>
827
+ </div>
828
+ <!-- end checkboxes and radiobuttons -->
829
+
830
+ <!-- begin input-groups -->
831
+ <h3 id="section-input-group">
832
+ Input-Group
833
+ <a href="#" class="icon-cog" title="Open Component Settings"
834
+ @click.prevent="openSettingsSidebar('CmdInputGroup')"></a>
835
+ </h3>
836
+ <CmdInputGroup
837
+ ref="CmdInputGroup"
838
+ v-bind="cmdInputGroupSettingsData"
839
+ labelText="Grouplabel for radio-group given by property:"
840
+ :inputElements="idForReplacedInputsInInputGroup('radio-group')"
841
+ v-model="inputGroup"
842
+ >
843
+ <CmdFormElement
844
+ element="input"
845
+ labelText="Label for radiobutton"
846
+ type="radio"
847
+ id="input-group-radiobutton"
848
+ name="radiogroup2"
849
+ inputValue="radiobuttonValue1"
850
+ v-model="inputGroup"
851
+ :status="validationStatus"
852
+ :disabled="disabledStatus"
853
+ />
854
+ <CmdFormElement
855
+ element="input"
856
+ labelText="Label for radiobutton"
857
+ type="radio"
858
+ id="input-group-radiobutton"
859
+ name="radiogroup2"
860
+ inputValue="radiobuttonValue2"
861
+ v-model="inputGroup"
862
+ :status="validationStatus"
863
+ :disabled="disabledStatus"
864
+ />
865
+ </CmdInputGroup>
866
+ <dl>
867
+ <dt>Selected value:</dt>
868
+ <dd>
869
+ <output>{{ inputGroup }}</output>
870
+ </dd>
871
+ </dl>
872
+ <h3>Input Groups with Checkboxes/Radiobuttons (toggle-switches)</h3>
873
+ <CmdInputGroup
874
+ labelText="Grouplabel for checkbox-group styled as toggle-switches:"
875
+ :inputElements="idForReplacedInputsInInputGroup('checkbox-group-toggle-switch')"
876
+ inputTypes="checkbox"
877
+ v-model="inputGroupValueToggleSwitchCheckbox"
878
+ :toggleSwitch="true"
879
+ required="required"
880
+ :status="validationStatus"
881
+ :disabled="disabledStatus"
882
+ />
883
+ <dl>
884
+ <dt>Selected value(s):</dt>
885
+ <dd>
886
+ <output>{{ inputGroupValueToggleSwitchCheckbox }}</output>
887
+ </dd>
888
+ </dl>
889
+ <CmdInputGroup
890
+ labelText="Grouplabel for radio-group styled as toggle-switches:"
891
+ :inputElements="idForReplacedInputsInInputGroup('radio-group-toggle-switch')"
892
+ inputTypes="radio"
893
+ v-model="inputGroupValueToggleSwitchRadio"
894
+ :toggleSwitch="true"
895
+ required="required"
896
+ :status="validationStatus"
897
+ :disabled="disabledStatus"
898
+ />
899
+ <dl>
900
+ <dt>Selected value(s):</dt>
901
+ <dd>
902
+ <output>{{ inputGroupValueToggleSwitchRadio }}</output>
903
+ </dd>
904
+ </dl>
905
+ <CmdInputGroup
906
+ labelText="Grouplabel for radio-group given by property styled as multiple-switch:"
907
+ :inputElements="idForReplacedInputsInInputGroup('radio-group-multiple-switch')"
908
+ inputTypes="radio"
909
+ :multipleSwitch="true"
910
+ v-model="inputGroupValue3"
911
+ :status="validationStatus"
912
+ :disabled="disabledStatus"
913
+ />
914
+ <dl>
915
+ <dt>Selected value(s):</dt>
916
+ <dd>
917
+ <output>{{ inputGroupValue3 }}</output>
918
+ </dd>
919
+ </dl>
920
+ <CmdInputGroup
921
+ labelText="Grouplabel for checkbox-group styled as multiple-switch (stretched horizontally):"
922
+ :inputElements="inputGroupCheckboxes"
923
+ inputTypes="checkbox"
924
+ :multipleSwitch="true"
925
+ :required="true"
926
+ v-model="inputGroupValue4"
927
+ :stretchHorizontally="true"
928
+ :status="validationStatus"
929
+ :disabled="disabledStatus"
930
+ />
931
+ <dl>
932
+ <dt>Selected value(s):</dt>
933
+ <dd>
934
+ <output>{{ inputGroupValue4 }}</output>
935
+ </dd>
936
+ </dl>
937
+ </fieldset>
938
+ <!-- end fieldset -->
939
+ <div class="flex-container">
940
+ <small>(values will not be submitted with the form!)</small>
941
+ <div class="button-wrapper no-flex">
942
+ <CmdFormElement
943
+ element="button"
944
+ :nativeButton="{text: 'Submit-button from component'}"
945
+ type="submit"
946
+ id="submitbutton"
947
+ name="submitbutton"
948
+ :disabled="disabledStatus"
949
+ />
950
+ <button class="button" type="submit" :disabled="disabledStatus">
951
+ <span class="icon-check"></span>
952
+ <span>Native submit-button</span>
953
+ </button>
954
+ </div>
955
+ </div>
956
+ </CmdForm>
957
+ </CmdWidthLimitationWrapper>
958
+ <!-- end advanced form elements ----------------------------------------------------------------------------------------------------------------------------------------------------->
959
+
960
+ <!-- begin back to top button ----------------------------------------------------------------------------------------------------------------------------------------------------->
961
+ <CmdBackToTopButton href="#anchor-back-to-top" scroll-container="#page-wrapper"/>
962
+ <!-- end back to top button ----------------------------------------------------------------------------------------------------------------------------------------------------->
963
+
964
+ <!-- begin bank account data ----------------------------------------------------------------------------------------------------------------------------------------------------->
965
+ <CmdWidthLimitationWrapper>
966
+ <h2 class="headline-demopage" id="section-bank-account-data">
967
+ Bank Account Data
968
+ <a href="#" class="icon-cog" title="Open Component Settings"
969
+ @click.prevent="openSettingsSidebar('CmdBankAccountData')"></a>
970
+ </h2>
971
+ <CmdBankAccountData
972
+ :account-data="bankAccountData"
973
+ v-bind="cmdBankAccountDataSettingsData"
974
+ ref="CmdBankAccountData"
975
+ :cmd-headline="{ headlineText: 'Bank Account', headlineLevel: 3}"
976
+ />
977
+ </CmdWidthLimitationWrapper>
978
+ <!-- end bank account data ------------------------------------------------------------------------------------------------------------------------------------------------------->
979
+
980
+ <!-- begin boxes ------------------------------------------------------------------------------------------------------------------------------------------------------->
981
+ <CmdWidthLimitationWrapper>
982
+ <h2 class="headline-demopage" id="section-boxes">Boxes</h2>
983
+ <h3>
984
+ Default Box
985
+ <a href="#" class="icon-cog" title="Open Component Settings"
986
+ @click.prevent="openSettingsSidebar('CmdBox')"></a>
987
+ </h3>
988
+ <CmdBox
989
+ ref="CmdBox"
990
+ v-bind="cmdBoxSettingsData"
991
+ textBody="Content"
992
+ :cmd-headline="{headlineText: 'Headline for box', headlineLevel: 4}"
993
+ />
994
+ <CmdBoxWrapper
995
+ :useFlexbox="true"
996
+ :cmdHeadline="{headlineText: 'Boxes in BoxWrapper with flexbox', headlineLevel: 3}"
997
+ :use-gap="true"
998
+ >
999
+ <CmdBox
1000
+ v-for="index in 14"
1001
+ :key="index"
1002
+ textBody="Content"
1003
+ :cmd-headline="{headlineText: 'Headline ' + index, headlineLevel: 4}"
1004
+ />
1005
+ </CmdBoxWrapper>
1006
+ <CmdBoxWrapper
1007
+ :useFlexbox="true"
1008
+ :use-gap="true"
1009
+ :cmdHeadline="{headlineText: 'Different examples of content-boxes (in BoxWrapper)', headlineLevel: 3}"
1010
+ >
1011
+ <CmdBox
1012
+ :stretchVertically="false"
1013
+ :cmdHeadline="{headlineText: 'Box with cutoff text', headlineLevel: 4}"
1014
+ :useSlots="['body']"
1015
+ :cutoff-text-lines="4"
1016
+ >
1017
+ <template v-slot:body>
1018
+ This is a long text that is cutoff after a specific number of lines that can be defined
1019
+ by the property 'cutoffTextLines' and be toggled by a link below.
1020
+ </template>
1021
+ </CmdBox>
1022
+ <CmdBox :useSlots="['header', 'body', 'footer']" :allowContentToScroll="true">
1023
+ <template v-slot:header>
1024
+ <h4>
1025
+ Texts given by slots
1026
+ </h4>
1027
+ </template>
1028
+ <template v-slot:body>
1029
+ <p>
1030
+ This content with paragraphs inside is placed inside the box-body.
1031
+ </p>
1032
+ <p>
1033
+ <strong>Header, Content/Body and Footer of this box are given by slots.</strong>
1034
+ </p>
1035
+ <p>Additionally 'allowContentToScroll' is active, which enables (as far as a max-height is defined) the content of this box to scroll</p>
1036
+ </template>
1037
+ <template v-slot:footer>
1038
+ <p>
1039
+ Footer content
1040
+ </p>
1041
+ </template>
1042
+ </CmdBox>
1043
+ <CmdBox :useSlots="['header', 'body']" :use-default-padding="false">
1044
+ <template v-slot:header>
1045
+ <h4>
1046
+ Box with links
1047
+ </h4>
1048
+ </template>
1049
+ <template v-slot:body>
1050
+ <ul class="navigation">
1051
+ <li><a href="#" @click.prevent="">Link name 1</a></li>
1052
+ <li><a href="#" @click.prevent="">Link name 2</a></li>
1053
+ <li><a href="#" @click.prevent="">Link name 3</a></li>
1054
+ <li><a href="#" @click.prevent="">Link name 4</a></li>
1055
+ </ul>
1056
+ </template>
1057
+ <!-- will not be displayed, because useSlots-property does not contain 'footer' in array -->
1058
+ <template v-slot:footer>
1059
+ <p>
1060
+ footer content
1061
+ </p>
1062
+ </template>
1063
+ </CmdBox>
1064
+ <CmdBox
1065
+ :useSlots="['header', 'body']"
1066
+ :use-default-padding="false"
1067
+ :cmdHeadline="{headlineText: 'Collapsible box', headlineLevel: 4}"
1068
+ :collapsible="true">
1069
+ <template v-slot:header>
1070
+ <h4>
1071
+ Collapsible box with image
1072
+ </h4>
1073
+ </template>
1074
+ <template v-slot:body>
1075
+ <img src="media/images/content-images/landscape-medium.jpg" alt="Alternative text"/>
1076
+ </template>
1077
+ </CmdBox>
1078
+ <CmdBox :useSlots="['header', 'body', 'footer']" :use-default-padding="false">
1079
+ <template v-slot:header>
1080
+ <h4>
1081
+ Box with image and content
1082
+ </h4>
1083
+ </template>
1084
+ <template v-slot:body>
1085
+ <img src="media/images/content-images/landscape-medium.jpg" alt="Alternative text"/>
1086
+ <div class="default-padding">
1087
+ <h4>Headline</h4>
1088
+ <p>This is some text information i.e a short-text for a news teaser.</p>
1089
+ </div>
1090
+ </template>
1091
+ <template v-slot:footer>
1092
+ <p>
1093
+ <a href="#">Read more&hellip;</a>
1094
+ </p>
1095
+ </template>
1096
+ </CmdBox>
1097
+ </CmdBoxWrapper>
1098
+ <h3>Product boxes</h3>
1099
+ <div class="grid-container-create-columns">
1100
+ <div class="grid-small-item" v-for="(product, index) in boxProductData" :key="index">
1101
+ <CmdBox boxType="product" :product="product" :cmdHeadline="{headlineLevel: 4}"/>
1102
+ </div>
1103
+ </div>
1104
+ <h3>User boxes</h3>
1105
+ <CmdBoxWrapper :boxesPerRow="[5, 2, 1]" :useRowViewAsDefault="true" :useGap="true">
1106
+ <template v-slot="slotProps">
1107
+ <CmdBox
1108
+ v-for="index in boxUserData.length"
1109
+ :key="index" boxType="user"
1110
+ :user="boxUserData[index - 1]"
1111
+ :cmdHeadline="{headlineLevel: 5}"
1112
+ :rowView="slotProps.rowView"
1113
+ />
1114
+ </template>
1115
+ </CmdBoxWrapper>
1116
+ <h3>Product boxes (collapsible)</h3>
1117
+ <CmdBoxWrapper
1118
+ :boxesPerRow="[5, 2, 1]"
1119
+ :useRowViewAsDefault="true"
1120
+ :allowMultipleExpandedBoxes="false"
1121
+ :useGap="true">
1122
+ <template v-slot="slotProps">
1123
+ <CmdBox
1124
+ v-for="index in boxProductData.length"
1125
+ :key="index"
1126
+ boxType="content"
1127
+ :collapsible="true"
1128
+ :useSlots="['body']"
1129
+ :cmdHeadline="{headlineText: 'Box ' + index, headlineLevel: 5}"
1130
+ :rowView="slotProps.rowView"
1131
+ :openCollapsedBox="slotProps.boxIsOpen(index - 1)"
1132
+ @toggleCollapse="slotProps.boxToggled(index - 1, $event)"
1133
+ >
1134
+ <template #body>{{ slotProps.currentOpenBox }}Content {{ index }}</template>
1135
+ </CmdBox>
1136
+ </template>
1137
+ </CmdBoxWrapper>
1138
+ </CmdWidthLimitationWrapper>
1139
+ <!-- end boxes ------------------------------------------------------------------------------------------------------------------------------------------------------->
1140
+
1141
+ <!-- begin breadcrumbs ------------------------------------------------------------------------------------------------------------------------------------------------------->
1142
+ <CmdWidthLimitationWrapper inner-component="div">
1143
+ <h2 class="headline-demopage" id="section-breadcrumbs">
1144
+ Breadcrumbs
1145
+ <a href="#" class="icon-cog" title="Open Component Settings"
1146
+ @click.prevent="openSettingsSidebar('CmdBreadcrumbs')"></a>
1147
+ </h2>
1148
+ <CmdBreadcrumbs ref="CmdBreadcrumbs" :breadcrumbLinks="breadcrumbData"
1149
+ v-bind="cmdBreadcrumbsSettingsData"/>
1150
+ </CmdWidthLimitationWrapper>
1151
+ <!-- end breadcrumbs ------------------------------------------------------------------------------------------------------------------------------------------------------->
1152
+
1153
+ <!-- begin cookie-disclaimer ------------------------------------------------------------------------------------------------------------------------------------------------------->
1154
+ <CmdWidthLimitationWrapper>
1155
+ <h2 class="headline-demopage" id="section-cookie-disclaimer">Cookie Disclaimer</h2>
1156
+ <a class="button" href="#" @click.prevent="fancyBoxCookieDisclaimer = true">
1157
+ <span>Open Cookie Disclaimer</span>
1158
+ </a>
1159
+ </CmdWidthLimitationWrapper>
1160
+ <!-- end cookie-disclaimer ------------------------------------------------------------------------------------------------------------------------------------------------------->
1161
+
1162
+ <!-- begin forms ------------------------------------------------------------------------------------------------------------------------------------------------------->
1163
+ <CmdWidthLimitationWrapper>
1164
+ <h2 class="headline-demopage" id="section-forms">Forms</h2>
1165
+ <h3>Form elements given by data</h3>
1166
+ <CmdForm
1167
+ :useFieldset="true"
1168
+ :useSlot="false"
1169
+ textLegend="Legend"
1170
+ id="form-component"
1171
+ novalidate="novalidate"
1172
+ :formElements="formElementsData"
1173
+ @submit="doConsoleLog"
1174
+ />
1175
+ <h3>Form elements given by slot</h3>
1176
+ <CmdForm
1177
+ :use-fieldset="true"
1178
+ textLegend="Legend"
1179
+ id="form-component"
1180
+ novalidate="novalidate"
1181
+ @submit="doConsoleLog"
1182
+ >
1183
+ <CmdFormElement
1184
+ element="input"
1185
+ text="text"
1186
+ name="input-text"
1187
+ labelText="Text input"
1188
+ placeholder="Text input"
1189
+ />
1190
+ <CmdFormElement
1191
+ element="input"
1192
+ text="number"
1193
+ labelText="Number input"
1194
+ name="input-number"
1195
+ modelValue="1"
1196
+ />
1197
+ <CmdFormElement
1198
+ element="input"
1199
+ text="password"
1200
+ labelText="Password input"
1201
+ name="password-number"
1202
+ placeholder="Password input"
1203
+ />
1204
+ </CmdForm>
1205
+ </CmdWidthLimitationWrapper>
1206
+ <!-- end forms ------------------------------------------------------------------------------------------------------------------------------------------------------->
1207
+
1208
+ <!-- begin fancybox ------------------------------------------------------------------------------------------------------------------------------------------------------->
1209
+ <CmdWidthLimitationWrapper>
1210
+ <h2 class="headline-demopage" id="section-fancybox">Fancybox</h2>
1211
+ <h3>FancyBox with text</h3>
1212
+ <a href="#" @click.prevent="showFancyBox('text','Some text', 'FancyBox with text')">Open FancyBox
1213
+ with text</a>
1214
+ <h3>FancyBox with large image given by url</h3>
1215
+ <a href="#"
1216
+ @click.prevent="showFancyBox('url', 'media/images/demo-images/large/landscape-01.jpg', 'FancyBox with large image given by url')"
1217
+ title="Open FancyBox with large image given by url"
1218
+ style="display: inline-flex;"
1219
+ >
1220
+ <img src="media/images/demo-images/small/landscape-01.jpg" alt="Alternative text"/>
1221
+ </a>
1222
+ <h3>FancyBox with large image given by property</h3>
1223
+ <a href="#"
1224
+ @click.prevent="showFancyBox('image', {large:'media/images/demo-images/large/landscape-02.jpg'}, 'FancyBox with large image given by property')"
1225
+ title="Open FancyBox with large image given by property"
1226
+ style="display: inline-flex;"
1227
+ >
1228
+ <img src="media/images/demo-images/small/landscape-02.jpg" alt="Alternative text"/>
1229
+ </a>
1230
+ <h3>FancyBox with image as object give by property</h3>
1231
+ <a href="#"
1232
+ @click.prevent="showFancyBox('image', {
1233
+ small: 'media/images/demo-images/medium/landscape-03.jpg',
1234
+ medium: 'media/images/demo-images/medium/landscape-03.jpg',
1235
+ large: 'media/images/demo-images/large/landscape-03.jpg'
1236
+ }, 'FancyBox with large image given by property')"
1237
+ title="Open FancyBox with large image given by property"
1238
+ style="display: inline-flex;"
1239
+ >
1240
+ <img src="media/images/demo-images/small/landscape-03.jpg" alt="Alternative text"/>
1241
+ </a>
1242
+
1243
+ </CmdWidthLimitationWrapper>
1244
+ <!-- end fancybox ------------------------------------------------------------------------------------------------------------------------------------------------------->
1245
+
1246
+ <!-- begin google-maps ------------------------------------------------------------------------------------------------------------------------------------------------------->
1247
+ <CmdWidthLimitationWrapper>
1248
+ <h2 class="headline-demopage" id="section-google-maps">Google Maps&trade;</h2>
1249
+ <CmdGoogleMaps :address="addressData"/>
1250
+ </CmdWidthLimitationWrapper>
1251
+ <!-- end google-maps ------------------------------------------------------------------------------------------------------------------------------------------------------->
1252
+
1253
+ <!-- begin headlines ------------------------------------------------------------------------------------------------------------------------------------------------------->
1254
+ <CmdWidthLimitationWrapper>
1255
+ <h2 class="headline-demopage" id="section-headlines">
1256
+ Headlines
1257
+ <a href="#" class="icon-cog" title="Open Component Settings"
1258
+ @click.prevent="openSettingsSidebar('CmdHeadline')"></a>
1259
+ </h2>
1260
+ <CmdHeadline
1261
+ ref="CmdHeadline"
1262
+ v-bind="cmdHeadlineSettingsData"
1263
+ />
1264
+ <CmdHeadline
1265
+ ref="CmdHeadline"
1266
+ :headlineIcon="{iconClass: 'icon-home'}"
1267
+ v-bind="cmdHeadlineSettingsData"
1268
+ />
1269
+ </CmdWidthLimitationWrapper>
1270
+ <!-- end headlines ------------------------------------------------------------------------------------------------------------------------------------------------------->
1271
+
1272
+ <!-- begin icons ------------------------------------------------------------------------------------------------------------------------------------------------------->
1273
+ <CmdWidthLimitationWrapper>
1274
+ <h2 class="headline-demopage" id="section-icons">Icons</h2>
1275
+ <ul>
1276
+ <li>
1277
+ <span>Icon from local iconfont</span>
1278
+ <CmdIcon iconClass="icon-home"/>
1279
+ </li>
1280
+ <li>
1281
+ <span>Icon from iconify-api (icomoon-font)</span>
1282
+ <CmdIcon iconClass="icomoon-free:home"/>
1283
+ </li>
1284
+ <li>
1285
+ <span>Icon from iconify-api (bootstrap-font)</span>
1286
+ <CmdIcon iconClass="bi:house-fill"/>
1287
+ </li>
1288
+ <li>
1289
+ <span>Icon from iconify-api (material-design-font)</span>
1290
+ <CmdIcon iconClass="mdi:home"/>
1291
+ </li>
1292
+ <li>
1293
+ <span>Icon from iconify-api (font-awesome-solid-font)</span>
1294
+ <CmdIcon iconClass="fa6-solid:house-chimney"/>
1295
+ </li>
1296
+ </ul>
1297
+ </CmdWidthLimitationWrapper>
1298
+ <!-- end icons ------------------------------------------------------------------------------------------------------------------------------------------------------->
1299
+
1300
+ <!-- begin images ------------------------------------------------------------------------------------------------------------------------------------------------------->
1301
+ <CmdWidthLimitationWrapper>
1302
+ <h2 class="headline-demopage" id="section-image">
1303
+ Image
1304
+ <a href="#" class="icon-cog" title="Open Component Settings"
1305
+ @click.prevent="openSettingsSidebar('CmdImage')"></a>
1306
+ </h2>
1307
+ <div class="flex-container">
1308
+ <CmdImage ref="CmdImage" :image="imageData[0].image" :figcaption="imageData[0].figcaption"
1309
+ v-bind="cmdImageSettingsData"/>
1310
+ <CmdImage :image="imageData[1].image" :figcaption="imageData[1].figcaption"/>
1311
+ </div>
1312
+ </CmdWidthLimitationWrapper>
1313
+ <!-- end images ------------------------------------------------------------------------------------------------------------------------------------------------------->
1314
+
1315
+ <!-- begin image-gallery------------------------------------------------------------------------------------------------------------------------------------------------------->
1316
+ <CmdWidthLimitationWrapper>
1317
+ <h2 class="headline-demopage" id="section-image-gallery">
1318
+ Image-Gallery
1319
+ <a href="#" class="icon-cog" title="Open Component Settings"
1320
+ @click.prevent="openSettingsSidebar('CmdImageGallery')"></a>
1321
+ </h2>
1322
+ <CmdImageGallery
1323
+ ref="CmdImageGallery"
1324
+ :images="imageGalleryData"
1325
+ v-bind="cmdImageGallerySettingsData"
1326
+ />
1327
+ </CmdWidthLimitationWrapper>
1328
+ <!-- end image-gallery ------------------------------------------------------------------------------------------------------------------------------------------------------->
1329
+
1330
+ <!-- begin image-zoom ------------------------------------------------------------------------------------------------------------------------------------------------------->
1331
+ <CmdWidthLimitationWrapper>
1332
+ <h2 class="headline-demopage" id="section-image-zoom">
1333
+ Image-Zoom
1334
+ </h2>
1335
+ <CmdImageZoom
1336
+ :imageSmall="imageData[2].image"
1337
+ :imageLarge="imageData[3].image"
1338
+ />
1339
+ </CmdWidthLimitationWrapper>
1340
+ <!-- end image-zoom ------------------------------------------------------------------------------------------------------------------------------------------------------->
1341
+
1342
+ <!-- begin list-of-links ------------------------------------------------------------------------------------------------------------------------------------------------------->
1343
+ <CmdWidthLimitationWrapper>
1344
+ <h2 class="headline-demopage" id="section-list-of-links">
1345
+ List Of Links
1346
+ <a href="#" class="icon-cog" title="Open Component Settings"
1347
+ @click.prevent="openSettingsSidebar('CmdListOfLinks')"></a>
1348
+ </h2>
1349
+ <CmdListOfLinks
1350
+ ref="CmdListOfLinks"
1351
+ v-bind="cmdListOfLinksSettingsData"
1352
+ :links="listOfLinksData"
1353
+ />
1354
+ </CmdWidthLimitationWrapper>
1355
+ <!-- end list-of-links ------------------------------------------------------------------------------------------------------------------------------------------------------->
1356
+
1357
+ <!-- begin login-form ------------------------------------------------------------------------------------------------------------------------------------------------------->
1358
+ <CmdWidthLimitationWrapper>
1359
+ <h2 class="headline-demopage" id="section-login-form">
1360
+ Login Form
1361
+ <a href="#" class="icon-cog" title="Open Component Settings"
1362
+ @click.prevent="openSettingsSidebar('CmdLoginForm')"></a>
1363
+ </h2>
1364
+ <CmdForm :use-validation="true" :use-fieldset="false">
1365
+ <CmdLoginForm ref="CmdLoginForm" v-bind="cmdListOfLinksSettingsData" v-model="loginData"/>
1366
+ </CmdForm>
1367
+ <p>LoginData: {{ loginData }}</p>
1368
+ </CmdWidthLimitationWrapper>
1369
+ <!-- end login-form ------------------------------------------------------------------------------------------------------------------------------------------------------->
1370
+
1371
+ <!-- begin main-navigation ------------------------------------------------------------------------------------------------------------------------------------------------------->
1372
+ <CmdWidthLimitationWrapper>
1373
+ <h2 class="headline-demopage" id="section-main-navigation">
1374
+ Main Navigation
1375
+ <a href="#" class="icon-cog" title="Open Component Settings"
1376
+ @click.prevent="openSettingsSidebar('CmdMainNavigation')"></a>
1377
+ </h2>
1378
+ <CmdMainNavigation
1379
+ ref="CmdMainNavigation"
1380
+ v-bind="cmdMainNavigationSettingsData"
1381
+ :navigationEntries="navigationData.navigationEntries"
1382
+ />
1383
+ </CmdWidthLimitationWrapper>
1384
+ <!-- end main-navigation ------------------------------------------------------------------------------------------------------------------------------------------------------->
1385
+
1386
+ <!-- begin multistep-form-progress-bar ------------------------------------------------------------------------------------------------------------------------------------------------------->
1387
+ <CmdWidthLimitationWrapper>
1388
+ <h2 class="headline-demopage" id="section-multistep-form-progress-bar">
1389
+ Multistepform-Progressbar
1390
+ <a href="#" class="icon-cog" title="Open Component Settings"
1391
+ @click.prevent="openSettingsSidebar('CmdMultistepFormProgressBar')"></a>
1392
+ </h2>
1393
+ <h3>Steps with icons</h3>
1394
+ <CmdMultistepFormProgressBar
1395
+ ref="CmdMultistepFormProgressBar"
1396
+ :multisteps="multistepsData.withIcon"
1397
+ v-bind="cmdMultistepFormProgressBarSettingsData"
1398
+ @click="showPageMultistep = $event.index + 1"
1399
+ />
1400
+ <div>
1401
+ <p>Page {{ showPageMultistep }}</p>
1402
+ </div>
1403
+ </CmdWidthLimitationWrapper>
1404
+ <!-- end multistep-form-progress-bar ------------------------------------------------------------------------------------------------------------------------------------------------------->
1405
+
1406
+ <!-- begin newsletter-subscription ------------------------------------------------------------------------------------------------------------------------------------------------------->
1407
+ <CmdWidthLimitationWrapper>
1408
+ <h2 class="headline-demopage" id="section-newsletter-subscription">
1409
+ Newsletter Subscription
1410
+ <a href="#" class="icon-cog" title="Open Component Settings"
1411
+ @click.prevent="openSettingsSidebar('CmdNewsletterSubscription')"></a>
1412
+ </h2>
1413
+ <CmdForm textLegend="Stay-up-to-date" :use-fieldset="false">
1414
+ <CmdNewsletterSubscription
1415
+ ref="CmdNewsletterSubscription"
1416
+ v-bind="cmdNewsletterSubscriptionSettingsData"
1417
+ v-model="newsletter"
1418
+ @buttonClick="submitNewsletterRegistration"
1419
+ />
1420
+ </CmdForm>
1421
+ </CmdWidthLimitationWrapper>
1422
+ <!-- end newsletter-subscription ------------------------------------------------------------------------------------------------------------------------------------------------------->
1423
+
1424
+ <!-- begin opening-hours ------------------------------------------------------------------------------------------------------------------------------------------------------->
1425
+ <CmdWidthLimitationWrapper>
1426
+ <h2 class="headline-demopage" id="section-opening-hours">
1427
+ Opening Hours
1428
+ <a href="#" class="icon-cog" title="Open Component Settings"
1429
+ @click.prevent="openSettingsSidebar('CmdOpeningHours')"></a>
1430
+ </h2>
1431
+ <CmdOpeningHours
1432
+ ref="CmdOpeningHours"
1433
+ v-bind="cmdOpeningHoursSettingsData"
1434
+ :openingHours="openingHoursData"
1435
+ :checkInterval="0"
1436
+ />
1437
+ </CmdWidthLimitationWrapper>
1438
+ <!-- end opening-hours ------------------------------------------------------------------------------------------------------------------------------------------------------->
1439
+
1440
+ <!-- begin pagination ------------------------------------------------------------------------------------------------------------------------------------------------------->
1441
+ <CmdWidthLimitationWrapper>
1442
+ <h2 class="headline-demopage" id="section-pagination">
1443
+ Pagination
1444
+ <a href="#" class="icon-cog" title="Open Component Settings"
1445
+ @click.prevent="openSettingsSidebar('CmdPagination')"></a>
1446
+ </h2>
1447
+ <div>
1448
+ <p>Page {{ showPagePager }}</p>
1449
+ </div>
1450
+ <CmdPagination
1451
+ ref="CmdPagination"
1452
+ v-bind="cmdPaginationSettingsData"
1453
+ @click="showPagePager = $event"
1454
+ />
1455
+ </CmdWidthLimitationWrapper>
1456
+ <!-- end pagination ------------------------------------------------------------------------------------------------------------------------------------------------------->
1457
+
1458
+ <!-- begin site-footer ------------------------------------------------------------------------------------------------------------------------------------------------------->
1459
+ <CmdWidthLimitationWrapper>
1460
+ <h2 class="headline-demopage" id="section-site-footer">Site Footer</h2>
1461
+ <CmdSiteFooter>
1462
+ Slotcontent
1463
+ </CmdSiteFooter>
1464
+ </CmdWidthLimitationWrapper>
1465
+ <!-- end site-footer ------------------------------------------------------------------------------------------------------------------------------------------------------->
1466
+
1467
+ <!-- begin site-header ------------------------------------------------------------------------------------------------------------------------------------------------------->
1468
+ <CmdWidthLimitationWrapper>
1469
+ <h2 class="headline-demopage" id="section-site-header">
1470
+ Site Header
1471
+ <a href="#" class="icon-cog" title="Open Component Settings"
1472
+ @click.prevent="openSettingsSidebar('CmdSiteHeader')"></a>
1473
+ </h2>
1474
+ <CmdSiteHeader
1475
+ ref="CmdSiteHeader"
1476
+ v-bind="cmdSiteHeaderSettingsData"
1477
+ :cmdMainNavigation="navigationData"
1478
+ :cmdCompanyLogo="companyLogoData"
1479
+ >
1480
+ <template v-slot:topheader>
1481
+ <CmdListOfLinks
1482
+ :links="listOfLinksData"
1483
+ orientation="horizontal"
1484
+ align="right"
1485
+ />
1486
+ </template>
1487
+ </CmdSiteHeader>
1488
+ </CmdWidthLimitationWrapper>
1489
+ <!-- end site-header ------------------------------------------------------------------------------------------------------------------------------------------------------->
1490
+
1491
+ <!-- begin site-search ------------------------------------------------------------------------------------------------------------------------------------------------------->
1492
+ <CmdWidthLimitationWrapper>
1493
+ <h2 class="headline-demopage" id="section-site-search">
1494
+ Site Search
1495
+ <a href="#" class="icon-cog" title="Open Component Settings"
1496
+ @click.prevent="openSettingsSidebar('CmdSiteSearch')"></a>
1497
+ </h2>
1498
+ <CmdSiteSearch
1499
+ ref="CmdSiteSearch"
1500
+ v-bind="cmdSiteSearchSettingsData"
1501
+ v-model:modelValueInput1="siteSearchInput1"
1502
+ v-model:modelValueInput2="siteSearchInput2"
1503
+ v-model:modelValueRadius="radius"
1504
+ v-model:modelValueSearchFilters="filters"
1505
+ @search="siteSearchOutput"
1506
+ :cmdFakeSelect="siteSearchFilters"
1507
+ />
1508
+ </CmdWidthLimitationWrapper>
1509
+ <!-- end site-search ------------------------------------------------------------------------------------------------------------------------------------------------------->
1510
+
1511
+ <!-- begin slideshow ------------------------------------------------------------------------------------------------------------------------------------------------------->
1512
+ <CmdWidthLimitationWrapper>
1513
+ <h2 class="headline-demopage" id="section-slideshow">
1514
+ Slideshow
1515
+ <a href="#" class="icon-cog" title="Open Component Settings"
1516
+ @click.prevent="openSettingsSidebar('CmdSlideshow')"></a>
1517
+ </h2>
1518
+ <CmdSlideshow
1519
+ ref="CmdSlideshow"
1520
+ v-bind="cmdSlideshowSettingsData"
1521
+ :slideshow-items="slideshowData"
1522
+ />
1523
+ </CmdWidthLimitationWrapper>
1524
+ <!-- end slideshow ------------------------------------------------------------------------------------------------------------------------------------------------------->
1525
+
1526
+ <!-- begin social-networks ------------------------------------------------------------------------------------------------------------------------------------------------------->
1527
+ <CmdWidthLimitationWrapper>
1528
+ <h2 class="headline-demopage" id="section-social-networks">
1529
+ Social Networks
1530
+ <a href="#" class="icon-cog" title="Open Component Settings"
1531
+ @click.prevent="openSettingsSidebar('CmdSocialNetworks')"></a>
1532
+ </h2>
1533
+ <CmdSocialNetworks
1534
+ ref="CmdSocialNetworks"
1535
+ v-bind="cmdSocialNetworksSettingsData"
1536
+ :networks="socialNetworksData"
1537
+ />
1538
+ </CmdWidthLimitationWrapper>
1539
+ <!-- end social-networks ------------------------------------------------------------------------------------------------------------------------------------------------------->
1540
+
1541
+ <!-- begin switch-language ------------------------------------------------------------------------------------------------------------------------------------------------------->
1542
+ <CmdWidthLimitationWrapper>
1543
+ <h2 class="headline-demopage" id="section-switch-language">Switch Language</h2>
1544
+ <CmdSwitchLanguage
1545
+ :languages="languagesData"
1546
+ @click="doSomething"
1547
+ />
1548
+ </CmdWidthLimitationWrapper>
1549
+ <!-- end switch-language ------------------------------------------------------------------------------------------------------------------------------------------------------->
1550
+
1551
+ <!-- begin system-message ------------------------------------------------------------------------------------------------------------------------------------------------------->
1552
+ <CmdWidthLimitationWrapper>
1553
+ <h2 class="headline-demopage" id="section-system-message">
1554
+ System Message
1555
+ <a href="#" class="icon-cog" title="Open Component Settings"
1556
+ @click.prevent="openSettingsSidebar('CmdSystemMessage')"></a>
1557
+ </h2>
1558
+ <CmdSystemMessage
1559
+ ref="CmdSystemMessage"
1560
+ v-bind="cmdSystemMessageSettingsData"
1561
+ :iconMessage="{iconClass: 'icon-error-circle', show: true}">
1562
+ <ul>
1563
+ <li>Error #1</li>
1564
+ <li>Error #2</li>
1565
+ <li>Error #3</li>
1566
+ </ul>
1567
+ </CmdSystemMessage>
1568
+ </CmdWidthLimitationWrapper>
1569
+ <!-- end system-message ------------------------------------------------------------------------------------------------------------------------------------------------------->
1570
+
1571
+ <!-- begin tables ------------------------------------------------------------------------------------------------------------------------------------------------------->
1572
+ <CmdWidthLimitationWrapper>
1573
+ <h2 class="headline-demopage" id="section-tables">
1574
+ Tables
1575
+ <a href="#" class="icon-cog" title="Open Component Settings"
1576
+ @click.prevent="openSettingsSidebar('CmdTable')"></a>
1577
+ </h2>
1578
+ <h3>Table as wide as its content (with caption)</h3>
1579
+ <CmdTable
1580
+ ref="CmdTable"
1581
+ v-bind="cmdTableSettingsData"
1582
+ :table-data="tableDataLarge"
1583
+ />
1584
+ <h3>Table as wide as possible</h3>
1585
+ <CmdTable :collapsible="true" :fullWidthOnDefault="false" :userCanToggleWidth="true"
1586
+ :table-data="tableDataLarge"/>
1587
+ </CmdWidthLimitationWrapper>
1588
+ <!-- end tables ------------------------------------------------------------------------------------------------------------------------------------------------------->
1589
+
1590
+ <!-- begin tabs ------------------------------------------------------------------------------------------------------------------------------------------------------->
1591
+ <CmdWidthLimitationWrapper>
1592
+ <h2 class="headline-demopage" id="section-tabs">
1593
+ Tabs
1594
+ <a href="#" class="icon-cog" title="Open Component Settings" @click.prevent="openSettingsSidebar('CmdTabs')"></a>
1595
+ </h2>
1596
+ <CmdTabs
1597
+ ref="CmdTabs"
1598
+ v-bind="cmdTabsSettingsData"
1599
+ :tabs="tabsData">
1600
+ <template v-slot:tab-content-0>
1601
+ <h4>Tab 1 headline</h4>
1602
+ <p>Content</p>
1603
+ </template>
1604
+ <template v-slot:tab-content-1>
1605
+ <h4>Tab 2</h4>
1606
+ <p>Content</p>
1607
+ <p>Content</p>
1608
+ </template>
1609
+ <template v-slot:tab-content-2>
1610
+ <h4>Tab 3</h4>
1611
+ <p>Content</p>
1612
+ <p>Content</p>
1613
+ <p>Content</p>
1614
+ </template>
1615
+ </CmdTabs>
1616
+ </CmdWidthLimitationWrapper>
1617
+ <!-- end tabs ------------------------------------------------------------------------------------------------------------------------------------------------------->
1618
+
1619
+ <!-- begin text-image-block ------------------------------------------------------------------------------------------------------------------------------------------------------->
1620
+ <CmdWidthLimitationWrapper>
1621
+ <h2 class="headline-demopage" id="section-text-image-block">
1622
+ Text-Image-Block
1623
+ <a href="#" class="icon-cog" title="Open Component Settings"
1624
+ @click.prevent="openSettingsSidebar('CmdTextImageBlock')"></a>
1625
+ </h2>
1626
+ <div class="flex-container">
1627
+ <CmdTextImageBlock
1628
+ ref="CmdTextImageBlock"
1629
+ v-bind="cmdTextImageBlockSettingsData"
1630
+ :cmdHeadline="{headlineText: 'Text-Image-Block with image', headlineLevel: 3}"
1631
+ :cmdImage='{
1632
+ "image": {
1633
+ "src": "/media/images/demo-images/large/landscape-01.jpg",
1634
+ "alt": "alternative text",
1635
+ "tooltip": "tooltip"
1636
+ },
1637
+ "figcaption": {
1638
+ "text": "figcaption",
1639
+ "position": "bottom",
1640
+ "textAlign": "center",
1641
+ "show": true
1642
+ }
1643
+ }'
1644
+ htmlContent="Text given as text only"
1645
+ />
1646
+ <CmdTextImageBlock
1647
+ :cmdHeadline="{headlineText: 'Headline', headlineLevel: 3}"
1648
+ htmlContent="<p>Text given as html-content</p>"
1649
+ />
1650
+ </div>
1651
+ </CmdWidthLimitationWrapper>
1652
+ <!-- end text-image-block ------------------------------------------------------------------------------------------------------------------------------------------------------->
1653
+
1654
+ <!-- begin thumbnail-scroller ------------------------------------------------------------------------------------------------------------------------------------------------------->
1655
+ <CmdWidthLimitationWrapper>
1656
+ <h2 class="headline-demopage" id="section-thumbnail-scroller">
1657
+ Thumbnail-Scroller
1658
+ <a href="#" class="icon-cog" title="Open Component Settings"
1659
+ @click.prevent="openSettingsSidebar('CmdThumbnailScroller')"></a>
1660
+ </h2>
1661
+ <div class="inline-size">
1662
+ <CmdThumbnailScroller
1663
+ ref="CmdThumbnailScroller"
1664
+ v-bind="cmdThumbnailScrollerSettingsData"
1665
+ :thumbnail-scroller-items="thumbnailScrollerData"
1666
+ />
1667
+ </div>
1668
+ </CmdWidthLimitationWrapper>
1669
+ <!-- end thumbnail-scroller ------------------------------------------------------------------------------------------------------------------------------------------------------->
1670
+
1671
+ <!-- begin tooltip ------------------------------------------------------------------------------------------------------------------------------------------------------->
1672
+ <CmdWidthLimitationWrapper>
1673
+ <h2 class="headline-demopage" id="section-tooltip">
1674
+ Tooltip
1675
+ <a href="#" class="icon-cog" title="Open Component Settings"
1676
+ @click.prevent="openSettingsSidebar('CmdTooltip')"></a>
1677
+ </h2>
1678
+ <p>
1679
+ <a href="#" @click.prevent id="show-on-hover">Show tooltip on hover!</a><br/>
1680
+ <a href="#" @click.prevent id="show-with-delay">Show tooltip on hover with delay!</a><br/>
1681
+ <a href="#" @click.prevent id="show-on-click" title="Native tooltip">Show tooltip on click!</a>
1682
+ </p>
1683
+ <CmdTooltip
1684
+ ref="CmdTooltip"
1685
+ related-id="show-on-hover"
1686
+ v-bind="cmdTooltipSettingsData"
1687
+ >
1688
+ Tooltip on hover
1689
+ </CmdTooltip>
1690
+ <CmdTooltip :delay-to-show-tooltip="2000" related-id="show-with-delay">
1691
+ Tooltip on hover with delay
1692
+ </CmdTooltip>
1693
+ <CmdTooltip related-id="show-on-click" :toggle-visibility-by-click="true">
1694
+ Tooltip on click
1695
+ </CmdTooltip>
1696
+ </CmdWidthLimitationWrapper>
1697
+ <!-- end tooltip ------------------------------------------------------------------------------------------------------------------------------------------------------->
1698
+
1699
+ <!-- begin upload-form ------------------------------------------------------------------------------------------------------------------------------------------------------->
1700
+ <CmdWidthLimitationWrapper>
1701
+ <h2 class="headline-demopage" id="section-upload-form">
1702
+ Upload-Form
1703
+ <a href="#" class="icon-cog" title="Open Component Settings"
1704
+ @click.prevent="openSettingsSidebar('CmdUploadForm')"></a>
1705
+ </h2>
1706
+ <CmdUploadForm
1707
+ ref="CmdUploadForm"
1708
+ v-bind="cmdUploadFormSettingsData"
1709
+ />
1710
+ </CmdWidthLimitationWrapper>
1711
+ <!-- end upload-form ------------------------------------------------------------------------------------------------------------------------------------------------------->
1712
+ </main>
1713
+
1714
+ <!-- begin copyright-information ------------------------------------------------------------------------------------------------------------------------------------------------------->
1715
+ <CmdCopyrightInformation/>
1716
+ <!-- end copyright-information ------------------------------------------------------------------------------------------------------------------------------------------------------->
1717
+
1718
+ <!-- begin fancy-box ------------------------------------------------------------------------------------------------------------------------------------------------------->
1719
+ <CmdFancyBox
1720
+ :show="fancyBoxCookieDisclaimer"
1721
+ :fancyboxOptions="{}"
1722
+ :allowEscapeKey="false"
1723
+ :cmdHeadline="{show: true, headlineText: 'Cookie Disclaimer', headlineLevel: 2}"
1724
+ ariaLabelText="Cookie Disclaimer"
1725
+ >
1726
+ <!-- begin cookie-disclaimer ------------------------------------------------------------------------------------------------------------------------------------------------------->
1727
+ <CmdCookieDisclaimer
1728
+ :cookieOptions="cookieDisclaimerData"
1729
+ buttonLabelAcceptAllCookies="Accept all cookies"
1730
+ buttonLabelAcceptCurrentSettings="Accept current settings"
1731
+ @closeCookieDisclaimer="closeCookieDisclaimer"
1732
+ v-model="acceptedCookies"
1733
+ :cmdHeadlineCookieDisclaimer="{ show: false }">
1734
+ <template #privacy-text>
1735
+ <p>
1736
+ <strong>
1737
+ By browsing this web site you accept the usage and saving of anonymous data!
1738
+ </strong>
1739
+ </p>
1740
+ </template>
1741
+ </CmdCookieDisclaimer>
1742
+ <!-- end cookie-disclaimer ------------------------------------------------------------------------------------------------------------------------------------------------------->
1743
+ </CmdFancyBox>
1744
+ <!-- end fancy-box ------------------------------------------------------------------------------------------------------------------------------------------------------->
1745
+ <CmdSidebar
1746
+ v-if="showSettingsSidebar"
1747
+ id="component-settings"
1748
+ :cmdHeadline="{headlineText: 'Component Settings', headlineLevel: 3, textAlign: 'center'}"
1749
+ :openSidebar="openRightSidebar"
1750
+ @toggle-sidebar="setOpenStatusRightSidebar"
1751
+ :collapseToLeft="false"
1752
+ >
1753
+ <template #open>
1754
+ <ComponentSettings
1755
+ :componentName="componentName"
1756
+ :componentProps="componentProps"
1757
+ :componentSettings="componentSettings"
1758
+ :componentControls="componentControls"
1759
+ />
1760
+ </template>
1761
+ </CmdSidebar>
1762
+ </div><!-- end #page-wrapper -->
1763
+ </div>
1764
+ </template>
1765
+
1766
+ <script>
1767
+ // import used example data
1768
+ import accordionData from '@/assets/data/accordion.json'
1769
+ import addressData from '@/assets/data/address-data.json'
1770
+ import bankAccountData from '@/assets/data/bank-account-data.json'
1771
+ import boxUserData from '@/assets/data/box-user.json'
1772
+ import boxProductData from '@/assets/data/box-product.json'
1773
+ import breadcrumbData from '@/assets/data/breadcrumbs.json'
1774
+ import companyLogoData from '@/assets/data/company-logo.json'
1775
+ import cookieDisclaimerData from '@/assets/data/cookie-disclaimer.json'
1776
+ import fakeSelectColorsData from '@/assets/data/fake-select-colors.json'
1777
+ import fakeSelectCountriesData from '@/assets/data/fake-select-countries.json'
1778
+ import fakeSelectFilterOptionsData from '@/assets/data/fake-select-filter-options.json'
1779
+ import fakeSelectOptionsData from '@/assets/data/fake-select-options.json'
1780
+ import fakeSelectOptionsWithIconsData from '@/assets/data/fake-select-options-with-icons.json'
1781
+ import formElementsData from '@/assets/data/form-elements.json'
1782
+ import imageData from '@/assets/data/image.json'
1783
+ import imageGalleryData from '@/assets/data/image-gallery.json'
1784
+ import inputGroupRadiobuttonsData from '@/assets/data/input-group-radiobuttons.json'
1785
+ import inputGroupReplacedRadiobuttonsData from '@/assets/data/input-group-replaced-radiobuttons.json'
1786
+ import inputGroupToggleSwitchRadiobuttonsData from '@/assets/data/input-group-toggle-switch-radiobuttons.json'
1787
+ import listOfLinksData from '@/assets/data/list-of-links.json'
1788
+ import languagesData from '@/assets/data/switch-language.json'
1789
+ import multistepsData from '@/assets/data/multistep-form-progress-bar.json'
1790
+ import navigationData from '@/assets/data/main-navigation.json'
1791
+ import openingHoursData from '@/assets/data/opening-hours.json'
1792
+ import selectOptionsData from '@/assets/data/select-options.json'
1793
+ import socialNetworksData from '@/assets/data/social-networks-page-by-json.json'
1794
+ import slideshowData from '@/assets/data/slideshow.json'
1795
+ import tabsData from '@/assets/data/tabs.json'
1796
+ import tableDataSmall from '@/assets/data/table-small.json'
1797
+ import tableDataLarge from '@/assets/data/table-large.json'
1798
+ import thumbnailScrollerImagesData from '@/assets/data/thumbnail-scroller-images.json'
1799
+ import thumbnailScrollerTextData from '@/assets/data/thumbnail-scroller-text.json'
1800
+
1801
+ import packageJson from '../package.json'
1802
+
1803
+ import {openFancyBox} from "@/components/CmdFancyBox.vue"
1804
+
1805
+ // import external functions
1806
+ import * as functions from "@/mixins/FieldValidation.js"
1807
+
1808
+ import {localizedTime} from "./components/CmdOpeningHours.vue"
1809
+
1810
+ export default {
1811
+ name: "App",
1812
+ data() {
1813
+ return {
1814
+ cmdAddressDataSettingsData: {
1815
+ useSlot: false,
1816
+ showLabelIcons: true,
1817
+ showLabelTexts: false,
1818
+ showIconsOnly: false,
1819
+ showLabels: true
1820
+ },
1821
+ cmdBankAccountDataSettingsData: {
1822
+ allowCopyByClick: false,
1823
+ additionalInformation: ""
1824
+ },
1825
+ cmdBreadcrumbsSettingsData: {
1826
+ breadcrumbLabel: "You are here",
1827
+ breadcrumbSeparator: ">"
1828
+ },
1829
+ cmdBoxSettingsData: {
1830
+ openCollapsedBox: false,
1831
+ rowView: false,
1832
+ boxType: "content",
1833
+ collapsible: false,
1834
+ cutoffTextLines: 0,
1835
+ useDefaultPadding: true,
1836
+ repeatHeadlineInBoxBody: false,
1837
+ fadeLastLine: true,
1838
+ useTransition: false,
1839
+ boxBodyClass: "",
1840
+ profileType: "business",
1841
+ textBody: "",
1842
+ stretchHorizontally: true,
1843
+ stretchVertically: true
1844
+ },
1845
+ cmdBoxSettingsControls: {
1846
+ "boxType": [
1847
+ {
1848
+ text: "Content (default)",
1849
+ value: "content"
1850
+ },
1851
+ {
1852
+ text: "Product",
1853
+ value: "product"
1854
+ },
1855
+ {
1856
+ text: "User",
1857
+ value: "user"
1858
+ }
1859
+ ]
1860
+ },
1861
+ cmdHeadlineSettingsData: {
1862
+ preHeadlineText: "Pre-headline text",
1863
+ headlineText: "Headline text",
1864
+ headlineLevel: 1,
1865
+ textAlign: "left"
1866
+ },
1867
+ cmdHeadlineSettingsControls: {
1868
+ "textAlign": [
1869
+ {
1870
+ text: "Left (default)",
1871
+ value: "left"
1872
+ },
1873
+ {
1874
+ text: "Center",
1875
+ value: "center"
1876
+ },
1877
+ {
1878
+ text: "Right",
1879
+ value: "right"
1880
+ }
1881
+ ]
1882
+ },
1883
+ cmdInputGroupSettingsData: {
1884
+ required: false,
1885
+ inputTypes: "radio",
1886
+ status: "",
1887
+ replaceInputType: false,
1888
+ toggleSwitch: false,
1889
+ useSlot: false,
1890
+ multipleSwitch: false,
1891
+ showLabel: true,
1892
+ labelText: "Group label for input-group:",
1893
+ labelInline: false,
1894
+ stretchHorizontally: false,
1895
+ disabled: false
1896
+ },
1897
+ cmdInputGroupSettingsControls: {
1898
+ "inputTypes": [
1899
+ {
1900
+ text: "Checkbox (default)",
1901
+ value: "checkbox"
1902
+ },
1903
+ {
1904
+ text: "Radio",
1905
+ value: "radio"
1906
+ }
1907
+ ]
1908
+ },
1909
+ cmdImageSettingsData: {},
1910
+ cmdImageGallerySettingsData: {
1911
+ useFancyboxForLargeImages: true,
1912
+ figcaptionPosition: "bottom"
1913
+ },
1914
+ cmdImageGallerySettingsControls: {
1915
+ figcaptionPosition: [
1916
+ {
1917
+ text: "Top",
1918
+ value: "top"
1919
+ },
1920
+ {
1921
+ text: "Bottom (default)",
1922
+ value: "bottom"
1923
+ }
1924
+ ]
1925
+ },
1926
+ cmdListOfLinksSettingsData: {
1927
+ useGap: true,
1928
+ styleAsBox: false,
1929
+ largeIcons: false,
1930
+ sectionAnchors: false,
1931
+ orientation: "vertical",
1932
+ align: "left"
1933
+ },
1934
+ cmdListOfLinksSettingsControls: {
1935
+ align: [
1936
+ {
1937
+ text: "Left (default)",
1938
+ value: "left"
1939
+ },
1940
+ {
1941
+ text: "Center",
1942
+ value: "center"
1943
+ },
1944
+ {
1945
+ text: "Right",
1946
+ value: "right"
1947
+ },
1948
+
1949
+ ],
1950
+ orientation: [
1951
+ {
1952
+ text: "Vertical (default)",
1953
+ value: "vertical"
1954
+ },
1955
+ {
1956
+ text: "Horizontal",
1957
+ value: "horizontal"
1958
+ }
1959
+ ]
1960
+ },
1961
+ cmdLoginFormSettingsData: {
1962
+ textLegendLoginForm: "Login form",
1963
+ showLegend: true,
1964
+ textLegendForgotLoginForm: "Forgot login form"
1965
+ },
1966
+ cmdMainNavigationSettingsData: {
1967
+ offcanvasPosition: "right",
1968
+ stretchMainItems: false,
1969
+ persistOnMobile: false,
1970
+ subentriesIconClass: "icon-single-arrow-down",
1971
+ subSubentriesIconClass: "icon-single-arrow-right"
1972
+ },
1973
+ cmdMultistepFormProgressBarSettingsData: {
1974
+ showStepNumber: false,
1975
+ separatorIconClass: "icon-single-arrow-right"
1976
+ },
1977
+ cmdMultistepFormProgressBarSettingsControls: {
1978
+ separatorIconClass: [
1979
+ {
1980
+ text: "icon-single-arrow-right (default)",
1981
+ value: "icon-single-arrow-right"
1982
+ },
1983
+ {
1984
+ text: "icon-double-arrow-right",
1985
+ value: "icon-double-arrow-right"
1986
+ }
1987
+ ]
1988
+ },
1989
+ cmdNewsletterSubscriptionSettingsData: {
1990
+ buttonType: "submit",
1991
+ showLegend: true,
1992
+ textLegend: "Stay up-to-date"
1993
+ },
1994
+ cmdNewsletterSubscriptionSettingsControls: {
1995
+ buttonType: [
1996
+ {
1997
+ text: "Button (default)",
1998
+ value: "button"
1999
+ },
2000
+ {
2001
+ text: "Submit",
2002
+ value: "submit"
2003
+ }
2004
+ ]
2005
+ },
2006
+ cmdOpeningHoursSettingsData: {
2007
+ closed: true,
2008
+ separator: "-",
2009
+ textOpen: "Open right now!",
2010
+ textClosed: "Closed right now!",
2011
+ textHolidays: "",
2012
+ textMiscInfo: "",
2013
+ abbreviationTextAm: "am",
2014
+ abbreviationTextPm: "pm",
2015
+ componentHandlesClosedStatus: false,
2016
+ cmdHeadline: {
2017
+ headlineText: "Opening Hours",
2018
+ headlineLevel: 3
2019
+ }
2020
+ },
2021
+ cmdPaginationSettingsData: {
2022
+ pages: 3,
2023
+ itemsPerPage: 1,
2024
+ showPageNumbers: true,
2025
+ linkType: "button"
2026
+ },
2027
+ cmdPaginationSettingsControls: {
2028
+ linkType: [
2029
+ {
2030
+ text: "Href (default)",
2031
+ value: "href"
2032
+ },
2033
+ {
2034
+ text: "Button",
2035
+ value: "button"
2036
+ }
2037
+ ]
2038
+ },
2039
+ cmdSiteHeaderSettingsData: {
2040
+ sticky: false,
2041
+ navigationInline: false,
2042
+ useGrid: true
2043
+ },
2044
+ cmdSiteSearchSettingsData: {
2045
+ useFilters: true,
2046
+ textLegend: "Search",
2047
+ showLegend: true
2048
+ },
2049
+ cmdSlideshowSettingsData: {
2050
+ useSlot: false,
2051
+ autoplay: false,
2052
+ autoplayInterval: 5000,
2053
+ showQuickLinkIcons: true,
2054
+ showCounter: true
2055
+ },
2056
+ cmdSocialNetworksSettingsData: {
2057
+ align: "left",
2058
+ useGap: true,
2059
+ stretchButtons: false,
2060
+ userMustAcceptDataPrivacy: true,
2061
+ tooltipAcceptDataPrivacy: "You must accept data privacy conditions!",
2062
+ buttonTextAlign: "left"
2063
+ },
2064
+ cmdSocialNetworksSettingsControls: {
2065
+ align: [
2066
+ {
2067
+ text: "Left (default)",
2068
+ value: "left"
2069
+ },
2070
+ {
2071
+ text: "Center",
2072
+ value: "center"
2073
+ },
2074
+ {
2075
+ text: "Right",
2076
+ value: "right"
2077
+ }
2078
+ ]
2079
+ },
2080
+ cmdSystemMessageSettingsData: {
2081
+ validationStatus: "error",
2082
+ fullWidth: true,
2083
+ systemMessage: "This is an error message!",
2084
+ messageHeadlineLevel: 4
2085
+ },
2086
+ cmdSystemMessageSettingsControls: {
2087
+ validationStatus: [
2088
+ {
2089
+ text: "Error",
2090
+ value: "error"
2091
+ },
2092
+ {
2093
+ text: "Warning",
2094
+ value: "warning"
2095
+ },
2096
+ {
2097
+ text: "Success",
2098
+ value: "success"
2099
+ },
2100
+ {
2101
+ text: "Info",
2102
+ value: "info"
2103
+ }
2104
+ ]
2105
+ },
2106
+ cmdTableSettingsData: {
2107
+ collapsible: false,
2108
+ fullWidthOnDefault: false,
2109
+ userCanToggleWidth: true,
2110
+ showSlideButtons: true
2111
+ },
2112
+ cmdTabsSettingsData: {
2113
+ stretchTabs: false,
2114
+ useSlot: false,
2115
+ activeTab: 0
2116
+ },
2117
+ cmdTextImageBlockSettingsData: {
2118
+ htmlContent: "Text given as html-content",
2119
+ paragraphTextAlign: "left",
2120
+ headlinePosition: "aboveImage"
2121
+ },
2122
+ cmdTextImageBlockSettingsControls: {
2123
+ paragraphTextAlign: [
2124
+ {
2125
+ text: "Left (default)",
2126
+ value: "left"
2127
+ },
2128
+ {
2129
+ text: "Center",
2130
+ value: "center"
2131
+ },
2132
+ {
2133
+ text: "Right",
2134
+ value: "right"
2135
+ }
2136
+ ],
2137
+ headlinePosition: [
2138
+ {
2139
+ text: "Above Image (default)",
2140
+ value: "aboveImage"
2141
+ },
2142
+ {
2143
+ text: "Below Image",
2144
+ value: "belowImage"
2145
+ }
2146
+ ]
2147
+ },
2148
+ cmdThumbnailScrollerSettingsData: {
2149
+ orientation: "horizontal",
2150
+ fullWidth: false,
2151
+ largeIcons: false,
2152
+ contentType: "image",
2153
+ executeOnClick: "fancyBox",
2154
+ allowOpenFancyBox: true,
2155
+ activeItemIndex: 0,
2156
+ useGalleryScroller: false
2157
+ },
2158
+ cmdThumbnailScrollerSettingsControls: {
2159
+ orientation: [
2160
+ {
2161
+ text: "Horizontal (default)",
2162
+ value: "horizontal"
2163
+ },
2164
+ {
2165
+ text: "Vertical",
2166
+ value: "vertical"
2167
+ }
2168
+ ],
2169
+ contentType: [
2170
+ {
2171
+ text: "Image (default)",
2172
+ value: "image"
2173
+ },
2174
+ {
2175
+ text: "Text",
2176
+ value: "text"
2177
+ }
2178
+ ],
2179
+ executeOnClick: [
2180
+ {
2181
+ text: "Fancybox (default)",
2182
+ value: "fancybox"
2183
+ },
2184
+ {
2185
+ text: "URL",
2186
+ value: "url"
2187
+ },
2188
+ {
2189
+ text: "Emit",
2190
+ value: "emit"
2191
+ }
2192
+ ]
2193
+ },
2194
+ cmdToggleDarkModeSettingsData: {
2195
+ styledAsButton: false,
2196
+ showLabel: true,
2197
+ useStyledLayout: false,
2198
+ labelTextDarkMode: "Dark-mode enabled",
2199
+ labelTextLightMode: "Light-mode enabled"
2200
+ },
2201
+ cmdTooltipSettingsData: {
2202
+ tooltipText: "This is a tooltip!",
2203
+ delayToShowTooltip: 0,
2204
+ status: "",
2205
+ toggleVisibilityByClick: false
2206
+ },
2207
+ cmdUploadFormSettingsData: {
2208
+ showTotalUpload: true,
2209
+ componentHandlesUpload: true,
2210
+ commentRequired: true,
2211
+ commentStatusMessage: "",
2212
+ enableDragAndDrop: false,
2213
+ enableComment: true,
2214
+ presetComment: "",
2215
+ maxTotalUploadSize: 5242880,
2216
+ maxFileUploadSize: 10485760,
2217
+ allowMultipleFileUploads: false,
2218
+ advancedMode: true,
2219
+ showLegend: true,
2220
+ textLegend: "Advanced upload form",
2221
+ allowedFileExtensions: ["jpg", "eps"]
2222
+ },
2223
+ componentControls: {},
2224
+ selectedTemplate: "blank",
2225
+ acceptedCookies: ["google-maps"],
2226
+ showTooltip: false,
2227
+ showSettingsSidebar: false,
2228
+ disabledStatus: undefined,
2229
+ validationStatus: "",
2230
+ loginData: {
2231
+ username: "",
2232
+ password: ""
2233
+ },
2234
+ newsletter: {
2235
+ subscription: "",
2236
+ email: ""
2237
+ },
2238
+ inputFieldPattern: "",
2239
+ inputSearch: "",
2240
+ textarea: "",
2241
+ inputGroupRadio: "radiobuttonValue1",
2242
+ inputGroup: "website",
2243
+ inputGroupValueReplaceInputTypeRadio: "phone",
2244
+ inputGroupValueReplaceInputTypeCheckbox: ["phone"],
2245
+ inputGroupValueToggleSwitchCheckbox: ["phone"],
2246
+ inputGroupValueToggleSwitchRadio: "phone",
2247
+ inputGroupValue3: "email",
2248
+ inputGroupValue4: [],
2249
+ inputGroupCheckboxes: [
2250
+ {
2251
+ labelText: "Website",
2252
+ id: "checkbox-id-1",
2253
+ name: "input-group-checkbox",
2254
+ iconClass: "icon-globe",
2255
+ value: "website"
2256
+ },
2257
+ {
2258
+ labelText: "E-Mail",
2259
+ id: "checkbox-id-2",
2260
+ name: "input-group-checkbox",
2261
+ iconClass: "icon-mail",
2262
+ value: "email"
2263
+ },
2264
+ {
2265
+ labelText: "Phone",
2266
+ id: "checkbox-id-3",
2267
+ name: "input-group-checkbox",
2268
+ iconClass: "icon-phone",
2269
+ value: "phone"
2270
+ }
2271
+ ],
2272
+ inputNumber: "",
2273
+ inputDate: "",
2274
+ accordionGroupOpen: false,
2275
+ showPageMultistep: 1,
2276
+ showPagePager: 1,
2277
+ selectedOption: "",
2278
+ selectedOptions: [],
2279
+ selectedCountry: "de",
2280
+ selectedColor: "",
2281
+ rangeValue: 50,
2282
+ siteSearchFilters: {
2283
+ show: true,
2284
+ selectData: fakeSelectFilterOptionsData,
2285
+ defaultOptionName: "Select filters:",
2286
+ labelText: "Filters:",
2287
+ type: "checkboxOptions"
2288
+ },
2289
+ siteSearchInput1: "Doctor",
2290
+ siteSearchInput2: "New York",
2291
+ radius: 5,
2292
+ filters: ["2"],
2293
+ switchButtonRadio: "radio1",
2294
+ switchButtonCheckboxToggleSwitch: false,
2295
+ switchButtonCheckboxToggleSwitchColored: false,
2296
+ switchButtonCheckbox: ["checkbox1"],
2297
+ switchButtonCheckboxColored: false,
2298
+ inputMail: "",
2299
+ inputUsername: "",
2300
+ inputPassword: "",
2301
+ inputField1: "",
2302
+ inputFieldRequired: "",
2303
+ componentName: "",
2304
+ componentProps: {},
2305
+ componentSettings: {},
2306
+ checkboxValue: true,
2307
+ checkboxRequiredValue: false,
2308
+ checkboxValues: ["checkboxValue1"],
2309
+ replacedCheckboxValue: "checkboxValue1",
2310
+ radiobuttonValue: "radiobuttonValue1",
2311
+ replacedRadiobuttonValue: "radiobuttonValue1",
2312
+ fancyBoxCookieDisclaimer: false,
2313
+ fakeSelectDefault: 3,
2314
+ fakeSelectDefaultWithIcons: 1,
2315
+ fakeSelectCheckbox: [1],
2316
+ fakeSelectFilters: [],
2317
+ datalist: {
2318
+ id: "datalist-id",
2319
+ options: [
2320
+ "Option 1",
2321
+ "Option 2",
2322
+ "Option 3"
2323
+ ]
2324
+ },
2325
+ customRequirements: [
2326
+ functions.validateCharacters(),
2327
+ functions.validateNumbers(),
2328
+ functions.validateNumbersOnly(),
2329
+ functions.validateSpecialCharacters(),
2330
+ functions.validateCapitalLetters()
2331
+ ],
2332
+ openLeftSidebar: true,
2333
+ openRightSidebar: false,
2334
+ openBoxes: [0],
2335
+
2336
+ // assign data from json files to data-properties
2337
+ accordionData,
2338
+ addressData,
2339
+ bankAccountData,
2340
+ boxProductData,
2341
+ boxUserData,
2342
+ breadcrumbData,
2343
+ companyLogoData,
2344
+ cookieDisclaimerData,
2345
+ fakeSelectColorsData,
2346
+ fakeSelectCountriesData,
2347
+ fakeSelectFilterOptionsData,
2348
+ fakeSelectOptionsData,
2349
+ fakeSelectOptionsWithIconsData,
2350
+ formElementsData,
2351
+ listOfLinksData,
2352
+ imageData,
2353
+ imageGalleryData,
2354
+ inputGroupReplacedRadiobuttonsData,
2355
+ inputGroupToggleSwitchRadiobuttonsData,
2356
+ languagesData,
2357
+ multistepsData,
2358
+ navigationData,
2359
+ openingHoursData,
2360
+ selectOptionsData,
2361
+ socialNetworksData,
2362
+ slideshowData,
2363
+ tableDataSmall,
2364
+ tableDataLarge,
2365
+ tabsData,
2366
+ thumbnailScrollerImagesData,
2367
+ thumbnailScrollerTextData,
2368
+ packageJson
2369
+ }
2370
+ },
2371
+ computed: {
2372
+ templateId() {
2373
+ return "template-" + this.selectedTemplate
2374
+ },
2375
+ thumbnailScrollerData() {
2376
+ if (this.cmdThumbnailScrollerSettingsData.contentType === "image") {
2377
+ return this.thumbnailScrollerImagesData
2378
+ }
2379
+ return this.thumbnailScrollerTextData
2380
+ }
2381
+ },
2382
+ methods: {
2383
+ updateSettingsSidebar(ComponentName) {
2384
+ if (this.openRightSidebar) {
2385
+ this.openSettingsSidebar(ComponentName)
2386
+ }
2387
+ },
2388
+ hideSettingsSidebar() {
2389
+ this.showSettingsSidebar = false
2390
+ },
2391
+ openSettingsSidebar(ComponentName) {
2392
+ this.showSettingsSidebar = true
2393
+ this.openRightSidebar = true
2394
+ this.componentName = ComponentName
2395
+ this.componentProps = this.$refs[ComponentName].$props
2396
+ let lowerCaseComponentName = ComponentName.charAt(0).toLowerCase() + ComponentName.slice(1)
2397
+ this.componentSettings = this[lowerCaseComponentName + "SettingsData"]
2398
+
2399
+ const controlsName = lowerCaseComponentName + "SettingsControls"
2400
+ if (this[controlsName]) {
2401
+ this.componentControls = this[controlsName]
2402
+ }
2403
+
2404
+ console.log("this.componentProps", this.componentProps)
2405
+ },
2406
+ setOpenStatusLeftSidebar(event) {
2407
+ this.openLeftSidebar = event
2408
+ },
2409
+ setOpenStatusRightSidebar(event) {
2410
+ this.openRightSidebar = event
2411
+ },
2412
+ openBox(boxIndex) {
2413
+ this.openSidebar = true
2414
+ this.openBoxes = [boxIndex]
2415
+ },
2416
+ navigationDataRight() {
2417
+ setTimeout(() => {
2418
+ let navigationData = {}
2419
+ navigationData = [...this.navigationData.navigationEntries]
2420
+ navigationData.offcanvasPosition = "right"
2421
+ return navigationData
2422
+ }, 1000);
2423
+ },
2424
+ clickOnListOfLinks(event) {
2425
+ event.originalEvent.preventDefault()
2426
+ console.log(event)
2427
+ },
2428
+ localizedTime(language) {
2429
+ return (h, m) => (localizedTime(language))(h, m).toLowerCase()
2430
+ },
2431
+ idForReplacedInputsInInputGroup(prefix) {
2432
+ return inputGroupRadiobuttonsData.map(item => ({...item, id: prefix + item.id}))
2433
+ },
2434
+ closeCookieDisclaimer(event) {
2435
+ this.fancyBoxCookieDisclaimer = false
2436
+ alert(event.join(", "))
2437
+ },
2438
+ setStatus(validationStatus, disabledStatus) {
2439
+ this.validationStatus = validationStatus
2440
+ this.disabledStatus = disabledStatus
2441
+ },
2442
+ onClick(event) {
2443
+ alert(event)
2444
+ },
2445
+ siteSearchOutput(event) {
2446
+ alert(JSON.stringify(event))
2447
+ },
2448
+ showError() {
2449
+ alert("Error")
2450
+ },
2451
+ showFancyBox(type, content, ariaLabelText) {
2452
+ if (type === "text") {
2453
+ openFancyBox({
2454
+ content: content,
2455
+ cmdHeadline: {
2456
+ show: true,
2457
+ headlineText: "Fancybox with text", headlineLevel: 3
2458
+ },
2459
+ ariaLabelText: ariaLabelText
2460
+ })
2461
+ } else if (type === "url") {
2462
+ openFancyBox({
2463
+ url: content,
2464
+ cmdHeadline: {
2465
+ show: true,
2466
+ headlineText: "Fancybox with image given by url", headlineLevel: 3
2467
+ },
2468
+ ariaLabelText: ariaLabelText
2469
+ })
2470
+ } else if (type === "image") {
2471
+ openFancyBox({
2472
+ cmdHeadline: {
2473
+ show: true,
2474
+ headlineText: "Fancybox with image given by property",
2475
+ headlineLevel: 3
2476
+ },
2477
+ cmdImage: {
2478
+ image: {
2479
+ src: {
2480
+ small: content.small,
2481
+ medium: content.medium,
2482
+ large: content.large
2483
+ },
2484
+ alt: "Alternative text",
2485
+ tooltip: "This is a tooltip"
2486
+ },
2487
+ figcaption: {
2488
+ show: true,
2489
+ text: "figcaption"
2490
+ }
2491
+ },
2492
+ ariaLabelText: ariaLabelText
2493
+ })
2494
+ }
2495
+ },
2496
+ getOptionName(option) {
2497
+ for (let i = 0; i < this.fakeSelectFilterOptionsData.length; i++) {
2498
+ if (option === this.fakeSelectFilterOptionsData[i].value) {
2499
+ return this.fakeSelectFilterOptionsData[i].text
2500
+ }
2501
+ }
2502
+ return null
2503
+ },
2504
+ submitNewsletterRegistration(event) {
2505
+ alert(event.subscription + " " + event.email)
2506
+ },
2507
+ doSomething(event) {
2508
+ event.preventDefault()
2509
+ alert("Language changed!")
2510
+ },
2511
+ executeSearch() {
2512
+ return Math.floor(Math.random() * 100)
2513
+ },
2514
+ doConsoleLog(event) {
2515
+ event.originalEvent.preventDefault()
2516
+ console.log("event: ", event)
2517
+ },
2518
+ toggleAllAccordions() {
2519
+ if (this.accordionGroupOpen) {
2520
+ this.$refs.accordionGroup1.closeAll()
2521
+ } else {
2522
+ this.$refs.accordionGroup1.openAll()
2523
+ }
2524
+ this.accordionGroupOpen = !this.accordionGroupOpen
2525
+ },
2526
+ switchButtonChange() {
2527
+ alert("Changed")
2528
+ }
2529
+ },
2530
+ watch: {
2531
+ selectedTemplate() {
2532
+ let linkTag = document.querySelector('link')
2533
+
2534
+ if (linkTag) {
2535
+ linkTag.parentNode.removeChild(linkTag)
2536
+ }
2537
+
2538
+ if (this.selectedTemplate !== "blank") {
2539
+ let newLink = document.createElement('link');
2540
+ newLink.rel = 'stylesheet';
2541
+ newLink.href = 'https://cdn.jsdelivr.net/npm/comand-frontend-framework/dist/templates/' + this.selectedTemplate + '.css';
2542
+
2543
+ document.head.appendChild(newLink);
2544
+ }
2545
+ }
2546
+ }
2547
+ }
2548
+ </script>
2549
+
2550
+ <style>
2551
+ .list-status {
2552
+ .active {
2553
+ color: var(--text-color);
2554
+ text-decoration: none;
2555
+ background: none;
2556
+ }
2557
+ }
2558
+
2559
+ main .cmd-width-limitation-wrapper:not(:last-child) {
2560
+ border-bottom: var(--default-border);
2561
+ border-style: dashed;
2562
+
2563
+ section {
2564
+ padding-top: calc(var(--default-padding) * 6);
2565
+ padding-bottom: calc(var(--default-padding) * 6);
2566
+ }
2567
+ }
2568
+
2569
+ .headline-demopage {
2570
+ [class*="icon-"] {
2571
+ font-size: 2rem;
2572
+ }
2573
+ }
2574
+
2575
+ .cmd-sidebar {
2576
+ position: fixed;
2577
+ top: 0;
2578
+ left: 0;
2579
+ z-index: 2000;
2580
+ max-width: 30rem;
2581
+ height: 100vh;
2582
+ margin: 0;
2583
+ padding: 0;
2584
+ gap: 0;
2585
+ border: 0;
2586
+ border-right-width: 0;
2587
+ border-right-style: none;
2588
+ border-right-color: currentcolor;
2589
+ border-right: var(--default-border);
2590
+
2591
+ .box {
2592
+ border-right: 0;
2593
+
2594
+ &:not(:last-child) {
2595
+ border-bottom: 0;
2596
+ }
2597
+ }
2598
+
2599
+ .open-slot-wrapper {
2600
+ display: flex;
2601
+ flex-direction: column;
2602
+ justify-content: space-between;
2603
+ height: 100%;
2604
+
2605
+ .comand-versions {
2606
+ padding: var(--default-padding);
2607
+ margin: 0;
2608
+ }
2609
+ }
2610
+
2611
+ .closed-sidebar {
2612
+ display: flex;
2613
+ flex-direction: column;
2614
+ gap: var(--default-gap);
2615
+ padding: var(--default-padding);
2616
+ }
2617
+
2618
+ &:last-child {
2619
+ left: auto;
2620
+ right: 0;
2621
+ }
2622
+ }
2623
+
2624
+ #component-settings {
2625
+ .open-slot-wrapper {
2626
+ display: block;
2627
+ }
2628
+ }
2629
+ </style>