ErrorList.js 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960
  1. "use strict";
  2. var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
  3. Object.defineProperty(exports, "__esModule", {
  4. value: true
  5. });
  6. exports.default = void 0;
  7. var _vue = require("vue");
  8. var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
  9. var _context = require("./context");
  10. var _transition = require("../_util/transition");
  11. var _collapseMotion = _interopRequireDefault(require("../_util/collapseMotion"));
  12. var _style = _interopRequireDefault(require("./style"));
  13. var _default = exports.default = (0, _vue.defineComponent)({
  14. compatConfig: {
  15. MODE: 3
  16. },
  17. name: 'ErrorList',
  18. inheritAttrs: false,
  19. props: ['errors', 'help', 'onErrorVisibleChanged', 'helpStatus', 'warnings'],
  20. setup(props, _ref) {
  21. let {
  22. attrs
  23. } = _ref;
  24. const {
  25. prefixCls,
  26. status
  27. } = (0, _context.useInjectFormItemPrefix)();
  28. const baseClassName = (0, _vue.computed)(() => `${prefixCls.value}-item-explain`);
  29. const visible = (0, _vue.computed)(() => !!(props.errors && props.errors.length));
  30. const innerStatus = (0, _vue.ref)(status.value);
  31. const [, hashId] = (0, _style.default)(prefixCls);
  32. // Memo status in same visible
  33. (0, _vue.watch)([visible, status], () => {
  34. if (visible.value) {
  35. innerStatus.value = status.value;
  36. }
  37. });
  38. return () => {
  39. var _a, _b;
  40. const colMItem = (0, _collapseMotion.default)(`${prefixCls.value}-show-help-item`);
  41. const transitionGroupProps = (0, _transition.getTransitionGroupProps)(`${prefixCls.value}-show-help-item`, colMItem);
  42. transitionGroupProps.role = 'alert';
  43. transitionGroupProps.class = [hashId.value, baseClassName.value, attrs.class, `${prefixCls.value}-show-help`];
  44. return (0, _vue.createVNode)(_vue.Transition, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, (0, _transition.getTransitionProps)(`${prefixCls.value}-show-help`)), {}, {
  45. "onAfterEnter": () => props.onErrorVisibleChanged(true),
  46. "onAfterLeave": () => props.onErrorVisibleChanged(false)
  47. }), {
  48. default: () => [(0, _vue.withDirectives)((0, _vue.createVNode)(_vue.TransitionGroup, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, transitionGroupProps), {}, {
  49. "tag": "div"
  50. }), {
  51. default: () => [(_b = props.errors) === null || _b === void 0 ? void 0 : _b.map((error, index) => (0, _vue.createVNode)("div", {
  52. "key": index,
  53. "class": innerStatus.value ? `${baseClassName.value}-${innerStatus.value}` : ''
  54. }, [error]))]
  55. }), [[_vue.vShow, !!((_a = props.errors) === null || _a === void 0 ? void 0 : _a.length)]])]
  56. });
  57. };
  58. }
  59. });