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