@marsio/vue-draggable 1.0.2

package/LICENSE

@@ -0,0 +1,21 @@
+(MIT License)
+
+Copyright (c) 2023 Marshall. All rights reserved.
+ 
+Permission is hereby granted, free of charge, to any person obtaining a
+copy of this software and associated documentation files (the "Software"), 
+to deal in the Software without restriction, including without limitation 
+the rights to use, copy, modify, merge, publish, distribute, sublicense, 
+and/or sell copies of the Software, and to permit persons to whom the 
+Software is furnished to do so, subject to the following conditions:
+ 
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+ 
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 
+FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER 
+DEALINGS IN THE SOFTWARE.

package/README.md

@@ -0,0 +1,320 @@
+# Vue-Draggable
+
+
+
+<p align="center">
+  <img src="https://user-images.githubusercontent.com/6365230/95649276-f3a02480-0b06-11eb-8504-e0614a780ba4.gif" />
+</p>
+
+A simple component for making elements draggable.
+
+```js
+<Draggable>
+  <div>I can now be moved around!</div>
+</Draggable>
+```
+
+#### Technical Documentation
+
+- [Installing](#installing)
+- [Exports](#exports)
+- [Draggable](#draggable)
+- [Draggable Usage](#draggable-usage)
+- [Draggable API](#draggable-api)
+- [Controlled vs. Uncontrolled](#controlled-vs-uncontrolled)
+- [DraggableCore](#draggablecore)
+- [DraggableCore API](#draggablecore-api)
+
+
+
+### Installing
+
+```bash
+$ npm install @marsio/vue-draggable
+```
+
+If you aren't using browserify/webpack, a
+[UMD version of vue-draggable](dist/vue-draggable.js) is available. It is updated per-release only.
+This bundle is also what is loaded when installing from npm. It expects external Vue3.
+
+If you want a UMD version of the latest `master` revision, you can generate it yourself from master by cloning this
+repository and running `$ make`. This will create umd dist files in the `build/` folder.
+
+### Exports
+
+The default export is `<Draggable>`. At the `.DraggableCore` property is [`<DraggableCore>`](#draggablecore).
+Here's how to use it:
+
+```js
+// ES6
+import Draggable from '@marsio/vue-draggable'; // The default
+import {DraggableCore} from '@marsio/vue-draggable'; // <DraggableCore>
+import Draggable, {DraggableCore} from '@marsio/vue-draggable'; // Both at the same time
+
+// CommonJS
+let Draggable = require('@marsio/vue-draggable');
+let DraggableCore = Draggable.DraggableCore;
+```
+
+## `<Draggable>`
+
+A `<Draggable>` element wraps an existing element and extends it with new event handlers and styles.
+It does not create a wrapper element in the DOM.
+
+Draggable items are moved using CSS Transforms. This allows items to be dragged regardless of their current
+positioning (relative, absolute, or static). Elements can also be moved between drags without incident.
+
+If the item you are dragging already has a CSS Transform applied, it will be overwritten by `<Draggable>`. Use
+an intermediate wrapper (`<Draggable><span>...</span></Draggable>`) in this case.
+
+### Draggable Usage
+
+```js
+<template>
+  <div>
+    <h1>Vue Draggable</h1>
+    <Draggable>
+      <div class="box">I can be dragged anywhere</div>
+    </Draggable>
+  </div>
+</template>
+<script>
+import Draggable from '@marsio/vue-draggable'
+export default {
+  components: {
+    Draggable
+  }
+}
+</script>
+<style>
+  html, body {
+    height: 100%;
+  }
+  .vue-draggable, .cursor {
+    cursor: move;
+  }
+  .box {
+    background: #fff;
+    border: 1px solid #999;
+    border-radius: 3px;
+    width: 180px;
+    height: 180px;
+    margin: 10px;
+    padding: 10px;
+    float: left;
+  }
+</style>
+
+```
+
+### Draggable API
+
+The `<Draggable/>` component transparently adds draggability to its children.
+
+**Note**: Only a single child is allowed or an Error will be thrown.
+
+For the `<Draggable/>` component to correctly attach itself to its child, the child element must provide support
+for the following props:
+- `style` is used to give the transform css to the child.
+- `class` is used to apply the proper classes to the object being dragged.
+- `onMousedown`, `onMouseup`, `onTouchstart`, and `onTouchend`  are used to keep track of dragging state.
+
+#### `<Draggable>` Props:
+
+```js
+type DraggableEventHandler = (e: Event, data: DraggableData) => void | false;
+type DraggableData = {
+  node: HTMLElement,
+  x: number, y: number,
+  deltaX: number, deltaY: number,
+  lastX: number, lastY: number
+};
+
+/*
+ * Props:
+ */
+{
+// If set to `true`, will allow dragging on non left-button clicks.
+allowAnyClick: boolean,
+
+// Determines which axis the draggable can move. This only affects
+// flushing to the DOM. Callbacks will still include all values.
+// Accepted values:
+// - `both` allows movement horizontally and vertically (default).
+// - `x` limits movement to horizontal axis.
+// - `y` limits movement to vertical axis.
+// - 'none' stops all movement.
+axis: string,
+
+// Specifies movement boundaries. Accepted values:
+// - `parent` restricts movement within the node's offsetParent
+//    (nearest node with position relative or absolute), or
+// - a selector, restricts movement within the targeted node
+// - An object with `left, top, right, and bottom` properties.
+//   These indicate how far in each direction the draggable
+//   can be moved.
+bounds: {left?: number, top?: number, right?: number, bottom?: number} | string,
+
+// Specifies a selector to be used to prevent drag initialization. The string is passed to
+// Element.matches, so it's possible to use multiple selectors like `.first, .second`.
+// Example: '.body'
+cancel: string,
+
+// Class names for draggable UI.
+// Default to 'vue-draggable', 'vue-draggable-dragging', and 'vue-draggable-dragged'
+defaultClassName: string,
+defaultClassNameDragging: string,
+defaultClassNameDragged: string,
+
+// Specifies the `x` and `y` that the dragged item should start at.
+// This is generally not necessary to use (you can use absolute or relative
+// positioning of the child directly), but can be helpful for uniformity in
+// your callbacks and with css transforms.
+defaultPosition: {x: number, y: number},
+
+// If true, will not call any drag handlers.
+disabled: boolean,
+
+// Specifies the x and y that dragging should snap to.
+grid: [number, number],
+
+// Specifies a selector to be used as the handle that initiates drag.
+// Example: '.handle'
+handle: string,
+
+// If desired, you can provide your own offsetParent for drag calculations.
+// By default, we use the Draggable's offsetParent. This can be useful for elements
+// with odd display types or floats.
+offsetParent: HTMLElement,
+
+// Called whenever the user mouses down. Called regardless of handle or
+// disabled status.
+onMousedown: (e: MouseEvent) => void,
+
+// Called when dragging starts. If `false` is returned any handler,
+// the action will cancel.
+startFn: DraggableEventHandler,
+
+// Called while dragging.
+dragFn: DraggableEventHandler,
+
+// Called when dragging stops.
+stopFn: DraggableEventHandler,
+
+// import { defineComponent, ref } from 'vue';
+// import Draggable from 'vue-draggable'
+
+// const Component1 = defineComponent({
+//   props: {
+//     title: String
+//   },
+//   setup(props) {
+//     return { title };
+//   }
+// });
+
+// export default defineComponent({
+//   setup(props) {
+//     const nodeRef = ref(null)
+//     return () => (
+//       <DraggableCore dragFn={onDrag} nodeRef={nodeRef}>
+//         <Component1 ref={nodeRef} />
+//       </DraggableCore>
+//     )
+//   }
+// });
+// `nodeRef` is also available on <DraggableCore>.
+nodeRef: Ref<HTMLElement | null>,
+
+// if you need to have direct control of the element.
+position: {x: number, y: number}
+
+// A position offset to start with. Useful for giving an initial position
+// to the element. Differs from `defaultPosition` in that it does not
+// affect the position returned in draggable callbacks, and in that it
+// accepts strings, like `{x: '10%', y: '10%'}`.
+positionOffset: {x: number | string, y: number | string},
+
+// Specifies the scale of the canvas your are dragging this element on. This allows
+// you to, for example, get the correct drag deltas while you are zoomed in or out via
+// a transform or matrix in the parent of this element.
+scale: number
+}
+```
+
+Note that sending `class`, `style`, or `transform` as properties will error - set them on the child element
+directly.
+
+
+## Controlled vs. Uncontrolled
+
+`<Draggable>` is a 'batteries-included' component that manages its own state. If you want to completely
+control the lifecycle of the component, use `<DraggableCore>`.
+
+For some users, they may want the nice state management that `<Draggable>` provides, but occasionally want
+to programmatically reposition their components.
+
+If the prop `position: {x: number, y: number}` is defined, the `<Draggable>` will ignore its internal state and use
+the provided position instead. Alternatively, you can seed the position using `defaultPosition`. Technically, since
+`<Draggable>` works only on position deltas, you could also seed the initial position using CSS `top/left`.
+
+We then expect you to use at least an `dragFn` or `stopFn` handler to synchronize state.
+
+To disable dragging while controlled, send the prop `disabled={true}` - at this point the `<Draggable>` will operate
+like a completely static component.
+
+## `<DraggableCore>`
+
+For users that require absolute control, a `<DraggableCore>` element is available. This is useful as an abstraction
+over touch and mouse events, but with full control. `<DraggableCore>` has no internal state.
+
+`<DraggableCore>` is a useful building block for other libraries that simply want to abstract browser-specific
+quirks and receive callbacks when a user attempts to move an element. It does not set styles or transforms
+on itself and thus must have callbacks attached to be useful.
+
+### DraggableCore API
+
+`<DraggableCore>` takes a limited subset of options:
+
+```js
+{
+  allowAnyClick: boolean,
+  cancel: string,
+  disabled: boolean,
+  enableUserSelectHack: boolean,
+  offsetParent: HTMLElement,
+  grid: [number, number],
+  handle: string,
+  startFn: DraggableEventHandler,
+  dragFn: DraggableEventHandler,
+  stopFn: DraggableEventHandler,
+  onMousedown: (e: MouseEvent) => void,
+  scale: number
+}
+```
+
+Note that there is no start position. `<DraggableCore>` simply calls `drag` handlers with the below parameters,
+indicating its position (as inferred from the underlying MouseEvent) and deltas. It is up to the parent
+to set actual positions on `<DraggableCore>`.
+
+Drag callbacks (`startFn`, `dragFn`, `stopFn`) are called with the [same arguments as `<Draggable>`](#draggable-api).
+
+----
+
+### Contributing
+
+- Fork the project
+- Run the project in development mode: `$ npm run dev`
+- Make changes.
+- Update README with appropriate docs.
+- Commit and PR
+
+### Release checklist
+
+- Update CHANGELOG
+- `make release-patch`
+- `make publish`
+
+### License
+
+MIT

package/build/cjs/Draggable.js

@@ -0,0 +1,278 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "DraggableCore", {
+  enumerable: true,
+  get: function () {
+    return _DraggableCore.default;
+  }
+});
+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");
+var _shims = require("./utils/shims");
+var _DraggableCore = _interopRequireWildcard(require("./DraggableCore"));
+var _log = _interopRequireDefault(require("./utils/log"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _isSlot(s) {
+  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !(0, _vue.isVNode)(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(null)
+};
+const componentName = 'Draggable';
+const Draggable = exports.default = (0, _vue.defineComponent)({
+  compatConfig: {
+    MODE: 3
+  },
+  name: componentName,
+  inheritAttrs: false,
+  props: {
+    ...draggableProps,
+    style: (0, _shims.dontSetMe)('style', componentName),
+    class: (0, _shims.dontSetMe)('class', componentName),
+    transform: (0, _shims.dontSetMe)('transform', componentName)
+  },
+  setup(props, _ref) {
+    let {
+      slots
+    } = _ref;
+    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.');
+    }
+    const state = (0, _vue.reactive)({
+      // Whether or not we are currently dragging.
+      dragging: false,
+      // Whether or not we have been dragged before.
+      dragged: false,
+      // Current transform x and y.
+      x: props.position ? props.position.x : props.defaultPosition.x,
+      y: props.position ? props.position.y : props.defaultPosition.y,
+      prevPropsPosition: {
+        ...props.position
+      },
+      // Used for compensating for out-of-bounds drags
+      slackX: 0,
+      slackY: 0,
+      // 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;
+    };
+    (0, _vue.onMounted)(() => {
+      if (typeof window.SVGElement !== 'undefined' && findDOMNode() instanceof window.SVGElement) {
+        state.isElementSVG = true;
+      }
+    });
+    (0, _vue.onUnmounted)(() => {
+      state.dragging = false;
+    });
+    const onDragStart = (e, coreData) => {
+      (0, _log.default)('Draggable: onDragStart: %j', coreData);
+
+      // Short-circuit if user's callback killed it.
+      const shouldStart = props.startFn(e, (0, _positionFns.createDraggableData)({
+        props,
+        state
+      }, coreData));
+      // Kills start event on core as well, so move handlers are never bound.
+      if (shouldStart === false) return false;
+      state.dragging = true;
+      state.dragged = true;
+    };
+    const onDrag = (e, coreData) => {
+      if (!state.dragging) return false;
+      (0, _log.default)('Draggable: onDrag: %j', coreData);
+      const uiData = (0, _positionFns.createDraggableData)({
+        props,
+        state
+      }, coreData);
+      const newState = {
+        x: uiData.x,
+        y: uiData.y,
+        slackX: 0,
+        slackY: 0
+      };
+
+      // Keep within bounds.
+      if (props.bounds) {
+        // Save original x and y.
+        const {
+          x,
+          y
+        } = newState;
+
+        // Add slack to the values used to calculate bound position. This will ensure that if
+        // completely removed.
+        newState.x += state.slackX;
+        newState.y += state.slackY;
+
+        // Get bound position. This will ceil/floor the x and y within the boundaries.
+        const [newStateX, newStateY] = (0, _positionFns.getBoundPosition)({
+          props,
+          findDOMNode
+        }, newState.x, newState.y);
+        newState.x = newStateX;
+        newState.y = newStateY;
+
+        // Recalculate slack by noting how much was shaved by the boundPosition handler.
+        newState.slackX = state.slackX + (x - newState.x);
+        newState.slackY = state.slackY + (y - newState.y);
+
+        // Update the event we fire to reflect what really happened after bounds took effect.
+        uiData.x = newState.x;
+        uiData.y = newState.y;
+        uiData.deltaX = newState.x - state.x;
+        uiData.deltaY = newState.y - state.y;
+      }
+
+      // Short-circuit if user's callback killed it.
+      const shouldUpdate = props.dragFn(e, uiData);
+      if (shouldUpdate === false) return false;
+      Object.keys(newState).forEach(key => {
+        state[key] = newState[key];
+      });
+    };
+    const onDragStop = (e, coreData) => {
+      if (!state.dragging) return false;
+
+      // Short-circuit if user's callback killed it.
+      const shouldContinue = props.stopFn(e, (0, _positionFns.createDraggableData)({
+        props,
+        state
+      }, coreData));
+      if (shouldContinue === false) return false;
+      (0, _log.default)('Draggable: onDragStop: %j', coreData);
+      const newState = {
+        dragging: false,
+        slackX: 0,
+        slackY: 0
+      };
+
+      // If this is a controlled component, the result of this operation will be to
+      // revert back to the old position. We expect a handler on `onDragStop`, at the least.
+      const controlled = Boolean(props.position);
+      if (controlled) {
+        const {
+          x,
+          y
+        } = props.position;
+        newState.x = x;
+        newState.y = y;
+      }
+      Object.keys(newState).forEach(key => {
+        state[key] = newState[key];
+      });
+    };
+    return () => {
+      const {
+        axis,
+        bounds,
+        // children,
+        defaultPosition,
+        defaultClassName,
+        defaultClassNameDragging,
+        defaultClassNameDragged,
+        position,
+        positionOffset,
+        scale,
+        ...draggableCoreProps
+      } = props;
+      let style = {};
+      let svgTransform = null;
+      const controlled = Boolean(position);
+      const draggable = !controlled || state.dragging;
+      const validPosition = position || defaultPosition;
+      const transformOpts = {
+        // Set left if horizontal drag is enabled
+        x: (0, _positionFns.canDragX)({
+          props
+        }) && draggable ? state.x : validPosition.x,
+        // Set top if vertical drag is enabled
+        y: (0, _positionFns.canDragY)({
+          props
+        }) && draggable ? state.y : validPosition.y
+      };
+
+      // If this element was SVG, we use the `transform` attribute.
+      if (state.isElementSVG) {
+        svgTransform = (0, _domFns.createSVGTransform)(transformOpts, positionOffset);
+      } else {
+        // Add a CSS transform to move the element around. This allows us to move the element around
+        // without worrying about whether or not it is relatively or absolutely positioned.
+        // If the item you are dragging already has a transform set, wrap it in a <span> so <Draggable>
+        // has a clean slate.
+        style = (0, _domFns.createCSSTransform)(transformOpts, positionOffset);
+      }
+      const slotContent = (0, _vue.renderSlot)(slots, 'default');
+      let children = slotContent.children;
+      if (!Array.isArray(children)) {
+        children = []; // 如果不是数组，则使用空数组
+      }
+
+      // Mark with class while dragging
+      const className = (0, _clsx.default)(defaultClassName, {
+        [defaultClassNameDragging]: state.dragging,
+        [defaultClassNameDragged]: state.dragged
+      });
+      const clonedChildren = children.flatMap(child => {
+        return (0, _vue.isVNode)(child) ? (0, _vue.cloneVNode)(child, {
+          class: className,
+          style: style,
+          transform: svgTransform
+        }) : child;
+      });
+      const coreProps = {
+        ...draggableCoreProps,
+        startFn: onDragStart,
+        dragFn: onDrag,
+        stopFn: onDragStop
+      };
+      return (0, _vue.createVNode)(_DraggableCore.default, (0, _vue.mergeProps)({
+        "ref": rootElement
+      }, coreProps), _isSlot(clonedChildren) ? clonedChildren : {
+        default: () => [clonedChildren]
+      });
+    };
+  }
+});