VanillaFront

Va.YearField — 라벨 + 년도 선택 필드Va.YearPicker가 순수 년도 입력이라면, Va.YearField는 그 위에 라벨·필수 표시·검증 메시지를 얹은 완성 폼 필드입니다. Field 계열 아키텍처 그대로, 내부에 Va.YearPicker를 소유하는 Composition 구조. Date 계열 Field 중에서 가장 가볍고 단순합니다.클래스: Va.YearField — va_component.js:8645short name: yearField상속: Va.Field (다른 Field 형제들과 같음)내부 컴포넌트: Va.YearPicker 인스턴스 (fieldComponent)isContainer: true베이스 CSS: va-field (role="date-field" 자동 부여)1. 기본..

Va.YearPicker — 년도만 선택하는 캘린더 팝업Va.DatePicker의 축소판. 년도 하나만 선택하는 데 특화된 컴포넌트입니다. 팝업엔 10년 단위 그리드가 표시되고, 화살표로 10년씩 이동합니다. 회계연도·연간 통계·설립연도 같은 필드에 적합해요.클래스: Va.YearPicker — va_component.js:6383short name: yearPicker상속: Va.PureField (DatePicker와 형제)isContainer: true베이스 CSS: va-yearpicker (팝업 va-menu-pop, calendar-inner) 1. 기본 사용{ tagName: 'yearPicker', value: '2024', onSelect: 'onYearChange'}화면..

Va.DateTimeField — 라벨 + 캘린더 팝업 + 시간까지Va.DateTimePicker가 순수 날짜+시간 입력이라면, Va.DateTimeField는 그 위에 라벨·필수 표시·검증 메시지까지 얹은 완성 폼 필드입니다. Field 계열 아키텍처 그대로, 내부에 Va.DateTimePicker를 소유하는 Composition 구조.클래스: Va.DateTimeField — va_component.js:8301short name: dateTimeField상속: Va.Field (다른 Field 형제들과 같음)내부 컴포넌트: Va.DateTimePicker 인스턴스 (fieldComponent)isContainer: true베이스 CSS: va-field (role="date-field" 자동 부여)..

Va.DateTimePicker — 날짜 + 시간을 한 필드에 입력받는 캘린더 팝업Va.DatePicker에 시간(시:분:초)까지 추가된 컴포넌트. 2024-12-25 14:30:00 형태로 날짜와 시간을 하나의 필드에서 다룹니다. 캘린더 팝업 UI + 마스킹된 필드 입력, 화면-저장 포맷 분리까지 DatePicker의 특성을 전부 계승합니다.클래스: Va.DateTimePicker — va_component.js:7470short name: dateTimePicker상속: Va.PureField (DatePicker와 형제)isContainer: true베이스 CSS: va-input (팝업 va-menu-pop, 달력 calendar-inner)소스 크기: 약 828줄1. 기본 사용{ tagNa..

Va.DateField — 라벨 + 캘린더 팝업 날짜 필드Va.DatePicker가 순수 날짜 입력이라면, Va.DateField는 그 위에 라벨·필수 표시·검증 메시지를 얹은 완성 폼 필드입니다. Field 계열 아키텍처 그대로, 내부에 Va.DatePicker를 소유하는 Composition 구조.클래스: Va.DateField — va_component.js:7223short name: dateField상속: Va.Field (다른 Field 형제들과 같음)내부 컴포넌트: Va.DatePicker 인스턴스 (fieldComponent)isContainer: true베이스 CSS: va-field (role="date-field" 자동 부여)1. 기본 사용{ tagName: 'dateField'..

Va.Filterbox — 타이핑으로 실시간 필터링되는 드롭다운Va.Combobox가 "옵션에서 선택"이라면, Va.Filterbox는 "옵션이 많을 때 타이핑으로 좁혀 찾아 선택" 하는 컴포넌트입니다. 코드 구조는 Combobox와 판박이지만, 자유 입력 + 실시간 필터링 로직이 추가되어 있어 옵션이 수십·수백 개일 때 진가를 발휘합니다.클래스: Va.Filterbox — va_component.js:2841short name: filterbox상속: Va.PureField (Combobox와 형제)isContainer: true베이스 CSS: va-filterbox (팝업은 va-menu-pop)소스 크기: 약 1632줄 — Combobox와 함께 최대 크기 1. 기본 사용{ tagName: '..

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