@oruga-ui/oruga-next
Version:
UI components for Vue.js and CSS framework agnostic
379 lines (378 loc) • 14.2 kB
JavaScript
/*! Oruga v0.11.0 | MIT License | github.com/oruga-ui/oruga */
import { defineComponent, mergeModels, useModel, computed, createBlock, openBlock, Transition, withCtx, withDirectives, createElementVNode, mergeProps, unref, createElementBlock, createCommentVNode, renderSlot, normalizeClass, createVNode, toDisplayString, vShow, useTemplateRef, ref, onBeforeMount, onMounted, resolveDynamicComponent, toHandlers } from "vue";
import { _ as _sfc_main$2 } from "./Icon.vue_vue_type_script_setup_true_lang-C6IfOTXx.mjs";
import { g as getDefault, c as getOption, b as registerComponent, a as registerComponentProgrammatic } from "./config-Dl7tu_Ly.mjs";
import { d as defineClasses, g as getActiveClasses } from "./defineClasses-CWB9NuS-.mjs";
import { I as InstanceRegistry, C as ComponentProgrammatic } from "./useProgrammatic-B50-6K60.mjs";
const _hoisted_1 = ["aria-label"];
const _hoisted_2 = { key: 0 };
const _sfc_main$1 = /* @__PURE__ */ defineComponent({
...{
isOruga: true,
name: "ONotification",
configField: "notification",
inheritAttrs: false
},
__name: "Notification",
props: /* @__PURE__ */ mergeModels({
override: { type: Boolean, default: void 0 },
message: { default: void 0 },
active: { type: Boolean, default: true },
type: { default: void 0 },
variant: { default: () => getDefault("notification.variant") },
rounded: { type: Boolean, default: () => getDefault("notification.rounded") },
position: { default: () => getDefault("notification.position", "top") },
animation: { default: () => getDefault("notification.animation", "fade") },
icon: { default: void 0 },
iconPack: { default: () => getDefault("notification.iconPack") },
iconSize: { default: () => getDefault("notification.iconSize", "large") },
closeable: { type: Boolean, default: false },
closeIcon: { default: () => getDefault("notification.closeIcon", "close") },
closeIconSize: { default: () => getDefault("notification.closeIconSize") },
ariaCloseLabel: { default: () => getDefault("notification.ariaCloseLabel", "Close") },
rootClass: {},
positionClass: {},
variantClass: {},
roundedClass: {},
closeClass: {},
contentClass: {},
iconClass: {},
wrapperClass: {}
}, {
"active": { type: Boolean, ...{ default: true } },
"activeModifiers": {}
}),
emits: /* @__PURE__ */ mergeModels(["update:active", "close"], ["update:active"]),
setup(__props, { emit: __emit }) {
const props = __props;
const emits = __emit;
const isActive = useModel(__props, "active");
const computedIcon = computed(() => {
if (props.icon) return props.icon;
switch (props.type) {
case "info":
return "information";
case "success":
return "check-circle";
case "warning":
return "alert";
case "danger":
return "alert-circle";
default:
return null;
}
});
function close(...args) {
isActive.value = false;
emits("close", ...args);
}
const rootClasses = defineClasses(
["rootClass", "o-notification"],
[
"variantClass",
"o-notification--",
computed(() => props.variant),
computed(() => !!props.variant)
],
[
"roundedClass",
"o-notification--rounded",
null,
computed(() => props.rounded)
],
[
"positionClass",
"o-notification--",
computed(() => props.position),
computed(() => !!props.position)
]
);
const wrapperClasses = defineClasses([
"wrapperClass",
"o-notification__wrapper"
]);
const iconClasses = defineClasses(["iconClass", "o-notification__icon"]);
const contentClasses = defineClasses([
"contentClass",
"o-notification__content"
]);
const closeClasses = defineClasses(["closeClass", "o-notification__close"]);
return (_ctx, _cache) => {
return openBlock(), createBlock(Transition, { name: _ctx.animation }, {
default: withCtx(() => [
withDirectives(createElementVNode("article", mergeProps(_ctx.$attrs, {
"data-oruga": "notification",
class: unref(rootClasses)
}), [
_ctx.closeable ? (openBlock(), createElementBlock("button", {
key: 0,
class: normalizeClass(unref(closeClasses)),
type: "button",
"aria-label": _ctx.ariaCloseLabel,
onClick: _cache[0] || (_cache[0] = ($event) => close("x"))
}, [
createVNode(_sfc_main$2, {
pack: _ctx.iconPack,
icon: _ctx.closeIcon,
size: _ctx.closeIconSize
}, null, 8, ["pack", "icon", "size"])
], 10, _hoisted_1)) : createCommentVNode("", true),
renderSlot(_ctx.$slots, "inner", { close }),
_ctx.$slots.default || _ctx.message ? (openBlock(), createElementBlock("div", {
key: 1,
class: normalizeClass(unref(wrapperClasses))
}, [
computedIcon.value ? (openBlock(), createBlock(_sfc_main$2, {
key: 0,
icon: computedIcon.value,
pack: _ctx.iconPack,
class: normalizeClass(unref(iconClasses)),
size: _ctx.iconSize,
"aria-hidden": "true"
}, null, 8, ["icon", "pack", "class", "size"])) : createCommentVNode("", true),
createElementVNode("div", {
class: normalizeClass(unref(contentClasses))
}, [
renderSlot(_ctx.$slots, "default", { close }, () => [
_ctx.message ? (openBlock(), createElementBlock("span", _hoisted_2, toDisplayString(_ctx.message), 1)) : createCommentVNode("", true)
])
], 2)
], 2)) : createCommentVNode("", true)
], 16), [
[vShow, isActive.value]
])
]),
_: 3
}, 8, ["name"]);
};
}
});
const _sfc_main = /* @__PURE__ */ defineComponent({
...{
isOruga: true,
name: "ONotificationNotice",
configField: "notification",
inheritAttrs: false
},
__name: "NotificationNotice",
props: {
override: { type: Boolean, default: void 0 },
container: { default: void 0 },
position: { default: () => getDefault("notification.position", "top") },
variant: { default: () => getDefault("notification.variant") },
duration: { default: () => getDefault("notification.duration", 2e3) },
pauseOnHover: { type: Boolean, default: false },
infinite: { type: Boolean, default: false },
queue: { type: Boolean, default: () => getDefault("notification.queue") },
component: { default: void 0 },
props: { default: void 0 },
events: { default: void 0 },
noticeClass: {},
noticePositionClass: {},
noticeContainerClass: {}
},
emits: ["close"],
setup(__props, { expose: __expose, emit: __emit }) {
const props = __props;
const emits = __emit;
const notificationRef = useTemplateRef("notificationComponent");
const isActive = ref(true);
const parentTop = ref(null);
const parentBottom = ref(null);
onBeforeMount(() => {
if (noticeClasses.value && positionBottomClasses.value && positionTopClasses.value) {
const rootClasses = getActiveClasses(noticeClasses.value);
const topClasses = getActiveClasses(positionTopClasses.value);
const bottomClasses = getActiveClasses(positionBottomClasses.value);
parentTop.value = props.container.querySelector(
`.${rootClasses.join(".")}.${topClasses.join(".")}`
);
parentBottom.value = props.container.querySelector(
`.${rootClasses.join(".")}.${bottomClasses.join(".")}`
);
if (parentTop.value && parentBottom.value) return;
if (!parentTop.value) {
parentTop.value = document.createElement("div");
parentTop.value.className = `${rootClasses.join(
" "
)} ${topClasses.join(" ")}`;
parentTop.value.role = "region";
parentTop.value.ariaLive = "polite";
}
if (!parentBottom.value) {
parentBottom.value = document.createElement("div");
parentBottom.value.className = `${rootClasses.join(
" "
)} ${bottomClasses.join(" ")}`;
parentBottom.value.role = "region";
parentBottom.value.ariaLive = "polite";
}
props.container.appendChild(parentTop.value);
props.container.appendChild(parentBottom.value);
if (props.container.tagName !== "BODY") {
const classes = getActiveClasses(noticeContainerClasses.value);
if (classes == null ? void 0 : classes.length)
classes.filter((c) => !!c).forEach((c) => {
var _a, _b;
(_a = parentTop.value) == null ? void 0 : _a.classList.add(c);
(_b = parentBottom.value) == null ? void 0 : _b.classList.add(c);
});
}
}
});
onMounted(() => {
showNotice();
setAutoClose();
});
const correctParent = computed(() => {
switch (props.position) {
case "top-right":
case "top":
case "top-left":
return parentTop.value;
case "bottom-right":
case "bottom":
case "bottom-left":
return parentBottom.value;
default:
return null;
}
});
const shouldQueue = computed(
() => props.queue && parentTop.value && parentBottom.value ? parentTop.value.childElementCount > 0 || parentBottom.value.childElementCount > 0 : false
);
const isAlert = computed(
() => props.variant === "warning" || props.variant === "danger"
);
function showNotice() {
var _a;
if (!correctParent.value) return;
if (shouldQueue.value) correctParent.value.innerHTML = "";
correctParent.value.insertAdjacentElement(
"afterbegin",
(_a = notificationRef.value) == null ? void 0 : _a.$el
);
}
let timer;
function setAutoClose() {
if (!props.infinite) {
if (timer) clearTimeout(timer);
timer = setTimeout(() => {
if (isActive.value) close("timeout");
}, props.duration);
}
}
let isPaused = false;
function onMouseOver() {
if (props.pauseOnHover && !props.infinite) {
isPaused = true;
clearInterval(timer);
}
}
function onMouseLeave() {
if (isPaused)
close("mouseleave");
}
function close(...args) {
isActive.value = false;
if (timer) clearTimeout(timer);
emits("close", ...args);
}
const noticeClasses = defineClasses(["noticeClass", "o-notices"]);
const positionTopClasses = defineClasses([
"noticePositionClass",
"o-notices--",
"top"
]);
const positionBottomClasses = defineClasses([
"noticePositionClass",
"o-notices--",
"bottom"
]);
const noticeContainerClasses = defineClasses([
"noticeContainerClass",
"o-notices__container"
]);
__expose({ close });
return (_ctx, _cache) => {
return openBlock(), createBlock(_sfc_main$1, mergeProps({ ref: "notificationComponent" }, _ctx.$attrs, {
active: isActive.value,
"onUpdate:active": _cache[0] || (_cache[0] = ($event) => isActive.value = $event),
override: _ctx.override,
position: _ctx.position,
variant: _ctx.variant,
role: isAlert.value ? "alert" : "status",
"aria-atomic": true,
onClose: close,
onMouseover: onMouseOver,
onMouseleave: onMouseLeave
}), {
inner: withCtx(({ close: close2 }) => [
_ctx.component ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.component), mergeProps({ key: 0 }, _ctx.$props.props, toHandlers(_ctx.$props.events || {}), { onClose: close2 }), null, 16, ["onClose"])) : createCommentVNode("", true)
]),
default: withCtx(() => [
renderSlot(_ctx.$slots, "default")
]),
_: 3
}, 16, ["active", "override", "position", "variant", "role"]);
};
}
});
const registry = new InstanceRegistry();
const NotificationProgrammatic = {
/** Returns the number of registered active instances. */
count: registry.count,
/**
* Create a new programmatic notification component instance.
* @param options notification message string or notification component props object
* @param target specify a target the component get rendered into - default is `document.body`
* @returns ProgrammaticExpose
*/
open(options, target) {
const _options = typeof options === "string" ? { message: options } : options;
const componentProps = {
position: getOption("notification.position", "top-right"),
container: document.body,
..._options
// pass all props to the internal notification component
};
return 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 notification 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 notification instance registry. */
closeAll(...args) {
registry.walk((entry) => {
var _a;
return (_a = entry.exposed) == null ? void 0 : _a.close(...args);
});
}
};
const index = {
install(app) {
registerComponent(app, _sfc_main$1);
registerComponentProgrammatic(
app,
"notification",
NotificationProgrammatic
);
}
};
export {
NotificationProgrammatic,
_sfc_main$1 as ONotification,
index as default
};
//# sourceMappingURL=notification.mjs.map