jenesius-vue-modal - npm Package Compare versions

Comparing version 1.4.7 to 1.5.0

dist/dts/utils/Modal.d.ts

@@ -6,11 +6,20 @@ /**
 import { GuardFunctionWithHandle } from "./types";
-export default class Modal {
+interface EventCallbacksStorage {
+    [name: string]: (data?: any) => any;
+}
+export interface ModalPublicInterface {
     id: number;
-    component: any;
-    params: any;
+    closed: ComputedRef<boolean>;
+    close: () => Promise<void>;
+}
+export default class Modal implements ModalPublicInterface {
+    id: number;
+    closed: ComputedRef;
+    protected component: any;
+    protected params: any;
     /**
-     * @description VueRef var. If modal was closed value is False
+     * @description VueRef var. If modal was closed value is TRUE
      * */
-    closed: ComputedRef;
-    static modalId: number;
+    protected static modalId: number;
+    eventCallbacks: EventCallbacksStorage;
     /**
@@ -37,2 +46,7 @@ * Создаёт объект управления модальным окном.
     get instance(): import("./types").ModalComponentInterface;
+    /**
+     * @description Event handler
+     * */
+    on(eventName: string, callback: (data?: any) => any): void;
 }
+export {};

dist/dts/utils/ModalError.d.ts

@@ -19,2 +19,3 @@ /**
     static ModalRouterIntegrationNotInitialized(): ModalError;
+    static ModalEventNameMustBeString(eventName: string): ModalError;
 }

dist/dts/utils/state.d.ts

@@ -15,5 +15,6 @@ /**
     id: number;
-    component: any;
-    params: any;
     closed: any;
+    eventCallbacks: {
+        [x: string]: (data?: any) => any;
+    };
     close: () => Promise<void>;
@@ -24,2 +25,3 @@ onclose: import("./types").GuardFunctionWithHandle;
     };
+    on: (eventName: string, callback: (data?: any) => any) => void;
 }[]>;
@@ -26,0 +28,0 @@ interface InstancesStorageInterface {

dist/jenesius-vue-modal.cjs.js

 /*!
-  * jenesius-vue-modal v1.4.7
-  * (c) 2021 Jenesius
+  * jenesius-vue-modal v1.5.0
+  * (c) 2022 Jenesius
   * @license MIT
@@ -125,2 +125,5 @@ */
     };
+    ModalError.ModalEventNameMustBeString = function (eventName) {
+        return new ModalError("Event name must be a string. Provided: " + eventName);
+    };
     return ModalError;
@@ -251,4 +254,4 @@ }(Error));
 function closeById(id) {
-    var indexFoRemove = modalQueue.value.findIndex(function (item) { return item.id === id; });
-    if (indexFoRemove === -1)
+    var indexRemoveElement = modalQueue.value.findIndex(function (item) { return item.id === id; });
+    if (indexRemoveElement === -1)
         return Promise.reject(ModalError.Undefined(id)); //Modal with id not found
@@ -258,3 +261,3 @@ var arr = guards.get(id, "close").map(function (guard) { return guardToPromiseFn(guard, id); });
         .then(function () {
-        modalQueue.value.splice(indexFoRemove, 1);
+        modalQueue.value.splice(indexRemoveElement, 1);
         delete state$1.instanceStorage[id];
@@ -294,6 +297,17 @@ guards.delete(id);
         var _this = this;
+        this.eventCallbacks = vue.reactive({});
         this.id = Modal.modalId++;
         this.component = vue.shallowRef(component);
         this.params = params;
-        this.closed = vue.computed(function () { return !modalQueue.value.includes(_this); });
+        /**
+         * БЛЯТЬ, ПОЧЕМУ ОНО ТАК?
+         * ОТВЕТ: ЭТОТ ЕБУЧИЙ ВЬЮ, ПРИ ДОБАВЛЕНИИ В modalQueue
+         * РАСКРЫВАЕТ COMPUTED(THIS.CLOSED) И КЛАДЁТ ТУДА ТУПО ЗНАЧЕНИЕ, А НЕ
+         * COMPUTED PROP {VALUE: BOOLEAN}
+         * ЧТО ЛОГИЧНО, НО ПО УЕБАНСКИ
+         *
+         * 10.02.2022 @ЖЕНЯ, КОТОРЫЙ ЕЩЁ ПЛОХО ЗНАЕТ TS.
+         *
+         * */
+        this.closed = vue.computed(function () { return !modalQueue.value.find(function (item) { return item.id === _this.id; }); });
         if (component.beforeModalClose)
@@ -328,2 +342,19 @@ guards.add(this.id, "close", component.beforeModalClose);
     });
+    /**
+     * @description Event handler
+     * */
+    Modal.prototype.on = function (eventName, callback) {
+        if (typeof eventName !== 'string')
+            throw ModalError.ModalEventNameMustBeString(eventName);
+        eventName = 'on' + eventName.charAt(0).toUpperCase() + eventName.slice(1);
+        // If eventName was added firstly
+        /*
+        if (!(eventName in this.eventCallbacks))
+            this.eventCallbacks[eventName] = []
+        */
+        this.eventCallbacks[eventName] = callback.bind(this.instance);
+    };
+    /**
+     * @description VueRef var. If modal was closed value is TRUE
+     * */
     Modal.modalId = 0;
@@ -387,2 +418,4 @@ return Modal;
 			id    : Number, // uniq identifier of modals
+
+            modal: Object // TEST
         },
@@ -413,2 +446,5 @@ setup(props){
 				 */
+
+
+
 				vue.h(props.component, {
@@ -419,2 +455,3 @@ ...props.params,
 					ref: modalRef,
+                    ...props.modal.eventCallbacks
 				})
@@ -479,3 +516,11 @@ ])
 					default: () =>modalQueue.value.map(modalObject => {
-						return vue.h(script$1, {component: modalObject.component, params: modalObject.params, key: modalObject.id, id: modalObject.id});
+						return vue.h(script$1, {
+                            component: modalObject.component,
+                            params: modalObject.params,
+                            key: modalObject.id,
+                            id: modalObject.id,
+
+                            modal: modalObject // TEST
+
+                        });
 					})
@@ -488,3 +533,3 @@ })
 
-var css_248z = "\n.modal-list-enter-active,\r\n    .modal-list-leave-active,\r\n    .modal-list-enter-active .modal-item,\r\n    .modal-list-leave-active .modal-item\r\n    {\r\n        transition: all 0.2s ease;\n}\n.modal-list-enter-from,\r\n    .modal-list-leave-to{\r\n\t\topacity: 0 !important;\n}\n.modal-list-enter-from .modal-item,\r\n    .modal-list-leave-to   .modal-item{\r\n\t\ttransform: translateY(-60px);\n}\r\n    \r\n\r\n";
+var css_248z = "\n.modal-list-enter-active,\r\n    .modal-list-leave-active,\r\n    .modal-list-enter-active .modal-item,\r\n    .modal-list-leave-active .modal-item\r\n    {\r\n        transition: all 0.2s ease;\n}\n.modal-list-enter-from,\r\n    .modal-list-leave-to{\r\n\t\topacity: 0 !important;\n}\n.modal-list-enter-from .modal-item,\r\n    .modal-list-leave-to   .modal-item{\r\n\t\ttransform: translateY(-60px);\n}\r\n\r\n\r\n";
 styleInject(css_248z);
@@ -491,0 +536,0 @@

package.json

 {
   "name": "jenesius-vue-modal",
-  "version": "1.4.7",
+  "version": "1.5.0",
   "private": false,
@@ -5,0 +5,0 @@ "description": "Simple modal plugin for Vue3",

README.md

@@ -61,3 +61,4 @@ # Jenesius Vue Modal
 ```js
-const modal = await openModal(SomeVueComponent); // {id, close, onclose, closed, instance}
+const modal = await openModal(SomeVueComponent);
+// modal {id, close, onclose, closed, instance, on}
 ```
@@ -79,2 +80,20 @@
 
+## Handle events
+
+Using modalObject you can handle any events:
+```vue
+
+// Modal.vue
+<template>
+    <button @click = "emit('update', value)"></button>
+</template>
+```
+When we click on the button we can handle event using `modal.on(eventName, callback)`
+```js
+const modal = await openModal(Modal, {value: 123});
+modal.on('update', v => {
+    console.log(v); // 123
+})
+```
+
 ## Lifecycle Hooks
@@ -81,0 +100,0 @@

No alert changes

Improved metrics

Total package byte prevSize

45497

increased by6.38%

Lines of code

853

increased by7.03%

Number of lines in readme file

240

increased by8.6%

No dependency changes