@opentiny/vue-renderless 3.1.0-alpha.0

package/grid/utils/event.js

@@ -0,0 +1,40 @@
+import browser from '@opentiny/vue-renderless/common/browser';
+import { remove } from '../static';
+import { on } from '@opentiny/vue-renderless/common/deps/dom';
+var wheelName = browser.isDoc && /Firefox/i.test(navigator.userAgent) ? 'DOMMouseScroll' : 'mousewheel';
+var eventStore = [];
+var GlobalEvent = {
+  on: function on(comp, type, cb) {
+    if (cb) {
+      eventStore.push({
+        comp: comp,
+        type: type,
+        cb: cb
+      });
+    }
+  },
+  off: function off(comp, type) {
+    remove(eventStore, function (item) {
+      return item.comp === comp && item.type === type;
+    });
+  },
+  trigger: function trigger(event) {
+    eventStore.forEach(function (_ref) {
+      var comp = _ref.comp,
+        type = _ref.type,
+        cb = _ref.cb;
+      if (type === event.type || type === 'mousewheel' && event.type === wheelName) {
+        cb.call(comp, event);
+      }
+    });
+  }
+};
+if (browser.isDoc) {
+  on(document, 'keydown', GlobalEvent.trigger);
+  on(document, 'contextmenu', GlobalEvent.trigger);
+  on(window, 'mousedown', GlobalEvent.trigger);
+  on(window, 'blur', GlobalEvent.trigger);
+  on(window, 'resize', GlobalEvent.trigger);
+  on(window, wheelName, GlobalEvent.trigger);
+}
+export default GlobalEvent;

package/grid/utils/index.js

@@ -0,0 +1,5 @@
+import GlobalEvent from './event';
+export * from './column';
+export * from './common';
+export * from './dom';
+export { GlobalEvent };

package/image/index.js

@@ -0,0 +1,187 @@
+import { on, off, getScrollContainer, isInContainer } from '@opentiny/vue-renderless/common/deps/dom';
+import { typeOf } from '@opentiny/vue-renderless/common/type';
+import '@opentiny/vue-renderless/common/deps/requestAnimationFrame';
+import { rafThrottle } from '@opentiny/vue-renderless/image-viewer';
+var isSupportObjectFit = function isSupportObjectFit() {
+  return document.documentElement.style.objectFit !== undefined;
+};
+var isHtmlElement = function isHtmlElement(node) {
+  return node && node.nodeType === Node.ELEMENT_NODE;
+};
+export var computedGetImageStyle = function computedGetImageStyle(_ref) {
+  var props = _ref.props,
+    api = _ref.api;
+  return function () {
+    var fit = props.fit;
+    if (fit) {
+      return isSupportObjectFit() ? {
+        'object-fit': fit
+      } : api.getImageStyle(fit);
+    }
+    return {};
+  };
+};
+export var computedGetAlignCenter = function computedGetAlignCenter(_ref2) {
+  var props = _ref2.props,
+    constants = _ref2.constants;
+  return function () {
+    return !isSupportObjectFit() && props.fit !== constants.FILL;
+  };
+};
+export var computedGetPreview = function computedGetPreview(props) {
+  return function () {
+    return Array.isArray(props.previewSrcList) && props.previewSrcList.length > 0;
+  };
+};
+export var loadImage = function loadImage(_ref3) {
+  var state = _ref3.state,
+    api = _ref3.api,
+    attrs = _ref3.attrs,
+    props = _ref3.props;
+  return function () {
+    state.loading = true;
+    state.error = false;
+    var img = new Image();
+    img.onload = function (event) {
+      return api.handleLoad(event, img);
+    };
+    img.onerror = api.handleError;
+    Object.keys(attrs).forEach(function (key) {
+      if (key !== 'onError' && key !== 'onLoad') {
+        var value = attrs[key];
+        img.setAttribute(key, value);
+      }
+    });
+    img.src = props.src;
+  };
+};
+export var handleLoad = function handleLoad(_ref4) {
+  var state = _ref4.state,
+    emit = _ref4.emit;
+  return function (event, img) {
+    state.imageWidth = img.width;
+    state.imageHeight = img.height;
+    state.loading = false;
+    emit('load', event);
+  };
+};
+export var handleError = function handleError(_ref5) {
+  var state = _ref5.state,
+    emit = _ref5.emit;
+  return function (event) {
+    state.loading = false;
+    state.error = true;
+    emit('error', event);
+  };
+};
+export var handleLazyLoad = function handleLazyLoad(_ref6) {
+  var state = _ref6.state,
+    api = _ref6.api,
+    vm = _ref6.vm,
+    nextTick = _ref6.nextTick;
+  return function () {
+    if (isInContainer(vm.$el, state._scrollContainer)) {
+      nextTick(function () {
+        return state.show = true;
+      });
+      api.removeLazyLoadListener();
+    }
+  };
+};
+export var addLazyLoadListener = function addLazyLoadListener(_ref7) {
+  var props = _ref7.props,
+    state = _ref7.state,
+    api = _ref7.api,
+    vm = _ref7.vm;
+  return function () {
+    var scrollContainer = props.scrollContainer;
+    var _scrollContainer = null;
+    if (isHtmlElement(scrollContainer)) {
+      _scrollContainer = scrollContainer;
+    } else if (typeOf(scrollContainer) === 'string') {
+      _scrollContainer = document.querySelector(scrollContainer);
+    } else {
+      _scrollContainer = getScrollContainer(vm.$el);
+    }
+    if (_scrollContainer) {
+      state._scrollContainer = _scrollContainer;
+      state._lazyLoadHandler = rafThrottle(api.handleLazyLoad);
+      on(_scrollContainer, 'scroll', state._lazyLoadHandler);
+      api.handleLazyLoad();
+    }
+  };
+};
+export var removeLazyLoadListener = function removeLazyLoadListener(state) {
+  return function () {
+    var _scrollContainer = state._scrollContainer,
+      _lazyLoadHandler = state._lazyLoadHandler;
+    if (!_scrollContainer || !_lazyLoadHandler) {
+      return;
+    }
+    off(_scrollContainer, 'scroll', _lazyLoadHandler);
+    state._scrollContainer = null;
+    state._lazyLoadHandler = null;
+  };
+};
+export var getImageStyle = function getImageStyle(_ref8) {
+  var state = _ref8.state,
+    vm = _ref8.vm,
+    constants = _ref8.constants;
+  return function (fit) {
+    var imageWidth = state.imageWidth,
+      imageHeight = state.imageHeight;
+    var _vm$$el = vm.$el,
+      containerWidth = _vm$$el.clientWidth,
+      containerHeight = _vm$$el.clientHeight;
+    if (!imageWidth || !imageHeight || !containerWidth || !containerHeight) {
+      return {};
+    }
+    var vertical = imageWidth / imageHeight < 1;
+    if (fit === constants.SCALE_DOWN) {
+      var isSmaller = imageWidth < containerWidth && imageHeight < containerHeight;
+      fit = isSmaller ? constants.NONE : constants.CONTAIN;
+    }
+    if (fit === constants.NONE) {
+      return {
+        width: 'auto',
+        height: 'auto'
+      };
+    }
+    if (fit === constants.CONTAIN) {
+      return vertical ? {
+        width: 'auto'
+      } : {
+        height: 'auto'
+      };
+    }
+    if (fit === constants.COVER) {
+      return vertical ? {
+        height: 'auto'
+      } : {
+        width: 'auto'
+      };
+    }
+    return {};
+  };
+};
+export var clickHandler = function clickHandler(state) {
+  return function () {
+    return state.showViewer = true;
+  };
+};
+export var closeViewer = function closeViewer(state) {
+  return function () {
+    return state.showViewer = false;
+  };
+};
+export var mounted = function mounted(_ref9) {
+  var props = _ref9.props,
+    api = _ref9.api;
+  return function () {
+    if (props.lazy) {
+      api.addLazyLoadListener();
+    } else {
+      api.loadImage();
+    }
+  };
+};

package/image/vue.js

@@ -0,0 +1,142 @@
+import { computedGetImageStyle, computedGetAlignCenter, computedGetPreview, loadImage, handleLoad, handleError, handleLazyLoad, addLazyLoadListener, removeLazyLoadListener, getImageStyle, clickHandler, closeViewer, mounted } from './index';
+export var api = ['state', 'src', 'zIndex', 'previewSrcList', 'loadImage', 'clickHandler', 'closeViewer', 'handleLoad', 'handleError'];
+var initState = function initState(_ref) {
+  var reactive = _ref.reactive,
+    computed = _ref.computed,
+    api = _ref.api,
+    props = _ref.props;
+  var state = reactive({
+    error: false,
+    loading: true,
+    imageWidth: 0,
+    imageHeight: 0,
+    show: !props.lazy,
+    showViewer: false,
+    getPreview: computed(function () {
+      return api.computedGetPreview();
+    }),
+    getImageStyle: computed(function () {
+      return api.computedGetImageStyle();
+    }),
+    getAlignCenter: computed(function () {
+      return api.computedGetAlignCenter();
+    })
+  });
+  return state;
+};
+var initApi = function initApi(_ref2) {
+  var api = _ref2.api,
+    state = _ref2.state,
+    emit = _ref2.emit,
+    props = _ref2.props,
+    vm = _ref2.vm,
+    constants = _ref2.constants,
+    nextTick = _ref2.nextTick,
+    attrs = _ref2.attrs;
+  Object.assign(api, {
+    state: state,
+    closeViewer: closeViewer(state),
+    clickHandler: clickHandler(state),
+    handleLoad: handleLoad({
+      state: state,
+      emit: emit
+    }),
+    handleError: handleError({
+      state: state,
+      emit: emit
+    }),
+    computedGetPreview: computedGetPreview(props),
+    removeLazyLoadListener: removeLazyLoadListener(state),
+    getImageStyle: getImageStyle({
+      state: state,
+      vm: vm,
+      constants: constants
+    }),
+    computedGetAlignCenter: computedGetAlignCenter({
+      props: props,
+      constants: constants
+    }),
+    mounted: mounted({
+      api: api,
+      props: props
+    }),
+    handleLazyLoad: handleLazyLoad({
+      api: api,
+      state: state,
+      vm: vm,
+      nextTick: nextTick
+    }),
+    loadImage: loadImage({
+      api: api,
+      state: state,
+      props: props,
+      attrs: attrs
+    }),
+    computedGetImageStyle: computedGetImageStyle({
+      api: api,
+      props: props
+    }),
+    addLazyLoadListener: addLazyLoadListener({
+      api: api,
+      props: props,
+      state: state,
+      vm: vm
+    })
+  });
+};
+var initWatch = function initWatch(_ref3) {
+  var watch = _ref3.watch,
+    state = _ref3.state,
+    api = _ref3.api,
+    props = _ref3.props;
+  watch(function () {
+    return props.src;
+  }, function (value, oldValue) {
+    return value !== oldValue && state.show && api.loadImage();
+  });
+  watch(function () {
+    return state.show;
+  }, function (value) {
+    return value && api.loadImage();
+  });
+};
+export var renderless = function renderless(props, _ref4, _ref5) {
+  var computed = _ref4.computed,
+    onBeforeUnmount = _ref4.onBeforeUnmount,
+    onMounted = _ref4.onMounted,
+    reactive = _ref4.reactive,
+    watch = _ref4.watch;
+  var vm = _ref5.vm,
+    emit = _ref5.emit,
+    constants = _ref5.constants,
+    nextTick = _ref5.nextTick,
+    attrs = _ref5.attrs;
+  var api = {};
+  var state = initState({
+    reactive: reactive,
+    computed: computed,
+    api: api,
+    props: props
+  });
+  initApi({
+    api: api,
+    state: state,
+    emit: emit,
+    props: props,
+    vm: vm,
+    constants: constants,
+    nextTick: nextTick,
+    attrs: attrs
+  });
+  initWatch({
+    watch: watch,
+    state: state,
+    api: api,
+    props: props
+  });
+  onMounted(api.mounted);
+  onBeforeUnmount(function () {
+    return props.lazy && api.removeLazyLoadListener();
+  });
+  return api;
+};