umy-ui-table 1.2.0

package/packages/button/src/button.vue

@@ -0,0 +1,166 @@
+<template>
+  <button
+    class="u-button"
+    :class="[
+      [`icon-${position}`],
+      typeStyle,
+      sizeStyle,
+      plainStyle,
+      dangerStyle,
+      dashedStyle,
+      loadingStyle,
+      circleStyle,
+    ]"
+    :disabled="disabled || loading"
+    ref="button"
+    :style="roundStyle"
+    @click="onClick"
+    @focus="focusOn"
+    @blur="blurIt"
+  >
+    <u-icon
+      :name="loading ? 'loading' : icon"
+      :color="color"
+      :style="disabledStyle"
+      v-if="icon || loading"
+      :class="{ loading: loading }"
+    >
+    </u-icon>
+    <span class="u-button-content" :style="disabledStyle">
+      <slot> </slot>
+    </span>
+  </button>
+</template>
+
+<script>
+import Icon from "../../icon/src/icon.vue";
+
+export default {
+  name: "u-button",
+  components: {
+    "u-icon": Icon,
+  },
+  methods: {
+    onClick() {
+      this.$emit("click");
+      this.dangerAnimation();
+    },
+    dangerAnimation() {
+      let arr = this.$refs.button.classList;
+      arr.remove("loop");
+      arr.add("loop");
+      setTimeout(() => {
+        arr.remove("loop");
+      }, 300);
+    },
+    focusOn() {},
+    blurIt() {},
+  },
+  computed: {
+    disabledStyle() {
+      if (this.disabled) return "pointer-events: none;";
+    },
+    typeStyle() {
+      if (!this.type) return;
+      return `type-${this.type}`;
+    },
+    sizeStyle() {
+      if (!this.size) return;
+      return `size-${this.size}`;
+    },
+    roundStyle() {
+      if (this.round) {
+        return "border-radius:21px;";
+      }
+    },
+    circleStyle() {
+      if (this.circle) {
+        return "circle";
+      }
+    },
+    plainStyle() {
+      if (this.plain) {
+        return "plain";
+      }
+    },
+    dangerStyle() {
+      if (this.danger) {
+        return "danger";
+      }
+    },
+    dashedStyle() {
+      if (this.dashed) {
+        return "dashed";
+      }
+    },
+    loadingStyle() {
+      if (this.loading) {
+        return "loadingCloak";
+      }
+    },
+  },
+  props: {
+    icon: {
+      type: String,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    type: {
+      type: String,
+      validator: (val) =>
+        ["primary", "success", "warn", "error", "info"].indexOf(val) > -1,
+    },
+    plain: {
+      type: Boolean,
+      default: false,
+    },
+    dashed: {
+      type: Boolean,
+      default: false,
+    },
+    size: {
+      type: String,
+      default: "medium",
+      validator(val) {
+        return ["big", "medium", "small", "mini"].indexOf(val) > -1;
+      },
+    },
+    round: {
+      type: Boolean,
+      default: false,
+    },
+    color: {
+      type: String,
+      default() {
+        if (this.type) {
+          return "white";
+        } else {
+          return "black";
+        }
+      },
+    },
+
+    loading: {
+      type: Boolean,
+      default: false,
+    },
+    danger: {
+      type: Boolean,
+      default: false,
+    },
+    position: {
+      type: String,
+      default: "left",
+      validator(value) {
+        return !(value !== "left" && value !== "right");
+      },
+    },
+    circle: {
+      type: Boolean,
+      default: false,
+    },
+  },
+};
+</script>

package/packages/checkbox/index.js

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

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

@@ -0,0 +1,199 @@
+<template>
+  <label
+    class="el-checkbox-button"
+      :class="[
+        size ? 'el-checkbox-button--' + size : '',
+        { 'is-disabled': isDisabled },
+        { 'is-checked': isChecked },
+        { 'is-focus': focus },
+      ]"
+    role="checkbox"
+    :aria-checked="isChecked"
+    :aria-disabled="isDisabled"
+    >
+    <input
+      v-if="trueLabel || falseLabel"
+      class="el-checkbox-button__original"
+      type="checkbox"
+      :name="name"
+      :disabled="isDisabled"
+      :true-value="trueLabel"
+      :false-value="falseLabel"
+      v-model="model"
+      @change="handleChange"
+      @focus="focus = true"
+      @blur="focus = false">
+    <input
+      v-else
+      class="el-checkbox-button__original"
+      type="checkbox"
+      :name="name"
+      :disabled="isDisabled"
+      :value="label"
+      v-model="model"
+      @change="handleChange"
+      @focus="focus = true"
+      @blur="focus = false">
+
+    <span class="el-checkbox-button__inner"
+      v-if="$slots.default || label"
+      :style="isChecked ? activeStyle : null">
+      <slot>{{label}}</slot>
+    </span>
+
+  </label>
+</template>
+<script>
+  import Emitter from '../../tools/mixins/emitter';
+
+  export default {
+    name: 'ElCheckboxButton',
+
+    mixins: [Emitter],
+
+    inject: {
+      elForm: {
+        default: ''
+      },
+      elFormItem: {
+        default: ''
+      }
+    },
+
+    data() {
+      return {
+        selfModel: false,
+        focus: false,
+        isLimitExceeded: false
+      };
+    },
+
+    props: {
+      value: {},
+      label: {},
+      disabled: Boolean,
+      checked: Boolean,
+      name: String,
+      trueLabel: [String, Number],
+      falseLabel: [String, Number]
+    },
+    computed: {
+      model: {
+        get() {
+          return this._checkboxGroup
+            ? this.store : this.value !== undefined
+              ? this.value : this.selfModel;
+        },
+
+        set(val) {
+          if (this._checkboxGroup) {
+            this.isLimitExceeded = false;
+            (this._checkboxGroup.min !== undefined &&
+              val.length < this._checkboxGroup.min &&
+              (this.isLimitExceeded = true));
+
+            (this._checkboxGroup.max !== undefined &&
+              val.length > this._checkboxGroup.max &&
+              (this.isLimitExceeded = true));
+
+            this.isLimitExceeded === false &&
+            this.dispatch('ElCheckboxGroup', 'input', [val]);
+          } else if (this.value !== undefined) {
+            this.$emit('input', val);
+          } else {
+            this.selfModel = val;
+          }
+        }
+      },
+
+      isChecked() {
+        if ({}.toString.call(this.model) === '[object Boolean]') {
+          return this.model;
+        } else if (Array.isArray(this.model)) {
+          return this.model.indexOf(this.label) > -1;
+        } else if (this.model !== null && this.model !== undefined) {
+          return this.model === this.trueLabel;
+        }
+      },
+
+      _checkboxGroup() {
+        let parent = this.$parent;
+        while (parent) {
+          if (parent.$options.componentName !== 'ElCheckboxGroup') {
+            parent = parent.$parent;
+          } else {
+            return parent;
+          }
+        }
+        return false;
+      },
+
+      store() {
+        return this._checkboxGroup ? this._checkboxGroup.value : this.value;
+      },
+
+      activeStyle() {
+        return {
+          backgroundColor: this._checkboxGroup.fill || '',
+          borderColor: this._checkboxGroup.fill || '',
+          color: this._checkboxGroup.textColor || '',
+          'box-shadow': '-1px 0 0 0 ' + this._checkboxGroup.fill
+
+        };
+      },
+
+      _elFormItemSize() {
+        return (this.elFormItem || {}).elFormItemSize;
+      },
+
+      size() {
+        return this._checkboxGroup.checkboxGroupSize || this._elFormItemSize || (this.$ELEMENT || {}).size;
+      },
+
+      /* used to make the isDisabled judgment under max/min props */
+      isLimitDisabled() {
+        const { max, min } = this._checkboxGroup;
+        return !!(max || min) &&
+          (this.model.length >= max && !this.isChecked) ||
+          (this.model.length <= min && this.isChecked);
+      },
+
+      isDisabled() {
+        return this._checkboxGroup
+          ? this._checkboxGroup.disabled || this.disabled || (this.elForm || {}).disabled || this.isLimitDisabled
+          : this.disabled || (this.elForm || {}).disabled;
+      }
+    },
+    methods: {
+      addToStore() {
+        if (
+          Array.isArray(this.model) &&
+          this.model.indexOf(this.label) === -1
+        ) {
+          this.model.push(this.label);
+        } else {
+          this.model = this.trueLabel || true;
+        }
+      },
+      handleChange(ev) {
+        if (this.isLimitExceeded) return;
+        let value;
+        if (ev.target.checked) {
+          value = this.trueLabel === undefined ? true : this.trueLabel;
+        } else {
+          value = this.falseLabel === undefined ? false : this.falseLabel;
+        }
+        this.$emit('change', value, ev);
+        this.$nextTick(() => {
+          if (this._checkboxGroup) {
+            this.dispatch('ElCheckboxGroup', 'change', [this._checkboxGroup.value]);
+          }
+        });
+      }
+    },
+
+    created() {
+      this.checked && this.addToStore();
+    }
+  };
+</script>

package/packages/checkbox/src/checkbox-group.vue

@@ -0,0 +1,48 @@
+<script>
+  import Emitter from '../../tools/mixins/emitter';
+
+  export default {
+    name: 'ElCheckboxGroup',
+
+    componentName: 'ElCheckboxGroup',
+
+    mixins: [Emitter],
+
+    inject: {
+      elFormItem: {
+        default: ''
+      }
+    },
+
+    props: {
+      value: {},
+      disabled: Boolean,
+      min: Number,
+      max: Number,
+      size: String,
+      fill: String,
+      textColor: String
+    },
+
+    computed: {
+      _elFormItemSize() {
+        return (this.elFormItem || {}).elFormItemSize;
+      },
+      checkboxGroupSize() {
+        return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;
+      }
+    },
+
+    watch: {
+      value(value) {
+        this.dispatch('ElFormItem', 'el.form.change', [value]);
+      }
+    }
+  };
+</script>
+
+<template>
+  <div class="el-checkbox-group" role="group" aria-label="checkbox-group">
+    <slot></slot>
+  </div>
+</template>

package/packages/checkbox/src/checkbox.vue

@@ -0,0 +1,222 @@
+<template>
+  <label
+    class="el-checkbox"
+    :class="[
+      border && checkboxSize ? 'el-checkbox--' + checkboxSize : '',
+      { 'is-disabled': isDisabled },
+      { 'is-bordered': border },
+      { 'is-checked': isChecked }
+    ]"
+    :id="id"
+  >
+    <span class="el-checkbox__input"
+      :class="{
+        'is-disabled': isDisabled,
+        'is-checked': isChecked,
+        'is-indeterminate': indeterminate,
+        'is-focus': focus
+      }"
+      :tabindex="indeterminate ? 0 : false"
+      :role="indeterminate ? 'checkbox' : false"
+      :aria-checked="indeterminate ? 'mixed' : false"
+    >
+      <span class="el-checkbox__inner"></span>
+      <input
+        v-if="trueLabel || falseLabel"
+        class="el-checkbox__original"
+        type="checkbox"
+        :aria-hidden="indeterminate ? 'true' : 'false'"
+        :name="name"
+        :disabled="isDisabled"
+        :true-value="trueLabel"
+        :false-value="falseLabel"
+        v-model="model"
+        @change="handleChange"
+        @focus="focus = true"
+        @blur="focus = false">
+      <input
+        v-else
+        class="el-checkbox__original"
+        type="checkbox"
+        :aria-hidden="indeterminate ? 'true' : 'false'"
+        :disabled="isDisabled"
+        :value="label"
+        :name="name"
+        v-model="model"
+        @change="handleChange"
+        @focus="focus = true"
+        @blur="focus = false">
+    </span>
+    <span class="el-checkbox__label" v-if="$slots.default || label">
+      <slot></slot>
+      <template v-if="!$slots.default">{{label}}</template>
+    </span>
+  </label>
+</template>
+<script>
+  import Emitter from '../../tools/mixins/emitter';
+
+  export default {
+    name: 'ElCheckbox',
+
+    mixins: [Emitter],
+
+    inject: {
+      elForm: {
+        default: ''
+      },
+      elFormItem: {
+        default: ''
+      }
+    },
+
+    componentName: 'ElCheckbox',
+
+    data() {
+      return {
+        selfModel: false,
+        focus: false,
+        isLimitExceeded: false
+      };
+    },
+
+    computed: {
+      model: {
+        get() {
+          return this.isGroup
+            ? this.store : this.value !== undefined
+              ? this.value : this.selfModel;
+        },
+
+        set(val) {
+          if (this.isGroup) {
+            this.isLimitExceeded = false;
+            (this._checkboxGroup.min !== undefined &&
+              val.length < this._checkboxGroup.min &&
+              (this.isLimitExceeded = true));
+
+            (this._checkboxGroup.max !== undefined &&
+              val.length > this._checkboxGroup.max &&
+              (this.isLimitExceeded = true));
+
+            this.isLimitExceeded === false &&
+            this.dispatch('ElCheckboxGroup', 'input', [val]);
+          } else {
+            this.$emit('input', val);
+            this.selfModel = val;
+          }
+        }
+      },
+
+      isChecked() {
+        if ({}.toString.call(this.model) === '[object Boolean]') {
+          return this.model;
+        } else if (Array.isArray(this.model)) {
+          return this.model.indexOf(this.label) > -1;
+        } else if (this.model !== null && this.model !== undefined) {
+          return this.model === this.trueLabel;
+        }
+      },
+
+      isGroup() {
+        let parent = this.$parent;
+        while (parent) {
+          if (parent.$options.componentName !== 'ElCheckboxGroup') {
+            parent = parent.$parent;
+          } else {
+            this._checkboxGroup = parent;
+            return true;
+          }
+        }
+        return false;
+      },
+
+      store() {
+        return this._checkboxGroup ? this._checkboxGroup.value : this.value;
+      },
+
+      /* used to make the isDisabled judgment under max/min props */
+      isLimitDisabled() {
+        const { max, min } = this._checkboxGroup;
+        return !!(max || min) &&
+          (this.model.length >= max && !this.isChecked) ||
+          (this.model.length <= min && this.isChecked);
+      },
+
+      isDisabled() {
+        return this.isGroup
+          ? this._checkboxGroup.disabled || this.disabled || (this.elForm || {}).disabled || this.isLimitDisabled
+          : this.disabled || (this.elForm || {}).disabled;
+      },
+
+      _elFormItemSize() {
+        return (this.elFormItem || {}).elFormItemSize;
+      },
+
+      checkboxSize() {
+        const temCheckboxSize = this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;
+        return this.isGroup
+          ? this._checkboxGroup.checkboxGroupSize || temCheckboxSize
+          : temCheckboxSize;
+      }
+    },
+
+    props: {
+      value: {},
+      label: {},
+      indeterminate: Boolean,
+      disabled: Boolean,
+      checked: Boolean,
+      name: String,
+      trueLabel: [String, Number],
+      falseLabel: [String, Number],
+      id: String, /* 当indeterminate为真时，为controls提供相关连的checkbox的id，表明元素间的控制关系*/
+      controls: String, /* 当indeterminate为真时，为controls提供相关连的checkbox的id，表明元素间的控制关系*/
+      border: Boolean,
+      size: String
+    },
+
+    methods: {
+      addToStore() {
+        if (
+          Array.isArray(this.model) &&
+          this.model.indexOf(this.label) === -1
+        ) {
+          this.model.push(this.label);
+        } else {
+          this.model = this.trueLabel || true;
+        }
+      },
+      handleChange(ev) {
+        if (this.isLimitExceeded) return;
+        let value;
+        if (ev.target.checked) {
+          value = this.trueLabel === undefined ? true : this.trueLabel;
+        } else {
+          value = this.falseLabel === undefined ? false : this.falseLabel;
+        }
+        this.$emit('change', value, ev);
+        this.$nextTick(() => {
+          if (this.isGroup) {
+            this.dispatch('ElCheckboxGroup', 'change', [this._checkboxGroup.value]);
+          }
+        });
+      }
+    },
+
+    created() {
+      this.checked && this.addToStore();
+    },
+    mounted() { // 为indeterminate元素 添加aria-controls 属性
+      if (this.indeterminate) {
+        this.$el.setAttribute('aria-controls', this.controls);
+      }
+    },
+
+    watch: {
+      value(value) {
+        this.dispatch('ElFormItem', 'el.form.change', value);
+      }
+    }
+  };
+</script>

package/packages/checkbox-button/index.js

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

package/packages/checkbox-group/index.js

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

package/packages/icon/index.js

@@ -0,0 +1,7 @@
+import UIcon from './src/icon.vue';
+
+UIcon.install = function(Vue) {
+    Vue.component(UIcon.name, UIcon);
+};
+
+export default UIcon

package/packages/icon/src/icon.vue

@@ -0,0 +1,40 @@
+<template>
+  <svg
+    class="u-icon"
+    @click="$emit('click', $event)"
+    :style="{ fill: `${color}`, fontSize: fontWidth }"
+    :class="{ loading: loading }"
+  >
+    <use :xlink:href="`#icon-${name}`"></use>
+  </svg>
+</template>
+
+<script>
+import "../../tools/utils/svg.js";
+import { isString, isNumber } from "../../tools/utils/types";
+
+export default {
+  name: "u-icon",
+  props: {
+    name,
+    fontSize: {
+      type: Number | String,
+      default: "1em ",
+    },
+    color: {
+      type: String,
+    },
+    loading: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  computed: {
+    fontWidth() {
+      if (isString(this.fontSize)) return this.fontSize;
+      if (isNumber(this.fontWidth)) return this.fontSize + "px";
+      return new Error("fontSize must be Number or String");
+    },
+  },
+};
+</script>