이식 가능한 UI 계약

아래의 ID는 각 규칙의 정식 소유자입니다.

이식성

FE-PORT-001: 이식 가능함이 기본값이다

규격을 준수하는 모듈은 모듈을 수정하지 않고, 프로젝트 전용 파사드 클래스 없이도 다른 준수 파사드 테마에서 동작합니다.

FE-STYLE-001: 파사드 전용 의존성 금지

이식 가능한 모듈은 하나의 파사드에서만 정의된 임의의 클래스나 셀렉터를 요구할 수 없습니다. 공유 PrimeVue .p-* 테마 규칙은 전용 클래스가 아닙니다. 특정 모듈에만 필요한 비 PrimeVue 스타일은 그 모듈에 속하지만, 공유 컴포넌트와 시맨틱을 따름으로써 최소화해야 합니다.

여러 자체 모듈이 동일한 비 PrimeVue 스타일을 필요로 한다면, 이는 파사드에도 각 모듈에도 속하지 않습니다. 디자인 레이어를 참고하십시오.

컴포넌트와 어포던스

FE-UI-001: 컨트롤을 충족한다면 PrimeVue를 사용한다

PrimeVue가 요구되는 시맨틱, 상호작용, 의도한 어포던스를 제공한다면 모듈은 이를 사용해야 합니다.

FE-UI-002: 데이터 형태는 어포던스가 아니다

동일한 값을 표현할 수 있다는 것이 두 컨트롤을 동등하게 만들지는 않습니다. 의도한 어포던스가 시각적으로도 동작상으로도 토글이라면, SelectButton이 3단 슬라이딩 토글의 대체물이 되지는 않습니다.

FE-UI-003: 동일한 시맨틱과 어포던스는 동일한 외형을 뜻한다

동등한 컨트롤은 크기, 간격, 색상, 타이포그래피, 테두리, 그림자, 포커스, 호버, 비활성, 무효, 모션 동작을 공유해야 합니다. 커스텀 복합 컨트롤은 자신의 PrimeVue 시각적 형제를 명시하고 적용 가능한 모든 공유 런타임 속성을 상속합니다.

FE-UI-004: PrimeVue 생략은 좁게 허용된다

모듈이 물리적으로도 시맨틱적으로도 PrimeVue와 유사한 요소를 전혀 렌더링하지 않을 때만 PrimeVue를 생략할 수 있습니다. 차트만 있는 컴포넌트는 해당되지만, 버튼이나 폼 필드가 있는 차트는 해당되지 않습니다.

FE-UI-005: 컴포넌트 API를 발명하지 않는다

문서화되지 않은 prop이나 동작은 지름길이 아닙니다. PrimeVue ToggleSwitch는 새로운 positions prop을 발명한다고 해서 3단 컨트롤이 되지 않습니다. 어떤 PrimeVue 컴포넌트나 조합으로도 요구되는 어포던스를 제공할 수 없다면, 검토를 거친 커스텀 형제 프로세스를 사용하십시오.

Tailwind와 토큰

FE-TW-001: Wippy Tailwind는 지원된다

공유 Wippy 프리셋은 지원되는 빌드 타임 계약입니다. 모듈은 문서화된 유틸리티를 사용할 수 있고, 도메인 레이아웃, 애플리케이션별 브레이크포인트, 장식, 새로운 시각화를 위해 이를 확장할 수 있습니다.

FE-TW-002: 컴파일된 값은 런타임 토큰이 아니다

px-3, rounded-md, duration-200 같은 유틸리티는 보통 상수로 컴파일됩니다. 이들은 일관된 기준선을 제공하지만, 파사드가 런타임 테마 변수를 교체해도 변하지 않습니다.

FE-TW-003: 공유 형제의 외형은 런타임 시맨틱을 따른다

어떤 외형 속성이 여러 테마에 걸쳐 PrimeVue 형제를 따라가야 한다면, 문서화된 런타임 기반 시맨틱 유틸리티나 공개 토큰을 직접 사용하십시오. 고정 유틸리티는 해당 속성이 명시적으로 platform-invariant로 분류된 경우에만 허용됩니다.

FE-TW-004: 보호된 매핑은 의미를 유지한다

모듈은 프리셋을 확장할 수 있지만, 보호된 primary, surface, severity, text, content, highlight 또는 이식 가능한 컨트롤 시맨틱을 호환되지 않게 재정의할 수 없습니다.

FE-TOKEN-001: 모든 토큰은 존재해야 한다

모든 --p-* 참조는 선택된 생성 매니페스트에 존재해야 합니다.

FE-TOKEN-002: 토큰 이름은 추측 가능한 API가 아니다

유추로 토큰을 만들어내지 마십시오. 토큰 카탈로그 또는 선택된 패키지 매니페스트에서 검색하십시오.

접근성

커스텀 컨트롤 예외는 유효한 HTML, 키보드 상호작용, 포커스, 접근 가능한 이름, 상태, 비활성 동작을 유지해야 합니다. 상호작용 요소를 중첩해서는 안 됩니다.