vue-amazing-ui
Version:
An Amazing Vue3 UI Components Library, Using TypeScript.
168 lines (167 loc) • 6.39 kB
JavaScript
import { defineComponent as T, ref as B, computed as P, createBlock as p, openBlock as t, unref as s, mergeProps as u, withCtx as r, renderSlot as i, createElementVNode as l, createElementBlock as n, createCommentVNode as f, normalizeStyle as m, resolveDynamicComponent as $, normalizeClass as V, createTextVNode as a, toDisplayString as c, createVNode as L } from "vue";
import E from "../tooltip/index.js";
import k from "../button/index.js";
import { useInject as M, useSlotsExist as N } from "../utils/index.js";
const D = { class: "popconfirm-wrap" }, R = {
key: 0,
class: "icon-info",
focusable: "false",
width: "1em",
height: "1em",
fill: "currentColor",
viewBox: "64 64 896 896",
"data-icon": "info-circle",
"aria-hidden": "true"
}, j = {
key: 1,
class: "icon-success",
focusable: "false",
width: "1em",
height: "1em",
fill: "currentColor",
viewBox: "64 64 896 896",
"data-icon": "check-circle",
"aria-hidden": "true"
}, O = {
key: 2,
class: "icon-danger",
focusable: "false",
width: "1em",
height: "1em",
fill: "currentColor",
viewBox: "64 64 896 896",
"data-icon": "close-circle",
"aria-hidden": "true"
}, A = {
key: 3,
class: "icon-warning",
focusable: "false",
width: "1em",
height: "1em",
fill: "currentColor",
viewBox: "64 64 896 896",
"data-icon": "exclamation-circle",
"aria-hidden": "true"
}, F = { class: "popconfirm-btns" }, J = /* @__PURE__ */ T({
__name: "Popconfirm",
props: {
title: { default: void 0 },
titleStyle: { default: () => ({}) },
description: { default: void 0 },
descriptionStyle: { default: () => ({}) },
keyboard: { type: Boolean, default: !0 },
tooltipStyle: { default: () => ({}) },
icon: { type: [String, Object, Function], default: "warning" },
iconStyle: { default: () => ({}) },
cancelText: { default: "取消" },
cancelType: { default: "default" },
cancelProps: { default: () => ({}) },
okText: { default: "确定" },
okType: { default: "primary" },
okProps: { default: () => ({}) },
showCancel: { type: Boolean, default: !0 }
},
emits: ["cancel", "ok"],
setup(g, { emit: v }) {
const w = g, d = B(), { colorPalettes: C } = M("Popconfirm"), y = v, S = N(["description"]), h = P(() => S.description || w.description);
function z(e) {
y("cancel", e), d.value.hide();
}
function b(e) {
y("ok", e), d.value.hide();
}
return (e, o) => (t(), p(s(E), u({
ref_key: "tooltipRef",
ref: d,
"max-width": "auto",
"bg-color": "#fff",
"tooltip-style": {
padding: "12px",
borderRadius: "8px",
textAlign: "start",
...e.tooltipStyle
},
trigger: "click",
keyboard: e.keyboard,
"transition-duration": 200,
style: `
--popconfirm-primary-color: ${s(C)[5]};
--popconfirm-success-color: #52c41a;
--popconfirm-danger-color: #ff4d4f;
--popconfirm-warning-color: #faad14;
`
}, e.$attrs), {
tooltip: r(() => [
l("div", D, [
l("span", {
class: "popconfirm-icon",
style: m(e.iconStyle)
}, [
i(e.$slots, "icon", {}, () => [
e.icon === "info" ? (t(), n("svg", R, o[0] || (o[0] = [
l("path", { d: "M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm32 664c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V456c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272zm-32-344a48.01 48.01 0 0 1 0-96 48.01 48.01 0 0 1 0 96z" }, null, -1)
]))) : e.icon === "success" ? (t(), n("svg", j, o[1] || (o[1] = [
l("path", { d: "M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 0 1-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z" }, null, -1)
]))) : e.icon === "danger" ? (t(), n("svg", O, o[2] || (o[2] = [
l("path", { d: "M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 0 1-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z" }, null, -1)
]))) : e.icon === "warning" ? (t(), n("svg", A, o[3] || (o[3] = [
l("path", { d: "M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 0 1 0-96 48.01 48.01 0 0 1 0 96z" }, null, -1)
]))) : e.icon ? (t(), p($(e.icon), { key: 4 })) : f("", !0)
], !0)
], 4),
l("div", {
class: V(["popconfirm-title", { "title-font-weight": h.value }]),
style: m(e.titleStyle)
}, [
i(e.$slots, "title", {}, () => [
a(c(e.title), 1)
], !0)
], 6)
]),
h.value ? (t(), n("div", {
key: 0,
class: "popconfirm-description",
style: m(e.descriptionStyle)
}, [
i(e.$slots, "description", {}, () => [
a(c(e.description), 1)
], !0)
], 4)) : f("", !0),
l("div", F, [
e.showCancel ? (t(), p(s(k), u({
key: 0,
size: "small",
type: e.cancelType,
onClick: z
}, e.cancelProps), {
default: r(() => [
i(e.$slots, "cancelText", {}, () => [
a(c(e.cancelText), 1)
], !0)
]),
_: 3
}, 16, ["type"])) : f("", !0),
L(s(k), u({
size: "small",
type: e.okType,
onClick: b
}, e.okProps), {
default: r(() => [
i(e.$slots, "okText", {}, () => [
a(c(e.okText), 1)
], !0)
]),
_: 3
}, 16, ["type"])
])
]),
default: r(() => [
i(e.$slots, "default", {}, void 0, !0)
]),
_: 3
}, 16, ["tooltip-style", "keyboard", "style"]));
}
});
export {
J as default
};