{"_id":"@composy/certificate-vue","name":"@composy/certificate-vue","dist-tags":{"latest":"0.0.1"},"versions":{"0.0.1":{"name":"@composy/certificate-vue","version":"0.0.1","description":"Vue 3 components and composables for @composy/certificate-core","keywords":["certificate","vue","vue3","renderer","editor","ldesign"],"author":{"name":"LDesign Team"},"license":"MIT","type":"module","sideEffects":["*.css","**/*.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"},"./index.css":"./dist/index.css","./index.min.css":"./dist/index.min.css","./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","postbuild":"node --experimental-strip-types ../../../../scripts/index.ts workspace:ensure-package-outputs --cwd .. --target vue","dev":"ldesign-builder build --watch","lint":"eslint . --cache","lint:check":"eslint . --cache --max-warnings 0","lint:fix":"eslint . --cache --fix","typecheck":"vue-tsc -p tsconfig.json --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"},"dependencies":{"@composy/certificate-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","vue-tsc":"^3.3.7"},"publishConfig":{"registry":"http://npm.longrise.cn:6286/"},"typings":"./es/index.d.ts","browser":"./dist/index.js","_id":"@composy/certificate-vue@0.0.1","_nodeVersion":"23.11.1","_npmVersion":"10.9.2","dist":{"integrity":"sha512-cTPpS6oPcJX8EzLHf40S3539CAtgKH4quJxPN465AEnI38Igqs9WuHO+TKAxl95I3ybccX5xAPAbktQFIPkzvA==","shasum":"85ee225550948a41a7a2f82f9c4cdbc4f46dbbc5","tarball":"https://registry.npmjs.org/@composy/certificate-vue/-/certificate-vue-0.0.1.tgz","fileCount":53,"unpackedSize":322815,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQDABIl9ZpUzo4BA7hjQXk1Jbm/SYqS6C9/y3HIA5sdhRQIgSDau+jhHsFChq3F0eUg/+59+zaoGDZbm0Mk/ofBYWbI="}]},"_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/certificate-vue_0.0.1_1786949009928_0.49487980572437773"},"_hasShrinkwrap":false}},"time":{"created":"2026-08-17T06:43:29.785Z","0.0.1":"2026-08-17T06:43:30.053Z","modified":"2026-08-17T06:43:30.288Z"},"maintainers":[{"name":"swimly","email":"979741120@qq.com"}],"description":"Vue 3 components and composables for @composy/certificate-core","keywords":["certificate","vue","vue3","renderer","editor","ldesign"],"author":{"name":"LDesign Team"},"license":"MIT","readme":"# @composy/certificate-vue\n\n`@composy/certificate-core` 的 Vue 3 适配层，提供 `CertificateRenderer` 组件和 `useCertificate()` composable。核心渲染与编辑逻辑仍由 core 负责，Vue 层只处理生命周期、事件和响应式桥接。\n\n## 特性\n\n- Vue 3 SFC 组件，支持 `v-model:config` 受控使用。\n- `useCertificate()` 暴露 core 的常用编辑、导出、数据源和图层 API。\n- 组件根 class 为 `ldesign-certificate-vue`，内部挂载点为 `ldesign-certificate-vue__mount`。\n- core 注入的编辑器 class 统一使用 `ldesign-certificate-*`。\n- 样式依赖 LDesign `--color-*` 与 `--size-*` CSS variables。\n\n## 快速开始\n\n```vue\n<template>\n  <CertificateRenderer\n    v-model:config=\"config\"\n    :readonly=\"false\"\n    :zoom=\"1\"\n    theme=\"dark\"\n    @ready=\"onReady\"\n  />\n</template>\n\n<script setup lang=\"ts\">\nimport { ref } from 'vue'\nimport {\n  CertificateRenderer,\n  getTemplate,\n  type Certificate,\n  type CertificateConfig,\n} from '@composy/certificate-vue'\n\nconst config = ref<CertificateConfig>(\n  getTemplate('achievement')!.config\n)\n\nfunction onReady(certificate: Certificate) {\n  certificate.setDataSource({\n    name: 'Ada Lovelace',\n    date: '2026-06-09',\n  })\n}\n</script>\n```\n\n`v-model:config` 会跳过组件内部刚刚 emit 的相同配置，避免外部受控回灌造成历史栈污染。\n\n## Composable\n\n```vue\n<template>\n  <div ref=\"containerRef\" />\n</template>\n\n<script setup lang=\"ts\">\nimport { useCertificate } from '@composy/certificate-vue'\n\nconst {\n  containerRef,\n  certificate,\n  insertText,\n  setBackground,\n  setDataSource,\n  download,\n} = useCertificate({\n  readonly: false,\n  toolbar: true,\n  config: {\n    width: 800,\n    height: 566,\n    background: 'var(--color-gray-50)',\n    elements: [],\n  },\n})\n\ninsertText({\n  content: 'Certificate',\n  color: 'var(--color-primary-default)',\n})\nsetBackground('var(--color-warning-50)')\nsetDataSource({ name: 'LDesign' })\nawait download('certificate', { format: 'png', scale: 2 })\n</script>\n```\n\n## 公开能力\n\n组件 `defineExpose()` 与 `useCertificate()` 均提供常用操作：\n\n- 元素：`addElement`、`updateElement`、`removeElement`、`duplicateElement`\n- 插入：`insertText`、`insertShape`、`insertField`、`promptImageInsert`\n- 画布：`setBackground`、`setBackgroundImage`、`setBackgroundRepeat`、`setSize`、`setZoom`\n- 编排：`bringToFront`、`sendToBack`、`alignElement`\n- 状态：`lockElement`、`toggleLock`、`hideElement`、`toggleHide`\n- 数据：`setDataSource`、`getDataSource`\n- 序列化：`toJSON`、`fromJSON`\n- 导出：`exportToDataURL`、`exportToBlob`、`download`\n\n## 构建产物\n\n`pnpm --filter @composy/certificate-vue build` 会生成：\n\n- `dist/index.js`、`dist/index.min.js`\n- `dist/index.css`、`dist/index.min.css`\n- `es/**`\n- `esm/**`\n- `lib/**`\n- 对应 `.d.ts` 类型声明\n\n## 命令\n\n```bash\npnpm --filter @composy/certificate-vue typecheck\npnpm --filter @composy/certificate-vue build\n```\n\n## License\n\nMIT\n","readmeFilename":"README.md","_rev":"1-27d8061e65ac73426b7b178d8fcbe06c"}