@antsoo-lib/components 0.1.11 → 0.1.13

package/src/rate/index.tsx

@@ -1,254 +0,0 @@
-import StarFilled from '@ant-design/icons-vue/StarFilled'
-
-import type { CSSProperties, ExtractPropTypes, PropType, VNode } from 'vue'
-import { defineComponent, onMounted, reactive, ref, watch } from 'vue'
-
-import type { FocusEventHandler, KeyboardEventHandler } from '../_util/EventInterface'
-import KeyCode from '../_util/KeyCode'
-import classNames from '../_util/classNames'
-import useRefs from '../_util/hooks/useRefs'
-import { findDOMNode, initDefaultProps } from '../_util/props-util'
-import { withInstall } from '../_util/type'
-import PropTypes from '../_util/vue-types'
-import type { Direction } from '../config-provider'
-import useConfigInject from '../config-provider/hooks/useConfigInject'
-import { useInjectFormItemContext } from '../form/FormItemContext'
-import Tooltip from '../tooltip'
-import Star from './Star'
-import useStyle from './style'
-import { getOffsetLeft } from './util'
-
-export const rateProps = () => ({
-  prefixCls: String,
-  count: Number,
-  value: Number,
-  allowHalf: { type: Boolean, default: undefined },
-  allowClear: { type: Boolean, default: undefined },
-  tooltips: Array as PropType<string[]>,
-  disabled: { type: Boolean, default: undefined },
-  character: PropTypes.any,
-  autofocus: { type: Boolean, default: undefined },
-  tabindex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  direction: String as PropType<Direction>,
-  id: String,
-  onChange: Function as PropType<(value: number) => void>,
-  onHoverChange: Function as PropType<(value: number) => void>,
-  'onUpdate:value': Function as PropType<(value: number) => void>,
-  onFocus: Function as PropType<FocusEventHandler>,
-  onBlur: Function as PropType<FocusEventHandler>,
-  onKeydown: Function as PropType<KeyboardEventHandler>,
-})
-
-export type RateProps = Partial<ExtractPropTypes<ReturnType<typeof rateProps>>>
-
-const Rate = defineComponent({
-  compatConfig: { MODE: 3 },
-  name: 'ARate',
-  inheritAttrs: false,
-  props: initDefaultProps(rateProps(), {
-    value: 0,
-    count: 5,
-    allowHalf: false,
-    allowClear: true,
-    tabindex: 0,
-    direction: 'ltr',
-  }),
-  // emits: ['hoverChange', 'update:value', 'change', 'focus', 'blur', 'keydown'],
-  setup(props, { slots, attrs, emit, expose }) {
-    const { prefixCls, direction } = useConfigInject('rate', props)
-    const [wrapSSR, hashId] = useStyle(prefixCls)
-    const formItemContext = useInjectFormItemContext()
-    const rateRef = ref()
-    const [setRef, starRefs] = useRefs()
-    const state = reactive({
-      value: props.value,
-      focused: false,
-      cleanedValue: null,
-      hoverValue: undefined,
-    })
-    watch(
-      () => props.value,
-      () => {
-        state.value = props.value
-      },
-    )
-    const getStarDOM = (index: number) => {
-      return findDOMNode(starRefs.value.get(index))
-    }
-    const getStarValue = (index: number, x: number) => {
-      const reverse = direction.value === 'rtl'
-      let value = index + 1
-      if (props.allowHalf) {
-        const starEle = getStarDOM(index)
-        const leftDis = getOffsetLeft(starEle)
-        const width = starEle.clientWidth
-        if (reverse && x - leftDis > width / 2) {
-          value -= 0.5
-        } else if (!reverse && x - leftDis < width / 2) {
-          value -= 0.5
-        }
-      }
-      return value
-    }
-    const changeValue = (value: number) => {
-      if (props.value === undefined) {
-        state.value = value
-      }
-      emit('update:value', value)
-      emit('change', value)
-      formItemContext.onFieldChange()
-    }
-
-    const onHover = (e: MouseEvent, index: number) => {
-      const hoverValue = getStarValue(index, e.pageX)
-      if (hoverValue !== state.cleanedValue) {
-        state.hoverValue = hoverValue
-        state.cleanedValue = null
-      }
-      emit('hoverChange', hoverValue)
-    }
-    const onMouseLeave = () => {
-      state.hoverValue = undefined
-      state.cleanedValue = null
-      emit('hoverChange', undefined)
-    }
-    const onClick = (event: MouseEvent, index: number) => {
-      const { allowClear } = props
-      const newValue = getStarValue(index, event.pageX)
-      let isReset = false
-      if (allowClear) {
-        isReset = newValue === state.value
-      }
-      onMouseLeave()
-      changeValue(isReset ? 0 : newValue)
-      state.cleanedValue = isReset ? newValue : null
-    }
-    const onFocus = (e: FocusEvent) => {
-      state.focused = true
-      emit('focus', e)
-    }
-    const onBlur = (e: FocusEvent) => {
-      state.focused = false
-      emit('blur', e)
-      formItemContext.onFieldBlur()
-    }
-    const onKeyDown = (event: KeyboardEvent) => {
-      const { keyCode } = event
-      const { count, allowHalf } = props
-      const reverse = direction.value === 'rtl'
-      if (keyCode === KeyCode.RIGHT && state.value < count && !reverse) {
-        if (allowHalf) {
-          state.value += 0.5
-        } else {
-          state.value += 1
-        }
-        changeValue(state.value)
-        event.preventDefault()
-      } else if (keyCode === KeyCode.LEFT && state.value > 0 && !reverse) {
-        if (allowHalf) {
-          state.value -= 0.5
-        } else {
-          state.value -= 1
-        }
-        changeValue(state.value)
-        event.preventDefault()
-      } else if (keyCode === KeyCode.RIGHT && state.value > 0 && reverse) {
-        if (allowHalf) {
-          state.value -= 0.5
-        } else {
-          state.value -= 1
-        }
-        changeValue(state.value)
-        event.preventDefault()
-      } else if (keyCode === KeyCode.LEFT && state.value < count && reverse) {
-        if (allowHalf) {
-          state.value += 0.5
-        } else {
-          state.value += 1
-        }
-        changeValue(state.value)
-        event.preventDefault()
-      }
-      emit('keydown', event)
-    }
-
-    const focus = () => {
-      if (!props.disabled) {
-        rateRef.value.focus()
-      }
-    }
-    const blur = () => {
-      if (!props.disabled) {
-        rateRef.value.blur()
-      }
-    }
-
-    expose({
-      focus,
-      blur,
-    })
-
-    onMounted(() => {
-      const { autofocus, disabled } = props
-      if (autofocus && !disabled) {
-        focus()
-      }
-    })
-
-    const characterRender = (node: VNode, { index }) => {
-      const { tooltips } = props
-      if (!tooltips) return node
-      return <Tooltip title={tooltips[index]}>{node}</Tooltip>
-    }
-
-    return () => {
-      const { count, allowHalf, disabled, tabindex, id = formItemContext.id.value } = props
-      const { class: className, style } = attrs
-      const stars = []
-      const disabledClass = disabled ? `${prefixCls.value}-disabled` : ''
-      const character = props.character || slots.character || (() => <StarFilled />)
-      for (let index = 0; index < count; index++) {
-        stars.push(
-          <Star
-            ref={setRef(index)}
-            key={index}
-            index={index}
-            count={count}
-            disabled={disabled}
-            prefixCls={`${prefixCls.value}-star`}
-            allowHalf={allowHalf}
-            value={state.hoverValue === undefined ? state.value : state.hoverValue}
-            onClick={onClick}
-            onHover={onHover}
-            character={character}
-            characterRender={characterRender}
-            focused={state.focused}
-          />,
-        )
-      }
-      const rateClassName = classNames(prefixCls.value, disabledClass, className, {
-        [hashId.value]: true,
-        [`${prefixCls.value}-rtl`]: direction.value === 'rtl',
-      })
-      return wrapSSR(
-        <ul
-          {...attrs}
-          id={id}
-          class={rateClassName}
-          style={style as CSSProperties}
-          onMouseleave={disabled ? null : onMouseLeave}
-          tabindex={disabled ? -1 : tabindex}
-          onFocus={disabled ? null : onFocus}
-          onBlur={disabled ? null : onBlur}
-          onKeydown={disabled ? null : onKeyDown}
-          ref={rateRef}
-          role="radiogroup"
-        >
-          {stars}
-        </ul>,
-      )
-    }
-  },
-})
-
-export default withInstall(Rate)

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

@@ -1,45 +0,0 @@
----
-category: Components
-type: 数据录入
-title: Rate
-subtitle: 评分
-cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*oyOcTrB12_YAAAAAAAAAAAAADrJ8AQ/original
-coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*M7_ER7GJr6wAAAAAAAAAAAAADrJ8AQ/original
----
-
-评分组件。
-
-## 何时使用
-
-- 对评价进行展示。
-- 对事物进行快速的评级操作。
-
-## API
-
-| 属性           | 说明                   | 类型           | 默认值             |
-| -------------- | ---------------------- | -------------- | ------------------ |
-| allowClear     | 是否允许再次点击后清除 | boolean        | true               |
-| allowHalf      | 是否允许半选           | boolean        | false              |
-| autofocus      | 自动获取焦点           | boolean        | false              |
-| character      | 自定义字符             | string \| slot | `<StarOutlined />` |
-| count          | star 总数              | number         | 5                  |
-| disabled       | 只读，无法进行交互     | boolean        | false              |
-| tooltips       | 自定义每项的提示信息   | string[]       | -                  |
-| value(v-model) | 当前数，受控值         | number         | -                  |
-
-### 事件
-
-| 事件名称    | 说明                     | 回调参数                |     |
-| ----------- | ------------------------ | ----------------------- | --- |
-| blur        | 失去焦点时的回调         | Function()              | -   |
-| change      | 选择时的回调             | Function(value: number) | -   |
-| focus       | 获取焦点时的回调         | Function()              | -   |
-| hoverChange | 鼠标经过时数值变化的回调 | Function(value: number) | -   |
-| keydown     | 按键回调                 | Function(event)         | -   |
-
-## 方法
-
-| 名称    | 描述     |
-| ------- | -------- |
-| blur()  | 移除焦点 |
-| focus() | 获取焦点 |

package/src/rate/style/index.ts

@@ -1,135 +0,0 @@
-import type { CSSObject } from '../../_util/cssinjs'
-import { resetComponent } from '../../style'
-import type { FullToken, GenerateStyle } from '../../theme/internal'
-import { genComponentStyleHook, mergeToken } from '../../theme/internal'
-
-export interface ComponentToken {}
-
-interface RateToken extends FullToken<'Rate'> {
-  rateStarColor: string
-  rateStarSize: number
-  rateStarHoverScale: CSSObject['transform']
-  defaultColor: string
-}
-
-const genRateStarStyle: GenerateStyle<RateToken, CSSObject> = (token) => {
-  const { componentCls } = token
-
-  return {
-    [`${componentCls}-star`]: {
-      position: 'relative',
-      display: 'inline-block',
-      color: 'inherit',
-      cursor: 'pointer',
-
-      '&:not(:last-child)': {
-        marginInlineEnd: token.marginXS,
-      },
-
-      '> div': {
-        transition: `all ${token.motionDurationMid}, outline 0s`,
-
-        '&:hover': {
-          transform: token.rateStarHoverScale,
-        },
-
-        '&:focus': {
-          outline: 0,
-        },
-
-        '&:focus-visible': {
-          outline: `${token.lineWidth}px dashed ${token.rateStarColor}`,
-          transform: token.rateStarHoverScale,
-        },
-      },
-
-      '&-first, &-second': {
-        color: token.defaultColor,
-        transition: `all ${token.motionDurationMid}`,
-        userSelect: 'none',
-
-        [token.iconCls]: {
-          verticalAlign: 'middle',
-        },
-      },
-
-      '&-first': {
-        position: 'absolute',
-        top: 0,
-        insetInlineStart: 0,
-        width: '50%',
-        height: '100%',
-        overflow: 'hidden',
-        opacity: 0,
-      },
-
-      [`&-half ${componentCls}-star-first, &-half ${componentCls}-star-second`]: {
-        opacity: 1,
-      },
-
-      [`&-half ${componentCls}-star-first, &-full ${componentCls}-star-second`]: {
-        color: 'inherit',
-      },
-    },
-  }
-}
-
-const genRateRtlStyle = (token: RateToken): CSSObject => ({
-  [`&-rtl${token.componentCls}`]: {
-    direction: 'rtl',
-  },
-})
-
-const genRateStyle: GenerateStyle<RateToken> = (token) => {
-  const { componentCls } = token
-
-  return {
-    [componentCls]: {
-      ...resetComponent(token),
-
-      display: 'inline-block',
-      margin: 0,
-      padding: 0,
-      color: token.rateStarColor,
-      fontSize: token.rateStarSize,
-      lineHeight: 'unset',
-      listStyle: 'none',
-      outline: 'none',
-
-      // disable styles
-      [`&-disabled${componentCls} ${componentCls}-star`]: {
-        cursor: 'default',
-
-        '&:hover': {
-          transform: 'scale(1)',
-        },
-      },
-
-      // star styles
-      ...genRateStarStyle(token),
-
-      // text styles
-      [`+ ${componentCls}-text`]: {
-        display: 'inline-block',
-        marginInlineStart: token.marginXS,
-        fontSize: token.fontSize,
-      },
-
-      // rtl styles
-      ...genRateRtlStyle(token),
-    },
-  }
-}
-
-// ============================== Export ==============================
-export default genComponentStyleHook('Rate', (token) => {
-  const { colorFillContent } = token
-
-  const rateToken = mergeToken<RateToken>(token, {
-    rateStarColor: token['yellow-6'],
-    rateStarSize: token.controlHeightLG * 0.5,
-    rateStarHoverScale: 'scale(1.1)',
-    defaultColor: colorFillContent,
-  })
-  return [genRateStyle(rateToken)]
-})

package/src/rate/util.ts

@@ -1,40 +0,0 @@
-function getScroll(w: Window) {
-  let ret = w.scrollX
-  const method = 'scrollLeft'
-  if (typeof ret !== 'number') {
-    const d = w.document
-    // ie6,7,8 standard mode
-    ret = d.documentElement[method]
-    if (typeof ret !== 'number') {
-      // quirks mode
-      ret = d.body[method]
-    }
-  }
-  return ret
-}
-
-function getClientPosition(elem: HTMLElement) {
-  let x: number
-  let y: number
-  const doc = elem.ownerDocument
-  const { body } = doc
-  const docElem = doc && doc.documentElement
-  const box = elem.getBoundingClientRect()
-  x = box.left
-  y = box.top
-  x -= docElem.clientLeft || body.clientLeft || 0
-  y -= docElem.clientTop || body.clientTop || 0
-  return {
-    left: x,
-    top: y,
-  }
-}
-
-export function getOffsetLeft(el: HTMLElement) {
-  const pos = getClientPosition(el)
-  const doc = el.ownerDocument
-  // Only IE use `parentWindow`
-  const w: Window = doc.defaultView || (doc as any).parentWindow
-  pos.left += getScroll(w)
-  return pos.left
-}

package/src/result/index.en-US.md

@@ -1,23 +0,0 @@
----
-category: Components
-type: Feedback
-title: Result
-cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*-e2IRroDJyEAAAAAAAAAAAAADrJ8AQ/original
-coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*-0kxQrbHx2kAAAAAAAAAAAAADrJ8AQ/original
----
-
-Used to feed back the results of a series of operational tasks.
-
-## When To Use
-
-Use when important operations need to inform the user to process the results and the feedback is more complicated.
-
-## API
-
-| Property | Description                           | Type                                                                   | Default |     |     |     |     |     |     |
-| -------- | ------------------------------------- | ---------------------------------------------------------------------- | ------- | --- | --- | --- | --- | --- | --- |
-| extra    | operating area                        | slot                                                                   | -       |     |     |     |     |     |     |
-| icon     | custom back icon                      | slot                                                                   | -       |     |     |     |     |     |     |
-| status   | result status,decide icons and colors | `success` \| `error` \| `info` \| `warning` \| `404` \| `403` \| `500` | 'info'  |
-| subTitle | subTitle string                       | string \| VNode \| slot                                                | -       |     |     |     |     |     |     |
-| title    | title string                          | string \| VNode \| slot                                                | -       |     |     |     |     |     |     |

package/src/result/index.tsx

@@ -1,122 +0,0 @@
-import CheckCircleFilled from '@ant-design/icons-vue/CheckCircleFilled'
-import CloseCircleFilled from '@ant-design/icons-vue/CloseCircleFilled'
-import ExclamationCircleFilled from '@ant-design/icons-vue/ExclamationCircleFilled'
-import WarningFilled from '@ant-design/icons-vue/WarningFilled'
-
-import type { App, ExtractPropTypes, Plugin, PropType, VNodeTypes } from 'vue'
-import { computed, defineComponent } from 'vue'
-
-import classNames from '../_util/classNames'
-import type { CustomSlotsType } from '../_util/type'
-import PropTypes from '../_util/vue-types'
-import useConfigInject from '../config-provider/hooks/useConfigInject'
-import noFound from './noFound'
-import serverError from './serverError'
-import useStyle from './style'
-import unauthorized from './unauthorized'
-
-export const IconMap = {
-  success: CheckCircleFilled,
-  error: CloseCircleFilled,
-  info: ExclamationCircleFilled,
-  warning: WarningFilled,
-}
-
-export const ExceptionMap = {
-  '404': noFound,
-  '500': serverError,
-  '403': unauthorized,
-}
-
-export type ExceptionStatusType = 403 | 404 | 500 | '403' | '404' | '500'
-export type ResultStatusType = ExceptionStatusType | keyof typeof IconMap
-
-// ExceptionImageMap keys
-const ExceptionStatus = Object.keys(ExceptionMap)
-
-export const resultProps = () => ({
-  prefixCls: String,
-  icon: PropTypes.any,
-  status: { type: [Number, String] as PropType<ResultStatusType>, default: 'info' },
-  title: PropTypes.any,
-  subTitle: PropTypes.any,
-  extra: PropTypes.any,
-})
-
-export type ResultProps = Partial<ExtractPropTypes<ReturnType<typeof resultProps>>>
-
-const renderIcon = (prefixCls: string, { status, icon }) => {
-  if (ExceptionStatus.includes(`${status}`)) {
-    const SVGComponent = ExceptionMap[status]
-    return (
-      <div class={`${prefixCls}-icon ${prefixCls}-image`}>
-        <SVGComponent />
-      </div>
-    )
-  }
-  const IconComponent = IconMap[status]
-  const iconNode = icon || <IconComponent />
-  return <div class={`${prefixCls}-icon`}>{iconNode}</div>
-}
-
-const renderExtra = (prefixCls: string, extra: VNodeTypes) =>
-  extra && <div class={`${prefixCls}-extra`}>{extra}</div>
-
-const Result = defineComponent({
-  compatConfig: { MODE: 3 },
-  name: 'AResult',
-  inheritAttrs: false,
-  props: resultProps(),
-  slots: Object as CustomSlotsType<{
-    title?: any
-    subTitle?: any
-    icon?: any
-    extra?: any
-    default?: any
-  }>,
-  setup(props, { slots, attrs }) {
-    const { prefixCls, direction } = useConfigInject('result', props)
-
-    const [wrapSSR, hashId] = useStyle(prefixCls)
-
-    const className = computed(() =>
-      classNames(prefixCls.value, hashId.value, `${prefixCls.value}-${props.status}`, {
-        [`${prefixCls.value}-rtl`]: direction.value === 'rtl',
-      }),
-    )
-    return () => {
-      const title = props.title ?? slots.title?.()
-      const subTitle = props.subTitle ?? slots.subTitle?.()
-      const icon = props.icon ?? slots.icon?.()
-      const extra = props.extra ?? slots.extra?.()
-      const pre = prefixCls.value
-      return wrapSSR(
-        <div {...attrs} class={[className.value, attrs.class]}>
-          {renderIcon(pre, { status: props.status, icon })}
-          <div class={`${pre}-title`}>{title}</div>
-          {subTitle && <div class={`${pre}-subtitle`}>{subTitle}</div>}
-          {renderExtra(pre, extra)}
-          {slots.default && <div class={`${pre}-content`}>{slots.default()}</div>}
-        </div>,
-      )
-    }
-  },
-})
-
-/* add resource */
-Result.PRESENTED_IMAGE_403 = ExceptionMap[403]
-Result.PRESENTED_IMAGE_404 = ExceptionMap[404]
-Result.PRESENTED_IMAGE_500 = ExceptionMap[500]
-
-/* istanbul ignore next */
-Result.install = function (app: App) {
-  app.component(Result.name, Result)
-  return app
-}
-
-export default Result as typeof Result &
-  Plugin & {
-    readonly PRESENTED_IMAGE_403: typeof unauthorized
-    readonly PRESENTED_IMAGE_404: typeof noFound
-    readonly PRESENTED_IMAGE_500: typeof serverError
-  }

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

@@ -1,24 +0,0 @@
----
-category: Components
-type: 反馈
-title: Result
-subtitle: 结果
-cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*-e2IRroDJyEAAAAAAAAAAAAADrJ8AQ/original
-coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*-0kxQrbHx2kAAAAAAAAAAAAADrJ8AQ/original
----
-
-用于反馈一系列操作任务的处理结果。
-
-## 何时使用
-
-当有重要操作需告知用户处理结果，且反馈内容较为复杂时使用。
-
-## API
-
-| 参数     | 说明                      | 类型                                                                   | 默认值 |     |     |     |     |     |     |
-| -------- | ------------------------- | ---------------------------------------------------------------------- | ------ | --- | --- | --- | --- | --- | --- |
-| extra    | 操作区                    | slot                                                                   | -      |     |     |     |     |     |     |
-| icon     | 自定义 icon               | slot                                                                   | -      |     |     |     |     |     |     |
-| status   | 结果的状态,决定图标和颜色 | `success` \| `error` \| `info` \| `warning` \| `404` \| `403` \| `500` | 'info' |
-| subTitle | subTitle 文字             | string \| VNode \| slot                                                | -      |     |     |     |     |     |     |
-| title    | title 文字                | string \| VNode \| slot                                                | -      |     |     |     |     |     |     |