Skip to content

Commit d5b88a8

Browse files
thecodewarriorthecodewarrior
committed
Documentation
1 parent e9fe3a1 commit d5b88a8

16 files changed

+321
-1265
lines changed

‎LICENSE

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
Copyright 2021 thecodewarrior
2+
3+
Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
4+
5+
1. Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
6+
7+
2. Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
8+
9+
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

‎README.md

Lines changed: 6 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,8 @@
1-
# tippy.vue
1+
<div align="center">
2+
<img src="./tippy+vue.min.svg" alt="Tippy+Vue logo"/>
3+
</div>
24

3-
## Project setup
4-
```
5-
yarn install
6-
```
5+
<div align="center">
6+
<h1>Tippy.vue</h1>
7+
</div>
78

8-
### Compiles and hot-reloads for development
9-
```
10-
yarn serve
11-
```
12-
13-
### Compiles and minifies for production
14-
```
15-
yarn build
16-
```
17-
18-
### Run your unit tests
19-
```
20-
yarn test:unit
21-
```
22-
23-
### Lints and fixes files
24-
```
25-
yarn lint
26-
```
27-
28-
### Customize configuration
29-
See [Configuration Reference](https://cli.vuejs.org/config/).

‎docs/.vuepress/config.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import {path} from '@vuepress/utils'
22
import {AppOptions, DefaultThemeOptions} from "vuepress";
3+
var x = require("../../package.json")
34

45
module.exports = <Partial<AppOptions>>{
56
base: '/Tippy.vue/',
@@ -12,8 +13,7 @@ module.exports = <Partial<AppOptions>>{
1213
},
1314
themeConfig: <Partial<DefaultThemeOptions>>{
1415
repoLabel: 'Contribute!',
15-
// git repo here... gitlab, github
16-
repo: 'https://github.com/siegerts/vue-component-library-template',
16+
repo: 'https://github.com/thecodewarrior/Tippy.vue',
1717
docsDir: 'docs',
1818
docsBranch: 'master',
1919
search: false,
@@ -65,5 +65,5 @@ module.exports = <Partial<AppOptions>>{
6565
}
6666
],
6767
'vuepress-plugin-attrs'
68-
]
68+
],
6969
}

‎docs/demo.md

Lines changed: 0 additions & 3 deletions
This file was deleted.

‎docs/getting-started.md

Lines changed: 103 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,105 @@
11
# Getting Started
22

3+
## CDN
4+
5+
Tippy.vue doesn't bundle Tippy.js, so that needs to be added before Tippy.vue. The most up-to-date install process is
6+
explained [in the Tippy docs](https://atomiks.github.io/tippyjs/v6/getting-started/#2-cdn), but I'll include the Tippy
7+
instructions as of the time of writing.
8+
9+
To include Tippy.vue, add the Tippy.js scripts, then the Tippy.vue script:
10+
```html
11+
<!-- Development -->
12+
<script src="https://unpkg.com/@popperjs/core@2/dist/umd/popper.min.js"></script>
13+
<script src="https://unpkg.com/tippy.js@6/dist/tippy-bundle.umd.js"></script>
14+
15+
<script src="https://unpkg.com/tippy.vue@3"></script>
16+
17+
<!-- Production -->
18+
<script src="https://unpkg.com/@popperjs/core@2"></script>
19+
<script src="https://unpkg.com/tippy.js@6"></script>
20+
21+
<script src="https://unpkg.com/tippy.vue@3"></script>
22+
```
23+
24+
You can use Tippy.vue as a plugin or access the individual components directly:
25+
```js
26+
// use the plugin
27+
app.use(TippyVue);
28+
app.use(TippyVue, {
29+
// convenience to set tippy.js default props
30+
});
31+
32+
// or add them individually
33+
app.directive('tippy', TippyVue.TippyDirective);
34+
app.component('tippy', TippyVue.Tippy);
35+
app.component('tippy-singleton', TippyVue.TippySingleton);
36+
tippy.setDefaultProps({
37+
// default tippy props
38+
});
39+
```
40+
41+
## Package Manager
42+
43+
```shell
44+
npm install --save tippy.vue
45+
yarn add tippy.vue
46+
```
47+
48+
In your application you can define the components globally using the plugin or on your own:
49+
```js
50+
// use the plugin
51+
import {TippyPlugin} from 'tippy.vue';
52+
53+
app.use(TippyPlugin);
54+
app.use(TippyPlugin, {
55+
// convenience to set tippy.js default props
56+
});
57+
58+
// or add them individually
59+
import {TippyDirective, Tippy, TippySingleton} from 'tippy.vue';
60+
import tippy from 'tippy.js'
61+
62+
app.directive('tippy', TippyDirective);
63+
app.component('tippy', Tippy);
64+
app.component('tippy-singleton', TippySingleton);
65+
tippy.setDefaultProps({
66+
// default tippy props
67+
});
68+
```
69+
70+
You will also have to include the Tippy.js CSS in your global stylesheet:
71+
```css
72+
@import '~tippy.js/dist/tippy.css';
73+
```
74+
75+
You can also add them in individual components:
76+
```vue
77+
<template>
78+
<div v-tippy>Wow</div>
79+
<tippy>Cool</tippy>
80+
</template>
81+
82+
<script>
83+
import {Tippy, TippyDirective} from 'tippy.vue'
84+
85+
export default {
86+
components: {
87+
Tippy
88+
},
89+
directives: {
90+
tippy: TippyDirective
91+
}
92+
}
93+
</script>
94+
```
95+
96+
# Demo
97+
398
## `v-tippy`
499

5-
The most basic tooltips can be created purely using the `v-tippy` directive. The value of the directive either a string
6-
or a [tippy props object](https://atomiks.github.io/tippyjs/v6/all-props/). The v-tippy directive is also used without
7-
a value (`<... v-tippy>`) to mark targets for the `<tippy>` component.
100+
The most basic tooltips can be created purely using the `v-tippy` directive. The value of the directive is either a
101+
string or a [tippy props object](https://atomiks.github.io/tippyjs/v6/all-props/). The `v-tippy` directive is also used
102+
without a value (`<... v-tippy>`) to mark targets for the `<tippy>` component.
8103

9104
<demo v-slot="{seconds}">
10105
<button v-tippy="'Some content'">Static</button>
@@ -74,8 +169,8 @@ tooltipped elements.
74169
### `deep-search`
75170

76171
If you need to search in more than just the siblings, you can use `deep-search`, which instead uses `querySelector` on
77-
the parent element. You can bind to deeply nested elements at the cost of not being able to chain them (since
78-
`querySelector` always returns the first element, all your tooltips will bind to the first item)
172+
the parent element. You can bind to deeply nested elements at the cost of not being able to chain them (since
173+
`querySelector` always returns the first element, all your tooltips will bind to the first item)
79174

80175
<demo>
81176
<tippy target="box" deep-search>Attachment</tippy>
@@ -126,14 +221,6 @@ Singletons with tippy-singleton
126221
</demo>
127222

128223
```vue
129-
<tippy-singleton/>
130-
<button v-tippy>1</button>
131-
<tippy singleton :extra="{delay: 500}">Item 1</tippy>
132-
<button v-tippy>2</button>
133-
<tippy singleton :extra="{delay: 500}">Item 2</tippy>
134-
<button v-tippy>3</button>
135-
<tippy singleton :extra="{delay: 500}">Item 3</tippy>
136-
<!-- or... -->
137224
<tippy-singleton :extra="{delay: 500}"/>
138225
<button v-tippy>1</button>
139226
<tippy singleton>Item 1</tippy>
@@ -143,8 +230,9 @@ Singletons with tippy-singleton
143230
<tippy singleton>Item 3</tippy>
144231
```
145232

146-
`tippy-singleton` uses a variation of the search algorithm used by the tippy target. On each level of the hierarchy it's
147-
identical, but it progressively searches through its parent elements.
233+
`tippy-singleton` uses a variation of the search algorithm used by the tippy target. On each level of the hierarchy it
234+
looks for the nearest previous singleton, then the nearest next singleton. If it doesn't find one, it repeats the search
235+
in the parent element.
148236

149237
<demo>
150238
<tippy-singleton :extra="{delay: 500}"/>

‎docs/reference/tippy.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ element.
2323
<tippy target="html">Bold time: <b>{{seconds}}</b></tippy>
2424
```
2525

26-
## Unique Props
26+
## Props
2727

2828
Note that a bare attribute is identical to `''`. This is used for several flag-like properties.
2929
(e.g. `<tippy interactive></tippy>`)

‎package.json

Lines changed: 32 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,61 @@
11
{
22
"name": "tippy.vue",
3-
"version": "0.1.0",
4-
"private": true,
3+
"version": "1.0.0+vue-3",
4+
"license": "BSD-2-Clause",
5+
6+
"description": "Nesting-free Vue components for Tippy.js - a drop-in addition with no structural or css changes required",
7+
"keywords": [
8+
"tooltip",
9+
"popover",
10+
"tippy",
11+
"tippy.js",
12+
"vue"
13+
],
14+
"homepage": "https://thecodewarrior.github.io/Tippy.vue",
15+
"author": {
16+
"name": "Pierce Corcoran",
17+
"email": "code@thecodewarrior.dev",
18+
"url": "https://thecodewarrior.dev"
19+
},
20+
"repository": {
21+
"type": "git",
22+
"url": "https://github.com/thecodewarrior/Tippy.vue.git"
23+
},
24+
25+
"files": [
26+
"dist/",
27+
"LICENSE",
28+
"README.md",
29+
"tippy+vue.min.svg"
30+
],
531
"main": "dist/index.cjs.js",
632
"module": "dist/index.esm.js",
7-
"browser": "dist/index.umd.js",
33+
"browser": "dist/tippy.vue.js",
34+
"browserMin": "dist/tippy.vue.min.js",
35+
"unpkg": "dist/tippy.vue.min.js",
836
"scripts": {
9-
"serve": "vue-cli-service serve",
1037
"build": "rollup --config",
11-
"test:unit": "vue-cli-service test:unit",
1238
"docs:dev": "vuepress dev docs",
13-
"docs:build": "vuepress build docs",
14-
"lint": "vue-cli-service lint"
39+
"docs:build": "vuepress build docs"
1540
},
1641
"dependencies": {
17-
"core-js": "^3.6.5",
1842
"tippy.js": "^6.3.7"
1943
},
2044
"peerDependencies": {
2145
"vue": "^3.0.0"
2246
},
2347
"devDependencies": {
2448
"@rollup/plugin-node-resolve": "^13.0.6",
25-
"@types/chai": "^4.2.11",
26-
"@types/mocha": "^5.2.4",
2749
"@typescript-eslint/eslint-plugin": "^4.18.0",
2850
"@typescript-eslint/parser": "^4.18.0",
2951
"@vue/cli": "^5.0.0-rc.1",
3052
"@vue/cli-plugin-babel": "^5.0.0-rc.1",
3153
"@vue/cli-plugin-eslint": "^5.0.0-rc.1",
3254
"@vue/cli-plugin-typescript": "^5.0.0-rc.1",
33-
"@vue/cli-plugin-unit-mocha": "5.0.0-rc.1",
3455
"@vue/cli-service": "^5.0.0-rc.1",
3556
"@vue/compiler-sfc": "^3.0.0",
3657
"@vue/eslint-config-typescript": "^7.0.0",
37-
"@vue/test-utils": "^2.0.0-0",
3858
"@vuepress/plugin-register-components": "^2.0.0-beta.27",
39-
"chai": "^4.1.2",
4059
"eslint": "^6.7.2",
4160
"eslint-plugin-vue": "^7.0.0",
4261
"rollup": "^2.60.2",

‎rollup.config.js

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,25 @@ export default [
2121
plugins: [
2222
typescript(),
2323
resolve(),
24-
// terser()
24+
]
25+
},
26+
{
27+
input: 'src/index.ts',
28+
external: ['vue', 'tippy.js'],
29+
output: {
30+
name: 'TippyVue',
31+
file: pkg.browserMin,
32+
format: 'umd',
33+
sourcemap: true,
34+
globals: {
35+
'vue': 'Vue',
36+
'tippy.js': 'tippy'
37+
}
38+
},
39+
plugins: [
40+
typescript(),
41+
resolve(),
42+
terser(),
2543
]
2644
},
2745
{

‎src/index.ts

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,20 @@
1-
import {Plugin} from "vue";
1+
import {App, Plugin} from "vue";
22
import Tippy from "./Tippy";
33
import TippyDirective from "./TippyDirective";
44
import TippySingleton from "./TippySingleton";
55
import tippy, {DefaultProps} from "tippy.js";
66

7-
export const TippyPlugin: Plugin = {
8-
install(app, defaultProps?: Partial<DefaultProps>) {
9-
if(defaultProps) {
10-
tippy.setDefaultProps(defaultProps)
11-
}
12-
app.directive('tippy', TippyDirective)
13-
app.component('tippy', Tippy)
14-
app.component('tippy-singleton', TippySingleton)
7+
export function install(app: App, defaultProps?: Partial<DefaultProps>) {
8+
if (defaultProps) {
9+
tippy.setDefaultProps(defaultProps)
1510
}
11+
app.directive('tippy', TippyDirective)
12+
app.component('tippy', Tippy)
13+
app.component('tippy-singleton', TippySingleton)
14+
}
15+
16+
export const TippyPlugin: Plugin = {
17+
install
1618
}
1719

1820
export {default as TippyDirective} from "./TippyDirective"

‎test.html

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<script src="https://unpkg.com/vue@next"></script>
66
<script src="https://unpkg.com/@popperjs/core@2/dist/umd/popper.min.js"></script>
77
<script src="https://unpkg.com/tippy.js@6/dist/tippy-bundle.umd.js"></script>
8-
<script src="./dist/index.umd.js"></script>
8+
<script src="./dist/tippy.vue.js"></script>
99
</head>
1010
<body>
1111
<h1>Hi</h1>
@@ -28,8 +28,9 @@ <h1>Hi</h1>
2828
}
2929

3030
Vue.createApp(Counter)
31-
.use(TippyVue.TippyPlugin)
31+
.use(TippyVue)
3232
.mount('#counter')
3333
</script>
34+
3435
</body>
3536
</html>

‎tests/tsconfig.json

Lines changed: 0 additions & 9 deletions
This file was deleted.

0 commit comments

Comments
 (0)