@oruga-ui/oruga-next
Version:
UI components for Vue.js and CSS framework agnostic
379 lines (378 loc) • 14.5 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 Icon_vue_vue_type_script_setup_true_lang = require("./Icon.vue_vue_type_script_setup_true_lang-ZtEqoTvT.cjs");
const config = require("./config-eYBvpFOZ.cjs");
const defineClasses = require("./defineClasses-Cqhbv-UT.cjs");
const useProgrammatic = require("./useProgrammatic-D_ewnsB3.cjs");
const _hoisted_1 = ["aria-label"];
const _hoisted_2 = { key: 0 };
const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
...{
isOruga: true,
name: "ONotification",
configField: "notification",
inheritAttrs: false
},
__name: "Notification",
props: /* @__PURE__ */ vue.mergeModels({
override: { type: Boolean, default: void 0 },
message: { default: void 0 },
active: { type: Boolean, default: true },
type: { default: void 0 },
variant: { default: () => config.getDefault("notification.variant") },
rounded: { type: Boolean, default: () => config.getDefault("notification.rounded") },
position: { default: () => config.getDefault("notification.position", "top") },
animation: { default: () => config.getDefault("notification.animation", "fade") },
icon: { default: void 0 },
iconPack: { default: () => config.getDefault("notification.iconPack") },
iconSize: { default: () => config.getDefault("notification.iconSize", "large") },
closeable: { type: Boolean, default: false },
closeIcon: { default: () => config.getDefault("notification.closeIcon", "close") },
closeIconSize: { default: () => config.getDefault("notification.closeIconSize") },
ariaCloseLabel: { default: () => config.getDefault("notification.ariaCloseLabel", "Close") },
rootClass: {},
positionClass: {},
variantClass: {},
roundedClass: {},
closeClass: {},
contentClass: {},
iconClass: {},
wrapperClass: {}
}, {
"active": { type: Boolean, ...{ default: true } },
"activeModifiers": {}
}),
emits: /* @__PURE__ */ vue.mergeModels(["update:active", "close"], ["update:active"]),
setup(__props, { emit: __emit }) {
const props = __props;
const emits = __emit;
const isActive = vue.useModel(__props, "active");
const computedIcon = vue.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.defineClasses(
["rootClass", "o-notification"],
[
"variantClass",
"o-notification--",
vue.computed(() => props.variant),
vue.computed(() => !!props.variant)
],
[
"roundedClass",
"o-notification--rounded",
null,
vue.computed(() => props.rounded)
],
[
"positionClass",
"o-notification--",
vue.computed(() => props.position),
vue.computed(() => !!props.position)
]
);
const wrapperClasses = defineClasses.defineClasses([
"wrapperClass",
"o-notification__wrapper"
]);
const iconClasses = defineClasses.defineClasses(["iconClass", "o-notification__icon"]);
const contentClasses = defineClasses.defineClasses([
"contentClass",
"o-notification__content"
]);
const closeClasses = defineClasses.defineClasses(["closeClass", "o-notification__close"]);
return (_ctx, _cache) => {
return vue.openBlock(), vue.createBlock(vue.Transition, { name: _ctx.animation }, {
default: vue.withCtx(() => [
vue.withDirectives(vue.createElementVNode("article", vue.mergeProps(_ctx.$attrs, {
"data-oruga": "notification",
class: vue.unref(rootClasses)
}), [
_ctx.closeable ? (vue.openBlock(), vue.createElementBlock("button", {
key: 0,
class: vue.normalizeClass(vue.unref(closeClasses)),
type: "button",
"aria-label": _ctx.ariaCloseLabel,
onClick: _cache[0] || (_cache[0] = ($event) => close("x"))
}, [
vue.createVNode(Icon_vue_vue_type_script_setup_true_lang._sfc_main, {
pack: _ctx.iconPack,
icon: _ctx.closeIcon,
size: _ctx.closeIconSize
}, null, 8, ["pack", "icon", "size"])
], 10, _hoisted_1)) : vue.createCommentVNode("", true),
vue.renderSlot(_ctx.$slots, "inner", { close }),
_ctx.$slots.default || _ctx.message ? (vue.openBlock(), vue.createElementBlock("div", {
key: 1,
class: vue.normalizeClass(vue.unref(wrapperClasses))
}, [
computedIcon.value ? (vue.openBlock(), vue.createBlock(Icon_vue_vue_type_script_setup_true_lang._sfc_main, {
key: 0,
icon: computedIcon.value,
pack: _ctx.iconPack,
class: vue.normalizeClass(vue.unref(iconClasses)),
size: _ctx.iconSize,
"aria-hidden": "true"
}, null, 8, ["icon", "pack", "class", "size"])) : vue.createCommentVNode("", true),
vue.createElementVNode("div", {
class: vue.normalizeClass(vue.unref(contentClasses))
}, [
vue.renderSlot(_ctx.$slots, "default", { close }, () => [
_ctx.message ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2, vue.toDisplayString(_ctx.message), 1)) : vue.createCommentVNode("", true)
])
], 2)
], 2)) : vue.createCommentVNode("", true)
], 16), [
[vue.vShow, isActive.value]
])
]),
_: 3
}, 8, ["name"]);
};
}
});
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
...{
isOruga: true,
name: "ONotificationNotice",
configField: "notification",
inheritAttrs: false
},
__name: "NotificationNotice",
props: {
override: { type: Boolean, default: void 0 },
container: { default: void 0 },
position: { default: () => config.getDefault("notification.position", "top") },
variant: { default: () => config.getDefault("notification.variant") },
duration: { default: () => config.getDefault("notification.duration", 2e3) },
pauseOnHover: { type: Boolean, default: false },
infinite: { type: Boolean, default: false },
queue: { type: Boolean, default: () => config.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 = vue.useTemplateRef("notificationComponent");
const isActive = vue.ref(true);
const parentTop = vue.ref(null);
const parentBottom = vue.ref(null);
vue.onBeforeMount(() => {
if (noticeClasses.value && positionBottomClasses.value && positionTopClasses.value) {
const rootClasses = defineClasses.getActiveClasses(noticeClasses.value);
const topClasses = defineClasses.getActiveClasses(positionTopClasses.value);
const bottomClasses = defineClasses.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 = defineClasses.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);
});
}
}
});
vue.onMounted(() => {
showNotice();
setAutoClose();
});
const correctParent = vue.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 = vue.computed(
() => props.queue && parentTop.value && parentBottom.value ? parentTop.value.childElementCount > 0 || parentBottom.value.childElementCount > 0 : false
);
const isAlert = vue.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.defineClasses(["noticeClass", "o-notices"]);
const positionTopClasses = defineClasses.defineClasses([
"noticePositionClass",
"o-notices--",
"top"
]);
const positionBottomClasses = defineClasses.defineClasses([
"noticePositionClass",
"o-notices--",
"bottom"
]);
const noticeContainerClasses = defineClasses.defineClasses([
"noticeContainerClass",
"o-notices__container"
]);
__expose({ close });
return (_ctx, _cache) => {
return vue.openBlock(), vue.createBlock(_sfc_main$1, vue.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: vue.withCtx(({ close: close2 }) => [
_ctx.component ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.component), vue.mergeProps({ key: 0 }, _ctx.$props.props, vue.toHandlers(_ctx.$props.events || {}), { onClose: close2 }), null, 16, ["onClose"])) : vue.createCommentVNode("", true)
]),
default: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "default")
]),
_: 3
}, 16, ["active", "override", "position", "variant", "role"]);
};
}
});
const registry = new useProgrammatic.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: config.getOption("notification.position", "top-right"),
container: document.body,
..._options
// pass all props to the internal notification component
};
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 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) {
config.registerComponent(app, _sfc_main$1);
config.registerComponentProgrammatic(
app,
"notification",
NotificationProgrammatic
);
}
};
exports.NotificationProgrammatic = NotificationProgrammatic;
exports.ONotification = _sfc_main$1;
exports.default = index;
//# sourceMappingURL=notification.cjs.map