src/composable/validation.ts


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

import _ from 'lodash';
import { reactive, watch, type Ref } from 'vue';

type ValidatorReturnType = unknown;

export interface UseValidationRule<T> {
  validator: (value: T) => ValidatorReturnType;
  message: string;
}

export function isFalsyOrHasThrown(cb: () => ValidatorReturnType): boolean {
  try {
    const returnValue = cb();

    if (_.isNil(returnValue)) return true;

    return returnValue === false;
  } catch (_) {
    return true;
  }
}

export type ValidationAttrs = {
  feedback: string;
  validationStatus: string | undefined;
};

export function useValidation<T>({ source, rules }: { source: Ref<T>; rules: UseValidationRule<T>[] }) {
  const state = reactive<{
    message: string;
    status: undefined | 'error';
    isValid: boolean;
    attrs: ValidationAttrs;
  }>({
    message: '',
    status: undefined,
    isValid: false,
    attrs: {
      validationStatus: undefined,
      feedback: '',
    },
  });

  watch(
    [source],
    () => {
      state.message = '';
      state.status = undefined;

      for (const rule of rules) {
        if (isFalsyOrHasThrown(() => rule.validator(source.value))) {
          state.message = rule.message;
          state.status = 'error';
        }
      }

      state.isValid = state.status !== 'error';
      state.attrs.feedback = state.message;
      state.attrs.validationStatus = state.status;
    },
    { immediate: true },
  );

  return state;
}