srcdev-nuxt-forms 2.4.24 → 3.0.0

package/composables/useZodValidation.ts

@@ -1,148 +0,0 @@
-import { ref, reactive, toRaw, type Ref } from 'vue';
-import { z, ZodError } from 'zod';
-import type { ApiErrorResponse } from '../types/types.forms';
-
-const useZodValidation = (formSchema: any, formRef: Ref<HTMLFormElement | null>) => {
-  const zodFormControl = reactive({
-    errorCount: 0,
-    displayLoader: false,
-    submitDisabled: false,
-    submitAttempted: false,
-    submitSuccessful: false,
-    formIsValid: false,
-    isPending: false,
-    isDisabled: false,
-    previousState: {} as Record<string, any>,
-  });
-
-  type formSchema = z.infer<typeof formSchema>;
-  const zodErrorObj = ref<z.ZodFormattedError<formSchema> | null>(null);
-
-  const resetPreviousValues = () => {
-    for (const [field] of Object.entries(formSchema.shape)) {
-      const previousValue = {
-        value: null,
-        message: '',
-      };
-
-      zodFormControl.previousState[field] = previousValue;
-    }
-  };
-
-  const initZodForm = () => {
-    resetPreviousValues();
-  };
-
-  const getErrorCount = (zodErrorObj: Ref<z.ZodFormattedError<formSchema> | null>) => {
-    const zodCountErrors = zodErrorObj.value ?? [];
-    // @ts-ignore
-    delete zodCountErrors._errors;
-    const errorCount = Object.keys(zodCountErrors ?? []).length;
-    return errorCount;
-  };
-
-  const transformErrorMessages = (errors: any) => {
-    const apiErrors = ref({}) as any;
-    for (const [key, value] of Object.entries(errors)) {
-      const fieldPath = key.split('.').map((key: string) => key.charAt(0).toLowerCase() + key.slice(1));
-      apiErrors.value[fieldPath.join('.')] = value;
-    }
-
-    return apiErrors.value;
-  };
-
-  const updatePreviousValue = async (field: string, message: string, state: Record<string, any>) => {
-    const previousValue = {
-      value: state[field],
-      message: message,
-    };
-    zodFormControl.previousState[field] = previousValue;
-  };
-
-  const pushCustomErrors = async (apiErrorResponse: ApiErrorResponse, state: Record<string, any>) => {
-    const apiErrors = transformErrorMessages(apiErrorResponse.data.errors);
-
-    // 1: Create a ZodError object to hold the issues
-    const zodError = new ZodError([]);
-
-    // 2: Reset previous state values
-    resetPreviousValues();
-
-    // 3: Add issues to the ZodError object
-    for (const [path, message] of Object.entries(apiErrors)) {
-      zodError.addIssue({
-        path: path.split('.'),
-        message: message as string,
-        code: z.ZodIssueCode.custom,
-      });
-      await updatePreviousValue(path, message as string, state);
-    }
-
-    zodErrorObj.value = zodError.format();
-    zodFormControl.errorCount = getErrorCount(zodErrorObj);
-    zodFormControl.formIsValid = zodFormControl.errorCount === 0;
-    zodFormControl.displayLoader = false;
-    zodFormControl.submitAttempted = true;
-    scrollToFirstError();
-    return zodErrorObj.value;
-  };
-
-  const doZodValidate = async (state: Record<string, any>) => {
-    const valid = formSchema.safeParse(toRaw(state));
-    if (!valid.success) {
-      zodErrorObj.value = valid.error.format();
-    } else {
-      zodErrorObj.value = null;
-    }
-
-    zodFormControl.errorCount = getErrorCount(zodErrorObj);
-    zodFormControl.formIsValid = valid.success;
-
-    return valid.success;
-  };
-
-  const fieldMaxLength = (name: string) => {
-    const fieldSchema = formSchema.shape[name];
-    if (fieldSchema instanceof z.ZodString) {
-      return fieldSchema._def.checks.find((check) => check.kind === 'max')?.value;
-    }
-  };
-
-  const scrollToFirstError = async () => {
-    if (formRef.value) {
-      const firstErrorElement = formRef.value.querySelector('[aria-invalid=true]');
-
-      if (firstErrorElement) {
-        window.scrollTo({
-          top: firstErrorElement?.getBoundingClientRect().y + window.scrollY,
-          left: 0,
-          behavior: 'smooth',
-        });
-      }
-    }
-  };
-
-  const scrollToFormHead = () => {
-    if (formRef.value) {
-      const formHead = formRef.value.getBoundingClientRect().top;
-      window.scrollTo({
-        top: formHead,
-        left: 0,
-        behavior: 'smooth',
-      });
-    }
-  };
-
-  return {
-    initZodForm,
-    zodFormControl,
-    zodErrorObj,
-    pushCustomErrors,
-    doZodValidate,
-    fieldMaxLength,
-    scrollToFirstError,
-    scrollToFormHead,
-  };
-};
-
-export default useZodValidation;

package/types/types.forms.ts

@@ -1,216 +0,0 @@
-export interface IValidationPatterns {
-  pattern: string;
-  minlength: string;
-  maxlength: string;
-  hint: string;
-}
-
-export interface IOptionsConfig {
-  id: string;
-  name: string;
-  value: string;
-  label: string;
-}
-
-export interface IFormMultipleOptions {
-  data: IOptionsConfig[];
-  total: number;
-  skip: number;
-  limit: number;
-}
-
-export interface IOptionsValueArr {
-  [key: string]: string | boolean | number | URL | object;
-}
-
-export interface IFieldsInitialState {
-  [key: string]: null | string | boolean | number | URL | object | IOptionsValueArr[];
-}
-
-export type TFieldsInitialState = {
-  [key: string]: null | string | boolean | number | URL | object | IOptionsValueArr[];
-};
-
-export interface IValidityState {
-  badInput: boolean;
-  customError: boolean;
-  patternMismatch: boolean;
-  rangeOverflow: boolean;
-  rangeUnderflow: boolean;
-  stepMismatch: boolean;
-  tooLong: boolean;
-  tooShort: boolean;
-  typeMismatch: boolean;
-  valid: boolean;
-  valueMissing: boolean;
-}
-
-export interface IValidityStateArr {
-  [key: string]: {
-    badInput: boolean;
-    customError: boolean;
-    patternMismatch: boolean;
-    rangeOverflow: boolean;
-    rangeUnderflow: boolean;
-    stepMismatch: boolean;
-    tooLong: boolean;
-    tooShort: boolean;
-    typeMismatch: boolean;
-    valid: boolean;
-    valueMissing: boolean;
-  };
-}
-
-export interface IFormFieldsState {
-  [key: string]: boolean;
-}
-
-export interface ICustomErrorMessage {
-  useCustomError: boolean;
-  message: string;
-}
-
-export interface InpuTextC12 {
-  label: string;
-  placeholder: string;
-  errorMessage: string;
-}
-
-export interface IErrorMessagesArr {
-  [x: string]: ICustomErrorMessage;
-}
-
-export interface IFormFieldC12 {
-  label: string;
-  placeholder: string;
-  errorMessage: string;
-  useCustomError: boolean;
-  customErrors: null | string | string[];
-  isValid: boolean;
-  isDirty: boolean;
-  type: string;
-  previousValue: null | string | boolean | number | URL | object;
-}
-
-export interface IFormFieldsC12 {
-  [x: string]: IFormFieldC12;
-}
-
-export interface IFormFieldState {
-  isValid: boolean;
-  isDirty: boolean;
-  previousValue: null | string | boolean | number | URL | object;
-}
-
-export interface IFormFieldStateObj {
-  [x: string]: IFormFieldState;
-}
-
-export interface IFormData {
-  [x: string]: string | boolean | number | URL | object;
-  data: IFieldsInitialState;
-  validityState: IFormFieldsState;
-  dirtyFields: IFormFieldsState;
-  focusedField: string;
-  isPending: boolean;
-  errorCount: number;
-  errorMessages: IErrorMessagesArr;
-  formFieldsC12: IFormFieldsC12;
-  formIsValid: boolean;
-  submitAttempted: boolean;
-  submitDisabled: boolean;
-  submitSuccess: boolean;
-  displayErrorMessages: boolean;
-}
-
-export interface IApiErrorMessages {
-  [x: string]: string;
-}
-
-// New types
-
-export interface C12nInputText {
-  type: string;
-  id: string;
-  name: string;
-  label: string;
-  placeholder: string;
-  errorMessage: string;
-  fieldHasError: boolean;
-  required: boolean;
-  styleClassPassthrough: string[];
-}
-
-export interface C12nMultipleCheckboxes {
-  id: string;
-  name: string;
-  label: string;
-  legend: string;
-  placeholder: string;
-  errorMessage: string;
-  fieldHasError: boolean;
-  required: boolean;
-  styleClassPassthrough: string[];
-}
-
-export interface C12nInputCheckboxWithLabel {
-  id: string;
-  name: string;
-  required: string;
-  label: string;
-  placeholder: string;
-  errorMessage: string | string[];
-  fieldHasError: boolean;
-  styleClassPassthrough: string[];
-}
-
-export interface C12nInputRange {
-  id: string;
-  name: string;
-  label: string;
-  min: number;
-  max: number;
-  step: number;
-  placeholder: string;
-  errorMessage: string;
-  fieldHasError: boolean;
-  required: boolean;
-  styleClassPassthrough: string[];
-}
-
-export interface C12nInputTextCore {
-  type: string;
-  id: string;
-  name: string;
-  label: string;
-  placeholder: string;
-  errorMessage: string;
-  fieldHasError: boolean;
-  required: boolean;
-}
-
-export interface InputTextWithLabel {
-  type: string;
-  id: string;
-  name: string;
-  label: string;
-  placeholder: string;
-  errorMessage: string;
-  fieldHasError: boolean;
-  required: boolean;
-  styleClassPassthrough: string[];
-  deepCssClassPassthrough: string[];
-}
-
-export interface ApiErrorResponse {
-  url: string;
-  statusCode: number;
-  statusMessage: string;
-  message: string;
-  stack: string;
-  data: {
-    errors: {
-      [key: string]: string | string[]; // Index signature for dynamic keys
-    };
-  };
-}

package/types/types.zodFormControl.ts

@@ -1,21 +0,0 @@
-import type { IFieldsInitialState, IFormFieldsState, IFormFieldsC12, IFormFieldC12, IApiErrorMessages, ICustomErrorMessage, IErrorMessagesArr } from '@/types/types.forms';
-
-export interface IZodeFormControl {
-  [x: string]: string | boolean | number | URL | object;
-  data: IFieldsInitialState;
-  validityState: IFormFieldsState;
-  dirtyFields: IFormFieldsState;
-  focusedField: string;
-  isDisabled: boolean;
-  isPending: boolean;
-  errorCount: number;
-  errorMessages: IErrorMessagesArr;
-  formFieldsC12: IFormFieldsC12;
-  formIsValid: boolean;
-  submitAttempted: boolean;
-  submitDisabled: boolean;
-  submitSuccess: boolean;
-  displayErrorMessages: boolean;
-  displayLoader: boolean;
-  submitSuccessful: boolean;
-}