@coreui/coreui 4.1.5 → 4.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +2 -2
- package/README.md +64 -11
- package/dist/css/coreui-grid.css +23 -949
- package/dist/css/coreui-grid.css.map +1 -1
- package/dist/css/coreui-grid.min.css +3 -3
- package/dist/css/coreui-grid.min.css.map +1 -1
- package/dist/css/coreui-grid.rtl.css +25 -951
- package/dist/css/coreui-grid.rtl.css.map +1 -1
- package/dist/css/coreui-grid.rtl.min.css +5 -5
- package/dist/css/coreui-grid.rtl.min.css.map +1 -1
- package/dist/css/coreui-reboot.css +35 -42
- package/dist/css/coreui-reboot.css.map +1 -1
- package/dist/css/coreui-reboot.min.css +3 -3
- package/dist/css/coreui-reboot.min.css.map +1 -1
- package/dist/css/coreui-reboot.rtl.css +36 -44
- package/dist/css/coreui-reboot.rtl.css.map +1 -1
- package/dist/css/coreui-reboot.rtl.min.css +5 -5
- package/dist/css/coreui-reboot.rtl.min.css.map +1 -1
- package/dist/css/coreui-utilities.css +279 -951
- package/dist/css/coreui-utilities.css.map +1 -1
- package/dist/css/coreui-utilities.min.css +3 -3
- package/dist/css/coreui-utilities.min.css.map +1 -1
- package/dist/css/coreui-utilities.rtl.css +275 -953
- package/dist/css/coreui-utilities.rtl.css.map +1 -1
- package/dist/css/coreui-utilities.rtl.min.css +5 -5
- package/dist/css/coreui-utilities.rtl.min.css.map +1 -1
- package/dist/css/coreui.css +2179 -2259
- package/dist/css/coreui.css.map +1 -1
- package/dist/css/coreui.min.css +3 -3
- package/dist/css/coreui.min.css.map +1 -1
- package/dist/css/coreui.rtl.css +2166 -2253
- package/dist/css/coreui.rtl.css.map +1 -1
- package/dist/css/coreui.rtl.min.css +5 -5
- package/dist/css/coreui.rtl.min.css.map +1 -1
- package/dist/js/coreui.bundle.js +2095 -1906
- package/dist/js/coreui.bundle.js.map +1 -1
- package/dist/js/coreui.bundle.min.js +2 -2
- package/dist/js/coreui.bundle.min.js.map +1 -1
- package/dist/js/coreui.esm.js +2098 -1909
- package/dist/js/coreui.esm.js.map +1 -1
- package/dist/js/coreui.esm.min.js +2 -2
- package/dist/js/coreui.esm.min.js.map +1 -1
- package/dist/js/coreui.js +2099 -1910
- package/dist/js/coreui.js.map +1 -1
- package/dist/js/coreui.min.js +2 -2
- package/dist/js/coreui.min.js.map +1 -1
- package/js/dist/alert.js +10 -148
- package/js/dist/alert.js.map +1 -1
- package/js/dist/base-component.js +36 -122
- package/js/dist/base-component.js.map +1 -1
- package/js/dist/button.js +9 -76
- package/js/dist/button.js.map +1 -1
- package/js/dist/carousel.js +212 -507
- package/js/dist/carousel.js.map +1 -1
- package/js/dist/collapse.js +64 -251
- package/js/dist/collapse.js.map +1 -1
- package/js/dist/dom/data.js +2 -4
- package/js/dist/dom/data.js.map +1 -1
- package/js/dist/dom/event-handler.js +82 -133
- package/js/dist/dom/event-handler.js.map +1 -1
- package/js/dist/dom/manipulator.js +22 -26
- package/js/dist/dom/manipulator.js.map +1 -1
- package/js/dist/dom/selector-engine.js +16 -81
- package/js/dist/dom/selector-engine.js.map +1 -1
- package/js/dist/dropdown.js +99 -338
- package/js/dist/dropdown.js.map +1 -1
- package/js/dist/modal.js +106 -774
- package/js/dist/modal.js.map +1 -1
- package/js/dist/navigation.js +309 -0
- package/js/dist/navigation.js.map +1 -0
- package/js/dist/offcanvas.js +88 -680
- package/js/dist/offcanvas.js.map +1 -1
- package/js/dist/popover.js +35 -120
- package/js/dist/popover.js.map +1 -1
- package/js/dist/scrollspy.js +178 -264
- package/js/dist/scrollspy.js.map +1 -1
- package/js/dist/sidebar.js +347 -0
- package/js/dist/sidebar.js.map +1 -0
- package/js/dist/tab.js +226 -216
- package/js/dist/tab.js.map +1 -1
- package/js/dist/toast.js +27 -216
- package/js/dist/toast.js.map +1 -1
- package/js/dist/tooltip.js +271 -618
- package/js/dist/tooltip.js.map +1 -1
- package/js/dist/util/backdrop.js +166 -0
- package/js/dist/util/backdrop.js.map +1 -0
- package/js/dist/util/component-functions.js +47 -0
- package/js/dist/util/component-functions.js.map +1 -0
- package/js/dist/util/config.js +80 -0
- package/js/dist/util/config.js.map +1 -0
- package/js/dist/util/focustrap.js +130 -0
- package/js/dist/util/focustrap.js.map +1 -0
- package/js/dist/util/index.js +354 -0
- package/js/dist/util/index.js.map +1 -0
- package/js/dist/util/sanitizer.js +126 -0
- package/js/dist/util/sanitizer.js.map +1 -0
- package/js/dist/util/scrollbar.js +139 -0
- package/js/dist/util/scrollbar.js.map +1 -0
- package/js/dist/util/swipe.js +156 -0
- package/js/dist/util/swipe.js.map +1 -0
- package/js/dist/util/template-factory.js +178 -0
- package/js/dist/util/template-factory.js.map +1 -0
- package/js/src/alert.js +3 -15
- package/js/src/base-component.js +28 -18
- package/js/src/button.js +3 -15
- package/js/src/carousel.js +203 -320
- package/js/src/collapse.js +61 -94
- package/js/src/dom/data.js +1 -3
- package/js/src/dom/event-handler.js +74 -107
- package/js/src/dom/manipulator.js +22 -31
- package/js/src/dom/selector-engine.js +10 -19
- package/js/src/dropdown.js +84 -138
- package/js/src/modal.js +94 -158
- package/js/src/navigation.js +12 -13
- package/js/src/offcanvas.js +71 -60
- package/js/src/popover.js +31 -62
- package/js/src/scrollspy.js +166 -171
- package/js/src/sidebar.js +5 -8
- package/js/src/tab.js +201 -110
- package/js/src/toast.js +19 -41
- package/js/src/tooltip.js +264 -374
- package/js/src/util/backdrop.js +55 -36
- package/js/src/util/component-functions.js +1 -1
- package/js/src/util/config.js +66 -0
- package/js/src/util/focustrap.js +38 -28
- package/js/src/util/index.js +41 -57
- package/js/src/util/sanitizer.js +9 -17
- package/js/src/util/scrollbar.js +47 -30
- package/js/src/util/swipe.js +146 -0
- package/js/src/util/template-factory.js +160 -0
- package/package.json +40 -40
- package/scss/_accordion.scss +53 -25
- package/scss/_alert.scss +29 -9
- package/scss/_badge.scss +15 -6
- package/scss/_breadcrumb.scss +23 -11
- package/scss/_button-group.scss +3 -0
- package/scss/_buttons.scss +77 -50
- package/scss/_callout.scss +18 -6
- package/scss/_card.scss +55 -37
- package/scss/_carousel.scss +6 -6
- package/scss/_close.scss +4 -4
- package/scss/_containers.scss +1 -1
- package/scss/_dropdown.scss +86 -64
- package/scss/_footer.scss +15 -5
- package/scss/_functions.scss +11 -24
- package/scss/_grid.scss +3 -3
- package/scss/_header.scss +59 -34
- package/scss/_helpers.scss +1 -0
- package/scss/_images.scss +3 -3
- package/scss/_list-group.scss +47 -29
- package/scss/_maps.scss +54 -0
- package/scss/_modal.scss +70 -43
- package/scss/_nav.scss +53 -20
- package/scss/_navbar.scss +84 -94
- package/scss/_offcanvas.scss +120 -60
- package/scss/_pagination.scss +66 -21
- package/scss/_popover.scss +90 -52
- package/scss/_progress.scss +20 -9
- package/scss/_reboot.scss +31 -58
- package/scss/_root.scss +41 -21
- package/scss/_spinners.scss +37 -21
- package/scss/_subheader.scss +9 -9
- package/scss/_tables.scss +34 -36
- package/scss/_toasts.scss +35 -19
- package/scss/_tooltip.scss +61 -56
- package/scss/_utilities.scss +42 -27
- package/scss/_variables.scss +169 -148
- package/scss/coreui-grid.rtl.scss +2 -2
- package/scss/coreui-grid.scss +3 -2
- package/scss/coreui-reboot.rtl.scss +2 -2
- package/scss/coreui-reboot.scss +2 -2
- package/scss/coreui-utilities.rtl.scss +2 -2
- package/scss/coreui-utilities.scss +3 -2
- package/scss/coreui.rtl.scss +2 -2
- package/scss/coreui.scss +3 -2
- package/scss/forms/_floating-labels.scss +14 -3
- package/scss/forms/_form-check.scss +42 -19
- package/scss/forms/_form-control.scss +25 -50
- package/scss/forms/_form-range.scss +8 -8
- package/scss/forms/_form-select.scss +8 -8
- package/scss/forms/_form-text.scss +1 -1
- package/scss/forms/_input-group.scss +3 -3
- package/scss/forms/_labels.scss +2 -2
- package/scss/helpers/_color-bg.scss +10 -0
- package/scss/helpers/_colored-links.scss +2 -2
- package/scss/helpers/_position.scss +7 -1
- package/scss/helpers/_ratio.scss +2 -2
- package/scss/helpers/_vr.scss +1 -0
- package/scss/mixins/_alert.scss +10 -10
- package/scss/mixins/_breakpoints.scss +8 -8
- package/scss/mixins/_buttons.scss +45 -47
- package/scss/mixins/_container.scss +4 -2
- package/scss/mixins/_css-vars.scss +47 -47
- package/scss/mixins/_forms.scss +8 -0
- package/scss/mixins/_gradients.scss +1 -1
- package/scss/mixins/_grid.scss +11 -11
- package/scss/mixins/_list-group.scss +7 -9
- package/scss/mixins/_pagination.scss +4 -25
- package/scss/mixins/_table-variants.scss +20 -12
- package/scss/mixins/_utilities.scss +8 -3
- package/scss/sidebar/_sidebar-narrow.scss +10 -10
- package/scss/sidebar/_sidebar-nav.scss +33 -32
- package/scss/sidebar/_sidebar.scss +110 -56
package/js/dist/dropdown.js
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* CoreUI dropdown.js v4.1
|
|
2
|
+
* CoreUI dropdown.js v4.2.1 (https://coreui.io)
|
|
3
3
|
* Copyright 2022 The CoreUI Team (https://github.com/orgs/coreui/people)
|
|
4
4
|
* Licensed under MIT (https://coreui.io)
|
|
5
5
|
*/
|
|
6
6
|
(function (global, factory) {
|
|
7
|
-
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('@popperjs/core'), require('./dom/event-handler
|
|
8
|
-
typeof define === 'function' && define.amd ? define(['@popperjs/core', './dom/event-handler', './dom/manipulator', './dom/selector-engine', './base-component'], factory) :
|
|
9
|
-
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.Dropdown = factory(global.
|
|
10
|
-
})(this, (function (Popper, EventHandler, Manipulator, SelectorEngine, BaseComponent) { 'use strict';
|
|
7
|
+
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('@popperjs/core'), require('./util/index'), require('./dom/event-handler'), require('./dom/manipulator'), require('./dom/selector-engine'), require('./base-component')) :
|
|
8
|
+
typeof define === 'function' && define.amd ? define(['@popperjs/core', './util/index', './dom/event-handler', './dom/manipulator', './dom/selector-engine', './base-component'], factory) :
|
|
9
|
+
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.Dropdown = factory(global["@popperjs/core"], global.Index, global.EventHandler, global.Manipulator, global.SelectorEngine, global.BaseComponent));
|
|
10
|
+
})(this, (function (Popper, index, EventHandler, Manipulator, SelectorEngine, BaseComponent) { 'use strict';
|
|
11
11
|
|
|
12
12
|
const _interopDefaultLegacy = e => e && typeof e === 'object' && 'default' in e ? e : { default: e };
|
|
13
13
|
|
|
@@ -37,214 +37,7 @@
|
|
|
37
37
|
|
|
38
38
|
/**
|
|
39
39
|
* --------------------------------------------------------------------------
|
|
40
|
-
* CoreUI (v4.1
|
|
41
|
-
* Licensed under MIT (https://coreui.io/license)
|
|
42
|
-
*
|
|
43
|
-
* This component is a modified version of the Bootstrap's util/index.js
|
|
44
|
-
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
|
45
|
-
* --------------------------------------------------------------------------
|
|
46
|
-
*/
|
|
47
|
-
|
|
48
|
-
const toType = object => {
|
|
49
|
-
if (object === null || object === undefined) {
|
|
50
|
-
return `${object}`;
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
return Object.prototype.toString.call(object).match(/\s([a-z]+)/i)[1].toLowerCase();
|
|
54
|
-
};
|
|
55
|
-
|
|
56
|
-
const getSelector = element => {
|
|
57
|
-
let selector = element.getAttribute('data-coreui-target');
|
|
58
|
-
|
|
59
|
-
if (!selector || selector === '#') {
|
|
60
|
-
let hrefAttr = element.getAttribute('href'); // The only valid content that could double as a selector are IDs or classes,
|
|
61
|
-
// so everything starting with `#` or `.`. If a "real" URL is used as the selector,
|
|
62
|
-
// `document.querySelector` will rightfully complain it is invalid.
|
|
63
|
-
// See https://github.com/twbs/bootstrap/issues/32273
|
|
64
|
-
|
|
65
|
-
if (!hrefAttr || !hrefAttr.includes('#') && !hrefAttr.startsWith('.')) {
|
|
66
|
-
return null;
|
|
67
|
-
} // Just in case some CMS puts out a full URL with the anchor appended
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
if (hrefAttr.includes('#') && !hrefAttr.startsWith('#')) {
|
|
71
|
-
hrefAttr = `#${hrefAttr.split('#')[1]}`;
|
|
72
|
-
}
|
|
73
|
-
|
|
74
|
-
selector = hrefAttr && hrefAttr !== '#' ? hrefAttr.trim() : null;
|
|
75
|
-
}
|
|
76
|
-
|
|
77
|
-
return selector;
|
|
78
|
-
};
|
|
79
|
-
|
|
80
|
-
const getElementFromSelector = element => {
|
|
81
|
-
const selector = getSelector(element);
|
|
82
|
-
return selector ? document.querySelector(selector) : null;
|
|
83
|
-
};
|
|
84
|
-
|
|
85
|
-
const isElement = obj => {
|
|
86
|
-
if (!obj || typeof obj !== 'object') {
|
|
87
|
-
return false;
|
|
88
|
-
}
|
|
89
|
-
|
|
90
|
-
if (typeof obj.jquery !== 'undefined') {
|
|
91
|
-
obj = obj[0];
|
|
92
|
-
}
|
|
93
|
-
|
|
94
|
-
return typeof obj.nodeType !== 'undefined';
|
|
95
|
-
};
|
|
96
|
-
|
|
97
|
-
const getElement = obj => {
|
|
98
|
-
if (isElement(obj)) {
|
|
99
|
-
// it's a jQuery object or a node element
|
|
100
|
-
return obj.jquery ? obj[0] : obj;
|
|
101
|
-
}
|
|
102
|
-
|
|
103
|
-
if (typeof obj === 'string' && obj.length > 0) {
|
|
104
|
-
return document.querySelector(obj);
|
|
105
|
-
}
|
|
106
|
-
|
|
107
|
-
return null;
|
|
108
|
-
};
|
|
109
|
-
|
|
110
|
-
const typeCheckConfig = (componentName, config, configTypes) => {
|
|
111
|
-
Object.keys(configTypes).forEach(property => {
|
|
112
|
-
const expectedTypes = configTypes[property];
|
|
113
|
-
const value = config[property];
|
|
114
|
-
const valueType = value && isElement(value) ? 'element' : toType(value);
|
|
115
|
-
|
|
116
|
-
if (!new RegExp(expectedTypes).test(valueType)) {
|
|
117
|
-
throw new TypeError(`${componentName.toUpperCase()}: Option "${property}" provided type "${valueType}" but expected type "${expectedTypes}".`);
|
|
118
|
-
}
|
|
119
|
-
});
|
|
120
|
-
};
|
|
121
|
-
|
|
122
|
-
const isVisible = element => {
|
|
123
|
-
if (!isElement(element) || element.getClientRects().length === 0) {
|
|
124
|
-
return false;
|
|
125
|
-
}
|
|
126
|
-
|
|
127
|
-
const elementIsVisible = getComputedStyle(element).getPropertyValue('visibility') === 'visible'; // Handle `details` element as its content may falsie appear visible when it is closed
|
|
128
|
-
|
|
129
|
-
const closedDetails = element.closest('details:not([open])');
|
|
130
|
-
|
|
131
|
-
if (!closedDetails) {
|
|
132
|
-
return elementIsVisible;
|
|
133
|
-
}
|
|
134
|
-
|
|
135
|
-
if (closedDetails !== element) {
|
|
136
|
-
const summary = element.closest('summary');
|
|
137
|
-
|
|
138
|
-
if (summary && summary.parentNode !== closedDetails) {
|
|
139
|
-
return false;
|
|
140
|
-
}
|
|
141
|
-
|
|
142
|
-
if (summary === null) {
|
|
143
|
-
return false;
|
|
144
|
-
}
|
|
145
|
-
}
|
|
146
|
-
|
|
147
|
-
return elementIsVisible;
|
|
148
|
-
};
|
|
149
|
-
|
|
150
|
-
const isDisabled = element => {
|
|
151
|
-
if (!element || element.nodeType !== Node.ELEMENT_NODE) {
|
|
152
|
-
return true;
|
|
153
|
-
}
|
|
154
|
-
|
|
155
|
-
if (element.classList.contains('disabled')) {
|
|
156
|
-
return true;
|
|
157
|
-
}
|
|
158
|
-
|
|
159
|
-
if (typeof element.disabled !== 'undefined') {
|
|
160
|
-
return element.disabled;
|
|
161
|
-
}
|
|
162
|
-
|
|
163
|
-
return element.hasAttribute('disabled') && element.getAttribute('disabled') !== 'false';
|
|
164
|
-
};
|
|
165
|
-
|
|
166
|
-
const noop = () => {};
|
|
167
|
-
|
|
168
|
-
const getjQuery = () => {
|
|
169
|
-
const {
|
|
170
|
-
jQuery
|
|
171
|
-
} = window;
|
|
172
|
-
|
|
173
|
-
if (jQuery && !document.body.hasAttribute('data-coreui-no-jquery')) {
|
|
174
|
-
return jQuery;
|
|
175
|
-
}
|
|
176
|
-
|
|
177
|
-
return null;
|
|
178
|
-
};
|
|
179
|
-
|
|
180
|
-
const DOMContentLoadedCallbacks = [];
|
|
181
|
-
|
|
182
|
-
const onDOMContentLoaded = callback => {
|
|
183
|
-
if (document.readyState === 'loading') {
|
|
184
|
-
// add listener on the first call when the document is in loading state
|
|
185
|
-
if (!DOMContentLoadedCallbacks.length) {
|
|
186
|
-
document.addEventListener('DOMContentLoaded', () => {
|
|
187
|
-
DOMContentLoadedCallbacks.forEach(callback => callback());
|
|
188
|
-
});
|
|
189
|
-
}
|
|
190
|
-
|
|
191
|
-
DOMContentLoadedCallbacks.push(callback);
|
|
192
|
-
} else {
|
|
193
|
-
callback();
|
|
194
|
-
}
|
|
195
|
-
};
|
|
196
|
-
|
|
197
|
-
const isRTL = () => document.documentElement.dir === 'rtl';
|
|
198
|
-
|
|
199
|
-
const defineJQueryPlugin = plugin => {
|
|
200
|
-
onDOMContentLoaded(() => {
|
|
201
|
-
const $ = getjQuery();
|
|
202
|
-
/* istanbul ignore if */
|
|
203
|
-
|
|
204
|
-
if ($) {
|
|
205
|
-
const name = plugin.NAME;
|
|
206
|
-
const JQUERY_NO_CONFLICT = $.fn[name];
|
|
207
|
-
$.fn[name] = plugin.jQueryInterface;
|
|
208
|
-
$.fn[name].Constructor = plugin;
|
|
209
|
-
|
|
210
|
-
$.fn[name].noConflict = () => {
|
|
211
|
-
$.fn[name] = JQUERY_NO_CONFLICT;
|
|
212
|
-
return plugin.jQueryInterface;
|
|
213
|
-
};
|
|
214
|
-
}
|
|
215
|
-
});
|
|
216
|
-
};
|
|
217
|
-
/**
|
|
218
|
-
* Return the previous/next element of a list.
|
|
219
|
-
*
|
|
220
|
-
* @param {array} list The list of elements
|
|
221
|
-
* @param activeElement The active element
|
|
222
|
-
* @param shouldGetNext Choose to get next or previous element
|
|
223
|
-
* @param isCycleAllowed
|
|
224
|
-
* @return {Element|elem} The proper element
|
|
225
|
-
*/
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
const getNextActiveElement = (list, activeElement, shouldGetNext, isCycleAllowed) => {
|
|
229
|
-
let index = list.indexOf(activeElement); // if the element does not exist in the list return an element depending on the direction and if cycle is allowed
|
|
230
|
-
|
|
231
|
-
if (index === -1) {
|
|
232
|
-
return list[!shouldGetNext && isCycleAllowed ? list.length - 1 : 0];
|
|
233
|
-
}
|
|
234
|
-
|
|
235
|
-
const listLength = list.length;
|
|
236
|
-
index += shouldGetNext ? 1 : -1;
|
|
237
|
-
|
|
238
|
-
if (isCycleAllowed) {
|
|
239
|
-
index = (index + listLength) % listLength;
|
|
240
|
-
}
|
|
241
|
-
|
|
242
|
-
return list[Math.max(0, Math.min(index, listLength - 1))];
|
|
243
|
-
};
|
|
244
|
-
|
|
245
|
-
/**
|
|
246
|
-
* --------------------------------------------------------------------------
|
|
247
|
-
* CoreUI (v4.1.5): dropdown.js
|
|
40
|
+
* CoreUI (v4.2.1): dropdown.js
|
|
248
41
|
* Licensed under MIT (https://coreui.io/license)
|
|
249
42
|
*
|
|
250
43
|
* This component is a modified version of the Bootstrap's dropdown.js
|
|
@@ -252,9 +45,7 @@
|
|
|
252
45
|
* --------------------------------------------------------------------------
|
|
253
46
|
*/
|
|
254
47
|
/**
|
|
255
|
-
* ------------------------------------------------------------------------
|
|
256
48
|
* Constants
|
|
257
|
-
* ------------------------------------------------------------------------
|
|
258
49
|
*/
|
|
259
50
|
|
|
260
51
|
const NAME = 'dropdown';
|
|
@@ -262,13 +53,11 @@
|
|
|
262
53
|
const EVENT_KEY = `.${DATA_KEY}`;
|
|
263
54
|
const DATA_API_KEY = '.data-api';
|
|
264
55
|
const ESCAPE_KEY = 'Escape';
|
|
265
|
-
const SPACE_KEY = 'Space';
|
|
266
56
|
const TAB_KEY = 'Tab';
|
|
267
57
|
const ARROW_UP_KEY = 'ArrowUp';
|
|
268
58
|
const ARROW_DOWN_KEY = 'ArrowDown';
|
|
269
59
|
const RIGHT_MOUSE_BUTTON = 2; // MouseEvent.button value for the secondary button, usually the right button
|
|
270
60
|
|
|
271
|
-
const REGEXP_KEYDOWN = new RegExp(`${ARROW_UP_KEY}|${ARROW_DOWN_KEY}|${ESCAPE_KEY}`);
|
|
272
61
|
const EVENT_HIDE = `hide${EVENT_KEY}`;
|
|
273
62
|
const EVENT_HIDDEN = `hidden${EVENT_KEY}`;
|
|
274
63
|
const EVENT_SHOW = `show${EVENT_KEY}`;
|
|
@@ -280,45 +69,49 @@
|
|
|
280
69
|
const CLASS_NAME_DROPUP = 'dropup';
|
|
281
70
|
const CLASS_NAME_DROPEND = 'dropend';
|
|
282
71
|
const CLASS_NAME_DROPSTART = 'dropstart';
|
|
283
|
-
const
|
|
284
|
-
const
|
|
72
|
+
const CLASS_NAME_DROPUP_CENTER = 'dropup-center';
|
|
73
|
+
const CLASS_NAME_DROPDOWN_CENTER = 'dropdown-center';
|
|
74
|
+
const SELECTOR_DATA_TOGGLE = '[data-coreui-toggle="dropdown"]:not(.disabled):not(:disabled)';
|
|
75
|
+
const SELECTOR_DATA_TOGGLE_SHOWN = `${SELECTOR_DATA_TOGGLE}.${CLASS_NAME_SHOW}`;
|
|
285
76
|
const SELECTOR_MENU = '.dropdown-menu';
|
|
77
|
+
const SELECTOR_NAVBAR = '.navbar';
|
|
286
78
|
const SELECTOR_NAVBAR_NAV = '.navbar-nav';
|
|
287
79
|
const SELECTOR_VISIBLE_ITEMS = '.dropdown-menu .dropdown-item:not(.disabled):not(:disabled)';
|
|
288
|
-
const PLACEMENT_TOP = isRTL() ? 'top-end' : 'top-start';
|
|
289
|
-
const PLACEMENT_TOPEND = isRTL() ? 'top-start' : 'top-end';
|
|
290
|
-
const PLACEMENT_BOTTOM = isRTL() ? 'bottom-end' : 'bottom-start';
|
|
291
|
-
const PLACEMENT_BOTTOMEND = isRTL() ? 'bottom-start' : 'bottom-end';
|
|
292
|
-
const PLACEMENT_RIGHT = isRTL() ? 'left-start' : 'right-start';
|
|
293
|
-
const PLACEMENT_LEFT = isRTL() ? 'right-start' : 'left-start';
|
|
80
|
+
const PLACEMENT_TOP = index.isRTL() ? 'top-end' : 'top-start';
|
|
81
|
+
const PLACEMENT_TOPEND = index.isRTL() ? 'top-start' : 'top-end';
|
|
82
|
+
const PLACEMENT_BOTTOM = index.isRTL() ? 'bottom-end' : 'bottom-start';
|
|
83
|
+
const PLACEMENT_BOTTOMEND = index.isRTL() ? 'bottom-start' : 'bottom-end';
|
|
84
|
+
const PLACEMENT_RIGHT = index.isRTL() ? 'left-start' : 'right-start';
|
|
85
|
+
const PLACEMENT_LEFT = index.isRTL() ? 'right-start' : 'left-start';
|
|
86
|
+
const PLACEMENT_TOPCENTER = 'top';
|
|
87
|
+
const PLACEMENT_BOTTOMCENTER = 'bottom';
|
|
294
88
|
const Default = {
|
|
295
|
-
|
|
89
|
+
autoClose: true,
|
|
296
90
|
boundary: 'clippingParents',
|
|
297
|
-
reference: 'toggle',
|
|
298
91
|
display: 'dynamic',
|
|
92
|
+
offset: [0, 2],
|
|
299
93
|
popperConfig: null,
|
|
300
|
-
|
|
94
|
+
reference: 'toggle'
|
|
301
95
|
};
|
|
302
96
|
const DefaultType = {
|
|
303
|
-
|
|
97
|
+
autoClose: '(boolean|string)',
|
|
304
98
|
boundary: '(string|element)',
|
|
305
|
-
reference: '(string|element|object)',
|
|
306
99
|
display: 'string',
|
|
100
|
+
offset: '(array|string|function)',
|
|
307
101
|
popperConfig: '(null|object|function)',
|
|
308
|
-
|
|
102
|
+
reference: '(string|element|object)'
|
|
309
103
|
};
|
|
310
104
|
/**
|
|
311
|
-
*
|
|
312
|
-
* Class Definition
|
|
313
|
-
* ------------------------------------------------------------------------
|
|
105
|
+
* Class definition
|
|
314
106
|
*/
|
|
315
107
|
|
|
316
108
|
class Dropdown extends BaseComponent__default.default {
|
|
317
109
|
constructor(element, config) {
|
|
318
|
-
super(element);
|
|
110
|
+
super(element, config);
|
|
319
111
|
this._popper = null;
|
|
320
|
-
this.
|
|
321
|
-
|
|
112
|
+
this._parent = this._element.parentNode; // dropdown wrapper
|
|
113
|
+
|
|
114
|
+
this._menu = SelectorEngine__default.default.findOne(SELECTOR_MENU, this._parent);
|
|
322
115
|
this._inNavbar = this._detectNavbar();
|
|
323
116
|
} // Getters
|
|
324
117
|
|
|
@@ -341,7 +134,7 @@
|
|
|
341
134
|
}
|
|
342
135
|
|
|
343
136
|
show() {
|
|
344
|
-
if (isDisabled(this._element) || this._isShown(
|
|
137
|
+
if (index.isDisabled(this._element) || this._isShown()) {
|
|
345
138
|
return;
|
|
346
139
|
}
|
|
347
140
|
|
|
@@ -354,20 +147,16 @@
|
|
|
354
147
|
return;
|
|
355
148
|
}
|
|
356
149
|
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
if (this._inNavbar) {
|
|
360
|
-
Manipulator__default.default.setDataAttribute(this._menu, 'popper', 'none');
|
|
361
|
-
} else {
|
|
362
|
-
this._createPopper(parent);
|
|
363
|
-
} // If this is a touch-enabled device we add extra
|
|
150
|
+
this._createPopper(); // If this is a touch-enabled device we add extra
|
|
364
151
|
// empty mouseover listeners to the body's immediate children;
|
|
365
152
|
// only needed because of broken event delegation on iOS
|
|
366
153
|
// https://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html
|
|
367
154
|
|
|
368
155
|
|
|
369
|
-
if ('ontouchstart' in document.documentElement && !
|
|
370
|
-
[].concat(...document.body.children)
|
|
156
|
+
if ('ontouchstart' in document.documentElement && !this._parent.closest(SELECTOR_NAVBAR_NAV)) {
|
|
157
|
+
for (const element of [].concat(...document.body.children)) {
|
|
158
|
+
EventHandler__default.default.on(element, 'mouseover', index.noop);
|
|
159
|
+
}
|
|
371
160
|
}
|
|
372
161
|
|
|
373
162
|
this._element.focus();
|
|
@@ -382,7 +171,7 @@
|
|
|
382
171
|
}
|
|
383
172
|
|
|
384
173
|
hide() {
|
|
385
|
-
if (isDisabled(this._element) || !this._isShown(
|
|
174
|
+
if (index.isDisabled(this._element) || !this._isShown()) {
|
|
386
175
|
return;
|
|
387
176
|
}
|
|
388
177
|
|
|
@@ -420,7 +209,9 @@
|
|
|
420
209
|
|
|
421
210
|
|
|
422
211
|
if ('ontouchstart' in document.documentElement) {
|
|
423
|
-
[].concat(...document.body.children)
|
|
212
|
+
for (const element of [].concat(...document.body.children)) {
|
|
213
|
+
EventHandler__default.default.off(element, 'mouseover', index.noop);
|
|
214
|
+
}
|
|
424
215
|
}
|
|
425
216
|
|
|
426
217
|
if (this._popper) {
|
|
@@ -438,13 +229,9 @@
|
|
|
438
229
|
}
|
|
439
230
|
|
|
440
231
|
_getConfig(config) {
|
|
441
|
-
config =
|
|
442
|
-
...Manipulator__default.default.getDataAttributes(this._element),
|
|
443
|
-
...config
|
|
444
|
-
};
|
|
445
|
-
typeCheckConfig(NAME, config, this.constructor.DefaultType);
|
|
232
|
+
config = super._getConfig(config);
|
|
446
233
|
|
|
447
|
-
if (typeof config.reference === 'object' && !isElement(config.reference) && typeof config.reference.getBoundingClientRect !== 'function') {
|
|
234
|
+
if (typeof config.reference === 'object' && !index.isElement(config.reference) && typeof config.reference.getBoundingClientRect !== 'function') {
|
|
448
235
|
// Popper virtual elements require a getBoundingClientRect method
|
|
449
236
|
throw new TypeError(`${NAME.toUpperCase()}: Option "reference" provided type "object" without a required "getBoundingClientRect" method.`);
|
|
450
237
|
}
|
|
@@ -452,7 +239,7 @@
|
|
|
452
239
|
return config;
|
|
453
240
|
}
|
|
454
241
|
|
|
455
|
-
_createPopper(
|
|
242
|
+
_createPopper() {
|
|
456
243
|
if (typeof Popper__namespace === 'undefined') {
|
|
457
244
|
throw new TypeError('Bootstrap\'s dropdowns require Popper (https://popper.js.org)');
|
|
458
245
|
}
|
|
@@ -460,33 +247,24 @@
|
|
|
460
247
|
let referenceElement = this._element;
|
|
461
248
|
|
|
462
249
|
if (this._config.reference === 'parent') {
|
|
463
|
-
referenceElement =
|
|
464
|
-
} else if (isElement(this._config.reference)) {
|
|
465
|
-
referenceElement = getElement(this._config.reference);
|
|
250
|
+
referenceElement = this._parent;
|
|
251
|
+
} else if (index.isElement(this._config.reference)) {
|
|
252
|
+
referenceElement = index.getElement(this._config.reference);
|
|
466
253
|
} else if (typeof this._config.reference === 'object') {
|
|
467
254
|
referenceElement = this._config.reference;
|
|
468
255
|
}
|
|
469
256
|
|
|
470
257
|
const popperConfig = this._getPopperConfig();
|
|
471
258
|
|
|
472
|
-
const isDisplayStatic = popperConfig.modifiers.find(modifier => modifier.name === 'applyStyles' && modifier.enabled === false);
|
|
473
259
|
this._popper = Popper__namespace.createPopper(referenceElement, this._menu, popperConfig);
|
|
474
|
-
|
|
475
|
-
if (isDisplayStatic) {
|
|
476
|
-
Manipulator__default.default.setDataAttribute(this._menu, 'popper', 'static');
|
|
477
|
-
}
|
|
478
260
|
}
|
|
479
261
|
|
|
480
|
-
_isShown(
|
|
481
|
-
return
|
|
482
|
-
}
|
|
483
|
-
|
|
484
|
-
_getMenuElement() {
|
|
485
|
-
return SelectorEngine__default.default.next(this._element, SELECTOR_MENU)[0];
|
|
262
|
+
_isShown() {
|
|
263
|
+
return this._menu.classList.contains(CLASS_NAME_SHOW);
|
|
486
264
|
}
|
|
487
265
|
|
|
488
266
|
_getPlacement() {
|
|
489
|
-
const parentDropdown = this.
|
|
267
|
+
const parentDropdown = this._parent;
|
|
490
268
|
|
|
491
269
|
if (parentDropdown.classList.contains(CLASS_NAME_DROPEND)) {
|
|
492
270
|
return PLACEMENT_RIGHT;
|
|
@@ -494,6 +272,14 @@
|
|
|
494
272
|
|
|
495
273
|
if (parentDropdown.classList.contains(CLASS_NAME_DROPSTART)) {
|
|
496
274
|
return PLACEMENT_LEFT;
|
|
275
|
+
}
|
|
276
|
+
|
|
277
|
+
if (parentDropdown.classList.contains(CLASS_NAME_DROPUP_CENTER)) {
|
|
278
|
+
return PLACEMENT_TOPCENTER;
|
|
279
|
+
}
|
|
280
|
+
|
|
281
|
+
if (parentDropdown.classList.contains(CLASS_NAME_DROPDOWN_CENTER)) {
|
|
282
|
+
return PLACEMENT_BOTTOMCENTER;
|
|
497
283
|
} // We need to trim the value because custom properties can also include spaces
|
|
498
284
|
|
|
499
285
|
|
|
@@ -507,7 +293,7 @@
|
|
|
507
293
|
}
|
|
508
294
|
|
|
509
295
|
_detectNavbar() {
|
|
510
|
-
return this._element.closest(
|
|
296
|
+
return this._element.closest(SELECTOR_NAVBAR) !== null;
|
|
511
297
|
}
|
|
512
298
|
|
|
513
299
|
_getOffset() {
|
|
@@ -516,7 +302,7 @@
|
|
|
516
302
|
} = this._config;
|
|
517
303
|
|
|
518
304
|
if (typeof offset === 'string') {
|
|
519
|
-
return offset.split(',').map(
|
|
305
|
+
return offset.split(',').map(value => Number.parseInt(value, 10));
|
|
520
306
|
}
|
|
521
307
|
|
|
522
308
|
if (typeof offset === 'function') {
|
|
@@ -540,9 +326,11 @@
|
|
|
540
326
|
offset: this._getOffset()
|
|
541
327
|
}
|
|
542
328
|
}]
|
|
543
|
-
}; // Disable Popper if we have a static display
|
|
329
|
+
}; // Disable Popper if we have a static display or Dropdown is in Navbar
|
|
330
|
+
|
|
331
|
+
if (this._inNavbar || this._config.display === 'static') {
|
|
332
|
+
Manipulator__default.default.setDataAttribute(this._menu, 'popper', 'static'); // todo:v6 remove
|
|
544
333
|
|
|
545
|
-
if (this._config.display === 'static') {
|
|
546
334
|
defaultBsPopperConfig.modifiers = [{
|
|
547
335
|
name: 'applyStyles',
|
|
548
336
|
enabled: false
|
|
@@ -558,7 +346,7 @@
|
|
|
558
346
|
key,
|
|
559
347
|
target
|
|
560
348
|
}) {
|
|
561
|
-
const items = SelectorEngine__default.default.find(SELECTOR_VISIBLE_ITEMS, this._menu).filter(isVisible);
|
|
349
|
+
const items = SelectorEngine__default.default.find(SELECTOR_VISIBLE_ITEMS, this._menu).filter(element => index.isVisible(element));
|
|
562
350
|
|
|
563
351
|
if (!items.length) {
|
|
564
352
|
return;
|
|
@@ -566,7 +354,7 @@
|
|
|
566
354
|
// allow cycling to get the last item in case key equals ARROW_UP_KEY
|
|
567
355
|
|
|
568
356
|
|
|
569
|
-
getNextActiveElement(items, target, key === ARROW_DOWN_KEY, !items.includes(target)).focus();
|
|
357
|
+
index.getNextActiveElement(items, target, key === ARROW_DOWN_KEY, !items.includes(target)).focus();
|
|
570
358
|
} // Static
|
|
571
359
|
|
|
572
360
|
|
|
@@ -587,20 +375,28 @@
|
|
|
587
375
|
}
|
|
588
376
|
|
|
589
377
|
static clearMenus(event) {
|
|
590
|
-
if (event
|
|
378
|
+
if (event.button === RIGHT_MOUSE_BUTTON || event.type === 'keyup' && event.key !== TAB_KEY) {
|
|
591
379
|
return;
|
|
592
380
|
}
|
|
593
381
|
|
|
594
|
-
const
|
|
382
|
+
const openToggles = SelectorEngine__default.default.find(SELECTOR_DATA_TOGGLE_SHOWN);
|
|
595
383
|
|
|
596
|
-
for (
|
|
597
|
-
const context = Dropdown.getInstance(
|
|
384
|
+
for (const toggle of openToggles) {
|
|
385
|
+
const context = Dropdown.getInstance(toggle);
|
|
598
386
|
|
|
599
387
|
if (!context || context._config.autoClose === false) {
|
|
600
388
|
continue;
|
|
601
389
|
}
|
|
602
390
|
|
|
603
|
-
|
|
391
|
+
const composedPath = event.composedPath();
|
|
392
|
+
const isMenuTarget = composedPath.includes(context._menu);
|
|
393
|
+
|
|
394
|
+
if (composedPath.includes(context._element) || context._config.autoClose === 'inside' && !isMenuTarget || context._config.autoClose === 'outside' && isMenuTarget) {
|
|
395
|
+
continue;
|
|
396
|
+
} // Tab navigation through the dropdown menu or events from contained inputs shouldn't close the menu
|
|
397
|
+
|
|
398
|
+
|
|
399
|
+
if (context._menu.contains(event.target) && (event.type === 'keyup' && event.key === TAB_KEY || /input|select|option|textarea|form/i.test(event.target.tagName))) {
|
|
604
400
|
continue;
|
|
605
401
|
}
|
|
606
402
|
|
|
@@ -608,85 +404,53 @@
|
|
|
608
404
|
relatedTarget: context._element
|
|
609
405
|
};
|
|
610
406
|
|
|
611
|
-
if (event) {
|
|
612
|
-
|
|
613
|
-
const isMenuTarget = composedPath.includes(context._menu);
|
|
614
|
-
|
|
615
|
-
if (composedPath.includes(context._element) || context._config.autoClose === 'inside' && !isMenuTarget || context._config.autoClose === 'outside' && isMenuTarget) {
|
|
616
|
-
continue;
|
|
617
|
-
} // Tab navigation through the dropdown menu or events from contained inputs shouldn't close the menu
|
|
618
|
-
|
|
619
|
-
|
|
620
|
-
if (context._menu.contains(event.target) && (event.type === 'keyup' && event.key === TAB_KEY || /input|select|option|textarea|form/i.test(event.target.tagName))) {
|
|
621
|
-
continue;
|
|
622
|
-
}
|
|
623
|
-
|
|
624
|
-
if (event.type === 'click') {
|
|
625
|
-
relatedTarget.clickEvent = event;
|
|
626
|
-
}
|
|
407
|
+
if (event.type === 'click') {
|
|
408
|
+
relatedTarget.clickEvent = event;
|
|
627
409
|
}
|
|
628
410
|
|
|
629
411
|
context._completeHide(relatedTarget);
|
|
630
412
|
}
|
|
631
413
|
}
|
|
632
414
|
|
|
633
|
-
static getParentFromElement(element) {
|
|
634
|
-
return getElementFromSelector(element) || element.parentNode;
|
|
635
|
-
}
|
|
636
|
-
|
|
637
415
|
static dataApiKeydownHandler(event) {
|
|
638
|
-
// If not
|
|
639
|
-
//
|
|
640
|
-
|
|
641
|
-
|
|
642
|
-
|
|
643
|
-
// - If key is not up or down => not a dropdown command
|
|
644
|
-
// - If trigger inside the menu => not a dropdown command
|
|
645
|
-
if (/input|textarea/i.test(event.target.tagName) ? event.key === SPACE_KEY || event.key !== ESCAPE_KEY && (event.key !== ARROW_DOWN_KEY && event.key !== ARROW_UP_KEY || event.target.closest(SELECTOR_MENU)) : !REGEXP_KEYDOWN.test(event.key)) {
|
|
646
|
-
return;
|
|
647
|
-
}
|
|
416
|
+
// If not an UP | DOWN | ESCAPE key => not a dropdown command
|
|
417
|
+
// If input/textarea && if key is other than ESCAPE => not a dropdown command
|
|
418
|
+
const isInput = /input|textarea/i.test(event.target.tagName);
|
|
419
|
+
const isEscapeEvent = event.key === ESCAPE_KEY;
|
|
420
|
+
const isUpOrDownEvent = [ARROW_UP_KEY, ARROW_DOWN_KEY].includes(event.key);
|
|
648
421
|
|
|
649
|
-
|
|
650
|
-
|
|
651
|
-
if (!isActive && event.key === ESCAPE_KEY) {
|
|
422
|
+
if (!isUpOrDownEvent && !isEscapeEvent) {
|
|
652
423
|
return;
|
|
653
424
|
}
|
|
654
425
|
|
|
655
|
-
|
|
656
|
-
event.stopPropagation();
|
|
657
|
-
|
|
658
|
-
if (isDisabled(this)) {
|
|
426
|
+
if (isInput && !isEscapeEvent) {
|
|
659
427
|
return;
|
|
660
428
|
}
|
|
661
429
|
|
|
662
|
-
|
|
430
|
+
event.preventDefault();
|
|
431
|
+
const getToggleButton = SelectorEngine__default.default.findOne(SELECTOR_DATA_TOGGLE, event.delegateTarget.parentNode);
|
|
663
432
|
const instance = Dropdown.getOrCreateInstance(getToggleButton);
|
|
664
433
|
|
|
665
|
-
if (
|
|
666
|
-
|
|
667
|
-
|
|
668
|
-
}
|
|
669
|
-
|
|
670
|
-
if (event.key === ARROW_UP_KEY || event.key === ARROW_DOWN_KEY) {
|
|
671
|
-
if (!isActive) {
|
|
672
|
-
instance.show();
|
|
673
|
-
}
|
|
434
|
+
if (isUpOrDownEvent) {
|
|
435
|
+
event.stopPropagation();
|
|
436
|
+
instance.show();
|
|
674
437
|
|
|
675
438
|
instance._selectMenuItem(event);
|
|
676
439
|
|
|
677
440
|
return;
|
|
678
441
|
}
|
|
679
442
|
|
|
680
|
-
if (
|
|
681
|
-
|
|
443
|
+
if (instance._isShown()) {
|
|
444
|
+
// else is escape and we check if it is shown
|
|
445
|
+
event.stopPropagation();
|
|
446
|
+
instance.hide();
|
|
447
|
+
getToggleButton.focus();
|
|
682
448
|
}
|
|
683
449
|
}
|
|
684
450
|
|
|
685
451
|
}
|
|
686
452
|
/**
|
|
687
|
-
*
|
|
688
|
-
* Data Api implementation
|
|
689
|
-
* ------------------------------------------------------------------------
|
|
453
|
+
* Data API implementation
|
|
690
454
|
*/
|
|
691
455
|
|
|
692
456
|
|
|
@@ -699,13 +463,10 @@
|
|
|
699
463
|
Dropdown.getOrCreateInstance(this).toggle();
|
|
700
464
|
});
|
|
701
465
|
/**
|
|
702
|
-
* ------------------------------------------------------------------------
|
|
703
466
|
* jQuery
|
|
704
|
-
* ------------------------------------------------------------------------
|
|
705
|
-
* add .Dropdown to jQuery only if jQuery is present
|
|
706
467
|
*/
|
|
707
468
|
|
|
708
|
-
defineJQueryPlugin(Dropdown);
|
|
469
|
+
index.defineJQueryPlugin(Dropdown);
|
|
709
470
|
|
|
710
471
|
return Dropdown;
|
|
711
472
|
|