srcdev-nuxt-components 8.0.2 → 9.0.0

package/app/composables/useTabs.ts

@@ -1,201 +1,291 @@
-import { useResizeObserver } from '@vueuse/core';
+import { useResizeObserver } from "@vueuse/core"
+
+const useTabs = (
+  axis: string,
+  tabsNavRef: Ref<HTMLElement | null>,
+  tabsContentRefs: Ref<HTMLElement[] | null>,
+  duration: number
+) => {
+  const navItems = ref<HTMLElement[] | null>(null)
+  const previousActiveTab = useState<HTMLElement | null>("previousActiveTab", () => null)
+  const currentActiveTab = ref<HTMLElement>()
+
+  const previousHoveredTab = ref<HTMLElement>()
+  const currentHoveredTab = ref<HTMLElement>()
+  const tagName = ref<string>()
 
-const useTabs = (axis: string, tabsNavRef: Ref<HTMLElement | null>, tabsContentRefs: Ref<HTMLElement[] | null>, duration: number) => {
-  const navItems = ref<HTMLElement[] | null>(null);
-  const previousActiveTab = useState<HTMLElement | null>('previousActiveTab', () => null);
-  const currentActiveTab = ref<HTMLElement>();
+  const initNavDecorators = () => {
+    navItems.value = tabsNavRef.value
+      ? (Array.from(tabsNavRef.value.querySelectorAll("[data-nav-item")) as HTMLElement[])
+      : []
 
-  const previousHoveredTab = ref<HTMLElement>();
-  const currentHoveredTab = ref<HTMLElement>();
-  const tagName = ref<string>();
+    if (!navItems.value || navItems.value.length === 0) {
+      return
+    }
 
-  const initNavDecorators = () => {
-    navItems.value = tabsNavRef.value ? (Array.from(tabsNavRef.value.querySelectorAll('[data-nav-item')) as HTMLElement[]) : [];
-    tagName.value = navItems.value[0].tagName.toLowerCase();
+    const firstNavItem = navItems.value[0]
+    if (!firstNavItem) return
 
-    const activeIndex = ref(0);
+    tagName.value = firstNavItem.tagName.toLowerCase()
+
+    const activeIndex = ref(0)
 
     // Temporarily set the first nav item as active
-    navItems.value[0].setAttribute('aria-selected', 'true');
+    firstNavItem.setAttribute("aria-selected", "true")
 
     // Test if navItems are hyperlinks
-    if (navItems.value[0].tagName.toLowerCase() === 'a') {
+    if (firstNavItem.tagName.toLowerCase() === "a") {
       // Find index of element with class "router-link-active"
-      activeIndex.value = navItems.value.findIndex((el) => el.classList.contains('router-link-active'));
+      activeIndex.value = navItems.value.findIndex((el) => el.classList.contains("router-link-active"))
     }
     // else {
     //  Set actve tab
     // }
 
-    currentActiveTab.value = navItems.value[activeIndex.value];
-    currentHoveredTab.value = navItems.value[activeIndex.value];
+    const activeElement = navItems.value[activeIndex.value]
+    if (!activeElement) return
+
+    currentActiveTab.value = activeElement
+    currentHoveredTab.value = activeElement
 
-    previousActiveTab.value = navItems.value[activeIndex.value];
-    previousHoveredTab.value = navItems.value[activeIndex.value];
+    previousActiveTab.value = activeElement
+    previousHoveredTab.value = activeElement
 
-    addNavDecorators();
-    setActiveTabContent();
-  };
+    addNavDecorators()
+    setActiveTabContent()
+  }
 
   const addNavDecorators = () => {
-    const elementClasses = ['nav__active-indicator', 'nav__active', 'nav__hovered'];
+    const elementClasses = ["nav__active-indicator", "nav__active", "nav__hovered"]
     if (tabsNavRef.value) {
       for (let i = 0; i < 3; i++) {
-        const div = document.createElement('div');
-        div.classList.add(elementClasses[i]);
-        tabsNavRef.value.appendChild(div);
+        const div = document.createElement("div")
+        const className = elementClasses[i]
+        if (className) {
+          div.classList.add(className)
+        }
+        tabsNavRef.value.appendChild(div)
       }
     }
-  };
+  }
 
   const navItemHovered = (event: Event) => {
-    const target = event.target as HTMLElement;
-    const newTabPosition = currentHoveredTab.value ? currentHoveredTab.value.compareDocumentPosition(target) : 0;
+    const target = event.target as HTMLElement
+    const newTabPosition = currentHoveredTab.value ? currentHoveredTab.value.compareDocumentPosition(target) : 0
 
     if (newTabPosition !== 0) {
-      previousHoveredTab.value = currentHoveredTab.value;
-      currentHoveredTab.value = target;
-      moveHoveredIndicator();
+      previousHoveredTab.value = currentHoveredTab.value
+      currentHoveredTab.value = target
+      moveHoveredIndicator()
     }
-  };
+  }
 
   const resetHoverToActivePosition = () => {
-    previousHoveredTab.value = currentHoveredTab.value;
-    currentHoveredTab.value = currentActiveTab.value;
-    moveHoveredIndicator();
-  };
+    previousHoveredTab.value = currentHoveredTab.value
+    currentHoveredTab.value = currentActiveTab.value
+    moveHoveredIndicator()
+  }
 
   const navItemClicked = (event: Event) => {
-    const target = event.target as HTMLElement;
+    const target = event.target as HTMLElement
 
-    previousActiveTab.value = currentActiveTab.value || null;
-    currentActiveTab.value = target;
+    previousActiveTab.value = currentActiveTab.value || null
+    currentActiveTab.value = target
 
     navItems.value?.forEach((tab) => {
-      tab.setAttribute('aria-selected', currentActiveTab.value === tab ? 'true' : 'false');
-    });
+      tab.setAttribute("aria-selected", currentActiveTab.value === tab ? "true" : "false")
+    })
 
-    moveActiveIndicator();
-    setActiveTabContent();
-  };
+    moveActiveIndicator()
+    setActiveTabContent()
+  }
 
   const handleTransitioningClass = (transitionDuration: number = 200) => {
-    if (previousHoveredTab.value && currentHoveredTab.value) {
-      const newTabPosition = previousHoveredTab.value.compareDocumentPosition(currentHoveredTab.value);
-      const navItemsArray = navItems.value || [];
+    if (previousHoveredTab.value && currentHoveredTab.value && navItems.value) {
+      const newTabPosition = previousHoveredTab.value.compareDocumentPosition(currentHoveredTab.value)
+      const navItemsArray = navItems.value
 
-      const timeout = Math.floor(transitionDuration / Math.abs(navItemsArray.indexOf(currentHoveredTab.value) - navItemsArray.indexOf(previousHoveredTab.value)));
+      const timeout = Math.floor(
+        transitionDuration /
+          Math.abs(navItemsArray.indexOf(currentHoveredTab.value) - navItemsArray.indexOf(previousHoveredTab.value))
+      )
 
       if (newTabPosition === 4) {
-        for (let i = navItemsArray.indexOf(previousHoveredTab.value); i < navItemsArray.indexOf(currentHoveredTab.value); i++) {
-          navItemsArray[i].classList.add('transitioning');
-          if (i >= navItemsArray.indexOf(previousHoveredTab.value) && i < navItemsArray.indexOf(currentHoveredTab.value)) {
-            setTimeout(() => {
-              navItemsArray[i].classList.remove('transitioning');
-              // }, timeout * (i - navItemsArray.indexOf(previousHoveredTab.value) - 1));
-            }, duration * 1.5);
+        for (
+          let i = navItemsArray.indexOf(previousHoveredTab.value);
+          i < navItemsArray.indexOf(currentHoveredTab.value);
+          i++
+        ) {
+          const element = navItemsArray[i]
+          if (element) {
+            element.classList.add("transitioning")
+            if (
+              i >= navItemsArray.indexOf(previousHoveredTab.value) &&
+              i < navItemsArray.indexOf(currentHoveredTab.value)
+            ) {
+              setTimeout(() => {
+                if (element) {
+                  element.classList.remove("transitioning")
+                }
+                // }, timeout * (i - navItemsArray.indexOf(previousHoveredTab.value) - 1));
+              }, duration * 1.5)
+            }
           }
         }
       } else {
-        for (let i = navItemsArray.indexOf(previousHoveredTab.value); i > navItemsArray.indexOf(currentHoveredTab.value); i--) {
-          navItemsArray[i].classList.add('transitioning');
-          if (i <= navItemsArray.indexOf(previousHoveredTab.value) && i > navItemsArray.indexOf(currentHoveredTab.value)) {
-            setTimeout(() => {
-              navItemsArray[i].classList.remove('transitioning');
-              // }, timeout * (i - navItemsArray.indexOf(previousHoveredTab.value) - 1));
-            }, duration * 1.5);
+        for (
+          let i = navItemsArray.indexOf(previousHoveredTab.value);
+          i > navItemsArray.indexOf(currentHoveredTab.value);
+          i--
+        ) {
+          const element = navItemsArray[i]
+          if (element) {
+            element.classList.add("transitioning")
+            if (
+              i <= navItemsArray.indexOf(previousHoveredTab.value) &&
+              i > navItemsArray.indexOf(currentHoveredTab.value)
+            ) {
+              setTimeout(() => {
+                if (element) {
+                  element.classList.remove("transitioning")
+                }
+                // }, timeout * (i - navItemsArray.indexOf(previousHoveredTab.value) - 1));
+              }, duration * 1.5)
+            }
           }
         }
       }
     }
-  };
+  }
 
   const setFinalHoveredPositions = (resized: boolean = false) => {
-    const setDuration = resized ? 0 : duration;
+    const setDuration = resized ? 0 : duration
     // const tabsNavRefYPosition = tabsNavRef.value?.getBoundingClientRect().top || 0;
-    const newTabWidth = currentHoveredTab.value && tabsNavRef.value ? currentHoveredTab.value.offsetWidth / tabsNavRef.value.offsetWidth : 0;
-    tabsNavRef.value?.style.setProperty('--_transition-duration', setDuration + 'ms');
-    tabsNavRef.value?.style.setProperty('--_x-hovered', currentHoveredTab.value?.offsetLeft + 'px');
-
-    tabsNavRef.value?.style.setProperty('--_width-hovered', newTabWidth?.toString());
-    tabsNavRef.value?.style.setProperty('--_y-hovered', currentHoveredTab.value?.offsetTop + 'px');
-    tabsNavRef.value?.style.setProperty('--_y-height', currentHoveredTab.value?.offsetHeight + 'px');
-    tabsNavRef.value?.style.setProperty('--_y-width', currentHoveredTab.value?.offsetWidth + 'px');
-  };
+    const newTabWidth =
+      currentHoveredTab.value && tabsNavRef.value
+        ? currentHoveredTab.value.offsetWidth / tabsNavRef.value.offsetWidth
+        : 0
+    tabsNavRef.value?.style.setProperty("--_transition-duration", setDuration + "ms")
+    tabsNavRef.value?.style.setProperty("--_x-hovered", currentHoveredTab.value?.offsetLeft + "px")
+
+    tabsNavRef.value?.style.setProperty("--_width-hovered", newTabWidth?.toString())
+    tabsNavRef.value?.style.setProperty("--_y-hovered", currentHoveredTab.value?.offsetTop + "px")
+    tabsNavRef.value?.style.setProperty("--_y-height", currentHoveredTab.value?.offsetHeight + "px")
+    tabsNavRef.value?.style.setProperty("--_y-width", currentHoveredTab.value?.offsetWidth + "px")
+  }
 
   const setFinalActivePositions = (resized: boolean = false) => {
-    const setDuration = resized ? 0 : duration;
-    const newTabWidth = currentActiveTab.value && tabsNavRef.value ? currentActiveTab.value.offsetWidth / tabsNavRef.value.offsetWidth : 0;
-    tabsNavRef.value?.style.setProperty('--_transition-duration', setDuration + 'ms');
-    tabsNavRef.value?.style.setProperty('--_x-active', currentActiveTab.value?.offsetLeft + 'px');
-    tabsNavRef.value?.style.setProperty('--_width-active', newTabWidth?.toString());
-    tabsNavRef.value?.style.setProperty('--_y-active', currentActiveTab.value?.offsetTop + 'px');
-    tabsNavRef.value?.style.setProperty('--_y-height', currentActiveTab.value?.offsetHeight + 'px');
-    tabsNavRef.value?.style.setProperty('--_y-width', currentActiveTab.value?.offsetWidth + 'px');
-  };
+    const setDuration = resized ? 0 : duration
+    const newTabWidth =
+      currentActiveTab.value && tabsNavRef.value ? currentActiveTab.value.offsetWidth / tabsNavRef.value.offsetWidth : 0
+    tabsNavRef.value?.style.setProperty("--_transition-duration", setDuration + "ms")
+    tabsNavRef.value?.style.setProperty("--_x-active", currentActiveTab.value?.offsetLeft + "px")
+    tabsNavRef.value?.style.setProperty("--_width-active", newTabWidth?.toString())
+    tabsNavRef.value?.style.setProperty("--_y-active", currentActiveTab.value?.offsetTop + "px")
+    tabsNavRef.value?.style.setProperty("--_y-height", currentActiveTab.value?.offsetHeight + "px")
+    tabsNavRef.value?.style.setProperty("--_y-width", currentActiveTab.value?.offsetWidth + "px")
+  }
 
   const moveActiveIndicator = () => {
-    tabsNavRef.value?.style.setProperty('--_transition-duration', duration + 'ms');
+    if (!tabsNavRef.value || !currentActiveTab.value) return
 
-    const newTabPosition = previousActiveTab.value && currentActiveTab.value ? previousActiveTab.value.compareDocumentPosition(currentActiveTab.value) : 0;
-    let transitionWidth;
+    tabsNavRef.value.style.setProperty("--_transition-duration", duration + "ms")
+
+    const newTabPosition =
+      previousActiveTab.value && currentActiveTab.value
+        ? previousActiveTab.value.compareDocumentPosition(currentActiveTab.value)
+        : 0
+    let transitionWidth
 
     if (newTabPosition === 4) {
-      transitionWidth = currentActiveTab.value && previousActiveTab.value ? currentActiveTab.value.offsetLeft + currentActiveTab.value.offsetWidth - previousActiveTab.value.offsetLeft : 0;
+      transitionWidth =
+        currentActiveTab.value && previousActiveTab.value
+          ? currentActiveTab.value.offsetLeft + currentActiveTab.value.offsetWidth - previousActiveTab.value.offsetLeft
+          : 0
     } else {
-      transitionWidth = previousActiveTab.value && currentActiveTab.value ? previousActiveTab.value.offsetLeft + previousActiveTab.value.offsetWidth - currentActiveTab.value.offsetLeft : 0;
-      tabsNavRef.value?.style.setProperty('--_x-active', currentActiveTab.value ? currentActiveTab.value.offsetLeft + 'px' : '0');
+      transitionWidth =
+        previousActiveTab.value && currentActiveTab.value
+          ? previousActiveTab.value.offsetLeft + previousActiveTab.value.offsetWidth - currentActiveTab.value.offsetLeft
+          : 0
+      tabsNavRef.value.style.setProperty(
+        "--_x-active",
+        currentActiveTab.value ? currentActiveTab.value.offsetLeft + "px" : "0"
+      )
     }
 
-    tabsNavRef.value?.style.setProperty('--_width-active', String(transitionWidth / tabsNavRef.value.offsetWidth));
+    tabsNavRef.value.style.setProperty("--_width-active", String(transitionWidth / tabsNavRef.value.offsetWidth))
 
-    handleTransitioningClass(duration);
+    handleTransitioningClass(duration)
 
-    setTimeout(() => {
-      setFinalActivePositions();
-    }, Math.floor(duration + 20));
-  };
+    setTimeout(
+      () => {
+        setFinalActivePositions()
+      },
+      Math.floor(duration + 20)
+    )
+  }
 
   const moveHoveredIndicator = () => {
-    tabsNavRef.value?.style.setProperty('--_transition-duration', duration + 'ms');
+    if (!tabsNavRef.value || !currentHoveredTab.value) return
+
+    tabsNavRef.value.style.setProperty("--_transition-duration", duration + "ms")
 
-    const newTabPosition = previousHoveredTab.value && currentHoveredTab.value ? previousHoveredTab.value.compareDocumentPosition(currentHoveredTab.value) : 0;
-    let transitionWidth;
+    const newTabPosition =
+      previousHoveredTab.value && currentHoveredTab.value
+        ? previousHoveredTab.value.compareDocumentPosition(currentHoveredTab.value)
+        : 0
+    let transitionWidth
 
     if (newTabPosition === 4) {
-      transitionWidth = currentHoveredTab.value && previousHoveredTab.value ? currentHoveredTab.value.offsetLeft + currentHoveredTab.value.offsetWidth - previousHoveredTab.value.offsetLeft : 0;
+      transitionWidth =
+        currentHoveredTab.value && previousHoveredTab.value
+          ? currentHoveredTab.value.offsetLeft +
+            currentHoveredTab.value.offsetWidth -
+            previousHoveredTab.value.offsetLeft
+          : 0
     } else {
-      transitionWidth = previousHoveredTab.value && currentHoveredTab.value ? previousHoveredTab.value.offsetLeft + previousHoveredTab.value.offsetWidth - currentHoveredTab.value.offsetLeft : 0;
-      tabsNavRef.value?.style.setProperty('--_x-hovered', currentHoveredTab.value ? currentHoveredTab.value.offsetLeft + 'px' : '0');
+      transitionWidth =
+        previousHoveredTab.value && currentHoveredTab.value
+          ? previousHoveredTab.value.offsetLeft +
+            previousHoveredTab.value.offsetWidth -
+            currentHoveredTab.value.offsetLeft
+          : 0
+      tabsNavRef.value.style.setProperty(
+        "--_x-hovered",
+        currentHoveredTab.value ? currentHoveredTab.value.offsetLeft + "px" : "0"
+      )
     }
 
-    tabsNavRef.value?.style.setProperty('--_width-hovered', String(transitionWidth / tabsNavRef.value.offsetWidth));
+    tabsNavRef.value.style.setProperty("--_width-hovered", String(transitionWidth / tabsNavRef.value.offsetWidth))
 
-    handleTransitioningClass(duration);
+    handleTransitioningClass(duration)
 
-    setTimeout(() => {
-      setFinalHoveredPositions();
-    }, Math.floor(duration + 20));
-  };
+    setTimeout(
+      () => {
+        setFinalHoveredPositions()
+      },
+      Math.floor(duration + 20)
+    )
+  }
 
   const setActiveTabContent = () => {
-    const activeIndex = navItems.value?.findIndex((el) => el === currentActiveTab.value);
+    const activeIndex = navItems.value?.findIndex((el) => el === currentActiveTab.value)
     tabsContentRefs.value?.forEach((tabContent: HTMLElement, index: number) => {
-      tabContent.style.display = activeIndex === index ? 'block' : 'none';
-    });
-  };
+      tabContent.style.display = activeIndex === index ? "block" : "none"
+    })
+  }
 
   useResizeObserver(tabsNavRef, () => {
-    setFinalActivePositions(true);
-    setFinalHoveredPositions(true);
-  });
+    setFinalActivePositions(true)
+    setFinalHoveredPositions(true)
+  })
 
   return {
     initNavDecorators,
     navItemClicked,
     navItemHovered,
     resetHoverToActivePosition,
-  };
-};
+  }
+}
 
-export default useTabs;
+export default useTabs

package/app/composables/useZodValidation.ts

@@ -0,0 +1,147 @@
+import { ref, reactive, toRaw, type Ref } from "vue";
+import type { z } from "zod";
+import { ZodError } from "zod";
+import type { ApiErrorResponse } from "../types/forms/types.forms.d";
+
+// Accepts a Zod schema and a form ref
+const useZodValidation = <T extends z.ZodTypeAny>(formSchema: T, 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, { value: unknown; message: string }>,
+  });
+
+  type FormSchemaType = z.infer<T>;
+  const zodErrorObj = ref<z.ZodFormattedError<FormSchemaType> | null>(null);
+
+  const resetPreviousValues = () => {
+    // Type guard for ZodObject using internal _def.typeName
+    const def = (formSchema as z.ZodTypeAny)._def as { typeName?: string };
+    if (def && def.typeName === "ZodObject") {
+      const shape = (formSchema as unknown as z.ZodObject<Record<string, z.ZodTypeAny>>).shape;
+      for (const field of Object.keys(shape)) {
+        const previousValue = {
+          value: null,
+          message: "",
+        };
+        zodFormControl.previousState[field] = previousValue;
+      }
+    }
+  };
+
+  const initZodForm = () => {
+    resetPreviousValues();
+  };
+
+  const getErrorCount = (zodErrorObj: z.ZodFormattedError<FormSchemaType> | null) => {
+    if (!zodErrorObj) return 0;
+    // Remove _errors from the error object for counting
+    const { _errors, ...fieldErrors } = zodErrorObj as Record<string, unknown>;
+    return Object.keys(fieldErrors).length;
+  };
+
+  const transformErrorMessages = (errors: Record<string, string | string[]>) => {
+    const apiErrors = ref<Record<string, string | string[]>>({});
+    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, unknown>) => {
+    const previousValue = {
+      value: state[field],
+      message: message,
+    };
+    zodFormControl.previousState[field] = previousValue;
+  };
+
+  const pushCustomErrors = async (apiErrorResponse: ApiErrorResponse, state: Record<string, unknown>) => {
+    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.issues.push({
+        path: path.split("."),
+        message: Array.isArray(message) ? message.join(", ") : message,
+        code: "custom",
+        input: state[path],
+      });
+      await updatePreviousValue(path, Array.isArray(message) ? message.join(", ") : message, state);
+    }
+    zodErrorObj.value = zodError.format();
+    zodFormControl.errorCount = getErrorCount(zodErrorObj.value as z.ZodFormattedError<FormSchemaType> | null);
+    zodFormControl.formIsValid = zodFormControl.errorCount === 0;
+    zodFormControl.displayLoader = false;
+    zodFormControl.submitAttempted = true;
+    scrollToFirstError();
+    return zodErrorObj.value;
+  };
+
+  const doZodValidate = async (state: Record<string, unknown>) => {
+    const valid = formSchema.safeParse(toRaw(state));
+    if (!valid.success) {
+      zodErrorObj.value = valid.error.format();
+    } else {
+      zodErrorObj.value = null;
+    }
+    zodFormControl.errorCount = getErrorCount(zodErrorObj.value as z.ZodFormattedError<FormSchemaType> | null);
+    zodFormControl.formIsValid = valid.success;
+    return valid.success;
+  };
+
+  const fieldMaxLength = (_name: string) => {
+    // Note: This function relied on internal Zod APIs that changed in v4
+    // For now, returning undefined as the maxlength functionality may need refactoring
+    // or using a different approach like parsing schema metadata
+    return undefined;
+  };
+
+  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;