comand-component-library 4.2.49 → 4.2.51

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.
Files changed (9) hide show
  1. package/dist/comand-component-library.js +1294 -1262
  2. package/dist/style.css +1 -1
  3. package/package.json +2 -2
  4. package/src/ComponentLibrary.vue +532 -1254
  5. package/src/assets/data/list-of-tags.json +1 -1
  6. package/src/assets/data/listOfComponents.json +1 -1
  7. package/src/assets/styles/component-library-global-styles.scss +14 -0
  8. package/src/components/CmdLink.vue +1 -3
  9. package/src/components/CmdList.vue +47 -2
package/src/ComponentLibrary.vue CHANGED
@@ -3,29 +3,18 @@
3
3
  <!-- begin .page-wrapper -->
4
4
  <div class="page-wrapper" :id="templateId" v-fancybox>
5
5
  <a id="anchor-back-to-top"></a>
6
- <CmdSidebar
7
- v-if="showLeftSidebar"
8
- :cmdHeadline="{headlineText: 'Site Settings', headlineLevel: 3, textAlign: 'center'}"
9
- :openSidebar="openLeftSidebar"
10
- @toggle-sidebar="setOpenStatusLeftSidebar"
11
- >
6
+ <CmdSidebar v-if="showLeftSidebar"
7
+ :cmdHeadline="{ headlineText: 'Site Settings', headlineLevel: 3, textAlign: 'center' }"
8
+ :openSidebar="openLeftSidebar" @toggle-sidebar="setOpenStatusLeftSidebar">
12
9
  <template #open>
13
- <CmdBoxWrapper
14
- :boxesPerRow="[1]"
15
- :allowMultipleExpandedBoxes="false"
16
- :allowUserToToggleOrientation="false"
17
- :openBoxesByDefault="openBoxes"
18
- :useGap="false"
19
- >
10
+ <CmdBoxWrapper :boxesPerRow="[1]" :allowMultipleExpandedBoxes="false"
11
+ :allowUserToToggleOrientation="false" :openBoxesByDefault="openBoxes" :useGap="false">
20
12
  <template v-slot="slotProps">
21
13
  <!-- begin box template selection -->
22
- <CmdBox
23
- :use-slots="['body']"
24
- :collapsible="true"
25
- :cmdHeadline="{headlineText: 'Template Settings', headlineLevel: 4, cmdIcon: {iconClass: 'icon-settings-template'}}"
14
+ <CmdBox :use-slots="['body']" :collapsible="true"
15
+ :cmdHeadline="{ headlineText: 'Template Settings', headlineLevel: 4, cmdIcon: { iconClass: 'icon-settings-template' } }"
26
16
  :openCollapsedBox="slotProps.boxIsOpen(0)"
27
- @toggleCollapse="slotProps.boxToggled(0, $event)"
28
- >
17
+ @toggleCollapse="slotProps.boxToggled(0, $event)">
29
18
  <template v-slot:body>
30
19
  <label for="select-template">
31
20
  <span>Select template</span>
@@ -42,19 +31,17 @@
42
31
  <div class="input-wrapper">
43
32
  <label for="default-color-scheme">
44
33
  <input type="radio" id="default-color-scheme" name="color-scheme"
45
- v-model="colorScheme"
46
- value="none"/>
34
+ v-model="colorScheme" value="none" />
47
35
  <span class="label-text">Color-Scheme by Browser/OS</span>
48
36
  </label>
49
37
  <label for="light-mode">
50
38
  <input type="radio" id="light-mode" name="color-scheme"
51
- v-model="colorScheme"
52
- value="light"/>
39
+ v-model="colorScheme" value="light" />
53
40
  <span class="label-text">Light Mode</span>
54
41
  </label>
55
42
  <label for="dark-mode">
56
43
  <input type="radio" id="dark-mode" name="color-scheme" v-model="colorScheme"
57
- value="dark"/>
44
+ value="dark" />
58
45
  <span class="label-text">Dark Mode</span>
59
46
  </label>
60
47
  </div>
@@ -64,23 +51,17 @@
64
51
  <!-- end box template selection -->
65
52
 
66
53
  <!-- begin box list of components-->
67
- <CmdBox
68
- :use-slots="['body']"
69
- :collapsible="true"
70
- :cmdHeadline="{headlineText: 'Components', headlineLevel: 4, cmdIcon: {iconClass: 'icon-settings-component'}}"
71
- :openCollapsedBox="slotProps.boxIsOpen(1)"
72
- @toggleCollapse="slotProps.boxToggled(1, $event)"
73
- id="list-of-components"
74
- >
54
+ <CmdBox :use-slots="['body']" :collapsible="true"
55
+ :cmdHeadline="{ headlineText: 'Components', headlineLevel: 4, cmdIcon: { iconClass: 'icon-settings-component' } }"
56
+ :openCollapsedBox="slotProps.boxIsOpen(1)" @toggleCollapse="slotProps.boxToggled(1, $event)"
57
+ id="list-of-components">
75
58
  <template v-slot:body>
76
59
  <ul>
77
60
  <li v-for="(componentName, index) in listOfComponents" :key="index"
78
- :class="{'active' : activeEntry === 'Cmd' + componentName}">
79
- <a
80
- :href="sectionName(componentName)"
61
+ :class="{ 'active': activeEntry === 'Cmd' + componentName }">
62
+ <a :href="sectionName(componentName)"
81
63
  @click="updateSettingsSidebar(componentNameWithPrefix(componentName))"
82
- title="Go to component"
83
- >
64
+ title="Go to component">
84
65
  {{ readableComponentName(componentName) }}
85
66
  </a>
86
67
  </li>
@@ -90,18 +71,15 @@
90
71
  <!-- end box list of components-->
91
72
 
92
73
  <!-- begin box page-templates -->
93
- <CmdBox
94
- :use-slots="['body']"
95
- :collapsible="true"
96
- :cmdHeadline="{headlineText: 'Page-Templates', headlineLevel: 4, cmdIcon: {iconClass: 'icon-file-settings'}}"
74
+ <CmdBox :use-slots="['body']" :collapsible="true"
75
+ :cmdHeadline="{ headlineText: 'Page-Templates', headlineLevel: 4, cmdIcon: { iconClass: 'icon-file-settings' } }"
97
76
  :openCollapsedBox="slotProps.boxIsOpen(2)"
98
- @toggleCollapse="slotProps.boxToggled(2, $event)"
99
- >
77
+ @toggleCollapse="slotProps.boxToggled(2, $event)">
100
78
  <template v-slot:body>
101
79
  <ul>
102
80
  <li>
103
81
  <a href="#section-contact-information"
104
- @click="updateSettingsSidebar('ContactInformation', 'page')">
82
+ @click="updateSettingsSidebar('ContactInformation', 'page')">
105
83
  Contact Information
106
84
  </a>
107
85
  </li>
@@ -110,13 +88,13 @@
110
88
  <ul>
111
89
  <li>
112
90
  <a href="#section-multiple-lists-of-links-downloads"
113
- @click="updateSettingsSidebar('MultipleListsOfLinks', 'page')">
91
+ @click="updateSettingsSidebar('MultipleListsOfLinks', 'page')">
114
92
  Downloads
115
93
  </a>
116
94
  </li>
117
95
  <li>
118
96
  <a href="#section-multiple-lists-of-links-sitemap"
119
- @click="updateSettingsSidebar('MultipleListsOfLinks', 'page')">
97
+ @click="updateSettingsSidebar('MultipleListsOfLinks', 'page')">
120
98
  SiteMap
121
99
  </a>
122
100
  </li>
@@ -127,13 +105,13 @@
127
105
  <ul>
128
106
  <li>
129
107
  <a href="#section-multiple-box-wrapper-faqs"
130
- @click="updateSettingsSidebar('MultipleBoxWrapperFAQs', 'page')">
108
+ @click="updateSettingsSidebar('MultipleBoxWrapperFAQs', 'page')">
131
109
  FAQs
132
110
  </a>
133
111
  </li>
134
112
  <li>
135
113
  <a href="#section-multiple-box-wrapper-team-overview"
136
- @click="updateSettingsSidebar('MultipleBoxWrapperTeamOverview', 'page')">
114
+ @click="updateSettingsSidebar('MultipleBoxWrapperTeamOverview', 'page')">
137
115
  Team Overview
138
116
  </a>
139
117
  </li>
@@ -176,18 +154,12 @@
176
154
  <CmdSiteHeader :sticky="true">
177
155
  <template v-slot:top-header>
178
156
  <!-- begin list ------------------------------------------------------------------------------------------->
179
- <CmdList
180
- :links="listData"
181
- orientation="horizontal"
182
- align="right"
183
- />
157
+ <CmdList :links="listData" orientation="horizontal" align="right" />
184
158
  <!-- end list ------------------------------------------------------------------------------------------->
185
159
  </template>
186
160
  <template v-slot:logo>
187
161
  <!-- begin company-logo ------------------------------------------------------------------------------------------->
188
- <CmdCompanyLogo
189
- v-bind="companyLogoData"
190
- />
162
+ <CmdCompanyLogo v-bind="companyLogoData" />
191
163
  <!-- end company-logo ------------------------------------------------------------------------------------------->
192
164
  </template>
193
165
  </CmdSiteHeader>
@@ -202,14 +174,11 @@
202
174
  <h2 class="headline-demopage" id="section-address-data">
203
175
  <span>Address Data</span>
204
176
  <a href="#" class="button small icon-cog" title="Open Component Settings"
205
- @click.prevent="openSettingsSidebar('CmdAddressData')"></a>
177
+ @click.prevent="openSettingsSidebar('CmdAddressData')"></a>
206
178
  </h2>
207
179
  <div class="flex-container">
208
- <CmdAddressData
209
- ref="CmdAddressData"
210
- :addressData="addressData"
211
- v-bind="cmdAddressDataSettingsData"
212
- />
180
+ <CmdAddressData ref="CmdAddressData" :addressData="addressData"
181
+ v-bind="cmdAddressDataSettingsData" />
213
182
  </div>
214
183
  </CmdWidthLimitationWrapper>
215
184
  <!-- end address-data --------------------------------------------------------------------------------------------------->
@@ -222,38 +191,38 @@
222
191
  <ul class="list-status">
223
192
  <li>
224
193
  <a href="#" @click.prevent="setStatus('', false)"
225
- :class="{'active' : validationStatus === '' && disabledStatus === false}"
226
- id="status-default">
194
+ :class="{ 'active': validationStatus === '' && disabledStatus === false }"
195
+ id="status-default">
227
196
  Default
228
197
  </a>
229
198
  </li>
230
199
  <li class="error">
231
200
  <a href="#" @click.prevent="setStatus('error', false)"
232
- :class="{'active' : validationStatus === 'error'}" id="status-error">
201
+ :class="{ 'active': validationStatus === 'error' }" id="status-error">
233
202
  Error
234
203
  </a>
235
204
  </li>
236
205
  <li>
237
206
  <a href="#" @click.prevent="setStatus('warning', false)"
238
- :class="{'active' : validationStatus === 'warning'}" id="status-warning">
207
+ :class="{ 'active': validationStatus === 'warning' }" id="status-warning">
239
208
  Warning
240
209
  </a>
241
210
  </li>
242
211
  <li>
243
212
  <a href="#" @click.prevent="setStatus('success', false)"
244
- :class="{'active' : validationStatus === 'success'}" id="status-success">
213
+ :class="{ 'active': validationStatus === 'success' }" id="status-success">
245
214
  Success
246
215
  </a>
247
216
  </li>
248
217
  <li>
249
218
  <a href="#" @click.prevent="setStatus('info', false)"
250
- :class="{'active' : validationStatus === 'info'}" id="status-info">
219
+ :class="{ 'active': validationStatus === 'info' }" id="status-info">
251
220
  Info
252
221
  </a>
253
222
  </li>
254
223
  <li>
255
224
  <a href="#" @click.prevent="setStatus('', true)"
256
- :class="{'active' : disabledStatus === true}" id="status-disabled">
225
+ :class="{ 'active': disabledStatus === true }" id="status-disabled">
257
226
  Disabled
258
227
  </a>
259
228
  </li>
@@ -261,7 +230,7 @@
261
230
  </div>
262
231
 
263
232
  <!-- begin form-filters -->
264
- <CmdFormFilters v-model="fakeSelectFilters" :selectedOptionsName="getOptionName"/>
233
+ <CmdFormFilters v-model="fakeSelectFilters" :selectedOptionsName="getOptionName" />
265
234
  <!-- end form-filters -->
266
235
 
267
236
  <CmdForm :use-fieldset="false" id="advanced-form-elements" novalidate="novalidate">
@@ -270,311 +239,133 @@
270
239
  <h2 class="headline-demopage">
271
240
  <span>Form Element-Component</span>
272
241
  <a href="#" class="button small icon-cog" title="Open Component Settings"
273
- @click.prevent="openSettingsSidebar('CmdFormElement')"></a>
242
+ @click.prevent="openSettingsSidebar('CmdFormElement')"></a>
274
243
  </h2>
275
- <CmdFormElement
276
- ref="CmdFormElement"
277
- v-bind="cmdFormElementSettingsData"
278
- :status="validationStatus"
279
- :disabled="disabledStatus"
280
- />
244
+ <CmdFormElement ref="CmdFormElement" v-bind="cmdFormElementSettingsData"
245
+ :status="validationStatus" :disabled="disabledStatus" />
281
246
  <div class="flex-container">
282
- <CmdFormElement
283
- labelText="Input for datalist:"
284
- element="input"
285
- type="text"
286
- :status="validationStatus"
287
- :disabled="disabledStatus"
288
- placeholder="Type in option"
289
- :datalist="datalist"
290
- tooltipText="This is a tooltip"
291
- />
247
+ <CmdFormElement labelText="Input for datalist:" element="input" type="text"
248
+ :status="validationStatus" :disabled="disabledStatus" placeholder="Type in option"
249
+ :datalist="datalist" tooltipText="This is a tooltip" />
292
250
  </div>
293
251
  <div class="flex-container">
294
- <CmdFormElement
295
- labelText="Input (type search (without search-button)):"
296
- element="input"
297
- type="search"
298
- :status="validationStatus"
299
- :disabled="disabledStatus"
300
- :showSearchButton="false"
301
- placeholder="Search"
302
- fieldIconClass="icon-search"
303
- tooltipText="This is a tooltip"
304
- v-bind="{useCustomTooltip: false}"
305
- />
306
- <CmdFormElement
307
- labelText="Input (type search (with search-button)):"
308
- element="input"
309
- type="search"
310
- :status="validationStatus"
311
- :disabled="disabledStatus"
312
- placeholder="Search"
313
- tooltipText="This is a tooltip"
314
- v-bind="{useCustomTooltip: false}"
315
- />
252
+ <CmdFormElement labelText="Input (type search (without search-button)):" element="input"
253
+ type="search" :status="validationStatus" :disabled="disabledStatus"
254
+ :showSearchButton="false" placeholder="Search" fieldIconClass="icon-search"
255
+ tooltipText="This is a tooltip" v-bind="{ useCustomTooltip: false }" />
256
+ <CmdFormElement labelText="Input (type search (with search-button)):" element="input"
257
+ type="search" :status="validationStatus" :disabled="disabledStatus" placeholder="Search"
258
+ tooltipText="This is a tooltip" v-bind="{ useCustomTooltip: false }" />
316
259
  </div>
317
260
  <h3>Inputfields in Columns</h3>
318
261
  <div class="flex-container">
319
- <CmdFormElement
320
- element="input"
321
- type="text"
322
- minlength="5"
323
- id="inputfield1"
324
- placeholder="This is placeholder text"
325
- v-model="inputField1"
326
- tooltipText="This is a tooltip!"
327
- :status="validationStatus"
328
- :disabled="disabledStatus">
262
+ <CmdFormElement element="input" type="text" minlength="5" id="inputfield1"
263
+ placeholder="This is placeholder text" v-model="inputField1"
264
+ tooltipText="This is a tooltip!" :status="validationStatus" :disabled="disabledStatus">
329
265
  <template v-slot:labeltext>
330
266
  <span v-html="'Label with <a href=\'#\'>Link</a> given by slot'"></span>
331
267
  </template>
332
268
  </CmdFormElement>
333
- <CmdFormElement
334
- element="input"
335
- labelText="Label for inputfield (required, with tooltip):"
336
- type="text"
337
- required="required"
338
- minlength="5"
339
- id="inputfield-required"
340
- placeholder="This is placeholder text"
341
- v-model="inputFieldRequired"
342
- tooltipText="This is a tooltip!"
343
- :status="validationStatus"
344
- :disabled="disabledStatus"
345
- />
346
- <CmdFormElement
347
- element="input"
348
- labelText="Label for inputfield (with pattern):"
349
- type="text"
350
- id="inputfield-pattern"
351
- placeholder="This is placeholder text"
352
- pattern="/\d/"
353
- v-model="inputFieldPattern"
354
- tooltipText="This is a tooltip!"
355
- :status="validationStatus"
356
- :disabled="disabledStatus"
357
- />
269
+ <CmdFormElement element="input" labelText="Label for inputfield (required, with tooltip):"
270
+ type="text" required="required" minlength="5" id="inputfield-required"
271
+ placeholder="This is placeholder text" v-model="inputFieldRequired"
272
+ tooltipText="This is a tooltip!" :status="validationStatus"
273
+ :disabled="disabledStatus" />
274
+ <CmdFormElement element="input" labelText="Label for inputfield (with pattern):" type="text"
275
+ id="inputfield-pattern" placeholder="This is placeholder text" pattern="/\d/"
276
+ v-model="inputFieldPattern" tooltipText="This is a tooltip!" :status="validationStatus"
277
+ :disabled="disabledStatus" />
358
278
  </div>
359
279
  <!-- begin inputfield in two columns -->
360
280
  <div class="flex-container">
361
- <CmdFormElement
362
- labelText="Label for emailfield (with icon):"
363
- element="input"
364
- type="email"
365
- id="inputfield-email"
366
- fieldIconClass="icon-mail"
367
- placeholder="Type in email-address"
368
- tooltipText="This is a tooltip!"
369
- maxlength="100"
370
- v-model="inputMail"
371
- :status="validationStatus"
372
- :disabled="disabledStatus"
373
- :required="true"
374
- />
375
- <CmdFormElement
376
- labelText="Label for inputfield (with icon):"
377
- element="input"
378
- type="text"
379
- id="inputfield-username"
380
- fieldIconClass="icon-user-profile"
381
- placeholder="Type in username"
382
- tooltipText="This is a tooltip!"
383
- maxlength="100"
384
- v-model="inputUsername"
385
- :status="validationStatus"
386
- :disabled="disabledStatus"
387
- />
388
- <CmdFormElement
389
- element="input"
390
- labelText="Label for password-field:"
391
- type="password"
392
- minlength="8"
393
- maxlength="255"
394
- id="inputfield-password"
395
- fieldIconClass="icon-security-settings"
396
- placeholder="Type in password"
397
- tooltipText="This is a tooltip!"
398
- :customRequirements="customRequirements"
399
- v-model="inputPassword"
400
- :status="validationStatus"
401
- :disabled="disabledStatus"
402
- />
281
+ <CmdFormElement labelText="Label for emailfield (with icon):" element="input" type="email"
282
+ id="inputfield-email" fieldIconClass="icon-mail" placeholder="Type in email-address"
283
+ tooltipText="This is a tooltip!" maxlength="100" v-model="inputMail"
284
+ :status="validationStatus" :disabled="disabledStatus" :required="true" />
285
+ <CmdFormElement labelText="Label for inputfield (with icon):" element="input" type="text"
286
+ id="inputfield-username" fieldIconClass="icon-user-profile"
287
+ placeholder="Type in username" tooltipText="This is a tooltip!" maxlength="100"
288
+ v-model="inputUsername" :status="validationStatus" :disabled="disabledStatus" />
289
+ <CmdFormElement element="input" labelText="Label for password-field:" type="password"
290
+ minlength="8" maxlength="255" id="inputfield-password"
291
+ fieldIconClass="icon-security-settings" placeholder="Type in password"
292
+ tooltipText="This is a tooltip!" :customRequirements="customRequirements"
293
+ v-model="inputPassword" :status="validationStatus" :disabled="disabledStatus" />
403
294
  </div>
404
295
  <!-- end inputfield in two columns -->
405
- <CmdFormElement
406
- element="input"
407
- labelText="Label:"
408
- type="number"
409
- class="flex-none"
410
- id="inputfield-number"
411
- required="required"
412
- min="0"
413
- max="9"
414
- style="width: 4rem;"
415
- v-model="inputNumber"
416
- :customRequirements="[customRequirements[2]]"
417
- :status="validationStatus"
418
- :disabled="disabledStatus"
419
- />
420
- <CmdFormElement
421
- element="input"
422
- labelText="Label for inputfield (number):"
423
- :displayLabelInline="true"
424
- type="number"
425
- id="inputfield-number"
426
- required="required"
427
- min="0"
428
- max="9"
429
- v-model="inputNumber"
430
- :customRequirements="[customRequirements[2]]"
431
- :status="validationStatus"
432
- :disabled="disabledStatus"
433
- />
434
- <CmdFormElement
435
- element="input"
436
- labelText="Label (inline) for inputfield (date):"
437
- :displayLabelInline="true"
438
- type="date"
439
- id="inputfield-date"
440
- v-model="inputDate"
441
- :status="validationStatus"
442
- :disabled="disabledStatus"
443
- />
296
+ <CmdFormElement element="input" labelText="Label:" type="number" class="flex-none"
297
+ id="inputfield-number" required="required" min="0" max="9" style="width: 4rem;"
298
+ v-model="inputNumber" :customRequirements="[customRequirements[2]]"
299
+ :status="validationStatus" :disabled="disabledStatus" />
300
+ <CmdFormElement element="input" labelText="Label for inputfield (number):"
301
+ :displayLabelInline="true" type="number" id="inputfield-number" required="required" min="0"
302
+ max="9" v-model="inputNumber" :customRequirements="[customRequirements[2]]"
303
+ :status="validationStatus" :disabled="disabledStatus" />
304
+ <CmdFormElement element="input" labelText="Label (inline) for inputfield (date):"
305
+ :displayLabelInline="true" type="date" id="inputfield-date" v-model="inputDate"
306
+ :status="validationStatus" :disabled="disabledStatus" />
444
307
  <h3>Searchfields</h3>
445
308
  <div class="flex-container">
446
- <CmdFormElement
447
- element="input"
448
- labelText="Label for inputfield (search) without search-button:"
449
- type="search"
450
- id="inputfield-search-without-searchbutton"
451
- placeholder="Keyword(s)"
452
- v-model="inputSearch"
453
- :showSearchButton="false"
454
- :status="validationStatus"
455
- :disabled="disabledStatus"
456
- />
457
- <CmdFormElement
458
- element="input"
459
- labelText="Label for inputfield (search):"
460
- type="search"
461
- id="inputfield-search-with-searchbutton"
462
- placeholder="Keyword(s)"
463
- v-model="inputSearch"
464
- :status="validationStatus"
465
- :disabled="disabledStatus"
466
- />
309
+ <CmdFormElement element="input"
310
+ labelText="Label for inputfield (search) without search-button:" type="search"
311
+ id="inputfield-search-without-searchbutton" placeholder="Keyword(s)"
312
+ v-model="inputSearch" :showSearchButton="false" :status="validationStatus"
313
+ :disabled="disabledStatus" />
314
+ <CmdFormElement element="input" labelText="Label for inputfield (search):" type="search"
315
+ id="inputfield-search-with-searchbutton" placeholder="Keyword(s)" v-model="inputSearch"
316
+ :status="validationStatus" :disabled="disabledStatus" />
467
317
  <!-- begin CmdSmartSearch -->
468
- <CmdSmartSearch
469
- :listOfRecommendations="smartSearchData.listOfRecommendations"
470
- :cmdFormElement="smartSearchData.cmdFormElement"
471
- :openListToTop="true"
472
- v-model="smartSearchObject"
473
- :disabled="disabledStatus"
474
- />
475
- <CmdSmartSearch
476
- :listOfRecommendations="smartSearchData.listOfRecommendations"
477
- :cmdFormElement="smartSearchData.cmdFormElement"
478
- :openListToTop="true"
479
- v-model="smartSearchString"
480
- :disabled="disabledStatus"
481
- />
318
+ <CmdSmartSearch :listOfRecommendations="smartSearchData.listOfRecommendations"
319
+ :cmdFormElement="smartSearchData.cmdFormElement" :openListToTop="true"
320
+ v-model="smartSearchObject" :disabled="disabledStatus" />
321
+ <CmdSmartSearch :listOfRecommendations="smartSearchData.listOfRecommendations"
322
+ :cmdFormElement="smartSearchData.cmdFormElement" :openListToTop="true"
323
+ v-model="smartSearchString" :disabled="disabledStatus" />
482
324
  <!-- end CmdSmartSearch -->
483
325
  </div>
484
326
  <h3>Textarea</h3>
485
- <CmdFormElement
486
- element="textarea"
487
- labelText="Label for textarea:"
488
- id="textarea"
489
- minlength="1"
490
- maxlength="100"
491
- placeholder="Type in your message"
492
- :required="true"
493
- v-model="textarea"
494
- :status="validationStatus"
495
- :disabled="disabledStatus"
496
- />
497
- <hr/>
327
+ <CmdFormElement element="textarea" labelText="Label for textarea:" id="textarea" minlength="1"
328
+ maxlength="100" placeholder="Type in your message" :required="true" v-model="textarea"
329
+ :status="validationStatus" :disabled="disabledStatus" />
330
+ <hr />
498
331
  <!-- begin FakeSelect -->
499
332
  <h3 class="headline-demopage">
500
333
  <span>Fake Selects</span>
501
334
  <a href="#" class="button small icon-cog" title="Open Component Settings"
502
- @click.prevent="openSettingsSidebar('CmdFakeSelect')"></a>
335
+ @click.prevent="openSettingsSidebar('CmdFakeSelect')"></a>
503
336
  </h3>
504
337
  <div class="flex-container">
505
338
  <!-- type === default: normal selectbox (with optional icons) -->
506
- <CmdFakeSelect
507
- ref="CmdFakeSelect"
508
- v-bind="cmdFakeSelectSettingsData"
509
- :selectData="fakeSelectOptionsData"
510
- v-model="fakeSelectDefault"
511
- >
339
+ <CmdFakeSelect ref="CmdFakeSelect" v-bind="cmdFakeSelectSettingsData"
340
+ :selectData="fakeSelectOptionsData" v-model="fakeSelectDefault">
512
341
  </CmdFakeSelect>
513
342
  <!-- type === checkboxOptions: selectbox with checkboxes for each option -->
514
- <CmdFakeSelect
515
- labelText="Selectbox with checkboxes:"
516
- :status="validationStatus"
517
- :disabled="disabledStatus"
518
- :selectData="fakeSelectOptionsData"
519
- v-model="fakeSelectCheckbox"
520
- defaultOptionName="Options:"
521
- :required="true"
522
- id="selectbox-with-checkboxes"
523
- type="checkboxOptions"
524
- :useCustomTooltip="true"
525
- />
526
- <CmdFakeSelect
527
- labelText="Selectbox with filters:"
528
- :status="validationStatus"
529
- :disabled="disabledStatus"
530
- :selectData="fakeSelectFilterOptionsData"
531
- v-model="fakeSelectFilters"
532
- defaultOptionName="Filters:"
533
- id="selectbox-with-filters"
534
- type="checkboxOptions"
535
- :useCustomTooltip="true"
536
- />
537
- <CmdFakeSelect
538
- labelText="Selectbox with country flags:"
539
- :status="validationStatus"
540
- :disabled="disabledStatus"
541
- pathFlags="https://comand-ui.com/samples/images/flags"
542
- :selectData="fakeSelectCountriesData"
543
- v-model="selectedCountryWithFlag"
544
- defaultOptionName="Select country:"
545
- type="country"
546
- />
547
- <CmdFormElement
548
- labelText="Selectbox with all countries:"
549
- element="select"
550
- :status="validationStatus"
551
- :disabled="disabledStatus"
552
- :selectOptions="allCountriesData"
553
- v-model="selectedCountry"
554
- :groupSelectOptionsByInitialLetters="true"
555
- max-height="10rem"
556
- defaultOptionName="Select country:"
557
- />
558
- <CmdFakeSelect
559
- labelText="Selectbox with colors:"
560
- :status="validationStatus"
561
- :disabled="disabledStatus"
562
- :selectData="fakeSelectColorsData"
563
- v-model="selectedColor"
564
- required="required"
565
- type="color"
566
- />
343
+ <CmdFakeSelect labelText="Selectbox with checkboxes:" :status="validationStatus"
344
+ :disabled="disabledStatus" :selectData="fakeSelectOptionsData"
345
+ v-model="fakeSelectCheckbox" defaultOptionName="Options:" :required="true"
346
+ id="selectbox-with-checkboxes" type="checkboxOptions" :useCustomTooltip="true" />
347
+ <CmdFakeSelect labelText="Selectbox with filters:" :status="validationStatus"
348
+ :disabled="disabledStatus" :selectData="fakeSelectFilterOptionsData"
349
+ v-model="fakeSelectFilters" defaultOptionName="Filters:" id="selectbox-with-filters"
350
+ type="checkboxOptions" :useCustomTooltip="true" />
351
+ <CmdFakeSelect labelText="Selectbox with country flags:" :status="validationStatus"
352
+ :disabled="disabledStatus" pathFlags="https://comand-ui.com/samples/images/flags"
353
+ :selectData="fakeSelectCountriesData" v-model="selectedCountryWithFlag"
354
+ defaultOptionName="Select country:" type="country" />
355
+ <CmdFormElement labelText="Selectbox with all countries:" element="select"
356
+ :status="validationStatus" :disabled="disabledStatus" :selectOptions="allCountriesData"
357
+ v-model="selectedCountry" :groupSelectOptionsByInitialLetters="true" max-height="10rem"
358
+ defaultOptionName="Select country:" />
359
+ <CmdFakeSelect labelText="Selectbox with colors:" :status="validationStatus"
360
+ :disabled="disabledStatus" :selectData="fakeSelectColorsData" v-model="selectedColor"
361
+ required="required" type="color" />
567
362
  </div>
568
363
  <!-- end FakeSelect -->
569
- <hr/>
364
+ <hr />
570
365
 
571
366
  <!-- begin progress bar -->
572
367
  <h2>Progress Bar [native]</h2>
573
- <CmdProgressBar
574
- labelText="Progress Bar (with optional output):"
575
- id="progress-bar2"
576
- max="100"
577
- />
368
+ <CmdProgressBar labelText="Progress Bar (with optional output):" id="progress-bar2" max="100" />
578
369
  <!-- end progress bar -->
579
370
 
580
371
  <!-- begin slider -->
@@ -582,139 +373,64 @@
582
373
  <div class="label" :class="validationStatus">
583
374
  <span class="label-text">Single-Slider (with in- and output):</span>
584
375
  <span class="flex-container flex-none">
585
- <label class="inline" for="range-value">
586
- <span class="label-text">
587
- <span>Range Value:</span>
588
- </span>
589
- <input
590
- type="number"
591
- :class="validationStatus"
592
- v-model="rangeValue"
593
- :disabled="disabledStatus"
594
- min="0"
595
- max="100"
596
- id="range-value"
597
- />
598
- </label>
599
- <label for="range-slider">
600
- <span class="label-text hidden">
601
- <span>Range Value</span>
602
- </span>
603
- <input
604
- type="range"
605
- class="range-slider"
606
- id="range-slider"
607
- v-model="rangeValue"
608
- :disabled="disabledStatus"
609
- min="0"
610
- max="100"
611
- />
612
- </label>
613
- </span>
376
+ <label class="inline" for="range-value">
377
+ <span class="label-text">
378
+ <span>Range Value:</span>
379
+ </span>
380
+ <input type="number" :class="validationStatus" v-model="rangeValue"
381
+ :disabled="disabledStatus" min="0" max="100" id="range-value" />
382
+ </label>
383
+ <label for="range-slider">
384
+ <span class="label-text hidden">
385
+ <span>Range Value</span>
386
+ </span>
387
+ <input type="range" class="range-slider" id="range-slider" v-model="rangeValue"
388
+ :disabled="disabledStatus" min="0" max="100" />
389
+ </label>
390
+ </span>
614
391
  </div>
615
392
  <!-- end slider -->
616
393
 
617
- <hr/>
394
+ <hr />
618
395
 
619
396
  <!-- begin toggle-switch-radio with switch-label (colored) -->
620
397
  <h2>Toggle-Switches</h2>
621
398
  <h3>Switches without switch-labels</h3>
622
- <CmdFormElement
623
- element="input"
624
- type="checkbox"
625
- id="toggle-switch-checkbox"
399
+ <CmdFormElement element="input" type="checkbox" id="toggle-switch-checkbox"
626
400
  v-model="switchButtonCheckboxToggleSwitch"
627
- labelText="Labeltext for Toggle-Switch without Switch-Label"
628
- :toggleSwitch="true"
629
- :status="validationStatus"
630
- :disabled="disabledStatus"
631
- :required="true"
632
- />
633
- <CmdFormElement
634
- element="input"
635
- type="checkbox"
636
- id="toggle-switch-checkbox-colored"
401
+ labelText="Labeltext for Toggle-Switch without Switch-Label" :toggleSwitch="true"
402
+ :status="validationStatus" :disabled="disabledStatus" :required="true" />
403
+ <CmdFormElement element="input" type="checkbox" id="toggle-switch-checkbox-colored"
637
404
  v-model="switchButtonCheckboxToggleSwitchColored"
638
- labelText="Labeltext for colored Toggle-Switch without Switch-Label"
639
- :toggleSwitch="true"
640
- :colored="true"
641
- :status="validationStatus"
642
- :disabled="disabledStatus"
643
- />
405
+ labelText="Labeltext for colored Toggle-Switch without Switch-Label" :toggleSwitch="true"
406
+ :colored="true" :status="validationStatus" :disabled="disabledStatus" />
644
407
  <h3>Switches with switch-labels</h3>
645
- <CmdFormElement
646
- element="input"
647
- type="checkbox"
648
- id="toggle-switch-checkbox-switch-label"
649
- v-model="switchButtonCheckbox"
650
- labelText="Labeltext for Toggle-Switch with Switch-Label"
651
- inputValue="checkbox1"
652
- onLabel="Label on"
653
- offLabel="Label off"
654
- :toggleSwitch="true"
655
- :status="validationStatus"
656
- :disabled="disabledStatus"
657
- />
658
- <CmdFormElement
659
- element="input"
660
- type="checkbox"
661
- id="toggle-switch-checkbox-switch-label-colored"
662
- v-model="switchButtonCheckbox"
663
- inputValue="checkbox2"
664
- labelText="Labeltext for Toggle-Switch (Checkbox, colored)"
665
- onLabel="Label on"
666
- offLabel="Label off"
667
- :colored="true"
668
- :toggleSwitch="true"
669
- :status="validationStatus"
670
- :disabled="disabledStatus"
671
- />
672
- <CmdFormElement
673
- element="input"
674
- type="radio"
675
- name="radiogroup"
676
- id="toggle-switch-radio1"
677
- v-model="switchButtonRadio"
678
- onLabel="Label on"
679
- offLabel="Label off"
680
- :colored="true"
681
- :toggleSwitch="true"
682
- :status="validationStatus"
683
- :disabled="disabledStatus"
684
- inputValue="radio1"
685
- labelText="Labeltext for Toggle-Switch (Radio, colored) #1"
686
- />
687
- <CmdFormElement
688
- element="input"
689
- type="radio"
690
- name="radiogroup"
691
- id="toggle-switch-radio2"
692
- v-model="switchButtonRadio"
693
- onLabel="Label on"
694
- offLabel="Label off"
695
- :colored="true"
696
- :toggleSwitch="true"
697
- :status="validationStatus"
698
- :disabled="disabledStatus"
699
- inputValue="radio2"
700
- labelText="Labeltext for Toggle-Switch (Radio, colored) #2"
701
- />
408
+ <CmdFormElement element="input" type="checkbox" id="toggle-switch-checkbox-switch-label"
409
+ v-model="switchButtonCheckbox" labelText="Labeltext for Toggle-Switch with Switch-Label"
410
+ inputValue="checkbox1" onLabel="Label on" offLabel="Label off" :toggleSwitch="true"
411
+ :status="validationStatus" :disabled="disabledStatus" />
412
+ <CmdFormElement element="input" type="checkbox" id="toggle-switch-checkbox-switch-label-colored"
413
+ v-model="switchButtonCheckbox" inputValue="checkbox2"
414
+ labelText="Labeltext for Toggle-Switch (Checkbox, colored)" onLabel="Label on"
415
+ offLabel="Label off" :colored="true" :toggleSwitch="true" :status="validationStatus"
416
+ :disabled="disabledStatus" />
417
+ <CmdFormElement element="input" type="radio" name="radiogroup" id="toggle-switch-radio1"
418
+ v-model="switchButtonRadio" onLabel="Label on" offLabel="Label off" :colored="true"
419
+ :toggleSwitch="true" :status="validationStatus" :disabled="disabledStatus"
420
+ inputValue="radio1" labelText="Labeltext for Toggle-Switch (Radio, colored) #1" />
421
+ <CmdFormElement element="input" type="radio" name="radiogroup" id="toggle-switch-radio2"
422
+ v-model="switchButtonRadio" onLabel="Label on" offLabel="Label off" :colored="true"
423
+ :toggleSwitch="true" :status="validationStatus" :disabled="disabledStatus"
424
+ inputValue="radio2" labelText="Labeltext for Toggle-Switch (Radio, colored) #2" />
702
425
  <!-- end toggle-switch-radio with switch-label (colored) -->
703
426
 
704
427
  <!-- begin checkboxes and radiobuttons -->
705
- <CmdFormElement
706
- element="input"
707
- labelText="Label for (required) checkbox with boolean"
708
- type="checkbox"
709
- required="required"
710
- id="checkbox-required-with-boolean"
711
- v-model="checkboxRequiredValue"
712
- :status="validationStatus"
713
- :disabled="disabledStatus"
714
- />
428
+ <CmdFormElement element="input" labelText="Label for (required) checkbox with boolean"
429
+ type="checkbox" required="required" id="checkbox-required-with-boolean"
430
+ v-model="checkboxRequiredValue" :status="validationStatus" :disabled="disabledStatus" />
715
431
  <p>
716
- checkbox (required) with boolean: {{ checkboxRequiredValue }}<br/>
717
- checkbox with boolean: {{ checkboxValue }}<br/>
432
+ checkbox (required) with boolean: {{ checkboxRequiredValue }}<br />
433
+ checkbox with boolean: {{ checkboxValue }}<br />
718
434
  checkboxes with values: {{ checkboxValues }}
719
435
  </p>
720
436
 
@@ -723,42 +439,17 @@
723
439
  <div class="label inline">
724
440
  <span class="label-text">Label for native checkboxes:</span>
725
441
  <div class="flex-container flex-none">
726
- <CmdFormElement
727
- element="input"
728
- labelText="Label for checkbox with boolean"
729
- type="checkbox"
730
- id="checkbox-with-boolean"
731
- v-model="checkboxValue"
732
- :status="validationStatus"
733
- :disabled="disabledStatus"
734
- />
735
- <CmdFormElement
736
- element="input"
737
- labelText="Label for checkbox with value"
738
- v-model="checkboxValues"
739
- inputValue="checkboxValue1"
740
- type="checkbox"
741
- id="checkbox-with-value-1"
742
- :status="validationStatus"
743
- :disabled="disabledStatus"
744
- />
745
- <CmdFormElement
746
- element="input"
747
- labelText="Label for checkbox with value"
748
- v-model="checkboxValues"
749
- inputValue="checkboxValue2"
750
- type="checkbox"
751
- id="checkbox-with-value-2"
752
- :status="validationStatus"
753
- :disabled="disabledStatus"
754
- />
755
- <CmdFormElement
756
- element="input"
757
- v-model="checkboxValues"
758
- inputValue="checkboxValue3"
759
- type="checkbox"
760
- id="checkbox-with-value-3"
761
- :status="validationStatus"
442
+ <CmdFormElement element="input" labelText="Label for checkbox with boolean"
443
+ type="checkbox" id="checkbox-with-boolean" v-model="checkboxValue"
444
+ :status="validationStatus" :disabled="disabledStatus" />
445
+ <CmdFormElement element="input" labelText="Label for checkbox with value"
446
+ v-model="checkboxValues" inputValue="checkboxValue1" type="checkbox"
447
+ id="checkbox-with-value-1" :status="validationStatus" :disabled="disabledStatus" />
448
+ <CmdFormElement element="input" labelText="Label for checkbox with value"
449
+ v-model="checkboxValues" inputValue="checkboxValue2" type="checkbox"
450
+ id="checkbox-with-value-2" :status="validationStatus" :disabled="disabledStatus" />
451
+ <CmdFormElement element="input" v-model="checkboxValues" inputValue="checkboxValue3"
452
+ type="checkbox" id="checkbox-with-value-3" :status="validationStatus"
762
453
  :disabled="disabledStatus">
763
454
  <template v-slot:labeltext>
764
455
  Labeltext with <a href="#">link</a> given by slot
@@ -770,56 +461,25 @@
770
461
  <div class="label inline">
771
462
  <span class="label-text">Label for Replaced Input-Type-Checkbox:</span>
772
463
  <div class="flex-container flex-none">
773
- <CmdFormElement
774
- element="input"
775
- labelText="Label for replaced checkbox"
776
- type="checkbox"
777
- :replaceInputType="true"
778
- id="inputfield9"
779
- v-model="replacedCheckboxValue"
780
- inputValue="checkboxValue1"
781
- :status="validationStatus"
782
- :disabled="disabledStatus"
783
- />
784
- <CmdFormElement
785
- element="input"
786
- labelText="Label for replaced checkbox"
787
- v-model="replacedCheckboxValue"
788
- inputValue="checkboxValue2"
789
- type="checkbox"
790
- :replaceInputType="true"
791
- id="inputfield10"
792
- :status="validationStatus"
793
- :disabled="disabledStatus"
794
- />
464
+ <CmdFormElement element="input" labelText="Label for replaced checkbox" type="checkbox"
465
+ :replaceInputType="true" id="inputfield9" v-model="replacedCheckboxValue"
466
+ inputValue="checkboxValue1" :status="validationStatus" :disabled="disabledStatus" />
467
+ <CmdFormElement element="input" labelText="Label for replaced checkbox"
468
+ v-model="replacedCheckboxValue" inputValue="checkboxValue2" type="checkbox"
469
+ :replaceInputType="true" id="inputfield10" :status="validationStatus"
470
+ :disabled="disabledStatus" />
795
471
  </div>
796
472
  </div>
797
473
  <h3>Radiobuttons [native]</h3>
798
474
  <div class="label inline">
799
475
  <span class="label-text">Label for native radiobuttons:</span>
800
476
  <div class="flex-container flex-none">
801
- <CmdFormElement
802
- element="input"
803
- labelText="Label for native radiobutton"
804
- type="radio"
805
- id="inputfield11"
806
- name="radiogroup"
807
- inputValue="radiobuttonValue1"
808
- v-model="radiobuttonValue"
809
- :status="validationStatus"
810
- :disabled="disabledStatus"
811
- />
812
- <CmdFormElement
813
- element="input"
814
- labelText="Label for native radiobutton"
815
- type="radio"
816
- id="inputfield12"
817
- name="radiogroup"
818
- inputValue="radiobuttonValue2"
819
- v-model="radiobuttonValue"
820
- :status="validationStatus"
821
- :disabled="disabledStatus"
822
- />
477
+ <CmdFormElement element="input" labelText="Label for native radiobutton" type="radio"
478
+ id="inputfield11" name="radiogroup" inputValue="radiobuttonValue1"
479
+ v-model="radiobuttonValue" :status="validationStatus" :disabled="disabledStatus" />
480
+ <CmdFormElement element="input" labelText="Label for native radiobutton" type="radio"
481
+ id="inputfield12" name="radiogroup" inputValue="radiobuttonValue2"
482
+ v-model="radiobuttonValue" :status="validationStatus" :disabled="disabledStatus" />
823
483
  </div>
824
484
  </div>
825
485
  <p>
@@ -829,30 +489,14 @@
829
489
  <div class="label inline">
830
490
  <span class="label-text">Label for Replaced Input-Type-Radio:</span>
831
491
  <div class="flex-container flex-none">
832
- <CmdFormElement
833
- element="input"
834
- labelText="Label for replaced radiobutton"
835
- type="radio"
836
- :replaceInputType="true"
837
- id="inputfield13"
838
- name="replaced-radiogroup"
839
- inputValue="radiobuttonValue1"
840
- v-model="replacedRadiobuttonValue"
841
- :status="validationStatus"
842
- :disabled="disabledStatus"
843
- />
844
- <CmdFormElement
845
- element="input"
846
- labelText="Label for replaced radiobutton"
847
- type="radio"
848
- :replaceInputType="true"
849
- id="inputfield14"
850
- name="replaced-radiogroup"
851
- inputValue="radiobuttonValue2"
852
- v-model="replacedRadiobuttonValue"
853
- :status="validationStatus"
854
- :disabled="disabledStatus"
855
- />
492
+ <CmdFormElement element="input" labelText="Label for replaced radiobutton" type="radio"
493
+ :replaceInputType="true" id="inputfield13" name="replaced-radiogroup"
494
+ inputValue="radiobuttonValue1" v-model="replacedRadiobuttonValue"
495
+ :status="validationStatus" :disabled="disabledStatus" />
496
+ <CmdFormElement element="input" labelText="Label for replaced radiobutton" type="radio"
497
+ :replaceInputType="true" id="inputfield14" name="replaced-radiogroup"
498
+ inputValue="radiobuttonValue2" v-model="replacedRadiobuttonValue"
499
+ :status="validationStatus" :disabled="disabledStatus" />
856
500
  </div>
857
501
  </div>
858
502
  <!-- end checkboxes and radiobuttons -->
@@ -861,37 +505,17 @@
861
505
  <h3 class="headline-demopage" id="section-input-group">
862
506
  Input-Group
863
507
  <a href="#" class="button small icon-cog" title="Open Component Settings"
864
- @click.prevent="openSettingsSidebar('CmdInputGroup')"></a>
508
+ @click.prevent="openSettingsSidebar('CmdInputGroup')"></a>
865
509
  </h3>
866
- <CmdInputGroup
867
- ref="CmdInputGroup"
868
- v-bind="cmdInputGroupSettingsData"
510
+ <CmdInputGroup ref="CmdInputGroup" v-bind="cmdInputGroupSettingsData"
869
511
  labelText="Grouplabel for radio-group given by property:"
870
- :inputElements="idForReplacedInputsInInputGroup('radio-group')"
871
- v-model="inputGroup"
872
- >
873
- <CmdFormElement
874
- element="input"
875
- labelText="Label for radiobutton"
876
- type="radio"
877
- id="input-group-radiobutton"
878
- name="radiogroup2"
879
- inputValue="radiobuttonValue1"
880
- v-model="inputGroup"
881
- :status="validationStatus"
882
- :disabled="disabledStatus"
883
- />
884
- <CmdFormElement
885
- element="input"
886
- labelText="Label for radiobutton"
887
- type="radio"
888
- id="input-group-radiobutton"
889
- name="radiogroup2"
890
- inputValue="radiobuttonValue2"
891
- v-model="inputGroup"
892
- :status="validationStatus"
893
- :disabled="disabledStatus"
894
- />
512
+ :inputElements="idForReplacedInputsInInputGroup('radio-group')" v-model="inputGroup">
513
+ <CmdFormElement element="input" labelText="Label for radiobutton" type="radio"
514
+ id="input-group-radiobutton" name="radiogroup2" inputValue="radiobuttonValue1"
515
+ v-model="inputGroup" :status="validationStatus" :disabled="disabledStatus" />
516
+ <CmdFormElement element="input" labelText="Label for radiobutton" type="radio"
517
+ id="input-group-radiobutton" name="radiogroup2" inputValue="radiobuttonValue2"
518
+ v-model="inputGroup" :status="validationStatus" :disabled="disabledStatus" />
895
519
  </CmdInputGroup>
896
520
  <dl>
897
521
  <dt>Selected value:</dt>
@@ -900,33 +524,20 @@
900
524
  </dd>
901
525
  </dl>
902
526
  <h3>Input Groups with Checkboxes/Radiobuttons (toggle-switches)</h3>
903
- <CmdInputGroup
904
- labelText="Grouplabel for checkbox-group styled as toggle-switches (colored):"
527
+ <CmdInputGroup labelText="Grouplabel for checkbox-group styled as toggle-switches (colored):"
905
528
  :inputElements="idForReplacedInputsInInputGroup('checkbox-group-toggle-switch')"
906
- inputTypes="checkbox"
907
- v-model="inputGroupValueToggleSwitchCheckbox"
908
- :toggleSwitches="true"
909
- :colored="true"
910
- required="required"
911
- :status="validationStatus"
912
- :disabled="disabledStatus"
913
- />
529
+ inputTypes="checkbox" v-model="inputGroupValueToggleSwitchCheckbox" :toggleSwitches="true"
530
+ :colored="true" required="required" :status="validationStatus" :disabled="disabledStatus" />
914
531
  <dl>
915
532
  <dt>Selected value(s):</dt>
916
533
  <dd>
917
534
  <output>{{ inputGroupValueToggleSwitchCheckbox }}</output>
918
535
  </dd>
919
536
  </dl>
920
- <CmdInputGroup
921
- labelText="Grouplabel for radio-group styled as toggle-switches:"
537
+ <CmdInputGroup labelText="Grouplabel for radio-group styled as toggle-switches:"
922
538
  :inputElements="idForReplacedInputsInInputGroup('radio-group-toggle-switch')"
923
- inputTypes="radio"
924
- v-model="inputGroupValueToggleSwitchRadio"
925
- :toggleSwitches="true"
926
- required="required"
927
- :status="validationStatus"
928
- :disabled="disabledStatus"
929
- />
539
+ inputTypes="radio" v-model="inputGroupValueToggleSwitchRadio" :toggleSwitches="true"
540
+ required="required" :status="validationStatus" :disabled="disabledStatus" />
930
541
  <dl>
931
542
  <dt>Selected value(s):</dt>
932
543
  <dd>
@@ -936,12 +547,8 @@
936
547
  <CmdInputGroup
937
548
  labelText="Grouplabel for radio-group given by property styled as multiple-switch:"
938
549
  :inputElements="idForReplacedInputsInInputGroup('radio-group-multiple-switch')"
939
- inputTypes="radio"
940
- :multipleSwitch="true"
941
- v-model="inputGroupValue3"
942
- :status="validationStatus"
943
- :disabled="disabledStatus"
944
- />
550
+ inputTypes="radio" :multipleSwitch="true" v-model="inputGroupValue3"
551
+ :status="validationStatus" :disabled="disabledStatus" />
945
552
  <dl>
946
553
  <dt>Selected value(s):</dt>
947
554
  <dd>
@@ -950,15 +557,9 @@
950
557
  </dl>
951
558
  <CmdInputGroup
952
559
  labelText="Grouplabel for checkbox-group styled as multiple-switch (stretched horizontally):"
953
- :inputElements="inputGroupCheckboxes"
954
- inputTypes="checkbox"
955
- :multipleSwitch="true"
956
- :required="true"
957
- v-model="inputGroupValue4"
958
- :stretchHorizontally="true"
959
- :status="validationStatus"
960
- :disabled="disabledStatus"
961
- />
560
+ :inputElements="inputGroupCheckboxes" inputTypes="checkbox" :multipleSwitch="true"
561
+ :required="true" v-model="inputGroupValue4" :stretchHorizontally="true"
562
+ :status="validationStatus" :disabled="disabledStatus" />
962
563
  <dl>
963
564
  <dt>Selected value(s):</dt>
964
565
  <dd>
@@ -970,14 +571,8 @@
970
571
  <div class="flex-container">
971
572
  <small>(values will not be submitted with the form!)</small>
972
573
  <div class="button-wrapper flex-none">
973
- <CmdFormElement
974
- element="button"
975
- :nativeButton="{text: 'Submit-button from component'}"
976
- type="submit"
977
- id="submitbutton"
978
- name="submitbutton"
979
- :disabled="disabledStatus"
980
- />
574
+ <CmdFormElement element="button" :nativeButton="{ text: 'Submit-button from component' }"
575
+ type="submit" id="submitbutton" name="submitbutton" :disabled="disabledStatus" />
981
576
  <button class="button" type="submit" :disabled="disabledStatus">
982
577
  <span class="icon-check"></span>
983
578
  <span>Native submit-button</span>
@@ -989,7 +584,7 @@
989
584
  <!-- end advanced form elements --------------------------------------------------------------------------------------------->
990
585
 
991
586
  <!-- begin back to top button --------------------------------------------------------------------------------------------->
992
- <CmdBackToTopButton href="#anchor-back-to-top" scroll-container=".page-wrapper"/>
587
+ <CmdBackToTopButton href="#anchor-back-to-top" scroll-container=".page-wrapper" />
993
588
  <!-- end back to top button --------------------------------------------------------------------------------------------->
994
589
 
995
590
  <!-- begin bank account data --------------------------------------------------------------------------------------------->
@@ -997,13 +592,10 @@
997
592
  <h2 class="headline-demopage" id="section-bank-account-data">
998
593
  <span>Bank Account Data</span>
999
594
  <a href="#" class="button small icon-cog" title="Open Component Settings"
1000
- @click.prevent="openSettingsSidebar('CmdBankAccountData')"></a>
595
+ @click.prevent="openSettingsSidebar('CmdBankAccountData')"></a>
1001
596
  </h2>
1002
- <CmdBankAccountData
1003
- :account-data="bankAccountData"
1004
- v-bind="cmdBankAccountDataSettingsData"
1005
- ref="CmdBankAccountData"
1006
- />
597
+ <CmdBankAccountData :account-data="bankAccountData" v-bind="cmdBankAccountDataSettingsData"
598
+ ref="CmdBankAccountData" />
1007
599
  </CmdWidthLimitationWrapper>
1008
600
  <!-- end bank account data --------------------------------------------------------------------------------------------------->
1009
601
 
@@ -1012,20 +604,15 @@
1012
604
  <h2 class="headline-demopage" id="section-basic-form">
1013
605
  <span>Basic Form</span>
1014
606
  <a href="#" class="button small icon-cog" title="Open Component Settings"
1015
- @click.prevent="openSettingsSidebar('CmdBasicForm')"></a>
607
+ @click.prevent="openSettingsSidebar('CmdBasicForm')"></a>
1016
608
  </h2>
1017
- <CmdBasicForm
1018
- ref="CmdBasicForm"
1019
- :cmdForm="{useValidation: true}"
1020
- :userMessage="{
1021
- 'required': false,
1022
- 'element': 'textarea',
1023
- 'maxLength': 500
1024
- }"
1025
- :submitButton="{
609
+ <CmdBasicForm ref="CmdBasicForm" :cmdForm="{ useValidation: true }" :userMessage="{
610
+ 'required': false,
611
+ 'element': 'textarea',
612
+ 'maxLength': 500
613
+ }" :submitButton="{
1026
614
  'text': 'Send request'
1027
- }"
1028
- />
615
+ }" />
1029
616
  <dl>
1030
617
  <dt>originalEvent</dt>
1031
618
  <dd>{{ basicFormData.originalEvent }}</dd>
@@ -1041,16 +628,10 @@
1041
628
  <h3 class="headline-demopage">
1042
629
  <span>Default Box</span>
1043
630
  <a href="#" class="button small icon-cog" title="Open Component Settings"
1044
- @click.prevent="openSettingsSidebar('CmdBox')"></a>
631
+ @click.prevent="openSettingsSidebar('CmdBox')"></a>
1045
632
  </h3>
1046
- <CmdBox
1047
- ref="CmdBox"
1048
- v-bind="cmdBoxSettingsData"
1049
- textBody="Content"
1050
- :useSlots="['body', 'footer']"
1051
- :cmd-headline="{headlineText: 'Headline for box', headlineLevel: 4}"
1052
- :stretchVertically="true"
1053
- >
633
+ <CmdBox ref="CmdBox" v-bind="cmdBoxSettingsData" textBody="Content" :useSlots="['body', 'footer']"
634
+ :cmd-headline="{ headlineText: 'Headline for box', headlineLevel: 4 }" :stretchVertically="true">
1054
635
  <template v-slot:header>
1055
636
  <h4>
1056
637
  Texts given by slots
@@ -1072,28 +653,16 @@
1072
653
  </p>
1073
654
  </template>
1074
655
  </CmdBox>
1075
- <CmdBoxWrapper
1076
- :useFlexbox="true"
1077
- :cmdHeadline="{headlineText: 'Boxes in BoxWrapper with flexbox', headlineLevel: 3}"
1078
- :useGap="true"
1079
- >
1080
- <CmdBox
1081
- v-for="index in 14"
1082
- :key="index"
1083
- textBody="Content"
1084
- :cmd-headline="{headlineText: 'Headline ' + index, headlineLevel: 4}"
1085
- />
656
+ <CmdBoxWrapper :useFlexbox="true"
657
+ :cmdHeadline="{ headlineText: 'Boxes in BoxWrapper with flexbox', headlineLevel: 3 }" :useGap="true">
658
+ <CmdBox v-for="index in 14" :key="index" textBody="Content"
659
+ :cmd-headline="{ headlineText: 'Headline ' + index, headlineLevel: 4 }" />
1086
660
  </CmdBoxWrapper>
1087
- <CmdBoxWrapper
1088
- :use-gap="true"
1089
- :cmdHeadline="{headlineText: 'Different examples of content-boxes (in BoxWrapper)', headlineLevel: 3}"
1090
- >
1091
- <CmdBox
1092
- :stretchVertically="false"
1093
- :cmdHeadline="{headlineText: 'Box with cutoff text', headlineLevel: 4}"
1094
- :useSlots="['body']"
1095
- :cutoff-text-lines="4"
1096
- >
661
+ <CmdBoxWrapper :use-gap="true"
662
+ :cmdHeadline="{ headlineText: 'Different examples of content-boxes (in BoxWrapper)', headlineLevel: 3 }">
663
+ <CmdBox :stretchVertically="false"
664
+ :cmdHeadline="{ headlineText: 'Box with cutoff text', headlineLevel: 4 }" :useSlots="['body']"
665
+ :cutoff-text-lines="4">
1097
666
  <template v-slot:body>
1098
667
  This is a long text that is cutoff after a specific number of lines that can be defined
1099
668
  by the property 'cutoffTextLines' and be toggled by a link below.
@@ -1128,21 +697,11 @@
1128
697
  </h4>
1129
698
  </template>
1130
699
  <template v-slot:body>
1131
- <CmdForm :legend="{show: false}">
1132
- <CmdFormElement
1133
- element="input"
1134
- type="text"
1135
- :required="true"
1136
- labelText="Username:"
1137
- placeholder="Username"
1138
- />
1139
- <CmdFormElement
1140
- element="input"
1141
- type="password"
1142
- :required="true"
1143
- labelText="Password:"
1144
- placeholder="Password"
1145
- />
700
+ <CmdForm :legend="{ show: false }">
701
+ <CmdFormElement element="input" type="text" :required="true" labelText="Username:"
702
+ placeholder="Username" />
703
+ <CmdFormElement element="input" type="password" :required="true" labelText="Password:"
704
+ placeholder="Password" />
1146
705
  </CmdForm>
1147
706
  </template>
1148
707
  <!-- will not be displayed, because useSlots-property does not contain 'footer' in array -->
@@ -1173,18 +732,15 @@
1173
732
  </p>
1174
733
  </template>
1175
734
  </CmdBox>
1176
- <CmdBox
1177
- :useSlots="['header', 'body']"
1178
- :useBoxBodyPadding="false"
1179
- :cmdHeadline="{headlineText: 'Collapsible box', headlineLevel: 4}"
1180
- :collapsible="true">
735
+ <CmdBox :useSlots="['header', 'body']" :useBoxBodyPadding="false"
736
+ :cmdHeadline="{ headlineText: 'Collapsible box', headlineLevel: 4 }" :collapsible="true">
1181
737
  <template v-slot:header>
1182
738
  <h4>
1183
739
  Collapsible box with image
1184
740
  </h4>
1185
741
  </template>
1186
742
  <template v-slot:body>
1187
- <img src="/media/images/content-images/landscape-medium.jpg" alt="Alternative text"/>
743
+ <img src="/media/images/content-images/landscape-medium.jpg" alt="Alternative text" />
1188
744
  </template>
1189
745
  </CmdBox>
1190
746
  <CmdBox :useSlots="['header', 'body', 'footer']" :useBoxBodyPadding="false">
@@ -1194,7 +750,7 @@
1194
750
  </h4>
1195
751
  </template>
1196
752
  <template v-slot:body>
1197
- <img src="/media/images/content-images/landscape-medium.jpg" alt="Alternative text"/>
753
+ <img src="/media/images/content-images/landscape-medium.jpg" alt="Alternative text" />
1198
754
  <div class="default-padding">
1199
755
  <h4>Custom headline</h4>
1200
756
  <p>Image, custom-headline and this text for the component are given by slot</p>
@@ -1206,72 +762,51 @@
1206
762
  </p>
1207
763
  </template>
1208
764
  </CmdBox>
1209
- <CmdBox
1210
- :repeatHeadlineInBoxBody="true"
1211
- :useBoxBodyPadding="true"
1212
- :cmdHeadline="{headlineText: 'Box with image, content and link', headlineLevel: 4}"
765
+ <CmdBox :repeatHeadlineInBoxBody="true" :useBoxBodyPadding="true"
766
+ :cmdHeadline="{ headlineText: 'Box with image, content and link', headlineLevel: 4 }"
1213
767
  textBody="Image, headline and this text for the component are given by property"
1214
- :cmdImage="{image: {src: '/media/images/content-images/landscape-medium.jpg', alt: 'Alternative text'}}"
768
+ :cmdImage="{ image: { src: '/media/images/content-images/landscape-medium.jpg', alt: 'Alternative text' } }"
1215
769
  :cmdLink="{
1216
- linkType: 'href',
1217
- path: '#',
1218
- icon: {
1219
- iconClass: 'icon-chevron-two-stripes-right',
1220
- position: 'right'
1221
- },
1222
- text: 'Read more'
1223
- }"
1224
- />
1225
- <CmdBox
1226
- :useBoxBodyPadding="true"
1227
- :cmdHeadline="{headlineText: 'Box with large icon and some content', headlineLevel: 4}"
1228
- headlinePosition="body"
1229
- :cmdIcon="{iconClass: 'icon-home', type: 'auto'}"
1230
- textBody="Box with large icon, headline in body and content all given by properties."
1231
- />
770
+ linkType: 'href',
771
+ path: '#',
772
+ icon: {
773
+ iconClass: 'icon-chevron-two-stripes-right',
774
+ position: 'right'
775
+ },
776
+ text: 'Read more'
777
+ }" />
778
+ <CmdBox :useBoxBodyPadding="true"
779
+ :cmdHeadline="{ headlineText: 'Box with large icon and some content', headlineLevel: 4 }"
780
+ headlinePosition="body" :cmdIcon="{ iconClass: 'icon-home', type: 'auto' }"
781
+ textBody="Box with large icon, headline in body and content all given by properties." />
1232
782
  </CmdBoxWrapper>
1233
783
  <h3>Product boxes</h3>
1234
784
  <div class="grid-container-create-columns">
1235
785
  <div class="grid-small-item" v-for="(product, index) in boxProductData" :key="index">
1236
- <CmdBox boxType="product" :product="product" :cmdHeadline="{headlineLevel: 4}"/>
786
+ <CmdBox boxType="product" :product="product" :cmdHeadline="{ headlineLevel: 4 }" />
1237
787
  </div>
1238
788
  </div>
1239
789
  <h3>User boxes</h3>
1240
790
  <CmdBoxWrapper :boxesPerRow="[5, 2, 1]" :useRowViewAsDefault="true" :useGap="true">
1241
791
  <template v-slot="slotProps">
1242
- <CmdBox
1243
- v-for="index in boxUserData.length"
1244
- :key="index" boxType="user"
1245
- :user="boxUserData[index - 1]"
1246
- :cmdHeadline="{headlineLevel: 5}"
1247
- :rowView="slotProps.rowView"
1248
- />
792
+ <CmdBox v-for="index in boxUserData.length" :key="index" boxType="user"
793
+ :user="boxUserData[index - 1]" :cmdHeadline="{ headlineLevel: 5 }"
794
+ :rowView="slotProps.rowView" />
1249
795
  </template>
1250
796
  </CmdBoxWrapper>
1251
797
  <h3><span>Boxes in BoxWrapper (collapsible)</span>
1252
798
  <a href="#" class="button small icon-cog" title="Open Component Settings"
1253
- @click.prevent="openSettingsSidebar('CmdBoxWrapper')"></a>
799
+ @click.prevent="openSettingsSidebar('CmdBoxWrapper')"></a>
1254
800
  </h3>
1255
- <CmdBoxWrapper
1256
- ref="CmdBoxWrapper"
1257
- :boxesPerRow="[5, 2, 1]"
1258
- :openBoxesByDefault="[2]"
1259
- :useRowViewAsDefault="true"
1260
- :allowMultipleExpandedBoxes="false"
1261
- :stretch-boxes-vertically="true"
801
+ <CmdBoxWrapper ref="CmdBoxWrapper" :boxesPerRow="[5, 2, 1]" :openBoxesByDefault="[2]"
802
+ :useRowViewAsDefault="true" :allowMultipleExpandedBoxes="false" :stretch-boxes-vertically="true"
1262
803
  :useGap="true">
1263
804
  <template v-slot="slotProps">
1264
- <CmdBox
1265
- v-for="index in boxProductData.length"
1266
- :key="index"
1267
- boxType="content"
1268
- :collapsible="true"
1269
- :useSlots="['body']"
1270
- :cmdHeadline="{headlineText: 'Box ' + index, headlineLevel: 5}"
1271
- :rowView="slotProps.rowView"
805
+ <CmdBox v-for="index in boxProductData.length" :key="index" boxType="content"
806
+ :collapsible="true" :useSlots="['body']"
807
+ :cmdHeadline="{ headlineText: 'Box ' + index, headlineLevel: 5 }" :rowView="slotProps.rowView"
1272
808
  :openCollapsedBox="slotProps.boxIsOpen(index - 1)"
1273
- @toggleCollapse="slotProps.boxToggled(index - 1, $event)"
1274
- >
809
+ @toggleCollapse="slotProps.boxToggled(index - 1, $event)">
1275
810
  <template #body>{{ slotProps.currentOpenBox }}Content {{ index }}</template>
1276
811
  </CmdBox>
1277
812
  </template>
@@ -1284,43 +819,35 @@
1284
819
  <h2 class="headline-demopage" id="section-breadcrumbs">
1285
820
  <span>Breadcrumbs</span>
1286
821
  <a href="#" class="button small icon-cog" title="Open Component Settings"
1287
- @click.prevent="openSettingsSidebar('CmdBreadcrumbs')"></a>
822
+ @click.prevent="openSettingsSidebar('CmdBreadcrumbs')"></a>
1288
823
  </h2>
1289
- <CmdBreadcrumbs
1290
- ref="CmdBreadcrumbs"
1291
- :breadcrumbLabel="breadcrumbsData.breadcrumbLabel"
1292
- :breadcrumbLinks="breadcrumbsData.breadcrumbLinks"
1293
- v-bind="cmdBreadcrumbsSettingsData"
1294
- />
824
+ <CmdBreadcrumbs ref="CmdBreadcrumbs" :breadcrumbLabel="breadcrumbsData.breadcrumbLabel"
825
+ :breadcrumbLinks="breadcrumbsData.breadcrumbLinks" v-bind="cmdBreadcrumbsSettingsData" />
1295
826
  </CmdWidthLimitationWrapper>
1296
827
  <!-- end breadcrumbs --------------------------------------------------------------------------------------------------->
1297
828
 
1298
- <!-- begin code-output --------------------------------------------------------------------------------------------------->
1299
-
829
+ <!-- begin code-output --------------------------------------------------------------------------------------------------->
830
+
1300
831
  <CmdWidthLimitationWrapper>
1301
832
  <h2 class="headline-demopage" id="section-code-output">
1302
833
  <span>Code Output</span>
1303
834
  <a href="#" class="button small icon-cog" title="Open Component Settings"
1304
- @click.prevent="openSettingsSidebar('CmdCodeOutput')"></a>
835
+ @click.prevent="openSettingsSidebar('CmdCodeOutput')"></a>
1305
836
  </h2>
1306
837
  <CmdCodeOutput ref="CmdCodeOutput" v-bind="cmdCodeOutputSettingsData">
1307
838
  {{ cmdCodeOutputSlotContent }}
1308
839
  </CmdCodeOutput>
1309
840
  </CmdWidthLimitationWrapper>
1310
- <!-- end code-output --------------------------------------------------------------------------------------------------->
841
+ <!-- end code-output --------------------------------------------------------------------------------------------------->
1311
842
 
1312
843
  <!-- begin company-logo --------------------------------------------------------------------------------------------------->
1313
844
  <CmdWidthLimitationWrapper>
1314
845
  <h2 class="headline-demopage" id="section-company-logo">
1315
846
  <span>Company Logo</span>
1316
847
  <a href="#" class="button small icon-cog" title="Open Component Settings"
1317
- @click.prevent="openSettingsSidebar('CmdCompanyLogo')"></a>
848
+ @click.prevent="openSettingsSidebar('CmdCompanyLogo')"></a>
1318
849
  </h2>
1319
- <CmdCompanyLogo
1320
- ref="CmdCompanyLogo"
1321
- :link="companyLogoData.link"
1322
- v-bind="cmdCompanyLogoSettingsData"
1323
- />
850
+ <CmdCompanyLogo ref="CmdCompanyLogo" :link="companyLogoData.link" v-bind="cmdCompanyLogoSettingsData" />
1324
851
  </CmdWidthLimitationWrapper>
1325
852
  <!-- end company-logo --------------------------------------------------------------------------------------------------->
1326
853
 
@@ -1329,42 +856,24 @@
1329
856
  <h2 class="headline-demopage" id="section-container">
1330
857
  <span>Container</span>
1331
858
  <a href="#" class="button small icon-cog" title="Open Component Settings"
1332
- @click.prevent="openSettingsSidebar('CmdContainer')"></a>
859
+ @click.prevent="openSettingsSidebar('CmdContainer')"></a>
1333
860
  </h2>
1334
861
  <h3>Default Container</h3>
1335
- <CmdContainer
1336
- style="border: 1px dotted gray"
1337
- ref="CmdContainer"
1338
- v-bind="cmdContainerSettingsData"
1339
- />
862
+ <CmdContainer style="border: 1px dotted gray" ref="CmdContainer" v-bind="cmdContainerSettingsData" />
1340
863
  <h3>Container with default-text</h3>
1341
- <CmdContainer
1342
- style="border: 1px dotted gray"
1343
- ref="CmdContainer"
1344
- innerText="Some inner text"
1345
- containerType="flex"
1346
- contentOrientation="horizontal"
1347
- />
864
+ <CmdContainer style="border: 1px dotted gray" ref="CmdContainer" innerText="Some inner text"
865
+ containerType="flex" contentOrientation="horizontal" />
1348
866
  <h3>Container with vertical slots</h3>
1349
- <CmdContainer
1350
- style="border: 1px dotted gray"
1351
- ref="CmdContainer"
1352
- v-bind="cmdContainerSettingsData"
1353
- >
867
+ <CmdContainer style="border: 1px dotted gray" ref="CmdContainer" v-bind="cmdContainerSettingsData">
1354
868
  <p>Slot-content</p>
1355
869
  <p>Slot-content</p>
1356
870
  <p>Slot-content</p>
1357
871
  </CmdContainer>
1358
872
  <h3>Container with horizontal slots</h3>
1359
- <CmdContainer
1360
- style="border: 1px dotted gray"
1361
- ref="CmdContainer"
1362
- v-bind="cmdContainerSettingsData"
1363
- contentOrientation="horizontal"
1364
- innerClass="inner-class"
1365
- >
1366
- <component :is="componentNameForContainer" headlineText="Headline 1" headlineLevel="6"/>
1367
- <component :is="componentNameForContainer" headlineText="Headline 2" headlineLevel="6"/>
873
+ <CmdContainer style="border: 1px dotted gray" ref="CmdContainer" v-bind="cmdContainerSettingsData"
874
+ contentOrientation="horizontal" innerClass="inner-class">
875
+ <component :is="componentNameForContainer" headlineText="Headline 1" headlineLevel="6" />
876
+ <component :is="componentNameForContainer" headlineText="Headline 2" headlineLevel="6" />
1368
877
  </CmdContainer>
1369
878
  </CmdWidthLimitationWrapper>
1370
879
  <!-- end container --------------------------------------------------------------------------------------------------->
@@ -1382,43 +891,17 @@
1382
891
  <CmdWidthLimitationWrapper>
1383
892
  <h2 class="headline-demopage" id="section-forms">Forms</h2>
1384
893
  <h3>Form elements given by data</h3>
1385
- <CmdForm
1386
- :useFieldset="true"
1387
- :useSlot="false"
1388
- id="form-component"
1389
- novalidate="novalidate"
1390
- :formElements="formElementsData"
1391
- @submit="doConsoleLog"
1392
- />
894
+ <CmdForm :useFieldset="true" :useSlot="false" id="form-component" novalidate="novalidate"
895
+ :formElements="formElementsData" @submit="doConsoleLog" />
1393
896
  <h3>Form elements given by slot</h3>
1394
- <CmdForm
1395
- :use-fieldset="true"
1396
- id="form-component"
1397
- novalidate="novalidate"
1398
- :submitButton="{position: 'belowFieldset'}"
1399
- @submit="doConsoleLog"
1400
- >
1401
- <CmdFormElement
1402
- element="input"
1403
- text="text"
1404
- name="input-text"
1405
- labelText="Text input"
1406
- placeholder="Text input"
1407
- />
1408
- <CmdFormElement
1409
- element="input"
1410
- text="number"
1411
- labelText="Number input"
1412
- name="input-number"
1413
- modelValue="1"
1414
- />
1415
- <CmdFormElement
1416
- element="input"
1417
- text="password"
1418
- labelText="Password input"
1419
- name="password-number"
1420
- placeholder="Password input"
1421
- />
897
+ <CmdForm :use-fieldset="true" id="form-component" novalidate="novalidate"
898
+ :submitButton="{ position: 'belowFieldset' }" @submit="doConsoleLog">
899
+ <CmdFormElement element="input" text="text" name="input-text" labelText="Text input"
900
+ placeholder="Text input" />
901
+ <CmdFormElement element="input" text="number" labelText="Number input" name="input-number"
902
+ modelValue="1" />
903
+ <CmdFormElement element="input" text="password" labelText="Password input" name="password-number"
904
+ placeholder="Password input" />
1422
905
  </CmdForm>
1423
906
  </CmdWidthLimitationWrapper>
1424
907
  <!-- end forms --------------------------------------------------------------------------------------------------->
@@ -1427,35 +910,28 @@
1427
910
  <CmdWidthLimitationWrapper>
1428
911
  <h2 class="headline-demopage" id="section-fancybox">Fancybox</h2>
1429
912
  <h3>FancyBox with text</h3>
1430
- <a href="#" @click.prevent="showFancyBox('text','Some text', 'FancyBox with text')">Open FancyBox
913
+ <a href="#" @click.prevent="showFancyBox('text', 'Some text', 'FancyBox with text')">Open FancyBox
1431
914
  with text</a>
1432
915
  <h3>FancyBox with large image given by url</h3>
1433
916
  <a href="#"
1434
- @click.prevent="showFancyBox('url', '/media/images/demo-images/large/landscape-01.jpg', 'FancyBox with large image given by url')"
1435
- title="Open FancyBox with large image given by url"
1436
- style="align-self: flex-start"
1437
- >
1438
- <img src="/media/images/demo-images/small/landscape-01.jpg" alt="Alternative text"/>
917
+ @click.prevent="showFancyBox('url', '/media/images/demo-images/large/landscape-01.jpg', 'FancyBox with large image given by url')"
918
+ title="Open FancyBox with large image given by url" style="align-self: flex-start">
919
+ <img src="/media/images/demo-images/small/landscape-01.jpg" alt="Alternative text" />
1439
920
  </a>
1440
921
  <h3>FancyBox with large image given by property</h3>
1441
922
  <a href="#"
1442
- @click.prevent="showFancyBox('image', {large:'/media/images/demo-images/large/landscape-02.jpg'}, 'FancyBox with large image given by property')"
1443
- title="Open FancyBox with large image given by property"
1444
- style="align-self: flex-start"
1445
- >
1446
- <img src="/media/images/demo-images/small/landscape-02.jpg" alt="Alternative text"/>
923
+ @click.prevent="showFancyBox('image', { large: '/media/images/demo-images/large/landscape-02.jpg' }, 'FancyBox with large image given by property')"
924
+ title="Open FancyBox with large image given by property" style="align-self: flex-start">
925
+ <img src="/media/images/demo-images/small/landscape-02.jpg" alt="Alternative text" />
1447
926
  </a>
1448
927
  <h3>FancyBox with image as object give by property</h3>
1449
- <a href="#"
1450
- @click.prevent="showFancyBox('image', {
1451
- small: '/media/images/demo-images/medium/landscape-03.jpg',
1452
- medium: '/media/images/demo-images/medium/landscape-03.jpg',
1453
- large: '/media/images/demo-images/large/landscape-03.jpg'
1454
- }, 'FancyBox with large image given by property')"
1455
- title="Open FancyBox with large image given by property"
1456
- style="align-self: flex-start"
1457
- >
1458
- <img src="/media/images/demo-images/small/landscape-03.jpg" alt="Alternative text"/>
928
+ <a href="#" @click.prevent="showFancyBox('image', {
929
+ small: '/media/images/demo-images/medium/landscape-03.jpg',
930
+ medium: '/media/images/demo-images/medium/landscape-03.jpg',
931
+ large: '/media/images/demo-images/large/landscape-03.jpg'
932
+ }, 'FancyBox with large image given by property')"
933
+ title="Open FancyBox with large image given by property" style="align-self: flex-start">
934
+ <img src="/media/images/demo-images/small/landscape-03.jpg" alt="Alternative text" />
1459
935
  </a>
1460
936
 
1461
937
  </CmdWidthLimitationWrapper>
@@ -1509,7 +985,7 @@
1509
985
  <!-- begin google-maps --------------------------------------------------------------------------------------------------->
1510
986
  <CmdWidthLimitationWrapper>
1511
987
  <h2 class="headline-demopage" id="section-google-maps">Google Maps&trade;</h2>
1512
- <CmdGoogleMaps :address="addressData[1]"/>
988
+ <CmdGoogleMaps :address="addressData[1]" />
1513
989
  </CmdWidthLimitationWrapper>
1514
990
  <!-- end google-maps --------------------------------------------------------------------------------------------------->
1515
991
 
@@ -1518,31 +994,15 @@
1518
994
  <h2 class="headline-demopage" id="section-headlines">
1519
995
  <span>Headlines</span>
1520
996
  <a href="#" class="button small icon-cog" title="Open Component Settings"
1521
- @click.prevent="openSettingsSidebar('CmdHeadline')"></a>
997
+ @click.prevent="openSettingsSidebar('CmdHeadline')"></a>
1522
998
  </h2>
1523
- <CmdHeadline
1524
- ref="CmdHeadline"
1525
- v-bind="cmdHeadlineSettingsData"
1526
- />
1527
- <CmdHeadline
1528
- v-bind="cmdHeadlineSettingsData"
1529
- :cmdIcon="{iconClass: 'icon-home'}"
1530
- />
1531
- <CmdHeadline
1532
- headlineLevel="3"
1533
- headlineText="Headline text"
1534
- :cmdIcon="{iconClass: 'icon-home'}"
1535
- />
1536
- <CmdHeadline
1537
- ref="CmdHeadline"
1538
- headlineLevel="3"
1539
- headlineText="Headline text<br /> with html-content given by property"
1540
- />
1541
- <CmdHeadline
1542
- ref="CmdHeadline"
1543
- headlineLevel="3"
1544
- >
1545
- Headline text<br/> with html-content given by slot
999
+ <CmdHeadline ref="CmdHeadline" v-bind="cmdHeadlineSettingsData" />
1000
+ <CmdHeadline v-bind="cmdHeadlineSettingsData" :cmdIcon="{ iconClass: 'icon-home' }" />
1001
+ <CmdHeadline headlineLevel="3" headlineText="Headline text" :cmdIcon="{ iconClass: 'icon-home' }" />
1002
+ <CmdHeadline ref="CmdHeadline" headlineLevel="3"
1003
+ headlineText="Headline text<br /> with html-content given by property" />
1004
+ <CmdHeadline ref="CmdHeadline" headlineLevel="3">
1005
+ Headline text<br /> with html-content given by slot
1546
1006
  </CmdHeadline>
1547
1007
 
1548
1008
  </CmdWidthLimitationWrapper>
@@ -1554,23 +1014,23 @@
1554
1014
  <ul>
1555
1015
  <li>
1556
1016
  <span>Icon from local iconfont</span>
1557
- <CmdIcon iconClass="icon-home"/>
1017
+ <CmdIcon iconClass="icon-home" />
1558
1018
  </li>
1559
1019
  <li>
1560
1020
  <span>Icon from iconify-api (icomoon-font)</span>
1561
- <CmdIcon iconClass="icomoon-free:home"/>
1021
+ <CmdIcon iconClass="icomoon-free:home" />
1562
1022
  </li>
1563
1023
  <li>
1564
1024
  <span>Icon from iconify-api (bootstrap-font)</span>
1565
- <CmdIcon iconClass="bi:house-fill"/>
1025
+ <CmdIcon iconClass="bi:house-fill" />
1566
1026
  </li>
1567
1027
  <li>
1568
1028
  <span>Icon from iconify-api (material-design-font)</span>
1569
- <CmdIcon iconClass="mdi:home"/>
1029
+ <CmdIcon iconClass="mdi:home" />
1570
1030
  </li>
1571
1031
  <li>
1572
1032
  <span>Icon from iconify-api (font-awesome-solid-font)</span>
1573
- <CmdIcon iconClass="fa6-solid:house-chimney"/>
1033
+ <CmdIcon iconClass="fa6-solid:house-chimney" />
1574
1034
  </li>
1575
1035
  </ul>
1576
1036
  </CmdWidthLimitationWrapper>
@@ -1581,19 +1041,12 @@
1581
1041
  <h2 class="headline-demopage" id="section-image">
1582
1042
  <span>Image</span>
1583
1043
  <a href="#" class="button small icon-cog" title="Open Component Settings"
1584
- @click.prevent="openSettingsSidebar('CmdImage')"></a>
1044
+ @click.prevent="openSettingsSidebar('CmdImage')"></a>
1585
1045
  </h2>
1586
1046
  <div class="flex-container">
1587
- <CmdImage
1588
- ref="CmdImage"
1589
- :image="imageData[0].image"
1590
- :figcaption="imageData[0].figcaption"
1591
- v-bind="cmdImageSettingsData"
1592
- />
1593
- <CmdImage
1594
- :image="imageData[1].image"
1595
- :figcaption="imageData[1].figcaption"
1596
- />
1047
+ <CmdImage ref="CmdImage" :image="imageData[0].image" :figcaption="imageData[0].figcaption"
1048
+ v-bind="cmdImageSettingsData" />
1049
+ <CmdImage :image="imageData[1].image" :figcaption="imageData[1].figcaption" />
1597
1050
  </div>
1598
1051
  </CmdWidthLimitationWrapper>
1599
1052
  <!-- end images --------------------------------------------------------------------------------------------------->
@@ -1603,13 +1056,10 @@
1603
1056
  <h2 class="headline-demopage" id="section-image-gallery">
1604
1057
  <span>Image-Gallery</span>
1605
1058
  <a href="#" class="button small icon-cog" title="Open Component Settings"
1606
- @click.prevent="openSettingsSidebar('CmdImageGallery')"></a>
1059
+ @click.prevent="openSettingsSidebar('CmdImageGallery')"></a>
1607
1060
  </h2>
1608
- <CmdImageGallery
1609
- ref="CmdImageGallery"
1610
- :images="imageGalleryData"
1611
- v-bind="cmdImageGallerySettingsData"
1612
- />
1061
+ <CmdImageGallery ref="CmdImageGallery" :images="imageGalleryData"
1062
+ v-bind="cmdImageGallerySettingsData" />
1613
1063
  </CmdWidthLimitationWrapper>
1614
1064
  <!-- end image-gallery --------------------------------------------------------------------------------------------------->
1615
1065
 
@@ -1618,10 +1068,7 @@
1618
1068
  <h2 class="headline-demopage" id="section-image-zoom">
1619
1069
  Image-Zoom
1620
1070
  </h2>
1621
- <CmdImageZoom
1622
- :imageSmall="imageZoomData.imageSmall"
1623
- :imageLarge="imageZoomData.imageLarge"
1624
- />
1071
+ <CmdImageZoom :imageSmall="imageZoomData.imageSmall" :imageLarge="imageZoomData.imageLarge" />
1625
1072
  </CmdWidthLimitationWrapper>
1626
1073
  <!-- end image-zoom --------------------------------------------------------------------------------------------------->
1627
1074
 
@@ -1630,71 +1077,35 @@
1630
1077
  <h2 class="headline-demopage" id="section-link">
1631
1078
  <span>Link</span>
1632
1079
  <a href="#" class="button small icon-cog" title="Open Component Settings"
1633
- @click.prevent="openSettingsSidebar('CmdLink')"></a>
1080
+ @click.prevent="openSettingsSidebar('CmdLink')"></a>
1634
1081
  </h2>
1635
- <CmdLink
1636
- linkType="href"
1637
- ref="CmdLink"
1638
- v-bind="cmdLinkSettingsData"
1639
- :icon="{iconClass: 'icon-chevron-one-stripe-right', position: 'right', tooltip: 'Tooltip for hyperlink'}"
1640
- @click="cmdLinkOutput"
1641
- />
1642
- <CmdLink
1643
- linkType="href"
1644
- ref="CmdLink"
1645
- v-bind="cmdLinkSettingsData"
1646
- :icon="{iconClass: 'icon-chevron-one-stripe-left', position: 'left', tooltip: 'Tooltip for hyperlink'}"
1647
- @click="cmdLinkOutput"
1648
- />
1649
- <CmdLink
1650
- linkType="href"
1651
- ref="CmdLink"
1652
- v-bind="cmdLinkSettingsData"
1653
- text="Link with fancybox"
1654
- :fancybox="true"
1655
- :icon="{iconClass: 'icon-chevron-one-stripe-right', position: 'right', tooltip: 'Tooltip for hyperlink'}"
1656
- />
1657
- <CmdLink
1658
- linkType="href"
1659
- ref="CmdLink"
1660
- style="align-self: flex-start"
1661
- v-bind="cmdLinkSettingsData"
1662
- text="Link styled as box"
1663
- :styleAsBox="true"
1664
- :icon="{iconClass: 'icon-home', position: 'top', tooltip: 'Tooltip for hyperlink'}"
1665
- />
1666
- <CmdLink
1667
- linkType="href"
1668
- :styleAsButton="true"
1669
- text="Link styled as button"
1670
- :icon="{iconClass: 'icon-home', position: 'left'}"
1671
- @click="cmdLinkOutput"
1672
- />
1673
- <CmdLink
1674
- linkType="submit"
1675
- text="Submit button"
1676
- :icon="{iconClass: 'icon-home', position: 'left'}"
1677
- @click="cmdLinkOutput"
1678
- />
1679
- <CmdLink
1680
- linkType="button"
1681
- text="Add link"
1682
- :primaryButton="true"
1683
- :icon="{iconClass: 'icon-link', position: 'right'}"
1684
- @click="showCmdLink = true"
1685
- />
1686
- <CmdLink
1687
- v-if="showCmdLink"
1688
- path="#"
1689
- linkType="href"
1690
- text="Link added on click"
1082
+ <CmdLink linkType="href" ref="CmdLink" v-bind="cmdLinkSettingsData"
1083
+ :icon="{ iconClass: 'icon-chevron-one-stripe-right', position: 'right', tooltip: 'Tooltip for hyperlink' }"
1084
+ @click="cmdLinkOutput" />
1085
+ <CmdLink linkType="href" ref="CmdLink" v-bind="cmdLinkSettingsData"
1086
+ :icon="{ iconClass: 'icon-chevron-one-stripe-left', position: 'left', tooltip: 'Tooltip for hyperlink' }"
1087
+ @click="cmdLinkOutput" />
1088
+ <CmdLink linkType="href" ref="CmdLink" v-bind="cmdLinkSettingsData" text="Link with fancybox"
1691
1089
  :fancybox="true"
1692
- :icon="{iconClass: 'icon-chevron-one-stripe-right', position: 'right', tooltip: 'Tooltip for hyperlink'}"
1693
- />
1090
+ :icon="{ iconClass: 'icon-chevron-one-stripe-right', position: 'right', tooltip: 'Tooltip for hyperlink' }" />
1091
+ <CmdLink linkType="href" ref="CmdLink" style="align-self: flex-start" v-bind="cmdLinkSettingsData"
1092
+ text="Link styled as box" :styleAsBox="true"
1093
+ :icon="{ iconClass: 'icon-home', position: 'top', tooltip: 'Tooltip for hyperlink' }" />
1094
+ <CmdLink linkType="href" :styleAsButton="true" text="Link styled as button"
1095
+ :icon="{ iconClass: 'icon-home', position: 'left' }" @click="cmdLinkOutput" />
1096
+ <CmdLink linkType="submit" text="Submit button" :icon="{ iconClass: 'icon-home', position: 'left' }"
1097
+ @click="cmdLinkOutput" />
1098
+ <CmdLink linkType="button" text="Add link" :primaryButton="true"
1099
+ :icon="{ iconClass: 'icon-link', position: 'right' }" @click="showCmdLink = true" />
1100
+ <CmdLink v-if="showCmdLink" path="#" linkType="href" text="Link added on click" :fancybox="true"
1101
+ :icon="{ iconClass: 'icon-chevron-one-stripe-right', position: 'right', tooltip: 'Tooltip for hyperlink' }" />
1694
1102
  <dl class="output">
1695
- <dt>Event:</dt><dd>{{outputCmdLink?.event?.originalEvent.originalEvent}}</dd>
1696
- <dt>Target:</dt><dd>{{outputCmdLink?.event?.originalEvent.target}}</dd>
1697
- <dt>LinkType:</dt><dd>{{outputCmdLink?.event?.originalEvent.linkType}}</dd>
1103
+ <dt>Event:</dt>
1104
+ <dd>{{ outputCmdLink?.event?.originalEvent.originalEvent }}</dd>
1105
+ <dt>Target:</dt>
1106
+ <dd>{{ outputCmdLink?.event?.originalEvent.target }}</dd>
1107
+ <dt>LinkType:</dt>
1108
+ <dd>{{ outputCmdLink?.event?.originalEvent.linkType }}</dd>
1698
1109
  </dl>
1699
1110
  </CmdWidthLimitationWrapper>
1700
1111
  <!-- end link --------------------------------------------------------------------------------------------------->
@@ -1704,33 +1115,22 @@
1704
1115
  <h2 class="headline-demopage" id="section-list">
1705
1116
  <span>List</span>
1706
1117
  <a href="#" class="button small icon-cog" title="Open Component Settings"
1707
- @click.prevent="openSettingsSidebar('CmdList')"></a>
1118
+ @click.prevent="openSettingsSidebar('CmdList')"></a>
1708
1119
  </h2>
1709
- <CmdList
1710
- :cmdHeadline="{headlineText: 'List of links', headlineLevel: 3}"
1711
- ref="CmdList"
1712
- v-bind="cmdListSettingsData"
1713
- :items="listData"
1714
- listType="links"
1715
- @click="cmdLinkOutput"
1716
- />
1120
+ <CmdList :cmdHeadline="{ headlineText: 'List of links', headlineLevel: 3 }" ref="CmdList"
1121
+ v-bind="cmdListSettingsData" :items="listData" listType="links" @click="cmdLinkOutput" />
1717
1122
  <dl class="output">
1718
- <dt>Event:</dt><dd>{{outputCmdLink?.event?.originalEvent}}</dd>
1719
- <dt>Target:</dt><dd>{{outputCmdLink?.event?.originalEvent.target}}</dd>
1720
- <dt>LinkType:</dt><dd>{{outputCmdLink?.event?.linkType}}</dd>
1123
+ <dt>Event:</dt>
1124
+ <dd>{{ outputCmdLink?.event?.originalEvent }}</dd>
1125
+ <dt>Target:</dt>
1126
+ <dd>{{ outputCmdLink?.event?.originalEvent.target }}</dd>
1127
+ <dt>LinkType:</dt>
1128
+ <dd>{{ outputCmdLink?.event?.linkType }}</dd>
1721
1129
  </dl>
1722
- <CmdList
1723
- :cmdHeadline="{headlineText: 'List of images', headlineLevel: 3}"
1724
- :items="imageGalleryData"
1725
- orientation="horizontal"
1726
- listType="images"
1727
- />
1728
- <CmdList
1729
- :cmdHeadline="{headlineText: 'List of tags', headlineLevel: 3}"
1730
- :items="listOfTagsData"
1731
- orientation="horizontal"
1732
- listType="tags"
1733
- />
1130
+ <CmdList :cmdHeadline="{ headlineText: 'List of images', headlineLevel: 3 }" :items="imageGalleryData"
1131
+ orientation="horizontal" listType="images" />
1132
+ <CmdList :cmdHeadline="{ headlineText: 'List of tags', headlineLevel: 3 }" :items="listOfTagsData"
1133
+ orientation="horizontal" listType="tags" />
1734
1134
  </CmdWidthLimitationWrapper>
1735
1135
  <!-- end list --------------------------------------------------------------------------------------------------->
1736
1136
 
@@ -1739,14 +1139,10 @@
1739
1139
  <h2 class="headline-demopage" id="section-login-form">
1740
1140
  <span>Login Form</span>
1741
1141
  <a href="#" class="button small icon-cog" title="Open Component Settings"
1742
- @click.prevent="openSettingsSidebar('CmdLoginForm')"></a>
1142
+ @click.prevent="openSettingsSidebar('CmdLoginForm')"></a>
1743
1143
  </h2>
1744
1144
  <CmdForm :use-fieldset="false">
1745
- <CmdLoginForm
1746
- ref="CmdLoginForm"
1747
- v-bind="cmdLoginFormSettingsData"
1748
- v-model="loginData"
1749
- />
1145
+ <CmdLoginForm ref="CmdLoginForm" v-bind="cmdLoginFormSettingsData" v-model="loginData" />
1750
1146
  </CmdForm>
1751
1147
  <p>LoginData: {{ loginData }}</p>
1752
1148
  </CmdWidthLimitationWrapper>
@@ -1757,11 +1153,7 @@
1757
1153
  <h2 class="headline-demopage" id="section-mail-tool">
1758
1154
  <span>Mail Tool</span>
1759
1155
  </h2>
1760
- <CmdMailTool
1761
- ref="CmdMailTool"
1762
- :mailsInbox="mailToolData.inbox"
1763
- :mailsOutbox="mailToolData.outbox"
1764
- />
1156
+ <CmdMailTool ref="CmdMailTool" :mailsInbox="mailToolData.inbox" :mailsOutbox="mailToolData.outbox" />
1765
1157
  </CmdWidthLimitationWrapper>
1766
1158
  <!-- end mail-tool --------------------------------------------------------------------------------------------------->
1767
1159
 
@@ -1770,13 +1162,10 @@
1770
1162
  <h2 class="headline-demopage" id="section-main-navigation">
1771
1163
  <span>Main Navigation</span>
1772
1164
  <a href="#" class="button small icon-cog" title="Open Component Settings"
1773
- @click.prevent="openSettingsSidebar('CmdMainNavigation')"></a>
1165
+ @click.prevent="openSettingsSidebar('CmdMainNavigation')"></a>
1774
1166
  </h2>
1775
- <CmdMainNavigation
1776
- ref="CmdMainNavigation"
1777
- v-bind="cmdMainNavigationSettingsData"
1778
- :navigationEntries="navigationDataModified"
1779
- />
1167
+ <CmdMainNavigation ref="CmdMainNavigation" v-bind="cmdMainNavigationSettingsData"
1168
+ :navigationEntries="navigationDataModified" />
1780
1169
  <!-- begin router-view -->
1781
1170
  <router-view v-if="useRouterLinks"></router-view>
1782
1171
  <!-- end router-view -->
@@ -1788,22 +1177,14 @@
1788
1177
  <h2 class="headline-demopage" id="section-multistep-form-progress-bar">
1789
1178
  <span>Multistepform-Progressbar</span>
1790
1179
  <a href="#" class="button small icon-cog" title="Open Component Settings"
1791
- @click.prevent="openSettingsSidebar('CmdMultistepFormProgressBar')"></a>
1180
+ @click.prevent="openSettingsSidebar('CmdMultistepFormProgressBar')"></a>
1792
1181
  </h2>
1793
1182
  <h3>Steps with icons</h3>
1794
- <CmdMultistepFormProgressBar
1795
- ref="CmdMultistepFormProgressBar"
1796
- :multisteps="multistepsData.withIcon"
1797
- v-bind="cmdMultistepFormProgressBarSettingsData"
1798
- @click="showPageMultistep = $event.index + 1"
1799
- />
1183
+ <CmdMultistepFormProgressBar ref="CmdMultistepFormProgressBar" :multisteps="multistepsData.withIcon"
1184
+ v-bind="cmdMultistepFormProgressBarSettingsData" @click="showPageMultistep = $event.index + 1" />
1800
1185
  <h3>Router</h3>
1801
- <CmdMultistepFormProgressBar
1802
- ref="CmdMultistepFormProgressBar"
1803
- :multisteps="multistepsData.router"
1804
- v-bind="cmdMultistepFormProgressBarSettingsData"
1805
- @click="showPageMultistep = $event.index + 1"
1806
- />
1186
+ <CmdMultistepFormProgressBar ref="CmdMultistepFormProgressBar" :multisteps="multistepsData.router"
1187
+ v-bind="cmdMultistepFormProgressBarSettingsData" @click="showPageMultistep = $event.index + 1" />
1807
1188
  <div>
1808
1189
  <p>Page {{ showPageMultistep }}</p>
1809
1190
  </div>
@@ -1815,15 +1196,12 @@
1815
1196
  <h2 class="headline-demopage" id="section-newsletter-subscription">
1816
1197
  <span>Newsletter Subscription</span>
1817
1198
  <a href="#" class="button small icon-cog" title="Open Component Settings"
1818
- @click.prevent="openSettingsSidebar('CmdNewsletterSubscription')"></a>
1199
+ @click.prevent="openSettingsSidebar('CmdNewsletterSubscription')"></a>
1819
1200
  </h2>
1820
1201
  <CmdForm :use-fieldset="false">
1821
- <CmdNewsletterSubscription
1822
- ref="CmdNewsletterSubscription"
1823
- v-bind="cmdNewsletterSubscriptionSettingsData"
1824
- v-model="newsletter"
1825
- @buttonClick="submitNewsletterRegistration"
1826
- />
1202
+ <CmdNewsletterSubscription ref="CmdNewsletterSubscription"
1203
+ v-bind="cmdNewsletterSubscriptionSettingsData" v-model="newsletter"
1204
+ @buttonClick="submitNewsletterRegistration" />
1827
1205
  </CmdForm>
1828
1206
  </CmdWidthLimitationWrapper>
1829
1207
  <!-- end newsletter-subscription --------------------------------------------------------------------------------------------------->
@@ -1833,15 +1211,10 @@
1833
1211
  <h2 class="headline-demopage" id="section-opening-hours">
1834
1212
  <span>Opening Hours</span>
1835
1213
  <a href="#" class="button small icon-cog" title="Open Component Settings"
1836
- @click.prevent="openSettingsSidebar('CmdOpeningHours')"></a>
1214
+ @click.prevent="openSettingsSidebar('CmdOpeningHours')"></a>
1837
1215
  </h2>
1838
- <CmdOpeningHours
1839
- ref="CmdOpeningHours"
1840
- v-bind="cmdOpeningHoursSettingsData"
1841
- :openingHours="openingHoursData"
1842
- :checkInterval="0"
1843
- :use24HoursFormat="false"
1844
- />
1216
+ <CmdOpeningHours ref="CmdOpeningHours" v-bind="cmdOpeningHoursSettingsData"
1217
+ :openingHours="openingHoursData" :checkInterval="0" :use24HoursFormat="false" />
1845
1218
  </CmdWidthLimitationWrapper>
1846
1219
  <!-- end opening-hours --------------------------------------------------------------------------------------------------->
1847
1220
 
@@ -1850,14 +1223,10 @@
1850
1223
  <h2 class="headline-demopage" id="section-page-footer">
1851
1224
  <span>Page Footer</span>
1852
1225
  <a href="#" class="button small icon-cog" title="Open Component Settings"
1853
- @click.prevent="openSettingsSidebar('CmdPageFooter')"></a>
1226
+ @click.prevent="openSettingsSidebar('CmdPageFooter')"></a>
1854
1227
  </h2>
1855
- <CmdPageFooter
1856
- ref="CmdPageFooter"
1857
- v-bind="cmdPageFooterSettingsData"
1858
- :button-print-view="{text: 'Print this page'}"
1859
- :cmdSocialNetworks="socialNetworksData"
1860
- >
1228
+ <CmdPageFooter ref="CmdPageFooter" v-bind="cmdPageFooterSettingsData"
1229
+ :button-print-view="{ text: 'Print this page' }" :cmdSocialNetworks="socialNetworksData">
1861
1230
  <button class="button primary" title="Button given by slot">
1862
1231
  <span class="icon-mail"></span>
1863
1232
  <span>Contact</span>
@@ -1871,12 +1240,10 @@
1871
1240
  <h2 class="headline-demopage" id="section-page-header">
1872
1241
  <span>Page Header</span>
1873
1242
  <a href="#" class="button small icon-cog" title="Open Component Settings"
1874
- @click.prevent="openSettingsSidebar('CmdPageHeader')"></a>
1243
+ @click.prevent="openSettingsSidebar('CmdPageHeader')"></a>
1875
1244
  </h2>
1876
- <CmdPageHeader
1877
- ref="CmdPageHeader"
1878
- :cmdBreadcrumbs="breadcrumbsData"
1879
- :cmdHeadline="{headlineText: 'Main headline for page', headlineLevel: 1}">
1245
+ <CmdPageHeader ref="CmdPageHeader" :cmdBreadcrumbs="breadcrumbsData"
1246
+ :cmdHeadline="{ headlineText: 'Main headline for page', headlineLevel: 1 }">
1880
1247
  <a href="#" title="Link given by slot">
1881
1248
  <span class="icon-user-profile"></span>
1882
1249
  <span>You are logged in</span>
@@ -1890,16 +1257,12 @@
1890
1257
  <h2 class="headline-demopage" id="section-pagination">
1891
1258
  <span>Pagination</span>
1892
1259
  <a href="#" class="button small icon-cog" title="Open Component Settings"
1893
- @click.prevent="openSettingsSidebar('CmdPagination')"></a>
1260
+ @click.prevent="openSettingsSidebar('CmdPagination')"></a>
1894
1261
  </h2>
1895
1262
  <div>
1896
1263
  <p>Page {{ showPagePager }}</p>
1897
1264
  </div>
1898
- <CmdPagination
1899
- ref="CmdPagination"
1900
- v-bind="cmdPaginationSettingsData"
1901
- @click="showPagePager = $event"
1902
- />
1265
+ <CmdPagination ref="CmdPagination" v-bind="cmdPaginationSettingsData" @click="showPagePager = $event" />
1903
1266
  </CmdWidthLimitationWrapper>
1904
1267
  <!-- end pagination --------------------------------------------------------------------------------------------------->
1905
1268
 
@@ -1908,13 +1271,11 @@
1908
1271
  <h2 class="headline-demopage" id="section-section">
1909
1272
  <span>Section</span>
1910
1273
  <a href="#" class="button small icon-cog" title="Open Component Settings"
1911
- @click.prevent="openSettingsSidebar('CmdSection')"></a>
1274
+ @click.prevent="openSettingsSidebar('CmdSection')"></a>
1912
1275
  </h2>
1913
1276
  <h3>Section with content provided by properties</h3>
1914
- <CmdSection
1915
- :cmdHeadline="{headlineText: 'Headline for section provided by property', headlineLevel: 4}"
1916
- content="Content for section provided by property."
1917
- />
1277
+ <CmdSection :cmdHeadline="{ headlineText: 'Headline for section provided by property', headlineLevel: 4 }"
1278
+ content="Content for section provided by property." />
1918
1279
  <h3>Section with content provided by slot</h3>
1919
1280
  <CmdSection :useSlot="true">
1920
1281
  <h4>Headline for section provided by slot</h4>
@@ -1932,13 +1293,9 @@
1932
1293
  <CmdWidthLimitationWrapper>
1933
1294
  <h2 class="headline-demopage" id="section-site-footer">Site Footer</h2>
1934
1295
  <CmdSiteFooter>
1935
- <CmdLink
1936
- linkType="href"
1937
- ref="CmdLink"
1938
- v-bind="cmdLinkSettingsData"
1939
- :icon="{iconClass: 'icon-chevron-one-stripe-left', position: 'left', tooltip: 'Tooltip for hyperlink'}"
1940
- @click="cmdLinkOutput"
1941
- />
1296
+ <CmdLink linkType="href" ref="CmdLink" v-bind="cmdLinkSettingsData"
1297
+ :icon="{ iconClass: 'icon-chevron-one-stripe-left', position: 'left', tooltip: 'Tooltip for hyperlink' }"
1298
+ @click="cmdLinkOutput" />
1942
1299
  </CmdSiteFooter>
1943
1300
  </CmdWidthLimitationWrapper>
1944
1301
  <!-- end site-footer --------------------------------------------------------------------------------------------------->
@@ -1948,19 +1305,11 @@
1948
1305
  <h2 class="headline-demopage" id="section-site-header">
1949
1306
  <span>Site Header</span>
1950
1307
  <a href="#" class="button small icon-cog" title="Open Component Settings"
1951
- @click.prevent="openSettingsSidebar('CmdSiteHeader')"></a>
1308
+ @click.prevent="openSettingsSidebar('CmdSiteHeader')"></a>
1952
1309
  </h2>
1953
- <CmdSiteHeader
1954
- ref="CmdSiteHeader"
1955
- v-bind="cmdSiteHeaderSettingsData"
1956
- :cmdCompanyLogo="companyLogoData"
1957
- >
1310
+ <CmdSiteHeader ref="CmdSiteHeader" v-bind="cmdSiteHeaderSettingsData" :cmdCompanyLogo="companyLogoData">
1958
1311
  <template v-slot:topheader>
1959
- <CmdList
1960
- :items="listData"
1961
- orientation="horizontal"
1962
- align="right"
1963
- />
1312
+ <CmdList :items="listData" orientation="horizontal" align="right" />
1964
1313
  </template>
1965
1314
  </CmdSiteHeader>
1966
1315
  </CmdWidthLimitationWrapper>
@@ -1971,18 +1320,12 @@
1971
1320
  <h2 class="headline-demopage" id="section-site-search">
1972
1321
  <span>Site Search</span>
1973
1322
  <a href="#" class="button small icon-cog" title="Open Component Settings"
1974
- @click.prevent="openSettingsSidebar('CmdSiteSearch')"></a>
1323
+ @click.prevent="openSettingsSidebar('CmdSiteSearch')"></a>
1975
1324
  </h2>
1976
- <CmdSiteSearch
1977
- ref="CmdSiteSearch"
1978
- v-bind="cmdSiteSearchSettingsData"
1979
- v-model:modelValueInput1="siteSearchInput1"
1980
- v-model:modelValueInput2="siteSearchInput2"
1981
- v-model:modelValueRadius="radius"
1982
- v-model:modelValueSearchFilters="filters"
1983
- @search="siteSearchOutput"
1984
- :cmdFakeSelect="siteSearchFilters"
1985
- />
1325
+ <CmdSiteSearch ref="CmdSiteSearch" v-bind="cmdSiteSearchSettingsData"
1326
+ v-model:modelValueInput1="siteSearchInput1" v-model:modelValueInput2="siteSearchInput2"
1327
+ v-model:modelValueRadius="radius" v-model:modelValueSearchFilters="filters"
1328
+ @search="siteSearchOutput" :cmdFakeSelect="siteSearchFilters" />
1986
1329
  </CmdWidthLimitationWrapper>
1987
1330
  <!-- end site-search --------------------------------------------------------------------------------------------------->
1988
1331
 
@@ -1991,13 +1334,10 @@
1991
1334
  <h2 class="headline-demopage" id="section-slideshow">
1992
1335
  <span>Slideshow</span>
1993
1336
  <a href="#" class="button small icon-cog" title="Open Component Settings"
1994
- @click.prevent="openSettingsSidebar('CmdSlideshow')"></a>
1337
+ @click.prevent="openSettingsSidebar('CmdSlideshow')"></a>
1995
1338
  </h2>
1996
- <CmdSlideshow
1997
- ref="CmdSlideshow"
1998
- v-bind="cmdSlideshowSettingsData"
1999
- :slideshow-items="slideshowData"
2000
- >Slot-Content
1339
+ <CmdSlideshow ref="CmdSlideshow" v-bind="cmdSlideshowSettingsData" :slideshow-items="slideshowData">
1340
+ Slot-Content
2001
1341
  </CmdSlideshow>
2002
1342
  </CmdWidthLimitationWrapper>
2003
1343
  <!-- end slideshow --------------------------------------------------------------------------------------------------->
@@ -2007,23 +1347,18 @@
2007
1347
  <h2 class="headline-demopage" id="section-social-networks">
2008
1348
  <span>Social Networks</span>
2009
1349
  <a href="#" class="button small icon-cog" title="Open Component Settings"
2010
- @click.prevent="openSettingsSidebar('CmdSocialNetworks')"></a>
1350
+ @click.prevent="openSettingsSidebar('CmdSocialNetworks')"></a>
2011
1351
  </h2>
2012
- <CmdSocialNetworks
2013
- ref="CmdSocialNetworks"
2014
- v-bind="{...cmdSocialNetworksSettingsData, ...socialNetworksData}"
2015
- />
1352
+ <CmdSocialNetworks ref="CmdSocialNetworks"
1353
+ v-bind="{ ...cmdSocialNetworksSettingsData, ...socialNetworksData }" />
2016
1354
  </CmdWidthLimitationWrapper>
2017
1355
  <!-- end social-networks --------------------------------------------------------------------------------------------------->
2018
1356
 
2019
1357
  <!-- begin switch-language --------------------------------------------------------------------------------------------------->
2020
1358
  <CmdWidthLimitationWrapper>
2021
1359
  <h2 class="headline-demopage" id="section-switch-language">Switch Language</h2>
2022
- <CmdSwitchLanguage
2023
- :pathFlags="switchLanguage.pathFlags"
2024
- :languages="switchLanguage.languages"
2025
- @click="updateLanguage"
2026
- />
1360
+ <CmdSwitchLanguage :pathFlags="switchLanguage.pathFlags" :languages="switchLanguage.languages"
1361
+ @click="updateLanguage" />
2027
1362
  <p>Selected language: {{ selectedLanguage }} </p>
2028
1363
  </CmdWidthLimitationWrapper>
2029
1364
  <!-- end switch-language --------------------------------------------------------------------------------------------------->
@@ -2033,12 +1368,10 @@
2033
1368
  <h2 class="headline-demopage" id="section-system-message">
2034
1369
  <span>System Message</span>
2035
1370
  <a href="#" class="button small icon-cog" title="Open Component Settings"
2036
- @click.prevent="openSettingsSidebar('CmdSystemMessage')"></a>
1371
+ @click.prevent="openSettingsSidebar('CmdSystemMessage')"></a>
2037
1372
  </h2>
2038
- <CmdSystemMessage
2039
- ref="CmdSystemMessage"
2040
- v-bind="cmdSystemMessageSettingsData"
2041
- :iconMessage="{iconClass: 'icon-error-circle', show: true}">
1373
+ <CmdSystemMessage ref="CmdSystemMessage" v-bind="cmdSystemMessageSettingsData"
1374
+ :iconMessage="{ iconClass: 'icon-error-circle', show: true }">
2042
1375
  <ul>
2043
1376
  <li>Error #1</li>
2044
1377
  <li>Error #2</li>
@@ -2053,21 +1386,13 @@
2053
1386
  <h2 class="headline-demopage" id="section-tables">
2054
1387
  <span>Tables</span>
2055
1388
  <a href="#" class="button small icon-cog" title="Open Component Settings"
2056
- @click.prevent="openSettingsSidebar('CmdTable')"></a>
1389
+ @click.prevent="openSettingsSidebar('CmdTable')"></a>
2057
1390
  </h2>
2058
1391
  <h3>Table as wide as its content (with caption)</h3>
2059
- <CmdTable
2060
- ref="CmdTable"
2061
- v-bind="cmdTableSettingsData"
2062
- :table-data="tableDataLarge"
2063
- />
1392
+ <CmdTable ref="CmdTable" v-bind="cmdTableSettingsData" :table-data="tableDataLarge" />
2064
1393
  <h3>Table as wide as possible</h3>
2065
- <CmdTable
2066
- :collapsible="true"
2067
- :fullWidthOnDefault="false"
2068
- :userCanToggleWidth="true"
2069
- :table-data="tableDataLarge"
2070
- />
1394
+ <CmdTable :collapsible="true" :fullWidthOnDefault="false" :userCanToggleWidth="true"
1395
+ :table-data="tableDataLarge" />
2071
1396
  </CmdWidthLimitationWrapper>
2072
1397
  <!-- end tables --------------------------------------------------------------------------------------------------->
2073
1398
 
@@ -2076,12 +1401,9 @@
2076
1401
  <h2 class="headline-demopage" id="section-tabs">
2077
1402
  <span>Tabs</span>
2078
1403
  <a href="#" class="button small icon-cog" title="Open Component Settings"
2079
- @click.prevent="openSettingsSidebar('CmdTabs')"></a>
1404
+ @click.prevent="openSettingsSidebar('CmdTabs')"></a>
2080
1405
  </h2>
2081
- <CmdTabs
2082
- ref="CmdTabs"
2083
- v-bind="cmdTabsSettingsData"
2084
- :tabs="tabsData">
1406
+ <CmdTabs ref="CmdTabs" v-bind="cmdTabsSettingsData" :tabs="tabsData">
2085
1407
  <template v-slot:tab-content-0>
2086
1408
  <h4>Tab 1 headline</h4>
2087
1409
  <p>Slot-Content Tab 1</p>
@@ -2103,49 +1425,43 @@
2103
1425
  <h2 class="headline-demopage" id="section-text-image-block">
2104
1426
  <span>Text-Image-Block</span>
2105
1427
  <a href="#" class="button small icon-cog" title="Open Component Settings"
2106
- @click.prevent="openSettingsSidebar('CmdTextImageBlock')"></a>
1428
+ @click.prevent="openSettingsSidebar('CmdTextImageBlock')"></a>
2107
1429
  </h2>
2108
1430
  <div class="flex-container">
2109
1431
  <CmdTextImageBlock
2110
- :cmdHeadline="{headlineText: 'Text-Image-Block (with html-text)', headlineLevel: 3}"
2111
- htmlContent="<p>This text is given as html-text and show below an optional image.</p>"
2112
- />
2113
- <CmdTextImageBlock
2114
- ref="CmdTextImageBlock"
2115
- v-bind="cmdTextImageBlockSettingsData"
2116
- :cmdHeadline="{headlineText: 'Text-Image-Block (with image and plain text)', headlineLevel: 3}"
1432
+ :cmdHeadline="{ headlineText: 'Text-Image-Block (with html-text)', headlineLevel: 3 }"
1433
+ htmlContent="<p>This text is given as html-text and show below an optional image.</p>" />
1434
+ <CmdTextImageBlock ref="CmdTextImageBlock" v-bind="cmdTextImageBlockSettingsData"
1435
+ :cmdHeadline="{ headlineText: 'Text-Image-Block (with image and plain text)', headlineLevel: 3 }"
2117
1436
  :cmdImage='{
2118
- "image": {
2119
- "src": "/media/images/demo-images/large/landscape-01.jpg",
2120
- "alt": "alternative text",
2121
- "tooltip": "tooltip"
2122
- },
2123
- "figcaption": {
2124
- "text": "figcaption",
2125
- "position": "bottom",
2126
- "textAlign": "center",
2127
- "show": true
2128
- }
2129
- }'
2130
- htmlContent="This text is given as plain text and show below an optional image."
2131
- />
1437
+ "image": {
1438
+ "src": "/media/images/demo-images/large/landscape-01.jpg",
1439
+ "alt": "alternative text",
1440
+ "tooltip": "tooltip"
1441
+ },
1442
+ "figcaption": {
1443
+ "text": "figcaption",
1444
+ "position": "bottom",
1445
+ "textAlign": "center",
1446
+ "show": true
1447
+ }
1448
+ }' htmlContent="This text is given as plain text and show below an optional image." />
2132
1449
  <CmdTextImageBlock
2133
- :cmdHeadline="{headlineText: 'Text-Image-Block (with image and html-text)', headlineLevel: 3}"
1450
+ :cmdHeadline="{ headlineText: 'Text-Image-Block (with image and html-text)', headlineLevel: 3 }"
2134
1451
  htmlContent="<p>This text is given as html-text and show below an optional image.</p>"
2135
1452
  :cmdImage='{
2136
- "image": {
2137
- "src": "/media/images/demo-images/large/landscape-02.jpg",
2138
- "alt": "alternative text",
2139
- "tooltip": "tooltip"
2140
- },
2141
- "figcaption": {
2142
- "text": "figcaption",
2143
- "position": "bottom",
2144
- "textAlign": "center",
2145
- "show": true
2146
- }
2147
- }'
2148
- />
1453
+ "image": {
1454
+ "src": "/media/images/demo-images/large/landscape-02.jpg",
1455
+ "alt": "alternative text",
1456
+ "tooltip": "tooltip"
1457
+ },
1458
+ "figcaption": {
1459
+ "text": "figcaption",
1460
+ "position": "bottom",
1461
+ "textAlign": "center",
1462
+ "show": true
1463
+ }
1464
+ }' />
2149
1465
  </div>
2150
1466
  </CmdWidthLimitationWrapper>
2151
1467
  <!-- end text-image-block --------------------------------------------------------------------------------------------------->
@@ -2155,18 +1471,15 @@
2155
1471
  <h2 class="headline-demopage" id="section-thumbnail-scroller">
2156
1472
  <span>Thumbnail-Scroller</span>
2157
1473
  <a href="#" class="button small icon-cog" title="Open Component Settings"
2158
- @click.prevent="openSettingsSidebar('CmdThumbnailScroller')"></a>
1474
+ @click.prevent="openSettingsSidebar('CmdThumbnailScroller')"></a>
2159
1475
  </h2>
2160
1476
  <p> date (YMD/default): {{ formatDate('2025-01-28', "", "-") }}</p>
2161
1477
  <p> date (DMY): {{ formatDate('2025-01-28', "dmy") }}</p>
2162
1478
  <p> date (MDY): {{ formatDate('2025-01-28', "mdy", "/") }}</p>
2163
1479
  <p> date (invalid)): {{ formatDate('invalid') }}</p>
2164
1480
  <div class="inline-size">
2165
- <CmdThumbnailScroller
2166
- ref="CmdThumbnailScroller"
2167
- v-bind="cmdThumbnailScrollerSettingsData"
2168
- :thumbnailScrollerItems="thumbnailScrollerData"
2169
- />
1481
+ <CmdThumbnailScroller ref="CmdThumbnailScroller" v-bind="cmdThumbnailScrollerSettingsData"
1482
+ :thumbnailScrollerItems="thumbnailScrollerData" />
2170
1483
  </div>
2171
1484
  </CmdWidthLimitationWrapper>
2172
1485
  <!-- end thumbnail-scroller --------------------------------------------------------------------------------------------------->
@@ -2176,12 +1489,9 @@
2176
1489
  <h2 class="headline-demopage" id="section-toggle-dark-mode">
2177
1490
  <span>Toggle Dark-Mode</span>
2178
1491
  <a href="#" class="button small icon-cog" title="Open Component Settings"
2179
- @click.prevent="openSettingsSidebar('CmdToggleDarkMode')"></a>
1492
+ @click.prevent="openSettingsSidebar('CmdToggleDarkMode')"></a>
2180
1493
  </h2>
2181
- <CmdToggleDarkMode
2182
- ref="CmdToggleDarkMode"
2183
- v-bind="cmdToggleDarkModeSettingsData"
2184
- />
1494
+ <CmdToggleDarkMode ref="CmdToggleDarkMode" v-bind="cmdToggleDarkModeSettingsData" />
2185
1495
  </CmdWidthLimitationWrapper>
2186
1496
  <!-- end toggle-darkmode --------------------------------------------------------------------------------------------------->
2187
1497
 
@@ -2190,31 +1500,20 @@
2190
1500
  <h2 class="headline-demopage" id="section-tooltip">
2191
1501
  <span>Tooltip</span>
2192
1502
  <a href="#" class="button small icon-cog" title="Open Component Settings"
2193
- @click.prevent="openSettingsSidebar('CmdTooltip')"></a>
1503
+ @click.prevent="openSettingsSidebar('CmdTooltip')"></a>
2194
1504
  </h2>
2195
1505
  <p>
2196
- <a href="#" @click.prevent id="show-on-hover">Show tooltip on hover!</a><br/>
2197
- <a href="#" @click.prevent id="show-with-delay">Show tooltip on hover with delay!</a><br/>
1506
+ <a href="#" @click.prevent id="show-on-hover">Show tooltip on hover!</a><br />
1507
+ <a href="#" @click.prevent id="show-with-delay">Show tooltip on hover with delay!</a><br />
2198
1508
  <a href="#" @click.prevent id="show-on-click" title="Native tooltip">Show tooltip on click!</a>
2199
1509
  </p>
2200
- <CmdTooltip
2201
- ref="CmdTooltip"
2202
- related-id="show-on-hover"
2203
- v-bind="cmdTooltipSettingsData"
2204
- >
1510
+ <CmdTooltip ref="CmdTooltip" related-id="show-on-hover" v-bind="cmdTooltipSettingsData">
2205
1511
  Tooltip on hover
2206
1512
  </CmdTooltip>
2207
- <CmdTooltip
2208
- :delay-to-show-tooltip="2000"
2209
- related-id="show-with-delay"
2210
- >
1513
+ <CmdTooltip :delay-to-show-tooltip="2000" related-id="show-with-delay">
2211
1514
  Tooltip on hover with delay
2212
1515
  </CmdTooltip>
2213
- <CmdTooltip
2214
- related-id="show-on-click"
2215
- :toggle-visibility-by-click="true"
2216
- :allowEscapeKey="true"
2217
- >
1516
+ <CmdTooltip related-id="show-on-click" :toggle-visibility-by-click="true" :allowEscapeKey="true">
2218
1517
  Tooltip on click
2219
1518
  </CmdTooltip>
2220
1519
  </CmdWidthLimitationWrapper>
@@ -2225,12 +1524,9 @@
2225
1524
  <h2 class="headline-demopage" id="section-upload-form">
2226
1525
  <span>Upload-Form</span>
2227
1526
  <a href="#" class="button small icon-cog" title="Open Component Settings"
2228
- @click.prevent="openSettingsSidebar('CmdUploadForm')"></a>
1527
+ @click.prevent="openSettingsSidebar('CmdUploadForm')"></a>
2229
1528
  </h2>
2230
- <CmdUploadForm
2231
- ref="CmdUploadForm"
2232
- v-bind="cmdUploadFormSettingsData"
2233
- />
1529
+ <CmdUploadForm ref="CmdUploadForm" v-bind="cmdUploadFormSettingsData" />
2234
1530
  </CmdWidthLimitationWrapper>
2235
1531
  <!-- end upload-form --------------------------------------------------------------------------------------------------->
2236
1532
 
@@ -2239,13 +1535,10 @@
2239
1535
  <h2 class="headline-demopage" id="section-width-limitation-wrapper">
2240
1536
  <span>Width Limitation Wrapper</span>
2241
1537
  <a href="#" class="button small icon-cog" title="Open Component Settings"
2242
- @click.prevent="openSettingsSidebar('CmdWidthLimitationWrapper')"></a>
1538
+ @click.prevent="openSettingsSidebar('CmdWidthLimitationWrapper')"></a>
2243
1539
  </h2>
2244
- <CmdWidthLimitationWrapper
2245
- style="border: 1px dotted gray"
2246
- ref="CmdWidthLimitationWrapper"
2247
- v-bind="cmdWidthLimitationWrapperSettingsData"
2248
- >
1540
+ <CmdWidthLimitationWrapper style="border: 1px dotted gray" ref="CmdWidthLimitationWrapper"
1541
+ v-bind="cmdWidthLimitationWrapperSettingsData">
2249
1542
  <p>Slot-content</p>
2250
1543
  <p>Slot-content</p>
2251
1544
  <p>Slot-content</p>
@@ -2260,7 +1553,7 @@
2260
1553
  <h1 class="headline-demopage">Page Overview</h1>
2261
1554
  </CmdWidthLimitationWrapper>
2262
1555
  <!-- begin page-overview -->
2263
- <PageOverview/>
1556
+ <PageOverview />
2264
1557
  <!-- end page-overview -->
2265
1558
  </main>
2266
1559
  <!-- end page view -->
@@ -2274,46 +1567,29 @@
2274
1567
  <!-- end cmd-site-footer -->
2275
1568
 
2276
1569
  <!-- begin copyright-information --------------------------------------------------------------------------------------------------->
2277
- <CmdCopyrightInformation/>
1570
+ <CmdCopyrightInformation />
2278
1571
  <!-- end copyright-information --------------------------------------------------------------------------------------------------->
2279
1572
 
2280
1573
  <!-- begin fancy-box --------------------------------------------------------------------------------------------------->
2281
- <CmdFancyBox
2282
- :show="fancyBoxCookieDisclaimer"
2283
- :fancyBoxOptions="{ 'closeIcon': {show: false}}"
2284
- :allowEscapeKey="false"
2285
- :cmdHeadline="{show: true, headlineText: 'Cookie Disclaimer', headlineLevel: 2}"
2286
- defaultAriaLabelText="Cookie Disclaimer"
2287
- >
1574
+ <CmdFancyBox :show="fancyBoxCookieDisclaimer" :fancyBoxOptions="{ 'closeIcon': { show: false } }"
1575
+ :allowEscapeKey="false" :cmdHeadline="{ show: true, headlineText: 'Cookie Disclaimer', headlineLevel: 2 }"
1576
+ defaultAriaLabelText="Cookie Disclaimer">
2288
1577
  <!-- begin cookie-disclaimer --------------------------------------------------------------------------------------------------->
2289
- <CmdCookieDisclaimer
2290
- :cookieOptions="cookieDisclaimerData"
2291
- @closeCookieDisclaimer="closeCookieDisclaimer"
2292
- v-model="acceptedCookies"
2293
- :cmdHeadlineCookieDisclaimer="{ show: false }"
2294
- privacyText="By browsing this website you accept the usage and saving of anonymous data!"
2295
- >
1578
+ <CmdCookieDisclaimer :cookieOptions="cookieDisclaimerData" @closeCookieDisclaimer="closeCookieDisclaimer"
1579
+ v-model="acceptedCookies" :cmdHeadlineCookieDisclaimer="{ show: false }"
1580
+ privacyText="By browsing this website you accept the usage and saving of anonymous data!">
2296
1581
  </CmdCookieDisclaimer>
2297
1582
  <!-- end cookie-disclaimer --------------------------------------------------------------------------------------------------->
2298
1583
  </CmdFancyBox>
2299
1584
  <!-- end fancy-box --------------------------------------------------------------------------------------------------->
2300
1585
 
2301
1586
  <!-- begin component-settings-sidebar --------------------------------------------------------------------------------------------------->
2302
- <CmdSidebar
2303
- v-if="showSettingsSidebar"
2304
- id="component-settings"
2305
- :cmdHeadline="{headlineText: 'Component Settings', headlineLevel: 3, textAlign: 'center'}"
2306
- :openSidebar="openRightSidebar"
2307
- @toggle-sidebar="setOpenStatusRightSidebar"
2308
- :collapseToLeft="false"
2309
- >
1587
+ <CmdSidebar v-if="showSettingsSidebar" id="component-settings"
1588
+ :cmdHeadline="{ headlineText: 'Component Settings', headlineLevel: 3, textAlign: 'center' }"
1589
+ :openSidebar="openRightSidebar" @toggle-sidebar="setOpenStatusRightSidebar" :collapseToLeft="false">
2310
1590
  <template #open>
2311
- <ComponentSettings
2312
- :componentName="componentName"
2313
- :componentProps="componentProps"
2314
- :componentSettings="componentSettings"
2315
- :componentControls="componentControls"
2316
- />
1591
+ <ComponentSettings :componentName="componentName" :componentProps="componentProps"
1592
+ :componentSettings="componentSettings" :componentControls="componentControls" />
2317
1593
  </template>
2318
1594
  </CmdSidebar>
2319
1595
  <!-- end component-settings-sidebar --------------------------------------------------------------------------------------------------->
@@ -2366,10 +1642,10 @@ import listOfComponents from "@/assets/data/listOfComponents.json"
2366
1642
  import PageOverview from "@/pages/PageOverview.vue"
2367
1643
 
2368
1644
  // import external functions
2369
- import {formatDate} from "@/utils/date.js"
1645
+ import { formatDate } from "@/utils/date.js"
2370
1646
  import * as functions from "@/mixins/FieldValidation.js"
2371
- import {openFancyBox} from "@/components/CmdFancyBox.vue"
2372
- import {localizedTime} from "./components/CmdOpeningHours.vue"
1647
+ import { openFancyBox } from "@/components/CmdFancyBox.vue"
1648
+ import { localizedTime } from "./components/CmdOpeningHours.vue"
2373
1649
 
2374
1650
  // import data and controls for settings
2375
1651
  import componentSettingsDataAndControls from "@/componentSettingsDataAndControls.vue"
@@ -2675,7 +1951,7 @@ export default {
2675
1951
  return (h, m) => (localizedTime(language))(h, m).toLowerCase()
2676
1952
  },
2677
1953
  idForReplacedInputsInInputGroup(prefix) {
2678
- return inputGroupRadiobuttonsData.map(item => ({...item, id: prefix + item.id, name: prefix + item.name}))
1954
+ return inputGroupRadiobuttonsData.map(item => ({ ...item, id: prefix + item.id, name: prefix + item.name }))
2679
1955
  },
2680
1956
  closeCookieDisclaimer(event) {
2681
1957
  this.fancyBoxCookieDisclaimer = false
@@ -2808,31 +2084,31 @@ export default {
2808
2084
 
2809
2085
  if (this.selectedTemplate === "blank") {
2810
2086
  this.companyLogoData =
2811
- {
2812
- "link": {
2813
- "type": "href",
2814
- "path": "./",
2815
- "tooltip": "Tooltip"
2816
- },
2817
- "pathDefaultLogo": "/media/images/logos/logo.svg",
2818
- "pathDarkmodeLogo": "/media/images/logos/logo-darkmode.svg",
2819
- "altText": "Company Logo"
2820
- }
2087
+ {
2088
+ "link": {
2089
+ "type": "href",
2090
+ "path": "./",
2091
+ "tooltip": "Tooltip"
2092
+ },
2093
+ "pathDefaultLogo": "/media/images/logos/logo.svg",
2094
+ "pathDarkmodeLogo": "/media/images/logos/logo-darkmode.svg",
2095
+ "altText": "Company Logo"
2096
+ }
2821
2097
  }
2822
2098
 
2823
2099
  // change logo
2824
2100
  if (this.selectedTemplate === "dating") {
2825
2101
  this.companyLogoData =
2826
- {
2827
- "link": {
2828
- "type": "href",
2829
- "path": "./",
2830
- "tooltip": "Tooltip"
2831
- },
2832
- "pathDefaultLogo": "/media/images/logos/logo-dating.svg",
2833
- "pathDarkmodeLogo": "/media/images/logos/logo-dating-darkmode.svg",
2834
- "altText": "Company Logo"
2835
- }
2102
+ {
2103
+ "link": {
2104
+ "type": "href",
2105
+ "path": "./",
2106
+ "tooltip": "Tooltip"
2107
+ },
2108
+ "pathDefaultLogo": "/media/images/logos/logo-dating.svg",
2109
+ "pathDarkmodeLogo": "/media/images/logos/logo-dating-darkmode.svg",
2110
+ "altText": "Company Logo"
2111
+ }
2836
2112
 
2837
2113
  }
2838
2114
  }
@@ -2874,7 +2150,9 @@ export default {
2874
2150
  border-color: var(--color-white);
2875
2151
  align-self: center;
2876
2152
 
2877
- &:hover, &:active, &:focus {
2153
+ &:hover,
2154
+ &:active,
2155
+ &:focus {
2878
2156
  background: var(--color-white);
2879
2157
  color: var(--primary-color) !important;
2880
2158
  }