@penggy/element-ui 2.4.11

package/packages/autocomplete/src/autocomplete-suggestions.vue

@@ -0,0 +1,76 @@
+<template>
+  <transition name="el-zoom-in-top" @after-leave="doDestroy">
+    <div
+      v-show="showPopper"
+      class="el-autocomplete-suggestion el-popper"
+      :class="{ 'is-loading': !parent.hideLoading && parent.loading }"
+      :style="{ width: dropdownWidth }"
+      role="region">
+      <el-scrollbar
+        tag="ul"
+        wrap-class="el-autocomplete-suggestion__wrap"
+        view-class="el-autocomplete-suggestion__list">
+        <li v-if="!parent.hideLoading && parent.loading"><i class="el-icon-loading"></i></li>
+        <slot v-else>
+        </slot>
+      </el-scrollbar>
+    </div>
+  </transition>
+</template>
+<script>
+  import Popper from 'element-ui/src/utils/vue-popper';
+  import Emitter from 'element-ui/src/mixins/emitter';
+  import ElScrollbar from 'element-ui/packages/scrollbar';
+
+  export default {
+    components: { ElScrollbar },
+    mixins: [Popper, Emitter],
+
+    componentName: 'ElAutocompleteSuggestions',
+
+    data() {
+      return {
+        parent: this.$parent,
+        dropdownWidth: ''
+      };
+    },
+
+    props: {
+      options: {
+        default() {
+          return {
+            gpuAcceleration: false
+          };
+        }
+      },
+      id: String
+    },
+
+    methods: {
+      select(item) {
+        this.dispatch('ElAutocomplete', 'item-click', item);
+      }
+    },
+
+    updated() {
+      this.$nextTick(_ => {
+        this.popperJS && this.updatePopper();
+      });
+    },
+
+    mounted() {
+      this.$parent.popperElm = this.popperElm = this.$el;
+      this.referenceElm = this.$parent.$refs.input.$refs.input;
+      this.referenceList = this.$el.querySelector('.el-autocomplete-suggestion__list');
+      this.referenceList.setAttribute('role', 'listbox');
+      this.referenceList.setAttribute('id', this.id);
+    },
+
+    created() {
+      this.$on('visible', (val, inputWidth) => {
+        this.dropdownWidth = inputWidth + 'px';
+        this.showPopper = val;
+      });
+    }
+  };
+</script>

package/packages/autocomplete/src/autocomplete.vue

@@ -0,0 +1,269 @@
+<template>
+  <div
+    class="el-autocomplete"
+    v-clickoutside="close"
+    aria-haspopup="listbox"
+    role="combobox"
+    :aria-expanded="suggestionVisible"
+    :aria-owns="id"
+  >
+    <el-input
+      ref="input"
+      v-bind="[$props, $attrs]"
+      @input="handleChange"
+      @focus="handleFocus"
+      @blur="handleBlur"
+      @clear="handleClear"
+      @keydown.up.native.prevent="highlight(highlightedIndex - 1)"
+      @keydown.down.native.prevent="highlight(highlightedIndex + 1)"
+      @keydown.enter.native="handleKeyEnter"
+      @keydown.native.tab="close"
+    >
+      <template slot="prepend" v-if="$slots.prepend">
+        <slot name="prepend"></slot>
+      </template>
+      <template slot="append" v-if="$slots.append">
+        <slot name="append"></slot>
+      </template>
+      <template slot="prefix" v-if="$slots.prefix">
+        <slot name="prefix"></slot>
+      </template>
+      <template slot="suffix" v-if="$slots.suffix">
+        <slot name="suffix"></slot>
+      </template>
+    </el-input>
+    <el-autocomplete-suggestions
+      visible-arrow
+      :class="[popperClass ? popperClass : '']"
+      :popper-options="popperOptions"
+      :append-to-body="popperAppendToBody"
+      ref="suggestions"
+      :placement="placement"
+      :id="id">
+      <li
+        v-for="(item, index) in suggestions"
+        :key="index"
+        :class="{'highlighted': highlightedIndex === index}"
+        @click="select(item)"
+        :id="`${id}-item-${index}`"
+        role="option"
+        :aria-selected="highlightedIndex === index"
+      >
+        <slot :item="item">
+          {{ item[valueKey] }}
+        </slot>
+      </li>
+    </el-autocomplete-suggestions>
+  </div>
+</template>
+<script>
+  import debounce from 'throttle-debounce/debounce';
+  import ElInput from 'element-ui/packages/input';
+  import Clickoutside from 'element-ui/src/utils/clickoutside';
+  import ElAutocompleteSuggestions from './autocomplete-suggestions.vue';
+  import Emitter from 'element-ui/src/mixins/emitter';
+  import Migrating from 'element-ui/src/mixins/migrating';
+  import { generateId } from 'element-ui/src/utils/util';
+  import Focus from 'element-ui/src/mixins/focus';
+
+  export default {
+    name: 'ElAutocomplete',
+
+    mixins: [Emitter, Focus('input'), Migrating],
+
+    inheritAttrs: false,
+
+    componentName: 'ElAutocomplete',
+
+    components: {
+      ElInput,
+      ElAutocompleteSuggestions
+    },
+
+    directives: { Clickoutside },
+
+    props: {
+      valueKey: {
+        type: String,
+        default: 'value'
+      },
+      popperClass: String,
+      popperOptions: Object,
+      placeholder: String,
+      clearable: {
+        type: Boolean,
+        default: false
+      },
+      disabled: Boolean,
+      name: String,
+      size: String,
+      value: String,
+      maxlength: Number,
+      minlength: Number,
+      autofocus: Boolean,
+      fetchSuggestions: Function,
+      triggerOnFocus: {
+        type: Boolean,
+        default: true
+      },
+      customItem: String,
+      selectWhenUnmatched: {
+        type: Boolean,
+        default: false
+      },
+      prefixIcon: String,
+      suffixIcon: String,
+      label: String,
+      debounce: {
+        type: Number,
+        default: 300
+      },
+      placement: {
+        type: String,
+        default: 'bottom-start'
+      },
+      hideLoading: Boolean,
+      popperAppendToBody: {
+        type: Boolean,
+        default: true
+      }
+    },
+    data() {
+      return {
+        activated: false,
+        suggestions: [],
+        loading: false,
+        highlightedIndex: -1,
+        suggestionDisabled: false
+      };
+    },
+    computed: {
+      suggestionVisible() {
+        const suggestions = this.suggestions;
+        let isValidData = Array.isArray(suggestions) && suggestions.length > 0;
+        return (isValidData || this.loading) && this.activated;
+      },
+      id() {
+        return `el-autocomplete-${generateId()}`;
+      }
+    },
+    watch: {
+      suggestionVisible(val) {
+        this.broadcast('ElAutocompleteSuggestions', 'visible', [val, this.$refs.input.$refs.input.offsetWidth]);
+      }
+    },
+    methods: {
+      getMigratingConfig() {
+        return {
+          props: {
+            'custom-item': 'custom-item is removed, use scoped slot instead.',
+            'props': 'props is removed, use value-key instead.'
+          }
+        };
+      },
+      getData(queryString) {
+        if (this.suggestionDisabled) {
+          return;
+        }
+        this.loading = true;
+        this.fetchSuggestions(queryString, (suggestions) => {
+          this.loading = false;
+          if (this.suggestionDisabled) {
+            return;
+          }
+          if (Array.isArray(suggestions)) {
+            this.suggestions = suggestions;
+          } else {
+            console.error('[Element Error][Autocomplete]autocomplete suggestions must be an array');
+          }
+        });
+      },
+      handleChange(value) {
+        this.$emit('input', value);
+        this.suggestionDisabled = false;
+        if (!this.triggerOnFocus && !value) {
+          this.suggestionDisabled = true;
+          this.suggestions = [];
+          return;
+        }
+        this.debouncedGetData(value);
+      },
+      handleFocus(event) {
+        this.activated = true;
+        this.$emit('focus', event);
+        if (this.triggerOnFocus) {
+          this.debouncedGetData(this.value);
+        }
+      },
+      handleBlur(event) {
+        this.$emit('blur', event);
+      },
+      handleClear() {
+        this.activated = false;
+        this.$emit('clear');
+      },
+      close(e) {
+        this.activated = false;
+      },
+      handleKeyEnter(e) {
+        if (this.suggestionVisible && this.highlightedIndex >= 0 && this.highlightedIndex < this.suggestions.length) {
+          e.preventDefault();
+          this.select(this.suggestions[this.highlightedIndex]);
+        } else if (this.selectWhenUnmatched) {
+          this.$emit('select', {value: this.value});
+          this.$nextTick(_ => {
+            this.suggestions = [];
+            this.highlightedIndex = -1;
+          });
+        }
+      },
+      select(item) {
+        this.$emit('input', item[this.valueKey]);
+        this.$emit('select', item);
+        this.$nextTick(_ => {
+          this.suggestions = [];
+          this.highlightedIndex = -1;
+        });
+      },
+      highlight(index) {
+        if (!this.suggestionVisible || this.loading) { return; }
+        if (index < 0) {
+          this.highlightedIndex = -1;
+          return;
+        }
+        if (index >= this.suggestions.length) {
+          index = this.suggestions.length - 1;
+        }
+        const suggestion = this.$refs.suggestions.$el.querySelector('.el-autocomplete-suggestion__wrap');
+        const suggestionList = suggestion.querySelectorAll('.el-autocomplete-suggestion__list li');
+
+        let highlightItem = suggestionList[index];
+        let scrollTop = suggestion.scrollTop;
+        let offsetTop = highlightItem.offsetTop;
+
+        if (offsetTop + highlightItem.scrollHeight > (scrollTop + suggestion.clientHeight)) {
+          suggestion.scrollTop += highlightItem.scrollHeight;
+        }
+        if (offsetTop < scrollTop) {
+          suggestion.scrollTop -= highlightItem.scrollHeight;
+        }
+        this.highlightedIndex = index;
+        this.$el.querySelector('.el-input__inner').setAttribute('aria-activedescendant', `${this.id}-item-${this.highlightedIndex}`);
+      }
+    },
+    mounted() {
+      this.debouncedGetData = debounce(this.debounce, this.getData);
+      this.$on('item-click', item => {
+        this.select(item);
+      });
+      let $input = this.$el.querySelector('.el-input__inner');
+      $input.setAttribute('role', 'textbox');
+      $input.setAttribute('aria-autocomplete', 'list');
+      $input.setAttribute('aria-controls', 'id');
+      $input.setAttribute('aria-activedescendant', `${this.id}-item-${this.highlightedIndex}`);
+    },
+    beforeDestroy() {
+      this.$refs.suggestions.$destroy();
+    }
+  };
+</script>

package/packages/badge/index.js

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

package/packages/badge/src/main.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="el-badge">
+    <slot></slot>
+    <transition name="el-zoom-in-center">
+      <sup
+        v-show="!hidden && (content || content === 0 || isDot)"
+        v-text="content"
+        class="el-badge__content"
+        :class="[
+          'el-badge__content--' + type,
+          {
+            'is-fixed': $slots.default,
+            'is-dot': isDot
+          }
+        ]">
+      </sup>
+    </transition>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ElBadge',
+
+  props: {
+    value: {},
+    max: Number,
+    isDot: Boolean,
+    hidden: Boolean,
+    type: {
+      type: String,
+      validator(val) {
+        return ['primary', 'success', 'warning', 'info', 'danger'].indexOf(val) > -1;
+      }
+    }
+  },
+
+  computed: {
+    content() {
+      if (this.isDot) return;
+
+      const value = this.value;
+      const max = this.max;
+
+      if (typeof value === 'number' && typeof max === 'number') {
+        return max < value ? `${max}+` : value;
+      }
+
+      return value;
+    }
+  }
+};
+</script>

package/packages/breadcrumb/index.js

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

package/packages/breadcrumb/src/breadcrumb-item.vue

@@ -0,0 +1,41 @@
+<template>
+  <span class="el-breadcrumb__item">
+    <span
+      :class="['el-breadcrumb__inner', to ? 'is-link' : '']"
+      ref="link"
+      role="link">
+      <slot></slot>
+    </span>
+    <i v-if="separatorClass" class="el-breadcrumb__separator" :class="separatorClass"></i>
+    <span v-else class="el-breadcrumb__separator" role="presentation">{{separator}}</span>
+  </span>
+</template>
+<script>
+  export default {
+    name: 'ElBreadcrumbItem',
+    props: {
+      to: {},
+      replace: Boolean
+    },
+    data() {
+      return {
+        separator: '',
+        separatorClass: ''
+      };
+    },
+
+    inject: ['elBreadcrumb'],
+
+    mounted() {
+      this.separator = this.elBreadcrumb.separator;
+      this.separatorClass = this.elBreadcrumb.separatorClass;
+      const link = this.$refs.link;
+      link.setAttribute('role', 'link');
+      link.addEventListener('click', _ => {
+        const { to, $router } = this;
+        if (!to || !$router) return;
+        this.replace ? $router.replace(to) : $router.push(to);
+      });
+    }
+  };
+</script>

package/packages/breadcrumb/src/breadcrumb.vue

@@ -0,0 +1,34 @@
+<template>
+  <div class="el-breadcrumb" aria-label="Breadcrumb" role="navigation">
+    <slot></slot>
+  </div>
+</template>
+<script>
+  export default {
+    name: 'ElBreadcrumb',
+
+    props: {
+      separator: {
+        type: String,
+        default: '/'
+      },
+      separatorClass: {
+        type: String,
+        default: ''
+      }
+    },
+
+    provide() {
+      return {
+        elBreadcrumb: this
+      };
+    },
+
+    mounted() {
+      const items = this.$el.querySelectorAll('.el-breadcrumb__item');
+      if (items.length) {
+        items[items.length - 1].setAttribute('aria-current', 'page');
+      }
+    }
+  };
+</script>

package/packages/breadcrumb-item/index.js

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

package/packages/button/index.js

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

package/packages/button/src/button-group.vue

@@ -0,0 +1,10 @@
+<template>
+  <div class="el-button-group">
+    <slot></slot>
+  </div>
+</template>
+<script>
+  export default {
+    name: 'ElButtonGroup'
+  };
+</script>

package/packages/button/src/button.vue

@@ -0,0 +1,78 @@
+<template>
+  <button
+    class="el-button"
+    @click="handleClick"
+    :disabled="buttonDisabled || loading"
+    :autofocus="autofocus"
+    :type="nativeType"
+    :class="[
+      type ? 'el-button--' + type : '',
+      buttonSize ? 'el-button--' + buttonSize : '',
+      {
+        'is-disabled': buttonDisabled,
+        'is-loading': loading,
+        'is-plain': plain,
+        'is-round': round,
+        'is-circle': circle
+      }
+    ]"
+  >
+    <i class="el-icon-loading" v-if="loading"></i>
+    <i :class="icon" v-if="icon && !loading"></i>
+    <span v-if="$slots.default"><slot></slot></span>
+  </button>
+</template>
+<script>
+  export default {
+    name: 'ElButton',
+
+    inject: {
+      elForm: {
+        default: ''
+      },
+      elFormItem: {
+        default: ''
+      }
+    },
+
+    props: {
+      type: {
+        type: String,
+        default: 'default'
+      },
+      size: String,
+      icon: {
+        type: String,
+        default: ''
+      },
+      nativeType: {
+        type: String,
+        default: 'button'
+      },
+      loading: Boolean,
+      disabled: Boolean,
+      plain: Boolean,
+      autofocus: Boolean,
+      round: Boolean,
+      circle: Boolean
+    },
+
+    computed: {
+      _elFormItemSize() {
+        return (this.elFormItem || {}).elFormItemSize;
+      },
+      buttonSize() {
+        return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;
+      },
+      buttonDisabled() {
+        return this.disabled || (this.elForm || {}).disabled;
+      }
+    },
+
+    methods: {
+      handleClick(evt) {
+        this.$emit('click', evt);
+      }
+    }
+  };
+</script>

package/packages/button-group/index.js

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

package/packages/card/index.js

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

package/packages/card/src/main.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="el-card" :class="shadow ? 'is-' + shadow + '-shadow' : 'is-always-shadow'">
+    <div class="el-card__header" v-if="$slots.header || header">
+      <slot name="header">{{ header }}</slot>
+    </div>
+    <div class="el-card__body" :style="bodyStyle">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'ElCard',
+    props: {
+      header: {},
+      bodyStyle: {},
+      shadow: {
+        type: String
+      }
+    }
+  };
+</script>

package/packages/carousel/index.js

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