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.
- package/dist/comand-component-library.js +1728 -1655
- package/dist/comand-component-library.umd.cjs +4 -4
- package/dist/media/images/slideshow-images/large/slide1.jpg +0 -0
- package/dist/media/images/slideshow-images/large/slide2.jpg +0 -0
- package/dist/media/images/slideshow-images/large/slide3.jpg +0 -0
- package/dist/media/images/slideshow-images/large/slide4.jpg +0 -0
- package/dist/media/images/slideshow-images/medium/slide1.jpg +0 -0
- package/dist/media/images/slideshow-images/medium/slide2.jpg +0 -0
- package/dist/media/images/slideshow-images/medium/slide3.jpg +0 -0
- package/dist/media/images/slideshow-images/medium/slide4.jpg +0 -0
- package/dist/media/images/slideshow-images/small/slide1.jpg +0 -0
- package/dist/media/images/slideshow-images/small/slide2.jpg +0 -0
- package/dist/media/images/slideshow-images/small/slide3.jpg +0 -0
- package/dist/media/images/slideshow-images/small/slide4.jpg +0 -0
- package/dist/style.css +1 -1
- package/package.json +2 -2
- package/src/ComponentLibrary.vue +2629 -0
- package/src/assets/data/address-data.json +3 -3
- package/src/assets/data/main-navigation.json +2 -0
- package/src/components/CmdAddressData.vue +91 -97
- package/src/components/CmdAddressDataItem.vue +60 -52
- package/src/components/CmdBankAccountData.vue +1 -1
- package/src/components/CmdBox.vue +50 -14
- package/src/components/CmdBoxWrapper.vue +23 -9
- package/src/components/CmdBreadcrumbs.vue +1 -1
- package/src/components/CmdCompanyLogo.vue +14 -11
- package/src/components/CmdContainer.vue +1 -1
- package/src/components/CmdCookieDisclaimer.vue +1 -1
- package/src/components/CmdCopyrightInformation.vue +1 -1
- package/src/components/CmdFancyBox.vue +8 -5
- package/src/components/CmdForm.vue +7 -1
- package/src/components/CmdFormElement.vue +58 -108
- package/src/components/CmdFormFilters.vue +2 -1
- package/src/components/CmdGoogleMaps.vue +1 -1
- package/src/components/CmdHeadline.vue +116 -52
- package/src/components/CmdIcon.vue +1 -1
- package/src/components/CmdImage.vue +1 -1
- package/src/components/CmdImageGallery.vue +1 -1
- package/src/components/CmdImageZoom.vue +1 -1
- package/src/components/CmdInputGroup.vue +8 -7
- package/src/components/CmdListOfLinks.vue +25 -25
- package/src/components/CmdListOfLinksItem.vue +0 -4
- package/src/components/CmdListOfRequirements.vue +10 -2
- package/src/components/CmdLoginForm.vue +2 -1
- package/src/components/CmdMainNavigation.vue +38 -26
- package/src/components/CmdMultistepFormProgressBar.vue +50 -4
- package/src/components/CmdNewsletterSubscription.vue +8 -15
- package/src/components/CmdOpeningHours.vue +34 -19
- package/src/components/CmdOpeningHoursItem.vue +22 -14
- package/src/components/CmdPagination.vue +22 -16
- package/src/components/CmdProgressBar.vue +1 -1
- package/src/components/CmdSidebar.vue +13 -2
- package/src/components/CmdSiteFooter.vue +14 -14
- package/src/components/CmdSiteHeader.vue +14 -29
- package/src/components/CmdSiteSearch.vue +12 -11
- package/src/components/CmdSlideButton.vue +9 -7
- package/src/components/CmdSlideshow.vue +14 -12
- package/src/components/CmdSocialNetworks.vue +11 -4
- package/src/components/CmdSocialNetworksItem.vue +2 -7
- package/src/components/CmdSwitchLanguage.vue +1 -1
- package/src/components/CmdSystemMessage.vue +11 -6
- package/src/components/CmdTable.vue +64 -16
- package/src/components/CmdTabs.vue +2 -2
- package/src/components/CmdTextImageBlock.vue +3 -1
- package/src/components/CmdThumbnailScroller.vue +180 -155
- package/src/components/CmdToggleDarkMode.vue +1 -1
- package/src/components/CmdTooltip.vue +6 -1
- package/src/components/CmdUploadForm.vue +69 -43
- package/src/components/CmdWidthLimitationWrapper.vue +7 -3
- package/src/components/ComponentSettings.vue +171 -0
- package/src/main.js +3 -3
- package/src/mixins/FieldValidation.js +0 -17
- 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
|
-
|
4
|
-
|
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
|
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
|
8
|
-
import
|
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(
|
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
|