feat(useField): rule checking and status management of fields

[LittleSound]

Rule validation and state management of form fields are placed in a separate input component, which can be used alone or in combination with the main useForm

Code Demo:

Maybe there will be a better way to design?

<!-- MyForm.vue -->
<script setup>
import { useForm, toField } from 'slimeform'
const { form, status, isError } = useForm({
  form: () => ({
    phone: '+86****',
  }),
  rule: {
    phone: [
      // Additional rules for purpose of business logics
    ]
  },
})
</script>

<InputPhone v-model="form.phone" :field="toField(form, 'phone')" />

<!-- InputPhone.vue -->
<script setup>
import { useField } from 'slimeform'
const props = defineProps()
const emits = defineEmits()

const vmPhone = useVModel(props, 'modelValue', emits)

const { field: phone, state, isError, reset } = useField(vmPhone, props.field, {
  rule: [
    // As for mobile phone number input validations, there can be general rules
    phoneFormat(),
    phoneLength(),
  ]
})
</script>