Skip to content

Commit

Permalink
[#630] Checkbox 로직 개선 및 예시 수정
Browse files Browse the repository at this point in the history 
################
- Checkbox 로직 개선
- Checkbox 예시 수정
- Checkbox 설명 md 수정
  • Loading branch information
kimdoeun committed Sep 18, 2020
1 parent 93c8fd8 commit 0f05a41
Show file tree
Hide file tree
Showing 4 changed files with 91 additions and 65 deletions.
17 changes: 10 additions & 7 deletions docs/views/checkbox/api/checkbox.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,22 +10,25 @@
</EvCheckboxGroup>
```

- <체크박스그룹>과 <체크박스> 태그는 부모-자식 관계로 사용해야 함
- <체크박스그룹>과 <체크박스> 태그는 위와 같이 상위에 그룹, 하위에 체크박스로 사용
(provide, injected를 사용하여 EVUI2.0 체크박스로직의 부모-자식 1depth 관계인 한계점을 개선하여, <체크박스그룹>과 <체크박스> 사이에 DOM
이 위치하더라도 그룹 내 스코프 내 양방향 데이터 바인딩이 가능하도록 함.)
- <체크박스그룹>.vue파일에서 <슬롯>을 사용하여 <체크박스>태그가 안에 들어가는 로직
- <체크박스>.vue파일에서 <슬롯>을 사용하여 태그에 '텍스트'가 안에 들어가는 로직
- <체크박스><슬롯></체크박스>로 내부에 슬롯값이 들어가며, 내부 슬롯값이 없는 경우 <체크박스>의 label속성 값이 채워진다.

>### Props
> 1) 체크박스 그룹 사용 시
>> <체크박스그룹>
>
> | 이름 | 디폴트 | 타입 | 설명 | 종류 |
> | 이름 | 디폴트 | 타입 | 설명 | 종류 |
|------------ |-----------|---------|-------------------------|---------------------------------------------------|
| v-model | | Array | <체크박스그룹>에서 최초 선택되는 <체크박스> id 입력, 해당 값은 바인딩되어 동적으로 변함 | <체크박스> 변수 : id |
| v-model | null | Array | <체크박스그룹>내 선택된 <체크박스> label 값으로, 해당 값은 바인딩되어 동적으로 변함 | |
>> <체크박스>
>
> | 이름 | 디폴트 | 타입 | 설명 | 종류 |
> | 이름 | 디폴트 | 타입 | 설명 | 종류 |
|------------ |-----------|---------|-------------------------|---------------------------------------------------|
| value | | String | HTML element value (required) | |
| v-model | null | String, Number, Boolean, Symbol, Array | <체크박스그룹>내 선택된 <체크박스> label 값으로, 해당 값은 바인딩되어 동적으로 변함 | |
| label | null | String | HTML element value (required) | |
| disabled | false | Boolean | HTML element disabled attribute | |
>
Expand All @@ -47,7 +50,7 @@
| 이름 | 파라미터 | 설명 |
| ---- | ------- | ---- |
| on-change | event | <체크박스그룹> 내 <체크박스> 변화 이벤트 감지 |
| change | event | <체크박스그룹> 내 <체크박스> 변화 이벤트 감지 |

>### 참고
- :id는 내부적으로 가지고 있으며, <체크박스>태그 내 <label for=":id">와 연동하기 위함.
Expand Down
72 changes: 38 additions & 34 deletions docs/views/checkbox/example/CheckboxGroup.vue
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
<template>
<div>
<h5># Checkbox Group</h5>
<br>
<div class="case">
<p class="case-title">Group</p>
<EvCheckboxGroup
v-model="checkboxGroup"
>
Expand All @@ -10,14 +9,15 @@
<EvCheckbox label="Option C" />
<EvCheckbox label="Option D" />
</EvCheckboxGroup>
<br>
<br>
checkboxGroup : {{ checkboxGroup }}
<br>
<br>
<hr>
<h5># Checkbox Group Event</h5>
<br>
<div class="description">
<span class="badge">
checkboxGroup
</span>
{{ checkboxGroup }}
</div>
</div>
<div class="case">
<p class="case-title">Event</p>
<EvCheckboxGroup
v-model="checkboxGroup2"
>
Expand All @@ -26,24 +26,21 @@
<EvCheckbox label="Option C" />
<EvCheckbox label="Option D" />
</EvCheckboxGroup>
<br>
<button @click="clickButton">
Add 'Option A'
</button>
<br>
checkboxGroup2 : {{ checkboxGroup2 }}
<br>
<br>
<hr>
<h5># All Check</h5>
<br>
<EvCheckbox
v-model="allCheck"
@change="changeAllCheck"
>
ALL CHECK
</EvCheckbox>
<br><br>
<div class="description">
<span class="badge">
checkboxGroup2
</span>
<button
class="btn"
@click="clickButton"
>
Add 'Option A'
</button>
{{ checkboxGroup2 }}
</div>
</div>
<div class="case">
<p class="case-title">All Check</p>
<EvCheckboxGroup
v-model="checkboxGroup3"
>
Expand All @@ -55,11 +52,18 @@
{{ info.text }}
</EvCheckbox>
</EvCheckboxGroup>
<br>
<br>
checkboxGroup3 : {{ checkboxGroup3 }}
<br>
<br>
<div class="description">
<span class="badge">
checkboxGroup3
</span>
<EvCheckbox
v-model="allCheck"
@change="changeAllCheck"
>
ALL CHECK
</EvCheckbox>
{{ checkboxGroup3 }}
</div>
</div>
</template>

Expand Down
50 changes: 29 additions & 21 deletions docs/views/checkbox/example/Default.vue
View file
Original file line number Diff line number Diff line change
@@ -1,36 +1,44 @@
<template>
<div>
<h5># Common</h5>
<br>
<div class="case">
<p class="case-title">Common</p>
<EvCheckbox
v-model="checkVal1"
>
Checkbox
</EvCheckbox>
<br>
<br>
<button @click="clickButton1">
click to change the check value
</button>
<br>
<br>
<h5># Use Change Event</h5>
<br>
<div class="description">
<button
class="btn"
@click="clickButton1"
>
click to change the check value
</button>
{{ checkResult2.value }}
</div>
</div>
<div class="case">
<p class="case-title">Use Change Event</p>
<EvCheckbox
v-model="checkVal2"
@change="changeVal2"
>
Single Checkbox
</EvCheckbox>
<br>
<br>
Value in changeEvent : {{ checkResult2.value }}
<br>
Event in changeEvent : {{ checkResult2.e }}
<br>
<br>
<h5># Disabled</h5>
<br>
<div class="description">
<span class="badge">
Value in changeEvent
</span>
{{ checkResult2.value }}
</div>
<div class="description">
<span class="badge">
Event in changeEvent
</span>
{{ checkResult2.e }}
</div>
</div>
<div class="case">
<p class="case-title">Disabled</p>
<EvCheckbox
v-model="checkVal3"
disabled
Expand Down
17 changes: 14 additions & 3 deletions src/components/checkbox/Checkbox.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,14 @@
role="checkbox"
class="ev-checkbox"
:class="[
{ 'disabled': disabled },
{ disabled: isDisabled },
{ checked: isChecked },
]"
>
<input
v-model="mv"
type="checkbox"
:disabled="disabled"
:disabled="isDisabled"
:value="refLabel"
@change="onChange"
/>
Expand Down Expand Up @@ -56,11 +57,19 @@ export default {
'EvCheckboxGroupMv',
computed({
get: () => props.modelValue,
set: () => emit('update:modelValue', !props.modelValue),
set: val => emit('update:modelValue', val),
}),
);
const refLabel = ref(props.label);
const isChecked = computed(() => {
if (Array.isArray(mv.value)) {
return mv.value.includes(refLabel.value);
}
return mv.value;
});
const isDisabled = ref(props.disabled);
const onChange = async (e) => {
await nextTick();
emit('change', mv.value, e);
Expand All @@ -69,6 +78,8 @@ export default {
return {
mv,
refLabel,
isChecked,
isDisabled,
onChange,
};
},
Expand Down

0 comments on commit 0f05a41

Please sign in to comment.