Skip to content

Commit

Permalink
[#734][3.0] 1차 피드백 반영
Browse files Browse the repository at this point in the history 
###########
- 이벤트 명 수정(click-node, dbclick-node, check로 수정)
- 각 속성의 특징을 볼 수 있는 예제 추가
- Default.vue에서 함수사용을 화살표 함수로 수정
- 기본 expand/collapse 아이콘 변경, expand 시 rotate처리하여 보여지도록 수정, 열고 닫을 때 애니메이션 추가
- 처음에 체크박스 선택될 때 rebuildTree가 수행되지 않아 부모 체크박스가 선택되지 않는 문제 수정
- md 기술 문서 수정
- disable-eslint 해놨던 제거 하고 불가피하게 린트 사용 막을 한 줄만 'eslint-disable-line no-param-reassign' 추가
- 아이콘 간격 수정
  • Loading branch information
@BoKyeongShin
BoKyeongShin committed Dec 17, 2020
1 parent 6a90c01 commit e7e4472
Show file tree
Hide file tree
Showing 4 changed files with 243 additions and 104 deletions.
10 changes: 5 additions & 5 deletions docs/views/tree/api/tree.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,17 +15,17 @@
| data | Array | [] | 트리 컴포넌트에 사용될 데이터| |
| use-checkbox | Boolean | false | 체크 박스를 사용 유무 | |
| empty-text | String | 'No Data' | 트리 데이터가 없을 경우 나타낼 문구 | |
| expand-icon | String | 'ev-icon-arrow-right' 아이콘 | 트리를 펼쳤을 때 보여질 아이콘 | |
| collapse-icon | String | 'ev-icon-arrow-down' 아이콘 | 트리를 접었을 때 보여질 아이콘 | |
| expand-icon | String | 'ev-icon-s-play' 아이콘을 우측으로 90도 회전한 모양 | 트리를 펼쳤을 때 보여질 아이콘 | |
| collapse-icon | String | 'ev-icon-s-play' 아이콘 | 트리를 접었을 때 보여질 아이콘 | |
| context-menu-items | Array | [] | 우클릭 시 보여지는 컨텍스트 메뉴, 사용하지 않을 경우 컨텍스트 메뉴는 보이지 않음 | |

>### Event
| 이름 | 파라미터 | 설명 |
| ---- | ------- | ---- |
| change-checked-node | checkedNode | 체크박스 변화를 인지할 때마다 현재 체크된 트리 노드들을 리턴 |
| click-content | clickedNode | 노드 컨텐츠를 클릭 했을 때 선택한 노드 정보가 리턴됨 |
| dblclick-content | clickedNode | 노드 컨텐츠를 더블 클릭 했을 때 선택한 노드 정보가 리턴됨 |
| check | checkedNode | 체크박스 변화를 인지할 때마다 현재 체크된 트리 노드들을 리턴 |
| click-node | clickedNode | 노드 컨텐츠를 클릭 했을 때 선택한 노드 정보가 리턴됨 |
| dblclick-node | clickedNode | 노드 컨텐츠를 더블 클릭 했을 때 선택한 노드 정보가 리턴됨 |

>### 참고
- context-menu-items는 contextmenu 컴포넌트의 items를 참고하여 형식에 맞춰 작성하면 됩니다.
Expand Down
201 changes: 147 additions & 54 deletions docs/views/tree/example/Default.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,7 @@
<p class="case-title">Common</p>
<ev-tree
:data="commonData"
:context-menu-items="menuItems"
@change-checked-node="getCheckedNode"
@click-content="getClickedNode"
@dblclick-content="getDblClickedNode"
@click-node="getClickedNode"
/>
<div class="description">
<div class="badge yellow">
Expand All @@ -20,11 +17,7 @@
<ev-tree
:data="checkboxExampleData"
:use-checkbox="true"
expand-icon="ev-icon-square-plus"
collapse-icon="ev-icon-square-minus"
@change-checked-node="getCheckedNode"
@click-content="getClickedNode"
@dblclick-content="getDblClickedNode"
@check="getCheckedNode"
/>
<div class="description">
<div class="badge yellow">
Expand All @@ -34,39 +27,54 @@
</div>
</div>
<div class="case">
<p class="case-title">Disabled</p>
<p class="case-title">Dblclick-node</p>
<ev-tree
:data="commonData"
:context-menu-items="menuItems"
expand-icon="ev-icon-square-plus"
collapse-icon="ev-icon-square-minus"
@change-checked-node="getCheckedNode"
@click-content="getClickedNode"
@dblclick-content="getDblClickedNode"
@dblclick-node="getDblClickedNode"
/>
<div class="description">
<div class="badge yellow">
작업해야햄@_@
더블 클릭된 노드
</div>
{{ clickedNodeInfo }}
{{ dbclickedNodeInfo }}
</div>
</div>
<div class="case">
<p class="case-title">Disabled</p>
<ev-tree :data="disableExData"/>
<div class="description">
'disabled' 속성 추가 시 클릭이 불가 합니다.
</div>
</div>
<div class="case">
<p class="case-title">ContextMenu</p>
<ev-tree
:data="commonData"
:data="contextmenuExData"
:context-menu-items="menuItems"
expand-icon="ev-icon-square-plus"
collapse-icon="ev-icon-square-minus"
@change-checked-node="getCheckedNode"
@click-content="getClickedNode"
@dblclick-content="getDblClickedNode"
/>
<div class="description">
<div class="badge yellow">
컨텍스메뉴 클리한거 뜨도록 작업해야 햅햅햅
클릭한 컨텍스메뉴명
</div>
{{ clickedNodeInfo }}
{{ contextMenuInfo }}
</div>
</div>
<div class="case">
<p class="case-title">Custom Expand/Collapse Icon</p>
<ev-tree
:data="commonData"
expand-icon="ev-icon-square-plus"
collapse-icon="ev-icon-square-minus"
/>
<div class="description">
'expand-icon'과 'collapse-icon' 속성을 통해 아이콘을 변경할 수 있습니다.
</div>
</div>
<div class="case">
<p class="case-title">IconClass</p>
<ev-tree :data="iconClassExData"/>
<div class="description">
'iconClass'속성을 사용하면 트리 노드 내부에 아이콘을 추가 수 있습니다.
</div>
</div>
</template>
Expand All @@ -84,31 +92,21 @@ export default {
{
title: 'Parent A',
expand: true,
iconClass: 'ev-icon-folder',
children: [
{
title: 'Leaf AA',
expand: true,
iconClass: 'ev-icon-document-vertically',
children: [
{
title: 'Leaf AAA',
},
],
},
{
title: 'Leaf AB',
},
],
},
{
title: 'Parent B',
expand: true,
iconClass: 'ev-icon-folder2',
children: [
{
title: 'Leaf BA',
},
{
title: 'Leaf BB',
},
],
},
],
},
]);
Expand Down Expand Up @@ -152,37 +150,132 @@ export default {
],
},
]);
const menuItems = ref([
const disableExData = ref([
{
text: 'ContextMenu',
click: () => console.log('CLICK ContextMenu'),
title: 'Root',
expand: true,
children: [
{
title: 'Parent A',
expand: true,
disabled: true,
},
{
title: 'Parent B',
expand: true,
children: [
{
title: 'Leaf BA',
disabled: true,
},
{
title: 'Leaf BB',
},
],
},
],
},
]);
const contextmenuExData = ref([
{
title: 'Root',
expand: true,
children: [
{
title: 'Parent A',
expand: true,
},
{
title: 'Parent B',
expand: true,
children: [
{
title: 'Leaf BA',
},
{
title: 'Leaf BB',
},
],
},
],
},
]);
const iconClassExData = ref([
{
title: 'Root',
expand: true,
children: [
{
title: 'Parent A',
expand: true,
iconClass: 'ev-icon-folder',
children: [
{
title: 'Leaf AA',
expand: true,
iconClass: 'ev-icon-document-vertically',
},
{
title: 'Leaf AB',
},
],
},
{
title: 'Parent B',
expand: true,
iconClass: 'ev-icon-folder2',
children: [
{
title: 'Leaf BA',
},
{
title: 'Leaf BB',
},
],
},
],
},
]);
const clickedNodeInfo = ref({});
const checkedNodeInfo = ref({});
const dbclickedNodeInfo = ref({});
const contextMenuInfo = ref('');
function getCheckedNode(checkedNode) {
console.log('getCheckedNode', checkedNode);
const menuItems = ref([
{
text: 'ContextMenu1',
click: () => { contextMenuInfo.value = 'ContextMenu1'; },
},
{
text: 'ContextMenu2',
click: () => { contextMenuInfo.value = 'ContextMenu2'; },
},
]);
const getCheckedNode = (checkedNode) => {
checkedNodeInfo.value = checkedNode;
}
};
function getClickedNode(clickedNode) {
console.log('getClickedNode', clickedNode);
const getClickedNode = (clickedNode) => {
clickedNodeInfo.value = clickedNode;
}
};
function getDblClickedNode(clickedNode) {
console.log('getDblClickedNode', clickedNode);
}
const getDblClickedNode = (clickedNode) => {
dbclickedNodeInfo.value = clickedNode;
};
return {
commonData,
checkboxExampleData,
disableExData,
contextmenuExData,
iconClassExData,
menuItems,
clickedNodeInfo,
dbclickedNodeInfo,
checkedNodeInfo,
contextMenuInfo,
getCheckedNode,
getClickedNode,
getDblClickedNode,
Expand Down
Loading

0 comments on commit e7e4472

Please sign in to comment.