misp-ui-library-test 0.0.1

package/src/packages/scrollbar/src/bar.vue

@@ -0,0 +1,116 @@
+<template>
+  <div
+    v-show="size"
+    @mousedown="handleClick"
+    :class="['ui-scrollbar__bar', 'is-' + barMap[vertical ? 'vertical' : 'horizontal'].name]"
+  >
+    <div
+      ref="thumb"
+      :class="['ui-scrollbar__thumb']"
+      :style="[thumbStyle]"
+      @mousedown="handleThumbDown"
+    ></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'UiScrollbarBar',
+
+  props: {
+    vertical: Boolean,
+    size: String,
+    move: Number
+  },
+
+  data() {
+    return {
+      cursorDown: false,
+      cursorStart: 0,
+      scrollContainerScrollTop: 0
+    };
+  },
+
+  computed: {
+    thumbStyle() {
+      return {
+        transform: `translate${this.vertical ? 'Y' : 'X'}(${this.move}%)`,
+        [this.vertical ? 'height' : 'width']: this.size
+      };
+    },
+    barMap() {
+      return {
+        vertical: {
+          name: 'vertical',
+          size: 'height',
+          pos: 'top'
+        },
+        horizontal: {
+          name: 'horizontal',
+          size: 'width',
+          pos: 'left'
+        }
+      };
+    }
+  },
+
+  methods: {
+    handleClick(e) {
+      const thumb = this.$refs.thumb;
+      const target = e.target;
+
+      if (target === thumb) return;
+
+      const barMap = this.vertical ? 'height' : 'width';
+      const thumbSize = thumb.getBoundingClientRect()[barMap];
+      const rect = this.$el.getBoundingClientRect();
+      const offset = rect[this.barMap[this.vertical ? 'vertical' : 'horizontal'].pos];
+      const thumbPosition = e.clientY - offset - thumbSize / 2;
+      const percentage = thumbPosition / (this.$el[barMap] - thumbSize) * 100;
+
+      this.$parent.wrap.scrollTop = percentage / 100 * this.$parent.wrap.scrollHeight;
+    },
+
+    handleThumbDown(e) {
+      if (e.button !== 0) return;
+
+      this.cursorDown = true;
+      this.cursorStart = this.vertical ? e.clientY : e.clientX;
+      this.scrollContainerScrollTop = this.$parent.wrap.scrollTop;
+
+      document.addEventListener('mousemove', this.handleMousemove);
+      document.addEventListener('mouseup', this.handleMouseup);
+
+      e.preventDefault();
+      e.stopPropagation();
+    },
+
+    handleMousemove(e) {
+      if (!this.cursorDown) return;
+
+      const barMap = this.vertical ? 'height' : 'width';
+      const thumbSize = this.$refs.thumb.getBoundingClientRect()[barMap];
+      const wrapSize = this.$parent.$el.getBoundingClientRect()[barMap];
+      const cursorDelta = (this.vertical ? e.clientY : e.clientX) - this.cursorStart;
+      const movePercentage = (cursorDelta / (wrapSize - thumbSize)) * 100;
+
+      const scrollHeight = this.$parent.wrap.scrollHeight;
+      const clientHeight = this.$parent.wrap.clientHeight;
+      const scrollRange = scrollHeight - clientHeight;
+
+      this.$parent.wrap.scrollTop = this.scrollContainerScrollTop + (movePercentage / 100 * scrollRange);
+    },
+
+    handleMouseup() {
+      this.cursorDown = false;
+      document.removeEventListener('mousemove', this.handleMousemove);
+      document.removeEventListener('mouseup', this.handleMouseup);
+    }
+  },
+
+  beforeDestroy() {
+    document.removeEventListener('mousemove', this.handleMousemove);
+    document.removeEventListener('mouseup', this.handleMouseup);
+  }
+};
+</script>

package/src/packages/scrollbar/src/main.vue

@@ -0,0 +1,124 @@
+<template>
+  <div class="ui-scrollbar">
+    <div
+      ref="wrap"
+      :class="[wrapClass, 'ui-scrollbar__wrap', native ? '' : 'ui-scrollbar__wrap--hidden-default']"
+      :style="wrapStyle"
+      @scroll="handleScroll"
+    >
+      <component
+        :is="tag"
+        ref="resize"
+        :class="['ui-scrollbar__view', viewClass]"
+        :style="viewStyle"
+      >
+        <slot></slot>
+      </component>
+    </div>
+    <template v-if="!native">
+      <ui-scrollbar-bar :move="moveX" :size="sizeWidth"></ui-scrollbar-bar>
+      <ui-scrollbar-bar vertical :move="moveY" :size="sizeHeight"></ui-scrollbar-bar>
+    </template>
+  </div>
+</template>
+
+<script>
+import UiScrollbarBar from './bar.vue';
+
+let scrollbarWidth;
+
+const getScrollbarWidth = () => {
+  if (scrollbarWidth !== undefined) return scrollbarWidth;
+
+  const outer = document.createElement('div');
+  outer.style.visibility = 'hidden';
+  outer.style.overflow = 'scroll';
+  document.body.appendChild(outer);
+
+  const inner = document.createElement('div');
+  outer.appendChild(inner);
+
+  scrollbarWidth = outer.offsetWidth - inner.offsetWidth;
+  outer.parentNode.removeChild(outer);
+
+  return scrollbarWidth;
+};
+
+export default {
+  name: 'UiScrollbar',
+
+  components: {
+    UiScrollbarBar
+  },
+
+  props: {
+    native: Boolean,
+    wrapStyle: [String, Array, Object],
+    wrapClass: [String, Object, Array],
+    viewClass: [String, Object, Array],
+    viewStyle: [String, Object, Array],
+    noresize: Boolean,
+    tag: {
+      type: String,
+      default: 'div'
+    }
+  },
+
+  data() {
+    return {
+      sizeWidth: '0',
+      sizeHeight: '0',
+      moveX: 0,
+      moveY: 0
+    };
+  },
+
+  computed: {
+    wrap() {
+      return this.$refs.wrap;
+    }
+  },
+
+  methods: {
+    handleScroll() {
+      const wrap = this.wrap;
+      if (!wrap) return;
+
+      this.moveY = ((wrap.scrollTop * 100) / wrap.clientHeight);
+      this.moveX = ((wrap.scrollLeft * 100) / wrap.clientWidth);
+    },
+
+    update() {
+      const wrap = this.wrap;
+      if (!wrap) return;
+
+      const heightPercentage = (wrap.clientHeight * 100 / wrap.scrollHeight);
+      const widthPercentage = (wrap.clientWidth * 100 / wrap.scrollWidth);
+
+      this.sizeHeight = (heightPercentage < 100) ? (heightPercentage + '%') : '';
+      this.sizeWidth = (widthPercentage < 100) ? (widthPercentage + '%') : '';
+    }
+  },
+
+  mounted() {
+    if (this.native) return;
+
+    this.$nextTick(this.update);
+
+    if (!this.noresize && this.$refs.resize) {
+      const resizeObserver = new ResizeObserver(() => {
+        this.update();
+      });
+      resizeObserver.observe(this.$refs.resize);
+      this._resizeObserver = resizeObserver;
+    }
+  },
+
+  beforeDestroy() {
+    if (this.native) return;
+    if (this._resizeObserver && this.$refs.resize) {
+      this._resizeObserver.disconnect();
+    }
+  }
+};
+</script>

package/src/packages/select/index.js

@@ -0,0 +1,15 @@
+/**
+ * Select 组件
+ * 提供基础选择功能，支持单选、多选、搜索等功能
+ */
+
+import UiSelect from './src/main.vue'
+import UiOption from './src/option.vue'
+
+// 自动安装
+UiSelect.install = function(Vue) {
+  Vue.component(UiSelect.name, UiSelect)
+  Vue.component(UiOption.name, UiOption)
+}
+
+export default UiSelect

package/src/packages/select/src/clickoutside.js

@@ -0,0 +1,20 @@
+/**
+ * Clickoutside 指令
+ * 点击元素外部时触发回调
+ */
+export default {
+  bind(el, binding, vnode) {
+    const documentHandler = function(e) {
+      if (!el.contains(e.target)) {
+        vnode.context[binding.expression](e)
+      }
+    }
+    el.__vueClickOutside__ = documentHandler
+    document.addEventListener('click', documentHandler)
+  },
+  update() {},
+  unbind(el) {
+    document.removeEventListener('click', el.__vueClickOutside__)
+    delete el.__vueClickOutside__
+  }
+}