jenesius-vue-modal - npm Package Compare versions

Comparing version 1.3.0 to 1.3.1

dist/jenesius-vue-modal.cjs.js

 /*!
-  * jenesius-vue-modal v1.3.0
+  * jenesius-vue-modal v1.3.1
   * (c) 2021 Jenesius
@@ -211,2 +211,4 @@ * @license MIT
     return call;
+  } else if (call !== void 0) {
+    throw new TypeError("Derived constructors may only return object or undefined");
   }
@@ -433,2 +435,3 @@
 			const modalRef = vue.ref(null);
+			const containerRef = vue.ref(null);
 
@@ -440,11 +443,22 @@ vue.watch(() => modalRef.value, newValue => {
 			return () => vue.h("div", {
-				class: "widget__modal-container__item"
+				class: ["widget__modal-container__item", "modal-container"],
+				ref: containerRef,
+				onClick: e => {
+					if (e.target !== containerRef.value) return;
+
+					return popModal().catch(() => {})
+				}
 			}, [
-				vue.h("div", {class: "widget__modal-container__item-back widget__modal-back", onClick: () => {
+				/*
+				h("div", {
+					class: ["modal-back", "widget__modal-container__item-back widget__modal-back"],
 
-						return popModal()
-						.catch(() => {})
-
-					}}),
-				vue.h(props.component, { ...props.params, class: "widget__modal-wrap", "modal-id": `_modal_${props.id}`, ref: modalRef})
+				}),
+				 */
+				vue.h(props.component, {
+					...props.params,
+					class: ["modal-item", "widget__modal-wrap"],//Save for compatibility
+					"modal-id": `_modal_${props.id}`,
+					ref: modalRef,
+				})
 			])
@@ -483,6 +497,5 @@ },
 
-var css_248z$1 = "\n.widget__modal-container__item[data-v-27c985c9]{\r\n        position: fixed;\r\n\t\tleft: 0;\r\n\t\ttop: 0;\r\n\t\theight: 100%;\r\n\t\twidth: 100%;\r\n\t\t\r\n\t\tdisplay: flex;\r\n\t\talign-items: center;\r\n\t\tjustify-content: center\n}\n.widget__modal-back[data-v-27c985c9]{\r\n\t\topacity: 1;\r\n\r\n\t\tbackground-color: #3e3e3e21;\n}\n.widget__modal-container__item-back[data-v-27c985c9]{\r\n\t\tposition: absolute;\r\n\t\t\r\n\t\tz-index: -1;\r\n        left: 0;\r\n        top: 0;\r\n        height: 100%;\r\n        width: 100%;\r\n\r\n        cursor: pointer;\n}\r\n\t\r\n";
+var css_248z$1 = "\n.modal-container{\r\n\t\tposition: fixed;\r\n\t\tleft: 0;\r\n\t\ttop: 0;\r\n\t\theight: 100%;\r\n\t\twidth: 100%;\r\n\r\n\t\tdisplay: flex;\r\n\t\talign-items: center;\r\n\t\tjustify-content: center;\r\n\r\n\t\tbackground-color: #3e3e3e21;\r\n\t\tcursor: pointer;\n}\n.modal-item{\r\n\t\tcursor: default;\n}\r\n\r\n";
 styleInject(css_248z$1);
 
-script$1.__scopeId = "data-v-27c985c9";
 script$1.__file = "plugin/WidgetModalContainerItem.vue";
@@ -496,3 +509,3 @@
 			return () => {
-				return vue.h(vue.TransitionGroup, {name: "modal-list"}, {
+				return vue.h(vue.TransitionGroup, {name: configuration.animation}, {
 					default: () =>modalQueue.value.map(modalObject => {
@@ -507,3 +520,3 @@ return vue.h(script$1, {component: modalObject.component, params: modalObject.params, key: modalObject.id, id: modalObject.id});
 
-var css_248z = "\n.modal-list-enter-active,\r\n    .modal-list-leave-active,\r\n    .modal-list-enter-active .widget__modal-back,\r\n    .modal-list-leave-active .widget__modal-back,\r\n    .modal-list-enter-active .widget__modal-wrap,\r\n    .modal-list-leave-active .widget__modal-wrap\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 .widget__modal-wrap,\r\n    .modal-list-leave-to .widget__modal-wrap{\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);
@@ -525,7 +538,13 @@
    * */
-  scrollLock: true
+  scrollLock: true,
+
+  /**
+  * Animation name for transition-group
+  * */
+  animation: "modal-list"
 };
 function config() {
   var data = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
-    scrollLock: scrollLock
+    scrollLock: scrollLock,
+    animation: animation
   };
@@ -830,2 +849,3 @@ if (_typeof(data) !== "object") throw ModalError.ConfigurationType(data);
 
+exports._configuration = configuration;
 exports.closeModal = closeModal;
@@ -832,0 +852,0 @@ exports.config = config;

package.json

 {
   "name": "jenesius-vue-modal",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "private": false,
@@ -23,3 +23,2 @@ "description": "Simple modal plugin for Vue3",
   "devDependencies": {
-    "vuex": "^4.0.2",
     "@babel/core": "^7.15.0",
@@ -40,5 +39,7 @@ "@babel/plugin-proposal-throw-expressions": "^7.14.5",
     "babel-eslint": "^10.1.0",
+    "babel-jest": "^26.6.3",
     "babel-plugin-transform-regenerator": "^6.26.0",
     "babel-polyfill": "^6.26.0",
     "chalk": "^4.1.2",
+    "core-js": "^3.16.2",
     "eslint": "^6.7.2",
@@ -52,3 +53,4 @@ "eslint-plugin-vue": "^7.0.0-0",
     "vue-jest": "^5.0.0-alpha.10",
-    "vue-router": "^4.0.10"
+    "vue-router": "^4.0.10",
+    "vuex": "^4.0.2"
   },
@@ -55,0 +57,0 @@ "eslintConfig": {

README.md

@@ -164,2 +164,5 @@ # Jenesius Vue Modal
 
+# Style and Animation [1.3.1+]
+Please refer to the [documentation](https://modal.jenesius.com/docs.html/details#styles) to change the styles or animations of modals.
+
 # Example VueModalComponent
@@ -166,0 +169,0 @@

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

31795

increased by0.96%

Lines of code

717

increased by2.43%

Number of lines in readme file

195

increased by1.56%

Worsened metrics

Dev dependency count

30

increased by7.14%

Number of package files

4

decreased by-20%

No dependency changes