comand-component-library 3.3.87 → 4.0.1

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