comand-component-library 3.3.81 → 3.3.83

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