@varlet/ui 2.8.6-alpha.1677756540023 → 2.8.6-alpha.1678026101378

package/es/app-bar/AppBar.mjs

@@ -1,6 +1,7 @@
-import { defineComponent, ref, onMounted, onUpdated, computed } from 'vue';
+import { defineComponent, ref, onUpdated, computed } from 'vue';
 import { props } from './props.mjs';
 import { createNamespace } from '../utils/components.mjs';
+import { useMounted } from '@varlet/use';
 var {
   n,
   classes
@@ -93,7 +94,7 @@ var __sfc__ = defineComponent({
         color: textColor
       };
     });
-    onMounted(computePadding);
+    useMounted(computePadding);
     onUpdated(computePadding);
     return {
       n,

package/es/avatar/Avatar.mjs

@@ -1,8 +1,9 @@
 import Lazy from '../lazy/index.mjs';
-import { defineComponent, ref, onMounted, onUpdated } from 'vue';
+import { defineComponent, ref, onUpdated } from 'vue';
 import { props, internalSizeValidator, sizeValidator } from './props.mjs';
 import { toSizeUnit } from '../utils/elements.mjs';
 import { createNamespace, call } from '../utils/components.mjs';
+import { useMounted } from '@varlet/use';
 var {
   n,
   classes
@@ -128,7 +129,7 @@ var __sfc__ = defineComponent({
       call(props.onClick, e);
     };
 
-    onMounted(getScale);
+    useMounted(getScale);
     onUpdated(getScale);
     return {
       internalSizeValidator,

package/es/back-top/BackTop.mjs

@@ -1,6 +1,6 @@
-import { defineComponent, ref, onMounted, onBeforeUnmount } from 'vue';
 import VarButton from '../button/index.mjs';
 import VarIcon from '../icon/index.mjs';
+import { defineComponent, ref, onBeforeUnmount, onDeactivated, onMounted, onActivated } from 'vue';
 import { props } from './props.mjs';
 import { throttle } from '@varlet/shared';
 import { easeInOutCubic } from '../utils/shared.mjs';
@@ -29,7 +29,7 @@ function __render__(_ctx, _cache) {
     }
   }, _ctx.$attrs, {
     onClick: _cache[0] || (_cache[0] = _withModifiers(function () {
-      return _ctx.click && _ctx.click(...arguments);
+      return _ctx.handleClick && _ctx.handleClick(...arguments);
     }, ["stop"]))
   }), [_renderSlot(_ctx.$slots, "default", {}, () => [_createVNode(_component_var_button, {
     type: "primary",
@@ -62,31 +62,42 @@ var __sfc__ = defineComponent({
     var show = ref(false);
     var backTopEl = ref(null);
     var disabled = ref(true);
-    var target;
+    var scroller;
 
-    var click = event => {
+    var handleClick = event => {
       call(props.onClick, event);
-      var left = getScrollLeft(target);
-      scrollTo(target, {
+      var left = getScrollLeft(scroller);
+      scrollTo(scroller, {
         left,
         duration: props.duration,
         animation: easeInOutCubic
       });
     };
 
-    var scroll = () => {
-      show.value = getScrollTop(target) >= toPxNum(props.visibilityHeight);
+    var handleScroll = throttle(() => {
+      show.value = getScrollTop(scroller) >= toPxNum(props.visibilityHeight);
+    }, 200);
+
+    var setScroller = () => {
+      scroller = props.target ? getTarget(props.target, 'BackTop') : getParentScroller(backTopEl.value);
+    };
+
+    var addScrollerEventListener = () => {
+      scroller.addEventListener('scroll', handleScroll);
+    };
+
+    var removeScrollerEventListener = () => {
+      scroller.removeEventListener('scroll', handleScroll);
     };
 
-    var throttleScroll = throttle(scroll, 200);
     onMounted(() => {
-      target = props.target ? getTarget(props.target, 'BackTop') : getParentScroller(backTopEl.value);
-      target.addEventListener('scroll', throttleScroll);
+      setScroller();
+      addScrollerEventListener();
       disabled.value = false;
     });
-    onBeforeUnmount(() => {
-      target.removeEventListener('scroll', throttleScroll);
-    });
+    onActivated(addScrollerEventListener);
+    onBeforeUnmount(removeScrollerEventListener);
+    onDeactivated(removeScrollerEventListener);
     return {
       disabled,
       show,
@@ -94,7 +105,7 @@ var __sfc__ = defineComponent({
       toSizeUnit,
       n,
       classes,
-      click
+      handleClick
     };
   }
 

package/es/bottom-navigation/BottomNavigation.mjs

@@ -1,11 +1,12 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 import VarButton from '../button/index.mjs';
-import { defineComponent, ref, computed, onMounted, onUpdated, watch } from 'vue';
+import { defineComponent, ref, computed, onUpdated, watch } from 'vue';
 import { props } from './props.mjs';
 import { useBottomNavigationItems } from './provide.mjs';
 import { createNamespace, call } from '../utils/components.mjs';
 import { isNumber, isArray } from '@varlet/shared';
+import { useMounted } from '@varlet/use';
 var {
   n,
   classes
@@ -186,7 +187,7 @@ var __sfc__ = defineComponent({
       immediate: true,
       deep: true
     });
-    onMounted(() => {
+    useMounted(() => {
       if (!slots.fab) {
         return;
       }

package/es/countdown/Countdown.mjs

@@ -1,4 +1,4 @@
-import { defineComponent, ref, watch } from 'vue';
+import { defineComponent, onActivated, onDeactivated, onUnmounted, ref, watch } from 'vue';
 import { props } from './props.mjs';
 import { requestAnimationFrame, cancelAnimationFrame } from '../utils/elements.mjs';
 import { call, createNamespace } from '../utils/components.mjs';
@@ -93,9 +93,17 @@ var __sfc__ = defineComponent({
         autoStart
       } = props;
       var now = performance.now();
-      if (!endTime.value) endTime.value = now + toNumber(time);
+
+      if (!endTime.value) {
+        endTime.value = now + toNumber(time);
+      }
+
       var durationTime = endTime.value - now;
-      if (durationTime < 0) durationTime = 0;
+
+      if (durationTime < 0) {
+        durationTime = 0;
+      }
+
       pauseTime.value = durationTime;
       formatTime(durationTime);
 
@@ -104,20 +112,26 @@ var __sfc__ = defineComponent({
         return;
       }
 
-      if (autoStart || isStart.value) handle.value = requestAnimationFrame(countdown);
+      if (autoStart || isStart.value) {
+        handle.value = requestAnimationFrame(countdown);
+      }
     }; // expose
 
 
     var start = () => {
-      if (isStart.value) return;
+      if (isStart.value) {
+        return;
+      }
+
       isStart.value = true;
-      endTime.value = Date.now() + (pauseTime.value || toNumber(props.time));
+      endTime.value = performance.now() + (pauseTime.value || toNumber(props.time));
       countdown();
     }; // expose
 
 
     var pause = () => {
       isStart.value = false;
+      cancelAnimationFrame(handle.value);
     }; // expose
 
 
@@ -128,9 +142,12 @@ var __sfc__ = defineComponent({
       countdown();
     };
 
-    watch(() => props.time, () => reset(), {
+    watch(() => props.time, reset, {
       immediate: true
     });
+    onActivated(start);
+    onDeactivated(pause);
+    onUnmounted(pause);
     return {
       showTime,
       timeData,

package/es/date-picker/src/day-picker-panel.mjs

@@ -5,11 +5,12 @@ import isSameOrBefore from 'dayjs/esm/plugin/isSameOrBefore';
 import isSameOrAfter from 'dayjs/esm/plugin/isSameOrAfter';
 import PanelHeader from './panel-header.mjs';
 import VarButton from '../../button/index.mjs';
-import { defineComponent, ref, computed, watch, onMounted, reactive } from 'vue';
+import { defineComponent, ref, computed, watch, reactive } from 'vue';
 import { WEEK_HEADER } from '../props.mjs';
 import { toNumber } from '@varlet/shared';
 import { createNamespace } from '../../utils/components.mjs';
 import { pack } from '../../locale/index.mjs';
+import { useMounted } from '@varlet/use';
 dayjs.extend(isSameOrBefore);
 dayjs.extend(isSameOrAfter);
 var {
@@ -327,7 +328,7 @@ var __sfc__ = defineComponent({
       headerEl.value.checkDate(checkType);
     };
 
-    onMounted(() => {
+    useMounted(() => {
       initDate();
       initHeader();
     });

package/es/date-picker/src/year-picker-panel.mjs

@@ -1,7 +1,8 @@
-import { defineComponent, computed, onMounted } from 'vue';
 import dayjs from 'dayjs/esm';
+import { defineComponent, computed } from 'vue';
 import { toNumber } from '@varlet/shared';
 import { createNamespace } from '../../utils/components.mjs';
+import { useMounted } from '@varlet/use';
 var {
   n,
   classes
@@ -89,7 +90,7 @@ var __sfc__ = defineComponent({
       emit('choose-year', year);
     };
 
-    onMounted(() => {
+    useMounted(() => {
       var activeEl = document.querySelector("." + n('item--active'));
       activeEl == null ? void 0 : activeEl.scrollIntoView({
         block: 'center'

package/es/divider/Divider.mjs

@@ -1,10 +1,11 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-import { defineComponent, computed, reactive, onMounted, onUpdated, toRefs } from 'vue';
+import { defineComponent, computed, reactive, onUpdated, toRefs } from 'vue';
 import { toSizeUnit } from '../utils/elements.mjs';
 import { isBoolean, toNumber } from '@varlet/shared';
 import { props } from './props.mjs';
 import { createNamespace } from '../utils/components.mjs';
+import { useMounted } from '@varlet/use';
 var {
   n,
   classes
@@ -36,7 +37,9 @@ var __sfc__ = defineComponent({
     var state = reactive({
       withText: false
     });
-    var isInset = computed(() => isBoolean(props.inset) ? props.inset : true);
+    var isInset = computed(() => {
+      return isBoolean(props.inset) ? props.inset : true;
+    });
     var style = computed(() => {
       var {
         inset,
@@ -46,10 +49,12 @@ var __sfc__ = defineComponent({
       var baseStyle = {
         margin
       };
-      if (isBoolean(inset) || inset === 0) return _extends({}, baseStyle); // -18px -> -18
 
-      var _inset = toNumber(inset); // -18px -> 18px
+      if (isBoolean(inset) || inset === 0) {
+        return _extends({}, baseStyle);
+      }
 
+      var _inset = toNumber(inset);
 
       var absInsetWithUnit = Math.abs(_inset) + (inset + '').replace(_inset + '', '');
       return vertical ? _extends({}, baseStyle, {
@@ -64,7 +69,7 @@ var __sfc__ = defineComponent({
       state.withText = Boolean(slots.default) || Boolean(props.description);
     };
 
-    onMounted(() => {
+    useMounted(() => {
       checkHasText();
     });
     onUpdated(() => {

package/es/index-bar/IndexBar.mjs

@@ -2,13 +2,14 @@ function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try
 
 function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
 
-import { computed, defineComponent, ref, watch, onMounted, onBeforeUnmount } from 'vue';
+import { computed, defineComponent, ref, watch, onBeforeUnmount, onDeactivated } from 'vue';
 import { isPlainObject, toNumber } from '@varlet/shared';
 import { easeInOutCubic } from '../utils/shared.mjs';
 import { doubleRaf, getParentScroller, getScrollLeft, getScrollTop, nextTickFrame, requestAnimationFrame, scrollTo as varScrollTo, toPxNum } from '../utils/elements.mjs';
 import { useIndexAnchors } from './provide.mjs';
 import { props } from './props.mjs';
 import { createNamespace, call } from '../utils/components.mjs';
+import { useMounted } from '@varlet/use';
 var {
   n,
   classes
@@ -63,7 +64,6 @@ var __sfc__ = defineComponent({
       bindIndexAnchors
     } = useIndexAnchors();
     var clickedName = ref('');
-    var scroller = ref(null);
     var barEl = ref(null);
     var anchorNameList = ref([]);
     var active = ref();
@@ -71,6 +71,7 @@ var __sfc__ = defineComponent({
     var cssMode = computed(() => props.cssMode);
     var stickyOffsetTop = computed(() => toPxNum(props.stickyOffsetTop));
     var zIndex = computed(() => props.zIndex);
+    var scroller = null;
     var indexBarProvider = {
       active,
       sticky,
@@ -91,13 +92,16 @@ var __sfc__ = defineComponent({
     };
 
     var getOffsetTop = () => {
-      if (!('getBoundingClientRect' in scroller.value)) return 0;
+      if (!('getBoundingClientRect' in scroller)) {
+        return 0;
+      }
+
       var {
         top: parentTop
-      } = scroller.value.getBoundingClientRect();
+      } = scroller.getBoundingClientRect();
       var {
         scrollTop
-      } = scroller.value;
+      } = scroller;
       var {
         top: targetTop
       } = barEl.value.getBoundingClientRect();
@@ -105,8 +109,8 @@ var __sfc__ = defineComponent({
     };
 
     var handleScroll = () => {
-      var scrollTop = getScrollTop(scroller.value);
-      var scrollHeight = scroller.value === window ? document.body.scrollHeight : scroller.value.scrollHeight;
+      var scrollTop = getScrollTop(scroller);
+      var scrollHeight = scroller === window ? document.body.scrollHeight : scroller.scrollHeight;
       var offsetTop = getOffsetTop();
       indexAnchors.forEach((anchor, index) => {
         var anchorTop = anchor.ownTop.value;
@@ -131,21 +135,32 @@ var __sfc__ = defineComponent({
           manualCall = false,
           options
         } = _ref;
-        if (manualCall) call(props.onClick, anchorName);
-        if (anchorName === active.value) return;
+
+        if (manualCall) {
+          call(props.onClick, anchorName);
+        }
+
+        if (anchorName === active.value) {
+          return;
+        }
+
         var indexAnchor = indexAnchors.find(_ref3 => {
           var {
             name
           } = _ref3;
           return anchorName === name.value;
         });
-        if (!indexAnchor) return;
+
+        if (!indexAnchor) {
+          return;
+        }
+
         var offsetTop = getOffsetTop();
         var top = indexAnchor.ownTop.value - stickyOffsetTop.value + offsetTop;
-        var left = getScrollLeft(scroller.value);
+        var left = getScrollLeft(scroller);
         clickedName.value = anchorName;
         emitEvent(anchorName, options);
-        yield varScrollTo(scroller.value, {
+        yield varScrollTo(scroller, {
           left,
           top,
           animation: easeInOutCubic,
@@ -159,7 +174,26 @@ var __sfc__ = defineComponent({
       return function anchorClick(_x) {
         return _ref2.apply(this, arguments);
       };
-    }(); // expose
+    }();
+
+    var setScroller = /*#__PURE__*/function () {
+      var _ref4 = _asyncToGenerator(function* () {
+        yield doubleRaf();
+        scroller = getParentScroller(barEl.value);
+      });
+
+      return function setScroller() {
+        return _ref4.apply(this, arguments);
+      };
+    }();
+
+    var addScrollerListener = () => {
+      scroller.addEventListener('scroll', handleScroll);
+    };
+
+    var removeScrollerListener = () => {
+      scroller.removeEventListener('scroll', handleScroll);
+    }; // expose
 
 
     var scrollTo = (index, options) => {
@@ -171,23 +205,21 @@ var __sfc__ = defineComponent({
 
     watch(() => length.value, /*#__PURE__*/_asyncToGenerator(function* () {
       yield doubleRaf();
-      indexAnchors.forEach(_ref5 => {
+      indexAnchors.forEach(_ref6 => {
         var {
           name,
           setOwnTop
-        } = _ref5;
+        } = _ref6;
         if (name.value) anchorNameList.value.push(name.value);
         setOwnTop();
       });
     }));
-    onMounted( /*#__PURE__*/_asyncToGenerator(function* () {
-      yield doubleRaf();
-      scroller.value = getParentScroller(barEl.value);
-      scroller.value.addEventListener('scroll', handleScroll);
+    useMounted( /*#__PURE__*/_asyncToGenerator(function* () {
+      yield setScroller();
+      addScrollerListener();
     }));
-    onBeforeUnmount(() => {
-      call(scroller.value.removeEventListener, 'scroll', handleScroll);
-    });
+    onBeforeUnmount(removeScrollerListener);
+    onDeactivated(removeScrollerListener);
     return {
       n,
       classes,

package/es/index.bundle.mjs

@@ -235,7 +235,7 @@ import './time-picker/style/index.mjs'
 import './tooltip/style/index.mjs'
 import './uploader/style/index.mjs'
 
-const version = '2.8.6-alpha.1677756540023'
+const version = '2.8.6-alpha.1678026101378'
 
 function install(app) {
   ActionSheet.install && app.use(ActionSheet)

package/es/index.mjs

@@ -156,7 +156,7 @@ export * from './time-picker/index.mjs'
 export * from './tooltip/index.mjs'
 export * from './uploader/index.mjs'
 
-const version = '2.8.6-alpha.1677756540023'
+const version = '2.8.6-alpha.1678026101378'
 
 function install(app) {
   ActionSheet.install && app.use(ActionSheet)

package/es/input/Input.mjs

@@ -1,10 +1,11 @@
 import VarFormDetails from '../form-details/index.mjs';
 import VarIcon from '../icon/index.mjs';
-import { defineComponent, getCurrentInstance, ref, computed, nextTick, onMounted } from 'vue';
+import { defineComponent, getCurrentInstance, ref, computed, nextTick } from 'vue';
 import { props } from './props.mjs';
 import { isEmpty, toNumber } from '@varlet/shared';
 import { useValidation, createNamespace, call } from '../utils/components.mjs';
 import { useForm } from '../form/provide.mjs';
+import { useMounted } from '@varlet/use';
 var {
   n,
   classes
@@ -287,7 +288,6 @@ var __sfc__ = defineComponent({
       var {
         composing
       } = e.target;
-      console.log(composing);
 
       if (composing) {
         return;
@@ -397,7 +397,7 @@ var __sfc__ = defineComponent({
       resetValidation
     };
     call(bindForm, inputProvider);
-    onMounted(() => {
+    useMounted(() => {
       if (props.autofocus) {
         focus();
       }

package/es/list/List.mjs

@@ -4,13 +4,14 @@ function _asyncToGenerator(fn) { return function () { var self = this, args = ar
 
 import VarLoading from '../loading/index.mjs';
 import Ripple from '../ripple/index.mjs';
-import { defineComponent, onMounted, onUnmounted, ref, nextTick } from 'vue';
+import { defineComponent, onUnmounted, ref, nextTick } from 'vue';
 import { getParentScroller, toPxNum } from '../utils/elements.mjs';
 import { props } from './props.mjs';
 import { isNumber } from '@varlet/shared';
 import { dt } from '../utils/shared.mjs';
 import { createNamespace, call } from '../utils/components.mjs';
 import { pack } from '../locale/index.mjs';
+import { useMounted } from '@varlet/use';
 var {
   n,
   classes
@@ -116,7 +117,7 @@ var __sfc__ = defineComponent({
       };
     }();
 
-    onMounted(() => {
+    useMounted(() => {
       scroller = getParentScroller(listEl.value);
       props.immediateCheck && check();
       scroller.addEventListener('scroll', check);

package/es/menu/usePopover.mjs

@@ -6,6 +6,7 @@ function _asyncToGenerator(fn) { return function () { var self = this, args = ar
 
 import flip from '@popperjs/core/lib/modifiers/flip';
 import offset from '@popperjs/core/lib/modifiers/offset';
+import { useClickOutside } from '@varlet/use';
 import { doubleRaf, toPxNum } from '../utils/elements.mjs';
 import { call } from '../utils/components.mjs';
 import { onMounted, onUnmounted, ref, watch } from 'vue';
@@ -23,7 +24,6 @@ export function usePopover(options) {
     zIndex
   } = useZIndex(() => show.value, 1);
   var popoverInstance = null;
-  var clickSelf = false;
   var enterPopover = false;
   var enterHost = false;
 
@@ -99,17 +99,19 @@ export function usePopover(options) {
 
   var handleHostClick = () => {
     open();
-    clickSelf = true;
   };
 
   var handlePopoverClose = () => {
-    if (clickSelf) {
-      clickSelf = false;
+    show.value = false;
+    call(options['onUpdate:show'], false);
+  };
+
+  var handleClickOutside = () => {
+    if (options.trigger !== 'click') {
       return;
     }
 
-    show.value = false;
-    call(options['onUpdate:show'], false);
+    handlePopoverClose();
   };
 
   var getPosition = () => {
@@ -258,6 +260,7 @@ export function usePopover(options) {
     call(options['onUpdate:show'], false);
   };
 
+  useClickOutside(host, 'click', handleClickOutside);
   watch(() => options.show, newValue => {
     show.value = newValue != null ? newValue : false;
   }, {
@@ -274,23 +277,11 @@ export function usePopover(options) {
       call(options.onClose);
     }
   });
-  watch(() => options.trigger, newValue => {
-    if (newValue === 'click') {
-      document.addEventListener('click', handlePopoverClose);
-    } else {
-      document.removeEventListener('click', handlePopoverClose);
-    }
-  });
   watch(() => options.disabled, close);
   onMounted(() => {
     popoverInstance = createPopper(host.value, popover.value, getPopperOptions());
-
-    if (options.trigger === 'click') {
-      document.addEventListener('click', handlePopoverClose);
-    }
   });
   onUnmounted(() => {
-    document.removeEventListener('click', handlePopoverClose);
     popoverInstance.destroy();
   });
   return {

package/es/pull-refresh/PullRefresh.mjs

@@ -3,11 +3,12 @@ function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try
 function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
 
 import VarIcon from '../icon/index.mjs';
-import { defineComponent, ref, computed, watch, onMounted, onBeforeUnmount } from 'vue';
+import { defineComponent, ref, computed, watch } from 'vue';
 import { getParentScroller, getScrollTop, getTarget } from '../utils/elements.mjs';
 import { props } from './props.mjs';
 import { toNumber } from '@varlet/shared';
 import { call, createNamespace } from '../utils/components.mjs';
+import { useEventListener, useMounted } from '@varlet/use';
 var {
   n,
   classes
@@ -168,6 +169,10 @@ var __sfc__ = defineComponent({
       controlPosition.value = -(width + width * 0.25);
     };
 
+    var setScroller = () => {
+      scroller = props.target ? getTarget(props.target, 'PullRefresh') : getParentScroller(freshNode.value);
+    };
+
     var reset = () => {
       setTimeout(() => {
         refreshStatus.value = 'default';
@@ -187,20 +192,11 @@ var __sfc__ = defineComponent({
         }, toNumber(props.successDuration));
       }
     });
-    onMounted(() => {
-      var _freshNode$value;
-
-      scroller = props.target ? getTarget(props.target, 'PullRefresh') : getParentScroller(freshNode.value);
+    useMounted(() => {
+      setScroller();
       setPosition();
-      (_freshNode$value = freshNode.value) == null ? void 0 : _freshNode$value.addEventListener('touchmove', touchMove, {
-        passive: false
-      });
-    });
-    onBeforeUnmount(() => {
-      var _freshNode$value2;
-
-      (_freshNode$value2 = freshNode.value) == null ? void 0 : _freshNode$value2.removeEventListener('touchmove', touchMove);
     });
+    useEventListener(freshNode, 'touchmove', touchMove);
     return {
       n,
       classes,