vxe-pc-ui 3.16.0 → 3.16.1

package/es/rate/src/rate.js

@@ -0,0 +1,178 @@
+import { defineVxeComponent } from '../../ui/src/comp';
+import XEUtils from 'xe-utils';
+import { getConfig, getIcon, createEvent, globalMixins } from '../../ui';
+export default {
+    name: 'VxeRate',
+    mixins: [
+        globalMixins.sizeMixin,
+        globalMixins.permissionMixin
+    ],
+    props: {
+        value: [Number, String],
+        disabled: {
+            type: Boolean,
+            default: null
+        },
+        readonly: {
+            type: Boolean,
+            default: null
+        },
+        size: {
+            type: String,
+            default: () => getConfig().rate.size || getConfig().size
+        },
+        status: String
+    },
+    data() {
+        const xID = XEUtils.uniqueId();
+        const reactData = {
+            activeValue: null
+        };
+        return {
+            xID,
+            reactData
+        };
+    },
+    computed: Object.assign(Object.assign({}, {}), { computeIsDisabled() {
+            const $xeRate = this;
+            const props = $xeRate;
+            const $xeForm = $xeRate.$xeForm;
+            const { disabled } = props;
+            if (disabled === null) {
+                if ($xeForm) {
+                    return $xeForm.readonly || $xeForm.disabled;
+                }
+                return false;
+            }
+            return disabled;
+        },
+        computeIsReadonly() {
+            const $xeRate = this;
+            const props = $xeRate;
+            const $xeForm = $xeRate.$xeForm;
+            const { readonly } = props;
+            if (readonly === null) {
+                if ($xeForm) {
+                    return $xeForm.readonly || $xeForm.disabled;
+                }
+                return false;
+            }
+            return readonly;
+        },
+        computeNumVal() {
+            const $xeRate = this;
+            const props = $xeRate;
+            const reactData = $xeRate.reactData;
+            const { value } = props;
+            const { activeValue } = reactData;
+            return XEUtils.toNumber(activeValue === null ? value : activeValue);
+        },
+        computeItemList() {
+            return [1, 2, 3, 4, 5].map(num => {
+                return {
+                    value: num,
+                    label: num
+                };
+            });
+        } }),
+    methods: {
+        //
+        // Method
+        //
+        dispatchEvent(type, params, evnt) {
+            const $xeRate = this;
+            $xeRate.$emit(type, createEvent(evnt, { $rate: $xeRate }, params));
+        },
+        emitModel(value) {
+            const $xeRate = this;
+            const { _events } = $xeRate;
+            $xeRate.$emit('input', value);
+            if (_events && _events.modelValue) {
+                $xeRate.$emit('modelValue', value);
+            }
+            else {
+                $xeRate.$emit('model-value', value);
+            }
+        },
+        mouseenterEvent(evnt, item) {
+            const $xeRate = this;
+            const reactData = $xeRate.reactData;
+            const isDisabled = $xeRate.computeIsDisabled;
+            const isReadonly = $xeRate.computeIsReadonly;
+            if (!(isDisabled || isReadonly)) {
+                const value = item.value;
+                reactData.activeValue = value;
+            }
+        },
+        mouseleaveEvent() {
+            const $xeRate = this;
+            const reactData = $xeRate.reactData;
+            reactData.activeValue = null;
+        },
+        clickEvent(evnt, item) {
+            const $xeRate = this;
+            const $xeForm = $xeRate.$xeForm;
+            const formItemInfo = $xeRate.formItemInfo;
+            const isDisabled = $xeRate.computeIsDisabled;
+            const isReadonly = $xeRate.computeIsReadonly;
+            if (!(isDisabled || isReadonly)) {
+                const value = item.value;
+                $xeRate.emitModel(value);
+                $xeRate.dispatchEvent('change', { value }, evnt);
+                // 自动更新校验状态
+                if ($xeForm && formItemInfo) {
+                    $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, value);
+                }
+            }
+        },
+        //
+        // Render
+        //
+        renderVN(h) {
+            const $xeRate = this;
+            const props = $xeRate;
+            const { status } = props;
+            const isDisabled = $xeRate.computeIsDisabled;
+            const isReadonly = $xeRate.computeIsReadonly;
+            const itemList = $xeRate.computeItemList;
+            const vSize = $xeRate.computeSize;
+            const numVal = $xeRate.computeNumVal;
+            return h('div', {
+                ref: 'refElem',
+                class: ['vxe-rate', {
+                        [`size--${vSize}`]: vSize,
+                        [`theme--${status}`]: status,
+                        'is--disabled': isDisabled,
+                        'is--readonly': isReadonly
+                    }]
+            }, itemList.map(item => {
+                const isChecked = numVal >= item.value;
+                return h('div', {
+                    class: ['vxe-rte--item', {
+                            'is--checked': isChecked
+                        }],
+                    on: {
+                        mouseenter(evnt) {
+                            if (!(isDisabled || isReadonly)) {
+                                $xeRate.mouseenterEvent(evnt, item);
+                            }
+                        },
+                        mouseleave: $xeRate.mouseleaveEvent,
+                        click(evnt) {
+                            if (!(isDisabled || isReadonly)) {
+                                $xeRate.clickEvent(evnt, item);
+                            }
+                        }
+                    }
+                }, [
+                    h('i', {
+                        class: isChecked ? getIcon().RATE_CHECKED : getIcon().RATE_UNCHECKED
+                    })
+                ]);
+            }));
+        }
+    },
+    render(h) {
+        return this.renderVN(h);
+    }
+};

package/es/rate/style.css

@@ -0,0 +1,54 @@
+.vxe-rate {
+  display: inline-flex;
+  flex-direction: row;
+  color: var(--vxe-ui-font-color);
+}
+.vxe-rate.theme--primary .vxe-rte--item {
+  color: var(--vxe-ui-font-primary-color);
+}
+.vxe-rate.theme--success .vxe-rte--item {
+  color: var(--vxe-ui-status-success-color);
+}
+.vxe-rate.theme--info .vxe-rte--item {
+  color: var(--vxe-ui-status-info-color);
+}
+.vxe-rate.theme--warning .vxe-rte--item {
+  color: var(--vxe-ui-status-warning-color);
+}
+.vxe-rate.theme--danger .vxe-rte--item {
+  color: var(--vxe-ui-status-danger-color);
+}
+.vxe-rate.theme--error .vxe-rte--item {
+  color: var(--vxe-ui-status-error-color);
+}
+.vxe-rate.is--disabled .vxe-rte--item {
+  cursor: no-drop;
+}
+.vxe-rate.is--readonly .vxe-rte--item {
+  cursor: default;
+}
+
+.vxe-rte--item {
+  margin-right: 0.25em;
+  font-size: 1.2em;
+  cursor: pointer;
+}
+.vxe-rte--item:last-child {
+  margin: 0;
+}
+.vxe-rte--item.is--checked {
+  color: var(--vxe-ui-rate-item-color);
+}
+
+.vxe-rate {
+  font-size: var(--vxe-ui-font-size-default);
+}
+.vxe-rate.size--medium {
+  font-size: var(--vxe-ui-font-size-medium);
+}
+.vxe-rate.size--small {
+  font-size: var(--vxe-ui-font-size-small);
+}
+.vxe-rate.size--mini {
+  font-size: var(--vxe-ui-font-size-mini);
+}

package/es/rate/style.min.css

@@ -0,0 +1 @@
+.vxe-rate{display:inline-flex;flex-direction:row;color:var(--vxe-ui-font-color)}.vxe-rate.theme--primary .vxe-rte--item{color:var(--vxe-ui-font-primary-color)}.vxe-rate.theme--success .vxe-rte--item{color:var(--vxe-ui-status-success-color)}.vxe-rate.theme--info .vxe-rte--item{color:var(--vxe-ui-status-info-color)}.vxe-rate.theme--warning .vxe-rte--item{color:var(--vxe-ui-status-warning-color)}.vxe-rate.theme--danger .vxe-rte--item{color:var(--vxe-ui-status-danger-color)}.vxe-rate.theme--error .vxe-rte--item{color:var(--vxe-ui-status-error-color)}.vxe-rate.is--disabled .vxe-rte--item{cursor:no-drop}.vxe-rate.is--readonly .vxe-rte--item{cursor:default}.vxe-rte--item{margin-right:.25em;font-size:1.2em;cursor:pointer}.vxe-rte--item:last-child{margin:0}.vxe-rte--item.is--checked{color:var(--vxe-ui-rate-item-color)}.vxe-rate{font-size:var(--vxe-ui-font-size-default)}.vxe-rate.size--medium{font-size:var(--vxe-ui-font-size-medium)}.vxe-rate.size--small{font-size:var(--vxe-ui-font-size-small)}.vxe-rate.size--mini{font-size:var(--vxe-ui-font-size-mini)}

package/es/result/index.js

@@ -0,0 +1,12 @@
+import { VxeUI } from '@vxe-ui/core';
+import VxeResultComponent from './src/result';
+import { dynamicApp } from '../dynamics';
+export const VxeResult = Object.assign({}, VxeResultComponent, {
+    install(app) {
+        app.component(VxeResultComponent.name, VxeResultComponent);
+    }
+});
+dynamicApp.use(VxeResult);
+VxeUI.component(VxeResultComponent);
+export const Result = VxeResult;
+export default VxeResult;

package/es/result/src/result.js

@@ -0,0 +1,86 @@
+import { defineVxeComponent } from '../../ui/src/comp';
+import XEUtils from 'xe-utils';
+import { getIcon, createEvent, renderEmptyElement } from '../../ui';
+export default {
+    name: 'VxeResult',
+    props: {
+        imageUrl: String,
+        imageStyle: Object,
+        icon: String,
+        type: [String, Number],
+        status: [String, Number],
+        title: [String, Number],
+        content: [String, Number]
+    },
+    data() {
+        const xID = XEUtils.uniqueId();
+        const reactData = {};
+        return {
+            xID,
+            reactData
+        };
+    },
+    methods: {
+        //
+        // Method
+        //
+        dispatchEvent(type, params, evnt) {
+            const $xeResult = this;
+            $xeResult.$emit(type, createEvent(evnt, { $result: $xeResult }, params));
+        },
+        //
+        // Render
+        //
+        renderVN(h) {
+            const $xeResult = this;
+            const props = $xeResult;
+            const slots = $xeResult.$scopedSlots;
+            const { imageUrl, imageStyle, icon, title, type, content } = props;
+            const status = props.status || type;
+            const slotExtra = slots.extra;
+            return h('div', {
+                ref: 'refElem',
+                class: ['vxe-result', {
+                        [`theme--${status}`]: status
+                    }]
+            }, [
+                h('div', {
+                    class: 'vxe-result--inner'
+                }, [
+                    imageUrl
+                        ? h('div', {
+                            class: 'vxe-result--img-wrapper'
+                        }, [
+                            h('img', {
+                                attrs: {
+                                    src: imageUrl
+                                },
+                                style: imageStyle
+                            })
+                        ])
+                        : h('div', {
+                            class: 'vxe-result--icon-wrapper'
+                        }, [
+                            h('i', {
+                                class: [icon, type ? getIcon()[`RESULT_${type}`.toLocaleUpperCase()] : '']
+                            })
+                        ]),
+                    h('div', {
+                        class: 'vxe-result--title-wrapper'
+                    }, `${title || ''}`),
+                    h('div', {
+                        class: 'vxe-result--content-wrapper'
+                    }, `${content || ''}`),
+                    slotExtra
+                        ? h('div', {
+                            class: 'vxe-result--extra-wrapper'
+                        }, slotExtra({}))
+                        : renderEmptyElement($xeResult)
+                ])
+            ]);
+        }
+    },
+    render(h) {
+        return this.renderVN(h);
+    }
+};

package/es/result/style.css

@@ -0,0 +1,68 @@
+.vxe-result {
+  position: relative;
+  color: var(--vxe-ui-font-color);
+  font-family: var(--vxe-ui-font-family);
+  text-align: center;
+  font-size: var(--vxe-ui-font-size-default);
+  padding: 3em 2em;
+}
+.vxe-result.theme--primary .vxe-result--icon-wrapper {
+  color: var(--vxe-ui-font-primary-color);
+}
+.vxe-result.theme--success .vxe-result--icon-wrapper {
+  color: var(--vxe-ui-status-success-color);
+}
+.vxe-result.theme--info .vxe-result--icon-wrapper {
+  color: var(--vxe-ui-status-info-color);
+}
+.vxe-result.theme--warning .vxe-result--icon-wrapper {
+  color: var(--vxe-ui-status-warning-color);
+}
+.vxe-result.theme--danger .vxe-result--icon-wrapper {
+  color: var(--vxe-ui-status-danger-color);
+}
+.vxe-result.theme--error .vxe-result--icon-wrapper {
+  color: var(--vxe-ui-status-error-color);
+}
+
+.vxe-result--inner {
+  display: inline-block;
+}
+
+.vxe-result--icon-wrapper {
+  font-size: 4.8em;
+}
+.vxe-result--icon-wrapper > i {
+  display: block;
+}
+
+.vxe-result--img-wrapper > img {
+  height: 5.2em;
+}
+
+.vxe-result--title-wrapper {
+  font-weight: 700;
+  font-size: 1.74em;
+  padding: 0.25em 0;
+  margin-top: 0.6em;
+}
+
+.vxe-result--content-wrapper {
+  padding: 0.25em 0;
+  color: var(--vxe-ui-font-lighten-color);
+}
+
+.vxe-result--extra-wrapper {
+  padding: 0.25em 0;
+  margin-top: 1em;
+}
+
+.vxe-result.size--medium {
+  font-size: var(--vxe-ui-font-size-medium);
+}
+.vxe-result.size--small {
+  font-size: var(--vxe-ui-font-size-small);
+}
+.vxe-result.size--mini {
+  font-size: var(--vxe-ui-font-size-mini);
+}

package/es/result/style.min.css

@@ -0,0 +1 @@
+.vxe-result{position:relative;color:var(--vxe-ui-font-color);font-family:var(--vxe-ui-font-family);text-align:center;font-size:var(--vxe-ui-font-size-default);padding:3em 2em}.vxe-result.theme--primary .vxe-result--icon-wrapper{color:var(--vxe-ui-font-primary-color)}.vxe-result.theme--success .vxe-result--icon-wrapper{color:var(--vxe-ui-status-success-color)}.vxe-result.theme--info .vxe-result--icon-wrapper{color:var(--vxe-ui-status-info-color)}.vxe-result.theme--warning .vxe-result--icon-wrapper{color:var(--vxe-ui-status-warning-color)}.vxe-result.theme--danger .vxe-result--icon-wrapper{color:var(--vxe-ui-status-danger-color)}.vxe-result.theme--error .vxe-result--icon-wrapper{color:var(--vxe-ui-status-error-color)}.vxe-result--inner{display:inline-block}.vxe-result--icon-wrapper{font-size:4.8em}.vxe-result--icon-wrapper>i{display:block}.vxe-result--img-wrapper>img{height:5.2em}.vxe-result--title-wrapper{font-weight:700;font-size:1.74em;padding:.25em 0;margin-top:.6em}.vxe-result--content-wrapper{padding:.25em 0;color:var(--vxe-ui-font-lighten-color)}.vxe-result--extra-wrapper{padding:.25em 0;margin-top:1em}.vxe-result.size--medium{font-size:var(--vxe-ui-font-size-medium)}.vxe-result.size--small{font-size:var(--vxe-ui-font-size-small)}.vxe-result.size--mini{font-size:var(--vxe-ui-font-size-mini)}

package/es/row/index.js

@@ -0,0 +1,12 @@
+import { VxeUI } from '@vxe-ui/core';
+import { dynamicApp } from '../dynamics';
+import VxeRowComponent from './src/row';
+export const VxeRow = Object.assign({}, VxeRowComponent, {
+    install(app) {
+        app.component(VxeRowComponent.name, VxeRowComponent);
+    }
+});
+dynamicApp.use(VxeRow);
+VxeUI.component(VxeRowComponent);
+export const Row = VxeRow;
+export default VxeRow;

package/es/row/src/col.js

@@ -0,0 +1,115 @@
+import { defineVxeComponent } from '../../ui/src/comp';
+import XEUtils from 'xe-utils';
+import { getConfig, createEvent, globalMixins } from '../../ui';
+import { toCssUnit } from '../../ui/src/dom';
+export default {
+    name: 'VxeCol',
+    mixins: [
+        globalMixins.sizeMixin
+    ],
+    props: {
+        span: [Number, String],
+        align: String,
+        width: [Number, String],
+        fill: Boolean,
+        ellipsis: Boolean,
+        size: {
+            type: String,
+            default: () => getConfig().col.size || getConfig().size
+        }
+    },
+    inject: {
+        $xeRow: {
+            default: null
+        }
+    },
+    data() {
+        const reactData = {};
+        return {
+            xID: XEUtils.uniqueId(),
+            reactData
+        };
+    },
+    computed: Object.assign(Object.assign({}, {}), { computeRowGutter() {
+            const $xeCol = this;
+            const $xeRow = $xeCol.$xeRow;
+            if ($xeRow) {
+                return $xeRow.gutter;
+            }
+            return null;
+        },
+        computeRowVertical() {
+            const $xeCol = this;
+            const $xeRow = $xeCol.$xeRow;
+            if ($xeRow) {
+                return $xeRow.vertical;
+            }
+            return null;
+        },
+        computeColStyle() {
+            const $xeCol = this;
+            const props = $xeCol;
+            const { width } = props;
+            const rowGutter = $xeCol.computeRowGutter;
+            const rowVertical = $xeCol.computeRowVertical;
+            const style = {};
+            if (rowGutter) {
+                let [lrGutter, tbGutter] = XEUtils.isArray(rowGutter) ? rowGutter : [rowGutter];
+                if (rowVertical) {
+                    tbGutter = lrGutter;
+                    lrGutter = '';
+                }
+                if (lrGutter) {
+                    const padding = XEUtils.isNumber(lrGutter) ? toCssUnit(lrGutter / 2) : `calc(${toCssUnit(lrGutter)} / 2)`;
+                    style.paddingLeft = padding;
+                    style.paddingRight = padding;
+                }
+                if (tbGutter) {
+                    const padding = XEUtils.isNumber(tbGutter) ? toCssUnit(tbGutter / 2) : `calc(${toCssUnit(tbGutter)} / 2)`;
+                    style.paddingTop = padding;
+                    style.paddingBottom = padding;
+                }
+            }
+            if (width) {
+                style.width = toCssUnit(width);
+            }
+            return style;
+        } }),
+    methods: {
+        //
+        // Method
+        //
+        dispatchEvent(type, params, evnt) {
+            const $xeCol = this;
+            $xeCol.$emit(type, createEvent(evnt, { $col: $xeCol }, params));
+        },
+        //
+        // Render
+        //
+        renderVN(h) {
+            const $xeCol = this;
+            const props = $xeCol;
+            const slots = $xeCol.$scopedSlots;
+            const { span, fill, align, width, ellipsis } = props;
+            const colStyle = $xeCol.computeColStyle;
+            const defaultSlot = slots.default;
+            return h('div', {
+                ref: 'refElem',
+                class: ['vxe-col', span ? `span${span}` : '', align ? `align--${align}` : '', {
+                        'is--span': !!span,
+                        'is--width': !!width,
+                        'is--fill': fill,
+                        'is--ellipsis': ellipsis
+                    }],
+                style: colStyle
+            }, [
+                h('div', {
+                    class: 'vxe-col--inner'
+                }, defaultSlot ? defaultSlot({}) : [])
+            ]);
+        }
+    },
+    render(h) {
+        return this.renderVN(h);
+    }
+};

package/es/row/src/row.js

@@ -0,0 +1,99 @@
+import { defineVxeComponent } from '../../ui/src/comp';
+import XEUtils from 'xe-utils';
+import { getConfig, createEvent, globalMixins } from '../../ui';
+import { toCssUnit } from '../../ui/src/dom';
+export default {
+    name: 'VxeRow',
+    mixins: [
+        globalMixins.sizeMixin
+    ],
+    props: {
+        gutter: [Number, String, Array],
+        wrap: {
+            type: Boolean,
+            default: () => getConfig().row.wrap
+        },
+        vertical: Boolean,
+        size: {
+            type: String,
+            default: () => getConfig().row.size || getConfig().size
+        }
+    },
+    provide() {
+        const $xeRow = this;
+        return {
+            $xeRow
+        };
+    },
+    data() {
+        const reactData = {};
+        return {
+            xID: XEUtils.uniqueId(),
+            reactData
+        };
+    },
+    computed: {
+        computeRowStyle() {
+            const $xeRow = this;
+            const props = $xeRow;
+            const { gutter, vertical } = props;
+            const style = {};
+            if (gutter) {
+                let [lrGutter, tbGutter] = XEUtils.isArray(gutter) ? gutter : [gutter];
+                if (vertical) {
+                    tbGutter = lrGutter;
+                    lrGutter = '';
+                }
+                if (lrGutter) {
+                    const offsetSize = XEUtils.isNumber(lrGutter) ? toCssUnit(-(lrGutter / 2)) : `calc(${toCssUnit(lrGutter)} / 2 * -1)`;
+                    style.marginLeft = offsetSize;
+                    style.marginRight = offsetSize;
+                }
+                if (tbGutter) {
+                    const offsetSize = XEUtils.isNumber(tbGutter) ? toCssUnit(-(tbGutter / 2)) : `calc(${toCssUnit(tbGutter)} / 2 * -1)`;
+                    style.marginTop = offsetSize;
+                    style.marginBottom = offsetSize;
+                }
+            }
+            return style;
+        }
+    },
+    methods: {
+        //
+        // Method
+        //
+        dispatchEvent(type, params, evnt) {
+            const $xeRow = this;
+            $xeRow.$emit(type, createEvent(evnt, { $row: $xeRow }, params));
+        },
+        clickEvent(evnt) {
+            const $xeRow = this;
+            $xeRow.dispatchEvent('click', {}, evnt);
+        },
+        //
+        // Render
+        //
+        renderVN(h) {
+            const $xeRow = this;
+            const props = $xeRow;
+            const slots = $xeRow.$scopedSlots;
+            const { vertical, wrap } = props;
+            const rowStyle = $xeRow.computeRowStyle;
+            const defaultSlot = slots.default;
+            return h('div', {
+                ref: 'refElem',
+                class: ['vxe-row', {
+                        'is--vertical': vertical,
+                        'is--wrap': wrap
+                    }],
+                style: rowStyle,
+                on: {
+                    click: $xeRow.clickEvent
+                }
+            }, defaultSlot ? defaultSlot({}) : []);
+        }
+    },
+    render(h) {
+        return this.renderVN(h);
+    }
+};