@antsoo-lib/components 0.1.11 → 0.1.13

package/src/vc-slider/src/common/createSlider.tsx

@@ -1,368 +0,0 @@
-import { defineComponent } from 'vue'
-
-import BaseMixin from '../../../_util/BaseMixin'
-import classNames from '../../../_util/classNames'
-import { getSlot, initDefaultProps } from '../../../_util/props-util'
-import supportsPassive from '../../../_util/supportsPassive'
-import PropTypes from '../../../_util/vue-types'
-import warning from '../../../_util/warning'
-import addEventListener from '../../../vc-util/Dom/addEventListener'
-import Handle from '../Handle'
-import * as utils from '../utils'
-import Marks from './Marks'
-import Steps from './Steps'
-
-function noop() {}
-
-export default function createSlider(Component) {
-  // const displayName = `ComponentEnhancer(${Component.displayName})`
-  const propTypes = {
-    id: String,
-    min: Number,
-    max: Number,
-    step: Number,
-    marks: PropTypes.object,
-    included: { type: Boolean, default: undefined },
-    prefixCls: String,
-    disabled: { type: Boolean, default: undefined },
-    handle: Function,
-    dots: { type: Boolean, default: undefined },
-    vertical: { type: Boolean, default: undefined },
-    reverse: { type: Boolean, default: undefined },
-    minimumTrackStyle: PropTypes.object, // just for compatibility, will be deperecate
-    maximumTrackStyle: PropTypes.object, // just for compatibility, will be deperecate
-    handleStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.arrayOf(PropTypes.object)]),
-    trackStyle: PropTypes.oneOfType([PropTypes.object, PropTypes.arrayOf(PropTypes.object)]),
-    railStyle: PropTypes.object,
-    dotStyle: PropTypes.object,
-    activeDotStyle: PropTypes.object,
-    autofocus: { type: Boolean, default: undefined },
-    draggableTrack: { type: Boolean, default: undefined },
-  }
-  return defineComponent({
-    compatConfig: { MODE: 3 },
-    name: 'CreateSlider',
-    mixins: [BaseMixin, Component],
-    inheritAttrs: false,
-    props: initDefaultProps(propTypes, {
-      prefixCls: 'rc-slider',
-      min: 0,
-      max: 100,
-      step: 1,
-      marks: {},
-      included: true,
-      disabled: false,
-      dots: false,
-      vertical: false,
-      reverse: false,
-      trackStyle: [{}],
-      handleStyle: [{}],
-      railStyle: {},
-      dotStyle: {},
-      activeDotStyle: {},
-    }),
-    emits: ['change', 'blur', 'focus'],
-    data() {
-      const { step, max, min } = this
-      const isPointDiffEven = isFinite(max - min) ? (max - min) % step === 0 : true // eslint-disable-line
-      warning(
-        step && Math.floor(step) === step ? isPointDiffEven : true,
-        `Slider[max] - Slider[min] (${max - min}) should be a multiple of Slider[step] (${step})`,
-      )
-      ;(this as any).handlesRefs = {}
-      return {}
-    },
-    mounted() {
-      this.$nextTick(() => {
-        // Snapshot testing cannot handle refs, so be sure to null-check this.
-        this.document = this.sliderRef && this.sliderRef.ownerDocument
-        // this.setHandleRefs()
-        const { autofocus, disabled } = this
-        if (autofocus && !disabled) {
-          this.focus()
-        }
-      })
-    },
-    beforeUnmount() {
-      this.$nextTick(() => {
-        // if (super.componentWillUnmount) super.componentWillUnmount()
-        this.removeDocumentEvents()
-      })
-    },
-    methods: {
-      defaultHandle({ index, directives, className, style, ...restProps }) {
-        delete restProps.dragging
-        if (restProps.value === null) {
-          return null
-        }
-        const handleProps = {
-          ...restProps,
-          class: className,
-          style,
-          key: index,
-        }
-        return <Handle {...handleProps} />
-      },
-      onDown(e, position) {
-        let p = position
-        const { draggableTrack, vertical: isVertical } = this.$props
-        const { bounds } = this.$data
-
-        const value = draggableTrack && this.positionGetValue ? this.positionGetValue(p) || [] : []
-
-        const inPoint = utils.isEventFromHandle(e, this.handlesRefs)
-        this.dragTrack =
-          draggableTrack &&
-          bounds.length >= 2 &&
-          !inPoint &&
-          !value
-            .map((n, i) => {
-              const v = !i ? n >= bounds[i] : true
-              return i === value.length - 1 ? n <= bounds[i] : v
-            })
-            .some((c) => !c)
-
-        if (this.dragTrack) {
-          this.dragOffset = p
-          this.startBounds = [...bounds]
-        } else {
-          if (!inPoint) {
-            this.dragOffset = 0
-          } else {
-            const handlePosition = utils.getHandleCenterPosition(isVertical, e.target)
-            this.dragOffset = p - handlePosition
-            p = handlePosition
-          }
-          this.onStart(p)
-        }
-      },
-      onMouseDown(e) {
-        if (e.button !== 0) {
-          return
-        }
-
-        this.removeDocumentEvents()
-        const isVertical = this.$props.vertical
-        const position = utils.getMousePosition(isVertical, e)
-        this.onDown(e, position)
-        this.addDocumentMouseEvents()
-      },
-      onTouchStart(e) {
-        if (utils.isNotTouchEvent(e)) return
-
-        const isVertical = this.vertical
-        const position = utils.getTouchPosition(isVertical, e)
-        this.onDown(e, position)
-        this.addDocumentTouchEvents()
-        utils.pauseEvent(e)
-      },
-      onFocus(e) {
-        const { vertical } = this
-        if (utils.isEventFromHandle(e, this.handlesRefs) && !this.dragTrack) {
-          const handlePosition = utils.getHandleCenterPosition(vertical, e.target)
-          this.dragOffset = 0
-          this.onStart(handlePosition)
-          utils.pauseEvent(e)
-          this.$emit('focus', e)
-        }
-      },
-      onBlur(e) {
-        if (!this.dragTrack) {
-          this.onEnd()
-        }
-        this.$emit('blur', e)
-      },
-      onMouseUp() {
-        if (this.handlesRefs[this.prevMovedHandleIndex]) {
-          this.handlesRefs[this.prevMovedHandleIndex].clickFocus()
-        }
-      },
-      onMouseMove(e) {
-        if (!this.sliderRef) {
-          this.onEnd()
-          return
-        }
-        const position = utils.getMousePosition(this.vertical, e)
-        this.onMove(e, position - this.dragOffset, this.dragTrack, this.startBounds)
-      },
-      onTouchMove(e) {
-        if (utils.isNotTouchEvent(e) || !this.sliderRef) {
-          this.onEnd()
-          return
-        }
-
-        const position = utils.getTouchPosition(this.vertical, e)
-        this.onMove(e, position - this.dragOffset, this.dragTrack, this.startBounds)
-      },
-      onKeyDown(e) {
-        if (this.sliderRef && utils.isEventFromHandle(e, this.handlesRefs)) {
-          this.onKeyboard(e)
-        }
-      },
-      onClickMarkLabel(e, value) {
-        e.stopPropagation()
-        this.onChange({ sValue: value })
-        this.setState({ sValue: value }, () => this.onEnd(true))
-      },
-      getSliderStart() {
-        const slider = this.sliderRef
-        const { vertical, reverse } = this
-        const rect = slider.getBoundingClientRect()
-        if (vertical) {
-          return reverse ? rect.bottom : rect.top
-        }
-        return window.scrollX + (reverse ? rect.right : rect.left)
-      },
-      getSliderLength() {
-        const slider = this.sliderRef
-        if (!slider) {
-          return 0
-        }
-
-        const coords = slider.getBoundingClientRect()
-        return this.vertical ? coords.height : coords.width
-      },
-      addDocumentTouchEvents() {
-        // just work for Chrome iOS Safari and Android Browser
-        this.onTouchMoveListener = addEventListener(this.document, 'touchmove', this.onTouchMove)
-        this.onTouchUpListener = addEventListener(this.document, 'touchend', this.onEnd)
-      },
-      addDocumentMouseEvents() {
-        this.onMouseMoveListener = addEventListener(this.document, 'mousemove', this.onMouseMove)
-        this.onMouseUpListener = addEventListener(this.document, 'mouseup', this.onEnd)
-      },
-      removeDocumentEvents() {
-        this.onTouchMoveListener && this.onTouchMoveListener.remove()
-        this.onTouchUpListener && this.onTouchUpListener.remove()
-
-        this.onMouseMoveListener && this.onMouseMoveListener.remove()
-        this.onMouseUpListener && this.onMouseUpListener.remove()
-      },
-      focus() {
-        if (this.$props.disabled) {
-          return
-        }
-        this.handlesRefs[0]?.focus()
-      },
-
-      blur() {
-        if (this.$props.disabled) {
-          return
-        }
-        Object.keys(this.handlesRefs).forEach((key) => {
-          this.handlesRefs[key]?.blur?.()
-        })
-      },
-      calcValue(offset) {
-        const { vertical, min, max } = this
-        const ratio = Math.abs(Math.max(offset, 0) / this.getSliderLength())
-        const value = vertical ? (1 - ratio) * (max - min) + min : ratio * (max - min) + min
-        return value
-      },
-      calcValueByPos(position) {
-        const sign = this.reverse ? -1 : +1
-        const pixelOffset = sign * (position - this.getSliderStart())
-        const nextValue = this.trimAlignValue(this.calcValue(pixelOffset))
-        return nextValue
-      },
-      calcOffset(value) {
-        const { min, max } = this
-        const ratio = (value - min) / (max - min)
-        return Math.max(0, ratio * 100)
-      },
-      saveSlider(slider) {
-        this.sliderRef = slider
-      },
-      saveHandle(index, handle) {
-        this.handlesRefs[index] = handle
-      },
-    },
-    render() {
-      const {
-        prefixCls,
-        marks,
-        dots,
-        step,
-        included,
-        disabled,
-        vertical,
-        reverse,
-        min,
-        max,
-        maximumTrackStyle,
-        railStyle,
-        dotStyle,
-        activeDotStyle,
-        id,
-      } = this
-      const { class: className, style } = this.$attrs
-      const { tracks, handles } = this.renderSlider()
-
-      const sliderClassName = classNames(prefixCls, className, {
-        [`${prefixCls}-with-marks`]: Object.keys(marks).length,
-        [`${prefixCls}-disabled`]: disabled,
-        [`${prefixCls}-vertical`]: vertical,
-        [`${prefixCls}-horizontal`]: !vertical,
-      })
-      const markProps = {
-        vertical,
-        marks,
-        included,
-        lowerBound: this.getLowerBound(),
-        upperBound: this.getUpperBound(),
-        max,
-        min,
-        reverse,
-        class: `${prefixCls}-mark`,
-        onClickLabel: disabled ? noop : this.onClickMarkLabel,
-      }
-      const touchEvents = {
-        [supportsPassive ? 'onTouchstartPassive' : 'onTouchstart']: disabled
-          ? noop
-          : this.onTouchStart,
-      }
-      return (
-        <div
-          id={id}
-          ref={this.saveSlider}
-          tabindex="-1"
-          class={sliderClassName}
-          {...touchEvents}
-          onMousedown={disabled ? noop : this.onMouseDown}
-          onMouseup={disabled ? noop : this.onMouseUp}
-          onKeydown={disabled ? noop : this.onKeyDown}
-          onFocus={disabled ? noop : this.onFocus}
-          onBlur={disabled ? noop : this.onBlur}
-          style={style}
-        >
-          <div
-            class={`${prefixCls}-rail`}
-            style={{
-              ...maximumTrackStyle,
-              ...railStyle,
-            }}
-          />
-          {tracks}
-          <Steps
-            prefixCls={prefixCls}
-            vertical={vertical}
-            reverse={reverse}
-            marks={marks}
-            dots={dots}
-            step={step}
-            included={included}
-            lowerBound={this.getLowerBound()}
-            upperBound={this.getUpperBound()}
-            max={max}
-            min={min}
-            dotStyle={dotStyle}
-            activeDotStyle={activeDotStyle}
-          />
-          {handles}
-          <Marks {...markProps} v-slots={{ mark: this.$slots.mark }} />
-          {getSlot(this)}
-        </div>
-      )
-    },
-  })
-}

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

@@ -1,8 +0,0 @@
-import Handle from './Handle'
-import Range from './Range'
-import Slider from './Slider'
-
-Slider.Range = Range
-Slider.Handle = Handle
-export default Slider
-export { Handle, Range }

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

@@ -1,134 +0,0 @@
-import keyCode from '../../_util/KeyCode'
-
-export function isEventFromHandle(e: { target: HTMLElement }, handles) {
-  try {
-    return Object.keys(handles).some((key) => e.target === handles[key].ref)
-  } catch (error) {
-    return false
-  }
-}
-
-export function isValueOutOfRange(value: number, { min, max }: { min?: number; max?: number }) {
-  return value < min || value > max
-}
-
-export function isNotTouchEvent(e: TouchEvent) {
-  return e.touches.length > 1 || (e.type.toLowerCase() === 'touchend' && e.touches.length > 0)
-}
-
-export function getClosestPoint(val: number, { marks, step, min, max }) {
-  const points = Object.keys(marks).map(Number.parseFloat)
-  if (step !== null) {
-    const baseNum = 10 ** getPrecision(step)
-    const maxSteps = Math.floor((max * baseNum - min * baseNum) / (step * baseNum))
-    const steps = Math.min((val - min) / step, maxSteps)
-    const closestStep = Math.round(steps) * step + min
-    points.push(closestStep)
-  }
-  const diffs = points.map((point) => Math.abs(val - point))
-  return points[diffs.indexOf(Math.min(...diffs))]
-}
-
-export function getPrecision(step: number) {
-  const stepString = step.toString()
-  let precision = 0
-  if (stepString.includes('.')) {
-    precision = stepString.length - stepString.indexOf('.') - 1
-  }
-  return precision
-}
-
-export function getMousePosition(vertical: boolean, e: MouseEvent) {
-  let zoom = 1
-  if (window.visualViewport) {
-    zoom = +(window.visualViewport.width / document.body.getBoundingClientRect().width).toFixed(2)
-  }
-  return (vertical ? e.clientY : e.pageX) / zoom
-}
-
-export function getTouchPosition(vertical: boolean, e: TouchEvent) {
-  let zoom = 1
-  if (window.visualViewport) {
-    zoom = +(window.visualViewport.width / document.body.getBoundingClientRect().width).toFixed(2)
-  }
-  return (vertical ? e.touches[0].clientY : e.touches[0].pageX) / zoom
-}
-
-export function getHandleCenterPosition(vertical: boolean, handle: HTMLElement) {
-  const coords = handle.getBoundingClientRect()
-  return vertical
-    ? coords.top + coords.height * 0.5
-    : window.scrollX + coords.left + coords.width * 0.5
-}
-
-export function ensureValueInRange(val: number, { max, min }: { max?: number; min?: number }) {
-  if (val <= min) {
-    return min
-  }
-  if (val >= max) {
-    return max
-  }
-  return val
-}
-
-export function ensureValuePrecision(val: number, props: any) {
-  const { step } = props
-  const closestPoint = isFinite(getClosestPoint(val, props)) ? getClosestPoint(val, props) : 0 // eslint-disable-line
-  return step === null ? closestPoint : Number.parseFloat(closestPoint.toFixed(getPrecision(step)))
-}
-
-export function pauseEvent(e: Event) {
-  e.stopPropagation()
-  e.preventDefault()
-}
-
-export function calculateNextValue(func, value, props) {
-  const operations = {
-    increase: (a, b) => a + b,
-    decrease: (a, b) => a - b,
-  }
-
-  const indexToGet = operations[func](Object.keys(props.marks).indexOf(JSON.stringify(value)), 1)
-  const keyToGet = Object.keys(props.marks)[indexToGet]
-
-  if (props.step) {
-    return operations[func](value, props.step)
-  }
-  if (!!Object.keys(props.marks).length && !!props.marks[keyToGet]) {
-    return props.marks[keyToGet]
-  }
-  return value
-}
-
-export function getKeyboardValueMutator(e: KeyboardEvent, vertical: boolean, reverse: boolean) {
-  const increase = 'increase'
-  const decrease = 'decrease'
-  let method = increase
-  switch (e.keyCode) {
-    case keyCode.UP:
-      method = vertical && reverse ? decrease : increase
-      break
-    case keyCode.RIGHT:
-      method = !vertical && reverse ? decrease : increase
-      break
-    case keyCode.DOWN:
-      method = vertical && reverse ? increase : decrease
-      break
-    case keyCode.LEFT:
-      method = !vertical && reverse ? increase : decrease
-      break
-
-    case keyCode.END:
-      return (_value, props) => props.max
-    case keyCode.HOME:
-      return (_value, props) => props.min
-    case keyCode.PAGE_UP:
-      return (value, props) => value + props.step * 2
-    case keyCode.PAGE_DOWN:
-      return (value, props) => value - props.step * 2
-
-    default:
-      return undefined
-  }
-  return (value, props) => calculateNextValue(method, value, props)
-}

package/src/vc-steps/Step.tsx

@@ -1,201 +0,0 @@
-import type { CSSProperties, ExtractPropTypes } from 'vue'
-import { defineComponent } from 'vue'
-
-import type { EventHandler } from '../_util/EventInterface'
-import classNames from '../_util/classNames'
-import omit from '../_util/omit'
-import type { VueNode } from '../_util/type'
-import { booleanType, functionType, stringType } from '../_util/type'
-import PropTypes, { withUndefined } from '../_util/vue-types'
-import type { Status, StepIconRender } from './interface'
-
-function isString(str: any): str is string {
-  return typeof str === 'string'
-}
-function noop() {}
-
-export const VcStepProps = () => ({
-  prefixCls: String,
-  itemWidth: String,
-  active: { type: Boolean, default: undefined },
-  disabled: { type: Boolean, default: undefined },
-  status: stringType<Status>(),
-  iconPrefix: String,
-  icon: PropTypes.any,
-  adjustMarginRight: String,
-  stepNumber: Number,
-  stepIndex: Number,
-  description: PropTypes.any,
-  title: PropTypes.any,
-  subTitle: PropTypes.any,
-  progressDot: withUndefined(PropTypes.oneOfType([PropTypes.looseBool, PropTypes.func])),
-  tailContent: PropTypes.any,
-  icons: PropTypes.shape({
-    finish: PropTypes.any,
-    error: PropTypes.any,
-  }).loose,
-  onClick: functionType(),
-  onStepClick: functionType<(next: number) => void>(),
-  stepIcon: functionType<StepIconRender>(),
-  itemRender: functionType<(stepItem: VueNode) => VueNode>(),
-  __legacy: booleanType(),
-})
-
-export type VCStepProps = Partial<ExtractPropTypes<ReturnType<typeof VcStepProps>>>
-export default defineComponent({
-  compatConfig: { MODE: 3 },
-  name: 'Step',
-  inheritAttrs: false,
-  props: VcStepProps(),
-  setup(props, { slots, emit, attrs }) {
-    const onItemClick: EventHandler = (e) => {
-      emit('click', e)
-      emit('stepClick', props.stepIndex)
-    }
-    // if (props.__legacy !== false) {
-    //   warning(
-    //     false,
-    //     'Steps',
-    //     'Step is deprecated, and not support inline type. Please use `items` directly. ',
-    //   );
-    // }
-    const renderIconNode = ({ icon, title, description }) => {
-      const {
-        prefixCls,
-        stepNumber,
-        status,
-        iconPrefix,
-        icons,
-        progressDot = slots.progressDot,
-        stepIcon = slots.stepIcon,
-      } = props
-
-      let iconNode
-      const iconClassName = classNames(`${prefixCls}-icon`, `${iconPrefix}icon`, {
-        [`${iconPrefix}icon-${icon}`]: icon && isString(icon),
-        [`${iconPrefix}icon-check`]:
-          !icon && status === 'finish' && ((icons && !icons.finish) || !icons),
-        [`${iconPrefix}icon-cross`]:
-          !icon && status === 'error' && ((icons && !icons.error) || !icons),
-      })
-      const iconDot = <span class={`${prefixCls}-icon-dot`} />
-      // `progressDot` enjoy the highest priority
-      if (progressDot) {
-        if (typeof progressDot === 'function') {
-          iconNode = (
-            <span class={`${prefixCls}-icon`}>
-              {progressDot({
-                iconDot,
-                index: stepNumber - 1,
-                status,
-                title,
-                description,
-                prefixCls,
-              })}
-            </span>
-          )
-        } else {
-          iconNode = <span class={`${prefixCls}-icon`}>{iconDot}</span>
-        }
-      } else if (icon && !isString(icon)) {
-        iconNode = <span class={`${prefixCls}-icon`}>{icon}</span>
-      } else if (icons && icons.finish && status === 'finish') {
-        iconNode = <span class={`${prefixCls}-icon`}>{icons.finish}</span>
-      } else if (icons && icons.error && status === 'error') {
-        iconNode = <span class={`${prefixCls}-icon`}>{icons.error}</span>
-      } else if (icon || status === 'finish' || status === 'error') {
-        iconNode = <span class={iconClassName} />
-      } else {
-        iconNode = <span class={`${prefixCls}-icon`}>{stepNumber}</span>
-      }
-
-      if (stepIcon) {
-        iconNode = stepIcon({
-          index: stepNumber - 1,
-          status,
-          title,
-          description,
-          node: iconNode,
-        })
-      }
-
-      return iconNode
-    }
-    return () => {
-      const {
-        prefixCls,
-        itemWidth,
-        active,
-        status = 'wait',
-        tailContent,
-        adjustMarginRight,
-        disabled,
-        title = slots.title?.(),
-        description = slots.description?.(),
-        subTitle = slots.subTitle?.(),
-        icon = slots.icon?.(),
-        onClick,
-        onStepClick,
-      } = props
-      const mergedStatus = status || 'wait'
-      const classString = classNames(`${prefixCls}-item`, `${prefixCls}-item-${mergedStatus}`, {
-        [`${prefixCls}-item-custom`]: icon,
-        [`${prefixCls}-item-active`]: active,
-        [`${prefixCls}-item-disabled`]: disabled === true,
-      })
-      const stepItemStyle: CSSProperties = {}
-      if (itemWidth) {
-        stepItemStyle.width = itemWidth
-      }
-      if (adjustMarginRight) {
-        stepItemStyle.marginRight = adjustMarginRight
-      }
-
-      const accessibilityProps: {
-        role?: string
-        tabindex?: number
-        onClick?: EventHandler
-      } = {
-        onClick: onClick || noop,
-      }
-
-      if (onStepClick && !disabled) {
-        accessibilityProps.role = 'button'
-        accessibilityProps.tabindex = 0
-        accessibilityProps.onClick = onItemClick
-      }
-      const stepNode = (
-        <div
-          {...omit(attrs, ['__legacy'])}
-          class={[classString, attrs.class]}
-          style={[attrs.style as CSSProperties, stepItemStyle]}
-        >
-          <div {...accessibilityProps} class={`${prefixCls}-item-container`}>
-            <div class={`${prefixCls}-item-tail`}>{tailContent}</div>
-            <div class={`${prefixCls}-item-icon`}>
-              {renderIconNode({ icon, title, description })}
-            </div>
-            <div class={`${prefixCls}-item-content`}>
-              <div class={`${prefixCls}-item-title`}>
-                {title}
-                {subTitle && (
-                  <div
-                    title={typeof subTitle === 'string' ? subTitle : undefined}
-                    class={`${prefixCls}-item-subtitle`}
-                  >
-                    {subTitle}
-                  </div>
-                )}
-              </div>
-              {description && <div class={`${prefixCls}-item-description`}>{description}</div>}
-            </div>
-          </div>
-        </div>
-      )
-      if (props.itemRender) {
-        return props.itemRender(stepNode)
-      }
-      return stepNode
-    }
-  },
-})