xdesign-vue-next
Version:
XDesign Component for vue-next
341 lines (337 loc) • 14 kB
JavaScript
/**
* xdesign v1.0.6
* (c) 2023 xdesign
* @license MIT
*/
import { _ as _asyncToGenerator, r as regenerator } from '../_chunks/dep-2cefabe0.mjs';
import { _ as _slicedToArray } from '../_chunks/dep-32d4c595.mjs';
import { _ as _defineProperty } from '../_chunks/dep-f9e836af.mjs';
import { defineComponent, toRefs, provide, ref, reactive, computed, createVNode } from 'vue';
import { i as isEmpty_1 } from '../_chunks/dep-9d7ebc32.mjs';
import { i as isBoolean_1 } from '../_chunks/dep-b9fae426.mjs';
import { i as isArray_1 } from '../_chunks/dep-a95026f2.mjs';
import { i as isFunction_1 } from '../_chunks/dep-1cc1c24f.mjs';
import { requestSubmit } from '../utils/dom.mjs';
import { getFormItemClassName } from './form-item.mjs';
import props from './props.mjs';
import { FormInjectionKey, useCLASSNAMES } from './const.mjs';
import '../hooks/index.mjs';
import { useTNodeJSX } from '../hooks/tnode.mjs';
import { usePrefixClass } from '../hooks/useConfig.mjs';
import '../_chunks/dep-82805301.mjs';
import '../_chunks/dep-10a947a6.mjs';
import '../_chunks/dep-89b966f4.mjs';
import '../_chunks/dep-69963a8c.mjs';
import '../_chunks/dep-6e7b37b8.mjs';
import '../_chunks/dep-b75d8d74.mjs';
import '../_chunks/dep-e1ab85c5.mjs';
import '../_chunks/dep-addc2a84.mjs';
import '../_chunks/dep-5f0e0453.mjs';
import '../_chunks/dep-db381ece.mjs';
import '../_chunks/dep-5755c21c.mjs';
import '../_chunks/dep-6ad18815.mjs';
import '../_chunks/dep-8d1c9a23.mjs';
import '../_chunks/dep-dafada74.mjs';
import '../_chunks/dep-068e912d.mjs';
import '../_chunks/dep-0e832fc7.mjs';
import '../_chunks/dep-11fa9c2c.mjs';
import '../utils/easing.mjs';
import '../_chunks/dep-7b4b2cfc.mjs';
import '../_chunks/dep-07473300.mjs';
import '../_chunks/dep-8b0014b3.mjs';
import '../_chunks/dep-23f91684.mjs';
import '../_chunks/dep-91ac8f71.mjs';
import '../_chunks/dep-c4737535.mjs';
import '../_chunks/dep-81c83986.mjs';
import '../_chunks/dep-6aa0223b.mjs';
import '../_chunks/dep-7f239c43.mjs';
import '../_chunks/dep-6f04869e.mjs';
import '../_chunks/dep-d32fbbb3.mjs';
import '../_chunks/dep-71f84cf2.mjs';
import '../_chunks/dep-03412fab.mjs';
import '../_chunks/dep-205ff58d.mjs';
import '../_chunks/dep-7fa157cd.mjs';
import '../_chunks/dep-fa6608fd.mjs';
import '../_chunks/dep-7dcfa37a.mjs';
import '../_chunks/dep-4903a8a8.mjs';
import '../_chunks/dep-aa6cff3e.mjs';
import '../_chunks/dep-cc9bfda3.mjs';
import '../_chunks/dep-1cab4dbd.mjs';
import '../_chunks/dep-b09f48fa.mjs';
import '../_chunks/dep-26bf361a.mjs';
import '../_chunks/dep-3ec3335a.mjs';
import '../_chunks/dep-ed4e7c50.mjs';
import '../_chunks/dep-a666b9ad.mjs';
import '../_common/js/global-config/default-config.mjs';
import '../_common/js/global-config/locale/en_US.mjs';
import '../_chunks/dep-8db27830.mjs';
import './form-model.mjs';
import '../utils/helper.mjs';
import '../_chunks/dep-53e379cd.mjs';
import '../_chunks/dep-a628549d.mjs';
import '../_chunks/dep-f4eba04c.mjs';
import '../_chunks/dep-735bcd0d.mjs';
import '../_chunks/dep-765678ef.mjs';
import '../_chunks/dep-1bae6a97.mjs';
import '../_chunks/dep-5a2ce53e.mjs';
import './form-item-props.mjs';
import '../config-provider/useConfig.mjs';
import '../config-provider/type.mjs';
import '../hooks/icon.mjs';
import '../hooks/slot.mjs';
import '../hooks/useCommonClassName.mjs';
import '../hooks/useDefaultValue.mjs';
import '../_chunks/dep-ae4bffa5.mjs';
import '../hooks/useDestroyOnClose.mjs';
import '../hooks/useKeepAnimation.mjs';
import '../hooks/useRipple.mjs';
import '../utils/set-style.mjs';
import '../hooks/useVirtualScroll.mjs';
import '../hooks/useVModel.mjs';
import '../hooks/useImagePreviewUrl.mjs';
import '../_common/js/upload/utils.mjs';
import '../_common/js/log/log.mjs';
import '../utils/render-tnode.mjs';
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; }
var _Form = defineComponent({
name: "XForm",
props: _objectSpread({}, props),
setup: function setup(props2, _ref) {
var expose = _ref.expose;
var renderContent = useTNodeJSX();
var _toRefs = toRefs(props2),
disabled = _toRefs.disabled;
provide("formDisabled", {
disabled: disabled
});
var formRef = ref(null);
var children = ref([]);
var _toRefs2 = toRefs(props2),
showErrorMessage = _toRefs2.showErrorMessage,
labelWidth = _toRefs2.labelWidth,
labelAlign = _toRefs2.labelAlign,
data = _toRefs2.data,
colon = _toRefs2.colon,
requiredMark = _toRefs2.requiredMark,
rules = _toRefs2.rules,
errorMessage = _toRefs2.errorMessage,
resetType = _toRefs2.resetType;
provide(FormInjectionKey, reactive({
showErrorMessage: showErrorMessage,
labelWidth: labelWidth,
labelAlign: labelAlign,
data: data,
colon: colon,
requiredMark: requiredMark,
rules: rules,
errorMessage: errorMessage,
resetType: resetType,
children: children,
renderContent: renderContent
}));
var COMPONENT_NAME = usePrefixClass("form");
var CLASS_NAMES = useCLASSNAMES();
var formClass = computed(function () {
return [CLASS_NAMES.value.form, _defineProperty({}, "".concat(COMPONENT_NAME.value, "-inline"), props2.layout === "inline")];
});
var FORM_ITEM_CLASS_PREFIX = usePrefixClass("form-item__");
var getFirstError = function getFirstError(result) {
if (isBoolean_1(result)) return "";
var _Object$keys = Object.keys(result),
_Object$keys2 = _slicedToArray(_Object$keys, 1),
firstKey = _Object$keys2[0];
if (props2.scrollToFirstError) {
var tmpClassName = getFormItemClassName(FORM_ITEM_CLASS_PREFIX.value, firstKey);
scrollTo(".".concat(tmpClassName));
}
var resArr = result[firstKey];
if (!isArray_1(resArr)) return "";
return resArr.filter(function (item) {
return !item.result;
})[0].message;
};
var scrollTo = function scrollTo(selector) {
var _formRef$value$getEle = formRef.value.getElementsByClassName(selector),
_formRef$value$getEle2 = _slicedToArray(_formRef$value$getEle, 1),
dom = _formRef$value$getEle2[0];
var behavior = props2.scrollToFirstError;
if (behavior) {
dom && dom.scrollIntoView({
behavior: behavior
});
}
};
var needValidate = function needValidate(name, fields) {
if (!fields || !isArray_1(fields)) return true;
return fields.indexOf("".concat(name)) !== -1;
};
var formatValidateResult = function formatValidateResult(validateResultList) {
var result = validateResultList.reduce(function (r, err) {
return Object.assign(r || {}, err);
}, {});
Object.keys(result).forEach(function (key) {
if (result[key] === true) {
delete result[key];
}
});
return isEmpty_1(result) ? true : result;
};
var validate = /*#__PURE__*/function () {
var _ref3 = _asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee(param) {
var _props2$onValidate;
var _ref4, fields, _ref4$trigger, trigger, showErrorMessage2, list, arr, result, firstError;
return regenerator.wrap(function _callee$(_context) {
while (1) switch (_context.prev = _context.next) {
case 0:
_ref4 = param || {}, fields = _ref4.fields, _ref4$trigger = _ref4.trigger, trigger = _ref4$trigger === void 0 ? "all" : _ref4$trigger, showErrorMessage2 = _ref4.showErrorMessage;
list = children.value.filter(function (child) {
return isFunction_1(child.validate) && needValidate(String(child.name), fields);
}).map(function (child) {
return child.validate(trigger, showErrorMessage2);
});
_context.next = 4;
return Promise.all(list);
case 4:
arr = _context.sent;
result = formatValidateResult(arr);
firstError = getFirstError(result);
(_props2$onValidate = props2.onValidate) === null || _props2$onValidate === void 0 ? void 0 : _props2$onValidate.call(props2, {
validateResult: result,
firstError: firstError
});
return _context.abrupt("return", result);
case 9:
case "end":
return _context.stop();
}
}, _callee);
}));
return function validate(_x) {
return _ref3.apply(this, arguments);
};
}();
var validateOnly = /*#__PURE__*/function () {
var _ref5 = _asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee2(params) {
var _ref6, fields, _ref6$trigger, trigger, list, arr;
return regenerator.wrap(function _callee2$(_context2) {
while (1) switch (_context2.prev = _context2.next) {
case 0:
_ref6 = params || {}, fields = _ref6.fields, _ref6$trigger = _ref6.trigger, trigger = _ref6$trigger === void 0 ? "all" : _ref6$trigger;
list = children.value.filter(function (child) {
return isFunction_1(child.validateOnly) && needValidate(String(child.name), fields);
}).map(function (child) {
return child.validateOnly(trigger);
});
_context2.next = 4;
return Promise.all(list);
case 4:
arr = _context2.sent;
return _context2.abrupt("return", formatValidateResult(arr));
case 6:
case "end":
return _context2.stop();
}
}, _callee2);
}));
return function validateOnly(_x2) {
return _ref5.apply(this, arguments);
};
}();
var submitParams = ref();
var _onSubmit = function onSubmit(e) {
if (props2.preventSubmitDefault && e) {
e.preventDefault();
e.stopPropagation();
}
validate(submitParams.value).then(function (r) {
var _props2$onSubmit;
(_props2$onSubmit = props2.onSubmit) === null || _props2$onSubmit === void 0 ? void 0 : _props2$onSubmit.call(props2, {
validateResult: r,
firstError: getFirstError(r),
e: e
});
});
submitParams.value = void 0;
};
var submit = /*#__PURE__*/function () {
var _ref7 = _asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee3(params) {
return regenerator.wrap(function _callee3$(_context3) {
while (1) switch (_context3.prev = _context3.next) {
case 0:
submitParams.value = params;
requestSubmit(formRef.value);
case 2:
case "end":
return _context3.stop();
}
}, _callee3);
}));
return function submit(_x3) {
return _ref7.apply(this, arguments);
};
}();
var resetParams = ref();
var _onReset = function onReset(e) {
var _props2$onReset;
if (props2.preventSubmitDefault && e) {
e.preventDefault();
e.stopPropagation();
}
children.value.filter(function (child) {
var _resetParams$value;
return isFunction_1(child.resetField) && needValidate(String(child.name), (_resetParams$value = resetParams.value) === null || _resetParams$value === void 0 ? void 0 : _resetParams$value.fields);
}).forEach(function (child) {
var _resetParams$value2;
return child.resetField((_resetParams$value2 = resetParams.value) === null || _resetParams$value2 === void 0 ? void 0 : _resetParams$value2.type);
});
resetParams.value = void 0;
(_props2$onReset = props2.onReset) === null || _props2$onReset === void 0 ? void 0 : _props2$onReset.call(props2, {
e: e
});
};
var reset = function reset(params) {
resetParams.value = params;
formRef.value.reset();
};
var clearValidate = function clearValidate(fields) {
children.value.forEach(function (child) {
if (isFunction_1(child.resetHandler) && needValidate(String(child.name), fields)) {
child.resetHandler();
}
});
};
var setValidateMessage = function setValidateMessage(validateMessage) {
var keys = Object.keys(validateMessage);
if (!keys.length) return;
var list = children.value.filter(function (child) {
return isFunction_1(child.setValidateMessage) && keys.includes("".concat(child.name));
}).map(function (child) {
return child.setValidateMessage(validateMessage[child.name]);
});
Promise.all(list);
};
expose({
validate: validate,
submit: submit,
reset: reset,
clearValidate: clearValidate,
setValidateMessage: setValidateMessage,
validateOnly: validateOnly
});
return function () {
return createVNode("form", {
"ref": formRef,
"class": formClass.value,
"onSubmit": function onSubmit(e) {
return _onSubmit(e);
},
"onReset": function onReset(e) {
return _onReset(e);
}
}, [renderContent("default")]);
};
}
});
export { _Form as default };
//# sourceMappingURL=form.mjs.map