comand-component-library 4.0.70 → 4.0.72

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