VanillaFront

Va.Radio — 라디오 버튼 (단일 배타 선택 항목)체크박스와 시각적으로 비슷하지만 배타 선택을 의도한 컴포넌트. 하나만 켜지고 나머지는 꺼져야 하는 상황용입니다. 단독으로도 쓸 수 있지만 여러 개를 그룹지어 사용하는 게 정석 — 그때는 Va.RadioGroup을 사용합니다.클래스: Va.Radio — va_component.js:10634short name: radio상속: Va.PureField (Checkbox와 형제)isContainer: true베이스 CSS: va-radio1. 기본 사용{ tagName: 'radio', radioLabel: '옵션 A', checked: true, onChange: 'onChange'}좌측: 라디오 버튼 아이콘 (원 안 채워짐 or ..

Va.CheckboxGroupField — 라벨 + 다중 선택 체크박스 그룹Va.CheckboxGroup이 순수 다중 선택 그룹이라면, Va.CheckboxGroupField는 그 위에 폼 라벨·필수 표시·검증 메시지를 얹은 완성 폼 필드입니다. Field 계열 아키텍처 그대로, 내부에 Va.CheckboxGroup을 소유하는 Composition 구조.클래스: Va.CheckboxGroupField — va_component.js:11011short name: checkboxGroupField상속: Va.Field (다른 Field 형제들과 같음)내부 컴포넌트: Va.CheckboxGroup 인스턴스 (fieldComponent)isContainer: true베이스 CSS: va-checkbox-gro..

Va.CheckboxGroup — 여러 체크박스를 데이터로 관리하는 그룹여러 개의 선택지 중 여러 개를 동시 선택할 수 있는 컴포넌트. 각 체크박스를 하드코딩으로 나열하지 않고, 데이터 배열로 선언해 한 번에 렌더링합니다. 값은 선택된 key들의 배열로 다룹니다.클래스: Va.CheckboxGroup — va_component.js:10813short name: checkboxGroup상속: Va.Component (PureField 아님!)isContainer: true베이스 CSS: va-checkbox-group1. 기본 사용{ tagName: 'checkboxGroup', key: 'code', display: 'name', data: [ { code: 'A', ..

Va.CheckboxField — 라벨(폼) + 체크박스 필드Va.Checkbox가 순수 체크박스라면, Va.CheckboxField는 그 위에 폼 라벨·필수 표시·검증 메시지를 얹은 완성 폼 필드입니다. Field 계열 아키텍처 그대로, 내부에 Va.Checkbox를 소유하는 Composition 구조.클래스: Va.CheckboxField — va_component.js:10202short name: checkboxField상속: Va.Field (다른 Field 형제들과 같음)내부 컴포넌트: Va.Checkbox 인스턴스 (fieldComponent)isContainer: true베이스 CSS: va-field1. 기본 사용{ tagName: 'checkboxField', label: '..

Va.Checkbox — 체크박스가장 흔한 폼 입력 중 하나. VanillaFront의 Checkbox는 표준 을 감싸되, 값의 형태를 다양하게 선택 할 수 있고 (true/false, Y/N, 1/0), 3상 상태(mixed), 라벨 클릭 토글, 키보드(스페이스) 지원을 모두 포함합니다.클래스: Va.Checkbox — va_component.js:4483short name: checkbox상속: Va.PureField (Input·Combobox와 형제)isContainer: true베이스 CSS: va-checkbox1. 기본 사용{ tagName: 'checkbox', checkboxLabel: '동의합니다', checked: false, onChange: 'onAgreeCh..

Va.TimeField — 라벨 + 시간(시·분·초) 선택 필드Va.TimePicker가 순수 시간 입력이라면, Va.TimeField는 그 위에 라벨·필수 표시·검증 메시지를 얹은 완성 폼 필드입니다. Field 계열 아키텍처 그대로, 내부에 Va.TimePicker를 소유하는 Composition 구조. 근태·회의 시간대·영업 시간 같은 폼 필드에 최적화되어 있어요.클래스: Va.TimeField — va_component.js:8873short name: timeField상속: Va.Field (다른 Field 형제들과 같음)내부 컴포넌트: Va.TimePicker 인스턴스 (fieldComponent)isContainer: true베이스 CSS: va-field (role="time-field" ..

Va.TimePicker — 시간(시·분·초) 선택 팝업 필드시각 하나만 선택하는 컴포넌트입니다. 좌측에 마스킹 필드(__:__:__), 우측에 시계 아이콘이 있고, 아이콘 클릭 또는 Enter 시 시·분·초 드롭다운이 있는 팝업이 열립니다. DateTimePicker에서 시간 파트만 떼어낸 형태.클래스: Va.TimePicker — va_component.js:9030short name: timePicker상속: Va.PureField (DatePicker·MonthPicker와 형제)isContainer: true베이스 CSS: va-timepicker (팝업 va-menu-pop, calendar-inner)1. 기본 사용{ tagName: 'timePicker', value: '1430..

Va.MonthField — 라벨 + 년-월 선택 필드Va.MonthPicker가 순수 년-월 입력이라면, Va.MonthField는 그 위에 라벨·필수 표시·검증 메시지를 얹은 완성 폼 필드입니다. Field 계열 아키텍처 그대로, 내부에 Va.MonthPicker를 소유하는 Composition 구조. DateField·YearField와 같은 형제로, 월간 리포트·월별 필터 폼에 정확히 맞습니다.클래스: Va.MonthField — va_component.js:8743short name: monthField상속: Va.Field (다른 Field 형제들과 같음)내부 컴포넌트: Va.MonthPicker 인스턴스 (fieldComponent)isContainer: true베이스 CSS: va-fiel..

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