comand-component-library 4.0.13 → 4.0.15

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 (16) hide show
  1. package/dist/comand-component-library.js +1551 -1521
  2. package/dist/comand-component-library.umd.cjs +3 -3
  3. package/dist/style.css +1 -1
  4. package/package.json +2 -2
  5. package/src/ComponentLibrary.vue +4 -0
  6. package/src/components/CmdFancyBox.vue +2 -1
  7. package/src/components/CmdForm.vue +16 -2
  8. package/src/components/CmdFormElement.vue +0 -7
  9. package/src/components/CmdMainNavigation.vue +3 -3
  10. package/src/components/CmdOpeningHours.vue +29 -26
  11. package/src/components/CmdPageFooter.vue +5 -7
  12. package/src/components/CmdPageHeader.vue +1 -1
  13. package/src/components/CmdSiteHeader.vue +14 -8
  14. package/src/pages/BasicForm.vue +23 -20
  15. package/src/pages/ContactInformation.vue +13 -4
  16. package/src/pages/PageOverview.vue +33 -2
package/src/components/CmdSiteHeader.vue CHANGED
@@ -150,12 +150,12 @@ export default {
150
150
  }
151
151
  }
152
152
 
153
- #main-navigation-wrapper {
153
+ .main-navigation-wrapper {
154
154
  grid-column: span var(--grid-columns);
155
155
  border-bottom: 0;
156
156
  }
157
157
 
158
- & + #main-navigation-wrapper {
158
+ & + .main-navigation-wrapper {
159
159
  nav {
160
160
  border-left: 0;
161
161
  border-right: 0;
@@ -163,7 +163,7 @@ export default {
163
163
  }
164
164
 
165
165
  /* use id to ensure high specificity */
166
- > .cmd-main-navigation#main-navigation-wrapper:last-child {
166
+ > .cmd-main-navigation.main-navigation-wrapper:last-child {
167
167
  border-bottom: 0;
168
168
  }
169
169
 
@@ -211,7 +211,7 @@ export default {
211
211
  grid-column: span var(--grid-small-span);
212
212
  }
213
213
 
214
- #main-navigation-wrapper {
214
+ .main-navigation-wrapper {
215
215
  grid-area: main-navigation;
216
216
  display: flex;
217
217
  align-items: center;
@@ -245,22 +245,28 @@ export default {
245
245
  header {
246
246
  grid-auto-rows: auto; /* items should be as large as their content */
247
247
 
248
- .cmd-main-navigation#main-navigation-wrapper {
248
+ .cmd-main-navigation.main-navigation-wrapper {
249
249
  &:not(.persist-on-mobile) {
250
250
  padding: 0;
251
251
  }
252
252
  }
253
+
254
+ /* main-navigation below logo */
255
+ & + .cmd-main-navigation.main-navigation-wrapper {
256
+ padding-bottom: var(--default-padding);
257
+ }
253
258
  }
254
259
 
260
+ /* main-navigation inline with logo */
255
261
  &.navigation-inline {
256
- .cmd-main-navigation#main-navigation-wrapper {
262
+ .cmd-main-navigation.main-navigation-wrapper {
257
263
  &:not(.persist-on-mobile) {
258
264
  padding-left: var(--default-padding);
259
265
  }
260
266
  }
261
267
 
262
268
  &.off-canvas-right {
263
- .cmd-main-navigation#main-navigation-wrapper {
269
+ .cmd-main-navigation.main-navigation-wrapper {
264
270
  &:not(.persist-on-mobile) {
265
271
  padding: 0;
266
272
  }
@@ -286,7 +292,7 @@ export default {
286
292
 
287
293
  &.navigation-inline {
288
294
  header {
289
- .cmd-company-logo, #main-navigation-wrapper {
295
+ .cmd-company-logo, .main-navigation-wrapper {
290
296
  grid-column: span calc(var(--grid-small-span) / 2);
291
297
  }
292
298
  }
package/src/pages/BasicForm.vue CHANGED
@@ -1,13 +1,12 @@
1
1
  <template>
2
2
  <div class="cmd-pages-basic-form">
3
3
  <!-- being CmdForm -->
4
- <CmdForm :action="formAction"
5
- @submit="onSubmit"
4
+ <CmdForm @submit="onSubmit"
6
5
  novalidate="novalidate"
7
6
  :textLegend="getMessage('basic_form.legend')"
8
7
  :submitButton="submitButton"
9
8
  >
10
- <div class="flex-container no-flex">
9
+ <div v-if="configuration.salutation" class="flex-container no-flex">
11
10
  <!-- begin cmd-form-element -->
12
11
  <CmdFormElement
13
12
  element="input"
@@ -39,7 +38,7 @@
39
38
  <slot name="top"></slot>
40
39
  <!-- end slot (top) -->
41
40
 
42
- <div class="flex-container">
41
+ <div v-if="configuration.lastName || configuration.firstName" class="flex-container">
43
42
  <!-- begin cmd-form-element -->
44
43
  <CmdFormElement
45
44
  v-if="configuration.lastName"
@@ -47,7 +46,6 @@
47
46
  :type="configuration.lastName?.type || 'text'"
48
47
  iconClass="icon-user-profile"
49
48
  :labelText="getMessage('basic_form.labeltext.last_name')"
50
- :tooltipText="formData.lastName.error ? formData.lastName.errorMessage : 'Type your surname!'"
51
49
  :required="configuration.lastName?.required"
52
50
  :name="configuration.lastName?.name || 'last-name'"
53
51
  :placeholder="getMessage('basic_form.placeholder.last_name')"
@@ -64,7 +62,6 @@
64
62
  :type="configuration.firstName?.type || 'text'"
65
63
  iconClass="icon-user-profile"
66
64
  :labelText="getMessage('basic_form.labeltext.first_name')"
67
- :tooltipText="formData.firstName.error ? formData.firstName.errorMessage : 'Type your first name!'"
68
65
  :placeholder="getMessage('basic_form.placeholder.first_name')"
69
66
  :required="configuration.firstName?.required"
70
67
  :name="configuration.firstName?.name || 'first-name'"
@@ -87,7 +84,6 @@
87
84
  :name="configuration.email?.name || 'email'"
88
85
  v-model="formData.email.value"
89
86
  :status="formData.email.error ? 'error' : ''"
90
- :tooltipText="formData.email.error ? formData.email.errorMessage : 'Type your email!'"
91
87
  @validate="onValidate"
92
88
  />
93
89
  <!-- end cmd-form-element -->
@@ -104,15 +100,15 @@
104
100
  :required="configuration.phone?.required"
105
101
  :name="configuration.phone?.name || 'phone'"
106
102
  :status="formData.phone.error ? 'error' : ''"
107
- :tooltipText="formData.phone.error ? formData.phone.errorMessage : 'Type your phone number!'"
108
103
  @validate="onValidate"
109
104
  />
110
105
  <!-- end cmd-form-element -->
111
106
  </div>
112
107
 
113
- <div class="flex-container">
108
+ <div v-if="configuration.streetNo || configuration.zip || configuration.city" class="flex-container">
114
109
  <!-- begin cmd-form-element -->
115
110
  <CmdFormElement
111
+ v-if="configuration.streetNo"
116
112
  element="input"
117
113
  :type="configuration.streetNo?.type || 'text'"
118
114
  :labelText="getMessage('basic_form.labeltext.street_no')"
@@ -121,7 +117,6 @@
121
117
  :name="configuration.streetNo?.name || 'street-no'"
122
118
  v-model="formData.streetNo.value"
123
119
  :status="formData.streetNo.error ? 'error' : ''"
124
- :tooltipText="formData.streetNo.error ? formData.streetNo.errorMessage : 'Type your street and number!'"
125
120
  @validate="onValidate"
126
121
  />
127
122
  <!-- end cmd-form-element -->
@@ -129,6 +124,7 @@
129
124
  <div class="input-wrapper">
130
125
  <!-- begin cmd-form-element -->
131
126
  <CmdFormElement
127
+ v-if="configuration.zip"
132
128
  element="input"
133
129
  :type="configuration.zip?.type || 'number'"
134
130
  :labelText="getMessage('basic_form.labeltext.zip')"
@@ -137,12 +133,13 @@
137
133
  :name="configuration.zip?.name || 'zip'"
138
134
  v-model="formData.zip.value"
139
135
  :status="formData.zip.error ? 'error' : ''"
140
- :tooltipText="formData.zip.error ? formData.zip.errorMessage : 'Type your zip/postal code!'"
141
136
  @validate="onValidate"
142
137
  />
143
138
  <!-- end cmd-form-element -->
139
+
144
140
  <!-- begin cmd-form-element -->
145
141
  <CmdFormElement
142
+ v-if="configuration.city"
146
143
  element="input"
147
144
  :type="configuration.city?.type || 'text'"
148
145
  :labelText="getMessage('basic_form.labeltext.city')"
@@ -151,7 +148,6 @@
151
148
  :name="configuration.city?.name || 'zip'"
152
149
  v-model="formData.city.value"
153
150
  :status="formData.city.error ? 'error' : ''"
154
- :tooltipText="formData.city.error ? formData.city.errorMessage : 'Type your city!'"
155
151
  @validate="onValidate"
156
152
  />
157
153
  <!-- end cmd-form-element -->
@@ -159,6 +155,7 @@
159
155
 
160
156
  <!-- begin cmd-form-element -->
161
157
  <CmdFormElement
158
+ v-if="configuration.additionalAddressInfo"
162
159
  element="input"
163
160
  :type="configuration.additionalAddressInfo?.type || 'text'"
164
161
  :labelText="getMessage('basic_form.labeltext.additional_address_info')"
@@ -167,7 +164,6 @@
167
164
  :name="configuration.additionalAddressInfo?.name || 'additional-address-info'"
168
165
  v-model="formData.additionalAddressInfo.value"
169
166
  :status="formData.additionalAddressInfo.error ? 'error' : ''"
170
- :tooltipText="formData.additionalAddressInfo.error ? formData.additionalAddressInfo.errorMessage : 'Type additional address information!'"
171
167
  @validate="onValidate"
172
168
  />
173
169
  <!-- end cmd-form-element -->
@@ -175,7 +171,8 @@
175
171
 
176
172
  <!-- begin cmd-form-element -->
177
173
  <CmdFormElement
178
- :type="configuration.additionalText?.type || 'textarea'"
174
+ v-if="configuration.additionalText"
175
+ :element="configuration.additionalText?.element || 'textarea'"
179
176
  :labelText="getMessage('basic_form.labeltext.additional_text')"
180
177
  :placeholder="getMessage('basic_form.placeholder.additional_text')"
181
178
  :required="configuration.additionalText?.required"
@@ -192,6 +189,7 @@
192
189
 
193
190
  <!-- begin cmd-form-element -->
194
191
  <CmdFormElement
192
+ v-if="configuration.acceptPrivacy"
195
193
  element="input"
196
194
  type="checkbox"
197
195
  :required="configuration.acceptPrivacy?.required"
@@ -254,6 +252,9 @@ export default {
254
252
  }
255
253
  },
256
254
  props: {
255
+ /**
256
+ * configuration for form-elements used in form
257
+ */
257
258
  configuration: {
258
259
  type: Object,
259
260
  default() {
@@ -298,7 +299,7 @@ export default {
298
299
  },
299
300
  additionalText: {
300
301
  required: false,
301
- type: "textarea"
302
+ element: "textarea"
302
303
  },
303
304
  acceptPrivacy: {
304
305
  required: true,
@@ -307,14 +308,16 @@ export default {
307
308
  }
308
309
  }
309
310
  },
311
+ /**
312
+ * receiver e-mail-address the form is sent to
313
+ */
310
314
  receiverEmailAddress: {
311
315
  type: String,
312
316
  default: ""
313
317
  },
314
- formAction: {
315
- type: String,
316
- required: true
317
- },
318
+ /**
319
+ * submit-button to submit all form-data
320
+ */
318
321
  submitButton: {
319
322
  type: Object,
320
323
  default() {
@@ -322,6 +325,7 @@ export default {
322
325
  iconClass: "icon-message-send",
323
326
  text: "Send mail",
324
327
  type: "submit",
328
+ position: "belowFieldset",
325
329
  primary: true
326
330
  }
327
331
  }
@@ -333,7 +337,6 @@ export default {
333
337
  openFancyBox({url: event.target.getAttribute('href')})
334
338
  })
335
339
  },
336
-
337
340
  methods: {
338
341
  onSubmit(event) {
339
342
  this.onValidate();
package/src/pages/ContactInformation.vue CHANGED
@@ -1,12 +1,12 @@
1
1
  <template>
2
- <!-- begin CmdBasicForm -->
2
+ <!-- begin basicForm -->
3
3
  <BasicForm v-if="contactFormOnly" v-bind="basicForm" />
4
- <!-- end CmdBasicForm -->
4
+ <!-- end basicForm -->
5
5
 
6
6
  <div v-else class="flex-container">
7
- <!-- begin CmdBasicForm -->
7
+ <!-- begin basicForm -->
8
8
  <BasicForm v-bind="basicForm" />
9
- <!-- end CmdBasicForm -->
9
+ <!-- end basicForm -->
10
10
 
11
11
  <!-- begin additional-columns -->
12
12
  <div class="flex-container vertical">
@@ -30,14 +30,23 @@
30
30
  export default {
31
31
  name: "ContactInformation",
32
32
  props: {
33
+ /**
34
+ * properties for basicForm-component
35
+ */
33
36
  basicForm: {
34
37
  type: Object,
35
38
  default: null
36
39
  },
40
+ /**
41
+ * properties for CmdAddressData-component
42
+ */
37
43
  cmdAddressData: {
38
44
  type: Object,
39
45
  default: null
40
46
  },
47
+ /**
48
+ * properties for CmdGoogleMaps-component
49
+ */
41
50
  cmdGoogleMaps: {
42
51
  type: Object,
43
52
  default: null
package/src/pages/PageOverview.vue CHANGED
@@ -14,7 +14,7 @@
14
14
  <span>Contact Information</span>
15
15
  </h2>
16
16
  <ContactInformation
17
- :cmdBasicForm="{}"
17
+ :basicForm="basicForm"
18
18
  :cmdAddressData="{}"
19
19
  :cmdGoogleMaps="{}">
20
20
  <template v-slot:additional-info>
@@ -68,7 +68,38 @@ export default {
68
68
  listOfDownloadsData,
69
69
  listOfSiteLinksData,
70
70
  basicForm: {
71
- formAction: "POST"
71
+ configuration: {
72
+ salutation: {
73
+ name: "salutation",
74
+ default: "m",
75
+ replaceInputType: true
76
+ },
77
+ lastName: {
78
+ name: "surname",
79
+ required: true,
80
+ type: "text"
81
+ },
82
+ firstName: {
83
+ required: false,
84
+ type: "text"
85
+ },
86
+ email: {
87
+ required: true,
88
+ type: "email"
89
+ },
90
+ phone: {
91
+ required: false,
92
+ type: "phone"
93
+ },
94
+ additionalText: {
95
+ required: false,
96
+ element: "textarea"
97
+ },
98
+ acceptPrivacy: {
99
+ required: true,
100
+ replaceInputType: true
101
+ }
102
+ }
72
103
  }
73
104
  }
74
105
  }