@opentiny/vue-renderless 3.6.0 → 3.6.1-alpha.0

package/tab-nav/index.js

@@ -1,264 +1,231 @@
-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') {
+import "../chunk-PKUHTIDK.js";
+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";
+const computedNavStyle = (state) => {
+  const 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%)")
+      transform: `translate${dir}(${state.lineOffset}px) translate${dir}(-50%)`
     };
   } else {
     return {
-      transform: "translate".concat(dir, "(-").concat(state.navOffset, "px)")
+      transform: `translate${dir}(-${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';
+const scrollIntoView = ({ parent, refs, state }) => () => {
+  if (!state.scrollable) {
+    return;
+  }
+  const nav = refs.nav;
+  const activeTab = parent.$el.querySelector(".is-active");
+  if (!activeTab) {
+    return;
+  }
+  const to = activeTab.offsetLeft - (nav.offsetWidth - activeTab.offsetWidth) / 2;
+  const from = nav.scrollLeft;
+  if (state.mode === "mobile") {
+    nav.scrollLeft += to - from;
+    state.lineOffset = activeTab.offsetLeft + activeTab.offsetWidth / 2;
+  }
 };
-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.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;
+const computedSizeName = (state) => ~[POSITION.Top, POSITION.Bottom].indexOf(state.rootTabs.position) ? "width" : "height";
+const updated = ({ api, refs, state }) => () => {
+  if (!refs.nav) {
+    return;
+  }
+  let navSize = refs.nav[`offset${capitalize(state.sizeName)}`];
+  if (state.mode === "mobile") {
+    Array.prototype.forEach.call(refs.nav.children, (item) => {
+      if (item.classList && item.classList.contains("tiny-mobile-tabs__item")) {
+        navSize += item.offsetWidth;
       }
-    } else {
-      state.scrollable = false;
-      if (currentOffset > 0) {
-        state.navOffset = 0;
+      if (item.classList && item.classList.contains("is-active")) {
+        const line = item.querySelector(".tiny-mobile-tabs__name");
+        state.isActive = true;
+        state.lineOffset = item.offsetLeft + item.offsetWidth / 2;
       }
+    });
+  }
+  const containerSize = refs.navScroll[`offset${capitalize(state.sizeName)}`];
+  const currentOffset = state.navOffset;
+  if (containerSize < navSize) {
+    const currentOffset2 = state.navOffset;
+    state.scrollable = state.scrollable || {};
+    state.scrollable.prev = currentOffset2;
+    state.scrollable.next = currentOffset2 + containerSize < navSize;
+    if (navSize - currentOffset2 < containerSize) {
+      state.navOffset = navSize - containerSize;
+    }
+  } else {
+    state.scrollable = false;
+    if (currentOffset > 0) {
+      state.navOffset = 0;
     }
-    state.isActive && api.scrollIntoView();
-  };
+  }
+  state.isActive && api.scrollIntoView();
 };
-export var mounted = function mounted(_ref3) {
-  var api = _ref3.api,
-    parent = _ref3.parent;
-  var el = parent.$refs.nav.$el;
+const mounted = ({ api, parent }) => {
+  const el = parent.$refs.nav.$el;
   addResizeListener(el, api.updated);
-  on(document, 'visibilitychange', api.visibilityChangeHandler);
-  on(window, 'blur', api.windowBlurHandler);
-  on(window, 'focus', api.windowFocusHandler);
+  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;
+const beforeUnmount = ({ api, parent }) => {
+  const 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);
-    }
-  };
+  off(document, "visibilitychange", api.visibilityChangeHandler);
+  off(window, "blur", api.windowBlurHandler);
+  off(window, "focus", api.windowFocusHandler);
 };
-export var windowBlurHandler = function windowBlurHandler(state) {
-  return function () {
+const visibilityChangeHandler = (state) => () => {
+  const visibility = document.visibilityState;
+  if (visibility === "hidden") {
     state.focusable = false;
-  };
-};
-export var windowFocusHandler = function windowFocusHandler(state) {
-  return function () {
-    setTimeout(function () {
+  } else if (visibility === "visible") {
+    setTimeout(() => {
       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);
-  };
+const windowBlurHandler = (state) => () => {
+  state.focusable = false;
 };
-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;
-  };
+const windowFocusHandler = (state) => () => {
+  setTimeout(() => {
+    state.focusable = true;
+  }, 50);
 };
-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);
+const scrollToActiveTab = ({ parent, refs, state }) => () => {
+  if (!state.scrollable) {
+    return;
+  }
+  const nav = refs.nav;
+  const activeTab = parent.$el.querySelector(".is-active");
+  if (!activeTab) {
+    return;
+  }
+  const navScroll = refs.navScroll;
+  const activeTabBounding = activeTab.getBoundingClientRect();
+  const navScrollBounding = navScroll.getBoundingClientRect();
+  let maxOffset = nav.offsetWidth - navScrollBounding.width;
+  if (state.mode === "mobile") {
+    if (activeTabBounding.left > navScrollBounding.width) {
+      maxOffset = activeTabBounding.left - navScrollBounding.width + activeTabBounding.width;
     } else {
-      return;
+      maxOffset = activeTabBounding.width;
     }
-    if (keyCode === KEY_CODE.ArrowLeft || keyCode === KEY_CODE.ArrowUp) {
-      if (currentIndex === 0) {
-        nextIndex = tabList.length - 1;
-      } else {
-        nextIndex = currentIndex - 1;
-      }
+  }
+  const currentOffset = state.navOffset;
+  let 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);
+};
+const scrollPrev = ({ refs, state }) => () => {
+  const containerSize = refs.navScroll[`offset${capitalize(state.sizeName)}`];
+  const currentOffset = state.navOffset;
+  if (!currentOffset) {
+    return;
+  }
+  const newOffset = currentOffset > containerSize ? currentOffset - containerSize : 0;
+  state.navOffset = newOffset;
+};
+const scrollNext = ({ refs, state }) => () => {
+  const navSize = refs.nav[`offset${capitalize(state.sizeName)}`];
+  const containerSize = refs.navScroll[`offset${capitalize(state.sizeName)}`];
+  const currentOffset = state.navOffset;
+  if (navSize - currentOffset <= containerSize) {
+    return;
+  }
+  const newOffset = navSize - currentOffset > containerSize * 2 ? currentOffset + containerSize : navSize - containerSize;
+  state.navOffset = newOffset;
+};
+const changeTab = (api) => (event) => {
+  const keyCode = event.keyCode;
+  let nextIndex;
+  let 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 {
-      if (currentIndex < tabList.length - 1) {
-        nextIndex = currentIndex + 1;
-      } else {
-        nextIndex = 0;
-      }
+      nextIndex = currentIndex - 1;
     }
-    tabList[nextIndex].focus();
-    tabList[nextIndex].click();
-    api.setFocus();
-  };
-};
-export var setFocus = function setFocus(state) {
-  return function () {
-    if (state.focusable) {
-      state.isFocus = true;
+  } else {
+    if (currentIndex < tabList.length - 1) {
+      nextIndex = currentIndex + 1;
+    } else {
+      nextIndex = 0;
     }
-  };
+  }
+  tabList[nextIndex].focus();
+  tabList[nextIndex].click();
+  api.setFocus();
 };
-export var removeFocus = function removeFocus(state) {
-  return function () {
+const setFocus = (state) => () => {
+  if (state.focusable) {
     state.isFocus = true;
-  };
+  }
 };
-export var moreTabShow = function moreTabShow(state) {
-  return function () {
-    if (state.showMoreItem) {
-      state.showMoreItem = false;
-    } else {
-      state.showMoreItem = true;
-    }
-  };
+const removeFocus = (state) => () => {
+  state.isFocus = true;
 };
-export var expandTabShow = function expandTabShow(_ref8) {
-  var api = _ref8.api,
-    state = _ref8.state;
-  return function () {
-    state.showExpandItem = !state.showExpandItem;
-    if (state.showExpandItem) {
-      api.computedHeaderStyle();
-    }
-  };
+const moreTabShow = (state) => () => {
+  if (state.showMoreItem) {
+    state.showMoreItem = false;
+  } else {
+    state.showMoreItem = true;
+  }
+};
+const expandTabShow = ({ api, state }) => () => {
+  state.showExpandItem = !state.showExpandItem;
+  if (state.showExpandItem) {
+    api.computedHeaderStyle();
+  }
 };
-export var expandTabHide = function expandTabHide(state) {
-  return function () {
-    return state.showExpandItem = false;
-  };
+const expandTabHide = (state) => () => state.showExpandItem = false;
+const computedHeaderStyle = ({ refs, state }) => () => {
+  if (refs.nav) {
+    state.expandHeaderStyle[state.sizeName] = refs.nav[`offset${capitalize(state.sizeName)}`] + "px";
+  }
+  return state.expandHeaderStyle;
+};
+export {
+  beforeUnmount,
+  changeTab,
+  computedHeaderStyle,
+  computedNavStyle,
+  computedSizeName,
+  expandTabHide,
+  expandTabShow,
+  moreTabShow,
+  mounted,
+  removeFocus,
+  scrollIntoView,
+  scrollNext,
+  scrollPrev,
+  scrollToActiveTab,
+  setFocus,
+  updated,
+  visibilityChangeHandler,
+  windowBlurHandler,
+  windowFocusHandler
 };
-export var computedHeaderStyle = function computedHeaderStyle(_ref9) {
-  var refs = _ref9.refs,
-    state = _ref9.state;
-  return function () {
-    if (refs.nav) {
-      state.expandHeaderStyle[state.sizeName] = refs.nav["offset".concat(capitalize(state.sizeName))] + 'px';
-    }
-    return state.expandHeaderStyle;
-  };
-};

package/tab-nav/vue.js

@@ -1,22 +1,43 @@
-import { computedNavStyle, computedSizeName, updated, visibilityChangeHandler, windowBlurHandler, windowFocusHandler, scrollToActiveTab, scrollIntoView, mounted, moreTabShow, expandTabShow, expandTabHide, computedHeaderStyle, beforeUnmount, scrollPrev, scrollNext, changeTab, setFocus, removeFocus } from './index';
-export var api = ['state', 'setFocus', 'removeFocus', 'scrollPrev', 'scrollNext', 'changeTab', 'scrollToActiveTab', 'scrollIntoView', 'moreTabShow', 'expandTabShow', 'expandTabHide', 'computedHeaderStyle', 'swiperHandle'];
-export var renderless = function renderless(props, _ref, _ref2) {
-  var computed = _ref.computed,
-    inject = _ref.inject,
-    onBeforeUnmount = _ref.onBeforeUnmount,
-    onMounted = _ref.onMounted,
-    onUpdated = _ref.onUpdated,
-    reactive = _ref.reactive;
-  var parent = _ref2.parent,
-    refs = _ref2.refs,
-    tinyMode = _ref2.mode;
-  var api = {
-    mounted: mounted,
-    beforeUnmount: beforeUnmount,
-    computedNavStyle: computedNavStyle,
-    computedSizeName: computedSizeName
-  };
-  var state = reactive({
+import "../chunk-PKUHTIDK.js";
+import {
+  computedNavStyle,
+  computedSizeName,
+  updated,
+  visibilityChangeHandler,
+  windowBlurHandler,
+  windowFocusHandler,
+  scrollToActiveTab,
+  scrollIntoView,
+  mounted,
+  moreTabShow,
+  expandTabShow,
+  expandTabHide,
+  computedHeaderStyle,
+  beforeUnmount,
+  scrollPrev,
+  scrollNext,
+  changeTab,
+  setFocus,
+  removeFocus
+} from "./index";
+const api = [
+  "state",
+  "setFocus",
+  "removeFocus",
+  "scrollPrev",
+  "scrollNext",
+  "changeTab",
+  "scrollToActiveTab",
+  "scrollIntoView",
+  "moreTabShow",
+  "expandTabShow",
+  "expandTabHide",
+  "computedHeaderStyle",
+  "swiperHandle"
+];
+const renderless = (props, { computed, inject, onBeforeUnmount, onMounted, onUpdated, reactive }, { parent, refs, mode: tinyMode }) => {
+  const api2 = { mounted, beforeUnmount, computedNavStyle, computedSizeName };
+  const state = reactive({
     navOffset: 0,
     lineOffset: 0,
     scrollable: false,
@@ -28,76 +49,34 @@ export var renderless = function renderless(props, _ref, _ref2) {
     showExpandItem: false,
     showExpandTabs: props.showExpandTabs,
     expandHeaderStyle: {},
-    mode: props._mode || parent.$mode || (tinyMode ? tinyMode : 'pc'),
-    rootTabs: inject('rootTabs'),
-    sizeName: computed(function () {
-      return api.computedSizeName(state);
-    }),
-    navStyle: computed(function () {
-      return api.computedNavStyle(state);
-    })
+    mode: props._mode || parent.$mode || (tinyMode || "pc"),
+    rootTabs: inject("rootTabs"),
+    sizeName: computed(() => api2.computedSizeName(state)),
+    navStyle: computed(() => api2.computedNavStyle(state))
   });
-  Object.assign(api, {
-    state: state,
+  Object.assign(api2, {
+    state,
     setFocus: setFocus(state),
     removeFocus: removeFocus(state),
     moreTabShow: moreTabShow(state),
-    expandTabShow: expandTabShow({
-      api: api,
-      state: state
-    }),
+    expandTabShow: expandTabShow({ api: api2, state }),
     expandTabHide: expandTabHide(state),
-    scrollPrev: scrollPrev({
-      refs: refs,
-      state: state
-    }),
-    scrollNext: scrollNext({
-      refs: refs,
-      state: state
-    }),
+    scrollPrev: scrollPrev({ refs, state }),
+    scrollNext: scrollNext({ refs, 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
-    }),
-    computedHeaderStyle: computedHeaderStyle({
-      refs: refs,
-      state: state
-    })
+    scrollToActiveTab: scrollToActiveTab({ props, parent, refs, state }),
+    scrollIntoView: scrollIntoView({ props, parent, refs, state }),
+    computedHeaderStyle: computedHeaderStyle({ refs, state })
   });
-  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;
-};
+  Object.assign(api2, { updated: updated({ api: api2, props, refs, state }), changeTab: changeTab(api2) });
+  onUpdated(() => api2.updated());
+  onMounted(() => api2.mounted({ api: api2, parent }));
+  onBeforeUnmount(() => api2.beforeUnmount({ api: api2, parent }));
+  return api2;
+};
+export {
+  api,
+  renderless
+};