element-pe 1.0.2 → 1.0.6

package/lib/utils/tests/prop.spec.js

@@ -1,130 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const expect_type_1 = require("expect-type");
-const props_1 = require("../props");
-describe('buildProp', () => {
-    it('Only type', () => {
-        (0, expect_type_1.expectTypeOf)((0, props_1.buildProp)({
-            type: (0, props_1.definePropType)(String),
-        })).toEqualTypeOf();
-    });
-    it('Only values', () => {
-        (0, expect_type_1.expectTypeOf)((0, props_1.buildProp)({
-            values: [1, 2, 3, 4],
-        })).toEqualTypeOf();
-    });
-    it('Type and values', () => {
-        (0, expect_type_1.expectTypeOf)((0, props_1.buildProp)({
-            type: (0, props_1.definePropType)(Array),
-            values: [1, 2, 3, 4],
-        })).toEqualTypeOf();
-    });
-    it('Values and validator', () => {
-        (0, expect_type_1.expectTypeOf)((0, props_1.buildProp)({
-            values: ['a', 'b', 'c'],
-            validator: (val) => typeof val === 'number',
-        })).toEqualTypeOf();
-    });
-    it('Values and required', () => {
-        (0, expect_type_1.expectTypeOf)((0, props_1.buildProp)({
-            values: ['a', 'b', 'c'],
-            required: true,
-        })).toEqualTypeOf();
-    });
-    it('Value and default', () => {
-        (0, expect_type_1.expectTypeOf)((0, props_1.buildProp)({
-            values: ['a', 'b', 'c'],
-            required: false,
-            default: 'b',
-        })).toEqualTypeOf();
-    });
-    it('Type and Array default value', () => {
-        (0, expect_type_1.expectTypeOf)((0, props_1.buildProp)({
-            type: (0, props_1.definePropType)(Array),
-            default: () => (0, props_1.mutable)(['a', 'b']),
-        })).toEqualTypeOf();
-    });
-    it('Type and Object default value', () => {
-        (0, expect_type_1.expectTypeOf)((0, props_1.buildProp)({
-            type: (0, props_1.definePropType)(Object),
-            default: () => (0, props_1.mutable)({ key: 'value' }),
-        })).toEqualTypeOf();
-    });
-    it('Type, validator and Object default value', () => {
-        (0, expect_type_1.expectTypeOf)((0, props_1.buildProp)({
-            type: (0, props_1.definePropType)(Object),
-            default: () => ({ key: 'value' }),
-            validator: (val) => true,
-        })).toEqualTypeOf();
-    });
-    it('Type, validator, required', () => {
-        (0, expect_type_1.expectTypeOf)((0, props_1.buildProp)({
-            type: (0, props_1.definePropType)(String),
-            required: true,
-            validator: (val) => true,
-        })).toEqualTypeOf();
-    });
-    it('Normal type', () => {
-        (0, expect_type_1.expectTypeOf)((0, props_1.buildProp)({
-            type: String,
-        })).toEqualTypeOf();
-    });
-    it('Normal types', () => {
-        (0, expect_type_1.expectTypeOf)((0, props_1.buildProp)({ type: [String, Number, Boolean] })).toEqualTypeOf();
-    });
-    it('Normal type and values', () => {
-        (0, expect_type_1.expectTypeOf)((0, props_1.buildProp)({
-            type: String,
-            values: ['1', '2', '3'],
-        })).toEqualTypeOf();
-    });
-    it('Required and validator', () => {
-        (0, expect_type_1.expectTypeOf)((0, props_1.buildProp)({
-            required: true,
-            validator: (val) => true,
-        })).toEqualTypeOf();
-    });
-    it('Required and validator', () => {
-        (0, expect_type_1.expectTypeOf)((0, props_1.buildProp)({
-            values: (0, props_1.keyOf)({ a: 'a', b: 'b' }),
-            default: 'a',
-        })).toEqualTypeOf();
-    });
-    it('Type and default value', () => {
-        (0, expect_type_1.expectTypeOf)((0, props_1.buildProp)({
-            type: (0, props_1.definePropType)(Object),
-            default: () => (0, props_1.mutable)({ key: 'a' }),
-        })).toEqualTypeOf();
-    });
-    it('Type and default value', () => {
-        (0, expect_type_1.expectTypeOf)((0, props_1.buildProp)({
-            type: [String, Number],
-            default: '',
-        })).toEqualTypeOf();
-    });
-    it('extract', () => {
-        const props = {
-            key1: (0, props_1.buildProp)({
-                type: String,
-                required: true,
-            }),
-            key2: (0, props_1.buildProp)({
-                type: [String, Number],
-                required: true,
-            }),
-        };
-        (0, expect_type_1.expectTypeOf)().toEqualTypeOf();
-    });
-});
-describe('buildProps', () => {
-    it('test buildProps', () => {
-        (0, expect_type_1.expectTypeOf)((0, props_1.buildProps)({
-            key1: {
-                type: (0, props_1.definePropType)(String),
-            },
-            key2: {
-                values: [1, 2, 3, 4],
-            },
-        })).toEqualTypeOf();
-    });
-});

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

@@ -1,359 +0,0 @@
-<template>
-  <div
-    ref="container"
-    :class="['el-image', $attrs.class]"
-    :style="$attrs.style"
-    :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__inner--center': alignCenter,
-        '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,
-  onBeforeUnmount,
-  watch,
-  nextTick,
-} from 'vue'
-import { isString } from '@vue/shared'
-import throttle from 'lodash/throttle'
-import { useAttrs, useLocaleInject } from '@element-plus/hooks'
-import ImageViewer from '@element-plus/components/image-viewer'
-import isServer from '@element-plus/utils/isServer'
-import {
-  on,
-  off,
-  getScrollContainer,
-  isInContainer,
-} from '@element-plus/utils/dom'
-
-import type { CSSProperties, PropType } from 'vue'
-
-const isSupportObjectFit = () =>
-  document.documentElement.style.objectFit !== undefined
-const isHtmlEle = (e: Node) => e && e.nodeType === 1
-
-const ObjectFit = {
-  NONE: 'none',
-  CONTAIN: 'contain',
-  COVER: 'cover',
-  FILL: 'fill',
-  SCALE_DOWN: 'scale-down',
-}
-
-let prevOverflow = ''
-
-export default defineComponent({
-  name: 'ElImage',
-  components: {
-    ImageViewer,
-  },
-  inheritAttrs: false,
-  props: {
-    appendToBody: {
-      type: Boolean,
-      default: false,
-    },
-    hideOnClickModal: {
-      type: Boolean,
-      default: false,
-    },
-    src: {
-      type: String,
-      default: '',
-    },
-    fit: {
-      type: String,
-      default: '',
-    },
-    lazy: {
-      type: Boolean,
-      default: false,
-    },
-    scrollContainer: {
-      type: [String, Object],
-      default: null,
-    },
-    previewSrcList: {
-      type: Array as PropType<string[]>,
-      default: () => [] as string[],
-    },
-    zIndex: {
-      type: Number,
-      default: 2000,
-    },
-    widget: {
-      type: String,
-    },
-  },
-  emits: ['error', 'switch', 'close'],
-  setup(props, { emit }) {
-    const { t } = useLocaleInject()
-    // init here
-    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 | null>(null)
-
-    let _scrollContainer = null
-    let _lazyLoadHandler = null
-
-    const imageStyle = computed(() => {
-      const { fit } = props
-      if (!isServer && fit) {
-        return (
-          isSupportObjectFit() ? { 'object-fit': fit } : getImageStyle(fit)
-        ) as CSSProperties
-      }
-      return {}
-    })
-
-    const alignCenter = computed(() => {
-      const { fit } = props
-      return !isServer && !isSupportObjectFit() && fit !== ObjectFit.FILL
-    })
-
-    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
-    })
-
-    function getImageStyle(fit) {
-      const imageWidth = imgWidth.value
-      const imageHeight = imgHeight.value
-
-      if (!container.value) return {}
-      const { clientWidth: containerWidth, clientHeight: containerHeight } =
-        container.value
-      if (!imageWidth || !imageHeight || !containerWidth || !containerHeight)
-        return {}
-
-      const imageAspectRatio = imageWidth / imageHeight
-      const containerAspectRatio = containerWidth / containerHeight
-
-      if (fit === ObjectFit.SCALE_DOWN) {
-        const isSmaller =
-          imageWidth < containerWidth && imageHeight < containerHeight
-        fit = isSmaller ? ObjectFit.NONE : ObjectFit.CONTAIN
-      }
-
-      switch (fit) {
-        case ObjectFit.NONE:
-          return { width: 'auto', height: 'auto' }
-        case ObjectFit.CONTAIN:
-          return imageAspectRatio < containerAspectRatio
-            ? { width: 'auto' }
-            : { height: 'auto' }
-        case ObjectFit.COVER:
-          return imageAspectRatio < containerAspectRatio
-            ? { height: 'auto' }
-            : { width: 'auto' }
-        default:
-          return {}
-      }
-    }
-
-    const loadImage = () => {
-      if (isServer) return
-
-      const attributes = attrs.value
-
-      // reset status
-      loading.value = true
-      hasLoadError.value = false
-
-      const img = new Image()
-      img.onload = (e) => handleLoad(e, img)
-      img.onerror = handleError
-
-      // bind html attrs
-      // so it can behave consistently
-      Object.keys(attributes).forEach((key) => {
-        // avoid onload to be overwritten
-        if (key.toLowerCase() === 'onload') return
-        const value = attributes[key]
-        img.setAttribute(key, value)
-      })
-      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(e: Event) {
-      loading.value = false
-      hasLoadError.value = true
-      emit('error', e)
-    }
-
-    function handleLazyLoad() {
-      if (isInContainer(container.value, _scrollContainer)) {
-        loadImage()
-        removeLazyLoadListener()
-      }
-    }
-
-    function addLazyLoadListener() {
-      if (isServer) return
-
-      const { scrollContainer } = props
-      if (isHtmlEle(scrollContainer)) {
-        _scrollContainer = scrollContainer
-      } else if (isString(scrollContainer) && scrollContainer !== '') {
-        _scrollContainer = document.querySelector(scrollContainer)
-      } else {
-        _scrollContainer = getScrollContainer(container.value)
-      }
-      if (_scrollContainer) {
-        _lazyLoadHandler = throttle(handleLazyLoad, 200)
-        on(_scrollContainer, 'scroll', _lazyLoadHandler)
-        setTimeout(() => handleLazyLoad(), 100)
-      }
-    }
-
-    function removeLazyLoadListener() {
-      if (isServer || !_scrollContainer || !_lazyLoadHandler) return
-
-      off(_scrollContainer, 'scroll', _lazyLoadHandler)
-      _scrollContainer = null
-      _lazyLoadHandler = null
-    }
-
-    function _wheelHandler(e) {
-      if (e.ctrlKey) {
-        if (e.deltaY < 0) {
-          e.preventDefault()
-          return false
-        }
-        if (e.deltaY > 0) {
-          e.preventDefault()
-          return false
-        }
-      }
-    }
-
-    function clickHandler() {
-      // don't show viewer when preview is false
-      if (!preview.value) {
-        return
-      }
-      document.body.addEventListener('wheel', _wheelHandler, { passive: false })
-      // prevent body scroll
-      prevOverflow = document.body.style.overflow
-      document.body.style.overflow = 'hidden'
-      showViewer.value = true
-    }
-
-    function closeViewer() {
-      document.body.removeEventListener('wheel', _wheelHandler, false)
-      document.body.style.overflow = prevOverflow
-      showViewer.value = false
-      emit('close')
-    }
-
-    function switchViewer(val) {
-      emit('switch', val)
-    }
-
-    watch(
-      () => props.src,
-      () => {
-        if (props.lazy) {
-          // reset status
-          loading.value = true
-          hasLoadError.value = false
-          removeLazyLoadListener()
-          nextTick(addLazyLoadListener)
-        } else {
-          loadImage()
-        }
-      }
-    )
-
-    onMounted(() => {
-      if (props.lazy) {
-        nextTick(addLazyLoadListener)
-      } else {
-        loadImage()
-      }
-    })
-
-    onBeforeUnmount(() => {
-      props.lazy && removeLazyLoadListener()
-    })
-
-    return {
-      attrs,
-      loading,
-      hasLoadError,
-      showViewer,
-      imgWidth,
-      imgHeight,
-      imageStyle,
-      alignCenter,
-      preview,
-      imageIndex,
-      clickHandler,
-      closeViewer,
-      switchViewer,
-      container,
-      handleError,
-      t,
-    }
-  },
-})
-</script>

package/packages/components/space/src/index.ts

@@ -1,143 +0,0 @@
-import {
-  defineComponent,
-  renderSlot,
-  createVNode,
-  createTextVNode,
-  isVNode,
-} from 'vue'
-import {
-  PatchFlags,
-  isFragment,
-  isValidElementNode,
-} from '@element-plus/utils/vnode'
-import { isArray } from '@element-plus/utils/util'
-import Item from './item.vue'
-import { useSpace, defaultProps } from './useSpace'
-
-import type { VNode, ExtractPropTypes, Slots } from 'vue'
-
-export default defineComponent({
-  name: 'ElSpace',
-  props: defaultProps,
-  setup(props) {
-    return useSpace(props)
-  },
-
-  render(
-    ctx: ReturnType<typeof useSpace> &
-      ExtractPropTypes<typeof defaultProps> & { $slots: Slots }
-  ) {
-    const {
-      classes,
-      $slots,
-      containerStyle,
-      itemStyle,
-      spacer,
-      prefixCls,
-      direction,
-    } = ctx
-
-    const children = renderSlot($slots, 'default', { key: 0 }, () => [])
-    // retrieve the children out via a simple for loop
-    // the edge case here is that when users uses directives like <v-for>, <v-if>
-    // we need to go one layer deeper
-
-    if (children.children.length === 0) return null
-
-    // loop the children, if current children is rendered via `renderList` or `<v-for>`
-    if (isArray(children.children)) {
-      let extractedChildren = []
-      children.children.forEach((child: VNode, loopKey) => {
-        if (isFragment(child)) {
-          if (isArray(child.children)) {
-            child.children.forEach((nested, key) => {
-              extractedChildren.push(
-                createVNode(
-                  Item,
-                  {
-                    style: itemStyle,
-                    prefixCls,
-                    key: `nested-${key}`,
-                  },
-                  {
-                    default: () => [nested as VNode],
-                  },
-                  PatchFlags.PROPS | PatchFlags.STYLE,
-                  ['style', 'prefixCls']
-                )
-              )
-            })
-          }
-          // if the current child is valid vnode, then append this current vnode
-          // to item as child node.
-        } else if (isValidElementNode(child)) {
-          extractedChildren.push(
-            createVNode(
-              Item,
-              {
-                style: itemStyle,
-                prefixCls,
-                key: `LoopKey${loopKey}`,
-              },
-              {
-                default: () => [child as VNode],
-              },
-              PatchFlags.PROPS | PatchFlags.STYLE,
-              ['style', 'prefixCls']
-            )
-          )
-        }
-      })
-
-      if (spacer) {
-        // track the current rendering index, when encounters the last element
-        // then no need to add a spacer after it.
-        const len = extractedChildren.length - 1
-        extractedChildren = extractedChildren.reduce((acc, child, idx) => {
-          return idx === len
-            ? [...acc, child]
-            : [
-                ...acc,
-                child,
-                createVNode(
-                  'span',
-                  // adding width 100% for vertical alignment,
-                  // when the spacer inherit the width from the
-                  // parent, this span's width was not set, so space
-                  // might disappear
-                  {
-                    style: [
-                      itemStyle,
-                      direction === 'vertical' ? 'width: 100%' : null,
-                    ],
-                    key: idx,
-                  },
-                  [
-                    // if spacer is already a valid vnode, then append it to the current
-                    // span element.
-                    // otherwise, treat it as string.
-                    isVNode(spacer)
-                      ? spacer
-                      : createTextVNode(spacer as string, PatchFlags.TEXT),
-                  ],
-                  PatchFlags.STYLE
-                ),
-              ]
-        }, [])
-      }
-
-      // spacer container.
-      return createVNode(
-        'div',
-        {
-          class: classes,
-          style: containerStyle,
-        },
-        extractedChildren,
-        PatchFlags.STYLE | PatchFlags.CLASS
-      )
-    }
-
-    return children.children
-  },
-})