FormItemInput.js 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384
  1. import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
  2. import _extends from "@babel/runtime/helpers/esm/extends";
  3. import { resolveDirective as _resolveDirective, createVNode as _createVNode, Fragment as _Fragment } from "vue";
  4. import Col from '../grid/Col';
  5. import { useProvideForm, useInjectForm, useProvideFormItemPrefix } from './context';
  6. import ErrorList from './ErrorList';
  7. import classNames from '../_util/classNames';
  8. import { computed, defineComponent } from 'vue';
  9. import { filterEmpty } from '../_util/props-util';
  10. const FormItemInput = defineComponent({
  11. compatConfig: {
  12. MODE: 3
  13. },
  14. slots: Object,
  15. inheritAttrs: false,
  16. props: ['prefixCls', 'errors', 'hasFeedback', 'onDomErrorVisibleChange', 'wrapperCol', 'help', 'extra', 'status', 'marginBottom', 'onErrorVisibleChanged'],
  17. setup(props, _ref) {
  18. let {
  19. slots
  20. } = _ref;
  21. const formContext = useInjectForm();
  22. const {
  23. wrapperCol: contextWrapperCol
  24. } = formContext;
  25. // Pass to sub FormItem should not with col info
  26. const subFormContext = _extends({}, formContext);
  27. delete subFormContext.labelCol;
  28. delete subFormContext.wrapperCol;
  29. useProvideForm(subFormContext);
  30. useProvideFormItemPrefix({
  31. prefixCls: computed(() => props.prefixCls),
  32. status: computed(() => props.status)
  33. });
  34. return () => {
  35. var _a, _b, _c;
  36. const {
  37. prefixCls,
  38. wrapperCol,
  39. marginBottom,
  40. onErrorVisibleChanged,
  41. help = (_a = slots.help) === null || _a === void 0 ? void 0 : _a.call(slots),
  42. errors = filterEmpty((_b = slots.errors) === null || _b === void 0 ? void 0 : _b.call(slots)),
  43. // hasFeedback,
  44. // status,
  45. extra = (_c = slots.extra) === null || _c === void 0 ? void 0 : _c.call(slots)
  46. } = props;
  47. const baseClassName = `${prefixCls}-item`;
  48. const mergedWrapperCol = wrapperCol || (contextWrapperCol === null || contextWrapperCol === void 0 ? void 0 : contextWrapperCol.value) || {};
  49. const className = classNames(`${baseClassName}-control`, mergedWrapperCol.class);
  50. // Should provides additional icon if `hasFeedback`
  51. // const IconNode = status && iconMap[status];
  52. return _createVNode(Col, _objectSpread(_objectSpread({}, mergedWrapperCol), {}, {
  53. "class": className
  54. }), {
  55. default: () => {
  56. var _a;
  57. return _createVNode(_Fragment, null, [_createVNode("div", {
  58. "class": `${baseClassName}-control-input`
  59. }, [_createVNode("div", {
  60. "class": `${baseClassName}-control-input-content`
  61. }, [(_a = slots.default) === null || _a === void 0 ? void 0 : _a.call(slots)])]), marginBottom !== null || errors.length ? _createVNode("div", {
  62. "style": {
  63. display: 'flex',
  64. flexWrap: 'nowrap'
  65. }
  66. }, [_createVNode(ErrorList, {
  67. "errors": errors,
  68. "help": help,
  69. "class": `${baseClassName}-explain-connected`,
  70. "onErrorVisibleChanged": onErrorVisibleChanged
  71. }, null), !!marginBottom && _createVNode("div", {
  72. "style": {
  73. width: 0,
  74. height: `${marginBottom}px`
  75. }
  76. }, null)]) : null, extra ? _createVNode("div", {
  77. "class": `${baseClassName}-extra`
  78. }, [extra]) : null]);
  79. }
  80. });
  81. };
  82. }
  83. });
  84. export default FormItemInput;