Merge pull request #2379 from adumesny/master

decline feat cleanup

Author: adumesny

doc/CHANGES.md

@@ -5,6 +5,7 @@ Change log
 <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
 **Table of Contents**  *generated with [DocToc](http://doctoc.herokuapp.com/)*
 
+- [8.3.0-dev (TBD)](#830-dev-tbd)
 - [8.3.0 (2023-06-13)](#830-2023-06-13)
 - [8.2.3 (2023-06-11)](#823-2023-06-11)
 - [8.2.1 (2023-05-26)](#821-2023-05-26)
@@ -91,6 +92,9 @@ Change log
 
 <!-- END doctoc generated TOC please keep comment here to allow auto update -->
 
+## 8.3.0-dev (TBD)
+* feat [#2378](https://github.com/gridstack/gridstack.js/pull/2378) attribute `DDRemoveOpt.decline` to deny the removal of a specific class.
+
 ## 8.3.0 (2023-06-13)
 * feat [#2358](https://github.com/gridstack/gridstack.js/issues/2358) column(N, 'list'|'compact'|...) resizing now support reflowing content as list
 

doc/README.md

@@ -70,7 +70,7 @@ gridstack.js API
 ## Grid Options
 
 - `acceptWidgets` - Accept widgets dragged from other grids or from outside (default: `false`). Can be:
-   * `true` will accept HTML element having `'.grid-stack-item'` as class attribute, else `false`
+   * `true` will accept HTML element having `'grid-stack-item'` as class attribute, else `false`
    * string for explicit class name to accept instead
    * `function (el: Element): boolean` function called before an item will be accepted when entering a grid. the function will be passed the item being dragged, and should return true | false. See [example](https://github.com/gridstack/gridstack.js/blob/master/demo/two.html#L62)
 - `alwaysShowResizeHandle` - possible values (default: `mobile`) - does not apply to non-resizable widgets

src/dd-droppable.ts

@@ -156,7 +156,7 @@ export class DDDroppable extends DDBaseImplement implements HTMLElementExtendOpt
   protected _setupAccept(): DDDroppable {
     if (!this.option.accept) return this;
     if (typeof this.option.accept === 'string') {
-      this.accept = (el: HTMLElement) => el.matches(this.option.accept as string);
+      this.accept = (el: HTMLElement) => el.classList.contains(this.option.accept as string) || el.matches(this.option.accept as string);
     } else {
       this.accept = this.option.accept;
     }

src/gridstack.ts

@@ -285,7 +285,7 @@ export class GridStack {
         handle: (opts.handleClass ? '.' + opts.handleClass : (opts.handle ? opts.handle : '')) || gridDefaults.draggable.handle,
       },
       removableOptions: {
-        accept: opts.itemClass ? '.' + opts.itemClass : gridDefaults.removableOptions.accept,
+        accept: opts.itemClass || gridDefaults.removableOptions.accept,
         decline: gridDefaults.removableOptions.decline
       },
     };

src/types.ts

@@ -25,7 +25,7 @@ export const gridDefaults: GridStackOptions = {
   oneColumnSize: 768,
   placeholderClass: 'grid-stack-placeholder',
   placeholderText: '',
-  removableOptions: { accept: '.grid-stack-item' ,decline:'grid-stack-non-removable'},
+  removableOptions: { accept: 'grid-stack-item', decline: 'grid-stack-non-removable'},
   resizable: { handles: 'se' },
   rtl: 'auto',
 
@@ -333,8 +333,9 @@ export interface DDResizeOpt {
 
 /** Drag&Drop remove options */
 export interface DDRemoveOpt {
-  /** class that can be removed (default?: '.' + opts.itemClass) */
+  /** class that can be removed (default?: opts.itemClass) */
   accept?: string;
+  /** class that cannot be removed (default: 'grid-stack-non-removable') */
   decline?: string;
 }