iov-design 2.15.60 → 2.15.61

package/packages/switch/src/component.vue

@@ -1,182 +1,182 @@
-<template>
-  <div
-    class="el-switch"
-    :class="[ size ? 'el-switch--' + size : '', type ? 'el-switch--' + type : '', {'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', inactiveIconClass ? 'el-switch__label--left-icon' : '', inactiveText ? 'el-switch__label--left-text' : '', !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 > 0 ? coreWidth + 'px' : '' }">
-    </span>
-    <span
-      :class="['el-switch__label', 'el-switch__label--right', activeIconClass ? 'el-switch__label--right-icon' : '', activeText ? 'el-switch__label--right-text' : '', 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 'iov-design/src/mixins/emitter';
-  import Focus from 'iov-design/src/mixins/focus';
-  import Migrating from 'iov-design/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: 0
-      },
-      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
-      },
-      size: {
-        type: String,
-        default: ''
-      },
-      type: {
-        type: String,
-        default: 'circle'
-      },
-      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;
-      if (this.activeColor || this.inactiveColor) {
-        this.setBackgroundColor();
-      }
-      this.$refs.input.checked = this.checked;
-    }
-  };
-</script>
+<template>
+  <div
+    class="el-switch"
+    :class="[ size ? 'el-switch--' + size : '', type ? 'el-switch--' + type : '', {'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', inactiveIconClass ? 'el-switch__label--left-icon' : '', inactiveText ? 'el-switch__label--left-text' : '', !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 > 0 ? coreWidth + 'px' : '' }">
+    </span>
+    <span
+      :class="['el-switch__label', 'el-switch__label--right', activeIconClass ? 'el-switch__label--right-icon' : '', activeText ? 'el-switch__label--right-text' : '', 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 'iov-design/src/mixins/emitter';
+  import Focus from 'iov-design/src/mixins/focus';
+  import Migrating from 'iov-design/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: 0
+      },
+      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
+      },
+      size: {
+        type: String,
+        default: ''
+      },
+      type: {
+        type: String,
+        default: 'circle'
+      },
+      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;
+      if (this.activeColor || this.inactiveColor) {
+        this.setBackgroundColor();
+      }
+      this.$refs.input.checked = this.checked;
+    }
+  };
+</script>

package/packages/table/src/config.js

@@ -1,153 +1,153 @@
-import { getPropByPath } from 'iov-design/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 }) {
-      const { selection, data, rowKey } = store.states;
-      let indeterminate = selection.length > 0 && !(selection.length === data.length);
-
-      if (rowKey) {
-        // 全选: v-model - true, indeterminate - false
-        // 半选: v-model - false, indeterminate - true
-        // 不选：v-model - false, indeterminate - false
-
-        // 已选择的数据中是否包括当前页的数据项 && !当前页数据全部选中
-        indeterminate = selection.some(o => data.some(row => row[rowKey] === o[rowKey])) && !(data.every(row => selection.some(o => row[rowKey] === o[rowKey])));
-      }
-      return [<el-checkbox
-        disabled={ data && data.length === 0 }
-        indeterminate={ indeterminate }
-        on-input={ this.toggleAllSelection }
-        value={ this.isAllSelected } />,
-      this.table.crossPageSelection && <el-dropdown
-        class="el-table__cross-page-selection"
-        placement="bottom-start"
-        trigger="click"
-        size="small"
-        onCommand={command => this.onSelectionChange(command, this.scope)}
-        on-visible-change={this.onVisibleChange}
-      >
-        <i class={['iov-icon-arrow-down', this.store.states.showSelectionDropdown ? 'show-selection-dropdown' : '']} />
-        <el-dropdown-menu slot="dropdown" class="table-selection__dropdown">
-          <el-dropdown-item disabled={ data && data.length === 0 } command={1}>全选当页</el-dropdown-item>
-          <el-dropdown-item disabled={ data && data.length === 0 } command={3}>全选所有页</el-dropdown-item>
-          <el-dropdown-item disabled={ data && data.length === 0 } command={2}>清空当页</el-dropdown-item>
-          <el-dropdown-item disabled={ data && data.length === 0 } command={4}>清空所有页</el-dropdown-item>
-        </el-dropdown-menu>
-      </el-dropdown>
-      ];
-    },
-    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'></i>
-      </div>);
-    },
-    sortable: false,
-    resizable: false,
-    className: 'el-table__expand-column'
-  }
-};
-
-export function defaultRenderCell(h, { row, column, $index }) {
-  const property = column.property;
-  const emptyValuePlaceholder = column.emptyValuePlaceholder;
-  const value = property && getPropByPath(row, property).v;
-  if (column && column.formatter) {
-    return column.formatter(row, column, value, $index);
-  }
-  return emptyValuePlaceholder && ['', undefined, null].includes(value) ? emptyValuePlaceholder : 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'];
-    if (treeNode.loading) {
-      iconClasses = ['iov-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 'iov-design/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 }) {
+      const { selection, data, rowKey } = store.states;
+      let indeterminate = selection.length > 0 && !(selection.length === data.length);
+
+      if (rowKey) {
+        // 全选: v-model - true, indeterminate - false
+        // 半选: v-model - false, indeterminate - true
+        // 不选：v-model - false, indeterminate - false
+
+        // 已选择的数据中是否包括当前页的数据项 && !当前页数据全部选中
+        indeterminate = selection.some(o => data.some(row => row[rowKey] === o[rowKey])) && !(data.every(row => selection.some(o => row[rowKey] === o[rowKey])));
+      }
+      return [<el-checkbox
+        disabled={ data && data.length === 0 }
+        indeterminate={ indeterminate }
+        on-input={ this.toggleAllSelection }
+        value={ this.isAllSelected } />,
+      this.table.crossPageSelection && <el-dropdown
+        class="el-table__cross-page-selection"
+        placement="bottom-start"
+        trigger="click"
+        size="small"
+        onCommand={command => this.onSelectionChange(command, this.scope)}
+        on-visible-change={this.onVisibleChange}
+      >
+        <i class={['iov-icon-arrow-down', this.store.states.showSelectionDropdown ? 'show-selection-dropdown' : '']} />
+        <el-dropdown-menu slot="dropdown" class="table-selection__dropdown">
+          <el-dropdown-item disabled={ data && data.length === 0 } command={1}>全选当页</el-dropdown-item>
+          <el-dropdown-item disabled={ data && data.length === 0 } command={3}>全选所有页</el-dropdown-item>
+          <el-dropdown-item disabled={ data && data.length === 0 } command={2}>清空当页</el-dropdown-item>
+          <el-dropdown-item disabled={ data && data.length === 0 } command={4}>清空所有页</el-dropdown-item>
+        </el-dropdown-menu>
+      </el-dropdown>
+      ];
+    },
+    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'></i>
+      </div>);
+    },
+    sortable: false,
+    resizable: false,
+    className: 'el-table__expand-column'
+  }
+};
+
+export function defaultRenderCell(h, { row, column, $index }) {
+  const property = column.property;
+  const emptyValuePlaceholder = column.emptyValuePlaceholder;
+  const value = property && getPropByPath(row, property).v;
+  if (column && column.formatter) {
+    return column.formatter(row, column, value, $index);
+  }
+  return emptyValuePlaceholder && ['', undefined, null].includes(value) ? emptyValuePlaceholder : 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'];
+    if (treeNode.loading) {
+      iconClasses = ['iov-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;
+}