element-pe 1.0.2 → 1.0.6

package/packages/components/menu/src/menu-item.ts

@@ -1,20 +1,20 @@
-import { buildProp, definePropType } from '@element-plus/utils/props'
+import { buildProps, definePropType } from '@element-plus/utils/props'
 import { isString } from '@element-plus/utils/util'
 
 import type { ExtractPropTypes } from 'vue'
 import type { RouteLocationRaw } from 'vue-router'
 import type { MenuItemRegistered } from './types'
 
-export const menuItemProps = {
+export const menuItemProps = buildProps({
   index: {
-    type: String,
+    type: definePropType<string | null>([String, null]),
     default: null,
   },
-  route: buildProp({
+  route: {
     type: definePropType<RouteLocationRaw>([String, Object]),
-  }),
+  },
   disabled: Boolean,
-} as const
+} as const)
 export type MenuItemProps = ExtractPropTypes<typeof menuItemProps>
 
 export const menuItemEmits = {

package/packages/components/menu/src/menu.ts

@@ -13,7 +13,7 @@ import {
 } from 'vue'
 import { Resize } from '@element-plus/directives'
 import Menubar from '@element-plus/utils/menu/menu-bar'
-import { buildProp, definePropType, mutable } from '@element-plus/utils/props'
+import { buildProps, definePropType, mutable } from '@element-plus/utils/props'
 import { isString, isObject } from '@element-plus/utils/util'
 import ElMenuCollapseTransition from './menu-collapse-transition.vue'
 import ElSubMenu from './sub-menu'
@@ -23,36 +23,40 @@ import type { MenuItemClicked, MenuProvider, SubMenuProvider } from './types'
 import type { NavigationFailure, Router } from 'vue-router'
 import type { VNode, ExtractPropTypes, VNodeNormalizedChildren } from 'vue'
 
-export const menuProps = {
-  mode: buildProp({
+export const menuProps = buildProps({
+  mode: {
     type: String,
     values: ['horizontal', 'vertical'],
     default: 'vertical',
-  } as const),
-  defaultActive: buildProp({
+  },
+  defaultActive: {
     type: String,
     default: '',
-  } as const),
-  defaultOpeneds: buildProp({
+  },
+  defaultOpeneds: {
     type: definePropType<string[]>(Array),
     default: () => mutable([] as const),
-  }),
+  },
   uniqueOpened: Boolean,
   router: Boolean,
-  menuTrigger: buildProp({
+  menuTrigger: {
     type: String,
     values: ['hover', 'click'],
     default: 'hover',
-  } as const),
+  },
   collapse: Boolean,
   backgroundColor: String,
   textColor: String,
   activeTextColor: String,
-  collapseTransition: buildProp({
+  collapseTransition: {
     type: Boolean,
     default: true,
-  } as const),
-} as const
+  },
+  ellipsis: {
+    type: Boolean,
+    default: true,
+  },
+} as const)
 export type MenuProps = ExtractPropTypes<typeof menuProps>
 
 const checkIndexPath = (indexPath: unknown): indexPath is string[] =>
@@ -344,7 +348,7 @@ export default defineComponent({
         })
         const slotDefault = originalSlot.slice(0, sliceIndex)
         const slotMore = originalSlot.slice(sliceIndex)
-        if (slotMore?.length) {
+        if (slotMore?.length && props.ellipsis) {
           slot = slotDefault
           vShowMore.push(
             h(
@@ -367,7 +371,10 @@ export default defineComponent({
 
       const ulStyle = useMenuCssVar(props)
 
-      const vMenu = useVNodeResize(
+      const resizeMenu = (vNode: VNode) =>
+        props.ellipsis ? useVNodeResize(vNode) : vNode
+
+      const vMenu = resizeMenu(
         h(
           'ul',
           {
@@ -381,7 +388,7 @@ export default defineComponent({
               'el-menu--collapse': props.collapse,
             },
           },
-          [...slot.map((vnode) => useVNodeResize(vnode)), ...vShowMore]
+          [...slot.map((vnode) => resizeMenu(vnode)), ...vShowMore]
         )
       )
 

package/packages/components/menu/src/sub-menu.ts

@@ -17,7 +17,7 @@ import {
 import { useTimeoutFn } from '@vueuse/core'
 import ElCollapseTransition from '@element-plus/components/collapse-transition'
 import ElPopper from '@element-plus/components/popper'
-import { buildProp } from '@element-plus/utils/props'
+import { buildProps } from '@element-plus/utils/props'
 import { throwError } from '@element-plus/utils/error'
 import useMenu from './use-menu'
 import { useMenuCssVar } from './use-menu-css-var'
@@ -26,26 +26,26 @@ import type { Placement } from '@element-plus/components/popper'
 import type { ExtractPropTypes, VNodeArrayChildren, CSSProperties } from 'vue'
 import type { MenuProvider, SubMenuProvider } from './types'
 
-export const subMenuProps = {
+export const subMenuProps = buildProps({
   index: {
     type: String,
     required: true,
   },
-  showTimeout: buildProp({
+  showTimeout: {
     type: Number,
     default: 300,
-  } as const),
-  hideTimeout: buildProp({
+  },
+  hideTimeout: {
     type: Number,
     default: 300,
-  } as const),
+  },
   popperClass: String,
   disabled: Boolean,
-  popperAppendToBody: buildProp({
+  popperAppendToBody: {
     type: Boolean,
     default: undefined,
-  } as const),
-} as const
+  },
+} as const)
 export type SubMenuProps = ExtractPropTypes<typeof subMenuProps>
 
 const COMPONENT_NAME = 'ElSubMenu'

package/packages/components/message/src/message.ts

@@ -1,10 +1,10 @@
-import { buildProp, definePropType } from '@element-plus/utils/props'
+import { buildProps, definePropType } from '@element-plus/utils/props'
 
 import type { VNode, ExtractPropTypes } from 'vue'
 
 export const messageTypes = ['success', 'info', 'warning', 'error'] as const
 
-export const messageProps = {
+export const messageProps = buildProps({
   customClass: {
     type: String,
     default: '',
@@ -29,23 +29,23 @@ export const messageProps = {
     type: String,
     default: '',
   },
-  message: buildProp({
+  message: {
     type: definePropType<string | VNode>([String, Object]),
     default: '',
-  } as const),
-  onClose: buildProp({
+  },
+  onClose: {
     type: definePropType<() => void>(Function),
     required: false,
-  }),
+  },
   showClose: {
     type: Boolean,
     default: false,
   },
-  type: buildProp({
+  type: {
     type: String,
     values: messageTypes,
     default: 'info',
-  } as const),
+  },
   offset: {
     type: Number,
     default: 20,
@@ -54,7 +54,7 @@ export const messageProps = {
     type: Number,
     default: 0,
   },
-} as const
+} as const)
 export type MessageProps = ExtractPropTypes<typeof messageProps>
 
 export const messageEmits = {

package/packages/components/notification/src/notification.ts

@@ -1,4 +1,4 @@
-import { buildProp, definePropType } from '@element-plus/utils/props'
+import { buildProps, definePropType } from '@element-plus/utils/props'
 
 import type { VNode, ExtractPropTypes } from 'vue'
 
@@ -9,7 +9,7 @@ export const notificationTypes = [
   'error',
 ] as const
 
-export const notificationProps = {
+export const notificationProps = buildProps({
   customClass: {
     type: String,
     default: '',
@@ -30,27 +30,27 @@ export const notificationProps = {
     type: String,
     default: '',
   },
-  message: buildProp({
+  message: {
     type: definePropType<string | VNode>([String, Object]),
     default: '',
-  }),
+  },
   offset: {
     type: Number,
     default: 0,
   },
-  onClick: buildProp({
+  onClick: {
     type: definePropType<() => void>(Function),
     default: () => undefined,
-  }),
-  onClose: buildProp({
+  },
+  onClose: {
     type: definePropType<() => void>(Function),
     required: true,
-  }),
-  position: buildProp({
+  },
+  position: {
     type: String,
     values: ['top-right', 'top-left', 'bottom-right', 'bottom-left'],
     default: 'top-right',
-  } as const),
+  },
   showClose: {
     type: Boolean,
     default: true,
@@ -59,16 +59,16 @@ export const notificationProps = {
     type: String,
     default: '',
   },
-  type: buildProp({
+  type: {
     type: String,
     values: [...notificationTypes, ''],
     default: '',
-  } as const),
+  },
   zIndex: {
     type: Number,
     default: 0,
   },
-} as const
+} as const)
 export type NotificationProps = ExtractPropTypes<typeof notificationProps>
 
 export const notificationEmits = {

package/packages/components/overlay/src/overlay.ts

@@ -1,12 +1,12 @@
 import { createVNode, defineComponent, renderSlot, h } from 'vue'
 import { PatchFlags } from '@element-plus/utils/vnode'
 import { useSameTarget } from '@element-plus/hooks'
-import { buildProp, definePropType } from '@element-plus/utils/props'
+import { buildProps, definePropType } from '@element-plus/utils/props'
 
 import type { ExtractPropTypes, CSSProperties } from 'vue'
 import type { ZIndexProperty } from 'csstype'
 
-export const overlayProps = {
+export const overlayProps = buildProps({
   mask: {
     type: Boolean,
     default: true,
@@ -15,17 +15,17 @@ export const overlayProps = {
     type: Boolean,
     default: false,
   },
-  overlayClass: buildProp({
+  overlayClass: {
     type: definePropType<string | string[] | Record<string, boolean>>([
       String,
       Array,
       Object,
     ]),
-  }),
-  zIndex: buildProp({
+  },
+  zIndex: {
     type: definePropType<ZIndexProperty>([String, Number]),
-  }),
-} as const
+  },
+} as const)
 export type OverlayProps = ExtractPropTypes<typeof overlayProps>
 
 export const overlayEmits = {
@@ -71,7 +71,7 @@ export default defineComponent({
         : h(
             'div',
             {
-              class: 'el-overlay__no-modal ' + props.overlayClass,
+              class: `el-overlay__no-modal ${props.overlayClass}`,
               style: {
                 zIndex: props.zIndex,
                 position: 'fixed',

package/packages/components/pagination/__tests__/pagination.spec.ts

@@ -1,6 +1,7 @@
 import { nextTick, ref, h } from 'vue'
 import { mount } from '@vue/test-utils'
 import Pagination from '../src/pagination'
+import selectDropdownVue from '../../select/src/select-dropdown.vue'
 import type { VueWrapper } from '@vue/test-utils'
 
 const assertElementsExistence = (
@@ -332,7 +333,7 @@ describe('Pagination', () => {
       expect(currentPageWatcher).toHaveBeenCalled()
       await wrapper.find('.el-select').trigger('click')
       await wrapper
-        .getComponent('.el-select-dropdown')
+        .getComponent(selectDropdownVue)
         .find('li:nth-child(2)')
         .trigger('click')
       expect(pageSizeWatcher).toHaveBeenCalled()

package/packages/components/pagination/src/components/sizes.vue

@@ -22,26 +22,26 @@ import { defineComponent, watch, computed, ref } from 'vue'
 import isEqual from 'lodash/isEqual'
 import { ElSelect, ElOption } from '@element-plus/components/select'
 import { useLocaleInject } from '@element-plus/hooks'
-import { buildProp, definePropType, mutable } from '@element-plus/utils/props'
+import { buildProps, definePropType, mutable } from '@element-plus/utils/props'
 import { usePagination } from '../usePagination'
 
 import type { Nullable } from '@element-plus/utils/types'
 
-const paginationSizesProps = {
+const paginationSizesProps = buildProps({
   pageSize: {
     type: Number,
     required: true,
   },
-  pageSizes: buildProp({
+  pageSizes: {
     type: definePropType<number[]>(Array),
     default: () => mutable([10, 20, 30, 40, 50, 100] as const),
-  } as const),
+  },
   popperClass: {
     type: String,
     default: '',
   },
   disabled: Boolean,
-} as const
+} as const)
 
 export default defineComponent({
   name: 'ElPaginationSizes',

package/packages/components/pagination/src/pagination.ts

@@ -9,7 +9,7 @@ import {
 } from 'vue'
 import { useLocaleInject } from '@element-plus/hooks'
 import { debugWarn } from '@element-plus/utils/error'
-import { buildProp, definePropType, mutable } from '@element-plus/utils/props'
+import { buildProps, definePropType, mutable } from '@element-plus/utils/props'
 import { elPaginationKey } from '@element-plus/tokens'
 
 import Prev from './components/prev.vue'
@@ -38,7 +38,7 @@ type LayoutKey =
   | 'sizes'
   | 'slot'
 
-export const paginationProps = {
+export const paginationProps = buildProps({
   total: Number,
   pageSize: Number,
   defaultPageSize: Number,
@@ -64,10 +64,10 @@ export const paginationProps = {
       ['prev', 'pager', 'next', 'jumper', '->', 'total'] as LayoutKey[]
     ).join(', '),
   },
-  pageSizes: buildProp({
+  pageSizes: {
     type: definePropType<number[]>(Array),
     default: () => mutable([10, 20, 30, 40, 50, 100] as const),
-  }),
+  },
   popperClass: {
     type: String,
     default: '',
@@ -84,7 +84,7 @@ export const paginationProps = {
   background: Boolean,
   disabled: Boolean,
   hideOnSinglePage: Boolean,
-} as const
+} as const)
 export type PaginationProps = ExtractPropTypes<typeof paginationProps>
 
 export const paginationEmits = {

package/packages/components/popconfirm/src/popconfirm.ts

@@ -1,8 +1,9 @@
-import { buttonProps } from '@element-plus/components/button'
+import { buttonType } from '@element-plus/components/button'
+import { buildProps } from '@element-plus/utils/props'
 
 import type { ExtractPropTypes } from 'vue'
 
-export const popconfirmProps = {
+export const popconfirmProps = buildProps({
   title: {
     type: String,
   },
@@ -13,11 +14,13 @@ export const popconfirmProps = {
     type: String,
   },
   confirmButtonType: {
-    ...buttonProps.type,
+    type: String,
+    values: buttonType,
     default: 'primary',
   },
   cancelButtonType: {
-    ...buttonProps.type,
+    type: String,
+    values: buttonType,
     default: 'text',
   },
   icon: {
@@ -32,7 +35,7 @@ export const popconfirmProps = {
     type: Boolean,
     default: false,
   },
-} as const
+} as const)
 export type PopconfirmProps = ExtractPropTypes<typeof popconfirmProps>
 
 export const popconfirmEmits = {

package/packages/components/popper/__tests__/popper.spec.ts

@@ -181,10 +181,10 @@ describe('Popper.vue', () => {
       disabled: true,
       appendToBody: false,
     })
+    const $trigger = () => wrapper.find(`.${TEST_TRIGGER}`)
 
-    const $trigger = wrapper.find(`.${TEST_TRIGGER}`)
     expect(wrapper.find(selector).attributes('style')).toContain(DISPLAY_NONE)
-    await $trigger.trigger(MOUSE_ENTER_EVENT)
+    await $trigger().trigger(MOUSE_ENTER_EVENT)
 
     expect(wrapper.find(selector).attributes('style')).toContain(DISPLAY_NONE)
 
@@ -192,7 +192,7 @@ describe('Popper.vue', () => {
       disabled: false,
     })
 
-    await $trigger.trigger(MOUSE_ENTER_EVENT)
+    await $trigger().trigger(MOUSE_ENTER_EVENT)
 
     expect(wrapper.find(selector).attributes('style')).not.toContain(
       DISPLAY_NONE
@@ -232,7 +232,7 @@ describe('Popper.vue', () => {
     const errorHandler = jest.fn()
     mount(Wrapped, {
       slots: {
-        trigger: undefined,
+        // trigger: undefined,
       },
       global: {
         config: {

package/packages/components/progress/src/index.vue

@@ -111,7 +111,6 @@ export default defineComponent({
     percentage: {
       type: Number,
       default: 0,
-      required: true,
       validator: (val: number): boolean => val >= 0 && val <= 100,
     },
     status: {

package/packages/components/rate/src/index.vue

@@ -203,7 +203,7 @@ export default defineComponent({
         : props.iconClasses
     )
     const decimalIconClass = computed(() =>
-      getValueFromMap(props.modelValue, classMap.value)
+      getValueFromMap(currentValue.value, classMap.value)
     )
     const voidClass = computed(() =>
       rateDisabled.value ? props.disabledVoidIconClass : props.voidIconClass

package/packages/components/select/__tests__/select.spec.ts

@@ -1343,6 +1343,11 @@ describe('Select', () => {
     selectInputEl.value = 'a'
     selectInput.trigger('input')
     await vm.$nextTick()
+
+    const timer = sleep(300)
+    jest.runAllTimers()
+    await timer
+
     expect(innerInputEl.placeholder).toBe('')
 
     selectInput.trigger('keydown', {

package/packages/components/select-v2/src/useSelect.ts

@@ -654,6 +654,8 @@ const useSelect = (props: ExtractPropTypes<typeof SelectProps>, emit) => {
             initHovering = true
           }
         })
+      } else {
+        states.cachedOptions = []
       }
     } else {
       if (props.modelValue) {

package/packages/components/space/__tests__/space.spec.ts

@@ -1,6 +1,6 @@
 import { nextTick, h } from 'vue'
 import { mount } from '@vue/test-utils'
-import Space from '../src/index'
+import Space from '../src/space'
 
 const AXIOM = 'Rem is the best girl'
 
@@ -71,7 +71,7 @@ describe('Space.vue', () => {
       size: 'unknown',
     })
 
-    expect(warnHandler).toHaveBeenCalledTimes(1)
+    expect(warnHandler).toHaveBeenCalled()
 
     expect(wrapper.find('.el-space__item').attributes('style')).toContain(
       'margin-right: 8px'

package/packages/components/space/index.ts

@@ -1,13 +1,9 @@
-import Space from './src/index'
+import { withInstall } from '@element-plus/utils/with-install'
 
-import type { App } from 'vue'
-import type { SFCWithInstall } from '@element-plus/utils/types'
+import Space from './src/space'
 
-const _Space = Space as SFCWithInstall<typeof Space>
+export const ElSpace = withInstall(Space)
+export default ElSpace
 
-_Space.install = (app: App) => {
-  app.component(_Space.name, _Space)
-}
-
-export default _Space
-export const ElSpace = _Space
+export * from './src/space'
+export * from './src/use-space'

package/packages/components/space/src/item.vue

@@ -1,22 +1,28 @@
 <template>
   <div :class="classes">
-    <slot></slot>
+    <slot />
   </div>
 </template>
 
 <script lang="ts">
 import { defineComponent, computed } from 'vue'
+import { buildProps } from '@element-plus/utils/props'
 
-export default defineComponent({
-  props: {
-    prefixCls: {
-      type: String,
-      default: 'el-space',
-    },
+const spaceItem = buildProps({
+  prefixCls: {
+    type: String,
+    default: 'el-space',
   },
+} as const)
+
+export default defineComponent({
+  props: spaceItem,
+
   setup(props) {
+    const classes = computed(() => [`${props.prefixCls}__item`])
+
     return {
-      classes: computed(() => `${props.prefixCls}__item`),
+      classes,
     }
   },
 })