releases 4.1.18

examples/App.vue

@@ -2,7 +2,7 @@
   <vxe-layout-container vertical>
     <vxe-layout-header>
       <vxe-button @click="collapsed = !collapsed">折叠</vxe-button>
-      <vxe-switch v-model="theme" close-value="default" open-value="dark" @click="changeTheme">主题切换</vxe-switch>
+      <vxe-switch v-model="theme" close-value="light" open-value="dark" @change="changeTheme">主题切换</vxe-switch>
       <vxe-radio-group v-model="language" :options="langOptions" @change="changeLanguage"></vxe-radio-group>
     </vxe-layout-header>
     <vxe-layout-container>
@@ -79,10 +79,10 @@ const navList = ref<VxeMenuPropTypes.Options>([
   { name: 'CountdownTest', routerLink: { name: 'CountdownTest' } }
 ])
 
-const theme = ref((localStorage.getItem('VXE_THEME') as 'default' | 'dark') || 'default')
+const theme = ref((localStorage.getItem('VXE_THEME') as 'light' | 'dark') || 'light')
 VxeUI.setTheme(theme.value)
 const changeTheme = () => {
-  const themeName = VxeUI.getTheme() === 'dark' ? 'default' : 'dark'
+  const themeName = VxeUI.getTheme() === 'dark' ? 'light' : 'dark'
   theme.value = themeName
   VxeUI.setTheme(themeName)
   localStorage.setItem('VXE_THEME', themeName)

examples/views/date-picker/DatePickerTest.vue

@@ -138,7 +138,7 @@ const disabledDateMethod: VxeInputPropTypes.DisabledMethod = (params) => {
 }
 
 // 渲染日期小圆点
-const noticeMaps: { [key: string]: VxeInputDefines.DateFestivalInfo } = {
+const noticeMaps: Record<string, VxeInputDefines.DateFestivalInfo> = {
   20200910: {
     notice: true, // 显示小圆点事件通知
     important: true, // 是否标记为重要节日
@@ -167,7 +167,7 @@ const festivalNoticeMethod: VxeInputPropTypes.FestivalMethod = (params) => {
 }
 
 // 显示日期农历节假日
-const calendarMaps: { [key: string]: VxeInputDefines.DateFestivalInfo } = {
+const calendarMaps: Record<string, VxeInputDefines.DateFestivalInfo> = {
   20200930: {
     label: '十四' // 显示节日名称
   },

examples/views/loading/LoadingTest.vue

@@ -1,7 +1,13 @@
 <template>
   <div>
     <p style="position: relative;height: 100px;">
-      <vxe-loading :modelValue="true"></vxe-loading>
+      <vxe-loading v-model="val"></vxe-loading>
     </p>
   </div>
 </template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+const val = ref(false)
+</script>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vxe-pc-ui",
-  "version": "4.1.17",
+  "version": "4.1.18",
   "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.4"
+    "@vxe-ui/core": "^4.0.7"
   },
   "devDependencies": {
     "@typescript-eslint/eslint-plugin": "^6.21.0",
@@ -59,7 +59,7 @@
     "postcss": "^8.4.38",
     "sass": "^1.77.8",
     "sass-loader": "^14.2.1",
-    "typescript": "~4.5.5",
+    "typescript": "~4.9.5",
     "vue": "3.4.27",
     "vue-i18n": "^9.13.1",
     "vue-router": "^4.3.2",

packages/alert/index.ts

@@ -9,7 +9,7 @@ export const VxeAlert = Object.assign({}, VxeAlertComponent, {
   }
 })
 
-dynamicApp.component(VxeAlertComponent.name as string, VxeAlertComponent)
+dynamicApp.use(VxeAlert)
 VxeUI.component(VxeAlertComponent)
 
 export const Alert = VxeAlert

packages/anchor-link/index.ts

@@ -9,7 +9,7 @@ export const VxeAnchorLink = Object.assign({}, VxeAnchorLinkComponent, {
   }
 })
 
-dynamicApp.component(VxeAnchorLinkComponent.name as string, VxeAnchorLinkComponent)
+dynamicApp.use(VxeAnchorLink)
 VxeUI.component(VxeAnchorLinkComponent)
 
 export const AnchorLink = VxeAnchorLink

packages/anchor/index.ts

@@ -9,7 +9,7 @@ export const VxeAnchor = Object.assign({}, VxeAnchorComponent, {
   }
 })
 
-dynamicApp.component(VxeAnchorComponent.name as string, VxeAnchorComponent)
+dynamicApp.use(VxeAnchor)
 VxeUI.component(VxeAnchorComponent)
 
 export const Anchor = VxeAnchor

packages/anchor/src/anchor-link.ts

@@ -2,7 +2,7 @@ import { defineComponent, ref, h, computed, reactive, PropType, inject, createCo
 import XEUtils from 'xe-utils'
 import { assembleAnchorLink, destroyAnchorLink } from './util'
 
-import type { VxeAnchorLinkDefines, VxeAnchorLinkPropTypes, AnchorLinkReactData, AnchorLinkPrivateRef, VxeAnchorLinkPrivateComputed, VxeAnchorLinkConstructor, VxeAnchorLinkPrivateMethods, VxeAnchorConstructor, VxeAnchorPrivateMethods } from '../../../types'
+import type { VxeAnchorLinkDefines, VxeAnchorLinkPropTypes, VxeAnchorLinkEmits, AnchorLinkReactData, AnchorLinkPrivateRef, VxeAnchorLinkPrivateComputed, VxeAnchorLinkConstructor, VxeAnchorLinkPrivateMethods, VxeAnchorConstructor, VxeAnchorPrivateMethods } from '../../../types'
 
 export default defineComponent({
   name: 'VxeAnchorLink',
@@ -11,7 +11,7 @@ export default defineComponent({
     title: [String, Number] as PropType<VxeAnchorLinkPropTypes.Title>,
     href: String as PropType<VxeAnchorLinkPropTypes.Href>
   },
-  emits: [],
+  emits: [] as VxeAnchorLinkEmits,
   setup (props, context) {
     const { slots } = context
 
@@ -69,8 +69,9 @@ export default defineComponent({
     })
 
     onMounted(() => {
-      if ($xeAnchor && refElem.value) {
-        assembleAnchorLink($xeAnchor, refElem.value, linkConfig, $xeParentAnchorLink)
+      const elem = refElem.value
+      if ($xeAnchor && elem) {
+        assembleAnchorLink($xeAnchor, elem, linkConfig, $xeParentAnchorLink)
       }
     })
 

packages/anchor/src/anchor.ts

@@ -1,10 +1,10 @@
 import { defineComponent, ref, h, reactive, PropType, VNode, provide, nextTick, onBeforeUnmount, onMounted, watch, createCommentVNode, computed } from 'vue'
 import XEUtils from 'xe-utils'
-import { createEvent } from '../../ui'
+import { createEvent } from '@vxe-ui/core'
 import { getOffsetPos } from '../../ui/src/dom'
 import VxeAnchorLinkComponent from './anchor-link'
 
-import type { VxeAnchorPropTypes, AnchorReactData, AnchorPrivateRef, VxeAnchorPrivateComputed, VxeAnchorConstructor, VxeAnchorPrivateMethods, AnchorMethods, AnchorPrivateMethods } from '../../../types'
+import type { VxeAnchorPropTypes, AnchorReactData, VxeAnchorEmits, AnchorPrivateRef, VxeAnchorPrivateComputed, VxeAnchorConstructor, VxeAnchorPrivateMethods, AnchorMethods, AnchorPrivateMethods } from '../../../types'
 
 export default defineComponent({
   name: 'VxeAnchor',
@@ -21,7 +21,7 @@ export default defineComponent({
     'update:modelValue',
     'change',
     'click'
-  ],
+  ] as VxeAnchorEmits,
   setup (props, context) {
     const { slots, emit } = context
 
@@ -32,7 +32,8 @@ export default defineComponent({
 
     const reactData = reactive<AnchorReactData>({
       activeHref: null,
-      staticLinks: []
+      staticLinks: [],
+      containerElem: null
     })
 
     const refMaps: AnchorPrivateRef = {
@@ -50,8 +51,6 @@ export default defineComponent({
     const computeMaps: VxeAnchorPrivateComputed = {
     }
 
-    let containerElem: HTMLElement | null = null
-
     const $xeAnchor = {
       xID,
       props,
@@ -91,6 +90,7 @@ export default defineComponent({
 
     const handleContainerScrollEvent = () => {
       const allHrefList = computeAllHrefList.value
+      const { containerElem } = reactData
       if (containerElem) {
         const wrapperElList = containerElem.querySelectorAll(allHrefList.map(href => `${href}`).join(','))
         for (let i = 0; i < wrapperElList.length; i++) {
@@ -106,13 +106,15 @@ export default defineComponent({
     }
 
     const removeContainerElemScroll = () => {
+      const { containerElem } = reactData
       if (containerElem) {
         containerElem.removeEventListener('scroll', handleContainerScrollEvent)
       }
     }
 
     const updateContainerElem = () => {
-      containerElem = getContainerElem()
+      const containerElem = getContainerElem()
+      reactData.containerElem = containerElem
       if (containerElem) {
         containerElem.addEventListener('scroll', handleContainerScrollEvent, {
           passive: false

packages/breadcrumb-item/index.ts

@@ -9,7 +9,7 @@ export const VxeBreadcrumbItem = Object.assign({}, VxeBreadcrumbItemComponent, {
   }
 })
 
-dynamicApp.component(VxeBreadcrumbItemComponent.name as string, VxeBreadcrumbItemComponent)
+dynamicApp.use(VxeBreadcrumbItem)
 VxeUI.component(VxeBreadcrumbItemComponent)
 
 export const BreadcrumbItem = VxeBreadcrumbItem

packages/breadcrumb/index.ts

@@ -9,7 +9,7 @@ export const VxeBreadcrumb = Object.assign({}, VxeBreadcrumbComponent, {
   }
 })
 
-dynamicApp.component(VxeBreadcrumbComponent.name as string, VxeBreadcrumbComponent)
+dynamicApp.use(VxeBreadcrumb)
 VxeUI.component(VxeBreadcrumbComponent)
 
 export const Breadcrumb = VxeBreadcrumb

packages/breadcrumb/src/breadcrumb-item.ts

@@ -1,15 +1,16 @@
 import { defineComponent, ref, h, reactive, computed, resolveComponent, inject, createCommentVNode, PropType } from 'vue'
 import XEUtils from 'xe-utils'
 
-import type { VxeBreadcrumbItemPropTypes, BreadcrumbItemReactData, BreadcrumbItemPrivateRef, VxeBreadcrumbItemPrivateComputed, VxeBreadcrumbItemConstructor, VxeBreadcrumbItemPrivateMethods, VxeBreadcrumbConstructor, VxeBreadcrumbPrivateMethods } from '../../../types'
+import type { VxeBreadcrumbItemPropTypes, VxeBreadcrumbItemEmits, BreadcrumbItemReactData, BreadcrumbItemPrivateRef, VxeBreadcrumbItemPrivateComputed, VxeBreadcrumbItemConstructor, VxeBreadcrumbItemPrivateMethods, VxeBreadcrumbConstructor, VxeBreadcrumbPrivateMethods } from '../../../types'
 
 export default defineComponent({
   name: 'VxeBreadcrumbItem',
   props: {
     title: String as PropType<VxeBreadcrumbItemPropTypes.Title>,
     routerLink: Object as PropType<VxeBreadcrumbItemPropTypes.RouterLink>
   },
-  emits: [],
+  emits: [
+  ] as VxeBreadcrumbItemEmits,
   setup (props, context) {
     const { slots } = context
 

packages/breadcrumb/src/breadcrumb.ts

@@ -3,7 +3,7 @@ import { getConfig, createEvent } from '../../ui'
 import XEUtils from 'xe-utils'
 import VxeBreadcrumbItemComponent from './breadcrumb-item'
 
-import type { VxeBreadcrumbPropTypes, BreadcrumbReactData, BreadcrumbPrivateRef, VxeBreadcrumbPrivateComputed, VxeBreadcrumbConstructor, BreadcrumbPrivateMethods, VxeBreadcrumbPrivateMethods, BreadcrumbMethods } from '../../../types'
+import type { VxeBreadcrumbPropTypes, VxeBreadcrumbEmits, BreadcrumbReactData, BreadcrumbPrivateRef, VxeBreadcrumbPrivateComputed, VxeBreadcrumbConstructor, BreadcrumbPrivateMethods, VxeBreadcrumbPrivateMethods, BreadcrumbMethods } from '../../../types'
 
 export default defineComponent({
   name: 'VxeBreadcrumb',
@@ -16,7 +16,7 @@ export default defineComponent({
   },
   emits: [
     'click'
-  ],
+  ] as VxeBreadcrumbEmits,
   setup (props, context) {
     const { emit, slots } = context
 

packages/button-group/index.ts

@@ -9,7 +9,7 @@ export const VxeButtonGroup = Object.assign({}, VxeButtonGroupComponent, {
   }
 })
 
-dynamicApp.component(VxeButtonGroupComponent.name as string, VxeButtonGroupComponent)
+dynamicApp.use(VxeButtonGroup)
 VxeUI.component(VxeButtonGroupComponent)
 
 export const ButtonGroup = VxeButtonGroup

packages/button/index.ts

@@ -9,7 +9,7 @@ export const VxeButton = Object.assign({}, VxeButtonComponent, {
   }
 })
 
-dynamicApp.component(VxeButtonComponent.name as string, VxeButtonComponent)
+dynamicApp.use(VxeButton)
 VxeUI.component(VxeButtonComponent)
 
 export const Button = VxeButton

packages/button/src/button-group.ts

@@ -1,7 +1,7 @@
 import { defineComponent, h, provide, PropType, createCommentVNode } from 'vue'
 import { getConfig, createEvent, useSize, usePermission } from '@vxe-ui/core'
 import XEUtils from 'xe-utils'
-import VxeButtonComponent from '../../button/src/button'
+import VxeButtonComponent from './button'
 
 import type { VxeButtonGroupPropTypes, VxeButtonGroupEmits, VxeButtonGroupConstructor, VxeButtonGroupPrivateMethods, ButtonGroupMethods, ButtonPrivateComputed, ButtonGroupPrivateMethods } from '../../../types'
 
@@ -16,7 +16,10 @@ export default defineComponent({
     className: [String, Function] as PropType<VxeButtonGroupPropTypes.ClassName>,
     disabled: Boolean as PropType<VxeButtonGroupPropTypes.Disabled>,
     permissionCode: [String, Number] as PropType<VxeButtonGroupPropTypes.PermissionCode>,
-    size: { type: String as PropType<VxeButtonGroupPropTypes.Size>, default: () => getConfig().buttonGroup.size || getConfig().size }
+    size: {
+      type: String as PropType<VxeButtonGroupPropTypes.Size>,
+      default: () => getConfig().buttonGroup.size || getConfig().size
+    }
   },
   emits: [
     'click'