nd-autosize-elementui 2.15.14 → 2.15.16

package/packages/form/src/form.vue

@@ -1,182 +0,0 @@
-<template>
-  <form class="el-form" :class="[
-    labelPosition ? 'el-form--label-' + labelPosition : '',
-    { 'el-form--inline': inline }
-  ]">
-    <slot></slot>
-  </form>
-</template>
-<script>
-  import objectAssign from 'element-ui/src/utils/merge';
-
-  export default {
-    name: 'ElForm',
-
-    componentName: 'ElForm',
-
-    provide() {
-      return {
-        elForm: this
-      };
-    },
-
-    props: {
-      model: Object,
-      rules: Object,
-      labelPosition: String,
-      labelWidth: String,
-      labelSuffix: {
-        type: String,
-        default: ''
-      },
-      inline: Boolean,
-      inlineMessage: Boolean,
-      statusIcon: Boolean,
-      showMessage: {
-        type: Boolean,
-        default: true
-      },
-      size: String,
-      disabled: Boolean,
-      validateOnRuleChange: {
-        type: Boolean,
-        default: true
-      },
-      hideRequiredAsterisk: {
-        type: Boolean,
-        default: false
-      }
-    },
-    watch: {
-      rules() {
-        // remove then add event listeners on form-item after form rules change
-        this.fields.forEach(field => {
-          field.removeValidateEvents();
-          field.addValidateEvents();
-        });
-
-        if (this.validateOnRuleChange) {
-          this.validate(() => {});
-        }
-      }
-    },
-    computed: {
-      autoLabelWidth() {
-        if (!this.potentialLabelWidthArr.length) return 0;
-        const max = Math.max(...this.potentialLabelWidthArr);
-        return max ? `${max}px` : '';
-      }
-    },
-    data() {
-      return {
-        fields: [],
-        potentialLabelWidthArr: [] // use this array to calculate auto width
-      };
-    },
-    created() {
-      this.$on('el.form.addField', (field) => {
-        if (field) {
-          this.fields.push(field);
-        }
-      });
-      /* istanbul ignore next */
-      this.$on('el.form.removeField', (field) => {
-        if (field.prop) {
-          this.fields.splice(this.fields.indexOf(field), 1);
-        }
-      });
-    },
-    methods: {
-      resetFields() {
-        if (!this.model) {
-          console.warn('[Element Warn][Form]model is required for resetFields to work.');
-          return;
-        }
-        this.fields.forEach(field => {
-          field.resetField();
-        });
-      },
-      clearValidate(props = []) {
-        const fields = props.length
-          ? (typeof props === 'string'
-            ? this.fields.filter(field => props === field.prop)
-            : this.fields.filter(field => props.indexOf(field.prop) > -1)
-          ) : this.fields;
-        fields.forEach(field => {
-          field.clearValidate();
-        });
-      },
-      validate(callback) {
-        if (!this.model) {
-          console.warn('[Element Warn][Form]model is required for validate to work!');
-          return;
-        }
-
-        let promise;
-        // if no callback, return promise
-        if (typeof callback !== 'function' && window.Promise) {
-          promise = new window.Promise((resolve, reject) => {
-            callback = function(valid, invalidFields) {
-              valid ? resolve(valid) : reject(invalidFields);
-            };
-          });
-        }
-
-        let valid = true;
-        let count = 0;
-        // 如果需要验证的fields为空，调用验证时立刻返回callback
-        if (this.fields.length === 0 && callback) {
-          callback(true);
-        }
-        let invalidFields = {};
-        this.fields.forEach(field => {
-          field.validate('', (message, field) => {
-            if (message) {
-              valid = false;
-            }
-            invalidFields = objectAssign({}, invalidFields, field);
-            if (typeof callback === 'function' && ++count === this.fields.length) {
-              callback(valid, invalidFields);
-            }
-          });
-        });
-
-        if (promise) {
-          return promise;
-        }
-      },
-      validateField(props, cb) {
-        props = [].concat(props);
-        const fields = this.fields.filter(field => props.indexOf(field.prop) !== -1);
-        if (!fields.length) {
-          console.warn('[Element Warn]please pass correct props!');
-          return;
-        }
-
-        fields.forEach(field => {
-          field.validate('', cb);
-        });
-      },
-      getLabelWidthIndex(width) {
-        const index = this.potentialLabelWidthArr.indexOf(width);
-        // it's impossible
-        if (index === -1) {
-          throw new Error('[ElementForm]unpected width ', width);
-        }
-        return index;
-      },
-      registerLabelWidth(val, oldVal) {
-        if (val && oldVal) {
-          const index = this.getLabelWidthIndex(oldVal);
-          this.potentialLabelWidthArr.splice(index, 1, val);
-        } else if (val) {
-          this.potentialLabelWidthArr.push(val);
-        }
-      },
-      deregisterLabelWidth(val) {
-        const index = this.getLabelWidthIndex(val);
-        this.potentialLabelWidthArr.splice(index, 1);
-      }
-    }
-  };
-</script>

package/packages/form/src/label-wrap.vue

@@ -1,78 +0,0 @@
-<script>
-
-export default {
-  props: {
-    isAutoWidth: Boolean,
-    updateAll: Boolean
-  },
-
-  inject: ['elForm', 'elFormItem'],
-
-  render() {
-    const slots = this.$slots.default;
-    if (!slots) return null;
-    if (this.isAutoWidth) {
-      const autoLabelWidth = this.elForm.autoLabelWidth;
-      const style = {};
-      if (autoLabelWidth && autoLabelWidth !== 'auto') {
-        const marginLeft = parseInt(autoLabelWidth, 10) - this.computedWidth;
-        if (marginLeft) {
-          style.marginLeft = marginLeft + 'px';
-        }
-      }
-      return (<div class="el-form-item__label-wrap" style={style}>
-        { slots }
-      </div>);
-    } else {
-      return slots[0];
-    }
-  },
-
-  methods: {
-    getLabelWidth() {
-      if (this.$el && this.$el.firstElementChild) {
-        const computedWidth = window.getComputedStyle(this.$el.firstElementChild).width;
-        return Math.ceil(parseFloat(computedWidth));
-      } else {
-        return 0;
-      }
-    },
-    updateLabelWidth(action = 'update') {
-      if (this.$slots.default && this.isAutoWidth && this.$el.firstElementChild) {
-        if (action === 'update') {
-          this.computedWidth = this.getLabelWidth();
-        } else if (action === 'remove') {
-          this.elForm.deregisterLabelWidth(this.computedWidth);
-        }
-      }
-    }
-  },
-
-  watch: {
-    computedWidth(val, oldVal) {
-      if (this.updateAll) {
-        this.elForm.registerLabelWidth(val, oldVal);
-        this.elFormItem.updateComputedLabelWidth(val);
-      }
-    }
-  },
-
-  data() {
-    return {
-      computedWidth: 0
-    };
-  },
-
-  mounted() {
-    this.updateLabelWidth('update');
-  },
-
-  updated() {
-    this.updateLabelWidth('update');
-  },
-
-  beforeDestroy() {
-    this.updateLabelWidth('remove');
-  }
-};
-</script>

package/packages/form-item/index.js

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

package/packages/header/index.js

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

package/packages/header/src/main.vue

@@ -1,20 +0,0 @@
-<template>
-  <header class="el-header" :style="{ height }">
-    <slot></slot>
-  </header>
-</template>
-
-<script>
-  export default {
-    name: 'ElHeader',
-
-    componentName: 'ElHeader',
-
-    props: {
-      height: {
-        type: String,
-        default: '60px'
-      }
-    }
-  };
-</script>

package/packages/icon/index.js

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

package/packages/icon/src/icon.vue

@@ -1,13 +0,0 @@
-<template>
-  <i :class="'el-icon-' + name"></i>
-</template>
-
-<script>
-  export default {
-    name: 'ElIcon',
-
-    props: {
-      name: String
-    }
-  };
-</script>

package/packages/image/index.js

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

package/packages/image/src/image-viewer.vue

@@ -1,330 +0,0 @@
-<template>
-  <transition name="viewer-fade">
-    <div tabindex="-1" ref="el-image-viewer__wrapper" class="el-image-viewer__wrapper" :style="{ 'z-index': viewerZIndex }">
-      <div class="el-image-viewer__mask" @click.self="handleMaskClick"></div>
-      <!-- CLOSE -->
-      <span class="el-image-viewer__btn el-image-viewer__close" @click="hide">
-        <i class="el-icon-close"></i>
-      </span>
-      <!-- ARROW -->
-      <template v-if="!isSingle">
-        <span
-          class="el-image-viewer__btn el-image-viewer__prev"
-          :class="{ 'is-disabled': !infinite && isFirst }"
-          @click="prev">
-          <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"/>
-        </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-refresh-left" @click="handleActions('anticlocelise')"></i>
-          <i class="el-icon-refresh-right" @click="handleActions('clocelise')"></i>
-        </div>
-      </div>
-      <!-- CANVAS -->
-      <div class="el-image-viewer__canvas">
-        <img
-          v-for="(url, i) in urlList"
-          v-if="i === index"
-          ref="img"
-          class="el-image-viewer__img"
-          :key="url"
-          :src="currentImg"
-          :style="imgStyle"
-          @load="handleImgLoad"
-          @error="handleImgError"
-          @mousedown="handleMouseDown">
-      </div>
-    </div>
-  </transition>
-</template>
-
-<script>
-import { on, off } from 'element-ui/src/utils/dom';
-import { rafThrottle, isFirefox } from 'element-ui/src/utils/util';
-import { PopupManager } from 'element-ui/src/utils/popup';
-
-const Mode = {
-  CONTAIN: {
-    name: 'contain',
-    icon: 'el-icon-full-screen'
-  },
-  ORIGINAL: {
-    name: 'original',
-    icon: 'el-icon-c-scale-to-original'
-  }
-};
-
-const mousewheelEventName = isFirefox() ? 'DOMMouseScroll' : 'mousewheel';
-
-export default {
-  name: 'elImageViewer',
-
-  props: {
-    urlList: {
-      type: Array,
-      default: () => []
-    },
-    zIndex: {
-      type: Number,
-      default: 2000
-    },
-    onSwitch: {
-      type: Function,
-      default: () => {}
-    },
-    onClose: {
-      type: Function,
-      default: () => {}
-    },
-    initialIndex: {
-      type: Number,
-      default: 0
-    },
-    appendToBody: {
-      type: Boolean,
-      default: true
-    },
-    maskClosable: {
-      type: Boolean,
-      default: true
-    }
-  },
-
-  data() {
-    return {
-      index: this.initialIndex,
-      isShow: false,
-      infinite: true,
-      loading: false,
-      mode: Mode.CONTAIN,
-      transform: {
-        scale: 1,
-        deg: 0,
-        offsetX: 0,
-        offsetY: 0,
-        enableTransition: false
-      }
-    };
-  },
-  computed: {
-    isSingle() {
-      return this.urlList.length <= 1;
-    },
-    isFirst() {
-      return this.index === 0;
-    },
-    isLast() {
-      return this.index === this.urlList.length - 1;
-    },
-    currentImg() {
-      return this.urlList[this.index];
-    },
-    imgStyle() {
-      const { scale, deg, offsetX, offsetY, enableTransition } = this.transform;
-      const style = {
-        transform: `scale(${scale}) rotate(${deg}deg)`,
-        transition: enableTransition ? 'transform .3s' : '',
-        'margin-left': `${offsetX}px`,
-        'margin-top': `${offsetY}px`
-      };
-      if (this.mode === Mode.CONTAIN) {
-        style.maxWidth = style.maxHeight = '100%';
-      }
-      return style;
-    },
-    viewerZIndex() {
-      const nextZIndex = PopupManager.nextZIndex();
-      return this.zIndex > nextZIndex ? this.zIndex : nextZIndex;
-    }
-  },
-  watch: {
-    index: {
-      handler: function(val) {
-        this.reset();
-        this.onSwitch(val);
-      }
-    },
-    currentImg(val) {
-      this.$nextTick(_ => {
-        const $img = this.$refs.img[0];
-        if (!$img.complete) {
-          this.loading = true;
-        }
-      });
-    }
-  },
-  methods: {
-    hide() {
-      this.deviceSupportUninstall();
-      this.onClose();
-    },
-    deviceSupportInstall() {
-      this._keyDownHandler = e => {
-        e.stopPropagation();
-        const keyCode = e.keyCode;
-        switch (keyCode) {
-          // ESC
-          case 27:
-            this.hide();
-            break;
-          // SPACE
-          case 32:
-            this.toggleMode();
-            break;
-          // LEFT_ARROW
-          case 37:
-            this.prev();
-            break;
-          // UP_ARROW
-          case 38:
-            this.handleActions('zoomIn');
-            break;
-          // RIGHT_ARROW
-          case 39:
-            this.next();
-            break;
-          // DOWN_ARROW
-          case 40:
-            this.handleActions('zoomOut');
-            break;
-        }
-      };
-      this._mouseWheelHandler = rafThrottle(e => {
-        const delta = e.wheelDelta ? e.wheelDelta : -e.detail;
-        if (delta > 0) {
-          this.handleActions('zoomIn', {
-            zoomRate: 0.015,
-            enableTransition: false
-          });
-        } else {
-          this.handleActions('zoomOut', {
-            zoomRate: 0.015,
-            enableTransition: false
-          });
-        }
-      });
-      on(document, 'keydown', this._keyDownHandler);
-      on(document, mousewheelEventName, this._mouseWheelHandler);
-    },
-    deviceSupportUninstall() {
-      off(document, 'keydown', this._keyDownHandler);
-      off(document, mousewheelEventName, this._mouseWheelHandler);
-      this._keyDownHandler = null;
-      this._mouseWheelHandler = null;
-    },
-    handleImgLoad(e) {
-      this.loading = false;
-    },
-    handleImgError(e) {
-      this.loading = false;
-      e.target.alt = '加载失败';
-    },
-    handleMouseDown(e) {
-      if (this.loading || e.button !== 0) return;
-
-      const { offsetX, offsetY } = this.transform;
-      const startX = e.pageX;
-      const startY = e.pageY;
-      this._dragHandler = rafThrottle(ev => {
-        this.transform.offsetX = offsetX + ev.pageX - startX;
-        this.transform.offsetY = offsetY + ev.pageY - startY;
-      });
-      on(document, 'mousemove', this._dragHandler);
-      on(document, 'mouseup', ev => {
-        off(document, 'mousemove', this._dragHandler);
-      });
-
-      e.preventDefault();
-    },
-    handleMaskClick() {
-      if (this.maskClosable) {
-        this.hide();
-      }
-    },
-    reset() {
-      this.transform = {
-        scale: 1,
-        deg: 0,
-        offsetX: 0,
-        offsetY: 0,
-        enableTransition: false
-      };
-    },
-    toggleMode() {
-      if (this.loading) return;
-
-      const modeNames = Object.keys(Mode);
-      const modeValues = Object.values(Mode);
-      const index = modeValues.indexOf(this.mode);
-      const nextIndex = (index + 1) % modeNames.length;
-      this.mode = Mode[modeNames[nextIndex]];
-      this.reset();
-    },
-    prev() {
-      if (this.isFirst && !this.infinite) return;
-      const len = this.urlList.length;
-      this.index = (this.index - 1 + len) % len;
-    },
-    next() {
-      if (this.isLast && !this.infinite) return;
-      const len = this.urlList.length;
-      this.index = (this.index + 1) % len;
-    },
-    handleActions(action, options = {}) {
-      if (this.loading) return;
-      const { zoomRate, rotateDeg, enableTransition } = {
-        zoomRate: 0.2,
-        rotateDeg: 90,
-        enableTransition: true,
-        ...options
-      };
-      const { transform } = this;
-      switch (action) {
-        case 'zoomOut':
-          if (transform.scale > 0.2) {
-            transform.scale = parseFloat((transform.scale - zoomRate).toFixed(3));
-          }
-          break;
-        case 'zoomIn':
-          transform.scale = parseFloat((transform.scale + zoomRate).toFixed(3));
-          break;
-        case 'clocelise':
-          transform.deg += rotateDeg;
-          break;
-        case 'anticlocelise':
-          transform.deg -= rotateDeg;
-          break;
-      }
-      transform.enableTransition = enableTransition;
-    }
-  },
-  mounted() {
-    this.deviceSupportInstall();
-    if (this.appendToBody) {
-      document.body.appendChild(this.$el);
-    }
-    // add tabindex then wrapper can be focusable via Javascript
-    // focus wrapper so arrow key can't cause inner scroll behavior underneath
-    this.$refs['el-image-viewer__wrapper'].focus();
-  },
-  destroyed() {
-    // if appendToBody is true, remove DOM node after destroy
-    if (this.appendToBody && this.$el && this.$el.parentNode) {
-      this.$el.parentNode.removeChild(this.$el);
-    }
-  }
-};
-</script>