kmaterialize 2.3.3-1.0.21 → 2.3.3-1.0.22

package/dist/js/materialize.js

@@ -1,5 +1,5 @@
 /*!
-* Materialize v2.3.3-1.0.21 (https://materializeweb.com)
+* Materialize v2.3.3-1.0.22 (https://materializeweb.com)
 * Copyright 2014-2026 Materialize
 * MIT License (https://raw.githubusercontent.com/materializecss/materialize/master/LICENSE)
 */
@@ -1433,13 +1433,24 @@ var M = (function (exports) {
     class Kanban extends Component {
         _draggedCard = null;
         _dragSourceColumn = null;
+        _dropPreview = null;
+        _dragImage = null;
+        _previewHeight = 64;
         _onDragStart = (event) => {
             const card = event.target?.closest('.kanban-card');
-            if (!card || !this.options.draggable)
+            if (!card || !this.options.draggable || card.classList.contains('is-disabled') || card.getAttribute('aria-disabled') === 'true')
                 return;
             this._draggedCard = card;
             this._dragSourceColumn = card.closest('.kanban-column');
+            this._previewHeight = Math.max(64, Math.round(card.getBoundingClientRect().height));
             card.classList.add('is-dragging');
+            this._dragImage = card.cloneNode(true);
+            this._dragImage.classList.remove('is-dragging');
+            this._dragImage.classList.add('kanban-drag-image');
+            this._dragImage.setAttribute('aria-hidden', 'true');
+            this._dragImage.style.width = `${card.getBoundingClientRect().width}px`;
+            document.body.appendChild(this._dragImage);
+            event.dataTransfer?.setDragImage(this._dragImage, card.offsetWidth / 2, card.offsetHeight / 2);
             event.dataTransfer?.setData('text/plain', card.dataset.kanbanCard || '');
             if (event.dataTransfer)
                 event.dataTransfer.effectAllowed = 'move';
@@ -1455,6 +1466,7 @@ var M = (function (exports) {
                 event.dataTransfer.dropEffect = 'move';
             this.el.querySelectorAll('.kanban-column.is-drag-over').forEach((item) => item.classList.remove('is-drag-over'));
             column.classList.add('is-drag-over');
+            this._updateDropPreview(column, event);
         };
         _onDrop = (event) => {
             if (!this._draggedCard)
@@ -1466,17 +1478,21 @@ var M = (function (exports) {
             const body = column.querySelector('.kanban-column-body') || column;
             const targetCard = event.target?.closest('.kanban-card');
             const source = this._dragSourceColumn;
-            if (targetCard && targetCard !== this._draggedCard && targetCard.parentElement === body) {
-                const box = targetCard.getBoundingClientRect();
-                body.insertBefore(this._draggedCard, event.clientY < box.top + box.height / 2 ? targetCard : targetCard.nextSibling);
+            const movedCard = this._draggedCard;
+            if (this._dropPreview?.parentElement === body) {
+                body.insertBefore(movedCard, this._dropPreview);
+                this._dropPreview.remove();
+            }
+            else if (targetCard && targetCard !== movedCard && targetCard.parentElement === body) {
+                body.insertBefore(movedCard, targetCard);
             }
             else {
-                body.appendChild(this._draggedCard);
+                body.appendChild(movedCard);
             }
             this._clearDragState();
             this._updateCounts();
             if (source && source !== column)
-                this.options.onMove?.({ card: this._draggedCard, from: source, to: column });
+                this.options.onMove?.({ card: movedCard, from: source, to: column });
         };
         _onDragEnd = () => this._clearDragState();
         constructor(el, options) {
@@ -1505,9 +1521,15 @@ var M = (function (exports) {
                     body.setAttribute('role', 'list');
                 column.querySelectorAll('.kanban-card').forEach((card) => {
                     card.setAttribute('role', 'listitem');
-                    card.setAttribute('tabindex', '0');
-                    if (this.options.draggable)
+                    const disabled = card.classList.contains('is-disabled') || card.getAttribute('aria-disabled') === 'true';
+                    card.setAttribute('tabindex', disabled ? '-1' : '0');
+                    if (disabled) {
+                        card.setAttribute('aria-disabled', 'true');
+                        card.draggable = false;
+                    }
+                    else if (this.options.draggable) {
                         card.draggable = true;
+                    }
                 });
             });
             this._updateCounts();
@@ -1519,10 +1541,15 @@ var M = (function (exports) {
             this.el.addEventListener('dragend', this._onDragEnd);
         }
         _clearDragState() {
+            this._dragImage?.remove();
+            this._dragImage = null;
+            this._dropPreview?.remove();
+            this._dropPreview = null;
             this._draggedCard?.classList.remove('is-dragging');
             this.el.querySelectorAll('.kanban-column.is-drag-over').forEach((item) => item.classList.remove('is-drag-over'));
             this._draggedCard = null;
             this._dragSourceColumn = null;
+            this._previewHeight = 64;
         }
         _updateCounts() {
             this.el.querySelectorAll('.kanban-column').forEach((column) => {
@@ -1530,8 +1557,33 @@ var M = (function (exports) {
                 const body = column.querySelector('.kanban-column-body');
                 if (count && body)
                     count.textContent = String(body.querySelectorAll(':scope > .kanban-card').length);
+                const empty = body?.querySelector('.kanban-empty');
+                if (empty && body)
+                    empty.hidden = body.querySelectorAll(':scope > .kanban-card').length > 0;
             });
         }
+        _updateDropPreview(column, event) {
+            const body = column.querySelector('.kanban-column-body') || column;
+            const targetCard = event.target?.closest('.kanban-card');
+            if (targetCard === this._draggedCard)
+                return;
+            if (!this._dropPreview) {
+                this._dropPreview = document.createElement('div');
+                this._dropPreview.className = 'kanban-drop-preview';
+                this._dropPreview.setAttribute('aria-hidden', 'true');
+            }
+            // Keep the preview tied to the dragged card's original height. Using the
+            // hovered card's height makes the placeholder jump as the pointer crosses
+            // cards with different content lengths.
+            this._dropPreview.style.height = `${this._previewHeight}px`;
+            if (targetCard && targetCard.parentElement === body) {
+                const box = targetCard.getBoundingClientRect();
+                body.insertBefore(this._dropPreview, event.clientY < box.top + box.height / 2 ? targetCard : targetCard.nextSibling);
+            }
+            else if (this._dropPreview.parentElement !== body) {
+                body.appendChild(this._dropPreview);
+            }
+        }
         destroy() {
             this._clearDragState();
             this.el.removeEventListener('dragstart', this._onDragStart);
@@ -9381,7 +9433,7 @@ var M = (function (exports) {
     }
 
     /* eslint-disable @typescript-eslint/no-unused-vars */
-    const version = '2.3.3-1.0.21';
+    const version = '2.3.3-1.0.22';
     /**
      * Convenience helper matching v1's `M.toast({...})` call, since Toast is a
      * class in v2 with no bare functional equivalent of its own.