r-util-js/packages/vue3/src/hooks/utils/index.ts

import { getValueOfRule } from "@r-utils/common";
import { ref, computed, toRef } from "vue";
import type { InputOptions, InputValue } from "@r-utils/common";
import type { Ref } from "vue";

/**
 * 倒计时工具
 * @param initTime 初始时间，秒
 */
export function useTimer(initTime = 0) {
  const time = ref(initTime);
  const timeInterval = ref<ReturnType<typeof setInterval>>();

  const start = () => {
    timeInterval.value = setInterval(() => {
      if (time.value <= 0) {
        clearInterval(timeInterval.value);
        return;
      }

      time.value--;
    }, 1000);
  };

  const restart = () => {
    time.value = initTime;
    start();
  };

  const stop = () => {
    time.value = 0;
    clearInterval(timeInterval.value);
  };

  return { time, start, restart, timeInterval, stop };
}

type UseNumberSetFn = (v: string | number) => string | number;
const defaultUseNumberSetFn: UseNumberSetFn = (v: string | number) => String(v);

/**
 * 把响应式变量转为数字输出
 * @param value 要监听的值
 * @param setFn 在监听值改变时，处理函数
 */
export function useNumber(
  value: Ref<string | number>,
  setFn: UseNumberSetFn = defaultUseNumberSetFn,
) {
  const int = computed<number>({
    // 总是返回整数
    get: () => Number.parseInt(String(value.value)),
    set: (v) => {
      value.value = setFn(v);
    },
  });

  const float = computed<number>({
    // 总是返回 float
    get: () => Number.parseFloat(String(value.value)),
    set: (v) => {
      value.value = setFn(v);
    },
  });

  const number = computed<number>({
    // 总是返回 Number
    get: () => Number(value.value),
    set: (v) => {
      value.value = setFn(v);
    },
  });

  return { number, int, float };
}

/**
 * 监听一个响应式变量，转为字符串输出
 * @param value 要监听的值
 */
export function useString(value: Ref<string | number>) {
  const string = computed<string>({
    get: () => String(value.value),
    set: (v) => {
      value.value = v;
    },
  });

  return { string };
}

interface UseValueOfRuleOptions {
  value: InputValue | Ref<InputValue>;
  rule: InputOptions;
}

/**
 * 按自定义规则转换数字或文本
 * @param options
 */
export function useValueOfRule(options: UseValueOfRuleOptions) {
  const value = toRef(options.value);
  const rule = toRef(options.rule);

  function handleChange() {
    const newValue = getValueOfRule(value.value, rule.value);
    value.value = newValue;
  }

  return {
    value,
    rule,
    handleChange,
  };
}