{"_id":"@composy/org-chart-vue","name":"@composy/org-chart-vue","dist-tags":{"latest":"0.0.1"},"versions":{"0.0.1":{"name":"@composy/org-chart-vue","version":"0.0.1","description":"Vue components for @composy/org-chart-core","keywords":["org-chart","vue","vue3","vue2","component"],"author":{"name":"LDesign Team"},"license":"MIT","type":"module","sideEffects":["*.vue","*.tsx","*.jsx","dist/*","es/**/style/**","esm/**/style/**"],"exports":{".":{"types":"./es/index.d.ts","import":"./es/index.js","require":"./lib/index.cjs","default":"./es/index.js"},"./composables/*":{"types":"./es/composables/*.d.ts","import":"./es/composables/*.js","require":"./lib/composables/*.cjs","default":"./es/composables/*.js"},"./plugins/*":{"types":"./es/plugins/*.d.ts","import":"./es/plugins/*.js","require":"./lib/plugins/*.cjs","default":"./es/plugins/*.js"},"./index.css":"./dist/index.css","./index.min.css":"./dist/index.min.css","./style/index.css":"./lib/style/index.css","./style/index.less":"./es/style/index.less","./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:ensure-package-outputs --cwd ../.. --target vue","dev":"vite build --watch","type-check":"vue-tsc --noEmit","lint":"eslint . --cache","lint:check":"eslint . --cache --max-warnings 0","lint:fix":"eslint . --cache --fix","test":"ltesting run:unit","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/org-chart-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/style.css","typings":"./es/index.d.ts","browser":"./dist/index.js","_id":"@composy/org-chart-vue@0.0.1","_nodeVersion":"23.11.1","_npmVersion":"10.9.2","dist":{"integrity":"sha512-QTh+hBf8gejl+lVL/uoHIRqEc2Y27fDcAA2p75UVsnGQXMLMAQ/RbqaQnH6Wjv0HpQcRCR3fn5rEEHcU6Pxpzw==","shasum":"80548bcc0fbcea8083c2470a443354d5f500bbfb","tarball":"https://registry.npmjs.org/@composy/org-chart-vue/-/org-chart-vue-0.0.1.tgz","fileCount":46,"unpackedSize":117758,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQD4/8DpHO/OvMUzq7QfGou1kwn1vv1zXLJelM9OP1oMPAIgK1R28gDSfxIH6eh94cqTbDhYtPNd4yu8a3PIlFGbbU4="}]},"_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/org-chart-vue_0.0.1_1786949216551_0.0160397615370107"},"_hasShrinkwrap":false}},"time":{"created":"2026-08-17T06:46:55.621Z","0.0.1":"2026-08-17T06:46:56.744Z","modified":"2026-08-17T06:46:57.664Z"},"maintainers":[{"name":"swimly","email":"979741120@qq.com"}],"description":"Vue components for @composy/org-chart-core","keywords":["org-chart","vue","vue3","vue2","component"],"author":{"name":"LDesign Team"},"license":"MIT","readme":"# @composy/org-chart-vue\n\n组织架构图 Vue 3 组件封装\n\n## 安装\n\n```bash\npnpm add @composy/org-chart-vue\n```\n\n## 使用\n\n### 组件方式\n\n```vue\n<template>\n  <OrgChart\n    v-model=\"orgData\"\n    layout=\"vertical\"\n    theme=\"light\"\n    editable\n    height=\"600px\"\n    @node-click=\"handleClick\"\n  />\n</template>\n\n<script setup lang=\"ts\">\nimport { ref } from 'vue'\nimport { OrgChart } from '@composy/org-chart-vue'\n\nconst orgData = ref({\n  id: '1',\n  name: '张总',\n  title: '总经理',\n  children: [\n    { id: '2', name: '李副总', title: '技术总监' },\n    { id: '3', name: '刘副总', title: '市场总监' },\n  ],\n})\n\nfunction handleClick(node) {\n  console.log('点击节点：', node)\n}\n</script>\n```\n\n### Composable 方式\n\n```vue\n<script setup lang=\"ts\">\nimport { ref, onMounted } from 'vue'\nimport { useOrgChart } from '@composy/org-chart-vue'\n\nconst containerRef = ref<HTMLElement>()\nconst { create, destroy, search, expandAll } = useOrgChart()\n\nonMounted(() => {\n  create(containerRef.value!, {\n    data: { id: '1', name: 'CEO', children: [] },\n    layout: 'vertical',\n  })\n})\n</script>\n```\n\n### 插件方式\n\n```ts\nimport { createApp } from 'vue'\nimport { OrgChartPlugin } from '@composy/org-chart-vue'\n\nconst app = createApp(App)\napp.use(OrgChartPlugin)\n```\n\n## 组件 Props\n\n| Prop | 类型 | 默认值 | 说明 |\n|------|------|--------|------|\n| `modelValue` | `OrgNode` | - | v-model 绑定数据 |\n| `layout` | `'vertical' \\| 'horizontal'` | `'vertical'` | 布局方向 |\n| `theme` | `'light' \\| 'dark'` | `'light'` | 主题模式 |\n| `editable` | `boolean` | `false` | 是否可编辑 |\n| `zoomable` | `boolean` | `true` | 是否可缩放 |\n| `draggable` | `boolean` | `true` | 是否可拖拽 |\n| `nodeWidth` | `number` | `180` | 节点宽度 |\n| `nodeHeight` | `number` | `120` | 节点高度 |\n| `nodeGapX` | `number` | `24` | 水平间距 |\n| `nodeGapY` | `number` | `60` | 垂直间距 |\n| `showHeadcount` | `boolean` | `false` | 显示编制统计 |\n| `height` | `string` | `'500px'` | 容器高度 |\n| `addText` | `string` | `'+'` | 添加按钮文字 |\n| `editText` | `string` | `'编辑'` | 编辑按钮文字 |\n| `deleteText` | `string` | `'删除'` | 删除按钮文字 |\n\n## 组件 Events\n\n| 事件 | 参数 | 说明 |\n|------|------|------|\n| `update:modelValue` | `OrgNode` | 数据更新 |\n| `nodeClick` | `OrgNode` | 节点点击 |\n| `nodeAdd` | `OrgNode` | 节点添加 |\n| `nodeDelete` | `OrgNode` | 节点删除 |\n| `nodeEdit` | `OrgNode` | 节点编辑 |\n| `expand` | `OrgNode` | 节点展开 |\n| `collapse` | `OrgNode` | 节点折叠 |\n| `zoomChange` | `number` | 缩放变化 |\n| `search` | `string, OrgNode[]` | 搜索完成 |\n\n## 组件 Methods\n\n通过 `ref` 获取组件实例后可调用：\n\n```ts\nconst orgChartRef = ref()\norgChartRef.value.search('经理')\norgChartRef.value.expandAll()\norgChartRef.value.fitView()\n```\n\n## 构建产物\n\n- `dist/` - UMD 格式（含 `index.min.js`）\n- `es/` - ESM 格式（含声明文件）\n- `esm/` - ESM 格式\n- `lib/` - CJS 格式\n\n## 开发\n\n```bash\npnpm run type-check   # 类型检查\npnpm run build        # 构建\npnpm run lint:check   # 代码检查\n```\n","readmeFilename":"README.md","_rev":"1-4763aefa852d0bac302ea6bb3fb32c98"}