rw-admin-ui 1.0.0

package/packages/popover/src/main.vue

@@ -0,0 +1,242 @@
+<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>
+        <slot>{{ content }}</slot>
+      </div>
+    </transition>
+    <span class="el-popover__reference-wrapper" ref="wrapper" >
+      <slot name="reference"></slot>
+    </span>
+  </span>
+</template>
+<script>
+import Popper from 'rowinself-ui/src/utils/vue-popper';
+import { on, off } from 'rowinself-ui/src/utils/dom';
+import { addClass, removeClass } from 'rowinself-ui/src/utils/dom';
+import { generateId } from 'rowinself-ui/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: {
+      type: [Object, Element]
+    },
+    popperClass: String,
+    width: {
+      type: [String, Number]
+    },
+    visibleArrow: {
+      type: Boolean,
+      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();
+  },
+
+  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);
+  },
+
+  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);
+      }
+    }
+  },
+};
+</script>

package/packages/progress/index.js

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

package/packages/progress/src/progress.vue

@@ -0,0 +1,235 @@
+<template>
+  <div
+    class="el-progress"
+    :class="[
+      'el-progress--' + type,
+      status ? 'is-' + status : '',
+      {
+        'el-progress--without-text': !showText,
+        'el-progress--text-inside': textInside,
+      }
+    ]"
+    role="progressbar"
+    :aria-valuenow="percentage"
+    aria-valuemin="0"
+    aria-valuemax="100"
+  >
+    <div class="el-progress-bar" v-if="type === 'line'">
+      <div class="el-progress-bar__outer" :style="{height: strokeWidth + 'px', backgroundColor:defineBackColor}">
+        <div class="el-progress-bar__inner" :style="barStyle">
+          <div class="el-progress-bar__innerText" :style="{color:textColor}" v-if="showText && textInside">{{ content }}</div>
+        </div>
+      </div>
+    </div>
+    <div class="el-progress-circle" :style="{height: width + 'px', width: width + 'px'}" v-else>
+      <svg viewBox="0 0 100 100">
+        <path
+          class="el-progress-circle__track"
+          :d="trackPath"
+          :stroke="defineBackColor"
+          :stroke-width="relativeStrokeWidth"
+          fill="none"
+          :style="trailPathStyle"/>
+        <path
+          class="el-progress-circle__path"
+          :d="trackPath"
+          :stroke="stroke"
+          fill="none"
+          :stroke-linecap="strokeLinecap"
+          :stroke-width="percentage ? relativeStrokeWidth : 0"
+          :style="circlePathStyle"/>
+      </svg>
+    </div>
+    <div
+      class="el-progress__text"
+      v-if="showText && !textInside"
+      :style="{fontSize: progressTextSize + 'px', color:textColor}"
+    >
+      <template v-if="!status">{{ content }}</template>
+      <i v-else :class="iconClass"></i>
+    </div>
+  </div>
+</template>
+<script>
+  export default {
+    name: 'ElProgress',
+    props: {
+      type: {
+        type: String,
+        default: 'line',
+        validator: val => ['line', 'circle', 'dashboard'].indexOf(val) > -1
+      },
+      percentage: {
+        type: Number,
+        default: 0,
+        required: true,
+        validator: val => val >= 0 && val <= 100
+      },
+      status: {
+        type: String,
+        validator: val => ['success', 'exception', 'warning'].indexOf(val) > -1
+      },
+      strokeWidth: {
+        type: Number,
+        default: 6
+      },
+      strokeLinecap: {
+        type: String,
+        default: 'round'
+      },
+      textInside: {
+        type: Boolean,
+        default: false
+      },
+      width: {
+        type: Number,
+        default: 126
+      },
+      showText: {
+        type: Boolean,
+        default: true
+      },
+      color: {
+        type: [String, Array, Function],
+        default: ''
+      },
+      defineBackColor: {
+        type: [String, Array, Function],
+        default: '#ebeef5'
+      },
+      textColor: {
+        type: [String, Array, Function],
+        default: '#606266'
+      },
+      format: Function
+    },
+    computed: {
+      barStyle() {
+        const style = {};
+        style.width = this.percentage + '%';
+        style.backgroundColor = this.getCurrentColor(this.percentage);
+        return style;
+      },
+      relativeStrokeWidth() {
+        return (this.strokeWidth / this.width * 100).toFixed(1);
+      },
+      radius() {
+        if (this.type === 'circle' || this.type === 'dashboard') {
+          return parseInt(50 - parseFloat(this.relativeStrokeWidth) / 2, 10);
+        } else {
+          return 0;
+        }
+      },
+      trackPath() {
+        const radius = this.radius;
+        const isDashboard = this.type === 'dashboard';
+        return `
+          M 50 50
+          m 0 ${isDashboard ? '' : '-'}${radius}
+          a ${radius} ${radius} 0 1 1 0 ${isDashboard ? '-' : ''}${radius * 2}
+          a ${radius} ${radius} 0 1 1 0 ${isDashboard ? '' : '-'}${radius * 2}
+          `;
+      },
+      perimeter() {
+        return 2 * Math.PI * this.radius;
+      },
+      rate() {
+        return this.type === 'dashboard' ? 0.75 : 1;
+      },
+      strokeDashoffset() {
+        const offset = -1 * this.perimeter * (1 - this.rate) / 2;
+        return `${offset}px`;
+      },
+      trailPathStyle() {
+        return {
+          strokeDasharray: `${(this.perimeter * this.rate)}px, ${this.perimeter}px`,
+          strokeDashoffset: this.strokeDashoffset
+        };
+      },
+      circlePathStyle() {
+        return {
+          strokeDasharray: `${this.perimeter * this.rate * (this.percentage / 100) }px, ${this.perimeter}px`,
+          strokeDashoffset: this.strokeDashoffset,
+          transition: 'stroke-dasharray 0.6s ease 0s, stroke 0.6s ease'
+        };
+      },
+      stroke() {
+        let ret;
+        if (this.color) {
+          ret = this.getCurrentColor(this.percentage);
+        } else {
+          switch (this.status) {
+            case 'success':
+              ret = '#13ce66';
+              break;
+            case 'exception':
+              ret = '#ff4949';
+              break;
+            case 'warning':
+              ret = '#e6a23c';
+              break;
+            default:
+              ret = '#20a0ff';
+          }
+        }
+        return ret;
+      },
+      iconClass() {
+        if (this.status === 'warning') {
+          return 'el-icon-warning';
+        }
+        if (this.type === 'line') {
+          return this.status === 'success' ? 'el-icon-circle-check' : 'el-icon-circle-close';
+        } else {
+          return this.status === 'success' ? 'el-icon-check' : 'el-icon-close';
+        }
+      },
+      progressTextSize() {
+        return this.type === 'line'
+          ? 12 + this.strokeWidth * 0.4
+          : this.width * 0.111111 + 2 ;
+      },
+      content() {
+        if (typeof this.format === 'function') {
+          return this.format(this.percentage) || '';
+        } else {
+          return `${this.percentage}%`;
+        }
+      }
+    },
+    methods: {
+      getCurrentColor(percentage) {
+        if (typeof this.color === 'function') {
+          return this.color(percentage);
+        } else if (typeof this.color === 'string') {
+          return this.color;
+        } else {
+          return this.getLevelColor(percentage);
+        }
+      },
+      getLevelColor(percentage) {
+        const colorArray = this.getColorArray().sort((a, b) => a.percentage - b.percentage);
+
+        for (let i = 0; i < colorArray.length; i++) {
+          if (colorArray[i].percentage > percentage) {
+            return colorArray[i].color;
+          }
+        }
+        return colorArray[colorArray.length - 1].color;
+      },
+      getColorArray() {
+        const color = this.color;
+        const span = 100 / color.length;
+        return color.map((seriesColor, index) => {
+          if (typeof seriesColor === 'string') {
+            return {
+              color: seriesColor,
+              percentage: (index + 1) * span
+            };
+          }
+          return seriesColor;
+        });
+      }
+    }
+  };
+</script>

package/packages/radio/index.js

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

package/packages/radio/src/radio-button.vue

@@ -0,0 +1,118 @@
+<template>
+  <label
+    class="el-radio-button"
+    :class="[
+      size ? 'el-radio-button--' + size : '',
+      { 'is-active': value === label },
+      { 'is-disabled': isDisabled },
+      { 'is-focus': focus }
+    ]"
+    role="radio"
+    :aria-checked="value === label"
+    :aria-disabled="isDisabled"
+    :tabindex="tabIndex"
+    @keydown.space.stop.prevent="value = isDisabled ? value : label"
+  >
+    <input
+      class="el-radio-button__orig-radio"
+      :value="label"
+      type="radio"
+      v-model="value"
+      :name="name"
+      @change="handleChange"
+      :disabled="isDisabled"
+      tabindex="-1"
+      @focus="focus = true"
+      @blur="focus = false"
+      autocomplete="off"
+    />
+    <span
+      class="el-radio-button__inner"
+      :style="value === label ? activeStyle : null"
+      @keydown.stop>
+      <slot></slot>
+      <template v-if="!$slots.default">{{ label }}</template>
+    </span>
+  </label>
+</template>
+<script>
+  import Emitter from 'rowinself-ui/src/mixins/emitter';
+
+  export default {
+    name: 'ElRadioButton',
+
+    mixins: [Emitter],
+
+    inject: {
+      elForm: {
+        default: ''
+      },
+      elFormItem: {
+        default: ''
+      }
+    },
+
+    props: {
+      label: {
+        required: true,
+        type: [String, Number, Boolean]
+      },
+      disabled: Boolean,
+      name: String
+    },
+    data() {
+      return {
+        focus: false
+      };
+    },
+    computed: {
+      value: {
+        get() {
+          return this._radioGroup.value;
+        },
+        set(value) {
+          this._radioGroup.$emit('input', value);
+        }
+      },
+      _radioGroup() {
+        let parent = this.$parent;
+        while (parent) {
+          if (parent.$options.componentName !== 'ElRadioGroup') {
+            parent = parent.$parent;
+          } else {
+            return parent;
+          }
+        }
+        return false;
+      },
+      activeStyle() {
+        return {
+          backgroundColor: this._radioGroup.fill || '',
+          borderColor: this._radioGroup.fill || '',
+          boxShadow: this._radioGroup.fill ? `-1px 0 0 0 ${this._radioGroup.fill}` : '',
+          color: this._radioGroup.textColor || ''
+        };
+      },
+      _elFormItemSize() {
+        return (this.elFormItem || {}).elFormItemSize;
+      },
+      size() {
+        return this._radioGroup.radioGroupSize || this._elFormItemSize || (this.$ELEMENT || {}).size;
+      },
+      isDisabled() {
+        return this.disabled || this._radioGroup.disabled || (this.elForm || {}).disabled;
+      },
+      tabIndex() {
+        return (this.isDisabled || (this._radioGroup && this.value !== this.label)) ? -1 : 0;
+      }
+    },
+
+    methods: {
+      handleChange() {
+        this.$nextTick(() => {
+          this.dispatch('ElRadioGroup', 'handleChange', this.value);
+        });
+      }
+    }
+  };
+</script>