@zkwq/business 0.0.4 → 0.0.6

package/src/components/base/ui/dialog/Index.vue

@@ -1,212 +0,0 @@
-<template>
-  <transition
-    name="dialog-fade"
-    @after-enter="afterEnter"
-    @after-leave="afterLeave">
-    <div
-      v-show="visible"
-      class="base-dialog__wrapper"
-      @click.self="handleWrapperClick">
-      <div
-        role="dialog"
-        :key="key"
-        aria-modal="true"
-        :aria-label="title || 'dialog'"
-        :class="['base-dialog', { 'is-fullscreen': fullscreen, 'base-dialog--center': center }, customClass]"
-        ref="dialog"
-        :style="style">
-        <div class="base-dialog__header">
-          <slot name="title">
-            <span class="base-dialog__title">{{ title }}</span>
-          </slot>
-          <button
-            type="button"
-            class="base-dialog__headerbtn"
-            aria-label="Close"
-            v-if="showClose"
-            @click="handleClose">
-            <i class="base-dialog__close base-icon base-icon-close"></i>
-          </button>
-        </div>
-        <div class="base-dialog__body" v-if="rendered"><slot></slot></div>
-        <div class="base-dialog__footer" v-if="$slots.footer">
-          <slot name="footer"></slot>
-        </div>
-      </div>
-    </div>
-  </transition>
-</template>
-
-<script>
-import Popup from '../util/popup'
-import Migrating from '../mixin/migrating'
-import emitter from '../mixin/emitter'
-
-export default {
-  name: 'BaseDialog',
-
-  mixins: [Popup, emitter, Migrating],
-
-  props: {
-    title: {
-      type: String,
-      default: ''
-    },
-
-    modal: {
-      type: Boolean,
-      default: true
-    },
-
-    modalAppendToBody: {
-      type: Boolean,
-      default: true
-    },
-
-    appendToBody: {
-      type: Boolean,
-      default: false
-    },
-
-    lockScroll: {
-      type: Boolean,
-      default: true
-    },
-
-    closeOnClickModal: {
-      type: Boolean,
-      default: true
-    },
-
-    closeOnPressEscape: {
-      type: Boolean,
-      default: true
-    },
-
-    showClose: {
-      type: Boolean,
-      default: true
-    },
-
-    width: String,
-
-    fullscreen: Boolean,
-
-    customClass: {
-      type: String,
-      default: ''
-    },
-
-    top: {
-      type: String,
-      default: '15vh'
-    },
-    beforeClose: Function,
-    center: {
-      type: Boolean,
-      default: false
-    },
-
-    destroyOnClose: Boolean
-  },
-
-  data() {
-    return {
-      closed: false,
-      key: 0
-    };
-  },
-
-  watch: {
-    visible(val) {
-      if (val) {
-        this.closed = false;
-        this.$emit('open');
-        this.$el.addEventListener('scroll', this.updatePopper);
-        this.$nextTick(() => {
-          this.$refs.dialog.scrollTop = 0;
-        });
-        if (this.appendToBody) {
-          document.body.appendChild(this.$el);
-        }
-      } else {
-        this.$el.removeEventListener('scroll', this.updatePopper);
-        if (!this.closed) this.$emit('close');
-        if (this.destroyOnClose) {
-          this.$nextTick(() => {
-            this.key++;
-          });
-        }
-      }
-    }
-  },
-
-  computed: {
-    style() {
-      let style = {};
-      if (!this.fullscreen) {
-        style.marginTop = this.top;
-        if (this.width) {
-          style.width = this.width;
-        }
-      }
-      return style;
-    }
-  },
-
-  methods: {
-    getMigratingConfig() {
-      return {
-        props: {
-          'size': 'size is removed.'
-        }
-      };
-    },
-    handleWrapperClick() {
-      if (!this.closeOnClickModal) return;
-      this.handleClose();
-    },
-    handleClose() {
-      if (typeof this.beforeClose === 'function') {
-        this.beforeClose(this.hide);
-      } else {
-        this.hide();
-      }
-    },
-    hide(cancel) {
-      if (cancel !== false) {
-        this.$emit('update:visible', false);
-        this.$emit('close');
-        this.closed = true;
-      }
-    },
-    updatePopper() {
-      this.broadcast('BaseSelectDropdown', 'updatePopper');
-      this.broadcast('BaseDropdownMenu', 'updatePopper');
-    },
-    afterEnter() {
-      this.$emit('opened');
-    },
-    afterLeave() {
-      this.$emit('closed');
-    }
-  },
-
-  mounted() {
-    if (this.visible) {
-      this.rendered = true;
-      this.open();
-      if (this.appendToBody) {
-        document.body.appendChild(this.$el);
-      }
-    }
-  },
-
-  destroyed() {
-    // if appendToBody is true, remove DOM node after destroy
-    if (this.appendToBody && this.$el && this.$el.parentNode) {
-      this.$el.parentNode.removeChild(this.$el);
-    }
-  }
-};
-</script>

package/src/components/base/ui/directive/repeat-click.js

@@ -1,24 +0,0 @@
-import { once, on } from '../util/dom';
-
-export default {
-  bind(el, binding, vnode) {
-    let interval = null;
-    let startTime;
-    const handler = () => vnode.context[binding.expression].apply();
-    const clear = () => {
-      if (Date.now() - startTime < 100) {
-        handler();
-      }
-      clearInterval(interval);
-      interval = null;
-    };
-
-    on(el, 'mousedown', (e) => {
-      if (e.button !== 0) return;
-      startTime = Date.now();
-      once(document, 'mouseup', clear);
-      clearInterval(interval);
-      interval = setInterval(handler, 100);
-    });
-  }
-};

package/src/components/base/ui/directive/ripple.js

@@ -1,303 +0,0 @@
-const DELAY_RIPPLE = 80
-
-function transform (el, value) {
-  el.style.transform = value
-  el.style.webkitTransform = value
-}
-
-function opacity (el, value) {
-  el.style.opacity = value.toString()
-}
-
-function isTouchEvent (e) {
-  return e.constructor.name === 'TouchEvent'
-}
-
-function isKeyboardEvent (e) {
-  return e.constructor.name === 'KeyboardEvent'
-}
-
-const calculate = (e, el, value) => {
-  let localX = 0
-  let localY = 0
-
-  if (!isKeyboardEvent(e)) {
-    const offset = el.getBoundingClientRect()
-    const target = isTouchEvent(e) ? e.touches[e.touches.length - 1] : e
-
-    localX = target.clientX - offset.left
-    localY = target.clientY - offset.top
-  }
-
-  let radius = 0
-  let scale = 0.3
-  if (el._ripple && el._ripple.circle) {
-    scale = 0.15
-    radius = el.offsetWidth / 2
-    radius = value.center ? radius : radius + Math.sqrt((localX - radius) ** 2 + (localY - radius) ** 2) / 4
-  } else {
-    radius = Math.sqrt(el.offsetWidth ** 2 + el.offsetHeight ** 2) / 2
-  }
-  const centerX = `${(el.offsetWidth - (radius * 2)) / 2}px`
-  const centerY = `${(el.offsetHeight - (radius * 2)) / 2}px`
-
-  const x = value.center ? centerX : `${localX - radius}px`
-  const y = value.center ? centerY : `${localY - radius}px`
-
-  return { radius, scale, x, y, centerX, centerY }
-}
-
-
-const ripples = {
-  /**
-   * @param {Event} e
-   * @param {Element} el
-   * @param {{ class?: string, center?: boolean }} [value={}]
-   */
-  show (e, el, value = {}) {
-    if (!el._ripple || !el._ripple.enabled) {
-      return
-    }
-
-    const container = document.createElement('span')
-    const animation = document.createElement('span')
-
-    container.appendChild(animation)
-    container.className = 'v-ripple__container'
-
-    if (value.class) {
-      container.className += ` ${value.class}`
-    }
-
-    const { radius, scale, x, y, centerX, centerY } = calculate(e, el, value)
-
-    const size = `${radius * 2}px`
-    animation.className = 'v-ripple__animation'
-    animation.style.width = size
-    animation.style.height = size
-
-    el.appendChild(container)
-
-    const computed = window.getComputedStyle(el)
-    if (computed && computed.position === 'static') {
-      el.style.position = 'relative'
-      el.dataset.previousPosition = 'static'
-    }
-
-    animation.classList.add('v-ripple__animation--enter')
-    animation.classList.add('v-ripple__animation--visible')
-    transform(animation, `translate(${x}, ${y}) scale3d(${scale},${scale},${scale})`)
-    opacity(animation, 0)
-    animation.dataset.activated = String(performance.now())
-
-    setTimeout(() => {
-      animation.classList.remove('v-ripple__animation--enter')
-      animation.classList.add('v-ripple__animation--in')
-      transform(animation, `translate(${centerX}, ${centerY}) scale3d(1,1,1)`)
-      opacity(animation, 0.25)
-    }, 0)
-  },
-
-
-  hide: el => {
-    if (!el || !el._ripple || !el._ripple.enabled) return
-
-    const ripples = el.getElementsByClassName('v-ripple__animation')
-
-    if (ripples.length === 0) return
-    const animation = ripples[ripples.length - 1]
-
-    if (animation.dataset.isHiding) return
-    else animation.dataset.isHiding = 'true'
-
-    const diff = performance.now() - Number(animation.dataset.activated)
-    const delay = Math.max(250 - diff, 0)
-
-    setTimeout(() => {
-      animation.classList.remove('v-ripple__animation--in')
-      animation.classList.add('v-ripple__animation--out')
-      opacity(animation, 0)
-
-      setTimeout(() => {
-        const ripples = el.getElementsByClassName('v-ripple__animation')
-        if (ripples.length === 1 && el.dataset.previousPosition) {
-          el.style.position = el.dataset.previousPosition
-          delete el.dataset.previousPosition
-        }
-
-        animation.parentNode && el.removeChild(animation.parentNode)
-      }, 300)
-    }, delay)
-  }
-}
-
-function isRippleEnabled (value) {
-  return typeof value === 'undefined' || !!value
-}
-
-function rippleShow (e) {
-  const value = {}
-  const element = e.currentTarget
-  if (!element || !element._ripple || element._ripple.touched) return
-  if (isTouchEvent(e)) {
-    element._ripple.touched = true
-    element._ripple.isTouch = true
-  } else {
-    // It's possible for touch events to fire
-    // as mouse events on Android/iOS, this
-    // will skip the event call if it has
-    // already been registered as touch
-    if (element._ripple.isTouch) return
-  }
-  value.center = element._ripple.centered || isKeyboardEvent(e)
-  if (element._ripple.class) {
-    value.class = element._ripple.class
-  }
-
-  if (isTouchEvent(e)) {
-    // already queued that shows or hides the ripple
-    if (element._ripple.showTimerCommit) return
-
-    element._ripple.showTimerCommit = () => {
-      ripples.show(e, element, value)
-    }
-    element._ripple.showTimer = window.setTimeout(() => {
-      if (element && element._ripple && element._ripple.showTimerCommit) {
-        element._ripple.showTimerCommit()
-        element._ripple.showTimerCommit = null
-      }
-    }, DELAY_RIPPLE)
-  } else {
-    ripples.show(e, element, value)
-  }
-}
-
-function rippleHide (e) {
-  const element = e.currentTarget
-  if (!element || !element._ripple) return
-
-  window.clearTimeout(element._ripple.showTimer)
-
-  // The touch interaction occurs before the show timer is triggered.
-  // We still want to show ripple effect.
-  if (e.type === 'touchend' && element._ripple.showTimerCommit) {
-    element._ripple.showTimerCommit()
-    element._ripple.showTimerCommit = null
-
-    // re-queue ripple hiding
-    element._ripple.showTimer = setTimeout(() => {
-      rippleHide(e)
-    })
-    return
-  }
-
-  window.setTimeout(() => {
-    if (element._ripple) {
-      element._ripple.touched = false
-    }
-  })
-  ripples.hide(element)
-}
-
-function rippleCancelShow (e) {
-  const element = e.currentTarget
-
-  if (!element || !element._ripple) return
-
-  if (element._ripple.showTimerCommit) {
-    element._ripple.showTimerCommit = null
-  }
-
-  window.clearTimeout(element._ripple.showTimer)
-}
-
-let keyboardRipple = false
-
-function keyboardRippleShow (e) {
-  if (!keyboardRipple && (e.keyCode === keyCodes.enter || e.keyCode === keyCodes.space)) {
-    keyboardRipple = true
-    rippleShow(e)
-  }
-}
-
-function keyboardRippleHide (e) {
-  keyboardRipple = false
-  rippleHide(e)
-}
-
-function updateRipple (el, binding, wasEnabled) {
-  const enabled = isRippleEnabled(binding.value)
-  if (!enabled) {
-    ripples.hide(el)
-  }
-  el._ripple = el._ripple || {}
-  el._ripple.enabled = enabled
-  const value = binding.value || {}
-  if (value.center) {
-    el._ripple.centered = true
-  }
-  if (value.class) {
-    el._ripple.class = binding.value.class
-  }
-  if (value.circle) {
-    el._ripple.circle = value.circle
-  }
-  if (enabled && !wasEnabled) {
-    el.addEventListener('touchstart', rippleShow, { passive: true })
-    el.addEventListener('touchend', rippleHide, { passive: true })
-    el.addEventListener('touchmove', rippleCancelShow, { passive: true })
-    el.addEventListener('touchcancel', rippleHide)
-
-    el.addEventListener('mousedown', rippleShow)
-    el.addEventListener('mouseup', rippleHide)
-    el.addEventListener('mouseleave', rippleHide)
-
-    el.addEventListener('keydown', keyboardRippleShow)
-    el.addEventListener('keyup', keyboardRippleHide)
-
-    // Anchor tags can be dragged, causes other hides to fail - #1537
-    el.addEventListener('dragstart', rippleHide, { passive: true })
-  } else if (!enabled && wasEnabled) {
-    removeListeners(el)
-  }
-}
-
-function removeListeners (el) {
-  el.removeEventListener('mousedown', rippleShow)
-  el.removeEventListener('touchstart', rippleShow)
-  el.removeEventListener('touchend', rippleHide)
-  el.removeEventListener('touchmove', rippleCancelShow)
-  el.removeEventListener('touchcancel', rippleHide)
-  el.removeEventListener('mouseup', rippleHide)
-  el.removeEventListener('mouseleave', rippleHide)
-  el.removeEventListener('keydown', keyboardRippleShow)
-  el.removeEventListener('keyup', keyboardRippleHide)
-  el.removeEventListener('dragstart', rippleHide)
-}
-
-function directive (el, binding) {
-  updateRipple(el, binding, false)
-}
-
-function unbind (el) {
-  delete el._ripple
-  removeListeners(el)
-}
-
-function update (el, binding) {
-  if (binding.value === binding.oldValue) {
-    return
-  }
-
-  const wasEnabled = isRippleEnabled(binding.oldValue)
-  updateRipple(el, binding, wasEnabled)
-}
-
-export const Ripple = {
-  name: 'ripple',
-  bind: directive,
-  unbind: unbind,
-  update: update
-}
-
-export default Ripple

package/src/components/base/ui/divider/Divider.vue

@@ -1,37 +0,0 @@
-<template functional>
-  <div
-    v-bind="data.attrs"
-    v-on="listeners"
-    :class="[data.staticClass, 'base-divider', `base-divider--${props.direction}`]"
-  >
-    <div
-      v-if="slots().default && props.direction !== 'vertical'"
-      :class="['base-divider__text', `is-${props.contentPosition}`]"
-     >
-      <slot />
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'BaseDivider',
-  props: {
-    direction: {
-      type: String,
-      default: 'horizontal',
-      validator(val) {
-        return ['horizontal', 'vertical'].indexOf(val) !== -1
-      }
-    },
-    contentPosition: {
-      type: String,
-      default: 'center',
-      validator(val) {
-        return ['left', 'center', 'right'].indexOf(val) !== -1
-      }
-    }
-  }
-}
-
-</script>