New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
vue-dndrop
Advanced tools
vue-dndrop - npm Package Compare versions
Comparing version 1.2.2 to 1.2.4
| { | ||
| "name": "vue-dndrop", | ||
| "version": "1.2.2", | ||
| "version": "1.2.4", | ||
| "description": "Vue wrappers for drag and drop", | ||
@@ -12,3 +12,4 @@ "author": "amendx && kutlugsahin", | ||
| "Dave Stewart (https://github.com/davestewart)", | ||
| "Kurt Lugsahin (https://github.com/kutlugsahin)" | ||
| "Kurt Lugsahin (https://github.com/kutlugsahin)", | ||
| "Amanda Esmeraldo (https://github.com/amendx)" | ||
| ], | ||
@@ -21,5 +22,2 @@ "publishConfig": { | ||
| "Vue.js", | ||
| "vue3", | ||
| "vue3.js", | ||
| "vue 3.x", | ||
| "sortable", | ||
@@ -43,3 +41,2 @@ "drag and drop", | ||
| "docs": "cd docs && npm run dev", | ||
| "deploy": "cd docs && npm run deploy", | ||
| "lint": "eslint src/*" | ||
@@ -46,0 +43,0 @@ }, |
@@ -14,2 +14,4 @@ <p align="center"> | ||
| <img src="https://img.shields.io/npm/dt/vue-dndrop" alt="npm downloads" /> | ||
| <img src="https://img.shields.io/github/license/amendx/vue-dndrop.svg" alt="mit license" /> | ||
| <img src="https://badgen.net/github/last-commit/amendx/vue-dndrop" alt="commit" /> | ||
| <img src="https://github.com/amendx/vue-dndrop/actions/workflows/deploy.yml/badge.svg" alt="github pages" /> | ||
@@ -45,3 +47,3 @@ </p> | ||
| ```shell | ||
| npm i vue-dndrop@next | ||
| npm i vue-dndrop | ||
| ``` | ||
@@ -55,6 +57,10 @@ | ||
| ###### This library consists on a wrapper for Vue.js components over the long missed [smooth-dnd](https://github.com/kutlugsahin/smooth-dnd) library. To make it less _importee_, all the content imported from `smooth-dnd` is now on our own library. It's all plain javascript now. | ||
| > This library consists on a wrapper for Vue.js components over the long missed [smooth-dnd](https://github.com/kutlugsahin/smooth-dnd) library. To make it less _importee_, all the content imported from `smooth-dnd` is now on our own library. It's all plain javascript now. | ||
| > Feel free to contribute. | ||
| ### Contributors | ||
| <a href="https://github.com/amendx/vue-dndrop/contributors"> | ||
| <img src="https://contrib.rocks/image?repo=amendx/vue-dndrop"/> | ||
| </a> | ||
| --- | ||
@@ -111,7 +117,7 @@ | ||
| > Component that contains the draggable elements or components. Each of its children should be wrapped by **Draggable** component | ||
| Component that contains the draggable elements or components. Each of its children should be wrapped by **Draggable** component | ||
| ### Properties | ||
| > Properties define the visual behaviour of the library: | ||
| Properties define the visual behaviour of the library: | ||
@@ -121,5 +127,5 @@ | Property | Type | Default | Description | | ||
| | :orientation | string | `vertical` | Orientation of the container. Can be **horizontal** or **vertical**. | | ||
| | :behaviour | string | `move` | Property to describe weather the dragging item will be moved or copied to target container. Can be **move** or **copy** or **drop-zone** or **contain**. | | ||
| | :behaviour | string | `move` | Property to describe wether the dragging item will be moved or copied to target container. Can be **move** or **copy** or **drop-zone** or **contain**. | | ||
| | :tag | string or NodeDescription | `div` | _See descriptions below_ | | ||
| | :group-name | string | `undefined` | Draggables can be moved between the containers having the same group names. If not set container will not accept drags from outside. This behaviour can be overriden by shouldAcceptDrop function. See below. | | ||
| | :group-name | string | `undefined` | Draggables can be moved between the containers having the same group names. If not set container will not accept drags from outside. This behaviour can be overwritten by shouldAcceptDrop function. See below. | | ||
| | :lock-axis | string | `undefined` | Locks the movement axis of the dragging. Possible values are **x**, **y** or **undefined**. | | ||
@@ -139,4 +145,4 @@ | :drag-handle-selector | string | `undefined` | Css selector to test for enabling dragging. If not given item can be grabbed from anywhere in its boundaries. | | ||
| > Tag name or the node definition to render the root element of the Container. | ||
| > Default value is 'div'. | ||
| Tag name or the node definition to render the root element of the Container. | ||
| Default value is 'div'. | ||
@@ -162,3 +168,3 @@ ```ts | ||
| > The lifecycle of a drag is both described, and can be controlled, by a series of [callbacks](#callbacks) and [events](#events), which are illustrated below for a example **containing 3 containers**: | ||
| The lifecycle of a drag is both described, and can be controlled, by a series of [callbacks](#callbacks) and [events](#events), which are illustrated below for a example **containing 3 containers**: | ||
@@ -231,11 +237,11 @@ ``` | ||
| > This can provide handler functions context-sensitive data, such as the loop index or current item. | ||
| This can provide handler functions context-sensitive data, such as the loop index or current item. | ||
| ## Callbacks | ||
| > Callbacks provide additional logic and checks before and during user interaction. | ||
| Callbacks provide additional logic and checks before and during user interaction. | ||
| ### `get-child-payload()` | ||
| > The function to be called to get the payload object to be passed **onDrop** function. | ||
| The function to be called to get the payload object to be passed **onDrop** function. | ||
@@ -264,3 +270,3 @@ ```jsx | ||
| > The function to be called by all containers before drag starts to determine the containers to which the drop is possible. Setting this function will override the **group-name** property and only the return value of this function will be taken into account. | ||
| The function to be called by all containers before drag starts to determine the containers to which the drop is possible. Setting this function will override the **group-name** property and only the return value of this function will be taken into account. | ||
@@ -288,4 +294,4 @@ ```jsx | ||
| > The function to be called by the target container to which the dragged item will be dropped. | ||
| > Sometimes dragged item's dimensions are not suitable with the target container and dropping animation can be wierd. So it can be disabled by returning **false**. If not set drop animations are enabled. | ||
| The function to be called by the target container to which the dragged item will be dropped. | ||
| Sometimes dragged item's dimensions are not suitable with the target container and dropping animation can be wierd. So it can be disabled by returning **false**. If not set drop animations are enabled. | ||
@@ -313,5 +319,5 @@ ```jsx | ||
| > The function to be called to get the element that the dragged ghost will be appended. Default parent element is the container itself. | ||
| > The ghost element is positioned as 'fixed' and appended to given parent element. | ||
| > But if any anchestor of container has a transform property, ghost element will be positioned relative to that element which breaks the calculations. Thats why if you have any transformed parent element of Containers you should set this property so that it returns any element that has not transformed parent element. | ||
| The function to be called to get the element that the dragged ghost will be appended. Default parent element is the container itself. | ||
| The ghost element is positioned as 'fixed' and appended to given parent element. | ||
| But if any anchestor of container has a transform property, ghost element will be positioned relative to that element which breaks the calculations. Thats why if you have any transformed parent element of Containers you should set this property so that it returns any element that has not transformed parent element. | ||
@@ -336,7 +342,7 @@ ```jsx | ||
| > Events may call user-defined handlers at particular points in the drag-and-drop lifecycle. | ||
| Events may call user-defined handlers at particular points in the drag-and-drop lifecycle. | ||
| ### `@drag-start` | ||
| > Event to be emitted by all containers on drag start. | ||
| Event to be emitted by all containers on drag start. | ||
@@ -363,3 +369,3 @@ ```jsx | ||
| > The function to be called by all containers on drag end. Called before [drop](#drop) event. | ||
| The function to be called by all containers on drag end. Called before [drop](#drop) event. | ||
@@ -400,3 +406,3 @@ ```jsx | ||
| > The event to be emitted by the relevant container whenever a dragged item leaves its boundaries while dragging. | ||
| The event to be emitted by the relevant container whenever a dragged item leaves its boundaries while dragging. | ||
@@ -415,3 +421,3 @@ ```jsx | ||
| > The function to be called by the container which is being drag over, when the index of possible drop position changed in container. Basically it is called each time the draggables in a container slides for opening a space for dragged item. **dropResult** is the only parameter passed to the function which contains the following properties. | ||
| The function to be called by the container which is being drag over, when the index of possible drop position changed in container. Basically it is called each time the draggables in a container slides for opening a space for dragged item. **dropResult** is the only parameter passed to the function which contains the following properties. | ||
@@ -439,3 +445,3 @@ ```jsx | ||
| > The event to be emitted by any relevant container when drop is over. (After drop animation ends). Source container and any container that could accept drop is considered relevant. | ||
| The event to be emitted by any relevant container when drop is over. (After drop animation ends). Source container and any container that could accept drop is considered relevant. | ||
@@ -464,3 +470,3 @@ ```jsx | ||
| > Event to be emitted by the current container when drop is not allowed or does not fit the rule applied inside the column/element validation. | ||
| Event to be emitted by the current container when drop is not allowed or does not fit the rule applied inside the column/element validation. | ||
@@ -498,4 +504,4 @@ ```jsx | ||
| > Tag name or the node definition to render the root element of the Draggable. | ||
| > Default value is 'div'. | ||
| Tag name or the node definition to render the root element of the Draggable. | ||
| Default value is 'div'. | ||
@@ -502,0 +508,0 @@ ```jsx |
New alerts
Empty package
Supply chain riskPackage does not contain any code. It may be removed, is name squatting, or the result of a faulty package publish.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Fixed alerts
Minified code
QualityThis package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.
Found 1 instance in 1 package
Improved metrics
- Number of low quality alerts
- decreased by-100%
0
- Number of lines in readme file
- increased by1.2%
504
Worsened metrics
- Total package byte prevSize
- decreased by-91.02%
21787
- Number of package files
- decreased by-50%
3
- Lines of code
- decreased by-100%
0
- Number of medium supply chain risk alerts
- increased byInfinity%
2
No dependency changes