srcdev-nuxt-forms 0.1.0 → 1.0.0

package/composables/useFormControl.ts

@@ -1,6 +1,8 @@
-import type { IFormData, IFieldsInitialState, ICustomErrorMessage, ICustomErrorMessagesArr } from '@/types/types.forms';
+import type { IFormData, IFieldsInitialState, IFormFieldC12, IApiErrorMessages, ICustomErrorMessage, IErrorMessagesArr } from '@/types/types.forms';
+import { formFieldC12 } from '@/components/forms/c12/utils';
 
-export function useFormControl(fieldsInitialState: IFieldsInitialState | Ref<IFieldsInitialState | null>) {
+// export function useFormControl(name: string = '') {
+export function useFormControl(name: string = '') {
   let savedInitialState = {};
 
   const formData = ref<IFormData>({
@@ -10,24 +12,27 @@ export function useFormControl(fieldsInitialState: IFieldsInitialState | Ref<IFi
     focusedField: '',
     isPending: false,
     errorCount: 0,
-    customErrorMessages: {},
+    errorMessages: {},
+    formFieldsC12: {},
     hasCustomErrorMessages: false,
     formIsValid: false,
-    submitSuccess: false,
+    submitAttempted: false,
     submitDisabled: false,
+    submitSuccess: false,
+    displayErrorMessages: false,
   });
 
-  const initValidationState = async () => {
+  const initValidationState = async (fieldsInitialState: IFieldsInitialState | Ref<IFieldsInitialState | null>) => {
     const fields = Object.keys(fieldsInitialState.value || {});
-    const state = fields.reduce((acc, field) => {
-      acc[field] = false;
-      return acc;
+    const state = fields.reduce((accumulatedFields, field) => {
+      accumulatedFields[field] = false;
+      return accumulatedFields;
     }, {} as Record<string, boolean>);
     formData.value.validityState = state;
   };
 
-  const initFormData = async () => {
-    await initValidationState();
+  const initFormData = async (fieldsInitialState: IFieldsInitialState | Ref<IFieldsInitialState | null>) => {
+    initValidationState(fieldsInitialState);
 
     if (fieldsInitialState !== null) {
       savedInitialState = toRaw(fieldsInitialState.value) as IFieldsInitialState;
@@ -36,6 +41,19 @@ export function useFormControl(fieldsInitialState: IFieldsInitialState | Ref<IFi
     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();
 
@@ -45,17 +63,26 @@ export function useFormControl(fieldsInitialState: IFieldsInitialState | Ref<IFi
 
     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: ICustomErrorMessagesArr) => {
+  const countItemsWithCustomError = (obj: IErrorMessagesArr) => {
     let count = 0;
 
     for (const key in obj) {
@@ -70,37 +97,100 @@ export function useFormControl(fieldsInitialState: IFieldsInitialState | Ref<IFi
   /*
    *   Useage:
    *
-   *   const { updateCustomErrors } = useFormControl();
+   *   const { updateErrorMessages } = useFormControl();
    *
    *   Add/Update entry
    *   const sampleCustomErrorEmail = {
    *     useCustomError: true,
    *     message: "This is a sample custom error for error EMAIL",
    *   };
-   *   updateCustomErrors("email", sampleCustomErrorEmail);
+   *   updateErrorMessages("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,
-      };
+  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.customErrorMessages) > 0;
+    formData.value.hasCustomErrorMessages = countItemsWithCustomError(formData.value.errorMessages) > 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 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.errorCount === 0;
+    return formData.value.formIsValid;
   });
 
   const submitDisabled = computed(() => {
@@ -109,9 +199,12 @@ export function useFormControl(fieldsInitialState: IFieldsInitialState | Ref<IFi
 
   // Keep an eye on this for performance issue
 
-  watchEffect(() => {
-    console.log('watchEffect: formData.value', formData.value.validityState);
-  });
+  // 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,
@@ -121,16 +214,35 @@ export function useFormControl(fieldsInitialState: IFieldsInitialState | Ref<IFi
     { deep: true }
   );
 
-  onMounted(() => {
-    initFormData();
-  });
+  watch(
+    () => formData.value.formFieldsC12,
+    () => {
+      formData.value.formFieldsC12;
+    },
+    { deep: true }
+  );
+
+  watch(
+    () => formData.value.isPending,
+    (newValue, oldValue) => {
+      if (newValue) {
+        updatePreviousValues();
+      }
+    }
+  );
 
   return {
     formData,
+    initFormData,
+    initFormFieldsC12,
     getErrorCount,
-    updateCustomErrors,
-    resetForm,
+    updateErrorMessages,
+    // resetForm,
     formIsValid,
     submitDisabled,
+    useApiErrors,
+    // fieldHasError,
+    fieldIsDirty,
+    // updateFieldValidity,
   };
 }

package/composables/useSleep.ts

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

package/composables/useStyleClassPassthrough.ts

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

@@ -0,0 +1,120 @@
+import { z, ZodError } from 'zod';
+import type { IFormFieldStateObj, ApiErrorResponse } from '@/types/types.forms';
+
+const useZodValidation = (formSchema: any) => {
+  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;
+    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 || null;
+    }
+    return null;
+  };
+
+  return {
+    initZodForm,
+    zodFormControl,
+    zodErrorObj,
+    pushCustomErrors,
+    doZodValidate,
+    fieldMaxLength,
+  };
+};
+
+export default useZodValidation;

package/layouts/default.vue

@@ -4,31 +4,22 @@
       <h1><NuxtLink to="/">Home</NuxtLink></h1>
       <ul class="flex-group">
         <li>
-          <NuxtLink to="/forms/examples/material/text-fields"
-            >Material UI text fields</NuxtLink
-          >
+          <NuxtLink to="/typography" class="link-normal">Typography</NuxtLink>
         </li>
         <li>
-          <NuxtLink to="/forms/examples/material/text-fields-compact"
-            >Material UI text fields (compact)</NuxtLink
-          >
+          <NuxtLink to="/forms/examples/material/text-fields" class="link-normal">Material UI text fields</NuxtLink>
+        </li>
+        <li>
+          <NuxtLink to="/forms/examples/buttons" class="link-normal">Buttons</NuxtLink>
         </li>
       </ul>
     </div>
-    <h2>Buttons</h2>
-    <ul class="flex-group">
-      <li>
-        <NuxtLink to="/forms/examples/buttons">Buttons</NuxtLink>
-      </li>
-    </ul>
 
-    <div>
+    <div class="page-layout-content">
       <slot name="layout-content"></slot>
     </div>
 
-    <div>
-      <h1>Footer</h1>
-    </div>
+    <NavFooter />
   </div>
 </template>
 
@@ -38,6 +29,21 @@ useHead({
     class: 'body-default',
     id: 'body',
   },
+  // link: [
+  //   {
+  //     rel: 'preconnect',
+  //     href: 'https://fonts.googleapis.com',
+  //   },
+  //   {
+  //     rel: 'preconnect',
+  //     href: 'https://fonts.gstatic.com',
+  //     crossorigin: 'use-credentials',
+  //   },
+  //   {
+  //     href: 'https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap',
+  //     rel: 'stylesheet',
+  //   },
+  // ],
 });
 </script>
 
@@ -47,6 +53,10 @@ useHead({
   grid-template-rows: auto 1fr auto;
 }
 
+.page-layout-content {
+  container: content / inline-size;
+}
+
 .flex-group {
   align-items: flex-start;
   display: flex;

package/nuxt.config.ts

@@ -4,7 +4,26 @@ const { resolve } = createResolver(import.meta.url);
 
 export default defineNuxtConfig({
   devtools: { enabled: true },
+
+  app: {
+    head: {
+      htmlAttrs: {
+        lang: 'en',
+      },
+      titleTemplate: '%s - Website name',
+      meta: [{ charset: 'utf-8' }, { name: 'viewport', content: 'width=device-width, initial-scale=1' }],
+    },
+    pageTransition: {
+      name: 'page',
+      mode: 'out-in',
+    },
+    layoutTransition: {
+      name: 'layout',
+      mode: 'out-in',
+    },
+  },
   css: [resolve('./assets/styles/main.css')],
+
   runtimeConfig: {
     public: {
       validatorLocale: 'en-GB',
@@ -12,10 +31,13 @@ export default defineNuxtConfig({
   },
 
   modules: ['@nuxt/icon'],
+
   components: [
     {
       path: './components',
       pathPrefix: false,
     },
   ],
+
+  compatibilityDate: '2024-07-13',
 });

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "srcdev-nuxt-forms",
   "type": "module",
-  "version": "0.1.0",
+  "version": "1.0.0",
   "main": "./nuxt.config.ts",
   "scripts": {
     "reinstall": "rm -rf node_modules && npm install",
@@ -14,12 +14,17 @@
     "release": "release-it"
   },
   "devDependencies": {
-    "@iconify-json/material-symbols": "^1.1.83",
-    "@nuxt/eslint-config": "^0.3.13",
-    "@nuxt/icon": "^1.0.0",
-    "eslint": "^9.5.0",
-    "nuxt": "^3.12.2",
-    "release-it": "^17.4.0",
-    "typescript": "^5.5.2"
+    "@iconify-json/gridicons": "1.2.1",
+    "@iconify-json/material-symbols": "1.2.5",
+    "@iconify-json/radix-icons": "1.2.1",
+    "@nuxt/eslint-config": "0.6.1",
+    "@nuxt/icon": "1.6.1",
+    "eslint": "9.13.0",
+    "nuxt": "3.13.2",
+    "release-it": "17.10.0",
+    "typescript": "5.6.3"
+  },
+  "dependencies": {
+    "zod": "3.23.8"
   }
 }

package/pages/forms/examples/buttons/index.vue

@@ -9,25 +9,25 @@
           <p>Themes switcher</p>
           <ul class="flex-group">
             <li>
-              <InputButtonSubmit @click.stop.prevent="swapTheme('primary')" :is-pending="false" button-text="Primary" theme="primary" size="normal" />
+              <InputButtonSubmit type="button" @click.stop.prevent="swapTheme('primary')" :is-pending="false" button-text="Primary" theme="primary" size="normal" />
             </li>
             <li>
-              <InputButtonSubmit @click.stop.prevent="swapTheme('secondary')" :is-pending="false" button-text="Secondary" theme="secondary" size="normal" />
+              <InputButtonSubmit type="button" @click.stop.prevent="swapTheme('secondary')" :is-pending="false" button-text="Secondary" theme="secondary" size="normal" />
             </li>
             <li>
-              <InputButtonSubmit @click.stop.prevent="swapTheme('tertiary')" :is-pending="false" button-text="Tertiary" theme="tertiary" size="normal" />
+              <InputButtonSubmit type="button" @click.stop.prevent="swapTheme('tertiary')" :is-pending="false" button-text="Tertiary" theme="tertiary" size="normal" />
             </li>
             <li>
-              <InputButtonSubmit @click.stop.prevent="swapTheme('warning')" :is-pending="false" button-text="Warning" theme="warning" size="normal" />
+              <InputButtonSubmit type="button" @click.stop.prevent="swapTheme('warning')" :is-pending="false" button-text="Warning" theme="warning" size="normal" />
             </li>
             <li>
-              <InputButtonSubmit @click.stop.prevent="swapTheme('success')" :is-pending="false" button-text="Success" theme="success" size="normal" />
+              <InputButtonSubmit type="button" @click.stop.prevent="swapTheme('success')" :is-pending="false" button-text="Success" theme="success" size="normal" />
             </li>
             <li>
-              <InputButtonSubmit @click.stop.prevent="swapTheme('error')" :is-pending="false" button-text="Error" theme="error" size="normal" />
+              <InputButtonSubmit type="button" @click.stop.prevent="swapTheme('error')" :is-pending="false" button-text="Error" theme="error" size="normal" />
             </li>
             <li>
-              <InputButtonSubmit @click.stop.prevent="swapTheme('ghost')" :is-pending="false" button-text="Ghost" theme="ghost" size="normal" />
+              <InputButtonSubmit type="button" @click.stop.prevent="swapTheme('ghost')" :is-pending="false" button-text="Ghost" theme="ghost" size="normal" />
             </li>
           </ul>
 
@@ -35,13 +35,13 @@
             <template #default>
               <form @submit.prevent="submitForm">
                 <div class="flex-group">
-                  <InputButtonSubmit @click.stop.prevent="submitForm" :is-pending="false" button-text="Submit" :theme size="x-small" />
+                  <InputButtonSubmit type="button" @click.stop.prevent="submitForm" :is-pending="false" button-text="Submit" :theme size="x-small" />
 
-                  <InputButtonSubmit @click.stop.prevent="submitForm" :is-pending="false" button-text="Submit" :theme size="small" />
+                  <InputButtonSubmit type="button" @click.stop.prevent="submitForm" :is-pending="false" button-text="Submit" :theme size="small" />
 
-                  <InputButtonSubmit @click.stop.prevent="submitForm" :is-pending="false" button-text="Submit" :theme size="normal" />
-                  <InputButtonSubmit @click.stop.prevent="submitForm" :is-pending="false" button-text="Submit" :theme size="medium" />
-                  <InputButtonSubmit @click.stop.prevent="submitForm" :is-pending="false" button-text="Submit" :theme size="large" />
+                  <InputButtonSubmit type="button" @click.stop.prevent="submitForm" :is-pending="false" button-text="Submit" :theme size="normal" />
+                  <InputButtonSubmit type="button" @click.stop.prevent="submitForm" :is-pending="false" button-text="Submit" :theme size="medium" />
+                  <InputButtonSubmit type="button" @click.stop.prevent="submitForm" :is-pending="false" button-text="Submit" :theme size="large" />
                 </div>
 
                 <div class="flex-group">
@@ -122,7 +122,8 @@ const fieldsInitialState = ref<IFieldsInitialState>({
 });
 
 // Setup formData
-const { formData, getErrorCount, updateCustomErrors, resetForm, formIsValid, submitDisabled } = useFormControl(fieldsInitialState);
+const { formData, initFormData, getErrorCount, updateErrorMessages, formIsValid, submitDisabled, useApiErrors } = useFormControl();
+await initFormData(fieldsInitialState);
 
 const submitForm = async () => {
   await getErrorCount(true);