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