@antsoo-lib/components 0.1.2 → 0.1.4

package/src/vc-tree-select/utils/warningPropsUtil.ts

@@ -0,0 +1,35 @@
+import { warning } from '../../vc-util/warning'
+import type { TreeSelectProps } from '../TreeSelect'
+import { toArray } from './valueUtil'
+
+function warningProps(props: TreeSelectProps & { searchPlaceholder?: string }) {
+  const { searchPlaceholder, treeCheckStrictly, treeCheckable, labelInValue, value, multiple } =
+    props
+
+  warning(
+    !searchPlaceholder,
+    '`searchPlaceholder` has been removed, please use `placeholder` instead',
+  )
+
+  if (treeCheckStrictly && labelInValue === false) {
+    warning(false, '`treeCheckStrictly` will force set `labelInValue` to `true`.')
+  }
+
+  if (labelInValue || treeCheckStrictly) {
+    warning(
+      toArray(value).every((val) => val && typeof val === 'object' && 'value' in val),
+      'Invalid prop `value` supplied to `TreeSelect`. You should use { label: string, value: string | number } or [{ label: string, value: string | number }] instead.',
+    )
+  }
+
+  if (treeCheckStrictly || multiple || treeCheckable) {
+    warning(
+      !value || Array.isArray(value),
+      '`value` should be an array when `TreeSelect` is checkable or multiple.',
+    )
+  } else {
+    warning(!Array.isArray(value), '`value` should not be array when `TreeSelect` is single mode.')
+  }
+}
+
+export default warningProps

package/src/vc-trigger/Popup/Mask.tsx

@@ -0,0 +1,38 @@
+import { Transition } from 'vue'
+
+import type { AnimationType, TransitionNameType } from '../interface'
+import { getMotion } from '../utils/motionUtil'
+
+export interface MaskProps {
+  prefixCls: string
+  visible?: boolean
+  zIndex?: number
+  mask?: boolean
+  maskAnimation?: AnimationType
+  maskTransitionName?: TransitionNameType
+}
+
+export default function Mask(props: MaskProps) {
+  const { prefixCls, visible, zIndex, mask, maskAnimation, maskTransitionName } = props
+
+  if (!mask) {
+    return null
+  }
+
+  let motion = {}
+
+  if (maskTransitionName || maskAnimation) {
+    motion = getMotion({
+      prefixCls,
+      transitionName: maskTransitionName,
+      animation: maskAnimation,
+    })
+  }
+
+  return (
+    <Transition appear {...motion}>
+      <div v-show={visible} style={{ zIndex }} class={`${prefixCls}-mask`} />
+    </Transition>
+  )
+}
+Mask.displayName = 'Mask'

package/src/vc-trigger/Popup/MobilePopupInner.tsx

@@ -0,0 +1,60 @@
+import type { CSSProperties } from 'vue'
+import { Transition, defineComponent, ref } from 'vue'
+
+import classNames from '../../_util/classNames'
+import { flattenChildren } from '../../_util/props-util'
+import type { MobilePopupProps } from './interface'
+import { mobileProps } from './interface'
+
+export default defineComponent({
+  compatConfig: { MODE: 3 },
+  name: 'MobilePopupInner',
+  inheritAttrs: false,
+  props: mobileProps,
+  emits: ['mouseenter', 'mouseleave', 'mousedown', 'touchstart', 'align'],
+  setup(props, { expose, slots }) {
+    const elementRef = ref<HTMLDivElement>()
+
+    expose({
+      forceAlign: () => {},
+      getElement: () => elementRef.value,
+    })
+
+    return () => {
+      const {
+        zIndex,
+        visible,
+        prefixCls,
+        mobile: { popupClassName, popupStyle, popupMotion = {}, popupRender } = {},
+      } = props as MobilePopupProps
+      // ======================== Render ========================
+      const mergedStyle: CSSProperties = {
+        zIndex,
+        ...popupStyle,
+      }
+
+      let childNode: any = flattenChildren(slots.default?.())
+
+      // Wrapper when multiple children
+      if (childNode.length > 1) {
+        childNode = <div class={`${prefixCls}-content`}>{childNode}</div>
+      }
+
+      // Mobile support additional render
+      if (popupRender) {
+        childNode = popupRender(childNode)
+      }
+
+      const mergedClassName = classNames(prefixCls, popupClassName)
+      return (
+        <Transition ref={elementRef} {...popupMotion}>
+          {visible ? (
+            <div class={mergedClassName} style={mergedStyle}>
+              {childNode}
+            </div>
+          ) : null}
+        </Transition>
+      )
+    }
+  },
+})

package/src/vc-trigger/Popup/PopupInner.tsx

@@ -0,0 +1,221 @@
+import type { CSSProperties } from 'vue'
+import { Transition, computed, defineComponent, shallowRef, toRef, watch, withModifiers } from 'vue'
+
+import classNames from '../../_util/classNames'
+import { flattenChildren } from '../../_util/props-util'
+import supportsPassive from '../../_util/supportsPassive'
+import { getTransitionProps } from '../../_util/transition'
+import type { RefAlign } from '../../vc-align/Align'
+import Align from '../../vc-align/Align'
+import type { AlignType } from '../interface'
+import { getMotion } from '../utils/motionUtil'
+import type { PopupInnerProps } from './interface'
+import { innerProps } from './interface'
+import useStretchStyle from './useStretchStyle'
+import useVisibleStatus from './useVisibleStatus'
+
+export default defineComponent({
+  compatConfig: { MODE: 3 },
+  name: 'PopupInner',
+  inheritAttrs: false,
+  props: innerProps,
+  emits: ['mouseenter', 'mouseleave', 'mousedown', 'touchstart', 'align'],
+  setup(props, { expose, attrs, slots }) {
+    const alignRef = shallowRef<RefAlign>()
+    const elementRef = shallowRef<HTMLDivElement>()
+    const alignedClassName = shallowRef<string>()
+    // ======================= Measure ========================
+    const [stretchStyle, measureStretchStyle] = useStretchStyle(toRef(props, 'stretch'))
+
+    const doMeasure = () => {
+      if (props.stretch) {
+        measureStretchStyle(props.getRootDomNode())
+      }
+    }
+    const visible = shallowRef(false)
+    let timeoutId: any
+    watch(
+      () => props.visible,
+      (val) => {
+        clearTimeout(timeoutId)
+        if (val) {
+          timeoutId = setTimeout(() => {
+            visible.value = props.visible
+          })
+        } else {
+          visible.value = false
+        }
+      },
+      { immediate: true },
+    )
+
+    // ======================== Status ========================
+    const [status, goNextStatus] = useVisibleStatus(visible, doMeasure)
+
+    // ======================== Aligns ========================
+    const prepareResolveRef = shallowRef<(value?: unknown) => void>()
+
+    // `target` on `rc-align` can accept as a function to get the bind element or a point.
+    // ref: https://www.npmjs.com/package/rc-align
+    const getAlignTarget = () => {
+      if (props.point) {
+        return props.point
+      }
+      return props.getRootDomNode
+    }
+
+    const forceAlign = () => {
+      alignRef.value?.forceAlign()
+    }
+
+    const onInternalAlign = (popupDomNode: HTMLElement, matchAlign: AlignType) => {
+      const nextAlignedClassName = props.getClassNameFromAlign(matchAlign)
+      const preAlignedClassName = alignedClassName.value
+      if (alignedClassName.value !== nextAlignedClassName) {
+        alignedClassName.value = nextAlignedClassName
+      }
+      if (status.value === 'align') {
+        // Repeat until not more align needed
+        if (preAlignedClassName !== nextAlignedClassName) {
+          Promise.resolve().then(() => {
+            forceAlign()
+          })
+        } else {
+          goNextStatus(() => {
+            prepareResolveRef.value?.()
+          })
+        }
+
+        props.onAlign?.(popupDomNode, matchAlign)
+      }
+    }
+
+    // ======================== Motion ========================
+    const motion = computed(() => {
+      const m = typeof props.animation === 'object' ? props.animation : getMotion(props as any)
+      ;['onAfterEnter', 'onAfterLeave'].forEach((eventName) => {
+        const originFn = m[eventName]
+        m[eventName] = (node) => {
+          goNextStatus()
+          // 结束后，强制 stable
+          status.value = 'stable'
+          originFn?.(node)
+        }
+      })
+      return m
+    })
+
+    const onShowPrepare = () => {
+      return new Promise((resolve) => {
+        prepareResolveRef.value = resolve
+      })
+    }
+
+    watch(
+      [motion, status],
+      () => {
+        if (!motion.value && status.value === 'motion') {
+          goNextStatus()
+        }
+      },
+      { immediate: true },
+    )
+
+    expose({
+      forceAlign,
+      getElement: () => {
+        return (elementRef.value as any).$el || elementRef.value
+      },
+    })
+    const alignDisabled = computed(() => {
+      if ((props.align as any)?.points && (status.value === 'align' || status.value === 'stable')) {
+        return false
+      }
+      return true
+    })
+    return () => {
+      const {
+        zIndex,
+        align,
+        prefixCls,
+        destroyPopupOnHide,
+        onMouseenter,
+        onMouseleave,
+        onTouchstart = () => {},
+        onMousedown,
+      } = props as PopupInnerProps
+      const statusValue = status.value
+      // ======================== Render ========================
+      const mergedStyle: CSSProperties[] = [
+        {
+          ...stretchStyle.value,
+          zIndex,
+          opacity:
+            statusValue === 'motion' || statusValue === 'stable' || !visible.value ? null : 0,
+          // pointerEvents: statusValue === 'stable' ? null : 'none',
+          pointerEvents: !visible.value && statusValue !== 'stable' ? 'none' : null,
+        },
+        attrs.style as CSSProperties,
+      ]
+
+      let childNode: any = flattenChildren(slots.default?.({ visible: props.visible }))
+
+      // Wrapper when multiple children
+      if (childNode.length > 1) {
+        childNode = <div class={`${prefixCls}-content`}>{childNode}</div>
+      }
+
+      const mergedClassName = classNames(
+        prefixCls,
+        attrs.class,
+        alignedClassName.value,
+        !props.arrow && `${prefixCls}-arrow-hidden`,
+      )
+      const hasAnimate = visible.value || !props.visible
+      const transitionProps = hasAnimate ? getTransitionProps(motion.value.name, motion.value) : {}
+
+      return (
+        <Transition
+          ref={elementRef}
+          {...transitionProps}
+          onBeforeEnter={onShowPrepare}
+          v-slots={{
+            default: () => {
+              return !destroyPopupOnHide || props.visible ? (
+                <Align
+                  v-show={visible.value}
+                  target={getAlignTarget()}
+                  key="popup"
+                  ref={alignRef}
+                  monitorWindowResize
+                  disabled={alignDisabled.value}
+                  align={align as any}
+                  onAlign={onInternalAlign}
+                  v-slots={{
+                    default: () => (
+                      <div
+                        class={mergedClassName}
+                        onMouseenter={onMouseenter}
+                        onMouseleave={onMouseleave}
+                        onMousedown={withModifiers(onMousedown, ['capture'] as any)}
+                        {...{
+                          [supportsPassive ? 'onTouchstartPassive' : 'onTouchstart']: withModifiers(
+                            onTouchstart,
+                            ['capture'] as any,
+                          ),
+                        }}
+                        style={mergedStyle}
+                      >
+                        {childNode}
+                      </div>
+                    ),
+                  }}
+                ></Align>
+              ) : null
+            },
+          }}
+        ></Transition>
+      )
+    }
+  },
+})

package/src/vc-trigger/Popup/index.tsx

@@ -0,0 +1,57 @@
+import { defineComponent, shallowRef, watch } from 'vue'
+
+import Mask from './Mask'
+import MobilePopupInner from './MobilePopupInner'
+import PopupInner from './PopupInner'
+import { popupProps } from './interface'
+
+export default defineComponent({
+  compatConfig: { MODE: 3 },
+  name: 'Popup',
+  inheritAttrs: false,
+  props: popupProps,
+  setup(props, { attrs, slots, expose }) {
+    const innerVisible = shallowRef(false)
+    const inMobile = shallowRef(false)
+    const popupRef = shallowRef()
+    const rootRef = shallowRef<HTMLElement>()
+    watch(
+      [() => props.visible, () => props.mobile],
+      () => {
+        innerVisible.value = props.visible
+        if (props.visible && props.mobile) {
+          inMobile.value = true
+        }
+      },
+      { immediate: true, flush: 'post' },
+    )
+    expose({
+      forceAlign: () => {
+        popupRef.value?.forceAlign()
+      },
+      getElement: () => {
+        return popupRef.value?.getElement()
+      },
+    })
+    return () => {
+      const cloneProps = { ...props, ...attrs, visible: innerVisible.value }
+      const popupNode = inMobile.value ? (
+        <MobilePopupInner
+          {...cloneProps}
+          mobile={props.mobile}
+          ref={popupRef}
+          v-slots={{ default: slots.default }}
+        ></MobilePopupInner>
+      ) : (
+        <PopupInner {...cloneProps} ref={popupRef} v-slots={{ default: slots.default }} />
+      )
+
+      return (
+        <div ref={rootRef}>
+          <Mask {...cloneProps} />
+          {popupNode}
+        </div>
+      )
+    }
+  },
+})

package/src/vc-trigger/Popup/interface.ts

@@ -0,0 +1,61 @@
+import type { ExtractPropTypes, PropType } from 'vue'
+
+import type { AlignType, MobileConfig, Point, StretchType } from '../interface'
+
+export const innerProps = {
+  visible: Boolean,
+
+  prefixCls: String,
+  zIndex: Number,
+
+  destroyPopupOnHide: Boolean,
+  forceRender: Boolean,
+
+  arrow: { type: Boolean, default: true },
+
+  // Legacy Motion
+  animation: [String, Object],
+  transitionName: String,
+
+  // Measure
+  stretch: { type: String as PropType<StretchType> },
+
+  // Align
+  align: { type: Object as PropType<AlignType> },
+  point: { type: Object as PropType<Point> },
+  getRootDomNode: { type: Function as PropType<() => HTMLElement> },
+  getClassNameFromAlign: { type: Function as PropType<(align: AlignType) => string> },
+  onAlign: {
+    type: Function as PropType<(popupDomNode: HTMLElement, align: AlignType) => void>,
+  },
+  onMouseenter: { type: Function as PropType<(align: MouseEvent) => void> },
+  onMouseleave: { type: Function as PropType<(align: MouseEvent) => void> },
+  onMousedown: { type: Function as PropType<(align: MouseEvent) => void> },
+  onTouchstart: { type: Function as PropType<(align: MouseEvent) => void> },
+}
+export type PopupInnerProps = Partial<ExtractPropTypes<typeof innerProps>> & {
+  align?: AlignType
+}
+
+export const mobileProps = {
+  ...innerProps,
+  mobile: { type: Object as PropType<MobileConfig> },
+}
+
+export type MobilePopupProps = Partial<ExtractPropTypes<typeof mobileProps>> & {
+  align?: AlignType
+  mobile: MobileConfig
+}
+
+export const popupProps = {
+  ...innerProps,
+  mask: Boolean,
+  mobile: { type: Object as PropType<MobileConfig> },
+  maskAnimation: String,
+  maskTransitionName: String,
+}
+
+export type PopupProps = Partial<ExtractPropTypes<typeof popupProps>> & {
+  align?: AlignType
+  mobile: MobileConfig
+}

package/src/vc-trigger/Popup/useStretchStyle.ts

@@ -0,0 +1,42 @@
+import type { CSSProperties, ComputedRef, Ref } from 'vue'
+import { computed, shallowRef } from 'vue'
+
+import type { StretchType } from '../interface'
+
+export default (
+  stretch?: Ref<StretchType>,
+): [ComputedRef<CSSProperties>, (element: HTMLElement) => void] => {
+  const targetSize = shallowRef({ width: 0, height: 0 })
+
+  function measureStretch(element: HTMLElement) {
+    targetSize.value = {
+      width: element.offsetWidth,
+      height: element.offsetHeight,
+    }
+  }
+
+  // Merge stretch style
+  const style = computed(() => {
+    const sizeStyle: CSSProperties = {}
+
+    if (stretch.value) {
+      const { width, height } = targetSize.value
+
+      // Stretch with target
+      if (stretch.value.includes('height') && height) {
+        sizeStyle.height = `${height}px`
+      } else if (stretch.value.includes('minHeight') && height) {
+        sizeStyle.minHeight = `${height}px`
+      }
+      if (stretch.value.includes('width') && width) {
+        sizeStyle.width = `${width}px`
+      } else if (stretch.value.includes('minWidth') && width) {
+        sizeStyle.minWidth = `${width}px`
+      }
+    }
+
+    return sizeStyle
+  })
+
+  return [style, measureStretch]
+}

package/src/vc-trigger/Popup/useVisibleStatus.ts

@@ -0,0 +1,98 @@
+import type { Ref } from 'vue'
+import { onBeforeUnmount, onMounted, shallowRef, watch } from 'vue'
+
+import raf from '../../_util/raf'
+
+/**
+ * Popup should follow the steps for each component work correctly:
+ * measure - check for the value stretch size
+ * align - let component align the position
+ * aligned - re-align again in case additional className changed the size
+ * afterAlign - choice next step is trigger motion or finished
+ * beforeMotion - should reset motion to invisible so that CSSMotion can do normal motion
+ * motion - play the motion
+ * stable - everything is done
+ */
+type PopupStatus = null | 'measure' | 'align' | 'aligned' | 'motion' | 'stable'
+
+type Func = () => void
+
+const StatusQueue: PopupStatus[] = ['measure', 'align', null, 'motion']
+
+export default (
+  visible: Ref<boolean>,
+  doMeasure: Func,
+): [Ref<PopupStatus>, (callback?: () => void) => void] => {
+  const status = shallowRef<PopupStatus>(null)
+  const rafRef = shallowRef<number>()
+  const destroyRef = shallowRef(false)
+  function setStatus(nextStatus: PopupStatus) {
+    if (!destroyRef.value) {
+      status.value = nextStatus
+    }
+  }
+
+  function cancelRaf() {
+    raf.cancel(rafRef.value)
+  }
+
+  function goNextStatus(callback?: () => void) {
+    cancelRaf()
+    rafRef.value = raf(() => {
+      // Only align should be manually trigger
+      let newStatus = status.value
+      switch (status.value) {
+        case 'align':
+          newStatus = 'motion'
+          break
+        case 'motion':
+          newStatus = 'stable'
+          break
+        default:
+      }
+      setStatus(newStatus)
+
+      callback?.()
+    })
+  }
+
+  watch(
+    visible,
+    () => {
+      setStatus('measure')
+    },
+    { immediate: true, flush: 'post' },
+  )
+  onMounted(() => {
+    // Go next status
+    watch(
+      status,
+      () => {
+        switch (status.value) {
+          case 'measure':
+            doMeasure()
+            break
+          default:
+        }
+
+        if (status.value) {
+          rafRef.value = raf(async () => {
+            const index = StatusQueue.indexOf(status.value)
+            const nextStatus = StatusQueue[index + 1]
+            if (nextStatus && index !== -1) {
+              setStatus(nextStatus)
+            }
+          })
+        }
+      },
+      { immediate: true, flush: 'post' },
+    )
+  })
+
+  onBeforeUnmount(() => {
+    destroyRef.value = true
+    cancelRaf()
+  })
+
+  return [status, goNextStatus]
+}