comand-component-library 4.0.7 → 4.0.8
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 +2016 -1892
- package/dist/comand-component-library.umd.cjs +3 -3
- package/dist/style.css +1 -1
- package/package.json +2 -2
- package/src/ComponentLibrary.vue +95 -17
- package/src/assets/data/list-of-links.json +13 -1
- package/src/assets/data/pages/list-of-downloads.json +56 -0
- package/src/assets/data/pages/list-of-site-links.json +78 -0
- package/src/assets/data/social-networks-page-by-json.json +2 -2
- package/src/assets/styles/component-library-global-styles.scss +12 -0
- package/src/componentSettingsDataAndControls.vue +27 -2
- package/src/components/CmdFakeSelect.vue +10 -21
- package/src/components/CmdFormElement.vue +5 -2
- package/src/components/CmdInputGroup.vue +1 -1
- package/src/components/CmdListOfLinks.vue +72 -12
- package/src/components/CmdListOfLinksItem.vue +14 -3
- package/src/components/CmdPageFooter.vue +83 -0
- package/src/components/CmdPagination.vue +4 -4
- package/src/components/CmdSidebar.vue +2 -0
- package/src/components/CmdSocialNetworks.vue +28 -20
- package/src/components/CmdSwitchLanguage.vue +3 -1
- package/src/components/CmdTextImageBlock.vue +44 -15
- package/src/components/CmdWidthLimitationWrapper.vue +27 -6
- package/src/components/EditComponentWrapper.vue +4 -0
- package/src/index.js +2 -1
- package/src/mixins/CmdFakeSelect/DefaultMessageProperties.js +0 -1
- package/src/mixins/pages/BasicForm/DefaultMessageProperties.js +28 -0
- package/src/pages/BasicForm.vue +341 -0
- package/src/pages/PageOverview.vue +53 -0
- package/src/pages/PageWrapper.vue +260 -0
- package/src/pages/SegmentedListsOfLinks.vue +34 -0
- /package/src/mixins/{CmdPager → CmdPagination}/DefaultMessageProperties.js +0 -0
@@ -95,8 +95,10 @@ export default {
|
|
95
95
|
a:not([class*="active"]) {
|
96
96
|
filter: contrast(.5);
|
97
97
|
|
98
|
-
&:hover, &:focus, &:active {
|
98
|
+
&:hover, &:focus-visible, &:active, &.active {
|
99
99
|
filter: none;
|
100
|
+
padding: 0; /* overwrite default settings from frontend-framework for .active */
|
101
|
+
background: none; /* overwrite default settings from frontend-framework for .active */
|
100
102
|
}
|
101
103
|
}
|
102
104
|
}
|
@@ -1,8 +1,8 @@
|
|
1
1
|
<template>
|
2
|
-
<div class="cmd-text-image-block flex-container
|
2
|
+
<div :class="['cmd-text-image-block flex-container', orientation]">
|
3
3
|
<!-- begin cmdHeadline -->
|
4
4
|
<CmdHeadline
|
5
|
-
v-if="(cmdHeadline?.headlineText || editModeContext) && headlinePosition === 'aboveImage'"
|
5
|
+
v-if="(cmdHeadline?.headlineText || editModeContext) && (headlinePosition === 'aboveImage' && orientation === 'vertical')"
|
6
6
|
v-bind="cmdHeadline"
|
7
7
|
/>
|
8
8
|
<!-- end cmdHeadline -->
|
@@ -16,14 +16,19 @@
|
|
16
16
|
/>
|
17
17
|
<!-- end cmdImage -->
|
18
18
|
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
19
|
+
<div class="flex-container vertical">
|
20
|
+
<!-- begin cmdHeadline -->
|
21
|
+
<CmdHeadline
|
22
|
+
v-if="(cmdHeadline?.headlineText || editModeContext) && (headlinePosition === 'belowImage' || orientation === 'horizontal')"
|
23
|
+
v-bind="cmdHeadline"
|
24
|
+
/>
|
25
|
+
<!-- end cmdHeadline -->
|
26
|
+
|
27
|
+
<!-- begin continuous text -->
|
28
|
+
<div v-if="htmlContent" v-html="htmlContent" :class="textAlign"></div>
|
29
|
+
<!-- end continuous text -->
|
30
|
+
</div>
|
25
31
|
|
26
|
-
<!-- begin continuous text -->
|
27
32
|
<!-- begin edit-mode -->
|
28
33
|
<EditComponentWrapper
|
29
34
|
v-if="editModeContext"
|
@@ -47,14 +52,14 @@
|
|
47
52
|
</template>
|
48
53
|
</EditComponentWrapper>
|
49
54
|
<!-- end edit-mode -->
|
50
|
-
|
51
|
-
<div v-else-if="htmlContent" v-html="htmlContent" :class="textAlign"></div>
|
52
|
-
<!-- end continuous text -->
|
53
55
|
</div>
|
54
56
|
</template>
|
55
57
|
|
56
58
|
<script>
|
59
|
+
// import mixins (editMode only)
|
57
60
|
import EditMode from "../mixins/EditMode.vue"
|
61
|
+
|
62
|
+
// import utils (editMode only)
|
58
63
|
import {updateHandlerProvider} from "../utils/editmode.js"
|
59
64
|
|
60
65
|
export default {
|
@@ -66,8 +71,18 @@ export default {
|
|
66
71
|
}
|
67
72
|
},
|
68
73
|
props: {
|
69
|
-
|
70
|
-
|
74
|
+
/**
|
75
|
+
* orientation for entire component
|
76
|
+
*
|
77
|
+
* @allowedValues: "vertical", "horizontal"
|
78
|
+
*/
|
79
|
+
orientation: {
|
80
|
+
type: String,
|
81
|
+
default: "vertical",
|
82
|
+
validator(value) {
|
83
|
+
return value === "vertical" ||
|
84
|
+
value === "horizontal"
|
85
|
+
}
|
71
86
|
},
|
72
87
|
/**
|
73
88
|
* content for continuous text (can contain html-tags)
|
@@ -104,7 +119,7 @@ export default {
|
|
104
119
|
}
|
105
120
|
},
|
106
121
|
/**
|
107
|
-
*
|
122
|
+
* property for CmdHeadline-component
|
108
123
|
*/
|
109
124
|
cmdHeadline: {
|
110
125
|
type: Object,
|
@@ -116,6 +131,12 @@ export default {
|
|
116
131
|
cmdImage: {
|
117
132
|
type: Object,
|
118
133
|
required: false
|
134
|
+
},
|
135
|
+
/**
|
136
|
+
* editMode only
|
137
|
+
*/
|
138
|
+
editModeContextData: {
|
139
|
+
type: Object
|
119
140
|
}
|
120
141
|
},
|
121
142
|
computed: {
|
@@ -163,7 +184,15 @@ export default {
|
|
163
184
|
</script>
|
164
185
|
|
165
186
|
<style>
|
187
|
+
/* begin cmd-text-image-block ---------------------------------------------------------------------------------------- */
|
188
|
+
.cmd-text-image-block {
|
189
|
+
> .flex-container {
|
190
|
+
gap: calc(var(--default-gap) / 2);
|
191
|
+
}
|
192
|
+
}
|
193
|
+
|
166
194
|
.edit-mode .cmd-text-image-block textarea {
|
167
195
|
width: 100%;
|
168
196
|
}
|
197
|
+
/* end cmd-text-image-block ---------------------------------------------------------------------------------------- */
|
169
198
|
</style>
|
@@ -1,7 +1,7 @@
|
|
1
1
|
<template>
|
2
2
|
<div class="cmd-width-limitation-wrapper" :class="{'sticky': sticky}">
|
3
3
|
<!-- begin slot-content in section -->
|
4
|
-
<section v-if="
|
4
|
+
<section v-if="useInnerSection" :class="setInnerClass" :id="anchorId">
|
5
5
|
<!-- begin cmd-headline -->
|
6
6
|
<CmdHeadline
|
7
7
|
v-if="cmdHeadline"
|
@@ -11,9 +11,19 @@
|
|
11
11
|
/>
|
12
12
|
<!-- end cmd-headline -->
|
13
13
|
|
14
|
-
<!-- begin slot-content -->
|
15
|
-
<slot></slot>
|
16
|
-
<!-- end slot-content -->
|
14
|
+
<!-- begin slot-content (one column only) -->
|
15
|
+
<slot v-if="numberOfColumns === 1" ></slot>
|
16
|
+
<!-- end slot-content (one column only) -->
|
17
|
+
|
18
|
+
<!-- begin grid-/flex-container to wrap multiple columns/items -->
|
19
|
+
<div v-else :class="useGrid ? 'grid-container-create-columns' : 'flex-container'">
|
20
|
+
<div v-for="index in numberOfColumns" :key="`i${index}`" :class="useGrid ? 'grid-item' : 'flex-item'">
|
21
|
+
<!-- begin slot-content (multiple columns only) -->
|
22
|
+
<slot></slot>
|
23
|
+
<!-- end slot-content (multiple columns only) -->
|
24
|
+
</div>
|
25
|
+
</div>
|
26
|
+
<!-- end grid-/flex-container to wrap multiple columns/items -->
|
17
27
|
</section>
|
18
28
|
<!-- end slot-content in section -->
|
19
29
|
|
@@ -32,6 +42,17 @@
|
|
32
42
|
export default {
|
33
43
|
name: "CmdWidthLimitationWrapper",
|
34
44
|
props: {
|
45
|
+
numberOfColumns: {
|
46
|
+
type: Number,
|
47
|
+
default: 1,
|
48
|
+
validator(value) {
|
49
|
+
return value >= 0
|
50
|
+
}
|
51
|
+
},
|
52
|
+
useGrid: {
|
53
|
+
type: Boolean,
|
54
|
+
default: false
|
55
|
+
},
|
35
56
|
/**
|
36
57
|
* set a html-tag as inner tag
|
37
58
|
*
|
@@ -41,7 +62,7 @@ export default {
|
|
41
62
|
type: String,
|
42
63
|
default: "section",
|
43
64
|
validator(value) {
|
44
|
-
return value
|
65
|
+
return value
|
45
66
|
}
|
46
67
|
},
|
47
68
|
/**
|
@@ -50,7 +71,7 @@ export default {
|
|
50
71
|
* (if deactivated, content will be directly placed inside cmd-width-limitation-wrapper)
|
51
72
|
*
|
52
73
|
*/
|
53
|
-
|
74
|
+
useInnerSection: {
|
54
75
|
type: Boolean,
|
55
76
|
default: true
|
56
77
|
},
|
package/src/index.js
CHANGED
@@ -26,7 +26,8 @@ export { default as CmdLoginForm } from '@/components/CmdLoginForm.vue'
|
|
26
26
|
export { default as CmdMainNavigation } from '@/components/CmdMainNavigation.vue'
|
27
27
|
export { default as CmdMultistepFormProgressBar } from '@/components/CmdMultistepFormProgressBar.vue'
|
28
28
|
export { default as CmdOpeningHours } from '@/components/CmdOpeningHours.vue'
|
29
|
-
export { default as
|
29
|
+
export { default as CmdPagination } from '@/components/CmdPagination.vue'
|
30
|
+
export { default as CmdPageFooter } from '@/components/CmdPageFooter.vue'
|
30
31
|
export { default as CmdProgressBar } from '@/components/CmdProgressBar.vue'
|
31
32
|
export { default as CmdSidebar } from '@/components/CmdSidebar.vue'
|
32
33
|
export { default as CmdSiteFooter } from '@/components/CmdSiteFooter.vue'
|
@@ -0,0 +1,28 @@
|
|
1
|
+
export default {
|
2
|
+
data() {
|
3
|
+
return {
|
4
|
+
defaultMessageProperties: {
|
5
|
+
"basic_form.legend": "Basic Form",
|
6
|
+
"basic_form.labeltext.salutation_male": "Mr.",
|
7
|
+
"basic_form.labeltext.salutation_female": "Mrs.",
|
8
|
+
"basic_form.labeltext.last_name": "Last name:",
|
9
|
+
"basic_form.placeholder.last_name": "Last name:",
|
10
|
+
"basic_form.labeltext.first_name": "First name:",
|
11
|
+
"basic_form.placeholder.first_name": "First name:",
|
12
|
+
"basic_form.labeltext.email": "Email:",
|
13
|
+
"basic_form.placeholder.email": "Email:",
|
14
|
+
"basic_form.labeltext.phone": "Phone:",
|
15
|
+
"basic_form.placeholder.phone": "Phone:",
|
16
|
+
"basic_form.labeltext.street_no": "Street/No.:",
|
17
|
+
"basic_form.placeholder.street_no": "Street/No.:",
|
18
|
+
"basic_form.labeltext.zip": "Zip:",
|
19
|
+
"basic_form.placeholder.zip": "Zip:",
|
20
|
+
"basic_form.labeltext.city": "City:",
|
21
|
+
"basic_form.placeholder.city": "City:",
|
22
|
+
"basic_form.labeltext.additional_address_info": "Additional address information",
|
23
|
+
"basic_form.placeholder.additional_address_info": "Additional address information",
|
24
|
+
"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>."
|
25
|
+
}
|
26
|
+
}
|
27
|
+
}
|
28
|
+
}
|
@@ -0,0 +1,341 @@
|
|
1
|
+
<template>
|
2
|
+
<div class="cmd-pages-basic-form">
|
3
|
+
<CmdForm :action="formAction"
|
4
|
+
@submit="onSubmit"
|
5
|
+
novalidate="novalidate"
|
6
|
+
:textLegend="getMessage('basic_form.legend')"
|
7
|
+
:submitButton="submitButton"
|
8
|
+
>
|
9
|
+
<div class="flex-container no-flex">
|
10
|
+
<!-- begin cmd-form-element -->
|
11
|
+
<CmdFormElement
|
12
|
+
element="input"
|
13
|
+
type="radio"
|
14
|
+
:labelText="getMessage('basic_form.labeltext.salutation_male')"
|
15
|
+
name="salutation"
|
16
|
+
inputValue="M"
|
17
|
+
:replace-input-type="true"
|
18
|
+
v-model="formData.salutation"
|
19
|
+
@validate="onValidate"
|
20
|
+
/>
|
21
|
+
<!-- end cmd-form-element -->
|
22
|
+
|
23
|
+
<!-- begin cmd-form-element -->
|
24
|
+
<CmdFormElement
|
25
|
+
element="input"
|
26
|
+
type="radio"
|
27
|
+
:labelText="getMessage('basic_form.labeltext.salutation_female')"
|
28
|
+
name="salutation"
|
29
|
+
:replace-input-type="true"
|
30
|
+
v-model="formData.salutation"
|
31
|
+
@validate="onValidate"
|
32
|
+
/>
|
33
|
+
<!-- end cmd-form-element -->
|
34
|
+
</div>
|
35
|
+
<div class="flex-container">
|
36
|
+
<!-- begin cmd-form-element -->
|
37
|
+
<CmdFormElement
|
38
|
+
element="input"
|
39
|
+
type="text"
|
40
|
+
iconClass="icon-user-profile"
|
41
|
+
:labelText="getMessage('basic_form.labeltext.last_name')"
|
42
|
+
:tooltipText="formData.last_name.error ? formData.last_name.errorMessage : 'Type your surname!'"
|
43
|
+
required="required"
|
44
|
+
:placeholder="getMessage('basic_form.placeholder.last_name')"
|
45
|
+
v-model="formData.last_name.value"
|
46
|
+
:status="formData.last_name.error ? 'error' : ''"
|
47
|
+
@validate="onValidate"
|
48
|
+
/>
|
49
|
+
<!-- end cmd-form-element -->
|
50
|
+
|
51
|
+
<!-- begin cmd-form-element -->
|
52
|
+
<CmdFormElement
|
53
|
+
element="input"
|
54
|
+
type="text"
|
55
|
+
iconClass="icon-user-profile"
|
56
|
+
:labelText="getMessage('basic_form.labeltext.first_name')"
|
57
|
+
:tooltipText="formData.first_name.error ? formData.first_name.errorMessage : 'Type your first name!'"
|
58
|
+
:placeholder="getMessage('basic_form.placeholder.first_name')"
|
59
|
+
v-model="formData.first_name.value"
|
60
|
+
:status="formData.first_name.error ? 'error' : ''"
|
61
|
+
@validate="onValidate"
|
62
|
+
/>
|
63
|
+
<!-- end cmd-form-element -->
|
64
|
+
</div>
|
65
|
+
<div class="flex-container">
|
66
|
+
<!-- begin cmd-form-element -->
|
67
|
+
<CmdFormElement
|
68
|
+
element="input"
|
69
|
+
type="email"
|
70
|
+
iconClass="icon-mail"
|
71
|
+
:labelText="getMessage('basic_form.labeltext.email')"
|
72
|
+
:placeholder="getMessage('basic_form.placeholder.email')"
|
73
|
+
required="required"
|
74
|
+
v-model="formData.email.value"
|
75
|
+
:status="formData.email.error ? 'error' : ''"
|
76
|
+
:tooltipText="formData.email.error ? formData.email.errorMessage : 'Type your email!'"
|
77
|
+
@validate="onValidate"
|
78
|
+
/>
|
79
|
+
<!-- end cmd-form-element -->
|
80
|
+
|
81
|
+
<!-- begin cmd-form-element -->
|
82
|
+
<CmdFormElement
|
83
|
+
element="input"
|
84
|
+
type="phone"
|
85
|
+
iconClass="icon-phone"
|
86
|
+
:labelText="getMessage('basic_form.labeltext.phone')"
|
87
|
+
:placeholder="getMessage('basic_form.placeholder.phone')"
|
88
|
+
v-model="formData.phone.value"
|
89
|
+
:status="formData.phone.error ? 'error' : ''"
|
90
|
+
:tooltipText="formData.phone.error ? formData.phone.errorMessage : 'Type your phone number!'"
|
91
|
+
@validate="onValidate"
|
92
|
+
/>
|
93
|
+
<!-- end cmd-form-element -->
|
94
|
+
</div>
|
95
|
+
|
96
|
+
<div class="flex-container">
|
97
|
+
<!-- begin cmd-form-element -->
|
98
|
+
<CmdFormElement
|
99
|
+
element="input"
|
100
|
+
type="text"
|
101
|
+
:labelText="getMessage('basic_form.labeltext.street_no')"
|
102
|
+
:placeholder="getMessage('basic_form.placeholder.street_no')"
|
103
|
+
required="required"
|
104
|
+
v-model="formData.street_no.value"
|
105
|
+
:status="formData.street_no.error ? 'error' : ''"
|
106
|
+
:tooltipText="formData.street_no.error ? formData.street_no.errorMessage : 'Type your street and number!'"
|
107
|
+
@validate="onValidate"
|
108
|
+
/>
|
109
|
+
<!-- end cmd-form-element -->
|
110
|
+
|
111
|
+
<div class="input-wrapper">
|
112
|
+
<!-- begin cmd-form-element -->
|
113
|
+
<CmdFormElement
|
114
|
+
element="input"
|
115
|
+
type="number"
|
116
|
+
:labelText="getMessage('basic_form.labeltext.zip')"
|
117
|
+
:placeholder="getMessage('basic_form.placeholder.zip')"
|
118
|
+
v-model="formData.zip.value"
|
119
|
+
:status="formData.zip.error ? 'error' : ''"
|
120
|
+
:tooltipText="formData.zip.error ? formData.zip.errorMessage : 'Type your zip/postal code!'"
|
121
|
+
@validate="onValidate"
|
122
|
+
/>
|
123
|
+
<!-- end cmd-form-element -->
|
124
|
+
<!-- begin cmd-form-element -->
|
125
|
+
<CmdFormElement
|
126
|
+
element="input"
|
127
|
+
type="text"
|
128
|
+
:labelText="getMessage('basic_form.labeltext.city')"
|
129
|
+
:placeholder="getMessage('basic_form.placeholder.city')"
|
130
|
+
v-model="formData.city.value"
|
131
|
+
:status="formData.city.error ? 'error' : ''"
|
132
|
+
:tooltipText="formData.city.error ? formData.city.errorMessage : 'Type your city!'"
|
133
|
+
@validate="onValidate"
|
134
|
+
/>
|
135
|
+
<!-- end cmd-form-element -->
|
136
|
+
</div>
|
137
|
+
|
138
|
+
<!-- begin cmd-form-element -->
|
139
|
+
<CmdFormElement
|
140
|
+
element="input"
|
141
|
+
type="text"
|
142
|
+
:labelText="getMessage('basic_form.labeltext.additional_address_info')"
|
143
|
+
:placeholder="getMessage('basic_form.placeholder.additional_address_info')"
|
144
|
+
required="required"
|
145
|
+
v-model="formData.additional_address_info.value"
|
146
|
+
:status="formData.additional_address_info.error ? 'error' : ''"
|
147
|
+
:tooltipText="formData.additional_address_info.error ? formData.additional_address_info.errorMessage : 'Type additional address information!'"
|
148
|
+
@validate="onValidate"
|
149
|
+
/>
|
150
|
+
<!-- end cmd-form-element -->
|
151
|
+
</div>
|
152
|
+
|
153
|
+
<!-- begin cmd-form-element -->
|
154
|
+
<CmdFormElement
|
155
|
+
element="input"
|
156
|
+
type="checkbox"
|
157
|
+
:required="true"
|
158
|
+
v-model="formData.privacy.value"
|
159
|
+
:status="formData.privacy.error ? 'error' : ''"
|
160
|
+
@validate="onValidate">
|
161
|
+
<template v-slot:labeltext>
|
162
|
+
<span ref="dataPrivacy" v-html="getMessage('basic_form.labeltext.data_privacy')"></span>
|
163
|
+
</template>
|
164
|
+
</CmdFormElement>
|
165
|
+
<!-- end cmd-form-element -->
|
166
|
+
</CmdForm>
|
167
|
+
</div>
|
168
|
+
</template>
|
169
|
+
|
170
|
+
<script>
|
171
|
+
// import mixins
|
172
|
+
// import mixins
|
173
|
+
import I18n from "../mixins/I18n"
|
174
|
+
import DefaultMessageProperties from "../mixins/pages/BasicForm/DefaultMessageProperties"
|
175
|
+
import FieldValidation from "../mixins/FieldValidation"
|
176
|
+
|
177
|
+
export default {
|
178
|
+
mixins: [
|
179
|
+
I18n,
|
180
|
+
DefaultMessageProperties,
|
181
|
+
FieldValidation
|
182
|
+
],
|
183
|
+
inject: {
|
184
|
+
editModeContext: {
|
185
|
+
default: null
|
186
|
+
}
|
187
|
+
},
|
188
|
+
data() {
|
189
|
+
return {
|
190
|
+
//validator: new ContactFormValidator(name => this.label(name)),
|
191
|
+
formData: {
|
192
|
+
salutation: 'M',
|
193
|
+
last_name: {value: ''},
|
194
|
+
first_name: {value: ''},
|
195
|
+
email: {value: ''},
|
196
|
+
phone: {value: ''},
|
197
|
+
street_no: {value: ''},
|
198
|
+
zip: {value: ''},
|
199
|
+
city: {value: ''},
|
200
|
+
additional_address_info: {value: ''},
|
201
|
+
privacy: {value: false}
|
202
|
+
},
|
203
|
+
nativeButton: {
|
204
|
+
icon: {
|
205
|
+
show: true,
|
206
|
+
iconClass: "icon-message-send",
|
207
|
+
tooltip: "Send message"
|
208
|
+
},
|
209
|
+
text: "Send"
|
210
|
+
}
|
211
|
+
}
|
212
|
+
},
|
213
|
+
props: {
|
214
|
+
hiddenFormElements: {
|
215
|
+
|
216
|
+
},
|
217
|
+
receiverEmailAddress: {
|
218
|
+
type: String,
|
219
|
+
default: ""
|
220
|
+
},
|
221
|
+
formAction: {
|
222
|
+
type: String,
|
223
|
+
required: true
|
224
|
+
},
|
225
|
+
submitButton: {
|
226
|
+
type: Object,
|
227
|
+
default() {
|
228
|
+
return {
|
229
|
+
iconClass: "icon-message-send",
|
230
|
+
text: "Send mail",
|
231
|
+
type: "submit",
|
232
|
+
primary: true
|
233
|
+
}
|
234
|
+
}
|
235
|
+
}
|
236
|
+
},
|
237
|
+
/*
|
238
|
+
mounted() {
|
239
|
+
usePiniaStore().$subscribe(() => {
|
240
|
+
this.$nextTick(() => {
|
241
|
+
this.$refs.dataPrivacy?.querySelector('.fancybox')?.addEventListener('click', event => {
|
242
|
+
event.preventDefault()
|
243
|
+
openFancyBox({url: event.target.getAttribute('href')})
|
244
|
+
})
|
245
|
+
})
|
246
|
+
})
|
247
|
+
},
|
248
|
+
*/
|
249
|
+
methods: {
|
250
|
+
onSubmit(event) {
|
251
|
+
this.onValidate();
|
252
|
+
|
253
|
+
this.formData = Object.assign({}, this.validator.validatePrivacy(this.formData));
|
254
|
+
if (this.formData.error) {
|
255
|
+
event.preventDefault();
|
256
|
+
return;
|
257
|
+
}
|
258
|
+
|
259
|
+
alert(`
|
260
|
+
Form submit:
|
261
|
+
salutation: ${this.formData.salutation}
|
262
|
+
last_name: ${this.formData.last_name.value}
|
263
|
+
first_name: ${this.formData.first_name.value}
|
264
|
+
email: ${this.formData.email.value}
|
265
|
+
phone: ${this.formData.phone.value}
|
266
|
+
street_no: ${this.formData.street_no.value}
|
267
|
+
zip: ${this.formData.zip.value}
|
268
|
+
city: ${this.formData.city.value}
|
269
|
+
additional_address_info: ${this.formData.additional_address_info.value}
|
270
|
+
privacy: ${this.formData.privacy.value}
|
271
|
+
`);
|
272
|
+
|
273
|
+
event.preventDefault();
|
274
|
+
},
|
275
|
+
onValidate() {
|
276
|
+
this.formData = Object.assign({}, this.validator.validate(this.formData));
|
277
|
+
},
|
278
|
+
executeLink(link, event) {
|
279
|
+
if (link.fancybox) {
|
280
|
+
event.preventDefault()
|
281
|
+
openFancyBox({url: link})
|
282
|
+
}
|
283
|
+
},
|
284
|
+
// onPersist(data) {
|
285
|
+
// return {
|
286
|
+
// editModeContextData: {
|
287
|
+
// ...(this.editModeContextData || {})
|
288
|
+
// },
|
289
|
+
// update(props) {
|
290
|
+
// props.cmdHeadline = {
|
291
|
+
// ...(props.cmdHeadline || {}),
|
292
|
+
// }
|
293
|
+
// props.cmdHeadline.headlineText = data[0].headlineText
|
294
|
+
// }
|
295
|
+
// }
|
296
|
+
// },
|
297
|
+
// onDelete() {
|
298
|
+
// console.log("ContactForm.onDelete()")
|
299
|
+
// return {
|
300
|
+
// editModeContextData: {
|
301
|
+
// ...(this.editModeContextData || {})
|
302
|
+
// }
|
303
|
+
// }
|
304
|
+
// }
|
305
|
+
// openDataPrivacy(url) {
|
306
|
+
// openFancyBox({url})
|
307
|
+
// }
|
308
|
+
}
|
309
|
+
}
|
310
|
+
|
311
|
+
// @Watch('$store.state.currentLanguage')
|
312
|
+
// private languageChanged(): void {
|
313
|
+
// this.formData = Object.assign({}, {
|
314
|
+
// salutation: 'M',
|
315
|
+
// surname: {value: ''},
|
316
|
+
// email: {value: ''},
|
317
|
+
// message: {value: ''},
|
318
|
+
// privacy: {value: false}
|
319
|
+
// } as ContactFormData);
|
320
|
+
// this.labelsChanged()
|
321
|
+
// }
|
322
|
+
//
|
323
|
+
// @Watch('$store.state.labels')
|
324
|
+
// private labelsChanged(): void {
|
325
|
+
// this.$nextTick(() => {
|
326
|
+
// this.$el.querySelectorAll('.fancybox').forEach(link => link.addEventListener('click', e => {
|
327
|
+
// e.preventDefault()
|
328
|
+
// this.openDataPrivacy(link.getAttribute('href'))
|
329
|
+
// }))
|
330
|
+
// })
|
331
|
+
// }
|
332
|
+
</script>
|
333
|
+
|
334
|
+
<style>
|
335
|
+
.cmd-pages-basic-form {
|
336
|
+
fieldset {
|
337
|
+
margin: 0;
|
338
|
+
}
|
339
|
+
}
|
340
|
+
</style>
|
341
|
+
|
@@ -0,0 +1,53 @@
|
|
1
|
+
<template>
|
2
|
+
<!-- begin basic-form ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
3
|
+
<CmdWidthLimitationWrapper>
|
4
|
+
<h2 class="headline-demopage" id="section-basic-form">
|
5
|
+
<span>Basic Form</span>
|
6
|
+
</h2>
|
7
|
+
<BasicForm :formAction="basicForm.formAction" />
|
8
|
+
</CmdWidthLimitationWrapper>
|
9
|
+
<!-- end basic-form ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
10
|
+
|
11
|
+
<!-- begin segmented-lists-of-links ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
12
|
+
<CmdWidthLimitationWrapper>
|
13
|
+
<h2 class="headline-demopage" id="section-segmented-lists-of-links-downloads">
|
14
|
+
<span>Segmented Lists of links</span>
|
15
|
+
</h2>
|
16
|
+
<h3>Downloads</h3>
|
17
|
+
<SegmentedListsOfLinks :segments="listOfDownloadsData" />
|
18
|
+
<hr />
|
19
|
+
<h3>SiteMap</h3>
|
20
|
+
<SegmentedListsOfLinks :segments="listOfSiteLinksData" />
|
21
|
+
</CmdWidthLimitationWrapper>
|
22
|
+
<!-- end segmented-lists-of-links ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
23
|
+
</template>
|
24
|
+
|
25
|
+
<script>
|
26
|
+
// import page-templates
|
27
|
+
import BasicForm from "@/pages/BasicForm.vue"
|
28
|
+
import SegmentedListsOfLinks from "@/pages/SegmentedListsOfLinks.vue"
|
29
|
+
|
30
|
+
// import example data
|
31
|
+
import listOfDownloadsData from "@/assets/data/pages/list-of-downloads.json"
|
32
|
+
import listOfSiteLinksData from "@/assets/data/pages/list-of-site-links.json"
|
33
|
+
export default {
|
34
|
+
name: "PageOverview",
|
35
|
+
components: {
|
36
|
+
BasicForm,
|
37
|
+
SegmentedListsOfLinks
|
38
|
+
},
|
39
|
+
data() {
|
40
|
+
return {
|
41
|
+
listOfDownloadsData,
|
42
|
+
listOfSiteLinksData,
|
43
|
+
basicForm: {
|
44
|
+
formAction: "POST"
|
45
|
+
}
|
46
|
+
}
|
47
|
+
}
|
48
|
+
}
|
49
|
+
</script>
|
50
|
+
|
51
|
+
<style>
|
52
|
+
|
53
|
+
</style>
|