@evolvere/sgp-ui 1.6.4

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

@@ -0,0 +1,150 @@
+import throttle from 'throttle-debounce/debounce';
+import {
+  isHtmlElement,
+  isFunction,
+  isUndefined,
+  isDefined
+} from '@rdc/sgp-ui/src/utils/types';
+import {
+  getScrollContainer
+} from '@rdc/sgp-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

@@ -0,0 +1,8 @@
+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

@@ -0,0 +1,104 @@
+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;
+};

package/packages/input/src/input.vue

@@ -0,0 +1,437 @@
+<template>
+  <div :class="[
+    type === 'textarea' ? 'el-textarea' : 'el-input',
+    inputSize ? 'el-input--' + inputSize : '',
+    {
+      'is-disabled': inputDisabled,
+      'is-exceed': inputExceed,
+      'el-input-group': $slots.prepend || $slots.append,
+      'el-input-group--append': $slots.append,
+      'el-input-group--prepend': $slots.prepend,
+      'el-input--prefix': $slots.prefix || prefixIcon,
+      'el-input--suffix': $slots.suffix || suffixIcon || clearable || showPassword
+    }
+    ]"
+    @mouseenter="hovering = true"
+    @mouseleave="hovering = false"
+  >
+    <template v-if="type !== 'textarea'">
+      <!-- 前置元素 -->
+      <div class="el-input-group__prepend" v-if="$slots.prepend">
+        <slot name="prepend"></slot>
+      </div>
+      <input
+        :tabindex="tabindex"
+        v-if="type !== 'textarea'"
+        class="el-input__inner"
+        v-bind="$attrs"
+        :type="showPassword ? (passwordVisible ? 'text': 'password') : type"
+        :disabled="inputDisabled"
+        :readonly="readonly"
+        :autocomplete="autoComplete || autocomplete"
+        ref="input"
+        @compositionstart="handleCompositionStart"
+        @compositionupdate="handleCompositionUpdate"
+        @compositionend="handleCompositionEnd"
+        @input="handleInput"
+        @focus="handleFocus"
+        @blur="handleBlur"
+        @change="handleChange"
+        :aria-label="label"
+      >
+      <!-- 前置内容 -->
+      <span class="el-input__prefix" v-if="$slots.prefix || prefixIcon">
+        <slot name="prefix"></slot>
+        <i class="el-input__icon"
+           v-if="prefixIcon"
+           :class="prefixIcon">
+        </i>
+      </span>
+      <!-- 后置内容 -->
+      <span
+        class="el-input__suffix"
+        v-if="getSuffixVisible()">
+        <span class="el-input__suffix-inner">
+          <template v-if="!showClear || !showPwdVisible || !isWordLimitVisible">
+            <slot name="suffix"></slot>
+            <i class="el-input__icon"
+              v-if="suffixIcon"
+              :class="suffixIcon">
+            </i>
+          </template>
+          <i v-if="showClear"
+            class="el-input__icon el-icon-circle-close el-input__clear"
+            @mousedown.prevent
+            @click="clear"
+          ></i>
+          <i v-if="showPwdVisible"
+            class="el-input__icon el-icon-view el-input__clear"
+            @click="handlePasswordVisible"
+          ></i>
+          <span v-if="isWordLimitVisible" class="el-input__count">
+            <span class="el-input__count-inner">
+              {{ textLength }}/{{ upperLimit }}
+            </span>
+          </span>
+        </span>
+        <i class="el-input__icon"
+          v-if="validateState"
+          :class="['el-input__validateIcon', validateIcon]">
+        </i>
+      </span>
+      <!-- 后置元素 -->
+      <div class="el-input-group__append" v-if="$slots.append">
+        <slot name="append"></slot>
+      </div>
+    </template>
+    <textarea
+      v-else
+      :tabindex="tabindex"
+      class="el-textarea__inner"
+      @compositionstart="handleCompositionStart"
+      @compositionupdate="handleCompositionUpdate"
+      @compositionend="handleCompositionEnd"
+      @input="handleInput"
+      ref="textarea"
+      v-bind="$attrs"
+      :disabled="inputDisabled"
+      :readonly="readonly"
+      :autocomplete="autoComplete || autocomplete"
+      :style="textareaStyle"
+      @focus="handleFocus"
+      @blur="handleBlur"
+      @change="handleChange"
+      :aria-label="label"
+    >
+    </textarea>
+    <span v-if="isWordLimitVisible && type === 'textarea'" class="el-input__count">{{ textLength }}/{{ upperLimit }}</span>
+  </div>
+</template>
+<script>
+  import emitter from '@rdc/sgp-ui/src/mixins/emitter';
+  import Migrating from '@rdc/sgp-ui/src/mixins/migrating';
+  import calcTextareaHeight from './calcTextareaHeight';
+  import merge from '@rdc/sgp-ui/src/utils/merge';
+  import {isKorean} from '@rdc/sgp-ui/src/utils/shared';
+
+  export default {
+    name: 'ElInput',
+
+    componentName: 'ElInput',
+
+    mixins: [emitter, Migrating],
+
+    inheritAttrs: false,
+
+    inject: {
+      elForm: {
+        default: ''
+      },
+      elFormItem: {
+        default: ''
+      }
+    },
+
+    data() {
+      return {
+        textareaCalcStyle: {},
+        hovering: false,
+        focused: false,
+        isComposing: false,
+        passwordVisible: false
+      };
+    },
+
+    props: {
+      value: [String, Number],
+      size: String,
+      resize: String,
+      form: String,
+      disabled: Boolean,
+      readonly: Boolean,
+      type: {
+        type: String,
+        default: 'text'
+      },
+      autosize: {
+        type: [Boolean, Object],
+        default: false
+      },
+      autocomplete: {
+        type: String,
+        default: 'off'
+      },
+      /** @Deprecated in next major version */
+      autoComplete: {
+        type: String,
+        validator(val) {
+          process.env.NODE_ENV !== 'production' &&
+            console.warn('[Element Warn][Input]\'auto-complete\' property will be deprecated in next major version. please use \'autocomplete\' instead.');
+          return true;
+        }
+      },
+      validateEvent: {
+        type: Boolean,
+        default: true
+      },
+      suffixIcon: String,
+      prefixIcon: String,
+      label: String,
+      clearable: {
+        type: Boolean,
+        default: false
+      },
+      showPassword: {
+        type: Boolean,
+        default: false
+      },
+      showWordLimit: {
+        type: Boolean,
+        default: false
+      },
+      tabindex: String
+    },
+
+    computed: {
+      _elFormItemSize() {
+        return (this.elFormItem || {}).elFormItemSize;
+      },
+      validateState() {
+        return this.elFormItem ? this.elFormItem.validateState : '';
+      },
+      needStatusIcon() {
+        return this.elForm ? this.elForm.statusIcon : false;
+      },
+      validateIcon() {
+        return {
+          validating: 'el-icon-loading',
+          success: 'el-icon-circle-check',
+          error: 'el-icon-circle-close'
+        }[this.validateState];
+      },
+      textareaStyle() {
+        return merge({}, this.textareaCalcStyle, { resize: this.resize });
+      },
+      inputSize() {
+        return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;
+      },
+      inputDisabled() {
+        return this.disabled || (this.elForm || {}).disabled;
+      },
+      nativeInputValue() {
+        return this.value === null || this.value === undefined ? '' : String(this.value);
+      },
+      showClear() {
+        return this.clearable &&
+          !this.inputDisabled &&
+          !this.readonly &&
+          this.nativeInputValue &&
+          (this.focused || this.hovering);
+      },
+      showPwdVisible() {
+        return this.showPassword &&
+          !this.inputDisabled &&
+          !this.readonly &&
+          (!!this.nativeInputValue || this.focused);
+      },
+      isWordLimitVisible() {
+        return this.showWordLimit &&
+          this.$attrs.maxlength &&
+          (this.type === 'text' || this.type === 'textarea') &&
+          !this.inputDisabled &&
+          !this.readonly &&
+          !this.showPassword;
+      },
+      upperLimit() {
+        return this.$attrs.maxlength;
+      },
+      textLength() {
+        if (typeof this.value === 'number') {
+          return String(this.value).length;
+        }
+
+        return (this.value || '').length;
+      },
+      inputExceed() {
+        // show exceed style if length of initial value greater then maxlength
+        return this.isWordLimitVisible &&
+          (this.textLength > this.upperLimit);
+      }
+    },
+
+    watch: {
+      value(val) {
+        this.$nextTick(this.resizeTextarea);
+        if (this.validateEvent) {
+          this.dispatch('ElFormItem', 'el.form.change', [val]);
+        }
+      },
+      // native input value is set explicitly
+      // do not use v-model / :value in template
+      // see: https://github.com/ElemeFE/element/issues/14521
+      nativeInputValue() {
+        this.setNativeInputValue();
+      },
+      // when change between <input> and <textarea>,
+      // update DOM dependent value and styles
+      // https://github.com/ElemeFE/element/issues/14857
+      type() {
+        this.$nextTick(() => {
+          this.setNativeInputValue();
+          this.resizeTextarea();
+          this.updateIconOffset();
+        });
+      }
+    },
+
+    methods: {
+      focus() {
+        this.getInput().focus();
+      },
+      blur() {
+        this.getInput().blur();
+      },
+      getMigratingConfig() {
+        return {
+          props: {
+            'icon': 'icon is removed, use suffix-icon / prefix-icon instead.',
+            'on-icon-click': 'on-icon-click is removed.'
+          },
+          events: {
+            'click': 'click is removed.'
+          }
+        };
+      },
+      handleBlur(event) {
+        this.focused = false;
+        this.$emit('blur', event);
+        if (this.validateEvent) {
+          this.dispatch('ElFormItem', 'el.form.blur', [this.value]);
+        }
+      },
+      select() {
+        this.getInput().select();
+      },
+      resizeTextarea() {
+        if (this.$isServer) return;
+        const { autosize, type } = this;
+        if (type !== 'textarea') return;
+        if (!autosize) {
+          this.textareaCalcStyle = {
+            minHeight: calcTextareaHeight(this.$refs.textarea).minHeight
+          };
+          return;
+        }
+        const minRows = autosize.minRows;
+        const maxRows = autosize.maxRows;
+
+        this.textareaCalcStyle = calcTextareaHeight(this.$refs.textarea, minRows, maxRows);
+      },
+      setNativeInputValue() {
+        const input = this.getInput();
+        if (!input) return;
+        if (input.value === this.nativeInputValue) return;
+        input.value = this.nativeInputValue;
+      },
+      handleFocus(event) {
+        this.focused = true;
+        this.$emit('focus', event);
+      },
+      handleCompositionStart() {
+        this.isComposing = true;
+      },
+      handleCompositionUpdate(event) {
+        const text = event.target.value;
+        const lastCharacter = text[text.length - 1] || '';
+        this.isComposing = !isKorean(lastCharacter);
+      },
+      handleCompositionEnd(event) {
+        if (this.isComposing) {
+          this.isComposing = false;
+          this.handleInput(event);
+        }
+      },
+      handleInput(event) {
+        // should not emit input during composition
+        // see: https://github.com/ElemeFE/element/issues/10516
+        if (this.isComposing) return;
+
+        // hack for https://github.com/ElemeFE/element/issues/8548
+        // should remove the following line when we don't support IE
+        if (event.target.value === this.nativeInputValue) return;
+
+        this.$emit('input', event.target.value);
+
+        // ensure native input value is controlled
+        // see: https://github.com/ElemeFE/element/issues/12850
+        this.$nextTick(this.setNativeInputValue);
+      },
+      handleChange(event) {
+        this.$emit('change', event.target.value);
+      },
+      calcIconOffset(place) {
+        let elList = [].slice.call(this.$el.querySelectorAll(`.el-input__${place}`) || []);
+        if (!elList.length) return;
+        let el = null;
+        for (let i = 0; i < elList.length; i++) {
+          if (elList[i].parentNode === this.$el) {
+            el = elList[i];
+            break;
+          }
+        }
+        if (!el) return;
+        const pendantMap = {
+          suffix: 'append',
+          prefix: 'prepend'
+        };
+
+        const pendant = pendantMap[place];
+        if (this.$slots[pendant]) {
+          el.style.transform = `translateX(${place === 'suffix' ? '-' : ''}${this.$el.querySelector(`.el-input-group__${pendant}`).offsetWidth}px)`;
+        } else {
+          el.removeAttribute('style');
+        }
+      },
+      updateIconOffset() {
+        this.calcIconOffset('prefix');
+        this.calcIconOffset('suffix');
+      },
+      clear() {
+        this.$emit('input', '');
+        this.$emit('change', '');
+        this.$emit('clear');
+      },
+      handlePasswordVisible() {
+        this.passwordVisible = !this.passwordVisible;
+        this.$nextTick(() => {
+          this.focus();
+        });
+      },
+      getInput() {
+        return this.$refs.input || this.$refs.textarea;
+      },
+      getSuffixVisible() {
+        return this.$slots.suffix ||
+          this.suffixIcon ||
+          this.showClear ||
+          this.showPassword ||
+          this.isWordLimitVisible ||
+          (this.validateState && this.needStatusIcon);
+      }
+    },
+
+    created() {
+      this.$on('inputSelect', this.select);
+    },
+
+    mounted() {
+      this.setNativeInputValue();
+      this.resizeTextarea();
+      this.updateIconOffset();
+    },
+
+    updated() {
+      this.$nextTick(this.updateIconOffset);
+    }
+  };
+</script>

package/packages/input-number/index.js

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