VanillaFront

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.MonthPicker — 년-월을 선택하는 캘린더 팝업년도만 다루는 Va.YearPicker와 년-월-일을 다루는 Va.DatePicker의 중간 자리를 차지하는 컴포넌트입니다. 팝업엔 특정 년도의 12개월 격자가 표시되고, 좌우 화살표로 년도를 이동합니다. 월별 매출·월별 통계 필드에 정확히 어울려요.클래스: Va.MonthPicker — va_component.js:5947short name: monthPicker상속: Va.PureField (YearPicker·DatePicker와 형제)isContainer: true베이스 CSS: va-monthpicker (팝업 va-menu-pop, calendar-inner)1. 기본 사용{ tagName: 'monthPicker', val..

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.DatePicker — 캘린더 팝업이 있는 날짜 선택 필드날짜를 입력받는 컴포넌트. 좌측에 날짜 마스킹(YYYY-MM-DD) 입력창, 우측에 캘린더 아이콘이 있고, 아이콘 클릭 또는 Enter 시 월간 캘린더 팝업이 열립니다. ColorPicker와 같은 팝업 패턴을 따르되, 내부에 달력 렌더링 로직이 붙어 있습니다.클래스: Va.DatePicker — va_component.js:6654short name: datePicker상속: Va.PureField (Input/Combobox와 형제)isContainer: true베이스 CSS: va-input (팝업은 va-menu-pop, 달력은 calendar-inner)소스 크기: 약 566줄1. 기본 사용{ tagName: 'datePicke..