@krds.ui/vue 0.0.16 → 0.0.18
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/README.md +84 -35
- package/dist/krds-vue.es.js +1028 -987
- package/dist/krds-vue.es.js.map +1 -1
- package/dist/style.css +1 -1
- package/dist/types/index.d.ts +2828 -131
- package/package.json +11 -17
package/README.md
CHANGED
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
> KRDS(Korea Digital Service Design System) 가이드를 Vue 3 + TypeScript 환경에서 사용할 수 있도록 구현한 컴포넌트 라이브러리
|
|
4
4
|
|
|
5
5
|
[](https://www.npmjs.com/package/@krds.ui/vue)
|
|
6
|
+
[](https://github.com/Initializer-org/krds-vue/actions/workflows/ci.yml)
|
|
6
7
|
[](https://opensource.org/licenses/MIT)
|
|
7
8
|
|
|
8
9
|
KRDS Vue는 공공 웹서비스에서 반복되는 폼, 내비게이션, 레이아웃, 피드백 UI를 일관된 Vue 컴포넌트로 제공하는 라이브러리입니다. KRDS 디자인 토큰과 컴포넌트 스타일을 기반으로 하며, Vue 3 애플리케이션에서 전역 플러그인 또는 개별 컴포넌트 import 방식으로 사용할 수 있습니다.
|
|
@@ -20,7 +21,7 @@ KRDS Vue는 공공 웹서비스에서 반복되는 폼, 내비게이션, 레이
|
|
|
20
21
|
|
|
21
22
|
- **Vue 3 + TypeScript**: Vue 3.5 이상과 타입 정의를 지원합니다.
|
|
22
23
|
- **ESM-only 배포**: modern bundler 환경에 맞춘 ESM 산출물만 제공합니다.
|
|
23
|
-
-
|
|
24
|
+
- **KRDS 공식 컴포넌트 대응**: [공식 컴포넌트 55종](https://www.krds.go.kr/html/site/component/component_summary.html) 중 43종을 제공하며, 폼 레이아웃·아이콘 등 부가 컴포넌트를 포함해 총 50개 컴포넌트를 제공합니다.
|
|
24
25
|
- **플러그인/개별 import 지원**: 전체 전역 등록 또는 필요한 컴포넌트만 import할 수 있습니다.
|
|
25
26
|
- **KRDS 스타일/토큰 포함**: 패키지 스타일 엔트리에서 토큰, 폰트, 컴포넌트 CSS를 함께 제공합니다.
|
|
26
27
|
- **접근성 고려**: 키보드 조작, ARIA 속성, 포커스 스타일, 고대비 모드를 고려해 구현합니다.
|
|
@@ -74,23 +75,19 @@ app.use(KrdsVue, {
|
|
|
74
75
|
|
|
75
76
|
```vue
|
|
76
77
|
<script setup lang="ts">
|
|
77
|
-
import { ref } from 'vue'
|
|
78
|
-
import { KrdsButton, KrdsInput } from '@krds.ui/vue'
|
|
78
|
+
import { ref } from 'vue'
|
|
79
|
+
import { KrdsButton, KrdsFormGroup, KrdsFormLabel, KrdsInput } from '@krds.ui/vue'
|
|
79
80
|
|
|
80
|
-
const name = ref('')
|
|
81
|
+
const name = ref('')
|
|
81
82
|
</script>
|
|
82
83
|
|
|
83
84
|
<template>
|
|
84
|
-
<
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
<KrdsButton variant="primary" size="medium">
|
|
92
|
-
확인
|
|
93
|
-
</KrdsButton>
|
|
85
|
+
<KrdsFormGroup>
|
|
86
|
+
<KrdsFormLabel for="name">이름</KrdsFormLabel>
|
|
87
|
+
<KrdsInput id="name" v-model="name" placeholder="이름을 입력하세요" required />
|
|
88
|
+
</KrdsFormGroup>
|
|
89
|
+
|
|
90
|
+
<KrdsButton variant="primary" size="medium">확인</KrdsButton>
|
|
94
91
|
</template>
|
|
95
92
|
```
|
|
96
93
|
|
|
@@ -110,7 +107,7 @@ const buttonProps: KrdsButtonProps = {
|
|
|
110
107
|
}
|
|
111
108
|
|
|
112
109
|
const inputProps: KrdsInputProps = {
|
|
113
|
-
|
|
110
|
+
placeholder: '이름을 입력하세요',
|
|
114
111
|
modelValue: '',
|
|
115
112
|
size
|
|
116
113
|
}
|
|
@@ -140,39 +137,91 @@ document.documentElement.setAttribute('data-krds-mode', 'high-contrast')
|
|
|
140
137
|
|
|
141
138
|
## 컴포넌트 범위
|
|
142
139
|
|
|
143
|
-
|
|
140
|
+
[KRDS 공식 컴포넌트 목록](https://www.krds.go.kr/html/site/component/component_summary.html) 55종 기준 대응 현황입니다. 각 컴포넌트의 props/events는 [Storybook 문서](https://krds.initializer.org/)에서 확인하세요.
|
|
141
|
+
|
|
142
|
+
| 분류 | 공식 컴포넌트 → 제공 컴포넌트 |
|
|
143
|
+
| ---------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
144
|
+
| 아이덴티티 | 공식 배너 `KrdsMasthead` · 운영기관 식별자 `KrdsIdentifier` · 헤더 `KrdsHeader` · 푸터 `KrdsFooter` |
|
|
145
|
+
| 탐색 | 건너뛰기 링크 `KrdsSkipLink` · 메인 메뉴 `KrdsMainMenu` · 브레드크럼 `KrdsBreadcrumb` · 사이드 메뉴 `KrdsSideNavigation` · 콘텐츠 내 탐색 `KrdsInPageNavigation` · 페이지네이션 `KrdsPagination` |
|
|
146
|
+
| 레이아웃 및 표현 | 구조화 목록 `KrdsStructuredList` · 긴급 공지 `KrdsCriticalAlerts` · 디스클로저 `KrdsDisclosure` · 모달 `KrdsModal` · 배지 `KrdsBadge` · 아코디언 `KrdsAccordionGroup`/`KrdsAccordionItem` · 캐러셀 `KrdsCarousel` · 탭 `KrdsTabs` · 표 `KrdsTable` · 텍스트 목록 `KrdsTextList` · 달력(`KrdsDateInput`에 내장) |
|
|
147
|
+
| 액션 | 링크 `KrdsLink` · 버튼 `KrdsButton` |
|
|
148
|
+
| 선택 | 라디오 버튼 `KrdsRadio` · 체크박스 `KrdsCheckbox` · 셀렉트 `KrdsSelect` · 태그 `KrdsTag` · 토글 스위치 `KrdsToggleSwitch` |
|
|
149
|
+
| 피드백 | 단계 표시기 `KrdsStepIndicator` · 스피너 `KrdsSpinner` |
|
|
150
|
+
| 도움 | 도움 패널·따라하기 패널 `KrdsPanel` · 맥락적 도움말 `KrdsContextualHelp` · 코치마크 `KrdsCoachMark` · 툴팁 `KrdsTooltip` · 음성지원 `KrdsTts` |
|
|
151
|
+
| 입력 | 텍스트 입력 필드 `KrdsInput` · 텍스트 영역 `KrdsTextarea` · 날짜 입력 필드 `KrdsDateInput` · 파일 업로드 `KrdsFileUpload` |
|
|
152
|
+
| 설정 | 언어 변경 `KrdsLanguageSwitcher` · 화면 크기 조정 `KrdsResize` |
|
|
153
|
+
| 콘텐츠 | 숨긴 콘텐츠 `v-sr-only` 디렉티브 |
|
|
154
|
+
|
|
155
|
+
공식 목록 외 부가 컴포넌트: `KrdsLayout`, `KrdsIcon`, `KrdsButtonGroup`, `KrdsTagGroup`, `KrdsCheckArea`, `KrdsStep`, `KrdsFormGroup`, `KrdsFormLabel`, `KrdsFormHint`
|
|
156
|
+
|
|
157
|
+
### 미제공 항목
|
|
158
|
+
|
|
159
|
+
아래 항목은 KRDS 원본 저장소가 구현(HTML/SCSS)을 제공하지 않아 포팅 대상이 아닙니다.
|
|
160
|
+
|
|
161
|
+
- **플로팅 버튼(FAB), 이미지**: 이미지는 Storybook에 안내 문서만 제공합니다.
|
|
162
|
+
- **모바일 계열**(범위슬라이드, 뒤로가기 버튼, 바텀시트, 수량 토글, 토스트, 스낵바, 탭바, 스플래시 스크린): 모바일 앱 전용 항목입니다. 탭바·스플래시 스크린은 Storybook에 안내 문서만 제공합니다.
|
|
163
|
+
- **파비콘, 접근 가능한 미디어**: 컴포넌트가 아닌 가이드 항목입니다.
|
|
164
|
+
|
|
165
|
+
### 원본 동기화 기준
|
|
166
|
+
|
|
167
|
+
- [KRDS 원본 저장소](https://github.com/KRDS-uiux/krds-uiux) v1.1.0 (2025-06-03 커밋 `d6bb184`) 기준으로 포팅되었습니다.
|
|
168
|
+
- 원본 저장소의 릴리스를 추적해 동기화하며, 대응 버전은 이 섹션에 기록합니다.
|
|
169
|
+
- 원본 반영으로 마크업·클래스 구조가 바뀌어 호환성이 깨지는 경우 메이저 버전으로만 배포하고, CHANGELOG에 마이그레이션 노트를 제공합니다.
|
|
170
|
+
|
|
171
|
+
## 접근성
|
|
172
|
+
|
|
173
|
+
- 컴포넌트는 원본 KRDS 마크업 구조와 ARIA 속성, 키보드 인터랙션을 따라 구현합니다.
|
|
174
|
+
- 모든 스토리에 대해 axe-core 기반 자동 접근성 검사(`@storybook/addon-a11y`)를 실행하며, 위반이 있으면 CI가 실패합니다(`test: 'error'`).
|
|
175
|
+
- 원본 KRDS 마크업에서 비롯된 위반(탭의 `li[role=tab] > button` 중첩, 정렬 셀렉트의 `title` 전용 레이블, 페이지네이션 비활성 버튼 대비)은 원본을 따르기 위해 해당 스토리에서 요소 단위로만 검사를 제외합니다.
|
|
176
|
+
- 고대비 모드(`data-krds-mode="high-contrast"`)를 지원합니다.
|
|
177
|
+
|
|
178
|
+
라이브러리 차원의 자동 검사는 KWCAG/WCAG 적합성 평가를 대체하지 않습니다. 서비스 전체의 접근성 준수는 사용처에서 별도 검증이 필요합니다.
|
|
144
179
|
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
180
|
+
## 브라우저 지원
|
|
181
|
+
|
|
182
|
+
Vite 라이브러리 모드 기본 타겟(Baseline Widely Available)으로 빌드합니다.
|
|
183
|
+
|
|
184
|
+
| 브라우저 | 지원 버전 |
|
|
185
|
+
| ----------------- | --------- |
|
|
186
|
+
| Chrome, Edge | 111 이상 |
|
|
187
|
+
| Firefox | 114 이상 |
|
|
188
|
+
| Safari (iOS 포함) | 16.4 이상 |
|
|
189
|
+
|
|
190
|
+
- 산출물에 폴리필은 포함하지 않습니다. 더 낮은 버전을 지원해야 한다면 애플리케이션 빌드에서 트랜스파일과 폴리필을 구성해야 합니다.
|
|
191
|
+
- Internet Explorer는 지원하지 않습니다 (ESM·CSS custom properties 기반).
|
|
151
192
|
|
|
152
193
|
## 요구사항
|
|
153
194
|
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
-
|
|
195
|
+
사용 환경:
|
|
196
|
+
|
|
197
|
+
- Vue `^3.5.0`
|
|
198
|
+
- ESM을 지원하는 번들러 또는 런타임 (Node.js `>=20`)
|
|
199
|
+
|
|
200
|
+
개발 환경(저장소 기여):
|
|
157
201
|
|
|
158
|
-
|
|
202
|
+
- Node.js `>=24.0.0`, pnpm `>=11.0.0`
|
|
203
|
+
|
|
204
|
+
## 버전 정책과 릴리스
|
|
205
|
+
|
|
206
|
+
시맨틱 버저닝을 따릅니다. [Conventional Commits](https://www.conventionalcommits.org/ko/)를 기반으로 [release-please](https://github.com/googleapis/release-please)가 릴리스 PR을 자동 생성하며, 릴리스 PR이 머지되면 GitHub Release 생성과 npm 배포가 자동으로 진행됩니다. 변경 이력은 [CHANGELOG](./CHANGELOG.md)에서 확인하세요.
|
|
207
|
+
|
|
208
|
+
## 기여하기
|
|
209
|
+
|
|
210
|
+
버그 리포트와 PR을 환영합니다. 큰 변경은 [이슈](https://github.com/Initializer-org/krds-vue/issues)로 먼저 논의해 주세요.
|
|
159
211
|
|
|
160
212
|
```bash
|
|
161
213
|
git clone https://github.com/Initializer-org/krds-vue.git
|
|
162
214
|
cd krds-vue
|
|
163
215
|
|
|
164
216
|
pnpm install
|
|
165
|
-
pnpm storybook
|
|
166
|
-
pnpm test
|
|
167
|
-
pnpm
|
|
217
|
+
pnpm storybook # Storybook 개발 서버 실행
|
|
218
|
+
pnpm test # Vitest 실행 (Playwright 브라우저 모드)
|
|
219
|
+
pnpm lint # ESLint 검사 및 자동 수정
|
|
220
|
+
pnpm build # 타입 검사와 라이브러리 빌드
|
|
221
|
+
pnpm build-storybook # 정적 Storybook 빌드
|
|
168
222
|
```
|
|
169
223
|
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
- `pnpm storybook`: Storybook 개발 서버 실행
|
|
173
|
-
- `pnpm test`: Vitest 실행
|
|
174
|
-
- `pnpm build`: 타입 검사와 라이브러리 빌드
|
|
175
|
-
- `pnpm build-storybook`: 정적 Storybook 빌드
|
|
224
|
+
커밋 메시지는 Conventional Commits(`feat:`, `fix:`, `docs:` 등)를 따릅니다. 커밋 타입과 내용이 체인지로그와 버전 산정에 그대로 반영됩니다.
|
|
176
225
|
|
|
177
226
|
## 배포 산출물
|
|
178
227
|
|