comand-component-library 4.0.0 → 4.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/comand-component-library.js +1670 -1603
- package/dist/comand-component-library.umd.cjs +4 -4
- package/dist/style.css +1 -1
- package/package.json +2 -2
- package/src/{App.vue → ComponentLibrary.vue} +875 -413
- package/src/assets/data/main-navigation.json +2 -0
- package/src/components/CmdAddressData.vue +1 -1
- package/src/components/CmdBox.vue +40 -4
- package/src/components/CmdBoxWrapper.vue +15 -5
- package/src/components/CmdFormElement.vue +37 -33
- package/src/components/CmdHeadline.vue +97 -33
- package/src/components/CmdInputGroup.vue +6 -5
- package/src/components/CmdListOfLinks.vue +24 -24
- package/src/components/CmdLoginForm.vue +1 -0
- package/src/components/CmdMainNavigation.vue +20 -9
- package/src/components/CmdMultistepFormProgressBar.vue +43 -1
- package/src/components/CmdNewsletterSubscription.vue +7 -7
- package/src/components/CmdOpeningHours.vue +33 -18
- package/src/components/CmdOpeningHoursItem.vue +21 -13
- package/src/components/CmdPagination.vue +2 -2
- package/src/components/CmdSidebar.vue +6 -1
- package/src/components/CmdSiteHeader.vue +2 -0
- package/src/components/CmdSiteSearch.vue +12 -11
- package/src/components/CmdSystemMessage.vue +1 -0
- package/src/components/CmdTable.vue +9 -1
- package/src/components/CmdTextImageBlock.vue +2 -0
- package/src/components/CmdThumbnailScroller.vue +52 -32
- package/src/components/CmdTooltip.vue +5 -0
- package/src/components/CmdUploadForm.vue +67 -41
- package/src/components/ComponentSettings.vue +171 -0
- package/src/main.js +3 -3
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
<CmdSidebar
|
|
8
8
|
:cmdHeadline="{headlineText: 'Site Settings', headlineLevel: 3, textAlign: 'center'}"
|
|
9
9
|
:openSidebar="openSidebar"
|
|
10
|
-
@toggle-sidebar="
|
|
10
|
+
@toggle-sidebar="setOpenStatusLeftSidebar"
|
|
11
11
|
>
|
|
12
12
|
<template #open>
|
|
13
13
|
<CmdBoxWrapper
|
|
@@ -47,48 +47,83 @@
|
|
|
47
47
|
>
|
|
48
48
|
<template v-slot:body>
|
|
49
49
|
<ul>
|
|
50
|
-
<li><a href="#section-address-data"
|
|
50
|
+
<li><a href="#section-address-data"
|
|
51
|
+
@click="updateSettingsSidebar('CmdAddressData')">Address Data</a></li>
|
|
51
52
|
<li><a href="#section-advanced-form-elements">Advanced Form Elements</a></li>
|
|
52
|
-
<li><a href="#section-bank-account-data"
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
<li><a href="#section-
|
|
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™</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>
|
|
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>
|
|
73
57
|
</li>
|
|
74
|
-
<li><a href="#section-
|
|
75
|
-
|
|
76
|
-
<li><a href="#section-
|
|
77
|
-
|
|
78
|
-
<li><a href="#section-
|
|
79
|
-
<li><a href="#section-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
<li><a href="#section-
|
|
83
|
-
|
|
84
|
-
<li><a href="#section-
|
|
85
|
-
<li><a href="#section-
|
|
86
|
-
|
|
87
|
-
<li><a href="#section-
|
|
88
|
-
<li><a href="#section-
|
|
89
|
-
|
|
90
|
-
<li><a href="#section-
|
|
91
|
-
|
|
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™</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>
|
|
92
127
|
</ul>
|
|
93
128
|
</template>
|
|
94
129
|
</CmdBox>
|
|
@@ -106,8 +141,7 @@
|
|
|
106
141
|
<a href="#" class="button primary" title="Open Template Settings" @click.prevent="openBox(0)">
|
|
107
142
|
<span class="icon-settings-template"></span>
|
|
108
143
|
</a>
|
|
109
|
-
<a href="#" class="button primary" title="Open Template Settings"
|
|
110
|
-
@click.prevent="openBox(1)">
|
|
144
|
+
<a href="#" class="button primary" title="Open Template Settings" @click.prevent="openBox(1)">
|
|
111
145
|
<span class="icon-settings-component"></span>
|
|
112
146
|
</a>
|
|
113
147
|
</div>
|
|
@@ -139,38 +173,17 @@
|
|
|
139
173
|
<main id="content">
|
|
140
174
|
<!-- begin address-data ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
141
175
|
<CmdWidthLimitationWrapper>
|
|
142
|
-
<h2 class="headline-demopage" id="section-address-data">
|
|
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>
|
|
143
181
|
<div class="flex-container">
|
|
144
182
|
<CmdAddressData
|
|
183
|
+
ref="CmdAddressData"
|
|
145
184
|
:addressData="addressData"
|
|
146
|
-
|
|
147
|
-
:
|
|
148
|
-
:cmdHeadline="{headlineText: 'With label texts and icons', headlineLevel: 3}"
|
|
149
|
-
/>
|
|
150
|
-
<CmdAddressData
|
|
151
|
-
:addressData="addressData"
|
|
152
|
-
:linkGoogleMaps="false"
|
|
153
|
-
:showLabelTexts="false"
|
|
154
|
-
:cmdHeadline="{headlineText: 'With label icons only', headlineLevel: 3}"
|
|
155
|
-
/>
|
|
156
|
-
<CmdAddressData
|
|
157
|
-
:addressData="addressData"
|
|
158
|
-
:linkGoogleMaps="false"
|
|
159
|
-
:showLabelIcons="false"
|
|
160
|
-
:showLabelTexts="true"
|
|
161
|
-
:cmdHeadline="{headlineText: 'With label texts', headlineLevel: 3}"
|
|
162
|
-
/>
|
|
163
|
-
<CmdAddressData
|
|
164
|
-
:addressData="addressData"
|
|
165
|
-
:linkGoogleMaps="false"
|
|
166
|
-
:showLabels="false"
|
|
167
|
-
:cmdHeadline="{headlineText: 'Without labels', headlineLevel: 3}"
|
|
168
|
-
/>
|
|
169
|
-
<CmdAddressData
|
|
170
|
-
:addressData="addressData"
|
|
171
|
-
:linkGoogleMaps="true"
|
|
172
|
-
:showIconsOnly="true"
|
|
173
|
-
:cmdHeadline="{headlineText: 'Linked icons only', headlineLevel: 3}"
|
|
185
|
+
v-bind="cmdAddressDataSettingsData"
|
|
186
|
+
:cmdHeadline="{headlineText: 'Address Data Headline', headlineLevel: 3}"
|
|
174
187
|
/>
|
|
175
188
|
</div>
|
|
176
189
|
</CmdWidthLimitationWrapper>
|
|
@@ -204,7 +217,7 @@
|
|
|
204
217
|
<li>
|
|
205
218
|
<a href="#" @click.prevent="setStatus('success', false)"
|
|
206
219
|
:class="{'active' : validationStatus === 'success'}" id="status-success">
|
|
207
|
-
|
|
220
|
+
Success
|
|
208
221
|
</a>
|
|
209
222
|
</li>
|
|
210
223
|
<li>
|
|
@@ -436,79 +449,81 @@
|
|
|
436
449
|
<!-- type === default: normal selectbox (with optional icons) -->
|
|
437
450
|
<CmdFakeSelect
|
|
438
451
|
labelText="Default selectbox:"
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
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"
|
|
446
459
|
/>
|
|
447
460
|
<CmdFakeSelect
|
|
448
461
|
labelText="Default selectbox with icons:"
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
462
|
+
:status="validationStatus"
|
|
463
|
+
:disabled="disabledStatus"
|
|
464
|
+
:selectData="fakeSelectOptionsWithIconsData"
|
|
465
|
+
v-model="fakeSelectDefaultWithIcons"
|
|
466
|
+
defaultOptionName="Select an option:"
|
|
454
467
|
/>
|
|
455
468
|
<!-- type === checkboxOptions: selectbox with checkboxes for each option -->
|
|
456
469
|
<CmdFakeSelect
|
|
457
470
|
labelText="Selectbox with checkboxes:"
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
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"
|
|
467
480
|
/>
|
|
468
481
|
<CmdFakeSelect
|
|
469
482
|
labelText="Selectbox with filters:"
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
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"
|
|
478
491
|
/>
|
|
479
492
|
<CmdFakeSelect
|
|
480
493
|
labelText="Selectbox with slot-content:"
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
|
|
494
|
+
:status="validationStatus"
|
|
495
|
+
:disabled="disabledStatus"
|
|
496
|
+
type="content"
|
|
497
|
+
defaultOptionName="HTML-Content:">
|
|
485
498
|
<ul class="custom-fake-select-content">
|
|
486
499
|
<li>
|
|
487
500
|
<div>
|
|
488
501
|
<h3>Headline</h3>
|
|
489
502
|
<p>Some content inside a paragraph</p>
|
|
490
503
|
</div>
|
|
491
|
-
<img
|
|
504
|
+
<img
|
|
505
|
+
src="media/images/thumbnail-scroller/thumbnail/logo-cmd-blue-landscape.jpg"
|
|
506
|
+
alt="image"/>
|
|
492
507
|
</li>
|
|
493
508
|
</ul>
|
|
494
509
|
</CmdFakeSelect>
|
|
495
510
|
<CmdFakeSelect
|
|
496
511
|
labelText="Selectbox with country flags:"
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
512
|
+
:status="validationStatus"
|
|
513
|
+
:disabled="disabledStatus"
|
|
514
|
+
:selectData="fakeSelectCountriesData"
|
|
515
|
+
v-model="selectedCountry"
|
|
516
|
+
defaultOptionName="Select country:"
|
|
517
|
+
type="country"
|
|
503
518
|
/>
|
|
504
519
|
<CmdFakeSelect
|
|
505
520
|
labelText="Selectbox with colors:"
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
|
|
511
|
-
|
|
521
|
+
:status="validationStatus"
|
|
522
|
+
:disabled="disabledStatus"
|
|
523
|
+
:selectData="fakeSelectColorsData"
|
|
524
|
+
v-model="selectedColor"
|
|
525
|
+
required="required"
|
|
526
|
+
type="color"
|
|
512
527
|
/>
|
|
513
528
|
</div>
|
|
514
529
|
|
|
@@ -663,13 +678,15 @@
|
|
|
663
678
|
checkboxes with values: {{ checkboxValues }}
|
|
664
679
|
</p>
|
|
665
680
|
|
|
666
|
-
<h3 id="section-toggle-darkmode">
|
|
667
|
-
|
|
668
|
-
|
|
669
|
-
|
|
670
|
-
|
|
671
|
-
<
|
|
672
|
-
|
|
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
|
+
/>
|
|
673
690
|
|
|
674
691
|
<h2>Checkboxes and Radiobuttons</h2>
|
|
675
692
|
<h3>Checkboxes [native]</h3>
|
|
@@ -811,13 +828,17 @@
|
|
|
811
828
|
<!-- end checkboxes and radiobuttons -->
|
|
812
829
|
|
|
813
830
|
<!-- begin input-groups -->
|
|
814
|
-
<
|
|
815
|
-
|
|
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>
|
|
816
836
|
<CmdInputGroup
|
|
817
|
-
|
|
818
|
-
|
|
819
|
-
|
|
820
|
-
:
|
|
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"
|
|
821
842
|
>
|
|
822
843
|
<CmdFormElement
|
|
823
844
|
element="input"
|
|
@@ -826,7 +847,7 @@
|
|
|
826
847
|
id="input-group-radiobutton"
|
|
827
848
|
name="radiogroup2"
|
|
828
849
|
inputValue="radiobuttonValue1"
|
|
829
|
-
v-model="
|
|
850
|
+
v-model="inputGroup"
|
|
830
851
|
:status="validationStatus"
|
|
831
852
|
:disabled="disabledStatus"
|
|
832
853
|
/>
|
|
@@ -837,62 +858,15 @@
|
|
|
837
858
|
id="input-group-radiobutton"
|
|
838
859
|
name="radiogroup2"
|
|
839
860
|
inputValue="radiobuttonValue2"
|
|
840
|
-
v-model="
|
|
861
|
+
v-model="inputGroup"
|
|
841
862
|
:status="validationStatus"
|
|
842
863
|
:disabled="disabledStatus"
|
|
843
864
|
/>
|
|
844
865
|
</CmdInputGroup>
|
|
845
|
-
<dl>
|
|
846
|
-
<dt>Selected value(s):</dt>
|
|
847
|
-
<dd>
|
|
848
|
-
<output>{{ inputGroupRadio }}</output>
|
|
849
|
-
</dd>
|
|
850
|
-
</dl>
|
|
851
|
-
<CmdInputGroup
|
|
852
|
-
labelText="Grouplabel for radio-group given by property:"
|
|
853
|
-
:required="true"
|
|
854
|
-
:inputElements="idForReplacedInputsInInputGroup('radio-group')"
|
|
855
|
-
inputTypes="radio"
|
|
856
|
-
v-model="inputGroupCheckbox"
|
|
857
|
-
:status="validationStatus"
|
|
858
|
-
:disabled="disabledStatus"
|
|
859
|
-
/>
|
|
860
866
|
<dl>
|
|
861
867
|
<dt>Selected value:</dt>
|
|
862
868
|
<dd>
|
|
863
|
-
<output>{{
|
|
864
|
-
</dd>
|
|
865
|
-
</dl>
|
|
866
|
-
<h3>Input Group with Checkboxes/Radiobuttons (replaced)</h3>
|
|
867
|
-
<CmdInputGroup
|
|
868
|
-
labelText="Grouplabel for radio-group styled as replaced-input-type:"
|
|
869
|
-
:inputElements="idForReplacedInputsInInputGroup('replaced-radio-group')"
|
|
870
|
-
inputTypes="radio"
|
|
871
|
-
v-model="inputGroupValueReplaceInputTypeRadio"
|
|
872
|
-
:replaceInputType="true"
|
|
873
|
-
:status="validationStatus"
|
|
874
|
-
:disabled="disabledStatus"
|
|
875
|
-
/>
|
|
876
|
-
<dl>
|
|
877
|
-
<dt>Selected value:</dt>
|
|
878
|
-
<dd>
|
|
879
|
-
<output>{{ inputGroupValueReplaceInputTypeRadio }}</output>
|
|
880
|
-
</dd>
|
|
881
|
-
</dl>
|
|
882
|
-
<CmdInputGroup
|
|
883
|
-
labelText="Grouplabel for checkbox-group styled as replaced-input-type:"
|
|
884
|
-
:inputElements="idForReplacedInputsInInputGroup('checkbox-group')"
|
|
885
|
-
inputTypes="checkbox"
|
|
886
|
-
v-model="inputGroupValueReplaceInputTypeCheckbox"
|
|
887
|
-
:replaceInputType="true"
|
|
888
|
-
:required="true"
|
|
889
|
-
:status="validationStatus"
|
|
890
|
-
:disabled="disabledStatus"
|
|
891
|
-
/>
|
|
892
|
-
<dl>
|
|
893
|
-
<dt>Selected value(s):</dt>
|
|
894
|
-
<dd>
|
|
895
|
-
<output>{{ inputGroupValueReplaceInputTypeCheckbox }}</output>
|
|
869
|
+
<output>{{ inputGroup }}</output>
|
|
896
870
|
</dd>
|
|
897
871
|
</dl>
|
|
898
872
|
<h3>Input Groups with Checkboxes/Radiobuttons (toggle-switches)</h3>
|
|
@@ -962,20 +936,22 @@
|
|
|
962
936
|
</dl>
|
|
963
937
|
</fieldset>
|
|
964
938
|
<!-- end fieldset -->
|
|
965
|
-
<div class="
|
|
966
|
-
<small
|
|
967
|
-
<
|
|
968
|
-
|
|
969
|
-
|
|
970
|
-
|
|
971
|
-
|
|
972
|
-
|
|
973
|
-
|
|
974
|
-
|
|
975
|
-
|
|
976
|
-
<
|
|
977
|
-
|
|
978
|
-
|
|
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>
|
|
979
955
|
</div>
|
|
980
956
|
</CmdForm>
|
|
981
957
|
</CmdWidthLimitationWrapper>
|
|
@@ -987,16 +963,34 @@
|
|
|
987
963
|
|
|
988
964
|
<!-- begin bank account data ----------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
989
965
|
<CmdWidthLimitationWrapper>
|
|
990
|
-
<h2 class="headline-demopage" id="section-bank-account-data">
|
|
991
|
-
|
|
992
|
-
|
|
993
|
-
|
|
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
|
+
/>
|
|
994
977
|
</CmdWidthLimitationWrapper>
|
|
995
978
|
<!-- end bank account data ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
996
979
|
|
|
997
980
|
<!-- begin boxes ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
998
981
|
<CmdWidthLimitationWrapper>
|
|
999
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
|
+
/>
|
|
1000
994
|
<CmdBoxWrapper
|
|
1001
995
|
:useFlexbox="true"
|
|
1002
996
|
:cmdHeadline="{headlineText: 'Boxes in BoxWrapper with flexbox', headlineLevel: 3}"
|
|
@@ -1015,7 +1009,7 @@
|
|
|
1015
1009
|
:cmdHeadline="{headlineText: 'Different examples of content-boxes (in BoxWrapper)', headlineLevel: 3}"
|
|
1016
1010
|
>
|
|
1017
1011
|
<CmdBox
|
|
1018
|
-
:
|
|
1012
|
+
:stretchVertically="false"
|
|
1019
1013
|
:cmdHeadline="{headlineText: 'Box with cutoff text', headlineLevel: 4}"
|
|
1020
1014
|
:useSlots="['body']"
|
|
1021
1015
|
:cutoff-text-lines="4"
|
|
@@ -1025,7 +1019,7 @@
|
|
|
1025
1019
|
by the property 'cutoffTextLines' and be toggled by a link below.
|
|
1026
1020
|
</template>
|
|
1027
1021
|
</CmdBox>
|
|
1028
|
-
<CmdBox :useSlots="['header', 'body', 'footer']">
|
|
1022
|
+
<CmdBox :useSlots="['header', 'body', 'footer']" :allowContentToScroll="true">
|
|
1029
1023
|
<template v-slot:header>
|
|
1030
1024
|
<h4>
|
|
1031
1025
|
Texts given by slots
|
|
@@ -1038,6 +1032,7 @@
|
|
|
1038
1032
|
<p>
|
|
1039
1033
|
<strong>Header, Content/Body and Footer of this box are given by slots.</strong>
|
|
1040
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>
|
|
1041
1036
|
</template>
|
|
1042
1037
|
<template v-slot:footer>
|
|
1043
1038
|
<p>
|
|
@@ -1066,13 +1061,6 @@
|
|
|
1066
1061
|
</p>
|
|
1067
1062
|
</template>
|
|
1068
1063
|
</CmdBox>
|
|
1069
|
-
<CmdBox
|
|
1070
|
-
:use-default-padding="true"
|
|
1071
|
-
:cmdHeadline="{headlineText: 'Collapsible box', headlineLevel: 4}"
|
|
1072
|
-
:image="{src: 'media/images/content-images/landscape-medium.jpg', altText: 'ALternative text'}"
|
|
1073
|
-
textBody="This is some text given by property."
|
|
1074
|
-
:collapsible="true"
|
|
1075
|
-
/>
|
|
1076
1064
|
<CmdBox
|
|
1077
1065
|
:useSlots="['header', 'body']"
|
|
1078
1066
|
:use-default-padding="false"
|
|
@@ -1152,8 +1140,13 @@
|
|
|
1152
1140
|
|
|
1153
1141
|
<!-- begin breadcrumbs ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1154
1142
|
<CmdWidthLimitationWrapper inner-component="div">
|
|
1155
|
-
<h2 class="headline-demopage" id="section-breadcrumbs">
|
|
1156
|
-
|
|
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"/>
|
|
1157
1150
|
</CmdWidthLimitationWrapper>
|
|
1158
1151
|
<!-- end breadcrumbs ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1159
1152
|
|
|
@@ -1166,20 +1159,6 @@
|
|
|
1166
1159
|
</CmdWidthLimitationWrapper>
|
|
1167
1160
|
<!-- end cookie-disclaimer ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1168
1161
|
|
|
1169
|
-
<!-- begin headline ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1170
|
-
<CmdWidthLimitationWrapper>
|
|
1171
|
-
<h2 class="headline-demopage" id="section-headlines">Headlines</h2>
|
|
1172
|
-
<CmdHeadline :headlineIcon="{iconClass: 'icon-home'}" pre-headline-text="Pre-headline" headlineText="Headline level 1" :headlineLevel="1"/>
|
|
1173
|
-
<CmdHeadline pre-headline-text="Pre-headline" :headlineIcon="{iconClass: 'icon-home'}" headlineText="Headline level 2" :headlineLevel="2"/>
|
|
1174
|
-
<CmdHeadline pre-headline-text="Pre-headline" :headlineIcon="{iconClass: 'icon-home'}" headlineText="Headline level 3" :headlineLevel="3"/>
|
|
1175
|
-
<CmdHeadline pre-headline-text="Pre-headline" :headlineIcon="{iconClass: 'icon-home'}" headlineText="Headline level 4" :headlineLevel="4"/>
|
|
1176
|
-
<CmdHeadline pre-headline-text="Pre-headline" :headlineIcon="{iconClass: 'icon-home'}" headlineText="Headline level 5" :headlineLevel="5"/>
|
|
1177
|
-
<CmdHeadline pre-headline-text="Pre-headline" :headlineIcon="{iconClass: 'icon-home'}" headlineText="Headline level 6" :headlineLevel="6"/>
|
|
1178
|
-
<CmdHeadline pre-headline-text="Pre-headline" headlineText="Headline level 1 (center)" text-align="center" :headlineLevel="1"/>
|
|
1179
|
-
<CmdHeadline pre-headline-text="Pre-headline" headlineText="Headline level 1 (right)" text-align="right" :headlineLevel="1"/>
|
|
1180
|
-
</CmdWidthLimitationWrapper>
|
|
1181
|
-
<!-- end headline ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1182
|
-
|
|
1183
1162
|
<!-- begin forms ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1184
1163
|
<CmdWidthLimitationWrapper>
|
|
1185
1164
|
<h2 class="headline-demopage" id="section-forms">Forms</h2>
|
|
@@ -1230,7 +1209,8 @@
|
|
|
1230
1209
|
<CmdWidthLimitationWrapper>
|
|
1231
1210
|
<h2 class="headline-demopage" id="section-fancybox">Fancybox</h2>
|
|
1232
1211
|
<h3>FancyBox with text</h3>
|
|
1233
|
-
<a href="#" @click.prevent="showFancyBox('text','Some text', 'FancyBox with text')">Open FancyBox
|
|
1212
|
+
<a href="#" @click.prevent="showFancyBox('text','Some text', 'FancyBox with text')">Open FancyBox
|
|
1213
|
+
with text</a>
|
|
1234
1214
|
<h3>FancyBox with large image given by url</h3>
|
|
1235
1215
|
<a href="#"
|
|
1236
1216
|
@click.prevent="showFancyBox('url', 'media/images/demo-images/large/landscape-01.jpg', 'FancyBox with large image given by url')"
|
|
@@ -1270,6 +1250,25 @@
|
|
|
1270
1250
|
</CmdWidthLimitationWrapper>
|
|
1271
1251
|
<!-- end google-maps ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1272
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
|
+
|
|
1273
1272
|
<!-- begin icons ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1274
1273
|
<CmdWidthLimitationWrapper>
|
|
1275
1274
|
<h2 class="headline-demopage" id="section-icons">Icons</h2>
|
|
@@ -1300,9 +1299,14 @@
|
|
|
1300
1299
|
|
|
1301
1300
|
<!-- begin images ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1302
1301
|
<CmdWidthLimitationWrapper>
|
|
1303
|
-
<h2 class="headline-demopage" id="section-image">
|
|
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>
|
|
1304
1307
|
<div class="flex-container">
|
|
1305
|
-
<CmdImage :image="imageData[0].image" :figcaption="imageData[0].figcaption"
|
|
1308
|
+
<CmdImage ref="CmdImage" :image="imageData[0].image" :figcaption="imageData[0].figcaption"
|
|
1309
|
+
v-bind="cmdImageSettingsData"/>
|
|
1306
1310
|
<CmdImage :image="imageData[1].image" :figcaption="imageData[1].figcaption"/>
|
|
1307
1311
|
</div>
|
|
1308
1312
|
</CmdWidthLimitationWrapper>
|
|
@@ -1310,14 +1314,24 @@
|
|
|
1310
1314
|
|
|
1311
1315
|
<!-- begin image-gallery------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1312
1316
|
<CmdWidthLimitationWrapper>
|
|
1313
|
-
<h2 class="headline-demopage" id="section-image-gallery">
|
|
1314
|
-
|
|
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
|
+
/>
|
|
1315
1327
|
</CmdWidthLimitationWrapper>
|
|
1316
1328
|
<!-- end image-gallery ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1317
1329
|
|
|
1318
1330
|
<!-- begin image-zoom ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1319
1331
|
<CmdWidthLimitationWrapper>
|
|
1320
|
-
<h2 class="headline-demopage" id="section-image-zoom">
|
|
1332
|
+
<h2 class="headline-demopage" id="section-image-zoom">
|
|
1333
|
+
Image-Zoom
|
|
1334
|
+
</h2>
|
|
1321
1335
|
<CmdImageZoom
|
|
1322
1336
|
:imageSmall="imageData[2].image"
|
|
1323
1337
|
:imageLarge="imageData[3].image"
|
|
@@ -1327,33 +1341,28 @@
|
|
|
1327
1341
|
|
|
1328
1342
|
<!-- begin list-of-links ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1329
1343
|
<CmdWidthLimitationWrapper>
|
|
1330
|
-
<h2 class="headline-demopage" id="section-list-of-links">
|
|
1331
|
-
|
|
1332
|
-
|
|
1333
|
-
|
|
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>
|
|
1334
1349
|
<CmdListOfLinks
|
|
1335
|
-
|
|
1336
|
-
|
|
1350
|
+
ref="CmdListOfLinks"
|
|
1351
|
+
v-bind="cmdListOfLinksSettingsData"
|
|
1337
1352
|
:links="listOfLinksData"
|
|
1338
|
-
:cmdHeadline="{
|
|
1339
|
-
headlineText: 'Headline',
|
|
1340
|
-
headlineLevel: 5
|
|
1341
|
-
}"
|
|
1342
1353
|
/>
|
|
1343
|
-
<h3>Horizontal (aligned center)</h3>
|
|
1344
|
-
<CmdListOfLinks orientation="horizontal" align="center" :links="listOfLinksData"/>
|
|
1345
|
-
<h3>Horizontal (aligned right)</h3>
|
|
1346
|
-
<CmdListOfLinks orientation="horizontal" align="right" :links="listOfLinksData" @click="clickOnListOfLinks"/>
|
|
1347
|
-
<h3>Large icons</h3>
|
|
1348
|
-
<CmdListOfLinks orientation="horizontal" :links="listOfLinksData" :largeIcons="true"/>
|
|
1349
1354
|
</CmdWidthLimitationWrapper>
|
|
1350
1355
|
<!-- end list-of-links ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1351
1356
|
|
|
1352
1357
|
<!-- begin login-form ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1353
1358
|
<CmdWidthLimitationWrapper>
|
|
1354
|
-
<h2 class="headline-demopage" id="section-login-form">
|
|
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>
|
|
1355
1364
|
<CmdForm :use-validation="true" :use-fieldset="false">
|
|
1356
|
-
<CmdLoginForm v-
|
|
1365
|
+
<CmdLoginForm ref="CmdLoginForm" v-bind="cmdListOfLinksSettingsData" v-model="loginData"/>
|
|
1357
1366
|
</CmdForm>
|
|
1358
1367
|
<p>LoginData: {{ loginData }}</p>
|
|
1359
1368
|
</CmdWidthLimitationWrapper>
|
|
@@ -1361,10 +1370,14 @@
|
|
|
1361
1370
|
|
|
1362
1371
|
<!-- begin main-navigation ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1363
1372
|
<CmdWidthLimitationWrapper>
|
|
1364
|
-
<h2 class="headline-demopage" id="section-main-navigation">
|
|
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>
|
|
1365
1378
|
<CmdMainNavigation
|
|
1366
|
-
|
|
1367
|
-
|
|
1379
|
+
ref="CmdMainNavigation"
|
|
1380
|
+
v-bind="cmdMainNavigationSettingsData"
|
|
1368
1381
|
:navigationEntries="navigationData.navigationEntries"
|
|
1369
1382
|
/>
|
|
1370
1383
|
</CmdWidthLimitationWrapper>
|
|
@@ -1372,21 +1385,16 @@
|
|
|
1372
1385
|
|
|
1373
1386
|
<!-- begin multistep-form-progress-bar ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1374
1387
|
<CmdWidthLimitationWrapper>
|
|
1375
|
-
<h2 class="headline-demopage" id="section-multistep-form-progress-bar">
|
|
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>
|
|
1376
1393
|
<h3>Steps with icons</h3>
|
|
1377
1394
|
<CmdMultistepFormProgressBar
|
|
1395
|
+
ref="CmdMultistepFormProgressBar"
|
|
1378
1396
|
:multisteps="multistepsData.withIcon"
|
|
1379
|
-
|
|
1380
|
-
@click="showPageMultistep = $event.index + 1"
|
|
1381
|
-
/>
|
|
1382
|
-
<div>
|
|
1383
|
-
<p>Page {{ showPageMultistep }}</p>
|
|
1384
|
-
</div>
|
|
1385
|
-
<h3>Steps with number</h3>
|
|
1386
|
-
<CmdMultistepFormProgressBar
|
|
1387
|
-
:showStepNumber="true"
|
|
1388
|
-
:multisteps="multistepsData.withoutIcon"
|
|
1389
|
-
separatorIconClass="icon-single-arrow-right"
|
|
1397
|
+
v-bind="cmdMultistepFormProgressBarSettingsData"
|
|
1390
1398
|
@click="showPageMultistep = $event.index + 1"
|
|
1391
1399
|
/>
|
|
1392
1400
|
<div>
|
|
@@ -1397,24 +1405,33 @@
|
|
|
1397
1405
|
|
|
1398
1406
|
<!-- begin newsletter-subscription ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1399
1407
|
<CmdWidthLimitationWrapper>
|
|
1400
|
-
<h2 class="headline-demopage" id="section-newsletter-subscription">
|
|
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>
|
|
1401
1413
|
<CmdForm textLegend="Stay-up-to-date" :use-fieldset="false">
|
|
1402
1414
|
<CmdNewsletterSubscription
|
|
1415
|
+
ref="CmdNewsletterSubscription"
|
|
1416
|
+
v-bind="cmdNewsletterSubscriptionSettingsData"
|
|
1403
1417
|
v-model="newsletter"
|
|
1404
|
-
|
|
1405
|
-
|
|
1418
|
+
@buttonClick="submitNewsletterRegistration"
|
|
1419
|
+
/>
|
|
1406
1420
|
</CmdForm>
|
|
1407
1421
|
</CmdWidthLimitationWrapper>
|
|
1408
1422
|
<!-- end newsletter-subscription ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1409
1423
|
|
|
1410
1424
|
<!-- begin opening-hours ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1411
1425
|
<CmdWidthLimitationWrapper>
|
|
1412
|
-
<h2 class="headline-demopage" id="section-opening-hours">
|
|
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>
|
|
1413
1431
|
<CmdOpeningHours
|
|
1432
|
+
ref="CmdOpeningHours"
|
|
1433
|
+
v-bind="cmdOpeningHoursSettingsData"
|
|
1414
1434
|
:openingHours="openingHoursData"
|
|
1415
|
-
:cmdHeadline="{headlineText: 'Opening hours', headlineLevel: 6}"
|
|
1416
|
-
textHolidaysClosed="Closed on holidays"
|
|
1417
|
-
textMiscInfo="Miscellaneous information"
|
|
1418
1435
|
:checkInterval="0"
|
|
1419
1436
|
/>
|
|
1420
1437
|
</CmdWidthLimitationWrapper>
|
|
@@ -1422,24 +1439,17 @@
|
|
|
1422
1439
|
|
|
1423
1440
|
<!-- begin pagination ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1424
1441
|
<CmdWidthLimitationWrapper>
|
|
1425
|
-
<h2 class="headline-demopage" id="section-pagination">
|
|
1426
|
-
|
|
1427
|
-
|
|
1428
|
-
|
|
1429
|
-
</
|
|
1430
|
-
<CmdPagination
|
|
1431
|
-
:pages="4"
|
|
1432
|
-
:itemsPerPage="1"
|
|
1433
|
-
@click="showPagePager = $event"
|
|
1434
|
-
/>
|
|
1435
|
-
<h3>Button-view</h3>
|
|
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>
|
|
1436
1447
|
<div>
|
|
1437
1448
|
<p>Page {{ showPagePager }}</p>
|
|
1438
1449
|
</div>
|
|
1439
1450
|
<CmdPagination
|
|
1440
|
-
|
|
1441
|
-
|
|
1442
|
-
link-type="button"
|
|
1451
|
+
ref="CmdPagination"
|
|
1452
|
+
v-bind="cmdPaginationSettingsData"
|
|
1443
1453
|
@click="showPagePager = $event"
|
|
1444
1454
|
/>
|
|
1445
1455
|
</CmdWidthLimitationWrapper>
|
|
@@ -1456,22 +1466,17 @@
|
|
|
1456
1466
|
|
|
1457
1467
|
<!-- begin site-header ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1458
1468
|
<CmdWidthLimitationWrapper>
|
|
1459
|
-
<h2 class="headline-demopage" id="section-site-header">
|
|
1460
|
-
|
|
1461
|
-
|
|
1462
|
-
|
|
1463
|
-
|
|
1464
|
-
:sticky="false"
|
|
1465
|
-
/>
|
|
1466
|
-
<h3>Header with navigation inline with logo</h3>
|
|
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>
|
|
1467
1474
|
<CmdSiteHeader
|
|
1475
|
+
ref="CmdSiteHeader"
|
|
1476
|
+
v-bind="cmdSiteHeaderSettingsData"
|
|
1468
1477
|
:cmdMainNavigation="navigationData"
|
|
1469
1478
|
:cmdCompanyLogo="companyLogoData"
|
|
1470
|
-
|
|
1471
|
-
:navigation-inline="true"
|
|
1472
|
-
/>
|
|
1473
|
-
<h3>Header with top-header-links, logo and navigation given by slot</h3>
|
|
1474
|
-
<CmdSiteHeader :sticky="false">
|
|
1479
|
+
>
|
|
1475
1480
|
<template v-slot:topheader>
|
|
1476
1481
|
<CmdListOfLinks
|
|
1477
1482
|
:links="listOfLinksData"
|
|
@@ -1479,35 +1484,25 @@
|
|
|
1479
1484
|
align="right"
|
|
1480
1485
|
/>
|
|
1481
1486
|
</template>
|
|
1482
|
-
<template v-slot:logo>
|
|
1483
|
-
<CmdCompanyLogo
|
|
1484
|
-
:link="companyLogoData.link"
|
|
1485
|
-
altText="CoManD Logo"
|
|
1486
|
-
:pathDefaultLogo="companyLogoData.pathDefaultLogo"
|
|
1487
|
-
:pathDarkmodeLogo="companyLogoData.pathDarkmodeLogo"
|
|
1488
|
-
/>
|
|
1489
|
-
</template>
|
|
1490
|
-
<template v-slot:navigation>
|
|
1491
|
-
<CmdMainNavigation
|
|
1492
|
-
:stretchMainItems="false"
|
|
1493
|
-
:persistOnMobile="false"
|
|
1494
|
-
:navigationEntries="navigationData.navigationEntries"
|
|
1495
|
-
/>
|
|
1496
|
-
</template>
|
|
1497
1487
|
</CmdSiteHeader>
|
|
1498
1488
|
</CmdWidthLimitationWrapper>
|
|
1499
1489
|
<!-- end site-header ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1500
1490
|
|
|
1501
1491
|
<!-- begin site-search ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1502
1492
|
<CmdWidthLimitationWrapper>
|
|
1503
|
-
<h2 class="headline-demopage" id="section-site-search">
|
|
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>
|
|
1504
1498
|
<CmdSiteSearch
|
|
1499
|
+
ref="CmdSiteSearch"
|
|
1500
|
+
v-bind="cmdSiteSearchSettingsData"
|
|
1505
1501
|
v-model:modelValueInput1="siteSearchInput1"
|
|
1506
1502
|
v-model:modelValueInput2="siteSearchInput2"
|
|
1507
1503
|
v-model:modelValueRadius="radius"
|
|
1508
1504
|
v-model:modelValueSearchFilters="filters"
|
|
1509
1505
|
@search="siteSearchOutput"
|
|
1510
|
-
textLegend="Search"
|
|
1511
1506
|
:cmdFakeSelect="siteSearchFilters"
|
|
1512
1507
|
/>
|
|
1513
1508
|
</CmdWidthLimitationWrapper>
|
|
@@ -1515,34 +1510,30 @@
|
|
|
1515
1510
|
|
|
1516
1511
|
<!-- begin slideshow ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1517
1512
|
<CmdWidthLimitationWrapper>
|
|
1518
|
-
<h2 class="headline-demopage" id="section-slideshow">
|
|
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>
|
|
1519
1518
|
<CmdSlideshow
|
|
1519
|
+
ref="CmdSlideshow"
|
|
1520
|
+
v-bind="cmdSlideshowSettingsData"
|
|
1520
1521
|
:slideshow-items="slideshowData"
|
|
1521
|
-
:showCounter="true"
|
|
1522
|
-
:autoplay="true"
|
|
1523
1522
|
/>
|
|
1524
1523
|
</CmdWidthLimitationWrapper>
|
|
1525
1524
|
<!-- end slideshow ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1526
1525
|
|
|
1527
1526
|
<!-- begin social-networks ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1528
1527
|
<CmdWidthLimitationWrapper>
|
|
1529
|
-
<h2 class="headline-demopage" id="section-social-networks">
|
|
1530
|
-
|
|
1531
|
-
|
|
1532
|
-
|
|
1533
|
-
|
|
1534
|
-
:useGap="false"
|
|
1535
|
-
/>
|
|
1536
|
-
<h3>Without user confirmation (buttons with gap, text aligned right)</h3>
|
|
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>
|
|
1537
1533
|
<CmdSocialNetworks
|
|
1534
|
+
ref="CmdSocialNetworks"
|
|
1535
|
+
v-bind="cmdSocialNetworksSettingsData"
|
|
1538
1536
|
:networks="socialNetworksData"
|
|
1539
|
-
:userMustAcceptDataPrivacy="false"
|
|
1540
|
-
/>
|
|
1541
|
-
<h3>Without user confirmation (buttons with gap, text aligned left)</h3>
|
|
1542
|
-
<CmdSocialNetworks
|
|
1543
|
-
:networks="socialNetworksData"
|
|
1544
|
-
:userMustAcceptDataPrivacy="false"
|
|
1545
|
-
textAlign="left"
|
|
1546
1537
|
/>
|
|
1547
1538
|
</CmdWidthLimitationWrapper>
|
|
1548
1539
|
<!-- end social-networks ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
@@ -1559,11 +1550,14 @@
|
|
|
1559
1550
|
|
|
1560
1551
|
<!-- begin system-message ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1561
1552
|
<CmdWidthLimitationWrapper>
|
|
1562
|
-
<h2 class="headline-demopage" id="section-system-message">
|
|
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>
|
|
1563
1558
|
<CmdSystemMessage
|
|
1564
|
-
|
|
1565
|
-
|
|
1566
|
-
systemMessage="This is an error message!"
|
|
1559
|
+
ref="CmdSystemMessage"
|
|
1560
|
+
v-bind="cmdSystemMessageSettingsData"
|
|
1567
1561
|
:iconMessage="{iconClass: 'icon-error-circle', show: true}">
|
|
1568
1562
|
<ul>
|
|
1569
1563
|
<li>Error #1</li>
|
|
@@ -1571,48 +1565,38 @@
|
|
|
1571
1565
|
<li>Error #3</li>
|
|
1572
1566
|
</ul>
|
|
1573
1567
|
</CmdSystemMessage>
|
|
1574
|
-
<CmdSystemMessage
|
|
1575
|
-
validationStatus="warning"
|
|
1576
|
-
:fullWidth="true"
|
|
1577
|
-
systemMessage="This is a warning message!">
|
|
1578
|
-
<p>This is additional text!</p>
|
|
1579
|
-
</CmdSystemMessage>
|
|
1580
|
-
<CmdSystemMessage
|
|
1581
|
-
validationStatus="success"
|
|
1582
|
-
:fullWidth="true"
|
|
1583
|
-
systemMessage="This is a success message!"
|
|
1584
|
-
:iconMessage="{iconClass: 'icon-check-circle', show: true}">
|
|
1585
|
-
<p>This is additional text!</p>
|
|
1586
|
-
</CmdSystemMessage>
|
|
1587
|
-
<CmdSystemMessage
|
|
1588
|
-
validationStatus="info"
|
|
1589
|
-
:fullWidth="true"
|
|
1590
|
-
systemMessage="This is an info message!"
|
|
1591
|
-
:iconMessage="{iconClass: 'icon-info-circle', show: true}">
|
|
1592
|
-
<p>This is additional text!</p>
|
|
1593
|
-
</CmdSystemMessage>
|
|
1594
1568
|
</CmdWidthLimitationWrapper>
|
|
1595
1569
|
<!-- end system-message ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1596
1570
|
|
|
1597
1571
|
<!-- begin tables ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1598
1572
|
<CmdWidthLimitationWrapper>
|
|
1599
|
-
<h2 class="headline-demopage" id="section-tables">
|
|
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>
|
|
1600
1578
|
<h3>Table as wide as its content (with caption)</h3>
|
|
1601
|
-
<CmdTable
|
|
1602
|
-
|
|
1603
|
-
|
|
1579
|
+
<CmdTable
|
|
1580
|
+
ref="CmdTable"
|
|
1581
|
+
v-bind="cmdTableSettingsData"
|
|
1582
|
+
:table-data="tableDataLarge"
|
|
1583
|
+
/>
|
|
1604
1584
|
<h3>Table as wide as possible</h3>
|
|
1605
|
-
<CmdTable :collapsible="true" :fullWidthOnDefault="false" :userCanToggleWidth="true"
|
|
1585
|
+
<CmdTable :collapsible="true" :fullWidthOnDefault="false" :userCanToggleWidth="true"
|
|
1586
|
+
:table-data="tableDataLarge"/>
|
|
1606
1587
|
</CmdWidthLimitationWrapper>
|
|
1607
1588
|
<!-- end tables ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1608
1589
|
|
|
1609
1590
|
<!-- begin tabs ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1610
1591
|
<CmdWidthLimitationWrapper>
|
|
1611
|
-
<h2 class="headline-demopage" id="section-tabs">
|
|
1612
|
-
|
|
1613
|
-
|
|
1614
|
-
|
|
1615
|
-
<CmdTabs
|
|
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">
|
|
1616
1600
|
<template v-slot:tab-content-0>
|
|
1617
1601
|
<h4>Tab 1 headline</h4>
|
|
1618
1602
|
<p>Content</p>
|
|
@@ -1634,9 +1618,15 @@
|
|
|
1634
1618
|
|
|
1635
1619
|
<!-- begin text-image-block ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1636
1620
|
<CmdWidthLimitationWrapper>
|
|
1637
|
-
<h2 class="headline-demopage" id="section-text-image-block">
|
|
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>
|
|
1638
1626
|
<div class="flex-container">
|
|
1639
1627
|
<CmdTextImageBlock
|
|
1628
|
+
ref="CmdTextImageBlock"
|
|
1629
|
+
v-bind="cmdTextImageBlockSettingsData"
|
|
1640
1630
|
:cmdHeadline="{headlineText: 'Text-Image-Block with image', headlineLevel: 3}"
|
|
1641
1631
|
:cmdImage='{
|
|
1642
1632
|
"image": {
|
|
@@ -1663,27 +1653,16 @@
|
|
|
1663
1653
|
|
|
1664
1654
|
<!-- begin thumbnail-scroller ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1665
1655
|
<CmdWidthLimitationWrapper>
|
|
1666
|
-
<h2 class="headline-demopage" id="section-thumbnail-scroller">
|
|
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>
|
|
1667
1661
|
<div class="inline-size">
|
|
1668
|
-
<h3>Thumbnail-Scroller with images (opens fancybox)</h3>
|
|
1669
|
-
<CmdThumbnailScroller
|
|
1670
|
-
:thumbnail-scroller-items="thumbnailScrollerImagesData"
|
|
1671
|
-
/>
|
|
1672
|
-
<h3>Thumbnail-Scroller with text (opens url)</h3>
|
|
1673
1662
|
<CmdThumbnailScroller
|
|
1674
|
-
|
|
1675
|
-
|
|
1676
|
-
|
|
1677
|
-
:fullWidth="true"
|
|
1678
|
-
/>
|
|
1679
|
-
<h3>Thumbnail-Scroller with text (emits click-event)</h3>
|
|
1680
|
-
<CmdThumbnailScroller
|
|
1681
|
-
:thumbnail-scroller-items="thumbnailScrollerTextData"
|
|
1682
|
-
contentType="text"
|
|
1683
|
-
executeOnClick="emit"
|
|
1684
|
-
@click="onClick"
|
|
1685
|
-
:largeIcons="true"
|
|
1686
|
-
:fullWidth="true"
|
|
1663
|
+
ref="CmdThumbnailScroller"
|
|
1664
|
+
v-bind="cmdThumbnailScrollerSettingsData"
|
|
1665
|
+
:thumbnail-scroller-items="thumbnailScrollerData"
|
|
1687
1666
|
/>
|
|
1688
1667
|
</div>
|
|
1689
1668
|
</CmdWidthLimitationWrapper>
|
|
@@ -1691,13 +1670,21 @@
|
|
|
1691
1670
|
|
|
1692
1671
|
<!-- begin tooltip ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1693
1672
|
<CmdWidthLimitationWrapper>
|
|
1694
|
-
<h2 class="headline-demopage" id="section-tooltip">
|
|
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>
|
|
1695
1678
|
<p>
|
|
1696
1679
|
<a href="#" @click.prevent id="show-on-hover">Show tooltip on hover!</a><br/>
|
|
1697
1680
|
<a href="#" @click.prevent id="show-with-delay">Show tooltip on hover with delay!</a><br/>
|
|
1698
1681
|
<a href="#" @click.prevent id="show-on-click" title="Native tooltip">Show tooltip on click!</a>
|
|
1699
1682
|
</p>
|
|
1700
|
-
<CmdTooltip
|
|
1683
|
+
<CmdTooltip
|
|
1684
|
+
ref="CmdTooltip"
|
|
1685
|
+
related-id="show-on-hover"
|
|
1686
|
+
v-bind="cmdTooltipSettingsData"
|
|
1687
|
+
>
|
|
1701
1688
|
Tooltip on hover
|
|
1702
1689
|
</CmdTooltip>
|
|
1703
1690
|
<CmdTooltip :delay-to-show-tooltip="2000" related-id="show-with-delay">
|
|
@@ -1711,25 +1698,14 @@
|
|
|
1711
1698
|
|
|
1712
1699
|
<!-- begin upload-form ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1713
1700
|
<CmdWidthLimitationWrapper>
|
|
1714
|
-
<h2 class="headline-demopage" id="section-upload-form">
|
|
1715
|
-
|
|
1716
|
-
|
|
1717
|
-
|
|
1718
|
-
|
|
1719
|
-
:allowMultipleFileUploads="true"
|
|
1720
|
-
:advancedMode="false"
|
|
1721
|
-
textLegend="Simple upload form"
|
|
1722
|
-
@error="showError"
|
|
1723
|
-
:uploadOptions="{url: 'http://localhost:8888'}"
|
|
1724
|
-
/>
|
|
1725
|
-
<h3>Advanced mode</h3>
|
|
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>
|
|
1726
1706
|
<CmdUploadForm
|
|
1727
|
-
|
|
1728
|
-
|
|
1729
|
-
:allowedFileExtensions="['jpg', 'png']"
|
|
1730
|
-
:allowMultipleFileUploads="true"
|
|
1731
|
-
textLegend="Advanced upload form"
|
|
1732
|
-
:uploadOptions="{url: 'http://localhost:8888'}"
|
|
1707
|
+
ref="CmdUploadForm"
|
|
1708
|
+
v-bind="cmdUploadFormSettingsData"
|
|
1733
1709
|
/>
|
|
1734
1710
|
</CmdWidthLimitationWrapper>
|
|
1735
1711
|
<!-- end upload-form ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
@@ -1766,6 +1742,23 @@
|
|
|
1766
1742
|
<!-- end cookie-disclaimer ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1767
1743
|
</CmdFancyBox>
|
|
1768
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>
|
|
1769
1762
|
</div><!-- end #page-wrapper -->
|
|
1770
1763
|
</div>
|
|
1771
1764
|
</template>
|
|
@@ -1818,9 +1811,420 @@ export default {
|
|
|
1818
1811
|
name: "App",
|
|
1819
1812
|
data() {
|
|
1820
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: {},
|
|
1821
2224
|
selectedTemplate: "blank",
|
|
1822
2225
|
acceptedCookies: ["google-maps"],
|
|
1823
2226
|
showTooltip: false,
|
|
2227
|
+
showSettingsSidebar: false,
|
|
1824
2228
|
disabledStatus: undefined,
|
|
1825
2229
|
validationStatus: "",
|
|
1826
2230
|
loginData: {
|
|
@@ -1835,7 +2239,7 @@ export default {
|
|
|
1835
2239
|
inputSearch: "",
|
|
1836
2240
|
textarea: "",
|
|
1837
2241
|
inputGroupRadio: "radiobuttonValue1",
|
|
1838
|
-
|
|
2242
|
+
inputGroup: "website",
|
|
1839
2243
|
inputGroupValueReplaceInputTypeRadio: "phone",
|
|
1840
2244
|
inputGroupValueReplaceInputTypeCheckbox: ["phone"],
|
|
1841
2245
|
inputGroupValueToggleSwitchCheckbox: ["phone"],
|
|
@@ -1896,6 +2300,9 @@ export default {
|
|
|
1896
2300
|
inputPassword: "",
|
|
1897
2301
|
inputField1: "",
|
|
1898
2302
|
inputFieldRequired: "",
|
|
2303
|
+
componentName: "",
|
|
2304
|
+
componentProps: {},
|
|
2305
|
+
componentSettings: {},
|
|
1899
2306
|
checkboxValue: true,
|
|
1900
2307
|
checkboxRequiredValue: false,
|
|
1901
2308
|
checkboxValues: ["checkboxValue1"],
|
|
@@ -1922,7 +2329,8 @@ export default {
|
|
|
1922
2329
|
functions.validateSpecialCharacters(),
|
|
1923
2330
|
functions.validateCapitalLetters()
|
|
1924
2331
|
],
|
|
1925
|
-
|
|
2332
|
+
openLeftSidebar: true,
|
|
2333
|
+
openRightSidebar: false,
|
|
1926
2334
|
openBoxes: [0],
|
|
1927
2335
|
|
|
1928
2336
|
// assign data from json files to data-properties
|
|
@@ -1963,11 +2371,43 @@ export default {
|
|
|
1963
2371
|
computed: {
|
|
1964
2372
|
templateId() {
|
|
1965
2373
|
return "template-" + this.selectedTemplate
|
|
2374
|
+
},
|
|
2375
|
+
thumbnailScrollerData() {
|
|
2376
|
+
if (this.cmdThumbnailScrollerSettingsData.contentType === "image") {
|
|
2377
|
+
return this.thumbnailScrollerImagesData
|
|
2378
|
+
}
|
|
2379
|
+
return this.thumbnailScrollerTextData
|
|
1966
2380
|
}
|
|
1967
2381
|
},
|
|
1968
2382
|
methods: {
|
|
1969
|
-
|
|
1970
|
-
this.
|
|
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
|
|
1971
2411
|
},
|
|
1972
2412
|
openBox(boxIndex) {
|
|
1973
2413
|
this.openSidebar = true
|
|
@@ -2107,7 +2547,7 @@ export default {
|
|
|
2107
2547
|
}
|
|
2108
2548
|
</script>
|
|
2109
2549
|
|
|
2110
|
-
<style
|
|
2550
|
+
<style>
|
|
2111
2551
|
.list-status {
|
|
2112
2552
|
.active {
|
|
2113
2553
|
color: var(--text-color);
|
|
@@ -2116,9 +2556,20 @@ export default {
|
|
|
2116
2556
|
}
|
|
2117
2557
|
}
|
|
2118
2558
|
|
|
2119
|
-
main .cmd-width-limitation-wrapper:not(:last-
|
|
2559
|
+
main .cmd-width-limitation-wrapper:not(:last-child) {
|
|
2120
2560
|
border-bottom: var(--default-border);
|
|
2121
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
|
+
}
|
|
2122
2573
|
}
|
|
2123
2574
|
|
|
2124
2575
|
.cmd-sidebar {
|
|
@@ -2163,5 +2614,16 @@ main .cmd-width-limitation-wrapper:not(:last-of-type) {
|
|
|
2163
2614
|
gap: var(--default-gap);
|
|
2164
2615
|
padding: var(--default-padding);
|
|
2165
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
|
+
}
|
|
2166
2628
|
}
|
|
2167
2629
|
</style>
|