@opentiny/vue-renderless 3.5.0 → 3.6.0

package/pull-refresh/vue.js

@@ -1,64 +1,81 @@
-import { mountedHandler, beforeUnmountHandler, watchModelValue, onTouchstart, onTouchmove, onTouchend } from './index';
+import { mountedHandler, beforeUnmountHandler, handlerModelValue, onTouchstart, onTouchmove, onTouchend, initPullRefresh, clearPullRefresh } from './index';
 export var api = ['state'];
 export var renderless = function renderless(props, _ref, _ref2) {
-  var computed = _ref.computed,
+  var watch = _ref.watch,
     onMounted = _ref.onMounted,
     reactive = _ref.reactive,
-    watch = _ref.watch,
     onBeforeUnmount = _ref.onBeforeUnmount;
-  var refs = _ref2.refs,
-    emit = _ref2.emit;
+  var t = _ref2.t,
+    refs = _ref2.refs;
   var api = {};
   var state = reactive({
-    replaces: '',
-    styleObj: {},
+    pullUpReplaces: '',
+    pullDownReplaces: '',
+    refreshStyle: {},
     translate3d: 0,
     draggposition: 0,
-    value: props.modelValue,
-    checkStatus: false,
-    headHeight: props.headHeight,
-    pullingText: props.pullingText,
-    loosingText: props.loosingText,
-    successText: props.successText,
+    pullUpLoading: false,
+    pullDownLoading: false,
+    loosingText: '',
+    successText: '',
+    failedText: '',
+    noMoreText: '',
+    pullUp: null,
+    pullDown: null,
     successDuration: props.successDuration,
-    animationDuration: props.animationDuration,
-    disabled: computed(function () {
-      return props.disabled;
-    })
+    animationDuration: props.animationDuration
   });
   Object.assign(api, {
     state: state,
-    onTouchstart: onTouchstart({
-      state: state
-    }),
+    onTouchstart: onTouchstart(state),
     onTouchmove: onTouchmove({
-      refs: refs,
+      props: props,
       state: state
     }),
     onTouchend: onTouchend({
-      emit: emit,
+      api: api,
       props: props,
       state: state
     }),
     mountedHandler: mountedHandler({
       api: api,
-      refs: refs,
-      state: state
+      refs: refs
     }),
     beforeUnmountHandler: beforeUnmountHandler({
       api: api,
       refs: refs
-    })
+    }),
+    handlerModelValue: handlerModelValue({
+      api: api,
+      state: state
+    }),
+    initPullRefresh: initPullRefresh({
+      t: t,
+      props: props,
+      state: state
+    }),
+    clearPullRefresh: clearPullRefresh(state)
   });
   watch(function () {
-    return props.modelValue;
+    return props.hasMore;
   }, function (value) {
-    watchModelValue({
-      value: value,
+    if (!value) {
+      state.noMoreText = t('ui.pullRefresh.noMore');
+      api.clearPullRefresh();
+    }
+  });
+  onMounted(function () {
+    api.mountedHandler({
+      api: api,
+      refs: refs,
+      state: state
+    });
+    api.initPullRefresh({
+      t: t,
+      props: props,
       state: state
     });
   });
-  onMounted(api.mountedHandler);
   onBeforeUnmount(api.beforeUnmountHandler);
   return api;
 };

package/rate/index.js

@@ -191,7 +191,7 @@ export var computedDecimalStyle = function computedDecimalStyle(_ref10) {
   var clipPath = '';
   var fontSize = '';
   if (props.disabled) {
-    width = "".concat(props.modelValue * 100 - Math.floor(props.modelValue) * 100 < 50 ? 0 : 50, "%");
+    width = "".concat(props.modelValue * 100 - Math.floor(props.modelValue) * 100 < 50 ? 0 : 100, "%");
   } else if (props.allowHalf) {
     var reactSize = props.size ? Math.ceil(parseInt(props.size) / 2) + 'px' : '6px';
     clip = "rect(0px, ".concat(reactSize, ", ").concat(props.size || '14px', ", 0px)");

package/slider/index.js

@@ -221,7 +221,7 @@ var calcCurrentValue = function calcCurrentValue(_ref10) {
   } else {
     var step = props.step > 0 ? props.step : 1;
     var stepValue = (currentValue - props.min) % step;
-    if (stepValue) {
+    if (stepValue > props.step / 10) {
       currentValue -= stepValue;
       currentValue += stepValue * 2 > step ? Number(step) : 0;
     }

package/split/index.js

@@ -93,6 +93,7 @@ export var handleMousedown = function handleMousedown(_ref8) {
     props = _ref8.props,
     state = _ref8.state;
   return function (event) {
+    if (state.collapsed) return;
     state.initOffset = state.isHorizontal ? event.pageX : event.pageY;
     state.oldOffset = props.modelValue;
     state.isMoving = true;
@@ -119,4 +120,12 @@ export var computeOffset = function computeOffset(_ref9) {
       state.offset = props.modelValue * 10000 / 100;
     }
   };
+};
+export var handleCollapse = function handleCollapse(_ref10) {
+  var emit = _ref10.emit,
+    state = _ref10.state;
+  return function () {
+    state.collapsed = !state.collapsed;
+    emit('collapsedChange', state.collapsed);
+  };
 };

package/split/vue.js

@@ -1,9 +1,9 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-import { px2percent, getComputedThresholdValue, getleftTopMin, getrightBottomMin, getAnotherOffset, handleMove, handleUp, handleMousedown, computeOffset } from './index';
+import { px2percent, getComputedThresholdValue, getleftTopMin, getrightBottomMin, getAnotherOffset, handleMove, handleUp, handleMousedown, computeOffset, handleCollapse } from './index';
 import { on, off } from '@opentiny/vue-renderless/common/deps/dom';
-export var api = ['state', 'handleMousedown'];
+export var api = ['state', 'handleMousedown', 'handleCollapse'];
 export var useOffset = function useOffset(_ref) {
   var nextTick = _ref.nextTick,
     props = _ref.props,
@@ -89,7 +89,8 @@ export var renderless = function renderless(props, hooks, _ref2) {
     }),
     paneClasses: computed(function () {
       return ["".concat(state.prefix, "-pane"), _defineProperty({}, "".concat(state.prefix, "-pane-moving"), state.isMoving)];
-    })
+    }),
+    collapsed: false
   }, getUseOffset.state));
   Object.assign(api, _objectSpread(_objectSpread({
     state: state,
@@ -120,6 +121,10 @@ export var renderless = function renderless(props, hooks, _ref2) {
       props: props,
       state: state
     }),
+    handleCollapse: handleCollapse({
+      emit: emit,
+      state: state
+    }),
     getComputedThresholdValue: getComputedThresholdValue({
       api: api,
       props: props,

package/switch/index.js

@@ -9,9 +9,12 @@ export var toggle = function toggle(_ref) {
     if (state.disabled) {
       return false;
     }
-    state.currentValue = state.currentValue === props.trueValue ? props.falseValue : props.trueValue;
-    emit('update:modelValue', state.currentValue);
-    emit('change', state.currentValue);
+    var change = function change() {
+      state.currentValue = state.currentValue === props.trueValue ? props.falseValue : props.trueValue;
+      emit('update:modelValue', state.currentValue);
+      emit('change', state.currentValue);
+    };
+    props.beforeChange ? props.beforeChange(change) : change();
   };
 };
 export var computedWarpClasses = function computedWarpClasses(_ref2) {

package/switch/vue.js

@@ -54,7 +54,7 @@ export var renderless = function renderless(props, _ref, _ref2) {
   watch(function () {
     return props.modelValue;
   }, function (value) {
-    state.currentValue = value;
+    state.currentValue = typeof props.falseValue !== 'boolean' || typeof props.trueValue !== 'boolean' ? value : Boolean(value);
   }, {
     immediate: true
   });

package/tab-nav/index.js

@@ -6,8 +6,7 @@ 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")
+      transform: "translate".concat(dir, "(").concat(state.lineOffset, "px) translate").concat(dir, "(-50%)")
     };
   } else {
     return {
@@ -56,7 +55,6 @@ export var updated = function updated(_ref2) {
         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;
         }
       });
@@ -238,4 +236,29 @@ export var moreTabShow = function moreTabShow(state) {
       state.showMoreItem = 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();
+    }
+  };
+};
+export var expandTabHide = function expandTabHide(state) {
+  return function () {
+    return state.showExpandItem = false;
+  };
+};
+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,5 +1,5 @@
-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'];
+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,
@@ -19,14 +19,16 @@ export var renderless = function renderless(props, _ref, _ref2) {
   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'),
+    showExpandItem: false,
+    showExpandTabs: props.showExpandTabs,
+    expandHeaderStyle: {},
+    mode: props._mode || parent.$mode || (tinyMode ? tinyMode : 'pc'),
     rootTabs: inject('rootTabs'),
     sizeName: computed(function () {
       return api.computedSizeName(state);
@@ -40,6 +42,11 @@ export var renderless = function renderless(props, _ref, _ref2) {
     setFocus: setFocus(state),
     removeFocus: removeFocus(state),
     moreTabShow: moreTabShow(state),
+    expandTabShow: expandTabShow({
+      api: api,
+      state: state
+    }),
+    expandTabHide: expandTabHide(state),
     scrollPrev: scrollPrev({
       refs: refs,
       state: state
@@ -62,6 +69,10 @@ export var renderless = function renderless(props, _ref, _ref2) {
       parent: parent,
       refs: refs,
       state: state
+    }),
+    computedHeaderStyle: computedHeaderStyle({
+      refs: refs,
+      state: state
     })
   });
   Object.assign(api, {

package/tabs/index.js

@@ -52,7 +52,7 @@ export var calcMorePanes = function calcMorePanes(_ref3) {
     var el = parent.$el;
     var tabs = el.querySelectorAll('.tiny-tabs__item');
     if (tabs && tabs.length) {
-      var tabsHeaderWidth = el.querySelector('.tiny-tabs__nav-scroll').clientWidth - 76;
+      var tabsHeaderWidth = el.querySelector('.tiny-tabs__nav-scroll').clientWidth + 15;
       var tabsAllWidth = 0;
       for (var i = 0, length = tabs.length; i < length; i++) {
         var width = tabs[i].offsetWidth;
@@ -65,15 +65,35 @@ export var calcMorePanes = function calcMorePanes(_ref3) {
     }
   };
 };
-export var handleTabClick = function handleTabClick(_ref4) {
-  var api = _ref4.api,
-    emit = _ref4.emit;
+export var calcExpandPanes = function calcExpandPanes(_ref4) {
+  var parent = _ref4.parent,
+    props = _ref4.props,
+    state = _ref4.state;
+  return function () {
+    if (!props.showExpandTabs) {
+      return;
+    }
+    var el = parent.$el;
+    var tabsHeader = el.querySelector('.tiny-mobile-tabs__header');
+    if (tabsHeader) {
+      state.expandPanesWidth = tabsHeader.clientWidth;
+    }
+  };
+};
+export var handleTabClick = function handleTabClick(_ref5) {
+  var api = _ref5.api,
+    emit = _ref5.emit,
+    props = _ref5.props,
+    refs = _ref5.refs;
   return function (pane, tabName, event) {
     if (pane.disabled) {
       return;
     }
     api.setCurrentName(tabName);
     emit('click', pane, event);
+    if (props.showExpandTabs) {
+      refs.nav && refs.nav.expandTabHide();
+    }
   };
 };
 export var handleTabRemove = function handleTabRemove(emit) {
@@ -92,11 +112,11 @@ export var handleTabAdd = function handleTabAdd(emit) {
     emit('add');
   };
 };
-export var setCurrentName = function setCurrentName(_ref5) {
-  var api = _ref5.api,
-    props = _ref5.props,
-    refs = _ref5.refs,
-    state = _ref5.state;
+export var setCurrentName = function setCurrentName(_ref6) {
+  var api = _ref6.api,
+    props = _ref6.props,
+    refs = _ref6.refs,
+    state = _ref6.state;
   return function (value) {
     api.changeDirection(state.currentName);
     if (state.currentName !== value && props.beforeLeave) {
@@ -114,18 +134,18 @@ export var setCurrentName = function setCurrentName(_ref5) {
     }
   };
 };
-export var changeCurrentName = function changeCurrentName(_ref6) {
-  var emit = _ref6.emit,
-    state = _ref6.state;
+export var changeCurrentName = function changeCurrentName(_ref7) {
+  var emit = _ref7.emit,
+    state = _ref7.state;
   return function (value) {
     state.currentName = value;
     emit('update:modelValue', value);
   };
 };
-export var created = function created(_ref7) {
-  var api = _ref7.api,
-    parent = _ref7.parent,
-    state = _ref7.state;
+export var created = function created(_ref8) {
+  var api = _ref8.api,
+    parent = _ref8.parent,
+    state = _ref8.state;
   return function () {
     if (!state.currentName) {
       state.currentIndex = 0;
@@ -135,9 +155,9 @@ export var created = function created(_ref7) {
     parent.$on('tab-nav-update', api.calcPaneInstances.bind(null, true));
   };
 };
-export var changeDirection = function changeDirection(_ref8) {
-  var props = _ref8.props,
-    state = _ref8.state;
+export var changeDirection = function changeDirection(_ref9) {
+  var props = _ref9.props,
+    state = _ref9.state;
   return function (currentName) {
     state.panes.forEach(function (item, index) {
       if (item.state.paneName === currentName && state.currentIndex !== index) {
@@ -149,21 +169,21 @@ export var changeDirection = function changeDirection(_ref8) {
     });
   };
 };
-export var handleTabDragStart = function handleTabDragStart(_ref9) {
-  var emit = _ref9.emit;
+export var handleTabDragStart = function handleTabDragStart(_ref10) {
+  var emit = _ref10.emit;
   return function (event) {
     emit('tab-drag-start', event);
   };
 };
-export var handleTabDragOver = function handleTabDragOver(_ref10) {
-  var emit = _ref10.emit;
+export var handleTabDragOver = function handleTabDragOver(_ref11) {
+  var emit = _ref11.emit;
   return function (event) {
     emit('tab-drag-over', event);
   };
 };
-export var handleTabDragEnd = function handleTabDragEnd(_ref11) {
-  var state = _ref11.state,
-    emit = _ref11.emit;
+export var handleTabDragEnd = function handleTabDragEnd(_ref12) {
+  var state = _ref12.state,
+    emit = _ref12.emit;
   return function (event) {
     var oldDraggableIndex = event.oldDraggableIndex,
       newDraggableIndex = event.newDraggableIndex;

package/tabs/vue.js

@@ -1,4 +1,4 @@
-import { calcMorePanes, calcPaneInstances, handleTabClick, handleTabAdd, handleTabRemove, setCurrentName, changeCurrentName, created, changeDirection, handleTabDragStart, handleTabDragOver, handleTabDragEnd } from './index';
+import { calcMorePanes, calcExpandPanes, calcPaneInstances, handleTabClick, handleTabAdd, handleTabRemove, setCurrentName, changeCurrentName, created, changeDirection, handleTabDragStart, handleTabDragOver, handleTabDragEnd } from './index';
 export var api = ['state', 'handleTabAdd', 'calcPaneInstances', 'handleTabRemove', 'handleTabClick', 'handleTabDragStart', 'handleTabDragOver', 'handleTabDragEnd', 'setCurrentName', 'getNavRefs'];
 var initState = function initState(_ref) {
   var reactive = _ref.reactive,
@@ -14,7 +14,8 @@ var initState = function initState(_ref) {
     deltaY: 0,
     offsetX: 0,
     offsetY: 0,
-    direction: ''
+    direction: '',
+    expandPanesWidth: ''
   });
 };
 var initWatcher = function initWatcher(_ref2) {
@@ -84,6 +85,11 @@ export var renderless = function renderless(props, _ref3, _ref4) {
       props: props,
       state: state
     }),
+    calcExpandPanes: calcExpandPanes({
+      parent: parent,
+      props: props,
+      state: state
+    }),
     calcPaneInstances: calcPaneInstances({
       constants: constants,
       parent: parent,
@@ -102,7 +108,9 @@ export var renderless = function renderless(props, _ref3, _ref4) {
     }),
     handleTabClick: handleTabClick({
       api: api,
-      emit: emit
+      emit: emit,
+      props: props,
+      refs: refs
     }),
     setCurrentName: setCurrentName({
       api: api,
@@ -132,10 +140,12 @@ export var renderless = function renderless(props, _ref3, _ref4) {
   onMounted(function () {
     api.calcPaneInstances();
     api.calcMorePanes();
+    api.calcExpandPanes();
   });
   onUpdated(function () {
     api.calcPaneInstances();
     api.calcMorePanes();
+    api.calcExpandPanes();
   });
   return api;
 };

package/tag/index.js

@@ -1,12 +1,17 @@
-export var handleClose = function handleClose(emit) {
+export var handleClose = function handleClose(_ref) {
+  var emit = _ref.emit,
+    props = _ref.props;
   return function (event) {
     event.stopPropagation();
-    emit('close', event);
+    var close = function close() {
+      return emit('close', event);
+    };
+    props.beforeDelete ? props.beforeDelete(close) : close();
   };
 };
-export var handleClick = function handleClick(_ref) {
-  var emit = _ref.emit,
-    parent = _ref.parent;
+export var handleClick = function handleClick(_ref2) {
+  var emit = _ref2.emit,
+    parent = _ref2.parent;
   return function (event) {
     parent.$parent && parent.$parent.tagSelectable && event.stopPropagation();
     emit('click', event);

package/tag/vue.js

@@ -4,7 +4,10 @@ export var renderless = function renderless(props, hooks, _ref) {
   var emit = _ref.emit,
     parent = _ref.parent;
   return {
-    handleClose: handleClose(emit),
+    handleClose: handleClose({
+      emit: emit,
+      props: props
+    }),
     handleClick: handleClick({
       emit: emit,
       parent: parent

package/transfer/index.js

@@ -105,22 +105,25 @@ export var addToLeft = function addToLeft(_ref5) {
     props = _ref5.props,
     state = _ref5.state;
   return function (value) {
-    state.isToLeft = true;
-    var currentValue = props.modelValue.slice();
-    if (value === 'all') {
-      state.rightChecked = state.rightData.map(function (item) {
-        return item[props.props.key];
-      });
-    }
-    state.rightChecked.forEach(function (item) {
-      var index = currentValue.indexOf(item);
-      if (index > -1) {
-        currentValue.splice(index, 1);
+    var change = function change() {
+      state.isToLeft = true;
+      var currentValue = props.modelValue.slice();
+      if (value === 'all') {
+        state.rightChecked = state.rightData.map(function (item) {
+          return item[props.props.key];
+        });
       }
-    });
-    state.rightChecked = state.rightChecked.slice(0);
-    emit('update:modelValue', currentValue);
-    emit('change', currentValue, 'left', state.rightChecked);
+      state.rightChecked.forEach(function (item) {
+        var index = currentValue.indexOf(item);
+        if (index > -1) {
+          currentValue.splice(index, 1);
+        }
+      });
+      state.rightChecked = state.rightChecked.slice(0);
+      emit('update:modelValue', currentValue);
+      emit('change', currentValue, 'left', state.rightChecked);
+    };
+    props.beforeTransfer ? props.beforeTransfer(change) : change();
   };
 };
 export var addToRight = function addToRight(_ref6) {
@@ -130,40 +133,43 @@ export var addToRight = function addToRight(_ref6) {
     state = _ref6.state,
     Tree = _ref6.Tree;
   return function (value) {
-    state.isToLeft = false;
-    var currentValue = props.modelValue.slice();
-    var itemsToBeMoved = [];
-    var key = props.props.key;
-    if (props.render && props.render.plugin.name === Tree) {
-      if (!props.treeOp.checkStrictly) {
-        currentValue = refs.leftPanel.$refs.plugin.getCheckedKeys();
-      } else {
-        state.leftChecked.forEach(function (item) {
-          return currentValue.indexOf(item) === -1 && currentValue.push(item);
-        });
-      }
-    } else {
-      if (value === 'all') {
-        state.leftData.forEach(function (item) {
-          var itemKey = item[key];
-          if (props.modelValue.indexOf(itemKey) === -1) {
-            itemsToBeMoved.push(itemKey);
-          }
-        });
-        state.leftChecked = itemsToBeMoved.slice();
+    var change = function change() {
+      state.isToLeft = false;
+      var currentValue = props.modelValue.slice();
+      var itemsToBeMoved = [];
+      var key = props.props.key;
+      if (props.render && props.render.plugin.name === Tree) {
+        if (!props.treeOp.checkStrictly) {
+          currentValue = refs.leftPanel.$refs.plugin.getCheckedKeys();
+        } else {
+          state.leftChecked.forEach(function (item) {
+            return currentValue.indexOf(item) === -1 && currentValue.push(item);
+          });
+        }
       } else {
-        props.data.forEach(function (item) {
-          var itemKey = item[key];
-          if (state.leftChecked.indexOf(itemKey) > -1 && props.modelValue.indexOf(itemKey) === -1) {
-            itemsToBeMoved.push(itemKey);
-          }
-        });
+        if (value === 'all') {
+          state.leftData.forEach(function (item) {
+            var itemKey = item[key];
+            if (props.modelValue.indexOf(itemKey) === -1) {
+              itemsToBeMoved.push(itemKey);
+            }
+          });
+          state.leftChecked = itemsToBeMoved.slice();
+        } else {
+          props.data.forEach(function (item) {
+            var itemKey = item[key];
+            if (state.leftChecked.indexOf(itemKey) > -1 && props.modelValue.indexOf(itemKey) === -1) {
+              itemsToBeMoved.push(itemKey);
+            }
+          });
+        }
+        currentValue = props.targetOrder === 'unshift' ? itemsToBeMoved.concat(currentValue) : currentValue.concat(itemsToBeMoved);
       }
-      currentValue = props.targetOrder === 'unshift' ? itemsToBeMoved.concat(currentValue) : currentValue.concat(itemsToBeMoved);
-    }
-    state.rightDisabled = false;
-    emit('update:modelValue', currentValue);
-    emit('change', currentValue, 'right', state.leftChecked);
+      state.rightDisabled = false;
+      emit('update:modelValue', currentValue);
+      emit('change', currentValue, 'right', state.leftChecked);
+    };
+    props.beforeTransfer ? props.beforeTransfer(change) : change();
   };
 };
 export var clearQuery = function clearQuery(refs) {