comand-component-library 3.1.40 → 3.1.44
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 +3 -2
- package/src/App.vue +849 -834
- package/src/assets/data/fake-select-colors.json +10 -10
- package/src/assets/data/fake-select-countries.json +14 -21
- package/src/assets/data/fake-select-options-with-icons.json +23 -0
- package/src/assets/data/fake-select-options.json +6 -6
- package/src/assets/data/select-options.json +14 -0
- package/src/components/CmdFakeSelect.vue +113 -56
- package/src/components/CmdFormElement.vue +2 -6
- package/src/components/CmdLoginForm.vue +29 -7
- package/src/components/CmdProgressBar.vue +1 -1
- package/src/components/CmdSwitchButton.vue +5 -3
- package/src/components/CmdUploadForm.vue +722 -174
- package/src/mixins/CmdUploadForm/DefaultMessageProperties.js +49 -0
- package/src/mixins/I18n.js +56 -0
- package/src/utils/GetFileExtension.js +15 -0
package/src/App.vue
CHANGED
|
@@ -1,202 +1,218 @@
|
|
|
1
1
|
<!--suppress HtmlUnknownTarget, NpmUsedModulesInstalled, JSUnresolvedVariable -->
|
|
2
2
|
<template>
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
</template>
|
|
8
|
-
<template v-slot:logo>
|
|
9
|
-
<CmdCompanyLogo :link="companyLogoData.link" altText="CoManD Logo" :pathDefaultLogo="require('@/assets/images/logo.svg')"
|
|
10
|
-
:pathDarkmodeLogo="require('@/assets/images/logo-darkmode.svg')"/>
|
|
11
|
-
</template>
|
|
12
|
-
</CmdSiteHeader>
|
|
13
|
-
<main>
|
|
14
|
-
<CmdWidthLimitationWrapper>
|
|
15
|
-
<div class="flex-container">
|
|
16
|
-
<ul>
|
|
17
|
-
<li><a href="#section-accordion">Accordion</a></li>
|
|
18
|
-
<li><a href="#section-advanced-form-elements">Advanced Form Elements</a></li>
|
|
19
|
-
<li><a href="#section-boxes">Boxes</a></li>
|
|
20
|
-
<li><a href="#section-breadcrumbs">Breadcrumbs</a></li>
|
|
21
|
-
<li><a href="#section-cookie-disclaimer">Cookie-Disclaimer</a></li>
|
|
22
|
-
</ul>
|
|
23
|
-
<ul>
|
|
24
|
-
<li><a href="#section-fancybox">Fancybox</a></li>
|
|
25
|
-
<li><a href="#section-google-maps-integration">Google-Maps™-Integration</a></li>
|
|
26
|
-
<li><a href="#section-image-gallery">Image Gallery</a></li>
|
|
27
|
-
<li><a href="#section-image-zoom">Image-Zoom</a></li>
|
|
28
|
-
<li><a href="#section-login-form">Login Form</a></li>
|
|
29
|
-
</ul>
|
|
30
|
-
<ul>
|
|
31
|
-
<li><a href="#section-main-navigation">Main-Navigation</a></li>
|
|
32
|
-
<li><a href="#section-multistep-form-progress-bar">Multistepform-Progressbar</a></li>
|
|
33
|
-
<li><a href="#section-pager">Pager</a></li>
|
|
34
|
-
<li><a href="#section-share-buttons">Share Buttons</a></li>
|
|
35
|
-
<li><a href="#section-slideshow">Slideshow</a></li>
|
|
36
|
-
</ul>
|
|
37
|
-
<ul>
|
|
38
|
-
<li><a href="#section-system-message">System-Message</a></li>
|
|
39
|
-
<li><a href="#section-tables">Tables</a></li>
|
|
40
|
-
<li><a href="#section-tabs">Tabs</a></li>
|
|
41
|
-
<li><a href="#section-thumbnail-scroller">Thumbnail-Scroller</a></li>
|
|
42
|
-
<li><a href="#section-upload-form">Upload-Form</a></li>
|
|
43
|
-
</ul>
|
|
44
|
-
</div>
|
|
45
|
-
<hr/>
|
|
46
|
-
</CmdWidthLimitationWrapper>
|
|
47
|
-
|
|
48
|
-
<a id="section-accordion"></a>
|
|
49
|
-
<CmdWidthLimitationWrapper>
|
|
50
|
-
<h2 class="headline-demopage">Accordion</h2>
|
|
51
|
-
<h3>Single mode (only one can be opened)</h3>
|
|
52
|
-
<a href="#" @click.prevent="toggleAllAccordions()">Toggle all accordions</a>
|
|
53
|
-
<CmdAccordion :accordionData="accordionData.accordionData1"
|
|
54
|
-
toggleMode="single"
|
|
55
|
-
tooltip="Click to toggle content"
|
|
56
|
-
openIconClass="icon-single-arrow-up"
|
|
57
|
-
closeIconClass="icon-single-arrow-down"
|
|
58
|
-
ref="accordionGroup1"
|
|
59
|
-
/>
|
|
60
|
-
<h3>Multiple mode (all can be opened)</h3>
|
|
61
|
-
<CmdAccordion :accordionData="accordionData.accordionData2"
|
|
62
|
-
toggleMode="multiple"
|
|
63
|
-
tooltip="Click to toggle content"
|
|
64
|
-
openIconClass="icon-single-arrow-up"
|
|
65
|
-
closeIconClass="icon-single-arrow-down"
|
|
66
|
-
ref="accordionGroup2"
|
|
67
|
-
/>
|
|
68
|
-
<h3>Customized headline-level (without transition of content)</h3>
|
|
69
|
-
<CmdAccordion :accordionData="accordionData.accordionData2"
|
|
70
|
-
toggleMode="multiple"
|
|
71
|
-
tooltip="Click to toggle content"
|
|
72
|
-
openIconClass="icon-single-arrow-up"
|
|
73
|
-
closeIconClass="icon-single-arrow-down"
|
|
74
|
-
accordion-headline-level="h4"
|
|
75
|
-
:use-transition="false"
|
|
76
|
-
/>
|
|
77
|
-
<h3>Data given by slots</h3>
|
|
78
|
-
<CmdAccordion :accordionData="1">
|
|
79
|
-
<template v-slot:accordionHeadline0>
|
|
80
|
-
<h3><span class="icon-user-group"></span><span>User groups</span></h3>
|
|
3
|
+
<a id="anchor-back-to-top"></a>
|
|
4
|
+
<CmdSiteHeader :mainNavigationEntries="navigationData" :sticky="true">
|
|
5
|
+
<template v-slot:top-header>
|
|
6
|
+
<CmdTopHeaderNavigation :topHeaderNavigationData="topHeaderNavigationData" v-if="topHeaderNavigationData"/>
|
|
81
7
|
</template>
|
|
82
|
-
<template v-slot:
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
</p>
|
|
8
|
+
<template v-slot:logo>
|
|
9
|
+
<CmdCompanyLogo :link="companyLogoData.link" altText="CoManD Logo" :pathDefaultLogo="require('@/assets/images/logo.svg')"
|
|
10
|
+
:pathDarkmodeLogo="require('@/assets/images/logo-darkmode.svg')"/>
|
|
86
11
|
</template>
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
:status="formElementStatus"
|
|
135
|
-
placeholder="Type in text"
|
|
136
|
-
tooltipText="This is a tooltip"
|
|
137
|
-
/>
|
|
138
|
-
<CmdFormElement labelText="Input for selectbox:"
|
|
139
|
-
element="select"
|
|
140
|
-
:status="formElementStatus"
|
|
141
|
-
v-model:value="selectedOption"
|
|
142
|
-
:selectOptions="selectOptions"
|
|
143
|
-
/>
|
|
144
|
-
<CmdFormElement labelText="Input for datalist:"
|
|
145
|
-
element="input"
|
|
146
|
-
type="text"
|
|
147
|
-
:status="formElementStatus"
|
|
148
|
-
placeholder="Type in option"
|
|
149
|
-
:datalist="datalist"
|
|
150
|
-
tooltipText="This is a tooltip"
|
|
12
|
+
</CmdSiteHeader>
|
|
13
|
+
<main>
|
|
14
|
+
<CmdWidthLimitationWrapper>
|
|
15
|
+
<div class="flex-container">
|
|
16
|
+
<ul>
|
|
17
|
+
<li><a href="#section-accordion">Accordion</a></li>
|
|
18
|
+
<li><a href="#section-advanced-form-elements">Advanced Form Elements</a></li>
|
|
19
|
+
<li><a href="#section-boxes">Boxes</a></li>
|
|
20
|
+
<li><a href="#section-breadcrumbs">Breadcrumbs</a></li>
|
|
21
|
+
<li><a href="#section-cookie-disclaimer">Cookie-Disclaimer</a></li>
|
|
22
|
+
</ul>
|
|
23
|
+
<ul>
|
|
24
|
+
<li><a href="#section-fancybox">Fancybox</a></li>
|
|
25
|
+
<li><a href="#section-google-maps-integration">Google-Maps™-Integration</a></li>
|
|
26
|
+
<li><a href="#section-image-gallery">Image Gallery</a></li>
|
|
27
|
+
<li><a href="#section-image-zoom">Image-Zoom</a></li>
|
|
28
|
+
<li><a href="#section-login-form">Login Form</a></li>
|
|
29
|
+
</ul>
|
|
30
|
+
<ul>
|
|
31
|
+
<li><a href="#section-main-navigation">Main-Navigation</a></li>
|
|
32
|
+
<li><a href="#section-multistep-form-progress-bar">Multistepform-Progressbar</a></li>
|
|
33
|
+
<li><a href="#section-pager">Pager</a></li>
|
|
34
|
+
<li><a href="#section-share-buttons">Share Buttons</a></li>
|
|
35
|
+
<li><a href="#section-slideshow">Slideshow</a></li>
|
|
36
|
+
</ul>
|
|
37
|
+
<ul>
|
|
38
|
+
<li><a href="#section-system-message">System-Message</a></li>
|
|
39
|
+
<li><a href="#section-tables">Tables</a></li>
|
|
40
|
+
<li><a href="#section-tabs">Tabs</a></li>
|
|
41
|
+
<li><a href="#section-thumbnail-scroller">Thumbnail-Scroller</a></li>
|
|
42
|
+
<li><a href="#section-upload-form">Upload-Form</a></li>
|
|
43
|
+
</ul>
|
|
44
|
+
</div>
|
|
45
|
+
<hr/>
|
|
46
|
+
</CmdWidthLimitationWrapper>
|
|
47
|
+
|
|
48
|
+
<a id="section-accordion"></a>
|
|
49
|
+
<CmdWidthLimitationWrapper>
|
|
50
|
+
<h2 class="headline-demopage">Accordion</h2>
|
|
51
|
+
<h3>Single mode (only one can be opened)</h3>
|
|
52
|
+
<a href="#" @click.prevent="toggleAllAccordions()">Toggle all accordions</a>
|
|
53
|
+
<CmdAccordion :accordionData="accordionData.accordionData1"
|
|
54
|
+
toggleMode="single"
|
|
55
|
+
tooltip="Click to toggle content"
|
|
56
|
+
openIconClass="icon-single-arrow-up"
|
|
57
|
+
closeIconClass="icon-single-arrow-down"
|
|
58
|
+
ref="accordionGroup1"
|
|
151
59
|
/>
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
type="filterList"
|
|
160
|
-
iconClass="icon-single-arrow-down"
|
|
60
|
+
<h3>Multiple mode (all can be opened)</h3>
|
|
61
|
+
<CmdAccordion :accordionData="accordionData.accordionData2"
|
|
62
|
+
toggleMode="multiple"
|
|
63
|
+
tooltip="Click to toggle content"
|
|
64
|
+
openIconClass="icon-single-arrow-up"
|
|
65
|
+
closeIconClass="icon-single-arrow-down"
|
|
66
|
+
ref="accordionGroup2"
|
|
161
67
|
/>
|
|
162
|
-
<
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
</div>
|
|
171
|
-
<img src="media/images/thumbnail-scroller/thumbnail/logo-cmd-blue-landscape.jpg" alt="image"/>
|
|
172
|
-
</li>
|
|
173
|
-
</ul>
|
|
174
|
-
</CmdFakeSelect>
|
|
175
|
-
<CmdFakeSelect :status="formElementStatus"
|
|
176
|
-
:selectData="fakeSelectCountriesData"
|
|
177
|
-
v-model:value="selectedCountry"
|
|
178
|
-
defaultOptionName="Select country:"
|
|
179
|
-
type="country" iconClass="icon-single-arrow-down"
|
|
68
|
+
<h3>Customized headline-level (without transition of content)</h3>
|
|
69
|
+
<CmdAccordion :accordionData="accordionData.accordionData2"
|
|
70
|
+
toggleMode="multiple"
|
|
71
|
+
tooltip="Click to toggle content"
|
|
72
|
+
openIconClass="icon-single-arrow-up"
|
|
73
|
+
closeIconClass="icon-single-arrow-down"
|
|
74
|
+
accordion-headline-level="h4"
|
|
75
|
+
:use-transition="false"
|
|
180
76
|
/>
|
|
181
|
-
<
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
77
|
+
<h3>Data given by slots</h3>
|
|
78
|
+
<CmdAccordion :accordionData="1">
|
|
79
|
+
<template v-slot:accordionHeadline0>
|
|
80
|
+
<h3><span class="icon-user-group"></span><span>User groups</span></h3>
|
|
81
|
+
</template>
|
|
82
|
+
<template v-slot:accordionContent0>
|
|
83
|
+
<p>
|
|
84
|
+
Content
|
|
85
|
+
</p>
|
|
86
|
+
</template>
|
|
87
|
+
</CmdAccordion>
|
|
88
|
+
<CmdAccordion :accordionData="1" :useCustomHeader="true">
|
|
89
|
+
<template v-slot:customHeadline0>
|
|
90
|
+
<h4>Some headline</h4>
|
|
91
|
+
</template>
|
|
92
|
+
<template v-slot:accordionContent0>
|
|
93
|
+
<p>
|
|
94
|
+
Content
|
|
95
|
+
</p>
|
|
96
|
+
</template>
|
|
97
|
+
</CmdAccordion>
|
|
98
|
+
</CmdWidthLimitationWrapper>
|
|
99
|
+
|
|
100
|
+
<!-- begin advanced form elements --------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
101
|
+
<a id="section-advanced-form-elements"></a>
|
|
102
|
+
<CmdWidthLimitationWrapper>
|
|
103
|
+
<a id="anchor-advanced-form-elements"></a>
|
|
104
|
+
<h2 class="headline-demopage">Advanced Form Elements</h2>
|
|
105
|
+
<h3>Form elements status:</h3>
|
|
106
|
+
<div class="flex-container">
|
|
107
|
+
<ul class="list-status">
|
|
108
|
+
<li><a href="#" @click.prevent="formElementStatus = ''" :class="{'active' : formElementStatus === ''}"
|
|
109
|
+
id="status-default">Default</a></li>
|
|
110
|
+
<li><a href="#" @click.prevent="formElementStatus = 'error'"
|
|
111
|
+
:class="{'active' : formElementStatus === 'error'}" id="status-error">Error</a></li>
|
|
112
|
+
<li><a href="#" @click.prevent="formElementStatus = 'disabled'"
|
|
113
|
+
:class="{'active' : formElementStatus === 'disabled'}" id="status-disabled">Disabled</a></li>
|
|
114
|
+
</ul>
|
|
115
|
+
</div>
|
|
116
|
+
|
|
117
|
+
<!-- begin formfilters -->
|
|
118
|
+
<CmdFormFilters v-model:selectedOptions="selectedOptions"
|
|
119
|
+
:selectedOptionsName="getOptionName"
|
|
120
|
+
labelDeleteAllFilters="Delete all filters"
|
|
121
|
+
iconClassDeleteAllFilters="icon-delete"
|
|
122
|
+
iconClassDeleteFilter="icon-cancel"
|
|
187
123
|
/>
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
124
|
+
<!-- end formfilters -->
|
|
125
|
+
|
|
126
|
+
<form method="get" novalidate="novalidate" id="advanced-form-elements">
|
|
127
|
+
<fieldset class="grid-container-create-columns">
|
|
128
|
+
<legend>Legend</legend>
|
|
129
|
+
<h2>Form Element-Component</h2>
|
|
130
|
+
<div class="flex-container">
|
|
131
|
+
<CmdFormElement labelText="Input (type text):"
|
|
132
|
+
element="input"
|
|
133
|
+
type="text"
|
|
134
|
+
:status="formElementStatus"
|
|
135
|
+
placeholder="Type in text"
|
|
136
|
+
tooltipText="This is a tooltip"
|
|
137
|
+
/>
|
|
138
|
+
<CmdFormElement labelText="Input for selectbox:"
|
|
139
|
+
element="select"
|
|
140
|
+
:status="formElementStatus"
|
|
141
|
+
v-model:value="selectedOption"
|
|
142
|
+
:selectOptions="selectOptionsData"
|
|
143
|
+
/>
|
|
144
|
+
<CmdFormElement labelText="Input for datalist:"
|
|
145
|
+
element="input"
|
|
146
|
+
type="text"
|
|
147
|
+
:status="formElementStatus"
|
|
148
|
+
placeholder="Type in option"
|
|
149
|
+
:datalist="datalist"
|
|
150
|
+
tooltipText="This is a tooltip"
|
|
151
|
+
/>
|
|
152
|
+
</div>
|
|
153
|
+
<h2>Fake Selects</h2>
|
|
154
|
+
<div class="flex-container">
|
|
155
|
+
<!-- type === default: normal selectbox (with optional icons) -->
|
|
156
|
+
<CmdFakeSelect labelText="Default selectbox:"
|
|
157
|
+
:status="formElementStatus"
|
|
158
|
+
:selectData="fakeSelectOptionsData"
|
|
159
|
+
v-model:value="fakeSelectDefault"
|
|
160
|
+
defaultOptionName="Select an option:"
|
|
161
|
+
/>
|
|
162
|
+
<CmdFakeSelect labelText="Default selectbox with icons:"
|
|
163
|
+
:status="formElementStatus"
|
|
164
|
+
:selectData="fakeSelectOptionsWithIconsData"
|
|
165
|
+
v-model:value="fakeSelectDefaultWithIcons"
|
|
166
|
+
defaultOptionName="Select an option:"
|
|
167
|
+
/>
|
|
168
|
+
<!-- type === checkboxOptions: selectbox with checkboxes for each option -->
|
|
169
|
+
<CmdFakeSelect labelText="Selectbox with checkboxes:"
|
|
170
|
+
:status="formElementStatus"
|
|
171
|
+
:selectData="fakeSelectOptionsData"
|
|
172
|
+
v-model:value="fakeSelectCheckbox"
|
|
173
|
+
defaultOptionName="Filters:"
|
|
174
|
+
type="checkboxOptions"
|
|
175
|
+
/>
|
|
176
|
+
<CmdFakeSelect labelText="Selectbox with slot-content:"
|
|
177
|
+
:status="formElementStatus"
|
|
178
|
+
type="content"
|
|
179
|
+
defaultOptionName="HTML-Content:">
|
|
180
|
+
<ul class="custom-fake-select-content">
|
|
181
|
+
<li>
|
|
182
|
+
<div>
|
|
183
|
+
<h3>Headline</h3>
|
|
184
|
+
<p>Some content inside a paragraph</p>
|
|
185
|
+
</div>
|
|
186
|
+
<img src="media/images/thumbnail-scroller/thumbnail/logo-cmd-blue-landscape.jpg" alt="image"/>
|
|
187
|
+
</li>
|
|
188
|
+
</ul>
|
|
189
|
+
</CmdFakeSelect>
|
|
190
|
+
<CmdFakeSelect labelText="Selectbox with country flags:"
|
|
191
|
+
:status="formElementStatus"
|
|
192
|
+
:selectData="fakeSelectCountriesData"
|
|
193
|
+
v-model:value="selectedCountry"
|
|
194
|
+
defaultOptionName="Select country:"
|
|
195
|
+
type="country"
|
|
196
|
+
/>
|
|
197
|
+
<CmdFakeSelect labelText="Selectbox with colors:"
|
|
198
|
+
:status="formElementStatus"
|
|
199
|
+
:selectData="fakeSelectColorsData"
|
|
200
|
+
v-model:value="selectedColor"
|
|
201
|
+
defaultOptionName="Select color:"
|
|
202
|
+
type="color"
|
|
203
|
+
/>
|
|
204
|
+
</div>
|
|
205
|
+
|
|
206
|
+
<!-- begin progress bar -->
|
|
207
|
+
<h2>Progress Bar [native]</h2>
|
|
208
|
+
<CmdProgressBar labelText="Progress Bar (with optional output):" id="progress-bar2" max="100"/>
|
|
209
|
+
<!-- end progress bar -->
|
|
210
|
+
|
|
211
|
+
<!-- begin slider -->
|
|
212
|
+
<h2>Slider [native]</h2>
|
|
213
|
+
<label for="range-slider" :class="formElementStatus">
|
|
214
|
+
<span>Single-Slider (with in- and output):</span>
|
|
215
|
+
<span class="flex-container no-flex">
|
|
200
216
|
<input type="number" :class="formElementStatus" v-model="rangeValue"
|
|
201
217
|
:disabled="formElementStatus === 'disabled'" min="0" max="100"/>
|
|
202
218
|
<input type="range"
|
|
@@ -208,16 +224,16 @@
|
|
|
208
224
|
min="0"
|
|
209
225
|
max="100"/>
|
|
210
226
|
</span>
|
|
211
|
-
|
|
212
|
-
|
|
227
|
+
</label>
|
|
228
|
+
<!-- end slider -->
|
|
213
229
|
|
|
214
|
-
|
|
230
|
+
<hr/>
|
|
215
231
|
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
232
|
+
<!-- begin toggle-switch-radio with switch-label -->
|
|
233
|
+
<h2>Toggle-Switches (Radio and Checkbox) with Switch-Label</h2>
|
|
234
|
+
<div class="label inline">
|
|
235
|
+
<span>Label for Toggle-Switch-Checkbox with Switch-Label:</span>
|
|
236
|
+
<span class="flex-container no-flex">
|
|
221
237
|
<CmdSwitchButton
|
|
222
238
|
type="checkbox"
|
|
223
239
|
id="checkbox1"
|
|
@@ -246,13 +262,13 @@
|
|
|
246
262
|
:disabled="formElementStatus === 'disabled'"
|
|
247
263
|
v-model:value="switchButtonCheckbox"/>
|
|
248
264
|
</span>
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
265
|
+
<span>Current value: {{ switchButtonCheckbox }}</span>
|
|
266
|
+
</div>
|
|
267
|
+
<!-- end toggle-switch-radio with switch-label -->
|
|
252
268
|
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
269
|
+
<div class="label inline">
|
|
270
|
+
<span>Label for Toggle-Switch-Checkbox with Switch-Label (colored):</span>
|
|
271
|
+
<span class="flex-container no-flex">
|
|
256
272
|
<CmdSwitchButton
|
|
257
273
|
type="checkbox"
|
|
258
274
|
id="checkbox4"
|
|
@@ -264,14 +280,14 @@
|
|
|
264
280
|
:disabled="formElementStatus === 'disabled'"
|
|
265
281
|
v-model:value="switchButtonCheckboxColored"/>
|
|
266
282
|
</span>
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
283
|
+
<span>Current value: {{ switchButtonCheckboxColored }}</span>
|
|
284
|
+
</div>
|
|
285
|
+
<!-- end toggle-switch-radio with switch-label -->
|
|
286
|
+
|
|
287
|
+
<!-- begin toggle-switch-radio with switch-label (colored) -->
|
|
288
|
+
<div class="label inline">
|
|
289
|
+
<span>Label for Toggle-Switch-Radio with Switch-Label (colored):</span>
|
|
290
|
+
<span class="flex-container no-flex">
|
|
275
291
|
<CmdSwitchButton
|
|
276
292
|
type="radio"
|
|
277
293
|
id="radio1"
|
|
@@ -293,486 +309,491 @@
|
|
|
293
309
|
:disabled="formElementStatus === 'disabled'"
|
|
294
310
|
v-model:value="switchButtonRadio"/>
|
|
295
311
|
</span>
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
312
|
+
</div>
|
|
313
|
+
<!-- end toggle-switch-radio with switch-label (colored) -->
|
|
314
|
+
|
|
315
|
+
<h2>Inputfields in Columns</h2>
|
|
316
|
+
<CmdFormElement element="input"
|
|
317
|
+
required="required"
|
|
318
|
+
labelText="Label for inputfield (with tooltip):"
|
|
319
|
+
type="text"
|
|
320
|
+
id="inputfield1"
|
|
321
|
+
placeholder="This is placeholder text"
|
|
322
|
+
v-model:value="inputField1"
|
|
323
|
+
tooltipText="This is a tooltip!"
|
|
324
|
+
:status="formElementStatus"/>
|
|
325
|
+
|
|
326
|
+
<!-- begin inputfield in two columns -->
|
|
327
|
+
<div class="flex-container">
|
|
328
|
+
<CmdFormElement labelText="Label for inputfield (with icon):"
|
|
329
|
+
element="input"
|
|
330
|
+
type="text"
|
|
331
|
+
id="inputfield2"
|
|
332
|
+
iconClass="icon-user-profile"
|
|
333
|
+
placeholder="Type in username"
|
|
334
|
+
tooltipText="This is a tooltip!"
|
|
335
|
+
:status="formElementStatus"/>
|
|
336
|
+
<CmdFormElement element="input"
|
|
337
|
+
labelText="Label for inputfield (with icon):"
|
|
338
|
+
type="password"
|
|
339
|
+
id="inputfield3"
|
|
340
|
+
iconClass="icon-security-settings"
|
|
341
|
+
placeholder="Type in password"
|
|
342
|
+
tooltipText="This is a tooltip!"
|
|
343
|
+
:status="formElementStatus"/>
|
|
344
|
+
</div>
|
|
345
|
+
<!-- end inputfield in two columns -->
|
|
346
|
+
|
|
347
|
+
<CmdFormElement element="input"
|
|
348
|
+
labelText="Label (inline) for inputfield (number):"
|
|
349
|
+
:displayLabelInline="true"
|
|
350
|
+
type="number"
|
|
351
|
+
id="inputfield4"
|
|
352
|
+
:status="formElementStatus"/>
|
|
353
|
+
<CmdFormElement element="input"
|
|
354
|
+
labelText="Label (inline) for inputfield (date):"
|
|
355
|
+
:displayLabelInline="true"
|
|
356
|
+
type="date"
|
|
357
|
+
id="inputfield5"
|
|
358
|
+
:status="formElementStatus"/>
|
|
359
|
+
<CmdFormElement element="input"
|
|
360
|
+
labelText="Label (inline) for inputfield (search):"
|
|
361
|
+
:displayLabelInline="true"
|
|
362
|
+
type="search"
|
|
363
|
+
id="inputfield6"
|
|
364
|
+
placeholder="Keyword(s)"
|
|
365
|
+
:status="formElementStatus"/>
|
|
366
|
+
<div class="label inline">
|
|
367
|
+
<span>Label for native checkboxes:</span>
|
|
368
|
+
<div class="flex-container no-flex">
|
|
369
|
+
<CmdFormElement element="input"
|
|
370
|
+
labelText="Label for checkbox with boolean"
|
|
371
|
+
type="checkbox"
|
|
372
|
+
id="inputfield7"
|
|
373
|
+
v-model:value="checkboxStatus"
|
|
374
|
+
:status="formElementStatus"/>
|
|
375
|
+
<CmdFormElement element="input"
|
|
376
|
+
labelText="Label for checkbox with value"
|
|
377
|
+
v-model:value="checkboxValues"
|
|
378
|
+
inputValue="checkboxValue"
|
|
379
|
+
type="checkbox"
|
|
380
|
+
id="inputfield8"
|
|
381
|
+
:status="formElementStatus"/>
|
|
382
|
+
</div>
|
|
383
|
+
</div>
|
|
384
|
+
<div class="label inline">
|
|
385
|
+
<span>Label for Replaced Input-Type-Checkbox:</span>
|
|
386
|
+
<div class="flex-container no-flex">
|
|
387
|
+
<CmdFormElement element="input"
|
|
388
|
+
labelText="Label for replaced checkbox"
|
|
389
|
+
type="checkbox"
|
|
390
|
+
class="replace-input-type"
|
|
391
|
+
id="inputfield9"
|
|
392
|
+
v-model:value="replacedCheckboxStatus1"
|
|
393
|
+
:status="formElementStatus"/>
|
|
394
|
+
<CmdFormElement element="input"
|
|
395
|
+
labelText="Label for replaced checkbox"
|
|
396
|
+
v-model:value="replacedCheckboxStatus2"
|
|
397
|
+
inputValue="checkboxValue"
|
|
398
|
+
type="checkbox"
|
|
399
|
+
class="replace-input-type"
|
|
400
|
+
id="inputfield10"
|
|
401
|
+
:status="formElementStatus"/>
|
|
402
|
+
</div>
|
|
403
|
+
</div>
|
|
404
|
+
<div class="label inline">
|
|
405
|
+
<span>Label for native radiobuttons:</span>
|
|
406
|
+
<div class="flex-container no-flex">
|
|
407
|
+
<CmdFormElement element="input"
|
|
408
|
+
labelText="Label for native radiobutton"
|
|
409
|
+
type="radio"
|
|
410
|
+
id="inputfield11"
|
|
411
|
+
name="radiogroup"
|
|
412
|
+
inputValue="radiobuttonValue1"
|
|
413
|
+
v-model:value="radiobuttonStatus"
|
|
414
|
+
:status="formElementStatus"/>
|
|
415
|
+
<CmdFormElement element="input"
|
|
416
|
+
labelText="Label for native radiobutton"
|
|
417
|
+
type="radio"
|
|
418
|
+
id="inputfield12"
|
|
419
|
+
name="radiogroup"
|
|
420
|
+
inputValue="radiobuttonValue2"
|
|
421
|
+
v-model:value="radiobuttonStatus"
|
|
422
|
+
checked="checked"
|
|
423
|
+
:status="formElementStatus"/>
|
|
424
|
+
</div>
|
|
425
|
+
</div>
|
|
426
|
+
<div class="label inline">
|
|
427
|
+
<span>Label for Replaced Input-Type-Radio:</span>
|
|
428
|
+
<div class="flex-container no-flex">
|
|
429
|
+
<CmdFormElement element="input"
|
|
430
|
+
labelText="Label for replaced radiobutton"
|
|
431
|
+
type="radio"
|
|
432
|
+
class="replace-input-type"
|
|
433
|
+
id="inputfield13"
|
|
434
|
+
name="replaced-radiogroup"
|
|
435
|
+
inputValue="radiobuttonValue1"
|
|
436
|
+
v-model:value="replacedRadiobuttonStatus"
|
|
437
|
+
:status="formElementStatus"/>
|
|
438
|
+
<CmdFormElement element="input"
|
|
439
|
+
labelText="Label for replaced radiobutton"
|
|
440
|
+
type="radio"
|
|
441
|
+
class="replace-input-type"
|
|
442
|
+
id="inputfield14"
|
|
443
|
+
name="replaced-radiogroup"
|
|
444
|
+
inputValue="radiobuttonValue2"
|
|
445
|
+
v-model:value="replacedRadiobuttonStatus"
|
|
446
|
+
checked="checked"
|
|
447
|
+
:status="formElementStatus"/>
|
|
448
|
+
</div>
|
|
449
|
+
</div>
|
|
450
|
+
<CmdMultipleSwitch labelText="Label for multiple-switch with checkboxes:"
|
|
451
|
+
:multipleSwitches="multipleSwitchCheckboxData"
|
|
452
|
+
switchTypes="checkbox"
|
|
453
|
+
switchNames="checkboxgroup"
|
|
454
|
+
:status="formElementStatus"
|
|
455
|
+
v-model:value="multipleSwitchCheckbox"/>
|
|
456
|
+
<dl>
|
|
457
|
+
<dt>Selected value:</dt>
|
|
458
|
+
<dd>
|
|
459
|
+
<output>{{ multipleSwitchCheckbox }}</output>
|
|
460
|
+
</dd>
|
|
461
|
+
</dl>
|
|
462
|
+
<CmdMultipleSwitch labelText="Label for multiple-switch with radiobuttons:"
|
|
463
|
+
:multipleSwitches="multipleSwitchRadioData"
|
|
464
|
+
switchTypes="radio"
|
|
465
|
+
switchNames="radiogroup"
|
|
466
|
+
:status="formElementStatus"
|
|
467
|
+
v-model:value="multipleSwitchRadio"/>
|
|
468
|
+
<dl>
|
|
469
|
+
<dt>Selected value:</dt>
|
|
470
|
+
<dd>
|
|
471
|
+
<output>{{ multipleSwitchRadio }}</output>
|
|
472
|
+
</dd>
|
|
473
|
+
</dl>
|
|
474
|
+
</fieldset><!-- end fieldset -->
|
|
475
|
+
<div class="button-wrapper">
|
|
476
|
+
<small><sup>*</sup>values will not be submitted with the form!</small>
|
|
477
|
+
<CmdFormElement element="button"
|
|
478
|
+
buttonText="Submit form"
|
|
479
|
+
type="button"
|
|
480
|
+
id="submitbutton"
|
|
481
|
+
name="submitbutton"
|
|
482
|
+
:status="formElementStatus"/>
|
|
483
|
+
<button type="submit" :disabled="formElementStatus === 'disabled'"><span class="icon-check"></span><span>Submit form</span>
|
|
484
|
+
</button>
|
|
485
|
+
</div>
|
|
486
|
+
</form>
|
|
487
|
+
</CmdWidthLimitationWrapper>
|
|
488
|
+
<!-- end advanced form elements ----------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
489
|
+
|
|
490
|
+
<CmdBackToTopButton/>
|
|
491
|
+
|
|
492
|
+
<a id="section-boxes"></a>
|
|
493
|
+
<CmdWidthLimitationWrapper>
|
|
494
|
+
<h2 class="headline-demopage">Boxes</h2>
|
|
495
|
+
<h3>Content boxes</h3>
|
|
496
|
+
<div class="grid-container-create-columns">
|
|
497
|
+
<div class="grid-small-item">
|
|
498
|
+
<CmdBox>
|
|
499
|
+
<template v-slot:header>
|
|
500
|
+
<h3>
|
|
501
|
+
Box with text
|
|
502
|
+
</h3>
|
|
503
|
+
</template>
|
|
504
|
+
<template v-slot:body>
|
|
505
|
+
<p class="padding">
|
|
506
|
+
box body with paragraph
|
|
507
|
+
</p>
|
|
508
|
+
</template>
|
|
509
|
+
<template v-slot:footer>
|
|
510
|
+
<p>
|
|
511
|
+
footer content
|
|
512
|
+
</p>
|
|
513
|
+
</template>
|
|
514
|
+
</CmdBox>
|
|
515
|
+
</div>
|
|
516
|
+
<div class="grid-small-item">
|
|
517
|
+
<CmdBox>
|
|
518
|
+
<template v-slot:header>
|
|
519
|
+
<h3>
|
|
520
|
+
Box with links
|
|
521
|
+
</h3>
|
|
522
|
+
</template>
|
|
523
|
+
<template v-slot:body>
|
|
524
|
+
<ul class="navigation">
|
|
525
|
+
<li><a href="#" @click.prevent="">Link name 1</a></li>
|
|
526
|
+
<li><a href="#" @click.prevent="">Link name 2</a></li>
|
|
527
|
+
<li><a href="#" @click.prevent="">Link name 3</a></li>
|
|
528
|
+
<li><a href="#" @click.prevent="">Link name 4</a></li>
|
|
529
|
+
</ul>
|
|
530
|
+
</template>
|
|
531
|
+
<template v-slot:footer>
|
|
532
|
+
<p>
|
|
533
|
+
footer content
|
|
534
|
+
</p>
|
|
535
|
+
</template>
|
|
536
|
+
</CmdBox>
|
|
537
|
+
</div>
|
|
538
|
+
<div class="grid-small-item">
|
|
539
|
+
<CmdBox>
|
|
540
|
+
<template v-slot:header>
|
|
541
|
+
<h3>
|
|
542
|
+
Box with image
|
|
543
|
+
</h3>
|
|
544
|
+
</template>
|
|
545
|
+
<template v-slot:body>
|
|
546
|
+
<img src="media/images/content-images/logo-business-edition-landscape.jpg" alt="Alternative text"/>
|
|
547
|
+
</template>
|
|
548
|
+
<template v-slot:footer>
|
|
549
|
+
<p>
|
|
550
|
+
footer content
|
|
551
|
+
</p>
|
|
552
|
+
</template>
|
|
553
|
+
</CmdBox>
|
|
554
|
+
</div>
|
|
555
|
+
<div class="grid-small-item">
|
|
556
|
+
<CmdBox>
|
|
557
|
+
<template v-slot:header>
|
|
558
|
+
<h3>
|
|
559
|
+
Box with image and content
|
|
560
|
+
</h3>
|
|
561
|
+
</template>
|
|
562
|
+
<template v-slot:body>
|
|
563
|
+
<img src="media/images/content-images/logo-business-edition-landscape.jpg" alt="Alternative text"/>
|
|
564
|
+
<div class="default-padding">
|
|
565
|
+
<h4>Headline</h4>
|
|
566
|
+
<p>This some text i.e a short-text for news.</p>
|
|
567
|
+
</div>
|
|
568
|
+
</template>
|
|
569
|
+
<template v-slot:footer>
|
|
570
|
+
<p>
|
|
571
|
+
<a href="#">Mehr erfahren…</a>
|
|
572
|
+
</p>
|
|
573
|
+
</template>
|
|
574
|
+
</CmdBox>
|
|
575
|
+
</div>
|
|
367
576
|
</div>
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
labelText="Label for replaced checkbox"
|
|
374
|
-
type="checkbox"
|
|
375
|
-
class="replace-input-type"
|
|
376
|
-
id="inputfield9"
|
|
377
|
-
v-model:value="replacedCheckboxStatus1"
|
|
378
|
-
:status="formElementStatus"/>
|
|
379
|
-
<CmdFormElement element="input"
|
|
380
|
-
labelText="Label for replaced checkbox"
|
|
381
|
-
v-model:value="replacedCheckboxStatus2"
|
|
382
|
-
inputValue="checkboxValue"
|
|
383
|
-
type="checkbox"
|
|
384
|
-
class="replace-input-type"
|
|
385
|
-
id="inputfield10"
|
|
386
|
-
:status="formElementStatus"/>
|
|
577
|
+
<h3>Product boxes</h3>
|
|
578
|
+
<div class="grid-container-create-columns">
|
|
579
|
+
<div class="grid-small-item" v-for="(product, index) in boxProductData" :key="index">
|
|
580
|
+
<CmdBox boxType="product" :product="product"/>
|
|
581
|
+
</div>
|
|
387
582
|
</div>
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
labelText="Label for native radiobutton"
|
|
394
|
-
type="radio"
|
|
395
|
-
id="inputfield11"
|
|
396
|
-
name="radiogroup"
|
|
397
|
-
inputValue="radiobuttonValue1"
|
|
398
|
-
v-model:value="radiobuttonStatus"
|
|
399
|
-
:status="formElementStatus"/>
|
|
400
|
-
<CmdFormElement element="input"
|
|
401
|
-
labelText="Label for native radiobutton"
|
|
402
|
-
type="radio"
|
|
403
|
-
id="inputfield12"
|
|
404
|
-
name="radiogroup"
|
|
405
|
-
inputValue="radiobuttonValue2"
|
|
406
|
-
v-model:value="radiobuttonStatus"
|
|
407
|
-
checked="checked"
|
|
408
|
-
:status="formElementStatus"/>
|
|
583
|
+
<h3>User boxes</h3>
|
|
584
|
+
<div class="grid-container-create-columns">
|
|
585
|
+
<div class="grid-small-item" v-for="(user, index) in boxUserData" :key="index">
|
|
586
|
+
<CmdBox boxType="user" :user="user"/>
|
|
587
|
+
</div>
|
|
409
588
|
</div>
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
589
|
+
<h3>Box Site Search</h3>
|
|
590
|
+
<CmdBoxSiteSearch :results="executeSearch()" @click="executeSearch($event)"/>
|
|
591
|
+
</CmdWidthLimitationWrapper>
|
|
592
|
+
|
|
593
|
+
<a id="section-breadcrumbs"></a>
|
|
594
|
+
<CmdWidthLimitationWrapper inner-component="div">
|
|
595
|
+
<h2 class="headline-demopage">Breadcrumbs</h2>
|
|
596
|
+
<CmdBreadcrumbs :breadcrumbLinks="breadcrumbData" breadcrumbLabel="You are here:"/>
|
|
597
|
+
</CmdWidthLimitationWrapper>
|
|
598
|
+
|
|
599
|
+
<a id="section-cookie-disclaimer"></a>
|
|
600
|
+
<CmdWidthLimitationWrapper>
|
|
601
|
+
<h2 class="headline-demopage">Cookie Disclaimer</h2>
|
|
602
|
+
<a class="button" href="#" @click.prevent="fancyBoxCookieDisclaimer = true">
|
|
603
|
+
<span>Open Cookie Disclaimer</span>
|
|
604
|
+
</a>
|
|
605
|
+
</CmdWidthLimitationWrapper>
|
|
606
|
+
|
|
607
|
+
<a id="section-fancybox"></a>
|
|
608
|
+
<CmdWidthLimitationWrapper>
|
|
609
|
+
<h2 class="headline-demopage">Fancybox</h2>
|
|
610
|
+
<a href="#" @click.prevent="showFancyBox('text','Some text')">Open FancyBox with text</a>
|
|
611
|
+
<a href="#"
|
|
612
|
+
@click.prevent="showFancyBox('image', 'media/images/content-images/logo-business-edition-landscape.jpg')"
|
|
613
|
+
title="Open FancyBox with large image">
|
|
614
|
+
<img src="media/images/content-images/logo-business-edition-landscape.jpg" alt="Alternative text"/>
|
|
615
|
+
</a>
|
|
616
|
+
</CmdWidthLimitationWrapper>
|
|
617
|
+
|
|
618
|
+
<a id="section-google-maps-integration"></a>
|
|
619
|
+
<CmdWidthLimitationWrapper>
|
|
620
|
+
<h2 class="headline-demopage">Google Maps™-Integration</h2>
|
|
621
|
+
<CmdGoogleMaps :addressData="addressData"/>
|
|
622
|
+
</CmdWidthLimitationWrapper>
|
|
623
|
+
|
|
624
|
+
<a id="section-image-gallery"></a>
|
|
625
|
+
<CmdWidthLimitationWrapper>
|
|
626
|
+
<h2 class="headline-demopage">Image-Gallery</h2>
|
|
627
|
+
<CmdImageGallery :images="imageGalleryData"/>
|
|
628
|
+
</CmdWidthLimitationWrapper>
|
|
629
|
+
|
|
630
|
+
<a id="section-image-zoom"></a>
|
|
631
|
+
<CmdWidthLimitationWrapper>
|
|
632
|
+
<h2 class="headline-demopage">Image-Zoom</h2>
|
|
633
|
+
<CmdImageZoom small-image-url="media/images/content-images/logo-business-edition-landscape.jpg"
|
|
634
|
+
large-image-url="media/images/content-images/logo-business-edition-landscape-large.jpg"/>
|
|
635
|
+
</CmdWidthLimitationWrapper>
|
|
636
|
+
|
|
637
|
+
<a id="section-login-form"></a>
|
|
638
|
+
<CmdWidthLimitationWrapper>
|
|
639
|
+
<h2 class="headline-demopage">Login Form</h2>
|
|
640
|
+
<CmdLoginForm v-model="loginData" />
|
|
641
|
+
<p>LoginData: {{loginData}}</p>
|
|
642
|
+
</CmdWidthLimitationWrapper>
|
|
643
|
+
|
|
644
|
+
<a id="section-main-headline"></a>
|
|
645
|
+
<CmdWidthLimitationWrapper>
|
|
646
|
+
<h2 class="headline-demopage">Main Headline</h2>
|
|
647
|
+
<CmdMainHeadline icon-class="icon-home" pre-headline="Pre-headline" main-headline="Main headline"/>
|
|
648
|
+
</CmdWidthLimitationWrapper>
|
|
649
|
+
|
|
650
|
+
<a id="section-main-navigation"></a>
|
|
651
|
+
<CmdWidthLimitationWrapper>
|
|
652
|
+
<h2 class="headline-demopage">Main Navigation</h2>
|
|
653
|
+
<CmdMainNavigation :stretchMainItems="false"
|
|
654
|
+
:persistOnMobile="false"
|
|
655
|
+
:navigationEntries="navigationData"
|
|
656
|
+
/>
|
|
657
|
+
</CmdWidthLimitationWrapper>
|
|
658
|
+
|
|
659
|
+
<a id="section-multistep-form-progress-bar"></a>
|
|
660
|
+
<CmdWidthLimitationWrapper>
|
|
661
|
+
<h2 class="headline-demopage">Multistepform-Progressbar</h2>
|
|
662
|
+
<CmdMultistepFormProgressBar :multisteps="multistepsData" separatorIconClass="icon-single-arrow-right"
|
|
663
|
+
@click="showPageMultistep = $event.index + 1"/>
|
|
664
|
+
<div>
|
|
665
|
+
<p>Page {{ showPageMultistep }}</p>
|
|
433
666
|
</div>
|
|
434
|
-
|
|
435
|
-
<CmdMultipleSwitch labelText="Label for multiple-switch with checkboxes:"
|
|
436
|
-
:multipleSwitches="multipleSwitchCheckboxData"
|
|
437
|
-
switchTypes="checkbox"
|
|
438
|
-
switchNames="checkboxgroup"
|
|
439
|
-
:status="formElementStatus"
|
|
440
|
-
v-model:value="multipleSwitchCheckbox"/>
|
|
441
|
-
<dl>
|
|
442
|
-
<dt>Selected value:</dt>
|
|
443
|
-
<dd>
|
|
444
|
-
<output>{{ multipleSwitchCheckbox }}</output>
|
|
445
|
-
</dd>
|
|
446
|
-
</dl>
|
|
447
|
-
<CmdMultipleSwitch labelText="Label for multiple-switch with radiobuttons:"
|
|
448
|
-
:multipleSwitches="multipleSwitchRadioData"
|
|
449
|
-
switchTypes="radio"
|
|
450
|
-
switchNames="radiogroup"
|
|
451
|
-
:status="formElementStatus"
|
|
452
|
-
v-model:value="multipleSwitchRadio"/>
|
|
453
|
-
<dl>
|
|
454
|
-
<dt>Selected value:</dt>
|
|
455
|
-
<dd>
|
|
456
|
-
<output>{{ multipleSwitchRadio }}</output>
|
|
457
|
-
</dd>
|
|
458
|
-
</dl>
|
|
459
|
-
</fieldset><!-- end fieldset -->
|
|
460
|
-
<div class="button-wrapper">
|
|
461
|
-
<small><sup>*</sup>values will not be submitted with the form!</small>
|
|
462
|
-
<CmdFormElement element="button"
|
|
463
|
-
buttonText="Submit form"
|
|
464
|
-
type="button"
|
|
465
|
-
id="submitbutton"
|
|
466
|
-
name="submitbutton"
|
|
467
|
-
:status="formElementStatus"/>
|
|
468
|
-
<button type="submit" :disabled="formElementStatus === 'disabled'"><span class="icon-check"></span><span>Submit form</span>
|
|
469
|
-
</button>
|
|
470
|
-
</div>
|
|
471
|
-
</form>
|
|
472
|
-
</CmdWidthLimitationWrapper>
|
|
473
|
-
<!-- end advanced form elements ----------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
474
|
-
|
|
475
|
-
<CmdBackToTopButton />
|
|
476
|
-
|
|
477
|
-
<a id="section-boxes"></a>
|
|
478
|
-
<CmdWidthLimitationWrapper>
|
|
479
|
-
<h2 class="headline-demopage">Boxes</h2>
|
|
480
|
-
<h3>Content boxes</h3>
|
|
481
|
-
<div class="grid-container-create-columns">
|
|
482
|
-
<div class="grid-small-item">
|
|
483
|
-
<CmdBox>
|
|
484
|
-
<template v-slot:header>
|
|
485
|
-
<h3>
|
|
486
|
-
Box with text
|
|
487
|
-
</h3>
|
|
488
|
-
</template>
|
|
489
|
-
<template v-slot:body>
|
|
490
|
-
<p class="padding">
|
|
491
|
-
box body with paragraph
|
|
492
|
-
</p>
|
|
493
|
-
</template>
|
|
494
|
-
<template v-slot:footer>
|
|
495
|
-
<p>
|
|
496
|
-
footer content
|
|
497
|
-
</p>
|
|
498
|
-
</template>
|
|
499
|
-
</CmdBox>
|
|
500
|
-
</div>
|
|
501
|
-
<div class="grid-small-item">
|
|
502
|
-
<CmdBox>
|
|
503
|
-
<template v-slot:header>
|
|
504
|
-
<h3>
|
|
505
|
-
Box with links
|
|
506
|
-
</h3>
|
|
507
|
-
</template>
|
|
508
|
-
<template v-slot:body>
|
|
509
|
-
<ul class="navigation">
|
|
510
|
-
<li><a href="#" @click.prevent="">Link name 1</a></li>
|
|
511
|
-
<li><a href="#" @click.prevent="">Link name 2</a></li>
|
|
512
|
-
<li><a href="#" @click.prevent="">Link name 3</a></li>
|
|
513
|
-
<li><a href="#" @click.prevent="">Link name 4</a></li>
|
|
514
|
-
</ul>
|
|
515
|
-
</template>
|
|
516
|
-
<template v-slot:footer>
|
|
517
|
-
<p>
|
|
518
|
-
footer content
|
|
519
|
-
</p>
|
|
520
|
-
</template>
|
|
521
|
-
</CmdBox>
|
|
522
|
-
</div>
|
|
523
|
-
<div class="grid-small-item">
|
|
524
|
-
<CmdBox>
|
|
525
|
-
<template v-slot:header>
|
|
526
|
-
<h3>
|
|
527
|
-
Box with image
|
|
528
|
-
</h3>
|
|
529
|
-
</template>
|
|
530
|
-
<template v-slot:body>
|
|
531
|
-
<img src="media/images/content-images/logo-business-edition-landscape.jpg" alt="Alternative text"/>
|
|
532
|
-
</template>
|
|
533
|
-
<template v-slot:footer>
|
|
534
|
-
<p>
|
|
535
|
-
footer content
|
|
536
|
-
</p>
|
|
537
|
-
</template>
|
|
538
|
-
</CmdBox>
|
|
539
|
-
</div>
|
|
540
|
-
<div class="grid-small-item">
|
|
541
|
-
<CmdBox>
|
|
542
|
-
<template v-slot:header>
|
|
543
|
-
<h3>
|
|
544
|
-
Box with image and content
|
|
545
|
-
</h3>
|
|
546
|
-
</template>
|
|
547
|
-
<template v-slot:body>
|
|
548
|
-
<img src="media/images/content-images/logo-business-edition-landscape.jpg" alt="Alternative text"/>
|
|
549
|
-
<div class="default-padding">
|
|
550
|
-
<h4>Headline</h4>
|
|
551
|
-
<p>This some text i.e a short-text for news.</p>
|
|
552
|
-
</div>
|
|
553
|
-
</template>
|
|
554
|
-
<template v-slot:footer>
|
|
555
|
-
<p>
|
|
556
|
-
<a href="#">Mehr erfahren…</a>
|
|
557
|
-
</p>
|
|
558
|
-
</template>
|
|
559
|
-
</CmdBox>
|
|
560
|
-
</div>
|
|
561
|
-
</div>
|
|
562
|
-
<h3>Product boxes</h3>
|
|
563
|
-
<div class="grid-container-create-columns">
|
|
564
|
-
<div class="grid-small-item" v-for="(product, index) in boxProductData" :key="index">
|
|
565
|
-
<CmdBox boxType="product" :product="product" />
|
|
566
|
-
</div>
|
|
567
|
-
</div>
|
|
568
|
-
<h3>User boxes</h3>
|
|
569
|
-
<div class="grid-container-create-columns">
|
|
570
|
-
<div class="grid-small-item" v-for="(user, index) in boxUserData" :key="index">
|
|
571
|
-
<CmdBox boxType="user" :user="user" />
|
|
572
|
-
</div>
|
|
573
|
-
</div>
|
|
574
|
-
<h3>Box Site Search</h3>
|
|
575
|
-
<CmdBoxSiteSearch :results="executeSearch()" @click="executeSearch($event)"/>
|
|
576
|
-
</CmdWidthLimitationWrapper>
|
|
577
|
-
|
|
578
|
-
<a id="section-breadcrumbs"></a>
|
|
579
|
-
<CmdWidthLimitationWrapper inner-component="div">
|
|
580
|
-
<h2 class="headline-demopage">Breadcrumbs</h2>
|
|
581
|
-
<CmdBreadcrumbs :breadcrumbLinks="breadcrumbData" breadcrumbLabel="You are here:"/>
|
|
582
|
-
</CmdWidthLimitationWrapper>
|
|
583
|
-
|
|
584
|
-
<a id="section-cookie-disclaimer"></a>
|
|
585
|
-
<CmdWidthLimitationWrapper>
|
|
586
|
-
<h2 class="headline-demopage">Cookie Disclaimer</h2>
|
|
587
|
-
<a class="button" href="#" @click.prevent="fancyBoxCookieDisclaimer = true">
|
|
588
|
-
<span>Open Cookie Disclaimer</span>
|
|
589
|
-
</a>
|
|
590
|
-
</CmdWidthLimitationWrapper>
|
|
591
|
-
|
|
592
|
-
<a id="section-fancybox"></a>
|
|
593
|
-
<CmdWidthLimitationWrapper>
|
|
594
|
-
<h2 class="headline-demopage">Fancybox</h2>
|
|
595
|
-
<a href="#" @click.prevent="showFancyBox('text','Some text')">Open FancyBox with text</a>
|
|
596
|
-
<a href="#"
|
|
597
|
-
@click.prevent="showFancyBox('image', 'media/images/content-images/logo-business-edition-landscape.jpg')"
|
|
598
|
-
title="Open FancyBox with large image">
|
|
599
|
-
<img src="media/images/content-images/logo-business-edition-landscape.jpg" alt="Alternative text"/>
|
|
600
|
-
</a>
|
|
601
|
-
</CmdWidthLimitationWrapper>
|
|
602
|
-
|
|
603
|
-
<a id="section-google-maps-integration"></a>
|
|
604
|
-
<CmdWidthLimitationWrapper>
|
|
605
|
-
<h2 class="headline-demopage">Google Maps™-Integration</h2>
|
|
606
|
-
<CmdGoogleMaps :addressData="addressData"/>
|
|
607
|
-
</CmdWidthLimitationWrapper>
|
|
608
|
-
|
|
609
|
-
<a id="section-image-gallery"></a>
|
|
610
|
-
<CmdWidthLimitationWrapper>
|
|
611
|
-
<h2 class="headline-demopage">Image-Gallery</h2>
|
|
612
|
-
<CmdImageGallery :images="imageGalleryData"/>
|
|
613
|
-
</CmdWidthLimitationWrapper>
|
|
614
|
-
|
|
615
|
-
<a id="section-image-zoom"></a>
|
|
616
|
-
<CmdWidthLimitationWrapper>
|
|
617
|
-
<h2 class="headline-demopage">Image-Zoom</h2>
|
|
618
|
-
<CmdImageZoom small-image-url="media/images/content-images/logo-business-edition-landscape.jpg"
|
|
619
|
-
large-image-url="media/images/content-images/logo-business-edition-landscape-large.jpg"/>
|
|
620
|
-
</CmdWidthLimitationWrapper>
|
|
621
|
-
|
|
622
|
-
<a id="section-login-form"></a>
|
|
623
|
-
<CmdWidthLimitationWrapper>
|
|
624
|
-
<h2 class="headline-demopage">Login Form</h2>
|
|
625
|
-
<CmdLoginForm />
|
|
626
|
-
</CmdWidthLimitationWrapper>
|
|
627
|
-
|
|
628
|
-
<a id="section-main-headline"></a>
|
|
629
|
-
<CmdWidthLimitationWrapper>
|
|
630
|
-
<h2 class="headline-demopage">Main Headline</h2>
|
|
631
|
-
<CmdMainHeadline icon-class="icon-home" pre-headline="Pre-headline" main-headline="Main headline"/>
|
|
632
|
-
</CmdWidthLimitationWrapper>
|
|
633
|
-
|
|
634
|
-
<a id="section-main-navigation"></a>
|
|
635
|
-
<CmdWidthLimitationWrapper>
|
|
636
|
-
<h2 class="headline-demopage">Main Navigation</h2>
|
|
637
|
-
<CmdMainNavigation :stretchMainItems="false"
|
|
638
|
-
:persistOnMobile="false"
|
|
639
|
-
:navigationEntries="navigationData"
|
|
640
|
-
/>
|
|
641
|
-
</CmdWidthLimitationWrapper>
|
|
642
|
-
|
|
643
|
-
<a id="section-multistep-form-progress-bar"></a>
|
|
644
|
-
<CmdWidthLimitationWrapper>
|
|
645
|
-
<h2 class="headline-demopage">Multistepform-Progressbar</h2>
|
|
646
|
-
<CmdMultistepFormProgressBar :multisteps="multistepsData" separatorIconClass="icon-single-arrow-right"
|
|
647
|
-
@click="showPageMultistep = $event.index + 1"/>
|
|
648
|
-
<div>
|
|
649
|
-
<p>Page {{ showPageMultistep }}</p>
|
|
650
|
-
</div>
|
|
651
|
-
</CmdWidthLimitationWrapper>
|
|
652
|
-
|
|
653
|
-
<a id="section-pager"></a>
|
|
654
|
-
<CmdWidthLimitationWrapper>
|
|
655
|
-
<h2 class="headline-demopage">Pager</h2>
|
|
656
|
-
<div>
|
|
657
|
-
<p>Page {{ showPagePager }}</p>
|
|
658
|
-
</div>
|
|
659
|
-
<CmdPager
|
|
660
|
-
:items="pagerData.length"
|
|
661
|
-
:itemsPerPage="1"
|
|
662
|
-
@click="showPagePager = $event"
|
|
663
|
-
/>
|
|
664
|
-
</CmdWidthLimitationWrapper>
|
|
665
|
-
|
|
666
|
-
<a id="section-share-buttons"></a>
|
|
667
|
-
<CmdWidthLimitationWrapper>
|
|
668
|
-
<h2 class="headline-demopage">Share buttons</h2>
|
|
669
|
-
<CmdShareButtons :share-buttons="shareButtonsData"/>
|
|
670
|
-
</CmdWidthLimitationWrapper>
|
|
671
|
-
|
|
672
|
-
<a id="section-slideshow"></a>
|
|
673
|
-
<CmdWidthLimitationWrapper>
|
|
674
|
-
<h2 class="headline-demopage">Slideshow</h2>
|
|
675
|
-
<CmdSlideshow :slideshow-items="slideshowData" :showCounter="true" :autoplay="true"/>
|
|
676
|
-
</CmdWidthLimitationWrapper>
|
|
667
|
+
</CmdWidthLimitationWrapper>
|
|
677
668
|
|
|
678
|
-
|
|
679
|
-
|
|
680
|
-
|
|
681
|
-
|
|
682
|
-
|
|
683
|
-
|
|
684
|
-
|
|
685
|
-
|
|
686
|
-
|
|
687
|
-
|
|
688
|
-
|
|
689
|
-
|
|
690
|
-
|
|
691
|
-
|
|
692
|
-
|
|
693
|
-
|
|
694
|
-
|
|
695
|
-
|
|
696
|
-
|
|
697
|
-
|
|
698
|
-
<
|
|
699
|
-
|
|
700
|
-
|
|
701
|
-
|
|
702
|
-
|
|
703
|
-
|
|
704
|
-
|
|
705
|
-
|
|
706
|
-
|
|
707
|
-
|
|
708
|
-
|
|
709
|
-
|
|
710
|
-
|
|
711
|
-
|
|
712
|
-
|
|
713
|
-
|
|
714
|
-
|
|
715
|
-
|
|
716
|
-
|
|
717
|
-
|
|
718
|
-
|
|
719
|
-
|
|
720
|
-
|
|
721
|
-
|
|
722
|
-
|
|
723
|
-
|
|
724
|
-
|
|
725
|
-
|
|
726
|
-
|
|
727
|
-
<
|
|
728
|
-
|
|
729
|
-
|
|
730
|
-
|
|
731
|
-
|
|
732
|
-
|
|
733
|
-
|
|
669
|
+
<a id="section-pager"></a>
|
|
670
|
+
<CmdWidthLimitationWrapper>
|
|
671
|
+
<h2 class="headline-demopage">Pager</h2>
|
|
672
|
+
<div>
|
|
673
|
+
<p>Page {{ showPagePager }}</p>
|
|
674
|
+
</div>
|
|
675
|
+
<CmdPager
|
|
676
|
+
:items="pagerData.length"
|
|
677
|
+
:itemsPerPage="1"
|
|
678
|
+
@click="showPagePager = $event"
|
|
679
|
+
/>
|
|
680
|
+
</CmdWidthLimitationWrapper>
|
|
681
|
+
|
|
682
|
+
<a id="section-share-buttons"></a>
|
|
683
|
+
<CmdWidthLimitationWrapper>
|
|
684
|
+
<h2 class="headline-demopage">Share buttons</h2>
|
|
685
|
+
<CmdShareButtons :share-buttons="shareButtonsData"/>
|
|
686
|
+
</CmdWidthLimitationWrapper>
|
|
687
|
+
|
|
688
|
+
<a id="section-slideshow"></a>
|
|
689
|
+
<CmdWidthLimitationWrapper>
|
|
690
|
+
<h2 class="headline-demopage">Slideshow</h2>
|
|
691
|
+
<CmdSlideshow :slideshow-items="slideshowData" :showCounter="true" :autoplay="true"/>
|
|
692
|
+
</CmdWidthLimitationWrapper>
|
|
693
|
+
|
|
694
|
+
<a id="section-system-message"></a>
|
|
695
|
+
<CmdWidthLimitationWrapper>
|
|
696
|
+
<h2 class="headline-demopage">System Message</h2>
|
|
697
|
+
<CmdSystemMessage status="error" :fullWidth="true" message="This is an error message!"
|
|
698
|
+
iconClass="icon-cancel">
|
|
699
|
+
<ul>
|
|
700
|
+
<li>Error #1</li>
|
|
701
|
+
<li>Error #2</li>
|
|
702
|
+
<li>Error #3</li>
|
|
703
|
+
</ul>
|
|
704
|
+
</CmdSystemMessage>
|
|
705
|
+
<CmdSystemMessage status="warning" :fullWidth="true" message="This is a warning message!">
|
|
706
|
+
<p>This is additional text!</p>
|
|
707
|
+
</CmdSystemMessage>
|
|
708
|
+
<CmdSystemMessage status="success" :fullWidth="true" message="This is a success message!"
|
|
709
|
+
iconClass="icon-check">
|
|
710
|
+
<p>This is additional text!</p>
|
|
711
|
+
</CmdSystemMessage>
|
|
712
|
+
<CmdSystemMessage status="info" :fullWidth="true" message="This is an info message!"
|
|
713
|
+
iconClass="icon-info">
|
|
714
|
+
<p>This is additional text!</p>
|
|
715
|
+
</CmdSystemMessage>
|
|
716
|
+
</CmdWidthLimitationWrapper>
|
|
717
|
+
|
|
718
|
+
<a id="section-tables"></a>
|
|
719
|
+
<CmdWidthLimitationWrapper>
|
|
720
|
+
<h2 class="headline-demopage">Tables</h2>
|
|
721
|
+
<h3>Table as wide as its content</h3>
|
|
722
|
+
<CmdTable :collapsible="true" :fullWidthOnDefault="false" :userCanToggleWidth="true" :table-data="tableDataSmall"/>
|
|
723
|
+
<h3>Table as wide as possible</h3>
|
|
724
|
+
<CmdTable :collapsible="true" :fullWidthOnDefault="false" :userCanToggleWidth="true" :table-data="tableDataLarge"/>
|
|
725
|
+
</CmdWidthLimitationWrapper>
|
|
726
|
+
|
|
727
|
+
<a id="section-tabs"></a>
|
|
728
|
+
<CmdWidthLimitationWrapper>
|
|
729
|
+
<h2 class="headline-demopage">Tabs</h2>
|
|
730
|
+
<h3>Tabs with content from json-file</h3>
|
|
731
|
+
<CmdTabs :stretchTabs="false" :tabs="tabsData"/>
|
|
732
|
+
<h3>Tabs with HTML-content from used component</h3>
|
|
733
|
+
<CmdTabs :stretchTabs="true" :tabs="[{name: 'Tab 1'}, {name: 'Tab 2'}, {name: 'Tab 3'}]" :useSlot="true">
|
|
734
|
+
<template v-slot:tab-content-0>
|
|
735
|
+
<h3>Tab 1</h3>
|
|
736
|
+
<p>Content</p>
|
|
737
|
+
</template>
|
|
738
|
+
<template v-slot:tab-content-1>
|
|
739
|
+
<h3>Tab 2</h3>
|
|
740
|
+
<p>Content</p>
|
|
741
|
+
<p>Content</p>
|
|
742
|
+
</template>
|
|
743
|
+
<template v-slot:tab-content-2>
|
|
744
|
+
<h3>Tab 3</h3>
|
|
745
|
+
<p>Content</p>
|
|
746
|
+
<p>Content</p>
|
|
747
|
+
<p>Content</p>
|
|
748
|
+
</template>
|
|
749
|
+
</CmdTabs>
|
|
750
|
+
</CmdWidthLimitationWrapper>
|
|
751
|
+
|
|
752
|
+
<a id="section-thumbnail-scroller"></a>
|
|
753
|
+
<CmdWidthLimitationWrapper>
|
|
754
|
+
<h2 class="headline-demopage">Thumbnail-Scroller</h2>
|
|
755
|
+
<CmdThumbnailScroller :thumbnail-scroller-items="thumbnailScrollerData"/>
|
|
756
|
+
</CmdWidthLimitationWrapper>
|
|
757
|
+
|
|
758
|
+
<a id="section-upload-form"></a>
|
|
759
|
+
<CmdWidthLimitationWrapper>
|
|
760
|
+
<h2 class="headline-demopage">Upload-Form</h2>
|
|
761
|
+
<CmdUploadForm headline="Select files to upload"
|
|
762
|
+
:enableDragAndDrop="true"
|
|
763
|
+
:allowedFileExtensions="['jpg']"
|
|
764
|
+
:allowMultipleFileUploads="true"
|
|
765
|
+
:uploadOptions="{url: 'http://localhost:8888'}"
|
|
766
|
+
/>
|
|
767
|
+
</CmdWidthLimitationWrapper>
|
|
768
|
+
</main>
|
|
769
|
+
|
|
770
|
+
<CmdWidthLimitationWrapper id="site-footer" inner-component="footer">
|
|
771
|
+
<CmdSwitchLanguage :languages="languagesData" @click="doSomething"/>
|
|
772
|
+
<CmdFooterNavigation :footerNavigation="footerNavigationData" headline="Links"/>
|
|
773
|
+
<CmdOpeningHours :openingHours="openingHoursData" :closed="true" headline="Opening hours"
|
|
774
|
+
textOpenClosed="Closed right now!" textHolidaysClosed="Closed on holidays"
|
|
775
|
+
textMiscInfo="Miscellaneous information"/>
|
|
776
|
+
<CmdAddressData :addressData="addressData" :linkGoogleMaps="true" headline="Contact"/>
|
|
734
777
|
</CmdWidthLimitationWrapper>
|
|
735
778
|
|
|
736
|
-
<
|
|
737
|
-
<CmdWidthLimitationWrapper>
|
|
738
|
-
<h2 class="headline-demopage">Thumbnail-Scroller</h2>
|
|
739
|
-
<CmdThumbnailScroller :thumbnail-scroller-items="thumbnailScrollerData"/>
|
|
740
|
-
</CmdWidthLimitationWrapper>
|
|
779
|
+
<CmdCopyrightInformation/>
|
|
741
780
|
|
|
742
|
-
<
|
|
743
|
-
|
|
744
|
-
|
|
745
|
-
|
|
746
|
-
|
|
747
|
-
|
|
748
|
-
|
|
749
|
-
|
|
750
|
-
|
|
751
|
-
|
|
752
|
-
|
|
753
|
-
|
|
754
|
-
|
|
755
|
-
|
|
756
|
-
|
|
757
|
-
|
|
758
|
-
<CmdCopyrightInformation/>
|
|
759
|
-
|
|
760
|
-
<CmdFancyBox :show="fancyBoxCookieDisclaimer" :fancyboxOptions="{}" :allowEscapeKey="false">
|
|
761
|
-
<CmdCookieDisclaimer headline="Usage of cookies on this web site"
|
|
762
|
-
:cookieOptions="cookieDisclaimerData"
|
|
763
|
-
buttonLabelAcceptAllCookies="Accept all cookies"
|
|
764
|
-
buttonLabelAcceptCurrentSettings="Accept current settings"
|
|
765
|
-
@closeCookieDisclaimer="fancyBoxCookieDisclaimer = false"
|
|
766
|
-
>
|
|
767
|
-
<template #privacy-text>
|
|
768
|
-
<p>
|
|
769
|
-
<strong>
|
|
770
|
-
By browsing ths web site yo accept the usage and saving of anonymous data!
|
|
771
|
-
</strong>
|
|
772
|
-
</p>
|
|
773
|
-
</template>
|
|
774
|
-
</CmdCookieDisclaimer>
|
|
775
|
-
</CmdFancyBox>
|
|
781
|
+
<CmdFancyBox :show="fancyBoxCookieDisclaimer" :fancyboxOptions="{}" :allowEscapeKey="false">
|
|
782
|
+
<CmdCookieDisclaimer headline="Usage of cookies on this web site"
|
|
783
|
+
:cookieOptions="cookieDisclaimerData"
|
|
784
|
+
buttonLabelAcceptAllCookies="Accept all cookies"
|
|
785
|
+
buttonLabelAcceptCurrentSettings="Accept current settings"
|
|
786
|
+
@closeCookieDisclaimer="fancyBoxCookieDisclaimer = false"
|
|
787
|
+
>
|
|
788
|
+
<template #privacy-text>
|
|
789
|
+
<p>
|
|
790
|
+
<strong>
|
|
791
|
+
By browsing ths web site yo accept the usage and saving of anonymous data!
|
|
792
|
+
</strong>
|
|
793
|
+
</p>
|
|
794
|
+
</template>
|
|
795
|
+
</CmdCookieDisclaimer>
|
|
796
|
+
</CmdFancyBox>
|
|
776
797
|
</template>
|
|
777
798
|
|
|
778
799
|
<script>
|
|
@@ -784,10 +805,11 @@ import boxProductData from '@/assets/data/box-product.json'
|
|
|
784
805
|
import breadcrumbData from '@/assets/data/breadcrumbs.json'
|
|
785
806
|
import companyLogoData from '@/assets/data/company-logo.json'
|
|
786
807
|
import cookieDisclaimerData from '@/assets/data/cookie-disclaimer.json'
|
|
787
|
-
import
|
|
808
|
+
import fakeSelectColorsData from '@/assets/data/fake-select-colors.json'
|
|
788
809
|
import fakeSelectCountriesData from '@/assets/data/fake-select-countries.json'
|
|
810
|
+
import fakeSelectOptionsData from '@/assets/data/fake-select-options.json'
|
|
811
|
+
import fakeSelectOptionsWithIconsData from '@/assets/data/fake-select-options-with-icons.json'
|
|
789
812
|
import footerNavigationData from '@/assets/data/footer-navigation.json'
|
|
790
|
-
import fakeSelectColorsData from '@/assets/data/fake-select-colors.json'
|
|
791
813
|
import imageGalleryData from '@/assets/data/image-gallery.json'
|
|
792
814
|
import languagesData from '@/assets/data/languages.json'
|
|
793
815
|
import multistepsData from '@/assets/data/multisteps.json'
|
|
@@ -796,6 +818,7 @@ import multipleSwitchRadioData from '@/assets/data/multipleswitch-radio.json'
|
|
|
796
818
|
import navigationData from '@/assets/data/navigation.json'
|
|
797
819
|
import openingHoursData from '@/assets/data/opening-hours.json'
|
|
798
820
|
import pagerData from '@/assets/data/pager.json'
|
|
821
|
+
import selectOptionsData from '@/assets/data/select-options.json'
|
|
799
822
|
import shareButtonsData from '@/assets/data/share-buttons.json'
|
|
800
823
|
import slideshowData from '@/assets/data/slideshow.json'
|
|
801
824
|
import tabsData from '@/assets/data/tabs.json'
|
|
@@ -845,157 +868,149 @@ import CmdWidthLimitationWrapper from "@/components/CmdWidthLimitationWrapper"
|
|
|
845
868
|
import {openFancyBox} from "@/components/CmdFancyBox"
|
|
846
869
|
|
|
847
870
|
export default {
|
|
848
|
-
|
|
849
|
-
|
|
850
|
-
|
|
851
|
-
|
|
852
|
-
|
|
853
|
-
|
|
854
|
-
|
|
855
|
-
|
|
856
|
-
|
|
857
|
-
|
|
858
|
-
|
|
859
|
-
|
|
860
|
-
|
|
861
|
-
|
|
862
|
-
|
|
863
|
-
|
|
864
|
-
|
|
865
|
-
|
|
866
|
-
|
|
867
|
-
|
|
868
|
-
|
|
869
|
-
|
|
870
|
-
|
|
871
|
-
|
|
872
|
-
|
|
873
|
-
|
|
874
|
-
|
|
875
|
-
|
|
876
|
-
|
|
877
|
-
|
|
878
|
-
|
|
879
|
-
|
|
880
|
-
|
|
881
|
-
|
|
882
|
-
|
|
883
|
-
|
|
884
|
-
|
|
885
|
-
|
|
886
|
-
|
|
887
|
-
},
|
|
888
|
-
|
|
889
|
-
data() {
|
|
890
|
-
return {
|
|
891
|
-
accordionGroupOpen: false,
|
|
892
|
-
showPageMultistep: 1,
|
|
893
|
-
showPagePager: 1,
|
|
894
|
-
selectedOptions: [],
|
|
895
|
-
selectedCountry: "de",
|
|
896
|
-
selectedColor: "",
|
|
897
|
-
rangeValue: 50,
|
|
898
|
-
formElementStatus: "",
|
|
899
|
-
switchButtonRadio: "radio1",
|
|
900
|
-
switchButtonCheckbox: ["checkbox1"],
|
|
901
|
-
switchButtonCheckboxColored: false,
|
|
902
|
-
inputField1: "",
|
|
903
|
-
checkboxStatus: true,
|
|
904
|
-
replacedCheckboxStatus1: false,
|
|
905
|
-
replacedCheckboxStatus2: false,
|
|
906
|
-
checkboxValues: [],
|
|
907
|
-
radiobuttonStatus: "radiobuttonValue1",
|
|
908
|
-
replacedRadiobuttonStatus: "radiobuttonValue1",
|
|
909
|
-
multipleSwitchCheckbox: ['b'],
|
|
910
|
-
multipleSwitchRadio: 'c',
|
|
911
|
-
fancyBoxCookieDisclaimer: false,
|
|
912
|
-
selectedOption: "2",
|
|
913
|
-
selectOptions: [
|
|
914
|
-
{
|
|
915
|
-
text: "Option 1",
|
|
916
|
-
value: "1"
|
|
917
|
-
},
|
|
918
|
-
{
|
|
919
|
-
text: "Option 2",
|
|
920
|
-
value: "2"
|
|
921
|
-
},
|
|
922
|
-
{
|
|
923
|
-
text: "Option 3",
|
|
924
|
-
value: "3"
|
|
925
|
-
}
|
|
926
|
-
],
|
|
927
|
-
datalist: {
|
|
928
|
-
id: "datalist-id",
|
|
929
|
-
options: [
|
|
930
|
-
"Option 1",
|
|
931
|
-
"Option 2",
|
|
932
|
-
"Option 3"
|
|
933
|
-
]
|
|
934
|
-
},
|
|
935
|
-
|
|
936
|
-
// assign data from json files to data-properties
|
|
937
|
-
accordionData,
|
|
938
|
-
addressData,
|
|
939
|
-
boxProductData,
|
|
940
|
-
boxUserData,
|
|
941
|
-
breadcrumbData,
|
|
942
|
-
companyLogoData,
|
|
943
|
-
cookieDisclaimerData,
|
|
944
|
-
fakeSelectOptionsData,
|
|
945
|
-
fakeSelectCountriesData,
|
|
946
|
-
fakeSelectColorsData,
|
|
947
|
-
footerNavigationData,
|
|
948
|
-
imageGalleryData,
|
|
949
|
-
languagesData,
|
|
950
|
-
multistepsData,
|
|
951
|
-
multipleSwitchCheckboxData,
|
|
952
|
-
multipleSwitchRadioData,
|
|
953
|
-
navigationData,
|
|
954
|
-
openingHoursData,
|
|
955
|
-
pagerData,
|
|
956
|
-
shareButtonsData,
|
|
957
|
-
slideshowData,
|
|
958
|
-
tableDataSmall,
|
|
959
|
-
tableDataLarge,
|
|
960
|
-
tabsData,
|
|
961
|
-
thumbnailScrollerData,
|
|
962
|
-
topHeaderNavigationData
|
|
963
|
-
}
|
|
964
|
-
},
|
|
965
|
-
methods: {
|
|
966
|
-
showFancyBox(type, content) {
|
|
967
|
-
if (type === 'text') {
|
|
968
|
-
openFancyBox({content: content})
|
|
969
|
-
} else if (type === 'image') {
|
|
970
|
-
openFancyBox({url: content})
|
|
971
|
-
}
|
|
871
|
+
name: "App",
|
|
872
|
+
components: {
|
|
873
|
+
CmdAccordion, // short form of 'CmdAccordion': CmdAccordion
|
|
874
|
+
CmdAddressData,
|
|
875
|
+
CmdBackToTopButton,
|
|
876
|
+
CmdBox,
|
|
877
|
+
CmdBoxSiteSearch,
|
|
878
|
+
CmdBreadcrumbs,
|
|
879
|
+
CmdCompanyLogo,
|
|
880
|
+
CmdCopyrightInformation,
|
|
881
|
+
CmdCookieDisclaimer,
|
|
882
|
+
CmdFakeSelect,
|
|
883
|
+
CmdFancyBox,
|
|
884
|
+
CmdFooterNavigation,
|
|
885
|
+
CmdFormFilters,
|
|
886
|
+
CmdFormElement,
|
|
887
|
+
CmdGoogleMaps,
|
|
888
|
+
CmdImageGallery,
|
|
889
|
+
CmdImageZoom,
|
|
890
|
+
CmdLoginForm,
|
|
891
|
+
CmdMainHeadline,
|
|
892
|
+
CmdMainNavigation,
|
|
893
|
+
CmdMultistepFormProgressBar,
|
|
894
|
+
CmdMultipleSwitch,
|
|
895
|
+
CmdOpeningHours,
|
|
896
|
+
CmdPager,
|
|
897
|
+
CmdProgressBar,
|
|
898
|
+
CmdShareButtons,
|
|
899
|
+
CmdSiteHeader,
|
|
900
|
+
CmdSlideshow,
|
|
901
|
+
CmdSwitchButton,
|
|
902
|
+
CmdSwitchLanguage,
|
|
903
|
+
CmdSystemMessage,
|
|
904
|
+
CmdTabs,
|
|
905
|
+
CmdTable,
|
|
906
|
+
CmdThumbnailScroller,
|
|
907
|
+
CmdTopHeaderNavigation,
|
|
908
|
+
CmdUploadForm,
|
|
909
|
+
CmdWidthLimitationWrapper
|
|
972
910
|
},
|
|
973
|
-
|
|
974
|
-
|
|
975
|
-
|
|
976
|
-
|
|
911
|
+
|
|
912
|
+
data() {
|
|
913
|
+
return {
|
|
914
|
+
accordionGroupOpen: false,
|
|
915
|
+
showPageMultistep: 1,
|
|
916
|
+
showPagePager: 1,
|
|
917
|
+
selectedOption: "",
|
|
918
|
+
selectedOptions: [],
|
|
919
|
+
selectedCountry: "de",
|
|
920
|
+
selectedColor: "",
|
|
921
|
+
rangeValue: 50,
|
|
922
|
+
loginData: {},
|
|
923
|
+
formElementStatus: "",
|
|
924
|
+
switchButtonRadio: "radio1",
|
|
925
|
+
switchButtonCheckbox: ["checkbox1"],
|
|
926
|
+
switchButtonCheckboxColored: false,
|
|
927
|
+
inputField1: "",
|
|
928
|
+
checkboxStatus: true,
|
|
929
|
+
replacedCheckboxStatus1: false,
|
|
930
|
+
replacedCheckboxStatus2: false,
|
|
931
|
+
checkboxValues: [],
|
|
932
|
+
radiobuttonStatus: "radiobuttonValue1",
|
|
933
|
+
replacedRadiobuttonStatus: "radiobuttonValue1",
|
|
934
|
+
multipleSwitchCheckbox: ['b'],
|
|
935
|
+
multipleSwitchRadio: 'c',
|
|
936
|
+
fancyBoxCookieDisclaimer: false,
|
|
937
|
+
fakeSelectDefault: "2",
|
|
938
|
+
fakeSelectDefaultWithIcons: "1",
|
|
939
|
+
fakeSelectCheckbox: ["2"],
|
|
940
|
+
datalist: {
|
|
941
|
+
id: "datalist-id",
|
|
942
|
+
options: [
|
|
943
|
+
"Option 1",
|
|
944
|
+
"Option 2",
|
|
945
|
+
"Option 3"
|
|
946
|
+
]
|
|
947
|
+
},
|
|
948
|
+
|
|
949
|
+
// assign data from json files to data-properties
|
|
950
|
+
accordionData,
|
|
951
|
+
addressData,
|
|
952
|
+
boxProductData,
|
|
953
|
+
boxUserData,
|
|
954
|
+
breadcrumbData,
|
|
955
|
+
companyLogoData,
|
|
956
|
+
cookieDisclaimerData,
|
|
957
|
+
fakeSelectColorsData,
|
|
958
|
+
fakeSelectCountriesData,
|
|
959
|
+
fakeSelectOptionsData,
|
|
960
|
+
fakeSelectOptionsWithIconsData,
|
|
961
|
+
footerNavigationData,
|
|
962
|
+
imageGalleryData,
|
|
963
|
+
languagesData,
|
|
964
|
+
multistepsData,
|
|
965
|
+
multipleSwitchCheckboxData,
|
|
966
|
+
multipleSwitchRadioData,
|
|
967
|
+
navigationData,
|
|
968
|
+
openingHoursData,
|
|
969
|
+
pagerData,
|
|
970
|
+
selectOptionsData,
|
|
971
|
+
shareButtonsData,
|
|
972
|
+
slideshowData,
|
|
973
|
+
tableDataSmall,
|
|
974
|
+
tableDataLarge,
|
|
975
|
+
tabsData,
|
|
976
|
+
thumbnailScrollerData,
|
|
977
|
+
topHeaderNavigationData
|
|
977
978
|
}
|
|
978
|
-
}
|
|
979
|
-
return null
|
|
980
|
-
},
|
|
981
|
-
doSomething(event) {
|
|
982
|
-
event.preventDefault()
|
|
983
|
-
alert("Language changed!")
|
|
984
979
|
},
|
|
985
|
-
|
|
986
|
-
|
|
987
|
-
|
|
988
|
-
|
|
989
|
-
|
|
990
|
-
|
|
991
|
-
|
|
992
|
-
|
|
980
|
+
methods: {
|
|
981
|
+
showFancyBox(type, content) {
|
|
982
|
+
if (type === 'text') {
|
|
983
|
+
openFancyBox({content: content})
|
|
984
|
+
} else if (type === 'image') {
|
|
985
|
+
openFancyBox({url: content})
|
|
986
|
+
}
|
|
987
|
+
},
|
|
988
|
+
getOptionName(option) {
|
|
989
|
+
for (let i = 0; i < this.fakeSelectOptionsData.length; i++) {
|
|
990
|
+
if (option === this.fakeSelectOptionsData[i].value) {
|
|
991
|
+
return this.fakeSelectOptionsData[i].text
|
|
992
|
+
}
|
|
993
|
+
}
|
|
994
|
+
return null
|
|
995
|
+
},
|
|
996
|
+
doSomething(event) {
|
|
997
|
+
event.preventDefault()
|
|
998
|
+
alert("Language changed!")
|
|
999
|
+
},
|
|
1000
|
+
executeSearch() {
|
|
1001
|
+
return Math.floor(Math.random() * 100)
|
|
1002
|
+
},
|
|
1003
|
+
toggleAllAccordions() {
|
|
1004
|
+
if (this.accordionGroupOpen) {
|
|
1005
|
+
this.$refs.accordionGroup1.closeAll()
|
|
1006
|
+
} else {
|
|
1007
|
+
this.$refs.accordionGroup1.openAll()
|
|
1008
|
+
}
|
|
1009
|
+
this.accordionGroupOpen = !this.accordionGroupOpen
|
|
1010
|
+
},
|
|
1011
|
+
switchButtonChange() {
|
|
1012
|
+
alert("Changed")
|
|
993
1013
|
}
|
|
994
|
-
this.accordionGroupOpen = !this.accordionGroupOpen
|
|
995
|
-
},
|
|
996
|
-
switchButtonChange() {
|
|
997
|
-
alert("Changed")
|
|
998
1014
|
}
|
|
999
|
-
}
|
|
1000
1015
|
}
|
|
1001
1016
|
</script>
|