@marsio/vue-draggable 1.0.6 → 1.0.8

package/README.md

@@ -6,7 +6,8 @@ Draggable and DraggableCore are **Vue3** components designed to make elements dr
   <img src="https://user-images.githubusercontent.com/6365230/95649276-f3a02480-0b06-11eb-8504-e0614a780ba4.gif" />
 </p>
 
-## Features
+## ✨ Features
+- **Compatibility**: Compatible with server-rendered apps, PC, and mobile devices.
 - **Drag Handlers**: Offers customizable drag handlers (`startFn`, `dragFn`, `stopFn`) that allow developers to hook into drag start, during drag, and drag stop events, providing flexibility in handling these events.
 - **Position Control**: Supports controlled (`position`) and uncontrolled (`defaultPosition`) modes for element positioning, giving developers the choice to manage the draggable element's position externally or let the component handle it internally.
 - **Axis Constraints**: Allows dragging to be constrained along a specific axis (`axis`) with options for 'x', 'y', 'both', or 'none', enabling more precise control over the draggable behavior.
@@ -15,7 +16,7 @@ Draggable and DraggableCore are **Vue3** components designed to make elements dr
 -  **Grid Snapping**: Allows the draggable element to snap to a grid (`grid` prop), facilitating alignment and precise placement during dragging.
 - **Accessibility and Interaction**: Includes props for disabling the draggable functionality (`disabled`), allowing any mouse button to initiate dragging (`allowAnyClick`), and enabling a hack to prevent text selection during drag (`enableUserSelectHack`), enhancing usability and accessibility.
 
-## Quick Start
+## 📦 Quick Start
 
 To quickly start using `@marsio/vue-draggable`, follow the steps below:
 
@@ -343,7 +344,7 @@ Drag callbacks (`startFn`, `dragFn`, `stopFn`) are called with the [same argumen
 
 ----
 
-### Modern browsers.
+### 🖥 Environment Support
 
 | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png" alt="Opera" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Opera |
 | --- | --- | --- | --- | --- |

package/build/cjs/Draggable.js

@@ -95,32 +95,6 @@ const draggableProps = exports.draggableProps = {
     type: Object,
     default: undefined
   }
-  // axis: VueTypes.oneOf(['both', 'x', 'y', 'none']).def('both'),
-  // bounds: VueTypes.oneOfType([
-  //   VueTypes.shape({
-  //     left: VueTypes.number,
-  //     right: VueTypes.number,
-  //     top: VueTypes.number,
-  //     bottom: VueTypes.number
-  //   }),
-  //   VueTypes.string,
-  //   VueTypes.oneOf([false])
-  // ]).def(false),
-  // defaultClassName: VueTypes.string.def('vue-draggable'),
-  // defaultClassNameDragging: VueTypes.string.def('vue-draggable-dragging'),
-  // defaultClassNameDragged: VueTypes.string.def('vue-draggable-dragged'),
-  // defaultPosition: VueTypes.shape({
-  //   x: VueTypes.number,
-  //   y: VueTypes.number
-  // }).def({x: 0, y: 0}),
-  // positionOffset: VueTypes.shape({
-  //   x: VueTypes.oneOfType([VueTypes.number, VueTypes.string]),
-  //   y: VueTypes.oneOfType([VueTypes.number, VueTypes.string])
-  // }),
-  // position: VueTypes.shape({
-  //   x: VueTypes.number,
-  //   y: VueTypes.number
-  // }).def(undefined)
 };
 const componentName = 'Draggable';
 const Draggable = exports.default = (0, _vue.defineComponent)({
@@ -143,7 +117,7 @@ const Draggable = exports.default = (0, _vue.defineComponent)({
     const rootElement = (0, _vue.ref)(null);
     if (props.position && !(props.dragFn || props.stopFn)) {
       // eslint-disable-next-line no-console
-      console.warn('A `position` was applied to this <Draggable>, without drag handlers. This will make this ' + 'component effectively undraggable. Please attach `onDrag` or `onStop` handlers so you can adjust the ' + '`position` of this element.');
+      console.warn('A `position` was applied to this <Draggable>, without drag handlers. This will make this ' + 'component effectively undraggable. Please attach `dragFn` or `stopFn` handlers so you can adjust the ' + '`position` of this element.');
     }
     const state = (0, _vue.reactive)({
       // Whether or not we are currently dragging.
@@ -162,10 +136,6 @@ const Draggable = exports.default = (0, _vue.defineComponent)({
       // Can only determine if SVG after mounting
       isElementSVG: false
     });
-
-    // const position = ref(props.position);
-    // const prevPropsPosition = ref(null);
-
     const findDOMNode = () => {
       return (0, _get.default)(props, 'nodeRef.value') || rootElement.value;
     };
@@ -192,7 +162,7 @@ const Draggable = exports.default = (0, _vue.defineComponent)({
     };
     const onDrag = (e, coreData) => {
       if (!state.dragging) return false;
-      (0, _log.default)('Draggable: onDrag: %j', coreData);
+      (0, _log.default)('Draggable: dragFn: %j', coreData);
       const uiData = (0, _positionFns.createDraggableData)({
         props,
         state

package/build/cjs/DraggableCore.js

@@ -34,7 +34,6 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
  * - `grid` (Array[Number, Number]): Specifies a grid [x, y] to which the element's movement will be snapped.
  * - `handle` (String): CSS selector that defines the handle element that initiates drag actions. If not defined, the entire element is draggable.
  * - `nodeRef` (Object): A Vue ref object pointing to the draggable element. Used when direct DOM access is necessary.
- *
  * @setup
  * The setup function initializes the component's reactive state and event handlers for drag operations. It handles the
  * initialization and cleanup of event listeners for mouse and touch events that control the drag behavior.
@@ -68,13 +67,6 @@ const defaultDraggableEventHandler = (e, data) => true;
 exports.defaultDraggableEventHandler = defaultDraggableEventHandler;
 let dragEventFor = eventsFor.mouse;
 const draggableCoreDefaultProps = exports.draggableCoreDefaultProps = {
-  // allowAnyClick: VueTypes.bool.def(false),
-  // disabled: VueTypes.bool.def(false),
-  // enableUserSelectHack: VueTypes.bool.def(true),
-  // startFn: VueTypes.func.def(defaultDraggableEventHandler).def(funcVoid),
-  // dragFn: VueTypes.func.def(defaultDraggableEventHandler).def(funcVoid),
-  // stopFn: VueTypes.func.def(defaultDraggableEventHandler).def(funcVoid),
-  // scale: VueTypes.number.def(1),
   allowAnyClick: {
     type: Boolean,
     default: false
@@ -111,7 +103,6 @@ const draggableCoreProps = exports.draggableCoreProps = {
   },
   offsetParent: {
     type: Object,
-    default: () => document.body,
     validator: value => (0, _shims.propIsNotNode)(value)
   },
   grid: {
@@ -135,6 +126,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
   props: {
     ...draggableCoreProps
   },
+  emits: ['mousedown', 'mouseup', 'touchend'],
   setup(props, _ref) {
     let {
       slots,
@@ -258,7 +250,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
       } = thisNode;
 
       // Short circuit if handle or cancel prop was provided and selector doesn't match.
-      if (props.disabled || !(e.target instanceof ownerDocument.defaultView.Node) || props.handle && !(0, _domFns.matchesSelectorAndParentsTo)(e.target, props.handle, thisNode) || props.cancel && (0, _domFns.matchesSelectorAndParentsTo)(e.target, props.cancel, thisNode)) {
+      if (props.disabled || ownerDocument && !(e.target instanceof ownerDocument.defaultView.Node) || props.handle && !(0, _domFns.matchesSelectorAndParentsTo)(e.target, props.handle, thisNode) || props.cancel && (0, _domFns.matchesSelectorAndParentsTo)(e.target, props.cancel, thisNode)) {
         return;
       }
 
@@ -314,6 +306,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
     };
     const onMousedown = e => {
       dragEventFor = eventsFor.mouse; // on touchscreen laptops we could switch back to mouse
+      emit('mousedown', e);
       return handleDragStart(e);
     };
     const onMouseup = e => {
@@ -361,12 +354,17 @@ var _default = exports.default = (0, _vue.defineComponent)({
     return () => {
       const child = slots.default ? slots.default()[0] : null;
       if (!child) return null;
+      // 判断child.type是否是一个组件
+      const isComponent = typeof child.type === 'object' && 'name' in child.type;
+      // const clonedChildren = isVNode(child) ? cloneVNode(child, { onMousedown, onMouseup, onTouchend, ref: props.nodeRef || rootElement }) : child;
       const clonedChildren = (0, _vue.isVNode)(child) ? (0, _vue.cloneVNode)(child, {
         onMousedown,
         onMouseup,
         onTouchend,
-        ref: rootElement
+        ref: props.nodeRef || rootElement
       }) : child;
+      // const clonedChildren = isVNode(child) ? cloneVNode(child, {}) : child;
+
       return clonedChildren;
     };
   }

package/build/web/vue-draggable.min.js

@@ -1 +1 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("vue")):"function"==typeof define&&define.amd?define(["vue"],t):"object"==typeof exports?exports.VueDraggable=t(require("vue")):e.VueDraggable=t(e.Vue)}(self,(e=>(()=>{var t={835:(e,t,n)=>{"use strict";function r(e){var t,n,o="";if("string"==typeof e||"number"==typeof e)o+=e;else if("object"==typeof e)if(Array.isArray(e))for(t=0;t<e.length;t++)e[t]&&(n=r(e[t]))&&(o&&(o+=" "),o+=n);else for(t in e)e[t]&&(o&&(o+=" "),o+=t);return o}function o(){for(var e,t,n=0,o="";n<arguments.length;)(e=arguments[n++])&&(t=r(e))&&(o&&(o+=" "),o+=t);return o}n.r(t),n.d(t,{clsx:()=>o,default:()=>a});const a=o},582:e=>{e.exports=function(e,t){return null==e?void 0:e[t]}},644:(e,t,n)=>{var r=n(582);e.exports=function(e,t,n){var o=null==e?void 0:r(e,t);return void 0===o?n:o}},116:function(e,t,n){"use strict";var r=this&&this.__assign||function(){return r=Object.assign||function(e){for(var t,n=1,r=arguments.length;n<r;n++)for(var o in t=arguments[n])Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o]);return e},r.apply(this,arguments)},o=this&&this.__rest||function(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(r=Object.getOwnPropertySymbols(e);o<r.length;o++)t.indexOf(r[o])<0&&Object.prototype.propertyIsEnumerable.call(e,r[o])&&(n[r[o]]=e[r[o]])}return n},a=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0}),t.DraggableCore=t.default=t.draggableProps=void 0;var i=n(594),l=n(594),u=a(n(644)),s=a(n(835)),d=n(212),c=n(461),f=n(811),g=a(n(917));t.DraggableCore=g.default;var p=a(n(463)),v=n(917);t.draggableProps=r(r({},v.draggableCoreProps),{axis:{type:String,default:"both"},bounds:{type:[Object,String,Boolean],default:!1},defaultClassName:{type:String,default:"vue-draggable"},defaultClassNameDragging:{type:String,default:"vue-draggable-dragging"},defaultClassNameDragged:{type:String,default:"vue-draggable-dragged"},defaultPosition:{type:Object,default:function(){return{x:0,y:0}}},positionOffset:{type:Object},position:{type:Object,default:void 0}});var m="Draggable",y=(0,l.defineComponent)({compatConfig:{MODE:3},name:m,inheritAttrs:!1,props:r(r({},t.draggableProps),{style:(0,f.dontSetMe)("style",m),class:(0,f.dontSetMe)("class",m),transform:(0,f.dontSetMe)("transform",m)}),setup:function(e,t){var n=t.slots,a=(0,l.ref)(null);e.position&&!e.dragFn&&e.stopFn;var f=(0,l.reactive)({dragging:!1,dragged:!1,x:e.position?e.position.x:e.defaultPosition.x,y:e.position?e.position.y:e.defaultPosition.y,prevPropsPosition:r({},e.position),slackX:0,slackY:0,isElementSVG:!1}),v=function(){return(0,u.default)(e,"nodeRef.value")||a.value};(0,l.onMounted)((function(){void 0!==window.SVGElement&&v()instanceof window.SVGElement&&(f.isElementSVG=!0)})),(0,l.onUnmounted)((function(){f.dragging=!1}));var m=function(t,n){var r;if((0,p.default)("Draggable: onDragStart: %j",n),!1===(null===(r=e.startFn)||void 0===r?void 0:r.call(e,t,(0,c.createDraggableData)({props:e,state:f},n))))return!1;f.dragging=!0,f.dragged=!0},y=function(t,n){var r,o,a;if(!f.dragging)return!1;(0,p.default)("Draggable: onDrag: %j",n);var i=(0,c.createDraggableData)({props:e,state:f},n),l={x:i.x,y:i.y,slackX:0,slackY:0};if(e.bounds){var u=l.x,s=l.y;l.x+=f.slackX,l.y+=f.slackY;var d=(0,c.getBoundPosition)({props:e,findDOMNode:v},l.x,l.y),g=d[0],m=d[1];l.x=g,l.y=m,l.slackX=f.slackX+(u-l.x),l.slackY=f.slackY+(s-l.y),i.x=l.x,i.y=l.y,i.deltaX=l.x-(null!==(r=f.x)&&void 0!==r?r:0),i.deltaY=l.y-(null!==(o=f.y)&&void 0!==o?o:0)}if(!1===(null===(a=e.dragFn)||void 0===a?void 0:a.call(e,t,i)))return!1;Object.keys(l).forEach((function(e){f[e]=l[e]}))},b=function(t,n){var r;if(!f.dragging)return!1;if(!1===(null===(r=e.stopFn)||void 0===r?void 0:r.call(e,t,(0,c.createDraggableData)({props:e,state:f},n))))return!1;(0,p.default)("Draggable: onDragStop: %j",n);var o={dragging:!1,slackX:0,slackY:0};if(Boolean(e.position)){var a=e.position,i=a.x,l=a.y;o.x=i,o.y=l}Object.keys(o).forEach((function(e){f[e]=o[e]}))};return function(){e.axis,e.bounds;var t,u,p,v=e.defaultPosition,h=e.defaultClassName,D=e.defaultClassNameDragging,S=e.defaultClassNameDragged,x=e.position,P=e.positionOffset,O=(e.scale,o(e,["axis","bounds","defaultPosition","defaultClassName","defaultClassNameDragging","defaultClassNameDragged","position","positionOffset","scale"])),C={},w="",N=!Boolean(x)||f.dragging,T=x||v,j={x:null!==(u=(0,c.canDragX)({props:e})&&N?f.x:T.x)&&void 0!==u?u:0,y:null!==(p=(0,c.canDragY)({props:e})&&N?f.y:T.y)&&void 0!==p?p:0};f.isElementSVG?w=(0,d.createSVGTransform)(j,P):C=(0,d.createCSSTransform)(j,P);var M=(0,s.default)(h,((t={})[D]=f.dragging,t[S]=f.dragged,t)),E=n.default?n.default()[0]:null;if(!E)return null;var _,X=(0,l.cloneVNode)(E,{class:M,style:C,transform:w}),Y=r(r({},O),{startFn:m,dragFn:y,stopFn:b});return(0,i.createVNode)(g.default,(0,i.mergeProps)({ref:a},Y),"function"==typeof(_=X)||"[object Object]"===Object.prototype.toString.call(_)&&!(0,i.isVNode)(_)?X:{default:function(){return[X]}})}}});t.default=y},917:function(e,t,n){"use strict";var r=this&&this.__assign||function(){return r=Object.assign||function(e){for(var t,n=1,r=arguments.length;n<r;n++)for(var o in t=arguments[n])Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o]);return e},r.apply(this,arguments)},o=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0}),t.draggableCoreProps=t.draggableCoreDefaultProps=t.defaultDraggableEventHandler=void 0;var a=o(n(644)),i=n(594),l=function(){},u=n(212),s=n(461),d=o(n(463)),c=n(811),f={start:"touchstart",move:"touchmove",stop:"touchend"},g={start:"mousedown",move:"mousemove",stop:"mouseup"};t.defaultDraggableEventHandler=function(e,t){return!0};var p=g;t.draggableCoreDefaultProps={allowAnyClick:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},enableUserSelectHack:{type:Boolean,default:!0},startFn:{type:Function,default:function(){return l}},dragFn:{type:Function,default:function(){return l}},stopFn:{type:Function,default:function(){return l}},scale:{type:Number,default:1}},t.draggableCoreProps=r(r({},t.draggableCoreDefaultProps),{cancel:{type:String},offsetParent:{type:Object,default:function(){return document.body},validator:function(e){return(0,c.propIsNotNode)(e)}},grid:{type:Array},handle:{type:String},nodeRef:{type:Object,default:function(){return null}}});t.default=(0,i.defineComponent)({compatConfig:{MODE:3},name:"DraggableCore",inheritAttrs:!1,props:r({},t.draggableCoreProps),setup:function(e,t){var n=t.slots,r=t.emit,o=(0,i.ref)(null),l=(0,i.reactive)({dragging:!1,lastX:NaN,lastY:NaN,touchIdentifier:null,mounted:!1}),c=function(){var t;return(null===(t=e.nodeRef)||void 0===t?void 0:t.value)||o.value},v=function(t){var n,r,o=(0,s.getControlPosition)(t,{props:e,findDOMNode:c},l.touchIdentifier);if(null!=o){var a=o.x,i=o.y;if(Array.isArray(e.grid)){var u=a-l.lastX,f=i-l.lastY;if(u=(n=(0,s.snapToGrid)(e.grid,u,f))[0],f=n[1],!u&&!f)return;a=l.lastX+u,i=l.lastY+f}var g=(0,s.createCoreData)({props:e,findDOMNode:c,state:l},a,i);if((0,d.default)("DraggableCore: handleDrag: %j",g),!1!==(null===(r=e.dragFn)||void 0===r?void 0:r.call(e,t,g))&&!1!==l.mounted)l.lastX=a,l.lastY=i;else try{m(new MouseEvent("mouseup"))}catch(e){var p=document.createEvent("MouseEvents");p.initMouseEvent("mouseup",!0,!0,window,0,0,0,0,0,!1,!1,!1,!1,0,null),m(p)}}},m=function(t){var n,r;if(l.dragging){var o=(0,s.getControlPosition)(t,{props:e,findDOMNode:c},l.touchIdentifier);if(null!=o){var a=o.x,i=o.y;if(Array.isArray(e.grid)){var f=a-l.lastX||0,g=i-l.lastY||0;f=(n=(0,s.snapToGrid)(e.grid,f,g))[0],g=n[1],a=l.lastX+f,i=l.lastY+g}var y=(0,s.createCoreData)({props:e,findDOMNode:c,state:l},a,i);if(!1===(null===(r=e.stopFn)||void 0===r?void 0:r.call(e,t,y))||!1===l.mounted)return!1;var b=c();b&&e.enableUserSelectHack&&(0,u.removeUserSelectStyles)(b.ownerDocument),(0,d.default)("DraggableCore: handleDragStop: %j",y),l.dragging=!1,l.lastX=NaN,l.lastY=NaN,b&&((0,d.default)("DraggableCore: Removing handlers"),(0,u.removeEvent)(b.ownerDocument,p.move,v),(0,u.removeEvent)(b.ownerDocument,p.stop,m))}}},y=function(t){var n;if(r("mousedown",t),!e.allowAnyClick&&"number"==typeof t.button&&0!==t.button)return!1;var o=c();(0,a.default)(o,"ownerDocument.body");var i=o.ownerDocument;if(!(e.disabled||!(t.target instanceof i.defaultView.Node)||e.handle&&!(0,u.matchesSelectorAndParentsTo)(t.target,e.handle,o)||e.cancel&&(0,u.matchesSelectorAndParentsTo)(t.target,e.cancel,o))){"touchstart"===t.type&&t.preventDefault();var f=(0,u.getTouchIdentifier)(t);l.touchIdentifier=f;var g=(0,s.getControlPosition)(t,{props:e,findDOMNode:c},f);if(null!=g){var y=g.x,b=g.y,h=(0,s.createCoreData)({props:e,findDOMNode:c,state:l},y,b);(0,d.default)("DraggableCore: handleDragStart: %j",h),(0,d.default)("calling",e.startFn),!1!==(null===(n=e.startFn)||void 0===n?void 0:n.call(e,t,h))&&!1!==l.mounted&&(e.enableUserSelectHack&&(0,u.addUserSelectStyles)(i),l.dragging=!0,l.lastX=y,l.lastY=b,(0,u.addEvent)(i,p.move,v),(0,u.addEvent)(i,p.stop,m))}}},b=function(e){return p=g,y(e)},h=function(e){return p=g,m(e)},D=function(e){return p=f,y(e)},S=function(e){return p=f,m(e)};return(0,i.onMounted)((function(){l.mounted=!0;var e=c();e&&(0,u.addEvent)(e,f.start,D,{passive:!1})})),(0,i.onUnmounted)((function(){l.mounted=!1;var t=c();if(t){var n=t.ownerDocument;(0,u.removeEvent)(n,g.move,v),(0,u.removeEvent)(n,f.move,v),(0,u.removeEvent)(n,g.stop,m),(0,u.removeEvent)(n,f.stop,m),(0,u.removeEvent)(t,f.start,D,{passive:!1}),e.enableUserSelectHack&&(0,u.removeUserSelectStyles)(n)}})),function(){var e=n.default?n.default()[0]:null;return e?(0,i.isVNode)(e)?(0,i.cloneVNode)(e,{onMousedown:b,onMouseup:h,onTouchend:S,ref:o}):e:null}}})},549:(e,t,n)=>{"use strict";var r=n(116),o=r.default,a=r.DraggableCore;e.exports=o,e.exports.default=o,e.exports.DraggableCore=a},212:function(e,t,n){"use strict";var r=this&&this.__assign||function(){return r=Object.assign||function(e){for(var t,n=1,r=arguments.length;n<r;n++)for(var o in t=arguments[n])Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o]);return e},r.apply(this,arguments)},o=this&&this.__createBinding||(Object.create?function(e,t,n,r){void 0===r&&(r=n);var o=Object.getOwnPropertyDescriptor(t,n);o&&!("get"in o?!t.__esModule:o.writable||o.configurable)||(o={enumerable:!0,get:function(){return t[n]}}),Object.defineProperty(e,r,o)}:function(e,t,n,r){void 0===r&&(r=n),e[r]=t[n]}),a=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),i=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var n in e)"default"!==n&&Object.prototype.hasOwnProperty.call(e,n)&&o(t,e,n);return a(t,e),t};Object.defineProperty(t,"__esModule",{value:!0}),t.removeUserSelectStyles=t.addUserSelectStyles=t.removeClassName=t.addClassName=t.getTouchIdentifier=t.getTouch=t.createSVGTransform=t.createCSSTransform=t.getTranslation=t.offsetXYFromParent=t.innerWidth=t.innerHeight=t.outerWidth=t.outerHeight=t.removeEvent=t.addEvent=t.matchesSelectorAndParentsTo=t.matchesSelector=void 0;var l=i(n(157)),u=n(811),s="";t.matchesSelector=function(e,t){return s||(s=(0,u.findInArray)(["matches","webkitMatchesSelector","mozMatchesSelector","msMatchesSelector","oMatchesSelector"],(function(t){return(0,u.isFunction)(e[t])}))),!!(0,u.isFunction)(e[s])&&e[s](t)};t.matchesSelectorAndParentsTo=function(e,n,r){var o=e;do{if((0,t.matchesSelector)(o,n))return!0;if(o===r)return!1;o=o.parentNode}while(o);return!1};t.addEvent=function(e,t,n,o){if(e){var a=r({capture:!0},o);e.addEventListener?e.addEventListener(t,n,a):e.attachEvent?e.attachEvent("on".concat(t),n):e["on".concat(t)]=n}};t.removeEvent=function(e,t,n,o){var a;if(e){var i=r({capture:!0},o);e.removeEventListener?e.removeEventListener(t,n,i):e.detachEvent?null===(a=e.detachEvent)||void 0===a||a.call(e,"on"+t,n):e["on".concat(t)]=null}};t.outerHeight=function(e){var t,n=e.clientHeight,r=null===(t=e.ownerDocument.defaultView)||void 0===t?void 0:t.getComputedStyle(e);return n+=(0,u.int)(r.borderTopWidth),n+=(0,u.int)(r.borderBottomWidth)};t.outerWidth=function(e){var t,n,r=e.clientWidth,o=null===(n=null===(t=e.ownerDocument)||void 0===t?void 0:t.defaultView)||void 0===n?void 0:n.getComputedStyle(e);return r+=(0,u.int)(o.borderLeftWidth),r+=(0,u.int)(o.borderRightWidth)};t.innerHeight=function(e){var t,n,r=e.clientHeight,o=null===(n=null===(t=e.ownerDocument)||void 0===t?void 0:t.defaultView)||void 0===n?void 0:n.getComputedStyle(e);return r-=(0,u.int)(o.paddingTop),r-=(0,u.int)(o.paddingBottom)};t.innerWidth=function(e){var t,n,r=e.clientWidth,o=null===(n=null===(t=e.ownerDocument)||void 0===t?void 0:t.defaultView)||void 0===n?void 0:n.getComputedStyle(e);return r-=(0,u.int)(o.paddingLeft),r-=(0,u.int)(o.paddingRight)};t.offsetXYFromParent=function(e,t,n){var r=t===t.ownerDocument.body?{left:0,top:0}:t.getBoundingClientRect();return{x:(e.clientX+t.scrollLeft-r.left)/n,y:(e.clientY+t.scrollTop-r.top)/n}};t.getTranslation=function(e,t,n){var r=e.x,o=e.y,a="translate(".concat(r).concat(n,",").concat(o).concat(n,")");if(t){var i="".concat("string"==typeof t.x?t.x:t.x+n),l="".concat("string"==typeof t.y?t.y:t.y+n);a="translate(".concat(i,", ").concat(l,")")+a}return a};t.createCSSTransform=function(e,n){var r,o=(0,t.getTranslation)(e,n,"px");return(r={})[(0,l.browserPrefixToKey)("transform",l.default)]=o,r};t.createSVGTransform=function(e,n){return(0,t.getTranslation)(e,n,"")};t.getTouch=function(e,t){return e.targetTouches&&(0,u.findInArray)(e.targetTouches,(function(e){return t===e.identifier}))||e.changedTouches&&(0,u.findInArray)(e.changedTouches,(function(e){return t===e.identifier}))};t.getTouchIdentifier=function(e){return e.targetTouches&&e.targetTouches[0]?e.targetTouches[0].identifier:e.changedTouches&&e.changedTouches[0]?e.changedTouches[0].identifier:null};t.addClassName=function(e,t){e.classList?e.classList.add(t):e.className.match(new RegExp("(?:^|\\s)".concat(t,"(?!\\S)")))||(e.className+=" ".concat(t))};t.removeClassName=function(e,t){e.classList?e.classList.remove(t):e.className=e.className.replace(new RegExp("(?:^|\\s)".concat(t,"(?!\\S)"),"g"),"")};t.addUserSelectStyles=function(e){if(e){var n=e.getElementById("vue-draggable-style-el");n||((n=e.createElement("style")).type="text/css",n.id="vue-draggable-style-el",n.innerHTML=".vue-draggable-transparent-selection *::-moz-selection {all: inherit;}\n",n.innerHTML+=".vue-draggable-transparent-selection *::selection {all: inherit;}\n",e.getElementsByTagName("head")[0].appendChild(n)),e.body&&(0,t.addClassName)(e.body,"vue-draggable-transparent-selection")}};t.removeUserSelectStyles=function(e){if(e)try{e.body&&(0,t.removeClassName)(e.body,"vue-draggable-transparent-selection");var n=e.getSelection();n&&"Caret"!==n.type&&n.removeAllRanges()}catch(e){}}},157:(e,t)=>{"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.browserPrefixToStyle=t.browserPrefixToKey=t.getPrefix=void 0;var n=["Moz","Webkit","O","ms"];function r(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"transform";if("undefined"==typeof window||void 0===window.document)return"";var t=window.document.documentElement.style;if(e in t)return"";for(var r=0;r<n.length;r++)if(o(e,n[r])in t)return n[r];return""}function o(e,t){return t?"".concat(t).concat(function(e){for(var t="",n=!0,r=0;r<e.length;r++)n?(t+=e[r].toUpperCase(),n=!1):"-"===e[r]?n=!0:t+=e[r];return t}(e)):e}t.getPrefix=r,t.browserPrefixToKey=o,t.browserPrefixToStyle=function(e,t){return t?"-".concat(t.toLowerCase(),"-").concat(e):e},t.default=r()},463:(e,t)=>{"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(){}},461:(e,t,n)=>{"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.createDraggableData=t.createCoreData=t.getControlPosition=t.canDragY=t.canDragX=t.snapToGrid=t.getBoundPosition=void 0;var r=n(212),o=n(811),a=function(e){return e.findDOMNode()},i=function(e,t){if(!(t in e))return 0;var n=e[t],r=parseInt(n,10);return isNaN(r)?0:r};t.getBoundPosition=function(e,t,n){if(!e.props.bounds)return[t,n];var o=e.props.bounds;o="string"==typeof o?o:function(e){return{left:e.left,top:e.top,right:e.right,bottom:e.bottom}}(o);var l=a(e);if(!l)return[t,n];var u=l.ownerDocument,s=null==u?void 0:u.defaultView;if(!s)return[t,n];if("string"==typeof o){var d="parent"===o?l.parentNode:u.querySelector(o);if(!(d instanceof s.HTMLElement))throw new Error('Bounds selector "'.concat(o,'" could not find an element.'));var c=s.getComputedStyle(l),f=s.getComputedStyle(d);o={left:-l.offsetLeft+i(f,"paddingLeft")+i(c,"marginLeft"),top:-l.offsetTop+i(f,"paddingTop")+i(c,"marginTop"),right:(0,r.innerWidth)(d)-(0,r.outerWidth)(l)-l.offsetLeft+i(f,"paddingRight")-i(c,"marginRight"),bottom:(0,r.innerHeight)(d)-(0,r.outerHeight)(l)-l.offsetTop+i(f,"paddingBottom")-i(c,"marginBottom")}}return[t=Math.max(Math.min(t,o.right||0),o.left||0),n=Math.max(Math.min(n,o.bottom||0),o.top||0)]};t.snapToGrid=function(e,t,n){return[Math.round(t/e[0])*e[0],Math.round(n/e[1])*e[1]]};t.canDragX=function(e){return"both"===e.props.axis||"x"===e.props.axis};t.canDragY=function(e){return"both"===e.props.axis||"y"===e.props.axis};t.getControlPosition=function(e,t,n){var o="number"==typeof n?(0,r.getTouch)(e,n):null;if("number"==typeof n&&!o)return null;var i=a(t),l=t.props.offsetParent||i.offsetParent||i.ownerDocument.body;return(0,r.offsetXYFromParent)(o||e,l,t.props.scale)};t.createCoreData=function(e,t,n){var r=e.state,i=!(0,o.isNum)(r.lastX),l=a(e);return i?{node:l,deltaX:0,deltaY:0,lastX:t,lastY:n,x:t,y:n}:{node:l,deltaX:t-r.lastX,deltaY:n-r.lastY,lastX:r.lastX,lastY:r.lastY,x:t,y:n}};t.createDraggableData=function(e,t){var n=e.props.scale;return{node:t.node,x:e.state.x+t.deltaX/n,y:e.state.y+t.deltaY/n,deltaX:t.deltaX/n,deltaY:t.deltaY/n,lastX:e.state.x,lastY:e.state.y}}},811:(e,t)=>{"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.propIsNotNode=t.dontSetMe=t.int=t.isNum=t.isFunction=t.findInArray=void 0,t.findInArray=function(e,t){for(var n=0,r=e.length;n<r;n++){var o=e instanceof TouchList?e.item(n):e[n];if(null!==o&&t(o,n,e))return o}},t.isFunction=function(e){return"function"==typeof e||"[object Function]"===Object.prototype.toString.call(e)},t.isNum=function(e){return"number"==typeof e&&!isNaN(e)},t.int=function(e){return parseInt(e,10)},t.dontSetMe=function(e,t){return{validator:function(){return!!e}}},t.propIsNotNode=function(e){return"object"==typeof e&&null!==e&&"nodeType"in e&&1===e.nodeType}},594:t=>{"use strict";t.exports=e}},n={};function r(e){var o=n[e];if(void 0!==o)return o.exports;var a=n[e]={exports:{}};return t[e].call(a.exports,a,a.exports,r),a.exports}return r.d=(e,t)=>{for(var n in t)r.o(t,n)&&!r.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},r.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r(549)})()));
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("vue")):"function"==typeof define&&define.amd?define(["vue"],t):"object"==typeof exports?exports.VueDraggable=t(require("vue")):e.VueDraggable=t(e.Vue)}(self,(e=>(()=>{var t={582:e=>{e.exports=function(e,t){return null==e?void 0:e[t]}},644:(e,t,n)=>{var r=n(582);e.exports=function(e,t,n){var o=null==e?void 0:r(e,t);return void 0===o?n:o}},116:function(e,t,n){"use strict";var r=this&&this.__assign||function(){return r=Object.assign||function(e){for(var t,n=1,r=arguments.length;n<r;n++)for(var o in t=arguments[n])Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o]);return e},r.apply(this,arguments)},o=this&&this.__rest||function(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(r=Object.getOwnPropertySymbols(e);o<r.length;o++)t.indexOf(r[o])<0&&Object.prototype.propertyIsEnumerable.call(e,r[o])&&(n[r[o]]=e[r[o]])}return n},a=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0}),t.DraggableCore=t.default=t.draggableProps=void 0;var i=n(594),l=n(594),u=a(n(644)),s=a(n(53)),d=n(212),c=n(461),f=n(811),g=a(n(917));t.DraggableCore=g.default;var p=a(n(463)),v=n(917);t.draggableProps=r(r({},v.draggableCoreProps),{axis:{type:String,default:"both"},bounds:{type:[Object,String,Boolean],default:!1},defaultClassName:{type:String,default:"vue-draggable"},defaultClassNameDragging:{type:String,default:"vue-draggable-dragging"},defaultClassNameDragged:{type:String,default:"vue-draggable-dragged"},defaultPosition:{type:Object,default:function(){return{x:0,y:0}}},positionOffset:{type:Object},position:{type:Object,default:void 0}});var m="Draggable",y=(0,l.defineComponent)({compatConfig:{MODE:3},name:m,inheritAttrs:!1,props:r(r({},t.draggableProps),{style:(0,f.dontSetMe)("style",m),class:(0,f.dontSetMe)("class",m),transform:(0,f.dontSetMe)("transform",m)}),setup:function(e,t){var n=t.slots,a=(0,l.ref)(null);e.position&&!e.dragFn&&e.stopFn;var f=(0,l.reactive)({dragging:!1,dragged:!1,x:e.position?e.position.x:e.defaultPosition.x,y:e.position?e.position.y:e.defaultPosition.y,prevPropsPosition:r({},e.position),slackX:0,slackY:0,isElementSVG:!1}),v=function(){return(0,u.default)(e,"nodeRef.value")||a.value};(0,l.onMounted)((function(){void 0!==window.SVGElement&&v()instanceof window.SVGElement&&(f.isElementSVG=!0)})),(0,l.onUnmounted)((function(){f.dragging=!1}));var m=function(t,n){var r;if((0,p.default)("Draggable: onDragStart: %j",n),!1===(null===(r=e.startFn)||void 0===r?void 0:r.call(e,t,(0,c.createDraggableData)({props:e,state:f},n))))return!1;f.dragging=!0,f.dragged=!0},y=function(t,n){var r,o,a;if(!f.dragging)return!1;(0,p.default)("Draggable: dragFn: %j",n);var i=(0,c.createDraggableData)({props:e,state:f},n),l={x:i.x,y:i.y,slackX:0,slackY:0};if(e.bounds){var u=l.x,s=l.y;l.x+=f.slackX,l.y+=f.slackY;var d=(0,c.getBoundPosition)({props:e,findDOMNode:v},l.x,l.y),g=d[0],m=d[1];l.x=g,l.y=m,l.slackX=f.slackX+(u-l.x),l.slackY=f.slackY+(s-l.y),i.x=l.x,i.y=l.y,i.deltaX=l.x-(null!==(r=f.x)&&void 0!==r?r:0),i.deltaY=l.y-(null!==(o=f.y)&&void 0!==o?o:0)}if(!1===(null===(a=e.dragFn)||void 0===a?void 0:a.call(e,t,i)))return!1;Object.keys(l).forEach((function(e){f[e]=l[e]}))},b=function(t,n){var r;if(!f.dragging)return!1;if(!1===(null===(r=e.stopFn)||void 0===r?void 0:r.call(e,t,(0,c.createDraggableData)({props:e,state:f},n))))return!1;(0,p.default)("Draggable: onDragStop: %j",n);var o={dragging:!1,slackX:0,slackY:0};if(Boolean(e.position)){var a=e.position,i=a.x,l=a.y;o.x=i,o.y=l}Object.keys(o).forEach((function(e){f[e]=o[e]}))};return function(){e.axis,e.bounds;var t,u,p,v=e.defaultPosition,h=e.defaultClassName,S=e.defaultClassNameDragging,D=e.defaultClassNameDragged,x=e.position,P=e.positionOffset,O=(e.scale,o(e,["axis","bounds","defaultPosition","defaultClassName","defaultClassNameDragging","defaultClassNameDragged","position","positionOffset","scale"])),w={},C="",N=!Boolean(x)||f.dragging,T=x||v,j={x:null!==(u=(0,c.canDragX)({props:e})&&N?f.x:T.x)&&void 0!==u?u:0,y:null!==(p=(0,c.canDragY)({props:e})&&N?f.y:T.y)&&void 0!==p?p:0};f.isElementSVG?C=(0,d.createSVGTransform)(j,P):w=(0,d.createCSSTransform)(j,P);var M=(0,s.default)(h,((t={})[S]=f.dragging,t[D]=f.dragged,t)),E=n.default?n.default()[0]:null;if(!E)return null;var _,X=(0,l.cloneVNode)(E,{class:M,style:w,transform:C}),Y=r(r({},O),{startFn:m,dragFn:y,stopFn:b});return(0,i.createVNode)(g.default,(0,i.mergeProps)({ref:a},Y),"function"==typeof(_=X)||"[object Object]"===Object.prototype.toString.call(_)&&!(0,i.isVNode)(_)?X:{default:function(){return[X]}})}}});t.default=y},917:function(e,t,n){"use strict";var r=this&&this.__assign||function(){return r=Object.assign||function(e){for(var t,n=1,r=arguments.length;n<r;n++)for(var o in t=arguments[n])Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o]);return e},r.apply(this,arguments)},o=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0}),t.draggableCoreProps=t.draggableCoreDefaultProps=t.defaultDraggableEventHandler=void 0;var a=o(n(644)),i=n(594),l=function(){},u=n(212),s=n(461),d=o(n(463)),c=n(811),f={start:"touchstart",move:"touchmove",stop:"touchend"},g={start:"mousedown",move:"mousemove",stop:"mouseup"};t.defaultDraggableEventHandler=function(e,t){return!0};var p=g;t.draggableCoreDefaultProps={allowAnyClick:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},enableUserSelectHack:{type:Boolean,default:!0},startFn:{type:Function,default:function(){return l}},dragFn:{type:Function,default:function(){return l}},stopFn:{type:Function,default:function(){return l}},scale:{type:Number,default:1}},t.draggableCoreProps=r(r({},t.draggableCoreDefaultProps),{cancel:{type:String},offsetParent:{type:Object,validator:function(e){return(0,c.propIsNotNode)(e)}},grid:{type:Array},handle:{type:String},nodeRef:{type:Object,default:function(){return null}}});t.default=(0,i.defineComponent)({compatConfig:{MODE:3},name:"DraggableCore",inheritAttrs:!1,props:r({},t.draggableCoreProps),emits:["mousedown","mouseup","touchend"],setup:function(e,t){var n=t.slots,r=t.emit,o=(0,i.ref)(null),l=(0,i.reactive)({dragging:!1,lastX:NaN,lastY:NaN,touchIdentifier:null,mounted:!1}),c=function(){var t;return(null===(t=e.nodeRef)||void 0===t?void 0:t.value)||o.value},v=function(t){var n,r,o=(0,s.getControlPosition)(t,{props:e,findDOMNode:c},l.touchIdentifier);if(null!=o){var a=o.x,i=o.y;if(Array.isArray(e.grid)){var u=a-l.lastX,f=i-l.lastY;if(u=(n=(0,s.snapToGrid)(e.grid,u,f))[0],f=n[1],!u&&!f)return;a=l.lastX+u,i=l.lastY+f}var g=(0,s.createCoreData)({props:e,findDOMNode:c,state:l},a,i);if((0,d.default)("DraggableCore: handleDrag: %j",g),!1!==(null===(r=e.dragFn)||void 0===r?void 0:r.call(e,t,g))&&!1!==l.mounted)l.lastX=a,l.lastY=i;else try{m(new MouseEvent("mouseup"))}catch(e){var p=document.createEvent("MouseEvents");p.initMouseEvent("mouseup",!0,!0,window,0,0,0,0,0,!1,!1,!1,!1,0,null),m(p)}}},m=function(t){var n,r;if(l.dragging){var o=(0,s.getControlPosition)(t,{props:e,findDOMNode:c},l.touchIdentifier);if(null!=o){var a=o.x,i=o.y;if(Array.isArray(e.grid)){var f=a-l.lastX||0,g=i-l.lastY||0;f=(n=(0,s.snapToGrid)(e.grid,f,g))[0],g=n[1],a=l.lastX+f,i=l.lastY+g}var y=(0,s.createCoreData)({props:e,findDOMNode:c,state:l},a,i);if(!1===(null===(r=e.stopFn)||void 0===r?void 0:r.call(e,t,y))||!1===l.mounted)return!1;var b=c();b&&e.enableUserSelectHack&&(0,u.removeUserSelectStyles)(b.ownerDocument),(0,d.default)("DraggableCore: handleDragStop: %j",y),l.dragging=!1,l.lastX=NaN,l.lastY=NaN,b&&((0,d.default)("DraggableCore: Removing handlers"),(0,u.removeEvent)(b.ownerDocument,p.move,v),(0,u.removeEvent)(b.ownerDocument,p.stop,m))}}},y=function(t){var n;if(r("mousedown",t),!e.allowAnyClick&&"number"==typeof t.button&&0!==t.button)return!1;var o=c();(0,a.default)(o,"ownerDocument.body");var i=o.ownerDocument;if(!(e.disabled||i&&!(t.target instanceof i.defaultView.Node)||e.handle&&!(0,u.matchesSelectorAndParentsTo)(t.target,e.handle,o)||e.cancel&&(0,u.matchesSelectorAndParentsTo)(t.target,e.cancel,o))){"touchstart"===t.type&&t.preventDefault();var f=(0,u.getTouchIdentifier)(t);l.touchIdentifier=f;var g=(0,s.getControlPosition)(t,{props:e,findDOMNode:c},f);if(null!=g){var y=g.x,b=g.y,h=(0,s.createCoreData)({props:e,findDOMNode:c,state:l},y,b);(0,d.default)("DraggableCore: handleDragStart: %j",h),(0,d.default)("calling",e.startFn),!1!==(null===(n=e.startFn)||void 0===n?void 0:n.call(e,t,h))&&!1!==l.mounted&&(e.enableUserSelectHack&&(0,u.addUserSelectStyles)(i),l.dragging=!0,l.lastX=y,l.lastY=b,(0,u.addEvent)(i,p.move,v),(0,u.addEvent)(i,p.stop,m))}}},b=function(e){return p=g,r("mousedown",e),y(e)},h=function(e){return p=g,m(e)},S=function(e){return p=f,y(e)},D=function(e){return p=f,m(e)};return(0,i.onMounted)((function(){l.mounted=!0;var e=c();e&&(0,u.addEvent)(e,f.start,S,{passive:!1})})),(0,i.onUnmounted)((function(){l.mounted=!1;var t=c();if(t){var n=t.ownerDocument;(0,u.removeEvent)(n,g.move,v),(0,u.removeEvent)(n,f.move,v),(0,u.removeEvent)(n,g.stop,m),(0,u.removeEvent)(n,f.stop,m),(0,u.removeEvent)(t,f.start,S,{passive:!1}),e.enableUserSelectHack&&(0,u.removeUserSelectStyles)(n)}})),function(){var t=n.default?n.default()[0]:null;if(!t)return null;"object"==typeof t.type&&t.type;return(0,i.isVNode)(t)?(0,i.cloneVNode)(t,{onMousedown:b,onMouseup:h,onTouchend:D,ref:e.nodeRef||o}):t}}})},549:(e,t,n)=>{"use strict";var r=n(116),o=r.default,a=r.DraggableCore;e.exports=o,e.exports.default=o,e.exports.DraggableCore=a},212:function(e,t,n){"use strict";var r=this&&this.__assign||function(){return r=Object.assign||function(e){for(var t,n=1,r=arguments.length;n<r;n++)for(var o in t=arguments[n])Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o]);return e},r.apply(this,arguments)},o=this&&this.__createBinding||(Object.create?function(e,t,n,r){void 0===r&&(r=n);var o=Object.getOwnPropertyDescriptor(t,n);o&&!("get"in o?!t.__esModule:o.writable||o.configurable)||(o={enumerable:!0,get:function(){return t[n]}}),Object.defineProperty(e,r,o)}:function(e,t,n,r){void 0===r&&(r=n),e[r]=t[n]}),a=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),i=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var n in e)"default"!==n&&Object.prototype.hasOwnProperty.call(e,n)&&o(t,e,n);return a(t,e),t};Object.defineProperty(t,"__esModule",{value:!0}),t.removeUserSelectStyles=t.addUserSelectStyles=t.removeClassName=t.addClassName=t.getTouchIdentifier=t.getTouch=t.createSVGTransform=t.createCSSTransform=t.getTranslation=t.offsetXYFromParent=t.innerWidth=t.innerHeight=t.outerWidth=t.outerHeight=t.removeEvent=t.addEvent=t.matchesSelectorAndParentsTo=t.matchesSelector=void 0;var l=i(n(157)),u=n(811),s="";t.matchesSelector=function(e,t){return s||(s=(0,u.findInArray)(["matches","webkitMatchesSelector","mozMatchesSelector","msMatchesSelector","oMatchesSelector"],(function(t){return(0,u.isFunction)(e[t])}))),!!(0,u.isFunction)(e[s])&&e[s](t)};t.matchesSelectorAndParentsTo=function(e,n,r){var o=e;do{if((0,t.matchesSelector)(o,n))return!0;if(o===r)return!1;o=o.parentNode}while(o);return!1};t.addEvent=function(e,t,n,o){if(e){var a=r({capture:!0},o);e.addEventListener?e.addEventListener(t,n,a):e.attachEvent?e.attachEvent("on".concat(t),n):e["on".concat(t)]=n}};t.removeEvent=function(e,t,n,o){var a;if(e){var i=r({capture:!0},o);e.removeEventListener?e.removeEventListener(t,n,i):e.detachEvent?null===(a=e.detachEvent)||void 0===a||a.call(e,"on"+t,n):e["on".concat(t)]=null}};t.outerHeight=function(e){var t,n=e.clientHeight,r=null===(t=e.ownerDocument.defaultView)||void 0===t?void 0:t.getComputedStyle(e);return n+=(0,u.int)(r.borderTopWidth),n+=(0,u.int)(r.borderBottomWidth)};t.outerWidth=function(e){var t,n,r=e.clientWidth,o=null===(n=null===(t=e.ownerDocument)||void 0===t?void 0:t.defaultView)||void 0===n?void 0:n.getComputedStyle(e);return r+=(0,u.int)(o.borderLeftWidth),r+=(0,u.int)(o.borderRightWidth)};t.innerHeight=function(e){var t,n,r=e.clientHeight,o=null===(n=null===(t=e.ownerDocument)||void 0===t?void 0:t.defaultView)||void 0===n?void 0:n.getComputedStyle(e);return r-=(0,u.int)(o.paddingTop),r-=(0,u.int)(o.paddingBottom)};t.innerWidth=function(e){var t,n,r=e.clientWidth,o=null===(n=null===(t=e.ownerDocument)||void 0===t?void 0:t.defaultView)||void 0===n?void 0:n.getComputedStyle(e);return r-=(0,u.int)(o.paddingLeft),r-=(0,u.int)(o.paddingRight)};t.offsetXYFromParent=function(e,t,n){var r=t===t.ownerDocument.body?{left:0,top:0}:t.getBoundingClientRect();return{x:(e.clientX+t.scrollLeft-r.left)/n,y:(e.clientY+t.scrollTop-r.top)/n}};t.getTranslation=function(e,t,n){var r=e.x,o=e.y,a="translate(".concat(r).concat(n,",").concat(o).concat(n,")");if(t){var i="".concat("string"==typeof t.x?t.x:t.x+n),l="".concat("string"==typeof t.y?t.y:t.y+n);a="translate(".concat(i,", ").concat(l,")")+a}return a};t.createCSSTransform=function(e,n){var r,o=(0,t.getTranslation)(e,n,"px");return(r={})[(0,l.browserPrefixToKey)("transform",l.default)]=o,r};t.createSVGTransform=function(e,n){return(0,t.getTranslation)(e,n,"")};t.getTouch=function(e,t){return e.targetTouches&&(0,u.findInArray)(e.targetTouches,(function(e){return t===e.identifier}))||e.changedTouches&&(0,u.findInArray)(e.changedTouches,(function(e){return t===e.identifier}))};t.getTouchIdentifier=function(e){return e.targetTouches&&e.targetTouches[0]?e.targetTouches[0].identifier:e.changedTouches&&e.changedTouches[0]?e.changedTouches[0].identifier:null};t.addClassName=function(e,t){e.classList?e.classList.add(t):e.className.match(new RegExp("(?:^|\\s)".concat(t,"(?!\\S)")))||(e.className+=" ".concat(t))};t.removeClassName=function(e,t){e.classList?e.classList.remove(t):e.className=e.className.replace(new RegExp("(?:^|\\s)".concat(t,"(?!\\S)"),"g"),"")};t.addUserSelectStyles=function(e){if(e){var n=e.getElementById("vue-draggable-style-el");n||((n=e.createElement("style")).type="text/css",n.id="vue-draggable-style-el",n.innerHTML=".vue-draggable-transparent-selection *::-moz-selection {all: inherit;}\n",n.innerHTML+=".vue-draggable-transparent-selection *::selection {all: inherit;}\n",e.getElementsByTagName("head")[0].appendChild(n)),e.body&&(0,t.addClassName)(e.body,"vue-draggable-transparent-selection")}};t.removeUserSelectStyles=function(e){if(e)try{e.body&&(0,t.removeClassName)(e.body,"vue-draggable-transparent-selection");var n=e.getSelection();n&&"Caret"!==n.type&&n.removeAllRanges()}catch(e){}}},157:(e,t)=>{"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.browserPrefixToStyle=t.browserPrefixToKey=t.getPrefix=void 0;var n=["Moz","Webkit","O","ms"];function r(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"transform";if("undefined"==typeof window||void 0===window.document)return"";var t=window.document.documentElement.style;if(e in t)return"";for(var r=0;r<n.length;r++)if(o(e,n[r])in t)return n[r];return""}function o(e,t){return t?"".concat(t).concat(function(e){for(var t="",n=!0,r=0;r<e.length;r++)n?(t+=e[r].toUpperCase(),n=!1):"-"===e[r]?n=!0:t+=e[r];return t}(e)):e}t.getPrefix=r,t.browserPrefixToKey=o,t.browserPrefixToStyle=function(e,t){return t?"-".concat(t.toLowerCase(),"-").concat(e):e},t.default=r()},463:(e,t)=>{"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(){}},461:(e,t,n)=>{"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.createDraggableData=t.createCoreData=t.getControlPosition=t.canDragY=t.canDragX=t.snapToGrid=t.getBoundPosition=void 0;var r=n(212),o=n(811),a=function(e){return e.findDOMNode()},i=function(e,t){if(!(t in e))return 0;var n=e[t],r=parseInt(n,10);return isNaN(r)?0:r};t.getBoundPosition=function(e,t,n){if(!e.props.bounds)return[t,n];var o=e.props.bounds;o="string"==typeof o?o:function(e){return{left:e.left,top:e.top,right:e.right,bottom:e.bottom}}(o);var l=a(e);if(!l)return[t,n];var u=l.ownerDocument,s=null==u?void 0:u.defaultView;if(!s)return[t,n];if("string"==typeof o){var d="parent"===o?l.parentNode:u.querySelector(o);if(!(d instanceof s.HTMLElement))throw new Error('Bounds selector "'.concat(o,'" could not find an element.'));var c=s.getComputedStyle(l),f=s.getComputedStyle(d);o={left:-l.offsetLeft+i(f,"paddingLeft")+i(c,"marginLeft"),top:-l.offsetTop+i(f,"paddingTop")+i(c,"marginTop"),right:(0,r.innerWidth)(d)-(0,r.outerWidth)(l)-l.offsetLeft+i(f,"paddingRight")-i(c,"marginRight"),bottom:(0,r.innerHeight)(d)-(0,r.outerHeight)(l)-l.offsetTop+i(f,"paddingBottom")-i(c,"marginBottom")}}return[t=Math.max(Math.min(t,o.right||0),o.left||0),n=Math.max(Math.min(n,o.bottom||0),o.top||0)]};t.snapToGrid=function(e,t,n){return[Math.round(t/e[0])*e[0],Math.round(n/e[1])*e[1]]};t.canDragX=function(e){return"both"===e.props.axis||"x"===e.props.axis};t.canDragY=function(e){return"both"===e.props.axis||"y"===e.props.axis};t.getControlPosition=function(e,t,n){var o="number"==typeof n?(0,r.getTouch)(e,n):null;if("number"==typeof n&&!o)return null;var i=a(t),l=t.props.offsetParent||i.offsetParent||i.ownerDocument.body;return(0,r.offsetXYFromParent)(o||e,l,t.props.scale)};t.createCoreData=function(e,t,n){var r=e.state,i=!(0,o.isNum)(r.lastX),l=a(e);return i?{node:l,deltaX:0,deltaY:0,lastX:t,lastY:n,x:t,y:n}:{node:l,deltaX:t-r.lastX,deltaY:n-r.lastY,lastX:r.lastX,lastY:r.lastY,x:t,y:n}};t.createDraggableData=function(e,t){var n=e.props.scale;return{node:t.node,x:e.state.x+t.deltaX/n,y:e.state.y+t.deltaY/n,deltaX:t.deltaX/n,deltaY:t.deltaY/n,lastX:e.state.x,lastY:e.state.y}}},811:(e,t)=>{"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.propIsNotNode=t.dontSetMe=t.int=t.isNum=t.isFunction=t.findInArray=void 0,t.findInArray=function(e,t){for(var n=0,r=e.length;n<r;n++){var o=e instanceof TouchList?e.item(n):e[n];if(null!==o&&t(o,n,e))return o}},t.isFunction=function(e){return"function"==typeof e||"[object Function]"===Object.prototype.toString.call(e)},t.isNum=function(e){return"number"==typeof e&&!isNaN(e)},t.int=function(e){return parseInt(e,10)},t.dontSetMe=function(e,t){return{validator:function(){return!!e}}},t.propIsNotNode=function(e){return"object"==typeof e&&null!==e&&"nodeType"in e&&1===e.nodeType}},53:(e,t,n)=>{"use strict";function r(e){var t,n,o="";if("string"==typeof e||"number"==typeof e)o+=e;else if("object"==typeof e)if(Array.isArray(e))for(t=0;t<e.length;t++)e[t]&&(n=r(e[t]))&&(o&&(o+=" "),o+=n);else for(t in e)e[t]&&(o&&(o+=" "),o+=t);return o}function o(){for(var e,t,n=0,o="";n<arguments.length;)(e=arguments[n++])&&(t=r(e))&&(o&&(o+=" "),o+=t);return o}n.r(t),n.d(t,{clsx:()=>o,default:()=>a});const a=o},594:t=>{"use strict";t.exports=e}},n={};function r(e){var o=n[e];if(void 0!==o)return o.exports;var a=n[e]={exports:{}};return t[e].call(a.exports,a,a.exports,r),a.exports}return r.d=(e,t)=>{for(var n in t)r.o(t,n)&&!r.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},r.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r(549)})()));

package/package.json

@@ -1,10 +1,20 @@
 {
   "name": "@marsio/vue-draggable",
-  "version": "1.0.6",
+  "version": "1.0.8",
   "description": "Vue draggable component",
   "main": "build/cjs/cjs.js",
   "unpkg": "build/web/vue-draggable.min.js",
   "sideEffects": false,
+  "scripts": {
+    "dev": "node script.js --action=dev",
+    "build": "node script.js --action=build",
+    "build-docs": "node script.js --action=docs",
+    "lint": "eslint 'lib/**/*.{js.vue,ts,tsx}'",
+    "clean": "node script.js --action=clean",
+    "publish": "node script.js --action=publish",
+    "release": "node script.js --action=release",
+    "analyze": "ANALYZE=true webpack --config webpack.config.js"
+  },
   "files": [
     "/build",
     "/typings",
@@ -81,14 +91,5 @@
     "clsx": "^1.1.1",
     "lodash": "^4.17.21",
     "vue": "^3.2.23"
-  },
-  "scripts": {
-    "dev": "node script.js --action=dev",
-    "build": "node script.js --action=build",
-    "build-docs": "node script.js --action=docs",
-    "lint": "eslint 'lib/**/*.{js.vue,ts,tsx}'",
-    "clean": "node script.js --action=clean",
-    "release": "node script.js --action=release",
-    "analyze": "ANALYZE=true webpack --config webpack.config.js"
   }
 }

package/typings/index.d.ts

@@ -26,12 +26,11 @@ declare module '@marsio/vue-draggable' {
     startFn: DraggableEventHandler,
     dragFn: DraggableEventHandler,
     stopFn: DraggableEventHandler,
-    scale: DraggableEventHandler,
+    scale: number,
     cancel: string,
     offsetParent: HTMLElement,
     grid: [number, number],
-    handle: string,
-    nodeRef?: Ref<HTMLElement | null> 
+    handle: string
   }
 
   type DraggableProps = DraggableCoreProps & {
@@ -45,8 +44,8 @@ declare module '@marsio/vue-draggable' {
     defaultPosition: PositionOffsetControlPosition
   }
   
-  const Draggable: DefineComponent<DraggableProps>;
-  const DraggableCore: DefineComponent<DraggableCoreProps>;
+  const Draggable: DefineComponent<Partial<DraggableProps>>;
+  const DraggableCore: DefineComponent<Partial<DraggableCoreProps>>;
   export { Draggable as default, DraggableCore};
 
   export {