Merge pull request #114 from leonied7/improve-ts

Улучшения ts

.nvmrc

@@ -1 +1 @@
-20.18
+22.12

package.json

@@ -25,12 +25,14 @@
     "eslint": "^9.17.0",
     "eslint-plugin-vue": "^9.32.0",
     "rollup-plugin-visualizer": "^5.12.0",
+    "type-fest": "^4.30.2",
     "typescript": "^5.6.3",
     "vite": "^6.0.3",
     "vite-plugin-checker": "^0.8.0",
     "vite-plugin-dts": "^4.3.0",
     "vitepress": "^1.5.0",
     "vitest": "^2.1.8",
+    "vue-component-type-helpers": "^2.1.10",
     "vue-tsc": "^2.1.10"
   },
   "peerDependencies": {

src/App.vue

@@ -6,7 +6,7 @@
         'my-input': [{ message: 'outer error' }],
         'my.nested.value': [{ message: 'qwe' }]
       }"
-      :resolver="$options.resolver"
+      :resolver="resolver"
       @submit="onSubmit"
     >
       <template #default="{ handleSubmit, values, dirty, errors, reset, onFieldChange }">
@@ -22,7 +22,7 @@
               <input
                 :value="modelValue"
                 type="text"
-                @input="onChange($event.target.value)"
+                @input="onChange(($event.target as HTMLInputElement).value)"
               >
             </template>
           </ValidationField>
@@ -32,7 +32,7 @@
               <input
                 :value="modelValue"
                 type="text"
-                @input="onChange($event.target.value)"
+                @input="onChange(($event.target as HTMLInputElement).value)"
               >
             </template>
           </ValidationField>
@@ -51,7 +51,7 @@
                       <input
                         :value="modelValue"
                         type="text"
-                        @input="onChange($event.target.value)"
+                        @input="onChange(($event.target as HTMLInputElement).value)"
                       >
                     </template>
                   </ValidationField>
@@ -60,7 +60,7 @@
                       <input
                         :value="modelValue"
                         type="text"
-                        @input="onChange($event.target.value)"
+                        @input="onChange(($event.target as HTMLInputElement).value)"
                       >
                     </template>
                   </ValidationField>
@@ -69,14 +69,14 @@
                       <input
                         :value="modelValue"
                         type="text"
-                        @input="onChange($event.target.value)"
+                        @input="onChange(($event.target as HTMLInputElement).value)"
                       >
                     </template>
                   </ValidationField>
                 </div>
                 <button
                   type="button"
-                  @click="prepend({ firstName: 'prepend' }, { name: 'firstName' })"
+                  @click="prepend({ firstName: 'prepend' }, { field: 'firstName' })"
                 >
                   Prepend
                 </button>
@@ -153,82 +153,72 @@
   </div>
 </template>
 
-<script>
+<script setup lang="ts">
 import {
   ValidationErrors,
   ValidationField,
   ValidationFieldArray,
   ValidationProvider,
-  get
+  get,
+  Resolver,
+  ResolverResult,
+  OnSubmit
 } from './index';
 
-function required(value) {
-  return !!value;
-}
-
-export default {
-  name: 'App',
-  components: {
-    ValidationProvider,
-    ValidationField,
-    ValidationFieldArray,
-    ValidationErrors
-  },
-  resolver(values) {
-    const result = {
-      values,
-      errors: {}
-    };
-    if (!required(get(values, 'my-input'))) {
-      result.errors['my-input'] = [{ message: 'field required' }];
+const defaultValues = {
+  my: {
+    nested: {
+      value: 'test'
     }
-    if (!required(get(values, 'my.nested.value'))) {
-      result.errors['my.nested.value'] = [{ message: 'field required' }];
-    }
-    get(values, 'arrayField', []).forEach(({ firstName }, index) => {
-      if (!required(firstName)) {
-        result.errors[`arrayField.${index}.firstName`] = [{ message: 'field required' }];
-      }
-    });
-    return result;
-  },
-  data() {
-    return {
-      defaultValues: {
-        my: {
-          nested: {
-            value: 'test'
-          }
-        },
-        arrayField: [
-          {
-            id: '1',
-            firstName: '111',
-            type: 'user'
-          },
-          {
-            id: '2',
-            firstName: '222',
-            type: 'user'
-          },
-          {
-            id: '3',
-            firstName: '333',
-            type: null
-          }
-        ]
-      }
-    };
   },
-  methods: {
-    onSubmit(values, { setError }) {
-      setTimeout(() => {
-        setError('my-input', { message: 'invalid field', type: 'custom' });
-        setError('common', { message: 'invalid common field', type: 'custom' });
-      }, 250);
-
-      console.log(values);
+  arrayField: [
+    {
+      id: '1',
+      firstName: '111',
+      type: 'user'
+    },
+    {
+      id: '2',
+      firstName: '222',
+      type: 'user'
+    },
+    {
+      id: '3',
+      firstName: '333',
+      type: null
     }
+  ]
+};
+type V = typeof defaultValues;
+
+function required(value: unknown) {
+  return !!value;
+}
+const resolver: Resolver<V> = (values) => {
+  const result: ResolverResult<V> = {
+    values,
+    errors: {}
+  };
+  if (!required(get(values, 'my-input'))) {
+    result.errors['my-input'] = [{ message: 'field required' }];
+  }
+  if (!required(get(values, 'my.nested.value'))) {
+    result.errors['my.nested.value'] = [{ message: 'field required' }];
   }
+  get(values, 'arrayField', []).forEach(({ firstName }, index) => {
+    if (!required(firstName)) {
+      result.errors[`arrayField.${index}.firstName`] = [{ message: 'field required' }];
+    }
+  });
+  return result;
+};
+
+const onSubmit: OnSubmit<V> = (values, { setError }) => {
+  setTimeout(() => {
+    setError('my-input', { message: 'invalid field', type: 'custom' });
+    setError('common', { message: 'invalid common field', type: 'custom' });
+  }, 250);
+
+  console.log(values);
 };
 </script>

src/components/ValidationField.vue

@@ -14,7 +14,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, ref, toRefs, reactive, nextTick, onUnmounted } from 'vue';
+import { computed, inject, ref, reactive, nextTick, onUnmounted } from 'vue';
 
 import type { InnerValidationError } from '../types/error';
 import {
@@ -29,22 +29,16 @@ import {
 import type { Field } from '../types/field';
 import { ON_FIELD_CHANGE } from './constants';
 
-export interface Props {
+const { name, isEqual = (a, b) => a === b } = defineProps<{
   name: string;
   isEqual?: (a: unknown, b: unknown) => boolean;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  isEqual: (a, b) => a === b
-});
+}>();
 
 const emit = defineEmits<{
   (e: 'should-focus', options: { name: string }): void;
   (e: 'change', value: unknown): void;
 }>();
 
-const { name, isEqual } = toRefs(props);
-
 const registered = ref(false);
 const errors = ref<InnerValidationError[]>([]);
 
@@ -56,14 +50,14 @@ const getIsValidateAvailable = inject(getIsValidateAvailableSymbol)!;
 const register = inject(registerSymbol)!;
 const validate = inject(validateSymbol)!;
 
-const defaultValue = computed(() => getFieldDefaultValue(name.value));
-const hasProvidedValue = computed(() => hasFieldValue(name.value));
-const providedValue = computed(() => getFieldValue(name.value));
+const defaultValue = computed(() => getFieldDefaultValue(name));
+const hasProvidedValue = computed(() => hasFieldValue(name));
+const providedValue = computed(() => getFieldValue(name));
 const validateAvailable = computed(() => getIsValidateAvailable());
 const value = ref(hasProvidedValue.value ? providedValue.value : defaultValue.value);
-const pristine = ref<boolean>(getFieldPristine(name.value));
+const pristine = ref<boolean>(getFieldPristine(name));
 
-const dirty = computed(() => !isEqual.value(value.value, defaultValue.value));
+const dirty = computed(() => !isEqual(value.value, defaultValue.value));
 const firstError = computed(() => errors.value[0]);
 const invalid = computed(() => !!errors.value.length);
 
@@ -76,7 +70,7 @@ const reset: Field['reset'] = () => {
 };
 
 const onChange: Field['onChange'] = (newValue: unknown) => {
-  if (isEqual.value(value.value, newValue)) {
+  if (isEqual(value.value, newValue)) {
     return;
   }
 
@@ -88,7 +82,7 @@ const onChange: Field['onChange'] = (newValue: unknown) => {
     return;
   }
 
-  validate(name.value);
+  validate(name);
 };
 
 const setError: Field['setError'] = ({
@@ -110,7 +104,7 @@ const resetErrors: Field['resetErrors'] = () => {
 };
 
 const field: Field = reactive({
-  name,
+  name: computed(() => name),
   dirty,
   pristine,
   errors,
@@ -121,7 +115,7 @@ const field: Field = reactive({
   reset,
   onFocus: () => {
     emit('should-focus', {
-      name: name.value
+      name
     });
   }
 });