Hello! I'm a flexible component. You can drag me around and you can resize me.
77 |vue-draggable-resizable
6 |Try to resize the window. The component will adapt to the new parent size.
11 |Combine aspect ratio and costrain in parent.
25 |Keep aspect ratio, grid and parent costrained.
45 |Aspect ratio in Grid 20x40 starting with a 10x20 offset
45 |Keep aspect ratio using :lock-aspect-ratio prop.
23 |Keep aspect ratio and set maxWidth to {{ maxWidth }} and maxHeight to {{ maxHeight }}.
25 |Keep aspect ratio and set minWidth to {{ minWidth }} and minHeight to {{ minHeight }}.
25 |Keep aspect ratio in component costrained on grid {{ grid }}.
43 |Controlling the active state from outside the component by providing the active prop.
23 |Draggable on {{ axis }} axis.
23 |You can drag me around and resize me as you wish.
11 |Basic controlled component.
26 |Basic component with form inside.
30 | 34 |Enable/disable handles.
26 |Basic component with programmable maxWidth and maxHeight props.
24 |Basic component with programmable minWidth and minHeight props.
24 |Native drag disabled. Try to drag the component from the ball.
10 |
11 | Native drag enabled. Try to drag the component from the ball.
14 |
15 | Basic component that is {{ draggable ? 'also' : 'not' }} draggable.
23 |Basic component that is {{ resizable ? 'also' : 'not' }} resizable.
23 |Prevents the deactivation of the component by providing the prevent-deactivation prop.
23 |Change the "scale" property to support CSS scale transform. Current value is {{ scale }}
23 |Component with default scale prop set to 1
26 |Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate aperiam explicabo animi expedita unde perspiciatis quae, consequatur consequuntur libero assumenda, accusantium repellat illo asperiores molestiae ea quasi distinctio, aspernatur saepe!
30 |Controlling the z-index from outside the component by providing the :z prop.
23 |Start dragging!
37 |The component is locked!
38 |Start resizing!
37 |The component is locked!
38 |The component has been activated.
36 |{{ dragging ? 'You are dragging me' : 'Standing still' }}
X: {{ x }} / Y: {{ y }}
{{ resizing ? 'You are resizing me' : 'This is my favourite shape' }}
44 | X: {{ x }} / Y: {{ y }} - Width: {{ width }} / Height: {{ height }}
Grid {{ grid[0] }}x {{ grid[1] }} starting from the top-left corner
40 |Grid {{ grid[0] }}x{{ grid[1] }} starting with a {{ x }}x{{ y }} offset and max width equal to {{ maxWidth }} and max height equal to {{ maxHeight }}.
44 |Grid {{ grid[0] }}x{{ grid[1] }} starting with a {{ x }}x{{ y }} offset and min width equal to {{ minWidth }} and min height equal to {{ minHeight }}.
44 |{{ element.text }}
110 |{{ element.text }}
181 |{{ element.text }}
30 |{{ element.text }} {{ sync ? '(synchronized)' : null }}
208 |You cannot move me or resize me outside my parent element.
24 |You cannot move me or resize me outside my parent.
46 |You can {{ disableUserSelect ? 'not' : '' }} select text inside the component by putting :disableUserSelect prop equal to {{ disableUserSelect }}.
24 |You cannot move me or resize me outside my parent.
37 |You cannot move me or resize me outside my parent.
39 |Component costrained in parent with maxWidth equal to {{ maxWidth }} and maxHeight equal to {{ maxHeight }}.
43 |You cannot move me or resize me outside my parent. And my edges cannot touch the parent element.
39 |Component costrained in parent with maxWidth equal to {{ maxWidth }} and maxHeight equal to {{ maxHeight }}.
25 |You can provide a default class name for the component when it's active using the class-name-active prop.
23 |You can provide a default class name for the component using the class-name prop.
23 |You can provide a default class name for the component when it's dragging using the class-name-dragging prop.
23 |The first child will populate the default slot.
10 | 11 | 😀 12 | 😂 13 | 😆 14 | 😉 15 | 😎 16 | 😍 17 | 😣 18 | 😕 19 |You can provide a default class name for the handle using the class-name-handle prop.
23 |You can provide a default class name for the component when it's resizing using the class-name-resizing prop.
23 |Resize Me
' 17 | } 18 | }) 19 | 20 | cy.get('div.vdr') 21 | .find('p') 22 | .should('be.visible') 23 | .and('have.text', 'Resize Me') 24 | }) 25 | 26 | it('should render the component with 8 handles by default', () => { 27 | cy.mount(VueDraggableResizable) 28 | 29 | cy.get('div.handle') 30 | .should('not.be.empty') 31 | .and('have.length', 8) 32 | .and($handles => { 33 | const classes = $handles.map((i, el) => { 34 | return Cypress.$(el).attr('class') 35 | }) 36 | 37 | expect(classes.get()).to.deep.eq([ 38 | 'handle handle-tl', 39 | 'handle handle-tm', 40 | 'handle handle-tr', 41 | 'handle handle-mr', 42 | 'handle handle-br', 43 | 'handle handle-bm', 44 | 'handle handle-bl', 45 | 'handle handle-ml', 46 | ]) 47 | }) 48 | }) 49 | 50 | it('should provide named slots for each one of the handles', () => { 51 | cy.mount(VueDraggableResizable, { 52 | slots: { 53 | tl: 'TL', 54 | tm: 'TM', 55 | tr: 'TR', 56 | mr: 'MR', 57 | br: 'BR', 58 | bm: 'BM', 59 | bl: 'BL', 60 | ml: 'ML' 61 | } 62 | }) 63 | 64 | cy.get('div.handle-tl').should('have.html', 'TL') 65 | cy.get('div.handle-tm').should('have.html', 'TM') 66 | cy.get('div.handle-tr').should('have.html', 'TR') 67 | cy.get('div.handle-mr').should('have.html', 'MR') 68 | cy.get('div.handle-br').should('have.html', 'BR') 69 | cy.get('div.handle-bm').should('have.html', 'BM') 70 | cy.get('div.handle-bl').should('have.html', 'BL') 71 | cy.get('div.handle-ml').should('have.html', 'ML') 72 | }) 73 | 74 | it('should not block event bubbling', () => { 75 | const onActivated = cy.spy().as('onActivatedSpy') 76 | 77 | cy.mount(VueDraggableResizable, { 78 | propsData: { 79 | onActivated 80 | }, 81 | slots: { 82 | default: '' 83 | } 84 | }) 85 | 86 | cy.get('input').click() 87 | 88 | cy.get('@onActivatedSpy') 89 | .should('have.been.called') 90 | 91 | cy.get('div.vdr').should('have.class', 'active') 92 | }) 93 | }) 94 | -------------------------------------------------------------------------------- /tests/cypress/events.cy.js: -------------------------------------------------------------------------------- 1 | import VueDraggableResizable from '@/components/vue-draggable-resizable.vue' 2 | 3 | describe('VueDraggableResizable events', () => { 4 | 5 | it('should emit "activated" event when the component is clicked', () => { 6 | const onActivated = cy.spy().as('onActivatedSpy') 7 | 8 | cy.mount(VueDraggableResizable, { 9 | propsData: { 10 | active: false, 11 | onActivated 12 | } 13 | }) 14 | 15 | cy.get('div.vdr').click() 16 | 17 | cy.get('@onActivatedSpy') 18 | .should('have.been.called') 19 | }) 20 | 21 | it('should emit "dragging" event while dragging the component', () => { 22 | const onDragging = cy.spy().as('onDraggingSpy') 23 | 24 | cy.mount(VueDraggableResizable, { 25 | propsData: { 26 | w: 100, 27 | h: 100, 28 | active: true, 29 | onDragging 30 | } 31 | }) 32 | 33 | cy.get('div.vdr') 34 | .move({ deltaX: 50, deltaY: 50 }) 35 | 36 | cy.get('@onDraggingSpy') 37 | .should('have.been.calledWith', 50, 50) 38 | }) 39 | 40 | it('should emit "dragStop" event while stopping dragging the component', () => { 41 | const onDragStop = cy.spy().as('onDragStopSpy') 42 | 43 | cy.mount(VueDraggableResizable, { 44 | propsData: { 45 | w: 100, 46 | h: 100, 47 | active: true, 48 | onDragStop 49 | } 50 | }) 51 | 52 | cy.get('div.vdr') 53 | .move({ deltaX: 50, deltaY: 50 }) 54 | 55 | cy.get('@onDragStopSpy') 56 | .should('have.been.calledWith', 50, 50) 57 | }) 58 | 59 | it('should not emit "dragStop" when the component is activated', () => { 60 | const onDragStop = cy.spy().as('onDragStopSpy') 61 | 62 | cy.mount(VueDraggableResizable, { 63 | propsData: { 64 | w: 100, 65 | h: 100, 66 | onDragStop 67 | } 68 | }) 69 | 70 | cy.get('div.vdr').click() 71 | 72 | cy.get('@onDragStopSpy') 73 | .should('not.have.been.called') 74 | }) 75 | 76 | it('should emit "resizing" event while resizing the component', () => { 77 | const onResizing = cy.spy().as('onResizingSpy') 78 | 79 | cy.mount(VueDraggableResizable, { 80 | propsData: { 81 | w: 100, 82 | h: 100, 83 | active: true, 84 | onResizing 85 | } 86 | }) 87 | 88 | cy.get('div.handle-br') 89 | .move({ deltaX: 50, deltaY: 50 }) 90 | 91 | cy.get('@onResizingSpy') 92 | .should('have.been.calledWith', 0, 0, 150, 150) 93 | }) 94 | 95 | it('should emit "resizeStop" event while stopping resizing the component', () => { 96 | const onResizeStop = cy.spy().as('onResizeStopSpy') 97 | 98 | cy.mount(VueDraggableResizable, { 99 | propsData: { 100 | w: 100, 101 | h: 100, 102 | active: true, 103 | onResizeStop 104 | } 105 | }) 106 | 107 | cy.get('div.handle-br') 108 | .move({ deltaX: 50, deltaY: 50 }) 109 | 110 | cy.get('@onResizeStopSpy') 111 | .should('have.been.calledWith', 0, 0, 150, 150) 112 | }) 113 | 114 | it('should not emit "resizeStop" when a handle is clicked', () => { 115 | const onResizeStop = cy.spy().as('onResizeStopSpy') 116 | 117 | cy.mount(VueDraggableResizable, { 118 | propsData: { 119 | w: 100, 120 | h: 100, 121 | active: true, 122 | onResizeStop 123 | } 124 | }) 125 | 126 | cy.get('div.handle-br').click() 127 | 128 | cy.get('@onResizeStopSpy') 129 | .should('not.have.been.called') 130 | }) 131 | }) 132 | -------------------------------------------------------------------------------- /tests/cypress/props/active.cy.js: -------------------------------------------------------------------------------- 1 | import VueDraggableResizable from '@/components/vue-draggable-resizable.vue' 2 | 3 | describe('"active" prop', () => { 4 | 5 | it('should not have the "active" class if the component is not active', () => { 6 | cy.mount(VueDraggableResizable, { 7 | propsData: { 8 | active: false 9 | } 10 | }) 11 | 12 | cy.get('div.vdr') 13 | .should('not.have.class', 'active') 14 | }) 15 | 16 | it('should enable the component through "active" prop', () => { 17 | cy.mount(VueDraggableResizable, { 18 | propsData: { 19 | active: true 20 | } 21 | }) 22 | 23 | cy.get('div.vdr') 24 | .should('have.class', 'active') 25 | 26 | cy.get('@vue').should(wrapper => { 27 | expect(wrapper.props().active).to.be.true 28 | }) 29 | }) 30 | 31 | it('should not show handles if the component is not active', () => { 32 | cy.mount(VueDraggableResizable, { 33 | propsData: { 34 | active: false 35 | } 36 | }) 37 | 38 | cy.get('div.handle') 39 | .should('be.not.visible') 40 | }) 41 | 42 | it('should show handles if the component is active', () => { 43 | cy.mount(VueDraggableResizable, { 44 | propsData: { 45 | active: true 46 | } 47 | }) 48 | 49 | cy.get('div.handle') 50 | .should('be.visible') 51 | }) 52 | 53 | it('should watch to the "active" prop', () => { 54 | cy.mount(VueDraggableResizable, { 55 | propsData: { 56 | active: false 57 | } 58 | }) 59 | 60 | cy.get('@vue').then(wrapper => { 61 | wrapper.setProps({ active: true }) 62 | 63 | cy.get('div.vdr') 64 | .should('have.class', 'active') 65 | }) 66 | }) 67 | 68 | it('should activate the component when clicking on it', () => { 69 | const onActivated = cy.spy().as('onActivatedSpy') 70 | 71 | cy.mount(VueDraggableResizable, { 72 | propsData: { 73 | onActivated 74 | } 75 | }) 76 | 77 | cy.get('div.vdr').click() 78 | 79 | cy.get('@onActivatedSpy') 80 | .should('have.been.calledOnce') 81 | 82 | cy.get('@vue').should(wrapper => { 83 | expect(wrapper.emitted()).to.have.property('update:active') 84 | }) 85 | }) 86 | 87 | it('should emit "activated" event if the component is mounted with the "active" prop set true', () => { 88 | const onActivated = cy.spy().as('onActivatedSpy') 89 | 90 | cy.mount(VueDraggableResizable, { 91 | propsData: { 92 | active: true, 93 | onActivated 94 | } 95 | }) 96 | 97 | cy.get('@onActivatedSpy') 98 | .should('have.been.called') 99 | }) 100 | 101 | it('should deactivate the component when clicking outside it', () => { 102 | const onDeactivated = cy.spy().as('onDeactivatedSpy') 103 | 104 | cy.mount(VueDraggableResizable, { 105 | propsData: { 106 | active: true, 107 | onDeactivated 108 | } 109 | }) 110 | 111 | cy.get(document.documentElement).click() 112 | 113 | cy.get('@onDeactivatedSpy') 114 | .should('have.been.calledOnce') 115 | 116 | cy.get('div.vdr') 117 | .should('not.have.class', 'active') 118 | 119 | cy.get('@vue').should(wrapper => { 120 | expect(wrapper.emitted()).to.have.property('update:active') 121 | }) 122 | }) 123 | 124 | it('should not activate the component when right-clicking on it', () => { 125 | const onActivated = cy.spy().as('onActivatedSpy') 126 | 127 | cy.mount(VueDraggableResizable, { 128 | propsData: { 129 | active: false, 130 | onActivated 131 | } 132 | }) 133 | 134 | cy.get('div.vdr').rightclick() 135 | 136 | cy.get('@onActivatedSpy') 137 | .should('not.have.been.called') 138 | 139 | cy.get('div.vdr') 140 | .should('not.have.class', 'active') 141 | 142 | cy.get('@vue').should(wrapper => { 143 | expect(wrapper.emitted()).to.not.have.property('update:active') 144 | }) 145 | }) 146 | 147 | it('should resize the component also when it is activated using prop', () => { 148 | const onResizing = cy.spy().as('onResizingSpy') 149 | 150 | cy.mount(VueDraggableResizable, { 151 | propsData: { 152 | w: 100, 153 | h: 100, 154 | active: false, 155 | onResizing 156 | } 157 | }) 158 | 159 | cy.get('@vue') 160 | .then(wrapper => { 161 | wrapper.setProps({ active: true }) 162 | }) 163 | .then(() => { 164 | cy.get('div.handle-br').move({ deltaX: 100, deltaY: 100 }) 165 | 166 | cy.get('@onResizingSpy') 167 | .should('have.been.called.with', 0, 0, 200, 200) 168 | }) 169 | }) 170 | 171 | it('should activate the component when touching on it', () => { 172 | const onActivated = cy.spy().as('onActivatedSpy') 173 | 174 | cy.mount(VueDraggableResizable, { 175 | propsData: { 176 | onActivated 177 | } 178 | }) 179 | 180 | cy.get('div.vdr').trigger('touchstart') 181 | 182 | cy.get('@onActivatedSpy') 183 | .should('have.been.calledOnce') 184 | 185 | cy.get('@vue').should(wrapper => { 186 | expect(wrapper.emitted()).to.have.property('update:active') 187 | }) 188 | }) 189 | }) 190 | 191 | -------------------------------------------------------------------------------- /tests/cypress/props/axis.cy.js: -------------------------------------------------------------------------------- 1 | import VueDraggableResizable from '@/components/vue-draggable-resizable.vue' 2 | 3 | describe('axis prop', () => { 4 | it('should provide the draggable `axis` prop to the component', () => { 5 | cy.mount(VueDraggableResizable, { 6 | propsData: { 7 | axis: 'x' 8 | } 9 | }) 10 | 11 | cy.get('@vue').should(wrapper => { 12 | expect(wrapper.props().axis).to.equal('x') 13 | }) 14 | }) 15 | 16 | it('should drag the component only on the horizontal axis', () => { 17 | cy.mount(VueDraggableResizable, { 18 | propsData: { 19 | axis: 'x', 20 | x: 0, 21 | y: 0, 22 | w: 100, 23 | h: 100 24 | } 25 | }) 26 | 27 | cy.get('div.vdr') 28 | .trigger('mousedown', { button: 0 }) 29 | .trigger('mousemove', { 30 | pageX: 100, 31 | pageY: 100 32 | }) 33 | .trigger('mouseup') 34 | 35 | cy.get('@vue').should(wrapper => { 36 | const $el = wrapper.vm.$el 37 | 38 | expect($el.style.transform).to.be.oneOf([ 39 | 'translate(42px, 0px)', // Chrome 40 | 'translate(42px)', // Firefox 41 | ]) 42 | }) 43 | }) 44 | 45 | it('should effectively drag the component only on the vertical axis', () => { 46 | cy.mount(VueDraggableResizable, { 47 | propsData: { 48 | axis: 'y', 49 | x: 0, 50 | y: 0, 51 | w: 100, 52 | h: 100 53 | } 54 | }) 55 | 56 | cy.get('div.vdr') 57 | .trigger('mousedown', { button: 0 }) 58 | .trigger('mousemove', { 59 | pageX: 100, 60 | pageY: 100 61 | }) 62 | .trigger('mouseup') 63 | 64 | cy.get('@vue').should(wrapper => { 65 | const $el = wrapper.vm.$el 66 | 67 | expect($el.style.transform).to.equal('translate(0px, 42px)') 68 | }) 69 | }) 70 | }) 71 | -------------------------------------------------------------------------------- /tests/cypress/props/callbacks.cy.js: -------------------------------------------------------------------------------- 1 | import VueDraggableResizable from '@/components/vue-draggable-resizable.vue' 2 | import translateToMatrix from '../utils' 3 | 4 | describe('`onDragStart` and `onResizeStart` props', () => { 5 | 6 | it('should call `onDragStart` callback when the component is clicked', () => { 7 | const onDragStartSpy = cy.spy().as('onDragStartSpy') 8 | 9 | cy.mount(VueDraggableResizable, { 10 | propsData: { 11 | onDragStart: onDragStartSpy 12 | } 13 | }) 14 | 15 | cy.get('div.vdr').click() 16 | 17 | cy.get('@onDragStartSpy').should('have.been.calledOnce') 18 | }) 19 | 20 | it('should prevent activation of the component if the `onDragStart` callback returns false', () => { 21 | const onDragStart = () => false 22 | const onActivatedSpy = cy.spy().as('onActivatedSpy') 23 | 24 | cy.mount(VueDraggableResizable, { 25 | propsData: { 26 | onDragStart, 27 | onActivated: onActivatedSpy 28 | } 29 | }) 30 | 31 | cy.get('div.vdr') 32 | .click() 33 | .should('not.have.class', 'active') 34 | 35 | cy.get('@onActivatedSpy').should('not.have.been.called') 36 | }) 37 | 38 | it('should call `onResizeStart` callback when the component is resized', () => { 39 | const onResizeStartSpy = cy.spy().as('onResizeStartSpy') 40 | 41 | cy.mount(VueDraggableResizable, { 42 | propsData: { 43 | active: true, 44 | onResizeStart: onResizeStartSpy 45 | } 46 | }) 47 | 48 | cy.get('div.handle-br').move({ deltaX: 100, deltaY: 100 }) 49 | 50 | cy.get('@onResizeStartSpy').should('have.been.called') 51 | }) 52 | 53 | it('should prevent resizing the component if the `onResizeStart` callback returns false', () => { 54 | const onResizeStart = () => false 55 | 56 | cy.mount(VueDraggableResizable, { 57 | propsData: { 58 | active: true, 59 | w: 100, 60 | h: 100, 61 | onResizeStart: onResizeStart 62 | } 63 | }) 64 | 65 | cy.get('div.handle-br').move({ deltaX: 100, deltaY: 100 }) 66 | 67 | cy.get('div.vdr') 68 | .should('have.css', 'width', '100px') 69 | .should('have.css', 'height', '100px') 70 | }) 71 | }) 72 | 73 | 74 | describe('`onDrag` and `onResize` props', () => { 75 | 76 | it('should call `onDrag` callback when the component is dragged', () => { 77 | const onDragSpy = cy.spy().as('onDragSpy') 78 | 79 | cy.mount(VueDraggableResizable, { 80 | propsData: { 81 | active: true, 82 | w: 100, 83 | h: 100, 84 | onDrag: onDragSpy 85 | } 86 | }) 87 | 88 | cy.get('div.vdr').move({ deltaX: 100, deltaY: 100 }) 89 | 90 | cy.get('@onDragSpy').should('have.been.calledWith', 100, 100) 91 | }) 92 | 93 | it('should prevent dragging the component if the `onDrag` callback returns false', () => { 94 | const onDragCallback = (x, y) => { 95 | if (x > 10) return false 96 | if (y > 10) return false 97 | } 98 | 99 | cy.mount(VueDraggableResizable, { 100 | propsData: { 101 | active: true, 102 | w: 100, 103 | h: 100, 104 | onDrag: onDragCallback 105 | } 106 | }) 107 | 108 | cy.get('div.vdr') 109 | // intermediate step 110 | .move({ deltaX: 10, deltaY: 10 }) 111 | .should('have.css', 'transform', translateToMatrix('10', '10')) 112 | .should('have.css', 'width', '100px') 113 | .should('have.css', 'height', '100px') 114 | // final step 115 | .move({ deltaX: 100, deltaY: 100 }) 116 | .should('have.css', 'transform', translateToMatrix('10', '10')) 117 | }) 118 | 119 | it('should call `onResize` callback when the component is resized', () => { 120 | const onResizeSpy = cy.spy().as('onResizeSpy') 121 | 122 | cy.mount(VueDraggableResizable, { 123 | propsData: { 124 | active: true, 125 | w: 100, 126 | h: 100, 127 | onResize: onResizeSpy 128 | } 129 | }) 130 | 131 | cy.get('div.handle-br').move({ deltaX: 100, deltaY: 100 }) 132 | 133 | cy.get('@onResizeSpy').should('have.been.calledWith', 'br', 0, 0, 200, 200) 134 | }) 135 | 136 | it('should prevent resizing the component if the `onResize` callback returns false', () => { 137 | const onResizeCallback = (handle, x, y, w, h) => { 138 | if (w > 110) return false 139 | if (h > 110) return false 140 | } 141 | 142 | cy.mount(VueDraggableResizable, { 143 | propsData: { 144 | active: true, 145 | w: 100, 146 | h: 100, 147 | onResize: onResizeCallback 148 | } 149 | }) 150 | 151 | cy.get('div.handle-br').move({ deltaX: 10, deltaY: 10 }) 152 | 153 | cy.get('div.vdr') 154 | .should('have.css', 'width', '110px') 155 | .should('have.css', 'height', '110px') 156 | 157 | cy.get('div.handle-br').move({ deltaX: 100, deltaY: 100 }) 158 | 159 | cy.get('div.vdr') 160 | .should('have.css', 'width', '110px') 161 | .should('have.css', 'height', '110px') 162 | }) 163 | }) 164 | -------------------------------------------------------------------------------- /tests/cypress/props/classes.cy.js: -------------------------------------------------------------------------------- 1 | import VueDraggableResizable from '@/components/vue-draggable-resizable.vue' 2 | 3 | describe('classes props', () => { 4 | 5 | it('should provide the default class name as `class-name` prop', () => { 6 | cy.mount(VueDraggableResizable, { 7 | propsData: { 8 | className: 'my-class' 9 | } 10 | }) 11 | 12 | cy.get('div.my-class').should('have.class', 'my-class') 13 | 14 | cy.get('@vue').should(wrapper => { 15 | expect(wrapper.props().className).to.equal('my-class') 16 | }) 17 | }) 18 | 19 | it('should provide the active class name as `class-name-active` prop', () => { 20 | cy.mount(VueDraggableResizable, { 21 | propsData: { 22 | classNameActive: 'my-active-class', 23 | active: true 24 | } 25 | }) 26 | 27 | cy.get('div.vdr').should('have.class', 'my-active-class') 28 | 29 | cy.get('@vue').should(wrapper => { 30 | expect(wrapper.classes()).to.contain('my-active-class') 31 | }) 32 | }) 33 | 34 | it('should provide the dragging class name as `class-name-dragging` prop', () => { 35 | cy.mount(VueDraggableResizable, { 36 | propsData: { 37 | classNameDragging: 'my-dragging-class' 38 | } 39 | }) 40 | 41 | cy.get('@vue').should(wrapper => { 42 | expect(wrapper.props().classNameDragging).to.equal('my-dragging-class') 43 | }) 44 | }) 45 | 46 | it('should provide the resizing class name as `class-name-resizing` prop', () => { 47 | cy.mount(VueDraggableResizable, { 48 | propsData: { 49 | classNameResizing: 'my-resizing-class' 50 | } 51 | }) 52 | 53 | cy.get('@vue').should(wrapper => { 54 | expect(wrapper.props().classNameResizing).to.equal('my-resizing-class') 55 | }) 56 | }) 57 | 58 | it('should provide the handle class name as `class-name-handle` prop', () => { 59 | cy.mount(VueDraggableResizable, { 60 | propsData: { 61 | classNameHandle: 'my-handle-class' 62 | } 63 | }) 64 | 65 | cy.get('div.my-handle-class').should('have.length', 8) 66 | 67 | cy.get('@vue').should(wrapper => { 68 | expect(wrapper.props().classNameHandle).to.equal('my-handle-class') 69 | }) 70 | }) 71 | }) 72 | -------------------------------------------------------------------------------- /tests/cypress/props/drag-cancel.cy.js: -------------------------------------------------------------------------------- 1 | import VueDraggableResizable from '@/components/vue-draggable-resizable.vue' 2 | import translateToMatrix from '../utils' 3 | 4 | describe('`drag-cancel` prop', () => { 5 | 6 | it('should not activate the component from the selector identified by the `drag-cancel` prop', () => { 7 | const onActivated = cy.spy().as('onActivatedSpy') 8 | 9 | cy.mount(VueDraggableResizable, { 10 | propsData: { 11 | dragCancel: '.drag-cancel', 12 | onActivated 13 | }, 14 | slots: { 15 | default: '