@marsio/vue-draggable 1.0.4 → 1.0.6

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,66 @@ 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
+  }
+  // axis: VueTypes.oneOf(['both', 'x', 'y', 'none']).def('both'),
+  // bounds: VueTypes.oneOfType([
+  //   VueTypes.shape({
+  //     left: VueTypes.number,
+  //     right: VueTypes.number,
+  //     top: VueTypes.number,
+  //     bottom: VueTypes.number
+  //   }),
+  //   VueTypes.string,
+  //   VueTypes.oneOf([false])
+  // ]).def(false),
+  // defaultClassName: VueTypes.string.def('vue-draggable'),
+  // defaultClassNameDragging: VueTypes.string.def('vue-draggable-dragging'),
+  // defaultClassNameDragged: VueTypes.string.def('vue-draggable-dragged'),
+  // defaultPosition: VueTypes.shape({
+  //   x: VueTypes.number,
+  //   y: VueTypes.number
+  // }).def({x: 0, y: 0}),
+  // positionOffset: VueTypes.shape({
+  //   x: VueTypes.oneOfType([VueTypes.number, VueTypes.string]),
+  //   y: VueTypes.oneOfType([VueTypes.number, VueTypes.string])
+  // }),
+  // position: VueTypes.shape({
+  //   x: VueTypes.number,
+  //   y: VueTypes.number
+  // }).def(undefined)
 };
 const componentName = 'Draggable';
 const Draggable = exports.default = (0, _vue.defineComponent)({
@@ -105,6 +139,7 @@ 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

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.
@@ -47,6 +46,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 +63,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)({
@@ -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 {

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;