@antsoo-lib/components 0.1.11 → 0.1.13

package/src/vc-picker/utils/uiUtil.ts

@@ -1,277 +0,0 @@
-import KeyCode from '../../_util/KeyCode'
-import raf from '../../_util/raf'
-import isVisible from '../../vc-util/Dom/isVisible'
-import type { GenerateConfig } from '../generate'
-import type { CustomFormat, PanelMode, PickerMode } from '../interface'
-
-const scrollIds = new Map<HTMLElement, number>()
-
-/** Trigger when element is visible in view */
-export function waitElementReady(element: HTMLElement, callback: () => void): () => void {
-  let id: number
-
-  function tryOrNextFrame() {
-    if (isVisible(element)) {
-      callback()
-    } else {
-      id = raf(() => {
-        tryOrNextFrame()
-      })
-    }
-  }
-
-  tryOrNextFrame()
-
-  return () => {
-    raf.cancel(id)
-  }
-}
-
-export function scrollTo(element: HTMLElement, to: number, duration: number) {
-  if (scrollIds.get(element)) {
-    raf.cancel(scrollIds.get(element)!)
-  }
-
-  // jump to target if duration zero
-  if (duration <= 0) {
-    scrollIds.set(
-      element,
-      raf(() => {
-        element.scrollTop = to
-      }),
-    )
-
-    return
-  }
-  const difference = to - element.scrollTop
-  const perTick = (difference / duration) * 10
-
-  scrollIds.set(
-    element,
-    raf(() => {
-      element.scrollTop += perTick
-      if (element.scrollTop !== to) {
-        scrollTo(element, to, duration - 10)
-      }
-    }),
-  )
-}
-
-export interface KeyboardConfig {
-  onLeftRight?: ((diff: number) => void) | null
-  onCtrlLeftRight?: ((diff: number) => void) | null
-  onUpDown?: ((diff: number) => void) | null
-  onPageUpDown?: ((diff: number) => void) | null
-  onEnter?: (() => void) | null
-}
-export function createKeydownHandler(
-  event: KeyboardEvent,
-  { onLeftRight, onCtrlLeftRight, onUpDown, onPageUpDown, onEnter }: KeyboardConfig,
-): boolean {
-  const { which, ctrlKey, metaKey } = event
-
-  switch (which) {
-    case KeyCode.LEFT:
-      if (ctrlKey || metaKey) {
-        if (onCtrlLeftRight) {
-          onCtrlLeftRight(-1)
-          return true
-        }
-      } else if (onLeftRight) {
-        onLeftRight(-1)
-        return true
-      }
-      /* istanbul ignore next */
-      break
-
-    case KeyCode.RIGHT:
-      if (ctrlKey || metaKey) {
-        if (onCtrlLeftRight) {
-          onCtrlLeftRight(1)
-          return true
-        }
-      } else if (onLeftRight) {
-        onLeftRight(1)
-        return true
-      }
-      /* istanbul ignore next */
-      break
-
-    case KeyCode.UP:
-      if (onUpDown) {
-        onUpDown(-1)
-        return true
-      }
-      /* istanbul ignore next */
-      break
-
-    case KeyCode.DOWN:
-      if (onUpDown) {
-        onUpDown(1)
-        return true
-      }
-      /* istanbul ignore next */
-      break
-
-    case KeyCode.PAGE_UP:
-      if (onPageUpDown) {
-        onPageUpDown(-1)
-        return true
-      }
-      /* istanbul ignore next */
-      break
-
-    case KeyCode.PAGE_DOWN:
-      if (onPageUpDown) {
-        onPageUpDown(1)
-        return true
-      }
-      /* istanbul ignore next */
-      break
-
-    case KeyCode.ENTER:
-      if (onEnter) {
-        onEnter()
-        return true
-      }
-      /* istanbul ignore next */
-      break
-  }
-
-  return false
-}
-
-// ===================== Format =====================
-export function getDefaultFormat<DateType>(
-  format: string | CustomFormat<DateType> | (string | CustomFormat<DateType>)[] | undefined,
-  picker: PickerMode | undefined,
-  showTime: boolean | object | undefined,
-  use12Hours: boolean | undefined,
-) {
-  let mergedFormat = format
-  if (!mergedFormat) {
-    switch (picker) {
-      case 'time':
-        mergedFormat = use12Hours ? 'hh:mm:ss a' : 'HH:mm:ss'
-        break
-
-      case 'week':
-        mergedFormat = 'gggg-wo'
-        break
-
-      case 'month':
-        mergedFormat = 'YYYY-MM'
-        break
-
-      case 'quarter':
-        mergedFormat = 'YYYY-[Q]Q'
-        break
-
-      case 'year':
-        mergedFormat = 'YYYY'
-        break
-
-      default:
-        mergedFormat = showTime ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD'
-    }
-  }
-
-  return mergedFormat
-}
-
-export function getInputSize<DateType>(
-  picker: PickerMode | undefined,
-  format: string | CustomFormat<DateType>,
-  generateConfig: GenerateConfig<DateType>,
-) {
-  const defaultSize = picker === 'time' ? 8 : 10
-  const length =
-    typeof format === 'function' ? format(generateConfig.getNow()).length : format.length
-  return Math.max(defaultSize, length) + 2
-}
-
-// ===================== Window =====================
-type ClickEventHandler = (event: MouseEvent) => void
-let globalClickFunc: ClickEventHandler | null = null
-const clickCallbacks = new Set<ClickEventHandler>()
-
-export function addGlobalMousedownEvent(callback: ClickEventHandler) {
-  if (!globalClickFunc && typeof window !== 'undefined' && window.addEventListener) {
-    globalClickFunc = (e: MouseEvent) => {
-      // Clone a new list to avoid repeat trigger events
-      ;[...clickCallbacks].forEach((queueFunc) => {
-        queueFunc(e)
-      })
-    }
-    window.addEventListener('mousedown', globalClickFunc)
-  }
-
-  clickCallbacks.add(callback)
-
-  return () => {
-    clickCallbacks.delete(callback)
-    if (clickCallbacks.size === 0) {
-      window.removeEventListener('mousedown', globalClickFunc!)
-      globalClickFunc = null
-    }
-  }
-}
-
-export function getTargetFromEvent(e: Event) {
-  const target = e.target as HTMLElement
-
-  // get target if in shadow dom
-  if (e.composed && target.shadowRoot) {
-    return (e.composedPath?.()[0] || target) as HTMLElement
-  }
-
-  return target
-}
-
-// ====================== Mode ======================
-const getYearNextMode = (next: PanelMode): PanelMode => {
-  if (next === 'month' || next === 'date') {
-    return 'year'
-  }
-  return next
-}
-
-const getMonthNextMode = (next: PanelMode): PanelMode => {
-  if (next === 'date') {
-    return 'month'
-  }
-  return next
-}
-
-const getQuarterNextMode = (next: PanelMode): PanelMode => {
-  if (next === 'month' || next === 'date') {
-    return 'quarter'
-  }
-  return next
-}
-
-const getWeekNextMode = (next: PanelMode): PanelMode => {
-  if (next === 'date') {
-    return 'week'
-  }
-  return next
-}
-
-export const PickerModeMap: Record<PickerMode, ((next: PanelMode) => PanelMode) | null> = {
-  year: getYearNextMode,
-  month: getMonthNextMode,
-  quarter: getQuarterNextMode,
-  week: getWeekNextMode,
-  time: null,
-  date: null,
-}
-
-export function elementsContains(
-  elements: (HTMLElement | undefined | null)[],
-  target: HTMLElement,
-) {
-  if (process.env.NODE_ENV === 'test') {
-    return false
-  }
-  return elements.some((ele) => ele && ele.contains(target))
-}

package/src/vc-picker/utils/warnUtil.ts

@@ -1,17 +0,0 @@
-import { warning } from '../../vc-util/warning'
-import type { DisabledTimes, PickerMode } from '../interface'
-
-export interface WarningProps extends DisabledTimes {
-  picker?: PickerMode
-}
-
-export function legacyPropsWarning(props: WarningProps) {
-  const { picker, disabledHours, disabledMinutes, disabledSeconds } = props
-
-  if (picker === 'time' && (disabledHours || disabledMinutes || disabledSeconds)) {
-    warning(
-      false,
-      `'disabledHours', 'disabledMinutes', 'disabledSeconds' will be removed in the next major version, please use 'disabledTime' instead.`,
-    )
-  }
-}

package/src/vc-progress/index.ts

@@ -1,9 +0,0 @@
-// based on rc-progress 3.1.4
-import Progress, { Circle, Line } from './src'
-import type { ProgressProps } from './src'
-
-export { Circle, Line }
-
-export type { ProgressProps }
-
-export default Progress

package/src/vc-progress/src/Circle.tsx

@@ -1,178 +0,0 @@
-import { computed, defineComponent, ref } from 'vue'
-
-import useRefs from '../../_util/hooks/useRefs'
-import initDefaultProps from '../../_util/props-util/initDefaultProps'
-import { defaultProps, useTransitionDuration } from './common'
-import type { GapPositionType } from './types'
-import { propTypes } from './types'
-
-let gradientSeed = 0
-
-function stripPercentToNumber(percent: string) {
-  return +percent.replace('%', '')
-}
-
-function toArray(value: any) {
-  return Array.isArray(value) ? value : [value]
-}
-
-function getPathStyles(
-  offset: number,
-  percent: number,
-  strokeColor: string,
-  strokeWidth: number,
-  gapDegree = 0,
-  gapPosition: GapPositionType,
-) {
-  const radius = 50 - strokeWidth / 2
-  let beginPositionX = 0
-  let beginPositionY = -radius
-  let endPositionX = 0
-  let endPositionY = -2 * radius
-  switch (gapPosition) {
-    case 'left':
-      beginPositionX = -radius
-      beginPositionY = 0
-      endPositionX = 2 * radius
-      endPositionY = 0
-      break
-    case 'right':
-      beginPositionX = radius
-      beginPositionY = 0
-      endPositionX = -2 * radius
-      endPositionY = 0
-      break
-    case 'bottom':
-      beginPositionY = radius
-      endPositionY = 2 * radius
-      break
-    default:
-  }
-  const pathString = `M 50,50 m ${beginPositionX},${beginPositionY}
-   a ${radius},${radius} 0 1 1 ${endPositionX},${-endPositionY}
-   a ${radius},${radius} 0 1 1 ${-endPositionX},${endPositionY}`
-  const len = Math.PI * 2 * radius
-
-  const pathStyle = {
-    stroke: strokeColor,
-    strokeDasharray: `${(percent / 100) * (len - gapDegree)}px ${len}px`,
-    strokeDashoffset: `-${gapDegree / 2 + (offset / 100) * (len - gapDegree)}px`,
-    transition:
-      'stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s',
-  }
-
-  return {
-    pathString,
-    pathStyle,
-  }
-}
-
-export default defineComponent({
-  compatConfig: { MODE: 3 },
-  name: 'VCCircle',
-  props: initDefaultProps(propTypes, defaultProps),
-  setup(props) {
-    gradientSeed += 1
-    const gradientId = ref(gradientSeed)
-    const percentList = computed(() => toArray(props.percent))
-    const strokeColorList = computed(() => toArray(props.strokeColor))
-
-    const [setRef, paths] = useRefs()
-    useTransitionDuration(paths)
-
-    const getStokeList = () => {
-      const { prefixCls, strokeWidth, strokeLinecap, gapDegree, gapPosition } = props
-
-      let stackPtg = 0
-      return percentList.value.map((ptg, index) => {
-        const color =
-          strokeColorList.value[index] || strokeColorList.value[strokeColorList.value.length - 1]
-        const stroke =
-          Object.prototype.toString.call(color) === '[object Object]'
-            ? `url(#${prefixCls}-gradient-${gradientId.value})`
-            : ''
-        const { pathString, pathStyle } = getPathStyles(
-          stackPtg,
-          ptg,
-          color,
-          strokeWidth,
-          gapDegree,
-          gapPosition,
-        )
-
-        stackPtg += ptg
-
-        const pathProps = {
-          key: index,
-          d: pathString,
-          stroke,
-          'stroke-linecap': strokeLinecap,
-          'stroke-width': strokeWidth,
-          opacity: ptg === 0 ? 0 : 1,
-          'fill-opacity': '0',
-          class: `${prefixCls}-circle-path`,
-          style: pathStyle,
-        }
-        return <path ref={setRef(index)} {...pathProps} />
-      })
-    }
-
-    return () => {
-      const {
-        prefixCls,
-        strokeWidth,
-        trailWidth,
-        gapDegree,
-        gapPosition,
-        trailColor,
-        strokeLinecap,
-        strokeColor,
-        ...restProps
-      } = props
-      const { pathString, pathStyle } = getPathStyles(
-        0,
-        100,
-        trailColor,
-        strokeWidth,
-        gapDegree,
-        gapPosition,
-      )
-      delete restProps.percent
-      const gradient = strokeColorList.value.find(
-        (color) => Object.prototype.toString.call(color) === '[object Object]',
-      )
-      const pathFirst = {
-        d: pathString,
-        stroke: trailColor,
-        'stroke-linecap': strokeLinecap,
-        'stroke-width': trailWidth || strokeWidth,
-        'fill-opacity': '0',
-        class: `${prefixCls}-circle-trail`,
-        style: pathStyle,
-      }
-      return (
-        <svg class={`${prefixCls}-circle`} viewBox="0 0 100 100" {...restProps}>
-          {gradient && (
-            <defs>
-              <linearGradient
-                id={`${prefixCls}-gradient-${gradientId.value}`}
-                x1="100%"
-                y1="0%"
-                x2="0%"
-                y2="0%"
-              >
-                {Object.keys(gradient)
-                  .sort((a, b) => stripPercentToNumber(a) - stripPercentToNumber(b))
-                  .map((key, index) => (
-                    <stop key={index} offset={key} stop-color={gradient[key]} />
-                  ))}
-              </linearGradient>
-            </defs>
-          )}
-          <path {...pathFirst} />
-          {getStokeList().reverse()}
-        </svg>
-      )
-    }
-  },
-})

package/src/vc-progress/src/Line.tsx

@@ -1,114 +0,0 @@
-import { computed, defineComponent } from 'vue'
-
-import useRefs from '../../_util/hooks/useRefs'
-import initDefaultProps from '../../_util/props-util/initDefaultProps'
-import { defaultProps, useTransitionDuration } from './common'
-import { propTypes } from './types'
-
-export default defineComponent({
-  compatConfig: { MODE: 3 },
-  name: 'ProgressLine',
-  props: initDefaultProps(propTypes, defaultProps),
-  setup(props) {
-    const percentList = computed(() => {
-      const { percent } = props
-      return Array.isArray(percent) ? percent : [percent]
-    })
-    const percentListProps = computed(() => {
-      const { prefixCls, strokeLinecap, strokeWidth, transition } = props
-      let stackPtg = 0
-      return percentList.value.map((ptg, index) => {
-        let dashPercent = 1
-        switch (strokeLinecap) {
-          case 'round':
-            dashPercent = 1 - strokeWidth / 100
-            break
-          case 'square':
-            dashPercent = 1 - strokeWidth / 2 / 100
-            break
-          default:
-            dashPercent = 1
-            break
-        }
-        const pathStyle = {
-          strokeDasharray: `${ptg * dashPercent}px, 100px`,
-          strokeDashoffset: `-${stackPtg}px`,
-          transition:
-            transition ||
-            'stroke-dashoffset 0.3s ease 0s, stroke-dasharray .3s ease 0s, stroke 0.3s linear',
-        }
-        const color =
-          strokeColorList.value[index] || strokeColorList.value[strokeColorList.value.length - 1]
-
-        stackPtg += ptg
-
-        const pathProps = {
-          key: index,
-          d: pathString.value,
-          'stroke-linecap': strokeLinecap,
-          stroke: color as string,
-          'stroke-width': strokeWidth,
-          'fill-opacity': '0',
-          class: `${prefixCls}-line-path`,
-          style: pathStyle,
-        }
-
-        return pathProps
-      })
-    })
-    const strokeColorList = computed(() => {
-      const { strokeColor } = props
-      return Array.isArray(strokeColor) ? strokeColor : [strokeColor]
-    })
-    const [setRef, paths] = useRefs()
-    useTransitionDuration(paths)
-    const center = computed(() => props.strokeWidth / 2)
-    const right = computed(() => 100 - props.strokeWidth / 2)
-
-    const pathString = computed(
-      () => `M ${props.strokeLinecap === 'round' ? center.value : 0},${center.value}
-    L ${props.strokeLinecap === 'round' ? right.value : 100},${center.value}`,
-    )
-
-    const viewBoxString = computed(() => `0 0 100 ${props.strokeWidth}`)
-
-    const pathFirst = computed(() => ({
-      d: pathString.value,
-      'stroke-linecap': props.strokeLinecap,
-      stroke: props.trailColor,
-      'stroke-width': props.trailWidth || props.strokeWidth,
-      'fill-opacity': '0',
-      class: `${props.prefixCls}-line-trail`,
-    }))
-
-    return () => {
-      const {
-        percent,
-        prefixCls,
-        strokeColor,
-        strokeLinecap,
-        strokeWidth,
-        trailColor,
-        trailWidth,
-        transition,
-        ...restProps
-      } = props
-
-      delete restProps.gapPosition
-
-      return (
-        <svg
-          class={`${prefixCls}-line`}
-          viewBox={viewBoxString.value}
-          preserveAspectRatio="none"
-          {...restProps}
-        >
-          <path {...pathFirst.value} />
-          {percentListProps.value.map((pathProps, index) => {
-            return <path ref={setRef(index)} {...pathProps} />
-          })}
-        </svg>
-      )
-    }
-  },
-})

package/src/vc-progress/src/common.ts

@@ -1,44 +0,0 @@
-import type { Ref } from 'vue'
-import { onUpdated, ref } from 'vue'
-
-import type { RefsValue } from '../../_util/hooks/useRefs'
-import type { ProgressProps } from './types'
-
-export const defaultProps: Partial<ProgressProps> = {
-  percent: 0,
-  prefixCls: 'vc-progress',
-  strokeColor: '#2db7f5',
-  strokeLinecap: 'round',
-  strokeWidth: 1,
-  trailColor: '#D9D9D9',
-  trailWidth: 1,
-}
-
-export const useTransitionDuration = (paths: Ref<RefsValue>) => {
-  const prevTimeStamp = ref(null)
-
-  onUpdated(() => {
-    const now = Date.now()
-    let updated = false
-
-    paths.value.forEach((val) => {
-      const path = (val as any)?.$el || val
-      if (!path) {
-        return
-      }
-      updated = true
-      const pathStyle = path.style
-      pathStyle.transitionDuration = '.3s, .3s, .3s, .06s'
-
-      if (prevTimeStamp.value && now - prevTimeStamp.value < 100) {
-        pathStyle.transitionDuration = '0s, 0s'
-      }
-    })
-
-    if (updated) {
-      prevTimeStamp.value = Date.now()
-    }
-  })
-
-  return paths
-}

package/src/vc-progress/src/index.ts

@@ -1,12 +0,0 @@
-import Circle from './Circle'
-import Line from './Line'
-import type { ProgressProps } from './types'
-
-export { Circle, Line }
-
-export type { ProgressProps }
-
-export default {
-  Line,
-  Circle,
-}

package/src/vc-progress/src/types.ts

@@ -1,30 +0,0 @@
-import type { ExtractPropTypes, PropType } from 'vue'
-
-export type StrokeColorType = string | string[] | object
-
-export type GapPositionType = 'top' | 'right' | 'bottom' | 'left'
-
-export type StrokeLinecapType = 'round' | 'butt' | 'square'
-
-export const propTypes = {
-  gapDegree: Number,
-  gapPosition: {
-    type: String as PropType<GapPositionType>,
-  },
-  percent: {
-    type: [Array, Number] as PropType<number | number[]>,
-  },
-  prefixCls: String,
-  strokeColor: {
-    type: [Object, String, Array] as PropType<StrokeColorType>,
-  },
-  strokeLinecap: {
-    type: String as PropType<StrokeLinecapType>,
-  },
-  strokeWidth: Number,
-  trailColor: String,
-  trailWidth: Number,
-  transition: String,
-}
-
-export type ProgressProps = Partial<ExtractPropTypes<typeof propTypes>>