usemods-nuxt 0.0.12 → 0.0.21

package/dist/module.json

@@ -1,5 +1,9 @@
 {
   "name": "usemods",
   "configKey": "usemods",
-  "version": "0.0.12"
+  "version": "0.0.21",
+  "builder": {
+    "@nuxt/module-builder": "0.6.0",
+    "unbuild": "2.0.0"
+  }
 }

package/dist/module.mjs

@@ -1,5 +1,4 @@
-import { defineNuxtModule, createResolver, addImportsSources, addPlugin } from '@nuxt/kit';
-import * as utils from 'usemods';
+import { defineNuxtModule, createResolver, addImportsDir, addPlugin } from '@nuxt/kit';
 
 const module = defineNuxtModule({
   meta: {
@@ -12,19 +11,7 @@ const module = defineNuxtModule({
   },
   setup(options, nuxt) {
     const { resolve } = createResolver(import.meta.url);
-    const aliasMap = new Map(options.alias);
-    const imports = [];
-    for (const name of Object.keys(utils)) {
-      const alias = aliasMap.has(name) ? aliasMap.get(name) : name;
-      imports.push({
-        name,
-        alias
-      });
-    }
-    addImportsSources({
-      from: "usemods",
-      imports
-    });
+    addImportsDir(resolve("./runtime/utils"));
     addPlugin(resolve("./runtime/plugin"));
   }
 });

package/dist/runtime/plugin.d.ts

@@ -1,2 +1,2 @@
-declare const _default: any;
+declare const _default: import("#app").Plugin<Record<string, unknown>> & import("#app").ObjectPlugin<Record<string, unknown>>;
 export default _default;

package/dist/runtime/plugin.mjs

@@ -1,3 +1,4 @@
 import { defineNuxtPlugin } from "#app";
-export default defineNuxtPlugin((nuxtApp) => {
+export default defineNuxtPlugin(() => {
+  console.debug("mods injected by use-mods!");
 });

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

@@ -0,0 +1,36 @@
+/**
+ * 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
+ */
+export declare function toggleBodyScroll(className?: string): 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.mjs

@@ -0,0 +1,129 @@
+export function scrollToAnchor(id) {
+  return new Promise((resolve, reject) => {
+    setTimeout(() => {
+      const selector = `#${id}`;
+      const element = document.querySelector(selector);
+      if (!element) {
+        reject(`Element with id '${id}' not found.`);
+        return;
+      }
+      element.scrollIntoView({
+        behavior: "smooth",
+        block: "start"
+      });
+      resolve();
+    }, 180);
+  });
+}
+export function toggleBodyScroll(className = "fixed") {
+  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`;
+      body.classList.toggle(className, !isFixed);
+      if (isFixed)
+        window.scrollTo(0, -scrollY);
+      resolve();
+    } catch (error) {
+      reject(error);
+    }
+  });
+}
+export function toggleElementScroll(element) {
+  return new Promise((resolve, reject) => {
+    if (element.dataset.isScrollLocked === "true") {
+      element.style.overflow = "";
+      delete element.dataset.isScrollLocked;
+    } else {
+      element.style.overflow = "hidden";
+      element.dataset.isScrollLocked = "true";
+    }
+    resolve();
+  });
+}
+export function copyToClipboard(value) {
+  if (!navigator.clipboard || !navigator.clipboard.writeText) {
+    return Promise.reject("Clipboard API is not available");
+  }
+  return 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];
+  const KEYCODE_TAB = 9;
+  container.addEventListener("keydown", (event) => {
+    const isTabPressed = event.key === "Tab" || event.keyCode === KEYCODE_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

@@ -0,0 +1,12 @@
+/**
+ * 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.mjs

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

@@ -0,0 +1,27 @@
+/**
+ * Shuffles your data in a random order.
+ */
+export declare function dataShuffle(items: object | any[]): any;
+/**
+ * Reverse an array.
+ */
+export declare function dataReverse(items: object | any[]): any;
+/**
+ * Sort an array or object by a property.
+ */
+export declare function dataSortBy(items: object | any[], options?: {
+    property?: string;
+    order?: 'asc' | 'desc';
+}): any;
+/**
+ * Returns single unique values within an array or object
+ */
+export declare function dataRemoveDuplicates(...arrays: any[][]): any[];
+/**
+ * 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 | any[], properties: any | any[]): any;

package/dist/runtime/utils/data.mjs

@@ -0,0 +1,86 @@
+import { isObject, isArray } from "./validators.mjs";
+export function dataShuffle(items) {
+  if (!items || !(isObject(items) || isArray(items))) {
+    console.warn("[MODS] Warning: dataShuffle() expects an object or array as the first argument.");
+    return items;
+  }
+  const shuffleArray = (array) => {
+    let shuffled = false;
+    while (!shuffled) {
+      for (let i = array.length - 1; i > 0; i--) {
+        const j = Math.floor(Math.random() * (i + 1));
+        [array[i], array[j]] = [array[j], array[i]];
+      }
+      shuffled = !array.every((element, index) => {
+        if (Array.isArray(items))
+          return element === items[index];
+        return false;
+      });
+    }
+    return array;
+  };
+  if (isObject(items)) {
+    const entries = Object.entries(items);
+    return Object.fromEntries(shuffleArray(entries));
+  } else {
+    return shuffleArray([...items]);
+  }
+}
+export function dataReverse(items) {
+  if (!items || !(isObject(items) || isArray(items))) {
+    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 dataSortBy(items, options) {
+  const comparator = (a, b) => {
+    const property = options?.property;
+    const order = options?.order ?? "asc";
+    if (!property)
+      return 0;
+    if (a[property] < b[property])
+      return order === "asc" ? -1 : 1;
+    if (a[property] > b[property])
+      return order === "asc" ? 1 : -1;
+    return 0;
+  };
+  if (isObject(items)) {
+    const entries = Object.entries(items);
+    return Object.fromEntries(entries.sort((a, b) => comparator(a[1], b[1])));
+  } else {
+    return items.sort(comparator);
+  }
+}
+export function dataRemoveDuplicates(...arrays) {
+  const mergedArray = arrays.flat();
+  return mergedArray.filter((item, index) => mergedArray.indexOf(item) === index);
+}
+export function dataFlatten(items) {
+  if (isObject(items)) {
+    const flattened = {};
+    Object.keys(items).forEach((key) => {
+      const item = items[key];
+      flattened[key] = Array.isArray(item) ? dataFlatten(item) : item;
+    });
+    return flattened;
+  } else if (Array.isArray(items)) {
+    return items.reduce((acc, val) => acc.concat(Array.isArray(val) ? dataFlatten(val) : val), []);
+  } 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

@@ -0,0 +1,110 @@
+/**
+ * Detect the current scroll position of the window
+ */
+export declare function detectScrollPosition(): {
+    x: number;
+    y: number;
+};
+/**
+ * Detect the absolute mouse position with the page
+ */
+export declare function detectMousePosition(event: MouseEvent): {
+    x: number;
+    y: number;
+};
+/**
+ * Detect the relative mouse position with the window size and returns a percentage value
+ */
+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 container size via ID
+ */
+/**
+ * Detect the current breakpoint based on Tailwind CSS breakpoints
+ */
+export declare function detectBreakpoint(): string;
+/**
+ * Detect any container breakpoint based on Tailwind CSS breakpoints
+ */
+export declare function detectContainerBreakpoint(element: HTMLElement): 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
+ */

package/dist/runtime/utils/detections.mjs

@@ -0,0 +1,131 @@
+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 detectContainerBreakpoint(element) {
+  const width = element.getBoundingClientRect().width;
+  if (width < 320)
+    return "@xs";
+  if (width < 384)
+    return "@sm";
+  if (width < 448)
+    return "@md";
+  if (width < 512)
+    return "@lg";
+  if (width < 576)
+    return "@xl";
+  if (width < 672)
+    return "@2xl";
+  if (width < 768)
+    return "@3xl";
+  if (width < 896)
+    return "@4xl";
+  if (width < 1024)
+    return "@5xl";
+  if (width < 1152)
+    return "@6xl";
+  if (width < 1280)
+    return "@7xl";
+  return "@7xl";
+}
+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/formatters.d.ts

@@ -0,0 +1,77 @@
+/**
+ * Format numbers into neat and formatted strings for people
+ */
+export declare function formatNumber(number: number, options?: {
+    decimals?: number;
+    locale?: string;
+}): string;
+/**
+ * Format numbers into local currency with extra smarts
+ */
+export declare function formatCurrency(number: number, options?: {
+    decimals?: number;
+    locale?: string;
+}): string;
+/**
+ * Format numbers into valuations displayed in thousands, millions or billions
+ */
+export declare function formatValuation(number: number, options?: {
+    decimals?: number;
+    locale?: string;
+}): string;
+/**
+ * Format a number into a percentage
+ */
+export declare function formatPercentage(value: number, options?: {
+    decimals?: number;
+    locale?: string;
+}): string;
+/**
+ * Format time into a human-readable string
+ */
+export declare function formatDurationLabels(seconds: number, options?: {
+    labels?: 'short' | 'long';
+    round?: boolean;
+}): string;
+/**
+ * Format time into duration 00:00:00
+ */
+export declare function formatDurationNumbers(seconds: number): string;
+/**
+ * Format numbers into words
+ */
+export declare function formatNumberToWords(value: number): string;
+/**
+ * Generate initials from any string while ignoring common titles
+ */
+export declare function formatInitials(text: string, options?: {
+    length?: number;
+}): string;
+/**
+ * Format Unix timestamp into a datetime string
+ */
+export declare function formatUnixTime(timestamp: number): string;
+/**
+ * Create a string of comma-separated values from an array, object or string with an optional limit and conjunction
+ */
+export declare function formatList(items: string | object | any[], options?: {
+    limit?: number;
+    conjunction?: string;
+}): string;
+/**
+ * Converts a string to title case following the Chicago Manual of Style rules.
+ * @reference https://www.chicagomanualofstyle.org/book/ed17/frontmatter/toc.html
+
+ */
+export declare function formatTitle(text: string): string;
+/**
+ * Format a sentence case string
+ */
+export declare function formatSentenceCase(text: string): string;
+/**
+ * Adds a space between the last two words in a string to prevent lonely words.
+ */
+export declare function formatTextWrap(value: string): string;
+/**
+ * Format a number into a unit formatting
+ */