From 050edb435e773453e2ceb953710ea94f75b284f0 Mon Sep 17 00:00:00 2001
From: Suyeon Woo <134579071+seaneez@users.noreply.github.com>
Date: Tue, 19 Mar 2024 15:06:34 +0900
Subject: [PATCH] feat(VsInputWrapper): add label style (#139)

---
 .../components/vs-checkbox-set/VsCheckboxSet.vue |  1 +
 .../src/components/vs-checkbox/VsCheckbox.vue    |  1 +
 .../src/components/vs-file-input/VsFileInput.vue |  1 +
 .../vs-input-wrapper/VsInputWrapper.scss         | 16 ++++++++++++++++
 .../vs-input-wrapper/VsInputWrapper.vue          |  5 +++--
 .../vlossom/src/components/vs-input/VsInput.vue  |  1 +
 .../src/components/vs-radio-set/VsRadioSet.vue   |  1 +
 .../vlossom/src/components/vs-radio/VsRadio.vue  |  1 +
 .../src/components/vs-select/VsSelect.vue        |  1 +
 .../src/components/vs-switch/VsSwitch.vue        |  1 +
 .../src/components/vs-textarea/VsTextarea.vue    |  1 +
 11 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/packages/vlossom/src/components/vs-checkbox-set/VsCheckboxSet.vue b/packages/vlossom/src/components/vs-checkbox-set/VsCheckboxSet.vue
index 9b45fe0ce..75a233915 100644
--- 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
index b9be11151..b32ec0f0b 100644
--- 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
index 9cca0ad43..9700f9cb3 100644
--- 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
index 5bb9c7232..01c1b3a7c 100644
--- 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
index 0b6070616..818495729 100644
--- 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
index 968908d80..ffc20e954 100644
--- 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
index d84d26be3..d21a29703 100644
--- 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
index fc91b910f..f6a5d3f11 100644
--- 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
index 2f1ec3a54..bf3b38551 100644
--- 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
index a9a5a228c..ef7149dac 100644
--- 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
index b70c16c3a..ee7f831f6 100644
--- 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"