release: 6.2.0

This commit is contained in:
Grzegorz Bujański 2023-02-27 10:34:05 +01:00
parent d4120a54b3
commit e5a3fad625
12 changed files with 139 additions and 27 deletions

View File

@ -1,5 +1,5 @@
MDB5 MDB5
Version: FREE 6.1.0 Version: FREE 6.2.0
Documentation: Documentation:
https://mdbootstrap.com/docs/standard/ https://mdbootstrap.com/docs/standard/

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

2
css/mdb.min.css vendored
View File

@ -1,6 +1,6 @@
/*! /*!
* MDB5 * MDB5
* Version: FREE 6.1.0 * Version: FREE 6.2.0
* *
* *
* Copyright: Material Design for Bootstrap * Copyright: Material Design for Bootstrap

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

4
js/mdb.min.js vendored

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -1,6 +1,6 @@
{ {
"name": "mdb-ui-kit", "name": "mdb-ui-kit",
"version": "6.1.0", "version": "6.2.0",
"main": "js/mdb.min.js", "main": "js/mdb.min.js",
"homepage": "https://mdbootstrap.com/docs/standard/", "homepage": "https://mdbootstrap.com/docs/standard/",
"repository": "https://github.com/mdbootstrap/mdb-ui-kit.git", "repository": "https://github.com/mdbootstrap/mdb-ui-kit.git",

115
src/js/free/collapse.js Normal file
View File

@ -0,0 +1,115 @@
import { getjQuery, onDOMContentLoaded } from '../mdb/util/index';
import EventHandler from '../mdb/dom/event-handler';
import SelectorEngine from '../mdb/dom/selector-engine';
import BSCollapse from '../bootstrap/mdb-prefix/collapse';
/**
* ------------------------------------------------------------------------
* Constants
* ------------------------------------------------------------------------
*/
const NAME = 'collapse';
const DATA_KEY = `mdb.${NAME}`;
const EVENT_KEY = `.${DATA_KEY}`;
const EVENT_SHOW_BS = 'show.bs.collapse';
const EVENT_SHOWN_BS = 'shown.bs.collapse';
const EVENT_HIDE_BS = 'hide.bs.collapse';
const EVENT_HIDDEN_BS = 'hidden.bs.collapse';
const EVENT_SHOW = `show${EVENT_KEY}`;
const EVENT_SHOWN = `shown${EVENT_KEY}`;
const EVENT_HIDE = `hide${EVENT_KEY}`;
const EVENT_HIDDEN = `hidden${EVENT_KEY}`;
const SELECTOR_DATA_TOGGLE = '[data-mdb-toggle="collapse"]';
class Collapse extends BSCollapse {
constructor(element, data = {}) {
super(element, data);
this._init();
}
dispose() {
EventHandler.off(this._element, EVENT_SHOW_BS);
EventHandler.off(this._element, EVENT_SHOWN_BS);
EventHandler.off(this._element, EVENT_HIDE_BS);
EventHandler.off(this._element, EVENT_HIDDEN_BS);
super.dispose();
}
// Getters
static get NAME() {
return NAME;
}
// Private
_init() {
this._bindShowEvent();
this._bindShownEvent();
this._bindHideEvent();
this._bindHiddenEvent();
}
_bindShowEvent() {
EventHandler.on(this._element, EVENT_SHOW_BS, () => {
EventHandler.trigger(this._element, EVENT_SHOW);
});
}
_bindShownEvent() {
EventHandler.on(this._element, EVENT_SHOWN_BS, () => {
EventHandler.trigger(this._element, EVENT_SHOWN);
});
}
_bindHideEvent() {
EventHandler.on(this._element, EVENT_HIDE_BS, () => {
EventHandler.trigger(this._element, EVENT_HIDE);
});
}
_bindHiddenEvent() {
EventHandler.on(this._element, EVENT_HIDDEN_BS, () => {
EventHandler.trigger(this._element, EVENT_HIDDEN);
});
}
}
/**
* ------------------------------------------------------------------------
* Data Api implementation - auto initialization
* ------------------------------------------------------------------------
*/
SelectorEngine.find(SELECTOR_DATA_TOGGLE).forEach((el) => {
let instance = Collapse.getInstance(el);
if (!instance) {
instance = new Collapse(el, { toggle: false });
}
});
/**
* ------------------------------------------------------------------------
* jQuery
* ------------------------------------------------------------------------
* add .rating to jQuery only if jQuery is present
*/
onDOMContentLoaded(() => {
const $ = getjQuery();
if ($) {
const JQUERY_NO_CONFLICT = $.fn[NAME];
$.fn[NAME] = Collapse.jQueryInterface;
$.fn[NAME].Constructor = Collapse;
$.fn[NAME].noConflict = () => {
$.fn[NAME] = JQUERY_NO_CONFLICT;
return Collapse.jQueryInterface;
};
}
});
export default Collapse;

View File

@ -18,6 +18,7 @@ const CLASSNAME_ACTIVE = 'thumb-active';
const CLASSNAME_THUMB_VALUE = 'thumb-value'; const CLASSNAME_THUMB_VALUE = 'thumb-value';
const SELECTOR_THUMB_VALUE = `.${CLASSNAME_THUMB_VALUE}`; const SELECTOR_THUMB_VALUE = `.${CLASSNAME_THUMB_VALUE}`;
const SELECTOR_THUMB = `.${CLASSNAME_THUMB}`;
const SELECTOR_WRAPPER = `.${CLASSNAME_WRAPPER}`; const SELECTOR_WRAPPER = `.${CLASSNAME_WRAPPER}`;
/** /**
@ -30,6 +31,7 @@ class Range {
constructor(element) { constructor(element) {
this._element = element; this._element = element;
this._initiated = false; this._initiated = false;
this._thumb = null;
if (this._element) { if (this._element) {
Data.setData(element, DATA_KEY, this); Data.setData(element, DATA_KEY, this);
@ -52,8 +54,7 @@ class Range {
return; return;
} }
this._addThumb(); this._addThumb();
this._updateValue(); this._thumbUpdate();
this._thumbPositionUpdate();
this._handleEvents(); this._handleEvents();
this._initiated = true; this._initiated = true;
} }
@ -62,6 +63,7 @@ class Range {
this._disposeEvents(); this._disposeEvents();
Data.removeData(this._element, DATA_KEY); Data.removeData(this._element, DATA_KEY);
this._element = null; this._element = null;
this._thumb = null;
} }
// Private // Private
@ -70,12 +72,7 @@ class Range {
Manipulator.addClass(RANGE_THUMB, CLASSNAME_THUMB); Manipulator.addClass(RANGE_THUMB, CLASSNAME_THUMB);
RANGE_THUMB.innerHTML = '<span class="thumb-value"></span>'; RANGE_THUMB.innerHTML = '<span class="thumb-value"></span>';
this._element.append(RANGE_THUMB); this._element.append(RANGE_THUMB);
} this._thumb = SelectorEngine.findOne(SELECTOR_THUMB, this._element);
_updateValue() {
const thumbValue = SelectorEngine.findOne(SELECTOR_THUMB_VALUE, this._element);
thumbValue.textContent = this.rangeInput.value;
this.rangeInput.oninput = () => (thumbValue.textContent = this.rangeInput.value);
} }
_handleEvents() { _handleEvents() {
@ -83,7 +80,7 @@ class Range {
EventHandler.on(this.rangeInput, 'mouseup', () => this._hideThumb()); EventHandler.on(this.rangeInput, 'mouseup', () => this._hideThumb());
EventHandler.on(this.rangeInput, 'touchstart', () => this._showThumb()); EventHandler.on(this.rangeInput, 'touchstart', () => this._showThumb());
EventHandler.on(this.rangeInput, 'touchend', () => this._hideThumb()); EventHandler.on(this.rangeInput, 'touchend', () => this._hideThumb());
EventHandler.on(this.rangeInput, 'input', () => this._thumbPositionUpdate()); EventHandler.on(this.rangeInput, 'input', () => this._thumbUpdate());
} }
_disposeEvents() { _disposeEvents() {
@ -91,26 +88,26 @@ class Range {
EventHandler.off(this.rangeInput, 'mouseup', this._hideThumb); EventHandler.off(this.rangeInput, 'mouseup', this._hideThumb);
EventHandler.off(this.rangeInput, 'touchstart', this._showThumb); EventHandler.off(this.rangeInput, 'touchstart', this._showThumb);
EventHandler.off(this.rangeInput, 'touchend', this._hideThumb); EventHandler.off(this.rangeInput, 'touchend', this._hideThumb);
EventHandler.off(this.rangeInput, 'input', this._thumbPositionUpdate); EventHandler.off(this.rangeInput, 'input', this._thumbUpdate);
} }
_showThumb() { _showThumb() {
Manipulator.addClass(this._element.lastElementChild, CLASSNAME_ACTIVE); Manipulator.addClass(this._thumb, CLASSNAME_ACTIVE);
} }
_hideThumb() { _hideThumb() {
Manipulator.removeClass(this._element.lastElementChild, CLASSNAME_ACTIVE); Manipulator.removeClass(this._thumb, CLASSNAME_ACTIVE);
} }
_thumbPositionUpdate() { _thumbUpdate() {
const rangeInput = this.rangeInput; const rangeInput = this.rangeInput;
const inputValue = rangeInput.value; const inputValue = rangeInput.value;
const minValue = rangeInput.min ? rangeInput.min : 0; const minValue = rangeInput.min ? rangeInput.min : 0;
const maxValue = rangeInput.max ? rangeInput.max : 100; const maxValue = rangeInput.max ? rangeInput.max : 100;
const thumb = this._element.lastElementChild; const thumbValue = SelectorEngine.findOne(SELECTOR_THUMB_VALUE, this._thumb);
thumbValue.textContent = inputValue;
const newValue = Number(((inputValue - minValue) * 100) / (maxValue - minValue)); const newValue = Number(((inputValue - minValue) * 100) / (maxValue - minValue));
thumb.firstElementChild.textContent = inputValue; Manipulator.style(this._thumb, { left: `calc(${newValue}% + (${8 - newValue * 0.15}px))` });
Manipulator.style(thumb, { left: `calc(${newValue}% + (${8 - newValue * 0.15}px))` });
} }
// Static // Static

View File

@ -1,6 +1,5 @@
// BOOTSTRAP CORE COMPONENTS // BOOTSTRAP CORE COMPONENTS
import Button from './free/button'; import Button from './free/button';
import Collapse from './bootstrap/mdb-prefix/collapse';
import Offcanvas from './bootstrap/mdb-prefix/offcanvas'; import Offcanvas from './bootstrap/mdb-prefix/offcanvas';
import Alert from './free/alert'; import Alert from './free/alert';
import Carousel from './free/carousel'; import Carousel from './free/carousel';
@ -13,6 +12,7 @@ import Toast from './free/toast';
// MDB FREE COMPONENTS // MDB FREE COMPONENTS
import Input from './free/input'; import Input from './free/input';
import Collapse from './free/collapse';
import Dropdown from './free/dropdown'; import Dropdown from './free/dropdown';
import Ripple from './free/ripple'; import Ripple from './free/ripple';
import Range from './free/range'; import Range from './free/range';