chore: lint

watermarkify · Apr 8, 2024 · f7711a0 · f7711a0
1 parent 982eedd
commit f7711a0
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 49 deletions.
diff --git a/README.md b/README.md
@@ -23,7 +23,7 @@ You can install `@watermarkify/vue-watermark` via npm or yarn:
 npm install @watermarkify/vue-watermark
 # or
 yarn add @watermarkify/vue-watermark
-# or 
+# or
 pnpm install @watermarkify/vue-watermark
 ```
 
@@ -77,4 +77,4 @@ Pass `watermarkOptions` to `options` and define your slot.
 
 ## Contributing
 
-Contributions are welcome! To contribute to `@watermarkify/vue-watermark`, please fork the repository and submit a pull request.
+Contributions are welcome! To contribute to `@watermarkify/vue-watermark`, please fork the repository and submit a pull request.
diff --git a/playground/README.md b/playground/README.md
@@ -10,4 +10,4 @@ then browse
 
 ```
 http://localhost:3000/
-```
+```
diff --git a/playground/src/components/MyComponent.vue b/playground/src/components/MyComponent.vue
@@ -24,7 +24,9 @@ const watermarkOptions = ref({
   <main class="flex flex-col lg:flex-row flex-1 items-stretch">
     <section class="flex flex-2 lg:flex-1 bg-watermarkify-500">
       <Watermark :options="watermarkOptions" class="watermark flex flex-1">
-        <div class="p-4 h-full">This is the content of the slot.</div>
+        <div class="p-4 h-full">
+          This is the content of the slot.
+        </div>
       </Watermark>
     </section>
 
@@ -35,52 +37,52 @@ const watermarkOptions = ref({
         <div>
           <label for="content" class="block mb-1 lg:mb-2">content</label>
           <input
-            class="shadow appearance-none border w-full py-2 px-3 text-gray-400 leading-tight focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-transparent"
             id="content"
+            v-model="watermarkOptions.content"
+            class="shadow appearance-none border w-full py-2 px-3 text-gray-400 leading-tight focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-transparent"
             type="text"
             placeholder="Enter watermark content"
-            v-model="watermarkOptions.content"
-          />
+          >
         </div>
         <div>
           <label for="width" class="block mb-1 lg:mb-2">width</label>
           <input
-            class="shadow appearance-none border w-full py-2 px-3 text-gray-400 leading-tight focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-transparent"
             id="width"
+            v-model="watermarkOptions.width"
+            class="shadow appearance-none border w-full py-2 px-3 text-gray-400 leading-tight focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-transparent"
             type="number"
             placeholder="Enter width"
-            v-model="watermarkOptions.width"
-          />
+          >
         </div>
         <div>
           <label for="height" class="block mb-1 lg:mb-2">height</label>
           <input
-            class="shadow appearance-none border w-full py-2 px-3 text-gray-400 leading-tight focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-transparent"
             id="height"
+            v-model="watermarkOptions.height"
+            class="shadow appearance-none border w-full py-2 px-3 text-gray-400 leading-tight focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-transparent"
             type="number"
             placeholder="Enter height"
-            v-model="watermarkOptions.height"
-          />
+          >
         </div>
         <div class="md:justify-between">
           <div class="mb-4 md:mb-0">
             <label for="gap" class="block mb-1 lg:mb-2"> [gapX, gapY] </label>
             <div class="flex">
               <input
-                class="shadow appearance-none border w-1/2 py-2 px-3 text-gray-400 leading-tight focus:outline-none focus:shadow-outline"
                 id="gap_x"
+                v-model="watermarkOptions.gap[0]"
+                class="shadow appearance-none border w-1/2 py-2 px-3 text-gray-400 leading-tight focus:outline-none focus:shadow-outline"
                 type="number"
                 placeholder="Enter Gap X"
-                v-model="watermarkOptions.gap[0]"
-              />
-              <span class="mx-2 flex items-center"></span>
+              >
+              <span class="mx-2 flex items-center" />
               <input
-                class="shadow appearance-none border w-1/2 py-2 px-3 text-gray-400 leading-tight focus:outline-none focus:shadow-outline"
                 id="gap_y"
+                v-model="watermarkOptions.gap[1]"
+                class="shadow appearance-none border w-1/2 py-2 px-3 text-gray-400 leading-tight focus:outline-none focus:shadow-outline"
                 type="number"
                 placeholder="Enter Gap Y"
-                v-model="watermarkOptions.gap[1]"
-              />
+              >
             </div>
           </div>
         </div>
@@ -89,97 +91,97 @@ const watermarkOptions = ref({
             <label for="offset" class="block mb-1 lg:mb-2"> [offsetX, offsetY] </label>
             <div class="flex">
               <input
-                class="shadow appearance-none border w-1/2 py-2 px-3 text-gray-400 leading-tight focus:outline-none focus:shadow-outline"
                 id="offset_x"
+                v-model="watermarkOptions.offset[0]"
+                class="shadow appearance-none border w-1/2 py-2 px-3 text-gray-400 leading-tight focus:outline-none focus:shadow-outline"
                 type="number"
                 placeholder="Enter offset X"
-                v-model="watermarkOptions.offset[0]"
-              />
-              <span class="mx-2 flex items-center"></span>
+              >
+              <span class="mx-2 flex items-center" />
               <input
-                class="shadow appearance-none border w-1/2 py-2 px-3 text-gray-400 leading-tight focus:outline-none focus:shadow-outline"
                 id="offset_y"
+                v-model="watermarkOptions.offset[1]"
+                class="shadow appearance-none border w-1/2 py-2 px-3 text-gray-400 leading-tight focus:outline-none focus:shadow-outline"
                 type="number"
                 placeholder="Enter offset Y"
-                v-model="watermarkOptions.offset[1]"
-              />
+              >
             </div>
           </div>
         </div>
         <div>
           <label for="zIndex" class="block mb-1 lg:mb-2">zIndex</label>
           <input
-            class="shadow appearance-none border w-full py-2 px-3 text-gray-400 leading-tight focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-transparent"
             id="zIndex"
+            v-model="watermarkOptions.zIndex"
+            class="shadow appearance-none border w-full py-2 px-3 text-gray-400 leading-tight focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-transparent"
             type="number"
             placeholder="Enter zIndex"
-            v-model="watermarkOptions.zIndex"
-          />
+          >
         </div>
         <div>
           <label for="rotate" class="block mb-1 lg:mb-2">rotate</label>
           <input
-            class="shadow appearance-none border w-full py-2 px-3 text-gray-400 leading-tight focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-transparent"
             id="rotate"
+            v-model="watermarkOptions.rotate"
+            class="shadow appearance-none border w-full py-2 px-3 text-gray-400 leading-tight focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-transparent"
             type="number"
             min="-180"
             max="180"
             placeholder="Enter rotate"
-            v-model="watermarkOptions.rotate"
-          />
+          >
         </div>
 
         <div>
           <label for="color" class="block mb-1 lg:mb-2">fontColor</label>
           <input
-            type="text"
             id="color"
+            v-model="watermarkOptions.font.color"
+            type="text"
             name="color"
             class="shadow appearance-none border w-full py-2 px-3 text-gray-400 leading-tight focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-transparent"
             placeholder="Enter a color value"
-            v-model="watermarkOptions.font.color"
-          />
+          >
         </div>
         <div>
           <label for="size" class="block mb-1 lg:mb-2">fontSize</label>
           <input
-            type="number"
             id="size"
+            v-model="watermarkOptions.font.fontSize"
+            type="number"
             name="size"
             class="shadow appearance-none border w-full py-2 px-3 text-gray-400 leading-tight focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-transparent"
             placeholder="Enter a font size"
-            v-model="watermarkOptions.font.fontSize"
-          />
+          >
         </div>
         <div>
           <label for="weight" class="block mb-1 lg:mb-2">fontWeight</label>
           <input
             id="weight"
+            v-model="watermarkOptions.font.fontWeight"
             name="weight"
             class="shadow appearance-none border w-full py-2 px-3 text-gray-400 leading-tight focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-transparent"
             placeholder="Enter a font weight"
-            v-model="watermarkOptions.font.fontWeight"
-          />
+          >
         </div>
         <div>
           <label for="style" class="block mb-1 lg:mb-2">fontStyle</label>
           <input
             id="style"
+            v-model="watermarkOptions.font.fontStyle"
             name="style"
             class="shadow appearance-none border w-full py-2 px-3 text-gray-400 leading-tight focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-transparent"
             placeholder="Enter a font style"
-            v-model="watermarkOptions.font.fontStyle"
-          />
+          >
         </div>
         <div>
           <label for="family" class="block mb-1 lg:mb-2">fontFamily</label>
           <input
             id="family"
+            v-model="watermarkOptions.font.fontFamily"
             name="family"
             class="shadow appearance-none border w-full py-2 px-3 text-gray-400 leading-tight focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-transparent"
             placeholder="Enter a font family"
-            v-model="watermarkOptions.font.fontFamily"
-          />
+          >
         </div>
       </div>
     </section>

diff --git a/playground/src/components/Navbar.vue b/playground/src/components/Navbar.vue
@@ -4,7 +4,9 @@
   <nav class="bg-blue-500">
     <div class="px-4">
       <div class="flex items-center justify-between h-16">
-        <div class="flex-shrink-0 text-white font-bold">@watermarkify/vue-watermark</div>
+        <div class="flex-shrink-0 text-white font-bold">
+          @watermarkify/vue-watermark
+        </div>
         <div>
           <a
             href="https://github.com/watermarkify/vue-watermark"

diff --git a/tsconfig.json b/tsconfig.json
@@ -1,19 +1,19 @@
 {
   "compilerOptions": {
     "target": "esnext",
-    "lib": ["esnext", "DOM"],
     "jsx": "preserve",
+    "lib": ["esnext", "DOM"],
+    "baseUrl": ".",
     "module": "esnext",
     "moduleResolution": "node",
-    "baseUrl": ".",
     "paths": {
       "@watermarkify/vue-watermark": ["./src/*"]
     },
     "resolveJsonModule": true,
     "allowJs": true,
-    "esModuleInterop": true,
     "strict": true,
     "strictNullChecks": true,
+    "esModuleInterop": true,
     "skipDefaultLibCheck": true,
     "skipLibCheck": true
   },
-Original file line number
+Diff line change
@@ Expand Up / @@ -10,4 +10,4 @@ then browse @@
     ```
     http://localhost:3000/
-    ```
+    ```