{"_id":"@composy/whiteboard-vue","name":"@composy/whiteboard-vue","dist-tags":{"latest":"0.0.1"},"versions":{"0.0.1":{"name":"@composy/whiteboard-vue","version":"0.0.1","description":"Vue 3 adapter components and composables for @composy/whiteboard-core.","keywords":["whiteboard","vue","vue3","component"],"author":{"name":"LDesign Team"},"license":"MIT","type":"module","sideEffects":false,"exports":{".":{"types":"./es/index.d.ts","import":"./es/index.js","require":"./lib/index.cjs","default":"./es/index.js"},"./components":{"types":"./es/components/index.d.ts","import":"./es/components/index.js","require":"./lib/components/index.cjs","default":"./es/components/index.js"},"./components/*":{"types":"./es/components/*.d.ts","import":"./es/components/*.js","require":"./lib/components/*.cjs","default":"./es/components/*.js"},"./composables":{"types":"./es/composables/index.d.ts","import":"./es/composables/index.js","require":"./lib/composables/index.cjs","default":"./es/composables/index.js"},"./composables/*":{"types":"./es/composables/*.d.ts","import":"./es/composables/*.js","require":"./lib/composables/*.cjs","default":"./es/composables/*.js"},"./plugins":{"types":"./es/plugins/index.d.ts","import":"./es/plugins/index.js","require":"./lib/plugins/index.cjs","default":"./es/plugins/index.js"},"./plugins/*":{"types":"./es/plugins/*.d.ts","import":"./es/plugins/*.js","require":"./lib/plugins/*.cjs","default":"./es/plugins/*.js"},"./types":{"types":"./es/types/index.d.ts","import":"./es/types/index.js","require":"./lib/types/index.cjs","default":"./es/types/index.js"},"./types/*":{"types":"./es/types/*.d.ts","import":"./es/types/*.js","require":"./lib/types/*.cjs","default":"./es/types/*.js"},"./index.css":"./dist/index.css","./index.min.css":"./dist/index.min.css","./package.json":"./package.json"},"main":"./lib/index.cjs","module":"./es/index.js","types":"./es/index.d.ts","unpkg":"./dist/index.min.js","jsdelivr":"./dist/index.min.js","scripts":{"build":"ldesign-builder build && node --experimental-strip-types ../../../../scripts/index.ts workspace:normalize-package-output --cwd .. --target vue","dev":"vite build --watch","lint":"eslint \"src/**/*.{ts,vue}\" \".ldesign/builder.config.ts\" \"eslint.config.js\" --cache","lint:check":"eslint \"src/**/*.{ts,vue}\" \".ldesign/builder.config.ts\" \"eslint.config.js\" --cache --max-warnings 0","lint:fix":"eslint \"src/**/*.{ts,vue}\" \".ldesign/builder.config.ts\" \"eslint.config.js\" --cache --fix","test":"ltesting run:unit","type-check":"tsc -p tsconfig.json --noEmit","test:coverage":"ltesting run:unit --coverage","test:watch":"ltesting run:unit --watch","test:run":"ltesting run:unit","test:changed":"ltesting run:unit --changed","test:failed":"ltesting run:unit --failed","test:ui":"ltesting dashboard"},"dependencies":{"@composy/whiteboard-core":"^0.0.1"},"peerDependencies":{"vue":"^3.5.32"},"devDependencies":{"@antfu/eslint-config":"9.1.0","@composy/builder":"^0.0.1","@composy/testing":"^0.0.1","@vue/test-utils":"^2.4.11","eslint":"10.7.0","fast-check":"^4.9.0","jsdom":"29.1.1","typescript":"5.9.3","vite":"^8.1.4","vue":"3.5.39","vue-tsc":"^3.3.7"},"publishConfig":{"registry":"http://npm.longrise.cn:6286/"},"style":"./dist/index.css","typings":"./es/index.d.ts","browser":"./dist/index.js","_id":"@composy/whiteboard-vue@0.0.1","_nodeVersion":"23.11.1","_npmVersion":"10.9.2","dist":{"integrity":"sha512-eq00J8H20eO/YTKYwVT/aNpIn5VW3qyf/zjjgRjy2Ifq/xz5ROxUORjoy5/nEZnddKIln/NrvjT6TXa4YRi3wQ==","shasum":"f91e467bec2eac07124494d12e0290d094a3cc75","tarball":"https://registry.npmjs.org/@composy/whiteboard-vue/-/whiteboard-vue-0.0.1.tgz","fileCount":195,"unpackedSize":613298,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQD//Cj1XtKRbd4IzLnIE/GwuJX6fEJzRBfeikvi/WITjAIgIH7GamBBMwIu+PoDd5bWdRTo4QO4xFK3WuBmYMGhUSk="}]},"_npmUser":{"name":"swimly","email":"979741120@qq.com"},"directories":{},"maintainers":[{"name":"swimly","email":"979741120@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/whiteboard-vue_0.0.1_1786949372317_0.5802003753746412"},"_hasShrinkwrap":false}},"time":{"created":"2026-08-17T06:49:32.141Z","0.0.1":"2026-08-17T06:49:32.462Z","modified":"2026-08-17T06:49:32.706Z"},"maintainers":[{"name":"swimly","email":"979741120@qq.com"}],"description":"Vue 3 adapter components and composables for @composy/whiteboard-core.","keywords":["whiteboard","vue","vue3","component"],"author":{"name":"LDesign Team"},"license":"MIT","readme":"# @composy/whiteboard-vue\n\n`@composy/whiteboard-vue` 是 `@composy/whiteboard-core` 的 Vue 3 适配层。它只负责组件、组合式函数、Vue plugin 和可选 engine 桥接，绘图、历史记录、导入导出、分组等能力全部来自 core 包。\n\n## 组件\n\n- `Whiteboard`：创建并托管 core `Whiteboard` 实例，向外透出 ready、destroy、error、toolChange、shapeAdd、shapeRemove、selectionChange 事件。\n- `WhiteboardToolbar`：工具栏组件，支持选择、画笔、橡皮擦、矩形、圆形、线段、箭头、菱形、文本、图片，以及撤销、重做、缩放、适应内容和清空。\n\n所有组件 class 都以 `ldesign-` 开头，并使用 BEM 风格：\n\n- `ldesign-whiteboard`\n- `ldesign-whiteboard__viewport`\n- `ldesign-whiteboard-toolbar`\n- `ldesign-whiteboard-toolbar__button`\n- `ldesign-whiteboard-toolbar__button--active`\n\n## 快速使用\n\n```vue\n<script setup lang=\"ts\">\nimport { shallowRef } from 'vue';\nimport { Whiteboard, WhiteboardToolbar } from '@composy/whiteboard-vue';\nimport type { Whiteboard as WhiteboardCore } from '@composy/whiteboard-core';\n\nconst instance = shallowRef<WhiteboardCore | null>(null);\n\nfunction handleReady(whiteboard: WhiteboardCore): void {\n  instance.value = whiteboard;\n}\n</script>\n\n<template>\n  <Whiteboard\n    background-pattern=\"grid\"\n    background-pattern-color=\"var(--ld-border)\"\n    :show-grid=\"true\"\n    @ready=\"handleReady\"\n  >\n    <template #toolbar>\n      <WhiteboardToolbar />\n    </template>\n  </Whiteboard>\n</template>\n```\n\n## Composables\n\n```ts\nimport { ref } from 'vue';\nimport {\n  useWhiteboard,\n  useWhiteboardExport,\n  useWhiteboardHistory,\n} from '@composy/whiteboard-vue';\n\nconst container = ref<HTMLElement | null>(null);\nconst whiteboard = useWhiteboard({ container });\nconst history = useWhiteboardHistory(whiteboard.instance);\nconst exporter = useWhiteboardExport(whiteboard.instance);\n\nwhiteboard.setTool('image');\nhistory.undo();\nexporter.downloadImage('board.png', {\n  background: 'var(--ld-bg-surface)',\n});\n```\n\n## Vue Plugin\n\n```ts\nimport { createApp } from 'vue';\nimport { WhiteboardPlugin } from '@composy/whiteboard-vue';\n\nconst app = createApp(App);\napp.use(WhiteboardPlugin, { prefix: 'L' });\n```\n\n注册后可使用：\n\n```vue\n<LWhiteboard>\n  <template #toolbar>\n    <LWhiteboardToolbar />\n  </template>\n</LWhiteboard>\n```\n\n## 主题变量约定\n\n- 颜色必须来自 `packages/color` 生成的 `--ld-*` 变量，例如 `--ld-primary-500`、`--ld-danger-500`、`--ld-bg-surface`、`--ld-border`。\n- 尺寸必须来自 `packages/size` 生成的 `--ld-*` 变量，例如 `--ld-spacing-sm`、`--ld-radius-md`、`--ld-px-34`、`--ld-font-sm`。\n- 组件内部只维护局部 `--ldesign-whiteboard-*` 变量作为语义别名，不硬编码颜色值。\n\n## 产物约定\n\n构建后必须同时存在：\n\n- `dist/index.js`、`dist/index.min.js`、`dist/index.css`、`dist/index.min.css`\n- `es`\n- `esm`\n- `lib`\n\n`lib/package.json` 会标记 CommonJS 边界，确保 `require('@composy/whiteboard-vue')` 在 `type=module` 包内稳定工作。\n\n## 验证\n\n```bash\npnpm -C libraries\\whiteboard\\packages\\vue run type-check\npnpm -C libraries\\whiteboard\\packages\\vue run build\nnode libraries\\whiteboard\\scripts\\check-package-outputs.mjs vue\n```\n\n当前项目使用 `tsc -p tsconfig.json --noEmit` 做 Vue 包类型检查。旧版 `vue-tsc@1.8.27` 在当前 Node 22 + TypeScript 5.9 组合下存在启动兼容问题，后续升级 `vue-tsc` 后可再切回 `vue-tsc`。\n","readmeFilename":"README.md","_rev":"1-1985564eea2a57fc50ce5433c30e0548"}