bootstrap-vue-next
Version:
Seamless integration of Vue 3, Bootstrap 5, and TypeScript for modern, type-safe UI development
144 lines (143 loc) • 4.88 kB
JavaScript
import { a as buttonGroupKey } from "./keys-CQKrwmvN.mjs";
import { a as getSafeWindow, n as getActiveElement } from "./dom-AhkaSoh8.mjs";
import { t as useDefaults } from "./useDefaults-BKgBaqOV.mjs";
import "./constants-BSIK14yA.mjs";
import "./BButton-BRvIFnRm.mjs";
import "./BCloseButton-CjgbR1Ec.mjs";
import { computed, createBlock, createElementBlock, defineComponent, nextTick, normalizeClass, openBlock, provide, renderSlot, resolveDynamicComponent, unref, useTemplateRef, withCtx } from "vue";
//#endregion
//#region src/components/BButton/BButtonGroup.vue
var BButtonGroup_default = /* @__PURE__ */ defineComponent({
__name: "BButtonGroup",
props: {
ariaLabel: { default: "Group" },
size: { default: "md" },
tag: { default: "div" },
vertical: {
type: Boolean,
default: false
}
},
setup(__props) {
provide(buttonGroupKey, true);
const props = useDefaults(__props, "BButtonGroup");
const computedClasses = computed(() => ({
"btn-group": !props.vertical,
[`btn-group-${props.size}`]: props.size !== "md",
"btn-group-vertical": props.vertical
}));
return (_ctx, _cache) => {
return openBlock(), createBlock(resolveDynamicComponent(unref(props).tag), {
class: normalizeClass(computedClasses.value),
role: "group",
"aria-label": unref(props).ariaLabel
}, {
default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
_: 3
}, 8, ["class", "aria-label"]);
};
}
});
//#endregion
//#region src/components/BButton/BButtonToolbar.vue?vue&type=script&setup=true&lang.ts
var _hoisted_1 = ["role", "aria-label"];
//#endregion
//#region src/components/BButton/BButtonToolbar.vue
var BButtonToolbar_default = /* @__PURE__ */ defineComponent({
__name: "BButtonToolbar",
props: {
ariaLabel: { default: "Group" },
keyNav: {
type: Boolean,
default: false
},
justify: {
type: Boolean,
default: false
},
role: { default: "toolbar" }
},
setup(__props) {
const props = useDefaults(__props, "BButtonToolbar");
const toolbarRef = useTemplateRef("toolbarRef");
const computedClasses = computed(() => ({ "justify-content-between": props.justify }));
const getFocusableElements = () => {
if (!toolbarRef.value) return [];
return Array.from(toolbarRef.value.querySelectorAll("button:not(:disabled), [href]:not(:disabled), input:not(:disabled), select:not(:disabled), textarea:not(:disabled), [tabindex]:not([tabindex=\"-1\"]):not(:disabled)")).filter((el) => {
const style = getSafeWindow()?.getComputedStyle(el);
return style && style.display !== "none" && style.visibility !== "hidden";
});
};
const isDisabled = (element) => element.hasAttribute("disabled") || element.getAttribute("aria-disabled") === "true";
const focusFirst = () => {
nextTick(() => {
getFocusableElements().find((el) => !isDisabled(el))?.focus();
});
};
const focusLast = () => {
nextTick(() => {
getFocusableElements().reverse().find((el) => !isDisabled(el))?.focus();
});
};
const focusPrev = () => {
nextTick(() => {
const elements = getFocusableElements();
const activeElement = getActiveElement();
const currentIndex = elements.indexOf(activeElement);
if (currentIndex > 0) for (let i = currentIndex - 1; i >= 0; i--) {
const el = elements[i];
if (el !== void 0 && !isDisabled(el)) {
elements[i]?.focus();
break;
}
}
});
};
const focusNext = () => {
nextTick(() => {
const elements = getFocusableElements();
const activeElement = getActiveElement();
const currentIndex = elements.indexOf(activeElement);
if (currentIndex < elements.length - 1) for (let i = currentIndex + 1; i < elements.length; i++) {
const el = elements[i];
if (el !== void 0 && !isDisabled(el)) {
elements[i]?.focus();
break;
}
}
});
};
const handleKeyNav = (event) => {
if (!props.keyNav) return;
const { code, shiftKey } = event;
if (code === "ArrowLeft" || code === "ArrowUp") {
event.preventDefault();
if (shiftKey) focusFirst();
else focusPrev();
} else if (code === "ArrowRight" || code === "ArrowDown") {
event.preventDefault();
if (shiftKey) focusLast();
else focusNext();
} else if (code === "Home") {
event.preventDefault();
focusFirst();
} else if (code === "End") {
event.preventDefault();
focusLast();
}
};
return (_ctx, _cache) => {
return openBlock(), createElementBlock("div", {
ref_key: "toolbarRef",
ref: toolbarRef,
class: normalizeClass([computedClasses.value, "btn-toolbar"]),
role: unref(props).role,
"aria-label": unref(props).ariaLabel,
onKeydown: handleKeyNav
}, [renderSlot(_ctx.$slots, "default")], 42, _hoisted_1);
};
}
});
//#endregion
export { BButtonGroup_default as n, BButtonToolbar_default as t };
//# sourceMappingURL=BButton-DNmtqoqR.mjs.map