vxe-pc-ui 0.0.2 → 0.1.0

package/es/components.js

@@ -1,57 +1,120 @@
 import XEUtils from 'xe-utils';
 import { setConfig } from './ui';
+import VxeAnchor from './anchor';
+import VxeAnchorLink from './anchor-link';
+import VxeBreadcrumb from './breadcrumb';
+import VxeBreadcrumbItem from './breadcrumb-item';
+import VxeButton from './button';
+import VxeButtonGroup from './button-group';
+import VxeCheckbox from './checkbox';
+import VxeCheckboxGroup from './checkbox-group';
+import VxeCol from './col';
+import VxeForm from './form';
+import VxeFormDesign from './form-design';
+import VxeFormGather from './form-gather';
+import VxeFormItem from './form-item';
 import VxeIcon from './icon';
-import VxeLayoutContainer from './layout-container';
-import VxeLayoutHeader from './layout-header';
+import VxeInput from './input';
 import VxeLayoutAside from './layout-aside';
 import VxeLayoutBody from './layout-body';
+import VxeLayoutContainer from './layout-container';
 import VxeLayoutFooter from './layout-footer';
+import VxeLayoutHeader from './layout-header';
+import VxeListDesign from './list-design';
+import VxeLoading from './loading';
+import VxeModal from './modal';
+import VxeOptgroup from './optgroup';
+import VxeOption from './option';
+import VxePager from './pager';
+import VxePulldown from './pulldown';
+import VxeRadio from './radio';
+import VxeRadioButton from './radio-button';
+import VxeRadioGroup from './radio-group';
 import VxeRow from './row';
-import VxeCol from './col';
-import VxeBreadcrumb from './breadcrumb';
-import VxeBreadcrumbItem from './breadcrumb-item';
-import VxeButton from './button';
-import VxeButtonGroup from './button-group';
-import VxeAnchor from './anchor';
-import VxeAnchorLink from './anchor-link';
-import VxeDesign from './design';
+import VxeSelect from './select';
+import VxeSwitch from './switch';
+import VxeTextarea from './textarea';
+import VxeTooltip from './tooltip';
 import zhCN from './locale/lang/zh-CN';
 // 默认中文
 setConfig({
     i18n: (key, args) => XEUtils.toFormatString(XEUtils.get(zhCN, key), args)
 });
+const components = [
+    VxeAnchor,
+    VxeAnchorLink,
+    VxeBreadcrumb,
+    VxeBreadcrumbItem,
+    VxeButton,
+    VxeButtonGroup,
+    VxeCheckbox,
+    VxeCheckboxGroup,
+    VxeCol,
+    VxeForm,
+    VxeFormDesign,
+    VxeFormGather,
+    VxeFormItem,
+    VxeIcon,
+    VxeInput,
+    VxeLayoutAside,
+    VxeLayoutBody,
+    VxeLayoutContainer,
+    VxeLayoutFooter,
+    VxeLayoutHeader,
+    VxeListDesign,
+    VxeLoading,
+    VxeModal,
+    VxeOptgroup,
+    VxeOption,
+    VxePager,
+    VxePulldown,
+    VxeRadio,
+    VxeRadioButton,
+    VxeRadioGroup,
+    VxeRow,
+    VxeSelect,
+    VxeSwitch,
+    VxeTextarea,
+    VxeTooltip
+];
 export function install(app, options) {
     setConfig(options);
-    app.use(VxeIcon);
-    app.use(VxeLayoutContainer);
-    app.use(VxeLayoutHeader);
-    app.use(VxeLayoutAside);
-    app.use(VxeLayoutBody);
-    app.use(VxeLayoutFooter);
-    app.use(VxeRow);
-    app.use(VxeCol);
-    app.use(VxeBreadcrumb);
-    app.use(VxeBreadcrumbItem);
-    app.use(VxeButton);
-    app.use(VxeButtonGroup);
-    app.use(VxeAnchor);
-    app.use(VxeAnchorLink);
-    app.use(VxeDesign);
+    components.forEach(component => app.use(component));
 }
 export * from './ui';
 // Components
+export * from './anchor';
+export * from './anchor-link';
+export * from './breadcrumb';
+export * from './breadcrumb-item';
+export * from './button';
+export * from './button-group';
+export * from './checkbox';
+export * from './checkbox-group';
+export * from './col';
+export * from './form';
+export * from './form-design';
+export * from './form-gather';
+export * from './form-item';
 export * from './icon';
-export * from './layout-container';
-export * from './layout-header';
+export * from './input';
 export * from './layout-aside';
 export * from './layout-body';
+export * from './layout-container';
 export * from './layout-footer';
+export * from './layout-header';
+export * from './list-design';
+export * from './loading';
+export * from './modal';
+export * from './optgroup';
+export * from './option';
+export * from './pager';
+export * from './pulldown';
+export * from './radio';
+export * from './radio-button';
+export * from './radio-group';
 export * from './row';
-export * from './col';
-export * from './breadcrumb';
-export * from './breadcrumb-item';
-export * from './button';
-export * from './button-group';
-export * from './anchor';
-export * from './anchor-link';
-export * from './design';
+export * from './select';
+export * from './switch';
+export * from './textarea';
+export * from './tooltip';

package/es/dynamics/index.js

@@ -0,0 +1,27 @@
+import { defineComponent, h, createApp, resolveComponent, reactive } from 'vue';
+let dynamicContainerElem;
+export const dynamicStore = reactive({
+    modals: []
+});
+/**
+ * 动态组件
+ */
+const VxeDynamics = defineComponent({
+    setup() {
+        return () => {
+            const { modals } = dynamicStore;
+            return h('div', {
+                class: 'vxe-dynamics--modal'
+            }, modals.map((item) => h(resolveComponent('vxe-modal'), item)));
+        };
+    }
+});
+export const dynamicApp = createApp(VxeDynamics);
+export function checkDynamic() {
+    if (!dynamicContainerElem) {
+        dynamicContainerElem = document.createElement('div');
+        dynamicContainerElem.className = 'vxe-dynamics';
+        document.body.appendChild(dynamicContainerElem);
+        dynamicApp.mount(dynamicContainerElem);
+    }
+}

package/es/form/index.js

@@ -0,0 +1,8 @@
+import VxeFormComponent from './src/form';
+export const VxeForm = Object.assign(VxeFormComponent, {
+    install(app) {
+        app.component(VxeFormComponent.name, VxeFormComponent);
+    }
+});
+export const Form = VxeForm;
+export default VxeForm;

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

@@ -0,0 +1,178 @@
+import { defineComponent, h, inject, provide, createCommentVNode } from 'vue';
+import XEUtils from 'xe-utils';
+import iconConfigStore from '../../ui/src/iconStore';
+import { renderer } from '../../ui/src/renderer';
+import { getFuncText, isEnableConf } from '../../ui/src/utils';
+import { getSlotVNs } from '../../ui/src/vn';
+import { getI18n } from '../../ui/src/i18n';
+import { renderTitle } from './render';
+import { isActivetem } from './util';
+const VxeFormConfigItem = defineComponent({
+    name: 'VxeFormConfigItem',
+    props: {
+        itemConfig: Object
+    },
+    setup(props) {
+        const $xeform = inject('$xeForm', {});
+        const xeformiteminfo = { itemConfig: props.itemConfig };
+        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 = isEnableConf(itemRender) ? 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.eqNull(item.titleAlign) ? allTitleAlign : item.titleAlign;
+            const titleWidth = XEUtils.eqNull(item.titleWidth) ? allTitleWidth : item.titleWidth;
+            const titleColon = XEUtils.eqNull(item.titleColon) ? allTitleColon : item.titleColon;
+            const titleAsterisk = XEUtils.eqNull(item.titleAsterisk) ? allTitleAsterisk : item.titleAsterisk;
+            const itemOverflow = (XEUtils.isUndefined(titleOverflow) || XEUtils.isNull(titleOverflow)) ? allTitleOverflow : titleOverflow;
+            const itemVertical = (XEUtils.isUndefined(vertical) || XEUtils.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 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 h(VxeFormConfigItem, {
+                        key: index,
+                        itemConfig: childItem
+                    });
+                });
+                return childVNs.length
+                    ? h('div', {
+                        class: ['vxe-form--gather vxe-row', item.id, span ? `vxe-col--${span} is--span` : '', className ? (XEUtils.isFunction(className) ? className(params) : className) : '']
+                    }, childVNs)
+                    : createCommentVNode();
+            }
+            let contentVNs = [];
+            if (defaultSlot) {
+                contentVNs = $xeform.callSlot(defaultSlot, params);
+            }
+            else if (compConf && compConf.renderItemContent) {
+                contentVNs = getSlotVNs(compConf.renderItemContent(itemRender, params));
+            }
+            else if (field) {
+                contentVNs = [XEUtils.toValueString(XEUtils.get(data, field))];
+            }
+            if (collapseNode) {
+                contentVNs.push(h('div', {
+                    class: 'vxe-form--item-trigger-node',
+                    onClick: $xeform.toggleCollapseEvent
+                }, [
+                    h('span', {
+                        class: 'vxe-form--item-trigger-text'
+                    }, collapseAll ? getI18n('vxe.form.unfolding') : getI18n('vxe.form.folding')),
+                    h('i', {
+                        class: ['vxe-form--item-trigger-icon', collapseAll ? iconConfigStore.FORM_FOLDING : iconConfigStore.FORM_UNFOLDING]
+                    })
+                ]));
+            }
+            if (errRule && validOpts.showMessage) {
+                contentVNs.push(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 h('div', {
+                class: [
+                    'vxe-form--item',
+                    item.id,
+                    span ? `vxe-col--${span} is--span` : '',
+                    className ? (XEUtils.isFunction(className) ? className(params) : className) : '',
+                    itemClassName ? (XEUtils.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': isActivetem($xeform, item),
+                        'is--error': showError
+                    }
+                ],
+                style: XEUtils.isFunction(itemStyle) ? itemStyle(params) : itemStyle
+            }, [
+                h('div', {
+                    class: 'vxe-form--item-inner'
+                }, [
+                    (showTitle !== false) && (title || titleSlot)
+                        ? h('div', {
+                            class: [
+                                'vxe-form--item-title',
+                                titleAlign ? `align--${titleAlign}` : '',
+                                hasEllipsis ? 'is--ellipsis' : '',
+                                itemTitleClassName ? (XEUtils.isFunction(itemTitleClassName) ? itemTitleClassName(params) : itemTitleClassName) : '',
+                                titleClassName ? (XEUtils.isFunction(titleClassName) ? titleClassName(params) : titleClassName) : ''
+                            ],
+                            style: Object.assign({}, XEUtils.isFunction(itemTitleStyle) ? itemTitleStyle(params) : itemTitleStyle, XEUtils.isFunction(titleStyle) ? titleStyle(params) : titleStyle, titleWidth
+                                ? {
+                                    width: isNaN(titleWidth) ? titleWidth : `${titleWidth}px`
+                                }
+                                : null),
+                            title: ovTitle ? getFuncText(title) : null,
+                            ...ons
+                        }, renderTitle($xeform, item))
+                        : null,
+                    h('div', {
+                        class: [
+                            'vxe-form--item-content',
+                            align ? `align--${align}` : '',
+                            itemContentClassName ? (XEUtils.isFunction(itemContentClassName) ? itemContentClassName(params) : itemContentClassName) : '',
+                            contentClassName ? (XEUtils.isFunction(contentClassName) ? contentClassName(params) : contentClassName) : ''
+                        ],
+                        style: Object.assign({}, XEUtils.isFunction(itemContentStyle) ? itemContentStyle(params) : itemContentStyle, XEUtils.isFunction(contentStyle) ? contentStyle(params) : contentStyle)
+                    }, contentVNs)
+                ])
+            ]);
+        };
+        const $xeformconfigitem = {
+            renderVN
+        };
+        provide('$xeFormGather', null);
+        return $xeformconfigitem;
+    },
+    render() {
+        return this.renderVN();
+    }
+});
+export default VxeFormConfigItem;

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

@@ -0,0 +1,47 @@
+import { defineComponent, h, onUnmounted, inject, ref, reactive, onMounted, provide, nextTick } from 'vue';
+import { errLog } from '../../ui/src/log';
+import { createItem, watchItem, destroyItem, assemItem } from './util';
+import { formItemProps } from './form-item';
+export default defineComponent({
+    name: 'VxeFormGather',
+    props: formItemProps,
+    setup(props, { slots }) {
+        const refElem = ref();
+        const $xeForm = inject('$xeForm', {});
+        const parentFormGather = inject('$xeFormGather', null);
+        const defaultSlot = slots.default;
+        const formItem = reactive(createItem($xeForm, props));
+        formItem.children = [];
+        const formItemInfo = { itemConfig: formItem };
+        provide('$xeFormItemInfo', formItemInfo);
+        watchItem(props, formItem);
+        onMounted(() => {
+            assemItem($xeForm, refElem.value, formItem, parentFormGather);
+        });
+        onUnmounted(() => {
+            destroyItem($xeForm, formItem);
+        });
+        if (process.env.NODE_ENV === 'development') {
+            nextTick(() => {
+                if ($xeForm && $xeForm.props.customLayout) {
+                    errLog('vxe.error.errConflicts', ['custom-layout', '<form-gather ...>']);
+                }
+            });
+        }
+        const renderVN = () => {
+            return h('div', {
+                ref: refElem
+            }, defaultSlot ? defaultSlot() : []);
+        };
+        const $xeFormGather = {
+            formItem,
+            renderVN
+        };
+        provide('$xeFormGather', $xeFormGather);
+        provide('$xeFormItem', null);
+        return $xeFormGather;
+    },
+    render() {
+        return this.renderVN();
+    }
+});

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

@@ -0,0 +1,228 @@
+import { defineComponent, h, onUnmounted, inject, ref, provide, onMounted, createCommentVNode, reactive } from 'vue';
+import XEUtils from 'xe-utils';
+import iconConfigStore from '../../ui/src/iconStore';
+import { renderer } from '../../ui/src/renderer';
+import { getFuncText, isEnableConf } from '../../ui/src/utils';
+import { getSlotVNs } from '../../ui/src/vn';
+import { getI18n } from '../../ui/src/i18n';
+import { createItem, watchItem, destroyItem, assemItem, isActivetem } from './util';
+import { renderTitle } from './render';
+export const 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
+};
+export default defineComponent({
+    name: 'VxeFormItem',
+    props: formItemProps,
+    setup(props, { slots }) {
+        const refElem = ref();
+        const $xeform = inject('$xeForm', {});
+        const formGather = inject('$xeformgather', null);
+        const formItem = reactive(createItem($xeform, props));
+        formItem.slots = slots;
+        const formItemInfo = { itemConfig: formItem };
+        provide('$xeFormItemInfo', formItemInfo);
+        watchItem(props, formItem);
+        onMounted(() => {
+            assemItem($xeform, refElem.value, formItem, formGather);
+        });
+        onUnmounted(() => {
+            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 = isEnableConf(itemRender) ? 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.eqNull(item.titleAlign) ? allTitleAlign : item.titleAlign;
+            const titleWidth = XEUtils.eqNull(item.titleWidth) ? allTitleWidth : item.titleWidth;
+            const titleColon = XEUtils.eqNull(item.titleColon) ? allTitleColon : item.titleColon;
+            const titleAsterisk = XEUtils.eqNull(item.titleAsterisk) ? allTitleAsterisk : item.titleAsterisk;
+            const itemOverflow = (XEUtils.isUndefined(titleOverflow) || XEUtils.isNull(titleOverflow)) ? allTitleOverflow : titleOverflow;
+            const itemVertical = (XEUtils.isUndefined(vertical) || XEUtils.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 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 = getSlotVNs(compConf.renderItemContent(itemRender, params));
+            }
+            else if (field) {
+                contentVNs = [`${XEUtils.get(data, field)}`];
+            }
+            if (collapseNode) {
+                contentVNs.push(h('div', {
+                    class: 'vxe-form--item-trigger-node',
+                    onClick: $xeform.toggleCollapseEvent
+                }, [
+                    h('span', {
+                        class: 'vxe-form--item-trigger-text'
+                    }, collapseAll ? getI18n('vxe.form.unfolding') : getI18n('vxe.form.folding')),
+                    h('i', {
+                        class: ['vxe-form--item-trigger-icon', collapseAll ? iconConfigStore.FORM_FOLDING : iconConfigStore.FORM_UNFOLDING]
+                    })
+                ]));
+            }
+            if (errRule && validOpts.showMessage) {
+                contentVNs.push(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 h('div', {
+                ref: refElem,
+                class: [
+                    'vxe-form--item',
+                    item.id,
+                    span ? `vxe-col--${span} is--span` : '',
+                    className ? (XEUtils.isFunction(className) ? className(params) : className) : '',
+                    itemClassName ? (XEUtils.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': isActivetem($xeform, item),
+                        'is--error': showError
+                    }
+                ],
+                style: XEUtils.isFunction(itemStyle) ? itemStyle(params) : itemStyle
+            }, [
+                h('div', {
+                    class: 'vxe-form--item-inner'
+                }, [
+                    (showTitle !== false) && (title || titleSlot)
+                        ? h('div', {
+                            class: [
+                                'vxe-form--item-title',
+                                titleAlign ? `align--${titleAlign}` : '',
+                                hasEllipsis ? 'is--ellipsis' : '',
+                                itemTitleClassName ? (XEUtils.isFunction(itemTitleClassName) ? itemTitleClassName(params) : itemTitleClassName) : '',
+                                titleClassName ? (XEUtils.isFunction(titleClassName) ? titleClassName(params) : titleClassName) : ''
+                            ],
+                            style: Object.assign({}, XEUtils.isFunction(itemTitleStyle) ? itemTitleStyle(params) : itemTitleStyle, XEUtils.isFunction(titleStyle) ? titleStyle(params) : titleStyle, titleWidth
+                                ? {
+                                    width: isNaN(titleWidth) ? titleWidth : `${titleWidth}px`
+                                }
+                                : null),
+                            title: ovTitle ? getFuncText(title) : null,
+                            ...ons
+                        }, renderTitle($xeform, item))
+                        : null,
+                    h('div', {
+                        class: [
+                            'vxe-form--item-content',
+                            align ? `align--${align}` : '',
+                            itemContentClassName ? (XEUtils.isFunction(itemContentClassName) ? itemContentClassName(params) : itemContentClassName) : '',
+                            contentClassName ? (XEUtils.isFunction(contentClassName) ? contentClassName(params) : contentClassName) : ''
+                        ],
+                        style: Object.assign({}, XEUtils.isFunction(itemContentStyle) ? itemContentStyle(params) : itemContentStyle, XEUtils.isFunction(contentStyle) ? contentStyle(params) : contentStyle)
+                    }, contentVNs)
+                ])
+            ]);
+        };
+        const renderVN = () => {
+            const formProps = $xeform ? $xeform.props : null;
+            return formProps && formProps.customLayout
+                ? renderItem($xeform, formItem)
+                : h('div', {
+                    ref: refElem
+                });
+        };
+        const $xeformitem = {
+            formItem,
+            renderVN
+        };
+        provide('$xeformitem', $xeformitem);
+        provide('$xeformgather', null);
+        return $xeformitem;
+    },
+    render() {
+        return this.renderVN();
+    }
+});