@pocketprep/ui-kit 3.8.2 → 3.8.4
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.
- package/dist/@pocketprep/ui-kit.css +1 -1
- package/dist/@pocketprep/ui-kit.js +2 -1
- package/dist/@pocketprep/ui-kit.js.map +1 -1
- package/dist/@pocketprep/ui-kit.umd.cjs +1 -1
- package/dist/@pocketprep/ui-kit.umd.cjs.map +1 -1
- package/lib/components/Forms/Select.vue +6 -1
- package/lib/components/Quiz/Question/ChoicesContainer.vue +1 -1
- package/lib/components/Tags/Tag.vue +28 -7
- package/package.json +1 -1
|
@@ -62,6 +62,7 @@
|
|
|
62
62
|
v-model="searchText"
|
|
63
63
|
v-dark="isDarkMode"
|
|
64
64
|
type="text"
|
|
65
|
+
ref="uikit-select__input"
|
|
65
66
|
class="uikit-select__input"
|
|
66
67
|
:class="{
|
|
67
68
|
'uikit-select__input--placeholder': !modelValue && !searchText,
|
|
@@ -218,7 +219,11 @@ export default class Select extends Vue {
|
|
|
218
219
|
|
|
219
220
|
mounted () {
|
|
220
221
|
if (this.autoFocus) {
|
|
221
|
-
(this
|
|
222
|
+
if (this.typeahead) {
|
|
223
|
+
(this.$refs['uikit-select__input'] as HTMLElement).focus()
|
|
224
|
+
} else {
|
|
225
|
+
(this.$refs['uikit-select__input-container'] as HTMLElement).focus()
|
|
226
|
+
}
|
|
222
227
|
}
|
|
223
228
|
|
|
224
229
|
if (this.typeahead && this.modelValue?.label) {
|
|
@@ -140,20 +140,20 @@ export default class Tag extends Vue {
|
|
|
140
140
|
}
|
|
141
141
|
|
|
142
142
|
&--active {
|
|
143
|
-
border:
|
|
143
|
+
border: 1px solid rgba($green, 0.6);
|
|
144
144
|
background: $meadow;
|
|
145
|
-
color: $
|
|
145
|
+
color: $brand-black;
|
|
146
146
|
}
|
|
147
147
|
|
|
148
148
|
&--pending {
|
|
149
|
-
border:
|
|
149
|
+
border: 1px solid $banana-bread;
|
|
150
150
|
background: $buttermilk;
|
|
151
|
-
color: $
|
|
151
|
+
color: $brand-black;
|
|
152
152
|
}
|
|
153
153
|
|
|
154
154
|
&--archived {
|
|
155
155
|
background: $fog;
|
|
156
|
-
color: $
|
|
156
|
+
color: $brand-black;
|
|
157
157
|
border-radius: 3px;
|
|
158
158
|
border: 1px solid rgba($pewter, 0.30);
|
|
159
159
|
|
|
@@ -165,27 +165,48 @@ export default class Tag extends Vue {
|
|
|
165
165
|
}
|
|
166
166
|
|
|
167
167
|
&--draft {
|
|
168
|
-
border:
|
|
168
|
+
border: 1px solid $banana-bread;
|
|
169
169
|
background: $buttermilk;
|
|
170
170
|
color: $brand-black;
|
|
171
|
+
|
|
172
|
+
&--dark {
|
|
173
|
+
background: rgba($banana-bread, 0.4);
|
|
174
|
+
border-color: rgba($buttermilk, 0.2);
|
|
175
|
+
color: $white;
|
|
176
|
+
}
|
|
171
177
|
}
|
|
172
178
|
|
|
173
179
|
&--available {
|
|
174
180
|
border: none;
|
|
175
181
|
background: $spectral-green;
|
|
176
182
|
color: $white;
|
|
183
|
+
|
|
184
|
+
&--dark {
|
|
185
|
+
background: $scifi-takeout;
|
|
186
|
+
}
|
|
177
187
|
}
|
|
178
188
|
|
|
179
189
|
&--closed {
|
|
180
190
|
border: 1px solid rgba($pewter, 0.3);
|
|
181
191
|
background: none;
|
|
182
192
|
color: $brand-black;
|
|
193
|
+
|
|
194
|
+
&--dark {
|
|
195
|
+
border-color: $slate;
|
|
196
|
+
color: $white;
|
|
197
|
+
}
|
|
183
198
|
}
|
|
184
199
|
|
|
185
200
|
&--upcoming {
|
|
186
|
-
border:
|
|
201
|
+
border: 1px solid rgba($spectral-green, 0.5);
|
|
187
202
|
background: rgba($spectral-green, 0.2);
|
|
188
203
|
color: $brand-black;
|
|
204
|
+
|
|
205
|
+
&--dark {
|
|
206
|
+
border-color: rgba($spectral-green, 0.8);
|
|
207
|
+
background: rgba($spectral-green, 0.5);
|
|
208
|
+
color: $white;
|
|
209
|
+
}
|
|
189
210
|
}
|
|
190
211
|
}
|
|
191
212
|
</style>
|