@marsio/vue-draggable 1.0.10 → 1.0.11

package/build/cjs/Draggable.js

@@ -133,6 +133,9 @@ const Draggable = exports.default = (0, _vue.defineComponent)({
       // Can only determine if SVG after mounting
       isElementSVG: false
     });
+    const internalState = {
+      isUnmounted: false
+    };
     const isElementNode = v => {
       return !!v && typeof v === 'object' && 'nodeType' in v && v.nodeType === 1;
     };
@@ -206,6 +209,7 @@ const Draggable = exports.default = (0, _vue.defineComponent)({
     });
     (0, _vue.onUnmounted)(() => {
       state.dragging = false;
+      internalState.isUnmounted = true;
       if (rafId != null) {
         window.cancelAnimationFrame(rafId);
         rafId = null;
@@ -350,14 +354,52 @@ const Draggable = exports.default = (0, _vue.defineComponent)({
       internalY = newY;
       internalSlackX = newSlackX;
       internalSlackY = newSlackY;
-      if (props.useRafDrag) {
-        if (rafId != null) {
-          window.cancelAnimationFrame(rafId);
-          rafId = null;
+
+      // PERF: If we are not controlled, we can just move the element directly.
+      // This allows us to run at 60fps without the overhead of Vue's reactivity system.
+      if (!props.position) {
+        const transformOpts = {
+          x: (0, _positionFns.canDragX)({
+            props
+          }) ? internalX : props.defaultPosition.x,
+          y: (0, _positionFns.canDragY)({
+            props
+          }) ? internalY : props.defaultPosition.y
+        };
+        const positionOffset = props.positionOffset;
+        const unit = 'px';
+        const isSVG = state.isElementSVG;
+        const translation = (0, _domFns.getTranslation)(transformOpts, positionOffset, unit);
+        const domNode = findDOMNode();
+        if (domNode) {
+          if (isSVG) {
+            // SVG logic usually requires attribute setting, but for performance we might try CSS if possible, 
+            // or just fallback to reactivity. 
+            // However, the original code used `createSVGTransform` which returns a string for `transform` attribute?
+            // Wait, existing code uses `transform` prop on VNode for SVG.
+            // Direct DOM manipulation on SVG attributes is also possible.
+            // For now, let's keep SVG on the react path or try direct setAttribute if simple.
+            // But let's stick to HTMLElement for the 'style' path for now to be safe.
+            if (!isSVG) (0, _domFns.setTransform)(domNode, translation);
+          } else {
+            (0, _domFns.setTransform)(domNode, translation);
+          }
+        }
+      }
+
+      // If controlled, or if using RafDrag, or if SVG (for safety), we flush.
+      // Actually, if controlled, we MUST flush to let parent update.
+      // If uncontrolled and HTML, we skip flush until stop!
+      if (props.position || props.useRafDrag || state.isElementSVG) {
+        if (props.useRafDrag) {
+          if (rafId != null) {
+            window.cancelAnimationFrame(rafId);
+            rafId = null;
+          }
+          flushToReactiveState();
+        } else {
+          scheduleFlush();
         }
-        flushToReactiveState();
-      } else {
-        scheduleFlush();
       }
     };
     const onDragStop = (e, coreData) => {
@@ -416,6 +458,8 @@ const Draggable = exports.default = (0, _vue.defineComponent)({
         window.cancelAnimationFrame(rafId);
         rafId = null;
       }
+
+      // Always flush at the end to ensure state sync
       flushToReactiveState();
     };
     const getFirstUsableChild = () => {
@@ -495,6 +539,12 @@ const Draggable = exports.default = (0, _vue.defineComponent)({
         style = (0, _domFns.createCSSTransform)(transformOpts, positionOffset);
       }
 
+      // Performance adjustment:
+      if (state.dragging && !state.isElementSVG) {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        style.willChange = 'transform';
+      }
+
       // Mark with class while dragging
       const className = (0, _clsx.default)(defaultClassName, {
         [defaultClassNameDragging]: state.dragging,

package/build/cjs/utils/domFns.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.removeUserSelectStyles = exports.removeEvent = exports.removeClassName = exports.outerWidth = exports.outerHeight = exports.offsetXYFromParent = exports.matchesSelectorAndParentsTo = exports.matchesSelector = exports.innerWidth = exports.innerHeight = exports.getTranslation = exports.getTouchIdentifier = exports.getTouch = exports.createSVGTransform = exports.createCSSTransform = exports.addUserSelectStyles = exports.addEvent = exports.addClassName = void 0;
+exports.setTransform = exports.removeUserSelectStyles = exports.removeEvent = exports.removeClassName = exports.outerWidth = exports.outerHeight = exports.offsetXYFromParent = exports.matchesSelectorAndParentsTo = exports.matchesSelector = exports.innerWidth = exports.innerHeight = exports.getTranslation = exports.getTouchIdentifier = exports.getTouch = exports.createSVGTransform = exports.createCSSTransform = exports.addUserSelectStyles = exports.addEvent = exports.addClassName = void 0;
 var _getPrefix = _interopRequireWildcard(require("./getPrefix"));
 var _shims = require("./shims");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
@@ -360,4 +360,16 @@ const removeUserSelectStyles = doc => {
     selection.removeAllRanges();
   }
 };
-exports.removeUserSelectStyles = removeUserSelectStyles;
+
+/**
+ * Sets the transform style of an element.
+ * 
+ * @param el - The element to set the transform on.
+ * @param translation - The translation string.
+ */
+exports.removeUserSelectStyles = removeUserSelectStyles;
+const setTransform = (el, translation) => {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  el.style[transformKey] = translation;
+};
+exports.setTransform = setTransform;

package/build/web/vue-draggable.min.179e4c366756eb300fbf.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/).
+ */
+globalThis["webpackHotUpdateVueDraggable"]("vue-draggable.min",{
+
+/***/ "./lib/Draggable.tsx"
+/*!***************************!*\
+  !*** ./lib/Draggable.tsx ***!
+  \***************************/
+(__unused_webpack_module, exports, __webpack_require__) {
+
+eval("{\nvar __assign = (this && this.__assign) || function () {\n    __assign = Object.assign || function(t) {\n        for (var s, i = 1, n = arguments.length; i < n; i++) {\n            s = arguments[i];\n            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))\n                t[p] = s[p];\n        }\n        return t;\n    };\n    return __assign.apply(this, arguments);\n};\nvar __rest = (this && this.__rest) || function (s, e) {\n    var t = {};\n    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)\n        t[p] = s[p];\n    if (s != null && typeof Object.getOwnPropertySymbols === \"function\")\n        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {\n            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))\n                t[p[i]] = s[p[i]];\n        }\n    return t;\n};\nvar __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {\n    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {\n        if (ar || !(i in from)) {\n            if (!ar) ar = Array.prototype.slice.call(from, 0, i);\n            ar[i] = from[i];\n        }\n    }\n    return to.concat(ar || Array.prototype.slice.call(from));\n};\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports.DraggableCore = exports[\"default\"] = exports.draggableProps = void 0;\n/**\n * Draggable is a Vue component that allows elements to be dragged and dropped.\n * It extends DraggableCore by adding Vue-specific props for more customized behavior.\n *\n * Props:\n * - axis: Specifies the axis along which the element can be dragged. Options are 'both', 'x', 'y', or 'none'. Default is 'both'.\n * - bounds: Constrains the draggable area. Can be an object specifying left, right, top, and bottom bounds, a string selector, or false for no bounds. Default is false.\n * - defaultClassName: The default class name applied to the element. Default is 'vue-draggable'.\n * - defaultClassNameDragging: The class name applied to the element while dragging. Default is 'vue-draggable-dragging'.\n * - defaultClassNameDragged: The class name applied to the element after it has been dragged. Default is 'vue-draggable-dragged'.\n * - defaultPosition: The default position of the element. An object with x and y properties. Default is {x: 0, y: 0}.\n * - positionOffset: Offset of the position. An object with x and y properties, each can be a number or a string. Default is {x: 0, y: 0}.\n * - position: Controls the position of the draggable element. An object with x and y properties.\n * - cancel: Specifies a selector to be used to prevent drag initialization.\n * - offsetParent: Specifies the offset parent of the draggable element. Must be a DOM Node.\n * - grid: Specifies the grid to snap the draggable element to during drag. An array of two numbers.\n * - handle: Specifies a selector to be used as the handle that initiates drag.\n * - nodeRef: A reference to the draggable node.\n * - allowAnyClick: Allows dragging to be initiated with any mouse button. Default is false.\n * - disabled: If true, the element cannot be dragged. Default is false.\n * - enableUserSelectHack: Enables a hack that prevents text selection during drag. Default is true.\n * - startFn, dragFn, stopFn: Functions that are called on drag start, during drag, and on drag stop, respectively. Each defaults to a no-op function.\n * - scale: The scale of the draggable element. Default is 1.\n *\n * Usage:\n * Wrap a single child component or element with <Draggable> to make it draggable. Configure behavior with props.\n *\n * Example:\n * <Draggable axis=\"x\" :defaultPosition=\"{x: 100, y: 0}\">\n *   <div>Drag me!</div>\n * </Draggable>\n *\n * Note:\n * This component requires Vue 3 and is designed to work within a Vue 3 application.\n */\nvar vue_1 = __webpack_require__(/*! vue */ \"vue\");\nvar clsx_1 = __importDefault(__webpack_require__(/*! clsx */ \"./node_modules/clsx/dist/clsx.m.js\"));\nvar domFns_1 = __webpack_require__(/*! ./utils/domFns */ \"./lib/utils/domFns.ts\");\nvar positionFns_1 = __webpack_require__(/*! ./utils/positionFns */ \"./lib/utils/positionFns.ts\");\nvar shims_1 = __webpack_require__(/*! ./utils/shims */ \"./lib/utils/shims.ts\");\nvar DraggableCore_1 = __importDefault(__webpack_require__(/*! ./DraggableCore */ \"./lib/DraggableCore.tsx\"));\nexports.DraggableCore = DraggableCore_1.default;\nvar log_1 = __importDefault(__webpack_require__(/*! ./utils/log */ \"./lib/utils/log.ts\"));\nvar noop_1 = __importDefault(__webpack_require__(/*! ./utils/noop */ \"./lib/utils/noop.ts\"));\nvar DraggableCore_2 = __webpack_require__(/*! ./DraggableCore */ \"./lib/DraggableCore.tsx\");\nexports.draggableProps = __assign(__assign({}, DraggableCore_2.draggableCoreProps), { \n    /** 限制拖拽方向 */\n    axis: {\n        type: String,\n        default: 'both'\n    }, \n    /** 锁定到首次移动的方向 */\n    directionLock: {\n        type: Boolean,\n        default: false\n    }, \n    /** 方向锁定的阈值像素 */\n    directionLockThreshold: {\n        type: Number,\n        default: 4\n    }, \n    /** 拖拽边界。可以是边界对象，CSS 选择器如 'parent' 或 '.container'，或 false 不限制 */\n    bounds: {\n        type: [Object, String, Boolean],\n        default: false\n    }, \n    /** 默认类名 */\n    defaultClassName: {\n        type: String,\n        default: 'vue-draggable'\n    }, \n    /** 拖拽中的类名 */\n    defaultClassNameDragging: {\n        type: String,\n        default: 'vue-draggable-dragging'\n    }, \n    /** 拖拽后的类名 */\n    defaultClassNameDragged: {\n        type: String,\n        default: 'vue-draggable-dragged'\n    }, \n    /** 初始位置（仅初始化时生效） */\n    defaultPosition: {\n        type: Object,\n        default: function () { return ({\n            x: 0,\n            y: 0\n        }); }\n    }, \n    /** 位置偏移量 */\n    positionOffset: {\n        type: Object\n    }, \n    /** 受控模式的位置，设置后必须通过 dragFn 更新 */\n    position: {\n        type: Object,\n        default: undefined\n    } });\nvar componentName = 'Draggable';\nvar Draggable = (0, vue_1.defineComponent)({\n    compatConfig: {\n        MODE: 3\n    },\n    name: componentName,\n    inheritAttrs: false,\n    props: __assign(__assign({}, exports.draggableProps), { style: (0, shims_1.dontSetMe)('style', componentName), class: (0, shims_1.dontSetMe)('class', componentName), transform: (0, shims_1.dontSetMe)('transform', componentName) }),\n    setup: function (props, _ref) {\n        var _a, _b, _c, _d, _e, _f;\n        var slots = _ref.slots;\n        var localNodeRef = (0, vue_1.ref)(null);\n        var state = (0, vue_1.reactive)({\n            // Whether or not we are currently dragging.\n            dragging: false,\n            // Whether or not we have been dragged before.\n            dragged: false,\n            // Current transform x and y.\n            x: (_c = (_b = (_a = props.position) === null || _a === void 0 ? void 0 : _a.x) !== null && _b !== void 0 ? _b : props.defaultPosition.x) !== null && _c !== void 0 ? _c : 0,\n            y: (_f = (_e = (_d = props.position) === null || _d === void 0 ? void 0 : _d.y) !== null && _e !== void 0 ? _e : props.defaultPosition.y) !== null && _f !== void 0 ? _f : 0,\n            // Used for compensating for out-of-bounds drags\n            slackX: 0,\n            slackY: 0,\n            // Can only determine if SVG after mounting\n            isElementSVG: false\n        });\n        var internalState = {\n            isUnmounted: false\n        };\n        var isElementNode = function (v) {\n            return !!v && typeof v === 'object' && 'nodeType' in v && v.nodeType === 1;\n        };\n        var isRefLike = function (v) {\n            return !!v && typeof v === 'object' && 'value' in v;\n        };\n        var findDOMNode = function () {\n            var nodeRef = props.nodeRef;\n            if (isRefLike(nodeRef)) {\n                var v = nodeRef.value;\n                if (isElementNode(v))\n                    return v;\n            }\n            else if (isElementNode(nodeRef)) {\n                return nodeRef;\n            }\n            return localNodeRef.value;\n        };\n        var boundsContext = {\n            props: props,\n            findDOMNode: findDOMNode,\n            __boundsCache: {\n                key: '',\n                node: null,\n                boundEl: null,\n                boundClientWidth: 0,\n                boundClientHeight: 0,\n                nodeClientWidth: 0,\n                nodeClientHeight: 0,\n                bounds: null\n            }\n        };\n        var rafId = null;\n        var internalX = state.x;\n        var internalY = state.y;\n        var internalSlackX = state.slackX;\n        var internalSlackY = state.slackY;\n        var directionLockAxis = null;\n        var directionLockFixedX = NaN;\n        var directionLockFixedY = NaN;\n        var directionLockTotalX = 0;\n        var directionLockTotalY = 0;\n        var resetDirectionLock = function () {\n            directionLockAxis = null;\n            directionLockFixedX = NaN;\n            directionLockFixedY = NaN;\n            directionLockTotalX = 0;\n            directionLockTotalY = 0;\n        };\n        var getDirectionLockThreshold = function () {\n            var threshold = typeof props.directionLockThreshold === 'number' ? props.directionLockThreshold : 0;\n            if (threshold <= 0)\n                return 0;\n            var scale = typeof props.scale === 'number' ? props.scale : 1;\n            if (!scale)\n                return threshold;\n            return threshold / scale;\n        };\n        var flushToReactiveState = function () {\n            rafId = null;\n            if (internalX === state.x && internalY === state.y && internalSlackX === state.slackX && internalSlackY === state.slackY)\n                return;\n            state.x = internalX;\n            state.y = internalY;\n            state.slackX = internalSlackX;\n            state.slackY = internalSlackY;\n        };\n        var scheduleFlush = function () {\n            if (rafId != null)\n                return;\n            rafId = window.requestAnimationFrame(flushToReactiveState);\n        };\n        (0, vue_1.onMounted)(function () {\n            if (typeof window.SVGElement !== 'undefined' && findDOMNode() instanceof window.SVGElement) {\n                state.isElementSVG = true;\n            }\n        });\n        (0, vue_1.onUnmounted)(function () {\n            state.dragging = false;\n            internalState.isUnmounted = true;\n            if (rafId != null) {\n                window.cancelAnimationFrame(rafId);\n                rafId = null;\n            }\n        });\n        var onDragStart = function (e, coreData) {\n            var _a;\n            (0, log_1.default)('Draggable: onDragStart: %j', coreData);\n            // Short-circuit if user's callback killed it.\n            var isControlled = Boolean(props.position);\n            if (isControlled) {\n                internalX = props.position.x;\n                internalY = props.position.y;\n            }\n            else {\n                internalX = state.x;\n                internalY = state.y;\n            }\n            internalSlackX = state.slackX;\n            internalSlackY = state.slackY;\n            boundsContext.__boundsCache.key = '';\n            boundsContext.__boundsCache.node = null;\n            boundsContext.__boundsCache.boundEl = null;\n            boundsContext.__boundsCache.boundClientWidth = 0;\n            boundsContext.__boundsCache.boundClientHeight = 0;\n            boundsContext.__boundsCache.nodeClientWidth = 0;\n            boundsContext.__boundsCache.nodeClientHeight = 0;\n            boundsContext.__boundsCache.bounds = null;\n            resetDirectionLock();\n            flushToReactiveState();\n            if (props.startFn !== noop_1.default) {\n                var scale = typeof props.scale === 'number' ? props.scale : 1;\n                var uiStart = {\n                    node: coreData.node,\n                    x: internalX + coreData.deltaX / scale,\n                    y: internalY + coreData.deltaY / scale,\n                    deltaX: coreData.deltaX / scale,\n                    deltaY: coreData.deltaY / scale,\n                    lastX: internalX,\n                    lastY: internalY\n                };\n                var shouldStart = (_a = props.startFn) === null || _a === void 0 ? void 0 : _a.call(props, e, uiStart);\n                // Kills start event on core as well, so move handlers are never bound.\n                if (shouldStart === false)\n                    return false;\n            }\n            state.dragging = true;\n            state.dragged = true;\n        };\n        var onDrag = function (e, coreData) {\n            var _a;\n            if (!state.dragging)\n                return false;\n            (0, log_1.default)('Draggable: dragFn: %j', coreData);\n            var scale = typeof props.scale === 'number' ? props.scale : 1;\n            var rawDeltaX = coreData.deltaX / scale;\n            var rawDeltaY = coreData.deltaY / scale;\n            var newX = internalX + rawDeltaX;\n            var newY = internalY + rawDeltaY;\n            var newSlackX = 0;\n            var newSlackY = 0;\n            var uiDeltaX = rawDeltaX;\n            var uiDeltaY = rawDeltaY;\n            var allowAxisX = (0, positionFns_1.canDragX)({\n                props: props\n            });\n            var allowAxisY = (0, positionFns_1.canDragY)({\n                props: props\n            });\n            var effectiveAxisX = allowAxisX;\n            var effectiveAxisY = allowAxisY;\n            if (props.directionLock && allowAxisX && allowAxisY) {\n                if (directionLockAxis == null) {\n                    directionLockTotalX += rawDeltaX;\n                    directionLockTotalY += rawDeltaY;\n                    var threshold = getDirectionLockThreshold();\n                    if (!threshold || Math.hypot(directionLockTotalX, directionLockTotalY) >= threshold) {\n                        directionLockAxis = Math.abs(directionLockTotalX) >= Math.abs(directionLockTotalY) ? 'x' : 'y';\n                        directionLockFixedX = internalX;\n                        directionLockFixedY = internalY;\n                    }\n                }\n                if (directionLockAxis === 'x' && Number.isFinite(directionLockFixedY)) {\n                    newY = directionLockFixedY;\n                    uiDeltaY = newY - internalY;\n                }\n                else if (directionLockAxis === 'y' && Number.isFinite(directionLockFixedX)) {\n                    newX = directionLockFixedX;\n                    uiDeltaX = newX - internalX;\n                }\n            }\n            if (directionLockAxis === 'x')\n                effectiveAxisY = false;\n            if (directionLockAxis === 'y')\n                effectiveAxisX = false;\n            if (!effectiveAxisX) {\n                newX = internalX;\n                uiDeltaX = 0;\n            }\n            if (!effectiveAxisY) {\n                newY = internalY;\n                uiDeltaY = 0;\n            }\n            // Keep within bounds.\n            if (props.bounds) {\n                // Save original x and y.\n                var x = newX;\n                var y = newY;\n                // Add slack to the values used to calculate bound position. This will ensure that if\n                // completely removed.\n                var slackX = effectiveAxisX ? internalSlackX : 0;\n                var slackY = effectiveAxisY ? internalSlackY : 0;\n                newX += slackX;\n                newY += slackY;\n                // Get bound position. This will ceil/floor the x and y within the boundaries.\n                var _b = (0, positionFns_1.getBoundPosition)(boundsContext, newX, newY), boundX = _b[0], boundY = _b[1];\n                newX = boundX;\n                newY = boundY;\n                // Recalculate slack by noting how much was shaved by the boundPosition handler.\n                newSlackX = slackX + (x - newX);\n                newSlackY = slackY + (y - newY);\n                // Update the event we fire to reflect what really happened after bounds took effect.\n                uiDeltaX = newX - internalX;\n                uiDeltaY = newY - internalY;\n            }\n            if (!effectiveAxisX)\n                newSlackX = 0;\n            if (!effectiveAxisY)\n                newSlackY = 0;\n            // Short-circuit if user's callback killed it.\n            if (props.dragFn !== noop_1.default) {\n                var uiData = {\n                    node: coreData.node,\n                    x: newX,\n                    y: newY,\n                    deltaX: uiDeltaX,\n                    deltaY: uiDeltaY,\n                    lastX: internalX,\n                    lastY: internalY\n                };\n                var shouldUpdate = (_a = props.dragFn) === null || _a === void 0 ? void 0 : _a.call(props, e, uiData);\n                if (shouldUpdate === false)\n                    return false;\n            }\n            internalX = newX;\n            internalY = newY;\n            internalSlackX = newSlackX;\n            internalSlackY = newSlackY;\n            // PERF: If we are not controlled, we can just move the element directly.\n            // This allows us to run at 60fps without the overhead of Vue's reactivity system.\n            if (!props.position) {\n                var transformOpts = {\n                    x: (0, positionFns_1.canDragX)({\n                        props: props\n                    }) ? internalX : props.defaultPosition.x,\n                    y: (0, positionFns_1.canDragY)({\n                        props: props\n                    }) ? internalY : props.defaultPosition.y\n                };\n                var positionOffset = props.positionOffset;\n                var unit = 'px';\n                var isSVG = state.isElementSVG;\n                var translation = (0, domFns_1.getTranslation)(transformOpts, positionOffset, unit);\n                var domNode = findDOMNode();\n                if (domNode) {\n                    if (isSVG) {\n                        // SVG logic usually requires attribute setting, but for performance we might try CSS if possible, \n                        // or just fallback to reactivity. \n                        // However, the original code used `createSVGTransform` which returns a string for `transform` attribute?\n                        // Wait, existing code uses `transform` prop on VNode for SVG.\n                        // Direct DOM manipulation on SVG attributes is also possible.\n                        // For now, let's keep SVG on the react path or try direct setAttribute if simple.\n                        // But let's stick to HTMLElement for the 'style' path for now to be safe.\n                        if (!isSVG)\n                            (0, domFns_1.setTransform)(domNode, translation);\n                    }\n                    else {\n                        (0, domFns_1.setTransform)(domNode, translation);\n                    }\n                }\n            }\n            // If controlled, or if using RafDrag, or if SVG (for safety), we flush.\n            // Actually, if controlled, we MUST flush to let parent update.\n            // If uncontrolled and HTML, we skip flush until stop!\n            if (props.position || props.useRafDrag || state.isElementSVG) {\n                if (props.useRafDrag) {\n                    if (rafId != null) {\n                        window.cancelAnimationFrame(rafId);\n                        rafId = null;\n                    }\n                    flushToReactiveState();\n                }\n                else {\n                    scheduleFlush();\n                }\n            }\n        };\n        var onDragStop = function (e, coreData) {\n            var _a;\n            if (!state.dragging)\n                return false;\n            // Short-circuit if user's callback killed it.\n            if (props.stopFn !== noop_1.default) {\n                var scale = typeof props.scale === 'number' ? props.scale : 1;\n                var allowAxisX = (0, positionFns_1.canDragX)({\n                    props: props\n                });\n                var allowAxisY = (0, positionFns_1.canDragY)({\n                    props: props\n                });\n                var effectiveAxisX = allowAxisX && directionLockAxis !== 'y';\n                var effectiveAxisY = allowAxisY && directionLockAxis !== 'x';\n                var deltaX = effectiveAxisX ? coreData.deltaX / scale : 0;\n                var deltaY = effectiveAxisY ? coreData.deltaY / scale : 0;\n                var uiStop = {\n                    node: coreData.node,\n                    x: internalX + deltaX,\n                    y: internalY + deltaY,\n                    deltaX: deltaX,\n                    deltaY: deltaY,\n                    lastX: internalX,\n                    lastY: internalY\n                };\n                var shouldContinue = (_a = props.stopFn) === null || _a === void 0 ? void 0 : _a.call(props, e, uiStop);\n                if (shouldContinue === false)\n                    return false;\n            }\n            (0, log_1.default)('Draggable: onDragStop: %j', coreData);\n            resetDirectionLock();\n            var newState = {\n                dragging: false,\n                slackX: 0,\n                slackY: 0\n            };\n            // If this is a controlled component, the result of this operation will be to\n            // revert back to the old position. We expect a handler on `onDragStop`, at the least.\n            var controlled = Boolean(props.position);\n            if (controlled) {\n                var _b = props.position, x = _b.x, y = _b.y;\n                newState.x = x;\n                newState.y = y;\n            }\n            state.dragging = newState.dragging;\n            internalSlackX = newState.slackX;\n            internalSlackY = newState.slackY;\n            if (typeof newState.x === 'number')\n                internalX = newState.x;\n            if (typeof newState.y === 'number')\n                internalY = newState.y;\n            if (rafId != null) {\n                window.cancelAnimationFrame(rafId);\n                rafId = null;\n            }\n            // Always flush at the end to ensure state sync\n            flushToReactiveState();\n        };\n        var getFirstUsableChild = function () {\n            var raw = slots.default ? slots.default() : [];\n            var stack = Array.isArray(raw) ? __spreadArray([], raw, true) : [raw];\n            while (stack.length) {\n                var item = stack.shift();\n                if (Array.isArray(item)) {\n                    for (var i = item.length - 1; i >= 0; i -= 1)\n                        stack.unshift(item[i]);\n                    continue;\n                }\n                if (!(0, vue_1.isVNode)(item))\n                    continue;\n                // Skip comment nodes and whitespace-only text nodes.\n                if (item.type === vue_1.Comment)\n                    continue;\n                if (item.type === vue_1.Text) {\n                    var txt = typeof item.children === 'string' ? item.children : '';\n                    if (!txt || !txt.trim())\n                        continue;\n                    // Draggable requires an element/component vnode, not bare text.\n                    continue;\n                }\n                // Unwrap fragments to find the first real node.\n                if (item.type === vue_1.Fragment) {\n                    var fragChildren = item.children;\n                    if (Array.isArray(fragChildren)) {\n                        for (var i = fragChildren.length - 1; i >= 0; i -= 1)\n                            stack.unshift(fragChildren[i]);\n                    }\n                    continue;\n                }\n                return item;\n            }\n            return null;\n        };\n        return function () {\n            var _a;\n            var _b, _c;\n            /* eslint-disable @typescript-eslint/no-unused-vars */\n            var axis = props.axis, directionLock = props.directionLock, directionLockThreshold = props.directionLockThreshold, bounds = props.bounds, defaultPosition = props.defaultPosition, defaultClassName = props.defaultClassName, defaultClassNameDragging = props.defaultClassNameDragging, defaultClassNameDragged = props.defaultClassNameDragged, position = props.position, positionOffset = props.positionOffset, scale = props.scale, draggableCoreProps = __rest(props, [\"axis\", \"directionLock\", \"directionLockThreshold\", \"bounds\", \"defaultPosition\", \"defaultClassName\", \"defaultClassNameDragging\", \"defaultClassNameDragged\", \"position\", \"positionOffset\", \"scale\"]);\n            /* eslint-enable @typescript-eslint/no-unused-vars */\n            var style = {};\n            var svgTransform = '';\n            var controlled = Boolean(position);\n            var draggable = !controlled || state.dragging;\n            var validPosition = position || defaultPosition;\n            var transformOpts = {\n                // Set left if horizontal drag is enabled\n                x: (_b = ((0, positionFns_1.canDragX)({\n                    props: props\n                }) && draggable ? state.x : validPosition.x)) !== null && _b !== void 0 ? _b : 0,\n                // Set top if vertical drag is enabled\n                y: (_c = ((0, positionFns_1.canDragY)({\n                    props: props\n                }) && draggable ? state.y : validPosition.y)) !== null && _c !== void 0 ? _c : 0\n            };\n            // If this element was SVG, we use the `transform` attribute.\n            if (state.isElementSVG) {\n                svgTransform = (0, domFns_1.createSVGTransform)(transformOpts, positionOffset);\n            }\n            else {\n                // Add a CSS transform to move the element around. This allows us to move the element around\n                // without worrying about whether or not it is relatively or absolutely positioned.\n                // If the item you are dragging already has a transform set, wrap it in a <span> so <Draggable>\n                // has a clean slate.\n                style = (0, domFns_1.createCSSTransform)(transformOpts, positionOffset);\n            }\n            // Performance adjustment:\n            if (state.dragging && !state.isElementSVG) {\n                // eslint-disable-next-line @typescript-eslint/no-explicit-any\n                style.willChange = 'transform';\n            }\n            // Mark with class while dragging\n            var className = (0, clsx_1.default)(defaultClassName, (_a = {},\n                _a[defaultClassNameDragging] = state.dragging,\n                _a[defaultClassNameDragged] = state.dragged,\n                _a));\n            var child = getFirstUsableChild();\n            if (!child)\n                return null;\n            var clonedChildren = (0, vue_1.cloneVNode)(child, {\n                class: className,\n                style: style,\n                transform: svgTransform\n            });\n            var coreProps = __assign(__assign({}, draggableCoreProps), { startFn: onDragStart, dragFn: onDrag, stopFn: onDragStop });\n            return (0, vue_1.createVNode)(DraggableCore_1.default, (0, vue_1.mergeProps)(coreProps, {\n                \"nodeRef\": props.nodeRef || localNodeRef\n            }), {\n                default: function () { return clonedChildren; }\n            });\n        };\n    }\n});\nexports[\"default\"] = Draggable;\n\n\n//# sourceURL=.././lib/Draggable.tsx\n}");
+
+/***/ }
+
+},
+/******/ function(__webpack_require__) { // webpackRuntimeModules
+/******/ /* webpack/runtime/getFullHash */
+/******/ (() => {
+/******/ 	__webpack_require__.h = () => ("900bc4aa354497b18d12")
+/******/ })();
+/******/ 
+/******/ }
+);

package/build/web/vue-draggable.min.19bbf2e057882622f2f8.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/).
+ */
+globalThis["webpackHotUpdateVueDraggable"]("vue-draggable.min",{
+
+/***/ "./lib/Draggable.tsx"
+/*!***************************!*\
+  !*** ./lib/Draggable.tsx ***!
+  \***************************/
+(__unused_webpack_module, exports, __webpack_require__) {
+
+eval("{\nvar __assign = (this && this.__assign) || function () {\n    __assign = Object.assign || function(t) {\n        for (var s, i = 1, n = arguments.length; i < n; i++) {\n            s = arguments[i];\n            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))\n                t[p] = s[p];\n        }\n        return t;\n    };\n    return __assign.apply(this, arguments);\n};\nvar __rest = (this && this.__rest) || function (s, e) {\n    var t = {};\n    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)\n        t[p] = s[p];\n    if (s != null && typeof Object.getOwnPropertySymbols === \"function\")\n        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {\n            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))\n                t[p[i]] = s[p[i]];\n        }\n    return t;\n};\nvar __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {\n    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {\n        if (ar || !(i in from)) {\n            if (!ar) ar = Array.prototype.slice.call(from, 0, i);\n            ar[i] = from[i];\n        }\n    }\n    return to.concat(ar || Array.prototype.slice.call(from));\n};\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports.DraggableCore = exports[\"default\"] = exports.draggableProps = void 0;\n/**\n * Draggable is a Vue component that allows elements to be dragged and dropped.\n * It extends DraggableCore by adding Vue-specific props for more customized behavior.\n *\n * Props:\n * - axis: Specifies the axis along which the element can be dragged. Options are 'both', 'x', 'y', or 'none'. Default is 'both'.\n * - bounds: Constrains the draggable area. Can be an object specifying left, right, top, and bottom bounds, a string selector, or false for no bounds. Default is false.\n * - defaultClassName: The default class name applied to the element. Default is 'vue-draggable'.\n * - defaultClassNameDragging: The class name applied to the element while dragging. Default is 'vue-draggable-dragging'.\n * - defaultClassNameDragged: The class name applied to the element after it has been dragged. Default is 'vue-draggable-dragged'.\n * - defaultPosition: The default position of the element. An object with x and y properties. Default is {x: 0, y: 0}.\n * - positionOffset: Offset of the position. An object with x and y properties, each can be a number or a string. Default is {x: 0, y: 0}.\n * - position: Controls the position of the draggable element. An object with x and y properties.\n * - cancel: Specifies a selector to be used to prevent drag initialization.\n * - offsetParent: Specifies the offset parent of the draggable element. Must be a DOM Node.\n * - grid: Specifies the grid to snap the draggable element to during drag. An array of two numbers.\n * - handle: Specifies a selector to be used as the handle that initiates drag.\n * - nodeRef: A reference to the draggable node.\n * - allowAnyClick: Allows dragging to be initiated with any mouse button. Default is false.\n * - disabled: If true, the element cannot be dragged. Default is false.\n * - enableUserSelectHack: Enables a hack that prevents text selection during drag. Default is true.\n * - startFn, dragFn, stopFn: Functions that are called on drag start, during drag, and on drag stop, respectively. Each defaults to a no-op function.\n * - scale: The scale of the draggable element. Default is 1.\n *\n * Usage:\n * Wrap a single child component or element with <Draggable> to make it draggable. Configure behavior with props.\n *\n * Example:\n * <Draggable axis=\"x\" :defaultPosition=\"{x: 100, y: 0}\">\n *   <div>Drag me!</div>\n * </Draggable>\n *\n * Note:\n * This component requires Vue 3 and is designed to work within a Vue 3 application.\n */\nvar vue_1 = __webpack_require__(/*! vue */ \"vue\");\nvar clsx_1 = __importDefault(__webpack_require__(/*! clsx */ \"./node_modules/clsx/dist/clsx.m.js\"));\nvar domFns_1 = __webpack_require__(/*! ./utils/domFns */ \"./lib/utils/domFns.ts\");\nvar positionFns_1 = __webpack_require__(/*! ./utils/positionFns */ \"./lib/utils/positionFns.ts\");\nvar shims_1 = __webpack_require__(/*! ./utils/shims */ \"./lib/utils/shims.ts\");\nvar DraggableCore_1 = __importDefault(__webpack_require__(/*! ./DraggableCore */ \"./lib/DraggableCore.tsx\"));\nexports.DraggableCore = DraggableCore_1.default;\nvar log_1 = __importDefault(__webpack_require__(/*! ./utils/log */ \"./lib/utils/log.ts\"));\nvar noop_1 = __importDefault(__webpack_require__(/*! ./utils/noop */ \"./lib/utils/noop.ts\"));\nvar DraggableCore_2 = __webpack_require__(/*! ./DraggableCore */ \"./lib/DraggableCore.tsx\");\nexports.draggableProps = __assign(__assign({}, DraggableCore_2.draggableCoreProps), { \n    /** Restricts drag direction ('x', 'y', or 'both') */\n    axis: {\n        type: String,\n        default: 'both'\n    }, \n    /** Locks drag to the direction of the first movement */\n    directionLock: {\n        type: Boolean,\n        default: false\n    }, \n    /** Threshold in pixels for direction locking */\n    directionLockThreshold: {\n        type: Number,\n        default: 4\n    }, \n    /** Drag bounds. Can be a selector, 'parent', object, or false */\n    bounds: {\n        type: [Object, String, Boolean],\n        default: false\n    }, \n    /** Default class name */\n    defaultClassName: {\n        type: String,\n        default: 'vue-draggable'\n    }, \n    /** Class name while dragging */\n    defaultClassNameDragging: {\n        type: String,\n        default: 'vue-draggable-dragging'\n    }, \n    /** Class name after drag stops */\n    defaultClassNameDragged: {\n        type: String,\n        default: 'vue-draggable-dragged'\n    }, \n    /** Initial position (only used at initialization) */\n    defaultPosition: {\n        type: Object,\n        default: function () { return ({\n            x: 0,\n            y: 0\n        }); }\n    }, \n    /** Position offset */\n    positionOffset: {\n        type: Object\n    }, \n    /** Controlled position. Must be updated via dragFn when set */\n    position: {\n        type: Object,\n        default: undefined\n    } });\nvar componentName = 'Draggable';\nvar Draggable = (0, vue_1.defineComponent)({\n    compatConfig: {\n        MODE: 3\n    },\n    name: componentName,\n    inheritAttrs: false,\n    props: __assign(__assign({}, exports.draggableProps), { style: (0, shims_1.dontSetMe)('style', componentName), class: (0, shims_1.dontSetMe)('class', componentName), transform: (0, shims_1.dontSetMe)('transform', componentName) }),\n    setup: function (props, _ref) {\n        var _a, _b, _c, _d, _e, _f;\n        var slots = _ref.slots;\n        var localNodeRef = (0, vue_1.ref)(null);\n        var state = (0, vue_1.reactive)({\n            // Whether or not we are currently dragging.\n            dragging: false,\n            // Whether or not we have been dragged before.\n            dragged: false,\n            // Current transform x and y.\n            x: (_c = (_b = (_a = props.position) === null || _a === void 0 ? void 0 : _a.x) !== null && _b !== void 0 ? _b : props.defaultPosition.x) !== null && _c !== void 0 ? _c : 0,\n            y: (_f = (_e = (_d = props.position) === null || _d === void 0 ? void 0 : _d.y) !== null && _e !== void 0 ? _e : props.defaultPosition.y) !== null && _f !== void 0 ? _f : 0,\n            // Used for compensating for out-of-bounds drags\n            slackX: 0,\n            slackY: 0,\n            // Can only determine if SVG after mounting\n            isElementSVG: false\n        });\n        var internalState = {\n            isUnmounted: false\n        };\n        var isElementNode = function (v) {\n            return !!v && typeof v === 'object' && 'nodeType' in v && v.nodeType === 1;\n        };\n        var isRefLike = function (v) {\n            return !!v && typeof v === 'object' && 'value' in v;\n        };\n        var findDOMNode = function () {\n            var nodeRef = props.nodeRef;\n            if (isRefLike(nodeRef)) {\n                var v = nodeRef.value;\n                if (isElementNode(v))\n                    return v;\n            }\n            else if (isElementNode(nodeRef)) {\n                return nodeRef;\n            }\n            return localNodeRef.value;\n        };\n        var boundsContext = {\n            props: props,\n            findDOMNode: findDOMNode,\n            __boundsCache: {\n                key: '',\n                node: null,\n                boundEl: null,\n                boundClientWidth: 0,\n                boundClientHeight: 0,\n                nodeClientWidth: 0,\n                nodeClientHeight: 0,\n                bounds: null\n            }\n        };\n        var rafId = null;\n        var internalX = state.x;\n        var internalY = state.y;\n        var internalSlackX = state.slackX;\n        var internalSlackY = state.slackY;\n        var directionLockAxis = null;\n        var directionLockFixedX = NaN;\n        var directionLockFixedY = NaN;\n        var directionLockTotalX = 0;\n        var directionLockTotalY = 0;\n        var resetDirectionLock = function () {\n            directionLockAxis = null;\n            directionLockFixedX = NaN;\n            directionLockFixedY = NaN;\n            directionLockTotalX = 0;\n            directionLockTotalY = 0;\n        };\n        var getDirectionLockThreshold = function () {\n            var threshold = typeof props.directionLockThreshold === 'number' ? props.directionLockThreshold : 0;\n            if (threshold <= 0)\n                return 0;\n            var scale = typeof props.scale === 'number' ? props.scale : 1;\n            if (!scale)\n                return threshold;\n            return threshold / scale;\n        };\n        var flushToReactiveState = function () {\n            rafId = null;\n            if (internalX === state.x && internalY === state.y && internalSlackX === state.slackX && internalSlackY === state.slackY)\n                return;\n            state.x = internalX;\n            state.y = internalY;\n            state.slackX = internalSlackX;\n            state.slackY = internalSlackY;\n        };\n        var scheduleFlush = function () {\n            if (rafId != null)\n                return;\n            rafId = window.requestAnimationFrame(flushToReactiveState);\n        };\n        (0, vue_1.onMounted)(function () {\n            if (typeof window.SVGElement !== 'undefined' && findDOMNode() instanceof window.SVGElement) {\n                state.isElementSVG = true;\n            }\n        });\n        (0, vue_1.onUnmounted)(function () {\n            state.dragging = false;\n            internalState.isUnmounted = true;\n            if (rafId != null) {\n                window.cancelAnimationFrame(rafId);\n                rafId = null;\n            }\n        });\n        var onDragStart = function (e, coreData) {\n            var _a;\n            (0, log_1.default)('Draggable: onDragStart: %j', coreData);\n            // Short-circuit if user's callback killed it.\n            var isControlled = Boolean(props.position);\n            if (isControlled) {\n                internalX = props.position.x;\n                internalY = props.position.y;\n            }\n            else {\n                internalX = state.x;\n                internalY = state.y;\n            }\n            internalSlackX = state.slackX;\n            internalSlackY = state.slackY;\n            boundsContext.__boundsCache.key = '';\n            boundsContext.__boundsCache.node = null;\n            boundsContext.__boundsCache.boundEl = null;\n            boundsContext.__boundsCache.boundClientWidth = 0;\n            boundsContext.__boundsCache.boundClientHeight = 0;\n            boundsContext.__boundsCache.nodeClientWidth = 0;\n            boundsContext.__boundsCache.nodeClientHeight = 0;\n            boundsContext.__boundsCache.bounds = null;\n            resetDirectionLock();\n            flushToReactiveState();\n            if (props.startFn !== noop_1.default) {\n                var scale = typeof props.scale === 'number' ? props.scale : 1;\n                var uiStart = {\n                    node: coreData.node,\n                    x: internalX + coreData.deltaX / scale,\n                    y: internalY + coreData.deltaY / scale,\n                    deltaX: coreData.deltaX / scale,\n                    deltaY: coreData.deltaY / scale,\n                    lastX: internalX,\n                    lastY: internalY\n                };\n                var shouldStart = (_a = props.startFn) === null || _a === void 0 ? void 0 : _a.call(props, e, uiStart);\n                // Kills start event on core as well, so move handlers are never bound.\n                if (shouldStart === false)\n                    return false;\n            }\n            state.dragging = true;\n            state.dragged = true;\n        };\n        var onDrag = function (e, coreData) {\n            var _a;\n            if (!state.dragging)\n                return false;\n            (0, log_1.default)('Draggable: dragFn: %j', coreData);\n            var scale = typeof props.scale === 'number' ? props.scale : 1;\n            var rawDeltaX = coreData.deltaX / scale;\n            var rawDeltaY = coreData.deltaY / scale;\n            var newX = internalX + rawDeltaX;\n            var newY = internalY + rawDeltaY;\n            var newSlackX = 0;\n            var newSlackY = 0;\n            var uiDeltaX = rawDeltaX;\n            var uiDeltaY = rawDeltaY;\n            var allowAxisX = (0, positionFns_1.canDragX)({\n                props: props\n            });\n            var allowAxisY = (0, positionFns_1.canDragY)({\n                props: props\n            });\n            var effectiveAxisX = allowAxisX;\n            var effectiveAxisY = allowAxisY;\n            if (props.directionLock && allowAxisX && allowAxisY) {\n                if (directionLockAxis == null) {\n                    directionLockTotalX += rawDeltaX;\n                    directionLockTotalY += rawDeltaY;\n                    var threshold = getDirectionLockThreshold();\n                    if (!threshold || Math.hypot(directionLockTotalX, directionLockTotalY) >= threshold) {\n                        directionLockAxis = Math.abs(directionLockTotalX) >= Math.abs(directionLockTotalY) ? 'x' : 'y';\n                        directionLockFixedX = internalX;\n                        directionLockFixedY = internalY;\n                    }\n                }\n                if (directionLockAxis === 'x' && Number.isFinite(directionLockFixedY)) {\n                    newY = directionLockFixedY;\n                    uiDeltaY = newY - internalY;\n                }\n                else if (directionLockAxis === 'y' && Number.isFinite(directionLockFixedX)) {\n                    newX = directionLockFixedX;\n                    uiDeltaX = newX - internalX;\n                }\n            }\n            if (directionLockAxis === 'x')\n                effectiveAxisY = false;\n            if (directionLockAxis === 'y')\n                effectiveAxisX = false;\n            if (!effectiveAxisX) {\n                newX = internalX;\n                uiDeltaX = 0;\n            }\n            if (!effectiveAxisY) {\n                newY = internalY;\n                uiDeltaY = 0;\n            }\n            // Keep within bounds.\n            if (props.bounds) {\n                // Save original x and y.\n                var x = newX;\n                var y = newY;\n                // Add slack to the values used to calculate bound position. This will ensure that if\n                // completely removed.\n                var slackX = effectiveAxisX ? internalSlackX : 0;\n                var slackY = effectiveAxisY ? internalSlackY : 0;\n                newX += slackX;\n                newY += slackY;\n                // Get bound position. This will ceil/floor the x and y within the boundaries.\n                var _b = (0, positionFns_1.getBoundPosition)(boundsContext, newX, newY), boundX = _b[0], boundY = _b[1];\n                newX = boundX;\n                newY = boundY;\n                // Recalculate slack by noting how much was shaved by the boundPosition handler.\n                newSlackX = slackX + (x - newX);\n                newSlackY = slackY + (y - newY);\n                // Update the event we fire to reflect what really happened after bounds took effect.\n                uiDeltaX = newX - internalX;\n                uiDeltaY = newY - internalY;\n            }\n            if (!effectiveAxisX)\n                newSlackX = 0;\n            if (!effectiveAxisY)\n                newSlackY = 0;\n            // Short-circuit if user's callback killed it.\n            if (props.dragFn !== noop_1.default) {\n                var uiData = {\n                    node: coreData.node,\n                    x: newX,\n                    y: newY,\n                    deltaX: uiDeltaX,\n                    deltaY: uiDeltaY,\n                    lastX: internalX,\n                    lastY: internalY\n                };\n                var shouldUpdate = (_a = props.dragFn) === null || _a === void 0 ? void 0 : _a.call(props, e, uiData);\n                if (shouldUpdate === false)\n                    return false;\n            }\n            internalX = newX;\n            internalY = newY;\n            internalSlackX = newSlackX;\n            internalSlackY = newSlackY;\n            // PERF: If we are not controlled, we can just move the element directly.\n            // This allows us to run at 60fps without the overhead of Vue's reactivity system.\n            if (!props.position) {\n                var transformOpts = {\n                    x: (0, positionFns_1.canDragX)({\n                        props: props\n                    }) ? internalX : props.defaultPosition.x,\n                    y: (0, positionFns_1.canDragY)({\n                        props: props\n                    }) ? internalY : props.defaultPosition.y\n                };\n                var positionOffset = props.positionOffset;\n                var unit = 'px';\n                var isSVG = state.isElementSVG;\n                var translation = (0, domFns_1.getTranslation)(transformOpts, positionOffset, unit);\n                var domNode = findDOMNode();\n                if (domNode) {\n                    if (isSVG) {\n                        // SVG logic usually requires attribute setting, but for performance we might try CSS if possible, \n                        // or just fallback to reactivity. \n                        // However, the original code used `createSVGTransform` which returns a string for `transform` attribute?\n                        // Wait, existing code uses `transform` prop on VNode for SVG.\n                        // Direct DOM manipulation on SVG attributes is also possible.\n                        // For now, let's keep SVG on the react path or try direct setAttribute if simple.\n                        // But let's stick to HTMLElement for the 'style' path for now to be safe.\n                        if (!isSVG)\n                            (0, domFns_1.setTransform)(domNode, translation);\n                    }\n                    else {\n                        (0, domFns_1.setTransform)(domNode, translation);\n                    }\n                }\n            }\n            // If controlled, or if using RafDrag, or if SVG (for safety), we flush.\n            // Actually, if controlled, we MUST flush to let parent update.\n            // If uncontrolled and HTML, we skip flush until stop!\n            if (props.position || props.useRafDrag || state.isElementSVG) {\n                if (props.useRafDrag) {\n                    if (rafId != null) {\n                        window.cancelAnimationFrame(rafId);\n                        rafId = null;\n                    }\n                    flushToReactiveState();\n                }\n                else {\n                    scheduleFlush();\n                }\n            }\n        };\n        var onDragStop = function (e, coreData) {\n            var _a;\n            if (!state.dragging)\n                return false;\n            // Short-circuit if user's callback killed it.\n            if (props.stopFn !== noop_1.default) {\n                var scale = typeof props.scale === 'number' ? props.scale : 1;\n                var allowAxisX = (0, positionFns_1.canDragX)({\n                    props: props\n                });\n                var allowAxisY = (0, positionFns_1.canDragY)({\n                    props: props\n                });\n                var effectiveAxisX = allowAxisX && directionLockAxis !== 'y';\n                var effectiveAxisY = allowAxisY && directionLockAxis !== 'x';\n                var deltaX = effectiveAxisX ? coreData.deltaX / scale : 0;\n                var deltaY = effectiveAxisY ? coreData.deltaY / scale : 0;\n                var uiStop = {\n                    node: coreData.node,\n                    x: internalX + deltaX,\n                    y: internalY + deltaY,\n                    deltaX: deltaX,\n                    deltaY: deltaY,\n                    lastX: internalX,\n                    lastY: internalY\n                };\n                var shouldContinue = (_a = props.stopFn) === null || _a === void 0 ? void 0 : _a.call(props, e, uiStop);\n                if (shouldContinue === false)\n                    return false;\n            }\n            (0, log_1.default)('Draggable: onDragStop: %j', coreData);\n            resetDirectionLock();\n            var newState = {\n                dragging: false,\n                slackX: 0,\n                slackY: 0\n            };\n            // If this is a controlled component, the result of this operation will be to\n            // revert back to the old position. We expect a handler on `onDragStop`, at the least.\n            var controlled = Boolean(props.position);\n            if (controlled) {\n                var _b = props.position, x = _b.x, y = _b.y;\n                newState.x = x;\n                newState.y = y;\n            }\n            state.dragging = newState.dragging;\n            internalSlackX = newState.slackX;\n            internalSlackY = newState.slackY;\n            if (typeof newState.x === 'number')\n                internalX = newState.x;\n            if (typeof newState.y === 'number')\n                internalY = newState.y;\n            if (rafId != null) {\n                window.cancelAnimationFrame(rafId);\n                rafId = null;\n            }\n            // Always flush at the end to ensure state sync\n            flushToReactiveState();\n        };\n        var getFirstUsableChild = function () {\n            var raw = slots.default ? slots.default() : [];\n            var stack = Array.isArray(raw) ? __spreadArray([], raw, true) : [raw];\n            while (stack.length) {\n                var item = stack.shift();\n                if (Array.isArray(item)) {\n                    for (var i = item.length - 1; i >= 0; i -= 1)\n                        stack.unshift(item[i]);\n                    continue;\n                }\n                if (!(0, vue_1.isVNode)(item))\n                    continue;\n                // Skip comment nodes and whitespace-only text nodes.\n                if (item.type === vue_1.Comment)\n                    continue;\n                if (item.type === vue_1.Text) {\n                    var txt = typeof item.children === 'string' ? item.children : '';\n                    if (!txt || !txt.trim())\n                        continue;\n                    // Draggable requires an element/component vnode, not bare text.\n                    continue;\n                }\n                // Unwrap fragments to find the first real node.\n                if (item.type === vue_1.Fragment) {\n                    var fragChildren = item.children;\n                    if (Array.isArray(fragChildren)) {\n                        for (var i = fragChildren.length - 1; i >= 0; i -= 1)\n                            stack.unshift(fragChildren[i]);\n                    }\n                    continue;\n                }\n                return item;\n            }\n            return null;\n        };\n        return function () {\n            var _a;\n            var _b, _c;\n            /* eslint-disable @typescript-eslint/no-unused-vars */\n            var axis = props.axis, directionLock = props.directionLock, directionLockThreshold = props.directionLockThreshold, bounds = props.bounds, defaultPosition = props.defaultPosition, defaultClassName = props.defaultClassName, defaultClassNameDragging = props.defaultClassNameDragging, defaultClassNameDragged = props.defaultClassNameDragged, position = props.position, positionOffset = props.positionOffset, scale = props.scale, draggableCoreProps = __rest(props, [\"axis\", \"directionLock\", \"directionLockThreshold\", \"bounds\", \"defaultPosition\", \"defaultClassName\", \"defaultClassNameDragging\", \"defaultClassNameDragged\", \"position\", \"positionOffset\", \"scale\"]);\n            /* eslint-enable @typescript-eslint/no-unused-vars */\n            var style = {};\n            var svgTransform = '';\n            var controlled = Boolean(position);\n            var draggable = !controlled || state.dragging;\n            var validPosition = position || defaultPosition;\n            var transformOpts = {\n                // Set left if horizontal drag is enabled\n                x: (_b = ((0, positionFns_1.canDragX)({\n                    props: props\n                }) && draggable ? state.x : validPosition.x)) !== null && _b !== void 0 ? _b : 0,\n                // Set top if vertical drag is enabled\n                y: (_c = ((0, positionFns_1.canDragY)({\n                    props: props\n                }) && draggable ? state.y : validPosition.y)) !== null && _c !== void 0 ? _c : 0\n            };\n            // If this element was SVG, we use the `transform` attribute.\n            if (state.isElementSVG) {\n                svgTransform = (0, domFns_1.createSVGTransform)(transformOpts, positionOffset);\n            }\n            else {\n                // Add a CSS transform to move the element around. This allows us to move the element around\n                // without worrying about whether or not it is relatively or absolutely positioned.\n                // If the item you are dragging already has a transform set, wrap it in a <span> so <Draggable>\n                // has a clean slate.\n                style = (0, domFns_1.createCSSTransform)(transformOpts, positionOffset);\n            }\n            // Performance adjustment:\n            if (state.dragging && !state.isElementSVG) {\n                // eslint-disable-next-line @typescript-eslint/no-explicit-any\n                style.willChange = 'transform';\n            }\n            // Mark with class while dragging\n            var className = (0, clsx_1.default)(defaultClassName, (_a = {},\n                _a[defaultClassNameDragging] = state.dragging,\n                _a[defaultClassNameDragged] = state.dragged,\n                _a));\n            var child = getFirstUsableChild();\n            if (!child)\n                return null;\n            var clonedChildren = (0, vue_1.cloneVNode)(child, {\n                class: className,\n                style: style,\n                transform: svgTransform\n            });\n            var coreProps = __assign(__assign({}, draggableCoreProps), { startFn: onDragStart, dragFn: onDrag, stopFn: onDragStop });\n            return (0, vue_1.createVNode)(DraggableCore_1.default, (0, vue_1.mergeProps)(coreProps, {\n                \"nodeRef\": props.nodeRef || localNodeRef\n            }), {\n                default: function () { return clonedChildren; }\n            });\n        };\n    }\n});\nexports[\"default\"] = Draggable;\n\n\n//# sourceURL=.././lib/Draggable.tsx\n}");
+
+/***/ }
+
+},
+/******/ function(__webpack_require__) { // webpackRuntimeModules
+/******/ /* webpack/runtime/getFullHash */
+/******/ (() => {
+/******/ 	__webpack_require__.h = () => ("a529009727f3ce56b642")
+/******/ })();
+/******/ 
+/******/ }
+);

package/build/web/vue-draggable.min.6cc5294fa16ef72f1dc6.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/).
+ */
+globalThis["webpackHotUpdateVueDraggable"]("vue-draggable.min",{
+
+/***/ "./lib/Draggable.tsx"
+/*!***************************!*\
+  !*** ./lib/Draggable.tsx ***!
+  \***************************/
+(__unused_webpack_module, exports, __webpack_require__) {
+
+eval("{\nvar __assign = (this && this.__assign) || function () {\n    __assign = Object.assign || function(t) {\n        for (var s, i = 1, n = arguments.length; i < n; i++) {\n            s = arguments[i];\n            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))\n                t[p] = s[p];\n        }\n        return t;\n    };\n    return __assign.apply(this, arguments);\n};\nvar __rest = (this && this.__rest) || function (s, e) {\n    var t = {};\n    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)\n        t[p] = s[p];\n    if (s != null && typeof Object.getOwnPropertySymbols === \"function\")\n        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {\n            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))\n                t[p[i]] = s[p[i]];\n        }\n    return t;\n};\nvar __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {\n    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {\n        if (ar || !(i in from)) {\n            if (!ar) ar = Array.prototype.slice.call(from, 0, i);\n            ar[i] = from[i];\n        }\n    }\n    return to.concat(ar || Array.prototype.slice.call(from));\n};\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports.DraggableCore = exports[\"default\"] = exports.draggableProps = void 0;\n/**\n * Draggable is a Vue component that allows elements to be dragged and dropped.\n * It extends DraggableCore by adding Vue-specific props for more customized behavior.\n *\n * Props:\n * - axis: Specifies the axis along which the element can be dragged. Options are 'both', 'x', 'y', or 'none'. Default is 'both'.\n * - bounds: Constrains the draggable area. Can be an object specifying left, right, top, and bottom bounds, a string selector, or false for no bounds. Default is false.\n * - defaultClassName: The default class name applied to the element. Default is 'vue-draggable'.\n * - defaultClassNameDragging: The class name applied to the element while dragging. Default is 'vue-draggable-dragging'.\n * - defaultClassNameDragged: The class name applied to the element after it has been dragged. Default is 'vue-draggable-dragged'.\n * - defaultPosition: The default position of the element. An object with x and y properties. Default is {x: 0, y: 0}.\n * - positionOffset: Offset of the position. An object with x and y properties, each can be a number or a string. Default is {x: 0, y: 0}.\n * - position: Controls the position of the draggable element. An object with x and y properties.\n * - cancel: Specifies a selector to be used to prevent drag initialization.\n * - offsetParent: Specifies the offset parent of the draggable element. Must be a DOM Node.\n * - grid: Specifies the grid to snap the draggable element to during drag. An array of two numbers.\n * - handle: Specifies a selector to be used as the handle that initiates drag.\n * - nodeRef: A reference to the draggable node.\n * - allowAnyClick: Allows dragging to be initiated with any mouse button. Default is false.\n * - disabled: If true, the element cannot be dragged. Default is false.\n * - enableUserSelectHack: Enables a hack that prevents text selection during drag. Default is true.\n * - startFn, dragFn, stopFn: Functions that are called on drag start, during drag, and on drag stop, respectively. Each defaults to a no-op function.\n * - scale: The scale of the draggable element. Default is 1.\n *\n * Usage:\n * Wrap a single child component or element with <Draggable> to make it draggable. Configure behavior with props.\n *\n * Example:\n * <Draggable axis=\"x\" :defaultPosition=\"{x: 100, y: 0}\">\n *   <div>Drag me!</div>\n * </Draggable>\n *\n * Note:\n * This component requires Vue 3 and is designed to work within a Vue 3 application.\n */\nvar vue_1 = __webpack_require__(/*! vue */ \"vue\");\nvar clsx_1 = __importDefault(__webpack_require__(/*! clsx */ \"./node_modules/clsx/dist/clsx.m.js\"));\nvar domFns_1 = __webpack_require__(/*! ./utils/domFns */ \"./lib/utils/domFns.ts\");\nvar positionFns_1 = __webpack_require__(/*! ./utils/positionFns */ \"./lib/utils/positionFns.ts\");\nvar shims_1 = __webpack_require__(/*! ./utils/shims */ \"./lib/utils/shims.ts\");\nvar DraggableCore_1 = __importDefault(__webpack_require__(/*! ./DraggableCore */ \"./lib/DraggableCore.tsx\"));\nexports.DraggableCore = DraggableCore_1.default;\nvar log_1 = __importDefault(__webpack_require__(/*! ./utils/log */ \"./lib/utils/log.ts\"));\nvar noop_1 = __importDefault(__webpack_require__(/*! ./utils/noop */ \"./lib/utils/noop.ts\"));\nvar DraggableCore_2 = __webpack_require__(/*! ./DraggableCore */ \"./lib/DraggableCore.tsx\");\nexports.draggableProps = __assign(__assign({}, DraggableCore_2.draggableCoreProps), { \n    /** 限制拖拽方向 */\n    axis: {\n        type: String,\n        default: 'both'\n    }, \n    /** 锁定到首次移动的方向 */\n    directionLock: {\n        type: Boolean,\n        default: false\n    }, \n    /** 方向锁定的阈值像素 */\n    directionLockThreshold: {\n        type: Number,\n        default: 4\n    }, \n    /** 拖拽边界。可以是边界对象，CSS 选择器如 'parent' 或 '.container'，或 false 不限制 */\n    bounds: {\n        type: [Object, String, Boolean],\n        default: false\n    }, \n    /** 默认类名 */\n    defaultClassName: {\n        type: String,\n        default: 'vue-draggable'\n    }, \n    /** 拖拽中的类名 */\n    defaultClassNameDragging: {\n        type: String,\n        default: 'vue-draggable-dragging'\n    }, \n    /** 拖拽后的类名 */\n    defaultClassNameDragged: {\n        type: String,\n        default: 'vue-draggable-dragged'\n    }, \n    /** 初始位置（仅初始化时生效） */\n    defaultPosition: {\n        type: Object,\n        default: function () { return ({\n            x: 0,\n            y: 0\n        }); }\n    }, \n    /** 位置偏移量 */\n    positionOffset: {\n        type: Object\n    }, \n    /** 受控模式的位置，设置后必须通过 dragFn 更新 */\n    /** 受控模式的位置，设置后必须通过 dragFn 更新 */\n    position: {\n        type: Object,\n        default: undefined\n    } });\nvar componentName = 'Draggable';\nvar Draggable = (0, vue_1.defineComponent)({\n    compatConfig: {\n        MODE: 3\n    },\n    name: componentName,\n    inheritAttrs: false,\n    props: __assign(__assign({}, exports.draggableProps), { style: (0, shims_1.dontSetMe)('style', componentName), class: (0, shims_1.dontSetMe)('class', componentName), transform: (0, shims_1.dontSetMe)('transform', componentName) }),\n    setup: function (props, _ref) {\n        var _a, _b, _c, _d, _e, _f;\n        var slots = _ref.slots;\n        var localNodeRef = (0, vue_1.ref)(null);\n        var state = (0, vue_1.reactive)({\n            // Whether or not we are currently dragging.\n            dragging: false,\n            // Whether or not we have been dragged before.\n            dragged: false,\n            // Current transform x and y.\n            x: (_c = (_b = (_a = props.position) === null || _a === void 0 ? void 0 : _a.x) !== null && _b !== void 0 ? _b : props.defaultPosition.x) !== null && _c !== void 0 ? _c : 0,\n            y: (_f = (_e = (_d = props.position) === null || _d === void 0 ? void 0 : _d.y) !== null && _e !== void 0 ? _e : props.defaultPosition.y) !== null && _f !== void 0 ? _f : 0,\n            // Used for compensating for out-of-bounds drags\n            slackX: 0,\n            slackY: 0,\n            // Can only determine if SVG after mounting\n            isElementSVG: false\n        });\n        var internalState = {\n            isUnmounted: false\n        };\n        var isElementNode = function (v) {\n            return !!v && typeof v === 'object' && 'nodeType' in v && v.nodeType === 1;\n        };\n        var isRefLike = function (v) {\n            return !!v && typeof v === 'object' && 'value' in v;\n        };\n        var findDOMNode = function () {\n            var nodeRef = props.nodeRef;\n            if (isRefLike(nodeRef)) {\n                var v = nodeRef.value;\n                if (isElementNode(v))\n                    return v;\n            }\n            else if (isElementNode(nodeRef)) {\n                return nodeRef;\n            }\n            return localNodeRef.value;\n        };\n        var boundsContext = {\n            props: props,\n            findDOMNode: findDOMNode,\n            __boundsCache: {\n                key: '',\n                node: null,\n                boundEl: null,\n                boundClientWidth: 0,\n                boundClientHeight: 0,\n                nodeClientWidth: 0,\n                nodeClientHeight: 0,\n                bounds: null\n            }\n        };\n        var rafId = null;\n        var internalX = state.x;\n        var internalY = state.y;\n        var internalSlackX = state.slackX;\n        var internalSlackY = state.slackY;\n        var directionLockAxis = null;\n        var directionLockFixedX = NaN;\n        var directionLockFixedY = NaN;\n        var directionLockTotalX = 0;\n        var directionLockTotalY = 0;\n        var resetDirectionLock = function () {\n            directionLockAxis = null;\n            directionLockFixedX = NaN;\n            directionLockFixedY = NaN;\n            directionLockTotalX = 0;\n            directionLockTotalY = 0;\n        };\n        var getDirectionLockThreshold = function () {\n            var threshold = typeof props.directionLockThreshold === 'number' ? props.directionLockThreshold : 0;\n            if (threshold <= 0)\n                return 0;\n            var scale = typeof props.scale === 'number' ? props.scale : 1;\n            if (!scale)\n                return threshold;\n            return threshold / scale;\n        };\n        var flushToReactiveState = function () {\n            rafId = null;\n            if (internalX === state.x && internalY === state.y && internalSlackX === state.slackX && internalSlackY === state.slackY)\n                return;\n            state.x = internalX;\n            state.y = internalY;\n            state.slackX = internalSlackX;\n            state.slackY = internalSlackY;\n        };\n        var scheduleFlush = function () {\n            if (rafId != null)\n                return;\n            rafId = window.requestAnimationFrame(flushToReactiveState);\n        };\n        (0, vue_1.onMounted)(function () {\n            if (typeof window.SVGElement !== 'undefined' && findDOMNode() instanceof window.SVGElement) {\n                state.isElementSVG = true;\n            }\n        });\n        (0, vue_1.onUnmounted)(function () {\n            state.dragging = false;\n            internalState.isUnmounted = true;\n            if (rafId != null) {\n                window.cancelAnimationFrame(rafId);\n                rafId = null;\n            }\n        });\n        var onDragStart = function (e, coreData) {\n            var _a;\n            (0, log_1.default)('Draggable: onDragStart: %j', coreData);\n            // Short-circuit if user's callback killed it.\n            var isControlled = Boolean(props.position);\n            if (isControlled) {\n                internalX = props.position.x;\n                internalY = props.position.y;\n            }\n            else {\n                internalX = state.x;\n                internalY = state.y;\n            }\n            internalSlackX = state.slackX;\n            internalSlackY = state.slackY;\n            boundsContext.__boundsCache.key = '';\n            boundsContext.__boundsCache.node = null;\n            boundsContext.__boundsCache.boundEl = null;\n            boundsContext.__boundsCache.boundClientWidth = 0;\n            boundsContext.__boundsCache.boundClientHeight = 0;\n            boundsContext.__boundsCache.nodeClientWidth = 0;\n            boundsContext.__boundsCache.nodeClientHeight = 0;\n            boundsContext.__boundsCache.bounds = null;\n            resetDirectionLock();\n            flushToReactiveState();\n            if (props.startFn !== noop_1.default) {\n                var scale = typeof props.scale === 'number' ? props.scale : 1;\n                var uiStart = {\n                    node: coreData.node,\n                    x: internalX + coreData.deltaX / scale,\n                    y: internalY + coreData.deltaY / scale,\n                    deltaX: coreData.deltaX / scale,\n                    deltaY: coreData.deltaY / scale,\n                    lastX: internalX,\n                    lastY: internalY\n                };\n                var shouldStart = (_a = props.startFn) === null || _a === void 0 ? void 0 : _a.call(props, e, uiStart);\n                // Kills start event on core as well, so move handlers are never bound.\n                if (shouldStart === false)\n                    return false;\n            }\n            state.dragging = true;\n            state.dragged = true;\n        };\n        var onDrag = function (e, coreData) {\n            var _a;\n            if (!state.dragging)\n                return false;\n            (0, log_1.default)('Draggable: dragFn: %j', coreData);\n            var scale = typeof props.scale === 'number' ? props.scale : 1;\n            var rawDeltaX = coreData.deltaX / scale;\n            var rawDeltaY = coreData.deltaY / scale;\n            var newX = internalX + rawDeltaX;\n            var newY = internalY + rawDeltaY;\n            var newSlackX = 0;\n            var newSlackY = 0;\n            var uiDeltaX = rawDeltaX;\n            var uiDeltaY = rawDeltaY;\n            var allowAxisX = (0, positionFns_1.canDragX)({\n                props: props\n            });\n            var allowAxisY = (0, positionFns_1.canDragY)({\n                props: props\n            });\n            var effectiveAxisX = allowAxisX;\n            var effectiveAxisY = allowAxisY;\n            if (props.directionLock && allowAxisX && allowAxisY) {\n                if (directionLockAxis == null) {\n                    directionLockTotalX += rawDeltaX;\n                    directionLockTotalY += rawDeltaY;\n                    var threshold = getDirectionLockThreshold();\n                    if (!threshold || Math.hypot(directionLockTotalX, directionLockTotalY) >= threshold) {\n                        directionLockAxis = Math.abs(directionLockTotalX) >= Math.abs(directionLockTotalY) ? 'x' : 'y';\n                        directionLockFixedX = internalX;\n                        directionLockFixedY = internalY;\n                    }\n                }\n                if (directionLockAxis === 'x' && Number.isFinite(directionLockFixedY)) {\n                    newY = directionLockFixedY;\n                    uiDeltaY = newY - internalY;\n                }\n                else if (directionLockAxis === 'y' && Number.isFinite(directionLockFixedX)) {\n                    newX = directionLockFixedX;\n                    uiDeltaX = newX - internalX;\n                }\n            }\n            if (directionLockAxis === 'x')\n                effectiveAxisY = false;\n            if (directionLockAxis === 'y')\n                effectiveAxisX = false;\n            if (!effectiveAxisX) {\n                newX = internalX;\n                uiDeltaX = 0;\n            }\n            if (!effectiveAxisY) {\n                newY = internalY;\n                uiDeltaY = 0;\n            }\n            // Keep within bounds.\n            if (props.bounds) {\n                // Save original x and y.\n                var x = newX;\n                var y = newY;\n                // Add slack to the values used to calculate bound position. This will ensure that if\n                // completely removed.\n                var slackX = effectiveAxisX ? internalSlackX : 0;\n                var slackY = effectiveAxisY ? internalSlackY : 0;\n                newX += slackX;\n                newY += slackY;\n                // Get bound position. This will ceil/floor the x and y within the boundaries.\n                var _b = (0, positionFns_1.getBoundPosition)(boundsContext, newX, newY), boundX = _b[0], boundY = _b[1];\n                newX = boundX;\n                newY = boundY;\n                // Recalculate slack by noting how much was shaved by the boundPosition handler.\n                newSlackX = slackX + (x - newX);\n                newSlackY = slackY + (y - newY);\n                // Update the event we fire to reflect what really happened after bounds took effect.\n                uiDeltaX = newX - internalX;\n                uiDeltaY = newY - internalY;\n            }\n            if (!effectiveAxisX)\n                newSlackX = 0;\n            if (!effectiveAxisY)\n                newSlackY = 0;\n            // Short-circuit if user's callback killed it.\n            if (props.dragFn !== noop_1.default) {\n                var uiData = {\n                    node: coreData.node,\n                    x: newX,\n                    y: newY,\n                    deltaX: uiDeltaX,\n                    deltaY: uiDeltaY,\n                    lastX: internalX,\n                    lastY: internalY\n                };\n                var shouldUpdate = (_a = props.dragFn) === null || _a === void 0 ? void 0 : _a.call(props, e, uiData);\n                if (shouldUpdate === false)\n                    return false;\n            }\n            internalX = newX;\n            internalY = newY;\n            internalSlackX = newSlackX;\n            internalSlackY = newSlackY;\n            // PERF: If we are not controlled, we can just move the element directly.\n            // This allows us to run at 60fps without the overhead of Vue's reactivity system.\n            if (!props.position) {\n                var transformOpts = {\n                    x: (0, positionFns_1.canDragX)({\n                        props: props\n                    }) ? internalX : props.defaultPosition.x,\n                    y: (0, positionFns_1.canDragY)({\n                        props: props\n                    }) ? internalY : props.defaultPosition.y\n                };\n                var positionOffset = props.positionOffset;\n                var unit = 'px';\n                var isSVG = state.isElementSVG;\n                var translation = (0, domFns_1.getTranslation)(transformOpts, positionOffset, unit);\n                var domNode = findDOMNode();\n                if (domNode) {\n                    if (isSVG) {\n                        // SVG logic usually requires attribute setting, but for performance we might try CSS if possible, \n                        // or just fallback to reactivity. \n                        // However, the original code used `createSVGTransform` which returns a string for `transform` attribute?\n                        // Wait, existing code uses `transform` prop on VNode for SVG.\n                        // Direct DOM manipulation on SVG attributes is also possible.\n                        // For now, let's keep SVG on the react path or try direct setAttribute if simple.\n                        // But let's stick to HTMLElement for the 'style' path for now to be safe.\n                        if (!isSVG)\n                            (0, domFns_1.setTransform)(domNode, translation);\n                    }\n                    else {\n                        (0, domFns_1.setTransform)(domNode, translation);\n                    }\n                }\n            }\n            // If controlled, or if using RafDrag, or if SVG (for safety), we flush.\n            // Actually, if controlled, we MUST flush to let parent update.\n            // If uncontrolled and HTML, we skip flush until stop!\n            if (props.position || props.useRafDrag || state.isElementSVG) {\n                if (props.useRafDrag) {\n                    if (rafId != null) {\n                        window.cancelAnimationFrame(rafId);\n                        rafId = null;\n                    }\n                    flushToReactiveState();\n                }\n                else {\n                    scheduleFlush();\n                }\n            }\n        };\n        var onDragStop = function (e, coreData) {\n            var _a;\n            if (!state.dragging)\n                return false;\n            // Short-circuit if user's callback killed it.\n            if (props.stopFn !== noop_1.default) {\n                var scale = typeof props.scale === 'number' ? props.scale : 1;\n                var allowAxisX = (0, positionFns_1.canDragX)({\n                    props: props\n                });\n                var allowAxisY = (0, positionFns_1.canDragY)({\n                    props: props\n                });\n                var effectiveAxisX = allowAxisX && directionLockAxis !== 'y';\n                var effectiveAxisY = allowAxisY && directionLockAxis !== 'x';\n                var deltaX = effectiveAxisX ? coreData.deltaX / scale : 0;\n                var deltaY = effectiveAxisY ? coreData.deltaY / scale : 0;\n                var uiStop = {\n                    node: coreData.node,\n                    x: internalX + deltaX,\n                    y: internalY + deltaY,\n                    deltaX: deltaX,\n                    deltaY: deltaY,\n                    lastX: internalX,\n                    lastY: internalY\n                };\n                var shouldContinue = (_a = props.stopFn) === null || _a === void 0 ? void 0 : _a.call(props, e, uiStop);\n                if (shouldContinue === false)\n                    return false;\n            }\n            (0, log_1.default)('Draggable: onDragStop: %j', coreData);\n            resetDirectionLock();\n            var newState = {\n                dragging: false,\n                slackX: 0,\n                slackY: 0\n            };\n            // If this is a controlled component, the result of this operation will be to\n            // revert back to the old position. We expect a handler on `onDragStop`, at the least.\n            var controlled = Boolean(props.position);\n            if (controlled) {\n                var _b = props.position, x = _b.x, y = _b.y;\n                newState.x = x;\n                newState.y = y;\n            }\n            state.dragging = newState.dragging;\n            internalSlackX = newState.slackX;\n            internalSlackY = newState.slackY;\n            if (typeof newState.x === 'number')\n                internalX = newState.x;\n            if (typeof newState.y === 'number')\n                internalY = newState.y;\n            if (rafId != null) {\n                window.cancelAnimationFrame(rafId);\n                rafId = null;\n            }\n            // Always flush at the end to ensure state sync\n            flushToReactiveState();\n        };\n        var getFirstUsableChild = function () {\n            var raw = slots.default ? slots.default() : [];\n            var stack = Array.isArray(raw) ? __spreadArray([], raw, true) : [raw];\n            while (stack.length) {\n                var item = stack.shift();\n                if (Array.isArray(item)) {\n                    for (var i = item.length - 1; i >= 0; i -= 1)\n                        stack.unshift(item[i]);\n                    continue;\n                }\n                if (!(0, vue_1.isVNode)(item))\n                    continue;\n                // Skip comment nodes and whitespace-only text nodes.\n                if (item.type === vue_1.Comment)\n                    continue;\n                if (item.type === vue_1.Text) {\n                    var txt = typeof item.children === 'string' ? item.children : '';\n                    if (!txt || !txt.trim())\n                        continue;\n                    // Draggable requires an element/component vnode, not bare text.\n                    continue;\n                }\n                // Unwrap fragments to find the first real node.\n                if (item.type === vue_1.Fragment) {\n                    var fragChildren = item.children;\n                    if (Array.isArray(fragChildren)) {\n                        for (var i = fragChildren.length - 1; i >= 0; i -= 1)\n                            stack.unshift(fragChildren[i]);\n                    }\n                    continue;\n                }\n                return item;\n            }\n            return null;\n        };\n        return function () {\n            var _a;\n            var _b, _c;\n            /* eslint-disable @typescript-eslint/no-unused-vars */\n            var axis = props.axis, directionLock = props.directionLock, directionLockThreshold = props.directionLockThreshold, bounds = props.bounds, defaultPosition = props.defaultPosition, defaultClassName = props.defaultClassName, defaultClassNameDragging = props.defaultClassNameDragging, defaultClassNameDragged = props.defaultClassNameDragged, position = props.position, positionOffset = props.positionOffset, scale = props.scale, draggableCoreProps = __rest(props, [\"axis\", \"directionLock\", \"directionLockThreshold\", \"bounds\", \"defaultPosition\", \"defaultClassName\", \"defaultClassNameDragging\", \"defaultClassNameDragged\", \"position\", \"positionOffset\", \"scale\"]);\n            /* eslint-enable @typescript-eslint/no-unused-vars */\n            var style = {};\n            var svgTransform = '';\n            var controlled = Boolean(position);\n            var draggable = !controlled || state.dragging;\n            var validPosition = position || defaultPosition;\n            var transformOpts = {\n                // Set left if horizontal drag is enabled\n                x: (_b = ((0, positionFns_1.canDragX)({\n                    props: props\n                }) && draggable ? state.x : validPosition.x)) !== null && _b !== void 0 ? _b : 0,\n                // Set top if vertical drag is enabled\n                y: (_c = ((0, positionFns_1.canDragY)({\n                    props: props\n                }) && draggable ? state.y : validPosition.y)) !== null && _c !== void 0 ? _c : 0\n            };\n            // If this element was SVG, we use the `transform` attribute.\n            if (state.isElementSVG) {\n                svgTransform = (0, domFns_1.createSVGTransform)(transformOpts, positionOffset);\n            }\n            else {\n                // Add a CSS transform to move the element around. This allows us to move the element around\n                // without worrying about whether or not it is relatively or absolutely positioned.\n                // If the item you are dragging already has a transform set, wrap it in a <span> so <Draggable>\n                // has a clean slate.\n                style = (0, domFns_1.createCSSTransform)(transformOpts, positionOffset);\n            }\n            // Performance adjustment:\n            if (state.dragging && !state.isElementSVG) {\n                // eslint-disable-next-line @typescript-eslint/no-explicit-any\n                style.willChange = 'transform';\n            }\n            // Mark with class while dragging\n            var className = (0, clsx_1.default)(defaultClassName, (_a = {},\n                _a[defaultClassNameDragging] = state.dragging,\n                _a[defaultClassNameDragged] = state.dragged,\n                _a));\n            var child = getFirstUsableChild();\n            if (!child)\n                return null;\n            var clonedChildren = (0, vue_1.cloneVNode)(child, {\n                class: className,\n                style: style,\n                transform: svgTransform\n            });\n            var coreProps = __assign(__assign({}, draggableCoreProps), { startFn: onDragStart, dragFn: onDrag, stopFn: onDragStop });\n            return (0, vue_1.createVNode)(DraggableCore_1.default, (0, vue_1.mergeProps)(coreProps, {\n                \"nodeRef\": props.nodeRef || localNodeRef\n            }), {\n                default: function () { return clonedChildren; }\n            });\n        };\n    }\n});\nexports[\"default\"] = Draggable;\n\n\n//# sourceURL=.././lib/Draggable.tsx\n}");
+
+/***/ }
+
+},
+/******/ function(__webpack_require__) { // webpackRuntimeModules
+/******/ /* webpack/runtime/getFullHash */
+/******/ (() => {
+/******/ 	__webpack_require__.h = () => ("179e4c366756eb300fbf")
+/******/ })();
+/******/ 
+/******/ }
+);

package/build/web/vue-draggable.min.870ce0c3b8d1e5af7abb.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/).
+ */
+globalThis["webpackHotUpdateVueDraggable"]("vue-draggable.min",{
+
+/***/ "./lib/Draggable.tsx"
+/*!***************************!*\
+  !*** ./lib/Draggable.tsx ***!
+  \***************************/
+(__unused_webpack_module, exports, __webpack_require__) {
+
+eval("{\nvar __assign = (this && this.__assign) || function () {\n    __assign = Object.assign || function(t) {\n        for (var s, i = 1, n = arguments.length; i < n; i++) {\n            s = arguments[i];\n            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))\n                t[p] = s[p];\n        }\n        return t;\n    };\n    return __assign.apply(this, arguments);\n};\nvar __rest = (this && this.__rest) || function (s, e) {\n    var t = {};\n    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)\n        t[p] = s[p];\n    if (s != null && typeof Object.getOwnPropertySymbols === \"function\")\n        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {\n            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))\n                t[p[i]] = s[p[i]];\n        }\n    return t;\n};\nvar __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {\n    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {\n        if (ar || !(i in from)) {\n            if (!ar) ar = Array.prototype.slice.call(from, 0, i);\n            ar[i] = from[i];\n        }\n    }\n    return to.concat(ar || Array.prototype.slice.call(from));\n};\nvar __importDefault = (this && this.__importDefault) || function (mod) {\n    return (mod && mod.__esModule) ? mod : { \"default\": mod };\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports.DraggableCore = exports[\"default\"] = exports.draggableProps = void 0;\n/**\n * Draggable is a Vue component that allows elements to be dragged and dropped.\n * It extends DraggableCore by adding Vue-specific props for more customized behavior.\n *\n * Props:\n * - axis: Specifies the axis along which the element can be dragged. Options are 'both', 'x', 'y', or 'none'. Default is 'both'.\n * - bounds: Constrains the draggable area. Can be an object specifying left, right, top, and bottom bounds, a string selector, or false for no bounds. Default is false.\n * - defaultClassName: The default class name applied to the element. Default is 'vue-draggable'.\n * - defaultClassNameDragging: The class name applied to the element while dragging. Default is 'vue-draggable-dragging'.\n * - defaultClassNameDragged: The class name applied to the element after it has been dragged. Default is 'vue-draggable-dragged'.\n * - defaultPosition: The default position of the element. An object with x and y properties. Default is {x: 0, y: 0}.\n * - positionOffset: Offset of the position. An object with x and y properties, each can be a number or a string. Default is {x: 0, y: 0}.\n * - position: Controls the position of the draggable element. An object with x and y properties.\n * - cancel: Specifies a selector to be used to prevent drag initialization.\n * - offsetParent: Specifies the offset parent of the draggable element. Must be a DOM Node.\n * - grid: Specifies the grid to snap the draggable element to during drag. An array of two numbers.\n * - handle: Specifies a selector to be used as the handle that initiates drag.\n * - nodeRef: A reference to the draggable node.\n * - allowAnyClick: Allows dragging to be initiated with any mouse button. Default is false.\n * - disabled: If true, the element cannot be dragged. Default is false.\n * - enableUserSelectHack: Enables a hack that prevents text selection during drag. Default is true.\n * - startFn, dragFn, stopFn: Functions that are called on drag start, during drag, and on drag stop, respectively. Each defaults to a no-op function.\n * - scale: The scale of the draggable element. Default is 1.\n *\n * Usage:\n * Wrap a single child component or element with <Draggable> to make it draggable. Configure behavior with props.\n *\n * Example:\n * <Draggable axis=\"x\" :defaultPosition=\"{x: 100, y: 0}\">\n *   <div>Drag me!</div>\n * </Draggable>\n *\n * Note:\n * This component requires Vue 3 and is designed to work within a Vue 3 application.\n */\nvar vue_1 = __webpack_require__(/*! vue */ \"vue\");\nvar clsx_1 = __importDefault(__webpack_require__(/*! clsx */ \"./node_modules/clsx/dist/clsx.m.js\"));\nvar domFns_1 = __webpack_require__(/*! ./utils/domFns */ \"./lib/utils/domFns.ts\");\nvar positionFns_1 = __webpack_require__(/*! ./utils/positionFns */ \"./lib/utils/positionFns.ts\");\nvar shims_1 = __webpack_require__(/*! ./utils/shims */ \"./lib/utils/shims.ts\");\nvar DraggableCore_1 = __importDefault(__webpack_require__(/*! ./DraggableCore */ \"./lib/DraggableCore.tsx\"));\nexports.DraggableCore = DraggableCore_1.default;\nvar log_1 = __importDefault(__webpack_require__(/*! ./utils/log */ \"./lib/utils/log.ts\"));\nvar noop_1 = __importDefault(__webpack_require__(/*! ./utils/noop */ \"./lib/utils/noop.ts\"));\nvar DraggableCore_2 = __webpack_require__(/*! ./DraggableCore */ \"./lib/DraggableCore.tsx\");\nexports.draggableProps = __assign(__assign({}, DraggableCore_2.draggableCoreProps), { \n    /** 限制拖拽方向 */\n    axis: {\n        type: String,\n        default: 'both'\n    }, \n    /** 锁定到首次移动的方向 */\n    directionLock: {\n        type: Boolean,\n        default: false\n    }, \n    /** 方向锁定的阈值像素 */\n    directionLockThreshold: {\n        type: Number,\n        default: 4\n    }, \n    /** 拖拽边界。可以是边界对象，CSS 选择器如 'parent' 或 '.container'，或 false 不限制 */\n    bounds: {\n        type: [Object, String, Boolean],\n        default: false\n    }, \n    /** 默认类名 */\n    defaultClassName: {\n        type: String,\n        default: 'vue-draggable'\n    }, \n    /** 拖拽中的类名 */\n    defaultClassNameDragging: {\n        type: String,\n        default: 'vue-draggable-dragging'\n    }, \n    /** 拖拽后的类名 */\n    defaultClassNameDragged: {\n        type: String,\n        default: 'vue-draggable-dragged'\n    }, \n    /** 初始位置（仅初始化时生效） */\n    defaultPosition: {\n        type: Object,\n        default: function () { return ({\n            x: 0,\n            y: 0\n        }); }\n    }, \n    /** 位置偏移量 */\n    positionOffset: {\n        type: Object\n    }, \n    /** 受控模式的位置，设置后必须通过 dragFn 更新 */\n    position: {\n        type: Object,\n        default: undefined\n    } });\nvar componentName = 'Draggable';\nvar Draggable = (0, vue_1.defineComponent)({\n    compatConfig: {\n        MODE: 3\n    },\n    name: componentName,\n    inheritAttrs: false,\n    props: __assign(__assign({}, exports.draggableProps), { style: (0, shims_1.dontSetMe)('style', componentName), class: (0, shims_1.dontSetMe)('class', componentName), transform: (0, shims_1.dontSetMe)('transform', componentName) }),\n    setup: function (props, _ref) {\n        var _a, _b, _c, _d, _e, _f;\n        var slots = _ref.slots;\n        var localNodeRef = (0, vue_1.ref)(null);\n        var state = (0, vue_1.reactive)({\n            // Whether or not we are currently dragging.\n            dragging: false,\n            // Whether or not we have been dragged before.\n            dragged: false,\n            // Current transform x and y.\n            x: (_c = (_b = (_a = props.position) === null || _a === void 0 ? void 0 : _a.x) !== null && _b !== void 0 ? _b : props.defaultPosition.x) !== null && _c !== void 0 ? _c : 0,\n            y: (_f = (_e = (_d = props.position) === null || _d === void 0 ? void 0 : _d.y) !== null && _e !== void 0 ? _e : props.defaultPosition.y) !== null && _f !== void 0 ? _f : 0,\n            // Used for compensating for out-of-bounds drags\n            slackX: 0,\n            slackY: 0,\n            // Can only determine if SVG after mounting\n            isElementSVG: false\n        });\n        var internalState = {\n            isUnmounted: false\n        };\n        var isElementNode = function (v) {\n            return !!v && typeof v === 'object' && 'nodeType' in v && v.nodeType === 1;\n        };\n        var isRefLike = function (v) {\n            return !!v && typeof v === 'object' && 'value' in v;\n        };\n        var findDOMNode = function () {\n            var nodeRef = props.nodeRef;\n            if (isRefLike(nodeRef)) {\n                var v = nodeRef.value;\n                if (isElementNode(v))\n                    return v;\n            }\n            else if (isElementNode(nodeRef)) {\n                return nodeRef;\n            }\n            return localNodeRef.value;\n        };\n        var boundsContext = {\n            props: props,\n            findDOMNode: findDOMNode,\n            __boundsCache: {\n                key: '',\n                node: null,\n                boundEl: null,\n                boundClientWidth: 0,\n                boundClientHeight: 0,\n                nodeClientWidth: 0,\n                nodeClientHeight: 0,\n                bounds: null\n            }\n        };\n        var rafId = null;\n        var internalX = state.x;\n        var internalY = state.y;\n        var internalSlackX = state.slackX;\n        var internalSlackY = state.slackY;\n        var directionLockAxis = null;\n        var directionLockFixedX = NaN;\n        var directionLockFixedY = NaN;\n        var directionLockTotalX = 0;\n        var directionLockTotalY = 0;\n        var resetDirectionLock = function () {\n            directionLockAxis = null;\n            directionLockFixedX = NaN;\n            directionLockFixedY = NaN;\n            directionLockTotalX = 0;\n            directionLockTotalY = 0;\n        };\n        var getDirectionLockThreshold = function () {\n            var threshold = typeof props.directionLockThreshold === 'number' ? props.directionLockThreshold : 0;\n            if (threshold <= 0)\n                return 0;\n            var scale = typeof props.scale === 'number' ? props.scale : 1;\n            if (!scale)\n                return threshold;\n            return threshold / scale;\n        };\n        var flushToReactiveState = function () {\n            rafId = null;\n            if (internalX === state.x && internalY === state.y && internalSlackX === state.slackX && internalSlackY === state.slackY)\n                return;\n            state.x = internalX;\n            state.y = internalY;\n            state.slackX = internalSlackX;\n            state.slackY = internalSlackY;\n        };\n        var scheduleFlush = function () {\n            if (rafId != null)\n                return;\n            rafId = window.requestAnimationFrame(flushToReactiveState);\n        };\n        (0, vue_1.onMounted)(function () {\n            if (typeof window.SVGElement !== 'undefined' && findDOMNode() instanceof window.SVGElement) {\n                state.isElementSVG = true;\n            }\n        });\n        (0, vue_1.onUnmounted)(function () {\n            state.dragging = false;\n            internalState.isUnmounted = true;\n            if (rafId != null) {\n                window.cancelAnimationFrame(rafId);\n                rafId = null;\n            }\n        });\n        var onDragStart = function (e, coreData) {\n            var _a;\n            (0, log_1.default)('Draggable: onDragStart: %j', coreData);\n            // Short-circuit if user's callback killed it.\n            var isControlled = Boolean(props.position);\n            if (isControlled) {\n                internalX = props.position.x;\n                internalY = props.position.y;\n            }\n            else {\n                internalX = state.x;\n                internalY = state.y;\n            }\n            internalSlackX = state.slackX;\n            internalSlackY = state.slackY;\n            boundsContext.__boundsCache.key = '';\n            boundsContext.__boundsCache.node = null;\n            boundsContext.__boundsCache.boundEl = null;\n            boundsContext.__boundsCache.boundClientWidth = 0;\n            boundsContext.__boundsCache.boundClientHeight = 0;\n            boundsContext.__boundsCache.nodeClientWidth = 0;\n            boundsContext.__boundsCache.nodeClientHeight = 0;\n            boundsContext.__boundsCache.bounds = null;\n            resetDirectionLock();\n            flushToReactiveState();\n            if (props.startFn !== noop_1.default) {\n                var scale = typeof props.scale === 'number' ? props.scale : 1;\n                var uiStart = {\n                    node: coreData.node,\n                    x: internalX + coreData.deltaX / scale,\n                    y: internalY + coreData.deltaY / scale,\n                    deltaX: coreData.deltaX / scale,\n                    deltaY: coreData.deltaY / scale,\n                    lastX: internalX,\n                    lastY: internalY\n                };\n                var shouldStart = (_a = props.startFn) === null || _a === void 0 ? void 0 : _a.call(props, e, uiStart);\n                // Kills start event on core as well, so move handlers are never bound.\n                if (shouldStart === false)\n                    return false;\n            }\n            state.dragging = true;\n            state.dragged = true;\n        };\n        var onDrag = function (e, coreData) {\n            var _a;\n            if (!state.dragging)\n                return false;\n            (0, log_1.default)('Draggable: dragFn: %j', coreData);\n            var scale = typeof props.scale === 'number' ? props.scale : 1;\n            var rawDeltaX = coreData.deltaX / scale;\n            var rawDeltaY = coreData.deltaY / scale;\n            var newX = internalX + rawDeltaX;\n            var newY = internalY + rawDeltaY;\n            var newSlackX = 0;\n            var newSlackY = 0;\n            var uiDeltaX = rawDeltaX;\n            var uiDeltaY = rawDeltaY;\n            var allowAxisX = (0, positionFns_1.canDragX)({\n                props: props\n            });\n            var allowAxisY = (0, positionFns_1.canDragY)({\n                props: props\n            });\n            var effectiveAxisX = allowAxisX;\n            var effectiveAxisY = allowAxisY;\n            if (props.directionLock && allowAxisX && allowAxisY) {\n                if (directionLockAxis == null) {\n                    directionLockTotalX += rawDeltaX;\n                    directionLockTotalY += rawDeltaY;\n                    var threshold = getDirectionLockThreshold();\n                    if (!threshold || Math.hypot(directionLockTotalX, directionLockTotalY) >= threshold) {\n                        directionLockAxis = Math.abs(directionLockTotalX) >= Math.abs(directionLockTotalY) ? 'x' : 'y';\n                        directionLockFixedX = internalX;\n                        directionLockFixedY = internalY;\n                    }\n                }\n                if (directionLockAxis === 'x' && Number.isFinite(directionLockFixedY)) {\n                    newY = directionLockFixedY;\n                    uiDeltaY = newY - internalY;\n                }\n                else if (directionLockAxis === 'y' && Number.isFinite(directionLockFixedX)) {\n                    newX = directionLockFixedX;\n                    uiDeltaX = newX - internalX;\n                }\n            }\n            if (directionLockAxis === 'x')\n                effectiveAxisY = false;\n            if (directionLockAxis === 'y')\n                effectiveAxisX = false;\n            if (!effectiveAxisX) {\n                newX = internalX;\n                uiDeltaX = 0;\n            }\n            if (!effectiveAxisY) {\n                newY = internalY;\n                uiDeltaY = 0;\n            }\n            // Keep within bounds.\n            if (props.bounds) {\n                // Save original x and y.\n                var x = newX;\n                var y = newY;\n                // Add slack to the values used to calculate bound position. This will ensure that if\n                // completely removed.\n                var slackX = effectiveAxisX ? internalSlackX : 0;\n                var slackY = effectiveAxisY ? internalSlackY : 0;\n                newX += slackX;\n                newY += slackY;\n                // Get bound position. This will ceil/floor the x and y within the boundaries.\n                var _b = (0, positionFns_1.getBoundPosition)(boundsContext, newX, newY), boundX = _b[0], boundY = _b[1];\n                newX = boundX;\n                newY = boundY;\n                // Recalculate slack by noting how much was shaved by the boundPosition handler.\n                newSlackX = slackX + (x - newX);\n                newSlackY = slackY + (y - newY);\n                // Update the event we fire to reflect what really happened after bounds took effect.\n                uiDeltaX = newX - internalX;\n                uiDeltaY = newY - internalY;\n            }\n            if (!effectiveAxisX)\n                newSlackX = 0;\n            if (!effectiveAxisY)\n                newSlackY = 0;\n            // Short-circuit if user's callback killed it.\n            if (props.dragFn !== noop_1.default) {\n                var uiData = {\n                    node: coreData.node,\n                    x: newX,\n                    y: newY,\n                    deltaX: uiDeltaX,\n                    deltaY: uiDeltaY,\n                    lastX: internalX,\n                    lastY: internalY\n                };\n                var shouldUpdate = (_a = props.dragFn) === null || _a === void 0 ? void 0 : _a.call(props, e, uiData);\n                if (shouldUpdate === false)\n                    return false;\n            }\n            internalX = newX;\n            internalY = newY;\n            internalSlackX = newSlackX;\n            internalSlackY = newSlackY;\n            // PERF: If we are not controlled, we can just move the element directly.\n            // This allows us to run at 60fps without the overhead of Vue's reactivity system.\n            if (!props.position) {\n                var transformOpts = {\n                    x: (0, positionFns_1.canDragX)({\n                        props: props\n                    }) ? internalX : props.defaultPosition.x,\n                    y: (0, positionFns_1.canDragY)({\n                        props: props\n                    }) ? internalY : props.defaultPosition.y\n                };\n                var positionOffset = props.positionOffset;\n                var unit = 'px';\n                var isSVG = state.isElementSVG;\n                var translation = (0, domFns_1.getTranslation)(transformOpts, positionOffset, unit);\n                var domNode = findDOMNode();\n                if (domNode) {\n                    if (isSVG) {\n                        // SVG logic usually requires attribute setting, but for performance we might try CSS if possible, \n                        // or just fallback to reactivity. \n                        // However, the original code used `createSVGTransform` which returns a string for `transform` attribute?\n                        // Wait, existing code uses `transform` prop on VNode for SVG.\n                        // Direct DOM manipulation on SVG attributes is also possible.\n                        // For now, let's keep SVG on the react path or try direct setAttribute if simple.\n                        // But let's stick to HTMLElement for the 'style' path for now to be safe.\n                        if (!isSVG)\n                            (0, domFns_1.setTransform)(domNode, translation);\n                    }\n                    else {\n                        (0, domFns_1.setTransform)(domNode, translation);\n                    }\n                }\n            }\n            // If controlled, or if using RafDrag, or if SVG (for safety), we flush.\n            // Actually, if controlled, we MUST flush to let parent update.\n            // If uncontrolled and HTML, we skip flush until stop!\n            if (props.position || props.useRafDrag || state.isElementSVG) {\n                if (props.useRafDrag) {\n                    if (rafId != null) {\n                        window.cancelAnimationFrame(rafId);\n                        rafId = null;\n                    }\n                    flushToReactiveState();\n                }\n                else {\n                    scheduleFlush();\n                }\n            }\n        };\n        var onDragStop = function (e, coreData) {\n            var _a;\n            if (!state.dragging)\n                return false;\n            // Short-circuit if user's callback killed it.\n            if (props.stopFn !== noop_1.default) {\n                var scale = typeof props.scale === 'number' ? props.scale : 1;\n                var allowAxisX = (0, positionFns_1.canDragX)({\n                    props: props\n                });\n                var allowAxisY = (0, positionFns_1.canDragY)({\n                    props: props\n                });\n                var effectiveAxisX = allowAxisX && directionLockAxis !== 'y';\n                var effectiveAxisY = allowAxisY && directionLockAxis !== 'x';\n                var deltaX = effectiveAxisX ? coreData.deltaX / scale : 0;\n                var deltaY = effectiveAxisY ? coreData.deltaY / scale : 0;\n                var uiStop = {\n                    node: coreData.node,\n                    x: internalX + deltaX,\n                    y: internalY + deltaY,\n                    deltaX: deltaX,\n                    deltaY: deltaY,\n                    lastX: internalX,\n                    lastY: internalY\n                };\n                var shouldContinue = (_a = props.stopFn) === null || _a === void 0 ? void 0 : _a.call(props, e, uiStop);\n                if (shouldContinue === false)\n                    return false;\n            }\n            (0, log_1.default)('Draggable: onDragStop: %j', coreData);\n            resetDirectionLock();\n            var newState = {\n                dragging: false,\n                slackX: 0,\n                slackY: 0\n            };\n            // If this is a controlled component, the result of this operation will be to\n            // revert back to the old position. We expect a handler on `onDragStop`, at the least.\n            var controlled = Boolean(props.position);\n            if (controlled) {\n                var _b = props.position, x = _b.x, y = _b.y;\n                newState.x = x;\n                newState.y = y;\n            }\n            state.dragging = newState.dragging;\n            internalSlackX = newState.slackX;\n            internalSlackY = newState.slackY;\n            if (typeof newState.x === 'number')\n                internalX = newState.x;\n            if (typeof newState.y === 'number')\n                internalY = newState.y;\n            if (rafId != null) {\n                window.cancelAnimationFrame(rafId);\n                rafId = null;\n            }\n            // Always flush at the end to ensure state sync\n            flushToReactiveState();\n        };\n        var getFirstUsableChild = function () {\n            var raw = slots.default ? slots.default() : [];\n            var stack = Array.isArray(raw) ? __spreadArray([], raw, true) : [raw];\n            while (stack.length) {\n                var item = stack.shift();\n                if (Array.isArray(item)) {\n                    for (var i = item.length - 1; i >= 0; i -= 1)\n                        stack.unshift(item[i]);\n                    continue;\n                }\n                if (!(0, vue_1.isVNode)(item))\n                    continue;\n                // Skip comment nodes and whitespace-only text nodes.\n                if (item.type === vue_1.Comment)\n                    continue;\n                if (item.type === vue_1.Text) {\n                    var txt = typeof item.children === 'string' ? item.children : '';\n                    if (!txt || !txt.trim())\n                        continue;\n                    // Draggable requires an element/component vnode, not bare text.\n                    continue;\n                }\n                // Unwrap fragments to find the first real node.\n                if (item.type === vue_1.Fragment) {\n                    var fragChildren = item.children;\n                    if (Array.isArray(fragChildren)) {\n                        for (var i = fragChildren.length - 1; i >= 0; i -= 1)\n                            stack.unshift(fragChildren[i]);\n                    }\n                    continue;\n                }\n                return item;\n            }\n            return null;\n        };\n        return function () {\n            var _a;\n            var _b, _c;\n            /* eslint-disable @typescript-eslint/no-unused-vars */\n            var axis = props.axis, directionLock = props.directionLock, directionLockThreshold = props.directionLockThreshold, bounds = props.bounds, defaultPosition = props.defaultPosition, defaultClassName = props.defaultClassName, defaultClassNameDragging = props.defaultClassNameDragging, defaultClassNameDragged = props.defaultClassNameDragged, position = props.position, positionOffset = props.positionOffset, scale = props.scale, draggableCoreProps = __rest(props, [\"axis\", \"directionLock\", \"directionLockThreshold\", \"bounds\", \"defaultPosition\", \"defaultClassName\", \"defaultClassNameDragging\", \"defaultClassNameDragged\", \"position\", \"positionOffset\", \"scale\"]);\n            /* eslint-enable @typescript-eslint/no-unused-vars */\n            var style = {};\n            var svgTransform = '';\n            var controlled = Boolean(position);\n            var draggable = !controlled || state.dragging;\n            var validPosition = position || defaultPosition;\n            var transformOpts = {\n                // Set left if horizontal drag is enabled\n                x: (_b = ((0, positionFns_1.canDragX)({\n                    props: props\n                }) && draggable ? state.x : validPosition.x)) !== null && _b !== void 0 ? _b : 0,\n                // Set top if vertical drag is enabled\n                y: (_c = ((0, positionFns_1.canDragY)({\n                    props: props\n                }) && draggable ? state.y : validPosition.y)) !== null && _c !== void 0 ? _c : 0\n            };\n            // If this element was SVG, we use the `transform` attribute.\n            if (state.isElementSVG) {\n                svgTransform = (0, domFns_1.createSVGTransform)(transformOpts, positionOffset);\n            }\n            else {\n                // Add a CSS transform to move the element around. This allows us to move the element around\n                // without worrying about whether or not it is relatively or absolutely positioned.\n                // If the item you are dragging already has a transform set, wrap it in a <span> so <Draggable>\n                // has a clean slate.\n                style = (0, domFns_1.createCSSTransform)(transformOpts, positionOffset);\n            }\n            // Performance adjustment:\n            if (state.dragging && !state.isElementSVG) {\n                // eslint-disable-next-line @typescript-eslint/no-explicit-any\n                style.willChange = 'transform';\n            }\n            // Mark with class while dragging\n            var className = (0, clsx_1.default)(defaultClassName, (_a = {},\n                _a[defaultClassNameDragging] = state.dragging,\n                _a[defaultClassNameDragged] = state.dragged,\n                _a));\n            var child = getFirstUsableChild();\n            if (!child)\n                return null;\n            var clonedChildren = (0, vue_1.cloneVNode)(child, {\n                class: className,\n                style: style,\n                transform: svgTransform\n            });\n            var coreProps = __assign(__assign({}, draggableCoreProps), { startFn: onDragStart, dragFn: onDrag, stopFn: onDragStop });\n            return (0, vue_1.createVNode)(DraggableCore_1.default, (0, vue_1.mergeProps)(coreProps, {\n                \"nodeRef\": props.nodeRef || localNodeRef\n            }), {\n                default: function () { return clonedChildren; }\n            });\n        };\n    }\n});\nexports[\"default\"] = Draggable;\n\n\n//# sourceURL=.././lib/Draggable.tsx\n}");
+
+/***/ }
+
+},
+/******/ function(__webpack_require__) { // webpackRuntimeModules
+/******/ /* webpack/runtime/getFullHash */
+/******/ (() => {
+/******/ 	__webpack_require__.h = () => ("8c4367bbfb0323ed907d")
+/******/ })();
+/******/ 
+/******/ }
+);