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.
Files changed (32) hide show
  1. package/dist/comand-component-library.js +2016 -1892
  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 +12 -0
  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 +28 -20
  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 +2 -1
  26. package/src/mixins/CmdFakeSelect/DefaultMessageProperties.js +0 -1
  27. package/src/mixins/pages/BasicForm/DefaultMessageProperties.js +28 -0
  28. package/src/pages/BasicForm.vue +341 -0
  29. package/src/pages/PageOverview.vue +53 -0
  30. package/src/pages/PageWrapper.vue +260 -0
  31. package/src/pages/SegmentedListsOfLinks.vue +34 -0
  32. /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 vertical">
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
- <!-- begin cmdHeadline -->
20
- <CmdHeadline
21
- v-if="(cmdHeadline?.headlineText || editModeContext) && headlinePosition === 'belowImage'"
22
- v-bind="cmdHeadline"
23
- />
24
- <!-- end cmdHeadline -->
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
- editModeContextData: {
70
- type: Object
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
- * properties for CmdHeadline-component
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="innerWrapper" :class="setInnerClass" :id="anchorId">
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
- innerWrapper: {
74
+ useInnerSection: {
54
75
  type: Boolean,
55
76
  default: true
56
77
  },
@@ -530,6 +530,10 @@ function buildComponentPath(component) {
530
530
  }
531
531
  }
532
532
  }
533
+
534
+ &.active {
535
+ background: hsla(0, 0%, 100%, .2);
536
+ }
533
537
  }
534
538
 
535
539
  &.active {
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 CmdPager } from '@/components/CmdPagination.vue'
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'
@@ -7,7 +7,6 @@ export default {
7
7
  "cmdfakeselect.linktext.select_all_options": "Select all options",
8
8
  "cmdfakeselect.headline.an_option_is_selected": "An option is selected",
9
9
  "cmdfakeselect.option.options_selected": "{0} options selected"
10
-
11
10
  }
12
11
  }
13
12
  }
@@ -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>