comand-component-library 4.0.1 → 4.0.3

Sign up to get free protection for your applications and to get access to all the features.
Files changed (50) hide show
  1. package/README.md +32 -32
  2. package/dist/comand-component-library.js +3227 -1413
  3. package/dist/comand-component-library.umd.cjs +3 -4
  4. package/dist/index.html +16 -16
  5. package/dist/style.css +1 -1
  6. package/dist/styles/demopage-only.css +4 -0
  7. package/dist/styles/templates/casual.css +3 -0
  8. package/package.json +4 -4
  9. package/src/App.vue +2117 -0
  10. package/src/ComponentLibrary.vue +150 -586
  11. package/src/assets/data/fake-select-options.json +3 -2
  12. package/src/assets/data/form-elements.json +1 -1
  13. package/src/assets/styles/global-styles.scss +14 -10
  14. package/src/componentSettingsDataAndControls.vue +705 -0
  15. package/src/components/CmdAddressData.vue +1 -2
  16. package/src/components/CmdBox.vue +60 -42
  17. package/src/components/CmdCopyrightInformation.vue +5 -3
  18. package/src/components/CmdFakeSelect.vue +138 -67
  19. package/src/components/CmdFancyBox.vue +2 -2
  20. package/src/components/CmdFormElement.vue +53 -27
  21. package/src/components/CmdGoogleMaps.vue +5 -0
  22. package/src/components/CmdHeadline.vue +13 -5
  23. package/src/components/CmdIcon.vue +6 -2
  24. package/src/components/CmdImage.vue +6 -1
  25. package/src/components/CmdImageGallery.vue +15 -4
  26. package/src/components/CmdInputGroup.vue +76 -24
  27. package/src/components/CmdListOfLinks.vue +20 -7
  28. package/src/components/CmdListOfRequirements.vue +10 -18
  29. package/src/components/CmdLoginForm.vue +14 -2
  30. package/src/components/CmdMainNavigation.vue +5 -1
  31. package/src/components/CmdMultistepFormProgressBar.vue +12 -7
  32. package/src/components/CmdOpeningHoursItem.vue +1 -3
  33. package/src/components/CmdPagination.vue +5 -1
  34. package/src/components/CmdSiteFooter.vue +11 -1
  35. package/src/components/CmdSiteHeader.vue +2 -0
  36. package/src/components/CmdSlideButton.vue +7 -1
  37. package/src/components/CmdSlideshow.vue +33 -5
  38. package/src/components/CmdSocialNetworks.vue +18 -13
  39. package/src/components/CmdSocialNetworksItem.vue +5 -1
  40. package/src/components/CmdSystemMessage.vue +7 -1
  41. package/src/components/CmdTabs.vue +5 -5
  42. package/src/components/CmdTextImageBlock.vue +11 -2
  43. package/src/components/CmdThumbnailScroller.vue +22 -4
  44. package/src/components/CmdTooltip.vue +49 -14
  45. package/src/components/CmdTooltipForFormElements.vue +96 -0
  46. package/src/components/CmdUploadForm.vue +25 -20
  47. package/src/components/CmdWidthLimitationWrapper.vue +1 -1
  48. package/src/components/ComponentSettings.vue +1 -1
  49. package/src/main.js +1 -1
  50. package/src/assets/data/accordion.json +0 -45
package/src/ComponentLibrary.vue CHANGED
@@ -6,7 +6,7 @@
6
6
  <a id="anchor-back-to-top"></a>
7
7
  <CmdSidebar
8
8
  :cmdHeadline="{headlineText: 'Site Settings', headlineLevel: 3, textAlign: 'center'}"
9
- :openSidebar="openSidebar"
9
+ :openSidebar="openLeftSidebar"
10
10
  @toggle-sidebar="setOpenStatusLeftSidebar"
11
11
  >
12
12
  <template #open>
@@ -29,7 +29,7 @@
29
29
  <label for="select-template">
30
30
  <span>Select template</span>
31
31
  <select id="select-template" v-model="selectedTemplate">
32
- <option value="blank">Blank</option>
32
+ <option value="blank">Blank/Unstyled</option>
33
33
  <option value="business">Business</option>
34
34
  <option value="casual">Casual</option>
35
35
  <option value="dating">Dating</option>
@@ -47,83 +47,42 @@
47
47
  >
48
48
  <template v-slot:body>
49
49
  <ul>
50
- <li><a href="#section-address-data"
51
- @click="updateSettingsSidebar('CmdAddressData')">Address Data</a></li>
50
+ <li :class="'active' ? activeEntry === 'CmdAddressData' : null"><a href="#section-address-data" @click="updateSettingsSidebar('CmdAddressData')">Address Data</a></li>
52
51
  <li><a href="#section-advanced-form-elements">Advanced Form Elements</a></li>
53
- <li><a href="#section-bank-account-data"
54
- @click="updateSettingsSidebar('CmdBankAccountData')">Bank Account
55
- Data</a></li>
56
- <li><a href="#section-boxes" @click="updateSettingsSidebar('CmdBox')">Boxes</a>
57
- </li>
58
- <li><a href="#section-breadcrumbs"
59
- @click="updateSettingsSidebar('CmdBreadcrumbs')">Breadcrumbs</a></li>
60
- <li><a href="#section-cookie-disclaimer" @click="hideSettingsSidebar">Cookie-Disclaimer</a>
61
- </li>
52
+ <li><a href="#section-bank-account-data" @click="updateSettingsSidebar('CmdBankAccountData')">Bank Account Data</a></li>
53
+ <li><a href="#section-boxes" @click="updateSettingsSidebar('CmdBox')">Boxes</a></li>
54
+ <li><a href="#section-breadcrumbs" @click="updateSettingsSidebar('CmdBreadcrumbs')">Breadcrumbs</a></li>
55
+ <li><a href="#section-cookie-disclaimer" @click="hideSettingsSidebar">Cookie-Disclaimer</a></li>
62
56
  <li><a href="#section-fancybox" @click="hideSettingsSidebar">Fancybox</a></li>
63
57
  <li><a href="#section-forms" @click="hideSettingsSidebar">Forms</a></li>
64
- <li><a href="#section-google-maps" @click="hideSettingsSidebar">Google-Maps&trade;</a>
65
- </li>
66
- <li><a href="#section-headlines" @click="updateSettingsSidebar('CmdHeadline')">Headlines</a>
67
- </li>
58
+ <li><a href="#section-google-maps" @click="hideSettingsSidebar">Google-Maps&trade;</a></li>
59
+ <li><a href="#section-headlines" @click="updateSettingsSidebar('CmdHeadline')">Headlines</a></li>
68
60
  <li><a href="#section-icons" @click="hideSettingsSidebar">Icons</a></li>
69
- <li><a href="#section-input-group"
70
- @click="updateSettingsSidebar('CmdInputGroup')">Input-Group</a></li>
61
+ <li><a href="#section-input-group" @click="updateSettingsSidebar('CmdInputGroup')">Input-Group</a></li>
71
62
  <li><a href="#section-image" @click="hideSettingsSidebar">Image</a></li>
72
- <li><a href="#section-image-gallery" @click="hideSettingsSidebar">Image
73
- Gallery</a></li>
74
- <li><a href="#section-image-zoom" @click="hideSettingsSidebar">Image-Zoom</a>
75
- </li>
76
- <li><a href="#section-list-of-links"
77
- @click="updateSettingsSidebar('CmdLinkOfLists')">List Of Links</a></li>
78
- <li><a href="#section-login-form"
79
- @click="updateSettingsSidebar('CmdLoginForm')">Login Form</a></li>
80
- <li><a href="#section-main-navigation"
81
- @click="updateSettingsSidebar('CmdMainNavigation')">Main-Navigation</a>
82
- </li>
83
- <li><a href="#section-multistep-form-progress-bar"
84
- @click="updateSettingsSidebar('CmdMultistepFormProgressBar')">Multistepform-Progressbar</a>
85
- </li>
86
- <li><a href="#section-newsletter-subscription"
87
- @click="updateSettingsSidebar('CmdNewsletterSubscription')">Newsletter
88
- Subscription</a></li>
89
- <li><a href="#section-opening-hours"
90
- @click="updateSettingsSidebar('CmdOpeningHours')">Opening Hours</a></li>
91
- <li><a href="#section-pagination"
92
- @click="updateSettingsSidebar('CmdPagination')">Pagination</a></li>
93
- <li><a href="#section-site-footer" @click="hideSettingsSidebar">Site Footer</a>
94
- </li>
95
- <li><a href="#section-site-header"
96
- @click="updateSettingsSidebar('CmdSiteHeader')">Site Header</a></li>
97
- <li><a href="#section-site-search"
98
- @click="updateSettingsSidebar('CmdSiteSearch')">Site Search</a></li>
99
- <li><a href="#section-slideshow" @click="updateSettingsSidebar('CmdSlideshow')">Slideshow</a>
100
- </li>
101
- <li><a href="#section-social-networks"
102
- @click="updateSettingsSidebar('CmdSocialNetworks')">Social Networks</a>
103
- </li>
104
- <li><a href="#section-switch-language" @click="hideSettingsSidebar">Switch
105
- Language</a></li>
106
- <li><a href="#section-system-message"
107
- @click="updateSettingsSidebar('CmdSystemMessage')">System-Message</a>
108
- </li>
109
- <li><a href="#section-tables"
110
- @click="updateSettingsSidebar('CmdSystemMeCmdTablesssage')">Tables</a>
111
- </li>
112
- <li><a href="#section-tabs" @click="updateSettingsSidebar('CmdTabs')">Tabs</a>
113
- </li>
114
- <li><a href="#section-text-image-block"
115
- @click="updateSettingsSidebar('CmdTextImageBlock')">Text Image Block</a>
116
- </li>
117
- <li><a href="#section-thumbnail-scroller"
118
- @click="updateSettingsSidebar('CmdThumbnailScroller')">Thumbnail-Scroller</a>
119
- </li>
120
- <li><a href="#section-toggle-darkmode"
121
- @click="updateSettingsSidebar('CmdToggleDarkMode')">ToggleDarkMode</a>
122
- </li>
123
- <li><a href="#section-tooltip" @click="updateSettingsSidebar('CmdTooltip')">Tooltip</a>
124
- </li>
125
- <li><a href="#section-upload-form"
126
- @click="updateSettingsSidebar('CmdUploadForm')">Upload-Form</a></li>
63
+ <li><a href="#section-image-gallery" @click="hideSettingsSidebar">Image Gallery</a></li>
64
+ <li><a href="#section-image-zoom" @click="hideSettingsSidebar">Image-Zoom</a></li>
65
+ <li><a href="#section-list-of-links" @click="updateSettingsSidebar('CmdLinkOfLists')">List Of Links</a></li>
66
+ <li><a href="#section-login-form" @click="updateSettingsSidebar('CmdLoginForm')">Login Form</a></li>
67
+ <li><a href="#section-main-navigation" @click="updateSettingsSidebar('CmdMainNavigation')">Main-Navigation</a></li>
68
+ <li><a href="#section-multistep-form-progress-bar" @click="updateSettingsSidebar('CmdMultistepFormProgressBar')">Multistepform-Progressbar</a></li>
69
+ <li><a href="#section-newsletter-subscription" @click="updateSettingsSidebar('CmdNewsletterSubscription')">Newsletter Subscription</a></li>
70
+ <li><a href="#section-opening-hours" @click="updateSettingsSidebar('CmdOpeningHours')">Opening Hours</a></li>
71
+ <li><a href="#section-pagination" @click="updateSettingsSidebar('CmdPagination')">Pagination</a></li>
72
+ <li><a href="#section-site-footer" @click="hideSettingsSidebar">Site Footer</a></li>
73
+ <li><a href="#section-site-header" @click="updateSettingsSidebar('CmdSiteHeader')">Site Header</a></li>
74
+ <li><a href="#section-site-search" @click="updateSettingsSidebar('CmdSiteSearch')">Site Search</a></li>
75
+ <li><a href="#section-slideshow" @click="updateSettingsSidebar('CmdSlideshow')">Slideshow</a></li>
76
+ <li><a href="#section-social-networks" @click="updateSettingsSidebar('CmdSocialNetworks')">Social Networks</a></li>
77
+ <li><a href="#section-switch-language" @click="hideSettingsSidebar">Switch Language</a></li>
78
+ <li><a href="#section-system-message" @click="updateSettingsSidebar('CmdSystemMessage')">System-Message</a></li>
79
+ <li><a href="#section-tables" @click="updateSettingsSidebar('CmdSystemMeCmdTablesssage')">Tables</a></li>
80
+ <li><a href="#section-tabs" @click="updateSettingsSidebar('CmdTabs')">Tabs</a></li>
81
+ <li><a href="#section-text-image-block" @click="updateSettingsSidebar('CmdTextImageBlock')">Text Image Block</a></li>
82
+ <li><a href="#section-thumbnail-scroller" @click="updateSettingsSidebar('CmdThumbnailScroller')">Thumbnail-Scroller</a></li>
83
+ <li><a href="#section-toggle-darkmode" @click="updateSettingsSidebar('CmdToggleDarkMode')">ToggleDarkMode</a></li>
84
+ <li><a href="#section-tooltip" @click="updateSettingsSidebar('CmdTooltip')">Tooltip</a></li>
85
+ <li><a href="#section-upload-form" @click="updateSettingsSidebar('CmdUploadForm')">Upload-Form</a></li>
127
86
  </ul>
128
87
  </template>
129
88
  </CmdBox>
@@ -242,59 +201,51 @@
242
201
  <CmdForm :use-fieldset="false" id="advanced-form-elements" novalidate="novalidate">
243
202
  <fieldset class="grid-container-create-columns">
244
203
  <legend>Legend</legend>
245
- <h2>Form Element-Component</h2>
204
+ <h2 class="headline-demopage">Form Element-Component
205
+ <a href="#" class="icon-cog" title="Open Component Settings"
206
+ @click.prevent="openSettingsSidebar('CmdFormElement')"></a>
207
+ </h2>
208
+ <CmdFormElement
209
+ ref="CmdFormElement"
210
+ v-bind="cmdFormElementSettingsData"
211
+ :status="validationStatus"
212
+ :disabled="disabledStatus"
213
+ />
246
214
  <div class="flex-container">
247
215
  <CmdFormElement
248
- labelText="Input (type text):"
216
+ labelText="Input for datalist:"
249
217
  element="input"
250
218
  type="text"
251
219
  :status="validationStatus"
252
220
  :disabled="disabledStatus"
253
- placeholder="Type in text"
221
+ placeholder="Type in option"
222
+ :datalist="datalist"
254
223
  tooltipText="This is a tooltip"
255
- v-bind="{useCustomTooltip: false}"
256
224
  />
225
+ </div>
226
+ <div class="flex-container">
257
227
  <CmdFormElement
258
- labelText="Input for selectbox:"
259
- element="select"
260
- required="required"
228
+ labelText="Input (type search (without search-button)):"
229
+ element="input"
230
+ type="search"
261
231
  :status="validationStatus"
262
232
  :disabled="disabledStatus"
263
- v-model="selectedOption"
264
- :selectOptions="selectOptionsData"
233
+ :showSearchButton="false"
234
+ placeholder="Search"
235
+ tooltipText="This is a tooltip"
236
+ v-bind="{useCustomTooltip: false}"
265
237
  />
266
238
  <CmdFormElement
267
- labelText="Input for datalist:"
239
+ labelText="Input (type search (with search-button)):"
268
240
  element="input"
269
- type="text"
241
+ type="search"
270
242
  :status="validationStatus"
271
243
  :disabled="disabledStatus"
272
- placeholder="Type in option"
273
- :datalist="datalist"
244
+ placeholder="Search"
274
245
  tooltipText="This is a tooltip"
246
+ v-bind="{useCustomTooltip: false}"
275
247
  />
276
248
  </div>
277
- <CmdFormElement
278
- labelText="Input (type search (without search-button)):"
279
- element="input"
280
- type="search"
281
- :status="validationStatus"
282
- :disabled="disabledStatus"
283
- :showSearchButton="false"
284
- placeholder="Search"
285
- tooltipText="This is a tooltip"
286
- v-bind="{useCustomTooltip: false}"
287
- />
288
- <CmdFormElement
289
- labelText="Input (type search (with search-button)):"
290
- element="input"
291
- type="search"
292
- :status="validationStatus"
293
- :disabled="disabledStatus"
294
- placeholder="Search"
295
- tooltipText="This is a tooltip"
296
- v-bind="{useCustomTooltip: false}"
297
- />
298
249
  <h2>Inputfields in Columns</h2>
299
250
  <div class="flex-container">
300
251
  <CmdFormElement
@@ -444,27 +395,20 @@
444
395
  :disabled="disabledStatus"
445
396
  />
446
397
  <hr/>
447
- <h2>Fake Selects</h2>
398
+ <!-- begin FakeSelect -->
399
+ <h2 class="headline-demopage">
400
+ Fake Selects
401
+ <a href="#" class="icon-cog" title="Open Component Settings" @click.prevent="openSettingsSidebar('CmdFakeSelect')"></a>
402
+ </h2>
448
403
  <div class="flex-container">
449
404
  <!-- type === default: normal selectbox (with optional icons) -->
450
405
  <CmdFakeSelect
451
- labelText="Default selectbox:"
452
- :status="validationStatus"
453
- :disabled="disabledStatus"
406
+ ref="CmdFakeSelect"
407
+ v-bind="cmdFakeSelectSettingsData"
454
408
  :selectData="fakeSelectOptionsData"
455
409
  v-model="fakeSelectDefault"
456
- :required="true"
457
- defaultOptionName="Select an option:"
458
- title="Title for FakeSelect"
459
- />
460
- <CmdFakeSelect
461
- labelText="Default selectbox with icons:"
462
- :status="validationStatus"
463
- :disabled="disabledStatus"
464
- :selectData="fakeSelectOptionsWithIconsData"
465
- v-model="fakeSelectDefaultWithIcons"
466
- defaultOptionName="Select an option:"
467
- />
410
+ >
411
+ </CmdFakeSelect>
468
412
  <!-- type === checkboxOptions: selectbox with checkboxes for each option -->
469
413
  <CmdFakeSelect
470
414
  labelText="Selectbox with checkboxes:"
@@ -489,24 +433,6 @@
489
433
  type="checkboxOptions"
490
434
  :useCustomTooltip="true"
491
435
  />
492
- <CmdFakeSelect
493
- labelText="Selectbox with slot-content:"
494
- :status="validationStatus"
495
- :disabled="disabledStatus"
496
- type="content"
497
- defaultOptionName="HTML-Content:">
498
- <ul class="custom-fake-select-content">
499
- <li>
500
- <div>
501
- <h3>Headline</h3>
502
- <p>Some content inside a paragraph</p>
503
- </div>
504
- <img
505
- src="media/images/thumbnail-scroller/thumbnail/logo-cmd-blue-landscape.jpg"
506
- alt="image"/>
507
- </li>
508
- </ul>
509
- </CmdFakeSelect>
510
436
  <CmdFakeSelect
511
437
  labelText="Selectbox with country flags:"
512
438
  :status="validationStatus"
@@ -526,7 +452,7 @@
526
452
  type="color"
527
453
  />
528
454
  </div>
529
-
455
+ <!-- emd FakeSelect -->
530
456
  <hr/>
531
457
 
532
458
  <!-- begin progress bar -->
@@ -678,7 +604,8 @@
678
604
  checkboxes with values: {{ checkboxValues }}
679
605
  </p>
680
606
 
681
- <h3 id="section-toggle-darkmode">
607
+ <!-- begin cmd-toggle-darkmode -->
608
+ <h3 class="headline-demopage" id="section-toggle-darkmode">
682
609
  Toggle Dark-Mode
683
610
  <a href="#" class="icon-cog" title="Open Component Settings"
684
611
  @click.prevent="openSettingsSidebar('CmdToggleDarkMode')"></a>
@@ -687,6 +614,7 @@
687
614
  ref="CmdToggleDarkMode"
688
615
  v-bind="cmdToggleDarkModeSettingsData"
689
616
  />
617
+ <!-- end cmd-toggle-darkmode -->
690
618
 
691
619
  <h2>Checkboxes and Radiobuttons</h2>
692
620
  <h3>Checkboxes [native]</h3>
@@ -828,7 +756,7 @@
828
756
  <!-- end checkboxes and radiobuttons -->
829
757
 
830
758
  <!-- begin input-groups -->
831
- <h3 id="section-input-group">
759
+ <h3 class="headline-demopage" id="section-input-group">
832
760
  Input-Group
833
761
  <a href="#" class="icon-cog" title="Open Component Settings"
834
762
  @click.prevent="openSettingsSidebar('CmdInputGroup')"></a>
@@ -978,19 +906,39 @@
978
906
  <!-- end bank account data ------------------------------------------------------------------------------------------------------------------------------------------------------->
979
907
 
980
908
  <!-- begin boxes ------------------------------------------------------------------------------------------------------------------------------------------------------->
981
- <CmdWidthLimitationWrapper>
982
- <h2 class="headline-demopage" id="section-boxes">Boxes</h2>
983
- <h3>
909
+ <CmdWidthLimitationWrapper anchorId="section-boxes">
910
+ <h2 class="headline-demopage">Boxes</h2>
911
+ <h3 class="headline-demopage">
984
912
  Default Box
985
- <a href="#" class="icon-cog" title="Open Component Settings"
986
- @click.prevent="openSettingsSidebar('CmdBox')"></a>
913
+ <a href="#" class="icon-cog" title="Open Component Settings" @click.prevent="openSettingsSidebar('CmdBox')"></a>
987
914
  </h3>
988
915
  <CmdBox
989
916
  ref="CmdBox"
990
917
  v-bind="cmdBoxSettingsData"
991
918
  textBody="Content"
919
+ :useSlots="['body', 'footer']"
992
920
  :cmd-headline="{headlineText: 'Headline for box', headlineLevel: 4}"
993
- />
921
+ >
922
+ <template v-slot:header>
923
+ <h4>
924
+ Texts given by slots
925
+ </h4>
926
+ </template>
927
+ <template v-slot:body>
928
+ <p>
929
+ This content with paragraphs inside is placed inside the box-body.
930
+ </p>
931
+ <p>
932
+ <strong>Header, Content/Body and Footer of this box are given by slots.</strong>
933
+ </p>
934
+ <p>Additionally 'allowContentToScroll' is active, which enables (as far as a max-height is defined) the content of this box to scroll</p>
935
+ </template>
936
+ <template v-slot:footer>
937
+ <p>
938
+ Footer content
939
+ </p>
940
+ </template>
941
+ </CmdBox>
994
942
  <CmdBoxWrapper
995
943
  :useFlexbox="true"
996
944
  :cmdHeadline="{headlineText: 'Boxes in BoxWrapper with flexbox', headlineLevel: 3}"
@@ -1072,7 +1020,7 @@
1072
1020
  </h4>
1073
1021
  </template>
1074
1022
  <template v-slot:body>
1075
- <img src="media/images/content-images/landscape-medium.jpg" alt="Alternative text"/>
1023
+ <img src="/media/images/content-images/landscape-medium.jpg" alt="Alternative text"/>
1076
1024
  </template>
1077
1025
  </CmdBox>
1078
1026
  <CmdBox :useSlots="['header', 'body', 'footer']" :use-default-padding="false">
@@ -1082,7 +1030,7 @@
1082
1030
  </h4>
1083
1031
  </template>
1084
1032
  <template v-slot:body>
1085
- <img src="media/images/content-images/landscape-medium.jpg" alt="Alternative text"/>
1033
+ <img src="/media/images/content-images/landscape-medium.jpg" alt="Alternative text"/>
1086
1034
  <div class="default-padding">
1087
1035
  <h4>Headline</h4>
1088
1036
  <p>This is some text information i.e a short-text for a news teaser.</p>
@@ -1213,31 +1161,31 @@
1213
1161
  with text</a>
1214
1162
  <h3>FancyBox with large image given by url</h3>
1215
1163
  <a href="#"
1216
- @click.prevent="showFancyBox('url', 'media/images/demo-images/large/landscape-01.jpg', 'FancyBox with large image given by url')"
1164
+ @click.prevent="showFancyBox('url', '/media/images/demo-images/large/landscape-01.jpg', 'FancyBox with large image given by url')"
1217
1165
  title="Open FancyBox with large image given by url"
1218
1166
  style="display: inline-flex;"
1219
1167
  >
1220
- <img src="media/images/demo-images/small/landscape-01.jpg" alt="Alternative text"/>
1168
+ <img src="/media/images/demo-images/small/landscape-01.jpg" alt="Alternative text"/>
1221
1169
  </a>
1222
1170
  <h3>FancyBox with large image given by property</h3>
1223
1171
  <a href="#"
1224
- @click.prevent="showFancyBox('image', {large:'media/images/demo-images/large/landscape-02.jpg'}, 'FancyBox with large image given by property')"
1172
+ @click.prevent="showFancyBox('image', {large:'/media/images/demo-images/large/landscape-02.jpg'}, 'FancyBox with large image given by property')"
1225
1173
  title="Open FancyBox with large image given by property"
1226
1174
  style="display: inline-flex;"
1227
1175
  >
1228
- <img src="media/images/demo-images/small/landscape-02.jpg" alt="Alternative text"/>
1176
+ <img src="/media/images/demo-images/small/landscape-02.jpg" alt="Alternative text"/>
1229
1177
  </a>
1230
1178
  <h3>FancyBox with image as object give by property</h3>
1231
1179
  <a href="#"
1232
1180
  @click.prevent="showFancyBox('image', {
1233
- small: 'media/images/demo-images/medium/landscape-03.jpg',
1234
- medium: 'media/images/demo-images/medium/landscape-03.jpg',
1235
- large: 'media/images/demo-images/large/landscape-03.jpg'
1181
+ small: '/media/images/demo-images/medium/landscape-03.jpg',
1182
+ medium: '/media/images/demo-images/medium/landscape-03.jpg',
1183
+ large: '/media/images/demo-images/large/landscape-03.jpg'
1236
1184
  }, 'FancyBox with large image given by property')"
1237
1185
  title="Open FancyBox with large image given by property"
1238
1186
  style="display: inline-flex;"
1239
1187
  >
1240
- <img src="media/images/demo-images/small/landscape-03.jpg" alt="Alternative text"/>
1188
+ <img src="/media/images/demo-images/small/landscape-03.jpg" alt="Alternative text"/>
1241
1189
  </a>
1242
1190
 
1243
1191
  </CmdWidthLimitationWrapper>
@@ -1474,7 +1422,6 @@
1474
1422
  <CmdSiteHeader
1475
1423
  ref="CmdSiteHeader"
1476
1424
  v-bind="cmdSiteHeaderSettingsData"
1477
- :cmdMainNavigation="navigationData"
1478
1425
  :cmdCompanyLogo="companyLogoData"
1479
1426
  >
1480
1427
  <template v-slot:topheader>
@@ -1627,7 +1574,7 @@
1627
1574
  <CmdTextImageBlock
1628
1575
  ref="CmdTextImageBlock"
1629
1576
  v-bind="cmdTextImageBlockSettingsData"
1630
- :cmdHeadline="{headlineText: 'Text-Image-Block with image', headlineLevel: 3}"
1577
+ :cmdHeadline="{headlineText: 'Text-Image-Block (with image and plain text)', headlineLevel: 3}"
1631
1578
  :cmdImage='{
1632
1579
  "image": {
1633
1580
  "src": "/media/images/demo-images/large/landscape-01.jpg",
@@ -1641,11 +1588,24 @@
1641
1588
  "show": true
1642
1589
  }
1643
1590
  }'
1644
- htmlContent="Text given as text only"
1591
+ htmlContent="This text is given as plain text and show below an optional image."
1645
1592
  />
1646
1593
  <CmdTextImageBlock
1647
- :cmdHeadline="{headlineText: 'Headline', headlineLevel: 3}"
1648
- htmlContent="<p>Text given as html-content</p>"
1594
+ :cmdHeadline="{headlineText: 'Text-Image-Block (with image and html-text)', headlineLevel: 3}"
1595
+ htmlContent="<p>This text is given as html-text and show below an optional image.</p>"
1596
+ :cmdImage='{
1597
+ "image": {
1598
+ "src": "/media/images/demo-images/large/landscape-02.jpg",
1599
+ "alt": "alternative text",
1600
+ "tooltip": "tooltip"
1601
+ },
1602
+ "figcaption": {
1603
+ "text": "figcaption",
1604
+ "position": "bottom",
1605
+ "textAlign": "center",
1606
+ "show": true
1607
+ }
1608
+ }'
1649
1609
  />
1650
1610
  </div>
1651
1611
  </CmdWidthLimitationWrapper>
@@ -1690,7 +1650,7 @@
1690
1650
  <CmdTooltip :delay-to-show-tooltip="2000" related-id="show-with-delay">
1691
1651
  Tooltip on hover with delay
1692
1652
  </CmdTooltip>
1693
- <CmdTooltip related-id="show-on-click" :toggle-visibility-by-click="true">
1653
+ <CmdTooltip related-id="show-on-click" :toggle-visibility-by-click="true" :allowEscapeKey="true">
1694
1654
  Tooltip on click
1695
1655
  </CmdTooltip>
1696
1656
  </CmdWidthLimitationWrapper>
@@ -1711,6 +1671,13 @@
1711
1671
  <!-- end upload-form ------------------------------------------------------------------------------------------------------------------------------------------------------->
1712
1672
  </main>
1713
1673
 
1674
+ <CmdSiteFooter>
1675
+ <!-- begin parent-component -->
1676
+ Footer
1677
+ <!-- end parent-component -->
1678
+ </CmdSiteFooter>
1679
+ <!-- end cmd-site-footer -->
1680
+
1714
1681
  <!-- begin copyright-information ------------------------------------------------------------------------------------------------------------------------------------------------------->
1715
1682
  <CmdCopyrightInformation/>
1716
1683
  <!-- end copyright-information ------------------------------------------------------------------------------------------------------------------------------------------------------->
@@ -1742,6 +1709,8 @@
1742
1709
  <!-- end cookie-disclaimer ------------------------------------------------------------------------------------------------------------------------------------------------------->
1743
1710
  </CmdFancyBox>
1744
1711
  <!-- end fancy-box ------------------------------------------------------------------------------------------------------------------------------------------------------->
1712
+
1713
+ <!-- begin component-settings-sidebar ------------------------------------------------------------------------------------------------------------------------------------------------------->
1745
1714
  <CmdSidebar
1746
1715
  v-if="showSettingsSidebar"
1747
1716
  id="component-settings"
@@ -1759,13 +1728,13 @@
1759
1728
  />
1760
1729
  </template>
1761
1730
  </CmdSidebar>
1731
+ <!-- end component-settings-sidebar ------------------------------------------------------------------------------------------------------------------------------------------------------->
1762
1732
  </div><!-- end #page-wrapper -->
1763
- </div>
1733
+ </div><!-- end #template-id-wrapper -->
1764
1734
  </template>
1765
1735
 
1766
1736
  <script>
1767
1737
  // import used example data
1768
- import accordionData from '@/assets/data/accordion.json'
1769
1738
  import addressData from '@/assets/data/address-data.json'
1770
1739
  import bankAccountData from '@/assets/data/bank-account-data.json'
1771
1740
  import boxUserData from '@/assets/data/box-user.json'
@@ -1777,7 +1746,6 @@ import fakeSelectColorsData from '@/assets/data/fake-select-colors.json'
1777
1746
  import fakeSelectCountriesData from '@/assets/data/fake-select-countries.json'
1778
1747
  import fakeSelectFilterOptionsData from '@/assets/data/fake-select-filter-options.json'
1779
1748
  import fakeSelectOptionsData from '@/assets/data/fake-select-options.json'
1780
- import fakeSelectOptionsWithIconsData from '@/assets/data/fake-select-options-with-icons.json'
1781
1749
  import formElementsData from '@/assets/data/form-elements.json'
1782
1750
  import imageData from '@/assets/data/image.json'
1783
1751
  import imageGalleryData from '@/assets/data/image-gallery.json'
@@ -1804,422 +1772,16 @@ import {openFancyBox} from "@/components/CmdFancyBox.vue"
1804
1772
 
1805
1773
  // import external functions
1806
1774
  import * as functions from "@/mixins/FieldValidation.js"
1775
+ import componentSettingsDataAndControls from "@/componentSettingsDataAndControls.vue"
1807
1776
 
1808
1777
  import {localizedTime} from "./components/CmdOpeningHours.vue"
1809
1778
 
1810
1779
  export default {
1811
1780
  name: "App",
1781
+ mixins: [componentSettingsDataAndControls],
1812
1782
  data() {
1813
1783
  return {
1814
- cmdAddressDataSettingsData: {
1815
- useSlot: false,
1816
- showLabelIcons: true,
1817
- showLabelTexts: false,
1818
- showIconsOnly: false,
1819
- showLabels: true
1820
- },
1821
- cmdBankAccountDataSettingsData: {
1822
- allowCopyByClick: false,
1823
- additionalInformation: ""
1824
- },
1825
- cmdBreadcrumbsSettingsData: {
1826
- breadcrumbLabel: "You are here",
1827
- breadcrumbSeparator: ">"
1828
- },
1829
- cmdBoxSettingsData: {
1830
- openCollapsedBox: false,
1831
- rowView: false,
1832
- boxType: "content",
1833
- collapsible: false,
1834
- cutoffTextLines: 0,
1835
- useDefaultPadding: true,
1836
- repeatHeadlineInBoxBody: false,
1837
- fadeLastLine: true,
1838
- useTransition: false,
1839
- boxBodyClass: "",
1840
- profileType: "business",
1841
- textBody: "",
1842
- stretchHorizontally: true,
1843
- stretchVertically: true
1844
- },
1845
- cmdBoxSettingsControls: {
1846
- "boxType": [
1847
- {
1848
- text: "Content (default)",
1849
- value: "content"
1850
- },
1851
- {
1852
- text: "Product",
1853
- value: "product"
1854
- },
1855
- {
1856
- text: "User",
1857
- value: "user"
1858
- }
1859
- ]
1860
- },
1861
- cmdHeadlineSettingsData: {
1862
- preHeadlineText: "Pre-headline text",
1863
- headlineText: "Headline text",
1864
- headlineLevel: 1,
1865
- textAlign: "left"
1866
- },
1867
- cmdHeadlineSettingsControls: {
1868
- "textAlign": [
1869
- {
1870
- text: "Left (default)",
1871
- value: "left"
1872
- },
1873
- {
1874
- text: "Center",
1875
- value: "center"
1876
- },
1877
- {
1878
- text: "Right",
1879
- value: "right"
1880
- }
1881
- ]
1882
- },
1883
- cmdInputGroupSettingsData: {
1884
- required: false,
1885
- inputTypes: "radio",
1886
- status: "",
1887
- replaceInputType: false,
1888
- toggleSwitch: false,
1889
- useSlot: false,
1890
- multipleSwitch: false,
1891
- showLabel: true,
1892
- labelText: "Group label for input-group:",
1893
- labelInline: false,
1894
- stretchHorizontally: false,
1895
- disabled: false
1896
- },
1897
- cmdInputGroupSettingsControls: {
1898
- "inputTypes": [
1899
- {
1900
- text: "Checkbox (default)",
1901
- value: "checkbox"
1902
- },
1903
- {
1904
- text: "Radio",
1905
- value: "radio"
1906
- }
1907
- ]
1908
- },
1909
- cmdImageSettingsData: {},
1910
- cmdImageGallerySettingsData: {
1911
- useFancyboxForLargeImages: true,
1912
- figcaptionPosition: "bottom"
1913
- },
1914
- cmdImageGallerySettingsControls: {
1915
- figcaptionPosition: [
1916
- {
1917
- text: "Top",
1918
- value: "top"
1919
- },
1920
- {
1921
- text: "Bottom (default)",
1922
- value: "bottom"
1923
- }
1924
- ]
1925
- },
1926
- cmdListOfLinksSettingsData: {
1927
- useGap: true,
1928
- styleAsBox: false,
1929
- largeIcons: false,
1930
- sectionAnchors: false,
1931
- orientation: "vertical",
1932
- align: "left"
1933
- },
1934
- cmdListOfLinksSettingsControls: {
1935
- align: [
1936
- {
1937
- text: "Left (default)",
1938
- value: "left"
1939
- },
1940
- {
1941
- text: "Center",
1942
- value: "center"
1943
- },
1944
- {
1945
- text: "Right",
1946
- value: "right"
1947
- },
1948
-
1949
- ],
1950
- orientation: [
1951
- {
1952
- text: "Vertical (default)",
1953
- value: "vertical"
1954
- },
1955
- {
1956
- text: "Horizontal",
1957
- value: "horizontal"
1958
- }
1959
- ]
1960
- },
1961
- cmdLoginFormSettingsData: {
1962
- textLegendLoginForm: "Login form",
1963
- showLegend: true,
1964
- textLegendForgotLoginForm: "Forgot login form"
1965
- },
1966
- cmdMainNavigationSettingsData: {
1967
- offcanvasPosition: "right",
1968
- stretchMainItems: false,
1969
- persistOnMobile: false,
1970
- subentriesIconClass: "icon-single-arrow-down",
1971
- subSubentriesIconClass: "icon-single-arrow-right"
1972
- },
1973
- cmdMultistepFormProgressBarSettingsData: {
1974
- showStepNumber: false,
1975
- separatorIconClass: "icon-single-arrow-right"
1976
- },
1977
- cmdMultistepFormProgressBarSettingsControls: {
1978
- separatorIconClass: [
1979
- {
1980
- text: "icon-single-arrow-right (default)",
1981
- value: "icon-single-arrow-right"
1982
- },
1983
- {
1984
- text: "icon-double-arrow-right",
1985
- value: "icon-double-arrow-right"
1986
- }
1987
- ]
1988
- },
1989
- cmdNewsletterSubscriptionSettingsData: {
1990
- buttonType: "submit",
1991
- showLegend: true,
1992
- textLegend: "Stay up-to-date"
1993
- },
1994
- cmdNewsletterSubscriptionSettingsControls: {
1995
- buttonType: [
1996
- {
1997
- text: "Button (default)",
1998
- value: "button"
1999
- },
2000
- {
2001
- text: "Submit",
2002
- value: "submit"
2003
- }
2004
- ]
2005
- },
2006
- cmdOpeningHoursSettingsData: {
2007
- closed: true,
2008
- separator: "-",
2009
- textOpen: "Open right now!",
2010
- textClosed: "Closed right now!",
2011
- textHolidays: "",
2012
- textMiscInfo: "",
2013
- abbreviationTextAm: "am",
2014
- abbreviationTextPm: "pm",
2015
- componentHandlesClosedStatus: false,
2016
- cmdHeadline: {
2017
- headlineText: "Opening Hours",
2018
- headlineLevel: 3
2019
- }
2020
- },
2021
- cmdPaginationSettingsData: {
2022
- pages: 3,
2023
- itemsPerPage: 1,
2024
- showPageNumbers: true,
2025
- linkType: "button"
2026
- },
2027
- cmdPaginationSettingsControls: {
2028
- linkType: [
2029
- {
2030
- text: "Href (default)",
2031
- value: "href"
2032
- },
2033
- {
2034
- text: "Button",
2035
- value: "button"
2036
- }
2037
- ]
2038
- },
2039
- cmdSiteHeaderSettingsData: {
2040
- sticky: false,
2041
- navigationInline: false,
2042
- useGrid: true
2043
- },
2044
- cmdSiteSearchSettingsData: {
2045
- useFilters: true,
2046
- textLegend: "Search",
2047
- showLegend: true
2048
- },
2049
- cmdSlideshowSettingsData: {
2050
- useSlot: false,
2051
- autoplay: false,
2052
- autoplayInterval: 5000,
2053
- showQuickLinkIcons: true,
2054
- showCounter: true
2055
- },
2056
- cmdSocialNetworksSettingsData: {
2057
- align: "left",
2058
- useGap: true,
2059
- stretchButtons: false,
2060
- userMustAcceptDataPrivacy: true,
2061
- tooltipAcceptDataPrivacy: "You must accept data privacy conditions!",
2062
- buttonTextAlign: "left"
2063
- },
2064
- cmdSocialNetworksSettingsControls: {
2065
- align: [
2066
- {
2067
- text: "Left (default)",
2068
- value: "left"
2069
- },
2070
- {
2071
- text: "Center",
2072
- value: "center"
2073
- },
2074
- {
2075
- text: "Right",
2076
- value: "right"
2077
- }
2078
- ]
2079
- },
2080
- cmdSystemMessageSettingsData: {
2081
- validationStatus: "error",
2082
- fullWidth: true,
2083
- systemMessage: "This is an error message!",
2084
- messageHeadlineLevel: 4
2085
- },
2086
- cmdSystemMessageSettingsControls: {
2087
- validationStatus: [
2088
- {
2089
- text: "Error",
2090
- value: "error"
2091
- },
2092
- {
2093
- text: "Warning",
2094
- value: "warning"
2095
- },
2096
- {
2097
- text: "Success",
2098
- value: "success"
2099
- },
2100
- {
2101
- text: "Info",
2102
- value: "info"
2103
- }
2104
- ]
2105
- },
2106
- cmdTableSettingsData: {
2107
- collapsible: false,
2108
- fullWidthOnDefault: false,
2109
- userCanToggleWidth: true,
2110
- showSlideButtons: true
2111
- },
2112
- cmdTabsSettingsData: {
2113
- stretchTabs: false,
2114
- useSlot: false,
2115
- activeTab: 0
2116
- },
2117
- cmdTextImageBlockSettingsData: {
2118
- htmlContent: "Text given as html-content",
2119
- paragraphTextAlign: "left",
2120
- headlinePosition: "aboveImage"
2121
- },
2122
- cmdTextImageBlockSettingsControls: {
2123
- paragraphTextAlign: [
2124
- {
2125
- text: "Left (default)",
2126
- value: "left"
2127
- },
2128
- {
2129
- text: "Center",
2130
- value: "center"
2131
- },
2132
- {
2133
- text: "Right",
2134
- value: "right"
2135
- }
2136
- ],
2137
- headlinePosition: [
2138
- {
2139
- text: "Above Image (default)",
2140
- value: "aboveImage"
2141
- },
2142
- {
2143
- text: "Below Image",
2144
- value: "belowImage"
2145
- }
2146
- ]
2147
- },
2148
- cmdThumbnailScrollerSettingsData: {
2149
- orientation: "horizontal",
2150
- fullWidth: false,
2151
- largeIcons: false,
2152
- contentType: "image",
2153
- executeOnClick: "fancyBox",
2154
- allowOpenFancyBox: true,
2155
- activeItemIndex: 0,
2156
- useGalleryScroller: false
2157
- },
2158
- cmdThumbnailScrollerSettingsControls: {
2159
- orientation: [
2160
- {
2161
- text: "Horizontal (default)",
2162
- value: "horizontal"
2163
- },
2164
- {
2165
- text: "Vertical",
2166
- value: "vertical"
2167
- }
2168
- ],
2169
- contentType: [
2170
- {
2171
- text: "Image (default)",
2172
- value: "image"
2173
- },
2174
- {
2175
- text: "Text",
2176
- value: "text"
2177
- }
2178
- ],
2179
- executeOnClick: [
2180
- {
2181
- text: "Fancybox (default)",
2182
- value: "fancybox"
2183
- },
2184
- {
2185
- text: "URL",
2186
- value: "url"
2187
- },
2188
- {
2189
- text: "Emit",
2190
- value: "emit"
2191
- }
2192
- ]
2193
- },
2194
- cmdToggleDarkModeSettingsData: {
2195
- styledAsButton: false,
2196
- showLabel: true,
2197
- useStyledLayout: false,
2198
- labelTextDarkMode: "Dark-mode enabled",
2199
- labelTextLightMode: "Light-mode enabled"
2200
- },
2201
- cmdTooltipSettingsData: {
2202
- tooltipText: "This is a tooltip!",
2203
- delayToShowTooltip: 0,
2204
- status: "",
2205
- toggleVisibilityByClick: false
2206
- },
2207
- cmdUploadFormSettingsData: {
2208
- showTotalUpload: true,
2209
- componentHandlesUpload: true,
2210
- commentRequired: true,
2211
- commentStatusMessage: "",
2212
- enableDragAndDrop: false,
2213
- enableComment: true,
2214
- presetComment: "",
2215
- maxTotalUploadSize: 5242880,
2216
- maxFileUploadSize: 10485760,
2217
- allowMultipleFileUploads: false,
2218
- advancedMode: true,
2219
- showLegend: true,
2220
- textLegend: "Advanced upload form",
2221
- allowedFileExtensions: ["jpg", "eps"]
2222
- },
1784
+ activeEntry: "CmdAddressData",
2223
1785
  componentControls: {},
2224
1786
  selectedTemplate: "blank",
2225
1787
  acceptedCookies: ["google-maps"],
@@ -2310,8 +1872,7 @@ export default {
2310
1872
  radiobuttonValue: "radiobuttonValue1",
2311
1873
  replacedRadiobuttonValue: "radiobuttonValue1",
2312
1874
  fancyBoxCookieDisclaimer: false,
2313
- fakeSelectDefault: 3,
2314
- fakeSelectDefaultWithIcons: 1,
1875
+ fakeSelectDefault: "",
2315
1876
  fakeSelectCheckbox: [1],
2316
1877
  fakeSelectFilters: [],
2317
1878
  datalist: {
@@ -2331,10 +1892,9 @@ export default {
2331
1892
  ],
2332
1893
  openLeftSidebar: true,
2333
1894
  openRightSidebar: false,
2334
- openBoxes: [0],
1895
+ openBoxes: [1],
2335
1896
 
2336
1897
  // assign data from json files to data-properties
2337
- accordionData,
2338
1898
  addressData,
2339
1899
  bankAccountData,
2340
1900
  boxProductData,
@@ -2346,7 +1906,6 @@ export default {
2346
1906
  fakeSelectCountriesData,
2347
1907
  fakeSelectFilterOptionsData,
2348
1908
  fakeSelectOptionsData,
2349
- fakeSelectOptionsWithIconsData,
2350
1909
  formElementsData,
2351
1910
  listOfLinksData,
2352
1911
  imageData,
@@ -2380,7 +1939,12 @@ export default {
2380
1939
  }
2381
1940
  },
2382
1941
  methods: {
1942
+ setActiveEntry(ComponentName) {
1943
+ this.activeEntry = ComponentName
1944
+ },
2383
1945
  updateSettingsSidebar(ComponentName) {
1946
+ this.setActiveEntry(ComponentName)
1947
+
2384
1948
  if (this.openRightSidebar) {
2385
1949
  this.openSettingsSidebar(ComponentName)
2386
1950
  }
@@ -2429,7 +1993,7 @@ export default {
2429
1993
  return (h, m) => (localizedTime(language))(h, m).toLowerCase()
2430
1994
  },
2431
1995
  idForReplacedInputsInInputGroup(prefix) {
2432
- return inputGroupRadiobuttonsData.map(item => ({...item, id: prefix + item.id}))
1996
+ return inputGroupRadiobuttonsData.map(item => ({...item, id: prefix + item.id, name: prefix + item.name}))
2433
1997
  },
2434
1998
  closeCookieDisclaimer(event) {
2435
1999
  this.fancyBoxCookieDisclaimer = false
@@ -2550,7 +2114,7 @@ export default {
2550
2114
  <style>
2551
2115
  .list-status {
2552
2116
  .active {
2553
- color: var(--text-color);
2117
+ color: var(--default-text-color);
2554
2118
  text-decoration: none;
2555
2119
  background: none;
2556
2120
  }