iov-design 2.15.60 → 2.15.62

package/packages/popconfirm/src/main.vue

@@ -1,104 +1,104 @@
-<template>
-  <el-popover
-    v-bind="$attrs"
-    v-model="visible"
-    trigger="click"
-  >
-  <div class="el-popconfirm">
-    <p class="el-popconfirm__main">
-    <i
-      v-if="!hideIcon"
-      :class="icon"
-      class="el-popconfirm__icon"
-      :style="{color: iconColor}"
-    ></i>
-      {{title}}
-    </p>
-    <div class="el-popconfirm__action">
-      <el-button
-        size="mini"
-        :type="cancelButtonType"
-        @click="cancel"
-      >
-        {{ displayCancelButtonText }}
-      </el-button>
-      <el-button
-        size="mini"
-        :type="confirmButtonType"
-        @click="confirm"
-      >
-        {{ displayConfirmButtonText }}
-      </el-button>
-    </div>
-  </div>
-  <slot name="reference" slot="reference"></slot>
-</el-popover>
-</template>
-
-<script>
-import ElPopover from 'iov-design/packages/popover';
-import ElButton from 'iov-design/packages/button';
-import {t} from 'iov-design/src/locale';
-
-export default {
-  name: 'ElPopconfirm',
-  props: {
-    title: {
-      type: String
-    },
-    confirmButtonText: {
-      type: String
-    },
-    cancelButtonText: {
-      type: String
-    },
-    confirmButtonType: {
-      type: String,
-      default: 'primary'
-    },
-    cancelButtonType: {
-      type: String,
-      default: 'text'
-    },
-    icon: {
-      type: String,
-      default: 'el-icon-question'
-    },
-    iconColor: {
-      type: String,
-      default: '#f90'
-    },
-    hideIcon: {
-      type: Boolean,
-      default: false
-    }
-  },
-  components: {
-    ElPopover,
-    ElButton
-  },
-  data() {
-    return {
-      visible: false
-    };
-  },
-  computed: {
-    displayConfirmButtonText() {
-      return this.confirmButtonText || t('el.popconfirm.confirmButtonText');
-    },
-    displayCancelButtonText() {
-      return this.cancelButtonText || t('el.popconfirm.cancelButtonText');
-    }
-  },
-  methods: {
-    confirm() {
-      this.visible = false;
-      this.$emit('confirm');
-    },
-    cancel() {
-      this.visible = false;
-      this.$emit('cancel');
-    }
-  }
-};
-</script>
+<template>
+  <el-popover
+    v-bind="$attrs"
+    v-model="visible"
+    trigger="click"
+  >
+  <div class="el-popconfirm">
+    <p class="el-popconfirm__main">
+    <i
+      v-if="!hideIcon"
+      :class="icon"
+      class="el-popconfirm__icon"
+      :style="{color: iconColor}"
+    ></i>
+      {{title}}
+    </p>
+    <div class="el-popconfirm__action">
+      <el-button
+        size="mini"
+        :type="cancelButtonType"
+        @click="cancel"
+      >
+        {{ displayCancelButtonText }}
+      </el-button>
+      <el-button
+        size="mini"
+        :type="confirmButtonType"
+        @click="confirm"
+      >
+        {{ displayConfirmButtonText }}
+      </el-button>
+    </div>
+  </div>
+  <slot name="reference" slot="reference"></slot>
+</el-popover>
+</template>
+
+<script>
+import ElPopover from 'iov-design/packages/popover';
+import ElButton from 'iov-design/packages/button';
+import {t} from 'iov-design/src/locale';
+
+export default {
+  name: 'ElPopconfirm',
+  props: {
+    title: {
+      type: String
+    },
+    confirmButtonText: {
+      type: String
+    },
+    cancelButtonText: {
+      type: String
+    },
+    confirmButtonType: {
+      type: String,
+      default: 'primary'
+    },
+    cancelButtonType: {
+      type: String,
+      default: 'text'
+    },
+    icon: {
+      type: String,
+      default: 'el-icon-question'
+    },
+    iconColor: {
+      type: String,
+      default: '#f90'
+    },
+    hideIcon: {
+      type: Boolean,
+      default: false
+    }
+  },
+  components: {
+    ElPopover,
+    ElButton
+  },
+  data() {
+    return {
+      visible: false
+    };
+  },
+  computed: {
+    displayConfirmButtonText() {
+      return this.confirmButtonText || t('el.popconfirm.confirmButtonText');
+    },
+    displayCancelButtonText() {
+      return this.cancelButtonText || t('el.popconfirm.cancelButtonText');
+    }
+  },
+  methods: {
+    confirm() {
+      this.visible = false;
+      this.$emit('confirm');
+    },
+    cancel() {
+      this.visible = false;
+      this.$emit('cancel');
+    }
+  }
+};
+</script>

package/packages/popover/src/main.vue

@@ -1,239 +1,239 @@
-<template>
-  <span>
-    <transition
-      :name="transition"
-      @after-enter="handleAfterEnter"
-      @after-leave="handleAfterLeave">
-      <div
-        class="el-popover el-popper"
-        :class="[popperClass, content && 'el-popover--plain']"
-        ref="popper"
-        v-show="!disabled && showPopper"
-        :style="{ width: width + 'px' }"
-        role="tooltip"
-        :id="tooltipId"
-        :aria-hidden="(disabled || !showPopper) ? 'true' : 'false'"
-      >
-        <div class="el-popover__title" v-if="title" v-text="title"></div>
-        <div class="el-popover__content">
-          <slot>{{ content }}</slot>
-        </div>
-      </div>
-    </transition>
-    <span class="el-popover__reference-wrapper" ref="wrapper" >
-      <slot name="reference"></slot>
-    </span>
-  </span>
-</template>
-<script>
-import Popper from 'iov-design/src/utils/vue-popper';
-import { on, off } from 'iov-design/src/utils/dom';
-import { addClass, removeClass } from 'iov-design/src/utils/dom';
-import { generateId } from 'iov-design/src/utils/util';
-
-export default {
-  name: 'ElPopover',
-
-  mixins: [Popper],
-
-  props: {
-    trigger: {
-      type: String,
-      default: 'click',
-      validator: value => ['click', 'focus', 'hover', 'manual'].indexOf(value) > -1
-    },
-    openDelay: {
-      type: Number,
-      default: 0
-    },
-    closeDelay: {
-      type: Number,
-      default: 200
-    },
-    title: String,
-    disabled: Boolean,
-    content: String,
-    reference: {},
-    popperClass: String,
-    width: {},
-    visibleArrow: {
-      default: true
-    },
-    arrowOffset: {
-      type: Number,
-      default: 0
-    },
-    transition: {
-      type: String,
-      default: 'fade-in-linear'
-    },
-    tabindex: {
-      type: Number,
-      default: 0
-    }
-  },
-
-  computed: {
-    tooltipId() {
-      return `el-popover-${generateId()}`;
-    }
-  },
-  watch: {
-    showPopper(val) {
-      if (this.disabled) {
-        return;
-      }
-      val ? this.$emit('show') : this.$emit('hide');
-    }
-  },
-
-  mounted() {
-    let reference = this.referenceElm = this.reference || this.$refs.reference;
-    const popper = this.popper || this.$refs.popper;
-
-    if (!reference && this.$refs.wrapper.children) {
-      reference = this.referenceElm = this.$refs.wrapper.children[0];
-    }
-    // 可访问性
-    if (reference) {
-      addClass(reference, 'el-popover__reference');
-      reference.setAttribute('aria-describedby', this.tooltipId);
-      reference.setAttribute('tabindex', this.tabindex); // tab序列
-      popper.setAttribute('tabindex', 0);
-
-      if (this.trigger !== 'click') {
-        on(reference, 'focusin', () => {
-          this.handleFocus();
-          const instance = reference.__vue__;
-          if (instance && typeof instance.focus === 'function') {
-            instance.focus();
-          }
-        });
-        on(popper, 'focusin', this.handleFocus);
-        on(reference, 'focusout', this.handleBlur);
-        on(popper, 'focusout', this.handleBlur);
-      }
-      on(reference, 'keydown', this.handleKeydown);
-      on(reference, 'click', this.handleClick);
-    }
-    if (this.trigger === 'click') {
-      on(reference, 'click', this.doToggle);
-      on(document, 'click', this.handleDocumentClick);
-    } else if (this.trigger === 'hover') {
-      on(reference, 'mouseenter', this.handleMouseEnter);
-      on(popper, 'mouseenter', this.handleMouseEnter);
-      on(reference, 'mouseleave', this.handleMouseLeave);
-      on(popper, 'mouseleave', this.handleMouseLeave);
-    } else if (this.trigger === 'focus') {
-      if (this.tabindex < 0) {
-        console.warn('[Element Warn][Popover]a negative taindex means that the element cannot be focused by tab key');
-      }
-      if (reference.querySelector('input, textarea')) {
-        on(reference, 'focusin', this.doShow);
-        on(reference, 'focusout', this.doClose);
-      } else {
-        on(reference, 'mousedown', this.doShow);
-        on(reference, 'mouseup', this.doClose);
-      }
-    }
-  },
-
-  beforeDestroy() {
-    this.cleanup();
-  },
-
-  deactivated() {
-    this.cleanup();
-  },
-
-  methods: {
-    doToggle() {
-      this.showPopper = !this.showPopper;
-    },
-    doShow() {
-      this.showPopper = true;
-    },
-    doClose() {
-      this.showPopper = false;
-    },
-    handleFocus() {
-      addClass(this.referenceElm, 'focusing');
-      if (this.trigger === 'click' || this.trigger === 'focus') this.showPopper = true;
-    },
-    handleClick() {
-      removeClass(this.referenceElm, 'focusing');
-    },
-    handleBlur() {
-      removeClass(this.referenceElm, 'focusing');
-      if (this.trigger === 'click' || this.trigger === 'focus') this.showPopper = false;
-    },
-    handleMouseEnter() {
-      clearTimeout(this._timer);
-      if (this.openDelay) {
-        this._timer = setTimeout(() => {
-          this.showPopper = true;
-        }, this.openDelay);
-      } else {
-        this.showPopper = true;
-      }
-    },
-    handleKeydown(ev) {
-      if (ev.keyCode === 27 && this.trigger !== 'manual') { // esc
-        this.doClose();
-      }
-    },
-    handleMouseLeave() {
-      clearTimeout(this._timer);
-      if (this.closeDelay) {
-        this._timer = setTimeout(() => {
-          this.showPopper = false;
-        }, this.closeDelay);
-      } else {
-        this.showPopper = false;
-      }
-    },
-    handleDocumentClick(e) {
-      let reference = this.reference || this.$refs.reference;
-      const popper = this.popper || this.$refs.popper;
-
-      if (!reference && this.$refs.wrapper.children) {
-        reference = this.referenceElm = this.$refs.wrapper.children[0];
-      }
-      if (!this.$el ||
-        !reference ||
-        this.$el.contains(e.target) ||
-        reference.contains(e.target) ||
-        !popper ||
-        popper.contains(e.target)) return;
-      this.showPopper = false;
-    },
-    handleAfterEnter() {
-      this.$emit('after-enter');
-    },
-    handleAfterLeave() {
-      this.$emit('after-leave');
-      this.doDestroy();
-    },
-    cleanup() {
-      if (this.openDelay || this.closeDelay) {
-        clearTimeout(this._timer);
-      }
-    }
-  },
-
-  destroyed() {
-    const reference = this.reference;
-
-    off(reference, 'click', this.doToggle);
-    off(reference, 'mouseup', this.doClose);
-    off(reference, 'mousedown', this.doShow);
-    off(reference, 'focusin', this.doShow);
-    off(reference, 'focusout', this.doClose);
-    off(reference, 'mousedown', this.doShow);
-    off(reference, 'mouseup', this.doClose);
-    off(reference, 'mouseleave', this.handleMouseLeave);
-    off(reference, 'mouseenter', this.handleMouseEnter);
-    off(document, 'click', this.handleDocumentClick);
-  }
-};
-</script>
+<template>
+  <span>
+    <transition
+      :name="transition"
+      @after-enter="handleAfterEnter"
+      @after-leave="handleAfterLeave">
+      <div
+        class="el-popover el-popper"
+        :class="[popperClass, content && 'el-popover--plain']"
+        ref="popper"
+        v-show="!disabled && showPopper"
+        :style="{ width: width + 'px' }"
+        role="tooltip"
+        :id="tooltipId"
+        :aria-hidden="(disabled || !showPopper) ? 'true' : 'false'"
+      >
+        <div class="el-popover__title" v-if="title" v-text="title"></div>
+        <div class="el-popover__content">
+          <slot>{{ content }}</slot>
+        </div>
+      </div>
+    </transition>
+    <span class="el-popover__reference-wrapper" ref="wrapper" >
+      <slot name="reference"></slot>
+    </span>
+  </span>
+</template>
+<script>
+import Popper from 'iov-design/src/utils/vue-popper';
+import { on, off } from 'iov-design/src/utils/dom';
+import { addClass, removeClass } from 'iov-design/src/utils/dom';
+import { generateId } from 'iov-design/src/utils/util';
+
+export default {
+  name: 'ElPopover',
+
+  mixins: [Popper],
+
+  props: {
+    trigger: {
+      type: String,
+      default: 'click',
+      validator: value => ['click', 'focus', 'hover', 'manual'].indexOf(value) > -1
+    },
+    openDelay: {
+      type: Number,
+      default: 0
+    },
+    closeDelay: {
+      type: Number,
+      default: 200
+    },
+    title: String,
+    disabled: Boolean,
+    content: String,
+    reference: {},
+    popperClass: String,
+    width: {},
+    visibleArrow: {
+      default: true
+    },
+    arrowOffset: {
+      type: Number,
+      default: 0
+    },
+    transition: {
+      type: String,
+      default: 'fade-in-linear'
+    },
+    tabindex: {
+      type: Number,
+      default: 0
+    }
+  },
+
+  computed: {
+    tooltipId() {
+      return `el-popover-${generateId()}`;
+    }
+  },
+  watch: {
+    showPopper(val) {
+      if (this.disabled) {
+        return;
+      }
+      val ? this.$emit('show') : this.$emit('hide');
+    }
+  },
+
+  mounted() {
+    let reference = this.referenceElm = this.reference || this.$refs.reference;
+    const popper = this.popper || this.$refs.popper;
+
+    if (!reference && this.$refs.wrapper.children) {
+      reference = this.referenceElm = this.$refs.wrapper.children[0];
+    }
+    // 可访问性
+    if (reference) {
+      addClass(reference, 'el-popover__reference');
+      reference.setAttribute('aria-describedby', this.tooltipId);
+      reference.setAttribute('tabindex', this.tabindex); // tab序列
+      popper.setAttribute('tabindex', 0);
+
+      if (this.trigger !== 'click') {
+        on(reference, 'focusin', () => {
+          this.handleFocus();
+          const instance = reference.__vue__;
+          if (instance && typeof instance.focus === 'function') {
+            instance.focus();
+          }
+        });
+        on(popper, 'focusin', this.handleFocus);
+        on(reference, 'focusout', this.handleBlur);
+        on(popper, 'focusout', this.handleBlur);
+      }
+      on(reference, 'keydown', this.handleKeydown);
+      on(reference, 'click', this.handleClick);
+    }
+    if (this.trigger === 'click') {
+      on(reference, 'click', this.doToggle);
+      on(document, 'click', this.handleDocumentClick);
+    } else if (this.trigger === 'hover') {
+      on(reference, 'mouseenter', this.handleMouseEnter);
+      on(popper, 'mouseenter', this.handleMouseEnter);
+      on(reference, 'mouseleave', this.handleMouseLeave);
+      on(popper, 'mouseleave', this.handleMouseLeave);
+    } else if (this.trigger === 'focus') {
+      if (this.tabindex < 0) {
+        console.warn('[Element Warn][Popover]a negative taindex means that the element cannot be focused by tab key');
+      }
+      if (reference.querySelector('input, textarea')) {
+        on(reference, 'focusin', this.doShow);
+        on(reference, 'focusout', this.doClose);
+      } else {
+        on(reference, 'mousedown', this.doShow);
+        on(reference, 'mouseup', this.doClose);
+      }
+    }
+  },
+
+  beforeDestroy() {
+    this.cleanup();
+  },
+
+  deactivated() {
+    this.cleanup();
+  },
+
+  methods: {
+    doToggle() {
+      this.showPopper = !this.showPopper;
+    },
+    doShow() {
+      this.showPopper = true;
+    },
+    doClose() {
+      this.showPopper = false;
+    },
+    handleFocus() {
+      addClass(this.referenceElm, 'focusing');
+      if (this.trigger === 'click' || this.trigger === 'focus') this.showPopper = true;
+    },
+    handleClick() {
+      removeClass(this.referenceElm, 'focusing');
+    },
+    handleBlur() {
+      removeClass(this.referenceElm, 'focusing');
+      if (this.trigger === 'click' || this.trigger === 'focus') this.showPopper = false;
+    },
+    handleMouseEnter() {
+      clearTimeout(this._timer);
+      if (this.openDelay) {
+        this._timer = setTimeout(() => {
+          this.showPopper = true;
+        }, this.openDelay);
+      } else {
+        this.showPopper = true;
+      }
+    },
+    handleKeydown(ev) {
+      if (ev.keyCode === 27 && this.trigger !== 'manual') { // esc
+        this.doClose();
+      }
+    },
+    handleMouseLeave() {
+      clearTimeout(this._timer);
+      if (this.closeDelay) {
+        this._timer = setTimeout(() => {
+          this.showPopper = false;
+        }, this.closeDelay);
+      } else {
+        this.showPopper = false;
+      }
+    },
+    handleDocumentClick(e) {
+      let reference = this.reference || this.$refs.reference;
+      const popper = this.popper || this.$refs.popper;
+
+      if (!reference && this.$refs.wrapper.children) {
+        reference = this.referenceElm = this.$refs.wrapper.children[0];
+      }
+      if (!this.$el ||
+        !reference ||
+        this.$el.contains(e.target) ||
+        reference.contains(e.target) ||
+        !popper ||
+        popper.contains(e.target)) return;
+      this.showPopper = false;
+    },
+    handleAfterEnter() {
+      this.$emit('after-enter');
+    },
+    handleAfterLeave() {
+      this.$emit('after-leave');
+      this.doDestroy();
+    },
+    cleanup() {
+      if (this.openDelay || this.closeDelay) {
+        clearTimeout(this._timer);
+      }
+    }
+  },
+
+  destroyed() {
+    const reference = this.reference;
+
+    off(reference, 'click', this.doToggle);
+    off(reference, 'mouseup', this.doClose);
+    off(reference, 'mousedown', this.doShow);
+    off(reference, 'focusin', this.doShow);
+    off(reference, 'focusout', this.doClose);
+    off(reference, 'mousedown', this.doShow);
+    off(reference, 'mouseup', this.doClose);
+    off(reference, 'mouseleave', this.handleMouseLeave);
+    off(reference, 'mouseenter', this.handleMouseEnter);
+    off(document, 'click', this.handleDocumentClick);
+  }
+};
+</script>