srcdev-nuxt-forms 2.4.23 → 3.0.0

package/composables/useColourScheme.ts

@@ -1,25 +0,0 @@
-export const useColourScheme = () => {
-  const currentColourScheme = ref<'auto' | 'dark' | 'light' | null>(null);
-
-  const returnSavedColourPreferenceFromLocalStorage = () => {
-    if (import.meta.client) {
-      return localStorage.getItem('colourScheme') as 'auto' | 'dark' | 'light' | null;
-    }
-  };
-
-  onMounted(() => {
-    currentColourScheme.value = returnSavedColourPreferenceFromLocalStorage() || 'auto';
-  });
-
-  watch(currentColourScheme, (newVal) => {
-    if (import.meta.client && newVal !== null) {
-      localStorage.setItem('colourScheme', newVal);
-      document.documentElement.dataset.colorScheme = newVal;
-      currentColourScheme.value = newVal;
-    }
-  });
-
-  return {
-    currentColourScheme,
-  };
-};

package/composables/useErrorMessages.ts

@@ -1,59 +0,0 @@
-import type { IFormData } from '@/types/types.forms';
-
-export function useErrorMessage(name: string, formData: Ref<IFormData>) {
-  const defaultError = ref('');
-  const errorMessages = ref(formData.value.errorMessages);
-
-  const hasCustomError = () => {
-    return errorMessages.value[name] !== undefined && errorMessages.value[name].useCustomError;
-  };
-
-  const errorMessage = computed(() => {
-    console.log(`errorMessage()`);
-    if (hasCustomError()) {
-      console.log(`errorMessage() | IF`);
-      return errorMessages.value[name].message;
-    } else {
-      return defaultError.value;
-    }
-  });
-
-  const setDefaultError = (newDefaultError: string) => {
-    defaultError.value = newDefaultError;
-  };
-
-  const fieldHasError = computed(() => {
-    // console.log(`fieldHasError() | name(${name})`);
-    nextTick();
-    if (formData.value.submitDisabled) {
-      console.log(`fieldHasError() | name(${name}) | IF`);
-      if (hasCustomError()) {
-        console.log(`fieldHasError() | name(${name}) | IF | IF`);
-
-        return true;
-      } else if (Object.keys(formData.value.validityState).length > 0 && formData.value.validityState[name] !== undefined) {
-        console.log(`fieldHasError() | name(${name}) | IF | ELSE IF`);
-
-        return !formData.value.validityState[name];
-      }
-      console.log(`fieldHasError() | name(${name}) | IF | ELSE`);
-
-      return false;
-    }
-  });
-
-  const removeCustomError = (valid: boolean = false) => {
-    console.log(`useErrorMessage | removeCustomError | name(${name}) | valid(${valid})`);
-    // formData.value.validityState[name] = valid;
-    // await nextTick();
-    // delete formData.value.errorMessages[name];
-  };
-
-  return {
-    hasCustomError,
-    errorMessage,
-    setDefaultError,
-    fieldHasError,
-    removeCustomError,
-  };
-}

package/composables/useFormControl.ts

@@ -1,248 +0,0 @@
-import type { IFormData, IFieldsInitialState, IFormFieldC12, IApiErrorMessages, ICustomErrorMessage, IErrorMessagesArr } from '@/types/types.forms';
-import { formFieldC12 } from '@/components/forms/c12/utils';
-
-// export function useFormControl(name: string = '') {
-export function useFormControl(name: string = '') {
-  let savedInitialState = {};
-
-  const formData = ref<IFormData>({
-    data: {} as IFieldsInitialState,
-    validityState: {},
-    dirtyFields: {},
-    focusedField: '',
-    isPending: false,
-    errorCount: 0,
-    errorMessages: {},
-    formFieldsC12: {},
-    hasCustomErrorMessages: false,
-    formIsValid: false,
-    submitAttempted: false,
-    submitDisabled: false,
-    submitSuccess: false,
-    displayErrorMessages: false,
-  });
-
-  const initValidationState = async (fieldsInitialState: IFieldsInitialState | Ref<IFieldsInitialState | null>) => {
-    const fields = Object.keys(fieldsInitialState.value || {});
-    const state = fields.reduce((accumulatedFields, field) => {
-      accumulatedFields[field] = false;
-      return accumulatedFields;
-    }, {} as Record<string, boolean>);
-    formData.value.validityState = state;
-  };
-
-  const initFormData = async (fieldsInitialState: IFieldsInitialState | Ref<IFieldsInitialState | null>) => {
-    initValidationState(fieldsInitialState);
-
-    if (fieldsInitialState !== null) {
-      savedInitialState = toRaw(fieldsInitialState.value) as IFieldsInitialState;
-      formData.value.data = fieldsInitialState as IFieldsInitialState;
-    }
-    return;
-  };
-
-  const initFormFieldsC12 = (name: string, formFieldC12: IFormFieldC12) => {
-    formData.value.formFieldsC12[name] = formFieldC12;
-    return;
-  };
-
-  const updatePreviousValues = () => {
-    console.log(`useFormControl | updatePreviousValues`);
-
-    Object.keys(formData.value.data).forEach((key) => {
-      formData.value.formFieldsC12[key].previousValue = formData.value.data[key];
-    });
-  };
-
-  const getErrorCount = async (updateState: boolean = false) => {
-    await nextTick();
-
-    const errorCount = Object.values(formData.value.validityState).filter((value) => !value).length;
-    formData.value.errorCount = errorCount;
-    formData.value.formIsValid = errorCount === 0;
-
-    if (updateState) {
-      formData.value.submitDisabled = true;
-      formData.value.displayErrorMessages = formData.value.errorCount > 0;
-      formData.value.submitAttempted = true;
-    }
-
-    if (formData.value.submitDisabled) {
-      formData.value.submitDisabled = !formData.value.formIsValid;
-    }
-
-    // update fieldHasError ref
-    // if (typeof formData.value!.formFieldsC12[name] !== 'undefined') {
-    //   fieldHasError.value = formData.value!.submitAttempted && !formData.value!.formFieldsC12[name].isValid;
-    // } else {
-    //   fieldHasError.value = false;
-    // }
-
-    return formData.value.errorCount;
-  };
-
-  // Function to count items with "useCustomError" set to true
-  const countItemsWithCustomError = (obj: IErrorMessagesArr) => {
-    let count = 0;
-
-    for (const key in obj) {
-      if (obj.hasOwnProperty(key) && obj[key].useCustomError === true) {
-        count++;
-      }
-    }
-
-    return count;
-  };
-
-  /*
-   *   Useage:
-   *
-   *   const { updateErrorMessages } = useFormControl();
-   *
-   *   Add/Update entry
-   *   const sampleCustomErrorEmail = {
-   *     useCustomError: true,
-   *     message: "This is a sample custom error for error EMAIL",
-   *   };
-   *   updateErrorMessages("email", sampleCustomErrorEmail);
-   */
-  const updateErrorMessages = async (name: string, message: string = '', valid: boolean = false) => {
-    if (!valid) {
-      // formData.value.validityState[name] = valid;
-      // formData.value.errorMessages[name] = {
-      //   useCustomError: true,
-      //   message,
-      // };
-
-      formData.value.formFieldsC12[name].useCustomError = true;
-
-      // if (typeof message === 'string') {
-      //   formData.value.formFieldsC12[name].customErrors = message;
-      // } else if (typeof message === 'object') {
-      //   formData.value.formFieldsC12[name].customErrors = message;
-      // }
-
-      formData.value.formFieldsC12[name].customErrors = message;
-      formData.value.formFieldsC12[name].isValid = valid;
-
-      // formData.value.errorMessages[name].useCustomError = true;
-      // formData.value.errorMessages[name].message = message;
-    }
-    formData.value.hasCustomErrorMessages = countItemsWithCustomError(formData.value.errorMessages) > 0;
-  };
-
-  const useApiErrors = async (errors: IApiErrorMessages) => {
-    // Object.keys(errors).forEach((key) => {
-    //   updateErrorMessages(key, errors[key]);
-    // });
-
-    for (const [key, message] of Object.entries(errors)) {
-      // console.log(`${key}: ${message}`);
-      updateErrorMessages(key, message);
-    }
-  };
-
-  // const resetForm = () => {
-  //   console.log('resetForm()');
-  //   formData.value.data = toRaw(fieldsInitialState.value) as IFieldsInitialState;
-  //   formData.value.validityState = {};
-  //   formData.value.errorCount = 0;
-  //   formData.value.isPending = false;
-  //   formData.value.errorMessages = {};
-  //   formData.value.formIsValid = false;
-  // };
-
-  const fieldIsDirty = (name: string) => {
-    if (typeof formData.value.formFieldsC12[name] !== 'undefined') {
-      return formData.value.formFieldsC12[name].isDirty;
-    } else {
-      return false;
-    }
-  };
-
-  // const fieldHasError = (name: string) => {
-  //   const currentValidityState = formData.value.validityState[name];
-
-  //   if (formData.value.submitAttempted) {
-  //     return currentValidityState;
-  //   }
-  //   return false;
-  // };
-
-  // const fieldHasError = computed({
-  //   // getter
-  //   get() {
-  //     console.log(`fieldHasError getter: ${name}`);
-  //     if (typeof formData.value!.formFieldsC12[name] !== 'undefined') {
-  //       return !formData.value!.formFieldsC12[name].isValid;
-  //     }
-  //     return formData.value.validityState[name];
-  //   },
-  //   // setter
-  //   set(newValue) {
-  //     if (formData.value.submitAttempted) {
-  //       return newValue;
-  //     }
-  //     return false;
-  //   },
-  // });
-
-  // const fieldHasError = ref(false);
-
-  const formIsValid = computed(() => {
-    return formData.value.formIsValid;
-  });
-
-  const submitDisabled = computed(() => {
-    return formData.value.submitDisabled;
-  });
-
-  // Keep an eye on this for performance issue
-
-  // const updateFieldValidity = (name: string, valid: boolean) => {
-  //   console.log(`updateFieldValidity: name:${name} - valid:${valid}`);
-  //   console.log(formData.value);
-  //   // formData.value.formFieldsC12[name].isValid = valid;
-  //   formData.value.validityState[name] = valid;
-  // };
-
-  watch(
-    () => formData.value.validityState,
-    () => {
-      getErrorCount();
-    },
-    { deep: true }
-  );
-
-  watch(
-    () => formData.value.formFieldsC12,
-    () => {
-      formData.value.formFieldsC12;
-    },
-    { deep: true }
-  );
-
-  watch(
-    () => formData.value.isPending,
-    (newValue, oldValue) => {
-      if (newValue) {
-        updatePreviousValues();
-      }
-    }
-  );
-
-  return {
-    formData,
-    initFormData,
-    initFormFieldsC12,
-    getErrorCount,
-    updateErrorMessages,
-    // resetForm,
-    formIsValid,
-    submitDisabled,
-    useApiErrors,
-    // fieldHasError,
-    fieldIsDirty,
-    // updateFieldValidity,
-  };
-}

package/composables/useSleep.ts

@@ -1,5 +0,0 @@
-async function useSleep(ms: number) {
-  return new Promise((resolve) => setTimeout(resolve, ms));
-}
-
-export default useSleep;

package/composables/useStyleClassPassthrough.ts

@@ -1,30 +0,0 @@
-export const useStyleClassPassthrough = (styleClassPassthrough: string[]) => {
-  const styleClassPassthroughRef = ref(styleClassPassthrough);
-
-  const elementClasses = computed(() => {
-    return styleClassPassthroughRef.value.join(' ');
-  });
-
-  const updateElementClasses = (cssClass: string | string[]) => {
-    let cssClasses = [] as string[];
-    if (typeof cssClass === 'string') {
-      cssClasses = [cssClass];
-    } else if (Array.isArray(cssClass)) {
-      cssClasses = cssClass;
-    }
-
-    cssClasses.forEach((cssClass) => {
-      if (styleClassPassthroughRef.value.includes(cssClass)) {
-        styleClassPassthroughRef.value = styleClassPassthroughRef.value.filter((className) => className !== cssClass);
-      } else {
-        styleClassPassthroughRef.value.push(cssClass);
-      }
-    });
-  };
-
-  return {
-    elementClasses,
-    updateElementClasses,
-    styleClassPassthroughRef,
-  };
-};

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;