comand-component-library 3.1.43 → 3.1.46

Sign up to get free protection for your applications and to get access to all the features.
Files changed (236) hide show
  1. package/dist/comand-component-library.css +1 -1
  2. package/dist/comand-component-library.umd.min.js +1 -1
  3. package/package.json +47 -40
  4. package/src/App.vue +379 -136
  5. package/src/ComponentDocumentation.vue +156 -0
  6. package/src/ComponentLibraryHelp.vue +20 -0
  7. package/src/assets/data/accordion.json +21 -24
  8. package/src/assets/data/address-data.json +34 -0
  9. package/src/assets/data/bank-account-data.json +22 -0
  10. package/src/assets/data/box-product.json +14 -4
  11. package/src/assets/data/box-user.json +48 -22
  12. package/src/assets/data/breadcrumbs.json +11 -3
  13. package/src/assets/data/cookie-disclaimer.json +4 -4
  14. package/src/assets/data/fake-select-colors.json +4 -0
  15. package/src/assets/data/fake-select-countries.json +12 -12
  16. package/src/assets/data/fake-select-filter-options.json +14 -0
  17. package/src/assets/data/fake-select-options-with-icons.json +6 -12
  18. package/src/assets/data/fake-select-options.json +3 -3
  19. package/src/assets/data/list-of-links-section-anchors.json +23 -0
  20. package/src/assets/data/list-of-links-top-header-navigation.json +20 -0
  21. package/src/assets/data/list-of-links.json +42 -0
  22. package/src/assets/data/main-navigation.json +48 -0
  23. package/src/assets/data/multistep-form-progress-bar.json +33 -0
  24. package/src/assets/data/select-options.json +4 -0
  25. package/src/assets/data/{share-buttons.json → share-buttons-page-by-json.json} +8 -8
  26. package/src/assets/data/share-buttons-page-by-property.json +30 -0
  27. package/src/assets/data/switch-language.json +20 -0
  28. package/src/assets/data/table-large.json +1 -1
  29. package/src/assets/data/table-small.json +1 -1
  30. package/src/assets/styles/global-styles.scss +43 -14
  31. package/src/assets/styles/transitions.scss +21 -1
  32. package/src/components/CmdAccordion.vue +43 -42
  33. package/src/components/CmdAddressData.vue +124 -56
  34. package/src/components/CmdBackToTopButton.vue +3 -3
  35. package/src/components/CmdBankAccountData.vue +104 -0
  36. package/src/components/CmdBox.vue +253 -56
  37. package/src/components/CmdBoxSiteSearch.vue +138 -39
  38. package/src/components/CmdBoxWrapper.vue +206 -0
  39. package/src/components/CmdBreadcrumbs.vue +29 -13
  40. package/src/components/CmdCompanyLogo.vue +6 -4
  41. package/src/components/CmdCookieDisclaimer.vue +99 -75
  42. package/src/components/CmdCopyrightInformation.vue +1 -1
  43. package/src/components/CmdCustomHeadline.vue +93 -0
  44. package/src/components/CmdFakeSelect.vue +330 -66
  45. package/src/components/CmdFancyBox.vue +47 -33
  46. package/src/components/CmdForm.vue +107 -0
  47. package/src/components/CmdFormElement.vue +528 -83
  48. package/src/components/CmdFormFilters.vue +25 -11
  49. package/src/components/CmdGoogleMaps.vue +9 -3
  50. package/src/components/CmdImageGallery.vue +28 -5
  51. package/src/components/CmdImageZoom.vue +9 -1
  52. package/src/components/CmdListOfLinks.vue +169 -0
  53. package/src/components/CmdLoginForm.vue +146 -66
  54. package/src/components/CmdMainNavigation.vue +140 -42
  55. package/src/components/CmdMultipleSwitch.vue +33 -2
  56. package/src/components/CmdMultistepFormProgressBar.vue +60 -10
  57. package/src/components/CmdOpeningHours.vue +36 -10
  58. package/src/components/CmdPager.vue +7 -5
  59. package/src/components/CmdProgressBar.vue +21 -4
  60. package/src/components/CmdShareButtons.vue +64 -9
  61. package/src/components/CmdSiteHeader.vue +25 -12
  62. package/src/components/CmdSlideButton.vue +5 -2
  63. package/src/components/CmdSlideshow.vue +23 -7
  64. package/src/components/CmdSwitchButton.vue +15 -6
  65. package/src/components/CmdSwitchLanguage.vue +18 -10
  66. package/src/components/CmdSystemMessage.vue +30 -17
  67. package/src/components/CmdTable.vue +15 -7
  68. package/src/components/CmdTabs.vue +43 -3
  69. package/src/components/CmdThumbnailScroller.vue +22 -6
  70. package/src/components/CmdTooltip.vue +184 -11
  71. package/src/components/CmdUploadForm.vue +830 -176
  72. package/src/components/CmdWidthLimitationWrapper.vue +9 -6
  73. package/src/composables/event.js +8 -0
  74. package/src/composables/scrollspy.js +52 -0
  75. package/src/directives/focus.js +19 -0
  76. package/src/directives/telephone.js +1 -1
  77. package/src/documentation/commonProps.js +6 -0
  78. package/src/documentation/components/ComponentCode.vue +50 -0
  79. package/src/documentation/components/ComponentProperties.vue +237 -0
  80. package/src/documentation/components/ExampleSectionWrapper.vue +46 -0
  81. package/src/documentation/components/ViewCodeData.vue +113 -0
  82. package/src/documentation/data/CmdAccordionHelp.js +22 -0
  83. package/src/documentation/data/CmdAddressDataHelp.js +17 -0
  84. package/src/documentation/data/CmdBackToTopButtonHelp.js +3 -0
  85. package/src/documentation/data/CmdBankAccountDataHelp.js +8 -0
  86. package/src/documentation/data/CmdBoxHelp.js +45 -0
  87. package/src/documentation/data/CmdBoxSiteSearchHelp.js +11 -0
  88. package/src/documentation/data/CmdBreadcrumbsHelp.js +6 -0
  89. package/src/documentation/data/CmdCompanyLogoHelp.js +8 -0
  90. package/src/documentation/data/CmdCookieDisclaimerHelp.js +9 -0
  91. package/src/documentation/data/CmdCopyrightInformation.js +2 -0
  92. package/src/documentation/data/CmdCustomHeadlineHelp.js +8 -0
  93. package/src/documentation/data/CmdFakeSelectHelp.js +60 -0
  94. package/src/documentation/data/CmdFancyBoxHelp.js +7 -0
  95. package/src/documentation/data/CmdFooterNavigationHelp.js +5 -0
  96. package/src/documentation/data/CmdFormElementHelp.js +189 -0
  97. package/src/documentation/data/CmdFormFiltersHelp.js +6 -0
  98. package/src/documentation/data/CmdFormHelp.js +10 -0
  99. package/src/documentation/data/CmdGoogleMapsHelp.js +5 -0
  100. package/src/documentation/data/CmdImageGalleryHelp.js +5 -0
  101. package/src/documentation/data/CmdImageZoomHelp.js +6 -0
  102. package/src/documentation/data/CmdListOfLinksHelp.js +24 -0
  103. package/src/documentation/data/CmdLoginFormHelp.js +6 -0
  104. package/src/documentation/data/CmdMainNavigationHelp.js +7 -0
  105. package/src/documentation/data/CmdMultistepFormProgressBarHelp.js +6 -0
  106. package/src/documentation/data/CmdOpeningHoursHelp.js +10 -0
  107. package/src/documentation/data/CmdPagerHelp.js +7 -0
  108. package/src/documentation/data/CmdProgressBarHelp.js +13 -0
  109. package/src/documentation/data/CmdShareButtonsHelp.js +13 -0
  110. package/src/documentation/data/CmdSiteHeaderHelp.js +21 -0
  111. package/src/documentation/data/CmdSlideButtonHelp.js +10 -0
  112. package/src/documentation/data/CmdSlideshowHelp.js +7 -0
  113. package/src/documentation/data/CmdSwitchLanguageHelp.js +6 -0
  114. package/src/documentation/data/CmdSystemMessageHelp.js +32 -0
  115. package/src/documentation/data/CmdTableHelp.js +14 -0
  116. package/src/documentation/data/CmdTabsHelp.js +10 -0
  117. package/src/documentation/data/CmdThumbnailScrollerHelp.js +5 -0
  118. package/src/documentation/data/CmdTooltipHelp.js +13 -0
  119. package/src/documentation/data/CmdUploadFormHelp.js +17 -0
  120. package/src/documentation/data/CmdWidthLimitationWrapperHelp.js +7 -0
  121. package/src/documentation/data/componentsDescription.json +158 -0
  122. package/src/documentation/generated/CmdAccordionPropertyDescriptions.json +57 -0
  123. package/src/documentation/generated/CmdAddressDataPropertyDescriptions.json +32 -0
  124. package/src/documentation/generated/CmdBackToTopButtonPropertyDescriptions.json +12 -0
  125. package/src/documentation/generated/CmdBankAccountDataPropertyDescriptions.json +34 -0
  126. package/src/documentation/generated/CmdBoxPropertyDescriptions.json +91 -0
  127. package/src/documentation/generated/CmdBoxSiteSearchPropertyDescriptions.json +41 -0
  128. package/src/documentation/generated/CmdBoxWrapperPropertyDescriptions.json +47 -0
  129. package/src/documentation/generated/CmdBreadcrumbsPropertyDescriptions.json +17 -0
  130. package/src/documentation/generated/CmdCompanyLogoPropertyDescriptions.json +27 -0
  131. package/src/documentation/generated/CmdCookieDisclaimerPropertyDescriptions.json +22 -0
  132. package/src/documentation/generated/CmdCustomHeadlinePropertyDescriptions.json +22 -0
  133. package/src/documentation/generated/CmdFakeSelectPropertyDescriptions.json +79 -0
  134. package/src/documentation/generated/CmdFancyBoxPropertyDescriptions.json +62 -0
  135. package/src/documentation/generated/CmdFooterNavigationPropertyDescriptions.json +17 -0
  136. package/src/documentation/generated/CmdFormElementPropertyDescriptions.json +178 -0
  137. package/src/documentation/generated/CmdFormFiltersPropertyDescriptions.json +32 -0
  138. package/src/documentation/generated/CmdFormPropertyDescriptions.json +40 -0
  139. package/src/documentation/generated/CmdGoogleMapsPropertyDescriptions.json +7 -0
  140. package/src/documentation/generated/CmdImageGalleryPropertyDescriptions.json +22 -0
  141. package/src/documentation/generated/CmdImageZoomPropertyDescriptions.json +12 -0
  142. package/src/documentation/generated/CmdListOfLinksPropertyDescriptions.json +60 -0
  143. package/src/documentation/generated/CmdLoginFormPropertyDescriptions.json +90 -0
  144. package/src/documentation/generated/CmdMainNavigationPropertyDescriptions.json +62 -0
  145. package/src/documentation/generated/CmdMultipleSwitchPropertyDescriptions.json +52 -0
  146. package/src/documentation/generated/CmdMultistepFormProgressBarPropertyDescriptions.json +17 -0
  147. package/src/documentation/generated/CmdOpeningHoursPropertyDescriptions.json +42 -0
  148. package/src/documentation/generated/CmdPagerPropertyDescriptions.json +37 -0
  149. package/src/documentation/generated/CmdProgressBarPropertyDescriptions.json +32 -0
  150. package/src/documentation/generated/CmdShareButtonsPropertyDescriptions.json +34 -0
  151. package/src/documentation/generated/CmdSiteHeaderPropertyDescriptions.json +27 -0
  152. package/src/documentation/generated/CmdSlideButtonPropertyDescriptions.json +25 -0
  153. package/src/documentation/generated/CmdSlideshowPropertyDescriptions.json +42 -0
  154. package/src/documentation/generated/CmdSwitchButtonPropertyDescriptions.json +79 -0
  155. package/src/documentation/generated/CmdSwitchLanguagePropertyDescriptions.json +7 -0
  156. package/src/documentation/generated/CmdSystemMessagePropertyDescriptions.json +40 -0
  157. package/src/documentation/generated/CmdTablePropertyDescriptions.json +62 -0
  158. package/src/documentation/generated/CmdTabsPropertyDescriptions.json +27 -0
  159. package/src/documentation/generated/CmdThumbnailScrollerPropertyDescriptions.json +32 -0
  160. package/src/documentation/generated/CmdTooltipPropertyDescriptions.json +17 -0
  161. package/src/documentation/generated/CmdUploadFormPropertyDescriptions.json +90 -0
  162. package/src/documentation/generated/CmdWidthLimitationWrapperPropertyDescriptions.json +41 -0
  163. package/src/documentation/generated/frameworkIcons.json +730 -0
  164. package/src/documentation/generated/logosIcons.json +110 -0
  165. package/src/documentation/tabs.js +46 -0
  166. package/src/documentation/views/ContainerPage.vue +237 -0
  167. package/src/documentation/views/HelpHome.vue +13 -0
  168. package/src/documentation/views/IconFont.vue +80 -0
  169. package/src/documentation/views/components/CmdAccordionHelp.vue +78 -0
  170. package/src/documentation/views/components/CmdAddressDataHelp.vue +65 -0
  171. package/src/documentation/views/components/CmdBackToTopButtonHelp.vue +62 -0
  172. package/src/documentation/views/components/CmdBankAccountDataHelp.vue +88 -0
  173. package/src/documentation/views/components/CmdBoxHelp.vue +137 -0
  174. package/src/documentation/views/components/CmdBoxSiteSearchHelp.vue +60 -0
  175. package/src/documentation/views/components/CmdBoxWrapperHelp.vue +111 -0
  176. package/src/documentation/views/components/CmdBreadcrumbsHelp.vue +51 -0
  177. package/src/documentation/views/components/CmdCompanyLogoHelp.vue +48 -0
  178. package/src/documentation/views/components/CmdCookieDisclaimerHelp.vue +105 -0
  179. package/src/documentation/views/components/CmdCustomHeadlineHelp.vue +53 -0
  180. package/src/documentation/views/components/CmdFakeSelectHelp.vue +175 -0
  181. package/src/documentation/views/components/CmdFancyBoxHelp.vue +79 -0
  182. package/src/documentation/views/components/CmdFormElementHelp.vue +412 -0
  183. package/src/documentation/views/components/CmdFormFiltersHelp.vue +69 -0
  184. package/src/documentation/views/components/CmdFormHelp.vue +41 -0
  185. package/src/documentation/views/components/CmdGoogleMapsHelp.vue +55 -0
  186. package/src/documentation/views/components/CmdImageGalleryHelp.vue +46 -0
  187. package/src/documentation/views/components/CmdImageZoomHelp.vue +34 -0
  188. package/src/documentation/views/components/CmdListOfLinksHelp.vue +64 -0
  189. package/src/documentation/views/components/CmdLoginFormHelp.vue +117 -0
  190. package/src/documentation/views/components/CmdMainNavigationHelp.vue +94 -0
  191. package/src/documentation/views/components/CmdMultistepFormProgressBarHelp.vue +49 -0
  192. package/src/documentation/views/components/CmdOpeningHoursHelp.vue +49 -0
  193. package/src/documentation/views/components/CmdPagerHelp.vue +57 -0
  194. package/src/documentation/views/components/CmdProgressBarHelp.vue +47 -0
  195. package/src/documentation/views/components/CmdShareButtonsHelp.vue +65 -0
  196. package/src/documentation/views/components/CmdSiteHeaderHelp.vue +72 -0
  197. package/src/documentation/views/components/CmdSlideButtonHelp.vue +90 -0
  198. package/src/documentation/views/components/CmdSlideshowHelp.vue +60 -0
  199. package/src/documentation/views/components/CmdSwitchLanguageHelp.vue +64 -0
  200. package/src/documentation/views/components/CmdSystemMessageHelp.vue +86 -0
  201. package/src/documentation/views/components/CmdTableHelp.vue +84 -0
  202. package/src/documentation/views/components/CmdTabsHelp.vue +52 -0
  203. package/src/documentation/views/components/CmdThumbnailScrollerHelp.vue +50 -0
  204. package/src/documentation/views/components/CmdTooltipHelp.vue +59 -0
  205. package/src/documentation/views/components/CmdUploadFormHelp.vue +59 -0
  206. package/src/documentation/views/components/CmdWidthLimitationWrapperHelp.vue +46 -0
  207. package/src/index.js +6 -3
  208. package/src/main.js +25 -15
  209. package/src/mixins/CmdAddressData/DefaultMessageProperties.js +17 -0
  210. package/src/mixins/CmdBox/DefaultMessageProperties.js +10 -0
  211. package/src/mixins/CmdFakeSelect/DefaultMessageProperties.js +9 -0
  212. package/src/mixins/CmdFormElement/DefaultMessageProperties.js +9 -0
  213. package/src/mixins/CmdImageGallery/DefaultMessageProperties.js +9 -0
  214. package/src/mixins/CmdSiteSearch/DefaultMessageProperties.js +14 -0
  215. package/src/mixins/CmdUploadForm/DefaultMessageProperties.js +53 -0
  216. package/src/mixins/FieldValidation.js +220 -0
  217. package/src/mixins/GlobalDefaultMessageProperties.js +15 -0
  218. package/src/mixins/I18n.js +56 -0
  219. package/src/mixins/Tooltip.js +26 -0
  220. package/src/router/index.js +67 -0
  221. package/src/utilities.js +3 -6
  222. package/src/utils/GetFileExtension.js +15 -0
  223. package/src/utils/common.js +6 -0
  224. package/src/utils/dom.js +8 -0
  225. package/src/utils/globalSequence.js +13 -0
  226. package/src/utils/string.js +8 -0
  227. package/src/assets/data/address.json +0 -13
  228. package/src/assets/data/footer-navigation.json +0 -38
  229. package/src/assets/data/languages.json +0 -31
  230. package/src/assets/data/multisteps.json +0 -27
  231. package/src/assets/data/navigation.json +0 -47
  232. package/src/assets/data/pager.json +0 -11
  233. package/src/assets/data/top-header-navigation.json +0 -27
  234. package/src/components/CmdFooterNavigation.vue +0 -71
  235. package/src/components/CmdMainHeadline.vue +0 -75
  236. package/src/components/CmdTopHeaderNavigation.vue +0 -88
@@ -1,54 +1,142 @@
1
1
  <template>
2
2
  <div
3
- :class="['cmd-main-navigation main-navigation-wrapper', {'hide-sub-navigation' : !showSubNavigations, 'open': showOffcanvas, 'persist-on-mobile': persistOnMobile, 'show-content-overlay': showContentOverlay}]">
3
+ :class="[
4
+ 'cmd-main-navigation main-navigation-wrapper',
5
+ {
6
+ 'hide-sub-navigation' : !showSubNavigations,
7
+ 'open-off-canvas': showOffcanvas,
8
+ 'persist-on-mobile': persistOnMobile,
9
+ 'show-content-overlay': showContentOverlay
10
+ }
11
+ ]">
4
12
  <nav>
13
+ <!-- begin main-level -->
5
14
  <ul :class="{'stretch-items' : stretchMainItems}">
6
15
  <li class="close-nav" v-if="showOffcanvas">
7
16
  <a href="#" @click.prevent="showOffcanvas = false">
8
17
  <span v-if="closeOffcanvas.iconClass" :class="closeOffcanvas.iconClass"></span>
9
- <span :class="{'hidden': closeOffcanvas.hideText}">{{ closeOffcanvas.text }}</span>
18
+ <span :class="{'hidden': !closeOffcanvas.showText}">{{ closeOffcanvas.text }}</span>
10
19
  </a>
11
20
  </li>
12
21
  <li v-for="(navigationEntry, index) in navigationEntries" :key="index"
13
22
  :class="{'open' : navigationEntry.open}">
14
- <a :href="navigationEntry.href" :target="navigationEntry.target"
15
- @click="clickLink($event, navigationEntry)">
16
- <span :class="navigationEntry.iconClass" v-if="navigationEntry.iconClass"></span>
17
- <span>{{ navigationEntry.name }}</span>
23
+ <!-- begin type === href -->
24
+ <a
25
+ v-if="navigationEntry.type === 'href'"
26
+ :href="navigationEntry.path"
27
+ :title="navigationEntry.tooltip"
28
+ :target="navigationEntry.target"
29
+ @click="executeLink($event, navigationEntry)"
30
+ >
31
+ <span v-if="navigationEntry.iconClass" :class="navigationEntry.iconClass"></span>
32
+ <span v-if="navigationEntry.text">{{ navigationEntry.text }}</span>
18
33
  <span v-if="navigationEntry.subentries && navigationEntry.subentries.length > 0"
19
- :class="subentriesIconClass"></span>
34
+ :class="subentriesIconClass"
35
+ ></span>
20
36
  </a>
37
+ <!-- end type === href -->
38
+
39
+ <!-- begin type === router -->
40
+ <router-link
41
+ v-if="navigationEntry.type === 'router'"
42
+ :to="getRoute(navigationEntry)"
43
+ :title="navigationEntry.tooltip"
44
+ :target="navigationEntry.target"
45
+ @click="executeLink($event, navigationEntry)"
46
+ >
47
+ <span v-if="navigationEntry.iconClass" :class="navigationEntry.iconClass"></span>
48
+ <span v-if="navigationEntry.text">{{ navigationEntry.text }}</span>
49
+ <span v-if="navigationEntry.subentries && navigationEntry.subentries.length > 0"
50
+ :class="subentriesIconClass"></span>
51
+ </router-link>
52
+ <!-- end type === router -->
53
+
54
+ <!-- begin sub-level 1 -->
21
55
  <ul v-if="navigationEntry.subentries" aria-expanded="true">
22
56
  <li v-for="(navigationSubEntry, subindex) in navigationEntry.subentries" :key="subindex"
23
57
  :class="{'open' : navigationSubEntry.open}">
24
- <a :href="navigationSubEntry.href" :target="navigationSubEntry.target"
25
- @click="clickLink($event, navigationSubEntry)">
26
- <span>{{ navigationSubEntry.name }}</span>
27
- <span :class="subSubentriesIconClass" v-if="navigationSubEntry.subentries"></span>
58
+ <!-- begin type === href -->
59
+ <a v-if="navigationSubEntry.type === 'href'"
60
+ :href="navigationSubEntry.path"
61
+ :title="navigationSubEntry.tooltip"
62
+ :target="navigationSubEntry.target"
63
+ @click="executeLink($event, navigationSubEntry)">
64
+ <span v-if="navigationSubEntry.iconClass" :class="navigationSubEntry.iconClass"></span>
65
+ <span v-if="navigationSubEntry.text">{{ navigationSubEntry.text }}</span>
66
+ <span v-if="navigationSubEntry.subentries && navigationSubEntry.subentries.length > 0"
67
+ :class="subentriesIconClass"
68
+ ></span>
28
69
  </a>
70
+ <!-- end type === href -->
71
+
72
+ <!-- begin type === router -->
73
+ <router-link v-if="navigationSubEntry.type === 'router'"
74
+ :to="getRoute(navigationSubEntry)"
75
+ :title="navigationSubEntry.tooltip"
76
+ :target="navigationSubEntry.target"
77
+ @click="executeLink($event, navigationSubEntry)">
78
+ <span v-if="navigationSubEntry.iconClass" :class="navigationSubEntry.iconClass"></span>
79
+ <span v-if="navigationSubEntry.text">{{ navigationSubEntry.text }}</span>
80
+ <span v-if="navigationSubEntry.subentries && navigationSubEntry.subentries.length > 0"
81
+ :class="subentriesIconClass"></span>
82
+ </router-link>
83
+ <!-- end type === router -->
84
+
85
+ <!-- begin sub-level 2 -->
29
86
  <ul v-if="navigationSubEntry.subentries">
30
87
  <li v-for="(navigationSubSubEntry, subsubindex) in navigationSubEntry.subentries"
31
88
  :key="subsubindex">
32
- <a :href="navigationSubSubEntry.href" :target="navigationSubSubEntry.target"
33
- @click="clickLink($event, navigationSubSubEntry)">
34
- <span>{{ navigationSubSubEntry.name }}</span>
89
+ <!-- begin type === href -->
90
+ <a v-if="navigationEntry.type === 'href'"
91
+ :href="navigationSubSubEntry.path"
92
+ :title="navigationSubSubEntry.tooltip"
93
+ :target="navigationSubSubEntry.target"
94
+ @click="executeLink($event, navigationSubSubEntry)">
95
+ <span v-if="navigationSubSubEntry.iconClass" :class="navigationSubSubEntry.iconClass"></span>
96
+ <span v-if="navigationSubSubEntry.text">{{ navigationSubSubEntry.text }}</span>
97
+ <span v-if="navigationSubSubEntry.subentries && navigationSubSubEntry.subentries.length > 0"
98
+ :class="subentriesIconClass"
99
+ ></span>
35
100
  </a>
101
+ <!-- end type === href -->
102
+
103
+ <!-- begin type === router -->
104
+ <router-link v-if="navigationEntry.type === 'router'"
105
+ :to="getRoute(navigationSubSubEntry)"
106
+ :target="navigationSubSubEntry.target"
107
+ :title="navigationSubSubEntry.tooltip"
108
+ @click="executeLink($event, navigationSubSubEntry)">
109
+ <span v-if="navigationSubSubEntry.iconClass" :class="navigationSubSubEntry.iconClass"></span>
110
+ <span v-if="navigationSubSubEntry.text">{{ navigationSubSubEntry.text }}</span>
111
+ <span v-if="navigationSubSubEntry.subentries && navigationSubSubEntry.subentries.length > 0"
112
+ :class="subentriesIconClass"></span>
113
+ </router-link>
114
+ <!-- end type === router -->
36
115
  </li>
37
116
  </ul>
117
+ <!-- end sub-level 2 -->
38
118
  </li>
39
119
  </ul>
120
+ <!-- begin sub-level 1 -->
40
121
  </li>
41
122
  </ul>
123
+ <!-- end main-level -->
42
124
  </nav>
125
+
126
+ <!-- begin offCanvasButton -->
43
127
  <a href="#" class="button" id="toggle-offcanvas" @click.prevent="showOffcanvas = !showOffcanvas"
44
128
  v-if="persistOnMobile === false">
45
129
  <span :class="buttonOffcanvas.iconClass"></span>
46
- <span :class="{'hidden' : buttonOffcanvas.hideText}">{{ buttonOffcanvas.text }}</span>
130
+ <span :class="{'hidden' : !buttonOffcanvas.showText}">{{ buttonOffcanvas.text }}</span>
47
131
  </a>
132
+ <!-- end offCanvasButton -->
48
133
  </div>
49
134
  </template>
50
135
 
51
136
  <script>
137
+ // import functions
138
+ import {getRoute} from "../utilities.js"
139
+
52
140
  export default {
53
141
  name: "CmdMainNavigation",
54
142
  data() {
@@ -59,7 +147,7 @@ export default {
59
147
  },
60
148
  props: {
61
149
  /**
62
- * toggle if main-entries (on firt-level) should be (horizontally) stretched equally
150
+ * toggle if main-entries (on first-level) should be (horizontally) stretched equally
63
151
  */
64
152
  stretchMainItems: {
65
153
  type: Boolean,
@@ -67,6 +155,8 @@ export default {
67
155
  },
68
156
  /**
69
157
  * set if navigation should persist on mobile and not be collapsed to off-canvas
158
+ *
159
+ * @affectsStyling: true
70
160
  */
71
161
  persistOnMobile: {
72
162
  type: Boolean,
@@ -81,6 +171,8 @@ export default {
81
171
  },
82
172
  /**
83
173
  * link shown inside off-canvas-navigation to close itself
174
+ *
175
+ * @requiredForAccessibility: partial
84
176
  */
85
177
  closeOffcanvas: {
86
178
  type: Object,
@@ -88,12 +180,14 @@ export default {
88
180
  return {
89
181
  iconClass: "icon-cancel",
90
182
  text: "Close navigation",
91
- hideText: false
183
+ showText: true
92
184
  }
93
185
  }
94
186
  },
95
187
  /**
96
188
  * button to open off-canvas-navigation
189
+ *
190
+ * @requiredForAccessibility: partial
97
191
  */
98
192
  buttonOffcanvas: {
99
193
  type: Object,
@@ -101,7 +195,7 @@ export default {
101
195
  return {
102
196
  iconClass: "icon-bars",
103
197
  text: "Open navigation",
104
- hideText: true
198
+ showText: false
105
199
  }
106
200
  }
107
201
  },
@@ -110,17 +204,19 @@ export default {
110
204
  */
111
205
  subentriesIconClass: {
112
206
  type: String,
113
- default: "icon-single-arrow-down"
207
+ default: "icon-single-arrow-right"
114
208
  },
115
209
  /**
116
210
  * icon to show if a sub-entry has further sub-entries
117
211
  */
118
212
  subSubentriesIconClass: {
119
213
  type: String,
120
- default: "icon-single-arrow-right"
214
+ default: "icon-single-arrow-down"
121
215
  },
122
216
  /**
123
217
  * toggle if overlay over content should be shown if off-canvas is open
218
+ *
219
+ * @affectsStyling: true
124
220
  */
125
221
  showContentOverlay: {
126
222
  type: Boolean,
@@ -128,13 +224,13 @@ export default {
128
224
  }
129
225
  },
130
226
  methods: {
131
- clickLink(event, navigationEntry) {
132
- if (navigationEntry.target || (navigationEntry.href.length > 1)) {
227
+ executeLink(event, navigationEntry) {
228
+ if (navigationEntry.target || (navigationEntry.path.length > 1)) {
133
229
  return true
134
230
  }
135
- if (navigationEntry.href === '#' || navigationEntry.href === '') {
231
+ if (navigationEntry.path === '#' || navigationEntry.path === '') {
136
232
  event.preventDefault()
137
- this.$emit('click', navigationEntry.href)
233
+ this.$emit('click', navigationEntry.path)
138
234
 
139
235
  }
140
236
  if (!(navigationEntry.subentries && navigationEntry.subentries.length > 0)) {
@@ -143,6 +239,9 @@ export default {
143
239
  // add entry "open" to navigationEntry-object (will be watched by vue3 automatically)
144
240
  navigationEntry.open = !navigationEntry.open
145
241
  }
242
+ },
243
+ getRoute(navigationEntry) {
244
+ return getRoute(navigationEntry)
146
245
  }
147
246
  }
148
247
  }
@@ -214,7 +313,7 @@ export default {
214
313
  width: auto;
215
314
  }
216
315
 
217
- &.open {
316
+ &.open-off-canvas {
218
317
  nav {
219
318
  left: 0;
220
319
  opacity: 1;
@@ -223,13 +322,27 @@ export default {
223
322
  background: var(--default-background-color);
224
323
  border-right: var(--default-border);
225
324
  }
325
+
326
+ &.show-content-overlay {
327
+ nav {
328
+ &::after {
329
+ content: "";
330
+ position: fixed;
331
+ width: calc(100% - var(--nav-width));
332
+ top: 0;
333
+ left: var(--nav-width);
334
+ height: 100%;
335
+ display: block;
336
+ background: var(--pure-black-reduced-opacity);
337
+ }
338
+ }
339
+ }
226
340
  }
227
341
 
228
342
  nav {
229
343
  --nav-width: 30%;
230
344
 
231
- position: fixed;
232
- top: 0;
345
+ position: absolute;
233
346
  left: -100%;
234
347
  width: var(--nav-width);
235
348
  height: 100%;
@@ -346,21 +459,6 @@ export default {
346
459
  }
347
460
  }
348
461
  }
349
-
350
- &.show-content-overlay {
351
- nav {
352
- &::after {
353
- content: "";
354
- position: fixed;
355
- width: calc(100% - var(--nav-width));
356
- top: 0;
357
- left: var(--nav-width);
358
- height: 100%;
359
- display: block;
360
- background: var(--pure-black-reduced-opacity);
361
- }
362
- }
363
- }
364
462
  }
365
463
  }
366
464
 
@@ -1,6 +1,6 @@
1
1
  <template>
2
2
  <div :class="['label', 'multiple-switch', {disabled: status === 'disabled', error: status === 'error'}]">
3
- <span v-if="labelText">{{ labelText }}</span>
3
+ <span :class="{hidden: !showLegend}">{{ labelText }}</span>
4
4
  <span class="flex-container no-gap no-flex">
5
5
  <label :class="{disabled: status === 'disabled'}" :for="multipleswitch.id"
6
6
  v-for="(multipleswitch, index) in multipleSwitches" :key="index">
@@ -23,27 +23,58 @@
23
23
  export default {
24
24
  name: "CmdMultipleSwitch",
25
25
  props: {
26
- value: { /* required for v-model */
26
+ /**
27
+ * value for v-model
28
+ */
29
+ value: {
27
30
  type: [String, Array],
28
31
  required: false,
29
32
  default: ""
30
33
  },
34
+ /**
35
+ * toggle label visibility
36
+ */
37
+ showLabel: {
38
+ type: Boolean,
39
+ default: true
40
+ },
41
+ /**
42
+ * text for label
43
+ *
44
+ * @requiredForAccessibility: true
45
+ */
31
46
  labelText: {
32
47
  type: String,
33
48
  required: false
34
49
  },
50
+ /**
51
+ * list of switches
52
+ */
35
53
  multipleSwitches: {
36
54
  type: Array,
37
55
  required: true
38
56
  },
57
+ /**
58
+ * set type for switches
59
+ *
60
+ * @allowedValues: checkbox, radio
61
+ */
39
62
  switchTypes: {
40
63
  type: String,
41
64
  required: true
42
65
  },
66
+ /**
67
+ * name-attribute for switches
68
+ */
43
69
  switchNames: {
44
70
  type: String,
45
71
  required: true
46
72
  },
73
+ /**
74
+ * status for all switches
75
+ *
76
+ * @allowedValues: error, disabled
77
+ */
47
78
  status: {
48
79
  type: String,
49
80
  required: false
@@ -1,26 +1,70 @@
1
1
  <template>
2
2
  <ol class="cmd-multistep-form-progress-bar">
3
3
  <li v-for="(step, index) in multisteps" :key="index" :class="{active : activeLink === index}">
4
- <a :href="step.path" @click.stop.prevent="clickedStep($event, index)">
5
- <span class="number" v-if="showStepNumber">{{ index + 1 }}</span>
6
- <span v-else :class="step.iconClass"></span>
7
- <span>{{ step.name }}</span>
4
+ <!-- begin type === href -->
5
+ <a v-if="step.type === 'href'"
6
+ :href="step.path" @click.stop.prevent="clickedStep($event, index)"
7
+ :title="step.tooltip"
8
+ >
9
+ <span v-if="showStepNumber" class="number">{{ index + 1 }}</span>
10
+ <span v-if="step.iconClass" :class="step.iconClass"></span>
11
+ <span v-if="step.text">{{ step.text }}</span>
8
12
  <span :class="separatorIconClass"></span>
9
13
  </a>
14
+ <!-- end type === href -->
15
+
16
+ <!-- begin type === router -->
17
+ <router-link
18
+ v-if="step.type === 'router'"
19
+ :to="getRoute(step)"
20
+ :title="step.tooltip"
21
+ >
22
+ <span v-if="showStepNumber" class="number">{{ index + 1 }}</span>
23
+ <span v-if="step.iconClass" :class="step.iconClass"></span>
24
+ <span v-if="step.text">{{ step.text }}</span>
25
+ <span :class="separatorIconClass"></span>
26
+ </router-link>
27
+ <!-- end type === router -->
28
+
29
+ <!-- begin type === button/submit -->
30
+ <button
31
+ v-if="step.type === 'button' || step.type === 'submit'"
32
+ class="button"
33
+ :type="step.type"
34
+ :name="step.name"
35
+ :title="step.tooltip"
36
+ :formaction="step.formaction"
37
+ @click.stop.prevent="clickedStep($event, index)"
38
+ >
39
+ <span v-if="showStepNumber" class="number">{{ index + 1 }}</span>
40
+ <span v-if="step.iconClass" :class="step.iconClass"></span>
41
+ <span v-if="step.text">{{ step.text }}</span>
42
+ <span :class="separatorIconClass"></span>
43
+ </button>
44
+ <!-- end type === button/submit -->
10
45
  </li>
11
46
  </ol>
12
47
  </template>
13
48
 
14
49
  <script>
50
+ // import functions
51
+ import {getRoute} from "../utilities.js"
52
+
15
53
  export default {
16
54
  name: 'CmdMultistepFormProgressBar',
17
55
  data() {
18
56
  return {
19
- activeLink: 0,
20
- showStepNumber: true
57
+ activeLink: 0
21
58
  }
22
59
  },
23
60
  props: {
61
+ /**
62
+ * toggle visibility of step-number in front/left of link-icon and -name
63
+ */
64
+ showStepNumber: {
65
+ type: Boolean,
66
+ default: false
67
+ },
24
68
  /**
25
69
  * list of multisteps
26
70
  */
@@ -29,17 +73,22 @@ export default {
29
73
  required: true
30
74
  },
31
75
  /**
32
- * icon-class for separator shown inbetween multisteps
76
+ * icon-class for separator shown between multisteps
33
77
  */
34
78
  separatorIconClass: {
35
79
  type: String,
36
- required: true
80
+ default() {
81
+ return "icon-single-arrow-right"
82
+ }
37
83
  }
38
84
  },
39
85
  methods: {
40
86
  clickedStep(event, index) {
41
87
  this.activeLink = index;
42
88
  this.$emit('click', {event: event, index: index, stepPath: this.multisteps[index].path})
89
+ },
90
+ getRoute(step) {
91
+ return getRoute(step)
43
92
  }
44
93
  }
45
94
  }
@@ -165,7 +214,9 @@ export default {
165
214
 
166
215
  &:hover, &:active, &:focus {
167
216
  span, span[class*="icon"] {
168
- color: var(--primary-color);
217
+ &:not(:last-child) {
218
+ color: var(--primary-color);
219
+ }
169
220
  }
170
221
  }
171
222
  }
@@ -185,7 +236,6 @@ export default {
185
236
  li {
186
237
  &:not(:last-child) {
187
238
  border-bottom: var(--default-border);
188
- border-bottom-width: .2rem;
189
239
  }
190
240
 
191
241
  a {
@@ -1,41 +1,67 @@
1
1
  <template>
2
2
  <div class="cmd-opening-hours">
3
- <h4 v-if="headline">{{ headline }}</h4>
4
- <a v-if="pathToDetails" :href="pathToDetails" :class="{'closed': closed}">{{ textOpenClosed }}</a>
3
+ <!-- begin cmd-custom-headline -->
4
+ <CmdCustomHeadline v-if="cmdCustomHeadline" :headline="cmdCustomHeadline" />
5
+ <!-- end cmd-custom-headline -->
6
+
7
+ <!-- begin opening-status with link to detail-page -->
8
+ <template v-if="link && link?.path && link?.show">
9
+ <a v-if="link.type === 'href'" :href="link.path" :class="{closed: closed}">{{ textOpenClosed }}</a>
10
+ <router-link v-if="link.type === 'router'" :to="link.path" :class="{closed: closed}">{{ textOpenClosed }}</router-link>
11
+ <button v-if="link.type === 'button'" :class="['button', {closed: closed}]">{{ textOpenClosed }}</button>
12
+ </template>
13
+ <!-- end opening-status with link to detail-page -->
14
+
15
+ <!-- begin opening-status (without link) -->
5
16
  <span v-else :class="{'closed': closed}">{{ textOpenClosed }}</span>
17
+ <!-- end opening-status (without link) -->
18
+
19
+ <!-- begin opening-days and -hours -->
6
20
  <dl>
7
21
  <template v-for="day in openingHours" :key="day.day">
8
22
  <dt>{{ day.day }}:</dt>
9
23
  <dd>{{ day.fromTime }}&ndash;{{ day.tillTime }}</dd>
10
24
  </template>
11
25
  </dl>
12
- <div>
13
- <p v-if="textHolidaysClosed"><strong>{{ textHolidaysClosed }}</strong></p>
26
+ <!-- end opening-days and -hours -->
27
+
28
+ <!-- begin holiday-closes-text and miscellaneous information -->
29
+ <div v-if="textHolidaysClosed || textMiscInfo">
30
+ <p v-if="textHolidaysClosed">
31
+ <strong>{{ textHolidaysClosed }}</strong>
32
+ </p>
14
33
  <p v-if="textMiscInfo">{{ textMiscInfo }}</p>
15
34
  </div>
35
+ <!-- end holiday-closes-text and miscellaneous information -->
16
36
  </div>
17
37
  </template>
18
38
 
19
39
  <script>
40
+ // import components
41
+ import CmdCustomHeadline from "./CmdCustomHeadline"
42
+
20
43
  export default {
21
44
  name: "CmdOpeningHours",
45
+ components: {CmdCustomHeadline},
22
46
  props: {
23
47
  /**
24
- * headline above displayed opening hours
48
+ * properties for CmdCustomHeadline-component
25
49
  */
26
- headline: {
27
- type: String,
50
+ cmdCustomHeadline: {
51
+ type: Object,
28
52
  required: false
29
53
  },
30
54
  /**
31
- * set a path to a detail page
55
+ * set a link to a detail page
32
56
  */
33
- pathToDetails: {
34
- type: String,
57
+ link: {
58
+ type: Object,
35
59
  required: false
36
60
  },
37
61
  /**
38
62
  * toggles if "closed"-text will be shown
63
+ *
64
+ * @affectsStyling: true
39
65
  */
40
66
  closed: {
41
67
  type: Boolean,
@@ -1,8 +1,5 @@
1
1
  <template>
2
2
  <div class="cmd-pager">
3
- <p>
4
- Content: {{ currentPage }} of {{ numberOfPages }}
5
- </p>
6
3
  <div class="pager">
7
4
  <!-- begin button to previous page -->
8
5
  <a class="page-change" :class="{'disabled': currentPage === 1, 'button': showLinksAsButtons}"
@@ -69,7 +66,9 @@ export default {
69
66
  default: true
70
67
  },
71
68
  /**
69
+ * button to switch to previous page
72
70
  *
71
+ * @requiredForAccessibility: partial
73
72
  */
74
73
  prevButton: {
75
74
  type: Object,
@@ -80,6 +79,11 @@ export default {
80
79
  }
81
80
  }
82
81
  },
82
+ /**
83
+ * button to switch to next page
84
+ *
85
+ * @requiredForAccessibility: partial
86
+ */
83
87
  nextButton: {
84
88
  type: Object,
85
89
  default: function() {
@@ -100,14 +104,12 @@ export default {
100
104
  this.currentPage = page
101
105
  this.$emit('click', page)
102
106
  },
103
-
104
107
  nextPage() {
105
108
  if (this.currentPage < this.numberOfPages) {
106
109
  this.showPage(this.currentPage + 1)
107
110
  }
108
111
 
109
112
  },
110
-
111
113
  previousPage() {
112
114
  if (this.currentPage > 1) {
113
115
  this.showPage(this.currentPage - 1)