@antsoo-lib/components 0.1.11 → 0.1.12

package/src/slider/index.tsx

@@ -1,256 +0,0 @@
-import type { CSSProperties, ExtractPropTypes, VNodeTypes } from 'vue'
-import { computed, defineComponent, ref } from 'vue'
-
-import type { FocusEventHandler } from '../_util/EventInterface'
-import classNames from '../_util/classNames'
-import type { CustomSlotsType, VueNode } from '../_util/type'
-import {
-  booleanType,
-  functionType,
-  objectType,
-  someType,
-  stringType,
-  withInstall,
-} from '../_util/type'
-import useConfigInject from '../config-provider/hooks/useConfigInject'
-import { useInjectFormItemContext } from '../form/FormItemContext'
-import type { TooltipPlacement } from '../tooltip/Tooltip'
-import VcHandle from '../vc-slider/src/Handle'
-import VcRange from '../vc-slider/src/Range'
-import VcSlider from '../vc-slider/src/Slider'
-import devWarning from '../vc-util/devWarning'
-import SliderTooltip from './SliderTooltip'
-// CSSINJS
-import useStyle from './style'
-
-export type SliderValue = number | [number, number]
-
-export interface SliderMarks {
-  [key: number]:
-    | VueNode
-    | {
-        style: CSSProperties
-        label: any
-      }
-}
-
-interface HandleGeneratorInfo {
-  value?: number
-  dragging?: boolean
-  index: number
-}
-export interface SliderRange {
-  draggableTrack?: boolean
-}
-export type HandleGeneratorFn = (config: {
-  tooltipPrefixCls?: string
-  prefixCls?: string
-  info: HandleGeneratorInfo
-}) => VNodeTypes
-type Value = [number, number] | number
-
-const defaultTipFormatter = (value: number) => (typeof value === 'number' ? value.toString() : '')
-export const sliderProps = () => ({
-  id: String,
-  prefixCls: String,
-  tooltipPrefixCls: String,
-  range: someType<boolean | SliderRange>([Boolean, Object]),
-  reverse: booleanType(),
-  min: Number,
-  max: Number,
-  step: someType<null | number>([Object, Number]),
-  marks: objectType<SliderMarks>(),
-  dots: booleanType(),
-  value: someType<Value>([Array, Number]),
-  defaultValue: someType<Value>([Array, Number]),
-  included: booleanType(),
-  disabled: booleanType(),
-  vertical: booleanType(),
-  tipFormatter: someType<((value?: number) => any) | null>(
-    [Function, Object],
-    () => defaultTipFormatter,
-  ),
-  tooltipOpen: booleanType(),
-  /** @deprecated `tooltipVisible` is deprecated. Please use `tooltipOpen` instead. */
-  tooltipVisible: booleanType(),
-  tooltipPlacement: stringType<TooltipPlacement>(),
-  getTooltipPopupContainer: functionType<(triggerNode: HTMLElement) => HTMLElement>(),
-  autofocus: booleanType(),
-  handleStyle: someType<CSSProperties[] | CSSProperties>([Array, Object]),
-  trackStyle: someType<CSSProperties[] | CSSProperties>([Array, Object]),
-  onChange: functionType<(value: Value) => void>(),
-  onAfterChange: functionType<(value: Value) => void>(),
-  onFocus: functionType<FocusEventHandler>(),
-  onBlur: functionType<FocusEventHandler>(),
-  'onUpdate:value': functionType<(value: Value) => void>(),
-})
-
-export type SliderProps = Partial<ExtractPropTypes<ReturnType<typeof sliderProps>>>
-export interface Visibles {
-  [index: number]: boolean
-}
-
-const Slider = defineComponent({
-  compatConfig: { MODE: 3 },
-  name: 'ASlider',
-  inheritAttrs: false,
-  props: sliderProps(),
-  // emits: ['update:value', 'change', 'afterChange', 'blur'],
-  slots: Object as CustomSlotsType<{
-    mark?: any
-    default?: any
-  }>,
-  setup(props, { attrs, slots, emit, expose }) {
-    // Warning for deprecated usage
-    if (process.env.NODE_ENV !== 'production') {
-      ;[['tooltipVisible', 'tooltipOpen']].forEach(([deprecatedName, newName]) => {
-        devWarning(
-          props.tooltipVisible === undefined,
-          'Slider',
-          `\`${deprecatedName}\` is deprecated, please use \`${newName}\` instead.`,
-        )
-      })
-    }
-    const { prefixCls, rootPrefixCls, direction, getPopupContainer, configProvider } =
-      useConfigInject('slider', props)
-
-    // style
-    const [wrapSSR, hashId] = useStyle(prefixCls)
-
-    const formItemContext = useInjectFormItemContext()
-    const sliderRef = ref()
-    const visibles = ref<Visibles>({})
-    const toggleTooltipOpen = (index: number, visible: boolean) => {
-      visibles.value[index] = visible
-    }
-    const tooltipPlacement = computed(() => {
-      if (props.tooltipPlacement) {
-        return props.tooltipPlacement
-      }
-      if (!props.vertical) {
-        return 'top'
-      }
-      return direction.value === 'rtl' ? 'left' : 'right'
-    })
-
-    const focus = () => {
-      sliderRef.value?.focus()
-    }
-    const blur = () => {
-      sliderRef.value?.blur()
-    }
-    const handleChange = (val: SliderValue) => {
-      emit('update:value', val)
-      emit('change', val)
-      formItemContext.onFieldChange()
-    }
-    const handleBlur = (e: FocusEvent) => {
-      emit('blur', e)
-    }
-    expose({
-      focus,
-      blur,
-    })
-    const handleWithTooltip: HandleGeneratorFn = ({
-      tooltipPrefixCls,
-      info: { value, dragging, index, ...restProps },
-    }) => {
-      const { tipFormatter, tooltipOpen = props.tooltipVisible, getTooltipPopupContainer } = props
-      const isTipFormatter = tipFormatter ? visibles.value[index] || dragging : false
-      const open = tooltipOpen || (tooltipOpen === undefined && isTipFormatter)
-      return (
-        <SliderTooltip
-          prefixCls={tooltipPrefixCls}
-          title={tipFormatter ? tipFormatter(value) : ''}
-          open={open}
-          placement={tooltipPlacement.value}
-          transitionName={`${rootPrefixCls.value}-zoom-down`}
-          key={index}
-          overlayClassName={`${prefixCls.value}-tooltip`}
-          getPopupContainer={getTooltipPopupContainer || getPopupContainer?.value}
-        >
-          <VcHandle
-            {...restProps}
-            value={value}
-            onMouseenter={() => toggleTooltipOpen(index, true)}
-            onMouseleave={() => toggleTooltipOpen(index, false)}
-          />
-        </SliderTooltip>
-      )
-    }
-    return () => {
-      const {
-        tooltipPrefixCls: customizeTooltipPrefixCls,
-        range,
-        id = formItemContext.id.value,
-        ...restProps
-      } = props
-      const tooltipPrefixCls = configProvider.getPrefixCls('tooltip', customizeTooltipPrefixCls)
-      const cls = classNames(
-        attrs.class,
-        {
-          [`${prefixCls.value}-rtl`]: direction.value === 'rtl',
-        },
-        hashId.value,
-      )
-
-      // make reverse default on rtl direction
-      if (direction.value === 'rtl' && !restProps.vertical) {
-        restProps.reverse = !restProps.reverse
-      }
-
-      // extrack draggableTrack from range={{ ... }}
-      let draggableTrack: boolean | undefined
-      if (typeof range === 'object') {
-        draggableTrack = range.draggableTrack
-      }
-
-      if (range) {
-        return wrapSSR(
-          <VcRange
-            {...attrs}
-            {...restProps}
-            step={restProps.step!}
-            draggableTrack={draggableTrack}
-            class={cls}
-            ref={sliderRef}
-            handle={(info: HandleGeneratorInfo) =>
-              handleWithTooltip({
-                tooltipPrefixCls,
-                prefixCls: prefixCls.value,
-                info,
-              })
-            }
-            prefixCls={prefixCls.value}
-            onChange={handleChange}
-            onBlur={handleBlur}
-            v-slots={{ mark: slots.mark }}
-          />,
-        )
-      }
-      return wrapSSR(
-        <VcSlider
-          {...attrs}
-          {...restProps}
-          id={id}
-          step={restProps.step!}
-          class={cls}
-          ref={sliderRef}
-          handle={(info: HandleGeneratorInfo) =>
-            handleWithTooltip({
-              tooltipPrefixCls,
-              prefixCls: prefixCls.value,
-              info,
-            })
-          }
-          prefixCls={prefixCls.value}
-          onChange={handleChange}
-          onBlur={handleBlur}
-          v-slots={{ mark: slots.mark }}
-        />,
-      )
-    }
-  },
-})
-
-export default withInstall(Slider)

package/src/slider/index.zh-CN.md

@@ -1,50 +0,0 @@
----
-category: Components
-subtitle: 滑动输入条
-type: 数据录入
-title: Slider
-cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*_4heQaUrFn4AAAAAAAAAAAAADrJ8AQ/original
-coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*XkgXTaudeosAAAAAAAAAAAAADrJ8AQ/original
----
-
-滑动型输入器，展示当前值和可选范围。
-
-## 何时使用
-
-当用户需要在数值区间/自定义区间内进行选择时，可为连续或离散值。
-
-## API
-
-| 参数                     | 说明                                                                                                                                               | 类型              | 默认值                                                                                                      | 版本  |
-| ------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------- | ----------------------------------------------------------------------------------------------------------- | ----- |
-| autofocus                | 自动获取焦点                                                                                                                                       | boolean           | false                                                                                                       |       |
-| disabled                 | 值为 `true` 时，滑块为禁用状态                                                                                                                     | boolean           | false                                                                                                       |       |
-| dots                     | 是否只能拖拽到刻度上                                                                                                                               | boolean           | false                                                                                                       |       |
-| included                 | `marks` 不为空对象时有效，值为 true 时表示值为包含关系，false 表示并列                                                                             | boolean           | true                                                                                                        |       |
-| mark                     | 自定义刻度标记                                                                                                                                     | v-slot:mark       | { point: number, label: any }                                                                               | 3.0   |
-| marks                    | 刻度标记，key 的类型必须为 `number` 且取值在闭区间 \[min, max] 内，每个标签可以单独设置样式                                                        | object            | { number: string\|VNode } or { number: { style: object, label: string\|VNode } } or { number: () => VNode } |       |
-| max                      | 最大值                                                                                                                                             | number            | 100                                                                                                         |       |
-| min                      | 最小值                                                                                                                                             | number            | 0                                                                                                           |       |
-| range                    | 双滑块模式                                                                                                                                         | boolean           | false                                                                                                       |       |
-| reverse                  | 反向坐标轴                                                                                                                                         | boolean           | false                                                                                                       | 1.5.0 |
-| step                     | 步长，取值必须大于 0，并且可被 (max - min) 整除。当 `marks` 不为空对象时，可以设置 `step` 为 `null`，此时 Slider 的可选值仅有 marks 标出来的部分。 | number\|null      | 1                                                                                                           |       |
-| value(v-model)           | 设置当前取值。当 `range` 为 `false` 时，使用 `number`，否则用 `[number, number]`                                                                   | number\|number\[] |                                                                                                             |       |
-| vertical                 | 值为 `true` 时，Slider 为垂直方向                                                                                                                  | Boolean           | false                                                                                                       |       |
-| tipFormatter             | Slider 会把当前值传给 `tipFormatter`，并在 Tooltip 中显示 `tipFormatter` 的返回值，若为 null，则隐藏 Tooltip。                                     | Function\|null    | IDENTITY                                                                                                    |       |
-| tooltipPlacement         | 设置 Tooltip 展示位置。参考 [`Tooltip`](/components/tooltip/)。                                                                                    | string            |                                                                                                             | 1.5.0 |
-| tooltipOpen              | 值为`true`时，Tooltip 将会始终显示；否则始终不显示，哪怕在拖拽及移入时。                                                                           | Boolean           |                                                                                                             | 4.0   |
-| getTooltipPopupContainer | Tooltip 渲染父节点，默认渲染到 body 上。                                                                                                           | Function          | () => document.body                                                                                         | 1.5.0 |
-
-### 事件
-
-| 事件名称    | 说明                                                                       | 回调参数        |      |
-| ----------- | -------------------------------------------------------------------------- | --------------- | ---- |
-| change      | 当 Slider 的值发生改变时，会触发 change 事件，并把改变后的值作为参数传入。 | Function(value) | NOOP |
-| afterChange | 与 `mouseup` 触发时机一致，把当前值作为参数传入。                          | Function(value) | NOOP |
-
-## 方法
-
-| 名称    | 描述     |
-| ------- | -------- |
-| blur()  | 移除焦点 |
-| focus() | 获取焦点 |

package/src/slider/style/index.tsx

@@ -1,346 +0,0 @@
-import { TinyColor } from '@ctrl/tinycolor'
-
-import type { CSSProperties } from 'vue'
-
-import type { CSSObject } from '../../_util/cssinjs'
-import { resetComponent } from '../../style'
-import type { FullToken, GenerateStyle } from '../../theme/internal'
-import { genComponentStyleHook, mergeToken } from '../../theme/internal'
-
-// Direction naming standard:
-// Horizontal base:
-// -0-------------
-// vertical: part   (水平时，垂直方向命名为 part)
-// horizontal: full (水平时，水平方向命名为 full)
-
-export interface ComponentToken {
-  controlSize: number
-  railSize: number
-  handleSize: number
-  handleSizeHover: number
-  handleLineWidth: number
-  handleLineWidthHover: number
-  dotSize: number
-}
-
-interface SliderToken extends FullToken<'Slider'> {
-  marginFull: number
-  marginPart: number
-  marginPartWithMark: number
-}
-
-// =============================== Base ===============================
-const genBaseStyle: GenerateStyle<SliderToken> = (token) => {
-  const { componentCls, controlSize, dotSize, marginFull, marginPart, colorFillContentHover } =
-    token
-
-  return {
-    [componentCls]: {
-      ...resetComponent(token),
-
-      position: 'relative',
-      height: controlSize,
-      margin: `${marginPart}px ${marginFull}px`,
-      padding: 0,
-      cursor: 'pointer',
-      touchAction: 'none',
-
-      [`&-vertical`]: {
-        margin: `${marginFull}px ${marginPart}px`,
-      },
-
-      [`${componentCls}-rail`]: {
-        position: 'absolute',
-        backgroundColor: token.colorFillTertiary,
-        borderRadius: token.borderRadiusXS,
-        transition: `background-color ${token.motionDurationMid}`,
-      },
-
-      [`${componentCls}-track`]: {
-        position: 'absolute',
-        backgroundColor: token.colorPrimaryBorder,
-        borderRadius: token.borderRadiusXS,
-        transition: `background-color ${token.motionDurationMid}`,
-      },
-
-      '&:hover': {
-        [`${componentCls}-rail`]: {
-          backgroundColor: token.colorFillSecondary,
-        },
-
-        [`${componentCls}-track`]: {
-          backgroundColor: token.colorPrimaryBorderHover,
-        },
-
-        [`${componentCls}-dot`]: {
-          borderColor: colorFillContentHover,
-        },
-
-        [`${componentCls}-handle::after`]: {
-          boxShadow: `0 0 0 ${token.handleLineWidth}px ${token.colorPrimaryBorderHover}`,
-        },
-
-        [`${componentCls}-dot-active`]: {
-          borderColor: token.colorPrimary,
-        },
-      },
-
-      [`${componentCls}-handle`]: {
-        position: 'absolute',
-        width: token.handleSize,
-        height: token.handleSize,
-        outline: 'none',
-
-        [`${componentCls}-dragging`]: {
-          zIndex: 1,
-        },
-
-        // 扩大选区
-        '&::before': {
-          content: '""',
-          position: 'absolute',
-          insetInlineStart: -token.handleLineWidth,
-          insetBlockStart: -token.handleLineWidth,
-          width: token.handleSize + token.handleLineWidth * 2,
-          height: token.handleSize + token.handleLineWidth * 2,
-          backgroundColor: 'transparent',
-        },
-
-        '&::after': {
-          content: '""',
-          position: 'absolute',
-          insetBlockStart: 0,
-          insetInlineStart: 0,
-          width: token.handleSize,
-          height: token.handleSize,
-          backgroundColor: token.colorBgElevated,
-          boxShadow: `0 0 0 ${token.handleLineWidth}px ${token.colorPrimaryBorder}`,
-          borderRadius: '50%',
-          cursor: 'pointer',
-          transition: `
-            inset-inline-start ${token.motionDurationMid},
-            inset-block-start ${token.motionDurationMid},
-            width ${token.motionDurationMid},
-            height ${token.motionDurationMid},
-            box-shadow ${token.motionDurationMid}
-          `,
-        },
-
-        '&:hover, &:active, &:focus': {
-          '&::before': {
-            insetInlineStart: -(
-              (token.handleSizeHover - token.handleSize) / 2 +
-              token.handleLineWidthHover
-            ),
-            insetBlockStart: -(
-              (token.handleSizeHover - token.handleSize) / 2 +
-              token.handleLineWidthHover
-            ),
-            width: token.handleSizeHover + token.handleLineWidthHover * 2,
-            height: token.handleSizeHover + token.handleLineWidthHover * 2,
-          },
-
-          '&::after': {
-            boxShadow: `0 0 0 ${token.handleLineWidthHover}px ${token.colorPrimary}`,
-            width: token.handleSizeHover,
-            height: token.handleSizeHover,
-            insetInlineStart: (token.handleSize - token.handleSizeHover) / 2,
-            insetBlockStart: (token.handleSize - token.handleSizeHover) / 2,
-          },
-        },
-      },
-
-      [`${componentCls}-mark`]: {
-        position: 'absolute',
-        fontSize: token.fontSize,
-      },
-
-      [`${componentCls}-mark-text`]: {
-        position: 'absolute',
-        display: 'inline-block',
-        color: token.colorTextDescription,
-        textAlign: 'center',
-        wordBreak: 'keep-all',
-        cursor: 'pointer',
-        userSelect: 'none',
-
-        '&-active': {
-          color: token.colorText,
-        },
-      },
-
-      [`${componentCls}-step`]: {
-        position: 'absolute',
-        background: 'transparent',
-        pointerEvents: 'none',
-      },
-
-      [`${componentCls}-dot`]: {
-        position: 'absolute',
-        width: dotSize,
-        height: dotSize,
-        backgroundColor: token.colorBgElevated,
-        border: `${token.handleLineWidth}px solid ${token.colorBorderSecondary}`,
-        borderRadius: '50%',
-        cursor: 'pointer',
-        transition: `border-color ${token.motionDurationSlow}`,
-        pointerEvents: 'auto',
-
-        '&-active': {
-          borderColor: token.colorPrimaryBorder,
-        },
-      },
-
-      [`&${componentCls}-disabled`]: {
-        cursor: 'not-allowed',
-
-        [`${componentCls}-rail`]: {
-          backgroundColor: `${token.colorFillSecondary} !important`,
-        },
-
-        [`${componentCls}-track`]: {
-          backgroundColor: `${token.colorTextDisabled} !important`,
-        },
-
-        [`
-          ${componentCls}-dot
-        `]: {
-          backgroundColor: token.colorBgElevated,
-          borderColor: token.colorTextDisabled,
-          boxShadow: 'none',
-          cursor: 'not-allowed',
-        },
-
-        [`${componentCls}-handle::after`]: {
-          backgroundColor: token.colorBgElevated,
-          cursor: 'not-allowed',
-          width: token.handleSize,
-          height: token.handleSize,
-          boxShadow: `0 0 0 ${token.handleLineWidth}px ${new TinyColor(token.colorTextDisabled)
-            .onBackground(token.colorBgContainer)
-            .toHexString()}`,
-          insetInlineStart: 0,
-          insetBlockStart: 0,
-        },
-
-        [`
-          ${componentCls}-mark-text,
-          ${componentCls}-dot
-        `]: {
-          cursor: `not-allowed !important`,
-        },
-      },
-    },
-  }
-}
-
-// ============================ Horizontal ============================
-const genDirectionStyle = (token: SliderToken, horizontal: boolean): CSSObject => {
-  const { componentCls, railSize, handleSize, dotSize } = token
-
-  const railPadding: keyof CSSProperties = horizontal ? 'paddingBlock' : 'paddingInline'
-  const full: keyof CSSProperties = horizontal ? 'width' : 'height'
-  const part: keyof CSSProperties = horizontal ? 'height' : 'width'
-  const handlePos: keyof CSSProperties = horizontal ? 'insetBlockStart' : 'insetInlineStart'
-  const markInset: keyof CSSProperties = horizontal ? 'top' : 'insetInlineStart'
-
-  return {
-    [railPadding]: railSize,
-    [part]: railSize * 3,
-
-    [`${componentCls}-rail`]: {
-      [full]: '100%',
-      [part]: railSize,
-    },
-
-    [`${componentCls}-track`]: {
-      [part]: railSize,
-    },
-
-    [`${componentCls}-handle`]: {
-      [handlePos]: (railSize * 3 - handleSize) / 2,
-    },
-
-    [`${componentCls}-mark`]: {
-      // Reset all
-      insetInlineStart: 0,
-      top: 0,
-      [markInset]: handleSize,
-      [full]: '100%',
-    },
-
-    [`${componentCls}-step`]: {
-      // Reset all
-      insetInlineStart: 0,
-      top: 0,
-      [markInset]: railSize,
-      [full]: '100%',
-      [part]: railSize,
-    },
-
-    [`${componentCls}-dot`]: {
-      position: 'absolute',
-      [handlePos]: (railSize - dotSize) / 2,
-    },
-  }
-}
-// ============================ Horizontal ============================
-const genHorizontalStyle: GenerateStyle<SliderToken> = (token) => {
-  const { componentCls, marginPartWithMark } = token
-
-  return {
-    [`${componentCls}-horizontal`]: {
-      ...genDirectionStyle(token, true),
-
-      [`&${componentCls}-with-marks`]: {
-        marginBottom: marginPartWithMark,
-      },
-    },
-  }
-}
-
-// ============================= Vertical =============================
-const genVerticalStyle: GenerateStyle<SliderToken> = (token) => {
-  const { componentCls } = token
-
-  return {
-    [`${componentCls}-vertical`]: {
-      ...genDirectionStyle(token, false),
-      height: '100%',
-    },
-  }
-}
-
-// ============================== Export ==============================
-export default genComponentStyleHook(
-  'Slider',
-  (token) => {
-    const sliderToken = mergeToken<SliderToken>(token, {
-      marginPart: (token.controlHeight - token.controlSize) / 2,
-      marginFull: token.controlSize / 2,
-      marginPartWithMark: token.controlHeightLG - token.controlSize,
-    })
-    return [
-      genBaseStyle(sliderToken),
-      genHorizontalStyle(sliderToken),
-      genVerticalStyle(sliderToken),
-    ]
-  },
-  (token) => {
-    // Handle line width is always width-er 1px
-    const increaseHandleWidth = 1
-    const controlSize = token.controlHeightLG / 4
-    const controlSizeHover = token.controlHeightSM / 2
-    const handleLineWidth = token.lineWidth + increaseHandleWidth
-    const handleLineWidthHover = token.lineWidth + increaseHandleWidth * 3
-    return {
-      controlSize,
-      railSize: 4,
-      handleSize: controlSize,
-      handleSizeHover: controlSizeHover,
-      dotSize: 8,
-      handleLineWidth,
-      handleLineWidthHover,
-    }
-  },
-)