vue-tippy 6.0.0-alpha.9 → 6.0.0
Sign up to get free protection for your applications and to get access to all the features.
- package/README.md +111 -3
- package/dist/{vue-tippy.cjs.prod.js → vue-tippy.cjs} +1029 -266
- package/dist/vue-tippy.d.ts +698 -29
- package/dist/{vue-tippy.esm-bundler.js → vue-tippy.esm-browser.js} +699 -256
- package/dist/{vue-tippy.global.js → vue-tippy.iife.js} +1030 -267
- package/dist/vue-tippy.iife.prod.js +6 -0
- package/dist/{vue-tippy.esm.js → vue-tippy.mjs} +699 -256
- package/dist/{vue-tippy.cjs.js → vue-tippy.prod.cjs} +713 -266
- package/index.cjs +7 -0
- package/index.js +7 -0
- package/package.json +36 -13
- 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/README.md
CHANGED
|
@@ -1,5 +1,113 @@
|
|
|
1
|
-
# VueTippy - V6
|
|
1
|
+
# VueTippy - V6
|
|
2
2
|
|
|
3
|
-
[](https://www.npmjs.com/package/vue-tippy) [](https://www.npmjs.com/package/vue-tippy) [](https://vuejs.org/) [](https://www.npmjs.com/package/vue-tippy)
|
|
4
4
|
|
|
5
|
-
>
|
|
5
|
+
> Vue.js 3 wrapper for Tippy.js
|
|
6
|
+
|
|
7
|
+
<aside class="notice">
|
|
8
|
+
<a href="https://github.com/KABBOUCHI/vue-tippy/tree/v4">For Tippy.js v4 use v4 branch</a>
|
|
9
|
+
</aside>
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
## Documentation
|
|
13
|
+
|
|
14
|
+
For full v6 documentation, visit [https://vue-tippy.netlify.app/](https://vue-tippy.netlify.app/).
|
|
15
|
+
|
|
16
|
+
## Installation
|
|
17
|
+
|
|
18
|
+
```js
|
|
19
|
+
npm install vue-tippy@v6
|
|
20
|
+
|
|
21
|
+
//or
|
|
22
|
+
|
|
23
|
+
yarn add vue-tippy@v6
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
## Configuration (optional)
|
|
27
|
+
|
|
28
|
+
```js
|
|
29
|
+
import { createApp } from 'vue'
|
|
30
|
+
|
|
31
|
+
import VueTippy from 'vue-tippy'
|
|
32
|
+
// or
|
|
33
|
+
import { plugin as VueTippy } from 'vue-tippy'
|
|
34
|
+
|
|
35
|
+
const app = createApp({})
|
|
36
|
+
|
|
37
|
+
app.use(
|
|
38
|
+
VueTippy,
|
|
39
|
+
// optional
|
|
40
|
+
{
|
|
41
|
+
directive: 'tippy', // => v-tippy
|
|
42
|
+
component: 'tippy', // => <tippy/>
|
|
43
|
+
}
|
|
44
|
+
)
|
|
45
|
+
|
|
46
|
+
app.mount('#app')
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
## Usage
|
|
50
|
+
|
|
51
|
+
### Vue Directive
|
|
52
|
+
|
|
53
|
+
```html
|
|
54
|
+
<template>
|
|
55
|
+
<button v-tippy="{ content: 'Hi!' }">Tippy!</button>
|
|
56
|
+
<button v-tippy="'Hello!'">Tippy!</button>
|
|
57
|
+
</template>
|
|
58
|
+
|
|
59
|
+
<!--
|
|
60
|
+
The below is optional in case you
|
|
61
|
+
installed the plugin globally
|
|
62
|
+
-->
|
|
63
|
+
<script>
|
|
64
|
+
import { directive } from 'vue-tippy'
|
|
65
|
+
|
|
66
|
+
export default {
|
|
67
|
+
directives: {
|
|
68
|
+
tippy: directive,
|
|
69
|
+
},
|
|
70
|
+
}
|
|
71
|
+
</script>
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
### Vue Component
|
|
75
|
+
|
|
76
|
+
```html
|
|
77
|
+
<template>
|
|
78
|
+
<tippy content="Hi!">
|
|
79
|
+
<button>Tippy!</button>
|
|
80
|
+
</tippy>
|
|
81
|
+
</template>
|
|
82
|
+
|
|
83
|
+
<!--
|
|
84
|
+
The below is optional in case you
|
|
85
|
+
installed the plugin globally
|
|
86
|
+
-->
|
|
87
|
+
<script>
|
|
88
|
+
import { Tippy } from 'vue-tippy'
|
|
89
|
+
|
|
90
|
+
export default {
|
|
91
|
+
components: [Tippy],
|
|
92
|
+
}
|
|
93
|
+
</script>
|
|
94
|
+
```
|
|
95
|
+
|
|
96
|
+
### Using composition api
|
|
97
|
+
|
|
98
|
+
```js
|
|
99
|
+
import { defineComponent, ref, h } from 'vue'
|
|
100
|
+
import { useTippy } from 'vue-tippy'
|
|
101
|
+
|
|
102
|
+
export default defineComponent({
|
|
103
|
+
setup() {
|
|
104
|
+
const button = ref()
|
|
105
|
+
|
|
106
|
+
useTippy(button, {
|
|
107
|
+
content: 'Hi!',
|
|
108
|
+
})
|
|
109
|
+
|
|
110
|
+
return () => h('button', { ref: button }, 'Tippy!')
|
|
111
|
+
},
|
|
112
|
+
})
|
|
113
|
+
```
|