comand-component-library 3.1.86 → 3.1.89
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 +1068 -1050
- package/src/assets/data/opening-hours.json +20 -10
- package/src/assets/styles/global-styles.scss +20 -3
- package/src/components/CmdBankAccountData.vue +3 -2
- package/src/components/CmdFakeSelect.vue +1 -5
- package/src/components/CmdFormElement.vue +19 -28
- package/src/components/CmdListOfRequirements.vue +1 -1
- package/src/components/CmdMainNavigation.vue +27 -42
- package/src/components/CmdOpeningHours.vue +152 -9
- package/src/components/CmdSiteHeader.vue +4 -0
- package/src/components/CmdSwitchLanguage.vue +2 -4
- package/src/components/CmdToggleDarkMode.vue +6 -4
- package/src/components/CmdTooltipForInputElements.vue +1 -1
- package/src/documentation/generated/CmdFormElementPropertyDescriptions.json +0 -5
- package/src/documentation/generated/CmdOpeningHoursPropertyDescriptions.json +22 -2
- package/src/mixins/FieldValidation.js +22 -0
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,801 +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
|
-
|
|
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>
|
|
502
515
|
</div>
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
|
|
515
|
-
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
|
|
523
|
-
|
|
524
|
-
|
|
525
|
-
|
|
526
|
-
|
|
527
|
-
|
|
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>
|
|
528
541
|
</div>
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
|
|
532
|
-
|
|
533
|
-
|
|
534
|
-
|
|
535
|
-
|
|
536
|
-
|
|
537
|
-
|
|
538
|
-
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
|
|
543
|
-
|
|
544
|
-
|
|
545
|
-
|
|
546
|
-
|
|
547
|
-
|
|
548
|
-
|
|
549
|
-
|
|
550
|
-
|
|
551
|
-
|
|
552
|
-
|
|
553
|
-
|
|
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>
|
|
554
567
|
</div>
|
|
555
|
-
|
|
556
|
-
|
|
557
|
-
|
|
558
|
-
|
|
559
|
-
|
|
560
|
-
|
|
561
|
-
|
|
562
|
-
|
|
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
|
+
>
|
|
563
610
|
<CmdFormElement element="input"
|
|
564
|
-
labelText="Label for
|
|
611
|
+
labelText="Label for radiobutton"
|
|
565
612
|
type="radio"
|
|
566
|
-
|
|
567
|
-
|
|
568
|
-
name="replaced-radiogroup"
|
|
613
|
+
id="input-group-radiobutton"
|
|
614
|
+
name="radiogroup2"
|
|
569
615
|
inputValue="radiobuttonValue1"
|
|
570
|
-
v-model="
|
|
616
|
+
v-model="inputGroupRadio"
|
|
571
617
|
:status="validationStatus"
|
|
572
618
|
:disabled="disabledStatus"
|
|
573
619
|
/>
|
|
574
620
|
<CmdFormElement element="input"
|
|
575
|
-
labelText="Label for
|
|
621
|
+
labelText="Label for radiobutton"
|
|
576
622
|
type="radio"
|
|
577
|
-
|
|
578
|
-
|
|
579
|
-
name="replaced-radiogroup"
|
|
623
|
+
id="input-group-radiobutton"
|
|
624
|
+
name="radiogroup2"
|
|
580
625
|
inputValue="radiobuttonValue2"
|
|
581
|
-
v-model="
|
|
626
|
+
v-model="inputGroupRadio"
|
|
582
627
|
:status="validationStatus"
|
|
583
628
|
:disabled="disabledStatus"
|
|
584
629
|
/>
|
|
585
|
-
</
|
|
586
|
-
|
|
587
|
-
|
|
588
|
-
|
|
589
|
-
|
|
590
|
-
|
|
591
|
-
|
|
592
|
-
|
|
593
|
-
|
|
594
|
-
|
|
595
|
-
|
|
596
|
-
|
|
597
|
-
|
|
598
|
-
|
|
599
|
-
|
|
600
|
-
type="radio"
|
|
601
|
-
id="input-group-radiobutton"
|
|
602
|
-
name="radiogroup2"
|
|
603
|
-
inputValue="radiobuttonValue1"
|
|
604
|
-
v-model="inputGroupRadio"
|
|
605
|
-
:status="validationStatus"
|
|
606
|
-
: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"
|
|
607
645
|
/>
|
|
608
|
-
<
|
|
609
|
-
|
|
610
|
-
|
|
611
|
-
|
|
612
|
-
|
|
613
|
-
|
|
614
|
-
|
|
615
|
-
|
|
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"
|
|
616
758
|
:disabled="disabledStatus"
|
|
617
759
|
/>
|
|
618
|
-
|
|
619
|
-
|
|
620
|
-
|
|
621
|
-
|
|
622
|
-
|
|
623
|
-
|
|
624
|
-
|
|
625
|
-
|
|
626
|
-
labelText="Grouplabel for radio-group given by property:"
|
|
627
|
-
:required="true"
|
|
628
|
-
:inputElements="inputGroupRadiobuttonsData"
|
|
629
|
-
inputTypes="radio"
|
|
630
|
-
v-model="inputGroupCheckbox"
|
|
631
|
-
:status="validationStatus"
|
|
632
|
-
:disabled="disabledStatus"
|
|
633
|
-
/>
|
|
634
|
-
<dl>
|
|
635
|
-
<dt>Selected value:</dt>
|
|
636
|
-
<dd>
|
|
637
|
-
<output>{{ inputGroupValue2 }}</output>
|
|
638
|
-
</dd>
|
|
639
|
-
</dl>
|
|
640
|
-
<h3>Input Group with Checkboxes/Radiobuttons (replaced)</h3>
|
|
641
|
-
<CmdInputGroup
|
|
642
|
-
labelText="Grouplabel for radio-group styled as replaced-input-type:"
|
|
643
|
-
:inputElements="inputGroupReplacedRadiobuttonsData"
|
|
644
|
-
inputTypes="radio"
|
|
645
|
-
v-model="inputGroupValueReplaceInputTypeRadio"
|
|
646
|
-
:replaceInputType="true"
|
|
647
|
-
:status="validationStatus"
|
|
648
|
-
:disabled="disabledStatus"
|
|
649
|
-
/>
|
|
650
|
-
<dl>
|
|
651
|
-
<dt>Selected value:</dt>
|
|
652
|
-
<dd>
|
|
653
|
-
<output>{{ inputGroupValueReplaceInputTypeRadio }}</output>
|
|
654
|
-
</dd>
|
|
655
|
-
</dl>
|
|
656
|
-
<CmdInputGroup
|
|
657
|
-
labelText="Grouplabel for checkbox-group styled as replaced-input-type:"
|
|
658
|
-
:inputElements="inputGroupReplacedRadiobuttonsData"
|
|
659
|
-
inputTypes="checkbox"
|
|
660
|
-
v-model="inputGroupValueReplaceInputTypeCheckbox"
|
|
661
|
-
:replaceInputType="true"
|
|
662
|
-
:required="true"
|
|
663
|
-
:status="validationStatus"
|
|
664
|
-
:disabled="disabledStatus"
|
|
665
|
-
/>
|
|
666
|
-
<dl>
|
|
667
|
-
<dt>Selected value(s):</dt>
|
|
668
|
-
<dd>
|
|
669
|
-
<output>{{ inputGroupValueReplaceInputTypeCheckbox }}</output>
|
|
670
|
-
</dd>
|
|
671
|
-
</dl>
|
|
672
|
-
<h3>Input Groups with Checkboxes/
|
|
673
|
-
Radiobuttons (toggle-switches)</h3>
|
|
674
|
-
<CmdInputGroup
|
|
675
|
-
labelText="Grouplabel for checkbox-group styled as toggle-switches:"
|
|
676
|
-
:inputElements="inputGroupRadiobuttonsData"
|
|
677
|
-
inputTypes="checkbox"
|
|
678
|
-
v-model="inputGroupValueToggleSwitchCheckbox"
|
|
679
|
-
:toggleSwitch="true"
|
|
680
|
-
required="required"
|
|
681
|
-
:status="validationStatus"
|
|
682
|
-
:disabled="disabledStatus"
|
|
683
|
-
/>
|
|
684
|
-
<dl>
|
|
685
|
-
<dt>Selected value(s):</dt>
|
|
686
|
-
<dd>
|
|
687
|
-
<output>{{ inputGroupValueToggleSwitchCheckbox }}</output>
|
|
688
|
-
</dd>
|
|
689
|
-
</dl>
|
|
690
|
-
<CmdInputGroup
|
|
691
|
-
labelText="Grouplabel for radio-group styled as toggle-switches:"
|
|
692
|
-
:inputElements="inputGroupToggleSwitchRadiobuttonsData"
|
|
693
|
-
inputTypes="radio"
|
|
694
|
-
v-model="inputGroupValueToggleSwitchRadio"
|
|
695
|
-
:toggleSwitch="true"
|
|
696
|
-
required="required"
|
|
697
|
-
:status="validationStatus"
|
|
698
|
-
:disabled="disabledStatus"
|
|
699
|
-
/>
|
|
700
|
-
<dl>
|
|
701
|
-
<dt>Selected value(s):</dt>
|
|
702
|
-
<dd>
|
|
703
|
-
<output>{{ inputGroupValueToggleSwitchRadio }}</output>
|
|
704
|
-
</dd>
|
|
705
|
-
</dl>
|
|
706
|
-
<CmdInputGroup
|
|
707
|
-
labelText="Grouplabel for radio-group given by property styled as multiple-switch:"
|
|
708
|
-
:inputElements="inputGroupRadiobuttonsData.map(item => ({...item, id: item.id + '-multi', name: item.name + '-multi'}))"
|
|
709
|
-
inputTypes="radio"
|
|
710
|
-
:multipleSwitch="true"
|
|
711
|
-
v-model="inputGroupValue3"
|
|
712
|
-
:status="validationStatus"
|
|
713
|
-
:disabled="disabledStatus"
|
|
714
|
-
/>
|
|
715
|
-
<dl>
|
|
716
|
-
<dt>Selected value(s):</dt>
|
|
717
|
-
<dd>
|
|
718
|
-
<output>{{ inputGroupValue3 }}</output>
|
|
719
|
-
</dd>
|
|
720
|
-
</dl>
|
|
721
|
-
<CmdInputGroup
|
|
722
|
-
labelText="Grouplabel for checkbox-group styled as multiple-switch (stretched horizontally):"
|
|
723
|
-
:inputElements="inputGroupCheckboxes"
|
|
724
|
-
inputTypes="checkbox"
|
|
725
|
-
:multipleSwitch="true"
|
|
726
|
-
:required="true"
|
|
727
|
-
v-model="inputGroupValue4"
|
|
728
|
-
:stretchHorizontally="true"
|
|
729
|
-
:status="validationStatus"
|
|
730
|
-
:disabled="disabledStatus"
|
|
731
|
-
/>
|
|
732
|
-
<dl>
|
|
733
|
-
<dt>Selected value(s):</dt>
|
|
734
|
-
<dd>
|
|
735
|
-
<output>{{ inputGroupValue4 }}</output>
|
|
736
|
-
</dd>
|
|
737
|
-
</dl>
|
|
738
|
-
</fieldset><!-- end fieldset -->
|
|
739
|
-
<div class="button-wrapper">
|
|
740
|
-
<small><sup>*</sup>values will not be submitted with the form!</small>
|
|
741
|
-
<CmdFormElement element="button"
|
|
742
|
-
:nativeButton="{text: 'Submit-button from component'}"
|
|
743
|
-
type="submit"
|
|
744
|
-
id="submitbutton"
|
|
745
|
-
name="submitbutton"
|
|
746
|
-
:disabled="disabledStatus"
|
|
747
|
-
/>
|
|
748
|
-
<button type="submit" :disabled="disabledStatus">
|
|
749
|
-
<span class="icon-check"></span>
|
|
750
|
-
<span>Native submit-button</span>
|
|
751
|
-
</button>
|
|
752
|
-
</div>
|
|
753
|
-
</CmdForm>
|
|
754
|
-
</CmdWidthLimitationWrapper>
|
|
755
|
-
<!-- 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 ----------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
756
768
|
|
|
757
|
-
|
|
758
|
-
|
|
759
|
-
|
|
769
|
+
<!-- begin back to top button ----------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
770
|
+
<CmdBackToTopButton/>
|
|
771
|
+
<!-- end back to top button ----------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
760
772
|
|
|
761
|
-
|
|
762
|
-
|
|
763
|
-
|
|
764
|
-
|
|
765
|
-
|
|
766
|
-
|
|
767
|
-
|
|
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 ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
768
780
|
|
|
769
|
-
|
|
770
|
-
|
|
771
|
-
|
|
772
|
-
|
|
773
|
-
|
|
774
|
-
|
|
775
|
-
|
|
776
|
-
|
|
777
|
-
|
|
778
|
-
|
|
779
|
-
|
|
780
|
-
|
|
781
|
-
|
|
782
|
-
|
|
783
|
-
|
|
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>
|
|
784
805
|
<p>
|
|
785
|
-
|
|
806
|
+
Footer content
|
|
786
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>
|
|
787
827
|
<p>
|
|
788
|
-
|
|
828
|
+
footer content
|
|
789
829
|
</p>
|
|
790
|
-
</
|
|
791
|
-
</
|
|
792
|
-
|
|
793
|
-
|
|
794
|
-
|
|
795
|
-
|
|
796
|
-
|
|
797
|
-
|
|
798
|
-
|
|
799
|
-
|
|
800
|
-
|
|
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
|
-
</h3>
|
|
827
|
-
</template>
|
|
828
|
-
<template v-slot:body>
|
|
829
|
-
<img src="media/images/content-images/logo-business-edition-landscape.jpg" alt="Alternative text"/>
|
|
830
|
-
</template>
|
|
831
|
-
</CmdBox>
|
|
832
|
-
</div>
|
|
833
|
-
<div class="grid-small-item">
|
|
834
|
-
<CmdBox>
|
|
835
|
-
<template v-slot:header>
|
|
836
|
-
<h3>
|
|
837
|
-
Box with image and content
|
|
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
|
-
<div class="default-padding">
|
|
843
|
-
<h4>Headline</h4>
|
|
844
|
-
<p>This is some text information i.e a short-text for a news teaser.</p>
|
|
845
|
-
</div>
|
|
846
|
-
</template>
|
|
847
|
-
<template v-slot:footer>
|
|
848
|
-
<p>
|
|
849
|
-
<a href="#">Read more…</a>
|
|
850
|
-
</p>
|
|
851
|
-
</template>
|
|
852
|
-
</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>
|
|
853
866
|
</div>
|
|
854
|
-
|
|
855
|
-
|
|
856
|
-
|
|
857
|
-
|
|
858
|
-
|
|
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>
|
|
859
872
|
</div>
|
|
860
|
-
|
|
861
|
-
|
|
862
|
-
|
|
863
|
-
|
|
864
|
-
|
|
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>
|
|
865
878
|
</div>
|
|
866
|
-
|
|
867
|
-
|
|
868
|
-
|
|
869
|
-
|
|
870
|
-
|
|
871
|
-
|
|
872
|
-
|
|
873
|
-
|
|
874
|
-
|
|
875
|
-
|
|
876
|
-
|
|
877
|
-
|
|
878
|
-
|
|
879
|
-
|
|
880
|
-
|
|
881
|
-
|
|
882
|
-
|
|
883
|
-
|
|
884
|
-
|
|
885
|
-
</
|
|
886
|
-
|
|
887
|
-
<!-- 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 ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
888
900
|
|
|
889
|
-
|
|
890
|
-
|
|
891
|
-
|
|
892
|
-
|
|
893
|
-
|
|
894
|
-
|
|
895
|
-
|
|
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 ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
896
908
|
|
|
897
|
-
|
|
898
|
-
|
|
899
|
-
|
|
900
|
-
|
|
901
|
-
|
|
902
|
-
|
|
903
|
-
|
|
904
|
-
|
|
905
|
-
|
|
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 ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
906
918
|
|
|
907
|
-
|
|
908
|
-
|
|
909
|
-
|
|
910
|
-
|
|
911
|
-
|
|
912
|
-
|
|
913
|
-
|
|
914
|
-
|
|
915
|
-
|
|
916
|
-
|
|
917
|
-
|
|
918
|
-
|
|
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 ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
919
931
|
|
|
920
|
-
|
|
921
|
-
|
|
922
|
-
|
|
923
|
-
|
|
924
|
-
|
|
925
|
-
|
|
926
|
-
|
|
927
|
-
|
|
928
|
-
|
|
929
|
-
|
|
930
|
-
|
|
931
|
-
|
|
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 ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
932
944
|
|
|
933
|
-
|
|
934
|
-
|
|
935
|
-
|
|
936
|
-
|
|
937
|
-
|
|
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>
|
|
938
950
|
|
|
939
|
-
|
|
940
|
-
|
|
941
|
-
|
|
942
|
-
|
|
943
|
-
|
|
951
|
+
<a id="section-image-gallery"></a>
|
|
952
|
+
<CmdWidthLimitationWrapper>
|
|
953
|
+
<h2 class="headline-demopage">Image-Gallery</h2>
|
|
954
|
+
<CmdImageGallery :images="imageGalleryData"/>
|
|
955
|
+
</CmdWidthLimitationWrapper>
|
|
944
956
|
|
|
945
|
-
|
|
946
|
-
|
|
947
|
-
|
|
948
|
-
|
|
949
|
-
|
|
950
|
-
|
|
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>
|
|
951
963
|
|
|
952
|
-
|
|
953
|
-
|
|
954
|
-
|
|
955
|
-
|
|
956
|
-
|
|
957
|
-
|
|
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>
|
|
958
970
|
|
|
959
|
-
|
|
960
|
-
|
|
961
|
-
|
|
962
|
-
|
|
963
|
-
|
|
964
|
-
|
|
965
|
-
|
|
966
|
-
|
|
967
|
-
|
|
968
|
-
|
|
969
|
-
|
|
970
|
-
|
|
971
|
-
|
|
972
|
-
|
|
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 ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
973
985
|
|
|
974
|
-
|
|
975
|
-
|
|
976
|
-
|
|
977
|
-
|
|
978
|
-
|
|
979
|
-
|
|
980
|
-
|
|
981
|
-
|
|
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>
|
|
982
994
|
|
|
983
|
-
|
|
984
|
-
|
|
985
|
-
|
|
986
|
-
|
|
987
|
-
|
|
988
|
-
|
|
989
|
-
|
|
990
|
-
|
|
991
|
-
|
|
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>
|
|
992
1004
|
|
|
993
|
-
|
|
994
|
-
|
|
995
|
-
|
|
996
|
-
|
|
997
|
-
|
|
998
|
-
|
|
999
|
-
|
|
1000
|
-
|
|
1001
|
-
|
|
1002
|
-
|
|
1003
|
-
|
|
1004
|
-
|
|
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>
|
|
1005
1017
|
|
|
1006
|
-
|
|
1007
|
-
|
|
1008
|
-
|
|
1009
|
-
|
|
1010
|
-
|
|
1018
|
+
<a id="section-share-buttons"></a>
|
|
1019
|
+
<CmdWidthLimitationWrapper>
|
|
1020
|
+
<h2 class="headline-demopage">Share buttons</h2>
|
|
1021
|
+
<CmdShareButtons :share-buttons="shareButtonsData"/>
|
|
1022
|
+
</CmdWidthLimitationWrapper>
|
|
1011
1023
|
|
|
1012
|
-
|
|
1013
|
-
|
|
1014
|
-
|
|
1015
|
-
|
|
1016
|
-
|
|
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>
|
|
1017
1029
|
|
|
1018
|
-
|
|
1019
|
-
|
|
1020
|
-
|
|
1021
|
-
|
|
1022
|
-
|
|
1023
|
-
|
|
1024
|
-
|
|
1025
|
-
|
|
1026
|
-
|
|
1027
|
-
|
|
1028
|
-
|
|
1029
|
-
|
|
1030
|
-
|
|
1031
|
-
|
|
1032
|
-
|
|
1033
|
-
|
|
1034
|
-
|
|
1035
|
-
|
|
1036
|
-
|
|
1037
|
-
|
|
1038
|
-
|
|
1039
|
-
|
|
1040
|
-
|
|
1041
|
-
|
|
1042
|
-
|
|
1043
|
-
|
|
1044
|
-
|
|
1045
|
-
|
|
1046
|
-
|
|
1047
|
-
|
|
1048
|
-
|
|
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>
|
|
1049
1061
|
|
|
1050
|
-
|
|
1051
|
-
|
|
1052
|
-
|
|
1053
|
-
|
|
1054
|
-
|
|
1055
|
-
|
|
1056
|
-
|
|
1057
|
-
|
|
1058
|
-
|
|
1059
|
-
|
|
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>
|
|
1060
1072
|
|
|
1061
|
-
|
|
1062
|
-
|
|
1063
|
-
|
|
1064
|
-
|
|
1065
|
-
|
|
1066
|
-
|
|
1067
|
-
|
|
1068
|
-
|
|
1069
|
-
|
|
1070
|
-
|
|
1071
|
-
|
|
1072
|
-
|
|
1073
|
-
|
|
1074
|
-
|
|
1075
|
-
|
|
1076
|
-
|
|
1077
|
-
|
|
1078
|
-
|
|
1079
|
-
|
|
1080
|
-
|
|
1081
|
-
|
|
1082
|
-
|
|
1083
|
-
|
|
1084
|
-
|
|
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>
|
|
1085
1097
|
|
|
1086
|
-
|
|
1087
|
-
|
|
1088
|
-
|
|
1089
|
-
|
|
1090
|
-
|
|
1091
|
-
|
|
1092
|
-
|
|
1093
|
-
|
|
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>
|
|
1094
1106
|
|
|
1095
|
-
|
|
1096
|
-
|
|
1097
|
-
|
|
1098
|
-
|
|
1099
|
-
|
|
1100
|
-
|
|
1101
|
-
|
|
1102
|
-
|
|
1103
|
-
|
|
1104
|
-
|
|
1105
|
-
|
|
1106
|
-
|
|
1107
|
-
|
|
1108
|
-
|
|
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>
|
|
1109
1121
|
|
|
1110
|
-
|
|
1111
|
-
|
|
1112
|
-
|
|
1113
|
-
|
|
1114
|
-
|
|
1115
|
-
|
|
1116
|
-
|
|
1117
|
-
|
|
1118
|
-
|
|
1119
|
-
|
|
1120
|
-
|
|
1121
|
-
|
|
1122
|
-
|
|
1123
|
-
|
|
1124
|
-
|
|
1125
|
-
|
|
1126
|
-
|
|
1127
|
-
|
|
1128
|
-
|
|
1129
|
-
|
|
1130
|
-
|
|
1131
|
-
|
|
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>
|
|
1132
1144
|
|
|
1133
|
-
|
|
1134
|
-
|
|
1135
|
-
|
|
1136
|
-
|
|
1137
|
-
|
|
1138
|
-
|
|
1139
|
-
|
|
1140
|
-
|
|
1141
|
-
|
|
1142
|
-
|
|
1143
|
-
|
|
1144
|
-
|
|
1145
|
-
|
|
1146
|
-
|
|
1147
|
-
|
|
1148
|
-
|
|
1149
|
-
|
|
1150
|
-
</div>
|
|
1151
|
-
</CmdSiteFooter>
|
|
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>
|
|
1152
1162
|
|
|
1153
|
-
|
|
1163
|
+
<CmdCopyrightInformation/>
|
|
1154
1164
|
|
|
1155
|
-
|
|
1156
|
-
|
|
1157
|
-
|
|
1158
|
-
|
|
1159
|
-
|
|
1160
|
-
|
|
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"
|
|
1161
1171
|
|
|
1162
|
-
|
|
1163
|
-
|
|
1164
|
-
|
|
1165
|
-
|
|
1166
|
-
|
|
1167
|
-
|
|
1168
|
-
|
|
1169
|
-
|
|
1170
|
-
|
|
1171
|
-
|
|
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>
|
|
1172
1183
|
</template>
|
|
1173
1184
|
|
|
1174
1185
|
<script>
|
|
@@ -1248,6 +1259,8 @@ import {openFancyBox} from "@/components/CmdFancyBox"
|
|
|
1248
1259
|
// import external functions
|
|
1249
1260
|
import * as functions from "@/mixins/FieldValidation.js"
|
|
1250
1261
|
|
|
1262
|
+
import {localizedTime} from "./components/CmdOpeningHours"
|
|
1263
|
+
|
|
1251
1264
|
export default {
|
|
1252
1265
|
name: "App",
|
|
1253
1266
|
components: {
|
|
@@ -1422,6 +1435,9 @@ export default {
|
|
|
1422
1435
|
}
|
|
1423
1436
|
},
|
|
1424
1437
|
methods: {
|
|
1438
|
+
localizedTime(language) {
|
|
1439
|
+
return (h, m) => (localizedTime(language))(h, m).toLowerCase()
|
|
1440
|
+
},
|
|
1425
1441
|
closeCookieDisclaimer(event) {
|
|
1426
1442
|
this.fancyBoxCookieDisclaimer = false
|
|
1427
1443
|
alert(event.join(", "))
|
|
@@ -1475,6 +1491,8 @@ export default {
|
|
|
1475
1491
|
</script>
|
|
1476
1492
|
|
|
1477
1493
|
<style lang="scss">
|
|
1494
|
+
|
|
1495
|
+
|
|
1478
1496
|
.list-status {
|
|
1479
1497
|
.active {
|
|
1480
1498
|
color: var(--text-color);
|