@oruga-ui/oruga-next
Version:
UI components for Vue.js and CSS framework agnostic
279 lines (278 loc) • 10.9 kB
JavaScript
"use strict";
/*! Oruga v0.11.0 | MIT License | github.com/oruga-ui/oruga */
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const vue = require("vue");
const config = require("./config-eYBvpFOZ.cjs");
const defineClasses = require("./defineClasses-Cqhbv-UT.cjs");
const useEventListener = require("./useEventListener-CbsUbKWy.cjs");
const useMatchMedia = require("./useMatchMedia-EgWTgaUx.cjs");
const useClickOutside = require("./useClickOutside-CoQ2BNWF.cjs");
const usePreventScrolling = require("./usePreventScrolling-Ct3PCoON.cjs");
const useConfig = require("./useConfig-Zt3uf2uW.cjs");
const useTrapFocus = require("./useTrapFocus-DXSX2lWD.cjs");
const useProgrammatic = require("./useProgrammatic-D_ewnsB3.cjs");
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
...{
isOruga: true,
name: "OSidebar",
configField: "sidebar",
inheritAttrs: false
},
__name: "Sidebar",
props: /* @__PURE__ */ vue.mergeModels({
override: { type: Boolean, default: void 0 },
active: { type: Boolean, default: false },
overlay: { type: Boolean, default: () => config.getDefault("sidebar.overlay", false) },
inline: { type: Boolean, default: false },
position: { default: () => config.getDefault("sidebar.position", "left") },
fullheight: { type: Boolean, default: () => config.getDefault("sidebar.fullheight", false) },
fullwidth: { type: Boolean, default: () => config.getDefault("sidebar.fullwidth", false) },
reduce: { type: Boolean, default: () => config.getDefault("sidebar.reduce", false) },
mobile: { default: () => config.getDefault("sidebar.mobile") },
expandOnHover: { type: Boolean, default: () => config.getDefault("sidebar.expandOnHover", false) },
animation: { default: () => config.getDefault("sidebar.animation") },
cancelable: { type: [Array, Boolean], default: () => config.getDefault("sidebar.cancelable", ["escape", "outside"]) },
clipScroll: { type: Boolean, default: () => config.getDefault("sidebar.clipScroll", false) },
trapFocus: { type: Boolean, default: () => config.getDefault("sidebar.trapFocus", true) },
mobileBreakpoint: { default: () => config.getDefault("sidebar.mobileBreakpoint") },
teleport: { type: [Boolean, String, Object], default: () => config.getDefault("sidebar.teleport", false) },
container: {},
component: { default: void 0 },
props: { default: void 0 },
events: { default: void 0 },
rootClass: {},
mobileClass: {},
activeClass: {},
teleportClass: {},
inlineClass: {},
overlayClass: {},
contentClass: {},
hiddenClass: {},
visibleClass: {},
positionClass: {},
fullheightClass: {},
fullwidthClass: {},
reduceClass: {},
expandOnHoverClass: {},
scrollClipClass: {},
scrollKeepClass: {}
}, {
"active": { type: Boolean, ...{ default: false } },
"activeModifiers": {}
}),
emits: /* @__PURE__ */ vue.mergeModels(["update:active", "close"], ["update:active"]),
setup(__props, { expose: __expose, emit: __emit }) {
const props = __props;
const emits = __emit;
const { vTrapFocus } = useTrapFocus.useTrapFocus();
const rootRef = vue.useTemplateRef("rootElement");
const contentRef = vue.useTemplateRef("contentElement");
const isActive = vue.useModel(__props, "active");
const { isMobile } = useMatchMedia.useMatchMedia(props.mobileBreakpoint);
const _teleport = vue.computed(
() => typeof props.teleport === "boolean" ? { to: useConfig.useTeleportDefault(), disabled: !props.teleport } : { to: props.teleport, disabled: false }
);
const transitionName = vue.computed(() => {
if (props.animation) return props.animation;
const vertical = props.position === "top" || props.position === "bottom";
const right = props.position === "right";
const open = right ? !isActive.value : isActive.value;
return open ? vertical ? "slide-down" : "slide-next" : vertical ? "slide-up" : "slide-prev";
});
const hideOnMobile = vue.computed(
() => props.mobile === "hidden" && isMobile.value
);
const toggleScroll = usePreventScrolling.usePreventScrolling(props.clipScroll);
vue.watch(
isActive,
(value) => {
if (props.overlay) toggleScroll(value);
},
{ flush: "post" }
);
vue.onMounted(() => {
if (isActive.value && props.overlay) toggleScroll(true);
});
if (config.isClient) {
useEventListener.useEventListener(rootRef, "keyup", onKeyPress, { trigger: isActive });
if (!props.overlay)
useClickOutside.useClickOutside(contentRef, clickedOutside, { trigger: isActive });
}
function onKeyPress(event) {
if (!isActive.value) return;
if (event.key === "Escape" || event.key === "Esc") cancel("escape");
}
function clickedOutside(event) {
if (props.inline || !isActive.value || isAnimating.value) return;
if (props.overlay || contentRef.value && !event.composedPath().includes(contentRef.value))
event.preventDefault();
cancel("outside");
}
function cancel(method) {
if (typeof props.cancelable === "boolean" && !props.cancelable || !props.cancelable || Array.isArray(props.cancelable) && !props.cancelable.includes(method))
return;
close(method);
}
function close(...args) {
isActive.value = false;
emits("close", ...args);
}
const isAnimating = vue.ref(!props.active);
function afterEnter() {
isAnimating.value = false;
}
function beforeLeave() {
isAnimating.value = true;
}
const rootClasses = defineClasses.defineClasses(
["rootClass", "o-sidebar"],
["mobileClass", "o-sidebar--mobile", null, isMobile],
["activeClass", "o-sidebar--active", null, isActive],
[
"teleportClass",
"o-sidebar--teleport",
null,
vue.computed(() => !!props.teleport)
],
["inlineClass", "o-sidebar--inline", null, vue.computed(() => props.inline)]
);
const overlayClasses = defineClasses.defineClasses(["overlayClass", "o-sidebar__overlay"]);
const contentClasses = defineClasses.defineClasses(
["contentClass", "o-sidebar__content"],
[
"positionClass",
"o-sidebar__content--",
vue.computed(() => props.position),
vue.computed(() => !!props.position)
],
[
"fullheightClass",
"o-sidebar__content--fullheight",
null,
vue.computed(() => props.fullheight)
],
[
"fullwidthClass",
"o-sidebar__content--fullwidth",
null,
vue.computed(
() => props.fullwidth || isMobile.value && props.mobile === "expanded"
)
],
[
"reduceClass",
"o-sidebar__content--reduced",
null,
vue.computed(
() => props.reduce || isMobile.value && props.mobile === "reduced"
)
],
[
"expandOnHoverClass",
"o-sidebar__content--hover-expand",
null,
vue.computed(
() => props.expandOnHover && (!isMobile.value || props.mobile !== "expanded")
)
],
["visibleClass", "o-sidebar__content--visible", null, isActive],
[
"hiddenClass",
"o-sidebar__content--hidden",
null,
vue.computed(() => !isActive.value)
]
);
__expose({ close });
return (_ctx, _cache) => {
return vue.openBlock(), vue.createBlock(vue.Teleport, {
to: _teleport.value.to,
disabled: _teleport.value.disabled
}, [
vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({ ref: "rootElement" }, _ctx.$attrs, {
"data-oruga": "sidebar",
class: vue.unref(rootClasses)
}), [
_ctx.overlay && isActive.value ? (vue.openBlock(), vue.createElementBlock("div", {
key: 0,
class: vue.normalizeClass(vue.unref(overlayClasses)),
tabindex: -1,
onClick: clickedOutside
}, null, 2)) : vue.createCommentVNode("", true),
vue.createVNode(vue.Transition, {
name: transitionName.value,
onAfterEnter: afterEnter,
onBeforeLeave: beforeLeave
}, {
default: vue.withCtx(() => [
vue.withDirectives(vue.createElementVNode("div", {
ref: "contentElement",
class: vue.normalizeClass(vue.unref(contentClasses))
}, [
vue.renderSlot(_ctx.$slots, "default", { close }, () => [
_ctx.component ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.component), vue.mergeProps({ key: 0 }, _ctx.$props.props, vue.toHandlers(_ctx.$props.events || {}), { onClose: close }), null, 16)) : vue.createCommentVNode("", true)
])
], 2), [
[vue.vShow, isActive.value]
])
]),
_: 3
}, 8, ["name"])
], 16)), [
[vue.vShow, !hideOnMobile.value],
[vue.unref(vTrapFocus), _ctx.trapFocus && isActive.value && !_ctx.inline]
])
], 8, ["to", "disabled"]);
};
}
});
const registry = new useProgrammatic.InstanceRegistry();
const SidebarProgrammatic = {
/** Returns the number of registered active instances. */
count: registry.count,
/**
* Create a new programmatic sidebar component instance.
* @param options sidebar component props object
* @param target specify a target the component get rendered into - default is `document.body`
* @returns ProgrammaticExpose
*/
open(options, target) {
const componentProps = {
active: true,
// set the active default state to true
...options
};
return useProgrammatic.ComponentProgrammatic.open(_sfc_main, {
registry,
// custom programmatic instance registry
target,
// target the component get rendered into
props: componentProps,
// component specific props
onClose: options.onClose
// on close event handler
});
},
/** Close the last registred instance in the sidebar programmatic instance registry. */
close(...args) {
var _a, _b;
(_b = (_a = registry.last()) == null ? void 0 : _a.exposed) == null ? void 0 : _b.close(...args);
},
/** Close all instances in the programmatic sidebar instance registry. */
closeAll(...args) {
registry.walk((entry) => {
var _a;
return (_a = entry.exposed) == null ? void 0 : _a.close(...args);
});
}
};
const index = {
install(app) {
config.registerComponent(app, _sfc_main);
config.registerComponentProgrammatic(app, "sidebar", SidebarProgrammatic);
}
};
exports.OSidebar = _sfc_main;
exports.SidebarProgrammatic = SidebarProgrammatic;
exports.default = index;
//# sourceMappingURL=sidebar.cjs.map