chore(release): 1.0.6 [skip ci]

### [1.0.6](v1.0.5...v1.0.6) (2021-02-02) ### Refactor * add emit for transition events ([1c859d6](1c859d6))
hoiheart · Feb 2, 2021 · 07b15c5 · 07b15c5
1 parent abba7ff
commit 07b15c5
Show file tree

Hide file tree

Showing 11 changed files with 83 additions and 24 deletions.
diff --git a/demo/index.07dbdbff.js b/demo/index.07dbdbff.js
diff --git a/demo/index.14b90476.js b/demo/index.14b90476.js
diff --git a/demo/index.html b/demo/index.html
@@ -3,14 +3,30 @@
 <head>
   <meta charset="UTF-8">
   <meta name="robots" content="index,follow">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Vue universal modal demo</title>
-<script type="module" src="/vue-universal-modal/demo/index.07dbdbff.js"></script>
-<link rel="stylesheet" href="/vue-universal-modal/demo/style.72f030e6.css">
+  <meta name="viewport" content="width=1000">
+  <title>Vue universal modal</title>
+  <meta name="description" content="Vue3 modal plugin based on the teleport" />
+  <meta property="og:title" content="Vue universal modal" />
+  <meta property="og:description" content="VueJS diff viewer plugin" />
+  <meta name="keywords" content="Vue modal, VueJS modal, Vue modal plugin, VueJS modal plugin, Vue3 modal, VueJS3 modal, Vue3 teleport modal, VueJS3 teleport modal" />
+  <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
+  <meta name="google-site-verification" content="u7XrdGhKnDkPIIw867fVSCqMet0sjBwyu5aYpy8stuQ" />
+<script type="module" src="/vue-universal-modal/demo/index.14b90476.js"></script>
+<link rel="stylesheet" href="/vue-universal-modal/demo/style.0a05a68d.css">
 </head>
 <body>
-  <div id="app"></div>
-  <div id="modals"></div>
+  <div class="p-12">
+    <div class="text-3xl font-extrabold text-gray-900">
+      <h1 class="inline-block">Vue universal modal</h1>
+      <!-- Place this tag where you want the button to render. -->
+      <span style="display: inline-block; line-height: 0; margin: -4px 0 0 10px; vertical-align: middle; font-size: 0;">
+        <a class="github-button" href="https://github.com/hoiheart/vue-universal-modal" data-size="large" data-show-count="true" aria-label="Star hoiheart/vue-universal-modal on GitHub">Star</a>
+      </span>
+    </div>
+    <div id="app" class="text-gray-900"></div>
+    <div id="modals"></div>
+  </div>
 
+  <script async defer src="https://buttons.github.io/buttons.js"></script>
 </body>
 </html>
diff --git a/demo/style.0a05a68d.css b/demo/style.0a05a68d.css
diff --git a/demo/style.72f030e6.css b/demo/style.72f030e6.css
diff --git a/dist/Modal.vue.d.ts b/dist/Modal.vue.d.ts
@@ -42,11 +42,12 @@ declare const _default: import("vue").DefineComponent<{
     show: import("vue").Ref<any>;
     latest: import("vue").ComputedRef<boolean>;
     emitClose: () => void;
+    emitAfterLeave: () => void;
     onClickDimmed: () => void;
     mergeOptions: Options;
     transition: string | boolean;
     className: string;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("before-enter" | "after-enter" | "before-leave" | "after-leave")[], "before-enter" | "after-enter" | "before-leave" | "after-leave", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     close: Function;
     options: Record<string, any>;
     disabled: boolean;

diff --git a/dist/index.es5.js b/dist/index.es5.js
@@ -909,7 +909,8 @@ var script = defineComponent({
       default: ''
     }
   },
-  setup: function setup(props) {
+  emits: ['before-enter', 'after-enter', 'before-leave', 'after-leave'],
+  setup: function setup(props, context) {
     var _inject = inject(PLUGIN_NAME),
         teleportTarget = _inject.teleportTarget,
         visibleModals = _inject.visibleModals,
@@ -962,6 +963,11 @@ var script = defineComponent({
       show.value = false;
     }
 
+    function emitAfterLeave() {
+      context.emit('after-leave');
+      props.close();
+    }
+
     function onClickDimmed() {
       if (mergeOptions.closeClickDimmed) {
         emitClose();
@@ -1032,6 +1038,7 @@ var script = defineComponent({
       show: show,
       latest: latest,
       emitClose: emitClose,
+      emitAfterLeave: emitAfterLeave,
       onClickDimmed: onClickDimmed,
       mergeOptions: mergeOptions,
       transition: transition,
@@ -1047,9 +1054,16 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
   }, [createVNode(Transition, {
     name: _ctx.CLASS_NAME,
     appear: "",
-    onAfterLeave: _cache[2] || (_cache[2] = function () {
-      return _ctx.close();
-    })
+    onBeforeEnter: _cache[2] || (_cache[2] = function ($event) {
+      return _ctx.$emit('before-enter');
+    }),
+    onAfterEnter: _cache[3] || (_cache[3] = function ($event) {
+      return _ctx.$emit('after-enter');
+    }),
+    onBeforeLeave: _cache[4] || (_cache[4] = function ($event) {
+      return _ctx.$emit('before-leave');
+    }),
+    onAfterLeave: _ctx.emitAfterLeave
   }, {
     default: withCtx(function () {
       return [withDirectives(createVNode("div", {
@@ -1085,7 +1099,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
 
   }, 8
   /* PROPS */
-  , ["name"])], 8
+  , ["name", "onAfterLeave"])], 8
   /* PROPS */
   , ["to", "disabled"]);
 }

diff --git a/dist/index.js b/dist/index.js
@@ -32,7 +32,13 @@ var script = defineComponent({
             default: ''
         }
     },
-    setup(props) {
+    emits: [
+        'before-enter',
+        'after-enter',
+        'before-leave',
+        'after-leave'
+    ],
+    setup(props, context) {
         const { teleportTarget, visibleModals, addVisibleModals, removeVisibleModals } = inject(PLUGIN_NAME);
         const { uid } = getCurrentInstance() || {};
         const modalRef = ref();
@@ -67,6 +73,10 @@ var script = defineComponent({
         function emitClose() {
             show.value = false;
         }
+        function emitAfterLeave() {
+            context.emit('after-leave');
+            props.close();
+        }
         function onClickDimmed() {
             if (mergeOptions.closeClickDimmed) {
                 emitClose();
@@ -128,6 +138,7 @@ var script = defineComponent({
             show,
             latest,
             emitClose,
+            emitAfterLeave,
             onClickDimmed,
             mergeOptions,
             transition,
@@ -144,7 +155,10 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     createVNode(Transition, {
       name: _ctx.CLASS_NAME,
       appear: "",
-      onAfterLeave: _cache[2] || (_cache[2] = () => _ctx.close())
+      onBeforeEnter: _cache[2] || (_cache[2] = $event => (_ctx.$emit('before-enter'))),
+      onAfterEnter: _cache[3] || (_cache[3] = $event => (_ctx.$emit('after-enter'))),
+      onBeforeLeave: _cache[4] || (_cache[4] = $event => (_ctx.$emit('before-leave'))),
+      onAfterLeave: _ctx.emitAfterLeave
     }, {
       default: withCtx(() => [
         withDirectives(createVNode("div", {
@@ -181,7 +195,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         ])
       ]),
       _: 3 /* FORWARDED */
-    }, 8 /* PROPS */, ["name"])
+    }, 8 /* PROPS */, ["name", "onAfterLeave"])
   ], 8 /* PROPS */, ["to", "disabled"]))
 }
 

diff --git a/dist/index.runtime.js b/dist/index.runtime.js
@@ -913,7 +913,8 @@
 	      default: ''
 	    }
 	  },
-	  setup: function setup(props) {
+	  emits: ['before-enter', 'after-enter', 'before-leave', 'after-leave'],
+	  setup: function setup(props, context) {
 	    var _inject = vue.inject(PLUGIN_NAME),
 	        teleportTarget = _inject.teleportTarget,
 	        visibleModals = _inject.visibleModals,
@@ -966,6 +967,11 @@
 	      show.value = false;
 	    }
 
+	    function emitAfterLeave() {
+	      context.emit('after-leave');
+	      props.close();
+	    }
+
 	    function onClickDimmed() {
 	      if (mergeOptions.closeClickDimmed) {
 	        emitClose();
@@ -1036,6 +1042,7 @@
 	      show: show,
 	      latest: latest,
 	      emitClose: emitClose,
+	      emitAfterLeave: emitAfterLeave,
 	      onClickDimmed: onClickDimmed,
 	      mergeOptions: mergeOptions,
 	      transition: transition,
@@ -1051,9 +1058,16 @@
 	  }, [vue.createVNode(vue.Transition, {
 	    name: _ctx.CLASS_NAME,
 	    appear: "",
-	    onAfterLeave: _cache[2] || (_cache[2] = function () {
-	      return _ctx.close();
-	    })
+	    onBeforeEnter: _cache[2] || (_cache[2] = function ($event) {
+	      return _ctx.$emit('before-enter');
+	    }),
+	    onAfterEnter: _cache[3] || (_cache[3] = function ($event) {
+	      return _ctx.$emit('after-enter');
+	    }),
+	    onBeforeLeave: _cache[4] || (_cache[4] = function ($event) {
+	      return _ctx.$emit('before-leave');
+	    }),
+	    onAfterLeave: _ctx.emitAfterLeave
 	  }, {
 	    default: vue.withCtx(function () {
 	      return [vue.withDirectives(vue.createVNode("div", {
@@ -1089,7 +1103,7 @@
 
 	  }, 8
 	  /* PROPS */
-	  , ["name"])], 8
+	  , ["name", "onAfterLeave"])], 8
 	  /* PROPS */
 	  , ["to", "disabled"]);
 	}

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-universal-modal",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "description": "Universal modal plugin for Vue@3",
   "license": "ISC",
   "author": {