https://github.com/citrus-framework/vuetify-components
vuetify components
https://github.com/citrus-framework/vuetify-components
Last synced: 5 months ago
JSON representation
vuetify components
- Host: GitHub
- URL: https://github.com/citrus-framework/vuetify-components
- Owner: citrus-framework
- License: mit
- Created: 2025-12-31T05:12:54.000Z (6 months ago)
- Default Branch: v1.0.0.0
- Last Pushed: 2025-12-31T14:41:55.000Z (6 months ago)
- Last Synced: 2026-01-04T08:20:29.734Z (6 months ago)
- Language: Vue
- Size: 37.1 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# @citrus-framework/vuetify-components
Citrus Framework プロジェクト用の再利用可能な Vuetify コンポーネントライブラリ
## インストール
### 1. .npmrc の設定
プロジェクトのルートに `.npmrc` ファイルを作成（または追加）：
```
@citrus-framework:registry=https://npm.pkg.github.com
```
### 2. パッケージのインストール
```bash
npm install @citrus-framework/vuetify-components
```
## 使用方法
### コンポーネントのインポート
```vue
import { PageTitle, EditableTextInput } from '@citrus-framework/vuetify-components';
const title = ref('My Page');
```
### スタイルの読み込み
#### CSSを使用する場合
```typescript
// main.ts または plugins/vuetify.ts
import '@citrus-framework/vuetify-components/styles';
```
#### SCSSを使用する場合（カスタマイズ可能）
```scss
// styles/main.scss
@import '@citrus-framework/vuetify-components/scss';
```
## 利用可能なコンポーネント
### Commons
- `PageTitle` - ページタイトルコンポーネント
- `PageSubtitle` - ページサブタイトルコンポーネント
- `NumberCard` - 数値カードコンポーネント
### Helpers - Buttons
- `IconMenuButton` - アイコンメニューボタン
- `ProgressButton` - プログレスボタン
### Helpers - Editables
- `EditableTextInput` - 編集可能なテキスト入力
- `EditableColorInput` - 編集可能なカラー入力
- `EditableDateInput` - 編集可能な日付入力
- `EditableSelect` - 編集可能なセレクト
### Helpers - Selects
- `Select` - カスタマイズされたセレクト
### Helpers - Inputs
- `TextInput` - テキスト入力
- `DateInput` - 日付入力
### Helpers - Comboboxes
- `TimeCombobox` - 時刻コンボボックス
### Helpers - Pickers
- `DateToTimestampPicker` - 日付→タイムスタンプピッカー
### Helpers - Complexes
- `DateTimeField` - 日時フィールド
## 型定義
```typescript
import type { SelectItem } from '@citrus-framework/vuetify-components';
```
## 開発
### セットアップ
```bash
npm install
```
### ビルド
```bash
npm run build
```
### 型チェック
```bash
npm run type-check
```
## パッケージの公開
GitHub Releases でリリースを作成すると、自動的に GitHub Packages に公開されます。
または、手動で公開：
```bash
npm run build
npm publish
```
## ライセンス
MIT