Release 1.2.0

This commit is contained in:
unknown 2020-12-30 15:34:17 +01:00
parent 3d86361d52
commit 095ef7f9a2
14 changed files with 117 additions and 59 deletions

View File

@ -23,7 +23,7 @@ ___
<tr> <tr>
<td> <td>
<a href="https://mdbootstrap.com/docs/standard/" alt="Bootstrap 5" rel="dofollow"> <a href="https://mdbootstrap.com/docs/standard/" alt="Bootstrap 5" rel="dofollow">
<img src="https://z9t4u9f6.stackpathcdn.com/wp-content/themes/mdbootstrap4/content/en/_mdb5/standard/about/assets/mdb5-about.jpg"> <img src="https://mdbootstrap.com/wp-content/themes/mdbootstrap4/content/en/_mdb5/standard/about/assets/mdb5-about.jpg">
</a> </a>
</td> </td>
<td> <td>

View File

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

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

6
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": "1.1.0", "version": "1.2.0",
"main": "js/mdb.min.js", "main": "js/mdb.min.js",
"repository": "https://github.com/mdbootstrap/mdb-ui-kit.git", "repository": "https://github.com/mdbootstrap/mdb-ui-kit.git",
"author": "MDBootstrap", "author": "MDBootstrap",

View File

@ -49,7 +49,10 @@ class Dropdown extends BSDropdown {
this._menuStyle = ''; this._menuStyle = '';
this._xPlacement = ''; this._xPlacement = '';
if (this._config.dropdownAnimation === 'on') { //* prevents dropdown close issue when system animation is turned off
const isPrefersReducedMotionSet = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
if (this._config.dropdownAnimation === 'on' && !isPrefersReducedMotionSet) {
this._init(); this._init();
} }
} }

View File

@ -14,8 +14,18 @@ import 'detect-autofill';
const NAME = 'input'; const NAME = 'input';
const DATA_KEY = 'mdb.input'; const DATA_KEY = 'mdb.input';
const CLASSNAME_WRAPPER = 'form-outline'; const CLASSNAME_WRAPPER = 'form-outline';
const OUTLINE_INPUT = `.${CLASSNAME_WRAPPER} input`; const CLASSNAME_ACTIVE = 'active';
const OUTLINE_TEXTAREA = `.${CLASSNAME_WRAPPER} textarea`; const CLASSNAME_NOTCH = 'form-notch';
const CLASSNAME_NOTCH_LEADING = 'form-notch-leading';
const CLASSNAME_NOTCH_MIDDLE = 'form-notch-middle';
const CLASSNAME_NOTCH_TRAILING = 'form-notch-trailing';
const CLASSNAME_PLACEHOLDER_ACTIVE = 'placeholder-active';
const SELECTOR_OUTLINE_INPUT = `.${CLASSNAME_WRAPPER} input`;
const SELECTOR_OUTLINE_TEXTAREA = `.${CLASSNAME_WRAPPER} textarea`;
const SELECTOR_NOTCH = `.${CLASSNAME_NOTCH}`;
const SELECTOR_NOTCH_LEADING = `.${CLASSNAME_NOTCH_LEADING}`;
const SELECTOR_NOTCH_MIDDLE = `.${CLASSNAME_NOTCH_MIDDLE}`;
/** /**
* ------------------------------------------------------------------------ * ------------------------------------------------------------------------
@ -32,9 +42,11 @@ class Input {
this._notchLeading = null; this._notchLeading = null;
this._notchMiddle = null; this._notchMiddle = null;
this._notchTrailing = null; this._notchTrailing = null;
this._initiated = false;
if (this._element) { if (this._element) {
Data.setData(element, DATA_KEY, this); Data.setData(element, DATA_KEY, this);
this.init();
} }
} }
@ -43,12 +55,24 @@ class Input {
return NAME; return NAME;
} }
get input() {
const inputElement =
SelectorEngine.findOne('input', this._element) ||
SelectorEngine.findOne('textarea', this._element);
return inputElement;
}
// Public // Public
init() { init() {
if (this._initiated) {
return;
}
this._getLabelData(); this._getLabelData();
this._applyDivs(); this._applyDivs();
this._applyNotch(); this._applyNotch();
this._activate(); this._activate();
this._initiated = true;
} }
update() { update() {
@ -59,10 +83,7 @@ class Input {
} }
forceActive() { forceActive() {
const input = Manipulator.addClass(this.input, CLASSNAME_ACTIVE);
SelectorEngine.findOne('input', this._element) ||
SelectorEngine.findOne('textarea', this._element);
Manipulator.addClass(input, 'active');
} }
dispose() { dispose() {
@ -75,14 +96,21 @@ class Input {
// Private // Private
_getLabelData() { _getLabelData() {
this._label = SelectorEngine.findOne('label', this._element); this._label = SelectorEngine.findOne('label', this._element);
if (this._label === null) return; if (this._label === null) {
this._getLabelWidth(); this._showPlaceholder();
this._getLabelPositionInInputGroup(); } else {
this._getLabelWidth();
this._getLabelPositionInInputGroup();
}
}
_showPlaceholder() {
Manipulator.addClass(this.input, CLASSNAME_PLACEHOLDER_ACTIVE);
} }
_getNotchData() { _getNotchData() {
this._notchMiddle = SelectorEngine.findOne('.form-notch-middle', this._element); this._notchMiddle = SelectorEngine.findOne(SELECTOR_NOTCH_MIDDLE, this._element);
this._notchLeading = SelectorEngine.findOne('.form-notch-leading', this._element); this._notchLeading = SelectorEngine.findOne(SELECTOR_NOTCH_LEADING, this._element);
} }
_getLabelWidth() { _getLabelWidth() {
@ -93,9 +121,7 @@ class Input {
this._labelMarginLeft = 0; this._labelMarginLeft = 0;
if (!this._element.classList.contains('input-group')) return; if (!this._element.classList.contains('input-group')) return;
const input = const input = this.input;
SelectorEngine.findOne('input', this._element) ||
SelectorEngine.findOne('textarea', this._element);
const prefix = SelectorEngine.prev(input, '.input-group-text')[0]; const prefix = SelectorEngine.prev(input, '.input-group-text')[0];
if (prefix === undefined) { if (prefix === undefined) {
this._labelMarginLeft = 0; this._labelMarginLeft = 0;
@ -106,13 +132,13 @@ class Input {
_applyDivs() { _applyDivs() {
const notchWrapper = element('div'); const notchWrapper = element('div');
Manipulator.addClass(notchWrapper, 'form-notch'); Manipulator.addClass(notchWrapper, CLASSNAME_NOTCH);
this._notchLeading = element('div'); this._notchLeading = element('div');
Manipulator.addClass(this._notchLeading, 'form-notch-leading'); Manipulator.addClass(this._notchLeading, CLASSNAME_NOTCH_LEADING);
this._notchMiddle = element('div'); this._notchMiddle = element('div');
Manipulator.addClass(this._notchMiddle, 'form-notch-middle'); Manipulator.addClass(this._notchMiddle, CLASSNAME_NOTCH_MIDDLE);
this._notchTrailing = element('div'); this._notchTrailing = element('div');
Manipulator.addClass(this._notchTrailing, 'form-notch-trailing'); Manipulator.addClass(this._notchTrailing, CLASSNAME_NOTCH_TRAILING);
notchWrapper.append(this._notchLeading); notchWrapper.append(this._notchLeading);
notchWrapper.append(this._notchMiddle); notchWrapper.append(this._notchMiddle);
@ -129,20 +155,16 @@ class Input {
} }
_removeBorder() { _removeBorder() {
const border = SelectorEngine.findOne('.form-notch', this._element); const border = SelectorEngine.findOne(SELECTOR_NOTCH, this._element);
if (border) border.remove(); if (border) border.remove();
} }
_activate(event) { _activate(event) {
this._getElements(event); this._getElements(event);
const input = event ? event.target : this.input;
const input = event
? event.target
: SelectorEngine.findOne('input', this._element) ||
SelectorEngine.findOne('textarea', this._element);
if (input.value !== '') { if (input.value !== '') {
Manipulator.addClass(input, 'active'); Manipulator.addClass(input, CLASSNAME_ACTIVE);
} }
} }
@ -158,19 +180,19 @@ class Input {
if (prevLabelWidth !== this._labelWidth) { if (prevLabelWidth !== this._labelWidth) {
this._notchMiddle = SelectorEngine.findOne('.form-notch-middle', event.target.parentNode); this._notchMiddle = SelectorEngine.findOne('.form-notch-middle', event.target.parentNode);
this._notchLeading = SelectorEngine.findOne('.form-notch-leading', event.target.parentNode); this._notchLeading = SelectorEngine.findOne(
SELECTOR_NOTCH_LEADING,
event.target.parentNode
);
this._applyNotch(); this._applyNotch();
} }
} }
} }
_deactivate(event) { _deactivate(event) {
const input = event const input = event ? event.target : this.input;
? event.target
: SelectorEngine.findOne('input', this._element) ||
SelectorEngine.findOne('textarea', this._element);
if (input.value === '') { if (input.value === '') {
input.classList.remove('active'); input.classList.remove(CLASSNAME_ACTIVE);
} }
} }
@ -191,21 +213,21 @@ class Input {
} }
} }
EventHandler.on(document, 'focus', OUTLINE_INPUT, Input.activate(new Input())); EventHandler.on(document, 'focus', SELECTOR_OUTLINE_INPUT, Input.activate(new Input()));
EventHandler.on(document, 'input', OUTLINE_INPUT, Input.activate(new Input())); EventHandler.on(document, 'input', SELECTOR_OUTLINE_INPUT, Input.activate(new Input()));
EventHandler.on(document, 'blur', OUTLINE_INPUT, Input.deactivate(new Input())); EventHandler.on(document, 'blur', SELECTOR_OUTLINE_INPUT, Input.deactivate(new Input()));
EventHandler.on(document, 'focus', OUTLINE_TEXTAREA, Input.activate(new Input())); EventHandler.on(document, 'focus', SELECTOR_OUTLINE_TEXTAREA, Input.activate(new Input()));
EventHandler.on(document, 'input', OUTLINE_TEXTAREA, Input.activate(new Input())); EventHandler.on(document, 'input', SELECTOR_OUTLINE_TEXTAREA, Input.activate(new Input()));
EventHandler.on(document, 'blur', OUTLINE_TEXTAREA, Input.deactivate(new Input())); EventHandler.on(document, 'blur', SELECTOR_OUTLINE_TEXTAREA, Input.deactivate(new Input()));
EventHandler.on(window, 'shown.bs.modal', (e) => { EventHandler.on(window, 'shown.bs.modal', (e) => {
SelectorEngine.find(OUTLINE_INPUT, e.target).forEach((element) => { SelectorEngine.find(SELECTOR_OUTLINE_INPUT, e.target).forEach((element) => {
const instance = Input.getInstance(element.parentNode); const instance = Input.getInstance(element.parentNode);
if (!instance) return; if (!instance) return;
instance.update(); instance.update();
}); });
SelectorEngine.find(OUTLINE_TEXTAREA, e.target).forEach((element) => { SelectorEngine.find(SELECTOR_OUTLINE_TEXTAREA, e.target).forEach((element) => {
const instance = Input.getInstance(element.parentNode); const instance = Input.getInstance(element.parentNode);
if (!instance) return; if (!instance) return;
instance.update(); instance.update();
@ -213,12 +235,12 @@ EventHandler.on(window, 'shown.bs.modal', (e) => {
}); });
EventHandler.on(window, 'shown.bs.dropdown', (e) => { EventHandler.on(window, 'shown.bs.dropdown', (e) => {
SelectorEngine.find(OUTLINE_INPUT, e.target).forEach((element) => { SelectorEngine.find(SELECTOR_OUTLINE_INPUT, e.target).forEach((element) => {
const instance = Input.getInstance(element.parentNode); const instance = Input.getInstance(element.parentNode);
if (!instance) return; if (!instance) return;
instance.update(); instance.update();
}); });
SelectorEngine.find(OUTLINE_TEXTAREA, e.target).forEach((element) => { SelectorEngine.find(SELECTOR_OUTLINE_TEXTAREA, e.target).forEach((element) => {
const instance = Input.getInstance(element.parentNode); const instance = Input.getInstance(element.parentNode);
if (!instance) return; if (!instance) return;
instance.update(); instance.update();
@ -228,12 +250,12 @@ EventHandler.on(window, 'shown.bs.dropdown', (e) => {
EventHandler.on(window, 'shown.bs.tab', (e) => { EventHandler.on(window, 'shown.bs.tab', (e) => {
const targetId = e.target.href.split('#')[1]; const targetId = e.target.href.split('#')[1];
const target = SelectorEngine.findOne(`#${targetId}`); const target = SelectorEngine.findOne(`#${targetId}`);
SelectorEngine.find(OUTLINE_INPUT, target).forEach((element) => { SelectorEngine.find(SELECTOR_OUTLINE_INPUT, target).forEach((element) => {
const instance = Input.getInstance(element.parentNode); const instance = Input.getInstance(element.parentNode);
if (!instance) return; if (!instance) return;
instance.update(); instance.update();
}); });
SelectorEngine.find(OUTLINE_TEXTAREA, target).forEach((element) => { SelectorEngine.find(SELECTOR_OUTLINE_TEXTAREA, target).forEach((element) => {
const instance = Input.getInstance(element.parentNode); const instance = Input.getInstance(element.parentNode);
if (!instance) return; if (!instance) return;
instance.update(); instance.update();
@ -241,9 +263,7 @@ EventHandler.on(window, 'shown.bs.tab', (e) => {
}); });
// auto-init // auto-init
SelectorEngine.find(`.${CLASSNAME_WRAPPER}`).forEach((element) => { SelectorEngine.find(`.${CLASSNAME_WRAPPER}`).map((element) => new Input(element));
new Input(element).init();
});
// auto-fill // auto-fill
EventHandler.on(window, 'onautocomplete', (e) => { EventHandler.on(window, 'onautocomplete', (e) => {

View File

@ -54,3 +54,7 @@
transition: $image-hover-shadow-transition; transition: $image-hover-shadow-transition;
} }
} }
.bg-fixed {
background-attachment: fixed;
}

View File

@ -0,0 +1,24 @@
// Tables
.table {
color: #212529;
font-size: 0.9rem;
> :not(:last-child) > :last-child > * {
border-bottom-color: inherit;
}
> :not(caption) > * > * {
padding: 1rem 1.4rem;
}
th {
font-weight: 500;
}
tbody {
font-weight: 300;
}
}
.table-hover > tbody > tr:hover {
color: #212529;
}
.table-striped > tbody > tr:nth-of-type(odd) {
color: #212529;
}

View File

@ -17,3 +17,9 @@
border-color: map-get($color, border-color); border-color: map-get($color, border-color);
} }
} }
.w-responsive {
@media (min-width: 1199px) {
width: 75%;
}
}

View File

@ -74,7 +74,7 @@
border-radius: 0 $form-notch-trailing-border-radius $form-notch-trailing-border-radius 0; border-radius: 0 $form-notch-trailing-border-radius $form-notch-trailing-border-radius 0;
} }
} }
&::placeholder { &:not(.placeholder-active)::placeholder {
opacity: 0; opacity: 0;
} }
// &:not(:focus)::placeholder ~ label { // &:not(:focus)::placeholder ~ label {

View File

@ -71,6 +71,7 @@
@import './free/forms/form-range'; @import './free/forms/form-range';
// MDB COMPONENTS // MDB COMPONENTS
@import './free/tables';
@import './free/buttons'; @import './free/buttons';
@import './free/dropdown'; @import './free/dropdown';
@import './free/button-group'; @import './free/button-group';