@opentiny/vue-renderless 3.1.0-alpha.0

package/common/deps/vue-popper.js

@@ -0,0 +1,291 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+import PopupManager from '@opentiny/vue-renderless/common/deps/popup-manager';
+import PopperJS from '@opentiny/vue-renderless/common/deps/popper';
+import { on, off } from '@opentiny/vue-renderless/common/deps/dom';
+var stop = function stop(e) {
+  e.stopPropagation();
+};
+var isServer = typeof window === 'undefined';
+var getReference = function getReference(_ref) {
+  var state = _ref.state,
+    props = _ref.props,
+    refs = _ref.refs,
+    slots = _ref.slots;
+  var reference = state.referenceElm || props.reference || refs.reference && refs.reference.$el || refs.reference;
+  if (!reference && slots.reference && slots.reference()[0]) {
+    state.referenceElm = slots.reference()[0].elm || slots.reference()[0].el;
+    reference = state.referenceElm;
+  }
+  return reference;
+};
+var getReferMaxZIndex = function getReferMaxZIndex(reference) {
+  if (!reference || !reference.nodeType) {
+    return;
+  }
+  var getZIndex = function getZIndex(dom) {
+    return parseInt(window.getComputedStyle(dom).zIndex, 10) || 0;
+  };
+  var max = getZIndex(reference);
+  var z;
+  do {
+    reference = reference.parentNode;
+    z = getZIndex(reference);
+    max = z > max ? z : max;
+  } while (reference !== document.body);
+  return "".concat(max + 1);
+};
+var appendPopper = function appendPopper(_ref2) {
+  var options = _ref2.options,
+    props = _ref2.props,
+    state = _ref2.state,
+    parent = _ref2.parent;
+  if (props.appendToBody || props.popperAppendToBody) {
+    document.body.appendChild(state.popperElm);
+  } else {
+    parent && parent.$el && parent.$el.appendChild(state.popperElm);
+    options.forceAbsolute = true;
+  }
+};
+var setWatchFn = function setWatchFn(_ref3) {
+  var watch = _ref3.watch,
+    props = _ref3.props,
+    state = _ref3.state,
+    emit = _ref3.emit,
+    nextTick = _ref3.nextTick,
+    updatePopper = _ref3.updatePopper,
+    destroyPopper = _ref3.destroyPopper,
+    onBeforeUnmount = _ref3.onBeforeUnmount,
+    onDeactivated = _ref3.onDeactivated,
+    doDestroy = _ref3.doDestroy;
+  watch(function () {
+    return props.modelValue;
+  }, function (val) {
+    if (props.trigger === 'manual') {
+      state.showPopper = val;
+      emit('update:modelValue', val);
+    }
+  });
+  watch(function () {
+    return state.showPopper;
+  }, function (val) {
+    if (props.disabled) {
+      return;
+    }
+    val ? nextTick(updatePopper) : destroyPopper();
+    props.trigger === 'manual' && emit('update:modelValue', val);
+  });
+  var removeBodyElm = function removeBodyElm() {
+    if (state.popperElm && state.popperElm.parentNode === document.body) {
+      off(state.popperElm, 'click', stop);
+      document.body.removeChild(state.popperElm);
+    }
+  };
+  onBeforeUnmount(function () {
+    nextTick(function () {
+      doDestroy(true);
+      removeBodyElm();
+    });
+  });
+  onDeactivated(function () {
+    doDestroy(true);
+    removeBodyElm();
+  });
+};
+var createPopperFn = function createPopperFn(_ref4) {
+  var state = _ref4.state,
+    props = _ref4.props,
+    refs = _ref4.refs,
+    slots = _ref4.slots,
+    appendArrow = _ref4.appendArrow,
+    emit = _ref4.emit,
+    resetTransformOrigin = _ref4.resetTransformOrigin,
+    nextTick = _ref4.nextTick,
+    updatePopper = _ref4.updatePopper,
+    nextZIndex = _ref4.nextZIndex,
+    parent = _ref4.parent;
+  return function (dom) {
+    if (isServer) {
+      return;
+    }
+    state.currentPlacement = state.currentPlacement || props.placement;
+    if (!/^(top|bottom|left|right)(-start|-end)?$/g.test(state.currentPlacement)) {
+      return;
+    }
+    var options = props.popperOptions || {
+      gpuAcceleration: false
+    };
+    state.popperElm = state.popperElm || props.popper || refs.popper || dom;
+    var popper = state.popperElm;
+    var reference = getReference({
+      state: state,
+      props: props,
+      refs: refs,
+      slots: slots
+    });
+    if (!popper || !reference || reference.nodeType !== Node.ELEMENT_NODE) {
+      return;
+    }
+    if (props.visibleArrow) {
+      appendArrow(popper);
+    }
+    appendPopper({
+      options: options,
+      props: props,
+      state: state,
+      parent: parent
+    });
+    if (props.popperJS && state.popperJS.destroy) {
+      state.popperJS.destroy();
+    }
+    options.placement = state.currentPlacement;
+    options.offset = props.offset || 0;
+    options.arrowOffset = props.arrowOffset || 0;
+    options.adjustArrow = props.adjustArrow || false;
+    state.popperJS = new PopperJS(reference, popper, options);
+    state.popperJS.onCreate(function () {
+      emit('created', state);
+      resetTransformOrigin();
+      nextTick(updatePopper);
+    });
+    if (typeof options.onUpdate === 'function') {
+      state.popperJS.onUpdate(options.onUpdate);
+    }
+    state.popperJS._popper.style.zIndex = nextZIndex(state.popperJS._reference);
+    on(state.popperElm, 'click', stop);
+  };
+};
+var appendArrowFn = function appendArrowFn(state) {
+  return function (el) {
+    var hash;
+    if (state.appended) {
+      return;
+    }
+    state.appended = true;
+    for (var item in el.attributes) {
+      if (/^_v-/.test(el.attributes[item].name)) {
+        hash = el.attributes[item].name;
+        break;
+      }
+    }
+    var div = document.createElement('div');
+    if (hash) {
+      div.setAttribute(hash, '');
+    }
+    div.setAttribute('x-arrow', '');
+    div.className = 'popper__arrow';
+    el.appendChild(div);
+  };
+};
+var resetTransformOriginFn = function resetTransformOriginFn(state, props) {
+  return function () {
+    if (!props.transformOrigin) {
+      return;
+    }
+    var placementMap = {
+      top: 'bottom',
+      bottom: 'top',
+      left: 'right',
+      right: 'left'
+    };
+    var placement = state.popperJS._popper.getAttribute('x-placement').split('-')[0];
+    var origin = placementMap[placement];
+    if (typeof props.transformOrigin === 'string') {
+      state.popperJS._popper.style.transformOrigin = props.transformOrigin;
+    } else {
+      state.popperJS._popper.style.transformOrigin = ['top', 'bottom'].indexOf(placement) > -1 ? "center ".concat(origin) : "".concat(origin, " center");
+    }
+  };
+};
+export default (function (_ref5) {
+  var parent = _ref5.parent,
+    emit = _ref5.emit,
+    nextTick = _ref5.nextTick,
+    onBeforeUnmount = _ref5.onBeforeUnmount,
+    onDeactivated = _ref5.onDeactivated,
+    props = _ref5.props,
+    watch = _ref5.watch,
+    reactive = _ref5.reactive,
+    refs = _ref5.refs,
+    slots = _ref5.slots,
+    toRefs = _ref5.toRefs;
+  var state = reactive({
+    popperJS: null,
+    appended: false,
+    popperElm: null,
+    showPopper: props.manual ? Boolean(props.modelValue) : false,
+    referenceElm: null,
+    currentPlacement: ''
+  });
+  var nextZIndex = function nextZIndex(reference) {
+    return props.zIndex === 'relative' ? getReferMaxZIndex(reference) : PopupManager.nextZIndex();
+  };
+  var appendArrow = appendArrowFn(state);
+  var resetTransformOrigin = resetTransformOriginFn(state, props);
+  var createPopper;
+  var updatePopper = function updatePopper(dom) {
+    var popperJS = state.popperJS;
+    if (popperJS) {
+      popperJS.update();
+      if (popperJS._popper && dom !== true) {
+        popperJS._popper.style.zIndex = nextZIndex(popperJS._reference);
+      }
+    } else {
+      createPopper(dom);
+    }
+  };
+  createPopper = createPopperFn({
+    state: state,
+    props: props,
+    refs: refs,
+    slots: slots,
+    appendArrow: appendArrow,
+    emit: emit,
+    resetTransformOrigin: resetTransformOrigin,
+    nextTick: nextTick,
+    updatePopper: updatePopper,
+    nextZIndex: nextZIndex,
+    parent: parent
+  });
+  var doDestroy = function doDestroy(forceDestroy) {
+    if (!state.popperJS || state.showPopper && !forceDestroy) {
+      return;
+    }
+    state.popperJS.destroy();
+    state.popperJS = null;
+  };
+  var destroyPopper = function destroyPopper(remove) {
+    if (state.popperJS) {
+      resetTransformOrigin();
+    }
+    if (remove) {
+      if (state.popperElm) {
+        var parentNode = state.popperElm.parentNode;
+        if (parentNode) {
+          parentNode.removeChild(state.popperElm);
+        }
+      }
+    }
+  };
+  setWatchFn({
+    watch: watch,
+    props: props,
+    state: state,
+    emit: emit,
+    nextTick: nextTick,
+    updatePopper: updatePopper,
+    destroyPopper: destroyPopper,
+    onBeforeUnmount: onBeforeUnmount,
+    onDeactivated: onDeactivated,
+    doDestroy: doDestroy
+  });
+  return _objectSpread({
+    doDestroy: doDestroy,
+    appendArrow: appendArrow,
+    createPopper: createPopper,
+    updatePopper: updatePopper,
+    destroyPopper: destroyPopper,
+    resetTransformOrigin: resetTransformOrigin
+  }, toRefs(state));
+});

package/common/deps/vue-popup.js

@@ -0,0 +1,211 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+import { merge } from '@opentiny/vue-renderless/common/object';
+import PopupManager from '@opentiny/vue-renderless/common/deps/popup-manager';
+import getScrollBarWidth from '@opentiny/vue-renderless/common/deps/scrollbar-width';
+import { getStyle, addClass, removeClass, hasClass } from '@opentiny/vue-renderless/common/deps/dom';
+var idSeed = 1;
+var scrollBarWidth;
+var isServer = typeof window === 'undefined';
+var popLockClass = 'tiny-popup-parent--hidden';
+var setWatchFn = function setWatchFn(_ref) {
+  var onMounted = _ref.onMounted,
+    onBeforeUnmount = _ref.onBeforeUnmount,
+    watch = _ref.watch,
+    vm = _ref.vm,
+    api = _ref.api,
+    props = _ref.props,
+    state = _ref.state,
+    nextTick = _ref.nextTick;
+  onMounted(function () {
+    vm._popupId = "popup-".concat(idSeed++);
+    PopupManager.register(vm._popupId, vm);
+  });
+  onBeforeUnmount(function () {
+    PopupManager.deregister(vm._popupId);
+    PopupManager.closeModal(vm._popupId);
+    api.restoreBodyStyle();
+  });
+  watch(function () {
+    return props.visible;
+  }, function (val) {
+    if (val) {
+      if (vm._opening) {
+        return;
+      }
+      if (state.rendered) {
+        api.open();
+      } else {
+        state.rendered = true;
+        nextTick(function () {
+          api.open();
+        });
+      }
+    } else {
+      api.close();
+    }
+  });
+};
+var modifyBodyStyle = function modifyBodyStyle(_ref2) {
+  var bodyHasOverflow = _ref2.bodyHasOverflow,
+    bodyOverflowY = _ref2.bodyOverflowY,
+    state = _ref2.state;
+  if (scrollBarWidth > 0 && (bodyHasOverflow || bodyOverflowY === 'scroll') && state.withoutHiddenClass) {
+    document.body.style.paddingRight = "".concat(state.computedBodyPaddingRight + scrollBarWidth, "px");
+  }
+};
+var openFn = function openFn(state, vm, api) {
+  return function (options) {
+    if (!state.rendered) {
+      state.rendered = true;
+    }
+    var props = merge({}, vm.$props || vm, options);
+    if (vm._closeTimer) {
+      clearTimeout(vm._closeTimer);
+      vm._closeTimer = null;
+    }
+    clearTimeout(vm._openTimer);
+    var openDelay = Number(props.openDelay);
+    if (openDelay > 0) {
+      vm._openTimer = setTimeout(function () {
+        vm._openTimer = null;
+        api.doOpen(props);
+      }, openDelay);
+    } else {
+      api.doOpen(props);
+    }
+  };
+};
+var modifyStateOnLockScroll = function modifyStateOnLockScroll(state) {
+  state.withoutHiddenClass = !hasClass(document.body, popLockClass);
+  if (state.withoutHiddenClass) {
+    state.bodyPaddingRight = document.body.style.paddingRight;
+    state.computedBodyPaddingRight = parseInt(getStyle(document.body, 'paddingRight'), 10);
+  }
+};
+var doOpenFn = function doOpenFn(vm, state, props, api) {
+  return function (properties) {
+    if (isServer || vm.willOpen && !vm.willOpen() || state.opened) {
+      return;
+    }
+    vm._opening = true;
+    var dom = vm.$el;
+    var modal = properties.modal;
+    var zIndex = properties.zIndex;
+    if (zIndex) {
+      PopupManager.zIndex = zIndex;
+    }
+    if (modal) {
+      if (vm._closing) {
+        PopupManager.closeModal(vm._popupId);
+        vm._closing = false;
+      }
+      PopupManager.openModal(vm._popupId, PopupManager.nextZIndex(), props.modalAppendToBody ? undefined : dom, properties.modalClass, properties.modalFade);
+      if (properties.lockScroll) {
+        modifyStateOnLockScroll(state);
+        scrollBarWidth = getScrollBarWidth();
+        var bodyHasOverflow = document.documentElement.clientHeight < document.body.scrollHeight;
+        var bodyOverflowY = getStyle(document.body, 'overflowY');
+        modifyBodyStyle({
+          bodyHasOverflow: bodyHasOverflow,
+          bodyOverflowY: bodyOverflowY,
+          state: state
+        });
+        addClass(document.body, popLockClass);
+      }
+    }
+    if (getComputedStyle(dom).position === 'static') {
+      dom.style.position = 'absolute';
+    }
+    dom.style.zIndex = PopupManager.nextZIndex();
+    state.opened = true;
+    api.onOpen && api.onOpen();
+    api.doAfterOpen();
+  };
+};
+var closeFn = function closeFn(api, vm) {
+  return function () {
+    if (api.willClose && !api.willClose()) {
+      return;
+    }
+    if (vm._openTimer !== null) {
+      clearTimeout(vm._openTimer);
+      vm._openTimer = null;
+    }
+    clearTimeout(vm._closeTimer);
+    var closeDelay = Number(vm.closeDelay);
+    if (closeDelay > 0) {
+      vm._closeTimer = setTimeout(function () {
+        vm._closeTimer = null;
+        api.doClose();
+      }, closeDelay);
+    } else {
+      api.doClose();
+    }
+  };
+};
+export default (function (_ref3) {
+  var api = _ref3.api,
+    nextTick = _ref3.nextTick,
+    onBeforeUnmount = _ref3.onBeforeUnmount,
+    onMounted = _ref3.onMounted,
+    props = _ref3.props,
+    reactive = _ref3.reactive,
+    toRefs = _ref3.toRefs,
+    vm = _ref3.vm,
+    watch = _ref3.watch;
+  var state = reactive({
+    opened: false,
+    rendered: false,
+    bodyPaddingRight: null,
+    withoutHiddenClass: true,
+    computedBodyPaddingRight: 0
+  });
+  setWatchFn({
+    onMounted: onMounted,
+    onBeforeUnmount: onBeforeUnmount,
+    watch: watch,
+    vm: vm,
+    api: api,
+    props: props,
+    state: state,
+    nextTick: nextTick
+  });
+  var open = openFn(state, vm, api);
+  var doOpen = doOpenFn(vm, state, props, api);
+  var doAfterOpen = function doAfterOpen() {
+    vm._opening = false;
+  };
+  var close = closeFn(api, vm);
+  var doClose = function doClose() {
+    vm._closing = true;
+    api.onClose && api.onClose();
+    if (props.lockScroll) {
+      setTimeout(api.restoreBodyStyle, 200);
+    }
+    state.opened = false;
+    api.doAfterClose();
+  };
+  var doAfterClose = function doAfterClose() {
+    PopupManager.closeModal(vm._popupId);
+    vm._closing = false;
+  };
+  var restoreBodyStyle = function restoreBodyStyle() {
+    if (props.modal && state.withoutHiddenClass) {
+      document.body.style.paddingRight = state.bodyPaddingRight;
+      removeClass(document.body, popLockClass);
+    }
+    state.withoutHiddenClass = true;
+  };
+  return _objectSpread({
+    open: open,
+    close: close,
+    doOpen: doOpen,
+    doClose: doClose,
+    doAfterOpen: doAfterOpen,
+    doAfterClose: doAfterClose,
+    PopupManager: PopupManager,
+    restoreBodyStyle: restoreBodyStyle
+  }, toRefs(state));
+});

package/common/event.js

@@ -0,0 +1,17 @@
+export var emitEvent = function emitEvent(emit, name) {
+  var cancel = false;
+  if (typeof emit === 'function' && typeof name === 'string') {
+    var event = document.createEvent('HTMLEvents');
+    event.initEvent(name, false, true);
+    event.preventDefault = function () {
+      cancel = true;
+    };
+    for (var _len = arguments.length, args = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
+      args[_key - 2] = arguments[_key];
+    }
+    args.unshift(event);
+    args.unshift(name);
+    emit.apply(null, args);
+  }
+  return !cancel;
+};