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