wip (#3129)

epicmaxco · Mar 9, 2023 · 4a73ccb · 4a73ccb
1 parent c2f1480
commit 4a73ccb
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 17 deletions.
diff --git a/packages/ui/src/components/va-select/VaSelect.demo.vue b/packages/ui/src/components/va-select/VaSelect.demo.vue
@@ -858,8 +858,8 @@ export default {
       },
       disabledOptions: {
         options: [
-          { id: '0', text: 'one', value: 'one', disabled: true },
-          { id: '1', text: 'two', value: 'two' },
+          { id: '0', text: 'one', value: 'one' },
+          { id: '1', text: 'two', value: 'two', disabled: true },
           { id: '2', text: 'three', value: 'three', disabled: true },
           { id: '3', text: 'four', value: 'four' },
           { id: '4', text: 'five', value: 'five' },

diff --git a/packages/ui/src/components/va-select/VaSelect.vue b/packages/ui/src/components/va-select/VaSelect.vue
@@ -101,10 +101,8 @@
         v-model:hoveredOption="hoveredOption"
         :style="{ maxHeight: $props.maxHeight }"
         v-bind="optionsListPropsComputed"
-        @select-option="selectOption"
+        @select-option="selectHoveredOption"
         @no-previous-option-to-hover="focusSearchBar"
-        @keydown.enter.stop.prevent="selectHoveredOption"
-        @keydown.space.stop.prevent="selectHoveredOption"
         @keydown.tab.stop.prevent="searchBar && searchBar.focus()"
         @keydown="onHintedSearch"
         @scroll-bottom="onScrollBottom"
@@ -588,7 +586,7 @@ export default defineComponent({
     }))
 
     const optionsListPropsComputed = computed(() => ({
-      ...pick(props, ['textBy', 'trackBy', 'groupBy', 'valueBy', 'disabledBy', 'color', 'virtualScroller', 'highlightMatchedText', 'minSearchChars', 'delay']),
+      ...pick(props, ['textBy', 'trackBy', 'groupBy', 'valueBy', 'disabledBy', 'color', 'virtualScroller', 'highlightMatchedText', 'minSearchChars', 'delay', 'selectedTopShown']),
       autoSelectFirstOption: props.autoSelectFirstOption || props.autocomplete,
       search: searchInput.value || autocompleteValue.value,
       tabindex: tabIndexComputed.value,

diff --git a/packages/ui/src/components/va-select/components/VaSelectOptionList/VaSelectOptionList.vue b/packages/ui/src/components/va-select/components/VaSelectOptionList/VaSelectOptionList.vue
@@ -7,6 +7,8 @@
     @keydown.left.stop.prevent="focusPreviousOption"
     @keydown.down.stop.prevent="focusNextOption"
     @keydown.right.stop.prevent="focusNextOption"
+    @keydown.enter.stop.prevent="selectOption"
+    @keydown.space.stop.prevent="selectOption"
     @scroll.passive="onScroll"
   >
     <template
@@ -34,8 +36,9 @@
             :current-option="currentOptionComputed"
             :disabled="getDisabled(option)"
             v-bind="selectOptionProps"
-            @click.stop="selectOption(option)"
-            @mousemove="updateHoveredOption(option)"
+            @click.stop="selectOption"
+            @mouseenter="handleMouseEnter(option)"
+            @mousemove="handleMouseMove(option)"
           />
         </slot>
       </va-virtual-scroller>
@@ -49,8 +52,9 @@
               :option="option"
               :disabled="getDisabled(option)"
               v-bind="selectOptionProps"
-              @click.stop="selectOption(option)"
-              @mousemove="updateHoveredOption(option)"
+              @click.stop="selectOption"
+              @mouseenter="handleMouseEnter(option)"
+              @mousemove="handleMouseMove(option)"
             />
           </slot>
         </template>
@@ -111,6 +115,7 @@ export default defineComponent({
     highlightMatchedText: { type: Boolean, default: true },
     minSearchChars: { type: Number, default: 0 },
     autoSelectFirstOption: { type: Boolean, default: false },
+    selectedTopShown: { type: Boolean, default: false },
   },
 
   setup (props, { emit }) {
@@ -150,7 +155,7 @@ export default defineComponent({
       return currentSelectedOptionText.value.toLowerCase() === props.search?.toLowerCase()
     })
 
-    const filteredOptions = computed(() => {
+    const filteredOptions = computed((): SelectOption[] => {
       if (!props.search || props.search.length < props.minSearchChars || isSearchedOptionSelected.value) {
         return props.options
       }
@@ -187,7 +192,18 @@ export default defineComponent({
     }
     const updateFocusedOption = (option?: SelectOption) => { updateCurrentOption(option ?? null, 'keyboard') }
 
-    const selectOption = (option: SelectOption) => !getDisabled(option) && emit('select-option', option)
+    const selectOption = () => {
+      const previousOption =
+        previousOptionComputed.value && typeof previousOptionComputed.value === 'object'
+          ? { ...previousOptionComputed.value }
+          : previousOptionComputed.value
+
+      emit('select-option')
+
+      if (props.selectedTopShown) {
+        updateHoveredOption(previousOption)
+      }
+    }
 
     const groupedOptions = computed(() => Object.values(optionGroupsThrottled.value).flat())
     const currentOptions = computed(() =>
@@ -211,18 +227,35 @@ export default defineComponent({
       return searchBaseOrdered.slice(startIndex).find((option) => !getDisabled(option))
     }
 
+    const previousOptionComputed = computed((): SelectOption | undefined => {
+      const previousOptionIndex = currentOptionIndex.value - 1
+      const previousOption = currentOptions.value[previousOptionIndex]
+      const previousOptionCheck = isValueExists(previousOption) && !(previousOptionIndex === 0 && getDisabled(previousOption))
+
+      if (previousOptionCheck) {
+        return findNextActiveOption(currentOptionIndex.value - 1, true)
+      }
+
+      return undefined
+    })
+
+    const handleMouseMove = (option: SelectOption) => {
+      if (!props.selectedTopShown) { updateHoveredOption(option) }
+    }
+
+    const handleMouseEnter = (option: SelectOption) => {
+      if (props.selectedTopShown) { updateHoveredOption(option) }
+    }
+
     // public
     const focusPreviousOption = () => {
       if (!isValueExists(currentOptionComputed.value)) {
         updateFocusedOption(findNextActiveOption(0, true))
         return
       }
 
-      const previousOptionIndex = currentOptionIndex.value - 1
-      const previousOption = currentOptions.value[previousOptionIndex]
-      const previousOptionCheck = isValueExists(previousOption) && !(previousOptionIndex === 0 && getDisabled(previousOption))
-      if (previousOptionCheck) {
-        updateFocusedOption(findNextActiveOption(currentOptionIndex.value - 1, true))
+      if (isValueExists(previousOptionComputed.value)) {
+        updateFocusedOption(previousOptionComputed.value)
       } else {
         emit('no-previous-option-to-hover')
       }
@@ -289,6 +322,8 @@ export default defineComponent({
       setItemRef,
       getDisabled,
       selectOption,
+      handleMouseMove,
+      handleMouseEnter,
       updateHoveredOption,
       handleScrollToBottom,