tikops-ux (dvarena enhanced frontend)

This library was generated with Angular CLI version 13.3.0.

향상된 프론트엔드 UI 디자인 및 기능을 구현하기 위한 라이브러리입니다.

primeng 오픈소스 라이브러리를 확장합니다.
Copyright (c) 2016-2022 PrimeTek

개발 목표

• 디자인 개선 및 통일
• 코드 재사용 (component, 공통 파일)
• 프론트 소스 최소화
• 공통 기능 개선 반영
• 코드 자동화 (snippet, cli, function)

How to Use

npm install primeng
npm install primeicons
npm install primeflex
npm install tikops-ux

2. global style(dv-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/tikops-ux/styles/dv-styles.scss";

• 프론트엔드를 bootstrap > primeflex로 리팩토링하기 전이라면 자동 마이그레이션 스타일 시트도 import합니다.

@import "../node_modules/tikops-ux/styles/bootstrap-migration.scss";

3. 라이브러리 모듈을 import합니다.

import { DvComponentsModule } from "tikops-ux/components";
@NgModule({
    ...
    imports: [
    ...
    DvComponentsModule
    ],
})
export class MyModule { }

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

<dv-button></dv-button>

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

• utils/typescript.code-snippets

Components

dv-base-modal

modal 컴포넌트입니다. open close 관련 단축키 기능을 포함합니다.
primeng Dialog 확장 컴포넌트입니다.

• snippet prefix : dv-base-modal

<dv-base-modal #dvModal
    [width]="width"
    [title]="title"
    [errorStatus]="errorStatus"
    [okLabel]="okLabel"
    [okTooltip]="okTooltip"
    [cancelLabel]="cancelLabel"
    [cancelTooltip]="cancelTooltip"
    (handleOpen)="handleOpen()"
    (handleClose)="handleClose()"
    (handleSave)="handleSave()">
    <div contents>
        contents
    </div>
    <ng-template #additionalButtons>
        <dv-button label="Click">
        </dv-button>
    </ng-template>
</dv-base-modal>

Properties

|이름|타입|default|설명| |---|---|---|---| |width|DvModalWidth|DvModalWidth.MEDIUM|모달 너비| |title|string|""|모달 타이틀| |errorStatus|string|""|저장 오류 시 메시지. 왼쪽 아래 표시| |okLabel|string|"저 장"|저장 버튼 label| |okTooltip|string|"작성하신 데이터를 저장합니다.(alt z)"|저장 버튼 tooltip| |cancelLabel|string|"취 소"|취소 버튼 label| |cancelTooltip|string|"데이터를 저장하지 않고 팝업을 종료합니다.(alt c)"|취소 버튼 tooltip| |modal|boolean|true|modal/popup 구분. true면 modal, false면 popup(modaless)| |isCurrentPopup|boolean|true|dvCom currentPopupPage 지정 여부. true 시 단축키 사용 대상이 됩니다.| |isFocusButton|boolean|false|ok/cancel 버튼의 autofocus 지정 여부. true 설정 시 팝업이 열릴 때 기본 ok/cancel이 autofocus 대상이 됩니다.|

Events

|이름|파라미터|설명| |---|---|---| |handleOpen||모달 오픈 시 발생되는 이벤트| |handleClose||모달 닫기 시 발생되는 이벤트| |handleSave||저장 버튼 클릭 시 발생되는 이벤트|

dv-page-comment

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

• snippet prefix : dv-pc

<dv-page-comment
    [menuTitle]="menuTitle"
    [menuComment]="menuComment"
    [commentList]="commentList"
    [menuItems]="menuItems">
</dv-page-comment>

Properties

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

dv-button

primeng button 확장 컴포넌트입니다.

• snippet prefix : dv-btn

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

Properties

|이름|타입|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 여부| |autofocus|boolean|false|autofocus 적용 여부|

Events

|이름|파라미터|설명| |---|---|---| |handleClick||버튼 클릭 시 발생 이벤트|

dv-dropdown

primeng dropdown 확장 컴포넌트입니다.

• snippet prefix : dv-dd

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

Properties

|이름|타입|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|""|필터링 사용 시 필터 대상 옵션명|

Events

|이름|파라미터|설명| |---|---|---| |change|event: T; 선택된 옵션|옵션 선택 이벤트| |valueChange|event: string; 선택된 옵션 코드|옵션 선택 시 값 변경 이벤트|

dv-datepicker

primeng Calendar 확장 컴포넌트입니다.

• snippet prefix : dv-dp

<dv-datepicker
    [(value)]="dt"
    [tooltipText]="tooltipText"
    [tooltipPosition]="tooltipPosition"
    [mode]="mode"
    [yearRange]="yearRange"
    (change)="handleChange()">
</dv-datepicker>

Properties

|이름|타입|default|설명| |---|---|---|---| |value|DateInfo|null|utils/DateInfo 사용. valueChange 이벤트로 양방향 바인딩 가능| |tooltipText|string|""|툴팁 텍스트| |tooltipPosition|string|"top"|툴팁 방향| |mode|CalendarTypeView|"date"|캘린더 타입. date, month, year|

Events

|이름|파라미터|설명| |---|---|---| |valueChange|event: DvDateInfo; 변경된 값|값 변경 이벤트| |change||날짜 변경 이벤트 (valueChange와 같으나 값 넘기지 않음)|

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>

Properties

|이름|타입|default|설명| |---|---|---|---| |placeholder|string|""|placeholder| |tooltipText|string|""|버튼 tooltip| |value|string|""|input value| |isMain|boolean|false|한 페이지에 여러 search-input이 있을 때 autofocus 설정할 main search-input| |disabled|boolean|false|disabled 여부|

Events

|이름|파라미터|설명| |---|---|---| |handleClick||검색 버튼 클릭 시 이벤트| |valueChange|event: string; 입력된 값|값 변경 시 이벤트|

dv-base-table

primeng Table 확장 컴포넌트입니다.
셀 복사/붙여넣기를 지원합니다.

• snippet prefix : dv-bt

<dv-base-table
    [isResizable]="true"
    [items]="viewDatas.getItems()"
    [columnItems]="mainTableInfo.columns"
    [getColumClass]="getColumClass"
    [isEditable]="true"
    [isScroll]="isScroll"
    [scrollHeight]="scrollHeight"
    [dataName]="dataName"
    [mobileColumns]="getMobileColumns()"
    [draggableKey]="draggableKey"
    [droppableKey]="droppableKey"
    [getTdTooltip]="getTdTooltip"
    (setClickedRow)="setClickedRow(event)"
    (editDataCall)="editClick(event)"
    (dragStart)="dragStart(event)"
    (dragEnd)="dragEnd()"
    (dropEnd)="dropEnd(event)">
    <ng-template #additionalTh>
        <th class="text-center bg-table-header" style="width: 70px;">버튼</th>
    </ng-template>
    <ng-template let-row #additionalTd>
        <td class="text-center">
            <dv-button icon="fas fa-cloud-download-alt"></dv-button>
        </td>
    </ng-template>
    <ng-template #additionalThMobile>
        <span>버튼</span>
    </ng-template>
    <ng-template let-row #additionalTdMobile>
        <dv-button icon="fas fa-cloud-download-alt"></dv-button>
    </ng-template>
</dv-base-table>

Properties

|이름|타입|default|설명| |---|---|---|---| |isResizable|boolean|true|컬럼 사이즈 조절 기능 사용 여부| |items|any[]|[]|데이터 리스트| |columnItems|DvArrayList|null|표시 컬럼 리스트| |isEditable|boolean|false|기본 수정 버튼 사용 여부| |isScroll|boolean|false|테이블 스크롤 true/falsetrue인 경우 scrollHeight 값을 같이 설정frozenColumn을 사용하는 경우에도 true 처리 필요| |scrollHeight|string|""|테이블의 고정 높이 설정. 단위도 같이 입력 (e.g. 300px)| |dataName|string|""|모바일 테이블에서 보여줄 타이틀| |mobileColumns|any[]|[]|모바일 사이즈 테이블에 출력할 데이터. 컬럼 필드명의 리스트| |draggableKey|string|""|데이터를 드래그 가능한 테이블로 사용 시 설정하는 키 값| |droppableKey|string|""|드래그 아이템을 드랍 가능한 테이블로 사용 시 설정하는 키 값| |getColumClass|(row: any, col: DvColumnInfo) => string|null|특정 컬럼의 class 추가| |getTdTooltip|(row: any, col: DvColumnInfo) => string|null|특정 컬럼의 tooltip 대체|

Events

|이름|파라미터|설명| |---|---|---| |setClickedRow|event.index: number; 클릭 row index(row.index가 아닌 for문 index)event.row: any; 클릭된 rowevent.field: string; 클릭된 column field|row 클릭 시 발생 이벤트| |editDataCall|event: any; 클릭된 row|수정 버튼 클릭 시 발생 이벤트| |dragStart|event: any; 선택된 row|draggable 테이블의 아이템 드래그 시 발생 이벤트droppable table과 직접 연결된 것은 아니기 때문에 droppable과 사용 시 해당 아이템을 변수에 넣어둘 필요가 있음| |dragEnd||drag 중인 아이템을 놓았을 때 발생 이벤트| |dropEnd|event.event: Event; drop browser Eventevent.targetIdx: number; 테이블에서 드랍된 위치의 index|droppable 테이블에 아이템 드랍 시 발생 이벤트| |handleDraggedItems|event: any[]; 드래그 범위 아이템 리스트|드래그 시 발생 이벤트. ROW draggableKey가 있으면 발생하지 않음.|

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; 총 페이지 수|페이지 변경 시 이벤트|

dv-search-dynamic

primeng AutoComplete 확장 컴포넌트입니다.

• snippet prefix : dv-sd

<dv-search-dynamic
    [(value)]="value"
    [searchParams]="searchParams"
    [disabled]="false"
    [config]="searchConfig"
    [cancelText]="cancelText">
</dv-search-dynamic>

Properties

|이름|타입|default|설명| |---|---|---|---| |value|any|null|선택 데이터| |searchParams|any|{}|API Call 시 파라미터| |disabled|boolean|false|disabled 여부| |config|DvSearchConfig|null|API Call 설정| |cancelText|string|"선택 취소"|null 값 반환하는 데이터의 display 텍스트. 빈 문자열 입력 시 null 선택 사라짐| |inputId|string|""|input의 id값 설정|

Events

|이름|파라미터|설명| |---|---|---| |valueChange|event: any; 선택된 데이터|데이터 선택 시 이벤트|

dv-sidebar

primeng Sidebar 확장 컴포넌트입니다.

• snippet prefix : dv-sidebar

<dv-sidebar
    [position]="position"
    [(display)]="display"
    [size]="size"
    title="sidebar"
    [leftText]="leftText"
    [okLabel]="okLabel"
    [okTooltip]="okTooltip"
    [cancelLabel]="cancelLabel"
    [cancelTooltip]="cancelTooltip"
    (save)="handleSave()"
    (cancel)="handleCancel()">
    <span contents>
        contents
    </span>
    <ng-template #additionalButtons>
        <dv-button label="Click"></dv-button>
    </ng-template>
</dv-sidebar>

Properties

|이름|타입|default|설명| |---|---|---|---| |position|string|"right"|sidebar 위치. left, right, bottom, top| |display|boolean|false|sidebar show/hide 상태값| |size|string|"md"|sidebar 크기. sm, md, lg, full| |title|string|""|제목| |leftText|string|""|errorStatus 텍스트| |okLabel|string|"저 장"|기본 저장 버튼 텍스트. 빈 문자열이면 버튼 hidden| |okTooltip|string|"작성하신 데이터를 저장합니다."|기본 저장 버튼 툴팁 텍스트| |cancelLabel|string|"취 소"|기본 취소 버튼 텍스트. 빈 문자열이면 버튼 hidden| |cancelTooltip|string|"데이터를 저장하지 않고 사이드바를 닫습니다."|기본 취소 버튼 툴팁 텍스트| |modal|boolean|true|modal/modaless 구분. true면 modal, false면 modaless| |styleObj|object|{}|Inline style of the component|

Events

|이름|파라미터|설명| |---|---|---| |displayChange|event: boolean; show/hide 상태값|show/hide 상태 변경 시 이벤트| |save||저장 버튼 클릭 시 이벤트| |cancel||취소 버튼 클릭 시 이벤트|

dv-overlaypanel

primeng OverlayPanel 확장 컴포넌트입니다. 기본 사용은 DvOverlaypanelTableController class를 상속받아 구현합니다. (SampleOverlayComponent 참고)

• snippet prefix : dv-overlaypanel

<dv-overlaypanel #op (onHide)="release()">
    <ng-template pTemplate>
        <dv-base-table
            [items]="viewDatas.getItems()"
            [columnItems]="mainTableInfo.columns"
            [isEditable]="false">
        </dv-base-table>
    </ng-template>
</dv-overlaypanel>

Properties

|이름|타입|default|설명| |---|---|---|---| |showCloseIcon|boolean|true|panel 우상단 닫기 버튼 show/hide| |style|any|null|Inline style of the component.| |styleClass|string|null|Style class of the component.|

Events

|이름|파라미터|설명| |---|---|---| |onShow||show 시 이벤트| |onHide||hide 시 이벤트|

models

DropdownItem

|이름|타입|설명| |---|---|---| |selected|T|dropdown component의 option list에서 선택된 옵션| |options|T[]|dropdown component의 option list. 선택 시 selected 값에 바인딩|

utils

dv-divider

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

• snippet prefix : dv-div

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

dv-overlaypanel-table-controller

dv-overlaypanel 내부에 dv-base-table을 사용할 때 테이블 데이터 조작을 위한 추상 클래스입니다.

Properties

|이름|타입|default|설명| |---|---|---|---| |op|DvOverlayPanelComponent||ViewChile DvOverlayPanelComponent| |viewDatas|DvArrayList||테이블에 표시되는 데이터 리스트| |mainTableInfo|DvTableInfo|null|테이블 컬럼| |event|any|null|overlaypanel open 클릭 이벤트. overlaypanel 위치 설정을 위해 클릭 이벤트를 꼭 할당할 필요가 있습니다.|