ant-design-vue
Version:
An enterprise-class UI design language and Vue-based implementation
221 lines (195 loc) • 9.08 kB
JavaScript
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _extends from "@babel/runtime/helpers/esm/extends";
import { resolveDirective as _resolveDirective, createVNode as _createVNode } from "vue";
var __rest = this && this.__rest || function (s, e) {
var t = {};
for (var p in s) {
if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
}
if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
}
return t;
};
import { watch, defineComponent, nextTick, onMounted, ref } from 'vue';
import classNames from '../_util/classNames';
import UpOutlined from "@ant-design/icons-vue/es/icons/UpOutlined";
import DownOutlined from "@ant-design/icons-vue/es/icons/DownOutlined";
import VcInputNumber, { inputNumberProps as baseInputNumberProps } from './src/InputNumber';
import { useInjectFormItemContext } from '../form/FormItemContext';
import useConfigInject from '../_util/hooks/useConfigInject';
import { cloneElement } from '../_util/vnode';
import omit from '../_util/omit';
import PropTypes from '../_util/vue-types';
import isValidValue from '../_util/isValidValue';
var baseProps = baseInputNumberProps();
export var inputNumberProps = function inputNumberProps() {
return _extends(_extends({}, baseProps), {
size: {
type: String
},
bordered: {
type: Boolean,
default: true
},
placeholder: String,
name: String,
id: String,
type: String,
addonBefore: PropTypes.any,
addonAfter: PropTypes.any,
prefix: PropTypes.any,
'update:value': baseProps.onChange,
valueModifiers: Object
});
};
var InputNumber = defineComponent({
name: 'AInputNumber',
inheritAttrs: false,
props: inputNumberProps(),
// emits: ['focus', 'blur', 'change', 'input', 'update:value'],
slots: ['addonBefore', 'addonAfter', 'prefix'],
setup: function setup(props, _ref) {
var emit = _ref.emit,
expose = _ref.expose,
attrs = _ref.attrs,
slots = _ref.slots;
var formItemContext = useInjectFormItemContext();
var _useConfigInject = useConfigInject('input-number', props),
prefixCls = _useConfigInject.prefixCls,
size = _useConfigInject.size,
direction = _useConfigInject.direction;
var mergedValue = ref(props.value === undefined ? props.defaultValue : props.value);
var focused = ref(false);
watch(function () {
return props.value;
}, function () {
mergedValue.value = props.value;
});
var inputNumberRef = ref(null);
var focus = function focus() {
var _a;
(_a = inputNumberRef.value) === null || _a === void 0 ? void 0 : _a.focus();
};
var blur = function blur() {
var _a;
(_a = inputNumberRef.value) === null || _a === void 0 ? void 0 : _a.blur();
};
expose({
focus: focus,
blur: blur
});
var handleChange = function handleChange(val) {
if (props.value === undefined) {
mergedValue.value = val;
}
emit('update:value', val);
emit('change', val);
formItemContext.onFieldChange();
};
var handleBlur = function handleBlur(e) {
focused.value = false;
emit('blur', e);
formItemContext.onFieldBlur();
};
var handleFocus = function handleFocus(e) {
focused.value = true;
emit('focus', e);
};
onMounted(function () {
nextTick(function () {
if (process.env.NODE_ENV === 'test') {
if (props.autofocus && !props.disabled) {
focus();
}
}
});
});
return function () {
var _classNames;
var _a, _b, _c;
var _d = _extends(_extends({}, attrs), props),
className = _d.class,
bordered = _d.bordered,
readonly = _d.readonly,
style = _d.style,
_d$addonBefore = _d.addonBefore,
addonBefore = _d$addonBefore === void 0 ? (_a = slots.addonBefore) === null || _a === void 0 ? void 0 : _a.call(slots) : _d$addonBefore,
_d$addonAfter = _d.addonAfter,
addonAfter = _d$addonAfter === void 0 ? (_b = slots.addonAfter) === null || _b === void 0 ? void 0 : _b.call(slots) : _d$addonAfter,
_d$prefix = _d.prefix,
prefix = _d$prefix === void 0 ? (_c = slots.prefix) === null || _c === void 0 ? void 0 : _c.call(slots) : _d$prefix,
_d$valueModifiers = _d.valueModifiers,
valueModifiers = _d$valueModifiers === void 0 ? {} : _d$valueModifiers,
others = __rest(_d, ["class", "bordered", "readonly", "style", "addonBefore", "addonAfter", "prefix", "valueModifiers"]);
var preCls = prefixCls.value;
var mergeSize = size.value;
var inputNumberClass = classNames((_classNames = {}, _defineProperty(_classNames, "".concat(preCls, "-lg"), mergeSize === 'large'), _defineProperty(_classNames, "".concat(preCls, "-sm"), mergeSize === 'small'), _defineProperty(_classNames, "".concat(preCls, "-rtl"), direction.value === 'rtl'), _defineProperty(_classNames, "".concat(preCls, "-readonly"), readonly), _defineProperty(_classNames, "".concat(preCls, "-borderless"), !bordered), _classNames), className);
var element = _createVNode(VcInputNumber, _objectSpread(_objectSpread({}, omit(others, ['size', 'defaultValue'])), {}, {
"ref": inputNumberRef,
"lazy": !!valueModifiers.lazy,
"value": mergedValue.value,
"class": inputNumberClass,
"prefixCls": preCls,
"readonly": readonly,
"onChange": handleChange,
"onBlur": handleBlur,
"onFocus": handleFocus
}), {
upHandler: function upHandler() {
return _createVNode(UpOutlined, {
"class": "".concat(preCls, "-handler-up-inner")
}, null);
},
downHandler: function downHandler() {
return _createVNode(DownOutlined, {
"class": "".concat(preCls, "-handler-down-inner")
}, null);
}
});
var hasAddon = isValidValue(addonBefore) || isValidValue(addonAfter);
if (isValidValue(prefix)) {
var _classNames2;
var affixWrapperCls = classNames("".concat(preCls, "-affix-wrapper"), (_classNames2 = {}, _defineProperty(_classNames2, "".concat(preCls, "-affix-wrapper-focused"), focused.value), _defineProperty(_classNames2, "".concat(preCls, "-affix-wrapper-disabled"), props.disabled), _defineProperty(_classNames2, "".concat(preCls, "-affix-wrapper-sm"), size.value === 'small'), _defineProperty(_classNames2, "".concat(preCls, "-affix-wrapper-lg"), size.value === 'large'), _defineProperty(_classNames2, "".concat(preCls, "-affix-wrapper-rtl"), direction.value === 'rtl'), _defineProperty(_classNames2, "".concat(preCls, "-affix-wrapper-readonly"), readonly), _defineProperty(_classNames2, "".concat(preCls, "-affix-wrapper-borderless"), !bordered), _defineProperty(_classNames2, "".concat(className), !hasAddon && className), _classNames2));
element = _createVNode("div", {
"class": affixWrapperCls,
"style": style,
"onMouseup": function onMouseup() {
return inputNumberRef.value.focus();
}
}, [_createVNode("span", {
"class": "".concat(preCls, "-prefix")
}, [prefix]), element]);
}
if (hasAddon) {
var _classNames4;
var wrapperClassName = "".concat(preCls, "-group");
var addonClassName = "".concat(wrapperClassName, "-addon");
var addonBeforeNode = addonBefore ? _createVNode("div", {
"class": addonClassName
}, [addonBefore]) : null;
var addonAfterNode = addonAfter ? _createVNode("div", {
"class": addonClassName
}, [addonAfter]) : null;
var mergedWrapperClassName = classNames("".concat(preCls, "-wrapper"), wrapperClassName, _defineProperty({}, "".concat(wrapperClassName, "-rtl"), direction.value === 'rtl'));
var mergedGroupClassName = classNames("".concat(preCls, "-group-wrapper"), (_classNames4 = {}, _defineProperty(_classNames4, "".concat(preCls, "-group-wrapper-sm"), mergeSize === 'small'), _defineProperty(_classNames4, "".concat(preCls, "-group-wrapper-lg"), mergeSize === 'large'), _defineProperty(_classNames4, "".concat(preCls, "-group-wrapper-rtl"), direction.value === 'rtl'), _classNames4), className);
element = _createVNode("div", {
"class": mergedGroupClassName,
"style": style
}, [_createVNode("div", {
"class": mergedWrapperClassName
}, [addonBeforeNode, element, addonAfterNode])]);
}
return cloneElement(element, {
style: style
});
};
}
});
export default _extends(InputNumber, {
install: function install(app) {
app.component(InputNumber.name, InputNumber);
return app;
}
});