add destroyScene on unbind event

dist/types/v-snow/Directive.d.ts

@@ -1,6 +1,2 @@
-import { DirectiveBinding } from "vue/types/options";
-declare const _default: {
-    inserted(el: HTMLElement, binding: DirectiveBinding): void;
-    update(el: HTMLElement, binding: DirectiveBinding): void;
-};
+declare const _default: import("vue/types/options").DirectiveOptions;
 export default _default;

dist/types/v-snow/Scene.d.ts

@@ -16,7 +16,7 @@ export default class Scene {
     private checkConfig;
     private calcDensityByWidth;
     private buildScene;
-    private destroyScene;
+    destroyScene(): void;
     private generateFlakes;
     private loadImage;
     private checkImages;

package.json

@@ -3,12 +3,11 @@
   "description": "Snowfall effect for Vue js",
   "main": "dist/v-snow.min.js",
   "files": [
-    "dist/v-snow.js",
     "dist/v-snow.min.js",
     "dist/types/v-snow"
   ],
   "typings": "dist/types/v-snow/index.d.ts",
-  "version": "1.0.6",
+  "version": "1.0.8",
   "author": "Alexander Burkov <[email protected]>",
   "keywords": [
     "snow",

src/v-snow/Component.vue

@@ -24,7 +24,10 @@ export default Vue.extend({
     opacity: Number,
     images: Array as PropType<string[]>,
     zIndex: String,
-    show: Boolean
+    show: {
+      type: Boolean,
+      default: true
+    }
   },
   data(): State {
     return {

src/v-snow/Directive.ts

@@ -1,16 +1,20 @@
 import { DirectiveBinding } from "vue/types/options";
+import { DirectiveOptions } from "vue/types/umd";
 import Scene from "./Scene";
 
-const statefulDirective = () => {
-  let scene: Scene;
+const statefulDirective = (): DirectiveOptions => {
+  let scene: Scene | null;
   return {
     inserted(el: HTMLElement, binding: DirectiveBinding) {
       scene = new Scene(el, binding.value);
       scene.start();
     },
     update(el: HTMLElement, binding: DirectiveBinding) {
-      scene.updateConfig(binding.value);
-      scene.start();
+      scene?.updateConfig(binding.value);
+      scene?.start();
+    },
+    unbind() {
+      scene?.destroyScene();
     }
   };
 };

src/v-snow/Scene.ts

@@ -65,6 +65,7 @@ export default class Scene {
     this.buildScene();
     this.start();
   }
+
   private checkConfig(config: SceneConfig) {
     if (config.density > 100 || config.density < 1) {
       throw new Error(
@@ -94,8 +95,11 @@ export default class Scene {
     this.initialised = true;
   }
 
-  private destroyScene(): void {
+  public destroyScene(): void {
     this.canvas?.remove();
+    this.RO.disconnect();
+    this.flakes = [];
+    this.isRun = false;
     this.initialised = false;
   }