@pocketprep/ui-kit 3.0.5 → 3.0.7

package/lib/components/Forms/Select.vue

@@ -106,14 +106,13 @@
                         'uikit-select__item--link': item.type === 'link',
                         'uikit-select__item--subtext': item.subtext
                     }"
-                    :value="item.value || undefined"
+                    :data-value="item.value || undefined"
                     tabindex="0"
                     @click="selectItem(item)"
                     @keydown="keyPressedItem"
                     @mousedown.prevent
                 >
                     {{ item.label }}
-
                     <div
                         v-if="item.subtext"
                         v-dark="isDarkMode"
@@ -252,7 +251,7 @@ export default class Select extends Vue {
         // select option on enter or space or tab (but not shift tab)
         if (e.key === 'Enter' || e.key === ' ') {
             e.preventDefault()
-            const itemValue = (e.target as HTMLElement).getAttribute('value')
+            const itemValue = (e.target as HTMLElement).getAttribute('data-value')
             const item = this.filteredData.find(i => itemValue ? String(i.value) === itemValue : i.value === null);
             (this.$refs['uikit-select__input-container'] as HTMLElement).focus()
             item && this.selectItem(item)
@@ -264,7 +263,7 @@ export default class Select extends Vue {
         // navigate items with up key
         if (e.key === 'ArrowUp') {
             e.preventDefault()
-            const itemValue = (e.target as HTMLElement).getAttribute('value')
+            const itemValue = (e.target as HTMLElement).getAttribute('data-value')
             const itemIndex = this.filteredData.findIndex(
                 i => itemValue ? String(i.value) === itemValue : i.value === null
             )
@@ -273,8 +272,8 @@ export default class Select extends Vue {
             const items = this.$refs['uikit-select__items'] as HTMLElement[]
             const prevItem = items.find(
                 item => prevValue
-                    ? String(prevValue) === item.getAttribute('value')
-                    : item.getAttribute('value') === null
+                    ? String(prevValue) === item.getAttribute('data-value')
+                    : item.getAttribute('data-value') === null
             )
             if (prevItem) {
                 prevItem.focus()
@@ -286,15 +285,15 @@ export default class Select extends Vue {
         if (e.key === 'ArrowDown') {
             e.preventDefault()
             const data = this.filteredData
-            const itemValue = (e.target as HTMLElement).getAttribute('value')
+            const itemValue = (e.target as HTMLElement).getAttribute('data-value')
             const itemIndex = data.findIndex(i => itemValue ? String(i.value) === itemValue : i.value === null)
             const nextIndex = itemIndex >= data.length - 1 ? data.length - 1 : itemIndex + 1
             const nextValue = this.filteredData[nextIndex]?.value
             const items = this.$refs['uikit-select__items'] as HTMLElement[]
             const nextItem = items.find(
                 item => nextValue
-                    ? String(nextValue) === item.getAttribute('value') 
-                    : item.getAttribute('value') === null
+                    ? String(nextValue) === item.getAttribute('data-value') 
+                    : item.getAttribute('data-value') === null
             )
             if (nextItem) {
                 nextItem.focus()
@@ -319,8 +318,8 @@ export default class Select extends Vue {
             const items = this.$refs['uikit-select__items'] as HTMLElement[]
             const firstItem = items.find(
                 item => firstValue
-                    ? String(firstValue) === item.getAttribute('value') 
-                    : item.getAttribute('value') === null
+                    ? String(firstValue) === item.getAttribute('data-value') 
+                    : item.getAttribute('data-value') === null
             )
             if (firstItem) {
                 firstItem.focus()

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pocketprep/ui-kit",
-  "version": "3.0.5",
+  "version": "3.0.7",
   "description": "Pocket Prep UI Kit",
   "author": "pocketprep",
   "scripts": {

package/stylelint.config.cjs

@@ -8,7 +8,7 @@ module.exports = {
         'selector-pseudo-class-no-unknown': [
             true,
             {
-                'ignorePseudoClasses': [ 'export', ':deep' ],
+                'ignorePseudoClasses': [ 'export', 'deep' ],
             },
         ],
         'selector-pseudo-element-no-unknown': null,