comand-component-library 4.0.70 → 4.0.72

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