comand-component-library 4.0.2 → 4.0.3

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 (50) hide show
  1. package/README.md +32 -32
  2. package/dist/comand-component-library.js +3264 -1450
  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 +17 -4
  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 +1 -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
  }