@antsoo-lib/components 0.1.2 → 0.1.4

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

@@ -0,0 +1,101 @@
+import { defineComponent, ref } from 'vue'
+
+import PortalWrapper from '../../_util/PortalWrapper'
+import { initDefaultProps } from '../../_util/props-util'
+import Child from './DrawerChild'
+import { drawerProps } from './IDrawerPropTypes'
+
+const DrawerWrapper = defineComponent({
+  compatConfig: { MODE: 3 },
+  inheritAttrs: false,
+  props: initDefaultProps(drawerProps(), {
+    prefixCls: 'drawer',
+    placement: 'left',
+    getContainer: 'body',
+    level: 'all',
+    duration: '.3s',
+    ease: 'cubic-bezier(0.78, 0.14, 0.15, 0.86)',
+    afterVisibleChange: () => {},
+    showMask: true,
+    maskClosable: true,
+    maskStyle: {},
+    wrapperClassName: '',
+    keyboard: true,
+    forceRender: false,
+    autofocus: true,
+  }),
+  emits: ['handleClick', 'close'],
+  setup(props, { emit, slots }) {
+    const dom = ref<HTMLElement>(null)
+
+    const onHandleClick = (e: MouseEvent | KeyboardEvent) => {
+      emit('handleClick', e)
+    }
+
+    const onClose = (e: MouseEvent | KeyboardEvent) => {
+      emit('close', e)
+    }
+
+    return () => {
+      const {
+        getContainer,
+        wrapperClassName,
+        rootClassName,
+        rootStyle,
+        forceRender,
+        ...otherProps
+      } = props
+
+      let portal = null
+      if (!getContainer) {
+        return (
+          <Child
+            v-slots={slots}
+            {...otherProps}
+            rootClassName={rootClassName}
+            rootStyle={rootStyle}
+            open={props.open}
+            onClose={onClose}
+            onHandleClick={onHandleClick}
+            inline={true}
+          ></Child>
+        )
+      }
+
+      // 如果有 handler 为内置强制渲染；
+      const $forceRender = !!slots.handler || forceRender
+      if ($forceRender || props.open || dom.value) {
+        portal = (
+          <PortalWrapper
+            autoLock
+            visible={props.open}
+            forceRender={$forceRender}
+            getContainer={getContainer}
+            wrapperClassName={wrapperClassName}
+            v-slots={{
+              default: ({ visible, afterClose, ...rest }) => (
+                <Child
+                  ref={dom}
+                  v-slots={slots}
+                  {...otherProps}
+                  {...rest}
+                  rootClassName={rootClassName}
+                  rootStyle={rootStyle}
+                  open={visible !== undefined ? visible : props.open}
+                  afterVisibleChange={
+                    afterClose !== undefined ? afterClose : props.afterVisibleChange
+                  }
+                  onClose={onClose}
+                  onHandleClick={onHandleClick}
+                />
+              ),
+            }}
+          ></PortalWrapper>
+        )
+      }
+      return portal
+    }
+  },
+})
+
+export default DrawerWrapper

package/src/vc-drawer/src/IDrawerPropTypes.ts

@@ -0,0 +1,60 @@
+import type { CSSProperties, PropType, TransitionProps } from 'vue'
+
+import { arrayType, functionType, objectType } from '../../_util/type'
+import PropTypes from '../../_util/vue-types'
+
+export type IPlacement = 'left' | 'top' | 'right' | 'bottom'
+type ILevelMove = number | [number, number]
+const props = () => ({
+  prefixCls: String,
+  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  style: { type: Object as PropType<CSSProperties>, default: undefined as CSSProperties },
+  class: String,
+  rootClassName: String,
+  rootStyle: objectType<CSSProperties>(),
+  placement: {
+    type: String as PropType<IPlacement>,
+  },
+  wrapperClassName: String,
+  level: { type: [String, Array] as PropType<string | string[]> },
+  levelMove: {
+    type: [Number, Function, Array] as PropType<
+      ILevelMove | ((e: { target: HTMLElement; open: boolean }) => ILevelMove)
+    >,
+  },
+  duration: String,
+  ease: String,
+  showMask: { type: Boolean, default: undefined },
+  maskClosable: { type: Boolean, default: undefined },
+  maskStyle: { type: Object as PropType<CSSProperties>, default: undefined as CSSProperties },
+  afterVisibleChange: Function,
+  keyboard: { type: Boolean, default: undefined },
+  contentWrapperStyle: arrayType<CSSProperties[]>(),
+  autofocus: { type: Boolean, default: undefined },
+  open: { type: Boolean, default: undefined },
+
+  // Motion
+  motion: functionType<(placement: IPlacement) => TransitionProps>(),
+  maskMotion: objectType<TransitionProps>(),
+})
+
+const drawerProps = () => ({
+  ...props(),
+  forceRender: { type: Boolean, default: undefined },
+  getContainer: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.func,
+    PropTypes.object,
+    PropTypes.looseBool,
+  ]),
+})
+
+const drawerChildProps = () => ({
+  ...props(),
+  getContainer: Function,
+  getOpenCount: Function as PropType<() => number>,
+  scrollLocker: PropTypes.any,
+  inline: Boolean,
+})
+export { drawerChildProps, drawerProps }

package/src/vc-drawer/src/utils.ts

@@ -0,0 +1,112 @@
+export function dataToArray(vars: any) {
+  if (Array.isArray(vars)) {
+    return vars
+  }
+  return [vars]
+}
+const transitionEndObject: Record<string, string> = {
+  transition: 'transitionend',
+  WebkitTransition: 'webkitTransitionEnd',
+  MozTransition: 'transitionend',
+  OTransition: 'oTransitionEnd otransitionend',
+}
+export const transitionStr: string = Object.keys(transitionEndObject).filter((key) => {
+  if (typeof document === 'undefined') {
+    return false
+  }
+  const html = document.getElementsByTagName('html')[0]
+  return key in (html ? html.style : {})
+})[0]
+export const transitionEndFun: string = transitionEndObject[transitionStr]
+
+export function addEventListener(
+  target: HTMLElement,
+  eventType: string,
+  callback: (e: TouchEvent | Event) => void,
+  options?: any,
+) {
+  if (target.addEventListener) {
+    target.addEventListener(eventType, callback, options)
+  } else if ((target as any).attachEvent) {
+    // tslint:disable-line
+    ;(target as any).attachEvent(`on${eventType}`, callback) // tslint:disable-line
+  }
+}
+
+export function removeEventListener(
+  target: HTMLElement,
+  eventType: string,
+  callback: (e: TouchEvent | Event) => void,
+  options?: any,
+) {
+  if (target.removeEventListener) {
+    target.removeEventListener(eventType, callback, options)
+  } else if ((target as any).attachEvent) {
+    // tslint:disable-line
+    ;(target as any).detachEvent(`on${eventType}`, callback) // tslint:disable-line
+  }
+}
+
+export function transformArguments(arg: any, cb: any) {
+  const result = typeof arg === 'function' ? arg(cb) : arg
+  if (Array.isArray(result)) {
+    if (result.length === 2) {
+      return result
+    }
+    return [result[0], result[1]]
+  }
+  return [result]
+}
+
+export const isNumeric = (value: string | number | undefined) =>
+  !isNaN(Number.parseFloat(value as string)) && isFinite(value as number)
+
+export const windowIsUndefined = !(
+  typeof window !== 'undefined' &&
+  window.document &&
+  window.document.createElement
+)
+
+export const getTouchParentScroll = (
+  root: HTMLElement,
+  currentTarget: HTMLElement | Document | null,
+  differX: number,
+  differY: number,
+): boolean => {
+  if (!currentTarget || currentTarget === document || currentTarget instanceof Document) {
+    return false
+  }
+  // root 为 drawer-content 设定了 overflow, 判断为 root 的 parent 时结束滚动；
+  if (currentTarget === root.parentNode) {
+    return true
+  }
+
+  const isY = Math.max(Math.abs(differX), Math.abs(differY)) === Math.abs(differY)
+  const isX = Math.max(Math.abs(differX), Math.abs(differY)) === Math.abs(differX)
+
+  const scrollY = currentTarget.scrollHeight - currentTarget.clientHeight
+  const scrollX = currentTarget.scrollWidth - currentTarget.clientWidth
+
+  const style = document.defaultView.getComputedStyle(currentTarget)
+  const overflowY = style.overflowY === 'auto' || style.overflowY === 'scroll'
+  const overflowX = style.overflowX === 'auto' || style.overflowX === 'scroll'
+
+  const y = scrollY && overflowY
+  const x = scrollX && overflowX
+
+  if (
+    (isY &&
+      (!y ||
+        (y &&
+          ((currentTarget.scrollTop >= scrollY && differY < 0) ||
+            (currentTarget.scrollTop <= 0 && differY > 0))))) ||
+    (isX &&
+      (!x ||
+        (x &&
+          ((currentTarget.scrollLeft >= scrollX && differX < 0) ||
+            (currentTarget.scrollLeft <= 0 && differX > 0)))))
+  ) {
+    return getTouchParentScroll(root, currentTarget.parentNode as HTMLElement, differX, differY)
+  }
+  return false
+}

package/src/vc-dropdown/Dropdown.tsx

@@ -0,0 +1,145 @@
+import type { CSSProperties, PropType } from 'vue'
+import { Fragment, computed, defineComponent, ref, watch } from 'vue'
+
+import classNames from '../_util/classNames'
+import { skipFlattenKey } from '../_util/props-util'
+import { cloneElement } from '../_util/vnode'
+import PropTypes from '../_util/vue-types'
+import Trigger from '../vc-trigger'
+import placements from './placements'
+
+export default defineComponent({
+  compatConfig: { MODE: 3 },
+  props: {
+    minOverlayWidthMatchTrigger: { type: Boolean, default: undefined },
+    arrow: { type: Boolean, default: false },
+    prefixCls: PropTypes.string.def('rc-dropdown'),
+    transitionName: String,
+    overlayClassName: PropTypes.string.def(''),
+    openClassName: String,
+    animation: PropTypes.any,
+    align: PropTypes.object,
+    overlayStyle: { type: Object as PropType<CSSProperties>, default: undefined as CSSProperties },
+    placement: PropTypes.string.def('bottomLeft'),
+    overlay: PropTypes.any,
+    trigger: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]).def(
+      'hover',
+    ),
+    alignPoint: { type: Boolean, default: undefined },
+    showAction: PropTypes.array,
+    hideAction: PropTypes.array,
+    getPopupContainer: Function,
+    visible: { type: Boolean, default: undefined },
+    defaultVisible: { type: Boolean, default: false },
+    mouseEnterDelay: PropTypes.number.def(0.15),
+    mouseLeaveDelay: PropTypes.number.def(0.1),
+  },
+  emits: ['visibleChange', 'overlayClick'],
+  setup(props, { slots, emit, expose }) {
+    const triggerVisible = ref(!!props.visible)
+    watch(
+      () => props.visible,
+      (val) => {
+        if (val !== undefined) {
+          triggerVisible.value = val
+        }
+      },
+    )
+    const triggerRef = ref()
+
+    expose({
+      triggerRef,
+    })
+
+    const onClick = (e: MouseEvent) => {
+      if (props.visible === undefined) {
+        triggerVisible.value = false
+      }
+      emit('overlayClick', e)
+    }
+
+    const onVisibleChange = (visible: boolean) => {
+      if (props.visible === undefined) {
+        triggerVisible.value = visible
+      }
+      emit('visibleChange', visible)
+    }
+
+    const getMenuElement = () => {
+      const overlayElement = slots.overlay?.()
+      const extraOverlayProps = {
+        prefixCls: `${props.prefixCls}-menu`,
+        onClick,
+      }
+      return (
+        <Fragment key={skipFlattenKey}>
+          {props.arrow && <div class={`${props.prefixCls}-arrow`} />}
+          {cloneElement(overlayElement, extraOverlayProps, false)}
+        </Fragment>
+      )
+    }
+
+    const minOverlayWidthMatchTrigger = computed(() => {
+      const { minOverlayWidthMatchTrigger: matchTrigger = !props.alignPoint } = props
+      return matchTrigger
+    })
+
+    const renderChildren = () => {
+      const children = slots.default?.()
+      return triggerVisible.value && children
+        ? cloneElement(
+            children[0],
+            { class: props.openClassName || `${props.prefixCls}-open` },
+            false,
+          )
+        : children
+    }
+
+    const triggerHideAction = computed(() => {
+      if (!props.hideAction && props.trigger.includes('contextmenu')) {
+        return ['click']
+      }
+      return props.hideAction
+    })
+    return () => {
+      const {
+        prefixCls,
+        arrow,
+        showAction,
+        overlayStyle,
+        trigger,
+        placement,
+        align,
+        getPopupContainer,
+        transitionName,
+        animation,
+        overlayClassName,
+        ...otherProps
+      } = props
+      return (
+        <Trigger
+          {...otherProps}
+          prefixCls={prefixCls}
+          ref={triggerRef}
+          popupClassName={classNames(overlayClassName, {
+            [`${prefixCls}-show-arrow`]: arrow,
+          })}
+          popupStyle={overlayStyle}
+          builtinPlacements={placements}
+          action={trigger}
+          showAction={showAction}
+          hideAction={triggerHideAction.value || []}
+          popupPlacement={placement}
+          popupAlign={align}
+          popupTransitionName={transitionName}
+          popupAnimation={animation}
+          popupVisible={triggerVisible.value}
+          stretch={minOverlayWidthMatchTrigger.value ? 'minWidth' : ''}
+          onPopupVisibleChange={onVisibleChange}
+          getPopupContainer={getPopupContainer}
+          v-slots={{ popup: getMenuElement, default: renderChildren }}
+        ></Trigger>
+      )
+    }
+  },
+})

package/src/vc-dropdown/index.ts

@@ -0,0 +1,4 @@
+// base in 3.2.0
+import Dropdown from './Dropdown'
+
+export default Dropdown

package/src/vc-dropdown/placements.ts

@@ -0,0 +1,47 @@
+const autoAdjustOverflow = {
+  adjustX: 1,
+  adjustY: 1,
+}
+
+const targetOffset = [0, 0]
+
+const placements = {
+  topLeft: {
+    points: ['bl', 'tl'],
+    overflow: autoAdjustOverflow,
+    offset: [0, -4],
+    targetOffset,
+  },
+  topCenter: {
+    points: ['bc', 'tc'],
+    overflow: autoAdjustOverflow,
+    offset: [0, -4],
+    targetOffset,
+  },
+  topRight: {
+    points: ['br', 'tr'],
+    overflow: autoAdjustOverflow,
+    offset: [0, -4],
+    targetOffset,
+  },
+  bottomLeft: {
+    points: ['tl', 'bl'],
+    overflow: autoAdjustOverflow,
+    offset: [0, 4],
+    targetOffset,
+  },
+  bottomCenter: {
+    points: ['tc', 'bc'],
+    overflow: autoAdjustOverflow,
+    offset: [0, 4],
+    targetOffset,
+  },
+  bottomRight: {
+    points: ['tr', 'br'],
+    overflow: autoAdjustOverflow,
+    offset: [0, 4],
+    targetOffset,
+  },
+}
+
+export default placements

package/src/vc-image/index.ts

@@ -0,0 +1,5 @@
+// based on rc-image 4.3.2
+import Image from './src/Image'
+
+export * from './src/Image'
+export default Image