vxe-pc-ui 3.16.0 → 3.16.2

package/es/form/src/itemInfo.js

@@ -0,0 +1,76 @@
+import { formats } from '../../ui';
+import XEUtils from 'xe-utils';
+import { createComponentLog } from '../../ui/src/log';
+const { errLog } = createComponentLog('form');
+export class ItemInfo {
+    constructor($xeForm, item) {
+        const { field, itemRender, formatter } = item;
+        if (formatter) {
+            if (XEUtils.isString(formatter)) {
+                const gFormatOpts = formats.get(formatter);
+                if (!gFormatOpts || !gFormatOpts.formItemFormatMethod) {
+                    errLog('vxe.error.notFormats', [formatter]);
+                }
+            }
+            else if (XEUtils.isArray(formatter)) {
+                const gFormatOpts = formats.get(formatter[0]);
+                if (!gFormatOpts || !gFormatOpts.formItemFormatMethod) {
+                    errLog('vxe.error.notFormats', [formatter[0]]);
+                }
+            }
+        }
+        if (field && itemRender) {
+            if (itemRender.startField && `${itemRender.startField}`.indexOf(field) >= 0) {
+                errLog('vxe.error.modelConflicts', [`field=${field}`, `item-render.startField=${itemRender.startField}`]);
+            }
+            if (itemRender.endField && `${itemRender.endField}`.indexOf(field) >= 0) {
+                errLog('vxe.error.modelConflicts', [`field=${field}`, `item-render.endField=${itemRender.endField}`]);
+            }
+        }
+        Object.assign(this, {
+            id: XEUtils.uniqueId('item_'),
+            title: item.title,
+            field: field,
+            span: item.span,
+            align: item.align,
+            verticalAlign: item.verticalAlign,
+            titleBackground: item.titleBackground,
+            titleBold: item.titleBold,
+            titleAlign: item.titleAlign,
+            titleWidth: item.titleWidth,
+            titleColon: item.titleColon,
+            vertical: item.vertical,
+            padding: item.padding,
+            titleAsterisk: item.titleAsterisk,
+            titlePrefix: item.titlePrefix,
+            titleSuffix: item.titleSuffix,
+            titleOverflow: item.titleOverflow,
+            showTitle: item.showTitle,
+            resetValue: item.resetValue,
+            visibleMethod: item.visibleMethod,
+            visible: item.visible,
+            showContent: item.showContent,
+            folding: item.folding,
+            collapseNode: item.collapseNode,
+            className: item.className,
+            contentClassName: item.contentClassName,
+            contentStyle: item.contentStyle,
+            titleClassName: item.titleClassName,
+            titleStyle: item.titleStyle,
+            itemRender: itemRender,
+            rules: item.rules,
+            formatter: item.formatter,
+            // 自定义参数
+            params: item.params,
+            // 渲染属性
+            showError: false,
+            showIconMsg: false,
+            errRule: null,
+            slots: item.slots,
+            children: []
+        });
+    }
+    update(name, value) {
+        this[name] = value;
+    }
+}

package/es/form/src/render.js

@@ -0,0 +1,357 @@
+import { getIcon, getI18n, formats, renderer, renderEmptyElement } from '../../ui';
+import { eqEmptyValue, getFuncText, isEnableConf } from '../../ui/src/utils';
+import { toCssUnit } from '../../ui/src/dom';
+import { getSlotVNs } from '../../ui/src/vn';
+import { isActiveItem } from './util';
+import VxeTooltipComponent from '../../tooltip';
+import VxeIconComponent from '../../icon';
+import XEUtils from 'xe-utils';
+function renderPrefixIcon(h, titlePrefix) {
+    return h('span', {
+        class: 'vxe-form--item-title-tip-prefix'
+    }, [
+        h(VxeIconComponent, {
+            class: titlePrefix.icon || getIcon().FORM_PREFIX,
+            props: {
+                status: titlePrefix.iconStatus
+            }
+        })
+    ]);
+}
+function renderSuffixIcon(h, titleSuffix) {
+    return h('span', {
+        class: 'vxe-form--item-title-tip-suffix'
+    }, [
+        h(VxeIconComponent, {
+            class: titleSuffix.icon || getIcon().FORM_SUFFIX,
+            props: {
+                status: titleSuffix.iconStatus
+            }
+        })
+    ]);
+}
+export function getItemClass($xeForm, item, isGroup) {
+    const formProps = $xeForm;
+    const formReactData = $xeForm.reactData;
+    const $xeGrid = $xeForm.$xeGrid;
+    const { data, rules, readonly, disabled, span: allSpan, titleBackground: allTitleBackground, titleBold: allTitleBold, titleColon: allTitleColon, titleAsterisk: allTitleAsterisk, vertical: allVertical, padding: allPadding } = formProps;
+    const { collapseAll } = formReactData;
+    const { folding, field, itemRender, showError, className, vertical, padding, children, showContent } = item;
+    const vSize = $xeForm.computeSize;
+    const validOpts = $xeForm.computeValidOpts;
+    const { showErrorMessage, showMessage, showErrorBackground, showErrorIcon } = validOpts;
+    const compConf = isEnableConf(itemRender) ? renderer.get(itemRender.name) : null;
+    const itemClassName = compConf ? (compConf.formItemClassName || compConf.itemClassName) : '';
+    const span = item.span || allSpan;
+    const itemPadding = XEUtils.eqNull(padding) ? allPadding : padding;
+    const itemVertical = XEUtils.eqNull(vertical) ? allVertical : vertical;
+    const titleBackground = XEUtils.eqNull(item.titleBackground) ? allTitleBackground : item.titleBackground;
+    const titleBold = XEUtils.eqNull(item.titleBold) ? allTitleBold : item.titleBold;
+    const titleColon = XEUtils.eqNull(item.titleColon) ? allTitleColon : item.titleColon;
+    const titleAsterisk = XEUtils.eqNull(item.titleAsterisk) ? allTitleAsterisk : item.titleAsterisk;
+    const params = { data, disabled, readonly, field, property: field, item, $form: $xeForm, $grid: $xeGrid };
+    const hasGroup = children && children.length > 0;
+    let isRequired = false;
+    let isValid = false;
+    if (!readonly && rules) {
+        const itemRules = item.rules ? item.rules : rules[field];
+        if (itemRules && itemRules.length) {
+            isValid = true;
+            isRequired = itemRules.some((rule) => rule.required);
+        }
+    }
+    return [
+        isGroup || hasGroup ? 'vxe-form--group' : '',
+        'vxe-form--item',
+        item.id,
+        span ? `vxe-form--item-col_${span} is--span` : '',
+        `${(XEUtils.isBoolean(showErrorMessage) ? showErrorMessage : showMessage) ? 'show' : 'hide'}--err-msg`,
+        className ? (XEUtils.isFunction(className) ? className(params) : className) : '',
+        itemClassName ? (XEUtils.isFunction(itemClassName) ? itemClassName(params) : itemClassName) : '',
+        {
+            [`size--${vSize}`]: vSize,
+            'is--colon': titleColon,
+            'is--tbg': titleBackground,
+            'is--bold': titleBold,
+            'is--padding': itemPadding,
+            'is--vertical': itemVertical,
+            'is--asterisk': titleAsterisk,
+            'hide--content': showContent === false,
+            'is--valid': isValid,
+            'is--required': isRequired,
+            'is--hidden': folding && collapseAll,
+            'is--active': isActiveItem($xeForm, item),
+            'err--icon': showErrorIcon,
+            'err--bg': showErrorBackground,
+            'is--error': showError
+        }
+    ];
+}
+export function getItemContentClass($xeForm, item, isGroup) {
+    const formProps = $xeForm;
+    const $xeGrid = $xeForm.$xeGrid;
+    const { data, readonly, disabled, align: allAlign, verticalAlign: allVerticalAlign } = formProps;
+    const { field, itemRender, contentClassName, children } = item;
+    const hasGroup = children && children.length > 0;
+    const compConf = isEnableConf(itemRender) ? renderer.get(itemRender.name) : null;
+    const itemContentClassName = compConf ? (compConf.formItemContentClassName || compConf.itemContentClassName) : '';
+    const align = hasGroup ? item.align : (XEUtils.eqNull(item.align) ? allAlign : item.align);
+    const verticalAlign = hasGroup ? item.verticalAlign : (XEUtils.eqNull(item.verticalAlign) ? allVerticalAlign : item.verticalAlign);
+    const params = { data, disabled, readonly, field, property: field, item, $form: $xeForm, $grid: $xeGrid };
+    return [
+        isGroup || hasGroup ? 'vxe-form--group-content vxe-form--item-row' : '',
+        'vxe-form--item-content',
+        align ? `align--${align}` : '',
+        verticalAlign ? `vertical-align--${verticalAlign}` : '',
+        itemContentClassName ? (XEUtils.isFunction(itemContentClassName) ? itemContentClassName(params) : itemContentClassName) : '',
+        contentClassName ? (XEUtils.isFunction(contentClassName) ? contentClassName(params) : contentClassName) : ''
+    ];
+}
+export function renderTitle(h, $xeForm, item, isGroup) {
+    const formProps = $xeForm;
+    const $xeGrid = $xeForm.$xeGrid;
+    const { data, readonly, disabled, titleAlign: allTitleAlign, titleWidth: allTitleWidth, titleOverflow: allTitleOverflow, vertical: allVertical } = formProps;
+    const { slots, title, field, itemRender, titleOverflow, vertical, showTitle, titleClassName, titleStyle, titlePrefix, titleSuffix, children, showContent } = item;
+    const tooltipOpts = $xeForm.computeTooltipOpts;
+    const compConf = isEnableConf(itemRender) ? renderer.get(itemRender.name) : null;
+    const itemTitleClassName = compConf ? (compConf.formItemTitleClassName || compConf.itemTitleClassName) : '';
+    const itemTitleStyle = compConf ? (compConf.formItemTitleStyle || compConf.itemTitleStyle) : null;
+    const itemVertical = XEUtils.eqNull(vertical) ? allVertical : vertical;
+    const titleAlign = XEUtils.eqNull(item.titleAlign) ? allTitleAlign : item.titleAlign;
+    const titleWidth = itemVertical ? null : (XEUtils.eqNull(item.titleWidth) ? allTitleWidth : item.titleWidth);
+    const itemOverflow = XEUtils.eqNull(titleOverflow) ? allTitleOverflow : titleOverflow;
+    const ovEllipsis = itemOverflow === 'ellipsis';
+    const ovTitle = itemOverflow === 'title';
+    const ovTooltip = itemOverflow === true || itemOverflow === 'tooltip';
+    const hasEllipsis = ovTitle || ovTooltip || ovEllipsis;
+    const params = { data, disabled, readonly, field, property: field, item, $form: $xeForm, $grid: $xeGrid };
+    const titleSlot = slots ? slots.title : null;
+    const prefixSlot = slots ? slots.prefix : null;
+    const suffixSlot = slots ? slots.suffix || slots.extra : null;
+    const isTitle = (showTitle !== false) && (title || titleSlot);
+    const hasGroup = children && children.length > 0;
+    const titVNs = [];
+    if (prefixSlot) {
+        titVNs.push(h('span', {
+            key: 'pt',
+            class: 'vxe-form--item-title-prefix'
+        }, $xeForm.callSlot(prefixSlot, params, h)));
+    }
+    if (titlePrefix) {
+        titVNs.push((titlePrefix.content || titlePrefix.message)
+            ? h(VxeTooltipComponent, {
+                key: 'pm',
+                props: Object.assign(Object.assign(Object.assign({}, tooltipOpts), titlePrefix), { content: getFuncText(titlePrefix.content || titlePrefix.message) }),
+                scopedSlots: {
+                    default: () => renderPrefixIcon(h, titlePrefix)
+                }
+            })
+            : renderPrefixIcon(h, titlePrefix));
+    }
+    const rftTitle = compConf ? (compConf.renderFormItemTitle || compConf.renderItemTitle) : null;
+    titVNs.push(h('span', {
+        key: 'pl',
+        class: 'vxe-form--item-title-label'
+    }, titleSlot ? $xeForm.callSlot(titleSlot, params, h) : (rftTitle ? getSlotVNs(rftTitle.call($xeForm, h, itemRender, params)) : getFuncText(item.title))));
+    const fixVNs = [];
+    if (titleSuffix) {
+        fixVNs.push((titleSuffix.content || titleSuffix.message)
+            ? h(VxeTooltipComponent, {
+                key: 'sm',
+                props: Object.assign(Object.assign(Object.assign({}, tooltipOpts), titleSuffix), { content: getFuncText(titleSuffix.content || titleSuffix.message) }),
+                scopedSlots: {
+                    default: () => renderSuffixIcon(h, titleSuffix)
+                }
+            })
+            : renderSuffixIcon(h, titleSuffix));
+    }
+    if (suffixSlot) {
+        fixVNs.push(h('span', {
+            key: 'st',
+            class: 'vxe-form--item-title-suffix'
+        }, $xeForm.callSlot(suffixSlot, params, h)));
+    }
+    const ons = ovTooltip
+        ? {
+            onMouseenter(evnt) {
+                $xeForm.triggerTitleTipEvent(evnt, params);
+            },
+            onMouseleave: $xeForm.handleTitleTipLeaveEvent
+        }
+        : {};
+    const itStyle = Object.assign({}, XEUtils.isFunction(itemTitleStyle) ? itemTitleStyle(params) : itemTitleStyle, XEUtils.isFunction(titleStyle) ? titleStyle(params) : titleStyle);
+    if (titleWidth && titleWidth !== 'auto' && showContent !== false) {
+        itStyle.width = toCssUnit(titleWidth);
+    }
+    return isTitle
+        ? h('div', {
+            class: [
+                isGroup || hasGroup ? 'vxe-form--group-title' : '',
+                '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: itStyle,
+            attrs: {
+                itemid: item.id,
+                title: ovTitle ? getFuncText(title) : null
+            },
+            on: ons
+        }, [
+            h('div', {
+                class: 'vxe-form--item-title-content'
+            }, titVNs),
+            h('div', {
+                class: 'vxe-form--item-title-postfix'
+            }, fixVNs)
+        ])
+        : renderEmptyElement($xeForm);
+}
+export function renderItemErrorIcon(h, $xeForm, item) {
+    const validOpts = $xeForm.computeValidOpts;
+    const { showErrorIcon, errorIcon } = validOpts;
+    const { errRule, showIconMsg } = item;
+    if (!showErrorIcon) {
+        return renderEmptyElement($xeForm);
+    }
+    return h('div', {
+        key: 'emi',
+        class: ['vxe-form-item--valid-error-icon-wrapper', {
+                'is--show': showIconMsg,
+                'is--hide': !showIconMsg
+            }]
+    }, [
+        h('span', {
+            class: 'vxe-form-item--valid-error-icon-btn',
+            on: {
+                click(evnt) {
+                    $xeForm.handleValidIconEvent(evnt, { item });
+                }
+            }
+        }, [
+            h('i', {
+                class: errorIcon || getIcon().FORM_VALID_ERROR_ICON
+            })
+        ]),
+        h('div', {
+            class: 'vxe-form-item--valid-error-icon-msg-tip'
+        }, errRule
+            ? [
+                h('div', {
+                    class: `vxe-form-item--valid-error-icon-msg vxe-form-item--valid-error-icon-theme-${validOpts.theme || 'normal'}`
+                }, errRule.content || errRule.message)
+            ]
+            : [])
+    ]);
+}
+export function renderItemContent(h, $xeForm, item) {
+    const formProps = $xeForm;
+    const formReactData = $xeForm.reactData;
+    const formInternalData = $xeForm.internalData;
+    const $xeGrid = $xeForm.$xeGrid;
+    const { data, readonly, disabled } = formProps;
+    const { itemFormatCache } = formInternalData;
+    const { collapseAll } = formReactData;
+    const { slots, field, itemRender, collapseNode, errRule, formatter } = item;
+    const defaultSlot = slots ? slots.default : null;
+    const validSlot = slots ? slots.valid : null;
+    const collapseOpts = $xeForm.computeCollapseOpts;
+    const validOpts = $xeForm.computeValidOpts;
+    const { showErrorMessage, showMessage } = validOpts;
+    const compConf = isEnableConf(itemRender) ? renderer.get(itemRender.name) : null;
+    const itemValue = XEUtils.get(data, field);
+    const params = { data, disabled, readonly, field, property: field, item, itemValue, $form: $xeForm, $grid: $xeGrid };
+    let contentVNs = [];
+    const rftContent = compConf ? (compConf.renderFormItemContent || compConf.renderItemContent) : null;
+    if (defaultSlot) {
+        contentVNs = $xeForm.callSlot(defaultSlot, params, h);
+    }
+    else if (rftContent) {
+        contentVNs = getSlotVNs(rftContent.call($xeForm, h, itemRender, params));
+    }
+    else if (field) {
+        let itemLabel = itemValue;
+        if (formatter) {
+            let formatData;
+            if (field) {
+                const itemRest = itemFormatCache[field];
+                if (itemRest) {
+                    formatData = itemRest.formatData;
+                    if (formatData) {
+                        if (formatData.value === itemValue) {
+                            return formatData.label;
+                        }
+                    }
+                    else {
+                        formatData = itemRest.formatData = {};
+                    }
+                }
+                else {
+                    itemFormatCache[field] = { field };
+                }
+            }
+            if (XEUtils.isString(formatter)) {
+                const gFormatOpts = formats.get(formatter);
+                const fiFormatMethod = gFormatOpts ? gFormatOpts.formItemFormatMethod : null;
+                itemLabel = fiFormatMethod ? fiFormatMethod(params) : '';
+            }
+            else if (XEUtils.isArray(formatter)) {
+                const gFormatOpts = formats.get(formatter[0]);
+                const fiFormatMethod = gFormatOpts ? gFormatOpts.formItemFormatMethod : null;
+                itemLabel = fiFormatMethod ? fiFormatMethod(params, ...formatter.slice(1)) : '';
+            }
+            else {
+                itemLabel = formatter(params);
+            }
+            if (formatData) {
+                formatData.value = itemValue;
+                formatData.label = itemLabel;
+            }
+        }
+        contentVNs = [eqEmptyValue(itemLabel) ? '' : `${itemLabel}`];
+    }
+    if (collapseNode) {
+        contentVNs.push(h('div', {
+            class: 'vxe-form--item-trigger-node',
+            on: {
+                click: $xeForm.toggleCollapseEvent
+            }
+        }, [
+            h('span', {
+                class: 'vxe-form--item-trigger-text'
+            }, collapseAll ? (collapseOpts.unfoldButtonText || getI18n('vxe.form.unfolding')) : (collapseOpts.foldButtonText || getI18n('vxe.form.folding'))),
+            h('i', {
+                class: ['vxe-form--item-trigger-icon', collapseAll ? (collapseOpts.foldIcon || getIcon().FORM_FOLDING) : (collapseOpts.unfoldIcon || getIcon().FORM_UNFOLDING)]
+            })
+        ]));
+    }
+    if (errRule && (XEUtils.isBoolean(showErrorMessage) ? showErrorMessage : showMessage)) {
+        const validParams = Object.assign(Object.assign({}, params), { rule: errRule });
+        contentVNs.push(h('div', {
+            class: 'vxe-form-item--valid-error-tip',
+            style: errRule.maxWidth
+                ? {
+                    width: toCssUnit(errRule.maxWidth)
+                }
+                : {}
+        }, [
+            h('div', {
+                class: `vxe-form-item--valid-error-wrapper vxe-form-item--valid-error-theme-${validOpts.theme || 'normal'}`
+            }, [
+                validSlot
+                    ? $xeForm.callSlot(validSlot, validParams, h)
+                    : [
+                        h('span', {
+                            class: 'vxe-form--item--valid-error-msg'
+                        }, errRule.content || errRule.message)
+                    ]
+            ])
+        ]));
+    }
+    return h('div', {
+        key: 'ct',
+        class: 'vxe-form--item-inner'
+    }, contentVNs);
+}

package/es/form/src/util.js

@@ -0,0 +1,78 @@
+import { renderer } from '../../ui';
+import XEUtils from 'xe-utils';
+import { ItemInfo } from './itemInfo';
+import { isEnableConf } from '../../ui/src/utils';
+export function isFormItem(item) {
+    return item instanceof ItemInfo;
+}
+export function createItem($xeForm, _vm) {
+    return isFormItem(_vm) ? _vm : new ItemInfo($xeForm, _vm);
+}
+export function handleFieldOrItem($xeForm, fieldOrItem) {
+    if (fieldOrItem) {
+        return XEUtils.isString(fieldOrItem) ? $xeForm.getItemByField(fieldOrItem) : fieldOrItem;
+    }
+    return null;
+}
+export function isHiddenItem($xeForm, formItem) {
+    const { reactData } = $xeForm;
+    const { collapseAll } = reactData;
+    const { folding, visible } = formItem;
+    return visible === false || (folding && collapseAll);
+}
+export function isActiveItem($xeForm, formItem) {
+    const $xeGrid = $xeForm.$xeGrid;
+    let { visibleMethod, itemRender, visible, field } = formItem;
+    if (visible === false) {
+        return visible;
+    }
+    const compConf = isEnableConf(itemRender) ? renderer.get(itemRender.name) : null;
+    const fiVisibleMethod = compConf ? (compConf.formItemVisibleMethod || compConf.itemVisibleMethod) : null;
+    if (!visibleMethod && fiVisibleMethod) {
+        visibleMethod = fiVisibleMethod;
+    }
+    if (!visibleMethod) {
+        return true;
+    }
+    const formProps = $xeForm;
+    const { data } = formProps;
+    return visibleMethod({ data, field, property: field, item: formItem, $form: $xeForm, $grid: $xeGrid });
+}
+export function watchItem(_vm, formItemPropKeys, formItem) {
+    formItemPropKeys.forEach(name => {
+        _vm.$watch(name, (val) => {
+            formItem.update(name, val);
+        });
+    });
+}
+export function assembleItem($xeForm, el, formItem, formGroup) {
+    const { reactData } = $xeForm;
+    const formProps = $xeForm;
+    const { customLayout } = formProps;
+    const { staticItems } = reactData;
+    if (customLayout) {
+        if (!staticItems.some(item => item.id === formItem.id)) {
+            staticItems.push(formItem);
+        }
+    }
+    else {
+        if (el) {
+            const parentElem = el.parentNode;
+            const parentItem = formGroup ? formGroup.formItem : null;
+            const parentItems = parentItem ? parentItem.children : staticItems;
+            if (parentElem) {
+                parentItems.splice(XEUtils.arrayIndexOf(parentElem.children, el), 0, formItem);
+                reactData.staticItems = staticItems.slice(0);
+            }
+        }
+    }
+}
+export function destroyItem($xeForm, formItem) {
+    const { reactData } = $xeForm;
+    const { staticItems } = reactData;
+    const index = XEUtils.findIndexOf(staticItems, item => item.id === formItem.id);
+    if (index > -1) {
+        staticItems.splice(index, 1);
+    }
+    reactData.staticItems = staticItems.slice(0);
+}