@krds.ui/vue 0.0.20 → 0.0.22
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 +10 -3
- package/dist/krds-vue.es.js +1528 -1335
- package/dist/krds-vue.es.js.map +1 -1
- package/dist/style.css +1 -1
- package/dist/types/index.d.ts +491 -85
- package/global.d.ts +54 -2
- package/package.json +12 -5
- package/style.d.ts +5 -0
package/LICENSE
CHANGED
package/README.md
CHANGED
|
@@ -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 속성, 포커스 스타일, 고대비 모드를 고려해 구현합니다.
|
|
@@ -128,6 +128,10 @@ Nuxt는 tsconfig를 자동 생성하므로, 전역 타입은 프로젝트의 `.d
|
|
|
128
128
|
/// <reference types="@krds.ui/vue/global" />
|
|
129
129
|
```
|
|
130
130
|
|
|
131
|
+
### 5. 예제 프로젝트
|
|
132
|
+
|
|
133
|
+
위 설정을 담은 Vite + Vue 3 + TypeScript 예제가 [`examples/vite`](./examples/vite)에 있습니다. [StackBlitz에서 바로 열어](https://stackblitz.com/github/Initializer-org/krds-vue/tree/main/examples/vite) 볼 수도 있습니다.
|
|
134
|
+
|
|
131
135
|
## TypeScript
|
|
132
136
|
|
|
133
137
|
컴포넌트 props와 공통 타입을 패키지 루트에서 가져올 수 있습니다.
|
|
@@ -181,7 +185,7 @@ document.documentElement.setAttribute('data-krds-mode', 'high-contrast')
|
|
|
181
185
|
| 아이덴티티 | 공식 배너 `KrdsMasthead` · 운영기관 식별자 `KrdsIdentifier` · 헤더 `KrdsHeader` · 푸터 `KrdsFooter` |
|
|
182
186
|
| 탐색 | 건너뛰기 링크 `KrdsSkipLink` · 메인 메뉴 `KrdsMainMenu` · 브레드크럼 `KrdsBreadcrumb` · 사이드 메뉴 `KrdsSideNavigation` · 콘텐츠 내 탐색 `KrdsInPageNavigation` · 페이지네이션 `KrdsPagination` |
|
|
183
187
|
| 레이아웃 및 표현 | 구조화 목록 `KrdsStructuredList` · 긴급 공지 `KrdsCriticalAlerts` · 디스클로저 `KrdsDisclosure` · 모달 `KrdsModal` · 배지 `KrdsBadge` · 아코디언 `KrdsAccordionGroup`/`KrdsAccordionItem` · 캐러셀 `KrdsCarousel` · 탭 `KrdsTabs` · 표 `KrdsTable` · 텍스트 목록 `KrdsTextList` · 달력(`KrdsDateInput`에 내장) |
|
|
184
|
-
| 액션 | 링크 `KrdsLink` · 버튼 `KrdsButton`
|
|
188
|
+
| 액션 | 링크 `KrdsLink` · 버튼 `KrdsButton` · 플로팅 버튼 `KrdsFloatingButton` |
|
|
185
189
|
| 선택 | 라디오 버튼 `KrdsRadio` · 체크박스 `KrdsCheckbox` · 셀렉트 `KrdsSelect` · 태그 `KrdsTag` · 토글 스위치 `KrdsToggleSwitch` |
|
|
186
190
|
| 피드백 | 단계 표시기 `KrdsStepIndicator` · 스피너 `KrdsSpinner` |
|
|
187
191
|
| 도움 | 도움 패널·따라하기 패널 `KrdsPanel` · 맥락적 도움말 `KrdsContextualHelp` · 코치마크 `KrdsCoachMark` · 툴팁 `KrdsTooltip` · 음성지원 `KrdsTts` |
|
|
@@ -195,7 +199,10 @@ document.documentElement.setAttribute('data-krds-mode', 'high-contrast')
|
|
|
195
199
|
|
|
196
200
|
아래 항목은 KRDS 원본 저장소가 구현(HTML/SCSS)을 제공하지 않아 포팅 대상이 아닙니다.
|
|
197
201
|
|
|
198
|
-
-
|
|
202
|
+
- **이미지**: 문서 사이트에 안내 문서만 제공합니다.
|
|
203
|
+
|
|
204
|
+
플로팅 버튼(FAB)도 원본 구현이 없지만, KRDS 가이드의 구조(단일형·확장형)와 토큰으로 직접 만들어 제공합니다.
|
|
205
|
+
|
|
199
206
|
- **모바일 계열**(범위슬라이드, 뒤로가기 버튼, 바텀시트, 수량 토글, 토스트, 스낵바, 탭바, 스플래시 스크린): 모바일 앱 전용 항목입니다. 탭바·스플래시 스크린은 문서 사이트에 안내 문서만 제공합니다.
|
|
200
207
|
- **파비콘, 접근 가능한 미디어**: 컴포넌트가 아닌 가이드 항목입니다.
|
|
201
208
|
|