feat: add component: input space submit reset form form-item form-layout form-button-group

Author: zhouxinyong

.eslintrc

@@ -3,7 +3,7 @@
     "node": true
   },
   "extends": [
-    "plugin:vue/vue3-recommended",
+    "plugin:vue/vue3-essential",
     "plugin:@typescript-eslint/recommended",
     "prettier/@typescript-eslint"
   ],

docs/.vuepress/config.js

@@ -18,6 +18,13 @@ module.exports = {
         href: '//img.alicdn.com/imgextra/i3/O1CN01XtT3Tv1Wd1b5hNVKy_!!6000000002810-55-tps-360-360.svg',
       },
     ],
+    [
+      'link',
+      {
+        rel: 'stylesheet',
+        href: 'https://unpkg.com/ant-design-vue@1.7.8/dist/antd.css',
+      },
+    ],
   ],
   themeConfig: {
     logo: '//img.alicdn.com/imgextra/i2/O1CN01Kq3OHU1fph6LGqjIz_!!6000000004056-55-tps-1141-150.svg',
@@ -53,4 +60,20 @@ module.exports = {
       },
     ],
   ],
+  less: {
+    modifyVars: {},
+    javascriptEnabled: true,
+  },
+  configureWebpack: (config, isServer) => {
+    return {
+      resolve: {
+        alias: {
+          '@formily/antdv': path.resolve(
+            __dirname,
+            '../../packages/components/src'
+          ),
+        },
+      },
+    }
+  },
 }

docs/.vuepress/enhanceApp.js

@@ -1,7 +1,10 @@
 import pageComponents from '@internal/page-components'
+import AntDesign from 'ant-design-vue'
+import '@formily/antdv/style.ts'
 
 export default ({ Vue }) => {
   for (const [name, component] of Object.entries(pageComponents)) {
     Vue.component(name, component)
   }
+  Vue.use(AntDesign)
 }

docs/guide/input.md

@@ -16,4 +16,4 @@
 
 ## API
 
-参考 [https://element.eleme.io/#/zh-CN/component/input](https://element.eleme.io/#/zh-CN/component/input)
+参考 [https://antdv.com/components/input-cn](https://antdv.com/components/input-cn)

docs/guide/reset.md

@@ -18,7 +18,7 @@
 
 ## API
 
-按钮相关的 API 属性，我们参考 [https://element.eleme.io/#/zh-CN/component/button](https://element.eleme.io/#/zh-CN/component/button) 即可，剩下是 Reset 组件独有的 API 属性
+按钮相关的 API 属性，我们参考 [https://antdv.com/components/button-cn](https://antdv.com/components/button-cn) 即可，剩下是 Reset 组件独有的 API 属性
 
 ### 事件
 

docs/guide/space.md

@@ -16,4 +16,4 @@
 
 ## API
 
-参考 [https://ant.design/components/space-cn/](https://ant.design/components/space-cn/)
+参考 [https://antdv.com/components/space-cn](https://antdv.com/components/space-cn)

docs/guide/submit.md

@@ -12,7 +12,7 @@
 
 ## API
 
-按钮相关的 API 属性，我们参考 [https://element.eleme.io/#/zh-CN/component/button](https://element.eleme.io/#/zh-CN/component/button) 即可，剩下是 Submit 组件独有的 API 属性
+按钮相关的 API 属性，我们参考 [https://antdv.com/components/button-cn](https://antdv.com/components/button-cn) 即可，剩下是 Submit 组件独有的 API 属性
 
 | 属性名          | 类型                                                                                             | 描述                 | 默认值                                |
 | --------------- | ------------------------------------------------------------------------------------------------ | -------------------- | ------------------------------------- | --- |

package.json

@@ -25,16 +25,19 @@
     "lint": "eslint ."
   },
   "devDependencies": {
-    "@formily/template": "^1.0.0-alpha.0",
+    "@commitlint/cli": "^14.1.0",
+    "@commitlint/config-conventional": "^14.1.0",
+    "@commitlint/prompt-cli": "^14.1.0",
     "@formily/core": "^2.0.0",
+    "@formily/template": "^1.0.0-alpha.0",
     "@formily/vue": "^2.0.0",
-    "@vue/composition-api": "^1.4.0",
     "@testing-library/jest-dom": "^5.0.0",
     "@testing-library/vue": "^5.6.2",
-    "@vue/test-utils": "1.0.0-beta.22",
     "@types/jest": "^24.0.18",
     "@typescript-eslint/eslint-plugin": "^4.9.1",
     "@typescript-eslint/parser": "^4.8.2",
+    "@vue/composition-api": "^1.4.0",
+    "@vue/test-utils": "1.0.0-beta.22",
     "@vuepress-dumi/vuepress-plugin-dumi-previewer": "0.3.3",
     "@vuepress-dumi/vuepress-theme-dumi": "0.3.3",
     "@vuepress/plugin-back-to-top": "^1.8.2",
@@ -50,23 +53,20 @@
     "eslint-plugin-promise": "^4.0.0",
     "eslint-plugin-vue": "^7.0.1",
     "ghooks": "^2.0.4",
+    "lerna": "^4.0.0",
+    "less": "^4.1.2",
+    "less-loader": "^5.0.0",
     "lint-staged": "^8.2.1",
-    "@commitlint/cli": "^14.1.0",
-    "@commitlint/prompt-cli": "^14.1.0",
-    "@commitlint/config-conventional": "^14.1.0",
     "prettier": "^2.2.1",
     "pretty-quick": "^3.1.0",
+    "raw-loader": "^4.0.0",
     "ts-import-plugin": "1.6.1",
     "ts-jest": "^26.0.0",
     "ts-node": "^9.1.1",
-    "lerna": "^4.0.0",
     "typescript": "^4.1.5",
     "vue": "^2.6.0",
     "vuepress": "^1.8.2",
-    "vuepress-plugin-typescript": "^0.3.1",
-    "sass": "^1.34.1",
-    "sass-loader": "^8.0.2",
-    "raw-loader": "^4.0.0"
+    "vuepress-plugin-typescript": "^0.3.1"
   },
   "repository": {
     "type": "git",

packages/components/src/__builtins__/configs/index.ts

@@ -0,0 +1 @@
+export const stylePrefix = 'formily-antdv'

packages/components/src/__builtins__/index.ts

@@ -0,0 +1,2 @@
+export * from './configs'
+export * from './shared'

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

@@ -0,0 +1,57 @@
+import type { Component } from 'vue'
+import {
+  defineComponent,
+  provide,
+  inject,
+  readonly,
+  InjectionKey,
+  ref,
+  Ref,
+  toRef,
+} from '@vue/composition-api'
+
+export type CreateContext<T> = {
+  Provider: Component
+  Consumer: Component
+  injectKey: InjectionKey<Ref<T>>
+}
+
+export const createContext = <T>(defaultValue?: T): CreateContext<T> => {
+  const injectKey: InjectionKey<Ref<T>> = Symbol()
+
+  return {
+    Provider: defineComponent({
+      name: 'ContextProvider',
+      props: {
+        value: {
+          type: null,
+          default() {
+            return defaultValue ?? null
+          },
+        },
+      },
+      setup(props, { slots }) {
+        const value = toRef(props, 'value')
+        provide(injectKey, readonly(value))
+
+        return () => slots?.default?.()
+      },
+    }),
+
+    Consumer: defineComponent({
+      name: 'ContextConsumer',
+      setup(_props, { slots }) {
+        const value = inject(injectKey)
+
+        return () => slots?.default?.(value)
+      },
+    }),
+    injectKey,
+  }
+}
+
+export const useContext = <T>(context: CreateContext<T>) => {
+  const key = context.injectKey
+
+  return inject(key, ref(null))
+}

packages/components/src/__builtins__/shared/index.ts

@@ -0,0 +1,7 @@
+export * from './transform-component'
+export * from './resolve-component'
+export * from './create-context'
+export * from './utils'
+export * from './portal'
+export * from './loading'
+export * from './types'

packages/components/src/__builtins__/shared/loading.ts

@@ -0,0 +1,18 @@
+import { message } from 'ant-design-vue'
+import { MessageType } from 'ant-design-vue/types/message'
+
+export const loading = async (
+  loadingText = 'Loading...',
+  processor: () => Promise<any>
+) => {
+  let loadingInstance: MessageType = null
+  let loading = setTimeout(() => {
+    loadingInstance = message.loading(loadingText)
+  }, 100)
+  try {
+    return await processor()
+  } finally {
+    loadingInstance()
+    clearTimeout(loading)
+  }
+}

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

@@ -0,0 +1,43 @@
+import { defineComponent, onBeforeUnmount } from '@vue/composition-api'
+import { h, Fragment } from '@formily/vue'
+export interface IPortalProps {
+  id?: string | symbol
+}
+
+const PortalMap = new Map<string | symbol, any>()
+
+export const createPortalProvider = (id: string | symbol) => {
+  const Portal = defineComponent({
+    name: 'ProtalProvider',
+    props: {
+      id: {
+        type: [String, Symbol],
+        default: id,
+      },
+    },
+
+    setup(props) {
+      onBeforeUnmount(() => {
+        const { id } = props
+        if (id && PortalMap.has(id)) {
+          PortalMap.delete(id)
+        }
+      })
+    },
+
+    render() {
+      const { id } = this
+      if (id && !PortalMap.has(id)) {
+        PortalMap.set(id, this)
+      }
+
+      return h(Fragment, {}, this.$scopedSlots)
+    },
+  })
+
+  return Portal
+}
+
+export function getProtalContext(id: string | symbol) {
+  return PortalMap.get(id)
+}

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

@@ -0,0 +1,23 @@
+import { Component } from 'vue'
+import { h, toRaw } from '@vue/composition-api'
+import { SlotTypes } from '.'
+import { isVnode } from './utils'
+
+export const resolveComponent = (
+  child?: SlotTypes,
+  props?: Record<string, any>
+) => {
+  if (child) {
+    if (typeof child === 'string' || typeof child === 'number') {
+      return child
+    } else if (typeof child === 'function') {
+      return (child as Function)(props)
+    } else if (isVnode(child)) {
+      return child
+    } else {
+      return h(toRaw(child as Component), { props })
+    }
+  }
+
+  return null
+}

packages/components/src/__builtins__/shared/transform-component.ts

@@ -0,0 +1,65 @@
+import type { Component } from 'vue'
+import { merge } from '@formily/shared'
+import { h } from '@formily/vue'
+import { isVue2, h as hInVue2, defineComponent } from 'vue-demi'
+
+type ListenersTransformRules = Record<string, string>
+
+export const transformComponent = <T extends Record<string, any>>(
+  tag: any,
+  transformRules?: ListenersTransformRules,
+  defaultProps?: Partial<T>
+): Component<T> | any => {
+  if (isVue2) {
+    return defineComponent({
+      setup(props, { attrs, slots, listeners }) {
+        return () => {
+          const data = {
+            attrs: {
+              ...attrs,
+            },
+            on: {
+              ...listeners,
+            },
+          }
+
+          if (transformRules) {
+            const transformListeners = transformRules
+            Object.keys(transformListeners).forEach((extract) => {
+              if (data.on !== undefined) {
+                data.on[transformListeners[extract]] = listeners[extract]
+              }
+            })
+          }
+          if (defaultProps) {
+            data.attrs = merge(defaultProps, data.attrs)
+          }
+
+          return h(tag, data, slots)
+        }
+      },
+    })
+  } else {
+    return defineComponent({
+      setup(props, { attrs, slots }) {
+        return () => {
+          let data = {
+            ...attrs,
+          }
+          if (transformRules) {
+            const listeners = transformRules
+            Object.keys(listeners).forEach((extract) => {
+              const event = listeners[extract]
+              data[`on${event[0].toUpperCase()}${event.slice(1)}`] =
+                attrs[`on${extract[0].toUpperCase()}${extract.slice(1)}`]
+            })
+          }
+          if (defaultProps) {
+            data = merge(defaultProps, data)
+          }
+          return h(tag, data, slots)
+        }
+      },
+    })
+  }
+}

packages/components/src/__builtins__/shared/types.ts

@@ -0,0 +1,8 @@
+import { Component, VNode } from 'vue'
+
+export type SlotTypes =
+  | Component
+  | string
+  | number
+  | ((props: Record<string, any>) => VNode[] | VNode)
+  | VNode