xdesign-vue-next
Version:
XDesign Component for vue-next
242 lines (235 loc) • 12.6 kB
JavaScript
/**
* xdesign v1.0.6
* (c) 2023 xdesign
* @license MIT
*/
import { _ as __unplugin_components_6 } from '../_chunks/dep-fb0628ce.js';
import { _ as __unplugin_components_3 } from '../_chunks/dep-eade0dcf.js';
import { openBlock, createElementBlock, createElementVNode, defineComponent, computed, createVNode, withDirectives, mergeProps, vShow } from 'vue';
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
import _defineProperty from '@babel/runtime/helpers/defineProperty';
import props from './props.js';
import { useFormDisabled } from '../form/hooks.js';
import { usePrefixClass, useCommonClassName } from '../hooks/useConfig.js';
import { useTNodeJSX } from '../hooks/tnode.js';
import useInput from './useInput.js';
import useInputEventHandler from './useInputEventHandler.js';
import useInputWidth from './useInputWidth.js';
import isUndefined from 'lodash/isUndefined';
import { useConfig } from '../config-provider/useConfig.js';
import 'lodash/isFunction';
import 'lodash/camelCase';
import 'lodash/kebabCase';
import '../utils/render-tnode.js';
import 'lodash/isEmpty';
import 'lodash/isString';
import 'lodash/isObject';
import '@babel/runtime/helpers/slicedToArray';
import '../form/const.js';
import '../hooks/useVModel.js';
import './useLengthLimit.js';
import '../_common/js/log/log.js';
import '../_common/js/utils/helper.js';
import '@babel/runtime/helpers/toConsumableArray';
import 'lodash/isNull';
import 'lodash/isNumber';
import 'lodash/isArray';
import 'lodash/cloneDeep';
import '../config-provider/context.js';
import 'lodash/mergeWith';
import 'lodash/merge';
import '../_common/js/global-config/default-config.js';
import '../_common/js/global-config/locale/en_US.js';
import '../_chunks/dep-3a1cce9f.js';
const _hoisted_1 = {
class: "x-icon",
viewBox: "0 0 24 24",
width: "1.1em",
height: "1.1em"
};
const _hoisted_2 = /*#__PURE__*/createElementVNode("path", {
fill: "currentColor",
d: "M17.883 19.297A10.949 10.949 0 0 1 12 21c-5.392 0-9.878-3.88-10.818-9A10.982 10.982 0 0 1 4.52 5.935L1.394 2.808l1.414-1.414l19.799 19.798l-1.414 1.415l-3.31-3.31ZM5.936 7.35A8.965 8.965 0 0 0 3.223 12a9.005 9.005 0 0 0 13.201 5.838l-2.028-2.028A4.5 4.5 0 0 1 8.19 9.604L5.936 7.35Zm6.978 6.978l-3.242-3.241a2.5 2.5 0 0 0 3.241 3.241Zm7.893 2.265l-1.431-1.431A8.935 8.935 0 0 0 20.778 12A9.005 9.005 0 0 0 9.552 5.338L7.974 3.76C9.221 3.27 10.58 3 12 3c5.392 0 9.878 3.88 10.819 9a10.947 10.947 0 0 1-2.012 4.593Zm-9.084-9.084a4.5 4.5 0 0 1 4.769 4.769l-4.77-4.77Z"
}, null, -1 /* HOISTED */);
const _hoisted_3 = [
_hoisted_2
];
function render(_ctx, _cache) {
return (openBlock(), createElementBlock("svg", _hoisted_1, _hoisted_3))
}
var __unplugin_components_0 = { name: 'ri-eye-off-line', render };
/* vite-plugin-components disabled */
var _excluded = ["isHover", "tStatus", "inputRef", "renderType", "showClear", "focused", "inputValue", "isComposition", "compositionValue", "innerValue", "limitNumber"];
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
function getValidAttrs(obj) {
var newObj = {};
Object.keys(obj).forEach(function (key) {
if (!isUndefined(obj[key])) {
newObj[key] = obj[key];
}
});
return newObj;
}
var _Input = defineComponent({
name: "XInput",
props: _objectSpread(_objectSpread({}, props), {}, {
showInput: {
type: Boolean,
"default": true
},
keepWrapperWidth: {
type: Boolean,
"default": false
},
allowTriggerBlur: {
type: Boolean,
"default": true
}
}),
setup: function setup(props2, _ref) {
var expose = _ref.expose;
var _useConfig = useConfig("input"),
globalConfig = _useConfig.globalConfig;
var disabled = useFormDisabled();
var COMPONENT_NAME = usePrefixClass("input");
var INPUT_WRAP_CLASS = usePrefixClass("input__wrap");
var INPUT_TIPS_CLASS = usePrefixClass("input__tips");
var _useCommonClassName = useCommonClassName(),
STATUS = _useCommonClassName.STATUS,
SIZE = _useCommonClassName.SIZE;
var classPrefix = usePrefixClass();
var renderTNodeJSX = useTNodeJSX();
var _useInput = useInput(props2, expose),
isHover = _useInput.isHover,
tStatus = _useInput.tStatus,
inputRef = _useInput.inputRef,
renderType = _useInput.renderType,
showClear = _useInput.showClear,
focused = _useInput.focused,
inputValue = _useInput.inputValue,
isComposition = _useInput.isComposition,
compositionValue = _useInput.compositionValue,
innerValue = _useInput.innerValue,
limitNumber = _useInput.limitNumber,
inputHandle = _objectWithoutProperties(_useInput, _excluded);
var _useInputWidth = useInputWidth(props2, inputRef, innerValue),
inputPreRef = _useInputWidth.inputPreRef;
var inputEventHandler = useInputEventHandler(props2, isHover);
var tPlaceholder = computed(function () {
var _props2$placeholder;
return (_props2$placeholder = props2.placeholder) !== null && _props2$placeholder !== void 0 ? _props2$placeholder : globalConfig.value.placeholder;
});
var inputAttrs = computed(function () {
var _props2$autocomplete;
return getValidAttrs({
autofocus: props2.autofocus,
disabled: disabled.value,
readonly: props2.readonly,
placeholder: tPlaceholder.value,
maxlength: !props2.allowInputOverMax && props2.maxlength || void 0,
name: props2.name || void 0,
type: renderType.value,
autocomplete: (_props2$autocomplete = props2.autocomplete) !== null && _props2$autocomplete !== void 0 ? _props2$autocomplete : globalConfig.value.autocomplete || void 0,
unselectable: props2.readonly ? "on" : void 0
});
});
var wrapClasses = computed(function () {
return [INPUT_WRAP_CLASS.value, _defineProperty({}, "".concat(COMPONENT_NAME.value, "--auto-width"), props2.autoWidth && !props2.keepWrapperWidth)];
});
var inputEvents = getValidAttrs({
onFocus: function onFocus(e) {
return inputHandle.emitFocus(e);
},
onBlur: inputHandle.formatAndEmitBlur,
onKeydown: inputEventHandler.handleKeydown,
onKeyup: inputEventHandler.handleKeyUp,
onKeypress: inputEventHandler.handleKeypress,
onPaste: inputEventHandler.onHandlePaste,
onCompositionend: inputHandle.onHandleCompositionend,
onCompositionstart: inputHandle.onHandleCompositionstart
});
return function () {
var _ref4, _compositionValue$val, _inputValue$value;
var prefixIcon = renderTNodeJSX("prefixIcon");
var suffixIcon = renderTNodeJSX("suffixIcon");
var passwordIcon = renderTNodeJSX("passwordIcon");
var label = renderTNodeJSX("label", {
silent: true
});
var suffix = renderTNodeJSX("suffix");
var limitNode = limitNumber.value && props2.showLimitNumber ? createVNode("div", {
"class": ["".concat(classPrefix.value, "-input__limit-number"), _defineProperty({}, "".concat(classPrefix.value, "-is-disabled"), disabled.value)]
}, [limitNumber.value]) : null;
var labelContent = label ? createVNode("div", {
"class": "".concat(COMPONENT_NAME.value, "__prefix")
}, [label]) : null;
var suffixContent = suffix || limitNode ? createVNode("div", {
"class": "".concat(COMPONENT_NAME.value, "__suffix")
}, [suffix, limitNode]) : null;
if (props2.type === "password") {
if (renderType.value === "password") {
suffixIcon = createVNode(__unplugin_components_0, {
"class": "".concat(COMPONENT_NAME.value, "__suffix-clear"),
"onClick": inputHandle.emitPassword
}, null);
} else if (renderType.value === "text") {
suffixIcon = createVNode(__unplugin_components_3, {
"class": "".concat(COMPONENT_NAME.value, "__suffix-clear"),
"onClick": inputHandle.emitPassword
}, null);
}
}
if (showClear.value) {
if (props2.type === "password") {
passwordIcon = createVNode(__unplugin_components_6, {
"ref": inputHandle.clearIconRef,
"class": "".concat(COMPONENT_NAME.value, "__suffix-clear"),
"onClick": inputHandle.emitClear,
"onMousedown": inputHandle.onClearIconMousedown
}, null);
} else {
suffixIcon = createVNode(__unplugin_components_6, {
"ref": inputHandle.clearIconRef,
"class": "".concat(COMPONENT_NAME.value, "__suffix-clear"),
"onClick": inputHandle.emitClear,
"onMousedown": inputHandle.onClearIconMousedown
}, null);
}
}
var classes = [COMPONENT_NAME.value, props2.inputClass, (_ref4 = {}, _defineProperty(_ref4, SIZE.value[props2.size], props2.size !== "medium"), _defineProperty(_ref4, STATUS.value.disabled, disabled.value), _defineProperty(_ref4, STATUS.value.focused, focused.value), _defineProperty(_ref4, "".concat(classPrefix.value, "-is-").concat(tStatus.value), tStatus.value && tStatus.value !== "default"), _defineProperty(_ref4, "".concat(classPrefix.value, "-align-").concat(props2.align), props2.align !== "left"), _defineProperty(_ref4, "".concat(classPrefix.value, "-is-readonly"), props2.readonly), _defineProperty(_ref4, "".concat(COMPONENT_NAME.value, "--prefix"), prefixIcon || labelContent), _defineProperty(_ref4, "".concat(COMPONENT_NAME.value, "--suffix"), suffixIcon || suffixContent), _defineProperty(_ref4, "".concat(COMPONENT_NAME.value, "--focused"), focused.value), _ref4)];
var tips = renderTNodeJSX("tips");
var tipsClasses = [INPUT_TIPS_CLASS.value, "".concat(classPrefix.value, "-tips"), "".concat(classPrefix.value, "-is-").concat(tStatus.value || "default")];
return withDirectives(createVNode("div", {
"class": wrapClasses.value
}, [createVNode("div", {
"class": classes,
"onClick": inputHandle.onRootClick,
"onMouseenter": inputEventHandler.onInputMouseenter,
"onMouseleave": inputEventHandler.onInputMouseleave,
"onWheel": inputEventHandler.onHandleMousewheel
}, [prefixIcon ? createVNode("span", {
"class": ["".concat(COMPONENT_NAME.value, "__prefix"), "".concat(COMPONENT_NAME.value, "__prefix-icon")]
}, [prefixIcon]) : null, labelContent, props2.showInput && createVNode("input", mergeProps({
"class": "".concat(COMPONENT_NAME.value, "__inner")
}, inputAttrs.value, inputEvents, {
"ref": inputRef,
"value": isComposition.value ? (_compositionValue$val = compositionValue.value) !== null && _compositionValue$val !== void 0 ? _compositionValue$val : "" : (_inputValue$value = inputValue.value) !== null && _inputValue$value !== void 0 ? _inputValue$value : "",
"onInput": function onInput(e) {
return inputHandle.handleInput(e);
}
}), null), props2.autoWidth && createVNode("span", {
"ref": inputPreRef,
"class": "".concat(classPrefix.value, "-input__input-pre")
}, [innerValue.value || tPlaceholder.value]), suffixContent, passwordIcon ? createVNode("span", {
"class": ["".concat(COMPONENT_NAME.value, "__suffix"), "".concat(COMPONENT_NAME.value, "__suffix-icon"), "".concat(COMPONENT_NAME.value, "__clear")]
}, [passwordIcon]) : null, suffixIcon ? createVNode("span", {
"class": ["".concat(COMPONENT_NAME.value, "__suffix"), "".concat(COMPONENT_NAME.value, "__suffix-icon"), _defineProperty({}, "".concat(COMPONENT_NAME.value, "__clear"), showClear.value)]
}, [suffixIcon]) : null]), tips && createVNode("div", {
"class": tipsClasses
}, [tips])]), [[vShow, props2.type !== "hidden"]]);
};
}
});
export { _Input as default };
//# sourceMappingURL=input.js.map