element-sim 1.0.0 → 1.0.2

package/packages/switch/index.js

@@ -1,9 +1,9 @@
-import Switch from './src/component';
-
-/* istanbul ignore next */
-Switch.install = function(Vue) {
-  Vue.component(Switch.name, Switch);
-};
-
-export default Switch;
-
+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

@@ -1,174 +1,174 @@
-<template>
-  <div
-    class="el-switch"
-    :class="{ 'is-disabled': switchDisabled, 'is-checked': checked }"
-    role="switch"
-    :aria-checked="checked"
-    :aria-disabled="switchDisabled"
-    @click.prevent="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 emitter from 'element-ui/src/mixins/emitter';
-  import Focus from 'element-ui/src/mixins/focus';
-  import Migrating from 'element-ui/src/mixins/migrating';
-
-  export default {
-    name: 'ElSwitch',
-    mixins: [Focus('input'), Migrating, emitter],
-    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: ''
-      },
-      validateEvent: {
-        type: Boolean,
-        default: true
-      },
-      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();
-        }
-        if (this.validateEvent) {
-          this.dispatch('ElFormItem', 'el.form.change', [this.value]);
-        }
-      }
-    },
-    methods: {
-      handleChange(event) {
-        const val = this.checked ? this.inactiveValue : this.activeValue;
-        this.$emit('input', val);
-        this.$emit('change', val);
-        this.$nextTick(() => {
-          // set input's checked property
-          // in case parent refuses to change component's value
-          if (this.$refs.input) {
-            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>
+<template>
+  <div
+    class="el-switch"
+    :class="{ 'is-disabled': switchDisabled, 'is-checked': checked }"
+    role="switch"
+    :aria-checked="checked"
+    :aria-disabled="switchDisabled"
+    @click.prevent="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 emitter from 'element-sim/src/mixins/emitter';
+  import Focus from 'element-sim/src/mixins/focus';
+  import Migrating from 'element-sim/src/mixins/migrating';
+
+  export default {
+    name: 'ElSwitch',
+    mixins: [Focus('input'), Migrating, emitter],
+    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: ''
+      },
+      validateEvent: {
+        type: Boolean,
+        default: true
+      },
+      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();
+        }
+        if (this.validateEvent) {
+          this.dispatch('ElFormItem', 'el.form.change', [this.value]);
+        }
+      }
+    },
+    methods: {
+      handleChange(event) {
+        const val = this.checked ? this.inactiveValue : this.activeValue;
+        this.$emit('input', val);
+        this.$emit('change', val);
+        this.$nextTick(() => {
+          // set input's checked property
+          // in case parent refuses to change component's value
+          if (this.$refs.input) {
+            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

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

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

package/packages/table/src/config.js

@@ -1,124 +1,124 @@
-import { getPropByPath } from 'element-ui/src/utils/util';
-
-export const cellStarts = {
-  default: {
-    order: ''
-  },
-  selection: {
-    width: 48,
-    minWidth: 48,
-    realWidth: 48,
-    order: '',
-    className: 'el-table-column--selection'
-  },
-  expand: {
-    width: 48,
-    minWidth: 48,
-    realWidth: 48,
-    order: ''
-  },
-  index: {
-    width: 48,
-    minWidth: 48,
-    realWidth: 48,
-    order: ''
-  }
-};
-
-// 这些选项不应该被覆盖
-export const cellForced = {
-  selection: {
-    renderHeader: function(h, { store }) {
-      return <el-checkbox
-        disabled={ store.states.data && store.states.data.length === 0 }
-        indeterminate={ store.states.selection.length > 0 && !this.isAllSelected }
-        on-input={ this.toggleAllSelection }
-        value={ this.isAllSelected } />;
-    },
-    renderCell: function(h, { row, column, isSelected, store, $index }) {
-      return <el-checkbox
-        nativeOn-click={ (event) => event.stopPropagation() }
-        value={ isSelected }
-        disabled={ column.selectable ? !column.selectable.call(null, row, $index) : false }
-        on-input={ () => { store.commit('rowSelectedChanged', row); } }
-      />;
-    },
-    sortable: false,
-    resizable: false
-  },
-  index: {
-    renderHeader: function(h, { column }) {
-      return column.label || '#';
-    },
-    renderCell: function(h, { $index, column }) {
-      let i = $index + 1;
-      const index = column.index;
-
-      if (typeof index === 'number') {
-        i = $index + index;
-      } else if (typeof index === 'function') {
-        i = index($index);
-      }
-
-      return <div>{ i }</div>;
-    },
-    sortable: false
-  },
-  expand: {
-    renderHeader: function(h, { column }) {
-      return column.label || '';
-    },
-    renderCell: function(h, { row, store, isExpanded }) {
-      const classes = ['el-table__expand-icon'];
-      if (isExpanded) {
-        classes.push('el-table__expand-icon--expanded');
-      }
-      const callback = function(e) {
-        e.stopPropagation();
-        store.toggleRowExpansion(row);
-      };
-      return (<div class={ classes }
-        on-click={callback}>
-        <i class='el-icon el-icon-arrow-right'></i>
-      </div>);
-    },
-    sortable: false,
-    resizable: false,
-    className: 'el-table__expand-column'
-  }
-};
-
-export function defaultRenderCell(h, { row, column, $index }) {
-  const property = column.property;
-  const value = property && getPropByPath(row, property).v;
-  if (column && column.formatter) {
-    return column.formatter(row, column, value, $index);
-  }
-  return value;
-}
-
-export function treeCellPrefix(h, { row, treeNode, store }) {
-  if (!treeNode) return null;
-  const ele = [];
-  const callback = function(e) {
-    e.stopPropagation();
-    store.loadOrToggle(row);
-  };
-  if (treeNode.indent) {
-    ele.push(<span class="el-table__indent" style={{'padding-left': treeNode.indent + 'px'}}></span>);
-  }
-  if (typeof treeNode.expanded === 'boolean' && !treeNode.noLazyChildren) {
-    const expandClasses = ['el-table__expand-icon', treeNode.expanded ? 'el-table__expand-icon--expanded' : ''];
-    let iconClasses = ['el-icon-arrow-right'];
-    if (treeNode.loading) {
-      iconClasses = ['el-icon-loading'];
-    }
-    ele.push(<div class={ expandClasses }
-      on-click={ callback }>
-      <i class={ iconClasses }></i>
-    </div>);
-  } else {
-    ele.push(<span class="el-table__placeholder"></span>);
-  }
-  return ele;
-}
+import { getPropByPath } from 'element-sim/src/utils/util';
+
+export const cellStarts = {
+  default: {
+    order: ''
+  },
+  selection: {
+    width: 48,
+    minWidth: 48,
+    realWidth: 48,
+    order: '',
+    className: 'el-table-column--selection'
+  },
+  expand: {
+    width: 48,
+    minWidth: 48,
+    realWidth: 48,
+    order: ''
+  },
+  index: {
+    width: 48,
+    minWidth: 48,
+    realWidth: 48,
+    order: ''
+  }
+};
+
+// 这些选项不应该被覆盖
+export const cellForced = {
+  selection: {
+    renderHeader: function(h, { store }) {
+      return <el-checkbox
+        disabled={ store.states.data && store.states.data.length === 0 }
+        indeterminate={ store.states.selection.length > 0 && !this.isAllSelected }
+        on-input={ this.toggleAllSelection }
+        value={ this.isAllSelected } />;
+    },
+    renderCell: function(h, { row, column, isSelected, store, $index }) {
+      return <el-checkbox
+        nativeOn-click={ (event) => event.stopPropagation() }
+        value={ isSelected }
+        disabled={ column.selectable ? !column.selectable.call(null, row, $index) : false }
+        on-input={ () => { store.commit('rowSelectedChanged', row); } }
+      />;
+    },
+    sortable: false,
+    resizable: false
+  },
+  index: {
+    renderHeader: function(h, { column }) {
+      return column.label || '#';
+    },
+    renderCell: function(h, { $index, column }) {
+      let i = $index + 1;
+      const index = column.index;
+
+      if (typeof index === 'number') {
+        i = $index + index;
+      } else if (typeof index === 'function') {
+        i = index($index);
+      }
+
+      return <div>{ i }</div>;
+    },
+    sortable: false
+  },
+  expand: {
+    renderHeader: function(h, { column }) {
+      return column.label || '';
+    },
+    renderCell: function(h, { row, store, isExpanded }) {
+      const classes = ['el-table__expand-icon'];
+      if (isExpanded) {
+        classes.push('el-table__expand-icon--expanded');
+      }
+      const callback = function(e) {
+        e.stopPropagation();
+        store.toggleRowExpansion(row);
+      };
+      return (<div class={ classes }
+        on-click={callback}>
+        <i class='el-icon el-icon-arrow-right'></i>
+      </div>);
+    },
+    sortable: false,
+    resizable: false,
+    className: 'el-table__expand-column'
+  }
+};
+
+export function defaultRenderCell(h, { row, column, $index }) {
+  const property = column.property;
+  const value = property && getPropByPath(row, property).v;
+  if (column && column.formatter) {
+    return column.formatter(row, column, value, $index);
+  }
+  return value;
+}
+
+export function treeCellPrefix(h, { row, treeNode, store }) {
+  if (!treeNode) return null;
+  const ele = [];
+  const callback = function(e) {
+    e.stopPropagation();
+    store.loadOrToggle(row);
+  };
+  if (treeNode.indent) {
+    ele.push(<span class="el-table__indent" style={{'padding-left': treeNode.indent + 'px'}}></span>);
+  }
+  if (typeof treeNode.expanded === 'boolean' && !treeNode.noLazyChildren) {
+    const expandClasses = ['el-table__expand-icon', treeNode.expanded ? 'el-table__expand-icon--expanded' : ''];
+    let iconClasses = ['el-icon-arrow-right'];
+    if (treeNode.loading) {
+      iconClasses = ['el-icon-loading'];
+    }
+    ele.push(<div class={ expandClasses }
+      on-click={ callback }>
+      <i class={ iconClasses }></i>
+    </div>);
+  } else {
+    ele.push(<span class="el-table__placeholder"></span>);
+  }
+  return ele;
+}