vxe-pc-ui 0.0.2 → 0.2.0

package/es/form/src/form.js

@@ -0,0 +1,665 @@
+import { defineComponent, h, ref, provide, computed, inject, reactive, watch, nextTick, onMounted } from 'vue';
+import XEUtils from 'xe-utils';
+import globalConfigStore from '../../ui/src/globalStore';
+import { renderer } from '../../ui/src/renderer';
+import { validators } from '../../ui/src/validators';
+import { getFuncText, isEnableConf, eqEmptyValue } from '../../ui/src/utils';
+import { errLog, warnLog } from '../../ui/src/log';
+import { scrollToView } from '../../ui/src/dom';
+import { createItem, handleFieldOrItem, isHiddenItem, isActivetem } from './util';
+import { useSize } from '../../hooks/size';
+import VxeTooltipComponent from '../../tooltip';
+import VxeFormConfigItem from './form-config-item';
+import VxeLoading from '../../loading/index';
+import { getSlotVNs } from '../../ui/src/vn';
+class Rule {
+    constructor(rule) {
+        Object.assign(this, {
+            $options: rule,
+            required: rule.required,
+            min: rule.min,
+            max: rule.min,
+            type: rule.type,
+            pattern: rule.pattern,
+            validator: rule.validator,
+            trigger: rule.trigger,
+            maxWidth: rule.maxWidth
+        });
+    }
+    get content() {
+        return getFuncText(this.$options.content || this.$options.message);
+    }
+    get message() {
+        return this.content;
+    }
+}
+const validErrorRuleValue = (rule, val) => {
+    const { type, min, max, pattern } = rule;
+    const isNumType = type === 'number';
+    const numVal = isNumType ? XEUtils.toNumber(val) : XEUtils.getSize(val);
+    // 判断数值
+    if (isNumType && isNaN(val)) {
+        return true;
+    }
+    // 如果存在 min，判断最小值
+    if (!XEUtils.eqNull(min) && numVal < XEUtils.toNumber(min)) {
+        return true;
+    }
+    // 如果存在 max，判断最大值
+    if (!XEUtils.eqNull(max) && numVal > XEUtils.toNumber(max)) {
+        return true;
+    }
+    // 如果存在 pattern，正则校验
+    if (pattern && !(XEUtils.isRegExp(pattern) ? pattern : new RegExp(pattern)).test(val)) {
+        return true;
+    }
+    return false;
+};
+function getResetValue(value, resetValue) {
+    if (XEUtils.isArray(value)) {
+        resetValue = [];
+    }
+    return resetValue;
+}
+export default defineComponent({
+    name: 'VxeForm',
+    props: {
+        collapseStatus: { type: Boolean, default: true },
+        loading: Boolean,
+        data: Object,
+        size: { type: String, default: () => globalConfigStore.form.size || globalConfigStore.size },
+        span: { type: [String, Number], default: () => globalConfigStore.form.span },
+        align: { type: String, default: () => globalConfigStore.form.align },
+        titleAlign: { type: String, default: () => globalConfigStore.form.titleAlign },
+        titleWidth: { type: [String, Number], default: () => globalConfigStore.form.titleWidth },
+        titleColon: { type: Boolean, default: () => globalConfigStore.form.titleColon },
+        titleAsterisk: { type: Boolean, default: () => globalConfigStore.form.titleAsterisk },
+        titleOverflow: { type: [Boolean, String], default: null },
+        vertical: {
+            type: Boolean,
+            default: null
+        },
+        className: [String, Function],
+        readonly: Boolean,
+        items: Array,
+        rules: Object,
+        preventSubmit: { type: Boolean, default: () => globalConfigStore.form.preventSubmit },
+        validConfig: Object,
+        tooltipConfig: Object,
+        customLayout: { type: Boolean, default: () => globalConfigStore.form.customLayout }
+    },
+    emits: [
+        'update:collapseStatus',
+        'collapse',
+        'toggle-collapse',
+        'submit',
+        'submit-invalid',
+        'reset'
+    ],
+    setup(props, context) {
+        const { slots, emit } = context;
+        const xID = XEUtils.uniqueId();
+        const computeSize = useSize(props);
+        const reactData = reactive({
+            collapseAll: props.collapseStatus,
+            staticItems: [],
+            formItems: []
+        });
+        const internalData = reactive({
+            tooltipTimeout: null,
+            tooltipStore: {
+                item: null,
+                visible: false
+            }
+        });
+        provide('xeFormItemInfo', null);
+        const $xegrid = inject('$xegrid', null);
+        const refElem = ref();
+        const refTooltip = ref();
+        let formMethods = {};
+        const computeValidOpts = computed(() => {
+            return Object.assign({}, globalConfigStore.form.validConfig, props.validConfig);
+        });
+        const computeTooltipOpts = computed(() => {
+            return Object.assign({}, globalConfigStore.tooltip, globalConfigStore.form.tooltipConfig, props.tooltipConfig);
+        });
+        const refMaps = {
+            refElem
+        };
+        const computeMaps = {
+            computeSize,
+            computeValidOpts,
+            computeTooltipOpts
+        };
+        const $xeform = {
+            xID,
+            props,
+            context,
+            reactData,
+            xegrid: $xegrid,
+            getRefMaps: () => refMaps,
+            getComputeMaps: () => computeMaps
+        };
+        const callSlot = (slotFunc, params) => {
+            if (slotFunc) {
+                if (XEUtils.isString(slotFunc)) {
+                    slotFunc = slots[slotFunc] || null;
+                }
+                if (XEUtils.isFunction(slotFunc)) {
+                    return getSlotVNs(slotFunc(params));
+                }
+            }
+            return [];
+        };
+        const loadItem = (list) => {
+            if (list.length) {
+                if (process.env.NODE_ENV === 'development') {
+                    list.forEach((item) => {
+                        if (item.slots) {
+                            XEUtils.each(item.slots, (func) => {
+                                if (!XEUtils.isFunction(func)) {
+                                    if (!slots[func]) {
+                                        errLog('vxe.error.notSlot', [func]);
+                                    }
+                                }
+                            });
+                        }
+                    });
+                }
+                reactData.staticItems = XEUtils.mapTree(list, item => createItem($xeform, item), { children: 'children' });
+            }
+            return nextTick();
+        };
+        const getItems = () => {
+            const itemList = [];
+            XEUtils.eachTree(reactData.formItems, item => {
+                itemList.push(item);
+            }, { children: 'children' });
+            return itemList;
+        };
+        const getItemByField = (field) => {
+            const rest = XEUtils.findTree(reactData.formItems, item => item.field === field, { children: 'children' });
+            return rest ? rest.item : null;
+        };
+        const getCollapseStatus = () => {
+            return reactData.collapseAll;
+        };
+        const toggleCollapse = () => {
+            const status = !getCollapseStatus();
+            reactData.collapseAll = status;
+            emit('update:collapseStatus', status);
+            return nextTick();
+        };
+        const toggleCollapseEvent = (evnt) => {
+            toggleCollapse();
+            const status = getCollapseStatus();
+            formMethods.dispatchEvent('toggle-collapse', { status, collapse: status, data: props.data }, evnt);
+            formMethods.dispatchEvent('collapse', { status, collapse: status, data: props.data }, evnt);
+        };
+        const clearValidate = (fieldOrItem) => {
+            if (fieldOrItem) {
+                let fields = fieldOrItem;
+                if (!XEUtils.isArray(fieldOrItem)) {
+                    fields = [fieldOrItem];
+                }
+                fields.forEach((field) => {
+                    if (field) {
+                        const item = handleFieldOrItem($xeform, field);
+                        if (item) {
+                            item.showError = false;
+                        }
+                    }
+                });
+            }
+            else {
+                getItems().forEach((item) => {
+                    item.showError = false;
+                });
+            }
+            return nextTick();
+        };
+        const reset = () => {
+            const { data } = props;
+            const itemList = getItems();
+            if (data) {
+                itemList.forEach((item) => {
+                    const { field, resetValue, itemRender } = item;
+                    if (isEnableConf(itemRender)) {
+                        const compConf = renderer.get(itemRender.name);
+                        if (compConf && compConf.itemResetMethod) {
+                            compConf.itemResetMethod({ data, field, property: field, item, $form: $xeform, $grid: $xeform.xegrid });
+                        }
+                        else if (field) {
+                            XEUtils.set(data, field, resetValue === null ? getResetValue(XEUtils.get(data, field), undefined) : XEUtils.clone(resetValue, true));
+                        }
+                    }
+                });
+            }
+            return clearValidate();
+        };
+        const resetEvent = (evnt) => {
+            evnt.preventDefault();
+            reset();
+            formMethods.dispatchEvent('reset', { data: props.data }, evnt);
+        };
+        const handleFocus = (fields) => {
+            const el = refElem.value;
+            if (el) {
+                for (let i = 0; i < fields.length; i++) {
+                    const property = fields[i];
+                    const item = getItemByField(property);
+                    if (item && isEnableConf(item.itemRender)) {
+                        const { itemRender } = item;
+                        const compConf = renderer.get(itemRender.name);
+                        let inputElem = null;
+                        // 定位到第一个
+                        if (!i) {
+                            scrollToView(el.querySelector(`.${item.id}`));
+                        }
+                        // 如果指定了聚焦 class
+                        if (itemRender.autofocus) {
+                            inputElem = el.querySelector(`.${item.id} ${itemRender.autofocus}`);
+                        }
+                        // 渲染器的聚焦处理
+                        if (!inputElem && compConf && compConf.autofocus) {
+                            inputElem = el.querySelector(`.${item.id} ${compConf.autofocus}`);
+                        }
+                        if (inputElem) {
+                            inputElem.focus();
+                            break;
+                        }
+                    }
+                }
+            }
+        };
+        /**
+         * 校验数据
+         * 按表格行、列顺序依次校验（同步或异步）
+         * 校验规则根据索引顺序依次校验，如果是异步则会等待校验完成才会继续校验下一列
+         * 如果校验失败则，触发回调或者 Promise<(ErrMap 校验不通过列的信息)>
+         * 如果是传回调方式这返回一个 (ErrMap 校验不通过列的信息)
+         *
+         * rule 配置：
+         *  required=Boolean 是否必填
+         *  min=Number 最小长度
+         *  max=Number 最大长度
+         *  validator=Function({ itemValue, rule, rules, data, property }) 自定义校验，接收一个 Promise
+         *  trigger=change 触发方式
+         */
+        const validItemRules = (validType, fields, val) => {
+            const { data, rules: formRules } = props;
+            const errorMaps = {};
+            if (!XEUtils.isArray(fields)) {
+                fields = [fields];
+            }
+            return Promise.all(fields.map((property) => {
+                const errorRules = [];
+                const syncVailds = [];
+                if (property && formRules) {
+                    const rules = XEUtils.get(formRules, property);
+                    if (rules) {
+                        const itemValue = XEUtils.isUndefined(val) ? XEUtils.get(data, property) : val;
+                        rules.forEach((rule) => {
+                            const { type, trigger, required, validator } = rule;
+                            if (validType === 'all' || !trigger || validType === trigger) {
+                                if (validator) {
+                                    const validParams = {
+                                        itemValue,
+                                        rule,
+                                        rules,
+                                        data,
+                                        field: property,
+                                        property,
+                                        $form: $xeform
+                                    };
+                                    let customValid;
+                                    if (XEUtils.isString(validator)) {
+                                        const gvItem = validators.get(validator);
+                                        if (gvItem) {
+                                            if (gvItem.itemValidatorMethod) {
+                                                customValid = gvItem.itemValidatorMethod(validParams);
+                                            }
+                                            else {
+                                                if (process.env.NODE_ENV === 'development') {
+                                                    warnLog('vxe.error.notValidators', [validator]);
+                                                }
+                                            }
+                                        }
+                                        else {
+                                            if (process.env.NODE_ENV === 'development') {
+                                                errLog('vxe.error.notValidators', [validator]);
+                                            }
+                                        }
+                                    }
+                                    else {
+                                        customValid = validator(validParams);
+                                    }
+                                    if (customValid) {
+                                        if (XEUtils.isError(customValid)) {
+                                            errorRules.push(new Rule({ type: 'custom', trigger, content: customValid.message, rule: new Rule(rule) }));
+                                        }
+                                        else if (customValid.catch) {
+                                            // 如果为异步校验（注：异步校验是并发无序的）
+                                            syncVailds.push(customValid.catch((e) => {
+                                                errorRules.push(new Rule({ type: 'custom', trigger, content: e ? e.message : (rule.content || rule.message), rule: new Rule(rule) }));
+                                            }));
+                                        }
+                                    }
+                                }
+                                else {
+                                    const isArrType = type === 'array';
+                                    const isArrVal = XEUtils.isArray(itemValue);
+                                    let hasEmpty = true;
+                                    if (isArrType || isArrVal) {
+                                        hasEmpty = !isArrVal || !itemValue.length;
+                                    }
+                                    else if (XEUtils.isString(itemValue)) {
+                                        hasEmpty = eqEmptyValue(itemValue.trim());
+                                    }
+                                    else {
+                                        hasEmpty = eqEmptyValue(itemValue);
+                                    }
+                                    if (required ? (hasEmpty || validErrorRuleValue(rule, itemValue)) : (!hasEmpty && validErrorRuleValue(rule, itemValue))) {
+                                        errorRules.push(new Rule(rule));
+                                    }
+                                }
+                            }
+                        });
+                    }
+                }
+                return Promise.all(syncVailds).then(() => {
+                    if (errorRules.length) {
+                        errorMaps[property] = errorRules.map(rule => {
+                            return {
+                                $form: $xeform,
+                                rule,
+                                data,
+                                field: property,
+                                property
+                            };
+                        });
+                    }
+                });
+            })).then(() => {
+                if (!XEUtils.isEmpty(errorMaps)) {
+                    return Promise.reject(errorMaps);
+                }
+            });
+        };
+        let showErrTime;
+        const beginValidate = (itemList, type, callback) => {
+            const { data, rules: formRules } = props;
+            const validOpts = computeValidOpts.value;
+            const validRest = {};
+            const validFields = [];
+            const itemValids = [];
+            clearTimeout(showErrTime);
+            if (data && formRules) {
+                itemList.forEach((item) => {
+                    const { field } = item;
+                    if (field && !isHiddenItem($xeform, item) && isActivetem($xeform, item)) {
+                        itemValids.push(validItemRules(type || 'all', field).then(() => {
+                            item.errRule = null;
+                        }).catch((errorMaps) => {
+                            const rest = errorMaps[field];
+                            if (!validRest[field]) {
+                                validRest[field] = [];
+                            }
+                            validRest[field].push(rest);
+                            validFields.push(field);
+                            item.errRule = rest[0].rule;
+                            return Promise.reject(rest);
+                        }));
+                    }
+                });
+                return Promise.all(itemValids).then(() => {
+                    if (callback) {
+                        callback();
+                    }
+                }).catch(() => {
+                    return new Promise((resolve) => {
+                        showErrTime = window.setTimeout(() => {
+                            itemList.forEach((item) => {
+                                if (item.errRule) {
+                                    item.showError = true;
+                                }
+                            });
+                        }, 20);
+                        if (validOpts.autoPos !== false) {
+                            nextTick(() => {
+                                handleFocus(validFields);
+                            });
+                        }
+                        if (callback) {
+                            callback(validRest);
+                            resolve();
+                        }
+                        else {
+                            resolve(validRest);
+                        }
+                    });
+                });
+            }
+            if (callback) {
+                callback();
+            }
+            return Promise.resolve();
+        };
+        const validate = (callback) => {
+            clearValidate();
+            return beginValidate(getItems(), '', callback);
+        };
+        const validateField = (fieldOrItem, callback) => {
+            let fields = [];
+            if (XEUtils.isArray(fieldOrItem)) {
+                fields = fieldOrItem;
+            }
+            else {
+                fields = [fieldOrItem];
+            }
+            return beginValidate(fields.map(field => handleFieldOrItem($xeform, field)), '', callback);
+        };
+        const submitEvent = (evnt) => {
+            evnt.preventDefault();
+            if (!props.preventSubmit) {
+                clearValidate();
+                beginValidate(getItems()).then((errMap) => {
+                    if (errMap) {
+                        formMethods.dispatchEvent('submit-invalid', { data: props.data, errMap }, evnt);
+                    }
+                    else {
+                        formMethods.dispatchEvent('submit', { data: props.data }, evnt);
+                    }
+                });
+            }
+        };
+        const closeTooltip = () => {
+            const { tooltipStore } = internalData;
+            const $tooltip = refTooltip.value;
+            if (tooltipStore.visible) {
+                Object.assign(tooltipStore, {
+                    item: null,
+                    visible: false
+                });
+                if ($tooltip) {
+                    $tooltip.close();
+                }
+            }
+            return nextTick();
+        };
+        const triggerTitleTipEvent = (evnt, params) => {
+            const { item } = params;
+            const { tooltipStore } = internalData;
+            const $tooltip = refTooltip.value;
+            const overflowElem = evnt.currentTarget.children[0];
+            const content = (overflowElem.textContent || '').trim();
+            const isCellOverflow = overflowElem.scrollWidth > overflowElem.clientWidth;
+            clearTimeout(internalData.tooltipTimeout);
+            if (tooltipStore.item !== item) {
+                closeTooltip();
+            }
+            if (content && isCellOverflow) {
+                Object.assign(tooltipStore, {
+                    item,
+                    visible: true
+                });
+                if ($tooltip) {
+                    $tooltip.open(overflowElem, content);
+                }
+            }
+        };
+        const handleTitleTipLeaveEvent = () => {
+            const tooltipOpts = computeTooltipOpts.value;
+            let $tooltip = refTooltip.value;
+            if ($tooltip) {
+                $tooltip.setActived(false);
+            }
+            if (tooltipOpts.enterable) {
+                internalData.tooltipTimeout = setTimeout(() => {
+                    $tooltip = refTooltip.value;
+                    if ($tooltip && !$tooltip.isActived()) {
+                        closeTooltip();
+                    }
+                }, tooltipOpts.leaveDelay);
+            }
+            else {
+                closeTooltip();
+            }
+        };
+        const triggerItemEvent = (evnt, field, itemValue) => {
+            if (field) {
+                return validItemRules(evnt ? (['blur'].includes(evnt.type) ? 'blur' : 'change') : 'all', field, itemValue)
+                    .then(() => {
+                    clearValidate(field);
+                })
+                    .catch((errorMaps) => {
+                    const rest = errorMaps[field];
+                    const item = getItemByField(field);
+                    if (rest && item) {
+                        item.showError = true;
+                        item.errRule = rest[0].rule;
+                    }
+                });
+            }
+            return nextTick();
+        };
+        /**
+         * 更新项状态
+         * 如果组件值 v-model 发生 change 时，调用改函数用于更新某一项编辑状态
+         * 如果单元格配置了校验规则，则会进行校验
+         */
+        const updateStatus = (scope, itemValue) => {
+            const { field } = scope;
+            return triggerItemEvent(new Event('change'), field, itemValue);
+        };
+        formMethods = {
+            dispatchEvent(type, params, evnt) {
+                emit(type, Object.assign({ $form: $xeform, $grid: $xegrid, $event: evnt }, params));
+            },
+            reset,
+            validate,
+            validateField,
+            clearValidate,
+            updateStatus,
+            toggleCollapse,
+            getItems,
+            getItemByField,
+            closeTooltip
+        };
+        const formPrivateMethods = {
+            callSlot,
+            triggerItemEvent,
+            toggleCollapseEvent,
+            triggerTitleTipEvent,
+            handleTitleTipLeaveEvent
+        };
+        Object.assign($xeform, formMethods, formPrivateMethods);
+        const staticItemFlag = ref(0);
+        watch(() => reactData.staticItems.length, () => {
+            staticItemFlag.value++;
+        });
+        watch(() => reactData.staticItems, () => {
+            staticItemFlag.value++;
+        });
+        watch(staticItemFlag, () => {
+            reactData.formItems = reactData.staticItems;
+        });
+        const itemFlag = ref(0);
+        watch(() => props.items ? props.items.length : -1, () => {
+            itemFlag.value++;
+        });
+        watch(() => props.items, () => {
+            itemFlag.value++;
+        });
+        watch(itemFlag, () => {
+            loadItem(props.items || []);
+        });
+        watch(() => props.collapseStatus, (value) => {
+            reactData.collapseAll = !!value;
+        });
+        onMounted(() => {
+            nextTick(() => {
+                if (process.env.NODE_ENV === 'development') {
+                    if (props.customLayout && props.items) {
+                        errLog('vxe.error.errConflicts', ['custom-layout', 'items']);
+                    }
+                }
+                loadItem(props.items || []);
+            });
+        });
+        const renderVN = () => {
+            const { loading, className, data, customLayout } = props;
+            const { formItems } = reactData;
+            // const formItems: any[] = []
+            const vSize = computeSize.value;
+            const tooltipOpts = computeTooltipOpts.value;
+            const defaultSlot = slots.default;
+            return h('form', {
+                ref: refElem,
+                class: ['vxe-form', className ? (XEUtils.isFunction(className) ? className({ items: formItems, data, $form: $xeform }) : className) : '', {
+                        [`size--${vSize}`]: vSize,
+                        'is--loading': loading
+                    }],
+                onSubmit: submitEvent,
+                onReset: resetEvent
+            }, [
+                h('div', {
+                    class: 'vxe-form--wrapper vxe-row'
+                }, customLayout
+                    ? (defaultSlot ? defaultSlot({}) : [])
+                    : formItems.map((item, index) => {
+                        return h(VxeFormConfigItem, {
+                            key: index,
+                            itemConfig: item
+                        });
+                    })),
+                h('div', {
+                    class: 'vxe-form-slots',
+                    ref: 'hideItem'
+                }, customLayout ? [] : (defaultSlot ? defaultSlot({}) : [])),
+                /**
+                 * 加载中
+                 */
+                h(VxeLoading, {
+                    class: 'vxe-form--loading',
+                    modelValue: loading
+                }),
+                /**
+                 * 工具提示
+                 */
+                h(VxeTooltipComponent, {
+                    ref: refTooltip,
+                    ...tooltipOpts
+                })
+            ]);
+        };
+        $xeform.renderVN = renderVN;
+        provide('$xeForm', $xeform);
+        provide('$xeFormGather', null);
+        provide('$xeFormItem', null);
+        return $xeform;
+    },
+    render() {
+        return this.renderVN();
+    }
+});