misp-ui-library-test 0.0.1

package/src/packages/radio/index.js

@@ -0,0 +1,44 @@
+/**
+ * Radio 单选框组件
+ */
+
+import UiRadio from './src/main.vue'
+
+// 单选框组组件
+export const RadioGroup = {
+  ...UiRadio,
+  name: 'UiRadioGroup',
+  componentName: 'UiRadioGroup',
+  props: {
+    ...UiRadio.props,
+    isGroup: {
+      type: Boolean,
+      default: true
+    }
+  }
+}
+
+// 单选框按钮组件
+export const RadioButton = {
+  ...UiRadio,
+  name: 'UiRadioButton',
+  props: {
+    ...UiRadio.props,
+    isButton: {
+      type: Boolean,
+      default: true
+    }
+  }
+}
+
+UiRadio.Group = RadioGroup
+UiRadio.Button = RadioButton
+
+// 自动安装
+UiRadio.install = function(Vue) {
+  Vue.component(UiRadio.name, UiRadio)
+  Vue.component('UiRadioGroup', RadioGroup)
+  Vue.component('UiRadioButton', RadioButton)
+}
+
+export default UiRadio

package/src/packages/radio/src/main.vue

@@ -0,0 +1,291 @@
+<template>
+  <!-- Group Container -->
+  <component
+    v-if="isGroup"
+    :is="_elTag"
+    class="ui-radio-group"
+    role="radiogroup"
+    @keydown="handleKeydown"
+  >
+  >
+    <template v-if="options && options.length">
+      <ui-radio
+        v-for="item in options"
+        :key="item.value"
+        :label="item.value"
+        :is-button="isButton"
+        :disabled="item.disabled"
+      >
+        {{ item.label }}
+      </ui-radio>
+    </template>
+    <slot v-else></slot>
+  </component>
+
+  <!-- Button Style Item -->
+  <label
+    v-else-if="isButton"
+    class="ui-radio-button"
+    :class="[
+      radioSize ? 'ui-radio-button--' + radioSize : '',
+      { 'is-active': model === label },
+      { 'is-disabled': isDisabled },
+      { 'is-focus': focus }
+    ]"
+    role="radio"
+    :aria-checked="model === label"
+    :aria-disabled="isDisabled"
+    :tabindex="tabIndex"
+    @keydown.space.stop.prevent="model = isDisabled ? model : label"
+  >
+    <input
+      class="ui-radio-button__orig-radio"
+      :value="label"
+      type="radio"
+      v-model="model"
+      :name="name"
+      @change="handleChange"
+      :disabled="isDisabled"
+      tabindex="-1"
+      @focus="focus = true"
+      @blur="focus = false"
+      autocomplete="off"
+    >
+    <span
+      class="ui-radio-button__inner"
+      :style="model === label ? activeStyle : null"
+      @keydown.stop>
+      <slot></slot>
+      <template v-if="!$slots.default">{{label}}</template>
+    </span>
+  </label>
+
+  <!-- Normal Style Item -->
+  <label
+    v-else
+    class="ui-radio"
+    :class="[
+      border && radioSize ? 'ui-radio--' + radioSize : '',
+      { 'is-disabled': isDisabled },
+      { 'is-focus': focus },
+      { 'is-bordered': border },
+      { 'is-checked': model === label }
+    ]"
+    role="radio"
+    :aria-checked="model === label"
+    :aria-disabled="isDisabled"
+    :tabindex="tabIndex"
+    @keydown.space.stop.prevent="model = isDisabled ? model : label"
+  >
+    <span class="ui-radio__input"
+      :class="{
+        'is-disabled': isDisabled,
+        'is-checked': model === label
+      }"
+    >
+      <span class="ui-radio__inner"></span>
+      <input
+        ref="radio"
+        class="ui-radio__original"
+        :value="label"
+        type="radio"
+        aria-hidden="true"
+        v-model="model"
+        @focus="focus = true"
+        @blur="focus = false"
+        @change="handleChange"
+        :name="name"
+        :disabled="isDisabled"
+        tabindex="-1"
+        autocomplete="off"
+      >
+    </span>
+    <span class="ui-radio__label" @keydown.stop>
+      <slot></slot>
+      <template v-if="!$slots.default">{{label}}</template>
+    </span>
+  </label>
+</template>
+
+<script>
+import emitter from '../../../mixins/emitter';
+
+export default {
+  name: 'UiRadio',
+
+  componentName: 'UiRadio',
+
+  mixins: [emitter],
+
+  inject: {
+    uiForm: {
+      default: ''
+    },
+    uiFormItem: {
+      default: ''
+    }
+  },
+
+  props: {
+    value: {},
+    label: {},
+    disabled: Boolean,
+    name: String,
+    border: Boolean,
+    size: String,
+    // Group props
+    isGroup: Boolean,
+    fill: String,
+    textColor: String,
+    // Button props
+    isButton: Boolean,
+    // Options
+    options: Array
+  },
+
+  data() {
+    return {
+      focus: false
+    };
+  },
+
+  computed: {
+    _radioGroup() {
+      let parent = this.$parent;
+      while (parent) {
+        if (parent.$options.componentName !== 'UiRadioGroup') {
+          parent = parent.$parent;
+        } else {
+          return parent;
+        }
+      }
+      return null;
+    },
+    isInsideGroup() {
+      return !!this._radioGroup;
+    },
+    model: {
+      get() {
+        if (this.isGroup) return this.value;
+        return this.isInsideGroup ? this._radioGroup.value : this.value;
+      },
+      set(val) {
+        if (this.isGroup) {
+          this.$emit('input', val);
+        } else if (this.isInsideGroup) {
+          this.dispatch('UiRadioGroup', 'input', [val]);
+        } else {
+          this.$emit('input', val);
+        }
+        this.dispatch('UiFormItem', 'ui.form.change', [val]);
+        if (!this.isGroup) {
+          this.$refs.radio && (this.$refs.radio.checked = this.model === this.label);
+        }
+      }
+    },
+    _uiFormItemSize() {
+      return (this.uiFormItem || {}).uiFormItemSize;
+    },
+    radioSize() {
+      const temRadioSize = this.size || this._uiFormItemSize || (this.$ELEMENT || {}).size;
+      return this.isInsideGroup
+        ? this.radioGroupSize || temRadioSize
+        : temRadioSize;
+    },
+    radioGroupSize() {
+      return this.size || this._uiFormItemSize || (this.$ELEMENT || {}).size;
+    },
+    isDisabled() {
+      const basicDisabled = this.disabled || (this.uiForm || {}).disabled;
+      return this.isInsideGroup
+        ? this._radioGroup.disabled || basicDisabled
+        : basicDisabled;
+    },
+    tabIndex() {
+      return (this.isDisabled || (this.isInsideGroup && this.model !== this.label)) ? -1 : 0;
+    },
+    activeStyle() {
+      if (!this.isInsideGroup || !this.isButton) return {};
+      return {
+        backgroundColor: this._radioGroup.fill || '',
+        borderColor: this._radioGroup.fill || '',
+        boxShadow: this._radioGroup.fill ? `-1px 0 0 0 ${this._radioGroup.fill}` : '',
+        color: this._radioGroup.textColor || ''
+      };
+    },
+    _elTag() {
+      let tag = (this.$vnode.data || {}).tag;
+      if (!tag || tag === 'component') tag = 'div';
+      return tag;
+    }
+  },
+
+  mounted() {
+    if (this.isGroup) {
+      const radios = this.$el.querySelectorAll('[type=radio]');
+      const firstLabel = this.$el.querySelectorAll('[role=radio]')[0];
+      if (![].some.call(radios, radio => radio.checked) && firstLabel) {
+        firstLabel.tabIndex = 0;
+      }
+    }
+  },
+
+  methods: {
+    handleChange() {
+      this.$nextTick(() => {
+        this.$emit('change', this.model);
+        this.isInsideGroup && this.dispatch('UiRadioGroup', 'handleChange', this.model);
+      });
+    },
+    handleKeydown(e) {
+      if (!this.isGroup) return;
+      const target = e.target;
+      const className = target.nodeName === 'INPUT' ? '[type=radio]' : '[role=radio]';
+      const radios = this.$el.querySelectorAll(className);
+      const length = radios.length;
+      const index = [].indexOf.call(radios, target);
+      const roleRadios = this.$el.querySelectorAll('[role=radio]');
+      switch (e.keyCode) {
+        case 37: // LEFT
+        case 38: // UP
+          e.stopPropagation();
+          e.preventDefault();
+          if (index === 0) {
+            roleRadios[length - 1].click();
+            roleRadios[length - 1].focus();
+          } else {
+            roleRadios[index - 1].click();
+            roleRadios[index - 1].focus();
+          }
+          break;
+        case 39: // RIGHT
+        case 40: // DOWN
+          if (index === (length - 1)) {
+            e.stopPropagation();
+            e.preventDefault();
+            roleRadios[0].click();
+            roleRadios[0].focus();
+          } else {
+            roleRadios[index + 1].click();
+            roleRadios[index + 1].focus();
+          }
+          break;
+        default:
+          break;
+      }
+    }
+  },
+  created() {
+    if (this.isGroup) {
+      this.$on('handleChange', value => {
+        this.$emit('change', value);
+      });
+    }
+  },
+  watch: {
+    value(val) {
+      this.dispatch('UiFormItem', 'ui.form.change', [val]);
+    }
+  }
+};
+</script>

package/src/packages/rate/index.js

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

package/src/packages/rate/src/main.vue

@@ -0,0 +1,129 @@
+<template>
+  <div class="ui-rate" :class="{ 'ui-rate--disabled': disabled }" @mouseleave="resetCurrentValue">
+    <span
+      v-for="item in max"
+      :key="item"
+      class="ui-rate__item"
+      @mousemove="handleMouseMove(item, $event)"
+      @click="handleClick(item)"
+    >
+      <i
+        :class="['ui-rate__icon', rateClass(item)]"
+        :style="rateStyle(item)"
+      ></i>
+    </span>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'UiRate',
+
+  props: {
+    value: {
+      type: Number,
+      default: 0
+    },
+    lowThreshold: {
+      type: Number,
+      default: 2
+    },
+    highThreshold: {
+      type: Number,
+      default: 4
+    },
+    max: {
+      type: Number,
+      default: 5
+    },
+    colors: {
+      type: Array,
+      default: () => ['#F7BA2A', '#F7BA2A', '#F7BA2A']
+    },
+    disabledVoidColor: {
+      type: String,
+      default: '#C6D1DE'
+    },
+    voidColor: {
+      type: String,
+      default: '#C6D1DE'
+    },
+    disabled: Boolean,
+    allowHalf: Boolean,
+    showScore: Boolean,
+    scoreTemplate: {
+      type: String,
+      default: '{value}'
+    }
+  },
+
+  data() {
+    return {
+      currentValue: this.value,
+      hoverIndex: -1
+    };
+  },
+
+  watch: {
+    value(val) {
+      this.currentValue = val;
+    },
+    currentValue(val) {
+      this.$emit('input', val);
+    }
+  },
+
+  methods: {
+    rateClass(item) {
+      const currentValue = this.hoverIndex !== -1 ? this.hoverIndex : this.currentValue;
+      if (item <= currentValue) {
+        return 'icon-star';
+      }
+      return 'icon-star-outline';
+    },
+    rateStyle(item) {
+      const currentValue = this.hoverIndex !== -1 ? this.hoverIndex : this.currentValue;
+      if (item > currentValue) {
+        return { color: this.disabled ? this.disabledVoidColor : this.voidColor };
+      }
+
+      let colorIndex = 0;
+      if (currentValue <= this.lowThreshold) {
+        colorIndex = 0;
+      } else if (currentValue >= this.highThreshold) {
+        colorIndex = 2;
+      } else {
+        colorIndex = 1;
+      }
+
+      return { color: this.colors[colorIndex] };
+    },
+    handleMouseMove(item, event) {
+      if (this.disabled) return;
+
+      const target = event.target;
+      const rect = target.getBoundingClientRect();
+      const halfWidth = rect.width / 2;
+      const offsetX = event.clientX - rect.left;
+
+      let index = item;
+      if (this.allowHalf && offsetX < halfWidth) {
+        index = item - 0.5;
+      }
+
+      this.hoverIndex = index;
+    },
+    handleClick(item) {
+      if (this.disabled) return;
+
+      const currentValue = this.hoverIndex !== -1 ? this.hoverIndex : item;
+      this.currentValue = currentValue;
+      this.$emit('change', currentValue);
+    },
+    resetCurrentValue() {
+      if (this.disabled) return;
+      this.hoverIndex = -1;
+    }
+  }
+};
+</script>

package/src/packages/result/index.js

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

package/src/packages/result/src/main.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="ui-result">
+    <div class="ui-result__icon">
+      <slot name="icon">
+        <i :class="iconClass"></i>
+      </slot>
+    </div>
+    <div class="ui-result__title">
+      <slot name="title">{{ title }}</slot>
+    </div>
+    <div class="ui-result__sub-title" v-if="subTitle || $slots.subTitle">
+      <slot name="subTitle">{{ subTitle }}</slot>
+    </div>
+    <div class="ui-result__extra" v-if="$slots.extra">
+      <slot name="extra"></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'UiResult',
+  props: {
+    status: {
+      type: String,
+      default: 'success',
+      validator(val) {
+        return ['success', 'error', 'warning', 'info'].indexOf(val) !== -1;
+      }
+    },
+    title: {
+      type: String,
+      default: ''
+    },
+    subTitle: {
+      type: String,
+      default: ''
+    }
+  },
+  computed: {
+    iconClass() {
+      const iconMap = {
+        success: 'icon-success',
+        error: 'icon-error',
+        warning: 'icon-warning',
+        info: 'icon-info'
+      };
+      return iconMap[this.status] || 'icon-success';
+    }
+  }
+};
+</script>

package/src/packages/row/index.js

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

package/src/packages/row/src/main.vue

@@ -0,0 +1,57 @@
+<template>
+  <component
+    :is="tag"
+    class="ui-row"
+    :class="[
+      type === 'flex' ? 'ui-row--flex' : '',
+      justify !== 'start' ? `is-justify-${justify}` : '',
+      align ? `is-align-${align}` : ''
+    ]"
+    :style="style"
+  >
+    <slot></slot>
+  </component>
+</template>
+
+<script>
+export default {
+  name: 'UiRow',
+
+  componentName: 'UiRow',
+
+  props: {
+    tag: {
+      type: String,
+      default: 'div'
+    },
+    gutter: Number,
+    type: String,
+    justify: {
+      type: String,
+      default: 'start',
+      validator: value => {
+        return ['start', 'end', 'center', 'space-around', 'space-between', 'space-evenly'].includes(value);
+      }
+    },
+    align: {
+      type: String,
+      validator: value => {
+        return ['top', 'middle', 'bottom'].includes(value);
+      }
+    }
+  },
+
+  computed: {
+    style() {
+      const ret = {};
+
+      if (this.gutter) {
+        ret.marginLeft = `-${this.gutter / 2}px`;
+        ret.marginRight = ret.marginLeft;
+      }
+
+      return ret;
+    }
+  }
+};
+</script>

package/src/packages/scrollbar/index.js

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