chore: bindings wip

packages/components/select/src/flat-select.vue

@@ -54,20 +54,18 @@
 </template>
 
 <script lang="ts">
-//@ts-nocheck
 import {
   computed,
   defineComponent,
   getCurrentInstance,
+  inject,
   reactive,
   toRefs,
   watch,
 } from 'vue'
-import { ClickOutside } from '@element-plus/directives'
 import ElScrollbar from '@element-plus/components/scrollbar'
 import { CHANGE_EVENT, UPDATE_MODEL_EVENT } from '@element-plus/constants'
 import { flattedChildren, isArray, isObject } from '@element-plus/utils'
-import { useCalcInputWidth } from '@element-plus/hooks'
 import ElOption from './option.vue'
 import ElSelectMenu from './select-dropdown.vue'
 import ElOptions from './options'
@@ -86,18 +84,8 @@ export default defineComponent({
     ElOptions,
     ElScrollbar,
   },
-  directives: { ClickOutside },
   props: selectProps,
-  emits: [
-    UPDATE_MODEL_EVENT,
-    CHANGE_EVENT,
-    'remove-tag',
-    'clear',
-    'visible-change',
-    'focus',
-    'blur',
-    'popup-scroll',
-  ],
+  emits: [UPDATE_MODEL_EVENT, CHANGE_EVENT, 'popup-scroll'],
 
   setup(props, { emit, slots }) {
     const instance = getCurrentInstance()!
@@ -132,9 +120,7 @@ export default defineComponent({
       modelValue,
     })
 
-    //TODO:
-    //const API = useFlatSelect(_props, emit)
-    const { calculatorRef, inputStyle } = useCalcInputWidth()
+    const API = inject('flat-select', useFlatSelect(_props, emit))
 
     const flatTreeSelectData = (data: any[]) => {
       return data.reduce((acc, item) => {
@@ -152,9 +138,9 @@ export default defineComponent({
       // manually render and load option data here.
       const children = flattedChildren(vnodes || []) as VNode[]
       children.forEach((item) => {
-        // @ts-expect-error
         if (
           isObject(item) &&
+          // @ts-expect-error
           (item.type.name === 'ElOption' || item.type.name === 'ElTree')
         ) {
           // @ts-expect-error
@@ -196,19 +182,9 @@ export default defineComponent({
       }
     )
 
-    const selectedLabel = computed(() => {
-      if (!props.multiple) {
-        return API.states.selectedLabel
-      }
-      return API.states.selected.map((i) => i.currentLabel as string)
-    })
-
     return {
       ...API,
       modelValue,
-      selectedLabel,
-      calculatorRef,
-      inputStyle,
     }
   },
 })

packages/components/select/src/options.ts

@@ -1,7 +1,7 @@
 import { defineComponent, inject } from 'vue'
 import { isEqual } from 'lodash-unified'
 import { isArray, isFunction, isString } from '@element-plus/utils'
-import { selectKey } from './token'
+import { flatSelectKey } from './token'
 
 import type { Component, VNode, VNodeNormalizedChildren } from 'vue'
 import type { OptionValue } from './type'
@@ -9,7 +9,7 @@ import type { OptionValue } from './type'
 export default defineComponent({
   name: 'ElOptions',
   setup(_, { slots }) {
-    const select = inject(selectKey)
+    const flatSelect = inject(flatSelectKey)
     let cachedValueList: OptionValue[] = []
 
     return () => {
@@ -43,8 +43,8 @@ export default defineComponent({
 
       if (!isEqual(valueList, cachedValueList)) {
         cachedValueList = valueList
-        if (select) {
-          select.states.optionValues = valueList
+        if (flatSelect) {
+          flatSelect.states.optionValues = valueList
         }
       }
 

packages/components/select/src/select.ts

@@ -270,10 +270,13 @@ export const selectProps = buildProps({
   ...useAriaProps(['ariaLabel']),
 })
 /* eslint-disable @typescript-eslint/no-unused-vars */
-export const selectEmits = {
+export const flatSelectEmits = {
   [UPDATE_MODEL_EVENT]: (val: SelectProps['modelValue']) => true,
   [CHANGE_EVENT]: (val: SelectProps['modelValue']) => true,
   'popup-scroll': scrollbarEmits.scroll,
+}
+export const selectEmits = {
+  ...flatSelectEmits,
   'remove-tag': (val: unknown) => true,
   'visible-change': (visible: boolean) => true,
   focus: (evt: FocusEvent) => evt instanceof FocusEvent,
@@ -284,4 +287,5 @@ export const selectEmits = {
 
 export type SelectProps = ExtractPropTypes<typeof selectProps>
 export type SelectEmits = EmitFn<typeof selectEmits>
+export type FlatSelectEmits = EmitFn<typeof flatSelectEmits>
 export type SelectInstance = InstanceType<typeof Select> & unknown

packages/components/select/src/select.vue

@@ -256,7 +256,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive, toRefs } from 'vue'
+import { computed, defineComponent, reactive, toRefs } from 'vue'
 import { ClickOutside } from '@element-plus/directives'
 import ElTooltip from '@element-plus/components/tooltip'
 import ElScrollbar from '@element-plus/components/scrollbar'
@@ -302,10 +302,18 @@ export default defineComponent({
     const API = useSelect(_props, emit)
     const { calculatorRef, inputStyle } = useCalcInputWidth()
 
+    const selectedLabel = computed(() => {
+      if (!props.multiple) {
+        return API.states.selectedLabel
+      }
+      return API.states.selected.map((i) => i.currentLabel as string)
+    })
+
     return {
       ...API,
       calculatorRef,
       inputStyle,
+      selectedLabel,
     }
   },
 })

packages/components/select/src/useFlatSelect.ts

@@ -28,10 +28,10 @@ import {
 import { flatSelectKey } from './token'
 
 import type { ScrollbarInstance } from '@element-plus/components/scrollbar'
-import type { SelectEmits, SelectProps } from './select'
+import type { FlatSelectEmits, SelectProps } from './select'
 import type { OptionPublicInstance, OptionValue, SelectStates } from './type'
 
-export const useFlatSelect = (props: SelectProps, emit: SelectEmits) => {
+export const useFlatSelect = (props: SelectProps, emit: FlatSelectEmits) => {
   const { t } = useLocale()
   const contentId = useId()
   const nsSelect = useNamespace('select')