iov-design 2.15.60 → 2.15.61

package/packages/select/src/option.vue

@@ -1,171 +1,171 @@
-<template>
-  <li
-    @mouseenter="hoverItem"
-    @click.stop="selectOptionClick"
-    class="el-select-dropdown__item"
-    v-show="visible"
-    :class="{
-      'selected': itemSelected,
-      'is-disabled': disabled || groupDisabled || limitReached,
-      'hover': hover
-    }">
-    <slot>
-      <el-checkbox style="pointer-events: none;" v-if="this.select.multiple" :disabled="disabled" v-model="checked">{{ currentLabel }}</el-checkbox>
-      <span v-else>{{ currentLabel }}</span>
-    </slot>
-  </li>
-</template>
-
-<script type="text/babel">
-  import Emitter from 'iov-design/src/mixins/emitter';
-  import { getValueByPath, escapeRegexpString } from 'iov-design/src/utils/util';
-
-  export default {
-    mixins: [Emitter],
-
-    name: 'ElOption',
-
-    componentName: 'ElOption',
-
-    inject: ['select'],
-
-    props: {
-      value: {
-        required: true
-      },
-      label: [String, Number],
-      created: Boolean,
-      disabled: {
-        type: Boolean,
-        default: false
-      }
-    },
-
-    data() {
-      return {
-        index: -1,
-        groupDisabled: false,
-        visible: true,
-        hitState: false,
-        hover: false,
-        checked: false
-      };
-    },
-
-    computed: {
-      isObject() {
-        return Object.prototype.toString.call(this.value).toLowerCase() === '[object object]';
-      },
-
-      currentLabel() {
-        return this.label || (this.isObject ? '' : this.value);
-      },
-
-      currentValue() {
-        return this.value || this.label || '';
-      },
-
-      itemSelected() {
-        if (!this.select.multiple) {
-          return this.isEqual(this.value, this.select.value);
-        } else {
-          this.checked = this.contains(this.select.value, this.value);
-          return this.checked;
-        }
-      },
-
-      limitReached() {
-        if (this.select.multiple) {
-          return !this.itemSelected &&
-            (this.select.value || []).length >= this.select.multipleLimit &&
-            this.select.multipleLimit > 0;
-        } else {
-          return false;
-        }
-      }
-    },
-
-    watch: {
-      currentLabel() {
-        if (!this.created && !this.select.remote) this.dispatch('ElSelect', 'setSelected');
-      },
-      value(val, oldVal) {
-        const { remote, valueKey } = this.select;
-        if (!this.created && !remote) {
-          if (valueKey && typeof val === 'object' && typeof oldVal === 'object' && val[valueKey] === oldVal[valueKey]) {
-            return;
-          }
-          this.dispatch('ElSelect', 'setSelected');
-        }
-      }
-    },
-
-    methods: {
-      isEqual(a, b) {
-        if (!this.isObject) {
-          return a === b;
-        } else {
-          const valueKey = this.select.valueKey;
-          return getValueByPath(a, valueKey) === getValueByPath(b, valueKey);
-        }
-      },
-
-      contains(arr = [], target) {
-        if (!this.isObject) {
-          return arr && arr.indexOf(target) > -1;
-        } else {
-          const valueKey = this.select.valueKey;
-          return arr && arr.some(item => {
-            return getValueByPath(item, valueKey) === getValueByPath(target, valueKey);
-          });
-        }
-      },
-
-      handleGroupDisabled(val) {
-        this.groupDisabled = val;
-      },
-
-      hoverItem() {
-        if (!this.disabled && !this.groupDisabled) {
-          this.select.hoverIndex = this.select.options.indexOf(this);
-        }
-      },
-
-      selectOptionClick() {
-        if (this.disabled !== true && this.groupDisabled !== true) {
-          this.dispatch('ElSelect', 'handleOptionClick', [this, true]);
-        }
-      },
-
-      queryChange(query) {
-        this.visible = new RegExp(escapeRegexpString(query), 'i').test(this.currentLabel) || this.created;
-        if (!this.visible) {
-          this.select.filteredOptionsCount--;
-        }
-      }
-    },
-
-    created() {
-      this.select.options.push(this);
-      this.select.cachedOptions.push(this);
-      this.select.optionsCount++;
-      this.select.filteredOptionsCount++;
-
-      this.$on('queryChange', this.queryChange);
-      this.$on('handleGroupDisabled', this.handleGroupDisabled);
-    },
-
-    beforeDestroy() {
-      const { selected, multiple } = this.select;
-      let selectedOptions = multiple ? selected : [selected];
-      let index = this.select.cachedOptions.indexOf(this);
-      let selectedIndex = selectedOptions.indexOf(this);
-
-      // if option is not selected, remove it from cache
-      if (index > -1 && selectedIndex < 0) {
-        this.select.cachedOptions.splice(index, 1);
-      }
-      this.select.onOptionDestroy(this.select.options.indexOf(this));
-    }
-  };
-</script>
+<template>
+  <li
+    @mouseenter="hoverItem"
+    @click.stop="selectOptionClick"
+    class="el-select-dropdown__item"
+    v-show="visible"
+    :class="{
+      'selected': itemSelected,
+      'is-disabled': disabled || groupDisabled || limitReached,
+      'hover': hover
+    }">
+    <slot>
+      <el-checkbox style="pointer-events: none;" v-if="this.select.multiple" :disabled="disabled" v-model="checked">{{ currentLabel }}</el-checkbox>
+      <span v-else>{{ currentLabel }}</span>
+    </slot>
+  </li>
+</template>
+
+<script type="text/babel">
+  import Emitter from 'iov-design/src/mixins/emitter';
+  import { getValueByPath, escapeRegexpString } from 'iov-design/src/utils/util';
+
+  export default {
+    mixins: [Emitter],
+
+    name: 'ElOption',
+
+    componentName: 'ElOption',
+
+    inject: ['select'],
+
+    props: {
+      value: {
+        required: true
+      },
+      label: [String, Number],
+      created: Boolean,
+      disabled: {
+        type: Boolean,
+        default: false
+      }
+    },
+
+    data() {
+      return {
+        index: -1,
+        groupDisabled: false,
+        visible: true,
+        hitState: false,
+        hover: false,
+        checked: false
+      };
+    },
+
+    computed: {
+      isObject() {
+        return Object.prototype.toString.call(this.value).toLowerCase() === '[object object]';
+      },
+
+      currentLabel() {
+        return this.label || (this.isObject ? '' : this.value);
+      },
+
+      currentValue() {
+        return this.value || this.label || '';
+      },
+
+      itemSelected() {
+        if (!this.select.multiple) {
+          return this.isEqual(this.value, this.select.value);
+        } else {
+          this.checked = this.contains(this.select.value, this.value);
+          return this.checked;
+        }
+      },
+
+      limitReached() {
+        if (this.select.multiple) {
+          return !this.itemSelected &&
+            (this.select.value || []).length >= this.select.multipleLimit &&
+            this.select.multipleLimit > 0;
+        } else {
+          return false;
+        }
+      }
+    },
+
+    watch: {
+      currentLabel() {
+        if (!this.created && !this.select.remote) this.dispatch('ElSelect', 'setSelected');
+      },
+      value(val, oldVal) {
+        const { remote, valueKey } = this.select;
+        if (!this.created && !remote) {
+          if (valueKey && typeof val === 'object' && typeof oldVal === 'object' && val[valueKey] === oldVal[valueKey]) {
+            return;
+          }
+          this.dispatch('ElSelect', 'setSelected');
+        }
+      }
+    },
+
+    methods: {
+      isEqual(a, b) {
+        if (!this.isObject) {
+          return a === b;
+        } else {
+          const valueKey = this.select.valueKey;
+          return getValueByPath(a, valueKey) === getValueByPath(b, valueKey);
+        }
+      },
+
+      contains(arr = [], target) {
+        if (!this.isObject) {
+          return arr && arr.indexOf(target) > -1;
+        } else {
+          const valueKey = this.select.valueKey;
+          return arr && arr.some(item => {
+            return getValueByPath(item, valueKey) === getValueByPath(target, valueKey);
+          });
+        }
+      },
+
+      handleGroupDisabled(val) {
+        this.groupDisabled = val;
+      },
+
+      hoverItem() {
+        if (!this.disabled && !this.groupDisabled) {
+          this.select.hoverIndex = this.select.options.indexOf(this);
+        }
+      },
+
+      selectOptionClick() {
+        if (this.disabled !== true && this.groupDisabled !== true) {
+          this.dispatch('ElSelect', 'handleOptionClick', [this, true]);
+        }
+      },
+
+      queryChange(query) {
+        this.visible = new RegExp(escapeRegexpString(query), 'i').test(this.currentLabel) || this.created;
+        if (!this.visible) {
+          this.select.filteredOptionsCount--;
+        }
+      }
+    },
+
+    created() {
+      this.select.options.push(this);
+      this.select.cachedOptions.push(this);
+      this.select.optionsCount++;
+      this.select.filteredOptionsCount++;
+
+      this.$on('queryChange', this.queryChange);
+      this.$on('handleGroupDisabled', this.handleGroupDisabled);
+    },
+
+    beforeDestroy() {
+      const { selected, multiple } = this.select;
+      let selectedOptions = multiple ? selected : [selected];
+      let index = this.select.cachedOptions.indexOf(this);
+      let selectedIndex = selectedOptions.indexOf(this);
+
+      // if option is not selected, remove it from cache
+      if (index > -1 && selectedIndex < 0) {
+        this.select.cachedOptions.splice(index, 1);
+      }
+      this.select.onOptionDestroy(this.select.options.indexOf(this));
+    }
+  };
+</script>

package/packages/select/src/select-dropdown.vue

@@ -1,74 +1,74 @@
-<template>
-  <div
-    class="el-select-dropdown el-popper"
-    :class="[{ 'is-multiple': $parent.multiple }, popperClass]"
-    :style="{ minWidth: minWidth, maxWidth: minWidth }">
-    <slot></slot>
-  </div>
-</template>
-
-<script type="text/babel">
-  import Popper from 'iov-design/src/utils/vue-popper';
-
-  export default {
-    name: 'ElSelectDropdown',
-
-    componentName: 'ElSelectDropdown',
-
-    mixins: [Popper],
-
-    props: {
-      placement: {
-        default: 'bottom-start'
-      },
-
-      boundariesPadding: {
-        default: 0
-      },
-
-      popperOptions: {
-        default() {
-          return {
-            gpuAcceleration: false
-          };
-        }
-      },
-
-      visibleArrow: {
-        default: false
-      },
-
-      appendToBody: {
-        type: Boolean,
-        default: true
-      }
-    },
-
-    data() {
-      return {
-        minWidth: ''
-      };
-    },
-
-    computed: {
-      popperClass() {
-        return this.$parent.popperClass;
-      }
-    },
-
-    watch: {
-      '$parent.inputWidth'() {
-        this.minWidth = this.$parent.$el.getBoundingClientRect().width + 'px';
-      }
-    },
-
-    mounted() {
-      this.referenceElm = this.$parent.$refs.reference.$el;
-      this.$parent.popperElm = this.popperElm = this.$el;
-      this.$on('updatePopper', () => {
-        if (this.$parent.visible) this.updatePopper();
-      });
-      this.$on('destroyPopper', this.destroyPopper);
-    }
-  };
-</script>
+<template>
+  <div
+    class="el-select-dropdown el-popper"
+    :class="[{ 'is-multiple': $parent.multiple }, popperClass]"
+    :style="{ minWidth: minWidth, maxWidth: minWidth }">
+    <slot></slot>
+  </div>
+</template>
+
+<script type="text/babel">
+  import Popper from 'iov-design/src/utils/vue-popper';
+
+  export default {
+    name: 'ElSelectDropdown',
+
+    componentName: 'ElSelectDropdown',
+
+    mixins: [Popper],
+
+    props: {
+      placement: {
+        default: 'bottom-start'
+      },
+
+      boundariesPadding: {
+        default: 0
+      },
+
+      popperOptions: {
+        default() {
+          return {
+            gpuAcceleration: false
+          };
+        }
+      },
+
+      visibleArrow: {
+        default: false
+      },
+
+      appendToBody: {
+        type: Boolean,
+        default: true
+      }
+    },
+
+    data() {
+      return {
+        minWidth: ''
+      };
+    },
+
+    computed: {
+      popperClass() {
+        return this.$parent.popperClass;
+      }
+    },
+
+    watch: {
+      '$parent.inputWidth'() {
+        this.minWidth = this.$parent.$el.getBoundingClientRect().width + 'px';
+      }
+    },
+
+    mounted() {
+      this.referenceElm = this.$parent.$refs.reference.$el;
+      this.$parent.popperElm = this.popperElm = this.$el;
+      this.$on('updatePopper', () => {
+        if (this.$parent.visible) this.updatePopper();
+      });
+      this.$on('destroyPopper', this.destroyPopper);
+    }
+  };
+</script>