@varlet/ui 2.8.5 → 2.8.6-alpha.1678026101378

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,

package/es/slider/Slider.mjs

@@ -1,10 +1,11 @@
-import { defineComponent, ref, onMounted, computed, reactive, nextTick, watch } from 'vue';
+import VarFormDetails from '../form-details/index.mjs';
+import { defineComponent, ref, computed, reactive, nextTick, watch } from 'vue';
 import { useValidation, createNamespace, call } from '../utils/components.mjs';
 import { useForm } from '../form/provide.mjs';
 import { getLeft, multiplySizeUnit } from '../utils/elements.mjs';
 import { isArray, isNumber, toNumber } from '@varlet/shared';
 import { props, Thumbs } from './props.mjs';
-import VarFormDetails from '../form-details/index.mjs';
+import { useMounted } from '@varlet/use';
 var {
   n,
   classes
@@ -379,7 +380,7 @@ var __sfc__ = defineComponent({
       setProps(modelValue, toNumber(step));
     });
     watch(maxWidth, () => setProps());
-    onMounted(() => {
+    useMounted(() => {
       if (!stepValidator() || !valueValidator()) return;
       maxWidth.value = sliderEl.value.offsetWidth;
     });

package/es/snackbar/core.mjs

@@ -1,11 +1,12 @@
-import { defineComponent, watch, ref, onMounted, computed } from 'vue';
 import VarLoading from '../loading/index.mjs';
 import VarIcon from '../icon/index.mjs';
+import { defineComponent, watch, ref, computed } from 'vue';
 import { useZIndex } from '../context/zIndex.mjs';
 import { props } from './props.mjs';
 import { useLock } from '../context/lock.mjs';
 import { SNACKBAR_TYPE } from './index.mjs';
 import { call, createNamespace } from '../utils/components.mjs';
+import { useMounted } from '@varlet/use';
 var {
   n,
   classes
@@ -104,7 +105,7 @@ var __sfc__ = defineComponent({
       clearTimeout(timer.value);
       updateAfterDuration();
     });
-    onMounted(() => {
+    useMounted(() => {
       if (props.show) {
         call(props.onOpen);
         updateAfterDuration();

package/es/sticky/Sticky.mjs

@@ -2,11 +2,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 { defineComponent, ref, onMounted, onUnmounted, onActivated, onDeactivated, computed, watch } from 'vue';
+import { defineComponent, ref, onUnmounted, onDeactivated, computed, watch } from 'vue';
 import { props } from './props.mjs';
 import { doubleRaf, getParentScroller, raf, toPxNum } from '../utils/elements.mjs';
 import { toNumber } from '@varlet/shared';
 import { call, createNamespace } from '../utils/components.mjs';
+import { useEventListener, useMounted } from '@varlet/use';
 var {
   n,
   classes
@@ -112,7 +113,11 @@ var __sfc__ = defineComponent({
     };
 
     var handleScroll = () => {
-      // returns undefined when disabled = true
+      if (!scroller) {
+        return;
+      } // returns undefined when disabled = true
+
+
       var fixedParams = computeFixedParams();
 
       if (fixedParams) {
@@ -138,7 +143,6 @@ var __sfc__ = defineComponent({
         yield doubleRaf();
         scroller = getParentScroller(stickyEl.value);
         scroller !== window && scroller.addEventListener('scroll', handleScroll);
-        window.addEventListener('scroll', handleScroll);
         handleScroll();
       });
 
@@ -149,14 +153,13 @@ var __sfc__ = defineComponent({
 
     var removeScrollListener = () => {
       scroller !== window && scroller.removeEventListener('scroll', handleScroll);
-      window.removeEventListener('scroll', handleScroll);
     };
 
     watch(() => props.disabled, resize);
-    onActivated(addScrollListener);
-    onDeactivated(removeScrollListener);
-    onMounted(addScrollListener);
+    useMounted(addScrollListener);
     onUnmounted(removeScrollListener);
+    onDeactivated(removeScrollListener);
+    useEventListener(window, 'scroll', handleScroll);
     return {
       n,
       classes,

package/es/swipe/Swipe.mjs

@@ -2,12 +2,13 @@ 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 { defineComponent, ref, computed, watch, onMounted, onUnmounted } from 'vue';
+import { defineComponent, ref, computed, watch, onUnmounted, onDeactivated, onActivated } from 'vue';
 import { useSwipeItems } from './provide.mjs';
 import { doubleRaf, nextTickFrame } from '../utils/elements.mjs';
 import { props } from './props.mjs';
 import { isNumber, toNumber } from '@varlet/shared';
 import { call, createNamespace } from '../utils/components.mjs';
+import { useEventListener } from '@varlet/use';
 var SWIPE_DELAY = 250;
 var SWIPE_DISTANCE = 20;
 var {
@@ -408,13 +409,10 @@ var __sfc__ = defineComponent({
       initialIndex();
       resize();
     }));
-    onMounted(() => {
-      window.addEventListener('resize', resize);
-    });
-    onUnmounted(() => {
-      window.removeEventListener('resize', resize);
-      stopAutoplay();
-    });
+    onActivated(resize);
+    onDeactivated(stopAutoplay);
+    onUnmounted(stopAutoplay);
+    useEventListener(window, 'resize', resize);
     return {
       n,
       classes,

package/es/tabs/Tabs.mjs

@@ -3,13 +3,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 VarSticky from '../sticky/index.mjs';
-import { defineComponent, watch, ref, computed, Transition, onMounted, onUnmounted } from 'vue';
+import { defineComponent, watch, ref, computed, Transition } from 'vue';
 import { props } from './props.mjs';
 import { useTabList } from './provide.mjs';
 import { isNumber } from '@varlet/shared';
 import { linear } from '../utils/shared.mjs';
 import { toSizeUnit, scrollTo, doubleRaf } from '../utils/elements.mjs';
 import { createNamespace, call } from '../utils/components.mjs';
+import { useEventListener } from '@varlet/use';
 var {
   n,
   classes
@@ -217,8 +218,7 @@ var __sfc__ = defineComponent({
       resize();
     }));
     watch(() => props.active, resize);
-    onMounted(() => window.addEventListener('resize', resize));
-    onUnmounted(() => window.removeEventListener('resize', resize));
+    useEventListener(window, 'resize', resize);
     return {
       stickyComponent,
       indicatorWidth,

package/es/utils/components.mjs

@@ -8,6 +8,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 
 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 { useEventListener } from '@varlet/use';
 import { createApp, h, getCurrentInstance, inject, onUnmounted, computed, provide, reactive, isVNode, onMounted, onBeforeUnmount, nextTick, ref, onActivated, onDeactivated } from 'vue';
 import { isArray, removeItem } from '@varlet/shared';
 export function pickProps(props, propsKey) {
@@ -232,14 +233,8 @@ export function useValidation() {
   };
 }
 export function useRouteListener(cb) {
-  onMounted(() => {
-    window.addEventListener('hashchange', cb);
-    window.addEventListener('popstate', cb);
-  });
-  onUnmounted(() => {
-    window.removeEventListener('hashchange', cb);
-    window.removeEventListener('popstate', cb);
-  });
+  useEventListener(window, 'hashchange', cb);
+  useEventListener(window, 'popstate', cb);
 }
 export function useTeleport() {
   var disabled = ref(false);