feat(autoResetRef): new function

README.md

@@ -7,7 +7,7 @@ Collection of essential Vue Composition Utilities
 <a href="https://www.npmjs.com/package/@vueuse/core" target="__blank"><img src="https://img.shields.io/npm/v/@vueuse/core?color=a1b858&label=" alt="NPM version"></a>
 <a href="https://www.npmjs.com/package/@vueuse/core" target="__blank"><img alt="NPM Downloads" src="https://img.shields.io/npm/dm/@vueuse/core?color=50a36f&label="></a>
 <a href="https://vueuse.org" target="__blank"><img src="https://img.shields.io/static/v1?label=&message=docs%20%26%20demos&color=1e8a7a" alt="Docs & Demos"></a>
-<img alt="Function Count" src="https://img.shields.io/badge/-114%20functions-13708a">
+<img alt="Function Count" src="https://img.shields.io/badge/-115%20functions-13708a">
 <br>
 <a href="https://github.com/vueuse/vueuse" target="__blank"><img alt="GitHub stars" src="https://img.shields.io/github/stars/vueuse/vueuse?style=social"></a>
 </p>

indexes.json

@@ -319,6 +319,13 @@
       "category": "Utilities",
       "description": "computed for async functions"
     },
+    {
+      "name": "autoResetRef",
+      "package": "core",
+      "docs": "https://vueuse.org/core/autoResetRef/",
+      "category": "Utilities",
+      "description": "a ref which will be reset to the default value after some time"
+    },
     {
       "name": "createGlobalState",
       "package": "core",

packages/core/autoResetRef/demo.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { autoResetRef } from '@vueuse/core'
+
+const message = autoResetRef('default message', 1000)
+
+const setMessage = () => {
+  // here the value will change to 'message has set' but after 1000ms, it will change to 'default message'
+  message.value = 'message has set'
+}
+</script>
+
+<template>
+  <div>
+    <button @click="setMessage()">
+      set message
+    </button>
+    <p>
+      {{ message }}
+    </p>
+  </div>
+</template>

packages/core/autoResetRef/index.md

@@ -0,0 +1,45 @@
+---
+category: Utilities
+---
+
+# autoResetRef
+
+A ref which will be reset to the default value after some time.
+
+## Usage
+
+```ts
+import { autoResetRef } from '@vueuse/core'
+
+const message = autoResetRef('default message', 1000)
+
+const setMessage = () => {
+  // here the value will change to 'message has set' but after 1000ms, it will change to 'default message'
+  message.value = 'message has set'
+}
+```
+
+
+<!--FOOTER_STARTS-->
+## Type Declarations
+
+```typescript
+/**
+ * Create a ref which will be reset to the default value after some time.
+ *
+ * @link https://vueuse.org/autoResetRef
+ * @param defaultValue The value which will be set.
+ * @param afterMs      A zero-or-greater delay in milliseconds.
+ */
+export declare function autoResetRef<T>(
+  defaultValue: T,
+  afterMs?: number
+): Ref<T>
+```
+
+## Source
+
+[Source](https://github.com/vueuse/vueuse/blob/main/packages/core/autoResetRef/index.ts) • [Demo](https://github.com/vueuse/vueuse/blob/main/packages/core/autoResetRef/demo.vue) • [Docs](https://github.com/vueuse/vueuse/blob/main/packages/core/autoResetRef/index.md)
+
+
+<!--FOOTER_ENDS-->

packages/core/autoResetRef/index.test.ts

@@ -0,0 +1,35 @@
+import { useSetup } from '../../.test'
+import { autoResetRef } from '.'
+
+describe('autoResetRef', () => {
+  it('should be defined', () => {
+    expect(autoResetRef).toBeDefined()
+  })
+
+  it('should be default at first', () => {
+    useSetup(() => {
+      const val = autoResetRef('default', 100)
+      expect(val.value).toBe('default')
+    })
+  })
+
+  it('should be updated', () => {
+    useSetup(() => {
+      const val = autoResetRef('default', 100)
+
+      val.value = 'update'
+      expect(val.value).toBe('update')
+    })
+  })
+
+  it('should be reset', () => {
+    useSetup(async() => {
+      const val = autoResetRef('default', 100)
+      val.value = 'update'
+
+      await new Promise(resolve => setTimeout(resolve, 100 + 1))
+
+      expect(val.value).toBe('default')
+    })
+  })
+})

packages/core/autoResetRef/index.ts

@@ -0,0 +1,35 @@
+import { customRef, Ref } from 'vue-demi'
+
+/**
+ * Create a ref which will be reset to the default value after some time.
+ *
+ * @link https://vueuse.org/autoResetRef
+ * @param defaultValue The value which will be set.
+ * @param afterMs      A zero-or-greater delay in milliseconds.
+ */
+export function autoResetRef<T>(defaultValue: T, afterMs = 10000): Ref<T> {
+  return customRef<T>((track, trigger) => {
+    let value: T = defaultValue
+    let timer: any
+
+    const resetAfter = () =>
+      setTimeout(() => {
+        value = defaultValue
+        trigger()
+      }, afterMs)
+
+    return {
+      get() {
+        track()
+        return value
+      },
+      set(newValue) {
+        value = newValue
+        trigger()
+
+        clearTimeout(timer)
+        timer = resetAfter()
+      },
+    }
+  })
+}

packages/core/index.ts

@@ -1,4 +1,5 @@
 export * from './asyncComputed'
+export * from './autoResetRef'
 export * from './createGlobalState'
 export * from './onClickOutside'
 export * from './onKeyStroke'

packages/functions.md

@@ -93,6 +93,7 @@
 
 ### Utilities
   - [`asyncComputed`](https://vueuse.org/core/asyncComputed/) — computed for async functions
+  - [`autoResetRef`](https://vueuse.org/core/autoResetRef/) — a ref which will be reset to the default value after some time
   - [`biSyncRef`](https://vueuse.org/shared/biSyncRef/) — two-way refs synchronization
   - [`controlledComputed`](https://vueuse.org/shared/controlledComputed/) — explicitly define the deps of computed
   - [`controlledRef`](https://vueuse.org/shared/controlledRef/) — fine-grained controls over ref and its reactivity