@antsoo-lib/components 0.1.2 → 0.1.4

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

@@ -0,0 +1,368 @@
+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

@@ -0,0 +1,8 @@
+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

@@ -0,0 +1,134 @@
+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

@@ -0,0 +1,201 @@
+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
+    }
+  },
+})