mdbootstrap/mdb-ui-kit
1
1
Fork 0
mirror of https://github.com/mdbootstrap/mdb-ui-kit.git synced 2024-11-10 19:57:13 +03:00
Code Issues Packages Projects Releases Wiki Activity

1.2.0

Browse Source
This commit is contained in:
Adam Jakubowski 2020-12-29 14:19:46 +01:00
parent 8333e608ad
commit c8aa2b01b6
14 changed files with 117 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@ -23,7 +23,7 @@ ___
<tr>
<td>
<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>
</td>
<td>

2
README.txt
View File

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

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

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

5
src/js/free/dropdown.js
View File

@ -49,7 +49,10 @@ class Dropdown extends BSDropdown {
this._menuStyle = '';
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();
}
}

112
src/js/free/input.js
View File

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

4
src/scss/free/_images.scss
View File

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

24
src/scss/free/_tables.scss Normal file
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;
}

6
src/scss/free/_type.scss
View File

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

2
src/scss/free/forms/_form-control.scss
View File

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

1
src/scss/mdb.free.scss
View File

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