vue-tippy 6.0.0-alpha.6 → 6.0.0-alpha.62
Sign up to get free protection for your applications and to get access to all the features.
- package/README.md +105 -2
- package/dist/{vue-tippy.cjs.prod.js → vue-tippy.cjs} +1010 -241
- package/dist/vue-tippy.d.ts +672 -24
- package/dist/{vue-tippy.esm-bundler.js → vue-tippy.esm-browser.js} +692 -243
- package/dist/{vue-tippy.global.js → vue-tippy.iife.js} +1010 -241
- package/dist/vue-tippy.iife.prod.js +6 -0
- package/dist/{vue-tippy.esm.js → vue-tippy.mjs} +692 -243
- package/dist/{vue-tippy.cjs.js → vue-tippy.prod.cjs} +694 -241
- package/index.cjs +7 -0
- package/index.js +7 -0
- package/package.json +40 -11
- package/src/components/Tippy.ts +158 -0
- package/src/components/TippySingleton.ts +74 -0
- package/src/composables/index.ts +3 -0
- package/src/composables/useSingleton.ts +44 -0
- package/src/composables/useTippy.ts +255 -0
- package/src/composables/useTippyComponent.ts +25 -0
- package/src/directive/index.ts +89 -0
- package/src/global.d.ts +4 -0
- package/src/index.ts +39 -0
- package/src/plugin/index.ts +18 -0
- package/src/types/index.ts +37 -0
- package/tsconfig.json +31 -0
- package/dist/vue-tippy.global.prod.js +0 -6
package/index.cjs
ADDED
package/index.js
ADDED
package/package.json
CHANGED
@@ -1,27 +1,55 @@
|
|
1
1
|
{
|
2
2
|
"name": "vue-tippy",
|
3
|
-
"version": "6.0.0-alpha.
|
4
|
-
"main": "
|
5
|
-
"
|
6
|
-
"unpkg": "dist/vue-tippy.
|
7
|
-
"jsdelivr": "dist/vue-tippy.
|
8
|
-
"module": "dist/vue-tippy.esm-bundler.js",
|
3
|
+
"version": "6.0.0-alpha.62",
|
4
|
+
"main": "index.js",
|
5
|
+
"module": "dist/vue-tippy.mjs",
|
6
|
+
"unpkg": "dist/vue-tippy.iife.js",
|
7
|
+
"jsdelivr": "dist/vue-tippy.iife.js",
|
9
8
|
"types": "dist/vue-tippy.d.ts",
|
9
|
+
"exports": {
|
10
|
+
".": {
|
11
|
+
"browser": "./dist/vue-tippy.esm-browser.js",
|
12
|
+
"node": {
|
13
|
+
"import": {
|
14
|
+
"production": "./dist/vue-tippy.prod.cjs",
|
15
|
+
"development": "./dist/vue-tippy.mjs",
|
16
|
+
"default": "./dist/vue-tippy.mjs"
|
17
|
+
},
|
18
|
+
"require": {
|
19
|
+
"production": "./dist/vue-tippy.prod.cjs",
|
20
|
+
"development": "./dist/vue-tippy.cjs",
|
21
|
+
"default": "./index.js"
|
22
|
+
}
|
23
|
+
},
|
24
|
+
"import": "./dist/vue-tippy.mjs"
|
25
|
+
},
|
26
|
+
"./package.json": "./package.json",
|
27
|
+
"./dist/*": "./dist/*"
|
28
|
+
},
|
10
29
|
"sideEffects": false,
|
11
30
|
"license": "MIT",
|
12
31
|
"files": [
|
32
|
+
"src/**/*",
|
13
33
|
"dist/*.js",
|
34
|
+
"dist/*.mjs",
|
35
|
+
"dist/*.cjs",
|
14
36
|
"dist/vue-tippy.d.ts",
|
37
|
+
"index.js",
|
38
|
+
"index.cjs",
|
15
39
|
"vetur/*.json",
|
40
|
+
"tsconfig.json",
|
41
|
+
"LICENSE",
|
16
42
|
"README.md"
|
17
43
|
],
|
18
44
|
"scripts": {
|
19
45
|
"build": "NODE_ENV=production rollup -c rollup.config.js",
|
20
46
|
"build:dts": "api-extractor run --local --verbose",
|
21
|
-
"dev": "webpack-dev-server --mode=development"
|
47
|
+
"dev": "webpack-dev-server --mode=development",
|
48
|
+
"dev:docs": "cd docs && yarn dev",
|
49
|
+
"prepublishOnly": "yarn build && yarn build:dts"
|
22
50
|
},
|
23
51
|
"peerDependencies": {
|
24
|
-
"vue": "^3.
|
52
|
+
"vue": "^3.2.0"
|
25
53
|
},
|
26
54
|
"devDependencies": {
|
27
55
|
"@microsoft/api-extractor": "7.8.1",
|
@@ -31,7 +59,7 @@
|
|
31
59
|
"@rollup/plugin-replace": "^2.3.3",
|
32
60
|
"@types/webpack": "^4.41.21",
|
33
61
|
"@types/webpack-env": "^1.15.2",
|
34
|
-
"@vue/compiler-sfc": "^3.
|
62
|
+
"@vue/compiler-sfc": "^3.2.0",
|
35
63
|
"css-loader": "^4.2.0",
|
36
64
|
"html-webpack-plugin": "^4.3.0",
|
37
65
|
"rollup": "^2.23.0",
|
@@ -43,15 +71,16 @@
|
|
43
71
|
"ts-loader": "^8.0.2",
|
44
72
|
"ts-node": "^8.10.2",
|
45
73
|
"typescript": "^4.1.3",
|
46
|
-
"vue": "^3.
|
74
|
+
"vue": "^3.2.0",
|
47
75
|
"vue-loader": "^16.0.0-beta.8",
|
76
|
+
"vue-router": "4",
|
48
77
|
"webpack": "^4.44.1",
|
49
78
|
"webpack-bundle-analyzer": "^3.8.0",
|
50
79
|
"webpack-cli": "^3.3.12",
|
51
80
|
"webpack-dev-server": "^3.11.0"
|
52
81
|
},
|
53
82
|
"dependencies": {
|
54
|
-
"tippy.js": "^6.
|
83
|
+
"tippy.js": "^6.3.7"
|
55
84
|
},
|
56
85
|
"vetur": {
|
57
86
|
"tags": "vetur/tags.json",
|
@@ -0,0 +1,158 @@
|
|
1
|
+
import { defineComponent, ref, h, UnwrapNestedRefs, onMounted, nextTick, watch, unref, reactive, PropType } from 'vue'
|
2
|
+
import { TippyOptions } from '../types'
|
3
|
+
import { useTippy } from '../composables'
|
4
|
+
import tippy from 'tippy.js'
|
5
|
+
|
6
|
+
declare module '@vue/runtime-core' {
|
7
|
+
interface ComponentCustomProps extends TippyOptions {
|
8
|
+
to: string | Element
|
9
|
+
tag: string
|
10
|
+
contentTag: string
|
11
|
+
contentClass: string
|
12
|
+
}
|
13
|
+
interface ComponentCustomProperties extends UnwrapNestedRefs<ReturnType<typeof useTippy>> { }
|
14
|
+
}
|
15
|
+
|
16
|
+
|
17
|
+
const TippyComponent = defineComponent({
|
18
|
+
props: {
|
19
|
+
to: {
|
20
|
+
type: [String, Function] as PropType<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
|
+
},
|
80
|
+
emits: ['state'],
|
81
|
+
setup(props, { slots, emit, expose }) {
|
82
|
+
const elem = ref<Element>()
|
83
|
+
const contentElem = ref<Element>()
|
84
|
+
const mounted = ref(false)
|
85
|
+
|
86
|
+
const getOptions = () => {
|
87
|
+
let options = { ...props } as TippyOptions;
|
88
|
+
for (const prop of ['to', 'tag', 'contentTag', 'contentClass']) {
|
89
|
+
if (options.hasOwnProperty(prop)) {
|
90
|
+
// @ts-ignore
|
91
|
+
delete options[prop];
|
92
|
+
}
|
93
|
+
}
|
94
|
+
|
95
|
+
return options
|
96
|
+
}
|
97
|
+
|
98
|
+
let target: any = elem
|
99
|
+
|
100
|
+
if (props.to) {
|
101
|
+
if (typeof Element !== 'undefined' && props.to instanceof Element) {
|
102
|
+
target = () => props.to
|
103
|
+
} else if (typeof props.to === 'string' || props.to instanceof String) {
|
104
|
+
target = () => document.querySelector(props.to as any)
|
105
|
+
}
|
106
|
+
}
|
107
|
+
|
108
|
+
const tippy = useTippy(target, getOptions())
|
109
|
+
|
110
|
+
onMounted(() => {
|
111
|
+
mounted.value = true
|
112
|
+
|
113
|
+
nextTick(() => {
|
114
|
+
if (slots.content)
|
115
|
+
tippy.setContent(() => contentElem.value)
|
116
|
+
})
|
117
|
+
})
|
118
|
+
|
119
|
+
watch(tippy.state, () => {
|
120
|
+
emit('state', unref(tippy.state))
|
121
|
+
}, { immediate: true, deep: true })
|
122
|
+
|
123
|
+
watch(() => props, () => {
|
124
|
+
tippy.setProps(getOptions())
|
125
|
+
|
126
|
+
if (slots.content)
|
127
|
+
tippy.setContent(() => contentElem.value)
|
128
|
+
})
|
129
|
+
|
130
|
+
let exposed = reactive({
|
131
|
+
elem,
|
132
|
+
contentElem,
|
133
|
+
mounted,
|
134
|
+
...tippy
|
135
|
+
})
|
136
|
+
|
137
|
+
expose(exposed)
|
138
|
+
|
139
|
+
return () => {
|
140
|
+
const slot = slots.default ? slots.default(exposed) : []
|
141
|
+
|
142
|
+
return h(props.tag as string, { ref: elem, 'data-v-tippy': '' }, slots.content ? [
|
143
|
+
slot,
|
144
|
+
h(
|
145
|
+
props.contentTag as string,
|
146
|
+
{
|
147
|
+
ref: contentElem,
|
148
|
+
style: { display: mounted.value ? 'inherit' : 'none' },
|
149
|
+
class: props.contentClass
|
150
|
+
},
|
151
|
+
slots.content(exposed)
|
152
|
+
),
|
153
|
+
] : slot)
|
154
|
+
}
|
155
|
+
},
|
156
|
+
})
|
157
|
+
|
158
|
+
export default TippyComponent
|
@@ -0,0 +1,74 @@
|
|
1
|
+
import { Instance } from 'tippy.js'
|
2
|
+
import { ComponentObjectPropsOptions, defineComponent, h, ref } from 'vue'
|
3
|
+
import { useSingleton } from '../composables'
|
4
|
+
import { TippyOptions } from '../types'
|
5
|
+
import tippy, { DefaultProps } from 'tippy.js'
|
6
|
+
|
7
|
+
declare module '@vue/runtime-core' {
|
8
|
+
interface ComponentCustomProps extends TippyOptions {}
|
9
|
+
}
|
10
|
+
|
11
|
+
const booleanProps = [
|
12
|
+
'a11y',
|
13
|
+
'allowHTML',
|
14
|
+
'arrow',
|
15
|
+
'flip',
|
16
|
+
'flipOnUpdate',
|
17
|
+
'hideOnClick',
|
18
|
+
'ignoreAttributes',
|
19
|
+
'inertia',
|
20
|
+
'interactive',
|
21
|
+
'lazy',
|
22
|
+
'multiple',
|
23
|
+
'showOnInit',
|
24
|
+
'touch',
|
25
|
+
'touchHold',
|
26
|
+
]
|
27
|
+
|
28
|
+
let props: ComponentObjectPropsOptions = {}
|
29
|
+
|
30
|
+
Object.keys(tippy.defaultProps).forEach((prop: string) => {
|
31
|
+
if (booleanProps.includes(prop)) {
|
32
|
+
props[prop] = {
|
33
|
+
type: Boolean,
|
34
|
+
default: function () {
|
35
|
+
return tippy.defaultProps[prop as keyof DefaultProps] as Boolean
|
36
|
+
},
|
37
|
+
}
|
38
|
+
} else {
|
39
|
+
props[prop] = {
|
40
|
+
default: function () {
|
41
|
+
return tippy.defaultProps[prop as keyof DefaultProps]
|
42
|
+
},
|
43
|
+
}
|
44
|
+
}
|
45
|
+
})
|
46
|
+
|
47
|
+
|
48
|
+
const TippySingleton = defineComponent({
|
49
|
+
props,
|
50
|
+
setup(props) {
|
51
|
+
const instances = ref<Instance<any>[]>([])
|
52
|
+
|
53
|
+
const { singleton } = useSingleton(instances, props)
|
54
|
+
|
55
|
+
return { instances, singleton }
|
56
|
+
},
|
57
|
+
mounted() {
|
58
|
+
const parent = this.$el.parentElement
|
59
|
+
const elements = parent.querySelectorAll('[data-v-tippy]')
|
60
|
+
|
61
|
+
this.instances = Array.from(elements)
|
62
|
+
.map((el: any) => el._tippy)
|
63
|
+
.filter(Boolean)
|
64
|
+
|
65
|
+
this.singleton?.setInstances(this.instances)
|
66
|
+
},
|
67
|
+
render() {
|
68
|
+
let slot = this.$slots.default ? this.$slots.default() : []
|
69
|
+
|
70
|
+
return h(() => slot)
|
71
|
+
},
|
72
|
+
})
|
73
|
+
|
74
|
+
export default TippySingleton
|
@@ -0,0 +1,44 @@
|
|
1
|
+
import { TippyInstance, TippyInstances } from '../types'
|
2
|
+
import {
|
3
|
+
createSingleton,
|
4
|
+
CreateSingletonProps,
|
5
|
+
Instance,
|
6
|
+
Props,
|
7
|
+
} from 'tippy.js'
|
8
|
+
import { onMounted, ref } from 'vue'
|
9
|
+
|
10
|
+
export function useSingleton(
|
11
|
+
instances: TippyInstances,
|
12
|
+
optionalProps?: Partial<CreateSingletonProps<Props>>
|
13
|
+
) {
|
14
|
+
const singleton = ref<ReturnType<typeof createSingleton>>()
|
15
|
+
|
16
|
+
onMounted(() => {
|
17
|
+
const pendingTippyInstances: TippyInstance[] = Array.isArray(instances)
|
18
|
+
? instances.map(i => i.value)
|
19
|
+
: typeof instances === 'function'
|
20
|
+
? instances()
|
21
|
+
: instances.value
|
22
|
+
|
23
|
+
const tippyInstances: Instance<any>[] = pendingTippyInstances
|
24
|
+
.map((instance: TippyInstance) => {
|
25
|
+
if (instance instanceof Element) {
|
26
|
+
//@ts-ignore
|
27
|
+
return instance._tippy
|
28
|
+
}
|
29
|
+
return instance
|
30
|
+
})
|
31
|
+
.filter(Boolean)
|
32
|
+
|
33
|
+
singleton.value = createSingleton(
|
34
|
+
tippyInstances,
|
35
|
+
optionalProps
|
36
|
+
? { allowHTML: true, ...optionalProps }
|
37
|
+
: { allowHTML: true }
|
38
|
+
)
|
39
|
+
})
|
40
|
+
|
41
|
+
return {
|
42
|
+
singleton,
|
43
|
+
}
|
44
|
+
}
|
@@ -0,0 +1,255 @@
|
|
1
|
+
import tippy, { Instance, Props, Content } from 'tippy.js'
|
2
|
+
import {
|
3
|
+
ref,
|
4
|
+
onMounted,
|
5
|
+
Ref,
|
6
|
+
isRef,
|
7
|
+
isReactive,
|
8
|
+
isVNode,
|
9
|
+
render,
|
10
|
+
watch,
|
11
|
+
VNode,
|
12
|
+
h,
|
13
|
+
onUnmounted,
|
14
|
+
getCurrentInstance,
|
15
|
+
} from 'vue'
|
16
|
+
import { TippyOptions, TippyContent } from '../types'
|
17
|
+
|
18
|
+
tippy.setDefaultProps({
|
19
|
+
//@ts-ignore
|
20
|
+
onShow: instance => {
|
21
|
+
if (!instance.props.content) return false
|
22
|
+
},
|
23
|
+
})
|
24
|
+
|
25
|
+
export function useTippy(
|
26
|
+
el: Element | (() => Element) | Ref<Element> | Ref<Element | undefined>,
|
27
|
+
opts: TippyOptions = {},
|
28
|
+
settings: {
|
29
|
+
mount: boolean
|
30
|
+
} = { mount: true }
|
31
|
+
) {
|
32
|
+
const vm = getCurrentInstance()
|
33
|
+
const instance = ref<Instance>()
|
34
|
+
const state = ref({
|
35
|
+
isEnabled: false,
|
36
|
+
isVisible: false,
|
37
|
+
isDestroyed: false,
|
38
|
+
isMounted: false,
|
39
|
+
isShown: false,
|
40
|
+
})
|
41
|
+
|
42
|
+
let container: any = null
|
43
|
+
|
44
|
+
const getContainer = () => {
|
45
|
+
if (container) return container
|
46
|
+
container = document.createDocumentFragment()
|
47
|
+
return container
|
48
|
+
}
|
49
|
+
|
50
|
+
const getContent = (content: TippyContent): Content => {
|
51
|
+
let newContent: Content
|
52
|
+
|
53
|
+
let unwrappedContent: Content | VNode | { render: Function } = isRef(
|
54
|
+
content
|
55
|
+
)
|
56
|
+
? content.value
|
57
|
+
: content
|
58
|
+
|
59
|
+
if (isVNode(unwrappedContent)) {
|
60
|
+
if (vm) {
|
61
|
+
unwrappedContent.appContext = vm.appContext
|
62
|
+
}
|
63
|
+
|
64
|
+
render(unwrappedContent, getContainer())
|
65
|
+
newContent = () => getContainer()
|
66
|
+
} else if (typeof unwrappedContent === 'object') {
|
67
|
+
let comp = h(unwrappedContent)
|
68
|
+
|
69
|
+
if (vm) {
|
70
|
+
comp.appContext = vm.appContext
|
71
|
+
}
|
72
|
+
|
73
|
+
render(comp, getContainer())
|
74
|
+
|
75
|
+
newContent = () => getContainer()
|
76
|
+
} else {
|
77
|
+
newContent = unwrappedContent
|
78
|
+
}
|
79
|
+
|
80
|
+
return newContent
|
81
|
+
}
|
82
|
+
|
83
|
+
const getProps = (opts: TippyOptions): Partial<Props> => {
|
84
|
+
let options: any = {}
|
85
|
+
|
86
|
+
if (isRef(opts)) {
|
87
|
+
options = opts.value || {}
|
88
|
+
} else if (isReactive(opts)) {
|
89
|
+
options = { ...opts }
|
90
|
+
} else {
|
91
|
+
options = { ...opts }
|
92
|
+
}
|
93
|
+
|
94
|
+
if (options.content) {
|
95
|
+
options.content = getContent(options.content)
|
96
|
+
}
|
97
|
+
|
98
|
+
if (options.triggerTarget) {
|
99
|
+
options.triggerTarget = isRef(options.triggerTarget)
|
100
|
+
? options.triggerTarget.value
|
101
|
+
: options.triggerTarget
|
102
|
+
}
|
103
|
+
|
104
|
+
if (!options.plugins || !Array.isArray(options.plugins)) {
|
105
|
+
options.plugins = []
|
106
|
+
}
|
107
|
+
|
108
|
+
options.plugins = options.plugins.filter((plugin: any) => plugin.name !== 'vueTippyReactiveState');
|
109
|
+
|
110
|
+
options.plugins.push({
|
111
|
+
name: 'vueTippyReactiveState',
|
112
|
+
fn: () => {
|
113
|
+
return {
|
114
|
+
onCreate() {
|
115
|
+
state.value.isEnabled = true
|
116
|
+
},
|
117
|
+
onMount() {
|
118
|
+
state.value.isMounted = true
|
119
|
+
},
|
120
|
+
onShow() {
|
121
|
+
state.value.isMounted = true
|
122
|
+
state.value.isVisible = true
|
123
|
+
},
|
124
|
+
onShown() {
|
125
|
+
state.value.isShown = true
|
126
|
+
},
|
127
|
+
onHide() {
|
128
|
+
state.value.isMounted = false
|
129
|
+
state.value.isVisible = false
|
130
|
+
},
|
131
|
+
onHidden() {
|
132
|
+
state.value.isShown = false
|
133
|
+
},
|
134
|
+
onUnmounted() {
|
135
|
+
state.value.isMounted = false
|
136
|
+
},
|
137
|
+
onDestroy() {
|
138
|
+
state.value.isDestroyed = true
|
139
|
+
},
|
140
|
+
}
|
141
|
+
}
|
142
|
+
})
|
143
|
+
|
144
|
+
return options as Props
|
145
|
+
}
|
146
|
+
|
147
|
+
const refresh = () => {
|
148
|
+
if (!instance.value) return
|
149
|
+
|
150
|
+
instance.value.setProps(getProps(opts))
|
151
|
+
}
|
152
|
+
|
153
|
+
const refreshContent = () => {
|
154
|
+
if (!instance.value || !opts.content) return
|
155
|
+
|
156
|
+
instance.value.setContent(getContent(opts.content))
|
157
|
+
}
|
158
|
+
|
159
|
+
const setContent = (value: TippyContent) => {
|
160
|
+
instance.value?.setContent(getContent(value))
|
161
|
+
}
|
162
|
+
|
163
|
+
const setProps = (value: TippyOptions) => {
|
164
|
+
instance.value?.setProps(getProps(value))
|
165
|
+
}
|
166
|
+
|
167
|
+
const destroy = () => {
|
168
|
+
if (instance.value) {
|
169
|
+
try {
|
170
|
+
//@ts-ignore
|
171
|
+
// delete instance.value.reference.$tippy
|
172
|
+
} catch (error) { }
|
173
|
+
|
174
|
+
instance.value.destroy()
|
175
|
+
instance.value = undefined
|
176
|
+
}
|
177
|
+
container = null
|
178
|
+
}
|
179
|
+
|
180
|
+
const show = () => {
|
181
|
+
instance.value?.show()
|
182
|
+
}
|
183
|
+
|
184
|
+
const hide = () => {
|
185
|
+
instance.value?.hide()
|
186
|
+
}
|
187
|
+
|
188
|
+
const disable = () => {
|
189
|
+
instance.value?.disable()
|
190
|
+
state.value.isEnabled = false;
|
191
|
+
}
|
192
|
+
|
193
|
+
const enable = () => {
|
194
|
+
instance.value?.enable()
|
195
|
+
state.value.isEnabled = true;
|
196
|
+
}
|
197
|
+
|
198
|
+
const unmount = () => {
|
199
|
+
instance.value?.unmount()
|
200
|
+
}
|
201
|
+
|
202
|
+
const mount = () => {
|
203
|
+
if (!el) return
|
204
|
+
|
205
|
+
let target = isRef(el) ? el.value : el
|
206
|
+
|
207
|
+
if (typeof target === 'function') target = target()
|
208
|
+
|
209
|
+
if (target) {
|
210
|
+
instance.value = tippy(target, getProps(opts))
|
211
|
+
//@ts-ignore
|
212
|
+
target.$tippy = response
|
213
|
+
}
|
214
|
+
}
|
215
|
+
|
216
|
+
const response = {
|
217
|
+
tippy: instance,
|
218
|
+
refresh,
|
219
|
+
refreshContent,
|
220
|
+
setContent,
|
221
|
+
setProps,
|
222
|
+
destroy,
|
223
|
+
hide,
|
224
|
+
show,
|
225
|
+
disable,
|
226
|
+
enable,
|
227
|
+
unmount,
|
228
|
+
mount,
|
229
|
+
state,
|
230
|
+
}
|
231
|
+
|
232
|
+
if (settings.mount) {
|
233
|
+
if (vm) {
|
234
|
+
if (vm.isMounted) {
|
235
|
+
mount()
|
236
|
+
} else {
|
237
|
+
onMounted(mount)
|
238
|
+
}
|
239
|
+
|
240
|
+
onUnmounted(() => {
|
241
|
+
destroy()
|
242
|
+
})
|
243
|
+
} else {
|
244
|
+
mount()
|
245
|
+
}
|
246
|
+
}
|
247
|
+
|
248
|
+
if (isRef(opts) || isReactive(opts)) {
|
249
|
+
watch(opts, refresh, { immediate: false })
|
250
|
+
} else if (isRef(opts.content)) {
|
251
|
+
watch(opts.content, refreshContent, { immediate: false })
|
252
|
+
}
|
253
|
+
|
254
|
+
return response
|
255
|
+
}
|
@@ -0,0 +1,25 @@
|
|
1
|
+
import { h, ref } from 'vue'
|
2
|
+
import { TippyComponent, TippyOptions } from '../types'
|
3
|
+
import Tippy from './../components/Tippy'
|
4
|
+
|
5
|
+
export function useTippyComponent(
|
6
|
+
opts: TippyOptions = {},
|
7
|
+
children?: any
|
8
|
+
) {
|
9
|
+
const instance = ref<TippyComponent>()
|
10
|
+
|
11
|
+
return {
|
12
|
+
instance,
|
13
|
+
TippyComponent: h(
|
14
|
+
Tippy,
|
15
|
+
{
|
16
|
+
...opts as any,
|
17
|
+
onVnodeMounted: (vnode:any) => {
|
18
|
+
//@ts-ignore
|
19
|
+
instance.value = vnode.component.ctx
|
20
|
+
},
|
21
|
+
},
|
22
|
+
children
|
23
|
+
),
|
24
|
+
}
|
25
|
+
}
|