mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2024-11-26 03:24:05 +03:00
Release 1.0.0
This commit is contained in:
parent
fb899c03d1
commit
06f54f51de
|
@ -2,7 +2,7 @@
|
||||||
![MDB Logo](https://mdbootstrap.com/img/Marketing/general/logo/medium/mdb-r.png)
|
![MDB Logo](https://mdbootstrap.com/img/Marketing/general/logo/medium/mdb-r.png)
|
||||||
|
|
||||||
|
|
||||||
# MDB 5 Beta
|
# MDB 5
|
||||||
|
|
||||||
### Bootstrap 5 & Material Design 2.0 UI KIT
|
### Bootstrap 5 & Material Design 2.0 UI KIT
|
||||||
|
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
MDB5
|
MDB5
|
||||||
Version: FREE 1.0.0-beta2
|
Version: FREE 1.0.0
|
||||||
|
|
||||||
Documentation:
|
Documentation:
|
||||||
https://mdbootstrap.com/docs/standard/
|
https://mdbootstrap.com/docs/standard/
|
||||||
|
|
4
css/mdb.min.css
vendored
4
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
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
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "mdb-ui-kit",
|
"name": "mdb-ui-kit",
|
||||||
"version": "1.0.0-beta2",
|
"version": "1.0.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",
|
||||||
|
|
|
@ -1,187 +0,0 @@
|
||||||
import { element, getjQuery } from '../mdb/util/index';
|
|
||||||
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';
|
|
||||||
|
|
||||||
/**
|
|
||||||
* ------------------------------------------------------------------------
|
|
||||||
* Constants
|
|
||||||
* ------------------------------------------------------------------------
|
|
||||||
*/
|
|
||||||
|
|
||||||
const NAME = 'treeview';
|
|
||||||
const DATA_KEY = 'mdb.treeview';
|
|
||||||
const CLASSNAME_TREEVIEW = 'treeview';
|
|
||||||
const SELECTOR_EXPAND = '[data-toggle="treeview"]';
|
|
||||||
|
|
||||||
/**
|
|
||||||
* ------------------------------------------------------------------------
|
|
||||||
* Class Definition
|
|
||||||
* ------------------------------------------------------------------------
|
|
||||||
*/
|
|
||||||
|
|
||||||
class Treeview {
|
|
||||||
constructor(element, data) {
|
|
||||||
this._element = element;
|
|
||||||
|
|
||||||
if (this._element) {
|
|
||||||
this._data = data ? this._createHTMLNodes(data, element) : this._setData(element);
|
|
||||||
Data.setData(element, DATA_KEY, this);
|
|
||||||
Manipulator.addClass(this._element, CLASSNAME_TREEVIEW);
|
|
||||||
|
|
||||||
this._constructTreeview(this._data);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Getters
|
|
||||||
|
|
||||||
static get NAME() {
|
|
||||||
return NAME;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Public
|
|
||||||
|
|
||||||
collapse() {
|
|
||||||
const [, ...innerLists] = SelectorEngine.find('ul', this._element);
|
|
||||||
innerLists.forEach((node) => (node.style.display = 'none'));
|
|
||||||
}
|
|
||||||
|
|
||||||
dispose() {
|
|
||||||
Data.removeData(this._element, DATA_KEY);
|
|
||||||
this._element = null;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Private
|
|
||||||
|
|
||||||
_toggleSubmenu(e) {
|
|
||||||
e.stopPropagation();
|
|
||||||
|
|
||||||
const li = e.target.nodeName === 'I' ? e.target.parentNode : e.target;
|
|
||||||
|
|
||||||
const [ul] =
|
|
||||||
li.nodeName === 'I'
|
|
||||||
? SelectorEngine.children(li.parentNode, 'ul')
|
|
||||||
: SelectorEngine.children(li, 'ul');
|
|
||||||
|
|
||||||
if (ul) {
|
|
||||||
ul.style.display = window.getComputedStyle(ul).display === 'none' ? 'block' : 'none';
|
|
||||||
this._toggleIcon(li);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
_toggleIcon(el, icon1 = 'fa-caret-down', icon2 = 'fa-caret-up') {
|
|
||||||
const [i] = SelectorEngine.children(el, 'i');
|
|
||||||
|
|
||||||
if (!i) return;
|
|
||||||
|
|
||||||
const faClasses = [icon1, icon2];
|
|
||||||
|
|
||||||
const [current, next] = i.classList.contains(icon1) ? faClasses : faClasses.reverse();
|
|
||||||
|
|
||||||
i.classList.remove(current);
|
|
||||||
i.classList.add(next);
|
|
||||||
}
|
|
||||||
|
|
||||||
_constructTreeview(data) {
|
|
||||||
data.forEach((el) => {
|
|
||||||
el.node.addEventListener('click', this._toggleSubmenu.bind(this));
|
|
||||||
|
|
||||||
if (el.children && el.children.length > 0) {
|
|
||||||
const arrow = element('i');
|
|
||||||
arrow.classList = ['fas fa-caret-down'];
|
|
||||||
el.node.appendChild(arrow);
|
|
||||||
|
|
||||||
this._constructTreeview(el.children);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
_setData(el) {
|
|
||||||
const [list] = SelectorEngine.children(el, 'ul');
|
|
||||||
|
|
||||||
if (!list) return [];
|
|
||||||
|
|
||||||
return SelectorEngine.children(list, 'li').map((node) => {
|
|
||||||
const children = this._setData(node);
|
|
||||||
return {
|
|
||||||
name: node.innerText ? node.innerText.split('\n')[0] : '',
|
|
||||||
node,
|
|
||||||
children,
|
|
||||||
};
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
_createHTMLNodes(data, parent) {
|
|
||||||
const ul = element('ul');
|
|
||||||
|
|
||||||
return data.map((item) => {
|
|
||||||
const li = element('li');
|
|
||||||
li.innerText = item.name;
|
|
||||||
let children = item.children;
|
|
||||||
|
|
||||||
if (children && children.length > 0) {
|
|
||||||
children = this._createHTMLNodes(item.children, li);
|
|
||||||
}
|
|
||||||
|
|
||||||
ul.appendChild(li);
|
|
||||||
parent.appendChild(ul);
|
|
||||||
|
|
||||||
return {
|
|
||||||
...item,
|
|
||||||
children,
|
|
||||||
node: li,
|
|
||||||
};
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
static toggleSubmenu(instance) {
|
|
||||||
return function (event) {
|
|
||||||
instance._toggleSubmenu(event);
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
static jQueryInterface(options) {
|
|
||||||
return this.each(function () {
|
|
||||||
const data = Data.getData(this, DATA_KEY);
|
|
||||||
if (!data) {
|
|
||||||
return new Treeview(this, options);
|
|
||||||
}
|
|
||||||
|
|
||||||
return null;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
static getInstance(element) {
|
|
||||||
return Data.getData(element, DATA_KEY);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* ------------------------------------------------------------------------
|
|
||||||
* Data Api implementation - auto initialization
|
|
||||||
* ------------------------------------------------------------------------
|
|
||||||
*/
|
|
||||||
|
|
||||||
EventHandler.on(document, 'click', SELECTOR_EXPAND, Treeview.toggleSubmenu(new Treeview()));
|
|
||||||
|
|
||||||
/**
|
|
||||||
* ------------------------------------------------------------------------
|
|
||||||
* jQuery
|
|
||||||
* ------------------------------------------------------------------------
|
|
||||||
* add .treeview to jQuery only if jQuery is present
|
|
||||||
*/
|
|
||||||
|
|
||||||
const $ = getjQuery();
|
|
||||||
|
|
||||||
if ($) {
|
|
||||||
const JQUERY_NO_CONFLICT = $.fn[NAME];
|
|
||||||
$.fn[NAME] = Treeview.jQueryInterface;
|
|
||||||
$.fn[NAME].Constructor = Treeview;
|
|
||||||
$.fn[NAME].noConflict = () => {
|
|
||||||
$.fn[NAME] = JQUERY_NO_CONFLICT;
|
|
||||||
return Treeview.jQueryInterface;
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
export default Treeview;
|
|
|
@ -13,7 +13,6 @@ import Toast from './bootstrap/src/toast';
|
||||||
// MDB FREE COMPONENTS
|
// MDB FREE COMPONENTS
|
||||||
import Input from './free/input';
|
import Input from './free/input';
|
||||||
import Dropdown from './free/dropdown';
|
import Dropdown from './free/dropdown';
|
||||||
import Treeview from './free/treeview';
|
|
||||||
import Ripple from './free/ripple';
|
import Ripple from './free/ripple';
|
||||||
|
|
||||||
// AUTO INIT
|
// AUTO INIT
|
||||||
|
@ -35,5 +34,4 @@ export {
|
||||||
Tab,
|
Tab,
|
||||||
Toast,
|
Toast,
|
||||||
Tooltip,
|
Tooltip,
|
||||||
Treeview,
|
|
||||||
};
|
};
|
||||||
|
|
|
@ -2,7 +2,7 @@
|
||||||
|
|
||||||
.select-input {
|
.select-input {
|
||||||
&.form-control {
|
&.form-control {
|
||||||
&[readonly] {
|
&[readonly]:not([disabled]) {
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue
Block a user