feat: new hook package: @utopia-utils/vueuse

Author: GreatAuk

.vscode/settings.json

@@ -1,5 +1,6 @@
 {
   "cSpell.words": [
-    "deepmerge"
+    "deepmerge",
+    "typecheck"
   ]
-}
+}

example/package.json

@@ -13,6 +13,7 @@
   },
   "dependencies": {
     "@utopia-utils/core": "workspace:*",
+    "@utopia-utils/vueuse": "workspace:^",
     "vue": "^3.2.45",
     "vue-router": "^4.1.6"
   },

example/src/App.vue

@@ -1,35 +1,26 @@
 <script setup lang="ts">
+import { ref } from 'vue'
 import { RouterLink, RouterView } from 'vue-router'
 import HelloWorld from './components/HelloWorld.vue'
 import { loadScript } from '@utopia-utils/core'
+import { useSmsCountdown } from '@utopia-utils/vueuse'
 
-let unload_
+let able = ref(false)
 
-const foo = () => {
-  console.log('[9]-App.vue', unload_)
-  unload_()
-}
-
-const loadScript_ = () => {
-  const { unload } = loadScript('https://unpkg.com/browse/axios@1.3.224/index.js', {
-    appendPosition: 'body',
-    onStatusChange: (status) => {
-      console.log(status)
-    },
-  })
-  unload_ = unload
-}
+const { counts, startCountdown, text, canSend, stopCountdown } = useSmsCountdown({
+  sendAble: able,
+  startText: 'send',
+  durationText: 'x秒重取'
+})
 </script>
 
 <template>
   <header>
-    <button @click="loadScript_">load</button>
-    <button @click="foo">unload</button>
-    <img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" />
-
+    <button @click="able = !able">Toggle {{ able }}</button>
+    <h1>{{ counts }}{{ canSend }}</h1>
+    <button @click="stopCountdown">stop</button>
+    <button @click="() => startCountdown()">{{ text }}</button>
     <div class="wrapper">
-      <HelloWorld msg="You did it!" />
-
       <nav>
         <RouterLink to="/">Home</RouterLink>
       </nav>

packages/vueuse/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@utopia-utils/vueuse",
+  "type": "module",
+  "version": "0.3.23",
+  "description": "Collection of common vue hooks",
+  "author": "Utopia <https://github.com/GreatAuk>",
+  "license": "MIT",
+  "homepage": "https://github.com/GreatAuk/utopia-utils#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/GreatAuk/utopia-utils.git",
+    "directory": "packages/vueuse"
+  },
+  "bugs": {
+    "url": "https://github.com/GreatAuk/utopia-utils/issues"
+  },
+  "keywords": [
+    "utils",
+    "vue hooks",
+    "vueuse"
+  ],
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "require": "./dist/index.cjs",
+      "import": "./dist/index.js"
+    }
+  },
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "lint": "eslint .",
+    "start": "tsx src/index.ts",
+    "test": "vitest",
+    "typecheck": "tsc --noEmit"
+  },
+  "peerDependencies": {
+    "vue": "^3.2.47"
+  },
+  "dependencies": {},
+  "devDependencies": {
+    "vue": "^3.2.47"
+  }
+}

packages/vueuse/src/index.ts

@@ -0,0 +1 @@
+export * from './useSmsCountdown'

packages/vueuse/src/types.ts

@@ -0,0 +1,29 @@
+import type { Ref } from 'vue'
+
+/**
+ * Maybe it's a ref, or a plain value
+ *
+ * ```ts
+ * type MaybeRef<T> = T | Ref<T>
+ * ```
+ */
+export type MaybeRef<T> = T | Ref<T>
+
+/**
+ * Maybe it's a ref, or a plain value, or a getter function
+ *
+ * ```ts
+ * type MaybeRefOrGetter<T> = (() => T) | T | Ref<T> | ComputedRef<T>
+ * ```
+ */
+export type MaybeRefOrGetter<T> = MaybeRef<T> | (() => T)
+
+/**
+ * Void function
+ */
+export type Fn = () => void
+
+/**
+ * Any function
+ */
+export type AnyFn = (...args: any[]) => any

packages/vueuse/src/useSmsCountdown/index.ts

@@ -0,0 +1,81 @@
+import { computed, ref } from 'vue'
+
+import type { MaybeRef } from '../types'
+import { toValue, tryOnScopeDispose } from '../utils'
+
+export interface UseSmsCountdownOptions {
+  /**
+   * 倒计时总共的时间(s)
+   * @default 60s
+   */
+  totalSecond?: number
+  /** 是否可发送
+   * @default true
+  */
+  sendAble?: MaybeRef<boolean>
+  /**
+   * 开始倒计时的文本
+   * @default '获取验证码'
+   */
+  startText?: string
+  /**
+   * 倒计时期间的提示语，必须带有字符 "%s"，这里的 "%s"，将会被倒计的秒数替代
+   * @default '%s秒后重发'
+   */
+  durationText?: string
+}
+
+export function useSmsCountdown(options?: UseSmsCountdownOptions) {
+  const { totalSecond = 60, sendAble = true, startText = '获取验证码', durationText = 'x秒后重发' } = options || {}
+
+  if (totalSecond <= 0 && totalSecond % 1 !== 0)
+    throw new Error('倒计时的时间应该为一个正整数！')
+
+  const counts = ref(totalSecond)
+
+  /** 是否可以发送验证码，由外部转入的 sendAble 和当前的秒数共同确定 */
+  const canSend = computed(() => {
+    return toValue(sendAble) && counts.value === totalSecond
+  })
+
+  const text = computed(() => {
+    if (counts.value === totalSecond)
+      return startText
+
+    return durationText.replace(/%s/i, counts.value.toString())
+  })
+
+  let intervalId: ReturnType<typeof setInterval> | null = null
+
+  function startCountdown() {
+    if (!canSend.value)
+      return
+
+    counts.value--
+    intervalId = setInterval(() => {
+      counts.value--
+      if (counts.value <= 0) {
+        counts.value = totalSecond
+        clearInterval(intervalId!)
+      }
+    }, 1000)
+  }
+
+  /**
+   * 停止计时
+   */
+  function stopCountdown() {
+    intervalId && clearInterval(intervalId)
+    intervalId = null
+    counts.value = totalSecond
+  }
+  tryOnScopeDispose(stopCountdown)
+
+  return {
+    counts,
+    canSend,
+    text,
+    startCountdown,
+    stopCountdown,
+  }
+}

packages/vueuse/src/utils/index.ts

@@ -0,0 +1,2 @@
+export * from './tryOnScopeDispose'
+export * from './toValue'

packages/vueuse/src/utils/toValue/index.ts

@@ -0,0 +1,11 @@
+import { unref } from 'vue'
+import type { AnyFn, MaybeRefOrGetter } from '../../types'
+
+/**
+ * Get the value of value/ref/getter.
+ */
+export function toValue<T>(r: MaybeRefOrGetter<T>): T {
+  return typeof r === 'function'
+    ? (r as AnyFn)()
+    : unref(r)
+}

packages/vueuse/src/utils/tryOnScopeDispose/index.ts

@@ -0,0 +1,15 @@
+import { getCurrentScope, onScopeDispose } from 'vue'
+import type { Fn } from '../../types'
+
+/**
+ * Call onScopeDispose() if it's inside an effect scope lifecycle, if not, do nothing
+ *
+ * @param fn
+ */
+export function tryOnScopeDispose(fn: Fn) {
+  if (getCurrentScope()) {
+    onScopeDispose(fn)
+    return true
+  }
+  return false
+}