vxe-pc-ui 0.0.2 → 0.1.0

package/lib/form/src/form-config-item.js

@@ -0,0 +1,192 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _vue = require("vue");
+var _xeUtils = _interopRequireDefault(require("xe-utils"));
+var _iconStore = _interopRequireDefault(require("../../ui/src/iconStore"));
+var _renderer = require("../../ui/src/renderer");
+var _utils = require("../../ui/src/utils");
+var _vn = require("../../ui/src/vn");
+var _i18n = require("../../ui/src/i18n");
+var _render = require("./render");
+var _util = require("./util");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const VxeFormConfigItem = (0, _vue.defineComponent)({
+  name: 'VxeFormConfigItem',
+  props: {
+    itemConfig: Object
+  },
+  setup(props) {
+    const $xeform = (0, _vue.inject)('$xeForm', {});
+    const xeformiteminfo = {
+      itemConfig: props.itemConfig
+    };
+    (0, _vue.provide)('$xeFormItemInfo', xeformiteminfo);
+    const renderVN = () => {
+      const {
+        reactData
+      } = $xeform;
+      const {
+        data,
+        rules,
+        span: allSpan,
+        align: allAlign,
+        titleAlign: allTitleAlign,
+        titleWidth: allTitleWidth,
+        titleColon: allTitleColon,
+        titleAsterisk: allTitleAsterisk,
+        titleOverflow: allTitleOverflow,
+        vertical: allVertical
+      } = $xeform.props;
+      const {
+        computeValidOpts
+      } = $xeform.getComputeMaps();
+      const item = props.itemConfig;
+      const {
+        collapseAll
+      } = reactData;
+      const validOpts = computeValidOpts.value;
+      const {
+        slots,
+        title,
+        visible,
+        folding,
+        field,
+        collapseNode,
+        itemRender,
+        showError,
+        errRule,
+        className,
+        titleOverflow,
+        vertical,
+        children,
+        showTitle,
+        contentClassName,
+        contentStyle,
+        titleClassName,
+        titleStyle
+      } = item;
+      const compConf = (0, _utils.isEnableConf)(itemRender) ? _renderer.renderer.get(itemRender.name) : null;
+      const itemClassName = compConf ? compConf.itemClassName : '';
+      const itemStyle = compConf ? compConf.itemStyle : null;
+      const itemContentClassName = compConf ? compConf.itemContentClassName : '';
+      const itemContentStyle = compConf ? compConf.itemContentStyle : null;
+      const itemTitleClassName = compConf ? compConf.itemTitleClassName : '';
+      const itemTitleStyle = compConf ? compConf.itemTitleStyle : null;
+      const defaultSlot = slots ? slots.default : null;
+      const titleSlot = slots ? slots.title : null;
+      const span = item.span || allSpan;
+      const align = item.align || allAlign;
+      const titleAlign = _xeUtils.default.eqNull(item.titleAlign) ? allTitleAlign : item.titleAlign;
+      const titleWidth = _xeUtils.default.eqNull(item.titleWidth) ? allTitleWidth : item.titleWidth;
+      const titleColon = _xeUtils.default.eqNull(item.titleColon) ? allTitleColon : item.titleColon;
+      const titleAsterisk = _xeUtils.default.eqNull(item.titleAsterisk) ? allTitleAsterisk : item.titleAsterisk;
+      const itemOverflow = _xeUtils.default.isUndefined(titleOverflow) || _xeUtils.default.isNull(titleOverflow) ? allTitleOverflow : titleOverflow;
+      const itemVertical = _xeUtils.default.isUndefined(vertical) || _xeUtils.default.isNull(vertical) ? allVertical : vertical;
+      const ovEllipsis = itemOverflow === 'ellipsis';
+      const ovTitle = itemOverflow === 'title';
+      const ovTooltip = itemOverflow === true || itemOverflow === 'tooltip';
+      const hasEllipsis = ovTitle || ovTooltip || ovEllipsis;
+      const params = {
+        data,
+        field,
+        property: field,
+        item,
+        $form: $xeform,
+        $grid: $xeform.xegrid
+      };
+      if (visible === false) {
+        return (0, _vue.createCommentVNode)();
+      }
+      let isRequired = false;
+      if (rules) {
+        const itemRules = rules[field];
+        if (itemRules) {
+          isRequired = itemRules.some(rule => rule.required);
+        }
+      }
+      // 如果为项集合
+      const isGather = children && children.length > 0;
+      if (isGather) {
+        const childVNs = children.map((childItem, index) => {
+          return (0, _vue.h)(VxeFormConfigItem, {
+            key: index,
+            itemConfig: childItem
+          });
+        });
+        return childVNs.length ? (0, _vue.h)('div', {
+          class: ['vxe-form--gather vxe-row', item.id, span ? `vxe-col--${span} is--span` : '', className ? _xeUtils.default.isFunction(className) ? className(params) : className : '']
+        }, childVNs) : (0, _vue.createCommentVNode)();
+      }
+      let contentVNs = [];
+      if (defaultSlot) {
+        contentVNs = $xeform.callSlot(defaultSlot, params);
+      } else if (compConf && compConf.renderItemContent) {
+        contentVNs = (0, _vn.getSlotVNs)(compConf.renderItemContent(itemRender, params));
+      } else if (field) {
+        contentVNs = [_xeUtils.default.toValueString(_xeUtils.default.get(data, field))];
+      }
+      if (collapseNode) {
+        contentVNs.push((0, _vue.h)('div', {
+          class: 'vxe-form--item-trigger-node',
+          onClick: $xeform.toggleCollapseEvent
+        }, [(0, _vue.h)('span', {
+          class: 'vxe-form--item-trigger-text'
+        }, collapseAll ? (0, _i18n.getI18n)('vxe.form.unfolding') : (0, _i18n.getI18n)('vxe.form.folding')), (0, _vue.h)('i', {
+          class: ['vxe-form--item-trigger-icon', collapseAll ? _iconStore.default.FORM_FOLDING : _iconStore.default.FORM_UNFOLDING]
+        })]));
+      }
+      if (errRule && validOpts.showMessage) {
+        contentVNs.push((0, _vue.h)('div', {
+          class: 'vxe-form--item-valid',
+          style: errRule.maxWidth ? {
+            width: `${errRule.maxWidth}px`
+          } : null
+        }, errRule.content));
+      }
+      const ons = ovTooltip ? {
+        onMouseenter(evnt) {
+          $xeform.triggerTitleTipEvent(evnt, params);
+        },
+        onMouseleave: $xeform.handleTitleTipLeaveEvent
+      } : {};
+      return (0, _vue.h)('div', {
+        class: ['vxe-form--item', item.id, span ? `vxe-col--${span} is--span` : '', className ? _xeUtils.default.isFunction(className) ? className(params) : className : '', itemClassName ? _xeUtils.default.isFunction(itemClassName) ? itemClassName(params) : itemClassName : '', {
+          'is--title': title,
+          'is--colon': titleColon,
+          'is--vertical': itemVertical,
+          'is--asterisk': titleAsterisk,
+          'is--required': isRequired,
+          'is--hidden': folding && collapseAll,
+          'is--active': (0, _util.isActivetem)($xeform, item),
+          'is--error': showError
+        }],
+        style: _xeUtils.default.isFunction(itemStyle) ? itemStyle(params) : itemStyle
+      }, [(0, _vue.h)('div', {
+        class: 'vxe-form--item-inner'
+      }, [showTitle !== false && (title || titleSlot) ? (0, _vue.h)('div', {
+        class: ['vxe-form--item-title', titleAlign ? `align--${titleAlign}` : '', hasEllipsis ? 'is--ellipsis' : '', itemTitleClassName ? _xeUtils.default.isFunction(itemTitleClassName) ? itemTitleClassName(params) : itemTitleClassName : '', titleClassName ? _xeUtils.default.isFunction(titleClassName) ? titleClassName(params) : titleClassName : ''],
+        style: Object.assign({}, _xeUtils.default.isFunction(itemTitleStyle) ? itemTitleStyle(params) : itemTitleStyle, _xeUtils.default.isFunction(titleStyle) ? titleStyle(params) : titleStyle, titleWidth ? {
+          width: isNaN(titleWidth) ? titleWidth : `${titleWidth}px`
+        } : null),
+        title: ovTitle ? (0, _utils.getFuncText)(title) : null,
+        ...ons
+      }, (0, _render.renderTitle)($xeform, item)) : null, (0, _vue.h)('div', {
+        class: ['vxe-form--item-content', align ? `align--${align}` : '', itemContentClassName ? _xeUtils.default.isFunction(itemContentClassName) ? itemContentClassName(params) : itemContentClassName : '', contentClassName ? _xeUtils.default.isFunction(contentClassName) ? contentClassName(params) : contentClassName : ''],
+        style: Object.assign({}, _xeUtils.default.isFunction(itemContentStyle) ? itemContentStyle(params) : itemContentStyle, _xeUtils.default.isFunction(contentStyle) ? contentStyle(params) : contentStyle)
+      }, contentVNs)])]);
+    };
+    const $xeformconfigitem = {
+      renderVN
+    };
+    (0, _vue.provide)('$xeFormGather', null);
+    return $xeformconfigitem;
+  },
+  render() {
+    return this.renderVN();
+  }
+});
+var _default = exports.default = VxeFormConfigItem;

package/lib/form/src/form-config-item.min.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _vue=require("vue"),_xeUtils=_interopRequireDefault(require("xe-utils")),_iconStore=_interopRequireDefault(require("../../ui/src/iconStore")),_renderer=require("../../ui/src/renderer"),_utils=require("../../ui/src/utils"),_vn=require("../../ui/src/vn"),_i18n=require("../../ui/src/i18n"),_render=require("./render"),_util=require("./util");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}const VxeFormConfigItem=(0,_vue.defineComponent)({name:"VxeFormConfigItem",props:{itemConfig:Object},setup(G){const L=(0,_vue.inject)("$xeForm",{});var e={itemConfig:G.itemConfig},e=((0,_vue.provide)("$xeFormItemInfo",e),{renderVN:()=>{var e=L["reactData"],{data:t,rules:i,span:l,align:n,titleAlign:r,titleWidth:s,titleColon:u,titleAsterisk:o,titleOverflow:a,vertical:d}=L.props,f=L.getComputeMaps()["computeValidOpts"],m=G.itemConfig,e=e["collapseAll"],f=f.value,{slots:_,title:v,visible:c,folding:b,field:x,collapseNode:k,itemRender:g,showError:D,errRule:p,className:h,titleOverflow:C,vertical:U,children:F,showTitle:j,contentClassName:N,contentStyle:q,titleClassName:y,titleStyle:I}=m,S=(0,_utils.isEnableConf)(g)?_renderer.renderer.get(g.name):null,O=S?S.itemClassName:"",V=S?S.itemStyle:null,T=S?S.itemContentClassName:"",w=S?S.itemContentStyle:null,A=S?S.itemTitleClassName:"",M=S?S.itemTitleStyle:null,E=_?_.default:null,_=_?_.title:null,l=m.span||l,n=m.align||n,r=_xeUtils.default.eqNull(m.titleAlign)?r:m.titleAlign,s=_xeUtils.default.eqNull(m.titleWidth)?s:m.titleWidth,u=_xeUtils.default.eqNull(m.titleColon)?u:m.titleColon,o=_xeUtils.default.eqNull(m.titleAsterisk)?o:m.titleAsterisk,a=_xeUtils.default.isUndefined(C)||_xeUtils.default.isNull(C)?a:C,C=_xeUtils.default.isUndefined(U)||_xeUtils.default.isNull(U)?d:U,d="title"===a,U=!0===a||"tooltip"===a,a=d||U||"ellipsis"===a;const R={data:t,field:x,property:x,item:m,$form:L,$grid:L.xegrid};if(!1===c)return(0,_vue.createCommentVNode)();let W=!1;if(i&&(c=i[x])&&(W=c.some(e=>e.required)),F&&0<F.length)return(i=F.map((e,t)=>(0,_vue.h)(VxeFormConfigItem,{key:t,itemConfig:e}))).length?(0,_vue.h)("div",{class:["vxe-form--gather vxe-row",m.id,l?`vxe-col--${l} is--span`:"",h?_xeUtils.default.isFunction(h)?h(R):h:""]},i):(0,_vue.createCommentVNode)();let $=[];E?$=L.callSlot(E,R):S&&S.renderItemContent?$=(0,_vn.getSlotVNs)(S.renderItemContent(g,R)):x&&($=[_xeUtils.default.toValueString(_xeUtils.default.get(t,x))]),k&&$.push((0,_vue.h)("div",{class:"vxe-form--item-trigger-node",onClick:L.toggleCollapseEvent},[(0,_vue.h)("span",{class:"vxe-form--item-trigger-text"},e?(0,_i18n.getI18n)("vxe.form.unfolding"):(0,_i18n.getI18n)("vxe.form.folding")),(0,_vue.h)("i",{class:["vxe-form--item-trigger-icon",e?_iconStore.default.FORM_FOLDING:_iconStore.default.FORM_UNFOLDING]})])),p&&f.showMessage&&$.push((0,_vue.h)("div",{class:"vxe-form--item-valid",style:p.maxWidth?{width:p.maxWidth+"px"}:null},p.content));c=U?{onMouseenter(e){L.triggerTitleTipEvent(e,R)},onMouseleave:L.handleTitleTipLeaveEvent}:{};return(0,_vue.h)("div",{class:["vxe-form--item",m.id,l?`vxe-col--${l} is--span`:"",h?_xeUtils.default.isFunction(h)?h(R):h:"",O?_xeUtils.default.isFunction(O)?O(R):O:"",{"is--title":v,"is--colon":u,"is--vertical":C,"is--asterisk":o,"is--required":W,"is--hidden":b&&e,"is--active":(0,_util.isActivetem)(L,m),"is--error":D}],style:_xeUtils.default.isFunction(V)?V(R):V},[(0,_vue.h)("div",{class:"vxe-form--item-inner"},[!1!==j&&(v||_)?(0,_vue.h)("div",{class:["vxe-form--item-title",r?"align--"+r:"",a?"is--ellipsis":"",A?_xeUtils.default.isFunction(A)?A(R):A:"",y?_xeUtils.default.isFunction(y)?y(R):y:""],style:Object.assign({},_xeUtils.default.isFunction(M)?M(R):M,_xeUtils.default.isFunction(I)?I(R):I,s?{width:isNaN(s)?s:s+"px"}:null),title:d?(0,_utils.getFuncText)(v):null,...c},(0,_render.renderTitle)(L,m)):null,(0,_vue.h)("div",{class:["vxe-form--item-content",n?"align--"+n:"",T?_xeUtils.default.isFunction(T)?T(R):T:"",N?_xeUtils.default.isFunction(N)?N(R):N:""],style:Object.assign({},_xeUtils.default.isFunction(w)?w(R):w,_xeUtils.default.isFunction(q)?q(R):q)},$)])])}});return(0,_vue.provide)("$xeFormGather",null),e},render(){return this.renderVN()}});var _default=exports.default=VxeFormConfigItem;

package/lib/form/src/form-gather.js

@@ -0,0 +1,57 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _vue = require("vue");
+var _log = require("../../ui/src/log");
+var _util = require("./util");
+var _formItem = require("./form-item");
+var _default = exports.default = (0, _vue.defineComponent)({
+  name: 'VxeFormGather',
+  props: _formItem.formItemProps,
+  setup(props, {
+    slots
+  }) {
+    const refElem = (0, _vue.ref)();
+    const $xeForm = (0, _vue.inject)('$xeForm', {});
+    const parentFormGather = (0, _vue.inject)('$xeFormGather', null);
+    const defaultSlot = slots.default;
+    const formItem = (0, _vue.reactive)((0, _util.createItem)($xeForm, props));
+    formItem.children = [];
+    const formItemInfo = {
+      itemConfig: formItem
+    };
+    (0, _vue.provide)('$xeFormItemInfo', formItemInfo);
+    (0, _util.watchItem)(props, formItem);
+    (0, _vue.onMounted)(() => {
+      (0, _util.assemItem)($xeForm, refElem.value, formItem, parentFormGather);
+    });
+    (0, _vue.onUnmounted)(() => {
+      (0, _util.destroyItem)($xeForm, formItem);
+    });
+    if (process.env.NODE_ENV === 'development') {
+      (0, _vue.nextTick)(() => {
+        if ($xeForm && $xeForm.props.customLayout) {
+          (0, _log.errLog)('vxe.error.errConflicts', ['custom-layout', '<form-gather ...>']);
+        }
+      });
+    }
+    const renderVN = () => {
+      return (0, _vue.h)('div', {
+        ref: refElem
+      }, defaultSlot ? defaultSlot() : []);
+    };
+    const $xeFormGather = {
+      formItem,
+      renderVN
+    };
+    (0, _vue.provide)('$xeFormGather', $xeFormGather);
+    (0, _vue.provide)('$xeFormItem', null);
+    return $xeFormGather;
+  },
+  render() {
+    return this.renderVN();
+  }
+});

package/lib/form/src/form-gather.min.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _vue=require("vue"),_log=require("../../ui/src/log"),_util=require("./util"),_formItem=require("./form-item"),_default=exports.default=(0,_vue.defineComponent)({name:"VxeFormGather",props:_formItem.formItemProps,setup(e,{slots:r}){const t=(0,_vue.ref)(),o=(0,_vue.inject)("$xeForm",{}),u=(0,_vue.inject)("$xeFormGather",null),m=r.default,i=(0,_vue.reactive)((0,_util.createItem)(o,e));i.children=[];r={itemConfig:i},(0,_vue.provide)("$xeFormItemInfo",r),(0,_util.watchItem)(e,i),(0,_vue.onMounted)(()=>{(0,_util.assemItem)(o,t.value,i,u)}),(0,_vue.onUnmounted)(()=>{(0,_util.destroyItem)(o,i)}),"development"===process.env.NODE_ENV&&(0,_vue.nextTick)(()=>{o&&o.props.customLayout&&(0,_log.errLog)("vxe.error.errConflicts",["custom-layout","<form-gather ...>"])}),r={formItem:i,renderVN:()=>(0,_vue.h)("div",{ref:t},m?m():[])};return(0,_vue.provide)("$xeFormGather",r),(0,_vue.provide)("$xeFormItem",null),r},render(){return this.renderVN()}});

package/lib/form/src/form-item.js

@@ -0,0 +1,247 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.formItemProps = exports.default = void 0;
+var _vue = require("vue");
+var _xeUtils = _interopRequireDefault(require("xe-utils"));
+var _iconStore = _interopRequireDefault(require("../../ui/src/iconStore"));
+var _renderer = require("../../ui/src/renderer");
+var _utils = require("../../ui/src/utils");
+var _vn = require("../../ui/src/vn");
+var _i18n = require("../../ui/src/i18n");
+var _util = require("./util");
+var _render = require("./render");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const formItemProps = exports.formItemProps = {
+  title: String,
+  field: String,
+  span: [String, Number],
+  align: String,
+  titleAlign: {
+    type: String,
+    default: null
+  },
+  titleWidth: {
+    type: [String, Number],
+    default: null
+  },
+  titleColon: {
+    type: Boolean,
+    default: null
+  },
+  titleAsterisk: {
+    type: Boolean,
+    default: null
+  },
+  showTitle: {
+    type: Boolean,
+    default: true
+  },
+  vertical: {
+    type: Boolean,
+    default: null
+  },
+  className: [String, Function],
+  contentClassName: [String, Function],
+  contentStyle: [Object, Function],
+  titleClassName: [String, Function],
+  titleStyle: [Object, Function],
+  titleOverflow: {
+    type: [Boolean, String],
+    default: null
+  },
+  titlePrefix: Object,
+  titleSuffix: Object,
+  resetValue: {
+    default: null
+  },
+  visibleMethod: Function,
+  visible: {
+    type: Boolean,
+    default: null
+  },
+  folding: Boolean,
+  collapseNode: Boolean,
+  itemRender: Object
+};
+var _default = exports.default = (0, _vue.defineComponent)({
+  name: 'VxeFormItem',
+  props: formItemProps,
+  setup(props, {
+    slots
+  }) {
+    const refElem = (0, _vue.ref)();
+    const $xeform = (0, _vue.inject)('$xeForm', {});
+    const formGather = (0, _vue.inject)('$xeformgather', null);
+    const formItem = (0, _vue.reactive)((0, _util.createItem)($xeform, props));
+    formItem.slots = slots;
+    const formItemInfo = {
+      itemConfig: formItem
+    };
+    (0, _vue.provide)('$xeFormItemInfo', formItemInfo);
+    (0, _util.watchItem)(props, formItem);
+    (0, _vue.onMounted)(() => {
+      (0, _util.assemItem)($xeform, refElem.value, formItem, formGather);
+    });
+    (0, _vue.onUnmounted)(() => {
+      (0, _util.destroyItem)($xeform, formItem);
+    });
+    const renderItem = ($xeform, item) => {
+      const {
+        props,
+        reactData
+      } = $xeform;
+      const {
+        data,
+        rules,
+        titleAlign: allTitleAlign,
+        titleWidth: allTitleWidth,
+        titleColon: allTitleColon,
+        titleAsterisk: allTitleAsterisk,
+        titleOverflow: allTitleOverflow,
+        vertical: allVertical
+      } = props;
+      const {
+        collapseAll
+      } = reactData;
+      const {
+        computeValidOpts
+      } = $xeform.getComputeMaps();
+      const validOpts = computeValidOpts.value;
+      const {
+        slots,
+        title,
+        visible,
+        folding,
+        field,
+        collapseNode,
+        itemRender,
+        showError,
+        errRule,
+        className,
+        titleOverflow,
+        vertical,
+        showTitle,
+        contentClassName,
+        contentStyle,
+        titleClassName,
+        titleStyle
+      } = item;
+      const compConf = (0, _utils.isEnableConf)(itemRender) ? _renderer.renderer.get(itemRender.name) : null;
+      const itemClassName = compConf ? compConf.itemClassName : '';
+      const itemStyle = compConf ? compConf.itemStyle : null;
+      const itemContentClassName = compConf ? compConf.itemContentClassName : '';
+      const itemContentStyle = compConf ? compConf.itemContentStyle : null;
+      const itemTitleClassName = compConf ? compConf.itemTitleClassName : '';
+      const itemTitleStyle = compConf ? compConf.itemTitleStyle : null;
+      const defaultSlot = slots ? slots.default : null;
+      const titleSlot = slots ? slots.title : null;
+      const span = item.span || props.span;
+      const align = item.align || props.align;
+      const titleAlign = _xeUtils.default.eqNull(item.titleAlign) ? allTitleAlign : item.titleAlign;
+      const titleWidth = _xeUtils.default.eqNull(item.titleWidth) ? allTitleWidth : item.titleWidth;
+      const titleColon = _xeUtils.default.eqNull(item.titleColon) ? allTitleColon : item.titleColon;
+      const titleAsterisk = _xeUtils.default.eqNull(item.titleAsterisk) ? allTitleAsterisk : item.titleAsterisk;
+      const itemOverflow = _xeUtils.default.isUndefined(titleOverflow) || _xeUtils.default.isNull(titleOverflow) ? allTitleOverflow : titleOverflow;
+      const itemVertical = _xeUtils.default.isUndefined(vertical) || _xeUtils.default.isNull(vertical) ? allVertical : vertical;
+      const ovEllipsis = itemOverflow === 'ellipsis';
+      const ovTitle = itemOverflow === 'title';
+      const ovTooltip = itemOverflow === true || itemOverflow === 'tooltip';
+      const hasEllipsis = ovTitle || ovTooltip || ovEllipsis;
+      const params = {
+        data,
+        field,
+        property: field,
+        item,
+        $form: $xeform,
+        $grid: $xeform.xegrid
+      };
+      let isRequired = false;
+      if (visible === false) {
+        return (0, _vue.createCommentVNode)();
+      }
+      if (rules) {
+        const itemRules = rules[field];
+        if (itemRules) {
+          isRequired = itemRules.some(rule => rule.required);
+        }
+      }
+      let contentVNs = [];
+      if (defaultSlot) {
+        contentVNs = $xeform.callSlot(defaultSlot, params);
+      } else if (compConf && compConf.renderItemContent) {
+        contentVNs = (0, _vn.getSlotVNs)(compConf.renderItemContent(itemRender, params));
+      } else if (field) {
+        contentVNs = [`${_xeUtils.default.get(data, field)}`];
+      }
+      if (collapseNode) {
+        contentVNs.push((0, _vue.h)('div', {
+          class: 'vxe-form--item-trigger-node',
+          onClick: $xeform.toggleCollapseEvent
+        }, [(0, _vue.h)('span', {
+          class: 'vxe-form--item-trigger-text'
+        }, collapseAll ? (0, _i18n.getI18n)('vxe.form.unfolding') : (0, _i18n.getI18n)('vxe.form.folding')), (0, _vue.h)('i', {
+          class: ['vxe-form--item-trigger-icon', collapseAll ? _iconStore.default.FORM_FOLDING : _iconStore.default.FORM_UNFOLDING]
+        })]));
+      }
+      if (errRule && validOpts.showMessage) {
+        contentVNs.push((0, _vue.h)('div', {
+          class: 'vxe-form--item-valid',
+          style: errRule.maxWidth ? {
+            width: `${errRule.maxWidth}px`
+          } : null
+        }, errRule.message));
+      }
+      const ons = ovTooltip ? {
+        onMouseenter(evnt) {
+          $xeform.triggerTitleTipEvent(evnt, params);
+        },
+        onMouseleave: $xeform.handleTitleTipLeaveEvent
+      } : {};
+      return (0, _vue.h)('div', {
+        ref: refElem,
+        class: ['vxe-form--item', item.id, span ? `vxe-col--${span} is--span` : '', className ? _xeUtils.default.isFunction(className) ? className(params) : className : '', itemClassName ? _xeUtils.default.isFunction(itemClassName) ? itemClassName(params) : itemClassName : '', {
+          'is--title': title,
+          'is--colon': titleColon,
+          'is--vertical': itemVertical,
+          'is--asterisk': titleAsterisk,
+          'is--required': isRequired,
+          'is--hidden': folding && collapseAll,
+          'is--active': (0, _util.isActivetem)($xeform, item),
+          'is--error': showError
+        }],
+        style: _xeUtils.default.isFunction(itemStyle) ? itemStyle(params) : itemStyle
+      }, [(0, _vue.h)('div', {
+        class: 'vxe-form--item-inner'
+      }, [showTitle !== false && (title || titleSlot) ? (0, _vue.h)('div', {
+        class: ['vxe-form--item-title', titleAlign ? `align--${titleAlign}` : '', hasEllipsis ? 'is--ellipsis' : '', itemTitleClassName ? _xeUtils.default.isFunction(itemTitleClassName) ? itemTitleClassName(params) : itemTitleClassName : '', titleClassName ? _xeUtils.default.isFunction(titleClassName) ? titleClassName(params) : titleClassName : ''],
+        style: Object.assign({}, _xeUtils.default.isFunction(itemTitleStyle) ? itemTitleStyle(params) : itemTitleStyle, _xeUtils.default.isFunction(titleStyle) ? titleStyle(params) : titleStyle, titleWidth ? {
+          width: isNaN(titleWidth) ? titleWidth : `${titleWidth}px`
+        } : null),
+        title: ovTitle ? (0, _utils.getFuncText)(title) : null,
+        ...ons
+      }, (0, _render.renderTitle)($xeform, item)) : null, (0, _vue.h)('div', {
+        class: ['vxe-form--item-content', align ? `align--${align}` : '', itemContentClassName ? _xeUtils.default.isFunction(itemContentClassName) ? itemContentClassName(params) : itemContentClassName : '', contentClassName ? _xeUtils.default.isFunction(contentClassName) ? contentClassName(params) : contentClassName : ''],
+        style: Object.assign({}, _xeUtils.default.isFunction(itemContentStyle) ? itemContentStyle(params) : itemContentStyle, _xeUtils.default.isFunction(contentStyle) ? contentStyle(params) : contentStyle)
+      }, contentVNs)])]);
+    };
+    const renderVN = () => {
+      const formProps = $xeform ? $xeform.props : null;
+      return formProps && formProps.customLayout ? renderItem($xeform, formItem) : (0, _vue.h)('div', {
+        ref: refElem
+      });
+    };
+    const $xeformitem = {
+      formItem,
+      renderVN
+    };
+    (0, _vue.provide)('$xeformitem', $xeformitem);
+    (0, _vue.provide)('$xeformgather', null);
+    return $xeformitem;
+  },
+  render() {
+    return this.renderVN();
+  }
+});

package/lib/form/src/form-item.min.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.formItemProps=exports.default=void 0;var _vue=require("vue"),_xeUtils=_interopRequireDefault(require("xe-utils")),_iconStore=_interopRequireDefault(require("../../ui/src/iconStore")),_renderer=require("../../ui/src/renderer"),_utils=require("../../ui/src/utils"),_vn=require("../../ui/src/vn"),_i18n=require("../../ui/src/i18n"),_util=require("./util"),_render=require("./render");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}const formItemProps=exports.formItemProps={title:String,field:String,span:[String,Number],align:String,titleAlign:{type:String,default:null},titleWidth:{type:[String,Number],default:null},titleColon:{type:Boolean,default:null},titleAsterisk:{type:Boolean,default:null},showTitle:{type:Boolean,default:!0},vertical:{type:Boolean,default:null},className:[String,Function],contentClassName:[String,Function],contentStyle:[Object,Function],titleClassName:[String,Function],titleStyle:[Object,Function],titleOverflow:{type:[Boolean,String],default:null},titlePrefix:Object,titleSuffix:Object,resetValue:{default:null},visibleMethod:Function,visible:{type:Boolean,default:null},folding:Boolean,collapseNode:Boolean,itemRender:Object};var _default=exports.default=(0,_vue.defineComponent)({name:"VxeFormItem",props:formItemProps,setup(e,{slots:t}){const W=(0,_vue.ref)(),E=(0,_vue.inject)("$xeForm",{}),l=(0,_vue.inject)("$xeformgather",null),L=(0,_vue.reactive)((0,_util.createItem)(E,e));L.slots=t;t={itemConfig:L};(0,_vue.provide)("$xeFormItemInfo",t),(0,_util.watchItem)(e,L),(0,_vue.onMounted)(()=>{(0,_util.assemItem)(E,W.value,L,l)}),(0,_vue.onUnmounted)(()=>{(0,_util.destroyItem)(E,L)});t={formItem:L,renderVN:()=>{var l=E?E.props:null;if(l&&l.customLayout){var i=E,l=L,{props:n,reactData:r}=i,{data:s,rules:u,titleAlign:o,titleWidth:a,titleColon:d,titleAsterisk:f,titleOverflow:m,vertical:c}=n,r=r["collapseAll"],v=(v=i.getComputeMaps()["computeValidOpts"]).value,{slots:_,title:p,visible:x,folding:V,field:g,collapseNode:k,itemRender:h,showError:D,errRule:N,className:F,titleOverflow:U,vertical:S,showTitle:P,contentClassName:y,contentStyle:C,titleClassName:q,titleStyle:I}=l,O=(0,_utils.isEnableConf)(h)?_renderer.renderer.get(h.name):null,b=O?O.itemClassName:"",j=O?O.itemStyle:null,w=O?O.itemContentClassName:"",A=O?O.itemContentStyle:null,M=O?O.itemTitleClassName:"",T=O?O.itemTitleStyle:null,B=_?_.default:null,_=_?_.title:null,R=l.span||n.span,n=l.align||n.align,o=_xeUtils.default.eqNull(l.titleAlign)?o:l.titleAlign,a=_xeUtils.default.eqNull(l.titleWidth)?a:l.titleWidth,d=_xeUtils.default.eqNull(l.titleColon)?d:l.titleColon,f=_xeUtils.default.eqNull(l.titleAsterisk)?f:l.titleAsterisk,m=_xeUtils.default.isUndefined(U)||_xeUtils.default.isNull(U)?m:U,U=_xeUtils.default.isUndefined(S)||_xeUtils.default.isNull(S)?c:S,S=!0===m||"tooltip"===m,m=(c="title"===m)||S||"ellipsis"===m;const $={data:s,field:g,property:g,item:l,$form:i,$grid:i.xegrid};let e=!1;if(!1===x)return(0,_vue.createCommentVNode)();u&&(x=u[g])&&(e=x.some(e=>e.required));let t=[];return B?t=i.callSlot(B,$):O&&O.renderItemContent?t=(0,_vn.getSlotVNs)(O.renderItemContent(h,$)):g&&(t=[""+_xeUtils.default.get(s,g)]),k&&t.push((0,_vue.h)("div",{class:"vxe-form--item-trigger-node",onClick:i.toggleCollapseEvent},[(0,_vue.h)("span",{class:"vxe-form--item-trigger-text"},r?(0,_i18n.getI18n)("vxe.form.unfolding"):(0,_i18n.getI18n)("vxe.form.folding")),(0,_vue.h)("i",{class:["vxe-form--item-trigger-icon",r?_iconStore.default.FORM_FOLDING:_iconStore.default.FORM_UNFOLDING]})])),N&&v.showMessage&&t.push((0,_vue.h)("div",{class:"vxe-form--item-valid",style:N.maxWidth?{width:N.maxWidth+"px"}:null},N.message)),u=S?{onMouseenter(e){i.triggerTitleTipEvent(e,$)},onMouseleave:i.handleTitleTipLeaveEvent}:{},(0,_vue.h)("div",{ref:W,class:["vxe-form--item",l.id,R?`vxe-col--${R} is--span`:"",F?_xeUtils.default.isFunction(F)?F($):F:"",b?_xeUtils.default.isFunction(b)?b($):b:"",{"is--title":p,"is--colon":d,"is--vertical":U,"is--asterisk":f,"is--required":e,"is--hidden":V&&r,"is--active":(0,_util.isActivetem)(i,l),"is--error":D}],style:_xeUtils.default.isFunction(j)?j($):j},[(0,_vue.h)("div",{class:"vxe-form--item-inner"},[!1!==P&&(p||_)?(0,_vue.h)("div",{class:["vxe-form--item-title",o?"align--"+o:"",m?"is--ellipsis":"",M?_xeUtils.default.isFunction(M)?M($):M:"",q?_xeUtils.default.isFunction(q)?q($):q:""],style:Object.assign({},_xeUtils.default.isFunction(T)?T($):T,_xeUtils.default.isFunction(I)?I($):I,a?{width:isNaN(a)?a:a+"px"}:null),title:c?(0,_utils.getFuncText)(p):null,...u},(0,_render.renderTitle)(i,l)):null,(0,_vue.h)("div",{class:["vxe-form--item-content",n?"align--"+n:"",w?_xeUtils.default.isFunction(w)?w($):w:"",y?_xeUtils.default.isFunction(y)?y($):y:""],style:Object.assign({},_xeUtils.default.isFunction(A)?A($):A,_xeUtils.default.isFunction(C)?C($):C)},t)])])}return(0,_vue.h)("div",{ref:W})}};return(0,_vue.provide)("$xeformitem",t),(0,_vue.provide)("$xeformgather",null),t},render(){return this.renderVN()}});