@krds.ui/vue 0.0.19 → 0.0.21
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +1 -1
- package/README.md +16 -12
- package/dist/krds-vue.es.js +1694 -1461
- package/dist/krds-vue.es.js.map +1 -1
- package/dist/style.css +1 -1
- package/dist/types/index.d.ts +415 -35
- package/package.json +39 -30
package/LICENSE
CHANGED
package/README.md
CHANGED
|
@@ -12,7 +12,7 @@ KRDS Vue는 공공 웹서비스에서 반복되는 폼, 내비게이션, 레이
|
|
|
12
12
|
|
|
13
13
|
## 링크
|
|
14
14
|
|
|
15
|
-
- [
|
|
15
|
+
- [문서 사이트](https://krds.initializer.org/) - 컴포넌트 예제, 코드, API(props·events·slots) 문서
|
|
16
16
|
- [npm 패키지](https://www.npmjs.com/package/@krds.ui/vue)
|
|
17
17
|
- [GitHub 저장소](https://github.com/Initializer-org/krds-vue)
|
|
18
18
|
- [KRDS 공식 홈페이지](https://www.krds.go.kr/html/site/index.html)
|
|
@@ -21,7 +21,7 @@ KRDS Vue는 공공 웹서비스에서 반복되는 폼, 내비게이션, 레이
|
|
|
21
21
|
|
|
22
22
|
- **Vue 3 + TypeScript**: Vue 3.5 이상과 타입 정의를 지원합니다.
|
|
23
23
|
- **ESM-only 배포**: modern bundler 환경에 맞춘 ESM 산출물만 제공합니다.
|
|
24
|
-
- **KRDS 공식 컴포넌트 대응**: [공식 컴포넌트 55종](https://www.krds.go.kr/html/site/component/component_summary.html) 중
|
|
24
|
+
- **KRDS 공식 컴포넌트 대응**: [공식 컴포넌트 55종](https://www.krds.go.kr/html/site/component/component_summary.html) 중 44종을 제공하며, 폼 레이아웃·아이콘 등 부가 컴포넌트를 포함해 총 51개 컴포넌트를 제공합니다.
|
|
25
25
|
- **플러그인/개별 import 지원**: 전체 전역 등록 또는 필요한 컴포넌트만 import할 수 있습니다.
|
|
26
26
|
- **KRDS 스타일/토큰 포함**: 패키지 스타일 엔트리에서 토큰, 폰트, 컴포넌트 CSS를 함께 제공합니다.
|
|
27
27
|
- **접근성 고려**: 키보드 조작, ARIA 속성, 포커스 스타일, 고대비 모드를 고려해 구현합니다.
|
|
@@ -174,14 +174,14 @@ document.documentElement.setAttribute('data-krds-mode', 'high-contrast')
|
|
|
174
174
|
|
|
175
175
|
## 컴포넌트 범위
|
|
176
176
|
|
|
177
|
-
[KRDS 공식 컴포넌트 목록](https://www.krds.go.kr/html/site/component/component_summary.html) 55종 기준 대응 현황입니다. 각 컴포넌트의 props/events는 [
|
|
177
|
+
[KRDS 공식 컴포넌트 목록](https://www.krds.go.kr/html/site/component/component_summary.html) 55종 기준 대응 현황입니다. 각 컴포넌트의 예제와 props/events는 [문서 사이트](https://krds.initializer.org/)에서 확인하세요.
|
|
178
178
|
|
|
179
179
|
| 분류 | 공식 컴포넌트 → 제공 컴포넌트 |
|
|
180
180
|
| ---------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
181
181
|
| 아이덴티티 | 공식 배너 `KrdsMasthead` · 운영기관 식별자 `KrdsIdentifier` · 헤더 `KrdsHeader` · 푸터 `KrdsFooter` |
|
|
182
182
|
| 탐색 | 건너뛰기 링크 `KrdsSkipLink` · 메인 메뉴 `KrdsMainMenu` · 브레드크럼 `KrdsBreadcrumb` · 사이드 메뉴 `KrdsSideNavigation` · 콘텐츠 내 탐색 `KrdsInPageNavigation` · 페이지네이션 `KrdsPagination` |
|
|
183
183
|
| 레이아웃 및 표현 | 구조화 목록 `KrdsStructuredList` · 긴급 공지 `KrdsCriticalAlerts` · 디스클로저 `KrdsDisclosure` · 모달 `KrdsModal` · 배지 `KrdsBadge` · 아코디언 `KrdsAccordionGroup`/`KrdsAccordionItem` · 캐러셀 `KrdsCarousel` · 탭 `KrdsTabs` · 표 `KrdsTable` · 텍스트 목록 `KrdsTextList` · 달력(`KrdsDateInput`에 내장) |
|
|
184
|
-
| 액션 | 링크 `KrdsLink` · 버튼 `KrdsButton`
|
|
184
|
+
| 액션 | 링크 `KrdsLink` · 버튼 `KrdsButton` · 플로팅 버튼 `KrdsFloatingButton` |
|
|
185
185
|
| 선택 | 라디오 버튼 `KrdsRadio` · 체크박스 `KrdsCheckbox` · 셀렉트 `KrdsSelect` · 태그 `KrdsTag` · 토글 스위치 `KrdsToggleSwitch` |
|
|
186
186
|
| 피드백 | 단계 표시기 `KrdsStepIndicator` · 스피너 `KrdsSpinner` |
|
|
187
187
|
| 도움 | 도움 패널·따라하기 패널 `KrdsPanel` · 맥락적 도움말 `KrdsContextualHelp` · 코치마크 `KrdsCoachMark` · 툴팁 `KrdsTooltip` · 음성지원 `KrdsTts` |
|
|
@@ -195,8 +195,11 @@ document.documentElement.setAttribute('data-krds-mode', 'high-contrast')
|
|
|
195
195
|
|
|
196
196
|
아래 항목은 KRDS 원본 저장소가 구현(HTML/SCSS)을 제공하지 않아 포팅 대상이 아닙니다.
|
|
197
197
|
|
|
198
|
-
-
|
|
199
|
-
|
|
198
|
+
- **이미지**: 문서 사이트에 안내 문서만 제공합니다.
|
|
199
|
+
|
|
200
|
+
플로팅 버튼(FAB)도 원본 구현이 없지만, KRDS 가이드의 구조(단일형·확장형)와 토큰으로 직접 만들어 제공합니다.
|
|
201
|
+
|
|
202
|
+
- **모바일 계열**(범위슬라이드, 뒤로가기 버튼, 바텀시트, 수량 토글, 토스트, 스낵바, 탭바, 스플래시 스크린): 모바일 앱 전용 항목입니다. 탭바·스플래시 스크린은 문서 사이트에 안내 문서만 제공합니다.
|
|
200
203
|
- **파비콘, 접근 가능한 미디어**: 컴포넌트가 아닌 가이드 항목입니다.
|
|
201
204
|
|
|
202
205
|
### 원본 동기화 기준
|
|
@@ -208,8 +211,8 @@ document.documentElement.setAttribute('data-krds-mode', 'high-contrast')
|
|
|
208
211
|
## 접근성
|
|
209
212
|
|
|
210
213
|
- 컴포넌트는 원본 KRDS 마크업 구조와 ARIA 속성, 키보드 인터랙션을 따라 구현합니다.
|
|
211
|
-
- 모든
|
|
212
|
-
- 원본 KRDS 마크업에서 비롯된 위반(탭의 `li[role=tab] > button` 중첩, 정렬 셀렉트의 `title` 전용 레이블, 페이지네이션 비활성 버튼
|
|
214
|
+
- 모든 컴포넌트 테스트(`src/components/*/__tests__`)는 렌더한 화면에 axe-core 접근성 검사를 실행하며, 위반이 있으면 CI가 실패합니다.
|
|
215
|
+
- 원본 KRDS 마크업에서 비롯된 위반(탭의 `li[role=tab] > button` 중첩, 정렬 셀렉트의 `title` 전용 레이블, 페이지네이션 비활성 버튼 대비, 사이드 메뉴 팝업의 `role=menu` 하위 구조)은 원본을 따르기 위해 해당 테스트에서 요소 단위로만 검사를 제외합니다.
|
|
213
216
|
- 고대비 모드(`data-krds-mode="high-contrast"`)를 지원합니다.
|
|
214
217
|
|
|
215
218
|
라이브러리 차원의 자동 검사는 KWCAG/WCAG 적합성 평가를 대체하지 않습니다. 서비스 전체의 접근성 준수는 사용처에서 별도 검증이 필요합니다.
|
|
@@ -251,12 +254,12 @@ git clone https://github.com/Initializer-org/krds-vue.git
|
|
|
251
254
|
cd krds-vue
|
|
252
255
|
|
|
253
256
|
pnpm install
|
|
254
|
-
pnpm
|
|
257
|
+
pnpm docs:dev # 문서 사이트 개발 서버 실행
|
|
255
258
|
pnpm test # Vitest 실행 (Playwright 브라우저 모드)
|
|
256
259
|
pnpm lint # oxlint 검사 (--fix로 자동 수정)
|
|
257
260
|
pnpm format # oxfmt 포매팅
|
|
258
261
|
pnpm build # 타입 검사와 라이브러리 빌드
|
|
259
|
-
pnpm build
|
|
262
|
+
pnpm docs:build # 문서 사이트 빌드
|
|
260
263
|
```
|
|
261
264
|
|
|
262
265
|
커밋 메시지는 Conventional Commits(`feat:`, `fix:`, `docs:` 등)를 따릅니다. 커밋 타입과 내용이 체인지로그와 버전 산정에 그대로 반영됩니다.
|
|
@@ -265,10 +268,11 @@ pnpm build-storybook # 정적 Storybook 빌드
|
|
|
265
268
|
|
|
266
269
|
`npm pack --dry-run` 기준으로 패키지에는 다음 산출물이 포함됩니다.
|
|
267
270
|
|
|
268
|
-
- `dist/krds-vue.es.js`
|
|
271
|
+
- `dist/krds-vue.es.js` (+ 소스맵 `dist/krds-vue.es.js.map`)
|
|
269
272
|
- `dist/style.css`
|
|
270
|
-
- `dist/types/index.d.ts`
|
|
273
|
+
- `dist/types/index.d.ts`, `global.d.ts` (전역 컴포넌트 타입)
|
|
271
274
|
- `dist/img/component/icon/*.svg`
|
|
275
|
+
- `dist/fonts/*.woff2` (Pretendard GOV)
|
|
272
276
|
|
|
273
277
|
## 라이선스
|
|
274
278
|
|