@penggy/element-ui 2.4.11

package/packages/steps/README.md

@@ -0,0 +1,69 @@
+# element-steps
+> A element-steps component for Vue.js.
+
+## Demo
+http://element-component.github.io/element-steps
+
+## Installation
+```shell
+npm i element-steps -D
+```
+
+## Usage
+```javascript
+import Vue from 'vue'
+import ElStep from 'element-steps'
+import 'element-theme-chalk/dist/step.css'
+
+Vue.use(ElStep)
+```
+
+or
+
+```javascript
+import Vue from 'vue'
+import { ElSteps, ElStep } from 'element-steps'
+
+Vue.component('el-steps', ElSteps)
+Vue.component('el-step', ElStep)
+```
+
+### Steps Attributes
+
+| 参数      | 说明    | 类型      | 可选值       | 默认值   |
+|---------- |-------- |---------- |-------------  |-------- |
+| space | 每个 step 的间距，不填写将自适应间距 | Number | — | — |
+| direction | 显示方向 | string | vertical/horizontal | horizontal |
+| active | 设置当前激活步骤  | number | — | 0 |
+| process-status | 设置当前步骤的状态 | string | wait/process/finish/error/success | process |
+| finish-status | 设置结束步骤的状态 | string | wait/process/finish/error/success | finish |
+| align-center | 标题描述居中对齐 | boolean | - | false |
+
+### Step Attributes
+| 参数      | 说明    | 类型      | 可选值       | 默认值   |
+|---------- |-------- |---------- |-------------  |-------- |
+| title | 标题 | string | — | — |
+| description | 描述性文字 | string | — | — |
+| icon | 图标 | Element Icon 提供的图标，如果要使用自定义图标可以通过 slot 方式写入 | string | — |
+
+### Step Slot
+| name | 说明  |
+|----|----|
+| icon | 图标 |
+| title | 标题 |
+| description | 描述性文字 |
+
+
+## Development
+```shell
+make dev
+
+## test
+make test
+
+## build
+make build
+```
+
+# License
+[MIT](https://opensource.org/licenses/MIT)

package/packages/steps/index.js

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

package/packages/steps/src/step.vue

@@ -0,0 +1,180 @@
+<template>
+  <div
+    class="el-step"
+    :style="style"
+    :class="[
+      !isSimple && `is-${$parent.direction}`,
+      isSimple && 'is-simple',
+      isLast && !space && !isCenter && 'is-flex',
+      isCenter && !isVertical && !isSimple && 'is-center'
+     ]">
+    <!-- icon & line -->
+    <div
+      class="el-step__head"
+      :class="`is-${currentStatus}`">
+      <div
+        class="el-step__line"
+        :style="isLast ? '' : { marginRight: $parent.stepOffset + 'px' }"
+      >
+        <i class="el-step__line-inner" :style="lineStyle"></i>
+      </div>
+
+      <div class="el-step__icon" :class="`is-${icon ? 'icon' : 'text'}`">
+        <slot
+          v-if="currentStatus !== 'success' && currentStatus !== 'error'"
+          name="icon">
+          <i v-if="icon" class="el-step__icon-inner" :class="[icon]"></i>
+          <div class="el-step__icon-inner" v-if="!icon && !isSimple">{{ index + 1 }}</div>
+        </slot>
+        <i
+          v-else
+          :class="['el-icon-' + (currentStatus === 'success' ? 'check' : 'close')]"
+          class="el-step__icon-inner is-status"
+        >
+        </i>
+      </div>
+    </div>
+    <!-- title & description -->
+    <div class="el-step__main">
+      <div
+        class="el-step__title"
+        ref="title"
+        :class="['is-' + currentStatus]">
+        <slot name="title">{{ title }}</slot>
+      </div>
+      <div v-if="isSimple" class="el-step__arrow"></div>
+      <div
+        v-else
+        class="el-step__description"
+        :class="['is-' + currentStatus]">
+        <slot name="description">{{ description }}</slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ElStep',
+
+  props: {
+    title: String,
+    icon: String,
+    description: String,
+    status: String
+  },
+
+  data() {
+    return {
+      index: -1,
+      lineStyle: {},
+      internalStatus: ''
+    };
+  },
+
+  beforeCreate() {
+    this.$parent.steps.push(this);
+  },
+
+  beforeDestroy() {
+    const steps = this.$parent.steps;
+    const index = steps.indexOf(this);
+    if (index >= 0) {
+      steps.splice(index, 1);
+    }
+  },
+
+  computed: {
+    currentStatus() {
+      return this.status || this.internalStatus;
+    },
+    prevStatus() {
+      const prevStep = this.$parent.steps[this.index - 1];
+      return prevStep ? prevStep.currentStatus : 'wait';
+    },
+    isCenter() {
+      return this.$parent.alignCenter;
+    },
+    isVertical() {
+      return this.$parent.direction === 'vertical';
+    },
+    isSimple() {
+      return this.$parent.simple;
+    },
+    isLast() {
+      const parent = this.$parent;
+      return parent.steps[parent.steps.length - 1] === this;
+    },
+    stepsCount() {
+      return this.$parent.steps.length;
+    },
+    space() {
+      const { isSimple, $parent: { space } } = this;
+      return isSimple ? '' : space ;
+    },
+    style: function() {
+      const style = {};
+      const parent = this.$parent;
+      const len = parent.steps.length;
+
+      const space = (typeof this.space === 'number'
+        ? this.space + 'px'
+        : this.space
+          ? this.space
+          : 100 / (len - (this.isCenter ? 0 : 1)) + '%');
+      style.flexBasis = space;
+      if (this.isVertical) return style;
+      if (this.isLast) {
+        style.maxWidth = 100 / this.stepsCount + '%';
+      } else {
+        style.marginRight = -this.$parent.stepOffset + 'px';
+      }
+
+      return style;
+    }
+  },
+
+  methods: {
+    updateStatus(val) {
+      const prevChild = this.$parent.$children[this.index - 1];
+
+      if (val > this.index) {
+        this.internalStatus = this.$parent.finishStatus;
+      } else if (val === this.index && this.prevStatus !== 'error') {
+        this.internalStatus = this.$parent.processStatus;
+      } else {
+        this.internalStatus = 'wait';
+      }
+
+      if (prevChild) prevChild.calcProgress(this.internalStatus);
+    },
+
+    calcProgress(status) {
+      let step = 100;
+      const style = {};
+
+      style.transitionDelay = 150 * this.index + 'ms';
+      if (status === this.$parent.processStatus) {
+        step = this.currentStatus !== 'error' ? 0 : 0;
+      } else if (status === 'wait') {
+        step = 0;
+        style.transitionDelay = (-150 * this.index) + 'ms';
+      }
+
+      style.borderWidth = step ? '1px' : 0;
+      this.$parent.direction === 'vertical'
+        ? style.height = step + '%'
+        : style.width = step + '%';
+
+      this.lineStyle = style;
+    }
+  },
+
+  mounted() {
+    const unwatch = this.$watch('index', val => {
+      this.$watch('$parent.active', this.updateStatus, { immediate: true });
+      unwatch();
+    });
+  }
+};
+</script>

package/packages/steps/src/steps.vue

@@ -0,0 +1,68 @@
+<template>
+  <div
+    class="el-steps"
+    :class="[
+       !simple && 'el-steps--' + direction,
+       simple && 'el-steps--simple'
+     ]">
+      <slot></slot>
+  </div>
+</template>
+
+<script>
+import Migrating from 'element-ui/src/mixins/migrating';
+
+export default {
+  name: 'ElSteps',
+
+  mixins: [Migrating],
+
+  props: {
+    space: [Number, String],
+    active: Number,
+    direction: {
+      type: String,
+      default: 'horizontal'
+    },
+    alignCenter: Boolean,
+    simple: Boolean,
+    finishStatus: {
+      type: String,
+      default: 'finish'
+    },
+    processStatus: {
+      type: String,
+      default: 'process'
+    }
+  },
+
+  data() {
+    return {
+      steps: [],
+      stepOffset: 0
+    };
+  },
+
+  methods: {
+    getMigratingConfig() {
+      return {
+        props: {
+          'center': 'center is removed.'
+        }
+      };
+    }
+  },
+
+  watch: {
+    active(newVal, oldVal) {
+      this.$emit('change', newVal, oldVal);
+    },
+
+    steps(steps) {
+      steps.forEach((child, index) => {
+        child.index = index;
+      });
+    }
+  }
+};
+</script>

package/packages/submenu/index.js

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

package/packages/switch/index.js

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

package/packages/switch/src/component.vue

@@ -0,0 +1,163 @@
+<template>
+  <div
+    class="el-switch"
+    :class="{ 'is-disabled': switchDisabled, 'is-checked': checked }"
+    role="switch"
+    :aria-checked="checked"
+    :aria-disabled="switchDisabled"
+    @click="switchValue"
+  >
+    <input
+      class="el-switch__input"
+      type="checkbox"
+      @change="handleChange"
+      ref="input"
+      :id="id"
+      :name="name"
+      :true-value="activeValue"
+      :false-value="inactiveValue"
+      :disabled="switchDisabled"
+      @keydown.enter="switchValue"
+    >
+    <span
+      :class="['el-switch__label', 'el-switch__label--left', !checked ? 'is-active' : '']"
+      v-if="inactiveIconClass || inactiveText">
+      <i :class="[inactiveIconClass]" v-if="inactiveIconClass"></i>
+      <span v-if="!inactiveIconClass && inactiveText" :aria-hidden="checked">{{ inactiveText }}</span>
+    </span>
+    <span class="el-switch__core" ref="core" :style="{ 'width': coreWidth + 'px' }">
+    </span>
+    <span
+      :class="['el-switch__label', 'el-switch__label--right', checked ? 'is-active' : '']"
+      v-if="activeIconClass || activeText">
+      <i :class="[activeIconClass]" v-if="activeIconClass"></i>
+      <span v-if="!activeIconClass && activeText" :aria-hidden="!checked">{{ activeText }}</span>
+    </span>
+  </div>
+</template>
+<script>
+  import Focus from 'element-ui/src/mixins/focus';
+  import Migrating from 'element-ui/src/mixins/migrating';
+
+  export default {
+    name: 'ElSwitch',
+    mixins: [Focus('input'), Migrating],
+    inject: {
+      elForm: {
+        default: ''
+      }
+    },
+    props: {
+      value: {
+        type: [Boolean, String, Number],
+        default: false
+      },
+      disabled: {
+        type: Boolean,
+        default: false
+      },
+      width: {
+        type: Number,
+        default: 40
+      },
+      activeIconClass: {
+        type: String,
+        default: ''
+      },
+      inactiveIconClass: {
+        type: String,
+        default: ''
+      },
+      activeText: String,
+      inactiveText: String,
+      activeColor: {
+        type: String,
+        default: ''
+      },
+      inactiveColor: {
+        type: String,
+        default: ''
+      },
+      activeValue: {
+        type: [Boolean, String, Number],
+        default: true
+      },
+      inactiveValue: {
+        type: [Boolean, String, Number],
+        default: false
+      },
+      name: {
+        type: String,
+        default: ''
+      },
+      id: String
+    },
+    data() {
+      return {
+        coreWidth: this.width
+      };
+    },
+    created() {
+      if (!~[this.activeValue, this.inactiveValue].indexOf(this.value)) {
+        this.$emit('input', this.inactiveValue);
+      }
+    },
+    computed: {
+      checked() {
+        return this.value === this.activeValue;
+      },
+      switchDisabled() {
+        return this.disabled || (this.elForm || {}).disabled;
+      }
+    },
+    watch: {
+      checked() {
+        this.$refs.input.checked = this.checked;
+        if (this.activeColor || this.inactiveColor) {
+          this.setBackgroundColor();
+        }
+      }
+    },
+    methods: {
+      handleChange(event) {
+        this.$emit('input', !this.checked ? this.activeValue : this.inactiveValue);
+        this.$emit('change', !this.checked ? this.activeValue : this.inactiveValue);
+        this.$nextTick(() => {
+          // set input's checked property
+          // in case parent refuses to change component's value
+          this.$refs.input.checked = this.checked;
+        });
+      },
+      setBackgroundColor() {
+        let newColor = this.checked ? this.activeColor : this.inactiveColor;
+        this.$refs.core.style.borderColor = newColor;
+        this.$refs.core.style.backgroundColor = newColor;
+      },
+      switchValue() {
+        !this.switchDisabled && this.handleChange();
+      },
+      getMigratingConfig() {
+        return {
+          props: {
+            'on-color': 'on-color is renamed to active-color.',
+            'off-color': 'off-color is renamed to inactive-color.',
+            'on-text': 'on-text is renamed to active-text.',
+            'off-text': 'off-text is renamed to inactive-text.',
+            'on-value': 'on-value is renamed to active-value.',
+            'off-value': 'off-value is renamed to inactive-value.',
+            'on-icon-class': 'on-icon-class is renamed to active-icon-class.',
+            'off-icon-class': 'off-icon-class is renamed to inactive-icon-class.'
+          }
+        };
+      }
+    },
+    mounted() {
+      /* istanbul ignore if */
+      this.coreWidth = this.width || 40;
+      if (this.activeColor || this.inactiveColor) {
+        this.setBackgroundColor();
+      }
+      this.$refs.input.checked = this.checked;
+    }
+  };
+</script>

package/packages/tab-pane/index.js

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

package/packages/table/index.js

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

package/packages/table/src/dropdown.js

@@ -0,0 +1,28 @@
+import Vue from 'vue';
+var dropdowns = [];
+
+!Vue.prototype.$isServer && document.addEventListener('click', function(event) {
+  dropdowns.forEach(function(dropdown) {
+    var target = event.target;
+    if (!dropdown || !dropdown.$el) return;
+    if (target === dropdown.$el || dropdown.$el.contains(target)) {
+      return;
+    }
+    dropdown.handleOutsideClick && dropdown.handleOutsideClick(event);
+  });
+});
+
+export default {
+  open(instance) {
+    if (instance) {
+      dropdowns.push(instance);
+    }
+  },
+
+  close(instance) {
+    var index = dropdowns.indexOf(instance);
+    if (index !== -1) {
+      dropdowns.splice(instance, 1);
+    }
+  }
+};