comand-component-library 4.0.15 → 4.0.17
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 +2845 -2632
- package/dist/comand-component-library.umd.cjs +3 -3
- package/dist/style.css +1 -1
- package/package.json +1 -1
- package/src/ComponentLibrary.vue +71 -101
- package/src/assets/data/address-data.json +2 -0
- package/src/assets/data/listOfComponents.json +39 -0
- package/src/assets/data/main-navigation.json +3 -3
- package/src/componentSettingsDataAndControls.vue +7 -1
- package/src/components/CmdAddressData.vue +40 -11
- package/src/components/CmdAddressDataItem.vue +20 -13
- package/src/components/CmdBox.vue +2 -3
- package/src/components/CmdCompanyLogo.vue +6 -3
- package/src/components/CmdFormElement.vue +7 -2
- package/src/components/CmdHeadline.vue +4 -4
- package/src/components/CmdImage.vue +4 -1
- package/src/components/CmdLoginForm.vue +1 -1
- package/src/components/CmdMainNavigation.vue +1 -1
- package/src/components/CmdSiteHeader.vue +93 -2
- package/src/components/CmdSlideButton.vue +1 -1
- package/src/components/ComponentSettings.vue +0 -1
- package/src/mixins/pages/BasicForm/DefaultMessageProperties.js +5 -2
- package/src/pages/BasicForm.vue +108 -20
- package/src/App.vue +0 -2117
@@ -14,7 +14,7 @@
|
|
14
14
|
<!-- end pre-headline-text -->
|
15
15
|
|
16
16
|
<span>
|
17
|
-
<!--
|
17
|
+
<!-- begin slot -->
|
18
18
|
<slot>{{ headlineText }}</slot>
|
19
19
|
<!-- end slot -->
|
20
20
|
</span>
|
@@ -27,7 +27,7 @@
|
|
27
27
|
<!-- end CmdIcon -->
|
28
28
|
|
29
29
|
<span>
|
30
|
-
<!--
|
30
|
+
<!-- begin slot -->
|
31
31
|
<slot>{{ headlineText }}</slot>
|
32
32
|
<!-- end slot -->
|
33
33
|
</span>
|
@@ -74,13 +74,13 @@
|
|
74
74
|
<span class="pre-headline-text">{{ preHeadlineText }}</span>
|
75
75
|
<!-- end pre-headline-text -->
|
76
76
|
|
77
|
-
<!--
|
77
|
+
<!-- begin slot -->
|
78
78
|
<slot>{{ headlineText }}</slot>
|
79
79
|
<!-- end slot -->
|
80
80
|
</component>
|
81
81
|
</template>
|
82
82
|
<component v-else-if="headlineText" :is="headlineTag">
|
83
|
-
<!--
|
83
|
+
<!-- begin slot -->
|
84
84
|
<slot>{{ headlineText }}</slot>
|
85
85
|
<!-- end slot -->
|
86
86
|
</component>
|
@@ -92,7 +92,7 @@
|
|
92
92
|
<!-- begin default-view -->
|
93
93
|
<figure v-else :class="['cmd-image', textAlign]">
|
94
94
|
<figcaption v-if="figcaption?.show && figcaption?.position === 'top'">{{ figcaption?.text }}</figcaption>
|
95
|
-
<img :src="imageSource" :alt="image?.alt" :title="image?.tooltip"/>
|
95
|
+
<img :src="imageSource" :alt="image?.alt" :title="image?.tooltip" @load="onImageLoaded" />
|
96
96
|
<figcaption v-if="figcaption?.show && figcaption?.position !== 'top'">{{ figcaption?.text }}</figcaption>
|
97
97
|
</figure>
|
98
98
|
<!-- end default-view -->
|
@@ -248,6 +248,9 @@ export default {
|
|
248
248
|
}
|
249
249
|
},
|
250
250
|
methods: {
|
251
|
+
onImageLoaded(event) {
|
252
|
+
this.$emit("image-loaded", event)
|
253
|
+
},
|
251
254
|
itemProvider() {
|
252
255
|
const editModeConfig = this.editModeConfig?.itemProviderOverwrite?.()
|
253
256
|
return {
|
@@ -96,7 +96,7 @@
|
|
96
96
|
<!-- end type === router -->
|
97
97
|
|
98
98
|
<!-- begin sub-level 2 -->
|
99
|
-
<ul v-if="navigationSubEntry.subentries" :aria-expanded="openSubentry ? 'true' : 'false'">
|
99
|
+
<ul v-if="navigationSubEntry.subentries?.length" :aria-expanded="openSubentry ? 'true' : 'false'">
|
100
100
|
<li v-for="(navigationSubSubEntry, subsubindex) in navigationSubEntry.subentries"
|
101
101
|
:key="subsubindex">
|
102
102
|
<!-- begin type === href -->
|
@@ -1,6 +1,14 @@
|
|
1
1
|
<template>
|
2
2
|
<div
|
3
|
-
|
3
|
+
ref="site-header"
|
4
|
+
:class="[
|
5
|
+
'cmd-site-header site-header',
|
6
|
+
{
|
7
|
+
sticky: sticky,
|
8
|
+
'navigation-inline': navigationInline,
|
9
|
+
'off-canvas-right': cmdMainNavigation?.offcanvasPosition === 'right'
|
10
|
+
}
|
11
|
+
]"
|
4
12
|
role="banner">
|
5
13
|
<!-- begin slot for elements above header -->
|
6
14
|
<div v-if="$slots.topheader" class="top-header">
|
@@ -8,6 +16,7 @@
|
|
8
16
|
</div>
|
9
17
|
<!-- end slot for elements above header -->
|
10
18
|
|
19
|
+
<!-- begin (inner) header -->
|
11
20
|
<header
|
12
21
|
:class="[
|
13
22
|
useGrid ? 'grid-container-create-columns': 'flex-container',
|
@@ -27,6 +36,7 @@
|
|
27
36
|
<CmdCompanyLogo
|
28
37
|
v-if="cmdCompanyLogo"
|
29
38
|
v-bind="cmdCompanyLogo"
|
39
|
+
@image-loaded="onImageLoaded"
|
30
40
|
/>
|
31
41
|
<!-- end CmdCompanyLogo -->
|
32
42
|
|
@@ -43,6 +53,7 @@
|
|
43
53
|
</template>
|
44
54
|
<!-- end content given by data -->
|
45
55
|
</header>
|
56
|
+
<!-- end (inner) header -->
|
46
57
|
|
47
58
|
<!-- begin CmdMainNavigation -->
|
48
59
|
<CmdMainNavigation
|
@@ -61,6 +72,11 @@
|
|
61
72
|
export default {
|
62
73
|
name: "CmdSiteHeader",
|
63
74
|
emits: ["offcanvas"],
|
75
|
+
data() {
|
76
|
+
return {
|
77
|
+
defaultLogoHeight: ""
|
78
|
+
}
|
79
|
+
},
|
64
80
|
props: {
|
65
81
|
/**
|
66
82
|
* use only if default-button of inner navigation-component should not be used
|
@@ -85,6 +101,24 @@ export default {
|
|
85
101
|
type: Boolean,
|
86
102
|
default: false
|
87
103
|
},
|
104
|
+
/**
|
105
|
+
* set if header (incl. logo) should be resized if user scrolls page
|
106
|
+
*
|
107
|
+
* scrollContainerToResizeHeader-property must be defined
|
108
|
+
*/
|
109
|
+
resizeHeaderOnScroll: {
|
110
|
+
type: Boolean,
|
111
|
+
default: true
|
112
|
+
},
|
113
|
+
/**
|
114
|
+
* set selector the user scrolls to resize header
|
115
|
+
*
|
116
|
+
* resizeHeaderOnScroll-property must be activated
|
117
|
+
*/
|
118
|
+
scrollContainerToResizeHeader: {
|
119
|
+
type: String,
|
120
|
+
default: "#page-wrapper"
|
121
|
+
},
|
88
122
|
/**
|
89
123
|
* use a grid for positioning of inner-elements (else a flex-container will be used)
|
90
124
|
*
|
@@ -109,10 +143,34 @@ export default {
|
|
109
143
|
required: false
|
110
144
|
}
|
111
145
|
},
|
146
|
+
mounted() {
|
147
|
+
if (this.resizeHeaderOnScroll) {
|
148
|
+
const scrollContainer = document.querySelector(this.scrollContainerToResizeHeader);
|
149
|
+
|
150
|
+
scrollContainer.addEventListener("scroll", function () {
|
151
|
+
const header = document.querySelector(".cmd-site-header > header");
|
152
|
+
|
153
|
+
if (scrollContainer.scrollTop > 0) {
|
154
|
+
header.classList.add("resize-on-scroll");
|
155
|
+
} else {
|
156
|
+
header.classList.remove("resize-on-scroll");
|
157
|
+
}
|
158
|
+
});
|
159
|
+
}
|
160
|
+
},
|
112
161
|
methods: {
|
162
|
+
onImageLoaded(event) {
|
163
|
+
this.defaultLogoHeight = (event.target.height / 10) + "rem"
|
164
|
+
},
|
113
165
|
emitOffcanvasStatus(event) {
|
114
166
|
this.$emit("offcanvas", event)
|
115
167
|
}
|
168
|
+
},
|
169
|
+
watch: {
|
170
|
+
defaultLogoHeight() {
|
171
|
+
const logo = this.$refs["site-header"].querySelector(".cmd-company-logo img")
|
172
|
+
logo.style.height = this.defaultLogoHeight
|
173
|
+
}
|
116
174
|
}
|
117
175
|
}
|
118
176
|
</script>
|
@@ -120,6 +178,8 @@ export default {
|
|
120
178
|
<style>
|
121
179
|
/* begin cmd-site-header ---------------------------------------------------------------------------------------- */
|
122
180
|
.cmd-site-header {
|
181
|
+
--logo-width-on-scroll: 50%;
|
182
|
+
|
123
183
|
grid-area: site-header;
|
124
184
|
display: flex;
|
125
185
|
flex-direction: column;
|
@@ -130,17 +190,48 @@ export default {
|
|
130
190
|
&.sticky {
|
131
191
|
position: sticky;
|
132
192
|
z-index: 300;
|
193
|
+
|
194
|
+
header {
|
195
|
+
--header-scroll-animation: var(--default-transition);
|
196
|
+
transition: var(--header-scroll-animation);
|
197
|
+
|
198
|
+
.cmd-company-logo {
|
199
|
+
figure {
|
200
|
+
img {
|
201
|
+
transform-origin: top left;
|
202
|
+
transition: var(--header-scroll-animation);
|
203
|
+
margin: 0;
|
204
|
+
width: 100%;
|
205
|
+
}
|
206
|
+
}
|
207
|
+
}
|
208
|
+
|
209
|
+
&.resize-on-scroll {
|
210
|
+
padding-top: var(--default-padding);
|
211
|
+
padding-bottom: var(--default-padding);
|
212
|
+
transition: var(--header-scroll-animation);
|
213
|
+
|
214
|
+
.cmd-company-logo {
|
215
|
+
figure {
|
216
|
+
img {
|
217
|
+
transition: var(--header-scroll-animation);
|
218
|
+
width: var(--logo-width-on-scroll);
|
219
|
+
}
|
220
|
+
}
|
221
|
+
}
|
222
|
+
}
|
223
|
+
}
|
133
224
|
}
|
134
225
|
|
135
226
|
header, .cmd-main-navigation nav, .cmd-list-of-links {
|
136
227
|
max-width: var(--max-width);
|
137
228
|
width: 100%; /* stretch flex-item */
|
138
|
-
margin: 0 auto;
|
139
229
|
padding: 0 var(--default-padding);
|
140
230
|
}
|
141
231
|
|
142
232
|
.cmd-main-navigation nav {
|
143
233
|
width: auto;
|
234
|
+
margin: 0 0 0 auto; /* align nav to right */
|
144
235
|
}
|
145
236
|
|
146
237
|
.top-header {
|
@@ -3,7 +3,7 @@
|
|
3
3
|
@click.prevent
|
4
4
|
:class="['cmd-slide-button', 'button', 'keep-behavior-on-small-devices', slideButtonType]"
|
5
5
|
:title="getDirection.tooltip">
|
6
|
-
<!--
|
6
|
+
<!-- begin CmdIcon -->
|
7
7
|
<CmdIcon :iconClass="getDirection.iconClass || 'next'" />
|
8
8
|
<!-- end CmdIcon -->
|
9
9
|
</a>
|
@@ -4,7 +4,6 @@
|
|
4
4
|
:collapsible="true"
|
5
5
|
:cmdHeadline="{headlineText: readableName(componentName), headlineLevel: 4, headlineIcon: {iconClass: 'icon-settings-template'}}"
|
6
6
|
:openCollapsedBox="true"
|
7
|
-
:allowContentToScroll="true"
|
8
7
|
boxBodyClass="settings-body"
|
9
8
|
>
|
10
9
|
<template v-slot:body>
|
@@ -19,9 +19,12 @@ export default {
|
|
19
19
|
"basic_form.placeholder.zip": "Zip:",
|
20
20
|
"basic_form.labeltext.city": "City:",
|
21
21
|
"basic_form.placeholder.city": "City:",
|
22
|
-
"basic_form.labeltext.
|
22
|
+
"basic_form.labeltext.pobox": "PO Box:",
|
23
|
+
"basic_form.placeholder.pobox": "PO Box:",
|
24
|
+
"basic_form.labeltext.country": "Country:",
|
25
|
+
"basic_form.labeltext.additional_address_info": "Additional address information:",
|
23
26
|
"basic_form.placeholder.additional_address_info": "Additional address information",
|
24
|
-
"basic_form.labeltext.additional_text": "Additional text",
|
27
|
+
"basic_form.labeltext.additional_text": "Additional text:",
|
25
28
|
"basic_form.placeholder.additional_text": "Additional text",
|
26
29
|
"basic_form.labeltext.data_privacy": "I accept handling and saving of my personal data a mentioned in the <a href='/content/data-privacy-en.html' class='fancybox'>private policy</a>."
|
27
30
|
}
|
package/src/pages/BasicForm.vue
CHANGED
@@ -1,18 +1,23 @@
|
|
1
1
|
<template>
|
2
2
|
<div class="cmd-pages-basic-form">
|
3
|
-
<!--
|
4
|
-
<
|
5
|
-
|
6
|
-
|
7
|
-
|
3
|
+
<!-- begin CmdHeadline -->
|
4
|
+
<CmdHeadline v-if="cmdHeadline" v-bind="cmdHeadline" />
|
5
|
+
<!-- end CmdHeadline -->
|
6
|
+
|
7
|
+
<!-- begin CmdForm -->
|
8
|
+
<CmdForm
|
9
|
+
@submit="onSubmit"
|
10
|
+
novalidate="novalidate"
|
11
|
+
:textLegend="getMessage('basic_form.legend')"
|
12
|
+
:submitButton="submitButton"
|
8
13
|
>
|
9
|
-
<div v-if="configuration.salutation" class="flex-container no-flex">
|
14
|
+
<div v-if="configuration.salutation" class="flex-container no-flex order-male-female">
|
10
15
|
<!-- begin cmd-form-element -->
|
11
16
|
<CmdFormElement
|
12
17
|
element="input"
|
13
18
|
type="radio"
|
14
19
|
:labelText="getMessage('basic_form.labeltext.salutation_male')"
|
15
|
-
:name="configuration.salutation?.name || salutation"
|
20
|
+
:name="configuration.salutation?.name || 'salutation'"
|
16
21
|
inputValue="m"
|
17
22
|
:replaceInputType="configuration.salutation?.replaceInputType"
|
18
23
|
v-model="formData.salutation"
|
@@ -25,7 +30,7 @@
|
|
25
30
|
element="input"
|
26
31
|
type="radio"
|
27
32
|
:labelText="getMessage('basic_form.labeltext.salutation_female')"
|
28
|
-
:name="configuration.salutation?.name || salutation"
|
33
|
+
:name="configuration.salutation?.name || 'salutation'"
|
29
34
|
inputValue="f"
|
30
35
|
:replaceInputType="configuration.salutation?.replaceInputType"
|
31
36
|
v-model="formData.salutation"
|
@@ -38,7 +43,7 @@
|
|
38
43
|
<slot name="top"></slot>
|
39
44
|
<!-- end slot (top) -->
|
40
45
|
|
41
|
-
<div v-if="configuration.lastName || configuration.firstName" class="flex-container">
|
46
|
+
<div v-if="configuration.lastName || configuration.firstName" class="flex-container order-lastname-firstname">
|
42
47
|
<!-- begin cmd-form-element -->
|
43
48
|
<CmdFormElement
|
44
49
|
v-if="configuration.lastName"
|
@@ -71,7 +76,7 @@
|
|
71
76
|
/>
|
72
77
|
<!-- end cmd-form-element -->
|
73
78
|
</div>
|
74
|
-
<div v-if="configuration.email || configuration.phone" class="flex-container">
|
79
|
+
<div v-if="configuration.email || configuration.phone" class="flex-container order-phone-email">
|
75
80
|
<!-- begin cmd-form-element -->
|
76
81
|
<CmdFormElement
|
77
82
|
v-if="configuration.email"
|
@@ -105,7 +110,22 @@
|
|
105
110
|
<!-- end cmd-form-element -->
|
106
111
|
</div>
|
107
112
|
|
108
|
-
<div v-if="configuration.streetNo || configuration.
|
113
|
+
<div v-if="configuration.streetNo || configuration.streetNo || (configuration.zip && configuration.city)" class="flex-container">
|
114
|
+
<!-- begin cmd-form-element -->
|
115
|
+
<CmdFormElement
|
116
|
+
v-if="configuration.country"
|
117
|
+
element="select"
|
118
|
+
:labelText="getMessage('basic_form.labeltext.country')"
|
119
|
+
:selectOptions="configuration.country?.selectOptions"
|
120
|
+
:required="configuration.country?.required"
|
121
|
+
:name="configuration.country?.name || 'country'"
|
122
|
+
v-model="formData.country.value"
|
123
|
+
:status="formData.country.error ? 'error' : ''"
|
124
|
+
@validate="onValidate"
|
125
|
+
@change="onCountrySelect"
|
126
|
+
/>
|
127
|
+
<!-- end cmd-form-element -->
|
128
|
+
|
109
129
|
<!-- begin cmd-form-element -->
|
110
130
|
<CmdFormElement
|
111
131
|
v-if="configuration.streetNo"
|
@@ -121,11 +141,27 @@
|
|
121
141
|
/>
|
122
142
|
<!-- end cmd-form-element -->
|
123
143
|
|
124
|
-
|
144
|
+
<!-- begin cmd-form-element -->
|
145
|
+
<CmdFormElement
|
146
|
+
v-if="configuration.pobox"
|
147
|
+
element="input"
|
148
|
+
:type="configuration.pobox?.type || 'text'"
|
149
|
+
:labelText="getMessage('basic_form.labeltext.pobox')"
|
150
|
+
:placeholder="getMessage('basic_form.placeholder.pobox')"
|
151
|
+
:required="configuration.pobox?.required"
|
152
|
+
:name="configuration.pobox?.name || 'pobox'"
|
153
|
+
v-model="formData.pobox.value"
|
154
|
+
:status="formData.pobox.error ? 'error' : ''"
|
155
|
+
@validate="onValidate"
|
156
|
+
/>
|
157
|
+
<!-- end cmd-form-element -->
|
158
|
+
|
159
|
+
<div class="input-wrapper" :class="showCityBeforeZip ? 'order-city-zip' : 'order-zip-city'">
|
125
160
|
<!-- begin cmd-form-element -->
|
126
161
|
<CmdFormElement
|
127
162
|
v-if="configuration.zip"
|
128
163
|
element="input"
|
164
|
+
class="input-zip"
|
129
165
|
:type="configuration.zip?.type || 'number'"
|
130
166
|
:labelText="getMessage('basic_form.labeltext.zip')"
|
131
167
|
:placeholder="getMessage('basic_form.placeholder.zip')"
|
@@ -237,18 +273,13 @@ export default {
|
|
237
273
|
streetNo: {value: ''},
|
238
274
|
zip: {value: ''},
|
239
275
|
city: {value: ''},
|
276
|
+
pobox: {value: ''},
|
277
|
+
country: {value: ''},
|
240
278
|
additionalAddressInfo: {value: ''},
|
241
279
|
additionalText: {value: ''},
|
242
280
|
acceptPrivacy: {value: false}
|
243
281
|
},
|
244
|
-
|
245
|
-
icon: {
|
246
|
-
show: true,
|
247
|
-
iconClass: "icon-message-send",
|
248
|
-
tooltip: "Send message"
|
249
|
-
},
|
250
|
-
text: "Send"
|
251
|
-
}
|
282
|
+
cityBeforeZip: this.showCityBeforeZip
|
252
283
|
}
|
253
284
|
},
|
254
285
|
props: {
|
@@ -281,6 +312,24 @@ export default {
|
|
281
312
|
required: false,
|
282
313
|
type: "phone"
|
283
314
|
},
|
315
|
+
country: {
|
316
|
+
required: false,
|
317
|
+
element: "select",
|
318
|
+
selectOptions: [
|
319
|
+
{
|
320
|
+
text: "Please select...",
|
321
|
+
value: ""
|
322
|
+
},
|
323
|
+
{
|
324
|
+
text: "United States",
|
325
|
+
value: "us"
|
326
|
+
},
|
327
|
+
{
|
328
|
+
text: "Germany",
|
329
|
+
value: "de"
|
330
|
+
},
|
331
|
+
]
|
332
|
+
},
|
284
333
|
streetNo: {
|
285
334
|
required: false,
|
286
335
|
type: "text"
|
@@ -308,6 +357,13 @@ export default {
|
|
308
357
|
}
|
309
358
|
}
|
310
359
|
},
|
360
|
+
/**
|
361
|
+
* activate to show city first/left then zip next/right
|
362
|
+
*/
|
363
|
+
showCityBeforeZip: {
|
364
|
+
type: Boolean,
|
365
|
+
default: false
|
366
|
+
},
|
311
367
|
/**
|
312
368
|
* receiver e-mail-address the form is sent to
|
313
369
|
*/
|
@@ -329,6 +385,18 @@ export default {
|
|
329
385
|
primary: true
|
330
386
|
}
|
331
387
|
}
|
388
|
+
},
|
389
|
+
/**
|
390
|
+
* properties for CmdHeadline-component
|
391
|
+
*/
|
392
|
+
cmdHeadline: {
|
393
|
+
type: Object,
|
394
|
+
default() {
|
395
|
+
return {
|
396
|
+
headlineText: "Basic Form",
|
397
|
+
headlineLevel: 3
|
398
|
+
}
|
399
|
+
}
|
332
400
|
}
|
333
401
|
},
|
334
402
|
mounted() {
|
@@ -349,6 +417,13 @@ export default {
|
|
349
417
|
|
350
418
|
event.preventDefault();
|
351
419
|
},
|
420
|
+
onCountrySelect(event) {
|
421
|
+
alert("Country selected")
|
422
|
+
console.log("country selected", event)
|
423
|
+
if (event === 'us' || event === 'uk') {
|
424
|
+
this.cityBeforeZip = true
|
425
|
+
}
|
426
|
+
},
|
352
427
|
onValidate() {
|
353
428
|
this.formData = Object.assign({}, this.validator.validate(this.formData));
|
354
429
|
},
|
@@ -361,6 +436,11 @@ export default {
|
|
361
436
|
openDataPrivacy(url) {
|
362
437
|
openFancyBox({url})
|
363
438
|
}
|
439
|
+
},
|
440
|
+
watch: {
|
441
|
+
cityBeforeZip() {
|
442
|
+
this.cityBeforeZip = this.showCityBeforeZip
|
443
|
+
}
|
364
444
|
}
|
365
445
|
}
|
366
446
|
</script>
|
@@ -369,6 +449,14 @@ export default {
|
|
369
449
|
.cmd-pages-basic-form {
|
370
450
|
fieldset {
|
371
451
|
margin: 0;
|
452
|
+
|
453
|
+
.order-city-zip {
|
454
|
+
flex-direction: row-reverse;
|
455
|
+
}
|
456
|
+
|
457
|
+
.input-zip {
|
458
|
+
max-width: 30%;
|
459
|
+
}
|
372
460
|
}
|
373
461
|
}
|
374
462
|
</style>
|