{"_id":"@composy/survey-vue","name":"@composy/survey-vue","dist-tags":{"latest":"0.0.1"},"versions":{"0.0.1":{"name":"@composy/survey-vue","version":"0.0.1","description":"Vue components for @composy/survey-core","keywords":["survey","vue","vue3","vue2","component"],"author":{"name":"LDesign Team"},"license":"MIT","type":"module","sideEffects":false,"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"},"./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"},"./components":{"types":"./es/components/index.d.ts","import":"./es/components/index.js","require":"./lib/components/index.cjs","default":"./es/components/index.js"},"./components/*":{"types":"./es/components/*.d.ts","import":"./es/components/*.js","require":"./lib/components/*.cjs","default":"./es/components/*.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","dev":"vite build --watch","lint":"eslint . --cache","lint:check":"eslint . --cache --max-warnings 0","lint:fix":"eslint . --cache --fix","type-check":"vue-tsc --noEmit","test":"ltesting run:unit","test:coverage":"ltesting run:unit --coverage","test:watch":"ltesting run:unit --watch","test:run":"ltesting run:unit","test:changed":"ltesting run:unit --changed","test:failed":"ltesting run:unit --failed","test:ui":"ltesting dashboard"},"dependencies":{"@composy/survey-core":"^0.0.1","vue-demi":"^0.14.10"},"peerDependencies":{"vue":"^2.7.0 || ^3.5.32"},"devDependencies":{"@antfu/eslint-config":"9.1.0","@composy/builder":"^0.0.1","@composy/testing":"^0.0.1","@vue/test-utils":"^2.4.11","eslint":"10.7.0","fast-check":"^4.9.0","jsdom":"29.1.1","typescript":"5.9.3","vite":"^8.1.4","vue":"3.5.39","vue-tsc":"^3.3.7"},"publishConfig":{"registry":"http://npm.longrise.cn:6286/"},"style":"./dist/index.css","typings":"./es/index.d.ts","browser":"./dist/index.js","_id":"@composy/survey-vue@0.0.1","_nodeVersion":"23.11.1","_npmVersion":"10.9.2","dist":{"integrity":"sha512-5nORrnHNlNB2fvsMvNcm8yS1QYBP+BwE6k8N8T3FWgoXWxJpfNhfOTJ7fgKrZ8265lRdVOnPJl/nfdgtms9Ktw==","shasum":"32063cd04355e752104f54239bd9cc7f90b64379","tarball":"https://registry.npmjs.org/@composy/survey-vue/-/survey-vue-0.0.1.tgz","fileCount":63,"unpackedSize":153538,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQC4j4TNAtr79cVBewTPc42ZCbzIO9/JcAMGm8nvvbvZxwIgF/8jzd+DcLNFQDfl9wyXVZGKZOnNl++dpEirA66pvRY="}]},"_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/survey-vue_0.0.1_1786949297391_0.2064238608403881"},"_hasShrinkwrap":false}},"time":{"created":"2026-08-17T06:48:17.216Z","0.0.1":"2026-08-17T06:48:17.539Z","modified":"2026-08-17T06:48:17.796Z"},"maintainers":[{"name":"swimly","email":"979741120@qq.com"}],"description":"Vue components for @composy/survey-core","keywords":["survey","vue","vue3","vue2","component"],"author":{"name":"LDesign Team"},"license":"MIT","readme":"# @composy/survey-vue\n\n问卷/投票设计器 Vue 3 组件 - 可视化问卷编排与结果统计\n\n## 功能特性\n\n- 🧩 **Vue 3 组件** - 开箱即用的 SurveyDesigner 组件\n- 🪝 **组合式函数** - useSurveyDesigner Composable\n- ⚡ **响应式数据** - 自动同步 props 和内部状态\n- 🔌 **Vue 插件** - 全局注册组件\n\n## 安装\n\n```bash\n# npm\nnpm install @composy/survey-vue\n\n# pnpm\npnpm add @composy/survey-vue\n```\n\n## 快速开始\n\n### 组件用法\n\n```vue\n<template>\n  <SurveyDesigner\n    :mode=\"mode\"\n    :theme=\"theme\"\n    :data=\"surveyData\"\n    @change=\"handleChange\"\n    @submit=\"handleSubmit\"\n  />\n</template>\n\n<script setup lang=\"ts\">\nimport { ref } from 'vue'\nimport { SurveyDesigner } from '@composy/survey-vue'\nimport type { SurveyData, AnswerValue } from '@composy/survey-core'\n\nconst mode = ref<'design' | 'fill' | 'result'>('design')\nconst theme = ref<'light' | 'dark'>('light')\n\nconst surveyData = ref<SurveyData>({\n  title: '用户满意度调查',\n  description: '请填写以下问卷',\n  questions: [],\n})\n\nconst handleChange = (data: SurveyData) => {\n  console.log('问卷数据变化:', data)\n}\n\nconst handleSubmit = (answers: AnswerValue[]) => {\n  console.log('提交的答案:', answers)\n}\n</script>\n```\n\n### Composable 用法\n\n```vue\n<template>\n  <div ref=\"containerRef\"></div>\n  <button @click=\"addQuestion\">添加题目</button>\n  <button @click=\"submit\">提交</button>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, onMounted } from 'vue'\nimport { useSurveyDesigner } from '@composy/survey-vue'\n\nconst containerRef = ref<HTMLElement | null>(null)\n\nconst {\n  instance,\n  create,\n  addQuestion: addQ,\n  submit: submitSurvey,\n} = useSurveyDesigner()\n\nonMounted(() => {\n  if (containerRef.value) {\n    create(containerRef.value, {\n      mode: 'design',\n      theme: 'light',\n    })\n  }\n})\n\nconst addQuestion = () => {\n  addQ('radio', {\n    title: '新题目',\n    options: [\n      { id: 'opt_1', label: '选项 1', value: 'opt_1' },\n      { id: 'opt_2', label: '选项 2', value: 'opt_2' },\n    ],\n  })\n}\n\nconst submit = () => {\n  const answers = submitSurvey()\n  console.log('提交:', answers)\n}\n</script>\n```\n\n### 插件注册\n\n```typescript\nimport { createApp } from 'vue'\nimport { SurveyPlugin } from '@composy/survey-vue'\nimport App from './App.vue'\n\nconst app = createApp(App)\napp.use(SurveyPlugin)\napp.mount('#app')\n```\n\n## 组件 API\n\n### SurveyDesigner Props\n\n| 属性 | 类型 | 默认值 | 说明 |\n|------|------|--------|------|\n| `mode` | `'design' \\| 'fill' \\| 'result'` | `'design'` | 问卷模式 |\n| `theme` | `'light' \\| 'dark'` | `'light'` | 主题模式 |\n| `data` | `SurveyData` | - | 问卷数据 |\n| `responses` | `SurveyResponse[]` | - | 答卷数据（result 模式） |\n| `disabled` | `boolean` | `false` | 是否禁用 |\n| `readonly` | `boolean` | `false` | 是否只读 |\n\n### SurveyDesigner Events\n\n| 事件名 | 说明 | 回调参数 |\n|--------|------|----------|\n| `change` | 问卷数据变化 | `SurveyData` |\n| `submit` | 答卷提交 | `AnswerValue[]` |\n| `validation-error` | 校验失败 | `ValidationError[]` |\n| `question-add` | 题目添加 | `QuestionConfig` |\n| `question-remove` | 题目删除 | `string` |\n\n### SurveyDesigner Expose\n\n通过 `ref` 访问组件实例：\n\n```vue\n<template>\n  <SurveyDesigner ref=\"designerRef\" />\n</template>\n\n<script setup lang=\"ts\">\nimport { ref } from 'vue'\nimport { SurveyDesigner } from '@composy/survey-vue'\n\nconst designerRef = ref()\n\n// 访问实例方法\nconst addQuestion = () => {\n  designerRef.value?.addQuestion('text', { title: '新题目' })\n}\n</script>\n```\n\n| 方法/属性 | 说明 |\n|-----------|------|\n| `instance` | 核心实例 |\n| `data` | 响应式问卷数据 |\n| `addQuestion(type, config?)` | 添加题目 |\n| `removeQuestion(id)` | 移除题目 |\n| `getData()` | 获取问卷数据 |\n| `setData(data)` | 设置问卷数据 |\n| `getAnswers()` | 获取答案 |\n| `submit()` | 提交答卷 |\n| `getStats()` | 获取统计数据 |\n| `setTheme(theme)` | 设置主题 |\n| `setDisabled(disabled)` | 设置禁用 |\n| `setMode(mode)` | 设置模式 |\n\n## useSurveyDesigner\n\n```typescript\nconst {\n  instance,      // Ref<SurveyDesignerInstance | null>\n  data,          // Ref<SurveyData | null>\n  create,        // (container, config) => void\n  setMode,       // (mode) => void\n  setTheme,      // (theme) => void\n  setDisabled,   // (disabled) => void\n  setResponses,  // (responses) => void\n  addQuestion,   // (type, config?) => void\n  removeQuestion,// (id) => void\n  submit,        // () => AnswerValue[] | null\n  getStats,      // () => QuestionStats[]\n  destroy,       // () => void\n} = useSurveyDesigner()\n```\n\n## 依赖\n\n- `@composy/survey-core` — 核心引擎\n- `vue-demi` — Vue 2/3 兼容层\n- `vue` ^2.7.0 || ^3.5.32 (peerDependency)\n\n## License\n\nMIT\n","readmeFilename":"README.md","_rev":"1-15b8acce3bffad51510e6164c8fd3695"}