Merge branch 'bugfix/do-not-close-modal-when-select-text' into v3

Author: hunterliu1003

.github/PULL_REQUEST_TEMPLATE/pull_request_template.md

@@ -0,0 +1,6 @@
+- [ ] Feature
+- [ ] Feature review
+- [ ] Unit test
+- [ ] Unit test review
+- [ ] Docs
+- [ ] Docs review

README.md

@@ -28,7 +28,6 @@
 
 ## 🎉 [Documentation](https://vue-final-modal.org)
 
-
 ## 🙌 [Examples](https://vue-final-modal.org/examples/liveDemo)
 
 ## Introduction

dist/VueFinalModal.esm.js

@@ -1,5 +1,11 @@
 <template>
-  <vue-final-modal v-bind="$attrs" classes="modal-container" content-class="modal-content" v-on="$listeners">
+  <vue-final-modal
+    v-slot="{ close }"
+    v-bind="$attrs"
+    classes="modal-container"
+    content-class="modal-content"
+    v-on="$listeners"
+  >
     <button class="modal__close" @click="close">
       <mdi-close></mdi-close>
     </button>
@@ -12,12 +18,7 @@
 
 <script>
 export default {
-  inheritAttrs: false,
-  methods: {
-    close() {
-      this.$emit('input', false)
-    }
-  }
+  inheritAttrs: false
 }
 </script>
 

dist/VueFinalModal.esm.js.map

@@ -7,4 +7,4 @@ position: 9
 version: 3
 ---
 
-<basic-options></basic-options>
+<basic-options></basic-options>

dist/VueFinalModal.umd.js

@@ -11,7 +11,7 @@
   "dependencies": {
     "@nuxt/content-theme-docs": "0.10.0",
     "nuxt": "^2.14.12",
-    "vue-final-modal": "^2.3.1"
+    "vue-final-modal": "^2.3.2"
   },
   "devDependencies": {
     "@nuxtjs/google-analytics": "^2.4.0",

dist/VueFinalModal.umd.js.map

@@ -10608,10 +10608,10 @@ vue-client-only@^2.0.0:
   resolved "https://registry.yarnpkg.com/vue-client-only/-/vue-client-only-2.0.0.tgz#ddad8d675ee02c761a14229f0e440e219de1da1c"
   integrity sha512-arhk1wtWAfLsJyxGMoEYhoBowM87/i6HLSG2LH/03Yog6i2d9JEN1peMP0Ceis+/n9DxdenGYZZTxbPPJyHciA==
 
-vue-final-modal@^2.3.1:
-  version "2.3.1"
-  resolved "https://registry.yarnpkg.com/vue-final-modal/-/vue-final-modal-2.3.1.tgz#d2c88359b29c40371c6f05abe45e8163cdbce43c"
-  integrity sha512-IiV202PnW22Dt+Dp1krpGt3BMe6c/HmtVSNQuPwDA31vpbiHj5rmA1R25uKzN6WNqHW/Dw4lVuYVL4ei6EjW1w==
+vue-final-modal@^2.3.2:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/vue-final-modal/-/vue-final-modal-2.3.2.tgz#df3974104bbea2d5632fdea58e80e390a1255953"
+  integrity sha512-W/A49pkMjua3Ktfo2qPoxmDme5rD01SbtVM0XjHmwYXU6x7BbkgKcqQQz7GAyALklM3D244QY3f+CuhcMWZbLQ==
   dependencies:
     vue "^2.6.12"
 

docs/components/examples/basic/VDynamicModal.vue

@@ -10,4 +10,4 @@
     <div id="app"></div>
     <script type="module" src="/src/main.js"></script>
   </body>
-</html>
+</html>

docs/content/en/examples/liveDemo.md

@@ -209,7 +209,6 @@ const initData = () => ({
   attachTo: '#attach',
   focusRetain: true,
   focusTrap: false,
-  focusTrap: false,
   drag: false,
   fitParent: true,
   keepChangedStyle: false,

docs/content/en/guide/scoped-slot.md renamed to docs/content/en/guide/scoped-slots.md

@@ -39,13 +39,15 @@
         role="dialog"
         aria-modal="true"
         tabindex="-1"
-        @click.self="onClickContainer"
+        @mouseup.self="onMouseupContainer"
+        @mousedown.self="onMousedown"
       >
         <div
           ref="vfmContent"
           class="vfm__content"
           :class="[contentClass, { 'vfm--prevent-auto': preventClick }]"
           :style="bindContentStyle"
+          @mousedown="onMousedown(null)"
         >
           <slot :params="params" :close="() => $emit('update:modelValue')" />
           <div
@@ -198,6 +200,8 @@ export default {
     const params = ref({})
     const dragResizeStyle = ref({})
     const _state = ref(null)
+    const lastMousedownEl = ref(null)
+
     let resolveToggle = noop
     let rejectToggle = noop
 
@@ -497,7 +501,12 @@ export default {
       if (stopEvent) return
       params.value = {}
     }
-    function onClickContainer() {
+    function onMousedown(e) {
+      lastMousedownEl.value = e?.target
+    }
+    function onMouseupContainer() {
+      // skip when the lastMousedownEl didn't equal vfmContainer
+      if (lastMousedownEl.value !== vfmContainer.value) return
       // skip when state equal 'resize:move'
       if (_state.value === 'resize:move') return
       emit('click-outside', createModalEvent({ type: 'click-outside' }))
@@ -655,7 +664,7 @@ export default {
         if (state === STATE_RESIZE) {
           resetBodyCursor && resetBodyCursor()
         }
-        // Excute onClickContainer before trigger emitState
+        // Excute onMouseupContainer before trigger emitState
         setTimeout(() => {
           emitState(e, state, 'end')
         })
@@ -757,7 +766,8 @@ export default {
       afterModalEnter,
       beforeModalLeave,
       afterModalLeave,
-      onClickContainer,
+      onMousedown,
+      onMouseupContainer,
       onEsc
     }
   }

docs/content/zh-Hant/guide/scoped-slot.md renamed to docs/content/zh-Hant/guide/scoped-slots.md

@@ -25,7 +25,16 @@ describe('VueFinalModal.vue', () => {
     })
     it('clickToClose: true', async () => {
       const { wrapper } = await createOpenedModal()
-      wrapper.find('.vfm__container').trigger('click')
+      wrapper.find('.vfm__container').trigger('mousedown')
+      wrapper.find('.vfm__content').trigger('mouseup')
+      await afterTransition()
+      expect(wrapper.find('.vfm').isVisible()).toBe(true)
+      wrapper.find('.vfm__content').trigger('mousedown')
+      wrapper.find('.vfm__container').trigger('mouseup')
+      await afterTransition()
+      expect(wrapper.find('.vfm').isVisible()).toBe(true)
+      wrapper.find('.vfm__container').trigger('mousedown')
+      wrapper.find('.vfm__container').trigger('mouseup')
       await afterTransition()
       expect(wrapper.find('.vfm').isVisible()).toBe(false)
       wrapper.unmount()
@@ -145,7 +154,8 @@ describe('VueFinalModal.vue', () => {
       const { wrapper } = await createOpenedModal({
         clickToClose: false
       })
-      wrapper.find('.vfm__container').trigger('click')
+      wrapper.find('.vfm__container').trigger('mousedown')
+      wrapper.find('.vfm__container').trigger('mouseup')
       await afterTransition()
       expect(wrapper.find('.vfm').isVisible()).toBe(true)
       wrapper.unmount()
@@ -199,6 +209,18 @@ describe('VueFinalModal.vue', () => {
       expect(wrapper.vm.$el.parentNode === elem).toBe(true)
       wrapper.unmount()
     })
+    it('attach: wrong querySelector', async () => {
+      global.console.warn = jest.fn()
+      const spy = jest.spyOn(global.console, 'warn')
+      const attach = '.selector-not-exist-in-dom'
+      const { wrapper } = await createClosedModal({
+        attach
+      })
+      wrapper.setProps({ modelValue: true })
+      await afterTransition()
+      expect(spy).toHaveBeenCalledTimes(1)
+      expect(spy.mock.calls[0][0]).toContain(attach)
+    })
     it('focusRetain: false', async () => {
       const { wrapper } = await createOpenedModal({
         focusRetain: false
@@ -385,7 +407,8 @@ describe('VueFinalModal.vue', () => {
           }
         }
       )
-      wrapper.find('.vfm__container').trigger('click')
+      wrapper.find('.vfm__container').trigger('mousedown')
+      wrapper.find('.vfm__container').trigger('mouseup')
       await afterTransition()
       expect(clickOutside).toHaveBeenCalled()
       expect(beforeOpen).toHaveBeenCalled()

docs/package.json

@@ -35,4 +35,4 @@
     ],
     "description": ""
   }
-}
+}