ErrorList.js 2.4 KB

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