{"_id":"@composy/signature-vue","name":"@composy/signature-vue","dist-tags":{"latest":"0.0.1"},"versions":{"0.0.1":{"name":"@composy/signature-vue","version":"0.0.1","description":"Vue 3 components for signature pad","keywords":["signature","vue","vue3","vue-component","canvas","drawing"],"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/*.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","./style/index.css":"./es/style/index.css","./style/index.less":"./esm/style/index.less","./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","type-check":"vue-tsc --noEmit","lint":"eslint . --cache","lint:check":"eslint . --cache --max-warnings 0","lint:fix":"eslint . --cache --fix","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/signature-core":"^0.0.1","@vueuse/core":"^14.3.0"},"peerDependencies":{"vue":"^3.5.32"},"devDependencies":{"@antfu/eslint-config":"9.1.0","@composy/builder":"^0.0.1","@composy/testing":"^0.0.1","@vue/compiler-sfc":"3.5.39","eslint":"10.7.0","rimraf":"^6.1.3","typescript":"5.9.3","vue-tsc":"^3.3.7"},"typings":"./es/index.d.ts","browser":"./dist/index.js","_id":"@composy/signature-vue@0.0.1","_nodeVersion":"23.11.1","_npmVersion":"10.9.2","dist":{"integrity":"sha512-Ns0v1xu3gHOgjQQ+NFcJZbLzA/x4AzlTl110L/YSvJpDzp5C5kD2iEO+DZ1xIzAauYcX76K6YXZQSYxd+ltsZQ==","shasum":"de783b49a9c4b182e96d3d9e06e9612f549a622f","tarball":"https://registry.npmjs.org/@composy/signature-vue/-/signature-vue-0.0.1.tgz","fileCount":59,"unpackedSize":175711,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIH63yvMvMU4qIdTtC9L2iKod/F07KTOA+7Dn64XXW4G+AiEAxyetsf2F5Sq6E+z5TxYuiZvodb3/lP4P34nhjgDcD/A="}]},"_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/signature-vue_0.0.1_1786949294266_0.7852558014031419"},"_hasShrinkwrap":false}},"time":{"created":"2026-08-17T06:48:14.084Z","0.0.1":"2026-08-17T06:48:14.406Z","modified":"2026-08-17T06:48:15.350Z"},"maintainers":[{"name":"swimly","email":"979741120@qq.com"}],"description":"Vue 3 components for signature pad","keywords":["signature","vue","vue3","vue-component","canvas","drawing"],"author":{"name":"LDesign Team"},"license":"MIT","readme":"# @composy/signature-vue\n\nLDesign Signature Vue - Vue 3 签名组件\n\n## 特性\n\n- 🎯 基于 `@composy/signature-core` 的 Vue 3 组件封装\n- 📦 支持 ESM、CJS、UMD 三种模块格式\n- 🎨 完整的 TypeScript 类型支持\n- 🔧 提供组件和 Composable 两种使用方式\n- 🎨 支持 CSS 变量自定义样式\n\n## 安装\n\n```bash\nnpm install @composy/signature-vue\n# 或\npnpm add @composy/signature-vue\n```\n\n## 快速开始\n\n### 方式一：使用组件\n\n```vue\n<template>\n  <SignaturePad\n    ref=\"signaturePadRef\"\n    :width=\"600\"\n    :height=\"200\"\n    pen-color=\"#000000\"\n    :disabled=\"false\"\n    @begin=\"onBegin\"\n    @change=\"onChange\"\n    @end=\"onEnd\"\n  />\n</template>\n\n<script setup lang=\"ts\">\nimport { ref } from 'vue'\nimport { SignaturePad } from '@composy/signature-vue'\nimport type { SignatureInstance } from '@composy/signature-core'\n\nconst signaturePadRef = ref<SignatureInstance>()\n\nconst onBegin = () => {\n  console.log('开始绘制')\n}\n\nconst onChange = () => {\n  console.log('绘制中')\n}\n\nconst onEnd = () => {\n  console.log('结束绘制')\n}\n\n// 调用组件方法\nconst handleClear = () => {\n  signaturePadRef.value?.clear()\n}\n\nconst handleExport = () => {\n  const dataUrl = signaturePadRef.value?.toDataURL('image/png')\n  console.log(dataUrl)\n}\n</script>\n```\n\n### 方式二：使用 Composable\n\n```vue\n<template>\n  <div>\n    <canvas ref=\"canvasRef\" width=\"600\" height=\"200\" />\n    <div class=\"controls\">\n      <button @click=\"clear\">清空</button>\n      <button @click=\"undo\" :disabled=\"!canUndo\">撤销</button>\n      <button @click=\"redo\" :disabled=\"!canRedo\">重做</button>\n      <button @click=\"exportPNG\">导出 PNG</button>\n    </div>\n    <p>{{ isEmpty ? '画布为空' : '已有签名' }}</p>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref } from 'vue'\nimport { useSignature } from '@composy/signature-vue'\n\nconst canvasRef = ref<HTMLCanvasElement>()\n\nconst {\n  instance,\n  isEmpty,\n  canUndo,\n  canRedo,\n  clear,\n  undo,\n  redo,\n  toDataURL\n} = useSignature(canvasRef, {\n  penColor: '#000000',\n  minWidth: 1,\n  maxWidth: 4\n})\n\nconst exportPNG = () => {\n  const dataUrl = toDataURL('image/png')\n  console.log(dataUrl)\n}\n</script>\n```\n\n## API\n\n### Props (组件)\n\n| 属性 | 类型 | 默认值 | 描述 |\n|------|------|--------|------|\n| `width` | `number` | `600` | 画布宽度（px） |\n| `height` | `number` | `200` | 画布高度（px） |\n| `disabled` | `boolean` | `false` | 是否禁用 |\n| `config` | `SignatureConfig` | `{}` | 完整配置项 |\n\n### Events (组件)\n\n| 事件 | 描述 |\n|------|------|\n| `begin` | 开始绘制时触发 |\n| `change` | 绘制中触发 |\n| `end` | 结束绘制时触发 |\n\n### Methods (组件)\n\n通过 `ref` 获取组件实例后调用：\n\n| 方法 | 描述 |\n|------|------|\n| `clear()` | 清空画布 |\n| `undo()` | 撤销上一步 |\n| `redo()` | 重做上一步 |\n| `isEmpty()` | 检查画布是否为空 |\n| `toDataURL(type?, quality?)` | 导出为 Data URL |\n| `toSVG()` | 导出为 SVG 字符串 |\n| `toJSON()` | 导出为 JSON 对象 |\n| `fromJSON(data)` | 从 JSON 恢复 |\n| `download(filename?, type?)` | 下载签名图片 |\n\n### useSignature (Composable)\n\n```typescript\nconst {\n  instance,\n  isEmpty,\n  canUndo,\n  canRedo,\n  clear,\n  undo,\n  redo,\n  toDataURL,\n  toSVG,\n  toJSON,\n  fromJSON,\n  download\n} = useSignature(canvasRef, config?)\n```\n\n**参数**:\n- `canvasRef`: `Ref<HTMLCanvasElement | undefined>` - 画布元素引用\n- `config`: `MaybeRef<SignatureConfig>` - 配置项（可选）\n\n**返回值**: `{ instance, isEmpty, canUndo, canRedo, clear, undo, redo, ... }`\n\n## CSS 变量\n\n所有样式都支持通过 CSS 变量自定义：\n\n```css\n:root {\n  /* 颜色 */\n  --ld-signature-bg: #ffffff;\n  --ld-signature-border: #d0d7de;\n  --ld-signature-text: #1f2937;\n  --ld-signature-pen-color: #111827;\n  \n  /* 尺寸 */\n  --ld-signature-width: 600px;\n  --ld-signature-height: 200px;\n  --ld-signature-padding: 16px;\n  --ld-signature-radius: 8px;\n  \n  /* 控制按钮 */\n  --ld-signature-btn-height: 40px;\n  --ld-signature-btn-padding: 8px;\n  --ld-signature-btn-radius: 4px;\n}\n```\n\n## 产物说明\n\n| 目录 | 格式 | 用途 |\n|------|------|------|\n| `es/` | ESM | bundler 消费 (import) |\n| `esm/` | ESM | 同 es/，保留模块结构 |\n| `lib/` | CJS | Node.js require() 消费 |\n| `dist/` | UMD | CDN / script 标签 |\n\n## 依赖\n\n- `@composy/signature-core` — 核心引擎\n- `vue` ^3.5.0 (peerDependency)\n\n## License\n\nMIT\n","readmeFilename":"README.md","_rev":"1-5dc279f6196066bfa89a5f0b94786ac6"}