comand-component-library 4.0.14 → 4.0.16

Sign up to get free protection for your applications and to get access to all the features.
Files changed (22) hide show
  1. package/dist/comand-component-library.js +1759 -1667
  2. package/dist/comand-component-library.umd.cjs +3 -3
  3. package/dist/style.css +1 -1
  4. package/package.json +2 -2
  5. package/src/ComponentLibrary.vue +73 -99
  6. package/src/assets/data/listOfComponents.json +39 -0
  7. package/src/componentSettingsDataAndControls.vue +5 -0
  8. package/src/components/CmdBox.vue +2 -3
  9. package/src/components/CmdCompanyLogo.vue +6 -3
  10. package/src/components/CmdFancyBox.vue +2 -1
  11. package/src/components/CmdForm.vue +16 -2
  12. package/src/components/CmdFormElement.vue +1 -8
  13. package/src/components/CmdImage.vue +4 -1
  14. package/src/components/CmdMainNavigation.vue +3 -3
  15. package/src/components/CmdOpeningHours.vue +29 -26
  16. package/src/components/CmdPageHeader.vue +1 -1
  17. package/src/components/CmdSiteHeader.vue +100 -10
  18. package/src/components/ComponentSettings.vue +0 -1
  19. package/src/pages/BasicForm.vue +23 -20
  20. package/src/pages/ContactInformation.vue +13 -4
  21. package/src/pages/PageOverview.vue +33 -2
  22. package/src/App.vue +0 -2117
package/src/App.vue DELETED
@@ -1,2117 +0,0 @@
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="setOpenStatus"
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">Address Data</a></li>
51
- <li><a href="#section-advanced-form-elements">Advanced Form Elements</a></li>
52
- <li><a href="#section-bank-account-data">Bank Account Data</a></li>
53
- <li><a href="#section-boxes">Boxes</a></li>
54
- <li><a href="#section-breadcrumbs">Breadcrumbs</a></li>
55
- <li><a href="#section-cookie-disclaimer">Cookie-Disclaimer</a></li>
56
- <li><a href="#section-headlines">Headlines</a></li>
57
- <li><a href="#section-fancybox">Fancybox</a></li>
58
- </ul>
59
- <ul>
60
- <li><a href="#section-forms">Forms</a></li>
61
- <li><a href="#section-google-maps">Google-Maps&trade;</a></li>
62
- <li><a href="#section-headlines">Headlines</a></li>
63
- <li><a href="#section-icons">Icons</a></li>
64
- <li><a href="#section-image">Image</a></li>
65
- <li><a href="#section-image-gallery">Image Gallery</a></li>
66
- <li><a href="#section-image-zoom">Image-Zoom</a></li>
67
- <li><a href="#section-list-of-links">List Of Links</a></li>
68
- </ul>
69
- <ul>
70
- <li><a href="#section-login-form">Login Form</a></li>
71
- <li><a href="#section-main-navigation">Main-Navigation</a></li>
72
- <li><a href="#section-multistep-form-progress-bar">Multistepform-Progressbar</a></li>
73
- <li><a href="#section-opening-hours">Opening Hours</a></li>
74
- <li><a href="#section-pagination">Pagination</a></li>
75
- <li><a href="#section-site-footer">Site Footer</a></li>
76
- <li><a href="#section-site-header">Site Header</a></li>
77
- <li><a href="#section-site-search">Site Search</a></li>
78
- <li><a href="#section-slideshow">Slideshow</a></li>
79
- </ul>
80
- <ul>
81
- <li><a href="#section-social-networks">Social Networks</a></li>
82
- <li><a href="#section-switch-language">Switch Language</a></li>
83
- <li><a href="#section-system-message">System-Message</a></li>
84
- <li><a href="#section-tables">Tables</a></li>
85
- <li><a href="#section-tabs">Tabs</a></li>
86
- <li><a href="#section-text-image-block">Text Image Block</a></li>
87
- <li><a href="#section-thumbnail-scroller">Thumbnail-Scroller</a></li>
88
- <li><a href="#section-toggle-darkmode">ToggleDarkMode</a></li>
89
- <li><a href="#section-tooltip">Tooltip</a></li>
90
- <li><a href="#section-upload-form">Upload-Form</a></li>
91
- </ul>
92
- </template>
93
- </CmdBox>
94
- </template>
95
- </CmdBoxWrapper>
96
- <dl class="comand-versions">
97
- <dt>Frontend-Framework Version:</dt>
98
- <dd>{{ packageJson.dependencies['comand-frontend-framework'].replace("^", "") }}</dd>
99
- <dt>Component-Library Version:</dt>
100
- <dd>{{ packageJson.version }}</dd>
101
- </dl>
102
- </template>
103
- <template #closed>
104
- <div class="closed-sidebar">
105
- <a href="#" class="button primary" title="Open Template Settings" @click.prevent="openBox(0)">
106
- <span class="icon-settings-template"></span>
107
- </a>
108
- <a href="#" class="button primary" title="Open Template Settings"
109
- @click.prevent="openBox(1)">
110
- <span class="icon-settings-component"></span>
111
- </a>
112
- </div>
113
- </template>
114
- </CmdSidebar>
115
- <!-- begin site-header --------------------------------------------------------------------------------------------------------------------------------------------------->
116
- <CmdSiteHeader :sticky="true">
117
- <template v-slot:top-header>
118
- <!-- begin list-of-links --------------------------------------------------------------------------------------------------------------------------------------------------->
119
- <CmdListOfLinks
120
- :links="listOfLinksData"
121
- orientation="horizontal"
122
- align="right"
123
- />
124
- <!-- end list-of-links --------------------------------------------------------------------------------------------------------------------------------------------------->
125
- </template>
126
- <template v-slot:logo>
127
- <!-- begin company-logo --------------------------------------------------------------------------------------------------------------------------------------------------->
128
- <CmdCompanyLogo
129
- :link="companyLogoData.link"
130
- altText="CoManD Logo"
131
- :pathDefaultLogo="companyLogoData.pathDefaultLogo"
132
- :pathDarkmodeLogo="companyLogoData.pathDarkmodeLogo"
133
- />
134
- <!-- end company-logo --------------------------------------------------------------------------------------------------------------------------------------------------->
135
- </template>
136
- </CmdSiteHeader>
137
- <!-- end site-header --------------------------------------------------------------------------------------------------------------------------------------------------->
138
- <main>
139
- <!-- begin address-data ------------------------------------------------------------------------------------------------------------------------------------------------------->
140
- <a id="section-address-data"></a>
141
- <CmdWidthLimitationWrapper>
142
- <h2 class="headline-demopage">Address Data</h2>
143
- <div class="flex-container">
144
- <CmdAddressData
145
- :addressData="addressData"
146
- :linkGoogleMaps="false"
147
- :cmdHeadline="{headlineText: 'With label texts and icons', headlineLevel: 3}"
148
- />
149
- <CmdAddressData
150
- :addressData="addressData"
151
- :linkGoogleMaps="false"
152
- :show-label-texts="false"
153
- :cmdHeadline="{headlineText: 'With label icons only', headlineLevel: 3}"
154
- />
155
- <CmdAddressData
156
- :addressData="addressData"
157
- :linkGoogleMaps="false"
158
- :show-label-icons="false"
159
- :cmdHeadline="{headlineText: 'With label texts', headlineLevel: 3}"
160
- />
161
- <CmdAddressData
162
- :addressData="addressData"
163
- :linkGoogleMaps="false"
164
- :showLabels="false"
165
- :cmdHeadline="{headlineText: 'Without labels', headlineLevel: 3}"
166
- />
167
- <CmdAddressData
168
- :addressData="addressData"
169
- :linkGoogleMaps="true"
170
- :showIconsOnly="true"
171
- :cmdHeadline="{headlineText: 'Linked icons only', headlineLevel: 3}"
172
- />
173
- </div>
174
- </CmdWidthLimitationWrapper>
175
- <!-- end address-data ------------------------------------------------------------------------------------------------------------------------------------------------------->
176
-
177
- <!-- begin advanced form elements --------------------------------------------------------------------------------------------------------------------------------------------------->
178
- <a id="section-advanced-form-elements"></a>
179
- <CmdWidthLimitationWrapper>
180
- <a id="anchor-advanced-form-elements"></a>
181
- <h2 class="headline-demopage">Advanced Form Elements</h2>
182
- <h3>Form elements status:</h3>
183
- <div class="flex-container">
184
- <ul class="list-status">
185
- <li><a href="#" @click.prevent="setStatus('', false)"
186
- :class="{'active' : validationStatus === '' && disabledStatus === false}"
187
- id="status-default">Default</a></li>
188
- <li class="error">
189
- <a href="#" @click.prevent="setStatus('error', false)"
190
- :class="{'active' : validationStatus === 'error'}" id="status-error">Error</a></li>
191
- <li><a href="#" @click.prevent="setStatus('warning', false)"
192
- :class="{'active' : validationStatus === 'warning'}" id="status-warning">Warning</a>
193
- </li>
194
- <li><a href="#" @click.prevent="setStatus('success', false)"
195
- :class="{'active' : validationStatus === 'success'}" id="status-success">Success</a>
196
- </li>
197
- <li><a href="#" @click.prevent="setStatus('info', false)"
198
- :class="{'active' : validationStatus === 'info'}" id="status-info">Info</a></li>
199
- <li><a href="#" @click.prevent="setStatus('', true)"
200
- :class="{'active' : disabledStatus === true}" id="status-disabled">Disabled</a></li>
201
- </ul>
202
- </div>
203
-
204
- <!-- begin cmd-form-filters -->
205
- <CmdFormFilters v-model="fakeSelectFilters" :selectedOptionsName="getOptionName"/>
206
- <!-- end cmd-form-filters -->
207
-
208
- <CmdForm :use-fieldset="false" id="advanced-form-elements" novalidate="novalidate">
209
- <fieldset class="grid-container-create-columns">
210
- <legend>Legend</legend>
211
- <h2>Form Element-Component</h2>
212
- <div class="flex-container">
213
- <CmdFormElement labelText="Input (type text):"
214
- element="input"
215
- type="text"
216
- :status="validationStatus"
217
- :disabled="disabledStatus"
218
- placeholder="Type in text"
219
- tooltipText="This is a tooltip"
220
- v-bind="{useCustomTooltip: false}"
221
- />
222
- <CmdFormElement labelText="Input for selectbox:"
223
- element="select"
224
- required="required"
225
- :status="validationStatus"
226
- :disabled="disabledStatus"
227
- v-model="selectedOption"
228
- :selectOptions="selectOptionsData"
229
- />
230
- <CmdFormElement labelText="Input for datalist:"
231
- element="input"
232
- type="text"
233
- :status="validationStatus"
234
- :disabled="disabledStatus"
235
- placeholder="Type in option"
236
- :datalist="datalist"
237
- tooltipText="This is a tooltip"
238
- />
239
- </div>
240
- <CmdFormElement labelText="Input (type search (without search-button)):"
241
- element="input"
242
- type="search"
243
- :status="validationStatus"
244
- :disabled="disabledStatus"
245
- :showSearchButton="false"
246
- placeholder="Search"
247
- tooltipText="This is a tooltip"
248
- v-bind="{useCustomTooltip: false}"
249
- />
250
- <CmdFormElement labelText="Input (type search (with search-button)):"
251
- element="input"
252
- type="search"
253
- :status="validationStatus"
254
- :disabled="disabledStatus"
255
- placeholder="Search"
256
- tooltipText="This is a tooltip"
257
- v-bind="{useCustomTooltip: false}"
258
- />
259
- <h2>Inputfields in Columns</h2>
260
- <div class="flex-container">
261
- <CmdFormElement element="input"
262
- type="text"
263
- minlength="5"
264
- id="inputfield1"
265
- placeholder="This is placeholder text"
266
- v-model="inputField1"
267
- tooltipText="This is a tooltip!"
268
- :status="validationStatus"
269
- :disabled="disabledStatus">
270
- <template v-slot:labeltext>
271
- <span v-html="'Label with <a href=\'#\'>Link</a> given by slot'"></span>
272
- </template>
273
- </CmdFormElement>
274
- <CmdFormElement element="input"
275
- labelText="Label for inputfield (required, with tooltip):"
276
- type="text"
277
- required="required"
278
- minlength="5"
279
- id="inputfield-required"
280
- placeholder="This is placeholder text"
281
- v-model="inputFieldRequired"
282
- tooltipText="This is a tooltip!"
283
- :status="validationStatus"
284
- :disabled="disabledStatus"
285
- />
286
- <CmdFormElement element="input"
287
- labelText="Label for inputfield (with pattern):"
288
- type="text"
289
- id="inputfield-pattern"
290
- placeholder="This is placeholder text"
291
- pattern="/\d/"
292
- v-model="inputFieldPattern"
293
- tooltipText="This is a tooltip!"
294
- :status="validationStatus"
295
- :disabled="disabledStatus"
296
- />
297
- </div>
298
- <!-- begin inputfield in two columns -->
299
- <div class="flex-container">
300
- <CmdFormElement labelText="Label for inputfield (with icon):"
301
- element="input"
302
- type="text"
303
- id="inputfield-username"
304
- fieldIconClass="icon-user-profile"
305
- placeholder="Type in username"
306
- tooltipText="This is a tooltip!"
307
- maxlength="100"
308
- v-model="inputUsername"
309
- :status="validationStatus"
310
- :disabled="disabledStatus"
311
- />
312
- <CmdFormElement element="input"
313
- labelText="Label for password-field:"
314
- type="password"
315
- minlength="8"
316
- maxlength="255"
317
- id="inputfield-password"
318
- fieldIconClass="icon-security-settings"
319
- placeholder="Type in password"
320
- tooltipText="This is a tooltip!"
321
- :customRequirements="customRequirements"
322
- v-model="inputPassword"
323
- :status="validationStatus"
324
- :disabled="disabledStatus"
325
- />
326
- </div>
327
- <!-- end inputfield in two columns -->
328
-
329
- <CmdFormElement element="input"
330
- labelText="Label (inline) for inputfield (number):"
331
- :displayLabelInline="true"
332
- type="number"
333
- id="inputfield-number"
334
- required="required"
335
- min="0"
336
- max="9"
337
- v-model="inputNumber"
338
- :customRequirements="[customRequirements[2]]"
339
- :status="validationStatus"
340
- :disabled="disabledStatus"
341
- />
342
- <CmdFormElement element="input"
343
- labelText="Label (inline) for inputfield (date):"
344
- :displayLabelInline="true"
345
- type="date"
346
- id="inputfield-date"
347
- v-model="inputDate"
348
- :status="validationStatus"
349
- :disabled="disabledStatus"
350
- />
351
- <CmdFormElement element="input"
352
- labelText="Label (inline) for inputfield (search) without search-button:"
353
- :displayLabelInline="true"
354
- type="search"
355
- id="inputfield-search-without-searchbutton"
356
- placeholder="Keyword(s)"
357
- v-model="inputSearch"
358
- :showSearchButton="false"
359
- :status="validationStatus"
360
- :disabled="disabledStatus"
361
- />
362
- <CmdFormElement element="input"
363
- labelText="Label (inline) for inputfield (search):"
364
- :displayLabelInline="true"
365
- type="search"
366
- id="inputfield-search-with-searchbutton"
367
- placeholder="Keyword(s)"
368
- v-model="inputSearch"
369
- :status="validationStatus"
370
- :disabled="disabledStatus"
371
- />
372
- <CmdFormElement element="textarea"
373
- labelText="Label for textarea:"
374
- id="textarea"
375
- minlength="1"
376
- maxlength="100"
377
- placeholder="Type in your message"
378
- v-model="textarea"
379
- :status="validationStatus"
380
- :disabled="disabledStatus"
381
- />
382
- <hr/>
383
- <h2>Fake Selects</h2>
384
- <div class="flex-container">
385
- <!-- type === default: normal selectbox (with optional icons) -->
386
- <CmdFakeSelect labelText="Default selectbox:"
387
- :status="validationStatus"
388
- :disabled="disabledStatus"
389
- :selectData="fakeSelectOptionsData"
390
- v-model="fakeSelectDefault"
391
- :required="true"
392
- defaultOptionName="Select an option:"
393
- title="Title for FakeSelect"
394
- />
395
- <CmdFakeSelect labelText="Default selectbox with icons:"
396
- :status="validationStatus"
397
- :disabled="disabledStatus"
398
- :selectData="fakeSelectOptionsWithIconsData"
399
- v-model="fakeSelectDefaultWithIcons"
400
- defaultOptionName="Select an option:"
401
- />
402
- <!-- type === checkboxOptions: selectbox with checkboxes for each option -->
403
- <CmdFakeSelect labelText="Selectbox with checkboxes:"
404
- :status="validationStatus"
405
- :disabled="disabledStatus"
406
- :selectData="fakeSelectOptionsData"
407
- v-model="fakeSelectCheckbox"
408
- defaultOptionName="Options:"
409
- :required="true"
410
- id="selectbox-with-checkboxes"
411
- type="checkboxOptions"
412
- :useCustomTooltip="true"
413
- />
414
- <CmdFakeSelect labelText="Selectbox with filters:"
415
- :status="validationStatus"
416
- :disabled="disabledStatus"
417
- :selectData="fakeSelectFilterOptionsData"
418
- v-model="fakeSelectFilters"
419
- defaultOptionName="Filters:"
420
- id="selectbox-with-filters"
421
- type="checkboxOptions"
422
- :useCustomTooltip="true"
423
- />
424
- <CmdFakeSelect labelText="Selectbox with slot-content:"
425
- :status="validationStatus"
426
- :disabled="disabledStatus"
427
- type="content"
428
- defaultOptionName="HTML-Content:">
429
- <ul class="custom-fake-select-content">
430
- <li>
431
- <div>
432
- <h3>Headline</h3>
433
- <p>Some content inside a paragraph</p>
434
- </div>
435
- <img
436
- src="media/images/thumbnail-scroller/thumbnail/logo-cmd-blue-landscape.jpg"
437
- alt="image"/>
438
- </li>
439
- </ul>
440
- </CmdFakeSelect>
441
- <CmdFakeSelect labelText="Selectbox with country flags:"
442
- :status="validationStatus"
443
- :disabled="disabledStatus"
444
- :selectData="fakeSelectCountriesData"
445
- v-model="selectedCountry"
446
- defaultOptionName="Select country:"
447
- type="country"
448
- />
449
- <CmdFakeSelect labelText="Selectbox with colors:"
450
- :status="validationStatus"
451
- :disabled="disabledStatus"
452
- :selectData="fakeSelectColorsData"
453
- v-model="selectedColor"
454
- required="required"
455
- type="color"
456
- />
457
- </div>
458
-
459
- <hr/>
460
-
461
- <!-- begin progress bar -->
462
- <h2>Progress Bar [native]</h2>
463
- <CmdProgressBar
464
- labelText="Progress Bar (with optional output):"
465
- id="progress-bar2"
466
- max="100"
467
- />
468
- <!-- end progress bar -->
469
-
470
- <!-- begin slider -->
471
- <h2>Slider [native]</h2>
472
- <div class="label" :class="validationStatus">
473
- <span class="label-text">Single-Slider (with in- and output):</span>
474
- <span class="flex-container no-flex">
475
- <label for="range-value">
476
- <span class="label-text">
477
- <span>Range Value</span>
478
- </span>
479
- <input
480
- type="number"
481
- :class="validationStatus"
482
- v-model="rangeValue"
483
- :disabled="disabledStatus"
484
- min="0"
485
- max="100"
486
- id="range-value"
487
- />
488
- </label>
489
- <label for="range-slider">
490
- <span class="label-text hidden">
491
- <span>Range Value</span>
492
- </span>
493
- <input
494
- type="range"
495
- class="range-slider"
496
- id="range-slider"
497
- v-model="rangeValue"
498
- :disabled="disabledStatus"
499
- min="0"
500
- max="100"
501
- />
502
- </label>
503
- </span>
504
- </div>
505
- <!-- end slider -->
506
-
507
- <hr/>
508
-
509
- <!-- begin toggle-switch-radio with switch-label (colored) -->
510
- <h2>Toggle-Switches</h2>
511
- <h3>Switches without switch-labels</h3>
512
- <CmdFormElement
513
- element="input"
514
- type="checkbox"
515
- id="toggle-switch-checkbox"
516
- v-model="switchButtonCheckboxToggleSwitch"
517
- labelText="Labeltext for Toggle-Switch without Switch-Label"
518
- :toggleSwitch="true"
519
- :status="validationStatus"
520
- :disabled="disabledStatus"
521
- />
522
- <CmdFormElement
523
- element="input"
524
- type="checkbox"
525
- id="toggle-switch-checkbox-colored"
526
- v-model="switchButtonCheckboxToggleSwitchColored"
527
- labelText="Labeltext for colored Toggle-Switch without Switch-Label"
528
- :toggleSwitch="true"
529
- :colored="true"
530
- :status="validationStatus"
531
- :disabled="disabledStatus"
532
- />
533
- <h3>Switches with switch-labels</h3>
534
- <CmdFormElement element="input"
535
- type="checkbox"
536
- id="toggle-switch-checkbox-switch-label"
537
- v-model="switchButtonCheckbox"
538
- labelText="Labeltext for Toggle-Switch with Switch-Label"
539
- inputValue="checkbox1"
540
- onLabel="Label on"
541
- offLabel="Label off"
542
- :toggleSwitch="true"
543
- :status="validationStatus"
544
- :disabled="disabledStatus"
545
- />
546
- <CmdFormElement element="input"
547
- type="checkbox"
548
- id="toggle-switch-checkbox-switch-label-colored"
549
- v-model="switchButtonCheckbox"
550
- inputValue="checkbox2"
551
- labelText="Labeltext for Toggle-Switch (Checkbox, colored)"
552
- onLabel="Label on"
553
- offLabel="Label off"
554
- :colored="true"
555
- :toggleSwitch="true"
556
- :status="validationStatus"
557
- :disabled="disabledStatus"
558
- />
559
- <CmdFormElement element="input"
560
- type="radio"
561
- name="radiogroup"
562
- id="toggle-switch-radio1"
563
- v-model="switchButtonRadio"
564
- onLabel="Label on"
565
- offLabel="Label off"
566
- :colored="true"
567
- :toggleSwitch="true"
568
- :status="validationStatus"
569
- :disabled="disabledStatus"
570
- inputValue="radio1"
571
- labelText="Labeltext for Toggle-Switch (Radio, colored) #1"
572
- />
573
- <CmdFormElement element="input"
574
- type="radio"
575
- name="radiogroup"
576
- id="toggle-switch-radio2"
577
- v-model="switchButtonRadio"
578
- onLabel="Label on"
579
- offLabel="Label off"
580
- :colored="true"
581
- :toggleSwitch="true"
582
- :status="validationStatus"
583
- :disabled="disabledStatus"
584
- inputValue="radio2"
585
- labelText="Labeltext for Toggle-Switch (Radio, colored) #2"
586
- />
587
- <!-- end toggle-switch-radio with switch-label (colored) -->
588
-
589
- <!-- begin checkboxes and radiobuttons -->
590
- <CmdFormElement element="input"
591
- labelText="Label for (required) checkbox with boolean"
592
- type="checkbox"
593
- required="required"
594
- id="checkbox-required-with-boolean"
595
- v-model="checkboxRequiredValue"
596
- :status="validationStatus"
597
- :disabled="disabledStatus"
598
- />
599
- <p>
600
- checkbox (required) with boolean: {{ checkboxRequiredValue }}<br/>
601
- checkbox with boolean: {{ checkboxValue }}<br/>
602
- checkboxes with values: {{ checkboxValues }}
603
- </p>
604
-
605
- <h3>Toggle Dark-Mode</h3>
606
- <a id="section-toggle-darkmode"></a>
607
- <h4>Toggle Dark-Mode (with label, not styled)</h4>
608
- <CmdToggleDarkMode :showLabel="true"/>
609
- <h4>Toggle Dark-Mode (without label, styled)</h4>
610
- <CmdToggleDarkMode :showLabel="false" :use-styled-layout="true"/>
611
- <h4>Toggle Dark-Mode (styled as button)</h4>
612
- <CmdToggleDarkMode :styledAsButton="true"/>
613
-
614
- <h2>Checkboxes and Radiobuttons</h2>
615
- <h3>Checkboxes [native]</h3>
616
- <div class="label inline">
617
- <span class="label-text">Label for native checkboxes:</span>
618
- <div class="flex-container no-flex">
619
- <CmdFormElement element="input"
620
- labelText="Label for checkbox with boolean"
621
- type="checkbox"
622
- id="checkbox-with-boolean"
623
- v-model="checkboxValue"
624
- :status="validationStatus"
625
- :disabled="disabledStatus"
626
- />
627
- <CmdFormElement element="input"
628
- labelText="Label for checkbox with value"
629
- v-model="checkboxValues"
630
- inputValue="checkboxValue1"
631
- type="checkbox"
632
- id="checkbox-with-value-1"
633
- :status="validationStatus"
634
- :disabled="disabledStatus"
635
- />
636
- <CmdFormElement element="input"
637
- labelText="Label for checkbox with value"
638
- v-model="checkboxValues"
639
- inputValue="checkboxValue2"
640
- type="checkbox"
641
- id="checkbox-with-value-2"
642
- :status="validationStatus"
643
- :disabled="disabledStatus"
644
- />
645
- <CmdFormElement element="input"
646
- v-model="checkboxValues"
647
- inputValue="checkboxValue3"
648
- type="checkbox"
649
- id="checkbox-with-value-3"
650
- :status="validationStatus"
651
- :disabled="disabledStatus">
652
- <template v-slot:labeltext>
653
- Labeltext with <a href="#">link</a> given by slot
654
- </template>
655
- </CmdFormElement>
656
- </div>
657
- </div>
658
- <h3>Checkboxes (replaced)</h3>
659
- <div class="label inline">
660
- <span class="label-text">Label for Replaced Input-Type-Checkbox:</span>
661
- <div class="flex-container no-flex">
662
- <CmdFormElement element="input"
663
- labelText="Label for replaced checkbox"
664
- type="checkbox"
665
- :replaceInputType="true"
666
- id="inputfield9"
667
- v-model="replacedCheckboxValue"
668
- inputValue="checkboxValue1"
669
- :status="validationStatus"
670
- :disabled="disabledStatus"
671
- />
672
- <CmdFormElement element="input"
673
- labelText="Label for replaced checkbox"
674
- v-model="replacedCheckboxValue"
675
- inputValue="checkboxValue2"
676
- type="checkbox"
677
- :replaceInputType="true"
678
- id="inputfield10"
679
- :status="validationStatus"
680
- :disabled="disabledStatus"
681
- />
682
- </div>
683
- </div>
684
- <h3>Radiobuttons [native]</h3>
685
- <div class="label inline">
686
- <span class="label-text">Label for native radiobuttons:</span>
687
- <div class="flex-container no-flex">
688
- <CmdFormElement element="input"
689
- labelText="Label for native radiobutton"
690
- type="radio"
691
- id="inputfield11"
692
- name="radiogroup"
693
- inputValue="radiobuttonValue1"
694
- v-model="radiobuttonValue"
695
- :status="validationStatus"
696
- :disabled="disabledStatus"
697
- />
698
- <CmdFormElement element="input"
699
- labelText="Label for native radiobutton"
700
- type="radio"
701
- id="inputfield12"
702
- name="radiogroup"
703
- inputValue="radiobuttonValue2"
704
- v-model="radiobuttonValue"
705
- :status="validationStatus"
706
- :disabled="disabledStatus"
707
- />
708
- </div>
709
- </div>
710
- <p>
711
- Radiobuttons with values: {{ radiobuttonValue }}
712
- </p>
713
- <h3>Radiobuttons (replaced)</h3>
714
- <div class="label inline">
715
- <span class="label-text">Label for Replaced Input-Type-Radio:</span>
716
- <div class="flex-container no-flex">
717
- <CmdFormElement element="input"
718
- labelText="Label for replaced radiobutton"
719
- type="radio"
720
- :replaceInputType="true"
721
- id="inputfield13"
722
- name="replaced-radiogroup"
723
- inputValue="radiobuttonValue1"
724
- v-model="replacedRadiobuttonValue"
725
- :status="validationStatus"
726
- :disabled="disabledStatus"
727
- />
728
- <CmdFormElement element="input"
729
- labelText="Label for replaced radiobutton"
730
- type="radio"
731
- :replaceInputType="true"
732
- id="inputfield14"
733
- name="replaced-radiogroup"
734
- inputValue="radiobuttonValue2"
735
- v-model="replacedRadiobuttonValue"
736
- :status="validationStatus"
737
- :disabled="disabledStatus"
738
- />
739
- </div>
740
- </div>
741
- <!-- end checkboxes and radiobuttons -->
742
-
743
- <!-- begin input-groups -->
744
- <h2>Input-Groups</h2>
745
- <h3>Input Group with Radiobuttons [native]</h3>
746
- <CmdInputGroup
747
- labelText="Group label for radio-group given by slot:"
748
- :useSlot="true"
749
- :status="validationStatus"
750
- :disabled="disabledStatus"
751
- >
752
- <CmdFormElement element="input"
753
- labelText="Label for radiobutton"
754
- type="radio"
755
- id="input-group-radiobutton"
756
- name="radiogroup2"
757
- inputValue="radiobuttonValue1"
758
- v-model="inputGroupRadio"
759
- :status="validationStatus"
760
- :disabled="disabledStatus"
761
- />
762
- <CmdFormElement element="input"
763
- labelText="Label for radiobutton"
764
- type="radio"
765
- id="input-group-radiobutton"
766
- name="radiogroup2"
767
- inputValue="radiobuttonValue2"
768
- v-model="inputGroupRadio"
769
- :status="validationStatus"
770
- :disabled="disabledStatus"
771
- />
772
- </CmdInputGroup>
773
- <dl>
774
- <dt>Selected value(s):</dt>
775
- <dd>
776
- <output>{{ inputGroupRadio }}</output>
777
- </dd>
778
- </dl>
779
- <CmdInputGroup
780
- labelText="Grouplabel for radio-group given by property:"
781
- :required="true"
782
- :inputElements="idForReplacedInputsInInputGroup('radio-group')"
783
- inputTypes="radio"
784
- v-model="inputGroupCheckbox"
785
- :status="validationStatus"
786
- :disabled="disabledStatus"
787
- />
788
- <dl>
789
- <dt>Selected value:</dt>
790
- <dd>
791
- <output>{{ inputGroupCheckbox }}</output>
792
- </dd>
793
- </dl>
794
- <h3>Input Group with Checkboxes/Radiobuttons (replaced)</h3>
795
- <CmdInputGroup
796
- labelText="Grouplabel for radio-group styled as replaced-input-type:"
797
- :inputElements="idForReplacedInputsInInputGroup('replaced-radio-group')"
798
- inputTypes="radio"
799
- v-model="inputGroupValueReplaceInputTypeRadio"
800
- :replaceInputType="true"
801
- :status="validationStatus"
802
- :disabled="disabledStatus"
803
- />
804
- <dl>
805
- <dt>Selected value:</dt>
806
- <dd>
807
- <output>{{ inputGroupValueReplaceInputTypeRadio }}</output>
808
- </dd>
809
- </dl>
810
- <CmdInputGroup
811
- labelText="Grouplabel for checkbox-group styled as replaced-input-type:"
812
- :inputElements="idForReplacedInputsInInputGroup('checkbox-group')"
813
- inputTypes="checkbox"
814
- v-model="inputGroupValueReplaceInputTypeCheckbox"
815
- :replaceInputType="true"
816
- :required="true"
817
- :status="validationStatus"
818
- :disabled="disabledStatus"
819
- />
820
- <dl>
821
- <dt>Selected value(s):</dt>
822
- <dd>
823
- <output>{{ inputGroupValueReplaceInputTypeCheckbox }}</output>
824
- </dd>
825
- </dl>
826
- <h3>Input Groups with Checkboxes/
827
- Radiobuttons (toggle-switches)</h3>
828
- <CmdInputGroup
829
- labelText="Grouplabel for checkbox-group styled as toggle-switches:"
830
- :inputElements="idForReplacedInputsInInputGroup('checkbox-group-toggle-switch')"
831
- inputTypes="checkbox"
832
- v-model="inputGroupValueToggleSwitchCheckbox"
833
- :toggleSwitch="true"
834
- required="required"
835
- :status="validationStatus"
836
- :disabled="disabledStatus"
837
- />
838
- <dl>
839
- <dt>Selected value(s):</dt>
840
- <dd>
841
- <output>{{ inputGroupValueToggleSwitchCheckbox }}</output>
842
- </dd>
843
- </dl>
844
- <CmdInputGroup
845
- labelText="Grouplabel for radio-group styled as toggle-switches:"
846
- :inputElements="idForReplacedInputsInInputGroup('radio-group-toggle-switch')"
847
- inputTypes="radio"
848
- v-model="inputGroupValueToggleSwitchRadio"
849
- :toggleSwitch="true"
850
- required="required"
851
- :status="validationStatus"
852
- :disabled="disabledStatus"
853
- />
854
- <dl>
855
- <dt>Selected value(s):</dt>
856
- <dd>
857
- <output>{{ inputGroupValueToggleSwitchRadio }}</output>
858
- </dd>
859
- </dl>
860
- <CmdInputGroup
861
- labelText="Grouplabel for radio-group given by property styled as multiple-switch:"
862
- :inputElements="idForReplacedInputsInInputGroup('radio-group-multiple-switch')"
863
- inputTypes="radio"
864
- :multipleSwitch="true"
865
- v-model="inputGroupValue3"
866
- :status="validationStatus"
867
- :disabled="disabledStatus"
868
- />
869
- <dl>
870
- <dt>Selected value(s):</dt>
871
- <dd>
872
- <output>{{ inputGroupValue3 }}</output>
873
- </dd>
874
- </dl>
875
- <CmdInputGroup
876
- labelText="Grouplabel for checkbox-group styled as multiple-switch (stretched horizontally):"
877
- :inputElements="inputGroupCheckboxes"
878
- inputTypes="checkbox"
879
- :multipleSwitch="true"
880
- :required="true"
881
- v-model="inputGroupValue4"
882
- :stretchHorizontally="true"
883
- :status="validationStatus"
884
- :disabled="disabledStatus"
885
- />
886
- <dl>
887
- <dt>Selected value(s):</dt>
888
- <dd>
889
- <output>{{ inputGroupValue4 }}</output>
890
- </dd>
891
- </dl>
892
- </fieldset>
893
- <!-- end fieldset -->
894
- <div class="button-wrapper">
895
- <small><sup>*</sup>values will not be submitted with the form!</small>
896
- <CmdFormElement element="button"
897
- :nativeButton="{text: 'Submit-button from component'}"
898
- type="submit"
899
- id="submitbutton"
900
- name="submitbutton"
901
- :disabled="disabledStatus"
902
- />
903
- <button type="submit" :disabled="disabledStatus">
904
- <span class="icon-check"></span>
905
- <span>Native submit-button</span>
906
- </button>
907
- </div>
908
- </CmdForm>
909
- </CmdWidthLimitationWrapper>
910
- <!-- end advanced form elements ----------------------------------------------------------------------------------------------------------------------------------------------------->
911
-
912
- <!-- begin back to top button ----------------------------------------------------------------------------------------------------------------------------------------------------->
913
- <CmdBackToTopButton href="#anchor-back-to-top" scroll-container="#page-wrapper"/>
914
- <!-- end back to top button ----------------------------------------------------------------------------------------------------------------------------------------------------->
915
-
916
- <!-- begin bank account data ----------------------------------------------------------------------------------------------------------------------------------------------------->
917
- <a id="section-bank-account-data"></a>
918
- <CmdWidthLimitationWrapper>
919
- <h2 class="headline-demopage">Bank Account Data</h2>
920
- <CmdBankAccountData :account-data="bankAccountData"
921
- :cmd-headline="{ headlineText: 'Bank Account', headlineLevel: 3}"
922
- :allow-copy-by-click="true"/>
923
- </CmdWidthLimitationWrapper>
924
- <!-- end bank account data ------------------------------------------------------------------------------------------------------------------------------------------------------->
925
-
926
- <!-- begin boxes ------------------------------------------------------------------------------------------------------------------------------------------------------->
927
- <a id="section-boxes"></a>
928
- <CmdWidthLimitationWrapper>
929
- <h2 class="headline-demopage">Boxes</h2>
930
- <CmdBoxWrapper :useFlexbox="true"
931
- :cmdHeadline="{headlineText: 'Boxes in BoxWrapper with flexbox', headlineLevel: 3}"
932
- :use-gap="true">
933
- <CmdBox v-for="index in 14"
934
- :key="index"
935
- textBody="Content"
936
- :cmd-headline="{headlineText: 'Headline ' + index, headlineLevel: 4}"/>
937
- </CmdBoxWrapper>
938
- <CmdBoxWrapper :useFlexbox="true"
939
- :use-gap="true"
940
- :cmdHeadline="{headlineText: 'Different examples of content-boxes (in BoxWrapper)', headlineLevel: 3}">
941
- <CmdBox
942
- :stretch-vertically="false"
943
- :cmdHeadline="{headlineText: 'Box with cutoff text', headlineLevel: 4}"
944
- :useSlots="['body']"
945
- :cutoff-text-lines="4"
946
- >
947
- <template v-slot:body>
948
- This is a long text that is cutoff after a specific number of lines that can be defined
949
- by
950
- the property 'cutoffTextLines' and be toggled by a link below.
951
- </template>
952
- </CmdBox>
953
- <CmdBox :useSlots="['header', 'body', 'footer']">
954
- <template v-slot:header>
955
- <h4>
956
- Texts given by slots
957
- </h4>
958
- </template>
959
- <template v-slot:body>
960
- <p>
961
- This content with paragraphs inside is placed inside the box-body.
962
- </p>
963
- <p>
964
- <strong>Header, Content/Body and Footer of this box are given by slots.</strong>
965
- </p>
966
- </template>
967
- <template v-slot:footer>
968
- <p>
969
- Footer content
970
- </p>
971
- </template>
972
- </CmdBox>
973
- <CmdBox :useSlots="['header', 'body']" :use-default-padding="false">
974
- <template v-slot:header>
975
- <h4>
976
- Box with links
977
- </h4>
978
- </template>
979
- <template v-slot:body>
980
- <ul class="navigation">
981
- <li><a href="#" @click.prevent="">Link name 1</a></li>
982
- <li><a href="#" @click.prevent="">Link name 2</a></li>
983
- <li><a href="#" @click.prevent="">Link name 3</a></li>
984
- <li><a href="#" @click.prevent="">Link name 4</a></li>
985
- </ul>
986
- </template>
987
- <!-- will not be displayed, because useSlots-property does not contain 'footer' in array -->
988
- <template v-slot:footer>
989
- <p>
990
- footer content
991
- </p>
992
- </template>
993
- </CmdBox>
994
- <CmdBox
995
- :use-default-padding="false"
996
- :cmdHeadline="{headlineText: 'Collapsible box', headlineLevel: 4}"
997
- :image="{src: 'media/images/content-images/landscape-medium.jpg', altText: 'ALternative text'}"
998
- textBody="This is some text given by property."
999
- :collapsible="true"
1000
- />
1001
- <CmdBox
1002
- :useSlots="['header', 'body']"
1003
- :use-default-padding="false"
1004
- :cmdHeadline="{headlineText: 'Collapsible box', headlineLevel: 4}"
1005
- :collapsible="true">
1006
- <template v-slot:header>
1007
- <h4>
1008
- Collapsible box with image
1009
- </h4>
1010
- </template>
1011
- <template v-slot:body>
1012
- <img src="media/images/content-images/landscape-medium.jpg" alt="Alternative text"/>
1013
- </template>
1014
- </CmdBox>
1015
- <CmdBox :useSlots="['header', 'body', 'footer']" :use-default-padding="false">
1016
- <template v-slot:header>
1017
- <h4>
1018
- Box with image and content
1019
- </h4>
1020
- </template>
1021
- <template v-slot:body>
1022
- <img src="media/images/content-images/landscape-medium.jpg" alt="Alternative text"/>
1023
- <div class="default-padding">
1024
- <h4>Headline</h4>
1025
- <p>This is some text information i.e a short-text for a news teaser.</p>
1026
- </div>
1027
- </template>
1028
- <template v-slot:footer>
1029
- <p>
1030
- <a href="#">Read more&hellip;</a>
1031
- </p>
1032
- </template>
1033
- </CmdBox>
1034
- </CmdBoxWrapper>
1035
- <h3>Product boxes</h3>
1036
- <div class="grid-container-create-columns">
1037
- <div class="grid-small-item" v-for="(product, index) in boxProductData" :key="index">
1038
- <CmdBox boxType="product" :product="product" :cmdHeadline="{headlineLevel: 4}"/>
1039
- </div>
1040
- </div>
1041
- <h3>User boxes</h3>
1042
- <CmdBoxWrapper :boxesPerRow="[5, 2, 1]" :useRowViewAsDefault="true" :useGap="true">
1043
- <template v-slot="slotProps">
1044
- <CmdBox
1045
- v-for="index in boxUserData.length"
1046
- :key="index" boxType="user"
1047
- :user="boxUserData[index - 1]"
1048
- :cmdHeadline="{headlineLevel: 5}"
1049
- :rowView="slotProps.rowView"
1050
- />
1051
- </template>
1052
- </CmdBoxWrapper>
1053
- <h3>Product boxes (collapsible)</h3>
1054
- <CmdBoxWrapper :boxesPerRow="[5, 2, 1]"
1055
- :useRowViewAsDefault="true"
1056
- :allowMultipleExpandedBoxes="false"
1057
- :useGap="true">
1058
- <template v-slot="slotProps">
1059
- <CmdBox
1060
- v-for="index in boxProductData.length"
1061
- :key="index"
1062
- boxType="content"
1063
- :collapsible="true"
1064
- :useSlots="['body']"
1065
- :cmdHeadline="{headlineText: 'Box ' + index, headlineLevel: 5}"
1066
- :rowView="slotProps.rowView"
1067
- :openCollapsedBox="slotProps.boxIsOpen(index - 1)"
1068
- @toggleCollapse="slotProps.boxToggled(index - 1, $event)"
1069
- >
1070
- <template #body>{{slotProps.currentOpenBox}}<br />Content {{ index }}</template>
1071
- </CmdBox>
1072
- </template>
1073
- </CmdBoxWrapper>
1074
- </CmdWidthLimitationWrapper>
1075
- <!-- end boxes ------------------------------------------------------------------------------------------------------------------------------------------------------->
1076
-
1077
- <!-- begin breadcrumbs ------------------------------------------------------------------------------------------------------------------------------------------------------->
1078
- <a id="section-breadcrumbs"></a>
1079
- <CmdWidthLimitationWrapper inner-component="div">
1080
- <h2 class="headline-demopage">Breadcrumbs</h2>
1081
- <CmdBreadcrumbs :breadcrumbLinks="breadcrumbData" breadcrumbLabel="You are here:"/>
1082
- </CmdWidthLimitationWrapper>
1083
- <!-- end breadcrumbs ------------------------------------------------------------------------------------------------------------------------------------------------------->
1084
-
1085
- <!-- begin cookie-disclaimer ------------------------------------------------------------------------------------------------------------------------------------------------------->
1086
- <a id="section-cookie-disclaimer"></a>
1087
- <CmdWidthLimitationWrapper>
1088
- <h2 class="headline-demopage">Cookie Disclaimer</h2>
1089
- <a class="button" href="#" @click.prevent="fancyBoxCookieDisclaimer = true">
1090
- <span>Open Cookie Disclaimer</span>
1091
- </a>
1092
- </CmdWidthLimitationWrapper>
1093
- <!-- end cookie-disclaimer ------------------------------------------------------------------------------------------------------------------------------------------------------->
1094
-
1095
- <!-- begin headline ------------------------------------------------------------------------------------------------------------------------------------------------------->
1096
- <a id="section-headlines"></a>
1097
- <CmdWidthLimitationWrapper>
1098
- <h2 class="headline-demopage">Headlines</h2>
1099
- <CmdHeadline :headlineIcon="{iconClass: 'icon-home'}" pre-headline-text="Pre-headline"
1100
- headlineText="Headline level 1" :headlineLevel="1"/>
1101
- <CmdHeadline pre-headline-text="Pre-headline" :headlineIcon="{iconClass: 'icon-home'}" headlineText="Headline level 2" :headlineLevel="2" />
1102
- <CmdHeadline pre-headline-text="Pre-headline" :headlineIcon="{iconClass: 'icon-home'}" headlineText="Headline level 3" :headlineLevel="3"/>
1103
- <CmdHeadline pre-headline-text="Pre-headline" :headlineIcon="{iconClass: 'icon-home'}" headlineText="Headline level 4" :headlineLevel="4"/>
1104
- <CmdHeadline pre-headline-text="Pre-headline" :headlineIcon="{iconClass: 'icon-home'}" headlineText="Headline level 5" :headlineLevel="5"/>
1105
- <CmdHeadline pre-headline-text="Pre-headline" :headlineIcon="{iconClass: 'icon-home'}" headlineText="Headline level 6" :headlineLevel="6"/>
1106
- <CmdHeadline pre-headline-text="Pre-headline" headlineText="Headline level 1 (center)"
1107
- text-align="center" :headlineLevel="1"/>
1108
- <CmdHeadline pre-headline-text="Pre-headline" headlineText="Headline level 1 (right)"
1109
- text-align="right"
1110
- :headlineLevel="1"/>
1111
- </CmdWidthLimitationWrapper>
1112
- <!-- end headline ------------------------------------------------------------------------------------------------------------------------------------------------------->
1113
-
1114
- <!-- begin forms ------------------------------------------------------------------------------------------------------------------------------------------------------->
1115
- <a id="section-forms"></a>
1116
- <CmdWidthLimitationWrapper>
1117
- <h2 class="headline-demopage">Forms</h2>
1118
- <h3>Form elements given by data</h3>
1119
- <CmdForm
1120
- :useFieldset="true"
1121
- :useSlot="false"
1122
- textLegend="Legend"
1123
- id="form-component"
1124
- novalidate="novalidate"
1125
- :formElements="formElementsData"
1126
- @submit="doConsoleLog"
1127
- />
1128
- <h3>Form elements given by slot</h3>
1129
- <CmdForm
1130
- :use-fieldset="true"
1131
- textLegend="Legend"
1132
- id="form-component"
1133
- novalidate="novalidate"
1134
- @submit="doConsoleLog"
1135
- >
1136
- <CmdFormElement
1137
- element="input"
1138
- text="text"
1139
- name="input-text"
1140
- labelText="Text input"
1141
- placeholder="Text input"
1142
- />
1143
- <CmdFormElement
1144
- element="input"
1145
- text="number"
1146
- labelText="Number input"
1147
- name="input-number"
1148
- modelValue="1"
1149
- />
1150
- <CmdFormElement
1151
- element="input"
1152
- text="password"
1153
- labelText="Password input"
1154
- name="password-number"
1155
- placeholder="Password input"
1156
- />
1157
- </CmdForm>
1158
- </CmdWidthLimitationWrapper>
1159
- <!-- end forms ------------------------------------------------------------------------------------------------------------------------------------------------------->
1160
-
1161
- <!-- begin fancybox ------------------------------------------------------------------------------------------------------------------------------------------------------->
1162
- <a id="section-fancybox"></a>
1163
- <CmdWidthLimitationWrapper>
1164
- <h2 class="headline-demopage">Fancybox</h2>
1165
- <h3>FancyBox with text</h3>
1166
- <a href="#" @click.prevent="showFancyBox('text','Some text', 'FancyBox with text')">Open FancyBox
1167
- with
1168
- text</a>
1169
- <h3>FancyBox with large image given by url</h3>
1170
- <a href="#"
1171
- @click.prevent="showFancyBox('url', 'media/images/demo-images/large/landscape-01.jpg', 'FancyBox with large image given by url')"
1172
- title="Open FancyBox with large image given by url"
1173
- style="display: inline-flex;"
1174
- >
1175
- <img src="media/images/demo-images/small/landscape-01.jpg" alt="Alternative text"/>
1176
- </a>
1177
- <h3>FancyBox with large image given by property</h3>
1178
- <a href="#"
1179
- @click.prevent="showFancyBox('image', {large:'media/images/demo-images/large/landscape-02.jpg'}, 'FancyBox with large image given by property')"
1180
- title="Open FancyBox with large image given by property"
1181
- style="display: inline-flex;"
1182
- >
1183
- <img src="media/images/demo-images/small/landscape-02.jpg" alt="Alternative text"/>
1184
- </a>
1185
- <h3>FancyBox with image as object give by property</h3>
1186
- <a href="#"
1187
- @click.prevent="showFancyBox('image', {
1188
- small: 'media/images/demo-images/medium/landscape-03.jpg',
1189
- medium: 'media/images/demo-images/medium/landscape-03.jpg',
1190
- large: 'media/images/demo-images/large/landscape-03.jpg'
1191
- }, 'FancyBox with large image given by property')"
1192
- title="Open FancyBox with large image given by property"
1193
- style="display: inline-flex;"
1194
- >
1195
- <img src="media/images/demo-images/small/landscape-03.jpg" alt="Alternative text"/>
1196
- </a>
1197
-
1198
- </CmdWidthLimitationWrapper>
1199
- <!-- end fancybox ------------------------------------------------------------------------------------------------------------------------------------------------------->
1200
-
1201
- <!-- begin google-maps ------------------------------------------------------------------------------------------------------------------------------------------------------->
1202
- <a id="section-google-maps"></a>
1203
- <CmdWidthLimitationWrapper>
1204
- <h2 class="headline-demopage">Google Maps&trade;</h2>
1205
- <CmdGoogleMaps :address="addressData"/>
1206
- </CmdWidthLimitationWrapper>
1207
- <!-- end google-maps ------------------------------------------------------------------------------------------------------------------------------------------------------->
1208
-
1209
- <!-- begin icons ------------------------------------------------------------------------------------------------------------------------------------------------------->
1210
- <a id="section-icons"></a>
1211
- <CmdWidthLimitationWrapper>
1212
- <h2 class="headline-demopage">Icons</h2>
1213
- <ul>
1214
- <li><span>Icon from local iconfont</span>
1215
- <CmdIcon iconClass="icon-home"/>
1216
- </li>
1217
- <li><span>Icon from iconify-api (icomoon-font)</span>
1218
- <CmdIcon iconClass="icomoon-free:home"/>
1219
- </li>
1220
- <li><span>Icon from iconify-api (bootstrap-font)</span>
1221
- <CmdIcon iconClass="bi:house-fill"/>
1222
- </li>
1223
- <li><span>Icon from iconify-api (material-design-font)</span>
1224
- <CmdIcon iconClass="mdi:home"/>
1225
- </li>
1226
- <li><span>Icon from iconify-api (font-awesome-solid-font)</span>
1227
- <CmdIcon iconClass="fa6-solid:house-chimney"/>
1228
- </li>
1229
- </ul>
1230
- </CmdWidthLimitationWrapper>
1231
- <!-- end icons ------------------------------------------------------------------------------------------------------------------------------------------------------->
1232
-
1233
- <!-- begin images ------------------------------------------------------------------------------------------------------------------------------------------------------->
1234
- <a id="section-image"></a>
1235
- <CmdWidthLimitationWrapper>
1236
- <h2 class="headline-demopage">Image</h2>
1237
- <div class="flex-container">
1238
- <CmdImage :image="imageData[0].image" :figcaption="imageData[0].figcaption"/>
1239
- <CmdImage :image="imageData[1].image" :figcaption="imageData[1].figcaption"/>
1240
- </div>
1241
- </CmdWidthLimitationWrapper>
1242
- <!-- end images ------------------------------------------------------------------------------------------------------------------------------------------------------->
1243
-
1244
- <!-- begin image-gallery------------------------------------------------------------------------------------------------------------------------------------------------------->
1245
- <a id="section-image-gallery"></a>
1246
- <CmdWidthLimitationWrapper>
1247
- <h2 class="headline-demopage">Image-Gallery</h2>
1248
- <CmdImageGallery :images="imageGalleryData"/>
1249
- </CmdWidthLimitationWrapper>
1250
- <!-- end image-gallery ------------------------------------------------------------------------------------------------------------------------------------------------------->
1251
-
1252
- <!-- begin image-zoom ------------------------------------------------------------------------------------------------------------------------------------------------------->
1253
- <a id="section-image-zoom"></a>
1254
- <CmdWidthLimitationWrapper>
1255
- <h2 class="headline-demopage">Image-Zoom</h2>
1256
- <CmdImageZoom
1257
- :imageSmall="imageData[2].image"
1258
- :imageLarge="imageData[3].image"
1259
- />
1260
- </CmdWidthLimitationWrapper>
1261
- <!-- end image-zoom ------------------------------------------------------------------------------------------------------------------------------------------------------->
1262
-
1263
- <!-- begin list-of-links ------------------------------------------------------------------------------------------------------------------------------------------------------->
1264
- <a id="section-list-of-links"></a>
1265
- <CmdWidthLimitationWrapper>
1266
- <h2 class="headline-demopage">List Of Links</h2>
1267
- <h3>Vertical</h3>
1268
- <CmdListOfLinks :links="listOfLinksData"/>
1269
- <h3>Horizontal (aligned left, with headline)</h3>
1270
- <CmdListOfLinks
1271
- orientation="horizontal"
1272
- align="left"
1273
- :links="listOfLinksData"
1274
- :cmdHeadline="{
1275
- headlineText: 'Headline',
1276
- headlineLevel: 5
1277
- }"
1278
- />
1279
- <h3>Horizontal (aligned center)</h3>
1280
- <CmdListOfLinks orientation="horizontal" align="center" :links="listOfLinksData"/>
1281
- <h3>Horizontal (aligned right)</h3>
1282
- <CmdListOfLinks orientation="horizontal" align="right" :links="listOfLinksData"
1283
- @click="clickOnListOfLinks"/>
1284
- <h3>Large icons</h3>
1285
- <CmdListOfLinks orientation="horizontal" :links="listOfLinksData" :largeIcons="true"/>
1286
- </CmdWidthLimitationWrapper>
1287
- <!-- end list-of-links ------------------------------------------------------------------------------------------------------------------------------------------------------->
1288
-
1289
- <!-- begin login-form ------------------------------------------------------------------------------------------------------------------------------------------------------->
1290
- <a id="section-login-form"></a>
1291
- <CmdWidthLimitationWrapper>
1292
- <h2 class="headline-demopage">Login Form</h2>
1293
- <CmdForm :use-validation="true" :use-fieldset="false">
1294
- <CmdLoginForm v-model="loginData" textLegendLoginForm="Please log in"/>
1295
- </CmdForm>
1296
- <p>LoginData: {{ loginData }}</p>
1297
- </CmdWidthLimitationWrapper>
1298
- <!-- end login-form ------------------------------------------------------------------------------------------------------------------------------------------------------->
1299
-
1300
- <!-- begin main-navigation ------------------------------------------------------------------------------------------------------------------------------------------------------->
1301
- <a id="section-main-navigation"></a>
1302
- <CmdWidthLimitationWrapper>
1303
- <h2 class="headline-demopage">Main Navigation</h2>
1304
- <CmdMainNavigation
1305
- :stretchMainItems="false"
1306
- :persistOnMobile="false"
1307
- :navigationEntries="navigationData.navigationEntries"
1308
- />
1309
- </CmdWidthLimitationWrapper>
1310
- <!-- end main-navigation ------------------------------------------------------------------------------------------------------------------------------------------------------->
1311
-
1312
- <!-- begin multistep-form-progress-bar ------------------------------------------------------------------------------------------------------------------------------------------------------->
1313
- <a id="section-multistep-form-progress-bar"></a>
1314
- <CmdWidthLimitationWrapper>
1315
- <h2 class="headline-demopage">Multistepform-Progressbar</h2>
1316
- <h3>Steps with icons</h3>
1317
- <CmdMultistepFormProgressBar
1318
- :multisteps="multistepsData.withIcon"
1319
- separatorIconClass="icon-single-arrow-right"
1320
- @click="showPageMultistep = $event.index + 1"
1321
- />
1322
- <div>
1323
- <p>Page {{ showPageMultistep }}</p>
1324
- </div>
1325
- <h3>Steps with number</h3>
1326
- <CmdMultistepFormProgressBar
1327
- :showStepNumber="true"
1328
- :multisteps="multistepsData.withoutIcon"
1329
- separatorIconClass="icon-single-arrow-right"
1330
- @click="showPageMultistep = $event.index + 1"
1331
- />
1332
- <div>
1333
- <p>Page {{ showPageMultistep }}</p>
1334
- </div>
1335
- </CmdWidthLimitationWrapper>
1336
- <!-- end multistep-form-progress-bar ------------------------------------------------------------------------------------------------------------------------------------------------------->
1337
-
1338
- <!-- begin newsletter-subscription ------------------------------------------------------------------------------------------------------------------------------------------------------->
1339
- <a id="section-newsletter-subscription"></a>
1340
- <CmdWidthLimitationWrapper>
1341
- <h2 class="headline-demopage">Newsletter Subscription</h2>
1342
- <CmdForm textLegend="Stay-up-to-date" :use-fieldset="false">
1343
- <CmdNewsletterSubscription v-model="newsletter" buttonType="submit"
1344
- @buttonClick="submitNewsletterRegistration"/>
1345
- </CmdForm>
1346
- </CmdWidthLimitationWrapper>
1347
- <!-- end newsletter-subscription ------------------------------------------------------------------------------------------------------------------------------------------------------->
1348
-
1349
- <!-- begin opening-hours ------------------------------------------------------------------------------------------------------------------------------------------------------->
1350
- <a id="section-opening-hours"></a>
1351
- <CmdWidthLimitationWrapper>
1352
- <h2 class="headline-demopage">Opening Hours</h2>
1353
- <CmdOpeningHours
1354
- :openingHours="openingHoursData"
1355
- :cmdHeadline="{headlineText: 'Opening hours', headlineLevel: 6}"
1356
- textHolidaysClosed="Closed on holidays"
1357
- textMiscInfo="Miscellaneous information"
1358
- :checkInterval="0"
1359
- />
1360
- </CmdWidthLimitationWrapper>
1361
- <!-- end opening-hours ------------------------------------------------------------------------------------------------------------------------------------------------------->
1362
-
1363
- <!-- begin pagination ------------------------------------------------------------------------------------------------------------------------------------------------------->
1364
- <a id="section-pagination"></a>
1365
- <CmdWidthLimitationWrapper>
1366
- <h2 class="headline-demopage">Pagination</h2>
1367
- <h3>Link-view</h3>
1368
- <div>
1369
- <p>Page {{ showPagePager }}</p>
1370
- </div>
1371
- <CmdPagination
1372
- :pages="4"
1373
- :itemsPerPage="1"
1374
- @click="showPagePager = $event"
1375
- />
1376
- <h3>Button-view</h3>
1377
- <div>
1378
- <p>Page {{ showPagePager }}</p>
1379
- </div>
1380
- <CmdPagination
1381
- :pages="4"
1382
- :itemsPerPage="1"
1383
- link-type="button"
1384
- @click="showPagePager = $event"
1385
- />
1386
- </CmdWidthLimitationWrapper>
1387
- <!-- end pagination ------------------------------------------------------------------------------------------------------------------------------------------------------->
1388
-
1389
- <!-- begin site-footer ------------------------------------------------------------------------------------------------------------------------------------------------------->
1390
- <a id="section-site-footer"></a>
1391
- <CmdWidthLimitationWrapper>
1392
- <h2 class="headline-demopage">Site Footer</h2>
1393
- <CmdSiteFooter>
1394
- Slotcontent
1395
- </CmdSiteFooter>
1396
- </CmdWidthLimitationWrapper>
1397
- <!-- end site-footer ------------------------------------------------------------------------------------------------------------------------------------------------------->
1398
-
1399
- <!-- begin site-header ------------------------------------------------------------------------------------------------------------------------------------------------------->
1400
- <a id="section-site-header"></a>
1401
- <CmdWidthLimitationWrapper>
1402
- <h2 class="headline-demopage">Site Header</h2>
1403
- <h3>Header with navigation below logo</h3>
1404
- <CmdSiteHeader
1405
- :cmdMainNavigation="navigationData"
1406
- :cmdCompanyLogo="companyLogoData"
1407
- :sticky="false"
1408
- />
1409
- <h3>Header with navigation inline with logo</h3>
1410
- <CmdSiteHeader
1411
- :cmdMainNavigation="navigationData"
1412
- :cmdCompanyLogo="companyLogoData"
1413
- :sticky="false"
1414
- :navigation-inline="true"
1415
- />
1416
- <h3>Header with top-header-links, logo and navigation given by slot</h3>
1417
- <CmdSiteHeader :sticky="false">
1418
- <template v-slot:topheader>
1419
- <CmdListOfLinks
1420
- :links="listOfLinksData"
1421
- orientation="horizontal"
1422
- align="right"
1423
- />
1424
- </template>
1425
- <template v-slot:logo>
1426
- <CmdCompanyLogo
1427
- :link="companyLogoData.link"
1428
- altText="CoManD Logo"
1429
- :pathDefaultLogo="companyLogoData.pathDefaultLogo"
1430
- :pathDarkmodeLogo="companyLogoData.pathDarkmodeLogo"
1431
- />
1432
- </template>
1433
- <template v-slot:navigation>
1434
- <CmdMainNavigation
1435
- :stretchMainItems="false"
1436
- :persistOnMobile="false"
1437
- :navigationEntries="navigationData.navigationEntries"
1438
- />
1439
- </template>
1440
- </CmdSiteHeader>
1441
- </CmdWidthLimitationWrapper>
1442
- <!-- end site-header ------------------------------------------------------------------------------------------------------------------------------------------------------->
1443
-
1444
- <!-- begin site-search ------------------------------------------------------------------------------------------------------------------------------------------------------->
1445
- <a id="section-site-search"></a>
1446
- <CmdWidthLimitationWrapper>
1447
- <h2 class="headline-demopage">Site Search</h2>
1448
- <CmdSiteSearch
1449
- v-model:modelValueInput1="siteSearchInput1"
1450
- v-model:modelValueInput2="siteSearchInput2"
1451
- v-model:modelValueRadius="radius"
1452
- v-model:modelValueSearchFilters="filters"
1453
- @search="siteSearchOutput"
1454
- textLegend="Search"
1455
- :cmdFakeSelect="siteSearchFilters"
1456
- />
1457
- </CmdWidthLimitationWrapper>
1458
- <!-- end site-search ------------------------------------------------------------------------------------------------------------------------------------------------------->
1459
-
1460
- <!-- begin slideshow ------------------------------------------------------------------------------------------------------------------------------------------------------->
1461
- <a id="section-slideshow"></a>
1462
- <CmdWidthLimitationWrapper>
1463
- <h2 class="headline-demopage">Slideshow</h2>
1464
- <CmdSlideshow
1465
- :slideshow-items="slideshowData"
1466
- :showCounter="true"
1467
- :autoplay="true"
1468
- />
1469
- </CmdWidthLimitationWrapper>
1470
- <!-- end slideshow ------------------------------------------------------------------------------------------------------------------------------------------------------->
1471
-
1472
- <!-- begin social-networks ------------------------------------------------------------------------------------------------------------------------------------------------------->
1473
- <a id="section-social-networks"></a>
1474
- <CmdWidthLimitationWrapper>
1475
- <h2 class="headline-demopage">Social Networks</h2>
1476
- <h3>With user confirmation (buttons without gap)</h3>
1477
- <CmdSocialNetworks
1478
- :networks="socialNetworksData"
1479
- :userMustAcceptDataPrivacy="true"
1480
- :useGap="false"
1481
- />
1482
- <h3>Without user confirmation (buttons with gap, text aligned right)</h3>
1483
- <CmdSocialNetworks
1484
- :networks="socialNetworksData"
1485
- :userMustAcceptDataPrivacy="false"
1486
- />
1487
- <h3>Without user confirmation (buttons with gap, text aligned left)</h3>
1488
- <CmdSocialNetworks
1489
- :networks="socialNetworksData"
1490
- :userMustAcceptDataPrivacy="false"
1491
- textAlign="left"
1492
- />
1493
- </CmdWidthLimitationWrapper>
1494
- <!-- end social-networks ------------------------------------------------------------------------------------------------------------------------------------------------------->
1495
-
1496
- <!-- begin switch-language ------------------------------------------------------------------------------------------------------------------------------------------------------->
1497
- <a id="section-switch-language"></a>
1498
- <CmdWidthLimitationWrapper>
1499
- <h2 class="headline-demopage">Switch Language</h2>
1500
- <CmdSwitchLanguage
1501
- :languages="languagesData"
1502
- @click="doSomething"
1503
- />
1504
- </CmdWidthLimitationWrapper>
1505
- <!-- end switch-language ------------------------------------------------------------------------------------------------------------------------------------------------------->
1506
-
1507
- <!-- begin system-message ------------------------------------------------------------------------------------------------------------------------------------------------------->
1508
- <a id="section-system-message"></a>
1509
- <CmdWidthLimitationWrapper>
1510
- <h2 class="headline-demopage">System Message</h2>
1511
- <CmdSystemMessage validationStatus="error"
1512
- :fullWidth="true"
1513
- systemMessage="This is an error message!"
1514
- :iconMessage="{iconClass: 'icon-error-circle', show: true}">
1515
- <ul>
1516
- <li>Error #1</li>
1517
- <li>Error #2</li>
1518
- <li>Error #3</li>
1519
- </ul>
1520
- </CmdSystemMessage>
1521
- <CmdSystemMessage validationStatus="warning"
1522
- :fullWidth="true"
1523
- systemMessage="This is a warning message!">
1524
- <p>This is additional text!</p>
1525
- </CmdSystemMessage>
1526
- <CmdSystemMessage validationStatus="success"
1527
- :fullWidth="true"
1528
- systemMessage="This is a success message!"
1529
- :iconMessage="{iconClass: 'icon-check-circle', show: true}">
1530
- <p>This is additional text!</p>
1531
- </CmdSystemMessage>
1532
- <CmdSystemMessage validationStatus="info"
1533
- :fullWidth="true"
1534
- systemMessage="This is an info message!"
1535
- :iconMessage="{iconClass: 'icon-info-circle', show: true}">
1536
- <p>This is additional text!</p>
1537
- </CmdSystemMessage>
1538
- </CmdWidthLimitationWrapper>
1539
- <!-- end system-message ------------------------------------------------------------------------------------------------------------------------------------------------------->
1540
-
1541
- <!-- begin tables ------------------------------------------------------------------------------------------------------------------------------------------------------->
1542
- <a id="section-tables"></a>
1543
- <CmdWidthLimitationWrapper>
1544
- <h2 class="headline-demopage">Tables</h2>
1545
- <h3>Table as wide as its content (with caption)</h3>
1546
- <CmdTable :collapsible="true" :fullWidthOnDefault="false" :userCanToggleWidth="true"
1547
- :table-data="tableDataSmall"/>
1548
- <h3>Table as wide as its content (without caption)</h3>
1549
- <CmdTable :collapsible="true" :fullWidthOnDefault="false" :userCanToggleWidth="true"
1550
- :caption="{ text: 'Hidden caption', show: false}" :table-data="tableDataSmall"/>
1551
- <h3>Table as wide as possible</h3>
1552
- <CmdTable :collapsible="true" :fullWidthOnDefault="false" :userCanToggleWidth="true"
1553
- :table-data="tableDataLarge"/>
1554
- </CmdWidthLimitationWrapper>
1555
- <!-- end tables ------------------------------------------------------------------------------------------------------------------------------------------------------->
1556
-
1557
- <!-- begin tabs ------------------------------------------------------------------------------------------------------------------------------------------------------->
1558
- <a id="section-tabs"></a>
1559
- <CmdWidthLimitationWrapper>
1560
- <h2 class="headline-demopage">Tabs</h2>
1561
- <h3>Tabs with content from json-file</h3>
1562
- <CmdTabs :stretchTabs="false" :tabs="tabsData"/>
1563
- <h3>Tabs with HTML-content (given by slot))</h3>
1564
- <CmdTabs :stretchTabs="true" :tabs="[{name: 'Tab 1'}, {name: 'Tab 2'}, {name: 'Tab 3'}]"
1565
- :useSlot="true">
1566
- <template v-slot:tab-content-0>
1567
- <h4>Tab 1 headline</h4>
1568
- <p>Content</p>
1569
- </template>
1570
- <template v-slot:tab-content-1>
1571
- <h4>Tab 2</h4>
1572
- <p>Content</p>
1573
- <p>Content</p>
1574
- </template>
1575
- <template v-slot:tab-content-2>
1576
- <h4>Tab 3</h4>
1577
- <p>Content</p>
1578
- <p>Content</p>
1579
- <p>Content</p>
1580
- </template>
1581
- </CmdTabs>
1582
- </CmdWidthLimitationWrapper>
1583
- <!-- end tabs ------------------------------------------------------------------------------------------------------------------------------------------------------->
1584
-
1585
- <!-- begin text-image-block ------------------------------------------------------------------------------------------------------------------------------------------------------->
1586
- <a id="section-text-image-block"></a>
1587
- <CmdWidthLimitationWrapper>
1588
- <h2 class="headline-demopage">Text-Image-Block</h2>
1589
- <div class="flex-container">
1590
- <CmdTextImageBlock
1591
- :cmdHeadline="{headlineText: 'Text-Image-Block with image', headlineLevel: 3}"
1592
- :cmdImage='{
1593
- "image": {
1594
- "src": "/media/images/demo-images/large/landscape-01.jpg",
1595
- "alt": "alternative text",
1596
- "tooltip": "tooltip"
1597
- },
1598
- "figcaption": {
1599
- "text": "figcaption",
1600
- "position": "bottom",
1601
- "textAlign": "center",
1602
- "show": true
1603
- }
1604
- }'
1605
- htmlContent="Text given as text only"
1606
- />
1607
- <CmdTextImageBlock
1608
- :cmdHeadline="{headlineText: 'Headline', headlineLevel: 3}"
1609
- htmlContent="<p>Text given as html-content</p>"
1610
- />
1611
- </div>
1612
- </CmdWidthLimitationWrapper>
1613
- <!-- end text-image-block ------------------------------------------------------------------------------------------------------------------------------------------------------->
1614
-
1615
- <!-- begin thumbnail-scroller ------------------------------------------------------------------------------------------------------------------------------------------------------->
1616
- <a id="section-thumbnail-scroller"></a>
1617
- <CmdWidthLimitationWrapper>
1618
- <h2 class="headline-demopage">Thumbnail-Scroller</h2>
1619
- <div class="inline-size">
1620
- <h3>Thumbnail-Scroller with images (opens fancybox)</h3>
1621
-
1622
- <CmdThumbnailScroller
1623
- :thumbnail-scroller-items="thumbnailScrollerImagesData"
1624
- />
1625
- <h3>Thumbnail-Scroller with text (opens url)</h3>
1626
- <CmdThumbnailScroller
1627
- :thumbnail-scroller-items="thumbnailScrollerTextData"
1628
- contentType="text"
1629
- executeOnClick="url"
1630
- :fullWidth="true"
1631
- />
1632
- <h3>Thumbnail-Scroller with text (emits click-event)</h3>
1633
- <CmdThumbnailScroller
1634
- :thumbnail-scroller-items="thumbnailScrollerTextData"
1635
- contentType="text"
1636
- executeOnClick="emit"
1637
- @click="onClick"
1638
- :largeIcons="true"
1639
- :fullWidth="true"
1640
- />
1641
- </div>
1642
- </CmdWidthLimitationWrapper>
1643
- <!-- end thumbnail-scroller ------------------------------------------------------------------------------------------------------------------------------------------------------->
1644
-
1645
- <!-- begin tooltip ------------------------------------------------------------------------------------------------------------------------------------------------------->
1646
- <a id="section-tooltip"></a>
1647
- <CmdWidthLimitationWrapper>
1648
- <h2 class="headline-demopage">Tooltip</h2>
1649
- <p>
1650
- <a href="#" @click.prevent id="show-on-hover">Show tooltip on hover!</a><br/>
1651
- <a href="#" @click.prevent id="show-with-delay">Show tooltip on hover with delay!</a><br/>
1652
- <a href="#" @click.prevent id="show-on-click" title="Native tooltip">Show tooltip on click!</a>
1653
- </p>
1654
- <CmdTooltip related-id="show-on-hover">
1655
- Tooltip on hover
1656
- </CmdTooltip>
1657
- <CmdTooltip :delay-to-show-tooltip="2000" related-id="show-with-delay">
1658
- Tooltip on hover with delay
1659
- </CmdTooltip>
1660
- <CmdTooltip related-id="show-on-click" :toggle-visibility-by-click="true">
1661
- Tooltip on click
1662
- </CmdTooltip>
1663
- </CmdWidthLimitationWrapper>
1664
- <!-- end tooltip ------------------------------------------------------------------------------------------------------------------------------------------------------->
1665
-
1666
- <!-- begin upload-form ------------------------------------------------------------------------------------------------------------------------------------------------------->
1667
- <a id="section-upload-form"></a>
1668
- <CmdWidthLimitationWrapper>
1669
- <h2 class="headline-demopage">Upload-Form</h2>
1670
- <h3>Simple mode</h3>
1671
- <CmdUploadForm :enableDragAndDrop="true"
1672
- :allowedFileExtensions="['jpg', 'png']"
1673
- :allowMultipleFileUploads="true"
1674
- :advancedMode="false"
1675
- textLegend="Simple upload form"
1676
- @error="showError"
1677
- :uploadOptions="{url: 'http://localhost:8888'}"
1678
- />
1679
- <h3>Advanced mode</h3>
1680
- <CmdUploadForm :cmdHeadlineFieldset="{headlineText: 'Select files to upload', headlineLevel: 3}"
1681
- :enableDragAndDrop="true"
1682
- :allowedFileExtensions="['jpg', 'png']"
1683
- :allowMultipleFileUploads="true"
1684
- textLegend="Advanced upload form"
1685
- :uploadOptions="{url: 'http://localhost:8888'}"
1686
- />
1687
- </CmdWidthLimitationWrapper>
1688
- <!-- end upload-form ------------------------------------------------------------------------------------------------------------------------------------------------------->
1689
- </main>
1690
-
1691
- <!-- begin copyright-information ------------------------------------------------------------------------------------------------------------------------------------------------------->
1692
- <CmdCopyrightInformation/>
1693
- <!-- end copyright-information ------------------------------------------------------------------------------------------------------------------------------------------------------->
1694
-
1695
- <!-- begin fancy-box ------------------------------------------------------------------------------------------------------------------------------------------------------->
1696
- <CmdFancyBox
1697
- :show="fancyBoxCookieDisclaimer"
1698
- :fancyboxOptions="{}"
1699
- :allowEscapeKey="false"
1700
- :cmdHeadline="{show: true, headlineText: 'Cookie Disclaimer', headlineLevel: 2}"
1701
- ariaLabelText="Cookie Disclaimer"
1702
- >
1703
- <!-- begin cookie-disclaimer ------------------------------------------------------------------------------------------------------------------------------------------------------->
1704
- <CmdCookieDisclaimer
1705
- :cookieOptions="cookieDisclaimerData"
1706
- buttonLabelAcceptAllCookies="Accept all cookies"
1707
- buttonLabelAcceptCurrentSettings="Accept current settings"
1708
- @closeCookieDisclaimer="closeCookieDisclaimer"
1709
- v-model="acceptedCookies"
1710
- :cmdHeadlineCookieDisclaimer="{ show: false }">
1711
- <template #privacy-text>
1712
- <p>
1713
- <strong>
1714
- By browsing this web site you accept the usage and saving of anonymous data!
1715
- </strong>
1716
- </p>
1717
- </template>
1718
- </CmdCookieDisclaimer>
1719
- <!-- end cookie-disclaimer ------------------------------------------------------------------------------------------------------------------------------------------------------->
1720
- </CmdFancyBox>
1721
- <!-- end fancy-box ------------------------------------------------------------------------------------------------------------------------------------------------------->
1722
- </div><!-- end #page-wrapper -->
1723
- </div>
1724
- </template>
1725
-
1726
- <script>
1727
- // import used example data
1728
- import addressData from '@/assets/data/address-data.json'
1729
- import bankAccountData from '@/assets/data/bank-account-data.json'
1730
- import boxUserData from '@/assets/data/box-user.json'
1731
- import boxProductData from '@/assets/data/box-product.json'
1732
- import breadcrumbData from '@/assets/data/breadcrumbs.json'
1733
- import companyLogoData from '@/assets/data/company-logo.json'
1734
- import cookieDisclaimerData from '@/assets/data/cookie-disclaimer.json'
1735
- import fakeSelectColorsData from '@/assets/data/fake-select-colors.json'
1736
- import fakeSelectCountriesData from '@/assets/data/fake-select-countries.json'
1737
- import fakeSelectFilterOptionsData from '@/assets/data/fake-select-filter-options.json'
1738
- import fakeSelectOptionsData from '@/assets/data/fake-select-options.json'
1739
- import fakeSelectOptionsWithIconsData from '@/assets/data/fake-select-options-with-icons.json'
1740
- import formElementsData from '@/assets/data/form-elements.json'
1741
- import imageData from '@/assets/data/image.json'
1742
- import imageGalleryData from '@/assets/data/image-gallery.json'
1743
- import inputGroupRadiobuttonsData from '@/assets/data/input-group-radiobuttons.json'
1744
- import inputGroupReplacedRadiobuttonsData from '@/assets/data/input-group-replaced-radiobuttons.json'
1745
- import inputGroupToggleSwitchRadiobuttonsData from '@/assets/data/input-group-toggle-switch-radiobuttons.json'
1746
- import listOfLinksData from '@/assets/data/list-of-links.json'
1747
- import languagesData from '@/assets/data/switch-language.json'
1748
- import multistepsData from '@/assets/data/multistep-form-progress-bar.json'
1749
- import navigationData from '@/assets/data/main-navigation.json'
1750
- import openingHoursData from '@/assets/data/opening-hours.json'
1751
- import selectOptionsData from '@/assets/data/select-options.json'
1752
- import socialNetworksData from '@/assets/data/social-networks-page-by-json.json'
1753
- import slideshowData from '@/assets/data/slideshow.json'
1754
- import tabsData from '@/assets/data/tabs.json'
1755
- import tableDataSmall from '@/assets/data/table-small.json'
1756
- import tableDataLarge from '@/assets/data/table-large.json'
1757
- import thumbnailScrollerImagesData from '@/assets/data/thumbnail-scroller-images.json'
1758
- import thumbnailScrollerTextData from '@/assets/data/thumbnail-scroller-text.json'
1759
-
1760
- import packageJson from '../package.json'
1761
-
1762
- import {openFancyBox} from "@/components/CmdFancyBox.vue"
1763
-
1764
- // import external functions
1765
- import * as functions from "@/mixins/FieldValidation.js"
1766
-
1767
- import {localizedTime} from "./components/CmdOpeningHours.vue"
1768
-
1769
- export default {
1770
- name: "App",
1771
- data() {
1772
- return {
1773
- selectedTemplate: "blank",
1774
- acceptedCookies: ["google-maps"],
1775
- showTooltip: false,
1776
- disabledStatus: undefined,
1777
- validationStatus: "",
1778
- loginData: {
1779
- username: "",
1780
- password: ""
1781
- },
1782
- newsletter: {
1783
- subscription: "",
1784
- email: ""
1785
- },
1786
- inputFieldPattern: "",
1787
- inputSearch: "",
1788
- textarea: "",
1789
- inputGroupRadio: "radiobuttonValue1",
1790
- inputGroupCheckbox: "website",
1791
- inputGroupValueReplaceInputTypeRadio: "phone",
1792
- inputGroupValueReplaceInputTypeCheckbox: ["phone"],
1793
- inputGroupValueToggleSwitchCheckbox: ["phone"],
1794
- inputGroupValueToggleSwitchRadio: "phone",
1795
- inputGroupValue3: "email",
1796
- inputGroupValue4: [],
1797
- inputGroupCheckboxes: [
1798
- {
1799
- labelText: "Website",
1800
- id: "checkbox-id-1",
1801
- name: "input-group-checkbox",
1802
- iconClass: "icon-globe",
1803
- value: "website"
1804
- },
1805
- {
1806
- labelText: "E-Mail",
1807
- id: "checkbox-id-2",
1808
- name: "input-group-checkbox",
1809
- iconClass: "icon-mail",
1810
- value: "email"
1811
- },
1812
- {
1813
- labelText: "Phone",
1814
- id: "checkbox-id-3",
1815
- name: "input-group-checkbox",
1816
- iconClass: "icon-phone",
1817
- value: "phone"
1818
- }
1819
- ],
1820
- inputNumber: "",
1821
- inputDate: "",
1822
- accordionGroupOpen: false,
1823
- showPageMultistep: 1,
1824
- showPagePager: 1,
1825
- selectedOption: "",
1826
- selectedOptions: [],
1827
- selectedCountry: "de",
1828
- selectedColor: "",
1829
- rangeValue: 50,
1830
- siteSearchFilters: {
1831
- show: true,
1832
- selectData: fakeSelectFilterOptionsData,
1833
- defaultOptionName: "Select filters:",
1834
- labelText: "Filters:",
1835
- type: "checkboxOptions"
1836
- },
1837
- siteSearchInput1: "Doctor",
1838
- siteSearchInput2: "New York",
1839
- radius: 5,
1840
- filters: ["2"],
1841
- switchButtonRadio: "radio1",
1842
- switchButtonCheckboxToggleSwitch: false,
1843
- switchButtonCheckboxToggleSwitchColored: false,
1844
- switchButtonCheckbox: ["checkbox1"],
1845
- switchButtonCheckboxColored: false,
1846
- inputUsername: "",
1847
- inputPassword: "",
1848
- inputField1: "",
1849
- inputFieldRequired: "",
1850
- checkboxValue: true,
1851
- checkboxRequiredValue: false,
1852
- checkboxValues: ["checkboxValue1"],
1853
- replacedCheckboxValue: "checkboxValue1",
1854
- radiobuttonValue: "radiobuttonValue1",
1855
- replacedRadiobuttonValue: "radiobuttonValue1",
1856
- fancyBoxCookieDisclaimer: false,
1857
- fakeSelectDefault: 3,
1858
- fakeSelectDefaultWithIcons: 1,
1859
- fakeSelectCheckbox: [1],
1860
- fakeSelectFilters: [],
1861
- datalist: {
1862
- id: "datalist-id",
1863
- options: [
1864
- "Option 1",
1865
- "Option 2",
1866
- "Option 3"
1867
- ]
1868
- },
1869
- customRequirements: [
1870
- functions.validateCharacters(),
1871
- functions.validateNumbers(),
1872
- functions.validateNumbersOnly(),
1873
- functions.validateSpecialCharacters(),
1874
- functions.validateCapitalLetters()
1875
- ],
1876
- openSidebar: true,
1877
- openBoxes: [0],
1878
-
1879
- // assign data from json files to data-properties
1880
- addressData,
1881
- bankAccountData,
1882
- boxProductData,
1883
- boxUserData,
1884
- breadcrumbData,
1885
- companyLogoData,
1886
- cookieDisclaimerData,
1887
- fakeSelectColorsData,
1888
- fakeSelectCountriesData,
1889
- fakeSelectFilterOptionsData,
1890
- fakeSelectOptionsData,
1891
- fakeSelectOptionsWithIconsData,
1892
- formElementsData,
1893
- listOfLinksData,
1894
- imageData,
1895
- imageGalleryData,
1896
- inputGroupReplacedRadiobuttonsData,
1897
- inputGroupToggleSwitchRadiobuttonsData,
1898
- languagesData,
1899
- multistepsData,
1900
- navigationData,
1901
- openingHoursData,
1902
- selectOptionsData,
1903
- socialNetworksData,
1904
- slideshowData,
1905
- tableDataSmall,
1906
- tableDataLarge,
1907
- tabsData,
1908
- thumbnailScrollerImagesData,
1909
- thumbnailScrollerTextData,
1910
- packageJson
1911
- }
1912
- },
1913
- computed: {
1914
- templateId() {
1915
- return "template-" + this.selectedTemplate
1916
- }
1917
- },
1918
- methods: {
1919
- setOpenStatus(event) {
1920
- this.openSidebar = event
1921
- },
1922
- openBox(boxIndex) {
1923
- this.openSidebar = true
1924
- this.openBoxes = [boxIndex]
1925
- },
1926
- navigationDataRight() {
1927
- setTimeout(() => {
1928
- let navigationData = {}
1929
- navigationData = [...this.navigationData.navigationEntries]
1930
- navigationData.offcanvasPosition = "right"
1931
- return navigationData
1932
- }, 1000);
1933
- },
1934
- clickOnListOfLinks(event) {
1935
- event.originalEvent.preventDefault()
1936
- console.log(event)
1937
- },
1938
- localizedTime(language) {
1939
- return (h, m) => (localizedTime(language))(h, m).toLowerCase()
1940
- },
1941
- idForReplacedInputsInInputGroup(prefix) {
1942
- return inputGroupRadiobuttonsData.map(item => ({...item, id: prefix + item.id}))
1943
- },
1944
- closeCookieDisclaimer(event) {
1945
- this.fancyBoxCookieDisclaimer = false
1946
- alert(event.join(", "))
1947
- },
1948
- setStatus(validationStatus, disabledStatus) {
1949
- this.validationStatus = validationStatus
1950
- this.disabledStatus = disabledStatus
1951
- },
1952
- onClick(event) {
1953
- alert(event)
1954
- },
1955
- siteSearchOutput(event) {
1956
- alert(JSON.stringify(event))
1957
- },
1958
- showError() {
1959
- alert("Error")
1960
- },
1961
- showFancyBox(type, content, ariaLabelText) {
1962
- if (type === "text") {
1963
- openFancyBox({
1964
- content: content,
1965
- cmdHeadline: {
1966
- show: true,
1967
- headlineText: "Fancybox with text", headlineLevel: 3
1968
- },
1969
- ariaLabelText: ariaLabelText
1970
- })
1971
- } else if (type === "url") {
1972
- openFancyBox({
1973
- url: content,
1974
- cmdHeadline: {
1975
- show: true,
1976
- headlineText: "Fancybox with image given by url", headlineLevel: 3
1977
- },
1978
- ariaLabelText: ariaLabelText
1979
- })
1980
- } else if (type === "image") {
1981
- openFancyBox({
1982
- cmdHeadline: {
1983
- show: true,
1984
- headlineText: "Fancybox with image given by property",
1985
- headlineLevel: 3
1986
- },
1987
- cmdImage: {
1988
- image: {
1989
- src: {
1990
- small: content.small,
1991
- medium: content.medium,
1992
- large: content.large
1993
- },
1994
- alt: "Alternative text",
1995
- tooltip: "This is a tooltip"
1996
- },
1997
- figcaption: {
1998
- show: true,
1999
- text: "figcaption"
2000
- }
2001
- },
2002
- ariaLabelText: ariaLabelText
2003
- })
2004
- }
2005
- },
2006
- getOptionName(option) {
2007
- for (let i = 0; i < this.fakeSelectFilterOptionsData.length; i++) {
2008
- if (option === this.fakeSelectFilterOptionsData[i].value) {
2009
- return this.fakeSelectFilterOptionsData[i].text
2010
- }
2011
- }
2012
- return null
2013
- },
2014
- submitNewsletterRegistration(event) {
2015
- alert(event.subscription + " " + event.email)
2016
- },
2017
- doSomething(event) {
2018
- event.preventDefault()
2019
- alert("Language changed!")
2020
- },
2021
- executeSearch() {
2022
- return Math.floor(Math.random() * 100)
2023
- },
2024
- doConsoleLog(event) {
2025
- event.originalEvent.preventDefault()
2026
- console.log("event: ", event)
2027
- },
2028
- toggleAllAccordions() {
2029
- if (this.accordionGroupOpen) {
2030
- this.$refs.accordionGroup1.closeAll()
2031
- } else {
2032
- this.$refs.accordionGroup1.openAll()
2033
- }
2034
- this.accordionGroupOpen = !this.accordionGroupOpen
2035
- },
2036
- switchButtonChange() {
2037
- alert("Changed")
2038
- }
2039
- },
2040
- watch: {
2041
- selectedTemplate() {
2042
- let linkTag = document.querySelector('link')
2043
-
2044
- if (linkTag) {
2045
- linkTag.parentNode.removeChild(linkTag)
2046
- }
2047
-
2048
- if (this.selectedTemplate !== "blank") {
2049
- let newLink = document.createElement('link');
2050
- newLink.rel = 'stylesheet';
2051
- newLink.href = 'https://cdn.jsdelivr.net/npm/comand-frontend-framework/dist/templates/' + this.selectedTemplate + '.css';
2052
-
2053
- document.head.appendChild(newLink);
2054
- }
2055
- }
2056
- }
2057
- }
2058
- </script>
2059
-
2060
- <style lang="scss">
2061
- .list-status {
2062
- .active {
2063
- color: var(--text-color);
2064
- text-decoration: none;
2065
- background: none;
2066
- }
2067
- }
2068
-
2069
- main .cmd-width-limitation-wrapper:not(:last-of-type) {
2070
- border-bottom: var(--default-border);
2071
- border-style: dashed;
2072
- }
2073
-
2074
- .cmd-sidebar {
2075
- position: fixed;
2076
- top: 0;
2077
- left: 0;
2078
- z-index: 2000;
2079
- max-width: 30rem;
2080
- height: 100vh;
2081
- margin: 0;
2082
- padding: 0;
2083
- gap: 0;
2084
- border: 0;
2085
- border-right-width: 0;
2086
- border-right-style: none;
2087
- border-right-color: currentcolor;
2088
- border-right: var(--default-border);
2089
-
2090
- .box {
2091
- border-right: 0;
2092
-
2093
- &:not(:last-child) {
2094
- border-bottom: 0;
2095
- }
2096
- }
2097
-
2098
- .open-slot-wrapper {
2099
- display: flex;
2100
- flex-direction: column;
2101
- justify-content: space-between;
2102
- height: 100%;
2103
-
2104
- .comand-versions {
2105
- padding: var(--default-padding);
2106
- margin: 0;
2107
- }
2108
- }
2109
-
2110
- .closed-sidebar {
2111
- display: flex;
2112
- flex-direction: column;
2113
- gap: var(--default-gap);
2114
- padding: var(--default-padding);
2115
- }
2116
- }
2117
- </style>