Updated readme

- Fixed some typescript errors

Author: DapperBenji

README.md

@@ -1,6 +1,6 @@
 # vue3-sticky-directive
 
-vue3-sticky-directive is a powerful vue 3 directive make element sticky.
+Vue3-sticky-directive is a powerful Vue 3 directive make element sticky. This is an implementation of the [vue-sticky-directive](https://github.com/mehwww/vue-sticky-directive) package for Vue 2.
 
 # Install
 
@@ -18,13 +18,11 @@ const app = createApp({
 app.use(Sticky)
 app.mount('#app')
 
-Vue.use(Sticky)
-
 ```
 
 # Usage
 
-Use `v-sticky` directive to enable element postion sticky, and use `sticky-*` attributes to define its options. Sticky element will find its nearest element with `sticky-container` attribute or its parent node if faild as the releative element.
+Use `v-sticky` directive to enable element position sticky, and use `sticky-*` attributes to define its options. Sticky element will find its nearest element with `sticky-container` attribute or its parent node if failed as the relative element.
 
 ```HTML
 <div sticky-container>
@@ -35,6 +33,7 @@ Use `v-sticky` directive to enable element postion sticky, and use `sticky-*` at
 ```
 
 # Options
+
 * `sticky-offset` - set sticky offset, it support a vm variable name or a js expression like `{top: 10, bottom: 20}`
   * `top`_(number)_ - set the top breakpoint (default: `0`)
   * `bottom`_(number)_ - set the bottom breakpoint (default: `0`)
@@ -51,7 +50,7 @@ Use `v-sticky` directive to enable element postion sticky, and use `sticky-*` at
 }
 ```
 
-An expression that evaluates to false set on `v-sticky` can be used to disable stickiness condtionally.
+An expression that evaluates to false set on `v-sticky` can be used to disable stickiness conditionally.
 
 ```HTML
 <div sticky-container>
@@ -61,11 +60,23 @@ An expression that evaluates to false set on `v-sticky` can be used to disable s
 </div>
 ```
 ```JavaScript
-export defaults {
-  data () {
+import { defineComponent, ref } from 'vue'
+
+// Options API
+defineComponent({
+  data() {
     shouldStick: false
   }
-}
+})
+
+// or with the Composition API
+defineComponent({
+  setup() {
+    const shouldStick = ref(false)
+
+    return { shouldStick }
+  }
+})
 ```
 
 # License

package.json

@@ -1,19 +1,25 @@
 {
   "name": "vue3-sticky-directive",
+  "author": "DapperBenji <[email protected]>",
   "version": "0.0.1",
   "type": "module",
   "files": [
     "dist"
   ],
   "exports": {
-    ".":  "./dist/index.es.js"
+    ".": "./dist/index.es.js"
   },
   "license": "MIT",
   "types": "./index.d.ts",
   "repository": {
     "type": "git",
     "url": "https://github.com/DapperBenji/vue3-sticky-directive.git"
   },
+  "keywords": [
+    "vue",
+    "sticky",
+    "directive"
+  ],
   "scripts": {
     "dev": "vite",
     "build": "vue-tsc --noEmit && vite build",

src/sticky.ts

@@ -1,6 +1,8 @@
 import { ComponentPublicInstance } from 'vue'
 import { State, LastState, Options, ElementStyle, ElementClassName } from './types'
 
+type stickySide = 'top' | 'bottom' | 'both'
+
 const namespace = '@@vue3-sticky-directive'
 const events = [
    'resize',
@@ -14,14 +16,11 @@ const events = [
 
 const batchStyle = (el: HTMLElement, style: ElementStyle = {}, className: ElementClassName = {}): void => {
    for (let k in style) {
-      /* @ts-ignore */
       el.style[k] = style[k]
    }
    for (let k in className) {
-      /* @ts-ignore */
       if (className[k] && !el.classList.contains(k)) {
          el.classList.add(k)
-         /* @ts-ignore */
       } else if (!className[k] && el.classList.contains(k)) {
          el.classList.remove(k)
       }
@@ -31,7 +30,7 @@ const batchStyle = (el: HTMLElement, style: ElementStyle = {}, className: Elemen
 class Sticky {
    el: HTMLElement
    vm: any// ComponentPublicInstance
-   unsubscribers: Array<()=> void>
+   unSubscribers: Array<()=> void>
    isPending: boolean
    state: State
    lastState: LastState
@@ -42,7 +41,7 @@ class Sticky {
    constructor (el: HTMLElement, vm: ComponentPublicInstance) {
       this.el = el
       this.vm = vm
-      this.unsubscribers = []
+      this.unSubscribers = []
       this.isPending = false
       this.state = {
          isTopSticky: null,
@@ -59,7 +58,7 @@ class Sticky {
       }
 
       const offset = this.getAttribute('sticky-offset') || {}
-      const side: string = this.getAttribute('sticky-side') || 'top'
+      const side: stickySide = this.getAttribute('sticky-side') || 'top'
       const zIndex: string = this.getAttribute('sticky-z-index') || '10'
       const onStick = this.getAttribute('on-stick') || null
 
@@ -74,7 +73,7 @@ class Sticky {
    }
 
    doBind(): void {
-      if (this.unsubscribers.length > 0) {
+      if (this.unSubscribers.length > 0) {
          return
       }
 
@@ -85,8 +84,8 @@ class Sticky {
          el.parentElement!.insertBefore(this.placeholderEl, el)
          events.forEach(event => {
             const fn = this.update.bind(this)
-            this.unsubscribers.push(() => window.removeEventListener(event, fn))
-            this.unsubscribers.push(() =>
+            this.unSubscribers.push(() => window.removeEventListener(event, fn))
+            this.unSubscribers.push(() =>
                this.containerEl!.removeEventListener(event, fn)
             )
             window.addEventListener(event, fn, { passive: true })
@@ -96,8 +95,8 @@ class Sticky {
    }
 
    doUnbind(): void {
-      this.unsubscribers.forEach(fn => fn())
-      this.unsubscribers = []
+      this.unSubscribers.forEach(fn => fn())
+      this.unSubscribers = []
       this.resetElement()
    }
 

tsconfig.json

@@ -11,6 +11,7 @@
     "isolatedModules": true,
     "esModuleInterop": true,
     "lib": ["ESNext", "DOM"],
+    "suppressImplicitAnyIndexErrors": true,
     "skipLibCheck": true
   },
   "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],