feat(new props deactivationSelector): deactivation only in deactivati…

src/components/vue-draggable-resizable.vue

@@ -102,6 +102,10 @@ export default {
       type: Boolean,
       default: false
     },
+    deactivationSelector: {
+      type: String,
+      default: null
+    },
     active: {
       type: Boolean,
       default: false
@@ -423,6 +427,11 @@ export default {
       const target = e.target || e.srcElement
       const regex = new RegExp(this.className + '-([trmbl]{2})', '')
 
+      if (this.deactivationSelector && document.querySelector(this.deactivationSelector) && !document.querySelector(this.deactivationSelector).contains(target)) {
+        this.resetBoundsAndMouseState()
+        return
+      }
+
       if (!this.$el.contains(target) && !regex.test(target.className)) {
         if (this.enabled && !this.preventDeactivation) {
           this.enabled = false

tests/feature/specs/props/active.spec.js

@@ -187,3 +187,29 @@ describe('`prevent-deactivation` prop', function () {
 
   afterEach(() => wrapper.destroy())
 })
+
+describe('`deactivation-selector` prop', function () {
+  it('should not deactivate the component when clicking outside the deactivationSelector ', function (done) {
+    wrapper = mount(VueDraggableResizable, {
+      attachToDocument: true,
+      propsData: {
+        active: true,
+        preventDeactivation: false,
+        deactivationSelector: 'body'
+      }
+    })
+
+    expect(wrapper.props().active).to.be.true
+
+    syn.click(document.documentElement)
+
+    wrapper.vm.$nextTick(() => {
+      expect(wrapper.props().active).to.be.true
+      expect(wrapper.emitted()).to.not.have.property('deactivated')
+
+      done()
+    })
+  })
+
+  afterEach(() => wrapper.destroy())
+})