Add animations utilities to docs bundle

docs.mjs

@@ -58,7 +58,7 @@ function generateMarkdown(file, name) {
 
 // Generate Markdown for each File
 function generateAll() {
-  const files = ['actions', 'formatters', 'modifiers', 'detections', 'generators', 'numbers', 'data', 'validators', 'goodies']
+  const files = ['actions', 'animations', 'formatters', 'modifiers', 'detections', 'generators', 'numbers', 'data', 'validators', 'goodies']
   files.forEach((file, index) => generateMarkdown(join(srcPath, `${file}.ts`), `${index + 1}.${file}`))
 }
 

nuxt-module/src/runtime/utils/animations.ts

@@ -0,0 +1,49 @@
+// title: Animators
+// description: Pixar without the budget or talent
+// lead: Ruthlessly animate everything
+
+/**
+ * Animate text by wrapping each character in a span with a delay.
+ */
+export function animateText(text: string, options: { splitBy?: 'word' | 'character'; time?: number; unit?: 'ms' | 's'; class?: string } = {}): string {
+  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('')
+}
+
+/**
+ * Animate a group of elements by wrapping each in a span with an incremental delay.
+ */
+// export function animateGroup(element: HTMLElement, options?: { time?: number; unit?: 'ms' | 's' }): void {
+//   const settings = {
+//     time: options?.time || 0.1,
+//     unit: options?.unit || 's'
+//   }
+
+//   let currentDelay = 0
+//   const elements = element.children
+
+//   Array.from(elements).forEach((child: Element) => {
+//     ;(child as HTMLElement).style.animationDelay = `${currentDelay}${settings.unit}`
+//     currentDelay += settings.time
+//   })
+// }

nuxt-web/content/2.docs/2.animations.md

@@ -0,0 +1,16 @@
+---
+id: animations
+title: Animators
+description: Pixar without the budget or talent
+lead: Ruthlessly animate everything
+---
+::page-title
+# Animators
+Pixar without the budget or talent
+::
+
+::page-function{name="animateText" description="Animate text by wrapping each character in a span with a delay." params="text: string, options: { splitBy?: 'word' | 'character'; time?: number; unit?: 'ms' | 's'; class?: string } = {}" }
+:::animateText
+:::
+::
+

nuxt-web/content/2.docs/3.formatters.md

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

nuxt-web/content/2.docs/4.modifiers.md

@@ -0,0 +1,126 @@
+---
+id: modifiers
+title: Modifiers
+description: Modify and transform your content with our collection of efficient and easy-to-use functions designed to dicipher, manipulate, and transform strings.
+lead: Bend content to your will
+---
+::page-title
+# Modifiers
+Modify and transform your content with our collection of efficient and easy-to-use functions designed to dicipher, manipulate, and transform strings.
+::
+
+::page-function{name="startWith" description="Adds a prefix to a string if it doesn't already start with the prefix." params="value: string, start: string" }
+:::startWith
+:::
+::
+
+::page-function{name="startWithout" description="Removes a prefix from a string if it starts with the prefix." params="value: string, start: string" }
+:::startWithout
+:::
+::
+
+::page-function{name="endWith" description="Adds a suffix to a string if it doesn't already end with the suffix." params="text: string, end: string" }
+:::endWith
+:::
+::
+
+::page-function{name="endWithout" description="Removes a suffix from a string if it ends with the suffix." params="text: string, end: string" }
+:::endWithout
+:::
+::
+
+::page-function{name="surroundWith" description="Adds a prefix and suffix to a string if it doesn't already start and end with them." params="text: string, start: string, end: string" }
+:::surroundWith
+:::
+::
+
+::page-function{name="pluralize" description="Adds plurals to a string except for excluded words." params="value: string, count: number" }
+:::pluralize
+:::
+::
+
+::page-function{name="singularize" description="Removes plurals from a string." params="value: string" }
+:::singularize
+:::
+::
+
+::page-function{name="ordinalize" description="Converts a number to a string with ordinal suffix." params="value: number" }
+:::ordinalize
+:::
+::
+
+::page-function{name="stripHtml" description="Strip HTML tags from a string." params="text: string" }
+:::stripHtml
+:::
+::
+
+::page-function{name="stripWhitespace" description="Strips whitespace from a string." params="text: string" }
+:::stripWhitespace
+:::
+::
+
+::page-function{name="stripNumbers" description="Strips numbers from a string." params="text: string" }
+:::stripNumbers
+:::
+::
+
+::page-function{name="stripPunctuation" description="Strips punctuation from a string." params="text: string" }
+:::stripPunctuation
+:::
+::
+
+::page-function{name="stripSymbols" description="Strips symbols from a string." params="text: string" }
+:::stripSymbols
+:::
+::
+
+::page-function{name="stripEmojis" description="Strips emojis from a string (requires ES6 Unicode support) 🦊." params="text: string" }
+:::stripEmojis
+:::
+::
+
+::page-function{name="slugify" description="Converts a string to-a-slug." params="text: string" }
+:::slugify
+:::
+::
+
+::page-function{name="deslugify" description="Converts a slug to a string." params="text: string" }
+:::deslugify
+:::
+::
+
+::page-function{name="camelCase" description="Removes spaces and capitalizes the first letter of each word except for the first word." params="text: string" }
+:::camelCase
+:::
+::
+
+::page-function{name="pascalCase" description="Removes spaces and capitalizes the first letter of each word." params="text: string" }
+:::pascalCase
+:::
+::
+
+::page-function{name="snakeCase" description="Replaces spaces with underscores and converts to lowercase." params="text: string" }
+:::snakeCase
+:::
+::
+
+::page-function{name="kebabCase" description="Replaces spaces with hyphens and converts to lowercase." params="text: string" }
+:::kebabCase
+:::
+::
+
+::page-function{name="titleCase" description="Converts to title case by capitalizing the first letter of each word." params="text: string" }
+:::titleCase
+:::
+::
+
+::page-function{name="escapeHtml" description="Escape HTML entities in a string." params="text: string" }
+:::escapeHtml
+:::
+::
+
+::page-function{name="unescapeHtml" description="Unescape HTML entities in a string." params="text: string" }
+:::unescapeHtml
+:::
+::
+

nuxt-web/content/2.docs/5.detections.md

@@ -0,0 +1,116 @@
+---
+id: detections
+title: Detections
+description: Client-side detections for various user and browser information. Perfect for personalisation, analytics or debugging weird and wonderful bugs. Please note we're working on making our examples reactive! 🚀
+lead: Listen to your clients
+---
+::page-title
+# Detections
+Client-side detections for various user and browser information. Perfect for personalisation, analytics or debugging weird and wonderful bugs. Please note we're working on making our examples reactive! 🚀
+::
+
+::page-function{name="detectScrollPosition" description="Detect the current scroll position of the window" params="" }
+:::detectScrollPosition
+:::
+::
+
+::page-function{name="detectMousePosition" description="Detect the absolute mouse position with the page" params="event: MouseEvent" }
+:::detectMousePosition
+:::
+::
+
+::page-function{name="detectRelativeMousePosition" description="Detect the relative mouse position with the window size and returns a percentage value" params="event: MouseEvent" }
+:::detectRelativeMousePosition
+:::
+::
+
+::page-function{name="detectWindowSize" description="Detect the browser's window size" params="" }
+:::detectWindowSize
+:::
+::
+
+::page-function{name="detectScreenSize" description="Detect the screen or monitor size" params="" }
+:::detectScreenSize
+:::
+::
+
+::page-function{name="detectDevice" description="Detect the current device type (Mobile or Desktop)" params="" }
+:::detectDevice
+:::
+::
+
+::page-function{name="detectOS" description="Detect the current operating system" params="" }
+:::detectOS
+:::
+::
+
+::page-function{name="detectActiveBrowser" description="Detect if the browser window is currently active or hidden." params="" }
+:::detectActiveBrowser
+:::
+::
+
+::page-function{name="detectColorScheme" description="Detect the current color scheme (Light or Dark)" params="" }
+:::detectColorScheme
+:::
+::
+
+::page-function{name="detectUserTimezone" description="Detect the current user's Timezone" params="" }
+:::detectUserTimezone
+:::
+::
+
+::page-function{name="detectDeviceOrientation" description="Detect the currect device orientation" params="" }
+:::detectDeviceOrientation
+:::
+::
+
+::page-function{name="detectBreakpoint" description="Detect the container size via ID" params="" }
+:::detectBreakpoint
+:::
+::
+
+::page-function{name="detectContainerBreakpoint" description="Detect any container breakpoint based on Tailwind CSS breakpoints" params="element: HTMLElement" }
+:::detectContainerBreakpoint
+:::
+::
+
+::page-function{name="detectNetworkStatus" description="Detect the current network status of the user (Online or Offline)" params="" }
+:::detectNetworkStatus
+:::
+::
+
+::page-function{name="detectUrl" description="Returns the current URL" params="" }
+:::detectUrl
+:::
+::
+
+::page-function{name="detectUrlPath" description="Returns the path of the current URL in an array" params="" }
+:::detectUrlPath
+:::
+::
+
+::page-function{name="detectUrlParams" description="Returns a value from the URL by name" params="" }
+:::detectUrlParams
+:::
+::
+
+::page-function{name="detectUrlHash" description="Returns a value from the URL hash by name" params="" }
+:::detectUrlHash
+:::
+::
+
+::page-function{name="detectHost" description="Returns the current host or domain name from the URL" params="" }
+:::detectHost
+:::
+::
+
+::page-function{name="detectHostName" description="Returns the current hostname from the URL" params="" }
+:::detectHostName
+:::
+::
+
+::page-function{name="detectPort" description="Returns the current port" params="" }
+:::detectPort
+:::
+::
+