@byu-oit/vue-decision-processing-components 8.35.8 → 8.35.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 (135) hide show
  1. package/.github/workflows/deploy.yml +40 -50
  2. package/.repo-meta.yml +55 -55
  3. package/AdmitPeriodConfig.vue +115 -115
  4. package/ApiCallButton.vue +91 -91
  5. package/ApplicantInfo.vue +100 -100
  6. package/AssignmentBulkDialog.vue +153 -153
  7. package/AssignmentDialog.vue +117 -117
  8. package/AssignmentSummary.vue +75 -75
  9. package/BackgroundBadge.vue +83 -83
  10. package/BackgroundDetailCrime.vue +78 -78
  11. package/BackgroundDetailPluralMarriage.vue +43 -43
  12. package/BackgroundDetailSexRegistry.vue +43 -43
  13. package/BackgroundDetailUniversity.vue +37 -37
  14. package/CHANGELOG.md +676 -676
  15. package/Dashboard.vue +201 -201
  16. package/DashboardApplicationList.vue +50 -50
  17. package/DecisionDialog.vue +178 -178
  18. package/Details.vue +124 -124
  19. package/DetailsActivity.vue +59 -59
  20. package/DetailsBackground.vue +143 -143
  21. package/DetailsBackgroundDetail.vue +47 -47
  22. package/DetailsBackgroundSummary.vue +66 -66
  23. package/DetailsCesHold.vue +107 -107
  24. package/DetailsCollege.vue +93 -93
  25. package/DetailsContact.vue +65 -65
  26. package/DetailsDecision.vue +183 -183
  27. package/DetailsDecisionHistory.vue +56 -56
  28. package/DetailsEndorsement.vue +74 -74
  29. package/DetailsEssay.vue +59 -59
  30. package/DetailsFilenote.vue +62 -62
  31. package/DetailsFilenoteList.vue +109 -109
  32. package/DetailsFlagSection.vue +176 -176
  33. package/DetailsHeader.vue +263 -263
  34. package/DetailsHighSchool.vue +99 -99
  35. package/DetailsHsTranscript.vue +100 -100
  36. package/DetailsInstitute.vue +90 -90
  37. package/DetailsMission.vue +88 -88
  38. package/DetailsNewAppHistory.vue +50 -50
  39. package/DetailsNotes.vue +83 -83
  40. package/DetailsPathway.vue +45 -45
  41. package/DetailsScoringSection.vue +128 -128
  42. package/DetailsSection.vue +116 -116
  43. package/DetailsSeminary.vue +184 -184
  44. package/DetailsSrs.vue +52 -52
  45. package/DetailsSubnav.vue +54 -54
  46. package/DetailsTestScores.vue +131 -131
  47. package/ExpandIndicator.vue +75 -75
  48. package/ExternalLink.vue +34 -34
  49. package/FilterBreadcrumb.vue +85 -85
  50. package/FilterButton.vue +86 -86
  51. package/FilterButtonAdmitPeriod.vue +104 -104
  52. package/FilterButtonAppType.vue +103 -103
  53. package/FilterButtonAssignedTo.vue +96 -96
  54. package/FilterButtonClearFilters.vue +65 -65
  55. package/FilterButtonSex.vue +105 -105
  56. package/FlagButton.vue +59 -59
  57. package/FlagDialog.vue +129 -129
  58. package/Footer.vue +432 -432
  59. package/Header.vue +132 -132
  60. package/HighSchoolSummary.vue +60 -60
  61. package/InternationalIndicator.vue +44 -44
  62. package/InternationalStatus.vue +48 -48
  63. package/LICENSE +201 -201
  64. package/LoadingBadge.vue +58 -58
  65. package/ManageAssignments.vue +123 -123
  66. package/NoAuth.vue +14 -14
  67. package/NoteDialog.vue +106 -106
  68. package/ObjectViewer.vue +49 -49
  69. package/Queues.vue +278 -268
  70. package/QuickLinks.vue +25 -25
  71. package/README.md +2 -2
  72. package/RecentApplications.vue +53 -53
  73. package/Report.vue +340 -340
  74. package/ReportDetail.vue +279 -279
  75. package/ReportList.vue +87 -87
  76. package/ReportPhotos.vue +65 -65
  77. package/ReportSvg.vue +78 -78
  78. package/ReportViewer.vue +165 -165
  79. package/RequestAccess.vue +14 -14
  80. package/RequestAccessList.vue +45 -45
  81. package/RoleSelector.vue +29 -29
  82. package/Search.vue +22 -22
  83. package/ShowApplicantIds.vue +100 -100
  84. package/SortableHeader.vue +53 -53
  85. package/Spinner.vue +34 -34
  86. package/StarredIndicator.vue +36 -36
  87. package/StatBox.vue +73 -73
  88. package/StatCharts.vue +196 -196
  89. package/SupportDialog.vue +172 -172
  90. package/UserInfo.vue +52 -52
  91. package/YesNoIndicator.vue +48 -48
  92. package/dateTimeFormat.js +67 -67
  93. package/gpaCalculation.js +162 -162
  94. package/gpaFilter.js +5 -5
  95. package/hsSummary.json +2019 -2019
  96. package/package.json +38 -36
  97. package/parsers/application.js +396 -396
  98. package/parsers/decisionHistory.js +27 -27
  99. package/parsers/filenotes.js +27 -27
  100. package/parsers/notes.js +49 -49
  101. package/parsers/packet.js +88 -88
  102. package/parsers/packetList.js +57 -57
  103. package/parsers/reports.js +13 -13
  104. package/sat2Act.js +46 -46
  105. package/test.js +48 -48
  106. package/themes/ByuiFooter.vue +38 -38
  107. package/themes/ByuiHeader.vue +96 -96
  108. package/themes/LdsbcFooter.vue +38 -38
  109. package/themes/LdsbcHeader.vue +100 -100
  110. package/vuexModules/application/activity.js +32 -32
  111. package/vuexModules/application/applicationList.js +71 -71
  112. package/vuexModules/application/background.js +47 -47
  113. package/vuexModules/application/bio.js +38 -38
  114. package/vuexModules/application/citizenship.js +30 -30
  115. package/vuexModules/application/collegeSummaries.js +32 -32
  116. package/vuexModules/application/essay.js +26 -26
  117. package/vuexModules/application/highSchoolSummaries.js +40 -40
  118. package/vuexModules/application/index.js +157 -157
  119. package/vuexModules/application/institute.js +30 -30
  120. package/vuexModules/application/mission.js +48 -48
  121. package/vuexModules/application/personalRecords.js +24 -24
  122. package/vuexModules/application/questions.js +23 -23
  123. package/vuexModules/application/seminary.js +39 -39
  124. package/vuexModules/application/testScores.js +26 -26
  125. package/vuexModules/notes/index.js +22 -22
  126. package/vuexModules/packet/decision.js +43 -43
  127. package/vuexModules/packet/decisionHistory.js +28 -28
  128. package/vuexModules/packet/flags.js +174 -174
  129. package/vuexModules/packet/index.js +52 -52
  130. package/vuexModules/packet/packetList.js +127 -127
  131. package/vuexModules/packet/processes.js +28 -28
  132. package/vuexModules/reports/index.js +32 -32
  133. package/vuexModules/ui/index.js +56 -56
  134. package/vuexModules/users/index.js +46 -46
  135. package/yyyyMmFilter.js +7 -7
@@ -1,123 +1,123 @@
1
- <template>
2
- <section class="content-padding">
3
- <div v-if="errorText" class="alert alert-danger" role="alert">
4
- {{errorText}}
5
- </div>
6
- <div class="card-container">
7
- <div class="admin-card" v-for="admin of admins" :key="admin.byuId">
8
- <h2>{{admin.name}}</h2>
9
- <div>Role: <strong>{{admin.role}}</strong></div>
10
- <span>{{admin.count}} currently assigned.</span>
11
- <span>
12
- <button
13
- class="btn btn-sm btn-outline-secondary"
14
- @click="reassign(admin.byuId, admin.count)"
15
- >
16
- Reassign
17
- </button>
18
- </span>
19
- <div><button
20
- class="btn btn-sm btn-outline-primary"
21
- @click="viewList(admin.byuId)"
22
- >
23
- View List
24
- </button></div>
25
- </div>
26
- </div>
27
- <Report
28
- :baseUrl="baseUrl"
29
- reportName="adminAssignments"
30
- load-data
31
- @reportData="dataLoaded"
32
- hide-description
33
- />
34
- <v-dialog />
35
- <AssignmentBulkDialog />
36
- </section>
37
- </template>
38
- <script>
39
- import AssignmentBulkDialog from './AssignmentBulkDialog'
40
- import Report from './Report'
41
-
42
- import { mapState, mapGetters } from 'vuex'
43
-
44
- export default {
45
- name: 'AdminReport',
46
- components: {
47
- AssignmentBulkDialog,
48
- Report
49
- },
50
- props: {
51
- baseUrl: {
52
- type: String,
53
- required: true
54
- },
55
- detailPath: {
56
- type: String,
57
- default: '/list/'
58
- }
59
- },
60
- data() {
61
- return {
62
- admins: []
63
- }
64
- },
65
- computed: {
66
- ...mapGetters(['loading']),
67
- ...mapState({
68
- errorText: state => state.apiError.message
69
- })
70
- },
71
- methods: {
72
- reassign (byuId, count) {
73
- this.$modal.show('assignment-bulk-modal', { byuId, count })
74
- },
75
- viewList (byuId) {
76
- this.$router.push(`${this.detailPath}${byuId}`)
77
- },
78
- dataLoaded (e) {
79
- console.log(`dataLoaded`)
80
- console.log(`e=${e}`)
81
- const { data } = e
82
- console.log(`data=${data}`)
83
- this.admins = data.map(r => {
84
- const [count, name, role, byuId] = r
85
- return { count, name, role, byuId }
86
- })
87
- }
88
- }
89
- }
90
- </script>
91
- <style scoped>
92
- .card-container {
93
- display: grid;
94
- grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
95
- grid-auto-rows: auto;
96
- grid-gap: 0.5rem;
97
- }
98
-
99
- .admin-card {
100
- border: thin solid var(--light);
101
- padding: 0.5rem;
102
- box-shadow: 0rem 0.05rem 0.5rem rgba(0, 0, 0, 0.1);
103
- display: grid;
104
- grid-template-columns: 1fr 1fr;
105
- grid-auto-rows: auto;
106
- grid-gap: 0.5rem;
107
- }
108
-
109
- .admin-card > * {
110
- grid-column: auto / span 2
111
- }
112
-
113
- .admin-card > span {
114
- grid-column: auto / span 1
115
- }
116
-
117
- .admin-card > h2 {
118
- background-color: var(--primary);
119
- color: var(--white);
120
- margin: -0.5rem;
121
- padding: 0.25rem 1rem;
122
- }
123
- </style>
1
+ <template>
2
+ <section class="content-padding">
3
+ <div v-if="errorText" class="alert alert-danger" role="alert">
4
+ {{errorText}}
5
+ </div>
6
+ <div class="card-container">
7
+ <div class="admin-card" v-for="admin of admins" :key="admin.byuId">
8
+ <h2>{{admin.name}}</h2>
9
+ <div>Role: <strong>{{admin.role}}</strong></div>
10
+ <span>{{admin.count}} currently assigned.</span>
11
+ <span>
12
+ <button
13
+ class="btn btn-sm btn-outline-secondary"
14
+ @click="reassign(admin.byuId, admin.count)"
15
+ >
16
+ Reassign
17
+ </button>
18
+ </span>
19
+ <div><button
20
+ class="btn btn-sm btn-outline-primary"
21
+ @click="viewList(admin.byuId)"
22
+ >
23
+ View List
24
+ </button></div>
25
+ </div>
26
+ </div>
27
+ <Report
28
+ :baseUrl="baseUrl"
29
+ reportName="adminAssignments"
30
+ load-data
31
+ @reportData="dataLoaded"
32
+ hide-description
33
+ />
34
+ <v-dialog />
35
+ <AssignmentBulkDialog />
36
+ </section>
37
+ </template>
38
+ <script>
39
+ import AssignmentBulkDialog from './AssignmentBulkDialog'
40
+ import Report from './Report'
41
+
42
+ import { mapState, mapGetters } from 'vuex'
43
+
44
+ export default {
45
+ name: 'AdminReport',
46
+ components: {
47
+ AssignmentBulkDialog,
48
+ Report
49
+ },
50
+ props: {
51
+ baseUrl: {
52
+ type: String,
53
+ required: true
54
+ },
55
+ detailPath: {
56
+ type: String,
57
+ default: '/list/'
58
+ }
59
+ },
60
+ data() {
61
+ return {
62
+ admins: []
63
+ }
64
+ },
65
+ computed: {
66
+ ...mapGetters(['loading']),
67
+ ...mapState({
68
+ errorText: state => state.apiError.message
69
+ })
70
+ },
71
+ methods: {
72
+ reassign (byuId, count) {
73
+ this.$modal.show('assignment-bulk-modal', { byuId, count })
74
+ },
75
+ viewList (byuId) {
76
+ this.$router.push(`${this.detailPath}${byuId}`)
77
+ },
78
+ dataLoaded (e) {
79
+ console.log(`dataLoaded`)
80
+ console.log(`e=${e}`)
81
+ const { data } = e
82
+ console.log(`data=${data}`)
83
+ this.admins = data.map(r => {
84
+ const [count, name, role, byuId] = r
85
+ return { count, name, role, byuId }
86
+ })
87
+ }
88
+ }
89
+ }
90
+ </script>
91
+ <style scoped>
92
+ .card-container {
93
+ display: grid;
94
+ grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
95
+ grid-auto-rows: auto;
96
+ grid-gap: 0.5rem;
97
+ }
98
+
99
+ .admin-card {
100
+ border: thin solid var(--light);
101
+ padding: 0.5rem;
102
+ box-shadow: 0rem 0.05rem 0.5rem rgba(0, 0, 0, 0.1);
103
+ display: grid;
104
+ grid-template-columns: 1fr 1fr;
105
+ grid-auto-rows: auto;
106
+ grid-gap: 0.5rem;
107
+ }
108
+
109
+ .admin-card > * {
110
+ grid-column: auto / span 2
111
+ }
112
+
113
+ .admin-card > span {
114
+ grid-column: auto / span 1
115
+ }
116
+
117
+ .admin-card > h2 {
118
+ background-color: var(--primary);
119
+ color: var(--white);
120
+ margin: -0.5rem;
121
+ padding: 0.25rem 1rem;
122
+ }
123
+ </style>
package/NoAuth.vue CHANGED
@@ -1,14 +1,14 @@
1
- <template>
2
- <section class="m-auto">
3
- <p>You do not currently have access to this system. If you are an employee in the admissions
4
- office, please contact your supervisor.</p>
5
- <p class="mt-3">
6
- You may have an expired session. Try <a href="/login">Logging in</a> again.
7
- </p>
8
- </section>
9
- </template>
10
- <script>
11
- export default {
12
- name: 'NoAuth'
13
- }
14
- </script>
1
+ <template>
2
+ <section class="m-auto">
3
+ <p>You do not currently have access to this system. If you are an employee in the admissions
4
+ office, please contact your supervisor.</p>
5
+ <p class="mt-3">
6
+ You may have an expired session. Try <a href="/login">Logging in</a> again.
7
+ </p>
8
+ </section>
9
+ </template>
10
+ <script>
11
+ export default {
12
+ name: 'NoAuth'
13
+ }
14
+ </script>
package/NoteDialog.vue CHANGED
@@ -1,106 +1,106 @@
1
- <!--
2
- Copyright 2018 Brigham Young University
3
-
4
- Licensed under the Apache License, Version 2.0 (the "License");
5
- you may not use this file except in compliance with the License.
6
- You may obtain a copy of the License at
7
-
8
- http://www.apache.org/licenses/LICENSE-2.0
9
-
10
- Unless required by applicable law or agreed to in writing, software
11
- distributed under the License is distributed on an "AS IS" BASIS,
12
- WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13
- See the License for the specific language governing permissions and
14
- limitations under the License.
15
- -->
16
- <template>
17
- <modal
18
- name="note-modal"
19
- height="auto"
20
- draggable
21
- >
22
- <div class="bg-light p-1 text-uppercase">Add Note</div>
23
- <div class="note-dialog content-padding">
24
- <div v-if="categories.length > 0">
25
- <select v-model="selectedCategory" class="form-control">
26
- <option value="" class="text-muted">Category (optional)</option>
27
- <option v-for="category of categories" :key="category" :value="category">{{category}}</option>
28
- </select>
29
- </div>
30
- <textarea v-model="note" class="new-note form-control" placeholder="Note..."></textarea>
31
- <span class="modal-footer">
32
- <template v-if="showNextAction">
33
- <span>Next Action:</span>
34
- <input type="date" v-model="nextAction">
35
- </template>
36
- <template v-if="note.length>=400">
37
- <div class="p-1 text-uppercase">Note length greater than 400 characters. Note will be split into 2 or more smaller notes.</div>
38
- </template>
39
- <button class="btn btn-outline-primary" @click="saveNote" :disabled="note.length<1">Save</button>
40
- <button class="btn btn-outline-secondary" @click="close">Cancel</button>
41
- </span>
42
- </div>
43
- </modal>
44
- </template>
45
- <script>
46
- import { mapActions } from 'vuex'
47
-
48
- export default {
49
- name: 'NoteDialog',
50
- props: {
51
- appId: {
52
- type: String,
53
- required: true
54
- },
55
- showNextAction: {
56
- type: Boolean
57
- },
58
- categories: {
59
- type: Array,
60
- default() { return [] }
61
- }
62
- },
63
- data() {
64
- return {
65
- nextAction: '',
66
- note: '',
67
- selectedCategory: ''
68
- }
69
- },
70
- methods: {
71
- ...mapActions(['insertNote', 'fetchNotes']),
72
- close () {
73
- this.$modal.hide('note-modal')
74
- },
75
- async saveNote () {
76
- const appId = this.appId
77
- const payload = {
78
- applicationUuid: appId,
79
- nextAction: this.nextAction,
80
- status: 'INCOMPLETE',
81
- note: this.note,
82
- category: this.selectedCategory
83
- }
84
- await this.insertNote(payload)
85
- await this.fetchNotes(appId)
86
- this.$modal.hide('note-modal')
87
- }
88
- }
89
- }
90
- </script>
91
- <style scoped>
92
- .note-dialog {
93
- display: grid;
94
- grid-template-columns: 1fr;
95
- grid-template-rows: 1fr auto;
96
- height: 100%;
97
- min-height: 15rem;
98
- }
99
- .edit-area {
100
- display: flex;
101
- flex-direction: column;
102
- }
103
- .new-note {
104
- height: 17rem;
105
- }
106
- </style>
1
+ <!--
2
+ Copyright 2018 Brigham Young University
3
+
4
+ Licensed under the Apache License, Version 2.0 (the "License");
5
+ you may not use this file except in compliance with the License.
6
+ You may obtain a copy of the License at
7
+
8
+ http://www.apache.org/licenses/LICENSE-2.0
9
+
10
+ Unless required by applicable law or agreed to in writing, software
11
+ distributed under the License is distributed on an "AS IS" BASIS,
12
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13
+ See the License for the specific language governing permissions and
14
+ limitations under the License.
15
+ -->
16
+ <template>
17
+ <modal
18
+ name="note-modal"
19
+ height="auto"
20
+ draggable
21
+ >
22
+ <div class="bg-light p-1 text-uppercase">Add Note</div>
23
+ <div class="note-dialog content-padding">
24
+ <div v-if="categories.length > 0">
25
+ <select v-model="selectedCategory" class="form-control">
26
+ <option value="" class="text-muted">Category (optional)</option>
27
+ <option v-for="category of categories" :key="category" :value="category">{{category}}</option>
28
+ </select>
29
+ </div>
30
+ <textarea v-model="note" class="new-note form-control" placeholder="Note..."></textarea>
31
+ <span class="modal-footer">
32
+ <template v-if="showNextAction">
33
+ <span>Next Action:</span>
34
+ <input type="date" v-model="nextAction">
35
+ </template>
36
+ <template v-if="note.length>=400">
37
+ <div class="p-1 text-uppercase">Note length greater than 400 characters. Note will be split into 2 or more smaller notes.</div>
38
+ </template>
39
+ <button class="btn btn-outline-primary" @click="saveNote" :disabled="note.length<1">Save</button>
40
+ <button class="btn btn-outline-secondary" @click="close">Cancel</button>
41
+ </span>
42
+ </div>
43
+ </modal>
44
+ </template>
45
+ <script>
46
+ import { mapActions } from 'vuex'
47
+
48
+ export default {
49
+ name: 'NoteDialog',
50
+ props: {
51
+ appId: {
52
+ type: String,
53
+ required: true
54
+ },
55
+ showNextAction: {
56
+ type: Boolean
57
+ },
58
+ categories: {
59
+ type: Array,
60
+ default() { return [] }
61
+ }
62
+ },
63
+ data() {
64
+ return {
65
+ nextAction: '',
66
+ note: '',
67
+ selectedCategory: ''
68
+ }
69
+ },
70
+ methods: {
71
+ ...mapActions(['insertNote', 'fetchNotes']),
72
+ close () {
73
+ this.$modal.hide('note-modal')
74
+ },
75
+ async saveNote () {
76
+ const appId = this.appId
77
+ const payload = {
78
+ applicationUuid: appId,
79
+ nextAction: this.nextAction,
80
+ status: 'INCOMPLETE',
81
+ note: this.note,
82
+ category: this.selectedCategory
83
+ }
84
+ await this.insertNote(payload)
85
+ await this.fetchNotes(appId)
86
+ this.$modal.hide('note-modal')
87
+ }
88
+ }
89
+ }
90
+ </script>
91
+ <style scoped>
92
+ .note-dialog {
93
+ display: grid;
94
+ grid-template-columns: 1fr;
95
+ grid-template-rows: 1fr auto;
96
+ height: 100%;
97
+ min-height: 15rem;
98
+ }
99
+ .edit-area {
100
+ display: flex;
101
+ flex-direction: column;
102
+ }
103
+ .new-note {
104
+ height: 17rem;
105
+ }
106
+ </style>
package/ObjectViewer.vue CHANGED
@@ -1,49 +1,49 @@
1
- <template>
2
- <ul>
3
- <li
4
- v-for="(item, i) of arrData"
5
- :key="i"
6
- >
7
- <ObjectViewer v-if="Array.isArray(item)" :arrData="item" />
8
- <ObjectViewer v-else-if="typeof item === 'object'" :objData="item" />
9
- <template v-else>{{item}}</template>
10
- </li>
11
- <li
12
- v-for="(value, key) of objData"
13
- :key="key"
14
- >
15
- <template v-if="Array.isArray(value)">
16
- {{ key | formatObjectKey }}
17
- <ObjectViewer :arrData="value" />
18
- </template>
19
- <template v-else-if="typeof value === 'object'">
20
- {{ key | formatObjectKey }}
21
- <ObjectViewer :objData="value" />
22
- </template>
23
- <template v-else><strong>{{ key | formatObjectKey }}</strong>: {{value}}</template>
24
- </li>
25
- </ul>
26
- </template>
27
- <script>
28
- export default {
29
- name: 'ObjectViewer',
30
- filters: {
31
- formatObjectKey (val) {
32
- if(!val) return ''
33
- if(/ /.test(val)) return val
34
- if(/_/.test(val)) {
35
- const words = val.split(/_/)
36
- return words.map(w => w.slice(0, 1).toLocaleUpperCase().concat(w.slice(1))).join(' ')
37
- }
38
- if(/[A-Z]/.test(val)) {
39
- return val.replace(/([^A-Z]*)([A-Z])/g, (match, lc, uc) => `${lc} ${uc}`).replace(/^[a-z]/, m => m.toLocaleUpperCase())
40
- }
41
- return val
42
- }
43
- },
44
- props: {
45
- objData: Object,
46
- arrData: Array
47
- }
48
- }
49
- </script>
1
+ <template>
2
+ <ul>
3
+ <li
4
+ v-for="(item, i) of arrData"
5
+ :key="i"
6
+ >
7
+ <ObjectViewer v-if="Array.isArray(item)" :arrData="item" />
8
+ <ObjectViewer v-else-if="typeof item === 'object'" :objData="item" />
9
+ <template v-else>{{item}}</template>
10
+ </li>
11
+ <li
12
+ v-for="(value, key) of objData"
13
+ :key="key"
14
+ >
15
+ <template v-if="Array.isArray(value)">
16
+ {{ key | formatObjectKey }}
17
+ <ObjectViewer :arrData="value" />
18
+ </template>
19
+ <template v-else-if="typeof value === 'object'">
20
+ {{ key | formatObjectKey }}
21
+ <ObjectViewer :objData="value" />
22
+ </template>
23
+ <template v-else><strong>{{ key | formatObjectKey }}</strong>: {{value}}</template>
24
+ </li>
25
+ </ul>
26
+ </template>
27
+ <script>
28
+ export default {
29
+ name: 'ObjectViewer',
30
+ filters: {
31
+ formatObjectKey (val) {
32
+ if(!val) return ''
33
+ if(/ /.test(val)) return val
34
+ if(/_/.test(val)) {
35
+ const words = val.split(/_/)
36
+ return words.map(w => w.slice(0, 1).toLocaleUpperCase().concat(w.slice(1))).join(' ')
37
+ }
38
+ if(/[A-Z]/.test(val)) {
39
+ return val.replace(/([^A-Z]*)([A-Z])/g, (match, lc, uc) => `${lc} ${uc}`).replace(/^[a-z]/, m => m.toLocaleUpperCase())
40
+ }
41
+ return val
42
+ }
43
+ },
44
+ props: {
45
+ objData: Object,
46
+ arrData: Array
47
+ }
48
+ }
49
+ </script>