comand-component-library 3.3.86 → 4.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/comand-component-library.js +856 -835
- package/dist/comand-component-library.umd.cjs +4 -4
- package/dist/media/images/slideshow-images/large/slide1.jpg +0 -0
- package/dist/media/images/slideshow-images/large/slide2.jpg +0 -0
- package/dist/media/images/slideshow-images/large/slide3.jpg +0 -0
- package/dist/media/images/slideshow-images/large/slide4.jpg +0 -0
- package/dist/media/images/slideshow-images/medium/slide1.jpg +0 -0
- package/dist/media/images/slideshow-images/medium/slide2.jpg +0 -0
- package/dist/media/images/slideshow-images/medium/slide3.jpg +0 -0
- package/dist/media/images/slideshow-images/medium/slide4.jpg +0 -0
- package/dist/media/images/slideshow-images/small/slide1.jpg +0 -0
- package/dist/media/images/slideshow-images/small/slide2.jpg +0 -0
- package/dist/media/images/slideshow-images/small/slide3.jpg +0 -0
- package/dist/media/images/slideshow-images/small/slide4.jpg +0 -0
- package/dist/style.css +1 -1
- package/package.json +2 -2
- package/src/App.vue +680 -632
- package/src/assets/data/address-data.json +3 -3
- package/src/components/CmdAddressData.vue +90 -96
- package/src/components/CmdAddressDataItem.vue +60 -52
- package/src/components/CmdBankAccountData.vue +1 -1
- package/src/components/CmdBox.vue +10 -10
- package/src/components/CmdBoxWrapper.vue +8 -4
- package/src/components/CmdBreadcrumbs.vue +1 -1
- package/src/components/CmdCompanyLogo.vue +14 -11
- package/src/components/CmdContainer.vue +24 -0
- package/src/components/CmdCookieDisclaimer.vue +1 -1
- package/src/components/CmdCopyrightInformation.vue +1 -1
- package/src/components/CmdFancyBox.vue +9 -6
- package/src/components/CmdForm.vue +7 -1
- package/src/components/CmdFormElement.vue +21 -75
- package/src/components/CmdFormFilters.vue +2 -1
- package/src/components/CmdGoogleMaps.vue +1 -1
- package/src/components/CmdHeadline.vue +20 -25
- package/src/components/CmdIcon.vue +1 -1
- package/src/components/CmdImage.vue +1 -1
- package/src/components/CmdImageGallery.vue +1 -1
- package/src/components/CmdImageZoom.vue +1 -1
- package/src/components/CmdInputGroup.vue +2 -2
- package/src/components/CmdListOfLinks.vue +1 -1
- package/src/components/CmdListOfLinksItem.vue +0 -4
- package/src/components/CmdListOfRequirements.vue +10 -2
- package/src/components/CmdLoginForm.vue +1 -1
- package/src/components/CmdMainNavigation.vue +18 -17
- package/src/components/CmdMultistepFormProgressBar.vue +7 -3
- package/src/components/CmdNewsletterSubscription.vue +1 -8
- package/src/components/CmdOpeningHours.vue +1 -1
- package/src/components/CmdOpeningHoursItem.vue +1 -1
- package/src/components/CmdPagination.vue +21 -15
- package/src/components/CmdProgressBar.vue +1 -1
- package/src/components/CmdSidebar.vue +7 -1
- package/src/components/CmdSiteFooter.vue +14 -14
- package/src/components/CmdSiteHeader.vue +12 -29
- package/src/components/CmdSlideButton.vue +9 -7
- package/src/components/CmdSlideshow.vue +14 -12
- package/src/components/CmdSocialNetworks.vue +11 -4
- package/src/components/CmdSocialNetworksItem.vue +2 -7
- package/src/components/CmdSwitchLanguage.vue +1 -1
- package/src/components/CmdSystemMessage.vue +10 -6
- package/src/components/CmdTable.vue +72 -17
- package/src/components/CmdTabs.vue +2 -2
- package/src/components/CmdTextImageBlock.vue +1 -1
- package/src/components/CmdThumbnailScroller.vue +157 -152
- package/src/components/CmdToggleDarkMode.vue +1 -1
- package/src/components/CmdTooltip.vue +1 -1
- package/src/components/CmdUploadForm.vue +2 -2
- package/src/components/CmdWidthLimitationWrapper.vue +7 -3
- package/src/index.js +1 -0
- package/src/mixins/FieldValidation.js +0 -17
package/src/App.vue
CHANGED
|
@@ -18,79 +18,80 @@
|
|
|
18
18
|
:useGap="false"
|
|
19
19
|
>
|
|
20
20
|
<template v-slot="slotProps">
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
<
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
21
|
+
<CmdBox
|
|
22
|
+
:use-slots="['body']"
|
|
23
|
+
:collapsible="true"
|
|
24
|
+
:cmdHeadline="{headlineText: 'Template Settings', headlineLevel: 4, headlineIcon: {iconClass: 'icon-settings-template'}}"
|
|
25
|
+
:openCollapsedBox="slotProps.boxIsOpen(0)"
|
|
26
|
+
@toggleCollapse="slotProps.boxToggled(0, $event)"
|
|
27
|
+
>
|
|
28
|
+
<template v-slot:body>
|
|
29
|
+
<label for="select-template">
|
|
30
|
+
<span>Select template</span>
|
|
31
|
+
<select id="select-template" v-model="selectedTemplate">
|
|
32
|
+
<option value="blank">Blank</option>
|
|
33
|
+
<option value="business">Business</option>
|
|
34
|
+
<option value="casual">Casual</option>
|
|
35
|
+
<option value="dating">Dating</option>
|
|
36
|
+
<option value="influencer">Influencer</option>
|
|
37
|
+
</select>
|
|
38
|
+
</label>
|
|
39
|
+
</template>
|
|
40
|
+
</CmdBox>
|
|
41
|
+
<CmdBox
|
|
42
|
+
:use-slots="['body']"
|
|
43
|
+
:collapsible="true"
|
|
44
|
+
:cmdHeadline="{headlineText: 'Components', headlineLevel: 4, headlineIcon: {iconClass: 'icon-settings-component'}}"
|
|
45
|
+
:openCollapsedBox="slotProps.boxIsOpen(1)"
|
|
46
|
+
@toggleCollapse="slotProps.boxToggled(1, $event)"
|
|
47
|
+
>
|
|
48
|
+
<template v-slot:body>
|
|
49
|
+
<ul>
|
|
50
|
+
<li><a href="#section-address-data">Address Data</a></li>
|
|
51
|
+
<li><a href="#section-advanced-form-elements">Advanced Form Elements</a></li>
|
|
52
|
+
<li><a href="#section-bank-account-data">Bank Account Data</a></li>
|
|
53
|
+
<li><a href="#section-boxes">Boxes</a></li>
|
|
54
|
+
<li><a href="#section-breadcrumbs">Breadcrumbs</a></li>
|
|
55
|
+
<li><a href="#section-cookie-disclaimer">Cookie-Disclaimer</a></li>
|
|
56
|
+
<li><a href="#section-headlines">Headlines</a></li>
|
|
57
|
+
<li><a href="#section-fancybox">Fancybox</a></li>
|
|
58
|
+
</ul>
|
|
59
|
+
<ul>
|
|
60
|
+
<li><a href="#section-forms">Forms</a></li>
|
|
61
|
+
<li><a href="#section-google-maps">Google-Maps™</a></li>
|
|
62
|
+
<li><a href="#section-headlines">Headlines</a></li>
|
|
63
|
+
<li><a href="#section-icons">Icons</a></li>
|
|
64
|
+
<li><a href="#section-image">Image</a></li>
|
|
65
|
+
<li><a href="#section-image-gallery">Image Gallery</a></li>
|
|
66
|
+
<li><a href="#section-image-zoom">Image-Zoom</a></li>
|
|
67
|
+
<li><a href="#section-list-of-links">List Of Links</a></li>
|
|
68
|
+
</ul>
|
|
69
|
+
<ul>
|
|
70
|
+
<li><a href="#section-login-form">Login Form</a></li>
|
|
71
|
+
<li><a href="#section-main-navigation">Main-Navigation</a></li>
|
|
72
|
+
<li><a href="#section-multistep-form-progress-bar">Multistepform-Progressbar</a>
|
|
73
|
+
</li>
|
|
74
|
+
<li><a href="#section-opening-hours">Opening Hours</a></li>
|
|
75
|
+
<li><a href="#section-pagination">Pagination</a></li>
|
|
76
|
+
<li><a href="#section-site-footer">Site Footer</a></li>
|
|
77
|
+
<li><a href="#section-site-header">Site Header</a></li>
|
|
78
|
+
<li><a href="#section-site-search">Site Search</a></li>
|
|
79
|
+
<li><a href="#section-slideshow">Slideshow</a></li>
|
|
80
|
+
</ul>
|
|
81
|
+
<ul>
|
|
82
|
+
<li><a href="#section-social-networks">Social Networks</a></li>
|
|
83
|
+
<li><a href="#section-switch-language">Switch Language</a></li>
|
|
84
|
+
<li><a href="#section-system-message">System-Message</a></li>
|
|
85
|
+
<li><a href="#section-tables">Tables</a></li>
|
|
86
|
+
<li><a href="#section-tabs">Tabs</a></li>
|
|
87
|
+
<li><a href="#section-text-image-block">Text Image Block</a></li>
|
|
88
|
+
<li><a href="#section-thumbnail-scroller">Thumbnail-Scroller</a></li>
|
|
89
|
+
<li><a href="#section-toggle-darkmode">ToggleDarkMode</a></li>
|
|
90
|
+
<li><a href="#section-tooltip">Tooltip</a></li>
|
|
91
|
+
<li><a href="#section-upload-form">Upload-Form</a></li>
|
|
92
|
+
</ul>
|
|
93
|
+
</template>
|
|
94
|
+
</CmdBox>
|
|
94
95
|
</template>
|
|
95
96
|
</CmdBoxWrapper>
|
|
96
97
|
<dl class="comand-versions">
|
|
@@ -135,27 +136,28 @@
|
|
|
135
136
|
</template>
|
|
136
137
|
</CmdSiteHeader>
|
|
137
138
|
<!-- end site-header --------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
138
|
-
<main>
|
|
139
|
+
<main id="content">
|
|
139
140
|
<!-- begin address-data ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
140
|
-
<a id="section-address-data"></a>
|
|
141
141
|
<CmdWidthLimitationWrapper>
|
|
142
|
-
<h2 class="headline-demopage">Address Data</h2>
|
|
142
|
+
<h2 class="headline-demopage" id="section-address-data">Address Data</h2>
|
|
143
143
|
<div class="flex-container">
|
|
144
144
|
<CmdAddressData
|
|
145
145
|
:addressData="addressData"
|
|
146
146
|
:linkGoogleMaps="false"
|
|
147
|
+
:showLabelTexts="true"
|
|
147
148
|
:cmdHeadline="{headlineText: 'With label texts and icons', headlineLevel: 3}"
|
|
148
149
|
/>
|
|
149
150
|
<CmdAddressData
|
|
150
151
|
:addressData="addressData"
|
|
151
152
|
:linkGoogleMaps="false"
|
|
152
|
-
:
|
|
153
|
+
:showLabelTexts="false"
|
|
153
154
|
:cmdHeadline="{headlineText: 'With label icons only', headlineLevel: 3}"
|
|
154
155
|
/>
|
|
155
156
|
<CmdAddressData
|
|
156
157
|
:addressData="addressData"
|
|
157
158
|
:linkGoogleMaps="false"
|
|
158
|
-
:
|
|
159
|
+
:showLabelIcons="false"
|
|
160
|
+
:showLabelTexts="true"
|
|
159
161
|
:cmdHeadline="{headlineText: 'With label texts', headlineLevel: 3}"
|
|
160
162
|
/>
|
|
161
163
|
<CmdAddressData
|
|
@@ -175,29 +177,48 @@
|
|
|
175
177
|
<!-- end address-data ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
176
178
|
|
|
177
179
|
<!-- begin advanced form elements --------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
178
|
-
<a id="section-advanced-form-elements"></a>
|
|
179
180
|
<CmdWidthLimitationWrapper>
|
|
180
|
-
<
|
|
181
|
-
<h2 class="headline-demopage">Advanced Form Elements</h2>
|
|
181
|
+
<h2 class="headline-demopage" id="section-advanced-form-elements">Advanced Form Elements</h2>
|
|
182
182
|
<h3>Form elements status:</h3>
|
|
183
183
|
<div class="flex-container">
|
|
184
184
|
<ul class="list-status">
|
|
185
|
-
<li
|
|
185
|
+
<li>
|
|
186
|
+
<a href="#" @click.prevent="setStatus('', false)"
|
|
186
187
|
:class="{'active' : validationStatus === '' && disabledStatus === false}"
|
|
187
|
-
id="status-default">
|
|
188
|
+
id="status-default">
|
|
189
|
+
Default
|
|
190
|
+
</a>
|
|
191
|
+
</li>
|
|
188
192
|
<li class="error">
|
|
189
193
|
<a href="#" @click.prevent="setStatus('error', false)"
|
|
190
|
-
:class="{'active' : validationStatus === 'error'}" id="status-error">
|
|
191
|
-
|
|
192
|
-
|
|
194
|
+
:class="{'active' : validationStatus === 'error'}" id="status-error">
|
|
195
|
+
Error
|
|
196
|
+
</a>
|
|
197
|
+
</li>
|
|
198
|
+
<li>
|
|
199
|
+
<a href="#" @click.prevent="setStatus('warning', false)"
|
|
200
|
+
:class="{'active' : validationStatus === 'warning'}" id="status-warning">
|
|
201
|
+
Warning
|
|
202
|
+
</a>
|
|
203
|
+
</li>
|
|
204
|
+
<li>
|
|
205
|
+
<a href="#" @click.prevent="setStatus('success', false)"
|
|
206
|
+
:class="{'active' : validationStatus === 'success'}" id="status-success">
|
|
207
|
+
Success
|
|
208
|
+
</a>
|
|
193
209
|
</li>
|
|
194
|
-
<li
|
|
195
|
-
|
|
210
|
+
<li>
|
|
211
|
+
<a href="#" @click.prevent="setStatus('info', false)"
|
|
212
|
+
:class="{'active' : validationStatus === 'info'}" id="status-info">
|
|
213
|
+
Info
|
|
214
|
+
</a>
|
|
215
|
+
</li>
|
|
216
|
+
<li>
|
|
217
|
+
<a href="#" @click.prevent="setStatus('', true)"
|
|
218
|
+
:class="{'active' : disabledStatus === true}" id="status-disabled">
|
|
219
|
+
Disabled
|
|
220
|
+
</a>
|
|
196
221
|
</li>
|
|
197
|
-
<li><a href="#" @click.prevent="setStatus('info', false)"
|
|
198
|
-
:class="{'active' : validationStatus === 'info'}" id="status-info">Info</a></li>
|
|
199
|
-
<li><a href="#" @click.prevent="setStatus('', true)"
|
|
200
|
-
:class="{'active' : disabledStatus === true}" id="status-disabled">Disabled</a></li>
|
|
201
222
|
</ul>
|
|
202
223
|
</div>
|
|
203
224
|
|
|
@@ -210,249 +231,284 @@
|
|
|
210
231
|
<legend>Legend</legend>
|
|
211
232
|
<h2>Form Element-Component</h2>
|
|
212
233
|
<div class="flex-container">
|
|
213
|
-
<CmdFormElement
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
234
|
+
<CmdFormElement
|
|
235
|
+
labelText="Input (type text):"
|
|
236
|
+
element="input"
|
|
237
|
+
type="text"
|
|
238
|
+
:status="validationStatus"
|
|
239
|
+
:disabled="disabledStatus"
|
|
240
|
+
placeholder="Type in text"
|
|
241
|
+
tooltipText="This is a tooltip"
|
|
242
|
+
v-bind="{useCustomTooltip: false}"
|
|
221
243
|
/>
|
|
222
|
-
<CmdFormElement
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
244
|
+
<CmdFormElement
|
|
245
|
+
labelText="Input for selectbox:"
|
|
246
|
+
element="select"
|
|
247
|
+
required="required"
|
|
248
|
+
:status="validationStatus"
|
|
249
|
+
:disabled="disabledStatus"
|
|
250
|
+
v-model="selectedOption"
|
|
251
|
+
:selectOptions="selectOptionsData"
|
|
229
252
|
/>
|
|
230
|
-
<CmdFormElement
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
253
|
+
<CmdFormElement
|
|
254
|
+
labelText="Input for datalist:"
|
|
255
|
+
element="input"
|
|
256
|
+
type="text"
|
|
257
|
+
:status="validationStatus"
|
|
258
|
+
:disabled="disabledStatus"
|
|
259
|
+
placeholder="Type in option"
|
|
260
|
+
:datalist="datalist"
|
|
261
|
+
tooltipText="This is a tooltip"
|
|
238
262
|
/>
|
|
239
263
|
</div>
|
|
240
|
-
<CmdFormElement
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
264
|
+
<CmdFormElement
|
|
265
|
+
labelText="Input (type search (without search-button)):"
|
|
266
|
+
element="input"
|
|
267
|
+
type="search"
|
|
268
|
+
:status="validationStatus"
|
|
269
|
+
:disabled="disabledStatus"
|
|
270
|
+
:showSearchButton="false"
|
|
271
|
+
placeholder="Search"
|
|
272
|
+
tooltipText="This is a tooltip"
|
|
273
|
+
v-bind="{useCustomTooltip: false}"
|
|
249
274
|
/>
|
|
250
|
-
<CmdFormElement
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
275
|
+
<CmdFormElement
|
|
276
|
+
labelText="Input (type search (with search-button)):"
|
|
277
|
+
element="input"
|
|
278
|
+
type="search"
|
|
279
|
+
:status="validationStatus"
|
|
280
|
+
:disabled="disabledStatus"
|
|
281
|
+
placeholder="Search"
|
|
282
|
+
tooltipText="This is a tooltip"
|
|
283
|
+
v-bind="{useCustomTooltip: false}"
|
|
258
284
|
/>
|
|
259
285
|
<h2>Inputfields in Columns</h2>
|
|
260
286
|
<div class="flex-container">
|
|
261
|
-
<CmdFormElement
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
287
|
+
<CmdFormElement
|
|
288
|
+
element="input"
|
|
289
|
+
type="text"
|
|
290
|
+
minlength="5"
|
|
291
|
+
id="inputfield1"
|
|
292
|
+
placeholder="This is placeholder text"
|
|
293
|
+
v-model="inputField1"
|
|
294
|
+
tooltipText="This is a tooltip!"
|
|
295
|
+
:status="validationStatus"
|
|
296
|
+
:disabled="disabledStatus">
|
|
270
297
|
<template v-slot:labeltext>
|
|
271
298
|
<span v-html="'Label with <a href=\'#\'>Link</a> given by slot'"></span>
|
|
272
299
|
</template>
|
|
273
300
|
</CmdFormElement>
|
|
274
|
-
<CmdFormElement
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
301
|
+
<CmdFormElement
|
|
302
|
+
element="input"
|
|
303
|
+
labelText="Label for inputfield (required, with tooltip):"
|
|
304
|
+
type="text"
|
|
305
|
+
required="required"
|
|
306
|
+
minlength="5"
|
|
307
|
+
id="inputfield-required"
|
|
308
|
+
placeholder="This is placeholder text"
|
|
309
|
+
v-model="inputFieldRequired"
|
|
310
|
+
tooltipText="This is a tooltip!"
|
|
311
|
+
:status="validationStatus"
|
|
312
|
+
:disabled="disabledStatus"
|
|
285
313
|
/>
|
|
286
|
-
<CmdFormElement
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
314
|
+
<CmdFormElement
|
|
315
|
+
element="input"
|
|
316
|
+
labelText="Label for inputfield (with pattern):"
|
|
317
|
+
type="text"
|
|
318
|
+
id="inputfield-pattern"
|
|
319
|
+
placeholder="This is placeholder text"
|
|
320
|
+
pattern="/\d/"
|
|
321
|
+
v-model="inputFieldPattern"
|
|
322
|
+
tooltipText="This is a tooltip!"
|
|
323
|
+
:status="validationStatus"
|
|
324
|
+
:disabled="disabledStatus"
|
|
296
325
|
/>
|
|
297
326
|
</div>
|
|
298
327
|
<!-- begin inputfield in two columns -->
|
|
299
328
|
<div class="flex-container">
|
|
300
|
-
<CmdFormElement
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
329
|
+
<CmdFormElement
|
|
330
|
+
labelText="Label for emailfield (with icon):"
|
|
331
|
+
element="input"
|
|
332
|
+
type="email"
|
|
333
|
+
id="inputfield-email"
|
|
334
|
+
fieldIconClass="icon-mail"
|
|
335
|
+
placeholder="Type in email-address"
|
|
336
|
+
tooltipText="This is a tooltip!"
|
|
337
|
+
maxlength="100"
|
|
338
|
+
v-model="inputMail"
|
|
339
|
+
:status="validationStatus"
|
|
340
|
+
:disabled="disabledStatus"
|
|
341
|
+
:required="true"
|
|
311
342
|
/>
|
|
312
|
-
<CmdFormElement
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
343
|
+
<CmdFormElement
|
|
344
|
+
labelText="Label for inputfield (with icon):"
|
|
345
|
+
element="input"
|
|
346
|
+
type="text"
|
|
347
|
+
id="inputfield-username"
|
|
348
|
+
fieldIconClass="icon-user-profile"
|
|
349
|
+
placeholder="Type in username"
|
|
350
|
+
tooltipText="This is a tooltip!"
|
|
351
|
+
maxlength="100"
|
|
352
|
+
v-model="inputUsername"
|
|
353
|
+
:status="validationStatus"
|
|
354
|
+
:disabled="disabledStatus"
|
|
355
|
+
/>
|
|
356
|
+
<CmdFormElement
|
|
357
|
+
element="input"
|
|
358
|
+
labelText="Label for password-field:"
|
|
359
|
+
type="password"
|
|
360
|
+
minlength="8"
|
|
361
|
+
maxlength="255"
|
|
362
|
+
id="inputfield-password"
|
|
363
|
+
fieldIconClass="icon-security-settings"
|
|
364
|
+
placeholder="Type in password"
|
|
365
|
+
tooltipText="This is a tooltip!"
|
|
366
|
+
:customRequirements="customRequirements"
|
|
367
|
+
v-model="inputPassword"
|
|
368
|
+
:status="validationStatus"
|
|
369
|
+
:disabled="disabledStatus"
|
|
325
370
|
/>
|
|
326
371
|
</div>
|
|
327
372
|
<!-- end inputfield in two columns -->
|
|
328
373
|
|
|
329
|
-
<CmdFormElement
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
374
|
+
<CmdFormElement
|
|
375
|
+
element="input"
|
|
376
|
+
labelText="Label (inline) for inputfield (number):"
|
|
377
|
+
:displayLabelInline="true"
|
|
378
|
+
type="number"
|
|
379
|
+
id="inputfield-number"
|
|
380
|
+
required="required"
|
|
381
|
+
min="0"
|
|
382
|
+
max="9"
|
|
383
|
+
v-model="inputNumber"
|
|
384
|
+
:customRequirements="[customRequirements[2]]"
|
|
385
|
+
:status="validationStatus"
|
|
386
|
+
:disabled="disabledStatus"
|
|
341
387
|
/>
|
|
342
|
-
<CmdFormElement
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
388
|
+
<CmdFormElement
|
|
389
|
+
element="input"
|
|
390
|
+
labelText="Label (inline) for inputfield (date):"
|
|
391
|
+
:displayLabelInline="true"
|
|
392
|
+
type="date"
|
|
393
|
+
id="inputfield-date"
|
|
394
|
+
v-model="inputDate"
|
|
395
|
+
:status="validationStatus"
|
|
396
|
+
:disabled="disabledStatus"
|
|
350
397
|
/>
|
|
351
|
-
<CmdFormElement
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
398
|
+
<CmdFormElement
|
|
399
|
+
element="input"
|
|
400
|
+
labelText="Label (inline) for inputfield (search) without search-button:"
|
|
401
|
+
:displayLabelInline="true"
|
|
402
|
+
type="search"
|
|
403
|
+
id="inputfield-search-without-searchbutton"
|
|
404
|
+
placeholder="Keyword(s)"
|
|
405
|
+
v-model="inputSearch"
|
|
406
|
+
:showSearchButton="false"
|
|
407
|
+
:status="validationStatus"
|
|
408
|
+
:disabled="disabledStatus"
|
|
361
409
|
/>
|
|
362
|
-
<CmdFormElement
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
410
|
+
<CmdFormElement
|
|
411
|
+
element="input"
|
|
412
|
+
labelText="Label (inline) for inputfield (search):"
|
|
413
|
+
:displayLabelInline="true"
|
|
414
|
+
type="search"
|
|
415
|
+
id="inputfield-search-with-searchbutton"
|
|
416
|
+
placeholder="Keyword(s)"
|
|
417
|
+
v-model="inputSearch"
|
|
418
|
+
:status="validationStatus"
|
|
419
|
+
:disabled="disabledStatus"
|
|
371
420
|
/>
|
|
372
|
-
<CmdFormElement
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
421
|
+
<CmdFormElement
|
|
422
|
+
element="textarea"
|
|
423
|
+
labelText="Label for textarea:"
|
|
424
|
+
id="textarea"
|
|
425
|
+
minlength="1"
|
|
426
|
+
maxlength="100"
|
|
427
|
+
placeholder="Type in your message"
|
|
428
|
+
:required="true"
|
|
429
|
+
v-model="textarea"
|
|
430
|
+
:status="validationStatus"
|
|
431
|
+
:disabled="disabledStatus"
|
|
381
432
|
/>
|
|
382
433
|
<hr/>
|
|
383
434
|
<h2>Fake Selects</h2>
|
|
384
435
|
<div class="flex-container">
|
|
385
436
|
<!-- type === default: normal selectbox (with optional icons) -->
|
|
386
|
-
<CmdFakeSelect
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
437
|
+
<CmdFakeSelect
|
|
438
|
+
labelText="Default selectbox:"
|
|
439
|
+
:status="validationStatus"
|
|
440
|
+
:disabled="disabledStatus"
|
|
441
|
+
:selectData="fakeSelectOptionsData"
|
|
442
|
+
v-model="fakeSelectDefault"
|
|
443
|
+
:required="true"
|
|
444
|
+
defaultOptionName="Select an option:"
|
|
445
|
+
title="Title for FakeSelect"
|
|
394
446
|
/>
|
|
395
|
-
<CmdFakeSelect
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
447
|
+
<CmdFakeSelect
|
|
448
|
+
labelText="Default selectbox with icons:"
|
|
449
|
+
:status="validationStatus"
|
|
450
|
+
:disabled="disabledStatus"
|
|
451
|
+
:selectData="fakeSelectOptionsWithIconsData"
|
|
452
|
+
v-model="fakeSelectDefaultWithIcons"
|
|
453
|
+
defaultOptionName="Select an option:"
|
|
401
454
|
/>
|
|
402
455
|
<!-- type === checkboxOptions: selectbox with checkboxes for each option -->
|
|
403
|
-
<CmdFakeSelect
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
456
|
+
<CmdFakeSelect
|
|
457
|
+
labelText="Selectbox with checkboxes:"
|
|
458
|
+
:status="validationStatus"
|
|
459
|
+
:disabled="disabledStatus"
|
|
460
|
+
:selectData="fakeSelectOptionsData"
|
|
461
|
+
v-model="fakeSelectCheckbox"
|
|
462
|
+
defaultOptionName="Options:"
|
|
463
|
+
:required="true"
|
|
464
|
+
id="selectbox-with-checkboxes"
|
|
465
|
+
type="checkboxOptions"
|
|
466
|
+
:useCustomTooltip="true"
|
|
413
467
|
/>
|
|
414
|
-
<CmdFakeSelect
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
468
|
+
<CmdFakeSelect
|
|
469
|
+
labelText="Selectbox with filters:"
|
|
470
|
+
:status="validationStatus"
|
|
471
|
+
:disabled="disabledStatus"
|
|
472
|
+
:selectData="fakeSelectFilterOptionsData"
|
|
473
|
+
v-model="fakeSelectFilters"
|
|
474
|
+
defaultOptionName="Filters:"
|
|
475
|
+
id="selectbox-with-filters"
|
|
476
|
+
type="checkboxOptions"
|
|
477
|
+
:useCustomTooltip="true"
|
|
423
478
|
/>
|
|
424
|
-
<CmdFakeSelect
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
479
|
+
<CmdFakeSelect
|
|
480
|
+
labelText="Selectbox with slot-content:"
|
|
481
|
+
:status="validationStatus"
|
|
482
|
+
:disabled="disabledStatus"
|
|
483
|
+
type="content"
|
|
484
|
+
defaultOptionName="HTML-Content:">
|
|
429
485
|
<ul class="custom-fake-select-content">
|
|
430
486
|
<li>
|
|
431
487
|
<div>
|
|
432
488
|
<h3>Headline</h3>
|
|
433
489
|
<p>Some content inside a paragraph</p>
|
|
434
490
|
</div>
|
|
435
|
-
<img
|
|
436
|
-
src="media/images/thumbnail-scroller/thumbnail/logo-cmd-blue-landscape.jpg"
|
|
437
|
-
alt="image"/>
|
|
491
|
+
<img src="media/images/thumbnail-scroller/thumbnail/logo-cmd-blue-landscape.jpg" alt="image"/>
|
|
438
492
|
</li>
|
|
439
493
|
</ul>
|
|
440
494
|
</CmdFakeSelect>
|
|
441
|
-
<CmdFakeSelect
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
495
|
+
<CmdFakeSelect
|
|
496
|
+
labelText="Selectbox with country flags:"
|
|
497
|
+
:status="validationStatus"
|
|
498
|
+
:disabled="disabledStatus"
|
|
499
|
+
:selectData="fakeSelectCountriesData"
|
|
500
|
+
v-model="selectedCountry"
|
|
501
|
+
defaultOptionName="Select country:"
|
|
502
|
+
type="country"
|
|
448
503
|
/>
|
|
449
|
-
<CmdFakeSelect
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
504
|
+
<CmdFakeSelect
|
|
505
|
+
labelText="Selectbox with colors:"
|
|
506
|
+
:status="validationStatus"
|
|
507
|
+
:disabled="disabledStatus"
|
|
508
|
+
:selectData="fakeSelectColorsData"
|
|
509
|
+
v-model="selectedColor"
|
|
510
|
+
required="required"
|
|
511
|
+
type="color"
|
|
456
512
|
/>
|
|
457
513
|
</div>
|
|
458
514
|
|
|
@@ -472,35 +528,35 @@
|
|
|
472
528
|
<div class="label" :class="validationStatus">
|
|
473
529
|
<span class="label-text">Single-Slider (with in- and output):</span>
|
|
474
530
|
<span class="flex-container no-flex">
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
|
|
490
|
-
|
|
491
|
-
|
|
531
|
+
<label class="inline" for="range-value">
|
|
532
|
+
<span class="label-text">
|
|
533
|
+
<span>Range Value:</span>
|
|
534
|
+
</span>
|
|
535
|
+
<input
|
|
536
|
+
type="number"
|
|
537
|
+
:class="validationStatus"
|
|
538
|
+
v-model="rangeValue"
|
|
539
|
+
:disabled="disabledStatus"
|
|
540
|
+
min="0"
|
|
541
|
+
max="100"
|
|
542
|
+
id="range-value"
|
|
543
|
+
/>
|
|
544
|
+
</label>
|
|
545
|
+
<label for="range-slider">
|
|
546
|
+
<span class="label-text hidden">
|
|
547
|
+
<span>Range Value</span>
|
|
548
|
+
</span>
|
|
549
|
+
<input
|
|
550
|
+
type="range"
|
|
551
|
+
class="range-slider"
|
|
552
|
+
id="range-slider"
|
|
553
|
+
v-model="rangeValue"
|
|
554
|
+
:disabled="disabledStatus"
|
|
555
|
+
min="0"
|
|
556
|
+
max="100"
|
|
557
|
+
/>
|
|
558
|
+
</label>
|
|
492
559
|
</span>
|
|
493
|
-
<input
|
|
494
|
-
type="range"
|
|
495
|
-
class="range-slider"
|
|
496
|
-
id="range-slider"
|
|
497
|
-
v-model="rangeValue"
|
|
498
|
-
:disabled="disabledStatus"
|
|
499
|
-
min="0"
|
|
500
|
-
max="100"
|
|
501
|
-
/>
|
|
502
|
-
</label>
|
|
503
|
-
</span>
|
|
504
560
|
</div>
|
|
505
561
|
<!-- end slider -->
|
|
506
562
|
|
|
@@ -531,70 +587,75 @@
|
|
|
531
587
|
:disabled="disabledStatus"
|
|
532
588
|
/>
|
|
533
589
|
<h3>Switches with switch-labels</h3>
|
|
534
|
-
<CmdFormElement
|
|
535
|
-
|
|
536
|
-
|
|
537
|
-
|
|
538
|
-
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
|
|
543
|
-
|
|
544
|
-
|
|
590
|
+
<CmdFormElement
|
|
591
|
+
element="input"
|
|
592
|
+
type="checkbox"
|
|
593
|
+
id="toggle-switch-checkbox-switch-label"
|
|
594
|
+
v-model="switchButtonCheckbox"
|
|
595
|
+
labelText="Labeltext for Toggle-Switch with Switch-Label"
|
|
596
|
+
inputValue="checkbox1"
|
|
597
|
+
onLabel="Label on"
|
|
598
|
+
offLabel="Label off"
|
|
599
|
+
:toggleSwitch="true"
|
|
600
|
+
:status="validationStatus"
|
|
601
|
+
:disabled="disabledStatus"
|
|
545
602
|
/>
|
|
546
|
-
<CmdFormElement
|
|
547
|
-
|
|
548
|
-
|
|
549
|
-
|
|
550
|
-
|
|
551
|
-
|
|
552
|
-
|
|
553
|
-
|
|
554
|
-
|
|
555
|
-
|
|
556
|
-
|
|
557
|
-
|
|
603
|
+
<CmdFormElement
|
|
604
|
+
element="input"
|
|
605
|
+
type="checkbox"
|
|
606
|
+
id="toggle-switch-checkbox-switch-label-colored"
|
|
607
|
+
v-model="switchButtonCheckbox"
|
|
608
|
+
inputValue="checkbox2"
|
|
609
|
+
labelText="Labeltext for Toggle-Switch (Checkbox, colored)"
|
|
610
|
+
onLabel="Label on"
|
|
611
|
+
offLabel="Label off"
|
|
612
|
+
:colored="true"
|
|
613
|
+
:toggleSwitch="true"
|
|
614
|
+
:status="validationStatus"
|
|
615
|
+
:disabled="disabledStatus"
|
|
558
616
|
/>
|
|
559
|
-
<CmdFormElement
|
|
560
|
-
|
|
561
|
-
|
|
562
|
-
|
|
563
|
-
|
|
564
|
-
|
|
565
|
-
|
|
566
|
-
|
|
567
|
-
|
|
568
|
-
|
|
569
|
-
|
|
570
|
-
|
|
571
|
-
|
|
617
|
+
<CmdFormElement
|
|
618
|
+
element="input"
|
|
619
|
+
type="radio"
|
|
620
|
+
name="radiogroup"
|
|
621
|
+
id="toggle-switch-radio1"
|
|
622
|
+
v-model="switchButtonRadio"
|
|
623
|
+
onLabel="Label on"
|
|
624
|
+
offLabel="Label off"
|
|
625
|
+
:colored="true"
|
|
626
|
+
:toggleSwitch="true"
|
|
627
|
+
:status="validationStatus"
|
|
628
|
+
:disabled="disabledStatus"
|
|
629
|
+
inputValue="radio1"
|
|
630
|
+
labelText="Labeltext for Toggle-Switch (Radio, colored) #1"
|
|
572
631
|
/>
|
|
573
|
-
<CmdFormElement
|
|
574
|
-
|
|
575
|
-
|
|
576
|
-
|
|
577
|
-
|
|
578
|
-
|
|
579
|
-
|
|
580
|
-
|
|
581
|
-
|
|
582
|
-
|
|
583
|
-
|
|
584
|
-
|
|
585
|
-
|
|
632
|
+
<CmdFormElement
|
|
633
|
+
element="input"
|
|
634
|
+
type="radio"
|
|
635
|
+
name="radiogroup"
|
|
636
|
+
id="toggle-switch-radio2"
|
|
637
|
+
v-model="switchButtonRadio"
|
|
638
|
+
onLabel="Label on"
|
|
639
|
+
offLabel="Label off"
|
|
640
|
+
:colored="true"
|
|
641
|
+
:toggleSwitch="true"
|
|
642
|
+
:status="validationStatus"
|
|
643
|
+
:disabled="disabledStatus"
|
|
644
|
+
inputValue="radio2"
|
|
645
|
+
labelText="Labeltext for Toggle-Switch (Radio, colored) #2"
|
|
586
646
|
/>
|
|
587
647
|
<!-- end toggle-switch-radio with switch-label (colored) -->
|
|
588
648
|
|
|
589
649
|
<!-- begin checkboxes and radiobuttons -->
|
|
590
|
-
<CmdFormElement
|
|
591
|
-
|
|
592
|
-
|
|
593
|
-
|
|
594
|
-
|
|
595
|
-
|
|
596
|
-
|
|
597
|
-
|
|
650
|
+
<CmdFormElement
|
|
651
|
+
element="input"
|
|
652
|
+
labelText="Label for (required) checkbox with boolean"
|
|
653
|
+
type="checkbox"
|
|
654
|
+
required="required"
|
|
655
|
+
id="checkbox-required-with-boolean"
|
|
656
|
+
v-model="checkboxRequiredValue"
|
|
657
|
+
:status="validationStatus"
|
|
658
|
+
:disabled="disabledStatus"
|
|
598
659
|
/>
|
|
599
660
|
<p>
|
|
600
661
|
checkbox (required) with boolean: {{ checkboxRequiredValue }}<br/>
|
|
@@ -602,8 +663,7 @@
|
|
|
602
663
|
checkboxes with values: {{ checkboxValues }}
|
|
603
664
|
</p>
|
|
604
665
|
|
|
605
|
-
<h3>Toggle Dark-Mode</h3>
|
|
606
|
-
<a id="section-toggle-darkmode"></a>
|
|
666
|
+
<h3 id="section-toggle-darkmode">Toggle Dark-Mode</h3>
|
|
607
667
|
<h4>Toggle Dark-Mode (with label, not styled)</h4>
|
|
608
668
|
<CmdToggleDarkMode :showLabel="true"/>
|
|
609
669
|
<h4>Toggle Dark-Mode (without label, styled)</h4>
|
|
@@ -616,39 +676,43 @@
|
|
|
616
676
|
<div class="label inline">
|
|
617
677
|
<span class="label-text">Label for native checkboxes:</span>
|
|
618
678
|
<div class="flex-container no-flex">
|
|
619
|
-
<CmdFormElement
|
|
620
|
-
|
|
621
|
-
|
|
622
|
-
|
|
623
|
-
|
|
624
|
-
|
|
625
|
-
|
|
679
|
+
<CmdFormElement
|
|
680
|
+
element="input"
|
|
681
|
+
labelText="Label for checkbox with boolean"
|
|
682
|
+
type="checkbox"
|
|
683
|
+
id="checkbox-with-boolean"
|
|
684
|
+
v-model="checkboxValue"
|
|
685
|
+
:status="validationStatus"
|
|
686
|
+
:disabled="disabledStatus"
|
|
626
687
|
/>
|
|
627
|
-
<CmdFormElement
|
|
628
|
-
|
|
629
|
-
|
|
630
|
-
|
|
631
|
-
|
|
632
|
-
|
|
633
|
-
|
|
634
|
-
|
|
688
|
+
<CmdFormElement
|
|
689
|
+
element="input"
|
|
690
|
+
labelText="Label for checkbox with value"
|
|
691
|
+
v-model="checkboxValues"
|
|
692
|
+
inputValue="checkboxValue1"
|
|
693
|
+
type="checkbox"
|
|
694
|
+
id="checkbox-with-value-1"
|
|
695
|
+
:status="validationStatus"
|
|
696
|
+
:disabled="disabledStatus"
|
|
635
697
|
/>
|
|
636
|
-
<CmdFormElement
|
|
637
|
-
|
|
638
|
-
|
|
639
|
-
|
|
640
|
-
|
|
641
|
-
|
|
642
|
-
|
|
643
|
-
|
|
698
|
+
<CmdFormElement
|
|
699
|
+
element="input"
|
|
700
|
+
labelText="Label for checkbox with value"
|
|
701
|
+
v-model="checkboxValues"
|
|
702
|
+
inputValue="checkboxValue2"
|
|
703
|
+
type="checkbox"
|
|
704
|
+
id="checkbox-with-value-2"
|
|
705
|
+
:status="validationStatus"
|
|
706
|
+
:disabled="disabledStatus"
|
|
644
707
|
/>
|
|
645
|
-
<CmdFormElement
|
|
646
|
-
|
|
647
|
-
|
|
648
|
-
|
|
649
|
-
|
|
650
|
-
|
|
651
|
-
|
|
708
|
+
<CmdFormElement
|
|
709
|
+
element="input"
|
|
710
|
+
v-model="checkboxValues"
|
|
711
|
+
inputValue="checkboxValue3"
|
|
712
|
+
type="checkbox"
|
|
713
|
+
id="checkbox-with-value-3"
|
|
714
|
+
:status="validationStatus"
|
|
715
|
+
:disabled="disabledStatus">
|
|
652
716
|
<template v-slot:labeltext>
|
|
653
717
|
Labeltext with <a href="#">link</a> given by slot
|
|
654
718
|
</template>
|
|
@@ -659,25 +723,27 @@
|
|
|
659
723
|
<div class="label inline">
|
|
660
724
|
<span class="label-text">Label for Replaced Input-Type-Checkbox:</span>
|
|
661
725
|
<div class="flex-container no-flex">
|
|
662
|
-
<CmdFormElement
|
|
663
|
-
|
|
664
|
-
|
|
665
|
-
|
|
666
|
-
|
|
667
|
-
|
|
668
|
-
|
|
669
|
-
|
|
670
|
-
|
|
726
|
+
<CmdFormElement
|
|
727
|
+
element="input"
|
|
728
|
+
labelText="Label for replaced checkbox"
|
|
729
|
+
type="checkbox"
|
|
730
|
+
:replaceInputType="true"
|
|
731
|
+
id="inputfield9"
|
|
732
|
+
v-model="replacedCheckboxValue"
|
|
733
|
+
inputValue="checkboxValue1"
|
|
734
|
+
:status="validationStatus"
|
|
735
|
+
:disabled="disabledStatus"
|
|
671
736
|
/>
|
|
672
|
-
<CmdFormElement
|
|
673
|
-
|
|
674
|
-
|
|
675
|
-
|
|
676
|
-
|
|
677
|
-
|
|
678
|
-
|
|
679
|
-
|
|
680
|
-
|
|
737
|
+
<CmdFormElement
|
|
738
|
+
element="input"
|
|
739
|
+
labelText="Label for replaced checkbox"
|
|
740
|
+
v-model="replacedCheckboxValue"
|
|
741
|
+
inputValue="checkboxValue2"
|
|
742
|
+
type="checkbox"
|
|
743
|
+
:replaceInputType="true"
|
|
744
|
+
id="inputfield10"
|
|
745
|
+
:status="validationStatus"
|
|
746
|
+
:disabled="disabledStatus"
|
|
681
747
|
/>
|
|
682
748
|
</div>
|
|
683
749
|
</div>
|
|
@@ -685,25 +751,27 @@
|
|
|
685
751
|
<div class="label inline">
|
|
686
752
|
<span class="label-text">Label for native radiobuttons:</span>
|
|
687
753
|
<div class="flex-container no-flex">
|
|
688
|
-
<CmdFormElement
|
|
689
|
-
|
|
690
|
-
|
|
691
|
-
|
|
692
|
-
|
|
693
|
-
|
|
694
|
-
|
|
695
|
-
|
|
696
|
-
|
|
754
|
+
<CmdFormElement
|
|
755
|
+
element="input"
|
|
756
|
+
labelText="Label for native radiobutton"
|
|
757
|
+
type="radio"
|
|
758
|
+
id="inputfield11"
|
|
759
|
+
name="radiogroup"
|
|
760
|
+
inputValue="radiobuttonValue1"
|
|
761
|
+
v-model="radiobuttonValue"
|
|
762
|
+
:status="validationStatus"
|
|
763
|
+
:disabled="disabledStatus"
|
|
697
764
|
/>
|
|
698
|
-
<CmdFormElement
|
|
699
|
-
|
|
700
|
-
|
|
701
|
-
|
|
702
|
-
|
|
703
|
-
|
|
704
|
-
|
|
705
|
-
|
|
706
|
-
|
|
765
|
+
<CmdFormElement
|
|
766
|
+
element="input"
|
|
767
|
+
labelText="Label for native radiobutton"
|
|
768
|
+
type="radio"
|
|
769
|
+
id="inputfield12"
|
|
770
|
+
name="radiogroup"
|
|
771
|
+
inputValue="radiobuttonValue2"
|
|
772
|
+
v-model="radiobuttonValue"
|
|
773
|
+
:status="validationStatus"
|
|
774
|
+
:disabled="disabledStatus"
|
|
707
775
|
/>
|
|
708
776
|
</div>
|
|
709
777
|
</div>
|
|
@@ -714,27 +782,29 @@
|
|
|
714
782
|
<div class="label inline">
|
|
715
783
|
<span class="label-text">Label for Replaced Input-Type-Radio:</span>
|
|
716
784
|
<div class="flex-container no-flex">
|
|
717
|
-
<CmdFormElement
|
|
718
|
-
|
|
719
|
-
|
|
720
|
-
|
|
721
|
-
|
|
722
|
-
|
|
723
|
-
|
|
724
|
-
|
|
725
|
-
|
|
726
|
-
|
|
785
|
+
<CmdFormElement
|
|
786
|
+
element="input"
|
|
787
|
+
labelText="Label for replaced radiobutton"
|
|
788
|
+
type="radio"
|
|
789
|
+
:replaceInputType="true"
|
|
790
|
+
id="inputfield13"
|
|
791
|
+
name="replaced-radiogroup"
|
|
792
|
+
inputValue="radiobuttonValue1"
|
|
793
|
+
v-model="replacedRadiobuttonValue"
|
|
794
|
+
:status="validationStatus"
|
|
795
|
+
:disabled="disabledStatus"
|
|
727
796
|
/>
|
|
728
|
-
<CmdFormElement
|
|
729
|
-
|
|
730
|
-
|
|
731
|
-
|
|
732
|
-
|
|
733
|
-
|
|
734
|
-
|
|
735
|
-
|
|
736
|
-
|
|
737
|
-
|
|
797
|
+
<CmdFormElement
|
|
798
|
+
element="input"
|
|
799
|
+
labelText="Label for replaced radiobutton"
|
|
800
|
+
type="radio"
|
|
801
|
+
:replaceInputType="true"
|
|
802
|
+
id="inputfield14"
|
|
803
|
+
name="replaced-radiogroup"
|
|
804
|
+
inputValue="radiobuttonValue2"
|
|
805
|
+
v-model="replacedRadiobuttonValue"
|
|
806
|
+
:status="validationStatus"
|
|
807
|
+
:disabled="disabledStatus"
|
|
738
808
|
/>
|
|
739
809
|
</div>
|
|
740
810
|
</div>
|
|
@@ -749,25 +819,27 @@
|
|
|
749
819
|
:status="validationStatus"
|
|
750
820
|
:disabled="disabledStatus"
|
|
751
821
|
>
|
|
752
|
-
<CmdFormElement
|
|
753
|
-
|
|
754
|
-
|
|
755
|
-
|
|
756
|
-
|
|
757
|
-
|
|
758
|
-
|
|
759
|
-
|
|
760
|
-
|
|
822
|
+
<CmdFormElement
|
|
823
|
+
element="input"
|
|
824
|
+
labelText="Label for radiobutton"
|
|
825
|
+
type="radio"
|
|
826
|
+
id="input-group-radiobutton"
|
|
827
|
+
name="radiogroup2"
|
|
828
|
+
inputValue="radiobuttonValue1"
|
|
829
|
+
v-model="inputGroupRadio"
|
|
830
|
+
:status="validationStatus"
|
|
831
|
+
:disabled="disabledStatus"
|
|
761
832
|
/>
|
|
762
|
-
<CmdFormElement
|
|
763
|
-
|
|
764
|
-
|
|
765
|
-
|
|
766
|
-
|
|
767
|
-
|
|
768
|
-
|
|
769
|
-
|
|
770
|
-
|
|
833
|
+
<CmdFormElement
|
|
834
|
+
element="input"
|
|
835
|
+
labelText="Label for radiobutton"
|
|
836
|
+
type="radio"
|
|
837
|
+
id="input-group-radiobutton"
|
|
838
|
+
name="radiogroup2"
|
|
839
|
+
inputValue="radiobuttonValue2"
|
|
840
|
+
v-model="inputGroupRadio"
|
|
841
|
+
:status="validationStatus"
|
|
842
|
+
:disabled="disabledStatus"
|
|
771
843
|
/>
|
|
772
844
|
</CmdInputGroup>
|
|
773
845
|
<dl>
|
|
@@ -823,8 +895,7 @@
|
|
|
823
895
|
<output>{{ inputGroupValueReplaceInputTypeCheckbox }}</output>
|
|
824
896
|
</dd>
|
|
825
897
|
</dl>
|
|
826
|
-
<h3>Input Groups with Checkboxes/
|
|
827
|
-
Radiobuttons (toggle-switches)</h3>
|
|
898
|
+
<h3>Input Groups with Checkboxes/Radiobuttons (toggle-switches)</h3>
|
|
828
899
|
<CmdInputGroup
|
|
829
900
|
labelText="Grouplabel for checkbox-group styled as toggle-switches:"
|
|
830
901
|
:inputElements="idForReplacedInputsInInputGroup('checkbox-group-toggle-switch')"
|
|
@@ -893,12 +964,13 @@
|
|
|
893
964
|
<!-- end fieldset -->
|
|
894
965
|
<div class="button-wrapper">
|
|
895
966
|
<small><sup>*</sup>values will not be submitted with the form!</small>
|
|
896
|
-
<CmdFormElement
|
|
897
|
-
|
|
898
|
-
|
|
899
|
-
|
|
900
|
-
|
|
901
|
-
|
|
967
|
+
<CmdFormElement
|
|
968
|
+
element="button"
|
|
969
|
+
:nativeButton="{text: 'Submit-button from component'}"
|
|
970
|
+
type="submit"
|
|
971
|
+
id="submitbutton"
|
|
972
|
+
name="submitbutton"
|
|
973
|
+
:disabled="disabledStatus"
|
|
902
974
|
/>
|
|
903
975
|
<button type="submit" :disabled="disabledStatus">
|
|
904
976
|
<span class="icon-check"></span>
|
|
@@ -914,9 +986,8 @@
|
|
|
914
986
|
<!-- end back to top button ----------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
915
987
|
|
|
916
988
|
<!-- begin bank account data ----------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
917
|
-
<a id="section-bank-account-data"></a>
|
|
918
989
|
<CmdWidthLimitationWrapper>
|
|
919
|
-
<h2 class="headline-demopage">Bank Account Data</h2>
|
|
990
|
+
<h2 class="headline-demopage" id="section-bank-account-data">Bank Account Data</h2>
|
|
920
991
|
<CmdBankAccountData :account-data="bankAccountData"
|
|
921
992
|
:cmd-headline="{ headlineText: 'Bank Account', headlineLevel: 3}"
|
|
922
993
|
:allow-copy-by-click="true"/>
|
|
@@ -924,20 +995,25 @@
|
|
|
924
995
|
<!-- end bank account data ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
925
996
|
|
|
926
997
|
<!-- begin boxes ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
927
|
-
<a id="section-boxes"></a>
|
|
928
998
|
<CmdWidthLimitationWrapper>
|
|
929
|
-
<h2 class="headline-demopage">Boxes</h2>
|
|
930
|
-
<CmdBoxWrapper
|
|
931
|
-
|
|
932
|
-
|
|
933
|
-
|
|
934
|
-
|
|
935
|
-
|
|
936
|
-
|
|
999
|
+
<h2 class="headline-demopage" id="section-boxes">Boxes</h2>
|
|
1000
|
+
<CmdBoxWrapper
|
|
1001
|
+
:useFlexbox="true"
|
|
1002
|
+
:cmdHeadline="{headlineText: 'Boxes in BoxWrapper with flexbox', headlineLevel: 3}"
|
|
1003
|
+
:use-gap="true"
|
|
1004
|
+
>
|
|
1005
|
+
<CmdBox
|
|
1006
|
+
v-for="index in 14"
|
|
1007
|
+
:key="index"
|
|
1008
|
+
textBody="Content"
|
|
1009
|
+
:cmd-headline="{headlineText: 'Headline ' + index, headlineLevel: 4}"
|
|
1010
|
+
/>
|
|
937
1011
|
</CmdBoxWrapper>
|
|
938
|
-
<CmdBoxWrapper
|
|
939
|
-
|
|
940
|
-
|
|
1012
|
+
<CmdBoxWrapper
|
|
1013
|
+
:useFlexbox="true"
|
|
1014
|
+
:use-gap="true"
|
|
1015
|
+
:cmdHeadline="{headlineText: 'Different examples of content-boxes (in BoxWrapper)', headlineLevel: 3}"
|
|
1016
|
+
>
|
|
941
1017
|
<CmdBox
|
|
942
1018
|
:stretch-vertically="false"
|
|
943
1019
|
:cmdHeadline="{headlineText: 'Box with cutoff text', headlineLevel: 4}"
|
|
@@ -946,8 +1022,7 @@
|
|
|
946
1022
|
>
|
|
947
1023
|
<template v-slot:body>
|
|
948
1024
|
This is a long text that is cutoff after a specific number of lines that can be defined
|
|
949
|
-
by
|
|
950
|
-
the property 'cutoffTextLines' and be toggled by a link below.
|
|
1025
|
+
by the property 'cutoffTextLines' and be toggled by a link below.
|
|
951
1026
|
</template>
|
|
952
1027
|
</CmdBox>
|
|
953
1028
|
<CmdBox :useSlots="['header', 'body', 'footer']">
|
|
@@ -992,7 +1067,7 @@
|
|
|
992
1067
|
</template>
|
|
993
1068
|
</CmdBox>
|
|
994
1069
|
<CmdBox
|
|
995
|
-
:use-default-padding="
|
|
1070
|
+
:use-default-padding="true"
|
|
996
1071
|
:cmdHeadline="{headlineText: 'Collapsible box', headlineLevel: 4}"
|
|
997
1072
|
:image="{src: 'media/images/content-images/landscape-medium.jpg', altText: 'ALternative text'}"
|
|
998
1073
|
textBody="This is some text given by property."
|
|
@@ -1051,10 +1126,11 @@
|
|
|
1051
1126
|
</template>
|
|
1052
1127
|
</CmdBoxWrapper>
|
|
1053
1128
|
<h3>Product boxes (collapsible)</h3>
|
|
1054
|
-
<CmdBoxWrapper
|
|
1055
|
-
|
|
1056
|
-
|
|
1057
|
-
|
|
1129
|
+
<CmdBoxWrapper
|
|
1130
|
+
:boxesPerRow="[5, 2, 1]"
|
|
1131
|
+
:useRowViewAsDefault="true"
|
|
1132
|
+
:allowMultipleExpandedBoxes="false"
|
|
1133
|
+
:useGap="true">
|
|
1058
1134
|
<template v-slot="slotProps">
|
|
1059
1135
|
<CmdBox
|
|
1060
1136
|
v-for="index in boxProductData.length"
|
|
@@ -1067,7 +1143,7 @@
|
|
|
1067
1143
|
:openCollapsedBox="slotProps.boxIsOpen(index - 1)"
|
|
1068
1144
|
@toggleCollapse="slotProps.boxToggled(index - 1, $event)"
|
|
1069
1145
|
>
|
|
1070
|
-
<template #body>{{slotProps.currentOpenBox}}
|
|
1146
|
+
<template #body>{{ slotProps.currentOpenBox }}Content {{ index }}</template>
|
|
1071
1147
|
</CmdBox>
|
|
1072
1148
|
</template>
|
|
1073
1149
|
</CmdBoxWrapper>
|
|
@@ -1075,17 +1151,15 @@
|
|
|
1075
1151
|
<!-- end boxes ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1076
1152
|
|
|
1077
1153
|
<!-- begin breadcrumbs ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1078
|
-
<a id="section-breadcrumbs"></a>
|
|
1079
1154
|
<CmdWidthLimitationWrapper inner-component="div">
|
|
1080
|
-
<h2 class="headline-demopage">Breadcrumbs</h2>
|
|
1155
|
+
<h2 class="headline-demopage" id="section-breadcrumbs">Breadcrumbs</h2>
|
|
1081
1156
|
<CmdBreadcrumbs :breadcrumbLinks="breadcrumbData" breadcrumbLabel="You are here:"/>
|
|
1082
1157
|
</CmdWidthLimitationWrapper>
|
|
1083
1158
|
<!-- end breadcrumbs ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1084
1159
|
|
|
1085
1160
|
<!-- begin cookie-disclaimer ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1086
|
-
<a id="section-cookie-disclaimer"></a>
|
|
1087
1161
|
<CmdWidthLimitationWrapper>
|
|
1088
|
-
<h2 class="headline-demopage">Cookie Disclaimer</h2>
|
|
1162
|
+
<h2 class="headline-demopage" id="section-cookie-disclaimer">Cookie Disclaimer</h2>
|
|
1089
1163
|
<a class="button" href="#" @click.prevent="fancyBoxCookieDisclaimer = true">
|
|
1090
1164
|
<span>Open Cookie Disclaimer</span>
|
|
1091
1165
|
</a>
|
|
@@ -1093,28 +1167,22 @@
|
|
|
1093
1167
|
<!-- end cookie-disclaimer ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1094
1168
|
|
|
1095
1169
|
<!-- begin headline ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1096
|
-
<a id="section-headlines"></a>
|
|
1097
1170
|
<CmdWidthLimitationWrapper>
|
|
1098
|
-
<h2 class="headline-demopage">Headlines</h2>
|
|
1099
|
-
<CmdHeadline :headlineIcon="{iconClass: 'icon-home'}" pre-headline-text="Pre-headline"
|
|
1100
|
-
|
|
1101
|
-
<CmdHeadline pre-headline-text="Pre-headline" :headlineIcon="{iconClass: 'icon-home'}" headlineText="Headline level 2" :headlineLevel="2" />
|
|
1171
|
+
<h2 class="headline-demopage" id="section-headlines">Headlines</h2>
|
|
1172
|
+
<CmdHeadline :headlineIcon="{iconClass: 'icon-home'}" pre-headline-text="Pre-headline" headlineText="Headline level 1" :headlineLevel="1"/>
|
|
1173
|
+
<CmdHeadline pre-headline-text="Pre-headline" :headlineIcon="{iconClass: 'icon-home'}" headlineText="Headline level 2" :headlineLevel="2"/>
|
|
1102
1174
|
<CmdHeadline pre-headline-text="Pre-headline" :headlineIcon="{iconClass: 'icon-home'}" headlineText="Headline level 3" :headlineLevel="3"/>
|
|
1103
1175
|
<CmdHeadline pre-headline-text="Pre-headline" :headlineIcon="{iconClass: 'icon-home'}" headlineText="Headline level 4" :headlineLevel="4"/>
|
|
1104
1176
|
<CmdHeadline pre-headline-text="Pre-headline" :headlineIcon="{iconClass: 'icon-home'}" headlineText="Headline level 5" :headlineLevel="5"/>
|
|
1105
1177
|
<CmdHeadline pre-headline-text="Pre-headline" :headlineIcon="{iconClass: 'icon-home'}" headlineText="Headline level 6" :headlineLevel="6"/>
|
|
1106
|
-
<CmdHeadline pre-headline-text="Pre-headline" headlineText="Headline level 1 (center)"
|
|
1107
|
-
|
|
1108
|
-
<CmdHeadline pre-headline-text="Pre-headline" headlineText="Headline level 1 (right)"
|
|
1109
|
-
text-align="right"
|
|
1110
|
-
:headlineLevel="1"/>
|
|
1178
|
+
<CmdHeadline pre-headline-text="Pre-headline" headlineText="Headline level 1 (center)" text-align="center" :headlineLevel="1"/>
|
|
1179
|
+
<CmdHeadline pre-headline-text="Pre-headline" headlineText="Headline level 1 (right)" text-align="right" :headlineLevel="1"/>
|
|
1111
1180
|
</CmdWidthLimitationWrapper>
|
|
1112
1181
|
<!-- end headline ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1113
1182
|
|
|
1114
1183
|
<!-- begin forms ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1115
|
-
<a id="section-forms"></a>
|
|
1116
1184
|
<CmdWidthLimitationWrapper>
|
|
1117
|
-
<h2 class="headline-demopage">Forms</h2>
|
|
1185
|
+
<h2 class="headline-demopage" id="section-forms">Forms</h2>
|
|
1118
1186
|
<h3>Form elements given by data</h3>
|
|
1119
1187
|
<CmdForm
|
|
1120
1188
|
:useFieldset="true"
|
|
@@ -1159,13 +1227,10 @@
|
|
|
1159
1227
|
<!-- end forms ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1160
1228
|
|
|
1161
1229
|
<!-- begin fancybox ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1162
|
-
<a id="section-fancybox"></a>
|
|
1163
1230
|
<CmdWidthLimitationWrapper>
|
|
1164
|
-
<h2 class="headline-demopage">Fancybox</h2>
|
|
1231
|
+
<h2 class="headline-demopage" id="section-fancybox">Fancybox</h2>
|
|
1165
1232
|
<h3>FancyBox with text</h3>
|
|
1166
|
-
<a href="#" @click.prevent="showFancyBox('text','Some text', 'FancyBox with text')">Open FancyBox
|
|
1167
|
-
with
|
|
1168
|
-
text</a>
|
|
1233
|
+
<a href="#" @click.prevent="showFancyBox('text','Some text', 'FancyBox with text')">Open FancyBox with text</a>
|
|
1169
1234
|
<h3>FancyBox with large image given by url</h3>
|
|
1170
1235
|
<a href="#"
|
|
1171
1236
|
@click.prevent="showFancyBox('url', 'media/images/demo-images/large/landscape-01.jpg', 'FancyBox with large image given by url')"
|
|
@@ -1199,31 +1264,34 @@
|
|
|
1199
1264
|
<!-- end fancybox ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1200
1265
|
|
|
1201
1266
|
<!-- begin google-maps ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1202
|
-
<a id="section-google-maps"></a>
|
|
1203
1267
|
<CmdWidthLimitationWrapper>
|
|
1204
|
-
<h2 class="headline-demopage">Google Maps™</h2>
|
|
1268
|
+
<h2 class="headline-demopage" id="section-google-maps">Google Maps™</h2>
|
|
1205
1269
|
<CmdGoogleMaps :address="addressData"/>
|
|
1206
1270
|
</CmdWidthLimitationWrapper>
|
|
1207
1271
|
<!-- end google-maps ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1208
1272
|
|
|
1209
1273
|
<!-- begin icons ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1210
|
-
<a id="section-icons"></a>
|
|
1211
1274
|
<CmdWidthLimitationWrapper>
|
|
1212
|
-
<h2 class="headline-demopage">Icons</h2>
|
|
1275
|
+
<h2 class="headline-demopage" id="section-icons">Icons</h2>
|
|
1213
1276
|
<ul>
|
|
1214
|
-
<li
|
|
1277
|
+
<li>
|
|
1278
|
+
<span>Icon from local iconfont</span>
|
|
1215
1279
|
<CmdIcon iconClass="icon-home"/>
|
|
1216
1280
|
</li>
|
|
1217
|
-
<li
|
|
1281
|
+
<li>
|
|
1282
|
+
<span>Icon from iconify-api (icomoon-font)</span>
|
|
1218
1283
|
<CmdIcon iconClass="icomoon-free:home"/>
|
|
1219
1284
|
</li>
|
|
1220
|
-
<li
|
|
1285
|
+
<li>
|
|
1286
|
+
<span>Icon from iconify-api (bootstrap-font)</span>
|
|
1221
1287
|
<CmdIcon iconClass="bi:house-fill"/>
|
|
1222
1288
|
</li>
|
|
1223
|
-
<li
|
|
1289
|
+
<li>
|
|
1290
|
+
<span>Icon from iconify-api (material-design-font)</span>
|
|
1224
1291
|
<CmdIcon iconClass="mdi:home"/>
|
|
1225
1292
|
</li>
|
|
1226
|
-
<li
|
|
1293
|
+
<li>
|
|
1294
|
+
<span>Icon from iconify-api (font-awesome-solid-font)</span>
|
|
1227
1295
|
<CmdIcon iconClass="fa6-solid:house-chimney"/>
|
|
1228
1296
|
</li>
|
|
1229
1297
|
</ul>
|
|
@@ -1231,9 +1299,8 @@
|
|
|
1231
1299
|
<!-- end icons ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1232
1300
|
|
|
1233
1301
|
<!-- begin images ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1234
|
-
<a id="section-image"></a>
|
|
1235
1302
|
<CmdWidthLimitationWrapper>
|
|
1236
|
-
<h2 class="headline-demopage">Image</h2>
|
|
1303
|
+
<h2 class="headline-demopage" id="section-image">Image</h2>
|
|
1237
1304
|
<div class="flex-container">
|
|
1238
1305
|
<CmdImage :image="imageData[0].image" :figcaption="imageData[0].figcaption"/>
|
|
1239
1306
|
<CmdImage :image="imageData[1].image" :figcaption="imageData[1].figcaption"/>
|
|
@@ -1242,17 +1309,15 @@
|
|
|
1242
1309
|
<!-- end images ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1243
1310
|
|
|
1244
1311
|
<!-- begin image-gallery------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1245
|
-
<a id="section-image-gallery"></a>
|
|
1246
1312
|
<CmdWidthLimitationWrapper>
|
|
1247
|
-
<h2 class="headline-demopage">Image-Gallery</h2>
|
|
1313
|
+
<h2 class="headline-demopage" id="section-image-gallery">Image-Gallery</h2>
|
|
1248
1314
|
<CmdImageGallery :images="imageGalleryData"/>
|
|
1249
1315
|
</CmdWidthLimitationWrapper>
|
|
1250
1316
|
<!-- end image-gallery ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1251
1317
|
|
|
1252
1318
|
<!-- begin image-zoom ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1253
|
-
<a id="section-image-zoom"></a>
|
|
1254
1319
|
<CmdWidthLimitationWrapper>
|
|
1255
|
-
<h2 class="headline-demopage">Image-Zoom</h2>
|
|
1320
|
+
<h2 class="headline-demopage" id="section-image-zoom">Image-Zoom</h2>
|
|
1256
1321
|
<CmdImageZoom
|
|
1257
1322
|
:imageSmall="imageData[2].image"
|
|
1258
1323
|
:imageLarge="imageData[3].image"
|
|
@@ -1261,9 +1326,8 @@
|
|
|
1261
1326
|
<!-- end image-zoom ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1262
1327
|
|
|
1263
1328
|
<!-- begin list-of-links ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1264
|
-
<a id="section-list-of-links"></a>
|
|
1265
1329
|
<CmdWidthLimitationWrapper>
|
|
1266
|
-
<h2 class="headline-demopage">List Of Links</h2>
|
|
1330
|
+
<h2 class="headline-demopage" id="section-list-of-links">List Of Links</h2>
|
|
1267
1331
|
<h3>Vertical</h3>
|
|
1268
1332
|
<CmdListOfLinks :links="listOfLinksData"/>
|
|
1269
1333
|
<h3>Horizontal (aligned left, with headline)</h3>
|
|
@@ -1272,24 +1336,22 @@
|
|
|
1272
1336
|
align="left"
|
|
1273
1337
|
:links="listOfLinksData"
|
|
1274
1338
|
:cmdHeadline="{
|
|
1275
|
-
|
|
1276
|
-
|
|
1277
|
-
|
|
1339
|
+
headlineText: 'Headline',
|
|
1340
|
+
headlineLevel: 5
|
|
1341
|
+
}"
|
|
1278
1342
|
/>
|
|
1279
1343
|
<h3>Horizontal (aligned center)</h3>
|
|
1280
1344
|
<CmdListOfLinks orientation="horizontal" align="center" :links="listOfLinksData"/>
|
|
1281
1345
|
<h3>Horizontal (aligned right)</h3>
|
|
1282
|
-
<CmdListOfLinks orientation="horizontal" align="right" :links="listOfLinksData"
|
|
1283
|
-
@click="clickOnListOfLinks"/>
|
|
1346
|
+
<CmdListOfLinks orientation="horizontal" align="right" :links="listOfLinksData" @click="clickOnListOfLinks"/>
|
|
1284
1347
|
<h3>Large icons</h3>
|
|
1285
1348
|
<CmdListOfLinks orientation="horizontal" :links="listOfLinksData" :largeIcons="true"/>
|
|
1286
1349
|
</CmdWidthLimitationWrapper>
|
|
1287
1350
|
<!-- end list-of-links ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1288
1351
|
|
|
1289
1352
|
<!-- begin login-form ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1290
|
-
<a id="section-login-form"></a>
|
|
1291
1353
|
<CmdWidthLimitationWrapper>
|
|
1292
|
-
<h2 class="headline-demopage">Login Form</h2>
|
|
1354
|
+
<h2 class="headline-demopage" id="section-login-form">Login Form</h2>
|
|
1293
1355
|
<CmdForm :use-validation="true" :use-fieldset="false">
|
|
1294
1356
|
<CmdLoginForm v-model="loginData" textLegendLoginForm="Please log in"/>
|
|
1295
1357
|
</CmdForm>
|
|
@@ -1298,9 +1360,8 @@
|
|
|
1298
1360
|
<!-- end login-form ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1299
1361
|
|
|
1300
1362
|
<!-- begin main-navigation ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1301
|
-
<a id="section-main-navigation"></a>
|
|
1302
1363
|
<CmdWidthLimitationWrapper>
|
|
1303
|
-
<h2 class="headline-demopage">Main Navigation</h2>
|
|
1364
|
+
<h2 class="headline-demopage" id="section-main-navigation">Main Navigation</h2>
|
|
1304
1365
|
<CmdMainNavigation
|
|
1305
1366
|
:stretchMainItems="false"
|
|
1306
1367
|
:persistOnMobile="false"
|
|
@@ -1310,9 +1371,8 @@
|
|
|
1310
1371
|
<!-- end main-navigation ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1311
1372
|
|
|
1312
1373
|
<!-- begin multistep-form-progress-bar ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1313
|
-
<a id="section-multistep-form-progress-bar"></a>
|
|
1314
1374
|
<CmdWidthLimitationWrapper>
|
|
1315
|
-
<h2 class="headline-demopage">Multistepform-Progressbar</h2>
|
|
1375
|
+
<h2 class="headline-demopage" id="section-multistep-form-progress-bar">Multistepform-Progressbar</h2>
|
|
1316
1376
|
<h3>Steps with icons</h3>
|
|
1317
1377
|
<CmdMultistepFormProgressBar
|
|
1318
1378
|
:multisteps="multistepsData.withIcon"
|
|
@@ -1336,20 +1396,20 @@
|
|
|
1336
1396
|
<!-- end multistep-form-progress-bar ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1337
1397
|
|
|
1338
1398
|
<!-- begin newsletter-subscription ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1339
|
-
<a id="section-newsletter-subscription"></a>
|
|
1340
1399
|
<CmdWidthLimitationWrapper>
|
|
1341
|
-
<h2 class="headline-demopage">Newsletter Subscription</h2>
|
|
1400
|
+
<h2 class="headline-demopage" id="section-newsletter-subscription">Newsletter Subscription</h2>
|
|
1342
1401
|
<CmdForm textLegend="Stay-up-to-date" :use-fieldset="false">
|
|
1343
|
-
<CmdNewsletterSubscription
|
|
1344
|
-
|
|
1402
|
+
<CmdNewsletterSubscription
|
|
1403
|
+
v-model="newsletter"
|
|
1404
|
+
buttonType="submit"
|
|
1405
|
+
@buttonClick="submitNewsletterRegistration"/>
|
|
1345
1406
|
</CmdForm>
|
|
1346
1407
|
</CmdWidthLimitationWrapper>
|
|
1347
1408
|
<!-- end newsletter-subscription ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1348
1409
|
|
|
1349
1410
|
<!-- begin opening-hours ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1350
|
-
<a id="section-opening-hours"></a>
|
|
1351
1411
|
<CmdWidthLimitationWrapper>
|
|
1352
|
-
<h2 class="headline-demopage">Opening Hours</h2>
|
|
1412
|
+
<h2 class="headline-demopage" id="section-opening-hours">Opening Hours</h2>
|
|
1353
1413
|
<CmdOpeningHours
|
|
1354
1414
|
:openingHours="openingHoursData"
|
|
1355
1415
|
:cmdHeadline="{headlineText: 'Opening hours', headlineLevel: 6}"
|
|
@@ -1361,9 +1421,8 @@
|
|
|
1361
1421
|
<!-- end opening-hours ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1362
1422
|
|
|
1363
1423
|
<!-- begin pagination ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1364
|
-
<a id="section-pagination"></a>
|
|
1365
1424
|
<CmdWidthLimitationWrapper>
|
|
1366
|
-
<h2 class="headline-demopage">Pagination</h2>
|
|
1425
|
+
<h2 class="headline-demopage" id="section-pagination">Pagination</h2>
|
|
1367
1426
|
<h3>Link-view</h3>
|
|
1368
1427
|
<div>
|
|
1369
1428
|
<p>Page {{ showPagePager }}</p>
|
|
@@ -1387,9 +1446,8 @@
|
|
|
1387
1446
|
<!-- end pagination ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1388
1447
|
|
|
1389
1448
|
<!-- begin site-footer ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1390
|
-
<a id="section-site-footer"></a>
|
|
1391
1449
|
<CmdWidthLimitationWrapper>
|
|
1392
|
-
<h2 class="headline-demopage">Site Footer</h2>
|
|
1450
|
+
<h2 class="headline-demopage" id="section-site-footer">Site Footer</h2>
|
|
1393
1451
|
<CmdSiteFooter>
|
|
1394
1452
|
Slotcontent
|
|
1395
1453
|
</CmdSiteFooter>
|
|
@@ -1397,9 +1455,8 @@
|
|
|
1397
1455
|
<!-- end site-footer ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1398
1456
|
|
|
1399
1457
|
<!-- begin site-header ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1400
|
-
<a id="section-site-header"></a>
|
|
1401
1458
|
<CmdWidthLimitationWrapper>
|
|
1402
|
-
<h2 class="headline-demopage">Site Header</h2>
|
|
1459
|
+
<h2 class="headline-demopage" id="section-site-header">Site Header</h2>
|
|
1403
1460
|
<h3>Header with navigation below logo</h3>
|
|
1404
1461
|
<CmdSiteHeader
|
|
1405
1462
|
:cmdMainNavigation="navigationData"
|
|
@@ -1442,9 +1499,8 @@
|
|
|
1442
1499
|
<!-- end site-header ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1443
1500
|
|
|
1444
1501
|
<!-- begin site-search ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1445
|
-
<a id="section-site-search"></a>
|
|
1446
1502
|
<CmdWidthLimitationWrapper>
|
|
1447
|
-
<h2 class="headline-demopage">Site Search</h2>
|
|
1503
|
+
<h2 class="headline-demopage" id="section-site-search">Site Search</h2>
|
|
1448
1504
|
<CmdSiteSearch
|
|
1449
1505
|
v-model:modelValueInput1="siteSearchInput1"
|
|
1450
1506
|
v-model:modelValueInput2="siteSearchInput2"
|
|
@@ -1458,9 +1514,8 @@
|
|
|
1458
1514
|
<!-- end site-search ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1459
1515
|
|
|
1460
1516
|
<!-- begin slideshow ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1461
|
-
<a id="section-slideshow"></a>
|
|
1462
1517
|
<CmdWidthLimitationWrapper>
|
|
1463
|
-
<h2 class="headline-demopage">Slideshow</h2>
|
|
1518
|
+
<h2 class="headline-demopage" id="section-slideshow">Slideshow</h2>
|
|
1464
1519
|
<CmdSlideshow
|
|
1465
1520
|
:slideshow-items="slideshowData"
|
|
1466
1521
|
:showCounter="true"
|
|
@@ -1470,9 +1525,8 @@
|
|
|
1470
1525
|
<!-- end slideshow ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1471
1526
|
|
|
1472
1527
|
<!-- begin social-networks ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1473
|
-
<a id="section-social-networks"></a>
|
|
1474
1528
|
<CmdWidthLimitationWrapper>
|
|
1475
|
-
<h2 class="headline-demopage">Social Networks</h2>
|
|
1529
|
+
<h2 class="headline-demopage" id="section-social-networks">Social Networks</h2>
|
|
1476
1530
|
<h3>With user confirmation (buttons without gap)</h3>
|
|
1477
1531
|
<CmdSocialNetworks
|
|
1478
1532
|
:networks="socialNetworksData"
|
|
@@ -1494,9 +1548,8 @@
|
|
|
1494
1548
|
<!-- end social-networks ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1495
1549
|
|
|
1496
1550
|
<!-- begin switch-language ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1497
|
-
<a id="section-switch-language"></a>
|
|
1498
1551
|
<CmdWidthLimitationWrapper>
|
|
1499
|
-
<h2 class="headline-demopage">Switch Language</h2>
|
|
1552
|
+
<h2 class="headline-demopage" id="section-switch-language">Switch Language</h2>
|
|
1500
1553
|
<CmdSwitchLanguage
|
|
1501
1554
|
:languages="languagesData"
|
|
1502
1555
|
@click="doSomething"
|
|
@@ -1505,64 +1558,61 @@
|
|
|
1505
1558
|
<!-- end switch-language ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1506
1559
|
|
|
1507
1560
|
<!-- begin system-message ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1508
|
-
<a id="section-system-message"></a>
|
|
1509
1561
|
<CmdWidthLimitationWrapper>
|
|
1510
|
-
<h2 class="headline-demopage">System Message</h2>
|
|
1511
|
-
<CmdSystemMessage
|
|
1512
|
-
|
|
1513
|
-
|
|
1514
|
-
|
|
1562
|
+
<h2 class="headline-demopage" id="section-system-message">System Message</h2>
|
|
1563
|
+
<CmdSystemMessage
|
|
1564
|
+
validationStatus="error"
|
|
1565
|
+
:fullWidth="true"
|
|
1566
|
+
systemMessage="This is an error message!"
|
|
1567
|
+
:iconMessage="{iconClass: 'icon-error-circle', show: true}">
|
|
1515
1568
|
<ul>
|
|
1516
1569
|
<li>Error #1</li>
|
|
1517
1570
|
<li>Error #2</li>
|
|
1518
1571
|
<li>Error #3</li>
|
|
1519
1572
|
</ul>
|
|
1520
1573
|
</CmdSystemMessage>
|
|
1521
|
-
<CmdSystemMessage
|
|
1522
|
-
|
|
1523
|
-
|
|
1574
|
+
<CmdSystemMessage
|
|
1575
|
+
validationStatus="warning"
|
|
1576
|
+
:fullWidth="true"
|
|
1577
|
+
systemMessage="This is a warning message!">
|
|
1524
1578
|
<p>This is additional text!</p>
|
|
1525
1579
|
</CmdSystemMessage>
|
|
1526
|
-
<CmdSystemMessage
|
|
1527
|
-
|
|
1528
|
-
|
|
1529
|
-
|
|
1580
|
+
<CmdSystemMessage
|
|
1581
|
+
validationStatus="success"
|
|
1582
|
+
:fullWidth="true"
|
|
1583
|
+
systemMessage="This is a success message!"
|
|
1584
|
+
:iconMessage="{iconClass: 'icon-check-circle', show: true}">
|
|
1530
1585
|
<p>This is additional text!</p>
|
|
1531
1586
|
</CmdSystemMessage>
|
|
1532
|
-
<CmdSystemMessage
|
|
1533
|
-
|
|
1534
|
-
|
|
1535
|
-
|
|
1587
|
+
<CmdSystemMessage
|
|
1588
|
+
validationStatus="info"
|
|
1589
|
+
:fullWidth="true"
|
|
1590
|
+
systemMessage="This is an info message!"
|
|
1591
|
+
:iconMessage="{iconClass: 'icon-info-circle', show: true}">
|
|
1536
1592
|
<p>This is additional text!</p>
|
|
1537
1593
|
</CmdSystemMessage>
|
|
1538
1594
|
</CmdWidthLimitationWrapper>
|
|
1539
1595
|
<!-- end system-message ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1540
1596
|
|
|
1541
1597
|
<!-- begin tables ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1542
|
-
<a id="section-tables"></a>
|
|
1543
1598
|
<CmdWidthLimitationWrapper>
|
|
1544
|
-
<h2 class="headline-demopage">Tables</h2>
|
|
1599
|
+
<h2 class="headline-demopage" id="section-tables">Tables</h2>
|
|
1545
1600
|
<h3>Table as wide as its content (with caption)</h3>
|
|
1546
|
-
<CmdTable :collapsible="true" :fullWidthOnDefault="false" :userCanToggleWidth="true"
|
|
1547
|
-
:table-data="tableDataSmall"/>
|
|
1601
|
+
<CmdTable :collapsible="true" :fullWidthOnDefault="false" :userCanToggleWidth="true" :table-data="tableDataSmall"/>
|
|
1548
1602
|
<h3>Table as wide as its content (without caption)</h3>
|
|
1549
|
-
<CmdTable :collapsible="true" :fullWidthOnDefault="false" :userCanToggleWidth="true"
|
|
1550
|
-
:caption="{ text: 'Hidden caption', show: false}" :table-data="tableDataSmall"/>
|
|
1603
|
+
<CmdTable :collapsible="true" :fullWidthOnDefault="false" :userCanToggleWidth="true" :caption="{ text: 'Hidden caption', show: false}" :table-data="tableDataSmall"/>
|
|
1551
1604
|
<h3>Table as wide as possible</h3>
|
|
1552
|
-
<CmdTable :collapsible="true" :fullWidthOnDefault="false" :userCanToggleWidth="true"
|
|
1553
|
-
:table-data="tableDataLarge"/>
|
|
1605
|
+
<CmdTable :collapsible="true" :fullWidthOnDefault="false" :userCanToggleWidth="true" :table-data="tableDataLarge"/>
|
|
1554
1606
|
</CmdWidthLimitationWrapper>
|
|
1555
1607
|
<!-- end tables ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1556
1608
|
|
|
1557
1609
|
<!-- begin tabs ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1558
|
-
<a id="section-tabs"></a>
|
|
1559
1610
|
<CmdWidthLimitationWrapper>
|
|
1560
|
-
<h2 class="headline-demopage">Tabs</h2>
|
|
1611
|
+
<h2 class="headline-demopage" id="section-tabs">Tabs</h2>
|
|
1561
1612
|
<h3>Tabs with content from json-file</h3>
|
|
1562
1613
|
<CmdTabs :stretchTabs="false" :tabs="tabsData"/>
|
|
1563
1614
|
<h3>Tabs with HTML-content (given by slot))</h3>
|
|
1564
|
-
<CmdTabs :stretchTabs="true" :tabs="[{name: 'Tab 1'}, {name: 'Tab 2'}, {name: 'Tab 3'}]"
|
|
1565
|
-
:useSlot="true">
|
|
1615
|
+
<CmdTabs :stretchTabs="true" :tabs="[{name: 'Tab 1'}, {name: 'Tab 2'}, {name: 'Tab 3'}]" :useSlot="true">
|
|
1566
1616
|
<template v-slot:tab-content-0>
|
|
1567
1617
|
<h4>Tab 1 headline</h4>
|
|
1568
1618
|
<p>Content</p>
|
|
@@ -1583,9 +1633,8 @@
|
|
|
1583
1633
|
<!-- end tabs ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1584
1634
|
|
|
1585
1635
|
<!-- begin text-image-block ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1586
|
-
<a id="section-text-image-block"></a>
|
|
1587
1636
|
<CmdWidthLimitationWrapper>
|
|
1588
|
-
<h2 class="headline-demopage">Text-Image-Block</h2>
|
|
1637
|
+
<h2 class="headline-demopage" id="section-text-image-block">Text-Image-Block</h2>
|
|
1589
1638
|
<div class="flex-container">
|
|
1590
1639
|
<CmdTextImageBlock
|
|
1591
1640
|
:cmdHeadline="{headlineText: 'Text-Image-Block with image', headlineLevel: 3}"
|
|
@@ -1613,12 +1662,10 @@
|
|
|
1613
1662
|
<!-- end text-image-block ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1614
1663
|
|
|
1615
1664
|
<!-- begin thumbnail-scroller ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1616
|
-
<a id="section-thumbnail-scroller"></a>
|
|
1617
1665
|
<CmdWidthLimitationWrapper>
|
|
1618
|
-
<h2 class="headline-demopage">Thumbnail-Scroller</h2>
|
|
1666
|
+
<h2 class="headline-demopage" id="section-thumbnail-scroller">Thumbnail-Scroller</h2>
|
|
1619
1667
|
<div class="inline-size">
|
|
1620
1668
|
<h3>Thumbnail-Scroller with images (opens fancybox)</h3>
|
|
1621
|
-
|
|
1622
1669
|
<CmdThumbnailScroller
|
|
1623
1670
|
:thumbnail-scroller-items="thumbnailScrollerImagesData"
|
|
1624
1671
|
/>
|
|
@@ -1643,9 +1690,8 @@
|
|
|
1643
1690
|
<!-- end thumbnail-scroller ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1644
1691
|
|
|
1645
1692
|
<!-- begin tooltip ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1646
|
-
<a id="section-tooltip"></a>
|
|
1647
1693
|
<CmdWidthLimitationWrapper>
|
|
1648
|
-
<h2 class="headline-demopage">Tooltip</h2>
|
|
1694
|
+
<h2 class="headline-demopage" id="section-tooltip">Tooltip</h2>
|
|
1649
1695
|
<p>
|
|
1650
1696
|
<a href="#" @click.prevent id="show-on-hover">Show tooltip on hover!</a><br/>
|
|
1651
1697
|
<a href="#" @click.prevent id="show-with-delay">Show tooltip on hover with delay!</a><br/>
|
|
@@ -1664,25 +1710,26 @@
|
|
|
1664
1710
|
<!-- end tooltip ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1665
1711
|
|
|
1666
1712
|
<!-- begin upload-form ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1667
|
-
<a id="section-upload-form"></a>
|
|
1668
1713
|
<CmdWidthLimitationWrapper>
|
|
1669
|
-
<h2 class="headline-demopage">Upload-Form</h2>
|
|
1714
|
+
<h2 class="headline-demopage" id="section-upload-form">Upload-Form</h2>
|
|
1670
1715
|
<h3>Simple mode</h3>
|
|
1671
|
-
<CmdUploadForm
|
|
1672
|
-
|
|
1673
|
-
|
|
1674
|
-
|
|
1675
|
-
|
|
1676
|
-
|
|
1677
|
-
|
|
1716
|
+
<CmdUploadForm
|
|
1717
|
+
:enableDragAndDrop="true"
|
|
1718
|
+
:allowedFileExtensions="['jpg', 'png']"
|
|
1719
|
+
:allowMultipleFileUploads="true"
|
|
1720
|
+
:advancedMode="false"
|
|
1721
|
+
textLegend="Simple upload form"
|
|
1722
|
+
@error="showError"
|
|
1723
|
+
:uploadOptions="{url: 'http://localhost:8888'}"
|
|
1678
1724
|
/>
|
|
1679
1725
|
<h3>Advanced mode</h3>
|
|
1680
|
-
<CmdUploadForm
|
|
1681
|
-
|
|
1682
|
-
|
|
1683
|
-
|
|
1684
|
-
|
|
1685
|
-
|
|
1726
|
+
<CmdUploadForm
|
|
1727
|
+
:cmdHeadlineFieldset="{headlineText: 'Select files to upload', headlineLevel: 3}"
|
|
1728
|
+
:enableDragAndDrop="true"
|
|
1729
|
+
:allowedFileExtensions="['jpg', 'png']"
|
|
1730
|
+
:allowMultipleFileUploads="true"
|
|
1731
|
+
textLegend="Advanced upload form"
|
|
1732
|
+
:uploadOptions="{url: 'http://localhost:8888'}"
|
|
1686
1733
|
/>
|
|
1687
1734
|
</CmdWidthLimitationWrapper>
|
|
1688
1735
|
<!-- end upload-form ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
@@ -1844,6 +1891,7 @@ export default {
|
|
|
1844
1891
|
switchButtonCheckboxToggleSwitchColored: false,
|
|
1845
1892
|
switchButtonCheckbox: ["checkbox1"],
|
|
1846
1893
|
switchButtonCheckboxColored: false,
|
|
1894
|
+
inputMail: "",
|
|
1847
1895
|
inputUsername: "",
|
|
1848
1896
|
inputPassword: "",
|
|
1849
1897
|
inputField1: "",
|
|
@@ -2024,8 +2072,8 @@ export default {
|
|
|
2024
2072
|
return Math.floor(Math.random() * 100)
|
|
2025
2073
|
},
|
|
2026
2074
|
doConsoleLog(event) {
|
|
2027
|
-
|
|
2028
|
-
|
|
2075
|
+
event.originalEvent.preventDefault()
|
|
2076
|
+
console.log("event: ", event)
|
|
2029
2077
|
},
|
|
2030
2078
|
toggleAllAccordions() {
|
|
2031
2079
|
if (this.accordionGroupOpen) {
|