sortable-dnd - npm Package Compare versions

Comparing version 0.4.11 to 0.4.12

package.json

 {
   "name": "sortable-dnd",
-  "version": "0.4.11",
+  "version": "0.4.12",
   "description": "JS library for drag-and-drop lists, supports sortable and draggable",
-  "main": "dist/sortable.js",
+  "main": "dist/index.js",
   "types": "types/index.d.ts",
@@ -26,3 +26,5 @@ "files": [
     "draggable",
-    "drag and drop"
+    "drag and drop",
+    "sortable-list",
+    "draggable-list"
   ],
@@ -29,0 +31,0 @@ "author": "mfuu",

types/index.d.ts

@@ -5,3 +5,3 @@ type Group = {
   pull: Boolean;
-}
+};
 
@@ -13,3 +13,3 @@ type Offset = {
   left: Number;
-}
+};
 
@@ -23,5 +23,5 @@ type Rect = {
   right: Number;
-}
+};
 
-type FromTo = {
+type SortableState = {
   sortable: Sortable;
@@ -32,3 +32,3 @@ group: HTMLElement;
   rect: Rect;
-}
+};
 
@@ -39,22 +39,16 @@ type MultiNode = {
   rect: Rect;
-}
+};
 
-type MultiFromTo = {
-  sortable: Sortable;
-  group: HTMLElement;
-  nodes: MultiNode[];
-  node: HTMLElement;
-  offset: Offset;
-  rect: Rect;
-}
+type EventType = Event & (PointerEvent | TouchEvent | MouseEvent);
 
-type EventType = Event & (PointerEvent | MouseEvent | TouchEvent);
+type FromTo = SortableState & { nodes?: MultiNode[] };
 
+type Select = SortableState & { event: EventType };
 
 type options = {
   /**
-   * Specifies which items inside the element should be draggable
+   * Specifies which items inside the element should be draggable.
    * @example
    * - (e) => e.target.tagName === 'LI' ? true : false
-   * - (e) => e.target // use function to set the drag element if retrun HTMLElement
+   * - (e) => e.target // use function to set the drag element if retrun an HTMLElement
    * - 'div'   // use tag name
@@ -67,3 +61,3 @@ * - '.item' // use class name
   /**
-   * Drag handle selector within list items
+   * Drag handle selector within list items.
    * @example
@@ -78,6 +72,6 @@ * - (e) => e.target.tagName === 'I' ? true : false
   /**
-   * Set value to allow drag between different lists
+   * Set value to allow drag between different lists.
    * @example
-   * String: 'name'
-   * Object: { name: 'group', put: true | false, pull: true | false }
+   * String: '...'
+   * Object: { name: '...', put: true | false, pull: true | false }
    * @defaults `' '`
@@ -103,4 +97,4 @@ */
   onDrag?: (params: {
-    from: FromTo | MultiFromTo;
-    to: FromTo | MultiFromTo;
+    from: FromTo;
+    to: FromTo;
     event: EventType;
@@ -113,4 +107,4 @@ }) => void;
   onMove?: (params: {
-    from: FromTo | MultiFromTo;
-    to: FromTo | MultiFromTo;
+    from: FromTo;
+    to: FromTo;
     event: EventType;
@@ -123,4 +117,4 @@ }) => void;
   onDrop?: (params: {
-    from: FromTo | MultiFromTo;
-    to: FromTo | MultiFromTo;
+    from: FromTo;
+    to: FromTo;
     event: EventType;
@@ -131,7 +125,7 @@ changed: Boolean;
   /**
-   * The callback function when element is dropped into the list from another list.
+   * The callback function when element is dropped into the current list from another list.
    */
   onAdd?: (params: {
-    from: FromTo | MultiFromTo;
-    to: FromTo | MultiFromTo;
+    from: FromTo;
+    to: FromTo;
     event: EventType;
@@ -141,7 +135,7 @@ }) => void;
   /**
-   * The callback function when element is removed from the list into another list.
+   * The callback function when element is removed from the current list into another list.
    */
   onRemove?: (params: {
-    from: FromTo | MultiFromTo;
-    to: FromTo | MultiFromTo;
+    from: FromTo;
+    to: FromTo;
     event: EventType;
@@ -151,7 +145,7 @@ }) => void;
   /**
-   * The callback function when the dragged element changes position in the list.
+   * The callback function when the dragged element changes position in the current list.
    */
   onChange?: (params: {
-    from: FromTo | MultiFromTo;
-    to: FromTo | MultiFromTo;
+    from: FromTo;
+    to: FromTo;
     event: EventType;
@@ -161,10 +155,10 @@ }) => void;
   /**
-   * The callback function when element is selected
+   * The callback function when element is selected.
    */
-  onSelect?: (params: FromTo) => void;
+  onSelect?: (params: Select) => void;
 
   /**
-   * The callback function when element is unselected
+   * The callback function when element is unselected.
    */
-  onDeselect?: (params: FromTo) => void;
+  onDeselect?: (params: Select) => void;
 
@@ -184,3 +178,3 @@ /**
   /**
-   * Class name for selected item
+   * Class name for selected item.
    * @defaults `' '`
@@ -227,3 +221,3 @@ */
   /**
-   * Appends the cloned DOM Element into the Document's Body
+   * Appends the cloned DOM Element into the Document's Body.
    * @defaults `false`
@@ -245,10 +239,10 @@ */
    */
-  constructor(ParentElement: HTMLElement, options?: options)
+  constructor(ParentElement: HTMLElement, options?: options);
 
   /**
-   * Manually clear all the state of the component. After using this method, the component will no longer be draggable.
+   * Manually clear all the state of the component, using this method the component will not be draggable.
    */
-  destroy(): void
+  destroy(): void;
 }
 
-export = Sortable
+export = Sortable;

New alerts

Major refactor

Supply chain risk

Package 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

Worsened metrics

Total package byte prevSize

76802

decreased by-1.53%

Lines of code

1547

decreased by-0.83%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes