vue-amazing-ui
Version:
An Amazing Vue3 UI Components Library, Using TypeScript.
58 lines (57 loc) • 1.87 kB
JavaScript
import { defineComponent as m, computed as i, createBlock as v, openBlock as e, unref as S, mergeProps as k, withCtx as s, renderSlot as o, createElementBlock as a, createCommentVNode as d, normalizeStyle as p, normalizeClass as b, createTextVNode as u, toDisplayString as c } from "vue";
import g from "../tooltip/index.js";
import { useSlotsExist as h } from "../utils/index.js";
const E = /* @__PURE__ */ m({
__name: "Popover",
props: {
title: { default: void 0 },
titleStyle: { default: () => ({}) },
content: { default: void 0 },
contentStyle: { default: () => ({}) },
keyboard: { type: Boolean, default: !0 },
tooltipStyle: { default: () => ({}) }
},
setup(y) {
const l = y, r = h(["title", "content"]), f = i(() => r.title || l.title), n = i(() => r.content || l.content);
return (t, C) => (e(), v(S(g), k({
"max-width": "auto",
"bg-color": "#fff",
"tooltip-style": {
padding: "12px",
borderRadius: "8px",
textAlign: "start",
...t.tooltipStyle
},
keyboard: t.keyboard,
"transition-duration": 200
}, t.$attrs), {
tooltip: s(() => [
f.value ? (e(), a("div", {
key: 0,
class: b(["popover-title", { mb8: n.value }]),
style: p(t.titleStyle)
}, [
o(t.$slots, "title", {}, () => [
u(c(t.title), 1)
], !0)
], 6)) : d("", !0),
n.value ? (e(), a("div", {
key: 1,
class: "popover-content",
style: p(t.contentStyle)
}, [
o(t.$slots, "content", {}, () => [
u(c(t.content), 1)
], !0)
], 4)) : d("", !0)
]),
default: s(() => [
o(t.$slots, "default", {}, void 0, !0)
]),
_: 3
}, 16, ["tooltip-style", "keyboard"]));
}
});
export {
E as default
};