@opentiny/vue-renderless 3.1.0-alpha.0

package/common/deps/popup-manager.js

@@ -0,0 +1,179 @@
+import { KEY_CODE } from '@opentiny/vue-renderless/common';
+import { addClass, removeClass, on } from '@opentiny/vue-renderless/common/deps/dom';
+var hasModal = false;
+var isServer = typeof window === 'undefined';
+var instances = {};
+var classes = {
+  leave: 'v-modal-leave',
+  enter: 'v-modal-enter',
+  modal: 'v-modal'
+};
+var removeStack = function removeStack(modalStack, id) {
+  for (var i = modalStack.length - 1; i >= 0; i--) {
+    if (modalStack[i].id === id) {
+      modalStack.splice(i, 1);
+      break;
+    }
+  }
+};
+var getModal;
+var PopupManager = {
+  step: 2,
+  zIndex: 2000,
+  modalFade: true,
+  modalStack: [],
+  deregister: function deregister(id) {
+    if (id) {
+      instances[id] = null;
+      delete instances[id];
+    }
+  },
+  getInstance: function getInstance(id) {
+    return instances[id];
+  },
+  register: function register(id, instance) {
+    if (id && instance) {
+      instances[id] = instance;
+    }
+  },
+  nextZIndex: function nextZIndex() {
+    var zIndex = PopupManager.zIndex;
+    PopupManager.zIndex += PopupManager.step;
+    return zIndex;
+  },
+  openModal: function openModal(id, zIndex, dom, modalClass, modalFade) {
+    if (isServer) {
+      return;
+    }
+    if (!id || zIndex === undefined) {
+      return;
+    }
+    this.modalFade = modalFade;
+    var modalStack = this.modalStack;
+    for (var i = 0, len = modalStack.length; i < len; i++) {
+      var modal = modalStack[i];
+      if (modal.id === id) {
+        return;
+      }
+    }
+    var modalDom = getModal();
+    addClass(modalDom, classes.modal);
+    if (this.modalFade && !hasModal) {
+      addClass(modalDom, classes.enter);
+    }
+    if (modalClass) {
+      var classArr = modalClass.trim().split(/\s+/);
+      classArr.forEach(function (cls) {
+        return addClass(modalDom, cls);
+      });
+    }
+    setTimeout(function () {
+      removeClass(modalDom, classes.enter);
+    }, 200);
+    var parentNode;
+    if (dom && dom.parentNode && dom.parentNode.nodeType !== 11) {
+      parentNode = dom.parentNode;
+    } else {
+      parentNode = document.body;
+    }
+    parentNode.appendChild(modalDom);
+    if (zIndex) {
+      modalDom.style.zIndex = zIndex;
+    }
+    modalDom.style.display = '';
+    modalDom.tabIndex = 0;
+    this.modalStack.push({
+      id: id,
+      zIndex: zIndex,
+      modalClass: modalClass
+    });
+  },
+  doOnModalClick: function doOnModalClick() {
+    var modalStack = PopupManager.modalStack;
+    var topPopup = modalStack[modalStack.length - 1];
+    if (!topPopup) return;
+    var instance = PopupManager.getInstance(topPopup.id);
+    if (instance && instance.closeOnClickModal) {
+      typeof instance.close === 'function' && instance.close();
+    }
+  },
+  closeModal: function closeModal(id) {
+    var modalStack = this.modalStack;
+    var modalDom = getModal();
+    if (modalStack.length > 0) {
+      var topPopup = modalStack[modalStack.length - 1];
+      if (topPopup.id === id) {
+        if (topPopup.modalClass) {
+          var classArr = topPopup.modalClass.trim().split(/\s+/);
+          classArr.forEach(function (cls) {
+            return removeClass(modalDom, cls);
+          });
+        }
+        modalStack.pop();
+        var stackSize = modalStack.length;
+        if (stackSize > 0) {
+          modalDom.style.zIndex = modalStack[stackSize - 1].zIndex;
+        }
+      } else {
+        removeStack(modalStack, id);
+      }
+    }
+    if (modalStack.length === 0) {
+      this.modalFade && addClass(modalDom, classes.leave);
+      setTimeout(function () {
+        if (modalStack.length === 0) {
+          if (modalDom.parentNode) modalDom.parentNode.removeChild(modalDom);
+          modalDom.style.display = 'none';
+          PopupManager.modalDom = undefined;
+        }
+        removeClass(modalDom, classes.leave);
+      }, 200);
+    }
+  }
+};
+getModal = function getModal() {
+  if (isServer) return;
+  var 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();
+    }, {
+      passive: true
+    });
+    on(modalDom, 'click', function () {
+      PopupManager.doOnModalClick && PopupManager.doOnModalClick();
+    });
+  }
+  return modalDom;
+};
+var getTopPopup = function getTopPopup() {
+  if (isServer) return;
+  var modalStack = PopupManager.modalStack;
+  if (modalStack.length > 0) {
+    var topPopup = modalStack[modalStack.length - 1];
+    if (!topPopup) return;
+    var instance = PopupManager.getInstance(topPopup.id);
+    return instance;
+  }
+};
+if (!isServer) {
+  on(window, 'keydown', function (event) {
+    if (event.keyCode === KEY_CODE.Escape) {
+      var topPopup = getTopPopup();
+      if (topPopup && topPopup.closeOnPressEscape) {
+        if (topPopup.handleClose) {
+          topPopup.handleClose('esc');
+        } else {
+          topPopup.handleAction ? topPopup.handleAction('cancel') : topPopup.close();
+        }
+      }
+    }
+  });
+}
+export default PopupManager;

package/common/deps/repeat-click.js

@@ -0,0 +1,24 @@
+import { on, once } from '@opentiny/vue-renderless/common/deps/dom';
+export default (function (el, binding) {
+  var interval = null;
+  var startTime;
+  var handler = function handler() {
+    typeof binding.value === 'function' && binding.value.apply();
+  };
+  var clear = function clear() {
+    if (Date.now() - startTime < 100) {
+      handler();
+    }
+    clearInterval(interval);
+    interval = null;
+  };
+  on(el, 'mousedown', function (e) {
+    if (e.button !== 0) {
+      return;
+    }
+    startTime = Date.now();
+    once(document, 'mouseup', clear);
+    clearInterval(interval);
+    interval = setInterval(handler, 100);
+  });
+});

package/common/deps/requestAnimationFrame.js

@@ -0,0 +1,25 @@
+!function () {
+  var lastTime = 0;
+  var vendors = ['ms', 'moz', 'webkit', 'o'];
+  for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
+    window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
+    window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] || window[vendors[x] + 'CancelRequestAnimationFrame'];
+  }
+  if (!window.requestAnimationFrame) {
+    window.requestAnimationFrame = function (callback) {
+      var now = new Date().getTime();
+      var timeToCall = Math.max(0, 16 - (now - lastTime));
+      var timeCallback = now + timeToCall;
+      var id = window.setTimeout(function () {
+        callback(timeCallback);
+      }, timeToCall);
+      lastTime = now + timeToCall;
+      return id;
+    };
+  }
+  if (!window.cancelAnimationFrame) {
+    window.cancelAnimationFrame = function (id) {
+      clearTimeout(id);
+    };
+  }
+}();

package/common/deps/resize-event.js

@@ -0,0 +1,29 @@
+import ResizeObserver from '@opentiny/vue-renderless/common/deps/ResizeObserver';
+var isServer = typeof window === 'undefined';
+var cacheKey = '__resizeListeners__';
+var resizeHandler = function resizeHandler(entries) {
+  entries.forEach(function (entry) {
+    var listeners = entry.target[cacheKey] || [];
+    if (listeners.length) {
+      listeners.forEach(function (fn) {
+        fn();
+      });
+    }
+  });
+};
+export var addResizeListener = function addResizeListener(el, fn) {
+  if (isServer) return;
+  if (!el[cacheKey]) {
+    el[cacheKey] = [];
+    el.__ro__ = new ResizeObserver(resizeHandler);
+    el.__ro__.observe(el);
+  }
+  el[cacheKey].push(fn);
+};
+export var removeResizeListener = function removeResizeListener(el, fn) {
+  if (!el || !el[cacheKey]) return;
+  el[cacheKey].splice(el[cacheKey].indexOf(fn), 1);
+  if (!el[cacheKey].length) {
+    el.__ro__.disconnect();
+  }
+};

package/common/deps/scroll-into-view.js

@@ -0,0 +1,29 @@
+var isServer = typeof window === 'undefined';
+export default (function (container, selected) {
+  if (isServer) {
+    return;
+  }
+  if (!selected) {
+    container.scrollTop = 0;
+    return;
+  }
+  var offsetParents = [];
+  var offsetParent = selected.offsetParent,
+    offsetTop = selected.offsetTop,
+    offsetHeight = selected.offsetHeight;
+  while (offsetParent && container !== offsetParent && container.contains(offsetParent)) {
+    offsetParents.push(offsetParent);
+    offsetParent = offsetParent.offsetParent;
+  }
+  var top = offsetTop + offsetParents.reduce(function (prev, curr) {
+    return prev + curr.offsetTop;
+  }, 0);
+  var bottom = top + offsetHeight;
+  var viewRectTop = container.scrollTop;
+  var viewRectBottom = viewRectTop + container.clientHeight;
+  if (top < viewRectTop) {
+    container.scrollTop = top;
+  } else if (bottom > viewRectBottom) {
+    container.scrollTop = bottom - container.clientHeight;
+  }
+});

package/common/deps/scrollbar-width.js

@@ -0,0 +1,25 @@
+var scrollBarWidth;
+var isServer = typeof window === 'undefined';
+export default function () {
+  if (isServer) return 0;
+  if (scrollBarWidth !== undefined) return scrollBarWidth;
+  var container = document.createElement('div');
+  container.className = 'tiny-scrollbar';
+  container.style.visibility = 'hidden';
+  container.style.position = 'absolute';
+  container.style.top = '-9999px';
+  var outer = document.createElement('div');
+  outer.className = 'tiny-scrollbar__wrap';
+  outer.style.width = '100px';
+  container.appendChild(outer);
+  document.body.appendChild(container);
+  var widthNoScroll = outer.offsetWidth;
+  outer.style.overflow = 'scroll';
+  var inner = document.createElement('div');
+  inner.style.width = '100%';
+  outer.appendChild(inner);
+  var widthWithScroll = inner.offsetWidth;
+  outer.parentNode.removeChild(outer);
+  scrollBarWidth = widthNoScroll - widthWithScroll;
+  return scrollBarWidth;
+}

package/common/deps/throttle.js

@@ -0,0 +1,34 @@
+export default function (delay, noTrailing, callback, debounceMode) {
+  var timeoutID;
+  var lastExec = 0;
+  if (typeof noTrailing !== 'boolean') {
+    debounceMode = callback;
+    callback = noTrailing;
+    noTrailing = undefined;
+  }
+  function wrapper() {
+    var me = this;
+    var elapsed = new Date().valueOf() - lastExec;
+    var args = arguments;
+    function exec() {
+      lastExec = new Date().valueOf();
+      callback.apply(me, args);
+    }
+    function clear() {
+      timeoutID = undefined;
+    }
+    if (debounceMode && !timeoutID) {
+      exec();
+    }
+    if (timeoutID) {
+      clearTimeout(timeoutID);
+    }
+    var isUndMode = debounceMode === undefined;
+    if (isUndMode && elapsed > delay) {
+      exec();
+    } else if (noTrailing !== true) {
+      timeoutID = setTimeout(debounceMode ? clear : exec, isUndMode ? delay - elapsed : delay);
+    }
+  }
+  return wrapper;
+}

package/common/deps/touch.js

@@ -0,0 +1,33 @@
+var MIN_DISTANCE = 10;
+function getDirection(w, h) {
+  if (h > w && h > MIN_DISTANCE) {
+    return 'vertical';
+  } else if (w > h && w > MIN_DISTANCE) {
+    return 'horizontal';
+  }
+  return '';
+}
+export var resetTouchStatus = function resetTouchStatus(state) {
+  state.direction = '';
+  state.deltaX = 0;
+  state.deltaY = 0;
+  state.offsetX = 0;
+  state.offsetY = 0;
+};
+export var touchStart = function touchStart(state) {
+  return function (event) {
+    resetTouchStatus(state);
+    state.startX = event.touches[0].clientX;
+    state.startY = event.touches[0].clientY;
+  };
+};
+export var touchMove = function touchMove(state) {
+  return function (event) {
+    var touch = event.touches[0];
+    state.deltaX = touch.clientX - state.startX;
+    state.deltaY = touch.clientY - state.startY;
+    state.offsetX = Math.abs(state.deltaX);
+    state.offsetY = Math.abs(state.deltaY);
+    state.direction = state.direction || getDirection(state.offsetX, state.offsetY);
+  };
+};