@antsoo-lib/components 0.1.11 → 0.1.12

package/src/input/util.ts

@@ -1,21 +0,0 @@
-import { filterEmpty } from '../_util/props-util'
-
-const isValid = (value: any) => {
-  return (
-    value !== undefined &&
-    value !== null &&
-    (Array.isArray(value) ? filterEmpty(value).length : true)
-  )
-}
-
-export function hasPrefixSuffix(propsAndSlots: any) {
-  return (
-    isValid(propsAndSlots.prefix) ||
-    isValid(propsAndSlots.suffix) ||
-    isValid(propsAndSlots.allowClear)
-  )
-}
-
-export function hasAddon(propsAndSlots: any) {
-  return isValid(propsAndSlots.addonBefore) || isValid(propsAndSlots.addonAfter)
-}

package/src/input-number/index.en-US.md

@@ -1,65 +0,0 @@
----
-category: Components
-type: Data Entry
-title: InputNumber
-cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*JvWbSYhuNlIAAAAAAAAAAAAADrJ8AQ/original
-coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*1uH-R5kLAMIAAAAAAAAAAAAADrJ8AQ/original
----
-
-Enter a number within certain range with the mouse or keyboard.
-
-## When To Use
-
-When a numeric value needs to be provided.
-
-## API
-
-| property         | description                                                                                       | type                                                                                    | default            |           |
-| ---------------- | ------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------- | ------------------ | --------- |
-| addonAfter       | The label text displayed after (on the right side of) the input field                             | slot                                                                                    | -                  | 3.0       |
-| addonBefore      | The label text displayed before (on the left side of) the input field                             | slot                                                                                    | -                  | 3.0       |
-| autofocus        | get focus when component mounted                                                                  | boolean                                                                                 | false              |           |
-| bordered         | Whether has border style                                                                          | boolean                                                                                 | true               | 3.0       |
-| controls         | Whether to show `+-` controls                                                                     | boolean                                                                                 | true               | 3.0       |
-| decimalSeparator | decimal separator                                                                                 | string                                                                                  | -                  |           |
-| defaultValue     | initial value                                                                                     | number                                                                                  |                    |           |
-| disabled         | disable the input                                                                                 | boolean                                                                                 | false              |           |
-| formatter        | Specifies the format of the value presented                                                       | function(value: number \| string, info: { userTyping: boolean, input: string }): string | -                  | info: 3.0 |
-| keyboard         | If enable keyboard behavior                                                                       | boolean                                                                                 | true               | 3.0       |
-| max              | max value                                                                                         | number                                                                                  | Infinity           |           |
-| min              | min value                                                                                         | number                                                                                  | -Infinity          |           |
-| parser           | Specifies the value extracted from formatter                                                      | function( string): number                                                               | -                  |           |
-| precision        | precision of input value                                                                          | number                                                                                  | -                  |           |
-| prefix           | The prefix icon for the Input                                                                     | slot                                                                                    | -                  | 3.0       |
-| size             | height of input box                                                                               | string                                                                                  | -                  |           |
-| status           | Set validation status                                                                             | 'error' \| 'warning'                                                                    | -                  | 3.3.0     |
-| step             | The number to which the current value is increased or decreased. It can be an integer or decimal. | number\|string                                                                          | 1                  |           |
-| stringMode       | Set value as string to support high precision decimals. Will return string value by `change`      | boolean                                                                                 | false              | 3.0       |
-| value(v-model)   | current value                                                                                     | number                                                                                  |                    |           |
-| upIcon           | custom up icon                                                                                    | slot                                                                                    | `<UpOutlined />`   | 3.3.0     |
-| downIcon         | custom up down                                                                                    | slot                                                                                    | `<DownOutlined />` | 3.3.0     |
-
-### events
-
-| Events Name | Description                                                           | Arguments                                                               | Version |       |
-| ----------- | --------------------------------------------------------------------- | ----------------------------------------------------------------------- | ------- | ----- |
-| change      | The callback triggered when the value is changed.                     | function(value: number \| string)                                       |         |       |
-| pressEnter  | The callback function that is triggered when Enter key is pressed.    | function(e)                                                             |         | 1.5.0 |
-| step        | The callback function that is triggered when click up or down buttons | (value: number, info: { offset: number, type: 'up' \| 'down' }) => void | 3.0     |       |
-
-## Methods
-
-| Name    | Description  |
-| ------- | ------------ |
-| blur()  | remove focus |
-| focus() | get focus    |
-
-## FAQ
-
-### Why `value` can exceed `min` or `max` in control?
-
-Developer handle data by their own in control. It will make data out of sync if InputNumber change display value. It also cause potential data issues when use in form.
-
-### Why dynamic change `min` or `max` which makes `value` out of range will not trigger `change`?
-
-`change` is user trigger event. Auto trigger will makes form lib can not detect data modify source.

package/src/input-number/index.tsx

@@ -1,250 +0,0 @@
-import DownOutlined from '@ant-design/icons-vue/DownOutlined'
-import UpOutlined from '@ant-design/icons-vue/UpOutlined'
-
-import type { App, ExtractPropTypes, HTMLAttributes } from 'vue'
-import { computed, defineComponent, shallowRef, watch } from 'vue'
-
-import classNames from '../_util/classNames'
-import isValidValue from '../_util/isValidValue'
-import omit from '../_util/omit'
-import type { InputStatus } from '../_util/statusUtils'
-import { getMergedStatus, getStatusClassNames } from '../_util/statusUtils'
-import { booleanType, stringType } from '../_util/type'
-import type { CustomSlotsType } from '../_util/type'
-import { cloneElement } from '../_util/vnode'
-import PropTypes from '../_util/vue-types'
-import type { SizeType } from '../config-provider'
-import { useInjectDisabled } from '../config-provider/DisabledContext'
-import useConfigInject from '../config-provider/hooks/useConfigInject'
-import {
-  FormItemInputContext,
-  NoFormStatus,
-  useInjectFormItemContext,
-} from '../form/FormItemContext'
-import { NoCompactStyle, useCompactItemContext } from '../space/Compact'
-import VcInputNumber, { inputNumberProps as baseInputNumberProps } from './src/InputNumber'
-// CSSINJS
-import useStyle from './style'
-
-const baseProps = baseInputNumberProps()
-export const inputNumberProps = () => ({
-  ...baseProps,
-  size: stringType<SizeType>(),
-  bordered: booleanType(true),
-  placeholder: String,
-  name: String,
-  id: String,
-  controls: booleanType(false),
-  type: String,
-  addonBefore: PropTypes.any,
-  addonAfter: PropTypes.any,
-  prefix: PropTypes.any,
-  'onUpdate:value': baseProps.onChange,
-  valueModifiers: Object,
-  status: stringType<InputStatus>(),
-})
-
-export type InputNumberProps = Partial<ExtractPropTypes<ReturnType<typeof inputNumberProps>>>
-
-const InputNumber = defineComponent({
-  compatConfig: { MODE: 3 },
-  name: 'AInputNumber',
-  inheritAttrs: false,
-  props: inputNumberProps(),
-  // emits: ['focus', 'blur', 'change', 'input', 'update:value'],
-  slots: Object as CustomSlotsType<{
-    addonBefore?: any
-    addonAfter?: any
-    prefix?: any
-    default?: any
-    upIcon?: any
-    downIcon?: any
-  }>,
-
-  setup(props, { emit, expose, attrs, slots }) {
-    const formItemContext = useInjectFormItemContext()
-    const formItemInputContext = FormItemInputContext.useInject()
-    const mergedStatus = computed(() => getMergedStatus(formItemInputContext.status, props.status))
-    const { prefixCls, size, direction, disabled } = useConfigInject('input-number', props)
-    const { compactSize, compactItemClassnames } = useCompactItemContext(prefixCls, direction)
-    const disabledContext = useInjectDisabled()
-    const mergedDisabled = computed(() => disabled.value ?? disabledContext.value)
-    // Style
-    const [wrapSSR, hashId] = useStyle(prefixCls)
-
-    const mergedSize = computed(() => compactSize.value || size.value)
-
-    const mergedValue = shallowRef(props.value ?? props.defaultValue)
-    const focused = shallowRef(false)
-    watch(
-      () => props.value,
-      () => {
-        mergedValue.value = props.value
-      },
-    )
-    const inputNumberRef = shallowRef(null)
-    const focus = () => {
-      inputNumberRef.value?.focus()
-    }
-    const blur = () => {
-      inputNumberRef.value?.blur()
-    }
-    expose({
-      focus,
-      blur,
-    })
-    const handleChange = (val: number) => {
-      if (props.value === undefined) {
-        mergedValue.value = val
-      }
-      emit('update:value', val)
-      emit('change', val)
-      formItemContext.onFieldChange()
-    }
-    const handleBlur = (e: FocusEvent) => {
-      focused.value = false
-      emit('blur', e)
-      formItemContext.onFieldBlur()
-    }
-    const handleFocus = (e: FocusEvent) => {
-      focused.value = true
-      emit('focus', e)
-    }
-    return () => {
-      const { hasFeedback, isFormItemInput, feedbackIcon } = formItemInputContext
-      const id = props.id ?? formItemContext.id.value
-      const {
-        class: className,
-        bordered,
-        readonly,
-        style,
-        addonBefore = slots.addonBefore?.(),
-        addonAfter = slots.addonAfter?.(),
-        prefix = slots.prefix?.(),
-        valueModifiers = {},
-        ...others
-      } = { ...attrs, ...props, id, disabled: mergedDisabled.value } as InputNumberProps &
-        HTMLAttributes
-
-      const preCls = prefixCls.value
-
-      const inputNumberClass = classNames(
-        {
-          [`${preCls}-lg`]: mergedSize.value === 'large',
-          [`${preCls}-sm`]: mergedSize.value === 'small',
-          [`${preCls}-rtl`]: direction.value === 'rtl',
-          [`${preCls}-readonly`]: readonly,
-          [`${preCls}-borderless`]: !bordered,
-          [`${preCls}-in-form-item`]: isFormItemInput,
-        },
-        getStatusClassNames(preCls, mergedStatus.value),
-        className,
-        compactItemClassnames.value,
-        hashId.value,
-      )
-
-      let element = (
-        <VcInputNumber
-          {...omit(others, ['size', 'defaultValue'])}
-          ref={inputNumberRef}
-          lazy={!!valueModifiers.lazy}
-          value={mergedValue.value}
-          class={inputNumberClass}
-          prefixCls={preCls}
-          readonly={readonly}
-          onChange={handleChange}
-          onBlur={handleBlur}
-          onFocus={handleFocus}
-          v-slots={{
-            upHandler: slots.upIcon
-              ? () => <span class={`${preCls}-handler-up-inner`}>{slots.upIcon()}</span>
-              : () => <UpOutlined class={`${preCls}-handler-up-inner`} />,
-            downHandler: slots.downIcon
-              ? () => <span class={`${preCls}-handler-down-inner`}>{slots.downIcon()}</span>
-              : () => <DownOutlined class={`${preCls}-handler-down-inner`} />,
-          }}
-        />
-      )
-      const hasAddon = isValidValue(addonBefore) || isValidValue(addonAfter)
-      const hasPrefix = isValidValue(prefix)
-      if (hasPrefix || hasFeedback) {
-        const affixWrapperCls = classNames(
-          `${preCls}-affix-wrapper`,
-          getStatusClassNames(`${preCls}-affix-wrapper`, mergedStatus.value, hasFeedback),
-          {
-            [`${preCls}-affix-wrapper-focused`]: focused.value,
-            [`${preCls}-affix-wrapper-disabled`]: mergedDisabled.value,
-            [`${preCls}-affix-wrapper-sm`]: mergedSize.value === 'small',
-            [`${preCls}-affix-wrapper-lg`]: mergedSize.value === 'large',
-            [`${preCls}-affix-wrapper-rtl`]: direction.value === 'rtl',
-            [`${preCls}-affix-wrapper-readonly`]: readonly,
-            [`${preCls}-affix-wrapper-borderless`]: !bordered,
-            // className will go to addon wrapper
-            [`${className}`]: !hasAddon && className,
-          },
-          hashId.value,
-        )
-        element = (
-          <div class={affixWrapperCls} style={style} onClick={focus}>
-            {hasPrefix && <span class={`${preCls}-prefix`}>{prefix}</span>}
-            {element}
-            {hasFeedback && <span class={`${preCls}-suffix`}>{feedbackIcon}</span>}
-          </div>
-        )
-      }
-
-      if (hasAddon) {
-        const wrapperClassName = `${preCls}-group`
-        const addonClassName = `${wrapperClassName}-addon`
-        const addonBeforeNode = addonBefore ? <div class={addonClassName}>{addonBefore}</div> : null
-        const addonAfterNode = addonAfter ? <div class={addonClassName}>{addonAfter}</div> : null
-
-        const mergedWrapperClassName = classNames(
-          `${preCls}-wrapper`,
-          wrapperClassName,
-          {
-            [`${wrapperClassName}-rtl`]: direction.value === 'rtl',
-          },
-          hashId.value,
-        )
-
-        const mergedGroupClassName = classNames(
-          `${preCls}-group-wrapper`,
-          {
-            [`${preCls}-group-wrapper-sm`]: mergedSize.value === 'small',
-            [`${preCls}-group-wrapper-lg`]: mergedSize.value === 'large',
-            [`${preCls}-group-wrapper-rtl`]: direction.value === 'rtl',
-          },
-          getStatusClassNames(`${prefixCls}-group-wrapper`, mergedStatus.value, hasFeedback),
-          className,
-          hashId.value,
-        )
-        element = (
-          <div class={mergedGroupClassName} style={style}>
-            <div class={mergedWrapperClassName}>
-              {addonBeforeNode && (
-                <NoCompactStyle>
-                  <NoFormStatus>{addonBeforeNode}</NoFormStatus>
-                </NoCompactStyle>
-              )}
-              {element}
-              {addonAfterNode && (
-                <NoCompactStyle>
-                  <NoFormStatus>{addonAfterNode}</NoFormStatus>
-                </NoCompactStyle>
-              )}
-            </div>
-          </div>
-        )
-      }
-      return wrapSSR(cloneElement(element, { style }))
-    }
-  },
-})
-
-export default Object.assign(InputNumber, {
-  install: (app: App) => {
-    app.component(InputNumber.name, InputNumber)
-    return app
-  },
-})

package/src/input-number/index.zh-CN.md

@@ -1,68 +0,0 @@
----
-category: Components
-type: 数据录入
-title: InputNumber
-subtitle: 数字输入框
-cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*JvWbSYhuNlIAAAAAAAAAAAAADrJ8AQ/original
-coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*1uH-R5kLAMIAAAAAAAAAAAAADrJ8AQ/original
----
-
-通过鼠标或键盘，输入范围内的数值。
-
-## 何时使用
-
-当需要获取标准数值时。
-
-## API
-
-属性如下
-
-| 成员             | 说明                                                                   | 类型                                                                                    | 默认值             | 版本      |
-| ---------------- | ---------------------------------------------------------------------- | --------------------------------------------------------------------------------------- | ------------------ | --------- |
-| addonAfter       | 带标签的 input，设置后置标签                                           | slot                                                                                    | -                  | 3.0       |
-| addonBefore      | 带标签的 input，设置前置标签                                           | slot                                                                                    | -                  | 3.0       |
-| autofocus        | 自动获取焦点                                                           | boolean                                                                                 | false              |           |
-| bordered         | 是否有边框                                                             | boolean                                                                                 | true               | 3.0       |
-| controls         | 是否显示增减按钮                                                       | boolean                                                                                 | true               | 3.0       |
-| decimalSeparator | 小数点                                                                 | string                                                                                  | -                  |           |
-| defaultValue     | 初始值                                                                 | number                                                                                  |                    |           |
-| disabled         | 禁用                                                                   | boolean                                                                                 | false              |           |
-| formatter        | 指定输入框展示值的格式                                                 | function(value: number \| string, info: { userTyping: boolean, input: string }): string | -                  | info: 3.0 |
-| keyboard         | 是否启用键盘快捷行为                                                   | boolean                                                                                 | true               | 3.0       |
-| max              | 最大值                                                                 | number                                                                                  | Infinity           |           |
-| min              | 最小值                                                                 | number                                                                                  | -Infinity          |           |
-| parser           | 指定从 formatter 里转换回数字的方式，和 formatter 搭配使用             | function( string): number                                                               | -                  |           |
-| precision        | 数值精度                                                               | number                                                                                  | -                  |           |
-| prefix           | 带有前缀图标的 input                                                   | slot                                                                                    | -                  | 3.0       |
-| size             | 输入框大小                                                             | string                                                                                  | -                  |           |
-| status           | 设置校验状态                                                           | 'error' \| 'warning'                                                                    | -                  | 3.3.0     |
-| step             | 每次改变步数，可以为小数                                               | number\|string                                                                          | 1                  |           |
-| stringMode       | 字符值模式，开启后支持高精度小数。同时 `change` 事件将返回 string 类型 | boolean                                                                                 | false              | 3.0       |
-| upIcon           | 自定义上箭头图标                                                       | slot                                                                                    | `<UpOutlined />`   | 3.3.0     |
-| downIcon         | 自定义下箭头图标                                                       | slot                                                                                    | `<DownOutlined />` | 3.3.0     |
-| value(v-model)   | 当前值                                                                 | number                                                                                  |                    |           |
-
-### 事件
-
-| 事件名称   | 说明               | 回调参数                                                                | 版本 |
-| ---------- | ------------------ | ----------------------------------------------------------------------- | ---- |
-| change     | 变化回调           | Function(value: number \| string)                                       |      |
-| pressEnter | 按下回车的回调     | function(e)                                                             |      |
-| step       | 点击上下箭头的回调 | (value: number, info: { offset: number, type: 'up' \| 'down' }) => void | 3.0  |
-
-## 方法
-
-| 名称    | 描述     |
-| ------- | -------- |
-| blur()  | 移除焦点 |
-| focus() | 获取焦点 |
-
-## FAQ
-
-### 为何受控模式下，`value` 可以超出 `min` 和 `max` 范围？
-
-在受控模式下，开发者可能自行存储相关数据。如果组件将数据约束回范围内，会导致展示数据与实际存储数据不一致的情况。这使得一些如表单场景存在潜在的数据问题。
-
-### 为何动态修改 `min` 和 `max` 让 `value` 超出范围不会触发 `change` 事件？
-
-`change` 事件为用户触发事件，自行触发会导致表单库误以为变更来自用户操作。我们以错误样式展示超出范围的数值。