@marsio/vue-draggable 1.0.4 → 1.0.7

package/build/cjs/Draggable.js

@@ -12,7 +12,6 @@ Object.defineProperty(exports, "DraggableCore", {
 exports.draggableProps = exports.default = void 0;
 var _vue = require("vue");
 var _get = _interopRequireDefault(require("lodash/get"));
-var _vueTypes = _interopRequireDefault(require("vue-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _domFns = require("./utils/domFns");
 var _positionFns = require("./utils/positionFns");
@@ -62,31 +61,40 @@ function _isSlot(s) {
 }
 const draggableProps = exports.draggableProps = {
   ..._DraggableCore.draggableCoreProps,
-  axis: _vueTypes.default.oneOf(['both', 'x', 'y', 'none']).def('both'),
-  bounds: _vueTypes.default.oneOfType([_vueTypes.default.shape({
-    left: _vueTypes.default.number,
-    right: _vueTypes.default.number,
-    top: _vueTypes.default.number,
-    bottom: _vueTypes.default.number
-  }), _vueTypes.default.string, _vueTypes.default.oneOf([false])]).def(false),
-  defaultClassName: _vueTypes.default.string.def('vue-draggable'),
-  defaultClassNameDragging: _vueTypes.default.string.def('vue-draggable-dragging'),
-  defaultClassNameDragged: _vueTypes.default.string.def('vue-draggable-dragged'),
-  defaultPosition: _vueTypes.default.shape({
-    x: _vueTypes.default.number,
-    y: _vueTypes.default.number
-  }).def({
-    x: 0,
-    y: 0
-  }),
-  positionOffset: _vueTypes.default.shape({
-    x: _vueTypes.default.oneOfType([_vueTypes.default.number, _vueTypes.default.string]),
-    y: _vueTypes.default.oneOfType([_vueTypes.default.number, _vueTypes.default.string])
-  }),
-  position: _vueTypes.default.shape({
-    x: _vueTypes.default.number,
-    y: _vueTypes.default.number
-  }).def(undefined)
+  axis: {
+    type: String,
+    default: 'both'
+  },
+  bounds: {
+    type: [Object, String, Boolean],
+    default: false
+  },
+  defaultClassName: {
+    type: String,
+    default: 'vue-draggable'
+  },
+  defaultClassNameDragging: {
+    type: String,
+    default: 'vue-draggable-dragging'
+  },
+  defaultClassNameDragged: {
+    type: String,
+    default: 'vue-draggable-dragged'
+  },
+  defaultPosition: {
+    type: Object,
+    default: () => ({
+      x: 0,
+      y: 0
+    })
+  },
+  positionOffset: {
+    type: Object
+  },
+  position: {
+    type: Object,
+    default: undefined
+  }
 };
 const componentName = 'Draggable';
 const Draggable = exports.default = (0, _vue.defineComponent)({
@@ -105,10 +113,11 @@ const Draggable = exports.default = (0, _vue.defineComponent)({
     let {
       slots
     } = _ref;
+    console.log('props', props);
     const rootElement = (0, _vue.ref)(null);
     if (props.position && !(props.dragFn || props.stopFn)) {
       // eslint-disable-next-line no-console
-      console.warn('A `position` was applied to this <Draggable>, without drag handlers. This will make this ' + 'component effectively undraggable. Please attach `onDrag` or `onStop` handlers so you can adjust the ' + '`position` of this element.');
+      console.warn('A `position` was applied to this <Draggable>, without drag handlers. This will make this ' + 'component effectively undraggable. Please attach `dragFn` or `stopFn` handlers so you can adjust the ' + '`position` of this element.');
     }
     const state = (0, _vue.reactive)({
       // Whether or not we are currently dragging.
@@ -127,10 +136,6 @@ const Draggable = exports.default = (0, _vue.defineComponent)({
       // Can only determine if SVG after mounting
       isElementSVG: false
     });
-
-    // const position = ref(props.position);
-    // const prevPropsPosition = ref(null);
-
     const findDOMNode = () => {
       return (0, _get.default)(props, 'nodeRef.value') || rootElement.value;
     };
@@ -157,7 +162,7 @@ const Draggable = exports.default = (0, _vue.defineComponent)({
     };
     const onDrag = (e, coreData) => {
       if (!state.dragging) return false;
-      (0, _log.default)('Draggable: onDrag: %j', coreData);
+      (0, _log.default)('Draggable: dragFn: %j', coreData);
       const uiData = (0, _positionFns.createDraggableData)({
         props,
         state

package/build/cjs/DraggableCore.js

@@ -4,13 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.draggableCoreProps = exports.draggableCoreDefaultProps = exports.defaultDraggableEventHandler = exports.default = void 0;
+var _get2 = _interopRequireDefault(require("lodash/get"));
 var _vue = require("vue");
-var _vueTypes = _interopRequireDefault(require("vue-types"));
-var _get = _interopRequireDefault(require("lodash/get"));
 var _domFns = require("./utils/domFns");
 var _positionFns = require("./utils/positionFns");
-var _shims = require("./utils/shims");
 var _log = _interopRequireDefault(require("./utils/log"));
+var _shims = require("./utils/shims");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /**
  * DraggableCore is a low-level wrapper for draggable functionality, allowing for more fine-grained control over drag events.
@@ -35,7 +34,6 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
  * - `grid` (Array[Number, Number]): Specifies a grid [x, y] to which the element's movement will be snapped.
  * - `handle` (String): CSS selector that defines the handle element that initiates drag actions. If not defined, the entire element is draggable.
  * - `nodeRef` (Object): A Vue ref object pointing to the draggable element. Used when direct DOM access is necessary.
- *
  * @setup
  * The setup function initializes the component's reactive state and event handlers for drag operations. It handles the
  * initialization and cleanup of event listeners for mouse and touch events that control the drag behavior.
@@ -47,6 +45,7 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
  * Note: This component does not render any DOM elements itself; it merely wraps its default slot's content with draggable functionality.
  */
 
+const funcVoid = function () {};
 // Simple abstraction for dragging events names.
 const eventsFor = {
   touch: {
@@ -63,27 +62,67 @@ const eventsFor = {
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const defaultDraggableEventHandler = (e, data) => true;
-exports.defaultDraggableEventHandler = defaultDraggableEventHandler;
-const funcVoid = function () {};
 
 // Default to mouse events.
+exports.defaultDraggableEventHandler = defaultDraggableEventHandler;
 let dragEventFor = eventsFor.mouse;
 const draggableCoreDefaultProps = exports.draggableCoreDefaultProps = {
-  allowAnyClick: _vueTypes.default.bool.def(false),
-  disabled: _vueTypes.default.bool.def(false),
-  enableUserSelectHack: _vueTypes.default.bool.def(true),
-  startFn: _vueTypes.default.func.def(defaultDraggableEventHandler).def(funcVoid),
-  dragFn: _vueTypes.default.func.def(defaultDraggableEventHandler).def(funcVoid),
-  stopFn: _vueTypes.default.func.def(defaultDraggableEventHandler).def(funcVoid),
-  scale: _vueTypes.default.number.def(1)
+  // allowAnyClick: VueTypes.bool.def(false),
+  // disabled: VueTypes.bool.def(false),
+  // enableUserSelectHack: VueTypes.bool.def(true),
+  // startFn: VueTypes.func.def(defaultDraggableEventHandler).def(funcVoid),
+  // dragFn: VueTypes.func.def(defaultDraggableEventHandler).def(funcVoid),
+  // stopFn: VueTypes.func.def(defaultDraggableEventHandler).def(funcVoid),
+  // scale: VueTypes.number.def(1),
+  allowAnyClick: {
+    type: Boolean,
+    default: false
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  enableUserSelectHack: {
+    type: Boolean,
+    default: true
+  },
+  startFn: {
+    type: Function,
+    default: () => funcVoid
+  },
+  dragFn: {
+    type: Function,
+    default: () => funcVoid
+  },
+  stopFn: {
+    type: Function,
+    default: () => funcVoid
+  },
+  scale: {
+    type: Number,
+    default: 1
+  }
 };
 const draggableCoreProps = exports.draggableCoreProps = {
   ...draggableCoreDefaultProps,
-  cancel: _vueTypes.default.string,
-  offsetParent: _vueTypes.default.custom(_shims.propIsNotNode, 'Draggable\'s offsetParent must be a DOM Node.'),
-  grid: _vueTypes.default.arrayOf(_vueTypes.default.number),
-  handle: _vueTypes.default.string,
-  nodeRef: _vueTypes.default.object.def(() => null)
+  cancel: {
+    type: String
+  },
+  offsetParent: {
+    type: Object,
+    default: () => document.body,
+    validator: value => (0, _shims.propIsNotNode)(value)
+  },
+  grid: {
+    type: Array
+  },
+  handle: {
+    type: String
+  },
+  nodeRef: {
+    type: Object,
+    default: () => null
+  }
 };
 const componentName = 'DraggableCore';
 var _default = exports.default = (0, _vue.defineComponent)({
@@ -95,6 +134,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
   props: {
     ...draggableCoreProps
   },
+  emits: ['mousedown', 'mouseup', 'touchend'],
   setup(props, _ref) {
     let {
       slots,
@@ -110,7 +150,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
       mounted: false
     });
     const findDOMNode = () => {
-      return (0, _get.default)(props, 'nodeRef.value') || rootElement.value;
+      return props.nodeRef?.value || rootElement.value;
     };
     const handleDrag = e => {
       // Get the current drag point from the event. This is used as the offset.
@@ -210,7 +250,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
 
       // Get nodes. Be sure to grab relative document (could be iframed)
       const thisNode = findDOMNode();
-      if (!(0, _get.default)(thisNode, 'ownerDocument.body')) {
+      if (!(0, _get2.default)(thisNode, 'ownerDocument.body')) {
         // throw new Error('<DraggableCore> not mounted on DragStart!');
       }
       const {
@@ -218,7 +258,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
       } = thisNode;
 
       // Short circuit if handle or cancel prop was provided and selector doesn't match.
-      if (props.disabled || !(e.target instanceof ownerDocument.defaultView.Node) || props.handle && !(0, _domFns.matchesSelectorAndParentsTo)(e.target, props.handle, thisNode) || props.cancel && (0, _domFns.matchesSelectorAndParentsTo)(e.target, props.cancel, thisNode)) {
+      if (props.disabled || ownerDocument && !(e.target instanceof ownerDocument.defaultView.Node) || props.handle && !(0, _domFns.matchesSelectorAndParentsTo)(e.target, props.handle, thisNode) || props.cancel && (0, _domFns.matchesSelectorAndParentsTo)(e.target, props.cancel, thisNode)) {
         return;
       }
 
@@ -274,6 +314,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
     };
     const onMousedown = e => {
       dragEventFor = eventsFor.mouse; // on touchscreen laptops we could switch back to mouse
+      emit('mousedown', e);
       return handleDragStart(e);
     };
     const onMouseup = e => {
@@ -321,12 +362,17 @@ var _default = exports.default = (0, _vue.defineComponent)({
     return () => {
       const child = slots.default ? slots.default()[0] : null;
       if (!child) return null;
+      // 判断child.type是否是一个组件
+      const isComponent = typeof child.type === 'object' && 'name' in child.type;
+      // const clonedChildren = isVNode(child) ? cloneVNode(child, { onMousedown, onMouseup, onTouchend, ref: props.nodeRef || rootElement }) : child;
       const clonedChildren = (0, _vue.isVNode)(child) ? (0, _vue.cloneVNode)(child, {
         onMousedown,
         onMouseup,
         onTouchend,
-        ref: rootElement
+        ref: props.nodeRef || rootElement
       }) : child;
+      // const clonedChildren = isVNode(child) ? cloneVNode(child, {}) : child;
+
       return clonedChildren;
     };
   }

package/build/cjs/type.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/build/cjs/utils/positionFns.js

@@ -18,7 +18,7 @@ const cloneBounds = bounds => {
 };
 
 // This one's a bit tricky. We're trying to find the actual DOM node for a draggable component.
-// It's using some internal React stuff, so don't worry if it looks a bit weird.
+// It's using some internal stuff, so don't worry if it looks a bit weird.
 const findDOMNode = draggable => {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   return draggable.findDOMNode();

package/build/cjs/utils/shims.js

@@ -9,8 +9,6 @@ exports.int = int;
 exports.isFunction = isFunction;
 exports.isNum = isNum;
 exports.propIsNotNode = propIsNotNode;
-var _vueTypes = _interopRequireDefault(require("vue-types"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /**
  * Searches for an element in an array or TouchList that satisfies the provided callback function.
  * @param {T[] | TouchList} array - The array or TouchList to search.
@@ -60,12 +58,18 @@ function int(a) {
  * Creates a custom Vue prop type that fails validation.
  * @param {string} propsName - The name of the prop.
  * @param {string} componentName - The name of the component.
- * @returns {VueTypeDef<T>} A VueTypeDef that always fails validation.
  */
 function dontSetMe(propsName, componentName) {
-  const failedPropType = () => !propsName;
-  const message = `Invalid prop ${propsName} passed to ${componentName} - do not set this, set it on the child.`;
-  return _vueTypes.default.custom(failedPropType, message);
+  return {
+    validator() {
+      if (!propsName) {
+        console.error(`Invalid prop ${propsName} passed to ${componentName} - do not set this, set it on the child.`);
+        return false;
+      }
+      // 如果有其他验证逻辑，可以在这里添加
+      return true;
+    }
+  };
 }
 
 /**

package/build/cjs/utils/types.js

@@ -21,9 +21,5 @@ class TouchEvent2 extends TouchEvent {
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
-/* eslint-disable @typescript-eslint/no-explicit-any */
-
-/* eslint-disable @typescript-eslint/no-explicit-any */
-
 /* eslint-disable @typescript-eslint/no-explicit-any */
 exports.TouchEvent2 = TouchEvent2;