element-pe 1.0.2 → 1.0.6

package/lib/utils/vnode.d.ts

@@ -16,12 +16,16 @@ export declare enum PatchFlags {
     HOISTED = -1,
     BAIL = -2
 }
-export declare const isFragment: (node: VNodeChild) => boolean;
+export declare const isFragment: (node: unknown) => node is VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>;
 export declare const isText: (node: VNodeChild) => boolean;
 export declare const isComment: (node: VNodeChild) => boolean;
 export declare const isTemplate: (node: VNodeChild) => boolean;
 declare function getChildren(node: VNode, depth: number): undefined | VNode;
-export declare const isValidElementNode: (node: VNodeChild) => boolean;
+export declare const isValidElementNode: (node: unknown) => node is VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>;
 export declare const getFirstValidNode: (nodes: VNodeChild, maxDepth?: number) => ReturnType<typeof getChildren>;
 export declare function renderIf(condition: boolean, node: VNodeTypes, props: any, children?: Children, patchFlag?: number, patchProps?: string[]): VNode<import("vue").RendererNode, import("vue").RendererElement, {
     [key: string]: any;

package/lib/utils/vnode.js

@@ -22,7 +22,7 @@ var PatchFlags;
     PatchFlags[PatchFlags["HOISTED"] = -1] = "HOISTED";
     PatchFlags[PatchFlags["BAIL"] = -2] = "BAIL";
 })(PatchFlags = exports.PatchFlags || (exports.PatchFlags = {}));
-const isFragment = (node) => node.type === vue_1.Fragment;
+const isFragment = (node) => (0, vue_1.isVNode)(node) && node.type === vue_1.Fragment;
 exports.isFragment = isFragment;
 const isText = (node) => node.type === vue_1.Text;
 exports.isText = isText;
@@ -40,7 +40,7 @@ function getChildren(node, depth) {
     }
     return node;
 }
-const isValidElementNode = (node) => !((0, exports.isFragment)(node) || (0, exports.isComment)(node));
+const isValidElementNode = (node) => (0, vue_1.isVNode)(node) && !(0, exports.isFragment)(node) && !(0, exports.isComment)(node);
 exports.isValidElementNode = isValidElementNode;
 const getFirstValidNode = (nodes, maxDepth = 3) => {
     if (Array.isArray(nodes)) {

package/lib/version.d.ts

@@ -1 +1 @@
-export declare const version = "1.0.2";
+export declare const version = "1.0.5";

package/lib/version.js

@@ -2,6 +2,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const version = "1.0.2";
+const version = "1.0.5";
 
 exports.version = version;

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "element-pe",
-  "version": "1.0.2",
+  "version": "1.0.6",
   "description": "A Component Library for Vue 3",
-  "homepage": "https://github.com/element-plus/element-plus#readme",
+  "homepage": "https://element-plus.org/",
   "keywords": [
     "element-plus",
     "element",
@@ -35,7 +35,8 @@
     "vue": "^3.2.0"
   },
   "dependencies": {
-    "@popperjs/core": "^2.10.1",
+    "@element-plus/icons": "^0.0.11",
+    "@popperjs/core": "^2.10.2",
     "@vueuse/core": "~6.1.0",
     "async-validator": "^4.0.3",
     "dayjs": "^1.10.7",

package/packages/components/affix/src/affix.ts

@@ -1,13 +1,13 @@
-import { buildProp, definePropType } from '@element-plus/utils/props'
+import { buildProps, definePropType } from '@element-plus/utils/props'
 
 import type { ExtractPropTypes } from 'vue'
 import type { ZIndexProperty } from 'csstype'
 
-export const affixProps = {
-  zIndex: buildProp({
+export const affixProps = buildProps({
+  zIndex: {
     type: definePropType<ZIndexProperty>([Number, String]),
     default: 100,
-  } as const),
+  },
   target: {
     type: String,
     default: '',
@@ -16,12 +16,12 @@ export const affixProps = {
     type: Number,
     default: 0,
   },
-  position: buildProp({
+  position: {
     type: String,
     values: ['top', 'bottom'],
     default: 'top',
-  } as const),
-} as const
+  },
+} as const)
 export type AffixProps = ExtractPropTypes<typeof affixProps>
 
 export const affixEmits = {

package/packages/components/affix/src/affix.vue

@@ -121,7 +121,7 @@ export default defineComponent({
         target.value =
           document.querySelector<HTMLElement>(props.target) ?? undefined
         if (!target.value) {
-          throw new Error(`target is not existed: ${props.target}`)
+          throw new Error(`Target is not existed: ${props.target}`)
         }
       } else {
         target.value = document.documentElement

package/packages/components/alert/src/alert.ts

@@ -1,4 +1,4 @@
-import { buildProp, keyOf } from '@element-plus/utils/props'
+import { buildProps, keyOf } from '@element-plus/utils/props'
 import type { ExtractPropTypes } from 'vue'
 
 export type AlertEffect = 'light' | 'dark'
@@ -10,7 +10,7 @@ export const ALERT_TYPE_CLASSES_MAP = {
   info: 'el-icon-info',
 } as const
 
-export const alertProps = {
+export const alertProps = buildProps({
   title: {
     type: String,
     default: '',
@@ -19,11 +19,11 @@ export const alertProps = {
     type: String,
     default: '',
   },
-  type: buildProp({
+  type: {
     type: String,
     values: keyOf(ALERT_TYPE_CLASSES_MAP),
     default: 'info',
-  } as const),
+  },
   closable: {
     type: Boolean,
     default: true,
@@ -34,12 +34,12 @@ export const alertProps = {
   },
   showIcon: Boolean,
   center: Boolean,
-  effect: buildProp({
+  effect: {
     type: String,
     values: ['light', 'dark'],
     default: 'light',
-  } as const),
-} as const
+  },
+} as const)
 export type AlertProps = ExtractPropTypes<typeof alertProps>
 
 export const alertEmits = {

package/packages/components/avatar/src/avatar.ts

@@ -1,20 +1,20 @@
-import { buildProp, definePropType } from '@element-plus/utils/props'
+import { buildProps, definePropType } from '@element-plus/utils/props'
 import type { ExtractPropTypes } from 'vue'
 import type { ObjectFitProperty } from 'csstype'
 
-export const avatarProps = {
-  size: buildProp({
+export const avatarProps = buildProps({
+  size: {
     type: [Number, String],
     values: ['large', 'medium', 'small'],
     default: 'large',
-    validator: (val): val is number => typeof val === 'number',
-  } as const),
+    validator: (val: unknown): val is number => typeof val === 'number',
+  },
 
-  shape: buildProp({
+  shape: {
     type: String,
     values: ['circle', 'square'],
     default: 'circle',
-  } as const),
+  },
 
   icon: String,
   src: {
@@ -23,11 +23,11 @@ export const avatarProps = {
   },
   alt: String,
   srcSet: String,
-  fit: buildProp({
+  fit: {
     type: definePropType<ObjectFitProperty>(String),
     default: 'cover',
-  } as const),
-} as const
+  },
+} as const)
 export type AvatarProps = ExtractPropTypes<typeof avatarProps>
 
 export const avatarEmits = {

package/packages/components/badge/src/badge.ts

@@ -1,22 +1,22 @@
-import { buildProp } from '@element-plus/utils/props'
+import { buildProps } from '@element-plus/utils/props'
 
 import type { ExtractPropTypes } from 'vue'
 
-export const badgeProps = {
-  value: buildProp({
+export const badgeProps = buildProps({
+  value: {
     type: [String, Number],
     default: '',
-  } as const),
+  },
   max: {
     type: Number,
     default: 99,
   },
   isDot: Boolean,
   hidden: Boolean,
-  type: buildProp({
+  type: {
     type: String,
     values: ['primary', 'success', 'warning', 'info', 'danger'],
     default: 'danger',
-  } as const),
-} as const
+  },
+} as const)
 export type BadgeProps = ExtractPropTypes<typeof badgeProps>

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

@@ -1,16 +1,16 @@
-import { buildProp, definePropType } from '@element-plus/utils/props'
+import { buildProps, definePropType } from '@element-plus/utils/props'
 
 import type { ExtractPropTypes } from 'vue'
 import type { RouteLocationRaw } from 'vue-router'
 
-export const breadcrumbItemProps = {
-  to: buildProp({
+export const breadcrumbItemProps = buildProps({
+  to: {
     type: definePropType<RouteLocationRaw>([String, Object]),
     default: '',
-  } as const),
+  },
   replace: {
     type: Boolean,
     default: false,
   },
-} as const
+} as const)
 export type BreadcrumbItemProps = ExtractPropTypes<typeof breadcrumbItemProps>

package/packages/components/button/src/button.ts

@@ -1,5 +1,5 @@
 import { useFormItemProps } from '@element-plus/hooks'
-import { buildProp } from '@element-plus/utils/props'
+import { buildProps } from '@element-plus/utils/props'
 
 import type { ExtractPropTypes } from 'vue'
 
@@ -16,28 +16,28 @@ export const buttonType = [
 export const buttonSize = ['', 'large', 'medium', 'small', 'mini'] as const
 export const buttonNativeType = ['button', 'submit', 'reset'] as const
 
-export const buttonProps = {
+export const buttonProps = buildProps({
   ...useFormItemProps,
-  type: buildProp({
+  type: {
     type: String,
     values: buttonType,
     default: '',
-  } as const),
+  },
   icon: {
     type: String,
     default: '',
   },
-  nativeType: buildProp({
+  nativeType: {
     type: String,
     values: buttonNativeType,
     default: 'button',
-  } as const),
+  },
   loading: Boolean,
   plain: Boolean,
   autofocus: Boolean,
   round: Boolean,
   circle: Boolean,
-} as const
+} as const)
 
 export const buttonEmits = {
   click: (evt: MouseEvent) => evt instanceof MouseEvent,

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

@@ -183,15 +183,15 @@ export default defineComponent({
       // Three consecutive months (compatible: 2021-01-30 to 2021-02-28)
       else if (firstMonth + 2 === lastMonth) {
         const firstMonthLastDay = firstDay.endOf('month')
-        const secondMonthFisrtDay = firstDay.add(1, 'month').startOf('month')
+        const secondMonthFirstDay = firstDay.add(1, 'month').startOf('month')
 
         // Whether the last day of the first month and the second month is in the same week
         const secondMonthStartDay = firstMonthLastDay.isSame(
-          secondMonthFisrtDay,
+          secondMonthFirstDay,
           'week'
         )
-          ? secondMonthFisrtDay.add(1, 'week')
-          : secondMonthFisrtDay
+          ? secondMonthFirstDay.add(1, 'week')
+          : secondMonthFirstDay
 
         const secondMonthLastDay = secondMonthStartDay.endOf('month')
         const lastMonthFirstDay = lastDay.startOf('month')

package/packages/components/card/src/card.ts

@@ -1,19 +1,19 @@
-import { buildProp, definePropType } from '@element-plus/utils/props'
+import { buildProps, definePropType } from '@element-plus/utils/props'
 import type { ExtractPropTypes } from 'vue'
 import type { StyleValue } from '@element-plus/utils/types'
 
-export const cardProps = {
+export const cardProps = buildProps({
   header: {
     type: String,
     default: '',
   },
-  bodyStyle: buildProp({
+  bodyStyle: {
     type: definePropType<StyleValue>([String, Object, Array]),
     default: '',
-  } as const),
+  },
   shadow: {
     type: String,
     default: '',
   },
-} as const
+} as const)
 export type CardProps = ExtractPropTypes<typeof cardProps>

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

@@ -257,8 +257,13 @@ describe('Cascader.vue', () => {
 
     const input = wrapper.find('input')
     const dropdown = document.querySelector(DROPDOWN)
+    input.element.value = 'Ni'
+    await input.trigger('compositionstart')
+    await input.trigger('input')
     input.element.value = 'Ha'
+    await input.trigger('compositionupdate')
     await input.trigger('input')
+    await input.trigger('compositionend')
     const suggestions = dropdown.querySelectorAll(
       SUGGESTION_ITEM
     ) as NodeListOf<HTMLElement>

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

@@ -23,11 +23,11 @@
           realSize && `el-cascader--${realSize}`,
           { 'is-disabled': isDisabled },
         ]"
+        :widget="widget"
         @click="() => togglePopperVisible(readonly ? undefined : true)"
         @keydown="handleKeyDown"
         @mouseenter="inputHover = true"
         @mouseleave="inputHover = false"
-        :widget="widget"
       >
         <el-input
           ref="input"
@@ -38,6 +38,9 @@
           :validate-event="false"
           :size="realSize"
           :class="{ 'is-focus': popperVisible }"
+          @compositionstart="handleComposition"
+          @compositionupdate="handleComposition"
+          @compositionend="handleComposition"
           @focus="(e) => $emit('focus', e)"
           @blur="(e) => $emit('blur', e)"
           @input="handleInput"
@@ -84,6 +87,9 @@
             @input="(e) => handleInput(searchInputValue, e)"
             @click.stop="togglePopperVisible(true)"
             @keydown.delete="handleDelete"
+            @compositionstart="handleComposition"
+            @compositionupdate="handleComposition"
+            @compositionend="handleComposition"
           />
         </div>
       </div>
@@ -169,6 +175,7 @@ import {
   removeResizeListener,
 } from '@element-plus/utils/resize-event'
 import { isValidComponentSize } from '@element-plus/utils/validators'
+import { isKorean } from '@element-plus/utils/isDef'
 import type { Options } from '@element-plus/components/popper'
 
 import type { ComputedRef, PropType, Ref } from 'vue'
@@ -299,6 +306,7 @@ export default defineComponent({
     const searchInputValue = ref('')
     const presentTags: Ref<Tag[]> = ref([])
     const suggestions: Ref<CascaderNode[]> = ref([])
+    const isOnComposition = ref(false)
 
     const isDisabled = computed(() => props.disabled || elForm.disabled)
     const inputPlaceholder = computed(
@@ -504,7 +512,20 @@ export default defineComponent({
       emit('expand-change', value)
     }
 
+    const handleComposition = (event: CompositionEvent) => {
+      const text = (event.target as HTMLInputElement)?.value
+      if (event.type === 'compositionend') {
+        isOnComposition.value = false
+        nextTick(() => handleInput(text))
+      } else {
+        const lastCharacter = text[text.length - 1] || ''
+        isOnComposition.value = !isKorean(lastCharacter)
+      }
+    }
+
     const handleKeyDown = (e: KeyboardEvent) => {
+      if (isOnComposition.value) return
+
       switch (e.code) {
         case EVENT_CODE.enter:
           togglePopperVisible()
@@ -569,7 +590,7 @@ export default defineComponent({
       }
     }, props.debounce)
 
-    const handleInput = (val: string, e: KeyboardEvent) => {
+    const handleInput = (val: string, e?: KeyboardEvent) => {
       !popperVisible.value && togglePopperVisible(true)
 
       if (e?.isComposing) return
@@ -618,6 +639,7 @@ export default defineComponent({
       presentTags,
       suggestions,
       isDisabled,
+      isOnComposition,
       realSize,
       tagSize,
       multiple,
@@ -631,6 +653,7 @@ export default defineComponent({
       getCheckedNodes,
       handleExpandChange,
       handleKeyDown,
+      handleComposition,
       handleClear,
       handleSuggestionClick,
       handleDelete,

package/packages/components/col/index.ts

@@ -1,13 +1,8 @@
-import Col from './src/col'
-
-import type { App } from 'vue'
-import type { SFCWithInstall } from '@element-plus/utils/types'
+import { withInstall } from '@element-plus/utils/with-install'
 
-const _Col = Col as SFCWithInstall<typeof Col>
+import Col from './src/col'
 
-_Col.install = (app: App) => {
-  app.component(_Col.name, _Col)
-}
+export const ElCol = withInstall(Col)
+export default ElCol
 
-export default _Col
-export const ElCol = _Col
+export * from './src/col'

package/packages/components/col/src/col.ts

@@ -1,58 +1,65 @@
-import { defineComponent, computed, inject, h } from 'vue'
-import type { PropType } from 'vue'
+import { defineComponent, computed, inject, h, renderSlot } from 'vue'
+import { buildProps, definePropType, mutable } from '@element-plus/utils/props'
+import type { ExtractPropTypes, CSSProperties } from 'vue'
 
 type SizeObject = {
-  span: number
-  offset: number
+  span?: number
+  offset?: number
 }
-const ElCol = defineComponent({
-  name: 'ElCol',
-  props: {
-    tag: {
-      type: String,
-      default: 'div',
-    },
-    span: {
-      type: Number,
-      default: 24,
-    },
-    offset: {
-      type: Number,
-      default: 0,
-    },
-    pull: {
-      type: Number,
-      default: 0,
-    },
-    push: {
-      type: Number,
-      default: 0,
-    },
-    xs: {
-      type: [Number, Object] as PropType<number | SizeObject>,
-      default: () => ({} as SizeObject),
-    },
-    sm: {
-      type: [Number, Object] as PropType<number | SizeObject>,
-      default: () => ({} as SizeObject),
-    },
-    md: {
-      type: [Number, Object] as PropType<number | SizeObject>,
-      default: () => ({} as SizeObject),
-    },
-    lg: {
-      type: [Number, Object] as PropType<number | SizeObject>,
-      default: () => ({} as SizeObject),
-    },
-    xl: {
-      type: [Number, Object] as PropType<number | SizeObject>,
-      default: () => ({} as SizeObject),
-    },
+type Size = number | SizeObject
+
+export const colProps = buildProps({
+  tag: {
+    type: String,
+    default: 'div',
+  },
+  span: {
+    type: Number,
+    default: 24,
+  },
+  offset: {
+    type: Number,
+    default: 0,
+  },
+  pull: {
+    type: Number,
+    default: 0,
+  },
+  push: {
+    type: Number,
+    default: 0,
+  },
+  xs: {
+    type: definePropType<Size>([Number, Object]),
+    default: () => mutable({} as const),
+  },
+  sm: {
+    type: definePropType<Size>([Number, Object]),
+    default: () => mutable({} as const),
+  },
+  md: {
+    type: definePropType<Size>([Number, Object]),
+    default: () => mutable({} as const),
   },
+  lg: {
+    type: definePropType<Size>([Number, Object]),
+    default: () => mutable({} as const),
+  },
+  xl: {
+    type: definePropType<Size>([Number, Object]),
+    default: () => mutable({} as const),
+  },
+} as const)
+export type ColProps = ExtractPropTypes<typeof colProps>
+
+export default defineComponent({
+  name: 'ElCol',
+  props: colProps,
+
   setup(props, { slots }) {
     const { gutter } = inject('ElRow', { gutter: { value: 0 } })
 
-    const style = computed(() => {
+    const style = computed<CSSProperties>(() => {
       if (gutter.value) {
         return {
           paddingLeft: `${gutter.value / 2}px`,
@@ -61,24 +68,27 @@ const ElCol = defineComponent({
       }
       return {}
     })
+
     const classList = computed(() => {
-      const ret: string[] = []
+      const classes: string[] = []
+
       const pos = ['span', 'offset', 'pull', 'push'] as const
       pos.forEach((prop) => {
         const size = props[prop]
         if (typeof size === 'number') {
-          if (prop === 'span') ret.push(`el-col-${props[prop]}`)
-          else if (size > 0) ret.push(`el-col-${prop}-${props[prop]}`)
+          if (prop === 'span') classes.push(`el-col-${props[prop]}`)
+          else if (size > 0) classes.push(`el-col-${prop}-${props[prop]}`)
         }
       })
+
       const sizes = ['xs', 'sm', 'md', 'lg', 'xl'] as const
       sizes.forEach((size) => {
         if (typeof props[size] === 'number') {
-          ret.push(`el-col-${size}-${props[size]}`)
+          classes.push(`el-col-${size}-${props[size]}`)
         } else if (typeof props[size] === 'object') {
           const sizeProps = props[size]
           Object.keys(sizeProps).forEach((prop) => {
-            ret.push(
+            classes.push(
               prop !== 'span'
                 ? `el-col-${size}-${prop}-${sizeProps[prop]}`
                 : `el-col-${size}-${sizeProps[prop]}`
@@ -88,10 +98,10 @@ const ElCol = defineComponent({
       })
       // this is for the fix
       if (gutter.value) {
-        ret.push('is-guttered')
+        classes.push('is-guttered')
       }
 
-      return ret
+      return classes
     })
 
     return () =>
@@ -101,9 +111,7 @@ const ElCol = defineComponent({
           class: ['el-col', classList.value],
           style: style.value,
         },
-        slots.default?.()
+        [renderSlot(slots, 'default')]
       )
   },
 })
-
-export default ElCol

package/packages/components/color-picker/src/index.vue

@@ -62,6 +62,7 @@
           colorDisabled ? 'is-disabled' : '',
           colorSize ? `el-color-picker--${colorSize}` : '',
         ]"
+        :widget="widget"
       >
         <div v-if="colorDisabled" class="el-color-picker__mask"></div>
         <div class="el-color-picker__trigger" @click="handleTrigger">
@@ -149,6 +150,7 @@ export default defineComponent({
     },
     popperClass: String,
     predefine: Array,
+    widget: String,
   },
   emits: ['change', 'active-change', UPDATE_MODEL_EVENT],
   setup(props, { emit }) {