Release 1.0.0-alpha3

README.md

@@ -10,7 +10,10 @@
 
 **[>> 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" 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> <a href="https://twitter.com/intent/tweet/?text=Thanks+@mdbootstrap+for+creating+amazing+and+free+Material+Design+for+Bootstrap+4+UI+KIT%20https://mdbootstrap.com/docs/jquery/&hashtags=javascript,code,webdesign,bootstrap"> <img src="https://img.shields.io/twitter/url/http/shields.io.svg?style=social"></a>
+<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>
+<a href="https://twitter.com/intent/tweet/?text=Thanks+@mdbootstrap+for+creating+amazing+and+free+Material+Design+for+Bootstrap+4+UI+KIT%20https://mdbootstrap.com/docs/jquery/&hashtags=javascript,code,webdesign,bootstrap"><img src="https://img.shields.io/twitter/url/http/shields.io.svg?style=social&label=Let%20us%20know%20you%20were%20here%21&"></a>
+<a href="https://www.youtube.com/watch?v=c9B4TPnak1A&t=6s"><img alt="YouTube Video Views" src="https://img.shields.io/youtube/views/c9B4TPnak1A?label=Bootstrap%205%20Tutorial%20Views&style=social"></a>
 ___
 
 <table>

README.txt

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

package.json

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

src/js/free/dropdown.js

@@ -0,0 +1,128 @@
+import { getjQuery } from '../mdb/util/index';
+import EventHandler from '../bootstrap/src/dom/event-handler';
+import SelectorEngine from '../mdb/dom/selector-engine';
+import BSDropdown from '../bootstrap/src/dropdown';
+/**
+ * ------------------------------------------------------------------------
+ * Constants
+ * ------------------------------------------------------------------------
+ */
+
+const NAME = 'dropdown';
+const SELECTOR_EXPAND = '[data-toggle="dropdown"]';
+
+const EVENT_HIDE = 'hide.bs.dropdown';
+const EVENT_HIDDEN = 'hidden.bs.dropdown';
+const EVENT_SHOW = 'show.bs.dropdown';
+
+const ANIMATION_CLASS = 'animation';
+const ANIMATION_SHOW_CLASS = 'fade-in';
+const ANIMATION_HIDE_CLASS = 'fade-out';
+
+class Dropdown extends BSDropdown {
+  constructor(element, data) {
+    super(element, data);
+    this._options = this._getConfig(data);
+    this._parent = Dropdown.getParentFromElement(this._element);
+    this._menuStyle = '';
+    this._xPlacement = '';
+    this._init();
+  }
+
+  dispose() {
+    EventHandler.off(this._element, EVENT_SHOW);
+    EventHandler.off(this._parent, EVENT_HIDE);
+    EventHandler.off(this._parent, EVENT_HIDDEN);
+    super.dispose();
+  }
+
+  // Getters
+  static get NAME() {
+    return NAME;
+  }
+
+  // Private
+  _init() {
+    this._bindShowEvent();
+    this._bindHideEvent();
+    this._bindHiddenEvent();
+  }
+
+  _bindShowEvent() {
+    EventHandler.on(this._element, EVENT_SHOW, () => {
+      this._dropdownAnimationStart('show');
+    });
+  }
+
+  _bindHideEvent() {
+    EventHandler.on(this._parent, EVENT_HIDE, () => {
+      this._menuStyle = this._menu.style.cssText;
+      this._xPlacement = this._menu.getAttribute('x-placement');
+    });
+  }
+
+  _bindHiddenEvent() {
+    EventHandler.on(this._parent, EVENT_HIDDEN, () => {
+      this._menu.style.cssText = this._menuStyle;
+      this._menu.setAttribute('x-placement', this._xPlacement);
+
+      this._dropdownAnimationStart('hide');
+    });
+  }
+
+  _dropdownAnimationStart(action) {
+    switch (action) {
+      case 'show':
+        this._menu.classList.add(ANIMATION_CLASS, ANIMATION_SHOW_CLASS);
+        this._menu.classList.remove(ANIMATION_HIDE_CLASS);
+        break;
+      default:
+        // hide
+        this._menu.classList.add(ANIMATION_CLASS, ANIMATION_HIDE_CLASS);
+        this._menu.classList.remove(ANIMATION_SHOW_CLASS);
+        break;
+    }
+
+    this._bindAnimationEnd();
+  }
+
+  _bindAnimationEnd() {
+    EventHandler.one(this._menu, 'animationend', () => {
+      this._menu.classList.remove(ANIMATION_CLASS, ANIMATION_HIDE_CLASS, ANIMATION_SHOW_CLASS);
+    });
+  }
+}
+
+/**
+ * ------------------------------------------------------------------------
+ * Data Api implementation - auto initialization
+ * ------------------------------------------------------------------------
+ */
+
+SelectorEngine.find(SELECTOR_EXPAND).forEach((el) => {
+  let instance = Dropdown.getInstance(el);
+  if (!instance) {
+    instance = new Dropdown(el);
+  }
+});
+
+/**
+ * ------------------------------------------------------------------------
+ * jQuery
+ * ------------------------------------------------------------------------
+ * add .rating to jQuery only if jQuery is present
+ */
+
+const $ = getjQuery();
+
+if ($) {
+  const JQUERY_NO_CONFLICT = $.fn[NAME];
+  $.fn[NAME] = Dropdown.jQueryInterface;
+  $.fn[NAME].Constructor = Dropdown;
+  $.fn[NAME].noConflict = () => {
+    $.fn[NAME] = JQUERY_NO_CONFLICT;
+    return Dropdown.jQueryInterface;
+  };
+}
+
+export default Dropdown;

src/js/free/input.js

@@ -3,6 +3,7 @@ import Data from '../mdb/dom/data';
 import EventHandler from '../bootstrap/src/dom/event-handler';
 import Manipulator from '../mdb/dom/manipulator';
 import SelectorEngine from '../mdb/dom/selector-engine';
+import 'detect-autofill';
 
 /**
  * ------------------------------------------------------------------------
@@ -47,10 +48,26 @@ class Input {
     this._getLabelData();
     this._applyDivs();
     this._applyNotch();
-    this._applyActiveClass();
+    this._activate();
+  }
+
+  update() {
+    this._getLabelData();
+    this._getNotchData();
+    this._applyNotch();
+    this._activate();
+  }
+
+  forceActive() {
+    const input =
+      SelectorEngine.findOne('input', this._element) ||
+      SelectorEngine.findOne('textarea', this._element);
+    Manipulator.addClass(input, 'active');
   }
 
   dispose() {
+    this._removeBorder();
+
     Data.removeData(this._element, DATA_KEY);
     this._element = null;
   }
@@ -65,6 +82,11 @@ class Input {
     this._getLabelPositionInInputGroup();
   }
 
+  _getNotchData() {
+    this._notchMiddle = SelectorEngine.findOne('.form-notch-middle', this._element);
+    this._notchLeading = SelectorEngine.findOne('.form-notch-leading', this._element);
+  }
+
   _getLabelWidth() {
     this._labelWidth = this._label.clientWidth * 0.8 + 8;
   }
@@ -102,7 +124,24 @@ class Input {
     this._label.style.marginLeft = `${this._labelMarginLeft}px`;
   }
 
-  _applyActiveClass(event) {
+  _removeBorder() {
+    const border = SelectorEngine.findOne('.form-notch', this._element);
+    if (border) border.remove();
+  }
+
+  _activate(event) {
+    if (event) this._label = SelectorEngine.findOne('label', event.target.parentNode);
+    if (event && this._label) {
+      const prevLabelWidth = this._labelWidth;
+      this._getLabelWidth();
+
+      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) ||
@@ -112,7 +151,7 @@ class Input {
     }
   }
 
-  _removeActiveClass(event) {
+  _deactivate(event) {
     const input = event
       ? event.target
       : SelectorEngine.findOne('input', this._element) ||
@@ -122,15 +161,15 @@ class Input {
     }
   }
 
-  static applyActiveClass(instance) {
+  static activate(instance) {
     return function (event) {
-      instance._applyActiveClass(event);
+      instance._activate(event);
     };
   }
 
-  static removeActiveClass(instance) {
+  static deactivate(instance) {
     return function (event) {
-      instance._removeActiveClass(event);
+      instance._deactivate(event);
     };
   }
 
@@ -139,17 +178,27 @@ class Input {
   }
 }
 
-EventHandler.on(document, 'focus', OUTLINE_INPUT, Input.applyActiveClass(new Input()));
-EventHandler.on(document, 'input', OUTLINE_INPUT, Input.applyActiveClass(new Input()));
-EventHandler.on(document, 'blur', OUTLINE_INPUT, Input.removeActiveClass(new 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', OUTLINE_TEXTAREA, Input.applyActiveClass(new Input()));
-EventHandler.on(document, 'input', OUTLINE_TEXTAREA, Input.applyActiveClass(new Input()));
-EventHandler.on(document, 'blur', OUTLINE_TEXTAREA, Input.removeActiveClass(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(window, 'shown.bs.modal', Input.activate(new Input()));
+EventHandler.on(window, 'shown.bs.dropdown', Input.activate(new Input()));
 
 // auto-init
 SelectorEngine.find(`.${CLASSNAME_WRAPPER}`).forEach((element) => {
   new Input(element).init();
 });
 
+// auto-fill
+EventHandler.on(window, 'onautocomplete', (e) => {
+  const instance = Input.getInstance(e.target.parentNode);
+  if (!instance) return;
+  instance.forceActive();
+});
+
 export default Input;

src/js/mdb.free.js

@@ -3,7 +3,6 @@ import Alert from './bootstrap/src/alert';
 import Button from './bootstrap/src/button';
 import Carousel from './bootstrap/src/carousel';
 import Collapse from './bootstrap/src/collapse';
-import Dropdown from './bootstrap/src/dropdown';
 import Modal from './bootstrap/src/modal';
 import Popover from './bootstrap/src/popover';
 import ScrollSpy from './bootstrap/src/scrollspy';
@@ -13,13 +12,12 @@ import Tooltip from './bootstrap/src/tooltip';
 
 // MDB FREE COMPONENTS
 import Input from './free/input';
-import Animate from './free/animate';
+import Dropdown from './free/dropdown';
 import Treeview from './free/treeview';
 import Ripple from './free/ripple';
 
 export {
   Alert,
-  Animate,
   Button,
   Carousel,
   Collapse,

src/js/mdb/dom/data.js

@@ -16,22 +16,22 @@ const mapData = (() => {
   let id = 1;
   return {
     set(element, key, data) {
-      if (typeof element.key === 'undefined') {
-        element.key = {
+      if (typeof element[key] === 'undefined') {
+        element[key] = {
           key,
           id,
         };
         id++;
       }
 
-      storeData[element.key.id] = data;
+      storeData[element[key].id] = data;
     },
     get(element, key) {
-      if (!element || typeof element.key === 'undefined') {
+      if (!element || typeof element[key] === 'undefined') {
         return null;
       }
 
-      const keyProperties = element.key;
+      const keyProperties = element[key];
       if (keyProperties.key === key) {
         return storeData[keyProperties.id];
       }
@@ -39,14 +39,14 @@ const mapData = (() => {
       return null;
     },
     delete(element, key) {
-      if (typeof element.key === 'undefined') {
+      if (typeof element[key] === 'undefined') {
         return;
       }
 
-      const keyProperties = element.key;
+      const keyProperties = element[key];
       if (keyProperties.key === key) {
         delete storeData[keyProperties.id];
-        delete element.key;
+        delete element[key];
       }
     },
   };

src/scss/free/_buttons.scss

@@ -173,16 +173,21 @@
   border-radius: $btn-rounded-border-radius;
 }
 
-.btn-floating {
+.btn-floating,
+[class*='btn-outline-'].btn-floating {
   border-radius: 50%;
   padding: 0;
+}
+
+.btn-floating {
   width: 36px;
   height: 36px;
 
   .fas,
   .far,
   .fab {
-    line-height: 36px;
+    line-height: 1;
+    padding-right: 1px;
   }
 
   &.btn-sm {
@@ -192,7 +197,7 @@
     .fas,
     .far,
     .fab {
-      line-height: 29px;
+      padding-right: 1px;
     }
   }
 
@@ -203,7 +208,7 @@
     .fas,
     .far,
     .fab {
-      line-height: 45px;
+      padding-right: 0;
     }
   }
 }

src/scss/free/_dropdown.scss

@@ -1,22 +1,22 @@
 .dropdown-menu {
   color: #212529;
-  margin: .125rem 0 0;
+  margin: 0.125rem 0 0;
   padding-top: 0;
   padding-bottom: 0;
   border: 0;
   box-shadow: $box-shadow-2;
-  font-size: .875rem;
-  
+  font-size: 0.875rem;
+
   > li {
     border-radius: 0;
     &:first-child {
-      border-top-left-radius: .25rem;
-      border-top-right-radius: .25rem;
+      border-top-left-radius: 0.25rem;
+      border-top-right-radius: 0.25rem;
       border-bottom-left-radius: 0;
       border-bottom-right-radius: 0;
       .dropdown-item {
-        border-top-left-radius: .25rem;
-        border-top-right-radius: .25rem;
+        border-top-left-radius: 0.25rem;
+        border-top-right-radius: 0.25rem;
         border-bottom-left-radius: 0;
         border-bottom-right-radius: 0;
       }
@@ -27,27 +27,27 @@
         border-radius: 0;
       }
     }
-  
+
     &:last-child {
       border-top-left-radius: 0;
       border-top-right-radius: 0;
-      border-bottom-left-radius: .25rem;
-      border-bottom-right-radius: .25rem;
+      border-bottom-left-radius: 0.25rem;
+      border-bottom-right-radius: 0.25rem;
       .dropdown-item {
         border-top-left-radius: 0;
         border-top-right-radius: 0;
-        border-bottom-left-radius: .25rem;
-        border-bottom-right-radius: .25rem;
+        border-bottom-left-radius: 0.25rem;
+        border-bottom-right-radius: 0.25rem;
       }
     }
   }
 }
 
 .dropdown-item {
-  padding: .5rem 1rem;
+  padding: 0.5rem 1rem;
   color: #212529;
   border-radius: 0;
-  
+
   &:hover,
   &:focus {
     color: #16181b;
@@ -59,4 +59,66 @@
     color: #16181b;
     background-color: #eee;
   }
-}
+}
+
+.dropdown-notification {
+  .dropdown-toggle:after {
+    display: none;
+  }
+  .badge-notification {
+    font-size: 0.6rem;
+    margin-top: -0.1rem;
+    margin-left: -0.5rem;
+    padding: 0.2em 0.45em;
+  }
+}
+
+.dropdown-menu {
+  &.animation {
+    display: block;
+    /* Speed up animations */
+    animation-duration: $dropdown-menu-animated-animation-duration;
+    animation-timing-function: $dropdown-menu-animated-animation-timing-function;
+  }
+}
+
+.animation {
+  animation-duration: 1s;
+  animation-fill-mode: both;
+  padding: auto;
+}
+
+@media (prefers-reduced-motion) {
+  .animation {
+    transition: none !important;
+    animation: unset !important;
+  }
+}
+
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+.fade-in {
+  animation-name: fade-in;
+}
+
+@keyframes fade-out {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
+}
+
+.fade-out {
+  animation-name: fade-out;
+}

src/scss/free/_images.scss

@@ -22,15 +22,17 @@
   background-attachment: fixed;
 }
 
-.overlay {
-  opacity: 0;
-  transition: all 0.3s ease-in-out;
-  &:hover {
-    opacity: 1;
+.hover-overlay {
+  .mask {
+    opacity: 0;
+    transition: all 0.3s ease-in-out;
+    &:hover {
+      opacity: 1;
+    }
   }
 }
 
-.zoom {
+.hover-zoom {
   img,
   video {
     transition: all 0.3s linear;
@@ -43,7 +45,7 @@
   }
 }
 
-.hoverable {
+.hover-shadow {
   box-shadow: none;
   transition: all 0.3s ease-in-out;
   &:hover {

src/scss/free/_modal.scss

@@ -3,66 +3,3 @@
   border: 0;
   box-shadow: $box-shadow-3;
 }
-
-.modal {
-  .modal-dialog {
-    width: 100%;
-    @media (min-width: 768px) {
-      &.modal-top {
-        top: 0;
-      }
-      &.modal-left {
-        left: 0;
-      }
-      &.modal-right {
-        right: 0;
-      }
-      &.modal-bottom {
-        bottom: 0;
-      }
-      &.modal-top-left {
-        top: 10px;
-        left: 10px;
-      }
-      &.modal-top-right {
-        top: 10px;
-        right: 10px;
-      }
-      &.modal-bottom-left {
-        bottom: 10px;
-        left: 10px;
-      }
-      &.modal-bottom-right {
-        right: 10px;
-        bottom: 10px;
-      }
-    }
-  }
-  &.fade {
-    &.top:not(.show) .modal-dialog {
-      transform: translate3d(0, -25%, 0);
-    }
-    &.right:not(.show) .modal-dialog {
-      transform: translate3d(25%, 0, 0);
-    }
-    &.bottom:not(.show) .modal-dialog {
-      transform: translate3d(0, 25%, 0);
-    }
-    &.left:not(.show) .modal-dialog {
-      transform: translate3d(-25%, 0, 0);
-    }
-  }
-  @media (min-width: 992px) {
-    .modal-side {
-      position: absolute;
-      right: 10px;
-      bottom: 10px;
-      margin: 0;
-    }
-    .modal-frame {
-      position: absolute;
-      max-width: 100%;
-      margin: 0;
-    }
-  }
-}

src/scss/free/_variables.scss

@@ -442,3 +442,8 @@ $btn-rounded-border-radius: 10rem;
 $btn-group-border-radius: calc(0.25rem - 1px);
 $btn-group-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
   border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+
+// Dropdown
+
+$dropdown-menu-animated-animation-duration: 0.55s;
+$dropdown-menu-animated-animation-timing-function: ease;

src/scss/free/forms/_form-check.scss

@@ -10,6 +10,9 @@
       margin-left: 1.85rem * -1;
     }
   }
+
+  margin-bottom: 0;
+  min-height: auto;
 }
 
 .form-check-input {
@@ -161,7 +164,7 @@
       content: '';
       position: absolute;
       border: none;
-      z-index: 10000;
+      z-index: 2;
       border-radius: 50%;
       width: 20px;
       height: 20px;
@@ -203,7 +206,7 @@
           content: '';
           position: absolute;
           border: none;
-          z-index: 10000;
+          z-index: 2;
           border-radius: 50%;
           width: 20px;
           height: 20px;

src/scss/free/forms/_form-control.scss

@@ -146,4 +146,32 @@
       }
     }
   }
+
+  &.form-white {
+    .form-control {
+      color: #fff;
+      ~ .form-label {
+        color: #fbfbfb;
+      }
+      ~ .form-notch {
+        div {
+          border-color: #fbfbfb;
+        }
+      }
+      &:focus ~ .form-label {
+        color: #fff;
+      }
+      &:focus ~ .form-notch .form-notch-middle {
+        border-color: #fff;
+      }
+      &:focus ~ .form-notch .form-notch-leading {
+        border-top: 2px solid #fff;
+        border-bottom: 2px solid #fff;
+        border-left: 2px solid #fff;
+      }
+      &:focus ~ .form-notch .form-notch-trailing {
+        border-color: #fff;
+      }
+    }
+  }
 }

src/scss/free/forms/_form-select.scss

@@ -1 +1,9 @@
 // Select
+
+.select-input {
+  &.form-control {
+    &[readonly] {
+      background-color: transparent;
+    }
+  }
+}

src/scss/free/forms/_input-group.scss

@@ -62,3 +62,7 @@
     }
   }
 }
+
+.input-group > [class*='btn-outline-'] + [class*='btn-outline-'] {
+  border-left: 0;
+}

src/scss/free/mixins/_buttons.scss

@@ -19,7 +19,7 @@
   &.active,
   .show > &.dropdown-toggle {
     color: set-notification-text-color($background);
-    background-color: darken($background, 10%);
+    background-color: darken($background, 20%);
   }
 
   &:disabled,

src/scss/mdb.free.scss

@@ -86,6 +86,5 @@
 @import './free/tooltip';
 @import './free/popover';
 @import './free/scrollspy';
-@import './free/animate';
 @import './free/ripple';
 @import './free/footer';