@antsoo-lib/components 0.1.2 → 0.1.4

package/src/vc-dialog/Dialog.tsx

@@ -0,0 +1,203 @@
+import type { PropType } from 'vue'
+import { defineComponent, onBeforeUnmount, shallowRef, watch, watchEffect } from 'vue'
+
+import type { MouseEventHandler } from '../_util/EventInterface'
+import KeyCode from '../_util/KeyCode'
+import classNames from '../_util/classNames'
+import omit from '../_util/omit'
+import pickAttrs from '../_util/pickAttrs'
+import { initDefaultProps } from '../_util/props-util'
+import contains from '../vc-util/Dom/contains'
+import type ScrollLocker from '../vc-util/Dom/scrollLocker'
+import type { ContentRef } from './Content'
+import Content from './Content'
+import dialogPropTypes from './IDialogPropTypes'
+import Mask from './Mask'
+import { getMotionName, getUUID } from './util'
+
+export default defineComponent({
+  compatConfig: { MODE: 3 },
+  name: 'VcDialog',
+  inheritAttrs: false,
+  props: initDefaultProps(
+    {
+      ...dialogPropTypes(),
+      getOpenCount: Function as PropType<() => number>,
+      scrollLocker: Object as PropType<ScrollLocker>,
+    },
+    {
+      mask: true,
+      visible: false,
+      keyboard: true,
+      closable: true,
+      maskClosable: true,
+      destroyOnClose: false,
+      prefixCls: 'rc-dialog',
+      getOpenCount: () => null,
+      focusTriggerAfterClose: true,
+    },
+  ),
+  setup(props, { attrs, slots }) {
+    const lastOutSideActiveElementRef = shallowRef<HTMLElement>()
+    const wrapperRef = shallowRef<HTMLDivElement>()
+    const contentRef = shallowRef<ContentRef>()
+    const animatedVisible = shallowRef(props.visible)
+    const ariaIdRef = shallowRef<string>(`vcDialogTitle${getUUID()}`)
+
+    // ========================= Events =========================
+    const onDialogVisibleChanged = (newVisible: boolean) => {
+      if (newVisible) {
+        // Try to focus
+        if (!contains(wrapperRef.value, document.activeElement as HTMLElement)) {
+          lastOutSideActiveElementRef.value = document.activeElement as HTMLElement
+          contentRef.value?.focus()
+        }
+      } else {
+        const preAnimatedVisible = animatedVisible.value
+        // Clean up scroll bar & focus back
+        animatedVisible.value = false
+        if (props.mask && lastOutSideActiveElementRef.value && props.focusTriggerAfterClose) {
+          try {
+            lastOutSideActiveElementRef.value.focus({ preventScroll: true })
+          } catch (e) {
+            // Do nothing
+          }
+          lastOutSideActiveElementRef.value = null
+        }
+
+        // Trigger afterClose only when change visible from true to false
+        if (preAnimatedVisible) {
+          props.afterClose?.()
+        }
+      }
+    }
+
+    const onInternalClose = (e: MouseEvent | KeyboardEvent) => {
+      props.onClose?.(e)
+    }
+
+    // >>> Content
+    const contentClickRef = shallowRef(false)
+    const contentTimeoutRef = shallowRef<any>()
+
+    // We need record content click incase content popup out of dialog
+    const onContentMouseDown: MouseEventHandler = () => {
+      clearTimeout(contentTimeoutRef.value)
+      contentClickRef.value = true
+    }
+
+    const onContentMouseUp: MouseEventHandler = () => {
+      contentTimeoutRef.value = setTimeout(() => {
+        contentClickRef.value = false
+      })
+    }
+
+    const onWrapperClick = (e: MouseEvent) => {
+      if (!props.maskClosable) return null
+      if (contentClickRef.value) {
+        contentClickRef.value = false
+      } else if (wrapperRef.value === e.target) {
+        onInternalClose(e)
+      }
+    }
+    const onWrapperKeyDown = (e: KeyboardEvent) => {
+      if (props.keyboard && e.keyCode === KeyCode.ESC) {
+        e.stopPropagation()
+        onInternalClose(e)
+        return
+      }
+
+      // keep focus inside dialog
+      if (props.visible) {
+        if (e.keyCode === KeyCode.TAB) {
+          contentRef.value.changeActive(!e.shiftKey)
+        }
+      }
+    }
+
+    watch(
+      () => props.visible,
+      () => {
+        if (props.visible) {
+          animatedVisible.value = true
+        }
+      },
+      { flush: 'post' },
+    )
+
+    onBeforeUnmount(() => {
+      clearTimeout(contentTimeoutRef.value)
+      props.scrollLocker?.unLock()
+    })
+    watchEffect(() => {
+      props.scrollLocker?.unLock()
+      if (animatedVisible.value) {
+        props.scrollLocker?.lock()
+      }
+    })
+
+    return () => {
+      const {
+        prefixCls,
+        mask,
+        visible,
+        maskTransitionName,
+        maskAnimation,
+        zIndex,
+        wrapClassName,
+        rootClassName,
+        wrapStyle,
+        closable,
+        maskProps,
+        maskStyle,
+        transitionName,
+        animation,
+        wrapProps,
+        title = slots.title,
+      } = props
+      const { style, class: className } = attrs
+      return (
+        <div class={[`${prefixCls}-root`, rootClassName]} {...pickAttrs(props, { data: true })}>
+          <Mask
+            prefixCls={prefixCls}
+            visible={mask && visible}
+            motionName={getMotionName(prefixCls, maskTransitionName, maskAnimation)}
+            style={{
+              zIndex,
+              ...maskStyle,
+            }}
+            maskProps={maskProps}
+          />
+          <div
+            tabIndex={-1}
+            onKeydown={onWrapperKeyDown}
+            class={classNames(`${prefixCls}-wrap`, wrapClassName)}
+            ref={wrapperRef}
+            onClick={onWrapperClick}
+            role="dialog"
+            aria-labelledby={title ? ariaIdRef.value : null}
+            style={{ zIndex, ...wrapStyle, display: !animatedVisible.value ? 'none' : null }}
+            {...wrapProps}
+          >
+            <Content
+              {...omit(props, ['scrollLocker'])}
+              style={style}
+              class={className}
+              v-slots={slots}
+              onMousedown={onContentMouseDown}
+              onMouseup={onContentMouseUp}
+              ref={contentRef}
+              closable={closable}
+              ariaId={ariaIdRef.value}
+              prefixCls={prefixCls}
+              visible={visible}
+              onClose={onInternalClose}
+              onVisibleChanged={onDialogVisibleChanged}
+              motionName={getMotionName(prefixCls, transitionName, animation)}
+            />
+          </div>
+        </div>
+      )
+    }
+  },
+})

package/src/vc-dialog/DialogWrap.tsx

@@ -0,0 +1,78 @@
+import { defineComponent, ref, watch } from 'vue'
+
+import Portal from '../_util/PortalWrapper'
+import { initDefaultProps } from '../_util/props-util'
+import { useProvidePortal } from '../vc-trigger/context'
+import Dialog from './Dialog'
+import type { IDialogChildProps } from './IDialogPropTypes'
+import getDialogPropTypes from './IDialogPropTypes'
+
+const IDialogPropTypes = getDialogPropTypes()
+const DialogWrap = defineComponent({
+  compatConfig: { MODE: 3 },
+  name: 'DialogWrap',
+  inheritAttrs: false,
+  props: initDefaultProps(IDialogPropTypes, {
+    visible: false,
+  }),
+  setup(props, { attrs, slots }) {
+    const animatedVisible = ref(props.visible)
+    useProvidePortal({}, { inTriggerContext: false })
+    watch(
+      () => props.visible,
+      () => {
+        if (props.visible) {
+          animatedVisible.value = true
+        }
+      },
+      { flush: 'post' },
+    )
+    return () => {
+      const { visible, getContainer, forceRender, destroyOnClose = false, afterClose } = props
+      let dialogProps = {
+        ...props,
+        ...attrs,
+        ref: '_component',
+        key: 'dialog',
+      } as IDialogChildProps
+      // 渲染在当前 dom 里；
+      if (getContainer === false) {
+        return (
+          <Dialog
+            {...dialogProps}
+            getOpenCount={() => 2} // 不对 body 做任何操作。。
+            v-slots={slots}
+          ></Dialog>
+        )
+      }
+
+      // Destroy on close will remove wrapped div
+      if (!forceRender && destroyOnClose && !animatedVisible.value) {
+        return null
+      }
+      return (
+        <Portal
+          autoLock
+          visible={visible}
+          forceRender={forceRender}
+          getContainer={getContainer}
+          v-slots={{
+            default: (childProps: IDialogChildProps) => {
+              dialogProps = {
+                ...dialogProps,
+                ...childProps,
+                afterClose: () => {
+                  afterClose?.()
+                  animatedVisible.value = false
+                },
+              }
+              return <Dialog {...dialogProps} v-slots={slots}></Dialog>
+            },
+          }}
+        />
+      )
+    }
+  },
+})
+
+export default DialogWrap

package/src/vc-dialog/IDialogPropTypes.ts

@@ -0,0 +1,50 @@
+import type { CSSProperties, ExtractPropTypes, PropType } from 'vue'
+
+import PropTypes from '../_util/vue-types'
+
+export function dialogPropTypes() {
+  return {
+    keyboard: { type: Boolean, default: undefined },
+    mask: { type: Boolean, default: undefined },
+    afterClose: Function,
+    closable: { type: Boolean, default: undefined },
+    maskClosable: { type: Boolean, default: undefined },
+    visible: { type: Boolean, default: undefined },
+    destroyOnClose: { type: Boolean, default: undefined },
+    mousePosition: PropTypes.shape({
+      x: Number,
+      y: Number,
+    }).loose,
+    title: PropTypes.any,
+    footer: PropTypes.any,
+    transitionName: String,
+    maskTransitionName: String,
+    animation: PropTypes.any,
+    maskAnimation: PropTypes.any,
+    wrapStyle: { type: Object as PropType<CSSProperties>, default: undefined as CSSProperties },
+    bodyStyle: { type: Object as PropType<CSSProperties>, default: undefined as CSSProperties },
+    maskStyle: { type: Object as PropType<CSSProperties>, default: undefined as CSSProperties },
+    prefixCls: String,
+    wrapClassName: String,
+    rootClassName: String,
+    width: [String, Number],
+    height: [String, Number],
+    zIndex: Number,
+    bodyProps: PropTypes.any,
+    maskProps: PropTypes.any,
+    wrapProps: PropTypes.any,
+    getContainer: PropTypes.any,
+    dialogStyle: { type: Object as PropType<CSSProperties>, default: undefined as CSSProperties },
+    dialogClass: String,
+    closeIcon: PropTypes.any,
+    forceRender: { type: Boolean, default: undefined },
+    getOpenCount: Function as PropType<() => number>,
+    // https://github.com/ant-design/ant-design/issues/19771
+    // https://github.com/react-component/dialog/issues/95
+    focusTriggerAfterClose: { type: Boolean, default: undefined },
+    onClose: Function as PropType<(e: MouseEvent | KeyboardEvent) => void>,
+    modalRender: Function,
+  }
+}
+export type IDialogChildProps = Partial<ExtractPropTypes<ReturnType<typeof dialogPropTypes>>>
+export default dialogPropTypes

package/src/vc-dialog/Mask.tsx

@@ -0,0 +1,25 @@
+import { Transition, defineComponent } from 'vue'
+
+import { getTransitionProps } from '../_util/transition'
+
+export default defineComponent({
+  compatConfig: { MODE: 3 },
+  name: 'DialogMask',
+  props: {
+    prefixCls: String,
+    visible: Boolean,
+    motionName: String,
+    maskProps: Object,
+  },
+  setup(props, {}) {
+    return () => {
+      const { prefixCls, visible, maskProps, motionName } = props
+      const transitionProps = getTransitionProps(motionName)
+      return (
+        <Transition {...transitionProps}>
+          <div v-show={visible} class={`${prefixCls}-mask`} {...maskProps} />
+        </Transition>
+      )
+    }
+  },
+})

package/src/vc-dialog/index.ts

@@ -0,0 +1,7 @@
+// based on vc-dialog 8.6.0
+import DialogWrap from './DialogWrap'
+import dialogProps from './IDialogPropTypes'
+
+export { dialogProps }
+
+export default DialogWrap

package/src/vc-dialog/util.ts

@@ -0,0 +1,46 @@
+// =============================== Motion ===============================
+export function getMotionName(prefixCls: string, transitionName?: string, animationName?: string) {
+  let motionName = transitionName
+  if (!motionName && animationName) {
+    motionName = `${prefixCls}-${animationName}`
+  }
+  return motionName
+}
+
+// ================================ UUID ================================
+let uuid = -1
+export function getUUID() {
+  uuid += 1
+  return uuid
+}
+
+// =============================== Offset ===============================
+function getScroll(w: Window, top?: boolean): number {
+  let ret = w[`page${top ? 'Y' : 'X'}Offset`]
+  const method = `scroll${top ? 'Top' : 'Left'}`
+  if (typeof ret !== 'number') {
+    const d = w.document
+    ret = d.documentElement[method]
+    if (typeof ret !== 'number') {
+      ret = d.body[method]
+    }
+  }
+  return ret
+}
+
+type CompatibleDocument = {
+  parentWindow?: Window
+} & Document
+
+export function offset(el: Element) {
+  const rect = el.getBoundingClientRect()
+  const pos = {
+    left: rect.left,
+    top: rect.top,
+  }
+  const doc = el.ownerDocument as CompatibleDocument
+  const w = doc.defaultView || doc.parentWindow
+  pos.left += getScroll(w)
+  pos.top += getScroll(w, true)
+  return pos
+}

package/src/vc-drawer/index.ts

@@ -0,0 +1,4 @@
+// base rc-drawer 4.4.3
+import Drawer from './src/DrawerWrapper'
+
+export default Drawer

package/src/vc-drawer/src/DrawerChild.tsx

@@ -0,0 +1,258 @@
+import {
+  Transition,
+  defineComponent,
+  nextTick,
+  onMounted,
+  onUnmounted,
+  shallowRef,
+  watch,
+} from 'vue'
+
+import KeyCode from '../../_util/KeyCode'
+import classnames from '../../_util/classNames'
+import omit from '../../_util/omit'
+import { drawerChildProps } from './IDrawerPropTypes'
+import { dataToArray, windowIsUndefined } from './utils'
+
+const currentDrawer: Record<string, boolean> = {}
+
+export interface scrollLockOptions {
+  container: HTMLElement
+}
+
+const DrawerChild = defineComponent({
+  compatConfig: { MODE: 3 },
+  inheritAttrs: false,
+  props: drawerChildProps(),
+  emits: ['close', 'handleClick', 'change'],
+  setup(props, { emit, slots }) {
+    const contentWrapper = shallowRef<HTMLElement>()
+    const dom = shallowRef<HTMLElement>()
+    const maskDom = shallowRef<HTMLElement>()
+    const handlerDom = shallowRef<HTMLElement>()
+    const contentDom = shallowRef<HTMLElement>()
+    let levelDom = []
+    const drawerId = `drawer_id_${Number(
+      (Date.now() + Math.random())
+        .toString()
+        .replace('.', Math.round(Math.random() * 9).toString()),
+    ).toString(16)}`
+
+    onMounted(() => {
+      nextTick(() => {
+        const { open, getContainer, showMask, autofocus } = props
+        const container = getContainer?.()
+        getLevelDom(props)
+        if (open) {
+          if (container && container.parentNode === document.body) {
+            currentDrawer[drawerId] = open
+          }
+          nextTick(() => {
+            if (autofocus) {
+              domFocus()
+            }
+          })
+          if (showMask) {
+            props.scrollLocker?.lock()
+          }
+        }
+      })
+    })
+    watch(
+      () => props.level,
+      () => {
+        getLevelDom(props)
+      },
+      { flush: 'post' },
+    )
+    watch(
+      () => props.open,
+      () => {
+        const { open, getContainer, scrollLocker, showMask, autofocus } = props
+        const container = getContainer?.()
+        if (container && container.parentNode === document.body) {
+          currentDrawer[drawerId] = !!open
+        }
+        if (open) {
+          if (autofocus) {
+            domFocus()
+          }
+          if (showMask) {
+            scrollLocker?.lock()
+          }
+        } else {
+          scrollLocker?.unLock()
+        }
+      },
+      { flush: 'post' },
+    )
+
+    onUnmounted(() => {
+      const { open } = props
+      delete currentDrawer[drawerId]
+      if (open) {
+        document.body.style.touchAction = ''
+      }
+      props.scrollLocker?.unLock()
+    })
+
+    watch(
+      () => props.placement,
+      (val) => {
+        if (val) {
+          // test 的 bug, 有动画过场，删除 dom
+          contentDom.value = null
+        }
+      },
+    )
+
+    const domFocus = () => {
+      dom.value?.focus?.()
+    }
+
+    const onClose = (e: Event) => {
+      emit('close', e)
+    }
+
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (e.keyCode === KeyCode.ESC) {
+        e.stopPropagation()
+        onClose(e)
+      }
+    }
+
+    const onAfterVisibleChange = () => {
+      const { open, afterVisibleChange } = props
+      if (afterVisibleChange) {
+        afterVisibleChange(!!open)
+      }
+    }
+
+    const getLevelDom = ({ level, getContainer }) => {
+      if (windowIsUndefined) {
+        return
+      }
+      const container = getContainer?.()
+      const parent = container ? (container.parentNode as HTMLElement) : null
+      levelDom = []
+      if (level === 'all') {
+        const children: HTMLElement[] = parent ? Array.prototype.slice.call(parent.children) : []
+        children.forEach((child: HTMLElement) => {
+          if (
+            child.nodeName !== 'SCRIPT' &&
+            child.nodeName !== 'STYLE' &&
+            child.nodeName !== 'LINK' &&
+            child !== container
+          ) {
+            levelDom.push(child)
+          }
+        })
+      } else if (level) {
+        dataToArray(level).forEach((key) => {
+          document.querySelectorAll(key).forEach((item) => {
+            levelDom.push(item)
+          })
+        })
+      }
+    }
+
+    const onHandleClick = (e) => {
+      emit('handleClick', e)
+    }
+
+    const canOpen = shallowRef(false)
+    watch(dom, () => {
+      nextTick(() => {
+        canOpen.value = true
+      })
+    })
+
+    return () => {
+      const {
+        width,
+        height,
+        open: $open,
+        prefixCls,
+        placement,
+        level,
+        levelMove,
+        ease,
+        duration,
+        getContainer,
+        onChange,
+        afterVisibleChange,
+        showMask,
+        maskClosable,
+        maskStyle,
+        keyboard,
+        getOpenCount,
+        scrollLocker,
+        contentWrapperStyle,
+        style,
+        class: className,
+        rootClassName,
+        rootStyle,
+        maskMotion,
+        motion,
+        inline,
+        ...otherProps
+      } = props
+      // 首次渲染都将是关闭状态。
+      const open = $open && canOpen.value
+      const wrapperClassName = classnames(prefixCls, {
+        [`${prefixCls}-${placement}`]: true,
+        [`${prefixCls}-open`]: open,
+        [`${prefixCls}-inline`]: inline,
+        'no-mask': !showMask,
+        [rootClassName]: true,
+      })
+
+      const motionProps = typeof motion === 'function' ? motion(placement) : motion
+      return (
+        <div
+          {...omit(otherProps, ['autofocus'])}
+          tabindex={-1}
+          class={wrapperClassName}
+          style={rootStyle}
+          ref={dom}
+          onKeydown={open && keyboard ? onKeyDown : undefined}
+        >
+          <Transition {...maskMotion}>
+            {showMask && (
+              <div
+                v-show={open}
+                class={`${prefixCls}-mask`}
+                onClick={maskClosable ? onClose : undefined}
+                style={maskStyle}
+                ref={maskDom}
+              />
+            )}
+          </Transition>
+          <Transition
+            {...motionProps}
+            onAfterEnter={onAfterVisibleChange}
+            onAfterLeave={onAfterVisibleChange}
+          >
+            <div
+              v-show={open}
+              class={`${prefixCls}-content-wrapper`}
+              style={[contentWrapperStyle]}
+              ref={contentWrapper}
+            >
+              <div class={[`${prefixCls}-content`, className]} style={style} ref={contentDom}>
+                {slots.default?.()}
+              </div>
+              {slots.handler ? (
+                <div onClick={onHandleClick} ref={handlerDom}>
+                  {slots.handler?.()}
+                </div>
+              ) : null}
+            </div>
+          </Transition>
+        </div>
+      )
+    }
+  },
+})
+
+export default DrawerChild