chore: wip

Author: chrisbbreuer

docs/.vitepress/components.d.ts

@@ -2,6 +2,7 @@
 // @ts-nocheck
 // Generated by unplugin-vue-components
 // Read more: https://github.com/vuejs/core/pull/3399
+// biome-ignore lint: disable
 export {}
 
 /* prettier-ignore */

docs/.vitepress/config.ts

@@ -56,7 +56,26 @@ const sidebar = [
       { text: 'Intro', link: '/intro' },
       { text: 'Install', link: '/install' },
       { text: 'Usage', link: '/usage' },
-      { text: 'Config', link: '/config' },
+    ],
+  },
+  {
+    text: 'Features',
+    items: [
+      { text: 'Credit Card Formatting', link: '/features/credit-card' },
+      { text: 'Date Formatting', link: '/features/date' },
+      { text: 'Time Formatting', link: '/features/time' },
+      { text: 'Numerical Formatting', link: '/features/numeral' },
+      { text: 'Cursor Tracking', link: '/features/cursor' },
+    ],
+  },
+  {
+    text: 'Vue Components',
+    items: [
+      { text: 'Overview', link: '/vue/' },
+      { text: 'Credit Card Input', link: '/vue/credit-card' },
+      { text: 'Date Input', link: '/vue/date' },
+      { text: 'Time Input', link: '/vue/time' },
+      { text: 'Numeral Input', link: '/vue/numeral' },
     ],
   },
   { text: 'Showcase', link: '/Showcase' },

docs/config.md

@@ -0,0 +1,60 @@
+# Credit Card Formatting
+
+Format and validate credit card numbers with support for various card types.
+
+## Basic Usage
+
+```typescript
+import { formatCreditCard, getCreditCardType, unformatCreditCard } from 'ts-inputs'
+
+// Format a credit card number
+const formattedCard = formatCreditCard('4111111111111111')
+// Output: '4111 1111 1111 1111'
+
+// Get the card type
+const cardType = getCreditCardType('4111111111111111')
+// Output: 'visa'
+
+// Remove formatting
+const unformattedCard = unformatCreditCard('4111 1111 1111 1111')
+// Output: '4111111111111111'
+```
+
+## Options
+
+```typescript
+import { DefaultCreditCardDelimiter, formatCreditCard } from 'ts-inputs'
+
+const options = {
+  delimiter: DefaultCreditCardDelimiter, // defaults to ' '
+  // other options...
+}
+
+const formattedCard = formatCreditCard('4111111111111111', options)
+```
+
+## Supported Card Types
+
+- Visa
+- Mastercard
+- American Express
+- Discover
+- JCB
+- Diners Club
+- Maestro
+- UnionPay
+
+## Validation
+
+The library automatically validates card numbers using the Luhn algorithm and checks for valid card type patterns.
+
+## Error Handling
+
+```typescript
+try {
+  const formattedCard = formatCreditCard('invalid-card-number')
+}
+catch (error) {
+  console.error('Invalid card number:', error.message)
+}
+```

docs/features/credit-card.md

@@ -0,0 +1,77 @@
+# Cursor Tracking
+
+Manage cursor position in input fields during formatting operations.
+
+## Basic Usage
+
+```typescript
+import { registerCursorTracker } from 'ts-inputs'
+
+const inputElement = document.querySelector('input')
+
+// Register cursor tracker
+const cleanup = registerCursorTracker(inputElement, {
+  // tracking options...
+})
+
+// Clean up when done
+cleanup()
+```
+
+## Options
+
+```typescript
+import { CursorTrackingOptions } from 'ts-inputs'
+
+const options: CursorTrackingOptions = {
+  preservePosition: true, // Whether to preserve cursor position after formatting
+  trackSelection: true, // Whether to track text selection
+  debounce: 100, // Debounce time in milliseconds
+}
+```
+
+## Advanced Usage
+
+### With Formatters
+
+```typescript
+import { formatCreditCard, registerCursorTracker } from 'ts-inputs'
+
+const inputElement = document.querySelector('input')
+
+// Register cursor tracker with formatter
+const cleanup = registerCursorTracker(inputElement, {
+  onFormat: value => formatCreditCard(value),
+  preservePosition: true,
+})
+```
+
+### With Multiple Fields
+
+```typescript
+import { registerCursorTracker } from 'ts-inputs'
+
+// Track multiple inputs
+const inputs = document.querySelectorAll('input[data-format]')
+
+inputs.forEach((input) => {
+  const cleanup = registerCursorTracker(input, {
+    onFormat: (value) => {
+      // Custom formatting logic based on data-format attribute
+      const format = input.dataset.format
+      return formatValue(value, format)
+    },
+  })
+})
+```
+
+## Error Handling
+
+```typescript
+try {
+  const cleanup = registerCursorTracker(inputElement, options)
+}
+catch (error) {
+  console.error('Failed to register cursor tracker:', error.message)
+}
+```

docs/features/cursor.md

@@ -0,0 +1,70 @@
+# Date Formatting
+
+Format and validate dates with support for various formats and locales.
+
+## Basic Usage
+
+```typescript
+import { formatDate, isValidDate, parseDate } from 'ts-inputs'
+
+// Format a date
+const formattedDate = formatDate(new Date(), 'YYYY-MM-DD')
+// Output: '2024-03-21'
+
+// Parse a date string
+const parsedDate = parseDate('2024-03-21', 'YYYY-MM-DD')
+// Output: Date object
+
+// Validate a date
+const isValid = isValidDate('2024-03-21')
+// Output: true
+```
+
+## Date Formats
+
+The library supports various date formats:
+
+- `YYYY-MM-DD` (ISO format)
+- `MM/DD/YYYY` (US format)
+- `DD/MM/YYYY` (European format)
+- `YYYY/MM/DD` (Japanese format)
+
+## Locale Support
+
+```typescript
+import { formatDate, setLocale } from 'ts-inputs'
+
+// Set locale
+setLocale('en-US')
+
+// Format with locale
+const formattedDate = formatDate(new Date(), 'LL', { locale: 'en-US' })
+// Output: 'March 21, 2024'
+```
+
+## Date Validation
+
+```typescript
+import { isValidDate, validateDate } from 'ts-inputs'
+
+// Simple validation
+const isValid = isValidDate('2024-03-21')
+
+// Advanced validation with options
+const validation = validateDate('2024-03-21', {
+  minDate: new Date('2024-01-01'),
+  maxDate: new Date('2024-12-31'),
+  format: 'YYYY-MM-DD'
+})
+```
+
+## Error Handling
+
+```typescript
+try {
+  const formattedDate = formatDate('invalid-date', 'YYYY-MM-DD')
+}
+catch (error) {
+  console.error('Invalid date:', error.message)
+}
+```