From 645de30a211fdff98437296d3c14464fbe9246e3 Mon Sep 17 00:00:00 2001
From: shamilfrontend <shoma.alisultanov@yandex.ru>
Date: Fri, 20 May 2022 12:26:40 +0300
Subject: [PATCH 1/2] refactor: types q-form-item

---
 src/qComponents/QFormItem/src/QFormItem.vue | 40 ++++++++++++---------
 src/qComponents/QFormItem/src/types.ts      | 39 ++++++++++----------
 2 files changed, 44 insertions(+), 35 deletions(-)

diff --git a/src/qComponents/QFormItem/src/QFormItem.vue b/src/qComponents/QFormItem/src/QFormItem.vue
index 323c9d00..62a887bc 100644
--- a/src/qComponents/QFormItem/src/QFormItem.vue
+++ b/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,25 +61,32 @@ import type { PropType } from 'vue';
 import { validateArray } from '@/qComponents/helpers';
 import type { QFormProvider } from '@/qComponents/QForm';
 
-import type { Nullable } from '#/helpers';
+import type { Nullable, Optional, 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
     },
     /**
@@ -89,18 +94,18 @@ export default defineComponent({
      * 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
     },
     /**
@@ -108,7 +113,7 @@ export default defineComponent({
      * 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,10 @@ export default defineComponent({
       )
     );
 
-    const labelFor = computed<Nullable<string>>(() => props.for ?? props.prop);
+    const labelFor = computed<Optional<string>>(() => {
+      if (!props.for || !props.prop) return undefined;
+      return props.for ?? props.prop;
+    });
 
     const propRules = computed<FilteredRuleItem[]>(() => {
       const rules =
@@ -170,13 +178,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'}`
     );
 
diff --git a/src/qComponents/QFormItem/src/types.ts b/src/qComponents/QFormItem/src/types.ts
index 77afed77..76c93a6e 100644
--- a/src/qComponents/QFormItem/src/types.ts
+++ b/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, Optional, 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<Optional<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<Optional<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>;
 }

From 4dca6120ebdd2a90a497250494f53bb96b9e559a Mon Sep 17 00:00:00 2001
From: shamilfrontend <shoma.alisultanov@yandex.ru>
Date: Fri, 20 May 2022 14:53:43 +0300
Subject: [PATCH 2/2] fix: by comments

---
 src/qComponents/QFormItem/index.ts          | 7 +++++++
 src/qComponents/QFormItem/src/QFormItem.vue | 7 ++-----
 src/qComponents/QFormItem/src/types.ts      | 6 +++---
 3 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/src/qComponents/QFormItem/index.ts b/src/qComponents/QFormItem/index.ts
index fa7a2bd2..f6b79a6c 100644
--- a/src/qComponents/QFormItem/index.ts
+++ b/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
diff --git a/src/qComponents/QFormItem/src/QFormItem.vue b/src/qComponents/QFormItem/src/QFormItem.vue
index 62a887bc..50df413e 100644
--- a/src/qComponents/QFormItem/src/QFormItem.vue
+++ b/src/qComponents/QFormItem/src/QFormItem.vue
@@ -61,7 +61,7 @@ import type { PropType } from 'vue';
 import { validateArray } from '@/qComponents/helpers';
 import type { QFormProvider } from '@/qComponents/QForm';
 
-import type { Nullable, Optional, ClassValue } from '#/helpers';
+import type { Nullable, ClassValue } from '#/helpers';
 
 import type {
   QFormItemProps,
@@ -155,10 +155,7 @@ export default defineComponent({
       )
     );
 
-    const labelFor = computed<Optional<string>>(() => {
-      if (!props.for || !props.prop) return undefined;
-      return props.for ?? props.prop;
-    });
+    const labelFor = computed<string>(() => props.for ?? props.prop ?? '');
 
     const propRules = computed<FilteredRuleItem[]>(() => {
       const rules =
diff --git a/src/qComponents/QFormItem/src/types.ts b/src/qComponents/QFormItem/src/types.ts
index 76c93a6e..474b183f 100644
--- a/src/qComponents/QFormItem/src/types.ts
+++ b/src/qComponents/QFormItem/src/types.ts
@@ -5,7 +5,7 @@ import type {
 } from 'async-validator';
 import type { Ref, ComputedRef } from 'vue';
 
-import type { Nullable, Optional, Enumerable, ClassValue } from '#/helpers';
+import type { Nullable, Enumerable, ClassValue } from '#/helpers';
 
 export interface FilteredRuleItem extends RuleItem {
   trigger?: Nullable<string>;
@@ -45,7 +45,7 @@ export interface QFormItemContext {
   isErrorSlotShown: ComputedRef<boolean>;
   isHeaderShown: ComputedRef<boolean>;
   isRequired: ComputedRef<boolean>;
-  labelFor: ComputedRef<Optional<string>>;
+  labelFor: ComputedRef<string>;
   resetField: () => void;
   rootClasses: ComputedRef<ClassValue>;
   rules: Nullable<FilteredRuleItem | FilteredRuleItem[]>;
@@ -69,7 +69,7 @@ export interface QFormItemProvider {
 export interface QFormItemInstance {
   errorMessage: Ref<Nullable<string>>;
   isErrorSlotShown: ComputedRef<boolean>;
-  labelFor: ComputedRef<Optional<string>>;
+  labelFor: ComputedRef<string>;
   isRequired: ComputedRef<boolean>;
   isHeaderShown: ComputedRef<boolean>;
   rootClasses: ComputedRef<ClassValue>;