chore: lint

chore: fix lint issues

Author: cab-mikee

docs/.vitepress/sw.ts

@@ -1,5 +1,4 @@
 /// <reference types="vite/client" />
-
 /// <reference lib="webworker" />
 
 import { CacheableResponsePlugin } from 'workbox-cacheable-response'
@@ -27,7 +26,7 @@ if (import.meta.env.PROD) {
   const base = swPath === 0 ? '/' : self.location.pathname.slice(0, swPath + 1)
   function escapeStringRegexp(value: string) {
     // Escape characters with special meaning either inside or outside character sets.
-    // Use a simple backslash escape when it’s always valid, and a `\xnn` escape when the simpler form would be disallowed by Unicode patterns’ stricter grammar.
+    // Use a simple backslash escape when it's always valid, and a `\xnn` escape when the simpler form would be disallowed by Unicode patterns' stricter grammar.
     return value
       .replace(/[|\\{}()[\]^$+*?.]/g, '\\$&')
       .replace(/-/g, '\\x2d')

docs/.vitepress/theme/components/vue-demo/CreditCardDemo.vue

@@ -9,7 +9,6 @@ const cardType = ref<CreditCardType | null>(null)
 
 function handleCardTypeChange(type: CreditCardType) {
   cardType.value = type
-  console.log('Card type:', type)
 }
 
 const cardIcon = computed(() => {

packages/ts-inputs/src/phone.ts

@@ -29,7 +29,7 @@ const COUNTRY_CODES: Record<string, string> = {
   CA: '+1',
 }
 
-function format({
+function handleFormat({
   value,
   delimiter,
   pattern,
@@ -84,7 +84,7 @@ export function formatPhone(value: string, options?: FormatPhoneOptions): string
   // Use region pattern if no custom pattern provided
   const selectedPattern = pattern ?? PHONE_PATTERNS[region] ?? DefaultPhonePattern
 
-  return format({
+  return handleFormat({
     value,
     delimiter,
     pattern: selectedPattern,

packages/ts-inputs/src/utils.ts

@@ -9,7 +9,7 @@ import type {
 //   return 'test-eslint'
 // }
 
-export function isString(value: any): value is string {
+export function isString(value: unknown): value is string {
   return typeof value === 'string'
 }
 

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

@@ -53,29 +53,29 @@ const props = defineProps({
 const emit = defineEmits([
   'update:model-value',
   'update:model-timezone-value',
-  'text-submit',
+  'textSubmit',
   'closed',
   'cleared',
   'open',
   'focus',
   'blur',
-  'internal-model-change',
-  'recalculate-position',
-  'flow-step',
-  'update-month-year',
-  'invalid-select',
-  'invalid-fixed-range',
-  'tooltip-open',
-  'tooltip-close',
-  'time-picker-open',
-  'time-picker-close',
-  'am-pm-change',
-  'range-start',
-  'range-end',
-  'date-update',
-  'invalid-date',
-  'overlay-toggle',
-  'text-input',
+  'internalModelChange',
+  'recalculatePosition',
+  'flowStep',
+  'updateMonthYear',
+  'invalidSelect',
+  'invalidFixedRange',
+  'tooltipOpen',
+  'tooltipClose',
+  'timePickerOpen',
+  'timePickerClose',
+  'amPmChange',
+  'rangeStart',
+  'rangeEnd',
+  'dateUpdate',
+  'invalidDate',
+  'overlayToggle',
+  'textInput',
 ])
 
 const slots = useSlots()
@@ -108,46 +108,6 @@ const { isMobile } = useResponsive(defaultedConfig)
 
 const currentInstance = getCurrentInstance()
 
-onMounted(() => {
-  parseExternalModelValue(props.modelValue)
-  nextTick().then(() => {
-    if (!defaultedInline.value.enabled) {
-      const el = getScrollableParent(pickerWrapperRef.value)
-      el?.addEventListener('scroll', onScroll)
-
-      window?.addEventListener('resize', onResize)
-    }
-  })
-
-  if (defaultedInline.value.enabled) {
-    isOpen.value = true
-  }
-
-  window?.addEventListener('keyup', onKeyUp)
-  window?.addEventListener('keydown', onKeyDown)
-})
-
-onUnmounted(() => {
-  if (!defaultedInline.value.enabled) {
-    const el = getScrollableParent(pickerWrapperRef.value)
-    el?.removeEventListener('scroll', onScroll)
-    window?.removeEventListener('resize', onResize)
-  }
-  window?.removeEventListener('keyup', onKeyUp)
-  window?.removeEventListener('keydown', onKeyDown)
-})
-
-const slotList = mapSlots(slots, 'all', props.presetDates)
-const inputSlots = mapSlots(slots, 'input')
-
-watch(
-  [modelValueRef, timezoneRef],
-  () => {
-    parseExternalModelValue(modelValueRef.value)
-  },
-  { deep: true },
-)
-
 const { openOnTop, menuStyle, xCorrect, setMenuPosition, getScrollableParent, shadowRender } = usePosition({
   menuRef: dpWrapMenuRef,
   menuRefInner: dpMenuRef,
@@ -249,7 +209,7 @@ function onKeyDown(event: KeyboardEvent) {
   shiftKeyActive.value = event.shiftKey
 }
 
-function openMenu() {
+function openMenu(): void {
   if (!props.disabled && !props.readonly) {
     shadowRender(currentInstance, DatepickerMenu, props)
     setMenuPosition(false)
@@ -313,7 +273,7 @@ function selectDate(): void {
     closeMenu()
   }
   else {
-    emit('invalid-select', internalModelValue.value)
+    emit('invalidSelect', internalModelValue.value)
   }
 }
 
@@ -401,7 +361,7 @@ function setInputDate(date: Date | Date[] | null, submit?: boolean, tabbed = fal
     if (submit) {
       shouldFocusNext.value = tabbed
       selectDate()
-      emit('text-submit')
+      emit('textSubmit')
     }
     else if (props.autoApply) {
       autoApplyValue()
@@ -411,7 +371,7 @@ function setInputDate(date: Date | Date[] | null, submit?: boolean, tabbed = fal
     })
   }
   else {
-    emit('invalid-date', date)
+    emit('invalidDate', date)
   }
 }
 
@@ -476,15 +436,55 @@ function clickOutside(validateBeforeEmit: () => boolean, evt: PointerEvent) {
   return closeMenu(true)
 }
 
-function handleFlow(skipStep = 0) {
+function handleFlow(skipStep = 0): void {
   dpMenuRef.value?.handleFlow(skipStep)
 }
 
-const getDpWrapMenuRef = () => dpWrapMenuRef
+const getDpWrapMenuRef = (): Ref<HTMLElement | null> => dpWrapMenuRef
 
 onClickOutside(dpWrapMenuRef, inputRef as unknown as MaybeElementRef, (evt: PointerEvent) =>
   clickOutside(validateBeforeEmit, evt))
 
+onMounted(() => {
+  parseExternalModelValue(props.modelValue)
+  nextTick().then(() => {
+    if (!defaultedInline.value.enabled) {
+      const el = getScrollableParent(pickerWrapperRef.value)
+      el?.addEventListener('scroll', onScroll)
+
+      window?.addEventListener('resize', onResize)
+    }
+  })
+
+  if (defaultedInline.value.enabled) {
+    isOpen.value = true
+  }
+
+  window?.addEventListener('keyup', onKeyUp)
+  window?.addEventListener('keydown', onKeyDown)
+})
+
+onUnmounted(() => {
+  if (!defaultedInline.value.enabled) {
+    const el = getScrollableParent(pickerWrapperRef.value)
+    el?.removeEventListener('scroll', onScroll)
+    window?.removeEventListener('resize', onResize)
+  }
+  window?.removeEventListener('keyup', onKeyUp)
+  window?.removeEventListener('keydown', onKeyDown)
+})
+
+const slotList = mapSlots(slots, 'all', props.presetDates)
+const inputSlots = mapSlots(slots, 'input')
+
+watch(
+  [modelValueRef, timezoneRef],
+  () => {
+    parseExternalModelValue(modelValueRef.value)
+  },
+  { deep: true },
+)
+
 defineExpose({
   closeMenu,
   selectDate,
@@ -519,7 +519,7 @@ defineExpose({
       @focus="handleInputFocus"
       @blur="handleBlur"
       @real-blur="isInputFocused = false"
-      @text-input="$emit('text-input', $event)"
+      @text-input="$emit('textInput', $event)"
     >
       <template v-for="(slot, i) in inputSlots" #[slot]="args" :key="i">
         <slot :name="slot" v-bind="args" />
@@ -548,22 +548,22 @@ defineExpose({
             @select-date="selectDate"
             @auto-apply="autoApplyValue"
             @time-update="timeUpdate"
-            @flow-step="$emit('flow-step', $event)"
-            @update-month-year="$emit('update-month-year', $event)"
-            @invalid-select="$emit('invalid-select', internalModelValue)"
-            @auto-apply-invalid="$emit('invalid-select', $event)"
-            @invalid-fixed-range="$emit('invalid-fixed-range', $event)"
+            @flow-step="$emit('flowStep', $event)"
+            @update-month-year="$emit('updateMonthYear', $event)"
+            @invalid-select="$emit('invalidSelect', internalModelValue)"
+            @auto-apply-invalid="$emit('invalidSelect', $event)"
+            @invalid-fixed-range="$emit('invalidFixedRange', $event)"
             @recalculate-position="setMenuPosition"
-            @tooltip-open="$emit('tooltip-open', $event)"
-            @tooltip-close="$emit('tooltip-close', $event)"
-            @time-picker-open="$emit('time-picker-open', $event)"
-            @time-picker-close="$emit('time-picker-close', $event)"
-            @am-pm-change="$emit('am-pm-change', $event)"
-            @range-start="$emit('range-start', $event)"
-            @range-end="$emit('range-end', $event)"
-            @date-update="$emit('date-update', $event)"
-            @invalid-date="$emit('invalid-date', $event)"
-            @overlay-toggle="$emit('overlay-toggle', $event)"
+            @tooltip-open="$emit('tooltipOpen', $event)"
+            @tooltip-close="$emit('tooltipClose', $event)"
+            @time-picker-open="$emit('timePickerOpen', $event)"
+            @time-picker-close="$emit('timePickerClose', $event)"
+            @am-pm-change="$emit('amPmChange', $event)"
+            @range-start="$emit('rangeStart', $event)"
+            @range-end="$emit('rangeEnd', $event)"
+            @date-update="$emit('dateUpdate', $event)"
+            @invalid-date="$emit('invalidDate', $event)"
+            @overlay-toggle="$emit('overlayToggle', $event)"
             @menu-blur="$emit('blur')"
           >
             <template v-for="(slot, i) in slotList" #[slot]="args" :key="i">

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

@@ -20,7 +20,7 @@ const props = defineProps({
   ...PickerBaseProps,
 })
 
-const emit = defineEmits(['close-picker', 'select-date', 'select-now', 'invalid-select'])
+const emit = defineEmits(['closePicker', 'selectDate', 'selectNow', 'invalidSelect'])
 
 const {
   defaultedActionRow,
@@ -142,10 +142,10 @@ function selectDate(): void {
     && isMonthValid.value(props.internalModelValue)
     && validDateRange.value
   ) {
-    emit('select-date')
+    emit('selectDate')
   }
   else {
-    emit('invalid-select')
+    emit('invalidSelect')
   }
 }
 </script>
@@ -158,8 +158,8 @@ function selectDate(): void {
         v-bind="{
           internalModelValue,
           disabled,
-          selectDate: () => $emit('select-date'),
-          closePicker: () => $emit('close-picker'),
+          selectDate: (): void => $emit('selectDate'),
+          closePicker: (): void => $emit('closePicker'),
         }"
       />
     </template>
@@ -187,17 +187,17 @@ function selectDate(): void {
             ref="cancelButtonRef"
             type="button"
             class="dp__action_button dp__action_cancel"
-            @click="$emit('close-picker')"
-            @keydown="checkKeyDown($event, () => $emit('close-picker'))"
+            @click="$emit('closePicker')"
+            @keydown="(e: KeyboardEvent): void => checkKeyDown(e, () => $emit('closePicker'))"
           >
             {{ cancelText }}
           </button>
           <button
             v-if="defaultedActionRow.showNow"
             type="button"
             class="dp__action_button dp__action_cancel"
-            @click="$emit('select-now')"
-            @keydown="checkKeyDown($event, () => $emit('select-now'))"
+            @click="$emit('selectNow')"
+            @keydown="(e: KeyboardEvent): void => checkKeyDown(e, () => $emit('selectNow'))"
           >
             {{ nowButtonLabel }}
           </button>

packages/vue/src/components/datetime-picker/components/Common/ArrowBtn.vue

@@ -16,13 +16,13 @@ defineProps<{
 }>()
 
 const emit = defineEmits<{
-  'activate': []
-  'set-ref': [i: Ref<HTMLElement | null>]
+  activate: []
+  setRef: [i: Ref<HTMLElement | null>]
 }>()
 
 const elRef = ref<HTMLElement | null>(null)
 
-onMounted(() => emit('set-ref', elRef)) // eslint-disable-line vue/no-ref-as-operand
+onMounted(() => emit('setRef', elRef)) // eslint-disable-line vue/no-ref-as-operand
 </script>
 
 <template>

packages/vue/src/components/datetime-picker/components/Common/InstanceWrap.vue

@@ -4,7 +4,7 @@ import { computed } from 'vue'
 const props = defineProps<{ multiCalendars: number, stretch?: boolean, collapse?: boolean, isMobile?: boolean }>()
 
 const instances = computed((): number[] =>
-  props.multiCalendars > 0 ? [...new Array(props.multiCalendars).keys()] : [0],
+  props.multiCalendars > 0 ? Array.from({ length: props.multiCalendars }, (_, i) => i) : [0],
 )
 
 const calendarInstanceClassWrapper = computed(() => ({