comand-component-library 3.3.81 → 3.3.83

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