fix(QFormItem): types

src/qComponents/QFormItem/index.ts

@@ -6,7 +6,14 @@ export const QFormItem = withInstall(FormItem);
 
 export type {
   QFormItemProps,
+  QFormItemPropFor,
+  QFormItemPropProp,
+  QFormItemPropLabel,
+  QFormItemPropSublabel,
+  QFormItemPropError,
   QFormItemPropRules,
+  QFormItemPropShowErrorMessage,
+  QFormItemPropLabelSize,
   QFormItemContext,
   QFormItemProvider,
   QFormItemInstance

src/qComponents/QFormItem/src/QFormItem.vue

@@ -43,10 +43,8 @@
 </template>
 
 <script lang="ts">
-import AsyncValidator, {
-  ValidateError,
-  ValidateFieldsError
-} from 'async-validator';
+import AsyncValidator from 'async-validator';
+import type { ValidateError, ValidateFieldsError } from 'async-validator';
 import { get, set } from 'lodash-es';
 import {
   provide,
@@ -63,52 +61,59 @@ import type { PropType } from 'vue';
 import { validateArray } from '@/qComponents/helpers';
 import type { QFormProvider } from '@/qComponents/QForm';
 
-import type { Nullable } from '#/helpers';
+import type { Nullable, ClassValue } from '#/helpers';
 
 import type {
   QFormItemProps,
+  QFormItemPropFor,
+  QFormItemPropProp,
+  QFormItemPropLabel,
+  QFormItemPropSublabel,
+  QFormItemPropError,
   QFormItemPropRules,
+  QFormItemPropShowErrorMessage,
+  QFormItemPropLabelSize,
   QFormItemContext,
   QFormItemProvider,
   FilteredRuleItem,
-  QFormItemInstance,
-  QFormItemPropLabelSize
+  QFormItemInstance
 } from './types';
 
 export default defineComponent({
   name: 'QFormItem',
+
   componentName: 'QFormItem',
 
   props: {
     for: {
-      type: String,
+      type: String as PropType<QFormItemPropFor>,
       default: null
     },
     /**
      * a key of model.In the use of validate and resetFields method,
      * the attribute is required
      */
     prop: {
-      type: String,
+      type: String as PropType<QFormItemPropProp>,
       default: null
     },
     /**
      * label
      */
     label: {
-      type: String,
+      type: String as PropType<QFormItemPropLabel>,
       default: null
     },
     sublabel: {
-      type: String,
+      type: String as PropType<QFormItemPropSublabel>,
       default: null
     },
     /**
      * field error message, set its value and the field will validate error
      * and show this message immediately
      */
     error: {
-      type: String,
+      type: String as PropType<QFormItemPropError>,
       default: null
     },
     /**
@@ -123,7 +128,7 @@ export default defineComponent({
      * whether to show the error message
      */
     showErrorMessage: {
-      type: Boolean,
+      type: Boolean as PropType<QFormItemPropShowErrorMessage>,
       default: true
     },
     /**
@@ -150,7 +155,7 @@ export default defineComponent({
       )
     );
 
-    const labelFor = computed<Nullable<string>>(() => props.for ?? props.prop);
+    const labelFor = computed<string>(() => props.for ?? props.prop ?? '');
 
     const propRules = computed<FilteredRuleItem[]>(() => {
       const rules =
@@ -170,13 +175,13 @@ export default defineComponent({
       )
     );
 
-    const rootClasses = computed<Record<string, boolean>>(() => ({
+    const rootClasses = computed<ClassValue>(() => ({
       'q-form-item_is-required': isRequired.value,
       'q-form-item_is-error': Boolean(errorMessage.value),
       'q-form-item_is-no-asterisk': Boolean(qForm?.hideRequiredAsterisk.value)
     }));
 
-    const labelClass = computed<string>(
+    const labelClass = computed<ClassValue>(
       () => `q-form-item__label_size_${props.labelSize ?? 'regular'}`
     );
 

src/qComponents/QFormItem/src/types.ts

@@ -5,26 +5,29 @@ import type {
 } from 'async-validator';
 import type { Ref, ComputedRef } from 'vue';
 
-import type { Nullable } from '#/helpers';
-
-export type QFormItemPropLabelSize = Nullable<'regular' | 'small'>;
+import type { Nullable, Enumerable, ClassValue } from '#/helpers';
 
 export interface FilteredRuleItem extends RuleItem {
   trigger?: Nullable<string>;
 }
 
-export type QFormItemPropRules = Nullable<
-  FilteredRuleItem | FilteredRuleItem[]
->;
+export type QFormItemPropFor = Nullable<string>;
+export type QFormItemPropProp = Nullable<string>;
+export type QFormItemPropLabel = Nullable<string>;
+export type QFormItemPropSublabel = Nullable<string>;
+export type QFormItemPropError = Nullable<string>;
+export type QFormItemPropRules = Nullable<Enumerable<FilteredRuleItem>>;
+export type QFormItemPropShowErrorMessage = Nullable<boolean>;
+export type QFormItemPropLabelSize = Nullable<'regular' | 'small'>;
 
 export interface QFormItemProps {
-  for: Nullable<string>;
-  prop: Nullable<string>;
-  label: Nullable<string>;
-  sublabel: Nullable<string>;
-  error: Nullable<string>;
+  for: QFormItemPropFor;
+  prop: QFormItemPropProp;
+  label: QFormItemPropLabel;
+  sublabel: QFormItemPropSublabel;
+  error: QFormItemPropError;
   rules: QFormItemPropRules;
-  showErrorMessage: Nullable<boolean>;
+  showErrorMessage: QFormItemPropShowErrorMessage;
   labelSize: QFormItemPropLabelSize;
 }
 
@@ -42,11 +45,9 @@ export interface QFormItemContext {
   isErrorSlotShown: ComputedRef<boolean>;
   isHeaderShown: ComputedRef<boolean>;
   isRequired: ComputedRef<boolean>;
-  labelFor: ComputedRef<Nullable<string>>;
+  labelFor: ComputedRef<string>;
   resetField: () => void;
-  rootClasses: ComputedRef<{
-    [key: string]: boolean;
-  }>;
+  rootClasses: ComputedRef<ClassValue>;
   rules: Nullable<FilteredRuleItem | FilteredRuleItem[]>;
   showErrorMessage: Nullable<boolean>;
   for: Nullable<string>;
@@ -68,10 +69,10 @@ export interface QFormItemProvider {
 export interface QFormItemInstance {
   errorMessage: Ref<Nullable<string>>;
   isErrorSlotShown: ComputedRef<boolean>;
-  labelFor: ComputedRef<Nullable<string>>;
+  labelFor: ComputedRef<string>;
   isRequired: ComputedRef<boolean>;
   isHeaderShown: ComputedRef<boolean>;
-  rootClasses: ComputedRef<Record<string, boolean>>;
+  rootClasses: ComputedRef<ClassValue>;
   getFilteredRules: (trigger: Nullable<string>) => Nullable<FilteredRuleItem[]>;
   validateField: (trigger?: Nullable<string>) => Nullable<
     Promise<{
@@ -80,5 +81,5 @@ export interface QFormItemInstance {
     }>
   >;
   resetField: () => void;
-  labelClass: ComputedRef<string>;
+  labelClass: ComputedRef<ClassValue>;
 }