@opentiny/vue-renderless 3.1.0-alpha.0

package/tab-item/vue.js

@@ -0,0 +1,49 @@
+import { computedIsClosable, computedActive, computedPaneName, watchTitle } from './index';
+export var api = ['state'];
+export var renderless = function renderless(props, _ref, _ref2) {
+  var computed = _ref.computed,
+    inject = _ref.inject,
+    reactive = _ref.reactive,
+    watch = _ref.watch;
+  var parent = _ref2.parent,
+    nextTick = _ref2.nextTick;
+  var api = {
+    watchTitle: watchTitle(parent),
+    computedIsClosable: computedIsClosable({
+      parent: parent,
+      props: props
+    })
+  };
+  var state = reactive({
+    index: null,
+    loaded: false,
+    animateShow: true,
+    rootTabs: inject('rootTabs'),
+    active: computed(function () {
+      return api.computedActive();
+    }),
+    paneName: computed(function () {
+      return api.computedPaneName();
+    }),
+    isClosable: computed(function () {
+      return api.computedIsClosable();
+    })
+  });
+  Object.assign(api, {
+    state: state,
+    computedActive: computedActive({
+      parent: parent,
+      nextTick: nextTick,
+      props: props,
+      state: state
+    }),
+    computedPaneName: computedPaneName({
+      props: props,
+      state: state
+    })
+  });
+  watch(function () {
+    return props.title;
+  }, api.watchTitle);
+  return api;
+};

package/tab-nav/index.js

@@ -0,0 +1,247 @@
+import { KEY_CODE, POSITION } from '@opentiny/vue-renderless/common';
+import { capitalize } from '@opentiny/vue-renderless/common/string';
+import { addResizeListener, removeResizeListener } from '@opentiny/vue-renderless/common/deps/resize-event';
+import { on, off } from '@opentiny/vue-renderless/common/deps/dom';
+export var computedNavStyle = function computedNavStyle(state) {
+  var dir = ~[POSITION.Top, POSITION.Bottom].indexOf(state.rootTabs.position) ? 'X' : 'Y';
+  if (state.mode === 'mobile') {
+    return {
+      transform: "translate".concat(dir, "(").concat(state.lineOffset, "px) translate").concat(dir, "(-50%)"),
+      width: "".concat(state.lineWidth, "px")
+    };
+  } else {
+    return {
+      transform: "translate".concat(dir, "(-").concat(state.navOffset, "px)")
+    };
+  }
+};
+export var scrollIntoView = function scrollIntoView(_ref) {
+  var parent = _ref.parent,
+    refs = _ref.refs,
+    state = _ref.state;
+  return function () {
+    if (!state.scrollable) {
+      return;
+    }
+    var nav = refs.nav;
+    var activeTab = parent.$el.querySelector('.is-active');
+    if (!activeTab) {
+      return;
+    }
+    var to = activeTab.offsetLeft - (nav.offsetWidth - activeTab.offsetWidth) / 2;
+    var from = nav.scrollLeft;
+    if (state.mode === 'mobile') {
+      nav.scrollLeft += to - from;
+      state.lineOffset = activeTab.offsetLeft + activeTab.offsetWidth / 2;
+    }
+  };
+};
+export var computedSizeName = function computedSizeName(state) {
+  return ~[POSITION.Top, POSITION.Bottom].indexOf(state.rootTabs.position) ? 'width' : 'height';
+};
+export var updated = function updated(_ref2) {
+  var api = _ref2.api,
+    refs = _ref2.refs,
+    state = _ref2.state;
+  return function () {
+    if (!refs.nav) {
+      return;
+    }
+    var navSize = refs.nav["offset".concat(capitalize(state.sizeName))];
+    if (state.mode === 'mobile') {
+      Array.prototype.forEach.call(refs.nav.children, function (item) {
+        if (item.classList && item.classList.contains('tiny-mobile-tabs__item')) {
+          navSize += item.offsetWidth;
+        }
+        if (item.classList && item.classList.contains('is-active')) {
+          var line = item.querySelector('.tiny-mobile-tabs__name');
+          state.isActive = true;
+          state.lineWidth = line.offsetWidth;
+          state.lineOffset = item.offsetLeft + item.offsetWidth / 2;
+        }
+      });
+    }
+    var containerSize = refs.navScroll["offset".concat(capitalize(state.sizeName))];
+    var currentOffset = state.navOffset;
+    if (containerSize < navSize) {
+      var _currentOffset = state.navOffset;
+      state.scrollable = state.scrollable || {};
+      state.scrollable.prev = _currentOffset;
+      state.scrollable.next = _currentOffset + containerSize < navSize;
+      if (navSize - _currentOffset < containerSize) {
+        state.navOffset = navSize - containerSize;
+      }
+    } else {
+      state.scrollable = false;
+      if (currentOffset > 0) {
+        state.navOffset = 0;
+      }
+    }
+    state.isActive && api.scrollIntoView();
+    if (refs.tabBar) {
+      refs.tabBar.state.barStyle = refs.tabBar.computedBarStyle(refs.tabBar, state);
+    } else {
+      var line = refs.nav.querySelector('tiny-mobile-tabs__line');
+      line && line.style && (line.style.transform = api.computedNavStyle().transform);
+    }
+  };
+};
+export var mounted = function mounted(_ref3) {
+  var api = _ref3.api,
+    parent = _ref3.parent;
+  var el = parent.$refs.nav.$el;
+  addResizeListener(el, api.updated);
+  on(document, 'visibilitychange', api.visibilityChangeHandler);
+  on(window, 'blur', api.windowBlurHandler);
+  on(window, 'focus', api.windowFocusHandler);
+  api.scrollToActiveTab();
+  api.scrollIntoView();
+};
+export var beforeUnmount = function beforeUnmount(_ref4) {
+  var api = _ref4.api,
+    parent = _ref4.parent;
+  var el = parent.$refs.nav && parent.$refs.nav.$el;
+  if (el && api.updated) {
+    removeResizeListener(el, api.updated);
+  }
+  off(document, 'visibilitychange', api.visibilityChangeHandler);
+  off(window, 'blur', api.windowBlurHandler);
+  off(window, 'focus', api.windowFocusHandler);
+};
+export var visibilityChangeHandler = function visibilityChangeHandler(state) {
+  return function () {
+    var visibility = document.visibilityState;
+    if (visibility === 'hidden') {
+      state.focusable = false;
+    } else if (visibility === 'visible') {
+      setTimeout(function () {
+        state.focusable = true;
+      }, 50);
+    }
+  };
+};
+export var windowBlurHandler = function windowBlurHandler(state) {
+  return function () {
+    state.focusable = false;
+  };
+};
+export var windowFocusHandler = function windowFocusHandler(state) {
+  return function () {
+    setTimeout(function () {
+      state.focusable = true;
+    }, 50);
+  };
+};
+export var scrollToActiveTab = function scrollToActiveTab(_ref5) {
+  var parent = _ref5.parent,
+    refs = _ref5.refs,
+    state = _ref5.state;
+  return function () {
+    if (!state.scrollable) {
+      return;
+    }
+    var nav = refs.nav;
+    var activeTab = parent.$el.querySelector('.is-active');
+    if (!activeTab) {
+      return;
+    }
+    var navScroll = refs.navScroll;
+    var activeTabBounding = activeTab.getBoundingClientRect();
+    var navScrollBounding = navScroll.getBoundingClientRect();
+    var maxOffset = nav.offsetWidth - navScrollBounding.width;
+    if (state.mode === 'mobile') {
+      if (activeTabBounding.left > navScrollBounding.width) {
+        maxOffset = activeTabBounding.left - navScrollBounding.width + activeTabBounding.width;
+      } else {
+        maxOffset = activeTabBounding.width;
+      }
+    }
+    var currentOffset = state.navOffset;
+    var newOffset = currentOffset;
+    if (activeTabBounding.left < navScrollBounding.left) {
+      newOffset = currentOffset - (navScrollBounding.left - activeTabBounding.left);
+    }
+    if (activeTabBounding.right > navScrollBounding.right) {
+      newOffset = currentOffset + activeTabBounding.right - navScrollBounding.right;
+    }
+    newOffset = Math.max(newOffset, 0);
+    state.navOffset = Math.min(newOffset, maxOffset);
+  };
+};
+export var scrollPrev = function scrollPrev(_ref6) {
+  var refs = _ref6.refs,
+    state = _ref6.state;
+  return function () {
+    var containerSize = refs.navScroll["offset".concat(capitalize(state.sizeName))];
+    var currentOffset = state.navOffset;
+    if (!currentOffset) {
+      return;
+    }
+    var newOffset = currentOffset > containerSize ? currentOffset - containerSize : 0;
+    state.navOffset = newOffset;
+  };
+};
+export var scrollNext = function scrollNext(_ref7) {
+  var refs = _ref7.refs,
+    state = _ref7.state;
+  return function () {
+    var navSize = refs.nav["offset".concat(capitalize(state.sizeName))];
+    var containerSize = refs.navScroll["offset".concat(capitalize(state.sizeName))];
+    var currentOffset = state.navOffset;
+    if (navSize - currentOffset <= containerSize) {
+      return;
+    }
+    var newOffset = navSize - currentOffset > containerSize * 2 ? currentOffset + containerSize : navSize - containerSize;
+    state.navOffset = newOffset;
+  };
+};
+export var changeTab = function changeTab(api) {
+  return function (event) {
+    var keyCode = event.keyCode;
+    var nextIndex;
+    var currentIndex, tabList;
+    if (~[KEY_CODE.ArrowLeft, KEY_CODE.ArrowRight, KEY_CODE.ArrowUp, KEY_CODE.ArrowDown].indexOf(keyCode)) {
+      tabList = event.currentTarget.querySelectorAll('[role=tab]');
+      currentIndex = Array.prototype.indexOf.call(tabList, event.target);
+    } else {
+      return;
+    }
+    if (keyCode === KEY_CODE.ArrowLeft || keyCode === KEY_CODE.ArrowUp) {
+      if (currentIndex === 0) {
+        nextIndex = tabList.length - 1;
+      } else {
+        nextIndex = currentIndex - 1;
+      }
+    } else {
+      if (currentIndex < tabList.length - 1) {
+        nextIndex = currentIndex + 1;
+      } else {
+        nextIndex = 0;
+      }
+    }
+    tabList[nextIndex].focus();
+    tabList[nextIndex].click();
+    api.setFocus();
+  };
+};
+export var setFocus = function setFocus(state) {
+  return function () {
+    if (state.focusable) {
+      state.isFocus = true;
+    }
+  };
+};
+export var removeFocus = function removeFocus(state) {
+  return function () {
+    state.isFocus = true;
+  };
+};
+export var moreTabShow = function moreTabShow(state) {
+  return function () {
+    if (state.showMoreItem) {
+      state.showMoreItem = false;
+    } else {
+      state.showMoreItem = true;
+    }
+  };
+};

package/tab-nav/vue.js

@@ -0,0 +1,106 @@
+import { computedNavStyle, computedSizeName, updated, visibilityChangeHandler, windowBlurHandler, windowFocusHandler, scrollToActiveTab, scrollIntoView, mounted, moreTabShow, beforeUnmount, scrollPrev, scrollNext, changeTab, setFocus, removeFocus } from './index';
+export var api = ['state', 'setFocus', 'removeFocus', 'scrollPrev', 'scrollNext', 'changeTab', 'scrollToActiveTab', 'scrollIntoView', 'moreTabShow', 'swiperHandle'];
+export var renderless = function renderless(props, _ref, _ref2) {
+  var computed = _ref.computed,
+    watch = _ref.watch,
+    inject = _ref.inject,
+    onBeforeUnmount = _ref.onBeforeUnmount,
+    onMounted = _ref.onMounted,
+    onUpdated = _ref.onUpdated,
+    reactive = _ref.reactive;
+  var parent = _ref2.parent,
+    refs = _ref2.refs,
+    nextTick = _ref2.nextTick,
+    tinyMode = _ref2.mode;
+  var api = {
+    mounted: mounted,
+    beforeUnmount: beforeUnmount,
+    computedNavStyle: computedNavStyle,
+    computedSizeName: computedSizeName
+  };
+  var state = reactive({
+    navOffset: 0,
+    lineOffset: 0,
+    lineWidth: 0,
+    scrollable: false,
+    isFocus: false,
+    focusable: false,
+    showMoreItem: false,
+    isActive: false,
+    showMoreTabs: props.showMoreTabs,
+    mode: props._mode || parent.$mode || (tinyMode ? tinyMode.value : 'pc'),
+    rootTabs: inject('rootTabs'),
+    sizeName: computed(function () {
+      return api.computedSizeName(state);
+    }),
+    navStyle: computed(function () {
+      return api.computedNavStyle(state);
+    })
+  });
+  Object.assign(api, {
+    state: state,
+    setFocus: setFocus(state),
+    removeFocus: removeFocus(state),
+    moreTabShow: moreTabShow(state),
+    scrollPrev: scrollPrev({
+      refs: refs,
+      state: state
+    }),
+    scrollNext: scrollNext({
+      refs: refs,
+      state: state
+    }),
+    windowBlurHandler: windowBlurHandler(state),
+    windowFocusHandler: windowFocusHandler(state),
+    visibilityChangeHandler: visibilityChangeHandler(state),
+    scrollToActiveTab: scrollToActiveTab({
+      props: props,
+      parent: parent,
+      refs: refs,
+      state: state
+    }),
+    scrollIntoView: scrollIntoView({
+      props: props,
+      parent: parent,
+      refs: refs,
+      state: state
+    })
+  });
+  watch(function () {
+    return props.currentName;
+  }, function () {
+    nextTick(function () {
+      var tabBarVnode = refs.tabBar;
+      if (tabBarVnode) {
+        tabBarVnode.state.barStyle = tabBarVnode.computedBarStyle(tabBarVnode, state);
+      }
+    });
+  }, {
+    immediate: true
+  });
+  Object.assign(api, {
+    updated: updated({
+      api: api,
+      props: props,
+      refs: refs,
+      state: state
+    }),
+    changeTab: changeTab(api)
+  });
+  onUpdated(function () {
+    return api.updated();
+  });
+  onMounted(function () {
+    return api.mounted({
+      api: api,
+      parent: parent
+    });
+  });
+  onBeforeUnmount(function () {
+    return api.beforeUnmount({
+      api: api,
+      parent: parent
+    });
+  });
+  return api;
+};

package/tabbar/index.js

@@ -0,0 +1,32 @@
+export var setActiveItem = function setActiveItem(_ref) {
+  var props = _ref.props,
+    state = _ref.state;
+  return function () {
+    state.children.forEach(function (item, index) {
+      item.state ? item.state.index = index : item.index = index;
+      item.state && (item.state.active = (item.name || index) === props.modelValue);
+    });
+  };
+};
+export var onChange = function onChange(_ref2) {
+  var emit = _ref2.emit,
+    props = _ref2.props;
+  return function (active) {
+    if (active !== props.modelValue) {
+      emit('update:modelValue', active);
+      emit('change', active);
+    }
+  };
+};
+export var getChildrens = function getChildrens(_ref3) {
+  var childrenHandler = _ref3.childrenHandler;
+  return function () {
+    var $children = [];
+    childrenHandler(function (_ref4) {
+      var options = _ref4.options,
+        vm = _ref4.vm;
+      options.componentName === 'TinyTabbarItem' && $children.push(vm);
+    });
+    return $children;
+  };
+};

package/tabbar/vue.js

@@ -0,0 +1,54 @@
+import { setActiveItem, onChange, getChildrens } from './index';
+export var api = ['state', 'onChange', 'getChildrens'];
+export var renderless = function renderless(props, _ref, _ref2) {
+  var computed = _ref.computed,
+    onMounted = _ref.onMounted,
+    reactive = _ref.reactive,
+    watch = _ref.watch;
+  var refs = _ref2.refs,
+    emit = _ref2.emit,
+    nextTick = _ref2.nextTick,
+    childrenHandler = _ref2.childrenHandler;
+  var state = reactive({
+    height: null,
+    children: [],
+    fit: computed(function () {
+      return props.safeAreaInsetBottom !== null ? props.safeAreaInsetBottom : props.fixed;
+    })
+  });
+  var api = {
+    state: state,
+    onChange: onChange({
+      emit: emit,
+      props: props
+    }),
+    parent: computed(function () {
+      return api.getParent();
+    }),
+    setActiveItem: setActiveItem({
+      props: props,
+      state: state
+    }),
+    getChildrens: getChildrens({
+      childrenHandler: childrenHandler
+    })
+  };
+  onMounted(function () {
+    if (props.placeholder && props.fixed) {
+      nextTick(function () {
+        state.height = refs.tabbar.getBoundingClientRect().height;
+      });
+    }
+  });
+  watch(function () {
+    return props.modelValue;
+  }, api.setActiveItem, {
+    immediate: true
+  });
+  watch(function () {
+    return state.children;
+  }, api.setActiveItem, {
+    immediate: true
+  });
+  return api;
+};

package/tabbar-item/index.js

@@ -0,0 +1,55 @@
+import { isObject, isNull } from '@opentiny/vue-renderless/common/type';
+export var getRouteActive = function getRouteActive(_ref) {
+  var props = _ref.props,
+    route = _ref.route;
+  return function () {
+    if (props.to && route) {
+      var config = isObject(props.to) ? props.to : {
+        path: props.to
+      };
+      var pathMatched = config.path === route.path;
+      var nameMatched = !isNull(config.name) && config.name === route.name;
+      return pathMatched || nameMatched;
+    }
+  };
+};
+export var onClick = function onClick(_ref2) {
+  var api = _ref2.api,
+    emit = _ref2.emit,
+    parent = _ref2.parent,
+    props = _ref2.props,
+    router = _ref2.router,
+    state = _ref2.state;
+  return function () {
+    parent.$parent.onChange(props.name || parent.index || state.index);
+    emit('click', event);
+    api.routeTab(router);
+  };
+};
+export var bindChildren = function bindChildren(parent) {
+  return function () {
+    if (!parent.$parent) {
+      return;
+    }
+    parent.$parent.state.children = parent.$parent.getChildrens();
+  };
+};
+export var routeTab = function routeTab(props, state) {
+  return function (router) {
+    var to = props.to,
+      replace = props.replace;
+    var url = state.url;
+    if (to && router) {
+      var promise = router[replace ? 'replace' : 'push'](to);
+      if (promise && promise["catch"]) {
+        promise["catch"](function (err) {
+          if (err && err.name !== 'NavigationDuplicated') {
+            throw err;
+          }
+        });
+      }
+    } else if (url) {
+      replace ? location.replace(url) : location.href = url;
+    }
+  };
+};

package/tabbar-item/vue.js

@@ -0,0 +1,53 @@
+import { getRouteActive, onClick, bindChildren, routeTab } from './index';
+import { xss } from '@opentiny/vue-renderless/common/xss.js';
+export var api = ['state', 'onClick'];
+export var renderless = function renderless(props, _ref, _ref2) {
+  var computed = _ref.computed,
+    onMounted = _ref.onMounted,
+    reactive = _ref.reactive;
+  var parent = _ref2.parent,
+    emit = _ref2.emit,
+    nextTick = _ref2.nextTick,
+    route = _ref2.route,
+    router = _ref2.router;
+  var api = {};
+  var state = reactive({
+    active: false,
+    info: computed(function () {
+      return props.dot ? '' : !props.dot && props.badge;
+    }),
+    url: computed(function () {
+      return xss.filterUrl(props.url);
+    }),
+    routeActive: computed(function () {
+      return api.getRouteActive();
+    }),
+    renderActive: computed(function () {
+      return parent.$parent.route ? state.routeActive : state.active;
+    }),
+    renderColor: computed(function () {
+      return parent.$parent[state.active ? 'activeColor' : 'inactiveColor'];
+    })
+  });
+  Object.assign(api, {
+    state: state,
+    bindChildren: bindChildren(parent),
+    routeTab: routeTab(props, state),
+    getRouteActive: getRouteActive({
+      props: props,
+      route: route
+    }),
+    onClick: onClick({
+      api: api,
+      emit: emit,
+      parent: parent,
+      props: props,
+      router: router,
+      state: state
+    })
+  });
+  onMounted(function () {
+    return nextTick(api.bindChildren);
+  });
+  return api;
+};

package/table/index.js

@@ -0,0 +1,111 @@
+export var computedCheckableData = function computedCheckableData(_ref) {
+  var props = _ref.props;
+  return function () {
+    return props.data.filter(function (item) {
+      return !item['disabled'];
+    });
+  };
+};
+export var computedSelectedKeys = function computedSelectedKeys(_ref2) {
+  var props = _ref2.props,
+    state = _ref2.state;
+  return function () {
+    var keys = [];
+    state.checkableData.forEach(function (item) {
+      return keys.push(item[props.keys]);
+    });
+    return keys;
+  };
+};
+export var computedSelectCls = function computedSelectCls(_ref3) {
+  var state = _ref3.state;
+  return function () {
+    if (state.selected.length > 0 && state.selected.length >= state.checkableData.length) {
+      return 'checked-sur';
+    } else if (state.selected.length > 0 && state.selected.length < state.checkableData.length) {
+      return 'halfselect';
+    }
+    return 'check';
+  };
+};
+export var watchDefaultChecked = function watchDefaultChecked(_ref4) {
+  var props = _ref4.props,
+    state = _ref4.state;
+  return function (value, oldvalue) {
+    if (oldvalue && value.length === oldvalue.length && value.every(function (item) {
+      return oldvalue.indexOf(item) > -1;
+    })) {
+      return;
+    }
+    var checked = [];
+    state.checkableData.forEach(function (item) {
+      var index = value.indexOf(item[props.keys]);
+      if (~index) {
+        checked.push(item);
+      }
+    });
+    state.selected = checked;
+    state.checkedChangeByUser = false;
+  };
+};
+export var watchSelected = function watchSelected(_ref5) {
+  var emit = _ref5.emit,
+    props = _ref5.props,
+    state = _ref5.state;
+  return function (value, oldvalue) {
+    var keys = [];
+    value.forEach(function (item) {
+      return keys.push(item[props.keys]);
+    });
+    if (state.checkedChangeByUser) {
+      var movedKeys = value.concat(oldvalue).filter(function (item) {
+        return value.indexOf(item) === -1 || oldvalue.indexOf(item) === -1;
+      });
+      emit('checked-change', keys, false, movedKeys);
+    } else {
+      emit('checked-change', keys, false);
+      state.checkedChangeByUser = true;
+    }
+  };
+};
+export var selectRow = function selectRow(_ref6) {
+  var emit = _ref6.emit,
+    state = _ref6.state;
+  return function (row) {
+    state.selectedRow = row;
+    emit('radio-change', row);
+  };
+};
+export var togeSelected = function togeSelected(_ref7) {
+  var state = _ref7.state;
+  return function (row) {
+    if (row.disabled) {
+      return;
+    }
+    var index = state.selected.indexOf(row);
+    if (index !== -1) {
+      state.selected.splice(index, 1);
+    } else {
+      state.selected.push(row);
+    }
+    state.selected = state.selected.slice();
+  };
+};
+export var togeSelectAll = function togeSelectAll(_ref8) {
+  var emit = _ref8.emit,
+    props = _ref8.props,
+    state = _ref8.state;
+  return function () {
+    var data = [];
+    if (state.selectCls === 'checked-sur') {
+      state.selected = [];
+      data = [];
+    } else {
+      data = state.checkableData.map(function (item) {
+        return item[props.keys];
+      });
+      state.selected = state.checkableData;
+    }
+    emit('checked-change', data, true);
+  };
+};