feat(use-counter): create useCounter composable with example

Author: TylerAPfledderer

packages/vue-composables/examples/use-counter-increment.vue

@@ -0,0 +1,33 @@
+<template>
+  <div>
+    <pre>
+      {{
+        JSON.stringify({
+          value,
+          valueAsNumber,
+          isOutOfRange,
+        })
+      }}
+    </pre>
+    <br />
+    <button @click="increment()">Click Me to Increase!</button>
+    <br />
+    <button @click="decrement()">Click Me to Decrease!</button>
+    <br />
+    <button @click="update(4)">Update to 4!</button>
+    <br />
+    <input v-model="value" :style="{ background: 'transparent' }" />
+  </div>
+</template>
+<script setup lang="ts">
+import { useCounter } from "../index"
+
+const { increment, decrement, valueAsNumber, update, value, isOutOfRange } =
+  useCounter({
+    max: 10,
+    min: 0,
+    keepWithinRange: false,
+    precision: 4,
+    step: 0.5,
+  })
+</script>

packages/vue-composables/src/index.ts

@@ -4,3 +4,4 @@ export * from "./use-window-event"
 export * from "./use-element-stack"
 export * from "./use-clipboard"
 export * from "./use-disclosure"
+export * from "./use-counter"

packages/vue-composables/src/use-counter.ts

@@ -0,0 +1,153 @@
+import { clampValue, countDecimalPlaces, toPrecision } from "@chakra-ui/utils"
+import { computed, ref, watchEffect } from "vue"
+
+export interface UseCounterProps {
+  /**
+   * The number of decimal points used to round the value
+   */
+  precision?: number
+  /**
+   * The initial value of the counter. Should be less than `max` and greater than `min`
+   */
+  defaultValue?: string | number
+  /**
+   * The step used to increment or decrement the value
+   * @default 1
+   */
+  step?: number
+  /**
+   * The minimum value of the counter
+   * @default Number.MIN_SAFE_INTEGER
+   */
+  min?: number
+  /**
+   * The maximum value of the counter
+   * @default Number.MAX_SAFE_INTEGER
+   */
+  max?: number
+  /**
+   * This controls the value update behavior in general.
+   *
+   * - If `true` and you use the stepper or up/down arrow keys,
+   *  the value will not exceed the `max` or go lower than `min`
+   *
+   * - If `false`, the value will be allowed to go out of range.
+   *
+   * @default true
+   */
+  keepWithinRange?: boolean
+}
+
+/**
+ * Composable providing step functionality
+ */
+export function useCounter(props: UseCounterProps = {}) {
+  const {
+    precision: precisionProp,
+    defaultValue = 0,
+    step: stepProp = 1,
+    min = Number.MIN_SAFE_INTEGER,
+    max = Number.MAX_SAFE_INTEGER,
+    keepWithinRange = true,
+  } = props
+
+  const valueState = ref<string | number>(
+    (() => {
+      if (defaultValue == null) return ""
+      return cast(defaultValue, stepProp, precisionProp) ?? ""
+    })()
+  )
+
+  const decimalPlaces = ref(0)
+
+  let precision: number
+
+  const update = (next: string | number) => {
+    if (next === valueState.value) return
+    valueState.value = toPrecision(parse(next), precision).toString()
+  }
+
+  const clamp = (value: number) => {
+    let nextValue = value
+
+    if (keepWithinRange) {
+      nextValue = clampValue(nextValue, min, max)
+    }
+
+    return toPrecision(nextValue, precision)
+  }
+
+  const increment = (step: number = stepProp) => {
+    let next: string | number
+
+    /**
+     * Let's follow the native browser behavior for
+     * scenarios where the input starts empty ("")
+     */
+    if (valueState.value === "") {
+      /**
+       * If `min` is set, native input, starts at the `min`.
+       * Else, it starts at `step`
+       */
+      next = parse(step)
+    } else {
+      next = parse(valueState.value) + step
+    }
+
+    next = clamp(next)
+    update(next)
+  }
+
+  const decrement = (step = stepProp) => {
+    let next: string | number
+
+    // Follow native implementation
+    if (valueState.value === "") {
+      next = parse(-step)
+    } else {
+      next = parse(valueState.value) - step
+    }
+
+    next = clamp(next)
+    update(next)
+  }
+
+  const isOutOfRange = ref(false)
+
+  const valueAsNumber = ref(0)
+
+  watchEffect(() => {
+    decimalPlaces.value = getDecimalPlaces(parse(valueState.value), stepProp)
+
+    precision = precisionProp ?? decimalPlaces.value
+
+    valueAsNumber.value = parse(valueState.value)
+
+    isOutOfRange.value = valueAsNumber.value > max || valueAsNumber.value < min
+  })
+
+  return {
+    decrement,
+    increment,
+    update,
+    valueAsNumber,
+    isOutOfRange,
+    value: valueState,
+  }
+}
+
+function parse(value: string | number) {
+  return parseFloat(value.toString().replace(/[^\w.-]+/g, ""))
+}
+
+function getDecimalPlaces(value: number, step: number) {
+  return Math.max(countDecimalPlaces(step), countDecimalPlaces(value))
+}
+
+function cast(value: string | number, step: number, precision?: number) {
+  const parsedValue = parse(value)
+  if (Number.isNaN(parsedValue)) return undefined
+
+  const decimalPlaces = getDecimalPlaces(parsedValue, step)
+  return toPrecision(parsedValue, precision ?? decimalPlaces)
+}