mdbootstrap/mdb-ui-kit
1
1
Fork 0
mirror of https://github.com/mdbootstrap/mdb-ui-kit.git synced 2024-11-22 09:36:55 +03:00
Code Issues Packages Projects Releases Wiki Activity

release: 6.4.0

Browse Source
This commit is contained in:
Grzegorz Bujański 2023-06-12 12:38:28 +02:00
parent 0709614f1d
commit 942ba0f7d1
23 changed files with 116 additions and 272 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
README.txt
View File

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

4
css/mdb.dark.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
css/mdb.dark.min.css.map
View File

File diff suppressed because one or more lines are too long

4
css/mdb.dark.rtl.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
css/mdb.dark.rtl.min.css.map
View File

File diff suppressed because one or more lines are too long

6
css/mdb.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
css/mdb.min.css.map
View File

File diff suppressed because one or more lines are too long

4
css/mdb.rtl.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
css/mdb.rtl.min.css.map
View File

File diff suppressed because one or more lines are too long

4
js/mdb.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
js/mdb.min.js.map
View File

File diff suppressed because one or more lines are too long

2
package.json
View File

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

2
src/js/bootstrap/mdb-prefix/dropdown.js
View File

@ -269,7 +269,7 @@ class Dropdown extends BaseComponent {
}
// 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)) {
return isEnd ? PLACEMENT_TOPEND : PLACEMENT_TOP;

20
src/js/free/alert.js
View File

@ -10,14 +10,11 @@ import BSAlert from '../bootstrap/mdb-prefix/alert';
*/
const NAME = 'alert';
const DATA_KEY = `mdb.${NAME}`;
const EVENT_KEY = `.${DATA_KEY}`;
const EVENT_CLOSE_BS = 'close.bs.alert';
const EVENT_CLOSED_BS = 'closed.bs.alert';
const EVENT_CLOSE = `close${EVENT_KEY}`;
const EVENT_CLOSED = `closed${EVENT_KEY}`;
const EXTENDED_EVENTS = [{ name: 'close' }, { name: 'closed' }];
const SELECTOR_ALERT = '.alert';
@ -42,20 +39,11 @@ class Alert extends BSAlert {
// Private
_init() {
this._bindCloseEvent();
this._bindClosedEvent();
this._bindMdbEvents();
}
_bindCloseEvent() {
EventHandler.on(this._element, EVENT_CLOSE_BS, () => {
EventHandler.trigger(this._element, EVENT_CLOSE);
});
}
_bindClosedEvent() {
EventHandler.on(this._element, EVENT_CLOSED_BS, () => {
EventHandler.trigger(this._element, EVENT_CLOSED);
});
_bindMdbEvents() {
EventHandler.extend(this._element, EXTENDED_EVENTS, NAME);
}
}

33
src/js/free/carousel.js
View File

@ -11,14 +11,14 @@ import BSCarousel from '../bootstrap/mdb-prefix/carousel';
*/
const NAME = 'carousel';
const DATA_KEY = `mdb.${NAME}`;
const EVENT_KEY = `.${DATA_KEY}`;
const EVENT_SLIDE_BS = 'slide.bs.carousel';
const EVENT_SLID_BS = 'slid.bs.carousel';
const EVENT_SLIDE = `slide${EVENT_KEY}`;
const EVENT_SLID = `slid${EVENT_KEY}`;
const EXTENDED_EVENTS = [
{ name: 'slide', parametersToCopy: ['relatedTarget', 'direction', 'from', 'to'] },
{ name: 'slid', parametersToCopy: ['relatedTarget', 'direction', 'from', 'to'] },
];
const SELECTOR_DATA_RIDE = '[data-mdb-ride="carousel"]';
@ -43,30 +43,11 @@ class Carousel extends BSCarousel {
// Private
_init() {
this._bindSlideEvent();
this._bindSlidEvent();
this._bindMdbEvents();
}
_bindSlideEvent() {
EventHandler.on(this._element, EVENT_SLIDE_BS, (e) => {
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,
});
});
_bindMdbEvents() {
EventHandler.extend(this._element, EXTENDED_EVENTS, NAME);
}
}

36
src/js/free/collapse.js
View File

@ -10,18 +10,13 @@ import BSCollapse from '../bootstrap/mdb-prefix/collapse';
*/
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 EXTENDED_EVENTS = [{ name: 'show' }, { name: 'shown' }, { name: 'hide' }, { name: 'hidden' }];
const SELECTOR_DATA_TOGGLE = '[data-mdb-toggle="collapse"]';
@ -48,34 +43,11 @@ class Collapse extends BSCollapse {
// Private
_init() {
this._bindShowEvent();
this._bindShownEvent();
this._bindHideEvent();
this._bindHiddenEvent();
this._bindMdbEvents();
}
_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);
});
_bindMdbEvents() {
EventHandler.extend(this._element, EXTENDED_EVENTS, NAME);
}
}

50
src/js/free/modal.js
View File

@ -10,8 +10,6 @@ import BSModal from '../bootstrap/mdb-prefix/modal';
*/
const NAME = 'modal';
const DATA_KEY = `mdb.${NAME}`;
const EVENT_KEY = `.${DATA_KEY}`;
const EVENT_HIDE_BS = 'hide.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_SHOWN_BS = 'shown.bs.modal';
const EVENT_HIDE = `hide${EVENT_KEY}`;
const EVENT_HIDE_PREVENTED = `hidePrevented${EVENT_KEY}`;
const EVENT_HIDDEN = `hidden${EVENT_KEY}`;
const EVENT_SHOW = `show${EVENT_KEY}`;
const EVENT_SHOWN = `shown${EVENT_KEY}`;
const EXTENDED_EVENTS = [
{ name: 'show', parametersToCopy: ['relatedTarget'] },
{ name: 'shown', parametersToCopy: ['relatedTarget'] },
{ name: 'hide' },
{ name: 'hidePrevented' },
{ name: 'hidden' },
];
const SELECTOR_DATA_TOGGLE = '[data-mdb-toggle="modal"]';
@ -51,41 +51,11 @@ class Modal extends BSModal {
// Private
_init() {
this._bindShowEvent();
this._bindShownEvent();
this._bindHideEvent();
this._bindHiddenEvent();
this._bindHidePreventedEvent();
this._bindMdbEvents();
}
_bindShowEvent() {
EventHandler.on(this._element, EVENT_SHOW_BS, (e) => {
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);
});
_bindMdbEvents() {
EventHandler.extend(this._element, EXTENDED_EVENTS, NAME);
}
}

50
src/js/free/popover.js
View File

@ -10,8 +10,6 @@ import BSPopover from '../bootstrap/mdb-prefix/popover';
*/
const NAME = 'popover';
const DATA_KEY = `mdb.${NAME}`;
const EVENT_KEY = `.${DATA_KEY}`;
const EVENT_SHOW_BS = 'show.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_INSERTED_BS = 'inserted.bs.popover';
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 EVENT_INSERTED = `inserted${EVENT_KEY}`;
const EXTENDED_EVENTS = [
{ name: 'show' },
{ name: 'shown' },
{ name: 'hide' },
{ name: 'hidden' },
{ name: 'inserted' },
];
const SELECTOR_DATA_TOGGLE = '[data-mdb-toggle="popover"]';
@ -51,41 +51,11 @@ class Popover extends BSPopover {
// Private
_init() {
this._bindShowEvent();
this._bindShownEvent();
this._bindHideEvent();
this._bindHiddenEvent();
this._bindInsertedEvent();
this._bindMdbEvents();
}
_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);
});
}
_bindInsertedEvent() {
EventHandler.on(this.element, EVENT_INSERTED_BS, () => {
EventHandler.trigger(this.element, EVENT_INSERTED);
});
_bindMdbEvents() {
EventHandler.extend(this._element, EXTENDED_EVENTS, NAME);
}
}

4
src/js/free/ripple.js
View File

@ -165,6 +165,10 @@ class Ripple {
}
_createRipple(event) {
if (this._element === null) {
return;
}
if (!Manipulator.hasClass(this._element, CLASSNAME_RIPPLE)) {
Manipulator.addClass(this._element, CLASSNAME_RIPPLE);
}

36
src/js/free/toast.js
View File

@ -10,18 +10,13 @@ import BSToast from '../bootstrap/mdb-prefix/toast';
*/
const NAME = 'toast';
const DATA_KEY = `mdb.${NAME}`;
const EVENT_KEY = `.${DATA_KEY}`;
const EVENT_SHOW_BS = 'show.bs.toast';
const EVENT_SHOWN_BS = 'shown.bs.toast';
const EVENT_HIDE_BS = 'hide.bs.toast';
const EVENT_HIDDEN_BS = 'hidden.bs.toast';
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 EXTENDED_EVENTS = [{ name: 'show' }, { name: 'shown' }, { name: 'hide' }, { name: 'hidden' }];
const SELECTOR_TOAST = '.toast';
@ -48,34 +43,11 @@ class Toast extends BSToast {
// Private
_init() {
this._bindShowEvent();
this._bindShownEvent();
this._bindHideEvent();
this._bindHiddenEvent();
this._bindMdbEvents();
}
_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);
});
_bindMdbEvents() {
EventHandler.extend(this._element, EXTENDED_EVENTS, NAME);
}
}

50
src/js/free/tooltip.js
View File

@ -10,8 +10,6 @@ import SelectorEngine from '../mdb/dom/selector-engine';
*/
const NAME = 'tooltip';
const DATA_KEY = `mdb.${NAME}`;
const EVENT_KEY = `.${DATA_KEY}`;
const EVENT_HIDE_BS = 'hide.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_INSERTED_BS = 'inserted.bs.tooltip';
const EVENT_HIDE = `hide${EVENT_KEY}`;
const EVENT_HIDDEN = `hidden${EVENT_KEY}`;
const EVENT_SHOW = `show${EVENT_KEY}`;
const EVENT_SHOWN = `shown${EVENT_KEY}`;
const EVENT_INSERTED = `inserted${EVENT_KEY}`;
const EXTENDED_EVENTS = [
{ name: 'show' },
{ name: 'shown' },
{ name: 'hide' },
{ name: 'hidden' },
{ name: 'inserted' },
];
const SELECTOR_DATA_TOGGLE = '[data-mdb-toggle="tooltip"]';
@ -51,41 +51,11 @@ class Tooltip extends BSTooltip {
// Private
_init() {
this._bindShowEvent();
this._bindShownEvent();
this._bindHideEvent();
this._bindHiddenEvent();
this._bindHidePreventedEvent();
this._bindMdbEvents();
}
_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);
});
}
_bindHidePreventedEvent() {
EventHandler.on(this.element, EVENT_INSERTED_BS, () => {
EventHandler.trigger(this.element, EVENT_INSERTED);
});
_bindMdbEvents() {
EventHandler.extend(this._element, EXTENDED_EVENTS, NAME);
}
}

14
src/js/mdb/dom/event-handler.js
View File

@ -232,6 +232,20 @@ const EventHandler = {
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) {
if (typeof originalTypeEvent !== 'string' || !element) {
return;

57
src/scss/free/_buttons.scss
View File

@ -165,6 +165,7 @@
box-shadow: none;
}
}
// scss-docs-end btn-secondary
// scss-docs-start btn-variant-loop
@ -182,25 +183,22 @@
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,
&:first-child:hover,
&:focus-visible,
&:hover {
box-shadow: $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);
box-shadow: var(--#{$prefix}btn-box-shadow-state);
}
.btn-check:focus-visible + &,
.btn-check:focus + &,
&:focus {
box-shadow: $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);
background-color: shade-color(
map-get($value, 'background-color'),
$btn-focus-bg-shade-amount
);
box-shadow: var(--#{$prefix}btn-box-shadow-state);
background-color: var(--#{$prefix}btn-focus-bg);
}
.btn-check:checked + &,
@ -208,31 +206,25 @@
&:active,
&.active,
&.show {
box-shadow: $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);
box-shadow: var(--#{$prefix}btn-box-shadow-state);
&:focus {
box-shadow: $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);
box-shadow: var(--#{$prefix}btn-box-shadow-state);
}
&:hover {
background-color: shade-color(
map-get($value, 'background-color'),
$btn-active-bg-shade-amount
);
background-color: var(--#{$prefix}btn-active-bg);
}
}
&:disabled,
&.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-start btn-outline-variant-loop
@ -245,19 +237,29 @@
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,
&:first-child:hover,
&:focus-visible,
&: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 + &,
&: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 + &,
@ -265,20 +267,21 @@
&:active,
&.active,
&.show {
border-color: shade-color(map-get($value, 'border-color'), $btn-active-bg-shade-amount);
border-color: var(--#{$prefix}btn-active-border-color);
&: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,
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
//