jenesius-vue-modal - npm Package Compare versions

Comparing version 1.8.2 to 1.9.0

dist/dts/index.d.ts

@@ -12,4 +12,5 @@ import closeModal from "./methods/closeModal";
 import Modal from "./utils/Modal";
+import getComponentFromStore from "./methods/get-component-from-store";
 import WidgetModalContainer from "./components/WidgetModalContainer.vue";
 import useModalRouter from "./routerIntegration";
-export { Modal, closeModal, popModal, pushModal, openModal, promptModal, modalQueue, config, WidgetModalContainer as container, onBeforeModalClose, useModalRouter, getCurrentModal, closeById };
+export { Modal, closeModal, popModal, pushModal, openModal, promptModal, modalQueue, config, WidgetModalContainer as container, onBeforeModalClose, useModalRouter, getCurrentModal, closeById, getComponentFromStore };

dist/dts/methods/addModal.d.ts

 import Modal, { ModalOptions } from "../utils/Modal";
+import { Component } from "vue";
 /**
@@ -8,2 +9,2 @@ * Sync function for adding modal window.
  * */
-export default function _addModal(component: any, params: any, options: Partial<ModalOptions>): Modal;
+export default function _addModal(component: string | Component, params: any, options: Partial<ModalOptions>): Modal;

dist/dts/methods/openModal.d.ts

 import Modal, { ModalOptions } from "../utils/Modal";
+import { WrapComponent } from "../types/types";
 /**
@@ -10,3 +11,3 @@ * @description OpenModal that was provided as component.
  * @return {Promise<Modal>} ModalObject
- * */
-export default function openModal(component: any, props?: any, options?: Partial<ModalOptions>): Promise<Modal>;
+ */
+export default function openModal<P extends WrapComponent>(component: P | string, props?: any, options?: Partial<ModalOptions>): Promise<Modal>;

dist/dts/methods/prompt-modal.d.ts

@@ -0,5 +1,8 @@
+import { ModalOptions } from "../utils/Modal";
+import { WrapComponent } from "../types/types";
 /**
  * @description Method push modalComponent with provided options and then wait until current component will trigger event
  * Modal.EVENT_PROMPT. After triggering will close the modal window and return provided data to event.
+ * @warning In new version I will change declaration of current method. Type declaration will be added for returned value.
  */
-export default function promptModal<T>(component: any, options?: any): Promise<T>;
+export default function promptModal<P extends WrapComponent>(component: P | string, props?: any, options?: Partial<ModalOptions>): Promise<unknown>;

dist/dts/methods/pushModal.d.ts

 import Modal, { ModalOptions } from "../utils/Modal";
+import { WrapComponent } from "../types/types";
 /**
  * @description Method push modal to queue. Using this method you can open multiple windows. For closing use popModal
  * */
-export default function pushModal(component: any, props?: any, options?: Partial<ModalOptions>): Promise<Modal>;
+export default function pushModal<P extends WrapComponent>(component: P | string, props?: any, options?: Partial<ModalOptions>): Promise<Modal>;

dist/dts/utils/config.d.ts

@@ -1,2 +0,4 @@
-export declare const configuration: {
+import { Component } from "vue";
+export declare const configuration: ConfigInterface;
+export interface ConfigInterface {
     scrollLock: boolean;
@@ -6,8 +8,3 @@ animation: string;
     escClose: boolean;
-};
-export interface ConfigInterface {
-    scrollLock?: boolean;
-    animation?: string;
-    backgroundClose?: boolean;
-    escClose?: boolean;
+    store: Record<string, Component>;
 }
@@ -22,2 +19,2 @@ /**
  * */
-export declare function config(options: ConfigInterface): void;
+export declare function config(options: Partial<ConfigInterface>): void;

dist/dts/utils/ModalError.d.ts

@@ -21,2 +21,3 @@ /**
     static ModalEventNameMustBeString(eventName: string): ModalError;
+    static ModalNotExistsInStore(modalName: string): ModalError;
 }

dist/jenesius-vue-modal.cjs.js

 /*!
-  * jenesius-vue-modal v1.8.2
-  * (c) 2022 Jenesius
+  * jenesius-vue-modal v1.9.0
+  * (c) 2023 Jenesius
   * @license MIT
@@ -268,2 +268,6 @@ */
 
+  ModalError.ModalNotExistsInStore = function (modalName) {
+    return new ModalError("Provided name(".concat(modalName, ") don't exist in the store. Has the given name been added to the store?"));
+  };
+
   return ModalError;
@@ -280,4 +284,4 @@ }(Error);
   backgroundClose: true,
-  escClose: true // Closing on press ESC key
-
+  escClose: true,
+  store: {}
 };
@@ -610,3 +614,10 @@ /**
 function _addModal(component, params, options) {
-  if (!state$1.initialized) throw ModalError.NotInitialized();
+  if (!state$1.initialized) throw ModalError.NotInitialized(); // If component is string. In this case we get the component from store.
+
+  if (typeof component === "string") {
+    var refComponent = getComponentFromStore(component);
+    if (!refComponent) throw ModalError.ModalNotExistsInStore(component);
+    component = refComponent;
+  }
+
   if (!component) throw ModalError.ModalComponentNotProvided();
@@ -663,3 +674,3 @@ var modal = new Modal(component, params, options);
  * @return {Promise<Modal>} ModalObject
- * */
+ */
 
@@ -694,6 +705,11 @@
  * Modal.EVENT_PROMPT. After triggering will close the modal window and return provided data to event.
+ * @warning In new version I will change declaration of current method. Type declaration will be added for returned value.
  */
 
 
-function promptModal(component, options) {
+function promptModal(component, props, options) {
+  if (props === void 0) {
+    props = {};
+  }
+
   if (options === void 0) {
@@ -713,3 +729,3 @@ options = {};
           /*yield*/
-          , pushModal(component, options)];
+          , pushModal(component, props, options)];
 
@@ -746,3 +762,11 @@ case 1:
 }
+/**
+ * @description Method using for checking exist modal in store.
+ * */
 
+
+function getComponentFromStore(modalName) {
+  return configuration.store[modalName] || undefined;
+}
+
 function styleInject(css, ref) {
@@ -1180,2 +1204,3 @@ if (ref === void 0) ref = {};
 exports.container = WidgetModalContainer;
+exports.getComponentFromStore = getComponentFromStore;
 exports.getCurrentModal = getCurrentModal;
@@ -1182,0 +1207,0 @@ exports.modalQueue = modalQueue;

package.json

 {
   "name": "jenesius-vue-modal",
-  "version": "1.8.2",
+  "version": "1.9.0",
   "private": false,
@@ -8,3 +8,3 @@ "description": "Simple modal plugin for Vue3",
   "scripts": {
-    "serve": "vue-cli-service serve",
+    "serve": "set NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve",
     "build": "npm run rollup",
@@ -47,2 +47,3 @@ "lint": "vue-cli-service lint",
     "core-js": "^3.6.5",
+    "generate-changelog": "^1.8.0",
     "jenesius-vue-form": "^2.2.1",
@@ -49,0 +50,0 @@ "jest": "26.6.3",

README.md

@@ -83,2 +83,6 @@ # Jenesius Vue Modal
 
+## How to return value?
+
+Sometimes a modal needs to return a value. This case is described in detail in the [following article](https://modal.jenesius.com/guide/guide-returned-value).
+
 ## Handle events
@@ -85,0 +89,0 @@

tests/configuration.spec.ts

@@ -27,3 +27,5 @@ import {mount} from "@vue/test-utils";
 		
-		await openModal(ModalTitle);
+		await openModal(ModalTitle, {
+
+		});
 		
@@ -30,0 +32,0 @@ expect(modalQueue.value.length).toBe(1);

tests/init.spec.ts

@@ -12,2 +12,3 @@ /*eslint-disable*/
 import ModalTitle from "./components/modal-title.vue";
+import ModalError from "../plugin/utils/ModalError";
 
@@ -24,4 +25,6 @@ beforeEach(async () => {
 describe('Init', () => {
+	it('Run without container, must throw the error', async function () {
+		await expect(() => pushModal(ModalTitle)).rejects.toThrowError(ModalError.NotInitialized());
+	});
 
-
   it ("Initialized", async () => {
@@ -197,2 +200,4 @@ await mount(container);
 
+
+
 })

tests/IntegrationRouter/router.spec.ts

@@ -124,16 +124,15 @@ import {mount} from "@vue/test-utils";
 	it("Back", async () => {
+		/**
+		 * Shallow: create and test component only (no children)
+		 * Mount: same as shallow but mounts with children and parent/host component, allows lifecycle methods
+		 * Render: outputs the html given by the component, including children
+		 * */
 		const wrapper = await render(App, {global: {plugins: [router]}})
-		//console.log("Start", router.currentRoute.value.path);
 		await router.push("/users/3");
 
 		await wait();
-		// console.log(".", router.currentRoute.value.path);
 
 		expect(wrapper.container.textContent).toBe("user-3");
-
-		await router.back()
-		await wait();
-
-		// console.log("..", router.currentRoute.value.path);
-
+		await router.back();
+		await wait(100);
 		expect(wrapper.container.textContent).toBe("Test");
@@ -140,0 +139,0 @@ })

tests/modal-props.spec.ts

 import {mount} from "@vue/test-utils";
-import {container, modalQueue, openModal} from "../plugin/index";
+import {container, modalQueue, openModal, pushModal} from "../plugin/index";
 import ModalTitle from "./components/modal-title.vue"
@@ -24,8 +24,25 @@ import {computed, reactive, ref} from "vue";
 		const title = "Text"
-		const modal = await openModal(ModalTitle, {title})
-		
+		const modal = await openModal(ModalTitle, {title});
+
 		expect(modal.instance.title).toBe(title)
 	})
-	
 	/**
+	 * Проверка на передачу простых аргументов в модальное окно
+	 * */
+	test('Simple props with push', async () => {
+		const title = "Text"
+		const modal = await pushModal(ModalTitle, {title});
+
+		expect(modal.instance.title).toBe(title)
+	})
+	/**
+	 * Проверка на объект целиком
+	 * */
+	test('Ref props', async () => {
+		const state = { title: 'Hello'};
+		const modal = await openModal(ModalTitle, state);
+
+		expect(modal.instance.title).toBe('Hello')
+	})
+	/**
 	 * Проверка на передачу ref
@@ -65,4 +82,6 @@ * */
 	test('Computed prop in object', async () => {
+
 		const modal = await openModal(ModalTitle, {
-			title: computed(() => 'Hello')
+			title: "Hello",
+			age: 1
 		})
@@ -77,3 +96,3 @@ expect(modal.instance.title).toBe('Hello')
 	test('Changing ref in props', async () => {
-		const state = ref({ title: 'Hello'});
+		const state = ref({ title: 'Hello', age: 1});
 		const modal = await openModal(ModalTitle, state);
@@ -88,3 +107,3 @@
 	test('Changing reactive in props', async () => {
-		const state = reactive({title: 'base'});
+		const state = reactive({title: 'base', age: 4});
 		const modal = await openModal(ModalTitle, state);
@@ -109,3 +128,4 @@
 	})
+
 	
 })

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

116313

increased by5.22%

Number of package files

58

increased by7.41%

Lines of code

2763

increased by5.54%

Number of lines in readme file

248

increased by1.64%

Worsened metrics

Dev dependency count

25

increased by4.17%

No dependency changes