comand-component-library 3.1.22 → 3.1.26

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.css +1 -1
  2. package/dist/comand-component-library.umd.min.js +1 -1
  3. package/package.json +3 -4
  4. package/src/App.vue +30 -9
  5. package/src/assets/data/accordion.json +13 -4
  6. package/src/components/CmdAccordion.vue +84 -15
  7. package/src/components/CmdAddressData.vue +12 -0
  8. package/src/components/CmdBackToTopButton.vue +3 -0
  9. package/src/components/CmdBox.vue +16 -1
  10. package/src/components/CmdBoxSiteSearch.vue +3 -0
  11. package/src/components/CmdBreadcrumbs.vue +9 -0
  12. package/src/components/CmdCompanyLogo.vue +12 -0
  13. package/src/components/CmdCookieDisclaimer.vue +15 -4
  14. package/src/components/CmdCopyrightInformation.vue +2 -8
  15. package/src/components/CmdFakeSelect.vue +33 -6
  16. package/src/components/CmdFancyBox.vue +31 -1
  17. package/src/components/CmdFooterNavigation.vue +6 -0
  18. package/src/components/CmdGoogleMaps.vue +3 -0
  19. package/src/components/CmdImageGallery.vue +3 -2
  20. package/src/components/CmdImageZoom.vue +6 -0
  21. package/src/components/CmdMainHeadline.vue +9 -0
  22. package/src/components/CmdMainNavigation.vue +24 -0
  23. package/src/components/CmdMultipleSwitch.vue +1 -5
  24. package/src/components/CmdMultistepFormProgressBar.vue +6 -0
  25. package/src/components/CmdOpeningHours.vue +23 -2
  26. package/src/components/CmdPager.vue +24 -2
  27. package/src/components/CmdProgressBar.vue +10 -4
  28. package/src/components/CmdShareButtons.vue +6 -0
  29. package/src/components/CmdSiteHeader.vue +12 -16
  30. package/src/components/CmdSlideButton.vue +3 -0
  31. package/src/components/CmdSlideshow.vue +25 -6
  32. package/src/components/CmdUploadForm.vue +5 -5
  33. package/src/index.js +3 -1
  34. package/src/main.js +2 -2
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "comand-component-library",
3
- "version": "3.1.22",
3
+ "version": "3.1.26",
4
4
  "private": false,
5
5
  "scripts": {
6
6
  "serve": "vue-cli-service serve",
@@ -16,10 +16,9 @@
16
16
  "src"
17
17
  ],
18
18
  "dependencies": {
19
- "clickout-event": "^1.1.1",
20
- "comand-frontend-framework": "^3.2.9",
19
+ "clickout-event": "^1.1.2",
20
+ "comand-frontend-framework": "^3.2.12",
21
21
  "core-js": "^3.16.1",
22
- "v-click-outside": "^3.1.2",
23
22
  "vue": "^3.2.1",
24
23
  "vue-router": "^4.0.11",
25
24
  "vuex": "^4.0.2"
package/src/App.vue CHANGED
@@ -41,7 +41,6 @@
41
41
  <li><a href="#section-upload-form">Upload-Form</a></li>
42
42
  </ul>
43
43
  </div>
44
-
45
44
  <hr/>
46
45
  </CmdWidthLimitationWrapper>
47
46
 
@@ -49,11 +48,13 @@
49
48
  <CmdWidthLimitationWrapper>
50
49
  <h2 class="headline-demopage">Accordion</h2>
51
50
  <h3>Single mode (only one can be opened)</h3>
51
+ <a href="#" @click.prevent="toggleAllAccordions()">Toggle all accordions</a>
52
52
  <CmdAccordion :accordionData="accordionData.accordionData1"
53
53
  toggleMode="single"
54
54
  tooltip="Click to toggle content"
55
55
  openIconClass="icon-single-arrow-up"
56
56
  closeIconClass="icon-single-arrow-down"
57
+ ref="accordionGroup1"
57
58
  />
58
59
  <h3>Multiple mode (all can be opened)</h3>
59
60
  <CmdAccordion :accordionData="accordionData.accordionData2"
@@ -61,14 +62,16 @@
61
62
  tooltip="Click to toggle content"
62
63
  openIconClass="icon-single-arrow-up"
63
64
  closeIconClass="icon-single-arrow-down"
65
+ ref="accordionGroup2"
64
66
  />
65
- <h3>Customized headline-level</h3>
67
+ <h3>Customized headline-level (without transition of content)</h3>
66
68
  <CmdAccordion :accordionData="accordionData.accordionData2"
67
69
  toggleMode="multiple"
68
70
  tooltip="Click to toggle content"
69
71
  openIconClass="icon-single-arrow-up"
70
72
  closeIconClass="icon-single-arrow-down"
71
73
  accordion-headline-level="h4"
74
+ :use-transition="false"
72
75
  />
73
76
  <h3>Data given by slots</h3>
74
77
  <CmdAccordion :accordionData="1">
@@ -81,6 +84,16 @@
81
84
  </p>
82
85
  </template>
83
86
  </CmdAccordion>
87
+ <CmdAccordion :accordionData="1" :useCustomHeader="true">
88
+ <template v-slot:customHeadline0>
89
+ <h4>Some headline</h4>
90
+ </template>
91
+ <template v-slot:accordionContent0>
92
+ <p>
93
+ Content
94
+ </p>
95
+ </template>
96
+ </CmdAccordion>
84
97
  </CmdWidthLimitationWrapper>
85
98
 
86
99
  <!-- begin advanced form elements --------------------------------------------------------------------------------------------------------------------------------------------------->
@@ -409,6 +422,7 @@
409
422
  <CmdFormElement element="input"
410
423
  labelText="Label for replaced radiobutton"
411
424
  type="radio"
425
+ class="replace-input-type"
412
426
  id="inputfield13"
413
427
  name="replaced-radiogroup"
414
428
  inputValue="radiobuttonValue1"
@@ -417,6 +431,7 @@
417
431
  <CmdFormElement element="input"
418
432
  labelText="Label for replaced radiobutton"
419
433
  type="radio"
434
+ class="replace-input-type"
420
435
  id="inputfield14"
421
436
  name="replaced-radiogroup"
422
437
  inputValue="radiobuttonValue2"
@@ -647,9 +662,6 @@
647
662
  :items="pagerData.length"
648
663
  :itemsPerPage="1"
649
664
  @click="showPagePager = $event"
650
- :showLinksAsButtons="true"
651
- :prevButton="{'iconClass': 'icon-single-arrow-left', 'buttonText': 'prev' }"
652
- :nextButton="{'iconClass': 'icon-single-arrow-right', 'buttonText': 'next' }"
653
665
  />
654
666
  </CmdWidthLimitationWrapper>
655
667
 
@@ -668,7 +680,7 @@
668
680
  <a id="section-system-message"></a>
669
681
  <CmdWidthLimitationWrapper>
670
682
  <h2 class="headline-demopage">System Message</h2>
671
- <CmdSystemMessage messageStatus="error" :fullWidth="true" systemMessage="This is an error message!"
683
+ <CmdSystemMessage status="error" :fullWidth="true" message="This is an error message!"
672
684
  iconClass="icon-cancel">
673
685
  <ul>
674
686
  <li>Error #1</li>
@@ -676,14 +688,14 @@
676
688
  <li>Error #3</li>
677
689
  </ul>
678
690
  </CmdSystemMessage>
679
- <CmdSystemMessage messageStatus="warning" :fullWidth="true" systemMessage="This is a warning message!">
691
+ <CmdSystemMessage status="warning" :fullWidth="true" message="This is a warning message!">
680
692
  <p>This is additional text!</p>
681
693
  </CmdSystemMessage>
682
- <CmdSystemMessage messageStatus="success" :fullWidth="true" systemMessage="This is a success message!"
694
+ <CmdSystemMessage status="success" :fullWidth="true" message="This is a success message!"
683
695
  iconClass="icon-check">
684
696
  <p>This is additional text!</p>
685
697
  </CmdSystemMessage>
686
- <CmdSystemMessage messageStatus="info" :fullWidth="true" systemMessage="This is an info message!"
698
+ <CmdSystemMessage status="info" :fullWidth="true" message="This is an info message!"
687
699
  iconClass="icon-info">
688
700
  <p>This is additional text!</p>
689
701
  </CmdSystemMessage>
@@ -872,6 +884,7 @@ export default {
872
884
 
873
885
  data() {
874
886
  return {
887
+ accordionGroupOpen: false,
875
888
  showPageMultistep: 1,
876
889
  showPagePager: 1,
877
890
  selectedOptions: [],
@@ -964,6 +977,14 @@ export default {
964
977
  },
965
978
  executeSearch() {
966
979
  return Math.floor(Math.random() * 100)
980
+ },
981
+ toggleAllAccordions() {
982
+ if(this.accordionGroupOpen) {
983
+ this.$refs.accordionGroup1.closeAll()
984
+ } else{
985
+ this.$refs.accordionGroup1.openAll()
986
+ }
987
+ this.accordionGroupOpen = !this.accordionGroupOpen
967
988
  }
968
989
  }
969
990
  }
@@ -2,19 +2,28 @@
2
2
  "accordionData1": [
3
3
  {
4
4
  "headline": "First",
5
- "iconClass": "icon-globe",
5
+ "icon": {
6
+ "iconClass": "icon-globe",
7
+ "tooltip": "Globe"
8
+ },
6
9
  "content": "Text 1",
7
10
  "status": false
8
11
  },
9
12
  {
10
13
  "headline": "Second",
11
- "iconClass": "icon-user-profile",
14
+ "icon": {
15
+ "iconClass": "icon-user-profile",
16
+ "tooltip": "User profile"
17
+ },
12
18
  "content": "Text 2",
13
- "status": false
19
+ "status": true
14
20
  },
15
21
  {
16
22
  "headline": "Third",
17
- "iconClass": "icon-home",
23
+ "icon": {
24
+ "iconClass": "icon-home",
25
+ "tooltip": "Home"
26
+ },
18
27
  "content": "Text 3",
19
28
  "status": false
20
29
  }
@@ -1,16 +1,20 @@
1
1
  <template>
2
2
  <div :class="['cmd-accordion flex-container vertical', {'no-gap' : !gapBetween, 'active' : active}]">
3
3
  <div v-for="(accordionContent, index) in accordion" :key="index">
4
- <a href="#" :title="tooltip" @click.prevent="toggleContentVisibility(accordionContent)">
4
+ <a v-if="!useCustomHeader" href="#" :title="accordionContent.status ? iconOpen.icon.tooltip : iconClosed.icon.tooltip" @click.prevent="toggleContentVisibility(accordionContent)">
5
5
  <slot :name="'accordionHeadline' + index">
6
6
  <component :is="accordionHeadlineLevel">
7
- <span v-if="accordionContent.iconClass" :class="accordionContent.iconClass"></span>
7
+ <span v-if="accordionContent.icon && accordionContent.icon.iconClass" :class="accordionContent.icon.iconClass" :title="accordionContent.icon.tooltip"></span>
8
8
  <span v-if="accordionContent.headline">{{ accordionContent.headline }}</span>
9
9
  </component>
10
10
  </slot>
11
+ <span class="toggle-icon" :class="[accordionContent.status ? iconOpen.icon.iconClass : iconClosed.icon.iconClass]"></span>
12
+ </a>
13
+ <a v-else href="#" :title="tooltip" @click.prevent="toggleContentVisibility(accordionContent)">
14
+ <slot :name="'customHeadline' + index"><p>{{ accordionContent.headline }}</p></slot>
11
15
  <span class="toggle-icon" :class="[accordionContent.status ? openIconClass : closeIconClass]"></span>
12
16
  </a>
13
- <transition name="fade">
17
+ <transition :name="toggleTransition">
14
18
  <div class="accordion-content" v-if="accordionContent.status" aria-expanded="true">
15
19
  <slot :name="'accordionContent' + index">
16
20
  <p>{{ accordionContent.content }}</p>
@@ -31,14 +35,39 @@ export default {
31
35
  }
32
36
  },
33
37
  props: {
38
+ /**
39
+ * use transition to expand accordion-content
40
+ */
41
+ useTransition: {
42
+ type: Boolean,
43
+ default: true
44
+ },
45
+ /**
46
+ * toggle if mode if only one accordion can be opened (or multiple ones)
47
+ *
48
+ * values: single, multiple
49
+ */
34
50
  toggleMode: {
35
51
  type: String,
36
52
  default: "single"
37
53
  },
54
+ /**
55
+ * activate if you want to use a customized header
56
+ */
57
+ useCustomHeader: {
58
+ type: Boolean,
59
+ default: false
60
+ },
61
+ /**
62
+ * set if a gap is shown between multiple accordions
63
+ */
38
64
  gapBetween: {
39
65
  type: Boolean,
40
66
  default: true
41
67
  },
68
+ /**
69
+ * headline for accordion-box that is also visible is accordion is collapsed
70
+ */
42
71
  accordionHeadlineLevel: {
43
72
  type: String,
44
73
  default: "h3",
@@ -53,21 +82,45 @@ export default {
53
82
  return true
54
83
  }
55
84
  },
85
+ /**
86
+ * all information about the contents in all shown accordions
87
+ */
56
88
  accordionData: {
57
89
  type: [Array, Number],
58
90
  required: true
59
91
  },
60
- openIconClass: {
61
- type: String,
62
- default: "icon-single-arrow-up"
63
- },
64
- closeIconClass: {
65
- type: String,
66
- default: "icon-single-arrow-down"
92
+ /**
93
+ * icon to expand an accordion
94
+ */
95
+ iconOpen: {
96
+ type: Object,
97
+ default: function() {
98
+ return {
99
+ icon: {
100
+ iconClass: "icon-single-arrow-up",
101
+ tooltip: "Close content"
102
+ }
103
+ }
104
+ },
67
105
  },
68
- tooltip: {
69
- type: String,
70
- required: false
106
+ /**
107
+ * icon to collapse an accordion
108
+ */
109
+ iconClosed: {
110
+ type: Object,
111
+ default: function() {
112
+ return {
113
+ icon: {
114
+ iconClass: "icon-single-arrow-down",
115
+ tooltip: "Show content"
116
+ }
117
+ }
118
+ }
119
+ }
120
+ },
121
+ computed: {
122
+ toggleTransition() {
123
+ return this.useTransition && 'fade'
71
124
  }
72
125
  },
73
126
  methods: {
@@ -82,6 +135,22 @@ export default {
82
135
  }
83
136
  }
84
137
  }
138
+ },
139
+ /**
140
+ * method will be called from outside by $refs
141
+ */
142
+ openAll() {
143
+ for (let i = 0; i < this.accordion.length; i++) {
144
+ this.accordion[i].status = true;
145
+ }
146
+ },
147
+ /**
148
+ * method will be called from outside by $refs
149
+ */
150
+ closeAll() {
151
+ for (let i = 0; i < this.accordion.length; i++) {
152
+ this.accordion[i].status = false;
153
+ }
85
154
  }
86
155
  },
87
156
  watch: {
@@ -109,7 +178,7 @@ export default {
109
178
  margin-bottom: var(--default-margin);
110
179
 
111
180
  > div {
112
- > a {
181
+ > a, > div:first-child {
113
182
  display: flex;
114
183
  align-items: center;
115
184
  gap: var(--grid-gap);
@@ -150,7 +219,7 @@ export default {
150
219
  border-top: 0;
151
220
  }
152
221
 
153
- > span {
222
+ > span, > a {
154
223
  font-size: inherit;
155
224
 
156
225
  &[class*="icon-"] {
@@ -76,18 +76,30 @@
76
76
  export default {
77
77
  name: "CmdAddressData",
78
78
  props: {
79
+ /**
80
+ * headline shown above address-data
81
+ */
79
82
  headline: {
80
83
  type: String,
81
84
  required: false
82
85
  },
86
+ /**
87
+ * option to toggle labels (i.e. telephone, email etc.) in front/left of data
88
+ */
83
89
  showLabels: {
84
90
  type: Boolean,
85
91
  default: true
86
92
  },
93
+ /**
94
+ * all address-data (incl. lables) that will be shown
95
+ */
87
96
  addressData: {
88
97
  type: Object,
89
98
  required: true
90
99
  },
100
+ /**
101
+ * link physical address (street, no, zip and city) with Google Maps
102
+ */
91
103
  linkGoogleMaps: {
92
104
  type: Boolean,
93
105
  default: false
@@ -19,6 +19,9 @@ export default {
19
19
  }
20
20
  },
21
21
  props: {
22
+ /**
23
+ * icon-class (and shown tooltip on hover) for back to top button
24
+ */
22
25
  iconBackToTop: {
23
26
  type: Object,
24
27
  default: function () {
@@ -52,17 +52,32 @@
52
52
  export default {
53
53
  name: "CmdBox",
54
54
  props: {
55
+ /**
56
+ * set boxtype to show different types of boxes/contents
57
+ *
58
+ * values: "content, product, user"
59
+ */
55
60
  boxType: {
56
61
  type: String,
57
62
  default: "content"
58
63
  },
64
+ /**
65
+ * the shown product (incl. name, price, image, description)
66
+ *
67
+ * limitations: only available for boxtype===product
68
+ */
59
69
  product: {
60
70
  type: Object,
61
71
  required: false
62
72
  },
73
+ /**
74
+ * the shown user-profile (incl. name, image, contact-data)
75
+ *
76
+ * limitations: only available for boxtype===user
77
+ */
63
78
  user: {
64
79
  type: Object,
65
- required: true
80
+ required: false
66
81
  }
67
82
  }
68
83
  }
@@ -52,6 +52,9 @@ export default {
52
52
  }
53
53
  },
54
54
  props: {
55
+ /**
56
+ * send search result from outside to display inside this component
57
+ */
55
58
  results: {
56
59
  type: [Function, Number],
57
60
  required: false
@@ -23,14 +23,23 @@
23
23
  export default {
24
24
  name: "CmdBreadcrumbs",
25
25
  props: {
26
+ /**
27
+ * list of breadcrumb-links (incl. path, icon and text)
28
+ */
26
29
  breadcrumbLinks: {
27
30
  type: Array,
28
31
  required: false
29
32
  },
33
+ /**
34
+ * label in front/left of breadcrumbs
35
+ */
30
36
  breadcrumbLabel: {
31
37
  type: String,
32
38
  required: false
33
39
  },
40
+ /**
41
+ * separator sign between entries
42
+ */
34
43
  breadcrumbSeparator: {
35
44
  type: String,
36
45
  default: ">"
@@ -20,18 +20,30 @@ export default {
20
20
  }
21
21
  },
22
22
  props: {
23
+ /**
24
+ * link for company logo (i.e. to homepage)
25
+ */
23
26
  link: {
24
27
  type: Object,
25
28
  required: false
26
29
  },
30
+ /**
31
+ * path to (default) logo-file
32
+ */
27
33
  pathDefaultLogo: {
28
34
  type: String,
29
35
  required: true
30
36
  },
37
+ /**
38
+ * path to dark-mode logo-file
39
+ */
31
40
  pathDarkmodeLogo: {
32
41
  type: String,
33
42
  required: false
34
43
  },
44
+ /**
45
+ * alternative text for image
46
+ */
35
47
  altText: {
36
48
  type: String,
37
49
  required: true /* w3c requirements */
@@ -3,9 +3,8 @@
3
3
  <div class="cmd-cookie-disclaimer">
4
4
  <h2 v-if="headline">{{ headline }}</h2>
5
5
  <slot name="cookie-options">
6
- <div class="grid-container-two-fractions">
7
6
  <div v-if="cookieOptions.required">
8
- <h2>{{ cookieOptions.required.headline }}</h2>
7
+ <h3>{{ cookieOptions.required.headline }}</h3>
9
8
  <CmdAccordion :accordion-data="cookieOptions.required.cookies.length" :accordionData="2">
10
9
  <template v-for="(cookie, index) in cookieOptions.required.cookies"
11
10
  v-slot:[`accordionHeadline${index}`]
@@ -35,8 +34,9 @@
35
34
  </template>
36
35
  </CmdAccordion>
37
36
  </div>
37
+ <hr />
38
38
  <div v-if="cookieOptions.optional">
39
- <h2>{{ cookieOptions.optional.headline }}</h2>
39
+ <h3>{{ cookieOptions.optional.headline }}</h3>
40
40
  <CmdAccordion :accordion-data="cookieOptions.optional.cookies.length" :accordionData="2">
41
41
  <template v-for="(cookie, index) in cookieOptions.optional.cookies"
42
42
  v-slot:[`accordionHeadline${index}`]
@@ -62,7 +62,6 @@
62
62
  </template>
63
63
  </CmdAccordion>
64
64
  </div>
65
- </div>
66
65
  </slot>
67
66
  <slot name="privacy-text">
68
67
  </slot>
@@ -96,18 +95,30 @@ export default {
96
95
  }
97
96
  },
98
97
  props: {
98
+ /**
99
+ * headline show above content
100
+ */
99
101
  headline: {
100
102
  type: String,
101
103
  required: false
102
104
  },
105
+ /**
106
+ * list of cookie-options
107
+ */
103
108
  cookieOptions: {
104
109
  type: Object,
105
110
  required: false
106
111
  },
112
+ /**
113
+ * label for button to accepting all cookies
114
+ */
107
115
  buttonLabelAcceptAllCookies: {
108
116
  type: String,
109
117
  default: "Accept all cookies!"
110
118
  },
119
+ /**
120
+ * label for button for accepting current settings
121
+ */
111
122
  buttonLabelAcceptCurrentSettings: {
112
123
  type: String,
113
124
  default: "Proceed with current settings!"
@@ -1,18 +1,12 @@
1
1
  <template>
2
- <div :class="['cmd-widget', 'cmd-copyright-information', htmlClass]">
2
+ <div class="cmd-copyright-information">
3
3
  <a href="http://www.comand-cms.com" target="_blank" lang="en" title="CoManD-Website">&copy; CoManD</a>
4
4
  </div>
5
5
  </template>
6
6
 
7
7
  <script>
8
8
  export default {
9
- name: "CmdCopyrightWrapper",
10
- props: {
11
- htmlClass: {
12
- type: String,
13
- required: false
14
- }
15
- }
9
+ name: "CmdCopyrightWrapper"
16
10
  }
17
11
  </script>
18
12
 
@@ -1,6 +1,6 @@
1
1
  <template>
2
2
  <div :class="[status, 'cmd-select label']">
3
- <span>Label for FakeSelect:</span>
3
+ <span>{{ labelText }}</span>
4
4
  <ul :class="{'open': showOptions}" @clickout="closeOptions">
5
5
  <li>
6
6
  <a href="#" @click.prevent="toggleOptions">
@@ -8,7 +8,7 @@
8
8
  <span v-else-if="type === 'color' && miscInfo" class="color"
9
9
  :style="'background: ' + miscInfo"></span>
10
10
  <span>{{ optionName }}</span>
11
- <span :class="iconClass"></span>
11
+ <span :class="dropdownIconClass"></span>
12
12
  </a>
13
13
  <ul v-if="type === 'filterList' && showOptions" class="filter-list">
14
14
  <li v-for="(option, index) in selectData" :key="index">
@@ -46,34 +46,61 @@
46
46
  </template>
47
47
 
48
48
  <script>
49
- import "clickout-event"
50
-
51
49
  export default {
52
50
  name: 'CmdFakeSelect',
53
51
  props: {
52
+ /**
53
+ * set different default selectbox-types for
54
+ *
55
+ * values: "(none), color, country, filterlist"
56
+ */
54
57
  type: {
55
58
  type: String,
56
59
  required: false
57
60
  },
61
+ /**
62
+ * set default value
63
+ */
58
64
  value: {
59
65
  type: [String, Array],
60
66
  required: false
61
67
  },
68
+ /**
69
+ * set default option name
70
+ */
62
71
  defaultOptionName: {
63
72
  type: String,
64
73
  required: false
65
74
  },
75
+ /**
76
+ * list of options to select (incl. displayed names and values)
77
+ */
66
78
  selectData: {
67
79
  type: Array,
68
80
  required: false
69
81
  },
82
+ /**
83
+ * status (i.e. for validation)
84
+ *
85
+ * values: "error, success, disabled"
86
+ */
70
87
  status: {
71
88
  type: String,
72
89
  required: false
73
90
  },
74
- iconClass: {
91
+ /**
92
+ * icon-class for dropdown icon (i.e. an angle/arrow)
93
+ */
94
+ dropdownIconClass: {
95
+ type: String,
96
+ default: "icon-single-arrow-down"
97
+ },
98
+ /**
99
+ * label-text for fake-select
100
+ */
101
+ labelText: {
75
102
  type: String,
76
- required: true
103
+ required: false
77
104
  }
78
105
  },
79
106
  methods: {