yc-design-vue 1.1.2 → 1.1.4

package/es/Carousel/Carousel.vue.js

@@ -1,7 +1,7 @@
 import _sfc_main from "./Carousel.vue2.js";
 /* empty css              */
 import _export_sfc from "../_virtual/_plugin-vue_export-helper.js";
-const _Carousel = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-f976facc"]]);
+const _Carousel = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-5285806c"]]);
 export {
   _Carousel as default
 };

package/es/Carousel/Carousel.vue2.js

@@ -1,4 +1,4 @@
-import { defineComponent, watch, onBeforeUnmount, createElementBlock, openBlock, normalizeClass, createElementVNode, createCommentVNode, unref, Fragment, renderList, createBlock, resolveDynamicComponent, createVNode } from "vue";
+import { defineComponent, ref, watch, onBeforeUnmount, createElementBlock, openBlock, normalizeClass, createElementVNode, createCommentVNode, unref, Fragment, renderList, createBlock, resolveDynamicComponent, createVNode } from "vue";
 import "../node_modules/tinycolor2/esm/tinycolor.js";
 import "../_shared/utils/dom.js";
 import { isObject } from "../_shared/utils/is.js";
@@ -8,6 +8,7 @@ import "../Empty/index.js";
 import useContext from "./hooks/useContext.js";
 import CarouselArrow from "./CarouselArrow.vue.js";
 import CarouselIndicator from "./CarouselIndicator.vue.js";
+import { useInterval } from "../node_modules/@vueuse/shared/index.js";
 const _hoisted_1 = {
   key: 0,
   class: "yc-carousel-indicator-wrapper"
@@ -41,21 +42,23 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const props = __props;
     const emits = __emit;
     const { slideTo, computedCurrent, autoPlay, carouselItems } = useContext().provide(props, emits);
-    let autoPlayTimer = null;
+    let autoPlayTimer = ref(0);
+    const stopAutoPlay = () => {
+      clearInterval(autoPlayTimer.value);
+    };
     const setAutoPlay = () => {
       var _a;
       if (!autoPlay.value) return;
-      autoPlayTimer = setInterval(
-        () => {
-          slideTo(computedCurrent.value + 1);
-        },
-        ((_a = autoPlay.value) == null ? void 0 : _a.interval) ?? 3e3
+      autoPlayTimer = useInterval(
+        ((_a = autoPlay.value) == null ? void 0 : _a.interval) ?? 3e3,
+        {
+          callback: () => {
+            console.log("定时器触发了");
+            slideTo(computedCurrent.value + 1);
+          }
+        }
       );
     };
-    const stopAutoPlay = () => {
-      clearInterval(autoPlayTimer);
-      autoPlayTimer = null;
-    };
     const handleChange = async (index) => {
       stopAutoPlay();
       await slideTo(index);
@@ -64,9 +67,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     watch(
       () => autoPlay.value,
       () => {
-        if (!autoPlay.value) {
-          return stopAutoPlay();
-        }
+        stopAutoPlay();
         setAutoPlay();
       },
       {

package/es/Carousel/hooks/useContext.js

@@ -41,7 +41,7 @@ const useContext = () => {
     );
     const moveType = ref("positive");
     const preIndex = ref(computedCurrent.value);
-    let timer = null;
+    let flag = false;
     const getValidIndex = (val) => {
       if (val < 0) {
         return length.value - 1;
@@ -49,15 +49,16 @@ const useContext = () => {
       return val > length.value ? val % length.value : val;
     };
     const slideTo = async (targetIndex) => {
-      if (timer || targetIndex == computedCurrent.value) {
+      if (flag || targetIndex == computedCurrent.value) {
         return;
       }
       moveType.value = targetIndex > computedCurrent.value ? "positive" : "negative";
       preIndex.value = computedCurrent.value;
       computedCurrent.value = getValidIndex(targetIndex);
       emits("change", computedCurrent.value, preIndex.value, true);
+      flag = true;
       await sleep(moveSpeed.value);
-      timer = null;
+      flag = false;
     };
     provide(CAROUSEL_CONTEXT_KEY, {
       length,

package/es/Cascader/Cascader.vue.js

@@ -1,7 +1,7 @@
 import _sfc_main from "./Cascader.vue2.js";
 /* empty css              */
 import _export_sfc from "../_virtual/_plugin-vue_export-helper.js";
-const _Cascader = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-a5acb2b3"]]);
+const _Cascader = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-546388ae"]]);
 export {
   _Cascader as default
 };

package/es/Cascader/Cascader.vue2.js

@@ -154,6 +154,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         "popup-offset": 4,
         "popup-container": _ctx.popupContainer,
         disabled: unref(disabled),
+        "content-style": {
+          background: "transparent"
+        },
         position: "bl",
         trigger: "focus",
         "animation-name": "slide-dynamic-origin",

package/es/Image/ImagePreview.vue.js

@@ -1,7 +1,7 @@
 import _sfc_main from "./ImagePreview.vue2.js";
 /* empty css                  */
 import _export_sfc from "../_virtual/_plugin-vue_export-helper.js";
-const ImagePreview = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-b3306f5d"]]);
+const ImagePreview = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-252a7f6e"]]);
 export {
   ImagePreview as default
 };

package/es/Image/ImagePreview.vue2.js

@@ -1,4 +1,4 @@
-import { defineComponent, toRefs, ref, createBlock, openBlock, Teleport, unref, createElementBlock, createCommentVNode, normalizeStyle, normalizeClass, createVNode, Transition, withCtx, withDirectives, createElementVNode, vShow, renderSlot, withModifiers, createSlots } from "vue";
+import { defineComponent, toRefs, ref, createBlock, openBlock, Teleport, unref, createElementBlock, createCommentVNode, normalizeStyle, normalizeClass, createVNode, Transition, withCtx, withDirectives, createElementVNode, vShow, withModifiers, renderSlot, createSlots } from "vue";
 import "../node_modules/tinycolor2/esm/tinycolor.js";
 import "../_shared/utils/dom.js";
 import { isUndefined } from "../_shared/utils/is.js";
@@ -11,8 +11,7 @@ import { useEventListener, onKeyStroke } from "../node_modules/@vueuse/core/inde
 import useModalClose from "../Modal/hooks/useModalClose.js";
 import ImagePreviewToolbar from "./ImagePreviewToolbar.vue.js";
 const _hoisted_1 = { class: "yc-image-preview-mask" };
-const _hoisted_2 = { class: "yc-image-preview-wrapper" };
-const _hoisted_3 = ["src"];
+const _hoisted_2 = ["src"];
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{
     name: "ImagePreview",
@@ -112,6 +111,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       if (wheelZoom.value) {
         useEventListener("wheel", (e) => {
           e.preventDefault();
+          e.stopPropagation();
           const delta = e.deltaY < 0 ? 1 : -1;
           scale.value *= Math.pow(zoomRate.value, delta);
         });
@@ -157,13 +157,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             onAfterLeave: unref(handleAfterLeave)
           }, {
             default: withCtx(() => [
-              withDirectives(createElementVNode("div", _hoisted_2, [
+              withDirectives(createElementVNode("div", {
+                class: "yc-image-preview-wrapper",
+                onClick: _cache[1] || (_cache[1] = withModifiers(($event) => unref(handleClose)("mask", $event, false), ["self"]))
+              }, [
                 createElementVNode("div", {
                   style: normalizeStyle({
                     transform: `scale(${unref(scale)}, ${unref(scale)})`
                   }),
-                  class: "yc-image-preview-img-container",
-                  onClick: _cache[0] || (_cache[0] = withModifiers(($event) => unref(handleClose)("mask", $event, false), ["self"]))
+                  class: "yc-image-preview-img-container"
                 }, [
                   createElementVNode("img", {
                     src: _ctx.src,
@@ -173,7 +175,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                     class: "yc-image-preview-img",
                     ref_key: "imageRef",
                     ref: imageRef
-                  }, null, 12, _hoisted_3)
+                  }, null, 12, _hoisted_2)
                 ], 4),
                 createVNode(ImagePreviewToolbar, {
                   actionsLayout: _ctx.actionsLayout,
@@ -191,7 +193,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 _ctx.closable ? (openBlock(), createElementBlock("div", {
                   key: 0,
                   class: "yc-image-preview-close-btn",
-                  onClick: _cache[1] || (_cache[1] = ($event) => unref(handleClose)("closeBtn", $event))
+                  onClick: _cache[0] || (_cache[0] = ($event) => unref(handleClose)("closeBtn", $event))
                 }, [
                   createVNode(unref(_sfc_main$1))
                 ])) : createCommentVNode("", true)

package/es/InputNumber/InputOperaBtn.vue2.js

@@ -5,7 +5,7 @@ import "../_shared/utils/dom.js";
 import "../_shared/utils/time.js";
 import "../Empty/index.js";
 /* empty css                             */
-import _sfc_main$2 from "../_shared/icons/IconMinus.vue2.js";
+import _sfc_main$2 from "../_shared/icons/IconMinus.vue.js";
 import _sfc_main$3 from "../_shared/icons/IconPlus.vue.js";
 import Button from "../Button/index.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({

package/es/Scrollbar/Scrollbar.vue.js

@@ -1,7 +1,7 @@
 import _sfc_main from "./Scrollbar.vue2.js";
 /* empty css               */
 import _export_sfc from "../_virtual/_plugin-vue_export-helper.js";
-const _Scrollbar = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-f20de904"]]);
+const _Scrollbar = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-891ea4c3"]]);
 export {
   _Scrollbar as default
 };

package/es/Scrollbar/Scrollbar.vue2.js

@@ -1,5 +1,10 @@
 import { defineComponent, toRefs, ref, computed, createElementBlock, openBlock, normalizeStyle, normalizeClass, unref, createElementVNode, createBlock, createCommentVNode, renderSlot } from "vue";
 import { useResizeObserver, useElementSize } from "../node_modules/@vueuse/core/index.js";
+import "../node_modules/tinycolor2/esm/tinycolor.js";
+import { isVerticallyScrollable, isHorizontallyScrollable } from "../_shared/utils/dom.js";
+import "../_shared/utils/time.js";
+import "../Empty/index.js";
+/* empty css                             */
 import ScrollbarTrack from "./ScrollbarTrack.vue.js";
 import useContext from "./hooks/useContext.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({
@@ -99,18 +104,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       const curTop2 = ref(0);
       const curLeft2 = ref(0);
       const hasVerticalBar2 = computed(() => {
-        const style = scrollRef.value ? getComputedStyle(scrollRef.value) : { overflowY: "", overflow: "" };
-        const overflowY = style.overflowY;
-        const overflow = style.overflow;
-        const allowScroll = ["auto", "scroll"];
-        return contentHeight.value > scrollHeight2.value && (allowScroll.includes(overflowY) || allowScroll.includes(overflow));
+        if (!scrollRef.value) return false;
+        return contentHeight.value > scrollHeight2.value && isVerticallyScrollable(scrollRef.value);
       });
       const hashorizontalBar2 = computed(() => {
-        const style = scrollRef.value ? getComputedStyle(scrollRef.value) : { overflowX: "", overflow: "" };
-        const overflowX = style.overflowX;
-        const overflow = style.overflow;
-        const allowScroll = ["auto", "scroll"];
-        return contentWidth.value > scrollWidth2.value && (allowScroll.includes(overflowX) || allowScroll.includes(overflow));
+        if (!scrollRef.value) return false;
+        return contentWidth.value > scrollWidth2.value && isHorizontallyScrollable(scrollRef.value);
       });
       const thumbHeight = computed(() => {
         if (!hasVerticalBar2.value) return 0;

package/es/Typography/TypographyBase.vue2.js

@@ -5,8 +5,8 @@ import { getDomText, sleep } from "../_shared/utils/dom.js";
 import "../_shared/utils/time.js";
 import "../Empty/index.js";
 /* empty css                             */
-import _sfc_main$3 from "../_shared/icons/IconCopy.vue2.js";
-import _sfc_main$1 from "../_shared/icons/IconEdit.vue2.js";
+import _sfc_main$3 from "../_shared/icons/IconCopy.vue.js";
+import _sfc_main$1 from "../_shared/icons/IconEdit.vue.js";
 import _sfc_main$2 from "../_shared/icons/IconInfo.vue.js";
 import useControlValue from "../_shared/utils/control.js";
 import Input from "../Input/index.js";

package/es/_shared/icons/IconCopy.vue.js

@@ -1,4 +1,19 @@
-import _sfc_main from "./IconCopy.vue2.js";
+import { defineComponent, createBlock, openBlock, normalizeProps, guardReactiveProps, withCtx, createElementVNode } from "vue";
+import YcIcon from "../components/Icon.vue2.js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "IconCopy",
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(YcIcon, normalizeProps(guardReactiveProps(_ctx.$attrs)), {
+        default: withCtx(() => _cache[0] || (_cache[0] = [
+          createElementVNode("path", { d: "M20 6h18a2 2 0 0 1 2 2v22M8 16v24c0 1.105.891 2 1.996 2h20.007A1.99 1.99 0 0 0 32 40.008V15.997A1.997 1.997 0 0 0 30 14H10a2 2 0 0 0-2 2Z" }, null, -1)
+        ])),
+        _: 1,
+        __: [0]
+      }, 16);
+    };
+  }
+});
 export {
   _sfc_main as default
 };

package/es/_shared/icons/IconCopy.vue2.js

@@ -1,19 +1,4 @@
-import { defineComponent, createBlock, openBlock, normalizeProps, guardReactiveProps, withCtx, createElementVNode } from "vue";
-import YcIcon from "../components/Icon.vue2.js";
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  __name: "IconCopy",
-  setup(__props) {
-    return (_ctx, _cache) => {
-      return openBlock(), createBlock(YcIcon, normalizeProps(guardReactiveProps(_ctx.$attrs)), {
-        default: withCtx(() => _cache[0] || (_cache[0] = [
-          createElementVNode("path", { d: "M20 6h18a2 2 0 0 1 2 2v22M8 16v24c0 1.105.891 2 1.996 2h20.007A1.99 1.99 0 0 0 32 40.008V15.997A1.997 1.997 0 0 0 30 14H10a2 2 0 0 0-2 2Z" }, null, -1)
-        ])),
-        _: 1,
-        __: [0]
-      }, 16);
-    };
-  }
-});
+import _sfc_main from "./IconCopy.vue.js";
 export {
   _sfc_main as default
 };

package/es/_shared/icons/IconEdit.vue.js

@@ -1,4 +1,19 @@
-import _sfc_main from "./IconEdit.vue2.js";
+import { defineComponent, createBlock, openBlock, normalizeProps, guardReactiveProps, withCtx, createElementVNode } from "vue";
+import YcIcon from "../components/Icon.vue2.js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "IconEdit",
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(YcIcon, normalizeProps(guardReactiveProps(_ctx.$attrs)), {
+        default: withCtx(() => _cache[0] || (_cache[0] = [
+          createElementVNode("path", { d: "m30.48 19.038 5.733-5.734a1 1 0 0 0 0-1.414l-5.586-5.586a1 1 0 0 0-1.414 0l-5.734 5.734m7 7L15.763 33.754a1 1 0 0 1-.59.286l-6.048.708a1 1 0 0 1-1.113-1.069l.477-6.31a1 1 0 0 1 .29-.631l14.7-14.7m7 7-7-7M6 42h36" }, null, -1)
+        ])),
+        _: 1,
+        __: [0]
+      }, 16);
+    };
+  }
+});
 export {
   _sfc_main as default
 };

package/es/_shared/icons/IconEdit.vue2.js

@@ -1,19 +1,4 @@
-import { defineComponent, createBlock, openBlock, normalizeProps, guardReactiveProps, withCtx, createElementVNode } from "vue";
-import YcIcon from "../components/Icon.vue2.js";
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  __name: "IconEdit",
-  setup(__props) {
-    return (_ctx, _cache) => {
-      return openBlock(), createBlock(YcIcon, normalizeProps(guardReactiveProps(_ctx.$attrs)), {
-        default: withCtx(() => _cache[0] || (_cache[0] = [
-          createElementVNode("path", { d: "m30.48 19.038 5.733-5.734a1 1 0 0 0 0-1.414l-5.586-5.586a1 1 0 0 0-1.414 0l-5.734 5.734m7 7L15.763 33.754a1 1 0 0 1-.59.286l-6.048.708a1 1 0 0 1-1.113-1.069l.477-6.31a1 1 0 0 1 .29-.631l14.7-14.7m7 7-7-7M6 42h36" }, null, -1)
-        ])),
-        _: 1,
-        __: [0]
-      }, 16);
-    };
-  }
-});
+import _sfc_main from "./IconEdit.vue.js";
 export {
   _sfc_main as default
 };

package/es/_shared/icons/IconMinus.vue.js

@@ -1,4 +1,19 @@
-import _sfc_main from "./IconMinus.vue2.js";
+import { defineComponent, createBlock, openBlock, normalizeProps, guardReactiveProps, withCtx, createElementVNode } from "vue";
+import YcIcon from "../components/Icon.vue2.js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "IconMinus",
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(YcIcon, normalizeProps(guardReactiveProps(_ctx.$attrs)), {
+        default: withCtx(() => _cache[0] || (_cache[0] = [
+          createElementVNode("path", { d: "M5 24h38" }, null, -1)
+        ])),
+        _: 1,
+        __: [0]
+      }, 16);
+    };
+  }
+});
 export {
   _sfc_main as default
 };

package/es/_shared/icons/IconMinus.vue2.js

@@ -1,19 +1,4 @@
-import { defineComponent, createBlock, openBlock, normalizeProps, guardReactiveProps, withCtx, createElementVNode } from "vue";
-import YcIcon from "../components/Icon.vue2.js";
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  __name: "IconMinus",
-  setup(__props) {
-    return (_ctx, _cache) => {
-      return openBlock(), createBlock(YcIcon, normalizeProps(guardReactiveProps(_ctx.$attrs)), {
-        default: withCtx(() => _cache[0] || (_cache[0] = [
-          createElementVNode("path", { d: "M5 24h38" }, null, -1)
-        ])),
-        _: 1,
-        __: [0]
-      }, 16);
-    };
-  }
-});
+import _sfc_main from "./IconMinus.vue.js";
 export {
   _sfc_main as default
 };

package/es/_shared/utils/dom.d.ts

@@ -15,3 +15,5 @@ export declare const throttleByRaf: (cb: (...args: any[]) => void) => {
 export declare const debounce: (func: (...args: any) => void, delay: number, immediate?: boolean) => (this: any, ...args: any) => void;
 export declare const throttle: (fn: (...args: any) => void, delay: number) => (this: any, ...args: any) => void;
 export declare const valueToPx: (value: string | number | undefined) => string;
+export declare function isHorizontallyScrollable(element: HTMLElement): boolean;
+export declare function isVerticallyScrollable(element: HTMLElement): boolean;

package/es/_shared/utils/dom.js

@@ -70,7 +70,7 @@ const findFirstScrollableParent = (element) => {
   }
   let currentElement = element.parentElement;
   while (currentElement && currentElement !== document.body) {
-    const style = window.getComputedStyle(currentElement);
+    const style = getComputedStyle(currentElement);
     const overflow = style.overflowY || style.overflow;
     const isScrollable = ["auto", "scroll"].includes(overflow);
     const canScroll = currentElement.scrollHeight > currentElement.clientHeight;
@@ -91,15 +91,15 @@ const throttleByRaf = (cb) => {
   let timer = 0;
   const throttle2 = (...args) => {
     if (timer) {
-      window.cancelAnimationFrame(timer);
+      cancelAnimationFrame(timer);
     }
-    timer = window.requestAnimationFrame(() => {
+    timer = requestAnimationFrame(() => {
       cb(...args);
       timer = 0;
     });
   };
   throttle2.cancel = () => {
-    window.cancelAnimationFrame(timer);
+    cancelAnimationFrame(timer);
     timer = 0;
   };
   return throttle2;
@@ -151,13 +151,35 @@ const valueToPx = (value) => {
   }
   return value;
 };
+function isHorizontallyScrollable(element) {
+  const style = getComputedStyle(element);
+  const isScrollableOverflow = style.overflowX === "scroll" || style.overflowX === "auto";
+  const isVisible = style.display !== "none" && style.visibility !== "hidden";
+  if (!isVisible) {
+    return false;
+  }
+  const isContentLarger = element.scrollWidth > element.clientWidth;
+  return isScrollableOverflow && isContentLarger;
+}
+function isVerticallyScrollable(element) {
+  const style = getComputedStyle(element);
+  const isScrollableOverflow = style.overflowY === "scroll" || style.overflowY === "auto";
+  const isVisible = style.display !== "none" && style.visibility !== "hidden";
+  if (!isVisible) {
+    return false;
+  }
+  const isContentLarger = element.scrollHeight > element.clientHeight;
+  return isScrollableOverflow && isContentLarger;
+}
 export {
   debounce,
   findFirstScrollableParent,
   getBreakpointValue,
   getDomText,
   getElement,
+  isHorizontallyScrollable,
   isServerRendering,
+  isVerticallyScrollable,
   mediaQueryHandler,
   querySelector,
   sleep,

package/es/node_modules/@vueuse/core/index.js

@@ -1,5 +1,5 @@
 import { tryOnScopeDispose, toArray, watchImmediate, isClient, isObject, makeDestructurable, camelize, tryOnMounted, toRefs, noop, isIOS, notNullish, useThrottleFn, useDebounceFn, pxValue, injectLocal, useTimeoutFn, createSingletonPromise } from "../shared/index.js";
-import { createFilterWrapper, debounceFilter, getLifeCycleTarget, throttleFilter } from "../shared/index.js";
+import { createFilterWrapper, debounceFilter, getLifeCycleTarget, throttleFilter, useInterval, useIntervalFn } from "../shared/index.js";
 import { computed, toValue, watch, shallowRef, getCurrentInstance, onMounted, unref, defineComponent, ref, reactive, watchEffect, hasInjectionContext, toRaw } from "vue";
 function createReusableTemplate(options = {}) {
   const {
@@ -1080,6 +1080,8 @@ export {
   useElementBounding,
   useElementSize,
   useEventListener,
+  useInterval,
+  useIntervalFn,
   useMediaQuery,
   useMounted,
   useMutationObserver,

package/es/node_modules/@vueuse/shared/index.js

@@ -1,4 +1,4 @@
-import { getCurrentScope, onScopeDispose, watch, onMounted, nextTick, isRef, toRefs as toRefs$1, customRef, toValue, getCurrentInstance, hasInjectionContext, inject, shallowRef, readonly } from "vue";
+import { getCurrentScope, onScopeDispose, watch, onMounted, nextTick, isRef, toRefs as toRefs$1, customRef, toValue, getCurrentInstance, shallowRef, hasInjectionContext, inject, readonly } from "vue";
 function tryOnScopeDispose(fn) {
   if (getCurrentScope()) {
     onScopeDispose(fn);
@@ -240,6 +240,79 @@ function tryOnMounted(fn, sync = true, target) {
   else
     nextTick(fn);
 }
+function useIntervalFn(cb, interval = 1e3, options = {}) {
+  const {
+    immediate = true,
+    immediateCallback = false
+  } = options;
+  let timer = null;
+  const isActive = shallowRef(false);
+  function clean() {
+    if (timer) {
+      clearInterval(timer);
+      timer = null;
+    }
+  }
+  function pause() {
+    isActive.value = false;
+    clean();
+  }
+  function resume() {
+    const intervalValue = toValue(interval);
+    if (intervalValue <= 0)
+      return;
+    isActive.value = true;
+    if (immediateCallback)
+      cb();
+    clean();
+    if (isActive.value)
+      timer = setInterval(cb, intervalValue);
+  }
+  if (immediate && isClient)
+    resume();
+  if (isRef(interval) || typeof interval === "function") {
+    const stopWatch = watch(interval, () => {
+      if (isActive.value && isClient)
+        resume();
+    });
+    tryOnScopeDispose(stopWatch);
+  }
+  tryOnScopeDispose(pause);
+  return {
+    isActive,
+    pause,
+    resume
+  };
+}
+function useInterval(interval = 1e3, options = {}) {
+  const {
+    controls: exposeControls = false,
+    immediate = true,
+    callback
+  } = options;
+  const counter = shallowRef(0);
+  const update = () => counter.value += 1;
+  const reset = () => {
+    counter.value = 0;
+  };
+  const controls = useIntervalFn(
+    callback ? () => {
+      update();
+      callback(counter.value);
+    } : update,
+    interval,
+    { immediate }
+  );
+  if (exposeControls) {
+    return {
+      counter,
+      reset,
+      ...controls
+    };
+  } else {
+    return counter;
+  }
+}
 function useTimeoutFn(cb, interval, options = {}) {
   const {
     immediate = true,
@@ -310,6 +383,8 @@ export {
   tryOnMounted,
   tryOnScopeDispose,
   useDebounceFn,
+  useInterval,
+  useIntervalFn,
   useThrottleFn,
   useTimeoutFn,
   watchImmediate