images-viewer-vue3
Version:
A lightweight image viewer for Vue3
7,165 lines • 200 kB
JavaScript
import { inject as U, ref as I, onMounted as uo, onBeforeUnmount as _e, onBeforeMount as ko, watch as Co, onActivated as qn, onDeactivated as Zn, createTextVNode as Jo, Fragment as Be, Comment as Ut, isVNode as Qn, defineComponent as W, computed as T, shallowRef as Jn, watchEffect as Ee, provide as oe, toRef as be, h as d, Transition as ke, TransitionGroup as er, mergeProps as Bo, vShow as yo, withDirectives as Xe, cloneVNode as qt, Text as or, nextTick as ze, markRaw as zt, reactive as Oo, Teleport as it, createApp as tr, unref as Pt } from "vue";
import { m as ao, u as nr, a as rr } from "./npm-lodash-es-ChnDstzz.js";
import { c as et, m as ir, z as Zt } from "./npm-vdirs-BihFuFC6.js";
import { g as He, r as Qt, s as ho, c as To, d as Rt, a as wo, b as vo, e as Io } from "./npm-seemly-CoNZSdNO.js";
import { o as lo, a as Ae } from "./npm-evtd-Bc7Iy9dF.js";
import { u as Ye, i as Ho, a as ar, b as lr, c as sr, d as So, e as $o } from "./npm-vooks-BdFeHE_F.js";
import { V as kt, a as cr, F as Jt, B as dr, b as ur, L as fr } from "./npm-vueuc-w0sAAE7s.js";
import { u as Eo } from "./npm-@css-render-vue3-ssr-DxhlTTo_.js";
import { C as hr, e as vr } from "./npm-css-render-D6klN3og.js";
import { p as gr } from "./npm-@css-render-plugin-bem-DE1-EJu9.js";
import { m as zo } from "./npm-@emotion-hash-DImMRhyK.js";
const pr = "n", so = `.${pr}-`, mr = "__", br = "--", en = hr(), on = gr({
blockPrefix: so,
elementPrefix: mr,
modifierPrefix: br
});
en.use(on);
const {
c: m,
find: Ka
} = en, {
cB: k,
cE: R,
cM: P,
cNotM: Ge
} = on;
function tn(e) {
return m(({
props: {
bPrefix: o
}
}) => `${o || so}modal, ${o || so}drawer`, [e]);
}
function xr(e) {
return m(({
props: {
bPrefix: o
}
}) => `${o || so}popover`, [e]);
}
function nn(e) {
return m(({
props: {
bPrefix: o
}
}) => `&${o || so}modal`, e);
}
const Cr = (...e) => m(">", [k(...e)]);
function A(e, o) {
return e + (o === "default" ? "" : o.replace(/^[a-z]/, (t) => t.toUpperCase()));
}
const yr = "n-internal-select-menu-body", at = "n-drawer-body", lt = "n-modal-body", wr = "n-modal-provider", rn = "n-modal", st = "n-popover-body", an = "__disabled__";
function Ue(e) {
const o = U(lt, null), t = U(at, null), n = U(st, null), r = U(yr, null), a = I();
if (typeof document < "u") {
a.value = document.fullscreenElement;
const u = () => {
a.value = document.fullscreenElement;
};
uo(() => {
lo("fullscreenchange", document, u);
}), _e(() => {
Ae("fullscreenchange", document, u);
});
}
return Ye(() => {
var u;
const {
to: i
} = e;
return i !== void 0 ? i === !1 ? an : i === !0 ? a.value || "body" : i : o != null && o.value ? (u = o.value.$el) !== null && u !== void 0 ? u : o.value : t != null && t.value ? t.value : n != null && n.value ? n.value : r != null && r.value ? r.value : i ?? (a.value || "body");
});
}
Ue.tdkey = an;
Ue.propTo = {
type: [String, Object, Boolean],
default: void 0
};
const Qe = typeof document < "u" && typeof window < "u", ct = I(!1);
function Bt() {
ct.value = !0;
}
function Ot() {
ct.value = !1;
}
let io = 0;
function Sr() {
return Qe && (ko(() => {
io || (window.addEventListener("compositionstart", Bt), window.addEventListener("compositionend", Ot)), io++;
}), _e(() => {
io <= 1 ? (window.removeEventListener("compositionstart", Bt), window.removeEventListener("compositionend", Ot), io = 0) : io--;
})), ct;
}
let Ke = 0, Tt = "", It = "", Ht = "", Et = "";
const Lt = I("0px");
function $r(e) {
if (typeof document > "u") return;
const o = document.documentElement;
let t, n = !1;
const r = () => {
o.style.marginRight = Tt, o.style.overflow = It, o.style.overflowX = Ht, o.style.overflowY = Et, Lt.value = "0px";
};
uo(() => {
t = Co(e, (a) => {
if (a) {
if (!Ke) {
const u = window.innerWidth - o.offsetWidth;
u > 0 && (Tt = o.style.marginRight, o.style.marginRight = `${u}px`, Lt.value = `${u}px`), It = o.style.overflow, Ht = o.style.overflowX, Et = o.style.overflowY, o.style.overflow = "hidden", o.style.overflowX = "hidden", o.style.overflowY = "hidden";
}
n = !0, Ke++;
} else
Ke--, Ke || r(), n = !1;
}, {
immediate: !0
});
}), _e(() => {
t == null || t(), n && (Ke--, Ke || r(), n = !1);
});
}
function zr(e) {
const o = {
isDeactivated: !1
};
let t = !1;
return qn(() => {
if (o.isDeactivated = !1, !t) {
t = !0;
return;
}
e();
}), Zn(() => {
o.isDeactivated = !0, t || (t = !0);
}), o;
}
function Mt(e) {
return e.replace(/#|\(|\)|,|\s|\./g, "_");
}
const Pr = /^(\d|\.)+$/, jt = /(\d|\.)+/;
function xo(e, {
c: o = 1,
offset: t = 0,
attachPx: n = !0
} = {}) {
if (typeof e == "number") {
const r = (e + t) * o;
return r === 0 ? "0" : `${r}px`;
} else if (typeof e == "string")
if (Pr.test(e)) {
const r = (Number(e) + t) * o;
return n ? r === 0 ? "0" : `${r}px` : `${r}`;
} else {
const r = jt.exec(e);
return r ? e.replace(jt, String((Number(r[0]) + t) * o)) : e;
}
return e;
}
function Ft(e) {
const {
left: o,
right: t,
top: n,
bottom: r
} = He(e);
return `${n} ${o} ${r} ${t}`;
}
let qo;
function Rr() {
return qo === void 0 && (qo = navigator.userAgent.includes("Node.js") || navigator.userAgent.includes("jsdom")), qo;
}
const kr = /* @__PURE__ */ new WeakSet();
function Br(e) {
return !kr.has(e);
}
const At = /* @__PURE__ */ new Set();
function $e(e, o) {
const t = `[naive/${e}]: ${o}`;
At.has(t) || (At.add(t), console.error(t));
}
function qe(e, o) {
console.error(`[naive/${e}]: ${o}`);
}
function De(e, o) {
throw new Error(`[naive/${e}]: ${o}`);
}
function me(e, ...o) {
if (Array.isArray(e))
e.forEach((t) => me(t, ...o));
else
return e(...o);
}
function ot(e, o = !0, t = []) {
return e.forEach((n) => {
if (n !== null) {
if (typeof n != "object") {
(typeof n == "string" || typeof n == "number") && t.push(Jo(String(n)));
return;
}
if (Array.isArray(n)) {
ot(n, o, t);
return;
}
if (n.type === Be) {
if (n.children === null) return;
Array.isArray(n.children) && ot(n.children, o, t);
} else {
if (n.type === Ut && o) return;
t.push(n);
}
}
}), t;
}
function tt(e, o = "default", t = void 0) {
const n = e[o];
if (!n)
return qe("getFirstSlotVNode", `slot[${o}] is empty`), null;
const r = ot(n(t));
return r.length === 1 ? r[0] : (qe("getFirstSlotVNode", `slot[${o}] should have exactly one child`), null);
}
function Ze(e, o = [], t) {
const n = {};
return o.forEach((r) => {
n[r] = e[r];
}), Object.assign(n, t);
}
function Lo(e) {
return Object.keys(e);
}
function Mo(e, o = [], t) {
const n = {};
return Object.getOwnPropertyNames(e).forEach((a) => {
o.includes(a) || (n[a] = e[a]);
}), Object.assign(n, t);
}
function ue(e, ...o) {
return typeof e == "function" ? e(...o) : typeof e == "string" ? Jo(e) : typeof e == "number" ? Jo(String(e)) : null;
}
function Se(e) {
return e.some((o) => Qn(o) ? !(o.type === Ut || o.type === Be && !Se(o.children)) : !0) ? e : null;
}
function _t(e, o) {
return e && Se(e()) || o();
}
function ce(e, o) {
const t = e && Se(e());
return o(t || null);
}
function nt(e) {
return !(e && Se(e()));
}
const Dt = W({
render() {
var e, o;
return (o = (e = this.$slots).default) === null || o === void 0 ? void 0 : o.call(e);
}
}), Le = "n-config-provider", rt = "n";
function de(e = {}, o = {
defaultBordered: !0
}) {
const t = U(Le, null);
return {
// NConfigProvider,
inlineThemeDisabled: t == null ? void 0 : t.inlineThemeDisabled,
mergedRtlRef: t == null ? void 0 : t.mergedRtlRef,
mergedComponentPropsRef: t == null ? void 0 : t.mergedComponentPropsRef,
mergedBreakpointsRef: t == null ? void 0 : t.mergedBreakpointsRef,
mergedBorderedRef: T(() => {
var n, r;
const {
bordered: a
} = e;
return a !== void 0 ? a : (r = (n = t == null ? void 0 : t.mergedBorderedRef.value) !== null && n !== void 0 ? n : o.defaultBordered) !== null && r !== void 0 ? r : !0;
}),
mergedClsPrefixRef: t ? t.mergedClsPrefixRef : Jn(rt),
namespaceRef: T(() => t == null ? void 0 : t.mergedNamespaceRef.value)
};
}
function Pe(e, o, t, n) {
t || De("useThemeClass", "cssVarsRef is not passed");
const r = U(Le, null), a = r == null ? void 0 : r.mergedThemeHashRef, u = r == null ? void 0 : r.styleMountTarget, i = I(""), l = Eo();
let s;
const c = `__${e}`, g = () => {
let b = c;
const p = o ? o.value : void 0, v = a == null ? void 0 : a.value;
v && (b += `-${v}`), p && (b += `-${p}`);
const {
themeOverrides: h,
builtinThemeOverrides: y
} = n;
h && (b += `-${zo(JSON.stringify(h))}`), y && (b += `-${zo(JSON.stringify(y))}`), i.value = b, s = () => {
const x = t.value;
let $ = "";
for (const E in x)
$ += `${E}: ${x[E]};`;
m(`.${b}`, $).mount({
id: b,
ssr: l,
parent: u
}), s = void 0;
};
};
return Ee(() => {
g();
}), {
themeClass: i,
onRender: () => {
s == null || s();
}
};
}
const Nt = "n-form-item";
function Or(e, {
defaultSize: o = "medium",
mergedSize: t,
mergedDisabled: n
} = {}) {
const r = U(Nt, null);
oe(Nt, null);
const a = T(t ? () => t(r) : () => {
const {
size: l
} = e;
if (l) return l;
if (r) {
const {
mergedSize: s
} = r;
if (s.value !== void 0)
return s.value;
}
return o;
}), u = T(n ? () => n(r) : () => {
const {
disabled: l
} = e;
return l !== void 0 ? l : r ? r.disabled.value : !1;
}), i = T(() => {
const {
status: l
} = e;
return l || (r == null ? void 0 : r.mergedValidationStatus.value);
});
return _e(() => {
r && r.restoreValidation();
}), {
mergedSizeRef: a,
mergedDisabledRef: u,
mergedStatusRef: i,
nTriggerFormBlur() {
r && r.handleContentBlur();
},
nTriggerFormChange() {
r && r.handleContentChange();
},
nTriggerFormFocus() {
r && r.handleContentFocus();
},
nTriggerFormInput() {
r && r.handleContentInput();
}
};
}
const co = "naive-ui-style";
function Je(e, o, t) {
if (!o) return;
const n = Eo(), r = T(() => {
const {
value: i
} = o;
if (!i)
return;
const l = i[e];
if (l)
return l;
}), a = U(Le, null), u = () => {
Ee(() => {
const {
value: i
} = t, l = `${i}${e}Rtl`;
if (vr(l, n)) return;
const {
value: s
} = r;
s && s.style.mount({
id: l,
head: !0,
anchorMetaName: co,
props: {
bPrefix: i ? `.${i}-` : void 0
},
ssr: n,
parent: a == null ? void 0 : a.styleMountTarget
});
});
};
return n ? u() : ko(u), r;
}
const Ne = {
fontFamily: 'v-sans, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
fontFamilyMono: "v-mono, SFMono-Regular, Menlo, Consolas, Courier, monospace",
fontWeight: "400",
fontWeightStrong: "500",
cubicBezierEaseInOut: "cubic-bezier(.4, 0, .2, 1)",
cubicBezierEaseOut: "cubic-bezier(0, 0, .2, 1)",
cubicBezierEaseIn: "cubic-bezier(.4, 0, 1, 1)",
borderRadius: "3px",
borderRadiusSmall: "2px",
fontSize: "14px",
fontSizeMini: "12px",
fontSizeTiny: "12px",
fontSizeSmall: "14px",
fontSizeMedium: "14px",
fontSizeLarge: "15px",
fontSizeHuge: "16px",
lineHeight: "1.6",
heightMini: "16px",
// private now, it's too small
heightTiny: "22px",
heightSmall: "28px",
heightMedium: "34px",
heightLarge: "40px",
heightHuge: "46px"
}, {
fontSize: Tr,
fontFamily: Ir,
lineHeight: Hr
} = Ne, ln = m("body", `
margin: 0;
font-size: ${Tr};
font-family: ${Ir};
line-height: ${Hr};
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: transparent;
`, [m("input", `
font-family: inherit;
font-size: inherit;
`)]);
function jo(e, o, t) {
if (!o) {
process.env.NODE_ENV !== "production" && De("use-style", "No style is specified.");
return;
}
const n = Eo(), r = U(Le, null), a = () => {
const u = t.value;
o.mount({
id: u === void 0 ? e : u + e,
head: !0,
anchorMetaName: co,
props: {
bPrefix: u ? `.${u}-` : void 0
},
ssr: n,
parent: r == null ? void 0 : r.styleMountTarget
}), r != null && r.preflightStyleDisabled || ln.mount({
id: "n-global",
head: !0,
anchorMetaName: co,
ssr: n,
parent: r == null ? void 0 : r.styleMountTarget
});
};
n ? a() : ko(a);
}
function Q(e, o, t, n, r, a) {
const u = Eo(), i = U(Le, null);
if (t) {
const s = () => {
const c = a == null ? void 0 : a.value;
t.mount({
id: c === void 0 ? o : c + o,
head: !0,
props: {
bPrefix: c ? `.${c}-` : void 0
},
anchorMetaName: co,
ssr: u,
parent: i == null ? void 0 : i.styleMountTarget
}), i != null && i.preflightStyleDisabled || ln.mount({
id: "n-global",
head: !0,
anchorMetaName: co,
ssr: u,
parent: i == null ? void 0 : i.styleMountTarget
});
};
u ? s() : ko(s);
}
return T(() => {
var s;
const {
theme: {
common: c,
self: g,
peers: b = {}
} = {},
themeOverrides: p = {},
builtinThemeOverrides: v = {}
} = r, {
common: h,
peers: y
} = p, {
common: x = void 0,
[e]: {
common: $ = void 0,
self: E = void 0,
peers: z = {}
} = {}
} = (i == null ? void 0 : i.mergedThemeRef.value) || {}, {
common: S = void 0,
[e]: C = {}
} = (i == null ? void 0 : i.mergedThemeOverridesRef.value) || {}, {
common: f,
peers: B = {}
} = C, j = ao({}, c || $ || x || n.common, S, f, h), M = ao(
// {}, executed every time, no need for empty obj
(s = g || E || n.self) === null || s === void 0 ? void 0 : s(j),
v,
C,
p
);
return {
common: j,
self: M,
peers: ao({}, n.peers, z, b),
peerOverrides: ao({}, v.peers, B, y)
};
});
}
Q.props = {
theme: Object,
themeOverrides: Object,
builtinThemeOverrides: Object
};
const Er = k("base-icon", `
height: 1em;
width: 1em;
line-height: 1em;
text-align: center;
display: inline-block;
position: relative;
fill: currentColor;
transform: translateZ(0);
`, [m("svg", `
height: 1em;
width: 1em;
`)]), Fo = W({
name: "BaseIcon",
props: {
role: String,
ariaLabel: String,
ariaDisabled: {
type: Boolean,
default: void 0
},
ariaHidden: {
type: Boolean,
default: void 0
},
clsPrefix: {
type: String,
required: !0
},
onClick: Function,
onMousedown: Function,
onMouseup: Function
},
setup(e) {
jo("-base-icon", Er, be(e, "clsPrefix"));
},
render() {
return d("i", {
class: `${this.clsPrefix}-base-icon`,
onClick: this.onClick,
onMousedown: this.onMousedown,
onMouseup: this.onMouseup,
role: this.role,
"aria-label": this.ariaLabel,
"aria-hidden": this.ariaHidden,
"aria-disabled": this.ariaDisabled
}, this.$slots);
}
}), dt = W({
name: "BaseIconSwitchTransition",
setup(e, {
slots: o
}) {
const t = Ho();
return () => d(ke, {
name: "icon-switch-transition",
appear: t.value
}, o);
}
});
function fo(e, o) {
const t = W({
render() {
return o();
}
});
return W({
name: nr(e),
setup() {
var n;
const r = (n = U(Le, null)) === null || n === void 0 ? void 0 : n.mergedIconsRef;
return () => {
var a;
const u = (a = r == null ? void 0 : r.value) === null || a === void 0 ? void 0 : a[e];
return u ? u() : d(t, null);
};
}
});
}
const Lr = fo("close", () => d("svg", {
viewBox: "0 0 12 12",
version: "1.1",
xmlns: "http://www.w3.org/2000/svg",
"aria-hidden": !0
}, d("g", {
stroke: "none",
"stroke-width": "1",
fill: "none",
"fill-rule": "evenodd"
}, d("g", {
fill: "currentColor",
"fill-rule": "nonzero"
}, d("path", {
d: "M2.08859116,2.2156945 L2.14644661,2.14644661 C2.32001296,1.97288026 2.58943736,1.95359511 2.7843055,2.08859116 L2.85355339,2.14644661 L6,5.293 L9.14644661,2.14644661 C9.34170876,1.95118446 9.65829124,1.95118446 9.85355339,2.14644661 C10.0488155,2.34170876 10.0488155,2.65829124 9.85355339,2.85355339 L6.707,6 L9.85355339,9.14644661 C10.0271197,9.32001296 10.0464049,9.58943736 9.91140884,9.7843055 L9.85355339,9.85355339 C9.67998704,10.0271197 9.41056264,10.0464049 9.2156945,9.91140884 L9.14644661,9.85355339 L6,6.707 L2.85355339,9.85355339 C2.65829124,10.0488155 2.34170876,10.0488155 2.14644661,9.85355339 C1.95118446,9.65829124 1.95118446,9.34170876 2.14644661,9.14644661 L5.293,6 L2.14644661,2.85355339 C1.97288026,2.67998704 1.95359511,2.41056264 2.08859116,2.2156945 L2.14644661,2.14644661 L2.08859116,2.2156945 Z"
}))))), ut = fo("error", () => d("svg", {
viewBox: "0 0 48 48",
version: "1.1",
xmlns: "http://www.w3.org/2000/svg"
}, d("g", {
stroke: "none",
"stroke-width": "1",
"fill-rule": "evenodd"
}, d("g", {
"fill-rule": "nonzero"
}, d("path", {
d: "M24,4 C35.045695,4 44,12.954305 44,24 C44,35.045695 35.045695,44 24,44 C12.954305,44 4,35.045695 4,24 C4,12.954305 12.954305,4 24,4 Z M17.8838835,16.1161165 L17.7823881,16.0249942 C17.3266086,15.6583353 16.6733914,15.6583353 16.2176119,16.0249942 L16.1161165,16.1161165 L16.0249942,16.2176119 C15.6583353,16.6733914 15.6583353,17.3266086 16.0249942,17.7823881 L16.1161165,17.8838835 L22.233,24 L16.1161165,30.1161165 L16.0249942,30.2176119 C15.6583353,30.6733914 15.6583353,31.3266086 16.0249942,31.7823881 L16.1161165,31.8838835 L16.2176119,31.9750058 C16.6733914,32.3416647 17.3266086,32.3416647 17.7823881,31.9750058 L17.8838835,31.8838835 L24,25.767 L30.1161165,31.8838835 L30.2176119,31.9750058 C30.6733914,32.3416647 31.3266086,32.3416647 31.7823881,31.9750058 L31.8838835,31.8838835 L31.9750058,31.7823881 C32.3416647,31.3266086 32.3416647,30.6733914 31.9750058,30.2176119 L31.8838835,30.1161165 L25.767,24 L31.8838835,17.8838835 L31.9750058,17.7823881 C32.3416647,17.3266086 32.3416647,16.6733914 31.9750058,16.2176119 L31.8838835,16.1161165 L31.7823881,16.0249942 C31.3266086,15.6583353 30.6733914,15.6583353 30.2176119,16.0249942 L30.1161165,16.1161165 L24,22.233 L17.8838835,16.1161165 L17.7823881,16.0249942 L17.8838835,16.1161165 Z"
}))))), Po = fo("info", () => d("svg", {
viewBox: "0 0 28 28",
version: "1.1",
xmlns: "http://www.w3.org/2000/svg"
}, d("g", {
stroke: "none",
"stroke-width": "1",
"fill-rule": "evenodd"
}, d("g", {
"fill-rule": "nonzero"
}, d("path", {
d: "M14,2 C20.6274,2 26,7.37258 26,14 C26,20.6274 20.6274,26 14,26 C7.37258,26 2,20.6274 2,14 C2,7.37258 7.37258,2 14,2 Z M14,11 C13.4477,11 13,11.4477 13,12 L13,12 L13,20 C13,20.5523 13.4477,21 14,21 C14.5523,21 15,20.5523 15,20 L15,20 L15,12 C15,11.4477 14.5523,11 14,11 Z M14,6.75 C13.3096,6.75 12.75,7.30964 12.75,8 C12.75,8.69036 13.3096,9.25 14,9.25 C14.6904,9.25 15.25,8.69036 15.25,8 C15.25,7.30964 14.6904,6.75 14,6.75 Z"
}))))), ft = fo("success", () => d("svg", {
viewBox: "0 0 48 48",
version: "1.1",
xmlns: "http://www.w3.org/2000/svg"
}, d("g", {
stroke: "none",
"stroke-width": "1",
"fill-rule": "evenodd"
}, d("g", {
"fill-rule": "nonzero"
}, d("path", {
d: "M24,4 C35.045695,4 44,12.954305 44,24 C44,35.045695 35.045695,44 24,44 C12.954305,44 4,35.045695 4,24 C4,12.954305 12.954305,4 24,4 Z M32.6338835,17.6161165 C32.1782718,17.1605048 31.4584514,17.1301307 30.9676119,17.5249942 L30.8661165,17.6161165 L20.75,27.732233 L17.1338835,24.1161165 C16.6457281,23.6279612 15.8542719,23.6279612 15.3661165,24.1161165 C14.9105048,24.5717282 14.8801307,25.2915486 15.2749942,25.7823881 L15.3661165,25.8838835 L19.8661165,30.3838835 C20.3217282,30.8394952 21.0415486,30.8698693 21.5323881,30.4750058 L21.6338835,30.3838835 L32.6338835,19.3838835 C33.1220388,18.8957281 33.1220388,18.1042719 32.6338835,17.6161165 Z"
}))))), ht = fo("warning", () => d("svg", {
viewBox: "0 0 24 24",
version: "1.1",
xmlns: "http://www.w3.org/2000/svg"
}, d("g", {
stroke: "none",
"stroke-width": "1",
"fill-rule": "evenodd"
}, d("g", {
"fill-rule": "nonzero"
}, d("path", {
d: "M12,2 C17.523,2 22,6.478 22,12 C22,17.522 17.523,22 12,22 C6.477,22 2,17.522 2,12 C2,6.478 6.477,2 12,2 Z M12.0018002,15.0037242 C11.450254,15.0037242 11.0031376,15.4508407 11.0031376,16.0023869 C11.0031376,16.553933 11.450254,17.0010495 12.0018002,17.0010495 C12.5533463,17.0010495 13.0004628,16.553933 13.0004628,16.0023869 C13.0004628,15.4508407 12.5533463,15.0037242 12.0018002,15.0037242 Z M11.99964,7 C11.4868042,7.00018474 11.0642719,7.38637706 11.0066858,7.8837365 L11,8.00036004 L11.0018003,13.0012393 L11.00857,13.117858 C11.0665141,13.6151758 11.4893244,14.0010638 12.0021602,14.0008793 C12.514996,14.0006946 12.9375283,13.6145023 12.9951144,13.1171428 L13.0018002,13.0005193 L13,7.99964009 L12.9932303,7.8830214 C12.9352861,7.38570354 12.5124758,6.99981552 11.99964,7 Z"
}))))), {
cubicBezierEaseInOut: Mr
} = Ne;
function Ro({
originalTransform: e = "",
left: o = 0,
top: t = 0,
transition: n = `all .3s ${Mr} !important`
} = {}) {
return [m("&.icon-switch-transition-enter-from, &.icon-switch-transition-leave-to", {
transform: `${e} scale(0.75)`,
left: o,
top: t,
opacity: 0
}), m("&.icon-switch-transition-enter-to, &.icon-switch-transition-leave-from", {
transform: `scale(1) ${e}`,
left: o,
top: t,
opacity: 1
}), m("&.icon-switch-transition-enter-active, &.icon-switch-transition-leave-active", {
transformOrigin: "center",
position: "absolute",
left: o,
top: t,
transition: n
})];
}
const jr = k("base-close", `
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
background-color: transparent;
color: var(--n-close-icon-color);
border-radius: var(--n-close-border-radius);
height: var(--n-close-size);
width: var(--n-close-size);
font-size: var(--n-close-icon-size);
outline: none;
border: none;
position: relative;
padding: 0;
`, [P("absolute", `
height: var(--n-close-icon-size);
width: var(--n-close-icon-size);
`), m("&::before", `
content: "";
position: absolute;
width: var(--n-close-size);
height: var(--n-close-size);
left: 50%;
top: 50%;
transform: translateY(-50%) translateX(-50%);
transition: inherit;
border-radius: inherit;
`), Ge("disabled", [m("&:hover", `
color: var(--n-close-icon-color-hover);
`), m("&:hover::before", `
background-color: var(--n-close-color-hover);
`), m("&:focus::before", `
background-color: var(--n-close-color-hover);
`), m("&:active", `
color: var(--n-close-icon-color-pressed);
`), m("&:active::before", `
background-color: var(--n-close-color-pressed);
`)]), P("disabled", `
cursor: not-allowed;
color: var(--n-close-icon-color-disabled);
background-color: transparent;
`), P("round", [m("&::before", `
border-radius: 50%;
`)])]), Ao = W({
name: "BaseClose",
props: {
isButtonTag: {
type: Boolean,
default: !0
},
clsPrefix: {
type: String,
required: !0
},
disabled: {
type: Boolean,
default: void 0
},
focusable: {
type: Boolean,
default: !0
},
round: Boolean,
onClick: Function,
absolute: Boolean
},
setup(e) {
return jo("-base-close", jr, be(e, "clsPrefix")), () => {
const {
clsPrefix: o,
disabled: t,
absolute: n,
round: r,
isButtonTag: a
} = e;
return d(a ? "button" : "div", {
type: a ? "button" : void 0,
tabindex: t || !e.focusable ? -1 : 0,
"aria-disabled": t,
"aria-label": "close",
role: a ? void 0 : "button",
disabled: t,
class: [`${o}-base-close`, n && `${o}-base-close--absolute`, t && `${o}-base-close--disabled`, r && `${o}-base-close--round`],
onMousedown: (i) => {
e.focusable || i.preventDefault();
},
onClick: e.onClick
}, d(Fo, {
clsPrefix: o
}, {
default: () => d(Lr, null)
}));
};
}
}), sn = W({
name: "FadeInExpandTransition",
props: {
appear: Boolean,
group: Boolean,
mode: String,
onLeave: Function,
onAfterLeave: Function,
onAfterEnter: Function,
width: Boolean,
// reverse mode is only used in tree
// it make it from expanded to collapsed after mounted
reverse: Boolean
},
setup(e, {
slots: o
}) {
function t(i) {
e.width ? i.style.maxWidth = `${i.offsetWidth}px` : i.style.maxHeight = `${i.offsetHeight}px`, i.offsetWidth;
}
function n(i) {
e.width ? i.style.maxWidth = "0" : i.style.maxHeight = "0", i.offsetWidth;
const {
onLeave: l
} = e;
l && l();
}
function r(i) {
e.width ? i.style.maxWidth = "" : i.style.maxHeight = "";
const {
onAfterLeave: l
} = e;
l && l();
}
function a(i) {
if (i.style.transition = "none", e.width) {
const l = i.offsetWidth;
i.style.maxWidth = "0", i.offsetWidth, i.style.transition = "", i.style.maxWidth = `${l}px`;
} else if (e.reverse)
i.style.maxHeight = `${i.offsetHeight}px`, i.offsetHeight, i.style.transition = "", i.style.maxHeight = "0";
else {
const l = i.offsetHeight;
i.style.maxHeight = "0", i.offsetWidth, i.style.transition = "", i.style.maxHeight = `${l}px`;
}
i.offsetWidth;
}
function u(i) {
var l;
e.width ? i.style.maxWidth = "" : e.reverse || (i.style.maxHeight = ""), (l = e.onAfterEnter) === null || l === void 0 || l.call(e);
}
return () => {
const {
group: i,
width: l,
appear: s,
mode: c
} = e, g = i ? er : ke, b = {
name: l ? "fade-in-width-expand-transition" : "fade-in-height-expand-transition",
appear: s,
onEnter: a,
onAfterEnter: u,
onBeforeLeave: t,
onLeave: n,
onAfterLeave: r
};
return i || (b.mode = c), d(g, b, o);
};
}
}), Fr = m([m("@keyframes rotator", `
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}`), k("base-loading", `
position: relative;
line-height: 0;
width: 1em;
height: 1em;
`, [R("transition-wrapper", `
position: absolute;
width: 100%;
height: 100%;
`, [Ro()]), R("placeholder", `
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
`, [Ro({
left: "50%",
top: "50%",
originalTransform: "translateX(-50%) translateY(-50%)"
})]), R("container", `
animation: rotator 3s linear infinite both;
`, [R("icon", `
height: 1em;
width: 1em;
`)])])]), Zo = "1.6s", Ar = {
strokeWidth: {
type: Number,
default: 28
},
stroke: {
type: String,
default: void 0
}
}, cn = W({
name: "BaseLoading",
props: Object.assign({
clsPrefix: {
type: String,
required: !0
},
show: {
type: Boolean,
default: !0
},
scale: {
type: Number,
default: 1
},
radius: {
type: Number,
default: 100
}
}, Ar),
setup(e) {
jo("-base-loading", Fr, be(e, "clsPrefix"));
},
render() {
const {
clsPrefix: e,
radius: o,
strokeWidth: t,
stroke: n,
scale: r
} = this, a = o / r;
return d("div", {
class: `${e}-base-loading`,
role: "img",
"aria-label": "loading"
}, d(dt, null, {
default: () => this.show ? d("div", {
key: "icon",
class: `${e}-base-loading__transition-wrapper`
}, d("div", {
class: `${e}-base-loading__container`
}, d("svg", {
class: `${e}-base-loading__icon`,
viewBox: `0 0 ${2 * a} ${2 * a}`,
xmlns: "http://www.w3.org/2000/svg",
style: {
color: n
}
}, d("g", null, d("animateTransform", {
attributeName: "transform",
type: "rotate",
values: `0 ${a} ${a};270 ${a} ${a}`,
begin: "0s",
dur: Zo,
fill: "freeze",
repeatCount: "indefinite"
}), d("circle", {
class: `${e}-base-loading__icon`,
fill: "none",
stroke: "currentColor",
"stroke-width": t,
"stroke-linecap": "round",
cx: a,
cy: a,
r: o - t / 2,
"stroke-dasharray": 5.67 * o,
"stroke-dashoffset": 18.48 * o
}, d("animateTransform", {
attributeName: "transform",
type: "rotate",
values: `0 ${a} ${a};135 ${a} ${a};450 ${a} ${a}`,
begin: "0s",
dur: Zo,
fill: "freeze",
repeatCount: "indefinite"
}), d("animate", {
attributeName: "stroke-dashoffset",
values: `${5.67 * o};${1.42 * o};${5.67 * o}`,
begin: "0s",
dur: Zo,
fill: "freeze",
repeatCount: "indefinite"
})))))) : d("div", {
key: "placeholder",
class: `${e}-base-loading__placeholder`
}, this.$slots)
}));
}
}), {
cubicBezierEaseInOut: Wt
} = Ne;
function vt({
name: e = "fade-in",
enterDuration: o = "0.2s",
leaveDuration: t = "0.2s",
enterCubicBezier: n = Wt,
leaveCubicBezier: r = Wt
} = {}) {
return [m(`&.${e}-transition-enter-active`, {
transition: `all ${o} ${n}!important`
}), m(`&.${e}-transition-leave-active`, {
transition: `all ${t} ${r}!important`
}), m(`&.${e}-transition-enter-from, &.${e}-transition-leave-to`, {
opacity: 0
}), m(`&.${e}-transition-leave-from, &.${e}-transition-enter-to`, {
opacity: 1
})];
}
const L = {
neutralBase: "#FFF",
neutralInvertBase: "#000",
neutralTextBase: "#000",
neutralPopover: "#fff",
neutralCard: "#fff",
neutralModal: "#fff",
neutralBody: "#fff",
alpha1: "0.82",
alpha2: "0.72",
alpha3: "0.38",
alpha4: "0.24",
// disabled text, placeholder, icon
alpha5: "0.18",
// disabled placeholder
alphaClose: "0.6",
alphaDisabled: "0.5",
alphaDisabledInput: "0.02",
alphaPending: "0.05",
alphaTablePending: "0.02",
alphaPressed: "0.07",
alphaAvatar: "0.2",
alphaRail: "0.14",
alphaProgressRail: ".08",
alphaBorder: "0.12",
alphaDivider: "0.06",
alphaInput: "0",
alphaAction: "0.02",
alphaTab: "0.04",
alphaScrollbar: "0.25",
alphaScrollbarHover: "0.4",
alphaCode: "0.05",
alphaTag: "0.02",
// primary
primaryHover: "#36ad6a",
primaryDefault: "#18a058",
primaryActive: "#0c7a43",
primarySuppl: "#36ad6a",
// info
infoHover: "#4098fc",
infoDefault: "#2080f0",
infoActive: "#1060c9",
infoSuppl: "#4098fc",
// error
errorHover: "#de576d",
errorDefault: "#d03050",
errorActive: "#ab1f3f",
errorSuppl: "#de576d",
// warning
warningHover: "#fcb040",
warningDefault: "#f0a020",
warningActive: "#c97c10",
warningSuppl: "#fcb040",
// success
successHover: "#36ad6a",
successDefault: "#18a058",
successActive: "#0c7a43",
successSuppl: "#36ad6a"
}, _r = Qt(L.neutralBase), dn = Qt(L.neutralInvertBase), Dr = `rgba(${dn.slice(0, 3).join(", ")}, `;
function Vt(e) {
return `${Dr + String(e)})`;
}
function le(e) {
const o = Array.from(dn);
return o[3] = Number(e), To(_r, o);
}
const xe = Object.assign(Object.assign({
name: "common"
}, Ne), {
baseColor: L.neutralBase,
// primary color
primaryColor: L.primaryDefault,
primaryColorHover: L.primaryHover,
primaryColorPressed: L.primaryActive,
primaryColorSuppl: L.primarySuppl,
// info color
infoColor: L.infoDefault,
infoColorHover: L.infoHover,
infoColorPressed: L.infoActive,
infoColorSuppl: L.infoSuppl,
// success color
successColor: L.successDefault,
successColorHover: L.successHover,
successColorPressed: L.successActive,
successColorSuppl: L.successSuppl,
// warning color
warningColor: L.warningDefault,
warningColorHover: L.warningHover,
warningColorPressed: L.warningActive,
warningColorSuppl: L.warningSuppl,
// error color
errorColor: L.errorDefault,
errorColorHover: L.errorHover,
errorColorPressed: L.errorActive,
errorColorSuppl: L.errorSuppl,
// text color
textColorBase: L.neutralTextBase,
textColor1: "rgb(31, 34, 37)",
textColor2: "rgb(51, 54, 57)",
textColor3: "rgb(118, 124, 130)",
// textColor4: neutral(base.alpha4), // disabled, placeholder, icon
// textColor5: neutral(base.alpha5),
textColorDisabled: le(L.alpha4),
placeholderColor: le(L.alpha4),
placeholderColorDisabled: le(L.alpha5),
iconColor: le(L.alpha4),
iconColorHover: ho(le(L.alpha4), {
lightness: 0.75
}),
iconColorPressed: ho(le(L.alpha4), {
lightness: 0.9
}),
iconColorDisabled: le(L.alpha5),
opacity1: L.alpha1,
opacity2: L.alpha2,
opacity3: L.alpha3,
opacity4: L.alpha4,
opacity5: L.alpha5,
dividerColor: "rgb(239, 239, 245)",
borderColor: "rgb(224, 224, 230)",
// close
closeIconColor: le(Number(L.alphaClose)),
closeIconColorHover: le(Number(L.alphaClose)),
closeIconColorPressed: le(Number(L.alphaClose)),
closeColorHover: "rgba(0, 0, 0, .09)",
closeColorPressed: "rgba(0, 0, 0, .13)",
// clear
clearColor: le(L.alpha4),
clearColorHover: ho(le(L.alpha4), {
lightness: 0.75
}),
clearColorPressed: ho(le(L.alpha4), {
lightness: 0.9
}),
scrollbarColor: Vt(L.alphaScrollbar),
scrollbarColorHover: Vt(L.alphaScrollbarHover),
scrollbarWidth: "5px",
scrollbarHeight: "5px",
scrollbarBorderRadius: "5px",
progressRailColor: le(L.alphaProgressRail),
railColor: "rgb(219, 219, 223)",
popoverColor: L.neutralPopover,
tableColor: L.neutralCard,
cardColor: L.neutralCard,
modalColor: L.neutralModal,
bodyColor: L.neutralBody,
tagColor: "#eee",
avatarColor: le(L.alphaAvatar),
invertedColor: "rgb(0, 20, 40)",
inputColor: le(L.alphaInput),
codeColor: "rgb(244, 244, 248)",
tabColor: "rgb(247, 247, 250)",
actionColor: "rgb(250, 250, 252)",
tableHeaderColor: "rgb(250, 250, 252)",
hoverColor: "rgb(243, 243, 245)",
// use color with alpha since it can be nested with header filter & sorter effect
tableColorHover: "rgba(0, 0, 100, 0.03)",
tableColorStriped: "rgba(0, 0, 100, 0.02)",
pressedColor: "rgb(237, 237, 239)",
opacityDisabled: L.alphaDisabled,
inputColorDisabled: "rgb(250, 250, 252)",
// secondary button color
// can also be used in tertiary button & quaternary button
buttonColor2: "rgba(46, 51, 56, .05)",
buttonColor2Hover: "rgba(46, 51, 56, .09)",
buttonColor2Pressed: "rgba(46, 51, 56, .13)",
boxShadow1: "0 1px 2px -2px rgba(0, 0, 0, .08), 0 3px 6px 0 rgba(0, 0, 0, .06), 0 5px 12px 4px rgba(0, 0, 0, .04)",
boxShadow2: "0 3px 6px -4px rgba(0, 0, 0, .12), 0 6px 16px 0 rgba(0, 0, 0, .08), 0 9px 28px 8px rgba(0, 0, 0, .05)",
boxShadow3: "0 6px 16px -9px rgba(0, 0, 0, .08), 0 9px 28px 0 rgba(0, 0, 0, .05), 0 12px 48px 16px rgba(0, 0, 0, .03)"
}), Nr = {
railInsetHorizontalBottom: "auto 2px 4px 2px",
railInsetHorizontalTop: "4px 2px auto 2px",
railInsetVerticalRight: "2px 4px 2px auto",
railInsetVerticalLeft: "2px auto 2px 4px",
railColor: "transparent"
};
function Wr(e) {
const {
scrollbarColor: o,
scrollbarColorHover: t,
scrollbarHeight: n,
scrollbarWidth: r,
scrollbarBorderRadius: a
} = e;
return Object.assign(Object.assign({}, Nr), {
height: n,
width: r,
borderRadius: a,
color: o,
colorHover: t
});
}
const gt = {
name: "Scrollbar",
common: xe,
self: Wr
}, Vr = k("scrollbar", `
overflow: hidden;
position: relative;
z-index: auto;
height: 100%;
width: 100%;
`, [m(">", [k("scrollbar-container", `
width: 100%;
overflow: scroll;
height: 100%;
min-height: inherit;
max-height: inherit;
scrollbar-width: none;
`, [m("&::-webkit-scrollbar, &::-webkit-scrollbar-track-piece, &::-webkit-scrollbar-thumb", `
width: 0;
height: 0;
display: none;
`), m(">", [
// We can't set overflow hidden since it affects positioning.
k("scrollbar-content", `
box-sizing: border-box;
min-width: 100%;
`)
])])]), m(">, +", [k("scrollbar-rail", `
position: absolute;
pointer-events: none;
user-select: none;
background: var(--n-scrollbar-rail-color);
-webkit-user-select: none;
`, [P("horizontal", `
height: var(--n-scrollbar-height);
`, [m(">", [R("scrollbar", `
height: var(--n-scrollbar-height);
border-radius: var(--n-scrollbar-border-radius);
right: 0;
`)])]), P("horizontal--top", `
top: var(--n-scrollbar-rail-top-horizontal-top);
right: var(--n-scrollbar-rail-right-horizontal-top);
bottom: var(--n-scrollbar-rail-bottom-horizontal-top);
left: var(--n-scrollbar-rail-left-horizontal-top);
`), P("horizontal--bottom", `
top: var(--n-scrollbar-rail-top-horizontal-bottom);
right: var(--n-scrollbar-rail-right-horizontal-bottom);
bottom: var(--n-scrollbar-rail-bottom-horizontal-bottom);
left: var(--n-scrollbar-rail-left-horizontal-bottom);
`), P("vertical", `
width: var(--n-scrollbar-width);
`, [m(">", [R("scrollbar", `
width: var(--n-scrollbar-width);
border-radius: var(--n-scrollbar-border-radius);
bottom: 0;
`)])]), P("vertical--left", `
top: var(--n-scrollbar-rail-top-vertical-left);
right: var(--n-scrollbar-rail-right-vertical-left);
bottom: var(--n-scrollbar-rail-bottom-vertical-left);
left: var(--n-scrollbar-rail-left-vertical-left);
`), P("vertical--right", `
top: var(--n-scrollbar-rail-top-vertical-right);
right: var(--n-scrollbar-rail-right-vertical-right);
bottom: var(--n-scrollbar-rail-bottom-vertical-right);
left: var(--n-scrollbar-rail-left-vertical-right);
`), P("disabled", [m(">", [R("scrollbar", "pointer-events: none;")])]), m(">", [R("scrollbar", `
z-index: 1;
position: absolute;
cursor: pointer;
pointer-events: all;
background-color: var(--n-scrollbar-color);
transition: background-color .2s var(--n-scrollbar-bezier);
`, [vt(), m("&:hover", "background-color: var(--n-scrollbar-color-hover);")])])])])]), Kr = Object.assign(Object.assign({}, Q.props), {
duration: {
type: Number,
default: 0
},
scrollable: {
type: Boolean,
default: !0
},
xScrollable: Boolean,
trigger: {
type: String,
default: "hover"
},
useUnifiedContainer: Boolean,
triggerDisplayManually: Boolean,
// If container is set, resize observer won't not attached
container: Function,
content: Function,
containerClass: String,
containerStyle: [String, Object],
contentClass: [String, Array],
contentStyle: [String, Object],
horizontalRailStyle: [String, Object],
verticalRailStyle: [String, Object],
onScroll: Function,
onWheel: Function,
onResize: Function,
internalOnUpdateScrollLeft: Function,
internalHoistYRail: Boolean,
yPlacement: {
type: String,
default: "right"
},
xPlacement: {
type: String,
default: "bottom"
}
}), pt = W({
name: "Scrollbar",
props: Kr,
inheritAttrs: !1,
setup(e) {
const {
mergedClsPrefixRef: o,
inlineThemeDisabled: t,
mergedRtlRef: n
} = de(e), r = Je("Scrollbar", n, o), a = I(null), u = I(null), i = I(null), l = I(null), s = I(null), c = I(null), g = I(null), b = I(null), p = I(null), v = I(null), h = I(null), y = I(0), x = I(0), $ = I(!1), E = I(!1);
let z = !1, S = !1, C, f, B = 0, j = 0, M = 0, K = 0;
const N = ar(), G = Q("Scrollbar", "-scrollbar", Vr, gt, e, o), Y = T(() => {
const {
value: w
} = b, {
value: H
} = c, {
value: _
} = v;
return w === null || H === null || _ === null ? 0 : Math.min(w, _ * w / H + Rt(G.value.self.width) * 1.5);
}), O = T(() => `${Y.value}px`), D = T(() => {
const {
value: w
} = p, {
value: H
} = g, {
value: _
} = h;
return w === null || H === null || _ === null ? 0 : _ * w / H + Rt(G.value.self.height) * 1.5;
}), F = T(() => `${D.value}px`), te = T(() => {
const {
value: w
} = b, {
value: H
} = y, {
value: _
} = c, {
value: Z
} = v;
if (w === null || _ === null || Z === null)
return 0;
{
const re = _ - w;
return re ? H / re * (Z - Y.value) : 0;
}
}), ne = T(() => `${te.value}px`), q = T(() => {
const {
value: w
} = p, {
value: H
} = x, {
value: _
} = g, {
value: Z
} = h;
if (w === null || _ === null || Z === null)
return 0;
{
const re = _ - w;
return re ? H / re * (Z - D.value) : 0;
}
}), ve = T(() => `${q.value}px`), ge = T(() => {
const {
value: w
} = b, {
value: H
} = c;
return w !== null && H !== null && H > w;
}), Ce = T(() => {
const {
value: w
} = p, {
value: H
} = g;
return w !== null && H !== null && H > w;
}), ye = T(() => {
const {
trigger: w
} = e;
return w === "none" || $.value;
}), eo = T(() => {
const {
trigger: w
} = e;
return w === "none" || E.value;
}), X = T(() => {
const {
container: w
} = e;
return w ? w() : u.value;
}), We = T(() => {
const {
content: w
} = e;
return w ? w() : i.value;
}), oo = (w, H) => {
if (!e.scrollable) return;
if (typeof w == "number") {
Oe(w, H ?? 0, 0, !1, "auto");
return;
}
const {
left: _,
top: Z,
index: re,
elSize: se,
position: pe,
behavior: ee,
el: fe,
debounce: Te = !0
} = w;
(_ !== void 0 || Z !== void 0) && Oe(_ ?? 0, Z ?? 0, 0, !1, ee), fe !== void 0 ? Oe(0, fe.offsetTop, fe.offsetHeight, Te, ee) : re !== void 0 && se !== void 0 ? Oe(0, re * se, se, Te, ee) : pe === "bottom" ? Oe(0, Number.MAX_SAFE_INTEGER, 0, !1, ee) : pe === "top" && Oe(0, 0, 0, !1, ee);
}, V = zr(() => {
e.container || oo({
top: y.value,
left: x.value
});
}), to = () => {
V.isDeactivated || je();
}, no = (w) => {
if (V.isDeactivated) return;
const {
onResize: H
} = e;
H && H(w), je();
}, No = (w, H) => {
if (!e.scrollable) return;
const {
value: _
} = X;
_ && (typeof w == "object" ? _.scrollBy(w) : _.scrollBy(w, H || 0));
};
function Oe(w, H, _, Z, re) {
const {
value: se
} = X;
if (se) {
if (Z) {
const {
scrollTop: pe,
offsetHeight: ee
} = se;
if (H > pe) {
H + _ <= pe + ee || se.scrollTo({
left: w,
top: H + _ - ee,
behavior: re
});
return;
}
}
se.scrollTo({
left: w,
top: H,
behavior: re
});
}
}
function Wo() {
Xo(), J(), je();
}
function Vo() {
ro();
}
function ro() {
Ko(), Go();
}
function Ko() {
f !== void 0 && window.clearTimeout(f), f = window.setTimeout(() => {
E.value = !1;
}, e.duration);
}
function Go() {
C !== void 0 && window.clearTimeout(C), C = window.setTimeout(() => {
$.value = !1;
}, e.duration);
}
function Xo() {
C !== void 0 && window.clearTimeout(C), $.value = !0;
}
function J() {
f !== void 0 && window.clearTimeout(f), E.value = !0;
}
function ae(w) {
const {
onScroll: H
} = e;
H && H(w), Me();
}
function Me() {
const {
value: w
} = X;
w && (y.value = w.scrollTop, x.value = w.scrollLeft * (r != null && r.value ? -1 : 1));
}
function On() {
const {
value: w
} = We;
w && (c.value = w.offsetHeight, g.value = w.offsetWidth);
const {
value: H
} = X;
H && (b.value = H.offsetHeight, p.value = H.offsetWidth);
const {
value: _
} = s, {
value: Z
} = l;
_ && (h.value = _.offsetWidth), Z && (v.value = Z.offsetHeight);
}
function Ct() {
const {
value: w
} = X;
w && (y.value = w.scrollTop, x.value = w.scrollLeft * (r != null && r.value ? -1 : 1), b.value = w.offsetHeight, p.value = w.offsetWidth, c.value = w.scrollHeight, g.value = w.scrollWidth);
const {
value: H
} = s, {
value: _
} = l;
H && (h.value = H.offsetWidth), _ && (v.value = _.offsetHeight);
}
function je() {
e.scrollable && (e.useUnifiedContainer ? Ct() : (On(), Me()));
}
function yt(w) {
var H;
return !(!((H = a.value) === null || H === void 0) && H.contains(wo(w)));
}
function Tn(w) {
w.preventDefault(), w.stopPropagation(), S = !0, lo("mousemove", window, wt, !0), lo("mouseup", window, St, !0), j = x.value, M = r != null && r.value ? window.innerWidth - w.clientX : w.clientX;
}
function wt(w) {
if (!S) return;
C !== void 0 && window.clearTimeout(C), f !== void 0 && window.clearTimeout(f);
const {
value: H
} = p, {
value: _
} = g, {
value: Z
} = D;
if (H === null || _ === null) return;
const se = (r != null && r.value ? window.innerWidth - w.clientX - M : w.clientX - M) * (_ - H) / (H - Z), pe = _ - H;
let ee = j + se;
ee = Math.min(pe, ee), ee = Math.max(ee, 0);
const {
value: fe
} = X;
if (fe) {
fe.scrollLeft = ee * (r != null && r.value ? -1 : 1);
const {
internalOnUpdateScrollLeft: Te
} = e;
Te && Te(ee);
}
}
function St(w) {
w.preventDefault(), w.stopPropagation(), Ae("mousemove", window, wt, !0), Ae("mouseup", window, St, !0), S = !1, je(), yt(w) && ro();
}
function In(w) {
w.preventDefault(), w.stopPropagation(), z = !0, lo("mousemove", window, Yo, !0), lo("mouseup", window, Uo, !0), B = y.value, K = w.clientY;
}
function Yo(w) {
if (!z) return;
C !== void 0 && window.clearTimeout(C), f !== void 0 && window.clearTimeout(f);
const {
value: H
} = b, {
value: _
} = c, {
value: Z
} = Y;
if (H === null || _ === null) return;
const se = (w.clientY - K) * (_ - H) / (H - Z), pe = _ - H;
let ee = B + se;
ee = Math.min(pe, ee), ee = Math.max(ee, 0);
const {
value: fe
} = X;
fe && (fe.scrollTop = ee);
}
function Uo(w) {
w.preventDefault(), w.stopPropagation(), Ae("mousemove", window, Yo, !0), Ae("mouseup", window, Uo, !0), z = !1, je(), yt(w) && ro();
}
Ee(() => {
const {
value: w
} = Ce, {
value: H
} = ge, {
value: _
} = o, {
value: Z
} = s, {
value: re
} = l;
Z && (w ? Z.classList.remove(`${_}-scrollbar-rail--disabled`) : Z.classList.add(`${_}-scrollbar-rail--disabled`)), re && (H ? re.classList.remove(`${_}-scrollbar-rail--disabled`) : re.classList.add(`${_}-scrollbar-rail--disabled`));
}), uo(() => {
e.container || je();
}), _e(() => {
C !== void 0 && window.clearTimeout(C), f !== void 0 && window.clearTimeout(f), Ae("mousemove", window, Yo, !0), Ae("mouseup", window, Uo, !0);
});
const $t = T(() => {
const {
common: {
cubicBezierEaseInOut: w
},
self: {
color: H,
colorHover: _,
height: Z,
width: re,
borderRadius: se,
railInsetHorizontalTop: pe,
railInsetHorizontalBottom: ee,
railInsetVerticalRight: fe,
railInsetVerticalLeft: Te,
railColor: Hn
}
} = G.value, {
top: En,
right: Ln,
bottom: Mn,
left: jn
} = He(pe), {
top: Fn,
right: An,
bottom: _n,
left: Dn
} = He(ee), {
top: Nn,
right: Wn,
bottom: Vn,
left: Kn
} = He(r != null && r.value ? Ft(fe) : fe), {
top: Gn,
right: Xn,
bottom: Yn,
left: Un
} = He(r != null && r.value ? Ft(Te) : Te);
return {
"--n-scrollbar-bezier": w,
"--n-scrollbar-color": H,
"--n-scrollbar-color-hover": _,
"--n-scrollbar-border-radius": se,
"--n-scrollbar-width": re,
"--n-scrollbar-height": Z,
"--n-scrollbar-rail-top-horizontal-top": En,
"--n-scrollbar-rail-right-horizontal-top": Ln,
"--n-scrollbar-rail-bottom-horizontal-top": Mn,
"--n-scrollbar-rail-left-horizontal-top": jn,
"--n-scrollbar-rail-top-horizontal-bottom": Fn,
"--n-scrollbar-rail-right-horizontal-bottom": An,
"--n-scrollbar-rail-bottom-horizontal-bottom": _n,
"--n-scrollbar-rail-left-horizontal-bottom": Dn,
"--n-scrollbar-rail-top-vertical-right": Nn,
"--n-scrollbar-rail-right-vertical-right": Wn,
"--n-scrollbar-rail-bottom-vertical-right": Vn,
"--n-scrollbar-rail-left-vertical-right": Kn,
"--n-scrollbar-rail-top-vertical-left": Gn,
"--n-scrollbar-rail-right-vertical-left": Xn,
"--n-scrollbar-rail-bottom-vertical-left": Yn,
"--n-scrollbar-rail-left-vertical-left": Un,
"--n-scrollbar-rail-color": Hn
};
}), Ve = t ? Pe("scrollbar", void 0, $t, e) : void 0;
return Object.assign(Object.assign({}, {
scrollTo: oo,
scrollBy: No,
sync: je,
syncUnifiedContainer: Ct,
handleMouseEnterWrapper: Wo,
handleMouseLeaveWrapper: Vo
}), {
mergedClsPrefix: o,
rtlEnabled: r,
containerScrollTop: y,
wrapperRef: a,
containerRef: u,
contentRef: i,
yRailRef: l,
xRailRef: s,
needYBar: ge,
needXBar: Ce,
yBarSizePx: O,
xBarSizePx: F,
yBarTopPx: ne,
xBarLeftPx: ve,
isShowXBar: ye,
isShowYBar: eo,
isIos: N,
handleScroll: ae,
handleContentResize: to,
handleContainerResize: no,
handleYScrollMouseDown: In,
handleXScrollMouseDown: Tn,
cssVars: t ? void 0 : $t,
themeClass: Ve == null ? void 0 : Ve.themeClass,
onRender: Ve == null ? void 0 : Ve.onRender
});
},
render() {
var e;
const {
$slots: o,
mergedClsPrefix: t,
triggerDisplayManually: n,
rtlEnabled: r,
internalHoistYRail: a,
yPlacement: u,
xPlacement: i,
xScrollable: l
} = this;
if (!this.scrollable) return (e = o.default) === null || e === void 0 ? void 0 : e.call(o);
const s = this.trigger === "none", c = (p, v) => d("div", {
ref: "yRailRef",
class: [`${t}-scrollbar-rail`, `${t}-scrollbar-rail--vertical`, `${t}-scrollbar-rail--vertical--${u}`, p],
"data-scrollbar-rail": !0,
style: [v || "", this.verticalRailStyle],
"aria-hidden": !0
}, d(s ? Dt : ke, s ? null : {
name: "fade-in-transition"
}, {
default: () => this.needYBar && this.isShowYBar && !this.isIos ? d("div", {
class: `${t}-scrollbar-rail__scrollbar`,
style: {
height: this.yBarSizePx,
top: this.yBarTopPx
},
onMousedown: this.handleYScrollMouseDown
}) : null
})), g = () => {
var p, v;
return (p = this.onRender) === null || p === void 0 || p.call(this), d("div", Bo(this.$attrs, {
role: "none",
ref: "wrapperRef",
class: [`${t}-scrollbar`, this.themeClass, r && `${t}-scrollbar--rtl`],
style: this.cssVars,
onMouseenter: n ? void 0 : this.handleMouseEnterWrapper,
onMouseleave: n ? void 0 : this.handleMouseLeaveWrapper
}), [this.container ? (v = o.default) === null || v === void 0 ? void 0 : v.call(o) : d("div", {
role: "none",
ref: "containerRef",
class: [`${t}-scrollbar-container`, this.containerClass],
style: this.containerStyle,
onScroll: this.handleScroll,
onWheel: this.onWheel
}, d(kt, {
onResize: this.handleContentResize
}, {
default: () => d("div", {
ref: "contentRef",
role: "none",
style: [{
width: this.xScrollable ? "fit-content" : null
}, this.contentStyle],
class: [`${t}-scrollbar-content`, this.contentClass]
}, o)
})), a ? null : c(void 0, void 0), l && d("div", {
ref: "xRailRef",
class: [`${t}-scrollbar-rail`, `${t}-scrollbar-rail--horizontal`, `${t}-scrollbar-rail--horizontal--${i}`],
style: this.horizontalRailStyle,
"data-scrollbar-rail": !0,
"aria-hidden": !0
}, d(s ? Dt : ke, s ? null : {
name: "fade-in-transition"
}, {
default: () => this.needXBar && this.isShowXBar && !this.isIos ? d("div", {
class: `${t}-scrollbar-rail__scrollbar`,
style: {
width: this.xBarSizePx,
right: r ? this.xBarLeftPx : void 0,
left: r ? void 0 : this.xBarLeftPx
},
onMousedown: this.handleXScrollMouseDown
}) : null
}))]);
}, b = this.container ? g() : d(kt, {
onResize: this.handleContainerResize
}, {
default: g
});
return a ? d(Be, null, b, c(this.themeClass, this.cssVars)) : b;
}
}), Gr = pt, {
cubicBezierEaseIn: Kt,
cubicBezierEaseOut: Gt
} = Ne;
function Xr({
transformOrigin: e = "inherit",
duration: o = ".2s",
enterScale: t = ".9",
originalTransform: n = "",
originalTransition: r = ""
} = {}) {
return [m("&.fade-in-scale-up-transition-leave-active", {
transformOrigin: e,
transition: `opacity ${o} ${Kt}, transform ${o} ${Kt} ${r && `,${r}`}`
}), m("&.fade-in-scale-up-transition-enter-active", {
transformOrigin: e,
transition: `opacity ${o} ${Gt}, transform ${o} ${Gt} ${r && `,${r}`}`
}), m("&.fade-in-scale-up-transition-enter-from, &.fade-in-scale-up-transition-leave-to", {
opacity: 0,
transform: `${n} scale(${t})`
}), m("&.fade-in-scale-up-transition-leave-from, &.fade-in-scale-up-transition-enter-to", {
opacity: 1,
transform: `${n} scale(1)`
})];
}
const Yr = {
space: "6px",
spaceArrow: "10px",
arrowOffset: "10px",
arrowOffsetVertical: "10px",
arrowHeight: "6px",
padding: "8px 14px"
};
function Ur(e) {
const {
boxShadow2: o,
popoverColor: t,
textColor2: n,
borderRadius: r,
fontSize: a,
dividerColor: u
} = e;
return Object.assign(Object.assign({}, Yr), {
fontSize: a,
borderRadius: r,
color: t,
dividerColor: u,
textColor: n,
boxShadow: o
});
}
const un = {
name: "Popover",
common: xe,
self: Ur
}, Qo = {
top: "bottom",
bottom: "top",
left: "right",
right: "left"
}, ie = "var(--n-arrow-height) * 1.414", qr = m([k("popover", `
transition:
box-shadow .3s var(--n-bezier),
background-color .3s var(--n-bezier),
color .3s var(--n-bezier);
position: relative;
font-size: var(--n-font-size);
color: var(--n-text-color);
box-shadow: var(--n-box-shadow);
word-break: break-word;
`, [m(">", [k("scrollbar", `
height: inherit;
max-height: inherit;
`)]), Ge("raw", `
background-color: var(--n-color);
border-radius: var(--n-border-radius);
`, [Ge("scrollable", [Ge("show-header-or-footer", "padding: var(--n-padding);")])]), R("header", `
padding: var(--n-padding);
border-bottom: 1px solid var(--n-divider-color);
transition: border-color .3s var(--n-bezier);
`), R("footer", `
padding: var(--n-padding);
border-top: 1px solid var(--n-divider-color);
transition: border-color .3s var(--n-bezier);
`), P("scrollable, show-header-or-footer", [R("content", `
padding: var(--n-padding);
`)])]), k("popover-shared", `
transform-origin: inherit;
`, [
k("popover-arrow-wrapper", `
position: absolute;
overflow: hidden;
pointer-events: none;
`, [k("popover-arrow", `
transition: background-color .3s var(--n-bezier);
position: absolute;
display: block;
width: calc(${ie});
height: calc(${ie});
box-shadow: 0 0 8px 0 rgba(0, 0, 0, .12);
transform: rotate(45deg);
background-color: var(--n-color);
pointer-events: all;
`)]),
// body transition
m("&.popover-transition-enter-from, &.popover-transition-leave-to", `
opacity: 0;
transform: scale(.85);
`),
m("&.popover-transition-enter-to, &.popover-transition-leave-from", `
transform: scale(1);
opacity: 1;
`),
m("&.popover-transition-enter-active", `
transition:
box-shadow .3s var(--n-bezier),
background-color .3s var(--n-bezier),
color .3s var(--n-bezier),
opacity .15s var(--n-bezier-ease-out),
transform .15s var(--n-bezier-ease-out);
`),
m("&.popover-transition-leave-active", `
transition:
box-shadow .3s var(--n-bezier),
background-color .3s var(--n-bezier),
color .3s var(--n-bezier),
opacity .15s var(--n-bezier-ease-in),
transform .15s var(--n-bezier-ease-in);
`)
]), he("top-start", `
top: calc(${ie} / -2);
left: calc(${Re("top-start")} - var(--v-offset-left));
`), he("top", `
top: calc(${ie} / -2);
transform: translateX(calc(${ie} / -2)) rotate(45deg);
left: 50%;
`), he("top-end", `
top: calc(${ie} / -2);
right: calc(${Re("top-end")} + var(--v-offset-left));
`), he("bottom-start", `
bottom: calc(${ie} / -2);
left: calc(${Re("bottom-start")} - var(--v-offset-left));
`), he("bottom", `
bottom: calc(${ie} / -2);
transform: translateX(calc(${ie} / -2)) rotate(45deg);
left: 50%;
`), he("bottom-end", `
bottom: calc(${ie} / -2);
right: calc(${Re("bottom-end")} + var(--v-offset-left));
`), he("left-start", `
left: calc(${ie} / -2);
top: calc(${Re("left-start")} - var(--v-offset-top));
`), he("left", `
left: calc(${ie} / -2);
transform: translateY(calc(${ie} / -2)) rotate(45deg);
top: 50%;
`), he("left-end", `
left: calc(${ie} / -2);
bottom: calc(${Re("left-end")} + var(--v-offset-top));
`), he("right-start", `
right: calc(${ie} / -2);
top: calc(${Re("right-start")} - var(--v-offset-top));
`), he("right", `
right: calc(${ie} / -2);
transform: translateY(calc(${ie} / -2)) rotate(45deg);
top: 50%;
`), he("right-end", `
right: calc(${ie} / -2);
bottom: calc(${Re("right-end")} + var(--v-offset-top));
`), ...rr({
top: ["right-start", "left-start"],
right: ["top-end", "bottom-end"],
bottom: ["right-end", "left-end"],
left: ["top-start", "bottom-start"]
}, (e, o) => {
const t = ["right", "left"].includes(o), n = t ? "width" : "height";
return e.map((r) => {
const a = r.split("-")[1] === "end", i = `calc((${`var(--v-target-${n}, 0px)`} - ${ie}) / 2)`, l = Re(r);
return m(`[v-placement="${r}"] >`, [k("popover-shared", [P("center-arrow", [k("popover-arrow", `${o}: calc(max(${i}, ${l}) ${a ? "+" : "-"} var(--v-offset-${t ? "left" : "top"}));`)])])]);
});
})]);
function Re(e) {
return ["top", "bottom"].includes(e.split("-")[0]) ? "var(--n-arrow-offset)" : "var(--n-arrow-offset-vertical)";
}
function he(e, o) {
const t = e.split("-")[0], n = ["top", "bottom"].includes(t) ? "height: var(--n-space-arrow);" : "width: var(--n-space-arrow);";
return m(`[v-placement="${e}"] >`, [k("popover-shared", `
margin-${Qo[t]}: var(--n-space);
`, [P("show-arrow", `
margin-${Qo[t]}: var(--n-space-arrow);
`), P("overlap", `
margin: 0;
`), Cr("popover-arrow-wrapper", `
right: 0;
left: 0;
top: 0;
bottom: 0;
${t}: 100%;
${Qo[t]}: auto;
${n}
`, [k("popover-arrow", o)])])]);
}
const fn = Object.assign(Object.assign({}, Q.props), {
to: Ue.propTo,
show: Boolean,
trigger: String,
showArrow: Boolean,
delay: Number,
duration: Number,
raw: Boolean,
arrowPointToCenter: Boolean,
arrowClass: String,
arrowStyle: [String, Object],
arrowWrapperClass: String,
arrowWrapperStyle: [String, Object],
displayDirective: String,
x: Number,
y: Number,
flip: Boolean,
overlap: Boolean,
placement: String,
width: [Number, String],
keepAliveOnHover: Boolean,
scrollable: Boolean,
contentClass: String,
contentStyle: [Object, String],
headerClass: String,
headerStyle: [Object, String],
footerClass: String,
footerStyle: [Object, String],
// private
internalDeactivateImmediately: Boolean,
animated: Boolean,
onClickoutside: Function,
internalTrapFocus: Boolean,
internalOnAfterLeave: Function,
// deprecated
minWidth: Number,
maxWidth: Number
});
function Zr({
arrowClass: e,
arrowStyle: o,
arrowWrapperClass: t,
arrowWrapperStyle: n,
clsPrefix: r
}) {
return d("div", {
key: "__popover-arrow__",
style: n,
class: [`${r}-popover-arrow-wrapper`, t]
}, d("div", {
class: [`${r}-popover-arrow`, e],
style: o
}));
}
const Qr = W({
name: "PopoverBody",
inheritAttrs: !1,
props: fn,
setup(e, {
slots: o,
attrs: t
}) {
const {
namespaceRef: n,
mergedClsPrefixRef: r,
inlineThemeDisabled: a
} = de(e), u = Q("Popover", "-popover", qr, un, e, r), i = I(null), l = U("NPopover"), s = I(null), c = I(e.show), g = I(!1);
Ee(() => {
const {
show: f
} = e;
f && !Rr() && !e.internalDeactivateImmediately && (g.value = !0);
});
const b = T(() => {
const {
trigger: f,
onClickoutside: B
} = e, j = [], {
positionManuallyRef: {
value: M
}
} = l;
return M || (f === "click" && !B && j.push([et, z, void 0, {
capture: !0
}]), f === "hover" && j.push([ir, E])), B && j.push([et, z, void 0, {
capture: !0
}]), (e.displayDirective === "show" || e.animated && g.value) && j.push([yo, e.show]), j;
}), p = T(() => {
const {
common: {
cubicBezierEaseInOut: f,
cubicBezierEaseIn: B,
cubicBezierEaseOut: j
},
self: {
space: M,
spaceArrow: K,
padding: N,
fontSize: G,
textColor: Y,
dividerColor: O,
color: D,
boxShadow: F,
borderRadius: te,
arrowHeight: ne,
arrowOffset: q,
arrowOffsetVertical: ve
}
} = u.value;
return {
"--n-box-shadow": F,
"--n-bezier": f,
"--n-bezier-ease-in": B,
"--n-bezier-ease-out": j,
"--n-font-size": G,
"--n-text-color": Y,
"--n-color": D,
"--n-divider-color": O,
"--n-border-radius": te,
"--n-arrow-height": ne,
"--n-arrow-offset": q,
"--n-arrow-offset-vertical": ve,
"--n-padding": N,
"--n-space": M,
"--n-space-arrow": K
};
}), v = T(() => {
const f = e.width === "trigger" ? void 0 : xo(e.width), B = [];
f && B.push({
width: f
});
const {
maxWidth: j,
minWidth: M
} = e;
return j && B.push({
maxWidth: xo(j)
}), M && B.push({
maxWidth: xo(M)
}), a || B.push(p.value), B;
}), h = a ? Pe("popover", void 0, p, e) : void 0;
l.setBodyInstance({
syncPosition: y
}), _e(() => {
l.setBodyInstance(null);
}), Co(be(e, "show"), (f) => {
e.animated || (f ? c.value = !0 : c.value = !1);
});
function y() {
var f;
(f = i.value) === null || f === void 0 || f.syncPosition();
}
function x(f) {
e.trigger === "hover" && e.keepAliveOnHover && e.show && l.handleMouseEnter(f);
}
function $(f) {
e.trigger === "hover" && e.keepAliveOnHover && l.handleMouseLeave(f);
}
function E(f) {
e.trigger === "hover" && !S().contains(wo(f)) && l.handleMouseMoveOutside(f);
}
function z(f) {
(e.trigger === "click" && !S().contains(wo(f)) || e.onClickoutside) && l.handleClickOutside(f);
}
function S() {
return l.getTriggerElement();
}
oe(st, s), oe(at, null), oe(lt, null);
function C() {
if (h == null || h.onRender(), !(e.displayDirective === "show" || e.show || e.animated && g.value))
return null;
let B;
const j = l.internalRenderBodyRef.value, {
value: M
} = r;
if (j)
B = j(
// The popover class and overlap class must exists, they will be used
// to place the body & transition animation.
// Shadow class exists for reuse box-shadow.
[`${M}-popover-shared`, h == null ? void 0 : h.themeClass.value, e.overlap && `${M}-popover-shared--overlap`, e.showArrow && `${M}-popover-shared--show-arrow`, e.arrowPointToCenter && `${M}-popover-shared--center-arrow`],
s,
v.value,
x,
$
);
else {
const {
value: K
} = l.extraClassRef, {
internalTrapFocus: N
} = e, G = !nt(o.header) || !nt(o.footer), Y = () => {
var O, D;
const F = G ? d(Be, null, ce(o.header, (q) => q ? d("div", {
class: [`${M}-popover__header`, e.headerClass],
style: e.headerStyle
}, q) : null), ce(o.default, (q) => q ? d("div", {
class: [`${M}-popover__content`, e.contentClass],
style: e.contentStyle
}, o) : null), ce(o.footer, (q) => q ? d("div", {
class: [`${M}-popover__footer`, e.footerClass],
style: e.footerStyle
}, q) : null)) : e.scrollable ? (O = o.default) === null || O === void 0 ? void 0 : O.call(o) : d("div", {
class: [`${M}-popover__content`, e.contentClass],
style: e.contentStyle
}, o), te = e.scrollable ? d(Gr, {
contentClass: G ? void 0 : `${M}-popover__content ${(D = e.contentClass) !== null && D !== void 0 ? D : ""}`,
contentStyle: G ? void 0 : e.contentStyle
}, {
default: () => F
}) : F, ne = e.showArrow ? Zr({
arrowClass: e.arrowClass,
arrowStyle: e.arrowStyle,
arrowWrapperClass: e.arrowWrapperClass,
arrowWrapperStyle: e.arrowWrapperStyle,
clsPrefix: M
}) : null;
return [te, ne];
};
B = d("div", Bo({
class: [`${M}-popover`, `${M}-popover-shared`, h == null ? void 0 : h.themeClass.value, K.map((O) => `${M}-${O}`), {
[`${M}-popover--scrollable`]: e.scrollable,
[`${M}-popover--show-header-or-footer`]: G,
[`${M}-popover--raw`]: e.raw,
[`${M}-popover-shared--overlap`]: e.overlap,
[`${M}-popover-shared--show-arrow`]: e.showArrow,
[`${M}-popover-shared--center-arrow`]: e.arrowPointToCenter
}],
ref: s,
style: v.value,
onKeydown: l.handleKeydown,
onMouseenter: x,
onMouseleave: $
}, t), N ? d(Jt, {
active: e.show,
autoFocus: !0
}, {
default: Y
}) : Y());
}
return Xe(B, b.value);
}
return {
displayed: g,
namespace: n,
isMounted: l.isMountedRef,
zIndex: l.zIndexRef,
followerRef: i,
adjustedTo: Ue(e),
followerEnabled: c,
renderContentNode: C
};
},
render() {
return d(cr, {
ref: "followerRef",
zIndex: this.zIndex,
show: this.show,
enabled: this.followerEnabled,
to: this.adjustedTo,
x: this.x,
y: this.y,
flip: this.flip,
placement: this.placement,
containerClass: this.namespace,
overlap: this.overlap,
width: this.width === "trigger" ? "target" : void 0,
teleportDisabled: this.adjustedTo === Ue.tdkey
}, {
default: () => this.animated ? d(ke, {
name: "popover-transition",
appear: this.isMounted,
// Don't use watch to enable follower, since the transition may
// make position sync timing very subtle and buggy.
onEnter: () => {
this.followerEnabled = !0;
},
onAfterLeave: () => {
var e;
(e = this.internalOnAfterLeave) === null || e === void 0 || e.call(this), this.followerEnabled = !1, this.displayed = !1;
}
}, {
default: this.renderContentNode
}) : this.renderContentNode()
});
}
}), Jr = Object.keys(fn), ei = {
focus: ["onFocus", "onBlur"],
click: ["onClick"],
hover: ["onMouseenter", "onMouseleave"],
manual: [],
nested: ["onFocus", "onBlur", "onMouseenter", "onMouseleave", "onClick"]
};
function oi(e, o, t) {
ei[o].forEach((n) => {
e.props ? e.props = Object.assign({}, e.props) : e.props = {};
const r = e.props[n], a = t[n];
r ? e.props[n] = (...u) => {
r(...u), a(...u);
} : e.props[n] = a;
});
}
const hn = {
show: {
type: Boolean,
default: void 0
},
defaultShow: Boolean,
showArrow: {
type: Boolean,
default: !0
},
trigger: {
type: String,
default: "hover"
},
delay: {
type: Number,
default: 100
},
duration: {
type: Number,
default: 100
},
raw: Boolean,
placement: {
type: String,
default: "top"
},
x: Number,
y: Number,
arrowPointToCenter: Boolean,
disabled: Boolean,
getDisabled: Function,
displayDirective: {
type: String,
default: "if"
},
arrowClass: String,
arrowStyle: [String, Object],
arrowWrapperClass: String,
arrowWrapperStyle: [String, Object],
flip: {
type: Boolean,
default: !0
},
animated: {
type: Boolean,
default: !0
},
width: {
type: [Number, String],
default: void 0
},
overlap: Boolean,
keepAliveOnHover: {
type: Boolean,
default: !0
},
zIndex: Number,
to: Ue.propTo,
scrollable: Boolean,
contentClass: String,
contentStyle: [Object, String],
headerClass: String,
headerStyle: [Object, String],
footerClass: String,
footerStyle: [Object, String],
// events
onClickoutside: Function,
"onUpdate:show": [Function, Array],
onUpdateShow: [Function, Array],
// internal
internalDeactivateImmediately: Boolean,
internalSyncTargetWithParent: Boolean,
internalInheritedEventHandlers: {
type: Array,
default: () => []
},
internalTrapFocus: Boolean,
internalExtraClass: {
type: Array,
default: () => []
},
// deprecated
onShow: [Function, Array],
onHide: [Function, Array],
arrow: {
type: Boolean,
default: void 0
},
minWidth: Number,
maxWidth: Number
}, ti = Object.assign(Object.assign(Object.assign({}, Q.props), hn), {
internalOnAfterLeave: Function,
internalRenderBody: Function
}), ni = W({
name: "Popover",
inheritAttrs: !1,
props: ti,
__popover__: !0,
setup(e) {
process.env.NODE_ENV !== "production" && Ee(() => {
e.maxWidth !== void 0 && $e("popover", "`max-width` is deprecated, please use `style` instead."), e.minWidth !== void 0 && $e("popover", "`min-width` is deprecated, please use `style` instead."), e.arrow !== void 0 && $e("popover", "`arrow` is deprecated, please use `showArrow` instead."), e.onHide !== void 0 && $e("popover", "`on-hide` is deprecated, please use `on-update:show` instead."), e.onShow !== void 0 && $e("popover", "`on-show` is deprecated, please use `on-update:show` instead.");
});
const o = Ho(), t = I(null), n = T(() => e.show), r = I(e.defaultShow), a = lr(n, r), u = Ye(() => e.disabled ? !1 : a.value), i = () => {
if (e.disabled) return !0;
const {
getDisabled: O
} = e;
return !!(O != null && O());
}, l = () => i() ? !1 : a.value, s = sr(e, ["arrow", "showArrow"]), c = T(() => e.overlap ? !1 : s.value);
let g = null;
const b = I(null), p = I(null), v = Ye(() => e.x !== void 0 && e.y !== void 0);
function h(O) {
const {
"onUpdate:show": D,
onUpdateShow: F,
onShow: te,
onHide: ne
} = e;
r.value = O, D && me(D, O), F && me(F, O), O && te && me(te, !0), O && ne && me(ne, !1);
}
function y() {
g && g.syncPosition();
}
function x() {
const {
value: O
} = b;
O && (window.clearTimeout(O), b.value = null);
}
function $() {
const {
value: O
} = p;
O && (window.clearTimeout(O), p.value = null);
}
function E() {
const O = i();
if (e.trigger === "focus" && !O) {
if (l()) return;
h(!0);
}
}
function z() {
const O = i();
if (e.trigger === "focus" && !O) {
if (!l()) return;
h(!1);
}
}
function S() {
const O = i();
if (e.trigger === "hover" && !O) {
if ($(), b.value !== null || l()) return;
const D = () => {
h(!0), b.value = null;
}, {
delay: F
} = e;
F === 0 ? D() : b.value = window.setTimeout(D, F);
}
}
function C() {
const O = i();
if (e.trigger === "hover" && !O) {
if (x(), p.value !== null || !l()) return;
const D = () => {
h(!1), p.value = null;
}, {
duration: F
} = e;
F === 0 ? D() : p.value = window.setTimeout(D, F);
}
}
function f() {
C();
}
function B(O) {
var D;
l() && (e.trigger === "click" && (x(), $(), h(!1)), (D = e.onClickoutside) === null || D === void 0 || D.call(e, O));
}
function j() {
if (e.trigger === "click" && !i()) {
x(), $();
const O = !l();
h(O);
}
}
function M(O) {
e.internalTrapFocus && O.key === "Escape" && (x(), $(), h(!1));
}
function K(O) {
r.value = O;
}
function N() {
var O;
return (O = t.value) === null || O === void 0 ? void 0 : O.targetRef;
}
function G(O) {
g = O;
}
return oe("NPopover", {
getTriggerElement: N,
handleKeydown: M,
handleMouseEnter: S,
handleMouseLeave: C,
handleClickOutside: B,
handleMouseMoveOutside: f,
setBodyInstance: G,
positionManuallyRef: v,
isMountedRef: o,
zIndexRef: be(e, "zIndex"),
extraClassRef: be(e, "internalExtraClass"),
internalRenderBodyRef: be(e, "internalRenderBody")
}), Ee(() => {
a.value && i() && h(!1);
}), {
binderInstRef: t,
positionManually: v,
mergedShowConsideringDisabledProp: u,
// if to show popover body
uncontrolledShow: r,
mergedShowArrow: c,
getMergedShow: l,
setShow: K,
handleClick: j,
handleMouseEnter: S,
handleMouseLeave: C,
handleFocus: E,
handleBlur: z,
syncPosition: y
};
},
render() {
var e;
const {
positionManually: o,
$slots: t
} = this;
let n, r = !1;
if (!o && (t.activator ? n = tt(t, "activator") : n = tt(t, "trigger"), n)) {
n = qt(n), n = n.type === or ? d("span", [n]) : n;
const a = {
onClick: this.handleClick,
onMouseenter: this.handleMouseEnter,
onMouseleave: this.handleMouseLeave,
onFocus: this.handleFocus,
onBlur: this.handleBlur
};
if (!((e = n.type) === null || e === void 0) && e.__popover__)
r = !0, n.props || (n.props = {
internalSyncTargetWithParent: !0,
internalInheritedEventHandlers: []
}), n.props.internalSyncTargetWithParent = !0, n.props.internalInheritedEventHandlers ? n.props.internalInheritedEventHandlers = [a, ...n.props.internalInheritedEventHandlers] : n.props.internalInheritedEventHandlers = [a];
else {
const {
internalInheritedEventHandlers: u
} = this, i = [a, ...u], l = {
onBlur: (s) => {
i.forEach((c) => {
c.onBlur(s);
});
},
onFocus: (s) => {
i.forEach((c) => {
c.onFocus(s);
});
},
onClick: (s) => {
i.forEach((c) => {
c.onClick(s);
});
},
onMouseenter: (s) => {
i.forEach((c) => {
c.onMouseenter(s);
});
},
onMouseleave: (s) => {
i.forEach((c) => {
c.onMouseleave(s);
});
}
};
oi(n, u ? "nested" : o ? "manual" : this.trigger, l);
}
}
return d(dr, {
ref: "binderInstRef",
syncTarget: !r,
syncTargetWithParent: this.internalSyncTargetWithParent
}, {
default: () => {
this.mergedShowConsideringDisabledProp;
const a = this.getMergedShow();
return [this.internalTrapFocus && a ? Xe(d("div", {
style: {
position: "fixed",
top: 0,
right: 0,
bottom: 0,
left: 0
}
}), [[Zt, {
enabled: a,
zIndex: this.zIndex
}]]) : null, o ? null : d(ur, null, {
default: () => n
}), d(Qr, Ze(this.$props, Jr, Object.assign(Object.assign({}, this.$attrs), {
showArrow: this.mergedShowArrow,
show: a
})), {
default: () => {
var u, i;
return (i = (u = this.$slots).default) === null || i === void 0 ? void 0 : i.call(u);
},
header: () => {
var u, i;
return (i = (u = this.$slots).header) === null || i === void 0 ? void 0 : i.call(u);
},
footer: () => {
var u, i;
return (i = (u = this.$slots).footer) === null || i === void 0 ? void 0 : i.call(u);
}
})];
}
});
}
}), {
cubicBezierEaseInOut: Ie
} = Ne;
function ri({
duration: e = ".2s",
delay: o = ".1s"
} = {}) {
return [m("&.fade-in-width-expand-transition-leave-from, &.fade-in-width-expand-transition-enter-to", {
opacity: 1
}), m("&.fade-in-width-expand-transition-leave-to, &.fade-in-width-expand-transition-enter-from", `
opacity: 0!important;
margin-left: 0!important;
margin-right: 0!important;
`), m("&.fade-in-width-expand-transition-leave-active", `
overflow: hidden;
transition:
opacity ${e} ${Ie},
max-width ${e} ${Ie} ${o},
margin-left ${e} ${Ie} ${o},
margin-right ${e} ${Ie} ${o};
`), m("&.fade-in-width-expand-transition-enter-active", `
overflow: hidden;
transition:
opacity ${e} ${Ie} ${o},
max-width ${e} ${Ie},
margin-left ${e} ${Ie},
margin-right ${e} ${Ie};
`)];
}
const ii = k("base-wave", `
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
border-radius: inherit;
`), ai = W({
name: "BaseWave",
props: {
clsPrefix: {
type: String,
required: !0
}
},
setup(e) {
jo("-base-wave", ii, be(e, "clsPrefix"));
const o = I(null), t = I(!1);
let n = null;
return _e(() => {
n !== null && window.clearTimeout(n);
}), {
active: t,
selfRef: o,
play() {
n !== null && (window.clearTimeout(n), t.value = !1, n = null), ze(() => {
var r;
(r = o.value) === null || r === void 0 || r.offsetHeight, t.value = !0, n = window.setTimeout(() => {
t.value = !1, n = null;
}, 1e3);
});
}
};
},
render() {
const {
clsPrefix: e
} = this;
return d("div", {
ref: "selfRef",
"aria-hidden": !0,
class: [`${e}-base-wave`, this.active && `${e}-base-wave--active`]
});
}
}), {
cubicBezierEaseInOut: we,
cubicBezierEaseOut: li,
cubicBezierEaseIn: si
} = Ne;
function ci({
overflow: e = "hidden",
duration: o = ".3s",
originalTransition: t = "",
leavingDelay: n = "0s",
foldPadding: r = !1,
enterToProps: a = void 0,
leaveToProps: u = void 0,
reverse: i = !1
} = {}) {
const l = i ? "leave" : "enter", s = i ? "enter" : "leave";
return [m(`&.fade-in-height-expand-transition-${s}-from,
&.fade-in-height-expand-transition-${l}-to`, Object.assign(Object.assign({}, a), {
opacity: 1
})), m(`&.fade-in-height-expand-transition-${s}-to,
&.fade-in-height-expand-transition-${l}-from`, Object.assign(Object.assign({}, u), {
opacity: 0,
marginTop: "0 !important",
marginBottom: "0 !important",
paddingTop: r ? "0 !important" : void 0,
paddingBottom: r ? "0 !important" : void 0
})), m(`&.fade-in-height-expand-transition-${s}-active`, `
overflow: ${e};
transition:
max-height ${o} ${we} ${n},
opacity ${o} ${li} ${n},
margin-top ${o} ${we} ${n},
margin-bottom ${o} ${we} ${n},
padding-top ${o} ${we} ${n},
padding-bottom ${o} ${we} ${n}
${t ? `,${t}` : ""}
`), m(`&.fade-in-height-expand-transition-${l}-active`, `
overflow: ${e};
transition:
max-height ${o} ${we},
opacity ${o} ${si},
margin-top ${o} ${we},
margin-bottom ${o} ${we},
padding-top ${o} ${we},
padding-bottom ${o} ${we}
${t ? `,${t}` : ""}
`)];
}
const di = Qe && "chrome" in window;
Qe && navigator.userAgent.includes("Firefox");
const ui = Qe && navigator.userAgent.includes("Safari") && !di;
function Fe(e) {
return To(e, [255, 255, 255, 0.16]);
}
function go(e) {
return To(e, [0, 0, 0, 0.12]);
}
const fi = "n-button-group", hi = {
paddingTiny: "0 6px",
paddingSmall: "0 10px",
paddingMedium: "0 14px",
paddingLarge: "0 18px",
paddingRoundTiny: "0 10px",
paddingRoundSmall: "0 14px",
paddingRoundMedium: "0 18px",
paddingRoundLarge: "0 22px",
iconMarginTiny: "6px",
iconMarginSmall: "6px",
iconMarginMedium: "6px",
iconMarginLarge: "6px",
iconSizeTiny: "14px",
iconSizeSmall: "18px",
iconSizeMedium: "18px",
iconSizeLarge: "20px",
rippleDuration: ".6s"
};
function vi(e) {
const {
heightTiny: o,
heightSmall: t,
heightMedium: n,
heightLarge: r,
borderRadius: a,
fontSizeTiny: u,
fontSizeSmall: i,
fontSizeMedium: l,
fontSizeLarge: s,
opacityDisabled: c,
textColor2: g,
textColor3: b,
primaryColorHover: p,
primaryColorPressed: v,
borderColor: h,
primaryColor: y,
baseColor: x,
infoColor: $,
infoColorHover: E,
infoColorPressed: z,
successColor: S,
successColorHover: C,
successColorPressed: f,
warningColor: B,
warningColorHover: j,
warningColorPressed: M,
errorColor: K,
errorColorHover: N,
errorColorPressed: G,
fontWeight: Y,
buttonColor2: O,
buttonColor2Hover: D,
buttonColor2Pressed: F,
fontWeightStrong: te
} = e;
return Object.assign(Object.assign({}, hi), {
heightTiny: o,
heightSmall: t,
heightMedium: n,
heightLarge: r,
borderRadiusTiny: a,
borderRadiusSmall: a,
borderRadiusMedium: a,
borderRadiusLarge: a,
fontSizeTiny: u,
fontSizeSmall: i,
fontSizeMedium: l,
fontSizeLarge: s,
opacityDisabled: c,
// secondary
colorOpacitySecondary: "0.16",
colorOpacitySecondaryHover: "0.22",
colorOpacitySecondaryPressed: "0.28",
colorSecondary: O,
colorSecondaryHover: D,
colorSecondaryPressed: F,
// tertiary
colorTertiary: O,
colorTertiaryHover: D,
colorTertiaryPressed: F,
// quaternary
colorQuaternary: "#0000",
colorQuaternaryHover: D,
colorQuaternaryPressed: F,
// default type
color: "#0000",
colorHover: "#0000",
colorPressed: "#0000",
colorFocus: "#0000",
colorDisabled: "#0000",
textColor: g,
textColorTertiary: b,
textColorHover: p,
textColorPressed: v,
textColorFocus: p,
textColorDisabled: g,
textColorText: g,
textColorTextHover: p,
textColorTextPressed: v,
textColorTextFocus: p,
textColorTextDisabled: g,
textColorGhost: g,
textColorGhostHover: p,
textColorGhostPressed: v,
textColorGhostFocus: p,
textColorGhostDisabled: g,
border: `1px solid ${h}`,
borderHover: `1px solid ${p}`,
borderPressed: `1px solid ${v}`,
borderFocus: `1px solid ${p}`,
borderDisabled: `1px solid ${h}`,
rippleColor: y,
// primary
colorPrimary: y,
colorHoverPrimary: p,
colorPressedPrimary: v,
colorFocusPrimary: p,
colorDisabledPrimary: y,
textColorPrimary: x,
textColorHoverPrimary: x,
textColorPressedPrimary: x,
textColorFocusPrimary: x,
textColorDisabledPrimary: x,
textColorTextPrimary: y,
textColorTextHoverPrimary: p,
textColorTextPressedPrimary: v,
textColorTextFocusPrimary: p,
textColorTextDisabledPrimary: g,
textColorGhostPrimary: y,
textColorGhostHoverPrimary: p,
textColorGhostPressedPrimary: v,
textColorGhostFocusPrimary: p,
textColorGhostDisabledPrimary: y,
borderPrimary: `1px solid ${y}`,
borderHoverPrimary: `1px solid ${p}`,
borderPressedPrimary: `1px solid ${v}`,
borderFocusPrimary: `1px solid ${p}`,
borderDisabledPrimary: `1px solid ${y}`,
rippleColorPrimary: y,
// info
colorInfo: $,
colorHoverInfo: E,
colorPressedInfo: z,
colorFocusInfo: E,
colorDisabledInfo: $,
textColorInfo: x,
textColorHoverInfo: x,
textColorPressedInfo: x,
textColorFocusInfo: x,
textColorDisabledInfo: x,
textColorTextInfo: $,
textColorTextHoverInfo: E,
textColorTextPressedInfo: z,
textColorTextFocusInfo: E,
textColorTextDisabledInfo: g,
textColorGhostInfo: $,
textColorGhostHoverInfo: E,
textColorGhostPressedInfo: z,
textColorGhostFocusInfo: E,
textColorGhostDisabledInfo: $,
borderInfo: `1px solid ${$}`,
borderHoverInfo: `1px solid ${E}`,
borderPressedInfo: `1px solid ${z}`,
borderFocusInfo: `1px solid ${E}`,
borderDisabledInfo: `1px solid ${$}`,
rippleColorInfo: $,
// success
colorSuccess: S,
colorHoverSuccess: C,
colorPressedSuccess: f,
colorFocusSuccess: C,
colorDisabledSuccess: S,
textColorSuccess: x,
textColorHoverSuccess: x,
textColorPressedSuccess: x,
textColorFocusSuccess: x,
textColorDisabledSuccess: x,
textColorTextSuccess: S,
textColorTextHoverSuccess: C,
textColorTextPressedSuccess: f,
textColorTextFocusSuccess: C,
textColorTextDisabledSuccess: g,
textColorGhostSuccess: S,
textColorGhostHoverSuccess: C,
textColorGhostPressedSuccess: f,
textColorGhostFocusSuccess: C,
textColorGhostDisabledSuccess: S,
borderSuccess: `1px solid ${S}`,
borderHoverSuccess: `1px solid ${C}`,
borderPressedSuccess: `1px solid ${f}`,
borderFocusSuccess: `1px solid ${C}`,
borderDisabledSuccess: `1px solid ${S}`,
rippleColorSuccess: S,
// warning
colorWarning: B,
colorHoverWarning: j,
colorPressedWarning: M,
colorFocusWarning: j,
colorDisabledWarning: B,
textColorWarning: x,
textColorHoverWarning: x,
textColorPressedWarning: x,
textColorFocusWarning: x,
textColorDisabledWarning: x,
textColorTextWarning: B,
textColorTextHoverWarning: j,
textColorTextPressedWarning: M,
textColorTextFocusWarning: j,
textColorTextDisabledWarning: g,
textColorGhostWarning: B,
textColorGhostHoverWarning: j,
textColorGhostPressedWarning: M,
textColorGhostFocusWarning: j,
textColorGhostDisabledWarning: B,
borderWarning: `1px solid ${B}`,
borderHoverWarning: `1px solid ${j}`,
borderPressedWarning: `1px solid ${M}`,
borderFocusWarning: `1px solid ${j}`,
borderDisabledWarning: `1px solid ${B}`,
rippleColorWarning: B,
// error
colorError: K,
colorHoverError: N,
colorPressedError: G,
colorFocusError: N,
colorDisabledError: K,
textColorError: x,
textColorHoverError: x,
textColorPressedError: x,
textColorFocusError: x,
textColorDisabledError: x,
textColorTextError: K,
textColorTextHoverError: N,
textColorTextPressedError: G,
textColorTextFocusError: N,
textColorTextDisabledError: g,
textColorGhostError: K,
textColorGhostHoverError: N,
textColorGhostPressedError: G,
textColorGhostFocusError: N,
textColorGhostDisabledError: K,
borderError: `1px solid ${K}`,
borderHoverError: `1px solid ${N}`,
borderPressedError: `1px solid ${G}`,
borderFocusError: `1px solid ${N}`,
borderDisabledError: `1px solid ${K}`,
rippleColorError: K,
waveOpacity: "0.6",
fontWeight: Y,
fontWeightStrong: te
});
}
const vn = {
name: "Button",
common: xe,
self: vi
}, gi = m([k("button", `
margin: 0;
font-weight: var(--n-font-weight);
line-height: 1;
font-family: inherit;
padding: var(--n-padding);
height: var(--n-height);
font-size: var(--n-font-size);
border-radius: var(--n-border-radius);
color: var(--n-text-color);
background-color: var(--n-color);
width: var(--n-width);
white-space: nowrap;
outline: none;
position: relative;
z-index: auto;
border: none;
display: inline-flex;
flex-wrap: nowrap;
flex-shrink: 0;
align-items: center;
justify-content: center;
user-select: none;
-webkit-user-select: none;
text-align: center;
cursor: pointer;
text-decoration: none;
transition:
color .3s var(--n-bezier),
background-color .3s var(--n-bezier),
opacity .3s var(--n-bezier),
border-color .3s var(--n-bezier);
`, [P("color", [R("border", {
borderColor: "var(--n-border-color)"
}), P("disabled", [R("border", {
borderColor: "var(--n-border-color-disabled)"
})]), Ge("disabled", [m("&:focus", [R("state-border", {
borderColor: "var(--n-border-color-focus)"
})]), m("&:hover", [R("state-border", {
borderColor: "var(--n-border-color-hover)"
})]), m("&:active", [R("state-border", {
borderColor: "var(--n-border-color-pressed)"
})]), P("pressed", [R("state-border", {
borderColor: "var(--n-border-color-pressed)"
})])])]), P("disabled", {
backgroundColor: "var(--n-color-disabled)",
color: "var(--n-text-color-disabled)"
}, [R("border", {
border: "var(--n-border-disabled)"
})]), Ge("disabled", [m("&:focus", {
backgroundColor: "var(--n-color-focus)",
color: "var(--n-text-color-focus)"
}, [R("state-border", {
border: "var(--n-border-focus)"
})]), m("&:hover", {
backgroundColor: "var(--n-color-hover)",
color: "var(--n-text-color-hover)"
}, [R("state-border", {
border: "var(--n-border-hover)"
})]), m("&:active", {
backgroundColor: "var(--n-color-pressed)",
color: "var(--n-text-color-pressed)"
}, [R("state-border", {
border: "var(--n-border-pressed)"
})]), P("pressed", {
backgroundColor: "var(--n-color-pressed)",
color: "var(--n-text-color-pressed)"
}, [R("state-border", {
border: "var(--n-border-pressed)"
})])]), P("loading", "cursor: wait;"), k("base-wave", `
pointer-events: none;
top: 0;
right: 0;
bottom: 0;
left: 0;
animation-iteration-count: 1;
animation-duration: var(--n-ripple-duration);
animation-timing-function: var(--n-bezier-ease-out), var(--n-bezier-ease-out);
`, [P("active", {
zIndex: 1,
animationName: "button-wave-spread, button-wave-opacity"
})]), Qe && "MozBoxSizing" in document.createElement("div").style ? m("&::moz-focus-inner", {
border: 0
}) : null, R("border, state-border", `
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
border-radius: inherit;
transition: border-color .3s var(--n-bezier);
pointer-events: none;
`), R("border", {
border: "var(--n-border)"
}), R("state-border", {
border: "var(--n-border)",
borderColor: "#0000",
zIndex: 1
}), R("icon", `
margin: var(--n-icon-margin);
margin-left: 0;
height: var(--n-icon-size);
width: var(--n-icon-size);
max-width: var(--n-icon-size);
font-size: var(--n-icon-size);
position: relative;
flex-shrink: 0;
`, [k("icon-slot", `
height: var(--n-icon-size);
width: var(--n-icon-size);
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
display: flex;
align-items: center;
justify-content: center;
`, [Ro({
top: "50%",
originalTransform: "translateY(-50%)"
})]), ri()]), R("content", `
display: flex;
align-items: center;
flex-wrap: nowrap;
min-width: 0;
`, [m("~", [R("icon", {
margin: "var(--n-icon-margin)",
marginRight: 0
})])]), P("block", `
display: flex;
width: 100%;
`), P("dashed", [R("border, state-border", {
borderStyle: "dashed !important"
})]), P("disabled", {
cursor: "not-allowed",
opacity: "var(--n-opacity-disabled)"
})]), m("@keyframes button-wave-spread", {
from: {
boxShadow: "0 0 0.5px 0 var(--n-ripple-color)"
},
to: {
// don't use exact 5px since chrome will display the animation with glitches
boxShadow: "0 0 0.5px 4.5px var(--n-ripple-color)"
}
}), m("@keyframes button-wave-opacity", {
from: {
opacity: "var(--n-wave-opacity)"
},
to: {
opacity: 0
}
})]), pi = Object.assign(Object.assign({}, Q.props), {
color: String,
textColor: String,
text: Boolean,
block: Boolean,
loading: Boolean,
disabled: Boolean,
circle: Boolean,
size: String,
ghost: Boolean,
round: Boolean,
secondary: Boolean,
tertiary: Boolean,
quaternary: Boolean,
strong: Boolean,
focusable: {
type: Boolean,
default: !0
},
keyboard: {
type: Boolean,
default: !0
},
tag: {
type: String,
default: "button"
},
type: {
type: String,
default: "default"
},
dashed: Boolean,
renderIcon: Function,
iconPlacement: {
type: String,
default: "left"
},
attrType: {
type: String,
default: "button"
},
bordered: {
type: Boolean,
default: !0
},
onClick: [Function, Array],
nativeFocusBehavior: {
type: Boolean,
default: !ui
}
}), Xt = W({
name: "Button",
props: pi,
setup(e) {
process.env.NODE_ENV !== "production" && Ee(() => {
const {
dashed: z,
ghost: S,
text: C,
secondary: f,
tertiary: B,
quaternary: j
} = e;
(z || S || C) && (f || B || j) && $e("button", "`dashed`, `ghost` and `text` props can't be used along with `secondary`, `tertiary` and `quaternary` props.");
});
const o = I(null), t = I(null), n = I(!1), r = Ye(() => !e.quaternary && !e.tertiary && !e.secondary && !e.text && (!e.color || e.ghost || e.dashed) && e.bordered), a = U(fi, {}), {
mergedSizeRef: u
} = Or({}, {
defaultSize: "medium",
mergedSize: (z) => {
const {
size: S
} = e;
if (S) return S;
const {
size: C
} = a;
if (C) return C;
const {
mergedSize: f
} = z || {};
return f ? f.value : "medium";
}
}), i = T(() => e.focusable && !e.disabled), l = (z) => {
var S;
i.value || z.preventDefault(), !e.nativeFocusBehavior && (z.preventDefault(), !e.disabled && i.value && ((S = o.value) === null || S === void 0 || S.focus({
preventScroll: !0
})));
}, s = (z) => {
var S;
if (!e.disabled && !e.loading) {
const {
onClick: C
} = e;
C && me(C, z), e.text || (S = t.value) === null || S === void 0 || S.play();
}
}, c = (z) => {
switch (z.key) {
case "Enter":
if (!e.keyboard)
return;
n.value = !1;
}
}, g = (z) => {
switch (z.key) {
case "Enter":
if (!e.keyboard || e.loading) {
z.preventDefault();
return;
}
n.value = !0;
}
}, b = () => {
n.value = !1;
}, {
inlineThemeDisabled: p,
mergedClsPrefixRef: v,
mergedRtlRef: h
} = de(e), y = Q("Button", "-button", gi, vn, e, v), x = Je("Button", h, v), $ = T(() => {
const z = y.value, {
common: {
cubicBezierEaseInOut: S,
cubicBezierEaseOut: C
},
self: f
} = z, {
rippleDuration: B,
opacityDisabled: j,
fontWeight: M,
fontWeightStrong: K
} = f, N = u.value, {
dashed: G,
type: Y,
ghost: O,
text: D,
color: F,
round: te,
circle: ne,
textColor: q,
secondary: ve,
tertiary: ge,
quaternary: Ce,
strong: ye
} = e, eo = {
"--n-font-weight": ye ? K : M
};
let X = {
"--n-color": "initial",
"--n-color-hover": "initial",
"--n-color-pressed": "initial",
"--n-color-focus": "initial",
"--n-color-disabled": "initial",
"--n-ripple-color": "initial",
"--n-text-color": "initial",
"--n-text-color-hover": "initial",
"--n-text-color-pressed": "initial",
"--n-text-color-focus": "initial",
"--n-text-color-disabled": "initial"
};
const We = Y === "tertiary", oo = Y === "default", V = We ? "default" : Y;
if (D) {
const J = q || F;
X = {
"--n-color": "#0000",
"--n-color-hover": "#0000",
"--n-color-pressed": "#0000",
"--n-color-focus": "#0000",
"--n-color-disabled": "#0000",
"--n-ripple-color": "#0000",
"--n-text-color": J || f[A("textColorText", V)],
"--n-text-color-hover": J ? Fe(J) : f[A("textColorTextHover", V)],
"--n-text-color-pressed": J ? go(J) : f[A("textColorTextPressed", V)],
"--n-text-color-focus": J ? Fe(J) : f[A("textColorTextHover", V)],
"--n-text-color-disabled": J || f[A("textColorTextDisabled", V)]
};
} else if (O || G) {
const J = q || F;
X = {
"--n-color": "#0000",
"--n-color-hover": "#0000",
"--n-color-pressed": "#0000",
"--n-color-focus": "#0000",
"--n-color-disabled": "#0000",
"--n-ripple-color": F || f[A("rippleColor", V)],
"--n-text-color": J || f[A("textColorGhost", V)],
"--n-text-color-hover": J ? Fe(J) : f[A("textColorGhostHover", V)],
"--n-text-color-pressed": J ? go(J) : f[A("textColorGhostPressed", V)],
"--n-text-color-focus": J ? Fe(J) : f[A("textColorGhostHover", V)],
"--n-text-color-disabled": J || f[A("textColorGhostDisabled", V)]
};
} else if (ve) {
const J = oo ? f.textColor : We ? f.textColorTertiary : f[A("color", V)], ae = F || J, Me = Y !== "default" && Y !== "tertiary";
X = {
"--n-color": Me ? vo(ae, {
alpha: Number(f.colorOpacitySecondary)
}) : f.colorSecondary,
"--n-color-hover": Me ? vo(ae, {
alpha: Number(f.colorOpacitySecondaryHover)
}) : f.colorSecondaryHover,
"--n-color-pressed": Me ? vo(ae, {
alpha: Number(f.colorOpacitySecondaryPressed)
}) : f.colorSecondaryPressed,
"--n-color-focus": Me ? vo(ae, {
alpha: Number(f.colorOpacitySecondaryHover)
}) : f.colorSecondaryHover,
"--n-color-disabled": f.colorSecondary,
"--n-ripple-color": "#0000",
"--n-text-color": ae,
"--n-text-color-hover": ae,
"--n-text-color-pressed": ae,
"--n-text-color-focus": ae,
"--n-text-color-disabled": ae
};
} else if (ge || Ce) {
const J = oo ? f.textColor : We ? f.textColorTertiary : f[A("color", V)], ae = F || J;
ge ? (X["--n-color"] = f.colorTertiary, X["--n-color-hover"] = f.colorTertiaryHover, X["--n-color-pressed"] = f.colorTertiaryPressed, X["--n-color-focus"] = f.colorSecondaryHover, X["--n-color-disabled"] = f.colorTertiary) : (X["--n-color"] = f.colorQuaternary, X["--n-color-hover"] = f.colorQuaternaryHover, X["--n-color-pressed"] = f.colorQuaternaryPressed, X["--n-color-focus"] = f.colorQuaternaryHover, X["--n-color-disabled"] = f.colorQuaternary), X["--n-ripple-color"] = "#0000", X["--n-text-color"] = ae, X["--n-text-color-hover"] = ae, X["--n-text-color-pressed"] = ae, X["--n-text-color-focus"] = ae, X["--n-text-color-disabled"] = ae;
} else
X = {
"--n-color": F || f[A("color", V)],
"--n-color-hover": F ? Fe(F) : f[A("colorHover", V)],
"--n-color-pressed": F ? go(F) : f[A("colorPressed", V)],
"--n-color-focus": F ? Fe(F) : f[A("colorFocus", V)],
"--n-color-disabled": F || f[A("colorDisabled", V)],
"--n-ripple-color": F || f[A("rippleColor", V)],
"--n-text-color": q || (F ? f.textColorPrimary : We ? f.textColorTertiary : f[A("textColor", V)]),
"--n-text-color-hover": q || (F ? f.textColorHoverPrimary : f[A("textColorHover", V)]),
"--n-text-color-pressed": q || (F ? f.textColorPressedPrimary : f[A("textColorPressed", V)]),
"--n-text-color-focus": q || (F ? f.textColorFocusPrimary : f[A("textColorFocus", V)]),
"--n-text-color-disabled": q || (F ? f.textColorDisabledPrimary : f[A("textColorDisabled", V)])
};
let to = {
"--n-border": "initial",
"--n-border-hover": "initial",
"--n-border-pressed": "initial",
"--n-border-focus": "initial",
"--n-border-disabled": "initial"
};
D ? to = {
"--n-border": "none",
"--n-border-hover": "none",
"--n-border-pressed": "none",
"--n-border-focus": "none",
"--n-border-disabled": "none"
} : to = {
"--n-border": f[A("border", V)],
"--n-border-hover": f[A("borderHover", V)],
"--n-border-pressed": f[A("borderPressed", V)],
"--n-border-focus": f[A("borderFocus", V)],
"--n-border-disabled": f[A("borderDisabled", V)]
};
const {
[A("height", N)]: no,
[A("fontSize", N)]: No,
[A("padding", N)]: Oe,
[A("paddingRound", N)]: Wo,
[A("iconSize", N)]: Vo,
[A("borderRadius", N)]: ro,
[A("iconMargin", N)]: Ko,
waveOpacity: Go
} = f, Xo = {
"--n-width": ne && !D ? no : "initial",
"--n-height": D ? "initial" : no,
"--n-font-size": No,
"--n-padding": ne || D ? "initial" : te ? Wo : Oe,
"--n-icon-size": Vo,
"--n-icon-margin": Ko,
"--n-border-radius": D ? "initial" : ne || te ? no : ro
};
return Object.assign(Object.assign(Object.assign(Object.assign({
"--n-bezier": S,
"--n-bezier-ease-out": C,
"--n-ripple-duration": B,
"--n-opacity-disabled": j,
"--n-wave-opacity": Go
}, eo), X), to), Xo);
}), E = p ? Pe("button", T(() => {
let z = "";
const {
dashed: S,
type: C,
ghost: f,
text: B,
color: j,
round: M,
circle: K,
textColor: N,
secondary: G,
tertiary: Y,
quaternary: O,
strong: D
} = e;
S && (z += "a"), f && (z += "b"), B && (z += "c"), M && (z += "d"), K && (z += "e"), G && (z += "f"), Y && (z += "g"), O && (z += "h"), D && (z += "i"), j && (z += `j${Mt(j)}`), N && (z += `k${Mt(N)}`);
const {
value: F
} = u;
return z += `l${F[0]}`, z += `m${C[0]}`, z;
}), $, e) : void 0;
return {
selfElRef: o,
waveElRef: t,
mergedClsPrefix: v,
mergedFocusable: i,
mergedSize: u,
showBorder: r,
enterPressed: n,
rtlEnabled: x,
handleMousedown: l,
handleKeydown: g,
handleBlur: b,
handleKeyup: c,
handleClick: s,
customColorCssVars: T(() => {
const {
color: z
} = e;
if (!z) return null;
const S = Fe(z);
return {
"--n-border-color": z,
"--n-border-color-hover": S,
"--n-border-color-pressed": go(z),
"--n-border-color-focus": S,
"--n-border-color-disabled": z
};
}),
cssVars: p ? void 0 : $,
themeClass: E == null ? void 0 : E.themeClass,
onRender: E == null ? void 0 : E.onRender
};
},
render() {
const {
mergedClsPrefix: e,
tag: o,
onRender: t
} = this;
t == null || t();
const n = ce(this.$slots.default, (r) => r && d("span", {
class: `${e}-button__content`
}, r));
return d(o, {
ref: "selfElRef",
class: [
this.themeClass,
`${e}-button`,
`${e}-button--${this.type}-type`,
`${e}-button--${this.mergedSize}-type`,
this.rtlEnabled && `${e}-button--rtl`,
this.disabled && `${e}-button--disabled`,
this.block && `${e}-button--block`,
this.enterPressed && `${e}-button--pressed`,
!this.text && this.dashed && `${e}-button--dashed`,
this.color && `${e}-button--color`,
this.secondary && `${e}-button--secondary`,
this.loading && `${e}-button--loading`,
this.ghost && `${e}-button--ghost`
// required for button group border collapse
],
tabindex: this.mergedFocusable ? 0 : -1,
type: this.attrType,
style: this.cssVars,
disabled: this.disabled,
onClick: this.handleClick,
onBlur: this.handleBlur,
onMousedown: this.handleMousedown,
onKeyup: this.handleKeyup,
onKeydown: this.handleKeydown
}, this.iconPlacement === "right" && n, d(sn, {
width: !0
}, {
default: () => ce(this.$slots.icon, (r) => (this.loading || this.renderIcon || r) && d("span", {
class: `${e}-button__icon`,
style: {
margin: nt(this.$slots.default) ? "0" : ""
}
}, d(dt, null, {
default: () => this.loading ? d(cn, {
clsPrefix: e,
key: "loading",
class: `${e}-icon-slot`,
strokeWidth: 20
}) : d("div", {
key: "icon",
class: `${e}-icon-slot`,
role: "none"
}, this.renderIcon ? this.renderIcon() : r)
})))
}), this.iconPlacement === "left" && n, this.text ? null : d(ai, {
ref: "waveElRef",
clsPrefix: e
}), this.showBorder ? d("div", {
"aria-hidden": !0,
class: `${e}-button__border`,
style: this.customColorCssVars
}) : null, this.showBorder ? d("div", {
"aria-hidden": !0,
class: `${e}-button__state-border`,
style: this.customColorCssVars
}) : null);
}
}), mi = {
paddingSmall: "12px 16px 12px",
paddingMedium: "19px 24px 20px",
paddingLarge: "23px 32px 24px",
paddingHuge: "27px 40px 28px",
titleFontSizeSmall: "16px",
titleFontSizeMedium: "18px",
titleFontSizeLarge: "18px",
titleFontSizeHuge: "18px",
closeIconSize: "18px",
closeSize: "22px"
};
function bi(e) {
const {
primaryColor: o,
borderRadius: t,
lineHeight: n,
fontSize: r,
cardColor: a,
textColor2: u,
textColor1: i,
dividerColor: l,
fontWeightStrong: s,
closeIconColor: c,
closeIconColorHover: g,
closeIconColorPressed: b,
closeColorHover: p,
closeColorPressed: v,
modalColor: h,
boxShadow1: y,
popoverColor: x,
actionColor: $
} = e;
return Object.assign(Object.assign({}, mi), {
lineHeight: n,
color: a,
colorModal: h,
colorPopover: x,
colorTarget: o,
colorEmbedded: $,
colorEmbeddedModal: $,
colorEmbeddedPopover: $,
textColor: u,
titleTextColor: i,
borderColor: l,
actionColor: $,
titleFontWeight: s,
closeColorHover: p,
closeColorPressed: v,
closeBorderRadius: t,
closeIconColor: c,
closeIconColorHover: g,
closeIconColorPressed: b,
fontSizeSmall: r,
fontSizeMedium: r,
fontSizeLarge: r,
fontSizeHuge: r,
boxShadow: y,
borderRadius: t
});
}
const gn = {
name: "Card",
common: xe,
self: bi
}, xi = m([k("card", `
font-size: var(--n-font-size);
line-height: var(--n-line-height);
display: flex;
flex-direction: column;
width: 100%;
box-sizing: border-box;
position: relative;
border-radius: var(--n-border-radius);
background-color: var(--n-color);
color: var(--n-text-color);
word-break: break-word;
transition:
color .3s var(--n-bezier),
background-color .3s var(--n-bezier),
box-shadow .3s var(--n-bezier),
border-color .3s var(--n-bezier);
`, [nn({
background: "var(--n-color-modal)"
}), P("hoverable", [m("&:hover", "box-shadow: var(--n-box-shadow);")]), P("content-segmented", [m(">", [R("content", {
paddingTop: "var(--n-padding-bottom)"
})])]), P("content-soft-segmented", [m(">", [R("content", `
margin: 0 var(--n-padding-left);
padding: var(--n-padding-bottom) 0;
`)])]), P("footer-segmented", [m(">", [R("footer", {
paddingTop: "var(--n-padding-bottom)"
})])]), P("footer-soft-segmented", [m(">", [R("footer", `
padding: var(--n-padding-bottom) 0;
margin: 0 var(--n-padding-left);
`)])]), m(">", [k("card-header", `
box-sizing: border-box;
display: flex;
align-items: center;
font-size: var(--n-title-font-size);
padding:
var(--n-padding-top)
var(--n-padding-left)
var(--n-padding-bottom)
var(--n-padding-left);
`, [R("main", `
font-weight: var(--n-title-font-weight);
transition: color .3s var(--n-bezier);
flex: 1;
min-width: 0;
color: var(--n-title-text-color);
`), R("extra", `
display: flex;
align-items: center;
font-size: var(--n-font-size);
font-weight: 400;
transition: color .3s var(--n-bezier);
color: var(--n-text-color);
`), R("close", `
margin: 0 0 0 8px;
transition:
background-color .3s var(--n-bezier),
color .3s var(--n-bezier);
`)]), R("action", `
box-sizing: border-box;
transition:
background-color .3s var(--n-bezier),
border-color .3s var(--n-bezier);
background-clip: padding-box;
background-color: var(--n-action-color);
`), R("content", "flex: 1; min-width: 0;"), R("content, footer", `
box-sizing: border-box;
padding: 0 var(--n-padding-left) var(--n-padding-bottom) var(--n-padding-left);
font-size: var(--n-font-size);
`, [m("&:first-child", {
paddingTop: "var(--n-padding-bottom)"
})]), R("action", `
background-color: var(--n-action-color);
padding: var(--n-padding-bottom) var(--n-padding-left);
border-bottom-left-radius: var(--n-border-radius);
border-bottom-right-radius: var(--n-border-radius);
`)]), k("card-cover", `
overflow: hidden;
width: 100%;
border-radius: var(--n-border-radius) var(--n-border-radius) 0 0;
`, [m("img", `
display: block;
width: 100%;
`)]), P("bordered", `
border: 1px solid var(--n-border-color);
`, [m("&:target", "border-color: var(--n-color-target);")]), P("action-segmented", [m(">", [R("action", [m("&:not(:first-child)", {
borderTop: "1px solid var(--n-border-color)"
})])])]), P("content-segmented, content-soft-segmented", [m(">", [R("content", {
transition: "border-color 0.3s var(--n-bezier)"
}, [m("&:not(:first-child)", {
borderTop: "1px solid var(--n-border-color)"
})])])]), P("footer-segmented, footer-soft-segmented", [m(">", [R("footer", {
transition: "border-color 0.3s var(--n-bezier)"
}, [m("&:not(:first-child)", {
borderTop: "1px solid var(--n-border-color)"
})])])]), P("embedded", `
background-color: var(--n-color-embedded);
`)]), tn(k("card", `
background: var(--n-color-modal);
`, [P("embedded", `
background-color: var(--n-color-embedded-modal);
`)])), xr(k("card", `
background: var(--n-color-popover);
`, [P("embedded", `
background-color: var(--n-color-embedded-popover);
`)]))]), mt = {
title: [String, Function],
contentClass: String,
contentStyle: [Object, String],
headerClass: String,
headerStyle: [Object, String],
headerExtraClass: String,
headerExtraStyle: [Object, String],
footerClass: String,
footerStyle: [Object, String],
embedded: Boolean,
segmented: {
type: [Boolean, Object],
default: !1
},
size: {
type: String,
default: "medium"
},
bordered: {
type: Boolean,
default: !0
},
closable: Boolean,
hoverable: Boolean,
role: String,
onClose: [Function, Array],
tag: {
type: String,
default: "div"
},
cover: Function,
content: [String, Function],
footer: Function,
action: Function,
headerExtra: Function
}, Ci = Lo(mt), yi = Object.assign(Object.assign({}, Q.props), mt), wi = W({
name: "Card",
props: yi,
setup(e) {
const o = () => {
const {
onClose: s
} = e;
s && me(s);
}, {
inlineThemeDisabled: t,
mergedClsPrefixRef: n,
mergedRtlRef: r
} = de(e), a = Q("Card", "-card", xi, gn, e, n), u = Je("Card", r, n), i = T(() => {
const {
size: s
} = e, {
self: {
color: c,
colorModal: g,
colorTarget: b,
textColor: p,
titleTextColor: v,
titleFontWeight: h,
borderColor: y,
actionColor: x,
borderRadius: $,
lineHeight: E,
closeIconColor: z,
closeIconColorHover: S,
closeIconColorPressed: C,
closeColorHover: f,
closeColorPressed: B,
closeBorderRadius: j,
closeIconSize: M,
closeSize: K,
boxShadow: N,
colorPopover: G,
colorEmbedded: Y,
colorEmbeddedModal: O,
colorEmbeddedPopover: D,
[A("padding", s)]: F,
[A("fontSize", s)]: te,
[A("titleFontSize", s)]: ne
},
common: {
cubicBezierEaseInOut: q
}
} = a.value, {
top: ve,
left: ge,
bottom: Ce
} = He(F);
return {
"--n-bezier": q,
"--n-border-radius": $,
"--n-color": c,
"--n-color-modal": g,
"--n-color-popover": G,
"--n-color-embedded": Y,
"--n-color-embedded-modal": O,
"--n-color-embedded-popover": D,
"--n-color-target": b,
"--n-text-color": p,
"--n-line-height": E,
"--n-action-color": x,
"--n-title-text-color": v,
"--n-title-font-weight": h,
"--n-close-icon-color": z,
"--n-close-icon-color-hover": S,
"--n-close-icon-color-pressed": C,
"--n-close-color-hover": f,
"--n-close-color-pressed": B,
"--n-border-color": y,
"--n-box-shadow": N,
// size
"--n-padding-top": ve,
"--n-padding-bottom": Ce,
"--n-padding-left": ge,
"--n-font-size": te,
"--n-title-font-size": ne,
"--n-close-size": K,
"--n-close-icon-size": M,
"--n-close-border-radius": j
};
}), l = t ? Pe("card", T(() => e.size[0]), i, e) : void 0;
return {
rtlEnabled: u,
mergedClsPrefix: n,
mergedTheme: a,
handleCloseClick: o,
cssVars: t ? void 0 : i,
themeClass: l == null ? void 0 : l.themeClass,
onRender: l == null ? void 0 : l.onRender
};
},
render() {
const {
segmented: e,
bordered: o,
hoverable: t,
mergedClsPrefix: n,
rtlEnabled: r,
onRender: a,
embedded: u,
tag: i,
$slots: l
} = this;
return a == null || a(), d(i, {
class: [`${n}-card`, this.themeClass, u && `${n}-card--embedded`, {
[`${n}-card--rtl`]: r,
[`${n}-card--content${typeof e != "boolean" && e.content === "soft" ? "-soft" : ""}-segmented`]: e === !0 || e !== !1 && e.content,
[`${n}-card--footer${typeof e != "boolean" && e.footer === "soft" ? "-soft" : ""}-segmented`]: e === !0 || e !== !1 && e.footer,
[`${n}-card--action-segmented`]: e === !0 || e !== !1 && e.action,
[`${n}-card--bordered`]: o,
[`${n}-card--hoverable`]: t
}],
style: this.cssVars,
role: this.role
}, ce(l.cover, (s) => {
const c = this.cover ? Se([this.cover()]) : s;
return c && d("div", {
class: `${n}-card-cover`,
role: "none"
}, c);
}), ce(l.header, (s) => {
const {
title: c
} = this, g = c ? Se(typeof c == "function" ? [c()] : [c]) : s;
return g || this.closable ? d("div", {
class: [`${n}-card-header`, this.headerClass],
style: this.headerStyle,
role: "heading"
}, d("div", {
class: `${n}-card-header__main`,
role: "heading"
}, g), ce(l["header-extra"], (b) => {
const p = this.headerExtra ? Se([this.headerExtra()]) : b;
return p && d("div", {
class: [`${n}-card-header__extra`, this.headerExtraClass],
style: this.headerExtraStyle
}, p);
}), this.closable && d(Ao, {
clsPrefix: n,
class: `${n}-card-header__close`,
onClick: this.handleCloseClick,
absolute: !0
})) : null;
}), ce(l.default, (s) => {
const {
content: c
} = this, g = c ? Se(typeof c == "function" ? [c()] : [c]) : s;
return g && d("div", {
class: [`${n}-card__content`, this.contentClass],
style: this.contentStyle,
role: "none"
}, g);
}), ce(l.footer, (s) => {
const c = this.footer ? Se([this.footer()]) : s;
return c && d("div", {
class: [`${n}-card__footer`, this.footerClass],
style: this.footerStyle,
role: "none"
}, c);
}), ce(l.action, (s) => {
const c = this.action ? Se([this.action()]) : s;
return c && d("div", {
class: `${n}-card__action`,
role: "none"
}, c);
}));
}
}), Si = {
abstract: Boolean,
bordered: {
type: Boolean,
default: void 0
},
clsPrefix: String,
locale: Object,
dateLocale: Object,
namespace: String,
rtl: Array,
tag: {
type: String,
default: "div"
},
hljs: Object,
katex: Object,
theme: Object,
themeOverrides: Object,
componentOptions: Object,
icons: Object,
breakpoints: Object,
preflightStyleDisabled: Boolean,
styleMountTarget: Object,
inlineThemeDisabled: {
type: Boolean,
default: void 0
},
// deprecated
as: {
type: String,
validator: () => (qe("config-provider", "`as` is deprecated, please use `tag` instead."), !0),
default: void 0
}
}, $i = W({
name: "ConfigProvider",
alias: ["App"],
props: Si,
setup(e) {
const o = U(Le, null), t = T(() => {
const {
theme: h
} = e;
if (h === null) return;
const y = o == null ? void 0 : o.mergedThemeRef.value;
return h === void 0 ? y : y === void 0 ? h : Object.assign({}, y, h);
}), n = T(() => {
const {
themeOverrides: h
} = e;
if (h !== null) {
if (h === void 0)
return o == null ? void 0 : o.mergedThemeOverridesRef.value;
{
const y = o == null ? void 0 : o.mergedThemeOverridesRef.value;
return y === void 0 ? h : ao({}, y, h);
}
}
}), r = Ye(() => {
const {
namespace: h
} = e;
return h === void 0 ? o == null ? void 0 : o.mergedNamespaceRef.value : h;
}), a = Ye(() => {
const {
bordered: h
} = e;
return h === void 0 ? o == null ? void 0 : o.mergedBorderedRef.value : h;
}), u = T(() => {
const {
icons: h
} = e;
return h === void 0 ? o == null ? void 0 : o.mergedIconsRef.value : h;
}), i = T(() => {
const {
componentOptions: h
} = e;
return h !== void 0 ? h : o == null ? void 0 : o.mergedComponentPropsRef.value;
}), l = T(() => {
const {
clsPrefix: h
} = e;
return h !== void 0 ? h : o ? o.mergedClsPrefixRef.value : rt;
}), s = T(() => {
var h;
const {
rtl: y
} = e;
if (y === void 0)
return o == null ? void 0 : o.mergedRtlRef.value;
const x = {};
for (const $ of y)
x[$.name] = zt($), (h = $.peers) === null || h === void 0 || h.forEach((E) => {
E.name in x || (x[E.name] = zt(E));
});
return x;
}), c = T(() => e.breakpoints || (o == null ? void 0 : o.mergedBreakpointsRef.value)), g = e.inlineThemeDisabled || (o == null ? void 0 : o.inlineThemeDisabled), b = e.preflightStyleDisabled || (o == null ? void 0 : o.preflightStyleDisabled), p = e.styleMountTarget || (o == null ? void 0 : o.styleMountTarget), v = T(() => {
const {
value: h
} = t, {
value: y
} = n, x = y && Object.keys(y).length !== 0, $ = h == null ? void 0 : h.name;
return $ ? x ? `${$}-${zo(JSON.stringify(n.value))}` : $ : x ? zo(JSON.stringify(n.value)) : "";
});
return oe(Le, {
mergedThemeHashRef: v,
mergedBreakpointsRef: c,
mergedRtlRef: s,
mergedIconsRef: u,
mergedComponentPropsRef: i,
mergedBorderedRef: a,
mergedNamespaceRef: r,
mergedClsPrefixRef: l,
mergedLocaleRef: T(() => {
const {
locale: h
} = e;
if (h !== null)
return h === void 0 ? o == null ? void 0 : o.mergedLocaleRef.value : h;
}),
mergedDateLocaleRef: T(() => {
const {
dateLocale: h
} = e;
if (h !== null)
return h === void 0 ? o == null ? void 0 : o.mergedDateLocaleRef.value : h;
}),
mergedHljsRef: T(() => {
const {
hljs: h
} = e;
return h === void 0 ? o == null ? void 0 : o.mergedHljsRef.value : h;
}),
mergedKatexRef: T(() => {
const {
katex: h
} = e;
return h === void 0 ? o == null ? void 0 : o.mergedKatexRef.value : h;
}),
mergedThemeRef: t,
mergedThemeOverridesRef: n,
inlineThemeDisabled: g || !1,
preflightStyleDisabled: b || !1,
styleMountTarget: p
}), {
mergedClsPrefix: l,
mergedBordered: a,
mergedNamespace: r,
mergedTheme: t,
mergedThemeOverrides: n
};
},
render() {
var e, o, t, n;
return this.abstract ? (n = (t = this.$slots).default) === null || n === void 0 ? void 0 : n.call(t) : d(this.as || this.tag, {
class: `${this.mergedClsPrefix || rt}-config-provider`
}, (o = (e = this.$slots).default) === null || o === void 0 ? void 0 : o.call(e));
}
}), zi = {
padding: "8px 14px"
};
function Pi(e) {
const {
borderRadius: o,
boxShadow2: t,
baseColor: n
} = e;
return Object.assign(Object.assign({}, zi), {
borderRadius: o,
boxShadow: t,
color: To(n, "rgba(0, 0, 0, .85)"),
textColor: n
});
}
const Ri = {
name: "Tooltip",
common: xe,
peers: {
Popover: un
},
self: Pi
}, ki = Object.assign(Object.assign({}, hn), Q.props), Ga = W({
name: "Tooltip",
props: ki,
__popover__: !0,
setup(e) {
const {
mergedClsPrefixRef: o
} = de(e), t = Q("Tooltip", "-tooltip", void 0, Ri, e, o), n = I(null);
return Object.assign(Object.assign({}, {
syncPosition() {
n.value.syncPosition();
},
setShow(a) {
n.value.setShow(a);
}
}), {
popoverRef: n,
mergedTheme: t,
popoverThemeOverrides: T(() => t.value.self)
});
},
render() {
const {
mergedTheme: e,
internalExtraClass: o
} = this;
return d(ni, Object.assign(Object.assign({}, this.$props), {
theme: e.peers.Popover,
themeOverrides: e.peerOverrides.Popover,
builtinThemeOverrides: this.popoverThemeOverrides,
internalExtraClass: o.concat("tooltip"),
ref: "popoverRef"
}), this.$slots);
}
});
function Bi(e) {
const {
textColorBase: o,
opacity1: t,
opacity2: n,
opacity3: r,
opacity4: a,
opacity5: u
} = e;
return {
color: o,
opacity1Depth: t,
opacity2Depth: n,
opacity3Depth: r,
opacity4Depth: a,
opacity5Depth: u
};
}
const Oi = {
name: "Icon",
common: xe,
self: Bi
}, Ti = k("icon", `
height: 1em;
width: 1em;
line-height: 1em;
text-align: center;
display: inline-block;
position: relative;
fill: currentColor;
transform: translateZ(0);
`, [P("color-transition", {
transition: "color .3s var(--n-bezier)"
}), P("depth", {
color: "var(--n-color)"
}, [m("svg", {
opacity: "var(--n-opacity)",
transition: "opacity .3s var(--n-bezier)"
})]), m("svg", {
height: "1em",
width: "1em"
})]), Ii = Object.assign(Object.assign({}, Q.props), {
depth: [String, Number],
size: [Number, String],
color: String,
component: [Object, Function]
}), Xa = W({
_n_icon__: !0,
name: "Icon",
inheritAttrs: !1,
props: Ii,
setup(e) {
const {
mergedClsPrefixRef: o,
inlineThemeDisabled: t
} = de(e), n = Q("Icon", "-icon", Ti, Oi, e, o), r = T(() => {
const {
depth: u
} = e, {
common: {
cubicBezierEaseInOut: i
},
self: l
} = n.value;
if (u !== void 0) {
const {
color: s,
[`opacity${u}Depth`]: c
} = l;
return {
"--n-bezier": i,
"--n-color": s,
"--n-opacity": c
};
}
return {
"--n-bezier": i,
"--n-color": "",
"--n-opacity": ""
};
}), a = t ? Pe("icon", T(() => `${e.depth || "d"}`), r, e) : void 0;
return {
mergedClsPrefix: o,
mergedStyle: T(() => {
const {
size: u,
color: i
} = e;
return {
fontSize: xo(u),
color: i
};
}),
cssVars: t ? void 0 : r,
themeClass: a == null ? void 0 : a.themeClass,
onRender: a == null ? void 0 : a.onRender
};
},
render() {
var e;
const {
$parent: o,
depth: t,
mergedClsPrefix: n,
component: r,
onRender: a,
themeClass: u
} = this;
return !((e = o == null ? void 0 : o.$options) === null || e === void 0) && e._n_icon__ && qe("icon", "don't wrap `n-icon` inside `n-icon`"), a == null || a(), d("i", Bo(this.$attrs, {
role: "img",
class: [`${n}-icon`, u, {
[`${n}-icon--depth`]: t,
[`${n}-icon--color-transition`]: t !== void 0
}],
style: [this.cssVars, this.mergedStyle]
}), r ? d(r) : this.$slots);
}
}), pn = "n-dialog-provider", mn = "n-dialog-api", Hi = "n-dialog-reactive-list";
function Ei() {
const e = U(mn, null);
return e === null && De("use-dialog", "No outer <n-dialog-provider /> founded."), e;
}
const Li = {
titleFontSize: "18px",
padding: "16px 28px 20px 28px",
iconSize: "28px",
actionSpace: "12px",
contentMargin: "8px 0 16px 0",
iconMargin: "0 4px 0 0",
iconMarginIconTop: "4px 0 8px 0",
closeSize: "22px",
closeIconSize: "18px",
closeMargin: "20px 26px 0 0",
closeMarginIconTop: "10px 16px 0 0"
};
function Mi(e) {
const {
textColor1: o,
textColor2: t,
modalColor: n,
closeIconColor: r,
closeIconColorHover: a,
closeIconColorPressed: u,
closeColorHover: i,
closeColorPressed: l,
infoColor: s,
successColor: c,
warningColor: g,
errorColor: b,
primaryColor: p,
dividerColor: v,
borderRadius: h,
fontWeightStrong: y,
lineHeight: x,
fontSize: $
} = e;
return Object.assign(Object.assign({}, Li), {
fontSize: $,
lineHeight: x,
border: `1px solid ${v}`,
titleTextColor: o,
textColor: t,
color: n,
closeColorHover: i,
closeColorPressed: l,
closeIconColor: r,
closeIconColorHover: a,
closeIconColorPressed: u,
closeBorderRadius: h,
iconColor: p,
iconColorInfo: s,
iconColorSuccess: c,
iconColorWarning: g,
iconColorError: b,
borderRadius: h,
titleFontWeight: y
});
}
const bn = {
name: "Dialog",
common: xe,
peers: {
Button: vn
},
self: Mi
}, _o = {
icon: Function,
type: {
type: String,
default: "default"
},
title: [String, Function],
closable: {
type: Boolean,
default: !0
},
negativeText: String,
positiveText: String,
positiveButtonProps: Object,
negativeButtonProps: Object,
content: [String, Function],
action: Function,
showIcon: {
type: Boolean,
default: !0
},
loading: Boolean,
bordered: Boolean,
iconPlacement: String,
titleClass: [String, Array],
titleStyle: [String, Object],
contentClass: [String, Array],
contentStyle: [String, Object],
actionClass: [String, Array],
actionStyle: [String, Object],
onPositiveClick: Function,
onNegativeClick: Function,
onClose: Function
}, xn = Lo(_o), ji = m([k("dialog", `
--n-icon-margin: var(--n-icon-margin-top) var(--n-icon-margin-right) var(--n-icon-margin-bottom) var(--n-icon-margin-left);
word-break: break-word;
line-height: var(--n-line-height);
position: relative;
background: var(--n-color);
color: var(--n-text-color);
box-sizing: border-box;
margin: auto;
border-radius: var(--n-border-radius);
padding: var(--n-padding);
transition:
border-color .3s var(--n-bezier),
background-color .3s var(--n-bezier),
color .3s var(--n-bezier);
`, [R("icon", {
color: "var(--n-icon-color)"
}), P("bordered", {
border: "var(--n-border)"
}), P("icon-top", [R("close", {
margin: "var(--n-close-margin)"
}), R("icon", {
margin: "var(--n-icon-margin)"
}), R("content", {
textAlign: "center"
}), R("title", {
justifyContent: "center"
}), R("action", {
justifyContent: "center"
})]), P("icon-left", [R("icon", {
margin: "var(--n-icon-margin)"
}), P("closable", [R("title", `
padding-right: calc(var(--n-close-size) + 6px);
`)])]), R("close", `
position: absolute;
right: 0;
top: 0;
margin: var(--n-close-margin);
transition:
background-color .3s var(--n-bezier),
color .3s var(--n-bezier);
z-index: 1;
`), R("content", `
font-size: var(--n-font-size);
margin: var(--n-content-margin);
position: relative;
word-break: break-word;
`, [P("last", "margin-bottom: 0;")]), R("action", `
display: flex;
justify-content: flex-end;
`, [m("> *:not(:last-child)", `
margin-right: var(--n-action-space);
`)]), R("icon", `
font-size: var(--n-icon-size);
transition: color .3s var(--n-bezier);
`), R("title", `
transition: color .3s var(--n-bezier);
display: flex;
align-items: center;
font-size: var(--n-title-font-size);
font-weight: var(--n-title-font-weight);
color: var(--n-title-text-color);
`), k("dialog-icon-container", `
display: flex;
justify-content: center;
`)]), tn(k("dialog", `
width: 446px;
max-width: calc(100vw - 32px);
`)), k("dialog", [nn(`
width: 446px;
max-width: calc(100vw - 32px);
`)])]), Fi = {
default: () => d(Po, null),
info: () => d(Po, null),
success: () => d(ft, null),
warning: () => d(ht, null),
error: () => d(ut, null)
}, Cn = W({
name: "Dialog",
alias: [
"NimbusConfirmCard",
// deprecated
"Confirm"
// deprecated
],
props: Object.assign(Object.assign({}, Q.props), _o),
setup(e) {
const {
mergedComponentPropsRef: o,
mergedClsPrefixRef: t,
inlineThemeDisabled: n,
mergedRtlRef: r
} = de(e), a = Je("Dialog", r, t), u = T(() => {
var p, v;
const {
iconPlacement: h
} = e;
return h || ((v = (p = o == null ? void 0 : o.value) === null || p === void 0 ? void 0 : p.Dialog) === null || v === void 0 ? void 0 : v.iconPlacement) || "left";
});
function i(p) {
const {
onPositiveClick: v
} = e;
v && v(p);
}
function l(p) {
const {
onNegativeClick: v
} = e;
v && v(p);
}
function s() {
const {
onClose: p
} = e;
p && p();
}
const c = Q("Dialog", "-dialog", ji, bn, e, t), g = T(() => {
const {
type: p
} = e, v = u.value, {
common: {
cubicBezierEaseInOut: h
},
self: {
fontSize: y,
lineHeight: x,
border: $,
titleTextColor: E,
textColor: z,
color: S,
closeBorderRadius: C,
closeColorHover: f,
closeColorPressed: B,
closeIconColor: j,
closeIconColorHover: M,
closeIconColorPressed: K,
closeIconSize: N,
borderRadius: G,
titleFontWeight: Y,
titleFontSize: O,
padding: D,
iconSize: F,
actionSpace: te,
contentMargin: ne,
closeSize: q,
[v === "top" ? "iconMarginIconTop" : "iconMargin"]: ve,
[v === "top" ? "closeMarginIconTop" : "closeMargin"]: ge,
[A("iconColor", p)]: Ce
}
} = c.value, ye = He(ve);
return {
"--n-font-size": y,
"--n-icon-color": Ce,
"--n-bezier": h,
"--n-close-margin": ge,
"--n-icon-margin-top": ye.top,
"--n-icon-margin-right": ye.right,
"--n-icon-margin-bottom": ye.bottom,
"--n-icon-margin-left": ye.left,
"--n-icon-size": F,
"--n-close-size": q,
"--n-close-icon-size": N,
"--n-close-border-radius": C,
"--n-close-color-hover": f,
"--n-close-color-pressed": B,
"--n-close-icon-color": j,
"--n-close-icon-color-hover": M,
"--n-close-icon-color-pressed": K,
"--n-color": S,
"--n-text-color": z,
"--n-border-radius": G,
"--n-padding": D,
"--n-line-height": x,
"--n-border": $,
"--n-content-margin": ne,
"--n-title-font-size": O,
"--n-title-font-weight": Y,
"--n-title-text-color": E,
"--n-action-space": te
};
}), b = n ? Pe("dialog", T(() => `${e.type[0]}${u.value[0]}`), g, e) : void 0;
return {
mergedClsPrefix: t,
rtlEnabled: a,
mergedIconPlacement: u,
mergedTheme: c,
handlePositiveClick: i,
handleNegativeClick: l,
handleCloseClick: s,
cssVars: n ? void 0 : g,
themeClass: b == null ? void 0 : b.themeClass,
onRender: b == null ? void 0 : b.onRender
};
},
render() {
var e;
const {
bordered: o,
mergedIconPlacement: t,
cssVars: n,
closable: r,
showIcon: a,
title: u,
content: i,
action: l,
negativeText: s,
positiveText: c,
positiveButtonProps: g,
negativeButtonProps: b,
handlePositiveClick: p,
handleNegativeClick: v,
mergedTheme: h,
loading: y,
type: x,
mergedClsPrefix: $
} = this;
(e = this.onRender) === null || e === void 0 || e.call(this);
const E = a ? d(Fo, {
clsPrefix: $,
class: `${$}-dialog__icon`
}, {
default: () => ce(this.$slots.icon, (S) => S || (this.icon ? ue(this.icon) : Fi[this.type]()))
}) : null, z = ce(this.$slots.action, (S) => S || c || s || l ? d("div", {
class: [`${$}-dialog__action`, this.actionClass],
style: this.actionStyle
}, S || (l ? [ue(l)] : [this.negativeText && d(Xt, Object.assign({
theme: h.peers.Button,
themeOverrides: h.peerOverrides.Button,
ghost: !0,
size: "small",
onClick: v
}, b), {
default: () => ue(this.negativeText)
}), this.positiveText && d(Xt, Object.assign({
theme: h.peers.Button,
themeOverrides: h.peerOverrides.Button,
size: "small",
type: x === "default" ? "primary" : x,
disabled: y,
loading: y,
onClick: p
}, g), {
default: () => ue(this.positiveText)
})])) : null);
return d("div", {
class: [`${$}-dialog`, this.themeClass, this.closable && `${$}-dialog--closable`, `${$}-dialog--icon-${t}`, o && `${$}-dialog--bordered`, this.rtlEnabled && `${$}-dialog--rtl`],
style: n,
role: "dialog"
}, r ? ce(this.$slots.close, (S) => {
const C = [`${$}-dialog__close`, this.rtlEnabled && `${$}-dialog--rtl`];
return S ? d("div", {
class: C
}, S) : d(Ao, {
clsPrefix: $,
class: C,
onClick: this.handleCloseClick
});
}) : null, a && t === "top" ? d("div", {
class: `${$}-dialog-icon-container`
}, E) : null, d("div", {
class: [`${$}-dialog__title`, this.titleClass],
style: this.titleStyle
}, a && t === "left" ? E : null, _t(this.$slots.header, () => [ue(u)])), d("div", {
class: [`${$}-dialog__content`, z ? "" : `${$}-dialog__content--last`, this.contentClass],
style: this.contentStyle
}, _t(this.$slots.default, () => [ue(i)])), z);
}
});
function Ai(e) {
const {
modalColor: o,
textColor2: t,
boxShadow3: n
} = e;
return {
color: o,
textColor: t,
boxShadow: n
};
}
const _i = {
name: "Modal",
common: xe,
peers: {
Scrollbar: gt,
Dialog: bn,
Card: gn
},
self: Ai
}, bt = Object.assign(Object.assign({}, mt), _o), Di = Lo(bt), Ni = W({
name: "ModalBody",
inheritAttrs: !1,
props: Object.assign(Object.assign({
show: {
type: Boolean,
required: !0
},
preset: String,
displayDirective: {
type: String,
required: !0
},
trapFocus: {
type: Boolean,
default: !0
},
autoFocus: {
type: Boolean,
default: !0
},
blockScroll: Boolean
}, bt), {
renderMask: Function,
// events
onClickoutside: Function,
onBeforeLeave: {
type: Function,
required: !0
},
onAfterLeave: {
type: Function,
required: !0
},
onPositiveClick: {
type: Function,
required: !0
},
onNegativeClick: {
type: Function,
required: !0
},
onClose: {
type: Function,
required: !0
},
onAfterEnter: Function,
onEsc: Function
}),
setup(e) {
const o = I(null), t = I(null), n = I(e.show), r = I(null), a = I(null);
Co(be(e, "show"), (y) => {
y && (n.value = !0);
}), $r(T(() => e.blockScroll && n.value));
const u = U(rn);
function i() {
if (u.transformOriginRef.value === "center")
return "";
const {
value: y
} = r, {
value: x
} = a;
if (y === null || x === null)
return "";
if (t.value) {
const $ = t.value.containerScrollTop;
return `${y}px ${x + $}px`;
}
return "";
}
function l(y) {
if (u.transformOriginRef.value === "center")
return;
const x = u.getMousePosition();
if (!x || !t.value) return;
const $ = t.value.containerScrollTop, {
offsetLeft: E,
offsetTop: z
} = y;
if (x) {
const S = x.y, C = x.x;
r.value = -(E - C), a.value = -(z - S - $);
}
y.style.transformOrigin = i();
}
function s(y) {
ze(() => {
l(y);
});
}
function c(y) {
y.style.transformOrigin = i(), e.onBeforeLeave();
}
function g() {
n.value = !1, r.value = null, a.value = null, e.onAfterLeave();
}
function b() {
const {
onClose: y
} = e;
y && y();
}
function p() {
e.onNegativeClick();
}
function v() {
e.onPositiveClick();
}
const h = I(null);
return Co(h, (y) => {
y && ze(() => {
const x = y.el;
x && o.value !== x && (o.value = x);
});
}), oe(lt, o), oe(at, null), oe(st, null), {
mergedTheme: u.mergedThemeRef,
appear: u.appearRef,
isMounted: u.isMountedRef,
mergedClsPrefix: u.mergedClsPrefixRef,
bodyRef: o,
scrollbarRef: t,
displayed: n,
childNodeRef: h,
handlePositiveClick: v,
handleNegativeClick: p,
handleCloseClick: b,
handleAfterLeave: g,
handleBeforeLeave: c,
handleEnter: s
};
},
render() {
const {
$slots: e,
$attrs: o,
handleEnter: t,
handleAfterLeave: n,
handleBeforeLeave: r,
preset: a,
mergedClsPrefix: u
} = this;
let i = null;
if (!a) {
if (i = tt(e), !i) {
qe("modal", "default slot is empty");
return;
}
i = qt(i), i.props = Bo({
class: `${u}-modal`
}, o, i.props || {});
}
return this.displayDirective === "show" || this.displayed || this.show ? Xe(d("div", {
role: "none",
class: `${u}-modal-body-wrapper`
}, d(pt, {
ref: "scrollbarRef",
theme: this.mergedTheme.peers.Scrollbar,
themeOverrides: this.mergedTheme.peerOverrides.Scrollbar,
contentClass: `${u}-modal-scroll-content`
}, {
default: () => {
var l;
return [(l = this.renderMask) === null || l === void 0 ? void 0 : l.call(this), d(Jt, {
disabled: !this.trapFocus,
active: this.show,
onEsc: this.onEsc,
autoFocus: this.autoFocus
}, {
default: () => {
var s;
return d(ke, {
name: "fade-in-scale-up-transition",
appear: (s = this.appear) !== null && s !== void 0 ? s : this.isMounted,
onEnter: t,
onAfterEnter: this.onAfterEnter,
onAfterLeave: n,
onBeforeLeave: r
}, {
default: () => {
const c = [[yo, this.show]], {
onClickoutside: g
} = this;
return g && c.push([et, this.onClickoutside, void 0, {
capture: !0
}]), Xe(this.preset === "confirm" || this.preset === "dialog" ? d(Cn, Object.assign({}, this.$attrs, {
class: [`${u}-modal`, this.$attrs.class],
ref: "bodyRef",
theme: this.mergedTheme.peers.Dialog,
themeOverrides: this.mergedTheme.peerOverrides.Dialog
}, Ze(this.$props, xn), {
"aria-modal": "true"
}), e) : this.preset === "card" ? d(wi, Object.assign({}, this.$attrs, {
ref: "bodyRef",
class: [`${u}-modal`, this.$attrs.class],
theme: this.mergedTheme.peers.Card,
themeOverrides: this.mergedTheme.peerOverrides.Card
}, Ze(this.$props, Ci), {
"aria-modal": "true",
role: "dialog"
}), e) : this.childNodeRef = i, c);
}
});
}
})];
}
})), [[yo, this.displayDirective === "if" || this.displayed || this.show]]) : null;
}
}), Wi = m([k("modal-container", `
position: fixed;
left: 0;
top: 0;
height: 0;
width: 0;
display: flex;
`), k("modal-mask", `
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: rgba(0, 0, 0, .4);
`, [vt({
enterDuration: ".25s",
leaveDuration: ".25s",
enterCubicBezier: "var(--n-bezier-ease-out)",
leaveCubicBezier: "var(--n-bezier-ease-out)"
})]), k("modal-body-wrapper", `
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
overflow: visible;
`, [k("modal-scroll-content", `
min-height: 100%;
display: flex;
position: relative;
`)]), k("modal", `
position: relative;
align-self: center;
color: var(--n-text-color);
margin: auto;
box-shadow: var(--n-box-shadow);
`, [Xr({
duration: ".25s",
enterScale: ".5"
})])]), yn = Object.assign(Object.assign(Object.assign(Object.assign({}, Q.props), {
show: Boolean,
unstableShowMask: {
type: Boolean,
default: !0
},
maskClosable: {
type: Boolean,
default: !0
},
preset: String,
to: [String, Object],
displayDirective: {
type: String,
default: "if"
},
transformOrigin: {
type: String,
default: "mouse"
},
zIndex: Number,
autoFocus: {
type: Boolean,
default: !0
},
trapFocus: {
type: Boolean,
default: !0
},
closeOnEsc: {
type: Boolean,
default: !0
},
blockScroll: {
type: Boolean,
default: !0
}
}), bt), {
// events
onEsc: Function,
"onUpdate:show": [Function, Array],
onUpdateShow: [Function, Array],
onAfterEnter: Function,
onBeforeLeave: Function,
onAfterLeave: Function,
onClose: Function,
onPositiveClick: Function,
onNegativeClick: Function,
onMaskClick: Function,
// private
internalDialog: Boolean,
internalModal: Boolean,
internalAppear: {
type: Boolean,
default: void 0
},
// deprecated
overlayStyle: [String, Object],
onBeforeHide: Function,
onAfterHide: Function,
onHide: Function
}), wn = W({
name: "Modal",
inheritAttrs: !1,
props: yn,
setup(e) {
process.env.NODE_ENV !== "production" && (e.onHide && $e("modal", "`on-hide` is deprecated."), e.onAfterHide && $e("modal", "`on-after-hide` is deprecated, please use `on-after-leave` instead."), e.onBeforeHide && $e("modal", "`on-before-hide` is deprecated, please use `on-before-leave` instead."), e.overlayStyle && $e("modal", "`overlay-style` is deprecated, please use `style` instead."));
const o = I(null), {
mergedClsPrefixRef: t,
namespaceRef: n,
inlineThemeDisabled: r
} = de(e), a = Q("Modal", "-modal", Wi, _i, e, t), u = So(64), i = $o(), l = Ho(), s = e.internalDialog ? U(pn, null) : null, c = e.internalModal ? U(wr, null) : null, g = Sr();
function b(C) {
const {
onUpdateShow: f,
"onUpdate:show": B,
onHide: j
} = e;
f && me(f, C), B && me(B, C), j && !C && j(C);
}
function p() {
const {
onClose: C
} = e;
C ? Promise.resolve(C()).then((f) => {
f !== !1 && b(!1);
}) : b(!1);
}
function v() {
const {
onPositiveClick: C
} = e;
C ? Promise.resolve(C()).then((f) => {
f !== !1 && b(!1);
}) : b(!1);
}
function h() {
const {
onNegativeClick: C
} = e;
C ? Promise.resolve(C()).then((f) => {
f !== !1 && b(!1);
}) : b(!1);
}
function y() {
const {
onBeforeLeave: C,
onBeforeHide: f
} = e;
C && me(C), f && f();
}
function x() {
const {
onAfterLeave: C,
onAfterHide: f
} = e;
C && me(C), f && f();
}
function $(C) {
var f;
const {
onMaskClick: B
} = e;
B && B(C), e.maskClosable && !((f = o.value) === null || f === void 0) && f.contains(wo(C)) && b(!1);
}
function E(C) {
var f;
(f = e.onEsc) === null || f === void 0 || f.call(e), e.show && e.closeOnEsc && Br(C) && (g.value || b(!1));
}
oe(rn, {
getMousePosition: () => {
const C = s || c;
if (C) {
const {
clickedRef: f,
clickedPositionRef: B
} = C;
if (f.value && B.value)
return B.value;
}
return u.value ? i.value : null;
},
mergedClsPrefixRef: t,
mergedThemeRef: a,
isMountedRef: l,
appearRef: be(e, "internalAppear"),
transformOriginRef: be(e, "transformOrigin")
});
const z = T(() => {
const {
common: {
cubicBezierEaseOut: C
},
self: {
boxShadow: f,
color: B,
textColor: j
}
} = a.value;
return {
"--n-bezier-ease-out": C,
"--n-box-shadow": f,
"--n-color": B,
"--n-text-color": j
};
}), S = r ? Pe("theme-class", void 0, z, e) : void 0;
return {
mergedClsPrefix: t,
namespace: n,
isMounted: l,
containerRef: o,
presetProps: T(() => Ze(e, Di)),
handleEsc: E,
handleAfterLeave: x,
handleClickoutside: $,
handleBeforeLeave: y,
doUpdateShow: b,
handleNegativeClick: h,
handlePositiveClick: v,
handleCloseClick: p,
cssVars: r ? void 0 : z,
themeClass: S == null ? void 0 : S.themeClass,
onRender: S == null ? void 0 : S.onRender
};
},
render() {
const {
mergedClsPrefix: e
} = this;
return d(fr, {
to: this.to,
show: this.show
}, {
default: () => {
var o;
(o = this.onRender) === null || o === void 0 || o.call(this);
const {
unstableShowMask: t
} = this;
return Xe(d("div", {
role: "none",
ref: "containerRef",
class: [`${e}-modal-container`, this.themeClass, this.namespace],
style: this.cssVars
}, d(Ni, Object.assign({
style: this.overlayStyle
}, this.$attrs, {
ref: "bodyWrapper",
displayDirective: this.displayDirective,
show: this.show,
preset: this.preset,
autoFocus: this.autoFocus,
trapFocus: this.trapFocus,
blockScroll: this.blockScroll
}, this.presetProps, {
onEsc: this.handleEsc,
onClose: this.handleCloseClick,
onNegativeClick: this.handleNegativeClick,
onPositiveClick: this.handlePositiveClick,
onBeforeLeave: this.handleBeforeLeave,
onAfterEnter: this.onAfterEnter,
onAfterLeave: this.handleAfterLeave,
onClickoutside: t ? void 0 : this.handleClickoutside,
renderMask: t ? () => {
var n;
return d(ke, {
name: "fade-in-transition",
key: "mask",
appear: (n = this.internalAppear) !== null && n !== void 0 ? n : this.isMounted
}, {
default: () => this.show ? d("div", {
"aria-hidden": !0,
ref: "containerRef",
class: `${e}-modal-mask`,
onClick: this.handleClickoutside
}) : null
});
} : void 0
}), this.$slots)), [[Zt, {
zIndex: this.zIndex,
enabled: this.show
}]]);
}
});
}
}), Vi = Object.assign(Object.assign({}, _o), {
onAfterEnter: Function,
onAfterLeave: Function,
transformOrigin: String,
blockScroll: {
type: Boolean,
default: !0
},
closeOnEsc: {
type: Boolean,
default: !0
},
onEsc: Function,
autoFocus: {
type: Boolean,
default: !0
},
internalStyle: [String, Object],
maskClosable: {
type: Boolean,
default: !0
},
onPositiveClick: Function,
onNegativeClick: Function,
onClose: Function,
onMaskClick: Function
}), Ki = W({
name: "DialogEnvironment",
props: Object.assign(Object.assign({}, Vi), {
internalKey: {
type: String,
required: !0
},
to: [String, Object],
// private
onInternalAfterLeave: {
type: Function,
required: !0
}
}),
setup(e) {
const o = I(!0);
function t() {
const {
onInternalAfterLeave: c,
internalKey: g,
onAfterLeave: b
} = e;
c && c(g), b && b();
}
function n(c) {
const {
onPositiveClick: g
} = e;
g ? Promise.resolve(g(c)).then((b) => {
b !== !1 && l();
}) : l();
}
function r(c) {
const {
onNegativeClick: g
} = e;
g ? Promise.resolve(g(c)).then((b) => {
b !== !1 && l();
}) : l();
}
function a() {
const {
onClose: c
} = e;
c ? Promise.resolve(c()).then((g) => {
g !== !1 && l();
}) : l();
}
function u(c) {
const {
onMaskClick: g,
maskClosable: b
} = e;
g && (g(c), b && l());
}
function i() {
const {
onEsc: c
} = e;
c && c();
}
function l() {
o.value = !1;
}
function s(c) {
o.value = c;
}
return {
show: o,
hide: l,
handleUpdateShow: s,
handleAfterLeave: t,
handleCloseClick: a,
handleNegativeClick: r,
handlePositiveClick: n,
handleMaskClick: u,
handleEsc: i
};
},
render() {
const {
handlePositiveClick: e,
handleUpdateShow: o,
handleNegativeClick: t,
handleCloseClick: n,
handleAfterLeave: r,
handleMaskClick: a,
handleEsc: u,
to: i,
maskClosable: l,
show: s
} = this;
return d(wn, {
show: s,
onUpdateShow: o,
onMaskClick: a,
onEsc: u,
to: i,
maskClosable: l,
onAfterEnter: this.onAfterEnter,
onAfterLeave: r,
closeOnEsc: this.closeOnEsc,
blockScroll: this.blockScroll,
autoFocus: this.autoFocus,
transformOrigin: this.transformOrigin,
internalAppear: !0,
internalDialog: !0
}, {
default: () => d(Cn, Object.assign({}, Ze(this.$props, xn), {
style: this.internalStyle,
onClose: n,
onNegativeClick: t,
onPositiveClick: e
}))
});
}
}), Gi = {
injectionKey: String,
to: [String, Object]
}, Xi = W({
name: "DialogProvider",
props: Gi,
setup() {
const e = I([]), o = {};
function t(i = {}) {
const l = Io(), s = Oo(Object.assign(Object.assign({}, i), {
key: l,
destroy: () => {
var c;
(c = o[`n-dialog-${l}`]) === null || c === void 0 || c.hide();
}
}));
return e.value.push(s), s;
}
const n = ["info", "success", "warning", "error"].map((i) => (l) => t(Object.assign(Object.assign({}, l), {
type: i
})));
function r(i) {
const {
value: l
} = e;
l.splice(l.findIndex((s) => s.key === i), 1);
}
function a() {
Object.values(o).forEach((i) => {
i == null || i.hide();
});
}
const u = {
create: t,
destroyAll: a,
info: n[0],
success: n[1],
warning: n[2],
error: n[3]
};
return oe(mn, u), oe(pn, {
clickedRef: So(64),
clickedPositionRef: $o()
}), oe(Hi, e), Object.assign(Object.assign({}, u), {
dialogList: e,
dialogInstRefs: o,
handleAfterLeave: r
});
},
render() {
var e, o;
return d(Be, null, [this.dialogList.map((t) => d(Ki, Mo(t, ["destroy", "style"], {
internalStyle: t.style,
to: this.to,
ref: (n) => {
n === null ? delete this.dialogInstRefs[`n-dialog-${t.key}`] : this.dialogInstRefs[`n-dialog-${t.key}`] = n;
},
internalKey: t.key,
onInternalAfterLeave: this.handleAfterLeave
}))), (o = (e = this.$slots).default) === null || o === void 0 ? void 0 : o.call(e)]);
}
}), Sn = "n-loading-bar", $n = "n-loading-bar-api";
function Yi(e) {
const {
primaryColor: o,
errorColor: t
} = e;
return {
colorError: t,
colorLoading: o,
height: "2px"
};
}
const Ui = {
name: "LoadingBar",
common: xe,
self: Yi
}, qi = k("loading-bar-container", `
z-index: 5999;
position: fixed;
top: 0;
left: 0;
right: 0;
height: 2px;
`, [vt({
enterDuration: "0.3s",
leaveDuration: "0.8s"
}), k("loading-bar", `
width: 100%;
transition:
max-width 4s linear,
background .2s linear;
height: var(--n-height);
`, [P("starting", `
background: var(--n-color-loading);
`), P("finishing", `
background: var(--n-color-loading);
transition:
max-width .2s linear,
background .2s linear;
`), P("error", `
background: var(--n-color-error);
transition:
max-width .2s linear,
background .2s linear;
`)])]);
var po = function(e, o, t, n) {
function r(a) {
return a instanceof t ? a : new t(function(u) {
u(a);
});
}
return new (t || (t = Promise))(function(a, u) {
function i(c) {
try {
s(n.next(c));
} catch (g) {
u(g);
}
}
function l(c) {
try {
s(n.throw(c));
} catch (g) {
u(g);
}
}
function s(c) {
c.done ? a(c.value) : r(c.value).then(i, l);
}
s((n = n.apply(e, o || [])).next());
});
};
function mo(e, o) {
return `${o}-loading-bar ${o}-loading-bar--${e}`;
}
const Zi = W({
name: "LoadingBar",
props: {
containerClass: String,
containerStyle: [String, Object]
},
setup() {
const {
inlineThemeDisabled: e
} = de(), {
props: o,
mergedClsPrefixRef: t
} = U(Sn), n = I(null), r = I(!1), a = I(!1), u = I(!1), i = I(!1);
let l = !1;
const s = I(!1), c = T(() => {
const {
loadingBarStyle: S
} = o;
return S ? S[s.value ? "error" : "loading"] : "";
});
function g() {
return po(this, void 0, void 0, function* () {
r.value = !1, u.value = !1, l = !1, s.value = !1, i.value = !0, yield ze(), i.value = !1;
});
}
function b() {
return po(this, arguments, void 0, function* (S = 0, C = 80, f = "starting") {
if (a.value = !0, yield g(), l) return;
u.value = !0, yield ze();
const B = n.value;
B && (B.style.maxWidth = `${S}%`, B.style.transition = "none", B.offsetWidth, B.className = mo(f, t.value), B.style.transition = "", B.style.maxWidth = `${C}%`);
});
}
function p() {
return po(this, void 0, void 0, function* () {
if (l || s.value) return;
a.value && (yield ze()), l = !0;
const S = n.value;
S && (S.className = mo("finishing", t.value), S.style.maxWidth = "100%", S.offsetWidth, u.value = !1);
});
}
function v() {
if (!(l || s.value))
if (!u.value)
b(100, 100, "error").then(() => {
s.value = !0;
const S = n.value;
S && (S.className = mo("error", t.value), S.offsetWidth, u.value = !1);
});
else {
s.value = !0;
const S = n.value;
if (!S) return;
S.className = mo("error", t.value), S.style.maxWidth = "100%", S.offsetWidth, u.value = !1;
}
}
function h() {
r.value = !0;
}
function y() {
r.value = !1;
}
function x() {
return po(this, void 0, void 0, function* () {
yield g();
});
}
const $ = Q("LoadingBar", "-loading-bar", qi, Ui, o, t), E = T(() => {
const {
self: {
height: S,
colorError: C,
colorLoading: f
}
} = $.value;
return {
"--n-height": S,
"--n-color-loading": f,
"--n-color-error": C
};
}), z = e ? Pe("loading-bar", void 0, E, o) : void 0;
return {
mergedClsPrefix: t,
loadingBarRef: n,
started: a,
loading: u,
entering: r,
transitionDisabled: i,
start: b,
error: v,
finish: p,
handleEnter: h,
handleAfterEnter: y,
handleAfterLeave: x,
mergedLoadingBarStyle: c,
cssVars: e ? void 0 : E,
themeClass: z == null ? void 0 : z.themeClass,
onRender: z == null ? void 0 : z.onRender
};
},
render() {
if (!this.started) return null;
const {
mergedClsPrefix: e
} = this;
return d(ke, {
name: "fade-in-transition",
appear: !0,
onEnter: this.handleEnter,
onAfterEnter: this.handleAfterEnter,
onAfterLeave: this.handleAfterLeave,
css: !this.transitionDisabled
}, {
default: () => {
var o;
return (o = this.onRender) === null || o === void 0 || o.call(this), Xe(d("div", {
class: [`${e}-loading-bar-container`, this.themeClass, this.containerClass],
style: this.containerStyle
}, d("div", {
ref: "loadingBarRef",
class: [`${e}-loading-bar`],
style: [this.cssVars, this.mergedLoadingBarStyle]
})), [[yo, this.loading || !this.loading && this.entering]]);
}
});
}
}), Qi = Object.assign(Object.assign({}, Q.props), {
to: {
type: [String, Object, Boolean],
default: void 0
},
containerClass: String,
containerStyle: [String, Object],
loadingBarStyle: {
type: Object
}
}), Ji = W({
name: "LoadingBarProvider",
props: Qi,
setup(e) {
const o = Ho(), t = I(null), n = {
start() {
var a;
o.value ? (a = t.value) === null || a === void 0 || a.start() : ze(() => {
var u;
(u = t.value) === null || u === void 0 || u.start();
});
},
error() {
var a;
o.value ? (a = t.value) === null || a === void 0 || a.error() : ze(() => {
var u;
(u = t.value) === null || u === void 0 || u.error();
});
},
finish() {
var a;
o.value ? (a = t.value) === null || a === void 0 || a.finish() : ze(() => {
var u;
(u = t.value) === null || u === void 0 || u.finish();
});
}
}, {
mergedClsPrefixRef: r
} = de(e);
return oe($n, n), oe(Sn, {
props: e,
mergedClsPrefixRef: r
}), Object.assign(n, {
loadingBarRef: t
});
},
render() {
var e, o;
return d(Be, null, d(it, {
disabled: this.to === !1,
to: this.to || "body"
}, d(Zi, {
ref: "loadingBarRef",
containerStyle: this.containerStyle,
containerClass: this.containerClass
})), (o = (e = this.$slots).default) === null || o === void 0 ? void 0 : o.call(e));
}
});
function ea() {
const e = U($n, null);
return e === null && De("use-loading-bar", "No outer <n-loading-bar-provider /> founded."), e;
}
const zn = "n-message-api", Pn = "n-message-provider", oa = {
margin: "0 0 8px 0",
padding: "10px 20px",
maxWidth: "720px",
minWidth: "420px",
iconMargin: "0 10px 0 0",
closeMargin: "0 0 0 10px",
closeSize: "20px",
closeIconSize: "16px",
iconSize: "20px",
fontSize: "14px"
};
function ta(e) {
const {
textColor2: o,
closeIconColor: t,
closeIconColorHover: n,
closeIconColorPressed: r,
infoColor: a,
successColor: u,
errorColor: i,
warningColor: l,
popoverColor: s,
boxShadow2: c,
primaryColor: g,
lineHeight: b,
borderRadius: p,
closeColorHover: v,
closeColorPressed: h
} = e;
return Object.assign(Object.assign({}, oa), {
closeBorderRadius: p,
textColor: o,
textColorInfo: o,
textColorSuccess: o,
textColorError: o,
textColorWarning: o,
textColorLoading: o,
color: s,
colorInfo: s,
colorSuccess: s,
colorError: s,
colorWarning: s,
colorLoading: s,
boxShadow: c,
boxShadowInfo: c,
boxShadowSuccess: c,
boxShadowError: c,
boxShadowWarning: c,
boxShadowLoading: c,
iconColor: o,
iconColorInfo: a,
iconColorSuccess: u,
iconColorWarning: l,
iconColorError: i,
iconColorLoading: g,
closeColorHover: v,
closeColorPressed: h,
closeIconColor: t,
closeIconColorHover: n,
closeIconColorPressed: r,
closeColorHoverInfo: v,
closeColorPressedInfo: h,
closeIconColorInfo: t,
closeIconColorHoverInfo: n,
closeIconColorPressedInfo: r,
closeColorHoverSuccess: v,
closeColorPressedSuccess: h,
closeIconColorSuccess: t,
closeIconColorHoverSuccess: n,
closeIconColorPressedSuccess: r,
closeColorHoverError: v,
closeColorPressedError: h,
closeIconColorError: t,
closeIconColorHoverError: n,
closeIconColorPressedError: r,
closeColorHoverWarning: v,
closeColorPressedWarning: h,
closeIconColorWarning: t,
closeIconColorHoverWarning: n,
closeIconColorPressedWarning: r,
closeColorHoverLoading: v,
closeColorPressedLoading: h,
closeIconColorLoading: t,
closeIconColorHoverLoading: n,
closeIconColorPressedLoading: r,
loadingColor: g,
lineHeight: b,
borderRadius: p
});
}
const na = {
name: "Message",
common: xe,
self: ta
}, Rn = {
icon: Function,
type: {
type: String,
default: "info"
},
content: [String, Number, Function],
showIcon: {
type: Boolean,
default: !0
},
closable: Boolean,
keepAliveOnHover: Boolean,
onClose: Function,
onMouseenter: Function,
onMouseleave: Function
}, ra = m([k("message-wrapper", `
margin: var(--n-margin);
z-index: 0;
transform-origin: top center;
display: flex;
`, [ci({
overflow: "visible",
originalTransition: "transform .3s var(--n-bezier)",
enterToProps: {
transform: "scale(1)"
},
leaveToProps: {
transform: "scale(0.85)"
}
})]), k("message", `
box-sizing: border-box;
display: flex;
align-items: center;
transition:
color .3s var(--n-bezier),
box-shadow .3s var(--n-bezier),
background-color .3s var(--n-bezier),
opacity .3s var(--n-bezier),
transform .3s var(--n-bezier),
margin-bottom .3s var(--n-bezier);
padding: var(--n-padding);
border-radius: var(--n-border-radius);
flex-wrap: nowrap;
overflow: hidden;
max-width: var(--n-max-width);
color: var(--n-text-color);
background-color: var(--n-color);
box-shadow: var(--n-box-shadow);
`, [R("content", `
display: inline-block;
line-height: var(--n-line-height);
font-size: var(--n-font-size);
`), R("icon", `
position: relative;
margin: var(--n-icon-margin);
height: var(--n-icon-size);
width: var(--n-icon-size);
font-size: var(--n-icon-size);
flex-shrink: 0;
`, [["default", "info", "success", "warning", "error", "loading"].map((e) => P(`${e}-type`, [m("> *", `
color: var(--n-icon-color-${e});
transition: color .3s var(--n-bezier);
`)])), m("> *", `
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
`, [Ro()])]), R("close", `
margin: var(--n-close-margin);
transition:
background-color .3s var(--n-bezier),
color .3s var(--n-bezier);
flex-shrink: 0;
`, [m("&:hover", `
color: var(--n-close-icon-color-hover);
`), m("&:active", `
color: var(--n-close-icon-color-pressed);
`)])]), k("message-container", `
z-index: 6000;
position: fixed;
height: 0;
overflow: visible;
display: flex;
flex-direction: column;
align-items: center;
`, [P("top", `
top: 12px;
left: 0;
right: 0;
`), P("top-left", `
top: 12px;
left: 12px;
right: 0;
align-items: flex-start;
`), P("top-right", `
top: 12px;
left: 0;
right: 12px;
align-items: flex-end;
`), P("bottom", `
bottom: 4px;
left: 0;
right: 0;
justify-content: flex-end;
`), P("bottom-left", `
bottom: 4px;
left: 12px;
right: 0;
justify-content: flex-end;
align-items: flex-start;
`), P("bottom-right", `
bottom: 4px;
left: 0;
right: 12px;
justify-content: flex-end;
align-items: flex-end;
`)])]), ia = {
info: () => d(Po, null),
success: () => d(ft, null),
warning: () => d(ht, null),
error: () => d(ut, null),
default: () => null
}, aa = W({
name: "Message",
props: Object.assign(Object.assign({}, Rn), {
render: Function
}),
setup(e) {
const {
inlineThemeDisabled: o,
mergedRtlRef: t
} = de(e), {
props: n,
mergedClsPrefixRef: r
} = U(Pn), a = Je("Message", t, r), u = Q("Message", "-message", ra, na, n, r), i = T(() => {
const {
type: s
} = e, {
common: {
cubicBezierEaseInOut: c
},
self: {
padding: g,
margin: b,
maxWidth: p,
iconMargin: v,
closeMargin: h,
closeSize: y,
iconSize: x,
fontSize: $,
lineHeight: E,
borderRadius: z,
iconColorInfo: S,
iconColorSuccess: C,
iconColorWarning: f,
iconColorError: B,
iconColorLoading: j,
closeIconSize: M,
closeBorderRadius: K,
[A("textColor", s)]: N,
[A("boxShadow", s)]: G,
[A("color", s)]: Y,
[A("closeColorHover", s)]: O,
[A("closeColorPressed", s)]: D,
[A("closeIconColor", s)]: F,
[A("closeIconColorPressed", s)]: te,
[A("closeIconColorHover", s)]: ne
}
} = u.value;
return {
"--n-bezier": c,
"--n-margin": b,
"--n-padding": g,
"--n-max-width": p,
"--n-font-size": $,
"--n-icon-margin": v,
"--n-icon-size": x,
"--n-close-icon-size": M,
"--n-close-border-radius": K,
"--n-close-size": y,
"--n-close-margin": h,
"--n-text-color": N,
"--n-color": Y,
"--n-box-shadow": G,
"--n-icon-color-info": S,
"--n-icon-color-success": C,
"--n-icon-color-warning": f,
"--n-icon-color-error": B,
"--n-icon-color-loading": j,
"--n-close-color-hover": O,
"--n-close-color-pressed": D,
"--n-close-icon-color": F,
"--n-close-icon-color-pressed": te,
"--n-close-icon-color-hover": ne,
"--n-line-height": E,
"--n-border-radius": z
};
}), l = o ? Pe("message", T(() => e.type[0]), i, {}) : void 0;
return {
mergedClsPrefix: r,
rtlEnabled: a,
messageProviderProps: n,
handleClose() {
var s;
(s = e.onClose) === null || s === void 0 || s.call(e);
},
cssVars: o ? void 0 : i,
themeClass: l == null ? void 0 : l.themeClass,
onRender: l == null ? void 0 : l.onRender,
placement: n.placement
};
},
render() {
const {
render: e,
type: o,
closable: t,
content: n,
mergedClsPrefix: r,
cssVars: a,
themeClass: u,
onRender: i,
icon: l,
handleClose: s,
showIcon: c
} = this;
i == null || i();
let g;
return d("div", {
class: [`${r}-message-wrapper`, u],
onMouseenter: this.onMouseenter,
onMouseleave: this.onMouseleave,
style: [{
alignItems: this.placement.startsWith("top") ? "flex-start" : "flex-end"
}, a]
}, e ? e(this.$props) : d("div", {
class: [`${r}-message ${r}-message--${o}-type`, this.rtlEnabled && `${r}-message--rtl`]
}, (g = la(l, o, r)) && c ? d("div", {
class: `${r}-message__icon ${r}-message__icon--${o}-type`
}, d(dt, null, {
default: () => g
})) : null, d("div", {
class: `${r}-message__content`
}, ue(n)), t ? d(Ao, {
clsPrefix: r,
class: `${r}-message__close`,
onClick: s,
absolute: !0
}) : null));
}
});
function la(e, o, t) {
if (typeof e == "function")
return e();
{
const n = o === "loading" ? d(cn, {
clsPrefix: t,
strokeWidth: 24,
scale: 0.85
}) : ia[o]();
return n ? d(Fo, {
clsPrefix: t,
key: o
}, {
default: () => n
}) : null;
}
}
const sa = W({
name: "MessageEnvironment",
props: Object.assign(Object.assign({}, Rn), {
duration: {
type: Number,
default: 3e3
},
onAfterLeave: Function,
onLeave: Function,
internalKey: {
type: String,
required: !0
},
// private
onInternalAfterLeave: Function,
// deprecated
onHide: Function,
onAfterHide: Function
}),
setup(e) {
let o = null;
const t = I(!0);
uo(() => {
n();
});
function n() {
const {
duration: c
} = e;
c && (o = window.setTimeout(u, c));
}
function r(c) {
c.currentTarget === c.target && o !== null && (window.clearTimeout(o), o = null);
}
function a(c) {
c.currentTarget === c.target && n();
}
function u() {
const {
onHide: c
} = e;
t.value = !1, o && (window.clearTimeout(o), o = null), c && c();
}
function i() {
const {
onClose: c
} = e;
c && c(), u();
}
function l() {
const {
onAfterLeave: c,
onInternalAfterLeave: g,
onAfterHide: b,
internalKey: p
} = e;
c && c(), g && g(p), b && b();
}
function s() {
u();
}
return {
show: t,
hide: u,
handleClose: i,
handleAfterLeave: l,
handleMouseleave: a,
handleMouseenter: r,
deactivate: s
};
},
render() {
return d(sn, {
appear: !0,
onAfterLeave: this.handleAfterLeave,
onLeave: this.onLeave
}, {
default: () => [this.show ? d(aa, {
content: this.content,
type: this.type,
icon: this.icon,
showIcon: this.showIcon,
closable: this.closable,
onClose: this.handleClose,
onMouseenter: this.keepAliveOnHover ? this.handleMouseenter : void 0,
onMouseleave: this.keepAliveOnHover ? this.handleMouseleave : void 0
}) : null]
});
}
}), ca = Object.assign(Object.assign({}, Q.props), {
to: [String, Object],
duration: {
type: Number,
default: 3e3
},
keepAliveOnHover: Boolean,
max: Number,
placement: {
type: String,
default: "top"
},
closable: Boolean,
containerClass: String,
containerStyle: [String, Object]
}), da = W({
name: "MessageProvider",
props: ca,
setup(e) {
const {
mergedClsPrefixRef: o
} = de(e), t = I([]), n = I({}), r = {
create(l, s) {
return a(l, Object.assign({
type: "default"
}, s));
},
info(l, s) {
return a(l, Object.assign(Object.assign({}, s), {
type: "info"
}));
},
success(l, s) {
return a(l, Object.assign(Object.assign({}, s), {
type: "success"
}));
},
warning(l, s) {
return a(l, Object.assign(Object.assign({}, s), {
type: "warning"
}));
},
error(l, s) {
return a(l, Object.assign(Object.assign({}, s), {
type: "error"
}));
},
loading(l, s) {
return a(l, Object.assign(Object.assign({}, s), {
type: "loading"
}));
},
destroyAll: i
};
oe(Pn, {
props: e,
mergedClsPrefixRef: o
}), oe(zn, r);
function a(l, s) {
const c = Io(), g = Oo(Object.assign(Object.assign({}, s), {
content: l,
key: c,
destroy: () => {
var p;
(p = n.value[c]) === null || p === void 0 || p.hide();
}
})), {
max: b
} = e;
return b && t.value.length >= b && t.value.shift(), t.value.push(g), g;
}
function u(l) {
t.value.splice(t.value.findIndex((s) => s.key === l), 1), delete n.value[l];
}
function i() {
Object.values(n.value).forEach((l) => {
l.hide();
});
}
return Object.assign({
mergedClsPrefix: o,
messageRefs: n,
messageList: t,
handleAfterLeave: u
}, r);
},
render() {
var e, o, t;
return d(Be, null, (o = (e = this.$slots).default) === null || o === void 0 ? void 0 : o.call(e), this.messageList.length ? d(it, {
to: (t = this.to) !== null && t !== void 0 ? t : "body"
}, d("div", {
class: [`${this.mergedClsPrefix}-message-container`, `${this.mergedClsPrefix}-message-container--${this.placement}`, this.containerClass],
key: "message-container",
style: this.containerStyle
}, this.messageList.map((n) => d(sa, Object.assign({
ref: (r) => {
r && (this.messageRefs[n.key] = r);
},
internalKey: n.key,
onInternalAfterLeave: this.handleAfterLeave
}, Mo(n, ["destroy"], void 0), {
duration: n.duration === void 0 ? this.duration : n.duration,
keepAliveOnHover: n.keepAliveOnHover === void 0 ? this.keepAliveOnHover : n.keepAliveOnHover,
closable: n.closable === void 0 ? this.closable : n.closable
}))))) : null);
}
});
function ua() {
const e = U(zn, null);
return e === null && De("use-message", "No outer <n-message-provider /> founded. See prerequisite in https://www.naiveui.com/en-US/os-theme/components/message for more details. If you want to use `useMessage` outside setup, please check https://www.naiveui.com/zh-CN/os-theme/components/message#Q-&-A."), e;
}
const Yt = "n-modal-provider", kn = "n-modal-api", fa = "n-modal-reactive-list", ha = W({
name: "ModalEnvironment",
props: Object.assign(Object.assign({}, yn), {
internalKey: {
type: String,
required: !0
},
// private
onInternalAfterLeave: {
type: Function,
required: !0
}
}),
setup(e) {
const o = I(!0);
function t() {
const {
onInternalAfterLeave: c,
internalKey: g,
onAfterLeave: b
} = e;
c && c(g), b && b();
}
function n() {
const {
onPositiveClick: c
} = e;
c ? Promise.resolve(c()).then((g) => {
g !== !1 && l();
}) : l();
}
function r() {
const {
onNegativeClick: c
} = e;
c ? Promise.resolve(c()).then((g) => {
g !== !1 && l();
}) : l();
}
function a() {
const {
onClose: c
} = e;
c ? Promise.resolve(c()).then((g) => {
g !== !1 && l();
}) : l();
}
function u(c) {
const {
onMaskClick: g,
maskClosable: b
} = e;
g && (g(c), b && l());
}
function i() {
const {
onEsc: c
} = e;
c && c();
}
function l() {
o.value = !1;
}
function s(c) {
o.value = c;
}
return {
show: o,
hide: l,
handleUpdateShow: s,
handleAfterLeave: t,
handleCloseClick: a,
handleNegativeClick: r,
handlePositiveClick: n,
handleMaskClick: u,
handleEsc: i
};
},
render() {
const {
handleUpdateShow: e,
handleAfterLeave: o,
handleMaskClick: t,
handleEsc: n,
show: r
} = this;
return d(wn, Object.assign({}, this.$props, {
show: r,
onUpdateShow: e,
onMaskClick: t,
onEsc: n,
onAfterLeave: o,
internalAppear: !0,
internalModal: !0
}));
}
}), va = {
to: [String, Object]
}, ga = W({
name: "ModalProvider",
props: va,
setup() {
const e = So(64), o = $o(), t = I([]), n = {};
function r(l = {}) {
const s = Io(), c = Oo(Object.assign(Object.assign({}, l), {
key: s,
destroy: () => {
var g;
(g = n[`n-modal-${s}`]) === null || g === void 0 || g.hide();
}
}));
return t.value.push(c), c;
}
function a(l) {
const {
value: s
} = t;
s.splice(s.findIndex((c) => c.key === l), 1);
}
function u() {
Object.values(n).forEach((l) => {
l == null || l.hide();
});
}
const i = {
create: r,
destroyAll: u
};
return oe(kn, i), oe(Yt, {
clickedRef: So(64),
clickedPositionRef: $o()
}), oe(fa, t), oe(Yt, {
clickedRef: e,
clickedPositionRef: o
}), Object.assign(Object.assign({}, i), {
modalList: t,
modalInstRefs: n,
handleAfterLeave: a
});
},
render() {
var e, o;
return d(Be, null, [this.modalList.map((t) => {
var n;
return d(ha, Mo(t, ["destroy"], {
to: (n = t.to) !== null && n !== void 0 ? n : this.to,
ref: (r) => {
r === null ? delete this.modalInstRefs[`n-modal-${t.key}`] : this.modalInstRefs[`n-modal-${t.key}`] = r;
},
internalKey: t.key,
onInternalAfterLeave: this.handleAfterLeave
}));
}), (o = (e = this.$slots).default) === null || o === void 0 ? void 0 : o.call(e)]);
}
}), pa = {
closeMargin: "16px 12px",
closeSize: "20px",
closeIconSize: "16px",
width: "365px",
padding: "16px",
titleFontSize: "16px",
metaFontSize: "12px",
descriptionFontSize: "12px"
};
function ma(e) {
const {
textColor2: o,
successColor: t,
infoColor: n,
warningColor: r,
errorColor: a,
popoverColor: u,
closeIconColor: i,
closeIconColorHover: l,
closeIconColorPressed: s,
closeColorHover: c,
closeColorPressed: g,
textColor1: b,
textColor3: p,
borderRadius: v,
fontWeightStrong: h,
boxShadow2: y,
lineHeight: x,
fontSize: $
} = e;
return Object.assign(Object.assign({}, pa), {
borderRadius: v,
lineHeight: x,
fontSize: $,
headerFontWeight: h,
iconColor: o,
iconColorSuccess: t,
iconColorInfo: n,
iconColorWarning: r,
iconColorError: a,
color: u,
textColor: o,
closeIconColor: i,
closeIconColorHover: l,
closeIconColorPressed: s,
closeBorderRadius: v,
closeColorHover: c,
closeColorPressed: g,
headerTextColor: b,
descriptionTextColor: p,
actionTextColor: o,
boxShadow: y
});
}
const ba = {
name: "Notification",
common: xe,
peers: {
Scrollbar: gt
},
self: ma
}, Do = "n-notification-provider", xa = W({
name: "NotificationContainer",
props: {
scrollable: {
type: Boolean,
required: !0
},
placement: {
type: String,
required: !0
}
},
setup() {
const {
mergedThemeRef: e,
mergedClsPrefixRef: o,
wipTransitionCountRef: t
} = U(Do), n = I(null);
return Ee(() => {
var r, a;
t.value > 0 ? (r = n == null ? void 0 : n.value) === null || r === void 0 || r.classList.add("transitioning") : (a = n == null ? void 0 : n.value) === null || a === void 0 || a.classList.remove("transitioning");
}), {
selfRef: n,
mergedTheme: e,
mergedClsPrefix: o,
transitioning: t
};
},
render() {
const {
$slots: e,
scrollable: o,
mergedClsPrefix: t,
mergedTheme: n,
placement: r
} = this;
return d("div", {
ref: "selfRef",
class: [`${t}-notification-container`, o && `${t}-notification-container--scrollable`, `${t}-notification-container--${r}`]
}, o ? d(pt, {
theme: n.peers.Scrollbar,
themeOverrides: n.peerOverrides.Scrollbar,
contentStyle: {
overflow: "hidden"
}
}, e) : e);
}
}), Ca = {
info: () => d(Po, null),
success: () => d(ft, null),
warning: () => d(ht, null),
error: () => d(ut, null),
default: () => null
}, xt = {
closable: {
type: Boolean,
default: !0
},
type: {
type: String,
default: "default"
},
avatar: Function,
title: [String, Function],
description: [String, Function],
content: [String, Function],
meta: [String, Function],
action: [String, Function],
onClose: {
type: Function,
required: !0
},
keepAliveOnHover: Boolean,
onMouseenter: Function,
onMouseleave: Function
}, ya = Lo(xt), wa = W({
name: "Notification",
props: xt,
setup(e) {
const {
mergedClsPrefixRef: o,
mergedThemeRef: t,
props: n
} = U(Do), {
inlineThemeDisabled: r,
mergedRtlRef: a
} = de(), u = Je("Notification", a, o), i = T(() => {
const {
type: s
} = e, {
self: {
color: c,
textColor: g,
closeIconColor: b,
closeIconColorHover: p,
closeIconColorPressed: v,
headerTextColor: h,
descriptionTextColor: y,
actionTextColor: x,
borderRadius: $,
headerFontWeight: E,
boxShadow: z,
lineHeight: S,
fontSize: C,
closeMargin: f,
closeSize: B,
width: j,
padding: M,
closeIconSize: K,
closeBorderRadius: N,
closeColorHover: G,
closeColorPressed: Y,
titleFontSize: O,
metaFontSize: D,
descriptionFontSize: F,
[A("iconColor", s)]: te
},
common: {
cubicBezierEaseOut: ne,
cubicBezierEaseIn: q,
cubicBezierEaseInOut: ve
}
} = t.value, {
left: ge,
right: Ce,
top: ye,
bottom: eo
} = He(M);
return {
"--n-color": c,
"--n-font-size": C,
"--n-text-color": g,
"--n-description-text-color": y,
"--n-action-text-color": x,
"--n-title-text-color": h,
"--n-title-font-weight": E,
"--n-bezier": ve,
"--n-bezier-ease-out": ne,
"--n-bezier-ease-in": q,
"--n-border-radius": $,
"--n-box-shadow": z,
"--n-close-border-radius": N,
"--n-close-color-hover": G,
"--n-close-color-pressed": Y,
"--n-close-icon-color": b,
"--n-close-icon-color-hover": p,
"--n-close-icon-color-pressed": v,
"--n-line-height": S,
"--n-icon-color": te,
"--n-close-margin": f,
"--n-close-size": B,
"--n-close-icon-size": K,
"--n-width": j,
"--n-padding-left": ge,
"--n-padding-right": Ce,
"--n-padding-top": ye,
"--n-padding-bottom": eo,
"--n-title-font-size": O,
"--n-meta-font-size": D,
"--n-description-font-size": F
};
}), l = r ? Pe("notification", T(() => e.type[0]), i, n) : void 0;
return {
mergedClsPrefix: o,
showAvatar: T(() => e.avatar || e.type !== "default"),
handleCloseClick() {
e.onClose();
},
rtlEnabled: u,
cssVars: r ? void 0 : i,
themeClass: l == null ? void 0 : l.themeClass,
onRender: l == null ? void 0 : l.onRender
};
},
render() {
var e;
const {
mergedClsPrefix: o
} = this;
return (e = this.onRender) === null || e === void 0 || e.call(this), d("div", {
class: [`${o}-notification-wrapper`, this.themeClass],
onMouseenter: this.onMouseenter,
onMouseleave: this.onMouseleave,
style: this.cssVars
}, d("div", {
class: [`${o}-notification`, this.rtlEnabled && `${o}-notification--rtl`, this.themeClass, {
[`${o}-notification--closable`]: this.closable,
[`${o}-notification--show-avatar`]: this.showAvatar
}],
style: this.cssVars
}, this.showAvatar ? d("div", {
class: `${o}-notification__avatar`
}, this.avatar ? ue(this.avatar) : this.type !== "default" ? d(Fo, {
clsPrefix: o
}, {
default: () => Ca[this.type]()
}) : null) : null, this.closable ? d(Ao, {
clsPrefix: o,
class: `${o}-notification__close`,
onClick: this.handleCloseClick
}) : null, d("div", {
ref: "bodyRef",
class: `${o}-notification-main`
}, this.title ? d("div", {
class: `${o}-notification-main__header`
}, ue(this.title)) : null, this.description ? d("div", {
class: `${o}-notification-main__description`
}, ue(this.description)) : null, this.content ? d("pre", {
class: `${o}-notification-main__content`
}, ue(this.content)) : null, this.meta || this.action ? d("div", {
class: `${o}-notification-main-footer`
}, this.meta ? d("div", {
class: `${o}-notification-main-footer__meta`
}, ue(this.meta)) : null, this.action ? d("div", {
class: `${o}-notification-main-footer__action`
}, ue(this.action)) : null) : null)));
}
}), Sa = Object.assign(Object.assign({}, xt), {
duration: Number,
onClose: Function,
onLeave: Function,
onAfterEnter: Function,
onAfterLeave: Function,
/** @deprecated */
onHide: Function,
/** @deprecated */
onAfterShow: Function,
/** @deprecated */
onAfterHide: Function
}), $a = W({
name: "NotificationEnvironment",
props: Object.assign(Object.assign({}, Sa), {
// private
internalKey: {
type: String,
required: !0
},
onInternalAfterLeave: {
type: Function,
required: !0
}
}),
setup(e) {
const {
wipTransitionCountRef: o
} = U(Do), t = I(!0);
let n = null;
function r() {
t.value = !1, n && window.clearTimeout(n);
}
function a(v) {
o.value++, ze(() => {
v.style.height = `${v.offsetHeight}px`, v.style.maxHeight = "0", v.style.transition = "none", v.offsetHeight, v.style.transition = "", v.style.maxHeight = v.style.height;
});
}
function u(v) {
o.value--, v.style.height = "", v.style.maxHeight = "";
const {
onAfterEnter: h,
onAfterShow: y
} = e;
h && h(), y && y();
}
function i(v) {
o.value++, v.style.maxHeight = `${v.offsetHeight}px`, v.style.height = `${v.offsetHeight}px`, v.offsetHeight;
}
function l(v) {
const {
onHide: h
} = e;
h && h(), v.style.maxHeight = "0", v.offsetHeight;
}
function s() {
o.value--;
const {
onAfterLeave: v,
onInternalAfterLeave: h,
onAfterHide: y,
internalKey: x
} = e;
v && v(), h(x), y && y();
}
function c() {
const {
duration: v
} = e;
v && (n = window.setTimeout(r, v));
}
function g(v) {
v.currentTarget === v.target && n !== null && (window.clearTimeout(n), n = null);
}
function b(v) {
v.currentTarget === v.target && c();
}
function p() {
const {
onClose: v
} = e;
v ? Promise.resolve(v()).then((h) => {
h !== !1 && r();
}) : r();
}
return uo(() => {
e.duration && (n = window.setTimeout(r, e.duration));
}), {
show: t,
hide: r,
handleClose: p,
handleAfterLeave: s,
handleLeave: l,
handleBeforeLeave: i,
handleAfterEnter: u,
handleBeforeEnter: a,
handleMouseenter: g,
handleMouseleave: b
};
},
render() {
return d(ke, {
name: "notification-transition",
appear: !0,
// convert to any since Element is not compatible with HTMLElement
onBeforeEnter: this.handleBeforeEnter,
onAfterEnter: this.handleAfterEnter,
onBeforeLeave: this.handleBeforeLeave,
onLeave: this.handleLeave,
onAfterLeave: this.handleAfterLeave
}, {
default: () => this.show ? d(wa, Object.assign({}, Ze(this.$props, ya), {
onClose: this.handleClose,
onMouseenter: this.duration && this.keepAliveOnHover ? this.handleMouseenter : void 0,
onMouseleave: this.duration && this.keepAliveOnHover ? this.handleMouseleave : void 0
})) : null
});
}
}), za = m([k("notification-container", `
z-index: 4000;
position: fixed;
overflow: visible;
display: flex;
flex-direction: column;
align-items: flex-end;
`, [m(">", [k("scrollbar", `
width: initial;
overflow: visible;
height: -moz-fit-content !important;
height: fit-content !important;
max-height: 100vh !important;
`, [m(">", [k("scrollbar-container", `
height: -moz-fit-content !important;
height: fit-content !important;
max-height: 100vh !important;
`, [k("scrollbar-content", `
padding-top: 12px;
padding-bottom: 33px;
`)])])])]), P("top, top-right, top-left", `
top: 12px;
`, [m("&.transitioning >", [k("scrollbar", [m(">", [k("scrollbar-container", `
min-height: 100vh !important;
`)])])])]), P("bottom, bottom-right, bottom-left", `
bottom: 12px;
`, [m(">", [k("scrollbar", [m(">", [k("scrollbar-container", [k("scrollbar-content", `
padding-bottom: 12px;
`)])])])]), k("notification-wrapper", `
display: flex;
align-items: flex-end;
margin-bottom: 0;
margin-top: 12px;
`)]), P("top, bottom", `
left: 50%;
transform: translateX(-50%);
`, [k("notification-wrapper", [m("&.notification-transition-enter-from, &.notification-transition-leave-to", `
transform: scale(0.85);
`), m("&.notification-transition-leave-from, &.notification-transition-enter-to", `
transform: scale(1);
`)])]), P("top", [k("notification-wrapper", `
transform-origin: top center;
`)]), P("bottom", [k("notification-wrapper", `
transform-origin: bottom center;
`)]), P("top-right, bottom-right", [k("notification", `
margin-left: 28px;
margin-right: 16px;
`)]), P("top-left, bottom-left", [k("notification", `
margin-left: 16px;
margin-right: 28px;
`)]), P("top-right", `
right: 0;
`, [bo("top-right")]), P("top-left", `
left: 0;
`, [bo("top-left")]), P("bottom-right", `
right: 0;
`, [bo("bottom-right")]), P("bottom-left", `
left: 0;
`, [bo("bottom-left")]), P("scrollable", [P("top-right", `
top: 0;
`), P("top-left", `
top: 0;
`), P("bottom-right", `
bottom: 0;
`), P("bottom-left", `
bottom: 0;
`)]), k("notification-wrapper", `
margin-bottom: 12px;
`, [m("&.notification-transition-enter-from, &.notification-transition-leave-to", `
opacity: 0;
margin-top: 0 !important;
margin-bottom: 0 !important;
`), m("&.notification-transition-leave-from, &.notification-transition-enter-to", `
opacity: 1;
`), m("&.notification-transition-leave-active", `
transition:
background-color .3s var(--n-bezier),
color .3s var(--n-bezier),
opacity .3s var(--n-bezier),
transform .3s var(--n-bezier-ease-in),
max-height .3s var(--n-bezier),
margin-top .3s linear,
margin-bottom .3s linear,
box-shadow .3s var(--n-bezier);
`), m("&.notification-transition-enter-active", `
transition:
background-color .3s var(--n-bezier),
color .3s var(--n-bezier),
opacity .3s var(--n-bezier),
transform .3s var(--n-bezier-ease-out),
max-height .3s var(--n-bezier),
margin-top .3s linear,
margin-bottom .3s linear,
box-shadow .3s var(--n-bezier);
`)]), k("notification", `
background-color: var(--n-color);
color: var(--n-text-color);
transition:
background-color .3s var(--n-bezier),
color .3s var(--n-bezier),
opacity .3s var(--n-bezier),
box-shadow .3s var(--n-bezier);
font-family: inherit;
font-size: var(--n-font-size);
font-weight: 400;
position: relative;
display: flex;
overflow: hidden;
flex-shrink: 0;
padding-left: var(--n-padding-left);
padding-right: var(--n-padding-right);
width: var(--n-width);
max-width: calc(100vw - 16px - 16px);
border-radius: var(--n-border-radius);
box-shadow: var(--n-box-shadow);
box-sizing: border-box;
opacity: 1;
`, [R("avatar", [k("icon", `
color: var(--n-icon-color);
`), k("base-icon", `
color: var(--n-icon-color);
`)]), P("show-avatar", [k("notification-main", `
margin-left: 40px;
width: calc(100% - 40px);
`)]), P("closable", [k("notification-main", [m("> *:first-child", `
padding-right: 20px;
`)]), R("close", `
position: absolute;
top: 0;
right: 0;
margin: var(--n-close-margin);
transition:
background-color .3s var(--n-bezier),
color .3s var(--n-bezier);
`)]), R("avatar", `
position: absolute;
top: var(--n-padding-top);
left: var(--n-padding-left);
width: 28px;
height: 28px;
font-size: 28px;
display: flex;
align-items: center;
justify-content: center;
`, [k("icon", "transition: color .3s var(--n-bezier);")]), k("notification-main", `
padding-top: var(--n-padding-top);
padding-bottom: var(--n-padding-bottom);
box-sizing: border-box;
display: flex;
flex-direction: column;
margin-left: 8px;
width: calc(100% - 8px);
`, [k("notification-main-footer", `
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 12px;
`, [R("meta", `
font-size: var(--n-meta-font-size);
transition: color .3s var(--n-bezier-ease-out);
color: var(--n-description-text-color);
`), R("action", `
cursor: pointer;
transition: color .3s var(--n-bezier-ease-out);
color: var(--n-action-text-color);
`)]), R("header", `
font-weight: var(--n-title-font-weight);
font-size: var(--n-title-font-size);
transition: color .3s var(--n-bezier-ease-out);
color: var(--n-title-text-color);
`), R("description", `
margin-top: 8px;
font-size: var(--n-description-font-size);
white-space: pre-wrap;
word-wrap: break-word;
transition: color .3s var(--n-bezier-ease-out);
color: var(--n-description-text-color);
`), R("content", `
line-height: var(--n-line-height);
margin: 12px 0 0 0;
font-family: inherit;
white-space: pre-wrap;
word-wrap: break-word;
transition: color .3s var(--n-bezier-ease-out);
color: var(--n-text-color);
`, [m("&:first-child", "margin: 0;")])])])])]);
function bo(e) {
const t = e.split("-")[1] === "left" ? "calc(-100%)" : "calc(100%)";
return k("notification-wrapper", [m("&.notification-transition-enter-from, &.notification-transition-leave-to", `
transform: translate(${t}, 0);
`), m("&.notification-transition-leave-from, &.notification-transition-enter-to", `
transform: translate(0, 0);
`)]);
}
const Bn = "n-notification-api", Pa = Object.assign(Object.assign({}, Q.props), {
containerClass: String,
containerStyle: [String, Object],
to: [String, Object],
scrollable: {
type: Boolean,
default: !0
},
max: Number,
placement: {
type: String,
default: "top-right"
},
keepAliveOnHover: Boolean
}), Ra = W({
name: "NotificationProvider",
props: Pa,
setup(e) {
const {
mergedClsPrefixRef: o
} = de(e), t = I([]), n = {}, r = /* @__PURE__ */ new Set();
function a(p) {
const v = Io(), h = () => {
r.add(v), n[v] && n[v].hide();
}, y = Oo(Object.assign(Object.assign({}, p), {
key: v,
destroy: h,
hide: h,
deactivate: h
})), {
max: x
} = e;
if (x && t.value.length - r.size >= x) {
let $ = !1, E = 0;
for (const z of t.value) {
if (!r.has(z.key)) {
n[z.key] && (z.destroy(), $ = !0);
break;
}
E++;
}
$ || t.value.splice(E, 1);
}
return t.value.push(y), y;
}
const u = ["info", "success", "warning", "error"].map((p) => (v) => a(Object.assign(Object.assign({}, v), {
type: p
})));
function i(p) {
r.delete(p), t.value.splice(t.value.findIndex((v) => v.key === p), 1);
}
const l = Q("Notification", "-notification", za, ba, e, o), s = {
create: a,
info: u[0],
success: u[1],
warning: u[2],
error: u[3],
open: g,
destroyAll: b
}, c = I(0);
oe(Bn, s), oe(Do, {
props: e,
mergedClsPrefixRef: o,
mergedThemeRef: l,
wipTransitionCountRef: c
});
function g(p) {
return a(p);
}
function b() {
Object.values(t.value).forEach((p) => {
p.hide();
});
}
return Object.assign({
mergedClsPrefix: o,
notificationList: t,
notificationRefs: n,
handleAfterLeave: i
}, s);
},
render() {
var e, o, t;
const {
placement: n
} = this;
return d(Be, null, (o = (e = this.$slots).default) === null || o === void 0 ? void 0 : o.call(e), this.notificationList.length ? d(it, {
to: (t = this.to) !== null && t !== void 0 ? t : "body"
}, d(xa, {
class: this.containerClass,
style: this.containerStyle,
scrollable: this.scrollable && n !== "top" && n !== "bottom",
placement: n
}, {
default: () => this.notificationList.map((r) => d($a, Object.assign({
ref: (a) => {
const u = r.key;
a === null ? delete this.notificationRefs[u] : this.notificationRefs[u] = a;
}
}, Mo(r, ["destroy", "hide", "deactivate"]), {
internalKey: r.key,
onInternalAfterLeave: this.handleAfterLeave,
keepAliveOnHover: r.keepAliveOnHover === void 0 ? this.keepAliveOnHover : r.keepAliveOnHover
})))
})) : null);
}
});
function ka() {
const e = U(Bn, null);
return e === null && De("use-notification", "No outer `n-notification-provider` found."), e;
}
function Ba() {
const e = U(kn, null);
return e === null && De("use-modal", "No outer <n-modal-provider /> founded."), e;
}
const Oa = W({
name: "InjectionExtractor",
props: {
onSetup: Function
},
setup(e, {
slots: o
}) {
var t;
return (t = e.onSetup) === null || t === void 0 || t.call(e), () => {
var n;
return (n = o.default) === null || n === void 0 ? void 0 : n.call(o);
};
}
}), Ta = {
message: ua,
notification: ka,
loadingBar: ea,
dialog: Ei,
modal: Ba
};
function Ia({
providersAndProps: e,
configProviderProps: o
}) {
let t = tr(r);
const n = {
app: t
};
function r() {
return d($i, Pt(o), {
default: () => e.map(({
type: i,
Provider: l,
props: s
}) => d(l, Pt(s), {
default: () => d(Oa, {
onSetup: () => n[i] = Ta[i]()
})
}))
});
}
let a;
return Qe && (a = document.createElement("div"), document.body.appendChild(a), t.mount(a)), Object.assign({
unmount: () => {
var i;
if (t === null || a === null) {
qe("discrete", "unmount call no need because discrete app has been unmounted");
return;
}
t.unmount(), (i = a.parentNode) === null || i === void 0 || i.removeChild(a), a = null, t = null;
}
}, n);
}
function Ya(e, {
configProviderProps: o,
messageProviderProps: t,
dialogProviderProps: n,
notificationProviderProps: r,
loadingBarProviderProps: a,
modalProviderProps: u
} = {}) {
const i = [];
return e.forEach((s) => {
switch (s) {
case "message":
i.push({
type: s,
Provider: da,
props: t
});
break;
case "notification":
i.push({
type: s,
Provider: Ra,
props: r
});
break;
case "dialog":
i.push({
type: s,
Provider: Xi,
props: n
});
break;
case "loadingBar":
i.push({
type: s,
Provider: Ji,
props: a
});
break;
case "modal":
i.push({
type: s,
Provider: ga,
props: u
});
}
}), Ia({
providersAndProps: i,
configProviderProps: o
});
}
export {
Xa as N,
Ga as a,
Ya as c
};