VanillaFront

Va.Tag — 선택된 항목을 칩(chip)으로 표시하는 다중 선택 입력Combobox처럼 팝업 리스트에서 항목을 선택하되, 선택된 것들이 필드 안에 X 버튼 붙은 칩(chip/pill)으로 표시되는 컴포넌트입니다. Gmail의 수신자 입력, GitHub의 라벨 선택, 태그 시스템 같은 UI에 정확히 맞습니다.클래스: Va.Tag — va_tag.js:19short name: tag상속: Va.PureField (Combobox와 형제)파일: va_tag.js (별도 파일 — import 필요)isContainer: true베이스 CSS: va-input (+ 팝업 va-menu-pop, 칩 va-tag-item)1. 기본 사용import '../../lib/va_tag.js'; // ← 필수// co..

Va.ComboboxField — 라벨 + 검색·다중선택·바인딩까지 감싼 완성 폼 필드Va.Combobox가 순수 드롭다운이라면, Va.ComboboxField는 그 위에 라벨·검증·설명 + 부모-자식 필드 바인딩까지 얹은 "완성된 폼 콤보박스" 입니다. Field 계열 중에서 가장 많은 속성과 메서드를 갖는 컴포넌트로, 실무 폼에서 가장 자주 씁니다.클래스: Va.ComboboxField — va_component.js:5555short name: comboboxField상속: Va.Field (InputField·NumberField 등과 형제)내부 컴포넌트: Va.Combobox 인스턴스 (fieldComponent)isContainer: true베이스 CSS: va-combobox-field1. ..

Va.Combobox — 검색·다중선택·가상 스크롤을 갖춘 드롭다운VanillaFront의 가장 복잡한 폼 필드입니다. 이름은 콤보박스지만 실질적으로는 미니 그리드 + 드롭다운 + DataManager 통합에 가까워요. 단순 선택 리스트부터 수천 건 데이터의 다중 선택 목록까지 커버합니다.클래스: Va.Combobox — va_component.js:1330short name: combobox상속: Va.PureField (Input/Search/Number와 형제)isContainer: true베이스 CSS: va-input (+ 팝업은 va-menu-pop)소스 크기: 약 1508줄 — Combobox 계열에서 가장 큼1. 기본 사용{ tagName: 'combobox', value: '3..

Va.ColorField — 라벨 + 컬러 스와치 + 팝업 팔레트Va.ColorPicker가 순수 색상 입력이라면, Va.ColorField는 그 위에 라벨·필수 표시·검증 메시지를 얹은 완성 폼 필드입니다. Field 계열 아키텍처 그대로, 내부에 Va.ColorPicker를 소유하는 Composition 구조.클래스: Va.ColorField — va_colorpicker.js:446short name: colorField상속: Va.Field (InputField·NumberField 등과 형제)파일: va_colorpicker.js (import 필요)내부 컴포넌트: Va.ColorPicker 인스턴스 (fieldComponent)isContainer: true베이스 CSS: va-field1. ..

Va.ColorPicker — 컬러 스와치 + 팝업 팔레트 입력 필드색상을 선택하는 입력 컴포넌트입니다. 좌측에 현재 색상을 보여주는 스와치, 우측에 hex 코드 텍스트 입력창이 있고, 스와치를 클릭하거나 필드에서 Enter를 누르면 벌집(honeycomb) 모양 컬러맵 팝업이 열립니다.클래스: Va.ColorPicker — va_colorpicker.js:27short name: colorPicker상속: Va.PureField (Input/Search/Number와 형제)파일: va_component.js가 아니라 별도 파일 va_colorpicker.js 에 정의 (직접 import 필요)베이스 CSS: va-colorpicker (+ PureField의 field-wrapper)1. 기본 사용im..

Va.NumberField — 라벨 + 숫자 입력 + 검증까지 감싼 폼 필드Va.Number가 순수 숫자 입력이라면, Va.NumberField는 그 위에 라벨·필수 표시·검증 메시지·설명 텍스트를 얹은 "완성된 숫자 폼 필드" 입니다. Field 계열의 3형제(InputField, SearchField, NumberField)와 같은 아키텍처를 따르되, 내부에 Va.Number를 소유합니다.클래스: Va.NumberField — va_component.js:5494short name: numberField상속: Va.Field (InputField·SearchField와 형제)내부 컴포넌트: Va.Number 인스턴스를 자식으로 소유 (fieldComponent)isContainer: true베이스 C..

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'}렌더..

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:..

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'}..

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:..