element-pe 1.0.5 → 1.0.6

package/packages/components/image-viewer/index.ts

@@ -1,13 +1,8 @@
-import ImageViewer from './src/index.vue'
+import { withInstall } from '@element-plus/utils/with-install'
 
-import type { App } from 'vue'
-import type { SFCWithInstall } from '@element-plus/utils/types'
+import ImageViewer from './src/image-viewer.vue'
 
-ImageViewer.install = (app: App): void => {
-  app.component(ImageViewer.name, ImageViewer)
-}
+export const ElImageViewer = withInstall(ImageViewer)
+export default ElImageViewer
 
-const _ImageViewer = ImageViewer as SFCWithInstall<typeof ImageViewer>
-
-export default _ImageViewer
-export const ElImageViewer = _ImageViewer
+export * from './src/image-viewer'

package/packages/components/image-viewer/src/image-viewer.ts

@@ -0,0 +1,32 @@
+import { buildProps, definePropType, mutable } from '@element-plus/utils/props'
+import type { ExtractPropTypes } from 'vue'
+
+export const imageViewerProps = buildProps({
+  urlList: {
+    type: definePropType<string[]>(Array),
+    default: () => mutable([] as const),
+  },
+  zIndex: {
+    type: Number,
+    default: 2000,
+  },
+  initialIndex: {
+    type: Number,
+    default: 0,
+  },
+  infinite: {
+    type: Boolean,
+    default: true,
+  },
+  hideOnClickModal: {
+    type: Boolean,
+    default: false,
+  },
+} as const)
+export type ImageViewerProps = ExtractPropTypes<typeof imageViewerProps>
+
+export const imageViewerEmits = {
+  close: () => true,
+  switch: (index: number) => typeof index === 'number',
+}
+export type ImageViewerEmits = typeof imageViewerEmits

package/packages/components/image-viewer/src/{index.vue → image-viewer.vue}

@@ -9,11 +9,13 @@
       <div
         class="el-image-viewer__mask"
         @click.self="hideOnClickModal && hide()"
-      ></div>
+      />
+
       <!-- CLOSE -->
       <span class="el-image-viewer__btn el-image-viewer__close" @click="hide">
-        <i class="el-icon-close"></i>
+        <i class="el-icon-close" />
       </span>
+
       <!-- ARROW -->
       <template v-if="!isSingle">
         <span
@@ -21,32 +23,32 @@
           :class="{ 'is-disabled': !infinite && isFirst }"
           @click="prev"
         >
-          <i class="el-icon-arrow-left"></i>
+          <i class="el-icon-arrow-left" />
         </span>
         <span
           class="el-image-viewer__btn el-image-viewer__next"
           :class="{ 'is-disabled': !infinite && isLast }"
           @click="next"
         >
-          <i class="el-icon-arrow-right"></i>
+          <i class="el-icon-arrow-right" />
         </span>
       </template>
       <!-- ACTIONS -->
       <div class="el-image-viewer__btn el-image-viewer__actions">
         <div class="el-image-viewer__actions__inner">
-          <i class="el-icon-zoom-out" @click="handleActions('zoomOut')"></i>
-          <i class="el-icon-zoom-in" @click="handleActions('zoomIn')"></i>
-          <i class="el-image-viewer__actions__divider"></i>
-          <i :class="mode.icon" @click="toggleMode"></i>
-          <i class="el-image-viewer__actions__divider"></i>
+          <i class="el-icon-zoom-out" @click="handleActions('zoomOut')" />
+          <i class="el-icon-zoom-in" @click="handleActions('zoomIn')" />
+          <i class="el-image-viewer__actions__divider" />
+          <i :class="mode.icon" @click="toggleMode" />
+          <i class="el-image-viewer__actions__divider" />
           <i
             class="el-icon-refresh-left"
             @click="handleActions('anticlocelise')"
-          ></i>
+          />
           <i
             class="el-icon-refresh-right"
             @click="handleActions('clocelise')"
-          ></i>
+          />
         </div>
       </div>
       <!-- CANVAS -->
@@ -70,13 +72,22 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, computed, ref, onMounted, watch, nextTick } from 'vue'
+import {
+  defineComponent,
+  computed,
+  ref,
+  onMounted,
+  watch,
+  nextTick,
+  effectScope,
+} from 'vue'
+import { useEventListener } from '@vueuse/core'
 import { useLocaleInject } from '@element-plus/hooks'
 import { EVENT_CODE } from '@element-plus/utils/aria'
-import { on, off } from '@element-plus/utils/dom'
 import { rafThrottle, isFirefox } from '@element-plus/utils/util'
+import { imageViewerProps, imageViewerEmits } from './image-viewer'
 
-import type { PropType, CSSProperties } from 'vue'
+import type { CSSProperties } from 'vue'
 
 const Mode = {
   CONTAIN: {
@@ -90,8 +101,6 @@ const Mode = {
 }
 
 const mousewheelEventName = isFirefox() ? 'DOMMouseScroll' : 'mousewheel'
-const CLOSE_EVENT = 'close'
-const SWITCH_EVENT = 'switch'
 export type ImageViewerAction =
   | 'zoomIn'
   | 'zoomOut'
@@ -100,42 +109,19 @@ export type ImageViewerAction =
 
 export default defineComponent({
   name: 'ElImageViewer',
-  props: {
-    urlList: {
-      type: Array as PropType<string[]>,
-      default: () => [],
-    },
-    zIndex: {
-      type: Number,
-      default: 2000,
-    },
-    initialIndex: {
-      type: Number,
-      default: 0,
-    },
-    infinite: {
-      type: Boolean,
-      default: true,
-    },
-    hideOnClickModal: {
-      type: Boolean,
-      default: false,
-    },
-  },
 
-  emits: [CLOSE_EVENT, SWITCH_EVENT],
+  props: imageViewerProps,
+  emits: imageViewerEmits,
 
   setup(props, { emit }) {
     const { t } = useLocaleInject()
+    const wrapper = ref<HTMLDivElement>()
+    const img = ref<HTMLImageElement>()
 
-    let _keyDownHandler = null
-    let _mouseWheelHandler = null
-    let _dragHandler = null
+    const scopeEventListener = effectScope()
 
     const loading = ref(true)
     const index = ref(props.initialIndex)
-    const wrapper = ref(null)
-    const img = ref(null)
     const mode = ref(Mode.CONTAIN)
     const transform = ref({
       scale: 1,
@@ -164,12 +150,12 @@ export default defineComponent({
 
     const imgStyle = computed(() => {
       const { scale, deg, offsetX, offsetY, enableTransition } = transform.value
-      const style = {
+      const style: CSSProperties = {
         transform: `scale(${scale}) rotate(${deg}deg)`,
         transition: enableTransition ? 'transform .3s' : '',
         marginLeft: `${offsetX}px`,
         marginTop: `${offsetY}px`,
-      } as CSSProperties
+      }
       if (mode.value.name === Mode.CONTAIN.name) {
         style.maxWidth = style.maxHeight = '100%'
       }
@@ -177,12 +163,12 @@ export default defineComponent({
     })
 
     function hide() {
-      deviceSupportUninstall()
-      emit(CLOSE_EVENT)
+      unregisterEventListener()
+      emit('close')
     }
 
-    function deviceSupportInstall() {
-      _keyDownHandler = rafThrottle((e: KeyboardEvent) => {
+    function registerEventListener() {
+      const keydownHandler = rafThrottle((e: KeyboardEvent) => {
         switch (e.code) {
           // ESC
           case EVENT_CODE.esc:
@@ -210,43 +196,44 @@ export default defineComponent({
             break
         }
       })
-
-      _mouseWheelHandler = rafThrottle((e) => {
-        const delta = e.wheelDelta ? e.wheelDelta : -e.detail
-        if (delta > 0) {
-          handleActions('zoomIn', {
-            zoomRate: 0.015,
-            enableTransition: false,
-          })
-        } else {
-          handleActions('zoomOut', {
-            zoomRate: 0.015,
-            enableTransition: false,
-          })
+      const mousewheelHandler = rafThrottle(
+        (e: WheelEvent | any /* TODO: wheelDelta is deprecated */) => {
+          const delta = e.wheelDelta ? e.wheelDelta : -e.detail
+          if (delta > 0) {
+            handleActions('zoomIn', {
+              zoomRate: 0.015,
+              enableTransition: false,
+            })
+          } else {
+            handleActions('zoomOut', {
+              zoomRate: 0.015,
+              enableTransition: false,
+            })
+          }
         }
+      )
+
+      scopeEventListener.run(() => {
+        useEventListener(document, 'keydown', keydownHandler)
+        useEventListener(document, mousewheelEventName, mousewheelHandler)
       })
-      on(document, 'keydown', _keyDownHandler)
-      on(document, mousewheelEventName, _mouseWheelHandler)
     }
 
-    function deviceSupportUninstall() {
-      off(document, 'keydown', _keyDownHandler)
-      off(document, mousewheelEventName, _mouseWheelHandler)
-      _keyDownHandler = null
-      _mouseWheelHandler = null
+    function unregisterEventListener() {
+      scopeEventListener.stop()
     }
 
     function handleImgLoad() {
       loading.value = false
     }
 
-    function handleImgError(e) {
+    function handleImgError(e: Event) {
       loading.value = false
-      e.target.alt = t('el.image.error')
+      ;(e.target as HTMLImageElement).alt = t('el.image.error')
     }
 
     function handleMouseDown(e: MouseEvent) {
-      if (loading.value || e.button !== 0) return
+      if (loading.value || e.button !== 0 || !wrapper.value) return
 
       const { offsetX, offsetY } = transform.value
       const startX = e.pageX
@@ -257,17 +244,21 @@ export default defineComponent({
       const divTop = wrapper.value.clientTop
       const divBottom = wrapper.value.clientTop + wrapper.value.clientHeight
 
-      _dragHandler = rafThrottle((ev) => {
+      const dragHandler = rafThrottle((ev: MouseEvent) => {
         transform.value = {
           ...transform.value,
           offsetX: offsetX + ev.pageX - startX,
           offsetY: offsetY + ev.pageY - startY,
         }
       })
-      on(document, 'mousemove', _dragHandler)
-      on(document, 'mouseup', (e: MouseEvent) => {
-        const mouseX = e.pageX
-        const mouseY = e.pageY
+      const removeMousemove = useEventListener(
+        document,
+        'mousemove',
+        dragHandler
+      )
+      useEventListener(document, 'mouseup', (evt) => {
+        const mouseX = evt.pageX
+        const mouseY = evt.pageY
         if (
           mouseX < divLeft ||
           mouseX > divRight ||
@@ -276,7 +267,7 @@ export default defineComponent({
         ) {
           reset()
         }
-        off(document, 'mousemove', _dragHandler)
+        removeMousemove()
       })
 
       e.preventDefault()
@@ -350,7 +341,7 @@ export default defineComponent({
     watch(currentImg, () => {
       nextTick(() => {
         const $img = img.value
-        if (!$img.complete) {
+        if (!$img?.complete) {
           loading.value = true
         }
       })
@@ -358,11 +349,11 @@ export default defineComponent({
 
     watch(index, (val) => {
       reset()
-      emit(SWITCH_EVENT, val)
+      emit('switch', val)
     })
 
     onMounted(() => {
-      deviceSupportInstall()
+      registerEventListener()
       // add tabindex then wrapper can be focusable via Javascript
       // focus wrapper so arrow key can't cause inner scroll behavior underneath
       wrapper.value?.focus?.()

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

@@ -1,7 +1,7 @@
 import { nextTick, ref } from 'vue'
 import { mount } from '@vue/test-utils'
 import { sleep, defineGetter } from '@element-plus/test-utils'
-import Input from '../src/index.vue'
+import Input from '../src/input.vue'
 
 const _mount = (options) =>
   mount({
@@ -84,17 +84,17 @@ describe('Input.vue', () => {
 
       const elCount = wrapper.find('.el-input__count-inner')
       expect(elCount.exists()).toBe(true)
-      expect(elCount.text()).toBe('3/4')
+      expect(elCount.text()).toBe('3 / 4')
 
       vm.inputVal = '1👌3😄'
       await sleep()
       expect(nativeInput.value).toBe('1👌3😄')
-      expect(elCount.text()).toBe('4/4')
+      expect(elCount.text()).toBe('4 / 4')
 
       vm.inputVal = '哈哈1👌3😄'
       await sleep()
       expect(nativeInput.value).toBe('哈哈1👌3😄')
-      expect(elCount.text()).toBe('6/4')
+      expect(elCount.text()).toBe('6 / 4')
       expect(vm.$el.classList.contains('is-exceed')).toBe(true)
     })
 
@@ -113,12 +113,12 @@ describe('Input.vue', () => {
 
       const elCount = wrapper.find('.el-input__count')
       expect(elCount.exists()).toBe(true)
-      expect(elCount.text()).toBe('3/4')
+      expect(elCount.text()).toBe('3 / 4')
 
       vm.inputVal = '哈哈1👌3😄'
       await sleep()
       expect(nativeInput.value).toBe('哈哈1👌3😄')
-      expect(elCount.text()).toBe('6/4')
+      expect(elCount.text()).toBe('6 / 4')
       expect(vm.$el.classList.contains('is-exceed')).toBe(true)
     })
   })
@@ -343,7 +343,7 @@ describe('Input.vue', () => {
       ref.autosize.minRows = 5
       ref.resizeTextarea()
       // Atfer this textarea min-height (style)  will change
-      const nowMinHeight = ref.computedTextareaStyle.minHeight
+      const nowMinHeight = ref.computedTextareaStyle[1].minHeight
       expect(originMinHeight).not.toEqual(nowMinHeight)
     })
   })

package/packages/components/input/index.ts

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

package/packages/components/input/src/{calcTextareaHeight.ts → calc-textarea-height.ts}

@@ -1,4 +1,6 @@
-let hiddenTextarea: HTMLTextAreaElement
+import { isNumber } from '@element-plus/utils/util'
+
+let hiddenTextarea: HTMLTextAreaElement | undefined = undefined
 
 const HIDDEN_STYLE = `
   height:0 !important;
@@ -60,10 +62,10 @@ function calculateNodeStyling(targetElement: Element): NodeStyle {
   return { contextStyle, paddingSize, borderSize, boxSizing }
 }
 
-export default function calcTextareaHeight(
-  targetElement: HTMLInputElement,
+export function calcTextareaHeight(
+  targetElement: HTMLTextAreaElement,
   minRows = 1,
-  maxRows = null
+  maxRows?: number
 ): TextAreaHeight {
   if (!hiddenTextarea) {
     hiddenTextarea = document.createElement('textarea')
@@ -88,7 +90,7 @@ export default function calcTextareaHeight(
   hiddenTextarea.value = ''
   const singleRowHeight = hiddenTextarea.scrollHeight - paddingSize
 
-  if (minRows !== null) {
+  if (isNumber(minRows)) {
     let minHeight = singleRowHeight * minRows
     if (boxSizing === 'border-box') {
       minHeight = minHeight + paddingSize + borderSize
@@ -96,7 +98,7 @@ export default function calcTextareaHeight(
     height = Math.max(minHeight, height)
     result.minHeight = `${minHeight}px`
   }
-  if (maxRows !== null) {
+  if (isNumber(maxRows)) {
     let maxHeight = singleRowHeight * maxRows
     if (boxSizing === 'border-box') {
       maxHeight = maxHeight + paddingSize + borderSize
@@ -105,7 +107,7 @@ export default function calcTextareaHeight(
   }
   result.height = `${height}px`
   hiddenTextarea.parentNode?.removeChild(hiddenTextarea)
-  hiddenTextarea = null
+  hiddenTextarea = undefined
 
   return result
 }

package/packages/components/input/src/input.ts

@@ -0,0 +1,100 @@
+import { isString } from '@vue/shared'
+import { useFormItemProps } from '@element-plus/hooks'
+import { buildProps, definePropType, mutable } from '@element-plus/utils/props'
+import { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'
+import type { StyleValue } from '@element-plus/utils/types'
+import type { ExtractPropTypes } from 'vue'
+
+type AutoSize = { minRows?: number; maxRows?: number } | boolean
+
+export const inputProps = buildProps({
+  ...useFormItemProps,
+  modelValue: {
+    type: definePropType<string | number | null | undefined>(undefined),
+    default: '',
+  },
+  type: {
+    type: String,
+    default: 'text',
+  },
+  resize: {
+    type: String,
+    values: ['none', 'both', 'horizontal', 'vertical'],
+  },
+  autosize: {
+    type: definePropType<AutoSize>([Boolean, Object]),
+    default: false,
+  },
+  autocomplete: {
+    type: String,
+    default: 'off',
+  },
+  placeholder: {
+    type: String,
+  },
+  form: {
+    type: String,
+    default: '',
+  },
+  readonly: {
+    type: Boolean,
+    default: false,
+  },
+  clearable: {
+    type: Boolean,
+    default: false,
+  },
+  showPassword: {
+    type: Boolean,
+    default: false,
+  },
+  showWordLimit: {
+    type: Boolean,
+    default: false,
+  },
+  suffixIcon: {
+    type: String,
+    default: '',
+  },
+  prefixIcon: {
+    type: String,
+    default: '',
+  },
+  label: {
+    type: String,
+  },
+  tabindex: {
+    type: [Number, String],
+  },
+  validateEvent: {
+    type: Boolean,
+    default: true,
+  },
+  inputStyle: {
+    type: definePropType<StyleValue>([Object, Array, String]),
+    default: () => mutable({} as const),
+  },
+  maxlength: {
+    type: [Number, String],
+  },
+  widget: {
+    type: String
+  }
+} as const)
+export type InputProps = ExtractPropTypes<typeof inputProps>
+
+export const inputEmits = {
+  [UPDATE_MODEL_EVENT]: (value: string) => isString(value),
+  input: (value: string) => isString(value),
+  change: (value: string) => isString(value),
+  focus: (evt: FocusEvent) => evt instanceof FocusEvent,
+  blur: (evt: FocusEvent) => evt instanceof FocusEvent,
+  clear: () => true,
+  mouseleave: (evt: MouseEvent) => evt instanceof MouseEvent,
+  mouseenter: (evt: MouseEvent) => evt instanceof MouseEvent,
+  keydown: (evt: KeyboardEvent) => evt instanceof KeyboardEvent,
+  compositionstart: (evt: CompositionEvent) => evt instanceof CompositionEvent,
+  compositionupdate: (evt: CompositionEvent) => evt instanceof CompositionEvent,
+  compositionend: (evt: CompositionEvent) => evt instanceof CompositionEvent,
+}
+export type InputEmits = typeof inputEmits