feat(VsInputWrapper): add label style (#139)

pubg · Mar 19, 2024 · 050edb4 · 050edb4
1 parent 9f267ed
commit 050edb4
Show file tree

Hide file tree

Showing 11 changed files with 28 additions and 2 deletions.
diff --git a/packages/vlossom/src/components/vs-checkbox-set/VsCheckboxSet.vue b/packages/vlossom/src/components/vs-checkbox-set/VsCheckboxSet.vue
@@ -2,6 +2,7 @@
     <vs-wrapper :width="width" :grid="grid" v-show="visible">
         <vs-input-wrapper
             :label="label"
+            :disabled="disabled"
             :messages="computedMessages"
             :no-label="noLabel"
             :no-message="noMessage"

diff --git a/packages/vlossom/src/components/vs-checkbox/VsCheckbox.vue b/packages/vlossom/src/components/vs-checkbox/VsCheckbox.vue
@@ -3,6 +3,7 @@
         <vs-input-wrapper
             :id="checkLabel ? '' : id"
             :label="label"
+            :disabled="disabled"
             :messages="computedMessages"
             :no-label="noLabel"
             :no-message="noMessage"

diff --git a/packages/vlossom/src/components/vs-file-input/VsFileInput.vue b/packages/vlossom/src/components/vs-file-input/VsFileInput.vue
@@ -3,6 +3,7 @@
         <vs-input-wrapper
             :id="id"
             :label="label"
+            :disabled="disabled"
             :messages="computedMessages"
             :no-label="noLabel"
             :no-message="noMessage"

diff --git a/packages/vlossom/src/components/vs-input-wrapper/VsInputWrapper.scss b/packages/vlossom/src/components/vs-input-wrapper/VsInputWrapper.scss
@@ -1,6 +1,22 @@
+@use '@/styles/mixin' as *;
+
 .vs-input-wrapper {
+    .vs-label {
+        color: var(--vs-font-color);
+        font-size: 1rem;
+        line-height: 2rem;
+
+        &.disabled {
+            @include disabled;
+        }
+    }
+
     .required-star {
         color: var(--vs-red-600);
+
+        &.disabled {
+            @include disabled;
+        }
     }
 
     fieldset {

diff --git a/packages/vlossom/src/components/vs-input-wrapper/VsInputWrapper.vue b/packages/vlossom/src/components/vs-input-wrapper/VsInputWrapper.vue
@@ -8,9 +8,9 @@
                 :class="textGlowByState"
             >
                 <slot name="label">
-                    <span class="vs-label">{{ label }}</span>
+                    <span :class="['vs-label', { disabled }]">{{ label }}</span>
                 </slot>
-                <i class="required-star" v-if="required">*</i>
+                <i :class="['required-star', { disabled }]" v-if="required">*</i>
             </component>
 
             <slot />
@@ -37,6 +37,7 @@ export default defineComponent({
         groupLabel: { type: Boolean, default: false },
         id: { type: String, default: '' },
         label: { type: String, default: '' },
+        disabled: { type: Boolean, default: false },
         messages: { type: Array as PropType<StateMessage[]>, default: () => [] },
         noLabel: { type: Boolean, default: false },
         noMessage: { type: Boolean, default: false },

diff --git a/packages/vlossom/src/components/vs-input/VsInput.vue b/packages/vlossom/src/components/vs-input/VsInput.vue
@@ -3,6 +3,7 @@
         <vs-input-wrapper
             :id="id"
             :label="label"
+            :disabled="disabled"
             :messages="computedMessages"
             :no-label="noLabel"
             :no-message="noMessage"

diff --git a/packages/vlossom/src/components/vs-radio-set/VsRadioSet.vue b/packages/vlossom/src/components/vs-radio-set/VsRadioSet.vue
@@ -2,6 +2,7 @@
     <vs-wrapper :width="width" :grid="grid" v-show="visible">
         <vs-input-wrapper
             :label="label"
+            :disabled="disabled"
             :messages="computedMessages"
             :no-label="noLabel"
             :no-message="noMessage"

diff --git a/packages/vlossom/src/components/vs-radio/VsRadio.vue b/packages/vlossom/src/components/vs-radio/VsRadio.vue
@@ -3,6 +3,7 @@
         <vs-input-wrapper
             :id="radioLabel ? '' : id"
             :label="label"
+            :disabled="disabled"
             :messages="computedMessages"
             :no-label="noLabel"
             :no-message="noMessage"

diff --git a/packages/vlossom/src/components/vs-select/VsSelect.vue b/packages/vlossom/src/components/vs-select/VsSelect.vue
@@ -3,6 +3,7 @@
         <vs-input-wrapper
             :id="id"
             :label="label"
+            :disabled="disabled"
             :messages="computedMessages"
             :no-label="noLabel"
             :no-message="noMessage"

diff --git a/packages/vlossom/src/components/vs-switch/VsSwitch.vue b/packages/vlossom/src/components/vs-switch/VsSwitch.vue
@@ -3,6 +3,7 @@
         <vs-input-wrapper
             :id="id"
             :label="label"
+            :disabled="disabled"
             :messages="computedMessages"
             :no-label="noLabel"
             :no-message="noMessage"

diff --git a/packages/vlossom/src/components/vs-textarea/VsTextarea.vue b/packages/vlossom/src/components/vs-textarea/VsTextarea.vue
@@ -3,6 +3,7 @@
         <vs-input-wrapper
             :id="id"
             :label="label"
+            :disabled="disabled"
             :messages="computedMessages"
             :no-label="noLabel"
             :no-message="noMessage"