chore: wip

Author: chrisbbreuer

README.md

@@ -72,6 +72,12 @@ For casual chit-chat with others using this package:
 
 Our address: Stacks.js, 12665 Village Ln #2306, Playa Vista, CA 90094, United States 🌎
 
+## Credits
+
+- [cleave-zen](https://github.com/nosir/cleave-zen)
+- [Chris Breuer](https://github.com/chrisbbreuer)
+- [All Contributors](https://github.com/stacksjs/clarity/contributors)
+
 ## Sponsors
 
 We would like to extend our thanks to the following sponsors for funding Stacks development. If you are interested in becoming a sponsor, please reach out to us.

bun.lock

@@ -49,7 +49,6 @@
     "@types/bun": "^1.2.9",
     "bumpp": "^10.1.0",
     "bun-plugin-dtsx": "^0.21.9",
-    "bunfig": "^0.8.2",
     "changelogen": "^0.6.1",
     "lint-staged": "^15.5.1",
     "simple-git-hooks": "^2.12.1",

package.json

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import type { CursorTrackerDestructor } from '../cursor-tracker'
+import { onBeforeUnmount, onMounted, ref } from 'vue'
+import { registerCursorTracker } from '../cursor-tracker'
+
+interface Props {
+  modelValue: string
+  className?: string
+  placeholder?: string
+  disabled?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  className: '',
+  placeholder: '',
+  disabled: false,
+})
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string): void
+  (e: 'blur', event: Event): void
+}>()
+
+const inputRef = ref<HTMLInputElement | null>(null)
+const cursorTrackerRef = ref<CursorTrackerDestructor | null>(null)
+
+function setInputRef(el: HTMLInputElement | null) {
+  inputRef.value = el
+}
+
+function handleInput(event: Event) {
+  const target = event.target as HTMLInputElement
+  emit('update:modelValue', target.value)
+}
+
+function onBlur(event: Event) {
+  emit('blur', event)
+}
+
+onMounted(() => {
+  if (inputRef.value) {
+    cursorTrackerRef.value = registerCursorTracker({
+      input: inputRef.value,
+      value: props.modelValue,
+      onChange: value => emit('update:modelValue', value),
+    })
+  }
+})
+
+onBeforeUnmount(() => {
+  if (cursorTrackerRef.value) {
+    cursorTrackerRef.value()
+  }
+})
+</script>
+
+<template>
+  <input
+    :ref="setInputRef"
+    :value="modelValue"
+    class="base-input" :class="[className]"
+    :placeholder="placeholder"
+    :disabled="disabled"
+    v-bind="$attrs"
+    @input="handleInput"
+    @blur="onBlur"
+  >
+</template>

src/common/BaseInput.vue

@@ -0,0 +1,19 @@
+export type RequireExactlyOne<T, Keys extends keyof T = keyof T> = {
+  [K in Keys]-?: Required<Pick<T, K>> & Partial<Pick<T, Exclude<Keys, K>>>
+}[Keys]
+
+export type DelimiterType = string
+export type BlocksType = number[]
+
+export interface StripDelimitersProps {
+  value: string
+  delimiters: DelimiterType[]
+}
+
+export interface GetFormattedValueProps {
+  value: string
+  blocks: BlocksType
+  delimiter?: DelimiterType
+  delimiters?: DelimiterType[]
+  delimiterLazyShow?: boolean
+}

src/common/types.ts

@@ -0,0 +1,90 @@
+import type {
+  BlocksType,
+  DelimiterType,
+  GetFormattedValueProps,
+  StripDelimitersProps,
+} from './types'
+
+// const test = (): string => {
+//   return 'test-eslint'
+// }
+
+export function isString(value: any): value is string {
+  return typeof value === 'string'
+}
+
+export function stripNonNumeric(value: string): string {
+  return value.replace(/\D/g, '')
+}
+
+export function getMaxLength(blocks: BlocksType): number {
+  return blocks.reduce((previous: number, current: number) => previous + current, 0)
+}
+
+export function headStr(str: string, length: number): string {
+  return str.slice(0, length)
+}
+
+export function getDelimiterRegexByDelimiter(delimiter: string): RegExp {
+  return new RegExp(delimiter.replace(/([.?*+^$[\]\\(){}|-])/g, '\\$1'), 'g')
+}
+
+export function stripDelimiters({
+  value,
+  delimiters,
+}: StripDelimitersProps): string {
+  delimiters.forEach((current: DelimiterType) => {
+    current.split('').forEach((letter) => {
+      value = value.replace(getDelimiterRegexByDelimiter(letter), '')
+    })
+  })
+
+  return value
+}
+
+export function getFormattedValue({
+  value,
+  blocks,
+  delimiter = '',
+  delimiters = [],
+  delimiterLazyShow = false,
+}: GetFormattedValueProps): string {
+  let result = ''
+  let valueRemaining = value
+  let currentDelimiter = ''
+
+  blocks.forEach((length: number, index: number) => {
+    if (valueRemaining.length > 0) {
+      const sub = valueRemaining.slice(0, length)
+      const rest = valueRemaining.slice(length)
+
+      if (delimiters.length > 0) {
+        currentDelimiter
+          = delimiters[delimiterLazyShow ? index - 1 : index] ?? currentDelimiter
+      }
+      else {
+        currentDelimiter = delimiter
+      }
+
+      if (delimiterLazyShow) {
+        if (index > 0) {
+          result += currentDelimiter
+        }
+
+        result += sub
+      }
+      else {
+        result += sub
+
+        if (sub.length === length && index < blocks.length - 1) {
+          result += currentDelimiter
+        }
+      }
+
+      // update remaining string
+      valueRemaining = rest
+    }
+  })
+
+  return result
+}

src/common/utils.ts

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import type { CreditCardType, FormatCreditCardOptions } from '../credit-card'
+import { computed, watch } from 'vue'
+import BaseInput from '../common/BaseInput.vue'
+import { DefaultCreditCardDelimiter, formatCreditCard, getCreditCardType } from '../credit-card'
+
+interface Props {
+  modelValue: string
+  delimiter?: string
+  className?: string
+  placeholder?: string
+  options?: Omit<FormatCreditCardOptions, 'delimiter'>
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  delimiter: DefaultCreditCardDelimiter,
+  className: '',
+  options: () => ({}),
+})
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string): void
+  (e: 'cardTypeChange', type: CreditCardType): void
+}>()
+
+const formattedValue = computed({
+  get: () => props.modelValue,
+  set: (value: string) => {
+    const formatted = formatCreditCard(value, {
+      delimiter: props.delimiter,
+      ...props.options,
+    })
+    emit('update:modelValue', formatted)
+  },
+})
+
+watch(formattedValue, (value) => {
+  const cardType = getCreditCardType(value)
+  emit('cardTypeChange', cardType)
+}, { immediate: true })
+</script>
+
+<template>
+  <BaseInput
+    v-bind="$attrs"
+    v-model="formattedValue"
+    :placeholder="placeholder"
+    :maxlength="19"
+    :class="className"
+  />
+</template>

src/components/CreditCardInput.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import type { DatePatternType, FormatDateOptions } from '../date'
+import { computed } from 'vue'
+import BaseInput from '../common/BaseInput.vue'
+import { DefaultDateDelimiter, formatDate } from '../date'
+
+interface Props {
+  modelValue: string
+  pattern?: DatePatternType
+  delimiter?: string
+  className?: string
+  options?: Omit<FormatDateOptions, 'pattern' | 'delimiter'>
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  pattern: ['d', 'm', 'Y'],
+  delimiter: DefaultDateDelimiter,
+  className: '',
+  options: () => ({}),
+})
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string): void
+}>()
+
+const formattedValue = computed({
+  get: () => props.modelValue,
+  set: (value: string) => {
+    const formatted = formatDate(value, {
+      pattern: props.pattern,
+      delimiter: props.delimiter,
+      ...props.options,
+    })
+    emit('update:modelValue', formatted)
+  },
+})
+</script>
+
+<template>
+  <BaseInput
+    v-bind="$attrs"
+    v-model="formattedValue"
+    :placeholder="pattern"
+    :class="className"
+  />
+</template>

src/components/DateInput.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import type { FormatNumeralOptions } from '../numeral/types'
+import { computed } from 'vue'
+import BaseInput from '../common/BaseInput.vue'
+import { DefaultNumeralDelimiter, formatNumeral, NumeralThousandGroupStyles } from '../numeral'
+
+interface Props {
+  modelValue: string
+  delimiter?: string
+  thousandGroupStyle?: NumeralThousandGroupStyles
+  className?: string
+  options?: Omit<FormatNumeralOptions, 'delimiter' | 'thousandGroupStyle'>
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  delimiter: DefaultNumeralDelimiter,
+  thousandGroupStyle: NumeralThousandGroupStyles.THOUSAND,
+  className: '',
+  options: () => ({}),
+})
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string): void
+}>()
+
+const formattedValue = computed({
+  get: () => props.modelValue,
+  set: (value: string) => {
+    const formatted = formatNumeral(value, {
+      delimiter: props.delimiter,
+      thousandGroupStyle: props.thousandGroupStyle,
+      ...props.options,
+    })
+    emit('update:modelValue', formatted)
+  },
+})
+</script>
+
+<template>
+  <BaseInput
+    v-bind="$attrs"
+    v-model="formattedValue"
+    placeholder="1,234,567.89"
+    :class="className"
+  />
+</template>