comand-component-library 4.0.7 → 4.0.9

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 (34) hide show
  1. package/dist/comand-component-library.js +2682 -2376
  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 +95 -17
  6. package/src/assets/data/list-of-links.json +13 -1
  7. package/src/assets/data/pages/list-of-downloads.json +56 -0
  8. package/src/assets/data/pages/list-of-site-links.json +78 -0
  9. package/src/assets/data/social-networks-page-by-json.json +2 -2
  10. package/src/assets/styles/component-library-global-styles.scss +19 -7
  11. package/src/componentSettingsDataAndControls.vue +27 -2
  12. package/src/components/CmdFakeSelect.vue +10 -21
  13. package/src/components/CmdFormElement.vue +5 -2
  14. package/src/components/CmdInputGroup.vue +1 -1
  15. package/src/components/CmdListOfLinks.vue +72 -12
  16. package/src/components/CmdListOfLinksItem.vue +14 -3
  17. package/src/components/CmdPageFooter.vue +83 -0
  18. package/src/components/CmdPagination.vue +4 -4
  19. package/src/components/CmdSidebar.vue +2 -0
  20. package/src/components/CmdSocialNetworks.vue +39 -27
  21. package/src/components/CmdSwitchLanguage.vue +3 -1
  22. package/src/components/CmdTextImageBlock.vue +44 -15
  23. package/src/components/CmdWidthLimitationWrapper.vue +27 -6
  24. package/src/components/EditComponentWrapper.vue +4 -0
  25. package/src/index.js +3 -1
  26. package/src/main.js +1 -1
  27. package/src/mixins/CmdFakeSelect/DefaultMessageProperties.js +0 -1
  28. package/src/mixins/pages/BasicForm/DefaultMessageProperties.js +28 -0
  29. package/src/pages/BasicForm.vue +341 -0
  30. package/src/pages/PageOverview.vue +53 -0
  31. package/src/pages/PageWrapper.vue +260 -0
  32. package/src/pages/SegmentedListsOfLinks.vue +34 -0
  33. /package/src/assets/styles/{transitions.scss → transitions.css} +0 -0
  34. /package/src/mixins/{CmdPager → CmdPagination}/DefaultMessageProperties.js +0 -0
@@ -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>
@@ -0,0 +1,260 @@
1
+ <template>
2
+ <a id="anchor-back-to-top"></a>
3
+ <div :class="{'overflow-hidden': offCanvasOpen}" id="page-wrapper"
4
+ :style="{'scroll-padding-top': heightSiteHeader + 'px'}">
5
+ <!-- begin cmd-site-header -->
6
+ <CmdSiteHeader
7
+ v-if="cmdSiteHeader"
8
+ :cmdMainNavigation="{navigationEntries: mainNavigationEntries}"
9
+ :closeOffcanvas="{ iconClass: 'icon-cancel', text: 'Close navigation', showText: true}"
10
+ :navigationInline="cmdSiteHeader.navigationInline"
11
+ @offcanvas="offcanvasToggled"
12
+ >
13
+ <template v-slot:top-header>
14
+ <!-- begin cmd-list-of-links (for top-header-navigation) -->
15
+ <CmdListOfLinks
16
+ v-if="topHeaderNavigationEntries"
17
+ :links="topHeaderNavigationEntries"
18
+ orientation="horizontal"
19
+ align="right"
20
+ />
21
+ <!-- end cmd-list-of-links (for top-header-navigation) -->
22
+ </template>
23
+ <template v-slot:logo>
24
+ <!-- begin cmd-company-logo -->
25
+ <CmdCompanyLogo
26
+ v-if="cmdCompanyLogo.pathDefaultLogo"
27
+ :altText="cmdCompanyLogo.altText"
28
+ :pathDefaultLogo="cmdCompanyLogo.pathDefaultLogo"
29
+ :pathDarkmodeLogo="cmdCompanyLogo.pathDarkmodeLogo"
30
+ />
31
+ <!-- end cmd-company-logo -->
32
+ </template>
33
+ </CmdSiteHeader>
34
+ <!-- end cmd-site-header -->
35
+
36
+ <!-- begin main-content -->
37
+ <main id="content">
38
+ <div class="inner-content-wrapper">
39
+ <!-- begin left column -->
40
+ <aside v-if="mainContent.leftColumn.show" class="left-column">
41
+ <!-- begin slot left column -->
42
+ <slot name="left-column"></slot>
43
+ <!-- end slot left column -->
44
+ </aside>
45
+ <!-- end left column -->
46
+
47
+ <!-- begin center/main column -->
48
+ <div class="main-content-wrapper">
49
+ <!-- begin CmdBreadcrumbs -->
50
+ <CmdBreadcrumbs v-if="cmdBreadcrumbs" v-bind="cmdBreadcrumbs"/>
51
+ <!-- end CmdBreadcrumbs -->
52
+
53
+ <!-- begin CmdHeadline -->
54
+ <CmdHeadline v-if="cmdHeadline" v-bind="cmdHeadline"/>
55
+ <!-- end CmdHeadline -->
56
+
57
+ <slot></slot>
58
+
59
+ <!-- begin CmdSocialNetworks -->
60
+ <CmdSocialNetworks v-if="cmdSocialNetworks" v-bind="cmdSocialNetworks"/>
61
+ <!-- end CmdSocialNetworks -->
62
+ </div>
63
+ <!-- end center/main column -->
64
+
65
+ <!-- begin right column -->
66
+ <aside v-if="mainContent.rightColumn.show" class="right-column">
67
+ <!-- begin slot right column -->
68
+ <slot name="left-column"></slot>
69
+ <!-- end slot right column -->
70
+ </aside>
71
+ <!-- begin right column -->
72
+ </div>
73
+ </main>
74
+ <!-- end main-content -->
75
+
76
+ <!-- begin cmd-site-footer -->
77
+ <CmdSiteFooter v-if="cmdSiteFooter">
78
+ <!-- begin parent-component -->
79
+ <component
80
+ v-for="(component, index) in cmdSiteFooter.components || []" :key="index"
81
+ :is="component.name"
82
+ v-bind="component.props"
83
+ v-on="handlers(component)"
84
+ >
85
+ <!-- begin child-component -->
86
+ <component
87
+ v-for="(childComponent, childComponentIndex) in component.components || []"
88
+ :key="childComponentIndex" :is="childComponent.name"
89
+ v-bind="childComponent.props"
90
+ v-on="handlers(childComponent)"
91
+ :editContent="childComponent.editContent"
92
+ />
93
+ <!-- end child-component -->
94
+ </component>
95
+ <!-- end parent-component -->
96
+ </CmdSiteFooter>
97
+ <!-- end cmd-site-footer -->
98
+
99
+ <!-- begin cmd-copyright-information DO NOT REMOVE -->
100
+ <CmdCopyrightInformation/>
101
+ <!-- end cmd-copyright-information DO NOT REMOVE -->
102
+
103
+ <!-- begin cmd-back-to-top-button -->
104
+ <CmdBackToTopButton
105
+ href="#anchor-back-to-top"
106
+ :iconBackToTop="iconBackToTop"
107
+ scroll-container="#page-wrapper"
108
+ />
109
+ <!-- end cmd-back-to-top-button -->
110
+
111
+ <!-- begin fancy-box ------------------------------------------------------------------------------------------------------------------------------------------------------->
112
+ <CmdFancyBox
113
+ v-if="cmdCookieDisclaimer"
114
+ :show="fancyBoxCookieDisclaimer"
115
+ :fancyboxOptions="{}"
116
+ :allowEscapeKey="false"
117
+ :cmdHeadline="{show: true, headlineText: 'Cookie Disclaimer', headlineLevel: 2}"
118
+ ariaLabelText="Cookie Disclaimer"
119
+ >
120
+ <!-- begin cookie-disclaimer ------------------------------------------------------------------------------------------------------------------------------------------------------->
121
+ <CmdCookieDisclaimer
122
+ :cookieOptions="cmdCookieDisclaimer.options"
123
+ buttonLabelAcceptAllCookies="Accept all cookies"
124
+ buttonLabelAcceptCurrentSettings="Accept current settings"
125
+ @closeCookieDisclaimer="closeCookieDisclaimer"
126
+ v-model="acceptedCookies"
127
+ :cmdHeadlineCookieDisclaimer="{ show: false }">
128
+ <template #privacy-text>
129
+ <p>
130
+ <strong>
131
+ By browsing this web site you accept the usage and saving of anonymous data!
132
+ </strong>
133
+ </p>
134
+ </template>
135
+ </CmdCookieDisclaimer>
136
+ <!-- end cookie-disclaimer ------------------------------------------------------------------------------------------------------------------------------------------------------->
137
+ </CmdFancyBox>
138
+ <!-- end fancy-box ------------------------------------------------------------------------------------------------------------------------------------------------------->
139
+ </div>
140
+ </template>
141
+
142
+ <script>
143
+ // import functions
144
+ import {openFancyBox} from "@/components/CmdFancyBox.vue"
145
+
146
+ export default {
147
+ name: "PageWrapper",
148
+ data() {
149
+ return {
150
+ offCanvasOpen: false,
151
+ heightSiteHeader: 150,
152
+ acceptedCookies: [],
153
+ fancyBoxCookieDisclaimer: true
154
+ }
155
+ },
156
+ props: {
157
+ topHeaderNavigationEntries: {
158
+ default: []
159
+ },
160
+ mainNavigationEntries: {
161
+ default: []
162
+ },
163
+ mainContent: {
164
+ leftColumn: {
165
+ show: true
166
+ },
167
+ rightColumn: {
168
+ show: true
169
+ }
170
+ },
171
+ cmdSiteHeader: {
172
+ default: null
173
+ },
174
+ cmdCompanyLogo: {
175
+ default: null
176
+ },
177
+ cmdBreadcrumbs: {
178
+ default: null
179
+ },
180
+ cmdHeadline: {
181
+ default: null
182
+ },
183
+ cmdSocialNetworks: {
184
+ default: null
185
+ },
186
+ cmdSiteFooter: {
187
+ default: null
188
+ },
189
+ cmdCookieDisclaimer: {
190
+ default: null
191
+ }
192
+ },
193
+ mounted() {
194
+ const siteHeader = document.getElementsByClassName("cmd-site-header")
195
+
196
+ if (siteHeader.length > 0) {
197
+ const resizeObserver = new ResizeObserver(entries => {
198
+ // get height of site-header to set scroll-padding on #page-wrapper
199
+ this.heightSiteHeader = entries[0].target.offsetHeight
200
+ })
201
+ resizeObserver.observe(siteHeader[0])
202
+ }
203
+ },
204
+ computed: {
205
+ iconBackToTop() {
206
+ return {
207
+ iconClass: "icon-single-arrow-up",
208
+ tooltip: this.label("back_to_top_button.tooltip")
209
+ }
210
+ }
211
+ },
212
+ methods: {
213
+ offcanvasToggled(event) {
214
+ this.offCanvasOpen = event.open
215
+ },
216
+ handlers(component) {
217
+ if (component.handlers === "toggleSection") {
218
+ return {
219
+ "click": this.toggleSection
220
+ }
221
+ }
222
+ return {}
223
+ },
224
+ openFancybox(event) {
225
+ openFancyBox({url: event.target.href})
226
+ },
227
+ closeCookieDisclaimer() {
228
+ this.fancyBoxCookieDisclaimer = false
229
+ localStorage.setItem("onepagerPrivacySettingsAccepted", "true")
230
+ }
231
+ }
232
+ }
233
+ </script>
234
+
235
+ <style>
236
+ .inner-content-wrapper {
237
+ display: flex;
238
+
239
+ &:has(> aside) {
240
+ aside {
241
+ flex: 1;
242
+
243
+ &:first-child {
244
+ & + .main-content-wrapper {
245
+ flex: 2;
246
+
247
+ &:last-child {
248
+ flex: 3;
249
+ }
250
+ }
251
+ }
252
+ }
253
+ }
254
+
255
+ .main-content-wrapper {
256
+ width: 100%;
257
+ }
258
+
259
+ }
260
+ </style>
@@ -0,0 +1,34 @@
1
+ <template>
2
+ <div class="cmd-page-segmented-lists-of-links flex-container vertical">
3
+ <template v-for="(segment, index) in segments" :key="index">
4
+ <!-- begin CmdListOfLinks -->
5
+ <CmdListOfLinks
6
+ :links="segment.links"
7
+ :orientation="segment.orientation"
8
+ :largeIcons="segment.largeIcons"
9
+ :cmdHeadline="segment.headline"
10
+ />
11
+ <!-- end CmdListOfLinks -->
12
+
13
+ <!-- begin slot-content -->
14
+ <slot name="segmented-lists-of-links-slot-${index}"></slot>
15
+ <!-- end slot-content -->
16
+ </template>
17
+ </div>
18
+ </template>
19
+
20
+ <script>
21
+ export default {
22
+ name: "SegmentedListsOfLinks",
23
+ props: {
24
+ segments: {
25
+ type: Array,
26
+ default: null
27
+ }
28
+ }
29
+ }
30
+ </script>
31
+
32
+ <style>
33
+
34
+ </style>