DvComponents

This library was generated with Angular CLI version 13.3.0.

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

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 입니다.|

dv-divider

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

• snippet prefix : dv-div

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

dv-button

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 확장 컴포넌트입니다.

• 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|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 확장 컴포넌트입니다.

• 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()|값 변경 이벤트| |change|Function|new EventEmitter()|날짜 변경 이벤트 (valueChange와 같으나 값 넘기지 않음)|

DvInputModule

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

dv-search-input

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()|값 변경 시 이벤트|

DvTableModule

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

dv-base-table

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|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()|수정 버튼 클릭 시 이벤트| |dragStart|Function|new EventEmitter()|draggable 테이블의 드래그 시작 시 이벤트| |dragEnd|Function|new EventEmitter()|draggable 테이블의 드래그 종료 시 이벤트| |dropEnd|Function|new EventEmitter()|droppable 테이블의 드랍 종료 시 이벤트|

dv-paginator

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; 첫 번째 로우 indexevent.rows: number; 페이지에 표시되는 로우 수event.page: number; 변경된 페이지 번호event.pageCount: number; 총 페이지 수|페이지 변경 시 이벤트|