@krds.ui/vue 0.0.17 → 0.0.19
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 +41 -2
- package/dist/krds-vue.es.js +585 -588
- package/dist/krds-vue.es.js.map +1 -1
- package/dist/types/index.d.ts +173 -17
- package/global.d.ts +22 -0
- package/package.json +20 -22
package/README.md
CHANGED
|
@@ -69,6 +69,16 @@ app.use(KrdsVue, {
|
|
|
69
69
|
})
|
|
70
70
|
```
|
|
71
71
|
|
|
72
|
+
전역 등록한 컴포넌트의 템플릿 타입 검사·자동완성(Volar/vue-tsc)을 쓰려면 `tsconfig.json`에 전역 타입을 추가합니다. 전체 컴포넌트와 `v-sr-only`, `$krds`가 전역으로 선언되므로 일부만 등록했다면 등록하지 않은 컴포넌트 사용에 주의하세요.
|
|
73
|
+
|
|
74
|
+
```json
|
|
75
|
+
{
|
|
76
|
+
"compilerOptions": {
|
|
77
|
+
"types": ["@krds.ui/vue/global"]
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
```
|
|
81
|
+
|
|
72
82
|
### 3. 개별 컴포넌트 import
|
|
73
83
|
|
|
74
84
|
전역 등록이 필요 없다면 필요한 컴포넌트만 가져옵니다.
|
|
@@ -91,6 +101,33 @@ app.use(KrdsVue, {
|
|
|
91
101
|
</template>
|
|
92
102
|
```
|
|
93
103
|
|
|
104
|
+
### 4. Nuxt
|
|
105
|
+
|
|
106
|
+
서버 렌더링을 지원합니다. 스타일은 `nuxt.config.ts`에 추가하고, 플러그인에서 등록합니다.
|
|
107
|
+
|
|
108
|
+
```ts
|
|
109
|
+
// nuxt.config.ts
|
|
110
|
+
export default defineNuxtConfig({
|
|
111
|
+
css: ['@krds.ui/vue/style']
|
|
112
|
+
})
|
|
113
|
+
```
|
|
114
|
+
|
|
115
|
+
```ts
|
|
116
|
+
// plugins/krds.ts (Nuxt 4 기본 구조에서는 app/plugins/krds.ts)
|
|
117
|
+
import KrdsVue from '@krds.ui/vue'
|
|
118
|
+
|
|
119
|
+
export default defineNuxtPlugin(nuxtApp => {
|
|
120
|
+
nuxtApp.vueApp.use(KrdsVue)
|
|
121
|
+
})
|
|
122
|
+
```
|
|
123
|
+
|
|
124
|
+
Nuxt는 tsconfig를 자동 생성하므로, 전역 타입은 프로젝트의 `.d.ts` 파일에 참조를 추가합니다.
|
|
125
|
+
|
|
126
|
+
```ts
|
|
127
|
+
// types/krds.d.ts
|
|
128
|
+
/// <reference types="@krds.ui/vue/global" />
|
|
129
|
+
```
|
|
130
|
+
|
|
94
131
|
## TypeScript
|
|
95
132
|
|
|
96
133
|
컴포넌트 props와 공통 타입을 패키지 루트에서 가져올 수 있습니다.
|
|
@@ -171,7 +208,8 @@ document.documentElement.setAttribute('data-krds-mode', 'high-contrast')
|
|
|
171
208
|
## 접근성
|
|
172
209
|
|
|
173
210
|
- 컴포넌트는 원본 KRDS 마크업 구조와 ARIA 속성, 키보드 인터랙션을 따라 구현합니다.
|
|
174
|
-
- 모든 스토리에 대해 axe-core 기반 자동 접근성 검사(`@storybook/addon-a11y`)를
|
|
211
|
+
- 모든 스토리에 대해 axe-core 기반 자동 접근성 검사(`@storybook/addon-a11y`)를 실행하며, 위반이 있으면 CI가 실패합니다(`test: 'error'`).
|
|
212
|
+
- 원본 KRDS 마크업에서 비롯된 위반(탭의 `li[role=tab] > button` 중첩, 정렬 셀렉트의 `title` 전용 레이블, 페이지네이션 비활성 버튼 대비)은 원본을 따르기 위해 해당 스토리에서 요소 단위로만 검사를 제외합니다.
|
|
175
213
|
- 고대비 모드(`data-krds-mode="high-contrast"`)를 지원합니다.
|
|
176
214
|
|
|
177
215
|
라이브러리 차원의 자동 검사는 KWCAG/WCAG 적합성 평가를 대체하지 않습니다. 서비스 전체의 접근성 준수는 사용처에서 별도 검증이 필요합니다.
|
|
@@ -215,7 +253,8 @@ cd krds-vue
|
|
|
215
253
|
pnpm install
|
|
216
254
|
pnpm storybook # Storybook 개발 서버 실행
|
|
217
255
|
pnpm test # Vitest 실행 (Playwright 브라우저 모드)
|
|
218
|
-
pnpm lint #
|
|
256
|
+
pnpm lint # oxlint 검사 (--fix로 자동 수정)
|
|
257
|
+
pnpm format # oxfmt 포매팅
|
|
219
258
|
pnpm build # 타입 검사와 라이브러리 빌드
|
|
220
259
|
pnpm build-storybook # 정적 Storybook 빌드
|
|
221
260
|
```
|