Release 1.0.0-alpha4

Author: unknown

README.md

@@ -6,9 +6,11 @@
 
 ### Bootstrap 5 & Material Design 2.0 UI KIT
 
-**[>> Get Started](https://mdbootstrap.com/docs/standard/getting-started/installation/)**
+**[>> Get Started in 3 steps](https://mdbootstrap.com/docs/standard/getting-started/installation/)**
 
-**[>> Demo](https://mdbootstrap.com/docs/standard/#demo)**
+**[>> Get Started with Webpack](https://github.com/mdbootstrap/mdb-webpack-starter)**
+
+**[>> MDB 5 Demo](https://mdbootstrap.com/docs/standard/#demo)**
 
 <a href="https://npmcharts.com/compare/mdbootstrap?minimal=true"> <img src="https://img.shields.io/npm/dm/mdbootstrap.svg?label=MDB%20Downloads" alt="Downloads"></a>
 <a href="https://github.com/mdbootstrap/bootstrap-material-design/blob/master/License.pdf"><img src="https://img.shields.io/badge/license-MIT-green.svg" alt="License"></a>

README.txt

@@ -1,5 +1,5 @@
 MDB5
-Version: FREE 1.0.0-alpha3
+Version: FREE 1.0.0-alpha4
 
 Documentation:
 https://mdbootstrap.com/docs/standard/

css/mdb.min.css

@@ -1,6 +1,6 @@
 {
  "name": "mdb-ui-kit",
- "version": "1.0.0-alpha3",
+ "version": "1.0.0-alpha4",
  "main": "js/mdb.min.js",
  "repository": "https://github.com/mdbootstrap/mdb-ui-kit.git",
  "author": "MDBootstrap",

css/mdb.min.css.map

@@ -77,8 +77,6 @@ class Input {
  this._label = SelectorEngine.findOne('label', this._element);
  if (this._label === null) return;
  this._getLabelWidth();
-
- if (!this._element.classList.contains('input-group')) return;
  this._getLabelPositionInInputGroup();
  }
 
@@ -92,12 +90,18 @@ class Input {
  }
 
  _getLabelPositionInInputGroup() {
+ this._labelMarginLeft = 0;
+
+ if (!this._element.classList.contains('input-group')) return;
  const input =
  SelectorEngine.findOne('input', this._element) ||
  SelectorEngine.findOne('textarea', this._element);
  const prefix = SelectorEngine.prev(input, '.input-group-text')[0];
- if (prefix === undefined) return;
- this._labelMarginLeft = prefix.offsetWidth - 1;
+ if (prefix === undefined) {
+ this._labelMarginLeft = 0;
+ } else {
+ this._labelMarginLeft = prefix.offsetWidth - 1;
+ }
  }
 
  _applyDivs() {
@@ -130,25 +134,34 @@ class Input {
  }
 
  _activate(event) {
- if (event) this._label = SelectorEngine.findOne('label', event.target.parentNode);
+ this._getElements(event);
+
+ const input = event
+ ? event.target
+ : SelectorEngine.findOne('input', this._element) ||
+ SelectorEngine.findOne('textarea', this._element);
+
+ if (input.value !== '') {
+ Manipulator.addClass(input, 'active');
+ }
+ }
+
+ _getElements(event) {
+ if (event) {
+ this._element = event.target.parentNode;
+ this._label = SelectorEngine.findOne('label', this._element);
+ }
+
  if (event && this._label) {
  const prevLabelWidth = this._labelWidth;
- this._getLabelWidth();
+ this._getLabelData();
 
  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._applyNotch();
  }
  }
-
- const input = event
- ? event.target
- : SelectorEngine.findOne('input', this._element) ||
- SelectorEngine.findOne('textarea', this._element);
- if (input.value !== '') {
- Manipulator.addClass(input, 'active');
- }
  }
 
  _deactivate(event) {
@@ -186,8 +199,46 @@ 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(window, 'shown.bs.modal', Input.activate(new Input()));
-EventHandler.on(window, 'shown.bs.dropdown', Input.activate(new Input()));
+EventHandler.on(window, 'shown.bs.modal', (e) => {
+ SelectorEngine.find(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) => {
+ const instance = Input.getInstance(element.parentNode);
+ if (!instance) return;
+ instance.update();
+ });
+});
+
+EventHandler.on(window, 'shown.bs.dropdown', (e) => {
+ SelectorEngine.find(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) => {
+ const instance = Input.getInstance(element.parentNode);
+ if (!instance) return;
+ instance.update();
+ });
+});
+
+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) => {
+ const instance = Input.getInstance(element.parentNode);
+ if (!instance) return;
+ instance.update();
+ });
+ SelectorEngine.find(OUTLINE_TEXTAREA, target).forEach((element) => {
+ const instance = Input.getInstance(element.parentNode);
+ if (!instance) return;
+ instance.update();
+ });
+});
 
 // auto-init
 SelectorEngine.find(`.${CLASSNAME_WRAPPER}`).forEach((element) => {

js/mdb.min.js

@@ -16,6 +16,12 @@ import Dropdown from './free/dropdown';
 import Treeview from './free/treeview';
 import Ripple from './free/ripple';
 
+// AUTO INIT
+const tooltips = [].slice.call(document.querySelectorAll('[data-toggle="tooltip"]'));
+const popovers = [].slice.call(document.querySelectorAll('[data-toggle="popover"]'));
+if (tooltips.length > 0) tooltips.map((tooltip) => new Tooltip(tooltip));
+if (popovers.length > 0) popovers.map((popover) => new Popover(popover));
+
 export {
  Alert,
  Button,

js/mdb.min.js.map

@@ -6,14 +6,16 @@
  min-width: 0;
  padding: 0;
  width: $badge-dot-width;
- margin-left: $badge-dot-ml;
+ margin-left: -5px;
  &:empty {
  display: inline-block;
  }
 }
 
 .badge-notification {
  position: absolute;
- margin-top: $badge-notification-mt;
- margin-left: $badge-notification-ml;
+ font-size: 0.6rem;
+ margin-top: -0.1rem;
+ margin-left: -0.5rem;
+ padding: 0.2em 0.45em;
 }