cs-comp-package

lit-elements 기반의 ui 컴포넌트 패키지로 해상도 1920 * 1080 기준 반응형으로 동작합니다.

Install

yarn add cs-comp-package

Dev Server

yarn serve

/dev/index.html 에 개발용 htm이 위치 하고 있으며 https://localhost:8000/dev/index.html 로 확인 가능합니다. 프로덕션 모드로 확인 시 yarn run serve:prod 로 실행합니다.

Use

// 전체 불러오기
import "cs-comp-package"

// 필요한 컴포넌트만 import
import "cs-comp-package/cs-button"

// common 기능
import { convertViewPointPx } from "cs-comp-package/const/common"

cs-button

• type {'default' | 'icon'}
  
• height {Number}
  
• width {Number}
  

// default : type 'defulat', height 42
return html`hello`

// cs-icon
return html``

// icon-custom
return html`
  
    <img src="">
  
`

cs-calendar

달력 이외에도 모든 컴포넌트는 .styles property로 스타일을 추가할 수 있습니다.

• selectedDay { String }
• selectedInitialDate {}
• selectedEndDate {}
• isSelectedStartDate { Boolean }
• isDuration { Boolean }
• width { Number }
• height { Number }
• theme { 'black' | 'white' } 기본값 black

/**
 * {start, end}
 * @param {Object} day
 */
selectedDuration(day) {
  const { start, end } = day
  console.log(`${formatDate(start)} ~ ${formatDate(end)}`)
}

/**
 * @param {Date} day
 */
selectedDay(day) {
  console.log(formatDate(day))
}

// duration
return html`
  
`

// day
return html`
  
`

cs-canvas / cs-portlet

포틀릿 구조 대시보드 뷰 이며 cs-canvas 위에 cs-portlet 박스가 정렬되는 컴포넌트입니다.

cs-portlet

• toolsHtml {HTMLElement} 포틀릿 헤더에 커스텀으로 툴을 추가할 수 있습니다.
• isFoldable { Boolean } true : 포틀릿을 접거나 펼수 있는 기능과 버튼이 추가됩니다.
• title { String }
• disabled {Boolean} true : 고정형 / false : (default)
• left right top bottom { Nnumber } 포틀릿 위치를 지정합니다.
• style 포틀릿 사이즈및 스타일을 추가할수 있습니다.
• .isShow {Boolean} true : (default) / false : hidden

return html`
  
    
      <p>기본 포틀릿</p>
    

    
      <p>고정 포틀릿</p>
    

    
          
          
              this.onchangeDropbox("selectedMonitorCategory", item)}
            .placeholder=${"선택해주세요."}
          &gt;
        
      `}
      .styles=${css`
        .monitor_filter_wrap {
          display: flex;
          align-items: center;
        }
      `}
    &gt;
      커스텀
    
  
`

cs-checkbox

• width { Number }
• height { Number }
• id { String }
• defaultChecked { Boolean }
• theme { String }
• text { String }

// default
return html`
   {
      console.log(`${e.target.id} : ${e.target.checked}`)
    }}
  >
`

// 글자 표시
return html`
  
`

cs-dropbox

• data: { Array } required 아이템 데이터 리스트, name, value 값은 필수 [{name, value},...]
• selected: { Object } 선택된 아이템 데이터 객체
• width: { Number }
• isSearch: { Boolean } 검색 여부, 인풋 활성화
• isClearInput: { Boolean } 선택후 input 클리어 할지 여부
• searchText: { String }
• listItemTemplate: { HTMLElement } 커스텀 아이템 레이아웃

// default
return html`
   {}}
    .placeholder=${"선택해주세요."}
  >
`

// custom item
return html`
   {}}
    .selected=${selectedGovernor}
    .listItemTemplate=${(item) => html`
      <span class="name">${item.name}</span>
      <span class="manager">${item.manager}</span>
    `}
    .styles=${css`
      .dropbox {
        margin-left: 0.833vw;
      }
      .dropbox_item span.name {
        font-weight: 600;
        font-size: 0.833vw;
        line-height: 0.99vw;
        margin-bottom: 0.417vw;
      }
      .dropbox_item span.manager {
        font-weight: 400;
        font-size: 0.729vw;
        line-height: 0.885vw;
        color: var(--white-70);
      }
    `}
  &gt;
`

cs-icon

• id { String } required
• width { Number }
• height { Number }
• viewBox { String }

id 종류

menu1 menu2 menu3 menu4 menu5 menu6 menu7 menu8 menu9 menu10 menu11 arrowUp arrowRight arrowLeft calendar triangleDown search excel filter noUser

return html`
   {
      console.log(`${e.target.id} : ${e.target.checked}`)
    }}
  >
`

cs-radio

• width { Number }
• height { Number }
• styles { Object }
• data { Array }

return html`
  
  
`

cs-switch

• id { String } required
• defaultChecked { Boolean }

return html`
   {
      console.log(`${e.target.id} : ${e.target.checked}`)
    }}
  >
`

cs-table

• data { Array } required td 데이터 (필수)
• headers { Array } required th 데이터 (필수)
• clickRow { Function } tr 클릭 이벤트
• primaryKey { String } row id, 없으면 index
• defaultSortKey { String } data 정렬 기본 키
• theme { 'default' | 'small' | 'big' } 테이블 테마
• title { String } 테이블 명
• customHeaderHtml { HTMLElement } 테이블 오른쪽 상단에 html
• maxRow { Number } 로우 최대 노출 갯수
• hasPagination { Boolean } 페이징 여부( < 1/4 > ), false: 스크롤페이징 ( maxRow 개수 맞춰서 )
• isPaginationButtonList { Boolean } 페이징 버튼 리스트로 보여줄지의 여부 ( < 1 2 3 4 > )

const defaultData = {
  header: [
    { key: "name", title: "이름", align: "center" },
    { key: "sex", title: "성별", align: "center" },
    { key: "part", title: "파트", align: "center" },
  ],
  data: [
    {
      id: "0",
      name: "Mr.kim",
      sex: "man",
      part: "develop",
    },
  ],
}

// default + 스크롤페이징
return html`
   {
      console.log("row click : ", id)
    }}
    .headers=${defaultData.header}
    .data=${defaultData.data}
    maxRow=${3}
  >
`

// 기본 페이징 + 커스텀
return html`
  
        custome header
        <span class="bold">HI~!! :-)</span>
      
    `}
  &gt;
`

// 기본 + 버튼 리스트 페이징
return html`
  
`

cs-slider

• disabled { Boolean }
• min { Number }
• max { Number }
• step { Number }
• value { Number }

return html`
   {
      const [slider] = e.composedPath()
      console.log(slider.value)
    }}
  >
  
`