tikops-ux v2.4.0

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

Events

dv-page-comment

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

• snippet prefix : dv-pc

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

Properties

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

Events

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

Events

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

Events

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

Events

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

Events

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

Events

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

Events

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

Events

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

Events

models

DropdownItem

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