feat(element): compat vue2.7 (#3350)

packages/element/docs/demos/guide/form-grid/form.vue

@@ -57,7 +57,7 @@
 </template>
 
 <script>
-import { defineComponent, ref, onUnmounted } from '@vue/composition-api'
+import { defineComponent, ref, onUnmounted } from 'vue-demi'
 import { createForm } from '@formily/core'
 import {
   createSchemaField,

packages/element/docs/demos/guide/preview-text/extend.vue

@@ -67,7 +67,7 @@
 </template>
 
 <script>
-import { h } from '@vue/composition-api'
+import { h } from 'vue-demi'
 import { createForm } from '@formily/core'
 import { createSchemaField } from '@formily/vue'
 import {

packages/element/package.json

@@ -54,13 +54,19 @@
     "@formily/shared": "2.2.0",
     "@formily/vue": "2.2.0",
     "portal-vue": "^2.1.7",
-    "vue-slicksort": "^1.2.0"
+    "vue-slicksort": "^1.2.0",
+    "vue-demi": "^0.13.6"
   },
   "peerDependencies": {
     "@vue/composition-api": "^1.0.0-beta.1",
     "element-ui": "^2.14.0",
     "vue": "^2.6.0"
   },
+  "peerDependenciesMeta": {
+    "@vue/composition-api": {
+      "optional": true
+    }
+  },
   "publishConfig": {
     "access": "public"
   },

packages/element/src/__builtins__/shared/create-context.ts

@@ -1,14 +1,14 @@
 import type { Component } from 'vue'
 import {
   defineComponent,
-  provide,
   inject,
-  readonly,
   InjectionKey,
+  provide,
+  readonly,
   ref,
   Ref,
   toRef,
-} from '@vue/composition-api'
+} from 'vue-demi'
 
 export type CreateContext<T> = {
   Provider: Component

packages/element/src/__builtins__/shared/portal.ts

@@ -1,5 +1,5 @@
-import { defineComponent, onBeforeUnmount } from '@vue/composition-api'
-import { h, Fragment } from '@formily/vue'
+import { Fragment, h } from '@formily/vue'
+import { defineComponent, onBeforeUnmount } from 'vue-demi'
 export interface IPortalProps {
   id?: string | symbol
 }

packages/element/src/__builtins__/shared/resolve-component.ts

@@ -1,5 +1,5 @@
 import { Component } from 'vue'
-import { h, toRaw } from '@vue/composition-api'
+import { h, toRaw } from 'vue-demi'
 import { SlotTypes } from '.'
 import { isVnode } from './utils'
 

packages/element/src/__builtins__/shared/utils.ts

@@ -1,3 +1,5 @@
+import { onMounted, ref } from 'vue-demi'
+
 export function isValidElement(element) {
   return (
     isVueOptions(element) ||
@@ -33,3 +35,27 @@ export function composeExport<T0 extends {}, T1 extends {}>(
 ): T0 & T1 {
   return Object.assign(s0, s1)
 }
+
+/**
+ * 处理 vue 2.6 和 2.7 的 ref 兼容问题
+ * composition-api 不支持 setup ref
+ * @param refs
+ * @returns
+ */
+export function useCompatRef(refs?: {
+  [key: string]: Vue | Element | Vue[] | Element[]
+}) {
+  const elRef = ref(null)
+  const elRefBinder = Math.random().toString(36).slice(-8)
+
+  onMounted(() => {
+    if (refs) {
+      elRef.value = refs[elRefBinder]
+    }
+  })
+
+  return {
+    elRef,
+    elRefBinder: refs ? elRefBinder : elRef,
+  }
+}

packages/element/src/array-base/index.ts

@@ -1,28 +1,28 @@
+import { ArrayField } from '@formily/core'
+import { clone, isValid, uid } from '@formily/shared'
 import {
-  defineComponent,
-  provide,
-  InjectionKey,
-  Ref,
-  inject,
-  toRefs,
-  ref,
-  onBeforeUnmount,
-  PropType,
-} from '@vue/composition-api'
-import {
+  ExpressionScope,
   Fragment,
+  h,
   useField,
   useFieldSchema,
-  h,
-  ExpressionScope,
 } from '@formily/vue'
-import { isValid, uid, clone } from '@formily/shared'
-import { ArrayField } from '@formily/core'
+import {
+  defineComponent,
+  inject,
+  InjectionKey,
+  onBeforeUnmount,
+  PropType,
+  provide,
+  Ref,
+  ref,
+  toRefs,
+} from 'vue-demi'
 import { stylePrefix } from '../__builtins__/configs'
 
+import type { Schema } from '@formily/json-schema'
 import type { Button as ButtonProps } from 'element-ui'
 import { Button } from 'element-ui'
-import type { Schema } from '@formily/json-schema'
 import { HandleDirective } from 'vue-slicksort'
 import { composeExport } from '../__builtins__/shared'
 

packages/element/src/array-cards/index.ts

@@ -1,12 +1,12 @@
-import { defineComponent } from '@vue/composition-api'
-import { Card, Empty, Row } from 'element-ui'
-import type { Card as CardProps } from 'element-ui'
 import { ArrayField } from '@formily/core'
-import { useField, useFieldSchema, RecursionField, h } from '@formily/vue'
-import { observer } from '@formily/reactive-vue'
 import { ISchema } from '@formily/json-schema'
-import { stylePrefix } from '../__builtins__/configs'
+import { observer } from '@formily/reactive-vue'
+import { h, RecursionField, useField, useFieldSchema } from '@formily/vue'
+import type { Card as CardProps } from 'element-ui'
+import { Card, Empty, Row } from 'element-ui'
+import { defineComponent } from 'vue-demi'
 import { ArrayBase } from '../array-base'
+import { stylePrefix } from '../__builtins__/configs'
 import { composeExport } from '../__builtins__/shared'
 
 const isAdditionComponent = (schema: ISchema) => {

packages/element/src/array-collapse/index.ts

@@ -1,21 +1,21 @@
-import { defineComponent, ref, watchEffect, Ref } from '@vue/composition-api'
-import { Card, Collapse, CollapseItem, Empty, Row, Badge } from 'element-ui'
 import { ArrayField } from '@formily/core'
-import type {
-  Collapse as CollapseProps,
-  CollapseItem as CollapseItemProps,
-} from 'element-ui'
+import { ISchema } from '@formily/json-schema'
+import { observer } from '@formily/reactive-vue'
 import {
+  Fragment,
+  h,
+  RecursionField,
   useField,
   useFieldSchema,
-  RecursionField,
-  h,
-  Fragment,
 } from '@formily/vue'
-import { observer } from '@formily/reactive-vue'
-import { ISchema } from '@formily/json-schema'
-import { stylePrefix } from '../__builtins__/configs'
+import type {
+  Collapse as CollapseProps,
+  CollapseItem as CollapseItemProps,
+} from 'element-ui'
+import { Badge, Card, Collapse, CollapseItem, Empty, Row } from 'element-ui'
+import { defineComponent, ref, Ref, watchEffect } from 'vue-demi'
 import { ArrayBase } from '../array-base'
+import { stylePrefix } from '../__builtins__/configs'
 import { composeExport } from '../__builtins__/shared'
 
 export interface IArrayCollapseProps extends CollapseProps {

packages/element/src/array-items/index.ts

@@ -1,11 +1,11 @@
-import { defineComponent } from '@vue/composition-api'
 import { ArrayField } from '@formily/core'
-import { useField, useFieldSchema, RecursionField, h } from '@formily/vue'
-import { observer } from '@formily/reactive-vue'
 import { ISchema } from '@formily/json-schema'
-import { stylePrefix } from '../__builtins__/configs'
+import { observer } from '@formily/reactive-vue'
+import { h, RecursionField, useField, useFieldSchema } from '@formily/vue'
+import { defineComponent } from 'vue-demi'
+import { SlickItem, SlickList } from 'vue-slicksort'
 import { ArrayBase } from '../array-base'
-import { SlickList, SlickItem } from 'vue-slicksort'
+import { stylePrefix } from '../__builtins__/configs'
 import { composeExport } from '../__builtins__/shared'
 
 const isAdditionComponent = (schema: ISchema) => {

packages/element/src/array-table/index.ts

@@ -1,45 +1,38 @@
 import {
-  computed,
-  defineComponent,
-  ref,
-  Ref,
-  provide,
-  inject,
-} from '@vue/composition-api'
-import {
+  ArrayField,
+  FieldDisplayTypes,
   GeneralField,
   IVoidFieldFactoryProps,
-  FieldDisplayTypes,
-  ArrayField,
 } from '@formily/core'
+import type { Schema } from '@formily/json-schema'
+import { observer } from '@formily/reactive-vue'
+import { isArr, isBool, isFn } from '@formily/shared'
 import {
+  Fragment,
+  h,
+  RecursionField as _RecursionField,
   useField,
   useFieldSchema,
-  RecursionField as _RecursionField,
-  h,
-  Fragment,
 } from '@formily/vue'
-import { observer } from '@formily/reactive-vue'
-import { isArr, isBool, isFn } from '@formily/shared'
-import { ArrayBase } from '../array-base'
-import { stylePrefix } from '../__builtins__/configs'
-import { composeExport } from '../__builtins__/shared'
-import type { Schema } from '@formily/json-schema'
 import type {
+  Pagination as PaginationProps,
   Table as TableProps,
   TableColumn as ElColumnProps,
-  Pagination as PaginationProps,
 } from 'element-ui'
-import type { VNode, Component } from 'vue'
 import {
-  Table as ElTable,
-  TableColumn as ElTableColumn,
+  Badge,
+  Option,
   Pagination,
   Select,
-  Option,
-  Badge,
+  Table as ElTable,
+  TableColumn as ElTableColumn,
 } from 'element-ui'
+import type { Component, VNode } from 'vue'
+import { computed, defineComponent, inject, provide, ref, Ref } from 'vue-demi'
+import { ArrayBase } from '../array-base'
 import { Space } from '../space'
+import { stylePrefix } from '../__builtins__/configs'
+import { composeExport } from '../__builtins__/shared'
 
 const RecursionField = _RecursionField as unknown as Component
 

packages/element/src/array-tabs/index.ts

@@ -1,8 +1,8 @@
-import { defineComponent, ref } from '@vue/composition-api'
-import { observer } from '@formily/reactive-vue'
 import { ArrayField } from '@formily/core'
-import { h, useField, useFieldSchema, RecursionField } from '@formily/vue'
-import { Tabs, TabPane, Badge } from 'element-ui'
+import { observer } from '@formily/reactive-vue'
+import { h, RecursionField, useField, useFieldSchema } from '@formily/vue'
+import { Badge, TabPane, Tabs } from 'element-ui'
+import { defineComponent, ref } from 'vue-demi'
 import { stylePrefix } from '../__builtins__/configs'
 
 import type { Tabs as TabsProps } from 'element-ui'

packages/element/src/checkbox/index.ts

@@ -1,21 +1,21 @@
-import { connect, mapProps, h, mapReadPretty } from '@formily/vue'
-import { defineComponent, PropType } from '@vue/composition-api'
-import {
-  composeExport,
-  transformComponent,
-  resolveComponent,
-  SlotTypes,
-} from '../__builtins__/shared'
+import { connect, h, mapProps, mapReadPretty } from '@formily/vue'
 import type {
   Checkbox as _ElCheckboxProps,
   CheckboxGroup as ElCheckboxGroupProps,
 } from 'element-ui'
 import {
   Checkbox as ElCheckbox,
-  CheckboxGroup as ElCheckboxGroup,
   CheckboxButton as ElCheckboxButton,
+  CheckboxGroup as ElCheckboxGroup,
 } from 'element-ui'
+import { defineComponent, PropType } from 'vue-demi'
 import { PreviewText } from '../preview-text'
+import {
+  composeExport,
+  resolveComponent,
+  SlotTypes,
+  transformComponent,
+} from '../__builtins__/shared'
 
 type ElCheckboxProps = Omit<_ElCheckboxProps, 'value'> & {
   value: ElCheckboxProps['label']

packages/element/src/editable/index.ts

@@ -1,14 +1,14 @@
-import { defineComponent, ref, onBeforeUnmount } from '@vue/composition-api'
-import { observer } from '@formily/reactive-vue'
+import { Field, isVoidField } from '@formily/core'
 import { reaction } from '@formily/reactive'
-import { isVoidField, Field } from '@formily/core'
+import { observer } from '@formily/reactive-vue'
 import { h, useField } from '@formily/vue'
 import { Popover } from 'element-ui'
+import { defineComponent, onBeforeUnmount, ref } from 'vue-demi'
 import { stylePrefix } from '../__builtins__/configs'
 
 import type { Popover as PopoverProps } from 'element-ui'
 import { FormBaseItem, FormItemProps } from '../form-item'
-import { composeExport } from '../__builtins__/shared'
+import { composeExport, useCompatRef } from '../__builtins__/shared'
 
 export type EditableProps = FormItemProps
 export type EditablePopoverProps = PopoverProps
@@ -42,7 +42,7 @@ const EditableInner = observer(
     name: 'FEditable',
     setup(props, { attrs, slots, refs }) {
       const fieldRef = useField<Field>()
-
+      const { elRef: innerRef, elRefBinder } = useCompatRef(refs)
       const prefixCls = `${stylePrefix}-editable`
       const setEditable = (payload: boolean) => {
         const pattern = getParentPattern(fieldRef)
@@ -82,17 +82,16 @@ const EditableInner = observer(
         }
 
         const onClick = (e: MouseEvent) => {
-          const innerRef = refs.innerRef as HTMLElement
           const target = e.target as HTMLElement
-          const close = innerRef.querySelector(`.${prefixCls}-close-btn`)
+          const close = innerRef.value.querySelector(`.${prefixCls}-close-btn`)
 
           if (target?.contains(close) || close?.contains(target)) {
             recover()
           } else if (!editable) {
             setTimeout(() => {
               setEditable(true)
               setTimeout(() => {
-                innerRef.querySelector('input')?.focus()
+                innerRef.value.querySelector('input')?.focus()
               })
             })
           }
@@ -155,7 +154,7 @@ const EditableInner = observer(
           'div',
           {
             class: prefixCls,
-            ref: 'innerRef',
+            ref: elRefBinder,
             on: {
               click: onClick,
             },

packages/element/src/form-button-group/index.ts

@@ -1,7 +1,7 @@
 import { h } from '@formily/vue'
-import { defineComponent } from '@vue/composition-api'
-import { Space, SpaceProps } from '../space'
+import { defineComponent } from 'vue-demi'
 import { FormBaseItem } from '../form-item'
+import { Space, SpaceProps } from '../space'
 import { stylePrefix } from '../__builtins__/configs'
 
 export type FormButtonGroupProps = Omit<SpaceProps, 'align' | 'size'> & {