feat: update vc-select

Author: tangjinzhou

components/_util/props-util.js

@@ -52,9 +52,11 @@ const getSlots = (ele) => {
   const children = ele.children || componentOptions.children || []
   const slots = {}
   children.forEach(child => {
-    const name = (child.data && child.data.slot) || 'default'
-    slots[name] = slots[name] || []
-    slots[name].push(child)
+    if (!isEmptyElement(child)) {
+      const name = (child.data && child.data.slot) || 'default'
+      slots[name] = slots[name] || []
+      slots[name].push(child)
+    }
   })
   return slots
 }
@@ -213,12 +215,12 @@ export function getComponentName (opts) {
   return opts && (opts.Ctor.options.name || opts.tag)
 }
 
-export function isEmptyElement (ele) {
-  return !(ele.tag || ele.text.trim() !== '')
+export function isEmptyElement (c) {
+  return !(c.tag || (c.text && c.text.trim() !== ''))
 }
 
 export function filterEmpty (children = []) {
-  return children.filter(c => c.tag || (c.text && c.text.trim() !== ''))
+  return children.filter(c => !isEmptyElement(c))
 }
 const initDefaultProps = (propTypes, defaultProps) => {
   Object.keys(defaultProps).forEach(k => {

components/vc-select/DropdownMenu.jsx

@@ -11,6 +11,7 @@ export default {
   name: 'DropdownMenu',
   mixins: [BaseMixin],
   props: {
+    ariaId: PropTypes.string,
     defaultActiveFirstOption: PropTypes.bool,
     value: PropTypes.any,
     dropdownMenuStyle: PropTypes.object,
@@ -28,8 +29,10 @@ export default {
     menuItemSelectedIcon: PropTypes.any,
   },
 
-  beforeMount () {
+  created () {
+    this.rafInstance = { cancel: () => null }
     this.lastInputValue = this.$props.inputValue
+    this.lastVisible = false
   },
 
   mounted () {
@@ -101,6 +104,7 @@ export default {
         firstActiveValue,
         dropdownMenuStyle,
         backfillValue,
+        visible,
       } = props
       const menuItemSelectedIcon = getComponentFromProp(this, 'menuItemSelectedIcon')
       const { menuDeselect, menuSelect, popupScroll } = this.$listeners
@@ -136,16 +140,16 @@ export default {
         if (selectedKeys.length || firstActiveValue) {
           if (props.visible && !this.lastVisible) {
             activeKeyProps.activeKey = selectedKeys[0] !== undefined ? selectedKeys[0] : firstActiveValue
+          } else if (!visible) {
+            activeKeyProps.activeKey = undefined
           }
           let foundFirst = false
           // set firstActiveItem via cloning menus
           // for scroll into view
           const clone = item => {
             if (
               (!foundFirst && selectedKeys.indexOf(item.key) !== -1) ||
-            (!foundFirst &&
-              !selectedKeys.length &&
-              firstActiveValue.indexOf(item.key) !== -1)
+              (!foundFirst && !selectedKeys.length && firstActiveValue.indexOf(item.key) !== -1)
             ) {
               foundFirst = true
               return cloneElement(item, {
@@ -198,6 +202,8 @@ export default {
           overflow: 'auto',
           transform: 'translateZ(0)',
         }}
+        id={this.$props.ariaId}
+        tabIndex='-1'
         onFocus={popupFocus}
         onMousedown={preventDefaultEvent}
         onScroll={popupScroll}

components/vc-select/OptGroup.jsx

@@ -2,7 +2,14 @@
 import PropTypes from '../_util/vue-types'
 export default {
   props: {
-    label: PropTypes.any,
+    value: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.number,
+    ]),
+    label: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.number,
+    ]),
   },
   isSelectOptGroup: true,
 }

components/vc-select/Option.jsx

@@ -7,8 +7,15 @@ export default {
       PropTypes.string,
       PropTypes.number,
     ]),
+    label: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.number,
+    ]),
     disabled: PropTypes.bool,
-    title: PropTypes.string,
+    title: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.number,
+    ]),
   },
   isSelectOption: true,
 }

components/vc-select/PropTypes.js

@@ -31,6 +31,7 @@ export const SelectPropTypes = {
   placeholder: PropTypes.any,
   // onDeselect: PropTypes.func,
   labelInValue: PropTypes.bool,
+  loading: PropTypes.bool,
   value: PropTypes.any,
   defaultValue: PropTypes.any,
   dropdownStyle: PropTypes.object,
@@ -47,4 +48,12 @@ export const SelectPropTypes = {
   inputIcon: PropTypes.any,
   removeIcon: PropTypes.any,
   menuItemSelectedIcon: PropTypes.any,
+  dropdownRender: PropTypes.func,
+  mode: PropTypes.oneOf(['multiple', 'tags']),
+  backfill: PropTypes.bool,
+  dropdownAlign: PropTypes.any,
+  dropdownMatchSelectWidth: PropTypes.bool,
+  dropdownMenuStyle: PropTypes.object,
+  notFoundContent: PropTypes.oneOfType([String, Number]),
+  tabIndex: PropTypes.oneOfType([String, Number]),
 }