@zkwq/business 0.0.1

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

@@ -0,0 +1,212 @@
+<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

@@ -0,0 +1,24 @@
+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

@@ -0,0 +1,303 @@
+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

@@ -0,0 +1,37 @@
+<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>