@opentiny/vue-renderless 3.5.0-alpha.0 → 3.6.0-alpha.1

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/form-item/index.js

@@ -39,9 +39,28 @@ export var computedLabelStyle = function computedLabelStyle(_ref2) {
     return result;
   };
 };
-export var computedContentStyle = function computedContentStyle(_ref3) {
+export var computedValueStyle = function computedValueStyle(_ref3) {
   var props = _ref3.props,
     state = _ref3.state;
+  return function () {
+    var result = {};
+    if (state.form.labelPosition === POSITION.Top) {
+      return result.width = '100%';
+    }
+    var labelWidth = props.labelWidth || state.form.labelWidth;
+    if (labelWidth) {
+      if (labelWidth === 'auto') {
+        result.width = labelWidth;
+      } else {
+        result.width = "calc(100% - ".concat(labelWidth, ")");
+      }
+    }
+    return result;
+  };
+};
+export var computedContentStyle = function computedContentStyle(_ref4) {
+  var props = _ref4.props,
+    state = _ref4.state;
   return function () {
     var result = {};
     var label = props.label;
@@ -64,10 +83,10 @@ export var computedContentStyle = function computedContentStyle(_ref3) {
     return result;
   };
 };
-export var computedForm = function computedForm(_ref4) {
-  var constants = _ref4.constants,
-    instance = _ref4.instance,
-    state = _ref4.state;
+export var computedForm = function computedForm(_ref5) {
+  var constants = _ref5.constants,
+    instance = _ref5.instance,
+    state = _ref5.state;
   return function () {
     var FORM_NAME = constants.FORM_NAME,
       FORM_ITEM_NAME = constants.FORM_ITEM_NAME;
@@ -83,9 +102,9 @@ export var computedForm = function computedForm(_ref4) {
     return parent;
   };
 };
-export var computedIsRequired = function computedIsRequired(_ref5) {
-  var api = _ref5.api,
-    state = _ref5.state;
+export var computedIsRequired = function computedIsRequired(_ref6) {
+  var api = _ref6.api,
+    state = _ref6.state;
   return function () {
     if (state.validationRequired) {
       return true;
@@ -130,9 +149,9 @@ export var getPropByPath = function getPropByPath(obj, path, strict) {
     v: findObj ? findObj[keys[index]] : null
   };
 };
-export var computedFieldValue = function computedFieldValue(_ref6) {
-  var props = _ref6.props,
-    state = _ref6.state;
+export var computedFieldValue = function computedFieldValue(_ref7) {
+  var props = _ref7.props,
+    state = _ref7.state;
   return function () {
     var model = state.form.model;
     if (!model || !props.prop) {
@@ -145,12 +164,12 @@ export var computedFieldValue = function computedFieldValue(_ref6) {
     return getPropByPath(model, path, true).v;
   };
 };
-export var mounted = function mounted(_ref7) {
-  var api = _ref7.api,
-    instance = _ref7.instance,
-    props = _ref7.props,
-    state = _ref7.state,
-    refs = _ref7.refs;
+export var mounted = function mounted(_ref8) {
+  var api = _ref8.api,
+    instance = _ref8.instance,
+    props = _ref8.props,
+    state = _ref8.state,
+    refs = _ref8.refs;
   return function () {
     state.tooltip = refs.tooltip;
     if (props.prop) {
@@ -164,20 +183,20 @@ export var mounted = function mounted(_ref7) {
     }
   };
 };
-export var unmounted = function unmounted(_ref8) {
-  var api = _ref8.api,
-    instance = _ref8.instance,
-    state = _ref8.state;
+export var unmounted = function unmounted(_ref9) {
+  var api = _ref9.api,
+    instance = _ref9.instance,
+    state = _ref9.state;
   return function () {
     state.canShowTip = false;
     api.dispatch('Form', 'form:removeField', instance);
   };
 };
-export var validate = function validate(_ref9) {
-  var api = _ref9.api,
-    props = _ref9.props,
-    state = _ref9.state,
-    t = _ref9.t;
+export var validate = function validate(_ref10) {
+  var api = _ref10.api,
+    props = _ref10.props,
+    state = _ref10.state,
+    t = _ref10.t;
   return function (trigger) {
     var callback = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : function () {
       return undefined;
@@ -226,11 +245,11 @@ export var clearValidate = function clearValidate(state) {
     state.validateDisabled = false;
   };
 };
-export var resetField = function resetField(_ref10) {
-  var api = _ref10.api,
-    nextTick = _ref10.nextTick,
-    props = _ref10.props,
-    state = _ref10.state;
+export var resetField = function resetField(_ref11) {
+  var api = _ref11.api,
+    nextTick = _ref11.nextTick,
+    props = _ref11.props,
+    state = _ref11.state;
   return function () {
     if (state.getValidateType === 'tip') {
       state.canShowTip = false;
@@ -259,9 +278,9 @@ export var resetField = function resetField(_ref10) {
     api.broadcast('timeSelect', 'fieldReset', state.initialValue);
   };
 };
-export var getRules = function getRules(_ref11) {
-  var props = _ref11.props,
-    state = _ref11.state;
+export var getRules = function getRules(_ref12) {
+  var props = _ref12.props,
+    state = _ref12.state;
   return function () {
     var formRules = state.form.rules;
     var selfRules = props.rules;
@@ -294,9 +313,9 @@ export var onFieldBlur = function onFieldBlur(api) {
     api.validate('blur');
   };
 };
-export var onFieldChange = function onFieldChange(_ref12) {
-  var api = _ref12.api,
-    state = _ref12.state;
+export var onFieldChange = function onFieldChange(_ref13) {
+  var api = _ref13.api,
+    state = _ref13.state;
   return function () {
     if (state.validateDisabled) {
       state.validateDisabled = false;
@@ -310,11 +329,11 @@ export var updateComputedLabelWidth = function updateComputedLabelWidth(state) {
     state.computedLabelWidth = width ? "".concat(width, "px") : '';
   };
 };
-export var addValidateEvents = function addValidateEvents(_ref13) {
-  var api = _ref13.api,
-    instance = _ref13.instance,
-    props = _ref13.props,
-    state = _ref13.state;
+export var addValidateEvents = function addValidateEvents(_ref14) {
+  var api = _ref14.api,
+    instance = _ref14.instance,
+    props = _ref14.props,
+    state = _ref14.state;
   return function () {
     var rules = api.getRules();
     if (rules.length || props.required !== undefined) {
@@ -331,9 +350,9 @@ export var removeValidateEvents = function removeValidateEvents(instance) {
     instance.$off();
   };
 };
-export var updateTip = function updateTip(_ref14) {
-  var refs = _ref14.refs,
-    state = _ref14.state;
+export var updateTip = function updateTip(_ref15) {
+  var refs = _ref15.refs,
+    state = _ref15.state;
   return function () {
     if (state.getValidateType !== 'tip' && !state.canShowTip) {
       return;
@@ -363,9 +382,9 @@ export var getValueByPath = function getValueByPath(object, prop) {
   }
   return result;
 };
-export var wrapValidate = function wrapValidate(_ref15) {
-  var validateFunc = _ref15.validateFunc,
-    props = _ref15.props;
+export var wrapValidate = function wrapValidate(_ref16) {
+  var validateFunc = _ref16.validateFunc,
+    props = _ref16.props;
   if (props.validateDebounce) {
     return debounce(50, validateFunc);
   } else {

package/form-item/vue.js

@@ -1,4 +1,4 @@
-import { validate, clearValidate, resetField, getRules, getFilteredRule, onFieldBlur, onFieldChange, updateComputedLabelWidth, addValidateEvents, removeValidateEvents, mounted, unmounted, watchError, watchValidateStatus, computedLabelStyle, computedContentStyle, computedForm, computedIsRequired, computedFieldValue, computedGetValidateType, updateTip, wrapValidate } from './index';
+import { validate, clearValidate, resetField, getRules, getFilteredRule, onFieldBlur, onFieldChange, updateComputedLabelWidth, addValidateEvents, removeValidateEvents, mounted, unmounted, watchError, watchValidateStatus, computedLabelStyle, computedValueStyle, computedContentStyle, computedForm, computedIsRequired, computedFieldValue, computedGetValidateType, updateTip, wrapValidate } from './index';
 export var api = ['state', 'validate', 'clearValidate', 'resetField', 'getRules', 'getFilteredRule', 'onFieldBlur', 'onFieldChange', 'updateComputedLabelWidth', 'addValidateEvents', 'removeValidateEvents', 'updateTip'];
 var initState = function initState(_ref) {
   var reactive = _ref.reactive,
@@ -27,6 +27,9 @@ var initState = function initState(_ref) {
     labelStyle: computed(function () {
       return api.computedLabelStyle();
     }),
+    valueStyle: computed(function () {
+      return api.computedValueStyle();
+    }),
     contentStyle: computed(function () {
       return api.computedContentStyle();
     }),
@@ -79,6 +82,10 @@ var initApi = function initApi(_ref2) {
       props: props,
       state: state
     }),
+    computedValueStyle: computedValueStyle({
+      props: props,
+      state: state
+    }),
     computedContentStyle: computedContentStyle({
       props: props,
       state: state