@hummingbirdui/hummingbird
Version:
An open-source system designed for rapid development, without sacrificing the granular control of utility-first CSS.
259 lines (258 loc) • 10.8 kB
JavaScript
"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const baseComponent = require("../utils/base-component.js");
const selectorEngine = require("../utils/selector-engine.js");
var tab$1 = { exports: {} };
/*!
* Bootstrap tab.js v5.3.8 (https://getbootstrap.com/)
* Copyright 2011-2025 The Bootstrap Authors (https://github.com/twbs/bootstrap/graphs/contributors)
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
*/
var tab = tab$1.exports;
var hasRequiredTab;
function requireTab() {
if (hasRequiredTab) return tab$1.exports;
hasRequiredTab = 1;
(function(module2, exports2) {
(function(global, factory) {
module2.exports = factory(baseComponent.requireBaseComponent(), baseComponent.requireEventHandler(), selectorEngine.requireSelectorEngine(), baseComponent.requireUtil());
})(tab, function(BaseComponent, EventHandler, SelectorEngine, index_js) {
const NAME = "tab";
const DATA_KEY = "bs.tab";
const EVENT_KEY = `.${DATA_KEY}`;
const EVENT_HIDE = `hide${EVENT_KEY}`;
const EVENT_HIDDEN = `hidden${EVENT_KEY}`;
const EVENT_SHOW = `show${EVENT_KEY}`;
const EVENT_SHOWN = `shown${EVENT_KEY}`;
const EVENT_CLICK_DATA_API = `click${EVENT_KEY}`;
const EVENT_KEYDOWN = `keydown${EVENT_KEY}`;
const EVENT_LOAD_DATA_API = `load${EVENT_KEY}`;
const ARROW_LEFT_KEY = "ArrowLeft";
const ARROW_RIGHT_KEY = "ArrowRight";
const ARROW_UP_KEY = "ArrowUp";
const ARROW_DOWN_KEY = "ArrowDown";
const HOME_KEY = "Home";
const END_KEY = "End";
const CLASS_NAME_ACTIVE = "active";
const CLASS_NAME_FADE = "fade";
const CLASS_NAME_SHOW = "show";
const CLASS_DROPDOWN = "dropdown";
const SELECTOR_DROPDOWN_TOGGLE = ".dropdown-toggle";
const SELECTOR_DROPDOWN_MENU = ".dropdown-menu";
const NOT_SELECTOR_DROPDOWN_TOGGLE = `:not(${SELECTOR_DROPDOWN_TOGGLE})`;
const SELECTOR_TAB_PANEL = '.list-group, .nav, [role="tablist"]';
const SELECTOR_OUTER = ".nav-item, .list-group-item";
const SELECTOR_INNER = `.nav-link${NOT_SELECTOR_DROPDOWN_TOGGLE}, .list-group-item${NOT_SELECTOR_DROPDOWN_TOGGLE}, [role="tab"]${NOT_SELECTOR_DROPDOWN_TOGGLE}`;
const SELECTOR_DATA_TOGGLE = '[data-bs-toggle="tab"], [data-bs-toggle="pill"], [data-bs-toggle="list"]';
const SELECTOR_INNER_ELEM = `${SELECTOR_INNER}, ${SELECTOR_DATA_TOGGLE}`;
const SELECTOR_DATA_TOGGLE_ACTIVE = `.${CLASS_NAME_ACTIVE}[data-bs-toggle="tab"], .${CLASS_NAME_ACTIVE}[data-bs-toggle="pill"], .${CLASS_NAME_ACTIVE}[data-bs-toggle="list"]`;
class Tab2 extends BaseComponent {
constructor(element) {
super(element);
this._parent = this._element.closest(SELECTOR_TAB_PANEL);
if (!this._parent) {
return;
}
this._setInitialAttributes(this._parent, this._getChildren());
EventHandler.on(this._element, EVENT_KEYDOWN, (event) => this._keydown(event));
}
// Getters
static get NAME() {
return NAME;
}
// Public
show() {
const innerElem = this._element;
if (this._elemIsActive(innerElem)) {
return;
}
const active = this._getActiveElem();
const hideEvent = active ? EventHandler.trigger(active, EVENT_HIDE, {
relatedTarget: innerElem
}) : null;
const showEvent = EventHandler.trigger(innerElem, EVENT_SHOW, {
relatedTarget: active
});
if (showEvent.defaultPrevented || hideEvent && hideEvent.defaultPrevented) {
return;
}
this._deactivate(active, innerElem);
this._activate(innerElem, active);
}
// Private
_activate(element, relatedElem) {
if (!element) {
return;
}
element.classList.add(CLASS_NAME_ACTIVE);
this._activate(SelectorEngine.getElementFromSelector(element));
const complete = () => {
if (element.getAttribute("role") !== "tab") {
element.classList.add(CLASS_NAME_SHOW);
return;
}
element.removeAttribute("tabindex");
element.setAttribute("aria-selected", true);
this._toggleDropDown(element, true);
EventHandler.trigger(element, EVENT_SHOWN, {
relatedTarget: relatedElem
});
};
this._queueCallback(complete, element, element.classList.contains(CLASS_NAME_FADE));
}
_deactivate(element, relatedElem) {
if (!element) {
return;
}
element.classList.remove(CLASS_NAME_ACTIVE);
element.blur();
this._deactivate(SelectorEngine.getElementFromSelector(element));
const complete = () => {
if (element.getAttribute("role") !== "tab") {
element.classList.remove(CLASS_NAME_SHOW);
return;
}
element.setAttribute("aria-selected", false);
element.setAttribute("tabindex", "-1");
this._toggleDropDown(element, false);
EventHandler.trigger(element, EVENT_HIDDEN, {
relatedTarget: relatedElem
});
};
this._queueCallback(complete, element, element.classList.contains(CLASS_NAME_FADE));
}
_keydown(event) {
if (![ARROW_LEFT_KEY, ARROW_RIGHT_KEY, ARROW_UP_KEY, ARROW_DOWN_KEY, HOME_KEY, END_KEY].includes(event.key)) {
return;
}
event.stopPropagation();
event.preventDefault();
const children = this._getChildren().filter((element) => !index_js.isDisabled(element));
let nextActiveElement;
if ([HOME_KEY, END_KEY].includes(event.key)) {
nextActiveElement = children[event.key === HOME_KEY ? 0 : children.length - 1];
} else {
const isNext = [ARROW_RIGHT_KEY, ARROW_DOWN_KEY].includes(event.key);
nextActiveElement = index_js.getNextActiveElement(children, event.target, isNext, true);
}
if (nextActiveElement) {
nextActiveElement.focus({
preventScroll: true
});
Tab2.getOrCreateInstance(nextActiveElement).show();
}
}
_getChildren() {
return SelectorEngine.find(SELECTOR_INNER_ELEM, this._parent);
}
_getActiveElem() {
return this._getChildren().find((child) => this._elemIsActive(child)) || null;
}
_setInitialAttributes(parent, children) {
this._setAttributeIfNotExists(parent, "role", "tablist");
for (const child of children) {
this._setInitialAttributesOnChild(child);
}
}
_setInitialAttributesOnChild(child) {
child = this._getInnerElement(child);
const isActive = this._elemIsActive(child);
const outerElem = this._getOuterElement(child);
child.setAttribute("aria-selected", isActive);
if (outerElem !== child) {
this._setAttributeIfNotExists(outerElem, "role", "presentation");
}
if (!isActive) {
child.setAttribute("tabindex", "-1");
}
this._setAttributeIfNotExists(child, "role", "tab");
this._setInitialAttributesOnTargetPanel(child);
}
_setInitialAttributesOnTargetPanel(child) {
const target = SelectorEngine.getElementFromSelector(child);
if (!target) {
return;
}
this._setAttributeIfNotExists(target, "role", "tabpanel");
if (child.id) {
this._setAttributeIfNotExists(target, "aria-labelledby", `${child.id}`);
}
}
_toggleDropDown(element, open) {
const outerElem = this._getOuterElement(element);
if (!outerElem.classList.contains(CLASS_DROPDOWN)) {
return;
}
const toggle = (selector, className) => {
const element2 = SelectorEngine.findOne(selector, outerElem);
if (element2) {
element2.classList.toggle(className, open);
}
};
toggle(SELECTOR_DROPDOWN_TOGGLE, CLASS_NAME_ACTIVE);
toggle(SELECTOR_DROPDOWN_MENU, CLASS_NAME_SHOW);
outerElem.setAttribute("aria-expanded", open);
}
_setAttributeIfNotExists(element, attribute, value) {
if (!element.hasAttribute(attribute)) {
element.setAttribute(attribute, value);
}
}
_elemIsActive(elem) {
return elem.classList.contains(CLASS_NAME_ACTIVE);
}
// Try to get the inner element (usually the .nav-link)
_getInnerElement(elem) {
return elem.matches(SELECTOR_INNER_ELEM) ? elem : SelectorEngine.findOne(SELECTOR_INNER_ELEM, elem);
}
// Try to get the outer element (usually the .nav-item)
_getOuterElement(elem) {
return elem.closest(SELECTOR_OUTER) || elem;
}
// Static
static jQueryInterface(config) {
return this.each(function() {
const data = Tab2.getOrCreateInstance(this);
if (typeof config !== "string") {
return;
}
if (data[config] === void 0 || config.startsWith("_") || config === "constructor") {
throw new TypeError(`No method named "${config}"`);
}
data[config]();
});
}
}
EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function(event) {
if (["A", "AREA"].includes(this.tagName)) {
event.preventDefault();
}
if (index_js.isDisabled(this)) {
return;
}
Tab2.getOrCreateInstance(this).show();
});
EventHandler.on(window, EVENT_LOAD_DATA_API, () => {
for (const element of SelectorEngine.find(SELECTOR_DATA_TOGGLE_ACTIVE)) {
Tab2.getOrCreateInstance(element);
}
});
index_js.defineJQueryPlugin(Tab2);
return Tab2;
});
})(tab$1);
return tab$1.exports;
}
var tabExports = requireTab();
const BsTab = /* @__PURE__ */ baseComponent.getDefaultExportFromCjs(tabExports);
var TabEvents = /* @__PURE__ */ ((TabEvents2) => {
TabEvents2["show"] = "show.bs.tab";
TabEvents2["shown"] = "shown.bs.tab";
TabEvents2["hide"] = "hide.bs.tab";
TabEvents2["hidden"] = "hidden.bs.tab";
return TabEvents2;
})(TabEvents || {});
const Tab = BsTab;
Tab.Events = TabEvents;
exports.default = Tab;
//# sourceMappingURL=tab.js.map