kmaterialize 2.3.3-1.0.20 → 2.3.3-1.0.21

package/dist/js/materialize.mjs

@@ -1,5 +1,5 @@
 /*!
-* Materialize v2.3.3-1.0.20 (https://materializeweb.com)
+* Materialize v2.3.3-1.0.21 (https://materializeweb.com)
 * Copyright 2014-2026 Materialize
 * MIT License (https://raw.githubusercontent.com/materializecss/materialize/master/LICENSE)
 */
@@ -397,7 +397,7 @@ class Component {
     }
 }
 
-const _defaults$w = {
+const _defaults$x = {
     alignment: 'left',
     autoFocus: true,
     constrainWidth: true,
@@ -450,7 +450,7 @@ class Dropdown extends Component {
         this._setupEventHandlers();
     }
     static get defaults() {
-        return _defaults$w;
+        return _defaults$x;
     }
     /**
      * Initializes instances of Dropdown.
@@ -901,7 +901,7 @@ class Dropdown extends Component {
     };
 }
 
-const _defaults$v = {
+const _defaults$w = {
     data: [], // Autocomplete data set
     onAutocomplete: null, // Callback for when autocompleted
     dropdownOptions: {
@@ -961,7 +961,7 @@ class Autocomplete extends Component {
         this._setupEventHandlers();
     }
     static get defaults() {
-        return _defaults$v;
+        return _defaults$w;
     }
     /**
      * Initializes instances of Autocomplete.
@@ -1369,7 +1369,7 @@ class Autocomplete extends Component {
     }
 }
 
-const _defaults$u = {
+const _defaults$v = {
     dismissible: true
 };
 /** A persistent, contextual feedback banner. */
@@ -1383,7 +1383,7 @@ class Alert extends Component {
         this._bindCloseButton();
     }
     static get defaults() {
-        return _defaults$u;
+        return _defaults$v;
     }
     static init(els, options = {}) {
         return super.init(els, options, Alert);
@@ -1423,6 +1423,122 @@ class Alert extends Component {
     }
 }
 
+const _defaults$u = {
+    draggable: true
+};
+/** A lightweight, dependency-free board for columns of draggable cards. */
+class Kanban extends Component {
+    _draggedCard = null;
+    _dragSourceColumn = null;
+    _onDragStart = (event) => {
+        const card = event.target?.closest('.kanban-card');
+        if (!card || !this.options.draggable)
+            return;
+        this._draggedCard = card;
+        this._dragSourceColumn = card.closest('.kanban-column');
+        card.classList.add('is-dragging');
+        event.dataTransfer?.setData('text/plain', card.dataset.kanbanCard || '');
+        if (event.dataTransfer)
+            event.dataTransfer.effectAllowed = 'move';
+    };
+    _onDragOver = (event) => {
+        if (!this._draggedCard)
+            return;
+        const column = event.target?.closest('.kanban-column');
+        if (!column || !this.el.contains(column))
+            return;
+        event.preventDefault();
+        if (event.dataTransfer)
+            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');
+    };
+    _onDrop = (event) => {
+        if (!this._draggedCard)
+            return;
+        const column = event.target?.closest('.kanban-column');
+        if (!column || !this.el.contains(column))
+            return;
+        event.preventDefault();
+        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);
+        }
+        else {
+            body.appendChild(this._draggedCard);
+        }
+        this._clearDragState();
+        this._updateCounts();
+        if (source && source !== column)
+            this.options.onMove?.({ card: this._draggedCard, from: source, to: column });
+    };
+    _onDragEnd = () => this._clearDragState();
+    constructor(el, options) {
+        super(el, options, Kanban);
+        this.options = { ...Kanban.defaults, ...options };
+        this.el['M_Kanban'] = this;
+        this._prepareMarkup();
+        if (this.options.draggable)
+            this._bindEvents();
+    }
+    static get defaults() {
+        return _defaults$u;
+    }
+    static init(els, options = {}) {
+        return super.init(els, options, Kanban);
+    }
+    static getInstance(el) {
+        return el['M_Kanban'];
+    }
+    _prepareMarkup() {
+        this.el.setAttribute('role', 'region');
+        this.el.querySelectorAll('.kanban-column').forEach((column) => {
+            column.setAttribute('role', 'group');
+            const body = column.querySelector('.kanban-column-body');
+            if (body)
+                body.setAttribute('role', 'list');
+            column.querySelectorAll('.kanban-card').forEach((card) => {
+                card.setAttribute('role', 'listitem');
+                card.setAttribute('tabindex', '0');
+                if (this.options.draggable)
+                    card.draggable = true;
+            });
+        });
+        this._updateCounts();
+    }
+    _bindEvents() {
+        this.el.addEventListener('dragstart', this._onDragStart);
+        this.el.addEventListener('dragover', this._onDragOver);
+        this.el.addEventListener('drop', this._onDrop);
+        this.el.addEventListener('dragend', this._onDragEnd);
+    }
+    _clearDragState() {
+        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;
+    }
+    _updateCounts() {
+        this.el.querySelectorAll('.kanban-column').forEach((column) => {
+            const count = column.querySelector('.kanban-column-count');
+            const body = column.querySelector('.kanban-column-body');
+            if (count && body)
+                count.textContent = String(body.querySelectorAll(':scope > .kanban-card').length);
+        });
+    }
+    destroy() {
+        this._clearDragState();
+        this.el.removeEventListener('dragstart', this._onDragStart);
+        this.el.removeEventListener('dragover', this._onDragOver);
+        this.el.removeEventListener('drop', this._onDrop);
+        this.el.removeEventListener('dragend', this._onDragEnd);
+        delete this.el['M_Kanban'];
+    }
+}
+
 const _defaults$t = {
     direction: 'top',
     hoverEnabled: true,
@@ -9262,7 +9378,7 @@ class Waves {
 }
 
 /* eslint-disable @typescript-eslint/no-unused-vars */
-const version = '2.3.3-1.0.20';
+const version = '2.3.3-1.0.21';
 /**
  * Convenience helper matching v1's `M.toast({...})` call, since Toast is a
  * class in v2 with no bare functional equivalent of its own.
@@ -9278,6 +9394,7 @@ function toast(options) {
 function AutoInit(context = document.body, options) {
     const registry = {
         Alert: context.querySelectorAll('.alert:not(.no-autoinit)'),
+        Kanban: context.querySelectorAll('.kanban-board:not(.no-autoinit)'),
         Autocomplete: context.querySelectorAll('.autocomplete:not(.no-autoinit)'),
         Cards: context.querySelectorAll('.cards:not(.no-autoinit)'),
         Carousel: context.querySelectorAll('.carousel:not(.no-autoinit)'),
@@ -9311,6 +9428,7 @@ function AutoInit(context = document.body, options) {
     };
     Autocomplete.init(registry.Autocomplete, options?.Autocomplete ?? {});
     Alert.init(registry.Alert, options?.Alert ?? {});
+    Kanban.init(registry.Kanban, options?.Kanban ?? {});
     Cards.init(registry.Cards, options?.Cards ?? {});
     Carousel.init(registry.Carousel, options?.Carousel ?? {});
     Chips.init(registry.Chips, options?.Chips ?? {});
@@ -9350,4 +9468,4 @@ Waves.Init();
 Range.Init();
 Cards.Init();
 
-export { AirDatepickerField, Alert, AutoInit, Autocomplete, Cards, Carousel, CharacterCounter, Chips, Collapsible, ColorInput, Datepicker, Dropdown, FileInput, FloatingActionButton, FormSelect, Forms, Materialbox, Modal, NumberInput, Parallax, PasswordInput, Pushpin, Range, ScrollSpy, Sidenav, Slider, Tabs, TapTarget, Timepicker, Toast, TomSelectField, Toolbar, Tooltip, Waves, toast, version };
+export { AirDatepickerField, Alert, AutoInit, Autocomplete, Cards, Carousel, CharacterCounter, Chips, Collapsible, ColorInput, Datepicker, Dropdown, FileInput, FloatingActionButton, FormSelect, Forms, Kanban, Materialbox, Modal, NumberInput, Parallax, PasswordInput, Pushpin, Range, ScrollSpy, Sidenav, Slider, Tabs, TapTarget, Timepicker, Toast, TomSelectField, Toolbar, Tooltip, Waves, toast, version };

package/package.json

@@ -3,7 +3,7 @@
   "description": "The responsive front-end library based on Material Design from Google.",
   "author": "The Materialize Team",
   "homepage": "https://materialize.kevinzarshenas.com",
-  "version": "2.3.3-1.0.20",
+  "version": "2.3.3-1.0.21",
   "style": "dist/css/materialize.css",
   "sass": "sass/materialize.scss",
   "typings": "dist/js/materialize.d.ts",

package/sass/materialize.scss

@@ -19,6 +19,7 @@
 
 @forward '../components/button/buttons';
 @forward '../components/alert/alerts';
+@forward '../components/kanban/kanban';
 @forward '../components/collapsible/collapsible'; // custom
 @forward '../components/badge/badges';
 @forward '../components/card/cards';