comand-component-library 3.3.87 → 4.0.1

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 (73) hide show
  1. package/dist/comand-component-library.js +1728 -1655
  2. package/dist/comand-component-library.umd.cjs +4 -4
  3. package/dist/media/images/slideshow-images/large/slide1.jpg +0 -0
  4. package/dist/media/images/slideshow-images/large/slide2.jpg +0 -0
  5. package/dist/media/images/slideshow-images/large/slide3.jpg +0 -0
  6. package/dist/media/images/slideshow-images/large/slide4.jpg +0 -0
  7. package/dist/media/images/slideshow-images/medium/slide1.jpg +0 -0
  8. package/dist/media/images/slideshow-images/medium/slide2.jpg +0 -0
  9. package/dist/media/images/slideshow-images/medium/slide3.jpg +0 -0
  10. package/dist/media/images/slideshow-images/medium/slide4.jpg +0 -0
  11. package/dist/media/images/slideshow-images/small/slide1.jpg +0 -0
  12. package/dist/media/images/slideshow-images/small/slide2.jpg +0 -0
  13. package/dist/media/images/slideshow-images/small/slide3.jpg +0 -0
  14. package/dist/media/images/slideshow-images/small/slide4.jpg +0 -0
  15. package/dist/style.css +1 -1
  16. package/package.json +2 -2
  17. package/src/ComponentLibrary.vue +2629 -0
  18. package/src/assets/data/address-data.json +3 -3
  19. package/src/assets/data/main-navigation.json +2 -0
  20. package/src/components/CmdAddressData.vue +91 -97
  21. package/src/components/CmdAddressDataItem.vue +60 -52
  22. package/src/components/CmdBankAccountData.vue +1 -1
  23. package/src/components/CmdBox.vue +50 -14
  24. package/src/components/CmdBoxWrapper.vue +23 -9
  25. package/src/components/CmdBreadcrumbs.vue +1 -1
  26. package/src/components/CmdCompanyLogo.vue +14 -11
  27. package/src/components/CmdContainer.vue +1 -1
  28. package/src/components/CmdCookieDisclaimer.vue +1 -1
  29. package/src/components/CmdCopyrightInformation.vue +1 -1
  30. package/src/components/CmdFancyBox.vue +8 -5
  31. package/src/components/CmdForm.vue +7 -1
  32. package/src/components/CmdFormElement.vue +58 -108
  33. package/src/components/CmdFormFilters.vue +2 -1
  34. package/src/components/CmdGoogleMaps.vue +1 -1
  35. package/src/components/CmdHeadline.vue +116 -52
  36. package/src/components/CmdIcon.vue +1 -1
  37. package/src/components/CmdImage.vue +1 -1
  38. package/src/components/CmdImageGallery.vue +1 -1
  39. package/src/components/CmdImageZoom.vue +1 -1
  40. package/src/components/CmdInputGroup.vue +8 -7
  41. package/src/components/CmdListOfLinks.vue +25 -25
  42. package/src/components/CmdListOfLinksItem.vue +0 -4
  43. package/src/components/CmdListOfRequirements.vue +10 -2
  44. package/src/components/CmdLoginForm.vue +2 -1
  45. package/src/components/CmdMainNavigation.vue +38 -26
  46. package/src/components/CmdMultistepFormProgressBar.vue +50 -4
  47. package/src/components/CmdNewsletterSubscription.vue +8 -15
  48. package/src/components/CmdOpeningHours.vue +34 -19
  49. package/src/components/CmdOpeningHoursItem.vue +22 -14
  50. package/src/components/CmdPagination.vue +22 -16
  51. package/src/components/CmdProgressBar.vue +1 -1
  52. package/src/components/CmdSidebar.vue +13 -2
  53. package/src/components/CmdSiteFooter.vue +14 -14
  54. package/src/components/CmdSiteHeader.vue +14 -29
  55. package/src/components/CmdSiteSearch.vue +12 -11
  56. package/src/components/CmdSlideButton.vue +9 -7
  57. package/src/components/CmdSlideshow.vue +14 -12
  58. package/src/components/CmdSocialNetworks.vue +11 -4
  59. package/src/components/CmdSocialNetworksItem.vue +2 -7
  60. package/src/components/CmdSwitchLanguage.vue +1 -1
  61. package/src/components/CmdSystemMessage.vue +11 -6
  62. package/src/components/CmdTable.vue +64 -16
  63. package/src/components/CmdTabs.vue +2 -2
  64. package/src/components/CmdTextImageBlock.vue +3 -1
  65. package/src/components/CmdThumbnailScroller.vue +180 -155
  66. package/src/components/CmdToggleDarkMode.vue +1 -1
  67. package/src/components/CmdTooltip.vue +6 -1
  68. package/src/components/CmdUploadForm.vue +69 -43
  69. package/src/components/CmdWidthLimitationWrapper.vue +7 -3
  70. package/src/components/ComponentSettings.vue +171 -0
  71. package/src/main.js +3 -3
  72. package/src/mixins/FieldValidation.js +0 -17
  73. package/src/App.vue +0 -2119
@@ -1,7 +1,7 @@
1
1
  <template>
2
2
  <div class="cmd-width-limitation-wrapper" :class="{'sticky': sticky}">
3
- <section v-if="innerWrapper" :class="setInnerClass">
4
- <a v-if="anchorId" :id="anchorId"></a>
3
+ <!-- begin slot-content in section -->
4
+ <section v-if="innerWrapper" :class="setInnerClass" :id="{anchorId: anchorId}">
5
5
  <!-- begin cmd-headline -->
6
6
  <CmdHeadline
7
7
  v-if="cmdHeadline"
@@ -15,12 +15,16 @@
15
15
  <slot></slot>
16
16
  <!-- end slot-content -->
17
17
  </section>
18
+ <!-- end slot-content in section -->
19
+
20
+ <!-- begin slot-content without section -->
18
21
  <template v-else>
19
22
  <!-- begin slot-content -->
20
23
  <a v-if="anchorId" :id="anchorId"></a>
21
24
  <slot></slot>
22
25
  <!-- end slot-content -->
23
26
  </template>
27
+ <!-- end slot-content without section -->
24
28
  </div>
25
29
  </template>
26
30
 
@@ -113,7 +117,7 @@ export default {
113
117
  }
114
118
  </script>
115
119
 
116
- <style lang="scss">
120
+ <style>
117
121
  /* begin cmd-width-limitation-wrapper ---------------------------------------------------------------------------------------- */
118
122
  .cmd-width-limitation-wrapper {
119
123
  > * {
@@ -0,0 +1,171 @@
1
+ <template>
2
+ <CmdBox
3
+ :use-slots="['body']"
4
+ :collapsible="true"
5
+ :cmdHeadline="{headlineText: readableName(componentName), headlineLevel: 4, headlineIcon: {iconClass: 'icon-settings-template'}}"
6
+ :openCollapsedBox="true"
7
+ boxBodyClass="settings-body"
8
+ >
9
+ <template v-slot:body>
10
+ <CmdFormElement
11
+ v-for="(prop) in filteredProps" :key="prop.name"
12
+ :element="formElement(prop)"
13
+ :type="formType(prop)"
14
+ :labelText="readableName(prop.name)"
15
+ :placeholder="readableName(prop.name)"
16
+ :toggleSwitch="prop.toggleSwitch"
17
+ :colored="true"
18
+ :selectOptions="selectOptions(prop)"
19
+ :modelValue="prop.value"
20
+ @update:modelValue="onUpdateProperty(prop.name, $event)"
21
+ />
22
+ </template>
23
+ </CmdBox>
24
+ </template>
25
+
26
+ <script>
27
+
28
+ export default {
29
+ name: "ComponentSettings",
30
+ data() {
31
+ return {
32
+ currentComponentName: ""
33
+ }
34
+ },
35
+ props: {
36
+ componentName: {
37
+ type: String,
38
+ default: ""
39
+ },
40
+ componentProps: {
41
+ type: Object,
42
+ required: true
43
+ },
44
+ componentSettings: {
45
+ type: Object,
46
+ required: true
47
+ },
48
+ componentControls: {
49
+ type: Object
50
+ }
51
+ },
52
+ computed: {
53
+ filteredProps() {
54
+ return this.filterProperties(this.componentProps, [])
55
+ }
56
+ },
57
+ methods: {
58
+ filterProperties(properties, nameParts) {
59
+ const allProps = []
60
+
61
+ for (let key in properties) {
62
+ const propType = typeof properties[key]
63
+ if (propType === "boolean" || propType === "string" || propType === "number" || (propType === "object" && key.slice(0, 3) === "cmd")) {
64
+
65
+ if(propType === "object") {
66
+ this.filterProperties(properties[key], [...nameParts, key]).forEach((item) => allProps.push(item))
67
+ } else {
68
+ const prop = {}
69
+
70
+ if (propType === "boolean") {
71
+ prop.toggleSwitch = true
72
+ }
73
+
74
+ prop.name = [...nameParts, key].join(".")
75
+ prop.type = propType
76
+ prop.value = properties[key]
77
+
78
+ allProps.push(prop)
79
+ }
80
+ }
81
+ }
82
+
83
+ return allProps
84
+ },
85
+ onUpdateProperty(propName, value) {
86
+ const nameParts = propName.split(".")
87
+ let settings = this.componentSettings
88
+ for (let i = 0; i < nameParts.length - 1; i++) {
89
+ settings = settings[nameParts.shift()]
90
+ }
91
+
92
+ if (typeof settings[nameParts[0]] === "number") {
93
+ settings[nameParts[0]] = Number(value)
94
+ } else {
95
+ settings[nameParts[0]] = value
96
+ }
97
+ },
98
+ readableName(name) {
99
+ // remove prefix from current component-name
100
+ let nameWithoutPrefix = name.replace("Cmd", "")
101
+
102
+ // remove entire prefix (componentName) for inner-component-properties
103
+ nameWithoutPrefix = nameWithoutPrefix.replace(/^[^.]*\./, '');
104
+
105
+ // use a regular expression to find the positions of capital letters
106
+ let capitalPositions = []
107
+ nameWithoutPrefix.replace(/[A-Z]/g, function (match, index) {
108
+ capitalPositions.push(index)
109
+ return match
110
+ })
111
+
112
+ // add a space before each capital letter based on the found positions
113
+ for (let i = capitalPositions.length - 1; i >= 0; i--) {
114
+ nameWithoutPrefix = nameWithoutPrefix.slice(0, capitalPositions[i]) + ' ' + nameWithoutPrefix.slice(capitalPositions[i])
115
+ }
116
+
117
+ // capitalize first letter
118
+ nameWithoutPrefix = nameWithoutPrefix.charAt(0).toUpperCase() + nameWithoutPrefix.slice(1)
119
+
120
+ return nameWithoutPrefix
121
+ },
122
+ formType(prop) {
123
+ if (Array.isArray(this.componentControls?.[prop.name])) {
124
+ return null
125
+ }
126
+
127
+ switch (prop.type) {
128
+ case "boolean":
129
+ return "checkbox"
130
+
131
+ case "number":
132
+ return "number"
133
+
134
+ default:
135
+ return "text"
136
+
137
+ }
138
+ },
139
+ formElement(prop) {
140
+ if (Array.isArray(this.componentControls?.[prop.name])) {
141
+ return "select"
142
+ } else {
143
+ return "input"
144
+ }
145
+ },
146
+ selectOptions(prop) {
147
+ if (Array.isArray(this.componentControls?.[prop.name])) {
148
+ return this.componentControls[prop.name]
149
+ } else {
150
+ return null
151
+ }
152
+ }
153
+ },
154
+ watch: {
155
+ componentName: {
156
+ handler() {
157
+ this.currentComponentName = this.componentName
158
+ },
159
+ immediate: true
160
+ }
161
+ }
162
+ }
163
+ </script>
164
+
165
+ <style>
166
+ .cmd-box .settings-body > div {
167
+ display: flex;
168
+ flex-direction: column;
169
+ gap: calc(var(--default-gap) / 2);
170
+ }
171
+ </style>
package/src/main.js CHANGED
@@ -4,8 +4,8 @@ import "comand-frontend-framework/styles"
4
4
 
5
5
  import { createApp } from "vue"
6
6
 
7
- // import App from "./App.vue"
8
- import App from "./App.vue"
7
+ // import ComponentLibrary from "./ComponentLibrary.vue"
8
+ import ComponentLibrary from "./ComponentLibrary.vue"
9
9
  //import { createRouter, createWebHistory } from "vue-router"
10
10
  import "clickout-event"
11
11
 
@@ -53,4 +53,4 @@ import router from "./router"
53
53
  // })
54
54
 
55
55
  // createApp(App).use(router).directive('telephone', directiveTelephone).directive('focus', directiveFocus).mount('#app')
56
- createApp(App).use(router).directive('telephone', directiveTelephone).directive('focus', directiveFocus).mount('#app')
56
+ createApp(ComponentLibrary).use(router).directive('telephone', directiveTelephone).directive('focus', directiveFocus).mount('#app')
@@ -215,23 +215,6 @@ export default {
215
215
  }
216
216
  return this.helplink.icon.iconClass
217
217
  },
218
- getStatusIconType() {
219
- if (this.validationStatus !== "") {
220
- if (!this.capsLockActivated) {
221
- if (this.validationStatus === "error") {
222
- return this.iconHasStateError.iconType
223
- } else if (this.validationStatus === "warning") {
224
- return this.iconHasStateWarning.iconType
225
- } else if (this.validationStatus === "success") {
226
- return this.iconHasStateSuccess.iconType
227
- }
228
- return this.iconHasStateInfo.iconType
229
- } else {
230
- return this.iconCapsLock.iconType
231
- }
232
- }
233
- return this.helplink.icon.iconType
234
- },
235
218
  inputRequirements() {
236
219
  const standardRequirements = []
237
220
  // check if field is required