@pocketprep/ui-kit 3.5.1 → 3.5.2

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 (6) hide show
  1. package/dist/@pocketprep/ui-kit.js +121 -120
  2. package/dist/@pocketprep/ui-kit.js.map +1 -1
  3. package/dist/@pocketprep/ui-kit.umd.cjs +1 -1
  4. package/dist/@pocketprep/ui-kit.umd.cjs.map +1 -1
  5. package/lib/components/Bundles/BundleSearch.vue +122 -121
  6. package/package.json +1 -1
package/lib/components/Bundles/BundleSearch.vue CHANGED
@@ -5,159 +5,160 @@
5
5
  class="uikit-exam-search"
6
6
  :class="{ 'uikit-exam-search--bundle-selected': selectedBundle }"
7
7
  >
8
- <Search
9
- v-if="examSearchContainer"
10
- v-model="examSearchString"
11
- v-breakpoint="{
12
- breakpoints: { small: smallBreakpoint },
13
- containerEl: examSearchContainer
14
- }"
15
- class="uikit-exam-search__search"
16
- placeholder="Search exams"
17
- type="white"
18
- :is-dark-mode="isDarkMode"
19
- />
20
- <div
21
- v-if="examSearchString"
22
- v-breakpoint="{
23
- breakpoints: { small: smallBreakpoint },
24
- containerEl: examSearchContainer
25
- }"
26
- class="uikit-exam-search__search-results"
27
- >
28
- <div class="uikit-exam-search__search-results-header">
29
- <span
30
- v-dark="isDarkMode"
31
- class="uikit-exam-search__search-results-count"
32
- aria-live="polite"
33
- role="alert"
34
- >
35
- {{ filteredExams.length }} Search Result{{ filteredExams.length !== 1 ? 's' : '' }}
36
- </span>
37
- <Button
38
- class="uikit-exam-search__search-reset-btn"
39
- type="tertiary-small"
40
- :is-dark-mode="isDarkMode"
41
- @click="examSearchString = ''"
42
- >
43
- Browse Instead
44
- </Button>
45
- </div>
46
- <ul class="uikit-exam-search__search-results-list">
47
- <ExamCard
48
- v-for="exam in filteredExams"
49
- :key="exam.objectId"
50
- v-breakpoint="{
51
- breakpoints: { small: smallBreakpoint },
52
- containerEl: examSearchContainer
53
- }"
54
- :is-premium="premiumExamIds.includes(exam.objectId)"
55
- :exam="exam"
56
- :bundle="exam.bundle"
57
- class="uikit-exam-search__search-results-card"
58
- :is-selected="selectedExam && selectedExam.objectId === exam.objectId"
59
- :is-dark-mode="isDarkMode"
60
- @select="selectExam(exam)"
61
- />
62
- <div class="uikit-exam-search__exam-list-padding" />
63
- </ul>
64
- </div>
65
- <div
66
- v-else
67
- class="uikit-exam-search__bundle-search"
68
- :class="{ 'uikit-exam-search__bundle-search--bundle-selected': selectedBundle }"
69
- >
70
- <div
8
+ <template v-if="examSearchContainer">
9
+ <Search
10
+ v-model="examSearchString"
71
11
  v-breakpoint="{
72
12
  breakpoints: { small: smallBreakpoint },
73
13
  containerEl: examSearchContainer
74
14
  }"
75
- class="uikit-exam-search__bundle-list"
76
- >
77
- <div class="uikit-exam-search__browse-industry-text">
78
- <span v-if="!selectedBundle">or </span>browse by industry
79
- </div>
80
- <BundleList
81
- v-model="selectedBundle"
82
- :bundles="bundles"
83
- :is-dark-mode="isDarkMode"
84
- :premium-bundle-ids="!selectedBundle ? premiumBundleIds : []"
85
- />
86
- </div>
87
- <div
88
- v-if="selectedBundle"
15
+ class="uikit-exam-search__search"
16
+ placeholder="Search exams"
17
+ type="white"
18
+ :is-dark-mode="isDarkMode"
19
+ />
20
+ <div
21
+ v-if="examSearchString"
89
22
  v-breakpoint="{
90
23
  breakpoints: { small: smallBreakpoint },
91
24
  containerEl: examSearchContainer
92
25
  }"
93
- class="uikit-exam-search__bundle-exam-container"
26
+ class="uikit-exam-search__search-results"
27
+ >
28
+ <div class="uikit-exam-search__search-results-header">
29
+ <span
30
+ v-dark="isDarkMode"
31
+ class="uikit-exam-search__search-results-count"
32
+ aria-live="polite"
33
+ role="alert"
34
+ >
35
+ {{ filteredExams.length }} Search Result{{ filteredExams.length !== 1 ? 's' : '' }}
36
+ </span>
37
+ <Button
38
+ class="uikit-exam-search__search-reset-btn"
39
+ type="tertiary-small"
40
+ :is-dark-mode="isDarkMode"
41
+ @click="examSearchString = ''"
42
+ >
43
+ Browse Instead
44
+ </Button>
45
+ </div>
46
+ <ul class="uikit-exam-search__search-results-list">
47
+ <ExamCard
48
+ v-for="exam in filteredExams"
49
+ :key="exam.objectId"
50
+ v-breakpoint="{
51
+ breakpoints: { small: smallBreakpoint },
52
+ containerEl: examSearchContainer
53
+ }"
54
+ :is-premium="premiumExamIds.includes(exam.objectId)"
55
+ :exam="exam"
56
+ :bundle="exam.bundle"
57
+ class="uikit-exam-search__search-results-card"
58
+ :is-selected="selectedExam && selectedExam.objectId === exam.objectId"
59
+ :is-dark-mode="isDarkMode"
60
+ @select="selectExam(exam)"
61
+ />
62
+ <div class="uikit-exam-search__exam-list-padding" />
63
+ </ul>
64
+ </div>
65
+ <div
66
+ v-else
67
+ class="uikit-exam-search__bundle-search"
68
+ :class="{ 'uikit-exam-search__bundle-search--bundle-selected': selectedBundle }"
94
69
  >
95
- <div
70
+ <div
96
71
  v-breakpoint="{
97
72
  breakpoints: { small: smallBreakpoint },
98
73
  containerEl: examSearchContainer
99
74
  }"
100
- class="uikit-exam-search__bundle-exam-container-top"
75
+ class="uikit-exam-search__bundle-list"
101
76
  >
102
- <PocketButton
103
- v-breakpoint="{
104
- breakpoints: { small: smallBreakpoint },
105
- containerEl: examSearchContainer
106
- }"
107
- class="uikit-exam-search__bundle-exam-back"
77
+ <div class="uikit-exam-search__browse-industry-text">
78
+ <span v-if="!selectedBundle">or </span>browse by industry
79
+ </div>
80
+ <BundleList
81
+ v-model="selectedBundle"
82
+ :bundles="bundles"
108
83
  :is-dark-mode="isDarkMode"
109
- type="tertiary"
110
- @click="selectedBundle = null"
111
- >
112
- <Icon type="arrow" /> Back to Browse
113
- </PocketButton>
114
- <span
84
+ :premium-bundle-ids="!selectedBundle ? premiumBundleIds : []"
85
+ />
86
+ </div>
87
+ <div
88
+ v-if="selectedBundle"
89
+ v-breakpoint="{
90
+ breakpoints: { small: smallBreakpoint },
91
+ containerEl: examSearchContainer
92
+ }"
93
+ class="uikit-exam-search__bundle-exam-container"
94
+ >
95
+ <div
115
96
  v-breakpoint="{
116
97
  breakpoints: { small: smallBreakpoint },
117
98
  containerEl: examSearchContainer
118
99
  }"
119
- class="uikit-exam-search__bundle-exam-count"
120
- tabindex="-1"
121
- >
122
- {{ selectedBundleExams.length }}
123
- {{ selectedBundle.name }}
124
- Exam{{ selectedBundleExams.length > 1 ? 's' : '' }}
125
- </span>
126
- </div>
127
- <div
128
- :key="selectedBundle.objectId"
129
- class="uikit-exam-search__bundle-exam-list-container"
130
- >
131
- <div
132
- :key="selectedBundle.objectId"
133
- class="uikit-exam-search__bundle-exam-list"
100
+ class="uikit-exam-search__bundle-exam-container-top"
134
101
  >
135
- <ExamCard
136
- v-for="exam in selectedBundleExams"
137
- :key="exam.objectId"
102
+ <PocketButton
138
103
  v-breakpoint="{
139
104
  breakpoints: { small: smallBreakpoint },
140
105
  containerEl: examSearchContainer
141
106
  }"
142
- :exam="exam"
107
+ class="uikit-exam-search__bundle-exam-back"
143
108
  :is-dark-mode="isDarkMode"
144
- :bundle="exam.bundle"
145
- class="uikit-exam-search__search-results-card"
146
- :is-premium="premiumExamIds.includes(exam.objectId)"
147
- :is-selected="selectedExam && selectedExam.objectId === exam.objectId"
148
- @select="selectExam(exam)"
149
- />
150
- <div
109
+ type="tertiary"
110
+ @click="selectedBundle = null"
111
+ >
112
+ <Icon type="arrow" /> Back to Browse
113
+ </PocketButton>
114
+ <span
151
115
  v-breakpoint="{
152
116
  breakpoints: { small: smallBreakpoint },
153
117
  containerEl: examSearchContainer
154
118
  }"
155
- class="uikit-exam-search__exam-list-padding"
156
- />
119
+ class="uikit-exam-search__bundle-exam-count"
120
+ tabindex="-1"
121
+ >
122
+ {{ selectedBundleExams.length }}
123
+ {{ selectedBundle.name }}
124
+ Exam{{ selectedBundleExams.length > 1 ? 's' : '' }}
125
+ </span>
126
+ </div>
127
+ <div
128
+ :key="selectedBundle.objectId"
129
+ class="uikit-exam-search__bundle-exam-list-container"
130
+ >
131
+ <div
132
+ :key="selectedBundle.objectId"
133
+ class="uikit-exam-search__bundle-exam-list"
134
+ >
135
+ <ExamCard
136
+ v-for="exam in selectedBundleExams"
137
+ :key="exam.objectId"
138
+ v-breakpoint="{
139
+ breakpoints: { small: smallBreakpoint },
140
+ containerEl: examSearchContainer
141
+ }"
142
+ :exam="exam"
143
+ :is-dark-mode="isDarkMode"
144
+ :bundle="exam.bundle"
145
+ class="uikit-exam-search__search-results-card"
146
+ :is-premium="premiumExamIds.includes(exam.objectId)"
147
+ :is-selected="selectedExam && selectedExam.objectId === exam.objectId"
148
+ @select="selectExam(exam)"
149
+ />
150
+ <div
151
+ v-breakpoint="{
152
+ breakpoints: { small: smallBreakpoint },
153
+ containerEl: examSearchContainer
154
+ }"
155
+ class="uikit-exam-search__exam-list-padding"
156
+ />
157
+ </div>
157
158
  </div>
158
159
  </div>
159
160
  </div>
160
- </div>
161
+ </template>
161
162
  </div>
162
163
  </template>
163
164
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pocketprep/ui-kit",
3
- "version": "3.5.1",
3
+ "version": "3.5.2",
4
4
  "description": "Pocket Prep UI Kit",
5
5
  "author": "pocketprep",
6
6
  "scripts": {