# DvComponents

This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 13.3.0.

향상된 UI 디자인을 위해 테마와 style, component를 라이브러리로 한데 묶어 npm으로 설치해 활용하기 위한 통합 라이브러리입니다.

[primeng](https://www.primefaces.org/primeng/) 오픈소스 라이브러리를 확장합니다.

## How to Use

1. 관련 라이브러리를 설치합니다.

```
npm install primeng
npm install primeicons
npm install primeflex
```

2. global style(styles.scss)에 css 파일을 import합니다.

```
@import "../node_modules/primeicons/primeicons.css";
@import "../node_modules/primeng/resources/themes/saga-blue/theme.css";
@import "../node_modules/primeng/resources/primeng.min.css";
@import "../node_modules/primeflex/primeflex.css";
@import "../node_modules/dv-components/styles/style.scss";
@import "../node_modules/dv-components/styles/page-extension.scss";
```

3. 라이브러리 컴포넌트를 사용할 모듈에 관련 컴포넌트 모듈을 import합니다.

```
import { DvButtonModule } from "dv-components/dv-button";
@NgModule({
    ...
    imports: [
    ...
    DvButtonModule
    ],
})
export class MyModule { }
```

4. 뷰에서 selector로 컴포넌트를 바인딩합니다.

```
<dv-button></dv-button>
```

5. prefix 사용을 위한 파일을 포함하고 있습니다.





## Components

### dv-page-comment

mainContents 상단 메뉴명과 메뉴 코멘트 컴포넌트입니다.

* snippet prefix : dv-pc

```
import { DvPageCommentModule } from "dv-components/dv-page-comment";
```
```
<dv-page-comment
    [menuTitle]="menuTitle"
    [menuComment]="menuComment"
    [commentList]="commentList"
    [menuItems]="menuItems">
</dv-page-comment>
```

|이름|타입|default|설명|
|---|---|---|---|
|menuTitle|string|""|메뉴 이름|
|menuComment|string|""|메뉴 설명(주)|
|commentList|string[]|[]|메뉴 설명(부)|
|menuItems|MenuItem[]|[]|primeng api MenuItem 사용. 우측에 표시되는 [Breadcrumb](https://primefaces.org/primeng/breadcrumb) 입니다.|


***


### dv-divider

divider의 여백을 0으로 하는 divider styleClass 입니다.

* snippet prefix : dv-div

```
<p-divider styleClass="dv-divider"></p-divider>
```


***


### dv-button

primeng [button](https://primefaces.org/primeng/button) 확장 컴포넌트입니다.

* snippet prefix : dv-btn

```
import { DvButtonModule } from "dv-components/dv-button";
```

```
<dv-button
    label="Click"
    icon="fas fa-pencil-alt"
    tooltip="버튼입니다."
    tooltipPosition="right"
    [disabled]="false"
    [hidden]="true"
    (handleClick)="handleClick($event)">
</dv-button>
```

|이름|타입|default|설명|
|---|---|---|---|
|icon|string|""|icon class (fontawsome)|
|label|string|""|label 이름|
|tooltip|string|""|툴팁 텍스트|
|tooltipPosition|string|"top"|툴팁 표시 방향 (top/bottom/left/right)|
|additionalClass|string|""|추가로 스타일을 적용해야 하는 경우 덧붙일 element class|
|disabled|boolean|false|disabled 여부|
|hidden|boolean|false|hidden 여부|
|handleClick|Function()|new EventEmitter()|버튼 클릭 시 이벤트|



***



### dv-dropdown

primeng [dropdown](https://primefaces.org/primeng/dropdown) 확장 컴포넌트입니다.

* snippet prefix : dv-dd

```
import { DvDropdownModule } from "dv-components/dv-dropdown";
```

```
<dv-dropdown
    [item]="dropdownItem"
    optionLabel="name"
    [isDisabled]="false"
    styleClass=""
    inputId=""
    [(value)]="currentCode"
    filterBy="name"
    (change)="handleChange($event)"
>
</dv-dropdown>
```

|이름|타입|default|설명|
|---|---|---|---|
|item|DropdownItem<T>|null|필수값. DropdownItem interface 참고|
|optionLabel|string|""|DropdownItem에서 표시되는 옵션명|
|isDisabled|boolean|false|disabled 여부|
|styleClass|string|""|추가 element class|
|inputId|string|""|dropdown id. programmatic focus 등을 위해 추가됨|
|value|string|""|바인딩 값. valueChange와 양방향 바인딩 가능|
|filterBy|string|""|필터링 사용 시 필터 대상 옵션명|
|change|Function|new EventEmitter()|옵션 선택 이벤트|
|valueChange|Function|new EventEmitter()|옵션 선택 시 값 변경 이벤트|



***



### dv-datepicker

primeng [Calendar](https://primefaces.org/primeng/calendar) 확장 컴포넌트입니다.

* snippet prefix : dv-dp

```
import { DvDatepickerModule } from "dv-components/dv-datepicker";
```

```
<dv-datepicker
    [(value)]="dt"
    (change)="handleChange($event)"
>
</dv-datepicker>
```

|이름|타입|default|설명|
|---|---|---|---|
|value|DateInfo|null|utils/DateInfo 사용. valueChange 이벤트로 양방향 바인딩 가능|
|valueChange|Function|new EventEmitter<DateInfo>()|값 변경 이벤트|
|change|Function|new EventEmitter()|날짜 변경 이벤트 (valueChange와 같으나 값 넘기지 않음)|



***



### DvInputModule

```
import { DvInputModule } from "dv-components/dv-input";
```

#### dv-search-input

primeng [InputGroup](https://primefaces.org/primeng/inputgroup) 확장 컴포넌트입니다.

* snippet prefix : dv-si

```
<dv-search-input
    placeholder="placeholder"
    tooltipText="tooltipText"
    [(value)]="inputValue"
    [isMain]="true"
    (handleClick)="handleClick()">
</dv-search-input>
```

|이름|타입|default|설명|
|---|---|---|---|
|placeholder|string|""|placeholder|
|tooltipText|string|""|버튼 tooltip|
|value|string|""|input value|
|isMain|boolean|false|한 페이지에 여러 search-input이 있을 때 autofocus 설정할 main search-input|
|disabled|boolean|false|disabled 여부|
|handleClick|Function|new EventEmitter()|버튼 클릭 시 이벤트|
|valueChange|Function|new EventEmitter<string>()|값 변경 시 이벤트|



***


### DvTableModule

```
import { DvTableModule } from "dv-components/dv-table";
```

#### dv-base-table

primeng [Table](https://primefaces.org/primeng/table) 확장 컴포넌트입니다.

* snippet prefix : dv-bt

```
<dv-base-table
    [isResizable]="true"
    [items]="viewDatas.getItems()"
    [columnItems]="mainTableInfo.columns"
    [getColumClass]="getColumClass"
    [isEditable]="true"
    [dataName]="dataName"
    [mobileColumns]="getMobileColumns()"
    (setClickedRow)="setClickedRow($event)"
    (editDataCall)="editClick($event)">
</dv-base-table>
```

|이름|타입|default|설명|
|---|---|---|---|
|isResizable|boolean|true|컬럼 사이즈 조절 여부|
|items|any[]|[]|데이터 리스트|
|columnItems|DvArrayList<ColumnInfo>|null|컬럼 리스트|
|getColumClass|Function|null|컬럼별 커스텀 엘리먼트 클래스를 가져오는 Function|
|isEditable|boolean|false|기본 수정 버튼 사용 여부|
|dataName|string|""|모바일 컬럼 헤더에 출력할 데이터명|
|mobileColumns|any[]|[]|모바일 사이즈 테이블에 출력할 데이터|
|draggableKey|string|""|드래그&드랍의 드래그 사용 시 키 값. 키 값이 있으면 draggable|
|droppableKey|string|""|드래그&드랍의 드랍 사용 시 키 값. 키 값이 있으면 droppable|
|setClickedRow|Function|new EventEmitter<{ index: any, row: any }>()|로우 클릭 시 이벤트|
|editDataCall|Function|new EventEmitter<any>()|수정 버튼 클릭 시 이벤트|
|dragStart|Function|new EventEmitter<any>()|draggable 테이블의 드래그 시작 시 이벤트|
|dragEnd|Function|new EventEmitter()|draggable 테이블의 드래그 종료 시 이벤트|
|dropEnd|Function|new EventEmitter()|droppable 테이블의 드랍 종료 시 이벤트|



***


#### dv-paginator

primeng [Paginator](https://primefaces.org/primeng/paginator) 확장 컴포넌트입니다.

* snippet prefix : dv-pgn

```
<dv-paginator #pPaginator
    [selectedCount]="selectedCount"
    [pagePerRows]="pagePerRows"
    [totalRows]="totalRows"
    [isSelectable]="true"
    leftText="선택"
    (pageChange)="paginate($event)">
</dv-paginator>
```

##### Properties
|이름|타입|default|설명|
|---|---|---|---|
|selectedCount|number|0|선택된 로우 수|
|pagePerRows|number|0|한 페이지에 표시할 로우 수|
|totalRows|number|0|총 로우 수|
|isSelectable|boolean|true|선택 표시 여부|
|leftText|string|"선택"|선택 수량 표시 텍스트|

##### Events
|이름|파라미터|설명|
|---|---|---|
|pageChange|event.first: number; 첫 번째 로우 index<br>event.rows: number; 페이지에 표시되는 로우 수<br>event.page: number; 변경된 페이지 번호<br>event.pageCount: number; 총 페이지 수|페이지 변경 시 이벤트|