@pocketprep/ui-kit 3.0.6 → 3.0.8
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.js +164 -164
- 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/Radio.vue +2 -2
- package/lib/components/Forms/Select.vue +10 -11
- package/package.json +1 -1
|
@@ -27,7 +27,7 @@
|
|
|
27
27
|
ref="uikit-radio__item"
|
|
28
28
|
v-dark="isDarkMode"
|
|
29
29
|
class="uikit-radio__item"
|
|
30
|
-
:value="item.value"
|
|
30
|
+
:data-value="item.value"
|
|
31
31
|
:tabindex="disabled ? -1 : 0"
|
|
32
32
|
:class="{
|
|
33
33
|
'uikit-radio__item--selected': modelValue && item.value === modelValue.value,
|
|
@@ -107,7 +107,7 @@ export default class Radio extends Vue {
|
|
|
107
107
|
// select option on enter or space
|
|
108
108
|
if (e.key === 'Enter' || e.key === ' ') {
|
|
109
109
|
e.preventDefault()
|
|
110
|
-
const itemValue = (e.target as HTMLElement).getAttribute('value')
|
|
110
|
+
const itemValue = (e.target as HTMLElement).getAttribute('data-value')
|
|
111
111
|
const item = this.data.find(i => String(i.value) === itemValue)
|
|
112
112
|
item && this.selectItem(item)
|
|
113
113
|
}
|
|
@@ -106,14 +106,13 @@
|
|
|
106
106
|
'uikit-select__item--link': item.type === 'link',
|
|
107
107
|
'uikit-select__item--subtext': item.subtext
|
|
108
108
|
}"
|
|
109
|
-
:value="item.value || undefined"
|
|
109
|
+
:data-value="item.value || undefined"
|
|
110
110
|
tabindex="0"
|
|
111
111
|
@click="selectItem(item)"
|
|
112
112
|
@keydown="keyPressedItem"
|
|
113
113
|
@mousedown.prevent
|
|
114
114
|
>
|
|
115
115
|
{{ item.label }}
|
|
116
|
-
|
|
117
116
|
<div
|
|
118
117
|
v-if="item.subtext"
|
|
119
118
|
v-dark="isDarkMode"
|
|
@@ -252,7 +251,7 @@ export default class Select extends Vue {
|
|
|
252
251
|
// select option on enter or space or tab (but not shift tab)
|
|
253
252
|
if (e.key === 'Enter' || e.key === ' ') {
|
|
254
253
|
e.preventDefault()
|
|
255
|
-
const itemValue = (e.target as HTMLElement).getAttribute('value')
|
|
254
|
+
const itemValue = (e.target as HTMLElement).getAttribute('data-value')
|
|
256
255
|
const item = this.filteredData.find(i => itemValue ? String(i.value) === itemValue : i.value === null);
|
|
257
256
|
(this.$refs['uikit-select__input-container'] as HTMLElement).focus()
|
|
258
257
|
item && this.selectItem(item)
|
|
@@ -264,7 +263,7 @@ export default class Select extends Vue {
|
|
|
264
263
|
// navigate items with up key
|
|
265
264
|
if (e.key === 'ArrowUp') {
|
|
266
265
|
e.preventDefault()
|
|
267
|
-
const itemValue = (e.target as HTMLElement).getAttribute('value')
|
|
266
|
+
const itemValue = (e.target as HTMLElement).getAttribute('data-value')
|
|
268
267
|
const itemIndex = this.filteredData.findIndex(
|
|
269
268
|
i => itemValue ? String(i.value) === itemValue : i.value === null
|
|
270
269
|
)
|
|
@@ -273,8 +272,8 @@ export default class Select extends Vue {
|
|
|
273
272
|
const items = this.$refs['uikit-select__items'] as HTMLElement[]
|
|
274
273
|
const prevItem = items.find(
|
|
275
274
|
item => prevValue
|
|
276
|
-
? String(prevValue) === item.getAttribute('value')
|
|
277
|
-
: item.getAttribute('value') === null
|
|
275
|
+
? String(prevValue) === item.getAttribute('data-value')
|
|
276
|
+
: item.getAttribute('data-value') === null
|
|
278
277
|
)
|
|
279
278
|
if (prevItem) {
|
|
280
279
|
prevItem.focus()
|
|
@@ -286,15 +285,15 @@ export default class Select extends Vue {
|
|
|
286
285
|
if (e.key === 'ArrowDown') {
|
|
287
286
|
e.preventDefault()
|
|
288
287
|
const data = this.filteredData
|
|
289
|
-
const itemValue = (e.target as HTMLElement).getAttribute('value')
|
|
288
|
+
const itemValue = (e.target as HTMLElement).getAttribute('data-value')
|
|
290
289
|
const itemIndex = data.findIndex(i => itemValue ? String(i.value) === itemValue : i.value === null)
|
|
291
290
|
const nextIndex = itemIndex >= data.length - 1 ? data.length - 1 : itemIndex + 1
|
|
292
291
|
const nextValue = this.filteredData[nextIndex]?.value
|
|
293
292
|
const items = this.$refs['uikit-select__items'] as HTMLElement[]
|
|
294
293
|
const nextItem = items.find(
|
|
295
294
|
item => nextValue
|
|
296
|
-
? String(nextValue) === item.getAttribute('value')
|
|
297
|
-
: item.getAttribute('value') === null
|
|
295
|
+
? String(nextValue) === item.getAttribute('data-value')
|
|
296
|
+
: item.getAttribute('data-value') === null
|
|
298
297
|
)
|
|
299
298
|
if (nextItem) {
|
|
300
299
|
nextItem.focus()
|
|
@@ -319,8 +318,8 @@ export default class Select extends Vue {
|
|
|
319
318
|
const items = this.$refs['uikit-select__items'] as HTMLElement[]
|
|
320
319
|
const firstItem = items.find(
|
|
321
320
|
item => firstValue
|
|
322
|
-
? String(firstValue) === item.getAttribute('value')
|
|
323
|
-
: item.getAttribute('value') === null
|
|
321
|
+
? String(firstValue) === item.getAttribute('data-value')
|
|
322
|
+
: item.getAttribute('data-value') === null
|
|
324
323
|
)
|
|
325
324
|
if (firstItem) {
|
|
326
325
|
firstItem.focus()
|