From d162cb836f51b06408dfe7019f8753132431a8db Mon Sep 17 00:00:00 2001 From: xuliangzhan Date: Tue, 10 Sep 2024 12:16:48 +0800 Subject: [PATCH] releases 4.1.21 --- README.md | 85 ++++++- examples/views/countdown/CountdownTest.vue | 11 +- examples/views/icon-picker/IconPickerTest.vue | 8 +- examples/views/input/InputTest.vue | 2 +- examples/views/pager/PagerTest.vue | 6 +- examples/views/pulldown/PulldownTest.vue | 2 +- examples/views/select/SelectTest.vue | 32 +-- package.json | 4 +- packages/anchor/src/anchor-link.ts | 4 +- packages/anchor/src/anchor.ts | 4 +- packages/breadcrumb/src/breadcrumb.ts | 4 +- packages/button/src/button-group.ts | 5 +- packages/button/src/button.ts | 11 +- packages/calendar/src/calendar.ts | 102 +++++--- packages/card/src/card.ts | 10 +- packages/carousel/src/carousel-item.ts | 23 +- packages/carousel/src/carousel.ts | 30 ++- packages/checkbox/src/checkbox.ts | 49 ++-- packages/checkbox/src/group.ts | 32 ++- packages/collapse-pane/index.ts | 2 +- .../src/collapse-pane.ts | 0 packages/countdown/src/countdown.ts | 31 ++- packages/date-picker/src/date-picker.ts | 240 ++++++++++++------ packages/drawer/src/drawer.ts | 141 ++++++---- packages/form/render/index.ts | 4 +- packages/form/src/form-config-item.ts | 7 +- packages/form/src/form-gather.ts | 8 +- packages/form/src/form-item.ts | 25 +- packages/form/src/form.ts | 22 +- packages/form/src/render.ts | 3 +- packages/form/src/util.ts | 3 +- packages/icon-picker/src/icon-picker.ts | 48 ++-- packages/icon/src/icon.ts | 3 + packages/image/src/group.ts | 5 +- packages/image/src/preview.ts | 4 +- packages/input/src/input.ts | 213 ++++++++++------ packages/layout-aside/src/layout-aside.ts | 4 +- packages/list-design/src/list-design.ts | 4 +- packages/list-design/src/list-view.ts | 4 +- packages/list/src/list.ts | 23 +- packages/loading/src/loading.ts | 7 +- packages/menu/src/menu.ts | 9 +- packages/number-input/src/number-input.ts | 181 +++++++------ packages/pager/src/pager.ts | 141 ++++++---- packages/password-input/src/password-input.ts | 4 +- packages/print/src/page-break.ts | 22 +- packages/print/src/print.ts | 15 +- packages/pulldown/src/pulldown.ts | 50 ++-- packages/radio/src/button.ts | 4 +- packages/radio/src/group.ts | 14 +- packages/row/src/row.ts | 4 +- packages/select/src/optgroup.ts | 35 ++- packages/select/src/option.ts | 28 +- packages/select/src/select.ts | 131 ++++++---- packages/select/src/util.ts | 6 +- packages/tabs/src/tab-pane.ts | 25 +- packages/tabs/src/tabs.ts | 108 ++++---- packages/textarea/src/textarea.ts | 38 ++- packages/tooltip/src/tooltip.ts | 202 +++++++++------ packages/tree-select/src/tree-select.ts | 41 +-- packages/tree/src/tree.ts | 11 +- packages/ui/index.ts | 7 - packages/upload/src/upload.ts | 12 +- tsconfig.json | 2 - types/components/calendar.d.ts | 6 + types/components/carousel.d.ts | 5 + types/components/countdown.d.ts | 4 + types/components/date-picker.d.ts | 28 +- types/components/drawer.d.ts | 1 - types/components/form.d.ts | 6 +- types/components/icon-picker.d.ts | 4 + types/components/input.d.ts | 10 +- types/components/list.d.ts | 1 + types/components/number-input.d.ts | 8 +- types/components/optgroup.d.ts | 14 +- types/components/pulldown.d.ts | 6 +- types/components/select.d.ts | 4 + types/components/tabs.d.ts | 4 + types/components/toolbar.d.ts | 5 + types/components/tooltip.d.ts | 4 + types/components/tree-select.d.ts | 4 + types/ui/index.d.ts | 22 -- 82 files changed, 1568 insertions(+), 883 deletions(-) rename packages/{collapse-pane => collapse}/src/collapse-pane.ts (100%) diff --git a/README.md b/README.md index 39563b62..e36726fd 100644 --- a/README.md +++ b/README.md @@ -92,7 +92,7 @@ [👀 Vxe Table](https://vxetable.cn) -* [x] table 表格 +* [x] table 表格-基础表格 * [x] column 表格-列 * [x] colgroup 表格-分组列 * [x] toolbar 表格-工具栏 @@ -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 + + + + + + + + + +``` -createApp(App).use(VxeUI).mount('#app') +## 示例 + +```html + + + ``` ## QQ 交流群 diff --git a/examples/views/countdown/CountdownTest.vue b/examples/views/countdown/CountdownTest.vue index 1851bc88..6127d3fe 100644 --- a/examples/views/countdown/CountdownTest.vue +++ b/examples/views/countdown/CountdownTest.vue @@ -1,7 +1,7 @@ @@ -14,6 +14,8 @@ import { reactive } from 'vue' const demo1 = reactive({ - val1: '' + val1: '', + val2: '', + val3: 'vxe-icon-print' }) diff --git a/examples/views/input/InputTest.vue b/examples/views/input/InputTest.vue index 63f8d456..2d5a7776 100644 --- a/examples/views/input/InputTest.vue +++ b/examples/views/input/InputTest.vue @@ -9,7 +9,7 @@

- + diff --git a/examples/views/pager/PagerTest.vue b/examples/views/pager/PagerTest.vue index 33dce46f..15a24c31 100644 --- a/examples/views/pager/PagerTest.vue +++ b/examples/views/pager/PagerTest.vue @@ -68,9 +68,9 @@ diff --git a/examples/views/pulldown/PulldownTest.vue b/examples/views/pulldown/PulldownTest.vue index 2539e241..78cb6e04 100644 --- a/examples/views/pulldown/PulldownTest.vue +++ b/examples/views/pulldown/PulldownTest.vue @@ -71,7 +71,7 @@

- + diff --git a/examples/views/select/SelectTest.vue b/examples/views/select/SelectTest.vue index 8a7b8b0a..644bc47e 100644 --- a/examples/views/select/SelectTest.vue +++ b/examples/views/select/SelectTest.vue @@ -4,19 +4,19 @@ @@ -39,19 +39,19 @@ diff --git a/package.json b/package.json index 13a12968..c3538bfa 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "vxe-pc-ui", - "version": "4.1.19", + "version": "4.1.21", "description": "A vue based PC component library", "scripts": { "update": "npm install --legacy-peer-deps", @@ -25,7 +25,7 @@ "style": "lib/style.css", "typings": "types/index.d.ts", "dependencies": { - "@vxe-ui/core": "^4.0.7" + "@vxe-ui/core": "^4.0.9" }, "devDependencies": { "@typescript-eslint/eslint-plugin": "^6.21.0", diff --git a/packages/anchor/src/anchor-link.ts b/packages/anchor/src/anchor-link.ts index 75c6ec95..fb0a8ecb 100644 --- a/packages/anchor/src/anchor-link.ts +++ b/packages/anchor/src/anchor-link.ts @@ -107,10 +107,10 @@ export default defineComponent({ ]) } - $xeAnchorLink.renderVN = renderVN - provide('$xeAnchorLink', $xeAnchorLink) + $xeAnchorLink.renderVN = renderVN + return $xeAnchorLink }, render () { diff --git a/packages/anchor/src/anchor.ts b/packages/anchor/src/anchor.ts index 92029983..70c75f37 100644 --- a/packages/anchor/src/anchor.ts +++ b/packages/anchor/src/anchor.ts @@ -224,10 +224,10 @@ export default defineComponent({ removeContainerElemScroll() }) - $xeAnchor.renderVN = renderVN - provide('$xeAnchor', $xeAnchor) + $xeAnchor.renderVN = renderVN + return $xeAnchor }, render () { diff --git a/packages/breadcrumb/src/breadcrumb.ts b/packages/breadcrumb/src/breadcrumb.ts index 3aa696a4..8b11b3a5 100644 --- a/packages/breadcrumb/src/breadcrumb.ts +++ b/packages/breadcrumb/src/breadcrumb.ts @@ -79,10 +79,10 @@ export default defineComponent({ }, defaultSlot ? defaultSlot({}) : renderItems()) } - $xeBreadcrumb.renderVN = renderVN - provide('$xeBreadcrumb', $xeBreadcrumb) + $xeBreadcrumb.renderVN = renderVN + return $xeBreadcrumb }, render () { diff --git a/packages/button/src/button-group.ts b/packages/button/src/button-group.ts index aee78683..3ee5e3d2 100644 --- a/packages/button/src/button-group.ts +++ b/packages/button/src/button-group.ts @@ -85,6 +85,9 @@ export default defineComponent({ provide('$xeButtonGroup', $xeButtonGroup) - return renderVN + return $xeButtonGroup + }, + render () { + return this.renderVN() } }) diff --git a/packages/button/src/button.ts b/packages/button/src/button.ts index 679101b4..bb5fe8ed 100644 --- a/packages/button/src/button.ts +++ b/packages/button/src/button.ts @@ -5,7 +5,7 @@ import { getAbsolutePos, getEventTargetNode } from '../../ui/src/dom' import { getFuncText, getLastZIndex, nextZIndex } from '../../ui/src/utils' import { warnLog } from '../../ui/src/log' -import type { VxeButtonConstructor, VxeButtonPropTypes, VxeButtonEmits, ButtonReactData, ButtonMethods, ButtonPrivateRef, ButtonInternalData, VxeButtonGroupConstructor, VxeButtonGroupPrivateMethods, VxeTableConstructor, VxeTablePrivateMethods, VxeFormConstructor, VxeFormPrivateMethods, VxeModalConstructor, VxeModalMethods, ValueOf } from '../../../types' +import type { VxeButtonConstructor, VxeButtonPropTypes, VxeButtonEmits, ButtonReactData, ButtonMethods, ButtonPrivateRef, ButtonInternalData, VxeButtonGroupConstructor, VxeButtonGroupPrivateMethods, VxeTableConstructor, VxeDrawerConstructor, VxeDrawerMethods, VxeTablePrivateMethods, VxeFormConstructor, VxeFormPrivateMethods, VxeModalConstructor, VxeModalMethods, ValueOf } from '../../../types' export default defineComponent({ name: 'VxeButton', @@ -98,9 +98,10 @@ export default defineComponent({ setup (props, context) { const { slots, emit } = context - const $xeModal = inject('$xeModal', null) - const $xeTable = inject('$xeTable', null) - const $xeForm = inject('$xeForm', null) + const $xeModal = inject<(VxeModalConstructor & VxeModalMethods)| null>('$xeModal', null) + const $xeDrawer = inject<(VxeDrawerConstructor & VxeDrawerMethods) | null>('$xeDrawer', null) + const $xeTable = inject<(VxeTableConstructor & VxeTablePrivateMethods) | null>('$xeTable', null) + const $xeForm = inject<(VxeFormConstructor & VxeFormPrivateMethods)| null>('$xeForm', null) const $xeButtonGroup = inject<(VxeButtonGroupConstructor & VxeButtonGroupPrivateMethods) | null>('$xeButtonGroup', null) const xID = XEUtils.uniqueId() @@ -149,7 +150,7 @@ export default defineComponent({ if (XEUtils.isBoolean(globalTransfer)) { return globalTransfer } - if ($xeTable || $xeModal || $xeForm) { + if ($xeTable || $xeModal || $xeDrawer || $xeForm) { return true } } diff --git a/packages/calendar/src/calendar.ts b/packages/calendar/src/calendar.ts index 8cf9a54f..3ab2d313 100644 --- a/packages/calendar/src/calendar.ts +++ b/packages/calendar/src/calendar.ts @@ -5,31 +5,55 @@ import { toCssUnit } from '../..//ui/src/dom' import VxeButtonComponent from '../../button/src/button' import XEUtils from 'xe-utils' -import type { VxeCalendarConstructor, VxeCalendarEmits, CalendarReactData, CalendarMethods, VxeCalendarPropTypes, CalendarPrivateRef, VxeDatePickerDefines } from '../../../types' +import type { VxeCalendarConstructor, VxeCalendarEmits, CalendarInternalData, CalendarReactData, CalendarMethods, VxeCalendarPropTypes, CalendarPrivateRef, VxeDatePickerDefines } from '../../../types' export default defineComponent({ name: 'VxeCalendar', props: { modelValue: [String, Number, Date] as PropType, - type: { type: String as PropType, default: 'date' }, + type: { + type: String as PropType, + default: 'date' + }, className: String as PropType, - size: { type: String as PropType, default: () => getConfig().calendar.size || getConfig().size }, + size: { + type: String as PropType, + default: () => getConfig().calendar.size || getConfig().size + }, multiple: Boolean as PropType, width: [String, Number] as PropType, height: [String, Number] as PropType, // date、week、month、quarter、year - minDate: { type: [String, Number, Date] as PropType, default: () => getConfig().calendar.minDate }, - maxDate: { type: [String, Number, Date] as PropType, default: () => getConfig().calendar.maxDate }, - startDay: { type: [String, Number] as PropType, default: () => getConfig().calendar.startDay }, + minDate: { + type: [String, Number, Date] as PropType, + default: () => getConfig().calendar.minDate + }, + maxDate: { + type: [String, Number, Date] as PropType, + default: () => getConfig().calendar.maxDate + }, + startDay: { + type: [String, Number] as PropType, + default: () => getConfig().calendar.startDay + }, labelFormat: String as PropType, valueFormat: String as PropType, - festivalMethod: { type: Function as PropType, default: () => getConfig().calendar.festivalMethod }, - disabledMethod: { type: Function as PropType, default: () => getConfig().calendar.disabledMethod }, + festivalMethod: { + type: Function as PropType, + default: () => getConfig().calendar.festivalMethod + }, + disabledMethod: { + type: Function as PropType, + default: () => getConfig().calendar.disabledMethod + }, // week - selectDay: { type: [String, Number] as PropType, default: () => getConfig().calendar.selectDay } + selectDay: { + type: [String, Number] as PropType, + default: () => getConfig().calendar.selectDay + } }, emits: [ 'update:modelValue', @@ -46,10 +70,6 @@ export default defineComponent({ const { computeSize } = useSize(props) - const yearSize = 12 - const monthSize = 20 - const quarterSize = 8 - const reactData = reactive({ selectValue: props.modelValue, inputValue: props.modelValue, @@ -60,19 +80,13 @@ export default defineComponent({ currentDate: null }) - const refElem = ref() as Ref + const internalData: CalendarInternalData = { + yearSize: 12, + monthSize: 20, + quarterSize: 8 + } - const computeCalendarStyle = computed(() => { - const { height, width } = props - const stys: Record = {} - if (width) { - stys.width = toCssUnit(width) - } - if (height) { - stys.height = toCssUnit(height) - } - return stys - }) + const refElem = ref() as Ref const refMaps: CalendarPrivateRef = { refElem @@ -83,14 +97,23 @@ export default defineComponent({ props, context, reactData, + internalData, getRefMaps: () => refMaps } as unknown as VxeCalendarConstructor let calendarMethods = {} as CalendarMethods - const parseDate = (value: VxeCalendarPropTypes.ModelValue, format: string) => { - return XEUtils.toStringDate(value, format) - } + const computeCalendarStyle = computed(() => { + const { height, width } = props + const stys: Record = {} + if (width) { + stys.width = toCssUnit(width) + } + if (height) { + stys.height = toCssUnit(height) + } + return stys + }) const computeIsDisabled = computed(() => { return false @@ -198,6 +221,7 @@ export default defineComponent({ const computeYearList = computed(() => { const { selectMonth, currentDate } = reactData + const { yearSize } = internalData const years: VxeDatePickerDefines.DateYearItem[] = [] if (selectMonth && currentDate) { const currFullYear = currentDate.getFullYear() @@ -295,6 +319,7 @@ export default defineComponent({ const computeQuarterList = computed(() => { const { selectMonth, currentDate } = reactData + const { quarterSize } = internalData const quarters: VxeDatePickerDefines.DateQuarterItem[] = [] if (selectMonth && currentDate) { const currFullYear = currentDate.getFullYear() @@ -326,6 +351,7 @@ export default defineComponent({ const computeMonthList = computed(() => { const { selectMonth, currentDate } = reactData + const { monthSize } = internalData const months: VxeDatePickerDefines.DateMonthItem[] = [] if (selectMonth && currentDate) { const currFullYear = currentDate.getFullYear() @@ -410,7 +436,11 @@ export default defineComponent({ }) }) - const emitModel = (value: string, evnt: Event | { type: string }) => { + const parseDate = (value: VxeCalendarPropTypes.ModelValue, format: string) => { + return XEUtils.toStringDate(value, format) + } + + const handleChange = (value: string, evnt: Event | { type: string }) => { reactData.inputValue = value emit('update:modelValue', value) if (XEUtils.toValueString(props.modelValue) !== value) { @@ -495,14 +525,14 @@ 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' }) } } } @@ -530,6 +560,7 @@ export default defineComponent({ const datePrevEvent = (evnt: Event) => { const { type } = props const { datePanelType, selectMonth } = reactData + const { yearSize } = internalData const isDisabledPrevDateBtn = computeIsDisabledPrevDateBtn.value if (!isDisabledPrevDateBtn) { if (type === 'year') { @@ -564,6 +595,7 @@ export default defineComponent({ const dateNextEvent = (evnt: Event) => { const { type } = props const { datePanelType, selectMonth } = reactData + const { yearSize } = internalData const isDisabledNextDateBtn = computeIsDisabledNextDateBtn.value if (!isDisabledNextDateBtn) { if (type === 'year') { @@ -720,13 +752,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) { @@ -749,7 +781,7 @@ export default defineComponent({ } return labels } - return label + return `${label || ''}` } const renderDateDayTable = () => { diff --git a/packages/card/src/card.ts b/packages/card/src/card.ts index 66cec1bb..7417d2ad 100644 --- a/packages/card/src/card.ts +++ b/packages/card/src/card.ts @@ -5,7 +5,7 @@ import { toCssUnit } from '../..//ui/src/dom' import VxeLoadingComponent from '../../loading/src/loading' import XEUtils from 'xe-utils' -import type { CardReactData, VxeCardEmits, VxeCardPropTypes, CardPrivateRef, CardMethods, CardPrivateMethods, VxeCardPrivateComputed, VxeCardConstructor, VxeCardPrivateMethods } from '../../../types' +import type { CardReactData, VxeCardEmits, VxeCardPropTypes, CardPrivateRef, ValueOf, CardMethods, CardPrivateMethods, VxeCardPrivateComputed, VxeCardConstructor, VxeCardPrivateMethods } from '../../../types' export default defineComponent({ name: 'VxeCard', @@ -72,10 +72,12 @@ export default defineComponent({ getComputeMaps: () => computeMaps } as unknown as VxeCardConstructor & VxeCardPrivateMethods + const dispatchEvent = (type: ValueOf, params: Record, evnt: Event | null) => { + emit(type, createEvent(evnt, { $card: $xeCard }, params)) + } + const cardMethods: CardMethods = { - dispatchEvent (type, params, evnt) { - emit(type, createEvent(evnt, { $card: $xeCard }, params)) - } + dispatchEvent } const cardPrivateMethods: CardPrivateMethods = { diff --git a/packages/carousel/src/carousel-item.ts b/packages/carousel/src/carousel-item.ts index 9ebb58c1..896711b1 100644 --- a/packages/carousel/src/carousel-item.ts +++ b/packages/carousel/src/carousel-item.ts @@ -1,8 +1,9 @@ import { defineComponent, ref, h, reactive, PropType, inject, watch, onMounted, onUnmounted } from 'vue' +import { createEvent } from '../../ui' import { assembleCarouselItem, destroyCarouselItem } from './util' import XEUtils from 'xe-utils' -import type { VxeCarouselItemPropTypes, CarouselItemReactData, CarouselItemPrivateRef, VxeCarouselItemEmits, VxeCarouselDefines, VxeCarouselItemPrivateComputed, VxeCarouselItemConstructor, VxeCarouselItemPrivateMethods, VxeCarouselConstructor, VxeCarouselPrivateMethods } from '../../../types' +import type { VxeCarouselItemPropTypes, CarouselItemReactData, CarouselItemPrivateRef, CarouselItemMethods, CarouselItemPrivateMethods, ValueOf, VxeCarouselItemEmits, VxeCarouselDefines, VxeCarouselItemPrivateComputed, VxeCarouselItemConstructor, VxeCarouselItemPrivateMethods, VxeCarouselConstructor, VxeCarouselPrivateMethods } from '../../../types' export default defineComponent({ name: 'VxeCarouselItem', @@ -14,7 +15,7 @@ export default defineComponent({ emits: [ ] as VxeCarouselItemEmits, setup (props, context) { - const { slots } = context + const { slots, emit } = context const $xeCarousel = inject<(VxeCarouselConstructor & VxeCarouselPrivateMethods) | null>('$xeCarousel', null) @@ -50,6 +51,19 @@ export default defineComponent({ getComputeMaps: () => computeMaps } as unknown as VxeCarouselItemConstructor & VxeCarouselItemPrivateMethods + const dispatchEvent = (type: ValueOf, params: Record, evnt: Event | null) => { + emit(type, createEvent(evnt, { $carouselItem: $xeCarouselItem }, params)) + } + + const carouselItemMethods: CarouselItemMethods = { + dispatchEvent + } + + const carouselItemPrivateMethods: CarouselItemPrivateMethods = { + } + + Object.assign($xeCarouselItem, carouselItemMethods, carouselItemPrivateMethods) + const renderVN = () => { return h('div', { ref: refElem @@ -65,8 +79,9 @@ export default defineComponent({ }) onMounted(() => { - if ($xeCarousel && refElem.value) { - assembleCarouselItem($xeCarousel, refElem.value, itemConfig) + const elem = refElem.value + if ($xeCarousel && elem) { + assembleCarouselItem($xeCarousel, elem, itemConfig) } }) diff --git a/packages/carousel/src/carousel.ts b/packages/carousel/src/carousel.ts index 03b9a895..b4fbf5ee 100644 --- a/packages/carousel/src/carousel.ts +++ b/packages/carousel/src/carousel.ts @@ -5,7 +5,7 @@ import { toCssUnit } from '../..//ui/src/dom' import VxeLoadingComponent from '../../loading/src/loading' import XEUtils from 'xe-utils' -import type { CarouselReactData, CarouselPrivateRef, VxeCarouselPropTypes, CarouselMethods, CarouselPrivateMethods, VxeCarouselEmits, VxeCarouselDefines, VxeCarouselPrivateComputed, VxeCarouselConstructor, ValueOf, VxeCarouselPrivateMethods } from '../../../types' +import type { CarouselReactData, CarouselPrivateRef, VxeCarouselPropTypes, CarouselInternalData, CarouselMethods, CarouselPrivateMethods, VxeCarouselEmits, VxeCarouselDefines, VxeCarouselPrivateComputed, VxeCarouselConstructor, ValueOf, VxeCarouselPrivateMethods } from '../../../types' export default defineComponent({ name: 'VxeCarousel', @@ -61,6 +61,11 @@ export default defineComponent({ itemHeight: 0 }) + const internalData: CarouselInternalData = { + apTimeout: undefined, + stopFlag: false + } + const refMaps: CarouselPrivateRef = { refElem } @@ -88,6 +93,7 @@ export default defineComponent({ props, context, reactData, + internalData, getRefMaps: () => refMaps, getComputeMaps: () => computeMaps @@ -198,22 +204,22 @@ export default defineComponent({ } } - let apTimeout: any = 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) } @@ -324,7 +330,9 @@ export default defineComponent({ height: toCssUnit(height) } : null - }, renderItemWrapper(list)), + }, [ + renderItemWrapper(list) + ]), showIndicators ? renderIndicators(list) : createCommentVNode(), h('div', { class: 'vxe-carousel--btn-wrapper' @@ -356,8 +364,6 @@ export default defineComponent({ ]) } - $xeCarousel.renderVN = renderVN - const optsFlag = ref(0) watch(() => props.options ? props.options.length : -1, () => { optsFlag.value++ @@ -397,6 +403,8 @@ export default defineComponent({ provide('$xeCarousel', $xeCarousel) + $xeCarousel.renderVN = renderVN + return $xeCarousel }, render () { diff --git a/packages/checkbox/src/checkbox.ts b/packages/checkbox/src/checkbox.ts index 8af6a07c..5c9037e5 100644 --- a/packages/checkbox/src/checkbox.ts +++ b/packages/checkbox/src/checkbox.ts @@ -1,25 +1,37 @@ -import { defineComponent, h, computed, inject, PropType } from 'vue' +import { defineComponent, h, computed, inject, PropType, reactive } from 'vue' import XEUtils from 'xe-utils' import { getFuncText } from '../../ui/src/utils' import { getConfig, createEvent, useSize, getIcon } from '../../ui' -import type { VxeCheckboxConstructor, VxeCheckboxGroupConstructor, VxeCheckboxEmits, VxeCheckboxGroupPrivateMethods, CheckboxMethods, VxeCheckboxPropTypes, VxeFormConstructor, VxeFormPrivateMethods, VxeFormDefines } from '../../../types' +import type { VxeCheckboxConstructor, VxeCheckboxGroupConstructor, CheckboxReactData, VxeCheckboxEmits, ValueOf, VxeCheckboxGroupPrivateMethods, CheckboxMethods, VxeCheckboxPropTypes, VxeFormConstructor, VxeFormPrivateMethods, VxeFormDefines } from '../../../types' export default defineComponent({ name: 'VxeCheckbox', props: { modelValue: [String, Number, Boolean] as PropType, - label: { type: [String, Number] as PropType, default: null }, + label: { + type: [String, Number] as PropType, + default: null + }, indeterminate: Boolean as PropType, title: [String, Number] as PropType, - checkedValue: { type: [String, Number, Boolean] as PropType, default: true }, - uncheckedValue: { type: [String, Number, Boolean] as PropType, default: false }, + checkedValue: { + type: [String, Number, Boolean] as PropType, + default: true + }, + uncheckedValue: { + type: [String, Number, Boolean] as PropType, + default: false + }, content: [String, Number] as PropType, disabled: { type: Boolean as PropType, default: null }, - size: { type: String as PropType, default: () => getConfig().checkbox.size || getConfig().size } + size: { + type: String as PropType, + default: () => getConfig().checkbox.size || getConfig().size + } }, emits: [ 'update:modelValue', @@ -34,10 +46,14 @@ export default defineComponent({ const xID = XEUtils.uniqueId() + const reactData: CheckboxReactData = reactive({ + }) + const $xeCheckbox = { xID, props, - context + context, + reactData } as unknown as VxeCheckboxConstructor let checkboxMethods = {} as CheckboxMethods @@ -53,12 +69,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 @@ -84,10 +101,12 @@ export default defineComponent({ } } + const dispatchEvent = (type: ValueOf, params: Record, evnt: Event | null) => { + emit(type, createEvent(evnt, { $checkbox: $xeCheckbox }, params)) + } + checkboxMethods = { - dispatchEvent (type, params, evnt) { - emit(type, createEvent(evnt, { $checkbox: $xeCheckbox }, params)) - } + dispatchEvent } Object.assign($xeCheckbox, checkboxMethods) @@ -96,7 +115,7 @@ export default defineComponent({ 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, diff --git a/packages/checkbox/src/group.ts b/packages/checkbox/src/group.ts index 3b728a67..45aaa4b2 100644 --- a/packages/checkbox/src/group.ts +++ b/packages/checkbox/src/group.ts @@ -1,9 +1,9 @@ -import { defineComponent, h, provide, PropType, computed, inject } from 'vue' +import { defineComponent, h, provide, PropType, computed, inject, reactive } from 'vue' import { getConfig, createEvent, useSize } from '../../ui' import XEUtils from 'xe-utils' import VxeCheckboxComponent from './checkbox' -import type { VxeCheckboxGroupConstructor, VxeCheckboxGroupEmits, VxeCheckboxGroupPrivateMethods, CheckboxGroupPrivateMethods, CheckboxGroupPrivateComputed, CheckboxGroupMethods, VxeCheckboxGroupPropTypes, VxeFormConstructor, VxeFormPrivateMethods, VxeFormDefines } from '../../../types' +import type { VxeCheckboxGroupConstructor, VxeCheckboxGroupEmits, ValueOf, CheckboxGroupReactData, VxeCheckboxGroupPrivateMethods, CheckboxGroupPrivateMethods, CheckboxGroupPrivateComputed, CheckboxGroupMethods, VxeCheckboxGroupPropTypes, VxeFormConstructor, VxeFormPrivateMethods, VxeFormDefines } from '../../../types' export default defineComponent({ name: 'VxeCheckboxGroup', @@ -15,8 +15,14 @@ export default defineComponent({ type: Boolean as PropType, default: null }, - max: { type: [String, Number] as PropType, default: null }, - size: { type: String as PropType, default: () => getConfig().checkboxGroup.size || getConfig().size } + max: { + type: [String, Number] as PropType, + default: null + }, + size: { + type: String as PropType, + default: () => getConfig().checkboxGroup.size || getConfig().size + } }, emits: [ 'update:modelValue', @@ -29,6 +35,9 @@ export default defineComponent({ const xID = XEUtils.uniqueId() + const reactData: CheckboxGroupReactData = reactive({ + }) + const computeIsDisabled = computed(() => { const { disabled } = props if (disabled === null) { @@ -49,7 +58,7 @@ export default defineComponent({ }) const computePropsOpts = computed(() => { - return props.optionProps || {} + return Object.assign({}, props.optionProps) }) const computeLabelField = computed(() => { @@ -76,16 +85,19 @@ export default defineComponent({ xID, props, context, + reactData, getComputeMaps: () => computeMaps } as unknown as VxeCheckboxGroupConstructor & VxeCheckboxGroupPrivateMethods useSize(props) + const dispatchEvent = (type: ValueOf, params: Record, evnt: Event | null) => { + emit(type, createEvent(evnt, { $checkboxGroup: $xeCheckboxGroup }, params)) + } + const checkboxGroupMethods: CheckboxGroupMethods = { - dispatchEvent (type, params, evnt) { - emit(type, createEvent(evnt, { $checkboxGroup: $xeCheckboxGroup }, params)) - } + dispatchEvent } const checkboxGroupPrivateMethods: CheckboxGroupPrivateMethods = { @@ -132,10 +144,10 @@ export default defineComponent({ : [])) } - $xeCheckboxGroup.renderVN = renderVN - provide('$xeCheckboxGroup', $xeCheckboxGroup) + $xeCheckboxGroup.renderVN = renderVN + return renderVN } }) diff --git a/packages/collapse-pane/index.ts b/packages/collapse-pane/index.ts index 235c6530..0daa2883 100644 --- a/packages/collapse-pane/index.ts +++ b/packages/collapse-pane/index.ts @@ -1,6 +1,6 @@ import { App } from 'vue' 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, { diff --git a/packages/collapse-pane/src/collapse-pane.ts b/packages/collapse/src/collapse-pane.ts similarity index 100% rename from packages/collapse-pane/src/collapse-pane.ts rename to packages/collapse/src/collapse-pane.ts diff --git a/packages/countdown/src/countdown.ts b/packages/countdown/src/countdown.ts index 545baf71..9d7e5844 100644 --- a/packages/countdown/src/countdown.ts +++ b/packages/countdown/src/countdown.ts @@ -4,7 +4,7 @@ import { getSlotVNs } from '../../ui/src/vn' import VxeTextComponent from '../../text/src/text' import XEUtils from 'xe-utils' -import type { VxeCountdownPropTypes, CountdownReactData, CountdownPrivateRef, VxeCountdownEmits, VxeCountdownPrivateComputed, VxeCountdownConstructor, VxeCountdownPrivateMethods, ValueOf, CountdownMethods, CountdownPrivateMethods } from '../../../types' +import type { VxeCountdownPropTypes, CountdownReactData, CountdownInternalData, CountdownPrivateRef, VxeCountdownEmits, VxeCountdownPrivateComputed, VxeCountdownConstructor, VxeCountdownPrivateMethods, ValueOf, CountdownMethods, CountdownPrivateMethods } from '../../../types' export default defineComponent({ name: 'VxeCountdown', @@ -13,7 +13,10 @@ export default defineComponent({ format: String as PropType, prefixConfig: Object as PropType, suffixConfig: Object as PropType, - size: { type: String as PropType, default: () => getConfig().countdown.size || getConfig().size } + size: { + type: String as PropType, + default: () => getConfig().countdown.size || getConfig().size + } }, emits: [ 'update:modelValue', @@ -34,6 +37,10 @@ export default defineComponent({ secondNum: 0 }) + const internalData: CountdownInternalData = { + dnTimeout: undefined + } + const refMaps: CountdownPrivateRef = { refElem } @@ -94,13 +101,12 @@ export default defineComponent({ props, context, reactData, + internalData, getRefMaps: () => refMaps, getComputeMaps: () => computeMaps } as unknown as VxeCountdownConstructor & VxeCountdownPrivateMethods - let htime: any = null - const dispatchEvent = (type: ValueOf, params: Record, evnt: Event | null) => { emit(type, createEvent(evnt, { $carousel: $xeCountdown }, params)) } @@ -115,10 +121,12 @@ export default defineComponent({ const { currNum } = reactData if (currNum > 1000) { reactData.currNum -= 1000 - htime = setTimeout(handleTime, 1000) + internalData.dnTimeout = setTimeout(() => { + handleTime() + }, 1000) } else { reactData.currNum = 0 - stop() + handleStop() } } @@ -132,9 +140,10 @@ export default defineComponent({ } const handleStop = () => { - if (htime != null) { - clearTimeout(htime) - htime = null + const { dnTimeout } = internalData + if (dnTimeout) { + clearTimeout(dnTimeout) + internalData.dnTimeout = undefined dispatchEvent('end', {}, null) } } @@ -225,8 +234,6 @@ export default defineComponent({ ]) } - $xeCountdown.renderVN = renderVN - watch(() => props.modelValue, () => { updateCount() handleStop() @@ -243,6 +250,8 @@ export default defineComponent({ updateCount() + $xeCountdown.renderVN = renderVN + return $xeCountdown }, render () { diff --git a/packages/date-picker/src/date-picker.ts b/packages/date-picker/src/date-picker.ts index 99af154b..3711d5b9 100644 --- a/packages/date-picker/src/date-picker.ts +++ b/packages/date-picker/src/date-picker.ts @@ -1,21 +1,30 @@ import { defineComponent, h, Teleport, ref, Ref, computed, reactive, inject, nextTick, watch, onUnmounted, PropType, createCommentVNode } from 'vue' import XEUtils from 'xe-utils' -import { getConfig, getIcon, getI18n, globalEvents, GLOBAL_EVENT_KEYS, createEvent, useSize, VxeComponentStyleType } from '../../ui' +import { getConfig, getIcon, getI18n, globalEvents, GLOBAL_EVENT_KEYS, createEvent, useSize } from '../../ui' import { getFuncText, getLastZIndex, nextZIndex } from '../../ui/src/utils' import { getAbsolutePos, getEventTargetNode } from '../../ui/src/dom' import { toStringTimeDate, getDateQuarter } from './util' import { getSlotVNs } from '../..//ui/src/vn' -import type { VxeDatePickerConstructor, VxeDatePickerEmits, DatePickerReactData, DatePickerMethods, VxeDatePickerPropTypes, DatePickerPrivateRef, VxeFormConstructor, VxeFormPrivateMethods, VxeFormDefines, VxeTableConstructor, VxeTablePrivateMethods, VxeModalConstructor, VxeModalMethods, VxeDatePickerDefines } from '../../../types' +import type { VxeDatePickerConstructor, VxeDatePickerEmits, DatePickerInternalData, DatePickerReactData, VxeComponentStyleType, DatePickerMethods, VxeDatePickerPropTypes, DatePickerPrivateRef, VxeFormConstructor, VxeFormPrivateMethods, VxeFormDefines, ValueOf, VxeTableConstructor, VxeTablePrivateMethods, VxeModalConstructor, VxeDrawerConstructor, VxeModalMethods, VxeDrawerMethods, VxeDatePickerDefines } from '../../../types' export default defineComponent({ name: 'VxeDatePicker', props: { modelValue: [String, Number, Date] as PropType, - immediate: { type: Boolean as PropType, default: true }, + immediate: { + type: Boolean as PropType, + default: true + }, name: String as PropType, - type: { type: String as PropType, default: 'date' }, - clearable: { type: Boolean as PropType, default: () => getConfig().datePicker.clearable }, + type: { + type: String as PropType, + default: 'date' + }, + clearable: { + type: Boolean as PropType, + default: () => getConfig().datePicker.clearable + }, readonly: { type: Boolean as PropType, default: null @@ -25,30 +34,55 @@ export default defineComponent({ default: null }, placeholder: String as PropType, - maxlength: [String, Number] as PropType, - autocomplete: { type: String as PropType, default: 'off' }, + maxLength: [String, Number] as PropType, + autoComplete: { + type: String as PropType, + default: 'off' + }, align: String as PropType, form: String as PropType, className: String as PropType, - size: { type: String as PropType, default: () => getConfig().datePicker.size || getConfig().size }, + size: { + type: String as PropType, + default: () => getConfig().datePicker.size || getConfig().size + }, multiple: Boolean as PropType, // date、week、month、quarter、year - startDate: { type: [String, Number, Date] as PropType, default: () => getConfig().datePicker.startDate }, - endDate: { type: [String, Number, Date] as PropType, default: () => getConfig().datePicker.endDate }, + startDate: { + type: [String, Number, Date] as PropType, + default: () => getConfig().datePicker.startDate + }, + endDate: { + type: [String, Number, Date] as PropType, + default: () => getConfig().datePicker.endDate + }, minDate: [String, Number, Date] as PropType, maxDate: [String, Number, Date] as PropType, - // 已废弃 startWeek，被 startDay 替换 - startWeek: Number as PropType, - startDay: { type: [String, Number] as PropType, default: () => getConfig().datePicker.startDay }, + startDay: { + type: [String, Number] as PropType, + default: () => getConfig().datePicker.startDay + }, labelFormat: String as PropType, valueFormat: String as PropType, - editable: { type: Boolean as PropType, default: true }, - festivalMethod: { type: Function as PropType, default: () => getConfig().datePicker.festivalMethod }, - disabledMethod: { type: Function as PropType, default: () => getConfig().datePicker.disabledMethod }, + editable: { + type: Boolean as PropType, + default: true + }, + festivalMethod: { + type: Function as PropType, + default: () => getConfig().datePicker.festivalMethod + }, + disabledMethod: { + type: Function as PropType, + default: () => getConfig().datePicker.disabledMethod + }, // week - selectDay: { type: [String, Number] as PropType, default: () => getConfig().datePicker.selectDay }, + selectDay: { + type: [String, Number] as PropType, + default: () => getConfig().datePicker.selectDay + }, prefixIcon: String as PropType, suffixIcon: String as PropType, @@ -56,7 +90,14 @@ export default defineComponent({ transfer: { type: Boolean as PropType, default: null - } + }, + + // 已废弃 startWeek，被 startDay 替换 + startWeek: Number as PropType, + // 已废弃 + maxlength: [String, Number] as PropType, + // 已废弃 + autocomplete: String as PropType }, emits: [ 'update:modelValue', @@ -78,25 +119,22 @@ export default defineComponent({ setup (props, context) { const { slots, emit } = context - const $xeModal = inject('$xeModal', null) - const $xeTable = inject('$xeTable', null) - const $xeForm = inject('$xeForm', null) + const $xeModal = inject<(VxeModalConstructor & VxeModalMethods) | null>('$xeModal', null) + const $xeDrawer = inject<(VxeDrawerConstructor & VxeDrawerMethods) | null>('$xeDrawer', null) + const $xeTable = inject<(VxeTableConstructor & VxeTablePrivateMethods) | null>('$xeTable', null) + const $xeForm = inject<(VxeFormConstructor & VxeFormPrivateMethods) | null>('$xeForm', null) const formItemInfo = inject('xeFormItemInfo', null) const xID = XEUtils.uniqueId() const { computeSize } = useSize(props) - const yearSize = 12 - const monthSize = 20 - const quarterSize = 8 - const reactData = reactive({ initialized: false, panelIndex: 0, visiblePanel: false, isAniVisible: false, - panelStyle: null, + panelStyle: {}, panelPlacement: '', isActivated: false, inputValue: props.modelValue, @@ -108,6 +146,13 @@ export default defineComponent({ currentDate: null }) + const internalData: DatePickerInternalData = { + yearSize: 12, + monthSize: 20, + quarterSize: 8, + hpTimeout: undefined + } + const refElem = ref() as Ref const refInputTarget = ref() as Ref const refInputPanel = ref() as Ref @@ -124,19 +169,12 @@ export default defineComponent({ props, context, reactData, + internalData, getRefMaps: () => refMaps } as unknown as VxeDatePickerConstructor let datePickerMethods = {} as DatePickerMethods - const parseDate = (value: VxeDatePickerPropTypes.ModelValue, format: string) => { - const { type } = props - if (type === 'time') { - return toStringTimeDate(value) - } - return XEUtils.toStringDate(value, format) - } - const computeBtnTransfer = computed(() => { const { transfer } = props if (transfer === null) { @@ -144,7 +182,7 @@ export default defineComponent({ if (XEUtils.isBoolean(globalTransfer)) { return globalTransfer } - if ($xeTable || $xeModal || $xeForm) { + if ($xeTable || $xeModal || $xeDrawer || $xeForm) { return true } } @@ -209,7 +247,7 @@ export default defineComponent({ if (XEUtils.isValidDate(date)) { return date } - return null + return date }) } return [] @@ -232,7 +270,13 @@ export default defineComponent({ if (valueFormat) { return valueFormat } - return type === 'time' ? 'HH:mm:ss' : (type === 'datetime' ? 'yyyy-MM-dd HH:mm:ss' : 'yyyy-MM-dd') + if (type === 'time') { + return 'HH:mm:ss' + } + if (type === 'datetime') { + return 'yyyy-MM-dd HH:mm:ss' + } + return 'yyyy-MM-dd' }) const computeDateValue = computed(() => { @@ -293,6 +337,7 @@ export default defineComponent({ }) const computeYearList = computed(() => { + const { yearSize } = internalData const { selectMonth, currentDate } = reactData const years: VxeDatePickerDefines.DateYearItem[] = [] if (selectMonth && currentDate) { @@ -344,7 +389,7 @@ export default defineComponent({ }) const computeWeekDatas = computed(() => { - const weeks = [] + const weeks: number[] = [] const isDatePickerType = computeIsDatePickerType.value if (isDatePickerType) { let sWeek = computeFirstDayOfWeek.value @@ -390,6 +435,7 @@ export default defineComponent({ }) const computeQuarterList = computed(() => { + const { quarterSize } = internalData const { selectMonth, currentDate } = reactData const quarters: VxeDatePickerDefines.DateQuarterItem[] = [] if (selectMonth && currentDate) { @@ -421,6 +467,7 @@ export default defineComponent({ }) const computeMonthList = computed(() => { + const { monthSize } = internalData const { selectMonth, currentDate } = reactData const months: VxeDatePickerDefines.DateMonthItem[] = [] if (selectMonth && currentDate) { @@ -576,12 +623,20 @@ export default defineComponent({ return immediate }) + const parseDate = (value: VxeDatePickerPropTypes.ModelValue, format: string) => { + const { type } = props + if (type === 'time') { + return toStringTimeDate(value) + } + return XEUtils.toStringDate(value, format) + } + const triggerEvent = (evnt: Event & { type: 'input' | 'change' | 'keydown' | 'keyup' | 'wheel' | 'click' | 'focus' | 'blur' }) => { const { inputValue } = reactData datePickerMethods.dispatchEvent(evnt.type, { value: inputValue }, evnt) } - const emitModel = (value: string, evnt: Event | { type: string }) => { + const handleChange = (value: string, evnt: Event | { type: string }) => { reactData.inputValue = value emit('update:modelValue', value) if (XEUtils.toValueString(props.modelValue) !== value) { @@ -601,7 +656,7 @@ export default defineComponent({ reactData.inputValue = value if (!isDatePickerType) { if (inpImmediate) { - emitModel(value, evnt) + handleChange(value, evnt) } else { datePickerMethods.dispatchEvent('input', { value }, evnt) } @@ -632,12 +687,10 @@ export default defineComponent({ } } - let hidePanelTimeout: number - - const hidePanel = (): Promise => { - return new Promise(resolve => { + const hidePanel = () => { + return new Promise(resolve => { reactData.visiblePanel = false - hidePanelTimeout = window.setTimeout(() => { + internalData.hpTimeout = window.setTimeout(() => { reactData.isAniVisible = false resolve() }, 350) @@ -649,7 +702,7 @@ export default defineComponent({ if (isDatePickerType) { hidePanel() } - emitModel('', evnt) + handleChange('', evnt) datePickerMethods.dispatchEvent('clear', { value }, evnt) } @@ -736,9 +789,11 @@ export default defineComponent({ const sWeek = XEUtils.toNumber(props.selectDay) as VxeDatePickerPropTypes.SelectDay date = XEUtils.getWhatWeek(date, 0, sWeek, firstDayOfWeek) } else if (isDateTimeType) { - date.setHours(datetimePanelValue.getHours()) - date.setMinutes(datetimePanelValue.getMinutes()) - date.setSeconds(datetimePanelValue.getSeconds()) + if (datetimePanelValue) { + date.setHours(datetimePanelValue.getHours()) + date.setMinutes(datetimePanelValue.getMinutes()) + date.setSeconds(datetimePanelValue.getSeconds()) + } } const inpVal = XEUtils.toDateString(date, dateValueFormat, { firstDay: firstDayOfWeek }) dateCheckMonth(date) @@ -757,25 +812,27 @@ export default defineComponent({ } dateListValue.forEach(item => { if (item) { - item.setHours(datetimePanelValue.getHours()) - item.setMinutes(datetimePanelValue.getMinutes()) - item.setSeconds(datetimePanelValue.getSeconds()) + if (datetimePanelValue) { + item.setHours(datetimePanelValue.getHours()) + item.setMinutes(datetimePanelValue.getMinutes()) + item.setSeconds(datetimePanelValue.getSeconds()) + } datetimeRest.push(item) } }) - emitModel(datetimeRest.map(date => XEUtils.toDateString(date, dateValueFormat)).join(','), { type: 'update' }) + handleChange(datetimeRest.map(date => XEUtils.toDateString(date, dateValueFormat)).join(','), { type: 'update' }) } else { // 如果是日期类型 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' }) } } } @@ -792,7 +849,7 @@ export default defineComponent({ if (type === 'time') { inpDateVal = XEUtils.toDateString(inpDateVal, dateLabelFormat) if (inputValue !== inpDateVal) { - emitModel(inpDateVal, { type: 'check' }) + handleChange(inpDateVal, { type: 'check' }) } reactData.inputValue = inpDateVal } else { @@ -802,9 +859,11 @@ export default defineComponent({ const dateValue = computeDateValue.value if (inputValue !== XEUtils.toDateString(dateValue, dateLabelFormat) || inputValue !== XEUtils.toDateString(inpDateVal, dateLabelFormat)) { isChange = true - datetimePanelValue.setHours(inpDateVal.getHours()) - datetimePanelValue.setMinutes(inpDateVal.getMinutes()) - datetimePanelValue.setSeconds(inpDateVal.getSeconds()) + if (datetimePanelValue) { + datetimePanelValue.setHours(inpDateVal.getHours()) + datetimePanelValue.setMinutes(inpDateVal.getMinutes()) + datetimePanelValue.setSeconds(inpDateVal.getSeconds()) + } } } else { isChange = true @@ -818,7 +877,7 @@ export default defineComponent({ dateRevert() } } else { - emitModel('', { type: 'check' }) + handleChange('', { type: 'check' }) } } } @@ -827,7 +886,7 @@ export default defineComponent({ const { inputValue } = reactData const inpImmediate = computeInpImmediate.value if (!inpImmediate) { - emitModel(inputValue, evnt) + handleChange(inputValue, evnt) } afterCheckValue() if (!reactData.visiblePanel) { @@ -875,6 +934,7 @@ export default defineComponent({ const datePrevEvent = (evnt: Event) => { const { type } = props const { datePanelType, selectMonth } = reactData + const { yearSize } = internalData const isDisabledPrevDateBtn = computeIsDisabledPrevDateBtn.value if (!isDisabledPrevDateBtn) { if (type === 'year') { @@ -910,6 +970,7 @@ export default defineComponent({ const dateNextEvent = (evnt: Event) => { const { type } = props const { datePanelType, selectMonth } = reactData + const { yearSize } = internalData const isDisabledNextDateBtn = computeIsDisabledNextDateBtn.value if (!isDisabledNextDateBtn) { if (type === 'year') { @@ -1057,12 +1118,16 @@ export default defineComponent({ } const dateTimeChangeEvent = (evnt: Event) => { - reactData.datetimePanelValue = new Date(reactData.datetimePanelValue.getTime()) + const { datetimePanelValue } = reactData + reactData.datetimePanelValue = datetimePanelValue ? new Date(datetimePanelValue.getTime()) : new Date() updateTimePos(evnt.currentTarget as HTMLLIElement) } const dateHourEvent = (evnt: MouseEvent, item: VxeDatePickerDefines.DateHourMinuteSecondItem) => { - reactData.datetimePanelValue.setHours(item.value) + const { datetimePanelValue } = reactData + if (datetimePanelValue) { + datetimePanelValue.setHours(item.value) + } dateTimeChangeEvent(evnt) } @@ -1082,16 +1147,18 @@ export default defineComponent({ const datetimeRest: Date[] = [] dateListValue.forEach(item => { if (item) { - item.setHours(datetimePanelValue.getHours()) - item.setMinutes(datetimePanelValue.getMinutes()) - item.setSeconds(datetimePanelValue.getSeconds()) + if (datetimePanelValue) { + item.setHours(datetimePanelValue.getHours()) + item.setMinutes(datetimePanelValue.getMinutes()) + item.setSeconds(datetimePanelValue.getSeconds()) + } datetimeRest.push(item) } }) - emitModel(datetimeRest.map(date => XEUtils.toDateString(date, dateValueFormat)).join(','), { type: 'update' }) + handleChange(datetimeRest.map(date => XEUtils.toDateString(date, dateValueFormat)).join(','), { type: 'update' }) } else { // 如果是日期类型 - emitModel(dateMultipleValue.join(','), { type: 'update' }) + handleChange(dateMultipleValue.join(','), { type: 'update' }) } } else { dateChange(dateValue || reactData.currentDate) @@ -1101,12 +1168,18 @@ export default defineComponent({ } const dateMinuteEvent = (evnt: MouseEvent, item: VxeDatePickerDefines.DateHourMinuteSecondItem) => { - reactData.datetimePanelValue.setMinutes(item.value) + const { datetimePanelValue } = reactData + if (datetimePanelValue) { + datetimePanelValue.setMinutes(item.value) + } dateTimeChangeEvent(evnt) } const dateSecondEvent = (evnt: MouseEvent, item: VxeDatePickerDefines.DateHourMinuteSecondItem) => { - reactData.datetimePanelValue.setSeconds(item.value) + const { datetimePanelValue } = reactData + if (datetimePanelValue) { + datetimePanelValue.setSeconds(item.value) + } dateTimeChangeEvent(evnt) } @@ -1204,7 +1277,9 @@ export default defineComponent({ reactData.datetimePanelValue = reactData.datePanelValue || XEUtils.getWhatDay(Date.now(), 0, 'first') nextTick(() => { const timeBodyElem = refInputTimeBody.value - XEUtils.arrayEach(timeBodyElem.querySelectorAll('li.is--selected'), updateTimePos) + XEUtils.arrayEach(timeBodyElem.querySelectorAll('li.is--selected'), (elem) => { + updateTimePos(elem) + }) }) } } @@ -1299,7 +1374,10 @@ export default defineComponent({ if (!reactData.initialized) { reactData.initialized = true } - clearTimeout(hidePanelTimeout) + if (internalData.hpTimeout) { + clearTimeout(internalData.hpTimeout) + internalData.hpTimeout = undefined + } reactData.isActivated = true reactData.isAniVisible = true if (isDatePickerType) { @@ -1456,13 +1534,13 @@ export default defineComponent({ }] }, extraItem && extraItem.label ? [ - h('span', label), + h('span', `${label}`), h('span', { class: ['vxe-date-picker--date-label--extra', extraItem.important ? 'is-important' : '', extraItem.className], style: extraItem.style }, XEUtils.toValueString(extraItem.label)) ] - : label) + : `${label}`) ] const festivalLabel = festivalItem.label if (festivalLabel) { @@ -1966,10 +2044,12 @@ export default defineComponent({ ]) } + const dispatchEvent = (type: ValueOf, params: Record, evnt: Event | null) => { + emit(type, createEvent(evnt, { $datePicker: $xeDatePicker }, params)) + } + datePickerMethods = { - dispatchEvent (type, params, evnt) { - emit(type, createEvent(evnt, { $input: $xeDatePicker }, params)) - }, + dispatchEvent, focus () { const inputElem = refInputTarget.value @@ -2040,7 +2120,7 @@ export default defineComponent({ initValue() const renderVN = () => { - const { className, type, align, name, autocomplete } = props + const { className, type, align, name, autocomplete, autoComplete } = props const { inputValue, visiblePanel, isActivated } = reactData const vSize = computeSize.value const isDisabled = computeIsDisabled.value @@ -2084,7 +2164,7 @@ export default defineComponent({ placeholder: inpPlaceholder, readonly: inputReadonly, disabled: isDisabled, - autocomplete, + autocomplete: autoComplete || autocomplete, onKeydown: keydownEvent, onKeyup: keyupEvent, onWheel: wheelEvent, diff --git a/packages/drawer/src/drawer.ts b/packages/drawer/src/drawer.ts index 2e40c31b..f18e0cd2 100644 --- a/packages/drawer/src/drawer.ts +++ b/packages/drawer/src/drawer.ts @@ -1,4 +1,4 @@ -import { defineComponent, h, Teleport, ref, Ref, reactive, nextTick, watch, PropType, onMounted, onUnmounted, createCommentVNode } from 'vue' +import { defineComponent, h, Teleport, ref, Ref, reactive, nextTick, provide, watch, PropType, onMounted, onUnmounted, createCommentVNode } from 'vue' import XEUtils from 'xe-utils' import { useSize, getIcon, getConfig, getI18n, globalEvents, GLOBAL_EVENT_KEYS, createEvent } from '../../ui' import { getLastZIndex, nextZIndex, getFuncText } from '../../ui/src/utils' @@ -7,7 +7,7 @@ import { getSlotVNs } from '../../ui/src/vn' import VxeButtonComponent from '../../button/src/button' import VxeLoadingComponent from '../../loading/index' -import type { VxeDrawerPropTypes, DrawerReactData, VxeDrawerEmits, DrawerPrivateRef, DrawerMethods, DrawerPrivateMethods, VxeDrawerPrivateComputed, VxeDrawerConstructor, VxeDrawerPrivateMethods, VxeButtonInstance, DrawerEventTypes } from '../../../types' +import type { VxeDrawerPropTypes, DrawerReactData, VxeDrawerEmits, DrawerPrivateRef, DrawerMethods, DrawerPrivateMethods, VxeDrawerPrivateComputed, VxeDrawerConstructor, VxeDrawerPrivateMethods, VxeButtonInstance, DrawerEventTypes, ValueOf } from '../../../types' export const allActiveDrawers: VxeDrawerConstructor[] = [] @@ -17,34 +17,88 @@ export default defineComponent({ modelValue: Boolean as PropType, id: String as PropType, title: String as PropType, - loading: { type: Boolean as PropType, default: null }, + loading: { + type: Boolean as PropType, + default: null + }, className: String as PropType, position: { type: [String, Object] as PropType, default: () => getConfig().drawer.position }, - lockView: { type: Boolean as PropType, default: () => getConfig().drawer.lockView }, + lockView: { + type: Boolean as PropType, + default: () => getConfig().drawer.lockView + }, lockScroll: Boolean as PropType, - mask: { type: Boolean as PropType, default: () => getConfig().drawer.mask }, - maskClosable: { type: Boolean as PropType, default: () => getConfig().drawer.maskClosable }, - escClosable: { type: Boolean as PropType, default: () => getConfig().drawer.escClosable }, - showHeader: { type: Boolean as PropType, default: () => getConfig().drawer.showHeader }, - showFooter: { type: Boolean as PropType, default: () => getConfig().drawer.showFooter }, - showClose: { type: Boolean as PropType, default: () => getConfig().drawer.showClose }, + mask: { + type: Boolean as PropType, + default: () => getConfig().drawer.mask + }, + maskClosable: { + type: Boolean as PropType, + default: () => getConfig().drawer.maskClosable + }, + escClosable: { + type: Boolean as PropType, + default: () => getConfig().drawer.escClosable + }, + showHeader: { + type: Boolean as PropType, + default: () => getConfig().drawer.showHeader + }, + showFooter: { + type: Boolean as PropType, + default: () => getConfig().drawer.showFooter + }, + showClose: { + type: Boolean as PropType, + default: () => getConfig().drawer.showClose + }, content: [Number, String] as PropType, - showCancelButton: { type: Boolean as PropType, default: null }, - cancelButtonText: { type: String as PropType, default: () => getConfig().drawer.cancelButtonText }, - showConfirmButton: { type: Boolean as PropType, default: () => getConfig().drawer.showConfirmButton }, - confirmButtonText: { type: String as PropType, default: () => getConfig().drawer.confirmButtonText }, - destroyOnClose: { type: Boolean as PropType, default: () => getConfig().drawer.destroyOnClose }, - showTitleOverflow: { type: Boolean as PropType, default: () => getConfig().drawer.showTitleOverflow }, + showCancelButton: { + type: Boolean as PropType, + default: null + }, + cancelButtonText: { + type: String as PropType, + default: () => getConfig().drawer.cancelButtonText + }, + showConfirmButton: { + type: Boolean as PropType, + default: () => getConfig().drawer.showConfirmButton + }, + confirmButtonText: { + type: String as PropType, + default: () => getConfig().drawer.confirmButtonText + }, + destroyOnClose: { + type: Boolean as PropType, + default: () => getConfig().drawer.destroyOnClose + }, + showTitleOverflow: { + type: Boolean as PropType, + default: () => getConfig().drawer.showTitleOverflow + }, width: [Number, String] as PropType, height: [Number, String] as PropType, zIndex: Number as PropType, - transfer: { type: Boolean as PropType, default: () => getConfig().drawer.transfer }, - padding: { type: Boolean as PropType, default: () => getConfig().drawer.padding }, - size: { type: String as PropType, default: () => getConfig().drawer.size || getConfig().size }, - beforeHideMethod: { type: Function as PropType, default: () => getConfig().drawer.beforeHideMethod }, + transfer: { + type: Boolean as PropType, + default: () => getConfig().drawer.transfer + }, + padding: { + type: Boolean as PropType, + default: () => getConfig().drawer.padding + }, + size: { + type: String as PropType, + default: () => getConfig().drawer.size || getConfig().size + }, + beforeHideMethod: { + type: Function as PropType, + default: () => getConfig().drawer.beforeHideMethod + }, slots: Object as PropType }, emits: [ @@ -72,8 +126,7 @@ export default defineComponent({ initialized: false, visible: false, contentVisible: false, - drawerZIndex: 0, - firstOpen: true + drawerZIndex: 0 }) const refMaps: DrawerPrivateRef = { @@ -118,11 +171,6 @@ export default defineComponent({ } } - const updatePosition = () => { - return nextTick().then(() => { - }) - } - const closeDrawer = (type: DrawerEventTypes) => { const { beforeHideMethod } = props const { visible } = reactData @@ -132,11 +180,11 @@ export default defineComponent({ if (!XEUtils.isError(rest)) { reactData.contentVisible = false XEUtils.remove(allActiveDrawers, item => item === $xeDrawer) - drawerMethods.dispatchEvent('before-hide', params, null) + dispatchEvent('before-hide', params, null) setTimeout(() => { reactData.visible = false emit('update:modelValue', false) - drawerMethods.dispatchEvent('hide', params, null) + dispatchEvent('hide', params, null) }, 200) } }).catch(e => e) @@ -146,19 +194,19 @@ export default defineComponent({ const closeEvent = (evnt: Event) => { const type = 'close' - drawerMethods.dispatchEvent(type, { type }, evnt) + dispatchEvent(type, { type }, evnt) closeDrawer(type) } const confirmEvent = (evnt: Event) => { const type = 'confirm' - drawerMethods.dispatchEvent(type, { type }, evnt) + dispatchEvent(type, { type }, evnt) closeDrawer(type) } const cancelEvent = (evnt: Event) => { const type = 'cancel' - drawerMethods.dispatchEvent(type, { type }, evnt) + dispatchEvent(type, { type }, evnt) closeDrawer(type) } @@ -188,28 +236,19 @@ export default defineComponent({ const type = '' const params = { type } emit('update:modelValue', true) - drawerMethods.dispatchEvent('show', params, null) + dispatchEvent('show', params, null) }) }, 10) - nextTick(() => { - const { firstOpen } = reactData - if (firstOpen) { - updatePosition().then(() => { - setTimeout(() => updatePosition(), 20) - }) - } - if (firstOpen) { - reactData.firstOpen = false - } - }) } return nextTick() } + const dispatchEvent = (type: ValueOf, params: Record, evnt: Event | null) => { + emit(type, createEvent(evnt, { $drawer: $xeDrawer }, params)) + } + const drawerMethods: DrawerMethods = { - dispatchEvent (type, params, evnt) { - emit(type, createEvent(evnt, { $drawer: $xeDrawer }, params)) - }, + dispatchEvent, open: openDrawer, close () { return closeDrawer('close') @@ -232,7 +271,7 @@ export default defineComponent({ // 多个时，只关掉最上层的窗口 if (lastDrawer) { setTimeout(() => { - if (lastDrawer === $xeDrawer && (lastDrawer as VxeDrawerConstructor).props.escClosable) { + if (lastDrawer === $xeDrawer && lastDrawer.props.escClosable) { closeDrawer('exit') } }, 10) @@ -426,8 +465,6 @@ export default defineComponent({ ]) } - $xeDrawer.renderVN = renderVN - watch(() => props.width, recalculate) watch(() => props.height, recalculate) @@ -455,6 +492,10 @@ export default defineComponent({ globalEvents.off($xeDrawer, 'keydown') }) + provide('$xeDrawer', '$xeDrawer') + + $xeDrawer.renderVN = renderVN + return $xeDrawer }, render () { diff --git a/packages/form/render/index.ts b/packages/form/render/index.ts index 5edc172d..6f279acd 100644 --- a/packages/form/render/index.ts +++ b/packages/form/render/index.ts @@ -8,8 +8,6 @@ import type { VxeButtonComponent } from '../../../types/all' const componentDefaultModelProp = 'modelValue' -const defaultCompProps = { transfer: true } - /** * 已废弃 * @deprecated @@ -39,7 +37,7 @@ function getNativeAttrs (renderOpts: any) { } function getComponentFormItemProps (renderOpts: any, params: any, value: any, defaultProps?: any) { - return XEUtils.assign({}, defaultCompProps, defaultProps, renderOpts.props, { [componentDefaultModelProp]: value }) + return XEUtils.assign({}, defaultProps, renderOpts.props, { [componentDefaultModelProp]: value }) } /** diff --git a/packages/form/src/form-config-item.ts b/packages/form/src/form-config-item.ts index 4edb6342..eb1330ef 100644 --- a/packages/form/src/form-config-item.ts +++ b/packages/form/src/form-config-item.ts @@ -19,11 +19,12 @@ const VxeFormConfigItem = defineComponent({ provide('xeFormItemInfo', xeformiteminfo) const renderVN = () => { - const { reactData } = $xeForm - const { data, rules, readonly, disabled, span: allSpan, align: allAlign, titleBold: allTitleBold, titleAlign: allTitleAlign, titleWidth: allTitleWidth, titleColon: allTitleColon, titleAsterisk: allTitleAsterisk, titleOverflow: allTitleOverflow, vertical: allVertical, padding: allPadding } = $xeForm.props + const formProps = $xeForm.props + const formReactData = $xeForm.reactData + const { data, rules, readonly, disabled, span: allSpan, align: allAlign, titleBold: allTitleBold, titleAlign: allTitleAlign, titleWidth: allTitleWidth, titleColon: allTitleColon, titleAsterisk: allTitleAsterisk, titleOverflow: allTitleOverflow, vertical: allVertical, padding: allPadding } = formProps const { computeValidOpts } = $xeForm.getComputeMaps() const item = props.itemConfig as VxeFormDefines.ItemInfo - const { collapseAll } = reactData + const { collapseAll } = formReactData const validOpts = computeValidOpts.value const { slots, title, visible, folding, field, collapseNode, itemRender, showError, errRule, className, titleOverflow, vertical, padding, children, showTitle, contentClassName, contentStyle, titleClassName, titleStyle } = item const compConf = isEnableConf(itemRender) ? renderer.get(itemRender.name) : null diff --git a/packages/form/src/form-gather.ts b/packages/form/src/form-gather.ts index f8343e85..7d0d7eee 100644 --- a/packages/form/src/form-gather.ts +++ b/packages/form/src/form-gather.ts @@ -11,7 +11,7 @@ export default defineComponent({ setup (props, { slots }) { const refElem = ref() as Ref const $xeForm = inject('$xeForm', {} as VxeFormConstructor & VxeFormPrivateMethods) - const parentFormGather = inject('$xeFormGather', null) + const $xeParentFormGather = inject('$xeFormGather', null) const formItem = reactive(createItem($xeForm, props)) formItem.children = [] @@ -21,7 +21,8 @@ export default defineComponent({ watchItem(props, formItem) onMounted(() => { - assembleItem($xeForm, refElem.value, formItem, parentFormGather) + const elem = refElem.value + assembleItem($xeForm, elem, formItem, $xeParentFormGather) }) onUnmounted(() => { @@ -32,9 +33,10 @@ export default defineComponent({ const { className, field } = props const span = props.span || ($xeForm ? $xeForm.props.span : null) const defaultSlot = slots.default + const params = { $form: $xeForm, data: $xeForm ? $xeForm.props.data : {}, item: formItem as any, field: field as string, property: field as string } return h('div', { ref: refElem, - class: ['vxe-form--gather vxe-form--item-row', formItem.id, span ? `vxe-form--item-col_${span} is--span` : '', className ? (XEUtils.isFunction(className) ? className({ $form: $xeForm, data: $xeForm ? $xeForm.props.data : {}, item: formItem as any, field: field as string, property: field as string }) : className) : ''] + class: ['vxe-form--gather vxe-form--item-row', formItem.id, span ? `vxe-form--item-col_${span} is--span` : '', className ? (XEUtils.isFunction(className) ? className(params) : className) : ''] }, defaultSlot ? defaultSlot({}) : []) } diff --git a/packages/form/src/form-item.ts b/packages/form/src/form-item.ts index c25e2c73..3e91189d 100644 --- a/packages/form/src/form-item.ts +++ b/packages/form/src/form-item.ts @@ -58,7 +58,10 @@ export const formItemProps = { titleSuffix: Object as PropType, resetValue: { default: null }, visibleMethod: Function as PropType, - visible: { type: Boolean as PropType, default: null }, + visible: { + type: Boolean as PropType, + default: null + }, folding: Boolean as PropType, collapseNode: Boolean as PropType, itemRender: Object as PropType, @@ -71,7 +74,7 @@ export default defineComponent({ setup (props, { slots }) { const refElem = ref() as Ref const $xeForm = inject('$xeForm', {} as VxeFormConstructor & VxeFormPrivateMethods) - const formGather = inject('$xeFormGather', null) + const $xeFormGather = inject('$xeFormGather', null) const formItem = reactive(createItem($xeForm, props)) formItem.slots = slots @@ -81,7 +84,8 @@ export default defineComponent({ watchItem(props, formItem) onMounted(() => { - assembleItem($xeForm, refElem.value, formItem, formGather) + const elem = refElem.value + assembleItem($xeForm, elem, formItem, $xeFormGather) }) onUnmounted(() => { @@ -89,9 +93,10 @@ export default defineComponent({ }) const renderItem = ($xeForm: VxeFormConstructor & VxeFormPrivateMethods, item: VxeFormDefines.ItemInfo) => { - const { props, reactData } = $xeForm - const { data, rules, readonly, disabled, titleBold: allTitleBold, titleAlign: allTitleAlign, titleWidth: allTitleWidth, titleColon: allTitleColon, titleAsterisk: allTitleAsterisk, titleOverflow: allTitleOverflow, vertical: allVertical, padding: allPadding } = props - const { collapseAll } = reactData + const formProps = $xeForm.props + const formReactData = $xeForm.reactData + const { data, rules, readonly, disabled, titleBold: allTitleBold, titleAlign: allTitleAlign, titleWidth: allTitleWidth, titleColon: allTitleColon, titleAsterisk: allTitleAsterisk, titleOverflow: allTitleOverflow, vertical: allVertical, padding: allPadding } = formProps + const { collapseAll } = formReactData const { computeValidOpts } = $xeForm.getComputeMaps() const validOpts = computeValidOpts.value const { slots, title, visible, folding, field, collapseNode, itemRender, showError, errRule, className, titleOverflow, vertical, padding, showTitle, contentClassName, contentStyle, titleClassName, titleStyle } = item @@ -104,8 +109,8 @@ export default defineComponent({ const itemTitleStyle = compConf ? (compConf.formItemTitleStyle || compConf.itemTitleStyle) : null const defaultSlot = slots ? slots.default : null const titleSlot = slots ? slots.title : null - const span = item.span || props.span - const align = item.align || props.align + const span = item.span || formProps.span + const align = item.align || formProps.align const itemPadding = XEUtils.eqNull(padding) ? allPadding : padding const itemVertical = XEUtils.eqNull(vertical) ? allVertical : vertical const titleBold = XEUtils.eqNull(item.titleBold) ? allTitleBold : item.titleBold @@ -243,8 +248,8 @@ export default defineComponent({ } const renderVN = () => { - const formProps = $xeForm ? $xeForm.props : null - return formProps && formProps.customLayout + const customLayout = $xeForm ? $xeForm.props.customLayout : false + return customLayout ? renderItem($xeForm, formItem as unknown as VxeFormDefines.ItemInfo) : h('div', { ref: refElem diff --git a/packages/form/src/form.ts b/packages/form/src/form.ts index 4afefa69..cb81745a 100644 --- a/packages/form/src/form.ts +++ b/packages/form/src/form.ts @@ -71,7 +71,10 @@ function getResetValue (value: any, resetValue: any) { export default defineComponent({ name: 'VxeForm', props: { - collapseStatus: { type: Boolean as PropType, default: true }, + collapseStatus: { + type: Boolean as PropType, + default: true + }, loading: Boolean as PropType, data: Object as PropType, size: { @@ -156,7 +159,8 @@ export default defineComponent({ }) const internalData = reactive({ - tooltipTimeout: null, + meTimeout: undefined, + stTimeout: undefined, tooltipStore: { item: null, visible: false @@ -455,15 +459,13 @@ export default defineComponent({ }) } - let showErrTime: number - const beginValidate = (itemList: VxeFormDefines.ItemInfo[], type?: string, callback?: any): Promise => { const { data, rules: formRules } = props const validOpts = computeValidOpts.value const validRest: any = {} const validFields: string[] = [] const itemValids: any[] = [] - clearTimeout(showErrTime) + clearTimeout(internalData.meTimeout) if (data && formRules) { itemList.forEach((item) => { const { field } = item @@ -490,7 +492,7 @@ export default defineComponent({ } }).catch(() => { return new Promise((resolve) => { - showErrTime = window.setTimeout(() => { + internalData.meTimeout = window.setTimeout(() => { itemList.forEach((item) => { if (item.errRule) { item.showError = true @@ -585,7 +587,7 @@ export default defineComponent({ const overflowElem = (evnt.currentTarget as HTMLDivElement).children[0] const content = (overflowElem.textContent || '').trim() const isCellOverflow = overflowElem.scrollWidth > overflowElem.clientWidth - clearTimeout(internalData.tooltipTimeout) + clearTimeout(internalData.stTimeout) if (tooltipStore.item !== item) { closeTooltip() } @@ -607,7 +609,7 @@ export default defineComponent({ $tooltip.setActived(false) } if (tooltipOpts.enterable) { - internalData.tooltipTimeout = setTimeout(() => { + internalData.stTimeout = setTimeout(() => { $tooltip = refTooltip.value if ($tooltip && !$tooltip.isActived()) { closeTooltip() @@ -719,8 +721,6 @@ export default defineComponent({ ]) } - $xeForm.renderVN = renderVN - const staticItemFlag = ref(0) watch(() => reactData.staticItems.length, () => { staticItemFlag.value++ @@ -773,6 +773,8 @@ export default defineComponent({ provide('$xeFormGather', null) provide('$xeFormItem', null) + $xeForm.renderVN = renderVN + return $xeForm }, render () { diff --git a/packages/form/src/render.ts b/packages/form/src/render.ts index ee905084..9393f0b2 100644 --- a/packages/form/src/render.ts +++ b/packages/form/src/render.ts @@ -30,7 +30,8 @@ function renderSuffixIcon (titleSuffix: VxeFormItemPropTypes.TitleSuffix) { } export function renderTitle ($xeForm: VxeFormConstructor & VxeFormPrivateMethods, item: VxeFormDefines.ItemInfo) { - const { data, readonly, disabled } = $xeForm.props + const formProps = $xeForm.props + const { data, readonly, disabled } = formProps const { computeTooltipOpts } = $xeForm.getComputeMaps() const { slots, field, itemRender, titlePrefix, titleSuffix } = item const tooltipOpts = computeTooltipOpts.value diff --git a/packages/form/src/util.ts b/packages/form/src/util.ts index 33b90f28..bb5e9927 100644 --- a/packages/form/src/util.ts +++ b/packages/form/src/util.ts @@ -45,7 +45,8 @@ export function isActiveItem ($xeForm: VxeFormConstructor, formItem: VxeFormDefi if (!visibleMethod) { return true } - const { data } = $xeForm.props + const formProps = $xeForm.props + const { data } = formProps return visibleMethod({ data, field, property: field, item: formItem, $form: $xeForm, $grid: $xeForm.xegrid }) } diff --git a/packages/icon-picker/src/icon-picker.ts b/packages/icon-picker/src/icon-picker.ts index ce6b11bf..965b4761 100644 --- a/packages/icon-picker/src/icon-picker.ts +++ b/packages/icon-picker/src/icon-picker.ts @@ -4,7 +4,7 @@ import { getConfig, getIcon, getI18n, globalEvents, createEvent, useSize, GLOBAL import { getEventTargetNode, getAbsolutePos } from '../../ui/src/dom' import { getLastZIndex, nextZIndex, getFuncText } from '../../ui/src/utils' -import type { VxeIconPickerPropTypes, VxeIconPickerConstructor, IconPickerReactData, VxeIconPickerEmits, IconPickerMethods, IconPickerPrivateRef, VxeIconPickerMethods, VxeTableConstructor, VxeTablePrivateMethods, VxeIconPickerDefines, VxeFormDefines, VxeFormConstructor, VxeFormPrivateMethods, VxeModalConstructor, VxeModalMethods } from '../../../types' +import type { VxeIconPickerPropTypes, VxeIconPickerConstructor, IconPickerInternalData, ValueOf, IconPickerReactData, VxeIconPickerEmits, IconPickerMethods, IconPickerPrivateRef, VxeIconPickerMethods, VxeTableConstructor, VxeTablePrivateMethods, VxeIconPickerDefines, VxeDrawerConstructor, VxeDrawerMethods, VxeFormDefines, VxeFormConstructor, VxeFormPrivateMethods, VxeModalConstructor, VxeModalMethods } from '../../../types' export default defineComponent({ name: 'VxeIconPicker', @@ -12,7 +12,10 @@ export default defineComponent({ modelValue: String as PropType, placeholder: String as PropType, clearable: Boolean as PropType, - size: { type: String as PropType, default: () => getConfig().iconPicker.size || getConfig().size }, + size: { + type: String as PropType, + default: () => getConfig().iconPicker.size || getConfig().size + }, className: [String, Function] as PropType, popupClassName: [String, Function] as PropType, showIconTitle: { @@ -43,9 +46,10 @@ export default defineComponent({ setup (props, context) { const { emit } = context - const $xeModal = inject('$xeModal', null) - const $xeTable = inject('$xeTable', null) - const $xeForm = inject('$xeForm', null) + const $xeModal = inject<(VxeModalConstructor & VxeModalMethods) | null>('$xeModal', null) + const $xeDrawer = inject<(VxeDrawerConstructor & VxeDrawerMethods) | null>('$xeDrawer', null) + const $xeTable = inject<(VxeTableConstructor & VxeTablePrivateMethods) | null>('$xeTable', null) + const $xeForm = inject<(VxeFormConstructor & VxeFormPrivateMethods) | null>('$xeForm', null) const formItemInfo = inject('xeFormItemInfo', null) const xID = XEUtils.uniqueId() @@ -54,7 +58,7 @@ export default defineComponent({ const reactData = reactive({ initialized: false, - selectIcon: '', + selectIcon: `${props.modelValue || ''}`, panelIndex: 0, panelStyle: {}, panelPlacement: null, @@ -63,6 +67,10 @@ export default defineComponent({ isActivated: false }) + const internalData: IconPickerInternalData = { + hpTimeout: undefined + } + const refElem = ref() as Ref const refInput = ref() as Ref const refOptionPanel = ref() as Ref @@ -110,7 +118,7 @@ export default defineComponent({ if (XEUtils.isBoolean(globalTransfer)) { return globalTransfer } - if ($xeTable || $xeModal || $xeForm) { + if ($xeTable || $xeModal || $xeDrawer || $xeForm) { return true } } @@ -224,12 +232,14 @@ export default defineComponent({ }) } - let hidePanelTimeout: number - const showOptionPanel = () => { + const { hpTimeout } = internalData const isDisabled = computeIsDisabled.value if (!isDisabled) { - clearTimeout(hidePanelTimeout) + if (hpTimeout) { + clearTimeout(hpTimeout) + internalData.hpTimeout = undefined + } if (!reactData.initialized) { reactData.initialized = true } @@ -245,7 +255,7 @@ export default defineComponent({ const hideOptionPanel = () => { reactData.visiblePanel = false - hidePanelTimeout = window.setTimeout(() => { + internalData.hpTimeout = window.setTimeout(() => { reactData.isAniVisible = false }, 350) } @@ -376,10 +386,12 @@ export default defineComponent({ hideOptionPanel() } + const dispatchEvent = (type: ValueOf, params: Record, evnt: Event | null) => { + emit(type, createEvent(evnt, { $iconPicker: $xeIconPicker }, params)) + } + iconPickerMethods = { - dispatchEvent (type, params, evnt) { - emit(type, createEvent(evnt, { $iconPicker: $xeIconPicker }, params)) - }, + dispatchEvent, isPanelVisible () { return reactData.visiblePanel }, @@ -549,15 +561,15 @@ export default defineComponent({ initialized ? h('div', { class: 'vxe-ico-picker--panel-wrapper' - }, renderIconWrapper()) + }, [ + renderIconWrapper() + ]) : createCommentVNode() ]) ]) ]) } - $xeIconPicker.renderVN = renderVN - watch(() => props.modelValue, (val) => { reactData.selectIcon = `${val || ''}` }) @@ -578,6 +590,8 @@ export default defineComponent({ provide('$xeIconPicker', $xeIconPicker) + $xeIconPicker.renderVN = renderVN + return $xeIconPicker }, render () { diff --git a/packages/icon/src/icon.ts b/packages/icon/src/icon.ts index bfcb5102..187fd60d 100644 --- a/packages/icon/src/icon.ts +++ b/packages/icon/src/icon.ts @@ -67,5 +67,8 @@ export default defineComponent({ $xeIcon.renderVN = renderVN return $xeIcon + }, + render () { + return this.renderVN() } }) diff --git a/packages/image/src/group.ts b/packages/image/src/group.ts index 95bed6d2..36f48b7d 100644 --- a/packages/image/src/group.ts +++ b/packages/image/src/group.ts @@ -120,6 +120,9 @@ export default defineComponent({ provide('$xeImageGroup', $xeImageGroup) - return renderVN + return $xeImageGroup + }, + render () { + return this.renderVN() } }) diff --git a/packages/image/src/preview.ts b/packages/image/src/preview.ts index 661114ef..4ddf7bf0 100644 --- a/packages/image/src/preview.ts +++ b/packages/image/src/preview.ts @@ -613,8 +613,6 @@ export default defineComponent({ ]) } - $xeImagePreview.renderVN = renderVN - watch(() => props.modelValue, val => { reactData.activeIndex = val resetStyle() @@ -637,6 +635,8 @@ export default defineComponent({ provide('$xeImagePreview', $xeImagePreview) + $xeImagePreview.renderVN = renderVN + return renderVN } }) diff --git a/packages/input/src/input.ts b/packages/input/src/input.ts index c1bf2735..70f55c68 100644 --- a/packages/input/src/input.ts +++ b/packages/input/src/input.ts @@ -7,16 +7,25 @@ import { toStringTimeDate, getDateQuarter } from '../../date-picker/src/util' import { handleNumber, toFloatValueFixed } from '../../number-input/src/util' import { getSlotVNs } from '../..//ui/src/vn' -import type { VxeInputConstructor, VxeInputEmits, InputReactData, InputMethods, VxeInputPropTypes, InputPrivateRef, VxeFormConstructor, VxeFormPrivateMethods, VxeFormDefines, VxeTableConstructor, VxeTablePrivateMethods, VxeModalConstructor, VxeModalMethods, VxeDatePickerDefines } from '../../../types' +import type { VxeInputConstructor, VxeInputEmits, InputReactData, InputMethods, ValueOf, InputInternalData, VxeInputPropTypes, InputPrivateRef, VxeFormConstructor, VxeFormPrivateMethods, VxeFormDefines, VxeTableConstructor, VxeTablePrivateMethods, VxeDrawerConstructor, VxeDrawerMethods, VxeModalConstructor, VxeModalMethods, VxeDatePickerDefines } from '../../../types' export default defineComponent({ name: 'VxeInput', props: { modelValue: [String, Number, Date] as PropType, - immediate: { type: Boolean as PropType, default: true }, + immediate: { + type: Boolean as PropType, + default: true + }, name: String as PropType, - type: { type: String as PropType, default: 'text' }, - clearable: { type: Boolean as PropType, default: () => getConfig().input.clearable }, + type: { + type: String as PropType, + default: 'text' + }, + clearable: { + type: Boolean as PropType, + default: () => getConfig().input.clearable + }, readonly: { type: Boolean as PropType, default: null @@ -27,11 +36,17 @@ export default defineComponent({ }, placeholder: String as PropType, maxLength: [String, Number] as PropType, - autoComplete: { type: String as PropType, default: 'off' }, + autoComplete: { + type: String as PropType, + default: 'off' + }, align: String as PropType, form: String as PropType, className: String as PropType, - size: { type: String as PropType, default: () => getConfig().input.size || getConfig().size }, + size: { + type: String as PropType, + default: () => getConfig().input.size || getConfig().size + }, multiple: Boolean as PropType, // text @@ -39,33 +54,69 @@ export default defineComponent({ countMethod: Function as PropType, // number、integer、float - min: { type: [String, Number] as PropType, default: null }, - max: { type: [String, Number] as PropType, default: null }, + min: { + type: [String, Number] as PropType, + default: null + }, + max: { + type: [String, Number] as PropType, + default: null + }, step: [String, Number] as PropType, - exponential: { type: Boolean as PropType, default: () => getConfig().input.exponential }, + exponential: { + type: Boolean as PropType, + default: () => getConfig().input.exponential + }, // number、integer、float、password - controls: { type: Boolean as PropType, default: () => getConfig().input.controls }, + controls: { + type: Boolean as PropType, + default: () => getConfig().input.controls + }, // float - digits: { type: [String, Number] as PropType, default: () => getConfig().input.digits }, + digits: { + type: [String, Number] as PropType, + default: () => getConfig().input.digits + }, // date、week、month、quarter、year - startDate: { type: [String, Number, Date] as PropType, default: () => getConfig().input.startDate }, - endDate: { type: [String, Number, Date] as PropType, default: () => getConfig().input.endDate }, + startDate: { + type: [String, Number, Date] as PropType, + default: () => getConfig().input.startDate + }, + endDate: { + type: [String, Number, Date] as PropType, + default: () => getConfig().input.endDate + }, minDate: [String, Number, Date] as PropType, maxDate: [String, Number, Date] as PropType, // 已废弃 startWeek，被 startDay 替换 startWeek: Number as PropType, - startDay: { type: [String, Number] as PropType, default: () => getConfig().input.startDay }, + startDay: { + type: [String, Number] as PropType, + default: () => getConfig().input.startDay + }, labelFormat: String as PropType, valueFormat: String as PropType, - editable: { type: Boolean as PropType, default: true }, - festivalMethod: { type: Function as PropType, default: () => getConfig().input.festivalMethod }, - disabledMethod: { type: Function as PropType, default: () => getConfig().input.disabledMethod }, + editable: { + type: Boolean as PropType, + default: true + }, + festivalMethod: { + type: Function as PropType, + default: () => getConfig().input.festivalMethod + }, + disabledMethod: { + type: Function as PropType, + default: () => getConfig().input.disabledMethod + }, // week - selectDay: { type: [String, Number] as PropType, default: () => getConfig().input.selectDay }, + selectDay: { + type: [String, Number] as PropType, + default: () => getConfig().input.selectDay + }, prefixIcon: String as PropType, suffixIcon: String as PropType, @@ -104,26 +155,23 @@ export default defineComponent({ setup (props, context) { const { slots, emit } = context - const $xeModal = inject('$xeModal', null) - const $xeTable = inject('$xeTable', null) - const $xeForm = inject('$xeForm', null) + const $xeModal = inject<(VxeModalConstructor & VxeModalMethods) | null>('$xeModal', null) + const $xeDrawer = inject<(VxeDrawerConstructor & VxeDrawerMethods) | null>('$xeDrawer', null) + const $xeTable = inject<(VxeTableConstructor & VxeTablePrivateMethods) | null>('$xeTable', null) + const $xeForm = inject<(VxeFormConstructor & VxeFormPrivateMethods)| null>('$xeForm', null) const formItemInfo = inject('xeFormItemInfo', null) const xID = XEUtils.uniqueId() const { computeSize } = useSize(props) - const yearSize = 12 - const monthSize = 20 - const quarterSize = 8 - const reactData = reactive({ initialized: false, panelIndex: 0, showPwd: false, visiblePanel: false, isAniVisible: false, - panelStyle: null, + panelStyle: {}, panelPlacement: '', isActivated: false, inputValue: props.modelValue, @@ -135,6 +183,14 @@ export default defineComponent({ currentDate: null }) + const internalData: InputInternalData = { + yearSize: 12, + monthSize: 20, + quarterSize: 8, + hpTimeout: undefined, + dnTimeout: undefined + } + const refElem = ref() as Ref const refInputTarget = ref() as Ref const refInputPanel = ref() as Ref @@ -151,6 +207,7 @@ export default defineComponent({ props, context, reactData, + internalData, getRefMaps: () => refMaps } as unknown as VxeInputConstructor @@ -171,7 +228,7 @@ export default defineComponent({ if (XEUtils.isBoolean(globalTransfer)) { return globalTransfer } - if ($xeTable || $xeModal || $xeForm) { + if ($xeTable || $xeModal || $xeDrawer || $xeForm) { return true } } @@ -372,11 +429,12 @@ export default defineComponent({ if (isDatePickerType) { return labelFormat || dateValueFormat || getI18n(`vxe.input.date.labelFormat.${props.type}`) } - return null + return '' }) const computeYearList = computed(() => { const { selectMonth, currentDate } = reactData + const { yearSize } = internalData const years: VxeDatePickerDefines.DateYearItem[] = [] if (selectMonth && currentDate) { const currFullYear = currentDate.getFullYear() @@ -474,6 +532,7 @@ export default defineComponent({ const computeQuarterList = computed(() => { const { selectMonth, currentDate } = reactData + const { quarterSize } = internalData const quarters: VxeDatePickerDefines.DateQuarterItem[] = [] if (selectMonth && currentDate) { const currFullYear = currentDate.getFullYear() @@ -505,6 +564,7 @@ export default defineComponent({ const computeMonthList = computed(() => { const { selectMonth, currentDate } = reactData + const { monthSize } = internalData const months: VxeDatePickerDefines.DateMonthItem[] = [] if (selectMonth && currentDate) { const currFullYear = currentDate.getFullYear() @@ -662,13 +722,6 @@ export default defineComponent({ return getI18n('vxe.base.pleaseInput') }) - const computeInpMaxlength = computed(() => { - const isNumType = computeIsNumType.value - const inpMaxLength = computeInpMaxLength.value - // 数值最大长度限制 16 位，包含小数 - return isNumType && !XEUtils.toNumber(inpMaxLength) ? 16 : inpMaxLength - }) - const computeInpImmediate = computed(() => { const { type, immediate } = props return immediate || !(type === 'text' || type === 'number' || type === 'integer' || type === 'float') @@ -710,13 +763,13 @@ export default defineComponent({ const getNumberValue = (val: any) => { const { type, exponential } = props - const inpMaxlength = computeInpMaxlength.value + const inpMaxLength = computeInpMaxLength.value const digitsValue = computeDigitsValue.value const restVal = (type === 'float' ? toFloatValueFixed(val, digitsValue) : XEUtils.toValueString(val)) if (exponential && (val === restVal || XEUtils.toValueString(val).toLowerCase() === XEUtils.toNumber(restVal).toExponential())) { return val } - return restVal.slice(0, inpMaxlength) + return restVal.slice(0, inpMaxLength) } const triggerEvent = (evnt: Event & { type: 'input' | 'change' | 'keydown' | 'keyup' | 'wheel' | 'click' | 'focus' | 'blur' }) => { @@ -724,7 +777,7 @@ export default defineComponent({ inputMethods.dispatchEvent(evnt.type, { value: inputValue }, evnt) } - const emitModel = (value: string, evnt: Event | { type: string }) => { + const handleChange = (value: string, evnt: Event | { type: string }) => { reactData.inputValue = value emit('update:modelValue', value) inputMethods.dispatchEvent('input', { value }, evnt as any) @@ -743,7 +796,7 @@ export default defineComponent({ reactData.inputValue = value if (!isDatePickerType) { if (inpImmediate) { - emitModel(value, evnt) + handleChange(value, evnt) } else { inputMethods.dispatchEvent('input', { value }, evnt) } @@ -780,12 +833,10 @@ export default defineComponent({ } } - let hidePanelTimeout: number - const hidePanel = (): Promise => { return new Promise(resolve => { reactData.visiblePanel = false - hidePanelTimeout = window.setTimeout(() => { + internalData.hpTimeout = window.setTimeout(() => { reactData.isAniVisible = false resolve() }, 350) @@ -802,7 +853,7 @@ export default defineComponent({ if (isNumType || ['text', 'search', 'password'].indexOf(type) > -1) { focus() } - emitModel('', evnt) + handleChange('', evnt) inputMethods.dispatchEvent('clear', { value }, evnt) } @@ -872,7 +923,7 @@ export default defineComponent({ if (inputValue) { const validValue = toFloatValueFixed(inputValue, digitsValue) if (inputValue !== validValue) { - emitModel(validValue, { type: 'init' }) + handleChange(validValue, { type: 'init' }) } } } @@ -934,19 +985,19 @@ export default defineComponent({ datetimeRest.push(item) } }) - emitModel(datetimeRest.map(date => XEUtils.toDateString(date, dateValueFormat)).join(','), { type: 'update' }) + handleChange(datetimeRest.map(date => XEUtils.toDateString(date, dateValueFormat)).join(','), { type: 'update' }) } else { // 如果是日期类型 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' }) } } } @@ -973,7 +1024,7 @@ export default defineComponent({ inpNumVal = inpStringVal } } - emitModel(getNumberValue(inpNumVal), { type: 'check' }) + handleChange(getNumberValue(inpNumVal), { type: 'check' }) } } else if (isDatePickerType) { if (inputValue) { @@ -982,7 +1033,7 @@ export default defineComponent({ if (type === 'time') { inpDateVal = XEUtils.toDateString(inpDateVal, dateLabelFormat) if (inputValue !== inpDateVal) { - emitModel(inpDateVal, { type: 'check' }) + handleChange(inpDateVal, { type: 'check' }) } reactData.inputValue = inpDateVal } else { @@ -1008,7 +1059,7 @@ export default defineComponent({ dateRevert() } } else { - emitModel('', { type: 'check' }) + handleChange('', { type: 'check' }) } } } @@ -1018,7 +1069,7 @@ export default defineComponent({ const { inputValue } = reactData const inpImmediate = computeInpImmediate.value if (!inpImmediate) { - emitModel(inputValue, evnt) + handleChange(inputValue, evnt) } afterCheckValue() if (!reactData.visiblePanel) { @@ -1063,13 +1114,11 @@ export default defineComponent({ emitInputEvent(getNumberValue(restNum), evnt as (Event & { type: 'input' })) } - let downbumTimeout: number - const numberNextEvent = (evnt: Event) => { const isDisabled = computeIsDisabled.value const isReadonly = computeIsReadonly.value const isDisabledSubtractNumber = computeIsDisabledSubtractNumber.value - clearTimeout(downbumTimeout) + numberStopDown() if (!isDisabled && !isReadonly && !isDisabledSubtractNumber) { numberChange(false, evnt) } @@ -1077,7 +1126,7 @@ export default defineComponent({ } const numberDownNextEvent = (evnt: Event) => { - downbumTimeout = window.setTimeout(() => { + internalData.dnTimeout = window.setTimeout(() => { numberNextEvent(evnt) numberDownNextEvent(evnt) }, 60) @@ -1087,7 +1136,7 @@ export default defineComponent({ const isDisabled = computeIsDisabled.value const isReadonly = computeIsReadonly.value const isDisabledAddNumber = computeIsDisabledAddNumber.value - clearTimeout(downbumTimeout) + numberStopDown() if (!isDisabled && !isReadonly && !isDisabledAddNumber) { numberChange(true, evnt) } @@ -1139,11 +1188,15 @@ export default defineComponent({ // 数值 const numberStopDown = () => { - clearTimeout(downbumTimeout) + const { dnTimeout } = internalData + if (dnTimeout) { + clearTimeout(dnTimeout) + internalData.dnTimeout = undefined + } } const numberDownPrevEvent = (evnt: Event) => { - downbumTimeout = window.setTimeout(() => { + internalData.dnTimeout = window.setTimeout(() => { numberPrevEvent(evnt) numberDownPrevEvent(evnt) }, 60) @@ -1158,7 +1211,7 @@ export default defineComponent({ } else { numberNextEvent(evnt) } - downbumTimeout = window.setTimeout(() => { + internalData.dnTimeout = window.setTimeout(() => { if (isPrevNumber) { numberDownPrevEvent(evnt) } else { @@ -1211,6 +1264,7 @@ export default defineComponent({ const datePrevEvent = (evnt: Event) => { const { type } = props const { datePanelType, selectMonth } = reactData + const { yearSize } = internalData const isDisabledPrevDateBtn = computeIsDisabledPrevDateBtn.value if (!isDisabledPrevDateBtn) { if (type === 'year') { @@ -1246,6 +1300,7 @@ export default defineComponent({ const dateNextEvent = (evnt: Event) => { const { type } = props const { datePanelType, selectMonth } = reactData + const { yearSize } = internalData const isDisabledNextDateBtn = computeIsDisabledNextDateBtn.value if (!isDisabledNextDateBtn) { if (type === 'year') { @@ -1424,10 +1479,10 @@ export default defineComponent({ datetimeRest.push(item) } }) - emitModel(datetimeRest.map(date => XEUtils.toDateString(date, dateValueFormat)).join(','), { type: 'update' }) + handleChange(datetimeRest.map(date => XEUtils.toDateString(date, dateValueFormat)).join(','), { type: 'update' }) } else { // 如果是日期类型 - emitModel(dateMultipleValue.join(','), { type: 'update' }) + handleChange(dateMultipleValue.join(','), { type: 'update' }) } } else { dateChange(dateValue || reactData.currentDate) @@ -1540,7 +1595,9 @@ export default defineComponent({ reactData.datetimePanelValue = reactData.datePanelValue || XEUtils.getWhatDay(Date.now(), 0, 'first') nextTick(() => { const timeBodyElem = refInputTimeBody.value - XEUtils.arrayEach(timeBodyElem.querySelectorAll('li.is--selected'), updateTimePos) + XEUtils.arrayEach(timeBodyElem.querySelectorAll('li.is--selected'), (elem) => { + updateTimePos(elem) + }) }) } } @@ -1629,13 +1686,17 @@ export default defineComponent({ const showPanel = () => { const { visiblePanel } = reactData + const { hpTimeout } = internalData const isDisabled = computeIsDisabled.value const isDatePickerType = computeIsDatePickerType.value if (!isDisabled && !visiblePanel) { if (!reactData.initialized) { reactData.initialized = true } - clearTimeout(hidePanelTimeout) + if (hpTimeout) { + clearTimeout(hpTimeout) + internalData.hpTimeout = undefined + } reactData.isActivated = true reactData.isAniVisible = true if (isDatePickerType) { @@ -1792,13 +1853,13 @@ export default defineComponent({ }] }, extraItem && extraItem.label ? [ - h('span', label), + h('span', `${label || ''}`), h('span', { class: ['vxe-input--date-label--extra', extraItem.important ? 'is-important' : '', extraItem.className], style: extraItem.style }, XEUtils.toValueString(extraItem.label)) ] - : label) + : [`${label || ''}`]) ] const festivalLabel = festivalItem.label if (festivalLabel) { @@ -1821,7 +1882,7 @@ export default defineComponent({ } return labels } - return label + return [`${label || ''}`] } const renderDateDayTable = () => { @@ -2392,10 +2453,12 @@ export default defineComponent({ return createCommentVNode() } + const dispatchEvent = (type: ValueOf, params: Record, evnt: Event | null) => { + emit(type, createEvent(evnt, { $input: $xeInput }, params)) + } + inputMethods = { - dispatchEvent (type, params, evnt) { - emit(type, createEvent(evnt, { $input: $xeInput }, params)) - }, + dispatchEvent, focus () { const inputElem = refInputTarget.value @@ -2437,7 +2500,7 @@ export default defineComponent({ const isCountError = computeIsCountError.value const inputCount = computeInputCount.value const inputReadonly = computeInputReadonly.value - const inpMaxlength = computeInpMaxlength.value + const inpMaxLength = computeInpMaxLength.value const inputType = computeInputType.value const inpPlaceholder = computeInpPlaceholder.value const isClearable = computeIsClearable.value @@ -2471,7 +2534,7 @@ export default defineComponent({ name, type: inputType, placeholder: inpPlaceholder, - maxlength: inpMaxlength, + maxlength: inpMaxLength, readonly: inputReadonly, disabled: isDisabled, autocomplete: autoComplete || autocomplete, @@ -2494,13 +2557,11 @@ export default defineComponent({ class: ['vxe-input--count', { 'is--error': isCountError }] - }, countMethod ? `${countMethod({ value: inputValue })}` : `${inputCount}${inpMaxlength ? `/${inpMaxlength}` : ''}`) + }, countMethod ? `${countMethod({ value: inputValue })}` : `${inputCount}${inpMaxLength ? `/${inpMaxLength}` : ''}`) : createCommentVNode() ]) } - $xeInput.renderVN = renderVN - watch(() => props.modelValue, (val) => { reactData.inputValue = val changeValue() @@ -2546,6 +2607,8 @@ export default defineComponent({ initValue() + $xeInput.renderVN = renderVN + return $xeInput }, render () { diff --git a/packages/layout-aside/src/layout-aside.ts b/packages/layout-aside/src/layout-aside.ts index f7b5ed4e..720083a9 100644 --- a/packages/layout-aside/src/layout-aside.ts +++ b/packages/layout-aside/src/layout-aside.ts @@ -110,10 +110,10 @@ export default defineComponent({ ]) } - $xeLayoutAside.renderVN = renderVN - provide('$xeLayoutAside', $xeLayoutAside) + $xeLayoutAside.renderVN = renderVN + return $xeLayoutAside }, render () { diff --git a/packages/list-design/src/list-design.ts b/packages/list-design/src/list-design.ts index f6fdbd37..ffd0295e 100644 --- a/packages/list-design/src/list-design.ts +++ b/packages/list-design/src/list-design.ts @@ -330,8 +330,6 @@ export default defineComponent({ ]) } - $xeListDesign.renderVN = renderVN - provide('$xeListDesign', $xeListDesign) watch(() => props.config, (value) => { @@ -344,6 +342,8 @@ export default defineComponent({ loadConfig(props.config) } + $xeListDesign.renderVN = renderVN + return $xeListDesign }, render () { diff --git a/packages/list-design/src/list-view.ts b/packages/list-design/src/list-view.ts index 1640bc4f..677cbc81 100644 --- a/packages/list-design/src/list-view.ts +++ b/packages/list-design/src/list-view.ts @@ -455,8 +455,6 @@ export default defineComponent({ ]) } - $xeListView.renderVN = renderVN - watch(() => props.config, (value) => { loadConfig(value || {}) }) @@ -475,6 +473,8 @@ export default defineComponent({ }) } + $xeListView.renderVN = renderVN + return $xeListView }, render () { diff --git a/packages/list/src/list.ts b/packages/list/src/list.ts index da11cc11..f9378eb1 100644 --- a/packages/list/src/list.ts +++ b/packages/list/src/list.ts @@ -29,19 +29,16 @@ export default defineComponent({ const { computeSize } = useSize(props) - const reactData = reactive({ + const reactData = reactive({ scrollYLoad: false, bodyHeight: 0, rowHeight: 0, topSpaceHeight: 0, items: [] - } as ListReactData) - - const refElem = ref() as Ref - const refVirtualWrapper = ref() as Ref - const refVirtualBody = ref() as Ref + }) const internalData: ListInternalData = { + resizeObserver: undefined, fullData: [], lastScrollLeft: 0, lastScrollTop: 0, @@ -54,6 +51,10 @@ export default defineComponent({ } } + const refElem = ref() as Ref + const refVirtualWrapper = ref() as Ref + const refVirtualBody = ref() as Ref + const refMaps: ListPrivateRef = { refElem } @@ -157,7 +158,7 @@ export default defineComponent({ * @param {Number} scrollLeft 左距离 * @param {Number} scrollTop 上距离 */ - const scrollTo = (scrollLeft: number | null, scrollTop?: number | null): Promise => { + const scrollTo = (scrollLeft: number | null, scrollTop?: number | null) => { const scrollBodyElem = refVirtualWrapper.value if (XEUtils.isNumber(scrollLeft)) { scrollBodyElem.scrollLeft = scrollLeft @@ -166,7 +167,7 @@ export default defineComponent({ scrollBodyElem.scrollTop = scrollTop } if (reactData.scrollYLoad) { - return new Promise(resolve => { + return new Promise(resolve => { setTimeout(() => { nextTick(() => { resolve() @@ -296,21 +297,21 @@ export default defineComponent({ recalculate().then(() => refreshScroll()) }) - let resizeObserver: ResizeObserver - nextTick(() => { globalEvents.on($xeList, 'resize', () => { recalculate() }) if (props.autoResize) { const el = refElem.value - resizeObserver = globalResize.create(() => recalculate()) + const resizeObserver = globalResize.create(() => recalculate()) resizeObserver.observe(el) + internalData.resizeObserver = resizeObserver } listMethods.loadData(props.data || []) }) onUnmounted(() => { + const { resizeObserver } = internalData if (resizeObserver) { resizeObserver.disconnect() } diff --git a/packages/loading/src/loading.ts b/packages/loading/src/loading.ts index 554ba184..dcd82459 100644 --- a/packages/loading/src/loading.ts +++ b/packages/loading/src/loading.ts @@ -135,14 +135,17 @@ export default defineComponent({ ]) } - $xeLoading.renderVN = renderVN - watch(() => props.modelValue, () => { handleInit() }) handleInit() + $xeLoading.renderVN = renderVN + return $xeLoading + }, + render () { + return this.renderVN() } }) diff --git a/packages/menu/src/menu.ts b/packages/menu/src/menu.ts index ef841f3e..1c46097c 100644 --- a/packages/menu/src/menu.ts +++ b/packages/menu/src/menu.ts @@ -157,8 +157,9 @@ export default defineComponent({ const handleClickMenu = (evnt: KeyboardEvent, item: VxeMenuDefines.MenuItem) => { const { routerLink, hasChild } = item if (routerLink) { - reactData.activeName = item.itemKey - emit('update:modelValue', item.itemKey) + const value = item.itemKey + reactData.activeName = value + emit('update:modelValue', value) } else { if (hasChild) { handleClickIconCollapse(evnt, item) @@ -282,8 +283,6 @@ export default defineComponent({ ]) } - $xeMenu.renderVN = renderVN - const optFlag = ref(0) watch(() => props.options ? props.options.length : -1, () => { optFlag.value++ @@ -313,6 +312,8 @@ export default defineComponent({ updateMenuConfig() updateActiveMenu(true) + $xeMenu.renderVN = renderVN + return $xeMenu }, render () { diff --git a/packages/number-input/src/number-input.ts b/packages/number-input/src/number-input.ts index c1c634fd..ba42910f 100644 --- a/packages/number-input/src/number-input.ts +++ b/packages/number-input/src/number-input.ts @@ -6,16 +6,25 @@ import { hasClass, getEventTargetNode } from '../../ui/src/dom' import { getSlotVNs } from '../..//ui/src/vn' import { handleNumber, toFloatValueFixed } from './util' -import type { VxeNumberInputConstructor, VxeNumberInputEmits, NumberInputReactData, NumberInputMethods, VxeNumberInputPropTypes, InputPrivateRef, VxeFormConstructor, VxeFormPrivateMethods, VxeFormDefines } from '../../../types' +import type { VxeNumberInputConstructor, NumberInputInternalData, VxeNumberInputEmits, NumberInputReactData, NumberInputMethods, VxeNumberInputPropTypes, InputPrivateRef, VxeFormConstructor, VxeFormPrivateMethods, VxeFormDefines, ValueOf } from '../../../types' export default defineComponent({ name: 'VxeNumberInput', props: { modelValue: [String, Number] as PropType, - immediate: { type: Boolean as PropType, default: true }, + immediate: { + type: Boolean as PropType, + default: true + }, name: String as PropType, - type: { type: String as PropType, default: 'number' }, - clearable: { type: Boolean as PropType, default: () => getConfig().numberInput.clearable }, + type: { + type: String as PropType, + default: 'number' + }, + clearable: { + type: Boolean as PropType, + default: () => getConfig().numberInput.clearable + }, readonly: { type: Boolean as PropType, default: null @@ -33,20 +42,38 @@ export default defineComponent({ align: String as PropType, form: String as PropType, className: String as PropType, - size: { type: String as PropType, default: () => getConfig().numberInput.size || getConfig().size }, + size: { + type: String as PropType, + default: () => getConfig().numberInput.size || getConfig().size + }, multiple: Boolean as PropType, // number、integer、float - min: { type: [String, Number] as PropType, default: null }, - max: { type: [String, Number] as PropType, default: null }, + min: { + type: [String, Number] as PropType, + default: null + }, + max: { + type: [String, Number] as PropType, + default: null + }, step: [String, Number] as PropType, - exponential: { type: Boolean as PropType, default: () => getConfig().numberInput.exponential }, + exponential: { + type: Boolean as PropType, + default: () => getConfig().numberInput.exponential + }, // number、integer、float - controls: { type: Boolean as PropType, default: () => getConfig().numberInput.controls }, + controls: { + type: Boolean as PropType, + default: () => getConfig().numberInput.controls + }, // float - digits: { type: [String, Number] as PropType, default: () => getConfig().numberInput.digits }, + digits: { + type: [String, Number] as PropType, + default: () => getConfig().numberInput.digits + }, prefixIcon: String as PropType, suffixIcon: String as PropType, @@ -87,6 +114,10 @@ export default defineComponent({ inputValue: props.modelValue }) + const internalData: NumberInputInternalData = { + dnTimeout: undefined + } + const refElem = ref() as Ref const refInputTarget = ref() as Ref const refInputPanel = ref() as Ref @@ -101,10 +132,11 @@ export default defineComponent({ props, context, reactData, + internalData, getRefMaps: () => refMaps } as unknown as VxeNumberInputConstructor - let inputMethods = {} as NumberInputMethods + let numberInputMethods = {} as NumberInputMethods const computeFormReadonly = computed(() => { const { readonly } = props @@ -128,10 +160,6 @@ export default defineComponent({ return disabled }) - const computeIsNumType = computed(() => { - return true - }) - const computeDigitsValue = computed(() => { return XEUtils.toInteger(props.digits) || 1 }) @@ -170,7 +198,7 @@ export default defineComponent({ return getI18n('vxe.base.pleaseInput') }) - const computeInpMaxlength = computed(() => { + const computeInpMaxLength = computed(() => { const { maxLength, maxlength } = props // 数值最大长度限制 16 位，包含小数 return XEUtils.toNumber(maxLength || maxlength) || 16 @@ -184,11 +212,7 @@ export default defineComponent({ const computeNumValue = computed(() => { const { type } = props const { inputValue } = reactData - const isNumType = computeIsNumType.value - if (isNumType) { - return type === 'integer' ? XEUtils.toInteger(handleNumber(inputValue)) : XEUtils.toNumber(handleNumber(inputValue)) - } - return 0 + return type === 'integer' ? XEUtils.toInteger(handleNumber(inputValue)) : XEUtils.toNumber(handleNumber(inputValue)) }) const computeNumLabel = computed(() => { @@ -199,10 +223,9 @@ export default defineComponent({ const computeIsDisabledSubtractNumber = computed(() => { const { min } = props const { inputValue } = reactData - const isNumType = computeIsNumType.value const numValue = computeNumValue.value // 当有值时再进行判断 - if ((inputValue || inputValue === 0) && isNumType && min !== null) { + if ((inputValue || inputValue === 0) && min !== null) { return numValue <= XEUtils.toNumber(min) } return false @@ -211,10 +234,9 @@ export default defineComponent({ const computeIsDisabledAddNumber = computed(() => { const { max } = props const { inputValue } = reactData - const isNumType = computeIsNumType.value const numValue = computeNumValue.value // 当有值时再进行判断 - if ((inputValue || inputValue === 0) && isNumType && max !== null) { + if ((inputValue || inputValue === 0) && max !== null) { return numValue >= XEUtils.toNumber(max) } return false @@ -222,29 +244,30 @@ export default defineComponent({ const getNumberValue = (val: any) => { const { type, exponential } = props - const inpMaxlength = computeInpMaxlength.value + const inpMaxLength = computeInpMaxLength.value const digitsValue = computeDigitsValue.value const restVal = (type === 'float' ? toFloatValueFixed(val, digitsValue) : XEUtils.toValueString(val)) if (exponential && (val === restVal || XEUtils.toValueString(val).toLowerCase() === XEUtils.toNumber(restVal).toExponential())) { return val } - return restVal.slice(0, inpMaxlength) + return restVal.slice(0, inpMaxLength) } const triggerEvent = (evnt: Event & { type: 'input' | 'change' | 'keydown' | 'keyup' | 'wheel' | 'click' | 'focus' | 'blur' }) => { const { inputValue } = reactData - inputMethods.dispatchEvent(evnt.type, { value: inputValue }, evnt) + numberInputMethods.dispatchEvent(evnt.type, { value: inputValue }, evnt) } - const emitModel = (value: number | null, inputValue: string, evnt: Event | { type: string }) => { + const handleChange = (val: number | null, inputValue: string, evnt: Event | { type: string }) => { + const value = val ? Number(val) : null const isChange = Number(value) !== props.modelValue if (isChange) { reactData.inputValue = inputValue || '' - emit('update:modelValue', value ? Number(value) : null) + emit('update:modelValue', value) } - inputMethods.dispatchEvent('input', { value }, evnt as Event) + numberInputMethods.dispatchEvent('input', { value }, evnt as Event) if (isChange) { - inputMethods.dispatchEvent('change', { value }, evnt as Event) + numberInputMethods.dispatchEvent('change', { value }, evnt as Event) // 自动更新校验状态 if ($xeForm && formItemInfo) { $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, value) @@ -257,9 +280,9 @@ export default defineComponent({ const value = inputValue ? XEUtils.toNumber(inputValue) : null reactData.inputValue = inputValue if (inpImmediate) { - emitModel(value, inputValue, evnt) + handleChange(value, inputValue, evnt) } else { - inputMethods.dispatchEvent('input', { value }, evnt) + numberInputMethods.dispatchEvent('input', { value }, evnt) } } @@ -285,21 +308,21 @@ export default defineComponent({ const isDisabled = computeIsDisabled.value if (!isDisabled) { const { inputValue } = reactData - inputMethods.dispatchEvent('prefix-click', { value: inputValue }, evnt) + numberInputMethods.dispatchEvent('prefix-click', { value: inputValue }, evnt) } } const clearValueEvent = (evnt: Event, value: VxeNumberInputPropTypes.ModelValue) => { focus() - emitModel(null, '', evnt) - inputMethods.dispatchEvent('clear', { value }, evnt) + handleChange(null, '', evnt) + numberInputMethods.dispatchEvent('clear', { value }, evnt) } const clickSuffixEvent = (evnt: Event) => { const isDisabled = computeIsDisabled.value if (!isDisabled) { const { inputValue } = reactData - inputMethods.dispatchEvent('suffix-click', { value: inputValue }, evnt) + numberInputMethods.dispatchEvent('suffix-click', { value: inputValue }, evnt) } } @@ -319,7 +342,7 @@ export default defineComponent({ validValue = Number(textValue) } if (inputValue !== validValue) { - emitModel(validValue, textValue, { type: 'init' }) + handleChange(validValue, textValue, { type: 'init' }) } } } @@ -352,7 +375,7 @@ export default defineComponent({ } } const inpValue = getNumberValue(inpNumVal) - emitModel(inpValue === null ? null : Number(inpValue), inpValue, { type: 'check' }) + handleChange(inpValue === null ? null : Number(inpValue), inpValue, { type: 'check' }) } } } @@ -362,11 +385,11 @@ export default defineComponent({ const inpImmediate = computeInpImmediate.value const value = inputValue ? Number(inputValue) : null if (!inpImmediate) { - emitModel(value, `${inputValue || ''}`, evnt) + handleChange(value, `${inputValue || ''}`, evnt) } afterCheckValue() reactData.isActivated = false - inputMethods.dispatchEvent('blur', { value }, evnt) + numberInputMethods.dispatchEvent('blur', { value }, evnt) } // 数值 @@ -387,21 +410,19 @@ export default defineComponent({ emitInputEvent(getNumberValue(restNum), evnt as (Event & { type: 'input' })) } - let downbumTimeout: number - const numberNextEvent = (evnt: Event) => { const isDisabled = computeIsDisabled.value const formReadonly = computeFormReadonly.value const isDisabledSubtractNumber = computeIsDisabledSubtractNumber.value - clearTimeout(downbumTimeout) + numberStopDown() if (!isDisabled && !formReadonly && !isDisabledSubtractNumber) { numberChange(false, evnt) } - inputMethods.dispatchEvent('next-number', {}, evnt) + numberInputMethods.dispatchEvent('next-number', {}, evnt) } const numberDownNextEvent = (evnt: Event) => { - downbumTimeout = window.setTimeout(() => { + internalData.dnTimeout = window.setTimeout(() => { numberNextEvent(evnt) numberDownNextEvent(evnt) }, 60) @@ -411,11 +432,11 @@ export default defineComponent({ const isDisabled = computeIsDisabled.value const formReadonly = computeFormReadonly.value const isDisabledAddNumber = computeIsDisabledAddNumber.value - clearTimeout(downbumTimeout) + numberStopDown() if (!isDisabled && !formReadonly && !isDisabledAddNumber) { numberChange(true, evnt) } - inputMethods.dispatchEvent('prev-number', {}, evnt) + numberInputMethods.dispatchEvent('prev-number', {}, evnt) } const numberKeydownEvent = (evnt: KeyboardEvent) => { @@ -433,24 +454,21 @@ export default defineComponent({ const keydownEvent = (evnt: KeyboardEvent & { type: 'keydown' }) => { const { exponential, controls } = props - const isNumType = computeIsNumType.value - if (isNumType) { - const isCtrlKey = evnt.ctrlKey - const isShiftKey = evnt.shiftKey - const isAltKey = evnt.altKey - const keyCode = evnt.keyCode - const isEsc = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ESCAPE) - const isUpArrow = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ARROW_UP) - const isDwArrow = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ARROW_DOWN) - if (!isCtrlKey && !isShiftKey && !isAltKey && (globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.SPACEBAR) || ((!exponential || keyCode !== 69) && (keyCode >= 65 && keyCode <= 90)) || (keyCode >= 186 && keyCode <= 188) || keyCode >= 191)) { - evnt.preventDefault() - } - if (isEsc) { - afterCheckValue() - } else if (isUpArrow || isDwArrow) { - if (controls) { - numberKeydownEvent(evnt) - } + const isCtrlKey = evnt.ctrlKey + const isShiftKey = evnt.shiftKey + const isAltKey = evnt.altKey + const keyCode = evnt.keyCode + const isEsc = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ESCAPE) + const isUpArrow = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ARROW_UP) + const isDwArrow = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ARROW_DOWN) + if (!isCtrlKey && !isShiftKey && !isAltKey && (globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.SPACEBAR) || ((!exponential || keyCode !== 69) && (keyCode >= 65 && keyCode <= 90)) || (keyCode >= 186 && keyCode <= 188) || keyCode >= 191)) { + evnt.preventDefault() + } + if (isEsc) { + afterCheckValue() + } else if (isUpArrow || isDwArrow) { + if (controls) { + numberKeydownEvent(evnt) } } triggerEvent(evnt) @@ -463,11 +481,15 @@ export default defineComponent({ // 数值 const numberStopDown = () => { - clearTimeout(downbumTimeout) + const { dnTimeout } = internalData + if (dnTimeout) { + clearTimeout(dnTimeout) + internalData.dnTimeout = undefined + } } const numberDownPrevEvent = (evnt: Event) => { - downbumTimeout = window.setTimeout(() => { + internalData.dnTimeout = window.setTimeout(() => { numberPrevEvent(evnt) numberDownPrevEvent(evnt) }, 60) @@ -482,7 +504,7 @@ export default defineComponent({ } else { numberNextEvent(evnt) } - downbumTimeout = window.setTimeout(() => { + internalData.dnTimeout = window.setTimeout(() => { if (isPrevNumber) { numberDownPrevEvent(evnt) } else { @@ -496,8 +518,7 @@ export default defineComponent({ type: 'wheel'; wheelDelta: number; }) => { - const isNumType = computeIsNumType.value - if (isNumType && props.controls) { + if (props.controls) { if (reactData.isActivated) { const delta = evnt.deltaY if (delta > 0) { @@ -661,10 +682,12 @@ export default defineComponent({ return createCommentVNode() } - inputMethods = { - dispatchEvent (type, params, evnt) { - emit(type, createEvent(evnt, { $input: $xeNumberInput }, params)) - }, + const dispatchEvent = (type: ValueOf, params: Record, evnt: Event | null) => { + emit(type, createEvent(evnt, { $numberInput: $xeNumberInput }, params)) + } + + numberInputMethods = { + dispatchEvent, focus () { const inputElem = refInputTarget.value @@ -686,7 +709,7 @@ export default defineComponent({ } } - Object.assign($xeNumberInput, inputMethods) + Object.assign($xeNumberInput, numberInputMethods) const renderVN = () => { const { className, controls, type, align, name, autocomplete, autoComplete } = props @@ -702,7 +725,7 @@ export default defineComponent({ }, numLabel) } const inputReadonly = computeInputReadonly.value - const inpMaxlength = computeInpMaxlength.value + const inpMaxLength = computeInpMaxLength.value const inpPlaceholder = computeInpPlaceholder.value const isClearable = computeIsClearable.value const prefix = renderPrefixIcon() @@ -732,7 +755,7 @@ export default defineComponent({ name, type: 'text', placeholder: inpPlaceholder, - maxlength: inpMaxlength, + maxlength: inpMaxLength, readonly: inputReadonly, disabled: isDisabled, autocomplete: autoComplete || autocomplete, diff --git a/packages/pager/src/pager.ts b/packages/pager/src/pager.ts index cc906b2a..e6e8a279 100644 --- a/packages/pager/src/pager.ts +++ b/packages/pager/src/pager.ts @@ -5,39 +5,78 @@ import { errLog } from '../../ui/src/log' import VxeSelectComponent from '../../select/src/select' import VxeInputComponent from '../../input/src/input' -import type { VxePagerPropTypes, VxePagerConstructor, VxePagerEmits, VxeSelectEvents, PagerPrivateRef, PagerMethods, PagerPrivateMethods, VxePagerPrivateMethods, PagerReactData, VxeGridConstructor, VxeGridPrivateMethods, VxeInputEvents } from '../../../types' +import type { VxePagerPropTypes, VxePagerConstructor, VxePagerEmits, VxeSelectEvents, ValueOf, PagerPrivateRef, PagerMethods, PagerPrivateMethods, VxePagerPrivateMethods, PagerReactData, VxeGridConstructor, VxeGridPrivateMethods, VxeInputEvents } from '../../../types' export default defineComponent({ name: 'VxePager', props: { - size: { type: String as PropType, default: () => getConfig().pager.size || getConfig().size }, + size: { + type: String as PropType, + default: () => getConfig().pager.size || getConfig().size + }, // 自定义布局 - layouts: { type: Array as PropType, default: () => getConfig().pager.layouts || ['PrevJump', 'PrevPage', 'Jump', 'PageCount', 'NextPage', 'NextJump', 'Sizes', 'Total'] }, + layouts: { + type: Array as PropType, + default: () => getConfig().pager.layouts || ['PrevJump', 'PrevPage', 'Jump', 'PageCount', 'NextPage', 'NextJump', 'Sizes', 'Total'] + }, // 当前页 - currentPage: { type: Number as PropType, default: 1 }, + currentPage: { + type: Number as PropType, + default: 1 + }, // 加载中 loading: Boolean as PropType, // 每页大小 - pageSize: { type: Number as PropType, default: () => getConfig().pager.pageSize || 10 }, + pageSize: { + type: Number as PropType, + default: () => getConfig().pager.pageSize || 10 + }, // 总条数 total: { type: Number as PropType, default: 0 }, // 显示页码按钮的数量 - pagerCount: { type: Number as PropType, default: () => getConfig().pager.pagerCount || 7 }, + pagerCount: { + type: Number as PropType, + default: () => getConfig().pager.pagerCount || 7 + }, // 每页大小选项列表 - pageSizes: { type: Array as PropType, default: () => getConfig().pager.pageSizes || [10, 15, 20, 50, 100] }, + pageSizes: { + type: Array as PropType, + default: () => getConfig().pager.pageSizes || [10, 15, 20, 50, 100] + }, // 列对其方式 - align: { type: String as PropType, default: () => getConfig().pager.align }, + align: { + type: String as PropType, + default: () => getConfig().pager.align + }, // 带边框 - border: { type: Boolean as PropType, default: () => getConfig().pager.border }, + border: { + type: Boolean as PropType, + default: () => getConfig().pager.border + }, // 带背景颜色 - background: { type: Boolean as PropType, default: () => getConfig().pager.background }, + background: { + type: Boolean as PropType, + default: () => getConfig().pager.background + }, // 配套的样式 - perfect: { type: Boolean as PropType, default: () => getConfig().pager.perfect }, + perfect: { + type: Boolean as PropType, + default: () => getConfig().pager.perfect + }, // 当只有一页时隐藏 - autoHidden: { type: Boolean as PropType, default: () => getConfig().pager.autoHidden }, - transfer: { type: Boolean as PropType, default: () => getConfig().pager.transfer }, + autoHidden: { + type: Boolean as PropType, + default: () => getConfig().pager.autoHidden + }, + transfer: { + type: Boolean as PropType, + default: () => getConfig().pager.transfer + }, className: [String, Function] as PropType, - pageSizePlacement: { type: String as PropType, default: () => getConfig().pager.pageSizePlacement }, + pageSizePlacement: { + type: String as PropType, + default: () => getConfig().pager.pageSizePlacement + }, // 自定义图标 iconPrevPage: String as PropType, iconJumpPrev: String as PropType, @@ -71,6 +110,37 @@ export default defineComponent({ refElem } + const computePageCount = computed(() => { + return getPageCount(props.total, props.pageSize) + }) + + const computeNumList = computed(() => { + const { pagerCount } = props + const pageCount = computePageCount.value + const len = pageCount > pagerCount ? pagerCount - 2 : pagerCount + const rest = [] + for (let index = 0; index < len; index++) { + rest.push(index) + } + return rest + }) + + const computeOffsetNumber = computed(() => { + return Math.floor((props.pagerCount - 2) / 2) + }) + + const computeSizeList = computed(() => { + return props.pageSizes.map((item) => { + if (XEUtils.isNumber(item)) { + return { + value: item, + label: `${getI18n('vxe.pager.pagesize', [item])}` + } + } + return { value: '', label: '', ...item } + }) + }) + const $xePager = { xID, props, @@ -85,10 +155,6 @@ export default defineComponent({ return Math.max(Math.ceil(total / size), 1) } - const computePageCount = computed(() => { - return getPageCount(props.total, props.pageSize) - }) - const jumpPageEvent = (evnt: Event, currentPage: number) => { emit('update:currentPage', currentPage) if (evnt && currentPage !== props.currentPage) { @@ -115,33 +181,6 @@ export default defineComponent({ changeCurrentPage(current, $event) } - const computeNumList = computed(() => { - const { pagerCount } = props - const pageCount = computePageCount.value - const len = pageCount > pagerCount ? pagerCount - 2 : pagerCount - const rest = [] - for (let index = 0; index < len; index++) { - rest.push(index) - } - return rest - }) - - const computeOffsetNumber = computed(() => { - return Math.floor((props.pagerCount - 2) / 2) - }) - - const computeSizeList = computed(() => { - return props.pageSizes.map((item) => { - if (XEUtils.isNumber(item)) { - return { - value: item, - label: `${getI18n('vxe.pager.pagesize', [item])}` - } - } - return { value: '', label: '', ...item } - }) - }) - const handleHomePage = (evnt?: Event) => { const { currentPage } = props if (currentPage > 1) { @@ -345,7 +384,7 @@ export default defineComponent({ class: 'vxe-pager--num-btn', type: 'button', onClick: (evnt: Event) => jumpPageEvent(evnt, 1) - }, 1), + }, '1'), renderPrevJump('span') ) } @@ -360,7 +399,7 @@ export default defineComponent({ }], type: 'button', onClick: (evnt: Event) => jumpPageEvent(evnt, number) - }, number) + }, `${number}`) ) } }) @@ -456,10 +495,12 @@ export default defineComponent({ }, getI18n('vxe.pager.total', [props.total])) } + const dispatchEvent = (type: ValueOf, params: Record, evnt: Event | null) => { + emit(type, createEvent(evnt, { $pager: $xePager }, params)) + } + pagerMethods = { - dispatchEvent (type, params, evnt) { - emit(type, createEvent(evnt, { $pager: $xePager }, params)) - }, + dispatchEvent, homePage () { handleHomePage() return nextTick() diff --git a/packages/password-input/src/password-input.ts b/packages/password-input/src/password-input.ts index ea728222..74e7b028 100644 --- a/packages/password-input/src/password-input.ts +++ b/packages/password-input/src/password-input.ts @@ -118,7 +118,7 @@ export default defineComponent({ emitInputEvent(value, evnt) } - const emitModel = (value: string, evnt: Event | { type: string }) => { + const handleChange = (value: string, evnt: Event | { type: string }) => { reactData.inputValue = value emit('update:modelValue', value) passwordInputMethods.dispatchEvent('input', { value }, evnt as any) @@ -165,7 +165,7 @@ export default defineComponent({ const clearValueEvent = (evnt: Event, value: VxePasswordInputPropTypes.ModelValue) => { focus() - emitModel('', evnt) + handleChange('', evnt) passwordInputMethods.dispatchEvent('clear', { value }, evnt) } diff --git a/packages/print/src/page-break.ts b/packages/print/src/page-break.ts index 321cfb21..55cf3bbc 100644 --- a/packages/print/src/page-break.ts +++ b/packages/print/src/page-break.ts @@ -1,15 +1,16 @@ import { defineComponent, ref, h, reactive, inject, onMounted, onUnmounted, createCommentVNode } from 'vue' import XEUtils from 'xe-utils' +import { createEvent } from '../../ui' import { assemblePageBreak, destroyPageBreak } from './util' -import type { PrintPageBreakReactData, PrintPageBreakPrivateRef, VxePrintPageBreakEmits, VxePrintDefines, VxePrintPageBreakPrivateComputed, VxePrintConstructor, VxePrintPrivateMethods, VxePrintPageBreakConstructor, VxePrintPageBreakPrivateMethods } from '../../../types' +import type { PrintPageBreakReactData, PrintPageBreakPrivateRef, ValueOf, PrintPageBreakPrivateMethods, PrintPageBreakMethods, VxePrintPageBreakEmits, VxePrintDefines, VxePrintPageBreakPrivateComputed, VxePrintConstructor, VxePrintPrivateMethods, VxePrintPageBreakConstructor, VxePrintPageBreakPrivateMethods } from '../../../types' export default defineComponent({ name: 'VxePrintPageBreak', props: {}, emits: [] as VxePrintPageBreakEmits, setup (props, context) { - const { slots } = context + const { slots, emit } = context const xID = XEUtils.uniqueId() const $xePrint = inject<(VxePrintConstructor & VxePrintPrivateMethods) | null>('$xePrint', null) @@ -41,6 +42,19 @@ export default defineComponent({ getComputeMaps: () => computeMaps } as unknown as VxePrintPageBreakConstructor & VxePrintPageBreakPrivateMethods + const dispatchEvent = (type: ValueOf, params: Record, evnt: Event | null) => { + emit(type, createEvent(evnt, { $print: $xePrint }, params)) + } + + const printPageBreakMethods: PrintPageBreakMethods = { + dispatchEvent + } + + const printPageBreakPrivateMethods: PrintPageBreakPrivateMethods = { + } + + Object.assign($xePrintPageBreak, printPageBreakMethods, printPageBreakPrivateMethods) + if (!$xePrint) { $xePrintPageBreak.renderVN = () => { return createCommentVNode() @@ -54,8 +68,6 @@ export default defineComponent({ }) } - $xePrintPageBreak.renderVN = renderVN - onMounted(() => { const elem = refElem.value if ($xePrint && elem) { @@ -69,6 +81,8 @@ export default defineComponent({ } }) + $xePrintPageBreak.renderVN = renderVN + return $xePrintPageBreak }, render () { diff --git a/packages/print/src/print.ts b/packages/print/src/print.ts index a37943e5..3611d689 100644 --- a/packages/print/src/print.ts +++ b/packages/print/src/print.ts @@ -4,7 +4,7 @@ import { getConfig, createEvent } from '../../ui' import { printHtml } from './util' import { getSlotVNs } from '../..//ui/src/vn' -import type { VxePrintPropTypes, PrintReactData, PrintPrivateRef, VxePrintEmits, VxePrintPrivateComputed, VxePrintConstructor, VxePrintPrivateMethods, PrintMethods } from '../../../types' +import type { VxePrintPropTypes, PrintReactData, PrintPrivateRef, VxePrintEmits, PrintPrivateMethods, ValueOf, VxePrintPrivateComputed, VxePrintConstructor, VxePrintPrivateMethods, PrintMethods } from '../../../types' export default defineComponent({ name: 'VxePrint', @@ -73,10 +73,12 @@ export default defineComponent({ getComputeMaps: () => computeMaps } as unknown as VxePrintConstructor & VxePrintPrivateMethods + const dispatchEvent = (type: ValueOf, params: Record, evnt: Event | null) => { + emit(type, createEvent(evnt, { $print: $xePrint }, params)) + } + const printMethods: PrintMethods = { - dispatchEvent (type, params, evnt) { - emit(type, createEvent(evnt, { $print: $xePrint }, params)) - }, + dispatchEvent, print () { const elem = refElem.value return printHtml(Object.assign({}, props, { @@ -86,7 +88,10 @@ export default defineComponent({ } } - Object.assign($xePrint, printMethods) + const printPrivateMethods: PrintPrivateMethods = { + } + + Object.assign($xePrint, printMethods, printPrivateMethods) const renderPageConfigLayouts = () => { const { title, showPageNumber, showAllPageTitle, align, headerAlign, footerAlign } = props diff --git a/packages/pulldown/src/pulldown.ts b/packages/pulldown/src/pulldown.ts index e247c4da..fd56d2b2 100644 --- a/packages/pulldown/src/pulldown.ts +++ b/packages/pulldown/src/pulldown.ts @@ -4,7 +4,7 @@ import { getConfig, globalEvents, createEvent, useSize, VxeComponentStyleType, V import { getAbsolutePos, getEventTargetNode } from '../../ui/src/dom' import { getLastZIndex, nextZIndex } from '../../ui/src/utils' -import type { VxePulldownConstructor, VxePulldownPropTypes, VxePulldownEmits, PulldownReactData, PulldownMethods, PulldownPrivateRef, VxePulldownMethods, VxeTableConstructor, VxeTablePrivateMethods, VxeFormConstructor, VxeFormPrivateMethods, VxeModalConstructor, VxeModalMethods } from '../../../types' +import type { VxePulldownConstructor, VxePulldownPropTypes, PulldownInternalData, VxePulldownEmits, PulldownReactData, PulldownMethods, PulldownPrivateRef, VxePulldownMethods, VxeTableConstructor, VxeTablePrivateMethods, VxeDrawerConstructor, VxeDrawerMethods, VxeFormConstructor, VxeFormPrivateMethods, VxeModalConstructor, VxeModalMethods } from '../../../types' export default defineComponent({ name: 'VxePulldown', @@ -42,9 +42,10 @@ export default defineComponent({ setup (props, context) { const { slots, emit } = context - const $xeModal = inject('$xeModal', null) - const $xeTable = inject('$xeTable', null) - const $xeForm = inject('$xeForm', null) + const $xeModal = inject<(VxeModalConstructor & VxeModalMethods) | null>('$xeModal', null) + const $xeDrawer = inject<(VxeDrawerConstructor & VxeDrawerMethods) | null>('$xeDrawer', null) + const $xeTable = inject<(VxeTableConstructor & VxeTablePrivateMethods) | null>('$xeTable', null) + const $xeForm = inject<(VxeFormConstructor & VxeFormPrivateMethods) | null>('$xeForm', null) const xID = XEUtils.uniqueId() @@ -53,16 +54,20 @@ export default defineComponent({ const reactData = reactive({ initialized: false, panelIndex: 0, - panelStyle: null, + panelStyle: {}, panelPlacement: null, visiblePanel: false, visibleAnimate: false, isActivated: false }) + const internalData: PulldownInternalData = { + hpTimeout: undefined + } + const refElem = ref() as Ref - const refPulldowContent = ref() as Ref - const refPulldowPnanel = ref() as Ref + const refPulldownContent = ref() as Ref + const refPulldownPanel = ref() as Ref const computeBtnTransfer = computed(() => { const { transfer } = props @@ -71,7 +76,7 @@ export default defineComponent({ if (XEUtils.isBoolean(globalTransfer)) { return globalTransfer } - if ($xeTable || $xeModal || $xeForm) { + if ($xeTable || $xeModal || $xeDrawer || $xeForm) { return true } } @@ -87,6 +92,7 @@ export default defineComponent({ props, context, reactData, + internalData, getRefMaps: () => refMaps } as unknown as VxePulldownConstructor & VxePulldownMethods @@ -111,8 +117,8 @@ export default defineComponent({ const { panelIndex, visiblePanel } = reactData const btnTransfer = computeBtnTransfer.value if (visiblePanel) { - const targetElem = refPulldowContent.value - const panelElem = refPulldowPnanel.value + const targetElem = refPulldownContent.value + const panelElem = refPulldownPanel.value if (panelElem && targetElem) { const targetHeight = targetElem.offsetHeight const targetWidth = targetElem.offsetWidth @@ -178,18 +184,18 @@ export default defineComponent({ }) } - let hidePanelTimeout: number - /** * 显示下拉面板 */ - const showPanel = (): Promise => { + const showPanel = () => { if (!reactData.initialized) { reactData.initialized = true } - return new Promise(resolve => { + return new Promise(resolve => { if (!props.disabled) { - clearTimeout(hidePanelTimeout) + if (internalData.hpTimeout) { + clearTimeout(internalData.hpTimeout) + } reactData.isActivated = true reactData.visibleAnimate = true setTimeout(() => { @@ -212,12 +218,12 @@ export default defineComponent({ /** * 隐藏下拉面板 */ - const hidePanel = (): Promise => { + const hidePanel = () => { reactData.visiblePanel = false emit('update:modelValue', false) - return new Promise(resolve => { + return new Promise(resolve => { if (reactData.visibleAnimate) { - hidePanelTimeout = window.setTimeout(() => { + internalData.hpTimeout = window.setTimeout(() => { reactData.visibleAnimate = false nextTick(() => { resolve() @@ -263,7 +269,7 @@ export default defineComponent({ const handleGlobalMousewheelEvent = (evnt: Event) => { const { disabled } = props const { visiblePanel } = reactData - const panelElem = refPulldowPnanel.value + const panelElem = refPulldownPanel.value if (!disabled) { if (visiblePanel) { if (getEventTargetNode(evnt, panelElem).flag) { @@ -280,7 +286,7 @@ export default defineComponent({ const { disabled } = props const { visiblePanel } = reactData const el = refElem.value - const panelElem = refPulldowPnanel.value + const panelElem = refPulldownPanel.value if (!disabled) { reactData.isActivated = getEventTargetNode(evnt, el).flag || getEventTargetNode(evnt, panelElem).flag if (visiblePanel && !reactData.isActivated) { @@ -369,7 +375,7 @@ export default defineComponent({ }] }, [ h('div', { - ref: refPulldowContent, + ref: refPulldownContent, class: 'vxe-pulldown--content', onClick: clickTargetEvent }, defaultSlot ? defaultSlot({ $pulldown: $xePulldown }) : []), @@ -378,7 +384,7 @@ export default defineComponent({ disabled: btnTransfer ? !initialized : true }, [ h('div', { - ref: refPulldowPnanel, + ref: refPulldownPanel, class: ['vxe-table--ignore-clear vxe-pulldown--panel', popupClassName ? (XEUtils.isFunction(popupClassName) ? popupClassName({ $pulldown: $xePulldown }) : popupClassName) : '', { [`size--${vSize}`]: vSize, 'is--shadow': showPopupShadow, diff --git a/packages/radio/src/button.ts b/packages/radio/src/button.ts index 87bb8e29..5d9373d4 100644 --- a/packages/radio/src/button.ts +++ b/packages/radio/src/button.ts @@ -122,7 +122,7 @@ export default defineComponent({ const vSize = computeSize.value const isDisabled = computeIsDisabled.value const name = computeName.value - const checked = computeChecked.value + const isChecked = computeChecked.value return h('label', { class: ['vxe-radio', 'vxe-radio-button', { @@ -135,7 +135,7 @@ export default defineComponent({ class: 'vxe-radio--input', type: 'radio', name, - checked, + checked: isChecked, disabled: isDisabled, onChange: changeEvent, onClick: clickEvent diff --git a/packages/radio/src/group.ts b/packages/radio/src/group.ts index 9bf02bea..cf407f64 100644 --- a/packages/radio/src/group.ts +++ b/packages/radio/src/group.ts @@ -97,11 +97,12 @@ export default defineComponent({ const radioGroupPrivateMethods: RadioGroupPrivateMethods = { handleChecked (params, evnt) { - emit('update:modelValue', params.label) + const value = params.label + emit('update:modelValue', value) dispatchEvent('change', params, evnt) // 自动更新校验状态 if ($xeForm && formItemInfo) { - $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, params.label) + $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, value) } } } @@ -131,10 +132,13 @@ export default defineComponent({ : [])) } - $xeRadioGroup.renderVN = renderVN - provide('$xeRadioGroup', $xeRadioGroup) - return renderVN + $xeRadioGroup.renderVN = renderVN + + return $xeRadioGroup + }, + render () { + return this.renderVN() } }) diff --git a/packages/row/src/row.ts b/packages/row/src/row.ts index cfad26a5..7ebe4507 100644 --- a/packages/row/src/row.ts +++ b/packages/row/src/row.ts @@ -106,10 +106,10 @@ export default defineComponent({ }, defaultSlot ? defaultSlot({}) : []) } - $xeRow.renderVN = renderVN - provide('$xeRow', $xeRow) + $xeRow.renderVN = renderVN + return $xeRow }, render () { diff --git a/packages/select/src/optgroup.ts b/packages/select/src/optgroup.ts index ac9dc6e5..11c68d8a 100644 --- a/packages/select/src/optgroup.ts +++ b/packages/select/src/optgroup.ts @@ -1,39 +1,48 @@ import { defineComponent, h, onUnmounted, provide, inject, ref, Ref, onMounted, PropType } from 'vue' import { XEOptionProvide, createOption, watchOption, destroyOption, assembleOption } from './util' -import type { VxeSelectConstructor, VxeOptionPropTypes } from '../../../types' +import type { VxeSelectConstructor, VxeOptgroupEmits, VxeOptgroupPropTypes } from '../../../types' export default defineComponent({ name: 'VxeOptgroup', props: { - label: { type: [String, Number, Boolean] as PropType, default: '' }, - visible: { type: Boolean as PropType, default: null }, - className: [String, Function] as PropType, - disabled: Boolean as PropType + label: { + type: [String, Number, Boolean] as PropType, + default: '' + }, + visible: { + type: Boolean as PropType, + default: null + }, + className: [String, Function] as PropType, + disabled: Boolean as PropType }, + emits: [] as VxeOptgroupEmits, setup (props, { slots }) { const elem = ref() as Ref const $xeSelect = inject('$xeSelect', {} as VxeSelectConstructor) - const option = createOption($xeSelect, props) - const xeOption: XEOptionProvide = { option } - option.options = [] + const optionConfig = createOption($xeSelect, props) + const $xeOptgroup: XEOptionProvide = { optionConfig } + optionConfig.options = [] - provide('xeoptgroup', xeOption) + provide('$xeOptgroup', $xeOptgroup) - watchOption(props, option) + watchOption(props, optionConfig) onMounted(() => { - assembleOption($xeSelect, elem.value, option) + const el = elem.value + assembleOption($xeSelect, el, optionConfig) }) onUnmounted(() => { - destroyOption($xeSelect, option) + destroyOption($xeSelect, optionConfig) }) return () => { + const defaultSlot = slots.default return h('div', { ref: elem - }, slots.default ? slots.default() : []) + }, defaultSlot ? defaultSlot({}) : []) } } }) diff --git a/packages/select/src/option.ts b/packages/select/src/option.ts index 5329d20d..315fc227 100644 --- a/packages/select/src/option.ts +++ b/packages/select/src/option.ts @@ -1,32 +1,40 @@ import { defineComponent, h, onUnmounted, inject, ref, Ref, onMounted, PropType } from 'vue' import { XEOptionProvide, createOption, watchOption, destroyOption, assembleOption } from './util' -import type { VxeSelectConstructor, VxeOptionPropTypes } from '../../../types' +import type { VxeSelectConstructor, VxeOptionEmits, VxeOptionPropTypes } from '../../../types' export default defineComponent({ name: 'VxeOption', props: { - value: null, - label: { type: [String, Number, Boolean] as PropType, default: '' }, - visible: { type: Boolean as PropType, default: null }, + value: [String, Number, Boolean] as PropType, + label: { + type: [String, Number, Boolean] as PropType, + default: '' + }, + visible: { + type: Boolean as PropType, + default: null + }, className: [String, Function] as PropType, disabled: Boolean as PropType }, + emits: [] as VxeOptionEmits, setup (props, { slots }) { const elem = ref() as Ref const $xeSelect = inject('$xeSelect', {} as VxeSelectConstructor) - const optGroup = inject('xeoptgroup', null) - const option = createOption($xeSelect, props) - option.slots = slots + const $xeOptgroup = inject('$xeOptgroup', null) + const optionConfig = createOption($xeSelect, props) + optionConfig.slots = slots - watchOption(props, option) + watchOption(props, optionConfig) onMounted(() => { - assembleOption($xeSelect, elem.value, option, optGroup) + const el = elem.value + assembleOption($xeSelect, el, optionConfig, $xeOptgroup) }) onUnmounted(() => { - destroyOption($xeSelect, option) + destroyOption($xeSelect, optionConfig) }) return () => { diff --git a/packages/select/src/select.ts b/packages/select/src/select.ts index 429de5c5..c2108410 100644 --- a/packages/select/src/select.ts +++ b/packages/select/src/select.ts @@ -1,12 +1,12 @@ import { defineComponent, h, Teleport, PropType, ref, Ref, inject, computed, provide, onUnmounted, reactive, nextTick, watch, onMounted, createCommentVNode } from 'vue' import XEUtils from 'xe-utils' -import { getConfig, getIcon, getI18n, globalEvents, GLOBAL_EVENT_KEYS, createEvent, useSize, VxeComponentSlotType } from '../../ui' +import { getConfig, getIcon, getI18n, globalEvents, GLOBAL_EVENT_KEYS, createEvent, useSize } from '../../ui' import { getEventTargetNode, getAbsolutePos } from '../../ui/src/dom' import { getLastZIndex, nextZIndex, getFuncText } from '../../ui/src/utils' import VxeInputComponent from '../../input/src/input' import { getSlotVNs } from '../../ui/src/vn' -import type { VxeSelectPropTypes, VxeSelectConstructor, SelectReactData, VxeSelectEmits, VxeInputConstructor, SelectMethods, SelectPrivateRef, VxeSelectMethods, VxeOptgroupProps, VxeOptionProps, VxeTableConstructor, VxeTablePrivateMethods, VxeFormDefines, VxeFormConstructor, VxeFormPrivateMethods, VxeModalConstructor, VxeModalMethods } from '../../../types' +import type { VxeSelectPropTypes, VxeSelectConstructor, SelectInternalData, SelectReactData, VxeSelectEmits, VxeComponentSlotType, VxeInputConstructor, SelectMethods, SelectPrivateRef, VxeSelectMethods, VxeOptgroupProps, VxeOptionProps, VxeTableConstructor, VxeDrawerConstructor, VxeDrawerMethods, VxeTablePrivateMethods, VxeFormDefines, VxeFormConstructor, VxeFormPrivateMethods, VxeModalConstructor, VxeModalMethods } from '../../../types' function isOptionVisible (option: any) { return option.visible !== false @@ -32,7 +32,10 @@ export default defineComponent({ default: null }, multiple: Boolean as PropType, - multiCharOverflow: { type: [Number, String] as PropType, default: () => getConfig().select.multiCharOverflow }, + multiCharOverflow: { + type: [Number, String] as PropType, + default: () => getConfig().select.multiCharOverflow + }, prefixIcon: String as PropType, placement: String as PropType, options: Array as PropType, @@ -42,21 +45,31 @@ export default defineComponent({ optionConfig: Object as PropType, className: [String, Function] as PropType, popupClassName: [String, Function] as PropType, - max: { type: [String, Number] as PropType, default: null }, - size: { type: String as PropType, default: () => getConfig().select.size || getConfig().size }, + max: { + type: [String, Number] as PropType, + default: null + }, + size: { + type: String as PropType, + default: () => getConfig().select.size || getConfig().size + }, filterable: Boolean as PropType, filterMethod: Function as PropType, remote: Boolean as PropType, remoteMethod: Function as PropType, emptyText: String as PropType, - // 已废弃，被 option-config.keyField 替换 - optionId: { type: String as PropType, default: () => getConfig().select.optionId }, - // 已废弃，被 option-config.useKey 替换 - optionKey: Boolean as PropType, transfer: { type: Boolean as PropType, default: null - } + }, + + // 已废弃，被 option-config.keyField 替换 + optionId: { + type: String as PropType, + default: () => getConfig().select.optionId + }, + // 已废弃，被 option-config.useKey 替换 + optionKey: Boolean as PropType }, emits: [ 'update:modelValue', @@ -69,9 +82,10 @@ export default defineComponent({ setup (props, context) { const { slots, emit } = context - const $xeModal = inject('$xeModal', null) - const $xeTable = inject('$xeTable', null) - const $xeForm = inject('$xeForm', null) + const $xeModal = inject<(VxeModalConstructor & VxeModalMethods)| null>('$xeModal', null) + const $xeDrawer = inject<(VxeDrawerConstructor & VxeDrawerMethods) | null>('$xeDrawer', null) + const $xeTable = inject<(VxeTableConstructor & VxeTablePrivateMethods) | null>('$xeTable', null) + const $xeForm = inject<(VxeFormConstructor & VxeFormPrivateMethods)| null>('$xeForm', null) const formItemInfo = inject('xeFormItemInfo', null) const xID = XEUtils.uniqueId() @@ -99,6 +113,10 @@ export default defineComponent({ searchLoading: false }) + const internalData: SelectInternalData = { + hpTimeout: undefined + } + const refElem = ref() as Ref const refInput = ref() as Ref const refInpSearch = ref() as Ref @@ -114,6 +132,7 @@ export default defineComponent({ props, context, reactData, + internalData, getRefMaps: () => refMaps } as unknown as VxeSelectConstructor & VxeSelectMethods @@ -148,7 +167,7 @@ export default defineComponent({ if (XEUtils.isBoolean(globalTransfer)) { return globalTransfer } - if ($xeTable || $xeModal || $xeForm) { + if ($xeTable || $xeModal || $xeDrawer || $xeForm) { return true } } @@ -168,11 +187,11 @@ export default defineComponent({ }) const computePropsOpts = computed(() => { - return props.optionProps || {} + return Object.assign({}, props.optionProps) }) const computeGroupPropsOpts = computed(() => { - return props.optionGroupProps || {} + return Object.assign({}, props.optionGroupProps) }) const computeLabelField = computed(() => { @@ -215,6 +234,28 @@ export default defineComponent({ return XEUtils.toNumber(props.multiCharOverflow) }) + const computeSelectLabel = computed(() => { + const { modelValue, multiple, remote } = props + const multiMaxCharNum = computeMultiMaxCharNum.value + if (modelValue && multiple) { + const vals = XEUtils.isArray(modelValue) ? modelValue : [modelValue] + if (remote) { + return vals.map(val => getRemoteSelectLabel(val)).join(', ') + } + return vals.map((val) => { + const label = getSelectLabel(val) + if (multiMaxCharNum > 0 && label.length > multiMaxCharNum) { + return `${label.substring(0, multiMaxCharNum)}...` + } + return label + }).join(', ') + } + if (remote) { + return getRemoteSelectLabel(modelValue) + } + return getSelectLabel(modelValue) + }) + const callSlot = (slotFunc: ((params: T) => VxeComponentSlotType | VxeComponentSlotType[]) | string | null, params: T) => { if (slotFunc) { if (XEUtils.isString(slotFunc)) { @@ -281,28 +322,6 @@ export default defineComponent({ return XEUtils.toValueString(item ? item[labelField as 'label'] : value) } - const computeSelectLabel = computed(() => { - const { modelValue, multiple, remote } = props - const multiMaxCharNum = computeMultiMaxCharNum.value - if (modelValue && multiple) { - const vals = XEUtils.isArray(modelValue) ? modelValue : [modelValue] - if (remote) { - return vals.map(val => getRemoteSelectLabel(val)).join(', ') - } - return vals.map((val) => { - const label = getSelectLabel(val) - if (multiMaxCharNum > 0 && label.length > multiMaxCharNum) { - return `${label.substring(0, multiMaxCharNum)}...` - } - return label - }).join(', ') - } - if (remote) { - return getRemoteSelectLabel(modelValue) - } - return getSelectLabel(modelValue) - }) - const getOptkey = () => { const optionOpts = computeOptionOpts.value return optionOpts.keyField || props.optionId || '_X_OPTION_KEY' @@ -473,13 +492,15 @@ export default defineComponent({ }) } - let hidePanelTimeout: number - const showOptionPanel = () => { const { loading, filterable } = props + const { hpTimeout } = internalData const isDisabled = computeIsDisabled.value if (!loading && !isDisabled) { - clearTimeout(hidePanelTimeout) + if (hpTimeout) { + clearTimeout(hpTimeout) + internalData.hpTimeout = undefined + } if (!reactData.initialized) { reactData.initialized = true } @@ -507,14 +528,14 @@ export default defineComponent({ reactData.searchValue = '' reactData.searchLoading = false reactData.visiblePanel = false - hidePanelTimeout = window.setTimeout(() => { + internalData.hpTimeout = window.setTimeout(() => { reactData.isAniVisible = false }, 350) } const changeEvent = (evnt: Event, selectValue: any) => { + emit('update:modelValue', selectValue) if (selectValue !== props.modelValue) { - emit('update:modelValue', selectValue) selectMethods.dispatchEvent('change', { value: selectValue }, evnt) // 自动更新校验状态 if ($xeForm && formItemInfo) { @@ -753,19 +774,25 @@ export default defineComponent({ reactData.isActivated = true } - const triggerSearchEvent = XEUtils.debounce(function () { + const handleSearchEvent = () => { const { remote, remoteMethod } = props const { searchValue } = reactData if (remote && remoteMethod) { reactData.searchLoading = true - Promise.resolve(remoteMethod({ searchValue })).then(() => nextTick()).catch(() => nextTick()).finally(() => { - reactData.searchLoading = false - refreshOption() - }) + Promise.resolve( + remoteMethod({ searchValue }) + ).then(() => nextTick()) + .catch(() => nextTick()) + .finally(() => { + reactData.searchLoading = false + refreshOption() + }) } else { refreshOption() } - }, 350, { trailing: true }) + } + + const triggerSearchEvent = XEUtils.debounce(handleSearchEvent, 350, { trailing: true }) const togglePanelEvent = (params: any) => { const { $event } = params @@ -978,7 +1005,7 @@ export default defineComponent({ }, defaultSlot ? defaultSlot({}) : []), h('span', { class: 'vxe-select-label' - }, selectLabel) + }, [selectLabel]) ]) } return h('div', { @@ -1078,8 +1105,6 @@ export default defineComponent({ ]) } - $xeSelect.renderVN = renderVN - watch(() => reactData.staticOptions, (value) => { if (value.some((item) => item.options && item.options.length)) { reactData.fullOptionList = [] @@ -1128,6 +1153,8 @@ export default defineComponent({ provide('$xeSelect', $xeSelect) + $xeSelect.renderVN = renderVN + return $xeSelect }, render () { diff --git a/packages/select/src/util.ts b/packages/select/src/util.ts index 0dac40b0..8a1ed70c 100644 --- a/packages/select/src/util.ts +++ b/packages/select/src/util.ts @@ -5,7 +5,7 @@ import { OptionInfo } from './option-info' import type { VxeSelectConstructor } from '../../../types' export interface XEOptionProvide { - option: OptionInfo; + optionConfig: OptionInfo; } export function isOption (option: any) { @@ -24,11 +24,11 @@ export function watchOption (props: any, option: OptionInfo) { }) } -export function assembleOption ($xeSelect: VxeSelectConstructor, el: HTMLDivElement, option: OptionInfo, optGroup?: XEOptionProvide | null) { +export function assembleOption ($xeSelect: VxeSelectConstructor, el: HTMLDivElement, option: OptionInfo, $xeOptgroup?: XEOptionProvide | null) { const { reactData } = $xeSelect const { staticOptions } = reactData const parentElem = el.parentNode - const parentOption = optGroup ? optGroup.option : null + const parentOption = $xeOptgroup ? $xeOptgroup.optionConfig : null const parentCols = parentOption ? parentOption.options : staticOptions if (parentElem && parentCols) { parentCols.splice(XEUtils.arrayIndexOf(parentElem.children, el), 0, option) diff --git a/packages/tabs/src/tab-pane.ts b/packages/tabs/src/tab-pane.ts index 4654fb2a..aa5fdc78 100644 --- a/packages/tabs/src/tab-pane.ts +++ b/packages/tabs/src/tab-pane.ts @@ -1,8 +1,9 @@ import { defineComponent, ref, h, reactive, PropType, watch, inject, onMounted, onUnmounted } from 'vue' import XEUtils from 'xe-utils' +import { createEvent } from '../../ui' import { assembleAnchorTab, destroyAnchorTab } from './util' -import type { VxeTabPanePropTypes, TabPaneReactData, TabPanePrivateRef, VxeTabPanePrivateComputed, VxeTabPaneConstructor, VxeTabPanePrivateMethods, VxeTabPaneDefines, VxeTabsConstructor, VxeTabsPrivateMethods } from '../../../types' +import type { VxeTabPanePropTypes, TabPaneReactData, TabPaneMethods, TabPanePrivateMethods, VxeTabPaneEmits, ValueOf, TabPanePrivateRef, VxeTabPanePrivateComputed, VxeTabPaneConstructor, VxeTabPanePrivateMethods, VxeTabPaneDefines, VxeTabsConstructor, VxeTabsPrivateMethods } from '../../../types' export default defineComponent({ name: 'VxeTabPane', @@ -15,9 +16,9 @@ export default defineComponent({ preload: Boolean as PropType, permissionCode: [String, Number] as PropType }, - emits: [], + emits: [] as VxeTabPaneEmits, setup (props, context) { - const { slots } = context + const { slots, emit } = context const xID = XEUtils.uniqueId() @@ -59,6 +60,19 @@ export default defineComponent({ getComputeMaps: () => computeMaps } as unknown as VxeTabPaneConstructor & VxeTabPanePrivateMethods + const dispatchEvent = (type: ValueOf, params: Record, evnt: Event | null) => { + emit(type, createEvent(evnt, { $tabPane: $xeTabPane }, params)) + } + + const tabPaneMethods: TabPaneMethods = { + dispatchEvent + } + + const tabPanePrivateMethods: TabPanePrivateMethods = { + } + + Object.assign($xeTabPane, tabPaneMethods, tabPanePrivateMethods) + watch(() => props.title, (val) => { tabConfig.title = val }) @@ -76,8 +90,9 @@ export default defineComponent({ }) onMounted(() => { - if ($xeTabs && refElem.value) { - assembleAnchorTab($xeTabs, refElem.value, tabConfig) + const elem = refElem.value + if ($xeTabs && elem) { + assembleAnchorTab($xeTabs, elem, tabConfig) } }) diff --git a/packages/tabs/src/tabs.ts b/packages/tabs/src/tabs.ts index 1a61c309..456fea12 100644 --- a/packages/tabs/src/tabs.ts +++ b/packages/tabs/src/tabs.ts @@ -5,7 +5,7 @@ import { toCssUnit } from '../..//ui/src/dom' import { warnLog } from '../../ui/src/log' import XEUtils from 'xe-utils' -import type { VxeTabsPropTypes, VxeTabPaneProps, VxeTabsEmits, TabsReactData, TabsPrivateRef, VxeTabsPrivateComputed, VxeTabsConstructor, VxeTabsPrivateMethods, VxeTabPaneDefines, ValueOf, TabsMethods, TabsPrivateMethods } from '../../../types' +import type { VxeTabsPropTypes, VxeTabPaneProps, VxeTabsEmits, TabsInternalData, TabsReactData, TabsPrivateRef, VxeTabsPrivateComputed, VxeTabsConstructor, VxeTabsPrivateMethods, VxeTabPaneDefines, ValueOf, TabsMethods, TabsPrivateMethods } from '../../../types' export default defineComponent({ name: 'VxeTabs', @@ -55,28 +55,22 @@ export default defineComponent({ resizeFlag: 1 }) - const refMaps: TabsPrivateRef = { - refElem + const internalData: TabsInternalData = { + slTimeout: undefined } - const handleFilterTab = (item: VxeTabPaneProps | VxeTabPaneDefines.TabConfig) => { - const { permissionCode } = item - if (permissionCode) { - if (!permission.checkVisible(permissionCode)) { - return false - } - } - return true + const refMaps: TabsPrivateRef = { + refElem } const computeTabOptions = computed(() => { const { options } = props - return (options || []).filter(handleFilterTab) + return (options || []).filter((item) => handleFilterTab(item)) }) const computeTabStaticOptions = computed(() => { const { staticTabs } = reactData - return staticTabs.filter(handleFilterTab) + return staticTabs.filter((item) => handleFilterTab(item)) }) const computeMaps: VxeTabsPrivateComputed = { @@ -92,6 +86,16 @@ export default defineComponent({ getComputeMaps: () => computeMaps } as unknown as VxeTabsConstructor & VxeTabsPrivateMethods + const handleFilterTab = (item: VxeTabPaneProps | VxeTabPaneDefines.TabConfig) => { + const { permissionCode } = item + if (permissionCode) { + if (!permission.checkVisible(permissionCode)) { + return false + } + } + return true + } + const callSlot = (slotFunc: any, params: any) => { if (slotFunc) { if (XEUtils.isString(slotFunc)) { @@ -218,13 +222,15 @@ export default defineComponent({ } } - let scrollTimeout: any = null - const startScrollAnimation = (offsetPos: number, offsetSize: number) => { + const { slTimeout } = internalData let offsetLeft = offsetSize let scrollCount = 6 let delayNum = 35 - clearTimeout(scrollTimeout) + if (slTimeout) { + clearTimeout(slTimeout) + internalData.slTimeout = undefined + } const scrollAnimate = () => { const headerWrapperEl = refHeadWrapperElem.value if (scrollCount > 0) { @@ -236,13 +242,13 @@ export default defineComponent({ if (clientWidth + scrollLeft < scrollWidth) { headerWrapperEl.scrollLeft += offsetLeft delayNum -= 4 - scrollTimeout = setTimeout(scrollAnimate, delayNum) + internalData.slTimeout = setTimeout(scrollAnimate, delayNum) } } else { if (scrollLeft > 0) { headerWrapperEl.scrollLeft -= offsetLeft delayNum -= 4 - scrollTimeout = setTimeout(scrollAnimate, delayNum) + internalData.slTimeout = setTimeout(scrollAnimate, delayNum) } } updateTabStyle() @@ -297,41 +303,43 @@ export default defineComponent({ }) } - const createHandlePrevNext = (isNext: boolean) => { - return () => { - const { activeName } = reactData - const tabOptions = computeTabOptions.value - const tabStaticOptions = computeTabStaticOptions.value - const list = tabStaticOptions.length ? tabStaticOptions : tabOptions - const index = XEUtils.findIndexOf(list, item => item.name === activeName) - if (index > -1) { - let item: VxeTabPaneProps | null = null - if (isNext) { - if (index < list.length - 1) { - item = list[index + 1] - } - } else { - if (index > 0) { - item = list[index - 1] - } + const handlePrevNext = (isNext: boolean) => { + const { activeName } = reactData + const tabOptions = computeTabOptions.value + const tabStaticOptions = computeTabStaticOptions.value + const list = tabStaticOptions.length ? tabStaticOptions : tabOptions + const index = XEUtils.findIndexOf(list, item => item.name === activeName) + if (index > -1) { + let item: VxeTabPaneProps | null = null + if (isNext) { + if (index < list.length - 1) { + item = list[index + 1] } - if (item) { - const name = item.name - const value = name - reactData.activeName = name - emit('update:modelValue', value) - addInitName(name, null) + } else { + if (index > 0) { + item = list[index - 1] } } - return nextTick() + if (item) { + const name = item.name + const value = name + reactData.activeName = name + emit('update:modelValue', value) + addInitName(name, null) + } } + return nextTick() } const tabsMethods: TabsMethods = { dispatchEvent, scrollToTab, - prev: createHandlePrevNext(false), - next: createHandlePrevNext(true), + prev () { + return handlePrevNext(false) + }, + next () { + return handlePrevNext(true) + }, prevTab () { if (process.env.VUE_APP_VXE_ENV === 'development') { warnLog('vxe.error.delFunc', ['prevTab', 'prev']) @@ -475,9 +483,9 @@ export default defineComponent({ const { activeName } = reactData const activeDefaultTab = tabList.find(item => item.name === activeName) if (destroyOnClose) { - return activeDefaultTab ? [renderTabPane(activeDefaultTab)] : createCommentVNode() + return [activeDefaultTab ? renderTabPane(activeDefaultTab) : createCommentVNode()] } - return tabList.map(renderTabPane) + return tabList.map((item) => renderTabPane(item)) } const renderVN = () => { @@ -552,7 +560,9 @@ export default defineComponent({ } watch(() => reactData.resizeFlag, () => { - nextTick(updateTabStyle) + nextTick(() => { + updateTabStyle() + }) }) nextTick(() => { @@ -567,13 +577,13 @@ export default defineComponent({ globalEvents.off($xeTabs, 'resize') }) - $xeTabs.renderVN = renderVN - provide('$xeTabs', $xeTabs) addInitName(props.modelValue, null) initDefaultName(reactData.staticTabs.length ? reactData.staticTabs : props.options) + $xeTabs.renderVN = renderVN + return $xeTabs }, render () { diff --git a/packages/textarea/src/textarea.ts b/packages/textarea/src/textarea.ts index 42e56c3e..31f78625 100644 --- a/packages/textarea/src/textarea.ts +++ b/packages/textarea/src/textarea.ts @@ -12,27 +12,45 @@ export default defineComponent({ props: { modelValue: [String, Number] as PropType, className: String as PropType, - immediate: { type: Boolean as PropType, default: true }, + immediate: { + type: Boolean as PropType, + default: true + }, name: String as PropType, readonly: { type: Boolean as PropType, default: null }, - editable: { type: Boolean as PropType, default: true }, + editable: { + type: Boolean as PropType, + default: true + }, disabled: { type: Boolean as PropType, default: null }, placeholder: String as PropType, maxLength: [String, Number] as PropType, - rows: { type: [String, Number] as PropType, default: null }, - cols: { type: [String, Number] as PropType, default: null }, + rows: { + type: [String, Number] as PropType, + default: null + }, + cols: { + type: [String, Number] as PropType, + default: null + }, showWordCount: Boolean as PropType, countMethod: Function as PropType, autosize: [Boolean, Object] as PropType, form: String as PropType, - resize: { type: String as PropType, default: () => getConfig().textarea.resize }, - size: { type: String as PropType, default: () => getConfig().textarea.size || getConfig().size }, + resize: { + type: String as PropType, + default: () => getConfig().textarea.resize + }, + size: { + type: String as PropType, + default: () => getConfig().textarea.size || getConfig().size + }, // 已废弃 maxlength: [String, Number] as PropType }, @@ -193,7 +211,7 @@ export default defineComponent({ $xeTextarea.dispatchEvent(evnt.type, { value }, evnt) } - const emitUpdate = (value: string, evnt: Event) => { + const handleChange = (value: string, evnt: Event) => { reactData.inputValue = value emit('update:modelValue', value) if (XEUtils.toValueString(props.modelValue) !== value) { @@ -211,7 +229,7 @@ export default defineComponent({ const value = textElem.value reactData.inputValue = value if (immediate) { - emitUpdate(value, evnt) + handleChange(value, evnt) } $xeTextarea.dispatchEvent('input', { value }, evnt) handleResize() @@ -222,7 +240,7 @@ export default defineComponent({ if (immediate) { triggerEvent(evnt) } else { - emitUpdate(reactData.inputValue, evnt) + handleChange(reactData.inputValue, evnt) } } @@ -230,7 +248,7 @@ export default defineComponent({ const { immediate } = props const { inputValue } = reactData if (!immediate) { - emitUpdate(inputValue, evnt) + handleChange(inputValue, evnt) } $xeTextarea.dispatchEvent('blur', { value: inputValue }, evnt) } diff --git a/packages/tooltip/src/tooltip.ts b/packages/tooltip/src/tooltip.ts index cbb02503..5abb979c 100644 --- a/packages/tooltip/src/tooltip.ts +++ b/packages/tooltip/src/tooltip.ts @@ -5,23 +5,44 @@ import { getLastZIndex, nextZIndex } from '../../ui/src/utils' import { getAbsolutePos, getDomNode } from '../../ui/src/dom' import { getSlotVNs } from '../../ui/src/vn' -import type { VxeTooltipPropTypes, VxeTooltipConstructor, VxeTooltipEmits, TooltipReactData, TooltipMethods, TooltipPrivateRef } from '../../../types' +import type { VxeTooltipPropTypes, VxeTooltipConstructor, VxeTooltipEmits, TooltipInternalData, TooltipReactData, TooltipMethods, TooltipPrivateRef } from '../../../types' export default defineComponent({ name: 'VxeTooltip', props: { modelValue: Boolean, - size: { type: String as PropType, default: () => getConfig().tooltip.size || getConfig().size }, - trigger: { type: String as PropType, default: () => getConfig().tooltip.trigger || 'hover' }, - theme: { type: String as PropType, default: () => getConfig().tooltip.theme || 'dark' }, - content: { type: [String, Number] as PropType, default: null }, + size: { + type: String as PropType, + default: () => getConfig().tooltip.size || getConfig().size + }, + trigger: { + type: String as PropType, + default: () => getConfig().tooltip.trigger || 'hover' + }, + theme: { + type: String as PropType, + default: () => getConfig().tooltip.theme || 'dark' + }, + content: { + type: [String, Number] as PropType, + default: null + }, useHTML: Boolean as PropType, zIndex: [String, Number] as PropType, popupClassName: [String, Function] as PropType, - isArrow: { type: Boolean as PropType, default: true }, + isArrow: { + type: Boolean as PropType, + default: true + }, enterable: Boolean as PropType, - enterDelay: { type: Number as PropType, default: () => getConfig().tooltip.enterDelay }, - leaveDelay: { type: Number as PropType, default: () => getConfig().tooltip.leaveDelay } + enterDelay: { + type: Number as PropType, + default: () => getConfig().tooltip.enterDelay + }, + leaveDelay: { + type: Number as PropType, + default: () => getConfig().tooltip.leaveDelay + } }, emits: [ 'update:modelValue' @@ -48,6 +69,9 @@ export default defineComponent({ } }) + const internalData: TooltipInternalData = { + } + const refElem = ref() as Ref const refMaps: TooltipPrivateRef = { @@ -59,6 +83,7 @@ export default defineComponent({ props, context, reactData, + internalData, getRefMaps: () => refMaps } as unknown as VxeTooltipConstructor @@ -162,11 +187,13 @@ export default defineComponent({ return tooltipMethods.updatePlacement() } - const showDelayTip = XEUtils.debounce(() => { - if (reactData.tipActive) { - showTip() - } - }, props.enterDelay, { leading: false, trailing: true }) + const handleDelayFn = () => { + internalData.showDelayTip = XEUtils.debounce(() => { + if (reactData.tipActive) { + showTip() + } + }, props.enterDelay, { leading: false, trailing: true }) + } const handleVisible = (target: HTMLElement | null, content?: VxeTooltipPropTypes.Content) => { const contentSlot = slots.content @@ -174,12 +201,15 @@ export default defineComponent({ return nextTick() } if (target) { + const { showDelayTip } = internalData const { trigger, enterDelay } = props reactData.tipActive = true reactData.tipTarget = target reactData.tipContent = content if (enterDelay && trigger === 'hover') { - showDelayTip() + if (showDelayTip) { + showDelayTip() + } } else { return showTip() } @@ -214,22 +244,85 @@ export default defineComponent({ const el = refElem.value if (tipTarget && el) { updateTipStyle() - return nextTick().then(updateTipStyle) + return nextTick().then(() => { + updateTipStyle() + }) } }) }, isActived () { return reactData.tipActive }, - setActived (actived) { - reactData.tipActive = !!actived + setActived (active) { + reactData.tipActive = !!active } } Object.assign($xeTooltip, tooltipMethods) - watch(() => props.content, () => { - reactData.tipContent = props.content + const renderContent = () => { + const { useHTML } = props + const { tipContent } = reactData + const contentSlot = slots.content + if (contentSlot) { + return h('div', { + key: 1, + class: 'vxe-table--tooltip-content' + }, getSlotVNs(contentSlot({}))) + } + if (useHTML) { + return h('div', { + key: 2, + class: 'vxe-table--tooltip-content', + innerHTML: tipContent + }) + } + return h('div', { + key: 3, + class: 'vxe-table--tooltip-content' + }, `${tipContent}`) + } + + const renderVN = () => { + const { popupClassName, theme, isArrow, enterable } = props + const { tipActive, visible, tipStore } = reactData + const defaultSlot = slots.default + const vSize = computeSize.value + let ons + if (enterable) { + ons = { + onMouseenter: wrapperMouseenterEvent, + onMouseleave: wrapperMouseleaveEvent + } + } + return h('div', { + ref: refElem, + class: ['vxe-table--tooltip-wrapper', `theme--${theme}`, popupClassName ? (XEUtils.isFunction(popupClassName) ? popupClassName({ $tooltip: $xeTooltip }) : popupClassName) : '', { + [`size--${vSize}`]: vSize, + [`placement--${tipStore.placement}`]: tipStore.placement, + 'is--enterable': enterable, + 'is--visible': visible, + 'is--arrow': isArrow, + 'is--active': tipActive + }], + style: tipStore.style, + ...ons + }, [ + renderContent(), + h('div', { + class: 'vxe-table--tooltip-arrow', + style: tipStore.arrowStyle + }), + ...(defaultSlot ? getSlotVNs(defaultSlot({})) : []) + ]) + } + + watch(() => props.enterDelay, () => { + handleDelayFn() + }) + + watch(() => props.content, (val) => { + reactData.tipContent = val }) watch(() => props.modelValue, (val) => { @@ -245,7 +338,7 @@ export default defineComponent({ onMounted(() => { nextTick(() => { - const { trigger, content, modelValue } = props + const { trigger, content } = props const wrapperElem = refElem.value if (wrapperElem) { const parentNode = wrapperElem.parentNode @@ -270,7 +363,7 @@ export default defineComponent({ target.onclick = clickEvent } } - if (modelValue) { + if (props.modelValue) { handleVisible(target, content) } } @@ -279,16 +372,12 @@ export default defineComponent({ }) onBeforeUnmount(() => { - const { trigger } = props const { target } = reactData const wrapperElem = refElem.value if (target) { - if (trigger === 'hover') { - target.onmouseenter = null - target.onmouseleave = null - } else if (trigger === 'click') { - target.onclick = null - } + target.onmouseenter = null + target.onmouseleave = null + target.onclick = null } if (wrapperElem) { const parentNode = wrapperElem.parentNode @@ -298,62 +387,7 @@ export default defineComponent({ } }) - const renderContent = () => { - const { useHTML } = props - const { tipContent } = reactData - const contentSlot = slots.content - if (contentSlot) { - return h('div', { - key: 1, - class: 'vxe-table--tooltip-content' - }, getSlotVNs(contentSlot({}))) - } - if (useHTML) { - return h('div', { - key: 2, - class: 'vxe-table--tooltip-content', - innerHTML: tipContent - }) - } - return h('div', { - key: 3, - class: 'vxe-table--tooltip-content' - }, `${tipContent}`) - } - - const renderVN = () => { - const { popupClassName, theme, isArrow, enterable } = props - const { tipActive, visible, tipStore } = reactData - const defaultSlot = slots.default - const vSize = computeSize.value - let ons - if (enterable) { - ons = { - onMouseenter: wrapperMouseenterEvent, - onMouseleave: wrapperMouseleaveEvent - } - } - return h('div', { - ref: refElem, - class: ['vxe-table--tooltip-wrapper', `theme--${theme}`, popupClassName ? (XEUtils.isFunction(popupClassName) ? popupClassName({ $tooltip: $xeTooltip }) : popupClassName) : '', { - [`size--${vSize}`]: vSize, - [`placement--${tipStore.placement}`]: tipStore.placement, - 'is--enterable': enterable, - 'is--visible': visible, - 'is--arrow': isArrow, - 'is--active': tipActive - }], - style: tipStore.style, - ...ons - }, [ - renderContent(), - h('div', { - class: 'vxe-table--tooltip-arrow', - style: tipStore.arrowStyle - }), - ...(defaultSlot ? getSlotVNs(defaultSlot({})) : []) - ]) - } + handleDelayFn() $xeTooltip.renderVN = renderVN diff --git a/packages/tree-select/src/tree-select.ts b/packages/tree-select/src/tree-select.ts index 5ce0c6fd..f45d40cb 100644 --- a/packages/tree-select/src/tree-select.ts +++ b/packages/tree-select/src/tree-select.ts @@ -1,4 +1,4 @@ -import { defineComponent, ref, computed, h, PropType, Ref, nextTick, inject, reactive, Teleport, createCommentVNode, onMounted, onUnmounted, watch } from 'vue' +import { defineComponent, ref, computed, h, PropType, Ref, nextTick, inject, provide, reactive, Teleport, createCommentVNode, onMounted, onUnmounted, watch } from 'vue' import { getConfig, getI18n, getIcon, globalEvents, createEvent, useSize } from '../../ui' import { getEventTargetNode, getAbsolutePos } from '../../ui/src/dom' import { getLastZIndex, nextZIndex } from '../../ui/src/utils' @@ -6,7 +6,7 @@ import XEUtils from 'xe-utils' import VxeInputComponent from '../../input/src/input' import VxeTreeComponent from '../../tree/src/tree' -import type { TreeSelectReactData, VxeTreeSelectEmits, TreeSelectPrivateRef, TreeSelectPrivateMethods, TreeSelectMethods, VxeTreeSelectPrivateComputed, VxeTreeSelectPropTypes, VxeTreeSelectConstructor, VxeFormDefines, VxeTreeSelectPrivateMethods, VxeTableConstructor, VxeTablePrivateMethods, VxeFormConstructor, VxeFormPrivateMethods, VxeInputConstructor, VxeModalConstructor, VxeModalMethods } from '../../../types' +import type { TreeSelectReactData, VxeTreeSelectEmits, TreeSelectInternalData, TreeSelectPrivateRef, TreeSelectPrivateMethods, TreeSelectMethods, VxeTreeSelectPrivateComputed, VxeTreeSelectPropTypes, VxeTreeSelectConstructor, VxeFormDefines, VxeDrawerConstructor, VxeDrawerMethods, VxeTreeSelectPrivateMethods, VxeTableConstructor, VxeTablePrivateMethods, VxeFormConstructor, VxeFormPrivateMethods, VxeInputConstructor, VxeModalConstructor, VxeModalMethods } from '../../../types' function getOptUniqueId () { return XEUtils.uniqueId('node_') @@ -37,7 +37,10 @@ export default defineComponent({ placement: String as PropType, options: Array as PropType, optionProps: Object as PropType, - size: { type: String as PropType, default: () => getConfig().select.size || getConfig().size }, + size: { + type: String as PropType, + default: () => getConfig().select.size || getConfig().size + }, remote: Boolean as PropType, remoteMethod: Function as PropType, treeConfig: Object as PropType, @@ -58,9 +61,10 @@ export default defineComponent({ setup (props, context) { const { emit, slots } = context - const $xeModal = inject('$xeModal', null) - const $xeTable = inject('$xeTable', null) - const $xeForm = inject('$xeForm', null) + const $xeModal = inject<(VxeModalConstructor & VxeModalMethods)| null>('$xeModal', null) + const $xeDrawer = inject<(VxeDrawerConstructor & VxeDrawerMethods) | null>('$xeDrawer', null) + const $xeTable = inject<(VxeTableConstructor & VxeTablePrivateMethods) | null>('$xeTable', null) + const $xeForm = inject<(VxeFormConstructor & VxeFormPrivateMethods) | null>('$xeForm', null) const formItemInfo = inject('xeFormItemInfo', null) const xID = XEUtils.uniqueId() @@ -86,6 +90,10 @@ export default defineComponent({ isActivated: false }) + const internalData: TreeSelectInternalData = { + hpTimeout: undefined + } + const refMaps: TreeSelectPrivateRef = { refElem } @@ -119,7 +127,7 @@ export default defineComponent({ if (XEUtils.isBoolean(globalTransfer)) { return globalTransfer } - if ($xeTable || $xeModal || $xeForm) { + if ($xeTable || $xeModal || $xeDrawer || $xeForm) { return true } } @@ -185,9 +193,9 @@ export default defineComponent({ const computeSelectLabel = computed(() => { const { modelValue } = props const { fullNodeMaps } = reactData + const labelField = computeLabelField.value return (XEUtils.isArray(modelValue) ? modelValue : [modelValue]).map(value => { const cacheItem = fullNodeMaps[value] - const labelField = computeLabelField.value return cacheItem ? cacheItem.item[labelField] : value }).join(', ') }) @@ -200,6 +208,7 @@ export default defineComponent({ props, context, reactData, + internalData, getRefMaps: () => refMaps, getComputeMaps: () => computeMaps @@ -235,7 +244,7 @@ export default defineComponent({ parent: any nodes: any[] }> = {} - XEUtils.eachTree(options, (item, index, items, parent, nodes) => { + XEUtils.eachTree(options, (item, index, items, path, parent, nodes) => { let nodeid = getOptid(item) if (!nodeid) { nodeid = getOptUniqueId() @@ -325,13 +334,11 @@ export default defineComponent({ }) } - let hidePanelTimeout: number - const showOptionPanel = () => { const { loading } = props const isDisabled = computeIsDisabled.value if (!loading && !isDisabled) { - clearTimeout(hidePanelTimeout) + clearTimeout(internalData.hpTimeout) if (!reactData.initialized) { reactData.initialized = true } @@ -347,16 +354,16 @@ export default defineComponent({ const hideOptionPanel = () => { reactData.visiblePanel = false - hidePanelTimeout = window.setTimeout(() => { + internalData.hpTimeout = window.setTimeout(() => { reactData.visibleAnimate = false }, 350) } const changeEvent = (evnt: Event, selectValue: any) => { const { fullNodeMaps } = reactData + emit('update:modelValue', selectValue) if (selectValue !== props.modelValue) { const cacheItem = fullNodeMaps[selectValue] - emit('update:modelValue', selectValue) treeSelectMethods.dispatchEvent('change', { value: selectValue, option: cacheItem ? cacheItem.item : null }, evnt) // 自动更新校验状态 if ($xeForm && formItemInfo) { @@ -609,8 +616,6 @@ export default defineComponent({ ]) } - $xeTreeSelect.renderVN = renderVN - watch(() => props.options, () => { cacheItemMap() }) @@ -629,6 +634,10 @@ export default defineComponent({ globalEvents.off($xeTreeSelect, 'blur') }) + provide('$xeTreeSelect', $xeTreeSelect) + + $xeTreeSelect.renderVN = renderVN + return $xeTreeSelect }, render () { diff --git a/packages/tree/src/tree.ts b/packages/tree/src/tree.ts index 971278f1..68876b95 100644 --- a/packages/tree/src/tree.ts +++ b/packages/tree/src/tree.ts @@ -109,7 +109,10 @@ export default defineComponent({ type: String as PropType, default: () => getConfig().tree.iconLoaded }, - size: { type: String as PropType, default: () => getConfig().tree.size || getConfig().size } + size: { + type: String as PropType, + default: () => getConfig().tree.size || getConfig().size + } }, emits: [ 'update:modelValue', @@ -490,7 +493,7 @@ export default defineComponent({ const { lazy, transform } = props const { nodeMaps } = reactData if (!lazy) { - return nextTick() + return Promise.resolve([]) } const childrenField = computeChildrenField.value const parentNodeItem = nodeMaps[getNodeId(node)] @@ -1135,8 +1138,6 @@ export default defineComponent({ ]) } - $xeTree.renderVN = renderVN - const dataFlag = ref(0) watch(() => props.data ? props.data.length : 0, () => { dataFlag.value++ @@ -1172,6 +1173,8 @@ export default defineComponent({ updateData(props.data || []) updateCheckboxChecked(props.checkNodeKeys || []) + $xeTree.renderVN = renderVN + return $xeTree }, render () { diff --git a/packages/ui/index.ts b/packages/ui/index.ts index 3cca7c46..59f548ce 100644 --- a/packages/ui/index.ts +++ b/packages/ui/index.ts @@ -32,13 +32,6 @@ export function setup (options?: VxeGlobalConfig) { VxeUI.config = config VxeUI.setup = setup -/** - * 已废弃 - * @deprecated - */ -export const globalStore = {} -VxeUI.globalStore = globalStore - setConfig({ alert: {}, anchor: {}, diff --git a/packages/upload/src/upload.ts b/packages/upload/src/upload.ts index b9e844a2..d1f2bf9a 100644 --- a/packages/upload/src/upload.ts +++ b/packages/upload/src/upload.ts @@ -373,7 +373,7 @@ export default defineComponent({ emit(type, createEvent(evnt, { $upload: $xeUpload }, params)) } - const emitModel = (value: VxeUploadDefines.FileObjItem[]) => { + const handleChange = (value: VxeUploadDefines.FileObjItem[]) => { const { singleMode, urlMode } = props const urlProp = computeUrlProp.value let restList = value ? value.slice(0) : [] @@ -534,7 +534,7 @@ export default defineComponent({ cacheItem.percent = 0 handleUploadResult(item, file).then(() => { if (urlMode) { - emitModel(reactData.fileList) + handleChange(reactData.fileList) } }) } @@ -645,7 +645,7 @@ export default defineComponent({ reactData.fileList = newFileList reactData.fileCacheMaps = cacheMaps Promise.all(urlMode ? uploadPromiseRests : []).then(() => { - emitModel(newFileList) + handleChange(newFileList) // 自动更新校验状态 if ($xeForm && formItemInfo) { $xeForm.triggerItemEvent(evnt as any, formItemInfo.itemConfig.field, newFileList) @@ -682,7 +682,7 @@ export default defineComponent({ const handleRemoveEvent = (evnt: MouseEvent, item: VxeUploadDefines.FileObjItem, index: number) => { const { fileList } = reactData fileList.splice(index, 1) - emitModel(fileList) + handleChange(fileList) // 自动更新校验状态 if ($xeForm && formItemInfo) { $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, fileList) @@ -1278,8 +1278,6 @@ export default defineComponent({ ]) } - $xeUpload.renderVN = renderVN - const listFlag = ref(0) watch(() => props.modelValue ? props.modelValue.length : 0, () => { listFlag.value++ @@ -1305,6 +1303,8 @@ export default defineComponent({ updateFileList() + $xeUpload.renderVN = renderVN + return $xeUpload }, render () { diff --git a/tsconfig.json b/tsconfig.json index 8f0cedaa..a66507c0 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -31,8 +31,6 @@ ] }, "include": [ - "src/**/*.ts", - "src/**/*.tsx", "examples/**/*.ts", "examples/**/*.tsx", "examples/**/*.vue", diff --git a/types/components/calendar.d.ts b/types/components/calendar.d.ts index 0e596e5e..187f950d 100644 --- a/types/components/calendar.d.ts +++ b/types/components/calendar.d.ts @@ -72,6 +72,12 @@ export interface CalendarReactData { currentDate: any } +export interface CalendarInternalData { + yearSize: number + monthSize: number + quarterSize: number +} + export interface CalendarMethods { dispatchEvent(type: ValueOf, params: Record, evnt: Event | null): void } diff --git a/types/components/carousel.d.ts b/types/components/carousel.d.ts index f74eb445..853d3ff6 100644 --- a/types/components/carousel.d.ts +++ b/types/components/carousel.d.ts @@ -63,6 +63,11 @@ export interface CarouselReactData { itemHeight: number } +export interface CarouselInternalData { + apTimeout: undefined | number + stopFlag: boolean +} + export interface CarouselMethods { dispatchEvent(type: ValueOf, params: Record, evnt: Event | null): void /** diff --git a/types/components/countdown.d.ts b/types/components/countdown.d.ts index 212d4bce..703494ac 100644 --- a/types/components/countdown.d.ts +++ b/types/components/countdown.d.ts @@ -53,6 +53,10 @@ export interface CountdownReactData { secondNum: number } +export interface CountdownInternalData { + dnTimeout: number | undefined +} + export interface CountdownMethods { dispatchEvent(type: ValueOf, params: Record, evnt: Event | null): void } diff --git a/types/components/date-picker.d.ts b/types/components/date-picker.d.ts index 1af6113b..f7f6e81f 100644 --- a/types/components/date-picker.d.ts +++ b/types/components/date-picker.d.ts @@ -34,13 +34,13 @@ export namespace VxeDatePickerPropTypes { export type Readonly = boolean export type Disabled = boolean export type Placeholder = string - export type Maxlength = string | number + export type MaxLength = string | number export type Multiple = boolean export type ShowWordCount = boolean export type CountMethod = (params: { value: string }) => number - export type Autocomplete = string + export type AutoComplete = string export type Align = string export type Form = string export type Min = string | number @@ -64,6 +64,17 @@ export namespace VxeDatePickerPropTypes { export type SuffixIcon = string export type Placement = 'top' | 'bottom' | '' | null export type Transfer = boolean + + /** + * 请使用 AutoComplete + * @deprecated + */ + export type Autocomplete = string + /** + * 请使用 MaxLength + * @deprecated + */ + export type Maxlength = string | number } export interface VxeDatePickerProps { @@ -77,7 +88,7 @@ export interface VxeDatePickerProps { readonly?: VxeDatePickerPropTypes.Readonly disabled?: VxeDatePickerPropTypes.Disabled placeholder?: VxeDatePickerPropTypes.Placeholder - maxlength?: VxeDatePickerPropTypes.Maxlength + maxLength?: VxeDatePickerPropTypes.MaxLength multiple?: VxeDatePickerPropTypes.Multiple /** * 是否显示字数统计 @@ -131,11 +142,11 @@ export interface DatePickerReactData { panelIndex: number visiblePanel: boolean isAniVisible: boolean - panelStyle: VxeComponentStyleType | null + panelStyle: VxeComponentStyleType panelPlacement: VxeDatePickerPropTypes.Placement isActivated: boolean inputValue: any - datetimePanelValue: any + datetimePanelValue: Date | null datePanelValue: Date | null datePanelLabel: string datePanelType: VxeDatePickerDefines.DatePanelType @@ -143,6 +154,13 @@ export interface DatePickerReactData { currentDate: any } +export interface DatePickerInternalData { + yearSize: number + monthSize: number + quarterSize: number + hpTimeout?: undefined | number +} + export interface DatePickerMethods { dispatchEvent(type: ValueOf, params: Record, evnt: Event | null): void /** diff --git a/types/components/drawer.d.ts b/types/components/drawer.d.ts index 77624e88..391da35b 100644 --- a/types/components/drawer.d.ts +++ b/types/components/drawer.d.ts @@ -105,7 +105,6 @@ export interface DrawerReactData { visible: boolean contentVisible: boolean drawerZIndex: number - firstOpen: boolean } export interface DrawerMethods { diff --git a/types/components/form.d.ts b/types/components/form.d.ts index 82ce8666..f4012dbd 100644 --- a/types/components/form.d.ts +++ b/types/components/form.d.ts @@ -1,6 +1,7 @@ import { RenderFunction, SetupContext, Ref, ComputedRef } from 'vue' import { DefineVxeComponentApp, DefineVxeComponentOptions, DefineVxeComponentInstance, VxeComponentBaseOptions, VxeComponentEventParams, VxeComponentSizeType, ValueOf, VxeComponentSlotType } from '@vxe-ui/core' import { VxeFormItemPropTypes, VxeFormItemProps } from './form-item' +import { VxeGridConstructor } from './grid' /* eslint-disable no-use-before-define,@typescript-eslint/ban-types */ @@ -18,7 +19,7 @@ export interface VxeFormConstructor extends VxeComponentBaseOptions, Vx getComputeMaps(): FormPrivateComputed renderVN: RenderFunction - xegrid: any + xegrid: VxeGridConstructor | null } export interface FormPrivateRef { @@ -122,7 +123,8 @@ export interface FormReactData { } export interface FormInternalData { - tooltipTimeout: any + meTimeout: undefined | number + stTimeout: undefined | number tooltipStore: { item: VxeFormDefines.ItemInfo | null visible: boolean diff --git a/types/components/icon-picker.d.ts b/types/components/icon-picker.d.ts index f6b479cf..11e70250 100644 --- a/types/components/icon-picker.d.ts +++ b/types/components/icon-picker.d.ts @@ -70,6 +70,10 @@ export interface IconPickerReactData { isActivated: boolean } +export interface IconPickerInternalData { + hpTimeout?: undefined | number +} + export interface IconPickerMethods { dispatchEvent(type: ValueOf, params: Record, evnt: Event | null): void /** diff --git a/types/components/input.d.ts b/types/components/input.d.ts index c980446c..6ea831b2 100644 --- a/types/components/input.d.ts +++ b/types/components/input.d.ts @@ -160,7 +160,7 @@ export interface InputReactData { showPwd: boolean visiblePanel: boolean isAniVisible: boolean - panelStyle: VxeComponentStyleType | null + panelStyle: VxeComponentStyleType panelPlacement: VxeInputPropTypes.Placement isActivated: boolean inputValue: any @@ -172,6 +172,14 @@ export interface InputReactData { currentDate: any } +export interface InputInternalData { + yearSize: number + monthSize: number + quarterSize: number + hpTimeout?: undefined | number + dnTimeout?: undefined | number +} + export interface InputMethods { dispatchEvent(type: ValueOf, params: Record, evnt: Event | null): void /** diff --git a/types/components/list.d.ts b/types/components/list.d.ts index acc4c66d..10ca96c2 100644 --- a/types/components/list.d.ts +++ b/types/components/list.d.ts @@ -77,6 +77,7 @@ export interface ListReactData { } export interface ListInternalData { + resizeObserver: ResizeObserver | undefined fullData: any[] lastScrollLeft: number lastScrollTop: number diff --git a/types/components/number-input.d.ts b/types/components/number-input.d.ts index 7863aebf..239db9a2 100644 --- a/types/components/number-input.d.ts +++ b/types/components/number-input.d.ts @@ -95,12 +95,12 @@ export interface VxeNumberInputProps { * 请使用 autoComplete * @deprecated */ - autocomplete?: VxeNumberInputPropTypes.Autocomplete + autocomplete?: VxeNumberInputPropTypes.AutoComplete /** * 请使用 autoComplete * @deprecated */ - maxlength?: VxeNumberInputPropTypes.Maxlength + maxlength?: VxeNumberInputPropTypes.MaxLength } export interface NumberInputPrivateComputed { @@ -112,6 +112,10 @@ export interface NumberInputReactData { inputValue: VxeNumberInputPropTypes.ModelValue | undefined } +export interface NumberInputInternalData { + dnTimeout?: undefined | number +} + export interface NumberInputMethods { dispatchEvent(type: ValueOf, params: Record, evnt: Event | null): void /** diff --git a/types/components/optgroup.d.ts b/types/components/optgroup.d.ts index 4cd018a6..a52e5492 100644 --- a/types/components/optgroup.d.ts +++ b/types/components/optgroup.d.ts @@ -24,22 +24,28 @@ export interface OptgroupPrivateRef { export interface VxeOptgroupPrivateRef extends OptgroupPrivateRef { } export namespace VxeOptgroupPropTypes { + export type Value = VxeOptionPropTypes.Value + export type Label = VxeOptionPropTypes.Label + export type Visible = VxeOptionPropTypes.Visible + export type ClassName = VxeOptionPropTypes.ClassName + export type Disabled = VxeOptionPropTypes.Disabled + export type Slots = VxeOptionPropTypes.Slots } export interface VxeOptgroupProps { /** * 显示内容 */ - label?: VxeOptionPropTypes.Label + label?: VxeOptgroupPropTypes.Label /** * 是否禁用 */ - visible?: VxeOptionPropTypes.Visible - className?: VxeOptionPropTypes.ClassName + visible?: VxeOptgroupPropTypes.Visible + className?: VxeOptgroupPropTypes.ClassName /** * 是否禁用 */ - disabled?: VxeOptionPropTypes.Disabled + disabled?: VxeOptgroupPropTypes.Disabled } export interface OptgroupPrivateComputed { diff --git a/types/components/pulldown.d.ts b/types/components/pulldown.d.ts index 94f42166..3ab605a6 100644 --- a/types/components/pulldown.d.ts +++ b/types/components/pulldown.d.ts @@ -74,13 +74,17 @@ export interface VxePulldownPrivateComputed extends PulldownPrivateComputed { } export interface PulldownReactData { initialized: boolean panelIndex: number - panelStyle: VxeComponentStyleType | null + panelStyle: VxeComponentStyleType panelPlacement: string | null visiblePanel: boolean visibleAnimate: boolean isActivated: boolean } +export interface PulldownInternalData { + hpTimeout?: undefined | number +} + export interface PulldownMethods { dispatchEvent(type: ValueOf, params: Record, evnt: Event | null): void /** diff --git a/types/components/select.d.ts b/types/components/select.d.ts index 8171fa99..6d9cc3e9 100644 --- a/types/components/select.d.ts +++ b/types/components/select.d.ts @@ -134,6 +134,10 @@ export interface SelectReactData { searchLoading: boolean } +export interface SelectInternalData { + hpTimeout?: undefined | number +} + export interface SelectMethods { dispatchEvent(type: ValueOf, params: Record, evnt: Event | null): void /** diff --git a/types/components/tabs.d.ts b/types/components/tabs.d.ts index 5a9a9a7a..93543ea8 100644 --- a/types/components/tabs.d.ts +++ b/types/components/tabs.d.ts @@ -77,6 +77,10 @@ export interface TabsReactData { resizeFlag: number } +export interface TabsInternalData { + slTimeout?: undefined | number +} + export interface TabsMethods { dispatchEvent(type: ValueOf, params: Record, evnt: Event | null): void /** diff --git a/types/components/toolbar.d.ts b/types/components/toolbar.d.ts index 511f2116..2666edd0 100644 --- a/types/components/toolbar.d.ts +++ b/types/components/toolbar.d.ts @@ -236,9 +236,14 @@ export interface VxeToolbarPrivateComputed extends ToolbarPrivateComputed { } export interface ToolbarReactData { isRefresh: boolean + connectFlag: 0 columns: VxeTableDefines.ColumnInfo[] } +export interface ToolbarInternalData { + connectTable: (VxeTableConstructor & VxeTablePrivateMethods) | null +} + export interface ToolbarMethods { dispatchEvent(type: ValueOf, params: Record, evnt: Event | null): void syncUpdate(params: { diff --git a/types/components/tooltip.d.ts b/types/components/tooltip.d.ts index 7f37c828..6558009d 100644 --- a/types/components/tooltip.d.ts +++ b/types/components/tooltip.d.ts @@ -73,6 +73,10 @@ export interface TooltipReactData { } } +export interface TooltipInternalData { + showDelayTip?(): any +} + export interface TooltipMethods { dispatchEvent(type: ValueOf, params: Record, evnt: Event | null): void /** diff --git a/types/components/tree-select.d.ts b/types/components/tree-select.d.ts index 6fb5bbbd..8ee6e6be 100644 --- a/types/components/tree-select.d.ts +++ b/types/components/tree-select.d.ts @@ -110,6 +110,10 @@ export interface TreeSelectReactData { isActivated: boolean } +export interface TreeSelectInternalData { + hpTimeout?: undefined | number +} + export interface TreeSelectMethods { dispatchEvent(type: ValueOf, params: Record, evnt: Event | null): void } diff --git a/types/ui/index.d.ts b/types/ui/index.d.ts index 3d91005d..f28a5bdf 100644 --- a/types/ui/index.d.ts +++ b/types/ui/index.d.ts @@ -19,23 +19,6 @@ export const config: typeof setConfig */ export const setup: typeof setConfig -/** - * 已废弃 - * @deprecated - */ -export interface VxeGlobalStore { - [key: string]: any - clipboard?: { - text: string - html: string - } -} -/** - * 已废弃 - * @deprecated - */ -export const globalStore: VxeGlobalStore - // 兼容老版本 export const loading: LoadingController export const modal: ModalController @@ -86,11 +69,6 @@ declare module '@vxe-ui/core' { * @deprecated */ _t(key: string, args?: any): string - /** - * 已废弃 - * @deprecated - */ - globalStore: VxeGlobalStore /** * @deprecated */