vutooltip 1.0.1 → 1.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/vutooltip.css +1 -1
- package/dist/vutooltip.es.js +112 -32
- package/dist/vutooltip.umd.js +1 -1
- package/package.json +1 -1
package/dist/vutooltip.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.v-tooltip-wrapper[data-v-
|
|
1
|
+
.v-tooltip-wrapper[data-v-28494062]{position:relative;display:inline-block}.v-tooltip[data-v-28494062]{position:absolute;background:#333;color:#fff;padding:6px 10px;border-radius:4px;white-space:nowrap;font-size:12px;z-index:999}.fade-enter-active[data-v-28494062],.fade-leave-active[data-v-28494062]{transition:opacity .15s ease}.fade-enter-from[data-v-28494062],.fade-leave-to[data-v-28494062]{opacity:0}.v-tooltip-arrow[data-v-28494062]{position:absolute;width:0;height:0;border-style:solid}.arrow-top[data-v-28494062]{top:100%;left:50%;transform:translate(-50%);border-width:6px 6px 0 6px;border-color:#333 transparent transparent transparent}.arrow-bottom[data-v-28494062]{bottom:100%;left:50%;transform:translate(-50%);border-width:0 6px 6px 6px;border-color:transparent transparent #333 transparent}.arrow-left[data-v-28494062]{left:100%;top:50%;transform:translateY(-50%);border-width:6px 0 6px 6px;border-color:transparent transparent transparent #333}.arrow-right[data-v-28494062]{right:100%;top:50%;transform:translateY(-50%);border-width:6px 6px 6px 0;border-color:transparent #333 transparent transparent}
|
package/dist/vutooltip.es.js
CHANGED
|
@@ -1,55 +1,135 @@
|
|
|
1
|
-
import { ref as i, computed as
|
|
2
|
-
const
|
|
3
|
-
const
|
|
4
|
-
for (const [
|
|
5
|
-
|
|
6
|
-
return
|
|
7
|
-
},
|
|
1
|
+
import { ref as i, computed as w, openBlock as c, createElementBlock as f, renderSlot as m, createVNode as g, Transition as T, withCtx as _, normalizeStyle as b, createTextVNode as x, toDisplayString as $, createElementVNode as k, normalizeClass as N, createCommentVNode as S, nextTick as D } from "vue";
|
|
2
|
+
const R = (l, t) => {
|
|
3
|
+
const a = l.__vccOpts || l;
|
|
4
|
+
for (const [s, r] of t)
|
|
5
|
+
a[s] = r;
|
|
6
|
+
return a;
|
|
7
|
+
}, V = {
|
|
8
8
|
__name: "Tooltip",
|
|
9
9
|
props: {
|
|
10
10
|
text: {
|
|
11
11
|
type: String,
|
|
12
|
-
|
|
12
|
+
default: ""
|
|
13
13
|
},
|
|
14
14
|
position: {
|
|
15
15
|
type: String,
|
|
16
16
|
default: "top"
|
|
17
|
+
// top | bottom | left | right
|
|
18
|
+
},
|
|
19
|
+
offset: {
|
|
20
|
+
type: Number,
|
|
21
|
+
default: 8
|
|
22
|
+
},
|
|
23
|
+
autoFlip: {
|
|
24
|
+
type: Boolean,
|
|
25
|
+
default: !0
|
|
26
|
+
},
|
|
27
|
+
showDelay: {
|
|
28
|
+
type: Number,
|
|
29
|
+
default: 200
|
|
30
|
+
},
|
|
31
|
+
hideDelay: {
|
|
32
|
+
type: Number,
|
|
33
|
+
default: 100
|
|
17
34
|
}
|
|
18
35
|
},
|
|
19
|
-
setup(
|
|
20
|
-
const
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
36
|
+
setup(l) {
|
|
37
|
+
const t = l, a = i(!1), s = i(null), r = i(null), o = i(t.position);
|
|
38
|
+
let u = null, p = null;
|
|
39
|
+
const d = async () => {
|
|
40
|
+
if (!t.autoFlip) {
|
|
41
|
+
o.value = t.position;
|
|
42
|
+
return;
|
|
43
|
+
}
|
|
44
|
+
await D();
|
|
45
|
+
const e = r.value;
|
|
46
|
+
if (!e) return;
|
|
47
|
+
const n = e.getBoundingClientRect();
|
|
48
|
+
if (t.position === "top" && n.top < 0) {
|
|
49
|
+
o.value = "bottom";
|
|
50
|
+
return;
|
|
51
|
+
}
|
|
52
|
+
if (t.position === "bottom" && n.bottom > window.innerHeight) {
|
|
53
|
+
o.value = "top";
|
|
54
|
+
return;
|
|
55
|
+
}
|
|
56
|
+
if (t.position === "left" && n.left < 0) {
|
|
57
|
+
o.value = "right";
|
|
58
|
+
return;
|
|
59
|
+
}
|
|
60
|
+
if (t.position === "right" && n.right > window.innerWidth) {
|
|
61
|
+
o.value = "left";
|
|
62
|
+
return;
|
|
63
|
+
}
|
|
64
|
+
o.value = t.position;
|
|
65
|
+
}, v = () => {
|
|
66
|
+
clearTimeout(p), u = setTimeout(async () => {
|
|
67
|
+
a.value = !0, await d();
|
|
68
|
+
}, t.showDelay);
|
|
69
|
+
}, y = () => {
|
|
70
|
+
clearTimeout(u), p = setTimeout(() => {
|
|
71
|
+
a.value = !1;
|
|
72
|
+
}, t.hideDelay);
|
|
73
|
+
}, h = w(() => {
|
|
74
|
+
const e = `${t.offset}px`, n = {
|
|
75
|
+
top: {
|
|
76
|
+
bottom: `calc(100% + ${e})`,
|
|
77
|
+
left: "50%",
|
|
78
|
+
transform: "translateX(-50%)"
|
|
79
|
+
},
|
|
80
|
+
bottom: {
|
|
81
|
+
top: `calc(100% + ${e})`,
|
|
82
|
+
left: "50%",
|
|
83
|
+
transform: "translateX(-50%)"
|
|
84
|
+
},
|
|
85
|
+
left: {
|
|
86
|
+
right: `calc(100% + ${e})`,
|
|
87
|
+
top: "50%",
|
|
88
|
+
transform: "translateY(-50%)"
|
|
89
|
+
},
|
|
90
|
+
right: {
|
|
91
|
+
left: `calc(100% + ${e})`,
|
|
92
|
+
top: "50%",
|
|
93
|
+
transform: "translateY(-50%)"
|
|
94
|
+
}
|
|
26
95
|
};
|
|
27
|
-
return o
|
|
96
|
+
return n[o.value] || n.top;
|
|
28
97
|
});
|
|
29
|
-
return (
|
|
98
|
+
return (e, n) => (c(), f("div", {
|
|
99
|
+
ref_key: "wrapperRef",
|
|
100
|
+
ref: s,
|
|
30
101
|
class: "v-tooltip-wrapper",
|
|
31
|
-
onMouseenter:
|
|
32
|
-
onMouseleave:
|
|
102
|
+
onMouseenter: v,
|
|
103
|
+
onMouseleave: y
|
|
33
104
|
}, [
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
default:
|
|
37
|
-
|
|
105
|
+
m(e.$slots, "default", {}, void 0, !0),
|
|
106
|
+
g(T, { name: "fade" }, {
|
|
107
|
+
default: _(() => [
|
|
108
|
+
a.value ? (c(), f("div", {
|
|
38
109
|
key: 0,
|
|
110
|
+
ref_key: "tooltipRef",
|
|
111
|
+
ref: r,
|
|
39
112
|
class: "v-tooltip",
|
|
40
|
-
style:
|
|
41
|
-
},
|
|
113
|
+
style: b(h.value)
|
|
114
|
+
}, [
|
|
115
|
+
m(e.$slots, "content", {}, () => [
|
|
116
|
+
x($(l.text), 1)
|
|
117
|
+
], !0),
|
|
118
|
+
k("span", {
|
|
119
|
+
class: N(["v-tooltip-arrow", `arrow-${o.value}`])
|
|
120
|
+
}, null, 2)
|
|
121
|
+
], 4)) : S("", !0)
|
|
42
122
|
]),
|
|
43
|
-
_:
|
|
123
|
+
_: 3
|
|
44
124
|
})
|
|
45
|
-
],
|
|
125
|
+
], 544));
|
|
46
126
|
}
|
|
47
|
-
},
|
|
48
|
-
install(
|
|
49
|
-
|
|
127
|
+
}, B = /* @__PURE__ */ R(V, [["__scopeId", "data-v-28494062"]]), E = {
|
|
128
|
+
install(l) {
|
|
129
|
+
l.component("VuTooltip", B);
|
|
50
130
|
}
|
|
51
131
|
};
|
|
52
132
|
export {
|
|
53
|
-
|
|
54
|
-
|
|
133
|
+
B as Tooltip,
|
|
134
|
+
E as default
|
|
55
135
|
};
|
package/dist/vutooltip.umd.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
(function(
|
|
1
|
+
(function(n,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],t):(n=typeof globalThis<"u"?globalThis:n||self,t(n.Vue3Tooltip={},n.Vue))})(this,(function(n,t){"use strict";const p=((i,e)=>{const a=i.__vccOpts||i;for(const[f,s]of e)a[f]=s;return a})({__name:"Tooltip",props:{text:{type:String,default:""},position:{type:String,default:"top"},offset:{type:Number,default:8},autoFlip:{type:Boolean,default:!0},showDelay:{type:Number,default:200},hideDelay:{type:Number,default:100}},setup(i){const e=i,a=t.ref(!1),f=t.ref(null),s=t.ref(null),l=t.ref(e.position);let c=null,u=null;const m=async()=>{if(!e.autoFlip){l.value=e.position;return}await t.nextTick();const o=s.value;if(!o)return;const r=o.getBoundingClientRect();if(e.position==="top"&&r.top<0){l.value="bottom";return}if(e.position==="bottom"&&r.bottom>window.innerHeight){l.value="top";return}if(e.position==="left"&&r.left<0){l.value="right";return}if(e.position==="right"&&r.right>window.innerWidth){l.value="left";return}l.value=e.position},y=()=>{clearTimeout(u),c=setTimeout(async()=>{a.value=!0,await m()},e.showDelay)},h=()=>{clearTimeout(c),u=setTimeout(()=>{a.value=!1},e.hideDelay)},T=t.computed(()=>{const o=`${e.offset}px`,r={top:{bottom:`calc(100% + ${o})`,left:"50%",transform:"translateX(-50%)"},bottom:{top:`calc(100% + ${o})`,left:"50%",transform:"translateX(-50%)"},left:{right:`calc(100% + ${o})`,top:"50%",transform:"translateY(-50%)"},right:{left:`calc(100% + ${o})`,top:"50%",transform:"translateY(-50%)"}};return r[l.value]||r.top});return(o,r)=>(t.openBlock(),t.createElementBlock("div",{ref_key:"wrapperRef",ref:f,class:"v-tooltip-wrapper",onMouseenter:y,onMouseleave:h},[t.renderSlot(o.$slots,"default",{},void 0,!0),t.createVNode(t.Transition,{name:"fade"},{default:t.withCtx(()=>[a.value?(t.openBlock(),t.createElementBlock("div",{key:0,ref_key:"tooltipRef",ref:s,class:"v-tooltip",style:t.normalizeStyle(T.value)},[t.renderSlot(o.$slots,"content",{},()=>[t.createTextVNode(t.toDisplayString(i.text),1)],!0),t.createElementVNode("span",{class:t.normalizeClass(["v-tooltip-arrow",`arrow-${l.value}`])},null,2)],4)):t.createCommentVNode("",!0)]),_:3})],544))}},[["__scopeId","data-v-28494062"]]),d={install(i){i.component("VuTooltip",p)}};n.Tooltip=p,n.default=d,Object.defineProperties(n,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));
|