[#630][3.0] Checkbox indeterminate 기능 추가

################ - DOCS > checkbox group에 change 이벤트 예제 추가 - DOCS > checkbox 문서 수정
ex-em · Oct 7, 2020 · 9cb032c · 9cb032c
1 parent c457b1f
commit 9cb032c
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 16 deletions.
diff --git a/docs/views/checkbox/api/checkbox.md b/docs/views/checkbox/api/checkbox.md
@@ -25,39 +25,47 @@
  - <체크박스그룹>.vue파일에서 <슬롯>을 사용하여 <체크박스>태그가 안에 들어가는 로직
  - <체크박스><슬롯></체크박스>로 내부에 슬롯값이 들어가며, 내부 슬롯값이 없는 경우 <체크박스>의 label속성 값이 채워진다.  
 
+
 >### Props
-> 1) 체크박스 그룹 사용 시
->> <체크박스그룹>
->
-> | 이름 | 디폴트 | 타입 | 설명 | 종류 |
+1) 체크박스 그룹 사용 시
+- <체크박스그룹>
+
+ | 이름 | 디폴트 | 타입 | 설명 | 종류 |
   |----- |--------|------|------|------|
   | v-model | null | Array | <체크박스그룹>내 선택된 <체크박스> label 값으로, 해당 값은 바인딩되어 동적으로 변함 | |
->> <체크박스>
->
-> | 이름 | 디폴트 | 타입 | 설명 | 종류 |
+
+- <체크박스>
+
+ | 이름 | 디폴트 | 타입 | 설명 | 종류 |
   |------------ |-----------|---------|-------------------------|---------------------------------------------------|
   | v-model | null | String, Number, Boolean, Symbol, Array | <체크박스그룹>내 선택된 <체크박스> label 값으로, 해당 값은 바인딩되어 동적으로 변함 | |
   | label | null | String  | HTML element value (required) |  |
   | disabled | false | Boolean | HTML element disabled attribute |  |
   | v-model:indeterminate | false | Boolean | HTML5 checkbox indeterminate attribute |  |
->
 
->
-> 2) 체크박스만 사용 시
->> <체크박스>
->
-> | 이름 | 디폴트 | 타입 | 설명 | 종류 |
+ 2) 체크박스만 사용 시
+ - <체크박스>
+
+ | 이름 | 디폴트 | 타입 | 설명 | 종류 |
   |------------ |-----------|---------|-------------------------|---------------------------------------------------|
   | v-model | null | String, Number, Boolean, Symbol, Array | <체크박스그룹>내 선택된 <체크박스> label 값으로, 해당 값은 바인딩되어 동적으로 변함 | |
   | disabled | false | Boolean | HTML element disabled attribute |  |
   | v-model:indeterminate | false | Boolean | HTML5 checkbox indeterminate attribute |  |
 
+
 >### Event
->> <체크박스그룹>
->
->| 이름 | 파라미터 | 설명 |
+- <체크박스그룹>
+
+| 이름 | 파라미터 | 설명 |
  |------|----------|------|
  | change | event | <체크박스그룹> 내 <체크박스> 변화 이벤트 감지 |
 
+- <체크박스>
+
+| 이름 | 파라미터 | 설명 |
+ |------|----------|------|
+ | change | event | <체크박스> 변화 이벤트 감지 |
+
+
 >### 참고
  - <체크박스>체크박스텍스트값</체크박스>로 태그 내부에 텍스트는 &lt;slot/&gt;을 사용함.
diff --git a/docs/views/checkbox/example/CheckboxGroup.vue b/docs/views/checkbox/example/CheckboxGroup.vue
@@ -20,6 +20,7 @@
     <p class="case-title">Event</p>
     <ev-checkbox-group
       v-model="checkboxGroup2"
+      @change="changeGroup2"
     >
       <ev-checkbox label="Option A">A</ev-checkbox>
       <ev-checkbox label="Option B">B</ev-checkbox>
@@ -38,6 +39,12 @@
       </button>
       &nbsp; {{ checkboxGroup2 }}
     </div>
+    <div class="description">
+      <span class="badge">
+        Checkbox Group Change Event
+      </span>
+      &nbsp; {{ changeEventVal }}
+    </div>
   </div>
   <div class="case">
     <p class="case-title">All Check</p>
@@ -85,6 +92,8 @@ export default {
         checkboxGroup2.value.push('Option A');
       }
     };
+    const changeEventVal = ref([]);
+    const changeGroup2 = (val) => { changeEventVal.value = val; };
 
     const checkboxGroup3 = ref([]);
     const allCheck = ref(false);
@@ -125,6 +134,8 @@ export default {
       checkboxGroup,
       checkboxGroup2,
       clickButton,
+      changeEventVal,
+      changeGroup2,
       checkboxGroup3,
       allCheck,
       checkboxList3,