vxe-pc-ui 3.0.1 → 3.0.2

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;

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

@@ -0,0 +1,87 @@
+import { defineVxeComponent } from '../../ui/src/comp';
+import XEUtils from 'xe-utils';
+import { globalMixins } from '../../ui';
+import { createItem, watchItem, destroyItem, assembleItem } from './util';
+import { formItemProps } from './form-item';
+const formItemPropKeys = Object.keys(formItemProps);
+export default defineVxeComponent({
+    name: 'VxeFormGather',
+    mixins: [
+        globalMixins.sizeMixin
+    ],
+    props: formItemProps,
+    inject: {
+        $xeForm: {
+            default: null
+        },
+        $xeParentFormGather: {
+            from: '$xeFormGather',
+            default: null
+        }
+    },
+    data() {
+        const xID = XEUtils.uniqueId();
+        const formItem = {};
+        const reactData = {};
+        return {
+            xID,
+            formItem,
+            reactData
+        };
+    },
+    computed: Object.assign({}, {}),
+    methods: {
+        renderVN(h) {
+            const $xeFormGather = this;
+            const props = $xeFormGather;
+            const slots = $xeFormGather.$scopedSlots;
+            const formItem = $xeFormGather.formItem;
+            const $xeForm = $xeFormGather.$xeForm;
+            const { className, field } = props;
+            const span = props.span || ($xeForm ? $xeForm.span : null);
+            const defaultSlot = slots.default;
+            const params = { $form: $xeForm, data: $xeForm ? $xeForm.data : {}, item: formItem, field: field, property: field };
+            return h('div', {
+                ref: 'refElem',
+                class: ['vxe-form--gather vxe-form--item-row', formItem.id, span ? `vxe-form--item-col_${span} is--span` : '', className ? (XEUtils.isFunction(className) ? className(params) : className) : '']
+            }, defaultSlot ? defaultSlot({}) : []);
+        }
+    },
+    provide() {
+        const $xeFormGather = this;
+        const formItem = $xeFormGather.formItem;
+        return {
+            $xeFormGather,
+            $xeFormItem: null,
+            xeFormItemInfo: {
+                itemConfig: formItem
+            }
+        };
+    },
+    created() {
+        const $xeFormGather = this;
+        const props = $xeFormGather;
+        const $xeForm = $xeFormGather.$xeForm;
+        const formItem = createItem($xeForm, props);
+        formItem.children = [];
+        $xeFormGather.formItem = formItem;
+        watchItem($xeFormGather, formItemPropKeys, formItem);
+    },
+    mounted() {
+        const $xeFormGather = this;
+        const formItem = $xeFormGather.formItem;
+        const $xeForm = $xeFormGather.$xeForm;
+        const $xeParentFormGather = $xeFormGather.$xeParentFormGather;
+        const elem = $xeFormGather.$refs.refElem;
+        assembleItem($xeForm, elem, formItem, $xeParentFormGather);
+    },
+    beforeDestroy() {
+        const $xeFormGather = this;
+        const formItem = $xeFormGather.formItem;
+        const $xeForm = $xeFormGather.$xeForm;
+        destroyItem($xeForm, formItem);
+    },
+    render(h) {
+        return this.renderVN(h);
+    }
+});

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

@@ -0,0 +1,291 @@
+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 { createItem, watchItem, destroyItem, assembleItem, isActiveItem } from './util';
+import { renderTitle } from './render';
+export const formItemProps = {
+    title: String,
+    field: String,
+    span: [String, Number],
+    align: String,
+    titleBold: {
+        type: Boolean,
+        default: null
+    },
+    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
+    },
+    padding: {
+        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,
+    rules: Array
+};
+const formItemPropKeys = Object.keys(formItemProps);
+export default defineVxeComponent({
+    name: 'VxeFormItem',
+    mixins: [
+        globalMixins.sizeMixin
+    ],
+    props: formItemProps,
+    inject: {
+        $xeForm: {
+            default: null
+        },
+        $xeFormGather: {
+            default: null
+        }
+    },
+    data() {
+        const xID = XEUtils.uniqueId();
+        const formItem = {};
+        const reactData = {};
+        return {
+            xID,
+            formItem,
+            reactData
+        };
+    },
+    computed: Object.assign({}, {}),
+    methods: {
+        renderItem(h, $xeForm, item) {
+            const $xeFormItem = this;
+            const formProps = $xeForm;
+            const formReactData = $xeForm.reactData;
+            const { data, rules, readonly, disabled, titleBold: allTitleBold, titleAlign: allTitleAlign, titleWidth: allTitleWidth, titleColon: allTitleColon, titleAsterisk: allTitleAsterisk, titleOverflow: allTitleOverflow, vertical: allVertical, padding: allPadding } = formProps;
+            const { collapseAll } = formReactData;
+            const validOpts = $xeForm.computeValidOpts;
+            const { slots, title, visible, folding, field, collapseNode, itemRender, showError, errRule, className, titleOverflow, vertical, padding, 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 || formProps.span;
+            const align = item.align || formProps.align;
+            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 };
+            let isRequired = false;
+            let isValid = false;
+            if (visible === false) {
+                return renderEmptyElement($xeFormItem);
+            }
+            if (!readonly && rules) {
+                const itemRules = rules[field];
+                if (itemRules && itemRules.length) {
+                    isValid = true;
+                    isRequired = itemRules.some((rule) => rule.required);
+                }
+            }
+            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.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.message));
+            }
+            const ons = ovTooltip
+                ? {
+                    mouseenter(evnt) {
+                        $xeForm.triggerTitleTipEvent(evnt, params);
+                    },
+                    mouseleave: $xeForm.handleTitleTipLeaveEvent
+                }
+                : {};
+            return h('div', {
+                ref: 'refElem',
+                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, $xeFormItem, $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)
+                ])
+            ]);
+        },
+        renderVN(h) {
+            const $xeFormItem = this;
+            const formItem = $xeFormItem.formItem;
+            const $xeForm = $xeFormItem.$xeForm;
+            const customLayout = $xeForm ? $xeForm.customLayout : false;
+            return customLayout
+                ? $xeFormItem.renderItem(h, $xeForm, formItem)
+                : h('div', {
+                    ref: 'refElem'
+                });
+        }
+    },
+    provide() {
+        const $xeFormItem = this;
+        const formItem = $xeFormItem.formItem;
+        return {
+            $xeFormGather: null,
+            $xeFormItem,
+            xeFormItemInfo: {
+                itemConfig: formItem
+            }
+        };
+    },
+    created() {
+        const $xeFormItem = this;
+        const props = $xeFormItem;
+        const $xeForm = $xeFormItem.$xeForm;
+        const formItem = createItem($xeForm, props);
+        $xeFormItem.formItem = formItem;
+        watchItem($xeFormItem, formItemPropKeys, formItem);
+    },
+    mounted() {
+        const $xeFormItem = this;
+        const slots = $xeFormItem.$scopedSlots;
+        const formItem = $xeFormItem.formItem;
+        const $xeForm = $xeFormItem.$xeForm;
+        const $xeFormGather = $xeFormItem.$xeFormGather;
+        formItem.slots = slots;
+        const elem = $xeFormItem.$refs.refElem;
+        assembleItem($xeForm, elem, formItem, $xeFormGather);
+    },
+    beforeDestroy() {
+        const $xeFormItem = this;
+        const formItem = $xeFormItem.formItem;
+        const $xeForm = $xeFormItem.$xeForm;
+        destroyItem($xeForm, formItem);
+    },
+    render(h) {
+        return this.renderVN(h);
+    }
+});