nd-autosize-elementui 2.15.14 → 2.15.16

package/packages/image/src/main.vue

@@ -1,249 +0,0 @@
-<template>
-  <div class="el-image">
-    <slot v-if="loading" name="placeholder">
-      <div class="el-image__placeholder"></div>
-    </slot>
-    <slot v-else-if="error" name="error">
-      <div class="el-image__error">{{ t('el.image.error') }}</div>
-    </slot>
-    <img
-      v-else
-      class="el-image__inner"
-      v-bind="$attrs"
-      v-on="$listeners"
-      @click="clickHandler"
-      :src="src"
-      :style="imageStyle"
-      :class="{ 'el-image__inner--center': alignCenter, 'el-image__preview': preview }">
-    <template v-if="preview">
-      <image-viewer :z-index="zIndex" :initial-index="imageIndex" v-if="showViewer" :on-close="closeViewer" :url-list="previewSrcList"/>
-    </template>
-  </div>
-</template>
-
-<script>
-  import ImageViewer from './image-viewer';
-  import Locale from 'element-ui/src/mixins/locale';
-  import { on, off, getScrollContainer, isInContainer } from 'element-ui/src/utils/dom';
-  import { isString, isHtmlElement } from 'element-ui/src/utils/types';
-  import throttle from 'throttle-debounce/throttle';
-
-  const isSupportObjectFit = () => document.documentElement.style.objectFit !== undefined;
-
-  const ObjectFit = {
-    NONE: 'none',
-    CONTAIN: 'contain',
-    COVER: 'cover',
-    FILL: 'fill',
-    SCALE_DOWN: 'scale-down'
-  };
-
-  let prevOverflow = '';
-
-  export default {
-    name: 'ElImage',
-
-    mixins: [Locale],
-    inheritAttrs: false,
-
-    components: {
-      ImageViewer
-    },
-
-    props: {
-      src: String,
-      fit: String,
-      lazy: Boolean,
-      scrollContainer: {},
-      previewSrcList: {
-        type: Array,
-        default: () => []
-      },
-      zIndex: {
-        type: Number,
-        default: 2000
-      },
-      initialIndex: Number
-    },
-
-    data() {
-      return {
-        loading: true,
-        error: false,
-        show: !this.lazy,
-        imageWidth: 0,
-        imageHeight: 0,
-        showViewer: false
-      };
-    },
-
-    computed: {
-      imageStyle() {
-        const { fit } = this;
-        if (!this.$isServer && fit) {
-          return isSupportObjectFit()
-            ? { 'object-fit': fit }
-            : this.getImageStyle(fit);
-        }
-        return {};
-      },
-      alignCenter() {
-        return !this.$isServer && !isSupportObjectFit() && this.fit !== ObjectFit.FILL;
-      },
-      preview() {
-        const { previewSrcList } = this;
-        return Array.isArray(previewSrcList) && previewSrcList.length > 0;
-      },
-      imageIndex() {
-        let previewIndex = 0;
-        const initialIndex = this.initialIndex;
-        if (initialIndex >= 0) {
-          previewIndex = initialIndex;
-          return previewIndex;
-        }
-        const srcIndex = this.previewSrcList.indexOf(this.src);
-        if (srcIndex >= 0) {
-          previewIndex = srcIndex;
-          return previewIndex;
-        }
-        return previewIndex;
-      }
-    },
-
-    watch: {
-      src(val) {
-        this.show && this.loadImage();
-      },
-      show(val) {
-        val && this.loadImage();
-      }
-    },
-
-    mounted() {
-      if (this.lazy) {
-        this.addLazyLoadListener();
-      } else {
-        this.loadImage();
-      }
-    },
-
-    beforeDestroy() {
-      this.lazy && this.removeLazyLoadListener();
-    },
-
-    methods: {
-      loadImage() {
-        if (this.$isServer) return;
-
-        // reset status
-        this.loading = true;
-        this.error = false;
-
-        const img = new Image();
-        img.onload = e => this.handleLoad(e, img);
-        img.onerror = this.handleError.bind(this);
-
-        // bind html attrs
-        // so it can behave consistently
-        Object.keys(this.$attrs)
-          .forEach((key) => {
-            const value = this.$attrs[key];
-            img.setAttribute(key, value);
-          });
-        img.src = this.src;
-      },
-      handleLoad(e, img) {
-        this.imageWidth = img.width;
-        this.imageHeight = img.height;
-        this.loading = false;
-        this.error = false;
-      },
-      handleError(e) {
-        this.loading = false;
-        this.error = true;
-        this.$emit('error', e);
-      },
-      handleLazyLoad() {
-        if (isInContainer(this.$el, this._scrollContainer)) {
-          this.show = true;
-          this.removeLazyLoadListener();
-        }
-      },
-      addLazyLoadListener() {
-        if (this.$isServer) return;
-
-        const { scrollContainer } = this;
-        let _scrollContainer = null;
-
-        if (isHtmlElement(scrollContainer)) {
-          _scrollContainer = scrollContainer;
-        } else if (isString(scrollContainer)) {
-          _scrollContainer = document.querySelector(scrollContainer);
-        } else {
-          _scrollContainer = getScrollContainer(this.$el);
-        }
-
-        if (_scrollContainer) {
-          this._scrollContainer = _scrollContainer;
-          this._lazyLoadHandler = throttle(200, this.handleLazyLoad);
-          on(_scrollContainer, 'scroll', this._lazyLoadHandler);
-          this.handleLazyLoad();
-        }
-      },
-      removeLazyLoadListener() {
-        const { _scrollContainer, _lazyLoadHandler } = this;
-
-        if (this.$isServer || !_scrollContainer || !_lazyLoadHandler) return;
-
-        off(_scrollContainer, 'scroll', _lazyLoadHandler);
-        this._scrollContainer = null;
-        this._lazyLoadHandler = null;
-      },
-      /**
-       * simulate object-fit behavior to compatible with IE11 and other browsers which not support object-fit
-       */
-      getImageStyle(fit) {
-        const { imageWidth, imageHeight } = this;
-        const {
-          clientWidth: containerWidth,
-          clientHeight: containerHeight
-        } = this.$el;
-
-        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 {};
-        }
-      },
-      clickHandler() {
-        // don't show viewer when preview is false
-        if (!this.preview) {
-          return;
-        }
-        // prevent body scroll
-        prevOverflow = document.body.style.overflow;
-        document.body.style.overflow = 'hidden';
-        this.showViewer = true;
-      },
-      closeViewer() {
-        document.body.style.overflow = prevOverflow;
-        this.showViewer = false;
-      }
-    }
-  };
-</script>

package/packages/infinite-scroll/index.js

@@ -1,8 +0,0 @@
-import InfiniteScroll from './src/main.js';
-
-/* istanbul ignore next */
-InfiniteScroll.install = function(Vue) {
-  Vue.directive(InfiniteScroll.name, InfiniteScroll);
-};
-
-export default InfiniteScroll;

package/packages/infinite-scroll/src/main.js

@@ -1,150 +0,0 @@
-import throttle from 'throttle-debounce/debounce';
-import {
-  isHtmlElement,
-  isFunction,
-  isUndefined,
-  isDefined
-} from 'element-ui/src/utils/types';
-import {
-  getScrollContainer
-} from 'element-ui/src/utils/dom';
-
-const getStyleComputedProperty = (element, property) => {
-  if (element === window) {
-    element = document.documentElement;
-  }
-
-  if (element.nodeType !== 1) {
-    return [];
-  }
-  // NOTE: 1 DOM access here
-  const css = window.getComputedStyle(element, null);
-  return property ? css[property] : css;
-};
-
-const entries = (obj) => {
-  return Object.keys(obj || {})
-    .map(key => ([key, obj[key]]));
-};
-
-const getPositionSize = (el, prop) => {
-  return el === window || el === document
-    ? document.documentElement[prop]
-    : el[prop];
-};
-
-const getOffsetHeight = el => {
-  return getPositionSize(el, 'offsetHeight');
-};
-
-const getClientHeight = el => {
-  return getPositionSize(el, 'clientHeight');
-};
-
-const scope = 'ElInfiniteScroll';
-const attributes = {
-  delay: {
-    type: Number,
-    default: 200
-  },
-  distance: {
-    type: Number,
-    default: 0
-  },
-  disabled: {
-    type: Boolean,
-    default: false
-  },
-  immediate: {
-    type: Boolean,
-    default: true
-  }
-};
-
-const getScrollOptions = (el, vm) => {
-  if (!isHtmlElement(el)) return {};
-
-  return entries(attributes).reduce((map, [key, option]) => {
-    const { type, default: defaultValue } = option;
-    let value = el.getAttribute(`infinite-scroll-${key}`);
-    value = isUndefined(vm[value]) ? value : vm[value];
-    switch (type) {
-      case Number:
-        value = Number(value);
-        value = Number.isNaN(value) ? defaultValue : value;
-        break;
-      case Boolean:
-        value = isDefined(value) ? value === 'false' ? false : Boolean(value) : defaultValue;
-        break;
-      default:
-        value = type(value);
-    }
-    map[key] = value;
-    return map;
-  }, {});
-};
-
-const getElementTop = el => el.getBoundingClientRect().top;
-
-const handleScroll = function(cb) {
-  const { el, vm, container, observer } = this[scope];
-  const { distance, disabled } = getScrollOptions(el, vm);
-
-  if (disabled) return;
-
-  const containerInfo = container.getBoundingClientRect();
-  if (!containerInfo.width && !containerInfo.height) return;
-
-  let shouldTrigger = false;
-
-  if (container === el) {
-    // be aware of difference between clientHeight & offsetHeight & window.getComputedStyle().height
-    const scrollBottom = container.scrollTop + getClientHeight(container);
-    shouldTrigger = container.scrollHeight - scrollBottom <= distance;
-  } else {
-    const heightBelowTop = getOffsetHeight(el) + getElementTop(el) - getElementTop(container);
-    const offsetHeight = getOffsetHeight(container);
-    const borderBottom = Number.parseFloat(getStyleComputedProperty(container, 'borderBottomWidth'));
-    shouldTrigger = heightBelowTop - offsetHeight + borderBottom <= distance;
-  }
-
-  if (shouldTrigger && isFunction(cb)) {
-    cb.call(vm);
-  } else if (observer) {
-    observer.disconnect();
-    this[scope].observer = null;
-  }
-
-};
-
-export default {
-  name: 'InfiniteScroll',
-  inserted(el, binding, vnode) {
-    const cb = binding.value;
-
-    const vm = vnode.context;
-    // only include vertical scroll
-    const container = getScrollContainer(el, true);
-    const { delay, immediate } = getScrollOptions(el, vm);
-    const onScroll = throttle(delay, handleScroll.bind(el, cb));
-
-    el[scope] = { el, vm, container, onScroll };
-
-    if (container) {
-      container.addEventListener('scroll', onScroll);
-
-      if (immediate) {
-        const observer = el[scope].observer = new MutationObserver(onScroll);
-        observer.observe(container, { childList: true, subtree: true });
-        onScroll();
-      }
-    }
-  },
-  unbind(el) {
-    const { container, onScroll } = el[scope];
-    if (container) {
-      container.removeEventListener('scroll', onScroll);
-    }
-  }
-};
-

package/packages/input/index.js

@@ -1,8 +0,0 @@
-import ElInput from './src/input';
-
-/* istanbul ignore next */
-ElInput.install = function(Vue) {
-  Vue.component(ElInput.name, ElInput);
-};
-
-export default ElInput;

package/packages/input/src/calcTextareaHeight.js

@@ -1,104 +0,0 @@
-let hiddenTextarea;
-
-const HIDDEN_STYLE = `
-  height:0 !important;
-  visibility:hidden !important;
-  overflow:hidden !important;
-  position:absolute !important;
-  z-index:-1000 !important;
-  top:0 !important;
-  right:0 !important
-`;
-
-const CONTEXT_STYLE = [
-  'letter-spacing',
-  'line-height',
-  'padding-top',
-  'padding-bottom',
-  'font-family',
-  'font-weight',
-  'font-size',
-  'text-rendering',
-  'text-transform',
-  'width',
-  'text-indent',
-  'padding-left',
-  'padding-right',
-  'border-width',
-  'box-sizing'
-];
-
-function calculateNodeStyling(targetElement) {
-  const style = window.getComputedStyle(targetElement);
-
-  const boxSizing = style.getPropertyValue('box-sizing');
-
-  const paddingSize = (
-    parseFloat(style.getPropertyValue('padding-bottom')) +
-    parseFloat(style.getPropertyValue('padding-top'))
-  );
-
-  const borderSize = (
-    parseFloat(style.getPropertyValue('border-bottom-width')) +
-    parseFloat(style.getPropertyValue('border-top-width'))
-  );
-
-  const contextStyle = CONTEXT_STYLE
-    .map(name => `${name}:${style.getPropertyValue(name)}`)
-    .join(';');
-
-  return { contextStyle, paddingSize, borderSize, boxSizing };
-}
-
-export default function calcTextareaHeight(
-  targetElement,
-  minRows = 1,
-  maxRows = null
-) {
-  if (!hiddenTextarea) {
-    hiddenTextarea = document.createElement('textarea');
-    document.body.appendChild(hiddenTextarea);
-  }
-
-  let {
-    paddingSize,
-    borderSize,
-    boxSizing,
-    contextStyle
-  } = calculateNodeStyling(targetElement);
-
-  hiddenTextarea.setAttribute('style', `${contextStyle};${HIDDEN_STYLE}`);
-  hiddenTextarea.value = targetElement.value || targetElement.placeholder || '';
-
-  let height = hiddenTextarea.scrollHeight;
-  const result = {};
-
-  if (boxSizing === 'border-box') {
-    height = height + borderSize;
-  } else if (boxSizing === 'content-box') {
-    height = height - paddingSize;
-  }
-
-  hiddenTextarea.value = '';
-  let singleRowHeight = hiddenTextarea.scrollHeight - paddingSize;
-
-  if (minRows !== null) {
-    let minHeight = singleRowHeight * minRows;
-    if (boxSizing === 'border-box') {
-      minHeight = minHeight + paddingSize + borderSize;
-    }
-    height = Math.max(minHeight, height);
-    result.minHeight = `${ minHeight }px`;
-  }
-  if (maxRows !== null) {
-    let maxHeight = singleRowHeight * maxRows;
-    if (boxSizing === 'border-box') {
-      maxHeight = maxHeight + paddingSize + borderSize;
-    }
-    height = Math.min(maxHeight, height);
-  }
-  result.height = `${ height }px`;
-  hiddenTextarea.parentNode && hiddenTextarea.parentNode.removeChild(hiddenTextarea);
-  hiddenTextarea = null;
-  return result;
-};