{"_id":"@composy/dict-vue","name":"@composy/dict-vue","dist-tags":{"latest":"0.0.1"},"versions":{"0.0.1":{"name":"@composy/dict-vue","version":"0.0.1","description":"Vue 3 数据字典集成能力","keywords":["dict","dictionary","vue","vue3","composable"],"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/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"},"./context/*":{"types":"./es/context/*.d.ts","import":"./es/context/*.js","require":"./lib/context/*.cjs","default":"./es/context/*.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"},"./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","clean":"rimraf es esm lib dist","dev":"ldesign-builder build --watch","lint":"eslint . --cache","lint:check":"eslint . --cache --max-warnings 0","lint:fix":"eslint . --cache --fix","type-check":"tsc --noEmit -p tsconfig.json","test":"ltesting run:unit","test:watch":"ltesting run:unit --watch","test:run":"ltesting run:unit","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:ensure-package-outputs --cwd .. --target vue && node --experimental-strip-types ../../../../scripts/index.ts clean:packages-source-declarations --cwd .. --target packages/vue"},"dependencies":{"@composy/dict-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","eslint":"10.7.0","typescript":"5.9.3","vue":"3.5.39"},"typings":"./es/index.d.ts","browser":"./dist/index.js","_id":"@composy/dict-vue@0.0.1","_nodeVersion":"23.11.1","_npmVersion":"10.9.2","dist":{"integrity":"sha512-O+Elw91W2IcSaC06/dXGhYkDDR4cdXjFM0f3MP05tq6o6EWfVZoVCIIhR6m6D5UmkR09RBme6NcbEEf+5bH3uw==","shasum":"312434b97a94bd372c2f9296a0a687f315accf17","tarball":"https://registry.npmjs.org/@composy/dict-vue/-/dict-vue-0.0.1.tgz","fileCount":168,"unpackedSize":249359,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDh3NLPCQn33OKw4Ka8Bv4/acsncCUlB5MdMKl3S8qxrgIhAKgoOmJi4p/QcVs6PnFgf8Iw+dCnczqkHKSSzZTeYWzw"}]},"_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/dict-vue_0.0.1_1786948831833_0.188733958055479"},"_hasShrinkwrap":false}},"time":{"created":"2026-08-17T06:40:31.561Z","0.0.1":"2026-08-17T06:40:32.000Z","modified":"2026-08-17T06:40:32.310Z"},"maintainers":[{"name":"swimly","email":"979741120@qq.com"}],"description":"Vue 3 数据字典集成能力","keywords":["dict","dictionary","vue","vue3","composable"],"author":{"name":"LDesign Team"},"license":"MIT","readme":"# @composy/dict-vue\n\n`@composy/dict-core` 的 Vue 3 适配层。这个包不重复实现字典逻辑，只把同一个 `DictManager`\n注入 Vue 应用、engine 容器和响应式 composables。\n\n## 能力\n\n- `createDictPlugin()`：原生 Vue plugin，注入 `provide/inject` 和 `$dict`\n- `createDictEnginePlugin()`：复用 core engine plugin，并补充 Vue app 自动安装\n- `useDict()`：异步加载字典项，处理 loading、error 和快速切换 code 的竞态\n- `useDictItem()`：响应式读取当前值对应的只读字典项\n- `useDictLabel()`：响应式读取当前值对应的 label\n- `useDictOptions()`：把字典快照映射为 Select/Radio/Checkbox 友好的 options\n- `useDictManager()`：直接读取注入的 manager\n\n## 安装\n\n```bash\npnpm add @composy/dict-vue\n```\n\n## Vue Plugin\n\n```ts\nimport { createDictPlugin } from '@composy/dict-vue'\nimport { createApp } from 'vue'\nimport App from './App.vue'\n\nconst app = createApp(App)\n\napp.use(\n  createDictPlugin({\n    dicts: [\n      {\n        code: 'gender',\n        items: [\n          { label: '男', value: 1 },\n          { label: '女', value: 2 },\n        ],\n      },\n    ],\n    fetcher: async code => {\n      const response = await fetch(`/api/dicts/${code}`)\n      return response.json()\n    },\n  })\n)\n\napp.mount('#app')\n```\n\n## Composables\n\n```vue\n<script setup lang=\"ts\">\nimport { useDict, useDictLabel, useDictOptions } from '@composy/dict-vue'\nimport { ref } from 'vue'\n\nconst currentValue = ref(1)\nconst dict = useDict('gender')\nconst label = useDictLabel('gender', currentValue)\nconst options = useDictOptions('gender')\n</script>\n\n<template>\n  <select v-model=\"currentValue\">\n    <option v-for=\"option in options\" :key=\"String(option.value)\" :value=\"option.value\">\n      {{ option.label }}\n    </option>\n  </select>\n  <span v-if=\"dict.loading\">加载中...</span>\n  <span v-else>{{ label }}</span>\n</template>\n```\n\n## Engine Plugin\n\n```ts\nimport { createDictEnginePlugin } from '@composy/dict-vue'\nimport { createVueEngine } from '@composy/engine-vue'\nimport App from './App.vue'\n\nconst engine = createVueEngine({\n  app: { rootComponent: App },\n  plugins: [\n    createDictEnginePlugin({\n      fetcher: async code => {\n        const response = await fetch(`/api/dicts/${code}`)\n        return response.json()\n      },\n    }),\n  ],\n})\n\nawait engine.mount('#app')\n```\n\n安装后，同一个 `DictManager` 会被：\n\n- 注入到 Vue `provide/inject`\n- 暴露为 `app.config.globalProperties.$dict`\n- 注册到 engine container\n- 同步到 `dictEngineStateKeys.manager` 和 `dictEngineStateKeys.codes`\n\n## 验证\n\n```bash\npnpm type-check\npnpm lint:check\npnpm build\n```\n","readmeFilename":"README.md","_rev":"1-6401b77b8b0416e316ab130b72a3619f"}