@marsio/vue-draggable 1.0.2

package/build/cjs/DraggableCore.js

@@ -0,0 +1,310 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.draggableCoreProps = exports.draggableCoreDefaultProps = exports.defaultDraggableEventHandler = exports.default = void 0;
+var _vue = require("vue");
+var _vueTypes = _interopRequireDefault(require("vue-types"));
+var _get = _interopRequireDefault(require("lodash/get"));
+var _domFns = require("./utils/domFns");
+var _positionFns = require("./utils/positionFns");
+var _shims = require("./utils/shims");
+var _log = _interopRequireDefault(require("./utils/log"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+// Simple abstraction for dragging events names.
+const eventsFor = {
+  touch: {
+    start: 'touchstart',
+    move: 'touchmove',
+    stop: 'touchend'
+  },
+  mouse: {
+    start: 'mousedown',
+    move: 'mousemove',
+    stop: 'mouseup'
+  }
+};
+const defaultDraggableEventHandler = (e, data) => true;
+exports.defaultDraggableEventHandler = defaultDraggableEventHandler;
+const funcVoid = function () {};
+
+// Default to mouse events.
+let dragEventFor = eventsFor.mouse;
+const draggableCoreDefaultProps = exports.draggableCoreDefaultProps = {
+  allowAnyClick: _vueTypes.default.bool.def(false),
+  disabled: _vueTypes.default.bool.def(false),
+  enableUserSelectHack: _vueTypes.default.bool.def(true),
+  startFn: _vueTypes.default.func.def(defaultDraggableEventHandler).def(funcVoid),
+  dragFn: _vueTypes.default.func.def(defaultDraggableEventHandler).def(funcVoid),
+  stopFn: _vueTypes.default.func.def(defaultDraggableEventHandler).def(funcVoid),
+  scale: _vueTypes.default.number.def(1)
+};
+const draggableCoreProps = exports.draggableCoreProps = {
+  ...draggableCoreDefaultProps,
+  cancel: _vueTypes.default.string,
+  offsetParent: _vueTypes.default.custom(_shims.prop_is_not_node, 'Draggable\'s offsetParent must be a DOM Node.'),
+  grid: _vueTypes.default.arrayOf(_vueTypes.default.number),
+  handle: _vueTypes.default.string,
+  nodeRef: _vueTypes.default.object.def(null)
+};
+const componentName = 'DraggableCore';
+var _default = exports.default = (0, _vue.defineComponent)({
+  compatConfig: {
+    MODE: 3
+  },
+  name: componentName,
+  inheritAttrs: false,
+  props: {
+    ...draggableCoreProps
+    // style: dontSetMe('style', componentName),
+    // class: dontSetMe('class', componentName),
+    // transform: dontSetMe('transform', componentName),
+  },
+  setup(props, _ref) {
+    let {
+      slots,
+      emit
+    } = _ref;
+    const rootElement = (0, _vue.ref)(null);
+    const displayName = 'DraggableCore';
+    const state = (0, _vue.reactive)({
+      dragging: false,
+      // Used while dragging to determine deltas.
+      lastX: NaN,
+      lastY: NaN,
+      touchIdentifier: null,
+      mounted: false
+    });
+    const findDOMNode = () => {
+      return (0, _get.default)(props, 'nodeRef.value') || rootElement.value;
+    };
+    const handleDrag = e => {
+      // Get the current drag point from the event. This is used as the offset.
+      const position = (0, _positionFns.getControlPosition)(e, {
+        props,
+        findDOMNode
+      }, state.touchIdentifier);
+      if (position == null) return;
+      let {
+        x,
+        y
+      } = position;
+
+      // Snap to grid if prop has been provided
+      if (Array.isArray(props.grid)) {
+        let deltaX = x - state.lastX,
+          deltaY = y - state.lastY;
+        [deltaX, deltaY] = (0, _positionFns.snapToGrid)(props.grid, deltaX, deltaY);
+        if (!deltaX && !deltaY) return; // skip useless drag
+        x = state.lastX + deltaX, y = state.lastY + deltaY;
+      }
+      const coreEvent = (0, _positionFns.createCoreData)({
+        props,
+        findDOMNode,
+        state
+      }, x, y);
+      (0, _log.default)('DraggableCore: handleDrag: %j', coreEvent);
+
+      // Call event handler. If it returns explicit false, trigger end.
+      const shouldUpdate = props.dragFn?.(e, coreEvent);
+      if (shouldUpdate === false || state.mounted === false) {
+        try {
+          handleDragStop(new MouseEvent('mouseup'));
+        } catch (err) {
+          // Old browsers
+          const event = document.createEvent('MouseEvents');
+          event.initMouseEvent('mouseup', true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
+          handleDragStop(event);
+        }
+        return;
+      }
+      state.lastX = x;
+      state.lastY = y;
+    };
+    const handleDragStop = e => {
+      if (!state.dragging) return;
+      const position = (0, _positionFns.getControlPosition)(e, {
+        props,
+        findDOMNode
+      }, state.touchIdentifier);
+      if (position == null) return;
+      let {
+        x,
+        y
+      } = position;
+
+      // Snap to grid if prop has been provided
+      if (Array.isArray(props.grid)) {
+        let deltaX = x - state.lastX || 0;
+        let deltaY = y - state.lastY || 0;
+        [deltaX, deltaY] = (0, _positionFns.snapToGrid)(props.grid, deltaX, deltaY);
+        x = state.lastX + deltaX, y = state.lastY + deltaY;
+      }
+      const coreEvent = (0, _positionFns.createCoreData)({
+        props,
+        findDOMNode,
+        state
+      }, x, y);
+
+      // Call event handler
+      const shouldContinue = props.stopFn?.(e, coreEvent);
+      if (shouldContinue === false || state.mounted === false) return false;
+      const thisNode = findDOMNode();
+      if (thisNode) {
+        // Remove user-select hack
+        if (props.enableUserSelectHack) (0, _domFns.removeUserSelectStyles)(thisNode.ownerDocument);
+      }
+      (0, _log.default)('DraggableCore: handleDragStop: %j', coreEvent);
+
+      // Reset the el.
+      state.dragging = false;
+      state.lastX = NaN;
+      state.lastY = NaN;
+      if (thisNode) {
+        // Remove event handlers
+        (0, _log.default)('DraggableCore: Removing handlers');
+        (0, _domFns.removeEvent)(thisNode.ownerDocument, dragEventFor.move, handleDrag);
+        (0, _domFns.removeEvent)(thisNode.ownerDocument, dragEventFor.stop, handleDragStop);
+      }
+    };
+    const handleDragStart = e => {
+      // Make it possible to attach event handlers on top of this one.
+      emit('mousedown', e);
+
+      // Only accept left-clicks.
+      if (!props.allowAnyClick && typeof e.button === 'number' && e.button !== 0) return false;
+
+      // Get nodes. Be sure to grab relative document (could be iframed)
+      const thisNode = findDOMNode();
+      if (!(0, _get.default)(thisNode, 'ownerDocument.body')) {
+        throw new Error('<DraggableCore> not mounted on DragStart!');
+      }
+      const {
+        ownerDocument
+      } = 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)) {
+        return;
+      }
+
+      // Prevent scrolling on mobile devices, like ipad/iphone.
+      // Important that this is after handle/cancel.
+      if (e.type === 'touchstart') e.preventDefault();
+
+      // Set touch identifier in component state if this is a touch event. This allows us to
+      // distinguish between individual touches on multitouch screens by identifying which
+      // touchpoint was set to this element.
+      const touchIdentifier = (0, _domFns.getTouchIdentifier)(e);
+      state.touchIdentifier = touchIdentifier;
+      // Get the current drag point from the event. This is used as the offset.
+      const position = (0, _positionFns.getControlPosition)(e, {
+        props,
+        findDOMNode
+      }, touchIdentifier);
+      if (position == null) return;
+      const {
+        x,
+        y
+      } = position;
+
+      // Create an event object with all the data parents need to make a decision here.
+      const coreEvent = (0, _positionFns.createCoreData)({
+        props,
+        findDOMNode,
+        state
+      }, x, y);
+      (0, _log.default)('DraggableCore: handleDragStart: %j', coreEvent);
+
+      // Call event handler. If it returns explicit false, cancel.
+      (0, _log.default)('calling', props.startFn);
+      const shouldUpdate = props.startFn(e, coreEvent);
+      if (shouldUpdate === false || state.mounted === false) return;
+
+      // Add a style to the body to disable user-select. This prevents text from
+      // being selected all over the page.
+      if (props.enableUserSelectHack) (0, _domFns.addUserSelectStyles)(ownerDocument);
+
+      // Initiate dragging. Set the current x and y as offsets
+      // so we know how much we've moved during the drag. This allows us
+      // to drag elements around even if they have been moved, without issue.
+      state.dragging = true;
+      state.lastX = x;
+      state.lastY = y;
+
+      // Add events to the document directly so we catch when the user's mouse/touch moves outside of
+      // this element. We use different events depending on whether or not we have detected that this
+      // is a touch-capable device.
+      (0, _domFns.addEvent)(ownerDocument, dragEventFor.move, handleDrag);
+      (0, _domFns.addEvent)(ownerDocument, dragEventFor.stop, handleDragStop);
+    };
+    const onMousedown = e => {
+      dragEventFor = eventsFor.mouse; // on touchscreen laptops we could switch back to mouse
+      return handleDragStart(e);
+    };
+
+    // const onMoueDown = (e: MouseTouchEvent) => {
+    //   dragEventFor = eventsFor.mouse // on touchscreen laptops we could switch back to mouse
+    //   return handleDragStart(e)
+    // }
+
+    const onMouseup = e => {
+      dragEventFor = eventsFor.mouse;
+      return handleDragStop(e);
+    };
+    const onTouchStart = e => {
+      // We're on a touch device now, so change the event handlers
+      dragEventFor = eventsFor.touch;
+      return handleDragStart(e);
+    };
+    const onTouchend = e => {
+      // We're on a touch device now, so change the event handlers
+      dragEventFor = eventsFor.touch;
+      return handleDragStop(e);
+    };
+    (0, _vue.onMounted)(() => {
+      state.mounted = true;
+      const thisNode = findDOMNode();
+      if (thisNode) {
+        (0, _domFns.addEvent)(thisNode, eventsFor.touch.start, onTouchStart, {
+          passive: false
+        });
+      }
+    });
+    (0, _vue.onUnmounted)(() => {
+      state.mounted = false;
+      // Remove any leftover event handlers. Remove both touch and mouse handlers in case
+      // some browser quirk caused a touch event to fire during a mouse move, or vice versa.
+      const thisNode = findDOMNode();
+      if (thisNode) {
+        const {
+          ownerDocument
+        } = thisNode;
+        (0, _domFns.removeEvent)(ownerDocument, eventsFor.mouse.move, handleDrag);
+        (0, _domFns.removeEvent)(ownerDocument, eventsFor.touch.move, handleDrag);
+        (0, _domFns.removeEvent)(ownerDocument, eventsFor.mouse.stop, handleDragStop);
+        (0, _domFns.removeEvent)(ownerDocument, eventsFor.touch.stop, handleDragStop);
+        (0, _domFns.removeEvent)(thisNode, eventsFor.touch.start, onTouchStart, {
+          passive: false
+        });
+        if (props.enableUserSelectHack) (0, _domFns.removeUserSelectStyles)(ownerDocument);
+      }
+    });
+    return () => {
+      const slotContent = (0, _vue.renderSlot)(slots, 'default');
+      let children = slotContent.children;
+      if (!Array.isArray(children)) {
+        children = []; // 如果不是数组，则使用空数组
+      }
+      const child = (0, _get.default)(children, '0.children[0]');
+      const clonedChildren = (0, _vue.isVNode)(child) ? (0, _vue.cloneVNode)(child, {
+        onMousedown,
+        onMouseup,
+        onTouchend,
+        ref: rootElement
+      }) : child;
+      return clonedChildren;
+    };
+  }
+});

package/build/cjs/cjs.js

@@ -0,0 +1,9 @@
+"use strict";
+
+const {
+  default: Draggable,
+  DraggableCore
+} = require('./Draggable');
+module.exports = Draggable;
+module.exports.default = Draggable;
+module.exports.DraggableCore = DraggableCore;

package/build/cjs/utils/domFns.js

@@ -0,0 +1,209 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.addClassName = addClassName;
+exports.addEvent = addEvent;
+exports.addUserSelectStyles = addUserSelectStyles;
+exports.createCSSTransform = createCSSTransform;
+exports.createSVGTransform = createSVGTransform;
+exports.getTouch = getTouch;
+exports.getTouchIdentifier = getTouchIdentifier;
+exports.getTranslation = getTranslation;
+exports.innerHeight = innerHeight;
+exports.innerWidth = innerWidth;
+exports.matchesSelector = matchesSelector;
+exports.matchesSelectorAndParentsTo = matchesSelectorAndParentsTo;
+exports.offsetXYFromParent = offsetXYFromParent;
+exports.outerHeight = outerHeight;
+exports.outerWidth = outerWidth;
+exports.removeClassName = removeClassName;
+exports.removeEvent = removeEvent;
+exports.removeUserSelectStyles = removeUserSelectStyles;
+var _getPrefix = _interopRequireWildcard(require("./getPrefix"));
+var _shims = require("./shims");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+let matchesSelectorFunc = '';
+function matchesSelector(el, selector) {
+  if (!matchesSelectorFunc) {
+    matchesSelectorFunc = (0, _shims.findInArray)(['matches', 'webkitMatchesSelector', 'mozMatchesSelector', 'msMatchesSelector', 'oMatchesSelector'], function (method) {
+      return (0, _shims.isFunction)(el[method]);
+    });
+  }
+
+  // Might not be found entirely (not an Element?) - in that case, bail
+  if (!(0, _shims.isFunction)(el[matchesSelectorFunc])) return false;
+  return el[matchesSelectorFunc](selector);
+}
+
+// Works up the tree to the draggable itself attempting to match selector.
+function matchesSelectorAndParentsTo(el, selector, baseNode) {
+  let node = el;
+  do {
+    if (matchesSelector(node, selector)) return true;
+    if (node === baseNode) return false;
+    node = node.parentNode;
+  } while (node);
+  return false;
+}
+function addEvent(el, event, handler, inputOptions) {
+  if (!el) return;
+  const options = {
+    capture: true,
+    ...inputOptions
+  };
+  if (el.addEventListener) {
+    el.addEventListener(event, handler, options);
+  } else if (el.attachEvent) {
+    el.attachEvent(`on${event}`, handler);
+  } else {
+    el[`on${event}`] = handler;
+  }
+}
+function removeEvent(el, event, handler, inputOptions) {
+  if (!el) return;
+  const options = {
+    capture: true,
+    ...inputOptions
+  };
+  if (el.removeEventListener) {
+    el.removeEventListener(event, handler, options);
+  } else if (el.detachEvent) {
+    el.detachEvent('on' + event, handler);
+  } else {
+    el[`on${event}`] = null;
+  }
+}
+function outerHeight(node) {
+  // This is deliberately excluding margin for our calculations, since we are using
+  // offsetTop which is including margin. See getBoundPosition
+  let height = node.clientHeight;
+  const computedStyle = node.ownerDocument.defaultView?.getComputedStyle(node);
+  height += (0, _shims.int)(computedStyle.borderTopWidth);
+  height += (0, _shims.int)(computedStyle.borderBottomWidth);
+  return height;
+}
+function outerWidth(node) {
+  // This is deliberately excluding margin for our calculations, since we are using
+  // offsetLeft which is including margin. See getBoundPosition
+  let width = node.clientWidth;
+  const computedStyle = node.ownerDocument?.defaultView?.getComputedStyle(node);
+  width += (0, _shims.int)(computedStyle.borderLeftWidth);
+  width += (0, _shims.int)(computedStyle.borderRightWidth);
+  return width;
+}
+function innerHeight(node) {
+  let height = node.clientHeight;
+  const computedStyle = node.ownerDocument?.defaultView?.getComputedStyle(node);
+  height -= (0, _shims.int)(computedStyle.paddingTop);
+  height -= (0, _shims.int)(computedStyle.paddingBottom);
+  return height;
+}
+function innerWidth(node) {
+  let width = node.clientWidth;
+  const computedStyle = node.ownerDocument?.defaultView?.getComputedStyle(node);
+  width -= (0, _shims.int)(computedStyle.paddingLeft);
+  width -= (0, _shims.int)(computedStyle.paddingRight);
+  return width;
+}
+
+// Get from offsetParent
+function offsetXYFromParent(evt, offsetParent, scale) {
+  const isBody = offsetParent === offsetParent.ownerDocument.body;
+  const offsetParentRect = isBody ? {
+    left: 0,
+    top: 0
+  } : offsetParent.getBoundingClientRect();
+  const x = (evt.clientX + offsetParent.scrollLeft - offsetParentRect.left) / scale;
+  const y = (evt.clientY + offsetParent.scrollTop - offsetParentRect.top) / scale;
+  return {
+    x,
+    y
+  };
+}
+function createCSSTransform(controlPos, positionOffset) {
+  const translation = getTranslation(controlPos, positionOffset, 'px');
+  return {
+    [(0, _getPrefix.browserPrefixToKey)('transform', _getPrefix.default)]: translation
+  };
+}
+function createSVGTransform(controlPos, positionOffset) {
+  const translation = getTranslation(controlPos, positionOffset, '');
+  return translation;
+}
+function getTranslation(_ref, positionOffset, unitSuffix) {
+  let {
+    x,
+    y
+  } = _ref;
+  let translation = `translate(${x}${unitSuffix},${y}${unitSuffix})`;
+  if (positionOffset) {
+    const defaultX = `${typeof positionOffset.x === 'string' ? positionOffset.x : positionOffset.x + unitSuffix}`;
+    const defaultY = `${typeof positionOffset.y === 'string' ? positionOffset.y : positionOffset.y + unitSuffix}`;
+    translation = `translate(${defaultX}, ${defaultY})` + translation;
+  }
+  return translation;
+}
+function getTouch(e, identifier) {
+  return e.targetTouches && (0, _shims.findInArray)(e.targetTouches, t => identifier === t.identifier) || e.changedTouches && (0, _shims.findInArray)(e.changedTouches, t => identifier === t.identifier);
+}
+function getTouchIdentifier(e) {
+  if (e.targetTouches && e.targetTouches[0]) return e.targetTouches[0].identifier;
+  if (e.changedTouches && e.changedTouches[0]) return e.changedTouches[0].identifier;
+  return;
+}
+
+// User-select Hacks:
+//
+// Useful for preventing blue highlights all over everything when dragging.
+
+// Note we're passing `document` b/c we could be iframed
+function addUserSelectStyles(doc) {
+  if (!doc) return;
+  let styleEl = doc.getElementById('vue-draggable-style-el');
+  if (!styleEl) {
+    styleEl = doc.createElement('style');
+    styleEl.type = 'text/css';
+    styleEl.id = 'vue-draggable-style-el';
+    styleEl.innerHTML = '.vue-draggable-transparent-selection *::-moz-selection {all: inherit;}\n';
+    styleEl.innerHTML += '.vue-draggable-transparent-selection *::selection {all: inherit;}\n';
+    doc.getElementsByTagName('head')[0].appendChild(styleEl);
+  }
+  if (doc.body) addClassName(doc.body, 'vue-draggable-transparent-selection');
+}
+function removeUserSelectStyles(doc) {
+  if (!doc) return;
+  try {
+    if (doc.body) removeClassName(doc.body, 'vue-draggable-transparent-selection');
+    if (doc.selection) {
+      doc.selection.empty();
+    } else {
+      // Remove selection caused by scroll, unless it's a focused input
+      // (we use doc.defaultView in case we're in an iframe)
+      const selection = (doc.defaultView || window).getSelection();
+      if (selection && selection.type !== 'Caret') {
+        selection.removeAllRanges();
+      }
+    }
+  } catch (e) {
+    // probably IE
+  }
+}
+function addClassName(el, className) {
+  if (el.classList) {
+    el.classList.add(className);
+  } else {
+    if (!el.className.match(new RegExp(`(?:^|\\s)${className}(?!\\S)`))) {
+      el.className += ` ${className}`;
+    }
+  }
+}
+function removeClassName(el, className) {
+  if (el.classList) {
+    el.classList.remove(className);
+  } else {
+    el.className = el.className.replace(new RegExp(`(?:^|\\s)${className}(?!\\S)`, 'g'), '');
+  }
+}

package/build/cjs/utils/getPrefix.js

@@ -0,0 +1,48 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.browserPrefixToKey = browserPrefixToKey;
+exports.browserPrefixToStyle = browserPrefixToStyle;
+exports.default = void 0;
+exports.getPrefix = getPrefix;
+const prefixes = ['Moz', 'Webkit', 'O', 'ms'];
+function getPrefix() {
+  let prop = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'transform';
+  // Checking specifically for 'window.document' is for pseudo-browser server-side
+  // environments that define 'window' as the global context.
+  if (typeof window === 'undefined' || typeof window.document === 'undefined') return '';
+  const style = window.document.documentElement.style;
+  if (prop in style) return '';
+  for (let i = 0; i < prefixes.length; i++) {
+    if (browserPrefixToKey(prop, prefixes[i]) in style) return prefixes[i];
+  }
+  return '';
+}
+function browserPrefixToKey(prop, prefix) {
+  return prefix ? `${prefix}${kebabToTitleCase(prop)}` : prop;
+}
+function browserPrefixToStyle(prop, prefix) {
+  return prefix ? `-${prefix.toLowerCase()}-${prop}` : prop;
+}
+function kebabToTitleCase(str) {
+  let out = '';
+  let shouldCapitalize = true;
+  for (let i = 0; i < str.length; i++) {
+    if (shouldCapitalize) {
+      out += str[i].toUpperCase();
+      shouldCapitalize = false;
+    } else if (str[i] === '-') {
+      shouldCapitalize = true;
+    } else {
+      out += str[i];
+    }
+  }
+  return out;
+}
+
+// Default export is the prefix itself, like 'Moz', 'Webkit', etc
+// Note that you may have to re-test for certain things; for instance, Chrome 50
+// can handle unprefixed `transform`, but not unprefixed `user-select`
+var _default = exports.default = getPrefix();

package/build/cjs/utils/log.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = log;
+function log() {
+  // if (process.env.DRAGGABLE_DEBUG) console.log(...args);
+}