jenesius-vue-modal - npm Package Compare versions

Comparing version 1.6.1 to 1.7.0

dist/dts/utils/Modal.d.ts

@@ -6,7 +6,6 @@ /**
 import { GuardFunction } from "./types";
-import EventEmitter from "jenesius-event-emitter";
 export interface ModalOptions {
     backgroundClose?: boolean;
 }
-export default class Modal extends EventEmitter {
+export default class Modal {
     /**
@@ -16,3 +15,3 @@ * @description Unique id of each modal window.
     id: number;
-    events: {};
+    events: Record<string, EventCallback[]>;
     /**
@@ -57,2 +56,7 @@ * @description Computed value. True - when the modal was closed.
     get instance(): import("./types").ModalComponentInterface;
+    /**
+     * @description Method for handle default events from VueComponent.
+     * */
+    on(eventName: string, callback: EventCallback): () => void;
 }
+export declare type EventCallback = (v: any) => any;

dist/dts/utils/state.d.ts

@@ -14,3 +14,3 @@ /**
     id: number;
-    events: {};
+    events: Record<string, import("./Modal").EventCallback[]>;
     closed: any;
@@ -143,6 +143,3 @@ component: import("vue").FunctionalComponent<any, any> | {
     readonly instance: ModalComponentInterface;
-    on: (name: string, callback: import("jenesius-event-emitter").Callback) => () => void;
-    emit: (name: string, data?: any) => void;
-    off: (name: string, callback: import("jenesius-event-emitter").Callback) => void;
-    cleanEvents: () => void;
+    on: (eventName: string, callback: import("./Modal").EventCallback) => () => void;
 }[]>;
@@ -149,0 +146,0 @@ interface InstancesStorageInterface {

dist/jenesius-vue-modal.cjs.js

 /*!
-  * jenesius-vue-modal v1.6.1
+  * jenesius-vue-modal v1.7.0
   * (c) 2022 Jenesius
@@ -13,12 +13,2 @@ * @license MIT
 var vue = require('vue');
-
-var EventEmitter = require('jenesius-event-emitter');
-
-function _interopDefaultLegacy(e) {
-  return e && typeof e === 'object' && 'default' in e ? e : {
-    'default': e
-  };
-}
-
-var EventEmitter__default = /*#__PURE__*/_interopDefaultLegacy(EventEmitter);
 /*! *****************************************************************************
@@ -482,4 +472,3 @@ Copyright (c) Microsoft Corporation.
 /** @class */
-function (_super) {
-  __extends(Modal, _super);
+function () {
   /**
@@ -494,8 +483,6 @@ * Создаёт объект управления модальным окном.
    * */
-
-
   function Modal(component, props, options) {
-    var _this = _super.call(this) || this;
+    var _this = this;
 
-    _this.events = vue.reactive({});
+    this.events = vue.reactive({});
     /**
@@ -505,6 +492,6 @@ * @description Click on the background will close modal windows.
 
-    _this.backgroundClose = true;
-    _this.id = Modal.modalId++;
-    _this.component = component;
-    _this.props = vue.ref(props);
+    this.backgroundClose = true;
+    this.id = Modal.modalId++;
+    this.component = component;
+    this.props = vue.ref(props);
     /**
@@ -530,3 +517,3 @@ * БЛЯТЬ, ПОЧЕМУ ОНО ТАК?
 
-    _this.closed = vue.computed(function () {
+    this.closed = vue.computed(function () {
       return !modalQueue.value.includes(_this);
@@ -540,6 +527,5 @@ });
 
-    if (component.beforeModalClose) guards.add(_this.id, "close", component.beforeModalClose);
+    if (component.beforeModalClose) guards.add(this.id, "close", component.beforeModalClose);
     var dtoOptions = DtoModalOptions(options);
-    _this.backgroundClose = dtoOptions.backgroundClose;
-    return _this;
+    this.backgroundClose = dtoOptions.backgroundClose;
   }
@@ -575,5 +561,23 @@ /**
   });
+  /**
+   * @description Method for handle default events from VueComponent.
+   * */
+
+  Modal.prototype.on = function (eventName, callback) {
+    var _this = this;
+
+    if (!Array.isArray(this.events[eventName])) this.events[eventName] = [];
+    this.events[eventName].push(callback);
+    return function () {
+      var index = _this.events[eventName].indexOf(callback);
+
+      if (index === -1) return; // Callback not founded
+
+      _this.events[eventName].splice(index, 1);
+    };
+  };
+
   Modal.modalId = 0;
   return Modal;
-}(EventEmitter__default["default"]);
+}();
 /**
@@ -580,0 +584,0 @@ * Sync function for adding modal window.

package.json

 {
   "name": "jenesius-vue-modal",
-  "version": "1.6.1",
+  "version": "1.7.0",
   "private": false,
@@ -34,2 +34,3 @@ "description": "Simple modal plugin for Vue3",
     "@babel/preset-typescript": "^7.16.0",
+    "@rollup/plugin-babel": "^5.3.1",
     "@rollup/plugin-commonjs": "^21.0.1",
@@ -55,4 +56,3 @@ "@rollup/plugin-typescript": "^8.3.0",
     "vue-router": "^4.0.12",
-    "vuex": "^4.0.2",
-    "@rollup/plugin-babel": "^5.3.1"
+    "vuex": "^4.0.2"
   },
@@ -78,6 +78,3 @@ "browserslist": [
   "types": "dist/dts/index.d.ts",
-  "url": "https://github.com/Jenesius/vue-modal/issues",
-  "dependencies": {
-    "jenesius-event-emitter": "^1.0.4"
-  }
+  "url": "https://github.com/Jenesius/vue-modal/issues"
 }

README.md

@@ -25,4 +25,5 @@ # Jenesius Vue Modal
 
-For add modals in your project you need to put the modal's container where in the App(root) component:
 
+The main condition for library initialization is adding a **container** inside your App.vue file. Note that this container only needs to be **mounted once** in the main parent component. Opened **modals** will be shown inside this container.
+
 `App.vue`
@@ -29,0 +30,0 @@ ```vue

tests/modal-on.spec.ts

@@ -25,3 +25,19 @@ import {container, openModal} from "../plugin/index";
 	})
-	
+	test("Event should not be handled, after unsubscribe", async() => {
+		const wrap = await render(container);
+		let output = 0;
+
+		const modal = await openModal(ModalButton);
+
+		const off = modal.on('update', () => {
+			output++;
+		})
+		const button = await wrap.findByRole("button");
+		await fireEvent.click(button);
+		expect(output).toBe(1);
+		off();
+		await fireEvent.click(button);
+		expect(output).toBe(1);
+
+	})
 })

No alert changes

Improved metrics

Total package byte prevSize

95072

increased by0.71%

Dependency count

1

decreased by-50%

Lines of code

2305

increased by0.83%

Number of lines in readme file

240

increased by0.42%

Dependency changes

• - Removedjenesius-event-emitter@^1.0.4

• - Removedjenesius-event-emitter@1.0.4(transitive)