@vtx/components 2.5.13 → 2.5.15

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

@@ -1 +1 @@
-{"version":3,"file":"FormItem.js","names":["SPAN","FormItem","props","weights","tip","hideTooltip","label","rest","useContext","StoreCtx","labelColSpan","cols","mode","layout","labelRender","formItemLayout","conversionLabelColSpan","wrapperColSpan","labelCol","span","wrapperCol","classnames","children","propTypes","PropTypes","number","node","oneOfType","string","bool"],"sources":["vtx-form-layout/FormItem.jsx"],"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, hideTooltip, label, ...rest } = props;\n    const { labelColSpan, cols, mode, layout } = useContext(StoreCtx);\n\n    let labelRender = hideTooltip ? label : <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    hideTooltip: PropTypes.bool\n};\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAqC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAErC;AACA,IAAMA,IAAI,GAAG,EAAE;AAEA,SAASC,QAAQ,CAACC,KAAK,EAAE;EACpC,qBAA0DA,KAAK,CAAvDC,OAAO;IAAPA,OAAO,+BAAG,CAAC;IAAEC,GAAG,GAAkCF,KAAK,CAA1CE,GAAG;IAAEC,WAAW,GAAqBH,KAAK,CAArCG,WAAW;IAAEC,KAAK,GAAcJ,KAAK,CAAxBI,KAAK;IAAKC,IAAI,4BAAKL,KAAK;EAC/D,kBAA6C,IAAAM,iBAAU,EAACC,iBAAQ,CAAC;IAAzDC,YAAY,eAAZA,YAAY;IAAEC,IAAI,eAAJA,IAAI;IAAEC,IAAI,eAAJA,IAAI;IAAEC,MAAM,eAANA,MAAM;EAExC,IAAIC,WAAW,GAAGT,WAAW,GAAGC,KAAK,gBAAG,gCAAC,mBAAO;IAAC,KAAK,EAAEA;EAAM,GAAEA,KAAK,CAAW;EAChF,IAAIF,GAAG,EAAE;IACLU,WAAW,gBACP,8CACKR,KAAK,uBACN,gCAAC,mBAAO;MAAC,KAAK,EAAEF;IAAI,gBAChB,gCAAC,gBAAI;MAAC,IAAI,EAAC;IAAmB,EAAG,CAC3B,CAEjB;EACL;EAEA,IAAIW,cAAc,GAAG,IAAI;EACzB,IAAIF,MAAM,KAAK,YAAY,EAAE;IACzB,IAAMG,sBAAsB,GAAGN,YAAY,GAAGP,OAAO;IACrD,IAAMc,cAAc,GAAGjB,IAAI,GAAGgB,sBAAsB;IACpDD,cAAc,GAAG;MACbG,QAAQ,EAAE;QAAEC,IAAI,EAAEH;MAAuB,CAAC;MAC1CI,UAAU,EAAE;QAAED,IAAI,EAAEF;MAAe;IACvC,CAAC;EACL;EAEA,oBACI,gCAAC,eAAG;IAAC,IAAI,EAAGjB,IAAI,GAAGG,OAAO,GAAIQ,IAAK;IAAC,SAAS,EAAC;EAAmB,gBAC7D,gCAAC,gBAAI,CAAC,IAAI;IACN,SAAS,EAAE,IAAAU,sBAAU,EACjB,eAAe,EACf;MAAE,wBAAwB,EAAER,MAAM,KAAK,UAAU,IAAID,IAAI,KAAK;IAAO,CAAC,EACtE;MAAE,qBAAqB,EAAEA,IAAI,KAAK;IAAO,CAAC;EAC5C,GACEG,cAAc;IAClB,KAAK,EAAED;EAAY,GACfP,IAAI,GAEPL,KAAK,CAACoB,QAAQ,CACP,CACV;AAEd;AAEArB,QAAQ,CAACsB,SAAS,GAAG;EACjBpB,OAAO,EAAEqB,qBAAS,CAACC,MAAM;EACzBH,QAAQ,EAAEE,qBAAS,CAACE,IAAI;EACxBtB,GAAG,EAAEoB,qBAAS,CAACG,SAAS,CAAC,CAACH,qBAAS,CAACI,MAAM,EAAEJ,qBAAS,CAACE,IAAI,CAAC,CAAC;EAC5DpB,KAAK,EAAEkB,qBAAS,CAACG,SAAS,CAAC,CAACH,qBAAS,CAACI,MAAM,EAAEJ,qBAAS,CAACE,IAAI,CAAC,CAAC;EAC9DrB,WAAW,EAAEmB,qBAAS,CAACK;AAC3B,CAAC"}
+{"version":3,"file":"FormItem.js","names":["SPAN","FormItem","props","weights","tip","hideTooltip","label","rest","useContext","StoreCtx","labelColSpan","cols","mode","layout","labelRender","formItemLayout","conversionLabelColSpan","wrapperColSpan","labelCol","span","wrapperCol","classnames","children","propTypes","PropTypes","number","node","oneOfType","string","bool"],"sources":["vtx-form-layout/FormItem.jsx"],"sourcesContent":["import React, { useContext } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport Form from 'antd/es/form';\r\nimport Col from 'antd/es/col';\r\nimport Icon from 'antd/es/icon';\r\nimport Tooltip from 'antd/es/tooltip';\r\nimport classnames from 'classnames';\r\nimport { StoreCtx } from './context';\r\n\r\n// 24 栅格\r\nconst SPAN = 24;\r\n\r\nexport default function FormItem(props) {\r\n    const { weights = 1, tip, hideTooltip, label, ...rest } = props;\r\n    const { labelColSpan, cols, mode, layout } = useContext(StoreCtx);\r\n\r\n    let labelRender = hideTooltip ? label : <Tooltip title={label}>{label}</Tooltip>;\r\n    if (tip) {\r\n        labelRender = (\r\n            <span>\r\n                {label}&nbsp;\r\n                <Tooltip title={tip}>\r\n                    <Icon type=\"question-circle-o\" />\r\n                </Tooltip>\r\n            </span>\r\n        );\r\n    }\r\n\r\n    let formItemLayout = null;\r\n    if (layout === 'horizontal') {\r\n        const conversionLabelColSpan = labelColSpan / weights;\r\n        const wrapperColSpan = SPAN - conversionLabelColSpan;\r\n        formItemLayout = {\r\n            labelCol: { span: conversionLabelColSpan },\r\n            wrapperCol: { span: wrapperColSpan },\r\n        };\r\n    }\r\n\r\n    return (\r\n        <Col span={(SPAN * weights) / cols} className=\"vtx-form-item-col\">\r\n            <Form.Item\r\n                className={classnames(\r\n                    'vtx-form-item',\r\n                    { 'vtx-form-item-vertical': layout === 'vertical' && mode !== 'view' },\r\n                    { 'vtx-form-item--view': mode === 'view' },\r\n                )}\r\n                {...formItemLayout}\r\n                label={labelRender}\r\n                {...rest}\r\n            >\r\n                {props.children}\r\n            </Form.Item>\r\n        </Col>\r\n    );\r\n}\r\n\r\nFormItem.propTypes = {\r\n    weights: PropTypes.number,\r\n    children: PropTypes.node,\r\n    tip: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),\r\n    label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),\r\n    hideTooltip: PropTypes.bool\r\n};\r\n"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;AAEA;AACA,IAAMA,IAAI,GAAG,EAAb;;AAEe,SAASC,QAAT,CAAkBC,KAAlB,EAAyB;EACpC,qBAA0DA,KAA1D,CAAQC,OAAR;EAAA,IAAQA,OAAR,+BAAkB,CAAlB;EAAA,IAAqBC,GAArB,GAA0DF,KAA1D,CAAqBE,GAArB;EAAA,IAA0BC,WAA1B,GAA0DH,KAA1D,CAA0BG,WAA1B;EAAA,IAAuCC,KAAvC,GAA0DJ,KAA1D,CAAuCI,KAAvC;EAAA,IAAiDC,IAAjD,4BAA0DL,KAA1D;;EACA,kBAA6C,IAAAM,iBAAA,EAAWC,iBAAX,CAA7C;EAAA,IAAQC,YAAR,eAAQA,YAAR;EAAA,IAAsBC,IAAtB,eAAsBA,IAAtB;EAAA,IAA4BC,IAA5B,eAA4BA,IAA5B;EAAA,IAAkCC,MAAlC,eAAkCA,MAAlC;;EAEA,IAAIC,WAAW,GAAGT,WAAW,GAAGC,KAAH,gBAAW,gCAAC,mBAAD;IAAS,KAAK,EAAEA;EAAhB,GAAwBA,KAAxB,CAAxC;;EACA,IAAIF,GAAJ,EAAS;IACLU,WAAW,gBACP,8CACKR,KADL,uBAEI,gCAAC,mBAAD;MAAS,KAAK,EAAEF;IAAhB,gBACI,gCAAC,gBAAD;MAAM,IAAI,EAAC;IAAX,EADJ,CAFJ,CADJ;EAQH;;EAED,IAAIW,cAAc,GAAG,IAArB;;EACA,IAAIF,MAAM,KAAK,YAAf,EAA6B;IACzB,IAAMG,sBAAsB,GAAGN,YAAY,GAAGP,OAA9C;IACA,IAAMc,cAAc,GAAGjB,IAAI,GAAGgB,sBAA9B;IACAD,cAAc,GAAG;MACbG,QAAQ,EAAE;QAAEC,IAAI,EAAEH;MAAR,CADG;MAEbI,UAAU,EAAE;QAAED,IAAI,EAAEF;MAAR;IAFC,CAAjB;EAIH;;EAED,oBACI,gCAAC,eAAD;IAAK,IAAI,EAAGjB,IAAI,GAAGG,OAAR,GAAmBQ,IAA9B;IAAoC,SAAS,EAAC;EAA9C,gBACI,gCAAC,gBAAD,CAAM,IAAN;IACI,SAAS,EAAE,IAAAU,sBAAA,EACP,eADO,EAEP;MAAE,0BAA0BR,MAAM,KAAK,UAAX,IAAyBD,IAAI,KAAK;IAA9D,CAFO,EAGP;MAAE,uBAAuBA,IAAI,KAAK;IAAlC,CAHO;EADf,GAMQG,cANR;IAOI,KAAK,EAAED;EAPX,GAQQP,IARR,GAUKL,KAAK,CAACoB,QAVX,CADJ,CADJ;AAgBH;;AAEDrB,QAAQ,CAACsB,SAAT,GAAqB;EACjBpB,OAAO,EAAEqB,qBAAA,CAAUC,MADF;EAEjBH,QAAQ,EAAEE,qBAAA,CAAUE,IAFH;EAGjBtB,GAAG,EAAEoB,qBAAA,CAAUG,SAAV,CAAoB,CAACH,qBAAA,CAAUI,MAAX,EAAmBJ,qBAAA,CAAUE,IAA7B,CAApB,CAHY;EAIjBpB,KAAK,EAAEkB,qBAAA,CAAUG,SAAV,CAAoB,CAACH,qBAAA,CAAUI,MAAX,EAAmBJ,qBAAA,CAAUE,IAA7B,CAApB,CAJU;EAKjBrB,WAAW,EAAEmB,qBAAA,CAAUK;AALN,CAArB"}

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

@@ -4,13 +4,17 @@ 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;
+      _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", {
@@ -19,6 +23,7 @@ function Pane(props) {
     className: "".concat(prefixCls, "-content")
   }, props.children));
 }
+
 Pane.propTypes = {
   prefixCls: _propTypes["default"].string,
   title: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].node]),

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

@@ -1 +1 @@
-{"version":3,"file":"Pane.js","names":["Pane","props","title","prefixCls","children","propTypes","PropTypes","string","oneOfType","node"],"sources":["vtx-form-layout/Pane.jsx"],"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"],"mappings":";;;;;;AAAA;AACA;AAAmC;AAEnC,SAASA,IAAI,CAACC,KAAK,EAAE;EACjB,IAAQC,KAAK,GAAkCD,KAAK,CAA5CC,KAAK;IAAA,mBAAkCD,KAAK,CAArCE,SAAS;IAATA,SAAS,iCAAG,eAAe;EAC1C,oBACI;IAAK,SAAS,EAAEA;EAAU,gBACtB;IAAK,SAAS,YAAKA,SAAS;EAAS,GAAED,KAAK,CAAO,eACnD;IAAK,SAAS,YAAKC,SAAS;EAAW,GAAEF,KAAK,CAACG,QAAQ,CAAO,CAC5D;AAEd;AAEAJ,IAAI,CAACK,SAAS,GAAG;EACbF,SAAS,EAAEG,qBAAS,CAACC,MAAM;EAC3BL,KAAK,EAAEI,qBAAS,CAACE,SAAS,CAAC,CAACF,qBAAS,CAACC,MAAM,EAAED,qBAAS,CAACG,IAAI,CAAC,CAAC;EAC9DL,QAAQ,EAAEE,qBAAS,CAACG;AACxB,CAAC;AAAC,eAEaT,IAAI;AAAA"}
+{"version":3,"file":"Pane.js","names":["Pane","props","title","prefixCls","children","propTypes","PropTypes","string","oneOfType","node"],"sources":["vtx-form-layout/Pane.jsx"],"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"],"mappings":";;;;;;;AAAA;;AACA;;;;AAEA,SAASA,IAAT,CAAcC,KAAd,EAAqB;EACjB,IAAQC,KAAR,GAA+CD,KAA/C,CAAQC,KAAR;EAAA,uBAA+CD,KAA/C,CAAeE,SAAf;EAAA,IAAeA,SAAf,iCAA2B,eAA3B;EACA,oBACI;IAAK,SAAS,EAAEA;EAAhB,gBACI;IAAK,SAAS,YAAKA,SAAL;EAAd,GAAuCD,KAAvC,CADJ,eAEI;IAAK,SAAS,YAAKC,SAAL;EAAd,GAAyCF,KAAK,CAACG,QAA/C,CAFJ,CADJ;AAMH;;AAEDJ,IAAI,CAACK,SAAL,GAAiB;EACbF,SAAS,EAAEG,qBAAA,CAAUC,MADR;EAEbL,KAAK,EAAEI,qBAAA,CAAUE,SAAV,CAAoB,CAACF,qBAAA,CAAUC,MAAX,EAAmBD,qBAAA,CAAUG,IAA7B,CAApB,CAFM;EAGbL,QAAQ,EAAEE,qBAAA,CAAUG;AAHP,CAAjB;eAMeT,I"}

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

@@ -4,13 +4,19 @@ 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
 };

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

@@ -1 +1 @@
-{"version":3,"file":"Row.js","names":["FormRow","props","children","propTypes","PropTypes","node"],"sources":["vtx-form-layout/Row.js"],"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"],"mappings":";;;;;;AAAA;AACA;AACA;AAA8B;AAE9B,SAASA,OAAO,CAACC,KAAK,EAAE;EACpB,oBAAO,gCAAC,eAAG,EAAKA,KAAK,EAAGA,KAAK,CAACC,QAAQ,CAAO;AACjD;AAEAF,OAAO,CAACG,SAAS,GAAG;EAAED,QAAQ,EAAEE,qBAAS,CAACC;AAAK,CAAC;AAAC,eAElCL,OAAO;AAAA"}
+{"version":3,"file":"Row.js","names":["FormRow","props","children","propTypes","PropTypes","node"],"sources":["vtx-form-layout/Row.js"],"sourcesContent":["import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport Row from 'antd/es/row';\r\n\r\nfunction FormRow(props) {\r\n    return <Row {...props}>{props.children}</Row>;\r\n}\r\n\r\nFormRow.propTypes = { children: PropTypes.node };\r\n\r\nexport default FormRow;\r\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;AAEA,SAASA,OAAT,CAAiBC,KAAjB,EAAwB;EACpB,oBAAO,gCAAC,eAAD,EAASA,KAAT,EAAiBA,KAAK,CAACC,QAAvB,CAAP;AACH;;AAEDF,OAAO,CAACG,SAAR,GAAoB;EAAED,QAAQ,EAAEE,qBAAA,CAAUC;AAAtB,CAApB;eAEeL,O"}

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

@@ -4,7 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.StoreCtx = void 0;
+
 var _react = require("react");
+
 var StoreCtx = /*#__PURE__*/(0, _react.createContext)({});
 exports.StoreCtx = StoreCtx;
 //# sourceMappingURL=context.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"context.js","names":["StoreCtx","createContext"],"sources":["vtx-form-layout/context.js"],"sourcesContent":["import { createContext } from 'react';\n\nexport const StoreCtx = createContext({});\n"],"mappings":";;;;;;AAAA;AAEO,IAAMA,QAAQ,gBAAG,IAAAC,oBAAa,EAAC,CAAC,CAAC,CAAC;AAAC"}
+{"version":3,"file":"context.js","names":["StoreCtx","createContext"],"sources":["vtx-form-layout/context.js"],"sourcesContent":["import { createContext } from 'react';\n\nexport const StoreCtx = createContext({});\n"],"mappings":";;;;;;;AAAA;;AAEO,IAAMA,QAAQ,gBAAG,IAAAC,oBAAA,EAAc,EAAd,CAAjB"}

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

@@ -1,41 +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;
-        }
-    }
-}
+.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

@@ -4,28 +4,41 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
+
 var _react = _interopRequireDefault(require("react"));
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
+
 var _classnames = _interopRequireDefault(require("classnames"));
+
 var _lodash = _interopRequireDefault(require("lodash.merge"));
+
 var _skeleton = _interopRequireDefault(require("antd/es/skeleton"));
+
 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) {
   var _props$cols = props.cols,
-    cols = _props$cols === void 0 ? 2 : _props$cols,
-    _props$labelColSpan = props.labelColSpan,
-    labelColSpan = _props$labelColSpan === void 0 ? 8 : _props$labelColSpan,
-    mode = props.mode,
-    _props$layout = props.layout,
-    layout = _props$layout === void 0 ? 'vertical' : _props$layout,
-    card = props.card,
-    skeleton = props.skeleton;
+      cols = _props$cols === void 0 ? 2 : _props$cols,
+      _props$labelColSpan = props.labelColSpan,
+      labelColSpan = _props$labelColSpan === void 0 ? 8 : _props$labelColSpan,
+      mode = props.mode,
+      _props$layout = props.layout,
+      layout = _props$layout === void 0 ? 'vertical' : _props$layout,
+      card = props.card,
+      skeleton = props.skeleton;
   var store = {
     cols: cols,
     labelColSpan: labelColSpan,
@@ -50,6 +63,7 @@ function VtxFormLayout(props) {
     })
   }, /*#__PURE__*/_react["default"].createElement(_skeleton["default"], (0, _lodash["default"])(defaultSkeleton, skeleton), props.children)));
 }
+
 VtxFormLayout.propTypes = {
   cols: _propTypes["default"].number,
   labelColSpan: _propTypes["default"].number,

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["VtxFormLayout","props","cols","labelColSpan","mode","layout","card","skeleton","store","defaultSkeleton","loading","title","paragraph","width","rows","classnames","merge","children","propTypes","PropTypes","number","oneOf","node","bool","object","Row","FormItem","Card","Pane","Divider"],"sources":["vtx-form-layout/index.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport merge from 'lodash.merge';\nimport Skeleton from 'antd/es/skeleton';\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, skeleton } = props;\n    const store = {\n        cols,\n        labelColSpan,\n        mode,\n        layout,\n    };\n    const defaultSkeleton = {\n        loading: false,\n        title: false,\n        paragraph: {\n            width: '100%',\n            rows: 4,\n        },\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                <Skeleton {...merge(defaultSkeleton, skeleton)}>{props.children}</Skeleton>\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    skeleton: PropTypes.object,\n};\n\nVtxFormLayout.Row = Row;\nVtxFormLayout.FormItem = FormItem;\nVtxFormLayout.Card = Card;\nVtxFormLayout.Pane = Pane;\nVtxFormLayout.Divider = Divider;\n\nexport default VtxFormLayout;\n"],"mappings":";;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAqC;AAErC,SAASA,aAAa,CAACC,KAAK,EAAE;EAC1B,kBAAkFA,KAAK,CAA/EC,IAAI;IAAJA,IAAI,4BAAG,CAAC;IAAA,sBAAkED,KAAK,CAArEE,YAAY;IAAZA,YAAY,oCAAG,CAAC;IAAEC,IAAI,GAA0CH,KAAK,CAAnDG,IAAI;IAAA,gBAA0CH,KAAK,CAA7CI,MAAM;IAANA,MAAM,8BAAG,UAAU;IAAEC,IAAI,GAAeL,KAAK,CAAxBK,IAAI;IAAEC,QAAQ,GAAKN,KAAK,CAAlBM,QAAQ;EAC7E,IAAMC,KAAK,GAAG;IACVN,IAAI,EAAJA,IAAI;IACJC,YAAY,EAAZA,YAAY;IACZC,IAAI,EAAJA,IAAI;IACJC,MAAM,EAANA;EACJ,CAAC;EACD,IAAMI,eAAe,GAAG;IACpBC,OAAO,EAAE,KAAK;IACdC,KAAK,EAAE,KAAK;IACZC,SAAS,EAAE;MACPC,KAAK,EAAE,MAAM;MACbC,IAAI,EAAE;IACV;EACJ,CAAC;EACD,oBACI,gCAAC,iBAAQ,CAAC,QAAQ;IAAC,KAAK,EAAEN;EAAM,gBAC5B;IACI,SAAS,EAAE,IAAAO,sBAAU,EAAC,iBAAiB,EAAE;MACrC,0BAA0B,EAAEV,MAAM,KAAK,UAAU,IAAID,IAAI,KAAK,MAAM;MACpE,sBAAsB,EAAEA,IAAI,KAAK,MAAM;MACvC,0BAA0B,EAAEE;IAChC,CAAC;EAAE,gBAEH,gCAAC,oBAAQ,EAAK,IAAAU,kBAAK,EAACP,eAAe,EAAEF,QAAQ,CAAC,EAAGN,KAAK,CAACgB,QAAQ,CAAY,CACzE,CACU;AAE5B;AAEAjB,aAAa,CAACkB,SAAS,GAAG;EACtBhB,IAAI,EAAEiB,qBAAS,CAACC,MAAM;EACtBjB,YAAY,EAAEgB,qBAAS,CAACC,MAAM;EAC9BhB,IAAI,EAAEe,qBAAS,CAACE,KAAK,CAAC,CAAC,MAAM,CAAC,CAAC;EAC/BhB,MAAM,EAAEc,qBAAS,CAACE,KAAK,CAAC,CAAC,YAAY,EAAE,UAAU,CAAC,CAAC;EACnDJ,QAAQ,EAAEE,qBAAS,CAACG,IAAI;EACxBhB,IAAI,EAAEa,qBAAS,CAACI,IAAI;EACpBhB,QAAQ,EAAEY,qBAAS,CAACK;AACxB,CAAC;AAEDxB,aAAa,CAACyB,GAAG,GAAGA,eAAG;AACvBzB,aAAa,CAAC0B,QAAQ,GAAGA,oBAAQ;AACjC1B,aAAa,CAAC2B,IAAI,GAAGA,gBAAI;AACzB3B,aAAa,CAAC4B,IAAI,GAAGA,gBAAI;AACzB5B,aAAa,CAAC6B,OAAO,GAAGA,mBAAO;AAAC,eAEjB7B,aAAa;AAAA"}
+{"version":3,"file":"index.js","names":["VtxFormLayout","props","cols","labelColSpan","mode","layout","card","skeleton","store","defaultSkeleton","loading","title","paragraph","width","rows","classnames","merge","children","propTypes","PropTypes","number","oneOf","node","bool","object","Row","FormItem","Card","Pane","Divider"],"sources":["vtx-form-layout/index.jsx"],"sourcesContent":["import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport classnames from 'classnames';\r\nimport merge from 'lodash.merge';\r\nimport Skeleton from 'antd/es/skeleton';\r\nimport Row from './Row';\r\nimport FormItem from './FormItem';\r\nimport Card from './Card';\r\nimport Pane from './Pane';\r\nimport Divider from './Divider';\r\nimport { StoreCtx } from './context';\r\n\r\nfunction VtxFormLayout(props) {\r\n    const { cols = 2, labelColSpan = 8, mode, layout = 'vertical', card, skeleton } = props;\r\n    const store = {\r\n        cols,\r\n        labelColSpan,\r\n        mode,\r\n        layout,\r\n    };\r\n    const defaultSkeleton = {\r\n        loading: false,\r\n        title: false,\r\n        paragraph: {\r\n            width: '100%',\r\n            rows: 4,\r\n        },\r\n    };\r\n    return (\r\n        <StoreCtx.Provider value={store}>\r\n            <div\r\n                className={classnames('vtx-form-layout', {\r\n                    'vtx-form-layout-vertical': layout === 'vertical' && mode !== 'view',\r\n                    'vtx-form-layout-view': mode === 'view',\r\n                    'vtx-form-layout-has-card': card,\r\n                })}\r\n            >\r\n                <Skeleton {...merge(defaultSkeleton, skeleton)}>{props.children}</Skeleton>\r\n            </div>\r\n        </StoreCtx.Provider>\r\n    );\r\n}\r\n\r\nVtxFormLayout.propTypes = {\r\n    cols: PropTypes.number,\r\n    labelColSpan: PropTypes.number,\r\n    mode: PropTypes.oneOf(['view']),\r\n    layout: PropTypes.oneOf(['horizontal', 'vertical']),\r\n    children: PropTypes.node,\r\n    card: PropTypes.bool,\r\n    skeleton: PropTypes.object,\r\n};\r\n\r\nVtxFormLayout.Row = Row;\r\nVtxFormLayout.FormItem = FormItem;\r\nVtxFormLayout.Card = Card;\r\nVtxFormLayout.Pane = Pane;\r\nVtxFormLayout.Divider = Divider;\r\n\r\nexport default VtxFormLayout;\r\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AAEA,SAASA,aAAT,CAAuBC,KAAvB,EAA8B;EAC1B,kBAAkFA,KAAlF,CAAQC,IAAR;EAAA,IAAQA,IAAR,4BAAe,CAAf;EAAA,0BAAkFD,KAAlF,CAAkBE,YAAlB;EAAA,IAAkBA,YAAlB,oCAAiC,CAAjC;EAAA,IAAoCC,IAApC,GAAkFH,KAAlF,CAAoCG,IAApC;EAAA,oBAAkFH,KAAlF,CAA0CI,MAA1C;EAAA,IAA0CA,MAA1C,8BAAmD,UAAnD;EAAA,IAA+DC,IAA/D,GAAkFL,KAAlF,CAA+DK,IAA/D;EAAA,IAAqEC,QAArE,GAAkFN,KAAlF,CAAqEM,QAArE;EACA,IAAMC,KAAK,GAAG;IACVN,IAAI,EAAJA,IADU;IAEVC,YAAY,EAAZA,YAFU;IAGVC,IAAI,EAAJA,IAHU;IAIVC,MAAM,EAANA;EAJU,CAAd;EAMA,IAAMI,eAAe,GAAG;IACpBC,OAAO,EAAE,KADW;IAEpBC,KAAK,EAAE,KAFa;IAGpBC,SAAS,EAAE;MACPC,KAAK,EAAE,MADA;MAEPC,IAAI,EAAE;IAFC;EAHS,CAAxB;EAQA,oBACI,gCAAC,iBAAD,CAAU,QAAV;IAAmB,KAAK,EAAEN;EAA1B,gBACI;IACI,SAAS,EAAE,IAAAO,sBAAA,EAAW,iBAAX,EAA8B;MACrC,4BAA4BV,MAAM,KAAK,UAAX,IAAyBD,IAAI,KAAK,MADzB;MAErC,wBAAwBA,IAAI,KAAK,MAFI;MAGrC,4BAA4BE;IAHS,CAA9B;EADf,gBAOI,gCAAC,oBAAD,EAAc,IAAAU,kBAAA,EAAMP,eAAN,EAAuBF,QAAvB,CAAd,EAAiDN,KAAK,CAACgB,QAAvD,CAPJ,CADJ,CADJ;AAaH;;AAEDjB,aAAa,CAACkB,SAAd,GAA0B;EACtBhB,IAAI,EAAEiB,qBAAA,CAAUC,MADM;EAEtBjB,YAAY,EAAEgB,qBAAA,CAAUC,MAFF;EAGtBhB,IAAI,EAAEe,qBAAA,CAAUE,KAAV,CAAgB,CAAC,MAAD,CAAhB,CAHgB;EAItBhB,MAAM,EAAEc,qBAAA,CAAUE,KAAV,CAAgB,CAAC,YAAD,EAAe,UAAf,CAAhB,CAJc;EAKtBJ,QAAQ,EAAEE,qBAAA,CAAUG,IALE;EAMtBhB,IAAI,EAAEa,qBAAA,CAAUI,IANM;EAOtBhB,QAAQ,EAAEY,qBAAA,CAAUK;AAPE,CAA1B;AAUAxB,aAAa,CAACyB,GAAd,GAAoBA,eAApB;AACAzB,aAAa,CAAC0B,QAAd,GAAyBA,oBAAzB;AACA1B,aAAa,CAAC2B,IAAd,GAAqBA,gBAArB;AACA3B,aAAa,CAAC4B,IAAd,GAAqBA,gBAArB;AACA5B,aAAa,CAAC6B,OAAd,GAAwBA,mBAAxB;eAEe7B,a"}

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

@@ -1,12 +1,20 @@
 "use strict";
 
 require("antd/es/row/style/css");
+
 require("antd/es/col/style/css");
+
 require("antd/es/form/style/css");
+
 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("antd/es/skeleton/style/css");
+
 require("./index.css");
 //# sourceMappingURL=css.js.map

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

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

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

@@ -1,12 +1,20 @@
 "use strict";
 
 require("antd/es/row/style/css");
+
 require("antd/es/col/style/css");
+
 require("antd/es/form/style/css");
+
 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("antd/es/skeleton/style/css");
+
 require("./index.less");
 //# sourceMappingURL=index.js.map

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

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

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

@@ -1,148 +1,148 @@
-// @import (reference) '~antd/es/style/themes/index.less';
-@line-height: 1.5;
-@black: #000;
-
-.vtx-form-layout {
-    position: relative;
-    padding: 0 24px;
-    overflow: hidden;
-    .vtx-form-card {
-        position: relative;
-        overflow: hidden;
-        &-expand-icon {
-            color: fade(@black, 45%);
-            transition: transform 0.24s, -webkit-transform 0.24s;
-        }
-        .ant-card-body {
-            padding: 0;
-        }
-        &-content {
-            padding: 20px 24px;
-            padding-bottom: 0;
-            &::after {
-                clear: both;
-            }
-            &::before,
-            &::after {
-                display: table;
-                content: '';
-            }
-        }
-        &-content-hide {
-            display: none;
-        }
-    }
-    .vtx-form-card + .vtx-form-card {
-        margin-top: 20px;
-    }
-    .vtx-form-pane {
-        position: relative;
-        box-sizing: border-box;
-        width: 100%;
-        overflow: hidden;
-        &::after {
-            clear: both;
-        }
-        &::before,
-        &::after {
-            display: table;
-            content: '';
-        }
-        &-title {
-            margin-bottom: 16px;
-            overflow: hidden;
-            color: fade(@black, 85%);
-            font-weight: 500;
-            line-height: @line-height;
-            list-style: none;
-        }
-        &-content {
-            &::after {
-                clear: both;
-            }
-            &::before,
-            &::after {
-                display: table;
-                content: '';
-            }
-        }
-    }
-    .vtx-form-divider {
-        margin: 0;
-        margin-bottom: 20px;
-    }
-    .vtx-form-tabs {
-        .ant-tabs-bar {
-            padding-right: 12px;
-            padding-left: 12px;
-            border-bottom: none;
-        }
-        .ant-tabs-tab {
-            padding: 5px 0 10px 0;
-        }
-    }
-    &-vertical {
-        padding: 0 12px;
-        .vtx-form-item-col {
-            padding-right: 12px;
-            padding-left: 12px;
-        }
-        .vtx-form-card-content {
-            padding: 20px 12px;
-            padding-bottom: 0;
-        }
-        .vtx-form-pane-title {
-            padding: 0 12px;
-        }
-    }
-    &-has-card {
-        padding: 0;
-        .vtx-form-tabs .ant-tabs-bar {
-            padding: 0 24px;
-        }
-    }
-    &-view {
-        .vtx-form-item-col {
-            margin-bottom: 20px;
-        }
-    }
-}
-
-.vtx-form-item {
-    .ant-form-item-label {
-        text-overflow: ellipsis;
-        label::after {
-            content: '';
-        }
-    }
-    &-vertical {
-        .ant-form-item-label,
-        .ant-form-item-control {
-            line-height: @line-height;
-        }
-        .ant-form-item-label {
-            margin-bottom: 10px;
-        }
-    }
-    .ant-form-explain {
-        font-size: 12px;
-    }
-    &--view {
-        margin-bottom: 0;
-        .ant-form-item-label,
-        .ant-form-item-control {
-            line-height: @line-height;
-        }
-        .ant-form-item-label {
-            & > label {
-                color: fade(@black, 65%);
-            }
-            label::after {
-                content: ':';
-            }
-        }
-        .ant-form-item-control {
-            color: fade(@black, 85%);
-        }
-    }
-}
+// @import (reference) '~antd/es/style/themes/index.less';
+@line-height: 1.5;
+@black: #000;
+
+.vtx-form-layout {
+    position: relative;
+    padding: 0 24px;
+    overflow: hidden;
+    .vtx-form-card {
+        position: relative;
+        overflow: hidden;
+        &-expand-icon {
+            color: fade(@black, 45%);
+            transition: transform 0.24s, -webkit-transform 0.24s;
+        }
+        .ant-card-body {
+            padding: 0;
+        }
+        &-content {
+            padding: 20px 24px;
+            padding-bottom: 0;
+            &::after {
+                clear: both;
+            }
+            &::before,
+            &::after {
+                display: table;
+                content: '';
+            }
+        }
+        &-content-hide {
+            display: none;
+        }
+    }
+    .vtx-form-card + .vtx-form-card {
+        margin-top: 20px;
+    }
+    .vtx-form-pane {
+        position: relative;
+        box-sizing: border-box;
+        width: 100%;
+        overflow: hidden;
+        &::after {
+            clear: both;
+        }
+        &::before,
+        &::after {
+            display: table;
+            content: '';
+        }
+        &-title {
+            margin-bottom: 16px;
+            overflow: hidden;
+            color: fade(@black, 85%);
+            font-weight: 500;
+            line-height: @line-height;
+            list-style: none;
+        }
+        &-content {
+            &::after {
+                clear: both;
+            }
+            &::before,
+            &::after {
+                display: table;
+                content: '';
+            }
+        }
+    }
+    .vtx-form-divider {
+        margin: 0;
+        margin-bottom: 20px;
+    }
+    .vtx-form-tabs {
+        .ant-tabs-bar {
+            padding-right: 12px;
+            padding-left: 12px;
+            border-bottom: none;
+        }
+        .ant-tabs-tab {
+            padding: 5px 0 10px 0;
+        }
+    }
+    &-vertical {
+        padding: 0 12px;
+        .vtx-form-item-col {
+            padding-right: 12px;
+            padding-left: 12px;
+        }
+        .vtx-form-card-content {
+            padding: 20px 12px;
+            padding-bottom: 0;
+        }
+        .vtx-form-pane-title {
+            padding: 0 12px;
+        }
+    }
+    &-has-card {
+        padding: 0;
+        .vtx-form-tabs .ant-tabs-bar {
+            padding: 0 24px;
+        }
+    }
+    &-view {
+        .vtx-form-item-col {
+            margin-bottom: 20px;
+        }
+    }
+}
+
+.vtx-form-item {
+    .ant-form-item-label {
+        text-overflow: ellipsis;
+        label::after {
+            content: '';
+        }
+    }
+    &-vertical {
+        .ant-form-item-label,
+        .ant-form-item-control {
+            line-height: @line-height;
+        }
+        .ant-form-item-label {
+            margin-bottom: 10px;
+        }
+    }
+    .ant-form-explain {
+        font-size: 12px;
+    }
+    &--view {
+        margin-bottom: 0;
+        .ant-form-item-label,
+        .ant-form-item-control {
+            line-height: @line-height;
+        }
+        .ant-form-item-label {
+            & > label {
+                color: fade(@black, 65%);
+            }
+            label::after {
+                content: ':';
+            }
+        }
+        .ant-form-item-control {
+            color: fade(@black, 85%);
+        }
+    }
+}