{"_id":"@blueking/monitor-vue2-components","_rev":"11-becee5ac7ee151e4bda3c4de43a6acf7","name":"@blueking/monitor-vue2-components","dist-tags":{"beta":"0.0.0-beta.8","latest":"0.0.0-beta.10"},"versions":{"0.0.0-beta.1":{"name":"@blueking/monitor-vue2-components","version":"0.0.0-beta.1","keywords":["@blueking","@blueking/monitor-vue2-components"],"author":{"name":"bkfe"},"license":"MIT","_id":"@blueking/monitor-vue2-components@0.0.0-beta.1","maintainers":[{"name":"blueking","email":"contactus_bk@tencent.com"}],"dist":{"shasum":"c82914543dc088c816fba87a1f5d30c64121b08f","tarball":"https://registry.npmjs.org/@blueking/monitor-vue2-components/-/monitor-vue2-components-0.0.0-beta.1.tgz","fileCount":3,"integrity":"sha512-6V41X6H1sUluUwoWu4IvQWvMDieY8YD5f1D8seuTGJxpOUyFOOZizh6V8mrGgt5sC/25wZUovVQRCH8xQ7w3Wg==","signatures":[{"sig":"MEYCIQDHtP7TwtSbyyZx7D5bHT38Vh4ZDYSy/ndWOn9zAFBrRAIhAKe30ELGqeh6/kHNc2kPt1BWzlS/+M/EDhqCdw+0Yg5U","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":667248},"scripts":{},"_npmUser":{"name":"blueking","email":"contactus_bk@tencent.com"},"_npmVersion":"10.8.2","description":"blueking monitor vue2 components builder","directories":{},"_nodeVersion":"20.19.2","dependencies":{"vue":"^2.7.16","dayjs":"^1.11.18"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/monitor-vue2-components_0.0.0-beta.1_1759561736346_0.14037246083331567","host":"s3://npm-registry-packages-npm-production"}},"0.0.0-beta.2":{"name":"@blueking/monitor-vue2-components","version":"0.0.0-beta.2","keywords":["@blueking","@blueking/monitor-vue2-components"],"author":{"name":"bkfe"},"license":"MIT","_id":"@blueking/monitor-vue2-components@0.0.0-beta.2","maintainers":[{"name":"blueking","email":"contactus_bk@tencent.com"}],"dist":{"shasum":"e8afb5eecc3af27f825df0ec7808b6a9e4569c80","tarball":"https://registry.npmjs.org/@blueking/monitor-vue2-components/-/monitor-vue2-components-0.0.0-beta.2.tgz","fileCount":3,"integrity":"sha512-hPGpS4z/T0GJCprfR9HQce3EyIn4ZIffpdPLm0xGAP3LIxNQYj/B9mHnfkWXti9xwqN3ZD9Te5nvusa3WjqxUg==","signatures":[{"sig":"MEQCIGqnG4Da+O1ZnvIHNUSyeptz2G5BWTbfGsa5n8fDTN7JAiBaeWPM21HbKIiPq7vo0+ZduSXTnAbXIkOlk5TfrwX9VA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":667226},"scripts":{},"_npmUser":{"name":"blueking","email":"contactus_bk@tencent.com"},"_npmVersion":"10.8.2","description":"blueking monitor vue2 components builder","directories":{},"_nodeVersion":"20.19.2","dependencies":{"dayjs":"^1.11.18"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/monitor-vue2-components_0.0.0-beta.2_1759561953491_0.9424273811111006","host":"s3://npm-registry-packages-npm-production"}},"0.0.0-beta.3":{"name":"@blueking/monitor-vue2-components","version":"0.0.0-beta.3","keywords":["@blueking","@blueking/monitor-vue2-components"],"author":{"name":"bkfe"},"license":"MIT","_id":"@blueking/monitor-vue2-components@0.0.0-beta.3","maintainers":[{"name":"blueking","email":"contactus_bk@tencent.com"}],"dist":{"shasum":"93fbfdfb8a91d568248d229d6c80e279f58855a0","tarball":"https://registry.npmjs.org/@blueking/monitor-vue2-components/-/monitor-vue2-components-0.0.0-beta.3.tgz","fileCount":3,"integrity":"sha512-vnfHOWmi6qiaalaW4uX5jhxdlwcPsROafasbHD3ckKZfx7T+FtVlLC+SKImS/V00yQbk/zMTd1pBt37mx0exFw==","signatures":[{"sig":"MEUCIA/puABEiTCngeeyju89gs8VD9SASd+X1MDvhEzpoTyQAiEA7CHOxIKz4bGrB4ktecM/xMEApgmqjn7oBjw5XOphlPk=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":667241},"scripts":{},"_npmUser":{"name":"blueking","email":"contactus_bk@tencent.com"},"_npmVersion":"10.8.2","description":"blueking monitor vue2 components builder","directories":{},"_nodeVersion":"20.19.2","dependencies":{"dayjs":"^1.11.18"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/monitor-vue2-components_0.0.0-beta.3_1759562752595_0.3443889946928502","host":"s3://npm-registry-packages-npm-production"}},"0.0.0-beta.4":{"name":"@blueking/monitor-vue2-components","version":"0.0.0-beta.4","keywords":["@blueking","@blueking/monitor-vue2-components"],"author":{"name":"bkfe"},"license":"MIT","_id":"@blueking/monitor-vue2-components@0.0.0-beta.4","maintainers":[{"name":"blueking","email":"contactus_bk@tencent.com"}],"dist":{"shasum":"4748cb0e11c0b1846e59651b89bed16c38c0777a","tarball":"https://registry.npmjs.org/@blueking/monitor-vue2-components/-/monitor-vue2-components-0.0.0-beta.4.tgz","fileCount":3,"integrity":"sha512-L4l5Tw9lmR+TOP79Oy7oRdwUnZ3f0bGmGeLJphOMUTgBnScg2KW09wC6WyzxttFJ/t7yg+3g2teONkf1Wjli8w==","signatures":[{"sig":"MEQCIFy/AxbaSaJo+2elIXs1bHmgbpLZwFn9GJoyx0iZOfFnAiBmi6vHPu6e8DOTWc+fFVYFZireNwKZ6dsti+0Rm+gktA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":3572434},"scripts":{},"_npmUser":{"name":"blueking","email":"contactus_bk@tencent.com"},"_npmVersion":"10.8.2","description":"blueking monitor vue2 components builder","directories":{},"_nodeVersion":"20.19.2","dependencies":{"dayjs":"^1.11.18"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/monitor-vue2-components_0.0.0-beta.4_1759563571076_0.2322631369410193","host":"s3://npm-registry-packages-npm-production"}},"0.0.0-beta.5":{"name":"@blueking/monitor-vue2-components","version":"0.0.0-beta.5","keywords":["@blueking","@blueking/monitor-vue2-components"],"author":{"name":"bkfe"},"license":"MIT","_id":"@blueking/monitor-vue2-components@0.0.0-beta.5","maintainers":[{"name":"blueking","email":"contactus_bk@tencent.com"}],"dist":{"shasum":"4ea31920aefc205bc1667debb5880d94ab39ec77","tarball":"https://registry.npmjs.org/@blueking/monitor-vue2-components/-/monitor-vue2-components-0.0.0-beta.5.tgz","fileCount":3,"integrity":"sha512-5YHRnFUbk9HD/Zo6fAA8t2yO1YZXwyeRe9UEET5wNWvQNu0eg1i/vUKEQtI+DvwmJGIgBcKLEjJW7ftZ0qfe5A==","signatures":[{"sig":"MEUCIQCoHzYQn1xKWca42ChPwHiFYPoCvXRAeHSClvzJ5FSFXAIgHv8p8qQwX+N7/wFikfZV2rUbYJjZsM0dnBudKEYT748=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":3572621},"scripts":{},"_npmUser":{"name":"blueking","email":"contactus_bk@tencent.com"},"_npmVersion":"10.8.2","description":"blueking monitor vue2 components builder","directories":{},"_nodeVersion":"20.19.2","dependencies":{"dayjs":"^1.11.18"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/monitor-vue2-components_0.0.0-beta.5_1759567027876_0.47395268160206894","host":"s3://npm-registry-packages-npm-production"}},"0.0.0-beta.6":{"name":"@blueking/monitor-vue2-components","version":"0.0.0-beta.6","keywords":["@blueking","@blueking/monitor-vue2-components"],"author":{"name":"bkfe"},"license":"MIT","_id":"@blueking/monitor-vue2-components@0.0.0-beta.6","maintainers":[{"name":"blueking","email":"contactus_bk@tencent.com"}],"dist":{"shasum":"3c4b211dbe6391b18a9f2cb1c01eea39eca0fb0a","tarball":"https://registry.npmjs.org/@blueking/monitor-vue2-components/-/monitor-vue2-components-0.0.0-beta.6.tgz","fileCount":3,"integrity":"sha512-eanT2klV4pXMUEckVoDRhORp4HFqSyF2zR4nG80Be4635g/JtfeUh8wpioSJ7gfCOSZkPfzlbGsfgu6/rI1lsg==","signatures":[{"sig":"MEQCIFG3BAQE+Rg8PTMyph0zy6Gv2WvvI0ebsYF7/Jz78kK2AiBfEMCR5RlsFlmixw1lwfynFyc4fseIAGXzFMtog8Rn0A==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":3574862},"scripts":{},"_npmUser":{"name":"blueking","email":"contactus_bk@tencent.com"},"_npmVersion":"10.8.2","description":"blueking monitor vue2 components builder","directories":{},"_nodeVersion":"20.19.2","dependencies":{"dayjs":"^1.11.18"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/monitor-vue2-components_0.0.0-beta.6_1759569587840_0.8762448804637997","host":"s3://npm-registry-packages-npm-production"}},"0.0.0-beta.7":{"name":"@blueking/monitor-vue2-components","version":"0.0.0-beta.7","keywords":["@blueking","@blueking/monitor-vue2-components"],"author":{"name":"bkfe"},"license":"MIT","_id":"@blueking/monitor-vue2-components@0.0.0-beta.7","maintainers":[{"name":"blueking","email":"contactus_bk@tencent.com"}],"dist":{"shasum":"661a61c9d6ab9a2f51b94cd8bb3ea48aa404060e","tarball":"https://registry.npmjs.org/@blueking/monitor-vue2-components/-/monitor-vue2-components-0.0.0-beta.7.tgz","fileCount":3,"integrity":"sha512-4HTF6efQoahClrp+D3mPOKLZLrYOAfCdasVf9Ggvcxe03EzK3GpfMStF0SIQVgvN0TF4xEWQePmCrGk9K2PzTg==","signatures":[{"sig":"MEQCID/tXdHHk9XJ4hVOimK8cMApFsccL3phOGseVsdO6ykSAiA/Y2lKjlcTPFxD3oF3K34cAsGY3tnEJKQW5jbLliNLEA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":3518597},"main":"index.mjs","scripts":{},"_npmUser":{"name":"blueking","email":"contactus_bk@tencent.com"},"_npmVersion":"10.9.3","description":"blueking monitor vue2 components builder","directories":{},"_nodeVersion":"22.20.0","dependencies":{"dayjs":"^1.11.18","core-js":"^3.39.0","@babel/runtime":"^7.27.10"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/monitor-vue2-components_0.0.0-beta.7_1761031721766_0.4501104292597411","host":"s3://npm-registry-packages-npm-production"}},"0.0.0-beta.8":{"name":"@blueking/monitor-vue2-components","version":"0.0.0-beta.8","keywords":["@blueking","@blueking/monitor-vue2-components"],"author":{"name":"bkfe"},"license":"MIT","_id":"@blueking/monitor-vue2-components@0.0.0-beta.8","maintainers":[{"name":"blueking","email":"contactus_bk@tencent.com"}],"dist":{"shasum":"8aa8a4af8d2e45cf73ac7c2b5ffc82d0e96322cf","tarball":"https://registry.npmjs.org/@blueking/monitor-vue2-components/-/monitor-vue2-components-0.0.0-beta.8.tgz","fileCount":4,"integrity":"sha512-sEbhCszh8f5SXREBygdw2Lu+q8KBUQJz7zmfaZJMjbWAiF0ZrQF6D9zz2ptPi1tuz0nCx0IYg4pm4sgIPt3wiQ==","signatures":[{"sig":"MEUCIQCZSQeZ0qNJPnjidPzjIbYWiPPsNEr5yeboVSXtM681nAIgZnbpXSb0zFrdn4lxnjw170TjtbXil4OBZ+w3SK1q1Nc=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":4056119},"main":"monitor-vue2.mjs","scripts":{},"_npmUser":{"name":"blueking","email":"contactus_bk@tencent.com"},"_npmVersion":"10.9.3","description":"blueking monitor vue2 components builder","directories":{},"_nodeVersion":"22.20.0","dependencies":{"dayjs":"^1.11.18","core-js":"^3.39.0","@babel/runtime":"^7.27.10"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/monitor-vue2-components_0.0.0-beta.8_1761038950974_0.4714301585283369","host":"s3://npm-registry-packages-npm-production"}},"0.0.0-beta.9":{"name":"@blueking/monitor-vue2-components","version":"0.0.0-beta.9","keywords":["@blueking","@blueking/monitor-vue2-components"],"author":{"name":"bkfe"},"license":"MIT","_id":"@blueking/monitor-vue2-components@0.0.0-beta.9","maintainers":[{"name":"blueking","email":"contactus_bk@tencent.com"}],"dist":{"shasum":"02cc99a177944bc80a3939181d9c217d20f4a24a","tarball":"https://registry.npmjs.org/@blueking/monitor-vue2-components/-/monitor-vue2-components-0.0.0-beta.9.tgz","fileCount":4,"integrity":"sha512-KP4NPU4lC7SmmZLLAr9B/UToIlBnzhny/eUmE1BN/UfWI3AMkJD/xE/IAVyPU6hZOpsImZ6w7irvYywcColaJw==","signatures":[{"sig":"MEYCIQCUJcT2j1chtF3iZwsDTf3E5ThThoASPJ3zogAB7VcMpQIhAPeG3Be2z6VGPVbilLnLnQLMbvKL2wJTL8nIVXQBorS0","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":3797785},"main":"monitor-vue2.mjs","scripts":{},"_npmUser":{"name":"blueking","email":"contactus_bk@tencent.com"},"_npmVersion":"10.9.3","description":"blueking monitor vue2 components builder","directories":{},"_nodeVersion":"22.20.0","dependencies":{"dayjs":"^1.11.18","core-js":"^3.39.0","@babel/runtime":"^7.27.10"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/monitor-vue2-components_0.0.0-beta.9_1762746921376_0.882895258193334","host":"s3://npm-registry-packages-npm-production"}},"0.0.0-beta.10":{"name":"@blueking/monitor-vue2-components","version":"0.0.0-beta.10","description":"blueking monitor vue2 components builder","scripts":{},"author":{"name":"bkfe"},"license":"MIT","main":"monitor-vue2.mjs","keywords":["@blueking","@blueking/monitor-vue2-components"],"dependencies":{"core-js":"^3.39.0","@babel/runtime":"^7.27.10","dayjs":"^1.11.18"},"_id":"@blueking/monitor-vue2-components@0.0.0-beta.10","_nodeVersion":"20.19.2","_npmVersion":"10.8.2","dist":{"integrity":"sha512-OrgiwlbxbeaVAnlQgHFXzYbAc4mpHBSXeu+DwjkxGqk2F/4fuhQEoFtJYMYuFVwVwdIjsJ3YLe03B8Ncj50sDQ==","shasum":"8c35fb6d06874ef6d8ab0d9f190462a84cad678f","tarball":"https://registry.npmjs.org/@blueking/monitor-vue2-components/-/monitor-vue2-components-0.0.0-beta.10.tgz","fileCount":6,"unpackedSize":5268856,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDN+AYFVMuI0+ZHdVC6fzu0E+rEBg4PNVTnuBcrjjOy3AIhAJ9TOk5DIzy7f0fNNk7EIN24lJV7Usfajw/yuvsGIQvc"}]},"_npmUser":{"name":"blueking-magicbox","email":"contactus_bk@tencent.com"},"directories":{},"maintainers":[{"name":"blueking-magicbox","email":"contactus_bk@tencent.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/monitor-vue2-components_0.0.0-beta.10_1786931147371_0.015449446002853362"},"_hasShrinkwrap":false}},"time":{"created":"2025-10-04T07:08:56.259Z","modified":"2026-08-17T01:45:47.726Z","0.0.0-beta.1":"2025-10-04T07:08:56.548Z","0.0.0-beta.2":"2025-10-04T07:12:33.704Z","0.0.0-beta.3":"2025-10-04T07:25:52.813Z","0.0.0-beta.4":"2025-10-04T07:39:31.343Z","0.0.0-beta.5":"2025-10-04T08:37:08.116Z","0.0.0-beta.6":"2025-10-04T09:19:48.117Z","0.0.0-beta.7":"2025-10-21T07:28:42.060Z","0.0.0-beta.8":"2025-10-21T09:29:11.306Z","0.0.0-beta.9":"2025-11-10T03:55:21.590Z","0.0.0-beta.10":"2026-08-17T01:45:47.570Z"},"author":{"name":"bkfe"},"license":"MIT","keywords":["@blueking","@blueking/monitor-vue2-components"],"description":"blueking monitor vue2 components builder","maintainers":[{"name":"blueking-magicbox","email":"contactus_bk@tencent.com"}],"readme":"# @blueking/monitor-vue2-components\n\n把监控的指标查询模板组件（Vue2 + bk-magic-vue）打成可分发产物，供其他项目嵌入使用。宿主本身是 Vue3 也可以接入，包内自带 Vue2 运行时，由宿主创建一个 Vue2 应用挂到指定容器上。\n\n## 安装\n\n```bash\nnpm i @blueking/monitor-vue2-components\n```\n\n## 导出内容\n\n```js\nimport { QueryPanel, ExpressionPanel, QueryConfig, MetricDetailV2, Expression, Vue2, i18n } from '@blueking/monitor-vue2-components/index.mjs';\n```\n\n- `QueryPanel` 指标查询面板，含指标选择、汇聚方法/周期、聚合维度、函数、过滤条件\n- `ExpressionPanel` 表达式面板\n- `QueryConfig` / `MetricDetailV2` / `Expression` 等数据模型，来自 `query-template/typings`\n- `Vue2` 包内的 Vue2 构造函数，宿主用它创建应用实例\n- `i18n` 包内的 i18n 实例，创建应用时传入\n\n## 样式\n\n包内提供两份样式，按宿主技术栈二选一。\n\n| 文件 | 适用场景 |\n| --- | --- |\n| `index.css` | 宿主本身是 Vue2 + bk-magic-vue，直接全局引入 |\n| `index.scoped.css` | 宿主是 Vue3（bkui-vue）等其他技术栈 |\n\n包内自带整套 bk-magic-vue 样式，其中数百个 `.bk-*` 类名与 bkui-vue3 同名，在 Vue3 项目里全局引入 `index.css` 会双向污染。`index.scoped.css` 是同一份样式加了 `.monitor-vue2-scope` 前缀的副本，规则只在带该类名的容器内生效，且特异性比裸类名高一级，容器内由 Vue2 样式胜出。\n\n```js\nimport '@blueking/monitor-vue2-components/index.scoped.css';\n```\n\n```html\n<div ref=\"hostRef\" class=\"monitor-vue2-scope\"></div>\n```\n\n有一个容易漏的点：bk-magic-vue 的弹层默认挂到 `body` 下的全局容器里，脱离了上面这个挂载容器，所以那个容器也要补上同样的类名，否则弹层样式命不中。\n\n```js\nconst popContainer = window.__bk_pop_manager?.container;\npopContainer?.classList.add('monitor-vue2-scope');\n```\n\n该容器由 bk-magic-vue 全局共享，组件卸载时只摘掉自己加的类名，不要销毁它。\n\n## 外部注入点\n\n面向嵌入场景提供了两个可选注入点，不传时保持监控自身的默认行为。\n\n`getValueFn` 接管过滤条件的候选值来源，用于对接宿主自己的接口。返回 `{ count, list }`，维度值变量选项与关键字过滤仍由组件统一补上。\n\n```js\nconst getValueFn = async ({ fields, where }) => ({ count: list.length, list });\n```\n\n`createVariableFn` 由宿主接管变量创建。传入后组件不再展开内置的命名输入框，改为调用它并等待回传变量名，宿主可以在自己的变量面板里完成创建。回传空字符串表示宿主取消了创建。\n\n```js\nconst createVariableFn = onCreated => {\n  openMyVariablePanel({ onSaved: name => onCreated(name), onCancel: () => onCreated('') });\n};\n```\n\n注意宿主务必在面板关闭时回调一次。组件依赖这次回调复位「变量创建中」状态，期间点击外部不会收起弹层，以免编辑态被丢弃、变量创建完没有回填的目标。\n\n## 构建\n\n```bash\npnpm build:vue2-components\n```\n\n产出 `index.mjs`、`monitor-vue2.mjs`、`index.css`、`index.scoped.css`。其中作用域样式副本由 `scripts/plugin-scope-vue2-css.ts` 在构建结束时生成。\n","readmeFilename":"readme.md"}