Skip to content

Commit 5292bea

Browse files
author
Lukianenko Dmitrii
committed
[2.2.4] Tooltips with hover have been configured
1 parent bbbbc0c commit 5292bea

File tree

6 files changed

+164
-126
lines changed

6 files changed

+164
-126
lines changed

‎dist/index.d.ts

Lines changed: 62 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1,61 +1,62 @@
1-
import { ComponentOptionsMixin } from 'vue';
2-
import { DefineComponent } from 'vue';
3-
import type { Directive } from 'vue';
4-
import { ExtractPropTypes } from 'vue';
5-
import { PublicProps } from 'vue';
6-
import { Ref } from 'vue';
7-
8-
declare const _default: {
9-
install: (app: any) => void;
10-
};
11-
export default _default;
12-
13-
export declare const install: (app: any) => void;
14-
15-
export declare const TooltipComponent: DefineComponent<{
16-
disable: {
17-
type: BooleanConstructor;
18-
required: false;
19-
default: boolean;
20-
};
21-
position: {
22-
type: () => TooltipPosition;
23-
required: false;
24-
default: string;
25-
};
26-
clickable: {
27-
type: BooleanConstructor;
28-
required: false;
29-
default: boolean;
30-
};
31-
}, {
32-
isShowTooltip: Ref<boolean>;
33-
afterEnter: (el: Element) => void;
34-
hideTooltip: () => void;
35-
}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<{
36-
disable: {
37-
type: BooleanConstructor;
38-
required: false;
39-
default: boolean;
40-
};
41-
position: {
42-
type: () => TooltipPosition;
43-
required: false;
44-
default: string;
45-
};
46-
clickable: {
47-
type: BooleanConstructor;
48-
required: false;
49-
default: boolean;
50-
};
51-
}>>, {
52-
disable: boolean;
53-
position: TooltipPosition;
54-
clickable: boolean;
55-
}, {}>;
56-
57-
export declare const TooltipDirective: Directive<HTMLElement, string>;
58-
59-
declare type TooltipPosition = 'bottom' | 'top' | 'left' | 'right';
60-
61-
export { }
1+
import { ComponentOptionsMixin } from 'vue';
2+
import { DefineComponent } from 'vue';
3+
import type { Directive } from 'vue';
4+
import { ExtractPropTypes } from 'vue';
5+
import { PublicProps } from 'vue';
6+
import { Ref } from 'vue';
7+
8+
declare const _default: {
9+
install: (app: any) => void;
10+
};
11+
export default _default;
12+
13+
export declare const install: (app: any) => void;
14+
15+
export declare const TooltipComponent: DefineComponent<{
16+
disable: {
17+
type: BooleanConstructor;
18+
required: false;
19+
default: boolean;
20+
};
21+
position: {
22+
type: () => TooltipPosition;
23+
required: false;
24+
default: string;
25+
};
26+
clickable: {
27+
type: BooleanConstructor;
28+
required: false;
29+
default: boolean;
30+
};
31+
}, {
32+
isShowTooltip: Ref<boolean>;
33+
onTooltipHover: Ref<boolean>;
34+
afterEnter: (el: Element) => void;
35+
onMouseLeave: () => void;
36+
}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<{
37+
disable: {
38+
type: BooleanConstructor;
39+
required: false;
40+
default: boolean;
41+
};
42+
position: {
43+
type: () => TooltipPosition;
44+
required: false;
45+
default: string;
46+
};
47+
clickable: {
48+
type: BooleanConstructor;
49+
required: false;
50+
default: boolean;
51+
};
52+
}>>, {
53+
disable: boolean;
54+
position: TooltipPosition;
55+
clickable: boolean;
56+
}, {}>;
57+
58+
export declare const TooltipDirective: Directive<HTMLElement, string>;
59+
60+
declare type TooltipPosition = 'bottom' | 'top' | 'left' | 'right';
61+
62+
export { }

‎dist/style.css

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/vue3-tooltip.es.js

Lines changed: 54 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import { ref as d, openBlock as n, createElementBlock as r, normalizeClass as s, renderSlot as i, createVNode as p, Transition as f, withCtx as v, createCommentVNode as m } from "vue";
2-
const _ = {
1+
import { ref as a, openBlock as i, createElementBlock as u, normalizeClass as c, renderSlot as v, createVNode as f, Transition as p, withCtx as m, createElementVNode as _, createCommentVNode as T } from "vue";
2+
const y = {
33
name: "TooltipComponent",
44
props: {
55
disable: {
@@ -19,64 +19,82 @@ const _ = {
1919
}
2020
},
2121
setup(t) {
22-
const e = d(!1);
22+
const e = a(!1), o = a(!1);
2323
return {
2424
isShowTooltip: e,
25-
afterEnter: (a) => {
26-
a.classList.add(`vue-tooltip__hover-${t.position}`);
25+
onTooltipHover: o,
26+
afterEnter: (s) => {
27+
s.classList.add(`vue-tooltip__hover-${t.position}`);
2728
},
28-
hideTooltip: () => {
29-
e.value = !1;
29+
onMouseLeave: () => {
30+
if (!t.clickable) {
31+
e.value = !1;
32+
return;
33+
}
34+
setTimeout(() => {
35+
if (o.value) {
36+
e.value = !0;
37+
return;
38+
}
39+
e.value = !1;
40+
}, 300);
3041
}
3142
};
3243
}
33-
}, y = (t, e) => {
44+
}, L = (t, e) => {
3445
const o = t.__vccOpts || t;
35-
for (const [l, a] of e)
36-
o[l] = a;
46+
for (const [l, r] of e)
47+
o[l] = r;
3748
return o;
38-
};
39-
function T(t, e, o, l, a, h) {
40-
return n(), r("div", {
41-
onMouseenter: e[0] || (e[0] = (u) => l.isShowTooltip = !0),
42-
onMouseleave: e[1] || (e[1] = (u) => l.isShowTooltip = !1),
43-
class: s(["vue-tooltip", { disable: o.disable }])
49+
}, M = { class: "vue-tooltip__body" };
50+
function k(t, e, o, l, r, s) {
51+
return i(), u("div", {
52+
onMouseenter: e[2] || (e[2] = (n) => l.isShowTooltip = !0),
53+
onMouseleave: e[3] || (e[3] = (...n) => l.onMouseLeave && l.onMouseLeave(...n)),
54+
class: c(["vue-tooltip", { disable: o.disable, "vue-tooltip__selected": l.isShowTooltip }])
4455
}, [
45-
i(t.$slots, "text", {}, void 0, !0),
46-
p(f, {
56+
v(t.$slots, "text", {}, void 0, !0),
57+
f(p, {
4758
name: o.position,
4859
onAfterEnter: l.afterEnter
4960
}, {
50-
default: v(() => [
51-
!o.disable && l.isShowTooltip ? (n(), r("div", {
61+
default: m(() => [
62+
!o.disable && l.isShowTooltip ? (i(), u("div", {
5263
key: 0,
53-
class: s(["vue-tooltip--component", [{ "vue-tooltip__pointer-event": !o.clickable }, `vue-tooltip__${o.position}`]])
64+
class: c(["vue-tooltip--component", [
65+
{ "vue-tooltip__pointer-event": !o.clickable },
66+
`vue-tooltip__${o.position}`
67+
]]),
68+
onMouseenter: e[0] || (e[0] = (n) => l.onTooltipHover = !0),
69+
onMouseleave: e[1] || (e[1] = (n) => l.onTooltipHover = !1)
5470
}, [
55-
i(t.$slots, "tooltip", {}, void 0, !0)
56-
], 2)) : m("", !0)
71+
_("div", M, [
72+
v(t.$slots, "tooltip", {}, void 0, !0)
73+
])
74+
], 34)) : T("", !0)
5775
]),
5876
_: 3
5977
}, 8, ["name", "onAfterEnter"])
6078
], 34);
6179
}
62-
const S = /* @__PURE__ */ y(_, [["render", T], ["__scopeId", "data-v-f8a3696a"]]), k = {
80+
const E = /* @__PURE__ */ L(y, [["render", k], ["__scopeId", "data-v-7a4cc7f7"]]), S = {
6381
mounted: (t, e) => {
64-
c(t, e);
82+
d(t, e);
6583
},
6684
updated: (t, e) => {
67-
c(t, e);
85+
d(t, e);
6886
}
69-
}, c = (t, e) => {
87+
}, d = (t, e) => {
7088
const o = "vue-tooltip";
71-
t.classList.add(o), !(e.value === null || e.value === void 0) && (t.dataset.tooltip = e.value, t.classList.toggle(`${o}__${C(e.modifiers)}`, !0), t.classList.toggle(`${o}__${e.arg || "bottom"}`, !0));
72-
}, C = (t) => t.primary ? "primary" : t.secondary ? "secondary" : t.accent ? "accent" : "primary", E = (t) => {
73-
t.component("tooltip", S), t.directive("tooltip", k);
74-
}, $ = {
75-
install: E
89+
t.classList.add(o), !(e.value === null || e.value === void 0) && (t.dataset.tooltip = e.value, t.classList.toggle(`${o}__${b(e.modifiers)}`, !0), t.classList.toggle(`${o}__${e.arg || "bottom"}`, !0));
90+
}, b = (t) => t.primary ? "primary" : t.secondary ? "secondary" : t.accent ? "accent" : "primary", C = (t) => {
91+
t.component("tooltip", E), t.directive("tooltip", S);
92+
}, g = {
93+
install: C
7694
};
7795
export {
78-
S as TooltipComponent,
79-
k as TooltipDirective,
80-
$ as default,
81-
E as install
96+
E as TooltipComponent,
97+
S as TooltipDirective,
98+
g as default,
99+
C as install
82100
};

0 commit comments

Comments
 (0)