vexip-ui
Version:
A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good
277 lines (276 loc) • 8.65 kB
JavaScript
import { defineComponent as S, toRef as j, reactive as D, ref as $, onMounted as G, nextTick as J, createElementBlock as s, openBlock as l, normalizeClass as r, unref as t, createVNode as T, withCtx as x, createBlock as m, Fragment as P, createCommentVNode as k, createElementVNode as N, createTextVNode as _, toDisplayString as C, withModifiers as K, renderSlot as Q, mergeProps as B } from "vue";
import "../button/index.mjs";
import "../icon/index.mjs";
import { Modal as U } from "../modal/index.mjs";
import "../renderer/index.mjs";
import { useProps as W, useNameHelper as X, useIcons as Y, useLocale as Z } from "@vexip-ui/config";
import { isFunction as f, isPromise as ee } from "@vexip-ui/utils";
import { confirmProps as te } from "./props.mjs";
import H from "../renderer/renderer.mjs";
import O from "../icon/icon.mjs";
import L from "../button/button.mjs";
const oe = ["innerHTML"], be = /* @__PURE__ */ S({
name: "Confirm",
__name: "confirm",
props: te,
setup(q, { expose: z }) {
const A = (o) => o === "auto" || !Number.isNaN(parseFloat(o)), d = {
default: "auto",
validator: A
}, M = Object.freeze([
"default",
"primary",
"info",
"success",
"warning",
"error"
]), a = W("confirm", q, {
locale: null,
width: {
default: 420,
validator: A
},
height: d,
top: d,
left: d,
right: d,
bottom: d,
maskClose: !1,
confirmType: {
default: "primary",
validator: (o) => M.includes(o)
},
cancelType: {
default: "default",
validator: (o) => M.includes(o)
},
confirmText: null,
cancelText: null,
icon: {
isFunc: !0,
default: !1
},
className: null,
style: null,
renderer: {
default: null,
isFunc: !0,
static: !0
},
iconProps: () => ({}),
closable: !1,
parseHtml: !1,
contentAlign: "left",
actionsAlign: "right",
cancelable: !0,
xOffset: 0,
yOffset: 0
}), n = X("confirm"), u = Y(), F = Z("confirm", j(a, "locale")), w = [
"className",
"style",
"icon",
"iconProps",
"maskClose",
"confirmType",
"cancelType",
"confirmText",
"cancelText",
"parseHtml",
"closable",
"contentAlign",
"actionsAlign",
"cancelable",
"width",
"height",
"top",
"right",
"bottom",
"left",
"xOffset",
"yOffset"
], e = D({
...w.reduce((o, i) => (o[i] = a[i], o), {}),
visible: !1,
loading: !1,
title: "",
content: "",
raw: {}
}), c = $(a.renderer);
let p = null, g = null, h = null;
const E = new Promise((o) => {
G(() => {
J(o);
});
});
z({ state: e, openConfirm: I, closeConfirm: b, handleReset: V });
async function I(o) {
return await E, await new Promise((i) => {
for (const y of w)
e[y] = o[y] ?? a[y];
if (e.title = o.title ?? "", e.content = o.content ?? "", e.raw = o, c.value = f(o.renderer) ? o.renderer : a.renderer, p = f(o.onBeforeConfirm) ? o.onBeforeConfirm : null, f(c.value)) {
const y = c.value;
c.value = () => y(e, R, b);
}
e.visible = !0;
let v = !1;
g = () => {
!v && i(!0), v = !0, p = null;
}, h = () => {
!v && i(!1), v = !0, p = null;
};
});
}
async function R() {
if (e.loading = !0, f(p)) {
let o = p();
if (ee(o) && (o = await o), o === !1) {
e.loading = !1;
return;
}
}
e.visible = !1, e.loading = !1, f(g) && (g(), g = null);
}
function b() {
e.visible = !1, f(h) && (h(), h = null);
}
function V() {
for (const o of w)
e[o] = a[o];
e.visible = !1, e.loading = !1, e.title = "", e.content = "", e.raw = {}, c.value = a.renderer;
}
return (o, i) => (l(), s("div", {
class: r([t(n).b(), t(n).bs("vars")])
}, [
T(t(U), {
"no-footer": "",
"auto-remove": !1,
transfer: !1,
closable: !1,
active: e.visible,
"modal-class": e.className,
"modal-style": e.style,
width: e.width,
height: e.height,
top: e.top,
left: e.left,
right: e.right,
bottom: e.bottom,
"x-offset": e.xOffset,
"y-offset": e.yOffset,
"mask-close": e.maskClose,
onHide: V,
onClose: b
}, {
default: x(() => [
t(f)(c.value) ? (l(), m(t(H), {
key: 0,
renderer: c.value
}, null, 8, ["renderer"])) : (l(), s(P, { key: 1 }, [
e.title ? (l(), s("div", {
key: 0,
class: r(t(n).be("header"))
}, [
N("div", {
class: r(t(n).be("title"))
}, [
typeof e.title == "function" ? (l(), m(t(H), {
key: 0,
renderer: e.title
}, null, 8, ["renderer"])) : (l(), s(P, { key: 1 }, [
_(C(e.title), 1)
], 64))
], 2),
e.closable ? (l(), s("button", {
key: 0,
type: "button",
class: r(t(n).be("close")),
onMousedown: i[0] || (i[0] = K(() => {
}, ["stop"])),
onClick: b
}, [
Q(o.$slots, "close", {}, () => [
T(t(O), B(t(u).close, {
scale: +(t(u).close.scale || 1) * 1.2,
label: "close"
}), null, 16, ["scale"])
])
], 34)) : k("", !0)
], 2)) : k("", !0),
N("div", {
class: r([
t(n).be("body"),
t(n).bem("body", e.contentAlign),
!e.title && t(n).bem("body", "no-title")
])
}, [
e.icon !== !1 ? (l(), s("div", {
key: 0,
class: r(t(n).be("icon"))
}, [
typeof e.icon != "boolean" ? (l(), m(t(O), B({ key: 0 }, e.iconProps, {
icon: e.icon
}), null, 16, ["icon"])) : (l(), m(t(O), B({
key: 1,
scale: 2.2
}, {
...e.cancelable ? t(u).question : t(u).warning,
...e.iconProps
}, {
icon: (e.cancelable ? t(u).question : t(u).warning).icon
}), null, 16, ["icon"]))
], 2)) : k("", !0),
typeof e.content == "function" ? (l(), m(t(H), {
key: 1,
renderer: e.content
}, null, 8, ["renderer"])) : (l(), s(P, { key: 2 }, [
e.parseHtml ? (l(), s("div", {
key: 0,
class: r(t(n).be("content")),
innerHTML: e.content
}, null, 10, oe)) : (l(), s("div", {
key: 1,
class: r(t(n).be("content"))
}, C(e.content), 3))
], 64))
], 2),
N("div", {
class: r([t(n).be("footer"), t(n).bem("footer", e.actionsAlign)])
}, [
e.cancelable ? (l(), m(t(L), {
key: 0,
class: r([t(n).be("button"), t(n).bem("button", "cancel")]),
inherit: "",
"no-pulse": "",
type: e.cancelType,
onClick: b
}, {
default: x(() => [
_(C(e.cancelText || t(F).cancel), 1)
]),
_: 1
}, 8, ["class", "type"])) : k("", !0),
T(t(L), {
class: r([t(n).be("button"), t(n).bem("button", "confirm")]),
inherit: "",
"no-pulse": "",
type: e.confirmType,
loading: e.loading,
onClick: R
}, {
default: x(() => [
_(C(e.confirmText || t(F).confirm), 1)
]),
_: 1
}, 8, ["class", "type", "loading"])
], 2)
], 64))
]),
_: 3
}, 8, ["active", "modal-class", "modal-style", "width", "height", "top", "left", "right", "bottom", "x-offset", "y-offset", "mask-close"])
], 2));
}
});
export {
be as default
};
//# sourceMappingURL=confirm.vue2.mjs.map