misp-ui-library-test 0.0.1

package/src/packages/backtop/src/main.vue

@@ -0,0 +1,120 @@
+<template>
+  <transition name="ui-fade-in">
+    <div
+      v-if="visible"
+      @click.stop="handleClick"
+      :style="{
+        'right': styleRight,
+        'bottom': styleBottom
+      }"
+      class="ui-backtop">
+      <slot>
+        <i class="ui-backtop__icon icon-caret-top"></i>
+      </slot>
+    </div>
+  </transition>
+</template>
+
+<script>
+// 简单的节流函数
+function throttle(delay, fn) {
+  let lastTime = 0;
+  return function() {
+    const now = Date.now();
+    if (now - lastTime >= delay) {
+      lastTime = now;
+      fn.apply(this, arguments);
+    }
+  };
+}
+
+const cubic = value => Math.pow(value, 3);
+const easeInOutCubic = value => value < 0.5
+  ? cubic(value * 2) / 2
+  : 1 - cubic((1 - value) * 2) / 2;
+
+export default {
+  name: 'UiBacktop',
+
+  props: {
+    visibilityHeight: {
+      type: Number,
+      default: 200
+    },
+    target: String,
+    right: {
+      type: Number,
+      default: 40
+    },
+    bottom: {
+      type: Number,
+      default: 40
+    }
+  },
+
+  data() {
+    return {
+      el: null,
+      container: null,
+      visible: false
+    };
+  },
+
+  computed: {
+    styleBottom() {
+      return `${this.bottom}px`;
+    },
+    styleRight() {
+      return `${this.right}px`;
+    }
+  },
+
+  mounted() {
+    this.init();
+    this.throttledScrollHandler = throttle(300, this.onScroll);
+    this.container.addEventListener('scroll', this.throttledScrollHandler);
+  },
+
+  methods: {
+    init() {
+      this.container = document;
+      this.el = document.documentElement;
+      if (this.target) {
+        this.el = document.querySelector(this.target);
+        if (!this.el) {
+          throw new Error(`target is not existed: ${this.target}`);
+        }
+        this.container = this.el;
+      }
+    },
+    onScroll() {
+      const scrollTop = this.el.scrollTop;
+      this.visible = scrollTop >= this.visibilityHeight;
+    },
+    handleClick(e) {
+      this.scrollToTop();
+      this.$emit('click', e);
+    },
+    scrollToTop() {
+      const el = this.el;
+      const beginTime = Date.now();
+      const beginValue = el.scrollTop;
+      const rAF = window.requestAnimationFrame || (func => setTimeout(func, 16));
+      const frameFunc = () => {
+        const progress = (Date.now() - beginTime) / 500;
+        if (progress < 1) {
+          el.scrollTop = beginValue * (1 - easeInOutCubic(progress));
+          rAF(frameFunc);
+        } else {
+          el.scrollTop = 0;
+        }
+      };
+      rAF(frameFunc);
+    }
+  },
+
+  beforeDestroy() {
+    this.container.removeEventListener('scroll', this.throttledScrollHandler);
+  }
+};
+</script>

package/src/packages/badge/index.js

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

package/src/packages/badge/src/main.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="ui-badge">
+    <slot></slot>
+    <transition name="ui-zoom-in-center">
+      <sup
+        v-show="!hidden && (content || content === 0 || isDot)"
+        v-text="content"
+        class="ui-badge__content"
+        :class="[
+          type ? 'ui-badge__content--' + type : null,
+          {
+            'is-fixed': $slots.default,
+            'is-dot': isDot
+          }
+        ]">
+      </sup>
+    </transition>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'UiBadge',
+
+  props: {
+    value: [String, Number],
+    max: Number,
+    isDot: Boolean,
+    hidden: Boolean,
+    type: {
+      type: String,
+      validator(val) {
+        return ['primary', 'success', 'warning', 'info', 'danger'].indexOf(val) > -1;
+      }
+    }
+  },
+
+  computed: {
+    content() {
+      if (this.isDot) return;
+
+      const value = this.value;
+      const max = this.max;
+
+      if (typeof value === 'number' && typeof max === 'number') {
+        return max < value ? `${max}+` : value;
+      }
+
+      return value;
+    }
+  }
+};
+</script>

package/src/packages/breadcrumb/index.js

@@ -0,0 +1,12 @@
+/**
+ * Breadcrumb 面包屑导航组件
+ */
+
+import UiBreadcrumb from './src/main.vue'
+
+// 自动安装
+UiBreadcrumb.install = function(Vue) {
+  Vue.component(UiBreadcrumb.name, UiBreadcrumb)
+}
+
+export default UiBreadcrumb

package/src/packages/breadcrumb/src/main.vue

@@ -0,0 +1,34 @@
+<template>
+  <div class="ui-breadcrumb" aria-label="Breadcrumb" role="navigation">
+    <slot></slot>
+  </div>
+</template>
+<script>
+export default {
+  name: 'UiBreadcrumb',
+
+  props: {
+    separator: {
+      type: String,
+      default: '/'
+    },
+    separatorClass: {
+      type: String,
+      default: ''
+    }
+  },
+
+  provide() {
+    return {
+      uiBreadcrumb: this
+    };
+  },
+
+  mounted() {
+    const items = this.$el.querySelectorAll('.ui-breadcrumb__item');
+    if (items.length) {
+      items[items.length - 1].setAttribute('aria-current', 'page');
+    }
+  }
+};
+</script>

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

@@ -0,0 +1,12 @@
+/**
+ * BreadcrumbItem 面包屑导航项组件
+ */
+
+import UiBreadcrumbItem from './src/main.vue'
+
+// 自动安装
+UiBreadcrumbItem.install = function(Vue) {
+  Vue.component(UiBreadcrumbItem.name, UiBreadcrumbItem)
+}
+
+export default UiBreadcrumbItem

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

@@ -0,0 +1,41 @@
+<template>
+  <span class="ui-breadcrumb__item">
+    <span
+      :class="['ui-breadcrumb__inner', to ? 'is-link' : '']"
+      ref="link"
+      role="link">
+      <slot></slot>
+    </span>
+    <i v-if="separatorClass" class="ui-breadcrumb__separator" :class="separatorClass"></i>
+    <span v-else class="ui-breadcrumb__separator" role="presentation">{{separator}}</span>
+  </span>
+</template>
+<script>
+export default {
+  name: 'UiBreadcrumbItem',
+  props: {
+    to: {},
+    replace: Boolean
+  },
+  data() {
+    return {
+      separator: '',
+      separatorClass: ''
+    };
+  },
+
+  inject: ['uiBreadcrumb'],
+
+  mounted() {
+    this.separator = this.uiBreadcrumb.separator;
+    this.separatorClass = this.uiBreadcrumb.separatorClass;
+    const link = this.$refs.link;
+    link.setAttribute('role', 'link');
+    link.addEventListener('click', _ => {
+      const { to, $router } = this;
+      if (!to || !$router) return;
+      this.replace ? $router.replace(to) : $router.push(to);
+    });
+  }
+};
+</script>

package/src/packages/button/index.js

@@ -0,0 +1,13 @@
+/**
+ * Button 组件
+ * 提供基础按钮功能，支持多种类型、尺寸和状态
+ */
+
+import UiButton from './src/main.vue'
+
+// 自动安装
+UiButton.install = function(Vue) {
+  Vue.component(UiButton.name, UiButton)
+}
+
+export default UiButton

package/src/packages/button/src/main.vue

@@ -0,0 +1,106 @@
+<template>
+  <button
+    class="ui-button"
+    :class="[
+      type ? `ui-button--${type}` : '',
+      size ? `ui-button--${size}` : '',
+      {
+        'is-disabled': disabled,
+        'is-loading': loading,
+        'is-plain': plain || textual,
+        'is-text': textual,
+        'is-round': round,
+        'is-circle': circle
+      }
+    ]"
+    :disabled="disabled || loading"
+    :autofocus="autofocus"
+    :type="nativeType"
+    @click="handleClick"
+  >
+    <i v-if="loading" class="ui-icon-loading"></i>
+    <i v-if="icon && !loading" :class="icon"></i>
+    <span><slot>{{ label }}</slot></span>
+  </button>
+</template>
+
+<script>
+export default {
+  name: 'UiButton',
+  props: {
+    // 按钮类型
+    type: {
+      type: String,
+      default: 'default',
+      validator: value => {
+        return ['default', 'primary', 'success', 'warning', 'danger'].includes(value)
+      }
+    },
+    // 按钮尺寸
+    size: {
+      type: String,
+      default: 'medium',
+      validator: value => {
+        return ['large', 'medium', 'small', 'mini'].includes(value)
+      }
+    },
+    // 按钮文本
+    label: String,
+    // 是否禁用
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    // 是否加载中
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    // 是否朴素按钮
+    plain: {
+      type: Boolean,
+      default: false
+    },
+    // 是否时文本按钮
+    textual: {
+      type: Boolean,
+      default: false
+    },
+    // 是否圆角按钮
+    round: {
+      type: Boolean,
+      default: false
+    },
+    // 是否圆形按钮
+    circle: {
+      type: Boolean,
+      default: false
+    },
+    // 图标类名
+    icon: {
+      type: String,
+      default: ''
+    },
+    // 是否自动聚焦
+    autofocus: {
+      type: Boolean,
+      default: false
+    },
+    // 原生 type 属性
+    nativeType: {
+      type: String,
+      default: 'button'
+    }
+  },
+  methods: {
+    /**
+     * 点击事件处理
+     */
+    handleClick(event) {
+      if (!this.disabled && !this.loading) {
+        this.$emit('click', event)
+      }
+    }
+  }
+}
+</script>

package/src/packages/calendar/index.js

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

package/src/packages/calendar/src/main.vue

@@ -0,0 +1,173 @@
+<template>
+  <div class="ui-calendar" :class="{ 'is-range': isRange, 'is-bordered': border }">
+    <div class="ui-calendar__header">
+      <button class="ui-calendar__button" @click="prevMonth" :disabled="isPrevDisabled">
+        <i class="icon-arrow-left"></i>
+      </button>
+      <div class="ui-calendar__title">
+        <span class="ui-calendar__year" @click="showYearPicker = !showYearPicker">
+          {{ currentYear }}年
+        </span>
+        <span class="ui-calendar__month" @click="showMonthPicker = !showMonthPicker">
+          {{ currentMonth + 1 }}月
+        </span>
+      </div>
+      <button class="ui-calendar__button" @click="nextMonth" :disabled="isNextDisabled">
+        <i class="icon-arrow-right"></i>
+      </button>
+    </div>
+    <div class="ui-calendar__body">
+      <div class="ui-calendar__week-header">
+        <span v-for="day in weekDays" :key="day" class="ui-calendar__cell">{{ day }}</span>
+      </div>
+      <div class="ui-calendar__content">
+        <div
+          v-for="(date, index) in calendarDates"
+          :key="index"
+          class="ui-calendar__cell"
+          :class="{
+            'is-current-month': date.isCurrentMonth,
+            'is-today': date.isToday,
+            'is-selected': date.isSelected,
+            'is-disabled': date.isDisabled
+          }"
+          @click="handleDateClick(date)"
+        >
+          <span class="ui-calendar__date">{{ date.date }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+const WEEK_DAYS = ['日', '一', '二', '三', '四', '五', '六'];
+
+export default {
+  name: 'UiCalendar',
+
+  props: {
+    value: {},
+    isRange: {
+      type: Boolean,
+      default: false
+    },
+    border: {
+      type: Boolean,
+      default: true
+    },
+    firstDayOfWeek: {
+      type: Number,
+      default: 0,
+      validator: val => val >= 0 && val <= 6
+    },
+    disabledDate: Function,
+    minDate: Date,
+    maxDate: Date
+  },
+
+  data() {
+    return {
+      currentDate: new Date(),
+      selectedDate: null,
+      selectedRange: [],
+      showYearPicker: false,
+      showMonthPicker: false
+    };
+  },
+
+  computed: {
+    weekDays() {
+      return WEEK_DAYS;
+    },
+    currentYear() {
+      return this.currentDate.getFullYear();
+    },
+    currentMonth() {
+      return this.currentDate.getMonth();
+    },
+    calendarDates() {
+      const year = this.currentYear;
+      const month = this.currentMonth;
+      const firstDay = new Date(year, month, 1);
+      const lastDay = new Date(year, month + 1, 0);
+      const startDate = new Date(firstDay);
+      startDate.setDate(startDate.getDate() - startDate.getDay());
+
+      const dates = [];
+      const today = new Date();
+
+      for (let i = 0; i < 42; i++) {
+        const date = new Date(startDate);
+        date.setDate(startDate.getDate() + i);
+
+        const isSelected = this.selectedDate &&
+          date.toDateString() === this.selectedDate.toDateString();
+
+        const isToday = date.toDateString() === today.toDateString();
+
+        const isDisabled = this.disabledDate && this.disabledDate(date);
+
+        dates.push({
+          date: date.getDate(),
+          fullDate: date,
+          isCurrentMonth: date.getMonth() === month,
+          isToday,
+          isSelected,
+          isDisabled
+        });
+      }
+
+      return dates;
+    },
+    isPrevDisabled() {
+      return this.minDate && new Date(this.currentYear, this.currentMonth, 1) <= this.minDate;
+    },
+    isNextDisabled() {
+      return this.maxDate && new Date(this.currentYear, this.currentMonth + 1, 0) >= this.maxDate;
+    }
+  },
+
+  methods: {
+    prevMonth() {
+      this.currentDate = new Date(this.currentYear, this.currentMonth - 1, 1);
+    },
+    nextMonth() {
+      this.currentDate = new Date(this.currentYear, this.currentMonth + 1, 1);
+    },
+    handleDateClick(date) {
+      if (date.isDisabled) return;
+
+      if (this.isRange) {
+        this.handleRangeSelection(date.fullDate);
+      } else {
+        this.selectedDate = date.fullDate;
+        this.$emit('input', date.fullDate);
+        this.$emit('change', date.fullDate);
+      }
+    },
+    handleRangeSelection(date) {
+      if (this.selectedRange.length === 0 || this.selectedRange.length === 2) {
+        this.selectedRange = [date];
+      } else {
+        const [start, end] = this.selectedRange;
+        if (date < start) {
+          this.selectedRange = [date, start];
+        } else {
+          this.selectedRange = [start, date];
+        }
+        this.$emit('input', this.selectedRange);
+        this.$emit('change', this.selectedRange);
+      }
+    },
+    pickYear(year) {
+      this.currentDate = new Date(year, this.currentMonth, 1);
+      this.showYearPicker = false;
+    },
+    pickMonth(month) {
+      this.currentDate = new Date(this.currentYear, month, 1);
+      this.showMonthPicker = false;
+    }
+  }
+};
+</script>

package/src/packages/card/index.js

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

package/src/packages/card/src/main.vue

@@ -0,0 +1,26 @@
+<template>
+  <div class="ui-card" :class="shadow ? 'is-' + shadow + '-shadow' : 'is-always-shadow'">
+    <div class="ui-card__header" v-if="$slots.header || header">
+      <slot name="header">{{ header }}</slot>
+    </div>
+    <div class="ui-card__body" :style="bodyStyle">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'UiCard',
+  props: {
+    header: {},
+    bodyStyle: {},
+    shadow: {
+      type: String,
+      validator: (value) => {
+        return ['always', 'hover', 'never'].includes(value);
+      }
+    }
+  }
+};
+</script>

package/src/packages/carousel/index.js

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