@composy/flowchart-vue

@composy/flowchart-vue

@composy/flowchart-vue adapts the framework-neutral @composy/flowchart-core engine for Vue 3. It exports the approval flowchart component, composables, theme helpers, and plugin registration functions.

Install

pnpm add @composy/flowchart-vue

Vue 3 is a peer dependency. The adapter depends on @composy/flowchart-core and keeps graph behavior in that package.

Component data and plugin defaults

FlowchartApproval supports v-model through modelValue and update:modelValue. It emits flow:change for graph updates and flow:validate when the Core validator runs. Parent updates that match the current graph are ignored, preventing the component's own v-model updates from reloading the graph.

Install the plugin to provide shared defaults and a theme:

import { createFlowchartPlugin } from '@composy/flowchart-vue';
import { createApp } from 'vue';

createApp(App).use(
  createFlowchartPlugin({
    defaultConfig: { readonly: true },
    theme: { defaultTheme: 'dark' }
  })
);

Component props override injected plugin defaults. Changing the graph config props recreates the Core instance and preserves the current modelValue (or the current graph when no model is provided). Changes made through the injected theme's setTheme() and setVariables() are applied to mounted containers and unsubscribed when the component unmounts. useFlowchart() requires an explicit init(container) call; its legacy autoInit option is deprecated because the composable cannot infer a safe mount container.

JSON 预校验与状态同步

FlowchartApproval 和 useFlowchart 暴露 parseJSON，用于在不替换当前画布的情况下获取结构化导入错误。FlowchartApproval 继续通过 v-model 发出完整数据快照；与当前快照相同的父层更新会被忽略，避免组件自己的更新再次触发 loadData。

新增的 ImportOptions、JSONImportResult、SerializationError、ValidationContext 和 ValidationRule 类型会从 Vue 入口重新导出。iframe 或多文档场景仍应让 Core 从实际挂载容器推导 ownerDocument。

Package exports

• @composy/flowchart-vue: components, composables, theme helpers, and plugins.
• @composy/flowchart-vue/components/*: component modules.
• @composy/flowchart-vue/hooks/*: composable modules.
• @composy/flowchart-vue/plugins: plugin entry.
• @composy/flowchart-vue/plugins/*: individual plugin modules.

Workspace checks

From the workspace root:

pnpm --dir libraries/flowchart/packages/vue run build
pnpm --dir libraries/flowchart/packages/vue run type-check
pnpm --dir libraries/flowchart/packages/vue run lint:check

The package uses @composy/builder with rolldown. Its Builder, TypeScript, and ESLint configurations are stored in .ldesign/; the package root config files are compatibility shims.

License

MIT