feat: add blind watermark component

.changeset/weak-cups-promise.md

@@ -0,0 +1,5 @@
+---
+'@watermark-design/vue': minor
+---
+
+add blind watermark component in vue

.eslintrc.js

@@ -57,7 +57,7 @@ module.exports = {
     'no-unused-vars': [
       'error',
       {
-        argsIgnorePattern: '^_',
+        argsIgnorePattern: '^_|this',
         varsIgnorePattern: '^_',
       },
     ],

packages/vue/README.md

@@ -9,7 +9,7 @@
   <img alt="npm bundle size" src="https://img.shields.io/bundlephobia/minzip/@watermark-design/vue">
   <img alt="npm download week" src="https://img.shields.io/npm/dw/@watermark-design/vue">
   <img alt="GitHub" src="https://img.shields.io/github/license/watermark-design/watermark">
-  <a href="https://discord.gg/89xaVqpV"><img src="https://img.shields.io/discord/1143015541175496777" alt="Join the chat"></a>
+  <a href="https://discord.gg/V5msNXCE"><img src="https://img.shields.io/discord/1170204572254474300" alt="Join the chat"></a>
 </p>
 
 # `@watermark-design/vue`

packages/vue/package.json

@@ -67,7 +67,7 @@
     "@watermark-design/shared": "workspace:^",
     "lodash.debounce": "^4.0.8",
     "lodash.omit": "^4.5.0",
-    "nanoid": "^5.0.2",
+    "nanoid": "^5.0.3",
     "vue-demi": "^0.14.6"
   },
   "peerDependencies": {

packages/vue/src/blind/index.ts

@@ -0,0 +1,3 @@
+import blind from './src/blind.vue';
+
+export default blind;

packages/vue/src/blind/src/blind.vue

@@ -0,0 +1,62 @@
+<template>
+  <Teleport to="body" :disabled="!appendToBody" :key="key" v-if="key">
+    <div :style="watermarkWrapperStyle" ref="watermarkWrapperRef">
+      <slot name="default"></slot>
+      <div :style="watermarkStyle" v-if="modelValue"></div>
+    </div>
+  </Teleport>
+</template>
+
+<script lang="ts">
+  import { defineComponent, isVue2 } from 'vue-demi';
+  import Teleport from '../../teleport';
+  import watermarkMixin, { WatermarkMixinType } from '../../mixins/watermark.mixin';
+
+  export default defineComponent({
+    name: 'BlindWatermark',
+    directives: {},
+    mixins: [watermarkMixin as WatermarkMixinType],
+    ...(isVue2
+      ? {
+          components: {
+            Teleport,
+          },
+          model: {
+            prop: 'modelValue',
+            event: 'modelChange',
+          },
+        }
+      : null),
+    props: {
+      globalAlpha: {
+        type: Number,
+        default: 0.005,
+      },
+      mode: {
+        type: String,
+        default: 'blind',
+      },
+      modelValue: {
+        type: Boolean,
+        default: true,
+      },
+    },
+    emits: [isVue2 ? 'modelChange' : 'update:modelValue'],
+    data() {
+      return {};
+    },
+    computed: {},
+    watch: {
+      modelValue(value) {
+        if (value) {
+          this.handleObserver();
+        } else {
+          this.removeObserver();
+        }
+      },
+    },
+    created() {},
+    mounted() {},
+    methods: {},
+  });
+</script>

packages/vue/src/main.ts

@@ -1,10 +1,12 @@
 import type { App } from 'vue-demi';
 import watermark from './watermark';
+import blind from './blind';
 import teleport from './teleport';
 
 export default {
   install(app: App) {
     app.component(watermark.name, watermark);
+    app.component(blind.name, blind);
     app.component(teleport.name, teleport);
   },
 };