From dcdf6a2f34526950123fca2a79b3d9359a18684d Mon Sep 17 00:00:00 2001
From: kimdoeun <kdeun1@ex-em.com>
Date: Thu, 8 Oct 2020 16:00:45 +0900
Subject: [PATCH] =?UTF-8?q?[#646]=20Select=20=EB=B2=84=ED=8A=BC=ED=83=80?=
 =?UTF-8?q?=EC=9E=85=20=EA=B8=B0=EB=8A=A5=20=EC=B6=94=EA=B0=80=20#########?=
 =?UTF-8?q?#######=20-=20Select=20=EB=B2=84=ED=8A=BC=ED=83=80=EC=9E=85=20?=
 =?UTF-8?q?=EA=B8=B0=EB=8A=A5=20=EC=B6=94=EA=B0=80=20-=20DOCS=20>=20select?=
 =?UTF-8?q?=20=EB=B2=84=ED=8A=BC=ED=83=80=EC=9E=85=20=EC=98=88=EC=A0=9C=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80=20-=20DOCS=20>=20select=20indeterminate=20?=
 =?UTF-8?q?=EC=98=88=EC=A0=9C=20=EB=B2=84=EA=B7=B8=20=EC=88=98=EC=A0=95=20?=
 =?UTF-8?q?-=20radio=20cursor=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/views/checkbox/example/CheckboxGroup.vue | 31 +++++++++-
 src/components/checkbox/Checkbox.vue          | 62 ++++++++++++++++---
 .../checkboxGroup/CheckboxGroup.vue           |  5 ++
 src/components/radio/Radio.vue                |  3 +
 4 files changed, 91 insertions(+), 10 deletions(-)

diff --git a/docs/views/checkbox/example/CheckboxGroup.vue b/docs/views/checkbox/example/CheckboxGroup.vue
index 1353dbb43..ab1eb1ab5 100644
--- a/docs/views/checkbox/example/CheckboxGroup.vue
+++ b/docs/views/checkbox/example/CheckboxGroup.vue
@@ -78,6 +78,32 @@
       {{ checkboxGroup3 }} / {{ indeterminate }}
     </div>
   </div>
+  <div class="case">
+    <p class="case-title">Button Type</p>
+    <ev-checkbox-group
+      v-model="buttonGroup"
+      type="button"
+    >
+      <ev-checkbox label="Option A" />
+      <ev-checkbox label="Option B" />
+      <ev-checkbox label="Option C" />
+    </ev-checkbox-group>
+    <br>
+    <ev-checkbox-group
+      v-model="buttonGroup"
+      type="button"
+    >
+      <ev-checkbox
+        label="Option A"
+        disabled
+      />
+      <ev-checkbox
+        label="Option B"
+        disabled
+      />
+      <ev-checkbox label="Option C" />
+    </ev-checkbox-group>
+  </div>
 </template>
 
 <script>
@@ -131,9 +157,11 @@ export default {
     const indeterminate = ref(false);
     const changeGroupValues = (val) => {
       allCheck.value = isEqual(sortBy(val), sortBy(labels));
-      indeterminate.value = val.length && val.length !== labels.length;
+      indeterminate.value = !!(val.length && val.length !== labels.length);
     };
 
+    const buttonGroup = ref([]);
+
     return {
       checkboxGroup,
       checkboxGroup2,
@@ -146,6 +174,7 @@ export default {
       indeterminate,
       changeAllCheck,
       changeGroupValues,
+      buttonGroup,
     };
   },
 };
diff --git a/src/components/checkbox/Checkbox.vue b/src/components/checkbox/Checkbox.vue
index 06eda0237..45f442a8c 100644
--- a/src/components/checkbox/Checkbox.vue
+++ b/src/components/checkbox/Checkbox.vue
@@ -1,6 +1,5 @@
 <template>
   <label
-    role="checkbox"
     class="ev-checkbox"
     :class="[
       { disabled, },
@@ -11,6 +10,7 @@
       ref="checkbox"
       v-model="mv"
       type="checkbox"
+      class="ev-checkbox-input"
       :disabled="disabled"
       :value="label"
       :readonly="readonly"
@@ -136,21 +136,65 @@ export default {
   margin-right: 30px;
   cursor: pointer;
   user-select: none;
-  input {
+  &-label {
+    padding-left: 5px;
+  }
+  &-input {
     cursor: pointer;
   }
-  &.disabled {
-    cursor: not-allowed;
+}
 
+@include state('disabled') {
+  .ev-checkbox-label {
     @include evThemify() {
       color: evThemed('color-disabled');
     }
-    input {
-      cursor: not-allowed;
-    }
+  }
+  .ev-checkbox-input,
+  .ev-checkbox-label {
+    cursor: not-allowed !important;
   }
 }
-.ev-checkbox-label {
-  padding-left: 10px;
+@include state('type-button') {
+  .ev-checkbox {
+    display: inline-block;
+    padding: 0;
+    margin: 0;
+    text-align: center;
+
+    @include evThemify() {
+      border: 1px solid evThemed('color-line-base');
+      border-left: 0;
+    }
+    &:first-child {
+      border-radius: $border-radius-button 0 0 $border-radius-button;
+
+      @include evThemify() {
+        border-left: 1px solid evThemed('color-line-base');
+      }
+    }
+    &:last-child {
+      border-radius: 0 $border-radius-button $border-radius-button 0;
+    }
+    &.checked {
+      color: $color-white;
+
+      @include evThemify() {
+        background-color: evThemed('color-primary');
+      }
+    }
+    &.disabled.checked {
+      @include evThemify() {
+        background-color: rgba(evThemed('color-line-base'), 0.5);
+      }
+    }
+  }
+  .ev-checkbox-input {
+    @include visible-hide();
+  }
+  .ev-checkbox-label {
+    display: inline-block;
+    padding: 7px 12px;
+  }
 }
 </style>
diff --git a/src/components/checkboxGroup/CheckboxGroup.vue b/src/components/checkboxGroup/CheckboxGroup.vue
index e5ecced06..838673837 100644
--- a/src/components/checkboxGroup/CheckboxGroup.vue
+++ b/src/components/checkboxGroup/CheckboxGroup.vue
@@ -1,6 +1,7 @@
 <template>
   <div
     class="ev-checkbox-group"
+    :class="{ 'type-button': type === 'button' }"
     role="group"
   >
     <slot />
@@ -17,6 +18,10 @@ export default {
       type: Array,
       default: () => [],
     },
+    type: {
+      type: String,
+      default: 'checkbox',
+    },
   },
   emits: {
     'update:modelValue': null,
diff --git a/src/components/radio/Radio.vue b/src/components/radio/Radio.vue
index 0e9f7c253..fe8d0d6cf 100644
--- a/src/components/radio/Radio.vue
+++ b/src/components/radio/Radio.vue
@@ -98,6 +98,9 @@ export default {
   &-label {
     padding-left: 5px;
   }
+  &-input {
+    cursor: pointer;
+  }
 }
 
 @include state('disabled') {