refactor(select): support keyboard scroll when virtual

package.json

@@ -134,6 +134,6 @@
     "vooks": "0.0.1-alpha.1",
     "vue": "^3.0.2",
     "vue-runtime-helpers": "^1.1.2",
-    "vueuc": "0.1.0-alpha.3"
+    "vueuc": "0.1.0-alpha.5"
   }
 }

src/_base/select-menu/src/SelectMenu.vue

@@ -26,6 +26,7 @@
         :items="tmNodes"
         :item-size="itemSize"
         :show-scrollbar="false"
+        :default-scroll-index="defaultScrollIndex"
         @resize="handleListResize"
         @scroll="handleListScroll"
       >
@@ -160,6 +161,11 @@ export default {
   setup (props) {
     const virtualListRef = ref(null)
     const scrollbarRef = ref(null)
+    const pendingNodeRef = ref(
+      props.autoPendingFirstOption
+        ? props.treeMate.getFirstAvailableNode()
+        : null
+    )
     onMounted(() => {
       const {
         value
@@ -182,11 +188,8 @@ export default {
         } = virtualListRef
         return value && value.itemsRef
       },
-      pendingTmNode: ref(
-        props.autoPendingFirstOption
-          ? props.treeMate.getFirstAvailableNode()
-          : null
-      )
+      pendingTmNode: pendingNodeRef,
+      defaultScrollIndex: pendingNodeRef.value?.fIndex
     }
   },
   computed: {
@@ -266,7 +269,7 @@ export default {
         pendingTmNode
       } = this
       if (pendingTmNode) {
-        this.setPendingTmNode(pendingTmNode.getNext(), true)
+        this.setPendingTmNode(pendingTmNode.getNext({ loop: true }), true)
       }
     },
     prev () {
@@ -274,11 +277,17 @@ export default {
         pendingTmNode
       } = this
       if (pendingTmNode) {
-        this.setPendingTmNode(pendingTmNode.getPrev(), true)
+        this.setPendingTmNode(pendingTmNode.getPrev({ loop: true }), true)
       }
     },
     setPendingTmNode (tmNode, doScroll = false) {
       if (tmNode !== null) this.pendingTmNode = tmNode
+      if (doScroll && this.virtualScroll) {
+        const {
+          virtualListRef
+        } = this
+        virtualListRef.scrollTo({ index: tmNode.fIndex })
+      }
     }
   }
 }

src/anchor/src/Link.vue

@@ -19,8 +19,8 @@
 
 <script>
 import { toRef } from 'vue'
+import { useMemo } from 'vooks'
 import {
-  useMemo,
   useInjectionRef,
   useInjectionCollection,
   useInjectionElementCollection

src/dropdown/src/DropdownOption.js

@@ -3,7 +3,8 @@ import { render } from '../../_utils/vue'
 import { placeable } from '../../_mixins'
 import { ChevronRightIcon } from '../../_base/icons'
 import NIcon from '../../icon'
-import { useMemo, useDelayedTrue } from '../../_utils/composition'
+import { useMemo } from 'vooks'
+import { useDelayedTrue } from '../../_utils/composition'
 import NDropdownMenu from './DropdownMenu'
 import { isSubmenuNode } from './utils'
 

src/menu/src/MenuItem.vue

@@ -33,7 +33,8 @@ import { computed } from 'vue'
 import NMenuItemContent from './MenuItemContent.vue'
 import NTooltip from '../../tooltip'
 import menuChildMixin from './menu-child-mixin'
-import { useMemo, useInjectionRef } from '../../_utils/composition'
+import { useMemo } from 'vooks'
+import { useInjectionRef } from '../../_utils/composition'
 
 export default {
   name: 'MenuItem',

src/menu/src/Submenu.js

@@ -4,7 +4,8 @@ import NPopover from '../../popover/src/Popover'
 import NMenuItemContent from './MenuItemContent.vue'
 import menuChildMixin from './menu-child-mixin'
 import { itemRenderer } from './utils'
-import { useInjectionRef, useMemo } from '../../_utils/composition'
+import { useMemo } from 'vooks'
+import { useInjectionRef } from '../../_utils/composition'
 
 export default {
   name: 'Submenu',

src/modal/src/BodyWrapper.vue

@@ -85,7 +85,8 @@ import NCard from '../../card'
 import themeable from '../../_mixins/themeable'
 import presetProps from './presetProps'
 import clickoutside from '../../_directives/clickoutside'
-import { useLastClickPosition, useCompitable } from '../../_utils/composition'
+import { useCompitable } from 'vooks'
+import { useLastClickPosition } from '../../_utils/composition'
 
 export default {
   name: 'ModalBody',

src/tabs/src/Tabs.vue

@@ -104,7 +104,8 @@ import { VResizeObserver } from 'vueuc'
 import { throttle } from 'lodash-es'
 import styles from './styles'
 import { warn } from '../../_utils/naive/warn'
-import { onFontReady, useCompitable } from '../../_utils/composition'
+import { useCompitable } from 'vooks'
+import { onFontReady } from '../../_utils/composition'
 
 export default {
   name: 'Tabs',

vue3.md

@@ -56,6 +56,7 @@ placeable 进行了大调整
   - checkbox-group
     - deprecate
     - `on-change` => `on-update:value`
+  - TODO? API
 - [x] code
 - [x] collapse
   - deprecate
@@ -217,7 +218,7 @@ placeable 进行了大调整
   - deprecate
     - `on-change` => `on-update:value`
 - [x] progress
-- [x] radio
+- [ ] radio
   - radio-group
     - break
       - default `size` `'small'` => `'medium'`
@@ -225,6 +226,7 @@ placeable 进行了大调整
       - `on-change` => `on-update:value`
   - radio & radio-button
     - `on-change` => `on-update:checked-value`
+  - TODO: API
 - [x] result
 - [x] scrollbar
 - [ ] select