refactor(select): change slot api impl

packages/base/SelectMenu/index.js

@@ -7,7 +7,6 @@ import BaseSelectRenderOptions from './src/SelectRenderOptions'
 BaseSelectMenu.install = function (Vue) {
   Vue.component(BaseSelectMenu.name, BaseSelectMenu)
   Vue.component(BaseSelectOption.name, BaseSelectOption)
-  Vue.component('NSelectOption', BaseSelectOption)
   Vue.component(BaseSelectOptionCollector.name, BaseSelectOptionCollector)
 }
 

packages/base/SelectMenu/src/SelectMenu.vue

@@ -28,11 +28,10 @@
         <template v-if="!loading">
           <template v-if="!useSlot">
             <n-select-option
-              v-for="(option, index) in linkedOptions"
+              v-for="option in linkedOptions"
               :key="option.value"
               :label="option.label"
               :value="option.value"
-              :index="index"
               :disabled="option.disabled"
             />
           </template>
@@ -155,12 +154,12 @@ export default {
     }
   },
   computed: {
-    index2Id () {
-      const index2Id = new Map()
-      this.linkedOptions.forEach((option, index) => {
-        index2Id.set(index, option.id)
+    value2Id () {
+      const value2Id = new Map()
+      this.linkedOptions.forEach(option => {
+        value2Id.set(option.value, option.id)
       })
-      return index2Id
+      return value2Id
     },
     id2Option () {
       const id2Option = new Map()

packages/base/SelectMenu/src/SelectOption.vue

@@ -43,10 +43,6 @@ export default {
       validator () {
         return true
       },
-      default: undefined
-    },
-    index: {
-      type: Number,
       required: true
     },
     disabled: {
@@ -58,9 +54,9 @@ export default {
     isSelected () {
       return this.processedOption && this.NBaseSelectMenu.isSelected(this.processedOption)
     },
-    index2Id () {
+    value2Id () {
       if (this.NBaseSelectMenu) {
-        return this.NBaseSelectMenu.index2Id
+        return this.NBaseSelectMenu.value2Id
       } return null
     },
     id2Option () {
@@ -69,8 +65,8 @@ export default {
       } return null
     },
     optionId () {
-      if (this.index2Id === null) return null
-      return this.index2Id.get(this.index)
+      if (this.value2Id === null) return null
+      return this.value2Id.get(this.value)
     },
     processedOption () {
       if (this.id2Option === null) return null

packages/base/SelectMenu/src/SelectOptionCollector.vue

@@ -12,6 +12,12 @@ export default {
     },
     NAutoComplete: {
       default: null
+    },
+    NDropdownMenu: {
+      default: null
+    },
+    NDropdownSubmenu: {
+      default: null
     }
   },
   data () {
@@ -25,6 +31,8 @@ export default {
     injection () {
       if (this.NSelect) return this.NSelect
       if (this.NAutoComplete) return this.NAutoComplete
+      if (this.NDropdownMenu) return this.NDropdownMenu
+      if (this.NDropdownSubmenu) return this.NDropdownSubmenu
       return null
     }
   },
@@ -47,27 +55,20 @@ export default {
       if (this.stopCollecting || this.mounting) return
       this.options = []
       const children = this.$scopedSlots.default ? this.$scopedSlots.default() : []
-      children.forEach((child, index) => {
+      children.forEach(child => {
         const content = (child.componentOptions.children || []).map(c => c.text).join('').trim() || child.componentOptions.propsData.value
         child.key = child.componentOptions.propsData.value
         child.componentOptions.propsData = {
           label: content,
           ...child.componentOptions.propsData
         }
-        this.options.push({
-          ...child.componentOptions.propsData,
-          render: (index) => {
-            child.componentOptions.propsData.index = index
-            return child
-          }
-        })
+        this.options.push(child.componentOptions.propsData)
       })
     }
   },
   render (h) {
     const children = this.$scopedSlots.default ? this.$scopedSlots.default() : []
-    children.forEach((child, index) => {
-      child.componentOptions.propsData.index = index
+    children.forEach(child => {
       child.componentOptions.propsData.show = false
     })
     return h('div', {

packages/base/SelectMenu/src/SelectRenderOptions.vue

@@ -2,15 +2,17 @@
 export default {
   name: 'NSelectRenderOptions',
   functional: true,
-  props: {
-    options: {
-      type: Array,
-      default: null
-    }
-  },
   render (h, context) {
-    const options = context.props.options
-    return options.map((option, index) => option.render(index))
+    const defaultSlot = context.scopedSlots.default()
+    const filteredDefaultSlot = defaultSlot
+      .filter(vNode => {
+        const value = vNode.componentOptions.propsData.label || (vNode.componentOptions.children || []).map(c => c.text).join('').trim() || vNode.componentOptions.propsData.value
+        const filter = context.props.filter
+        if (filter) {
+          return filter(value)
+        } return true
+      })
+    return filteredDefaultSlot
   }
 }
 </script>

packages/common/Select/index.js

@@ -4,7 +4,7 @@ import SelectOption from './src/SelectOption'
 
 Select.install = function (Vue) {
   Vue.component(Select.name, Select)
-  Vue.component(SelectOption.name, SelectOption)
+  Vue.component('NSelectOption', SelectOption)
 }
 
 export default Select

packages/common/Select/src/Select.vue

@@ -76,7 +76,9 @@
             @menu-toggle-option="handleToggleOption"
             @menu-scroll="handleMenuScroll"
           >
-            <n-base-select-render-options v-if="useSlot" :options="filteredOptions" />
+            <n-base-select-render-options v-if="useSlot" :filter="patternMatched">
+              <slot />
+            </n-base-select-render-options>
           </n-base-select-menu>
         </transition>
       </div>

packages/common/Select/src/SelectOption.vue

@@ -1,7 +1,5 @@
 <script>
 import NBaseSelectOption from '../../../base/SelectMenu/src/SelectOption'
 
-NBaseSelectOption.name = 'NSelectOption'
-
 export default NBaseSelectOption
 </script>