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.
@@ -14,7 +14,7 @@
14
14
  <!-- end pre-headline-text -->
15
15
 
16
16
  <span>
17
- <!-- being slot -->
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
- <!-- being slot -->
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
- <!-- being slot -->
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
- <!-- being slot -->
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 {
@@ -9,7 +9,7 @@
9
9
  />
10
10
  <!-- end CmdHeadline -->
11
11
 
12
- <!-- being form elements -->
12
+ <!-- begin form elements -->
13
13
  <div class="flex-container">
14
14
  <!-- begin CmdFormElement -->
15
15
  <CmdFormElement
@@ -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
- :class="['cmd-site-header site-header', {sticky: sticky, 'navigation-inline': navigationInline, 'off-canvas-right': cmdMainNavigation?.offcanvasPosition === 'right'}]"
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
- <!-- being CmdIcon -->
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.additional_address_info": "Additional address information",
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
  }
@@ -1,18 +1,23 @@
1
1
  <template>
2
2
  <div class="cmd-pages-basic-form">
3
- <!-- being CmdForm -->
4
- <CmdForm @submit="onSubmit"
5
- novalidate="novalidate"
6
- :textLegend="getMessage('basic_form.legend')"
7
- :submitButton="submitButton"
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.zip || configuration.city" class="flex-container">
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
- <div class="input-wrapper">
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
- nativeButton: {
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>