@antsoo-lib/components 0.1.11 → 0.1.13

package/src/vc-tour/Tour.tsx

@@ -1,259 +0,0 @@
-import { computed, defineComponent, ref, shallowRef, toRefs, watch, watchEffect } from 'vue'
-import type { CSSProperties, ExtractPropTypes } from 'vue'
-
-import Portal from '../_util/PortalWrapper'
-import classNames from '../_util/classNames'
-import useMergedState from '../_util/hooks/useMergedState'
-import { initDefaultProps } from '../_util/props-util'
-import type { VueNode } from '../_util/type'
-import {
-  arrayType,
-  booleanType,
-  functionType,
-  objectType,
-  someType,
-  stringType,
-} from '../_util/type'
-import Trigger, { triggerProps } from '../vc-trigger'
-import Mask from './Mask'
-import TourStep from './TourStep'
-import useTarget from './hooks/useTarget'
-import type { Gap } from './hooks/useTarget'
-import type { TourStepInfo, TourStepProps } from './interface'
-import { getPlacements } from './placements'
-import type { PlacementType } from './placements'
-
-const CENTER_PLACEHOLDER: CSSProperties = {
-  left: '50%',
-  top: '50%',
-  width: '1px',
-  height: '1px',
-}
-
-export const tourProps = () => {
-  const { builtinPlacements, popupAlign } = triggerProps()
-  return {
-    builtinPlacements,
-    popupAlign,
-    steps: arrayType<TourStepInfo[]>(),
-    open: booleanType(),
-    defaultCurrent: { type: Number },
-    current: { type: Number },
-    onChange: functionType<(current: number) => void>(),
-    onClose: functionType<(current: number) => void>(),
-    onFinish: functionType<() => void>(),
-    mask: someType<boolean | { style?: CSSProperties; color?: string }>([Boolean, Object], true),
-    arrow: someType<boolean | { pointAtCenter: boolean }>([Boolean, Object], true),
-    rootClassName: { type: String },
-    placement: stringType<PlacementType>('bottom'),
-    prefixCls: { type: String, default: 'rc-tour' },
-    renderPanel: functionType<(props: TourStepProps, current: number) => VueNode>(),
-    gap: objectType<Gap>(),
-    animated: someType<boolean | { placeholder: boolean }>([Boolean, Object]),
-    scrollIntoViewOptions: someType<boolean | ScrollIntoViewOptions>([Boolean, Object], true),
-    zIndex: { type: Number, default: 1001 },
-  }
-}
-
-export type TourProps = Partial<ExtractPropTypes<ReturnType<typeof tourProps>>>
-
-const Tour = defineComponent({
-  name: 'Tour',
-  inheritAttrs: false,
-  props: initDefaultProps(tourProps(), {}),
-  setup(props) {
-    const { defaultCurrent, placement, mask, scrollIntoViewOptions, open, gap, arrow } =
-      toRefs(props)
-
-    const triggerRef = ref()
-
-    const [mergedCurrent, setMergedCurrent] = useMergedState(0, {
-      value: computed(() => props.current),
-      defaultValue: defaultCurrent.value,
-    })
-
-    const [mergedOpen, setMergedOpen] = useMergedState(undefined, {
-      value: computed(() => props.open),
-      postState: (origin) =>
-        mergedCurrent.value < 0 || mergedCurrent.value >= props.steps.length
-          ? false
-          : (origin ?? true),
-    })
-
-    const openRef = shallowRef(mergedOpen.value)
-    watchEffect(() => {
-      if (mergedOpen.value && !openRef.value) {
-        setMergedCurrent(0)
-      }
-      openRef.value = mergedOpen.value
-    })
-
-    const curStep = computed(() => (props.steps[mergedCurrent.value] || {}) as TourStepInfo)
-
-    const mergedPlacement = computed(() => curStep.value.placement ?? placement.value)
-    const mergedMask = computed(() => mergedOpen.value && (curStep.value.mask ?? mask.value))
-    const mergedScrollIntoViewOptions = computed(
-      () => curStep.value.scrollIntoViewOptions ?? scrollIntoViewOptions.value,
-    )
-    const [posInfo, targetElement] = useTarget(
-      computed(() => curStep.value.target),
-      open,
-      gap,
-      mergedScrollIntoViewOptions,
-    )
-
-    // ========================= arrow =========================
-    const mergedArrow = computed(() =>
-      targetElement.value
-        ? typeof curStep.value.arrow === 'undefined'
-          ? arrow.value
-          : curStep.value.arrow
-        : false,
-    )
-    const arrowPointAtCenter = computed(() =>
-      typeof mergedArrow.value === 'object' ? mergedArrow.value.pointAtCenter : false,
-    )
-
-    watch(arrowPointAtCenter, () => {
-      triggerRef.value?.forcePopupAlign()
-    })
-    watch(mergedCurrent, () => {
-      triggerRef.value?.forcePopupAlign()
-    })
-
-    // ========================= Change =========================
-    const onInternalChange = (nextCurrent: number) => {
-      setMergedCurrent(nextCurrent)
-      props.onChange?.(nextCurrent)
-    }
-
-    return () => {
-      const {
-        prefixCls,
-        steps,
-        onClose,
-        onFinish,
-        rootClassName,
-        renderPanel,
-        animated,
-        zIndex,
-        ...restProps
-      } = props
-
-      // ========================= Render =========================
-      // Skip if not init yet
-      if (targetElement.value === undefined) {
-        return null
-      }
-
-      const handleClose = () => {
-        setMergedOpen(false)
-        onClose?.(mergedCurrent.value)
-      }
-
-      const mergedShowMask =
-        typeof mergedMask.value === 'boolean' ? mergedMask.value : !!mergedMask.value
-      const mergedMaskStyle = typeof mergedMask.value === 'boolean' ? undefined : mergedMask.value
-
-      // when targetElement is not exist, use body as triggerDOMNode
-      const getTriggerDOMNode = () => {
-        return targetElement.value || document.body
-      }
-
-      const getPopupElement = () => (
-        <TourStep
-          arrow={mergedArrow.value}
-          key="content"
-          prefixCls={prefixCls}
-          total={steps.length}
-          renderPanel={renderPanel}
-          onPrev={() => {
-            onInternalChange(mergedCurrent.value - 1)
-          }}
-          onNext={() => {
-            onInternalChange(mergedCurrent.value + 1)
-          }}
-          onClose={handleClose}
-          current={mergedCurrent.value}
-          onFinish={() => {
-            handleClose()
-            onFinish?.()
-          }}
-          {...curStep.value}
-        />
-      )
-      const posInfoStyle = computed(() => {
-        const info = posInfo.value || CENTER_PLACEHOLDER
-        // 如果info[key] 是number，添加 px
-        const style: CSSProperties = {}
-        Object.keys(info).forEach((key) => {
-          if (typeof info[key] === 'number') {
-            style[key] = `${info[key]}px`
-          } else {
-            style[key] = info[key]
-          }
-        })
-        return style
-      })
-      return mergedOpen.value ? (
-        <>
-          <Mask
-            zIndex={zIndex}
-            prefixCls={prefixCls}
-            pos={posInfo.value}
-            showMask={mergedShowMask}
-            style={mergedMaskStyle?.style}
-            fill={mergedMaskStyle?.color}
-            open={mergedOpen.value}
-            animated={animated}
-            rootClassName={rootClassName}
-          />
-          <Trigger
-            {...restProps}
-            arrow={!!restProps.arrow}
-            builtinPlacements={
-              !curStep.value.target
-                ? undefined
-                : (restProps.builtinPlacements ?? getPlacements(arrowPointAtCenter.value))
-            }
-            ref={triggerRef}
-            popupStyle={
-              !curStep.value.target
-                ? {
-                    ...curStep.value.style,
-                    position: 'fixed',
-                    left: CENTER_PLACEHOLDER.left,
-                    top: CENTER_PLACEHOLDER.top,
-                    transform: 'translate(-50%, -50%)',
-                  }
-                : curStep.value.style
-            }
-            popupPlacement={mergedPlacement.value}
-            popupVisible={mergedOpen.value}
-            popupClassName={classNames(rootClassName, curStep.value.className)}
-            prefixCls={prefixCls}
-            popup={getPopupElement}
-            forceRender={false}
-            destroyPopupOnHide
-            zIndex={zIndex}
-            mask={false}
-            getTriggerDOMNode={getTriggerDOMNode}
-          >
-            <Portal visible={mergedOpen.value} autoLock>
-              <div
-                class={classNames(rootClassName, `${prefixCls}-target-placeholder`)}
-                style={{
-                  ...posInfoStyle.value,
-                  position: 'fixed',
-                  pointerEvents: 'none',
-                }}
-              />
-            </Portal>
-          </Trigger>
-        </>
-      ) : null
-    }
-  },
-})
-
-export default Tour

package/src/vc-tour/TourStep/DefaultPanel.tsx

@@ -1,57 +0,0 @@
-import { defineComponent } from 'vue'
-
-import classNames from '../../_util/classNames'
-import { tourStepProps } from '../interface'
-import type { TourStepProps } from '../interface'
-
-const DefaultPanel = defineComponent({
-  name: 'DefaultPanel',
-  inheritAttrs: false,
-  props: tourStepProps(),
-  setup(props, { attrs }) {
-    return () => {
-      const { prefixCls, current, total, title, description, onClose, onPrev, onNext, onFinish } =
-        props as TourStepProps
-      return (
-        <div {...attrs} class={classNames(`${prefixCls}-content`, attrs.class)}>
-          <div class={`${prefixCls}-inner`}>
-            <button type="button" onClick={onClose} aria-label="Close" class={`${prefixCls}-close`}>
-              <span class={`${prefixCls}-close-x`}>&times;</span>
-            </button>
-            <div class={`${prefixCls}-header`}>
-              <div class={`${prefixCls}-title`}>{title}</div>
-            </div>
-            <div class={`${prefixCls}-description`}>{description}</div>
-            <div class={`${prefixCls}-footer`}>
-              <div class={`${prefixCls}-sliders`}>
-                {total > 1
-                  ? [...Array.from({ length: total }).keys()].map((item, index) => {
-                      return <span key={item} class={index === current ? 'active' : ''} />
-                    })
-                  : null}
-              </div>
-              <div class={`${prefixCls}-buttons`}>
-                {current !== 0 ? (
-                  <button class={`${prefixCls}-prev-btn`} onClick={onPrev}>
-                    Prev
-                  </button>
-                ) : null}
-                {current === total - 1 ? (
-                  <button class={`${prefixCls}-finish-btn`} onClick={onFinish}>
-                    Finish
-                  </button>
-                ) : (
-                  <button class={`${prefixCls}-next-btn`} onClick={onNext}>
-                    Next
-                  </button>
-                )}
-              </div>
-            </div>
-          </div>
-        </div>
-      )
-    }
-  },
-})
-
-export default DefaultPanel

package/src/vc-tour/TourStep/index.tsx

@@ -1,27 +0,0 @@
-import { defineComponent } from 'vue'
-
-import { tourStepProps } from '../interface'
-import DefaultPanel from './DefaultPanel'
-
-const TourStep = defineComponent({
-  name: 'TourStep',
-  inheritAttrs: false,
-  props: tourStepProps(),
-  setup(props, { attrs }) {
-    return () => {
-      const { current, renderPanel } = props
-
-      return (
-        <>
-          {typeof renderPanel === 'function' ? (
-            renderPanel({ ...attrs, ...props }, current)
-          ) : (
-            <DefaultPanel {...attrs} {...props} />
-          )}
-        </>
-      )
-    }
-  },
-})
-
-export default TourStep

package/src/vc-tour/hooks/useTarget.ts

@@ -1,101 +0,0 @@
-import { computed, onBeforeUnmount, onMounted, watch, watchEffect } from 'vue'
-import type { Ref } from 'vue'
-
-import type { TourStepInfo } from '..'
-import useState from '../../_util/hooks/useState'
-import { isInViewPort } from '../util'
-
-export interface Gap {
-  offset?: number
-  radius?: number
-}
-
-export interface PosInfo {
-  left: number
-  top: number
-  height: number
-  width: number
-  radius: number
-}
-
-export default function useTarget(
-  target: Ref<TourStepInfo['target']>,
-  open: Ref<boolean>,
-  gap?: Ref<Gap>,
-  scrollIntoViewOptions?: Ref<boolean | ScrollIntoViewOptions>,
-): [Ref<PosInfo>, Ref<HTMLElement>] {
-  // ========================= Target =========================
-  // We trade `undefined` as not get target by function yet.
-  // `null` as empty target.
-  const [targetElement, setTargetElement] = useState<null | HTMLElement | undefined>(undefined)
-
-  watchEffect(
-    () => {
-      const nextElement =
-        typeof target.value === 'function' ? (target.value as any)() : target.value
-
-      setTargetElement(nextElement || null)
-    },
-    { flush: 'post' },
-  )
-
-  // ========================= Align ==========================
-  const [posInfo, setPosInfo] = useState<PosInfo>(null)
-
-  const updatePos = () => {
-    if (!open.value) {
-      setPosInfo(null)
-      return
-    }
-    if (targetElement.value) {
-      // Exist target element. We should scroll and get target position
-      if (!isInViewPort(targetElement.value) && open.value) {
-        targetElement.value.scrollIntoView(scrollIntoViewOptions.value)
-      }
-
-      const { left, top, width, height } = targetElement.value.getBoundingClientRect()
-      const nextPosInfo: PosInfo = { left, top, width, height, radius: 0 }
-      if (JSON.stringify(posInfo.value) !== JSON.stringify(nextPosInfo)) {
-        setPosInfo(nextPosInfo)
-      }
-    } else {
-      // Not exist target which means we just show in center
-      setPosInfo(null)
-    }
-  }
-
-  onMounted(() => {
-    watch(
-      [open, targetElement],
-      () => {
-        updatePos()
-      },
-      { flush: 'post', immediate: true },
-    )
-    // update when window resize
-    window.addEventListener('resize', updatePos)
-  })
-  onBeforeUnmount(() => {
-    window.removeEventListener('resize', updatePos)
-  })
-
-  // ======================== PosInfo =========================
-  const mergedPosInfo = computed(() => {
-    if (!posInfo.value) {
-      return posInfo.value
-    }
-
-    const gapOffset = gap.value?.offset || 6
-    const gapRadius = gap.value?.radius || 2
-
-    return {
-      left: posInfo.value.left - gapOffset,
-      top: posInfo.value.top - gapOffset,
-      width: posInfo.value.width + gapOffset * 2,
-      height: posInfo.value.height + gapOffset * 2,
-      radius: gapRadius,
-    }
-  })
-
-  return [mergedPosInfo, targetElement]
-}

package/src/vc-tour/index.ts

@@ -1,7 +0,0 @@
-import Tour from './Tour'
-
-export type { TourProps } from './Tour'
-export { tourProps } from './Tour'
-export type { TourStepInfo, TourStepProps } from './interface'
-export { tourStepInfo, tourStepProps } from './interface'
-export default Tour

package/src/vc-tour/interface.ts

@@ -1,37 +0,0 @@
-import type { CSSProperties, ExtractPropTypes } from 'vue'
-
-import type { VueNode } from '../_util/type'
-import { functionType, objectType, someType, stringType } from '../_util/type'
-import type { PlacementType } from './placements'
-
-export const tourStepInfo = () => ({
-  arrow: someType<boolean | { pointAtCenter: boolean }>([Boolean, Object]),
-  target: someType<HTMLElement | (() => HTMLElement) | null | (() => null)>([
-    String,
-    Function,
-    Object,
-  ]),
-  title: someType<string | VueNode>([String, Object]),
-  description: someType<string | VueNode>([String, Object]),
-  placement: stringType<PlacementType>(),
-  mask: someType<boolean | { style?: CSSProperties; color?: string }>([Object, Boolean], true),
-  className: { type: String },
-  style: objectType<CSSProperties>(),
-  scrollIntoViewOptions: someType<boolean | ScrollIntoViewOptions>([Boolean, Object]),
-})
-
-export type TourStepInfo = Partial<ExtractPropTypes<ReturnType<typeof tourStepInfo>>>
-
-export const tourStepProps = () => ({
-  ...tourStepInfo(),
-  prefixCls: { type: String },
-  total: { type: Number },
-  current: { type: Number },
-  onClose: functionType<(e: MouseEvent) => void>(),
-  onFinish: functionType<(e: MouseEvent) => void>(),
-  renderPanel: functionType<(step: any, current: number) => VueNode>(),
-  onPrev: functionType<(e: MouseEvent) => void>(),
-  onNext: functionType<(e: MouseEvent) => void>(),
-})
-
-export type TourStepProps = Partial<ExtractPropTypes<ReturnType<typeof tourStepProps>>>

package/src/vc-tour/placements.tsx

@@ -1,79 +0,0 @@
-import type { BuildInPlacements } from '../vc-trigger/interface'
-
-export type PlacementType =
-  | 'left'
-  | 'leftTop'
-  | 'leftBottom'
-  | 'right'
-  | 'rightTop'
-  | 'rightBottom'
-  | 'top'
-  | 'topLeft'
-  | 'topRight'
-  | 'bottom'
-  | 'bottomLeft'
-  | 'bottomRight'
-  | 'center'
-
-const targetOffset = [0, 0]
-
-const basePlacements: BuildInPlacements = {
-  left: {
-    points: ['cr', 'cl'],
-    offset: [-8, 0],
-  },
-  right: {
-    points: ['cl', 'cr'],
-    offset: [8, 0],
-  },
-  top: {
-    points: ['bc', 'tc'],
-    offset: [0, -8],
-  },
-  bottom: {
-    points: ['tc', 'bc'],
-    offset: [0, 8],
-  },
-  topLeft: {
-    points: ['bl', 'tl'],
-    offset: [0, -8],
-  },
-  leftTop: {
-    points: ['tr', 'tl'],
-    offset: [-8, 0],
-  },
-  topRight: {
-    points: ['br', 'tr'],
-    offset: [0, -8],
-  },
-  rightTop: {
-    points: ['tl', 'tr'],
-    offset: [8, 0],
-  },
-  bottomRight: {
-    points: ['tr', 'br'],
-    offset: [0, 8],
-  },
-  rightBottom: {
-    points: ['bl', 'br'],
-    offset: [8, 0],
-  },
-  bottomLeft: {
-    points: ['tl', 'bl'],
-    offset: [0, 8],
-  },
-  leftBottom: {
-    points: ['br', 'bl'],
-    offset: [-8, 0],
-  },
-}
-
-export function getPlacements(arrowPointAtCenter = false) {
-  const placements: BuildInPlacements = {}
-  Object.keys(basePlacements).forEach((key) => {
-    placements[key] = { ...basePlacements[key], autoArrow: arrowPointAtCenter, targetOffset }
-  })
-  return placements
-}
-
-export const placements = getPlacements()

package/src/vc-tour/util.ts

@@ -1,7 +0,0 @@
-export function isInViewPort(element: HTMLElement) {
-  const viewWidth = window.innerWidth || document.documentElement.clientWidth
-  const viewHeight = window.innerHeight || document.documentElement.clientHeight
-  const { top, right, bottom, left } = element.getBoundingClientRect()
-
-  return top >= 0 && left >= 0 && right <= viewWidth && bottom <= viewHeight
-}

package/src/vc-tree/DropIndicator.tsx

@@ -1,34 +0,0 @@
-import type { CSSProperties } from 'vue'
-
-export default function DropIndicator({
-  dropPosition,
-  dropLevelOffset,
-  indent,
-}: {
-  dropPosition: -1 | 0 | 1
-  dropLevelOffset: number
-  indent: number
-}) {
-  const style: CSSProperties = {
-    pointerEvents: 'none',
-    position: 'absolute',
-    right: 0,
-    backgroundColor: 'red',
-    height: `${2}px`,
-  }
-  switch (dropPosition) {
-    case -1:
-      style.top = 0
-      style.left = `${-dropLevelOffset * indent}px`
-      break
-    case 1:
-      style.bottom = 0
-      style.left = `${-dropLevelOffset * indent}px`
-      break
-    case 0:
-      style.bottom = 0
-      style.left = `${indent}`
-      break
-  }
-  return <div style={style} />
-}

package/src/vc-tree/Indent.tsx

@@ -1,31 +0,0 @@
-interface IndentProps {
-  prefixCls: string
-  level: number
-  isStart: boolean[]
-  isEnd: boolean[]
-}
-
-const Indent = ({ prefixCls, level, isStart, isEnd }: IndentProps) => {
-  const baseClassName = `${prefixCls}-indent-unit`
-  const list = []
-  for (let i = 0; i < level; i += 1) {
-    list.push(
-      <span
-        key={i}
-        class={{
-          [baseClassName]: true,
-          [`${baseClassName}-start`]: isStart[i],
-          [`${baseClassName}-end`]: isEnd[i],
-        }}
-      />,
-    )
-  }
-
-  return (
-    <span aria-hidden="true" class={`${prefixCls}-indent`}>
-      {list}
-    </span>
-  )
-}
-
-export default Indent