{"_id":"@composy/watermark-vue","name":"@composy/watermark-vue","dist-tags":{"latest":"0.0.1"},"versions":{"0.0.1":{"name":"@composy/watermark-vue","version":"0.0.1","description":"Vue components for @composy/watermark-core","keywords":["watermark","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"},"./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"},"./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"},"./directives":{"types":"./es/directives/index.d.ts","import":"./es/directives/index.js","require":"./lib/directives/index.cjs","default":"./es/directives/index.js"},"./directives/*":{"types":"./es/directives/*.d.ts","import":"./es/directives/*.js","require":"./lib/directives/*.cjs","default":"./es/directives/*.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 && node --experimental-strip-types ../../../../scripts/index.ts workspace:normalize-package-output --cwd .. --target vue","dev":"vite build --watch","lint":"eslint \"eslint.config.js\" \"src/**/*.{ts,tsx,vue}\" --cache","lint:check":"eslint \"eslint.config.js\" \"src/**/*.{ts,tsx,vue}\" --cache --max-warnings 0","lint:fix":"eslint \"eslint.config.js\" \"src/**/*.{ts,tsx,vue}\" --cache --fix","type-check":"vue-tsc -p tsconfig.json --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/watermark-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/style.css","typings":"./es/index.d.ts","browser":"./dist/index.js","_id":"@composy/watermark-vue@0.0.1","_nodeVersion":"23.11.1","_npmVersion":"10.9.2","dist":{"integrity":"sha512-khjdSHibKddrcGVCd5uo0+vzPrqfQ/2UM28Y25h7R2cyzZ99+dVHo453p4lzmC9G0grJWII16w4iOnZDYXl9Gw==","shasum":"637f2e1efe6813520c50aff6e8a8e76fae1b0246","tarball":"https://registry.npmjs.org/@composy/watermark-vue/-/watermark-vue-0.0.1.tgz","fileCount":128,"unpackedSize":265241,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIA0Tkpd4bs8zcXL7CTvHoEU+iVTP2A4EFKI4xwi6dJotAiEAm44Y5u+1fxooS0CO8ZSRuLJxlKJ9nHIc41z/EY4X0tg="}]},"_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/watermark-vue_0.0.1_1786949365858_0.4791574789655295"},"_hasShrinkwrap":false}},"time":{"created":"2026-08-17T06:49:25.671Z","0.0.1":"2026-08-17T06:49:26.000Z","modified":"2026-08-17T06:49:26.211Z"},"maintainers":[{"name":"swimly","email":"979741120@qq.com"}],"description":"Vue components for @composy/watermark-core","keywords":["watermark","vue","vue3","vue2","component"],"author":{"name":"LDesign Team"},"license":"MIT","readme":"# @composy/watermark-vue\n\nVue adapter for `@composy/watermark-core`. This package does not duplicate core rendering or anti-tamper logic; it wraps the core `WatermarkManager` and `WatermarkService` as a Vue component, composable, directive, and plugin.\n\n## Features\n\n- `<Watermark />` component with slot content.\n- `useWatermark()` composable for lifecycle-bound manager creation.\n- `v-watermark` directive for direct element binding.\n- `createWatermarkVuePlugin()` for normal Vue apps.\n- `createWatermarkPlugin()` for engine-style integration.\n- Global `$watermark` property backed by core `WatermarkService`.\n\n## Usage\n\n### Component\n\n```vue\n<script setup lang=\"ts\">\nimport { Watermark } from '@composy/watermark-vue';\n</script>\n\n<template>\n  <Watermark\n    content=\"Confidential\"\n    mode=\"interval\"\n    :anti-tamper=\"true\"\n    :style-vars=\"{ '--ldesign-watermark-opacity': '0.68' }\"\n  >\n    <main>Business content</main>\n  </Watermark>\n</template>\n```\n\n### Composable\n\n```ts\nimport { ref } from 'vue';\nimport { useWatermark } from '@composy/watermark-vue';\n\nconst container = ref<HTMLElement | null>(null);\nconst watermark = useWatermark({\n  container,\n  options: {\n    content: 'Project Alpha',\n    fontColor: 'var(--ld-text-muted, var(--color-gray-500))',\n    fontFamily: 'var(--size-font-family)',\n  },\n});\n\nawait watermark.update({ mode: 'fullscreen' });\nconsole.info(watermark.getSnapshot());\n```\n\n### Directive\n\n```vue\n<template>\n  <section v-watermark=\"{ content: 'Internal', rotate: -22 }\">\n    Content\n  </section>\n</template>\n```\n\n### Plugin\n\n```ts\nimport { createApp } from 'vue';\nimport { createWatermarkVuePlugin } from '@composy/watermark-vue';\n\nconst app = createApp(App);\n\napp.use(createWatermarkVuePlugin({\n  defaultOptions: {\n    content: 'LDesign',\n  },\n  registerComponent: true,\n  registerDirective: true,\n}));\n```\n\n## Styling Contract\n\nThe wrapper host uses `ldesign-watermark-host` and `ldesign-watermark-host--fullscreen`. The actual watermark DOM is created by core and uses the standard `ldesign-watermark*` BEM classes.\n\nAll component styles are token-driven:\n\n```css\n.ldesign-watermark-host {\n  color: var(--ldesign-watermark-host-color, var(--ld-text-primary, var(--color-gray-900)));\n  min-height: var(--ldesign-watermark-host-min-height, var(--size-0));\n}\n```\n\nUse `styleVars` for local watermark overrides instead of writing inline DOM styles directly.\n\n## Build Outputs\n\n`pnpm -C libraries/watermark/packages/vue run build` generates and normalizes:\n\n- `dist/index.js`\n- `dist/index.min.js`\n- `dist/index.css`\n- `es/**/*`\n- `esm/**/*`\n- `lib/**/*`\n\nValidate the package output with:\n\n```bash\nnode libraries/watermark/scripts/check-package-outputs.mjs vue\n```\n\n## Verification\n\n```bash\npnpm -C libraries/watermark/packages/vue run lint:check\npnpm -C libraries/watermark/packages/vue run type-check\npnpm -C libraries/watermark/packages/vue run test:run\npnpm -C libraries/watermark/packages/vue run build\n```\n\n## License\n\nMIT\n","readmeFilename":"README.md","_rev":"1-03d42029cc8a23d6048e55750157b283"}