srcdev-nuxt-forms 0.0.13 → 0.0.15

package/composables/useErrorMessages.ts

@@ -0,0 +1,47 @@
+import type { IFormData } from "@/types/types.forms";
+
+export function useErrorMessage(name: string, formData: Ref<IFormData>) {
+  const defaultError = ref("");
+  const customErrorMessages = ref(toRaw(formData.value.customErrorMessages));
+
+  const hasCustomError = () => {
+    return customErrorMessages.value[name] !== undefined && customErrorMessages.value[name].useCustomError;
+  };
+
+  const errorMessage = computed(() => {
+    if (hasCustomError()) {
+      return customErrorMessages.value[name].message;
+    } else {
+      return defaultError.value;
+    }
+  });
+
+  const setDefaultError = (newDefaultError: string) => {
+    defaultError.value = newDefaultError;
+  };
+
+  const fieldHasError = computed(() => {
+    if (formData.value.isPending) {
+      if (hasCustomError()) {
+        return true;
+      } else if (Object.keys(formData.value.validityState).length > 0 && formData.value.validityState[name] !== undefined) {
+        return !formData.value.validityState[name];
+      }
+      return false;
+    }
+  });
+
+  const removeCustomError = (valid: boolean = false) => {
+    formData.value.validityState[name] = valid;
+    // await nextTick();
+    delete formData.value.customErrorMessages[name];
+  };
+
+  return {
+    hasCustomError,
+    errorMessage,
+    setDefaultError,
+    fieldHasError,
+    removeCustomError
+  };
+}

package/composables/useFormControl.ts

@@ -0,0 +1,116 @@
+import type { IFormData, IFieldsInitialState, ICustomErrorMessage, ICustomErrorMessagesArr } from "@/types/types.forms";
+
+export function useFormControl(fieldsInitialState: IFieldsInitialState | Ref<IFieldsInitialState | null>) {
+  let savedInitialState = {};
+
+  const formData = ref<IFormData>({
+    data: {} as IFieldsInitialState,
+    validityState: {},
+    isPending: false,
+    errorCount: 0,
+    customErrorMessages: {},
+    hasCustomErrorMessages: false,
+    formIsValid: false,
+    showErrors: false,
+    submitSuccess: false
+  });
+
+  const initValidationState = async () => {
+    const fields = Object.keys(fieldsInitialState.value || {});
+    const state = fields.reduce((acc, field) => {
+      acc[field] = false;
+      return acc;
+    }, {} as Record<string, boolean>);
+    formData.value.validityState = state;
+  };
+
+  const initFormData = async () => {
+    await initValidationState();
+
+    if (fieldsInitialState !== null) {
+      savedInitialState = toRaw(fieldsInitialState.value) as IFieldsInitialState;
+      formData.value.data = fieldsInitialState as IFieldsInitialState;
+    }
+    return;
+  };
+
+  const getErrorCount = async () => {
+    await nextTick();
+
+    const errorCount = Object.values(formData.value.validityState).filter((value) => !value).length;
+    formData.value.errorCount = errorCount;
+    formData.value.formIsValid = errorCount === 0;
+    return formData.value.errorCount;
+  };
+
+  // Function to count items with "useCustomError" set to true
+  const countItemsWithCustomError = (obj: ICustomErrorMessagesArr) => {
+    let count = 0;
+
+    for (const key in obj) {
+      if (obj.hasOwnProperty(key) && obj[key].useCustomError === true) {
+        count++;
+      }
+    }
+
+    return count;
+  };
+
+  /*
+   *   Useage:
+   *
+   *   const { updateCustomErrors } = useFormControl();
+   *
+   *   Add/Update entry
+   *   const sampleCustomErrorEmail = {
+   *     useCustomError: true,
+   *     message: "This is a sample custom error for error EMAIL",
+   *   };
+   *   updateCustomErrors("email", sampleCustomErrorEmail);
+   */
+  const updateCustomErrors = (name: string, message: null | string = null, valid: boolean = false) => {
+    if (message !== null) {
+      formData.value.validityState[name] = valid;
+      formData.value.customErrorMessages[name] = {
+        useCustomError: true,
+        message
+      };
+    }
+    formData.value.hasCustomErrorMessages = countItemsWithCustomError(formData.value.customErrorMessages) > 0;
+  };
+
+  const resetForm = () => {
+    formData.value.data = toRaw(fieldsInitialState.value) as IFieldsInitialState;
+    formData.value.validityState = {};
+    formData.value.errorCount = 0;
+    formData.value.isPending = false;
+    formData.value.customErrorMessages = {};
+    formData.value.formIsValid = false;
+  };
+
+  const showErrors = computed(() => {
+    return formData.value.errorCount > 0 && formData.value.isPending;
+  });
+
+  const formIsValid = computed(() => {
+    return formData.value.errorCount === 0;
+  });
+
+  // Keep an eye on this for performance issue
+  watch(
+    () => formData.value.validityState,
+    () => {
+      getErrorCount();
+    },
+    { deep: true }
+  );
+
+  // watch(
+  //   () => savedInitialState,
+  //   () => {
+  //     console.log("savedInitialState UPDATED", savedInitialState);
+  //   }
+  // );
+
+  return { formData, initFormData, getErrorCount, updateCustomErrors, resetForm, showErrors, formIsValid };
+}

package/composables/useSleep.ts

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

package/nuxt.config.ts

@@ -8,7 +8,7 @@ export default defineNuxtConfig({
   components: [
     {
       path: '~/components',
-      pathPrefix: false,
+      pathPrefix: true,
     },
   ],
 })

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "srcdev-nuxt-forms",
   "type": "module",
-  "version": "0.0.13",
+  "version": "0.0.15",
   "main": "./nuxt.config.ts",
   "scripts": {
     "dev": "nuxi dev",

package/pages/index.vue

@@ -5,19 +5,19 @@
         <div>
           <h1>Sample form page</h1>
 
-          <FormWrapper width="medium">
+          <FormsUiFormWrapper width="medium">
             <template #default>
               <form>
                 <p>Form content</p>
-                <FormField width="wide" :has-gutter="true">
+                <FormsUiField width="wide" :has-gutter="true">
                   <template #default>
                     <p>Input text</p>
-                    <InputText />
+                    <FormsInputTextCore />
                   </template>
-                </FormField>
+                </FormsUiField>
               </form>
             </template>
-          </FormWrapper>
+          </FormsUiFormWrapper>
         </div>
       </template>
     </NuxtLayout>

package/types/types.forms.ts

@@ -0,0 +1,76 @@
+export interface IValidationPatterns {
+  pattern: string;
+  minlength: string;
+  maxlength: string;
+  hint: string;
+}
+
+export interface IOptionsConfig {
+  id: string;
+  name: string;
+  value: string;
+  label: string;
+}
+
+export interface IOptionsValueArr {
+  [key: string]: string | boolean | number | URL | object;
+}
+
+export interface IFieldsInitialState {
+  [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 IValidityStateArrShort {
+  [key: string]: boolean;
+}
+
+export interface ICustomErrorMessage {
+  useCustomError: boolean;
+  message: string;
+}
+
+export interface ICustomErrorMessagesArr {
+  [x: string]: ICustomErrorMessage;
+}
+
+export interface IFormData {
+  [x: string]: string | boolean | number | URL | object;
+  data: IFieldsInitialState;
+  validityState: IValidityStateArrShort;
+  isPending: boolean;
+  errorCount: number;
+  customErrorMessages: ICustomErrorMessagesArr;
+  formIsValid: boolean;
+  showErrors: boolean;
+  submitSuccess: boolean;
+}