tdesign-mobile-vue
Version:
tdesign-mobile-vue
465 lines (461 loc) • 20.4 kB
JavaScript
/**
* tdesign v1.7.0
* (c) 2024 TDesign Group
* @license MIT
*/
import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
import _defineProperty from '@babel/runtime/helpers/defineProperty';
import { defineComponent, toRefs, inject, computed, ref, reactive, onMounted, onBeforeUnmount, watch, provide, createVNode, nextTick } from 'vue';
import _regeneratorRuntime from '@babel/runtime/regenerator';
import isArray from 'lodash/isArray';
import isNumber from 'lodash/isNumber';
import isString from 'lodash/isString';
import isBoolean from 'lodash/isBoolean';
import cloneDeep from 'lodash/cloneDeep';
import get from 'lodash/get';
import lodashSet from 'lodash/set';
import isNil from 'lodash/isNil';
import lodashTemplate from 'lodash/template';
import { ChevronRightIcon } from 'tdesign-icons-vue-next';
import { validate } from './form-model.js';
import props from './form-item-props.js';
import { FormInjectionKey, ValidateStatus, FormItemInjectionKey } from './const.js';
import config from '../config.js';
import { useTNodeJSX } from '../hooks/tnode.js';
import { usePrefixClass } from '../hooks/useClass.js';
import 'lodash/isObject';
import '../_chunks/dep-eb734424.js';
import 'lodash/isEmpty';
import 'lodash/isFunction';
import 'lodash/camelCase';
import 'lodash/kebabCase';
import '../hooks/render-tnode.js';
import '../config-provider/useConfig.js';
import '../config-provider/context.js';
import 'lodash/mergeWith';
import 'lodash/merge';
import '../_common/js/global-config/mobile/default-config.js';
import '../_common/js/global-config/mobile/locale/zh_CN.js';
import '../_chunks/dep-d5364bc4.js';
import '@babel/runtime/helpers/typeof';
import 'dayjs';
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var prefix = config.prefix;
var _FormItem = defineComponent({
name: "".concat(prefix, "-form-item"),
props: props,
setup: function setup(props2, _ref) {
var slots = _ref.slots;
var renderTNodeJSX = useTNodeJSX();
var formClass = usePrefixClass("form");
var formItemClass = usePrefixClass("form__item");
var _toRefs = toRefs(props2),
name = _toRefs.name;
var form = inject(FormInjectionKey, void 0);
var extraNode = computed(function () {
var _list$;
var list = errorList.value;
if (showErrorMessage.value && (_list$ = list[0]) !== null && _list$ !== void 0 && _list$.message) {
var _list$2;
return (_list$2 = list[0]) === null || _list$2 === void 0 ? void 0 : _list$2.message;
}
if (successList.value.length) {
return successList.value[0].message;
}
return null;
});
var formItemClasses = computed(function () {
return [formItemClass.value, "".concat(formItemClass.value, "--bordered"), "".concat(formClass.value, "--").concat(labelAlign.value), "".concat(formClass.value, "-item__").concat(props2.name)];
});
var needRequiredMark = computed(function () {
var _props2$requiredMark;
var requiredMark = (_props2$requiredMark = props2.requiredMark) !== null && _props2$requiredMark !== void 0 ? _props2$requiredMark : form === null || form === void 0 ? void 0 : form.requiredMark;
var isRequired = innerRules.value.filter(function (rule) {
return rule.required;
}).length > 0;
return requiredMark !== null && requiredMark !== void 0 ? requiredMark : isRequired;
});
var hasLabel = computed(function () {
return slots.label || props2.label;
});
var hasColon = computed(function () {
return !!(form !== null && form !== void 0 && form.colon && hasLabel.value);
});
var labelClass = "".concat(formClass.value, "__label");
var labelAlign = computed(function () {
return isNil(props2.labelAlign) ? form === null || form === void 0 ? void 0 : form.labelAlign : props2.labelAlign;
});
var labelWidth = computed(function () {
return isNil(props2.labelWidth) ? form === null || form === void 0 ? void 0 : form.labelWidth : props2.labelWidth;
});
var contentAlign = computed(function () {
return isNil(props2.contentAlign) ? form === null || form === void 0 ? void 0 : form.contentAlign : props2.contentAlign;
});
var labelClasses = computed(function () {
return [labelClass, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(labelClass, "--required"), needRequiredMark.value), "".concat(labelClass, "--colon"), hasColon.value), "".concat(labelClass, "--top"), hasLabel.value && (labelAlign.value === "top" || !labelWidth.value)), "".concat(labelClass, "--left"), labelAlign.value === "left" && labelWidth.value), "".concat(labelClass, "--right"), labelAlign.value === "right" && labelWidth.value)];
});
var labelStyle = computed(function () {
if (labelWidth.value && labelAlign.value !== "top") {
return isNumber(labelWidth.value) ? {
width: "".concat(labelWidth.value, "px")
} : {
width: labelWidth.value
};
}
return {};
});
var freeShowErrorMessage = ref(false);
var showErrorMessage = computed(function () {
if (isBoolean(freeShowErrorMessage.value)) return freeShowErrorMessage.value;
if (isBoolean(props2.showErrorMessage)) return props2.showErrorMessage;
return form === null || form === void 0 ? void 0 : form.showErrorMessage;
});
var errorClasses = computed(function () {
if (!showErrorMessage.value) return "";
if (!errorList.value.length) return "";
var type = errorList.value[0].type || "error";
return type === "error" ? "".concat(formItemClass.value, "--error") : "".concat(formItemClass.value, "--warning");
});
var contentClasses = computed(function () {
return ["".concat(formClass.value, "__controls"), errorClasses.value];
});
var contentSlotClasses = computed(function () {
return ["".concat(formClass.value, "__controls-content"), "".concat(formClass.value, "__controls--").concat(contentAlign.value)];
});
var contentStyle = computed(function () {
var contentStyle2 = {};
if (labelWidth.value && labelAlign.value !== "top") {
if (isNumber(labelWidth.value)) {
contentStyle2 = {
marginLeft: "".concat(labelWidth.value, "px")
};
} else {
contentStyle2 = {
marginLeft: labelWidth.value
};
}
}
return contentStyle2;
});
var errorList = ref([]);
var successList = ref([]);
var verifyStatus = ref(ValidateStatus.TO_BE_VALIDATED);
var resetValidating = ref(false);
var needResetField = ref(false);
var resetHandler = function resetHandler() {
needResetField.value = false;
errorList.value = [];
successList.value = [];
verifyStatus.value = ValidateStatus.TO_BE_VALIDATED;
};
var getEmptyValue = function getEmptyValue() {
var type = Object.prototype.toString.call(get(form === null || form === void 0 ? void 0 : form.data, "".concat(props2.name)));
var emptyValue;
if (type === "[object String]") {
emptyValue = "";
}
if (type === "[object Array]") {
emptyValue = [];
}
if (type === "[object Object]") {
emptyValue = {};
}
return emptyValue;
};
var resetField = /*#__PURE__*/function () {
var _ref3 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
var resetType,
_args = arguments;
return _regeneratorRuntime.wrap(function _callee$(_context) {
while (1) switch (_context.prev = _context.next) {
case 0:
resetType = _args.length > 0 && _args[0] !== undefined ? _args[0] : form === null || form === void 0 ? void 0 : form.resetType;
if (props2.name) {
_context.next = 3;
break;
}
return _context.abrupt("return", null);
case 3:
if (resetType === "empty") {
lodashSet(form === null || form === void 0 ? void 0 : form.data, props2.name, getEmptyValue());
} else if (resetType === "initial") {
lodashSet(form === null || form === void 0 ? void 0 : form.data, props2.name, initialValue.value);
}
_context.next = 6;
return nextTick();
case 6:
if (resetValidating.value) {
needResetField.value = true;
} else {
resetHandler();
}
case 7:
case "end":
return _context.stop();
}
}, _callee);
}));
return function resetField() {
return _ref3.apply(this, arguments);
};
}();
var errorMessages = computed(function () {
return (form === null || form === void 0 ? void 0 : form.errorMessage) || {};
});
var innerRules = computed(function () {
var _props2$rules;
if ((_props2$rules = props2.rules) !== null && _props2$rules !== void 0 && _props2$rules.length) return props2.rules;
if (!props2.name) return [];
var index = "".concat(props2.name).lastIndexOf(".") || -1;
var pRuleName = "".concat(props2.name).slice(index + 1);
return get(form === null || form === void 0 ? void 0 : form.rules, props2.name) || get(form === null || form === void 0 ? void 0 : form.rules, pRuleName) || [];
});
var analysisValidateResult = /*#__PURE__*/function () {
var _ref4 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2(trigger) {
var _result$rules;
var result;
return _regeneratorRuntime.wrap(function _callee2$(_context2) {
while (1) switch (_context2.prev = _context2.next) {
case 0:
result = {
successList: [],
errorList: [],
rules: [],
resultList: [],
allowSetValue: false
};
result.rules = trigger === "all" ? innerRules.value : innerRules.value.filter(function (item) {
return (item.trigger || "change") === trigger;
});
if (!(innerRules.value.length && !((_result$rules = result.rules) !== null && _result$rules !== void 0 && _result$rules.length))) {
_context2.next = 4;
break;
}
return _context2.abrupt("return", result);
case 4:
result.allowSetValue = true;
_context2.next = 7;
return validate(value.value, result.rules);
case 7:
result.resultList = _context2.sent;
result.errorList = result.resultList.filter(function (item) {
return item.result !== true;
}).map(function (item) {
Object.keys(item).forEach(function (key) {
if (!item.message && errorMessages.value[key]) {
var compiled = lodashTemplate(errorMessages.value[key]);
var name2 = isString(props2.label) ? props2.label : props2.name;
item.message = compiled({
name: name2,
validate: item[key]
});
}
});
return item;
});
result.successList = result.resultList.filter(function (item) {
return item.result === true && item.message && item.type === "success";
});
return _context2.abrupt("return", result);
case 11:
case "end":
return _context2.stop();
}
}, _callee2);
}));
return function analysisValidateResult(_x) {
return _ref4.apply(this, arguments);
};
}();
var validateHandler = /*#__PURE__*/function () {
var _ref5 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee3(trigger, showErrorMessage2) {
var _yield$analysisValida, innerSuccessList, innerErrorList, rules, resultList, allowSetValue;
return _regeneratorRuntime.wrap(function _callee3$(_context3) {
while (1) switch (_context3.prev = _context3.next) {
case 0:
resetValidating.value = true;
freeShowErrorMessage.value = showErrorMessage2;
_context3.next = 4;
return analysisValidateResult(trigger);
case 4:
_yield$analysisValida = _context3.sent;
innerSuccessList = _yield$analysisValida.successList;
innerErrorList = _yield$analysisValida.errorList;
rules = _yield$analysisValida.rules;
resultList = _yield$analysisValida.resultList;
allowSetValue = _yield$analysisValida.allowSetValue;
if (allowSetValue) {
successList.value = innerSuccessList || [];
errorList.value = innerErrorList || [];
}
if (rules.length) {
verifyStatus.value = innerErrorList !== null && innerErrorList !== void 0 && innerErrorList.length ? ValidateStatus.FAIL : ValidateStatus.SUCCESS;
}
if (needResetField.value) {
resetHandler();
}
resetValidating.value = false;
return _context3.abrupt("return", _defineProperty({}, "".concat(name.value), (innerErrorList === null || innerErrorList === void 0 ? void 0 : innerErrorList.length) === 0 ? true : resultList));
case 15:
case "end":
return _context3.stop();
}
}, _callee3);
}));
return function validateHandler(_x2, _x3) {
return _ref5.apply(this, arguments);
};
}();
var validateOnly = /*#__PURE__*/function () {
var _ref7 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee4(trigger) {
var _yield$analysisValida2, innerErrorList, resultList;
return _regeneratorRuntime.wrap(function _callee4$(_context4) {
while (1) switch (_context4.prev = _context4.next) {
case 0:
_context4.next = 2;
return analysisValidateResult(trigger);
case 2:
_yield$analysisValida2 = _context4.sent;
innerErrorList = _yield$analysisValida2.errorList;
resultList = _yield$analysisValida2.resultList;
return _context4.abrupt("return", _defineProperty({}, props2.name, innerErrorList.length === 0 ? true : resultList));
case 6:
case "end":
return _context4.stop();
}
}, _callee4);
}));
return function validateOnly(_x4) {
return _ref7.apply(this, arguments);
};
}();
var setValidateMessage = function setValidateMessage(validateMessage) {
if (!validateMessage && !isArray(validateMessage)) return;
if (validateMessage.length === 0) {
errorList.value = [];
verifyStatus.value = ValidateStatus.SUCCESS;
}
errorList.value = validateMessage.map(function (item) {
return _objectSpread(_objectSpread({}, item), {}, {
result: false
});
});
verifyStatus.value = ValidateStatus.FAIL;
};
var value = computed(function () {
return (form === null || form === void 0 ? void 0 : form.data) && get(form === null || form === void 0 ? void 0 : form.data, "".concat(name.value));
});
var initialValue = ref(void 0);
var context = reactive({
name: name,
resetHandler: resetHandler,
resetField: resetField,
validate: validateHandler,
validateOnly: validateOnly,
setValidateMessage: setValidateMessage
});
onMounted(function () {
initialValue.value = cloneDeep(value.value);
form === null || form === void 0 || form.children.push(context);
});
onBeforeUnmount(function () {
if (form) form.children = form === null || form === void 0 ? void 0 : form.children.filter(function (ctx) {
return ctx !== context;
});
});
watch(value, /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee5() {
return _regeneratorRuntime.wrap(function _callee5$(_context5) {
while (1) switch (_context5.prev = _context5.next) {
case 0:
_context5.next = 2;
return validateHandler("change");
case 2:
case "end":
return _context5.stop();
}
}, _callee5);
})), {
deep: true
});
watch(function () {
return [props2.name, JSON.stringify(props2.rules)].join(",");
}, function () {
validateHandler("change");
});
var handleBlur = /*#__PURE__*/function () {
var _ref10 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee6() {
return _regeneratorRuntime.wrap(function _callee6$(_context6) {
while (1) switch (_context6.prev = _context6.next) {
case 0:
_context6.next = 2;
return validateHandler("blur");
case 2:
case "end":
return _context6.stop();
}
}, _callee6);
}));
return function handleBlur() {
return _ref10.apply(this, arguments);
};
}();
provide(FormItemInjectionKey, {
handleBlur: handleBlur
});
return function () {
var renderRightIconContent = function renderRightIconContent() {
if (!props2.arrow) {
return null;
}
return createVNode(ChevronRightIcon, {
"size": "24px",
"style": {
color: "rgba(0, 0, 0, .4)"
}
}, null);
};
var renderLabelContent = function renderLabelContent() {
if (Number(labelWidth.value) === 0) {
return null;
}
return renderTNodeJSX("label");
};
var renderHelpNode = function renderHelpNode() {
var helpNode = renderTNodeJSX("help");
if (!helpNode) {
return null;
}
return createVNode("div", {
"class": ["".concat(formItemClass.value, "-help"), "".concat(formClass.value, "__controls--").concat(contentAlign.value)]
}, [helpNode]);
};
var renderExtraNode = function renderExtraNode() {
if (!extraNode.value) {
return null;
}
return createVNode("div", {
"class": ["".concat(formItemClass.value, "-extra"), "".concat(formClass.value, "__controls--").concat(contentAlign.value)]
}, [extraNode.value]);
};
return createVNode("div", {
"class": [].concat(_toConsumableArray(formItemClasses.value), [renderHelpNode() ? "".concat(formClass.value, "__item-with-help") : ""])
}, [createVNode("div", {
"class": ["".concat(formItemClass.value, "-wrap"), "".concat(formItemClass.value, "--").concat(labelAlign.value)]
}, [createVNode("div", {
"class": labelClasses.value,
"style": labelStyle.value
}, [createVNode("label", {
"for": props2.for
}, [renderLabelContent()])]), createVNode("div", {
"class": contentClasses.value,
"style": contentStyle.value
}, [createVNode("div", {
"class": contentSlotClasses.value
}, [renderTNodeJSX("default")]), renderHelpNode(), renderExtraNode()])]), renderRightIconContent()]);
};
}
});
export { _FormItem as default };
//# sourceMappingURL=form-item.js.map