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

################
- checkbox indeterminate 기능 추가
- DOCS MD 문서 내용 추가
- DOCS 예제 변경

docs/views/checkbox/api/checkbox.md

@@ -39,6 +39,7 @@
   | v-model | null | String, Number, Boolean, Symbol, Array | <체크박스그룹>내 선택된 <체크박스> label 값으로, 해당 값은 바인딩되어 동적으로 변함 | |
   | label | null | String  | HTML element value (required) |  |
   | disabled | false | Boolean | HTML element disabled attribute |  |
+  | indeterminate | false | Boolean | HTML5 checkbox indeterminate attribute |  |
 >
 
 >
@@ -49,6 +50,7 @@
   |------------ |-----------|---------|-------------------------|---------------------------------------------------|
   | v-model | null | String, Number, Boolean, Symbol, Array | <체크박스그룹>내 선택된 <체크박스> label 값으로, 해당 값은 바인딩되어 동적으로 변함 | |
   | disabled | false | Boolean | HTML element disabled attribute |  |
+  | indeterminate | false | Boolean | HTML5 checkbox indeterminate attribute |  |
 
 >### Event
 >> <체크박스그룹>

docs/views/checkbox/example/CheckboxGroup.vue

@@ -11,7 +11,7 @@
     </ev-checkbox-group>
     <div class="description">
       <span class="badge">
-        checkboxGroup
+        Checkbox Group Values
       </span>
       {{ checkboxGroup }}
     </div>
@@ -28,39 +28,41 @@
     </ev-checkbox-group>
     <div class="description">
       <span class="badge">
-        checkboxGroup2
+        Checkbox Group Values
       </span>
       <button
         class="btn"
         @click="clickButton"
       >
         Add 'Option A'
       </button>
-      {{ checkboxGroup2 }}
+      &nbsp; {{ checkboxGroup2 }}
     </div>
   </div>
   <div class="case">
     <p class="case-title">All Check</p>
     <ev-checkbox-group
       v-model="checkboxGroup3"
+      @change="changeGroupValues"
     >
       <ev-checkbox
         v-for="(info, idx) in checkboxList3"
-        :key="idx"
-        :label="info.label"
+        :key="`${idx}`"
+        :label="`${info.label}`"
       >
         {{ info.text }}
       </ev-checkbox>
     </ev-checkbox-group>
     <div class="description">
       <span class="badge">
-        checkboxGroup3
+        Checkbox Group Values
       </span>
       <ev-checkbox
         v-model="allCheck"
+        :indeterminate="indeterminate"
         @change="changeAllCheck"
       >
-        ALL CHECK
+        All Check & Indeterminate
       </ev-checkbox>
       {{ checkboxGroup3 }}
     </div>
@@ -113,6 +115,10 @@ export default {
         checkboxGroup3.value = [];
       }
     };
+    const indeterminate = ref(false);
+    const changeGroupValues = (val) => {
+      console.log(`changeGroupValues : ${val}`);
+    };
 
     watch(checkboxGroup3, (cur) => {
       allCheck.value = isEqual(sortBy(cur), sortBy(labels));
@@ -125,7 +131,9 @@ export default {
       checkboxGroup3,
       allCheck,
       checkboxList3,
+      indeterminate,
       changeAllCheck,
+      changeGroupValues,
     };
   },
 };

docs/views/checkbox/example/Default.vue

@@ -9,18 +9,18 @@
     <div class="description">
       <button
         class="btn"
-        @click="clickButton1"
+        @click="clickButton"
       >
         click to change the check value
       </button>
-      {{ checkVal1 }}
+      &nbsp; {{ checkVal1 }}
     </div>
   </div>
   <div class="case">
     <p class="case-title">Use Change Event</p>
     <ev-checkbox
       v-model="checkVal2"
-      @change="changeVal2"
+      @change="changeCheck"
     >
       Single Checkbox
     </ev-checkbox>
@@ -40,7 +40,7 @@
   <div class="case">
     <p class="case-title">Disabled</p>
     <ev-checkbox
-      v-model="checkVal3"
+      v-model="checkVal1"
       :disabled="isDisable"
     >
       DISABLED
@@ -54,6 +54,24 @@
       </button>
     </div>
   </div>
+  <div class="case">
+    <p class="case-title">Indeterminate</p>
+    <ev-checkbox
+      v-model="checkVal3"
+      :indeterminate="isIndeterminate"
+    >
+      INDETERMINATE
+    </ev-checkbox>
+    <div class="description">
+      <button
+        class="btn"
+        @click="toggleIndeterminate"
+      >
+        toggle to indeterminate
+      </button>
+      &nbsp; {{ isIndeterminate }}
+    </div>
+  </div>
 </template>
 
 <script>
@@ -62,7 +80,7 @@ import { ref, reactive } from 'vue';
 export default {
   setup() {
     const checkVal1 = ref(false);
-    const clickButton1 = () => {
+    const clickButton = () => {
       checkVal1.value = !checkVal1.value;
     };
 
@@ -71,26 +89,36 @@ export default {
       value: '',
       e: null,
     });
-    const changeVal2 = (value, e) => {
+    const changeCheck = (value, e) => {
       checkResult2.value = value;
       checkResult2.e = e;
     };
 
-    const checkVal3 = ref(false);
     const isDisable = ref(true);
     const toggleDisable = () => {
       isDisable.value = !isDisable.value;
     };
 
+    const checkVal3 = ref(false);
+    const isIndeterminate = ref(false);
+    const toggleIndeterminate = () => {
+      isIndeterminate.value = !isIndeterminate.value;
+    };
+
     return {
       checkVal1,
+      clickButton,
+
       checkVal2,
-      clickButton1,
       checkResult2,
-      changeVal2,
-      checkVal3,
+      changeCheck,
+
       isDisable,
       toggleDisable,
+
+      checkVal3,
+      isIndeterminate,
+      toggleIndeterminate,
     };
   },
 };

src/components/checkbox/Checkbox.vue

@@ -8,10 +8,12 @@
     ]"
   >
     <input
+      ref="checkbox"
       v-model="mv"
       type="checkbox"
       :disabled="disabled"
       :value="label"
+      :readonly="readonly"
       @change="changeMv"
     />
     <span
@@ -30,7 +32,7 @@
 </template>
 
 <script>
-import { inject, nextTick, computed } from 'vue';
+import { ref, computed, watch, nextTick, inject } from 'vue';
 
 export default {
   name: 'EvCheckbox',
@@ -47,6 +49,14 @@ export default {
       type: Boolean,
       default: false,
     },
+    readonly: {
+      type: Boolean,
+      default: false,
+    },
+    indeterminate: {
+      type: Boolean,
+      default: false,
+    },
   },
   emits: {
     'update:modelValue': [Boolean],
@@ -60,22 +70,29 @@ export default {
         set: val => emit('update:modelValue', val),
       }),
     );
-    const refLabel = computed(() => props.label);
+    const checkbox = ref(null);
 
+    const refLabel = computed(() => props.label);
     const checked = computed(() => {
       if (Array.isArray(mv.value)) {
         return mv.value.includes(refLabel.value);
       }
       return mv.value;
     });
 
-    const changeMv = async (e) => {
+    watch(
+      () => props.indeterminate,
+      (val) => { checkbox.value.indeterminate = val; },
+    );
+
+    const changeMv = async () => {
       await nextTick();
-      emit('change', mv.value, e);
+      emit('change', mv.value);
     };
 
     return {
       mv,
+      checkbox,
       checked,
       changeMv,
     };