srcdev-nuxt-forms 3.0.0 → 4.0.0

package/composables/useZodValidation.ts

@@ -0,0 +1,148 @@
+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/nuxt.config.ts

@@ -1,9 +1,6 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 
 export default defineNuxtConfig({
-  future: {
-    compatibilityVersion: 4,
-  },
   devtools: { enabled: true },
   css: ['modern-normalize', './assets/styles/main.css'],
   modules: ['@nuxt/icon', '@nuxt/test-utils/module'],

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "srcdev-nuxt-forms",
   "type": "module",
-  "version": "3.0.0",
+  "version": "4.0.0",
   "main": "nuxt.config.ts",
   "scripts": {
     "clean": "rm -rf .nuxt && rm -rf .output && rm -rf .playground/.nuxt && rm -rf .playground/.output",

package/types/types.forms.ts

@@ -0,0 +1,216 @@
+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

@@ -0,0 +1,21 @@
+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;
+}