refactor(confirm): support modal transform origin

demo/components/confirmDemo/async.demo.vue

@@ -27,13 +27,13 @@ export default {
     }
   },
   methods: {
-    handleConfirm () {
+    handleConfirm (e) {
       const confirmInstance = this.$NModal.confirm({
         title: 'Confirm',
         content: 'Are u sure to ...?',
         okText: 'Yes', // 自定义ok按钮文字 error和success也可以使用
         cancelText: 'No', // 自定义取消按钮文字
-
+        activateEvent: e,
         onOk: () => {
           console.log('click on ok', confirmInstance)
           this.$NMessage.info('will be ok in 3 seconds')

demo/components/confirmDemo/type.demo.vue

@@ -33,13 +33,13 @@ export default {
     }
   },
   methods: {
-    handleConfirm () {
+    handleConfirm (e) {
       const confirmInstance = this.$NModal.confirm({
         title: 'Confirm',
         content: '<b>Are u sure to ...?',
+        activateEvent: e,
         onOk: () => {
           console.log('click on ok', confirmInstance)
-
           this.$NMessage.success('sure')
         },
         onCancel: () => {
@@ -47,10 +47,11 @@ export default {
         }
       })
     },
-    handleSuccess () {
+    handleSuccess (e) {
       const confirmInstance = this.$NModal.success({
         title: 'Success',
         content: 'Premium designed icons for use in web, iOS, Android, and desktop apps. Support for SVG and web font. Completely open source, MIT licensed and built by the Ionic Framework team.',
+        activateEvent: e,
         onOk: () => {
           console.log('click on ok', confirmInstance)
 
@@ -58,13 +59,13 @@ export default {
         }
       })
     },
-    handleError () {
+    handleError (e) {
       const confirmInstance = this.$NModal.error({
         title: 'Error',
         content: '<b>这是一个测试？</b>hhahhaahahhahahsdiusah ashdusadu asdsadsadsadsadsa',
+        activateEvent: e,
         onOk: () => {
           console.log('click on ok', confirmInstance)
-
           this.$NMessage.success('I know..')
         }
       })

packages/common/Confirm/src/confirm.vue

@@ -1,6 +1,7 @@
 <template>
   <n-modal
     v-model="isActive"
+    :activate-event="activateEvent"
     @toggle="toggle"
   >
     <!-- <transition name="n-modal-content--transition"> -->
@@ -16,7 +17,6 @@
           />
           {{ title }}
         </span>
-
         <n-icon
           type="md-close"
           size="22"
@@ -74,6 +74,7 @@ export default {
       type: 'error',
       title: 'title',
       loading: null,
+      activateEvent: null,
       onCancel: () => {},
       onOk: () => {}
     }
@@ -111,15 +112,6 @@ export default {
       this.onOk()
       if (this.loading !== true) { this.isActive = false }
     }
-    // updateData (data) {
-    //   Object.keys(data).forEach((key) => {
-    //     this[key] = data[key]
-    //   })
-    // },
   }
 }
 </script>
-
-<style scoped>
-
-</style>

packages/common/Modal/src/ModalContent.vue

@@ -27,6 +27,7 @@
 
 <script>
 import NScrollbar from '../../Scrollbar'
+
 export default {
   components: {
     NScrollbar
@@ -35,6 +36,12 @@ export default {
     active: {
       type: Boolean,
       default: false
+    },
+    activateEvent: {
+      validator (e) {
+        return e instanceof MouseEvent
+      },
+      default: null
     }
   },
   data () {
@@ -67,21 +74,40 @@ export default {
       // console.log('afterEnter', this.$refs.scrollbar.enableScrollbar())
     },
     updateTransformOrigin () {
+      if (
+        (!this.$parent.$refs.activator ||
+        !this.$parent.$refs.activator.childElementCount) &&
+        !this.activateEvent
+      ) {
+        return
+      }
       const scrollTop = this.$refs.scrollbar.containerScrollTop
-      console.log(scrollTop)
       const {
         offsetLeft,
         offsetTop
       } = this.$refs.contentInner
-      const {
+      if (
-        left: activatorLeft,
+        this.$parent.$refs.activator &&
-        top: activatorTop,
+        this.$parent.$refs.activator.childElementCount
-        width: activatorWidth
+      ) {
-      } = this.$parent.$refs.activator.getBoundingClientRect()
+        const {
-      const transformOriginX = -(offsetLeft - activatorLeft - activatorWidth / 2)
+          left: activatorLeft,
-      const transformOriginY = -(offsetTop - activatorTop - scrollTop - activatorTop / 2)
+          top: activatorTop,
-      this.$refs.contentInner.style.transformOrigin = `${transformOriginX}px ${transformOriginY}px`
+          width: activatorWidth,
-      console.log(this.$refs.contentInner.style.transformOrigin)
+          height: activatorHeight
+        } = this.$parent.$refs.activator.getBoundingClientRect()
+        const transformOriginX = -(offsetLeft - activatorLeft - activatorWidth / 2)
+        const transformOriginY = -(offsetTop - activatorTop - scrollTop - activatorHeight / 2)
+        this.$refs.contentInner.style.transformOrigin = `${transformOriginX}px ${transformOriginY}px`
+      } else {
+        const activatorTop = this.activateEvent.clientY
+        const activatorLeft = this.activateEvent.clientX
+        const activatorWidth = 0
+        const activatorHeight = 0
+        const transformOriginX = -(offsetLeft - activatorLeft - activatorWidth / 2)
+        const transformOriginY = -(offsetTop - activatorTop - scrollTop - activatorHeight / 2)
+        this.$refs.contentInner.style.transformOrigin = `${transformOriginX}px ${transformOriginY}px`
+      }
     },
     handleBeforeLeave () {
       this.updateTransformOrigin()
@@ -127,6 +153,6 @@ export default {
 
 .n-modal-content--transition-enter, .n-modal-content--transition-leave-to {
   opacity: 0;
-  transform: scale(.75);
+  transform: scale(.5);
 }
 </style>

packages/common/Modal/src/main.vue

@@ -13,6 +13,14 @@ export default {
     detachable,
     zindexable
   ],
+  props: {
+    activateEvent: {
+      validator (e) {
+        return e instanceof MouseEvent
+      },
+      default: null
+    }
+  },
   data () {
     return {
       mousedownTarget: null
@@ -38,7 +46,7 @@ export default {
         h(NModalContent,
           {
             ref: 'content',
-            props: { active: this.active },
+            props: { active: this.active, activateEvent: this.activateEvent },
             on: {
               mousedown: (e) => {
                 this.mousedownTarget = e.target

packages/utils/traceClickEvent.js

@@ -0,0 +1,20 @@
+/**
+ * This file is currently of no use
+ */
+
+let memorizedClickEvent = null
+
+class ClickTracer {
+  constructor () {
+    window.removeEventListener('click', ClickTracer.traceClickEvent, true)
+    window.addEventListener('click', ClickTracer.traceClickEvent, true)
+  }
+  static traceClickEvent (e) {
+    memorizedClickEvent = e
+  }
+  get memorizedClickEvent () {
+    return memorizedClickEvent
+  }
+}
+
+export default new ClickTracer()