@vtx/components 2.4.1 → 2.5.2

package/lib/vtx-form-layout/Card.js

@@ -0,0 +1,83 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _card = _interopRequireDefault(require("antd/es/card"));
+
+var _icon = _interopRequireDefault(require("antd/es/icon"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+function VtxCard(props) {
+  var title = props.title,
+      _props$expand = props.expand,
+      expand = _props$expand === void 0 ? true : _props$expand;
+
+  var _useState = (0, _react.useState)(expand),
+      _useState2 = _slicedToArray(_useState, 2),
+      visible = _useState2[0],
+      setVisible = _useState2[1];
+
+  var style = {};
+
+  if (visible) {
+    style = {
+      transform: 'rotate(90deg)'
+    };
+  }
+
+  return /*#__PURE__*/_react["default"].createElement(_card["default"], {
+    title: title,
+    className: "vtx-form-card",
+    extra: /*#__PURE__*/_react["default"].createElement(_icon["default"], {
+      className: "vtx-form-card-expand-icon",
+      type: "right",
+      style: style,
+      onClick: function onClick() {
+        return setVisible(function (pre) {
+          return !pre;
+        });
+      }
+    })
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: (0, _classnames["default"])('vtx-form-card-content', {
+      'vtx-form-card-content-hide': !visible
+    })
+  }, props.children));
+}
+
+VtxCard.propTypes = {
+  expand: _propTypes["default"].bool,
+  title: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].node]),
+  children: _propTypes["default"].node
+};
+var _default = VtxCard;
+exports["default"] = _default;
+//# sourceMappingURL=Card.js.map

package/lib/vtx-form-layout/Card.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["vtx-form-layout/Card.jsx"],"names":["VtxCard","props","title","expand","visible","setVisible","style","transform","pre","children","propTypes","PropTypes","bool","oneOfType","string","node"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;AAEA,SAASA,OAAT,CAAiBC,KAAjB,EAAwB;AAAA,MACZC,KADY,GACaD,KADb,CACZC,KADY;AAAA,sBACaD,KADb,CACLE,MADK;AAAA,MACLA,MADK,8BACI,IADJ;;AAAA,kBAEU,qBAASA,MAAT,CAFV;AAAA;AAAA,MAEbC,OAFa;AAAA,MAEJC,UAFI;;AAGpB,MAAIC,KAAK,GAAG,EAAZ;;AACA,MAAIF,OAAJ,EAAa;AACTE,IAAAA,KAAK,GAAG;AAAEC,MAAAA,SAAS,EAAE;AAAb,KAAR;AACH;;AACD,sBACI,gCAAC,gBAAD;AACI,IAAA,KAAK,EAAEL,KADX;AAEI,IAAA,SAAS,EAAC,eAFd;AAGI,IAAA,KAAK,eACD,gCAAC,gBAAD;AACI,MAAA,SAAS,EAAC,2BADd;AAEI,MAAA,IAAI,EAAC,OAFT;AAGI,MAAA,KAAK,EAAEI,KAHX;AAII,MAAA,OAAO,EAAE;AAAA,eAAMD,UAAU,CAAC,UAAAG,GAAG;AAAA,iBAAI,CAACA,GAAL;AAAA,SAAJ,CAAhB;AAAA;AAJb;AAJR,kBAYI;AACI,IAAA,SAAS,EAAE,4BAAW,uBAAX,EAAoC;AAC3C,oCAA8B,CAACJ;AADY,KAApC;AADf,KAKKH,KAAK,CAACQ,QALX,CAZJ,CADJ;AAsBH;;AAEDT,OAAO,CAACU,SAAR,GAAoB;AAChBP,EAAAA,MAAM,EAAEQ,sBAAUC,IADF;AAEhBV,EAAAA,KAAK,EAAES,sBAAUE,SAAV,CAAoB,CAACF,sBAAUG,MAAX,EAAmBH,sBAAUI,IAA7B,CAApB,CAFS;AAGhBN,EAAAA,QAAQ,EAAEE,sBAAUI;AAHJ,CAApB;eAMef,O","sourcesContent":["import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport Card from 'antd/es/card';\nimport Icon from 'antd/es/icon';\n\nfunction VtxCard(props) {\n    const { title, expand = true } = props;\n    const [visible, setVisible] = useState(expand);\n    let style = {};\n    if (visible) {\n        style = { transform: 'rotate(90deg)' };\n    }\n    return (\n        <Card\n            title={title}\n            className=\"vtx-form-card\"\n            extra={\n                <Icon\n                    className=\"vtx-form-card-expand-icon\"\n                    type=\"right\"\n                    style={style}\n                    onClick={() => setVisible(pre => !pre)}\n                />\n            }\n        >\n            <div\n                className={classnames('vtx-form-card-content', {\n                    'vtx-form-card-content-hide': !visible,\n                })}\n            >\n                {props.children}\n            </div>\n        </Card>\n    );\n}\n\nVtxCard.propTypes = {\n    expand: PropTypes.bool,\n    title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),\n    children: PropTypes.node,\n};\n\nexport default VtxCard;\n"],"file":"Card.js"}

package/lib/vtx-form-layout/Divider.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _divider = _interopRequireDefault(require("antd/es/divider"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function VtxDivider() {
+  return /*#__PURE__*/_react["default"].createElement(_divider["default"], {
+    className: "vtx-form-divider"
+  });
+}
+
+var _default = VtxDivider;
+exports["default"] = _default;
+//# sourceMappingURL=Divider.js.map

package/lib/vtx-form-layout/Divider.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["vtx-form-layout/Divider.jsx"],"names":["VtxDivider"],"mappings":";;;;;;;AAAA;;AACA;;;;AAEA,SAASA,UAAT,GAAsB;AAClB,sBAAO,gCAAC,mBAAD;AAAS,IAAA,SAAS,EAAC;AAAnB,IAAP;AACH;;eAEcA,U","sourcesContent":["import React from 'react';\nimport Divider from 'antd/es/divider';\n\nfunction VtxDivider() {\n    return <Divider className=\"vtx-form-divider\" />;\n}\n\nexport default VtxDivider;\n"],"file":"Divider.js"}

package/lib/vtx-form-layout/FormItem.js

@@ -48,9 +48,12 @@ function FormItem(props) {
   var _useContext = (0, _react.useContext)(_context.StoreCtx),
       labelColSpan = _useContext.labelColSpan,
       cols = _useContext.cols,
-      mode = _useContext.mode;
+      mode = _useContext.mode,
+      layout = _useContext.layout;
 
-  var labelRender = label;
+  var labelRender = /*#__PURE__*/_react["default"].createElement(_tooltip["default"], {
+    title: label
+  }, label);
 
   if (tip) {
     labelRender = /*#__PURE__*/_react["default"].createElement("span", null, label, "\xA0", /*#__PURE__*/_react["default"].createElement(_tooltip["default"], {
@@ -60,20 +63,31 @@ function FormItem(props) {
     })));
   }
 
-  var conversionLabelColSpan = labelColSpan / weights;
-  var wrapperColSpan = SPAN - conversionLabelColSpan;
+  var formItemLayout = null;
+
+  if (layout === 'horizontal') {
+    var conversionLabelColSpan = labelColSpan / weights;
+    var wrapperColSpan = SPAN - conversionLabelColSpan;
+    formItemLayout = {
+      labelCol: {
+        span: conversionLabelColSpan
+      },
+      wrapperCol: {
+        span: wrapperColSpan
+      }
+    };
+  }
+
   return /*#__PURE__*/_react["default"].createElement(_col["default"], {
-    span: SPAN * weights / cols
+    span: SPAN * weights / cols,
+    className: "vtx-form-item-col"
   }, /*#__PURE__*/_react["default"].createElement(_form["default"].Item, _extends({
     className: (0, _classnames["default"])('vtx-form-item', {
+      'vtx-form-item-vertical': layout === 'vertical' && mode !== 'view'
+    }, {
       'vtx-form-item--view': mode === 'view'
-    }),
-    labelCol: {
-      span: conversionLabelColSpan
-    },
-    wrapperCol: {
-      span: wrapperColSpan
-    },
+    })
+  }, formItemLayout, {
     label: labelRender
   }, rest), props.children));
 }

package/lib/vtx-form-layout/FormItem.js.map

@@ -1 +1 @@
-{"version":3,"sources":["vtx-form-layout/FormItem.jsx"],"names":["SPAN","FormItem","props","weights","tip","label","rest","StoreCtx","labelColSpan","cols","mode","labelRender","conversionLabelColSpan","wrapperColSpan","span","children","propTypes","PropTypes","number","node","oneOfType","string"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;AAEA;AACA,IAAMA,IAAI,GAAG,EAAb;;AAEe,SAASC,QAAT,CAAkBC,KAAlB,EAAyB;AAAA,uBACSA,KADT,CAC5BC,OAD4B;AAAA,MAC5BA,OAD4B,+BAClB,CADkB;AAAA,MACfC,GADe,GACSF,KADT,CACfE,GADe;AAAA,MACVC,KADU,GACSH,KADT,CACVG,KADU;AAAA,MACAC,IADA,4BACSJ,KADT;;AAAA,oBAEC,uBAAWK,iBAAX,CAFD;AAAA,MAE5BC,YAF4B,eAE5BA,YAF4B;AAAA,MAEdC,IAFc,eAEdA,IAFc;AAAA,MAERC,IAFQ,eAERA,IAFQ;;AAIpC,MAAIC,WAAW,GAAGN,KAAlB;;AACA,MAAID,GAAJ,EAAS;AACLO,IAAAA,WAAW,gBACP,8CACKN,KADL,uBAEI,gCAAC,mBAAD;AAAS,MAAA,KAAK,EAAED;AAAhB,oBACI,gCAAC,gBAAD;AAAM,MAAA,IAAI,EAAC;AAAX,MADJ,CAFJ,CADJ;AAQH;;AAED,MAAMQ,sBAAsB,GAAGJ,YAAY,GAAGL,OAA9C;AACA,MAAMU,cAAc,GAAGb,IAAI,GAAGY,sBAA9B;AACA,sBACI,gCAAC,eAAD;AAAK,IAAA,IAAI,EAAGZ,IAAI,GAAGG,OAAR,GAAmBM;AAA9B,kBACI,gCAAC,gBAAD,CAAM,IAAN;AACI,IAAA,SAAS,EAAE,4BAAW,eAAX,EAA4B;AAAE,6BAAuBC,IAAI,KAAK;AAAlC,KAA5B,CADf;AAEI,IAAA,QAAQ,EAAE;AAAEI,MAAAA,IAAI,EAAEF;AAAR,KAFd;AAGI,IAAA,UAAU,EAAE;AAAEE,MAAAA,IAAI,EAAED;AAAR,KAHhB;AAII,IAAA,KAAK,EAAEF;AAJX,KAKQL,IALR,GAOKJ,KAAK,CAACa,QAPX,CADJ,CADJ;AAaH;;AAEDd,QAAQ,CAACe,SAAT,GAAqB;AACjBb,EAAAA,OAAO,EAAEc,sBAAUC,MADF;AAEjBH,EAAAA,QAAQ,EAAEE,sBAAUE,IAFH;AAGjBf,EAAAA,GAAG,EAAEa,sBAAUG,SAAV,CAAoB,CAACH,sBAAUI,MAAX,EAAmBJ,sBAAUE,IAA7B,CAApB,CAHY;AAIjBd,EAAAA,KAAK,EAAEY,sBAAUG,SAAV,CAAoB,CAACH,sBAAUI,MAAX,EAAmBJ,sBAAUE,IAA7B,CAApB;AAJU,CAArB","sourcesContent":["import React, { useContext } from 'react';\nimport PropTypes from 'prop-types';\nimport Form from 'antd/es/form';\nimport Col from 'antd/es/col';\nimport Icon from 'antd/es/icon';\nimport Tooltip from 'antd/es/tooltip';\nimport classnames from 'classnames';\nimport { StoreCtx } from './context';\n\n// 24 栅格\nconst SPAN = 24;\n\nexport default function FormItem(props) {\n    const { weights = 1, tip, label, ...rest } = props;\n    const { labelColSpan, cols, mode } = useContext(StoreCtx);\n\n    let labelRender = label;\n    if (tip) {\n        labelRender = (\n            <span>\n                {label}&nbsp;\n                <Tooltip title={tip}>\n                    <Icon type=\"question-circle-o\" />\n                </Tooltip>\n            </span>\n        );\n    }\n\n    const conversionLabelColSpan = labelColSpan / weights;\n    const wrapperColSpan = SPAN - conversionLabelColSpan;\n    return (\n        <Col span={(SPAN * weights) / cols}>\n            <Form.Item\n                className={classnames('vtx-form-item', { 'vtx-form-item--view': mode === 'view' })}\n                labelCol={{ span: conversionLabelColSpan }}\n                wrapperCol={{ span: wrapperColSpan }}\n                label={labelRender}\n                {...rest}\n            >\n                {props.children}\n            </Form.Item>\n        </Col>\n    );\n}\n\nFormItem.propTypes = {\n    weights: PropTypes.number,\n    children: PropTypes.node,\n    tip: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),\n    label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),\n};\n"],"file":"FormItem.js"}
+{"version":3,"sources":["vtx-form-layout/FormItem.jsx"],"names":["SPAN","FormItem","props","weights","tip","label","rest","StoreCtx","labelColSpan","cols","mode","layout","labelRender","formItemLayout","conversionLabelColSpan","wrapperColSpan","labelCol","span","wrapperCol","children","propTypes","PropTypes","number","node","oneOfType","string"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;AAEA;AACA,IAAMA,IAAI,GAAG,EAAb;;AAEe,SAASC,QAAT,CAAkBC,KAAlB,EAAyB;AAAA,uBACSA,KADT,CAC5BC,OAD4B;AAAA,MAC5BA,OAD4B,+BAClB,CADkB;AAAA,MACfC,GADe,GACSF,KADT,CACfE,GADe;AAAA,MACVC,KADU,GACSH,KADT,CACVG,KADU;AAAA,MACAC,IADA,4BACSJ,KADT;;AAAA,oBAES,uBAAWK,iBAAX,CAFT;AAAA,MAE5BC,YAF4B,eAE5BA,YAF4B;AAAA,MAEdC,IAFc,eAEdA,IAFc;AAAA,MAERC,IAFQ,eAERA,IAFQ;AAAA,MAEFC,MAFE,eAEFA,MAFE;;AAIpC,MAAIC,WAAW,gBAAG,gCAAC,mBAAD;AAAS,IAAA,KAAK,EAAEP;AAAhB,KAAwBA,KAAxB,CAAlB;;AACA,MAAID,GAAJ,EAAS;AACLQ,IAAAA,WAAW,gBACP,8CACKP,KADL,uBAEI,gCAAC,mBAAD;AAAS,MAAA,KAAK,EAAED;AAAhB,oBACI,gCAAC,gBAAD;AAAM,MAAA,IAAI,EAAC;AAAX,MADJ,CAFJ,CADJ;AAQH;;AAED,MAAIS,cAAc,GAAG,IAArB;;AACA,MAAIF,MAAM,KAAK,YAAf,EAA6B;AACzB,QAAMG,sBAAsB,GAAGN,YAAY,GAAGL,OAA9C;AACA,QAAMY,cAAc,GAAGf,IAAI,GAAGc,sBAA9B;AACAD,IAAAA,cAAc,GAAG;AACbG,MAAAA,QAAQ,EAAE;AAAEC,QAAAA,IAAI,EAAEH;AAAR,OADG;AAEbI,MAAAA,UAAU,EAAE;AAAED,QAAAA,IAAI,EAAEF;AAAR;AAFC,KAAjB;AAIH;;AAED,sBACI,gCAAC,eAAD;AAAK,IAAA,IAAI,EAAGf,IAAI,GAAGG,OAAR,GAAmBM,IAA9B;AAAoC,IAAA,SAAS,EAAC;AAA9C,kBACI,gCAAC,gBAAD,CAAM,IAAN;AACI,IAAA,SAAS,EAAE,4BACP,eADO,EAEP;AAAE,gCAA0BE,MAAM,KAAK,UAAX,IAAyBD,IAAI,KAAK;AAA9D,KAFO,EAGP;AAAE,6BAAuBA,IAAI,KAAK;AAAlC,KAHO;AADf,KAMQG,cANR;AAOI,IAAA,KAAK,EAAED;AAPX,KAQQN,IARR,GAUKJ,KAAK,CAACiB,QAVX,CADJ,CADJ;AAgBH;;AAEDlB,QAAQ,CAACmB,SAAT,GAAqB;AACjBjB,EAAAA,OAAO,EAAEkB,sBAAUC,MADF;AAEjBH,EAAAA,QAAQ,EAAEE,sBAAUE,IAFH;AAGjBnB,EAAAA,GAAG,EAAEiB,sBAAUG,SAAV,CAAoB,CAACH,sBAAUI,MAAX,EAAmBJ,sBAAUE,IAA7B,CAApB,CAHY;AAIjBlB,EAAAA,KAAK,EAAEgB,sBAAUG,SAAV,CAAoB,CAACH,sBAAUI,MAAX,EAAmBJ,sBAAUE,IAA7B,CAApB;AAJU,CAArB","sourcesContent":["import React, { useContext } from 'react';\nimport PropTypes from 'prop-types';\nimport Form from 'antd/es/form';\nimport Col from 'antd/es/col';\nimport Icon from 'antd/es/icon';\nimport Tooltip from 'antd/es/tooltip';\nimport classnames from 'classnames';\nimport { StoreCtx } from './context';\n\n// 24 栅格\nconst SPAN = 24;\n\nexport default function FormItem(props) {\n    const { weights = 1, tip, label, ...rest } = props;\n    const { labelColSpan, cols, mode, layout } = useContext(StoreCtx);\n\n    let labelRender = <Tooltip title={label}>{label}</Tooltip>;\n    if (tip) {\n        labelRender = (\n            <span>\n                {label}&nbsp;\n                <Tooltip title={tip}>\n                    <Icon type=\"question-circle-o\" />\n                </Tooltip>\n            </span>\n        );\n    }\n\n    let formItemLayout = null;\n    if (layout === 'horizontal') {\n        const conversionLabelColSpan = labelColSpan / weights;\n        const wrapperColSpan = SPAN - conversionLabelColSpan;\n        formItemLayout = {\n            labelCol: { span: conversionLabelColSpan },\n            wrapperCol: { span: wrapperColSpan },\n        };\n    }\n\n    return (\n        <Col span={(SPAN * weights) / cols} className=\"vtx-form-item-col\">\n            <Form.Item\n                className={classnames(\n                    'vtx-form-item',\n                    { 'vtx-form-item-vertical': layout === 'vertical' && mode !== 'view' },\n                    { 'vtx-form-item--view': mode === 'view' },\n                )}\n                {...formItemLayout}\n                label={labelRender}\n                {...rest}\n            >\n                {props.children}\n            </Form.Item>\n        </Col>\n    );\n}\n\nFormItem.propTypes = {\n    weights: PropTypes.number,\n    children: PropTypes.node,\n    tip: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),\n    label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),\n};\n"],"file":"FormItem.js"}

package/lib/vtx-form-layout/Pane.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function Pane(props) {
+  var title = props.title,
+      _props$prefixCls = props.prefixCls,
+      prefixCls = _props$prefixCls === void 0 ? 'vtx-form-pane' : _props$prefixCls;
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: prefixCls
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "".concat(prefixCls, "-title")
+  }, title), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "".concat(prefixCls, "-content")
+  }, props.children));
+}
+
+Pane.propTypes = {
+  prefixCls: _propTypes["default"].string,
+  title: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].node]),
+  children: _propTypes["default"].node
+};
+var _default = Pane;
+exports["default"] = _default;
+//# sourceMappingURL=Pane.js.map

package/lib/vtx-form-layout/Pane.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["vtx-form-layout/Pane.jsx"],"names":["Pane","props","title","prefixCls","children","propTypes","PropTypes","string","oneOfType","node"],"mappings":";;;;;;;AAAA;;AACA;;;;AAEA,SAASA,IAAT,CAAcC,KAAd,EAAqB;AAAA,MACTC,KADS,GAC8BD,KAD9B,CACTC,KADS;AAAA,yBAC8BD,KAD9B,CACFE,SADE;AAAA,MACFA,SADE,iCACU,eADV;AAEjB,sBACI;AAAK,IAAA,SAAS,EAAEA;AAAhB,kBACI;AAAK,IAAA,SAAS,YAAKA,SAAL;AAAd,KAAuCD,KAAvC,CADJ,eAEI;AAAK,IAAA,SAAS,YAAKC,SAAL;AAAd,KAAyCF,KAAK,CAACG,QAA/C,CAFJ,CADJ;AAMH;;AAEDJ,IAAI,CAACK,SAAL,GAAiB;AACbF,EAAAA,SAAS,EAAEG,sBAAUC,MADR;AAEbL,EAAAA,KAAK,EAAEI,sBAAUE,SAAV,CAAoB,CAACF,sBAAUC,MAAX,EAAmBD,sBAAUG,IAA7B,CAApB,CAFM;AAGbL,EAAAA,QAAQ,EAAEE,sBAAUG;AAHP,CAAjB;eAMeT,I","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\n\nfunction Pane(props) {\n    const { title, prefixCls = 'vtx-form-pane' } = props;\n    return (\n        <div className={prefixCls}>\n            <div className={`${prefixCls}-title`}>{title}</div>\n            <div className={`${prefixCls}-content`}>{props.children}</div>\n        </div>\n    );\n}\n\nPane.propTypes = {\n    prefixCls: PropTypes.string,\n    title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),\n    children: PropTypes.node,\n};\n\nexport default Pane;\n"],"file":"Pane.js"}

package/lib/vtx-form-layout/Row.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _row = _interopRequireDefault(require("antd/es/row"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function FormRow(props) {
+  return /*#__PURE__*/_react["default"].createElement(_row["default"], props, props.children);
+}
+
+FormRow.propTypes = {
+  children: _propTypes["default"].node
+};
+var _default = FormRow;
+exports["default"] = _default;
+//# sourceMappingURL=Row.js.map

package/lib/vtx-form-layout/Row.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["vtx-form-layout/Row.js"],"names":["FormRow","props","children","propTypes","PropTypes","node"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;AAEA,SAASA,OAAT,CAAiBC,KAAjB,EAAwB;AACpB,sBAAO,gCAAC,eAAD,EAASA,KAAT,EAAiBA,KAAK,CAACC,QAAvB,CAAP;AACH;;AAEDF,OAAO,CAACG,SAAR,GAAoB;AAAED,EAAAA,QAAQ,EAAEE,sBAAUC;AAAtB,CAApB;eAEeL,O","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport Row from 'antd/es/row';\n\nfunction FormRow(props) {\n    return <Row {...props}>{props.children}</Row>;\n}\n\nFormRow.propTypes = { children: PropTypes.node };\n\nexport default FormRow;\n"],"file":"Row.js"}

package/lib/vtx-form-layout/demo/Modal.css

@@ -0,0 +1,42 @@
+.vtx-demo-modal {
+  position: relative;
+  background-color: #fff;
+  background-clip: padding-box;
+  border: 0;
+  border-radius: 4px;
+  -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  pointer-events: auto;
+}
+.vtx-demo-modal-header {
+  padding: 16px 24px;
+  color: rgba(0, 0, 0, 0.65);
+  background: #fff;
+  border-bottom: 1px solid #e8e8e8;
+  border-radius: 4px 4px 0 0;
+}
+.vtx-demo-modal-title {
+  margin: 0;
+  color: rgba(0, 0, 0, 0.85);
+  font-weight: 500;
+  font-size: 16px;
+  line-height: 22px;
+  word-wrap: break-word;
+}
+.vtx-demo-modal-body {
+  padding: 20px 24px;
+  font-size: 14px;
+  line-height: 1.5;
+  word-wrap: break-word;
+}
+.vtx-demo-modal-footer {
+  padding: 10px 16px;
+  text-align: right;
+  background: transparent;
+  border-top: 1px solid #e8e8e8;
+  border-radius: 0 0 4px 4px;
+}
+.vtx-demo-modal-footer button + button {
+  margin-bottom: 0;
+  margin-left: 8px;
+}

package/lib/vtx-form-layout/demo/Modal.less

@@ -0,0 +1,41 @@
+.vtx-demo-modal {
+    position: relative;
+    background-color: #fff;
+    background-clip: padding-box;
+    border: 0;
+    border-radius: 4px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 15%);
+    pointer-events: auto;
+    &-header {
+        padding: 16px 24px;
+        color: rgba(0, 0, 0, 0.65);
+        background: #fff;
+        border-bottom: 1px solid #e8e8e8;
+        border-radius: 4px 4px 0 0;
+    }
+    &-title {
+        margin: 0;
+        color: rgba(0, 0, 0, 0.85);
+        font-weight: 500;
+        font-size: 16px;
+        line-height: 22px;
+        word-wrap: break-word;
+    }
+    &-body {
+        padding: 20px 24px;
+        font-size: 14px;
+        line-height: 1.5;
+        word-wrap: break-word;
+    }
+    &-footer {
+        padding: 10px 16px;
+        text-align: right;
+        background: transparent;
+        border-top: 1px solid #e8e8e8;
+        border-radius: 0 0 4px 4px;
+        button + button {
+            margin-bottom: 0;
+            margin-left: 8px;
+        }
+    }
+}

package/lib/vtx-form-layout/index.js

@@ -9,12 +9,20 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _row = _interopRequireDefault(require("antd/es/row"));
+var _classnames = _interopRequireDefault(require("classnames"));
 
-var _context = require("./context");
+var _Row = _interopRequireDefault(require("./Row"));
 
 var _FormItem = _interopRequireDefault(require("./FormItem"));
 
+var _Card = _interopRequireDefault(require("./Card"));
+
+var _Pane = _interopRequireDefault(require("./Pane"));
+
+var _Divider = _interopRequireDefault(require("./Divider"));
+
+var _context = require("./context");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function VtxFormLayout(props) {
@@ -22,25 +30,40 @@ function VtxFormLayout(props) {
       cols = _props$cols === void 0 ? 2 : _props$cols,
       _props$labelColSpan = props.labelColSpan,
       labelColSpan = _props$labelColSpan === void 0 ? 8 : _props$labelColSpan,
-      mode = props.mode;
+      mode = props.mode,
+      _props$layout = props.layout,
+      layout = _props$layout === void 0 ? 'vertical' : _props$layout,
+      card = props.card;
   var store = {
     cols: cols,
     labelColSpan: labelColSpan,
-    mode: mode
+    mode: mode,
+    layout: layout
   };
   return /*#__PURE__*/_react["default"].createElement(_context.StoreCtx.Provider, {
     value: store
-  }, props.children);
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: (0, _classnames["default"])('vtx-form-layout', {
+      'vtx-form-layout-vertical': layout === 'vertical' && mode !== 'view',
+      'vtx-form-layout-view': mode === 'view',
+      'vtx-form-layout-has-card': card
+    })
+  }, props.children));
 }
 
 VtxFormLayout.propTypes = {
   cols: _propTypes["default"].number,
   labelColSpan: _propTypes["default"].number,
   mode: _propTypes["default"].oneOf(['view']),
-  children: _propTypes["default"].node
+  layout: _propTypes["default"].oneOf(['horizontal', 'vertical']),
+  children: _propTypes["default"].node,
+  card: _propTypes["default"].bool
 };
-VtxFormLayout.Row = _row["default"];
+VtxFormLayout.Row = _Row["default"];
 VtxFormLayout.FormItem = _FormItem["default"];
+VtxFormLayout.Card = _Card["default"];
+VtxFormLayout.Pane = _Pane["default"];
+VtxFormLayout.Divider = _Divider["default"];
 var _default = VtxFormLayout;
 exports["default"] = _default;
 //# sourceMappingURL=index.js.map

package/lib/vtx-form-layout/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["vtx-form-layout/index.jsx"],"names":["VtxFormLayout","props","cols","labelColSpan","mode","store","children","propTypes","PropTypes","number","oneOf","node","Row","FormItem"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;AAEA,SAASA,aAAT,CAAuBC,KAAvB,EAA8B;AAAA,oBACmBA,KADnB,CAClBC,IADkB;AAAA,MAClBA,IADkB,4BACX,CADW;AAAA,4BACmBD,KADnB,CACRE,YADQ;AAAA,MACRA,YADQ,oCACO,CADP;AAAA,MACUC,IADV,GACmBH,KADnB,CACUG,IADV;AAE1B,MAAMC,KAAK,GAAG;AACVH,IAAAA,IAAI,EAAJA,IADU;AAEVC,IAAAA,YAAY,EAAZA,YAFU;AAGVC,IAAAA,IAAI,EAAJA;AAHU,GAAd;AAKA,sBAAO,gCAAC,iBAAD,CAAU,QAAV;AAAmB,IAAA,KAAK,EAAEC;AAA1B,KAAkCJ,KAAK,CAACK,QAAxC,CAAP;AACH;;AAEDN,aAAa,CAACO,SAAd,GAA0B;AACtBL,EAAAA,IAAI,EAAEM,sBAAUC,MADM;AAEtBN,EAAAA,YAAY,EAAEK,sBAAUC,MAFF;AAGtBL,EAAAA,IAAI,EAAEI,sBAAUE,KAAV,CAAgB,CAAC,MAAD,CAAhB,CAHgB;AAItBJ,EAAAA,QAAQ,EAAEE,sBAAUG;AAJE,CAA1B;AAOAX,aAAa,CAACY,GAAd,GAAoBA,eAApB;AACAZ,aAAa,CAACa,QAAd,GAAyBA,oBAAzB;eAEeb,a","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport Row from 'antd/es/row';\nimport { StoreCtx } from './context';\nimport FormItem from './FormItem';\n\nfunction VtxFormLayout(props) {\n    const { cols = 2, labelColSpan = 8, mode } = props;\n    const store = {\n        cols,\n        labelColSpan,\n        mode,\n    };\n    return <StoreCtx.Provider value={store}>{props.children}</StoreCtx.Provider>;\n}\n\nVtxFormLayout.propTypes = {\n    cols: PropTypes.number,\n    labelColSpan: PropTypes.number,\n    mode: PropTypes.oneOf(['view']),\n    children: PropTypes.node,\n};\n\nVtxFormLayout.Row = Row;\nVtxFormLayout.FormItem = FormItem;\n\nexport default VtxFormLayout;\n"],"file":"index.js"}
+{"version":3,"sources":["vtx-form-layout/index.jsx"],"names":["VtxFormLayout","props","cols","labelColSpan","mode","layout","card","store","children","propTypes","PropTypes","number","oneOf","node","bool","Row","FormItem","Card","Pane","Divider"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AAEA,SAASA,aAAT,CAAuBC,KAAvB,EAA8B;AAAA,oBAC8CA,KAD9C,CAClBC,IADkB;AAAA,MAClBA,IADkB,4BACX,CADW;AAAA,4BAC8CD,KAD9C,CACRE,YADQ;AAAA,MACRA,YADQ,oCACO,CADP;AAAA,MACUC,IADV,GAC8CH,KAD9C,CACUG,IADV;AAAA,sBAC8CH,KAD9C,CACgBI,MADhB;AAAA,MACgBA,MADhB,8BACyB,UADzB;AAAA,MACqCC,IADrC,GAC8CL,KAD9C,CACqCK,IADrC;AAE1B,MAAMC,KAAK,GAAG;AACVL,IAAAA,IAAI,EAAJA,IADU;AAEVC,IAAAA,YAAY,EAAZA,YAFU;AAGVC,IAAAA,IAAI,EAAJA,IAHU;AAIVC,IAAAA,MAAM,EAANA;AAJU,GAAd;AAMA,sBACI,gCAAC,iBAAD,CAAU,QAAV;AAAmB,IAAA,KAAK,EAAEE;AAA1B,kBACI;AACI,IAAA,SAAS,EAAE,4BAAW,iBAAX,EAA8B;AACrC,kCAA4BF,MAAM,KAAK,UAAX,IAAyBD,IAAI,KAAK,MADzB;AAErC,8BAAwBA,IAAI,KAAK,MAFI;AAGrC,kCAA4BE;AAHS,KAA9B;AADf,KAOKL,KAAK,CAACO,QAPX,CADJ,CADJ;AAaH;;AAEDR,aAAa,CAACS,SAAd,GAA0B;AACtBP,EAAAA,IAAI,EAAEQ,sBAAUC,MADM;AAEtBR,EAAAA,YAAY,EAAEO,sBAAUC,MAFF;AAGtBP,EAAAA,IAAI,EAAEM,sBAAUE,KAAV,CAAgB,CAAC,MAAD,CAAhB,CAHgB;AAItBP,EAAAA,MAAM,EAAEK,sBAAUE,KAAV,CAAgB,CAAC,YAAD,EAAe,UAAf,CAAhB,CAJc;AAKtBJ,EAAAA,QAAQ,EAAEE,sBAAUG,IALE;AAMtBP,EAAAA,IAAI,EAAEI,sBAAUI;AANM,CAA1B;AASAd,aAAa,CAACe,GAAd,GAAoBA,eAApB;AACAf,aAAa,CAACgB,QAAd,GAAyBA,oBAAzB;AACAhB,aAAa,CAACiB,IAAd,GAAqBA,gBAArB;AACAjB,aAAa,CAACkB,IAAd,GAAqBA,gBAArB;AACAlB,aAAa,CAACmB,OAAd,GAAwBA,mBAAxB;eAEenB,a","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport Row from './Row';\nimport FormItem from './FormItem';\nimport Card from './Card';\nimport Pane from './Pane';\nimport Divider from './Divider';\nimport { StoreCtx } from './context';\n\nfunction VtxFormLayout(props) {\n    const { cols = 2, labelColSpan = 8, mode, layout = 'vertical', card } = props;\n    const store = {\n        cols,\n        labelColSpan,\n        mode,\n        layout,\n    };\n    return (\n        <StoreCtx.Provider value={store}>\n            <div\n                className={classnames('vtx-form-layout', {\n                    'vtx-form-layout-vertical': layout === 'vertical' && mode !== 'view',\n                    'vtx-form-layout-view': mode === 'view',\n                    'vtx-form-layout-has-card': card,\n                })}\n            >\n                {props.children}\n            </div>\n        </StoreCtx.Provider>\n    );\n}\n\nVtxFormLayout.propTypes = {\n    cols: PropTypes.number,\n    labelColSpan: PropTypes.number,\n    mode: PropTypes.oneOf(['view']),\n    layout: PropTypes.oneOf(['horizontal', 'vertical']),\n    children: PropTypes.node,\n    card: PropTypes.bool,\n};\n\nVtxFormLayout.Row = Row;\nVtxFormLayout.FormItem = FormItem;\nVtxFormLayout.Card = Card;\nVtxFormLayout.Pane = Pane;\nVtxFormLayout.Divider = Divider;\n\nexport default VtxFormLayout;\n"],"file":"index.js"}

package/lib/vtx-form-layout/style/css.js

@@ -10,5 +10,9 @@ require("antd/es/icon/style/css");
 
 require("antd/es/tooltip/style/css");
 
+require("antd/es/card/style/css");
+
+require("antd/es/divider/style/css");
+
 require("./index.css");
 //# sourceMappingURL=css.js.map

package/lib/vtx-form-layout/style/css.js.map

@@ -1 +1 @@
-{"version":3,"sources":["vtx-form-layout/style/index.js"],"names":[],"mappings":";;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA","sourcesContent":["import 'antd/es/row/style/css';\nimport 'antd/es/col/style/css';\nimport 'antd/es/form/style/css';\nimport 'antd/es/icon/style/css';\nimport 'antd/es/tooltip/style/css';\nimport './index.less';\n"],"file":"css.js"}
+{"version":3,"sources":["vtx-form-layout/style/index.js"],"names":[],"mappings":";;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA","sourcesContent":["import 'antd/es/row/style/css';\nimport 'antd/es/col/style/css';\nimport 'antd/es/form/style/css';\nimport 'antd/es/icon/style/css';\nimport 'antd/es/tooltip/style/css';\nimport 'antd/es/card/style/css';\nimport 'antd/es/divider/style/css';\nimport './index.less';\n"],"file":"css.js"}

package/lib/vtx-form-layout/style/index.css

@@ -1,6 +1,132 @@
+.vtx-form-layout {
+  position: relative;
+  padding: 0 24px;
+  overflow: hidden;
+}
+.vtx-form-layout .vtx-form-card {
+  position: relative;
+  overflow: hidden;
+}
+.vtx-form-layout .vtx-form-card-expand-icon {
+  color: rgba(0, 0, 0, 0.45);
+  transition: transform 0.24s, -webkit-transform 0.24s;
+}
+.vtx-form-layout .vtx-form-card .ant-card-body {
+  padding: 0;
+}
+.vtx-form-layout .vtx-form-card-content {
+  padding: 20px 24px;
+  padding-bottom: 0;
+}
+.vtx-form-layout .vtx-form-card-content::after {
+  clear: both;
+}
+.vtx-form-layout .vtx-form-card-content::before,
+.vtx-form-layout .vtx-form-card-content::after {
+  display: table;
+  content: '';
+}
+.vtx-form-layout .vtx-form-card-content-hide {
+  display: none;
+}
+.vtx-form-layout .vtx-form-card + .vtx-form-card {
+  margin-top: 20px;
+}
+.vtx-form-layout .vtx-form-pane {
+  position: relative;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  width: 100%;
+  overflow: hidden;
+}
+.vtx-form-layout .vtx-form-pane::after {
+  clear: both;
+}
+.vtx-form-layout .vtx-form-pane::before,
+.vtx-form-layout .vtx-form-pane::after {
+  display: table;
+  content: '';
+}
+.vtx-form-layout .vtx-form-pane-title {
+  margin-bottom: 16px;
+  overflow: hidden;
+  color: rgba(0, 0, 0, 0.85);
+  font-weight: 500;
+  line-height: 1.5;
+  list-style: none;
+}
+.vtx-form-layout .vtx-form-pane-content::after {
+  clear: both;
+}
+.vtx-form-layout .vtx-form-pane-content::before,
+.vtx-form-layout .vtx-form-pane-content::after {
+  display: table;
+  content: '';
+}
+.vtx-form-layout .vtx-form-divider {
+  margin: 0;
+  margin-bottom: 20px;
+}
+.vtx-form-layout .vtx-form-tabs .ant-tabs-bar {
+  padding-right: 12px;
+  padding-left: 12px;
+  border-bottom: none;
+}
+.vtx-form-layout .vtx-form-tabs .ant-tabs-tab {
+  padding: 5px 0 10px 0;
+}
+.vtx-form-layout-vertical {
+  padding: 0 12px;
+}
+.vtx-form-layout-vertical .vtx-form-item-col {
+  padding-right: 12px;
+  padding-left: 12px;
+}
+.vtx-form-layout-vertical .vtx-form-card-content {
+  padding: 20px 12px;
+  padding-bottom: 0;
+}
+.vtx-form-layout-vertical .vtx-form-pane-title {
+  padding: 0 12px;
+}
+.vtx-form-layout-has-card {
+  padding: 0;
+}
+.vtx-form-layout-has-card .vtx-form-tabs .ant-tabs-bar {
+  padding: 0 24px;
+}
+.vtx-form-layout-view .vtx-form-item-col {
+  margin-bottom: 20px;
+}
 .vtx-form-item .ant-form-item-label {
   text-overflow: ellipsis;
 }
+.vtx-form-item .ant-form-item-label label::after {
+  content: '';
+}
+.vtx-form-item-vertical .ant-form-item-label,
+.vtx-form-item-vertical .ant-form-item-control {
+  line-height: 1.5;
+}
+.vtx-form-item-vertical .ant-form-item-label {
+  margin-bottom: 10px;
+}
+.vtx-form-item .ant-form-explain {
+  font-size: 12px;
+}
 .vtx-form-item--view {
   margin-bottom: 0;
 }
+.vtx-form-item--view .ant-form-item-label,
+.vtx-form-item--view .ant-form-item-control {
+  line-height: 1.5;
+}
+.vtx-form-item--view .ant-form-item-label > label {
+  color: rgba(0, 0, 0, 0.65);
+}
+.vtx-form-item--view .ant-form-item-label label::after {
+  content: ':';
+}
+.vtx-form-item--view .ant-form-item-control {
+  color: rgba(0, 0, 0, 0.85);
+}

package/lib/vtx-form-layout/style/index.js

@@ -10,5 +10,9 @@ require("antd/es/icon/style/css");
 
 require("antd/es/tooltip/style/css");
 
+require("antd/es/card/style/css");
+
+require("antd/es/divider/style/css");
+
 require("./index.less");
 //# sourceMappingURL=index.js.map

package/lib/vtx-form-layout/style/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["vtx-form-layout/style/index.js"],"names":[],"mappings":";;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA","sourcesContent":["import 'antd/es/row/style/css';\nimport 'antd/es/col/style/css';\nimport 'antd/es/form/style/css';\nimport 'antd/es/icon/style/css';\nimport 'antd/es/tooltip/style/css';\nimport './index.less';\n"],"file":"index.js"}
+{"version":3,"sources":["vtx-form-layout/style/index.js"],"names":[],"mappings":";;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA","sourcesContent":["import 'antd/es/row/style/css';\nimport 'antd/es/col/style/css';\nimport 'antd/es/form/style/css';\nimport 'antd/es/icon/style/css';\nimport 'antd/es/tooltip/style/css';\nimport 'antd/es/card/style/css';\nimport 'antd/es/divider/style/css';\nimport './index.less';\n"],"file":"index.js"}