From d2a5261866c1c99d3a8d9290b285eafca3056c11 Mon Sep 17 00:00:00 2001
From: Sergey <serega-nsk93@yandex.ru>
Date: Tue, 26 Apr 2022 13:33:25 +0300
Subject: [PATCH] fix(QFormItem): font weight, add labelClass

---
 src/qComponents/QFormItem/src/QFormItem.vue   | 10 ++++---
 .../QFormItem/src/q-form-item.scss            | 26 ++++++++++++++-----
 src/qComponents/QFormItem/src/types.ts        |  2 +-
 3 files changed, 27 insertions(+), 11 deletions(-)

diff --git a/src/qComponents/QFormItem/src/QFormItem.vue b/src/qComponents/QFormItem/src/QFormItem.vue
index 75229695..fdc56eb2 100644
--- a/src/qComponents/QFormItem/src/QFormItem.vue
+++ b/src/qComponents/QFormItem/src/QFormItem.vue
@@ -11,7 +11,7 @@
         v-if="label || $slots.label"
         :for="labelFor"
         class="q-form-item__label"
-        :class="{ 'q-form-item__label_small': isLabelSmall }"
+        :class="labelClass"
       >
         <slot name="label">{{ label }}</slot>
       </label>
@@ -151,8 +151,6 @@ export default /* #__PURE__ */ defineComponent({
 
     const labelFor = computed<Nullable<string>>(() => props.for ?? props.prop);
 
-    const isLabelSmall = computed<boolean>(() => props.labelSize === 'small');
-
     const propRules = computed<FilteredRuleItem[]>(() => {
       const rules =
         props.rules ??
@@ -177,6 +175,10 @@ export default /* #__PURE__ */ defineComponent({
       'q-form-item_is-no-asterisk': Boolean(qForm?.hideRequiredAsterisk.value)
     }));
 
+    const labelClass = computed<string>(
+      () => `q-form-item__label_size_${props.labelSize}`
+    );
+
     const getFilteredRules = (
       trigger: Nullable<string>
     ): Nullable<FilteredRuleItem[]> => {
@@ -287,7 +289,7 @@ export default /* #__PURE__ */ defineComponent({
       isRequired,
       isHeaderShown,
       rootClasses,
-      isLabelSmall,
+      labelClass,
       getFilteredRules,
       // for refs
       validateField,
diff --git a/src/qComponents/QFormItem/src/q-form-item.scss b/src/qComponents/QFormItem/src/q-form-item.scss
index 5fe41683..e0dccb42 100644
--- a/src/qComponents/QFormItem/src/q-form-item.scss
+++ b/src/qComponents/QFormItem/src/q-form-item.scss
@@ -12,8 +12,6 @@
   &__label {
     font-size: var(--font-size-base);
     font-weight: var(--font-weight-base);
-    line-height: 18px;
-    color: var(--color-primary-black);
 
     .q-form-item_is-required:not(.q-form-item_is-no-asterisk) &::after {
       margin-left: 4px;
@@ -21,10 +19,26 @@
       content: '*';
     }
 
-    &_small {
-      font-size: 10px;
-      line-height: 12px;
-      color: rgb(var(--color-rgb-gray) / 64%);
+    &_size {
+      &_regular {
+        font-size: 14px;
+        line-height: 18px;
+        color: var(--color-primary-black);
+
+        .q-form-item_is-required:not(.q-form-item_is-no-asterisk) &::after {
+          font-weight: 700;
+        }
+      }
+
+      &_small {
+        font-size: 10px;
+        line-height: 12px;
+        color: rgb(var(--color-rgb-gray) / 64%);
+
+        .q-form-item_is-required:not(.q-form-item_is-no-asterisk) &::after {
+          font-weight: 800;
+        }
+      }
     }
   }
 
diff --git a/src/qComponents/QFormItem/src/types.ts b/src/qComponents/QFormItem/src/types.ts
index d3918faf..fe366355 100644
--- a/src/qComponents/QFormItem/src/types.ts
+++ b/src/qComponents/QFormItem/src/types.ts
@@ -80,5 +80,5 @@ export interface QFormItemInstance {
     }>
   >;
   resetField: () => void;
-  isLabelSmall: ComputedRef<boolean>;
+  labelClass: ComputedRef<string>;
 }