Skip to content

Commit e70364a

Browse files
authored
docs: Update README.md
1 parent b61344a commit e70364a

File tree

1 file changed

+2
-156
lines changed

1 file changed

+2
-156
lines changed

README.md

Lines changed: 2 additions & 156 deletions
Original file line numberDiff line numberDiff line change
@@ -5,160 +5,6 @@
55
[![License][license-src]][license-href]
66
[![Nuxt][nuxt-src]][nuxt-href]
77

8-
管理画面向けのVue 3 / Nuxt 3対応UIコンポーネントライブラリです
8+
管理画面向けのNuxt UIコンポーネントライブラリです
99

10-
- [ Release Notes](/CHANGELOG.md)
11-
12-
## Features
13-
14-
- 🎨  管理画面向けに最適化されたUIコンポーネント
15-
- 🔧  Nuxt 3対応の自動インポート機能
16-
- 📱  レスポンシブデザイン対応
17-
- 🎯  TypeScript完全対応
18-
- 🌙  composablesによる状態管理サポート
19-
20-
## 含まれるコンポーネント
21-
22-
### ヘッダー系
23-
- `TopHeader` - トップヘッダー(ユーザー情報、ログアウト機能付き)
24-
- `SideHeader` - サイドナビゲーション(階層メニュー対応)
25-
26-
### ボタン系
27-
- `MainButton` - メインボタン(送信/キャンセル、ローディング状態対応)
28-
29-
### フォーム系
30-
- `InputField` - 入力フィールド(バリデーション対応)
31-
- `TextareaField` - テキストエリア
32-
33-
### パネル系
34-
- `TextItem` - テキスト表示パネル
35-
36-
### セクション系
37-
- `SectionTextWithLine` - ライン付きセクション見出し
38-
39-
## Quick Setup
40-
41-
1. モジュールをインストール:
42-
43-
```bash
44-
npm install @kspace-trk/admin-ui-components @iconify/vue
45-
```
46-
47-
2. `nuxt.config.ts`にモジュールを追加:
48-
49-
```typescript
50-
export default defineNuxtConfig({
51-
modules: [
52-
'@kspace-trk/admin-ui-components'
53-
]
54-
})
55-
```
56-
57-
## Usage
58-
59-
### 基本的な使用方法
60-
61-
コンポーネントは自動的にグローバル登録されるため、importなしで使用できます:
62-
63-
```vue
64-
<template>
65-
<div>
66-
<!-- トップヘッダー -->
67-
<TopHeader
68-
title="管理画面"
69-
:user="{ name: 'ユーザー名', email: '[email protected]' }"
70-
@logout="handleLogout"
71-
/>
72-
73-
<!-- サイドナビゲーション -->
74-
<SideHeader
75-
:menu-items="menuItems"
76-
@menu-click="handleMenuClick"
77-
/>
78-
79-
<!-- フォーム -->
80-
<div>
81-
<InputField
82-
v-model="form.name"
83-
label="名前"
84-
placeholder="名前を入力"
85-
:required="true"
86-
/>
87-
88-
<MainButton
89-
type="submit"
90-
text="送信"
91-
@click="handleSubmit"
92-
/>
93-
</div>
94-
</div>
95-
</template>
96-
97-
<script setup>
98-
const form = ref({
99-
name: ''
100-
})
101-
102-
const menuItems = [
103-
createSideHeaderMenuItem('ダッシュボード', '/dashboard', 'mdi:view-dashboard'),
104-
createSideHeaderMenuItem('ユーザー管理', '/users', 'mdi:account-group')
105-
]
106-
107-
const handleLogout = () => {
108-
// ログアウト処理
109-
}
110-
111-
const handleMenuClick = (menuItem) => {
112-
// メニュークリック処理
113-
}
114-
115-
const handleSubmit = () => {
116-
// 送信処理
117-
}
118-
</script>
119-
```
120-
121-
## Contribution
122-
123-
<details>
124-
<summary>Local development</summary>
125-
126-
```bash
127-
# Install dependencies
128-
npm install
129-
130-
# Generate type stubs
131-
npm run dev:prepare
132-
133-
# Develop with the playground
134-
npm run dev
135-
136-
# Build the playground
137-
npm run dev:build
138-
139-
# Run ESLint
140-
npm run lint
141-
142-
# Run Vitest
143-
npm run test
144-
npm run test:watch
145-
146-
# Release new version
147-
npm run release
148-
```
149-
150-
</details>
151-
152-
153-
<!-- Badges -->
154-
[npm-version-src]: https://img.shields.io/npm/v/@kspace-trk/admin-ui-components/latest.svg?style=flat&colorA=020420&colorB=00DC82
155-
[npm-version-href]: https://npmjs.com/package/@kspace-trk/admin-ui-components
156-
157-
[npm-downloads-src]: https://img.shields.io/npm/dm/@kspace-trk/admin-ui-components.svg?style=flat&colorA=020420&colorB=00DC82
158-
[npm-downloads-href]: https://npm.chart.dev/@kspace-trk/admin-ui-components
159-
160-
[license-src]: https://img.shields.io/npm/l/@kspace-trk/admin-ui-components.svg?style=flat&colorA=020420&colorB=00DC82
161-
[license-href]: https://npmjs.com/package/@kspace-trk/admin-ui-components
162-
163-
[nuxt-src]: https://img.shields.io/badge/Nuxt-020420?logo=nuxt.js
164-
[nuxt-href]: https://nuxt.com
10+
※開発中です

0 commit comments

Comments
 (0)