vxe-pc-ui 3.0.1 → 3.0.2

package/es/drawer/src/drawer.js

@@ -128,6 +128,11 @@ export default defineVxeComponent({
             const $xeDrawer = this;
             $xeDrawer.$emit(type, createEvent(evnt, { $drawer: $xeDrawer }, params));
         },
+        emitModel(value) {
+            const $xeDrawer = this;
+            $xeDrawer.$emit('modelValue', value);
+            $xeDrawer.$emit('input', value);
+        },
         open() {
             const $xeDrawer = this;
             return $xeDrawer.openDrawer();
@@ -180,7 +185,7 @@ export default defineVxeComponent({
                         $xeDrawer.dispatchEvent('before-hide', params, null);
                         setTimeout(() => {
                             reactData.visible = false;
-                            $xeDrawer.$emit('input', false);
+                            $xeDrawer.emitModel(false);
                             $xeDrawer.dispatchEvent('hide', params, null);
                         }, 200);
                     }
@@ -234,7 +239,7 @@ export default defineVxeComponent({
                         }
                         const type = '';
                         const params = { type };
-                        $xeDrawer.$emit('input', true);
+                        $xeDrawer.emitModel(true);
                         $xeDrawer.dispatchEvent('show', params, null);
                     });
                 }, 10);
@@ -286,14 +291,14 @@ export default defineVxeComponent({
             return [
                 h('div', {
                     class: 'vxe-drawer--header-title'
-                }, titleSlot ? getSlotVNs(titleSlot({ $drawer: $xeDrawer })) : (title ? getFuncText(title) : getI18n('vxe.alert.title'))),
+                }, titleSlot ? getSlotVNs(titleSlot({ $drawer: $xeDrawer }, h)) : (title ? getFuncText(title) : getI18n('vxe.alert.title'))),
                 h('div', {
                     class: 'vxe-drawer--header-right'
                 }, [
                     cornerSlot
                         ? h('div', {
                             class: 'vxe-drawer--corner-wrapper'
-                        }, getSlotVNs(cornerSlot({ $drawer: $xeDrawer })))
+                        }, getSlotVNs(cornerSlot({ $drawer: $xeDrawer }, h)))
                         : renderEmptyElement($xeDrawer),
                     showClose
                         ? h('div', {
@@ -324,7 +329,7 @@ export default defineVxeComponent({
                     class: ['vxe-drawer--header', {
                             'is--ellipsis': showTitleOverflow
                         }]
-                }, headerSlot ? getSlotVNs(headerSlot({ $drawer: $xeDrawer })) : $xeDrawer.renderTitles(h));
+                }, headerSlot ? getSlotVNs(headerSlot({ $drawer: $xeDrawer }, h)) : $xeDrawer.renderTitles(h));
             }
             return renderEmptyElement($xeDrawer);
         },
@@ -342,19 +347,19 @@ export default defineVxeComponent({
                 leftSlot
                     ? h('div', {
                         class: 'vxe-drawer--body-left'
-                    }, getSlotVNs(leftSlot({ $drawer: $xeDrawer })))
+                    }, getSlotVNs(leftSlot({ $drawer: $xeDrawer }, h)))
                     : renderEmptyElement($xeDrawer),
                 h('div', {
                     class: 'vxe-drawer--body-default'
                 }, [
                     h('div', {
                         class: 'vxe-drawer--content'
-                    }, defaultSlot ? getSlotVNs(defaultSlot({ $drawer: $xeDrawer })) : getFuncText(content))
+                    }, defaultSlot ? getSlotVNs(defaultSlot({ $drawer: $xeDrawer }, h)) : getFuncText(content))
                 ]),
                 rightSlot
                     ? h('div', {
                         class: 'vxe-drawer--body-right'
-                    }, getSlotVNs(rightSlot({ $drawer: $xeDrawer })))
+                    }, getSlotVNs(rightSlot({ $drawer: $xeDrawer }, h)))
                     : renderEmptyElement($xeDrawer),
                 h(VxeLoadingComponent, {
                     class: 'vxe-drawer--loading',
@@ -402,10 +407,10 @@ export default defineVxeComponent({
             }, [
                 h('div', {
                     class: 'vxe-drawer--footer-left'
-                }, lfSlot ? getSlotVNs(lfSlot({ $drawer: $xeDrawer })) : []),
+                }, lfSlot ? getSlotVNs(lfSlot({ $drawer: $xeDrawer }, h)) : []),
                 h('div', {
                     class: 'vxe-drawer--footer-right'
-                }, rfSlot ? getSlotVNs(rfSlot({ $drawer: $xeDrawer })) : btnVNs)
+                }, rfSlot ? getSlotVNs(rfSlot({ $drawer: $xeDrawer }, h)) : btnVNs)
             ]);
         },
         renderFooter(h) {
@@ -417,7 +422,7 @@ export default defineVxeComponent({
             if (props.showFooter) {
                 return h('div', {
                     class: 'vxe-drawer--footer'
-                }, footerSlot ? getSlotVNs(footerSlot({ $drawer: $xeDrawer })) : [$xeDrawer.renderDefaultFooter(h)]);
+                }, footerSlot ? getSlotVNs(footerSlot({ $drawer: $xeDrawer }, h)) : [$xeDrawer.renderDefaultFooter(h)]);
             }
             return renderEmptyElement($xeDrawer);
         },
@@ -460,7 +465,7 @@ export default defineVxeComponent({
                         asideSlot
                             ? h('div', {
                                 class: 'vxe-drawer--aside'
-                            }, getSlotVNs(asideSlot({ $drawer: $xeDrawer })))
+                            }, getSlotVNs(asideSlot({ $drawer: $xeDrawer }, h)))
                             : renderEmptyElement($xeDrawer),
                         h('div', {
                             class: 'vxe-drawer--container'

package/es/form/index.js

@@ -0,0 +1,13 @@
+import { VxeUI } from '@vxe-ui/core';
+import VxeFormComponent from './src/form';
+import { dynamicApp } from '../dynamics';
+import './render';
+export const VxeForm = Object.assign(VxeFormComponent, {
+    install(app) {
+        app.component(VxeFormComponent.name, VxeFormComponent);
+    }
+});
+dynamicApp.use(VxeForm);
+VxeUI.component(VxeFormComponent);
+export const Form = VxeForm;
+export default VxeForm;

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
+    }
+    // 以上已废弃
+});