feat: rewrite validators and tests (#648)

---------

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Haoqun Jiang <haoqunjiang@gmail.com>

Author: 3 people

client.d.ts

@@ -7,3 +7,8 @@ declare module 'v-calendar' {
   export * from 'v-calendar/dist/types/src/index.d.ts'
   export { default } from 'v-calendar/dist/types/src/index.d.ts'
 }
+
+interface NumberConstructor {
+  isFinite(value: unknown): value is number
+  isInteger(value: unknown): value is number
+}

lib/components/SButton.vue

@@ -94,7 +94,7 @@ const hasTooltip = computed(() => {
   )
 })
 
-function handleClick(): void {
+function onClick(): void {
   if (!props.loading) {
     props.disabled ? emit('disabled-click') : emit('click')
   }
@@ -119,7 +119,7 @@ function handleClick(): void {
       :class="classes"
       :href
       role="button"
-      @click="handleClick"
+      @click="onClick"
     >
       <span class="content">
         <span v-if="_leadIcon" class="icon" :class="iconMode">

lib/components/SDropdownSectionFilter.vue

@@ -61,7 +61,7 @@ function focusNext(event: any) {
   event.target.parentNode.nextElementSibling?.firstElementChild?.focus()
 }
 
-function handleClick(option: DropdownSectionFilterOption, value: any) {
+function onClick(option: DropdownSectionFilterOption, value: any) {
   option.onClick && option.onClick(value)
   props.onClick && props.onClick(value)
 }
@@ -81,7 +81,7 @@ function handleClick(option: DropdownSectionFilterOption, value: any) {
           tabindex="0"
           @keyup.up.prevent="focusPrev"
           @keyup.down.prevent="focusNext"
-          @click="handleClick(option, option.value)"
+          @click="onClick(option, option.value)"
         >
           <span v-if="Array.isArray(unref(selected))" class="checkbox">
             <span class="checkbox-box">

lib/components/SInputAddon.vue

@@ -7,7 +7,6 @@ import {
   useManualDropdownPosition
 } from '../composables/Dropdown'
 import { useFlyout } from '../composables/Flyout'
-import { isString } from '../support/Utils'
 import SDropdown from './SDropdown.vue'
 
 const props = withDefaults(defineProps<{
@@ -44,19 +43,19 @@ const selectedOptionLabel = computed(() => {
 const { isOpen, open } = useFlyout(container)
 const { position, update: updatePosition } = useManualDropdownPosition(container)
 
-function handleFocus() {
+function onFocus() {
   if (!props.disabled) {
     isFocused.value = true
   }
 }
 
-function handleBlur() {
+function onBlur() {
   if (!props.disabled) {
     isFocused.value = false
   }
 }
 
-function handleClickButton() {
+function onClickButton() {
   if (!props.disabled) {
     emit('click')
 
@@ -74,14 +73,14 @@ function handleClickButton() {
       :is="clickable ? 'button' : 'div'"
       class="action"
       :disabled="clickable ? props.disabled : null"
-      @focus="handleFocus"
-      @blur="handleBlur"
-      @click="handleClickButton"
+      @focus="onFocus"
+      @blur="onBlur"
+      @click="onClickButton"
     >
       <span class="action-label">
         <component
           :is="props.label"
-          v-if="props.label && !isString(props.label)"
+          v-if="props.label && (typeof props.label !== 'string')"
           class="action-icon"
         />
         <span v-else>

lib/components/SInputCheckboxes.vue

@@ -52,7 +52,7 @@ function isChecked(value: Value): boolean {
   return _value.value.includes(value)
 }
 
-function handleChange(value: Value): void {
+function onChange(value: Value): void {
   const distinct = _value.value
     .filter((v) => v !== value)
     .concat(_value.value.includes(value) ? [] : [value])
@@ -88,7 +88,7 @@ function handleChange(value: Value): void {
             :text="option.label"
             :disabled="option.disabled ?? disabled"
             :model-value="isChecked(option.value)"
-            @update:model-value="handleChange(option.value)"
+            @update:model-value="onChange(option.value)"
           />
         </div>
       </div>

lib/components/SInputDate.vue

@@ -41,7 +41,7 @@ function emitInput(date?: string) {
   emit('update:model-value', date ? day(date) : null)
 }
 
-function emitBlur() {
+function onBlur() {
   setTimeout(() => {
     props.validation && props.validation.$touch()
   }, 100)
@@ -86,7 +86,7 @@ function emitBlur() {
           :disabled
           :tabindex
           v-on="disabled ? {} : inputEvents"
-          @blur="emitBlur"
+          @blur="onBlur"
         >
       </DatePicker>
     </div>

lib/components/SInputDropdownItem.vue

@@ -38,26 +38,26 @@ defineEmits<{
 <template>
   <div class="SInputDropdownItem" :class="[size, { disabled }]">
     <div v-if="Array.isArray(item)" class="many">
-      <template v-for="(item, i) in item" :key="i">
-        <div v-if="item.type === undefined || item.type === 'text'" class="many-text">
-          <div class="many-text-value">{{ item.label }}</div>
+      <template v-for="(el, i) in item" :key="i">
+        <div v-if="el.type === undefined || el.type === 'text'" class="many-text">
+          <div class="many-text-value">{{ el.label }}</div>
           <button
             v-if="removable"
             class="many-text-close"
-            @click.stop="$emit('remove', item.value)"
+            @click.stop="$emit('remove', el.value)"
           >
             <IconX class="many-text-close-icon" />
           </button>
         </div>
-        <div v-else-if="item.type === 'avatar'" class="many-avatar">
+        <div v-else-if="el.type === 'avatar'" class="many-avatar">
           <div class="many-avatar-body">
-            <div class="many-avatar-image"><SAvatar size="fill" :avatar="item.image" /></div>
-            <div class="many-avatar-name">{{ item.label }}</div>
+            <div class="many-avatar-image"><SAvatar size="fill" :avatar="el.image" /></div>
+            <div class="many-avatar-name">{{ el.label }}</div>
           </div>
           <button
             v-if="removable"
             class="many-avatar-close"
-            @click.stop="$emit('remove', item.value)"
+            @click.stop="$emit('remove', el.value)"
           >
             <IconX class="many-avatar-close-icon" />
           </button>

lib/components/SInputNumber.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import { isString } from '../support/Utils'
 import { type Props as BaseProps } from './SInputBase.vue'
 import SInputText from './SInputText.vue'
 
@@ -41,7 +40,7 @@ const _textColor = computed(() => {
     return 'neutral'
   }
 
-  if (isString(props.textColor)) {
+  if (typeof props.textColor === 'string') {
     return props.textColor
   }
 

lib/components/SInputSwitches.vue

@@ -40,7 +40,7 @@ function isChecked(value: any): boolean {
   return props.modelValue.includes(value)
 }
 
-function handleChange(value: any): void {
+function onChange(value: any): void {
   const difference = props.modelValue
     .filter((v) => v !== value)
     .concat(props.modelValue.includes(value) ? [] : [value])
@@ -71,7 +71,7 @@ function handleChange(value: any): void {
             size="sm"
             :text="option.label"
             :model-value="isChecked(option.value)"
-            @update:model-value="handleChange(option.value)"
+            @update:model-value="onChange(option.value)"
           />
         </div>
       </div>

lib/components/SInputText.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { type Component, computed, ref } from 'vue'
-import { isString } from '../support/Utils'
 import SInputBase, { type Props as BaseProps } from './SInputBase.vue'
 
 export type { Color, Size } from './SInputBase.vue'
@@ -42,7 +41,7 @@ const textColor = computed(() => {
     return 'neutral'
   }
 
-  if (isString(props.textColor)) {
+  if (typeof props.textColor === 'string') {
     return props.textColor
   }
 
@@ -124,7 +123,7 @@ function getValue(e: Event | FocusEvent | KeyboardEvent): string | null {
 
       <div class="value">
         <div v-if="unitBefore" class="unit before">
-          <span v-if="isString(unitBefore)" class="unit-text">{{ unitBefore }}</span>
+          <span v-if="typeof unitBefore === 'string'" class="unit-text">{{ unitBefore }}</span>
           <component :is="unitBefore" v-else class="unit-icon" />
         </div>
 
@@ -150,7 +149,7 @@ function getValue(e: Event | FocusEvent | KeyboardEvent): string | null {
         </div>
 
         <div v-if="unitAfter" class="unit after">
-          <span v-if="isString(unitAfter)" class="unit-text">{{ unitAfter }}</span>
+          <span v-if="typeof unitAfter === 'string'" class="unit-text">{{ unitAfter }}</span>
           <component :is="unitAfter" v-else class="unit-icon" />
         </div>
       </div>