comand-component-library 3.1.40 → 3.1.44

Sign up to get free protection for your applications and to get access to all the features.
Files changed (18) hide show
  1. package/dist/comand-component-library.css +1 -1
  2. package/dist/comand-component-library.umd.min.js +1 -1
  3. package/package.json +3 -2
  4. package/src/App.vue +849 -834
  5. package/src/assets/data/fake-select-colors.json +10 -10
  6. package/src/assets/data/fake-select-countries.json +14 -21
  7. package/src/assets/data/fake-select-options-with-icons.json +23 -0
  8. package/src/assets/data/fake-select-options.json +6 -6
  9. package/src/assets/data/select-options.json +14 -0
  10. package/src/components/CmdFakeSelect.vue +113 -56
  11. package/src/components/CmdFormElement.vue +2 -6
  12. package/src/components/CmdLoginForm.vue +29 -7
  13. package/src/components/CmdProgressBar.vue +1 -1
  14. package/src/components/CmdSwitchButton.vue +5 -3
  15. package/src/components/CmdUploadForm.vue +722 -174
  16. package/src/mixins/CmdUploadForm/DefaultMessageProperties.js +49 -0
  17. package/src/mixins/I18n.js +56 -0
  18. 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
- <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"/>
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&trade;-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:accordionContent0>
83
- <p>
84
- Content
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
- </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"
123
- />
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="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&trade;-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
- </div>
153
- <h2>Fake Selects</h2>
154
- <div class="flex-container">
155
- <CmdFakeSelect :status="formElementStatus"
156
- :selectData="fakeSelectOptionsData"
157
- v-model:value="selectedOptions"
158
- defaultOptionName="Filters:"
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
- <CmdFakeSelect :status="formElementStatus"
163
- defaultOptionName="HTML-Content:"
164
- iconClass="icon-single-arrow-down">
165
- <ul class="custom-fake-select-content">
166
- <li>
167
- <div>
168
- <h3>Headline</h3>
169
- <p>Some content inside a paragraph</p>
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
- <CmdFakeSelect :status="formElementStatus"
182
- :selectData="fakeSelectColorsData"
183
- v-model:value="selectedColor"
184
- defaultOptionName="Select color:"
185
- type="color"
186
- iconClass="icon-single-arrow-down"
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
- </div>
189
-
190
- <!-- begin progress bar -->
191
- <h2>Progress Bar [native]</h2>
192
- <CmdProgressBar labelText="Progress Bar (with optional output):" id="progress-bar2" max="100"/>
193
- <!-- end progress bar -->
194
-
195
- <!-- begin slider -->
196
- <h2>Slider [native]</h2>
197
- <label for="range-slider" :class="formElementStatus">
198
- <span>Single-Slider (with in- and output):</span>
199
- <span class="flex-container no-flex">
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
- </label>
212
- <!-- end slider -->
227
+ </label>
228
+ <!-- end slider -->
213
229
 
214
- <hr/>
230
+ <hr/>
215
231
 
216
- <!-- begin toggle-switch-radio with switch-label -->
217
- <h2>Toggle-Switches (Radio and Checkbox) with Switch-Label</h2>
218
- <div class="label inline">
219
- <span>Label for Toggle-Switch-Checkbox with Switch-Label:</span>
220
- <span class="flex-container no-flex">
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
- <span>Current value: {{switchButtonCheckbox}}</span>
250
- </div>
251
- <!-- end toggle-switch-radio with switch-label -->
265
+ <span>Current value: {{ switchButtonCheckbox }}</span>
266
+ </div>
267
+ <!-- end toggle-switch-radio with switch-label -->
252
268
 
253
- <div class="label inline">
254
- <span>Label for Toggle-Switch-Checkbox with Switch-Label (colored):</span>
255
- <span class="flex-container no-flex">
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
- <span>Current value: {{switchButtonCheckboxColored}}</span>
268
- </div>
269
- <!-- end toggle-switch-radio with switch-label -->
270
-
271
- <!-- begin toggle-switch-radio with switch-label (colored) -->
272
- <div class="label inline">
273
- <span>Label for Toggle-Switch-Radio with Switch-Label (colored):</span>
274
- <span class="flex-container no-flex">
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
- </div>
297
- <!-- end toggle-switch-radio with switch-label (colored) -->
298
-
299
- <h2>Inputfields in Columns</h2>
300
- <CmdFormElement element="input"
301
- required="required"
302
- labelText="Label for inputfield (with tooltip):"
303
- type="text"
304
- id="inputfield1"
305
- autofocus="autofocus"
306
- placeholder="This is placeholder text"
307
- v-model:value="inputField1"
308
- tooltipText="This is a tooltip!"
309
- :status="formElementStatus" />
310
-
311
- <!-- begin inputfield in two columns -->
312
- <div class="flex-container">
313
- <CmdFormElement labelText="Label for inputfield (with icon):"
314
- element="input"
315
- type="text"
316
- id="inputfield2"
317
- iconClass="icon-user-profile"
318
- placeholder="Type in username"
319
- tooltipText="This is a tooltip!"
320
- :status="formElementStatus" />
321
- <CmdFormElement element="input"
322
- labelText="Label for inputfield (with icon):"
323
- type="password"
324
- id="inputfield3"
325
- iconClass="icon-security-settings"
326
- placeholder="Type in password"
327
- tooltipText="This is a tooltip!"
328
- :status="formElementStatus"/>
329
- </div>
330
- <!-- end inputfield in two columns -->
331
-
332
- <CmdFormElement element="input"
333
- labelText="Label (inline) for inputfield (number):"
334
- :displayLabelInline="true"
335
- type="number"
336
- id="inputfield4"
337
- :status="formElementStatus"/>
338
- <CmdFormElement element="input"
339
- labelText="Label (inline) for inputfield (date):"
340
- :displayLabelInline="true"
341
- type="date"
342
- id="inputfield5"
343
- :status="formElementStatus"/>
344
- <CmdFormElement element="input"
345
- labelText="Label (inline) for inputfield (search):"
346
- :displayLabelInline="true"
347
- type="search"
348
- id="inputfield6"
349
- placeholder="Keyword(s)"
350
- :status="formElementStatus"/>
351
- <div class="label inline">
352
- <span>Label for native checkboxes:</span>
353
- <div class="flex-container no-flex">
354
- <CmdFormElement element="input"
355
- labelText="Label for checkbox with boolean"
356
- type="checkbox"
357
- id="inputfield7"
358
- v-model:value="checkboxStatus"
359
- :status="formElementStatus"/>
360
- <CmdFormElement element="input"
361
- labelText="Label for checkbox with value"
362
- v-model:value="checkboxValues"
363
- inputValue="checkboxValue"
364
- type="checkbox"
365
- id="inputfield8"
366
- :status="formElementStatus"/>
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&hellip;</a>
572
+ </p>
573
+ </template>
574
+ </CmdBox>
575
+ </div>
367
576
  </div>
368
- </div>
369
- <div class="label inline">
370
- <span>Label for Replaced Input-Type-Checkbox:</span>
371
- <div class="flex-container no-flex">
372
- <CmdFormElement element="input"
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
- </div>
389
- <div class="label inline">
390
- <span>Label for native radiobuttons:</span>
391
- <div class="flex-container no-flex">
392
- <CmdFormElement element="input"
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
- </div>
411
- <div class="label inline">
412
- <span>Label for Replaced Input-Type-Radio:</span>
413
- <div class="flex-container no-flex">
414
- <CmdFormElement element="input"
415
- labelText="Label for replaced radiobutton"
416
- type="radio"
417
- class="replace-input-type"
418
- id="inputfield13"
419
- name="replaced-radiogroup"
420
- inputValue="radiobuttonValue1"
421
- v-model:value="replacedRadiobuttonStatus"
422
- :status="formElementStatus"/>
423
- <CmdFormElement element="input"
424
- labelText="Label for replaced radiobutton"
425
- type="radio"
426
- class="replace-input-type"
427
- id="inputfield14"
428
- name="replaced-radiogroup"
429
- inputValue="radiobuttonValue2"
430
- v-model:value="replacedRadiobuttonStatus"
431
- checked="checked"
432
- :status="formElementStatus"/>
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&trade;-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
- </div>
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&hellip;</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&trade;-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
- <a id="section-system-message"></a>
679
- <CmdWidthLimitationWrapper>
680
- <h2 class="headline-demopage">System Message</h2>
681
- <CmdSystemMessage status="error" :fullWidth="true" message="This is an error message!"
682
- iconClass="icon-cancel">
683
- <ul>
684
- <li>Error #1</li>
685
- <li>Error #2</li>
686
- <li>Error #3</li>
687
- </ul>
688
- </CmdSystemMessage>
689
- <CmdSystemMessage status="warning" :fullWidth="true" message="This is a warning message!">
690
- <p>This is additional text!</p>
691
- </CmdSystemMessage>
692
- <CmdSystemMessage status="success" :fullWidth="true" message="This is a success message!"
693
- iconClass="icon-check">
694
- <p>This is additional text!</p>
695
- </CmdSystemMessage>
696
- <CmdSystemMessage status="info" :fullWidth="true" message="This is an info message!"
697
- iconClass="icon-info">
698
- <p>This is additional text!</p>
699
- </CmdSystemMessage>
700
- </CmdWidthLimitationWrapper>
701
-
702
- <a id="section-tables"></a>
703
- <CmdWidthLimitationWrapper>
704
- <h2 class="headline-demopage">Tables</h2>
705
- <h3>Table as wide as its content</h3>
706
- <CmdTable :collapsible="true" :fullWidthOnDefault="false" :userCanToggleWidth="true" :table-data="tableDataSmall" />
707
- <h3>Table as wide as possible</h3>
708
- <CmdTable :collapsible="true" :fullWidthOnDefault="false" :userCanToggleWidth="true" :table-data="tableDataLarge" />
709
- </CmdWidthLimitationWrapper>
710
-
711
- <a id="section-tabs"></a>
712
- <CmdWidthLimitationWrapper>
713
- <h2 class="headline-demopage">Tabs</h2>
714
- <h3>Tabs with content from json-file</h3>
715
- <CmdTabs :stretchTabs="false" :tabs="tabsData"/>
716
- <h3>Tabs with HTML-content from used component</h3>
717
- <CmdTabs :stretchTabs="true" :tabs="[{name: 'Tab 1'}, {name: 'Tab 2'}, {name: 'Tab 3'}]" :useSlot="true">
718
- <template v-slot:tab-content-0>
719
- <h3>Tab 1</h3>
720
- <p>Content</p>
721
- </template>
722
- <template v-slot:tab-content-1>
723
- <h3>Tab 2</h3>
724
- <p>Content</p>
725
- <p>Content</p>
726
- </template>
727
- <template v-slot:tab-content-2>
728
- <h3>Tab 3</h3>
729
- <p>Content</p>
730
- <p>Content</p>
731
- <p>Content</p>
732
- </template>
733
- </CmdTabs>
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
- <a id="section-thumbnail-scroller"></a>
737
- <CmdWidthLimitationWrapper>
738
- <h2 class="headline-demopage">Thumbnail-Scroller</h2>
739
- <CmdThumbnailScroller :thumbnail-scroller-items="thumbnailScrollerData"/>
740
- </CmdWidthLimitationWrapper>
779
+ <CmdCopyrightInformation/>
741
780
 
742
- <a id="section-upload-form"></a>
743
- <CmdWidthLimitationWrapper>
744
- <h2 class="headline-demopage">Upload-Form</h2>
745
- <CmdUploadForm headline="Select files to upload" :enableDragAndDrop="true" :allowedFileTypes="['image/jpeg']"/>
746
- </CmdWidthLimitationWrapper>
747
- </main>
748
-
749
- <CmdWidthLimitationWrapper id="site-footer" inner-component="footer">
750
- <CmdSwitchLanguage :languages="languagesData" @click="doSomething"/>
751
- <CmdFooterNavigation :footerNavigation="footerNavigationData" headline="Links"/>
752
- <CmdOpeningHours :openingHours="openingHoursData" :closed="true" headline="Opening hours"
753
- textOpenClosed="Closed right now!" textHolidaysClosed="Closed on holidays"
754
- textMiscInfo="Miscellaneous information"/>
755
- <CmdAddressData :addressData="addressData" :linkGoogleMaps="true" headline="Contact"/>
756
- </CmdWidthLimitationWrapper>
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 fakeSelectOptionsData from '@/assets/data/fake-select-options.json'
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
- name: "App",
849
- components: {
850
- CmdAccordion, // short form of 'CmdAccordion': CmdAccordion
851
- CmdAddressData,
852
- CmdBackToTopButton,
853
- CmdBox,
854
- CmdBoxSiteSearch,
855
- CmdBreadcrumbs,
856
- CmdCompanyLogo,
857
- CmdCopyrightInformation,
858
- CmdCookieDisclaimer,
859
- CmdFakeSelect,
860
- CmdFancyBox,
861
- CmdFooterNavigation,
862
- CmdFormFilters,
863
- CmdFormElement,
864
- CmdGoogleMaps,
865
- CmdImageGallery,
866
- CmdImageZoom,
867
- CmdLoginForm,
868
- CmdMainHeadline,
869
- CmdMainNavigation,
870
- CmdMultistepFormProgressBar,
871
- CmdMultipleSwitch,
872
- CmdOpeningHours,
873
- CmdPager,
874
- CmdProgressBar,
875
- CmdShareButtons,
876
- CmdSiteHeader,
877
- CmdSlideshow,
878
- CmdSwitchButton,
879
- CmdSwitchLanguage,
880
- CmdSystemMessage,
881
- CmdTabs,
882
- CmdTable,
883
- CmdThumbnailScroller,
884
- CmdTopHeaderNavigation,
885
- CmdUploadForm,
886
- CmdWidthLimitationWrapper
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
- getOptionName(option) {
974
- for (let i = 0; i < this.fakeSelectOptionsData.length; i++) {
975
- if (option === this.fakeSelectOptionsData[i].optionValue) {
976
- return this.fakeSelectOptionsData[i].optionName
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
- executeSearch() {
986
- return Math.floor(Math.random() * 100)
987
- },
988
- toggleAllAccordions() {
989
- if(this.accordionGroupOpen) {
990
- this.$refs.accordionGroup1.closeAll()
991
- } else{
992
- this.$refs.accordionGroup1.openAll()
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>