@vue-interface/tooltip 1.0.0-beta.13 → 1.0.0-beta.15
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/src/Tooltip.vue.d.ts +68 -46
- package/dist/tooltip.js +121 -157
- package/dist/tooltip.js.map +1 -1
- package/dist/tooltip.umd.cjs +1 -1
- package/dist/tooltip.umd.cjs.map +1 -1
- package/package.json +20 -13
- package/src/Tooltip.vue +92 -8
- package/src/TooltipPlugin.ts +6 -7
- package/dist/src/Popper.d.ts +0 -82
- package/src/Popper.ts +0 -118
|
@@ -1,82 +1,104 @@
|
|
|
1
|
-
|
|
1
|
+
import { Instance } from '@popperjs/core';
|
|
2
|
+
declare const _sfc_main: import("vue").DefineComponent<{
|
|
2
3
|
offset: {
|
|
3
|
-
type:
|
|
4
|
-
|
|
4
|
+
type: ObjectConstructor;
|
|
5
|
+
required: false;
|
|
5
6
|
};
|
|
6
7
|
popper: {
|
|
7
8
|
type: ObjectConstructor;
|
|
8
|
-
|
|
9
|
+
required: false;
|
|
9
10
|
};
|
|
10
11
|
placement: {
|
|
11
12
|
type: StringConstructor;
|
|
12
|
-
|
|
13
|
+
required: false;
|
|
13
14
|
};
|
|
14
15
|
target: {
|
|
15
|
-
type:
|
|
16
|
-
new (): Element;
|
|
17
|
-
prototype: Element;
|
|
18
|
-
};
|
|
16
|
+
type: null;
|
|
19
17
|
required: true;
|
|
20
18
|
};
|
|
21
19
|
title: {
|
|
22
20
|
type: StringConstructor;
|
|
23
|
-
|
|
24
|
-
};
|
|
25
|
-
show:
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
21
|
+
required: false;
|
|
22
|
+
};
|
|
23
|
+
show: {
|
|
24
|
+
type: BooleanConstructor;
|
|
25
|
+
required: false;
|
|
26
|
+
};
|
|
27
|
+
top: {
|
|
28
|
+
type: BooleanConstructor;
|
|
29
|
+
required: false;
|
|
30
|
+
};
|
|
31
|
+
bottom: {
|
|
32
|
+
type: BooleanConstructor;
|
|
33
|
+
required: false;
|
|
34
|
+
};
|
|
35
|
+
left: {
|
|
36
|
+
type: BooleanConstructor;
|
|
37
|
+
required: false;
|
|
38
|
+
};
|
|
39
|
+
right: {
|
|
40
|
+
type: BooleanConstructor;
|
|
41
|
+
required: false;
|
|
38
42
|
};
|
|
39
43
|
}, {
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
44
|
+
props: any;
|
|
45
|
+
el: import("vue").Ref<HTMLElement | undefined>;
|
|
46
|
+
arrow: import("vue").Ref<HTMLElement | undefined>;
|
|
47
|
+
currentShow: import("vue").Ref<boolean>;
|
|
48
|
+
popperInstance: import("vue").Ref<Instance | undefined>;
|
|
49
|
+
placement: import("vue").ComputedRef<any>;
|
|
50
|
+
tooltipClasses: import("vue").ComputedRef<{
|
|
51
|
+
[x: string]: boolean | import("vue").Ref<boolean>;
|
|
52
|
+
show: import("vue").Ref<boolean>;
|
|
53
|
+
}>;
|
|
54
|
+
open: () => void;
|
|
55
|
+
close: () => void;
|
|
56
|
+
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
|
|
43
57
|
offset: {
|
|
44
|
-
type:
|
|
45
|
-
|
|
58
|
+
type: ObjectConstructor;
|
|
59
|
+
required: false;
|
|
46
60
|
};
|
|
47
61
|
popper: {
|
|
48
62
|
type: ObjectConstructor;
|
|
49
|
-
|
|
63
|
+
required: false;
|
|
50
64
|
};
|
|
51
65
|
placement: {
|
|
52
66
|
type: StringConstructor;
|
|
53
|
-
|
|
67
|
+
required: false;
|
|
54
68
|
};
|
|
55
69
|
target: {
|
|
56
|
-
type:
|
|
57
|
-
new (): Element;
|
|
58
|
-
prototype: Element;
|
|
59
|
-
};
|
|
70
|
+
type: null;
|
|
60
71
|
required: true;
|
|
61
72
|
};
|
|
62
73
|
title: {
|
|
63
74
|
type: StringConstructor;
|
|
64
|
-
|
|
75
|
+
required: false;
|
|
76
|
+
};
|
|
77
|
+
show: {
|
|
78
|
+
type: BooleanConstructor;
|
|
79
|
+
required: false;
|
|
80
|
+
};
|
|
81
|
+
top: {
|
|
82
|
+
type: BooleanConstructor;
|
|
83
|
+
required: false;
|
|
84
|
+
};
|
|
85
|
+
bottom: {
|
|
86
|
+
type: BooleanConstructor;
|
|
87
|
+
required: false;
|
|
88
|
+
};
|
|
89
|
+
left: {
|
|
90
|
+
type: BooleanConstructor;
|
|
91
|
+
required: false;
|
|
92
|
+
};
|
|
93
|
+
right: {
|
|
94
|
+
type: BooleanConstructor;
|
|
95
|
+
required: false;
|
|
65
96
|
};
|
|
66
|
-
show: BooleanConstructor;
|
|
67
|
-
top: BooleanConstructor;
|
|
68
|
-
bottom: BooleanConstructor;
|
|
69
|
-
left: BooleanConstructor;
|
|
70
|
-
right: BooleanConstructor;
|
|
71
97
|
}>>, {
|
|
72
|
-
offset: unknown[];
|
|
73
|
-
popper: Record<string, any>;
|
|
74
|
-
placement: string;
|
|
75
|
-
title: string;
|
|
76
98
|
show: boolean;
|
|
77
99
|
top: boolean;
|
|
78
100
|
bottom: boolean;
|
|
79
101
|
left: boolean;
|
|
80
102
|
right: boolean;
|
|
81
|
-
}
|
|
103
|
+
}, {}>;
|
|
82
104
|
export default _sfc_main;
|
package/dist/tooltip.js
CHANGED
|
@@ -1,115 +1,80 @@
|
|
|
1
|
-
import { defineComponent as
|
|
2
|
-
import { createPopper as
|
|
3
|
-
const
|
|
1
|
+
import { defineComponent as B, ref as b, computed as y, onMounted as L, nextTick as O, onBeforeUnmount as S, openBlock as j, createElementBlock as k, normalizeClass as C, createElementVNode as x, renderSlot as F, createTextVNode as M, toDisplayString as R, h as I, render as P } from "vue";
|
|
2
|
+
import { createPopper as H } from "@popperjs/core";
|
|
3
|
+
const U = {
|
|
4
|
+
ref: "inner",
|
|
5
|
+
class: "tooltip-inner"
|
|
6
|
+
}, V = /* @__PURE__ */ B({
|
|
7
|
+
__name: "Tooltip",
|
|
4
8
|
props: {
|
|
5
|
-
offset: {
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
},
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
},
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
default: void 0
|
|
16
|
-
},
|
|
17
|
-
target: {
|
|
18
|
-
type: Element,
|
|
19
|
-
required: !0
|
|
20
|
-
},
|
|
21
|
-
title: {
|
|
22
|
-
type: String,
|
|
23
|
-
default: void 0
|
|
24
|
-
},
|
|
25
|
-
show: Boolean,
|
|
26
|
-
top: Boolean,
|
|
27
|
-
bottom: Boolean,
|
|
28
|
-
left: Boolean,
|
|
29
|
-
right: Boolean
|
|
30
|
-
},
|
|
31
|
-
data() {
|
|
32
|
-
return {
|
|
33
|
-
currentShow: !1,
|
|
34
|
-
popperInstance: null
|
|
35
|
-
};
|
|
9
|
+
offset: {},
|
|
10
|
+
popper: {},
|
|
11
|
+
placement: {},
|
|
12
|
+
target: {},
|
|
13
|
+
title: {},
|
|
14
|
+
show: { type: Boolean },
|
|
15
|
+
top: { type: Boolean },
|
|
16
|
+
bottom: { type: Boolean },
|
|
17
|
+
left: { type: Boolean },
|
|
18
|
+
right: { type: Boolean }
|
|
36
19
|
},
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
[`bs-tooltip-${this.computedPlacement}`]: !0
|
|
45
|
-
};
|
|
20
|
+
setup(d, { expose: h }) {
|
|
21
|
+
const n = d, u = b(), r = b(), a = b(!1), p = b(), v = y(() => n.placement ? n.placement : n.bottom ? "bottom" : n.left ? "left" : n.right ? "right" : "top"), T = y(() => ({
|
|
22
|
+
show: a,
|
|
23
|
+
[`bs-tooltip-${v.value}`]: !0
|
|
24
|
+
}));
|
|
25
|
+
function f() {
|
|
26
|
+
a.value = !0;
|
|
46
27
|
}
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
this.popperInstance = F(this.target, this.$el, Object.assign({
|
|
50
|
-
placement: this.computedPlacement,
|
|
51
|
-
modifiers: [
|
|
52
|
-
{
|
|
53
|
-
name: "offset",
|
|
54
|
-
options: {
|
|
55
|
-
offset: [0, 6]
|
|
56
|
-
}
|
|
57
|
-
},
|
|
58
|
-
{
|
|
59
|
-
name: "arrow",
|
|
60
|
-
options: {
|
|
61
|
-
element: this.$refs.arrow
|
|
62
|
-
}
|
|
63
|
-
}
|
|
64
|
-
]
|
|
65
|
-
}, this.popper)), this.$nextTick(() => {
|
|
66
|
-
this.currentShow = this.show;
|
|
67
|
-
});
|
|
68
|
-
},
|
|
69
|
-
beforeUnmount() {
|
|
70
|
-
this.popperInstance && this.popperInstance.destroy();
|
|
71
|
-
},
|
|
72
|
-
methods: {
|
|
73
|
-
open() {
|
|
74
|
-
this.currentShow = !0;
|
|
75
|
-
},
|
|
76
|
-
close() {
|
|
77
|
-
this.currentShow = !1;
|
|
28
|
+
function e() {
|
|
29
|
+
a.value = !1;
|
|
78
30
|
}
|
|
31
|
+
return h({
|
|
32
|
+
open: f,
|
|
33
|
+
close: e
|
|
34
|
+
}), L(() => {
|
|
35
|
+
var t, o;
|
|
36
|
+
u.value && (p.value = H(n.target, u.value, Object.assign({
|
|
37
|
+
placement: v.value,
|
|
38
|
+
modifiers: [
|
|
39
|
+
{
|
|
40
|
+
name: "offset",
|
|
41
|
+
options: {
|
|
42
|
+
offset: [((t = n.offset) == null ? void 0 : t.x) ?? 0, ((o = n.offset) == null ? void 0 : o.y) ?? 6]
|
|
43
|
+
}
|
|
44
|
+
},
|
|
45
|
+
{
|
|
46
|
+
name: "arrow",
|
|
47
|
+
options: {
|
|
48
|
+
element: r.value
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
]
|
|
52
|
+
}, n.popper)), O(() => {
|
|
53
|
+
a.value = n.show;
|
|
54
|
+
}));
|
|
55
|
+
}), S(() => {
|
|
56
|
+
p.value && p.value.destroy();
|
|
57
|
+
}), (t, o) => (j(), k("div", {
|
|
58
|
+
ref_key: "el",
|
|
59
|
+
ref: u,
|
|
60
|
+
class: C(["tooltip", T.value]),
|
|
61
|
+
role: "tooltip"
|
|
62
|
+
}, [
|
|
63
|
+
x("div", {
|
|
64
|
+
ref_key: "arrow",
|
|
65
|
+
ref: r,
|
|
66
|
+
class: "tooltip-arrow"
|
|
67
|
+
}, null, 512),
|
|
68
|
+
x("div", U, [
|
|
69
|
+
F(t.$slots, "default", {}, () => [
|
|
70
|
+
M(R(t.title), 1)
|
|
71
|
+
])
|
|
72
|
+
], 512)
|
|
73
|
+
], 2));
|
|
79
74
|
}
|
|
80
|
-
}), R = $({
|
|
81
|
-
mixins: [
|
|
82
|
-
I
|
|
83
|
-
]
|
|
84
75
|
});
|
|
85
|
-
|
|
86
|
-
const
|
|
87
|
-
for (const [u, i] of d)
|
|
88
|
-
c[u] = i;
|
|
89
|
-
return c;
|
|
90
|
-
}, M = {
|
|
91
|
-
ref: "arrow",
|
|
92
|
-
class: "tooltip-arrow"
|
|
93
|
-
}, q = {
|
|
94
|
-
ref: "inner",
|
|
95
|
-
class: "tooltip-inner"
|
|
96
|
-
};
|
|
97
|
-
function H(l, d, c, u, i, m) {
|
|
98
|
-
return S(), N("div", {
|
|
99
|
-
class: O(["tooltip", l.tooltipClasses]),
|
|
100
|
-
role: "tooltip"
|
|
101
|
-
}, [
|
|
102
|
-
_("div", M, null, 512),
|
|
103
|
-
_("div", q, [
|
|
104
|
-
L(l.$slots, "default", {}, () => [
|
|
105
|
-
j(B(l.title), 1)
|
|
106
|
-
])
|
|
107
|
-
], 512)
|
|
108
|
-
], 2);
|
|
109
|
-
}
|
|
110
|
-
const U = /* @__PURE__ */ k(R, [["render", H]]);
|
|
111
|
-
function z(l, d = {}) {
|
|
112
|
-
const c = /* @__PURE__ */ new Map(), u = Object.assign({
|
|
76
|
+
function z(d, h = {}) {
|
|
77
|
+
const n = /* @__PURE__ */ new Map(), u = Object.assign({
|
|
113
78
|
delay: void 0,
|
|
114
79
|
prefix: "data-tooltip",
|
|
115
80
|
progressiveEnhancement: !0,
|
|
@@ -117,87 +82,86 @@ function z(l, d = {}) {
|
|
|
117
82
|
open: ["mouseover:350"],
|
|
118
83
|
close: ["mouseout:100"]
|
|
119
84
|
}
|
|
120
|
-
},
|
|
121
|
-
function
|
|
122
|
-
return Array.from(e.attributes).map((t) => [t.name, t.value]).filter(([t]) => t === "title" || t.match(
|
|
85
|
+
}, h), r = u.prefix.replace(/[-]+$/, ""), a = new RegExp(`^${r}-`);
|
|
86
|
+
function p(e) {
|
|
87
|
+
return Array.from(e.attributes).map((t) => [t.name, t.value]).filter(([t]) => t === "title" || t.match(a)).map(([t, o]) => [t.replace(new RegExp(a), ""), o]).reduce((t, o) => Object.assign(t, { [o[0]]: o[1] }), {});
|
|
123
88
|
}
|
|
124
|
-
function
|
|
125
|
-
const
|
|
89
|
+
function v(e, t = {}, o) {
|
|
90
|
+
const l = document.createElement("template"), i = I(V, Object.assign({
|
|
126
91
|
target: e,
|
|
127
92
|
show: !0
|
|
128
93
|
}, t));
|
|
129
|
-
P(
|
|
130
|
-
const [
|
|
131
|
-
return document.body.append(
|
|
132
|
-
|
|
133
|
-
c.delete(o), (a = n.component) == null || a.ctx.close(), setTimeout(() => r.remove(), 150);
|
|
94
|
+
P(i, l);
|
|
95
|
+
const [s] = [...l.children];
|
|
96
|
+
return document.body.append(s), () => {
|
|
97
|
+
n.delete(o), window.setTimeout(() => s.remove(), 150);
|
|
134
98
|
};
|
|
135
99
|
}
|
|
136
100
|
function T(e) {
|
|
137
|
-
const t = e.getAttribute(`${
|
|
101
|
+
const t = e.getAttribute(`${r}-id`);
|
|
138
102
|
if (t) {
|
|
139
|
-
const o =
|
|
103
|
+
const o = n.get(t);
|
|
140
104
|
o == null || o();
|
|
141
105
|
}
|
|
142
106
|
}
|
|
143
|
-
function
|
|
144
|
-
var
|
|
107
|
+
function f(e, t = {}) {
|
|
108
|
+
var E, _;
|
|
145
109
|
const o = Object.assign({
|
|
146
|
-
title: e.getAttribute(
|
|
147
|
-
}, t,
|
|
148
|
-
if (!o.title || e.hasAttribute(`${
|
|
110
|
+
title: e.getAttribute(r) || e.getAttribute("title")
|
|
111
|
+
}, t, p(e));
|
|
112
|
+
if (!o.title || e.hasAttribute(`${r}-id`))
|
|
149
113
|
return;
|
|
150
|
-
const
|
|
151
|
-
let
|
|
152
|
-
e.setAttribute(`${
|
|
153
|
-
function
|
|
154
|
-
clearTimeout(
|
|
155
|
-
document.contains(e) && (
|
|
156
|
-
},
|
|
114
|
+
const l = Math.random().toString(36).slice(2, 7);
|
|
115
|
+
let i, s;
|
|
116
|
+
e.setAttribute(`${r}-id`, l), e.removeAttribute("title");
|
|
117
|
+
function g(c = 0) {
|
|
118
|
+
clearTimeout(s), i || (s = window.setTimeout(() => {
|
|
119
|
+
document.contains(e) && (i = v(e, o, l), n.set(l, i));
|
|
120
|
+
}, c));
|
|
157
121
|
}
|
|
158
|
-
function
|
|
159
|
-
clearTimeout(
|
|
160
|
-
|
|
161
|
-
},
|
|
122
|
+
function w(c = 0) {
|
|
123
|
+
clearTimeout(s), i && (s = setTimeout(() => {
|
|
124
|
+
i && i(), i = null;
|
|
125
|
+
}, c));
|
|
162
126
|
}
|
|
163
|
-
function
|
|
164
|
-
const [
|
|
165
|
-
e.addEventListener(
|
|
127
|
+
function m(c, A) {
|
|
128
|
+
const [$, N] = c.split(":");
|
|
129
|
+
e.addEventListener($, () => A(Number(N || 0)));
|
|
166
130
|
}
|
|
167
|
-
(((
|
|
131
|
+
(((E = e.getAttribute(`${r}-trigger-open`)) == null ? void 0 : E.split(",")) || u.triggers.open).map((c) => m(c, g)), (((_ = e.getAttribute(`${r}-trigger-close`)) == null ? void 0 : _.split(",")) || u.triggers.close).map((c) => m(c, w));
|
|
168
132
|
}
|
|
169
|
-
|
|
133
|
+
d.mixin({
|
|
170
134
|
mounted() {
|
|
171
135
|
if (!u.progressiveEnhancement)
|
|
172
136
|
return;
|
|
173
137
|
let e = this.$el;
|
|
174
|
-
this.$el instanceof Text && (e = this.$el.parentNode), e instanceof HTMLElement &&
|
|
138
|
+
this.$el instanceof Text && (e = this.$el.parentNode), e instanceof HTMLElement && f(e);
|
|
175
139
|
const t = document.createTreeWalker(
|
|
176
140
|
e,
|
|
177
141
|
NodeFilter.SHOW_ALL,
|
|
178
|
-
(
|
|
142
|
+
(l) => l instanceof Element ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT
|
|
179
143
|
);
|
|
180
144
|
for (; t.nextNode(); )
|
|
181
|
-
t.currentNode instanceof Element &&
|
|
182
|
-
new MutationObserver((
|
|
183
|
-
let
|
|
184
|
-
for (const { removedNodes:
|
|
185
|
-
for (const
|
|
186
|
-
if (
|
|
187
|
-
for (const
|
|
188
|
-
const
|
|
189
|
-
|
|
145
|
+
t.currentNode instanceof Element && f(t.currentNode);
|
|
146
|
+
new MutationObserver((l) => {
|
|
147
|
+
let i = !1;
|
|
148
|
+
for (const { removedNodes: s } of l)
|
|
149
|
+
for (const g of s)
|
|
150
|
+
if (g instanceof Element)
|
|
151
|
+
for (const w of g.querySelectorAll(`[${r}-id]`)) {
|
|
152
|
+
const m = n.get(
|
|
153
|
+
w.getAttribute(`${r}-id`)
|
|
190
154
|
);
|
|
191
|
-
|
|
155
|
+
m && (i = !0, m());
|
|
192
156
|
}
|
|
193
|
-
if (!
|
|
194
|
-
for (const
|
|
195
|
-
|
|
157
|
+
if (!i)
|
|
158
|
+
for (const s of n.values())
|
|
159
|
+
s();
|
|
196
160
|
}).observe(e, { childList: !0 });
|
|
197
161
|
}
|
|
198
|
-
}),
|
|
162
|
+
}), d.directive("tooltip", {
|
|
199
163
|
beforeMount(e, t) {
|
|
200
|
-
|
|
164
|
+
f(e, Object.assign({}, t.modifiers, t.value));
|
|
201
165
|
},
|
|
202
166
|
beforeUnmount(e) {
|
|
203
167
|
T(e);
|
|
@@ -205,7 +169,7 @@ function z(l, d = {}) {
|
|
|
205
169
|
});
|
|
206
170
|
}
|
|
207
171
|
export {
|
|
208
|
-
|
|
172
|
+
V as Tooltip,
|
|
209
173
|
z as TooltipPlugin
|
|
210
174
|
};
|
|
211
175
|
//# sourceMappingURL=tooltip.js.map
|
package/dist/tooltip.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tooltip.js","sources":["../src/Popper.ts","../src/Tooltip.vue","../src/TooltipPlugin.ts"],"sourcesContent":["import { createPopper } from '@popperjs/core';\nimport { defineComponent } from 'vue';\n\nexport default defineComponent({\n\n props: {\n offset: {\n type: Array,\n default: undefined\n },\n\n popper: {\n type: Object,\n default: undefined\n },\n\n placement: {\n type: String,\n default: undefined\n },\n\n target: {\n type: Element,\n required: true\n },\n\n title: {\n type: String,\n default: undefined\n },\n \n show: Boolean,\n \n top: Boolean,\n\n bottom: Boolean,\n\n left: Boolean,\n\n right: Boolean,\n },\n\n data() {\n return {\n currentShow: false,\n popperInstance: null\n };\n },\n\n computed: {\n computedPlacement() {\n if(this.placement) {\n return this.placement;\n }\n\n if(this.bottom) {\n return 'bottom';\n }\n\n if(this.left) {\n return 'left';\n }\n\n if(this.right) {\n return 'right';\n }\n\n return 'top';\n },\n tooltipClasses() {\n return {\n show: this.currentShow,\n [`bs-tooltip-${this.computedPlacement}`]: true\n };\n }\n },\n\n mounted() {\n this.popperInstance = createPopper(this.target, this.$el, Object.assign({\n placement: this.computedPlacement,\n modifiers: [\n {\n name: 'offset',\n options: {\n offset: [0, 6]\n },\n },\n {\n name: 'arrow',\n options: {\n element: this.$refs.arrow,\n },\n },\n ],\n }, this.popper));\n\n this.$nextTick(() => {\n this.currentShow = this.show;\n });\n },\n\n beforeUnmount() {\n this.popperInstance && this.popperInstance.destroy();\n },\n\n methods: {\n\n open() {\n this.currentShow = true;\n },\n\n close() {\n this.currentShow = false;\n }\n\n }\n\n});","<script lang=\"ts\">\nimport { defineComponent } from 'vue';\nimport Popper from './Popper';\n\nexport default defineComponent({\n mixins: [\n Popper\n ]\n});\n</script>\n\n<template>\n <div\n class=\"tooltip\"\n :class=\"tooltipClasses\"\n role=\"tooltip\">\n <div\n ref=\"arrow\"\n class=\"tooltip-arrow\" />\n <div\n ref=\"inner\"\n class=\"tooltip-inner\">\n <slot>{{ title }}</slot>\n </div>\n </div>\n</template>\n\n<style>\n.tooltip:not(.show) {\n z-index: -1;\n}\n</style>","import type { App } from 'vue';\nimport { h, render } from 'vue';\nimport Tooltip from './Tooltip.vue';\n\ntype TooltipPluginOptions = {\n delay?: number,\n prefix: string,\n progressiveEnhancement: boolean,\n triggers: {\n open: string[],\n close: string[],\n }\n}\n\nexport default function (app: App, opts: Partial<TooltipPluginOptions> = {}) {\n const tooltips: Map<string,Function> = new Map;\n\n const options: TooltipPluginOptions = Object.assign({\n delay: undefined,\n prefix: 'data-tooltip',\n progressiveEnhancement: true,\n triggers: {\n open: ['mouseover:350'],\n close: ['mouseout:100'],\n }\n }, opts);\n \n const prefix = options.prefix.replace(/[-]+$/, '');\n const prefixRegExp = new RegExp(`^${prefix}\\-`);\n\n function getAttributes(el: Element): Record<string,any> {\n return Array.from(el.attributes)\n .map(a => [a.name, a.value])\n .filter(([key]) => key === 'title' || key.match(prefixRegExp))\n .map(([key, value]) => [key.replace(new RegExp(prefixRegExp), ''), value])\n .reduce((carry, attr) => Object.assign(carry, { [attr[0]]: attr[1] }), {});\n }\n\n function createTooltip(target: Element, props: Record<string,any> = {}, hash: string): Function {\n const container = document.createElement('template');\n \n const vnode = h(Tooltip, Object.assign({\n target,\n show: true\n }, props));\n \n render(vnode, container);\n \n const [el] = [...container.children];\n \n document.body.append(el);\n \n return () => {\n tooltips.delete(hash);\n\n // @ts-ignore\n vnode.component?.ctx.close();\n \n // @todo: Make the animation rate (150) dynamic. Should get value \n // from the CSS transition duration.\n setTimeout(() => el.remove(), 150);\n };\n }\n\n function destroyTooltip(target: Element) {\n const id = target.getAttribute(`${prefix}-id`);\n if(id) {\n const tooltip = tooltips.get(id);\n tooltip?.();\n }\n }\n\n function init(target: Element, props = {}) {\n const properties: Record<string,any> = Object.assign({\n title: target.getAttribute(prefix) || target.getAttribute('title')\n }, props, getAttributes(target));\n\n // If the properties don't have a title, ignore this target.\n if(!properties.title || target.hasAttribute(`${prefix}-id`)) {\n return;\n }\n\n // Create a unique \"hash\" to show the node has been initialized.\n // This prevents double initializing on the same element.\n const hash = Math.random().toString(36).slice(2, 7);\n \n // Create the instance vars.\n let tooltip: Function|null, timer: number;\n\n //target.setAttribute(prefix, properties.title);\n target.setAttribute(`${prefix}-id`, hash);\n target.removeAttribute('title');\n\n function open(delay = 0) {\n clearTimeout(timer);\n\n if(!tooltip) {\n timer = setTimeout(() => {\n // Do a check before creating the tooltip to ensure the dom\n // element still exists. Its possible for the element to\n // be removed after the timeout delay runs.\n if(document.contains(target)) {\n tooltip = createTooltip(target, properties, hash);\n tooltips.set(hash, tooltip);\n }\n }, delay);\n }\n }\n\n function close(delay = 0) {\n clearTimeout(timer);\n\n if(tooltip) {\n timer = setTimeout(() => {\n tooltip && tooltip();\n tooltip = null;\n }, delay);\n }\n }\n\n function addEventListener(trigger: string, fn: Function) {\n const [ event, delayString ] = trigger.split(':');\n\n target.addEventListener(event, () => fn(Number(delayString || 0)));\n }\n\n (target.getAttribute(`${prefix}-trigger-open`)?.split(',') || options.triggers.open)\n .map(trigger => addEventListener(trigger, open));\n \n (target.getAttribute(`${prefix}-trigger-close`)?.split(',') || options.triggers.close)\n .map(trigger => addEventListener(trigger, close));\n }\n \n app.mixin({\n mounted() {\n if(!options.progressiveEnhancement) {\n return;\n }\n \n let el = this.$el;\n\n if(this.$el instanceof Text) {\n el = this.$el.parentNode;\n }\n\n if(el instanceof HTMLElement) {\n init(el);\n }\n\n // Create the tree walker.\n const walker = document.createTreeWalker(\n el,\n NodeFilter.SHOW_ALL,\n (node: Node) => {\n if(!(node instanceof Element)) {\n return NodeFilter.FILTER_REJECT;\n }\n \n return NodeFilter.FILTER_ACCEPT;\n }\n );\n\n // Step through and alert all child nodes\n while(walker.nextNode()) {\n if(walker.currentNode instanceof Element) {\n init(<Element> walker.currentNode);\n }\n }\n\n const observer = new MutationObserver((changes) => {\n\n let tooltipFound = false;\n for(const { removedNodes } of changes) {\n for(const node of removedNodes) {\n if(!(node instanceof Element)) {\n continue;\n }\n for(const el of node.querySelectorAll(`[${prefix}-id]`)) {\n const tooltip = tooltips.get(\n el.getAttribute(`${prefix}-id`) as string\n );\n if(tooltip) {\n tooltipFound = true;\n tooltip();\n }\n }\n } \n }\n\n // @experimental\n // In some cases in Inertia.js, not all tooltips are removed on certain actions.\n // remove all tooltips if no tooltip was found.\n if(!tooltipFound) {\n for(const tooltip of tooltips.values()) {\n tooltip();\n }\n }\n });\n\n observer.observe(el, { childList: true });\n },\n });\n\n app.directive('tooltip', {\n beforeMount(target, binding) {\n init(target, Object.assign({}, binding.modifiers, binding.value));\n },\n beforeUnmount(target) {\n destroyTooltip(target);\n }\n });\n}"],"names":["Popper","defineComponent","createPopper","_sfc_main","_hoisted_1","_hoisted_2","_sfc_render","_ctx","_cache","$props","$setup","$data","$options","_openBlock","_createElementBlock","_normalizeClass","_createElementVNode","_renderSlot","TooltipPlugin","app","opts","tooltips","options","prefix","prefixRegExp","getAttributes","el","a","key","value","carry","attr","createTooltip","target","props","hash","container","vnode","h","Tooltip","render","_a","destroyTooltip","id","tooltip","init","properties","timer","open","delay","close","addEventListener","trigger","fn","event","delayString","_b","walker","node","changes","tooltipFound","removedNodes","binding"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"tooltip.js","sources":["../src/Tooltip.vue","../src/TooltipPlugin.ts"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { Instance, Offsets, OptionsGeneric, createPopper } from '@popperjs/core';\nimport { computed, nextTick, onBeforeUnmount, onMounted, ref } from 'vue';\n\nconst props = defineProps<{\n offset?: Offsets,\n popper?: OptionsGeneric<unknown>,\n placement?: string,\n target: Element,\n title?: string,\n show?: boolean,\n top?: boolean,\n bottom?: boolean,\n left?: boolean,\n right?: boolean\n}>();\n\nconst el = ref<HTMLElement>();\nconst arrow = ref<HTMLElement>();\nconst currentShow = ref(false);\nconst popperInstance = ref<Instance>();\n\nconst placement = computed(() => {\n if(props.placement) {\n return props.placement;\n }\n\n if(props.bottom) {\n return 'bottom';\n }\n\n if(props.left) {\n return 'left';\n }\n\n if(props.right) {\n return 'right';\n }\n\n return 'top';\n});\n\nconst tooltipClasses = computed(() => {\n return {\n show: currentShow,\n [`bs-tooltip-${placement.value}`]: true\n };\n});\n\nfunction open() {\n currentShow.value = true;\n}\n\nfunction close() {\n currentShow.value = false;\n}\n\ndefineExpose({\n open, close\n});\n\nonMounted(() => {\n if(!el.value) {\n return;\n }\n\n popperInstance.value = createPopper(props.target, el.value, Object.assign({\n placement: placement.value,\n modifiers: [\n {\n name: 'offset',\n options: {\n offset: [props.offset?.x ?? 0, props.offset?.y ?? 6]\n },\n },\n {\n name: 'arrow',\n options: {\n element: arrow.value,\n },\n },\n ],\n }, props.popper));\n\n nextTick(() => {\n currentShow.value = props.show;\n });\n});\n\nonBeforeUnmount(()=> {\n popperInstance.value && popperInstance.value.destroy();\n});\n</script>\n\n<template>\n <div\n ref=\"el\"\n class=\"tooltip\"\n :class=\"tooltipClasses\"\n role=\"tooltip\">\n <div\n ref=\"arrow\"\n class=\"tooltip-arrow\" />\n <div\n ref=\"inner\"\n class=\"tooltip-inner\">\n <slot>{{ title }}</slot>\n </div>\n </div>\n</template>\n\n<style>\n.tooltip:not(.show) {\n z-index: -1;\n}\n</style>","import type { App } from 'vue';\nimport { h, render } from 'vue';\nimport Tooltip from './Tooltip.vue';\n\ntype TooltipPluginOptions = {\n delay?: number,\n prefix: string,\n progressiveEnhancement: boolean,\n triggers: {\n open: string[],\n close: string[],\n }\n}\n\nexport default function (app: App, opts: Partial<TooltipPluginOptions> = {}) {\n const tooltips: Map<string,Function> = new Map;\n\n const options: TooltipPluginOptions = Object.assign({\n delay: undefined,\n prefix: 'data-tooltip',\n progressiveEnhancement: true,\n triggers: {\n open: ['mouseover:350'],\n close: ['mouseout:100'],\n }\n }, opts);\n \n const prefix = options.prefix.replace(/[-]+$/, '');\n const prefixRegExp = new RegExp(`^${prefix}\\-`);\n\n function getAttributes(el: Element): Record<string,string> {\n return Array.from(el.attributes)\n .map(a => [a.name, a.value])\n .filter(([key]) => key === 'title' || key.match(prefixRegExp))\n .map(([key, value]) => [key.replace(new RegExp(prefixRegExp), ''), value])\n .reduce((carry, attr) => Object.assign(carry, { [attr[0]]: attr[1] }), {});\n }\n\n function createTooltip(target: Element, props: Record<string,string> = {}, hash: string): Function {\n const container = document.createElement('template');\n \n const vnode = h(Tooltip, Object.assign({\n target,\n show: true\n }, props));\n \n render(vnode, container);\n \n const [el] = [...container.children];\n \n document.body.append(el);\n \n return () => {\n tooltips.delete(hash);\n\n // vnode.component?.close();\n \n // @todo: Make the animation rate (150) dynamic. Should get value \n // from the CSS transition duration.\n window.setTimeout(() => el.remove(), 150);\n };\n }\n\n function destroyTooltip(target: Element) {\n const id = target.getAttribute(`${prefix}-id`);\n if(id) {\n const tooltip = tooltips.get(id);\n tooltip?.();\n }\n }\n\n function init(target: Element, props = {}) {\n const properties: Record<string,string> = Object.assign({\n title: target.getAttribute(prefix) || target.getAttribute('title')\n }, props, getAttributes(target));\n\n // If the properties don't have a title, ignore this target.\n if(!properties.title || target.hasAttribute(`${prefix}-id`)) {\n return;\n }\n\n // Create a unique \"hash\" to show the node has been initialized.\n // This prevents double initializing on the same element.\n const hash = Math.random().toString(36).slice(2, 7);\n \n // Create the instance vars.\n let tooltip: Function|null, timer: number;\n\n //target.setAttribute(prefix, properties.title);\n target.setAttribute(`${prefix}-id`, hash);\n target.removeAttribute('title');\n\n function open(delay = 0) {\n clearTimeout(timer);\n\n if(!tooltip) {\n timer = window.setTimeout(() => {\n // Do a check before creating the tooltip to ensure the dom\n // element still exists. Its possible for the element to\n // be removed after the timeout delay runs.\n if(document.contains(target)) {\n tooltip = createTooltip(target, properties, hash);\n tooltips.set(hash, tooltip);\n }\n }, delay);\n }\n }\n\n function close(delay = 0) {\n clearTimeout(timer);\n\n if(tooltip) {\n timer = setTimeout(() => {\n tooltip && tooltip();\n tooltip = null;\n }, delay);\n }\n }\n\n function addEventListener(trigger: string, fn: Function) {\n const [ event, delayString ] = trigger.split(':');\n\n target.addEventListener(event, () => fn(Number(delayString || 0)));\n }\n\n (target.getAttribute(`${prefix}-trigger-open`)?.split(',') || options.triggers.open)\n .map(trigger => addEventListener(trigger, open));\n \n (target.getAttribute(`${prefix}-trigger-close`)?.split(',') || options.triggers.close)\n .map(trigger => addEventListener(trigger, close));\n }\n \n app.mixin({\n mounted() {\n if(!options.progressiveEnhancement) {\n return;\n }\n \n let el = this.$el;\n\n if(this.$el instanceof Text) {\n el = this.$el.parentNode;\n }\n\n if(el instanceof HTMLElement) {\n init(el);\n }\n\n // Create the tree walker.\n const walker = document.createTreeWalker(\n el,\n NodeFilter.SHOW_ALL,\n (node: Node) => {\n if(!(node instanceof Element)) {\n return NodeFilter.FILTER_REJECT;\n }\n \n return NodeFilter.FILTER_ACCEPT;\n }\n );\n\n // Step through and alert all child nodes\n while(walker.nextNode()) {\n if(walker.currentNode instanceof Element) {\n init(<Element> walker.currentNode);\n }\n }\n\n const observer = new MutationObserver((changes) => {\n\n let tooltipFound = false;\n for(const { removedNodes } of changes) {\n for(const node of removedNodes) {\n if(!(node instanceof Element)) {\n continue;\n }\n for(const el of node.querySelectorAll(`[${prefix}-id]`)) {\n const tooltip = tooltips.get(\n el.getAttribute(`${prefix}-id`) as string\n );\n if(tooltip) {\n tooltipFound = true;\n tooltip();\n }\n }\n } \n }\n\n // @experimental\n // In some cases in Inertia.js, not all tooltips are removed on certain actions.\n // remove all tooltips if no tooltip was found.\n if(!tooltipFound) {\n for(const tooltip of tooltips.values()) {\n tooltip();\n }\n }\n });\n\n observer.observe(el, { childList: true });\n },\n });\n\n app.directive('tooltip', {\n beforeMount(target, binding) {\n init(target, Object.assign({}, binding.modifiers, binding.value));\n },\n beforeUnmount(target) {\n destroyTooltip(target);\n }\n });\n}"],"names":["el","ref","arrow","currentShow","popperInstance","placement","computed","props","tooltipClasses","open","close","__expose","onMounted","createPopper","_a","_b","nextTick","onBeforeUnmount","TooltipPlugin","app","opts","tooltips","options","prefix","prefixRegExp","getAttributes","a","key","value","carry","attr","createTooltip","target","hash","container","vnode","h","Tooltip","render","destroyTooltip","id","tooltip","init","properties","timer","delay","addEventListener","trigger","fn","event","delayString","walker","node","changes","tooltipFound","removedNodes","binding"],"mappings":"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"}
|
package/dist/tooltip.umd.cjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
(function(
|
|
1
|
+
(function(p,o){typeof exports=="object"&&typeof module<"u"?o(exports,require("vue"),require("@popperjs/core")):typeof define=="function"&&define.amd?define(["exports","vue","@popperjs/core"],o):(p=typeof globalThis<"u"?globalThis:p||self,o(p.Tooltip={},p.Vue,p.PopperjsCore))})(this,function(p,o,A){"use strict";const $={ref:"inner",class:"tooltip-inner"},w=o.defineComponent({__name:"Tooltip",props:{offset:{},popper:{},placement:{},target:{},title:{},show:{type:Boolean},top:{type:Boolean},bottom:{type:Boolean},left:{type:Boolean},right:{type:Boolean}},setup(b,{expose:y}){const i=b,u=o.ref(),r=o.ref(),a=o.ref(!1),d=o.ref(),h=o.computed(()=>i.placement?i.placement:i.bottom?"bottom":i.left?"left":i.right?"right":"top"),v=o.computed(()=>({show:a,[`bs-tooltip-${h.value}`]:!0}));function m(){a.value=!0}function e(){a.value=!1}return y({open:m,close:e}),o.onMounted(()=>{var t,n;u.value&&(d.value=A.createPopper(i.target,u.value,Object.assign({placement:h.value,modifiers:[{name:"offset",options:{offset:[((t=i.offset)==null?void 0:t.x)??0,((n=i.offset)==null?void 0:n.y)??6]}},{name:"arrow",options:{element:r.value}}]},i.popper)),o.nextTick(()=>{a.value=i.show}))}),o.onBeforeUnmount(()=>{d.value&&d.value.destroy()}),(t,n)=>(o.openBlock(),o.createElementBlock("div",{ref_key:"el",ref:u,class:o.normalizeClass(["tooltip",v.value]),role:"tooltip"},[o.createElementVNode("div",{ref_key:"arrow",ref:r,class:"tooltip-arrow"},null,512),o.createElementVNode("div",$,[o.renderSlot(t.$slots,"default",{},()=>[o.createTextVNode(o.toDisplayString(t.title),1)])],512)],2))}}),B="";function N(b,y={}){const i=new Map,u=Object.assign({delay:void 0,prefix:"data-tooltip",progressiveEnhancement:!0,triggers:{open:["mouseover:350"],close:["mouseout:100"]}},y),r=u.prefix.replace(/[-]+$/,""),a=new RegExp(`^${r}-`);function d(e){return Array.from(e.attributes).map(t=>[t.name,t.value]).filter(([t])=>t==="title"||t.match(a)).map(([t,n])=>[t.replace(new RegExp(a),""),n]).reduce((t,n)=>Object.assign(t,{[n[0]]:n[1]}),{})}function h(e,t={},n){const c=document.createElement("template"),s=o.h(w,Object.assign({target:e,show:!0},t));o.render(s,c);const[l]=[...c.children];return document.body.append(l),()=>{i.delete(n),window.setTimeout(()=>l.remove(),150)}}function v(e){const t=e.getAttribute(`${r}-id`);if(t){const n=i.get(t);n==null||n()}}function m(e,t={}){var _,x;const n=Object.assign({title:e.getAttribute(r)||e.getAttribute("title")},t,d(e));if(!n.title||e.hasAttribute(`${r}-id`))return;const c=Math.random().toString(36).slice(2,7);let s,l;e.setAttribute(`${r}-id`,c),e.removeAttribute("title");function T(f=0){clearTimeout(l),s||(l=window.setTimeout(()=>{document.contains(e)&&(s=h(e,n,c),i.set(c,s))},f))}function E(f=0){clearTimeout(l),s&&(l=setTimeout(()=>{s&&s(),s=null},f))}function g(f,j){const[O,S]=f.split(":");e.addEventListener(O,()=>j(Number(S||0)))}(((_=e.getAttribute(`${r}-trigger-open`))==null?void 0:_.split(","))||u.triggers.open).map(f=>g(f,T)),(((x=e.getAttribute(`${r}-trigger-close`))==null?void 0:x.split(","))||u.triggers.close).map(f=>g(f,E))}b.mixin({mounted(){if(!u.progressiveEnhancement)return;let e=this.$el;this.$el instanceof Text&&(e=this.$el.parentNode),e instanceof HTMLElement&&m(e);const t=document.createTreeWalker(e,NodeFilter.SHOW_ALL,c=>c instanceof Element?NodeFilter.FILTER_ACCEPT:NodeFilter.FILTER_REJECT);for(;t.nextNode();)t.currentNode instanceof Element&&m(t.currentNode);new MutationObserver(c=>{let s=!1;for(const{removedNodes:l}of c)for(const T of l)if(T instanceof Element)for(const E of T.querySelectorAll(`[${r}-id]`)){const g=i.get(E.getAttribute(`${r}-id`));g&&(s=!0,g())}if(!s)for(const l of i.values())l()}).observe(e,{childList:!0})}}),b.directive("tooltip",{beforeMount(e,t){m(e,Object.assign({},t.modifiers,t.value))},beforeUnmount(e){v(e)}})}p.Tooltip=w,p.TooltipPlugin=N,Object.defineProperty(p,Symbol.toStringTag,{value:"Module"})});
|
|
2
2
|
//# sourceMappingURL=tooltip.umd.cjs.map
|
package/dist/tooltip.umd.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tooltip.umd.cjs","sources":["../src/Popper.ts","../src/Tooltip.vue","../src/TooltipPlugin.ts"],"sourcesContent":["import { createPopper } from '@popperjs/core';\nimport { defineComponent } from 'vue';\n\nexport default defineComponent({\n\n props: {\n offset: {\n type: Array,\n default: undefined\n },\n\n popper: {\n type: Object,\n default: undefined\n },\n\n placement: {\n type: String,\n default: undefined\n },\n\n target: {\n type: Element,\n required: true\n },\n\n title: {\n type: String,\n default: undefined\n },\n \n show: Boolean,\n \n top: Boolean,\n\n bottom: Boolean,\n\n left: Boolean,\n\n right: Boolean,\n },\n\n data() {\n return {\n currentShow: false,\n popperInstance: null\n };\n },\n\n computed: {\n computedPlacement() {\n if(this.placement) {\n return this.placement;\n }\n\n if(this.bottom) {\n return 'bottom';\n }\n\n if(this.left) {\n return 'left';\n }\n\n if(this.right) {\n return 'right';\n }\n\n return 'top';\n },\n tooltipClasses() {\n return {\n show: this.currentShow,\n [`bs-tooltip-${this.computedPlacement}`]: true\n };\n }\n },\n\n mounted() {\n this.popperInstance = createPopper(this.target, this.$el, Object.assign({\n placement: this.computedPlacement,\n modifiers: [\n {\n name: 'offset',\n options: {\n offset: [0, 6]\n },\n },\n {\n name: 'arrow',\n options: {\n element: this.$refs.arrow,\n },\n },\n ],\n }, this.popper));\n\n this.$nextTick(() => {\n this.currentShow = this.show;\n });\n },\n\n beforeUnmount() {\n this.popperInstance && this.popperInstance.destroy();\n },\n\n methods: {\n\n open() {\n this.currentShow = true;\n },\n\n close() {\n this.currentShow = false;\n }\n\n }\n\n});","<script lang=\"ts\">\nimport { defineComponent } from 'vue';\nimport Popper from './Popper';\n\nexport default defineComponent({\n mixins: [\n Popper\n ]\n});\n</script>\n\n<template>\n <div\n class=\"tooltip\"\n :class=\"tooltipClasses\"\n role=\"tooltip\">\n <div\n ref=\"arrow\"\n class=\"tooltip-arrow\" />\n <div\n ref=\"inner\"\n class=\"tooltip-inner\">\n <slot>{{ title }}</slot>\n </div>\n </div>\n</template>\n\n<style>\n.tooltip:not(.show) {\n z-index: -1;\n}\n</style>","import type { App } from 'vue';\nimport { h, render } from 'vue';\nimport Tooltip from './Tooltip.vue';\n\ntype TooltipPluginOptions = {\n delay?: number,\n prefix: string,\n progressiveEnhancement: boolean,\n triggers: {\n open: string[],\n close: string[],\n }\n}\n\nexport default function (app: App, opts: Partial<TooltipPluginOptions> = {}) {\n const tooltips: Map<string,Function> = new Map;\n\n const options: TooltipPluginOptions = Object.assign({\n delay: undefined,\n prefix: 'data-tooltip',\n progressiveEnhancement: true,\n triggers: {\n open: ['mouseover:350'],\n close: ['mouseout:100'],\n }\n }, opts);\n \n const prefix = options.prefix.replace(/[-]+$/, '');\n const prefixRegExp = new RegExp(`^${prefix}\\-`);\n\n function getAttributes(el: Element): Record<string,any> {\n return Array.from(el.attributes)\n .map(a => [a.name, a.value])\n .filter(([key]) => key === 'title' || key.match(prefixRegExp))\n .map(([key, value]) => [key.replace(new RegExp(prefixRegExp), ''), value])\n .reduce((carry, attr) => Object.assign(carry, { [attr[0]]: attr[1] }), {});\n }\n\n function createTooltip(target: Element, props: Record<string,any> = {}, hash: string): Function {\n const container = document.createElement('template');\n \n const vnode = h(Tooltip, Object.assign({\n target,\n show: true\n }, props));\n \n render(vnode, container);\n \n const [el] = [...container.children];\n \n document.body.append(el);\n \n return () => {\n tooltips.delete(hash);\n\n // @ts-ignore\n vnode.component?.ctx.close();\n \n // @todo: Make the animation rate (150) dynamic. Should get value \n // from the CSS transition duration.\n setTimeout(() => el.remove(), 150);\n };\n }\n\n function destroyTooltip(target: Element) {\n const id = target.getAttribute(`${prefix}-id`);\n if(id) {\n const tooltip = tooltips.get(id);\n tooltip?.();\n }\n }\n\n function init(target: Element, props = {}) {\n const properties: Record<string,any> = Object.assign({\n title: target.getAttribute(prefix) || target.getAttribute('title')\n }, props, getAttributes(target));\n\n // If the properties don't have a title, ignore this target.\n if(!properties.title || target.hasAttribute(`${prefix}-id`)) {\n return;\n }\n\n // Create a unique \"hash\" to show the node has been initialized.\n // This prevents double initializing on the same element.\n const hash = Math.random().toString(36).slice(2, 7);\n \n // Create the instance vars.\n let tooltip: Function|null, timer: number;\n\n //target.setAttribute(prefix, properties.title);\n target.setAttribute(`${prefix}-id`, hash);\n target.removeAttribute('title');\n\n function open(delay = 0) {\n clearTimeout(timer);\n\n if(!tooltip) {\n timer = setTimeout(() => {\n // Do a check before creating the tooltip to ensure the dom\n // element still exists. Its possible for the element to\n // be removed after the timeout delay runs.\n if(document.contains(target)) {\n tooltip = createTooltip(target, properties, hash);\n tooltips.set(hash, tooltip);\n }\n }, delay);\n }\n }\n\n function close(delay = 0) {\n clearTimeout(timer);\n\n if(tooltip) {\n timer = setTimeout(() => {\n tooltip && tooltip();\n tooltip = null;\n }, delay);\n }\n }\n\n function addEventListener(trigger: string, fn: Function) {\n const [ event, delayString ] = trigger.split(':');\n\n target.addEventListener(event, () => fn(Number(delayString || 0)));\n }\n\n (target.getAttribute(`${prefix}-trigger-open`)?.split(',') || options.triggers.open)\n .map(trigger => addEventListener(trigger, open));\n \n (target.getAttribute(`${prefix}-trigger-close`)?.split(',') || options.triggers.close)\n .map(trigger => addEventListener(trigger, close));\n }\n \n app.mixin({\n mounted() {\n if(!options.progressiveEnhancement) {\n return;\n }\n \n let el = this.$el;\n\n if(this.$el instanceof Text) {\n el = this.$el.parentNode;\n }\n\n if(el instanceof HTMLElement) {\n init(el);\n }\n\n // Create the tree walker.\n const walker = document.createTreeWalker(\n el,\n NodeFilter.SHOW_ALL,\n (node: Node) => {\n if(!(node instanceof Element)) {\n return NodeFilter.FILTER_REJECT;\n }\n \n return NodeFilter.FILTER_ACCEPT;\n }\n );\n\n // Step through and alert all child nodes\n while(walker.nextNode()) {\n if(walker.currentNode instanceof Element) {\n init(<Element> walker.currentNode);\n }\n }\n\n const observer = new MutationObserver((changes) => {\n\n let tooltipFound = false;\n for(const { removedNodes } of changes) {\n for(const node of removedNodes) {\n if(!(node instanceof Element)) {\n continue;\n }\n for(const el of node.querySelectorAll(`[${prefix}-id]`)) {\n const tooltip = tooltips.get(\n el.getAttribute(`${prefix}-id`) as string\n );\n if(tooltip) {\n tooltipFound = true;\n tooltip();\n }\n }\n } \n }\n\n // @experimental\n // In some cases in Inertia.js, not all tooltips are removed on certain actions.\n // remove all tooltips if no tooltip was found.\n if(!tooltipFound) {\n for(const tooltip of tooltips.values()) {\n tooltip();\n }\n }\n });\n\n observer.observe(el, { childList: true });\n },\n });\n\n app.directive('tooltip', {\n beforeMount(target, binding) {\n init(target, Object.assign({}, binding.modifiers, binding.value));\n },\n beforeUnmount(target) {\n destroyTooltip(target);\n }\n });\n}"],"names":["Popper","defineComponent","createPopper","_sfc_main","_hoisted_1","_hoisted_2","_sfc_render","_ctx","_cache","$props","$setup","$data","$options","_openBlock","_createElementBlock","_normalizeClass","_createElementVNode","_renderSlot","TooltipPlugin","app","opts","tooltips","options","prefix","prefixRegExp","getAttributes","el","a","key","value","carry","attr","createTooltip","target","props","hash","container","vnode","h","Tooltip","render","_a","destroyTooltip","id","tooltip","init","properties","timer","open","delay","close","addEventListener","trigger","fn","event","delayString","_b","walker","node","changes","tooltipFound","removedNodes","binding"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"tooltip.umd.cjs","sources":["../src/Tooltip.vue","../src/TooltipPlugin.ts"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { Instance, Offsets, OptionsGeneric, createPopper } from '@popperjs/core';\nimport { computed, nextTick, onBeforeUnmount, onMounted, ref } from 'vue';\n\nconst props = defineProps<{\n offset?: Offsets,\n popper?: OptionsGeneric<unknown>,\n placement?: string,\n target: Element,\n title?: string,\n show?: boolean,\n top?: boolean,\n bottom?: boolean,\n left?: boolean,\n right?: boolean\n}>();\n\nconst el = ref<HTMLElement>();\nconst arrow = ref<HTMLElement>();\nconst currentShow = ref(false);\nconst popperInstance = ref<Instance>();\n\nconst placement = computed(() => {\n if(props.placement) {\n return props.placement;\n }\n\n if(props.bottom) {\n return 'bottom';\n }\n\n if(props.left) {\n return 'left';\n }\n\n if(props.right) {\n return 'right';\n }\n\n return 'top';\n});\n\nconst tooltipClasses = computed(() => {\n return {\n show: currentShow,\n [`bs-tooltip-${placement.value}`]: true\n };\n});\n\nfunction open() {\n currentShow.value = true;\n}\n\nfunction close() {\n currentShow.value = false;\n}\n\ndefineExpose({\n open, close\n});\n\nonMounted(() => {\n if(!el.value) {\n return;\n }\n\n popperInstance.value = createPopper(props.target, el.value, Object.assign({\n placement: placement.value,\n modifiers: [\n {\n name: 'offset',\n options: {\n offset: [props.offset?.x ?? 0, props.offset?.y ?? 6]\n },\n },\n {\n name: 'arrow',\n options: {\n element: arrow.value,\n },\n },\n ],\n }, props.popper));\n\n nextTick(() => {\n currentShow.value = props.show;\n });\n});\n\nonBeforeUnmount(()=> {\n popperInstance.value && popperInstance.value.destroy();\n});\n</script>\n\n<template>\n <div\n ref=\"el\"\n class=\"tooltip\"\n :class=\"tooltipClasses\"\n role=\"tooltip\">\n <div\n ref=\"arrow\"\n class=\"tooltip-arrow\" />\n <div\n ref=\"inner\"\n class=\"tooltip-inner\">\n <slot>{{ title }}</slot>\n </div>\n </div>\n</template>\n\n<style>\n.tooltip:not(.show) {\n z-index: -1;\n}\n</style>","import type { App } from 'vue';\nimport { h, render } from 'vue';\nimport Tooltip from './Tooltip.vue';\n\ntype TooltipPluginOptions = {\n delay?: number,\n prefix: string,\n progressiveEnhancement: boolean,\n triggers: {\n open: string[],\n close: string[],\n }\n}\n\nexport default function (app: App, opts: Partial<TooltipPluginOptions> = {}) {\n const tooltips: Map<string,Function> = new Map;\n\n const options: TooltipPluginOptions = Object.assign({\n delay: undefined,\n prefix: 'data-tooltip',\n progressiveEnhancement: true,\n triggers: {\n open: ['mouseover:350'],\n close: ['mouseout:100'],\n }\n }, opts);\n \n const prefix = options.prefix.replace(/[-]+$/, '');\n const prefixRegExp = new RegExp(`^${prefix}\\-`);\n\n function getAttributes(el: Element): Record<string,string> {\n return Array.from(el.attributes)\n .map(a => [a.name, a.value])\n .filter(([key]) => key === 'title' || key.match(prefixRegExp))\n .map(([key, value]) => [key.replace(new RegExp(prefixRegExp), ''), value])\n .reduce((carry, attr) => Object.assign(carry, { [attr[0]]: attr[1] }), {});\n }\n\n function createTooltip(target: Element, props: Record<string,string> = {}, hash: string): Function {\n const container = document.createElement('template');\n \n const vnode = h(Tooltip, Object.assign({\n target,\n show: true\n }, props));\n \n render(vnode, container);\n \n const [el] = [...container.children];\n \n document.body.append(el);\n \n return () => {\n tooltips.delete(hash);\n\n // vnode.component?.close();\n \n // @todo: Make the animation rate (150) dynamic. Should get value \n // from the CSS transition duration.\n window.setTimeout(() => el.remove(), 150);\n };\n }\n\n function destroyTooltip(target: Element) {\n const id = target.getAttribute(`${prefix}-id`);\n if(id) {\n const tooltip = tooltips.get(id);\n tooltip?.();\n }\n }\n\n function init(target: Element, props = {}) {\n const properties: Record<string,string> = Object.assign({\n title: target.getAttribute(prefix) || target.getAttribute('title')\n }, props, getAttributes(target));\n\n // If the properties don't have a title, ignore this target.\n if(!properties.title || target.hasAttribute(`${prefix}-id`)) {\n return;\n }\n\n // Create a unique \"hash\" to show the node has been initialized.\n // This prevents double initializing on the same element.\n const hash = Math.random().toString(36).slice(2, 7);\n \n // Create the instance vars.\n let tooltip: Function|null, timer: number;\n\n //target.setAttribute(prefix, properties.title);\n target.setAttribute(`${prefix}-id`, hash);\n target.removeAttribute('title');\n\n function open(delay = 0) {\n clearTimeout(timer);\n\n if(!tooltip) {\n timer = window.setTimeout(() => {\n // Do a check before creating the tooltip to ensure the dom\n // element still exists. Its possible for the element to\n // be removed after the timeout delay runs.\n if(document.contains(target)) {\n tooltip = createTooltip(target, properties, hash);\n tooltips.set(hash, tooltip);\n }\n }, delay);\n }\n }\n\n function close(delay = 0) {\n clearTimeout(timer);\n\n if(tooltip) {\n timer = setTimeout(() => {\n tooltip && tooltip();\n tooltip = null;\n }, delay);\n }\n }\n\n function addEventListener(trigger: string, fn: Function) {\n const [ event, delayString ] = trigger.split(':');\n\n target.addEventListener(event, () => fn(Number(delayString || 0)));\n }\n\n (target.getAttribute(`${prefix}-trigger-open`)?.split(',') || options.triggers.open)\n .map(trigger => addEventListener(trigger, open));\n \n (target.getAttribute(`${prefix}-trigger-close`)?.split(',') || options.triggers.close)\n .map(trigger => addEventListener(trigger, close));\n }\n \n app.mixin({\n mounted() {\n if(!options.progressiveEnhancement) {\n return;\n }\n \n let el = this.$el;\n\n if(this.$el instanceof Text) {\n el = this.$el.parentNode;\n }\n\n if(el instanceof HTMLElement) {\n init(el);\n }\n\n // Create the tree walker.\n const walker = document.createTreeWalker(\n el,\n NodeFilter.SHOW_ALL,\n (node: Node) => {\n if(!(node instanceof Element)) {\n return NodeFilter.FILTER_REJECT;\n }\n \n return NodeFilter.FILTER_ACCEPT;\n }\n );\n\n // Step through and alert all child nodes\n while(walker.nextNode()) {\n if(walker.currentNode instanceof Element) {\n init(<Element> walker.currentNode);\n }\n }\n\n const observer = new MutationObserver((changes) => {\n\n let tooltipFound = false;\n for(const { removedNodes } of changes) {\n for(const node of removedNodes) {\n if(!(node instanceof Element)) {\n continue;\n }\n for(const el of node.querySelectorAll(`[${prefix}-id]`)) {\n const tooltip = tooltips.get(\n el.getAttribute(`${prefix}-id`) as string\n );\n if(tooltip) {\n tooltipFound = true;\n tooltip();\n }\n }\n } \n }\n\n // @experimental\n // In some cases in Inertia.js, not all tooltips are removed on certain actions.\n // remove all tooltips if no tooltip was found.\n if(!tooltipFound) {\n for(const tooltip of tooltips.values()) {\n tooltip();\n }\n }\n });\n\n observer.observe(el, { childList: true });\n },\n });\n\n app.directive('tooltip', {\n beforeMount(target, binding) {\n init(target, Object.assign({}, binding.modifiers, binding.value));\n },\n beforeUnmount(target) {\n destroyTooltip(target);\n }\n });\n}"],"names":["el","ref","arrow","currentShow","popperInstance","placement","computed","props","tooltipClasses","open","close","__expose","onMounted","createPopper","_a","_b","nextTick","onBeforeUnmount","TooltipPlugin","app","opts","tooltips","options","prefix","prefixRegExp","getAttributes","a","key","value","carry","attr","createTooltip","target","hash","container","vnode","h","Tooltip","render","destroyTooltip","id","tooltip","init","properties","timer","delay","addEventListener","trigger","fn","event","delayString","walker","node","changes","tooltipFound","removedNodes","binding"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vue-interface/tooltip",
|
|
3
|
-
"version": "1.0.0-beta.
|
|
3
|
+
"version": "1.0.0-beta.15",
|
|
4
4
|
"description": "A Vue tooltip component.",
|
|
5
5
|
"files": [
|
|
6
6
|
"index.ts",
|
|
@@ -50,19 +50,26 @@
|
|
|
50
50
|
"vue": "^3.0.0"
|
|
51
51
|
},
|
|
52
52
|
"devDependencies": {
|
|
53
|
-
"@
|
|
54
|
-
"@
|
|
55
|
-
"@
|
|
56
|
-
"
|
|
53
|
+
"@commitlint/config-conventional": "^17.7.0",
|
|
54
|
+
"@semantic-release/changelog": "^6.0.3",
|
|
55
|
+
"@semantic-release/git": "^10.0.1",
|
|
56
|
+
"@semantic-release/npm": "^10.0.4",
|
|
57
|
+
"@vitejs/plugin-vue": "^4.2.3",
|
|
58
|
+
"@vue-interface/eslint-config": "1.0.0-beta.4",
|
|
59
|
+
"autoprefixer": "^10.4.15",
|
|
57
60
|
"change-case": "^4.1.2",
|
|
58
|
-
"
|
|
61
|
+
"commitlint": "^17.7.1",
|
|
62
|
+
"dotenv": "^16.3.1",
|
|
63
|
+
"eslint": "^8.47.0",
|
|
64
|
+
"husky": "^8.0.3",
|
|
59
65
|
"pascalcase": "^2.0.0",
|
|
60
|
-
"postcss": "^8.4.
|
|
61
|
-
"
|
|
62
|
-
"
|
|
63
|
-
"
|
|
64
|
-
"vite
|
|
65
|
-
"
|
|
66
|
-
"vue
|
|
66
|
+
"postcss": "^8.4.28",
|
|
67
|
+
"semantic-release": "^21.0.7",
|
|
68
|
+
"tailwindcss": "^3.3.3",
|
|
69
|
+
"typescript": "^4.9.5",
|
|
70
|
+
"vite": "^4.4.9",
|
|
71
|
+
"vite-plugin-dts": "^1.7.3",
|
|
72
|
+
"vue": "^3.3.4",
|
|
73
|
+
"vue-router": "^4.2"
|
|
67
74
|
}
|
|
68
75
|
}
|
package/src/Tooltip.vue
CHANGED
|
@@ -1,16 +1,100 @@
|
|
|
1
|
-
<script lang="ts">
|
|
2
|
-
import {
|
|
3
|
-
import
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
1
|
+
<script lang="ts" setup>
|
|
2
|
+
import { Instance, Offsets, OptionsGeneric, createPopper } from '@popperjs/core';
|
|
3
|
+
import { computed, nextTick, onBeforeUnmount, onMounted, ref } from 'vue';
|
|
4
|
+
|
|
5
|
+
const props = defineProps<{
|
|
6
|
+
offset?: Offsets,
|
|
7
|
+
popper?: OptionsGeneric<unknown>,
|
|
8
|
+
placement?: string,
|
|
9
|
+
target: Element,
|
|
10
|
+
title?: string,
|
|
11
|
+
show?: boolean,
|
|
12
|
+
top?: boolean,
|
|
13
|
+
bottom?: boolean,
|
|
14
|
+
left?: boolean,
|
|
15
|
+
right?: boolean
|
|
16
|
+
}>();
|
|
17
|
+
|
|
18
|
+
const el = ref<HTMLElement>();
|
|
19
|
+
const arrow = ref<HTMLElement>();
|
|
20
|
+
const currentShow = ref(false);
|
|
21
|
+
const popperInstance = ref<Instance>();
|
|
22
|
+
|
|
23
|
+
const placement = computed(() => {
|
|
24
|
+
if(props.placement) {
|
|
25
|
+
return props.placement;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
if(props.bottom) {
|
|
29
|
+
return 'bottom';
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
if(props.left) {
|
|
33
|
+
return 'left';
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
if(props.right) {
|
|
37
|
+
return 'right';
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
return 'top';
|
|
41
|
+
});
|
|
42
|
+
|
|
43
|
+
const tooltipClasses = computed(() => {
|
|
44
|
+
return {
|
|
45
|
+
show: currentShow,
|
|
46
|
+
[`bs-tooltip-${placement.value}`]: true
|
|
47
|
+
};
|
|
48
|
+
});
|
|
49
|
+
|
|
50
|
+
function open() {
|
|
51
|
+
currentShow.value = true;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
function close() {
|
|
55
|
+
currentShow.value = false;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
defineExpose({
|
|
59
|
+
open, close
|
|
60
|
+
});
|
|
61
|
+
|
|
62
|
+
onMounted(() => {
|
|
63
|
+
if(!el.value) {
|
|
64
|
+
return;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
popperInstance.value = createPopper(props.target, el.value, Object.assign({
|
|
68
|
+
placement: placement.value,
|
|
69
|
+
modifiers: [
|
|
70
|
+
{
|
|
71
|
+
name: 'offset',
|
|
72
|
+
options: {
|
|
73
|
+
offset: [props.offset?.x ?? 0, props.offset?.y ?? 6]
|
|
74
|
+
},
|
|
75
|
+
},
|
|
76
|
+
{
|
|
77
|
+
name: 'arrow',
|
|
78
|
+
options: {
|
|
79
|
+
element: arrow.value,
|
|
80
|
+
},
|
|
81
|
+
},
|
|
82
|
+
],
|
|
83
|
+
}, props.popper));
|
|
84
|
+
|
|
85
|
+
nextTick(() => {
|
|
86
|
+
currentShow.value = props.show;
|
|
87
|
+
});
|
|
88
|
+
});
|
|
89
|
+
|
|
90
|
+
onBeforeUnmount(()=> {
|
|
91
|
+
popperInstance.value && popperInstance.value.destroy();
|
|
9
92
|
});
|
|
10
93
|
</script>
|
|
11
94
|
|
|
12
95
|
<template>
|
|
13
96
|
<div
|
|
97
|
+
ref="el"
|
|
14
98
|
class="tooltip"
|
|
15
99
|
:class="tooltipClasses"
|
|
16
100
|
role="tooltip">
|
package/src/TooltipPlugin.ts
CHANGED
|
@@ -28,7 +28,7 @@ export default function (app: App, opts: Partial<TooltipPluginOptions> = {}) {
|
|
|
28
28
|
const prefix = options.prefix.replace(/[-]+$/, '');
|
|
29
29
|
const prefixRegExp = new RegExp(`^${prefix}\-`);
|
|
30
30
|
|
|
31
|
-
function getAttributes(el: Element): Record<string,
|
|
31
|
+
function getAttributes(el: Element): Record<string,string> {
|
|
32
32
|
return Array.from(el.attributes)
|
|
33
33
|
.map(a => [a.name, a.value])
|
|
34
34
|
.filter(([key]) => key === 'title' || key.match(prefixRegExp))
|
|
@@ -36,7 +36,7 @@ export default function (app: App, opts: Partial<TooltipPluginOptions> = {}) {
|
|
|
36
36
|
.reduce((carry, attr) => Object.assign(carry, { [attr[0]]: attr[1] }), {});
|
|
37
37
|
}
|
|
38
38
|
|
|
39
|
-
function createTooltip(target: Element, props: Record<string,
|
|
39
|
+
function createTooltip(target: Element, props: Record<string,string> = {}, hash: string): Function {
|
|
40
40
|
const container = document.createElement('template');
|
|
41
41
|
|
|
42
42
|
const vnode = h(Tooltip, Object.assign({
|
|
@@ -53,12 +53,11 @@ export default function (app: App, opts: Partial<TooltipPluginOptions> = {}) {
|
|
|
53
53
|
return () => {
|
|
54
54
|
tooltips.delete(hash);
|
|
55
55
|
|
|
56
|
-
//
|
|
57
|
-
vnode.component?.ctx.close();
|
|
56
|
+
// vnode.component?.close();
|
|
58
57
|
|
|
59
58
|
// @todo: Make the animation rate (150) dynamic. Should get value
|
|
60
59
|
// from the CSS transition duration.
|
|
61
|
-
setTimeout(() => el.remove(), 150);
|
|
60
|
+
window.setTimeout(() => el.remove(), 150);
|
|
62
61
|
};
|
|
63
62
|
}
|
|
64
63
|
|
|
@@ -71,7 +70,7 @@ export default function (app: App, opts: Partial<TooltipPluginOptions> = {}) {
|
|
|
71
70
|
}
|
|
72
71
|
|
|
73
72
|
function init(target: Element, props = {}) {
|
|
74
|
-
const properties: Record<string,
|
|
73
|
+
const properties: Record<string,string> = Object.assign({
|
|
75
74
|
title: target.getAttribute(prefix) || target.getAttribute('title')
|
|
76
75
|
}, props, getAttributes(target));
|
|
77
76
|
|
|
@@ -95,7 +94,7 @@ export default function (app: App, opts: Partial<TooltipPluginOptions> = {}) {
|
|
|
95
94
|
clearTimeout(timer);
|
|
96
95
|
|
|
97
96
|
if(!tooltip) {
|
|
98
|
-
timer = setTimeout(() => {
|
|
97
|
+
timer = window.setTimeout(() => {
|
|
99
98
|
// Do a check before creating the tooltip to ensure the dom
|
|
100
99
|
// element still exists. Its possible for the element to
|
|
101
100
|
// be removed after the timeout delay runs.
|
package/dist/src/Popper.d.ts
DELETED
|
@@ -1,82 +0,0 @@
|
|
|
1
|
-
declare const _default: import("vue").DefineComponent<{
|
|
2
|
-
offset: {
|
|
3
|
-
type: ArrayConstructor;
|
|
4
|
-
default: undefined;
|
|
5
|
-
};
|
|
6
|
-
popper: {
|
|
7
|
-
type: ObjectConstructor;
|
|
8
|
-
default: undefined;
|
|
9
|
-
};
|
|
10
|
-
placement: {
|
|
11
|
-
type: StringConstructor;
|
|
12
|
-
default: undefined;
|
|
13
|
-
};
|
|
14
|
-
target: {
|
|
15
|
-
type: {
|
|
16
|
-
new (): Element;
|
|
17
|
-
prototype: Element;
|
|
18
|
-
};
|
|
19
|
-
required: true;
|
|
20
|
-
};
|
|
21
|
-
title: {
|
|
22
|
-
type: StringConstructor;
|
|
23
|
-
default: undefined;
|
|
24
|
-
};
|
|
25
|
-
show: BooleanConstructor;
|
|
26
|
-
top: BooleanConstructor;
|
|
27
|
-
bottom: BooleanConstructor;
|
|
28
|
-
left: BooleanConstructor;
|
|
29
|
-
right: BooleanConstructor;
|
|
30
|
-
}, unknown, {
|
|
31
|
-
currentShow: boolean;
|
|
32
|
-
popperInstance: null;
|
|
33
|
-
}, {
|
|
34
|
-
computedPlacement(): any;
|
|
35
|
-
tooltipClasses(): {
|
|
36
|
-
[x: string]: any;
|
|
37
|
-
show: any;
|
|
38
|
-
};
|
|
39
|
-
}, {
|
|
40
|
-
open(): void;
|
|
41
|
-
close(): void;
|
|
42
|
-
}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
|
|
43
|
-
offset: {
|
|
44
|
-
type: ArrayConstructor;
|
|
45
|
-
default: undefined;
|
|
46
|
-
};
|
|
47
|
-
popper: {
|
|
48
|
-
type: ObjectConstructor;
|
|
49
|
-
default: undefined;
|
|
50
|
-
};
|
|
51
|
-
placement: {
|
|
52
|
-
type: StringConstructor;
|
|
53
|
-
default: undefined;
|
|
54
|
-
};
|
|
55
|
-
target: {
|
|
56
|
-
type: {
|
|
57
|
-
new (): Element;
|
|
58
|
-
prototype: Element;
|
|
59
|
-
};
|
|
60
|
-
required: true;
|
|
61
|
-
};
|
|
62
|
-
title: {
|
|
63
|
-
type: StringConstructor;
|
|
64
|
-
default: undefined;
|
|
65
|
-
};
|
|
66
|
-
show: BooleanConstructor;
|
|
67
|
-
top: BooleanConstructor;
|
|
68
|
-
bottom: BooleanConstructor;
|
|
69
|
-
left: BooleanConstructor;
|
|
70
|
-
right: BooleanConstructor;
|
|
71
|
-
}>>, {
|
|
72
|
-
offset: unknown[];
|
|
73
|
-
popper: Record<string, any>;
|
|
74
|
-
placement: string;
|
|
75
|
-
title: string;
|
|
76
|
-
show: boolean;
|
|
77
|
-
top: boolean;
|
|
78
|
-
bottom: boolean;
|
|
79
|
-
left: boolean;
|
|
80
|
-
right: boolean;
|
|
81
|
-
}>;
|
|
82
|
-
export default _default;
|
package/src/Popper.ts
DELETED
|
@@ -1,118 +0,0 @@
|
|
|
1
|
-
import { createPopper } from '@popperjs/core';
|
|
2
|
-
import { defineComponent } from 'vue';
|
|
3
|
-
|
|
4
|
-
export default defineComponent({
|
|
5
|
-
|
|
6
|
-
props: {
|
|
7
|
-
offset: {
|
|
8
|
-
type: Array,
|
|
9
|
-
default: undefined
|
|
10
|
-
},
|
|
11
|
-
|
|
12
|
-
popper: {
|
|
13
|
-
type: Object,
|
|
14
|
-
default: undefined
|
|
15
|
-
},
|
|
16
|
-
|
|
17
|
-
placement: {
|
|
18
|
-
type: String,
|
|
19
|
-
default: undefined
|
|
20
|
-
},
|
|
21
|
-
|
|
22
|
-
target: {
|
|
23
|
-
type: Element,
|
|
24
|
-
required: true
|
|
25
|
-
},
|
|
26
|
-
|
|
27
|
-
title: {
|
|
28
|
-
type: String,
|
|
29
|
-
default: undefined
|
|
30
|
-
},
|
|
31
|
-
|
|
32
|
-
show: Boolean,
|
|
33
|
-
|
|
34
|
-
top: Boolean,
|
|
35
|
-
|
|
36
|
-
bottom: Boolean,
|
|
37
|
-
|
|
38
|
-
left: Boolean,
|
|
39
|
-
|
|
40
|
-
right: Boolean,
|
|
41
|
-
},
|
|
42
|
-
|
|
43
|
-
data() {
|
|
44
|
-
return {
|
|
45
|
-
currentShow: false,
|
|
46
|
-
popperInstance: null
|
|
47
|
-
};
|
|
48
|
-
},
|
|
49
|
-
|
|
50
|
-
computed: {
|
|
51
|
-
computedPlacement() {
|
|
52
|
-
if(this.placement) {
|
|
53
|
-
return this.placement;
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
if(this.bottom) {
|
|
57
|
-
return 'bottom';
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
if(this.left) {
|
|
61
|
-
return 'left';
|
|
62
|
-
}
|
|
63
|
-
|
|
64
|
-
if(this.right) {
|
|
65
|
-
return 'right';
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
return 'top';
|
|
69
|
-
},
|
|
70
|
-
tooltipClasses() {
|
|
71
|
-
return {
|
|
72
|
-
show: this.currentShow,
|
|
73
|
-
[`bs-tooltip-${this.computedPlacement}`]: true
|
|
74
|
-
};
|
|
75
|
-
}
|
|
76
|
-
},
|
|
77
|
-
|
|
78
|
-
mounted() {
|
|
79
|
-
this.popperInstance = createPopper(this.target, this.$el, Object.assign({
|
|
80
|
-
placement: this.computedPlacement,
|
|
81
|
-
modifiers: [
|
|
82
|
-
{
|
|
83
|
-
name: 'offset',
|
|
84
|
-
options: {
|
|
85
|
-
offset: [0, 6]
|
|
86
|
-
},
|
|
87
|
-
},
|
|
88
|
-
{
|
|
89
|
-
name: 'arrow',
|
|
90
|
-
options: {
|
|
91
|
-
element: this.$refs.arrow,
|
|
92
|
-
},
|
|
93
|
-
},
|
|
94
|
-
],
|
|
95
|
-
}, this.popper));
|
|
96
|
-
|
|
97
|
-
this.$nextTick(() => {
|
|
98
|
-
this.currentShow = this.show;
|
|
99
|
-
});
|
|
100
|
-
},
|
|
101
|
-
|
|
102
|
-
beforeUnmount() {
|
|
103
|
-
this.popperInstance && this.popperInstance.destroy();
|
|
104
|
-
},
|
|
105
|
-
|
|
106
|
-
methods: {
|
|
107
|
-
|
|
108
|
-
open() {
|
|
109
|
-
this.currentShow = true;
|
|
110
|
-
},
|
|
111
|
-
|
|
112
|
-
close() {
|
|
113
|
-
this.currentShow = false;
|
|
114
|
-
}
|
|
115
|
-
|
|
116
|
-
}
|
|
117
|
-
|
|
118
|
-
});
|