VanillaFront

Va.DisplayField — 라벨 + 읽기 전용 값 표시Va.Display가 순수 표시 필드라면, Va.DisplayField는 그 위에 폼 라벨·검증 메시지 영역을 얹은 완성 폼 필드입니다. Field 계열 아키텍처 그대로, 내부에 Va.Display를 소유하는 Composition 구조. 폼 안 조회 화면의 정석.클래스: Va.DisplayField — va_component.js:9612short name: displayField상속: Va.Field (다른 Field 형제들과 같음)내부 컴포넌트: Va.Display 인스턴스 (fieldComponent)isContainer: true베이스 CSS: va-field1. 기본 사용{ tagName: 'displayField', labe..

Va.Display — 읽기 전용 값 표시입력 대신 값을 표시만 하는 필드. 다른 폼 필드와 시각적 규격을 맞춰 정렬된 값 표시가 필요할 때 사용합니다. 보다 유연해서 HTML 콘텐츠까지 담을 수 있습니다.클래스: Va.Display — va_component.js:9557short name: display상속: Va.PureField (Input과 형제)DOM 태그: (Input과 달리 이 아님)isContainer: true베이스 CSS: va-display1. 기본 사용{ tagName: 'display', text: '홍길동', style: { width: '200px' }}입력 불가한 값 표시다른 폼 필드와 같은 크기·정렬로 배치 가능편집 없이 데이터 조회 화면에 어울림2. D..

Va.FileDropUploadField — 라벨 + 드래그앤드롭 파일 업로드Va.FileDropUpload가 순수 드롭 영역이라면, Va.FileDropUploadField는 그 위에 폼 라벨·필수 표시·검증 메시지를 얹은 완성 폼 필드입니다. Field 계열 아키텍처 그대로, 내부에 Va.FileDropUpload를 소유하는 Composition 구조. 폼 안에서 드래그앤드롭 업로드가 필요할 때 정석.클래스: Va.FileDropUploadField — va_component.js:12653short name: fileDropUploadField상속: Va.Field (다른 Field 형제들과 같음)내부 컴포넌트: Va.FileDropUpload 인스턴스 (fieldComponent)isContain..

Va.FileDropUpload — 드래그앤드롭 파일 업로드 영역드래그앤드롭이 주된 UI인 파일 업로드 컴포넌트. 사용자가 파일을 창 안에 끌어다 놓으면 자동으로 읽어 이벤트를 dispatch합니다. 파일 내용을 텍스트로 읽을지 DataURL(base64)로 읽을지 옵션으로 선택 가능.클래스: Va.FileDropUpload — va_component.js:12504short name: fileDropUpload상속: Va.Component (PureField 아님!)isContainer: true베이스 CSS: va-file-upload-div1. 기본 사용{ tagName: 'fileDropUpload', text: '파일을 여기 놓으세요', fileType: 'binary', ..

Va.ImageFile — 이미지 파일 업로드 + 미리보기일반 Va.File에 이미지 미리보기·드래그앤드롭·우클릭 편집 기능이 통합된 컴포넌트. 프로필 사진, 게시글 대표 이미지, 상품 사진 같은 이미지 특화 업로드 UI를 한 번에 제공합니다.클래스: Va.ImageFile — va_component.js:9954short name: imageFile상속: Va.PureField (File과 형제)isContainer: true베이스 CSS: va-image-file1. 기본 사용{ tagName: 'imageFile', src: '/uploads/profile.jpg', // 초기 이미지 shape: 'circular', onChange: 'onImageChange'}렌..

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

Va.File — 파일 업로드 입력 (선택 표시 + 리셋 버튼 통합)파일 선택 다이얼로그를 여는 표준 파일 입력 컴포넌트. 선택된 파일명 표시·File 버튼·Reset 버튼이 하나의 필드로 통합되어 있어, 일반 보다 사용자 UX가 정리되어 있습니다.클래스: Va.File — va_component.js:9844short name: file상속: Va.PureField (Input·Textarea와 형제)isContainer: true베이스 CSS: va-file1. 기본 사용{ tagName: 'file', onChange: 'onFileSelected'}렌더 결과:좌측 표시 영역: Choose file (기본) → 선택 후 파일명File 버튼: 클릭 시 파일 선택 다이얼로그Reset 버튼: ..

TextareaField 정리해 드릴게요.Va.TextareaField — 라벨 + 여러 줄 텍스트 입력Va.Textarea가 순수 여러 줄 입력이라면, Va.TextareaField는 그 위에 폼 라벨·필수 표시·검증 메시지를 얹은 완성 폼 필드입니다. Field 계열 아키텍처 그대로, 내부에 Va.Textarea를 소유하는 Composition 구조. 게시글·리뷰·메모 폼에 정석.클래스: Va.TextareaField — va_component.js:9418short name: textareaField상속: Va.Field (다른 Field 형제들과 같음)내부 컴포넌트: Va.Textarea 인스턴스 (fieldComponent)isContainer: true베이스 CSS: va-field1. 기본 ..

Va.Textarea — 여러 줄 텍스트 입력HTML 표준을 감싸되, 글자 수 표시·내용에 따른 높이 자동 조절·리사이즈 방향 제어 같은 실무에 자주 필요한 기능이 추가된 컴포넌트. 게시글·메모·리뷰 본문 같은 긴 텍스트 입력에 씁니다.클래스: Va.Textarea — va_component.js:4722short name: textarea상속: Va.PureField (Input과 형제)DOM 태그: isContainer: true베이스 CSS: va-textarea1. 기본 사용{ tagName: 'textarea', value: '초기 내용', placeholder: '내용을 입력하세요', onChange: 'onContentChange'}여러 줄 텍스트 입력창Enter로 줄..

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