vxe-pc-ui 3.0.0 → 3.0.2

package/es/form/render/index.js

@@ -0,0 +1,461 @@
+import XEUtils from 'xe-utils';
+import { renderer } from '../../ui';
+import { getOnName, getModelEvent, getChangeEvent } from '../../ui/src/vn';
+import { errLog } from '../../ui/src/log';
+const componentDefaultModelProp = 'value';
+/**
+ * 已废弃
+ * @deprecated
+ */
+function getOldComponentName(name) {
+    return `vxe-${name.replace('$', '')}`;
+}
+/**
+ * 已废弃
+ * @deprecated
+ */
+function getOldComponent({ name }) {
+    return getOldComponentName(name);
+}
+function getDefaultComponent({ name }) {
+    return name;
+}
+function getNativeAttrs(renderOpts) {
+    let { name, attrs } = renderOpts;
+    if (name === 'input') {
+        attrs = Object.assign({ type: 'text' }, attrs);
+    }
+    return attrs;
+}
+function getComponentFormItemProps(renderOpts, params, value, defaultProps) {
+    return XEUtils.assign({}, defaultProps, renderOpts.props, { [componentDefaultModelProp]: value });
+}
+/**
+ * 原生事件处理
+ * @param renderOpts
+ * @param params
+ * @param modelFunc
+ * @param changeFunc
+ */
+function getElementOns(renderOpts, params, modelFunc, changeFunc) {
+    const { events } = renderOpts;
+    const modelEvent = getModelEvent(renderOpts.name);
+    const changeEvent = getChangeEvent(renderOpts.name);
+    const isSameEvent = changeEvent === modelEvent;
+    const ons = {};
+    if (events) {
+        XEUtils.objectEach(events, (func, key) => {
+            ons[getOnName(key)] = function (...args) {
+                func(params, ...args);
+            };
+        });
+    }
+    if (modelFunc) {
+        ons[getOnName(modelEvent)] = function (targetEvnt) {
+            modelFunc(targetEvnt);
+            if (isSameEvent && changeFunc) {
+                changeFunc(targetEvnt);
+            }
+            if (events && events[modelEvent]) {
+                events[modelEvent](params, targetEvnt);
+            }
+        };
+    }
+    if (!isSameEvent && changeFunc) {
+        ons[getOnName(changeEvent)] = function (...args) {
+            changeFunc(...args);
+            if (events && events[changeEvent]) {
+                events[changeEvent](params, ...args);
+            }
+        };
+    }
+    return ons;
+}
+/**
+ * 组件事件处理
+ * @param renderOpts
+ * @param params
+ * @param modelFunc
+ * @param changeFunc
+ */
+function getComponentOns(renderOpts, params, modelFunc, changeFunc) {
+    const { events } = renderOpts;
+    const modelEvent = getModelEvent(renderOpts.name);
+    const changeEvent = getChangeEvent(renderOpts.name);
+    const ons = {};
+    XEUtils.objectEach(events, (func, key) => {
+        ons[getOnName(key)] = function (...args) {
+            if (process.env.NODE_ENV === 'development') {
+                if (!XEUtils.isFunction(func)) {
+                    errLog('vxe.error.errFunc', [func]);
+                }
+            }
+            func(params, ...args);
+        };
+    });
+    if (modelFunc) {
+        ons[getOnName(modelEvent)] = function (targetEvnt) {
+            modelFunc(targetEvnt);
+            if (events && events[modelEvent]) {
+                events[modelEvent](params, targetEvnt);
+            }
+        };
+    }
+    if (changeFunc) {
+        ons[getOnName(changeEvent)] = function (...args) {
+            changeFunc(...args);
+            if (events && events[changeEvent]) {
+                events[changeEvent](params, ...args);
+            }
+        };
+    }
+    return ons;
+}
+function getItemOns(renderOpts, params) {
+    const { $form, data, field } = params;
+    return getComponentOns(renderOpts, params, (value) => {
+        // 处理 model 值双向绑定
+        XEUtils.set(data, field, value);
+    }, () => {
+        // 处理 change 事件相关逻辑
+        $form.updateStatus(params);
+    });
+}
+function getNativeItemOns(renderOpts, params) {
+    const { $form, data, field } = params;
+    return getElementOns(renderOpts, params, (evnt) => {
+        // 处理 model 值双向绑定
+        const itemValue = evnt.target.value;
+        XEUtils.set(data, field, itemValue);
+    }, () => {
+        // 处理 change 事件相关逻辑
+        $form.updateStatus(params);
+    });
+}
+function renderNativeOptgroup(h, renderOpts, params, renderOptionsMethods) {
+    const { optionGroups, optionGroupProps = {} } = renderOpts;
+    const groupOptions = optionGroupProps.options || 'options';
+    const groupLabel = optionGroupProps.label || 'label';
+    return optionGroups.map((group, gIndex) => {
+        return h('optgroup', {
+            key: gIndex,
+            attrs: {
+                label: group[groupLabel]
+            }
+        }, renderOptionsMethods(group[groupOptions], renderOpts, params));
+    });
+}
+/**
+ * 渲染表单-项
+ * 用于渲染原生的标签
+ */
+function nativeItemRender(h, renderOpts, params) {
+    const { data, field } = params;
+    const { name } = renderOpts;
+    const attrs = getNativeAttrs(renderOpts);
+    const itemValue = XEUtils.get(data, field);
+    return [
+        h(name, {
+            class: `vxe-default-${name}`,
+            attrs,
+            domProps: {
+                value: attrs && name === 'input' && (attrs.type === 'submit' || attrs.type === 'reset') ? null : itemValue
+            },
+            on: getNativeItemOns(renderOpts, params)
+        })
+    ];
+}
+function defaultItemRender(h, renderOpts, params) {
+    const { data, field } = params;
+    const itemValue = XEUtils.get(data, field);
+    return [
+        h(getDefaultComponent(renderOpts), {
+            props: getComponentFormItemProps(renderOpts, params, itemValue),
+            on: getItemOns(renderOpts, params)
+        })
+    ];
+}
+/**
+ * 已废弃
+ * @deprecated
+ */
+function oldItemRender(h, renderOpts, params) {
+    const { data, field } = params;
+    const itemValue = XEUtils.get(data, field);
+    return [
+        h(getOldComponent(renderOpts), {
+            props: getComponentFormItemProps(renderOpts, params, itemValue),
+            on: getItemOns(renderOpts, params)
+        })
+    ];
+}
+/**
+ * 已废弃
+ * @deprecated
+ */
+function oldButtonItemRender(h, renderOpts, params) {
+    return [
+        h('vxe-button', {
+            props: getComponentFormItemProps(renderOpts, params, null),
+            on: getComponentOns(renderOpts, params)
+        })
+    ];
+}
+/**
+ * 已废弃
+ * @deprecated
+ */
+function oldButtonsItemRender(h, renderOpts, params) {
+    return renderOpts.children.map((childRenderOpts) => oldButtonItemRender(h, childRenderOpts, params)[0]);
+}
+/**
+ * 渲染原生的 select 标签
+ */
+function renderNativeFormOptions(h, options, renderOpts, params) {
+    const { data, field } = params;
+    const { optionProps = {} } = renderOpts;
+    const labelProp = optionProps.label || 'label';
+    const valueProp = optionProps.value || 'value';
+    const disabledProp = optionProps.disabled || 'disabled';
+    const cellValue = XEUtils.get(data, field);
+    return options.map((item, oIndex) => {
+        return h('option', {
+            key: oIndex,
+            props: {
+                value: item[valueProp],
+                disabled: item[disabledProp],
+                /* eslint-disable eqeqeq */
+                selected: item[valueProp] == cellValue
+            }
+        }, item[labelProp]);
+    });
+}
+/**
+ * 渲染表单-项
+ */
+function defaultFormItemRender(h, renderOpts, params) {
+    const { data, field } = params;
+    const itemValue = XEUtils.get(data, field);
+    return [
+        h(getDefaultComponent(renderOpts), {
+            props: getComponentFormItemProps(renderOpts, params, itemValue),
+            on: getItemOns(renderOpts, params)
+        })
+    ];
+}
+function formItemRadioAndCheckboxRender(h, renderOpts, params) {
+    const { options, optionProps } = renderOpts;
+    const { data, field } = params;
+    const itemValue = XEUtils.get(data, field);
+    return [
+        h(getDefaultComponent(renderOpts), {
+            props: Object.assign({ options,
+                optionProps }, getComponentFormItemProps(renderOpts, params, itemValue)),
+            on: getItemOns(renderOpts, params)
+        })
+    ];
+}
+/**
+ * 已废弃
+ * @deprecated
+ */
+function oldFormItemRadioAndCheckboxRender(h, renderOpts, params) {
+    const { name, options, optionProps = {} } = renderOpts;
+    const { data, field } = params;
+    const labelProp = optionProps.label || 'label';
+    const valueProp = optionProps.value || 'value';
+    const disabledProp = optionProps.disabled || 'disabled';
+    const itemValue = XEUtils.get(data, field);
+    const compName = getOldComponentName(name);
+    // 如果是分组
+    if (options) {
+        return [
+            h(`${compName}-group`, {
+                props: getComponentFormItemProps(renderOpts, params, itemValue),
+                on: getItemOns(renderOpts, params),
+                scopedSlots: {
+                    default: () => {
+                        return options.map((item, index) => {
+                            return h(compName, {
+                                key: index,
+                                props: {
+                                    label: item[valueProp],
+                                    content: item[labelProp],
+                                    disabled: item[disabledProp]
+                                }
+                            });
+                        });
+                    }
+                }
+            })
+        ];
+    }
+    return [
+        h(compName, {
+            props: getComponentFormItemProps(renderOpts, params, itemValue),
+            on: getItemOns(renderOpts, params)
+        })
+    ];
+}
+/**
+ * 表单 - 渲染器
+ */
+renderer.mixin({
+    input: {
+        renderItemContent: nativeItemRender
+    },
+    textarea: {
+        renderItemContent: nativeItemRender
+    },
+    select: {
+        renderItemContent(h, renderOpts, params) {
+            return [
+                h('select', {
+                    class: 'vxe-default-select',
+                    attrs: Object.assign({}, getNativeAttrs(renderOpts)),
+                    on: getNativeItemOns(renderOpts, params)
+                }, renderOpts.optionGroups ? renderNativeOptgroup(h, renderOpts, params, renderNativeFormOptions) : renderNativeFormOptions(h, renderOpts.options, renderOpts, params))
+            ];
+        }
+    },
+    VxeInput: {
+        renderItemContent: defaultItemRender
+    },
+    VxeNumberInput: {
+        renderItemContent: defaultItemRender
+    },
+    VxePasswordInput: {
+        renderItemContent: defaultItemRender
+    },
+    VxeTextarea: {
+        renderItemContent: defaultItemRender
+    },
+    VxeDatePicker: {
+        renderItemContent: defaultItemRender
+    },
+    VxeButton: {
+        renderItemContent: defaultFormItemRender
+    },
+    VxeButtonGroup: {
+        renderItemContent(h, renderOpts, params) {
+            const { options } = renderOpts;
+            const { data, field } = params;
+            const itemValue = XEUtils.get(data, field);
+            return [
+                h(getDefaultComponent(renderOpts), {
+                    props: Object.assign({ options }, getComponentFormItemProps(renderOpts, params, itemValue)),
+                    on: getItemOns(renderOpts, params)
+                })
+            ];
+        }
+    },
+    VxeSelect: {
+        renderItemContent(h, renderOpts, params) {
+            const { data, field } = params;
+            const { options, optionProps, optionGroups, optionGroupProps } = renderOpts;
+            const itemValue = XEUtils.get(data, field);
+            return [
+                h(getDefaultComponent(renderOpts), {
+                    props: getComponentFormItemProps(renderOpts, params, itemValue, { options, optionProps, optionGroups, optionGroupProps }),
+                    on: getItemOns(renderOpts, params)
+                })
+            ];
+        }
+    },
+    VxeTreeSelect: {
+        renderItemContent(h, renderOpts, params) {
+            const { data, field } = params;
+            const { options, optionProps } = renderOpts;
+            const itemValue = XEUtils.get(data, field);
+            return [
+                h(getDefaultComponent(renderOpts), {
+                    props: getComponentFormItemProps(renderOpts, params, itemValue, { options, optionProps }),
+                    on: getItemOns(renderOpts, params)
+                })
+            ];
+        }
+    },
+    VxeIconPicker: {
+        renderItemContent: defaultFormItemRender
+    },
+    VxeRadio: {
+        renderItemContent: defaultFormItemRender
+    },
+    VxeRadioGroup: {
+        renderItemContent: formItemRadioAndCheckboxRender
+    },
+    VxeCheckbox: {
+        renderItemContent: defaultFormItemRender
+    },
+    VxeCheckboxGroup: {
+        renderItemContent: formItemRadioAndCheckboxRender
+    },
+    VxeSwitch: {
+        renderItemContent: defaultItemRender
+    },
+    VxeImage: {
+        renderItemContent(h, renderOpts, params) {
+            const { data, field } = params;
+            const { props } = renderOpts;
+            const itemValue = XEUtils.get(data, field);
+            return [
+                h(getDefaultComponent(renderOpts), {
+                    props: Object.assign(Object.assign({}, props), { src: itemValue }),
+                    on: getItemOns(renderOpts, params)
+                })
+            ];
+        }
+    },
+    VxeImageGroup: {
+        renderItemContent(h, renderOpts, params) {
+            const { data, field } = params;
+            const { props } = renderOpts;
+            const itemValue = XEUtils.get(data, field);
+            return [
+                h(getDefaultComponent(renderOpts), {
+                    props: Object.assign(Object.assign({}, props), { urlList: itemValue }),
+                    on: getItemOns(renderOpts, params)
+                })
+            ];
+        }
+    },
+    VxeUpload: {
+        renderItemContent: defaultItemRender
+    },
+    // 以下已废弃
+    $input: {
+        renderItemContent: oldItemRender
+    },
+    $textarea: {
+        renderItemContent: oldItemRender
+    },
+    $button: {
+        renderItemContent: oldButtonItemRender
+    },
+    $buttons: {
+        renderItemContent: oldButtonsItemRender
+    },
+    $select: {
+        renderItemContent(h, renderOpts, params) {
+            const { data, field } = params;
+            const { options, optionProps, optionGroups, optionGroupProps } = renderOpts;
+            const itemValue = XEUtils.get(data, field);
+            return [
+                h(getOldComponent(renderOpts), {
+                    props: getComponentFormItemProps(renderOpts, params, itemValue, { options, optionProps, optionGroups, optionGroupProps }),
+                    on: getItemOns(renderOpts, params)
+                })
+            ];
+        }
+    },
+    $radio: {
+        renderItemContent: oldFormItemRadioAndCheckboxRender
+    },
+    $checkbox: {
+        renderItemContent: oldFormItemRadioAndCheckboxRender
+    },
+    $switch: {
+        renderItemContent: oldItemRender
+    }
+    // 以上已废弃
+});

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

@@ -0,0 +1,201 @@
+import { defineVxeComponent } from '../../ui/src/comp';
+import XEUtils from 'xe-utils';
+import { getIcon, getI18n, renderer, renderEmptyElement, globalMixins } from '../../ui';
+import { getFuncText, isEnableConf } from '../../ui/src/utils';
+import { getSlotVNs } from '../../ui/src/vn';
+import { renderTitle } from './render';
+import { isActiveItem } from './util';
+const VxeFormConfigItem = defineVxeComponent({
+    name: 'VxeFormConfigItem',
+    mixins: [
+        globalMixins.sizeMixin
+    ],
+    props: {
+        itemConfig: Object
+    },
+    inject: {
+        $xeForm: {
+            default: null
+        }
+    },
+    provide() {
+        const xeFormItemInfo = this;
+        return {
+            xeFormItemInfo,
+            $xeFormGather: null
+        };
+    },
+    computed: Object.assign({}, {}),
+    methods: {
+        renderVN(h) {
+            const $xeFormConfigItem = this;
+            const props = $xeFormConfigItem;
+            const $xeForm = $xeFormConfigItem.$xeForm;
+            const formProps = $xeForm;
+            const formReactData = $xeForm.reactData;
+            const { data, rules, readonly, disabled, span: allSpan, align: allAlign, titleBold: allTitleBold, titleAlign: allTitleAlign, titleWidth: allTitleWidth, titleColon: allTitleColon, titleAsterisk: allTitleAsterisk, titleOverflow: allTitleOverflow, vertical: allVertical, padding: allPadding } = formProps;
+            const item = props.itemConfig;
+            const { collapseAll } = formReactData;
+            const validOpts = $xeForm.computeValidOpts;
+            const { slots, title, visible, folding, field, collapseNode, itemRender, showError, errRule, className, titleOverflow, vertical, padding, children, showTitle, contentClassName, contentStyle, titleClassName, titleStyle } = item;
+            const compConf = isEnableConf(itemRender) ? renderer.get(itemRender.name) : null;
+            const itemClassName = compConf ? (compConf.formItemClassName || compConf.itemClassName) : '';
+            const itemStyle = compConf ? (compConf.formItemStyle || compConf.itemStyle) : null;
+            const itemContentClassName = compConf ? (compConf.formItemContentClassName || compConf.itemContentClassName) : '';
+            const itemContentStyle = compConf ? (compConf.formItemContentStyle || compConf.itemContentStyle) : null;
+            const itemTitleClassName = compConf ? (compConf.formItemTitleClassName || compConf.itemTitleClassName) : '';
+            const itemTitleStyle = compConf ? (compConf.formItemTitleStyle || 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 itemPadding = XEUtils.eqNull(padding) ? allPadding : padding;
+            const itemVertical = XEUtils.eqNull(vertical) ? allVertical : vertical;
+            const titleBold = XEUtils.eqNull(item.titleBold) ? allTitleBold : item.titleBold;
+            const titleAlign = XEUtils.eqNull(item.titleAlign) ? allTitleAlign : item.titleAlign;
+            const titleWidth = itemVertical ? null : (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.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: $xeForm.xegrid };
+            if (visible === false) {
+                return renderEmptyElement($xeFormConfigItem);
+            }
+            let isRequired = false;
+            let isValid = false;
+            if (!readonly && rules) {
+                const itemRules = rules[field];
+                if (itemRules && itemRules.length) {
+                    isValid = true;
+                    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,
+                        props: {
+                            itemConfig: childItem
+                        }
+                    });
+                });
+                return childVNs.length
+                    ? h('div', {
+                        class: ['vxe-form--gather vxe-form--item-row', item.id, span ? `vxe-form--item-col_${span} is--span` : '', className ? (XEUtils.isFunction(className) ? className(params) : className) : '']
+                    }, childVNs)
+                    : renderEmptyElement($xeFormConfigItem);
+            }
+            let contentVNs = [];
+            const rftContent = compConf ? (compConf.renderFormItemContent || compConf.renderItemContent) : null;
+            if (defaultSlot) {
+                contentVNs = $xeForm.callSlot(defaultSlot, params);
+            }
+            else if (rftContent) {
+                contentVNs = getSlotVNs(rftContent(h, itemRender, params));
+            }
+            else if (field) {
+                contentVNs = [XEUtils.toValueString(XEUtils.get(data, field))];
+            }
+            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 ? getI18n('vxe.form.unfolding') : getI18n('vxe.form.folding')),
+                    h('i', {
+                        class: ['vxe-form--item-trigger-icon', collapseAll ? getIcon().FORM_FOLDING : getIcon().FORM_UNFOLDING]
+                    })
+                ]));
+            }
+            if (errRule && validOpts.showMessage) {
+                contentVNs.push(h('div', {
+                    class: 'vxe-form--item-valid',
+                    style: errRule.maxWidth
+                        ? {
+                            width: `${errRule.maxWidth}px`
+                        }
+                        : {}
+                }, errRule.content));
+            }
+            const ons = ovTooltip
+                ? {
+                    mouseenter(evnt) {
+                        $xeForm.triggerTitleTipEvent(evnt, params);
+                    },
+                    mouseleave: $xeForm.handleTitleTipLeaveEvent
+                }
+                : {};
+            return h('div', {
+                class: [
+                    'vxe-form--item',
+                    item.id,
+                    span ? `vxe-form--item-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--bold': titleBold,
+                        'is--padding': itemPadding,
+                        'is--vertical': itemVertical,
+                        'is--asterisk': titleAsterisk,
+                        'is--valid': isValid,
+                        'is--required': isRequired,
+                        'is--hidden': folding && collapseAll,
+                        'is--active': isActiveItem($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),
+                            attrs: {
+                                title: ovTitle ? getFuncText(title) : null
+                            },
+                            on: ons
+                        }, renderTitle(h, $xeFormConfigItem, $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)
+                ])
+            ]);
+        }
+    },
+    render(h) {
+        return this.renderVN(h);
+    }
+});
+export default VxeFormConfigItem;