feat(useToFixed): new function (#2003)

* feat(useFixed): new function

* chore(useToFixed): change function name

* chore(useToFixed): change function name

packages/math/index.ts

@@ -7,6 +7,7 @@ export * from './useAbs'
 export * from './useAverage'
 export * from './useCeil'
 export * from './useClamp'
+export * from './useToFixed'
 export * from './useFloor'
 export * from './useMath'
 export * from './useMax'

packages/math/useToFixed/demo.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useToFixed } from '@vueuse/math'
+import type { FixedTypes } from '@vueuse/math'
+const num = ref(314.15926)
+const digits = ref(2)
+const options = ref({
+  type: 'number',
+  math: 'round',
+} as FixedTypes)
+const value = useToFixed(num, digits, options)
+</script>
+
+<template>
+  <br>
+  input:
+  <input v-model="num" type="number">
+  digits:
+  <div>
+    <button @click="digits--">
+      -
+    </button>
+    {{ digits }}
+    <button @click="digits++">
+      +
+    </button>
+  </div>
+  type:
+  <div>
+    <button @click="options.type = 'string'">
+      string
+    </button>
+    <button @click="options.type = 'number'">
+      number
+    </button>
+  </div>
+  math:
+  <div>
+    <button @click="options.math = 'round'">
+      round
+    </button>
+    <button @click="options.math = 'floor'">
+      floor
+    </button>
+    <button @click="options.math = 'ceil'">
+      ceil
+    </button>
+  </div>
+  value:{{ value }}
+  <br>
+  typeof value:{{ typeof value }}
+</template>

packages/math/useToFixed/index.md

@@ -0,0 +1,28 @@
+---
+category: '@Math'
+---
+
+# useToFixed
+
+Reactive `toFixed`.
+
+## Usage
+
+```ts
+import { useToFixed } from '@vueuse/math'
+
+const value = ref(3.1415)
+const result = useToFixed(value, 2) // 3.14
+
+const stringResult = useToFixed(value, 5, {
+  type: 'string'
+}) // '3.14150'
+
+const ceilResult = useToFixed(value, 2, {
+  math: 'ceil'
+}) // 3.15
+
+const floorResult = useToFixed(value, 3, {
+  math: 'floor'
+}) // 3.141
+```

packages/math/useToFixed/index.test.ts

@@ -0,0 +1,43 @@
+import { ref } from 'vue-demi'
+import { useToFixed } from '.'
+
+describe('useToFixed', () => {
+  it('should be defined', () => {
+    expect(useToFixed).toBeDefined()
+  })
+  it('should work', () => {
+    const base = ref(45.125)
+    const result = useToFixed(base, 2)
+    expect(result.value).toBe(45.13)
+    base.value = -45.155
+    expect(result.value).toBe(-45.15)
+  })
+  it('input string should work', () => {
+    const base = ref('45.125')
+    const result = useToFixed(base, 2)
+    expect(result.value).toBe(45.13)
+    base.value = '-45.155'
+    expect(result.value).toBe(-45.15)
+  })
+  it('out string should work', () => {
+    const base = ref('45.125')
+    const result = useToFixed(base, 3, { type: 'string' })
+    expect(result.value).toMatchInlineSnapshot('"45.125"')
+    base.value = '-45.15'
+    expect(result.value).toMatchInlineSnapshot('"-45.150"')
+  })
+  it('out ceil should work', () => {
+    const base = ref('45.121')
+    const result = useToFixed(base, 2, { math: 'ceil' })
+    expect(result.value).toMatchInlineSnapshot('45.13')
+    base.value = '-45.151'
+    expect(result.value).toMatchInlineSnapshot('-45.15')
+  })
+  it('out floor should work', () => {
+    const base = ref('45.129')
+    const result = useToFixed(base, 2, { math: 'floor' })
+    expect(result.value).toMatchInlineSnapshot('45.12')
+    base.value = '-45.159'
+    expect(result.value).toMatchInlineSnapshot('-45.16')
+  })
+})

packages/math/useToFixed/index.ts

@@ -0,0 +1,30 @@
+import type { ComputedRef } from 'vue-demi'
+import { computed } from 'vue-demi'
+import type { MaybeComputedRef } from '@vueuse/shared'
+import { resolveUnref } from '@vueuse/shared'
+
+/**
+ * Reactive `toFixed`
+ *
+ * @see https://vueuse.org/useToFixed
+ */
+export interface FixedTypes {
+  type?: 'string' | 'number'
+  math?: 'floor' | 'ceil' | 'round'
+}
+
+export function useToFixed(
+  value: MaybeComputedRef<number | string>,
+  digits: MaybeComputedRef<number>,
+  options?: MaybeComputedRef<FixedTypes>,
+): ComputedRef<number | string> {
+  return computed<number | string>(() => {
+    const floatValue = parseFloat(`${resolveUnref(value)}`)
+    const outValue = Math[resolveUnref(options)?.math || 'round'](floatValue * 10 ** resolveUnref(digits)) / 10 ** resolveUnref(digits)
+    return resolveUnref(options)?.type === 'string'
+      ? resolveUnref(digits) >= 0
+        ? outValue.toFixed(resolveUnref(digits))
+        : `${outValue}`
+      : outValue
+  })
+}