@zkwq/business 0.0.1

package/src/components/base/ui/util/popup/index.js

@@ -0,0 +1,218 @@
+import Vue from 'vue'
+import merge from '../merge'
+import PopupManager from './popup-manager'
+import getScrollBarWidth from '../scrollbar-width'
+import { getStyle, addClass, removeClass, hasClass } from '../dom'
+
+let idSeed = 1
+
+let scrollBarWidth
+
+export default {
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    openDelay: {},
+    closeDelay: {},
+    zIndex: {},
+    modal: {
+      type: Boolean,
+      default: false
+    },
+    modalFade: {
+      type: Boolean,
+      default: true
+    },
+    modalClass: {},
+    modalAppendToBody: {
+      type: Boolean,
+      default: false
+    },
+    lockScroll: {
+      type: Boolean,
+      default: true
+    },
+    closeOnPressEscape: {
+      type: Boolean,
+      default: false
+    },
+    closeOnClickModal: {
+      type: Boolean,
+      default: false
+    }
+  },
+
+  beforeMount() {
+    this._popupId = 'popup-' + idSeed++
+    PopupManager.register(this._popupId, this)
+  },
+
+  beforeDestroy() {
+    PopupManager.deregister(this._popupId)
+    PopupManager.closeModal(this._popupId)
+
+    this.restoreBodyStyle()
+  },
+
+  data() {
+    return {
+      opened: false,
+      bodyPaddingRight: null,
+      computedBodyPaddingRight: 0,
+      withoutHiddenClass: true,
+      rendered: false
+    }
+  },
+
+  watch: {
+    visible(val) {
+      if (val) {
+        if (this._opening) return
+        if (!this.rendered) {
+          this.rendered = true
+          Vue.nextTick(() => {
+            this.open()
+          })
+        } else {
+          this.open()
+        }
+      } else {
+        this.close()
+      }
+    }
+  },
+
+  methods: {
+    open(options) {
+      if (!this.rendered) {
+        this.rendered = true
+      }
+
+      const props = merge({}, this.$props || this, options)
+
+      if (this._closeTimer) {
+        clearTimeout(this._closeTimer)
+        this._closeTimer = null
+      }
+      clearTimeout(this._openTimer)
+
+      const openDelay = Number(props.openDelay)
+      if (openDelay > 0) {
+        this._openTimer = setTimeout(() => {
+          this._openTimer = null
+          this.doOpen(props)
+        }, openDelay)
+      } else {
+        this.doOpen(props)
+      }
+    },
+
+    doOpen(props) {
+      if (this.$isServer) return
+      if (this.willOpen && !this.willOpen()) return
+      if (this.opened) return
+
+      this._opening = true
+
+      const dom = this.$el
+
+      const modal = props.modal
+
+      const zIndex = props.zIndex
+      if (zIndex) {
+        PopupManager.zIndex = zIndex
+      }
+
+      if (modal) {
+        if (this._closing) {
+          PopupManager.closeModal(this._popupId)
+          this._closing = false
+        }
+        PopupManager.openModal(this._popupId, PopupManager.nextZIndex(), this.modalAppendToBody ? undefined : dom, props.modalClass, props.modalFade)
+        if (props.lockScroll) {
+          this.withoutHiddenClass = !hasClass(document.body, 'base-popup-parent--hidden')
+          if (this.withoutHiddenClass) {
+            this.bodyPaddingRight = document.body.style.paddingRight
+            this.computedBodyPaddingRight = parseInt(getStyle(document.body, 'paddingRight'), 10)
+          }
+          scrollBarWidth = getScrollBarWidth()
+          let bodyHasOverflow = document.documentElement.clientHeight < document.body.scrollHeight
+          let bodyOverflowY = getStyle(document.body, 'overflowY')
+          if (scrollBarWidth > 0 && (bodyHasOverflow || bodyOverflowY === 'scroll') && this.withoutHiddenClass) {
+            document.body.style.paddingRight = this.computedBodyPaddingRight + scrollBarWidth + 'px'
+          }
+          addClass(document.body, 'base-popup-parent--hidden')
+        }
+      }
+
+      if (getComputedStyle(dom).position === 'static') {
+        dom.style.position = 'absolute'
+      }
+
+      dom.style.zIndex = PopupManager.nextZIndex()
+      this.opened = true
+
+      this.onOpen && this.onOpen()
+
+      this.doAfterOpen()
+    },
+
+    doAfterOpen() {
+      this._opening = false
+    },
+
+    close() {
+      if (this.willClose && !this.willClose()) return
+
+      if (this._openTimer !== null) {
+        clearTimeout(this._openTimer)
+        this._openTimer = null
+      }
+      clearTimeout(this._closeTimer)
+
+      const closeDelay = Number(this.closeDelay)
+
+      if (closeDelay > 0) {
+        this._closeTimer = setTimeout(() => {
+          this._closeTimer = null
+          this.doClose()
+        }, closeDelay)
+      } else {
+        this.doClose()
+      }
+    },
+
+    doClose() {
+      this._closing = true
+
+      this.onClose && this.onClose()
+
+      if (this.lockScroll) {
+        setTimeout(this.restoreBodyStyle, 200)
+      }
+
+      this.opened = false
+
+      this.doAfterClose()
+    },
+
+    doAfterClose() {
+      PopupManager.closeModal(this._popupId)
+      this._closing = false
+    },
+
+    restoreBodyStyle() {
+      if (this.modal && this.withoutHiddenClass) {
+        document.body.style.paddingRight = this.bodyPaddingRight
+        removeClass(document.body, 'base-popup-parent--hidden')
+      }
+      this.withoutHiddenClass = true
+    }
+  }
+}
+
+export {
+  PopupManager
+}

package/src/components/base/ui/util/popup/popup-manager.js

@@ -0,0 +1,194 @@
+import Vue from 'vue'
+import { addClass, removeClass } from '../dom'
+
+let hasModal = false
+let hasInitZIndex = false
+let zIndex
+
+const getModal = function() {
+  if (Vue.prototype.$isServer) return
+  let modalDom = PopupManager.modalDom
+  if (modalDom) {
+    hasModal = true
+  } else {
+    hasModal = false
+    modalDom = document.createElement('div')
+    PopupManager.modalDom = modalDom
+
+    modalDom.addEventListener('touchmove', function(event) {
+      event.preventDefault()
+      event.stopPropagation()
+    })
+
+    modalDom.addEventListener('click', function() {
+      PopupManager.doOnModalClick && PopupManager.doOnModalClick()
+    })
+  }
+
+  return modalDom
+}
+
+const instances = {}
+
+const PopupManager = {
+  modalFade: true,
+
+  getInstance: function(id) {
+    return instances[id]
+  },
+
+  register: function(id, instance) {
+    if (id && instance) {
+      instances[id] = instance
+    }
+  },
+
+  deregister: function(id) {
+    if (id) {
+      instances[id] = null
+      delete instances[id]
+    }
+  },
+
+  nextZIndex: function() {
+    return PopupManager.zIndex++
+  },
+
+  modalStack: [],
+
+  doOnModalClick: function() {
+    const topItem = PopupManager.modalStack[PopupManager.modalStack.length - 1]
+    if (!topItem) return
+
+    const instance = PopupManager.getInstance(topItem.id)
+    if (instance && instance.closeOnClickModal) {
+      instance.close()
+    }
+  },
+
+  openModal: function(id, zIndex, dom, modalClass, modalFade) {
+    if (Vue.prototype.$isServer) return
+    if (!id || zIndex === undefined) return
+    this.modalFade = modalFade
+
+    const modalStack = this.modalStack
+
+    for (let i = 0, j = modalStack.length; i < j; i++) {
+      const item = modalStack[i]
+      if (item.id === id) {
+        return
+      }
+    }
+
+    const modalDom = getModal()
+
+    addClass(modalDom, 'v-modal')
+    if (this.modalFade && !hasModal) {
+      addClass(modalDom, 'v-modal-enter')
+    }
+    if (modalClass) {
+      let classArr = modalClass.trim().split(/\s+/)
+      classArr.forEach(item => addClass(modalDom, item))
+    }
+    setTimeout(() => {
+      removeClass(modalDom, 'v-modal-enter')
+    }, 200)
+
+    if (dom && dom.parentNode && dom.parentNode.nodeType !== 11) {
+      dom.parentNode.appendChild(modalDom)
+    } else {
+      document.body.appendChild(modalDom)
+    }
+
+    if (zIndex) {
+      modalDom.style.zIndex = zIndex
+    }
+    modalDom.tabIndex = 0
+    modalDom.style.display = ''
+
+    this.modalStack.push({ id: id, zIndex: zIndex, modalClass: modalClass })
+  },
+
+  closeModal: function(id) {
+    const modalStack = this.modalStack
+    const modalDom = getModal()
+
+    if (modalStack.length > 0) {
+      const topItem = modalStack[modalStack.length - 1]
+      if (topItem.id === id) {
+        if (topItem.modalClass) {
+          let classArr = topItem.modalClass.trim().split(/\s+/)
+          classArr.forEach(item => removeClass(modalDom, item))
+        }
+
+        modalStack.pop()
+        if (modalStack.length > 0) {
+          modalDom.style.zIndex = modalStack[modalStack.length - 1].zIndex
+        }
+      } else {
+        for (let i = modalStack.length - 1; i >= 0; i--) {
+          if (modalStack[i].id === id) {
+            modalStack.splice(i, 1)
+            break
+          }
+        }
+      }
+    }
+
+    if (modalStack.length === 0) {
+      if (this.modalFade) {
+        addClass(modalDom, 'v-modal-leave')
+      }
+      setTimeout(() => {
+        if (modalStack.length === 0) {
+          if (modalDom.parentNode) modalDom.parentNode.removeChild(modalDom)
+          modalDom.style.display = 'none'
+          PopupManager.modalDom = undefined
+        }
+        removeClass(modalDom, 'v-modal-leave')
+      }, 200)
+    }
+  }
+}
+
+Object.defineProperty(PopupManager, 'zIndex', {
+  configurable: true,
+  get() {
+    if (!hasInitZIndex) {
+      zIndex = zIndex || (Vue.prototype.$ELEMENT || {}).zIndex || 2000
+      hasInitZIndex = true
+    }
+    return zIndex
+  },
+  set(value) {
+    zIndex = value
+  }
+})
+
+const getTopPopup = function() {
+  if (Vue.prototype.$isServer) return
+  if (PopupManager.modalStack.length > 0) {
+    const topPopup = PopupManager.modalStack[PopupManager.modalStack.length - 1]
+    if (!topPopup) return
+    const instance = PopupManager.getInstance(topPopup.id)
+
+    return instance
+  }
+}
+
+if (!Vue.prototype.$isServer) {
+  // handle `esc` key when the popup is shown
+  window.addEventListener('keydown', function(event) {
+    if (event.keyCode === 27) {
+      const topPopup = getTopPopup()
+
+      if (topPopup && topPopup.closeOnPressEscape) {
+        topPopup.handleClose
+          ? topPopup.handleClose()
+          : (topPopup.handleAction ? topPopup.handleAction('cancel') : topPopup.close())
+      }
+    }
+  })
+}
+
+export default PopupManager

package/src/components/base/ui/util/resize-events.js

@@ -0,0 +1,32 @@
+import ResizeObserver from 'resize-observer-polyfill'
+
+const isServer = typeof window === 'undefined'
+
+const resizeHandler = function(entries) {
+  for (let entry of entries) {
+    const listeners = entry.target.__resizeListeners__ || []
+    if (listeners.length) {
+      listeners.forEach(fn => {
+        fn()
+      })
+    }
+  }
+}
+
+export const addResizeListener = function(element, fn) {
+  if (isServer) return
+  if (!element.__resizeListeners__) {
+    element.__resizeListeners__ = []
+    element.__ro__ = new ResizeObserver(resizeHandler)
+    element.__ro__.observe(element)
+  }
+  element.__resizeListeners__.push(fn)
+}
+
+export const removeResizeListener = function(element, fn) {
+  if (!element || !element.__resizeListeners__) return
+  element.__resizeListeners__.splice(element.__resizeListeners__.indexOf(fn), 1)
+  if (!element.__resizeListeners__.length) {
+    element.__ro__.disconnect()
+  }
+}

package/src/components/base/ui/util/scroll-into-view.js

@@ -0,0 +1,27 @@
+import Vue from 'vue'
+
+export default function scrollIntoView(container, selected) {
+  if (Vue.prototype.$isServer) return
+
+  if (!selected) {
+    container.scrollTop = 0
+    return
+  }
+
+  const offsetParents = []
+  let pointer = selected.offsetParent
+  while (pointer && container !== pointer && container.contains(pointer)) {
+    offsetParents.push(pointer)
+    pointer = pointer.offsetParent
+  }
+  const top = selected.offsetTop + offsetParents.reduce((prev, curr) => (prev + curr.offsetTop), 0)
+  const bottom = top + selected.offsetHeight
+  const viewRectTop = container.scrollTop
+  const viewRectBottom = viewRectTop + container.clientHeight
+
+  if (top < viewRectTop) {
+    container.scrollTop = top
+  } else if (bottom > viewRectBottom) {
+    container.scrollTop = bottom - container.clientHeight
+  }
+}

package/src/components/base/ui/util/scrollbar-width.js

@@ -0,0 +1,29 @@
+import Vue from 'vue'
+
+let scrollBarWidth
+
+export default function() {
+  if (Vue.prototype.$isServer) return 0
+  if (scrollBarWidth !== undefined) return scrollBarWidth
+
+  const outer = document.createElement('div')
+  outer.className = 'base-scrollbar__wrap'
+  outer.style.visibility = 'hidden'
+  outer.style.width = '100px'
+  outer.style.position = 'absolute'
+  outer.style.top = '-9999px'
+  document.body.appendChild(outer)
+
+  const widthNoScroll = outer.offsetWidth
+  outer.style.overflow = 'scroll'
+
+  const inner = document.createElement('div')
+  inner.style.width = '100%'
+  outer.appendChild(inner)
+
+  const widthWithScroll = inner.offsetWidth
+  outer.parentNode.removeChild(outer)
+  scrollBarWidth = widthNoScroll - widthWithScroll
+
+  return scrollBarWidth
+}

package/src/components/base/ui/util/shared.js

@@ -0,0 +1,7 @@
+export function isDef(val) {
+  return val !== undefined && val !== null;
+}
+export function isKorean(text) {
+  const reg = /([(\uAC00-\uD7AF)|(\u3130-\u318F)])+/gi;
+  return reg.test(text);
+}

package/src/components/base/ui/util/throttle.js

@@ -0,0 +1,91 @@
+/* eslint-disable no-undefined,no-param-reassign,no-shadow */
+
+/**
+ * Throttle execution of a function. Especially useful for rate limiting
+ * execution of handlers on events like resize and scroll.
+ *
+ * @param  {Number}    delay          A zero-or-greater delay in milliseconds. For event callbacks, values around 100 or 250 (or even higher) are most useful.
+ * @param  {Boolean}   [noTrailing]   Optional, defaults to false. If noTrailing is true, callback will only execute every `delay` milliseconds while the
+ *                                    throttled-function is being called. If noTrailing is false or unspecified, callback will be executed one final time
+ *                                    after the last throttled-function call. (After the throttled-function has not been called for `delay` milliseconds,
+ *                                    the internal counter is reset)
+ * @param  {Function}  callback       A function to be executed after delay milliseconds. The `this` context and all arguments are passed through, as-is,
+ *                                    to `callback` when the throttled-function is executed.
+ * @param  {Boolean}   [debounceMode] If `debounceMode` is true (at begin), schedule `clear` to execute after `delay` ms. If `debounceMode` is false (at end),
+ *                                    schedule `callback` to execute after `delay` ms.
+ *
+ * @return {Function}  A new, throttled, function.
+ */
+export default function ( delay, noTrailing, callback, debounceMode ) {
+
+  // After wrapper has stopped being called, this timeout ensures that
+  // `callback` is executed at the proper times in `throttle` and `end`
+  // debounce modes.
+  var timeoutID;
+
+  // Keep track of the last time `callback` was executed.
+  var lastExec = 0;
+
+  // `noTrailing` defaults to falsy.
+  if ( typeof noTrailing !== 'boolean' ) {
+    debounceMode = callback;
+    callback = noTrailing;
+    noTrailing = undefined;
+  }
+
+  // The `wrapper` function encapsulates all of the throttling / debouncing
+  // functionality and when executed will limit the rate at which `callback`
+  // is executed.
+  function wrapper () {
+
+    var self = this;
+    var elapsed = Number(new Date()) - lastExec;
+    var args = arguments;
+
+    // Execute `callback` and update the `lastExec` timestamp.
+    function exec () {
+      lastExec = Number(new Date());
+      callback.apply(self, args);
+    }
+
+    // If `debounceMode` is true (at begin) this is used to clear the flag
+    // to allow future `callback` executions.
+    function clear () {
+      timeoutID = undefined;
+    }
+
+    if ( debounceMode && !timeoutID ) {
+      // Since `wrapper` is being called for the first time and
+      // `debounceMode` is true (at begin), execute `callback`.
+      exec();
+    }
+
+    // Clear any existing timeout.
+    if ( timeoutID ) {
+      clearTimeout(timeoutID);
+    }
+
+    if ( debounceMode === undefined && elapsed > delay ) {
+      // In throttle mode, if `delay` time has been exceeded, execute
+      // `callback`.
+      exec();
+
+    } else if ( noTrailing !== true ) {
+      // In trailing throttle mode, since `delay` time has not been
+      // exceeded, schedule `callback` to execute `delay` ms after most
+      // recent execution.
+      //
+      // If `debounceMode` is true (at begin), schedule `clear` to execute
+      // after `delay` ms.
+      //
+      // If `debounceMode` is false (at end), schedule `callback` to
+      // execute after `delay` ms.
+      timeoutID = setTimeout(debounceMode ? clear : exec, debounceMode === undefined ? delay - elapsed : delay);
+    }
+
+  }
+
+  // Return the wrapper function.
+  return wrapper;
+
+};

package/src/components/base/ui/util/types.js

@@ -0,0 +1,24 @@
+export function isString(obj) {
+  return Object.prototype.toString.call(obj) === '[object String]';
+}
+
+export function isObject(obj) {
+  return Object.prototype.toString.call(obj) === '[object Object]';
+}
+
+export function isHtmlElement(node) {
+  return node && node.nodeType === Node.ELEMENT_NODE;
+}
+
+export const isFunction = (functionToCheck) => {
+  var getType = {};
+  return functionToCheck && getType.toString.call(functionToCheck) === '[object Function]';
+};
+
+export const isUndefined = (val)=> {
+  return val === void 0;
+};
+
+export const isDefined = (val) => {
+  return val !== undefined && val !== null;
+};

package/src/components/base/ui/util/vdom.js

@@ -0,0 +1,5 @@
+import { hasOwn } from './index'
+
+export function isVNode(node) {
+  return node !== null && typeof node === 'object' && hasOwn(node, 'componentOptions')
+};