chore: wip typecheck issue

Author: cab-mikee

bun.lock

@@ -51,6 +51,8 @@
     "@stacksjs/docs": "^0.70.23",
     "@stacksjs/eslint-config": "^4.10.2-beta.3",
     "@types/bun": "^1.2.10",
+    "@types/clean-css": "^4.2.11",
+    "@types/google.maps": "^3.58.1",
     "bumpp": "^10.1.0",
     "bun-plugin-dtsx": "^0.21.9",
     "changelogen": "^0.6.1",

package.json

@@ -1,6 +1,10 @@
 import type { FormatPhoneOptions } from './types'
 import { DefaultPhoneDelimiter, DefaultPhonePattern, DefaultPhoneRegion } from './constants'
 
+type HandleFormatOptions = {
+  value: string
+} & FormatPhoneOptions
+
 // Phone number patterns by region
 const PHONE_PATTERNS: Record<string, number[]> = {
   US: [3, 3, 4], // (123) 456-7890
@@ -36,37 +40,34 @@ function handleFormat({
   region,
   includeCountryCode,
   format,
-}: {
-  value: string
-  delimiter: string
-  pattern: number[]
-  region: string
-  includeCountryCode: boolean
-  format: 'national' | 'international'
-}): string {
+}: HandleFormatOptions): string {
   // Remove all non-digit characters
   const digits = value.replace(/\D/g, '')
 
-  // Apply pattern
   let result = ''
-  let digitIndex = 0
 
-  for (let i = 0; i < pattern.length; i++) {
-    const groupSize = pattern[i]
-    const group = digits.slice(digitIndex, digitIndex + groupSize)
+  if (pattern) {
+    let digitIndex = 0
 
-    if (group) {
-      if (result) {
-        result += delimiter
+    for (let i = 0; i < pattern.length; i++) {
+      const groupSize = pattern[i]
+      const group = digits.slice(digitIndex, digitIndex + groupSize)
+
+      if (group) {
+        if (result) {
+          result += delimiter
+        }
+        result += group
+        digitIndex += groupSize
       }
-      result += group
-      digitIndex += groupSize
     }
   }
 
-  // Add country code if needed
-  if (includeCountryCode && format === 'international' && COUNTRY_CODES[region]) {
-    result = `${COUNTRY_CODES[region]} ${result}`
+  if (region) {
+    // Add country code if needed
+    if (includeCountryCode && format === 'international' && COUNTRY_CODES[region]) {
+      result = `${COUNTRY_CODES[region]} ${result}`
+    }
   }
 
   return result

packages/ts-inputs/src/phone.ts

@@ -30,7 +30,7 @@
   "types": "dist/index.d.ts",
   "files": ["README.md", "dist"],
   "scripts": {
-    "build": "bunx --bun vite build --mode lib",
+    "build": "bunx --bun vite build --mode lib && bun run build:types",
     "build:types": "bunx vue-tsc -p tsconfig.build.json && bunx api-extractor run",
     "lint": "bunx --bun eslint .",
     "lint:fix": "bunx --bun eslint . --fix"

packages/vue/package.json

@@ -288,6 +288,15 @@ function handleDatePickerEvents(event: string, value?: any) {
       break
   }
 }
+
+interface FormatNumeralOptions {
+  delimiter?: string
+  thousandGroupStyle?: string
+  integerScale?: number
+  decimalMark?: string
+  decimalScale?: number
+  positiveOnly?: boolean
+}
 </script>
 
 <template>
@@ -400,3 +409,27 @@ function handleDatePickerEvents(event: string, value?: any) {
   display: inline-block;
 }
 </style>
+
+declare global {
+  namespace google {
+    namespace maps {
+      namespace places {
+        class Autocomplete {
+          constructor(input: HTMLInputElement, options?: AutocompleteOptions)
+          addListener(eventName: string, handler: Function): void
+          getPlace(): any
+        }
+      }
+    }
+  }
+  interface Window {
+    google: typeof google
+  }
+}
+
+interface AutocompleteOptions {
+  types?: string[]
+  componentRestrictions?: {
+    country: string | string[]
+  }
+}

packages/vue/src/components/BaseInput.vue

@@ -1,4 +1,6 @@
 <script lang="ts" setup>
+import type { Ref } from 'vue'
+
 import type {
   DatepickerInputRef,
   DatepickerMenuRef,
@@ -8,14 +10,14 @@ import type {
   ModelValue,
   MonthYearOpt,
 } from './interfaces'
-
 import {
   computed,
   getCurrentInstance,
   nextTick,
   onMounted,
   onUnmounted,
   ref,
+
   Teleport as TeleportCmp,
   toRef,
   useSlots,
@@ -50,33 +52,41 @@ const props = defineProps({
   ...AllProps,
 })
 
-const emit = defineEmits([
-  'update:model-value',
-  'update:model-timezone-value',
-  'textSubmit',
-  'closed',
-  'cleared',
-  'open',
-  'focus',
-  'blur',
-  'internalModelChange',
-  'recalculatePosition',
-  'flowStep',
-  'updateMonthYear',
-  'invalidSelect',
-  'invalidFixedRange',
-  'tooltipOpen',
-  'tooltipClose',
-  'timePickerOpen',
-  'timePickerClose',
-  'amPmChange',
-  'rangeStart',
-  'rangeEnd',
-  'dateUpdate',
-  'invalidDate',
-  'overlayToggle',
-  'textInput',
-])
+const emit = defineEmits<{
+  (e: 'update:model-value', value: ModelValue): void
+  (e: 'update:model-timezone-value', value: ModelValue): void
+  (e: 'internal-model-change', value: ModelValue, externalValue: ModelValue): void
+  (e: 'auto-apply', value?: boolean): void
+  (e: 'update-flow-step'): void
+  (e: 'toggle-year-picker', value: { flow: boolean }): void
+  (e: 'update-month-year', value: { month: number | null, year: number, fromNav: boolean }): void
+  (e: 'textSubmit', value: string): void
+  (e: 'closed'): void
+  (e: 'cleared'): void
+  (e: 'open'): void
+  (e: 'focus'): void
+  (e: 'blur'): void
+  (e: 'recalculatePosition'): void
+  (e: 'flowStep', value: number): void
+  (e: 'updateMonthYear', value: { month: number | null, year: number, fromNav: boolean }): void
+  (e: 'invalidSelect', value: ModelValue): void
+  (e: 'invalidFixedRange', value: ModelValue): void
+  (e: 'tooltipOpen', value: ModelValue): void
+  (e: 'tooltipClose', value: ModelValue): void
+  (e: 'timePickerOpen', value: ModelValue): void
+  (e: 'timePickerClose', value: ModelValue): void
+  (e: 'amPmChange', value: { amPm: string }): void
+  (e: 'rangeStart', value: ModelValue): void
+  (e: 'rangeEnd', value: ModelValue): void
+  (e: 'dateUpdate', value: ModelValue): void
+  (e: 'invalidDate', value: ModelValue): void
+  (e: 'overlayToggle', value: boolean): void
+  (e: 'textInput', value: string): void
+}>()
+
+function handleEmit(eventName: string, value?: any) {
+  emit(eventName as any, value)
+}
 
 const slots = useSlots()
 const isOpen = ref(false)

packages/vue/src/components/datetime-picker/DateTimePicker.vue

@@ -658,7 +658,7 @@ export function useDatePicker(props: PickerBasePropsType, emit: VueEmit, trigger
     isHours = true,
     isSeconds = false,
   ): void => {
-    updateTimeValues(value, isHours, isSeconds, handleTimeUpdate)
+    updateTimeValues(value, isHours ? 'hours' : isSeconds ? 'seconds' : 'minutes', handleTimeUpdate)
   }
 
   function mapInternalModuleValues(fromMount = false): void {

packages/vue/src/components/datetime-picker/components/DatePicker/date-picker.ts

@@ -25,21 +25,22 @@ const props = defineProps({
   ...AllProps,
 })
 
-const emit = defineEmits([
-  'clear',
-  'open',
-  'update:input-value',
-  'setInputDate',
-  'close',
-  'selectDate',
-  'setEmptyDate',
-  'toggle',
-  'focusPrev',
-  'focus',
-  'blur',
-  'realBlur',
-  'textInput',
-])
+const emit = defineEmits<{
+  (e: 'update:model-value', value: any): void
+  (e: 'clear'): void
+  (e: 'open'): void
+  (e: 'update:input-value', value: string): void
+  (e: 'setInputDate', value: any): void
+  (e: 'close'): void
+  (e: 'selectDate'): void
+  (e: 'setEmptyDate'): void
+  (e: 'toggle'): void
+  (e: 'focusPrev'): void
+  (e: 'focus'): void
+  (e: 'blur'): void
+  (e: 'realBlur'): void
+  (e: 'textInput', value: string): void
+}>()
 
 const {
   defaultedTextInput,

packages/vue/src/components/datetime-picker/components/DatepickerInput.vue

@@ -178,22 +178,22 @@ export function useMonthPicker(props: PickerBasePropsType, emit: VueEmit) {
     emit('auto-apply', true)
   }
 
-  const selectMonth = (month: number, instance: number) => {
+  const selectMonth = (month: number, instance: number): void => {
     calendars.value[instance].month = month
-    emitMonthYearUpdate(instance, calendars.value[instance].year, month)
+    emitMonthYearUpdate(instance, calendars.value[instance].year, undefined)
     if (defaultedMultiDates.value.enabled)
       return selectMultiMonths(month, instance)
     if (defaultedRange.value.enabled)
       return selectRangedMonth(month, instance)
     return selectSingleMonth(month, instance)
   }
 
-  const selectYear = (year: number, instance: number) => {
+  const selectYear = (year: number, instance: number): void => {
     onYearSelect(year, instance)
-    emitMonthYearUpdate(instance, year, null)
+    emitMonthYearUpdate(instance, year, undefined)
   }
 
-  function emitMonthYearUpdate(month: number, year: number, fromNav = false): void {
+  function emitMonthYearUpdate(month: number | null, year: number, fromNav: boolean | undefined = false): void {
     emit('update-month-year', { month, year, fromNav })
   }
 
@@ -202,11 +202,11 @@ export function useMonthPicker(props: PickerBasePropsType, emit: VueEmit) {
     emitMonthYearUpdate(instance, year)
   }
 
-  const setHoverDate = (month: number, instance: number) => {
+  const setHoverDate = (month: number, instance: number): void => {
     hoverDate.value = monthToDate(month, instance)
   }
 
-  const presetDate = (value: Date[] | string[] | Date | string, noTz?: boolean) => {
+  const presetDate = (value: Date[] | string[] | Date | string, noTz?: boolean): void => {
     setPresetDate({
       value,
       modelValue,

packages/vue/src/components/datetime-picker/components/MonthPicker/month-picker.ts

@@ -54,7 +54,7 @@ const closeTimePickerBtn = ref(null)
 const timeInputRefs = ref<TimeInputRef[]>([])
 const overlayRef = ref<HTMLElement | null>(null)
 const timePickerOverlayOpen = ref(false)
-const navigationFlow = ref('time') as Flow
+const flow = ref<Flow>('time')
 
 onMounted(() => {
   emit('mount')
@@ -176,7 +176,7 @@ defineExpose({ toggleTimePicker })
   <div class="dp--tp-wrap" :data-dp-mobile="isMobile">
     <button
       v-if="!timePicker && !timePickerInline"
-      v-show="!hideNavigationButtons(hideNavigation, navigationFlow)"
+      v-show="!hideNavigationButtons(hideNavigation, flow)"
       ref="openTimePickerBtn"
       type="button"
       :class="{ ...toggleButtonClass, 'dp--hidden-el': showTimePicker }"
@@ -253,7 +253,7 @@ defineExpose({ toggleTimePicker })
           </template>
           <button
             v-if="!timePicker && !timePickerInline"
-            v-show="!hideNavigationButtons(hideNavigation, navigationFlow)"
+            v-show="!hideNavigationButtons(hideNavigation, flow)"
             ref="closeTimePickerBtn"
             type="button"
             :class="{ ...toggleButtonClass, 'dp--hidden-el': timePickerOverlayOpen }"