usemods-nuxt 1.4.2 → 1.4.3

package/README.md

@@ -3,12 +3,13 @@
 # Use Mods (Nuxt Module)
 Auto-imported functions and modifiers for zippy Nuxt developers. 
 
+<!-- Badges -->
 [![npm version][npm-version-src]][npm-version-href]
 [![npm downloads][npm-downloads-src]][npm-downloads-href]
 [![License][license-src]][license-href]
-[![Nuxt][nuxt-src]][nuxt-href]
+[![CI][ci-src]][ci-href]
+[![CodeQL][codeql-src]][codeql-href]
 
-<!-- Badges -->
 [npm-version-src]: https://img.shields.io/npm/v/usemods-nuxt/latest.svg?style=flat&colorA=18181B&colorB=28CF8D
 [npm-version-href]: https://npmjs.com/package/usemods-nuxt
 
@@ -18,12 +19,11 @@ Auto-imported functions and modifiers for zippy Nuxt developers.
 [license-src]: https://img.shields.io/npm/l/usemods-nuxt.svg?style=flat&colorA=18181B&colorB=28CF8D
 [license-href]: https://npmjs.com/package/usemods-nuxt
 
-[nuxt-src]: https://img.shields.io/badge/Nuxt-18181B?logo=nuxt.js
-[nuxt-href]: https://nuxt.com
-
-[![CI](https://github.com/LittleFoxCompany/usemods/actions/workflows/ci.yml/badge.svg)](https://github.com/LittleFoxCompany/usemods/actions/workflows/ci.yml)
+[ci-src]: https://github.com/LittleFoxCompany/usemods/actions/workflows/ci.yml/badge.svg
+[ci-href]: https://github.com/LittleFoxCompany/usemods/actions/workflows/ci.yml
 
-[![CodeQL](https://github.com/LittleFoxCompany/usemods/actions/workflows/github-code-scanning/codeql/badge.svg?branch=main)](https://github.com/LittleFoxCompany/usemods/actions/workflows/github-code-scanning/codeql)
+[codeql-src]: https://github.com/LittleFoxCompany/usemods/actions/workflows/github-code-scanning/codeql/badge.svg?branch=main
+[codeql-href]: https://github.com/LittleFoxCompany/usemods/actions/workflows/github-code-scanning/codeql
 
 ## Quick Setup
 ```bash

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "usemods-nuxt",
   "configKey": "usemods",
-  "version": "1.4.2",
+  "version": "1.4.3",
   "builder": {
     "@nuxt/module-builder": "0.7.0",
     "unbuild": "2.0.0"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "usemods-nuxt",
-  "version": "1.4.2",
+  "version": "1.4.3",
   "description": "Zippy little modifiers and utilities for your Nuxt app.",
   "repository": {
     "type": "git",
@@ -32,7 +32,7 @@
   },
   "dependencies": {
     "@nuxt/kit": "^3.11.2",
-    "usemods": "1.4.2"
+    "usemods": "1.4.3"
   },
   "devDependencies": {
     "@nuxt/devtools": "^1.3.2",

package/dist/runtime/utils/actions.d.ts

@@ -1,37 +0,0 @@
-/**
- * Smoothly scrolls to the element with the specified ID without scuffing up your URLs.
- */
-export declare function scrollToAnchor(id: string): Promise<void>;
-/**
- * Toggles the body scroll with specified class names and returns a promise
- * @info Use your own class names, or ensure fixed is within your Tailwindcss JIT
- */
-export declare function toggleBodyScroll(className?: string, action?: 'add' | 'remove' | 'toggle'): Promise<void>;
-/**
- * Toggles the element scroll with specified class names and returns a promise
- */
-export declare function toggleElementScroll(element: HTMLElement): Promise<void>;
-/**
- * Copies a convereted string to the clipboard
- */
-export declare function copyToClipboard(value: string | number): Promise<void>;
-/**
- * Toggles the fullscreen mode
- */
-export declare function toggleFullScreen(): Promise<void>;
-/**
- * Resets a form to its initial state
- */
-export declare function resetForm(form: HTMLFormElement): Promise<void>;
-/**
- * Focuses on and scrolls to the first invalid input, select, or textarea element within a form.
- */
-export declare function focusOnInvalid(container: HTMLElement): Promise<void>;
-/**
- * Focuses on the nth element within the specified form, where 0 is the first element and -1 is the last element.
- */
-export declare function focusOnNth(container: HTMLElement, index?: number): Promise<void>;
-/**
- * Sets up a keyboard trap within an HTML element, allowing the focus to cycle between the first and last focusable elements when the Tab key is pressed.
- */
-export declare function focusTrap(container: HTMLElement): void;

package/dist/runtime/utils/actions.js

@@ -1,142 +0,0 @@
-export function scrollToAnchor(id) {
-  return new Promise((resolve, reject) => {
-    setTimeout(() => {
-      const selector = `#${id}`;
-      const element = document.querySelector(selector);
-      if (!element) {
-        console.warn(`[MODS] Element with id '${id}' not found.`);
-        reject(`Element with id '${id}' not found.`);
-        return;
-      }
-      element.scrollIntoView({
-        behavior: "smooth",
-        block: "start"
-      });
-      resolve();
-    }, 180);
-  });
-}
-export function toggleBodyScroll(className = "fixed", action = "toggle") {
-  return new Promise((resolve, reject) => {
-    try {
-      const body = document.body;
-      const isFixed = body.classList.contains(className);
-      const scrollY = isFixed ? parseInt(body.style.top, 10) : window.scrollY;
-      body.style.top = isFixed ? "" : `-${scrollY}px`;
-      if (action === "add") {
-        body.classList.add(className);
-      } else if (action === "remove") {
-        body.classList.remove(className);
-      } else {
-        body.classList.toggle(className);
-      }
-      if (isFixed)
-        window.scrollTo(0, -scrollY);
-      resolve();
-    } catch (error) {
-      console.warn("[MODS] Failed to toggle body scroll.");
-      reject(error);
-    }
-  });
-}
-export function toggleElementScroll(element) {
-  return new Promise((resolve) => {
-    if (!element) {
-      console.warn("[MODS] Element is required to toggle scroll.");
-      return resolve();
-    }
-    if (element.dataset.isScrollLocked === "true") {
-      element.style.overflow = "";
-      delete element.dataset.isScrollLocked;
-    } else {
-      element.style.overflow = "hidden";
-      element.dataset.isScrollLocked = "true";
-    }
-    resolve();
-  });
-}
-export async function copyToClipboard(value) {
-  if (!navigator.clipboard || !navigator.clipboard.writeText) {
-    throw new Error("Clipboard API is not available");
-  }
-  try {
-    await navigator.clipboard.writeText(String(value));
-  } catch (error) {
-    console.error("Failed to copy text: ", error);
-    throw error;
-  }
-}
-export function toggleFullScreen() {
-  return new Promise((resolve, reject) => {
-    if (document.fullscreenElement) {
-      document.exitFullscreen().then(resolve).catch(reject);
-    } else {
-      document.documentElement.requestFullscreen().then(resolve).catch(reject);
-    }
-  });
-}
-export function resetForm(form) {
-  return new Promise((resolve, reject) => {
-    try {
-      form.reset();
-      resolve();
-    } catch (error) {
-      reject(error);
-    }
-  });
-}
-export function focusOnInvalid(container) {
-  return new Promise((resolve, reject) => {
-    try {
-      const input = container.querySelector("input:invalid, select:invalid, textarea:invalid");
-      if (input) {
-        input.focus();
-        input.scrollIntoView({ behavior: "smooth", block: "center" });
-      }
-      resolve();
-    } catch (error) {
-      reject(error);
-    }
-  });
-}
-export function focusOnNth(container, index = 0) {
-  return new Promise((resolve, reject) => {
-    const elements = container.querySelectorAll("input, textarea, select");
-    const elementIndex = index === -1 ? elements.length - 1 : index;
-    if (elementIndex < 0 || elementIndex >= elements.length) {
-      return reject(new Error(`Element at index ${index} is out of bounds.`));
-    }
-    const element = elements[elementIndex];
-    if (!element || typeof element.focus !== "function") {
-      return reject(new Error("Failed to focus on the element."));
-    }
-    try {
-      element.focus({ preventScroll: true });
-      element.scrollIntoView({ behavior: "smooth", block: "center" });
-      resolve();
-    } catch (error) {
-      reject(new Error("Failed to focus on the element."));
-    }
-  });
-}
-export function focusTrap(container) {
-  const focusableElements = container.querySelectorAll('a[href], button, textarea, input[type="text"], input[type="radio"], input[type="checkbox"], select');
-  const firstFocusableElement = focusableElements[0];
-  const lastFocusableElement = focusableElements[focusableElements.length - 1];
-  container.addEventListener("keydown", (event) => {
-    const isTabPressed = event.key === "Tab";
-    if (!isTabPressed)
-      return;
-    if (event.shiftKey) {
-      if (document.activeElement === firstFocusableElement) {
-        lastFocusableElement.focus();
-        event.preventDefault();
-      }
-    } else {
-      if (document.activeElement === lastFocusableElement) {
-        firstFocusableElement.focus();
-        event.preventDefault();
-      }
-    }
-  });
-}

package/dist/runtime/utils/animations.d.ts

@@ -1,12 +0,0 @@
-/**
- * Animate text by wrapping each character in a span with a delay.
- */
-export declare function animateText(text: string, options?: {
-    splitBy?: 'word' | 'character';
-    time?: number;
-    unit?: 'ms' | 's';
-    class?: string;
-}): string;
-/**
- * Animate a group of elements by wrapping each in a span with an incremental delay.
- */

package/dist/runtime/utils/animations.js

@@ -1,21 +0,0 @@
-export function animateText(text, options = {}) {
-  if (!text)
-    return "";
-  const { splitBy = "character", time = 0.1, unit = "s", class: cssClass = "" } = options;
-  const delimiter = splitBy === "word" ? " " : "";
-  const elements = text.split(delimiter);
-  const result = elements.map((element, index) => {
-    const delay = `${index * time}${unit}`;
-    const spanStyle = "display: inline-block; position: relative;";
-    const translateStyle = `position: absolute; top: 0; left: 0; animation-delay: ${delay};`;
-    if (element === " " && splitBy === "character") {
-      return '<span class="space" style="white-space: pre;"> </span>';
-    } else {
-      return `<span class="relative overflow-clip" style="${spanStyle}">
-                <span class="ghost" style="visibility: hidden;">${element}</span>
-                <span class="translate ${cssClass}" style="${translateStyle}">${element}</span>
-              </span>`;
-    }
-  });
-  return splitBy === "word" ? result.join(" ") : result.join("");
-}

package/dist/runtime/utils/data.d.ts

@@ -1,23 +0,0 @@
-/**
- * Sort an array or object by a property.
- */
-export declare function dataSortBy(items: object | string[] | number[], options?: {
-    property?: string;
-    order?: 'asc' | 'desc';
-}): object | string[] | number[];
-/**
- * Reverse an array or object.
- */
-export declare function dataReverse(items: object | string[] | number[]): object | string[] | number[];
-/**
- * Returns single unique values within an array or object
- */
-export declare function dataRemoveDuplicates<T extends string | number>(...arrays: T[][]): T[];
-/**
- * Flatten an array of arrays or an object of objects into a single array or object. That was hard to say.
- */
-export declare function dataFlatten(items: object | any[]): object | any[];
-/**
- * Returns an array without a property or properties.
- */
-export declare function dataWithout(items: object | string[] | number[], properties: string | number | string[] | number[]): object | string[] | number[];

package/dist/runtime/utils/data.js

@@ -1,73 +0,0 @@
-import { isObject } from "./validators.js";
-export function dataSortBy(items, options) {
-  const defaultOptions = { order: "asc" };
-  const { property, order } = { ...defaultOptions, ...options };
-  const compare = (a, b) => {
-    let valueA, valueB;
-    if (property) {
-      valueA = a[property];
-      valueB = b[property];
-    } else {
-      valueA = a;
-      valueB = b;
-    }
-    if (valueA < valueB) {
-      return order === "asc" ? -1 : 1;
-    } else if (valueA > valueB) {
-      return order === "asc" ? 1 : -1;
-    } else {
-      return 0;
-    }
-  };
-  if (Array.isArray(items)) {
-    return items.sort(compare);
-  } else {
-    return items;
-  }
-}
-export function dataReverse(items) {
-  if (Array.isArray(items) && items.length === 0 || !Array.isArray(items) && Object.keys(items).length === 0) {
-    console.warn("[MODS] Warning: dataReverse() expects an object or array as the first argument.");
-    return items;
-  }
-  if (isObject(items)) {
-    const entries = Object.entries(items);
-    return Object.fromEntries(entries.reverse());
-  } else {
-    return items.reverse();
-  }
-}
-export function dataRemoveDuplicates(...arrays) {
-  const mergedArray = arrays.flat();
-  return Array.from(new Set(mergedArray));
-}
-export function dataFlatten(items) {
-  if (isObject(items)) {
-    let flattenObject = function(obj, parentKey = "") {
-      for (const [key, value] of Object.entries(obj)) {
-        const newKey = parentKey ? `${parentKey}.${key}` : key;
-        if (isObject(value)) {
-          flattenObject(value, newKey);
-        } else {
-          flattened[newKey] = value;
-        }
-      }
-    };
-    const flattened = {};
-    flattenObject(items);
-    return flattened;
-  } else if (Array.isArray(items)) {
-    return items.flatMap((item) => Array.isArray(item) ? dataFlatten(item) : item);
-  } else {
-    return items;
-  }
-}
-export function dataWithout(items, properties) {
-  const propertyArray = Array.isArray(properties) ? properties : [properties];
-  if (isObject(items)) {
-    const entries = Object.entries(items);
-    return Object.fromEntries(entries.filter(([key]) => !propertyArray.includes(key)));
-  } else {
-    return items.filter((item) => !propertyArray.includes(item));
-  }
-}

package/dist/runtime/utils/detections.d.ts

@@ -1,111 +0,0 @@
-/**
- * Detect the current scroll position of the window
- */
-export declare function detectScrollPosition(): {
-    x: number;
-    y: number;
-};
-/**
- * Detect the absolute mouse position with the page
- * @info Don't forget to add a mousemove event listener to the window
- */
-export declare function detectMousePosition(event: MouseEvent): {
-    x: number;
-    y: number;
-};
-/**
- * Detect the relative mouse position with the window size and returns a percentage value
- * @info Don't forget to add a mousemove event listener to the window
- */
-export declare function detectRelativeMousePosition(event: MouseEvent): {
-    x: number;
-    y: number;
-};
-/**
- * Detect the browser's window size
- */
-export declare function detectWindowSize(): {
-    width: number;
-    height: number;
-};
-/**
- * Detect the screen or monitor size
- */
-export declare function detectScreenSize(): {
-    width: number;
-    height: number;
-};
-/**
- * Detect the current device type (Mobile or Desktop)
- */
-export declare function detectDevice(): string;
-/**
- * Detect the current operating system
- */
-export declare function detectOS(): string;
-/**
- * Detect if the browser window is currently active or hidden.
- */
-export declare function detectActiveBrowser(): boolean;
-/**
- * Detect the current color scheme (Light or Dark)
- */
-export declare function detectColorScheme(): string;
-/**
- * Detect the current user's Timezone
- */
-export declare function detectUserTimezone(): string;
-/**
- * Detect the currect device orientation
- */
-export declare function detectDeviceOrientation(): string;
-/**
- * Detect the current breakpoint based on Tailwind CSS breakpoints
- */
-export declare function detectBreakpoint(): string;
-/**
- * Detect the current network status of the user (Online or Offline)
- */
-export declare function detectNetworkStatus(): string;
-/**
- * Returns the current URL
- */
-export declare function detectUrl(): string;
-/**
- * Returns the path of the current URL in an array
- */
-export declare function detectUrlPath(): string[];
-/**
- * Returns a value from the URL by name
- */
-export declare function detectUrlParams(): {
-    [key: string]: string;
-}[] | null;
-/**
- * Returns a value from the URL hash by name
- */
-export declare function detectUrlHash(): string | null;
-/**
- * Returns the current host or domain name from the URL
- */
-export declare function detectHost(): string;
-/**
- * Returns the current hostname from the URL
- */
-export declare function detectHostName(): string;
-/**
- * Returns the current port
- */
-export declare function detectPort(): string;
-/**
- * Detects if the element is currently in the viewport
- */
-/**
- * Detects if the element is currently in the container via ID
- */
-/**
- * Detect any container breakpoint based on Tailwind CSS breakpoints
- */
-/**
- * Detect the container size via ID
- */

package/dist/runtime/utils/detections.js

@@ -1,105 +0,0 @@
-export function detectScrollPosition() {
-  return {
-    x: window.scrollX,
-    y: window.scrollY
-  };
-}
-export function detectMousePosition(event) {
-  return {
-    x: event.pageX,
-    y: event.pageY
-  };
-}
-export function detectRelativeMousePosition(event) {
-  const { innerWidth, innerHeight } = window;
-  return {
-    x: parseFloat((event.clientX / innerWidth).toFixed(2)),
-    y: parseFloat((event.clientY / innerHeight).toFixed(2))
-  };
-}
-export function detectWindowSize() {
-  return {
-    width: window.innerWidth,
-    height: window.innerHeight
-  };
-}
-export function detectScreenSize() {
-  return {
-    width: window.screen.width,
-    height: window.screen.height
-  };
-}
-export function detectDevice() {
-  return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ? "Mobile" : "Desktop";
-}
-export function detectOS() {
-  const userAgent = navigator.userAgent.toLowerCase();
-  if (userAgent.includes("win"))
-    return "Windows";
-  if (userAgent.includes("mac"))
-    return "Mac";
-  if (userAgent.includes("linux"))
-    return "Linux";
-  if (userAgent.includes("x11"))
-    return "UNIX";
-  if (userAgent.includes("android"))
-    return "Android";
-  if (userAgent.includes("iphone"))
-    return "iOS";
-  return "Unknown";
-}
-export function detectActiveBrowser() {
-  return !document.hidden;
-}
-export function detectColorScheme() {
-  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
-}
-export function detectUserTimezone() {
-  return Intl.DateTimeFormat().resolvedOptions().timeZone;
-}
-export function detectDeviceOrientation() {
-  return window.screen.orientation.type;
-}
-export function detectBreakpoint() {
-  const width = window.innerWidth;
-  if (width < 640)
-    return "xs";
-  if (width < 768)
-    return "sm";
-  if (width < 1024)
-    return "md";
-  if (width < 1280)
-    return "lg";
-  if (width < 1536)
-    return "xl";
-  return "2xl";
-}
-export function detectNetworkStatus() {
-  return navigator.onLine ? "Online" : "Offline";
-}
-export function detectUrl() {
-  return window.location.href;
-}
-export function detectUrlPath() {
-  return window.location.pathname.split("/").filter((p) => p);
-}
-export function detectUrlParams() {
-  const searchParams = new URLSearchParams(window.location.search);
-  const paramsArray = [];
-  for (const [key, value] of searchParams.entries()) {
-    paramsArray.push({ [key]: value });
-  }
-  return paramsArray.length > 0 ? paramsArray : null;
-}
-export function detectUrlHash() {
-  return window.location.hash.replace("#", "");
-}
-export function detectHost() {
-  return window.location.host;
-}
-export function detectHostName() {
-  return window.location.hostname;
-}
-export function detectPort() {
-  return window.location.port;
-}

package/dist/runtime/utils/devices.d.ts

@@ -1,77 +0,0 @@
-/**
- * Check if you're a server-side user.
- */
-export declare function isServerSide(): boolean;
-/**
- * Adds detected devices as classes to your project's body class
- */
-export declare function addDeviceClasses(): void;
-/**
- * Check if you're a passionate iPhone fan.
- */
-export declare function isIos(): boolean;
-/**
- * Check if you're a zealous Android fan.
- */
-export declare function isAndroid(): boolean;
-/**
- * Check if you're a staunch Mac fan.
- */
-export declare function isMac(): boolean;
-/**
- * Check if you're a fervent Windows fan.
- */
-export declare function isWindows(): boolean;
-/**
- * Check if you're a devoted Linux fan.
- * @info Fun fact, most Linux users will tell you they have Linux before the function does.
- */
-export declare function isLinux(): boolean;
-/**
- * Check if you're a die-hard Chrome fan.
- */
-export declare function isChrome(): boolean;
-/**
- * Check if you're a dedicated Firefox fan.
- */
-export declare function isFirefox(): boolean;
-/**
- * Check if you're a lonely Safari fan.
- */
-export declare function isSafari(): boolean;
-/**
- * Check if you're an ardent Edge fan.
- */
-export declare function isEdge(): boolean;
-/**
- * Check if you're rocking a mobile
- */
-export declare function isMobile(): boolean;
-/**
- * Check if you're tablet user
- */
-export declare function isTablet(): boolean;
-/**
- * Check if you're pro desktop user
- */
-export declare function isDesktop(): boolean;
-/**
- * Check if you're portrait
- */
-export declare function isPortrait(): boolean;
-/**
- * Check if you're landscape
- */
-export declare function isLandscape(): boolean;
-/**
- * Check if you're a cyborg or a bot
- */
-export declare function isBot(): boolean;
-/**
- * Check if you're a human
- */
-export declare function isHuman(): boolean;
-/**
- * Check if you're a developer
- */
-export declare function isDeveloper(): boolean;