Skip to Content
ComponentsCalsCals Components

Cals Components

Cals 제품 전용 브랜딩이 적용된 컴포넌트 라이브러리입니다.

개요

Cals Components는 Foundation Components를 기반으로 Cals 제품의 요구사항에 맞게 확장한 컴포넌트 세트입니다. controlStyle 기반 동적 스타일링을 지원합니다.

특징

  • Foundation 기반: 검증된 Foundation Components를 상속
  • 올인원 API: title, icon, visible, label, shortcut 등 편의 props 내장
  • 동적 색상 파생: backgroundColor만 지정하면 hover/active/disabled 색상 자동 계산
  • 토큰 오버라이드: controlStyle 항목이 있을 때만 디자인 토큰을 오버라이드
  • TypeScript 지원: 완벽한 타입 정의 제공

Foundation과의 차이점

특징FoundationCals
API 스타일children 기반title/icon prop 기반
색상 커스터마이징variant 선택 또는 classNamebackgroundColor prop → 상태별 자동 파생
FormItem 래핑외부에서 직접label/showLabel prop 내장
가시성 제어조건부 렌더링 직접visible prop 내장
단축키미지원shortcut prop 내장
포커스 제어ref 직접 접근useImperativeHandle (focus/blur/element)

컴포넌트 목록

Form (폼)

  • Form - 입력 컨트롤 격자 레이아웃 컨테이너
  • Button - 올인원 버튼 컴포넌트
  • ChannelButton - 채널(메일 등) 발송 트리거 버튼 컴포넌트
  • ToolbarButton - 도구 모음 전용 액션 버튼 컴포넌트
  • Text - 올인원 텍스트 입력 컴포넌트
  • Number - 숫자 입력 및 증감 버튼 컴포넌트
  • Textarea - 여러 줄 텍스트 입력 컴포넌트
  • Select - 드롭다운 선택 컴포넌트
  • Radio - 라디오 버튼 그룹 컴포넌트
  • Checkbox - 체크박스 컴포넌트
  • ColorPicker - 색상 선택 컴포넌트
  • DatePicker - 날짜/기간/주간 선택 컴포넌트
  • TimeSelect - 시간 선택 컴포넌트
  • Editor - 리치 텍스트 에디터 컴포넌트
  • FileUpload - 파일 업로드 컴포넌트
  • Group - 하위 항목 그룹 렌더/값 릴레이 컴포넌트
  • ImageUpload - 이미지 전용 업로드 컴포넌트
  • Upload - 이미지 카드 목록 업로드 컴포넌트
  • ProgressUploader - 단일 카드형 진행률 업로드 컴포넌트
  • Hidden - 화면에 표시되지 않는 숨김 데이터 컴포넌트
  • LookUp - 읽기 전용 입력 + 검색 버튼 조회 컨트롤
  • Collection - 배열 데이터 보유 여부 표시 + 룩업 선택 컨트롤
  • Password - 비밀번호 입력 전용 컴포넌트
  • ZipCodeKR - 한국 우편번호 검색 컨트롤
  • DateTimePicker - 날짜+시간 선택 컨트롤

Display (표시)

  • Label - 텍스트 표시 컴포넌트
  • ImageView - 이미지 슬라이드 뷰어 컴포넌트
  • IFrame - 외부/내부 화면 내장 인라인 프레임 컴포넌트
  • Carousel - 이미지 캐러셀 슬라이드 컴포넌트
  • Box - 아이콘·수치·레이블 요약 정보 레이아웃 컨테이너
  • BoxData - 데이터 표시 박스 컴포넌트
  • BoxIcon - 아이콘 표시 박스 컴포넌트
  • BoxLabel - 라벨 표시 박스 컴포넌트
  • Comment - 댓글 목록 컨테이너 컴포넌트
  • CommentButton - 코멘트 버튼 컴포넌트
  • TextContent - 텍스트 콘텐츠 표시 컴포넌트
  • Steps - 진행 단계 표시 컴포넌트
  • Progress - 진행률 표시 바 컴포넌트
  • Timeline - 시간순 카드 타임라인 컴포넌트

Data (데이터)

  • Grid - 선언적 데이터 그리드 컴포넌트
  • List - Grid + InlineEditToolbar 조합 데이터 목록 컴포넌트
  • Kanban - 컬럼 기반 카드 보드 컴포넌트
  • OrchestrationDesigner - 비주얼 워크플로우 편집기 컴포넌트
  • Schedule - 일정 관리 캘린더 컴포넌트

Toolbar (도구 모음)

  • Toolbar - 타이틀 영역과 도구 모음 영역을 제공하는 컨테이너 컴포넌트
  • ToolbarForm - 도구 모음 + 접이식 폼 격자 복합 컨테이너 컴포넌트
  • ToolbarGrid - 도구 모음 + 접이식 검색 폼 + 데이터 그리드 복합 컨테이너 컴포넌트
  • ToolbarList - 도구 모음 + 접이식 검색 폼 + 인라인 편집 리스트 복합 컨테이너 컴포넌트
  • InlineEditToolbar - 인라인 편집 도구 모음 컴포넌트

Layout (레이아웃)

  • Dynamic - 동적 컴포넌트 컨테이너
  • Resizable - 그리드 단위 기반 크기 조절 래퍼 컴포넌트
  • Spacer - 레이아웃 수직 여백 컴포넌트
  • Tabs - 여러 탭을 통해 콘텐츠 영역을 전환할 수 있는 탭 기본 UI
  • Tree - 계층 구조 데이터를 표시하는 트리 컴포넌트
  • WebComponent - 외부 Vue 마이크로프론트엔드 Shadow DOM 컨테이너
  • Alert - 확인 버튼만 있는 알림 다이얼로그
  • Confirm - 확인/취소 선택 다이얼로그
  • ContextMenu - 좌표 기반 컨텍스트 메뉴
  • ChannelMailPopup - 이메일 발송 팝업 컴포넌트
  • Collapse - 접이식 패널 컴포넌트

빠른 시작

패키지 설치

pnpm add @vortex/ui-cals

컴포넌트 사용

import { Button } from "@vortex/ui-cals"
 
// 기본 사용
<Button title="저장" />
 
// 커스텀 색상 (hover/disabled 자동 파생)
<Button
  title="실행"
  backgroundColor="#16a34a"
  color="#fff"
/>
 
// 단축키 + FormItem 래핑
<Button
  title="검색"
  shortcut={[["ctrl", "k"], ["meta", "k"]]}
  showLabel
/>

다음 단계

Last updated on
ComponentsAlert