misp-ui-library-test 0.0.1

package/src/packages/carousel/src/main.vue

@@ -0,0 +1,186 @@
+<template>
+  <div class="ui-carousel" :class="{ 'is-vertical': direction === 'vertical' }" @mouseenter.stop="handleMouseEnter" @mouseleave.stop="handleMouseLeave">
+    <div class="ui-carousel__container" :style="{ height: height }">
+      <div class="ui-carousel__track" :style="trackStyle">
+        <slot></slot>
+      </div>
+      <div class="ui-carousel__arrows" v-if="arrow === 'always' || arrow === 'hover'">
+        <button class="ui-carousel__arrow ui-carousel__arrow--left" @click="prev">
+          <i class="icon-arrow-left"></i>
+        </button>
+        <button class="ui-carousel__arrow ui-carousel__arrow--right" @click="next">
+          <i class="icon-arrow-right"></i>
+        </button>
+      </div>
+      <div class="ui-carousel__indicators" v-if="indicator !== 'none'">
+        <button
+          v-for="(item, index) in items"
+          :key="index"
+          class="ui-carousel__indicator"
+          :class="{ 'is-active': activeIndex === index }"
+          @click="setActiveItem(index)"
+        >
+          <span></span>
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'UiCarousel',
+
+  componentName: 'UiCarousel',
+
+  props: {
+    height: {
+      type: String,
+      default: '300px'
+    },
+    initialIndex: {
+      type: Number,
+      default: 0
+    },
+    autoplay: {
+      type: Boolean,
+      default: true
+    },
+    interval: {
+      type: Number,
+      default: 3000
+    },
+    trigger: {
+      type: String,
+      default: 'hover',
+      validator: val => ['hover', 'click'].indexOf(val) > -1
+    },
+    direction: {
+      type: String,
+      default: 'horizontal',
+      validator: val => ['horizontal', 'vertical'].indexOf(val) > -1
+    },
+    loop: {
+      type: Boolean,
+      default: true
+    },
+    arrow: {
+      type: String,
+      default: 'hover',
+      validator: val => ['always', 'hover', 'never'].indexOf(val) > -1
+    },
+    indicator: {
+      type: String,
+      default: 'inside',
+      validator: val => ['inside', 'outside', 'none'].indexOf(val) > -1
+    }
+  },
+
+  data() {
+    return {
+      items: [],
+      activeIndex: this.initialIndex,
+      timer: null,
+      isHover: false
+    };
+  },
+
+  computed: {
+    trackStyle() {
+      const offset = this.direction === 'vertical' ? 'translateY' : 'translateX';
+      const firstItem = this.items[0] || {};
+      const value = this.direction === 'vertical' ? (firstItem.height || 0) : (firstItem.width || 0);
+      return {
+        transform: `${offset}(-${this.activeIndex * 100}%)`,
+        transition: 'transform 0.3s ease'
+      };
+    }
+  },
+
+  provide() {
+    return {
+      carousel: this
+    };
+  },
+
+  watch: {
+    activeIndex(val, oldVal) {
+      this.$emit('change', val, oldVal);
+    },
+    autoplay(val) {
+      val ? this.startTimer() : this.stopTimer();
+    }
+  },
+
+  mounted() {
+    this.$nextTick(() => {
+      this.updateItems();
+      this.startTimer();
+    });
+  },
+
+  beforeDestroy() {
+    this.stopTimer();
+  },
+
+  methods: {
+    updateItems() {
+      this.items = this.$slots.default
+        .filter(slot => slot.tag && slot.componentOptions && slot.componentOptions.Ctor.options.name === 'UiCarouselItem')
+        .map(slot => ({
+          vm: slot.componentInstance,
+          width: (slot.elm && slot.elm.offsetWidth) || 0,
+          height: (slot.elm && slot.elm.offsetHeight) || 0
+        }));
+    },
+    handleMouseEnter() {
+      if (this.trigger === 'hover') {
+        this.isHover = true;
+        if (this.autoplay) {
+          this.stopTimer();
+        }
+      }
+    },
+    handleMouseLeave() {
+      this.isHover = false;
+      if (this.autoplay) {
+        this.startTimer();
+      }
+    },
+    startTimer() {
+      if (!this.autoplay || this.isHover) return;
+      this.timer = setInterval(() => {
+        this.next();
+      }, this.interval);
+    },
+    stopTimer() {
+      if (this.timer) {
+        clearInterval(this.timer);
+        this.timer = null;
+      }
+    },
+    setActiveItem(index) {
+      if (index < 0 || index >= this.items.length) return;
+      this.activeIndex = index;
+    },
+    prev() {
+      let index = this.activeIndex - 1;
+      if (index < 0) {
+        index = this.loop ? this.items.length - 1 : 0;
+      }
+      if (index >= 0 && index < this.items.length) {
+        this.activeIndex = index;
+      }
+    },
+    next() {
+      let index = this.activeIndex + 1;
+      if (index >= this.items.length) {
+        index = this.loop ? 0 : this.items.length - 1;
+      }
+      if (index >= 0 && index < this.items.length) {
+        this.activeIndex = index;
+      }
+    }
+  }
+};
+</script>

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

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

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

@@ -0,0 +1,34 @@
+<template>
+  <div class="ui-carousel-item" :class="{ 'is-active': isActive }">
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'UiCarouselItem',
+
+  inject: ['carousel'],
+
+  data() {
+    return {
+      isActive: false
+    };
+  },
+
+  watch: {
+    'carousel.activeIndex'(val) {
+      this.isActive = val === this.index;
+    }
+  },
+
+  mounted() {
+    this.index = this.carousel.items.length;
+    this.carousel.updateItems();
+  },
+
+  beforeDestroy() {
+    this.carousel.updateItems();
+  }
+};
+</script>

package/src/packages/cascader/index.js

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

package/src/packages/cascader/src/main.vue

@@ -0,0 +1,232 @@
+<template>
+  <div class="ui-cascader" :class="{ 'is-focus': isFocus }">
+    <ui-input
+      v-model="inputValue"
+      :placeholder="placeholder"
+      :disabled="disabled"
+      readonly
+      @focus="handleFocus"
+      @blur="handleBlur"
+      @clear="handleClear"
+    >
+      <i slot="prefix" class="ui-input__icon icon-list"></i>
+    </ui-input>
+    <transition name="ui-zoom-in-top">
+      <div v-show="pickerVisible" class="ui-cascader__panel" ref="cascaderPanel">
+        <div class="ui-cascader__menus">
+          <div
+            v-for="(menu, level) in menus"
+            :key="level"
+            class="ui-cascader__menu"
+          >
+            <div
+              v-for="item in menu"
+              :key="item.value"
+              class="ui-cascader__item"
+              :class="{ 'is-active': isActive(item, level), 'is-disabled': item.disabled }"
+              @click="handleItemClick(item, level)"
+              @mouseenter="handleItemHover(item, level)"
+            >
+              {{ item.label }}
+              <i v-if="item.children && item.children.length" class="ui-cascader__arrow icon-arrow-right"></i>
+            </div>
+          </div>
+        </div>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'UiCascader',
+
+  props: {
+    value: {},
+    options: {
+      type: Array,
+      default: () => []
+    },
+    placeholder: {
+      type: String,
+      default: '请选择'
+    },
+    disabled: Boolean,
+    props: {
+      type: Object,
+      default: () => ({
+        value: 'value',
+        label: 'label',
+        children: 'children',
+        disabled: 'disabled'
+      })
+    },
+    showAllLevels: {
+      type: Boolean,
+      default: true
+    },
+    separator: {
+      type: String,
+      default: '/'
+    }
+  },
+
+  data() {
+    return {
+      pickerVisible: false,
+      isFocus: false,
+      inputValue: '',
+      activeValues: [],
+      menus: [],
+      selectedOptions: []
+    };
+  },
+
+  computed: {
+    valueKey() {
+      return this.props.value;
+    },
+    labelKey() {
+      return this.props.label;
+    },
+    childrenKey() {
+      return this.props.children;
+    },
+    disabledKey() {
+      return this.props.disabled;
+    }
+  },
+
+  watch: {
+    value(val) {
+      this.updateInputValue();
+    },
+    options: {
+      handler() {
+        this.initMenus();
+      },
+      deep: true
+    }
+  },
+
+  methods: {
+    initMenus() {
+      this.menus = [this.options];
+    },
+    updateInputValue() {
+      if (!this.value || !Array.isArray(this.value)) {
+        this.inputValue = '';
+        return;
+      }
+
+      const selectedOptions = this.getSelectedOptions(this.value);
+      if (this.showAllLevels) {
+        this.inputValue = selectedOptions.map(opt => opt[this.labelKey]).join(this.separator);
+      } else {
+        const lastOption = selectedOptions[selectedOptions.length - 1];
+        this.inputValue = lastOption ? lastOption[this.labelKey] : '';
+      }
+      this.selectedOptions = selectedOptions;
+    },
+    getSelectedOptions(values) {
+      const options = [];
+      let currentOptions = this.options;
+
+      for (let i = 0; i < values.length; i++) {
+        const value = values[i];
+        const option = currentOptions.find(opt => opt[this.valueKey] === value);
+        if (option) {
+          options.push(option);
+          currentOptions = option[this.childrenKey] || [];
+        } else {
+          break;
+        }
+      }
+
+      return options;
+    },
+    isActive(item, level) {
+      return this.activeValues[level] === item[this.valueKey];
+    },
+    handleItemClick(item, level) {
+      if (item[this.disabledKey]) return;
+
+      const hasChildren = item[this.childrenKey] && item[this.childrenKey].length > 0;
+
+      this.activeValues = this.activeValues.slice(0, level + 1);
+      this.activeValues[level] = item[this.valueKey];
+
+      if (hasChildren) {
+        if (this.menus[level + 1]) {
+          this.menus.splice(level + 1);
+        }
+        this.menus.push(item[this.childrenKey]);
+      } else {
+        this.selectItem(item);
+      }
+    },
+    handleItemHover(item, level) {
+      // 用于 hover 触发子菜单
+    },
+    selectItem(item) {
+      const values = this.activeValues.map((val, index) => {
+        const menu = this.menus[index];
+        const selectedItem = menu.find(opt => opt[this.valueKey] === val);
+        return selectedItem;
+      }).filter(Boolean);
+
+      this.selectedOptions = values;
+
+      if (this.showAllLevels) {
+        this.inputValue = values.map(opt => opt[this.labelKey]).join(this.separator);
+      } else {
+        this.inputValue = item[this.labelKey];
+      }
+
+      const valueArray = values.map(opt => opt[this.valueKey]);
+      this.$emit('input', valueArray);
+      this.$emit('change', valueArray);
+      this.pickerVisible = false;
+    },
+    handleFocus() {
+      if (this.disabled) return;
+      this.pickerVisible = true;
+      this.isFocus = true;
+      this.initMenus();
+    },
+    handleBlur() {
+      this.isFocus = false;
+    },
+    handleClear() {
+      this.inputValue = '';
+      this.activeValues = [];
+      this.selectedOptions = [];
+      this.$emit('input', []);
+      this.$emit('change', []);
+    },
+    handleDocumentClick(event) {
+      if (this.$el && !this.$el.contains(event.target)) {
+        this.pickerVisible = false;
+      }
+    }
+  },
+
+  watch: {
+    pickerVisible(val) {
+      if (val) {
+        document.addEventListener('click', this.handleDocumentClick);
+      } else {
+        document.removeEventListener('click', this.handleDocumentClick);
+      }
+    }
+  },
+
+  mounted() {
+    this.updateInputValue();
+  },
+
+  beforeDestroy() {
+    document.removeEventListener('click', this.handleDocumentClick);
+  }
+};
+</script>

package/src/packages/chart/index.js

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