VanillaFront

Number (숫자)

Va.Number — 숫자 전용 입력 필드를 감싸는 PureField 계열 컴포넌트입니다. min/max/step/소수점 자릿수 제한을 옵션 하나로 지정할 수 있고, 브라우저 표준 스피너(위/아래 화살표) UI가 자동으로 붙습니다.클래스: Va.Number — va_component.js:1257short name: number상속: Va.PureField (Input/Search와 형제)DOM 태그: (하드코딩)isContainer: true베이스 CSS: va-input (Input과 동일 클래스 공유)1. 기본 사용{ tagName: 'number', value: 10, min: 0, max: 100, step: 1, onChange: 'onQtyChange'}렌더..

SearchField (검색필드)

Va.SearchField — 라벨 + 검색 입력 + 검증까지 감싼 폼 필드Va.Search가 순수 검색 입력이라면, Va.SearchField는 그 위에 라벨·필수 표시·검증 메시지·설명 텍스트를 얹은 "완성된 검색 폼 필드" 입니다. Va.InputField와 완전히 같은 아키텍처를 따르되, 내부에 Va.Input 대신 Va.Search 를 소유합니다.클래스: Va.SearchField — va_component.js:5436short name: searchField상속: Va.Field (InputField와 형제)내부 컴포넌트: Va.Search 인스턴스를 자식으로 소유 (fieldComponent)isContainer: true베이스 CSS: va-field1. 기본 사용{ tagName:..

Search (검색)

Va.Search — 검색 입력 필드Va.Input과 거의 동일한 텍스트 입력이지만, HTML 표준 를 사용해 브라우저가 자동으로 검색 아이콘 · 지우기(×) 버튼 을 그려주는 컴포넌트입니다. 코드 자체는 초미니 클래스 — 사실상 "type을 'search'로 고정한 Input"입니다.클래스: Va.Search — va_component.js:1216short name: search상속: Va.PureField (Input과 형제)DOM 태그: (하드코딩)isContainer: true베이스 CSS: va-input (Input과 동일 클래스 공유)1. 기본 사용{ tagName: 'search', placeholder: '검색어를 입력하세요', onChange: 'onSearch'}..

InputField (입력필드)

Va.InputField — 라벨 + 입력 + 검증까지 한 세트로 묶은 폼 필드Va.Input이 순수 입력 자체라면, Va.InputField는 그 위에 라벨·필수 표시·검증 메시지·설명 텍스트·info 툴팁을 얹은 "완성된 폼 필드" 입니다. 실무에서 폼을 만들 때 훨씬 자주 쓰는 컴포넌트.클래스: Va.InputField — va_component.js:5377short name: inputField상속: Va.Field (Field 계열의 베이스)내부 컴포넌트: Va.Input 인스턴스를 자식으로 소유 (fieldComponent)isContainer: true베이스 CSS: va-field1. 기본 사용{ tagName: 'inputField', label: '이름', value:..

Input (입력)

Va.Input — 텍스트 입력 필드 (PureField 계열)가장 기본이 되는 폼 입력 컴포넌트입니다. HTML 을 감싸되, PureField 베이스가 제공하는 값 관리·마스킹·이벤트·상태 처리를 그대로 활용하고, Input 자신은 숫자 포맷팅(numberComma) 만 추가로 얹은 얇은 확장입니다.클래스: Va.Input — va_component.js:1165short name: input상속: Va.PureField (Component 직속 아님 — Field 계열의 베이스)DOM 태그: (기본 type="text")isContainer: true베이스 CSS: va-input (+ va-purefield)1. 기본 사용{ tagName: 'input', value: '홍길동', ..

Link (링크)

Va.Link — 하이퍼링크 컴포넌트브라우저 표준 태그를 감싸는 얇은 래퍼입니다. 프레임워크의 이벤트 시스템·CSS 테마·상태 관리에 편입시킨 것 외에는 표준 HTML 링크와 거의 동일하게 동작합니다.클래스: Va.Link — va_component.js:11446short name: link상속: Va.ComponentDOM 태그: (앵커)isContainer: false베이스 CSS: va-link1. 기본 사용{ tagName: 'link', innerHTML: 'Microsoft', href: 'http://www.microsoft.co.kr', target: '_new'}렌더 결과:Microsofthref 없이 단순 라벨로 쓸 수도 있고(그럴 땐 onClick으로 프로그..

FileButton (파일버튼)

Va.FileButton — 파일 선택 다이얼로그를 여는 버튼클릭하면 OS의 파일 선택 다이얼로그가 열리는 버튼입니다. 을 숨겨두고 버튼을 클릭 트리거로 삼는 흔한 패턴을, 컴포넌트 하나로 캡슐화한 것.클래스: Va.FileButton — va_component.js:12256short name: fileButton상속: Va.ComponentisContainer: false기본 아이콘: ico_attach (첨부 아이콘)베이스 CSS: va-button (일반 Button과 스타일 계보 공유)1. 기본 사용{ tagName: 'fileButton', text: '파일 첨부', onChange: 'onFileSelected' // 파일 선택 완료 시}onFileSelected(comp..

TabButton (탭버튼)

Va.TabButton — 탭 UI를 위한 선택형 버튼브라우저 탭이나 IDE 탭처럼 선택 상태 + 닫기 버튼 + 하단 인디케이터 바(bar) 를 갖춘 버튼입니다. 일반 Button/ToggleButton과 달리 부모 탭 컨테이너와 협력하는 라디오형 동작이 내장되어, 자신이 선택되면 형제 TabButton들을 자동으로 해제합니다.클래스: Va.TabButton — va_component.js:16599short name: tabButton상속: Va.ComponentisContainer: false기본 appearance: 'transparent' (탭 UI 관행에 맞춤)베이스 CSS: va-tab-button1. 기본 사용{ tagName: 'tab', // 부모..

ToggleButton (토글버튼)

Va.ToggleButton — 눌린 상태를 유지하는 토글 버튼일반 Va.Button이 매번 눌렀다 놓아지는 순간 액션이라면, Va.ToggleButton은 눌린/안 눌린 상태(pressed)를 유지하는 이중 상태 버튼입니다. 볼드/이탤릭 같은 툴바 토글, 필터 on/off, 사이드바 표시 토글 같은 곳에 씁니다.클래스: Va.ToggleButton — va_component.js:12733short name: toggleButton상속: Va.Component (Button 상속 아님, 별도 구현)베이스 CSS: va-button (Button과 스타일 계보 공유)1. 기본 사용{ tagName: 'toggleButton', text: 'Bold', icon: 'ico_bold', ..

SplitButton (분할버튼)

Va.SplitButton — 액션 + 드롭다운이 나뉜 분할 버튼버튼 하나가 두 영역으로 갈라져 있는 컴포넌트입니다. 왼쪽 영역은 즉시 실행되는 주 액션, 오른쪽 작은 화살표 영역은 드롭다운 메뉴 트리거. "저장" 버튼 옆에 "다른 이름으로 저장 / 사본으로 저장…" 같은 대안 액션들을 팝업으로 제공할 때 씁니다.클래스: Va.SplitButton — va_component.js:14959short name: splitButton상속: Va.ComponentisContainer: true — 자식으로 menuItem 담음베이스 CSS: va-split-button1. 기본 사용{ tagName: 'splitButton', text: '저장', icon: 'ico_save', onCl..