iov-design 2.15.60 → 2.15.61

package/packages/scrollbar/src/bar.js

@@ -1,92 +1,92 @@
-import { on, off } from 'iov-design/src/utils/dom';
-import { renderThumbStyle, BAR_MAP } from './util';
-
-/* istanbul ignore next */
-export default {
-  name: 'Bar',
-
-  props: {
-    vertical: Boolean,
-    size: String,
-    move: Number
-  },
-
-  computed: {
-    bar() {
-      return BAR_MAP[this.vertical ? 'vertical' : 'horizontal'];
-    },
-
-    wrap() {
-      return this.$parent.wrap;
-    }
-  },
-
-  render(h) {
-    const { size, move, bar } = this;
-
-    return (
-      <div
-        class={ ['el-scrollbar__bar', 'is-' + bar.key] }
-        onMousedown={ this.clickTrackHandler } >
-        <div
-          ref="thumb"
-          class="el-scrollbar__thumb"
-          onMousedown={ this.clickThumbHandler }
-          style={ renderThumbStyle({ size, move, bar }) }>
-        </div>
-      </div>
-    );
-  },
-
-  methods: {
-    clickThumbHandler(e) {
-      // prevent click event of right button
-      if (e.ctrlKey || e.button === 2) {
-        return;
-      }
-      this.startDrag(e);
-      this[this.bar.axis] = (e.currentTarget[this.bar.offset] - (e[this.bar.client] - e.currentTarget.getBoundingClientRect()[this.bar.direction]));
-    },
-
-    clickTrackHandler(e) {
-      const offset = Math.abs(e.target.getBoundingClientRect()[this.bar.direction] - e[this.bar.client]);
-      const thumbHalf = (this.$refs.thumb[this.bar.offset] / 2);
-      const thumbPositionPercentage = ((offset - thumbHalf) * 100 / this.$el[this.bar.offset]);
-
-      this.wrap[this.bar.scroll] = (thumbPositionPercentage * this.wrap[this.bar.scrollSize] / 100);
-    },
-
-    startDrag(e) {
-      e.stopImmediatePropagation();
-      this.cursorDown = true;
-
-      on(document, 'mousemove', this.mouseMoveDocumentHandler);
-      on(document, 'mouseup', this.mouseUpDocumentHandler);
-      document.onselectstart = () => false;
-    },
-
-    mouseMoveDocumentHandler(e) {
-      if (this.cursorDown === false) return;
-      const prevPage = this[this.bar.axis];
-
-      if (!prevPage) return;
-
-      const offset = ((this.$el.getBoundingClientRect()[this.bar.direction] - e[this.bar.client]) * -1);
-      const thumbClickPosition = (this.$refs.thumb[this.bar.offset] - prevPage);
-      const thumbPositionPercentage = ((offset - thumbClickPosition) * 100 / this.$el[this.bar.offset]);
-
-      this.wrap[this.bar.scroll] = (thumbPositionPercentage * this.wrap[this.bar.scrollSize] / 100);
-    },
-
-    mouseUpDocumentHandler(e) {
-      this.cursorDown = false;
-      this[this.bar.axis] = 0;
-      off(document, 'mousemove', this.mouseMoveDocumentHandler);
-      document.onselectstart = null;
-    }
-  },
-
-  destroyed() {
-    off(document, 'mouseup', this.mouseUpDocumentHandler);
-  }
-};
+import { on, off } from 'iov-design/src/utils/dom';
+import { renderThumbStyle, BAR_MAP } from './util';
+
+/* istanbul ignore next */
+export default {
+  name: 'Bar',
+
+  props: {
+    vertical: Boolean,
+    size: String,
+    move: Number
+  },
+
+  computed: {
+    bar() {
+      return BAR_MAP[this.vertical ? 'vertical' : 'horizontal'];
+    },
+
+    wrap() {
+      return this.$parent.wrap;
+    }
+  },
+
+  render(h) {
+    const { size, move, bar } = this;
+
+    return (
+      <div
+        class={ ['el-scrollbar__bar', 'is-' + bar.key] }
+        onMousedown={ this.clickTrackHandler } >
+        <div
+          ref="thumb"
+          class="el-scrollbar__thumb"
+          onMousedown={ this.clickThumbHandler }
+          style={ renderThumbStyle({ size, move, bar }) }>
+        </div>
+      </div>
+    );
+  },
+
+  methods: {
+    clickThumbHandler(e) {
+      // prevent click event of right button
+      if (e.ctrlKey || e.button === 2) {
+        return;
+      }
+      this.startDrag(e);
+      this[this.bar.axis] = (e.currentTarget[this.bar.offset] - (e[this.bar.client] - e.currentTarget.getBoundingClientRect()[this.bar.direction]));
+    },
+
+    clickTrackHandler(e) {
+      const offset = Math.abs(e.target.getBoundingClientRect()[this.bar.direction] - e[this.bar.client]);
+      const thumbHalf = (this.$refs.thumb[this.bar.offset] / 2);
+      const thumbPositionPercentage = ((offset - thumbHalf) * 100 / this.$el[this.bar.offset]);
+
+      this.wrap[this.bar.scroll] = (thumbPositionPercentage * this.wrap[this.bar.scrollSize] / 100);
+    },
+
+    startDrag(e) {
+      e.stopImmediatePropagation();
+      this.cursorDown = true;
+
+      on(document, 'mousemove', this.mouseMoveDocumentHandler);
+      on(document, 'mouseup', this.mouseUpDocumentHandler);
+      document.onselectstart = () => false;
+    },
+
+    mouseMoveDocumentHandler(e) {
+      if (this.cursorDown === false) return;
+      const prevPage = this[this.bar.axis];
+
+      if (!prevPage) return;
+
+      const offset = ((this.$el.getBoundingClientRect()[this.bar.direction] - e[this.bar.client]) * -1);
+      const thumbClickPosition = (this.$refs.thumb[this.bar.offset] - prevPage);
+      const thumbPositionPercentage = ((offset - thumbClickPosition) * 100 / this.$el[this.bar.offset]);
+
+      this.wrap[this.bar.scroll] = (thumbPositionPercentage * this.wrap[this.bar.scrollSize] / 100);
+    },
+
+    mouseUpDocumentHandler(e) {
+      this.cursorDown = false;
+      this[this.bar.axis] = 0;
+      off(document, 'mousemove', this.mouseMoveDocumentHandler);
+      document.onselectstart = null;
+    }
+  },
+
+  destroyed() {
+    off(document, 'mouseup', this.mouseUpDocumentHandler);
+  }
+};

package/packages/scrollbar/src/main.js

@@ -1,130 +1,130 @@
-// reference https://github.com/noeldelgado/gemini-scrollbar/blob/master/index.js
-
-import { addResizeListener, removeResizeListener } from 'iov-design/src/utils/resize-event';
-import scrollbarWidth from 'iov-design/src/utils/scrollbar-width';
-import { toObject } from 'iov-design/src/utils/util';
-import Bar from './bar';
-
-/* istanbul ignore next */
-export default {
-  name: 'ElScrollbar',
-
-  components: { Bar },
-
-  props: {
-    native: Boolean,
-    wrapStyle: {},
-    wrapClass: {},
-    viewClass: {},
-    viewStyle: {},
-    noresize: Boolean, // 如果 container 尺寸不会发生变化，最好设置它可以优化性能
-    tag: {
-      type: String,
-      default: 'div'
-    }
-  },
-
-  data() {
-    return {
-      sizeWidth: '0',
-      sizeHeight: '0',
-      moveX: 0,
-      moveY: 0
-    };
-  },
-
-  computed: {
-    wrap() {
-      return this.$refs.wrap;
-    }
-  },
-
-  render(h) {
-    let gutter = scrollbarWidth();
-    let style = this.wrapStyle;
-
-    if (gutter) {
-      const gutterWith = `-${gutter}px`;
-      const gutterStyle = `margin-bottom: ${gutterWith}; margin-right: ${gutterWith};`;
-
-      if (Array.isArray(this.wrapStyle)) {
-        style = toObject(this.wrapStyle);
-        style.marginRight = style.marginBottom = gutterWith;
-      } else if (typeof this.wrapStyle === 'string') {
-        style += gutterStyle;
-      } else {
-        style = gutterStyle;
-      }
-    }
-    const view = h(this.tag, {
-      class: ['el-scrollbar__view', this.viewClass],
-      style: this.viewStyle,
-      ref: 'resize'
-    }, this.$slots.default);
-    const wrap = (
-      <div
-        ref="wrap"
-        style={ style }
-        onScroll={ this.handleScroll }
-        class={ [this.wrapClass, 'el-scrollbar__wrap', gutter ? '' : 'el-scrollbar__wrap--hidden-default'] }>
-        { [view] }
-      </div>
-    );
-    let nodes;
-
-    if (!this.native) {
-      nodes = ([
-        wrap,
-        <Bar
-          move={ this.moveX }
-          size={ this.sizeWidth }></Bar>,
-        <Bar
-          vertical
-          move={ this.moveY }
-          size={ this.sizeHeight }></Bar>
-      ]);
-    } else {
-      nodes = ([
-        <div
-          ref="wrap"
-          class={ [this.wrapClass, 'el-scrollbar__wrap'] }
-          style={ style }>
-          { [view] }
-        </div>
-      ]);
-    }
-    return h('div', { class: 'el-scrollbar' }, nodes);
-  },
-
-  methods: {
-    handleScroll() {
-      const wrap = this.wrap;
-
-      this.moveY = ((wrap.scrollTop * 100) / wrap.clientHeight);
-      this.moveX = ((wrap.scrollLeft * 100) / wrap.clientWidth);
-    },
-
-    update() {
-      let heightPercentage, widthPercentage;
-      const wrap = this.wrap;
-      if (!wrap) return;
-
-      heightPercentage = (wrap.clientHeight * 100 / wrap.scrollHeight);
-      widthPercentage = (wrap.clientWidth * 100 / wrap.scrollWidth);
-
-      this.sizeHeight = (heightPercentage < 100) ? (heightPercentage + '%') : '';
-      this.sizeWidth = (widthPercentage < 100) ? (widthPercentage + '%') : '';
-    }
-  },
-
-  mounted() {
-    if (this.native) return;
-    this.$nextTick(this.update);
-    !this.noresize && addResizeListener(this.$refs.resize, this.update);
-  },
-
-  beforeDestroy() {
-    if (this.native) return;
-    !this.noresize && removeResizeListener(this.$refs.resize, this.update);
-  }
-};
+// reference https://github.com/noeldelgado/gemini-scrollbar/blob/master/index.js
+
+import { addResizeListener, removeResizeListener } from 'iov-design/src/utils/resize-event';
+import scrollbarWidth from 'iov-design/src/utils/scrollbar-width';
+import { toObject } from 'iov-design/src/utils/util';
+import Bar from './bar';
+
+/* istanbul ignore next */
+export default {
+  name: 'ElScrollbar',
+
+  components: { Bar },
+
+  props: {
+    native: Boolean,
+    wrapStyle: {},
+    wrapClass: {},
+    viewClass: {},
+    viewStyle: {},
+    noresize: Boolean, // 如果 container 尺寸不会发生变化，最好设置它可以优化性能
+    tag: {
+      type: String,
+      default: 'div'
+    }
+  },
+
+  data() {
+    return {
+      sizeWidth: '0',
+      sizeHeight: '0',
+      moveX: 0,
+      moveY: 0
+    };
+  },
+
+  computed: {
+    wrap() {
+      return this.$refs.wrap;
+    }
+  },
+
+  render(h) {
+    let gutter = scrollbarWidth();
+    let style = this.wrapStyle;
+
+    if (gutter) {
+      const gutterWith = `-${gutter}px`;
+      const gutterStyle = `margin-bottom: ${gutterWith}; margin-right: ${gutterWith};`;
+
+      if (Array.isArray(this.wrapStyle)) {
+        style = toObject(this.wrapStyle);
+        style.marginRight = style.marginBottom = gutterWith;
+      } else if (typeof this.wrapStyle === 'string') {
+        style += gutterStyle;
+      } else {
+        style = gutterStyle;
+      }
+    }
+    const view = h(this.tag, {
+      class: ['el-scrollbar__view', this.viewClass],
+      style: this.viewStyle,
+      ref: 'resize'
+    }, this.$slots.default);
+    const wrap = (
+      <div
+        ref="wrap"
+        style={ style }
+        onScroll={ this.handleScroll }
+        class={ [this.wrapClass, 'el-scrollbar__wrap', gutter ? '' : 'el-scrollbar__wrap--hidden-default'] }>
+        { [view] }
+      </div>
+    );
+    let nodes;
+
+    if (!this.native) {
+      nodes = ([
+        wrap,
+        <Bar
+          move={ this.moveX }
+          size={ this.sizeWidth }></Bar>,
+        <Bar
+          vertical
+          move={ this.moveY }
+          size={ this.sizeHeight }></Bar>
+      ]);
+    } else {
+      nodes = ([
+        <div
+          ref="wrap"
+          class={ [this.wrapClass, 'el-scrollbar__wrap'] }
+          style={ style }>
+          { [view] }
+        </div>
+      ]);
+    }
+    return h('div', { class: 'el-scrollbar' }, nodes);
+  },
+
+  methods: {
+    handleScroll() {
+      const wrap = this.wrap;
+
+      this.moveY = ((wrap.scrollTop * 100) / wrap.clientHeight);
+      this.moveX = ((wrap.scrollLeft * 100) / wrap.clientWidth);
+    },
+
+    update() {
+      let heightPercentage, widthPercentage;
+      const wrap = this.wrap;
+      if (!wrap) return;
+
+      heightPercentage = (wrap.clientHeight * 100 / wrap.scrollHeight);
+      widthPercentage = (wrap.clientWidth * 100 / wrap.scrollWidth);
+
+      this.sizeHeight = (heightPercentage < 100) ? (heightPercentage + '%') : '';
+      this.sizeWidth = (widthPercentage < 100) ? (widthPercentage + '%') : '';
+    }
+  },
+
+  mounted() {
+    if (this.native) return;
+    this.$nextTick(this.update);
+    !this.noresize && addResizeListener(this.$refs.resize, this.update);
+  },
+
+  beforeDestroy() {
+    if (this.native) return;
+    !this.noresize && removeResizeListener(this.$refs.resize, this.update);
+  }
+};

package/packages/select/src/option-group.vue

@@ -1,60 +1,60 @@
-<template>
-  <ul class="el-select-group__wrap" v-show="visible">
-    <li class="el-select-group__title">{{ label }}</li>
-    <li>
-      <ul class="el-select-group">
-        <slot></slot>
-      </ul>
-    </li>
-  </ul>
-</template>
-
-<script type="text/babel">
-  import Emitter from 'iov-design/src/mixins/emitter';
-
-  export default {
-    mixins: [Emitter],
-
-    name: 'ElOptionGroup',
-
-    componentName: 'ElOptionGroup',
-
-    props: {
-      label: String,
-      disabled: {
-        type: Boolean,
-        default: false
-      }
-    },
-
-    data() {
-      return {
-        visible: true
-      };
-    },
-
-    watch: {
-      disabled(val) {
-        this.broadcast('ElOption', 'handleGroupDisabled', val);
-      }
-    },
-
-    methods: {
-      queryChange() {
-        this.visible = this.$children &&
-          Array.isArray(this.$children) &&
-          this.$children.some(option => option.visible === true);
-      }
-    },
-
-    created() {
-      this.$on('queryChange', this.queryChange);
-    },
-
-    mounted() {
-      if (this.disabled) {
-        this.broadcast('ElOption', 'handleGroupDisabled', this.disabled);
-      }
-    }
-  };
-</script>
+<template>
+  <ul class="el-select-group__wrap" v-show="visible">
+    <li class="el-select-group__title">{{ label }}</li>
+    <li>
+      <ul class="el-select-group">
+        <slot></slot>
+      </ul>
+    </li>
+  </ul>
+</template>
+
+<script type="text/babel">
+  import Emitter from 'iov-design/src/mixins/emitter';
+
+  export default {
+    mixins: [Emitter],
+
+    name: 'ElOptionGroup',
+
+    componentName: 'ElOptionGroup',
+
+    props: {
+      label: String,
+      disabled: {
+        type: Boolean,
+        default: false
+      }
+    },
+
+    data() {
+      return {
+        visible: true
+      };
+    },
+
+    watch: {
+      disabled(val) {
+        this.broadcast('ElOption', 'handleGroupDisabled', val);
+      }
+    },
+
+    methods: {
+      queryChange() {
+        this.visible = this.$children &&
+          Array.isArray(this.$children) &&
+          this.$children.some(option => option.visible === true);
+      }
+    },
+
+    created() {
+      this.$on('queryChange', this.queryChange);
+    },
+
+    mounted() {
+      if (this.disabled) {
+        this.broadcast('ElOption', 'handleGroupDisabled', this.disabled);
+      }
+    }
+  };
+</script>