From 8740130eaabf20df2894d6ff2476b09fbe15001c Mon Sep 17 00:00:00 2001
From: Dsaquel <291874700n@gmail.com>
Date: Sun, 6 Jul 2025 20:00:03 +0200
Subject: [PATCH] chore: bindings wip

---
 .../components/select/src/flat-select.vue     | 32 +++----------------
 packages/components/select/src/options.ts     |  8 ++---
 packages/components/select/src/select.ts      |  6 +++-
 packages/components/select/src/select.vue     | 10 +++++-
 .../components/select/src/useFlatSelect.ts    |  4 +--
 5 files changed, 24 insertions(+), 36 deletions(-)

diff --git a/packages/components/select/src/flat-select.vue b/packages/components/select/src/flat-select.vue
index 647ecb391d..4014b443ef 100644
--- a/packages/components/select/src/flat-select.vue
+++ b/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,
     }
   },
 })
diff --git a/packages/components/select/src/options.ts b/packages/components/select/src/options.ts
index 4d7052040c..85f23484f9 100644
--- a/packages/components/select/src/options.ts
+++ b/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
         }
       }
 
diff --git a/packages/components/select/src/select.ts b/packages/components/select/src/select.ts
index ffb05bece0..ac66157ff6 100644
--- a/packages/components/select/src/select.ts
+++ b/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
diff --git a/packages/components/select/src/select.vue b/packages/components/select/src/select.vue
index d3e3e570e3..f550bf16db 100644
--- a/packages/components/select/src/select.vue
+++ b/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,
     }
   },
 })
diff --git a/packages/components/select/src/useFlatSelect.ts b/packages/components/select/src/useFlatSelect.ts
index 2aba93547e..ee20c8f105 100644
--- a/packages/components/select/src/useFlatSelect.ts
+++ b/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')