mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2024-11-10 19:57:13 +03:00
release: 6.4.0
This commit is contained in:
parent
0709614f1d
commit
942ba0f7d1
|
@ -1,5 +1,5 @@
|
||||||
MDB5
|
MDB5
|
||||||
Version: FREE 6.3.1
|
Version: FREE 6.4.0
|
||||||
|
|
||||||
Documentation:
|
Documentation:
|
||||||
https://mdbootstrap.com/docs/standard/
|
https://mdbootstrap.com/docs/standard/
|
||||||
|
|
4
css/mdb.dark.min.css
vendored
4
css/mdb.dark.min.css
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
4
css/mdb.dark.rtl.min.css
vendored
4
css/mdb.dark.rtl.min.css
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
6
css/mdb.min.css
vendored
6
css/mdb.min.css
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
4
css/mdb.rtl.min.css
vendored
4
css/mdb.rtl.min.css
vendored
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
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
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "mdb-ui-kit",
|
"name": "mdb-ui-kit",
|
||||||
"version": "6.3.1",
|
"version": "6.4.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",
|
||||||
|
|
|
@ -269,7 +269,7 @@ class Dropdown extends BaseComponent {
|
||||||
}
|
}
|
||||||
|
|
||||||
// We need to trim the value because custom properties can also include spaces
|
// We need to trim the value because custom properties can also include spaces
|
||||||
const isEnd = getComputedStyle(this._menu).getPropertyValue('--bs-position').trim() === 'end';
|
const isEnd = getComputedStyle(this._menu).getPropertyValue('--mdb-position').trim() === 'end';
|
||||||
|
|
||||||
if (parentDropdown.classList.contains(CLASS_NAME_DROPUP)) {
|
if (parentDropdown.classList.contains(CLASS_NAME_DROPUP)) {
|
||||||
return isEnd ? PLACEMENT_TOPEND : PLACEMENT_TOP;
|
return isEnd ? PLACEMENT_TOPEND : PLACEMENT_TOP;
|
||||||
|
|
|
@ -10,14 +10,11 @@ import BSAlert from '../bootstrap/mdb-prefix/alert';
|
||||||
*/
|
*/
|
||||||
|
|
||||||
const NAME = 'alert';
|
const NAME = 'alert';
|
||||||
const DATA_KEY = `mdb.${NAME}`;
|
|
||||||
const EVENT_KEY = `.${DATA_KEY}`;
|
|
||||||
|
|
||||||
const EVENT_CLOSE_BS = 'close.bs.alert';
|
const EVENT_CLOSE_BS = 'close.bs.alert';
|
||||||
const EVENT_CLOSED_BS = 'closed.bs.alert';
|
const EVENT_CLOSED_BS = 'closed.bs.alert';
|
||||||
|
|
||||||
const EVENT_CLOSE = `close${EVENT_KEY}`;
|
const EXTENDED_EVENTS = [{ name: 'close' }, { name: 'closed' }];
|
||||||
const EVENT_CLOSED = `closed${EVENT_KEY}`;
|
|
||||||
|
|
||||||
const SELECTOR_ALERT = '.alert';
|
const SELECTOR_ALERT = '.alert';
|
||||||
|
|
||||||
|
@ -42,20 +39,11 @@ class Alert extends BSAlert {
|
||||||
|
|
||||||
// Private
|
// Private
|
||||||
_init() {
|
_init() {
|
||||||
this._bindCloseEvent();
|
this._bindMdbEvents();
|
||||||
this._bindClosedEvent();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
_bindCloseEvent() {
|
_bindMdbEvents() {
|
||||||
EventHandler.on(this._element, EVENT_CLOSE_BS, () => {
|
EventHandler.extend(this._element, EXTENDED_EVENTS, NAME);
|
||||||
EventHandler.trigger(this._element, EVENT_CLOSE);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
_bindClosedEvent() {
|
|
||||||
EventHandler.on(this._element, EVENT_CLOSED_BS, () => {
|
|
||||||
EventHandler.trigger(this._element, EVENT_CLOSED);
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -11,14 +11,14 @@ import BSCarousel from '../bootstrap/mdb-prefix/carousel';
|
||||||
*/
|
*/
|
||||||
|
|
||||||
const NAME = 'carousel';
|
const NAME = 'carousel';
|
||||||
const DATA_KEY = `mdb.${NAME}`;
|
|
||||||
const EVENT_KEY = `.${DATA_KEY}`;
|
|
||||||
|
|
||||||
const EVENT_SLIDE_BS = 'slide.bs.carousel';
|
const EVENT_SLIDE_BS = 'slide.bs.carousel';
|
||||||
const EVENT_SLID_BS = 'slid.bs.carousel';
|
const EVENT_SLID_BS = 'slid.bs.carousel';
|
||||||
|
|
||||||
const EVENT_SLIDE = `slide${EVENT_KEY}`;
|
const EXTENDED_EVENTS = [
|
||||||
const EVENT_SLID = `slid${EVENT_KEY}`;
|
{ name: 'slide', parametersToCopy: ['relatedTarget', 'direction', 'from', 'to'] },
|
||||||
|
{ name: 'slid', parametersToCopy: ['relatedTarget', 'direction', 'from', 'to'] },
|
||||||
|
];
|
||||||
|
|
||||||
const SELECTOR_DATA_RIDE = '[data-mdb-ride="carousel"]';
|
const SELECTOR_DATA_RIDE = '[data-mdb-ride="carousel"]';
|
||||||
|
|
||||||
|
@ -43,30 +43,11 @@ class Carousel extends BSCarousel {
|
||||||
|
|
||||||
// Private
|
// Private
|
||||||
_init() {
|
_init() {
|
||||||
this._bindSlideEvent();
|
this._bindMdbEvents();
|
||||||
this._bindSlidEvent();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
_bindSlideEvent() {
|
_bindMdbEvents() {
|
||||||
EventHandler.on(this._element, EVENT_SLIDE_BS, (e) => {
|
EventHandler.extend(this._element, EXTENDED_EVENTS, NAME);
|
||||||
EventHandler.trigger(this._element, EVENT_SLIDE, {
|
|
||||||
relatedTarget: e.relatedTarget,
|
|
||||||
direction: e.direction,
|
|
||||||
from: e.from,
|
|
||||||
to: e.to,
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
_bindSlidEvent() {
|
|
||||||
EventHandler.on(this._element, EVENT_SLID_BS, (e) => {
|
|
||||||
EventHandler.trigger(this._element, EVENT_SLID, {
|
|
||||||
relatedTarget: e.relatedTarget,
|
|
||||||
direction: e.direction,
|
|
||||||
from: e.from,
|
|
||||||
to: e.to,
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -10,18 +10,13 @@ import BSCollapse from '../bootstrap/mdb-prefix/collapse';
|
||||||
*/
|
*/
|
||||||
|
|
||||||
const NAME = 'collapse';
|
const NAME = 'collapse';
|
||||||
const DATA_KEY = `mdb.${NAME}`;
|
|
||||||
const EVENT_KEY = `.${DATA_KEY}`;
|
|
||||||
|
|
||||||
const EVENT_SHOW_BS = 'show.bs.collapse';
|
const EVENT_SHOW_BS = 'show.bs.collapse';
|
||||||
const EVENT_SHOWN_BS = 'shown.bs.collapse';
|
const EVENT_SHOWN_BS = 'shown.bs.collapse';
|
||||||
const EVENT_HIDE_BS = 'hide.bs.collapse';
|
const EVENT_HIDE_BS = 'hide.bs.collapse';
|
||||||
const EVENT_HIDDEN_BS = 'hidden.bs.collapse';
|
const EVENT_HIDDEN_BS = 'hidden.bs.collapse';
|
||||||
|
|
||||||
const EVENT_SHOW = `show${EVENT_KEY}`;
|
const EXTENDED_EVENTS = [{ name: 'show' }, { name: 'shown' }, { name: 'hide' }, { name: 'hidden' }];
|
||||||
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"]';
|
const SELECTOR_DATA_TOGGLE = '[data-mdb-toggle="collapse"]';
|
||||||
|
|
||||||
|
@ -48,34 +43,11 @@ class Collapse extends BSCollapse {
|
||||||
|
|
||||||
// Private
|
// Private
|
||||||
_init() {
|
_init() {
|
||||||
this._bindShowEvent();
|
this._bindMdbEvents();
|
||||||
this._bindShownEvent();
|
|
||||||
this._bindHideEvent();
|
|
||||||
this._bindHiddenEvent();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
_bindShowEvent() {
|
_bindMdbEvents() {
|
||||||
EventHandler.on(this._element, EVENT_SHOW_BS, () => {
|
EventHandler.extend(this._element, EXTENDED_EVENTS, NAME);
|
||||||
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);
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -10,8 +10,6 @@ import BSModal from '../bootstrap/mdb-prefix/modal';
|
||||||
*/
|
*/
|
||||||
|
|
||||||
const NAME = 'modal';
|
const NAME = 'modal';
|
||||||
const DATA_KEY = `mdb.${NAME}`;
|
|
||||||
const EVENT_KEY = `.${DATA_KEY}`;
|
|
||||||
|
|
||||||
const EVENT_HIDE_BS = 'hide.bs.modal';
|
const EVENT_HIDE_BS = 'hide.bs.modal';
|
||||||
const EVENT_HIDE_PREVENTED_BS = 'hidePrevented.bs.modal';
|
const EVENT_HIDE_PREVENTED_BS = 'hidePrevented.bs.modal';
|
||||||
|
@ -19,11 +17,13 @@ const EVENT_HIDDEN_BS = 'hidden.bs.modal';
|
||||||
const EVENT_SHOW_BS = 'show.bs.modal';
|
const EVENT_SHOW_BS = 'show.bs.modal';
|
||||||
const EVENT_SHOWN_BS = 'shown.bs.modal';
|
const EVENT_SHOWN_BS = 'shown.bs.modal';
|
||||||
|
|
||||||
const EVENT_HIDE = `hide${EVENT_KEY}`;
|
const EXTENDED_EVENTS = [
|
||||||
const EVENT_HIDE_PREVENTED = `hidePrevented${EVENT_KEY}`;
|
{ name: 'show', parametersToCopy: ['relatedTarget'] },
|
||||||
const EVENT_HIDDEN = `hidden${EVENT_KEY}`;
|
{ name: 'shown', parametersToCopy: ['relatedTarget'] },
|
||||||
const EVENT_SHOW = `show${EVENT_KEY}`;
|
{ name: 'hide' },
|
||||||
const EVENT_SHOWN = `shown${EVENT_KEY}`;
|
{ name: 'hidePrevented' },
|
||||||
|
{ name: 'hidden' },
|
||||||
|
];
|
||||||
|
|
||||||
const SELECTOR_DATA_TOGGLE = '[data-mdb-toggle="modal"]';
|
const SELECTOR_DATA_TOGGLE = '[data-mdb-toggle="modal"]';
|
||||||
|
|
||||||
|
@ -51,41 +51,11 @@ class Modal extends BSModal {
|
||||||
|
|
||||||
// Private
|
// Private
|
||||||
_init() {
|
_init() {
|
||||||
this._bindShowEvent();
|
this._bindMdbEvents();
|
||||||
this._bindShownEvent();
|
|
||||||
this._bindHideEvent();
|
|
||||||
this._bindHiddenEvent();
|
|
||||||
this._bindHidePreventedEvent();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
_bindShowEvent() {
|
_bindMdbEvents() {
|
||||||
EventHandler.on(this._element, EVENT_SHOW_BS, (e) => {
|
EventHandler.extend(this._element, EXTENDED_EVENTS, NAME);
|
||||||
EventHandler.trigger(this._element, EVENT_SHOW, { relatedTarget: e.relatedTarget });
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
_bindShownEvent() {
|
|
||||||
EventHandler.on(this._element, EVENT_SHOWN_BS, (e) => {
|
|
||||||
EventHandler.trigger(this._element, EVENT_SHOWN, { relatedTarget: e.relatedTarget });
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
_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);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
_bindHidePreventedEvent() {
|
|
||||||
EventHandler.on(this._element, EVENT_HIDE_PREVENTED_BS, () => {
|
|
||||||
EventHandler.trigger(this._element, EVENT_HIDE_PREVENTED);
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -10,8 +10,6 @@ import BSPopover from '../bootstrap/mdb-prefix/popover';
|
||||||
*/
|
*/
|
||||||
|
|
||||||
const NAME = 'popover';
|
const NAME = 'popover';
|
||||||
const DATA_KEY = `mdb.${NAME}`;
|
|
||||||
const EVENT_KEY = `.${DATA_KEY}`;
|
|
||||||
|
|
||||||
const EVENT_SHOW_BS = 'show.bs.popover';
|
const EVENT_SHOW_BS = 'show.bs.popover';
|
||||||
const EVENT_SHOWN_BS = 'shown.bs.popover';
|
const EVENT_SHOWN_BS = 'shown.bs.popover';
|
||||||
|
@ -19,11 +17,13 @@ const EVENT_HIDE_BS = 'hide.bs.popover';
|
||||||
const EVENT_HIDDEN_BS = 'hidden.bs.popover';
|
const EVENT_HIDDEN_BS = 'hidden.bs.popover';
|
||||||
const EVENT_INSERTED_BS = 'inserted.bs.popover';
|
const EVENT_INSERTED_BS = 'inserted.bs.popover';
|
||||||
|
|
||||||
const EVENT_SHOW = `show${EVENT_KEY}`;
|
const EXTENDED_EVENTS = [
|
||||||
const EVENT_SHOWN = `shown${EVENT_KEY}`;
|
{ name: 'show' },
|
||||||
const EVENT_HIDE = `hide${EVENT_KEY}`;
|
{ name: 'shown' },
|
||||||
const EVENT_HIDDEN = `hidden${EVENT_KEY}`;
|
{ name: 'hide' },
|
||||||
const EVENT_INSERTED = `inserted${EVENT_KEY}`;
|
{ name: 'hidden' },
|
||||||
|
{ name: 'inserted' },
|
||||||
|
];
|
||||||
|
|
||||||
const SELECTOR_DATA_TOGGLE = '[data-mdb-toggle="popover"]';
|
const SELECTOR_DATA_TOGGLE = '[data-mdb-toggle="popover"]';
|
||||||
|
|
||||||
|
@ -51,41 +51,11 @@ class Popover extends BSPopover {
|
||||||
|
|
||||||
// Private
|
// Private
|
||||||
_init() {
|
_init() {
|
||||||
this._bindShowEvent();
|
this._bindMdbEvents();
|
||||||
this._bindShownEvent();
|
|
||||||
this._bindHideEvent();
|
|
||||||
this._bindHiddenEvent();
|
|
||||||
this._bindInsertedEvent();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
_bindShowEvent() {
|
_bindMdbEvents() {
|
||||||
EventHandler.on(this.element, EVENT_SHOW_BS, () => {
|
EventHandler.extend(this._element, EXTENDED_EVENTS, NAME);
|
||||||
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);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
_bindInsertedEvent() {
|
|
||||||
EventHandler.on(this.element, EVENT_INSERTED_BS, () => {
|
|
||||||
EventHandler.trigger(this.element, EVENT_INSERTED);
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -165,6 +165,10 @@ class Ripple {
|
||||||
}
|
}
|
||||||
|
|
||||||
_createRipple(event) {
|
_createRipple(event) {
|
||||||
|
if (this._element === null) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
if (!Manipulator.hasClass(this._element, CLASSNAME_RIPPLE)) {
|
if (!Manipulator.hasClass(this._element, CLASSNAME_RIPPLE)) {
|
||||||
Manipulator.addClass(this._element, CLASSNAME_RIPPLE);
|
Manipulator.addClass(this._element, CLASSNAME_RIPPLE);
|
||||||
}
|
}
|
||||||
|
|
|
@ -10,18 +10,13 @@ import BSToast from '../bootstrap/mdb-prefix/toast';
|
||||||
*/
|
*/
|
||||||
|
|
||||||
const NAME = 'toast';
|
const NAME = 'toast';
|
||||||
const DATA_KEY = `mdb.${NAME}`;
|
|
||||||
const EVENT_KEY = `.${DATA_KEY}`;
|
|
||||||
|
|
||||||
const EVENT_SHOW_BS = 'show.bs.toast';
|
const EVENT_SHOW_BS = 'show.bs.toast';
|
||||||
const EVENT_SHOWN_BS = 'shown.bs.toast';
|
const EVENT_SHOWN_BS = 'shown.bs.toast';
|
||||||
const EVENT_HIDE_BS = 'hide.bs.toast';
|
const EVENT_HIDE_BS = 'hide.bs.toast';
|
||||||
const EVENT_HIDDEN_BS = 'hidden.bs.toast';
|
const EVENT_HIDDEN_BS = 'hidden.bs.toast';
|
||||||
|
|
||||||
const EVENT_SHOW = `show${EVENT_KEY}`;
|
const EXTENDED_EVENTS = [{ name: 'show' }, { name: 'shown' }, { name: 'hide' }, { name: 'hidden' }];
|
||||||
const EVENT_SHOWN = `shown${EVENT_KEY}`;
|
|
||||||
const EVENT_HIDE = `hide${EVENT_KEY}`;
|
|
||||||
const EVENT_HIDDEN = `hidden${EVENT_KEY}`;
|
|
||||||
|
|
||||||
const SELECTOR_TOAST = '.toast';
|
const SELECTOR_TOAST = '.toast';
|
||||||
|
|
||||||
|
@ -48,34 +43,11 @@ class Toast extends BSToast {
|
||||||
|
|
||||||
// Private
|
// Private
|
||||||
_init() {
|
_init() {
|
||||||
this._bindShowEvent();
|
this._bindMdbEvents();
|
||||||
this._bindShownEvent();
|
|
||||||
this._bindHideEvent();
|
|
||||||
this._bindHiddenEvent();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
_bindShowEvent() {
|
_bindMdbEvents() {
|
||||||
EventHandler.on(this._element, EVENT_SHOW_BS, () => {
|
EventHandler.extend(this._element, EXTENDED_EVENTS, NAME);
|
||||||
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);
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -10,8 +10,6 @@ import SelectorEngine from '../mdb/dom/selector-engine';
|
||||||
*/
|
*/
|
||||||
|
|
||||||
const NAME = 'tooltip';
|
const NAME = 'tooltip';
|
||||||
const DATA_KEY = `mdb.${NAME}`;
|
|
||||||
const EVENT_KEY = `.${DATA_KEY}`;
|
|
||||||
|
|
||||||
const EVENT_HIDE_BS = 'hide.bs.tooltip';
|
const EVENT_HIDE_BS = 'hide.bs.tooltip';
|
||||||
const EVENT_HIDDEN_BS = 'hidden.bs.tooltip';
|
const EVENT_HIDDEN_BS = 'hidden.bs.tooltip';
|
||||||
|
@ -19,11 +17,13 @@ const EVENT_SHOW_BS = 'show.bs.tooltip';
|
||||||
const EVENT_SHOWN_BS = 'shown.bs.tooltip';
|
const EVENT_SHOWN_BS = 'shown.bs.tooltip';
|
||||||
const EVENT_INSERTED_BS = 'inserted.bs.tooltip';
|
const EVENT_INSERTED_BS = 'inserted.bs.tooltip';
|
||||||
|
|
||||||
const EVENT_HIDE = `hide${EVENT_KEY}`;
|
const EXTENDED_EVENTS = [
|
||||||
const EVENT_HIDDEN = `hidden${EVENT_KEY}`;
|
{ name: 'show' },
|
||||||
const EVENT_SHOW = `show${EVENT_KEY}`;
|
{ name: 'shown' },
|
||||||
const EVENT_SHOWN = `shown${EVENT_KEY}`;
|
{ name: 'hide' },
|
||||||
const EVENT_INSERTED = `inserted${EVENT_KEY}`;
|
{ name: 'hidden' },
|
||||||
|
{ name: 'inserted' },
|
||||||
|
];
|
||||||
|
|
||||||
const SELECTOR_DATA_TOGGLE = '[data-mdb-toggle="tooltip"]';
|
const SELECTOR_DATA_TOGGLE = '[data-mdb-toggle="tooltip"]';
|
||||||
|
|
||||||
|
@ -51,41 +51,11 @@ class Tooltip extends BSTooltip {
|
||||||
|
|
||||||
// Private
|
// Private
|
||||||
_init() {
|
_init() {
|
||||||
this._bindShowEvent();
|
this._bindMdbEvents();
|
||||||
this._bindShownEvent();
|
|
||||||
this._bindHideEvent();
|
|
||||||
this._bindHiddenEvent();
|
|
||||||
this._bindHidePreventedEvent();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
_bindShowEvent() {
|
_bindMdbEvents() {
|
||||||
EventHandler.on(this.element, EVENT_SHOW_BS, () => {
|
EventHandler.extend(this._element, EXTENDED_EVENTS, NAME);
|
||||||
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);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
_bindHidePreventedEvent() {
|
|
||||||
EventHandler.on(this.element, EVENT_INSERTED_BS, () => {
|
|
||||||
EventHandler.trigger(this.element, EVENT_INSERTED);
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -232,6 +232,20 @@ const EventHandler = {
|
||||||
addHandler(element, event, handler, delegationFn, true);
|
addHandler(element, event, handler, delegationFn, true);
|
||||||
},
|
},
|
||||||
|
|
||||||
|
extend(element, events, componentName) {
|
||||||
|
events.forEach((event) => {
|
||||||
|
EventHandler.on(element, `${event.name}.bs.${componentName}`, (e) => {
|
||||||
|
const eventParameters = {};
|
||||||
|
if (event.parametersToCopy) {
|
||||||
|
event.parametersToCopy.forEach((param) => {
|
||||||
|
eventParameters[param] = e[param];
|
||||||
|
});
|
||||||
|
}
|
||||||
|
EventHandler.trigger(element, `${event.name}.mdb.${componentName}`, eventParameters);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
off(element, originalTypeEvent, handler, delegationFn) {
|
off(element, originalTypeEvent, handler, delegationFn) {
|
||||||
if (typeof originalTypeEvent !== 'string' || !element) {
|
if (typeof originalTypeEvent !== 'string' || !element) {
|
||||||
return;
|
return;
|
||||||
|
|
|
@ -165,6 +165,7 @@
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// scss-docs-end btn-secondary
|
// scss-docs-end btn-secondary
|
||||||
|
|
||||||
// scss-docs-start btn-variant-loop
|
// scss-docs-start btn-variant-loop
|
||||||
|
@ -182,25 +183,22 @@
|
||||||
map-get($value, 'text-color')
|
map-get($value, 'text-color')
|
||||||
);
|
);
|
||||||
|
|
||||||
|
--#{$prefix}btn-box-shadow-state: #{$btn-contextual-box-shadow-state-first-part
|
||||||
|
rgba(map-get($value, shadow-color), 0.3),
|
||||||
|
$btn-contextual-box-shadow-state-second-part rgba(map-get($value, shadow-color), 0.2)};
|
||||||
|
|
||||||
:not(.btn-check) + &:hover,
|
:not(.btn-check) + &:hover,
|
||||||
&:first-child:hover,
|
&:first-child:hover,
|
||||||
&:focus-visible,
|
&:focus-visible,
|
||||||
&:hover {
|
&:hover {
|
||||||
box-shadow: $btn-contextual-box-shadow-state-first-part
|
box-shadow: var(--#{$prefix}btn-box-shadow-state);
|
||||||
rgba(map-get($value, shadow-color), 0.3),
|
|
||||||
$btn-contextual-box-shadow-state-second-part rgba(map-get($value, shadow-color), 0.2);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-check:focus-visible + &,
|
.btn-check:focus-visible + &,
|
||||||
.btn-check:focus + &,
|
.btn-check:focus + &,
|
||||||
&:focus {
|
&:focus {
|
||||||
box-shadow: $btn-contextual-box-shadow-state-first-part
|
box-shadow: var(--#{$prefix}btn-box-shadow-state);
|
||||||
rgba(map-get($value, shadow-color), 0.3),
|
background-color: var(--#{$prefix}btn-focus-bg);
|
||||||
$btn-contextual-box-shadow-state-second-part rgba(map-get($value, shadow-color), 0.2);
|
|
||||||
background-color: shade-color(
|
|
||||||
map-get($value, 'background-color'),
|
|
||||||
$btn-focus-bg-shade-amount
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-check:checked + &,
|
.btn-check:checked + &,
|
||||||
|
@ -208,31 +206,25 @@
|
||||||
&:active,
|
&:active,
|
||||||
&.active,
|
&.active,
|
||||||
&.show {
|
&.show {
|
||||||
box-shadow: $btn-contextual-box-shadow-state-first-part
|
box-shadow: var(--#{$prefix}btn-box-shadow-state);
|
||||||
rgba(map-get($value, shadow-color), 0.3),
|
|
||||||
$btn-contextual-box-shadow-state-second-part rgba(map-get($value, shadow-color), 0.2);
|
|
||||||
|
|
||||||
&:focus {
|
&:focus {
|
||||||
box-shadow: $btn-contextual-box-shadow-state-first-part
|
box-shadow: var(--#{$prefix}btn-box-shadow-state);
|
||||||
rgba(map-get($value, shadow-color), 0.3),
|
|
||||||
$btn-contextual-box-shadow-state-second-part rgba(map-get($value, shadow-color), 0.2);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: shade-color(
|
background-color: var(--#{$prefix}btn-active-bg);
|
||||||
map-get($value, 'background-color'),
|
|
||||||
$btn-active-bg-shade-amount
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&:disabled,
|
&:disabled,
|
||||||
&.disabled,
|
&.disabled,
|
||||||
fieldset:disabled & {
|
fieldset:disabled & {
|
||||||
box-shadow: $btn-contextual-box-shadow map-get($value, shadow-color);
|
box-shadow: var(--#{$prefix}btn-box-shadow);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// scss-docs-end btn-variant-loop
|
// scss-docs-end btn-variant-loop
|
||||||
|
|
||||||
// scss-docs-start btn-outline-variant-loop
|
// scss-docs-start btn-outline-variant-loop
|
||||||
|
@ -245,19 +237,29 @@
|
||||||
shade-color(map-get($value, 'text-color'), $btn-active-bg-shade-amount)
|
shade-color(map-get($value, 'text-color'), $btn-active-bg-shade-amount)
|
||||||
);
|
);
|
||||||
|
|
||||||
border-color: map-get(map-get($buttons-outline, $color), 'border-color');
|
--#{$prefix}btn-border-color: #{map-get($value, 'border-color')};
|
||||||
|
--#{$prefix}btn-focus-border-color: #{shade-color(
|
||||||
|
map-get($value, 'border-color'),
|
||||||
|
$btn-focus-bg-shade-amount
|
||||||
|
)};
|
||||||
|
--#{$prefix}btn-hover-border-color: #{shade-color(
|
||||||
|
map-get($value, 'border-color'),
|
||||||
|
$btn-hover-bg-shade-amount
|
||||||
|
)};
|
||||||
|
|
||||||
|
border-color: var(--#{$prefix}btn-border-color);
|
||||||
|
|
||||||
:not(.btn-check) + &:hover,
|
:not(.btn-check) + &:hover,
|
||||||
&:first-child:hover,
|
&:first-child:hover,
|
||||||
&:focus-visible,
|
&:focus-visible,
|
||||||
&:hover {
|
&:hover {
|
||||||
border-color: shade-color(map-get($value, 'border-color'), $btn-hover-bg-shade-amount);
|
border-color: var(--#{$prefix}btn-hover-border-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-check:focus-visible + &,
|
.btn-check:focus-visible + &,
|
||||||
.btn-check:focus + &,
|
.btn-check:focus + &,
|
||||||
&:focus {
|
&:focus {
|
||||||
border-color: shade-color(map-get($value, 'border-color'), $btn-focus-bg-shade-amount);
|
border-color: var(--#{$prefix}btn-focus-border-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-check:checked + &,
|
.btn-check:checked + &,
|
||||||
|
@ -265,20 +267,21 @@
|
||||||
&:active,
|
&:active,
|
||||||
&.active,
|
&.active,
|
||||||
&.show {
|
&.show {
|
||||||
border-color: shade-color(map-get($value, 'border-color'), $btn-active-bg-shade-amount);
|
border-color: var(--#{$prefix}btn-active-border-color);
|
||||||
|
|
||||||
&:focus {
|
&:focus {
|
||||||
border-color: shade-color(map-get($value, 'border-color'), $btn-focus-bg-shade-amount);
|
border-color: var(--#{$prefix}btn-focus-border-color);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&:disabled,
|
&:disabled,
|
||||||
&.disabled,
|
&.disabled,
|
||||||
fieldset:disabled & {
|
fieldset:disabled & {
|
||||||
border-color: map-get(map-get($buttons-outline, $color), 'border-color');
|
border-color: var(--#{$prefix}btn-border-color);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// scss-docs-end btn-outline-variant-loop
|
// scss-docs-end btn-outline-variant-loop
|
||||||
|
|
||||||
//
|
//
|
||||||
|
|
Loading…
Reference in New Issue
Block a user