comand-component-library 3.1.87 → 3.1.88
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.css +1 -1
- package/dist/comand-component-library.umd.min.js +1 -1
- package/package.json +1 -1
- package/src/App.vue +1063 -1059
- package/src/assets/data/opening-hours.json +10 -0
- package/src/assets/styles/global-styles.scss +19 -2
- package/src/components/CmdOpeningHours.vue +11 -0
- package/src/components/CmdSiteHeader.vue +4 -0
- package/src/documentation/generated/CmdOpeningHoursPropertyDescriptions.json +2 -2
package/src/App.vue
CHANGED
|
@@ -1,350 +1,351 @@
|
|
|
1
1
|
<!--suppress HtmlUnknownTarget, NpmUsedModulesInstalled, JSUnresolvedVariable -->
|
|
2
2
|
<template>
|
|
3
|
-
<
|
|
4
|
-
|
|
5
|
-
<
|
|
6
|
-
<
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
<
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
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
|
-
|
|
3
|
+
<div id="page-wrapper">
|
|
4
|
+
<a id="anchor-back-to-top"></a>
|
|
5
|
+
<CmdSiteHeader :cmdMainNavigation="navigationData" :sticky="true">
|
|
6
|
+
<template v-slot:top-header>
|
|
7
|
+
<CmdListOfLinks
|
|
8
|
+
:links="listOfLinksData"
|
|
9
|
+
orientation="horizontal"
|
|
10
|
+
align="right"
|
|
11
|
+
/>
|
|
12
|
+
</template>
|
|
13
|
+
<template v-slot:logo>
|
|
14
|
+
<CmdCompanyLogo
|
|
15
|
+
:link="companyLogoData.link"
|
|
16
|
+
altText="CoManD Logo"
|
|
17
|
+
:pathDefaultLogo="require('@/assets/images/logo.svg')"
|
|
18
|
+
:pathDarkmodeLogo="require('@/assets/images/logo-darkmode.svg')"
|
|
19
|
+
/>
|
|
20
|
+
</template>
|
|
21
|
+
</CmdSiteHeader>
|
|
22
|
+
<main>
|
|
23
|
+
<CmdWidthLimitationWrapper>
|
|
24
|
+
<div class="flex-container">
|
|
25
|
+
<ul>
|
|
26
|
+
<li><a href="#section-accordion">Accordion</a></li>
|
|
27
|
+
<li><a href="#section-advanced-form-elements">Advanced Form Elements</a></li>
|
|
28
|
+
<li><a href="#section-bank-account-data">Bank Account Data</a></li>
|
|
29
|
+
<li><a href="#section-boxes">Boxes</a></li>
|
|
30
|
+
<li><a href="#section-breadcrumbs">Breadcrumbs</a></li>
|
|
31
|
+
<li><a href="#section-cookie-disclaimer">Cookie-Disclaimer</a></li>
|
|
32
|
+
</ul>
|
|
33
|
+
<ul>
|
|
34
|
+
<li><a href="#section-custom-headline">Custom Headline</a></li>
|
|
35
|
+
<li><a href="#section-fancybox">Fancybox</a></li>
|
|
36
|
+
<li><a href="#section-google-maps-integration">Google-Maps™-Integration</a></li>
|
|
37
|
+
<li><a href="#section-image-gallery">Image Gallery</a></li>
|
|
38
|
+
<li><a href="#section-image-zoom">Image-Zoom</a></li>
|
|
39
|
+
<li><a href="#section-login-form">Login Form</a></li>
|
|
40
|
+
</ul>
|
|
41
|
+
<ul>
|
|
42
|
+
<li><a href="#section-main-navigation">Main-Navigation</a></li>
|
|
43
|
+
<li><a href="#section-multistep-form-progress-bar">Multistepform-Progressbar</a></li>
|
|
44
|
+
<li><a href="#section-pager">Pager</a></li>
|
|
45
|
+
<li><a href="#section-share-buttons">Share Buttons</a></li>
|
|
46
|
+
<li><a href="#section-slideshow">Slideshow</a></li>
|
|
47
|
+
<li><a href="#section-system-message">System-Message</a></li>
|
|
48
|
+
</ul>
|
|
49
|
+
<ul>
|
|
50
|
+
<li><a href="#section-tables">Tables</a></li>
|
|
51
|
+
<li><a href="#section-tabs">Tabs</a></li>
|
|
52
|
+
<li><a href="#section-thumbnail-scroller">Thumbnail-Scroller</a></li>
|
|
53
|
+
<li><a href="#section-toggle-darkmode">ToggleDarkMode</a></li>
|
|
54
|
+
<li><a href="#section-tooltip">Tooltip</a></li>
|
|
55
|
+
<li><a href="#section-upload-form">Upload-Form</a></li>
|
|
56
|
+
</ul>
|
|
57
|
+
</div>
|
|
58
|
+
<hr/>
|
|
59
|
+
</CmdWidthLimitationWrapper>
|
|
60
|
+
<!-- begin advanced form elements --------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
61
|
+
<a id="section-advanced-form-elements"></a>
|
|
62
|
+
<CmdWidthLimitationWrapper>
|
|
63
|
+
<a id="anchor-advanced-form-elements"></a>
|
|
64
|
+
<h2 class="headline-demopage">Advanced Form Elements</h2>
|
|
65
|
+
<h3>Form elements status:</h3>
|
|
66
|
+
<div class="flex-container">
|
|
67
|
+
<ul class="list-status">
|
|
68
|
+
<li><a href="#" @click.prevent="setStatus('', false)" :class="{'active' : validationStatus === '' && disabledStatus === false}"
|
|
69
|
+
id="status-default">Default</a></li>
|
|
70
|
+
<li class="error">
|
|
71
|
+
<a href="#" @click.prevent="setStatus('error', false)"
|
|
72
|
+
:class="{'active' : validationStatus === 'error'}" id="status-error">Error</a></li>
|
|
73
|
+
<li><a href="#" @click.prevent="setStatus('warning', false)"
|
|
74
|
+
:class="{'active' : validationStatus === 'warning'}" id="status-warning">Warning</a></li>
|
|
75
|
+
<li><a href="#" @click.prevent="setStatus('success', false)"
|
|
76
|
+
:class="{'active' : validationStatus === 'success'}" id="status-success">Success</a></li>
|
|
77
|
+
<li><a href="#" @click.prevent="setStatus('info', false)"
|
|
78
|
+
:class="{'active' : validationStatus === 'info'}" id="status-info">Info</a></li>
|
|
79
|
+
<li><a href="#" @click.prevent="setStatus('', true)"
|
|
80
|
+
:class="{'active' : disabledStatus === true}" id="status-disabled">Disabled</a></li>
|
|
81
|
+
</ul>
|
|
82
|
+
</div>
|
|
82
83
|
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
84
|
+
<!-- begin cmd-form-filters -->
|
|
85
|
+
<CmdFormFilters v-model="fakeSelectFilters" :selectedOptionsName="getOptionName"/>
|
|
86
|
+
<!-- end cmd-form-filters -->
|
|
86
87
|
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
88
|
+
<CmdForm :use-fieldset="false" id="advanced-form-elements" novalidate="novalidate">
|
|
89
|
+
<fieldset class="grid-container-create-columns">
|
|
90
|
+
<legend>Legend</legend>
|
|
91
|
+
<h2>Form Element-Component</h2>
|
|
92
|
+
<div class="flex-container">
|
|
93
|
+
<CmdFormElement labelText="Input (type text):"
|
|
94
|
+
element="input"
|
|
95
|
+
type="text"
|
|
96
|
+
:status="validationStatus"
|
|
97
|
+
:disabled="disabledStatus"
|
|
98
|
+
placeholder="Type in text"
|
|
99
|
+
tooltipText="This is a tooltip"
|
|
100
|
+
v-bind="{useCustomTooltip: false}"
|
|
101
|
+
/>
|
|
102
|
+
<CmdFormElement labelText="Input for selectbox:"
|
|
103
|
+
element="select"
|
|
104
|
+
required="required"
|
|
105
|
+
:status="validationStatus"
|
|
106
|
+
:disabled="disabledStatus"
|
|
107
|
+
v-model="selectedOption"
|
|
108
|
+
:selectOptions="selectOptionsData"
|
|
109
|
+
/>
|
|
110
|
+
<CmdFormElement labelText="Input for datalist:"
|
|
111
|
+
element="input"
|
|
112
|
+
type="text"
|
|
113
|
+
:status="validationStatus"
|
|
114
|
+
:disabled="disabledStatus"
|
|
115
|
+
placeholder="Type in option"
|
|
116
|
+
:datalist="datalist"
|
|
117
|
+
tooltipText="This is a tooltip"
|
|
118
|
+
/>
|
|
119
|
+
</div>
|
|
120
|
+
<CmdFormElement labelText="Input (type search (without search-button)):"
|
|
93
121
|
element="input"
|
|
94
|
-
type="
|
|
122
|
+
type="search"
|
|
95
123
|
:status="validationStatus"
|
|
96
124
|
:disabled="disabledStatus"
|
|
97
|
-
|
|
125
|
+
:showSearchButton="false"
|
|
126
|
+
placeholder="Search"
|
|
98
127
|
tooltipText="This is a tooltip"
|
|
99
128
|
v-bind="{useCustomTooltip: false}"
|
|
100
129
|
/>
|
|
101
|
-
<CmdFormElement labelText="Input
|
|
102
|
-
element="select"
|
|
103
|
-
required="required"
|
|
104
|
-
:status="validationStatus"
|
|
105
|
-
:disabled="disabledStatus"
|
|
106
|
-
v-model="selectedOption"
|
|
107
|
-
:selectOptions="selectOptionsData"
|
|
108
|
-
/>
|
|
109
|
-
<CmdFormElement labelText="Input for datalist:"
|
|
130
|
+
<CmdFormElement labelText="Input (type search (with search-button)):"
|
|
110
131
|
element="input"
|
|
111
|
-
type="
|
|
132
|
+
type="search"
|
|
112
133
|
:status="validationStatus"
|
|
113
134
|
:disabled="disabledStatus"
|
|
114
|
-
placeholder="
|
|
115
|
-
:datalist="datalist"
|
|
135
|
+
placeholder="Search"
|
|
116
136
|
tooltipText="This is a tooltip"
|
|
137
|
+
v-bind="{useCustomTooltip: false}"
|
|
117
138
|
/>
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
139
|
+
<h2>Inputfields in Columns</h2>
|
|
140
|
+
<div class="flex-container">
|
|
141
|
+
<CmdFormElement element="input"
|
|
142
|
+
type="text"
|
|
143
|
+
minlength="5"
|
|
144
|
+
id="inputfield1"
|
|
145
|
+
placeholder="This is placeholder text"
|
|
146
|
+
v-model="inputField1"
|
|
147
|
+
tooltipText="This is a tooltip!"
|
|
148
|
+
:status="validationStatus"
|
|
149
|
+
:disabled="disabledStatus">
|
|
150
|
+
<template v-slot:labeltext>
|
|
151
|
+
<span v-html="'Label with <a href=\'#\'>Link</a> given by slot'"></span>
|
|
152
|
+
</template>
|
|
153
|
+
</CmdFormElement>
|
|
154
|
+
<CmdFormElement element="input"
|
|
155
|
+
labelText="Label for inputfield (required, with tooltip):"
|
|
156
|
+
type="text"
|
|
157
|
+
required="required"
|
|
158
|
+
minlength="5"
|
|
159
|
+
id="inputfield-required"
|
|
160
|
+
placeholder="This is placeholder text"
|
|
161
|
+
v-model="inputFieldRequired"
|
|
162
|
+
tooltipText="This is a tooltip!"
|
|
163
|
+
:status="validationStatus"
|
|
164
|
+
:disabled="disabledStatus"
|
|
165
|
+
/>
|
|
166
|
+
<CmdFormElement element="input"
|
|
167
|
+
labelText="Label for inputfield (with pattern):"
|
|
168
|
+
type="text"
|
|
169
|
+
id="inputfield-pattern"
|
|
170
|
+
placeholder="This is placeholder text"
|
|
171
|
+
pattern="/\d/"
|
|
172
|
+
v-model="inputFieldPattern"
|
|
173
|
+
tooltipText="This is a tooltip!"
|
|
174
|
+
:status="validationStatus"
|
|
175
|
+
:disabled="disabledStatus"
|
|
176
|
+
/>
|
|
177
|
+
</div>
|
|
178
|
+
<!-- begin inputfield in two columns -->
|
|
179
|
+
<div class="flex-container">
|
|
180
|
+
<CmdFormElement labelText="Label for inputfield (with icon):"
|
|
181
|
+
element="input"
|
|
182
|
+
type="text"
|
|
183
|
+
id="inputfield-username"
|
|
184
|
+
fieldIconClass="icon-user-profile"
|
|
185
|
+
placeholder="Type in username"
|
|
186
|
+
tooltipText="This is a tooltip!"
|
|
187
|
+
maxlength="100"
|
|
188
|
+
v-model="inputUsername"
|
|
189
|
+
:status="validationStatus"
|
|
190
|
+
:disabled="disabledStatus"
|
|
191
|
+
/>
|
|
192
|
+
<CmdFormElement element="input"
|
|
193
|
+
labelText="Label for passwordfield:"
|
|
194
|
+
type="password"
|
|
195
|
+
minlength="8"
|
|
196
|
+
maxlength="255"
|
|
197
|
+
id="inputfield-password"
|
|
198
|
+
fieldIconClass="icon-security-settings"
|
|
199
|
+
placeholder="Type in password"
|
|
200
|
+
tooltipText="This is a tooltip!"
|
|
201
|
+
:customRequirements="customRequirements"
|
|
202
|
+
v-model="inputPassword"
|
|
203
|
+
:status="validationStatus"
|
|
204
|
+
:disabled="disabledStatus"
|
|
205
|
+
/>
|
|
206
|
+
</div>
|
|
207
|
+
<!-- end inputfield in two columns -->
|
|
208
|
+
|
|
153
209
|
<CmdFormElement element="input"
|
|
154
|
-
labelText="Label for inputfield (
|
|
155
|
-
|
|
210
|
+
labelText="Label (inline) for inputfield (number):"
|
|
211
|
+
:displayLabelInline="true"
|
|
212
|
+
type="number"
|
|
213
|
+
id="inputfield-number"
|
|
156
214
|
required="required"
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
tooltipText="This is a tooltip!"
|
|
215
|
+
min="0"
|
|
216
|
+
max="9"
|
|
217
|
+
v-model="inputNumber"
|
|
218
|
+
:customRequirements="[customRequirements[2]]"
|
|
162
219
|
:status="validationStatus"
|
|
163
220
|
:disabled="disabledStatus"
|
|
164
221
|
/>
|
|
165
222
|
<CmdFormElement element="input"
|
|
166
|
-
labelText="Label for inputfield (
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
v-model="inputFieldPattern"
|
|
172
|
-
tooltipText="This is a tooltip!"
|
|
223
|
+
labelText="Label (inline) for inputfield (date):"
|
|
224
|
+
:displayLabelInline="true"
|
|
225
|
+
type="date"
|
|
226
|
+
id="inputfield-date"
|
|
227
|
+
v-model="inputDate"
|
|
173
228
|
:status="validationStatus"
|
|
174
229
|
:disabled="disabledStatus"
|
|
175
230
|
/>
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
placeholder="Type in username"
|
|
185
|
-
tooltipText="This is a tooltip!"
|
|
186
|
-
maxlength="100"
|
|
187
|
-
v-model="inputUsername"
|
|
231
|
+
<CmdFormElement element="input"
|
|
232
|
+
labelText="Label (inline) for inputfield (search) without search-button:"
|
|
233
|
+
:displayLabelInline="true"
|
|
234
|
+
type="search"
|
|
235
|
+
id="inputfield-search-without-searchbutton"
|
|
236
|
+
placeholder="Keyword(s)"
|
|
237
|
+
v-model="inputSearch"
|
|
238
|
+
:showSearchButton="false"
|
|
188
239
|
:status="validationStatus"
|
|
189
240
|
:disabled="disabledStatus"
|
|
190
241
|
/>
|
|
191
242
|
<CmdFormElement element="input"
|
|
192
|
-
labelText="Label for
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
placeholder="Type in password"
|
|
199
|
-
tooltipText="This is a tooltip!"
|
|
200
|
-
:customRequirements="customRequirements"
|
|
201
|
-
v-model="inputPassword"
|
|
243
|
+
labelText="Label (inline) for inputfield (search):"
|
|
244
|
+
:displayLabelInline="true"
|
|
245
|
+
type="search"
|
|
246
|
+
id="inputfield-search-with-searchbutton"
|
|
247
|
+
placeholder="Keyword(s)"
|
|
248
|
+
v-model="inputSearch"
|
|
202
249
|
:status="validationStatus"
|
|
203
250
|
:disabled="disabledStatus"
|
|
204
251
|
/>
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
min="0"
|
|
215
|
-
max="9"
|
|
216
|
-
v-model="inputNumber"
|
|
217
|
-
:customRequirements="[customRequirements[2]]"
|
|
218
|
-
:status="validationStatus"
|
|
219
|
-
:disabled="disabledStatus"
|
|
220
|
-
/>
|
|
221
|
-
<CmdFormElement element="input"
|
|
222
|
-
labelText="Label (inline) for inputfield (date):"
|
|
223
|
-
:displayLabelInline="true"
|
|
224
|
-
type="date"
|
|
225
|
-
id="inputfield-date"
|
|
226
|
-
v-model="inputDate"
|
|
227
|
-
:status="validationStatus"
|
|
228
|
-
:disabled="disabledStatus"
|
|
229
|
-
/>
|
|
230
|
-
<CmdFormElement element="input"
|
|
231
|
-
labelText="Label (inline) for inputfield (search) without search-button:"
|
|
232
|
-
:displayLabelInline="true"
|
|
233
|
-
type="search"
|
|
234
|
-
id="inputfield-search-without-searchbutton"
|
|
235
|
-
placeholder="Keyword(s)"
|
|
236
|
-
v-model="inputSearch"
|
|
237
|
-
:showSearchButton="false"
|
|
238
|
-
:status="validationStatus"
|
|
239
|
-
:disabled="disabledStatus"
|
|
240
|
-
/>
|
|
241
|
-
<CmdFormElement element="input"
|
|
242
|
-
labelText="Label (inline) for inputfield (search):"
|
|
243
|
-
:displayLabelInline="true"
|
|
244
|
-
type="search"
|
|
245
|
-
id="inputfield-search-with-searchbutton"
|
|
246
|
-
placeholder="Keyword(s)"
|
|
247
|
-
v-model="inputSearch"
|
|
248
|
-
:status="validationStatus"
|
|
249
|
-
:disabled="disabledStatus"
|
|
250
|
-
/>
|
|
251
|
-
<CmdFormElement element="textarea"
|
|
252
|
-
labelText="Label for textarea:"
|
|
253
|
-
id="textarea"
|
|
254
|
-
minlength="1"
|
|
255
|
-
maxlength="100"
|
|
256
|
-
placeholder="Type in your message"
|
|
257
|
-
v-model="textarea"
|
|
258
|
-
:status="validationStatus"
|
|
259
|
-
:disabled="disabledStatus"
|
|
260
|
-
/>
|
|
261
|
-
<hr/>
|
|
262
|
-
<h2>Fake Selects</h2>
|
|
263
|
-
<div class="flex-container">
|
|
264
|
-
<!-- type === default: normal selectbox (with optional icons) -->
|
|
265
|
-
<CmdFakeSelect labelText="Default selectbox:"
|
|
266
|
-
:status="validationStatus"
|
|
267
|
-
:disabled="disabledStatus"
|
|
268
|
-
:selectData="fakeSelectOptionsData"
|
|
269
|
-
v-model="fakeSelectDefault"
|
|
270
|
-
:required="true"
|
|
271
|
-
defaultOptionName="Select an option:"
|
|
272
|
-
title="Title for FakeSelect"
|
|
273
|
-
/>
|
|
274
|
-
<CmdFakeSelect labelText="Default selectbox with icons:"
|
|
275
|
-
:status="validationStatus"
|
|
276
|
-
:disabled="disabledStatus"
|
|
277
|
-
:selectData="fakeSelectOptionsWithIconsData"
|
|
278
|
-
v-model="fakeSelectDefaultWithIcons"
|
|
279
|
-
defaultOptionName="Select an option:"
|
|
280
|
-
/>
|
|
281
|
-
<!-- type === checkboxOptions: selectbox with checkboxes for each option -->
|
|
282
|
-
<CmdFakeSelect labelText="Selectbox with checkboxes:"
|
|
283
|
-
:status="validationStatus"
|
|
284
|
-
:disabled="disabledStatus"
|
|
285
|
-
:selectData="fakeSelectOptionsData"
|
|
286
|
-
v-model="fakeSelectCheckbox"
|
|
287
|
-
defaultOptionName="Options:"
|
|
288
|
-
:required="true"
|
|
289
|
-
id="selectbox-with-checkboxes"
|
|
290
|
-
type="checkboxOptions"
|
|
291
|
-
:useCustomTooltip="true"
|
|
292
|
-
/>
|
|
293
|
-
<CmdFakeSelect labelText="Selectbox with filters:"
|
|
294
|
-
:status="validationStatus"
|
|
295
|
-
:disabled="disabledStatus"
|
|
296
|
-
:selectData="fakeSelectFilterOptionsData"
|
|
297
|
-
v-model="fakeSelectFilters"
|
|
298
|
-
defaultOptionName="Filters:"
|
|
299
|
-
id="selectbox-with-filters"
|
|
300
|
-
type="checkboxOptions"
|
|
301
|
-
:useCustomTooltip="true"
|
|
302
|
-
/>
|
|
303
|
-
<CmdFakeSelect labelText="Selectbox with slot-content:"
|
|
304
|
-
:status="validationStatus"
|
|
305
|
-
:disabled="disabledStatus"
|
|
306
|
-
type="content"
|
|
307
|
-
defaultOptionName="HTML-Content:">
|
|
308
|
-
<ul class="custom-fake-select-content">
|
|
309
|
-
<li>
|
|
310
|
-
<div>
|
|
311
|
-
<h3>Headline</h3>
|
|
312
|
-
<p>Some content inside a paragraph</p>
|
|
313
|
-
</div>
|
|
314
|
-
<img src="media/images/thumbnail-scroller/thumbnail/logo-cmd-blue-landscape.jpg" alt="image"/>
|
|
315
|
-
</li>
|
|
316
|
-
</ul>
|
|
317
|
-
</CmdFakeSelect>
|
|
318
|
-
<CmdFakeSelect labelText="Selectbox with country flags:"
|
|
319
|
-
:status="validationStatus"
|
|
320
|
-
:disabled="disabledStatus"
|
|
321
|
-
:selectData="fakeSelectCountriesData"
|
|
322
|
-
v-model="selectedCountry"
|
|
323
|
-
defaultOptionName="Select country:"
|
|
324
|
-
type="country"
|
|
325
|
-
/>
|
|
326
|
-
<CmdFakeSelect labelText="Selectbox with colors:"
|
|
327
|
-
:status="validationStatus"
|
|
328
|
-
:disabled="disabledStatus"
|
|
329
|
-
:selectData="fakeSelectColorsData"
|
|
330
|
-
v-model="selectedColor"
|
|
331
|
-
required="required"
|
|
332
|
-
type="color"
|
|
252
|
+
<CmdFormElement element="textarea"
|
|
253
|
+
labelText="Label for textarea:"
|
|
254
|
+
id="textarea"
|
|
255
|
+
minlength="1"
|
|
256
|
+
maxlength="100"
|
|
257
|
+
placeholder="Type in your message"
|
|
258
|
+
v-model="textarea"
|
|
259
|
+
:status="validationStatus"
|
|
260
|
+
:disabled="disabledStatus"
|
|
333
261
|
/>
|
|
334
|
-
|
|
262
|
+
<hr/>
|
|
263
|
+
<h2>Fake Selects</h2>
|
|
264
|
+
<div class="flex-container">
|
|
265
|
+
<!-- type === default: normal selectbox (with optional icons) -->
|
|
266
|
+
<CmdFakeSelect labelText="Default selectbox:"
|
|
267
|
+
:status="validationStatus"
|
|
268
|
+
:disabled="disabledStatus"
|
|
269
|
+
:selectData="fakeSelectOptionsData"
|
|
270
|
+
v-model="fakeSelectDefault"
|
|
271
|
+
:required="true"
|
|
272
|
+
defaultOptionName="Select an option:"
|
|
273
|
+
title="Title for FakeSelect"
|
|
274
|
+
/>
|
|
275
|
+
<CmdFakeSelect labelText="Default selectbox with icons:"
|
|
276
|
+
:status="validationStatus"
|
|
277
|
+
:disabled="disabledStatus"
|
|
278
|
+
:selectData="fakeSelectOptionsWithIconsData"
|
|
279
|
+
v-model="fakeSelectDefaultWithIcons"
|
|
280
|
+
defaultOptionName="Select an option:"
|
|
281
|
+
/>
|
|
282
|
+
<!-- type === checkboxOptions: selectbox with checkboxes for each option -->
|
|
283
|
+
<CmdFakeSelect labelText="Selectbox with checkboxes:"
|
|
284
|
+
:status="validationStatus"
|
|
285
|
+
:disabled="disabledStatus"
|
|
286
|
+
:selectData="fakeSelectOptionsData"
|
|
287
|
+
v-model="fakeSelectCheckbox"
|
|
288
|
+
defaultOptionName="Options:"
|
|
289
|
+
:required="true"
|
|
290
|
+
id="selectbox-with-checkboxes"
|
|
291
|
+
type="checkboxOptions"
|
|
292
|
+
:useCustomTooltip="true"
|
|
293
|
+
/>
|
|
294
|
+
<CmdFakeSelect labelText="Selectbox with filters:"
|
|
295
|
+
:status="validationStatus"
|
|
296
|
+
:disabled="disabledStatus"
|
|
297
|
+
:selectData="fakeSelectFilterOptionsData"
|
|
298
|
+
v-model="fakeSelectFilters"
|
|
299
|
+
defaultOptionName="Filters:"
|
|
300
|
+
id="selectbox-with-filters"
|
|
301
|
+
type="checkboxOptions"
|
|
302
|
+
:useCustomTooltip="true"
|
|
303
|
+
/>
|
|
304
|
+
<CmdFakeSelect labelText="Selectbox with slot-content:"
|
|
305
|
+
:status="validationStatus"
|
|
306
|
+
:disabled="disabledStatus"
|
|
307
|
+
type="content"
|
|
308
|
+
defaultOptionName="HTML-Content:">
|
|
309
|
+
<ul class="custom-fake-select-content">
|
|
310
|
+
<li>
|
|
311
|
+
<div>
|
|
312
|
+
<h3>Headline</h3>
|
|
313
|
+
<p>Some content inside a paragraph</p>
|
|
314
|
+
</div>
|
|
315
|
+
<img src="media/images/thumbnail-scroller/thumbnail/logo-cmd-blue-landscape.jpg" alt="image"/>
|
|
316
|
+
</li>
|
|
317
|
+
</ul>
|
|
318
|
+
</CmdFakeSelect>
|
|
319
|
+
<CmdFakeSelect labelText="Selectbox with country flags:"
|
|
320
|
+
:status="validationStatus"
|
|
321
|
+
:disabled="disabledStatus"
|
|
322
|
+
:selectData="fakeSelectCountriesData"
|
|
323
|
+
v-model="selectedCountry"
|
|
324
|
+
defaultOptionName="Select country:"
|
|
325
|
+
type="country"
|
|
326
|
+
/>
|
|
327
|
+
<CmdFakeSelect labelText="Selectbox with colors:"
|
|
328
|
+
:status="validationStatus"
|
|
329
|
+
:disabled="disabledStatus"
|
|
330
|
+
:selectData="fakeSelectColorsData"
|
|
331
|
+
v-model="selectedColor"
|
|
332
|
+
required="required"
|
|
333
|
+
type="color"
|
|
334
|
+
/>
|
|
335
|
+
</div>
|
|
335
336
|
|
|
336
|
-
|
|
337
|
+
<hr/>
|
|
337
338
|
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
339
|
+
<!-- begin progress bar -->
|
|
340
|
+
<h2>Progress Bar [native]</h2>
|
|
341
|
+
<CmdProgressBar labelText="Progress Bar (with optional output):" id="progress-bar2" max="100"/>
|
|
342
|
+
<!-- end progress bar -->
|
|
342
343
|
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
344
|
+
<!-- begin slider -->
|
|
345
|
+
<h2>Slider [native]</h2>
|
|
346
|
+
<div class="label" :class="validationStatus">
|
|
347
|
+
<span class="label-text">Single-Slider (with in- and output):</span>
|
|
348
|
+
<span class="flex-container no-flex">
|
|
348
349
|
<label for="range-value">
|
|
349
350
|
<span class="label-text">
|
|
350
351
|
<span>Range Value</span>
|
|
@@ -374,810 +375,811 @@
|
|
|
374
375
|
/>
|
|
375
376
|
</label>
|
|
376
377
|
</span>
|
|
377
|
-
|
|
378
|
-
|
|
378
|
+
</div>
|
|
379
|
+
<!-- end slider -->
|
|
379
380
|
|
|
380
|
-
|
|
381
|
+
<hr/>
|
|
381
382
|
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
383
|
+
<!-- begin toggle-switch-radio with switch-label (colored) -->
|
|
384
|
+
<h2>Toggle-Switches</h2>
|
|
385
|
+
<CmdFormElement element="input"
|
|
386
|
+
type="checkbox"
|
|
387
|
+
id="toggle-switch-checkbox"
|
|
388
|
+
v-model="switchButtonCheckboxToggleSwitch"
|
|
389
|
+
labelText="Labeltext for Toggle-Switch without Switch-Label"
|
|
390
|
+
:toggleSwitch="true"
|
|
391
|
+
:status="validationStatus"
|
|
392
|
+
:disabled="disabledStatus"
|
|
393
|
+
/>
|
|
394
|
+
<CmdFormElement element="input"
|
|
395
|
+
type="checkbox"
|
|
396
|
+
id="toggle-switch-checkbox"
|
|
397
|
+
v-model="switchButtonCheckbox"
|
|
398
|
+
labelText="Labeltext for Toggle-Switch with Switch-Label"
|
|
399
|
+
inputValue="checkbox1"
|
|
400
|
+
onLabel="Label on"
|
|
401
|
+
offLabel="Label off"
|
|
402
|
+
:toggleSwitch="true"
|
|
403
|
+
:status="validationStatus"
|
|
404
|
+
:disabled="disabledStatus"
|
|
405
|
+
/>
|
|
406
|
+
<CmdFormElement element="input"
|
|
407
|
+
type="checkbox"
|
|
408
|
+
id="toggle-switch-checkbox-colored"
|
|
409
|
+
v-model="switchButtonCheckbox"
|
|
410
|
+
inputValue="checkbox2"
|
|
411
|
+
labelText="Labeltext for Toggle-Switch (Checkbox, colored)"
|
|
412
|
+
onLabel="Label on"
|
|
413
|
+
offLabel="Label off"
|
|
414
|
+
:colored="true"
|
|
415
|
+
:toggleSwitch="true"
|
|
416
|
+
:status="validationStatus"
|
|
417
|
+
:disabled="disabledStatus"
|
|
418
|
+
/>
|
|
419
|
+
<CmdFormElement element="input"
|
|
420
|
+
type="radio"
|
|
421
|
+
name="radiogroup"
|
|
422
|
+
id="toggle-switch-radio1"
|
|
423
|
+
v-model="switchButtonRadio"
|
|
424
|
+
onLabel="Label on"
|
|
425
|
+
offLabel="Label off"
|
|
426
|
+
:colored="true"
|
|
427
|
+
:toggleSwitch="true"
|
|
428
|
+
:status="validationStatus"
|
|
429
|
+
:disabled="disabledStatus"
|
|
430
|
+
inputValue="radio1"
|
|
431
|
+
labelText="Labeltext for Toggle-Switch (Radio, colored) #1"
|
|
432
|
+
/>
|
|
433
|
+
<CmdFormElement element="input"
|
|
434
|
+
type="radio"
|
|
435
|
+
name="radiogroup"
|
|
436
|
+
id="toggle-switch-radio2"
|
|
437
|
+
v-model="switchButtonRadio"
|
|
438
|
+
onLabel="Label on"
|
|
439
|
+
offLabel="Label off"
|
|
440
|
+
:colored="true"
|
|
441
|
+
:toggleSwitch="true"
|
|
442
|
+
:status="validationStatus"
|
|
443
|
+
:disabled="disabledStatus"
|
|
444
|
+
inputValue="radio2"
|
|
445
|
+
labelText="Labeltext for Toggle-Switch (Radio, colored) #2"
|
|
446
|
+
/>
|
|
447
|
+
<!-- end toggle-switch-radio with switch-label (colored) -->
|
|
447
448
|
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
449
|
+
<!-- begin checkboxes and radiobuttons -->
|
|
450
|
+
<CmdFormElement element="input"
|
|
451
|
+
labelText="Label for (required) checkbox with boolean"
|
|
452
|
+
type="checkbox"
|
|
453
|
+
required="required"
|
|
454
|
+
id="checkbox-required-with-boolean"
|
|
455
|
+
v-model="checkboxRequiredValue"
|
|
456
|
+
:status="validationStatus"
|
|
457
|
+
:disabled="disabledStatus"
|
|
458
|
+
/>
|
|
459
|
+
<p>
|
|
460
|
+
checkbox (required) with boolean: {{ checkboxRequiredValue }}<br/>
|
|
461
|
+
checkbox with boolean: {{ checkboxValue }}<br/>
|
|
462
|
+
checkboxes with values: {{ checkboxValues }}
|
|
463
|
+
</p>
|
|
463
464
|
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
|
|
465
|
+
<h3>Toggle Dark-Mode</h3>
|
|
466
|
+
<a id="section-toggle-darkmode"></a>
|
|
467
|
+
<h4>Toggle Dark-Mode (with label, not styled)</h4>
|
|
468
|
+
<CmdToggleDarkMode :showLabel="true"/>
|
|
469
|
+
<h4>Toggle Dark-Mode (without label, styled)</h4>
|
|
470
|
+
<CmdToggleDarkMode :showLabel="false" :use-styled-layout="true"/>
|
|
470
471
|
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
|
|
490
|
-
|
|
491
|
-
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
|
|
495
|
-
|
|
496
|
-
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
|
|
511
|
-
|
|
512
|
-
|
|
472
|
+
<h2>Checkboxes and Radiobuttons</h2>
|
|
473
|
+
<h3>Checkboxes [native]</h3>
|
|
474
|
+
<div class="label inline">
|
|
475
|
+
<span class="label-text">Label for native checkboxes:</span>
|
|
476
|
+
<div class="flex-container no-flex">
|
|
477
|
+
<CmdFormElement element="input"
|
|
478
|
+
labelText="Label for checkbox with boolean"
|
|
479
|
+
type="checkbox"
|
|
480
|
+
id="checkbox-with-boolean"
|
|
481
|
+
v-model="checkboxValue"
|
|
482
|
+
:status="validationStatus"
|
|
483
|
+
:disabled="disabledStatus"
|
|
484
|
+
/>
|
|
485
|
+
<CmdFormElement element="input"
|
|
486
|
+
labelText="Label for checkbox with value"
|
|
487
|
+
v-model="checkboxValues"
|
|
488
|
+
inputValue="checkboxValue1"
|
|
489
|
+
type="checkbox"
|
|
490
|
+
id="checkbox-with-value-1"
|
|
491
|
+
:status="validationStatus"
|
|
492
|
+
:disabled="disabledStatus"
|
|
493
|
+
/>
|
|
494
|
+
<CmdFormElement element="input"
|
|
495
|
+
labelText="Label for checkbox with value"
|
|
496
|
+
v-model="checkboxValues"
|
|
497
|
+
inputValue="checkboxValue2"
|
|
498
|
+
type="checkbox"
|
|
499
|
+
id="checkbox-with-value-2"
|
|
500
|
+
:status="validationStatus"
|
|
501
|
+
:disabled="disabledStatus"
|
|
502
|
+
/>
|
|
503
|
+
<CmdFormElement element="input"
|
|
504
|
+
v-model="checkboxValues"
|
|
505
|
+
inputValue="checkboxValue3"
|
|
506
|
+
type="checkbox"
|
|
507
|
+
id="checkbox-with-value-3"
|
|
508
|
+
:status="validationStatus"
|
|
509
|
+
:disabled="disabledStatus">
|
|
510
|
+
<template v-slot:labeltext>
|
|
511
|
+
Labeltext with <a href="#">link</a> given by slot
|
|
512
|
+
</template>
|
|
513
|
+
</CmdFormElement>
|
|
514
|
+
</div>
|
|
513
515
|
</div>
|
|
514
|
-
|
|
515
|
-
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
|
|
523
|
-
|
|
524
|
-
|
|
525
|
-
|
|
526
|
-
|
|
527
|
-
|
|
528
|
-
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
|
|
532
|
-
|
|
533
|
-
|
|
534
|
-
|
|
535
|
-
|
|
536
|
-
|
|
537
|
-
|
|
538
|
-
|
|
516
|
+
<h3>Checkboxes (replaced)</h3>
|
|
517
|
+
<div class="label inline">
|
|
518
|
+
<span class="label-text">Label for Replaced Input-Type-Checkbox:</span>
|
|
519
|
+
<div class="flex-container no-flex">
|
|
520
|
+
<CmdFormElement element="input"
|
|
521
|
+
labelText="Label for replaced checkbox"
|
|
522
|
+
type="checkbox"
|
|
523
|
+
:replaceInputType="true"
|
|
524
|
+
id="inputfield9"
|
|
525
|
+
v-model="replacedCheckboxValue"
|
|
526
|
+
inputValue="checkboxValue1"
|
|
527
|
+
:status="validationStatus"
|
|
528
|
+
:disabled="disabledStatus"
|
|
529
|
+
/>
|
|
530
|
+
<CmdFormElement element="input"
|
|
531
|
+
labelText="Label for replaced checkbox"
|
|
532
|
+
v-model="replacedCheckboxValue"
|
|
533
|
+
inputValue="checkboxValue2"
|
|
534
|
+
type="checkbox"
|
|
535
|
+
:replaceInputType="true"
|
|
536
|
+
id="inputfield10"
|
|
537
|
+
:status="validationStatus"
|
|
538
|
+
:disabled="disabledStatus"
|
|
539
|
+
/>
|
|
540
|
+
</div>
|
|
539
541
|
</div>
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
|
|
543
|
-
|
|
544
|
-
|
|
545
|
-
|
|
546
|
-
|
|
547
|
-
|
|
548
|
-
|
|
549
|
-
|
|
550
|
-
|
|
551
|
-
|
|
552
|
-
|
|
553
|
-
|
|
554
|
-
|
|
555
|
-
|
|
556
|
-
|
|
557
|
-
|
|
558
|
-
|
|
559
|
-
|
|
560
|
-
|
|
561
|
-
|
|
562
|
-
|
|
563
|
-
|
|
564
|
-
|
|
542
|
+
<h3>Radiobuttons [native]</h3>
|
|
543
|
+
<div class="label inline">
|
|
544
|
+
<span class="label-text">Label for native radiobuttons:</span>
|
|
545
|
+
<div class="flex-container no-flex">
|
|
546
|
+
<CmdFormElement element="input"
|
|
547
|
+
labelText="Label for native radiobutton"
|
|
548
|
+
type="radio"
|
|
549
|
+
id="inputfield11"
|
|
550
|
+
name="radiogroup"
|
|
551
|
+
inputValue="radiobuttonValue1"
|
|
552
|
+
v-model="radiobuttonValue"
|
|
553
|
+
:status="validationStatus"
|
|
554
|
+
:disabled="disabledStatus"
|
|
555
|
+
/>
|
|
556
|
+
<CmdFormElement element="input"
|
|
557
|
+
labelText="Label for native radiobutton"
|
|
558
|
+
type="radio"
|
|
559
|
+
id="inputfield12"
|
|
560
|
+
name="radiogroup"
|
|
561
|
+
inputValue="radiobuttonValue2"
|
|
562
|
+
v-model="radiobuttonValue"
|
|
563
|
+
:status="validationStatus"
|
|
564
|
+
:disabled="disabledStatus"
|
|
565
|
+
/>
|
|
566
|
+
</div>
|
|
565
567
|
</div>
|
|
566
|
-
|
|
567
|
-
|
|
568
|
-
|
|
569
|
-
|
|
570
|
-
|
|
571
|
-
|
|
572
|
-
|
|
573
|
-
|
|
568
|
+
<p>
|
|
569
|
+
Radiobuttons with values: {{ radiobuttonValue }}
|
|
570
|
+
</p>
|
|
571
|
+
<h3>Radiobuttons (replaced)</h3>
|
|
572
|
+
<div class="label inline">
|
|
573
|
+
<span class="label-text">Label for Replaced Input-Type-Radio:</span>
|
|
574
|
+
<div class="flex-container no-flex">
|
|
575
|
+
<CmdFormElement element="input"
|
|
576
|
+
labelText="Label for replaced radiobutton"
|
|
577
|
+
type="radio"
|
|
578
|
+
:replaceInputType="true"
|
|
579
|
+
id="inputfield13"
|
|
580
|
+
name="replaced-radiogroup"
|
|
581
|
+
inputValue="radiobuttonValue1"
|
|
582
|
+
v-model="replacedRadiobuttonValue"
|
|
583
|
+
:status="validationStatus"
|
|
584
|
+
:disabled="disabledStatus"
|
|
585
|
+
/>
|
|
586
|
+
<CmdFormElement element="input"
|
|
587
|
+
labelText="Label for replaced radiobutton"
|
|
588
|
+
type="radio"
|
|
589
|
+
:replaceInputType="true"
|
|
590
|
+
id="inputfield14"
|
|
591
|
+
name="replaced-radiogroup"
|
|
592
|
+
inputValue="radiobuttonValue2"
|
|
593
|
+
v-model="replacedRadiobuttonValue"
|
|
594
|
+
:status="validationStatus"
|
|
595
|
+
:disabled="disabledStatus"
|
|
596
|
+
/>
|
|
597
|
+
</div>
|
|
598
|
+
</div>
|
|
599
|
+
<!-- end checkboxes and radiobuttons -->
|
|
600
|
+
|
|
601
|
+
<!-- begin input-groups -->
|
|
602
|
+
<h2>Input-Groups</h2>
|
|
603
|
+
<h3>Input Group with Radiobuttons [native]</h3>
|
|
604
|
+
<CmdInputGroup
|
|
605
|
+
labelText="Group label for radio-group given by slot:"
|
|
606
|
+
:useSlot="true"
|
|
607
|
+
:status="validationStatus"
|
|
608
|
+
:disabled="disabledStatus"
|
|
609
|
+
>
|
|
574
610
|
<CmdFormElement element="input"
|
|
575
|
-
labelText="Label for
|
|
611
|
+
labelText="Label for radiobutton"
|
|
576
612
|
type="radio"
|
|
577
|
-
|
|
578
|
-
|
|
579
|
-
name="replaced-radiogroup"
|
|
613
|
+
id="input-group-radiobutton"
|
|
614
|
+
name="radiogroup2"
|
|
580
615
|
inputValue="radiobuttonValue1"
|
|
581
|
-
v-model="
|
|
616
|
+
v-model="inputGroupRadio"
|
|
582
617
|
:status="validationStatus"
|
|
583
618
|
:disabled="disabledStatus"
|
|
584
619
|
/>
|
|
585
620
|
<CmdFormElement element="input"
|
|
586
|
-
labelText="Label for
|
|
621
|
+
labelText="Label for radiobutton"
|
|
587
622
|
type="radio"
|
|
588
|
-
|
|
589
|
-
|
|
590
|
-
name="replaced-radiogroup"
|
|
623
|
+
id="input-group-radiobutton"
|
|
624
|
+
name="radiogroup2"
|
|
591
625
|
inputValue="radiobuttonValue2"
|
|
592
|
-
v-model="
|
|
626
|
+
v-model="inputGroupRadio"
|
|
593
627
|
:status="validationStatus"
|
|
594
628
|
:disabled="disabledStatus"
|
|
595
629
|
/>
|
|
596
|
-
</
|
|
597
|
-
|
|
598
|
-
|
|
599
|
-
|
|
600
|
-
|
|
601
|
-
|
|
602
|
-
|
|
603
|
-
|
|
604
|
-
|
|
605
|
-
|
|
606
|
-
|
|
607
|
-
|
|
608
|
-
|
|
609
|
-
|
|
610
|
-
|
|
611
|
-
type="radio"
|
|
612
|
-
id="input-group-radiobutton"
|
|
613
|
-
name="radiogroup2"
|
|
614
|
-
inputValue="radiobuttonValue1"
|
|
615
|
-
v-model="inputGroupRadio"
|
|
616
|
-
:status="validationStatus"
|
|
617
|
-
:disabled="disabledStatus"
|
|
630
|
+
</CmdInputGroup>
|
|
631
|
+
<dl>
|
|
632
|
+
<dt>Selected value(s):</dt>
|
|
633
|
+
<dd>
|
|
634
|
+
<output>{{ inputGroupValue1 }}</output>
|
|
635
|
+
</dd>
|
|
636
|
+
</dl>
|
|
637
|
+
<CmdInputGroup
|
|
638
|
+
labelText="Grouplabel for radio-group given by property:"
|
|
639
|
+
:required="true"
|
|
640
|
+
:inputElements="inputGroupRadiobuttonsData"
|
|
641
|
+
inputTypes="radio"
|
|
642
|
+
v-model="inputGroupCheckbox"
|
|
643
|
+
:status="validationStatus"
|
|
644
|
+
:disabled="disabledStatus"
|
|
618
645
|
/>
|
|
619
|
-
<
|
|
620
|
-
|
|
621
|
-
|
|
622
|
-
|
|
623
|
-
|
|
624
|
-
|
|
625
|
-
|
|
626
|
-
|
|
646
|
+
<dl>
|
|
647
|
+
<dt>Selected value:</dt>
|
|
648
|
+
<dd>
|
|
649
|
+
<output>{{ inputGroupValue2 }}</output>
|
|
650
|
+
</dd>
|
|
651
|
+
</dl>
|
|
652
|
+
<h3>Input Group with Checkboxes/Radiobuttons (replaced)</h3>
|
|
653
|
+
<CmdInputGroup
|
|
654
|
+
labelText="Grouplabel for radio-group styled as replaced-input-type:"
|
|
655
|
+
:inputElements="inputGroupReplacedRadiobuttonsData"
|
|
656
|
+
inputTypes="radio"
|
|
657
|
+
v-model="inputGroupValueReplaceInputTypeRadio"
|
|
658
|
+
:replaceInputType="true"
|
|
659
|
+
:status="validationStatus"
|
|
660
|
+
:disabled="disabledStatus"
|
|
661
|
+
/>
|
|
662
|
+
<dl>
|
|
663
|
+
<dt>Selected value:</dt>
|
|
664
|
+
<dd>
|
|
665
|
+
<output>{{ inputGroupValueReplaceInputTypeRadio }}</output>
|
|
666
|
+
</dd>
|
|
667
|
+
</dl>
|
|
668
|
+
<CmdInputGroup
|
|
669
|
+
labelText="Grouplabel for checkbox-group styled as replaced-input-type:"
|
|
670
|
+
:inputElements="inputGroupReplacedRadiobuttonsData"
|
|
671
|
+
inputTypes="checkbox"
|
|
672
|
+
v-model="inputGroupValueReplaceInputTypeCheckbox"
|
|
673
|
+
:replaceInputType="true"
|
|
674
|
+
:required="true"
|
|
675
|
+
:status="validationStatus"
|
|
676
|
+
:disabled="disabledStatus"
|
|
677
|
+
/>
|
|
678
|
+
<dl>
|
|
679
|
+
<dt>Selected value(s):</dt>
|
|
680
|
+
<dd>
|
|
681
|
+
<output>{{ inputGroupValueReplaceInputTypeCheckbox }}</output>
|
|
682
|
+
</dd>
|
|
683
|
+
</dl>
|
|
684
|
+
<h3>Input Groups with Checkboxes/
|
|
685
|
+
Radiobuttons (toggle-switches)</h3>
|
|
686
|
+
<CmdInputGroup
|
|
687
|
+
labelText="Grouplabel for checkbox-group styled as toggle-switches:"
|
|
688
|
+
:inputElements="inputGroupRadiobuttonsData"
|
|
689
|
+
inputTypes="checkbox"
|
|
690
|
+
v-model="inputGroupValueToggleSwitchCheckbox"
|
|
691
|
+
:toggleSwitch="true"
|
|
692
|
+
required="required"
|
|
693
|
+
:status="validationStatus"
|
|
694
|
+
:disabled="disabledStatus"
|
|
695
|
+
/>
|
|
696
|
+
<dl>
|
|
697
|
+
<dt>Selected value(s):</dt>
|
|
698
|
+
<dd>
|
|
699
|
+
<output>{{ inputGroupValueToggleSwitchCheckbox }}</output>
|
|
700
|
+
</dd>
|
|
701
|
+
</dl>
|
|
702
|
+
<CmdInputGroup
|
|
703
|
+
labelText="Grouplabel for radio-group styled as toggle-switches:"
|
|
704
|
+
:inputElements="inputGroupToggleSwitchRadiobuttonsData"
|
|
705
|
+
inputTypes="radio"
|
|
706
|
+
v-model="inputGroupValueToggleSwitchRadio"
|
|
707
|
+
:toggleSwitch="true"
|
|
708
|
+
required="required"
|
|
709
|
+
:status="validationStatus"
|
|
710
|
+
:disabled="disabledStatus"
|
|
711
|
+
/>
|
|
712
|
+
<dl>
|
|
713
|
+
<dt>Selected value(s):</dt>
|
|
714
|
+
<dd>
|
|
715
|
+
<output>{{ inputGroupValueToggleSwitchRadio }}</output>
|
|
716
|
+
</dd>
|
|
717
|
+
</dl>
|
|
718
|
+
<CmdInputGroup
|
|
719
|
+
labelText="Grouplabel for radio-group given by property styled as multiple-switch:"
|
|
720
|
+
:inputElements="inputGroupRadiobuttonsData.map(item => ({...item, id: item.id + '-multi', name: item.name + '-multi'}))"
|
|
721
|
+
inputTypes="radio"
|
|
722
|
+
:multipleSwitch="true"
|
|
723
|
+
v-model="inputGroupValue3"
|
|
724
|
+
:status="validationStatus"
|
|
725
|
+
:disabled="disabledStatus"
|
|
726
|
+
/>
|
|
727
|
+
<dl>
|
|
728
|
+
<dt>Selected value(s):</dt>
|
|
729
|
+
<dd>
|
|
730
|
+
<output>{{ inputGroupValue3 }}</output>
|
|
731
|
+
</dd>
|
|
732
|
+
</dl>
|
|
733
|
+
<CmdInputGroup
|
|
734
|
+
labelText="Grouplabel for checkbox-group styled as multiple-switch (stretched horizontally):"
|
|
735
|
+
:inputElements="inputGroupCheckboxes"
|
|
736
|
+
inputTypes="checkbox"
|
|
737
|
+
:multipleSwitch="true"
|
|
738
|
+
:required="true"
|
|
739
|
+
v-model="inputGroupValue4"
|
|
740
|
+
:stretchHorizontally="true"
|
|
741
|
+
:status="validationStatus"
|
|
742
|
+
:disabled="disabledStatus"
|
|
743
|
+
/>
|
|
744
|
+
<dl>
|
|
745
|
+
<dt>Selected value(s):</dt>
|
|
746
|
+
<dd>
|
|
747
|
+
<output>{{ inputGroupValue4 }}</output>
|
|
748
|
+
</dd>
|
|
749
|
+
</dl>
|
|
750
|
+
</fieldset><!-- end fieldset -->
|
|
751
|
+
<div class="button-wrapper">
|
|
752
|
+
<small><sup>*</sup>values will not be submitted with the form!</small>
|
|
753
|
+
<CmdFormElement element="button"
|
|
754
|
+
:nativeButton="{text: 'Submit-button from component'}"
|
|
755
|
+
type="submit"
|
|
756
|
+
id="submitbutton"
|
|
757
|
+
name="submitbutton"
|
|
627
758
|
:disabled="disabledStatus"
|
|
628
759
|
/>
|
|
629
|
-
|
|
630
|
-
|
|
631
|
-
|
|
632
|
-
|
|
633
|
-
|
|
634
|
-
|
|
635
|
-
|
|
636
|
-
|
|
637
|
-
labelText="Grouplabel for radio-group given by property:"
|
|
638
|
-
:required="true"
|
|
639
|
-
:inputElements="inputGroupRadiobuttonsData"
|
|
640
|
-
inputTypes="radio"
|
|
641
|
-
v-model="inputGroupCheckbox"
|
|
642
|
-
:status="validationStatus"
|
|
643
|
-
:disabled="disabledStatus"
|
|
644
|
-
/>
|
|
645
|
-
<dl>
|
|
646
|
-
<dt>Selected value:</dt>
|
|
647
|
-
<dd>
|
|
648
|
-
<output>{{ inputGroupValue2 }}</output>
|
|
649
|
-
</dd>
|
|
650
|
-
</dl>
|
|
651
|
-
<h3>Input Group with Checkboxes/Radiobuttons (replaced)</h3>
|
|
652
|
-
<CmdInputGroup
|
|
653
|
-
labelText="Grouplabel for radio-group styled as replaced-input-type:"
|
|
654
|
-
:inputElements="inputGroupReplacedRadiobuttonsData"
|
|
655
|
-
inputTypes="radio"
|
|
656
|
-
v-model="inputGroupValueReplaceInputTypeRadio"
|
|
657
|
-
:replaceInputType="true"
|
|
658
|
-
:status="validationStatus"
|
|
659
|
-
:disabled="disabledStatus"
|
|
660
|
-
/>
|
|
661
|
-
<dl>
|
|
662
|
-
<dt>Selected value:</dt>
|
|
663
|
-
<dd>
|
|
664
|
-
<output>{{ inputGroupValueReplaceInputTypeRadio }}</output>
|
|
665
|
-
</dd>
|
|
666
|
-
</dl>
|
|
667
|
-
<CmdInputGroup
|
|
668
|
-
labelText="Grouplabel for checkbox-group styled as replaced-input-type:"
|
|
669
|
-
:inputElements="inputGroupReplacedRadiobuttonsData"
|
|
670
|
-
inputTypes="checkbox"
|
|
671
|
-
v-model="inputGroupValueReplaceInputTypeCheckbox"
|
|
672
|
-
:replaceInputType="true"
|
|
673
|
-
:required="true"
|
|
674
|
-
:status="validationStatus"
|
|
675
|
-
:disabled="disabledStatus"
|
|
676
|
-
/>
|
|
677
|
-
<dl>
|
|
678
|
-
<dt>Selected value(s):</dt>
|
|
679
|
-
<dd>
|
|
680
|
-
<output>{{ inputGroupValueReplaceInputTypeCheckbox }}</output>
|
|
681
|
-
</dd>
|
|
682
|
-
</dl>
|
|
683
|
-
<h3>Input Groups with Checkboxes/
|
|
684
|
-
Radiobuttons (toggle-switches)</h3>
|
|
685
|
-
<CmdInputGroup
|
|
686
|
-
labelText="Grouplabel for checkbox-group styled as toggle-switches:"
|
|
687
|
-
:inputElements="inputGroupRadiobuttonsData"
|
|
688
|
-
inputTypes="checkbox"
|
|
689
|
-
v-model="inputGroupValueToggleSwitchCheckbox"
|
|
690
|
-
:toggleSwitch="true"
|
|
691
|
-
required="required"
|
|
692
|
-
:status="validationStatus"
|
|
693
|
-
:disabled="disabledStatus"
|
|
694
|
-
/>
|
|
695
|
-
<dl>
|
|
696
|
-
<dt>Selected value(s):</dt>
|
|
697
|
-
<dd>
|
|
698
|
-
<output>{{ inputGroupValueToggleSwitchCheckbox }}</output>
|
|
699
|
-
</dd>
|
|
700
|
-
</dl>
|
|
701
|
-
<CmdInputGroup
|
|
702
|
-
labelText="Grouplabel for radio-group styled as toggle-switches:"
|
|
703
|
-
:inputElements="inputGroupToggleSwitchRadiobuttonsData"
|
|
704
|
-
inputTypes="radio"
|
|
705
|
-
v-model="inputGroupValueToggleSwitchRadio"
|
|
706
|
-
:toggleSwitch="true"
|
|
707
|
-
required="required"
|
|
708
|
-
:status="validationStatus"
|
|
709
|
-
:disabled="disabledStatus"
|
|
710
|
-
/>
|
|
711
|
-
<dl>
|
|
712
|
-
<dt>Selected value(s):</dt>
|
|
713
|
-
<dd>
|
|
714
|
-
<output>{{ inputGroupValueToggleSwitchRadio }}</output>
|
|
715
|
-
</dd>
|
|
716
|
-
</dl>
|
|
717
|
-
<CmdInputGroup
|
|
718
|
-
labelText="Grouplabel for radio-group given by property styled as multiple-switch:"
|
|
719
|
-
:inputElements="inputGroupRadiobuttonsData.map(item => ({...item, id: item.id + '-multi', name: item.name + '-multi'}))"
|
|
720
|
-
inputTypes="radio"
|
|
721
|
-
:multipleSwitch="true"
|
|
722
|
-
v-model="inputGroupValue3"
|
|
723
|
-
:status="validationStatus"
|
|
724
|
-
:disabled="disabledStatus"
|
|
725
|
-
/>
|
|
726
|
-
<dl>
|
|
727
|
-
<dt>Selected value(s):</dt>
|
|
728
|
-
<dd>
|
|
729
|
-
<output>{{ inputGroupValue3 }}</output>
|
|
730
|
-
</dd>
|
|
731
|
-
</dl>
|
|
732
|
-
<CmdInputGroup
|
|
733
|
-
labelText="Grouplabel for checkbox-group styled as multiple-switch (stretched horizontally):"
|
|
734
|
-
:inputElements="inputGroupCheckboxes"
|
|
735
|
-
inputTypes="checkbox"
|
|
736
|
-
:multipleSwitch="true"
|
|
737
|
-
:required="true"
|
|
738
|
-
v-model="inputGroupValue4"
|
|
739
|
-
:stretchHorizontally="true"
|
|
740
|
-
:status="validationStatus"
|
|
741
|
-
:disabled="disabledStatus"
|
|
742
|
-
/>
|
|
743
|
-
<dl>
|
|
744
|
-
<dt>Selected value(s):</dt>
|
|
745
|
-
<dd>
|
|
746
|
-
<output>{{ inputGroupValue4 }}</output>
|
|
747
|
-
</dd>
|
|
748
|
-
</dl>
|
|
749
|
-
</fieldset><!-- end fieldset -->
|
|
750
|
-
<div class="button-wrapper">
|
|
751
|
-
<small><sup>*</sup>values will not be submitted with the form!</small>
|
|
752
|
-
<CmdFormElement element="button"
|
|
753
|
-
:nativeButton="{text: 'Submit-button from component'}"
|
|
754
|
-
type="submit"
|
|
755
|
-
id="submitbutton"
|
|
756
|
-
name="submitbutton"
|
|
757
|
-
:disabled="disabledStatus"
|
|
758
|
-
/>
|
|
759
|
-
<button type="submit" :disabled="disabledStatus">
|
|
760
|
-
<span class="icon-check"></span>
|
|
761
|
-
<span>Native submit-button</span>
|
|
762
|
-
</button>
|
|
763
|
-
</div>
|
|
764
|
-
</CmdForm>
|
|
765
|
-
</CmdWidthLimitationWrapper>
|
|
766
|
-
<!-- end advanced form elements ----------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
760
|
+
<button type="submit" :disabled="disabledStatus">
|
|
761
|
+
<span class="icon-check"></span>
|
|
762
|
+
<span>Native submit-button</span>
|
|
763
|
+
</button>
|
|
764
|
+
</div>
|
|
765
|
+
</CmdForm>
|
|
766
|
+
</CmdWidthLimitationWrapper>
|
|
767
|
+
<!-- end advanced form elements ----------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
767
768
|
|
|
768
|
-
|
|
769
|
-
|
|
770
|
-
|
|
769
|
+
<!-- begin back to top button ----------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
770
|
+
<CmdBackToTopButton/>
|
|
771
|
+
<!-- end back to top button ----------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
771
772
|
|
|
772
|
-
|
|
773
|
-
|
|
774
|
-
|
|
775
|
-
|
|
776
|
-
|
|
777
|
-
|
|
778
|
-
|
|
773
|
+
<!-- begin bank account data ----------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
774
|
+
<a id="section-bank-account-data"></a>
|
|
775
|
+
<CmdWidthLimitationWrapper>
|
|
776
|
+
<h2 class="headline-demopage">Bank Account Data</h2>
|
|
777
|
+
<CmdBankAccountData :account-data="bankAccountData" :cmd-custom-headline="{ headlineText: 'Bank Account', headlineLevel: 3}" :allow-copy-by-click="true"/>
|
|
778
|
+
</CmdWidthLimitationWrapper>
|
|
779
|
+
<!-- end bank account data ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
779
780
|
|
|
780
|
-
|
|
781
|
-
|
|
782
|
-
|
|
783
|
-
|
|
784
|
-
|
|
785
|
-
|
|
786
|
-
|
|
787
|
-
|
|
788
|
-
|
|
789
|
-
|
|
790
|
-
|
|
791
|
-
|
|
792
|
-
|
|
793
|
-
|
|
794
|
-
|
|
781
|
+
<!-- begin boxes ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
782
|
+
<a id="section-boxes"></a>
|
|
783
|
+
<CmdWidthLimitationWrapper>
|
|
784
|
+
<h2 class="headline-demopage">Boxes</h2>
|
|
785
|
+
<h3>Content boxes</h3>
|
|
786
|
+
<div class="grid-container-create-columns">
|
|
787
|
+
<div class="grid-small-item">
|
|
788
|
+
<CmdBox :useSlots="['header', 'body', 'footer']">
|
|
789
|
+
<template v-slot:header>
|
|
790
|
+
<h3>
|
|
791
|
+
Headline for box
|
|
792
|
+
</h3>
|
|
793
|
+
</template>
|
|
794
|
+
<template v-slot:body>
|
|
795
|
+
<div class="padding">
|
|
796
|
+
<p>
|
|
797
|
+
This content with paragraphs inside is placed inside the box-body.
|
|
798
|
+
</p>
|
|
799
|
+
<p>
|
|
800
|
+
<strong>Header, Content and Footer of this box are given by slots.</strong>
|
|
801
|
+
</p>
|
|
802
|
+
</div>
|
|
803
|
+
</template>
|
|
804
|
+
<template v-slot:footer>
|
|
795
805
|
<p>
|
|
796
|
-
|
|
806
|
+
Footer content
|
|
797
807
|
</p>
|
|
808
|
+
</template>
|
|
809
|
+
</CmdBox>
|
|
810
|
+
</div>
|
|
811
|
+
<div class="grid-small-item">
|
|
812
|
+
<CmdBox>
|
|
813
|
+
<template v-slot:header>
|
|
814
|
+
<h3>
|
|
815
|
+
Box with links
|
|
816
|
+
</h3>
|
|
817
|
+
</template>
|
|
818
|
+
<template v-slot:body>
|
|
819
|
+
<ul class="navigation">
|
|
820
|
+
<li><a href="#" @click.prevent="">Link name 1</a></li>
|
|
821
|
+
<li><a href="#" @click.prevent="">Link name 2</a></li>
|
|
822
|
+
<li><a href="#" @click.prevent="">Link name 3</a></li>
|
|
823
|
+
<li><a href="#" @click.prevent="">Link name 4</a></li>
|
|
824
|
+
</ul>
|
|
825
|
+
</template>
|
|
826
|
+
<template v-slot:footer>
|
|
798
827
|
<p>
|
|
799
|
-
|
|
828
|
+
footer content
|
|
800
829
|
</p>
|
|
801
|
-
</
|
|
802
|
-
</
|
|
803
|
-
|
|
804
|
-
|
|
805
|
-
|
|
806
|
-
|
|
807
|
-
|
|
808
|
-
|
|
809
|
-
|
|
810
|
-
|
|
811
|
-
|
|
812
|
-
|
|
813
|
-
|
|
814
|
-
|
|
815
|
-
|
|
816
|
-
|
|
817
|
-
<
|
|
818
|
-
<
|
|
819
|
-
<
|
|
820
|
-
|
|
821
|
-
|
|
822
|
-
|
|
823
|
-
|
|
824
|
-
|
|
825
|
-
|
|
826
|
-
|
|
827
|
-
|
|
828
|
-
|
|
829
|
-
|
|
830
|
-
|
|
831
|
-
|
|
832
|
-
|
|
833
|
-
|
|
834
|
-
|
|
835
|
-
|
|
836
|
-
|
|
837
|
-
</h3>
|
|
838
|
-
</template>
|
|
839
|
-
<template v-slot:body>
|
|
840
|
-
<img src="media/images/content-images/logo-business-edition-landscape.jpg" alt="Alternative text"/>
|
|
841
|
-
</template>
|
|
842
|
-
</CmdBox>
|
|
843
|
-
</div>
|
|
844
|
-
<div class="grid-small-item">
|
|
845
|
-
<CmdBox>
|
|
846
|
-
<template v-slot:header>
|
|
847
|
-
<h3>
|
|
848
|
-
Box with image and content
|
|
849
|
-
</h3>
|
|
850
|
-
</template>
|
|
851
|
-
<template v-slot:body>
|
|
852
|
-
<img src="media/images/content-images/logo-business-edition-landscape.jpg" alt="Alternative text"/>
|
|
853
|
-
<div class="default-padding">
|
|
854
|
-
<h4>Headline</h4>
|
|
855
|
-
<p>This is some text information i.e a short-text for a news teaser.</p>
|
|
856
|
-
</div>
|
|
857
|
-
</template>
|
|
858
|
-
<template v-slot:footer>
|
|
859
|
-
<p>
|
|
860
|
-
<a href="#">Read more…</a>
|
|
861
|
-
</p>
|
|
862
|
-
</template>
|
|
863
|
-
</CmdBox>
|
|
830
|
+
</template>
|
|
831
|
+
</CmdBox>
|
|
832
|
+
</div>
|
|
833
|
+
<div class="grid-small-item">
|
|
834
|
+
<CmdBox :useSlots="['header', 'body']" :collapsible="true" :stretchVertically="false">
|
|
835
|
+
<template v-slot:header>
|
|
836
|
+
<h3>
|
|
837
|
+
Collapsible box with image
|
|
838
|
+
</h3>
|
|
839
|
+
</template>
|
|
840
|
+
<template v-slot:body>
|
|
841
|
+
<img src="media/images/content-images/logo-business-edition-landscape.jpg" alt="Alternative text"/>
|
|
842
|
+
</template>
|
|
843
|
+
</CmdBox>
|
|
844
|
+
</div>
|
|
845
|
+
<div class="grid-small-item">
|
|
846
|
+
<CmdBox>
|
|
847
|
+
<template v-slot:header>
|
|
848
|
+
<h3>
|
|
849
|
+
Box with image and content
|
|
850
|
+
</h3>
|
|
851
|
+
</template>
|
|
852
|
+
<template v-slot:body>
|
|
853
|
+
<img src="media/images/content-images/logo-business-edition-landscape.jpg" alt="Alternative text"/>
|
|
854
|
+
<div class="default-padding">
|
|
855
|
+
<h4>Headline</h4>
|
|
856
|
+
<p>This is some text information i.e a short-text for a news teaser.</p>
|
|
857
|
+
</div>
|
|
858
|
+
</template>
|
|
859
|
+
<template v-slot:footer>
|
|
860
|
+
<p>
|
|
861
|
+
<a href="#">Read more…</a>
|
|
862
|
+
</p>
|
|
863
|
+
</template>
|
|
864
|
+
</CmdBox>
|
|
865
|
+
</div>
|
|
864
866
|
</div>
|
|
865
|
-
|
|
866
|
-
|
|
867
|
-
|
|
868
|
-
|
|
869
|
-
|
|
867
|
+
<h3>Product boxes</h3>
|
|
868
|
+
<div class="grid-container-create-columns">
|
|
869
|
+
<div class="grid-small-item" v-for="(product, index) in boxProductData" :key="index">
|
|
870
|
+
<CmdBox boxType="product" :product="product" :cmdHeadline="{headlineLevel: 4}"/>
|
|
871
|
+
</div>
|
|
870
872
|
</div>
|
|
871
|
-
|
|
872
|
-
|
|
873
|
-
|
|
874
|
-
|
|
875
|
-
|
|
873
|
+
<h3>User boxes</h3>
|
|
874
|
+
<div class="grid-container-create-columns">
|
|
875
|
+
<div class="grid-small-item" v-for="(user, index) in boxUserData" :key="index">
|
|
876
|
+
<CmdBox boxType="user" :user="user" :cmdHeadline="{headlineLevel: 4}"/>
|
|
877
|
+
</div>
|
|
876
878
|
</div>
|
|
877
|
-
|
|
878
|
-
|
|
879
|
-
|
|
880
|
-
|
|
881
|
-
|
|
882
|
-
|
|
883
|
-
|
|
884
|
-
|
|
885
|
-
|
|
886
|
-
|
|
887
|
-
|
|
888
|
-
|
|
889
|
-
|
|
890
|
-
|
|
891
|
-
|
|
892
|
-
|
|
893
|
-
|
|
894
|
-
|
|
895
|
-
|
|
896
|
-
</
|
|
897
|
-
|
|
898
|
-
<!-- end boxes ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
879
|
+
<h3>Box Site Search</h3>
|
|
880
|
+
<CmdBoxSiteSearch
|
|
881
|
+
v-model:modelValueInput1="siteSearchInput1"
|
|
882
|
+
v-model:modelValueInput2="siteSearchInput2"
|
|
883
|
+
v-model:modelValueRadius="radius"
|
|
884
|
+
v-model:modelValueSearchFilters="filters"
|
|
885
|
+
@search="siteSearchOutput"
|
|
886
|
+
textLegend="Search"
|
|
887
|
+
:cmdFakeSelect="siteSearchFilters"/>
|
|
888
|
+
<dl>
|
|
889
|
+
<dt>siteSearchInput1:</dt>
|
|
890
|
+
<dd>{{ siteSearchInput1 }}</dd>
|
|
891
|
+
<dt>siteSearchInput2:</dt>
|
|
892
|
+
<dd>{{ siteSearchInput2 }}</dd>
|
|
893
|
+
<dt>Radius:</dt>
|
|
894
|
+
<dd>{{ radius }}</dd>
|
|
895
|
+
<dt>Filters:</dt>
|
|
896
|
+
<dd>{{ filters }}</dd>
|
|
897
|
+
</dl>
|
|
898
|
+
</CmdWidthLimitationWrapper>
|
|
899
|
+
<!-- end boxes ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
899
900
|
|
|
900
|
-
|
|
901
|
-
|
|
902
|
-
|
|
903
|
-
|
|
904
|
-
|
|
905
|
-
|
|
906
|
-
|
|
901
|
+
<!-- begin breadcrumbs ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
902
|
+
<a id="section-breadcrumbs"></a>
|
|
903
|
+
<CmdWidthLimitationWrapper inner-component="div">
|
|
904
|
+
<h2 class="headline-demopage">Breadcrumbs</h2>
|
|
905
|
+
<CmdBreadcrumbs :breadcrumbLinks="breadcrumbData" breadcrumbLabel="You are here:"/>
|
|
906
|
+
</CmdWidthLimitationWrapper>
|
|
907
|
+
<!-- end breadcrumbs ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
907
908
|
|
|
908
|
-
|
|
909
|
-
|
|
910
|
-
|
|
911
|
-
|
|
912
|
-
|
|
913
|
-
|
|
914
|
-
|
|
915
|
-
|
|
916
|
-
|
|
909
|
+
<!-- begin cookie-disclaimer ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
910
|
+
<a id="section-cookie-disclaimer"></a>
|
|
911
|
+
<CmdWidthLimitationWrapper>
|
|
912
|
+
<h2 class="headline-demopage">Cookie Disclaimer</h2>
|
|
913
|
+
<a class="button" href="#" @click.prevent="fancyBoxCookieDisclaimer = true">
|
|
914
|
+
<span>Open Cookie Disclaimer</span>
|
|
915
|
+
</a>
|
|
916
|
+
</CmdWidthLimitationWrapper>
|
|
917
|
+
<!-- end cookie-disclaimer ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
917
918
|
|
|
918
|
-
|
|
919
|
-
|
|
920
|
-
|
|
921
|
-
|
|
922
|
-
|
|
923
|
-
|
|
924
|
-
|
|
925
|
-
|
|
926
|
-
|
|
927
|
-
|
|
928
|
-
|
|
929
|
-
|
|
919
|
+
<!-- begin custom-headline ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
920
|
+
<a id="section-custom-headline"></a>
|
|
921
|
+
<CmdWidthLimitationWrapper>
|
|
922
|
+
<h2 class="headline-demopage">Headline</h2>
|
|
923
|
+
<CmdHeadline icon-class="icon-home" pre-headline-text="Pre-headline" headlineText="Headline level 1" :headlineLevel="1"/>
|
|
924
|
+
<CmdHeadline headlineText="Headline level 2" :headlineLevel="2"/>
|
|
925
|
+
<CmdHeadline headlineText="Headline level 3" :headlineLevel="3"/>
|
|
926
|
+
<CmdHeadline headlineText="Headline level 4" :headlineLevel="4"/>
|
|
927
|
+
<CmdHeadline headlineText="Headline level 5" :headlineLevel="5"/>
|
|
928
|
+
<CmdHeadline headlineText="Headline level 6" :headlineLevel="6"/>
|
|
929
|
+
</CmdWidthLimitationWrapper>
|
|
930
|
+
<!-- end custom-headline ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
930
931
|
|
|
931
|
-
|
|
932
|
-
|
|
933
|
-
|
|
934
|
-
|
|
935
|
-
|
|
936
|
-
|
|
937
|
-
|
|
938
|
-
|
|
939
|
-
|
|
940
|
-
|
|
941
|
-
|
|
942
|
-
|
|
932
|
+
<!-- begin fancybox ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
933
|
+
<a id="section-fancybox"></a>
|
|
934
|
+
<CmdWidthLimitationWrapper>
|
|
935
|
+
<h2 class="headline-demopage">Fancybox</h2>
|
|
936
|
+
<a href="#" @click.prevent="showFancyBox('text','Some text')">Open FancyBox with text</a>
|
|
937
|
+
<a href="#"
|
|
938
|
+
@click.prevent="showFancyBox('image', 'media/images/content-images/logo-business-edition-landscape.jpg', 'Alternative text')"
|
|
939
|
+
title="Open FancyBox with large image">
|
|
940
|
+
<img src="media/images/content-images/logo-business-edition-landscape.jpg" alt="Alternative text"/>
|
|
941
|
+
</a>
|
|
942
|
+
</CmdWidthLimitationWrapper>
|
|
943
|
+
<!-- end fancybox ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
943
944
|
|
|
944
|
-
|
|
945
|
-
|
|
946
|
-
|
|
947
|
-
|
|
948
|
-
|
|
945
|
+
<a id="section-google-maps-integration"></a>
|
|
946
|
+
<CmdWidthLimitationWrapper>
|
|
947
|
+
<h2 class="headline-demopage">Google Maps™-Integration</h2>
|
|
948
|
+
<CmdGoogleMaps :address="addressData"/>
|
|
949
|
+
</CmdWidthLimitationWrapper>
|
|
949
950
|
|
|
950
|
-
|
|
951
|
-
|
|
952
|
-
|
|
953
|
-
|
|
954
|
-
|
|
951
|
+
<a id="section-image-gallery"></a>
|
|
952
|
+
<CmdWidthLimitationWrapper>
|
|
953
|
+
<h2 class="headline-demopage">Image-Gallery</h2>
|
|
954
|
+
<CmdImageGallery :images="imageGalleryData"/>
|
|
955
|
+
</CmdWidthLimitationWrapper>
|
|
955
956
|
|
|
956
|
-
|
|
957
|
-
|
|
958
|
-
|
|
959
|
-
|
|
960
|
-
|
|
961
|
-
|
|
957
|
+
<a id="section-image-zoom"></a>
|
|
958
|
+
<CmdWidthLimitationWrapper>
|
|
959
|
+
<h2 class="headline-demopage">Image-Zoom</h2>
|
|
960
|
+
<CmdImageZoom small-image-url="media/images/content-images/logo-business-edition-landscape.jpg"
|
|
961
|
+
large-image-url="media/images/content-images/logo-business-edition-landscape-large.jpg"/>
|
|
962
|
+
</CmdWidthLimitationWrapper>
|
|
962
963
|
|
|
963
|
-
|
|
964
|
-
|
|
965
|
-
|
|
966
|
-
|
|
967
|
-
|
|
968
|
-
|
|
964
|
+
<a id="section-login-form"></a>
|
|
965
|
+
<CmdWidthLimitationWrapper>
|
|
966
|
+
<h2 class="headline-demopage">Login Form</h2>
|
|
967
|
+
<CmdLoginForm v-model="loginData" v-focus/>
|
|
968
|
+
<p>LoginData: {{ loginData }}</p>
|
|
969
|
+
</CmdWidthLimitationWrapper>
|
|
969
970
|
|
|
970
|
-
|
|
971
|
-
|
|
972
|
-
|
|
973
|
-
|
|
974
|
-
|
|
975
|
-
|
|
976
|
-
|
|
977
|
-
|
|
978
|
-
|
|
979
|
-
|
|
980
|
-
|
|
981
|
-
|
|
982
|
-
|
|
983
|
-
|
|
971
|
+
<!-- begin list-of-links ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
972
|
+
<a id="section-list-of-links"></a>
|
|
973
|
+
<CmdWidthLimitationWrapper>
|
|
974
|
+
<h2 class="headline-demopage">List Of Links</h2>
|
|
975
|
+
<h3>Vertical</h3>
|
|
976
|
+
<CmdListOfLinks :links="listOfLinksData"/>
|
|
977
|
+
<h3>Horizontal (aligned left)</h3>
|
|
978
|
+
<CmdListOfLinks orientation="horizontal" align="left" :links="listOfLinksData"/>
|
|
979
|
+
<h3>Horizontal (aligned center)</h3>
|
|
980
|
+
<CmdListOfLinks orientation="horizontal" align="center" :links="listOfLinksData"/>
|
|
981
|
+
<h3>Horizontal (aligned right)</h3>
|
|
982
|
+
<CmdListOfLinks orientation="horizontal" align="right" :links="listOfLinksData"/>
|
|
983
|
+
</CmdWidthLimitationWrapper>
|
|
984
|
+
<!-- end list-of-links ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
984
985
|
|
|
985
|
-
|
|
986
|
-
|
|
987
|
-
|
|
988
|
-
|
|
989
|
-
|
|
990
|
-
|
|
991
|
-
|
|
992
|
-
|
|
986
|
+
<a id="section-main-navigation"></a>
|
|
987
|
+
<CmdWidthLimitationWrapper>
|
|
988
|
+
<h2 class="headline-demopage">Main Navigation</h2>
|
|
989
|
+
<CmdMainNavigation :stretchMainItems="false"
|
|
990
|
+
:persistOnMobile="false"
|
|
991
|
+
:navigationEntries="navigationData"
|
|
992
|
+
/>
|
|
993
|
+
</CmdWidthLimitationWrapper>
|
|
993
994
|
|
|
994
|
-
|
|
995
|
-
|
|
996
|
-
|
|
997
|
-
|
|
998
|
-
|
|
999
|
-
|
|
1000
|
-
|
|
1001
|
-
|
|
1002
|
-
|
|
995
|
+
<a id="section-multistep-form-progress-bar"></a>
|
|
996
|
+
<CmdWidthLimitationWrapper>
|
|
997
|
+
<h2 class="headline-demopage">Multistepform-Progressbar</h2>
|
|
998
|
+
<CmdMultistepFormProgressBar :multisteps="multistepsData" separatorIconClass="icon-single-arrow-right"
|
|
999
|
+
@click="showPageMultistep = $event.index + 1"/>
|
|
1000
|
+
<div>
|
|
1001
|
+
<p>Page {{ showPageMultistep }}</p>
|
|
1002
|
+
</div>
|
|
1003
|
+
</CmdWidthLimitationWrapper>
|
|
1003
1004
|
|
|
1004
|
-
|
|
1005
|
-
|
|
1006
|
-
|
|
1007
|
-
|
|
1008
|
-
|
|
1009
|
-
|
|
1010
|
-
|
|
1011
|
-
|
|
1012
|
-
|
|
1013
|
-
|
|
1014
|
-
|
|
1015
|
-
|
|
1005
|
+
<a id="section-pager"></a>
|
|
1006
|
+
<CmdWidthLimitationWrapper>
|
|
1007
|
+
<h2 class="headline-demopage">Pager</h2>
|
|
1008
|
+
<div>
|
|
1009
|
+
<p>Page {{ showPagePager }}</p>
|
|
1010
|
+
</div>
|
|
1011
|
+
<CmdPager
|
|
1012
|
+
:items="4"
|
|
1013
|
+
:itemsPerPage="1"
|
|
1014
|
+
@click="showPagePager = $event"
|
|
1015
|
+
/>
|
|
1016
|
+
</CmdWidthLimitationWrapper>
|
|
1016
1017
|
|
|
1017
|
-
|
|
1018
|
-
|
|
1019
|
-
|
|
1020
|
-
|
|
1021
|
-
|
|
1018
|
+
<a id="section-share-buttons"></a>
|
|
1019
|
+
<CmdWidthLimitationWrapper>
|
|
1020
|
+
<h2 class="headline-demopage">Share buttons</h2>
|
|
1021
|
+
<CmdShareButtons :share-buttons="shareButtonsData"/>
|
|
1022
|
+
</CmdWidthLimitationWrapper>
|
|
1022
1023
|
|
|
1023
|
-
|
|
1024
|
-
|
|
1025
|
-
|
|
1026
|
-
|
|
1027
|
-
|
|
1024
|
+
<a id="section-slideshow"></a>
|
|
1025
|
+
<CmdWidthLimitationWrapper>
|
|
1026
|
+
<h2 class="headline-demopage">Slideshow</h2>
|
|
1027
|
+
<CmdSlideshow :slideshow-items="slideshowData" :showCounter="true" :autoplay="true"/>
|
|
1028
|
+
</CmdWidthLimitationWrapper>
|
|
1028
1029
|
|
|
1029
|
-
|
|
1030
|
-
|
|
1031
|
-
|
|
1032
|
-
|
|
1033
|
-
|
|
1034
|
-
|
|
1035
|
-
|
|
1036
|
-
|
|
1037
|
-
|
|
1038
|
-
|
|
1039
|
-
|
|
1040
|
-
|
|
1041
|
-
|
|
1042
|
-
|
|
1043
|
-
|
|
1044
|
-
|
|
1045
|
-
|
|
1046
|
-
|
|
1047
|
-
|
|
1048
|
-
|
|
1049
|
-
|
|
1050
|
-
|
|
1051
|
-
|
|
1052
|
-
|
|
1053
|
-
|
|
1054
|
-
|
|
1055
|
-
|
|
1056
|
-
|
|
1057
|
-
|
|
1058
|
-
|
|
1059
|
-
|
|
1030
|
+
<a id="section-system-message"></a>
|
|
1031
|
+
<CmdWidthLimitationWrapper>
|
|
1032
|
+
<h2 class="headline-demopage">System Message</h2>
|
|
1033
|
+
<CmdSystemMessage validationStatus="error"
|
|
1034
|
+
:fullWidth="true"
|
|
1035
|
+
systemMessage="This is an error message!"
|
|
1036
|
+
:iconMessage="{iconClass: 'icon-error-circle'}">
|
|
1037
|
+
<ul>
|
|
1038
|
+
<li>Error #1</li>
|
|
1039
|
+
<li>Error #2</li>
|
|
1040
|
+
<li>Error #3</li>
|
|
1041
|
+
</ul>
|
|
1042
|
+
</CmdSystemMessage>
|
|
1043
|
+
<CmdSystemMessage validationStatus="warning"
|
|
1044
|
+
:fullWidth="true"
|
|
1045
|
+
systemMessage="This is a warning message!">
|
|
1046
|
+
<p>This is additional text!</p>
|
|
1047
|
+
</CmdSystemMessage>
|
|
1048
|
+
<CmdSystemMessage validationStatus="success"
|
|
1049
|
+
:fullWidth="true"
|
|
1050
|
+
systemMessage="This is a success message!"
|
|
1051
|
+
:iconMessage="{iconClass: 'icon-check-circle'}">
|
|
1052
|
+
<p>This is additional text!</p>
|
|
1053
|
+
</CmdSystemMessage>
|
|
1054
|
+
<CmdSystemMessage validationStatus="info"
|
|
1055
|
+
:fullWidth="true"
|
|
1056
|
+
systemMessage="This is an info message!"
|
|
1057
|
+
:iconMessage="{iconClass: 'icon-info-circle'}">
|
|
1058
|
+
<p>This is additional text!</p>
|
|
1059
|
+
</CmdSystemMessage>
|
|
1060
|
+
</CmdWidthLimitationWrapper>
|
|
1060
1061
|
|
|
1061
|
-
|
|
1062
|
-
|
|
1063
|
-
|
|
1064
|
-
|
|
1065
|
-
|
|
1066
|
-
|
|
1067
|
-
|
|
1068
|
-
|
|
1069
|
-
|
|
1070
|
-
|
|
1062
|
+
<a id="section-tables"></a>
|
|
1063
|
+
<CmdWidthLimitationWrapper>
|
|
1064
|
+
<h2 class="headline-demopage">Tables</h2>
|
|
1065
|
+
<h3>Table as wide as its content (with caption)</h3>
|
|
1066
|
+
<CmdTable :collapsible="true" :fullWidthOnDefault="false" :userCanToggleWidth="true" :table-data="tableDataSmall"/>
|
|
1067
|
+
<h3>Table as wide as its content (without caption)</h3>
|
|
1068
|
+
<CmdTable :collapsible="true" :fullWidthOnDefault="false" :userCanToggleWidth="true" :caption="{ text: 'Hidden caption', show: false}" :table-data="tableDataSmall"/>
|
|
1069
|
+
<h3>Table as wide as possible</h3>
|
|
1070
|
+
<CmdTable :collapsible="true" :fullWidthOnDefault="false" :userCanToggleWidth="true" :table-data="tableDataLarge"/>
|
|
1071
|
+
</CmdWidthLimitationWrapper>
|
|
1071
1072
|
|
|
1072
|
-
|
|
1073
|
-
|
|
1074
|
-
|
|
1075
|
-
|
|
1076
|
-
|
|
1077
|
-
|
|
1078
|
-
|
|
1079
|
-
|
|
1080
|
-
|
|
1081
|
-
|
|
1082
|
-
|
|
1083
|
-
|
|
1084
|
-
|
|
1085
|
-
|
|
1086
|
-
|
|
1087
|
-
|
|
1088
|
-
|
|
1089
|
-
|
|
1090
|
-
|
|
1091
|
-
|
|
1092
|
-
|
|
1093
|
-
|
|
1094
|
-
|
|
1095
|
-
|
|
1073
|
+
<a id="section-tabs"></a>
|
|
1074
|
+
<CmdWidthLimitationWrapper>
|
|
1075
|
+
<h2 class="headline-demopage">Tabs</h2>
|
|
1076
|
+
<h3>Tabs with content from json-file</h3>
|
|
1077
|
+
<CmdTabs :stretchTabs="false" :tabs="tabsData"/>
|
|
1078
|
+
<h3>Tabs with HTML-content (given by slot))</h3>
|
|
1079
|
+
<CmdTabs :stretchTabs="true" :tabs="[{name: 'Tab 1'}, {name: 'Tab 2'}, {name: 'Tab 3'}]" :useSlot="true">
|
|
1080
|
+
<template v-slot:tab-content-0>
|
|
1081
|
+
<h4>Tab 1 headline</h4>
|
|
1082
|
+
<p>Content</p>
|
|
1083
|
+
</template>
|
|
1084
|
+
<template v-slot:tab-content-1>
|
|
1085
|
+
<h4>Tab 2</h4>
|
|
1086
|
+
<p>Content</p>
|
|
1087
|
+
<p>Content</p>
|
|
1088
|
+
</template>
|
|
1089
|
+
<template v-slot:tab-content-2>
|
|
1090
|
+
<h4>Tab 3</h4>
|
|
1091
|
+
<p>Content</p>
|
|
1092
|
+
<p>Content</p>
|
|
1093
|
+
<p>Content</p>
|
|
1094
|
+
</template>
|
|
1095
|
+
</CmdTabs>
|
|
1096
|
+
</CmdWidthLimitationWrapper>
|
|
1096
1097
|
|
|
1097
|
-
|
|
1098
|
-
|
|
1099
|
-
|
|
1100
|
-
|
|
1101
|
-
|
|
1102
|
-
|
|
1103
|
-
|
|
1104
|
-
|
|
1098
|
+
<a id="section-thumbnail-scroller"></a>
|
|
1099
|
+
<CmdWidthLimitationWrapper>
|
|
1100
|
+
<h2 class="headline-demopage">Thumbnail-Scroller</h2>
|
|
1101
|
+
<h3>Thumbnail-Scroller as wide as content</h3>
|
|
1102
|
+
<CmdThumbnailScroller :thumbnail-scroller-items="thumbnailScrollerData"/>
|
|
1103
|
+
<h3>Thumbnail-Scroller stretched to full width</h3>
|
|
1104
|
+
<CmdThumbnailScroller :thumbnail-scroller-items="thumbnailScrollerData" :fullWidth="true"/>
|
|
1105
|
+
</CmdWidthLimitationWrapper>
|
|
1105
1106
|
|
|
1106
|
-
|
|
1107
|
-
|
|
1108
|
-
|
|
1109
|
-
|
|
1110
|
-
|
|
1111
|
-
|
|
1112
|
-
|
|
1113
|
-
|
|
1114
|
-
|
|
1115
|
-
|
|
1116
|
-
|
|
1117
|
-
|
|
1118
|
-
|
|
1119
|
-
|
|
1107
|
+
<a id="section-tooltip"></a>
|
|
1108
|
+
<CmdWidthLimitationWrapper>
|
|
1109
|
+
<h2 class="headline-demopage">Tooltip</h2>
|
|
1110
|
+
<p>
|
|
1111
|
+
<a href="#" @click.prevent id="hoverme">Hover me!</a><br/>
|
|
1112
|
+
<a href="#" @click.prevent id="clickme" title="Native tooltip">Click me!</a>
|
|
1113
|
+
</p>
|
|
1114
|
+
<CmdTooltip related-id="hoverme">
|
|
1115
|
+
Tooltip for hover
|
|
1116
|
+
</CmdTooltip>
|
|
1117
|
+
<CmdTooltip related-id="clickme" :toggle-visibility-by-click="true">
|
|
1118
|
+
Tooltip for click
|
|
1119
|
+
</CmdTooltip>
|
|
1120
|
+
</CmdWidthLimitationWrapper>
|
|
1120
1121
|
|
|
1121
|
-
|
|
1122
|
-
|
|
1123
|
-
|
|
1124
|
-
|
|
1125
|
-
|
|
1126
|
-
|
|
1127
|
-
|
|
1128
|
-
|
|
1129
|
-
|
|
1130
|
-
|
|
1131
|
-
|
|
1132
|
-
|
|
1133
|
-
|
|
1134
|
-
|
|
1135
|
-
|
|
1136
|
-
|
|
1137
|
-
|
|
1138
|
-
|
|
1139
|
-
|
|
1140
|
-
|
|
1141
|
-
|
|
1142
|
-
|
|
1122
|
+
<a id="section-upload-form"></a>
|
|
1123
|
+
<CmdWidthLimitationWrapper>
|
|
1124
|
+
<h2 class="headline-demopage">Upload-Form</h2>
|
|
1125
|
+
<h3>Simple mode</h3>
|
|
1126
|
+
<CmdUploadForm :enableDragAndDrop="true"
|
|
1127
|
+
:allowedFileExtensions="['jpg', 'png']"
|
|
1128
|
+
:allowMultipleFileUploads="true"
|
|
1129
|
+
:advancedMode="false"
|
|
1130
|
+
textLegend="Simple upload form"
|
|
1131
|
+
@error="showError"
|
|
1132
|
+
:uploadOptions="{url: 'http://localhost:8888'}"
|
|
1133
|
+
/>
|
|
1134
|
+
<h3>Advanced mode</h3>
|
|
1135
|
+
<CmdUploadForm :cmdHeadlineFieldset="{headlineText: 'Select files to upload', headlineLevel: 3}"
|
|
1136
|
+
:enableDragAndDrop="true"
|
|
1137
|
+
:allowedFileExtensions="['jpg', 'png']"
|
|
1138
|
+
:allowMultipleFileUploads="true"
|
|
1139
|
+
textLegend="Advanced upload form"
|
|
1140
|
+
:uploadOptions="{url: 'http://localhost:8888'}"
|
|
1141
|
+
/>
|
|
1142
|
+
</CmdWidthLimitationWrapper>
|
|
1143
|
+
</main>
|
|
1143
1144
|
|
|
1144
|
-
|
|
1145
|
-
|
|
1146
|
-
|
|
1147
|
-
|
|
1148
|
-
|
|
1149
|
-
|
|
1150
|
-
|
|
1151
|
-
|
|
1152
|
-
|
|
1153
|
-
|
|
1154
|
-
|
|
1155
|
-
|
|
1156
|
-
|
|
1157
|
-
|
|
1158
|
-
|
|
1159
|
-
|
|
1160
|
-
|
|
1145
|
+
<CmdSiteFooter>
|
|
1146
|
+
<CmdSwitchLanguage :languages="languagesData" @click="doSomething"/>
|
|
1147
|
+
<div class="flex-container">
|
|
1148
|
+
<CmdListOfLinks :links="listOfLinksData"
|
|
1149
|
+
:cmdHeadline="{headlineText: 'List of links', headlineLevel: 6}"
|
|
1150
|
+
/>
|
|
1151
|
+
<CmdOpeningHours :openingHours="openingHoursData"
|
|
1152
|
+
:cmdHeadline="{headlineText: 'Opening hours', headlineLevel: 6}"
|
|
1153
|
+
textHolidaysClosed="Closed on holidays"
|
|
1154
|
+
textMiscInfo="Miscellaneous information"
|
|
1155
|
+
/>
|
|
1156
|
+
<CmdAddressData :addressData="addressData"
|
|
1157
|
+
:linkGoogleMaps="false"
|
|
1158
|
+
:cmdHeadline="{headlineText: 'Address data', headlineLevel: 6}"
|
|
1159
|
+
/>
|
|
1160
|
+
</div>
|
|
1161
|
+
</CmdSiteFooter>
|
|
1161
1162
|
|
|
1162
|
-
|
|
1163
|
+
<CmdCopyrightInformation/>
|
|
1163
1164
|
|
|
1164
|
-
|
|
1165
|
-
|
|
1166
|
-
|
|
1167
|
-
|
|
1168
|
-
|
|
1169
|
-
|
|
1165
|
+
<CmdFancyBox :show="fancyBoxCookieDisclaimer" :fancyboxOptions="{}" :allowEscapeKey="false">
|
|
1166
|
+
<CmdCookieDisclaimer :cookieOptions="cookieDisclaimerData"
|
|
1167
|
+
buttonLabelAcceptAllCookies="Accept all cookies"
|
|
1168
|
+
buttonLabelAcceptCurrentSettings="Accept current settings"
|
|
1169
|
+
@closeCookieDisclaimer="closeCookieDisclaimer"
|
|
1170
|
+
v-model="acceptedCookies"
|
|
1170
1171
|
|
|
1171
|
-
|
|
1172
|
-
|
|
1173
|
-
|
|
1174
|
-
|
|
1175
|
-
|
|
1176
|
-
|
|
1177
|
-
|
|
1178
|
-
|
|
1179
|
-
|
|
1180
|
-
|
|
1172
|
+
>
|
|
1173
|
+
<template #privacy-text>
|
|
1174
|
+
<p>
|
|
1175
|
+
<strong>
|
|
1176
|
+
By browsing this web site to accept the usage and saving of anonymous data!
|
|
1177
|
+
</strong>
|
|
1178
|
+
</p>
|
|
1179
|
+
</template>
|
|
1180
|
+
</CmdCookieDisclaimer>
|
|
1181
|
+
</CmdFancyBox>
|
|
1182
|
+
</div>
|
|
1181
1183
|
</template>
|
|
1182
1184
|
|
|
1183
1185
|
<script>
|
|
@@ -1489,6 +1491,8 @@ export default {
|
|
|
1489
1491
|
</script>
|
|
1490
1492
|
|
|
1491
1493
|
<style lang="scss">
|
|
1494
|
+
|
|
1495
|
+
|
|
1492
1496
|
.list-status {
|
|
1493
1497
|
.active {
|
|
1494
1498
|
color: var(--text-color);
|