vue-tippy 6.0.0-alpha.56 → 6.0.0-alpha.59
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/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
|
|