@zkwq/business 0.0.1

package/src/components/base/ui/util/vue-popper.js

@@ -0,0 +1,188 @@
+import Vue from 'vue'
+import { PopupManager } from './popup'
+import Popper from './popper'
+const PopperJS = Vue.prototype.$isServer ? function() {} : Popper
+const stop = e => e.stopPropagation()
+
+export default {
+  props: {
+    transformOrigin: {
+      type: [Boolean, String],
+      default: true
+    },
+    placement: {
+      type: String,
+      default: 'bottom'
+    },
+    boundariesPadding: {
+      type: Number,
+      default: 5
+    },
+    reference: {},
+    popper: {},
+    offset: {
+      default: 0
+    },
+    value: Boolean,
+    visibleArrow: Boolean,
+    arrowOffset: {
+      type: Number,
+      default: 35
+    },
+    appendToBody: {
+      type: Boolean,
+      default: true
+    },
+    popperOptions: {
+      type: Object,
+      default() {
+        return {
+          gpuAcceleration: false
+        }
+      }
+    }
+  },
+
+  data() {
+    return {
+      showPopper: false,
+      currentPlacement: ''
+    }
+  },
+
+  watch: {
+    value: {
+      immediate: true,
+      handler(val) {
+        this.showPopper = val
+        this.$emit('input', val)
+      }
+    },
+
+    showPopper(val) {
+      if (this.disabled) return
+      val ? this.updatePopper() : this.destroyPopper()
+      this.$emit('input', val)
+    }
+  },
+
+  methods: {
+    createPopper() {
+      if (this.$isServer) return
+      this.currentPlacement = this.currentPlacement || this.placement
+      if (!/^(top|bottom|left|right)(-start|-end)?$/g.test(this.currentPlacement)) {
+        return
+      }
+
+      const options = this.popperOptions
+      const popper = this.popperElm = this.popperElm || this.popper || this.$refs.popper
+      let reference = this.referenceElm = this.referenceElm || this.reference || this.$refs.reference
+
+      if (!reference &&
+        this.$slots.reference &&
+        this.$slots.reference[0]) {
+        reference = this.referenceElm = this.$slots.reference[0].elm
+      }
+
+      if (!popper || !reference) return
+      if (this.visibleArrow) this.appendArrow(popper)
+      if (this.appendToBody) document.body.appendChild(this.popperElm)
+      if (this.popperJS && this.popperJS.destroy) {
+        this.popperJS.destroy()
+      }
+
+      options.placement = this.currentPlacement
+      options.offset = this.offset
+      options.arrowOffset = this.arrowOffset
+      this.popperJS = new PopperJS(reference, popper, options)
+      this.popperJS.onCreate(_ => {
+        this.$emit('created', this)
+        this.resetTransformOrigin()
+        this.$nextTick(this.updatePopper)
+      })
+      if (typeof options.onUpdate === 'function') {
+        this.popperJS.onUpdate(options.onUpdate)
+      }
+      this.popperJS._popper.style.zIndex = PopupManager.nextZIndex()
+      this.popperElm.addEventListener('click', stop)
+    },
+
+    updatePopper() {
+      const popperJS = this.popperJS
+      if (popperJS) {
+        popperJS.update()
+        if (popperJS._popper) {
+          popperJS._popper.style.zIndex = PopupManager.nextZIndex()
+        }
+      } else {
+        this.createPopper()
+      }
+    },
+
+    doDestroy(forceDestroy) {
+      /* istanbul ignore if */
+      if (!this.popperJS || (this.showPopper && !forceDestroy)) return
+      this.popperJS.destroy()
+      this.popperJS = null
+    },
+
+    destroyPopper() {
+      if (this.popperJS) {
+        this.resetTransformOrigin()
+      }
+    },
+
+    resetTransformOrigin() {
+      if (!this.transformOrigin) return
+      let placementMap = {
+        top: 'bottom',
+        bottom: 'top',
+        left: 'right',
+        right: 'left'
+      }
+      let placement = this.popperJS._popper.getAttribute('x-placement').split('-')[0]
+      let origin = placementMap[placement]
+      this.popperJS._popper.style.transformOrigin = typeof this.transformOrigin === 'string'
+        ? this.transformOrigin
+        : ['top', 'bottom'].indexOf(placement) > -1 ? `center ${ origin }` : `${ origin } center`
+    },
+
+    appendArrow(element) {
+      let hash
+      if (this.appended) {
+        return
+      }
+
+      this.appended = true
+
+      for (let item in element.attributes) {
+        if (/^_v-/.test(element.attributes[item].name)) {
+          hash = element.attributes[item].name
+          break
+        }
+      }
+
+      const arrow = document.createElement('div')
+
+      if (hash) {
+        arrow.setAttribute(hash, '')
+      }
+      arrow.setAttribute('x-arrow', '')
+      arrow.className = 'popper__arrow'
+      element.appendChild(arrow)
+    }
+  },
+
+  beforeDestroy() {
+    this.doDestroy(true)
+    if (this.popperElm && this.popperElm.parentNode === document.body) {
+      this.popperElm.removeEventListener('click', stop)
+      document.body.removeChild(this.popperElm)
+    }
+  },
+
+  // call destroy in keep-alive mode
+  deactivated() {
+    this.$options.beforeDestroy[0].call(this)
+  }
+}

package/src/components/normal/AggsItemH.vue

@@ -0,0 +1,139 @@
+<template>
+  <div class="aggs_item">
+    <div class="name">{{ title }}：</div>
+    <ul class="item" ref="agg_item" :style="{ height: more ? 'auto' : '27px' }">
+      <li
+        :class="item.selected ? 'selected' : ''"
+        v-for="(item, index) in itemDatas"
+        :key="title + index"
+        @click="selectChange(item)"
+      >
+        {{ item.label }}{{ item.num ? `（${item.num}）` : "" }}
+      </li>
+    </ul>
+    <div v-if="isShowMore && more" class="more" @click="more = !more">
+      收起&nbsp;<span class="el-icon-arrow-up"></span>
+    </div>
+    <div v-if="isShowMore && !more" class="more" @click="more = !more">
+      展开&nbsp;<span class="el-icon-arrow-down"></span>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: "AggsItemH",
+  data() {
+    return {
+      itemDatas: [],
+      isShowMore: false,
+      more: false,
+    };
+  },
+  props: {
+    title: String,
+    datas: Array,
+    single: Boolean,
+  },
+  watch: {
+    datas: {
+      handler(newValue) {
+        this.itemDatas = newValue;
+        this.more = true;
+        this.$nextTick(() => {
+          if (this.$refs["agg_item"].clientHeight > 28) {
+            this.isShowMore = true;
+          }
+          this.more = false;
+        });
+      },
+      immediate: true,
+    },
+  },
+  methods: {
+    selectChange(item) {
+      if (item.label == "全部") {
+        this.itemDatas.forEach((e) => (e.selected = false));
+        item.selected = true;
+        this.$emit(
+          "changed",
+          this.itemDatas
+            .filter((e) => e.selected)
+            .filter((e) => e.label != "全部")
+        );
+      } else {
+        if (this.single) {
+          this.itemDatas.forEach((e) => (e.selected = false));
+        }
+        item.selected = !item.selected;
+        if (item.selected) {
+          this.itemDatas
+            .filter((e) => e.label == "全部")
+            .forEach((e) => (e.selected = false));
+        } else {
+          if (this.itemDatas.filter((e) => e.selected).length == 0) {
+            this.itemDatas
+              .filter((e) => e.label == "全部")
+              .forEach((e) => (e.selected = true));
+          }
+        }
+        this.$emit(
+          "changed",
+          this.itemDatas
+            .filter((e) => e.selected)
+            .filter((e) => e.label != "全部")
+        );
+      }
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+@import "../base/ui/style/var.scss";
+.aggs_item {
+  width: 100%;
+  height: auto;
+  overflow: hidden;
+  display: flex;
+  padding-top: 12px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid $--border-color-base;
+  .name {
+    width: 100px;
+    color: $--color-text-secondary;
+    padding: 2px 8px;
+  }
+  .item {
+    flex: 1;
+    height: auto;
+    overflow: hidden;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    li {
+      padding: 2px 8px;
+      cursor: pointer;
+      margin: 0px 8px;
+      margin-bottom: 4px;
+    }
+    li:hover {
+      background: $--color-primary-light-3;
+      color: white;
+      border-radius: 4px;
+    }
+    .selected {
+      background: $--color-primary-light-3;
+      color: white;
+      border-radius: 4px;
+    }
+  }
+  .more {
+    width: 50px;
+    height: auto;
+    overflow: hidden;
+    text-align: center;
+    color: $--color-primary;
+    cursor: pointer;
+    padding-top: 4px;
+  }
+}
+</style>

package/src/index.js

@@ -0,0 +1,10 @@
+export * from './components/base/ui';
+import './style/index.scss';
+import BaseUI from './components/base/ui';
+export default BaseUI;
+
+import AggsItemH from './components/normal/AggsItemH.vue'
+
+export {
+  AggsItemH
+}