style(eslint-config): add rules to restrict the imports of element-plus (#20959)

* style(eslint-config): add rules to restrict the imports of element-plus

* chore: added validation for tsx files

* chore: revert the shell

docs/examples/image/custom-toolbar.vue

@@ -37,7 +37,7 @@
 </template>
 
 <script lang="ts" setup>
-import ElIcon from '@element-plus/components/icon'
+import { ElIcon } from 'element-plus'
 import {
   Back,
   DArrowRight,

docs/examples/table-v2/dynamic-height.vue

@@ -19,7 +19,7 @@ import {
   TableV2FixedDir,
   TableV2SortOrder,
 } from 'element-plus'
-import type { Column, SortBy } from '@element-plus/components/table-v2'
+import type { Column, SortBy } from 'element-plus'
 
 const longText =
   'Quaerat ipsam necessitatibus eum quibusdam est id voluptatem cumque mollitia.'

docs/examples/tree-v2/custom-node-class.vue

@@ -9,10 +9,7 @@
 </template>
 
 <script lang="ts" setup>
-import type {
-  TreeNode,
-  TreeNodeData,
-} from 'element-plus/es/components/tree-v2/src/types'
+import type { TreeNode, TreeNodeData } from 'element-plus'
 
 interface Tree {
   id?: string

docs/examples/tree-v2/filter.vue

@@ -18,7 +18,7 @@
 <script lang="ts" setup>
 import { ref } from 'vue'
 import { ElTreeV2 } from 'element-plus'
-import type { TreeNodeData } from 'element-plus/es/components/tree-v2/src/types'
+import type { TreeNodeData } from 'element-plus'
 
 interface Tree {
   id: string

docs/examples/tree/checking-tree.vue

@@ -21,14 +21,14 @@
 
 <script lang="ts" setup>
 import { ref } from 'vue'
-import type { TreeInstance } from 'element-plus'
-import type Node from 'element-plus/es/components/tree/src/model/node'
+import type { RenderContentContext, TreeInstance } from 'element-plus'
 
 interface Tree {
   id: number
   label: string
   children?: Tree[]
 }
+type Node = RenderContentContext['node']
 
 const treeRef = ref<TreeInstance>()
 

docs/examples/tree/custom-leaf.vue

@@ -9,7 +9,7 @@
 </template>
 
 <script lang="ts" setup>
-import type Node from 'element-plus/es/components/tree/src/model/node'
+import type { LoadFunction } from 'element-plus'
 
 interface Tree {
   name: string
@@ -22,7 +22,7 @@ const props = {
   isLeaf: 'leaf',
 }
 
-const loadNode = (node: Node, resolve: (data: Tree[]) => void) => {
+const loadNode: LoadFunction = (node, resolve) => {
   if (node.level === 0) {
     return resolve([{ name: 'region' }])
   }

docs/examples/tree/custom-node-class.vue

@@ -13,8 +13,7 @@
 </template>
 
 <script lang="ts" setup>
-import type Node from 'element-plus/es/components/tree/src/model/node'
-import type { TreeNodeData } from 'element-plus/es/components/tree/src/tree.type'
+import type { TreeNodeData } from 'element-plus'
 
 interface Tree {
   id: number
@@ -23,7 +22,7 @@ interface Tree {
   children?: Tree[]
 }
 
-const customNodeClass = ({ isPenultimate }: TreeNodeData, node: Node) =>
+const customNodeClass = ({ isPenultimate }: TreeNodeData) =>
   isPenultimate ? 'is-penultimate' : ''
 
 const data: Tree[] = [

docs/examples/tree/customized-node.vue

@@ -44,16 +44,19 @@
 <script lang="ts" setup>
 import { ref } from 'vue'
 import { ElButton } from 'element-plus'
-import type Node from 'element-plus/es/components/tree/src/model/node'
+import type { RenderContentContext, RenderContentFunction } from 'element-plus'
 
 interface Tree {
   id: number
   label: string
   children?: Tree[]
 }
+type Node = RenderContentContext['node']
+type Data = RenderContentContext['data']
+
 let id = 1000
 
-const append = (data: Tree) => {
+const append = (data: Data) => {
   const newChild = { id: id++, label: 'testtest', children: [] }
   if (!data.children) {
     data.children = []
@@ -62,7 +65,7 @@ const append = (data: Tree) => {
   dataSource.value = [...dataSource.value]
 }
 
-const remove = (node: Node, data: Tree) => {
+const remove = (node: Node, data: Data) => {
   const parent = node.parent
   const children: Tree[] = parent.data.children || parent.data
   const index = children.findIndex((d) => d.id === data.id)
@@ -70,47 +73,36 @@ const remove = (node: Node, data: Tree) => {
   dataSource.value = [...dataSource.value]
 }
 
-const renderContent = (
-  h,
-  {
-    node,
-    data,
-    store,
-  }: {
-    node: Node
-    data: Tree
-    store: Node['store']
-  }
-) => {
+const renderContent: RenderContentFunction = (h, { node, data }) => {
   return h(
     'div',
     {
       class: 'custom-tree-node',
     },
-    h('span', null, node.label),
-    h(
-      'div',
-      null,
-      h(
-        ElButton,
-        {
-          type: 'primary',
-          link: true,
-          onClick: () => append(data),
-        },
-        'Append '
-      ),
-      h(
-        ElButton,
-        {
-          type: 'danger',
-          link: true,
-          style: 'margin-left: 4px',
-          onClick: () => remove(node, data),
-        },
-        'Delete'
-      )
-    )
+    [
+      h('span', null, node.label),
+      h('div', null, [
+        h(
+          ElButton,
+          {
+            type: 'primary',
+            link: true,
+            onClick: () => append(data),
+          },
+          'Append '
+        ),
+        h(
+          ElButton,
+          {
+            type: 'danger',
+            link: true,
+            style: 'margin-left: 4px',
+            onClick: () => remove(node, data),
+          },
+          'Delete'
+        ),
+      ]),
+    ]
   )
 }
 

docs/examples/tree/draggable.vue

@@ -17,12 +17,15 @@
 </template>
 
 <script lang="ts" setup>
-import type Node from 'element-plus/es/components/tree/src/model/node'
+// eslint-disable-next-line no-restricted-imports
 import type { DragEvents } from 'element-plus/es/components/tree/src/model/useDragNode'
 import type {
   AllowDropType,
   NodeDropType,
-} from 'element-plus/es/components/tree/src/tree.type'
+  RenderContentContext,
+} from 'element-plus'
+
+type Node = RenderContentContext['node']
 
 const handleDragStart = (node: Node, ev: DragEvents) => {
   console.log('drag start', node)

docs/examples/tree/filtering.vue

@@ -18,7 +18,7 @@
 
 <script lang="ts" setup>
 import { ref, watch } from 'vue'
-import type { TreeInstance } from 'element-plus'
+import type { FilterNodeMethodFunction, TreeInstance } from 'element-plus'
 
 interface Tree {
   [key: string]: any
@@ -36,7 +36,7 @@ watch(filterText, (val) => {
   treeRef.value!.filter(val)
 })
 
-const filterNode = (value: string, data: Tree) => {
+const filterNode: FilterNodeMethodFunction = (value: string, data: Tree) => {
   if (!value) return true
   return data.label.includes(value)
 }

docs/examples/tree/multiple-times-load.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script lang="ts" setup>
-import type Node from 'element-plus/es/components/tree/src/model/node'
+import type { LoadFunction } from 'element-plus'
 
 interface Tree {
   name: string
@@ -17,11 +17,7 @@ const props = {
 }
 
 let time = 0
-const loadNode = (
-  node: Node,
-  resolve: (data: Tree[]) => void,
-  reject: () => void
-) => {
+const loadNode: LoadFunction = (node, resolve, reject) => {
   if (node.level === 0) {
     return resolve([{ name: 'region' }])
   }

docs/examples/tree/selectable.vue

@@ -10,7 +10,7 @@
 </template>
 
 <script lang="ts" setup>
-import type Node from 'element-plus/es/components/tree/src/model/node'
+import type { LoadFunction } from 'element-plus'
 
 interface Tree {
   name: string
@@ -30,7 +30,7 @@ const handleCheckChange = (
   console.log(data, checked, indeterminate)
 }
 
-const loadNode = (node: Node, resolve: (data: Tree[]) => void) => {
+const loadNode: LoadFunction = (node, resolve) => {
   if (node.level === 0) {
     return resolve([{ name: 'Root1' }, { name: 'Root2' }])
   }