{"_id":"@composy/dashboard-vue","name":"@composy/dashboard-vue","dist-tags":{"latest":"0.0.1"},"versions":{"0.0.1":{"name":"@composy/dashboard-vue","version":"0.0.1","description":"Vue components for @composy/dashboard-core","keywords":["dashboard","vue","vue3","vue2","component"],"author":{"name":"LDesign Team"},"license":"MIT","type":"module","sideEffects":["./dist/*.css","./es/**/*.css","./es/**/*.css","./lib/**/*.css"],"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"},"./components/*":{"types":"./es/components/*.d.ts","import":"./es/components/*.js","require":"./lib/components/*.cjs","default":"./es/components/*.js"},"./plugins/*":{"types":"./es/plugins/*.d.ts","import":"./es/plugins/*.js","require":"./lib/plugins/*.cjs","default":"./es/plugins/*.js"},"./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","lint":"eslint . --cache","lint:check":"eslint . --cache --max-warnings 0","lint:fix":"eslint . --cache --fix","type-check":"vue-tsc --noEmit -p tsconfig.json","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/dashboard-core":"^0.0.1","vue-demi":"^0.14.10"},"peerDependencies":{"vue":"^2.7.0 || ^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/dashboard-vue@0.0.1","_nodeVersion":"23.11.1","_npmVersion":"10.9.2","dist":{"integrity":"sha512-K02wLWrgHBKr3IDajiyI7jXzpmPuzlKVc6m6PGcjfzYAJ5MoQvYgHnQhMi57bXHXXaIS6/Y3lVaTO8l7KpXAVg==","shasum":"35bcc6be12c77d2b30175598cd124dad8f652228","tarball":"https://registry.npmjs.org/@composy/dashboard-vue/-/dashboard-vue-0.0.1.tgz","fileCount":78,"unpackedSize":196928,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQDADJWbDRuedC6EDlrfpIh7QkWLugEubUC8P3V6GWOlqQIgTQzlHsDmeW1JMPPLAZFpo7eDiHd9swlnUUNcTzvJLjc="}]},"_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/dashboard-vue_0.0.1_1786949062656_0.7336608521732271"},"_hasShrinkwrap":false}},"time":{"created":"2026-08-17T06:44:22.448Z","0.0.1":"2026-08-17T06:44:22.809Z","modified":"2026-08-17T06:44:23.048Z"},"maintainers":[{"name":"swimly","email":"979741120@qq.com"}],"description":"Vue components for @composy/dashboard-core","keywords":["dashboard","vue","vue3","vue2","component"],"author":{"name":"LDesign Team"},"license":"MIT","readme":"# @composy/dashboard-vue\n\n`@composy/dashboard-core` 的 Vue 适配包，提供 `<Dashboard />` 组件、`useDashboard()` 组合式函数和插件注册能力。\n\n## 安装\n\n```bash\npnpm add @composy/dashboard-core @composy/dashboard-vue\n```\n\n应用侧应先加载 LDesign 全局 token CSS：\n\n```ts\nimport '@composy/styles/color.css';\nimport '@composy/styles/size.css';\n```\n\n## 组件用法\n\n```vue\n<template>\n  <Dashboard\n    v-model=\"layout\"\n    :editable=\"editable\"\n    theme=\"auto\"\n    :style-vars=\"{ accentColor: 'var(--ld-primary-500)' }\"\n    @widget-click=\"handleWidgetClick\"\n  />\n</template>\n\n<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Dashboard, type LayoutItem } from '@composy/dashboard-vue';\n\nconst editable = ref(true);\nconst layout = ref<LayoutItem[]>([\n  { id: 'kpi', type: 'stat', x: 0, y: 0, w: 3, h: 2, props: { title: '活跃用户', value: 9527 } },\n]);\n\nfunction handleWidgetClick(widget: LayoutItem) {\n  console.log(widget.id);\n}\n</script>\n```\n\n组件 props：\n\n- `modelValue`\n- `columns`\n- `rowHeight`\n- `gap`\n- `padding`\n- `editable`\n- `disabled`\n- `theme`\n- `className`\n- `styleVars`\n\n组件事件：\n\n- `update:modelValue`\n- `layout-change`\n- `widget-click`\n- `widget-add`\n- `widget-remove`\n- `editable-change`\n- `disabled-change`\n\n## useDashboard\n\n```ts\nimport { onMounted, ref } from 'vue';\nimport { useDashboard } from '@composy/dashboard-vue';\n\nconst host = ref<HTMLElement | null>(null);\nconst { create, addWidget, setEditable, setStyleVars } = useDashboard();\n\nonMounted(() => {\n  if (!host.value) return;\n  create(host.value, { editable: true, theme: 'light' });\n  addWidget({ type: 'progress', x: 0, y: 0, w: 4, h: 2, props: { items: [{ label: '完成率', value: 72 }] } });\n  setStyleVars({ widgetBodyPadding: 'var(--size-6)' });\n});\n```\n\n## 插件\n\n```ts\nimport { createApp } from 'vue';\nimport { createDashboardPlugin } from '@composy/dashboard-vue';\n\napp.use(createDashboardPlugin({\n  name: 'LDesignDashboard',\n  defaults: {\n    theme: 'auto',\n    editable: false,\n  },\n}));\n```\n\n## 样式约定\n\n核心 DOM class 统一使用 `ldesign-dashboard` 前缀，Vue 包外层容器使用 `ldesign-dashboard-vue`。组件变量统一为 `--ldesign-dashboard-*`，默认值引用 `--ld-*` 颜色 token 和 `--size-*` 尺寸 token。\n\n## 构建输出\n\n`pnpm build` 会生成：\n\n- `dist/index.js` 和 `dist/index.min.js`\n- `es/index.js`\n- `esm/index.js`\n- `lib/index.cjs`\n- 对应 `.d.ts` 类型声明\n\n## 开发命令\n\n```bash\npnpm type-check\npnpm build\n```\n\n当前仓库环境如未刷新 `node_modules`，`vue-tsc` 可能仍解析到旧版；可先运行根安装刷新依赖。\n\n## License\n\nMIT\n","readmeFilename":"README.md","_rev":"1-b9f86793969901261ee3af0859b39ceb"}