fix(QFormItem): font weight, add labelClass

altai-ui · Apr 26, 2022 · d2a5261 · d2a5261
1 parent b942786
commit d2a5261
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 11 deletions.
diff --git 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
@@ -12,19 +12,33 @@
   &__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;
       color: var(--color-secondary-orange);
       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
@@ -80,5 +80,5 @@ export interface QFormItemInstance {
     }>
   >;
   resetField: () => void;
-  isLabelSmall: ComputedRef<boolean>;
+  labelClass: ComputedRef<string>;
 }