srcdev-nuxt-forms 0.0.12 → 0.0.14

package/.editorconfig

@@ -0,0 +1,12 @@
+root = true
+
+[*]
+indent_size = 2
+indent_style = space
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

package/.eslintignore

@@ -0,0 +1,7 @@
+node_modules
+dist
+.nuxt
+.output
+coverage
+components.d.ts
+nuxt.d.ts

package/.eslintrc.cjs

@@ -0,0 +1,12 @@
+module.exports = {
+  "root": true,
+  "extends": [
+    "@nuxtjs/eslint-config-typescript",
+    "plugin:prettier/recommended"
+  ],
+  "rules": {
+    "vue/multi-word-component-names": "off",
+    "vue/no-multiple-template-root": "off",
+    "@typescript-eslint/no-unused-vars": "off"
+  }
+};

package/.nuxtrc

@@ -0,0 +1 @@
+typescript.includeWorkspace = true

package/.prettierrc

@@ -0,0 +1,4 @@
+{
+    "semi": false,
+    "singleQuote": true
+  }

package/.release-it.json

@@ -0,0 +1,6 @@
+{
+  "$schema": "https://unpkg.com/release-it/schema/release-it.json",
+  "github": {
+    "release": true
+  }
+}

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

@@ -5,10 +5,10 @@ const { resolve } = createResolver(import.meta.url)
 export default defineNuxtConfig({
   devtools: { enabled: true },
   css: [resolve('./assets/styles/main.css')],
-  // components: [
-  //   {
-  //     path: '~/components',
-  //     pathPrefix: false,
-  //   },
-  // ],
+  components: [
+    {
+      path: '~/components',
+      pathPrefix: false,
+    },
+  ],
 })

package/package.json

@@ -1,15 +1,8 @@
 {
   "name": "srcdev-nuxt-forms",
   "type": "module",
-  "version": "0.0.12",
+  "version": "0.0.14",
   "main": "./nuxt.config.ts",
-  "files": [
-    "assets",
-    "components",
-    "layouts",
-    "pages",
-    "nuxt.config.ts"
-  ],
   "scripts": {
     "dev": "nuxi dev",
     "build": "nuxt build",

package/pages/index.vue

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

package/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "./.nuxt/tsconfig.json"
+}

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;
+}