comand-component-library 4.3.26 → 4.3.27

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (49) hide show
  1. package/dist/comand-component-library.css +1 -1
  2. package/dist/comand-component-library.js +8552 -8431
  3. package/dist/styles/demopage-only.css +24 -0
  4. package/package.json +2 -2
  5. package/src/ComponentLibrary.vue +1923 -1881
  6. package/src/assets/data/text-image-block.json +3 -1
  7. package/src/assets/data/thumbnail-scroller-images.json +1 -1
  8. package/src/components/CmdAccordion.vue +1 -1
  9. package/src/components/CmdAddressData.vue +60 -72
  10. package/src/components/CmdBankAccountData.vue +55 -33
  11. package/src/components/CmdBasicForm.vue +19 -7
  12. package/src/components/CmdBox.vue +2 -0
  13. package/src/components/CmdBoxWrapper.vue +10 -0
  14. package/src/components/CmdBreadcrumbs.vue +10 -27
  15. package/src/components/CmdCompanyLogo.vue +3 -0
  16. package/src/components/CmdContainer.vue +8 -1
  17. package/src/components/CmdCookieDisclaimer.vue +5 -5
  18. package/src/components/CmdFakeSelect.vue +12 -1
  19. package/src/components/CmdFancyBox.vue +73 -85
  20. package/src/components/CmdFootnote.vue +2 -1
  21. package/src/components/CmdForm.vue +118 -160
  22. package/src/components/CmdFormFilters.vue +1 -0
  23. package/src/components/CmdGoogleMaps.vue +9 -2
  24. package/src/components/CmdHeadline.vue +10 -9
  25. package/src/components/CmdImage.vue +32 -17
  26. package/src/components/CmdImageGallery.vue +13 -8
  27. package/src/components/CmdLink.vue +20 -5
  28. package/src/components/CmdList.vue +7 -2
  29. package/src/components/CmdLoginForm.vue +156 -255
  30. package/src/components/CmdMailToolEntry.vue +2 -1
  31. package/src/components/CmdMultistepFormProgressBar.vue +2 -2
  32. package/src/components/CmdMultistepFormWrapper.vue +2 -6
  33. package/src/components/CmdOpeningHours.vue +14 -2
  34. package/src/components/CmdSidebar.vue +2 -2
  35. package/src/components/CmdSiteWrapper.vue +66 -58
  36. package/src/components/CmdSlideshow.vue +5 -0
  37. package/src/components/CmdSocialNetworks.vue +27 -17
  38. package/src/components/CmdSwitchLanguage.vue +16 -19
  39. package/src/components/CmdSystemMessage.vue +71 -66
  40. package/src/components/CmdTable.vue +42 -24
  41. package/src/components/CmdTabs.vue +15 -7
  42. package/src/components/CmdTag.vue +28 -23
  43. package/src/components/CmdTextImageBlock.vue +62 -53
  44. package/src/components/CmdThumbnailScroller.vue +18 -6
  45. package/src/components/CmdToast.vue +60 -17
  46. package/src/components/CmdToggleDarkMode.vue +31 -32
  47. package/src/components/CmdTooltip.vue +33 -20
  48. package/src/components/CmdUploadForm.vue +212 -183
  49. package/src/components/CmdWidthLimitationWrapper.vue +19 -3
package/src/ComponentLibrary.vue CHANGED
@@ -1,707 +1,681 @@
1
1
  <!--suppress HtmlUnknownTarget, NpmUsedModulesInstalled, JSUnresolvedVariable -->
2
2
  <template>
3
3
  <!-- begin .site-wrapper -->
4
- <div class="site-wrapper" :id="templateId" v-fancybox>
5
- <a id="anchor-back-to-top"></a>
6
- <CmdSidebar v-if="showLeftSidebar"
7
- :cmdHeadline="{ headlineText: 'Site Settings', headlineLevel: 3, textAlign: 'center' }"
8
- :openSidebar="openLeftSidebar" @toggle-sidebar="setOpenStatusLeftSidebar">
9
- <template #open>
10
- <CmdBoxWrapper :boxesPerRow="[1]" :allowMultipleExpandedBoxes="false"
11
- :allowUserToToggleOrientation="false" :openBoxesByDefault="openBoxes" :useGap="false">
12
- <template v-slot="slotProps">
13
- <!-- begin box template selection -->
14
- <CmdBox :use-slots="['body']" :collapsible="true"
15
- :cmdHeadline="{ headlineText: 'Template Settings', headlineLevel: 4, cmdIcon: { iconClass: 'icon-settings-template' } }"
16
- :openCollapsedBox="slotProps.boxIsOpen(0)"
17
- @toggleCollapse="slotProps.boxToggled(0, $event)">
18
- <template v-slot:body>
19
- <label for="select-template">
20
- <span>Select template</span>
21
- <select id="select-template" v-model="selectedTemplate">
22
- <option value="blank">Blank/Unstyled</option>
23
- <option value="material-web">Material-Web</option>
24
- <option value="tailwind">Tailwind</option>
25
- </select>
26
- </label>
27
- <div>
28
- <span>Color Scheme</span>
29
- <div class="input-wrapper">
30
- <label for="default-color-scheme">
31
- <input type="radio" id="default-color-scheme" name="color-scheme"
32
- v-model="colorScheme" value="none" />
33
- <span class="label-text">Color-Scheme by Browser/OS</span>
34
- </label>
35
- <label for="light-mode">
36
- <input type="radio" id="light-mode" name="color-scheme"
37
- v-model="colorScheme" value="light" />
38
- <span class="label-text">Light Mode</span>
39
- </label>
40
- <label for="dark-mode">
41
- <input type="radio" id="dark-mode" name="color-scheme" v-model="colorScheme"
42
- value="dark" />
43
- <span class="label-text">Dark Mode</span>
44
- </label>
4
+ <CmdSiteWrapper :id="templateId" :cmdSiteFooter="{show: false}">
5
+ <template v-slot:site-header>
6
+ <!-- begin site-header ------------------------------------------------------------------------------------------->
7
+ <CmdSiteHeader :resizeHeaderOnScroll="true" :cmdCompanyLogo="companyLogoData">
8
+ <template v-slot:topheader>
9
+ <!-- begin list ------------------------------------------------------------------------------------------->
10
+ <CmdList :links="listData" orientation="horizontal" align="right" />
11
+ <!-- end list ------------------------------------------------------------------------------------------->
12
+ </template>
13
+ </CmdSiteHeader>
14
+ <!-- end site-header ------------------------------------------------------------------------------------------->
15
+ </template>
16
+ <template v-slot:page-content>
17
+ <CmdSidebar v-if="showLeftSidebar"
18
+ :cmdHeadline="{ headlineText: 'Site Settings', headlineLevel: 5, textAlign: 'center' }"
19
+ :openSidebar="openLeftSidebar" @toggle-sidebar="setOpenStatusLeftSidebar">
20
+ <template #open>
21
+ <CmdBoxWrapper :boxesPerRow="[1]" :allowMultipleExpandedBoxes="false"
22
+ :allowUserToToggleOrientation="false" :openBoxesByDefault="openBoxes" :useGap="false">
23
+ <template v-slot="slotProps">
24
+ <!-- begin box template selection -->
25
+ <CmdBox :use-slots="['body']" :collapsible="true"
26
+ :cmdHeadline="{ headlineText: 'Template Settings', headlineLevel: 4, cmdIcon: { iconClass: 'icon-settings-template' } }"
27
+ :openCollapsedBox="slotProps.boxIsOpen(0)"
28
+ @toggleCollapse="slotProps.boxToggled(0, $event)">
29
+ <template v-slot:body>
30
+ <label for="select-template">
31
+ <span>Select template</span>
32
+ <select id="select-template" v-model="selectedTemplate">
33
+ <option value="blank">Blank/Unstyled</option>
34
+ <option value="material-web">Material-Web</option>
35
+ <option value="neumorphic">Neumorphic</option>
36
+ <option value="tailwind">Tailwind</option>
37
+ </select>
38
+ </label>
39
+ <div>
40
+ <span>Color Scheme</span>
41
+ <div class="input-wrapper">
42
+ <label for="default-color-scheme">
43
+ <input type="radio" id="default-color-scheme" name="color-scheme"
44
+ v-model="colorScheme" value="none" />
45
+ <span class="label-text">Color-Scheme by Browser/OS</span>
46
+ </label>
47
+ <label for="light-mode">
48
+ <input type="radio" id="light-mode" name="color-scheme"
49
+ v-model="colorScheme" value="light" />
50
+ <span class="label-text">Light Mode</span>
51
+ </label>
52
+ <label for="dark-mode">
53
+ <input type="radio" id="dark-mode" name="color-scheme"
54
+ v-model="colorScheme" value="dark" />
55
+ <span class="label-text">Dark Mode</span>
56
+ </label>
57
+ </div>
45
58
  </div>
46
- </div>
47
- </template>
48
- </CmdBox>
49
- <!-- end box template selection -->
59
+ </template>
60
+ </CmdBox>
61
+ <!-- end box template selection -->
62
+
63
+ <!-- begin box list of components-->
64
+ <CmdBox :use-slots="['body']" :collapsible="true"
65
+ :cmdHeadline="{ headlineText: 'Components', headlineLevel: 4, cmdIcon: { iconClass: 'icon-settings-component' } }"
66
+ :openCollapsedBox="slotProps.boxIsOpen(1)"
67
+ @toggleCollapse="slotProps.boxToggled(1, $event)" id="list-of-components">
68
+ <template v-slot:body>
69
+ <ul>
70
+ <li v-for="(componentName, index) in listOfComponents" :key="index"
71
+ :class="{ 'active': activeEntry === 'Cmd' + componentName }">
72
+ <a :href="sectionName(componentName)"
73
+ @click="updateSettingsSidebar(componentNameWithPrefix(componentName))"
74
+ title="Go to component">
75
+ {{ readableComponentName(componentName) }}
76
+ </a>
77
+ </li>
78
+ </ul>
79
+ </template>
80
+ </CmdBox>
81
+ <!-- end box list of components-->
82
+
83
+ <!-- begin box page-templates -->
84
+ <CmdBox :use-slots="['body']" :collapsible="true"
85
+ :cmdHeadline="{ headlineText: 'Page-Templates', headlineLevel: 4, cmdIcon: { iconClass: 'icon-file-settings' } }"
86
+ :openCollapsedBox="slotProps.boxIsOpen(2)"
87
+ @toggleCollapse="slotProps.boxToggled(2, $event)">
88
+ <template v-slot:body>
89
+ <ul>
90
+ <li>
91
+ <a href="#section-contact-information"
92
+ @click="updateSettingsSidebar('ContactInformation', 'page')">
93
+ Contact Information
94
+ </a>
95
+ </li>
96
+ <li>
97
+ Multiple Lists Of Links
98
+ <ul>
99
+ <li>
100
+ <a href="#section-multiple-lists-of-links-downloads"
101
+ @click="updateSettingsSidebar('MultipleListsOfLinks', 'page')">
102
+ Downloads
103
+ </a>
104
+ </li>
105
+ <li>
106
+ <a href="#section-multiple-lists-of-links-sitemap"
107
+ @click="updateSettingsSidebar('MultipleListsOfLinks', 'page')">
108
+ SiteMap
109
+ </a>
110
+ </li>
111
+ </ul>
112
+ </li>
113
+ <li>
114
+ Multiple Box Wrapper
115
+ <ul>
116
+ <li>
117
+ <a href="#section-multiple-box-wrapper-faqs"
118
+ @click="updateSettingsSidebar('MultipleBoxWrapperFAQs', 'page')">
119
+ FAQs
120
+ </a>
121
+ </li>
122
+ <li>
123
+ <a href="#section-multiple-box-wrapper-team-overview"
124
+ @click="updateSettingsSidebar('MultipleBoxWrapperTeamOverview', 'page')">
125
+ Team Overview
126
+ </a>
127
+ </li>
128
+ </ul>
129
+ </li>
130
+ </ul>
131
+ </template>
132
+ </CmdBox>
133
+ <!-- end box page-templates -->
134
+ </template>
135
+ </CmdBoxWrapper>
136
+
137
+ <!-- begin list comand-versions -->
138
+ <dl class="box-footer comand-versions">
139
+ <dt>Frontend-Framework Version:</dt>
140
+ <dd>{{ packageJson.dependencies['comand-frontend-framework'].replace("^", "") }}</dd>
141
+ <dt>Component-Library Version:</dt>
142
+ <dd>{{ packageJson.version }}</dd>
143
+ </dl>
144
+ <!-- end list comand-versions -->
145
+ </template>
146
+ <template #closed>
147
+ <div class="closed-sidebar">
148
+ <a href="#" class="button primary" title="Open Template Selection" @click.prevent="openBox(0)">
149
+ <span class="icon-settings-template"></span>
150
+ </a>
151
+ <a href="#" class="button primary" title="Open Components Overview" @click.prevent="openBox(1)">
152
+ <span class="icon-settings-component"></span>
153
+ </a>
154
+ <a href="#" class="button primary" title="Open Page-Templates" @click.prevent="openBox(2)">
155
+ <span class="icon-file-settings"></span>
156
+ </a>
157
+ <a href="#" @click.prevent="showLeftSidebar = false">
158
+ <span>Hide sidebar</span>
159
+ </a>
160
+ </div>
161
+ </template>
162
+ </CmdSidebar>
163
+ <main v-if="componentView" id="content">
164
+ <CmdWidthLimitationWrapper>
165
+ <h1 class="headline-demopage">Components Overview</h1>
166
+ </CmdWidthLimitationWrapper>
50
167
 
51
- <!-- begin box list of components-->
52
- <CmdBox :use-slots="['body']" :collapsible="true"
53
- :cmdHeadline="{ headlineText: 'Components', headlineLevel: 4, cmdIcon: { iconClass: 'icon-settings-component' } }"
54
- :openCollapsedBox="slotProps.boxIsOpen(1)" @toggleCollapse="slotProps.boxToggled(1, $event)"
55
- id="list-of-components">
56
- <template v-slot:body>
57
- <ul>
58
- <li v-for="(componentName, index) in listOfComponents" :key="index"
59
- :class="{ 'active': activeEntry === 'Cmd' + componentName }">
60
- <a :href="sectionName(componentName)"
61
- @click="updateSettingsSidebar(componentNameWithPrefix(componentName))"
62
- title="Go to component">
63
- {{ readableComponentName(componentName) }}
64
- </a>
65
- </li>
66
- </ul>
67
- </template>
68
- </CmdBox>
69
- <!-- end box list of components-->
168
+ <!-- begin accordion --------------------------------------------------------------------------------------------------->
169
+ <CmdWidthLimitationWrapper>
170
+ <h2 class="headline-demopage" id="section-accordion">
171
+ <span>Accordion</span>
172
+ <a href="#" class="button small icon-cog" title="Open Component Settings"
173
+ @click.prevent="openSettingsSidebar('CmdAccordion')"></a>
174
+ </h2>
175
+ <CmdAccordion ref="CmdAccordion" open :name="accordionData.name"
176
+ :cmdHeadline="{ headlineText: 'Summary (no highlighting)' }"
177
+ :textAccordionBody="accordionData[0].textAccordionBody" v-bind="cmdAccordionSettingsData" />
178
+ <CmdAccordion highlightLevel="primary" :name="accordionData.name"
179
+ :cmdHeadline="{ headlineText: 'Summary (primary highlighting)' }"
180
+ :textAccordionBody="accordionData[1].textAccordionBody" />
181
+ <CmdAccordion highlightLevel="secondary" :name="accordionData.name"
182
+ :cmdHeadline="{ headlineText: 'Summary (secondary highlighting)' }"
183
+ :textAccordionBody="accordionData[2].textAccordionBody" />
184
+ <CmdAccordion highlightLevel="tertiary" :name="accordionData.name"
185
+ :cmdHeadline="{ headlineText: 'Summary (tertiary highlighting)' }"
186
+ :textAccordionBody="accordionData[3].textAccordionBody" />
187
+ </CmdWidthLimitationWrapper>
188
+ <!-- end accordion --------------------------------------------------------------------------------------------------->
189
+
190
+ <!-- begin accordions-wrapper --------------------------------------------------------------------------------------------------->
191
+ <CmdWidthLimitationWrapper>
192
+ <h2 class="headline-demopage" id="section-accordions-wrapper">
193
+ <span>Accordions-Wrapper</span>
194
+ <a href="#" class="button small icon-cog" title="Open Component Settings"
195
+ @click.prevent="openSettingsSidebar('CmdAccordionsWrapper')"></a>
196
+ </h2>
197
+ <CmdAccordionsWrapper ref="CmdAccordionsWrapper" v-bind="cmdAccordionsWrapperSettingsData">
198
+ <template v-slot="slotProps">
199
+ <CmdAccordion v-for="(accordion, index) in accordionData" :key="index" open
200
+ :accordionName="accordion.name"
201
+ :cmdHeadline="{ headlineText: accordion.cmdHeadline.headlineText }"
202
+ :rowView="slotProps.rowView" :openAccordionHasFullWidth="slotProps.fullWidth"
203
+ :textAccordionBody="accordion.textAccordionBody"
204
+ :allowMultipleExpandedBoxes="slotProps.allowMultipleExpandedBoxes"
205
+ :summaryWritingMode="slotProps.summaryWritingMode" />
206
+ </template>
207
+ </CmdAccordionsWrapper>
208
+ </CmdWidthLimitationWrapper>
209
+ <!-- end accordions-wrapper --------------------------------------------------------------------------------------------------->
210
+
211
+ <!-- begin address-data --------------------------------------------------------------------------------------------------->
212
+ <CmdWidthLimitationWrapper>
213
+ <h2 class="headline-demopage" id="section-address-data">
214
+ <span>Address Data</span>
215
+ <a href="#" class="button small icon-cog" title="Open Component Settings"
216
+ @click.prevent="openSettingsSidebar('CmdAddressData')"></a>
217
+ </h2>
218
+ <div class="flex-container">
219
+ <CmdAddressData ref="CmdAddressData" :addressData="addressData"
220
+ v-bind="cmdAddressDataSettingsData" />
221
+ </div>
222
+ </CmdWidthLimitationWrapper>
223
+ <!-- end address-data --------------------------------------------------------------------------------------------------->
70
224
 
71
- <!-- begin box page-templates -->
72
- <CmdBox :use-slots="['body']" :collapsible="true"
73
- :cmdHeadline="{ headlineText: 'Page-Templates', headlineLevel: 4, cmdIcon: { iconClass: 'icon-file-settings' } }"
74
- :openCollapsedBox="slotProps.boxIsOpen(2)"
75
- @toggleCollapse="slotProps.boxToggled(2, $event)">
76
- <template v-slot:body>
77
- <ul>
78
- <li>
79
- <a href="#section-contact-information"
80
- @click="updateSettingsSidebar('ContactInformation', 'page')">
81
- Contact Information
82
- </a>
83
- </li>
84
- <li>
85
- Multiple Lists Of Links
86
- <ul>
87
- <li>
88
- <a href="#section-multiple-lists-of-links-downloads"
89
- @click="updateSettingsSidebar('MultipleListsOfLinks', 'page')">
90
- Downloads
91
- </a>
92
- </li>
93
- <li>
94
- <a href="#section-multiple-lists-of-links-sitemap"
95
- @click="updateSettingsSidebar('MultipleListsOfLinks', 'page')">
96
- SiteMap
97
- </a>
98
- </li>
99
- </ul>
100
- </li>
101
- <li>
102
- Multiple Box Wrapper
103
- <ul>
104
- <li>
105
- <a href="#section-multiple-box-wrapper-faqs"
106
- @click="updateSettingsSidebar('MultipleBoxWrapperFAQs', 'page')">
107
- FAQs
108
- </a>
109
- </li>
110
- <li>
111
- <a href="#section-multiple-box-wrapper-team-overview"
112
- @click="updateSettingsSidebar('MultipleBoxWrapperTeamOverview', 'page')">
113
- Team Overview
114
- </a>
115
- </li>
116
- </ul>
117
- </li>
118
- </ul>
119
- </template>
120
- </CmdBox>
121
- <!-- end box page-templates -->
122
- </template>
123
- </CmdBoxWrapper>
124
-
125
- <!-- begin list comand-versions -->
126
- <dl class="box-footer comand-versions">
127
- <dt>Frontend-Framework Version:</dt>
128
- <dd>{{ packageJson.dependencies['comand-frontend-framework'].replace("^", "") }}</dd>
129
- <dt>Component-Library Version:</dt>
130
- <dd>{{ packageJson.version }}</dd>
131
- </dl>
132
- <!-- end list comand-versions -->
133
- </template>
134
- <template #closed>
135
- <div class="closed-sidebar">
136
- <a href="#" class="button primary" title="Open Template Selection" @click.prevent="openBox(0)">
137
- <span class="icon-settings-template"></span>
138
- </a>
139
- <a href="#" class="button primary" title="Open Components Overview" @click.prevent="openBox(1)">
140
- <span class="icon-settings-component"></span>
141
- </a>
142
- <a href="#" class="button primary" title="Open Page-Templates" @click.prevent="openBox(2)">
143
- <span class="icon-file-settings"></span>
144
- </a>
145
- <a href="#" @click.prevent="showLeftSidebar = false">
146
- <span>Hide sidebar</span>
147
- </a>
148
- </div>
149
- </template>
150
- </CmdSidebar>
151
- <!-- begin site-header ------------------------------------------------------------------------------------------->
152
- <CmdSiteHeader :sticky="true" :resizeHeaderOnScroll="true" :cmdCompanyLogo="companyLogoData">
153
- <template v-slot:top-header>
154
- <!-- begin list ------------------------------------------------------------------------------------------->
155
- <CmdList :links="listData" orientation="horizontal" align="right" />
156
- <!-- end list ------------------------------------------------------------------------------------------->
157
- </template>
158
- <template v-slot:logo>
159
- <!-- begin company-logo ------------------------------------------------------------------------------------------->
160
- <!-- CmdCompanyLogo v-bind="companyLogoData" --/>
161
- <!-- end company-logo ------------------------------------------------------------------------------------------->
162
- </template>
163
- </CmdSiteHeader>
164
- <!-- end site-header ------------------------------------------------------------------------------------------->
165
- <main v-if="componentView" id="content">
166
-
167
- <CmdWidthLimitationWrapper>
168
- <h1 class="headline-demopage">Components Overview</h1>
169
- </CmdWidthLimitationWrapper>
170
-
171
- <!-- begin accordion --------------------------------------------------------------------------------------------------->
172
- <CmdWidthLimitationWrapper>
173
- <h2 class="headline-demopage" id="section-accordion">
174
- <span>Accordion</span>
175
- <a href="#" class="button small icon-cog" title="Open Component Settings"
176
- @click.prevent="openSettingsSidebar('CmdAccordion')"></a>
177
- </h2>
178
- <CmdAccordion ref="CmdAccordion" open :name="accordionData.name"
179
- :cmdHeadline="{ headlineText: 'Summary (no highlighting)' }"
180
- :textAccordionBody="accordionData[0].textAccordionBody" v-bind="cmdAccordionSettingsData" />
181
- <CmdAccordion highlightLevel="primary" :name="accordionData.name"
182
- :cmdHeadline="{ headlineText: 'Summary (primary highlighting)' }"
183
- :textAccordionBody="accordionData[1].textAccordionBody" />
184
- <CmdAccordion highlightLevel="secondary" :name="accordionData.name"
185
- :cmdHeadline="{ headlineText: 'Summary (secondary highlighting)' }"
186
- :textAccordionBody="accordionData[2].textAccordionBody" />
187
- <CmdAccordion highlightLevel="tertiary" :name="accordionData.name"
188
- :cmdHeadline="{ headlineText: 'Summary (tertiary highlighting)' }"
189
- :textAccordionBody="accordionData[3].textAccordionBody" />
190
- </CmdWidthLimitationWrapper>
191
- <!-- end accordion --------------------------------------------------------------------------------------------------->
192
-
193
- <!-- begin accordions-wrapper --------------------------------------------------------------------------------------------------->
194
- <CmdWidthLimitationWrapper>
195
- <h2 class="headline-demopage" id="section-accordions-wrapper">
196
- <span>Accordions-Wrapper</span>
197
- <a href="#" class="button small icon-cog" title="Open Component Settings"
198
- @click.prevent="openSettingsSidebar('CmdAccordionsWrapper')"></a>
199
- </h2>
200
- <CmdAccordionsWrapper ref="CmdAccordionsWrapper" v-bind="cmdAccordionsWrapperSettingsData">
201
- <template v-slot="slotProps">
202
- <CmdAccordion
203
- v-for="(accordion, index) in accordionData"
204
- :key="index"
205
- open
206
- :accordionName="accordion.name"
207
- :cmdHeadline="{ headlineText: accordion.cmdHeadline.headlineText }"
208
- :rowView="slotProps.rowView"
209
- :openAccordionHasFullWidth="slotProps.fullWidth"
210
- :textAccordionBody="accordion.textAccordionBody"
211
- :allowMultipleExpandedBoxes="slotProps.allowMultipleExpandedBoxes"
212
- :summaryWritingMode="slotProps.summaryWritingMode"
213
- />
214
- </template>
215
- </CmdAccordionsWrapper>
216
- </CmdWidthLimitationWrapper>
217
- <!-- end accordions-wrapper --------------------------------------------------------------------------------------------------->
218
-
219
- <!-- begin address-data --------------------------------------------------------------------------------------------------->
220
- <CmdWidthLimitationWrapper>
221
- <h2 class="headline-demopage" id="section-address-data">
222
- <span>Address Data</span>
223
- <a href="#" class="button small icon-cog" title="Open Component Settings"
224
- @click.prevent="openSettingsSidebar('CmdAddressData')"></a>
225
- </h2>
226
- <div class="flex-container">
227
- <CmdAddressData ref="CmdAddressData" :addressData="addressData"
228
- v-bind="cmdAddressDataSettingsData" />
229
- </div>
230
- </CmdWidthLimitationWrapper>
231
- <!-- end address-data --------------------------------------------------------------------------------------------------->
232
-
233
- <!-- begin advanced form elements ------------------------------------------------------------------------------------------->
234
- <CmdWidthLimitationWrapper>
235
- <h2 class="headline-demopage" id="section-advanced-form-elements">Advanced Form Elements</h2>
236
- <h3><span>Form elements status:</span></h3>
237
- <div class="flex-container">
238
- <ul class="list-status">
239
- <li>
240
- <a href="#" @click.prevent="setStatus('', false)"
241
- :class="{ 'active': validationStatus === '' && disabledStatus === false }"
242
- id="status-default">
243
- Default
244
- </a>
245
- </li>
246
- <li class="error">
247
- <a href="#" @click.prevent="setStatus('error', false)"
248
- :class="{ 'active': validationStatus === 'error' }" id="status-error">
249
- Error
250
- </a>
251
- </li>
252
- <li>
253
- <a href="#" @click.prevent="setStatus('warning', false)"
254
- :class="{ 'active': validationStatus === 'warning' }" id="status-warning">
255
- Warning
256
- </a>
257
- </li>
258
- <li>
259
- <a href="#" @click.prevent="setStatus('success', false)"
260
- :class="{ 'active': validationStatus === 'success' }" id="status-success">
261
- Success
262
- </a>
263
- </li>
264
- <li>
265
- <a href="#" @click.prevent="setStatus('info', false)"
266
- :class="{ 'active': validationStatus === 'info' }" id="status-info">
267
- Info
268
- </a>
269
- </li>
270
- <li>
271
- <a href="#" @click.prevent="setStatus('', true)"
272
- :class="{ 'active': disabledStatus === true }" id="status-disabled">
273
- Disabled
274
- </a>
275
- </li>
276
- </ul>
277
- </div>
278
-
279
- <!-- begin form-filters -->
280
- <CmdFormFilters v-model="fakeSelectFilters" :selectedOptionsName="getOptionName" />
281
- <!-- end form-filters -->
282
-
283
- <CmdForm :use-fieldset="false" id="advanced-form-elements" novalidate="novalidate">
284
- <fieldset class="flex-container">
285
- <legend>Legend</legend>
286
- <h2 class="headline-demopage">
287
- <span>Form Element-Component</span>
288
- <a href="#" class="button small icon-cog" title="Open Component Settings"
289
- @click.prevent="openSettingsSidebar('CmdFormElement')"></a>
290
- </h2>
291
- <CmdFormElement ref="CmdFormElement" v-bind="cmdFormElementSettingsData"
292
- :status="validationStatus" :disabled="disabledStatus" />
293
- <div class="flex-container">
294
- <CmdFormElement labelText="Input for datalist:" element="input" type="text"
295
- :status="validationStatus" :disabled="disabledStatus" placeholder="Type in option"
296
- :datalist="datalist" tooltipText="This is a tooltip" />
297
- </div>
298
- <div class="flex-container">
299
- <CmdFormElement labelText="Input (type search (without search-button)):" element="input"
300
- type="search" :status="validationStatus" :disabled="disabledStatus"
301
- :showSearchButton="false" placeholder="Search" fieldIconClass="icon-search"
302
- tooltipText="This is a tooltip" v-bind="{ useCustomTooltip: false }" />
303
- <CmdFormElement labelText="Input (type search (with search-button)):" element="input"
304
- type="search" :status="validationStatus" :disabled="disabledStatus" placeholder="Search"
305
- tooltipText="This is a tooltip" v-bind="{ useCustomTooltip: false }" />
306
- </div>
307
- <h3>Inputfields in Columns</h3>
308
- <div class="flex-container">
309
- <CmdFormElement element="input" type="text" minlength="5" id="inputfield1"
310
- placeholder="This is placeholder text" v-model="inputField1"
311
- tooltipText="This is a tooltip!" :status="validationStatus" :disabled="disabledStatus">
312
- <template v-slot:labeltext>
313
- <span v-html="'Label with <a href=\'#\'>Link</a> given by slot'"></span>
314
- </template>
315
- </CmdFormElement>
316
- <CmdFormElement element="input" labelText="Label for inputfield (required, with tooltip):"
317
- type="text" required="required" minlength="5" id="inputfield-required"
318
- placeholder="This is placeholder text" v-model="inputFieldRequired"
319
- tooltipText="This is a tooltip!" :status="validationStatus"
320
- :disabled="disabledStatus" />
321
- <CmdFormElement element="input" labelText="Label for inputfield (with pattern):" type="text"
322
- id="inputfield-pattern" placeholder="This is placeholder text" pattern="/\d/"
323
- v-model="inputFieldPattern" tooltipText="This is a tooltip!" :status="validationStatus"
324
- :disabled="disabledStatus" />
325
- </div>
326
- <!-- begin inputfield in two columns -->
327
- <div class="flex-container">
328
- <CmdFormElement labelText="Label for emailfield (with icon):" element="input" type="email"
329
- id="inputfield-email" fieldIconClass="icon-mail" placeholder="Type in email-address"
330
- tooltipText="This is a tooltip!" maxlength="100" v-model="inputMail"
331
- :status="validationStatus" :disabled="disabledStatus" :required="true" />
332
- <CmdFormElement labelText="Label for inputfield (with icon):" element="input" type="text"
333
- id="inputfield-username" fieldIconClass="icon-user-profile"
334
- placeholder="Type in username" tooltipText="This is a tooltip!" maxlength="100"
335
- v-model="inputUsername" :status="validationStatus" :disabled="disabledStatus" />
336
- <CmdFormElement element="input" labelText="Label for password-field:" type="password"
337
- :required="true" minlength="8" maxlength="255" id="inputfield-password"
338
- fieldIconClass="icon-security-settings" placeholder="Type in password"
339
- tooltipText="This is a tooltip!"
340
- :customRequirements="customRequirements.filter((_, index) => index !== 2)"
341
- v-model="inputPassword" :status="validationStatus" :disabled="disabledStatus" />
342
- </div>
343
- <!-- end inputfield in two columns -->
344
- <CmdFormElement element="input" labelText="Label:" type="number" class="flex-none"
345
- id="inputfield-number" required="required" min="0" max="9" style="width: 4rem;"
346
- v-model="inputNumber" :customRequirements="[customRequirements[2]]"
347
- :status="validationStatus" :disabled="disabledStatus" />
348
- <CmdFormElement element="input" labelText="Label for inputfield (number):"
349
- :displayLabelInline="true" type="number" id="inputfield-number" required="required" min="0"
350
- max="9" v-model="inputNumber" :customRequirements="[customRequirements[2]]"
351
- :status="validationStatus" :disabled="disabledStatus" />
352
- <CmdFormElement element="input" labelText="Label (inline) for inputfield (date):"
353
- :displayLabelInline="true" type="date" id="inputfield-date" v-model="inputDate"
354
- :status="validationStatus" :disabled="disabledStatus" />
355
- <h3>Searchfields</h3>
356
- <div class="flex-container">
357
- <CmdFormElement element="input"
358
- labelText="Label for inputfield (search) without search-button:" type="search"
359
- id="inputfield-search-without-searchbutton" placeholder="Keyword(s)"
360
- v-model="inputSearch" :showSearchButton="false" :status="validationStatus"
361
- :disabled="disabledStatus" />
362
- <CmdFormElement element="input" labelText="Label for inputfield (search):" type="search"
363
- id="inputfield-search-with-searchbutton" placeholder="Keyword(s)" v-model="inputSearch"
225
+ <!-- begin advanced form elements ------------------------------------------------------------------------------------------->
226
+ <CmdWidthLimitationWrapper>
227
+ <h2 class="headline-demopage" id="section-advanced-form-elements">Advanced Form Elements</h2>
228
+ <h3><span>Form elements status:</span></h3>
229
+ <div class="flex-container">
230
+ <ul class="list-status">
231
+ <li>
232
+ <a href="#" @click.prevent="setStatus('', false)"
233
+ :class="{ 'active': validationStatus === '' && disabledStatus === false }"
234
+ id="status-default">
235
+ Default
236
+ </a>
237
+ </li>
238
+ <li class="error">
239
+ <a href="#" @click.prevent="setStatus('error', false)"
240
+ :class="{ 'active': validationStatus === 'error' }" id="status-error">
241
+ Error
242
+ </a>
243
+ </li>
244
+ <li>
245
+ <a href="#" @click.prevent="setStatus('warning', false)"
246
+ :class="{ 'active': validationStatus === 'warning' }" id="status-warning">
247
+ Warning
248
+ </a>
249
+ </li>
250
+ <li>
251
+ <a href="#" @click.prevent="setStatus('success', false)"
252
+ :class="{ 'active': validationStatus === 'success' }" id="status-success">
253
+ Success
254
+ </a>
255
+ </li>
256
+ <li>
257
+ <a href="#" @click.prevent="setStatus('info', false)"
258
+ :class="{ 'active': validationStatus === 'info' }" id="status-info">
259
+ Info
260
+ </a>
261
+ </li>
262
+ <li>
263
+ <a href="#" @click.prevent="setStatus('', true)"
264
+ :class="{ 'active': disabledStatus === true }" id="status-disabled">
265
+ Disabled
266
+ </a>
267
+ </li>
268
+ </ul>
269
+ </div>
270
+
271
+ <!-- begin form-filters -->
272
+ <CmdFormFilters v-model="fakeSelectFilters" :selectedOptionsName="getOptionName" />
273
+ <!-- end form-filters -->
274
+
275
+ <CmdForm :use-fieldset="false" id="advanced-form-elements" novalidate="novalidate">
276
+ <fieldset class="flex-container">
277
+ <legend>Legend</legend>
278
+ <h2 class="headline-demopage">
279
+ <span>Form Element-Component</span>
280
+ <a href="#" class="button small icon-cog" title="Open Component Settings"
281
+ @click.prevent="openSettingsSidebar('CmdFormElement')"></a>
282
+ </h2>
283
+ <CmdFormElement ref="CmdFormElement" v-bind="cmdFormElementSettingsData"
364
284
  :status="validationStatus" :disabled="disabledStatus" />
365
- <!-- begin CmdSmartSearch -->
366
- <CmdSmartSearch :listOfRecommendations="smartSearchData.listOfRecommendations"
367
- :cmdFormElement="smartSearchData.cmdFormElement" :openListToTop="true"
368
- v-model="smartSearchObject" :disabled="disabledStatus" />
369
- <CmdSmartSearch :listOfRecommendations="smartSearchData.listOfRecommendations"
370
- :cmdFormElement="smartSearchData.cmdFormElement" :openListToTop="true"
371
- v-model="smartSearchString" :disabled="disabledStatus" />
372
- <!-- end CmdSmartSearch -->
373
- </div>
374
- <h3>Textarea</h3>
375
- <CmdFormElement element="textarea" labelText="Label for textarea:" id="textarea" minlength="1"
376
- maxlength="100" placeholder="Type in your message" :required="true" v-model="textarea"
377
- :status="validationStatus" :disabled="disabledStatus" />
378
- <hr />
379
- <!-- begin FakeSelect -->
380
- <h3 class="headline-demopage">
381
- <span>Fake Selects</span>
382
- <a href="#" class="button small icon-cog" title="Open Component Settings"
383
- @click.prevent="openSettingsSidebar('CmdFakeSelect')"></a>
384
- </h3>
385
- <div class="flex-container">
386
- <!-- type === default: normal selectbox (with optional icons) -->
387
- <CmdFakeSelect ref="CmdFakeSelect" v-bind="cmdFakeSelectSettingsData"
388
- :selectData="fakeSelectOptionsData" v-model="fakeSelectDefault">
389
- </CmdFakeSelect>
390
- <!-- type === checkboxOptions: selectbox with checkboxes for each option -->
391
- <CmdFakeSelect labelText="Selectbox with checkboxes:" :status="validationStatus"
392
- :disabled="disabledStatus" :selectData="fakeSelectOptionsData"
393
- v-model="fakeSelectCheckbox" defaultOptionName="Options:" :required="true"
394
- id="selectbox-with-checkboxes" type="checkboxOptions" :useCustomTooltip="true" />
395
- <CmdFakeSelect labelText="Selectbox with filters:" :status="validationStatus"
396
- :disabled="disabledStatus" :selectData="fakeSelectFilterOptionsData"
397
- v-model="fakeSelectFilters" defaultOptionName="Filters:" id="selectbox-with-filters"
398
- type="checkboxOptions" :useCustomTooltip="true" />
399
- <CmdFakeSelect labelText="Selectbox with country flags:" :status="validationStatus"
400
- :disabled="disabledStatus" pathFlags="https://comand-ui.com/samples/images/flags"
401
- :selectData="fakeSelectCountriesData" v-model="selectedCountryWithFlag"
402
- defaultOptionName="Select country:" type="country" />
403
- <CmdFormElement labelText="Selectbox with all countries:" element="select"
404
- :status="validationStatus" :disabled="disabledStatus" :selectOptions="allCountriesData"
405
- v-model="selectedCountry" :groupSelectOptionsByInitialLetters="true" max-height="10rem"
406
- defaultOptionName="Select country:" />
407
- <CmdFakeSelect labelText="Selectbox with colors:" :status="validationStatus"
408
- :disabled="disabledStatus" :selectData="fakeSelectColorsData" v-model="selectedColor"
409
- required="required" type="color" />
410
- </div>
411
- <!-- end FakeSelect -->
412
- <hr />
413
-
414
- <!-- begin progress bar -->
415
- <h2>Progress Bar [native]</h2>
416
- <CmdProgressBar labelText="Progress Bar (with optional output):" id="progress-bar2" max="100" />
417
- <!-- end progress bar -->
418
-
419
- <!-- begin slider -->
420
- <h2>Slider [native]</h2>
421
- <div class="label" :class="validationStatus">
422
- <span class="label-text">Single-Slider (with in- and output):</span>
423
- <span class="flex-container flex-items-flex-none">
424
- <label class="inline" for="range-value">
425
- <span class="label-text">
426
- <span>Range Value:</span>
427
- </span>
428
- <input type="number" :class="validationStatus" v-model="rangeValue"
429
- :disabled="disabledStatus" min="0" max="100" id="range-value" />
430
- </label>
431
- <label for="range-slider">
432
- <span class="label-text hidden">
433
- <span>Range Value</span>
434
- </span>
435
- <input type="range" class="range-slider" id="range-slider" v-model="rangeValue"
436
- :disabled="disabledStatus" min="0" max="100" />
437
- </label>
438
- </span>
439
- </div>
440
- <!-- end slider -->
441
-
442
- <hr />
443
-
444
- <!-- begin toggle-switch-radio with switch-label (colored) -->
445
- <h2>Toggle-Switches</h2>
446
- <h3>Switches without switch-labels</h3>
447
- <CmdFormElement element="input" type="checkbox" id="toggle-switch-checkbox"
448
- v-model="switchButtonCheckboxToggleSwitch"
449
- labelText="Labeltext for Toggle-Switch (not required)" :toggleSwitch="true"
450
- :status="validationStatus" :disabled="disabledStatus" />
451
- <output>v-model: {{ switchButtonCheckboxToggleSwitch }}</output>
452
- <CmdFormElement element="input" type="checkbox" id="toggle-switch-checkbox-required"
453
- v-model="switchButtonCheckboxToggleSwitchRequired"
454
- labelText="Labeltext for Toggle-Switch (required)" :toggleSwitch="true"
455
- :status="validationStatus" :disabled="disabledStatus" :required="true" />
456
- <output>v-model: {{ switchButtonCheckboxToggleSwitchRequired }}</output>
457
- <CmdFormElement element="input" type="checkbox" id="toggle-switch-checkbox-colored"
458
- v-model="switchButtonCheckboxToggleSwitchColored"
459
- labelText="Labeltext for colored Toggle-Switch with set value" :toggleSwitch="true"
460
- inputValue="yes" :colored="true" :status="validationStatus" :disabled="disabledStatus" />
461
- <output>v-model: {{ switchButtonCheckboxToggleSwitchColored }}</output>
462
- <h3>Switches with switch-labels</h3>
463
- <CmdFormElement element="input" type="checkbox" id="toggle-switch-checkbox-switch-label"
464
- v-model="switchButtonCheckbox" labelText="Labeltext for Toggle-Switch with Switch-Label"
465
- inputValue="checkbox1" onLabel="Label on" offLabel="Label off" :toggleSwitch="true"
466
- :status="validationStatus" :disabled="disabledStatus" />
467
- <output>v-model: {{ switchButtonCheckbox }}</output>
468
- <CmdFormElement element="input" type="checkbox" id="toggle-switch-checkbox-switch-label-colored"
469
- v-model="switchButtonCheckboxColored" inputValue="checkbox2"
470
- labelText="Labeltext for Toggle-Switch (Checkbox, colored)" onLabel="Label on"
471
- offLabel="Label off" :colored="true" :toggleSwitch="true" :status="validationStatus"
472
- :disabled="disabledStatus" />
473
- <output>v-model: {{ switchButtonCheckboxColored }}</output>
474
- <CmdFormElement element="input" type="radio" name="radiogroup" id="toggle-switch-radio1"
475
- v-model="switchButtonRadio" onLabel="Label on" offLabel="Label off" :colored="true"
476
- :toggleSwitch="true" :status="validationStatus" :disabled="disabledStatus"
477
- inputValue="radio1" labelText="Labeltext for Toggle-Switch (Radio, colored) #1" />
478
- <output>v-model: {{ switchButtonRadio }}</output>
479
- <CmdFormElement element="input" type="radio" name="radiogroup" id="toggle-switch-radio2"
480
- v-model="switchButtonRadio" onLabel="Label on" offLabel="Label off" :colored="true"
481
- :toggleSwitch="true" :status="validationStatus" :disabled="disabledStatus"
482
- inputValue="radio2" labelText="Labeltext for Toggle-Switch (Radio, colored) #2" />
483
- <output>v-model: {{ switchButtonRadio }}</output>
484
- <!-- end toggle-switch-radio with switch-label (colored) -->
485
-
486
- <!-- begin checkboxes and radiobuttons -->
487
- <h2>Checkboxes and Radiobuttons</h2>
488
- <h3>Checkboxes [native]</h3>
489
- <div class="label inline">
490
- <span class="label-text">Label for native checkboxes:</span>
491
- <div class="flex-container flex-items-flex-none">
492
- <CmdFormElement element="input" type="checkbox"
493
- labelText="Label for checkbox with boolean" v-model="nativeCheckboxValues"
494
- id="checkbox-with-boolean" name="native-checkbox-group" :status="validationStatus"
495
- :disabled="disabledStatus" />
496
- <CmdFormElement element="input" type="checkbox"
497
- labelText="Label for checkbox with value" v-model="nativeCheckboxValues"
498
- inputValue="checkboxValue1" id="checkbox-with-value-1" name="native-checkbox-group"
499
- :status="validationStatus" :disabled="disabledStatus" />
500
- <CmdFormElement element="input" type="checkbox"
501
- labelText="Label for checkbox with value" v-model="nativeCheckboxValues"
502
- inputValue="checkboxValue2" id="checkbox-with-value-2" name="native-checkbox-group"
503
- :status="validationStatus" :disabled="disabledStatus" />
504
- <CmdFormElement element="input" type="checkbox" v-model="nativeCheckboxValues"
505
- inputValue="checkboxValue3" id="checkbox-with-value-3" name="native-checkbox-group"
506
- :status="validationStatus" :disabled="disabledStatus">
285
+ <div class="flex-container">
286
+ <CmdFormElement labelText="Input for datalist:" element="input" type="text"
287
+ :status="validationStatus" :disabled="disabledStatus" placeholder="Type in option"
288
+ :datalist="datalist" tooltipText="This is a tooltip" />
289
+ </div>
290
+ <div class="flex-container">
291
+ <CmdFormElement labelText="Input (type search (without search-button)):" element="input"
292
+ type="search" :status="validationStatus" :disabled="disabledStatus"
293
+ :showSearchButton="false" placeholder="Search" fieldIconClass="icon-search"
294
+ tooltipText="This is a tooltip" v-bind="{ useCustomTooltip: false }" />
295
+ <CmdFormElement labelText="Input (type search (with search-button)):" element="input"
296
+ type="search" :status="validationStatus" :disabled="disabledStatus"
297
+ placeholder="Search" tooltipText="This is a tooltip"
298
+ v-bind="{ useCustomTooltip: false }" />
299
+ </div>
300
+ <h3>Inputfields in Columns</h3>
301
+ <div class="flex-container">
302
+ <CmdFormElement element="input" type="text" minlength="5" id="inputfield1"
303
+ placeholder="This is placeholder text" v-model="inputField1"
304
+ tooltipText="This is a tooltip!" :status="validationStatus"
305
+ :disabled="disabledStatus">
507
306
  <template v-slot:labeltext>
508
- Labeltext with <a href="#">link</a> given by slot
307
+ <span v-html="'Label with <a href=\'#\'>Link</a> given by slot'"></span>
509
308
  </template>
510
309
  </CmdFormElement>
511
- </div>
512
- </div>
513
- <output>
514
- v-model: {{ nativeCheckboxValues }}
515
- </output>
516
- <h3>Checkboxes (replaced)</h3>
517
- <div class="label inline">
518
- <span class="label-text">Label for Replaced Input-Type-Checkbox:</span>
519
- <div class="flex-container flex-items-flex-none">
520
- <CmdFormElement element="input" type="checkbox" labelText="Label for replaced checkbox"
521
- :replaceInputType="true" id="inputfield9" name="replaced-checkbox-group"
522
- v-model="replacedCheckboxValue" inputValue="checkboxValue1"
523
- :status="validationStatus" :disabled="disabledStatus" />
524
- <CmdFormElement element="input" type="checkbox" labelText="Label for replaced checkbox"
525
- name="replaced-checkbox-group" v-model="replacedCheckboxValue"
526
- inputValue="checkboxValue2" :replaceInputType="true" id="inputfield10"
310
+ <CmdFormElement element="input"
311
+ labelText="Label for inputfield (required, with tooltip):" type="text"
312
+ required="required" minlength="5" id="inputfield-required"
313
+ placeholder="This is placeholder text" v-model="inputFieldRequired"
314
+ tooltipText="This is a tooltip!" :status="validationStatus"
315
+ :disabled="disabledStatus" />
316
+ <CmdFormElement element="input" labelText="Label for inputfield (with pattern):"
317
+ type="text" id="inputfield-pattern" placeholder="This is placeholder text"
318
+ pattern="/\d/" v-model="inputFieldPattern" tooltipText="This is a tooltip!"
527
319
  :status="validationStatus" :disabled="disabledStatus" />
528
320
  </div>
529
- </div>
530
- <output>
531
- v-model: {{ replacedCheckboxValue }}
532
- </output>
533
- <h3>Radiobuttons [native]</h3>
534
- <div class="label inline">
535
- <span class="label-text">Label for native radiobuttons:</span>
536
- <div class="flex-container flex-items-flex-none">
537
- <CmdFormElement element="input" labelText="Label for native radiobutton" type="radio"
538
- id="inputfield11" name="radiogroup" inputValue="radiobuttonValue1"
539
- v-model="radiobuttonValue" :status="validationStatus" :disabled="disabledStatus" />
540
- <CmdFormElement element="input" labelText="Label for native radiobutton" type="radio"
541
- id="inputfield12" name="radiogroup" inputValue="radiobuttonValue2"
542
- v-model="radiobuttonValue" :status="validationStatus" :disabled="disabledStatus" />
321
+ <!-- begin inputfield in two columns -->
322
+ <div class="flex-container">
323
+ <CmdFormElement labelText="Label for emailfield (with icon):" element="input"
324
+ type="email" id="inputfield-email" fieldIconClass="icon-mail"
325
+ placeholder="Type in email-address" tooltipText="This is a tooltip!" maxlength="100"
326
+ v-model="inputMail" :status="validationStatus" :disabled="disabledStatus"
327
+ :required="true" />
328
+ <CmdFormElement labelText="Label for inputfield (with icon):" element="input"
329
+ type="text" id="inputfield-username" fieldIconClass="icon-user-profile"
330
+ placeholder="Type in username" tooltipText="This is a tooltip!" maxlength="100"
331
+ v-model="inputUsername" :status="validationStatus" :disabled="disabledStatus" />
332
+ <CmdFormElement element="input" labelText="Label for password-field:" type="password"
333
+ :required="true" minlength="8" maxlength="255" id="inputfield-password"
334
+ fieldIconClass="icon-security-settings" placeholder="Type in password"
335
+ tooltipText="This is a tooltip!"
336
+ :customRequirements="customRequirements.filter((_, index) => index !== 2)"
337
+ v-model="inputPassword" :status="validationStatus" :disabled="disabledStatus" />
543
338
  </div>
544
- </div>
545
- <output>
546
- v-model: {{ radiobuttonValue }}
547
- </output>
548
- <h3>Radiobuttons (replaced)</h3>
549
- <div class="label inline">
550
- <span class="label-text">Label for Replaced Input-Type-Radio:</span>
551
- <div class="flex-container flex-items-flex-none">
552
- <CmdFormElement element="input" labelText="Label for replaced radiobutton" type="radio"
553
- :replaceInputType="true" id="inputfield13" name="replaced-radiogroup"
554
- inputValue="radiobuttonValue1" v-model="replacedRadiobuttonValue"
555
- :status="validationStatus" :disabled="disabledStatus" />
556
- <CmdFormElement element="input" labelText="Label for replaced radiobutton" type="radio"
557
- :replaceInputType="true" id="inputfield14" name="replaced-radiogroup"
558
- inputValue="radiobuttonValue2" v-model="replacedRadiobuttonValue"
559
- :status="validationStatus" :disabled="disabledStatus" />
339
+ <!-- end inputfield in two columns -->
340
+ <CmdFormElement element="input" labelText="Label:" type="number" class="flex-none"
341
+ id="inputfield-number" required="required" min="0" max="9" style="width: 4rem;"
342
+ v-model="inputNumber" :customRequirements="[customRequirements[2]]"
343
+ :status="validationStatus" :disabled="disabledStatus" />
344
+ <CmdFormElement element="input" labelText="Label for inputfield (number):"
345
+ :displayLabelInline="true" type="number" id="inputfield-number" required="required"
346
+ min="0" max="9" v-model="inputNumber" :customRequirements="[customRequirements[2]]"
347
+ :status="validationStatus" :disabled="disabledStatus" />
348
+ <CmdFormElement element="input" labelText="Label (inline) for inputfield (date):"
349
+ :displayLabelInline="true" type="date" id="inputfield-date" v-model="inputDate"
350
+ :status="validationStatus" :disabled="disabledStatus" />
351
+ <h3>Searchfields</h3>
352
+ <div class="flex-container">
353
+ <CmdFormElement element="input"
354
+ labelText="Label for inputfield (search) without search-button:" type="search"
355
+ id="inputfield-search-without-searchbutton" placeholder="Keyword(s)"
356
+ v-model="inputSearch" :showSearchButton="false" :status="validationStatus"
357
+ :disabled="disabledStatus" />
358
+ <CmdFormElement element="input" labelText="Label for inputfield (search):" type="search"
359
+ id="inputfield-search-with-searchbutton" placeholder="Keyword(s)"
360
+ v-model="inputSearch" :status="validationStatus" :disabled="disabledStatus" />
361
+ <!-- begin CmdSmartSearch -->
362
+ <CmdSmartSearch :listOfRecommendations="smartSearchData.listOfRecommendations"
363
+ :cmdFormElement="smartSearchData.cmdFormElement" :openListToTop="true"
364
+ v-model="smartSearchObject" :disabled="disabledStatus" />
365
+ <CmdSmartSearch :listOfRecommendations="smartSearchData.listOfRecommendations"
366
+ :cmdFormElement="smartSearchData.cmdFormElement" :openListToTop="true"
367
+ v-model="smartSearchString" :disabled="disabledStatus" />
368
+ <!-- end CmdSmartSearch -->
369
+ </div>
370
+ <h3>Textarea</h3>
371
+ <CmdFormElement element="textarea" labelText="Label for textarea:" id="textarea"
372
+ minlength="1" maxlength="100" placeholder="Type in your message" :required="true"
373
+ v-model="textarea" :status="validationStatus" :disabled="disabledStatus" />
374
+ <hr />
375
+ <!-- begin FakeSelect -->
376
+ <h3 class="headline-demopage">
377
+ <span>Fake Selects</span>
378
+ <a href="#" class="button small icon-cog" title="Open Component Settings"
379
+ @click.prevent="openSettingsSidebar('CmdFakeSelect')"></a>
380
+ </h3>
381
+ <div class="flex-container">
382
+ <!-- type === default: normal selectbox (with optional icons) -->
383
+ <CmdFakeSelect ref="CmdFakeSelect" v-bind="cmdFakeSelectSettingsData"
384
+ :selectData="fakeSelectOptionsData" v-model="fakeSelectDefault">
385
+ </CmdFakeSelect>
386
+ <!-- type === checkboxOptions: selectbox with checkboxes for each option -->
387
+ <CmdFakeSelect labelText="Selectbox with checkboxes:" :status="validationStatus"
388
+ :disabled="disabledStatus" :selectData="fakeSelectOptionsData"
389
+ v-model="fakeSelectCheckbox" defaultOptionName="Options:" :required="true"
390
+ id="selectbox-with-checkboxes" type="checkboxOptions" :useCustomTooltip="true" />
391
+ <CmdFakeSelect labelText="Selectbox with filters:" :status="validationStatus"
392
+ :disabled="disabledStatus" :selectData="fakeSelectFilterOptionsData"
393
+ v-model="fakeSelectFilters" defaultOptionName="Filters:" id="selectbox-with-filters"
394
+ type="checkboxOptions" :useCustomTooltip="true" />
395
+ <CmdFakeSelect labelText="Selectbox with country flags:" :status="validationStatus"
396
+ :disabled="disabledStatus" pathFlags="https://comand-ui.com/samples/images/flags"
397
+ :selectData="fakeSelectCountriesData" v-model="selectedCountryWithFlag"
398
+ defaultOptionName="Select country:" type="country" />
399
+ <CmdFormElement labelText="Selectbox with all countries:" element="select"
400
+ :status="validationStatus" :disabled="disabledStatus"
401
+ :selectOptions="allCountriesData" v-model="selectedCountry"
402
+ :groupSelectOptionsByInitialLetters="true" max-height="10rem"
403
+ defaultOptionName="Select country:" />
404
+ <CmdFakeSelect labelText="Selectbox with colors:" :status="validationStatus"
405
+ :disabled="disabledStatus" :selectData="fakeSelectColorsData"
406
+ v-model="selectedColor" required="required" type="color" />
407
+ </div>
408
+ <!-- end FakeSelect -->
409
+ <hr />
410
+
411
+ <!-- begin progress bar -->
412
+ <h2>Progress Bar [native]</h2>
413
+ <CmdProgressBar labelText="Progress Bar (with optional output):" id="progress-bar2"
414
+ max="100" />
415
+ <!-- end progress bar -->
416
+
417
+ <!-- begin slider -->
418
+ <h2>Slider [native]</h2>
419
+ <div class="label" :class="validationStatus">
420
+ <span class="label-text">Single-Slider (with in- and output):</span>
421
+ <span class="flex-container flex-items-flex-none">
422
+ <label class="inline" for="range-value">
423
+ <span class="label-text">
424
+ <span>Range Value:</span>
425
+ </span>
426
+ <input type="number" :class="validationStatus" v-model="rangeValue"
427
+ :disabled="disabledStatus" min="0" max="100" id="range-value" />
428
+ </label>
429
+ <label for="range-slider">
430
+ <span class="label-text hidden">
431
+ <span>Range Value</span>
432
+ </span>
433
+ <input type="range" class="range-slider" id="range-slider" v-model="rangeValue"
434
+ :disabled="disabledStatus" min="0" max="100" />
435
+ </label>
436
+ </span>
437
+ </div>
438
+ <!-- end slider -->
439
+
440
+ <hr />
441
+
442
+ <!-- begin toggle-switch-radio with switch-label (colored) -->
443
+ <h2>Toggle-Switches</h2>
444
+ <h3>Switches without switch-labels</h3>
445
+ <CmdFormElement element="input" type="checkbox" id="toggle-switch-checkbox"
446
+ v-model="switchButtonCheckboxToggleSwitch"
447
+ labelText="Labeltext for Toggle-Switch (not required)" :toggleSwitch="true"
448
+ :status="validationStatus" :disabled="disabledStatus" />
449
+ <output>v-model: {{ switchButtonCheckboxToggleSwitch }}</output>
450
+ <CmdFormElement element="input" type="checkbox" id="toggle-switch-checkbox-required"
451
+ v-model="switchButtonCheckboxToggleSwitchRequired"
452
+ labelText="Labeltext for Toggle-Switch (required)" :toggleSwitch="true"
453
+ :status="validationStatus" :disabled="disabledStatus" :required="true" />
454
+ <output>v-model: {{ switchButtonCheckboxToggleSwitchRequired }}</output>
455
+ <CmdFormElement element="input" type="checkbox" id="toggle-switch-checkbox-colored"
456
+ v-model="switchButtonCheckboxToggleSwitchColored"
457
+ labelText="Labeltext for colored Toggle-Switch with set value" :toggleSwitch="true"
458
+ inputValue="yes" :colored="true" :status="validationStatus"
459
+ :disabled="disabledStatus" />
460
+ <output>v-model: {{ switchButtonCheckboxToggleSwitchColored }}</output>
461
+ <h3>Switches with switch-labels</h3>
462
+ <CmdFormElement element="input" type="checkbox" id="toggle-switch-checkbox-switch-label"
463
+ v-model="switchButtonCheckbox" labelText="Labeltext for Toggle-Switch with Switch-Label"
464
+ inputValue="checkbox1" onLabel="Label on" offLabel="Label off" :toggleSwitch="true"
465
+ :status="validationStatus" :disabled="disabledStatus" />
466
+ <output>v-model: {{ switchButtonCheckbox }}</output>
467
+ <CmdFormElement element="input" type="checkbox"
468
+ id="toggle-switch-checkbox-switch-label-colored" v-model="switchButtonCheckboxColored"
469
+ inputValue="checkbox2" labelText="Labeltext for Toggle-Switch (Checkbox, colored)"
470
+ onLabel="Label on" offLabel="Label off" :colored="true" :toggleSwitch="true"
471
+ :status="validationStatus" :disabled="disabledStatus" />
472
+ <output>v-model: {{ switchButtonCheckboxColored }}</output>
473
+ <CmdFormElement element="input" type="radio" name="radiogroup" id="toggle-switch-radio1"
474
+ v-model="switchButtonRadio" onLabel="Label on" offLabel="Label off" :colored="true"
475
+ :toggleSwitch="true" :status="validationStatus" :disabled="disabledStatus"
476
+ inputValue="radio1" labelText="Labeltext for Toggle-Switch (Radio, colored) #1" />
477
+ <output>v-model: {{ switchButtonRadio }}</output>
478
+ <CmdFormElement element="input" type="radio" name="radiogroup" id="toggle-switch-radio2"
479
+ v-model="switchButtonRadio" onLabel="Label on" offLabel="Label off" :colored="true"
480
+ :toggleSwitch="true" :status="validationStatus" :disabled="disabledStatus"
481
+ inputValue="radio2" labelText="Labeltext for Toggle-Switch (Radio, colored) #2" />
482
+ <output>v-model: {{ switchButtonRadio }}</output>
483
+ <!-- end toggle-switch-radio with switch-label (colored) -->
484
+
485
+ <!-- begin checkboxes and radiobuttons -->
486
+ <h2>Checkboxes and Radiobuttons</h2>
487
+ <h3>Checkboxes [native]</h3>
488
+ <div class="label inline">
489
+ <span class="label-text">Label for native checkboxes:</span>
490
+ <div class="flex-container flex-items-flex-none">
491
+ <CmdFormElement element="input" type="checkbox"
492
+ labelText="Label for checkbox with boolean" v-model="nativeCheckboxValues"
493
+ id="checkbox-with-boolean" name="native-checkbox-group"
494
+ :status="validationStatus" :disabled="disabledStatus" />
495
+ <CmdFormElement element="input" type="checkbox"
496
+ labelText="Label for checkbox with value" v-model="nativeCheckboxValues"
497
+ inputValue="checkboxValue1" id="checkbox-with-value-1"
498
+ name="native-checkbox-group" :status="validationStatus"
499
+ :disabled="disabledStatus" />
500
+ <CmdFormElement element="input" type="checkbox"
501
+ labelText="Label for checkbox with value" v-model="nativeCheckboxValues"
502
+ inputValue="checkboxValue2" id="checkbox-with-value-2"
503
+ name="native-checkbox-group" :status="validationStatus"
504
+ :disabled="disabledStatus" />
505
+ <CmdFormElement element="input" type="checkbox" v-model="nativeCheckboxValues"
506
+ inputValue="checkboxValue3" id="checkbox-with-value-3"
507
+ name="native-checkbox-group" :status="validationStatus"
508
+ :disabled="disabledStatus">
509
+ <template v-slot:labeltext>
510
+ Labeltext with <a href="#">link</a> given by slot
511
+ </template>
512
+ </CmdFormElement>
513
+ </div>
514
+ </div>
515
+ <output>
516
+ v-model: {{ nativeCheckboxValues }}
517
+ </output>
518
+ <h3>Checkboxes (replaced)</h3>
519
+ <div class="label inline">
520
+ <span class="label-text">Label for Replaced Input-Type-Checkbox:</span>
521
+ <div class="flex-container flex-items-flex-none">
522
+ <CmdFormElement element="input" type="checkbox"
523
+ labelText="Label for replaced checkbox" :replaceInputType="true"
524
+ id="inputfield9" name="replaced-checkbox-group" v-model="replacedCheckboxValue"
525
+ inputValue="checkboxValue1" :status="validationStatus"
526
+ :disabled="disabledStatus" />
527
+ <CmdFormElement element="input" type="checkbox"
528
+ labelText="Label for replaced checkbox" name="replaced-checkbox-group"
529
+ v-model="replacedCheckboxValue" inputValue="checkboxValue2"
530
+ :replaceInputType="true" id="inputfield10" :status="validationStatus"
531
+ :disabled="disabledStatus" />
532
+ </div>
533
+ </div>
534
+ <output>
535
+ v-model: {{ replacedCheckboxValue }}
536
+ </output>
537
+ <h3>Radiobuttons [native]</h3>
538
+ <div class="label inline">
539
+ <span class="label-text">Label for native radiobuttons:</span>
540
+ <div class="flex-container flex-items-flex-none">
541
+ <CmdFormElement element="input" labelText="Label for native radiobutton"
542
+ type="radio" id="inputfield11" name="radiogroup" inputValue="radiobuttonValue1"
543
+ v-model="radiobuttonValue" :status="validationStatus"
544
+ :disabled="disabledStatus" />
545
+ <CmdFormElement element="input" labelText="Label for native radiobutton"
546
+ type="radio" id="inputfield12" name="radiogroup" inputValue="radiobuttonValue2"
547
+ v-model="radiobuttonValue" :status="validationStatus"
548
+ :disabled="disabledStatus" />
549
+ </div>
550
+ </div>
551
+ <output>
552
+ v-model: {{ radiobuttonValue }}
553
+ </output>
554
+ <h3>Radiobuttons (replaced)</h3>
555
+ <div class="label inline">
556
+ <span class="label-text">Label for Replaced Input-Type-Radio:</span>
557
+ <div class="flex-container flex-items-flex-none">
558
+ <CmdFormElement element="input" labelText="Label for replaced radiobutton"
559
+ type="radio" :replaceInputType="true" id="inputfield13"
560
+ name="replaced-radiogroup" inputValue="radiobuttonValue1"
561
+ v-model="replacedRadiobuttonValue" :status="validationStatus"
562
+ :disabled="disabledStatus" />
563
+ <CmdFormElement element="input" labelText="Label for replaced radiobutton"
564
+ type="radio" :replaceInputType="true" id="inputfield14"
565
+ name="replaced-radiogroup" inputValue="radiobuttonValue2"
566
+ v-model="replacedRadiobuttonValue" :status="validationStatus"
567
+ :disabled="disabledStatus" />
568
+ </div>
569
+ </div>
570
+ <output>
571
+ v-model: {{ radiobuttonValue }}
572
+ </output>
573
+ <!-- end checkboxes and radiobuttons -->
574
+
575
+ <!-- begin input-groups -->
576
+ <h3 class="headline-demopage" id="section-input-group">
577
+ Input-Group
578
+ <a href="#" class="button small icon-cog" title="Open Component Settings"
579
+ @click.prevent="openSettingsSidebar('CmdInputGroup')"></a>
580
+ </h3>
581
+ <CmdInputGroup ref="CmdInputGroup" v-bind="cmdInputGroupSettingsData"
582
+ labelText="Grouplabel for radio-group given by property:"
583
+ :inputElements="idForReplacedInputsInInputGroup('radio-group')" v-model="inputGroup">
584
+ </CmdInputGroup>
585
+ <output>v-model: {{ inputGroup }}</output>
586
+ <h3>Input Groups with Checkboxes/Radiobuttons (toggle-switches)</h3>
587
+ <CmdInputGroup
588
+ labelText="Grouplabel for checkbox-group styled as toggle-switches (colored):"
589
+ :inputElements="idForReplacedInputsInInputGroup('checkbox-group-toggle-switch')"
590
+ inputTypes="checkbox" v-model="inputGroupValueToggleSwitchCheckbox"
591
+ :toggleSwitches="true" :colored="true" required="required" :status="validationStatus"
592
+ :disabled="disabledStatus" />
593
+ <output>v-model: {{ inputGroupValueToggleSwitchCheckbox }}</output>
594
+ <CmdInputGroup labelText="Grouplabel for radio-group styled as toggle-switches:"
595
+ :inputElements="idForReplacedInputsInInputGroup('radio-group-toggle-switch')"
596
+ inputTypes="radio" v-model="inputGroupValueToggleSwitchRadio" :toggleSwitches="true"
597
+ required="required" :status="validationStatus" :disabled="disabledStatus" />
598
+ <output>v-model: {{ inputGroupValueToggleSwitchRadio }}</output>
599
+ <CmdInputGroup
600
+ labelText="Grouplabel for radio-group given by property styled as multiple-switch:"
601
+ :inputElements="idForReplacedInputsInInputGroup('radio-group-multiple-switch')"
602
+ inputTypes="radio" :multipleSwitch="true" v-model="inputGroupValue3"
603
+ :status="validationStatus" :disabled="disabledStatus" />
604
+ <output>v-model: {{ inputGroupValue3 }}</output>
605
+ <CmdInputGroup
606
+ labelText="Grouplabel for checkbox-group styled as multiple-switch (stretched horizontally):"
607
+ :inputElements="inputGroupCheckboxes" inputTypes="checkbox" :multipleSwitch="true"
608
+ :required="true" v-model="inputGroupValue4" :stretchHorizontally="true"
609
+ :status="validationStatus" :disabled="disabledStatus" />
610
+ <output>v-model: {{ inputGroupValue4 }}</output>
611
+ </fieldset>
612
+ <!-- end fieldset -->
613
+ <div class="flex-container">
614
+ <small>(values will not be submitted with the form!)</small>
615
+ <div class="button-wrapper flex-none">
616
+ <CmdFormElement element="button"
617
+ :nativeButton="{ text: 'Submit-button from component' }" type="submit"
618
+ id="submitbutton" name="submitbutton" :disabled="disabledStatus" />
619
+ <button class="button" type="submit" :disabled="disabledStatus">
620
+ <span class="icon-check"></span>
621
+ <span>Native submit-button</span>
622
+ </button>
560
623
  </div>
561
624
  </div>
562
- <output>
563
- v-model: {{ radiobuttonValue }}
564
- </output>
565
- <!-- end checkboxes and radiobuttons -->
566
-
567
- <!-- begin input-groups -->
568
- <h3 class="headline-demopage" id="section-input-group">
569
- Input-Group
570
- <a href="#" class="button small icon-cog" title="Open Component Settings"
571
- @click.prevent="openSettingsSidebar('CmdInputGroup')"></a>
572
- </h3>
573
- <CmdInputGroup ref="CmdInputGroup" v-bind="cmdInputGroupSettingsData"
574
- labelText="Grouplabel for radio-group given by property:"
575
- :inputElements="idForReplacedInputsInInputGroup('radio-group')" v-model="inputGroup">
576
- </CmdInputGroup>
577
- <output>v-model: {{ inputGroup }}</output>
578
- <h3>Input Groups with Checkboxes/Radiobuttons (toggle-switches)</h3>
579
- <CmdInputGroup labelText="Grouplabel for checkbox-group styled as toggle-switches (colored):"
580
- :inputElements="idForReplacedInputsInInputGroup('checkbox-group-toggle-switch')"
581
- inputTypes="checkbox" v-model="inputGroupValueToggleSwitchCheckbox" :toggleSwitches="true"
582
- :colored="true" required="required" :status="validationStatus" :disabled="disabledStatus" />
583
- <output>v-model: {{ inputGroupValueToggleSwitchCheckbox }}</output>
584
- <CmdInputGroup labelText="Grouplabel for radio-group styled as toggle-switches:"
585
- :inputElements="idForReplacedInputsInInputGroup('radio-group-toggle-switch')"
586
- inputTypes="radio" v-model="inputGroupValueToggleSwitchRadio" :toggleSwitches="true"
587
- required="required" :status="validationStatus" :disabled="disabledStatus" />
588
- <output>v-model: {{ inputGroupValueToggleSwitchRadio }}</output>
589
- <CmdInputGroup
590
- labelText="Grouplabel for radio-group given by property styled as multiple-switch:"
591
- :inputElements="idForReplacedInputsInInputGroup('radio-group-multiple-switch')"
592
- inputTypes="radio" :multipleSwitch="true" v-model="inputGroupValue3"
593
- :status="validationStatus" :disabled="disabledStatus" />
594
- <output>v-model: {{ inputGroupValue3 }}</output>
595
- <CmdInputGroup
596
- labelText="Grouplabel for checkbox-group styled as multiple-switch (stretched horizontally):"
597
- :inputElements="inputGroupCheckboxes" inputTypes="checkbox" :multipleSwitch="true"
598
- :required="true" v-model="inputGroupValue4" :stretchHorizontally="true"
599
- :status="validationStatus" :disabled="disabledStatus" />
600
- <output>v-model: {{ inputGroupValue4 }}</output>
601
- </fieldset>
602
- <!-- end fieldset -->
603
- <div class="flex-container">
604
- <small>(values will not be submitted with the form!)</small>
605
- <div class="button-wrapper flex-none">
606
- <CmdFormElement element="button" :nativeButton="{ text: 'Submit-button from component' }"
607
- type="submit" id="submitbutton" name="submitbutton" :disabled="disabledStatus" />
608
- <button class="button" type="submit" :disabled="disabledStatus">
609
- <span class="icon-check"></span>
610
- <span>Native submit-button</span>
611
- </button>
612
- </div>
613
- </div>
614
- </CmdForm>
615
- </CmdWidthLimitationWrapper>
616
- <!-- end advanced form elements --------------------------------------------------------------------------------------------->
617
-
618
- <!-- begin back to top button --------------------------------------------------------------------------------------------->
619
- <CmdBackToTopButton href="#anchor-back-to-top" scroll-container=".site-wrapper" />
620
- <!-- end back to top button --------------------------------------------------------------------------------------------->
621
-
622
- <!-- begin bank account data --------------------------------------------------------------------------------------------->
623
- <CmdWidthLimitationWrapper>
624
- <h2 class="headline-demopage" id="section-bank-account-data">
625
- <span>Bank Account Data</span>
626
- <a href="#" class="button small icon-cog" title="Open Component Settings"
627
- @click.prevent="openSettingsSidebar('CmdBankAccountData')"></a>
628
- </h2>
629
- <CmdBankAccountData :account-data="bankAccountData" v-bind="cmdBankAccountDataSettingsData"
630
- ref="CmdBankAccountData" />
631
- </CmdWidthLimitationWrapper>
632
- <!-- end bank account data --------------------------------------------------------------------------------------------------->
633
-
634
- <!-- begin basic form --------------------------------------------------------------------------------------------->
635
- <CmdWidthLimitationWrapper>
636
- <h2 class="headline-demopage" id="section-basic-form">
637
- <span>Basic Form</span>
638
- <a href="#" class="button small icon-cog" title="Open Component Settings"
639
- @click.prevent="openSettingsSidebar('CmdBasicForm')"></a>
640
- </h2>
641
- <CmdBasicForm ref="CmdBasicForm" :cmdForm="{ useValidation: true }" :userMessage="{
642
- 'required': false,
643
- 'element': 'textarea',
644
- 'maxLength': 500
645
- }" :submitButton="{
646
- 'text': 'Send request'
647
- }" />
648
- <dl>
649
- <dt>originalEvent</dt>
650
- <dd>{{ basicFormData.originalEvent }}</dd>
651
- <dt>formdata</dt>
652
- <dd>{{ basicFormData.formData }}</dd>
653
- </dl>
654
- </CmdWidthLimitationWrapper>
655
- <!-- end basic form --------------------------------------------------------------------------------------------------->
656
-
657
- <!-- begin boxes --------------------------------------------------------------------------------------------------->
658
- <CmdWidthLimitationWrapper anchorId="section-boxes">
659
- <h2 class="headline-demopage">Boxes</h2>
660
- <h3 class="headline-demopage">
661
- <span>Default Box</span>
662
- <a href="#" class="button small icon-cog" title="Open Component Settings"
663
- @click.prevent="openSettingsSidebar('CmdBox')"></a>
664
- </h3>
665
- <CmdBox ref="CmdBox" v-bind="cmdBoxSettingsData" textBody="Content" :useSlots="['body', 'footer']"
666
- :cmd-headline="{ headlineText: 'Headline for box', headlineLevel: 4 }" :stretchVertically="true">
667
- <template v-slot:header>
668
- <h4>
669
- Texts given by slots
670
- </h4>
671
- </template>
672
- <template v-slot:body>
673
- <p>
674
- This content with paragraphs inside is placed inside the box-body.
675
- </p>
676
- <p>
677
- <strong>Header, Content/Body and Footer of this box are given by slots.</strong>
678
- </p>
679
- <p>Additionally 'allowContentToScroll' is active, which enables (as far as a max-height is
680
- defined) the content of this box to scroll</p>
681
- </template>
682
- <template v-slot:footer>
683
- <p>
684
- Footer content
685
- </p>
686
- </template>
687
- </CmdBox>
688
- <CmdBoxWrapper :useFlexbox="true"
689
- :cmdHeadline="{ headlineText: 'Boxes in BoxWrapper with flexbox', headlineLevel: 3 }"
690
- :useGap="true">
691
- <CmdBox v-for="index in 14" :key="index" textBody="Content"
692
- :cmd-headline="{ headlineText: 'Headline ' + index, headlineLevel: 4 }" />
693
- </CmdBoxWrapper>
694
- <CmdBoxWrapper :use-gap="true"
695
- :cmdHeadline="{ headlineText: 'Different examples of content-boxes (in BoxWrapper)', headlineLevel: 3 }">
696
- <CmdBox :stretchVertically="false"
697
- :cmdHeadline="{ headlineText: 'Box with cutoff text', headlineLevel: 4 }" :useSlots="['body']"
698
- :cutoff-text-lines="4">
699
- <template v-slot:body>
700
- This is a long text that is cutoff after a specific number of lines that can be defined
701
- by the property 'cutoffTextLines' and be toggled by a link below.
702
- </template>
703
- </CmdBox>
704
- <CmdBox :useSlots="['header', 'body', 'footer']" :allowContentToScroll="true">
625
+ </CmdForm>
626
+ </CmdWidthLimitationWrapper>
627
+ <!-- end advanced form elements --------------------------------------------------------------------------------------------->
628
+
629
+ <!-- begin back to top button --------------------------------------------------------------------------------------------->
630
+ <CmdBackToTopButton href="#anchor-back-to-top" scroll-container=".site-wrapper" />
631
+ <!-- end back to top button --------------------------------------------------------------------------------------------->
632
+
633
+ <!-- begin bank account data --------------------------------------------------------------------------------------------->
634
+ <CmdWidthLimitationWrapper>
635
+ <h2 class="headline-demopage" id="section-bank-account-data">
636
+ <span>Bank Account Data</span>
637
+ <a href="#" class="button small icon-cog" title="Open Component Settings"
638
+ @click.prevent="openSettingsSidebar('CmdBankAccountData')"></a>
639
+ </h2>
640
+ <CmdBankAccountData :account-data="bankAccountData" v-bind="cmdBankAccountDataSettingsData"
641
+ ref="CmdBankAccountData" />
642
+ </CmdWidthLimitationWrapper>
643
+ <!-- end bank account data --------------------------------------------------------------------------------------------------->
644
+
645
+ <!-- begin basic form --------------------------------------------------------------------------------------------->
646
+ <CmdWidthLimitationWrapper>
647
+ <h2 class="headline-demopage" id="section-basic-form">
648
+ <span>Basic Form</span>
649
+ <a href="#" class="button small icon-cog" title="Open Component Settings"
650
+ @click.prevent="openSettingsSidebar('CmdBasicForm')"></a>
651
+ </h2>
652
+ <CmdBasicForm ref="CmdBasicForm" :cmdForm="{ useValidation: true }" :userMessage="{
653
+ 'required': false,
654
+ 'element': 'textarea',
655
+ 'maxLength': 500
656
+ }" :submitButton="{
657
+ 'text': 'Send request'
658
+ }" />
659
+ <dl>
660
+ <dt>originalEvent</dt>
661
+ <dd>{{ basicFormData.originalEvent }}</dd>
662
+ <dt>formdata</dt>
663
+ <dd>{{ basicFormData.formData }}</dd>
664
+ </dl>
665
+ </CmdWidthLimitationWrapper>
666
+ <!-- end basic form --------------------------------------------------------------------------------------------------->
667
+
668
+ <!-- begin boxes --------------------------------------------------------------------------------------------------->
669
+ <CmdWidthLimitationWrapper anchorId="section-boxes">
670
+ <h2 class="headline-demopage">Boxes</h2>
671
+ <h3 class="headline-demopage">
672
+ <span>Default Box</span>
673
+ <a href="#" class="button small icon-cog" title="Open Component Settings"
674
+ @click.prevent="openSettingsSidebar('CmdBox')"></a>
675
+ </h3>
676
+ <CmdBox ref="CmdBox" v-bind="cmdBoxSettingsData" textBody="Content" :useSlots="['body', 'footer']"
677
+ :cmd-headline="{ headlineText: 'Headline for box', headlineLevel: 4 }"
678
+ :stretchVertically="true">
705
679
  <template v-slot:header>
706
680
  <h4>
707
681
  Texts given by slots
@@ -715,7 +689,8 @@
715
689
  <strong>Header, Content/Body and Footer of this box are given by slots.</strong>
716
690
  </p>
717
691
  <p>Additionally 'allowContentToScroll' is active, which enables (as far as a max-height
718
- is defined) the content of this box to scroll</p>
692
+ is
693
+ defined) the content of this box to scroll</p>
719
694
  </template>
720
695
  <template v-slot:footer>
721
696
  <p>
@@ -723,1208 +698,1267 @@
723
698
  </p>
724
699
  </template>
725
700
  </CmdBox>
726
- <CmdBox :useSlots="['header', 'body']" :useBoxBodyPadding="false" :collapsible="true">
727
- <template v-slot:header>
728
- <h4>
729
- Box with inputs
730
- </h4>
701
+ <CmdBoxWrapper :useFlexbox="true"
702
+ :cmdHeadline="{ headlineText: 'Boxes in BoxWrapper with flexbox', headlineLevel: 3 }"
703
+ :useGap="true">
704
+ <CmdBox v-for="index in 14" :key="index" textBody="Content"
705
+ :cmd-headline="{ headlineText: 'Headline ' + index, headlineLevel: 4 }" />
706
+ </CmdBoxWrapper>
707
+ <CmdBoxWrapper :use-gap="true"
708
+ :cmdHeadline="{ headlineText: 'Different examples of content-boxes (in BoxWrapper)', headlineLevel: 3 }">
709
+ <CmdBox :stretchVertically="false"
710
+ :cmdHeadline="{ headlineText: 'Box with cutoff text', headlineLevel: 4 }"
711
+ :useSlots="['body']" :cutoff-text-lines="4">
712
+ <template v-slot:body>
713
+ This is a long text that is cutoff after a specific number of lines that can be
714
+ defined
715
+ by the property 'cutoffTextLines' and be toggled by a link below.
716
+ </template>
717
+ </CmdBox>
718
+ <CmdBox :useSlots="['header', 'body', 'footer']" :allowContentToScroll="true">
719
+ <template v-slot:header>
720
+ <h4>
721
+ Texts given by slots
722
+ </h4>
723
+ </template>
724
+ <template v-slot:body>
725
+ <p>
726
+ This content with paragraphs inside is placed inside the box-body.
727
+ </p>
728
+ <p>
729
+ <strong>Header, Content/Body and Footer of this box are given by slots.</strong>
730
+ </p>
731
+ <p>Additionally 'allowContentToScroll' is active, which enables (as far as a
732
+ max-height
733
+ is defined) the content of this box to scroll</p>
734
+ </template>
735
+ <template v-slot:footer>
736
+ <p>
737
+ Footer content
738
+ </p>
739
+ </template>
740
+ </CmdBox>
741
+ <CmdBox :useSlots="['header', 'body']" :useBoxBodyPadding="false" :collapsible="true">
742
+ <template v-slot:header>
743
+ <h4>
744
+ Box with inputs
745
+ </h4>
746
+ </template>
747
+ <template v-slot:body>
748
+ <CmdForm :legend="{ show: false }">
749
+ <CmdFormElement element="input" type="text" :required="true" labelText="Username:"
750
+ placeholder="Username" />
751
+ <CmdFormElement element="input" type="password" :required="true"
752
+ labelText="Password:" placeholder="Password" />
753
+ </CmdForm>
754
+ </template>
755
+ <!-- will not be displayed, because useSlots-property does not contain 'footer' in array -->
756
+ <template v-slot:footer>
757
+ <p>
758
+ footer content
759
+ </p>
760
+ </template>
761
+ </CmdBox>
762
+ <CmdBox :useSlots="['header', 'body']" :useBoxBodyPadding="false">
763
+ <template v-slot:header>
764
+ <h4>
765
+ Box with links
766
+ </h4>
767
+ </template>
768
+ <template v-slot:body>
769
+ <ul class="navigation">
770
+ <li><a href="#" @click.prevent="">Link name 1</a></li>
771
+ <li><a href="#" @click.prevent="">Link name 2</a></li>
772
+ <li><a href="#" @click.prevent="">Link name 3</a></li>
773
+ <li><a href="#" @click.prevent="">Link name 4</a></li>
774
+ </ul>
775
+ </template>
776
+ <!-- will not be displayed, because useSlots-property does not contain 'footer' in array -->
777
+ <template v-slot:footer>
778
+ <p>
779
+ footer content
780
+ </p>
781
+ </template>
782
+ </CmdBox>
783
+ <CmdBox :useSlots="['header', 'body']" :useBoxBodyPadding="false"
784
+ :cmdHeadline="{ headlineText: 'Collapsible box', headlineLevel: 4 }" :collapsible="true">
785
+ <template v-slot:header>
786
+ <h4>
787
+ Collapsible box with image
788
+ </h4>
789
+ </template>
790
+ <template v-slot:body>
791
+ <img src="/media/images/content-images/landscape-medium.jpg" alt="Alternative text" />
792
+ </template>
793
+ </CmdBox>
794
+ <CmdBox :useSlots="['header', 'body', 'footer']" :useBoxBodyPadding="false">
795
+ <template v-slot:header>
796
+ <h4>
797
+ Box with image, content and link
798
+ </h4>
799
+ </template>
800
+ <template v-slot:body>
801
+ <img src="/media/images/content-images/landscape-medium.jpg" alt="Alternative text" />
802
+ <div class="default-padding">
803
+ <h4>Custom headline</h4>
804
+ <p>Image, custom-headline and this text for the component are given by slot</p>
805
+ </div>
806
+ </template>
807
+ <template v-slot:footer>
808
+ <p>
809
+ <a href="#">Read more&hellip;</a>
810
+ </p>
811
+ </template>
812
+ </CmdBox>
813
+ <CmdBox :repeatHeadlineInBoxBody="true" :useBoxBodyPadding="true"
814
+ :cmdHeadline="{ headlineText: 'Box with image, content and link', headlineLevel: 4 }"
815
+ textBody="Image, headline and this text for the component are given by property"
816
+ :cmdImage="{ image: { src: '/media/images/content-images/landscape-medium.jpg', alt: 'Alternative text' } }"
817
+ :cmdLink="{
818
+ linkType: 'href',
819
+ path: '#',
820
+ icon: {
821
+ iconClass: 'icon-chevron-two-stripes-right',
822
+ position: 'right'
823
+ },
824
+ text: 'Read more'
825
+ }" />
826
+ <CmdBox :useBoxBodyPadding="true"
827
+ :cmdHeadline="{ headlineText: 'Box with large icon and some content', headlineLevel: 4 }"
828
+ headlinePosition="body" :cmdIcon="{ iconClass: 'icon-home', type: 'auto' }"
829
+ textBody="Box with large icon, headline in body and content all given by properties." />
830
+ </CmdBoxWrapper>
831
+
832
+ <!-- begin product boxes -->
833
+ <h3>Product boxes</h3>
834
+ <CmdBoxWrapper :boxesPerRow="[5, 2, 1]" :useRowViewAsDefault="true" :useGap="true">
835
+ <template v-slot="slotProps">
836
+ <CmdBox v-for="(product, index) in boxProductData" :key="index" boxType="product"
837
+ :product="product" :cmdHeadline="{ headlineLevel: 4 }" :rowView="slotProps.rowView" />
731
838
  </template>
732
- <template v-slot:body>
733
- <CmdForm :legend="{ show: false }">
734
- <CmdFormElement element="input" type="text" :required="true" labelText="Username:"
735
- placeholder="Username" />
736
- <CmdFormElement element="input" type="password" :required="true" labelText="Password:"
737
- placeholder="Password" />
839
+ </CmdBoxWrapper>
840
+ <!-- end product boxes -->
841
+
842
+ <!-- begin user boxes -->
843
+ <h3>User boxes</h3>
844
+ <CmdBoxWrapper :boxesPerRow="[5, 2, 1]" :useRowViewAsDefault="true" :useGap="true">
845
+ <template v-slot="slotProps">
846
+ <CmdBox v-for="index in boxUserData.length" :key="index" boxType="user"
847
+ :user="boxUserData[index - 1]" :cmdHeadline="{ headlineLevel: 5 }"
848
+ :rowView="slotProps.rowView" />
849
+ </template>
850
+ </CmdBoxWrapper>
851
+ <!-- end user boxes -->
852
+
853
+ <h3><span>Boxes in BoxWrapper (collapsible)</span>
854
+ <a href="#" class="button small icon-cog" title="Open Component Settings"
855
+ @click.prevent="openSettingsSidebar('CmdBoxWrapper')"></a>
856
+ </h3>
857
+ <CmdBoxWrapper ref="CmdBoxWrapper" :boxesPerRow="[4, 1]" :openBoxesByDefault="[2]"
858
+ :useRowViewAsDefault="true" :allowMultipleExpandedBoxes="false" :stretch-boxes-vertically="true"
859
+ :useGap="true">
860
+ <template v-slot="slotProps">
861
+ <CmdBox v-for="index in boxProductData.length" :key="index" boxType="content"
862
+ :collapsible="true" :useSlots="['body']"
863
+ :cmdHeadline="{ headlineText: 'Box ' + index, headlineLevel: 5 }"
864
+ :rowView="slotProps.rowView" :openCollapsedBox="slotProps.boxIsOpen(index - 1)"
865
+ @toggleCollapse="slotProps.boxToggled(index - 1, $event)">
866
+ <template #body>{{ slotProps.currentOpenBox }}Content {{ index }}</template>
867
+ </CmdBox>
868
+ </template>
869
+ </CmdBoxWrapper>
870
+ </CmdWidthLimitationWrapper>
871
+ <!-- end boxes --------------------------------------------------------------------------------------------------->
872
+
873
+ <!-- begin breadcrumbs --------------------------------------------------------------------------------------------------->
874
+ <CmdWidthLimitationWrapper inner-component="div">
875
+ <h2 class="headline-demopage" id="section-breadcrumbs">
876
+ <span>Breadcrumbs</span>
877
+ <a href="#" class="button small icon-cog" title="Open Component Settings"
878
+ @click.prevent="openSettingsSidebar('CmdBreadcrumbs')"></a>
879
+ </h2>
880
+ <CmdBreadcrumbs ref="CmdBreadcrumbs" :breadcrumbLabel="breadcrumbsData.breadcrumbLabel"
881
+ :breadcrumbLinks="breadcrumbsData.breadcrumbLinks" v-bind="cmdBreadcrumbsSettingsData" />
882
+ </CmdWidthLimitationWrapper>
883
+ <!-- end breadcrumbs --------------------------------------------------------------------------------------------------->
884
+
885
+ <!-- begin code-output --------------------------------------------------------------------------------------------------->
886
+ <CmdWidthLimitationWrapper>
887
+ <h2 class="headline-demopage" id="section-code-output">
888
+ <span>Code Output</span>
889
+ <a href="#" class="button small icon-cog" title="Open Component Settings"
890
+ @click.prevent="openSettingsSidebar('CmdCodeOutput')"></a>
891
+ </h2>
892
+ <CmdCodeOutput ref="CmdCodeOutput" v-bind="cmdCodeOutputSettingsData">
893
+ {{ cmdCodeOutputSlotContent }}
894
+ </CmdCodeOutput>
895
+ </CmdWidthLimitationWrapper>
896
+ <!-- end code-output --------------------------------------------------------------------------------------------------->
897
+
898
+ <!-- begin company-logo --------------------------------------------------------------------------------------------------->
899
+ <CmdWidthLimitationWrapper>
900
+ <h2 class="headline-demopage" id="section-company-logo">
901
+ <span>Company Logo</span>
902
+ <a href="#" class="button small icon-cog" title="Open Component Settings"
903
+ @click.prevent="openSettingsSidebar('CmdCompanyLogo')"></a>
904
+ </h2>
905
+ <CmdCompanyLogo ref="CmdCompanyLogo" :link="companyLogoData.link"
906
+ v-bind="cmdCompanyLogoSettingsData" />
907
+ </CmdWidthLimitationWrapper>
908
+ <!-- end company-logo --------------------------------------------------------------------------------------------------->
909
+
910
+ <!-- begin container --------------------------------------------------------------------------------------------------->
911
+ <CmdWidthLimitationWrapper>
912
+ <h2 class="headline-demopage" id="section-container">
913
+ <span>Containers</span>
914
+ <a href="#" class="button small icon-cog" title="Open Component Settings"
915
+ @click.prevent="openSettingsSidebar('CmdContainer')"></a>
916
+ </h2>
917
+ <h3>Container (type "default")</h3>
918
+ <CmdContainer style="border: 1px dashed var(--color-gray-30)" ref="CmdContainer"
919
+ v-bind="cmdContainerSettingsData">
920
+ <p>Slot-content</p>
921
+ <p>Slot-content</p>
922
+ <p>Slot-content</p>
923
+ </CmdContainer>
924
+ <h3>Container (type "flex", horizontal)</h3>
925
+ <CmdContainer style="border: 1px dashed var(--color-gray-30)" ref="CmdContainer"
926
+ v-bind="cmdContainerSettingsData" containerType="flex" contentOrientation="horizontal">
927
+ <p>Slot-content</p>
928
+ <p>Slot-content</p>
929
+ <p>Slot-content</p>
930
+ </CmdContainer>
931
+ <h3>Container (type "flex", vertical)</h3>
932
+ <CmdContainer style="border: 1px dashed var(--color-gray-30)" ref="CmdContainer"
933
+ v-bind="cmdContainerSettingsData" containerType="flex" contentOrientation="vertical">
934
+ <p>Slot-content</p>
935
+ <p>Slot-content</p>
936
+ <p>Slot-content</p>
937
+ </CmdContainer>
938
+ <h3>Container with horizontal slots</h3>
939
+ <CmdContainer style="border: 1px dashed var(--color-gray-30)" ref="CmdContainer"
940
+ v-bind="cmdContainerSettingsData" containerType="grid">
941
+ <p>Slot-content</p>
942
+ <p>Slot-content</p>
943
+ <p>Slot-content</p>
944
+ <p>Slot-content</p>
945
+ <p>Slot-content</p>
946
+ <p>Slot-content</p>F
947
+ </CmdContainer>
948
+ </CmdWidthLimitationWrapper>
949
+ <!-- end container --------------------------------------------------------------------------------------------------->
950
+
951
+ <!-- begin cookie-disclaimer --------------------------------------------------------------------------------------------------->
952
+ <CmdWidthLimitationWrapper>
953
+ <h2 class="headline-demopage" id="section-cookie-disclaimer">Cookie Disclaimer</h2>
954
+ <a class="button" href="#" @click.prevent="fancyBoxCookieDisclaimer = true">
955
+ <span>Open Cookie Disclaimer</span>
956
+ </a>
957
+ </CmdWidthLimitationWrapper>
958
+ <!-- end cookie-disclaimer --------------------------------------------------------------------------------------------------->
959
+
960
+ <!-- begin fancybox --------------------------------------------------------------------------------------------------->
961
+ <CmdWidthLimitationWrapper>
962
+ <h2 class="headline-demopage" id="section-fancybox">Fancybox</h2>
963
+ <h3>FancyBox with text</h3>
964
+ <a href="#" @click.prevent="showFancyBox('text', 'Some text', 'FancyBox with text')">Open
965
+ FancyBox
966
+ with text</a>
967
+ <h3>FancyBox with large image given by url</h3>
968
+ <a href="#"
969
+ @click.prevent="showFancyBox('url', '/media/images/demo-images/large/landscape-01.jpg', 'FancyBox with large image given by url')"
970
+ title="Open FancyBox with large image given by url" style="align-self: flex-start">
971
+ <img src="/media/images/demo-images/small/landscape-01.jpg" alt="Alternative text" />
972
+ </a>
973
+ <h3>FancyBox with large image given by property</h3>
974
+ <a href="#"
975
+ @click.prevent="showFancyBox('image', { large: '/media/images/demo-images/large/landscape-02.jpg' }, 'FancyBox with large image given by property')"
976
+ title="Open FancyBox with large image given by property" style="align-self: flex-start">
977
+ <img src="/media/images/demo-images/small/landscape-02.jpg" alt="Alternative text" />
978
+ </a>
979
+ <h3>FancyBox with image as object give by property</h3>
980
+ <a href="#" @click.prevent="showFancyBox('image', {
981
+ small: '/media/images/demo-images/medium/landscape-03.jpg',
982
+ medium: '/media/images/demo-images/medium/landscape-03.jpg',
983
+ large: '/media/images/demo-images/large/landscape-03.jpg'
984
+ }, 'FancyBox with large image given by property')"
985
+ title="Open FancyBox with large image given by property" style="align-self: flex-start">
986
+ <img src="/media/images/demo-images/small/landscape-03.jpg" alt="Alternative text" />
987
+ </a>
988
+ </CmdWidthLimitationWrapper>
989
+ <!-- end fancybox --------------------------------------------------------------------------------------------------->
990
+
991
+ <!-- begin flexible-scroll-container --------------------------------------------------------------------------------------------------->
992
+ <CmdWidthLimitationWrapper>
993
+ <h2 class="headline-demopage" id="section-flexible-scroll-container">Flexible Scroll-Container
994
+ </h2>
995
+ <CmdFlexibleScrollContainer style="border: 1px dashed var(--color-gray-30)">
996
+ <template v-slot:fixed-wrapper>
997
+ <div class="default-padding" style="border: 1px dashed var(--color-gray-30)">
998
+ Fixed content
999
+ </div>
1000
+ </template>
1001
+ <template v-slot:scroll-wrapper>
1002
+ <div class="default-padding" style="border: 1px dashed var(--color-gray-30)">
1003
+ <ul>
1004
+ <li>Dynamic Content</li>
1005
+ <li>Dynamic Content</li>
1006
+ <li>Dynamic Content</li>
1007
+ <li>Dynamic Content</li>
1008
+ <li>Dynamic Content</li>
1009
+ <li>Dynamic Content</li>
1010
+ <li>Dynamic Content</li>
1011
+ <li>Dynamic Content</li>
1012
+ <li>Dynamic Content</li>
1013
+ <li>Dynamic Content</li>
1014
+ <li>Dynamic Content</li>
1015
+ <li>Dynamic Content</li>
1016
+ <li>Dynamic Content</li>
1017
+ <li>Dynamic Content</li>
1018
+ <li>Dynamic Content</li>
1019
+ <li>Dynamic Content</li>
1020
+ <li>Dynamic Content</li>
1021
+ <li>Dynamic Content</li>
1022
+ <li>Dynamic Content</li>
1023
+ <li>Dynamic Content</li>
1024
+ <li>Dynamic Content</li>
1025
+ <li>Dynamic Content</li>
1026
+ <li>Dynamic Content</li>
1027
+ <li>Dynamic Content</li>
1028
+ </ul>
1029
+ </div>
1030
+ </template>
1031
+ </CmdFlexibleScrollContainer>
1032
+ </CmdWidthLimitationWrapper>
1033
+ <!-- end flexible-scroll-container --------------------------------------------------------------------------------------------------->
1034
+
1035
+ <!-- begin footnotes --------------------------------------------------------------------------------------------------->
1036
+ <CmdWidthLimitationWrapper>
1037
+ <h2 class="headline-demopage" id="section-footnote">
1038
+ <span>Footnotes</span>
1039
+ <a href="#" class="button small icon-cog" title="Open Component Settings"
1040
+ @click.prevent="openSettingsSidebar('CmdFootnote')"></a>
1041
+ </h2>
1042
+ <CmdFootnote ref="CmdFootnote" v-bind="cmdFootnoteSettingsData"
1043
+ :descriptionData="footnoteData[0].descriptionData" />
1044
+ <CmdFootnote :descriptionData="footnoteData[1].descriptionData"
1045
+ :descriptionTermType="footnoteData[1].descriptionTermType" />
1046
+
1047
+ </CmdWidthLimitationWrapper>
1048
+ <!-- end footnotes --------------------------------------------------------------------------------------------------->
1049
+
1050
+ <!-- begin forms --------------------------------------------------------------------------------------------------->
1051
+ <CmdWidthLimitationWrapper>
1052
+ <h2 class="headline-demopage" id="section-forms">Forms</h2>
1053
+ <h3>Form elements given by data</h3>
1054
+ <CmdForm :useFieldset="true" :useSlot="false" id="form-component" novalidate="novalidate"
1055
+ :formElements="formElementsData" @submit="doConsoleLog" v-model="cmdFormData" />
1056
+ <h3>Form elements given by slot</h3>
1057
+ <CmdForm :use-fieldset="true" id="form-component" novalidate="novalidate"
1058
+ :submitButton="{ position: 'belowFieldset' }" @submit="doConsoleLog">
1059
+ <CmdFormElement element="input" text="text" name="input-text" labelText="Text input"
1060
+ placeholder="Text input" />
1061
+ <CmdFormElement element="input" text="number" labelText="Number input" name="input-number"
1062
+ modelValue="1" />
1063
+ <CmdFormElement element="input" text="password" labelText="Password input"
1064
+ name="password-number" placeholder="Password input" />
1065
+ </CmdForm>
1066
+ </CmdWidthLimitationWrapper>
1067
+ <!-- end forms --------------------------------------------------------------------------------------------------->
1068
+
1069
+ <!-- begin google-maps --------------------------------------------------------------------------------------------------->
1070
+ <CmdWidthLimitationWrapper>
1071
+ <h2 class="headline-demopage" id="section-google-maps">Google Maps&trade;</h2>
1072
+ <CmdGoogleMaps :address="addressData[1]" />
1073
+ </CmdWidthLimitationWrapper>
1074
+ <!-- end google-maps --------------------------------------------------------------------------------------------------->
1075
+
1076
+ <!-- begin headlines --------------------------------------------------------------------------------------------------->
1077
+ <CmdWidthLimitationWrapper>
1078
+ <h2 class="headline-demopage" id="section-headlines">
1079
+ <span>Headlines</span>
1080
+ <a href="#" class="button small icon-cog" title="Open Component Settings"
1081
+ @click.prevent="openSettingsSidebar('CmdHeadline')"></a>
1082
+ </h2>
1083
+ <CmdHeadline ref="CmdHeadline" v-bind="cmdHeadlineSettingsData" />
1084
+ <CmdHeadline headlineLevel="3" headlineText="Headline text" :cmdIcon="{ iconClass: 'icon-home' }" />
1085
+ <CmdHeadline headlineLevel="3"
1086
+ headlineText="Headline text<br /> with html-content given by property" />
1087
+ <CmdHeadline headlineLevel="3">
1088
+ Headline text<br /> with html-content given by slot
1089
+ </CmdHeadline>
1090
+
1091
+ </CmdWidthLimitationWrapper>
1092
+ <!-- end headlines --------------------------------------------------------------------------------------------------->
1093
+
1094
+ <!-- begin icons --------------------------------------------------------------------------------------------------->
1095
+ <CmdWidthLimitationWrapper>
1096
+ <h2 class="headline-demopage" id="section-icons">Icons</h2>
1097
+ <ul>
1098
+ <li>
1099
+ <span>Icon from local iconfont</span>
1100
+ <CmdIcon iconClass="icon-home" />
1101
+ </li>
1102
+ <li>
1103
+ <span>Icon from iconify-api (icomoon-font)</span>
1104
+ <CmdIcon iconClass="icomoon-free:home" />
1105
+ </li>
1106
+ <li>
1107
+ <span>Icon from iconify-api (bootstrap-font)</span>
1108
+ <CmdIcon iconClass="bi:house-fill" />
1109
+ </li>
1110
+ <li>
1111
+ <span>Icon from iconify-api (material-design-font)</span>
1112
+ <CmdIcon iconClass="mdi:home" />
1113
+ </li>
1114
+ <li>
1115
+ <span>Icon from iconify-api (font-awesome-solid-font)</span>
1116
+ <CmdIcon iconClass="fa6-solid:house-chimney" />
1117
+ </li>
1118
+ </ul>
1119
+ </CmdWidthLimitationWrapper>
1120
+ <!-- end icons --------------------------------------------------------------------------------------------------->
1121
+
1122
+ <!-- begin images --------------------------------------------------------------------------------------------------->
1123
+ <CmdWidthLimitationWrapper>
1124
+ <h2 class="headline-demopage" id="section-image">
1125
+ <span>Image</span>
1126
+ <a href="#" class="button small icon-cog" title="Open Component Settings"
1127
+ @click.prevent="openSettingsSidebar('CmdImage')"></a>
1128
+ </h2>
1129
+ <div class="flex-container">
1130
+ <CmdImage ref="CmdImage" :image="imageData[0].image" :figcaption="imageData[0].figcaption"
1131
+ v-bind="cmdImageSettingsData" />
1132
+ <CmdImage :image="imageData[1].image" :figcaption="imageData[1].figcaption" />
1133
+ </div>
1134
+ </CmdWidthLimitationWrapper>
1135
+ <!-- end images --------------------------------------------------------------------------------------------------->
1136
+
1137
+ <!-- begin image-gallery--------------------------------------------------------------------------------------------------->
1138
+ <CmdWidthLimitationWrapper>
1139
+ <h2 class="headline-demopage" id="section-image-gallery">
1140
+ <span>Image-Gallery</span>
1141
+ <a href="#" class="button small icon-cog" title="Open Component Settings"
1142
+ @click.prevent="openSettingsSidebar('CmdImageGallery')"></a>
1143
+ </h2>
1144
+ <CmdImageGallery ref="CmdImageGallery" :images="imageGalleryData"
1145
+ v-bind="cmdImageGallerySettingsData" />
1146
+ </CmdWidthLimitationWrapper>
1147
+ <!-- end image-gallery --------------------------------------------------------------------------------------------------->
1148
+
1149
+ <!-- begin image-zoom --------------------------------------------------------------------------------------------------->
1150
+ <CmdWidthLimitationWrapper>
1151
+ <h2 class="headline-demopage" id="section-image-zoom">
1152
+ Image-Zoom
1153
+ </h2>
1154
+ <CmdImageZoom :imageSmall="imageZoomData.imageSmall" :imageLarge="imageZoomData.imageLarge" />
1155
+ </CmdWidthLimitationWrapper>
1156
+ <!-- end image-zoom --------------------------------------------------------------------------------------------------->
1157
+
1158
+ <!-- begin link --------------------------------------------------------------------------------------------------->
1159
+ <CmdWidthLimitationWrapper>
1160
+ <h2 class="headline-demopage" id="section-link">
1161
+ <span>Link</span>
1162
+ <a href="#" class="button small icon-cog" title="Open Component Settings"
1163
+ @click.prevent="openSettingsSidebar('CmdLink')"></a>
1164
+ </h2>
1165
+ <CmdLink linkType="href" ref="CmdLink" v-bind="cmdLinkSettingsData"
1166
+ :icon="{ iconClass: 'icon-chevron-one-stripe-right', position: 'right', tooltip: 'Tooltip for hyperlink' }"
1167
+ @click="cmdLinkOutput" />
1168
+ <CmdLink linkType="href" ref="CmdLink" v-bind="cmdLinkSettingsData"
1169
+ :icon="{ iconClass: 'icon-chevron-one-stripe-left', position: 'left', tooltip: 'Tooltip for hyperlink' }"
1170
+ @click="cmdLinkOutput" />
1171
+ <CmdLink linkType="href" ref="CmdLink" v-bind="cmdLinkSettingsData" text="Link with fancybox"
1172
+ :fancybox="true"
1173
+ :icon="{ iconClass: 'icon-chevron-one-stripe-right', position: 'right', tooltip: 'Tooltip for hyperlink' }" />
1174
+ <CmdLink linkType="href" ref="CmdLink" style="align-self: flex-start" v-bind="cmdLinkSettingsData"
1175
+ text="Link styled as box" :styleAsBox="true"
1176
+ :icon="{ iconClass: 'icon-home', position: 'top', tooltip: 'Tooltip for hyperlink' }" />
1177
+ <CmdLink linkType="href" :styleAsButton="true" text="Link styled as button"
1178
+ :icon="{ iconClass: 'icon-home', position: 'left' }" @click="cmdLinkOutput" />
1179
+ <CmdLink linkType="submit" text="Submit button" :icon="{ iconClass: 'icon-home', position: 'left' }"
1180
+ @click="cmdLinkOutput" />
1181
+ <CmdLink linkType="button" text="Add link" :primaryButton="true"
1182
+ :icon="{ iconClass: 'icon-link', position: 'right' }" @click="showCmdLink = true" />
1183
+ <CmdLink v-if="showCmdLink" path="#" linkType="href" text="Link added on click" :fancybox="true"
1184
+ :icon="{ iconClass: 'icon-chevron-one-stripe-right', position: 'right', tooltip: 'Tooltip for hyperlink' }" />
1185
+ <dl class="output">
1186
+ <dt>Event:</dt>
1187
+ <dd>{{ outputCmdLink?.event?.originalEvent.originalEvent }}</dd>
1188
+ <dt>Target:</dt>
1189
+ <dd>{{ outputCmdLink?.event?.originalEvent.target }}</dd>
1190
+ <dt>LinkType:</dt>
1191
+ <dd>{{ outputCmdLink?.event?.originalEvent.linkType }}</dd>
1192
+ </dl>
1193
+ </CmdWidthLimitationWrapper>
1194
+ <!-- end link --------------------------------------------------------------------------------------------------->
1195
+
1196
+ <!-- begin lists --------------------------------------------------------------------------------------------------->
1197
+ <CmdWidthLimitationWrapper>
1198
+ <h2 class="headline-demopage" id="section-list">
1199
+ <span>List</span>
1200
+ <a href="#" class="button small icon-cog" title="Open Component Settings"
1201
+ @click.prevent="openSettingsSidebar('CmdList')"></a>
1202
+ </h2>
1203
+ <CmdList :cmdHeadline="{ headlineText: 'List of links', headlineLevel: 3 }" ref="CmdList"
1204
+ v-bind="cmdListSettingsData" :items="listData" listContentType="links" @click="cmdLinkOutput" />
1205
+ <dl class="output">
1206
+ <dt>Event:</dt>
1207
+ <dd>{{ outputCmdLink?.event?.originalEvent }}</dd>
1208
+ <dt>Target:</dt>
1209
+ <dd>{{ outputCmdLink?.event?.originalEvent.target }}</dd>
1210
+ <dt>LinkType:</dt>
1211
+ <dd>{{ outputCmdLink?.event?.linkType }}</dd>
1212
+ </dl>
1213
+ <CmdList :cmdHeadline="{ headlineText: 'List of images', headlineLevel: 3 }"
1214
+ :items="imageGalleryData" orientation="horizontal" listContentType="images" />
1215
+ <div class="flex-container">
1216
+ <CmdList :cmdHeadline="{ headlineText: 'List of tags (default)', headlineLevel: 3 }"
1217
+ :items="listOfTagsData" orientation="horizontal" listContentType="tags" />
1218
+ <CmdList :cmdHeadline="{ headlineText: 'List of tags (primary)', headlineLevel: 3 }"
1219
+ :items="listOfTagsData" orientation="horizontal" listContentType="tags"
1220
+ highlightLevel="primary" />
1221
+ <CmdList :cmdHeadline="{ headlineText: 'List of tags (secondary)', headlineLevel: 3 }"
1222
+ :items="listOfTagsData" orientation="horizontal" listContentType="tags"
1223
+ highlightLevel="secondary" />
1224
+ <CmdList :cmdHeadline="{ headlineText: 'List of tags (tertiary)', headlineLevel: 3 }"
1225
+ :items="listOfTagsData" orientation="horizontal" listContentType="tags"
1226
+ highlightLevel="tertiary" />
1227
+ </div>
1228
+ <h3>Description Lists</h3>
1229
+ <div class="flex-container">
1230
+ <CmdList listType="description"
1231
+ :cmdHeadline="{ headlineText: 'List with text', headlineLevel: 4 }"
1232
+ :items="descriptionListData.text" />
1233
+ <CmdList listType="description"
1234
+ :cmdHeadline="{ headlineText: 'List with text (term right aligned)', headlineLevel: 4 }"
1235
+ :alignDescriptionTermRight="true" :items="descriptionListData.text" />
1236
+ <CmdList listType="description"
1237
+ :cmdHeadline="{ headlineText: 'List with icons', headlineLevel: 4 }"
1238
+ :items="descriptionListData.icons" />
1239
+ </div>
1240
+ </CmdWidthLimitationWrapper>
1241
+ <!-- end lists --------------------------------------------------------------------------------------------------->
1242
+
1243
+ <!-- begin login-form --------------------------------------------------------------------------------------------------->
1244
+ <CmdWidthLimitationWrapper>
1245
+ <h2 class="headline-demopage" id="section-login-form">
1246
+ <span>Login Form</span>
1247
+ <a href="#" class="button small icon-cog" title="Open Component Settings"
1248
+ @click.prevent="openSettingsSidebar('CmdLoginForm')"></a>
1249
+ </h2>
1250
+ <CmdForm :use-fieldset="false">
1251
+ <CmdLoginForm ref="CmdLoginForm" v-bind="cmdLoginFormSettingsData" v-model="loginData" />
1252
+ </CmdForm>
1253
+ <p>LoginData: {{ loginData }}</p>
1254
+ </CmdWidthLimitationWrapper>
1255
+ <!-- end login-form --------------------------------------------------------------------------------------------------->
1256
+
1257
+ <!-- begin mail-tool --------------------------------------------------------------------------------------------------->
1258
+ <CmdWidthLimitationWrapper>
1259
+ <h2 class="headline-demopage" id="section-mail-tool">
1260
+ <span>Mail Tool</span>
1261
+ </h2>
1262
+ <CmdMailTool ref="CmdMailTool" :mailsInbox="mailToolData.inbox"
1263
+ :mailsOutbox="mailToolData.outbox" />
1264
+ </CmdWidthLimitationWrapper>
1265
+ <!-- end mail-tool --------------------------------------------------------------------------------------------------->
1266
+
1267
+ <!-- begin main-navigation --------------------------------------------------------------------------------------------------->
1268
+ <CmdWidthLimitationWrapper>
1269
+ <h2 class="headline-demopage" id="section-main-navigation">
1270
+ <span>Main Navigation</span>
1271
+ <a href="#" class="button small icon-cog" title="Open Component Settings"
1272
+ @click.prevent="openSettingsSidebar('CmdMainNavigation')"></a>
1273
+ </h2>
1274
+ <CmdMainNavigation ref="CmdMainNavigation" v-bind="cmdMainNavigationSettingsData"
1275
+ :navigationEntries="navigationDataModified" />
1276
+ <!-- begin router-view -->
1277
+ <router-view v-if="useRouterLinks"></router-view>
1278
+ <!-- end router-view -->
1279
+ </CmdWidthLimitationWrapper>
1280
+ <!-- end main-navigation --------------------------------------------------------------------------------------------------->
1281
+
1282
+ <!-- begin multistep-form-progress-bar --------------------------------------------------------------------------------------------------->
1283
+ <CmdWidthLimitationWrapper>
1284
+ <h2 class="headline-demopage" id="section-multistep-form-progress-bar">
1285
+ <span>Multistepform-Progressbar</span>
1286
+ <a href="#" class="button small icon-cog" title="Open Component Settings"
1287
+ @click.prevent="openSettingsSidebar('CmdMultistepFormProgressBar')"></a>
1288
+ </h2>
1289
+ <h3>Steps with icons</h3>
1290
+ <CmdMultistepFormProgressBar ref="CmdMultistepFormProgressBar" :multisteps="multistepsData.withIcon"
1291
+ v-bind="cmdMultistepFormProgressBarSettingsData"
1292
+ @click="showPageMultistep = $event.index + 1" />
1293
+ <h3>Router</h3>
1294
+ <CmdMultistepFormProgressBar ref="CmdMultistepFormProgressBar" :multisteps="multistepsData.router"
1295
+ v-bind="cmdMultistepFormProgressBarSettingsData"
1296
+ @click="showPageMultistep = $event.index + 1" />
1297
+ <div>
1298
+ <p>Page {{ showPageMultistep }}</p>
1299
+ </div>
1300
+ </CmdWidthLimitationWrapper>
1301
+ <!-- end multistep-form-progress-bar --------------------------------------------------------------------------------------------------->
1302
+
1303
+ <!-- begin multistep-form-wrapper --------------------------------------------------------------------------------------------------->
1304
+ <CmdWidthLimitationWrapper>
1305
+ <h2 class="headline-demopage" id="section-multistep-form-wrapper">
1306
+ <span>Multistepform-Wrapper</span>
1307
+ <a href="#" class="button small icon-cog" title="Open Component Settings"
1308
+ @click.prevent="openSettingsSidebar('CmdMultistepFormWrapper')">
1309
+ </a>
1310
+ </h2>
1311
+ <h3>Data provided by property</h3>
1312
+ <CmdMultistepFormWrapper :requiredPages="[1, 2]"
1313
+ :defaultInputValues="multistepFormDefaultInputValues">
1314
+
1315
+ <template v-slot:page-1="props">
1316
+ <h3>Page 1 - all fields required</h3>
1317
+ <CmdForm :formElements="multistepFormWrapperPage1Data" :useSlot="false"
1318
+ @validation-status-change="toggleSystemMessage($event, props)"
1319
+ :submitButton="{ show: false }" :modelValue="props.formDataForPage"
1320
+ @update:modelValue="props.updateFormDataForPage" />
1321
+ <a href="#" @click.prevent="props.setErrorOnPage('This is an error!')">Set
1322
+ Error</a><br />
1323
+ <a href="#" @click.prevent="props.removeErrorOnPage">Remove Error</a>
1324
+ </template>
1325
+ <template v-slot:page-2="props">
1326
+ <h3>Page 2 - 2/2 fields required (in slot)</h3>
1327
+ <CmdForm :submitButton="{ show: false }"
1328
+ :cmdHeadline="{ headlineText: 'Form-Elements in Slot', headlineLevel: 3 }">
1329
+ <CmdFormElement element="input" type="tel" labelText="Telephone:"
1330
+ name="page-2-telephone" id="page-2-telephone" placeholder="Enter phone number"
1331
+ :required="true" :modelValue="props.formDataForPage['page-2-telephone']"
1332
+ @update:modelValue="setValue($event, 'page-2-telephone', props)"
1333
+ @validation-status-change="setValidationStatus($event, 'page-2-telephone', props)" />
1334
+ <CmdFormElement element="input" type="email" labelText="E-Mail:" name="page-2-email"
1335
+ id="page-2-email" :required="true" placeholder="Enter email address"
1336
+ :modelValue="props.formDataForPage['page-2-email']"
1337
+ @update:modelValue="setValue($event, 'page-2-email', props)"
1338
+ @validation-status-change="setValidationStatus($event, 'page-2-email', props)" />
738
1339
  </CmdForm>
1340
+ <a href="#" @click.prevent="props.setErrorOnPage('This is an error!')">Set Error</a>
739
1341
  </template>
740
- <!-- will not be displayed, because useSlots-property does not contain 'footer' in array -->
741
- <template v-slot:footer>
742
- <p>
743
- footer content
744
- </p>
1342
+ <template v-slot:page-3="props">
1343
+ <h3>Page 3 - no fields required</h3>
1344
+ <CmdForm @validation-status-change="toggleSystemMessage($event, props)"
1345
+ :submitButton="{ show: false }" :modelValue="props.formDataForPage"
1346
+ @update:modelValue="props.updateFormDataForPage"
1347
+ :cmdHeadline="{ headlineText: 'Form-Elements in Slot', headlineLevel: 3 }">
1348
+ <CmdFormElement element="input" type="text" labelText="Street/No:" name="street-no"
1349
+ id="street-no" placeholder="Enter street and number"
1350
+ v-model="props.formDataForPage.streetNo" />
1351
+ <div class="input-wrapper">
1352
+ <CmdFormElement element="input" type="number" labelText="Zip:" name="zip" id="zip"
1353
+ v-model="props.formDataForPage.zip" />
1354
+ <CmdFormElement element="input" type="text" labelText="City:" name="city" id="city"
1355
+ v-model="props.formDataForPage.city" />
1356
+ </div>
1357
+ </CmdForm>
745
1358
  </template>
746
- </CmdBox>
747
- <CmdBox :useSlots="['header', 'body']" :useBoxBodyPadding="false">
748
- <template v-slot:header>
749
- <h4>
750
- Box with links
751
- </h4>
1359
+ <template v-slot:page-last="props">
1360
+ <template v-if="!confirmDataPrivacy">
1361
+ <h3>Page 4</h3>
1362
+ <CmdForm :cmdHeadline="{ headlineText: 'Confirmation', headlineLevel: 3 }"
1363
+ :submitButton="{ disabled: props.atleastOneStepWithError || !dataPrivacyChecked, type: 'button' }"
1364
+ :cancelButton="{ show: false }" @submit="validateForm">
1365
+ <p>Please confirm that all data you provided is legit.</p>
1366
+ <CmdFormElement element="input" type="checkbox" labelText="Confirm data privacy:"
1367
+ name="confirm-data-privacy" id="confirm-data-privac" :required="true"
1368
+ v-model="dataPrivacyChecked" />
1369
+ </CmdForm>
1370
+ </template>
1371
+ <template v-else>
1372
+ <h3>Confirmation</h3>
1373
+ <CmdSystemMessage systemMessage="Your request was send successfully!"
1374
+ validationStatus="success" :iconClose="{ show: false }" />
1375
+ <p>A copy with all submitted data was send to you.</p>
1376
+ </template>
752
1377
  </template>
753
- <template v-slot:body>
754
- <ul class="navigation">
755
- <li><a href="#" @click.prevent="">Link name 1</a></li>
756
- <li><a href="#" @click.prevent="">Link name 2</a></li>
757
- <li><a href="#" @click.prevent="">Link name 3</a></li>
758
- <li><a href="#" @click.prevent="">Link name 4</a></li>
1378
+ </CmdMultistepFormWrapper>
1379
+ <h3>Data provided by slot</h3>
1380
+ <CmdMultistepFormWrapper>
1381
+ <template v-slot:progress-bar="props">
1382
+ <ul class="flex-container">
1383
+ <li v-for="index of props.numberOfPages" :key="index">
1384
+ <a href="#" @click.prevent="props.setErrorOnPage('This is an error!')">{{ index
1385
+ }}</a>
1386
+ </li>
759
1387
  </ul>
760
1388
  </template>
761
- <!-- will not be displayed, because useSlots-property does not contain 'footer' in array -->
762
- <template v-slot:footer>
763
- <p>
764
- footer content
765
- </p>
1389
+ <template v-slot:page-1="props">
1390
+ Content Page 1
1391
+ <span v-if="props.hasError">Error</span>
1392
+ <a href="#" @click.prevent="props.setErrorOnPage('This is an error!')">Set Error</a>
766
1393
  </template>
767
- </CmdBox>
768
- <CmdBox :useSlots="['header', 'body']" :useBoxBodyPadding="false"
769
- :cmdHeadline="{ headlineText: 'Collapsible box', headlineLevel: 4 }" :collapsible="true">
770
- <template v-slot:header>
771
- <h4>
772
- Collapsible box with image
773
- </h4>
1394
+ <template v-slot:page-2="props">
1395
+ Content Page 2
1396
+ <span v-if="props.hasError">Error</span>
1397
+ <a href="#" @click.prevent="props.setErrorOnPage('This is an error!')">Set Error</a>
774
1398
  </template>
775
- <template v-slot:body>
776
- <img src="/media/images/content-images/landscape-medium.jpg" alt="Alternative text" />
1399
+ <template v-slot:page-3="props">
1400
+ Content Page 3
1401
+ <span v-if="props.hasError">Error</span>
777
1402
  </template>
778
- </CmdBox>
779
- <CmdBox :useSlots="['header', 'body', 'footer']" :useBoxBodyPadding="false">
780
- <template v-slot:header>
781
- <h4>
782
- Box with image, content and link
783
- </h4>
1403
+ <template v-slot:page-4="props">
1404
+ Content Page 4
1405
+ <span v-if="props.hasError">Error</span>
784
1406
  </template>
785
- <template v-slot:body>
786
- <img src="/media/images/content-images/landscape-medium.jpg" alt="Alternative text" />
787
- <div class="default-padding">
788
- <h4>Custom headline</h4>
789
- <p>Image, custom-headline and this text for the component are given by slot</p>
1407
+ <template v-slot:page-5="props">
1408
+ Content Page 5
1409
+ <span v-if="props.hasError">Error</span>
1410
+ </template>
1411
+ <template v-slot:pagination="props">
1412
+ <div class="button-wrapper reverse justify-content-space-between">
1413
+ <CmdLink linkType="button" :highlightLevel="null" :icon='{
1414
+ iconClass: "icon-chevron-one-stripe-right",
1415
+ tooltip: "To next page",
1416
+ position: "right"
1417
+ }' text="Next" :disabled="props.disabledNextLink" @click="props.setNextPage" />
1418
+ <CmdLink linkType="button" class="cancel" :highlightLevel="null" :icon='{
1419
+ iconClass: "icon-cancel-circle",
1420
+ }' text="Cancel" />
1421
+ <CmdLink linkType="button" :highlightLevel="null" :icon='{
1422
+ iconClass: "icon-chevron-one-stripe-left",
1423
+ tooltip: "To previous page"
1424
+ }' text="Back" @click="props.setPrevPage" :disabled="props.disabledPrevLink" />
790
1425
  </div>
791
1426
  </template>
792
- <template v-slot:footer>
793
- <p>
794
- <a href="#">Read more&hellip;</a>
795
- </p>
1427
+ </CmdMultistepFormWrapper>
1428
+ </CmdWidthLimitationWrapper>
1429
+ <!-- end multistep-form-wrapper --------------------------------------------------------------------------------------------------->
1430
+
1431
+ <!-- begin newsletter-subscription --------------------------------------------------------------------------------------------------->
1432
+ <CmdWidthLimitationWrapper>
1433
+ <h2 class="headline-demopage" id="section-newsletter-subscription">
1434
+ <span>Newsletter Subscription</span>
1435
+ <a href="#" class="button small icon-cog" title="Open Component Settings"
1436
+ @click.prevent="openSettingsSidebar('CmdNewsletterSubscription')"></a>
1437
+ </h2>
1438
+ <CmdForm :use-fieldset="false">
1439
+ <CmdNewsletterSubscription ref="CmdNewsletterSubscription"
1440
+ v-bind="cmdNewsletterSubscriptionSettingsData" v-model="newsletter"
1441
+ @buttonClick="submitNewsletterRegistration" />
1442
+ </CmdForm>
1443
+ </CmdWidthLimitationWrapper>
1444
+ <!-- end newsletter-subscription --------------------------------------------------------------------------------------------------->
1445
+
1446
+ <!-- begin opening-hours --------------------------------------------------------------------------------------------------->
1447
+ <CmdWidthLimitationWrapper>
1448
+ <h2 class="headline-demopage" id="section-opening-hours">
1449
+ <span>Opening Hours</span>
1450
+ <a href="#" class="button small icon-cog" title="Open Component Settings"
1451
+ @click.prevent="openSettingsSidebar('CmdOpeningHours')"></a>
1452
+ </h2>
1453
+ <CmdOpeningHours ref="CmdOpeningHours" v-bind="cmdOpeningHoursSettingsData"
1454
+ :openingHours="openingHoursData" :checkInterval="0" :use24HoursFormat="false" />
1455
+ </CmdWidthLimitationWrapper>
1456
+ <!-- end opening-hours --------------------------------------------------------------------------------------------------->
1457
+
1458
+ <!-- begin page-footer --------------------------------------------------------------------------------------------------->
1459
+ <CmdWidthLimitationWrapper>
1460
+ <h2 class="headline-demopage" id="section-page-footer">
1461
+ <span>Page Footer</span>
1462
+ <a href="#" class="button small icon-cog" title="Open Component Settings"
1463
+ @click.prevent="openSettingsSidebar('CmdPageFooter')"></a>
1464
+ </h2>
1465
+ <CmdPageFooter ref="CmdPageFooter" v-bind="cmdPageFooterSettingsData"
1466
+ :button-print-view="{ text: 'Print this page' }" :cmdSocialNetworks="socialNetworksData">
1467
+ <button class="button primary" title="Button given by slot">
1468
+ <span class="icon-mail"></span>
1469
+ <span>Contact</span>
1470
+ </button>
1471
+ </CmdPageFooter>
1472
+ </CmdWidthLimitationWrapper>
1473
+ <!-- end page-footer --------------------------------------------------------------------------------------------------->
1474
+
1475
+ <!-- begin page-header --------------------------------------------------------------------------------------------------->
1476
+ <CmdWidthLimitationWrapper>
1477
+ <h2 class="headline-demopage" id="section-page-header">
1478
+ <span>Page Header</span>
1479
+ <a href="#" class="button small icon-cog" title="Open Component Settings"
1480
+ @click.prevent="openSettingsSidebar('CmdPageHeader')"></a>
1481
+ </h2>
1482
+ <CmdPageHeader ref="CmdPageHeader" :cmdBreadcrumbs="breadcrumbsData"
1483
+ :cmdHeadline="{ headlineText: 'Main headline for page', headlineLevel: 1 }">
1484
+ <a href="#" title="Link given by slot">
1485
+ <span class="icon-user-profile"></span>
1486
+ <span>You are logged in</span>
1487
+ </a>
1488
+ </CmdPageHeader>
1489
+ </CmdWidthLimitationWrapper>
1490
+ <!-- end page-header --------------------------------------------------------------------------------------------------->
1491
+
1492
+ <!-- begin pagination --------------------------------------------------------------------------------------------------->
1493
+ <CmdWidthLimitationWrapper>
1494
+ <h2 class="headline-demopage" id="section-pagination">
1495
+ <span>Pagination</span>
1496
+ <a href="#" class="button small icon-cog" title="Open Component Settings"
1497
+ @click.prevent="openSettingsSidebar('CmdPagination')"></a>
1498
+ </h2>
1499
+ <div>
1500
+ <p>Page {{ showPagePager }}</p>
1501
+ </div>
1502
+ <CmdPagination ref="CmdPagination" v-bind="cmdPaginationSettingsData"
1503
+ @click="showPagePager = $event" />
1504
+ </CmdWidthLimitationWrapper>
1505
+ <!-- end pagination --------------------------------------------------------------------------------------------------->
1506
+
1507
+ <!-- begin paragraph --------------------------------------------------------------------------------------------------->
1508
+ <CmdWidthLimitationWrapper>
1509
+ <h2 class="headline-demopage" id="section-paragraph">
1510
+ <span>Paragraph</span>
1511
+ <a href="#" class="button small icon-cog" title="Open Component Settings"
1512
+ @click.prevent="openSettingsSidebar('CmdParagraph')"></a>
1513
+ </h2>
1514
+ <CmdParagraph ref="CmdParagraph" v-bind="cmdParagraphSettingsData" />
1515
+ </CmdWidthLimitationWrapper>
1516
+ <!-- end paragraph --------------------------------------------------------------------------------------------------->
1517
+
1518
+ <!-- begin section --------------------------------------------------------------------------------------------------->
1519
+ <CmdWidthLimitationWrapper>
1520
+ <h2 class="headline-demopage" id="section-section">
1521
+ <span>Section</span>
1522
+ <a href="#" class="button small icon-cog" title="Open Component Settings"
1523
+ @click.prevent="openSettingsSidebar('CmdSection')"></a>
1524
+ </h2>
1525
+ <h3>Section with content provided by properties</h3>
1526
+ <CmdSection style="border: 1px dashed var(--color-medium-gray);"
1527
+ :cmdHeadline="{ headlineText: 'Headline for section provided by property', headlineLevel: 4 }"
1528
+ content="Content for section provided by property." />
1529
+ <h3>Section with content provided by slot</h3>
1530
+ <CmdSection :useSlot="true" style="border: 1px dashed var(--color-medium-gray);">
1531
+ <h4>Headline for section provided by slot</h4>
1532
+ <p>Content for section provided by slot.</p>
1533
+ </CmdSection>
1534
+ <h3>Section styled as box</h3>
1535
+ <CmdSection :useSlot="true" :styleAsBox="true">
1536
+ <h4>Headline for section styled as box</h4>
1537
+ <p>Content for section styled as box.</p>
1538
+ </CmdSection>
1539
+ </CmdWidthLimitationWrapper>
1540
+ <!-- end section --------------------------------------------------------------------------------------------------->
1541
+
1542
+ <!-- begin site-footer --------------------------------------------------------------------------------------------------->
1543
+ <CmdWidthLimitationWrapper>
1544
+ <h2 class="headline-demopage" id="section-site-footer">Site Footer</h2>
1545
+ <h3>Site Footer with content provided by properties</h3>
1546
+ <CmdSiteFooter :cmdList="{ items: listData }" />
1547
+ <h3>Site Footer with content provided by slot</h3>
1548
+ <CmdSiteFooter>
1549
+ <CmdLink linkType="href" ref="CmdLink" v-bind="cmdLinkSettingsData"
1550
+ :icon="{ iconClass: 'icon-chevron-one-stripe-right', position: 'left', tooltip: 'Tooltip for hyperlink' }"
1551
+ @click="cmdLinkOutput" />
1552
+ </CmdSiteFooter>
1553
+ </CmdWidthLimitationWrapper>
1554
+ <!-- end site-footer --------------------------------------------------------------------------------------------------->
1555
+
1556
+ <!-- begin site-header --------------------------------------------------------------------------------------------------->
1557
+ <CmdWidthLimitationWrapper>
1558
+ <h2 class="headline-demopage" id="section-site-header">
1559
+ <span>Site Header</span>
1560
+ <a href="#" class="button small icon-cog" title="Open Component Settings"
1561
+ @click.prevent="openSettingsSidebar('CmdSiteHeader')"></a>
1562
+ </h2>
1563
+ <CmdSiteHeader ref="CmdSiteHeader" v-bind="cmdSiteHeaderSettingsData"
1564
+ :cmdCompanyLogo="companyLogoData">
1565
+ <template v-slot:topheader>
1566
+ <CmdList :items="listData" orientation="horizontal" align="right" />
796
1567
  </template>
797
- </CmdBox>
798
- <CmdBox :repeatHeadlineInBoxBody="true" :useBoxBodyPadding="true"
799
- :cmdHeadline="{ headlineText: 'Box with image, content and link', headlineLevel: 4 }"
800
- textBody="Image, headline and this text for the component are given by property"
801
- :cmdImage="{ image: { src: '/media/images/content-images/landscape-medium.jpg', alt: 'Alternative text' } }"
802
- :cmdLink="{
803
- linkType: 'href',
804
- path: '#',
805
- icon: {
806
- iconClass: 'icon-chevron-two-stripes-right',
807
- position: 'right'
808
- },
809
- text: 'Read more'
810
- }" />
811
- <CmdBox :useBoxBodyPadding="true"
812
- :cmdHeadline="{ headlineText: 'Box with large icon and some content', headlineLevel: 4 }"
813
- headlinePosition="body" :cmdIcon="{ iconClass: 'icon-home', type: 'auto' }"
814
- textBody="Box with large icon, headline in body and content all given by properties." />
815
- </CmdBoxWrapper>
816
-
817
- <!-- begin product boxes -->
818
- <h3>Product boxes</h3>
819
- <CmdBoxWrapper :boxesPerRow="[5, 2, 1]" :useRowViewAsDefault="true" :useGap="true">
820
- <template v-slot="slotProps">
821
- <CmdBox v-for="(product, index) in boxProductData" :key="index" boxType="product"
822
- :product="product" :cmdHeadline="{ headlineLevel: 4 }" :rowView="slotProps.rowView" />
823
- </template>
824
- </CmdBoxWrapper>
825
- <!-- end product boxes -->
826
-
827
- <!-- begin user boxes -->
828
- <h3>User boxes</h3>
829
- <CmdBoxWrapper :boxesPerRow="[5, 2, 1]" :useRowViewAsDefault="true" :useGap="true">
830
- <template v-slot="slotProps">
831
- <CmdBox v-for="index in boxUserData.length" :key="index" boxType="user"
832
- :user="boxUserData[index - 1]" :cmdHeadline="{ headlineLevel: 5 }"
833
- :rowView="slotProps.rowView" />
834
- </template>
835
- </CmdBoxWrapper>
836
- <!-- end user boxes -->
837
-
838
- <h3><span>Boxes in BoxWrapper (collapsible)</span>
839
- <a href="#" class="button small icon-cog" title="Open Component Settings"
840
- @click.prevent="openSettingsSidebar('CmdBoxWrapper')"></a>
841
- </h3>
842
- <CmdBoxWrapper ref="CmdBoxWrapper" :boxesPerRow="[4, 1]" :openBoxesByDefault="[2]"
843
- :useRowViewAsDefault="true" :allowMultipleExpandedBoxes="false" :stretch-boxes-vertically="true"
844
- :useGap="true">
845
- <template v-slot="slotProps">
846
- <CmdBox v-for="index in boxProductData.length" :key="index" boxType="content"
847
- :collapsible="true" :useSlots="['body']"
848
- :cmdHeadline="{ headlineText: 'Box ' + index, headlineLevel: 5 }"
849
- :rowView="slotProps.rowView" :openCollapsedBox="slotProps.boxIsOpen(index - 1)"
850
- @toggleCollapse="slotProps.boxToggled(index - 1, $event)">
851
- <template #body>{{ slotProps.currentOpenBox }}Content {{ index }}</template>
852
- </CmdBox>
853
- </template>
854
- </CmdBoxWrapper>
855
- </CmdWidthLimitationWrapper>
856
- <!-- end boxes --------------------------------------------------------------------------------------------------->
857
-
858
- <!-- begin breadcrumbs --------------------------------------------------------------------------------------------------->
859
- <CmdWidthLimitationWrapper inner-component="div">
860
- <h2 class="headline-demopage" id="section-breadcrumbs">
861
- <span>Breadcrumbs</span>
862
- <a href="#" class="button small icon-cog" title="Open Component Settings"
863
- @click.prevent="openSettingsSidebar('CmdBreadcrumbs')"></a>
864
- </h2>
865
- <CmdBreadcrumbs ref="CmdBreadcrumbs" :breadcrumbLabel="breadcrumbsData.breadcrumbLabel"
866
- :breadcrumbLinks="breadcrumbsData.breadcrumbLinks" v-bind="cmdBreadcrumbsSettingsData" />
867
- </CmdWidthLimitationWrapper>
868
- <!-- end breadcrumbs --------------------------------------------------------------------------------------------------->
869
-
870
- <!-- begin code-output --------------------------------------------------------------------------------------------------->
871
- <CmdWidthLimitationWrapper>
872
- <h2 class="headline-demopage" id="section-code-output">
873
- <span>Code Output</span>
874
- <a href="#" class="button small icon-cog" title="Open Component Settings"
875
- @click.prevent="openSettingsSidebar('CmdCodeOutput')"></a>
876
- </h2>
877
- <CmdCodeOutput ref="CmdCodeOutput" v-bind="cmdCodeOutputSettingsData">
878
- {{ cmdCodeOutputSlotContent }}
879
- </CmdCodeOutput>
880
- </CmdWidthLimitationWrapper>
881
- <!-- end code-output --------------------------------------------------------------------------------------------------->
882
-
883
- <!-- begin company-logo --------------------------------------------------------------------------------------------------->
884
- <CmdWidthLimitationWrapper>
885
- <h2 class="headline-demopage" id="section-company-logo">
886
- <span>Company Logo</span>
887
- <a href="#" class="button small icon-cog" title="Open Component Settings"
888
- @click.prevent="openSettingsSidebar('CmdCompanyLogo')"></a>
889
- </h2>
890
- <CmdCompanyLogo ref="CmdCompanyLogo" :link="companyLogoData.link" v-bind="cmdCompanyLogoSettingsData" />
891
- </CmdWidthLimitationWrapper>
892
- <!-- end company-logo --------------------------------------------------------------------------------------------------->
893
-
894
- <!-- begin container --------------------------------------------------------------------------------------------------->
895
- <CmdWidthLimitationWrapper>
896
- <h2 class="headline-demopage" id="section-container">
897
- <span>Containers</span>
898
- <a href="#" class="button small icon-cog" title="Open Component Settings"
899
- @click.prevent="openSettingsSidebar('CmdContainer')"></a>
900
- </h2>
901
- <h3>Container (type "default")</h3>
902
- <CmdContainer style="border: 1px dashed var(--color-gray-30)" ref="CmdContainer"
903
- v-bind="cmdContainerSettingsData">
904
- <p>Slot-content</p>
905
- <p>Slot-content</p>
906
- <p>Slot-content</p>
907
- </CmdContainer>
908
- <h3>Container (type "flex", horizontal)</h3>
909
- <CmdContainer style="border: 1px dashed var(--color-gray-30)" ref="CmdContainer"
910
- v-bind="cmdContainerSettingsData" containerType="flex" contentOrientation="horizontal">
911
- <p>Slot-content</p>
912
- <p>Slot-content</p>
913
- <p>Slot-content</p>
914
- </CmdContainer>
915
- <h3>Container (type "flex", vertical)</h3>
916
- <CmdContainer style="border: 1px dashed var(--color-gray-30)" ref="CmdContainer"
917
- v-bind="cmdContainerSettingsData" containerType="flex" contentOrientation="vertical">
918
- <p>Slot-content</p>
919
- <p>Slot-content</p>
920
- <p>Slot-content</p>
921
- </CmdContainer>
922
- <h3>Container with horizontal slots</h3>
923
- <CmdContainer style="border: 1px dashed var(--color-gray-30)" ref="CmdContainer"
924
- v-bind="cmdContainerSettingsData" containerType="grid">
925
- <p>Slot-content</p>
926
- <p>Slot-content</p>
927
- <p>Slot-content</p>
928
- <p>Slot-content</p>
929
- <p>Slot-content</p>
930
- <p>Slot-content</p>
931
- </CmdContainer>
932
- </CmdWidthLimitationWrapper>
933
- <!-- end container --------------------------------------------------------------------------------------------------->
934
-
935
- <!-- begin cookie-disclaimer --------------------------------------------------------------------------------------------------->
936
- <CmdWidthLimitationWrapper>
937
- <h2 class="headline-demopage" id="section-cookie-disclaimer">Cookie Disclaimer</h2>
938
- <a class="button" href="#" @click.prevent="fancyBoxCookieDisclaimer = true">
939
- <span>Open Cookie Disclaimer</span>
940
- </a>
941
- </CmdWidthLimitationWrapper>
942
- <!-- end cookie-disclaimer --------------------------------------------------------------------------------------------------->
943
-
944
- <!-- begin fancybox --------------------------------------------------------------------------------------------------->
945
- <CmdWidthLimitationWrapper>
946
- <h2 class="headline-demopage" id="section-fancybox">Fancybox</h2>
947
- <h3>FancyBox with text</h3>
948
- <a href="#" @click.prevent="showFancyBox('text', 'Some text', 'FancyBox with text')">Open FancyBox
949
- with text</a>
950
- <h3>FancyBox with large image given by url</h3>
951
- <a href="#"
952
- @click.prevent="showFancyBox('url', '/media/images/demo-images/large/landscape-01.jpg', 'FancyBox with large image given by url')"
953
- title="Open FancyBox with large image given by url" style="align-self: flex-start">
954
- <img src="/media/images/demo-images/small/landscape-01.jpg" alt="Alternative text" />
955
- </a>
956
- <h3>FancyBox with large image given by property</h3>
957
- <a href="#"
958
- @click.prevent="showFancyBox('image', { large: '/media/images/demo-images/large/landscape-02.jpg' }, 'FancyBox with large image given by property')"
959
- title="Open FancyBox with large image given by property" style="align-self: flex-start">
960
- <img src="/media/images/demo-images/small/landscape-02.jpg" alt="Alternative text" />
961
- </a>
962
- <h3>FancyBox with image as object give by property</h3>
963
- <a href="#" @click.prevent="showFancyBox('image', {
964
- small: '/media/images/demo-images/medium/landscape-03.jpg',
965
- medium: '/media/images/demo-images/medium/landscape-03.jpg',
966
- large: '/media/images/demo-images/large/landscape-03.jpg'
967
- }, 'FancyBox with large image given by property')"
968
- title="Open FancyBox with large image given by property" style="align-self: flex-start">
969
- <img src="/media/images/demo-images/small/landscape-03.jpg" alt="Alternative text" />
970
- </a>
971
- </CmdWidthLimitationWrapper>
972
- <!-- end fancybox --------------------------------------------------------------------------------------------------->
973
-
974
- <!-- begin flexible-scroll-container --------------------------------------------------------------------------------------------------->
975
- <CmdWidthLimitationWrapper>
976
- <h2 class="headline-demopage" id="section-flexible-scroll-container">Flexible Scroll-Container</h2>
977
- <CmdFlexibleScrollContainer style="border: 1px dashed var(--color-gray-30)">
978
- <template v-slot:fixed-wrapper>
979
- <div class="default-padding" style="border: 1px dashed var(--color-gray-30)">
980
- Fixed content
981
- </div>
982
- </template>
983
- <template v-slot:scroll-wrapper>
984
- <div class="default-padding" style="border: 1px dashed var(--color-gray-30)">
985
- <ul>
986
- <li>Dynamic Content</li>
987
- <li>Dynamic Content</li>
988
- <li>Dynamic Content</li>
989
- <li>Dynamic Content</li>
990
- <li>Dynamic Content</li>
991
- <li>Dynamic Content</li>
992
- <li>Dynamic Content</li>
993
- <li>Dynamic Content</li>
994
- <li>Dynamic Content</li>
995
- <li>Dynamic Content</li>
996
- <li>Dynamic Content</li>
997
- <li>Dynamic Content</li>
998
- <li>Dynamic Content</li>
999
- <li>Dynamic Content</li>
1000
- <li>Dynamic Content</li>
1001
- <li>Dynamic Content</li>
1002
- <li>Dynamic Content</li>
1003
- <li>Dynamic Content</li>
1004
- <li>Dynamic Content</li>
1005
- <li>Dynamic Content</li>
1006
- <li>Dynamic Content</li>
1007
- <li>Dynamic Content</li>
1008
- <li>Dynamic Content</li>
1009
- <li>Dynamic Content</li>
1010
- </ul>
1011
- </div>
1012
- </template>
1013
- </CmdFlexibleScrollContainer>
1014
- </CmdWidthLimitationWrapper>
1015
- <!-- end flexible-scroll-container --------------------------------------------------------------------------------------------------->
1016
-
1017
- <!-- begin footnotes --------------------------------------------------------------------------------------------------->
1018
- <CmdWidthLimitationWrapper>
1019
- <h2 class="headline-demopage" id="section-footnote">
1020
- <span>Footnotes</span>
1021
- <a href="#" class="button small icon-cog" title="Open Component Settings"
1022
- @click.prevent="openSettingsSidebar('CmdFootnote')"></a>
1023
- </h2>
1024
- <CmdFootnote
1025
- ref="CmdFootnote"
1026
- v-bind="cmdFootnoteSettingsData"
1027
- :descriptionData="footnoteData[0].descriptionData"
1028
- />
1029
- <CmdFootnote
1030
- :descriptionData="footnoteData[1].descriptionData"
1031
- :descriptionTermType="footnoteData[1].descriptionTermType"
1032
- />
1033
-
1034
- </CmdWidthLimitationWrapper>
1035
- <!-- end footnotes --------------------------------------------------------------------------------------------------->
1036
-
1037
- <!-- begin forms --------------------------------------------------------------------------------------------------->
1038
- <CmdWidthLimitationWrapper>
1039
- <h2 class="headline-demopage" id="section-forms">Forms</h2>
1040
- <h3>Form elements given by data</h3>
1041
- <CmdForm :useFieldset="true" :useSlot="false" id="form-component" novalidate="novalidate"
1042
- :formElements="formElementsData" @submit="doConsoleLog" v-model="cmdFormData" />
1043
- <h3>Form elements given by slot</h3>
1044
- <CmdForm :use-fieldset="true" id="form-component" novalidate="novalidate"
1045
- :submitButton="{ position: 'belowFieldset' }" @submit="doConsoleLog">
1046
- <CmdFormElement element="input" text="text" name="input-text" labelText="Text input"
1047
- placeholder="Text input" />
1048
- <CmdFormElement element="input" text="number" labelText="Number input" name="input-number"
1049
- modelValue="1" />
1050
- <CmdFormElement element="input" text="password" labelText="Password input" name="password-number"
1051
- placeholder="Password input" />
1052
- </CmdForm>
1053
- </CmdWidthLimitationWrapper>
1054
- <!-- end forms --------------------------------------------------------------------------------------------------->
1055
-
1056
- <!-- begin google-maps --------------------------------------------------------------------------------------------------->
1057
- <CmdWidthLimitationWrapper>
1058
- <h2 class="headline-demopage" id="section-google-maps">Google Maps&trade;</h2>
1059
- <CmdGoogleMaps :address="addressData[1]" />
1060
- </CmdWidthLimitationWrapper>
1061
- <!-- end google-maps --------------------------------------------------------------------------------------------------->
1062
-
1063
- <!-- begin headlines --------------------------------------------------------------------------------------------------->
1064
- <CmdWidthLimitationWrapper>
1065
- <h2 class="headline-demopage" id="section-headlines">
1066
- <span>Headlines</span>
1067
- <a href="#" class="button small icon-cog" title="Open Component Settings"
1068
- @click.prevent="openSettingsSidebar('CmdHeadline')"></a>
1069
- </h2>
1070
- <CmdHeadline ref="CmdHeadline" v-bind="cmdHeadlineSettingsData" />
1071
- <CmdHeadline headlineLevel="3" headlineText="Headline text" :cmdIcon="{ iconClass: 'icon-home' }" />
1072
- <CmdHeadline headlineLevel="3" headlineText="Headline text<br /> with html-content given by property" />
1073
- <CmdHeadline headlineLevel="3">
1074
- Headline text<br /> with html-content given by slot
1075
- </CmdHeadline>
1076
-
1077
- </CmdWidthLimitationWrapper>
1078
- <!-- end headlines --------------------------------------------------------------------------------------------------->
1079
-
1080
- <!-- begin icons --------------------------------------------------------------------------------------------------->
1081
- <CmdWidthLimitationWrapper>
1082
- <h2 class="headline-demopage" id="section-icons">Icons</h2>
1083
- <ul>
1084
- <li>
1085
- <span>Icon from local iconfont</span>
1086
- <CmdIcon iconClass="icon-home" />
1087
- </li>
1088
- <li>
1089
- <span>Icon from iconify-api (icomoon-font)</span>
1090
- <CmdIcon iconClass="icomoon-free:home" />
1091
- </li>
1092
- <li>
1093
- <span>Icon from iconify-api (bootstrap-font)</span>
1094
- <CmdIcon iconClass="bi:house-fill" />
1095
- </li>
1096
- <li>
1097
- <span>Icon from iconify-api (material-design-font)</span>
1098
- <CmdIcon iconClass="mdi:home" />
1099
- </li>
1100
- <li>
1101
- <span>Icon from iconify-api (font-awesome-solid-font)</span>
1102
- <CmdIcon iconClass="fa6-solid:house-chimney" />
1103
- </li>
1104
- </ul>
1105
- </CmdWidthLimitationWrapper>
1106
- <!-- end icons --------------------------------------------------------------------------------------------------->
1107
-
1108
- <!-- begin images --------------------------------------------------------------------------------------------------->
1109
- <CmdWidthLimitationWrapper>
1110
- <h2 class="headline-demopage" id="section-image">
1111
- <span>Image</span>
1112
- <a href="#" class="button small icon-cog" title="Open Component Settings"
1113
- @click.prevent="openSettingsSidebar('CmdImage')"></a>
1114
- </h2>
1115
- <div class="flex-container">
1116
- <CmdImage ref="CmdImage" :image="imageData[0].image" :figcaption="imageData[0].figcaption"
1117
- v-bind="cmdImageSettingsData" />
1118
- <CmdImage :image="imageData[1].image" :figcaption="imageData[1].figcaption" />
1119
- </div>
1120
- </CmdWidthLimitationWrapper>
1121
- <!-- end images --------------------------------------------------------------------------------------------------->
1122
-
1123
- <!-- begin image-gallery--------------------------------------------------------------------------------------------------->
1124
- <CmdWidthLimitationWrapper>
1125
- <h2 class="headline-demopage" id="section-image-gallery">
1126
- <span>Image-Gallery</span>
1127
- <a href="#" class="button small icon-cog" title="Open Component Settings"
1128
- @click.prevent="openSettingsSidebar('CmdImageGallery')"></a>
1129
- </h2>
1130
- <CmdImageGallery ref="CmdImageGallery" :images="imageGalleryData"
1131
- v-bind="cmdImageGallerySettingsData" />
1132
- </CmdWidthLimitationWrapper>
1133
- <!-- end image-gallery --------------------------------------------------------------------------------------------------->
1134
-
1135
- <!-- begin image-zoom --------------------------------------------------------------------------------------------------->
1136
- <CmdWidthLimitationWrapper>
1137
- <h2 class="headline-demopage" id="section-image-zoom">
1138
- Image-Zoom
1139
- </h2>
1140
- <CmdImageZoom :imageSmall="imageZoomData.imageSmall" :imageLarge="imageZoomData.imageLarge" />
1141
- </CmdWidthLimitationWrapper>
1142
- <!-- end image-zoom --------------------------------------------------------------------------------------------------->
1143
-
1144
- <!-- begin link --------------------------------------------------------------------------------------------------->
1145
- <CmdWidthLimitationWrapper>
1146
- <h2 class="headline-demopage" id="section-link">
1147
- <span>Link</span>
1148
- <a href="#" class="button small icon-cog" title="Open Component Settings"
1149
- @click.prevent="openSettingsSidebar('CmdLink')"></a>
1150
- </h2>
1151
- <CmdLink linkType="href" ref="CmdLink" v-bind="cmdLinkSettingsData"
1152
- :icon="{ iconClass: 'icon-chevron-one-stripe-right', position: 'right', tooltip: 'Tooltip for hyperlink' }"
1153
- @click="cmdLinkOutput" />
1154
- <CmdLink linkType="href" ref="CmdLink" v-bind="cmdLinkSettingsData"
1155
- :icon="{ iconClass: 'icon-chevron-one-stripe-left', position: 'left', tooltip: 'Tooltip for hyperlink' }"
1156
- @click="cmdLinkOutput" />
1157
- <CmdLink linkType="href" ref="CmdLink" v-bind="cmdLinkSettingsData" text="Link with fancybox"
1158
- :fancybox="true"
1159
- :icon="{ iconClass: 'icon-chevron-one-stripe-right', position: 'right', tooltip: 'Tooltip for hyperlink' }" />
1160
- <CmdLink linkType="href" ref="CmdLink" style="align-self: flex-start" v-bind="cmdLinkSettingsData"
1161
- text="Link styled as box" :styleAsBox="true"
1162
- :icon="{ iconClass: 'icon-home', position: 'top', tooltip: 'Tooltip for hyperlink' }" />
1163
- <CmdLink linkType="href" :styleAsButton="true" text="Link styled as button"
1164
- :icon="{ iconClass: 'icon-home', position: 'left' }" @click="cmdLinkOutput" />
1165
- <CmdLink linkType="submit" text="Submit button" :icon="{ iconClass: 'icon-home', position: 'left' }"
1166
- @click="cmdLinkOutput" />
1167
- <CmdLink linkType="button" text="Add link" :primaryButton="true"
1168
- :icon="{ iconClass: 'icon-link', position: 'right' }" @click="showCmdLink = true" />
1169
- <CmdLink v-if="showCmdLink" path="#" linkType="href" text="Link added on click" :fancybox="true"
1170
- :icon="{ iconClass: 'icon-chevron-one-stripe-right', position: 'right', tooltip: 'Tooltip for hyperlink' }" />
1171
- <dl class="output">
1172
- <dt>Event:</dt>
1173
- <dd>{{ outputCmdLink?.event?.originalEvent.originalEvent }}</dd>
1174
- <dt>Target:</dt>
1175
- <dd>{{ outputCmdLink?.event?.originalEvent.target }}</dd>
1176
- <dt>LinkType:</dt>
1177
- <dd>{{ outputCmdLink?.event?.originalEvent.linkType }}</dd>
1178
- </dl>
1179
- </CmdWidthLimitationWrapper>
1180
- <!-- end link --------------------------------------------------------------------------------------------------->
1181
-
1182
- <!-- begin lists --------------------------------------------------------------------------------------------------->
1183
- <CmdWidthLimitationWrapper>
1184
- <h2 class="headline-demopage" id="section-list">
1185
- <span>List</span>
1186
- <a href="#" class="button small icon-cog" title="Open Component Settings"
1187
- @click.prevent="openSettingsSidebar('CmdList')"></a>
1188
- </h2>
1189
- <CmdList :cmdHeadline="{ headlineText: 'List of links', headlineLevel: 3 }" ref="CmdList"
1190
- v-bind="listSettingsData" :items="listData" listContentType="links" @click="cmdLinkOutput" />
1191
- <dl class="output">
1192
- <dt>Event:</dt>
1193
- <dd>{{ outputCmdLink?.event?.originalEvent }}</dd>
1194
- <dt>Target:</dt>
1195
- <dd>{{ outputCmdLink?.event?.originalEvent.target }}</dd>
1196
- <dt>LinkType:</dt>
1197
- <dd>{{ outputCmdLink?.event?.linkType }}</dd>
1198
- </dl>
1199
- <CmdList :cmdHeadline="{ headlineText: 'List of images', headlineLevel: 3 }" :items="imageGalleryData"
1200
- orientation="horizontal" listContentType="images" />
1201
- <div class="flex-container">
1202
- <CmdList :cmdHeadline="{ headlineText: 'List of tags (default)', headlineLevel: 3 }"
1203
- :items="listOfTagsData" orientation="horizontal" listContentType="tags" />
1204
- <CmdList :cmdHeadline="{ headlineText: 'List of tags (primary)', headlineLevel: 3 }"
1205
- :items="listOfTagsData" orientation="horizontal" listContentType="tags"
1206
- highlightLevel="primary" />
1207
- <CmdList :cmdHeadline="{ headlineText: 'List of tags (secondary)', headlineLevel: 3 }"
1208
- :items="listOfTagsData" orientation="horizontal" listContentType="tags"
1209
- highlightLevel="secondary" />
1210
- <CmdList :cmdHeadline="{ headlineText: 'List of tags (tertiary)', headlineLevel: 3 }"
1211
- :items="listOfTagsData" orientation="horizontal" listContentType="tags"
1212
- highlightLevel="tertiary" />
1213
- </div>
1214
- <h3>Description Lists</h3>
1215
- <div class="flex-container">
1216
- <CmdList listType="description" :cmdHeadline="{ headlineText: 'List with text', headlineLevel: 4 }"
1217
- :items="descriptionListData.text" />
1218
- <CmdList listType="description"
1219
- :cmdHeadline="{ headlineText: 'List with text (term right aligned)', headlineLevel: 4 }"
1220
- :alignDescriptionTermRight="true" :items="descriptionListData.text" />
1221
- <CmdList listType="description" :cmdHeadline="{ headlineText: 'List with icons', headlineLevel: 4 }"
1222
- :items="descriptionListData.icons" />
1223
- </div>
1224
- </CmdWidthLimitationWrapper>
1225
- <!-- end lists --------------------------------------------------------------------------------------------------->
1226
-
1227
- <!-- begin login-form --------------------------------------------------------------------------------------------------->
1228
- <CmdWidthLimitationWrapper>
1229
- <h2 class="headline-demopage" id="section-login-form">
1230
- <span>Login Form</span>
1231
- <a href="#" class="button small icon-cog" title="Open Component Settings"
1232
- @click.prevent="openSettingsSidebar('CmdLoginForm')"></a>
1233
- </h2>
1234
- <CmdForm :use-fieldset="false">
1235
- <CmdLoginForm ref="CmdLoginForm" v-bind="cmdLoginFormSettingsData" v-model="loginData" />
1236
- </CmdForm>
1237
- <p>LoginData: {{ loginData }}</p>
1238
- </CmdWidthLimitationWrapper>
1239
- <!-- end login-form --------------------------------------------------------------------------------------------------->
1240
-
1241
- <!-- begin mail-tool --------------------------------------------------------------------------------------------------->
1242
- <CmdWidthLimitationWrapper>
1243
- <h2 class="headline-demopage" id="section-mail-tool">
1244
- <span>Mail Tool</span>
1245
- </h2>
1246
- <CmdMailTool ref="CmdMailTool" :mailsInbox="mailToolData.inbox" :mailsOutbox="mailToolData.outbox" />
1247
- </CmdWidthLimitationWrapper>
1248
- <!-- end mail-tool --------------------------------------------------------------------------------------------------->
1249
-
1250
- <!-- begin main-navigation --------------------------------------------------------------------------------------------------->
1251
- <CmdWidthLimitationWrapper>
1252
- <h2 class="headline-demopage" id="section-main-navigation">
1253
- <span>Main Navigation</span>
1254
- <a href="#" class="button small icon-cog" title="Open Component Settings"
1255
- @click.prevent="openSettingsSidebar('CmdMainNavigation')"></a>
1256
- </h2>
1257
- <CmdMainNavigation ref="CmdMainNavigation" v-bind="cmdMainNavigationSettingsData"
1258
- :navigationEntries="navigationDataModified" />
1259
- <!-- begin router-view -->
1260
- <router-view v-if="useRouterLinks"></router-view>
1261
- <!-- end router-view -->
1262
- </CmdWidthLimitationWrapper>
1263
- <!-- end main-navigation --------------------------------------------------------------------------------------------------->
1264
-
1265
- <!-- begin multistep-form-progress-bar --------------------------------------------------------------------------------------------------->
1266
- <CmdWidthLimitationWrapper>
1267
- <h2 class="headline-demopage" id="section-multistep-form-progress-bar">
1268
- <span>Multistepform-Progressbar</span>
1269
- <a href="#" class="button small icon-cog" title="Open Component Settings"
1270
- @click.prevent="openSettingsSidebar('CmdMultistepFormProgressBar')"></a>
1271
- </h2>
1272
- <h3>Steps with icons</h3>
1273
- <CmdMultistepFormProgressBar ref="CmdMultistepFormProgressBar" :multisteps="multistepsData.withIcon"
1274
- v-bind="cmdMultistepFormProgressBarSettingsData" @click="showPageMultistep = $event.index + 1" />
1275
- <h3>Router</h3>
1276
- <CmdMultistepFormProgressBar ref="CmdMultistepFormProgressBar" :multisteps="multistepsData.router"
1277
- v-bind="cmdMultistepFormProgressBarSettingsData" @click="showPageMultistep = $event.index + 1" />
1278
- <div>
1279
- <p>Page {{ showPageMultistep }}</p>
1280
- </div>
1281
- </CmdWidthLimitationWrapper>
1282
- <!-- end multistep-form-progress-bar --------------------------------------------------------------------------------------------------->
1283
-
1284
- <!-- begin multistep-form-wrapper --------------------------------------------------------------------------------------------------->
1285
- <CmdWidthLimitationWrapper>
1286
- <h2 class="headline-demopage" id="section-multistep-form-wrapper">
1287
- <span>Multistepform-Wrapper</span>
1288
- <a href="#" class="button small icon-cog" title="Open Component Settings"
1289
- @click.prevent="openSettingsSidebar('CmdMultistepFormWrapper')">
1290
- </a>
1291
- </h2>
1292
- <h3>Data provided by property</h3>
1293
- <CmdMultistepFormWrapper :requiredPages="[1, 2]" :defaultInputValues="multistepFormDefaultInputValues">
1294
-
1295
- <template v-slot:page-1="props">
1296
- <h3>Page 1 - all fields required</h3>
1297
- <CmdForm :formElements="multistepFormWrapperPage1Data" :useSlot="false"
1298
- @validation-status-change="toggleSystemMessage($event, props)" :submitButton="{ show: false }"
1299
- :modelValue="props.formDataForPage" @update:modelValue="props.updateFormDataForPage" />
1300
- <a href="#" @click.prevent="props.setErrorOnPage('This is an error!')">Set Error</a><br />
1301
- <a href="#" @click.prevent="props.removeErrorOnPage">Remove Error</a>
1302
- </template>
1303
- <template v-slot:page-2="props">
1304
- <h3>Page 2 - 2/2 fields required (in slot)</h3>
1305
- <CmdForm :submitButton="{ show: false }"
1306
- :cmdHeadline="{ headlineText: 'Form-Elements in Slot', headlineLevel: 3 }">
1307
- <CmdFormElement element="input" type="tel" labelText="Telephone:" name="page-2-telephone"
1308
- id="page-2-telephone" placeholder="Enter phone number" :required="true"
1309
- :modelValue="props.formDataForPage['page-2-telephone']"
1310
- @update:modelValue="setValue($event, 'page-2-telephone', props)"
1311
- @validation-status-change="setValidationStatus($event, 'page-2-telephone', props)" />
1312
- <CmdFormElement element="input" type="email" labelText="E-Mail:" name="page-2-email"
1313
- id="page-2-email" :required="true" placeholder="Enter email address"
1314
- :modelValue="props.formDataForPage['page-2-email']"
1315
- @update:modelValue="setValue($event, 'page-2-email', props)"
1316
- @validation-status-change="setValidationStatus($event, 'page-2-email', props)" />
1317
- </CmdForm>
1318
- <a href="#" @click.prevent="props.setErrorOnPage('This is an error!')">Set Error</a>
1319
- </template>
1320
- <template v-slot:page-3="props">
1321
- <h3>Page 3 - no fields required</h3>
1322
- <CmdForm @validation-status-change="toggleSystemMessage($event, props)"
1323
- :submitButton="{ show: false }" :modelValue="props.formDataForPage"
1324
- @update:modelValue="props.updateFormDataForPage"
1325
- :cmdHeadline="{ headlineText: 'Form-Elements in Slot', headlineLevel: 3 }">
1326
- <CmdFormElement element="input" type="text" labelText="Street/No:" name="street-no"
1327
- id="street-no" placeholder="Enter street and number"
1328
- v-model="props.formDataForPage.streetNo" />
1329
- <div class="input-wrapper">
1330
- <CmdFormElement element="input" type="number" labelText="Zip:" name="zip" id="zip"
1331
- v-model="props.formDataForPage.zip" />
1332
- <CmdFormElement element="input" type="text" labelText="City:" name="city" id="city"
1333
- v-model="props.formDataForPage.city" />
1568
+ </CmdSiteHeader>
1569
+ </CmdWidthLimitationWrapper>
1570
+ <!-- end site-header --------------------------------------------------------------------------------------------------->
1571
+
1572
+ <!-- begin site-search --------------------------------------------------------------------------------------------------->
1573
+ <CmdWidthLimitationWrapper>
1574
+ <h2 class="headline-demopage" id="section-site-search">
1575
+ <span>Site Search</span>
1576
+ <a href="#" class="button small icon-cog" title="Open Component Settings"
1577
+ @click.prevent="openSettingsSidebar('CmdSiteSearch')"></a>
1578
+ </h2>
1579
+ <CmdSiteSearch ref="CmdSiteSearch" v-bind="cmdSiteSearchSettingsData"
1580
+ v-model:modelValueInput1="siteSearchInput1" v-model:modelValueInput2="siteSearchInput2"
1581
+ v-model:modelValueRadius="radius" v-model:modelValueSearchFilters="filters"
1582
+ @search="siteSearchOutput" :cmdFakeSelect="siteSearchFilters" />
1583
+ </CmdWidthLimitationWrapper>
1584
+ <!-- end site-search --------------------------------------------------------------------------------------------------->
1585
+
1586
+ <!-- begin site-wrapper --------------------------------------------------------------------------------------------------->
1587
+ <CmdWidthLimitationWrapper>
1588
+ <h2 class="headline-demopage" id="section-site-wrapper">
1589
+ <span>Site Wrapper</span>
1590
+ <a href="#" class="button small icon-cog" title="Open Component Settings"
1591
+ @click.prevent="openSettingsSidebar('CmdSiteWrapper')"></a>
1592
+ </h2>
1593
+ <h3>Site Wrapper with content provided by properties</h3>
1594
+ <CmdSiteWrapper class="demo-border" ref="CmdSiteWrapper" :pageContent="siteWrapperData.pageContent"
1595
+ :cmdSiteHeader="siteWrapperData.cmdSiteHeader" :cmdSiteFooter="siteWrapperData.cmdSiteFooter" />
1596
+ <h3>Site Wrapper with content (in three columns) provided by slot</h3>
1597
+ <CmdSiteWrapper class="demo-border"
1598
+ :aside="{ leftColumn: { show: true }, rightColumn: { show: true } }" :useHeroSection="true">
1599
+ <template v-slot:topheader>
1600
+ <CmdList :items="listData" orientation="horizontal" align="right" />
1601
+ </template>
1602
+ <template v-slot:logo>
1603
+ <CmdCompanyLogo v-bind="companyLogoData" />
1604
+ </template>
1605
+ <template v-slot:hero-section-content>
1606
+ <div class="demo-border">
1607
+ Slot content for hero section
1334
1608
  </div>
1335
- </CmdForm>
1336
- </template>
1337
- <template v-slot:page-last="props">
1338
- <template v-if="!confirmDataPrivacy">
1339
- <h3>Page 4</h3>
1340
- <CmdForm :cmdHeadline="{ headlineText: 'Confirmation', headlineLevel: 3 }"
1341
- :submitButton="{ disabled: props.atleastOneStepWithError || !dataPrivacyChecked, type: 'button' }"
1342
- :cancelButton="{ show: false }" @submit="validateForm">
1343
- <p>Please confirm that all data you provided is legit.</p>
1344
- <CmdFormElement element="input" type="checkbox" labelText="Confirm data privacy:"
1345
- name="confirm-data-privacy" id="confirm-data-privac" :required="true"
1346
- v-model="dataPrivacyChecked" />
1347
- </CmdForm>
1348
1609
  </template>
1349
- <template v-else>
1350
- <h3>Confirmation</h3>
1351
- <CmdSystemMessage systemMessage="Your request was send successfully!"
1352
- validationStatus="success" :iconClose="{ show: false }" />
1353
- <p>A copy with all submitted data was send to you.</p>
1610
+ <template v-slot:left-column>
1611
+ <div class="demo-border">
1612
+ Slot content for left column
1613
+ </div>
1354
1614
  </template>
1355
- </template>
1356
- </CmdMultistepFormWrapper>
1357
- <h3>Data provided by slot</h3>
1358
- <CmdMultistepFormWrapper>
1359
- <template v-slot:progress-bar="props">
1360
- <ul class="flex-container">
1361
- <li v-for="index of props.numberOfPages" :key="index">
1362
- <a href="#" @click.prevent="props.setErrorOnPage('This is an error!')">{{ index }}</a>
1363
- </li>
1364
- </ul>
1365
- </template>
1366
- <template v-slot:page-1="props">
1367
- Content Page 1
1368
- <span v-if="props.hasError">Error</span>
1369
- <a href="#" @click.prevent="props.setErrorOnPage('This is an error!')">Set Error</a>
1370
- </template>
1371
- <template v-slot:page-2="props">
1372
- Content Page 2
1373
- <span v-if="props.hasError">Error</span>
1374
- <a href="#" @click.prevent="props.setErrorOnPage('This is an error!')">Set Error</a>
1375
- </template>
1376
- <template v-slot:page-3="props">
1377
- Content Page 3
1378
- <span v-if="props.hasError">Error</span>
1379
- </template>
1380
- <template v-slot:page-4="props">
1381
- Content Page 4
1382
- <span v-if="props.hasError">Error</span>
1383
- </template>
1384
- <template v-slot:page-5="props">
1385
- Content Page 5
1386
- <span v-if="props.hasError">Error</span>
1387
- </template>
1388
- <template v-slot:pagination="props">
1389
- <div class="button-wrapper reverse justify-content-space-between">
1390
- <CmdLink linkType="button" highlightLevel="none" :icon='{
1391
- iconClass: "icon-chevron-one-stripe-right",
1392
- tooltip: "To next page",
1393
- position: "right"
1394
- }' text="Next" :disabled="props.disabledNextLink" @click="props.setNextPage" />
1395
- <CmdLink linkType="button" class="cancel" highlightLevel="none" :icon='{
1396
- iconClass: "icon-cancel-circle",
1397
- }' text="Cancel" />
1398
- <CmdLink linkType="button" highlightLevel="none" :icon='{
1399
- iconClass: "icon-chevron-one-stripe-left",
1400
- tooltip: "To previous page"
1401
- }' text="Back" @click="props.setPrevPage" :disabled="props.disabledPrevLink" />
1402
- </div>
1403
- </template>
1404
- </CmdMultistepFormWrapper>
1405
- </CmdWidthLimitationWrapper>
1406
- <!-- end multistep-form-wrapper --------------------------------------------------------------------------------------------------->
1407
-
1408
- <!-- begin newsletter-subscription --------------------------------------------------------------------------------------------------->
1409
- <CmdWidthLimitationWrapper>
1410
- <h2 class="headline-demopage" id="section-newsletter-subscription">
1411
- <span>Newsletter Subscription</span>
1412
- <a href="#" class="button small icon-cog" title="Open Component Settings"
1413
- @click.prevent="openSettingsSidebar('CmdNewsletterSubscription')"></a>
1414
- </h2>
1415
- <CmdForm :use-fieldset="false">
1416
- <CmdNewsletterSubscription ref="CmdNewsletterSubscription"
1417
- v-bind="cmdNewsletterSubscriptionSettingsData" v-model="newsletter"
1418
- @buttonClick="submitNewsletterRegistration" />
1419
- </CmdForm>
1420
- </CmdWidthLimitationWrapper>
1421
- <!-- end newsletter-subscription --------------------------------------------------------------------------------------------------->
1422
-
1423
- <!-- begin opening-hours --------------------------------------------------------------------------------------------------->
1424
- <CmdWidthLimitationWrapper>
1425
- <h2 class="headline-demopage" id="section-opening-hours">
1426
- <span>Opening Hours</span>
1427
- <a href="#" class="button small icon-cog" title="Open Component Settings"
1428
- @click.prevent="openSettingsSidebar('CmdOpeningHours')"></a>
1429
- </h2>
1430
- <CmdOpeningHours ref="CmdOpeningHours" v-bind="cmdOpeningHoursSettingsData"
1431
- :openingHours="openingHoursData" :checkInterval="0" :use24HoursFormat="false" />
1432
- </CmdWidthLimitationWrapper>
1433
- <!-- end opening-hours --------------------------------------------------------------------------------------------------->
1434
-
1435
- <!-- begin page-footer --------------------------------------------------------------------------------------------------->
1436
- <CmdWidthLimitationWrapper>
1437
- <h2 class="headline-demopage" id="section-page-footer">
1438
- <span>Page Footer</span>
1439
- <a href="#" class="button small icon-cog" title="Open Component Settings"
1440
- @click.prevent="openSettingsSidebar('CmdPageFooter')"></a>
1441
- </h2>
1442
- <CmdPageFooter ref="CmdPageFooter" v-bind="cmdPageFooterSettingsData"
1443
- :button-print-view="{ text: 'Print this page' }" :cmdSocialNetworks="socialNetworksData">
1444
- <button class="button primary" title="Button given by slot">
1445
- <span class="icon-mail"></span>
1446
- <span>Contact</span>
1447
- </button>
1448
- </CmdPageFooter>
1449
- </CmdWidthLimitationWrapper>
1450
- <!-- end page-footer --------------------------------------------------------------------------------------------------->
1451
-
1452
- <!-- begin page-header --------------------------------------------------------------------------------------------------->
1453
- <CmdWidthLimitationWrapper>
1454
- <h2 class="headline-demopage" id="section-page-header">
1455
- <span>Page Header</span>
1456
- <a href="#" class="button small icon-cog" title="Open Component Settings"
1457
- @click.prevent="openSettingsSidebar('CmdPageHeader')"></a>
1458
- </h2>
1459
- <CmdPageHeader ref="CmdPageHeader" :cmdBreadcrumbs="breadcrumbsData"
1460
- :cmdHeadline="{ headlineText: 'Main headline for page', headlineLevel: 1 }">
1461
- <a href="#" title="Link given by slot">
1462
- <span class="icon-user-profile"></span>
1463
- <span>You are logged in</span>
1464
- </a>
1465
- </CmdPageHeader>
1466
- </CmdWidthLimitationWrapper>
1467
- <!-- end page-header --------------------------------------------------------------------------------------------------->
1468
-
1469
- <!-- begin pagination --------------------------------------------------------------------------------------------------->
1470
- <CmdWidthLimitationWrapper>
1471
- <h2 class="headline-demopage" id="section-pagination">
1472
- <span>Pagination</span>
1473
- <a href="#" class="button small icon-cog" title="Open Component Settings"
1474
- @click.prevent="openSettingsSidebar('CmdPagination')"></a>
1475
- </h2>
1476
- <div>
1477
- <p>Page {{ showPagePager }}</p>
1478
- </div>
1479
- <CmdPagination ref="CmdPagination" v-bind="cmdPaginationSettingsData" @click="showPagePager = $event" />
1480
- </CmdWidthLimitationWrapper>
1481
- <!-- end pagination --------------------------------------------------------------------------------------------------->
1482
-
1483
- <!-- begin paragraph --------------------------------------------------------------------------------------------------->
1484
- <CmdWidthLimitationWrapper>
1485
- <h2 class="headline-demopage" id="section-paragraph">
1486
- <span>Paragraph</span>
1487
- <a href="#" class="button small icon-cog" title="Open Component Settings"
1488
- @click.prevent="openSettingsSidebar('CmdParagraph')"></a>
1489
- </h2>
1490
- <CmdParagraph ref="CmdParagraph" v-bind="cmdParagraphSettingsData" />
1491
- </CmdWidthLimitationWrapper>
1492
- <!-- end paragraph --------------------------------------------------------------------------------------------------->
1493
-
1494
- <!-- begin section --------------------------------------------------------------------------------------------------->
1495
- <CmdWidthLimitationWrapper>
1496
- <h2 class="headline-demopage" id="section-section">
1497
- <span>Section</span>
1498
- <a href="#" class="button small icon-cog" title="Open Component Settings"
1499
- @click.prevent="openSettingsSidebar('CmdSection')"></a>
1500
- </h2>
1501
- <h3>Section with content provided by properties</h3>
1502
- <CmdSection
1503
- style="border: 1px dashed var(--color-medium-gray);"
1504
- :cmdHeadline="{ headlineText: 'Headline for section provided by property', headlineLevel: 4 }"
1505
- content="Content for section provided by property." />
1506
- <h3>Section with content provided by slot</h3>
1507
- <CmdSection :useSlot="true" style="border: 1px dashed var(--color-medium-gray);">
1508
- <h4>Headline for section provided by slot</h4>
1509
- <p>Content for section provided by slot.</p>
1510
- </CmdSection>
1511
- <h3>Section styled as box</h3>
1512
- <CmdSection :useSlot="true" :styleAsBox="true">
1513
- <h4>Headline for section styled as box</h4>
1514
- <p>Content for section styled as box.</p>
1515
- </CmdSection>
1516
- </CmdWidthLimitationWrapper>
1517
- <!-- end section --------------------------------------------------------------------------------------------------->
1518
-
1519
- <!-- begin site-footer --------------------------------------------------------------------------------------------------->
1520
- <CmdWidthLimitationWrapper>
1521
- <h2 class="headline-demopage" id="section-site-footer">Site Footer</h2>
1522
- <h3>Site Footer with content provided by properties</h3>
1523
- <CmdSiteFooter :cmdList="{items: listData}" />
1524
- <h3>Site Footer with content provided by slot</h3>
1525
- <CmdSiteFooter>
1526
- <CmdLink linkType="href" ref="CmdLink" v-bind="cmdLinkSettingsData"
1527
- :icon="{ iconClass: 'icon-chevron-one-stripe-right', position: 'left', tooltip: 'Tooltip for hyperlink' }"
1528
- @click="cmdLinkOutput" />
1529
- </CmdSiteFooter>
1530
- </CmdWidthLimitationWrapper>
1531
- <!-- end site-footer --------------------------------------------------------------------------------------------------->
1532
-
1533
- <!-- begin site-header --------------------------------------------------------------------------------------------------->
1534
- <CmdWidthLimitationWrapper>
1535
- <h2 class="headline-demopage" id="section-site-header">
1536
- <span>Site Header</span>
1537
- <a href="#" class="button small icon-cog" title="Open Component Settings"
1538
- @click.prevent="openSettingsSidebar('CmdSiteHeader')"></a>
1539
- </h2>
1540
- <CmdSiteHeader ref="CmdSiteHeader" v-bind="cmdSiteHeaderSettingsData" :cmdCompanyLogo="companyLogoData">
1541
- <template v-slot:topheader>
1542
- <CmdList :items="listData" orientation="horizontal" align="right" />
1543
- </template>
1544
- </CmdSiteHeader>
1545
- </CmdWidthLimitationWrapper>
1546
- <!-- end site-header --------------------------------------------------------------------------------------------------->
1547
-
1548
- <!-- begin site-search --------------------------------------------------------------------------------------------------->
1549
- <CmdWidthLimitationWrapper>
1550
- <h2 class="headline-demopage" id="section-site-search">
1551
- <span>Site Search</span>
1552
- <a href="#" class="button small icon-cog" title="Open Component Settings"
1553
- @click.prevent="openSettingsSidebar('CmdSiteSearch')"></a>
1554
- </h2>
1555
- <CmdSiteSearch ref="CmdSiteSearch" v-bind="cmdSiteSearchSettingsData"
1556
- v-model:modelValueInput1="siteSearchInput1" v-model:modelValueInput2="siteSearchInput2"
1557
- v-model:modelValueRadius="radius" v-model:modelValueSearchFilters="filters"
1558
- @search="siteSearchOutput" :cmdFakeSelect="siteSearchFilters" />
1559
- </CmdWidthLimitationWrapper>
1560
- <!-- end site-search --------------------------------------------------------------------------------------------------->
1561
-
1562
- <!-- begin site-wrapper --------------------------------------------------------------------------------------------------->
1563
- <CmdWidthLimitationWrapper>
1564
- <h2 class="headline-demopage" id="section-site-wrapper">
1565
- <span>Site Wrapper</span>
1566
- <a href="#" class="button small icon-cog" title="Open Component Settings"
1567
- @click.prevent="openSettingsSidebar('CmdSiteWrapper')"></a>
1568
- </h2>
1569
- <h3>Site Wrapper with content provided by properties</h3>
1570
- <CmdSiteWrapper
1571
- class="demo-border"
1572
- ref="CmdSiteWrapper"
1573
- :pageContent="siteWrapperData.pageContent"
1574
- :cmdSiteHeader="siteWrapperData.cmdSiteHeader"
1575
- :cmdSiteFooter="siteWrapperData.cmdSiteFooter"
1576
- />
1577
- <h3>Site Wrapper with content (in three columns) provided by slot</h3>
1578
- <CmdSiteWrapper class="demo-border">
1579
- <template v-slot:topheader>
1580
- <CmdList :items="listData" orientation="horizontal" align="right" />
1581
- </template>
1582
- <template v-slot:logo>
1583
- <CmdCompanyLogo v-bind="companyLogoData" />
1584
- </template>
1585
- <template v-slot:left-column>
1586
- Slot content for left column
1587
- </template>
1588
- <template v-slot:page-content>
1589
- <div class="demo-border">
1590
- <h2>Headline for page-content-slot</h2>
1591
- <p>Content for page-content-slot</p>
1592
- </div>
1593
- </template>
1594
- <template v-slot:right-column>
1595
- Slot content for right column
1596
- </template>
1597
- <template v-slot:site-footer>
1598
- Slot content for site-footer-slot
1599
- </template>
1600
- </CmdSiteWrapper>
1601
- </CmdWidthLimitationWrapper>
1602
- <!-- end site-wrapper --------------------------------------------------------------------------------------------------->
1603
-
1604
- <!-- begin slideshow --------------------------------------------------------------------------------------------------->
1605
- <CmdWidthLimitationWrapper>
1606
- <h2 class="headline-demopage" id="section-slideshow">
1607
- <span>Slideshow</span>
1608
- <a href="#" class="button small icon-cog" title="Open Component Settings"
1609
- @click.prevent="openSettingsSidebar('CmdSlideshow')"></a>
1610
- </h2>
1611
- <CmdSlideshow ref="CmdSlideshow" v-bind="cmdSlideshowSettingsData" :slideshow-items="slideshowData">
1612
- Slot-Content
1613
- </CmdSlideshow>
1614
- </CmdWidthLimitationWrapper>
1615
- <!-- end slideshow --------------------------------------------------------------------------------------------------->
1616
-
1617
-
1618
- <!-- begin smart-search --------------------------------------------------------------------------------------------------->
1619
- <CmdWidthLimitationWrapper>
1620
- <h2 class="headline-demopage" id="section-smart-search">
1621
- <span>Smart Search</span>
1622
- <a href="#" class="button small icon-cog" title="Open Component Settings"
1623
- @click.prevent="openSettingsSidebar('CmdSmartSearch')"></a>
1624
- </h2>
1625
- <CmdSmartSearch ref="CmdSmartSearch" v-bind="smartSearchSettingsData"
1626
- :listOfRecommendations="smartSearchData.listOfRecommendations" v-model="smartSearchString"
1627
- :maxNumberOfRecommendations="5" />
1628
- <output>
1629
- smartSearchString: {{ smartSearchString }}
1630
- </output>
1631
- <CmdSmartSearch :listOfRecommendations="smartSearchData.listOfRecommendations"
1632
- v-model="smartSearchObject" :maxNumberOfRecommendations="5" :openListToTop="true" />
1633
- <output>
1634
- smartSearchObject: {{ smartSearchObject }}
1635
- </output>
1636
- </CmdWidthLimitationWrapper>
1637
- <!-- end smart-search --------------------------------------------------------------------------------------------------->
1638
-
1639
- <!-- begin social-networks --------------------------------------------------------------------------------------------------->
1640
- <CmdWidthLimitationWrapper>
1641
- <h2 class="headline-demopage" id="section-social-networks">
1642
- <span>Social Networks</span>
1643
- <a href="#" class="button small icon-cog" title="Open Component Settings"
1644
- @click.prevent="openSettingsSidebar('CmdSocialNetworks')"></a>
1645
- </h2>
1646
- <CmdSocialNetworks ref="CmdSocialNetworks"
1647
- v-bind="{ ...cmdSocialNetworksSettingsData, ...socialNetworksData }" />
1648
- </CmdWidthLimitationWrapper>
1649
- <!-- end social-networks --------------------------------------------------------------------------------------------------->
1650
-
1651
- <!-- begin switch-language --------------------------------------------------------------------------------------------------->
1652
- <CmdWidthLimitationWrapper>
1653
- <h2 class="headline-demopage" id="section-switch-language">Switch Language</h2>
1654
- <CmdSwitchLanguage :pathFlags="switchLanguage.pathFlags" :languages="switchLanguage.languages"
1655
- @click="updateLanguage" />
1656
- <p>Selected language: {{ selectedLanguage }} </p>
1657
- </CmdWidthLimitationWrapper>
1658
- <!-- end switch-language --------------------------------------------------------------------------------------------------->
1659
-
1660
- <!-- begin system-message --------------------------------------------------------------------------------------------------->
1661
- <CmdWidthLimitationWrapper>
1662
- <h2 class="headline-demopage" id="section-system-message">
1663
- <span>System Message</span>
1664
- <a href="#" class="button small icon-cog" title="Open Component Settings"
1665
- @click.prevent="openSettingsSidebar('CmdSystemMessage')"></a>
1666
- </h2>
1667
- <CmdSystemMessage ref="CmdSystemMessage" v-bind="cmdSystemMessageSettingsData"
1668
- :iconClose="{ iconClass: 'icon-error-circle', show: true }" />
1669
- <CmdSystemMessage validationStatus="warning" :iconClose="{ show: false }">
1670
- <p>This is a system message with slot-content. (that cannot be closed)</p>
1671
- </CmdSystemMessage>
1672
- </CmdWidthLimitationWrapper>
1673
- <!-- end system-message --------------------------------------------------------------------------------------------------->
1674
-
1675
- <!-- begin tables --------------------------------------------------------------------------------------------------->
1676
- <CmdWidthLimitationWrapper>
1677
- <h2 class="headline-demopage" id="section-tables">
1678
- <span>Tables</span>
1679
- <a href="#" class="button small icon-cog" title="Open Component Settings"
1680
- @click.prevent="openSettingsSidebar('CmdTable')"></a>
1681
- </h2>
1682
- <h3>Table as wide as its content (with caption)</h3>
1683
- <CmdTable ref="CmdTable" v-bind="cmdTableSettingsData" :table-data="tableDataLarge" />
1684
- <h3>Table as wide as possible</h3>
1685
- <CmdTable :collapsible="true" :fullWidthOnDefault="false" :userCanToggleWidth="true"
1686
- :table-data="tableDataLarge" />
1687
- </CmdWidthLimitationWrapper>
1688
- <!-- end tables --------------------------------------------------------------------------------------------------->
1689
-
1690
- <!-- begin tabs --------------------------------------------------------------------------------------------------->
1691
- <CmdWidthLimitationWrapper>
1692
- <h2 class="headline-demopage" id="section-tabs">
1693
- <span>Tabs</span>
1694
- <a href="#" class="button small icon-cog" title="Open Component Settings"
1695
- @click.prevent="openSettingsSidebar('CmdTabs')"></a>
1696
- </h2>
1697
- <CmdTabs ref="CmdTabs" v-bind="cmdTabsSettingsData" :tabs="tabsData">
1698
- <template v-slot:tab-content-0>
1699
- <h4>Tab 1 headline</h4>
1700
- <p>Slot-Content Tab 1</p>
1701
- </template>
1702
- <template v-slot:tab-content-1>
1703
- <h4>Tab 2 headline</h4>
1704
- <p>Slot-Content Tab 2</p>
1705
- </template>
1706
- <template v-slot:tab-content-2>
1707
- <h4>Tab 3 headline</h4>
1708
- <p>Slot-Content Tab 3</p>
1709
- </template>
1710
- </CmdTabs>
1711
- </CmdWidthLimitationWrapper>
1712
- <!-- end tabs --------------------------------------------------------------------------------------------------->
1713
-
1714
- <!-- begin tags --------------------------------------------------------------------------------------------------->
1715
- <CmdWidthLimitationWrapper>
1716
- <h2 class="headline-demopage" id="section-tag">
1717
- <span>Tag</span>
1718
- <a href="#" class="button small icon-cog" title="Open Component Settings"
1719
- @click.prevent="openSettingsSidebar('CmdTag')">
1720
- </a>
1721
- </h2>
1722
- <CmdTag ref="CmdTag" v-bind="cmdTagSettingsData" />
1723
- </CmdWidthLimitationWrapper>
1724
- <!-- end tags --------------------------------------------------------------------------------------------------->
1725
-
1726
- <!-- begin text-image-block --------------------------------------------------------------------------------------------------->
1727
- <CmdWidthLimitationWrapper>
1728
- <h2 class="headline-demopage" id="section-text-image-block">
1729
- <span>Text-Image-Block</span>
1730
- <a href="#" class="button small icon-cog" title="Open Component Settings"
1731
- @click.prevent="openSettingsSidebar('CmdTextImageBlock')"></a>
1732
- </h2>
1733
- <div class="flex-container">
1734
- <CmdTextImageBlock
1735
- :cmdHeadline="{ headlineText: 'Text-Image-Block (with html-text)', headlineLevel: 3 }"
1736
- htmlContent="<p>This text is given as html-text and show below an optional image.</p>" />
1737
- <CmdTextImageBlock ref="CmdTextImageBlock" v-bind="cmdTextImageBlockSettingsData"
1738
- :cmdHeadline="{ headlineText: 'Text-Image-Block (with image and plain text)', headlineLevel: 3 }"
1739
- :cmdImage='{
1740
- "image": {
1741
- "src": "/media/images/demo-images/large/landscape-01.jpg",
1742
- "alt": "alternative text",
1743
- "tooltip": "tooltip"
1744
- },
1745
- "figcaption": {
1746
- "text": "figcaption",
1747
- "position": "bottom",
1748
- "textAlign": "center",
1749
- "show": true
1750
- }
1751
- }' htmlContent="This text is given as plain text and show below an optional image." />
1752
- <CmdTextImageBlock
1753
- :cmdHeadline="{ headlineText: 'Text-Image-Block (with image and html-text)', headlineLevel: 3 }"
1754
- htmlContent="<p>This text is given as html-text and show below an optional image.</p>"
1755
- :cmdImage='{
1756
- "image": {
1757
- "src": "/media/images/demo-images/large/landscape-02.jpg",
1758
- "alt": "alternative text",
1759
- "tooltip": "tooltip"
1760
- },
1761
- "figcaption": {
1762
- "text": "figcaption",
1763
- "position": "bottom",
1764
- "textAlign": "center",
1765
- "show": true
1766
- }
1767
- }' />
1768
- </div>
1769
- </CmdWidthLimitationWrapper>
1770
- <!-- end text-image-block --------------------------------------------------------------------------------------------------->
1771
-
1772
- <!-- begin thumbnail-scroller --------------------------------------------------------------------------------------------------->
1773
- <CmdWidthLimitationWrapper>
1774
- <h2 class="headline-demopage" id="section-thumbnail-scroller">
1775
- <span>Thumbnail-Scroller</span>
1776
- <a href="#" class="button small icon-cog" title="Open Component Settings"
1777
- @click.prevent="openSettingsSidebar('CmdThumbnailScroller')"></a>
1778
- </h2>
1779
- <p> date (YMD/default): {{ formatDate('2025-01-28', "", "-") }}</p>
1780
- <p> date (DMY): {{ formatDate('2025-01-28', "dmy") }}</p>
1781
- <p> date (MDY): {{ formatDate('2025-01-28', "mdy", "/") }}</p>
1782
- <p> date (invalid): {{ formatDate('invalid') }}</p>
1783
- <div class="inline-size">
1784
- <CmdThumbnailScroller ref="CmdThumbnailScroller" v-bind="cmdThumbnailScrollerSettingsData"
1785
- :thumbnailScrollerItems="thumbnailScrollerData" />
1786
- </div>
1787
- </CmdWidthLimitationWrapper>
1788
- <!-- end thumbnail-scroller --------------------------------------------------------------------------------------------------->
1789
-
1790
- <!-- begin toast --------------------------------------------------------------------------------------------------->
1791
- <CmdWidthLimitationWrapper>
1792
- <h2 class="headline-demopage" id="section-toast">
1793
- <span>Toast</span>
1794
- <a href="#" class="button small icon-cog" title="Open Component Settings"
1795
- @click.prevent="openSettingsSidebar('CmdToast')">
1796
- </a>
1797
- </h2>
1798
- <CmdToast message="This is a message!" ref="CmdToast" />
1799
- <div class="button-wrapper">
1800
- <button type="button" class="button" @click="$refs.CmdToast.toggleToast()">
1801
- <span>Toggle Toast</span>
1615
+ <template v-slot:page-content>
1616
+ <div class="demo-border">
1617
+ <h2>Headline for page-content-slot</h2>
1618
+ <p>Content for page-content-slot</p>
1619
+ </div>
1620
+ </template>
1621
+ <template v-slot:right-column>
1622
+ <div class="demo-border">
1623
+ Slot content for right column
1624
+ </div>
1625
+ </template>
1626
+ <template v-slot:site-footer>
1627
+ <div class="demo-border">
1628
+ Slot content for site-footer-slot
1629
+ </div>
1630
+ </template>
1631
+ </CmdSiteWrapper>
1632
+ </CmdWidthLimitationWrapper>
1633
+ <!-- end site-wrapper --------------------------------------------------------------------------------------------------->
1634
+
1635
+ <!-- begin slideshow --------------------------------------------------------------------------------------------------->
1636
+ <CmdWidthLimitationWrapper>
1637
+ <h2 class="headline-demopage" id="section-slideshow">
1638
+ <span>Slideshow</span>
1639
+ <a href="#" class="button small icon-cog" title="Open Component Settings"
1640
+ @click.prevent="openSettingsSidebar('CmdSlideshow')"></a>
1641
+ </h2>
1642
+ <CmdSlideshow ref="CmdSlideshow" v-bind="cmdSlideshowSettingsData" :slideshow-items="slideshowData">
1643
+ Slot-Content
1644
+ </CmdSlideshow>
1645
+ </CmdWidthLimitationWrapper>
1646
+ <!-- end slideshow --------------------------------------------------------------------------------------------------->
1647
+
1648
+
1649
+ <!-- begin smart-search --------------------------------------------------------------------------------------------------->
1650
+ <CmdWidthLimitationWrapper>
1651
+ <h2 class="headline-demopage" id="section-smart-search">
1652
+ <span>Smart Search</span>
1653
+ <a href="#" class="button small icon-cog" title="Open Component Settings"
1654
+ @click.prevent="openSettingsSidebar('CmdSmartSearch')"></a>
1655
+ </h2>
1656
+ <CmdSmartSearch ref="CmdSmartSearch" v-bind="smartSearchSettingsData"
1657
+ :listOfRecommendations="smartSearchData.listOfRecommendations" v-model="smartSearchString"
1658
+ :maxNumberOfRecommendations="5" />
1659
+ <output>
1660
+ smartSearchString: {{ smartSearchString }}
1661
+ </output>
1662
+ <CmdSmartSearch :listOfRecommendations="smartSearchData.listOfRecommendations"
1663
+ v-model="smartSearchObject" :maxNumberOfRecommendations="5" :openListToTop="true" />
1664
+ <output>
1665
+ smartSearchObject: {{ smartSearchObject }}
1666
+ </output>
1667
+ </CmdWidthLimitationWrapper>
1668
+ <!-- end smart-search --------------------------------------------------------------------------------------------------->
1669
+
1670
+ <!-- begin social-networks --------------------------------------------------------------------------------------------------->
1671
+ <CmdWidthLimitationWrapper>
1672
+ <h2 class="headline-demopage" id="section-social-networks">
1673
+ <span>Social Networks</span>
1674
+ <a href="#" class="button small icon-cog" title="Open Component Settings"
1675
+ @click.prevent="openSettingsSidebar('CmdSocialNetworks')"></a>
1676
+ </h2>
1677
+ <CmdSocialNetworks ref="CmdSocialNetworks"
1678
+ v-bind="{ ...cmdSocialNetworksSettingsData, ...socialNetworksData }" />
1679
+ </CmdWidthLimitationWrapper>
1680
+ <!-- end social-networks --------------------------------------------------------------------------------------------------->
1681
+
1682
+ <!-- begin switch-language --------------------------------------------------------------------------------------------------->
1683
+ <CmdWidthLimitationWrapper>
1684
+ <h2 class="headline-demopage" id="section-switch-language">Switch Language</h2>
1685
+ <CmdSwitchLanguage :pathFlags="switchLanguage.pathFlags" :languages="switchLanguage.languages"
1686
+ @click="updateLanguage" />
1687
+ <output>Selected language: {{ selectedLanguage }} </output>
1688
+ </CmdWidthLimitationWrapper>
1689
+ <!-- end switch-language --------------------------------------------------------------------------------------------------->
1690
+
1691
+ <!-- begin system-message --------------------------------------------------------------------------------------------------->
1692
+ <CmdWidthLimitationWrapper>
1693
+ <h2 class="headline-demopage" id="section-system-message">
1694
+ <span>System Message</span>
1695
+ <a href="#" class="button small icon-cog" title="Open Component Settings"
1696
+ @click.prevent="openSettingsSidebar('CmdSystemMessage')"></a>
1697
+ </h2>
1698
+ <CmdSystemMessage ref="CmdSystemMessage" v-bind="cmdSystemMessageSettingsData" />
1699
+ <CmdSystemMessage validationStatus="warning" :allowUserToCloseMessage="false">
1700
+ <h4>This is a system message with slot-content. (that cannot be closed)</h4>
1701
+ </CmdSystemMessage>
1702
+ </CmdWidthLimitationWrapper>
1703
+ <!-- end system-message --------------------------------------------------------------------------------------------------->
1704
+
1705
+ <!-- begin tables --------------------------------------------------------------------------------------------------->
1706
+ <CmdWidthLimitationWrapper>
1707
+ <h2 class="headline-demopage" id="section-tables">
1708
+ <span>Tables</span>
1709
+ <a href="#" class="button small icon-cog" title="Open Component Settings"
1710
+ @click.prevent="openSettingsSidebar('CmdTable')"></a>
1711
+ </h2>
1712
+ <h3>Table as wide as its content (with caption)</h3>
1713
+ <CmdTable ref="CmdTable" v-bind="cmdTableSettingsData" :table-data="tableDataLarge" />
1714
+ <h3>Table as wide as possible</h3>
1715
+ <CmdTable :collapsible="true" :fullWidthOnDefault="false" :userCanToggleWidth="true"
1716
+ :table-data="tableDataLarge" />
1717
+ </CmdWidthLimitationWrapper>
1718
+ <!-- end tables --------------------------------------------------------------------------------------------------->
1719
+
1720
+ <!-- begin tabs --------------------------------------------------------------------------------------------------->
1721
+ <CmdWidthLimitationWrapper>
1722
+ <h2 class="headline-demopage" id="section-tabs">
1723
+ <span>Tabs</span>
1724
+ <a href="#" class="button small icon-cog" title="Open Component Settings"
1725
+ @click.prevent="openSettingsSidebar('CmdTabs')"></a>
1726
+ </h2>
1727
+ <CmdTabs ref="CmdTabs" v-bind="cmdTabsSettingsData" :tabs="tabsData">
1728
+ <template v-slot:tab-content-0>
1729
+ <h4>Tab 1 headline</h4>
1730
+ <p>Slot-Content Tab 1</p>
1731
+ </template>
1732
+ <template v-slot:tab-content-1>
1733
+ <h4>Tab 2 headline</h4>
1734
+ <p>Slot-Content Tab 2</p>
1735
+ </template>
1736
+ <template v-slot:tab-content-2>
1737
+ <h4>Tab 3 headline</h4>
1738
+ <p>Slot-Content Tab 3</p>
1739
+ </template>
1740
+ </CmdTabs>
1741
+ </CmdWidthLimitationWrapper>
1742
+ <!-- end tabs --------------------------------------------------------------------------------------------------->
1743
+
1744
+ <!-- begin tags --------------------------------------------------------------------------------------------------->
1745
+ <CmdWidthLimitationWrapper>
1746
+ <h2 class="headline-demopage" id="section-tag">
1747
+ <span>Tag</span>
1748
+ <a href="#" class="button small icon-cog" title="Open Component Settings"
1749
+ @click.prevent="openSettingsSidebar('CmdTag')">
1750
+ </a>
1751
+ </h2>
1752
+ <CmdTag ref="CmdTag" v-bind="cmdTagSettingsData" />
1753
+ </CmdWidthLimitationWrapper>
1754
+ <!-- end tags --------------------------------------------------------------------------------------------------->
1755
+
1756
+ <!-- begin text-image-block --------------------------------------------------------------------------------------------------->
1757
+ <CmdWidthLimitationWrapper>
1758
+ <h2 class="headline-demopage" id="section-text-image-block">
1759
+ <span>Text-Image-Block</span>
1760
+ <a href="#" class="button small icon-cog" title="Open Component Settings"
1761
+ @click.prevent="openSettingsSidebar('CmdTextImageBlock')"></a>
1762
+ </h2>
1763
+ <div class="flex-container">
1764
+ <CmdTextImageBlock
1765
+ :cmdHeadline="{ headlineText: 'Text-Image-Block (with html-text)', headlineLevel: 3 }"
1766
+ :cmdParagraph="{ content: 'This text is given as html-text and show below an optional image.'}" />
1767
+ <CmdTextImageBlock ref="CmdTextImageBlock" v-bind="cmdTextImageBlockSettingsData"
1768
+ :cmdHeadline="{ headlineText: 'Text-Image-Block (with image and plain text)', headlineLevel: 3 }"
1769
+ :cmdParagraph="{ content: 'This text is given as html-text and show below an optional image.'}"
1770
+ :cmdImage='{
1771
+ "image": {
1772
+ "src": "/media/images/demo-images/large/landscape-01.jpg",
1773
+ "alt": "alternative text",
1774
+ "tooltip": "tooltip"
1775
+ },
1776
+ "figcaption": {
1777
+ "text": "figcaption",
1778
+ "position": "bottom",
1779
+ "textAlign": "center",
1780
+ "show": true
1781
+ }
1782
+ }' />
1783
+ <CmdTextImageBlock
1784
+ :cmdHeadline="{ headlineText: 'Text-Image-Block (with image and html-text)', headlineLevel: 3 }"
1785
+ :cmdParagraph="{ content: 'This text is given as html-text and show below an optional image.'}"
1786
+ :cmdImage='{
1787
+ "image": {
1788
+ "src": "/media/images/demo-images/large/landscape-02.jpg",
1789
+ "alt": "alternative text",
1790
+ "tooltip": "tooltip"
1791
+ },
1792
+ "figcaption": {
1793
+ "text": "figcaption",
1794
+ "position": "bottom",
1795
+ "textAlign": "center",
1796
+ "show": true
1797
+ }
1798
+ }' />
1799
+ </div>
1800
+ </CmdWidthLimitationWrapper>
1801
+ <!-- end text-image-block --------------------------------------------------------------------------------------------------->
1802
+
1803
+ <!-- begin thumbnail-scroller --------------------------------------------------------------------------------------------------->
1804
+ <CmdWidthLimitationWrapper>
1805
+ <h2 class="headline-demopage" id="section-thumbnail-scroller">
1806
+ <span>Thumbnail-Scroller</span>
1807
+ <a href="#" class="button small icon-cog" title="Open Component Settings"
1808
+ @click.prevent="openSettingsSidebar('CmdThumbnailScroller')"></a>
1809
+ </h2>
1810
+ <p> date (YMD/default): {{ formatDate('2025-01-28', "", "-") }}</p>
1811
+ <p> date (DMY): {{ formatDate('2025-01-28', "dmy") }}</p>
1812
+ <p> date (MDY): {{ formatDate('2025-01-28', "mdy", "/") }}</p>
1813
+ <p> date (invalid): {{ formatDate('invalid') }}</p>
1814
+ <div class="inline-size">
1815
+ <CmdThumbnailScroller ref="CmdThumbnailScroller" v-bind="cmdThumbnailScrollerSettingsData"
1816
+ :thumbnailScrollerItems="thumbnailScrollerData" />
1817
+ </div>
1818
+ </CmdWidthLimitationWrapper>
1819
+ <!-- end thumbnail-scroller --------------------------------------------------------------------------------------------------->
1820
+
1821
+ <!-- begin toast --------------------------------------------------------------------------------------------------->
1822
+ <CmdWidthLimitationWrapper>
1823
+ <h2 class="headline-demopage" id="section-toast">
1824
+ <span>Toast</span>
1825
+ <a href="#" class="button small icon-cog" title="Open Component Settings"
1826
+ @click.prevent="openSettingsSidebar('CmdToast')">
1827
+ </a>
1828
+ </h2>
1829
+ <CmdToast message="This is a message!" ref="CmdToast" />
1830
+ <div class="button-wrapper">
1831
+ <button type="button" class="button" @click="$refs.CmdToast.toggleToast()">
1832
+ <span>Toggle Toast</span>
1833
+ </button>
1834
+ </div>
1835
+ </CmdWidthLimitationWrapper>
1836
+ <!-- end toast --------------------------------------------------------------------------------------------------->
1837
+
1838
+ <!-- begin toggle-darkmode --------------------------------------------------------------------------------------------------->
1839
+ <CmdWidthLimitationWrapper>
1840
+ <h2 class="headline-demopage" id="section-toggle-dark-mode">
1841
+ <span>Toggle Dark-Mode</span>
1842
+ <a href="#" class="button small icon-cog" title="Open Component Settings"
1843
+ @click.prevent="openSettingsSidebar('CmdToggleDarkMode')"></a>
1844
+ </h2>
1845
+ <CmdToggleDarkMode ref="CmdToggleDarkMode" v-bind="cmdToggleDarkModeSettingsData" />
1846
+ </CmdWidthLimitationWrapper>
1847
+ <!-- end toggle-darkmode --------------------------------------------------------------------------------------------------->
1848
+
1849
+ <!-- begin tooltip --------------------------------------------------------------------------------------------------->
1850
+ <CmdWidthLimitationWrapper>
1851
+ <h2 class="headline-demopage" id="section-tooltip">
1852
+ <span>Tooltip</span>
1853
+ <a href="#" class="button small icon-cog" title="Open Component Settings"
1854
+ @click.prevent="openSettingsSidebar('CmdTooltip')"></a>
1855
+ </h2>
1856
+ <a href="#" @click.prevent style="anchor-name: --tooltip-anchor-for-hover;" id="show-on-hover">Show
1857
+ tooltip on
1858
+ hover!</a><br />
1859
+ <CmdTooltip id="tooltip-target-hover" positionAnchor="--tooltip-anchor-for-hover"
1860
+ relatedId="show-on-hover" tooltipText="This is text for a tooltip by hover!" />
1861
+
1862
+ <a href="#" @click.prevent style="anchor-name: --tooltip-anchor-for-hover-on-delay"
1863
+ id="show-with-delay">Show
1864
+ tooltip on hover with delay!</a><br />
1865
+ <CmdTooltip id="tooltip-target-hover-on-delay" positionAnchor="--tooltip-anchor-for-hover-on-delay"
1866
+ relatedId="show-with-delay" :delayToShowTooltip="2000">
1867
+ Tooltip on hover with delay
1868
+ </CmdTooltip>
1869
+
1870
+ <button type="button" class="button" style="anchor-name: --tooltip-anchor-for-click;"
1871
+ positionAnchor="--tooltip-anchor-for-click" title="Click to open tooltip"
1872
+ popovertarget="tooltip-target-click" aria-describedby="tooltip-target-click">
1873
+ <span class="icon-questionmark"></span>
1874
+ <span>Toggle Tooltip</span>
1802
1875
  </button>
1803
- </div>
1804
-
1805
- </CmdWidthLimitationWrapper>
1806
- <!-- end toast --------------------------------------------------------------------------------------------------->
1807
-
1808
- <!-- begin toggle-darkmode --------------------------------------------------------------------------------------------------->
1809
- <CmdWidthLimitationWrapper>
1810
- <h2 class="headline-demopage" id="section-toggle-dark-mode">
1811
- <span>Toggle Dark-Mode</span>
1812
- <a href="#" class="button small icon-cog" title="Open Component Settings"
1813
- @click.prevent="openSettingsSidebar('CmdToggleDarkMode')"></a>
1814
- </h2>
1815
- <CmdToggleDarkMode ref="CmdToggleDarkMode" v-bind="cmdToggleDarkModeSettingsData" />
1816
- </CmdWidthLimitationWrapper>
1817
- <!-- end toggle-darkmode --------------------------------------------------------------------------------------------------->
1818
-
1819
- <!-- begin tooltip --------------------------------------------------------------------------------------------------->
1820
- <CmdWidthLimitationWrapper>
1821
- <h2 class="headline-demopage" id="section-tooltip">
1822
- <span>Tooltip</span>
1823
- <a href="#" class="button small icon-cog" title="Open Component Settings"
1824
- @click.prevent="openSettingsSidebar('CmdTooltip')"></a>
1825
- </h2>
1826
- <a href="#" @click.prevent style="anchor-name: --tooltip-anchor-for-hover;" id="show-on-hover">Show
1827
- tooltip on
1828
- hover!</a><br />
1829
- <CmdTooltip id="tooltip-target-hover" positionAnchor="--tooltip-anchor-for-hover"
1830
- relatedId="show-on-hover" tooltipText="This is text for a tooltip by hover!" />
1831
-
1832
- <a href="#" @click.prevent style="anchor-name: --tooltip-anchor-for-hover-on-delay"
1833
- id="show-with-delay">Show
1834
- tooltip on hover with delay!</a><br />
1835
- <CmdTooltip id="tooltip-target-hover-on-delay" positionAnchor="--tooltip-anchor-for-hover-on-delay"
1836
- relatedId="show-with-delay" :delayToShowTooltip="2000">
1837
- Tooltip on hover with delay
1838
- </CmdTooltip>
1839
-
1840
- <button type="button" class="button" style="anchor-name: --tooltip-anchor-for-click;"
1841
- positionAnchor="--tooltip-anchor-for-click" title="Click to open tooltip"
1842
- popovertarget="tooltip-target-click" aria-describedby="tooltip-target-click">
1843
- <span class="icon-questionmark"></span>
1844
- <span>Toggle Tooltip</span>
1845
- </button>
1846
- <CmdTooltip ref="CmdTooltip" :popoverTargetName="'tooltip-target-click'" :showCloseIcon="true"
1847
- positionAnchor="--tooltip-anchor-for-click" tooltipText="This is text for a tooltip by click!"
1848
- v-bind="cmdTooltipSettingsData" />
1849
- </CmdWidthLimitationWrapper>
1850
- <!-- end tooltip --------------------------------------------------------------------------------------------------->
1851
-
1852
- <!-- begin upload-form --------------------------------------------------------------------------------------------------->
1853
- <CmdWidthLimitationWrapper>
1854
- <h2 class="headline-demopage" id="section-upload-form">
1855
- <span>Upload-Form</span>
1856
- <a href="#" class="button small icon-cog" title="Open Component Settings"
1857
- @click.prevent="openSettingsSidebar('CmdUploadForm')"></a>
1858
- </h2>
1859
- <CmdUploadForm ref="CmdUploadForm" v-bind="cmdUploadFormSettingsData" />
1860
- </CmdWidthLimitationWrapper>
1861
- <!-- end upload-form --------------------------------------------------------------------------------------------------->
1862
-
1863
- <!-- begin upload-form --------------------------------------------------------------------------------------------------->
1864
- <CmdWidthLimitationWrapper>
1865
- <h2 class="headline-demopage" id="section-width-limitation-wrapper">
1866
- <span>Width Limitation Wrapper</span>
1867
- <a href="#" class="button small icon-cog" title="Open Component Settings"
1868
- @click.prevent="openSettingsSidebar('CmdWidthLimitationWrapper')"></a>
1869
- </h2>
1870
- <CmdWidthLimitationWrapper style="border: 1px dashed var(--color-gray-30)"
1871
- ref="CmdWidthLimitationWrapper" v-bind="cmdWidthLimitationWrapperSettingsData">
1872
- <h3>Slot-Content</h3>
1873
- <p>Slot-content</p>
1874
- <p>Slot-content</p>
1875
- <p>Slot-content</p>
1876
+ <CmdTooltip ref="CmdTooltip" :popoverTargetName="'tooltip-target-click'" :showCloseIcon="true"
1877
+ positionAnchor="--tooltip-anchor-for-click" tooltipText="This is text for a tooltip by click!"
1878
+ v-bind="cmdTooltipSettingsData" />
1879
+ </CmdWidthLimitationWrapper>
1880
+ <!-- end tooltip --------------------------------------------------------------------------------------------------->
1881
+
1882
+ <!-- begin upload-form --------------------------------------------------------------------------------------------------->
1883
+ <CmdWidthLimitationWrapper>
1884
+ <h2 class="headline-demopage" id="section-upload-form">
1885
+ <span>Upload-Form</span>
1886
+ <a href="#" class="button small icon-cog" title="Open Component Settings"
1887
+ @click.prevent="openSettingsSidebar('CmdUploadForm')"></a>
1888
+ </h2>
1889
+ <CmdUploadForm ref="CmdUploadForm" v-bind="cmdUploadFormSettingsData" />
1876
1890
  </CmdWidthLimitationWrapper>
1877
- </CmdWidthLimitationWrapper>
1878
- <!-- end upload-form --------------------------------------------------------------------------------------------------->
1879
- </main>
1880
-
1881
- <!-- begin page view -->
1882
- <main v-else id="content">
1883
- <CmdWidthLimitationWrapper>
1884
- <h1 class="headline-demopage">Page Overview</h1>
1885
- </CmdWidthLimitationWrapper>
1886
- <!-- begin page-overview -->
1887
- <PageOverview />
1888
- <!-- end page-overview -->
1889
- </main>
1890
- <!-- end page view -->
1891
-
1892
- <!-- begin cmd-site-footer -->
1893
- <CmdSiteFooter>
1894
- <!-- begin slot-content -->
1895
- Slot-Content for Site-Footer
1896
- <!-- end slot-content -->
1897
- </CmdSiteFooter>
1898
- <!-- end cmd-site-footer -->
1899
-
1900
- <!-- begin copyright-information --------------------------------------------------------------------------------------------------->
1901
- <CmdCopyrightInformation />
1902
- <!-- end copyright-information --------------------------------------------------------------------------------------------------->
1903
-
1904
- <!-- begin fancy-box --------------------------------------------------------------------------------------------------->
1905
- <CmdFancyBox :show="fancyBoxCookieDisclaimer" :fancyBoxOptions="{ 'closeIcon': { show: false } }"
1906
- :allowEscapeKey="false" :cmdHeadline="{ show: true, headlineText: 'Cookie Disclaimer', headlineLevel: 2 }"
1907
- defaultAriaLabelText="Cookie Disclaimer">
1908
- <!-- begin cookie-disclaimer --------------------------------------------------------------------------------------------------->
1909
- <CmdCookieDisclaimer :cookieOptions="cookieDisclaimerData" @closeCookieDisclaimer="closeCookieDisclaimer"
1910
- v-model="acceptedCookies" :cmdHeadlineCookieDisclaimer="{ show: false }"
1911
- privacyText="By browsing this website you accept the usage and saving of anonymous data!">
1912
- </CmdCookieDisclaimer>
1913
- <!-- end cookie-disclaimer --------------------------------------------------------------------------------------------------->
1914
- </CmdFancyBox>
1915
- <!-- end fancy-box --------------------------------------------------------------------------------------------------->
1916
-
1917
- <!-- begin component-settings-sidebar --------------------------------------------------------------------------------------------------->
1918
- <CmdSidebar v-if="showSettingsSidebar" id="component-settings"
1919
- :cmdHeadline="{ headlineText: 'Component Settings', headlineLevel: 3, textAlign: 'center' }"
1920
- :openSidebar="openRightSidebar" @toggle-sidebar="setOpenStatusRightSidebar" :collapseToLeft="false">
1921
- <template #open>
1922
- <ComponentSettings :componentName="componentName" :componentProps="componentProps"
1923
- :componentSettings="componentSettings" :componentControls="componentControls" />
1924
- </template>
1925
- </CmdSidebar>
1926
- <!-- end component-settings-sidebar --------------------------------------------------------------------------------------------------->
1927
- </div><!-- end .site-wrapper -->
1891
+ <!-- end upload-form --------------------------------------------------------------------------------------------------->
1892
+
1893
+ <!-- begin upload-form --------------------------------------------------------------------------------------------------->
1894
+ <CmdWidthLimitationWrapper>
1895
+ <h2 class="headline-demopage" id="section-width-limitation-wrapper">
1896
+ <span>Width Limitation Wrapper</span>
1897
+ <a href="#" class="button small icon-cog" title="Open Component Settings"
1898
+ @click.prevent="openSettingsSidebar('CmdWidthLimitationWrapper')"></a>
1899
+ </h2>
1900
+ <CmdWidthLimitationWrapper style="border: 1px dashed var(--color-gray-30)"
1901
+ ref="CmdWidthLimitationWrapper" v-bind="cmdWidthLimitationWrapperSettingsData">
1902
+ <h3>Slot-Content</h3>
1903
+ <p>Slot-content</p>
1904
+ <p>Slot-content</p>
1905
+ <p>Slot-content</p>
1906
+ </CmdWidthLimitationWrapper>
1907
+ </CmdWidthLimitationWrapper>
1908
+ <!-- end upload-form --------------------------------------------------------------------------------------------------->
1909
+ </main>
1910
+
1911
+ <!-- begin page view -->
1912
+ <main v-else id="content">
1913
+ <CmdWidthLimitationWrapper>
1914
+ <h1 class="headline-demopage">Page Overview</h1>
1915
+ </CmdWidthLimitationWrapper>
1916
+ <!-- begin page-overview -->
1917
+ <PageOverview />
1918
+ <!-- end page-overview -->
1919
+ </main>
1920
+ <!-- end page view -->
1921
+
1922
+ <!-- begin cmd-site-footer -->
1923
+ <CmdSiteFooter>
1924
+ <!-- begin slot-content -->
1925
+ Slot-Content for Site-Footer
1926
+ <!-- end slot-content -->
1927
+ </CmdSiteFooter>
1928
+ <!-- end cmd-site-footer -->
1929
+
1930
+ <!-- begin fancy-box --------------------------------------------------------------------------------------------------->
1931
+ <CmdFancyBox :show="fancyBoxCookieDisclaimer" :fancyBoxOptions="{ 'closeIcon': { show: false } }"
1932
+ :allowEscapeKey="false"
1933
+ :cmdHeadline="{ show: true, headlineText: 'Cookie Disclaimer', headlineLevel: 2 }"
1934
+ defaultAriaLabelText="Cookie Disclaimer">
1935
+ <!-- begin cookie-disclaimer --------------------------------------------------------------------------------------------------->
1936
+ <CmdCookieDisclaimer :cookieOptions="cookieDisclaimerData"
1937
+ @closeCookieDisclaimer="closeCookieDisclaimer" v-model="acceptedCookies"
1938
+ :cmdHeadlineCookieDisclaimer="{ show: false }"
1939
+ privacyText="By browsing this website you accept the usage and saving of anonymous data!">
1940
+ </CmdCookieDisclaimer>
1941
+ <!-- end cookie-disclaimer --------------------------------------------------------------------------------------------------->
1942
+ </CmdFancyBox>
1943
+ <!-- end fancy-box --------------------------------------------------------------------------------------------------->
1944
+
1945
+ <!-- begin component-settings-sidebar --------------------------------------------------------------------------------------------------->
1946
+ <CmdSidebar v-if="showSettingsSidebar" id="component-settings"
1947
+ :cmdHeadline="{ headlineText: 'Component Settings', headlineLevel: 3, textAlign: 'center' }"
1948
+ :openSidebar="openRightSidebar" @toggle-sidebar="setOpenStatusRightSidebar" :collapseToLeft="false">
1949
+ <template #open>
1950
+ <ComponentSettings :componentName="componentName" :componentProps="componentProps"
1951
+ :componentSettings="componentSettings" :componentControls="componentControls" />
1952
+ </template>
1953
+ </CmdSidebar>
1954
+ <!-- end component-settings-sidebar --------------------------------------------------------------------------------------------------->
1955
+ </template>
1956
+ <template v-slot:below-site-footer>
1957
+ <!-- begin copyright-information --------------------------------------------------------------------------------------------------->
1958
+ <CmdCopyrightInformation />
1959
+ <!-- end copyright-information --------------------------------------------------------------------------------------------------->
1960
+ </template>
1961
+ </CmdSiteWrapper>
1928
1962
  </template>
1929
1963
 
1930
1964
  <script>
@@ -2524,13 +2558,15 @@ export default {
2524
2558
  }
2525
2559
  }
2526
2560
 
2527
- main .cmd-width-limitation-wrapper:not(:last-child) {
2561
+ main {
2562
+ .cmd-width-limitation-wrapper:not(:last-child) {
2528
2563
  border-bottom: var(--default-border);
2529
2564
  border-style: dashed;
2530
2565
 
2531
- section {
2532
- padding-top: calc(var(--default-padding) * 6);
2533
- padding-bottom: calc(var(--default-padding) * 6);
2566
+ section {
2567
+ padding-top: calc(var(--default-padding) * 6);
2568
+ padding-bottom: calc(var(--default-padding) * 6);
2569
+ }
2534
2570
  }
2535
2571
  }
2536
2572
 
@@ -2547,6 +2583,7 @@ export default {
2547
2583
  background: none;
2548
2584
  border-color: var(--color-white);
2549
2585
  align-self: center;
2586
+ aspect-ratio: 1/1;
2550
2587
 
2551
2588
  &:hover,
2552
2589
  &:active,
@@ -2600,6 +2637,7 @@ export default {
2600
2637
  height: 100%;
2601
2638
 
2602
2639
  .comand-versions {
2640
+ font-size: 1.2rem;
2603
2641
  margin: 0;
2604
2642
  background: var(--color-scheme-background);
2605
2643
 
@@ -2625,12 +2663,16 @@ export default {
2625
2663
  left: auto;
2626
2664
  right: 0;
2627
2665
  }
2628
- }
2629
2666
 
2630
- #component-settings {
2631
- .open-slot-wrapper {
2632
- display: block;
2667
+ &#component-settings {
2668
+ left: auto;
2669
+ right: 0;
2670
+
2671
+ .open-slot-wrapper {
2672
+ display: block;
2673
+ }
2633
2674
  }
2675
+
2634
2676
  }
2635
2677
 
2636
2678
  output {