@byu-oit/vue-decision-processing-components 8.35.8 → 8.35.10

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 (136) hide show
  1. package/.github/CODEOWNERS +1 -0
  2. package/.github/workflows/deploy.yml +40 -50
  3. package/.repo-meta.yml +55 -55
  4. package/AdmitPeriodConfig.vue +115 -115
  5. package/ApiCallButton.vue +91 -91
  6. package/ApplicantInfo.vue +100 -100
  7. package/AssignmentBulkDialog.vue +153 -153
  8. package/AssignmentDialog.vue +117 -117
  9. package/AssignmentSummary.vue +75 -75
  10. package/BackgroundBadge.vue +83 -83
  11. package/BackgroundDetailCrime.vue +78 -78
  12. package/BackgroundDetailPluralMarriage.vue +43 -43
  13. package/BackgroundDetailSexRegistry.vue +43 -43
  14. package/BackgroundDetailUniversity.vue +37 -37
  15. package/CHANGELOG.md +676 -676
  16. package/Dashboard.vue +201 -201
  17. package/DashboardApplicationList.vue +50 -50
  18. package/DecisionDialog.vue +178 -178
  19. package/Details.vue +124 -124
  20. package/DetailsActivity.vue +59 -59
  21. package/DetailsBackground.vue +143 -143
  22. package/DetailsBackgroundDetail.vue +47 -47
  23. package/DetailsBackgroundSummary.vue +66 -66
  24. package/DetailsCesHold.vue +107 -107
  25. package/DetailsCollege.vue +93 -93
  26. package/DetailsContact.vue +65 -65
  27. package/DetailsDecision.vue +183 -183
  28. package/DetailsDecisionHistory.vue +56 -56
  29. package/DetailsEndorsement.vue +74 -74
  30. package/DetailsEssay.vue +59 -59
  31. package/DetailsFilenote.vue +62 -62
  32. package/DetailsFilenoteList.vue +109 -109
  33. package/DetailsFlagSection.vue +176 -176
  34. package/DetailsHeader.vue +263 -263
  35. package/DetailsHighSchool.vue +99 -99
  36. package/DetailsHsTranscript.vue +100 -100
  37. package/DetailsInstitute.vue +90 -90
  38. package/DetailsMission.vue +88 -88
  39. package/DetailsNewAppHistory.vue +50 -50
  40. package/DetailsNotes.vue +83 -83
  41. package/DetailsPathway.vue +45 -45
  42. package/DetailsScoringSection.vue +128 -128
  43. package/DetailsSection.vue +116 -116
  44. package/DetailsSeminary.vue +184 -184
  45. package/DetailsSrs.vue +52 -52
  46. package/DetailsSubnav.vue +54 -54
  47. package/DetailsTestScores.vue +131 -131
  48. package/ExpandIndicator.vue +75 -75
  49. package/ExternalLink.vue +34 -34
  50. package/FilterBreadcrumb.vue +85 -85
  51. package/FilterButton.vue +86 -86
  52. package/FilterButtonAdmitPeriod.vue +104 -104
  53. package/FilterButtonAppType.vue +103 -103
  54. package/FilterButtonAssignedTo.vue +96 -96
  55. package/FilterButtonClearFilters.vue +65 -65
  56. package/FilterButtonSex.vue +105 -105
  57. package/FlagButton.vue +59 -59
  58. package/FlagDialog.vue +129 -129
  59. package/Footer.vue +432 -432
  60. package/Header.vue +132 -132
  61. package/HighSchoolSummary.vue +60 -60
  62. package/InternationalIndicator.vue +44 -44
  63. package/InternationalStatus.vue +48 -48
  64. package/LICENSE +201 -201
  65. package/LoadingBadge.vue +58 -58
  66. package/ManageAssignments.vue +123 -123
  67. package/NoAuth.vue +14 -14
  68. package/NoteDialog.vue +106 -106
  69. package/ObjectViewer.vue +49 -49
  70. package/Queues.vue +278 -268
  71. package/QuickLinks.vue +25 -25
  72. package/README.md +2 -2
  73. package/RecentApplications.vue +53 -53
  74. package/Report.vue +340 -340
  75. package/ReportDetail.vue +279 -279
  76. package/ReportList.vue +87 -87
  77. package/ReportPhotos.vue +65 -65
  78. package/ReportSvg.vue +78 -78
  79. package/ReportViewer.vue +165 -165
  80. package/RequestAccess.vue +14 -14
  81. package/RequestAccessList.vue +45 -45
  82. package/RoleSelector.vue +29 -29
  83. package/Search.vue +22 -22
  84. package/ShowApplicantIds.vue +100 -100
  85. package/SortableHeader.vue +53 -53
  86. package/Spinner.vue +34 -34
  87. package/StarredIndicator.vue +36 -36
  88. package/StatBox.vue +73 -73
  89. package/StatCharts.vue +196 -196
  90. package/SupportDialog.vue +172 -172
  91. package/UserInfo.vue +52 -52
  92. package/YesNoIndicator.vue +48 -48
  93. package/dateTimeFormat.js +67 -67
  94. package/gpaCalculation.js +162 -162
  95. package/gpaFilter.js +5 -5
  96. package/hsSummary.json +2019 -2019
  97. package/package.json +37 -36
  98. package/parsers/application.js +396 -396
  99. package/parsers/decisionHistory.js +27 -27
  100. package/parsers/filenotes.js +27 -27
  101. package/parsers/notes.js +49 -49
  102. package/parsers/packet.js +88 -88
  103. package/parsers/packetList.js +57 -57
  104. package/parsers/reports.js +13 -13
  105. package/sat2Act.js +46 -46
  106. package/test.js +48 -48
  107. package/themes/ByuiFooter.vue +38 -38
  108. package/themes/ByuiHeader.vue +96 -96
  109. package/themes/LdsbcFooter.vue +38 -38
  110. package/themes/LdsbcHeader.vue +100 -100
  111. package/vuexModules/application/activity.js +32 -32
  112. package/vuexModules/application/applicationList.js +71 -71
  113. package/vuexModules/application/background.js +47 -47
  114. package/vuexModules/application/bio.js +38 -38
  115. package/vuexModules/application/citizenship.js +30 -30
  116. package/vuexModules/application/collegeSummaries.js +32 -32
  117. package/vuexModules/application/essay.js +26 -26
  118. package/vuexModules/application/highSchoolSummaries.js +40 -40
  119. package/vuexModules/application/index.js +157 -157
  120. package/vuexModules/application/institute.js +30 -30
  121. package/vuexModules/application/mission.js +48 -48
  122. package/vuexModules/application/personalRecords.js +24 -24
  123. package/vuexModules/application/questions.js +23 -23
  124. package/vuexModules/application/seminary.js +39 -39
  125. package/vuexModules/application/testScores.js +26 -26
  126. package/vuexModules/notes/index.js +22 -22
  127. package/vuexModules/packet/decision.js +43 -43
  128. package/vuexModules/packet/decisionHistory.js +28 -28
  129. package/vuexModules/packet/flags.js +174 -174
  130. package/vuexModules/packet/index.js +52 -52
  131. package/vuexModules/packet/packetList.js +127 -127
  132. package/vuexModules/packet/processes.js +28 -28
  133. package/vuexModules/reports/index.js +32 -32
  134. package/vuexModules/ui/index.js +56 -56
  135. package/vuexModules/users/index.js +46 -46
  136. 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>