@@ -200,6 +216,11 @@ npm run dev
| `enableTaskListContextMenu` | `boolean` | `true` | Whether to enable TaskList (TaskRow) context menu. When `true`: uses built-in menu if `task-list-context-menu` slot is not declared, uses custom menu if slot is declared; when `false`: context menu is completely disabled |
| `enableTaskBarContextMenu` | `boolean` | `true` | Whether to enable TaskBar context menu. When `true`: uses built-in menu if `task-bar-context-menu` slot is not declared, uses custom menu if slot is declared; when `false`: context menu is completely disabled |
| `assigneeOptions` | `Array<{ key?: string \| number; value: string \| number; label: string }>` | `[]` | Assignee dropdown options in task edit drawer |
+| `locale` 1.7.1 | `'zh-CN' \| 'en-US'` | `'zh-CN'` | Language setting (reactive). Component's internal language will follow changes |
+| `theme` 1.7.1 | `'light' \| 'dark'` | `'light'` | Theme mode (reactive). Component's theme will follow changes |
+| `timeScale` 1.7.1 | `'hour' \| 'day' \| 'week' \| 'month' \| 'quarter' \| 'year'` | `'week'` | Time scale (reactive). Timeline scale will follow changes |
+| `fullscreen` 1.7.1 | `boolean` | `false` | Fullscreen state control (reactive). Component's fullscreen state will follow changes |
+| `expandAll` 1.7.1 | `boolean` | `true` | Expand/collapse all tasks (reactive). All tasks' expand state will follow changes |
#### TaskListColumn Component Props
@@ -537,6 +558,61 @@ const handleMilestoneSaved = milestone => {
```
+#### Example 4: External Component State Control (TimeScale, Fullscreen, Expand/Collapse, Locale, Theme)
+
+Control component state through reactive Props binding. Component state will automatically follow Props changes.
+
+```vue
+
+
+
+
+
+
+
+```
+
---
### Task Management
@@ -2041,6 +2117,168 @@ The component has built-in intelligent timeline range calculation logic, ensurin
> - Avoids issues with timeline being too narrow or having excessive whitespace
> - Suitable for displaying at different resolutions
+### Expose Methods
+
+The GanttChart component exposes a series of methods through `defineExpose`, allowing parent components to directly call these methods via template references (`ref`) to control component behavior. This imperative control approach is suitable for scenarios requiring precise timing control.
+
+#### Available Expose Methods
+
+| Method | Parameters | Return Value | Description |
+| --- | --- | --- | --- |
+| `setLocale` 1.7.1 | `locale: 'zh-CN' \| 'en-US'` | `void` | Set component language |
+| `currentLocale` 1.7.1 | - | `'zh-CN' \| 'en-US'` | Get current language setting |
+| `setTheme` 1.7.1 | `mode: 'light' \| 'dark'` | `void` | Set theme mode |
+| `currentTheme` 1.7.1 | - | `'light' \| 'dark'` | Get current theme mode |
+| `setTimeScale` 1.7.1 | `scale: TimelineScale` | `void` | Set time scale (`'hour' \| 'day' \| 'week' \| 'month' \| 'quarter' \| 'year'`) |
+| `currentScale` 1.7.1 | - | `TimelineScale` | Get current time scale |
+| `toggleFullscreen` 1.7.1 | - | `void` | Toggle fullscreen state |
+| `enterFullscreen` 1.7.1 | - | `void` | Enter fullscreen mode |
+| `exitFullscreen` 1.7.1 | - | `void` | Exit fullscreen mode |
+| `isFullscreen` 1.7.1 | - | `boolean` | Get current fullscreen state |
+| `toggleExpandAll` 1.7.1 | - | `void` | Toggle expand/collapse all tasks |
+| `expandAll` 1.7.1 | - | `void` | Expand all tasks |
+| `collapseAll` 1.7.1 | - | `void` | Collapse all tasks |
+| `isExpandAll` 1.7.1 | - | `boolean` | Get current expand all state |
+| `scrollToToday` 1.7.1 | - | `void` | Scroll to today's position |
+| `scrollToTask` 1.7.1 | `taskId: number \| string` | `void` | Scroll to specified task (task will auto-expand to visible state) |
+| `scrollToDate` 1.7.1 | `date: string \| Date` | `void` | Scroll to specified date position (format: `'YYYY-MM-DD'` or Date object) |
+
+#### Usage Example
+
+**Basic Usage: Imperative Control**
+
+```vue
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+#### Best Practices
+
+1. **Imperative vs Reactive**
+ - Use **Expose Methods**: When you need precise control over timing, such as button clicks or specific event triggers
+ - Use **Props Binding**: When state needs to automatically update following data source, such as syncing with URL parameters
+
+2. **Getting State**
+ - Provides paired getter methods (like `currentLocale()`, `currentTheme()`)
+ - Can immediately get the latest state for verification after calling setters
+
+3. **Error Handling**
+ - Check if `ref` is mounted before calling: `ganttRef.value?.methodName()`
+ - Safer to call after `onMounted` lifecycle
+
+**Complete examples can be found in:**
+- npm-demo project: `npm-demo/src/components/GanttTest.vue`
+- npm-webpack-demo project: `npm-webpack-demo/src/App.vue`
+
+---
+
### Theme & Internationalization
#### Theme Switching
diff --git a/README.md b/README.md
index d2c1204..e609c11 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,21 @@
#
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Current Language: {{ currentLang }}
+Current Theme: {{ currentThemeMode }}
+Current Scale: {{ currentTimeScale }}
+Fullscreen: {{ isFullscreenMode ? 'Yes' : 'No' }}
+Expand State: {{ isAllExpanded ? 'All Expanded' : 'Partially Collapsed' }}
+
+
+ 
jordium-gantt-vue3
+
+