@mogura/moguchart-vue 1.1.0

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.
Files changed (8) hide show
  1. package/LICENSE +21 -0
  2. package/README.ja.md +205 -0
  3. package/README.md +205 -0
  4. package/dist/GanttChart.d.ts +214 -0
  5. package/dist/index.d.ts +9 -0
  6. package/dist/moguchart-vue.mjs +127 -0
  7. package/dist/moguchart-vue.umd.js +1 -0
  8. package/package.json +72 -0
package/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2024-present Murakami Hiroyuki
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/README.ja.md ADDED
@@ -0,0 +1,205 @@
1
+ # @mogura/moguchart-vue
2
+
3
+ 軽量・高速なWeb Components製ガントチャート **[Moguchart](https://github.com/hiro-murakami/moguchart-core)**（`@mogura/moguchart-core`）の **公式 Vue 3 ラッパーコンポーネント** です。
4
+
5
+ Vue 3 のリアクティビティシステム（Composition API `<script setup>` および Options API）に完全準拠し、型安全な Props、テンプレート Ref、Vue カスタムイベント（`@task-update`, `@task-click` 等）を直感的に扱えます。
6
+
7
+ [English Documentation](./README.md)
8
+
9
+ ---
10
+
11
+ ## 主な特徴
12
+
13
+ - ⚡ **Vue 3 完全対応**: Composition API（`<script setup>`）および Options API の双方でスムーズに動作
14
+ - 🔒 **充実した TypeScript 型定義**: Props、Emits、コンポーネントインスタンスの型推論に対応
15
+ - 🔄 **リアクティブなプロパティ同期**: `rows`, `option`, `theme` などの変更を基底の Web Component に自動反映
16
+ - 🎯 **直感的なイベントバインディング**: Vue 標準のイベントハンドリング（`@task-update="onUpdate"` など）
17
+ - 🛠️ **命令的メソッドの呼び出し**: Template Ref 経由で `exportImage`, `use`, `zoomTo`, `resetScroll` などのメソッドにアクセス可能
18
+ - 🔌 **プラグイン連携**: `@mogura/moguchart-plugin-export` などの公式プラグインをシームレスに利用可能
19
+
20
+ ---
21
+
22
+ ## インストール
23
+
24
+ ```bash
25
+ # npm
26
+ npm install @mogura/moguchart-vue @mogura/moguchart-core vue
27
+
28
+ # pnpm
29
+ pnpm add @mogura/moguchart-vue @mogura/moguchart-core vue
30
+
31
+ # yarn
32
+ yarn add @mogura/moguchart-vue @mogura/moguchart-core vue
33
+ ```
34
+
35
+ ---
36
+
37
+ ## クイックスタート
38
+
39
+ ### `<script setup>` での基本的な使い方
40
+
41
+ ```vue
42
+ <script setup lang="ts">
43
+ import { ref } from 'vue'
44
+ import {
45
+ GanttChart,
46
+ type GanttRow,
47
+ type GanttChartOption,
48
+ type TaskUpdateEventDetail,
49
+ type TaskClickEventDetail,
50
+ } from '@mogura/moguchart-vue'
51
+
52
+ const rows = ref<GanttRow[]>([
53
+ {
54
+ id: 'row-1',
55
+ name: '要件定義フェーズ',
56
+ tasks: [
57
+ {
58
+ id: 'task-1',
59
+ name: 'ヒアリング',
60
+ start: new Date('2026-04-01'),
61
+ end: new Date('2026-04-10'),
62
+ progress: 100,
63
+ },
64
+ {
65
+ id: 'task-2',
66
+ name: '基本設計',
67
+ start: new Date('2026-04-11'),
68
+ end: new Date('2026-04-20'),
69
+ progress: 40,
70
+ },
71
+ ],
72
+ },
73
+ ])
74
+
75
+ const option: GanttChartOption = {
76
+ calendar: {
77
+ start: new Date('2026-04-01'),
78
+ end: new Date('2026-04-30'),
79
+ pxPerDay: 40,
80
+ },
81
+ }
82
+
83
+ const handleTaskUpdate = (detail: TaskUpdateEventDetail) => {
84
+ console.log('タスクが更新されました:', detail)
85
+ }
86
+
87
+ const handleTaskClick = (detail: TaskClickEventDetail) => {
88
+ console.log('タスクがクリックされました:', detail.task)
89
+ }
90
+ </script>
91
+
92
+ <template>
93
+ <div style="width: 100%; height: 500px;">
94
+ <GanttChart
95
+ :rows="rows"
96
+ :option="option"
97
+ theme="light"
98
+ @task-update="handleTaskUpdate"
99
+ @task-click="handleTaskClick"
100
+ style="width: 100%; height: 100%;"
101
+ />
102
+ </div>
103
+ </template>
104
+ ```
105
+
106
+ ---
107
+
108
+ ## グローバル登録（Vue プラグイン）
109
+
110
+ アプリケーション全体で `<GanttChart />` を使いたい場合は、Vue プラグインとして登録できます：
111
+
112
+ ```ts
113
+ import { createApp } from 'vue'
114
+ import App from './App.vue'
115
+ import MoguchartVue from '@mogura/moguchart-vue'
116
+
117
+ const app = createApp(App)
118
+ app.use(MoguchartVue)
119
+ app.mount('#app')
120
+ ```
121
+
122
+ 登録後は各 Vue コンポーネントで import せずに `<GanttChart />` を使用できます。
123
+
124
+ ---
125
+
126
+ ## プラグインの利用（エクスポート機能など）
127
+
128
+ `option.plugins` に渡す宣言的な登録と、`ref` を介した命令的呼び出しに対応しています：
129
+
130
+ ```vue
131
+ <script setup lang="ts">
132
+ import { ref } from 'vue'
133
+ import {
134
+ GanttChart,
135
+ type GanttChartInstance,
136
+ type GanttChartOption,
137
+ } from '@mogura/moguchart-vue'
138
+ import { ExportPlugin } from '@mogura/moguchart-plugin-export'
139
+
140
+ const chartRef = ref<GanttChartInstance | null>(null)
141
+
142
+ const option: GanttChartOption = {
143
+ calendar: {
144
+ start: new Date('2026-04-01'),
145
+ end: new Date('2026-04-30'),
146
+ pxPerDay: 40,
147
+ },
148
+ plugins: [new ExportPlugin()],
149
+ }
150
+
151
+ const handleExportPng = async () => {
152
+ await chartRef.value?.exportImage({ format: 'png', scale: 2 })
153
+ }
154
+
155
+ const handleExportPdf = async () => {
156
+ await chartRef.value?.exportImage({ format: 'pdf' })
157
+ }
158
+ </script>
159
+
160
+ <template>
161
+ <div>
162
+ <button @click="handleExportPng">PNG画像エクスポート</button>
163
+ <button @click="handleExportPdf">PDFエクスポート</button>
164
+
165
+ <GanttChart
166
+ ref="chartRef"
167
+ :rows="[]"
168
+ :option="option"
169
+ style="width: 100%; height: 600px;"
170
+ />
171
+ </div>
172
+ </template>
173
+ ```
174
+
175
+ ---
176
+
177
+ ## サポートされているイベント
178
+
179
+ `@mogura/moguchart-core` が発行するすべてのカスタムイベントを Vue イベントとして購読できます：
180
+
181
+ | Vue イベント | 説明 | 引数型 |
182
+ |---|---|---|
183
+ | `@task-update` | タスクの期間移動・リサイズ完了時 | `TaskUpdateEventDetail` |
184
+ | `@task-click` | タスクバークリック時 | `TaskClickEventDetail` |
185
+ | `@task-dblclick` | タスクバーダブルクリック時 | `TaskClickEventDetail` |
186
+ | `@task-contextmenu` | タスクバー右クリック時 | `TaskContextMenuEventDetail` |
187
+ | `@task-drop` | タスクドロップ時 | `TaskDropEventDetail` |
188
+ | `@task-delete` | タスク削除キー（Delete/Backspace）押下時 | `TaskDeleteEventDetail` |
189
+ | `@task-progress-change` | タスク進捗率ハンドル操作完了時 | `TaskProgressChangeEventDetail` |
190
+ | `@bar-hover` | タスクバーホバー時 | `BarHoverEventDetail` |
191
+ | `@row-reordered` | 行のドラッグ＆ドロップ並び替え完了時 | `RowReorderEventDetail` |
192
+ | `@row-header-resize` | 行ヘッダー幅のリサイズ完了時 | `RowHeaderResizeEventDetail` |
193
+ | `@row-selection-change` | 行の選択状態変更時 | `RowSelectionChangeEventDetail` |
194
+ | `@bar-selection-change` | タスクの選択状態変更時 | `BarSelectionChangeEventDetail` |
195
+ | `@row-toggle-collapse` | ツリー行の展開・折りたたみ時 | `RowToggleCollapseEventDetail` |
196
+ | `@dependency-create` | 依存関係コネクタの接続完了時 | `DependencyCreateEventDetail` |
197
+ | `@dependency-click` | 依存関係線のクリック時 | `DependencyClickEventDetail` |
198
+ | `@zoom-change` | カレンダースケール変更時 | `ZoomChangeEventDetail` |
199
+ | `@chart-contextmenu` | チャート背景の右クリック時 | `ChartContextMenuEventDetail` |
200
+
201
+ ---
202
+
203
+ ## ライセンス
204
+
205
+ MIT © [Murakami Hiroyuki](https://github.com/hiro-murakami)
package/README.md ADDED
@@ -0,0 +1,205 @@
1
+ # @mogura/moguchart-vue
2
+
3
+ The official Vue 3 wrapper component for **[Moguchart](https://github.com/hiro-murakami/moguchart-core)** (`@mogura/moguchart-core`).
4
+
5
+ Easily integrate a high-performance, responsive Gantt chart Web Component into your Vue 3 applications with full TypeScript support, reactive props, template refs, and Vue custom event bindings.
6
+
7
+ [日本語版ドキュメントはこちら (Japanese documentation)](./README.ja.md)
8
+
9
+ ---
10
+
11
+ ## Features
12
+
13
+ - ⚡ **Full Vue 3 Integration**: Works seamlessly with Vue 3 Composition API (`<script setup>`) and Options API.
14
+ - 🔒 **Type-Safe**: Full TypeScript definitions for props, emits, and instance methods.
15
+ - 🔄 **Reactive Sync**: Props (`rows`, `option`, `theme`, etc.) are automatically synced to the underlying Web Component.
16
+ - 🎯 **Vue Event Bindings**: Standard Vue event listening (`@task-update="onUpdate"`, `@task-click="onClick"`, etc.).
17
+ - 🛠️ **Imperative Methods**: Access Web Component methods (`exportImage`, `use`, `zoomTo`, `resetScroll`, etc.) via template refs.
18
+ - 🔌 **Plugin Support**: Re-exports all `@mogura/moguchart-core` types and integrates smoothly with `@mogura/moguchart-plugin-export`.
19
+
20
+ ---
21
+
22
+ ## Installation
23
+
24
+ ```bash
25
+ # npm
26
+ npm install @mogura/moguchart-vue @mogura/moguchart-core vue
27
+
28
+ # pnpm
29
+ pnpm add @mogura/moguchart-vue @mogura/moguchart-core vue
30
+
31
+ # yarn
32
+ yarn add @mogura/moguchart-vue @mogura/moguchart-core vue
33
+ ```
34
+
35
+ ---
36
+
37
+ ## Quick Start
38
+
39
+ ### Basic Usage with `<script setup>`
40
+
41
+ ```vue
42
+ <script setup lang="ts">
43
+ import { ref } from 'vue'
44
+ import {
45
+ GanttChart,
46
+ type GanttRow,
47
+ type GanttChartOption,
48
+ type TaskUpdateEventDetail,
49
+ type TaskClickEventDetail,
50
+ } from '@mogura/moguchart-vue'
51
+
52
+ const rows = ref<GanttRow[]>([
53
+ {
54
+ id: 'row-1',
55
+ name: 'Planning Phase',
56
+ tasks: [
57
+ {
58
+ id: 'task-1',
59
+ name: 'Requirement Definition',
60
+ start: new Date('2026-04-01'),
61
+ end: new Date('2026-04-10'),
62
+ progress: 100,
63
+ },
64
+ {
65
+ id: 'task-2',
66
+ name: 'Architecture Design',
67
+ start: new Date('2026-04-11'),
68
+ end: new Date('2026-04-20'),
69
+ progress: 40,
70
+ },
71
+ ],
72
+ },
73
+ ])
74
+
75
+ const option: GanttChartOption = {
76
+ calendar: {
77
+ start: new Date('2026-04-01'),
78
+ end: new Date('2026-04-30'),
79
+ pxPerDay: 40,
80
+ },
81
+ }
82
+
83
+ const handleTaskUpdate = (detail: TaskUpdateEventDetail) => {
84
+ console.log('Task updated:', detail)
85
+ }
86
+
87
+ const handleTaskClick = (detail: TaskClickEventDetail) => {
88
+ console.log('Task clicked:', detail.task)
89
+ }
90
+ </script>
91
+
92
+ <template>
93
+ <div style="width: 100%; height: 500px;">
94
+ <GanttChart
95
+ :rows="rows"
96
+ :option="option"
97
+ theme="light"
98
+ @task-update="handleTaskUpdate"
99
+ @task-click="handleTaskClick"
100
+ style="width: 100%; height: 100%;"
101
+ />
102
+ </div>
103
+ </template>
104
+ ```
105
+
106
+ ---
107
+
108
+ ## Global Registration (Vue Plugin)
109
+
110
+ You can also register `GanttChart` globally in your Vue app:
111
+
112
+ ```ts
113
+ import { createApp } from 'vue'
114
+ import App from './App.vue'
115
+ import MoguchartVue from '@mogura/moguchart-vue'
116
+
117
+ const app = createApp(App)
118
+ app.use(MoguchartVue)
119
+ app.mount('#app')
120
+ ```
121
+
122
+ Then use `<GanttChart />` directly in any template without importing it.
123
+
124
+ ---
125
+
126
+ ## Using Plugins (e.g. Export Plugin)
127
+
128
+ You can register plugins declaratively via `option.plugins` or imperatively using `ref`:
129
+
130
+ ```vue
131
+ <script setup lang="ts">
132
+ import { ref } from 'vue'
133
+ import {
134
+ GanttChart,
135
+ type GanttChartInstance,
136
+ type GanttChartOption,
137
+ } from '@mogura/moguchart-vue'
138
+ import { ExportPlugin } from '@mogura/moguchart-plugin-export'
139
+
140
+ const chartRef = ref<GanttChartInstance | null>(null)
141
+
142
+ const option: GanttChartOption = {
143
+ calendar: {
144
+ start: new Date('2026-04-01'),
145
+ end: new Date('2026-04-30'),
146
+ pxPerDay: 40,
147
+ },
148
+ plugins: [new ExportPlugin()],
149
+ }
150
+
151
+ const handleExportPng = async () => {
152
+ await chartRef.value?.exportImage({ format: 'png', scale: 2 })
153
+ }
154
+
155
+ const handleExportPdf = async () => {
156
+ await chartRef.value?.exportImage({ format: 'pdf' })
157
+ }
158
+ </script>
159
+
160
+ <template>
161
+ <div>
162
+ <button @click="handleExportPng">Export PNG</button>
163
+ <button @click="handleExportPdf">Export PDF</button>
164
+
165
+ <GanttChart
166
+ ref="chartRef"
167
+ :rows="[]"
168
+ :option="option"
169
+ style="width: 100%; height: 600px;"
170
+ />
171
+ </div>
172
+ </template>
173
+ ```
174
+
175
+ ---
176
+
177
+ ## Supported Events
178
+
179
+ All events dispatched by `@mogura/moguchart-core` are forwarded as Vue events:
180
+
181
+ | Vue Event | Description | Argument Type |
182
+ |---|---|---|
183
+ | `@task-update` | Dispatched when a task is moved or resized | `TaskUpdateEventDetail` |
184
+ | `@task-click` | Dispatched when a task bar is clicked | `TaskClickEventDetail` |
185
+ | `@task-dblclick` | Dispatched on double clicking a task bar | `TaskClickEventDetail` |
186
+ | `@task-contextmenu` | Dispatched on right-clicking a task bar | `TaskContextMenuEventDetail` |
187
+ | `@task-drop` | Dispatched when a task is dropped | `TaskDropEventDetail` |
188
+ | `@task-delete` | Dispatched when a task is deleted | `TaskDeleteEventDetail` |
189
+ | `@task-progress-change` | Dispatched when task progress changes | `TaskProgressChangeEventDetail` |
190
+ | `@bar-hover` | Dispatched on hovering over a task bar | `BarHoverEventDetail` |
191
+ | `@row-reordered` | Dispatched when a row is reordered via drag-and-drop | `RowReorderEventDetail` |
192
+ | `@row-header-resize` | Dispatched when row header width is resized | `RowHeaderResizeEventDetail` |
193
+ | `@row-selection-change` | Dispatched when row selection changes | `RowSelectionChangeEventDetail` |
194
+ | `@bar-selection-change` | Dispatched when task bar selection changes | `BarSelectionChangeEventDetail` |
195
+ | `@row-toggle-collapse` | Dispatched when a tree row is collapsed/expanded | `RowToggleCollapseEventDetail` |
196
+ | `@dependency-create` | Dispatched when a dependency link is drawn | `DependencyCreateEventDetail` |
197
+ | `@dependency-click` | Dispatched when a dependency line is clicked | `DependencyClickEventDetail` |
198
+ | `@zoom-change` | Dispatched when zoom level changes | `ZoomChangeEventDetail` |
199
+ | `@chart-contextmenu` | Dispatched on right-clicking empty chart area | `ChartContextMenuEventDetail` |
200
+
201
+ ---
202
+
203
+ ## License
204
+
205
+ MIT © [Murakami Hiroyuki](https://github.com/hiro-murakami)
package/dist/GanttChart.d.ts ADDED
@@ -0,0 +1,214 @@
1
+ import { type PropType } from 'vue';
2
+ import { GanttChartElement, type GanttRow, type GanttChartOption, type GanttTask, type ChartContextMenuEventDetail, type MinimapMoveEventDetail, type MinimapResizeEventDetail, type MinimapCollapseEventDetail, type TaskUpdateEventDetail, type BarHoverEventDetail, type TaskClickEventDetail, type TaskContextMenuEventDetail, type TaskDropEventDetail, type RowReorderEventDetail, type RowHeaderResizeEventDetail, type RowSelectionChangeEventDetail, type BarSelectionChangeEventDetail, type RowHeaderClickEventDetail, type RowHeaderDblClickEventDetail, type RowHeaderContextMenuEventDetail, type RowToggleCollapseEventDetail, type DependencyCreateEventDetail, type DependencyClickEventDetail, type MarkerDblClickEventDetail, type MarkerContextMenuEventDetail, type TaskDeleteEventDetail, type ZoomChangeEventDetail, type TaskProgressChangeEventDetail } from '@mogura/moguchart-core';
3
+ export declare const ganttChartProps: {
4
+ /** ガントチャートに表示する行データ配列 */
5
+ rows: {
6
+ type: PropType<GanttRow[]>;
7
+ default: () => never[];
8
+ };
9
+ /** ガントチャートの設定オプション（カレンダー期間やプラグインなど） */
10
+ option: {
11
+ type: PropType<GanttChartOption>;
12
+ required: true;
13
+ };
14
+ /** 表示テーマ ('light' | 'dark') */
15
+ theme: {
16
+ type: PropType<"light" | "dark">;
17
+ default: string;
18
+ };
19
+ /** 選択状態の行ID配列 */
20
+ selectedRowIds: {
21
+ type: PropType<string[]>;
22
+ default: () => never[];
23
+ };
24
+ /** 選択状態のタスクID配列 */
25
+ selectedTaskIds: {
26
+ type: PropType<string[]>;
27
+ default: () => never[];
28
+ };
29
+ /** 外部からドラッグ中のタスク */
30
+ externalDraggingTask: {
31
+ type: PropType<GanttTask | null>;
32
+ default: null;
33
+ };
34
+ };
35
+ export declare const ganttChartEmits: {
36
+ 'chart-contextmenu': (_detail: ChartContextMenuEventDetail, _e: CustomEvent<ChartContextMenuEventDetail>) => boolean;
37
+ 'minimap-move': (_detail: MinimapMoveEventDetail, _e: CustomEvent<MinimapMoveEventDetail>) => boolean;
38
+ 'minimap-resize': (_detail: MinimapResizeEventDetail, _e: CustomEvent<MinimapResizeEventDetail>) => boolean;
39
+ 'minimap-collapse': (_detail: MinimapCollapseEventDetail, _e: CustomEvent<MinimapCollapseEventDetail>) => boolean;
40
+ 'task-update': (_detail: TaskUpdateEventDetail, _e: CustomEvent<TaskUpdateEventDetail>) => boolean;
41
+ 'bar-hover': (_detail: BarHoverEventDetail, _e: CustomEvent<BarHoverEventDetail>) => boolean;
42
+ 'task-click': (_detail: TaskClickEventDetail, _e: CustomEvent<TaskClickEventDetail>) => boolean;
43
+ 'task-dblclick': (_detail: TaskClickEventDetail, _e: CustomEvent<TaskClickEventDetail>) => boolean;
44
+ 'task-contextmenu': (_detail: TaskContextMenuEventDetail, _e: CustomEvent<TaskContextMenuEventDetail>) => boolean;
45
+ 'task-drop': (_detail: TaskDropEventDetail, _e: CustomEvent<TaskDropEventDetail>) => boolean;
46
+ 'row-reordered': (_detail: RowReorderEventDetail, _e: CustomEvent<RowReorderEventDetail>) => boolean;
47
+ 'row-header-resize': (_detail: RowHeaderResizeEventDetail, _e: CustomEvent<RowHeaderResizeEventDetail>) => boolean;
48
+ 'row-selection-change': (_detail: RowSelectionChangeEventDetail, _e: CustomEvent<RowSelectionChangeEventDetail>) => boolean;
49
+ 'bar-selection-change': (_detail: BarSelectionChangeEventDetail, _e: CustomEvent<BarSelectionChangeEventDetail>) => boolean;
50
+ 'row-header-click': (_detail: RowHeaderClickEventDetail, _e: CustomEvent<RowHeaderClickEventDetail>) => boolean;
51
+ 'row-header-dblclick': (_detail: RowHeaderDblClickEventDetail, _e: CustomEvent<RowHeaderDblClickEventDetail>) => boolean;
52
+ 'row-header-contextmenu': (_detail: RowHeaderContextMenuEventDetail, _e: CustomEvent<RowHeaderContextMenuEventDetail>) => boolean;
53
+ 'row-toggle-collapse': (_detail: RowToggleCollapseEventDetail, _e: CustomEvent<RowToggleCollapseEventDetail>) => boolean;
54
+ 'dependency-create': (_detail: DependencyCreateEventDetail, _e: CustomEvent<DependencyCreateEventDetail>) => boolean;
55
+ 'dependency-click': (_detail: DependencyClickEventDetail, _e: CustomEvent<DependencyClickEventDetail>) => boolean;
56
+ 'marker-dblclick': (_detail: MarkerDblClickEventDetail, _e: CustomEvent<MarkerDblClickEventDetail>) => boolean;
57
+ 'marker-contextmenu': (_detail: MarkerContextMenuEventDetail, _e: CustomEvent<MarkerContextMenuEventDetail>) => boolean;
58
+ 'task-delete': (_detail: TaskDeleteEventDetail, _e: CustomEvent<TaskDeleteEventDetail>) => boolean;
59
+ 'zoom-change': (_detail: ZoomChangeEventDetail, _e: CustomEvent<ZoomChangeEventDetail>) => boolean;
60
+ 'task-progress-change': (_detail: TaskProgressChangeEventDetail, _e: CustomEvent<TaskProgressChangeEventDetail>) => boolean;
61
+ };
62
+ /**
63
+ * @mogura/moguchart-core の GanttChartElement をラップした公式 Vue 3 コンポーネント。
64
+ */
65
+ export declare const GanttChart: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
66
+ /** ガントチャートに表示する行データ配列 */
67
+ rows: {
68
+ type: PropType<GanttRow[]>;
69
+ default: () => never[];
70
+ };
71
+ /** ガントチャートの設定オプション（カレンダー期間やプラグインなど） */
72
+ option: {
73
+ type: PropType<GanttChartOption>;
74
+ required: true;
75
+ };
76
+ /** 表示テーマ ('light' | 'dark') */
77
+ theme: {
78
+ type: PropType<"light" | "dark">;
79
+ default: string;
80
+ };
81
+ /** 選択状態の行ID配列 */
82
+ selectedRowIds: {
83
+ type: PropType<string[]>;
84
+ default: () => never[];
85
+ };
86
+ /** 選択状態のタスクID配列 */
87
+ selectedTaskIds: {
88
+ type: PropType<string[]>;
89
+ default: () => never[];
90
+ };
91
+ /** 外部からドラッグ中のタスク */
92
+ externalDraggingTask: {
93
+ type: PropType<GanttTask | null>;
94
+ default: null;
95
+ };
96
+ }>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
97
+ [key: string]: any;
98
+ }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
99
+ 'chart-contextmenu': (_detail: ChartContextMenuEventDetail, _e: CustomEvent<ChartContextMenuEventDetail>) => boolean;
100
+ 'minimap-move': (_detail: MinimapMoveEventDetail, _e: CustomEvent<MinimapMoveEventDetail>) => boolean;
101
+ 'minimap-resize': (_detail: MinimapResizeEventDetail, _e: CustomEvent<MinimapResizeEventDetail>) => boolean;
102
+ 'minimap-collapse': (_detail: MinimapCollapseEventDetail, _e: CustomEvent<MinimapCollapseEventDetail>) => boolean;
103
+ 'task-update': (_detail: TaskUpdateEventDetail, _e: CustomEvent<TaskUpdateEventDetail>) => boolean;
104
+ 'bar-hover': (_detail: BarHoverEventDetail, _e: CustomEvent<BarHoverEventDetail>) => boolean;
105
+ 'task-click': (_detail: TaskClickEventDetail, _e: CustomEvent<TaskClickEventDetail>) => boolean;
106
+ 'task-dblclick': (_detail: TaskClickEventDetail, _e: CustomEvent<TaskClickEventDetail>) => boolean;
107
+ 'task-contextmenu': (_detail: TaskContextMenuEventDetail, _e: CustomEvent<TaskContextMenuEventDetail>) => boolean;
108
+ 'task-drop': (_detail: TaskDropEventDetail, _e: CustomEvent<TaskDropEventDetail>) => boolean;
109
+ 'row-reordered': (_detail: RowReorderEventDetail, _e: CustomEvent<RowReorderEventDetail>) => boolean;
110
+ 'row-header-resize': (_detail: RowHeaderResizeEventDetail, _e: CustomEvent<RowHeaderResizeEventDetail>) => boolean;
111
+ 'row-selection-change': (_detail: RowSelectionChangeEventDetail, _e: CustomEvent<RowSelectionChangeEventDetail>) => boolean;
112
+ 'bar-selection-change': (_detail: BarSelectionChangeEventDetail, _e: CustomEvent<BarSelectionChangeEventDetail>) => boolean;
113
+ 'row-header-click': (_detail: RowHeaderClickEventDetail, _e: CustomEvent<RowHeaderClickEventDetail>) => boolean;
114
+ 'row-header-dblclick': (_detail: RowHeaderDblClickEventDetail, _e: CustomEvent<RowHeaderDblClickEventDetail>) => boolean;
115
+ 'row-header-contextmenu': (_detail: RowHeaderContextMenuEventDetail, _e: CustomEvent<RowHeaderContextMenuEventDetail>) => boolean;
116
+ 'row-toggle-collapse': (_detail: RowToggleCollapseEventDetail, _e: CustomEvent<RowToggleCollapseEventDetail>) => boolean;
117
+ 'dependency-create': (_detail: DependencyCreateEventDetail, _e: CustomEvent<DependencyCreateEventDetail>) => boolean;
118
+ 'dependency-click': (_detail: DependencyClickEventDetail, _e: CustomEvent<DependencyClickEventDetail>) => boolean;
119
+ 'marker-dblclick': (_detail: MarkerDblClickEventDetail, _e: CustomEvent<MarkerDblClickEventDetail>) => boolean;
120
+ 'marker-contextmenu': (_detail: MarkerContextMenuEventDetail, _e: CustomEvent<MarkerContextMenuEventDetail>) => boolean;
121
+ 'task-delete': (_detail: TaskDeleteEventDetail, _e: CustomEvent<TaskDeleteEventDetail>) => boolean;
122
+ 'zoom-change': (_detail: ZoomChangeEventDetail, _e: CustomEvent<ZoomChangeEventDetail>) => boolean;
123
+ 'task-progress-change': (_detail: TaskProgressChangeEventDetail, _e: CustomEvent<TaskProgressChangeEventDetail>) => boolean;
124
+ }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
125
+ /** ガントチャートに表示する行データ配列 */
126
+ rows: {
127
+ type: PropType<GanttRow[]>;
128
+ default: () => never[];
129
+ };
130
+ /** ガントチャートの設定オプション（カレンダー期間やプラグインなど） */
131
+ option: {
132
+ type: PropType<GanttChartOption>;
133
+ required: true;
134
+ };
135
+ /** 表示テーマ ('light' | 'dark') */
136
+ theme: {
137
+ type: PropType<"light" | "dark">;
138
+ default: string;
139
+ };
140
+ /** 選択状態の行ID配列 */
141
+ selectedRowIds: {
142
+ type: PropType<string[]>;
143
+ default: () => never[];
144
+ };
145
+ /** 選択状態のタスクID配列 */
146
+ selectedTaskIds: {
147
+ type: PropType<string[]>;
148
+ default: () => never[];
149
+ };
150
+ /** 外部からドラッグ中のタスク */
151
+ externalDraggingTask: {
152
+ type: PropType<GanttTask | null>;
153
+ default: null;
154
+ };
155
+ }>> & Readonly<{
156
+ "onChart-contextmenu"?: ((_detail: ChartContextMenuEventDetail, _e: CustomEvent<ChartContextMenuEventDetail>) => any) | undefined;
157
+ "onMinimap-move"?: ((_detail: MinimapMoveEventDetail, _e: CustomEvent<MinimapMoveEventDetail>) => any) | undefined;
158
+ "onMinimap-resize"?: ((_detail: MinimapResizeEventDetail, _e: CustomEvent<MinimapResizeEventDetail>) => any) | undefined;
159
+ "onMinimap-collapse"?: ((_detail: MinimapCollapseEventDetail, _e: CustomEvent<MinimapCollapseEventDetail>) => any) | undefined;
160
+ "onTask-update"?: ((_detail: TaskUpdateEventDetail, _e: CustomEvent<TaskUpdateEventDetail>) => any) | undefined;
161
+ "onBar-hover"?: ((_detail: BarHoverEventDetail, _e: CustomEvent<BarHoverEventDetail>) => any) | undefined;
162
+ "onTask-click"?: ((_detail: TaskClickEventDetail, _e: CustomEvent<TaskClickEventDetail>) => any) | undefined;
163
+ "onTask-dblclick"?: ((_detail: TaskClickEventDetail, _e: CustomEvent<TaskClickEventDetail>) => any) | undefined;
164
+ "onTask-contextmenu"?: ((_detail: TaskContextMenuEventDetail, _e: CustomEvent<TaskContextMenuEventDetail>) => any) | undefined;
165
+ "onTask-drop"?: ((_detail: TaskDropEventDetail, _e: CustomEvent<TaskDropEventDetail>) => any) | undefined;
166
+ "onRow-reordered"?: ((_detail: RowReorderEventDetail, _e: CustomEvent<RowReorderEventDetail>) => any) | undefined;
167
+ "onRow-header-resize"?: ((_detail: RowHeaderResizeEventDetail, _e: CustomEvent<RowHeaderResizeEventDetail>) => any) | undefined;
168
+ "onRow-selection-change"?: ((_detail: RowSelectionChangeEventDetail, _e: CustomEvent<RowSelectionChangeEventDetail>) => any) | undefined;
169
+ "onBar-selection-change"?: ((_detail: BarSelectionChangeEventDetail, _e: CustomEvent<BarSelectionChangeEventDetail>) => any) | undefined;
170
+ "onRow-header-click"?: ((_detail: RowHeaderClickEventDetail, _e: CustomEvent<RowHeaderClickEventDetail>) => any) | undefined;
171
+ "onRow-header-dblclick"?: ((_detail: RowHeaderDblClickEventDetail, _e: CustomEvent<RowHeaderDblClickEventDetail>) => any) | undefined;
172
+ "onRow-header-contextmenu"?: ((_detail: RowHeaderContextMenuEventDetail, _e: CustomEvent<RowHeaderContextMenuEventDetail>) => any) | undefined;
173
+ "onRow-toggle-collapse"?: ((_detail: RowToggleCollapseEventDetail, _e: CustomEvent<RowToggleCollapseEventDetail>) => any) | undefined;
174
+ "onDependency-create"?: ((_detail: DependencyCreateEventDetail, _e: CustomEvent<DependencyCreateEventDetail>) => any) | undefined;
175
+ "onDependency-click"?: ((_detail: DependencyClickEventDetail, _e: CustomEvent<DependencyClickEventDetail>) => any) | undefined;
176
+ "onMarker-dblclick"?: ((_detail: MarkerDblClickEventDetail, _e: CustomEvent<MarkerDblClickEventDetail>) => any) | undefined;
177
+ "onMarker-contextmenu"?: ((_detail: MarkerContextMenuEventDetail, _e: CustomEvent<MarkerContextMenuEventDetail>) => any) | undefined;
178
+ "onTask-delete"?: ((_detail: TaskDeleteEventDetail, _e: CustomEvent<TaskDeleteEventDetail>) => any) | undefined;
179
+ "onZoom-change"?: ((_detail: ZoomChangeEventDetail, _e: CustomEvent<ZoomChangeEventDetail>) => any) | undefined;
180
+ "onTask-progress-change"?: ((_detail: TaskProgressChangeEventDetail, _e: CustomEvent<TaskProgressChangeEventDetail>) => any) | undefined;
181
+ }>, {
182
+ rows: GanttRow[];
183
+ theme: "light" | "dark";
184
+ selectedRowIds: string[];
185
+ selectedTaskIds: string[];
186
+ externalDraggingTask: GanttTask | null;
187
+ }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
188
+ export type GanttChartComponent = typeof GanttChart;
189
+ export interface GanttChartPublicApi {
190
+ /** 基底の Web Component (GanttChartElement) への参照 */
191
+ readonly element: GanttChartElement | null;
192
+ /** Lit コンポーネントのレンダリング完了 Promise */
193
+ readonly updateComplete: Promise<boolean> | undefined;
194
+ /** Shadow DOM ルートへの参照 */
195
+ readonly shadowRoot: ShadowRoot | null | undefined;
196
+ /** 外部ドラッグ中のタスク */
197
+ externalDraggingTask: GanttTask | null;
198
+ use: GanttChartElement['use'];
199
+ exportImage: GanttChartElement['exportImage'];
200
+ zoomTo: GanttChartElement['zoomTo'];
201
+ zoomToFit: GanttChartElement['zoomToFit'];
202
+ resetZoom: GanttChartElement['resetZoom'];
203
+ resetScroll: GanttChartElement['resetScroll'];
204
+ scrollToPosition: GanttChartElement['scrollToPosition'];
205
+ selectTask: GanttChartElement['selectTask'];
206
+ toggleRowCollapse: GanttChartElement['toggleRowCollapse'];
207
+ collapseAll: GanttChartElement['collapseAll'];
208
+ expandAll: GanttChartElement['expandAll'];
209
+ hitTest: GanttChartElement['hitTest'];
210
+ getRowPositions: GanttChartElement['getRowPositions'];
211
+ /** コンポーネントのルートDOM要素 */
212
+ $el?: HTMLElement;
213
+ }
214
+ export type GanttChartInstance = GanttChartPublicApi;
package/dist/index.d.ts ADDED
@@ -0,0 +1,9 @@
1
+ import type { Plugin } from 'vue';
2
+ export * from './GanttChart';
3
+ export * from '@mogura/moguchart-core';
4
+ /**
5
+ * Moguchart の Vue 3 プラグイン。
6
+ * `app.use(MoguchartVue)` で `GanttChart` コンポーネントをグローバル登録します。
7
+ */
8
+ export declare const MoguchartVue: Plugin;
9
+ export default MoguchartVue;
package/dist/moguchart-vue.mjs ADDED
@@ -0,0 +1,127 @@
1
+ import { defineComponent as e, h as t, onBeforeUnmount as n, onMounted as r, ref as i, watch as a } from "vue";
2
+ import "@mogura/moguchart-core";
3
+ export * from "@mogura/moguchart-core";
4
+ //#region src/GanttChart.ts
5
+ var o = {
6
+ rows: {
7
+ type: Array,
8
+ default: () => []
9
+ },
10
+ option: {
11
+ type: Object,
12
+ required: !0
13
+ },
14
+ theme: {
15
+ type: String,
16
+ default: "light"
17
+ },
18
+ selectedRowIds: {
19
+ type: Array,
20
+ default: () => []
21
+ },
22
+ selectedTaskIds: {
23
+ type: Array,
24
+ default: () => []
25
+ },
26
+ externalDraggingTask: {
27
+ type: Object,
28
+ default: null
29
+ }
30
+ }, s = {
31
+ "chart-contextmenu": (e, t) => !0,
32
+ "minimap-move": (e, t) => !0,
33
+ "minimap-resize": (e, t) => !0,
34
+ "minimap-collapse": (e, t) => !0,
35
+ "task-update": (e, t) => !0,
36
+ "bar-hover": (e, t) => !0,
37
+ "task-click": (e, t) => !0,
38
+ "task-dblclick": (e, t) => !0,
39
+ "task-contextmenu": (e, t) => !0,
40
+ "task-drop": (e, t) => !0,
41
+ "row-reordered": (e, t) => !0,
42
+ "row-header-resize": (e, t) => !0,
43
+ "row-selection-change": (e, t) => !0,
44
+ "bar-selection-change": (e, t) => !0,
45
+ "row-header-click": (e, t) => !0,
46
+ "row-header-dblclick": (e, t) => !0,
47
+ "row-header-contextmenu": (e, t) => !0,
48
+ "row-toggle-collapse": (e, t) => !0,
49
+ "dependency-create": (e, t) => !0,
50
+ "dependency-click": (e, t) => !0,
51
+ "marker-dblclick": (e, t) => !0,
52
+ "marker-contextmenu": (e, t) => !0,
53
+ "task-delete": (e, t) => !0,
54
+ "zoom-change": (e, t) => !0,
55
+ "task-progress-change": (e, t) => !0
56
+ }, c = e({
57
+ name: "GanttChart",
58
+ props: o,
59
+ emits: s,
60
+ setup(e, { emit: o, expose: c }) {
61
+ let l = i(null), u = /* @__PURE__ */ new Map();
62
+ return r(() => {
63
+ let t = l.value;
64
+ if (!t) return;
65
+ t.rows = e.rows, t.option = e.option, t.theme = e.theme, t.selectedRowIds = e.selectedRowIds, t.selectedTaskIds = e.selectedTaskIds, e.externalDraggingTask !== void 0 && (t.externalDraggingTask = e.externalDraggingTask);
66
+ let n = Object.keys(s);
67
+ for (let e of n) {
68
+ let n = (t) => {
69
+ let n = t;
70
+ o(e, n.detail, n);
71
+ };
72
+ u.set(e, n), t.addEventListener(e, n);
73
+ }
74
+ }), n(() => {
75
+ let e = l.value;
76
+ if (e) {
77
+ for (let [t, n] of u) e.removeEventListener(t, n);
78
+ u.clear();
79
+ }
80
+ }), a(() => e.rows, (e) => {
81
+ l.value && e && (l.value.rows = e);
82
+ }, { deep: !1 }), a(() => e.option, (e) => {
83
+ l.value && e && (l.value.option = e);
84
+ }, { deep: !1 }), a(() => e.theme, (e) => {
85
+ l.value && e && (l.value.theme = e);
86
+ }), a(() => e.selectedRowIds, (e) => {
87
+ l.value && e && (l.value.selectedRowIds = e);
88
+ }, { deep: !1 }), a(() => e.selectedTaskIds, (e) => {
89
+ l.value && e && (l.value.selectedTaskIds = e);
90
+ }, { deep: !1 }), a(() => e.externalDraggingTask, (e) => {
91
+ l.value && (l.value.externalDraggingTask = e ?? null);
92
+ }), c({
93
+ get element() {
94
+ return l.value;
95
+ },
96
+ get updateComplete() {
97
+ return l.value?.updateComplete;
98
+ },
99
+ get shadowRoot() {
100
+ return l.value?.shadowRoot;
101
+ },
102
+ get externalDraggingTask() {
103
+ return l.value?.externalDraggingTask ?? null;
104
+ },
105
+ set externalDraggingTask(e) {
106
+ l.value && (l.value.externalDraggingTask = e);
107
+ },
108
+ use: (...e) => l.value?.use(...e),
109
+ exportImage: (...e) => l.value?.exportImage(...e),
110
+ zoomTo: (...e) => l.value?.zoomTo(...e),
111
+ zoomToFit: (...e) => l.value?.zoomToFit(...e),
112
+ resetZoom: (...e) => l.value?.resetZoom(...e),
113
+ resetScroll: (...e) => l.value?.resetScroll(...e),
114
+ scrollToPosition: (...e) => l.value?.scrollToPosition(...e),
115
+ selectTask: (...e) => l.value?.selectTask(...e),
116
+ toggleRowCollapse: (...e) => l.value?.toggleRowCollapse(...e),
117
+ collapseAll: (...e) => l.value?.collapseAll(...e),
118
+ expandAll: (...e) => l.value?.expandAll(...e),
119
+ hitTest: (...e) => l.value?.hitTest(...e),
120
+ getRowPositions: (...e) => l.value?.getRowPositions(...e)
121
+ }), () => t("gantt-chart", { ref: l });
122
+ }
123
+ }), l = { install(e) {
124
+ e.component("GanttChart", c);
125
+ } };
126
+ //#endregion
127
+ export { c as GanttChart, l as MoguchartVue, l as default, s as ganttChartEmits, o as ganttChartProps };
package/dist/moguchart-vue.umd.js ADDED
@@ -0,0 +1 @@
1
+ (function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require("vue"),require("@mogura/moguchart-core")):typeof define==`function`&&define.amd?define([`exports`,`vue`,`@mogura/moguchart-core`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.MoguchartVue={},e.Vue,e.MoguchartCore))})(this,function(e,t,n){Object.defineProperties(e,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});var r={rows:{type:Array,default:()=>[]},option:{type:Object,required:!0},theme:{type:String,default:`light`},selectedRowIds:{type:Array,default:()=>[]},selectedTaskIds:{type:Array,default:()=>[]},externalDraggingTask:{type:Object,default:null}},i={"chart-contextmenu":(e,t)=>!0,"minimap-move":(e,t)=>!0,"minimap-resize":(e,t)=>!0,"minimap-collapse":(e,t)=>!0,"task-update":(e,t)=>!0,"bar-hover":(e,t)=>!0,"task-click":(e,t)=>!0,"task-dblclick":(e,t)=>!0,"task-contextmenu":(e,t)=>!0,"task-drop":(e,t)=>!0,"row-reordered":(e,t)=>!0,"row-header-resize":(e,t)=>!0,"row-selection-change":(e,t)=>!0,"bar-selection-change":(e,t)=>!0,"row-header-click":(e,t)=>!0,"row-header-dblclick":(e,t)=>!0,"row-header-contextmenu":(e,t)=>!0,"row-toggle-collapse":(e,t)=>!0,"dependency-create":(e,t)=>!0,"dependency-click":(e,t)=>!0,"marker-dblclick":(e,t)=>!0,"marker-contextmenu":(e,t)=>!0,"task-delete":(e,t)=>!0,"zoom-change":(e,t)=>!0,"task-progress-change":(e,t)=>!0},a=(0,t.defineComponent)({name:`GanttChart`,props:r,emits:i,setup(e,{emit:n,expose:r}){let a=(0,t.ref)(null),o=new Map;return(0,t.onMounted)(()=>{let t=a.value;if(!t)return;t.rows=e.rows,t.option=e.option,t.theme=e.theme,t.selectedRowIds=e.selectedRowIds,t.selectedTaskIds=e.selectedTaskIds,e.externalDraggingTask!==void 0&&(t.externalDraggingTask=e.externalDraggingTask);let r=Object.keys(i);for(let e of r){let r=t=>{let r=t;n(e,r.detail,r)};o.set(e,r),t.addEventListener(e,r)}}),(0,t.onBeforeUnmount)(()=>{let e=a.value;if(e){for(let[t,n]of o)e.removeEventListener(t,n);o.clear()}}),(0,t.watch)(()=>e.rows,e=>{a.value&&e&&(a.value.rows=e)},{deep:!1}),(0,t.watch)(()=>e.option,e=>{a.value&&e&&(a.value.option=e)},{deep:!1}),(0,t.watch)(()=>e.theme,e=>{a.value&&e&&(a.value.theme=e)}),(0,t.watch)(()=>e.selectedRowIds,e=>{a.value&&e&&(a.value.selectedRowIds=e)},{deep:!1}),(0,t.watch)(()=>e.selectedTaskIds,e=>{a.value&&e&&(a.value.selectedTaskIds=e)},{deep:!1}),(0,t.watch)(()=>e.externalDraggingTask,e=>{a.value&&(a.value.externalDraggingTask=e??null)}),r({get element(){return a.value},get updateComplete(){return a.value?.updateComplete},get shadowRoot(){return a.value?.shadowRoot},get externalDraggingTask(){return a.value?.externalDraggingTask??null},set externalDraggingTask(e){a.value&&(a.value.externalDraggingTask=e)},use:(...e)=>a.value?.use(...e),exportImage:(...e)=>a.value?.exportImage(...e),zoomTo:(...e)=>a.value?.zoomTo(...e),zoomToFit:(...e)=>a.value?.zoomToFit(...e),resetZoom:(...e)=>a.value?.resetZoom(...e),resetScroll:(...e)=>a.value?.resetScroll(...e),scrollToPosition:(...e)=>a.value?.scrollToPosition(...e),selectTask:(...e)=>a.value?.selectTask(...e),toggleRowCollapse:(...e)=>a.value?.toggleRowCollapse(...e),collapseAll:(...e)=>a.value?.collapseAll(...e),expandAll:(...e)=>a.value?.expandAll(...e),hitTest:(...e)=>a.value?.hitTest(...e),getRowPositions:(...e)=>a.value?.getRowPositions(...e)}),()=>(0,t.h)(`gantt-chart`,{ref:a})}}),o={install(e){e.component(`GanttChart`,a)}};e.GanttChart=a,e.MoguchartVue=o,e.default=o,e.ganttChartEmits=i,e.ganttChartProps=r,Object.keys(n).forEach(function(t){t!=="default"&&!Object.prototype.hasOwnProperty.call(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:function(){return n[t]}})})});
package/package.json ADDED
@@ -0,0 +1,72 @@
1
+ {
2
+ "name": "@mogura/moguchart-vue",
3
+ "type": "module",
4
+ "version": "1.1.0",
5
+ "description": "軽量でフレームワーク非依存のWeb Components製ガントチャートコンポーネント (Lit) の公式 Vue 3 ラッパー。Official Vue 3 wrapper for Moguchart.",
6
+ "license": "MIT",
7
+ "author": "Murakami Hiroyuki",
8
+ "repository": {
9
+ "type": "git",
10
+ "url": "https://github.com/hiro-murakami/moguchart-core.git",
11
+ "directory": "packages/vue"
12
+ },
13
+ "homepage": "https://github.com/hiro-murakami/moguchart-core/tree/main/packages/vue",
14
+ "bugs": {
15
+ "url": "https://github.com/hiro-murakami/moguchart-core/issues"
16
+ },
17
+ "publishConfig": {
18
+ "access": "public"
19
+ },
20
+ "keywords": [
21
+ "gantt",
22
+ "gantt-chart",
23
+ "vue",
24
+ "vue3",
25
+ "vue-gantt",
26
+ "vue-gantt-chart",
27
+ "ガントチャート",
28
+ "工程表",
29
+ "スケジュール",
30
+ "web-components",
31
+ "lit",
32
+ "timeline",
33
+ "scheduler"
34
+ ],
35
+ "sideEffects": false,
36
+ "files": [
37
+ "dist",
38
+ "LICENSE",
39
+ "README.md",
40
+ "README.ja.md"
41
+ ],
42
+ "main": "./dist/moguchart-vue.umd.js",
43
+ "module": "./dist/moguchart-vue.mjs",
44
+ "types": "./dist/index.d.ts",
45
+ "exports": {
46
+ ".": {
47
+ "types": "./dist/index.d.ts",
48
+ "import": "./dist/moguchart-vue.mjs",
49
+ "require": "./dist/moguchart-vue.umd.js"
50
+ }
51
+ },
52
+ "peerDependencies": {
53
+ "vue": "^3.3.0",
54
+ "@mogura/moguchart-core": "1.1.0"
55
+ },
56
+ "devDependencies": {
57
+ "@types/node": "^22.13.1",
58
+ "@vue/test-utils": "^2.4.6",
59
+ "jsdom": "^29.0.0",
60
+ "typescript": "^5.9.3",
61
+ "vite": "^8.3.0",
62
+ "vitest": "^3.2.7",
63
+ "vue": "^3.5.0",
64
+ "@mogura/moguchart-core": "1.1.0"
65
+ },
66
+ "scripts": {
67
+ "dev": "vite",
68
+ "build": "vite build && pnpm exec tsc -p tsconfig.build.json",
69
+ "test": "vitest",
70
+ "test:run": "vitest run"
71
+ }
72
+ }