{"_id":"@composy/color-vue","name":"@composy/color-vue","dist-tags":{"latest":"0.0.1"},"versions":{"0.0.1":{"name":"@composy/color-vue","type":"module","version":"0.0.1","description":"Vue 3 components and composables for @composy/color-core","author":{"name":"ldesign"},"license":"MIT","homepage":"https://gitee.com/ldesign-v1/ldesign-color#readme","repository":{"type":"git","url":"git+https://gitee.com/ldesign-v1/ldesign-color.git","directory":"packages/vue"},"bugs":{"url":"https://gitee.com/ldesign-v1/ldesign-color/issues"},"keywords":["color","vue","vue3","theme","composables","components"],"sideEffects":["**/*.css","**/*.less"],"exports":{".":{"types":"./es/index.d.ts","import":"./es/index.js","require":"./lib/index.cjs","default":"./es/index.js"},"./colorPicker":{"types":"./es/components/themeColorPicker/index.d.ts","import":"./es/components/themeColorPicker/index.js","require":"./lib/components/themeColorPicker/index.cjs","default":"./es/components/themeColorPicker/index.js"},"./colorPicker/*":{"types":"./es/components/themeColorPicker/*.d.ts","import":"./es/components/themeColorPicker/*.js","require":"./lib/components/themeColorPicker/*.cjs","default":"./es/components/themeColorPicker/*.js"},"./composables/*":{"types":"./es/composables/*.d.ts","import":"./es/composables/*.js","require":"./lib/composables/*.cjs","default":"./es/composables/*.js"},"./paletteDisplay":{"types":"./es/compat/paletteDisplay.d.ts","import":"./es/compat/paletteDisplay.js","require":"./lib/compat/paletteDisplay.cjs","default":"./es/compat/paletteDisplay.js"},"./plugin":{"types":"./es/plugin/index.d.ts","import":"./es/plugin/index.js","require":"./lib/plugin/index.cjs","default":"./es/plugin/index.js"},"./plugin/*":{"types":"./es/plugin/*.d.ts","import":"./es/plugin/*.js","require":"./lib/plugin/*.cjs","default":"./es/plugin/*.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"},"./context":{"types":"./es/context/index.d.ts","import":"./es/context/index.js","require":"./lib/context/index.cjs","default":"./es/context/index.js"},"./context/*":{"types":"./es/context/*.d.ts","import":"./es/context/*.js","require":"./lib/context/*.cjs","default":"./es/context/*.js"},"./themeColorPicker":{"types":"./es/components/themeColorPicker/index.d.ts","import":"./es/components/themeColorPicker/index.js","require":"./lib/components/themeColorPicker/index.cjs","default":"./es/components/themeColorPicker/index.js"},"./themeColorPicker/*":{"types":"./es/components/themeColorPicker/*.d.ts","import":"./es/components/themeColorPicker/*.js","require":"./lib/components/themeColorPicker/*.cjs","default":"./es/components/themeColorPicker/*.js"},"./themeModeSwitcher":{"types":"./es/components/themeModeSwitcher/index.d.ts","import":"./es/components/themeModeSwitcher/index.js","require":"./lib/components/themeModeSwitcher/index.cjs","default":"./es/components/themeModeSwitcher/index.js"},"./themeModeSwitcher/*":{"types":"./es/components/themeModeSwitcher/*.d.ts","import":"./es/components/themeModeSwitcher/*.js","require":"./lib/components/themeModeSwitcher/*.cjs","default":"./es/components/themeModeSwitcher/*.js"},"./themeProvider":{"types":"./es/compat/themeProvider.d.ts","import":"./es/compat/themeProvider.js","require":"./lib/compat/themeProvider.cjs","default":"./es/compat/themeProvider.js"},"./components/themeColorPicker":{"types":"./es/components/themeColorPicker/index.d.ts","import":"./es/components/themeColorPicker/index.js","require":"./lib/components/themeColorPicker/index.cjs","default":"./es/components/themeColorPicker/index.js"},"./components/themeColorPicker/*":{"types":"./es/components/themeColorPicker/*.d.ts","import":"./es/components/themeColorPicker/*.js","require":"./lib/components/themeColorPicker/*.cjs","default":"./es/components/themeColorPicker/*.js"},"./components/themeModeSwitcher":{"types":"./es/components/themeModeSwitcher/index.d.ts","import":"./es/components/themeModeSwitcher/index.js","require":"./lib/components/themeModeSwitcher/index.cjs","default":"./es/components/themeModeSwitcher/index.js"},"./components/themeModeSwitcher/*":{"types":"./es/components/themeModeSwitcher/*.d.ts","import":"./es/components/themeModeSwitcher/*.js","require":"./lib/components/themeModeSwitcher/*.cjs","default":"./es/components/themeModeSwitcher/*.js"},"./utils":{"types":"./es/utils/index.d.ts","import":"./es/utils/index.js","require":"./lib/utils/index.cjs","default":"./es/utils/index.js"},"./utils/*":{"types":"./es/utils/*.d.ts","import":"./es/utils/*.js","require":"./lib/utils/*.cjs","default":"./es/utils/*.js"},"./package.json":"./package.json"},"main":"./lib/index.cjs","module":"./es/index.js","unpkg":"./dist/index.min.js","jsdelivr":"./dist/index.min.js","types":"./es/index.d.ts","scripts":{"build":"ldesign-builder build","clean":"node -e \"const fs=require('fs'); ['es','esm','lib','dist','.tsbuildinfo'].forEach(d=>{try{fs.rmSync(d,{recursive:true,force:true})}catch{}})\"","dev":"ldesign-builder build --watch","lint":"eslint . --cache","lint:check":"eslint . --cache --max-warnings 0","lint:fix":"eslint . --cache --fix","type-check":"tsc --noEmit","test":"ltesting run:unit","test:run":"ltesting run:unit","test:watch":"ltesting run:unit --watch","test:coverage":"ltesting run:unit --coverage","test:changed":"ltesting run:unit --changed","test:failed":"ltesting run:unit --failed","test:ui":"ltesting dashboard","postbuild":"node --experimental-strip-types ../../../../scripts/index.ts workspace:color-package-postbuild vue && node --experimental-strip-types ../../../../scripts/index.ts clean:packages-source-declarations --cwd .. --target packages/vue"},"peerDependencies":{"@composy/color-core":"^0.0.1","vue":"^3.5.32"},"dependencies":{"lucide-vue-next":"^1.0.0"},"devDependencies":{"@antfu/eslint-config":"9.1.0","@composy/builder":"^0.0.1","@composy/testing":"^0.0.1","@types/node":"26.1.1","@vue/test-utils":"^2.4.11","eslint":"10.7.0","jsdom":"29.1.1","typescript":"5.9.3","vitest":"4.1.10","vue":"3.5.39"},"typings":"./es/index.d.ts","browser":"./dist/index.js","_id":"@composy/color-vue@0.0.1","_nodeVersion":"23.11.1","_npmVersion":"10.9.2","dist":{"integrity":"sha512-xFj/2ykr1yvXmKGIlfIJO5Y7TvBe9W5nENZ7M0SwxnA35gEWNczBQdoUQ6KiC/dwv3TwGWTSKLOQzxtr0+1U9g==","shasum":"28eb080d81a3eeedd150bb569227e99287d1ed24","tarball":"https://registry.npmjs.org/@composy/color-vue/-/color-vue-0.0.1.tgz","fileCount":395,"unpackedSize":6175743,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIAE270O85LdFGFyvLIAHIYYAUPq9uCG7bmk3+DwIQtxLAiEAsMkKTDB9APluj/lSNnNqMCmBpWiSUpjVK6fLnH+k1Ss="}]},"_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/color-vue_0.0.1_1786949448447_0.32189452339710134"},"_hasShrinkwrap":false}},"time":{"created":"2026-08-17T06:50:48.062Z","0.0.1":"2026-08-17T06:50:48.594Z","modified":"2026-08-17T06:50:48.825Z"},"maintainers":[{"name":"swimly","email":"979741120@qq.com"}],"description":"Vue 3 components and composables for @composy/color-core","homepage":"https://gitee.com/ldesign-v1/ldesign-color#readme","keywords":["color","vue","vue3","theme","composables","components"],"repository":{"type":"git","url":"git+https://gitee.com/ldesign-v1/ldesign-color.git","directory":"packages/vue"},"author":{"name":"ldesign"},"bugs":{"url":"https://gitee.com/ldesign-v1/ldesign-color/issues"},"license":"MIT","readme":"# @composy/color-vue\n\n`@composy/color-vue` 是 `@composy/color-core` 的 Vue 3 适配层，只负责在 Vue 运行时中封装核心能力，不重复实现颜色核心逻辑。\n\n## 当前能力分析\n\n当前 `vue` 包主要提供四类能力：\n\n- Vue 组件：`ThemeColorPicker`、`ThemeModeSwitcher`。\n- Vue composables：`useColor`、`useColorTheme`、`useTheme`、`useThemeMode` 等。\n- 原生 Vue Plugin：`createColorPlugin()`。\n- `@composy/engine-core` 适配插件：`createColorEnginePlugin()`。\n\n本次整理后，所有运行时安装逻辑统一收敛到同一条链路：\n\n- `src/plugin/createColorRuntime.ts`\n- `src/plugin/installColorApp.ts`\n- `src/plugin/nativePlugin.ts`\n- `src/plugins/enginePlugin.ts`\n\n这意味着：\n\n- 原生 Vue Plugin 与 engine plugin 共用同一套 runtime 模型。\n- app 上已安装过的颜色 runtime 会被 engine plugin 复用，不会重复创建状态实例。\n- 组件注册、`provide`、全局属性挂载和卸载清理都走统一实现。\n\n## 目录结构\n\n```text\nsrc/\n  index.ts\n  components/\n    themeColorPicker/\n    themeModeSwitcher/\n  composables/\n  compat/\n    paletteDisplay.ts\n    themeProvider.ts\n  context/\n    index.ts\n    injectionKeys.ts\n  plugin/\n    index.ts\n    createColorRuntime.ts\n    installColorApp.ts\n    nativePlugin.ts\n    types.ts\n  plugins/\n    index.ts\n    enginePlugin.ts\n  styles/\n    index.less\n  utils/\n    index.ts\n    themeModeDom.ts\n```\n\n结构约束：\n\n- `src/index.ts` 是唯一根入口。\n- Vue 特有能力只依赖 `@composy/color-core` 与 `vue` 本身。\n- `compat/` 仅保留历史兼容 re-export，不承载真实实现。\n\n## 安装\n\n```bash\npnpm add @composy/color-vue @composy/color-core vue\n```\n\n## 原生 Vue Plugin 用法\n\n```ts\nimport { createColorPlugin } from '@composy/color-vue'\nimport { createApp } from 'vue'\nimport App from './App.vue'\n\nconst app = createApp(App)\n\napp.use(\n  createColorPlugin({\n    primaryColor: '#1677ff',\n    mode: 'auto',\n    globalComponents: true,\n    globalProperties: true,\n    persistence: {\n      enabled: true,\n      key: 'demo-color-theme',\n    },\n  }),\n)\n\napp.mount('#app')\n```\n\n安装后可以直接使用：\n\n```ts\nimport { useColor, useThemeMode } from '@composy/color-vue'\n\nconst { primaryColor, applyTheme } = useColor()\nconst { effectiveTheme, setDark } = useThemeMode()\n\nvoid primaryColor\nvoid applyTheme\nvoid effectiveTheme\nvoid setDark\n```\n\n## `@composy/engine-core` plugin 用法\n\n```ts\nimport { createColorEnginePlugin } from '@composy/color-vue/plugins'\nimport { createVueEngine } from '@composy/engine-vue'\n\nconst engine = createVueEngine({\n  plugins: [\n    createColorEnginePlugin({\n      primaryColor: '#1677ff',\n      mode: 'auto',\n      globalComponents: true,\n      persistence: {\n        enabled: true,\n        key: 'engine-color-theme',\n      },\n    }),\n  ],\n})\n\nvoid engine\n```\n\n## 如何同时兼容原生 Vue Plugin 与 engine plugin\n\n兼容策略如下：\n\n1. `createColorRuntime()` 负责创建唯一职责的颜色 runtime，内部组合 `BaseThemeAdapter` 与 `ThemeModeManager`。\n2. `installColorApp()` 负责把 runtime 安装到 Vue app，包括：\n   - `provide`\n   - 全局属性挂载\n   - 全局组件注册\n   - `unmount` 时的资源清理\n3. `createColorPlugin()` 只是原生 Vue Plugin 外壳，内部调用 `createColorRuntime()` + `installColorApp()`。\n4. `createColorEnginePlugin()` 在 engine 场景下会：\n   - 优先复用已有 Vue app 上已安装的 runtime。\n   - 如果 app 尚未创建，则等待 `app:created` 事件后再安装。\n   - 把核心状态同步回 engine state / events / plugin api。\n\n因此，两种接入方式可以共存，且不会重复安装或重复维护两套状态。\n\n## 构建产物\n\n通过 `@composy/builder` 与工作区 postbuild 统一产出：\n\n- `dist/`：UMD 单文件产物。\n- `es/`：ESM + CSS 产物，适合直接消费。\n- `esm/`：ESM + Less 产物，保留样式源码。\n- `lib/`：CommonJS 产物。\n\n## 测试\n\n```bash\npnpm type-check\npnpm test:run\npnpm test:coverage\npnpm build\n```\n\n当前新增测试重点覆盖：\n\n- 原生 Vue Plugin 注入链。\n- engine plugin 的 runtime 复用与延迟挂载。\n- `ThemeColorPicker` / `ThemeModeSwitcher` 的 UI 行为。\n- runtime 复用场景对应的性能路径。\n\n## 兼容导出\n\n为了兼容历史导入路径，仍保留：\n\n- `@composy/color-vue/themeProvider`\n- `@composy/color-vue/paletteDisplay`\n\n这两个入口现在只做薄 re-export，真实实现都收敛在新的 `plugin/` 与 `components/` 目录中。\n","readmeFilename":"README.md","_rev":"1-45dd0372793b56ee7b542198a61f8b46"}