feat(components): [cascader] Adjust expose and typo (#11781)

* feat(components): [cascader] Adjust expose and typo

* feat(components): [cascader] instances rename

packages/components/cascader-panel/index.ts

@@ -12,3 +12,4 @@ export default _CascaderPanel
 export const ElCascaderPanel = _CascaderPanel
 export * from './src/types'
 export * from './src/config'
+export * from './src/instance'

packages/components/cascader-panel/src/instance.ts

@@ -0,0 +1,3 @@
+import type CascaderPanel from './index.vue'
+
+export type CascaderPanelInstance = InstanceType<typeof CascaderPanel>

packages/components/cascader/src/cascader.vue

@@ -140,7 +140,7 @@
     <template #content>
       <el-cascader-panel
         v-show="!filtering"
-        ref="panel"
+        ref="cascaderPanelRef"
         v-model="checkedValue"
         :options="options"
         :props="props.props"
@@ -207,17 +207,19 @@ import {
 } from '@element-plus/constants'
 import { ArrowDown, Check, CircleClose } from '@element-plus/icons-vue'
 import { cascaderEmits, cascaderProps } from './cascader'
+
 import type { Options } from '@element-plus/components/popper'
 import type { ComputedRef, Ref, StyleValue } from 'vue'
+import type { TooltipInstance } from '@element-plus/components/tooltip'
+import type { InputInstance } from '@element-plus/components/input'
+import type { ScrollbarInstance } from '@element-plus/components/scrollbar'
 import type {
   CascaderNode,
+  CascaderPanelInstance,
   CascaderValue,
   Tag,
 } from '@element-plus/components/cascader-panel'
-type cascaderPanelType = InstanceType<typeof ElCascaderPanel>
-type tooltipType = InstanceType<typeof ElTooltip>
-type inputType = InstanceType<typeof ElInput>
-type suggestionPanelType = InstanceType<typeof ElScrollbar>
+
 const popperOptions: Partial<Options> = {
   modifiers: [
     {
@@ -252,11 +254,11 @@ const nsInput = useNamespace('input')
 const { t } = useLocale()
 const { form, formItem } = useFormItem()
 
-const tooltipRef: Ref<tooltipType | null> = ref(null)
-const input: Ref<inputType | null> = ref(null)
+const tooltipRef: Ref<TooltipInstance | null> = ref(null)
+const input: Ref<InputInstance | null> = ref(null)
 const tagWrapper = ref(null)
-const panel: Ref<cascaderPanelType | null> = ref(null)
-const suggestionPanel: Ref<suggestionPanelType | null> = ref(null)
+const cascaderPanelRef: Ref<CascaderPanelInstance | null> = ref(null)
+const suggestionPanel: Ref<ScrollbarInstance | null> = ref(null)
 const popperVisible = ref(false)
 const inputHover = ref(false)
 const filtering = ref(false)
@@ -293,7 +295,7 @@ const searchKeyword = computed(() =>
   multiple.value ? searchInputValue.value : inputValue.value
 )
 const checkedNodes: ComputedRef<CascaderNode[]> = computed(
-  () => panel.value?.checkedNodes || []
+  () => cascaderPanelRef.value?.checkedNodes || []
 )
 const clearBtnVisible = computed(() => {
   if (
@@ -329,10 +331,6 @@ const checkedValue = computed<CascaderValue>({
   },
 })
 
-const cascaderPanelRef = computed(() => {
-  return tooltipRef.value?.popperRef?.contentRef
-})
-
 const cascaderKls = computed(() => {
   return [
     nsCascader.b(),
@@ -365,7 +363,7 @@ const togglePopperVisible = (visible?: boolean) => {
 
     if (visible) {
       updatePopperPosition()
-      nextTick(panel.value?.scrollToExpandingNode)
+      nextTick(cascaderPanelRef.value?.scrollToExpandingNode)
     } else if (props.filterable) {
       syncPresentTextValue()
     }
@@ -399,7 +397,7 @@ const genTag = (node: CascaderNode): Tag => {
 const deleteTag = (tag: Tag) => {
   const node = tag.node as CascaderNode
   node.doCheck(false)
-  panel.value?.calculateCheckedValue()
+  cascaderPanelRef.value?.calculateCheckedValue()
   emit('removeTag', node.valueByOption)
 }
 
@@ -438,7 +436,7 @@ const calculatePresentTags = () => {
 
 const calculateSuggestions = () => {
   const { filterMethod, showAllLevels, separator } = props
-  const res = panel.value
+  const res = cascaderPanelRef.value
     ?.getFlattedNodes(!props.props.checkStrictly)
     ?.filter((node) => {
       if (node.isDisabled) return false
@@ -468,7 +466,7 @@ const focusFirstNode = () => {
       `.${nsCascader.e('suggestion-item')}`
     )
   } else {
-    firstNode = panel.value?.$el.querySelector(
+    firstNode = cascaderPanelRef.value?.$el.querySelector(
       `.${nsCascader.b('node')}[tabindex="-1"]`
     )
   }
@@ -505,7 +503,7 @@ const updateStyle = () => {
 }
 
 const getCheckedNodes = (leafOnly: boolean) => {
-  return panel.value?.getCheckedNodes(leafOnly)
+  return cascaderPanelRef.value?.getCheckedNodes(leafOnly)
 }
 
 const handleExpandChange = (value: CascaderValue) => {
@@ -550,7 +548,7 @@ const handleKeyDown = (e: KeyboardEvent) => {
 }
 
 const handleClear = () => {
-  panel.value?.clearCheckedNodes()
+  cascaderPanelRef.value?.clearCheckedNodes()
   if (!popperVisible.value && props.filterable) {
     syncPresentTextValue()
   }
@@ -567,9 +565,9 @@ const handleSuggestionClick = (node: CascaderNode) => {
   const { checked } = node
 
   if (multiple.value) {
-    panel.value?.handleCheckChange(node, !checked, false)
+    cascaderPanelRef.value?.handleCheckChange(node, !checked, false)
   } else {
-    !checked && panel.value?.handleCheckChange(node, true, false)
+    !checked && cascaderPanelRef.value?.handleCheckChange(node, true, false)
     togglePopperVisible(false)
   }
 }