|
5 | 5 | [![License][license-src]][license-href]
|
6 | 6 | [![Nuxt][nuxt-src]][nuxt-href]
|
7 | 7 |
|
8 |
| -管理画面向けのVue 3 / Nuxt 3対応UIコンポーネントライブラリです。 |
| 8 | +管理画面向けのNuxt UIコンポーネントライブラリです。 |
9 | 9 |
|
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