diff --git a/components/input-number/index.en-US.md b/components/input-number/index.en-US.md index 314f31493..bfbc1ff73 100644 --- a/components/input-number/index.en-US.md +++ b/components/input-number/index.en-US.md @@ -2,7 +2,7 @@ category: Components type: Data Entry title: InputNumber -cover: https://gw.alipayobjects.com/zos/alicdn/XOS8qZ0kU/InputNumber.svg +cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*JvWbSYhuNlIAAAAAAAAAAAAADrJ8AQ/original --- Enter a number within certain range with the mouse or keyboard. diff --git a/components/input-number/index.tsx b/components/input-number/index.tsx index 351708743..515097637 100644 --- a/components/input-number/index.tsx +++ b/components/input-number/index.tsx @@ -1,4 +1,4 @@ -import type { PropType, ExtractPropTypes, HTMLAttributes, App } from 'vue'; +import type { ExtractPropTypes, HTMLAttributes, App } from 'vue'; import { watch, defineComponent, ref, computed } from 'vue'; import classNames from '../_util/classNames'; import UpOutlined from '@ant-design/icons-vue/UpOutlined'; @@ -17,11 +17,16 @@ import PropTypes from '../_util/vue-types'; import isValidValue from '../_util/isValidValue'; import type { InputStatus } from '../_util/statusUtils'; import { getStatusClassNames, getMergedStatus } from '../_util/statusUtils'; +import { booleanType, stringType } from '../_util/type'; + +// CSSINJS +import useStyle from './style'; + const baseProps = baseInputNumberProps(); export const inputNumberProps = () => ({ ...baseProps, - size: { type: String as PropType }, - bordered: { type: Boolean, default: true }, + size: stringType(), + bordered: booleanType(true), placeholder: String, name: String, id: String, @@ -31,7 +36,7 @@ export const inputNumberProps = () => ({ prefix: PropTypes.any, 'onUpdate:value': baseProps.onChange, valueModifiers: Object, - status: String as PropType, + status: stringType(), }); export type InputNumberProps = Partial>>; @@ -48,6 +53,10 @@ const InputNumber = defineComponent({ const formItemInputContext = FormItemInputContext.useInject(); const mergedStatus = computed(() => getMergedStatus(formItemInputContext.status, props.status)); const { prefixCls, size, direction } = useConfigInject('input-number', props); + + // Style + const [wrapSSR, hashId] = useStyle(prefixCls); + const mergedValue = ref(props.value === undefined ? props.defaultValue : props.value); const focused = ref(false); watch( @@ -112,6 +121,7 @@ const InputNumber = defineComponent({ }, getStatusClassNames(preCls, mergedStatus.value), className, + hashId.value, ); let element = ( @@ -153,6 +163,7 @@ const InputNumber = defineComponent({ // className will go to addon wrapper [`${className}`]: !hasAddon && className, }, + hashId.value, ); element = (
{addonAfter}
: null; - const mergedWrapperClassName = classNames(`${preCls}-wrapper`, wrapperClassName, { - [`${wrapperClassName}-rtl`]: direction.value === 'rtl', - }); + const mergedWrapperClassName = classNames( + `${preCls}-wrapper`, + wrapperClassName, + { + [`${wrapperClassName}-rtl`]: direction.value === 'rtl', + }, + hashId.value, + ); const mergedGroupClassName = classNames( `${preCls}-group-wrapper`, @@ -188,6 +204,7 @@ const InputNumber = defineComponent({ }, getStatusClassNames(`${prefixCls}-group-wrapper`, mergedStatus.value, hasFeedback), className, + hashId.value, ); element = (
@@ -199,7 +216,7 @@ const InputNumber = defineComponent({
); } - return cloneElement(element, { style }); + return wrapSSR(cloneElement(element, { style })); }; }, }); diff --git a/components/input-number/index.zh-CN.md b/components/input-number/index.zh-CN.md index 009697832..c6a43e03e 100644 --- a/components/input-number/index.zh-CN.md +++ b/components/input-number/index.zh-CN.md @@ -3,7 +3,7 @@ category: Components type: 数据录入 title: InputNumber subtitle: 数字输入框 -cover: https://gw.alipayobjects.com/zos/alicdn/XOS8qZ0kU/InputNumber.svg +cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*JvWbSYhuNlIAAAAAAAAAAAAADrJ8AQ/original --- 通过鼠标或键盘，输入范围内的数值。 diff --git a/components/input-number/src/InputNumber.tsx b/components/input-number/src/InputNumber.tsx index 6817e3be8..9fa230564 100644 --- a/components/input-number/src/InputNumber.tsx +++ b/components/input-number/src/InputNumber.tsx @@ -5,11 +5,12 @@ import StepHandler from './StepHandler'; import { getNumberPrecision, num2str, validateNumber } from './utils/numberUtil'; import useCursor from './hooks/useCursor'; import useFrame from './hooks/useFrame'; -import type { HTMLAttributes, PropType } from 'vue'; +import type { HTMLAttributes } from 'vue'; import { watch, computed, ref, defineComponent } from 'vue'; import type { ChangeEvent, KeyboardEventHandler } from '../../_util/EventInterface'; import KeyCode from '../../_util/KeyCode'; import classNames from '../../_util/classNames'; +import { booleanType, stringType, someType, functionType } from '../../_util/type'; /** * We support `stringMode` which need handle correct type when user call in onChange @@ -36,46 +37,42 @@ const getDecimalIfValidate = (value: ValueType) => { export const inputNumberProps = () => ({ /** value will show as string */ - stringMode: { type: Boolean as PropType }, + stringMode: booleanType(), - defaultValue: { type: [String, Number] as PropType }, - value: { type: [String, Number] as PropType }, + defaultValue: someType([String, Number]), + value: someType([String, Number]), - prefixCls: { type: String as PropType }, - min: { type: [String, Number] as PropType }, - max: { type: [String, Number] as PropType }, - step: { type: [String, Number] as PropType, default: 1 }, - tabindex: { type: Number as PropType }, - controls: { type: Boolean as PropType, default: true }, - readonly: { type: Boolean as PropType }, - disabled: { type: Boolean as PropType }, - autofocus: { type: Boolean as PropType }, - keyboard: { type: Boolean as PropType, default: true }, + prefixCls: stringType(), + min: someType([String, Number]), + max: someType([String, Number]), + step: someType([String, Number], 1), + tabindex: Number, + controls: booleanType(true), + readonly: booleanType(), + disabled: booleanType(), + autofocus: booleanType(), + keyboard: booleanType(true), /** Parse display value to validate number */ - parser: { type: Function as PropType<(displayValue: string | undefined) => ValueType> }, + parser: functionType<(displayValue: string | undefined) => ValueType>(), /** Transform `value` to display value show in input */ - formatter: { - type: Function as PropType< + formatter: + functionType< (value: ValueType | undefined, info: { userTyping: boolean; input: string }) => string - >, - }, + >(), /** Syntactic sugar of `formatter`. Config precision of display. */ - precision: { type: Number as PropType }, + precision: Number, /** Syntactic sugar of `formatter`. Config decimal separator of display. */ - decimalSeparator: { type: String as PropType }, + decimalSeparator: String, - onInput: { type: Function as PropType<(text: string) => void> }, - onChange: { type: Function as PropType<(value: ValueType) => void> }, - onPressEnter: { type: Function as PropType }, + onInput: functionType<(text: string) => void>(), + onChange: functionType<(value: ValueType) => void>(), + onPressEnter: functionType(), - onStep: { - type: Function as PropType< - (value: ValueType, info: { offset: ValueType; type: 'up' | 'down' }) => void - >, - }, - onBlur: { type: Function as PropType<(e: FocusEvent) => void> }, - onFocus: { type: Function as PropType<(e: FocusEvent) => void> }, + onStep: + functionType<(value: ValueType, info: { offset: ValueType; type: 'up' | 'down' }) => void>(), + onBlur: functionType<(e: FocusEvent) => void>(), + onFocus: functionType<(e: FocusEvent) => void>(), }); export default defineComponent({ diff --git a/components/input-number/src/StepHandler.tsx b/components/input-number/src/StepHandler.tsx index f63beb217..95845fb65 100644 --- a/components/input-number/src/StepHandler.tsx +++ b/components/input-number/src/StepHandler.tsx @@ -1,7 +1,7 @@ import isMobile from '../../vc-util/isMobile'; -import type { PropType } from 'vue'; import { onBeforeUnmount, ref, defineComponent } from 'vue'; import classNames from '../../_util/classNames'; +import { functionType } from '../../_util/type'; /** * When click and hold on a button - the speed of auto changing the value. @@ -21,7 +21,7 @@ export default defineComponent({ prefixCls: String, upDisabled: Boolean, downDisabled: Boolean, - onStep: { type: Function as PropType<(up: boolean) => void> }, + onStep: functionType<(up: boolean) => void>(), }, slots: ['upNode', 'downNode'], setup(props, { slots, emit }) { diff --git a/components/input-number/style/affix.less b/components/input-number/style/affix.less deleted file mode 100644 index 357ab94d3..000000000 --- a/components/input-number/style/affix.less +++ /dev/null @@ -1,83 +0,0 @@ -@import '../../input/style/mixin'; -@import (reference) '../../style/themes/index'; -@input-prefix-cls: ~'@{ant-prefix}-input'; - -@input-affix-margin: 4px; - -.@{ant-prefix}-input-number { - &-affix-wrapper { - .input(); - // or number handler will cover form status - position: relative; - display: inline-flex; - width: 90px; - padding: 0; - padding-inline-start: @input-padding-horizontal-base; - - &:not(&-disabled):hover { - .hover(); - z-index: 1; - } - - &-focused, - &:focus { - z-index: 1; - } - - &-disabled { - .@{ant-prefix}-input-number[disabled] { - background: transparent; - } - } - - > div.@{ant-prefix}-input-number { - width: 100%; - border: none; - outline: none; - - &.@{ant-prefix}-input-number-focused { - box-shadow: none !important; - } - } - - input.@{ant-prefix}-input-number-input { - padding: 0; - } - - &::before { - width: 0; - visibility: hidden; - content: '\a0'; - } - - .@{ant-prefix}-input-number-handler-wrap { - z-index: 2; - } - } - - &-prefix, - &-suffix { - display: flex; - flex: none; - align-items: center; - pointer-events: none; - } - - &-prefix { - margin-inline-end: @input-affix-margin; - } - - &-suffix { - position: absolute; - top: 0; - right: 0; - z-index: 1; - height: 100%; - margin-right: @input-padding-horizontal-base; - margin-left: @input-affix-margin; - } -} - -.@{ant-prefix}-input-number-group-wrapper .@{ant-prefix}-input-number-affix-wrapper { - width: 100%; -} diff --git a/components/input-number/style/index.less b/components/input-number/style/index.less deleted file mode 100644 index 97662c0c8..000000000 --- a/components/input-number/style/index.less +++ /dev/null @@ -1,235 +0,0 @@ -@import '../../style/themes/index'; -@import '../../style/mixins/index'; -@import '../../input/style/mixin'; -@import './affix'; -@import './status'; - -@input-number-prefix-cls: ~'@{ant-prefix}-input-number'; -@form-item-prefix-cls: ~'@{ant-prefix}-form-item'; - -.@{input-number-prefix-cls} { - .reset-component(); - .input(); - - //== Style for input-group: input with label, with button or dropdown... - &-group { - .reset-component(); - .input-group(~'@{input-number-prefix-cls}'); - - &-wrapper { - display: inline-block; - text-align: start; - vertical-align: top; // https://github.com/ant-design/ant-design/issues/6403 - } - } - - display: inline-block; - width: 90px; - margin: 0; - padding: 0; - border: @border-width-base @border-style-base @border-color-base; - border-radius: @border-radius-base; - - &-handler { - position: relative; - display: block; - width: 100%; - height: 50%; - overflow: hidden; - color: @text-color-secondary; - font-weight: bold; - line-height: 0; - text-align: center; - border-left: @border-width-base @border-style-base @input-number-handler-border-color; - transition: all 0.1s linear; - - &:active { - background: @input-number-handler-active-bg; - } - - &:hover &-up-inner, - &:hover &-down-inner { - color: @input-number-handler-hover-bg; - } - } - - &-handler-up-inner, - &-handler-down-inner { - .iconfont-mixin(); - - position: absolute; - right: 4px; - width: 12px; - height: 12px; - color: @text-color-secondary; - line-height: 12px; - transition: all 0.1s linear; - user-select: none; - } - - &:hover { - .hover(@input-number-hover-border-color); - & + .@{form-item-prefix-cls}-children-icon { - opacity: 0; - transition: opacity 0.24s linear 0.24s; - } - } - - &-focused { - .active(); - } - - &-disabled { - .disabled(); - .@{input-number-prefix-cls}-input { - cursor: not-allowed; - } - .@{input-number-prefix-cls}-handler-wrap { - display: none; - } - } - - &-readonly { - .@{input-number-prefix-cls}-handler-wrap { - display: none; - } - } - - &-input { - width: 100%; - height: @input-height-base - 2px; - padding: 0 @control-padding-horizontal - 1px; - text-align: left; - background-color: transparent; - border: 0; - border-radius: @border-radius-base; - outline: 0; - transition: all 0.3s linear; - appearance: textfield !important; - .placeholder(); - - &[type='number']::-webkit-inner-spin-button, - &[type='number']::-webkit-outer-spin-button { - margin: 0; - /* stylelint-disable-next-line property-no-vendor-prefix */ - -webkit-appearance: none; - appearance: none; - } - } - - &-lg { - padding: 0; - font-size: @font-size-lg; - - input { - height: @input-height-lg - 2px; - } - } - - &-sm { - padding: 0; - - input { - height: @input-height-sm - 2px; - padding: 0 @control-padding-horizontal-sm - 1px; - } - } - - &-handler-wrap { - position: absolute; - top: 0; - right: 0; - width: 22px; - height: 100%; - background: @input-number-handler-bg; - border-radius: 0 @border-radius-base @border-radius-base 0; - opacity: 0; - transition: opacity 0.24s linear 0.1s; - - // Fix input number inside Menu makes icon too large - // We arise the selector priority by nest selector here - // https://github.com/ant-design/ant-design/issues/14367 - .@{input-number-prefix-cls}-handler { - .@{input-number-prefix-cls}-handler-up-inner, - .@{input-number-prefix-cls}-handler-down-inner { - display: flex; - align-items: center; - justify-content: center; - min-width: auto; - margin-right: 0; - font-size: 7px; - } - } - - .@{input-number-prefix-cls}-borderless & { - border-left-width: 0; - } - } - - &-handler-wrap:hover &-handler { - height: 40%; - } - - &:hover &-handler-wrap, - &-focused &-handler-wrap { - opacity: 1; - } - - &-handler-up { - border-top-right-radius: @border-radius-base; - cursor: pointer; - - &-inner { - top: 50%; - margin-top: -5px; - text-align: center; - } - - &:hover { - height: 60% !important; - } - } - - &-handler-down { - top: 0; - border-top: @border-width-base @border-style-base @border-color-base; - border-bottom-right-radius: @border-radius-base; - cursor: pointer; - - &-inner { - top: 50%; - text-align: center; - transform: translateY(-50%); - } - - &:hover { - height: 60% !important; - } - .@{input-number-prefix-cls}-borderless & { - border-top-width: 0; - } - } - - &-handler-up-disabled, - &-handler-down-disabled { - cursor: not-allowed; - } - - &-handler-up-disabled:hover &-handler-up-inner, - &-handler-down-disabled:hover &-handler-down-inner { - color: @disabled-color; - } - - &-borderless { - box-shadow: none; - } - - // ===================== Out Of Range ===================== - &-out-of-range { - input { - color: @error-color; - } - } -} - -@import './rtl'; diff --git a/components/input-number/style/index.tsx b/components/input-number/style/index.tsx index 3a3ab0de5..957ae9ed9 100644 --- a/components/input-number/style/index.tsx +++ b/components/input-number/style/index.tsx @@ -1,2 +1,412 @@ -import '../../style/index.less'; -import './index.less'; +import type { InputToken } from '../../input/style'; +import { + genActiveStyle, + genBasicInputStyle, + genDisabledStyle, + genHoverStyle, + genInputGroupStyle, + genPlaceholderStyle, + genStatusStyle, + initInputToken, +} from '../../input/style'; +import type { FullToken, GenerateStyle } from '../../theme/internal'; +import { genComponentStyleHook } from '../../theme/internal'; +import { resetComponent, resetIcon } from '../../_style'; +import { genCompactItemStyle } from '../../_style/compact-item'; + +export interface ComponentToken { + controlWidth: number; + handleWidth: number; + handleFontSize: number; + /** Default `auto`. Set `true` will always show the handle */ + handleVisible: 'auto' | true; +} + +type InputNumberToken = InputToken>; + +const genInputNumberStyles: GenerateStyle = (token: InputNumberToken) => { + const { + componentCls, + lineWidth, + lineType, + colorBorder, + borderRadius, + fontSizeLG, + controlHeightLG, + controlHeightSM, + colorError, + inputPaddingHorizontalSM, + colorTextDescription, + motionDurationMid, + colorPrimary, + controlHeight, + inputPaddingHorizontal, + colorBgContainer, + colorTextDisabled, + borderRadiusSM, + borderRadiusLG, + controlWidth, + handleVisible, + } = token; + + return [ + { + [componentCls]: { + ...resetComponent(token), + ...genBasicInputStyle(token), + ...genStatusStyle(token, componentCls), + + display: 'inline-block', + width: controlWidth, + margin: 0, + padding: 0, + border: `${lineWidth}px ${lineType} ${colorBorder}`, + borderRadius, + + '&-rtl': { + direction: 'rtl', + + [`${componentCls}-input`]: { + direction: 'rtl', + }, + }, + + '&-lg': { + padding: 0, + fontSize: fontSizeLG, + borderRadius: borderRadiusLG, + + [`input${componentCls}-input`]: { + height: controlHeightLG - 2 * lineWidth, + }, + }, + + '&-sm': { + padding: 0, + borderRadius: borderRadiusSM, + + [`input${componentCls}-input`]: { + height: controlHeightSM - 2 * lineWidth, + padding: `0 ${inputPaddingHorizontalSM}px`, + }, + }, + + '&:hover': { + ...genHoverStyle(token), + }, + + '&-focused': { + ...genActiveStyle(token), + }, + + '&-disabled': { + ...genDisabledStyle(token), + [`${componentCls}-input`]: { + cursor: 'not-allowed', + }, + }, + + // ===================== Out Of Range ===================== + '&-out-of-range': { + input: { + color: colorError, + }, + }, + + // Style for input-group: input with label, with button or dropdown... + '&-group': { + ...resetComponent(token), + ...genInputGroupStyle(token), + + '&-wrapper': { + display: 'inline-block', + textAlign: 'start', + verticalAlign: 'top', // https://github.com/ant-design/ant-design/issues/6403 + + [`${componentCls}-affix-wrapper`]: { + width: '100%', + }, + + // Size + '&-lg': { + [`${componentCls}-group-addon`]: { + borderRadius: borderRadiusLG, + }, + }, + '&-sm': { + [`${componentCls}-group-addon`]: { + borderRadius: borderRadiusSM, + }, + }, + }, + }, + + [componentCls]: { + '&-input': { + width: '100%', + height: controlHeight - 2 * lineWidth, + padding: `0 ${inputPaddingHorizontal}px`, + textAlign: 'start', + backgroundColor: 'transparent', + border: 0, + borderRadius, + outline: 0, + transition: `all ${motionDurationMid} linear`, + appearance: 'textfield', + color: token.colorText, + fontSize: 'inherit', + verticalAlign: 'top', + ...genPlaceholderStyle(token.colorTextPlaceholder), + + '&[type="number"]::-webkit-inner-spin-button, &[type="number"]::-webkit-outer-spin-button': + { + margin: 0, + /* stylelint-disable-next-line property-no-vendor-prefix */ + webkitAppearance: 'none', + appearance: 'none', + }, + }, + }, + }, + }, + + // Handler + { + [componentCls]: { + [`&:hover ${componentCls}-handler-wrap, &-focused ${componentCls}-handler-wrap`]: { + opacity: 1, + }, + + [`${componentCls}-handler-wrap`]: { + position: 'absolute', + insetBlockStart: 0, + insetInlineEnd: 0, + width: token.handleWidth, + height: '100%', + background: colorBgContainer, + borderStartStartRadius: 0, + borderStartEndRadius: borderRadius, + borderEndEndRadius: borderRadius, + borderEndStartRadius: 0, + opacity: handleVisible === true ? 1 : 0, + display: 'flex', + flexDirection: 'column', + alignItems: 'stretch', + transition: `opacity ${motionDurationMid} linear ${motionDurationMid}`, + + // Fix input number inside Menu makes icon too large + // We arise the selector priority by nest selector here + // https://github.com/ant-design/ant-design/issues/14367 + [`${componentCls}-handler`]: { + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + flex: 'auto', + height: '40%', + + [` + ${componentCls}-handler-up-inner, + ${componentCls}-handler-down-inner + `]: { + marginInlineEnd: 0, + fontSize: token.handleFontSize, + }, + }, + }, + + [`${componentCls}-handler`]: { + height: '50%', + overflow: 'hidden', + color: colorTextDescription, + fontWeight: 'bold', + lineHeight: 0, + textAlign: 'center', + cursor: 'pointer', + borderInlineStart: `${lineWidth}px ${lineType} ${colorBorder}`, + transition: `all ${motionDurationMid} linear`, + '&:active': { + background: token.colorFillAlter, + }, + + // Hover + '&:hover': { + height: `60%`, + + [` + ${componentCls}-handler-up-inner, + ${componentCls}-handler-down-inner + `]: { + color: colorPrimary, + }, + }, + + '&-up-inner, &-down-inner': { + ...resetIcon(), + + color: colorTextDescription, + transition: `all ${motionDurationMid} linear`, + userSelect: 'none', + }, + }, + + [`${componentCls}-handler-up`]: { + borderStartEndRadius: borderRadius, + }, + + [`${componentCls}-handler-down`]: { + borderBlockStart: `${lineWidth}px ${lineType} ${colorBorder}`, + borderEndEndRadius: borderRadius, + }, + + // Disabled + '&-disabled, &-readonly': { + [`${componentCls}-handler-wrap`]: { + display: 'none', + }, + }, + + [` + ${componentCls}-handler-up-disabled, + ${componentCls}-handler-down-disabled + `]: { + cursor: 'not-allowed', + }, + + [` + ${componentCls}-handler-up-disabled:hover &-handler-up-inner, + ${componentCls}-handler-down-disabled:hover &-handler-down-inner + `]: { + color: colorTextDisabled, + }, + }, + }, + + // Border-less + { + [`${componentCls}-borderless`]: { + borderColor: 'transparent', + boxShadow: 'none', + + [`${componentCls}-handler-down`]: { + borderBlockStartWidth: 0, + }, + }, + }, + ]; +}; + +const genAffixWrapperStyles: GenerateStyle = (token: InputNumberToken) => { + const { + componentCls, + inputPaddingHorizontal, + inputAffixPadding, + controlWidth, + borderRadiusLG, + borderRadiusSM, + } = token; + + return { + [`${componentCls}-affix-wrapper`]: { + ...genBasicInputStyle(token), + ...genStatusStyle(token, `${componentCls}-affix-wrapper`), + // or number handler will cover form status + position: 'relative', + display: 'inline-flex', + width: controlWidth, + padding: 0, + paddingInlineStart: inputPaddingHorizontal, + + '&-lg': { + borderRadius: borderRadiusLG, + }, + + '&-sm': { + borderRadius: borderRadiusSM, + }, + + [`&:not(${componentCls}-affix-wrapper-disabled):hover`]: { + ...genHoverStyle(token), + zIndex: 1, + }, + + '&-focused, &:focus': { + zIndex: 1, + }, + + '&-disabled': { + [`${componentCls}[disabled]`]: { + background: 'transparent', + }, + }, + + [`> div${componentCls}`]: { + width: '100%', + border: 'none', + outline: 'none', + + [`&${componentCls}-focused`]: { + boxShadow: 'none !important', + }, + }, + + [`input${componentCls}-input`]: { + padding: 0, + }, + + '&::before': { + width: 0, + visibility: 'hidden', + content: '"\\a0"', + }, + + [`${componentCls}-handler-wrap`]: { + zIndex: 2, + }, + + [componentCls]: { + '&-prefix, &-suffix': { + display: 'flex', + flex: 'none', + alignItems: 'center', + pointerEvents: 'none', + }, + + '&-prefix': { + marginInlineEnd: inputAffixPadding, + }, + + '&-suffix': { + position: 'absolute', + insetBlockStart: 0, + insetInlineEnd: 0, + zIndex: 1, + height: '100%', + marginInlineEnd: inputPaddingHorizontal, + marginInlineStart: inputAffixPadding, + }, + }, + }, + }; +}; + +// ============================== Export ============================== +export default genComponentStyleHook( + 'InputNumber', + token => { + const inputNumberToken = initInputToken>(token); + return [ + genInputNumberStyles(inputNumberToken), + genAffixWrapperStyles(inputNumberToken), + // ===================================================== + // == Space Compact == + // ===================================================== + genCompactItemStyle(inputNumberToken), + ]; + }, + token => ({ + controlWidth: 90, + handleWidth: token.controlHeightSM - token.lineWidth * 2, + handleFontSize: token.fontSize / 2, + handleVisible: 'auto', + }), +); diff --git a/components/input-number/style/rtl.less b/components/input-number/style/rtl.less deleted file mode 100644 index 3903f92eb..000000000 --- a/components/input-number/style/rtl.less +++ /dev/null @@ -1,48 +0,0 @@ -@import '../../style/themes/index'; -@import '../../style/mixins/index'; -@import '../../input/style/mixin'; - -@input-number-prefix-cls: ~'@{ant-prefix}-input-number'; - -.@{input-number-prefix-cls} { - &-rtl { - direction: rtl; - } - - &-handler { - .@{input-number-prefix-cls}-rtl & { - border-right: @border-width-base @border-style-base @input-number-handler-border-color; - border-left: 0; - } - - &-wrap { - .@{input-number-prefix-cls}-rtl & { - right: auto; - left: 0; - } - - .@{input-number-prefix-cls}-rtl.@{input-number-prefix-cls}-borderless & { - border-right-width: 0; - } - } - - &-up { - .@{input-number-prefix-cls}-rtl & { - border-top-right-radius: 0; - } - } - - &-down { - .@{input-number-prefix-cls}-rtl & { - border-bottom-right-radius: 0; - } - } - } - - &-input { - .@{input-number-prefix-cls}-rtl & { - direction: ltr; - text-align: right; - } - } -} diff --git a/components/input-number/style/status.less b/components/input-number/style/status.less deleted file mode 100644 index f785da9ad..000000000 --- a/components/input-number/style/status.less +++ /dev/null @@ -1,29 +0,0 @@ -@import '../../input/style/mixin'; - -@input-number-prefix-cls: ~'@{ant-prefix}-input-number'; - -@input-number-wrapper-cls: @input-number-prefix-cls, ~'@{input-number-prefix-cls}-affix-wrapper'; - -each(@input-number-wrapper-cls, { - .@{value} { - &-status-error { - .status-color(@value, @error-color, @error-color, @input-bg, @error-color-hover, @error-color-outline); - .status-color-common(@input-number-prefix-cls, @error-color, @error-color, @input-bg, @error-color-hover, @error-color-outline) - } - - &-status-warning { - .status-color(@value, @warning-color, @warning-color, @input-bg, @warning-color-hover, @warning-color-outline); - .status-color-common(@input-number-prefix-cls, @warning-color, @warning-color, @input-bg, @warning-color-hover, @warning-color-outline) - } - } -}); - -.@{input-number-prefix-cls}-group-wrapper { - &-status-error { - .group-status-color(@input-number-prefix-cls, @error-color, @error-color); - } - - &-status-warning { - .group-status-color(@input-number-prefix-cls, @warning-color, @warning-color); - } -} diff --git a/components/style.ts b/components/style.ts index b5d103f53..0f7071e77 100644 --- a/components/style.ts +++ b/components/style.ts @@ -40,7 +40,7 @@ import './calendar/style'; import './table/style'; // import './progress/style'; // import './timeline/style'; -import './input-number/style'; +// import './input-number/style'; // import './transfer/style'; import './tree/style'; // import './upload/style'; diff --git a/components/theme/interface/components.ts b/components/theme/interface/components.ts index bf718a28e..2eb0ac51a 100644 --- a/components/theme/interface/components.ts +++ b/components/theme/interface/components.ts @@ -16,7 +16,7 @@ import type { ComponentToken as DropdownComponentToken } from '../../dropdown/st // import type { ComponentToken as DrawerComponentToken } from '../../drawer/style'; import type { ComponentToken as EmptyComponentToken } from '../../empty/style'; // import type { ComponentToken as ImageComponentToken } from '../../image/style'; -// import type { ComponentToken as InputNumberComponentToken } from '../../input-number/style'; +import type { ComponentToken as InputNumberComponentToken } from '../../input-number/style'; import type { ComponentToken as LayoutComponentToken } from '../../layout/style'; import type { ComponentToken as ListComponentToken } from '../../list/style'; import type { ComponentToken as MentionsComponentToken } from '../../mentions/style'; @@ -76,7 +76,7 @@ export interface ComponentTokenMap { Grid?: {}; // Image?: ImageComponentToken; Input?: {}; - // InputNumber?: InputNumberComponentToken; + InputNumber?: InputNumberComponentToken; Layout?: LayoutComponentToken; List?: ListComponentToken; Mentions?: MentionsComponentToken;