misp-ui-library-test 0.0.1

package/src/packages/chart/src/utils.js

@@ -0,0 +1,21 @@
+/**
+ * 默认色卡（15色）
+ * @type {string[]}
+ */
+export const defaultColorCard = [
+  'yellow-4',
+  'blue-4', 
+  'green-4',
+  'orange-4',
+  'aquamarine-4',
+  'blue-2',
+  'yellow-2',
+  'purple-3',
+  'red-4',
+  'green-2',
+  'orange-2',
+  'purple-5',
+  'aquamarine-2',
+  'blue-5',
+  'red-2'
+]

package/src/packages/checkbox/index.js

@@ -0,0 +1,44 @@
+/**
+ * Checkbox 复选框组件
+ */
+
+import UiCheckbox from './src/main.vue'
+
+// 复选框组组件
+export const CheckboxGroup = {
+  ...UiCheckbox,
+  name: 'UiCheckboxGroup',
+  componentName: 'UiCheckboxGroup',
+  props: {
+    ...UiCheckbox.props,
+    isGroup: {
+      type: Boolean,
+      default: true
+    }
+  }
+}
+
+// 复选框按钮组件
+export const CheckboxButton = {
+  ...UiCheckbox,
+  name: 'UiCheckboxButton',
+  props: {
+    ...UiCheckbox.props,
+    isButton: {
+      type: Boolean,
+      default: true
+    }
+  }
+}
+
+UiCheckbox.Group = CheckboxGroup
+UiCheckbox.Button = CheckboxButton
+
+// 自动安装
+UiCheckbox.install = function(Vue) {
+  Vue.component(UiCheckbox.name, UiCheckbox)
+  Vue.component('UiCheckboxGroup', CheckboxGroup)
+  Vue.component('UiCheckboxButton', CheckboxButton)
+}
+
+export default UiCheckbox

package/src/packages/checkbox/src/main.vue

@@ -0,0 +1,312 @@
+<template>
+  <div
+    v-if="isGroup"
+    class="ui-checkbox-group"
+    role="group"
+    aria-label="checkbox-group"
+  >
+  >
+    <template v-if="options && options.length">
+      <ui-checkbox
+        v-for="item in options"
+        :key="item.value"
+        :label="item.value"
+        :is-button="isButton"
+        :disabled="item.disabled"
+      >
+        {{ item.label }}
+      </ui-checkbox>
+    </template>
+    <slot v-else></slot>
+  </div>
+  <label
+    v-else-if="isButton"
+    class="ui-checkbox-button"
+    :class="[
+      checkboxSize ? 'ui-checkbox-button--' + checkboxSize : '',
+      { 'is-checked': isChecked },
+      { 'is-disabled': isDisabled },
+      { 'is-focus': focus }
+    ]"
+  >
+    <input
+      class="ui-checkbox-button__original"
+      type="checkbox"
+      :value="label"
+      v-model="model"
+      :name="name"
+      @change="handleChange"
+      :disabled="isDisabled"
+      tabindex="-1"
+      @focus="focus = true"
+      @blur="focus = false"
+      autocomplete="off"
+    >
+    <span
+      class="ui-checkbox-button__inner"
+      :style="isChecked ? activeStyle : null"
+      @keydown.stop>
+      <slot></slot>
+      <template v-if="!$slots.default">{{label}}</template>
+    </span>
+  </label>
+  <label
+    v-else
+    class="ui-checkbox"
+    :class="[
+      border && checkboxSize ? 'ui-checkbox--' + checkboxSize : '',
+      { 'is-disabled': isDisabled },
+      { 'is-bordered': border },
+      { 'is-checked': isChecked }
+    ]"
+    :id="id"
+  >
+    <span class="ui-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="ui-checkbox__inner"></span>
+      <input
+        v-if="trueLabel || falseLabel"
+        class="ui-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="ui-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="ui-checkbox__label" v-if="$slots.default || label">
+      <slot></slot>
+      <template v-if="!$slots.default">{{label}}</template>
+    </span>
+  </label>
+</template>
+
+<script>
+import emitter from '../../../mixins/emitter';
+
+export default {
+  name: 'UiCheckbox',
+
+  componentName: 'UiCheckbox',
+
+  mixins: [emitter],
+
+  inject: {
+    elForm: {
+      default: ''
+    },
+    elFormItem: {
+      default: ''
+    }
+  },
+
+  props: {
+    value: {},
+    label: {},
+    indeterminate: Boolean,
+    disabled: Boolean,
+    checked: Boolean,
+    name: String,
+    trueLabel: [String, Number],
+    falseLabel: [String, Number],
+    id: String,
+    controls: String,
+    border: Boolean,
+    size: String,
+    // Group props
+    isGroup: Boolean,
+    min: Number,
+    max: Number,
+    fill: String,
+    textColor: String,
+    // Button props
+    isButton: Boolean,
+    // Options
+    options: Array
+  },
+
+  data() {
+    return {
+      selfModel: false,
+      focus: false,
+      isLimitExceeded: false
+    };
+  },
+
+  computed: {
+    model: {
+      get() {
+        if (this.isGroup) {
+          return this.value;
+        }
+        return this.isInsideGroup
+          ? this.store : this.value !== undefined
+            ? this.value : this.selfModel;
+      },
+
+      set(val) {
+        if (this.isGroup) {
+          this.$emit('input', val);
+        } else if (this.isInsideGroup) {
+          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('UiCheckboxGroup', '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;
+      }
+      return false;
+    },
+
+    isInsideGroup() {
+      let parent = this.$parent;
+      while (parent) {
+        if (parent.$options.componentName !== 'UiCheckboxGroup') {
+          parent = parent.$parent;
+        } else {
+          this._checkboxGroup = parent;
+          return true;
+        }
+      }
+      return false;
+    },
+
+    store() {
+      return this._checkboxGroup ? this._checkboxGroup.value : this.value;
+    },
+
+    isLimitDisabled() {
+      if (!this.isInsideGroup) return false;
+      const { max, min } = this._checkboxGroup;
+      return !!(max || min) &&
+        (this.model.length >= max && !this.isChecked) ||
+        (this.model.length <= min && this.isChecked);
+    },
+
+    isDisabled() {
+      const disabled = this.disabled || (this.elForm || {}).disabled;
+      return this.isInsideGroup
+        ? this._checkboxGroup.disabled || disabled || this.isLimitDisabled
+        : disabled;
+    },
+
+    _elFormItemSize() {
+      return (this.elFormItem || {}).elFormItemSize;
+    },
+
+    checkboxSize() {
+      const temCheckboxSize = this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;
+      return this.isInsideGroup
+        ? this._checkboxGroup.checkboxGroupSize || temCheckboxSize
+        : temCheckboxSize;
+    },
+    checkboxGroupSize() {
+      return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;
+    },
+
+    activeStyle() {
+      if (!this.isInsideGroup || !this.isButton) return {};
+      return {
+        backgroundColor: this._checkboxGroup.fill || '',
+        borderColor: this._checkboxGroup.fill || '',
+        boxShadow: this._checkboxGroup.fill ? `-1px 0 0 0 ${this._checkboxGroup.fill}` : '',
+        color: this._checkboxGroup.textColor || ''
+      };
+    }
+  },
+
+  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.isInsideGroup) {
+          this.dispatch('UiCheckboxGroup', 'change', [this._checkboxGroup.value]);
+        }
+      });
+    }
+  },
+
+  created() {
+    if (this.isGroup) {
+      this.$on('input', value => {
+        this.$emit('input', value);
+      });
+    } else {
+      this.checked && this.addToStore();
+    }
+  },
+
+  mounted() {
+    if (this.indeterminate) {
+      this.$el.setAttribute('aria-controls', this.controls);
+    }
+  },
+
+  watch: {
+    value(value) {
+      this.dispatch('UiFormItem', 'ui.form.change', [value]);
+    }
+  }
+};
+</script>

package/src/packages/col/index.js

@@ -0,0 +1,12 @@
+/**
+ * Col 栅格列组件
+ */
+
+import UiCol from './src/main.vue'
+
+// 自动安装
+UiCol.install = function(Vue) {
+  Vue.component(UiCol.name, UiCol)
+}
+
+export default UiCol

package/src/packages/col/src/main.vue

@@ -0,0 +1,85 @@
+<template>
+  <component
+    :is="tag"
+    class="ui-col"
+    :class="classList"
+    :style="style"
+  >
+    <slot></slot>
+  </component>
+</template>
+
+<script>
+export default {
+  name: 'UiCol',
+
+  props: {
+    span: {
+      type: Number,
+      default: 24
+    },
+    tag: {
+      type: String,
+      default: 'div'
+    },
+    offset: Number,
+    pull: Number,
+    push: Number,
+    xs: [Number, Object],
+    sm: [Number, Object],
+    md: [Number, Object],
+    lg: [Number, Object],
+    xl: [Number, Object]
+  },
+
+  computed: {
+    gutter() {
+      let parent = this.$parent;
+      while (parent && parent.$options.componentName !== 'UiRow') {
+        parent = parent.$parent;
+      }
+      return parent ? parent.gutter : 0;
+    },
+
+    style() {
+      const ret = {};
+      if (this.gutter) {
+        ret.paddingLeft = this.gutter / 2 + 'px';
+        ret.paddingRight = ret.paddingLeft;
+      }
+      return ret;
+    },
+
+    classList() {
+      let classList = [];
+
+      ['span', 'offset', 'pull', 'push'].forEach(prop => {
+        if (this[prop] || this[prop] === 0) {
+          classList.push(
+            prop !== 'span'
+              ? `ui-col-${prop}-${this[prop]}`
+              : `ui-col-${this[prop]}`
+          );
+        }
+      });
+
+      ['xs', 'sm', 'md', 'lg', 'xl'].forEach(size => {
+        if (typeof this[size] === 'number') {
+          classList.push(`ui-col-${size}-${this[size]}`);
+        } else if (typeof this[size] === 'object') {
+          let props = this[size];
+          Object.keys(props).forEach(prop => {
+            classList.push(
+              prop !== 'span'
+                ? `ui-col-${size}-${prop}-${props[prop]}`
+                : `ui-col-${size}-${props[prop]}`
+            );
+          });
+        }
+      });
+
+      return ['ui-col', ...classList];
+    }
+  }
+};
+</script>

package/src/packages/collapse/index.js

@@ -0,0 +1,12 @@
+/**
+ * Collapse 组件
+ */
+
+import UiCollapse from './src/main.vue'
+
+// 自动安装
+UiCollapse.install = function(Vue) {
+  Vue.component(UiCollapse.name, UiCollapse)
+}
+
+export default UiCollapse

package/src/packages/collapse/src/main.vue

@@ -0,0 +1,69 @@
+<template>
+  <div class="ui-collapse" :class="{ 'ui-collapse--accordion': accordion }" role="tablist">
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'UiCollapse',
+
+  componentName: 'UiCollapse',
+
+  props: {
+    value: {},
+    accordion: Boolean
+  },
+
+  data() {
+    return {
+      items: []
+    };
+  },
+
+  watch: {
+    value() {
+      this.setActiveItem();
+    }
+  },
+
+  provide() {
+    return {
+      collapse: this
+    };
+  },
+
+  methods: {
+    setActiveItem() {
+      const activeItem = [].concat(this.value);
+      this.items.forEach(item => {
+        item.isActive = activeItem.indexOf(item.name) > -1;
+      });
+    },
+    handleItemClick(item) {
+      if (this.accordion) {
+        this.items.forEach(otherItem => {
+          if (otherItem !== item && otherItem.isActive) {
+            otherItem.handleItemClick();
+          }
+        });
+      }
+
+      item.isActive = !item.isActive;
+      const activeItems = this.items.filter(i => i.isActive).map(i => i.name);
+
+      if (this.accordion) {
+        this.$emit('input', item.isActive ? item.name : '');
+        this.$emit('change', item.isActive ? item.name : '');
+      } else {
+        this.$emit('input', activeItems);
+        this.$emit('change', activeItems);
+      }
+    }
+  },
+
+  mounted() {
+    this.setActiveItem();
+  }
+};
+</script>

package/src/packages/collapse-item/index.js

@@ -0,0 +1,12 @@
+/**
+ * CollapseItem 组件
+ */
+
+import UiCollapseItem from './src/main.vue'
+
+// 自动安装
+UiCollapseItem.install = function(Vue) {
+  Vue.component(UiCollapseItem.name, UiCollapseItem)
+}
+
+export default UiCollapseItem

package/src/packages/collapse-item/src/main.vue

@@ -0,0 +1,75 @@
+<template>
+  <div class="ui-collapse-item" :class="{ 'is-active': isActive }" role="tabpanel">
+    <div
+      class="ui-collapse-item__header"
+      role="tab"
+      :aria-expanded="isActive"
+      @click="handleItemClick"
+    >
+      <slot name="title">{{ title }}</slot>
+      <i class="ui-collapse-item__arrow" :class="{ 'is-active': isActive }"></i>
+    </div>
+    <transition name="ui-collapse-collapse">
+      <div class="ui-collapse-item__wrap" v-show="isActive" role="tabpanel">
+        <div class="ui-collapse-item__content">
+          <slot></slot>
+        </div>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'UiCollapseItem',
+
+  componentName: 'UiCollapseItem',
+
+  inject: ['collapse'],
+
+  props: {
+    title: String,
+    name: [String, Number]
+  },
+
+  data() {
+    return {
+      isActive: false
+    };
+  },
+
+  computed: {
+    collapseItems() {
+      return this.collapse.items;
+    }
+  },
+
+  watch: {
+    isActive(val) {
+      if (val) {
+        this.$emit('expand');
+      } else {
+        this.$emit('collapse');
+      }
+    }
+  },
+
+  methods: {
+    handleItemClick() {
+      this.collapse.handleItemClick(this);
+    }
+  },
+
+  created() {
+    this.collapse.items.push(this);
+  },
+
+  beforeDestroy() {
+    const items = this.collapse.items;
+    const index = items.indexOf(this);
+    if (index > -1) {
+      items.splice(index, 1);
+    }
+  }
+};
+</script>

package/src/packages/color-picker/index.js

@@ -0,0 +1,12 @@
+/**
+ * ColorPicker 组件
+ */
+
+import UiColorPicker from './src/main.vue'
+
+// 自动安装
+UiColorPicker.install = function(Vue) {
+  Vue.component(UiColorPicker.name, UiColorPicker)
+}
+
+export default UiColorPicker