element-pe 1.0.2 → 1.0.6

package/packages/components/date-picker/src/date-picker-com/panel-date-pick.vue

@@ -188,7 +188,7 @@ import MonthTable from './basic-month-table.vue'
 import YearTable from './basic-year-table.vue'
 
 import type { PropType } from 'vue'
-import type { Dayjs, ConfigType } from 'dayjs'
+import type { ConfigType, Dayjs } from 'dayjs'
 import type { IDatePickerType } from '../date-picker.type'
 
 // todo
@@ -512,9 +512,11 @@ export default defineComponent({
       }
     }
 
-    const isValidValue = (date_) => {
+    const isValidValue = (date: unknown) => {
       return (
-        date_.isValid() && (disabledDate ? !disabledDate(date_.toDate()) : true)
+        dayjs.isDayjs(date) &&
+        date.isValid() &&
+        (disabledDate ? !disabledDate(date.toDate()) : true)
       )
     }
 

package/packages/components/dialog/src/dialog.ts

@@ -1,17 +1,17 @@
 import { isValidWidthUnit } from '@element-plus/utils/validators'
-import { buildProp, definePropType } from '@element-plus/utils/props'
+import { buildProps, definePropType } from '@element-plus/utils/props'
 import { UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'
 
 import type { ExtractPropTypes } from 'vue'
 
-export const dialogProps = {
+export const dialogProps = buildProps({
   appendToBody: {
     type: Boolean,
     default: false,
   },
-  beforeClose: buildProp({
+  beforeClose: {
     type: definePropType<(...args: any[]) => void>(Function),
-  }),
+  },
   destroyOnClose: {
     type: Boolean,
     default: false,
@@ -68,17 +68,17 @@ export const dialogProps = {
     required: true,
   },
   modalClass: String,
-  width: buildProp({
+  width: {
     type: [String, Number],
     validator: isValidWidthUnit,
-  }),
+  },
   zIndex: {
     type: Number,
   },
   widget: {
     type: String,
   },
-} as const
+} as const)
 export type DialogProps = ExtractPropTypes<typeof dialogProps>
 
 export const dialogEmits = {

package/packages/components/divider/src/divider.ts

@@ -1,17 +1,17 @@
-import { buildProp } from '@element-plus/utils/props'
+import { buildProps } from '@element-plus/utils/props'
 
 import type { ExtractPropTypes } from 'vue'
 
-export const dividerProps = {
-  direction: buildProp({
+export const dividerProps = buildProps({
+  direction: {
     type: String,
     values: ['horizontal', 'vertical'],
     default: 'horizontal',
-  } as const),
-  contentPosition: buildProp({
+  },
+  contentPosition: {
     type: String,
     values: ['left', 'center', 'right'],
     default: 'center',
-  } as const),
-} as const
+  },
+} as const)
 export type DividerProps = ExtractPropTypes<typeof dividerProps>

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

@@ -3,7 +3,7 @@ import { mount } from '@vue/test-utils'
 import installStyle from '@element-plus/test-utils/style-plugin'
 import Checkbox from '@element-plus/components/checkbox/src/checkbox.vue'
 import CheckboxGroup from '@element-plus/components/checkbox/src/checkbox-group.vue'
-import Input from '@element-plus/components/input/src/index.vue'
+import Input from '@element-plus/components/input'
 import Form from '../src/form.vue'
 import FormItem from '../src/form-item.vue'
 import type { VueWrapper } from '@vue/test-utils'

package/packages/components/form/src/form-item.vue

@@ -151,7 +151,7 @@ export default defineComponent({
     const labelStyle = computed(() => {
       const ret: CSSProperties = {}
       if (elForm.labelPosition === 'top') return ret
-      const labelWidth = addUnit(props.labelWidth) || addUnit(elForm.labelWidth)
+      const labelWidth = addUnit(props.labelWidth || elForm.labelWidth)
       if (labelWidth) {
         ret.width = labelWidth
       }
@@ -165,7 +165,7 @@ export default defineComponent({
       if (!props.label && !props.labelWidth && isNested.value) {
         return ret
       }
-      const labelWidth = addUnit(props.labelWidth) || addUnit(elForm.labelWidth)
+      const labelWidth = addUnit(props.labelWidth || elForm.labelWidth)
       if (!props.label && !slots.label) {
         ret.marginLeft = labelWidth
       }

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

@@ -5,7 +5,7 @@ import {
   IMAGE_FAIL,
   mockImageEvent,
 } from '@element-plus/test-utils/mock'
-import Image from '../src/index.vue'
+import Image from '../src/image.vue'
 
 // firstly wait for image event
 // secondly wait for vue render

package/packages/components/image/index.ts

@@ -1,13 +1,8 @@
-import Image 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 Image from './src/image.vue'
 
-Image.install = (app: App): void => {
-  app.component(Image.name, Image)
-}
+export const ElImage = withInstall(Image)
+export default ElImage
 
-const _Image = Image as SFCWithInstall<typeof Image>
-
-export default _Image
-export const ElImage = _Image
+export * from './src/image'

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

@@ -0,0 +1,48 @@
+import { buildProps, definePropType, mutable } from '@element-plus/utils/props'
+import { isNumber } from '@element-plus/utils/util'
+
+import type { ExtractPropTypes } from 'vue'
+
+export const imageProps = buildProps({
+  appendToBody: {
+    type: Boolean,
+    default: false,
+  },
+  hideOnClickModal: {
+    type: Boolean,
+    default: false,
+  },
+  src: {
+    type: String,
+    default: '',
+  },
+  fit: {
+    type: String,
+    values: ['', 'contain', 'cover', 'fill', 'none', 'scale-down'],
+    default: '',
+  },
+  lazy: {
+    type: Boolean,
+    default: false,
+  },
+  scrollContainer: {
+    type: definePropType<string | HTMLElement | undefined>([String, Object]),
+  },
+  previewSrcList: {
+    type: definePropType<string[]>(Array),
+    default: () => mutable([] as const),
+  },
+  zIndex: {
+    type: Number,
+    default: 2000,
+  },
+  widget: String,
+} as const)
+export type ImageProps = ExtractPropTypes<typeof imageProps>
+
+export const imageEmits = {
+  error: (evt: Event) => evt instanceof Event,
+  switch: (val: number) => isNumber(val),
+  close: () => true,
+}
+export type ImageEmits = typeof imageEmits

package/packages/components/image/src/image.vue

@@ -0,0 +1,264 @@
+<template>
+  <div
+    ref="container"
+    :class="['el-image', $attrs.class]"
+    :style="containerStyle"
+    :widget="widget"
+  >
+    <slot v-if="loading" name="placeholder">
+      <div class="el-image__placeholder"></div>
+    </slot>
+    <slot v-else-if="hasLoadError" name="error">
+      <div class="el-image__error">{{ t('el.image.error') }}</div>
+    </slot>
+    <img
+      v-else
+      class="el-image__inner"
+      v-bind="attrs"
+      :src="src"
+      :style="imageStyle"
+      :class="{
+        'el-image__preview': preview,
+      }"
+      @click="clickHandler"
+    />
+    <teleport to="body" :disabled="!appendToBody">
+      <template v-if="preview">
+        <image-viewer
+          v-if="showViewer"
+          :z-index="zIndex"
+          :initial-index="imageIndex"
+          :url-list="previewSrcList"
+          :hide-on-click-modal="hideOnClickModal"
+          @close="closeViewer"
+          @switch="switchViewer"
+        >
+          <div v-if="$slots.viewer">
+            <slot name="viewer" />
+          </div>
+        </image-viewer>
+      </template>
+    </teleport>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, computed, ref, onMounted, watch, nextTick } from 'vue'
+import { isString } from '@vue/shared'
+import { useEventListener, useThrottleFn } from '@vueuse/core'
+import { useAttrs, useLocaleInject } from '@element-plus/hooks'
+import ImageViewer from '@element-plus/components/image-viewer'
+import isServer from '@element-plus/utils/isServer'
+import { getScrollContainer, isInContainer } from '@element-plus/utils/dom'
+import { imageEmits, imageProps } from './image'
+
+import type { CSSProperties, StyleValue } from 'vue'
+
+const isHtmlElement = (e: any): e is Element =>
+  e && e.nodeType === Node.ELEMENT_NODE
+
+let prevOverflow = ''
+
+export default defineComponent({
+  name: 'ElImage',
+  components: {
+    ImageViewer,
+  },
+  inheritAttrs: false,
+
+  props: imageProps,
+  emits: imageEmits,
+
+  setup(props, { emit, attrs: rawAttrs }) {
+    const { t } = useLocaleInject()
+
+    const attrs = useAttrs()
+    const hasLoadError = ref(false)
+    const loading = ref(true)
+    const imgWidth = ref(0)
+    const imgHeight = ref(0)
+    const showViewer = ref(false)
+    const container = ref<HTMLElement>()
+
+    const _scrollContainer = ref<HTMLElement | Window>()
+    let stopScrollListener: () => void
+    let stopWheelListener: () => void
+
+    const containerStyle = computed(() => rawAttrs.style as StyleValue)
+
+    const imageStyle = computed<CSSProperties>(() => {
+      const { fit } = props
+      if (!isServer && fit) {
+        return { objectFit: fit }
+      }
+      return {}
+    })
+
+    const preview = computed(() => {
+      const { previewSrcList } = props
+      return Array.isArray(previewSrcList) && previewSrcList.length > 0
+    })
+
+    const imageIndex = computed(() => {
+      const { src, previewSrcList } = props
+      let previewIndex = 0
+      const srcIndex = previewSrcList.indexOf(src)
+      if (srcIndex >= 0) {
+        previewIndex = srcIndex
+      }
+      return previewIndex
+    })
+
+    const loadImage = () => {
+      if (isServer) return
+
+      // reset status
+      loading.value = true
+      hasLoadError.value = false
+
+      const img = new Image()
+      img.addEventListener('load', (e) => handleLoad(e, img))
+      img.addEventListener('error', handleError)
+
+      // bind html attrs
+      // so it can behave consistently
+      Object.entries(attrs.value).forEach(([key, value]) => {
+        // avoid onload to be overwritten
+        if (key.toLowerCase() === 'onload') return
+        img.setAttribute(key, value as string)
+      })
+      img.src = props.src
+    }
+
+    function handleLoad(e: Event, img: HTMLImageElement) {
+      imgWidth.value = img.width
+      imgHeight.value = img.height
+      loading.value = false
+      hasLoadError.value = false
+    }
+
+    function handleError(event: Event) {
+      loading.value = false
+      hasLoadError.value = true
+      emit('error', event)
+    }
+
+    function handleLazyLoad() {
+      if (isInContainer(container.value, _scrollContainer.value)) {
+        loadImage()
+        removeLazyLoadListener()
+      }
+    }
+    const lazyLoadHandler = useThrottleFn(handleLazyLoad, 200)
+
+    async function addLazyLoadListener() {
+      if (isServer) return
+
+      await nextTick()
+
+      const { scrollContainer } = props
+      if (isHtmlElement(scrollContainer)) {
+        _scrollContainer.value = scrollContainer
+      } else if (isString(scrollContainer) && scrollContainer !== '') {
+        _scrollContainer.value =
+          document.querySelector<HTMLElement>(scrollContainer) ?? undefined
+      } else if (container.value) {
+        _scrollContainer.value = getScrollContainer(container.value)
+      }
+
+      if (_scrollContainer.value) {
+        stopScrollListener = useEventListener(
+          _scrollContainer,
+          'scroll',
+          lazyLoadHandler
+        )
+        setTimeout(() => handleLazyLoad(), 100)
+      }
+    }
+
+    function removeLazyLoadListener() {
+      if (isServer || !_scrollContainer.value || !lazyLoadHandler) return
+
+      stopScrollListener()
+      _scrollContainer.value = undefined
+    }
+
+    function wheelHandler(e: WheelEvent) {
+      if (!e.ctrlKey) return
+
+      if (e.deltaY < 0) {
+        e.preventDefault()
+        return false
+      } else if (e.deltaY > 0) {
+        e.preventDefault()
+        return false
+      }
+    }
+
+    function clickHandler() {
+      // don't show viewer when preview is false
+      if (!preview.value) return
+
+      stopWheelListener = useEventListener('wheel', wheelHandler, {
+        passive: false,
+      })
+
+      // prevent body scroll
+      prevOverflow = document.body.style.overflow
+      document.body.style.overflow = 'hidden'
+      showViewer.value = true
+    }
+
+    function closeViewer() {
+      stopWheelListener?.()
+      document.body.style.overflow = prevOverflow
+      showViewer.value = false
+      emit('close')
+    }
+
+    function switchViewer(val: number) {
+      emit('switch', val)
+    }
+
+    watch(
+      () => props.src,
+      () => {
+        if (props.lazy) {
+          // reset status
+          loading.value = true
+          hasLoadError.value = false
+          removeLazyLoadListener()
+          addLazyLoadListener()
+        } else {
+          loadImage()
+        }
+      }
+    )
+
+    onMounted(() => {
+      if (props.lazy) {
+        addLazyLoadListener()
+      } else {
+        loadImage()
+      }
+    })
+
+    return {
+      attrs,
+      loading,
+      hasLoadError,
+      showViewer,
+      containerStyle,
+      imageStyle,
+      preview,
+      imageIndex,
+      container,
+
+      clickHandler,
+      closeViewer,
+      switchViewer,
+      t,
+    }
+  },
+})
+</script>

package/packages/components/image-viewer/__tests__/image-viewer.spec.ts

@@ -2,7 +2,7 @@ import { nextTick } from 'vue'
 
 import { IMAGE_SUCCESS } from '@element-plus/test-utils/mock'
 import makeMount from '@element-plus/test-utils/make-mount'
-import ImageViewer from '../src/index.vue'
+import ImageViewer from '../src/image-viewer.vue'
 
 const mount = makeMount(ImageViewer, {
   props: {

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