@zkwq/business 0.0.4 → 0.0.6

package/src/components/base/ui/select/SelectDropdown.vue

@@ -1,74 +0,0 @@
-<template>
-  <div
-    class="base-select-dropdown base-popper"
-    :class="[{ 'is-multiple': $parent.multiple }, popperClass]"
-    :style="{ minWidth: minWidth }">
-    <slot></slot>
-  </div>
-</template>
-
-<script type="text/babel">
-  import Popper from '../util/vue-popper'
-
-  export default {
-    name: 'BaseSelectDropdown',
-
-    componentName: 'BaseSelectDropdown',
-
-    mixins: [Popper],
-
-    props: {
-      placement: {
-        default: 'bottom-start'
-      },
-
-      boundariesPadding: {
-        default: 0
-      },
-
-      popperOptions: {
-        default() {
-          return {
-            gpuAcceleration: false
-          }
-        }
-      },
-
-      visibleArrow: {
-        default: false
-      },
-
-      appendToBody: {
-        type: Boolean,
-        default: true
-      }
-    },
-
-    data() {
-      return {
-        minWidth: ''
-      }
-    },
-
-    computed: {
-      popperClass() {
-        return this.$parent.popperClass
-      }
-    },
-
-    watch: {
-      '$parent.inputWidth'() {
-        this.minWidth = this.$parent.$el.getBoundingClientRect().width + 'px'
-      }
-    },
-
-    mounted() {
-      this.referenceElm = this.$parent.$refs.reference.$el
-      this.$parent.popperElm = this.popperElm = this.$el
-      this.$on('updatePopper', () => {
-        if (this.$parent.visible) this.updatePopper()
-      })
-      this.$on('destroyPopper', this.destroyPopper)
-    }
-  }
-</script>

package/src/components/base/ui/select/navigation-mixin.js

@@ -1,54 +0,0 @@
-export default {
-  data() {
-    return {
-      hoverOption: -1
-    }
-  },
-
-  computed: {
-    optionsAllDisabled() {
-      return this.options.filter(option => option.visible).every(option => option.disabled)
-    }
-  },
-
-  watch: {
-    hoverIndex(val) {
-      if (typeof val === 'number' && val > -1) {
-        this.hoverOption = this.options[val] || {}
-      }
-      this.options.forEach(option => {
-        option.hover = this.hoverOption === option
-      })
-    }
-  },
-
-  methods: {
-    navigateOptions(direction) {
-      if (!this.visible) {
-        this.visible = true
-        return
-      }
-      if (this.options.length === 0 || this.filteredOptionsCount === 0) return
-      if (!this.optionsAllDisabled) {
-        if (direction === 'next') {
-          this.hoverIndex++
-          if (this.hoverIndex === this.options.length) {
-            this.hoverIndex = 0
-          }
-        } else if (direction === 'prev') {
-          this.hoverIndex--
-          if (this.hoverIndex < 0) {
-            this.hoverIndex = this.options.length - 1
-          }
-        }
-        const option = this.options[this.hoverIndex]
-        if (option.disabled === true ||
-          option.groupDisabled === true ||
-          !option.visible) {
-          this.navigateOptions(direction)
-        }
-        this.$nextTick(() => this.scrollToOption(this.hoverOption))
-      }
-    }
-  }
-}

package/src/components/base/ui/skeleton/index.js

@@ -1,8 +0,0 @@
-import Skeleton from './src/index.vue';
-
-/* istanbul ignore next */
-Skeleton.install = function(Vue) {
-  Vue.component(Skeleton.name, Skeleton);
-};
-
-export default Skeleton;

package/src/components/base/ui/skeleton/src/img-placeholder.vue

@@ -1,16 +0,0 @@
-<template>
-  <svg
-    viewBox="0 0 1024 1024"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M64 896V128h896v768H64z m64-128l192-192 116.352 116.352L640 448l256 307.2V192H128v576z m224-480a96 96 0 1 1-0.064 192.064A96 96 0 0 1 352 288z"
-    />
-  </svg>
-</template>
-
-<script>
-export default {
-  name: 'ImgPlaceholder'
-};
-</script>

package/src/components/base/ui/skeleton/src/index.vue

@@ -1,80 +0,0 @@
-<template>
-  <div class="base-skeleton">
-    <template v-if="uiLoading">
-      <div :class="['base-skeleton', animated ? 'is-animated' : '', ]" v-bind="$attrs">
-        <template v-for="i in count">
-          <slot v-if="loading" name="template">
-            <base-skeleton-item
-              v-for="item in rows"
-              :key="`${i}-${item}`"
-              :class="{
-                'base-skeleton__paragraph': item !== 1,
-                'is-first': item === 1,
-                'is-last': item === rows && rows > 1,
-              }"
-              variant="p"
-            />
-          </slot>
-        </template>
-      </div>
-    </template>
-    <template v-else>
-      <slot v-bind="$attrs"></slot>
-    </template>
-  </div>
-</template>
-<script>
-import BaseSkeletonItem from './item';
-export default {
-  name: 'BaseSkeleton',
-  components: {
-    BaseSkeletonItem
-  },
-  props: {
-    animated: {
-      type: Boolean,
-      default: false
-    },
-    count: {
-      type: Number,
-      default: 1
-    },
-    rows: {
-      type: Number,
-      default: 4
-    },
-    loading: {
-      type: Boolean,
-      default: true
-    },
-    throttle: {
-      type: Number,
-      default: 0
-    }
-  },
-  watch: {
-    loading: {
-      handler(loading) {
-        if (this.throttle <= 0) {
-          this.uiLoading = loading;
-          return;
-        }
-        if (loading) {
-          clearTimeout(this.timeoutHandle);
-          this.timeoutHandle = setTimeout(() => {
-            this.uiLoading = this.loading;
-          }, this.throttle);
-        } else {
-          this.uiLoading = loading;
-        }
-      },
-      immediate: true
-    }
-  },
-  data() {
-    return {
-      uiLoading: this.throttle <= 0 ? this.loading : false
-    };
-  }
-};
-</script>

package/src/components/base/ui/skeleton/src/item.vue

@@ -1,22 +0,0 @@
-<template>
-  <div :class="['base-skeleton__item', `base-skeleton__${variant}`]">
-    <img-placeholder v-if="variant === 'image'" />
-  </div>
-</template>
-
-<script>
-  import ImgPlaceholder from './img-placeholder';
-
-  export default {
-    name: 'BaseSkeletonItem',
-    props: {
-      variant: {
-        type: String,
-        default: 'text'
-      }
-    },
-    components: {
-      [ImgPlaceholder.name]: ImgPlaceholder
-    }
-  };
-</script>

package/src/components/base/ui/skeleton-item/index.js

@@ -1,8 +0,0 @@
-import SkeletonItem from '../skeleton/src/item';
-
-/* istanbul ignore next */
-SkeletonItem.install = function(Vue) {
-  Vue.component(SkeletonItem.name, SkeletonItem);
-};
-
-export default SkeletonItem;

package/src/components/base/ui/slider/button.vue

@@ -1,238 +0,0 @@
-<template>
-  <div
-    class="base-slider__button-wrapper"
-    @mouseenter="handleMouseEnter"
-    @mouseleave="handleMouseLeave"
-    @mousedown="onButtonDown"
-    @touchstart="onButtonDown"
-    :class="{ 'hover': hovering, 'dragging': dragging }"
-    :style="wrapperStyle"
-    ref="button"
-    tabindex="0"
-    @focus="handleMouseEnter"
-    @blur="handleMouseLeave"
-    @keydown.left="onLeftKeyDown"
-    @keydown.right="onRightKeyDown"
-    @keydown.down.prevent="onLeftKeyDown"
-    @keydown.up.prevent="onRightKeyDown"
-  >
-    <base-tooltip
-      placement="top"
-      ref="tooltip"
-      :popper-class="tooltipClass"
-      :disabled="!showTooltip">
-      <span slot="content">{{ formatValue }}</span>
-      <div class="base-slider__button" :class="{ 'hover': hovering, 'dragging': dragging }"></div>
-    </base-tooltip>
-  </div>
-</template>
-
-<script>
-  import BaseTooltip from '../tooltip/tooltip';
-
-  export default {
-    name: 'BaseSliderButton',
-
-    components: {
-      BaseTooltip
-    },
-
-    props: {
-      value: {
-        type: Number,
-        default: 0
-      },
-      vertical: {
-        type: Boolean,
-        default: false
-      },
-      tooltipClass: String
-    },
-
-    data() {
-      return {
-        hovering: false,
-        dragging: false,
-        isClick: false,
-        startX: 0,
-        currentX: 0,
-        startY: 0,
-        currentY: 0,
-        startPosition: 0,
-        newPosition: null,
-        oldValue: this.value
-      };
-    },
-
-    computed: {
-      disabled() {
-        return this.$parent.sliderDisabled;
-      },
-
-      max() {
-        return this.$parent.max;
-      },
-
-      min() {
-        return this.$parent.min;
-      },
-
-      step() {
-        return this.$parent.step;
-      },
-
-      showTooltip() {
-        return this.$parent.showTooltip;
-      },
-
-      precision() {
-        return this.$parent.precision;
-      },
-
-      currentPosition() {
-        return `${ (this.value - this.min) / (this.max - this.min) * 100 }%`;
-      },
-
-      enableFormat() {
-        return this.$parent.formatTooltip instanceof Function;
-      },
-
-      formatValue() {
-        return this.enableFormat && this.$parent.formatTooltip(this.value) || this.value;
-      },
-
-      wrapperStyle() {
-        return this.vertical ? { bottom: this.currentPosition } : { left: this.currentPosition };
-      }
-    },
-
-    watch: {
-      dragging(val) {
-        this.$parent.dragging = val;
-      }
-    },
-
-    methods: {
-      displayTooltip() {
-        this.$refs.tooltip && (this.$refs.tooltip.showPopper = true);
-      },
-
-      hideTooltip() {
-        this.$refs.tooltip && (this.$refs.tooltip.showPopper = false);
-      },
-
-      handleMouseEnter() {
-        this.hovering = true;
-        this.displayTooltip();
-      },
-
-      handleMouseLeave() {
-        this.hovering = false;
-        this.hideTooltip();
-      },
-
-      onButtonDown(event) {
-        if (this.disabled) return;
-        event.preventDefault();
-        this.onDragStart(event);
-        window.addEventListener('mousemove', this.onDragging);
-        window.addEventListener('touchmove', this.onDragging);
-        window.addEventListener('mouseup', this.onDragEnd);
-        window.addEventListener('touchend', this.onDragEnd);
-        window.addEventListener('contextmenu', this.onDragEnd);
-      },
-      onLeftKeyDown() {
-        if (this.disabled) return;
-        this.newPosition = parseFloat(this.currentPosition) - this.step / (this.max - this.min) * 100;
-        this.setPosition(this.newPosition);
-        this.$parent.emitChange();
-      },
-      onRightKeyDown() {
-        if (this.disabled) return;
-        this.newPosition = parseFloat(this.currentPosition) + this.step / (this.max - this.min) * 100;
-        this.setPosition(this.newPosition);
-        this.$parent.emitChange();
-      },
-      onDragStart(event) {
-        this.dragging = true;
-        this.isClick = true;
-        if (event.type === 'touchstart') {
-          event.clientY = event.touches[0].clientY;
-          event.clientX = event.touches[0].clientX;
-        }
-        if (this.vertical) {
-          this.startY = event.clientY;
-        } else {
-          this.startX = event.clientX;
-        }
-        this.startPosition = parseFloat(this.currentPosition);
-        this.newPosition = this.startPosition;
-      },
-
-      onDragging(event) {
-        if (this.dragging) {
-          this.isClick = false;
-          this.displayTooltip();
-          this.$parent.resetSize();
-          let diff = 0;
-          if (event.type === 'touchmove') {
-            event.clientY = event.touches[0].clientY;
-            event.clientX = event.touches[0].clientX;
-          }
-          if (this.vertical) {
-            this.currentY = event.clientY;
-            diff = (this.startY - this.currentY) / this.$parent.sliderSize * 100;
-          } else {
-            this.currentX = event.clientX;
-            diff = (this.currentX - this.startX) / this.$parent.sliderSize * 100;
-          }
-          this.newPosition = this.startPosition + diff;
-          this.setPosition(this.newPosition);
-        }
-      },
-
-      onDragEnd() {
-        if (this.dragging) {
-          /*
-           * 防止在 mouseup 后立即触发 click，导致滑块有几率产生一小段位移
-           * 不使用 preventDefault 是因为 mouseup 和 click 没有注册在同一个 DOM 上
-           */
-          setTimeout(() => {
-            this.dragging = false;
-            this.hideTooltip();
-            if (!this.isClick) {
-              this.setPosition(this.newPosition);
-              this.$parent.emitChange();
-            }
-          }, 0);
-          window.removeEventListener('mousemove', this.onDragging);
-          window.removeEventListener('touchmove', this.onDragging);
-          window.removeEventListener('mouseup', this.onDragEnd);
-          window.removeEventListener('touchend', this.onDragEnd);
-          window.removeEventListener('contextmenu', this.onDragEnd);
-        }
-      },
-
-      setPosition(newPosition) {
-        if (newPosition === null || isNaN(newPosition)) return;
-        if (newPosition < 0) {
-          newPosition = 0;
-        } else if (newPosition > 100) {
-          newPosition = 100;
-        }
-        const lengthPerStep = 100 / ((this.max - this.min) / this.step);
-        const steps = Math.round(newPosition / lengthPerStep);
-        let value = steps * lengthPerStep * (this.max - this.min) * 0.01 + this.min;
-        value = parseFloat(value.toFixed(this.precision));
-        this.$emit('input', value);
-        this.$nextTick(() => {
-          this.displayTooltip();
-          this.$refs.tooltip && this.$refs.tooltip.updatePopper();
-        });
-        if (!this.dragging && this.value !== this.oldValue) {
-          this.oldValue = this.value;
-        }
-      }
-    }
-  };
-</script>