vxe-pc-ui 4.1.20 → 4.1.22

package/README.md

@@ -109,8 +109,89 @@ npm install vxe-pc-ui
 import VxeUI from 'vxe-pc-ui'
 import 'vxe-pc-ui/lib/style.css'
 // ...
+// ...
+import VxeTable from 'vxe-table'
+import 'vxe-table/lib/style.css'
+// ...
+
+createApp(App).use(VxeUI).use(VxeTable).mount('#app')
+```
+
+### CDN
+
+使用第三方 CDN 方式记得锁定版本号，避免受到非兼容性更新的影响  
+***不建议将第三方的 CDN 地址用于正式环境，因为该连接随时都可能会失效***  
+
+```HTML
+<!-- style -->
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vxe-pc-ui/lib/style.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vxe-table@next/lib/style.css">
+<!-- vue -->
+<script src="https://cdn.jsdelivr.net/npm/vue"></script>
+<!-- table -->
+<script src="https://cdn.jsdelivr.net/npm/xe-utils"></script>
+<script src="https://cdn.jsdelivr.net/npm/vxe-pc-ui"></script>
+<script src="https://cdn.jsdelivr.net/npm/vxe-table@next"></script>
+```
 
-createApp(App).use(VxeUI).mount('#app')
+## 示例
+
+```html
+<template>
+  <div>
+    <vxe-form
+      ref="formRef"
+      :data="formData"
+      @submit="submitEvent">
+      <vxe-form-item title="名称" field="name" span="12" :item-render="{}">
+        <template #default="params">
+          <vxe-input v-model="formData.name""></vxe-input>
+        </template>
+      </vxe-form-item>
+      <vxe-form-item title="角色" field="role" span="12" :item-render="{}">
+        <template #default="params">
+          <vxe-input v-model="formData.role"></vxe-input>
+        </template>
+      </vxe-form-item>
+      <vxe-form-item title="年龄" field="age" span="12" :item-render="{}">
+        <template #default="params">
+          <vxe-input v-model="formData.age"></vxe-input>
+        </template>
+      </vxe-form-item>
+      <vxe-form-item align="center" span="24" :item-render="{}">
+        <template #default>
+          <vxe-button type="submit" status="primary">提交</vxe-button>
+          <vxe-button type="reset">重置</vxe-button>
+        </template>
+      </vxe-form-item>
+    </vxe-form>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { VxeUI, VxeFormInstance, VxeFormEvents } from 'vxe-pc-ui'
+
+interface FormDataVO {
+  name: string
+  nickname: string
+  sex: string
+  role: string
+}
+
+const formRef = ref<VxeFormInstance<FormDataVO>>()
+
+const formData = ref<FormDataVO>({
+  name: '',
+  nickname: '',
+  sex: '',
+  role: ''
+})
+
+const submitEvent: VxeFormEvents.Submit = () => {
+  VxeUI.modal.message({ content: '保存成功', status: 'success' })
+}
+</script>
 ```
 
 ## QQ 交流群

package/es/anchor/src/anchor-link.js

@@ -85,8 +85,8 @@ export default defineComponent({
                     : createCommentVNode()
             ]);
         };
-        $xeAnchorLink.renderVN = renderVN;
         provide('$xeAnchorLink', $xeAnchorLink);
+        $xeAnchorLink.renderVN = renderVN;
         return $xeAnchorLink;
     },
     render() {

package/es/anchor/src/anchor.js

@@ -196,8 +196,8 @@ export default defineComponent({
         onBeforeUnmount(() => {
             removeContainerElemScroll();
         });
-        $xeAnchor.renderVN = renderVN;
         provide('$xeAnchor', $xeAnchor);
+        $xeAnchor.renderVN = renderVN;
         return $xeAnchor;
     },
     render() {

package/es/breadcrumb/src/breadcrumb.js

@@ -61,8 +61,8 @@ export default defineComponent({
                 class: 'vxe-breadcrumb'
             }, defaultSlot ? defaultSlot({}) : renderItems());
         };
-        $xeBreadcrumb.renderVN = renderVN;
         provide('$xeBreadcrumb', $xeBreadcrumb);
+        $xeBreadcrumb.renderVN = renderVN;
         return $xeBreadcrumb;
     },
     render() {

package/es/button/src/button-group.js

@@ -66,6 +66,9 @@ export default defineComponent({
         };
         $xeButtonGroup.renderVN = renderVN;
         provide('$xeButtonGroup', $xeButtonGroup);
-        return renderVN;
+        return $xeButtonGroup;
+    },
+    render() {
+        return this.renderVN();
     }
 });

package/es/calendar/src/calendar.js

@@ -8,22 +8,46 @@ export default defineComponent({
     name: 'VxeCalendar',
     props: {
         modelValue: [String, Number, Date],
-        type: { type: String, default: 'date' },
+        type: {
+            type: String,
+            default: 'date'
+        },
         className: String,
-        size: { type: String, default: () => getConfig().calendar.size || getConfig().size },
+        size: {
+            type: String,
+            default: () => getConfig().calendar.size || getConfig().size
+        },
         multiple: Boolean,
         width: [String, Number],
         height: [String, Number],
         // date、week、month、quarter、year
-        minDate: { type: [String, Number, Date], default: () => getConfig().calendar.minDate },
-        maxDate: { type: [String, Number, Date], default: () => getConfig().calendar.maxDate },
-        startDay: { type: [String, Number], default: () => getConfig().calendar.startDay },
+        minDate: {
+            type: [String, Number, Date],
+            default: () => getConfig().calendar.minDate
+        },
+        maxDate: {
+            type: [String, Number, Date],
+            default: () => getConfig().calendar.maxDate
+        },
+        startDay: {
+            type: [String, Number],
+            default: () => getConfig().calendar.startDay
+        },
         labelFormat: String,
         valueFormat: String,
-        festivalMethod: { type: Function, default: () => getConfig().calendar.festivalMethod },
-        disabledMethod: { type: Function, default: () => getConfig().calendar.disabledMethod },
+        festivalMethod: {
+            type: Function,
+            default: () => getConfig().calendar.festivalMethod
+        },
+        disabledMethod: {
+            type: Function,
+            default: () => getConfig().calendar.disabledMethod
+        },
         // week
-        selectDay: { type: [String, Number], default: () => getConfig().calendar.selectDay }
+        selectDay: {
+            type: [String, Number],
+            default: () => getConfig().calendar.selectDay
+        }
     },
     emits: [
         'update:modelValue',
@@ -37,9 +61,6 @@ export default defineComponent({
         const { emit } = context;
         const xID = XEUtils.uniqueId();
         const { computeSize } = useSize(props);
-        const yearSize = 12;
-        const monthSize = 20;
-        const quarterSize = 8;
         const reactData = reactive({
             selectValue: props.modelValue,
             inputValue: props.modelValue,
@@ -49,18 +70,12 @@ export default defineComponent({
             selectMonth: null,
             currentDate: null
         });
+        const internalData = {
+            yearSize: 12,
+            monthSize: 20,
+            quarterSize: 8
+        };
         const refElem = ref();
-        const computeCalendarStyle = computed(() => {
-            const { height, width } = props;
-            const stys = {};
-            if (width) {
-                stys.width = toCssUnit(width);
-            }
-            if (height) {
-                stys.height = toCssUnit(height);
-            }
-            return stys;
-        });
         const refMaps = {
             refElem
         };
@@ -69,12 +84,21 @@ export default defineComponent({
             props,
             context,
             reactData,
+            internalData,
             getRefMaps: () => refMaps
         };
         let calendarMethods = {};
-        const parseDate = (value, format) => {
-            return XEUtils.toStringDate(value, format);
-        };
+        const computeCalendarStyle = computed(() => {
+            const { height, width } = props;
+            const stys = {};
+            if (width) {
+                stys.width = toCssUnit(width);
+            }
+            if (height) {
+                stys.height = toCssUnit(height);
+            }
+            return stys;
+        });
         const computeIsDisabled = computed(() => {
             return false;
         });
@@ -167,6 +191,7 @@ export default defineComponent({
         });
         const computeYearList = computed(() => {
             const { selectMonth, currentDate } = reactData;
+            const { yearSize } = internalData;
             const years = [];
             if (selectMonth && currentDate) {
                 const currFullYear = currentDate.getFullYear();
@@ -260,6 +285,7 @@ export default defineComponent({
         });
         const computeQuarterList = computed(() => {
             const { selectMonth, currentDate } = reactData;
+            const { quarterSize } = internalData;
             const quarters = [];
             if (selectMonth && currentDate) {
                 const currFullYear = currentDate.getFullYear();
@@ -289,6 +315,7 @@ export default defineComponent({
         });
         const computeMonthList = computed(() => {
             const { selectMonth, currentDate } = reactData;
+            const { monthSize } = internalData;
             const months = [];
             if (selectMonth && currentDate) {
                 const currFullYear = currentDate.getFullYear();
@@ -368,7 +395,10 @@ export default defineComponent({
                 return [item].concat(list);
             });
         });
-        const emitModel = (value, evnt) => {
+        const parseDate = (value, format) => {
+            return XEUtils.toStringDate(value, format);
+        };
+        const handleChange = (value, evnt) => {
             reactData.inputValue = value;
             emit('update:modelValue', value);
             if (XEUtils.toValueString(props.modelValue) !== value) {
@@ -449,16 +479,16 @@ export default defineComponent({
                 const dateMultipleValue = computeDateMultipleValue.value;
                 // 如果是日期类型
                 if (dateMultipleValue.some(val => XEUtils.isEqual(val, inpVal))) {
-                    emitModel(dateMultipleValue.filter(val => !XEUtils.isEqual(val, inpVal)).join(','), { type: 'update' });
+                    handleChange(dateMultipleValue.filter(val => !XEUtils.isEqual(val, inpVal)).join(','), { type: 'update' });
                 }
                 else {
-                    emitModel(dateMultipleValue.concat([inpVal]).join(','), { type: 'update' });
+                    handleChange(dateMultipleValue.concat([inpVal]).join(','), { type: 'update' });
                 }
             }
             else {
                 // 如果为单选
                 if (!XEUtils.isEqual(modelValue, inpVal)) {
-                    emitModel(inpVal, { type: 'update' });
+                    handleChange(inpVal, { type: 'update' });
                 }
             }
         };
@@ -483,6 +513,7 @@ export default defineComponent({
         const datePrevEvent = (evnt) => {
             const { type } = props;
             const { datePanelType, selectMonth } = reactData;
+            const { yearSize } = internalData;
             const isDisabledPrevDateBtn = computeIsDisabledPrevDateBtn.value;
             if (!isDisabledPrevDateBtn) {
                 if (type === 'year') {
@@ -520,6 +551,7 @@ export default defineComponent({
         const dateNextEvent = (evnt) => {
             const { type } = props;
             const { datePanelType, selectMonth } = reactData;
+            const { yearSize } = internalData;
             const isDisabledNextDateBtn = computeIsDisabledNextDateBtn.value;
             if (!isDisabledNextDateBtn) {
                 if (type === 'year') {
@@ -682,13 +714,13 @@ export default defineComponent({
                             }]
                     }, extraItem && extraItem.label
                         ? [
-                            h('span', label),
+                            h('span', `${label || ''}`),
                             h('span', {
                                 class: ['vxe-calendar--date-label--extra', extraItem.important ? 'is-important' : '', extraItem.className],
                                 style: extraItem.style
                             }, XEUtils.toValueString(extraItem.label))
                         ]
-                        : label)
+                        : [`${label || ''}`])
                 ];
                 const festivalLabel = festivalItem.label;
                 if (festivalLabel) {
@@ -709,7 +741,7 @@ export default defineComponent({
                 }
                 return labels;
             }
-            return label;
+            return `${label || ''}`;
         };
         const renderDateDayTable = () => {
             const { multiple } = props;

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

@@ -1,4 +1,5 @@
 import { defineComponent, ref, h, reactive, inject, watch, onMounted, onUnmounted } from 'vue';
+import { createEvent } from '../../ui';
 import { assembleCarouselItem, destroyCarouselItem } from './util';
 import XEUtils from 'xe-utils';
 export default defineComponent({
@@ -10,7 +11,7 @@ export default defineComponent({
     },
     emits: [],
     setup(props, context) {
-        const { slots } = context;
+        const { slots, emit } = context;
         const $xeCarousel = inject('$xeCarousel', null);
         const xID = XEUtils.uniqueId();
         const refElem = ref();
@@ -34,6 +35,14 @@ export default defineComponent({
             getRefMaps: () => refMaps,
             getComputeMaps: () => computeMaps
         };
+        const dispatchEvent = (type, params, evnt) => {
+            emit(type, createEvent(evnt, { $carouselItem: $xeCarouselItem }, params));
+        };
+        const carouselItemMethods = {
+            dispatchEvent
+        };
+        const carouselItemPrivateMethods = {};
+        Object.assign($xeCarouselItem, carouselItemMethods, carouselItemPrivateMethods);
         const renderVN = () => {
             return h('div', {
                 ref: refElem
@@ -46,8 +55,9 @@ export default defineComponent({
             itemConfig.url = val;
         });
         onMounted(() => {
-            if ($xeCarousel && refElem.value) {
-                assembleCarouselItem($xeCarousel, refElem.value, itemConfig);
+            const elem = refElem.value;
+            if ($xeCarousel && elem) {
+                assembleCarouselItem($xeCarousel, elem, itemConfig);
             }
         });
         onUnmounted(() => {

package/es/carousel/src/carousel.js

@@ -54,6 +54,10 @@ export default defineComponent({
             itemWidth: 0,
             itemHeight: 0
         });
+        const internalData = {
+            apTimeout: undefined,
+            stopFlag: false
+        };
         const refMaps = {
             refElem
         };
@@ -78,6 +82,7 @@ export default defineComponent({
             props,
             context,
             reactData,
+            internalData,
             getRefMaps: () => refMaps,
             getComputeMaps: () => computeMaps
         };
@@ -181,20 +186,21 @@ export default defineComponent({
                 emit('change', { value }, evnt);
             }
         };
-        let apTimeout = null;
-        let stopFlag = false;
         const stopAutoPlay = () => {
-            stopFlag = true;
-            if (apTimeout !== null) {
+            const { apTimeout } = internalData;
+            internalData.stopFlag = true;
+            if (apTimeout) {
                 clearTimeout(apTimeout);
+                internalData.apTimeout = undefined;
             }
         };
         const handleAutoPlay = () => {
             const { autoPlay, interval } = props;
+            const { stopFlag } = internalData;
             stopAutoPlay();
             if (autoPlay) {
-                stopFlag = false;
-                apTimeout = setTimeout(() => {
+                internalData.stopFlag = false;
+                internalData.apTimeout = setTimeout(() => {
                     if (!stopFlag) {
                         handlePrevNext(true);
                     }
@@ -294,7 +300,9 @@ export default defineComponent({
                             height: toCssUnit(height)
                         }
                         : null
-                }, renderItemWrapper(list)),
+                }, [
+                    renderItemWrapper(list)
+                ]),
                 showIndicators ? renderIndicators(list) : createCommentVNode(),
                 h('div', {
                     class: 'vxe-carousel--btn-wrapper'
@@ -325,7 +333,6 @@ export default defineComponent({
                 })
             ]);
         };
-        $xeCarousel.renderVN = renderVN;
         const optsFlag = ref(0);
         watch(() => props.options ? props.options.length : -1, () => {
             optsFlag.value++;
@@ -358,6 +365,7 @@ export default defineComponent({
             stopAutoPlay();
         });
         provide('$xeCarousel', $xeCarousel);
+        $xeCarousel.renderVN = renderVN;
         return $xeCarousel;
     },
     render() {

package/es/checkbox/src/checkbox.js

@@ -1,4 +1,4 @@
-import { defineComponent, h, computed, inject } from 'vue';
+import { defineComponent, h, computed, inject, reactive } from 'vue';
 import XEUtils from 'xe-utils';
 import { getFuncText } from '../../ui/src/utils';
 import { getConfig, createEvent, useSize, getIcon } from '../../ui';
@@ -6,17 +6,29 @@ export default defineComponent({
     name: 'VxeCheckbox',
     props: {
         modelValue: [String, Number, Boolean],
-        label: { type: [String, Number], default: null },
+        label: {
+            type: [String, Number],
+            default: null
+        },
         indeterminate: Boolean,
         title: [String, Number],
-        checkedValue: { type: [String, Number, Boolean], default: true },
-        uncheckedValue: { type: [String, Number, Boolean], default: false },
+        checkedValue: {
+            type: [String, Number, Boolean],
+            default: true
+        },
+        uncheckedValue: {
+            type: [String, Number, Boolean],
+            default: false
+        },
         content: [String, Number],
         disabled: {
             type: Boolean,
             default: null
         },
-        size: { type: String, default: () => getConfig().checkbox.size || getConfig().size }
+        size: {
+            type: String,
+            default: () => getConfig().checkbox.size || getConfig().size
+        }
     },
     emits: [
         'update:modelValue',
@@ -28,10 +40,12 @@ export default defineComponent({
         const formItemInfo = inject('xeFormItemInfo', null);
         const $xeCheckboxGroup = inject('$xeCheckboxGroup', null);
         const xID = XEUtils.uniqueId();
+        const reactData = reactive({});
         const $xeCheckbox = {
             xID,
             props,
-            context
+            context,
+            reactData
         };
         let checkboxMethods = {};
         const { computeSize } = useSize(props);
@@ -43,12 +57,13 @@ export default defineComponent({
         });
         const computeIsDisabled = computed(() => {
             const { disabled } = props;
+            const isChecked = computeIsChecked.value;
             if (disabled === null) {
                 if ($xeCheckboxGroup) {
-                    const { computeIsDisabled, computeIsMaximize } = $xeCheckboxGroup.getComputeMaps();
-                    const isMaximize = computeIsMaximize.value;
-                    const isChecked = computeIsChecked.value;
-                    return computeIsDisabled.value || (isMaximize && !isChecked);
+                    const { computeIsDisabled: computeIsGroupDisabled, computeIsMaximize: computeIsGroupMaximize } = $xeCheckboxGroup.getComputeMaps();
+                    const isGroupDisabled = computeIsGroupDisabled.value;
+                    const isGroupMaximize = computeIsGroupMaximize.value;
+                    return isGroupDisabled || (isGroupMaximize && !isChecked);
                 }
             }
             return disabled;
@@ -73,17 +88,18 @@ export default defineComponent({
                 }
             }
         };
+        const dispatchEvent = (type, params, evnt) => {
+            emit(type, createEvent(evnt, { $checkbox: $xeCheckbox }, params));
+        };
         checkboxMethods = {
-            dispatchEvent(type, params, evnt) {
-                emit(type, createEvent(evnt, { $checkbox: $xeCheckbox }, params));
-            }
+            dispatchEvent
         };
         Object.assign($xeCheckbox, checkboxMethods);
         const renderVN = () => {
             const vSize = computeSize.value;
             const isDisabled = computeIsDisabled.value;
             const isChecked = computeIsChecked.value;
-            const indeterminate = props.indeterminate;
+            const indeterminate = !isChecked && props.indeterminate;
             return h('label', {
                 class: ['vxe-checkbox', {
                         [`size--${vSize}`]: vSize,

package/es/checkbox/src/group.js

@@ -1,4 +1,4 @@
-import { defineComponent, h, provide, computed, inject } from 'vue';
+import { defineComponent, h, provide, computed, inject, reactive } from 'vue';
 import { getConfig, createEvent, useSize } from '../../ui';
 import XEUtils from 'xe-utils';
 import VxeCheckboxComponent from './checkbox';
@@ -12,8 +12,14 @@ export default defineComponent({
             type: Boolean,
             default: null
         },
-        max: { type: [String, Number], default: null },
-        size: { type: String, default: () => getConfig().checkboxGroup.size || getConfig().size }
+        max: {
+            type: [String, Number],
+            default: null
+        },
+        size: {
+            type: String,
+            default: () => getConfig().checkboxGroup.size || getConfig().size
+        }
     },
     emits: [
         'update:modelValue',
@@ -24,6 +30,7 @@ export default defineComponent({
         const $xeForm = inject('$xeForm', null);
         const formItemInfo = inject('xeFormItemInfo', null);
         const xID = XEUtils.uniqueId();
+        const reactData = reactive({});
         const computeIsDisabled = computed(() => {
             const { disabled } = props;
             if (disabled === null) {
@@ -42,7 +49,7 @@ export default defineComponent({
             return false;
         });
         const computePropsOpts = computed(() => {
-            return props.optionProps || {};
+            return Object.assign({}, props.optionProps);
         });
         const computeLabelField = computed(() => {
             const propsOpts = computePropsOpts.value;
@@ -64,13 +71,15 @@ export default defineComponent({
             xID,
             props,
             context,
+            reactData,
             getComputeMaps: () => computeMaps
         };
         useSize(props);
+        const dispatchEvent = (type, params, evnt) => {
+            emit(type, createEvent(evnt, { $checkboxGroup: $xeCheckboxGroup }, params));
+        };
         const checkboxGroupMethods = {
-            dispatchEvent(type, params, evnt) {
-                emit(type, createEvent(evnt, { $checkboxGroup: $xeCheckboxGroup }, params));
-            }
+            dispatchEvent
         };
         const checkboxGroupPrivateMethods = {
             handleChecked(params, evnt) {
@@ -114,8 +123,8 @@ export default defineComponent({
                     })
                     : []));
         };
-        $xeCheckboxGroup.renderVN = renderVN;
         provide('$xeCheckboxGroup', $xeCheckboxGroup);
+        $xeCheckboxGroup.renderVN = renderVN;
         return renderVN;
     }
 });

package/es/collapse-pane/index.js

@@ -1,5 +1,5 @@
 import { VxeUI } from '@vxe-ui/core';
-import VxeCollapsePaneComponent from './src/collapse-pane';
+import VxeCollapsePaneComponent from '../collapse/src/collapse-pane';
 import { dynamicApp } from '../dynamics';
 export const VxeCollapsePane = Object.assign({}, VxeCollapsePaneComponent, {
     install(app) {

package/es/countdown/src/countdown.js

@@ -203,7 +203,6 @@ export default defineComponent({
                     : createCommentVNode()
             ]);
         };
-        $xeCountdown.renderVN = renderVN;
         watch(() => props.modelValue, () => {
             updateCount();
             handleStop();
@@ -216,6 +215,7 @@ export default defineComponent({
             handleStart();
         });
         updateCount();
+        $xeCountdown.renderVN = renderVN;
         return $xeCountdown;
     },
     render() {