vue-tippy 6.0.0-alpha.56 → 6.0.0-alpha.59
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/vue-tippy.cjs +75 -74
- package/dist/vue-tippy.d.ts +1053 -459
- package/dist/vue-tippy.esm-browser.js +76 -75
- package/dist/vue-tippy.iife.js +75 -74
- package/dist/vue-tippy.iife.prod.js +2 -2
- package/dist/vue-tippy.mjs +76 -75
- package/dist/vue-tippy.prod.cjs +75 -74
- package/package.json +4 -4
- package/src/components/Tippy.ts +79 -80
- package/src/composables/useTippyComponent.ts +6 -6
- package/src/types/index.ts +2 -1
package/dist/vue-tippy.prod.cjs
CHANGED
@@ -1,5 +1,5 @@
|
|
1
1
|
/*!
|
2
|
-
* vue-tippy v6.0.0-alpha.
|
2
|
+
* vue-tippy v6.0.0-alpha.59
|
3
3
|
* (c) 2022
|
4
4
|
* @license MIT
|
5
5
|
*/
|
@@ -4154,7 +4154,7 @@ function useTippyComponent(opts = {}, children) {
|
|
4154
4154
|
instance,
|
4155
4155
|
TippyComponent: vue.h(TippyComponent, {
|
4156
4156
|
...opts,
|
4157
|
-
onVnodeMounted: vnode => {
|
4157
|
+
onVnodeMounted: (vnode) => {
|
4158
4158
|
//@ts-ignore
|
4159
4159
|
instance.value = vnode.component.ctx;
|
4160
4160
|
},
|
@@ -4188,58 +4188,69 @@ function useSingleton(instances, optionalProps) {
|
|
4188
4188
|
};
|
4189
4189
|
}
|
4190
4190
|
|
4191
|
-
// const pluginProps = [
|
4192
|
-
// 'animateFill',
|
4193
|
-
// 'followCursor',
|
4194
|
-
// 'inlinePositioning',
|
4195
|
-
// 'sticky',
|
4196
|
-
// ]
|
4197
|
-
const booleanProps = [
|
4198
|
-
'a11y',
|
4199
|
-
'allowHTML',
|
4200
|
-
'arrow',
|
4201
|
-
'flip',
|
4202
|
-
'flipOnUpdate',
|
4203
|
-
'hideOnClick',
|
4204
|
-
'ignoreAttributes',
|
4205
|
-
'inertia',
|
4206
|
-
'interactive',
|
4207
|
-
'lazy',
|
4208
|
-
'multiple',
|
4209
|
-
'showOnInit',
|
4210
|
-
'touch',
|
4211
|
-
'touchHold',
|
4212
|
-
];
|
4213
|
-
let props = {};
|
4214
|
-
Object.keys(tippy.defaultProps).forEach((prop) => {
|
4215
|
-
if (booleanProps.includes(prop)) {
|
4216
|
-
props[prop] = {
|
4217
|
-
type: prop === 'arrow' ? [String, Boolean, ...typeof Element !== 'undefined' ? [SVGElement, DocumentFragment] : [Function]] : Boolean,
|
4218
|
-
default: function () {
|
4219
|
-
return tippy.defaultProps[prop];
|
4220
|
-
},
|
4221
|
-
};
|
4222
|
-
}
|
4223
|
-
else {
|
4224
|
-
props[prop] = {
|
4225
|
-
default: function () {
|
4226
|
-
return tippy.defaultProps[prop];
|
4227
|
-
},
|
4228
|
-
};
|
4229
|
-
}
|
4230
|
-
});
|
4231
|
-
props['to'] = {};
|
4232
|
-
props['tag'] = {
|
4233
|
-
default: 'span'
|
4234
|
-
};
|
4235
|
-
props['contentTag'] = {
|
4236
|
-
default: 'span'
|
4237
|
-
};
|
4238
|
-
props['contentClass'] = {
|
4239
|
-
default: null
|
4240
|
-
};
|
4241
4191
|
const TippyComponent = vue.defineComponent({
|
4242
|
-
props
|
4192
|
+
props: {
|
4193
|
+
to: {
|
4194
|
+
type: [String, Element],
|
4195
|
+
},
|
4196
|
+
tag: {
|
4197
|
+
type: String,
|
4198
|
+
default: 'span'
|
4199
|
+
},
|
4200
|
+
contentTag: {
|
4201
|
+
type: String,
|
4202
|
+
default: 'span'
|
4203
|
+
},
|
4204
|
+
contentClass: {
|
4205
|
+
type: String,
|
4206
|
+
default: null
|
4207
|
+
},
|
4208
|
+
appendTo: { default: () => tippy.defaultProps['appendTo'] },
|
4209
|
+
aria: { default: () => tippy.defaultProps['aria'] },
|
4210
|
+
delay: { default: () => tippy.defaultProps['delay'] },
|
4211
|
+
duration: { default: () => tippy.defaultProps['duration'] },
|
4212
|
+
getReferenceClientRect: { default: () => tippy.defaultProps['getReferenceClientRect'] },
|
4213
|
+
hideOnClick: { default: () => tippy.defaultProps['hideOnClick'] },
|
4214
|
+
ignoreAttributes: { default: () => tippy.defaultProps['ignoreAttributes'] },
|
4215
|
+
interactive: { default: () => tippy.defaultProps['interactive'] },
|
4216
|
+
interactiveBorder: { default: () => tippy.defaultProps['interactiveBorder'] },
|
4217
|
+
interactiveDebounce: { default: () => tippy.defaultProps['interactiveDebounce'] },
|
4218
|
+
moveTransition: { default: () => tippy.defaultProps['moveTransition'] },
|
4219
|
+
offset: { default: () => tippy.defaultProps['offset'] },
|
4220
|
+
onAfterUpdate: { default: () => tippy.defaultProps['onAfterUpdate'] },
|
4221
|
+
onBeforeUpdate: { default: () => tippy.defaultProps['onBeforeUpdate'] },
|
4222
|
+
onCreate: { default: () => tippy.defaultProps['onCreate'] },
|
4223
|
+
onDestroy: { default: () => tippy.defaultProps['onDestroy'] },
|
4224
|
+
onHidden: { default: () => tippy.defaultProps['onHidden'] },
|
4225
|
+
onHide: { default: () => tippy.defaultProps['onHide'] },
|
4226
|
+
onMount: { default: () => tippy.defaultProps['onMount'] },
|
4227
|
+
onShow: { default: () => tippy.defaultProps['onShow'] },
|
4228
|
+
onShown: { default: () => tippy.defaultProps['onShown'] },
|
4229
|
+
onTrigger: { default: () => tippy.defaultProps['onTrigger'] },
|
4230
|
+
onUntrigger: { default: () => tippy.defaultProps['onUntrigger'] },
|
4231
|
+
onClickOutside: { default: () => tippy.defaultProps['onClickOutside'] },
|
4232
|
+
placement: { default: () => tippy.defaultProps['placement'] },
|
4233
|
+
plugins: { default: () => tippy.defaultProps['plugins'] },
|
4234
|
+
popperOptions: { default: () => tippy.defaultProps['popperOptions'] },
|
4235
|
+
render: { default: () => tippy.defaultProps['render'] },
|
4236
|
+
showOnCreate: { default: () => tippy.defaultProps['showOnCreate'] },
|
4237
|
+
touch: { default: () => tippy.defaultProps['touch'] },
|
4238
|
+
trigger: { default: () => tippy.defaultProps['trigger'] },
|
4239
|
+
triggerTarget: { default: () => tippy.defaultProps['triggerTarget'] },
|
4240
|
+
animateFill: { default: () => tippy.defaultProps['animateFill'] },
|
4241
|
+
followCursor: { default: () => tippy.defaultProps['followCursor'] },
|
4242
|
+
inlinePositioning: { default: () => tippy.defaultProps['inlinePositioning'] },
|
4243
|
+
sticky: { default: () => tippy.defaultProps['sticky'] },
|
4244
|
+
allowHTML: { default: () => tippy.defaultProps['allowHTML'] },
|
4245
|
+
animation: { default: () => tippy.defaultProps['animation'] },
|
4246
|
+
arrow: { default: () => tippy.defaultProps['arrow'] },
|
4247
|
+
content: { default: () => tippy.defaultProps['content'] },
|
4248
|
+
inertia: { default: () => tippy.defaultProps['inertia'] },
|
4249
|
+
maxWidth: { default: () => tippy.defaultProps['maxWidth'] },
|
4250
|
+
role: { default: () => tippy.defaultProps['role'] },
|
4251
|
+
theme: { default: () => tippy.defaultProps['theme'] },
|
4252
|
+
zIndex: { default: () => tippy.defaultProps['zIndex'] }
|
4253
|
+
},
|
4243
4254
|
emits: ['state'],
|
4244
4255
|
setup(props, { slots, emit, expose }) {
|
4245
4256
|
const elem = vue.ref();
|
@@ -4275,43 +4286,33 @@ const TippyComponent = vue.defineComponent({
|
|
4275
4286
|
vue.watch(tippy.state, () => {
|
4276
4287
|
emit('state', vue.unref(tippy.state));
|
4277
4288
|
}, { immediate: true, deep: true });
|
4278
|
-
vue.watch(props, () => {
|
4289
|
+
vue.watch(() => props, () => {
|
4279
4290
|
tippy.setProps(getOptions());
|
4280
4291
|
if (slots.content)
|
4281
4292
|
tippy.setContent(() => contentElem.value);
|
4282
4293
|
});
|
4283
|
-
let exposed = {
|
4294
|
+
let exposed = vue.reactive({
|
4284
4295
|
elem,
|
4285
4296
|
contentElem,
|
4286
4297
|
mounted,
|
4287
4298
|
...tippy
|
4288
|
-
};
|
4299
|
+
});
|
4289
4300
|
expose(exposed);
|
4290
4301
|
return () => {
|
4291
|
-
|
4292
|
-
elem: elem.value,
|
4293
|
-
contentElem: contentElem.value,
|
4294
|
-
mounted: mounted.value,
|
4295
|
-
...Object.keys(tippy).reduce((acc, key) => {
|
4296
|
-
//@ts-ignore
|
4297
|
-
acc[key] = vue.unref(tippy[key]);
|
4298
|
-
return acc;
|
4299
|
-
}, {})
|
4300
|
-
};
|
4301
|
-
const slot = slots.default ? slots.default(exposedUnref) : [];
|
4302
|
+
const slot = slots.default ? slots.default(exposed) : [];
|
4302
4303
|
return vue.h(props.tag, { ref: elem, 'data-v-tippy': '' }, slots.content ? [
|
4303
4304
|
slot,
|
4304
4305
|
vue.h(props.contentTag, {
|
4305
4306
|
ref: contentElem,
|
4306
4307
|
style: { display: mounted.value ? 'inherit' : 'none' },
|
4307
4308
|
class: props.contentClass
|
4308
|
-
}, slots.content(
|
4309
|
+
}, slots.content(exposed)),
|
4309
4310
|
] : slot);
|
4310
4311
|
};
|
4311
4312
|
},
|
4312
4313
|
});
|
4313
4314
|
|
4314
|
-
const booleanProps
|
4315
|
+
const booleanProps = [
|
4315
4316
|
'a11y',
|
4316
4317
|
'allowHTML',
|
4317
4318
|
'arrow',
|
@@ -4327,10 +4328,10 @@ const booleanProps$1 = [
|
|
4327
4328
|
'touch',
|
4328
4329
|
'touchHold',
|
4329
4330
|
];
|
4330
|
-
let props
|
4331
|
+
let props = {};
|
4331
4332
|
Object.keys(tippy.defaultProps).forEach((prop) => {
|
4332
|
-
if (booleanProps
|
4333
|
-
props
|
4333
|
+
if (booleanProps.includes(prop)) {
|
4334
|
+
props[prop] = {
|
4334
4335
|
type: Boolean,
|
4335
4336
|
default: function () {
|
4336
4337
|
return tippy.defaultProps[prop];
|
@@ -4338,7 +4339,7 @@ Object.keys(tippy.defaultProps).forEach((prop) => {
|
|
4338
4339
|
};
|
4339
4340
|
}
|
4340
4341
|
else {
|
4341
|
-
props
|
4342
|
+
props[prop] = {
|
4342
4343
|
default: function () {
|
4343
4344
|
return tippy.defaultProps[prop];
|
4344
4345
|
},
|
@@ -4346,7 +4347,7 @@ Object.keys(tippy.defaultProps).forEach((prop) => {
|
|
4346
4347
|
}
|
4347
4348
|
});
|
4348
4349
|
const TippySingleton = vue.defineComponent({
|
4349
|
-
props
|
4350
|
+
props,
|
4350
4351
|
setup(props) {
|
4351
4352
|
const instances = vue.ref([]);
|
4352
4353
|
const { singleton } = useSingleton(instances, props);
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "vue-tippy",
|
3
|
-
"version": "6.0.0-alpha.
|
3
|
+
"version": "6.0.0-alpha.59",
|
4
4
|
"main": "index.js",
|
5
5
|
"module": "dist/vue-tippy.mjs",
|
6
6
|
"unpkg": "dist/vue-tippy.iife.js",
|
@@ -49,7 +49,7 @@
|
|
49
49
|
"prepublishOnly": "yarn build && yarn build:dts"
|
50
50
|
},
|
51
51
|
"peerDependencies": {
|
52
|
-
"vue": "^3.
|
52
|
+
"vue": "^3.2.0"
|
53
53
|
},
|
54
54
|
"devDependencies": {
|
55
55
|
"@microsoft/api-extractor": "7.8.1",
|
@@ -59,7 +59,7 @@
|
|
59
59
|
"@rollup/plugin-replace": "^2.3.3",
|
60
60
|
"@types/webpack": "^4.41.21",
|
61
61
|
"@types/webpack-env": "^1.15.2",
|
62
|
-
"@vue/compiler-sfc": "^3.
|
62
|
+
"@vue/compiler-sfc": "^3.2.0",
|
63
63
|
"css-loader": "^4.2.0",
|
64
64
|
"html-webpack-plugin": "^4.3.0",
|
65
65
|
"rollup": "^2.23.0",
|
@@ -71,7 +71,7 @@
|
|
71
71
|
"ts-loader": "^8.0.2",
|
72
72
|
"ts-node": "^8.10.2",
|
73
73
|
"typescript": "^4.1.3",
|
74
|
-
"vue": "^3.
|
74
|
+
"vue": "^3.2.0",
|
75
75
|
"vue-loader": "^16.0.0-beta.8",
|
76
76
|
"vue-router": "4",
|
77
77
|
"webpack": "^4.44.1",
|
package/src/components/Tippy.ts
CHANGED
@@ -1,76 +1,88 @@
|
|
1
|
-
import { defineComponent, ref, h,
|
1
|
+
import { defineComponent, ref, h, UnwrapNestedRefs, onMounted, nextTick, watch, unref, reactive } from 'vue'
|
2
2
|
import { TippyOptions } from '../types'
|
3
3
|
import { useTippy } from '../composables'
|
4
|
-
import tippy
|
5
|
-
declare module '@vue/runtime-core' {
|
6
|
-
interface ComponentCustomProps extends TippyOptions { }
|
7
|
-
}
|
4
|
+
import tippy from 'tippy.js'
|
8
5
|
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
const booleanProps = [
|
16
|
-
'a11y',
|
17
|
-
'allowHTML',
|
18
|
-
'arrow',
|
19
|
-
'flip',
|
20
|
-
'flipOnUpdate',
|
21
|
-
'hideOnClick',
|
22
|
-
'ignoreAttributes',
|
23
|
-
'inertia',
|
24
|
-
'interactive',
|
25
|
-
'lazy',
|
26
|
-
'multiple',
|
27
|
-
'showOnInit',
|
28
|
-
'touch',
|
29
|
-
'touchHold',
|
30
|
-
]
|
31
|
-
|
32
|
-
let props: ComponentObjectPropsOptions = {}
|
33
|
-
|
34
|
-
Object.keys(tippy.defaultProps).forEach((prop: string) => {
|
35
|
-
if (booleanProps.includes(prop)) {
|
36
|
-
props[prop] = {
|
37
|
-
type: prop === 'arrow' ? [String, Boolean, ...typeof Element !== 'undefined' ? [SVGElement, DocumentFragment] : [Function]] : Boolean,
|
38
|
-
default: function () {
|
39
|
-
return tippy.defaultProps[prop as keyof DefaultProps] as Boolean
|
40
|
-
},
|
41
|
-
}
|
42
|
-
} else {
|
43
|
-
props[prop] = {
|
44
|
-
default: function () {
|
45
|
-
return tippy.defaultProps[prop as keyof DefaultProps]
|
46
|
-
},
|
47
|
-
}
|
6
|
+
declare module '@vue/runtime-core' {
|
7
|
+
interface ComponentCustomProps extends TippyOptions {
|
8
|
+
to: string | Element
|
9
|
+
tag: string
|
10
|
+
contentTag: string
|
11
|
+
contentClass: string
|
48
12
|
}
|
49
|
-
}
|
50
|
-
|
51
|
-
props['to'] = {}
|
52
|
-
|
53
|
-
props['tag'] = {
|
54
|
-
default: 'span'
|
13
|
+
interface ComponentCustomProperties extends UnwrapNestedRefs<ReturnType<typeof useTippy>> { }
|
55
14
|
}
|
56
15
|
|
57
|
-
props['contentTag'] = {
|
58
|
-
default: 'span'
|
59
|
-
}
|
60
|
-
|
61
|
-
props['contentClass'] = {
|
62
|
-
default: null
|
63
|
-
}
|
64
16
|
|
65
17
|
const TippyComponent = defineComponent({
|
66
|
-
props
|
18
|
+
props: {
|
19
|
+
to: {
|
20
|
+
type: [String, Element],
|
21
|
+
},
|
22
|
+
tag: {
|
23
|
+
type: String,
|
24
|
+
default: 'span'
|
25
|
+
},
|
26
|
+
contentTag: {
|
27
|
+
type: String,
|
28
|
+
default: 'span'
|
29
|
+
},
|
30
|
+
contentClass: {
|
31
|
+
type: String,
|
32
|
+
default: null
|
33
|
+
},
|
34
|
+
appendTo: { default: () => tippy.defaultProps['appendTo'] },
|
35
|
+
aria: { default: () => tippy.defaultProps['aria'] },
|
36
|
+
delay: { default: () => tippy.defaultProps['delay'] },
|
37
|
+
duration: { default: () => tippy.defaultProps['duration'] },
|
38
|
+
getReferenceClientRect: { default: () => tippy.defaultProps['getReferenceClientRect'] },
|
39
|
+
hideOnClick: { default: () => tippy.defaultProps['hideOnClick'] },
|
40
|
+
ignoreAttributes: { default: () => tippy.defaultProps['ignoreAttributes'] },
|
41
|
+
interactive: { default: () => tippy.defaultProps['interactive'] },
|
42
|
+
interactiveBorder: { default: () => tippy.defaultProps['interactiveBorder'] },
|
43
|
+
interactiveDebounce: { default: () => tippy.defaultProps['interactiveDebounce'] },
|
44
|
+
moveTransition: { default: () => tippy.defaultProps['moveTransition'] },
|
45
|
+
offset: { default: () => tippy.defaultProps['offset'] },
|
46
|
+
onAfterUpdate: { default: () => tippy.defaultProps['onAfterUpdate'] },
|
47
|
+
onBeforeUpdate: { default: () => tippy.defaultProps['onBeforeUpdate'] },
|
48
|
+
onCreate: { default: () => tippy.defaultProps['onCreate'] },
|
49
|
+
onDestroy: { default: () => tippy.defaultProps['onDestroy'] },
|
50
|
+
onHidden: { default: () => tippy.defaultProps['onHidden'] },
|
51
|
+
onHide: { default: () => tippy.defaultProps['onHide'] },
|
52
|
+
onMount: { default: () => tippy.defaultProps['onMount'] },
|
53
|
+
onShow: { default: () => tippy.defaultProps['onShow'] },
|
54
|
+
onShown: { default: () => tippy.defaultProps['onShown'] },
|
55
|
+
onTrigger: { default: () => tippy.defaultProps['onTrigger'] },
|
56
|
+
onUntrigger: { default: () => tippy.defaultProps['onUntrigger'] },
|
57
|
+
onClickOutside: { default: () => tippy.defaultProps['onClickOutside'] },
|
58
|
+
placement: { default: () => tippy.defaultProps['placement'] },
|
59
|
+
plugins: { default: () => tippy.defaultProps['plugins'] },
|
60
|
+
popperOptions: { default: () => tippy.defaultProps['popperOptions'] },
|
61
|
+
render: { default: () => tippy.defaultProps['render'] },
|
62
|
+
showOnCreate: { default: () => tippy.defaultProps['showOnCreate'] },
|
63
|
+
touch: { default: () => tippy.defaultProps['touch'] },
|
64
|
+
trigger: { default: () => tippy.defaultProps['trigger'] },
|
65
|
+
triggerTarget: { default: () => tippy.defaultProps['triggerTarget'] },
|
66
|
+
animateFill: { default: () => tippy.defaultProps['animateFill'] },
|
67
|
+
followCursor: { default: () => tippy.defaultProps['followCursor'] },
|
68
|
+
inlinePositioning: { default: () => tippy.defaultProps['inlinePositioning'] },
|
69
|
+
sticky: { default: () => tippy.defaultProps['sticky'] },
|
70
|
+
allowHTML: { default: () => tippy.defaultProps['allowHTML'] },
|
71
|
+
animation: { default: () => tippy.defaultProps['animation'] },
|
72
|
+
arrow: { default: () => tippy.defaultProps['arrow'] },
|
73
|
+
content: { default: () => tippy.defaultProps['content'] },
|
74
|
+
inertia: { default: () => tippy.defaultProps['inertia'] },
|
75
|
+
maxWidth: { default: () => tippy.defaultProps['maxWidth'] },
|
76
|
+
role: { default: () => tippy.defaultProps['role'] },
|
77
|
+
theme: { default: () => tippy.defaultProps['theme'] },
|
78
|
+
zIndex: { default: () => tippy.defaultProps['zIndex'] }
|
79
|
+
},
|
67
80
|
emits: ['state'],
|
68
81
|
setup(props, { slots, emit, expose }) {
|
69
82
|
const elem = ref<Element>()
|
70
83
|
const contentElem = ref<Element>()
|
71
84
|
const mounted = ref(false)
|
72
85
|
|
73
|
-
|
74
86
|
const getOptions = () => {
|
75
87
|
let options = { ...props } as TippyOptions;
|
76
88
|
for (const prop of ['to', 'tag', 'contentTag', 'contentClass']) {
|
@@ -89,7 +101,7 @@ const TippyComponent = defineComponent({
|
|
89
101
|
if (typeof Element !== 'undefined' && props.to instanceof Element) {
|
90
102
|
target = () => props.to
|
91
103
|
} else if (typeof props.to === 'string' || props.to instanceof String) {
|
92
|
-
target = () => document.querySelector(props.to)
|
104
|
+
target = () => document.querySelector(props.to as any)
|
93
105
|
}
|
94
106
|
}
|
95
107
|
|
@@ -108,48 +120,35 @@ const TippyComponent = defineComponent({
|
|
108
120
|
emit('state', unref(tippy.state))
|
109
121
|
}, { immediate: true, deep: true })
|
110
122
|
|
111
|
-
watch(props, () => {
|
123
|
+
watch(() => props, () => {
|
112
124
|
tippy.setProps(getOptions())
|
113
125
|
|
114
126
|
if (slots.content)
|
115
127
|
tippy.setContent(() => contentElem.value)
|
116
128
|
})
|
117
129
|
|
118
|
-
let exposed = {
|
130
|
+
let exposed = reactive({
|
119
131
|
elem,
|
120
132
|
contentElem,
|
121
133
|
mounted,
|
122
134
|
...tippy
|
123
|
-
}
|
135
|
+
})
|
124
136
|
|
125
137
|
expose(exposed)
|
126
138
|
|
127
139
|
return () => {
|
140
|
+
const slot = slots.default ? slots.default(exposed) : []
|
128
141
|
|
129
|
-
|
130
|
-
elem: elem.value,
|
131
|
-
contentElem: contentElem.value,
|
132
|
-
mounted: mounted.value,
|
133
|
-
...Object.keys(tippy).reduce((acc, key) => {
|
134
|
-
//@ts-ignore
|
135
|
-
acc[key] = unref(tippy[key])
|
136
|
-
|
137
|
-
return acc;
|
138
|
-
}, {})
|
139
|
-
}
|
140
|
-
|
141
|
-
const slot = slots.default ? slots.default(exposedUnref) : []
|
142
|
-
|
143
|
-
return h(props.tag, { ref: elem, 'data-v-tippy': '' }, slots.content ? [
|
142
|
+
return h(props.tag as string, { ref: elem, 'data-v-tippy': '' }, slots.content ? [
|
144
143
|
slot,
|
145
144
|
h(
|
146
|
-
props.contentTag,
|
145
|
+
props.contentTag as string,
|
147
146
|
{
|
148
147
|
ref: contentElem,
|
149
148
|
style: { display: mounted.value ? 'inherit' : 'none' },
|
150
149
|
class: props.contentClass
|
151
150
|
},
|
152
|
-
slots.content(
|
151
|
+
slots.content(exposed)
|
153
152
|
),
|
154
153
|
] : slot)
|
155
154
|
}
|
@@ -1,20 +1,20 @@
|
|
1
1
|
import { h, ref } from 'vue'
|
2
|
-
import { TippyOptions } from '../types'
|
3
|
-
import
|
2
|
+
import { TippyComponent, TippyOptions } from '../types'
|
3
|
+
import Tippy from './../components/Tippy'
|
4
4
|
|
5
5
|
export function useTippyComponent(
|
6
6
|
opts: TippyOptions = {},
|
7
7
|
children?: any
|
8
8
|
) {
|
9
|
-
const instance = ref()
|
9
|
+
const instance = ref<TippyComponent>()
|
10
10
|
|
11
11
|
return {
|
12
12
|
instance,
|
13
13
|
TippyComponent: h(
|
14
|
-
|
14
|
+
Tippy,
|
15
15
|
{
|
16
|
-
...opts,
|
17
|
-
onVnodeMounted: vnode => {
|
16
|
+
...opts as any,
|
17
|
+
onVnodeMounted: (vnode:any) => {
|
18
18
|
//@ts-ignore
|
19
19
|
instance.value = vnode.component.ctx
|
20
20
|
},
|
package/src/types/index.ts
CHANGED
@@ -11,9 +11,10 @@ export declare type TippyTarget =
|
|
11
11
|
| null
|
12
12
|
|
13
13
|
export declare type TippyOptions = Partial<
|
14
|
-
Omit<Props, 'content' | 'triggerTarget'> & {
|
14
|
+
Omit<Props, 'content' | 'triggerTarget' | 'getReferenceClientRect'> & {
|
15
15
|
content: TippyContent
|
16
16
|
triggerTarget: TippyTarget
|
17
|
+
getReferenceClientRect: null | (() => DOMRect & any)
|
17
18
|
}
|
18
19
|
>
|
19
20
|
|