srcdev-nuxt-forms 0.2.0 → 1.0.0

package/composables/useApiRequest.ts

@@ -0,0 +1,25 @@
+class CustomError extends Error {
+  // name = "CustomError";
+  override name = 'CustomError';
+  extraProp = 'Error: test';
+}
+
+async function useApiRequest<T, E extends new (message?: string) => Error>(promise: Promise<T>, errorsToCatch?: E[]): Promise<[undefined, T] | [InstanceType<E>]> {
+  return promise
+    .then((data) => {
+      return [undefined, data] as [undefined, T];
+    })
+    .catch((error) => {
+      if (errorsToCatch == undefined) {
+        return [error];
+      }
+
+      if (errorsToCatch.some((errorType) => error instanceof errorType)) {
+        return [error];
+      }
+
+      throw error;
+    });
+}
+
+export default useApiRequest;

package/composables/useFormControl.ts

@@ -47,6 +47,8 @@ export function useFormControl(name: string = '') {
   };
 
   const updatePreviousValues = () => {
+    console.log(`useFormControl | updatePreviousValues`);
+
     Object.keys(formData.value.data).forEach((key) => {
       formData.value.formFieldsC12[key].previousValue = formData.value.data[key];
     });

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,10 +4,13 @@
       <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/buttons">Buttons</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>
@@ -16,9 +19,7 @@
       <slot name="layout-content"></slot>
     </div>
 
-    <div>
-      <h1>Footer</h1>
-    </div>
+    <NavFooter />
   </div>
 </template>
 
@@ -28,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>
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "srcdev-nuxt-forms",
   "type": "module",
-  "version": "0.2.0",
+  "version": "1.0.0",
   "main": "./nuxt.config.ts",
   "scripts": {
     "reinstall": "rm -rf node_modules && npm install",
@@ -14,13 +14,17 @@
     "release": "release-it"
   },
   "devDependencies": {
-    "@iconify-json/material-symbols": "^1.1.88",
-    "@iconify-json/radix-icons": "^1.1.15",
-    "@nuxt/eslint-config": "^0.5.0",
-    "@nuxt/icon": "^1.4.5",
-    "eslint": "^9.9.0",
-    "nuxt": "^3.12.4",
-    "release-it": "^17.6.0",
-    "typescript": "^5.5.4"
+    "@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/material/cssbattle.vue

@@ -0,0 +1,60 @@
+<template>
+  <div>
+    <i a></i>
+    <i b></i>
+    <i c></i>
+  </div>
+</template>
+<script setup lang="ts">
+definePageMeta({
+  layout: false,
+});
+
+useHead({
+  title: 'CSS Battle',
+  meta: [{ name: 'description', content: 'CSS Battle' }],
+  bodyAttrs: {
+    class: '',
+  },
+});
+</script>
+
+<style scoped lang="css">
+html * {
+  margin: 0;
+  padding: 0;
+}
+div {
+  height: 300px;
+  width: 400px;
+  background: #0b2429;
+  display: grid;
+  grid-template-areas: stack;
+  place-content: center;
+
+  i {
+    grid-area: stack;
+    margin: auto;
+  }
+
+  i[a] {
+    background: #998235;
+    height: 300px;
+    width: 90px;
+  }
+
+  i[b] {
+    background: #0b2429;
+    height: 130px;
+    width: 100%;
+  }
+
+  i[c] {
+    background: #f3ac3c;
+    height: 90px;
+    width: 130px;
+    border-radius: 50px;
+    outline: 10px solid #0b2429;
+  }
+}
+</style>