@opentiny/vue-renderless 3.5.0 → 3.6.0

package/README.md

@@ -0,0 +1,26 @@
+<p align="center">
+  <a href="https://tinyuidesign.cloudbu.huawei.com/" target="_blank" rel="noopener noreferrer">
+    <img alt="TinyVue Logo" src="./logo.svg" height="100" style="max-width:100%;">
+  </a>
+</p>
+
+<p align="center">Tiny-Vue-Renderless 是 TinyVue 组件库的逻辑层 </p>
+  
+## 如何使用
+
+使用组件库时，只需安装 `@opentiny/vue` , `@opentiny/vue-renderless` 会同步完成安装 
+
+## 本地开发
+```shell
+git clone git@github.com:opentiny/tiny-vue-renderless.git
+cd tiny-vue-renderless
+npm i
+```
+- 克隆的 tiny-vue-renderless 工程放在与 tiny-vue 工程同个目录文件夹
+- 安装 tiny-vue-renderless 的依赖
+- 然后启动 tiny-vue 工程
+- 本地启动 tiny-vue 工程后，即可调试 tiny-vue-renderless 工程
+
+## 开源协议
+
+[MIT](LICENSE)

package/action-menu/index.js

@@ -7,4 +7,9 @@ export var handleItemClick = function handleItemClick(emit) {
   return function (data) {
     emit('item-click', data);
   };
+};
+export var visibleChange = function visibleChange(emit) {
+  return function (status) {
+    emit('visible-change', status);
+  };
 };

package/action-menu/vue.js

@@ -1,12 +1,14 @@
-import { handleMoreClick, handleItemClick } from './index';
-export var api = ['state', 'handleMoreClick', 'handleItemClick'];
+import { handleMoreClick, handleItemClick, visibleChange } from './index';
+export var api = ['state', 'handleMoreClick', 'handleItemClick', 'visibleChange'];
 export var renderless = function renderless(props, _ref, _ref2) {
   var computed = _ref.computed,
     reactive = _ref.reactive;
-  var emit = _ref2.emit;
+  var emit = _ref2.emit,
+    nextTick = _ref2.nextTick;
   var api = {
     handleMoreClick: handleMoreClick(emit),
-    handleItemClick: handleItemClick(emit)
+    handleItemClick: handleItemClick(emit),
+    visibleChange: visibleChange(emit)
   };
   var state = reactive({
     visibleOptions: computed(function () {

package/action-sheet/index.js

@@ -1,13 +1,58 @@
-export var visibleHandle = function visibleHandle(emit) {
+export var setSheetStyle = function setSheetStyle(_ref) {
+  var state = _ref.state,
+    props = _ref.props;
   return function () {
+    if (props.contentPosition) {
+      state.sheetMaskStyle = {
+        'position': 'absolute'
+      };
+      state.sheetContentStyle = {
+        'position': 'absolute',
+        'max-height': props.height
+      };
+    } else {
+      state.sheetMaskStyle = {
+        'position': 'fixed'
+      };
+      state.sheetContentStyle = {
+        'position': 'fixed',
+        'max-height': props.height
+      };
+    }
+  };
+};
+export var initScrollMenu = function initScrollMenu(_ref2) {
+  var state = _ref2.state,
+    nextTick = _ref2.nextTick,
+    refs = _ref2.refs,
+    BScroll = _ref2.BScroll;
+  return function () {
+    nextTick(function () {
+      var scrollMenu = refs.scrollMenu;
+      if (!state.scroll) {
+        state.scroll = new BScroll(scrollMenu, {
+          probeType: 3,
+          click: true
+        });
+      } else {
+        state.scroll.refresh();
+      }
+    });
+  };
+};
+export var visibleHandle = function visibleHandle(_ref3) {
+  var emit = _ref3.emit,
+    state = _ref3.state;
+  return function () {
+    state.scroll = null;
     emit('update:visible', false);
     emit('close', false);
   };
 };
-export var watchVisible = function watchVisible(_ref) {
-  var emit = _ref.emit,
-    props = _ref.props,
-    state = _ref.state;
+export var watchVisible = function watchVisible(_ref4) {
+  var emit = _ref4.emit,
+    props = _ref4.props,
+    state = _ref4.state;
   return function (value) {
     state.active = props.modelValue;
     setTimeout(function () {
@@ -16,11 +61,12 @@ export var watchVisible = function watchVisible(_ref) {
     emit('update:visible', value);
   };
 };
-export var menuHandle = function menuHandle(_ref2) {
-  var emit = _ref2.emit,
-    state = _ref2.state;
+export var menuHandle = function menuHandle(_ref5) {
+  var emit = _ref5.emit,
+    state = _ref5.state;
   return function (item) {
     state.active = item.id;
+    state.scroll = null;
     emit('update:visible', false);
     emit('update:modelValue', item.id);
     emit('click', item);

package/action-sheet/vue.js

@@ -1,28 +1,61 @@
-import { visibleHandle, watchVisible, menuHandle } from './index';
-export var api = ['state', 'visibleHandle', 'menuHandle'];
-export var renderless = function renderless(props, _ref, _ref2) {
+import { setSheetStyle, initScrollMenu, visibleHandle, watchVisible, menuHandle } from './index';
+export var api = ['state', 'setSheetStyle', 'initScrollMenu', 'visibleHandle', 'menuHandle'];
+export var renderless = function renderless(props, _ref, _ref2, _ref3) {
   var reactive = _ref.reactive,
     watch = _ref.watch;
-  var emit = _ref2.emit;
+  var emit = _ref2.emit,
+    nextTick = _ref2.nextTick,
+    refs = _ref2.refs;
+  var BScroll = _ref3.BScroll;
   var api = {};
   var state = reactive({
     toggle: false,
-    active: null
+    active: null,
+    sheetMaskStyle: {},
+    sheetContentStyle: {},
+    scroll: null
   });
   watch(function () {
     return props.visible;
-  }, api.watchVisible);
+  }, function (value) {
+    if (value) {
+      api.setSheetStyle({
+        state: state,
+        props: props
+      });
+      api.initScrollMenu({
+        state: state,
+        nextTick: nextTick,
+        refs: refs,
+        BScroll: BScroll
+      });
+    }
+    api.watchVisible(value);
+  });
   Object.assign(api, {
     state: state,
-    menuHandle: menuHandle({
+    setSheetStyle: setSheetStyle({
       state: state,
-      emit: emit
+      props: props
+    }),
+    initScrollMenu: initScrollMenu({
+      state: state,
+      nextTick: nextTick,
+      refs: refs,
+      BScroll: BScroll
+    }),
+    visibleHandle: visibleHandle({
+      emit: emit,
+      state: state
     }),
-    visibleHandle: visibleHandle(emit),
     watchVisible: watchVisible({
       emit: emit,
       props: props,
       state: state
+    }),
+    menuHandle: menuHandle({
+      state: state,
+      emit: emit
     })
   });
   return api;

package/anchor/index.js

@@ -0,0 +1,217 @@
+import { addClass, removeClass } from '@opentiny/vue-renderless/common/deps/dom';
+var setFixAnchor = function setFixAnchor(_ref) {
+  var vm = _ref.vm;
+  var fixRef = vm.$refs.fixRef;
+  if (fixRef) {
+    fixRef.style.top = fixRef.offsetTop;
+  }
+};
+var setMarkClass = function setMarkClass(_ref2) {
+  var state = _ref2.state,
+    props = _ref2.props;
+  var scrollContainer = state.scrollContainer;
+  var markClass = props.markClass;
+  var activeContentEl = scrollContainer.querySelector("".concat(state.currentLink));
+  if (markClass) {
+    addClass(activeContentEl, markClass);
+    setTimeout(function () {
+      removeClass(activeContentEl, markClass);
+    }, 1000);
+  }
+};
+var setScrollContainer = function setScrollContainer(_ref3) {
+  var state = _ref3.state,
+    api = _ref3.api,
+    _ref3$cb = _ref3.cb,
+    cb = _ref3$cb === void 0 ? null : _ref3$cb;
+  var currentContainer = api.getContainer();
+  var scrollContainer = state.scrollContainer;
+  if (scrollContainer !== currentContainer) {
+    removeClass(scrollContainer, 'tiny-anchor-scroll-container');
+    state.scrollContainer = currentContainer;
+    addClass(currentContainer, 'tiny-anchor-scroll-container');
+    cb && cb();
+  }
+};
+var updateSkidPosition = function updateSkidPosition(_ref4) {
+  var vm = _ref4.vm,
+    state = _ref4.state,
+    emit = _ref4.emit;
+  var currentLink = state.currentLink;
+  var activeEl = vm.$refs[currentLink];
+  var _vm$$refs = vm.$refs,
+    skidRef = _vm$$refs.skidRef,
+    maskRef = _vm$$refs.maskRef,
+    anchorRef = _vm$$refs.anchorRef;
+  if (!activeEl || !anchorRef) {
+    return;
+  }
+  emit('onChange', currentLink);
+  var offsetHeight = activeEl.offsetHeight,
+    offsetWidth = activeEl.offsetWidth;
+  var _activeEl$getBounding = activeEl.getBoundingClientRect(),
+    linkTitleClientTop = _activeEl$getBounding.top,
+    linkTitleClientLeft = _activeEl$getBounding.left;
+  var _anchorRef$getBoundin = anchorRef.getBoundingClientRect(),
+    anchorClientTop = _anchorRef$getBoundin.top,
+    anchorClientLeft = _anchorRef$getBoundin.left;
+  var offsetTop = linkTitleClientTop - anchorClientTop;
+  var offsetLeft = linkTitleClientLeft - anchorClientLeft;
+  addClass(skidRef, 'tiny-anchor-orbit-skid--active');
+  skidRef.style.top = "".concat(offsetTop, "px");
+  skidRef.style.height = "".concat(offsetHeight, "px");
+  if (maskRef) {
+    maskRef.style.top = "".concat(offsetTop, "px");
+    maskRef.style.height = "".concat(offsetHeight, "px");
+    maskRef.style.maxWidth = "".concat(offsetWidth + offsetLeft, "px");
+  }
+};
+var getCurrentAnchor = function getCurrentAnchor(_ref5) {
+  var vm = _ref5.vm,
+    state = _ref5.state,
+    link = _ref5.link,
+    emit = _ref5.emit;
+  if (state.currentLink === link) {
+    return;
+  }
+  state.currentLink = link;
+  updateSkidPosition({
+    vm: vm,
+    state: state,
+    emit: emit
+  });
+};
+var addObserver = function addObserver(_ref6) {
+  var props = _ref6.props,
+    state = _ref6.state;
+  var links = props.links;
+  var intersectionObserver = state.intersectionObserver;
+  var observer = function observer(list) {
+    list.forEach(function (item) {
+      var link = item.link;
+      if (item.children) {
+        observer(item.children);
+      } else {
+        var linkEl = document.querySelector(link);
+        linkEl && intersectionObserver.observe(linkEl);
+      }
+    });
+  };
+  observer(links);
+};
+var setCurrentHash = function setCurrentHash(state) {
+  if (state.currentHash !== location.hash) {
+    state.currentHash = location.hash;
+    return true;
+  }
+  return false;
+};
+export var getContainer = function getContainer(_ref7) {
+  var props = _ref7.props;
+  return function () {
+    return props.containerId ? document.querySelector(props.containerId) : document.body;
+  };
+};
+export var mounted = function mounted(_ref8) {
+  var vm = _ref8.vm,
+    state = _ref8.state,
+    api = _ref8.api;
+  return function () {
+    setScrollContainer({
+      state: state,
+      api: api
+    });
+    setFixAnchor({
+      vm: vm
+    });
+    api.onItersectionObserver();
+    setCurrentHash(state);
+  };
+};
+export var updated = function updated(_ref9) {
+  var state = _ref9.state,
+    api = _ref9.api;
+  return function () {
+    var cb = api.onItersectionObserver;
+    setScrollContainer({
+      state: state,
+      api: api,
+      cb: cb
+    });
+  };
+};
+export var unmounted = function unmounted(_ref10) {
+  var state = _ref10.state;
+  return function () {
+    var intersectionObserver = state.intersectionObserver;
+    intersectionObserver.disconnect();
+  };
+};
+export var onItersectionObserver = function onItersectionObserver(_ref11) {
+  var vm = _ref11.vm,
+    state = _ref11.state,
+    props = _ref11.props,
+    emit = _ref11.emit;
+  return function () {
+    state.intersectionObserver = new IntersectionObserver(function (entries) {
+      entries.forEach(function (item) {
+        var key = item.target.id;
+        state.observerLinks[key] = item;
+      });
+      for (var _i = 0, _Object$values = Object.values(state.observerLinks); _i < _Object$values.length; _i++) {
+        var item = _Object$values[_i];
+        if (item.isIntersecting && item.intersectionRatio > 0) {
+          var link = "#".concat(item.target.id);
+          getCurrentAnchor({
+            vm: vm,
+            state: state,
+            link: link,
+            emit: emit
+          });
+          break;
+        }
+      }
+    });
+    addObserver({
+      props: props,
+      state: state
+    });
+  };
+};
+export var linkClick = function linkClick(_ref12) {
+  var state = _ref12.state,
+    vm = _ref12.vm,
+    emit = _ref12.emit,
+    props = _ref12.props;
+  return function (e, item) {
+    var link = item.link,
+      title = item.title;
+    var emitLink = {
+      link: link,
+      title: title
+    };
+    emit('linkClick', e, emitLink);
+    var isChangeHash = setCurrentHash(state);
+    var scrollContainer = state.scrollContainer;
+    state.currentLink = link;
+    updateSkidPosition({
+      vm: vm,
+      state: state,
+      emit: emit
+    });
+    setMarkClass({
+      state: state,
+      props: props
+    });
+    if (scrollContainer !== document.body && !isChangeHash) {
+      var linkEl = scrollContainer.querySelector(item.link);
+      var top = linkEl.offsetTop;
+      var param = {
+        top: top,
+        left: 0,
+        behavior: 'smooth'
+      };
+      scrollContainer.scrollTo(param);
+    }
+  };
+};

package/anchor/vue.js

@@ -0,0 +1,52 @@
+import { mounted, updated, unmounted, getContainer, linkClick, onItersectionObserver } from './index';
+export var api = ['state', 'getContainer', 'linkClick', 'onItersectionObserver'];
+export var renderless = function renderless(props, _ref, _ref2) {
+  var onMounted = _ref.onMounted,
+    onUnmounted = _ref.onUnmounted,
+    onUpdated = _ref.onUpdated,
+    reactive = _ref.reactive;
+  var vm = _ref2.vm,
+    emit = _ref2.emit;
+  var api = {};
+  var state = reactive({
+    currentLink: '',
+    observerLinks: {},
+    intersectionObserver: null,
+    scrollContainer: null,
+    currentHash: ''
+  });
+  Object.assign(api, {
+    state: state,
+    mounted: mounted({
+      vm: vm,
+      state: state,
+      api: api
+    }),
+    updated: updated({
+      state: state,
+      api: api
+    }),
+    unmounted: unmounted({
+      state: state
+    }),
+    getContainer: getContainer({
+      props: props
+    }),
+    linkClick: linkClick({
+      state: state,
+      vm: vm,
+      emit: emit,
+      props: props
+    }),
+    onItersectionObserver: onItersectionObserver({
+      vm: vm,
+      state: state,
+      props: props,
+      emit: emit
+    })
+  });
+  onMounted(api.mounted);
+  onUpdated(api.updated);
+  onUnmounted(api.unmounted);
+  return api;
+};

package/carousel-item/index.js

@@ -74,7 +74,9 @@ export var handleItemClick = function handleItemClick(parent) {
   return function () {
     var vnode = parent.$parent;
     if (vnode && vnode.type === parent.$constants.TYPE_CARD) {
-      var index = vnode.state.items.indexOf(parent);
+      var index = vnode.state.items.findIndex(function (item) {
+        return item.$el === parent.$el;
+      });
       vnode.setActiveItem(index);
     }
   };

package/dropdown/index.js

@@ -54,11 +54,13 @@ export var hide = function hide(_ref4) {
 export var handleClick = function handleClick(_ref5) {
   var api = _ref5.api,
     props = _ref5.props,
-    state = _ref5.state;
+    state = _ref5.state,
+    emit = _ref5.emit;
   return function () {
     if (props.disabled) {
       return;
     }
+    emit('handle-click', state.visible);
     state.visible ? api.hide() : api.show();
   };
 };

package/dropdown/vue.js

@@ -49,7 +49,8 @@ export var renderless = function renderless(props, _ref, _ref2) {
     handleClick: handleClick({
       api: api,
       props: props,
-      state: state
+      state: state,
+      emit: emit
     }),
     handleTriggerKeyDown: handleTriggerKeyDown({
       api: api,

package/dropdown-item/vue.js

@@ -1,3 +1,4 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import { tagClick, confirm, clickOutside, getOptionStyle, reset, getTitle, bindScroll, toggle, onScroll, open, opened, close, closed, clickItem, clickWrapper, getItemStyle, handleClick } from './index';
 export var api = ['state', 'confirm', 'clickOutside', 'getOptionStyle', 'reset', 'tagClick', 'clickItem', 'clickWrapper', 'toggle', 'open', 'opened', 'close', 'closed', 'handleClick'];
 var initState = function initState(_ref) {
@@ -110,9 +111,13 @@ export var renderless = function renderless(props, _ref3, _ref4) {
   var parent = _ref4.parent,
     emit = _ref4.emit,
     vm = _ref4.vm,
-    dispatch = _ref4.dispatch;
+    dispatch = _ref4.dispatch,
+    mode = _ref4.mode;
   var api = {};
   var dropdownMenu = inject('dropdownMenu', null);
+  if (mode === 'mobile') {
+    dropdownMenu.state.children = [].concat(_toConsumableArray(dropdownMenu.state.children), [vm]);
+  }
   parent = parent.$parent;
   var state = initState({
     reactive: reactive,

package/dropdown-menu/vue.js

@@ -2,10 +2,12 @@ import { toggleItem, updateOffset, clickOutside, getScroller, useVuePopper } fro
 export var api = ['state', 'toggleItem', 'updateOffset', 'clickOutside', 'doDestroy'];
 export var renderless = function renderless(props, hooks, instance) {
   var api = {};
-  var reactive = hooks.reactive;
+  var reactive = hooks.reactive,
+    provide = hooks.provide;
   var refs = instance.refs,
     nextTick = instance.nextTick,
-    mode = instance.mode;
+    mode = instance.mode,
+    vm = instance.vm;
   var state = reactive({
     offset: 0,
     scroller: null,
@@ -14,6 +16,7 @@ export var renderless = function renderless(props, hooks, instance) {
     showPopper: false
   });
   if (mode === 'mobile') {
+    provide('dropdownMenu', vm);
     nextTick(function () {
       state.scroller = getScroller(refs.menu);
     });