@cicctencent/formily 0.0.0-stage → 0.0.1

package/src/components/form-drawer/index.ts

@@ -0,0 +1,424 @@
+import { FormProvider, Fragment, h } from '@formily/vue'
+import { toJS } from '@formily/reactive'
+import { observer } from '@formily/reactive-vue'
+import { createForm, Form, IFormProps } from '@formily/core'
+import {
+  isNum,
+  isStr,
+  isBool,
+  isFn,
+  IMiddleware,
+  applyMiddleware,
+} from '@formily/shared'
+import { ElDrawer, ElButton } from '@cicctencent/jtui'
+import type {
+  ElDrawer as ElDrawerProps,
+  ElButton as ElButtonProps,
+} from '@cicctencent/jtui'
+
+import { Component, VNode, defineComponent, Teleport, createApp } from 'vue'
+import {
+  isValidElement,
+  resolveComponent,
+  createPortalProvider,
+  getPortalContext,
+  loading,
+  stylePrefix,
+} from '../__builtins__'
+
+type FormDrawerContentProps = { form: Form }
+
+type FormDrawerContent = Component | ((props: FormDrawerContentProps) => VNode)
+
+type DrawerTitle = string | number | Component | VNode | (() => VNode)
+
+type IFormDrawerProps = Omit<typeof ElDrawerProps, 'title'> & {
+  title?: DrawerTitle
+  footer?: null | Component | VNode | (() => VNode)
+  cancelText?: string | Component | VNode | (() => VNode)
+  cancelButtonProps?: typeof ElButtonProps
+  okText?: string | Component | VNode | (() => VNode)
+  okButtonProps?: typeof ElButtonProps
+  beforeClose?: (cb: Function) => void
+  onOpen?: () => void
+  onOpend?: () => void
+  onClose?: () => void
+  onClosed?: () => void
+  onCancel?: () => void
+  onOK?: () => void
+  loadingText?: string
+}
+
+const PORTAL_TARGET_NAME = 'FormDrawerFooter'
+
+const isDrawerTitle = (props: any): props is DrawerTitle => {
+  return isNum(props) || isStr(props) || isBool(props) || isValidElement(props)
+}
+
+const getDrawerProps = (props: any): IFormDrawerProps => {
+  if (isDrawerTitle(props)) {
+    return {
+      title: props,
+    } as IFormDrawerProps
+  } else {
+    return props
+  }
+}
+
+export interface IFormDrawer {
+  forOpen(middleware: IMiddleware<IFormProps>): IFormDrawer
+  forConfirm(middleware: IMiddleware<IFormProps>): IFormDrawer
+  forCancel(middleware: IMiddleware<IFormProps>): IFormDrawer
+  open(props?: IFormProps): Promise<any>
+  close(): void
+}
+
+export interface IFormDrawerComponentProps {
+  content: FormDrawerContent
+  resolve: () => any
+  reject: () => any
+}
+
+export function FormDrawer(
+  title: IFormDrawerProps | DrawerTitle,
+  content: FormDrawerContent
+): IFormDrawer
+
+export function FormDrawer(
+  title: IFormDrawerProps | DrawerTitle,
+  id: string | symbol,
+  content: FormDrawerContent
+): IFormDrawer
+
+export function FormDrawer(
+  title: DrawerTitle,
+  id: string,
+  content: FormDrawerContent
+): IFormDrawer
+
+export function FormDrawer(
+  title: IFormDrawerProps | DrawerTitle,
+  id: string | symbol | FormDrawerContent,
+  content?: FormDrawerContent
+): {
+  forOpen: (middleware: IMiddleware<IFormProps>) => {
+    forOpen: (middleware: IMiddleware<IFormProps>) => any
+    forConfirm: (middleware: IMiddleware<Form>) => any
+    close: () => void
+    open: (props: IFormProps) => never
+    forCancel: (middleware: IMiddleware<Form>) => any
+  }
+  forConfirm: (middleware: IMiddleware<Form>) => {
+    forOpen: (middleware: IMiddleware<IFormProps>) => any
+    forConfirm: (middleware: IMiddleware<Form>) => any
+    close: () => void
+    open: (props: IFormProps) => never
+    forCancel: (middleware: IMiddleware<Form>) => any
+  }
+  close: () => void
+  open: (props: IFormProps) => never
+  forCancel: (middleware: IMiddleware<Form>) => {
+    forOpen: (middleware: IMiddleware<IFormProps>) => any
+    forConfirm: (middleware: IMiddleware<Form>) => any
+    close: () => void
+    open: (props: IFormProps) => never
+    forCancel: (middleware: IMiddleware<Form>) => any
+  }
+} {
+  if (isFn(id) || isValidElement(id)) {
+    content = id as FormDrawerContent
+    id = 'form-drawer'
+  }
+
+  const prefixCls = `${stylePrefix}-form-drawer`
+  const env = {
+    root: document.createElement('div'),
+    form: null,
+    promise: null,
+    app: null,
+    instance: null,
+    openMiddlewares: [],
+    confirmMiddlewares: [],
+    cancelMiddlewares: [],
+  }
+
+  document.body.appendChild(env.root)
+
+  const props = getDrawerProps(title)
+  const drawerProps = {
+    ...props,
+    onClosed: () => {
+      props.onClosed?.()
+      env.app.unmount()
+      env.app = null
+      env.instance = null
+      env.root?.parentNode?.removeChild(env.root)
+      env.root = undefined
+    },
+  }
+
+  const component = observer(
+    defineComponent({
+      setup() {
+        return () =>
+          h(
+            Fragment,
+            {},
+            {
+              default: () =>
+                resolveComponent(content, {
+                  form: env.form,
+                }),
+            }
+          )
+      },
+    })
+  )
+
+  const render = (visible = true, resolve?: () => any, reject?: () => any) => {
+    if (!env.instance) {
+      const ComponentConstructor = defineComponent({
+        props: ['drawerProps'],
+        data() {
+          return {
+            visible: false,
+          }
+        },
+        render() {
+          const {
+            onClose,
+            onClosed,
+            onOpen,
+            onOpend,
+            onOK,
+            onCancel,
+            title,
+            footer,
+            okText,
+            cancelText,
+            okButtonProps,
+            cancelButtonProps,
+            ...drawerProps
+          } = this.drawerProps
+          return h(
+            FormProvider,
+            {
+              form: env.form,
+            },
+            {
+              default: () =>
+                h(
+                  ElDrawer,
+                  {
+                    class: `${prefixCls}`,
+                    ...drawerProps,
+                    modelValue: this.visible,
+                    'onUpdate:modelValue': (val) => {
+                      this.visible = val
+                    },
+                    onClose: () => {
+                      onClose?.()
+                    },
+                    onClosed: () => {
+                      onClosed?.()
+                    },
+                    onOpen: () => {
+                      onOpen?.()
+                    },
+                    onOpened: () => {
+                      onOpend?.()
+                    },
+                  },
+                  {
+                    default: () => [
+                      h(
+                        'div',
+                        {
+                          class: [`${prefixCls}-body`],
+                        },
+                        [h(component, {}, {})] as any
+                      ),
+                      h(
+                        'div',
+                        {
+                          class: [`${prefixCls}-footer`],
+                        },
+                        {
+                          default: () => {
+                            const FooterPortalTarget = h(
+                              'span',
+                              {
+                                id: PORTAL_TARGET_NAME,
+                              },
+                              {}
+                            )
+
+                            if (footer === null) {
+                              return [null, FooterPortalTarget]
+                            } else if (footer) {
+                              return [
+                                resolveComponent(footer),
+                                FooterPortalTarget,
+                              ]
+                            }
+
+                            return [
+                              h(
+                                ElButton,
+                                {
+                                  ...cancelButtonProps,
+                                  onClick: (e: MouseEvent) => {
+                                    onCancel?.(e)
+                                    reject()
+                                  },
+                                },
+                                {
+                                  default: () =>
+                                    resolveComponent(
+                                      cancelText || '取消'
+                                      // t('el.popconfirm.cancelButtonText')
+                                    ),
+                                }
+                              ),
+                              h(
+                                ElButton,
+                                {
+                                  type: 'primary',
+                                  ...okButtonProps,
+                                  onClick: (e: MouseEvent) => {
+                                    onOK?.(e)
+                                    resolve()
+                                  },
+                                },
+                                {
+                                  default: () =>
+                                    resolveComponent(
+                                      okText || '确定'
+                                      // t('el.popconfirm.confirmButtonText')
+                                    ),
+                                }
+                              ),
+                              FooterPortalTarget,
+                            ]
+                          },
+                        }
+                      ),
+                    ],
+                    title: () =>
+                      h('div', {}, { default: () => resolveComponent(title) }),
+                  }
+                ),
+            }
+          )
+        },
+      })
+      env.app = createApp(ComponentConstructor, {
+        drawerProps,
+        parent: getPortalContext(id as string | symbol),
+      })
+      env.instance = env.app.mount(env.root)
+    }
+    env.instance.visible = visible
+  }
+
+  const formDrawer = {
+    forOpen: (middleware: IMiddleware<IFormProps>) => {
+      if (isFn(middleware)) {
+        env.openMiddlewares.push(middleware)
+      }
+      return formDrawer
+    },
+    forConfirm: (middleware: IMiddleware<Form>) => {
+      if (isFn(middleware)) {
+        env.confirmMiddlewares.push(middleware)
+      }
+      return formDrawer
+    },
+    forCancel: (middleware: IMiddleware<Form>) => {
+      if (isFn(middleware)) {
+        env.cancelMiddlewares.push(middleware)
+      }
+      return formDrawer
+    },
+    open: (props: IFormProps) => {
+      if (env.promise) return env.promise
+
+      env.promise = new Promise(async (resolve, reject) => {
+        try {
+          props = await loading(drawerProps.loadingText, () =>
+            applyMiddleware(props, env.openMiddlewares)
+          )
+          env.form = env.form || createForm(props)
+        } catch (e) {
+          reject(e)
+        }
+
+        render(
+          true,
+          () => {
+            env.form
+              .submit(async () => {
+                await applyMiddleware(env.form, env.confirmMiddlewares)
+                resolve(toJS(env.form.values))
+                if (drawerProps.beforeClose) {
+                  setTimeout(() => {
+                    drawerProps.beforeClose(() => {
+                      formDrawer.close()
+                    })
+                  })
+                } else {
+                  formDrawer.close()
+                }
+              })
+              .catch(reject)
+          },
+          async () => {
+            await loading(drawerProps.loadingText, () =>
+              applyMiddleware(env.form, env.cancelMiddlewares)
+            )
+
+            if (drawerProps.beforeClose) {
+              drawerProps.beforeClose(() => {
+                formDrawer.close()
+              })
+            } else {
+              formDrawer.close()
+            }
+          }
+        )
+      })
+      return env.promise
+    },
+    close: () => {
+      if (!env.root) return
+      render(false)
+    },
+  }
+
+  return formDrawer as never
+}
+
+const FormDrawerFooter = defineComponent({
+  name: 'FFormDrawerFooter',
+  setup(props, { slots }) {
+    return () => {
+      // 临时解决方案
+      if (document.querySelector(`#${PORTAL_TARGET_NAME}`)) {
+        return h(
+          Teleport,
+          {
+            to: `#${PORTAL_TARGET_NAME}`,
+          },
+          slots
+        )
+      } else {
+        return null
+      }
+    }
+  },
+})
+
+FormDrawer.Footer = FormDrawerFooter
+FormDrawer.Portal = createPortalProvider('form-drawer')
+
+export default FormDrawer

package/src/components/form-drawer/style.scss

@@ -0,0 +1,21 @@
+@import '../__builtins__/styles/common.scss';
+
+.#{$formily-prefix}-form-drawer {
+  .el-drawer__body {
+    display: flex;
+    flex-direction: column;
+  }
+
+  &-body {
+    flex: 1;
+    overflow: auto;
+    padding: $--dialog-padding-primary;
+  }
+
+  &-footer {
+    padding: $--dialog-padding-primary;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+  }
+}

package/src/components/form-drawer/style.ts

@@ -0,0 +1,4 @@
+import './style.scss'
+import '@cicctencent/jtui/theme-chalk/src/drawer.scss'
+import '@cicctencent/jtui/theme-chalk/src/button.scss'
+import '@cicctencent/jtui/theme-chalk/src/loading.scss'

package/src/components/form-grid/index.ts

@@ -0,0 +1,181 @@
+import {
+  defineComponent,
+  provide,
+  onMounted,
+  InjectionKey,
+  Ref,
+  computed,
+  watchEffect,
+  inject,
+  PropType,
+  getCurrentInstance,
+  ComponentInternalInstance,
+} from 'vue'
+import { h } from '@formily/vue'
+import { observer } from '@formily/reactive-vue'
+import { markRaw } from '@formily/reactive'
+import { Grid, IGridOptions } from '@formily/grid'
+import { stylePrefix, composeExport } from '../__builtins__'
+import { useFormLayout } from '../form-layout'
+
+export interface IFormGridProps extends IGridOptions {
+  grid?: Grid<HTMLElement>
+  prefixCls?: string
+  className?: string
+}
+
+const FormGridSymbol: InjectionKey<Ref<Grid<HTMLElement>>> =
+  Symbol('FormGridContext')
+
+interface GridColumnProps {
+  gridSpan: number
+}
+
+export const createFormGrid = (props: IFormGridProps): Grid<HTMLElement> => {
+  return markRaw(new Grid(props))
+}
+
+export const useFormGrid = (): Ref<Grid<HTMLElement>> => inject(FormGridSymbol)
+
+/**
+ * @deprecated
+ */
+const useGridSpan = (gridSpan: number) => {
+  return gridSpan
+}
+
+/**
+ * @deprecated
+ */
+export const useGridColumn = (gridSpan = 'span 1') => {
+  return gridSpan
+}
+
+const useRefs = (): Record<string, unknown> => {
+  const vm: ComponentInternalInstance | null = getCurrentInstance()
+  return vm?.refs || {}
+}
+
+const FormGridInner = observer(
+  defineComponent({
+    name: 'FFormGrid',
+    props: {
+      columnGap: {
+        type: Number,
+      },
+      rowGap: {
+        type: Number,
+      },
+      minColumns: {
+        type: [Number, Array],
+      },
+      minWidth: {
+        type: [Number, Array],
+      },
+      maxColumns: {
+        type: [Number, Array],
+      },
+      maxWidth: {
+        type: [Number, Array],
+      },
+      breakpoints: {
+        type: Array,
+      },
+      colWrap: {
+        type: Boolean,
+        default: true,
+      },
+      strictAutoFit: {
+        type: Boolean,
+        default: false,
+      },
+      shouldVisible: {
+        type: Function as PropType<IGridOptions['shouldVisible']>,
+        default() {
+          return () => true
+        },
+      },
+      grid: {
+        type: Object as PropType<Grid<HTMLElement>>,
+      },
+    },
+    setup(props: any, { slots }) {
+      const layout = useFormLayout()
+
+      const gridInstance = computed(() => {
+        const newProps: IFormGridProps = {}
+        Object.keys(props).forEach((key) => {
+          if (typeof props[key] !== 'undefined') {
+            newProps[key] = props[key]
+          }
+        })
+        const options = {
+          columnGap: layout.value?.gridColumnGap ?? 8,
+          rowGap: layout.value?.gridRowGap ?? 4,
+          ...newProps,
+        }
+        return markRaw(options?.grid ? options.grid : new Grid(options))
+      })
+      const prefixCls = `${stylePrefix}-form-grid`
+
+      provide(FormGridSymbol, gridInstance)
+
+      onMounted(() => {
+        const refs = useRefs()
+        watchEffect((onInvalidate) => {
+          const dispose = gridInstance.value.connect(refs.root as HTMLElement)
+          onInvalidate(() => {
+            dispose()
+          })
+        })
+      })
+
+      return () => {
+        return h(
+          'div',
+          {
+            class: `${prefixCls}`,
+            style: {
+              gridTemplateColumns: gridInstance.value.templateColumns,
+              gap: gridInstance.value.gap,
+            },
+            ref: 'root',
+          },
+          slots
+        )
+      }
+    },
+  })
+) as any
+
+const FormGridColumn = observer(
+  defineComponent({
+    name: 'FFormGridColumn',
+    props: {
+      gridSpan: {
+        type: Number,
+        default: 1,
+      },
+    },
+    setup(props: GridColumnProps, { slots }) {
+      return () => {
+        return h(
+          'div',
+          {
+            'data-grid-span': props.gridSpan,
+          },
+          slots
+        )
+      }
+    },
+  })
+)
+
+export const FormGrid = composeExport(FormGridInner, {
+  GridColumn: FormGridColumn,
+  useGridSpan,
+  useFormGrid,
+  createFormGrid,
+})
+
+export default FormGrid

package/src/components/form-grid/style.scss

@@ -0,0 +1,5 @@
+@import '../__builtins__/styles/common.scss';
+
+.#{$formily-prefix}-form-grid {
+  display: grid;
+}

package/src/components/form-grid/style.ts

@@ -0,0 +1 @@
+import './style.scss'

package/src/components/form-item/animation.scss

@@ -0,0 +1,72 @@
+@-webkit-keyframes antShowHelpIn {
+  0% {
+    -webkit-transform: translateY(-5px);
+    transform: translateY(-5px);
+    opacity: 0;
+  }
+
+  to {
+    -webkit-transform: translateY(0);
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+.#{$form-item-prefix}-help-appear,
+.#{$form-item-prefix}-help-enter {
+  -webkit-animation-duration: 0.3s;
+  animation-duration: 0.3s;
+  -webkit-animation-fill-mode: both;
+  animation-fill-mode: both;
+  -webkit-animation-play-state: paused;
+  animation-play-state: paused;
+}
+
+.#{$form-item-prefix}-help-appear.#{$form-item-prefix}-help-appear-active,
+.#{$form-item-prefix}-help-enter.#{$form-item-prefix}-help-enter-active {
+  -webkit-animation-name: antShowHelpIn;
+  animation-name: antShowHelpIn;
+  -webkit-animation-play-state: running;
+  animation-play-state: running;
+}
+
+.#{$form-item-prefix}-help-appear,
+.#{$form-item-prefix}-help-enter {
+  opacity: 0;
+}
+
+.#{$form-item-prefix}-help-appear,
+.#{$form-item-prefix}-help-enter {
+  -webkit-animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
+  animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
+}
+
+@keyframes antShowHelpIn {
+  0% {
+    -webkit-transform: translateY(-5px);
+    transform: translateY(-5px);
+    opacity: 0;
+  }
+
+  to {
+    -webkit-transform: translateY(0);
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+@-webkit-keyframes antShowHelpOut {
+  to {
+    -webkit-transform: translateY(-5px);
+    transform: translateY(-5px);
+    opacity: 0;
+  }
+}
+
+@keyframes antShowHelpOut {
+  to {
+    -webkit-transform: translateY(-5px);
+    transform: translateY(-5px);
+    opacity: 0;
+  }
+}