cs-comp-package

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

Install

yarn add cs-comp-package

Dev Server

yarn serve

/dev/index.html 에 개발용 htm이 위치 하고 있으며 http://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`<cs-button>hello</cs-button>`

// cs-icon
return html`<cs-button type="icon"><cs-icon id="" /></cs-button>`

// icon-custom
return html`
  <cs-button type="icon" height=${24} width=${24}>
    <img src="" />
  </cs-button>
`

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`
  <cs-calendar
    .styles=${css`
      #datepicker {
        margin: 0 1.25vw 0 1.354vw;
      }
    `}
    .complete=${this.selectedDuration}
    .selectedInitialDate=${startDate}
    .selectedEndDate=${endDate}
  ></cs-calendar>
`

// day
return html`
  <cs-calendar
    ?isDuration=${false}
    .complete=${this.selectedDay}
    .selectedInitialDate=${selectedDay}
  ></cs-calendar>
`

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`
  <cs-canvas>
    <cs-portlet
      title="default"
      right="24"
      bottom="24"
      style="width:100px; height:100px;"
    >
      <p>기본 포틀릿</p>
    </cs-portlet>

    <cs-portlet
      title="fixed"
      left="24"
      top="24"
      disabled=${true}
      style="width:100px; height:100px;"
    >
      <p>고정 포틀릿</p>
    </cs-portlet>

    <cs-portlet
      right="24"
      top="24"
      style="width:38.646vw;"
      ?isFoldable=${true}
      title="헤더 커스텀 툴 추가"
      .toolsHtml=${html`
        <div class="monitor_filter_wrap">
          <cs-calendar
            .styles=${css`
              #datepicker {
                margin: 0 1.25vw 0 1.354vw;
              }
            `}
            .complete=${this.selectedDate}
            .selectedInitialDate=${this.startDate}
            .selectedEndDate=${this.endDate}
          ></cs-calendar>
          <cs-dropbox
            width="150"
            .data=${this.monitorCategory || []}
            .selected=${this.selectedMonitorCategory || []}
            .onchange=${(item) =>
              this.onchangeDropbox("selectedMonitorCategory", item)}
            .placeholder=${"선택해주세요."}
          ></cs-dropbox>
        </div>
      `}
      .styles=${css`
        .monitor_filter_wrap {
          display: flex;
          align-items: center;
        }
      `}
    >
      커스텀
    </cs-portlet>
  </cs-canvas>
`

cs-checkbox

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

// default
return html`
  <cs-checkbox
    id=${id}
    .onchange=${(e) => {
      console.log(`${e.target.id} : ${e.target.checked}`)
    }}
  ></cs-checkbox>
`

// 글자 표시
return html`
  <cs-checkbox
    theme="blue"
    width="24"
    height="24"
    text=${"hi"}
    id=${id}
    .onchange=${this.onchange}
  ></cs-checkbox>
`

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`
  <cs-dropbox
    width="150"
    .data=${data || []}
    .selected=${selected}
    .onchange=${(item) => {}}
    .placeholder=${"선택해주세요."}
  ></cs-dropbox>
`

// custom item
return html`
  <cs-dropbox
    width=${286}
    .isClearInput=${false}
    ?isSearch=${true}
    .placeholder=${"선택해주세요."}
    .data=${itemList}
    .onchange=${(item) => {}}
    .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);
      }
    `}
  ></cs-dropbox>
`

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`
  <cs-checkbox
    id=${id}
    .onchange=${(e) => {
      console.log(`${e.target.id} : ${e.target.checked}`)
    }}
  ></cs-checkbox>
`

cs-radio

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

return html`
  <cs-radio
    data=${[
      {
        id: "food",
        options: [
          { id: 0, text: "rice" },
          { id: 1, text: "pizza" },
        ],
      },
      {
        id: "coffee",
        options: [
          { id: 0, text: "latte" },
          { id: 1, text: "americano" },
        ],
      },
    ]}
  >
  </cs-radio>
`

cs-switch

• id { String } required
• defaultChecked { Boolean }

return html`
  <cs-switch
    id=${id}
    ?defaultChecked=${true}
    .onchange=${(e) => {
      console.log(`${e.target.id} : ${e.target.checked}`)
    }}
  ></cs-switch>
`

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`
  <cs-table
    .clickRow=${(id) => {
      console.log("row click : ", id)
    }}
    .headers=${defaultData.header}
    .data=${defaultData.data}
    maxRow=${3}
  ></cs-table>
`

// 기본 페이징 + 커스텀
return html`
  <cs-table
    .styles=${css`
      .last_time {
        font-weight: 400;
        font-size: 1.042vw;
        line-height: 1.25vw;
        color: red;
      }
      .last_time .bold {
        font-weight: 500;
        font-size: 1.042vw;
        line-height: 1.25vw;
        margin-left: 0.417vw;
        color: green;
      }
    `}
    .clickRow="${(id) => {
      console.log("row click : ", id)
    }}"
    theme="big"
    defaultSortKey="id"
    primaryKey="id"
    .headers=${defaultData.header}
    .data=${defaultData.data}
    ?hasPagination=${true}
    maxRow=${10}
    .customHeaderHtml=${html`
      <span class="last_time">
        custome header
        <span class="bold">HI~!! :-)</span>
      </span>
    `}
  ></cs-table>
`

// 기본 + 버튼 리스트 페이징
return html`
  <cs-table
    .clickRow="${(id) => {
      console.log("row click : ", id)
    }}"
    theme="small"
    defaultSortKey="id"
    primaryKey="id"
    .headers=${defaultData.header}
    .data=${defaultData.data}
    ?hasPagination=${true}
    ?isPaginationButtonList=${true}
    maxRow=${6}
  ></cs-table>
`

cs-slider

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

return html`
  <cs-slider
    .min=${0}
    .max=${5}
    .step=${1}
    .value=${this.sliderValue}
    @change=${(e) => {
      const [slider] = e.composedPath()
      console.log(slider.value)
    }}
  >
  </cs-slider>
`