@marsio/vue-draggable 1.0.2 → 1.0.4

package/build/cjs/utils/shims.js

@@ -8,9 +8,18 @@ exports.findInArray = findInArray;
 exports.int = int;
 exports.isFunction = isFunction;
 exports.isNum = isNum;
-exports.prop_is_not_node = prop_is_not_node;
+exports.propIsNotNode = propIsNotNode;
 var _vueTypes = _interopRequireDefault(require("vue-types"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * Searches for an element in an array or TouchList that satisfies the provided callback function.
+ * @param {T[] | TouchList} array - The array or TouchList to search.
+ * @param {(element: T, index: number, arr: T[] | TouchList) => boolean} callback - A function that accepts up to three arguments.
+ * The findInArray method calls the callback function one time for each element in the array, in order, until the callback returns true.
+ * If such an element is found, findInArray immediately returns that element value. Otherwise, findInArray returns undefined.
+ * @returns {any} The found element in the array, or undefined if not found.
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 function findInArray(array, callback) {
   for (let i = 0, length = array.length; i < length; i++) {
     const element = array instanceof TouchList ? array.item(i) : array[i];
@@ -18,22 +27,52 @@ function findInArray(array, callback) {
       return element;
     }
   }
-  return undefined;
 }
+
+/**
+ * Checks if the passed argument is a function.
+ * @param {unknown} func - The argument to check.
+ * @returns {boolean} True if the argument is a function, false otherwise.
+ */
 function isFunction(func) {
   return typeof func === 'function' || Object.prototype.toString.call(func) === '[object Function]';
 }
+
+/**
+ * Checks if the passed argument is a number.
+ * @param {unknown} num - The argument to check.
+ * @returns {boolean} True if the argument is a number and not NaN, false otherwise.
+ */
 function isNum(num) {
   return typeof num === 'number' && !isNaN(num);
 }
+
+/**
+ * Converts a string to an integer.
+ * @param {string} a - The string to convert.
+ * @returns {number} The converted integer.
+ */
 function int(a) {
   return parseInt(a, 10);
 }
+
+/**
+ * Creates a custom Vue prop type that fails validation.
+ * @param {string} propsName - The name of the prop.
+ * @param {string} componentName - The name of the component.
+ * @returns {VueTypeDef<T>} A VueTypeDef that always fails validation.
+ */
 function dontSetMe(propsName, componentName) {
-  const failed_prop_type = () => !propsName;
+  const failedPropType = () => !propsName;
   const message = `Invalid prop ${propsName} passed to ${componentName} - do not set this, set it on the child.`;
-  return _vueTypes.default.custom(failed_prop_type, message);
+  return _vueTypes.default.custom(failedPropType, message);
 }
-function prop_is_not_node(node) {
+
+/**
+ * Checks if the passed argument is a DOM Node but not a text node.
+ * @param {unknown} node - The argument to check.
+ * @returns {boolean} True if the argument is a DOM Node and not a text node, false otherwise.
+ */
+function propIsNotNode(node) {
   return typeof node === 'object' && node !== null && 'nodeType' in node && node.nodeType === 1;
 }

package/build/cjs/utils/types.js

@@ -4,8 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.TouchEvent2 = exports.SVGElement = void 0;
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : String(i); }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 class SVGElement extends HTMLElement {}
 
@@ -18,4 +18,12 @@ class TouchEvent2 extends TouchEvent {
     _defineProperty(this, "targetTouches", void 0);
   }
 }
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
 exports.TouchEvent2 = TouchEvent2;

package/build/web/vue-draggable.min.89b0ffb5e5b82299d838.hot-update.js

@@ -0,0 +1,30 @@
+"use strict";
+/*
+ * ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
+ * This devtool is neither made for production nor for readable output files.
+ * It uses "eval()" calls to create a separate source file in the browser devtools.
+ * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
+ * or disable the default devtool with "devtool: false".
+ * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
+ */
+self["webpackHotUpdateVueDraggable"]("vue-draggable.min",{
+
+/***/ "./lib/utils/positionFns.ts":
+/*!**********************************!*\
+  !*** ./lib/utils/positionFns.ts ***!
+  \**********************************/
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
+
+eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports.createDraggableData = exports.createCoreData = exports.getControlPosition = exports.canDragY = exports.canDragX = exports.snapToGrid = exports.getBoundPosition = void 0;\nvar domFns_1 = __webpack_require__(/*! ./domFns */ \"./lib/utils/domFns.ts\");\nvar shims_1 = __webpack_require__(/*! ./shims */ \"./lib/utils/shims.ts\");\n// Quick clone for bounds. We're doing this because we don't want to mess with the original bounds object.\n// It's a simple copy, nothing fancy.\nvar cloneBounds = function (bounds) {\n    return {\n        left: bounds.left,\n        top: bounds.top,\n        right: bounds.right,\n        bottom: bounds.bottom\n    };\n};\n// This one's a bit tricky. We're trying to find the actual DOM node for a draggable component.\n// It's using some internal stuff, so don't worry if it looks a bit weird.\nvar findDOMNode = function (draggable) {\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    return draggable.findDOMNode();\n};\n// Ever got annoyed by CSS values being strings? Yeah, me too. This function takes those strings and turns them into numbers.\n// Also, it warns you if something's not right, which is pretty handy.\nvar parseStyleToInt = function (style, property) {\n    if (!(property in style)) {\n        console.warn(\"Property \\\"\".concat(String(property), \"\\\" does not exist on the provided style object.\"));\n        return 0;\n    }\n    var value = style[property];\n    var parsed = parseInt(value, 10);\n    if (isNaN(parsed)) {\n        console.warn(\"Value of property \\\"\".concat(String(property), \"\\\" is not a valid number.\"));\n        return 0;\n    }\n    return parsed;\n};\n// This is where the magic happens. We're making sure the draggable stays within its bounds.\n// It's a bit of math and some conditionals. Nothing too scary, but it does the job.\nvar getBoundPosition = function (draggable, x, y) {\n    if (!draggable.props.bounds)\n        return [x, y];\n    var bounds = draggable.props.bounds;\n    bounds = typeof bounds === 'string' ? bounds : cloneBounds(bounds);\n    var node = findDOMNode(draggable);\n    if (!node)\n        return [x, y];\n    var ownerDocument = node.ownerDocument;\n    var ownerWindow = ownerDocument === null || ownerDocument === void 0 ? void 0 : ownerDocument.defaultView;\n    if (!ownerWindow) {\n        return [x, y];\n    }\n    if (typeof bounds === 'string') {\n        var boundNode = bounds === 'parent' ? node.parentNode : ownerDocument.querySelector(bounds);\n        if (!(boundNode instanceof ownerWindow.HTMLElement)) {\n            throw new Error(\"Bounds selector \\\"\".concat(bounds, \"\\\" could not find an element.\"));\n        }\n        var nodeStyle = ownerWindow.getComputedStyle(node);\n        var boundNodeStyle = ownerWindow.getComputedStyle(boundNode);\n        bounds = {\n            left: -node.offsetLeft + parseStyleToInt(boundNodeStyle, 'paddingLeft') + parseStyleToInt(nodeStyle, 'marginLeft'),\n            top: -node.offsetTop + parseStyleToInt(boundNodeStyle, 'paddingTop') + parseStyleToInt(nodeStyle, 'marginTop'),\n            right: (0, domFns_1.innerWidth)(boundNode) - (0, domFns_1.outerWidth)(node) - node.offsetLeft + parseStyleToInt(boundNodeStyle, 'paddingRight') - parseStyleToInt(nodeStyle, 'marginRight'),\n            bottom: (0, domFns_1.innerHeight)(boundNode) - (0, domFns_1.outerHeight)(node) - node.offsetTop + parseStyleToInt(boundNodeStyle, 'paddingBottom') - parseStyleToInt(nodeStyle, 'marginBottom')\n        };\n    }\n    // Clamp x and y to be within the bounds.\n    x = Math.max(Math.min(x, bounds.right || 0), bounds.left || 0);\n    y = Math.max(Math.min(y, bounds.bottom || 0), bounds.top || 0);\n    return [x, y];\n};\nexports.getBoundPosition = getBoundPosition;\n// Snapping to a grid is super useful for aligning stuff. This function just rounds the position to the nearest grid point.\nvar snapToGrid = function (grid, pendingX, pendingY) {\n    var x = Math.round(pendingX / grid[0]) * grid[0];\n    var y = Math.round(pendingY / grid[1]) * grid[1];\n    return [x, y];\n};\nexports.snapToGrid = snapToGrid;\n// Can we drag along the x-axis? This checks the draggable's props to see what's allowed.\nvar canDragX = function (draggable) {\n    return draggable.props.axis === 'both' || draggable.props.axis === 'x';\n};\nexports.canDragX = canDragX;\n// Same as canDragX, but for the y-axis. Gotta keep things flexible.\nvar canDragY = function (draggable) {\n    return draggable.props.axis === 'both' || draggable.props.axis === 'y';\n};\nexports.canDragY = canDragY;\n// Getting the control position is a bit of DOM manipulation and event handling.\n// It's a bit dense, but it's just calculating positions based on the event and the draggable's state.\nvar getControlPosition = function (e, draggableCore, touchIdentifier) {\n    var touchObj = typeof touchIdentifier === 'number' ? (0, domFns_1.getTouch)(e, touchIdentifier) : null;\n    if (typeof touchIdentifier === 'number' && !touchObj)\n        return null; // not the right touch\n    var node = findDOMNode(draggableCore);\n    // User can provide an offsetParent if desired.\n    var offsetParent = draggableCore.props.offsetParent || node.offsetParent || node.ownerDocument.body;\n    return (0, domFns_1.offsetXYFromParent)(touchObj || e, offsetParent, draggableCore.props.scale);\n};\nexports.getControlPosition = getControlPosition;\n// When you start dragging, or move the draggable, this function updates the state with the new position.\n// It's a bit of a state management thing, keeping track of deltas and positions.\nvar createCoreData = function (draggable, x, y) {\n    var state = draggable.state;\n    var isStart = !(0, shims_1.isNum)(state.lastX);\n    var node = findDOMNode(draggable);\n    if (isStart) {\n        // If this is our first move, use the x and y as last coords.\n        return {\n            node: node,\n            deltaX: 0,\n            deltaY: 0,\n            lastX: x,\n            lastY: y,\n            x: x,\n            y: y\n        };\n    }\n    else {\n        // Otherwise, calculate the delta.\n        return {\n            node: node,\n            deltaX: x - state.lastX,\n            deltaY: y - state.lastY,\n            lastX: state.lastX,\n            lastY: state.lastY,\n            x: x,\n            y: y\n        };\n    }\n};\nexports.createCoreData = createCoreData;\n// This takes the core data and adjusts it based on the draggable's scale.\n// It's for when you're scaling the draggable and need the position to reflect that.\nvar createDraggableData = function (draggable, coreData) {\n    var scale = draggable.props.scale;\n    return {\n        node: coreData.node,\n        x: draggable.state.x + coreData.deltaX / scale,\n        y: draggable.state.y + coreData.deltaY / scale,\n        deltaX: coreData.deltaX / scale,\n        deltaY: coreData.deltaY / scale,\n        lastX: draggable.state.x,\n        lastY: draggable.state.y\n    };\n};\nexports.createDraggableData = createDraggableData;\n\n\n//# sourceURL=.././lib/utils/positionFns.ts");
+
+/***/ })
+
+},
+/******/ function(__webpack_require__) { // webpackRuntimeModules
+/******/ /* webpack/runtime/getFullHash */
+/******/ (() => {
+/******/ 	__webpack_require__.h = () => ("70be4e0fbe9db9ffb1bb")
+/******/ })();
+/******/ 
+/******/ }
+);