huanld/vue-tippy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

wip

Browse Source
This commit is contained in:
Georges KABBOUCHI
2020-09-19 17:49:29 +03:00
parent 44b21b2866
commit a2a6c74c16
9 changed files with 194 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package.json
+3 -3
View File
@@ -20,7 +20,7 @@
"dev": "webpack-dev-server --mode=development"
},
"peerDependencies": {
"vue": "^3.0.0-rc.12"
"vue": "^3.0.0"
},
"devDependencies": {
"@rollup/plugin-alias": "^3.1.1",
@@ -29,7 +29,7 @@
"@rollup/plugin-replace": "^2.3.3",
"@types/webpack": "^4.41.21",
"@types/webpack-env": "^1.15.2",
"@vue/compiler-sfc": "^3.0.0-rc.12",
"@vue/compiler-sfc": "^3.0.0",
"css-loader": "^4.2.0",
"html-webpack-plugin": "^4.3.0",
"rollup": "^2.23.0",
@@ -41,7 +41,7 @@
"ts-loader": "^8.0.2",
"ts-node": "^8.10.2",
"typescript": "^3.9.7",
"vue": "^3.0.0-rc.12",
"vue": "^3.0.0",
"vue-loader": "^16.0.0-beta.7",
"webpack": "^4.44.1",
"webpack-bundle-analyzer": "^3.8.0",
playground/App.vue
+18 -3
View File
@@ -57,12 +57,26 @@
<div class="mt-6">
<span class="font-semibold mr-4">Tippy component + change content and props realtime using component ref:</span>
<tippy ref="tippyComponent1">
<tippy
ref="tippyComponent1"
@create="log"
@hide="log"
>
<button class="text-sm py-2 px-3 bg-gray-900 text-white rounded-lg">
Tippy Component + h(SFC) content
</button>
</tippy>
</div>
<div class="mt-6">
<span class="font-semibold mr-4">v-tippy:</span>
<button
class="text-sm py-2 px-3 bg-gray-900 text-white rounded-lg"
@mount="log"
v-tippy="{ content: 'Hello ' + counter}"
>Tippy directive</button>
</div>
</div>
</template>
<script lang="ts">
@@ -76,10 +90,9 @@ import {
onUnmounted,
watch,
} from 'vue'
import { useTippy, tippy, TippyOptions, TippyComponent } from '../src'
import { useTippy, TippyOptions, TippyComponent } from '../src'
import Counter from './Counter.vue'
tippy.setDefaultProps({ placement: 'right' })
function useMousePosition() {
const x = ref(0)
const y = ref(0)
@@ -210,6 +223,7 @@ export default defineComponent({
})
return {
counter,
button,
button2,
button3,
@@ -218,6 +232,7 @@ export default defineComponent({
button6,
button6Inc,
tippyComponent1,
log: console.log,
}
},
})
playground/main.ts
+4 -2
View File
@@ -1,9 +1,11 @@
// necessary for webpack
///<reference path="../src/global.d.ts"/>
import { createApp } from 'vue'
import { Tippy } from '../src'
import VueTippy from '../src'
import App from './App.vue'
const app = createApp(App)
app.component('tippy', Tippy)
app.use(VueTippy, {
defaultProps: { placement: 'right' },
})
app.mount('#app')
src/composables/useTippy.ts
+9 -4
View File
@@ -106,10 +106,7 @@ export function useTippy(
}
onUnmounted(() => {
if (instance.value) {
instance.value.destroy()
}
container = null
destroy()
})
} else {
init()
@@ -129,11 +126,19 @@ export function useTippy(
instance.value?.setProps(getProps(value))
}
const destroy = () => {
if (instance.value) {
instance.value.destroy()
}
container = null
}
return {
tippy: instance,
refresh,
refreshContent,
setContent,
setProps,
destroy,
}
}
src/directive/index.ts
+77
View File
@@ -0,0 +1,77 @@
import { useTippy } from '../composables'
import { Directive } from 'vue'
const directive: Directive = {
mounted(el, binding, vnode) {
const opts = binding.value || {}
if (vnode.props && vnode.props.onShow) {
opts.onShow = function (...args: any[]) {
return vnode.props?.onShow(...args)
}
}
if (vnode.props && vnode.props.onShown) {
opts.onShown = function (...args: any[]) {
return vnode.props?.onShown(...args)
}
}
if (vnode.props && vnode.props.onHidden) {
opts.onHidden = function (...args: any[]) {
return vnode.props?.onHidden(...args)
}
}
if (vnode.props && vnode.props.onHide) {
opts.onHide = function (...args: any[]) {
return vnode.props?.onHide(...args)
}
}
if (vnode.props && vnode.props.onMount) {
opts.onMount = function (...args: any[]) {
return vnode.props?.onMount(...args)
}
}
if (el.getAttribute('title') && !opts.content) {
opts.content = el.getAttribute('title')
el.removeAttribute('title')
}
if (el.getAttribute('content') && !opts.content) {
opts.content = el.getAttribute('content')
}
el.$tippy = useTippy(el, opts)
},
unmounted(el) {
if (el.$tippy) {
el.$tippy.destroy()
} else if (el._tippy) {
el._tippy.destroy()
}
},
updated(el, binding) {
const opts = binding.value || {}
if (el.getAttribute('title') && !opts.content) {
opts.content = el.getAttribute('title')
el.removeAttribute('title')
}
if (el.getAttribute('content') && !opts.content) {
opts.content = el.getAttribute('content')
}
if (el.$tippy) {
el.$tippy.setProps(opts || {})
} else if (el._tippy) {
el._tippy.setProps(opts || {})
}
},
}
export default directive
src/index.ts
+7 -1
View File
@@ -4,7 +4,11 @@ import tippy, {
followCursor,
animateFill,
} from 'tippy.js'
import Tippy from './components/Tippy'
import directive from './directive'
import plugin from './plugin'
import { useTippy } from './composables/useTippy'
import 'tippy.js/dist/tippy.css'
@@ -14,5 +18,7 @@ setDefaultProps({
plugins: [sticky, inlinePositioning, followCursor, animateFill],
})
export { useTippy, tippy, setDefaultProps, Tippy }
export { useTippy, tippy, setDefaultProps, Tippy, directive }
export * from './types'
export default plugin
src/plugin/index.ts
+16
View File
@@ -0,0 +1,16 @@
import TippyComponent from '../components/Tippy'
import directive from '../directive'
import { Plugin } from 'vue'
import tippy from 'tippy.js'
import { TippyPluginOptions } from '../types'
const plugin: Plugin = {
install(app, options: TippyPluginOptions) {
tippy.setDefaultProps(options.defaultProps || {})
app.directive(options.directive || 'tippy', directive)
app.component(options.component || 'tippy', TippyComponent)
},
}
export default plugin
src/types/index.ts
+7 -1
View File
@@ -1,5 +1,5 @@
import Tippy from '../components/Tippy'
import { Props, Content } from 'tippy.js'
import { Props, Content, DefaultProps } from 'tippy.js'
import { VNode, Ref, Component } from 'vue'
export declare type TippyContent = Content | VNode | Component | Ref
@@ -11,3 +11,9 @@ export declare type TippyOptions = Partial<
>
export declare type TippyComponent = InstanceType<typeof Tippy>
export interface TippyPluginOptions {
directive?: string
component?: string
defaultProps?: Partial<DefaultProps>
}
yarn.lock
+53 -53
View File
@@ -202,36 +202,36 @@
"@types/webpack-sources" "*"
source-map "^0.6.0"
"@vue/compiler-core@3.0.0-rc.12":
version "3.0.0-rc.12"
resolved "https://registry.yarnpkg.com/@vue/compiler-core/-/compiler-core-3.0.0-rc.12.tgz#eb26ff2f7e0eb8b362606228b2dda59c0c914f63"
integrity sha512-TuOmPb5SXgK9qD/AAmy46j80CyKThiBppcgNIJTax1ZWLEtCU8JejXOJqXFcqDUrBJPy7WVtZWRjMsiZBjIlrQ==
"@vue/compiler-core@3.0.0":
version "3.0.0"
resolved "https://registry.yarnpkg.com/@vue/compiler-core/-/compiler-core-3.0.0.tgz#25e4f079cf6c39f83bad23700f814c619105a0f2"
integrity sha512-XqPC7vdv4rFE77S71oCHmT1K4Ks3WE2Gi6Lr4B5wn0Idmp+NyQQBUHsCNieMDRiEpgtJrw+yOHslrsV0AfAsfQ==
dependencies:
"@babel/parser" "^7.11.5"
"@babel/types" "^7.11.5"
"@vue/shared" "3.0.0-rc.12"
"@vue/shared" "3.0.0"
estree-walker "^2.0.1"
source-map "^0.6.1"
"@vue/compiler-dom@3.0.0-rc.12":
version "3.0.0-rc.12"
resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.0.0-rc.12.tgz#b8468cb3f81d43ca25592026482e1330b99f2b8c"
integrity sha512-bCbXtJRYDaQL0e8i54rzUhmlB991ad08TAHiXyRK6ngTj9pO6lpJNcaHIeeOEv9gaZ6iUC7pEYtmC0708KkqDg==
"@vue/compiler-dom@3.0.0":
version "3.0.0"
resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.0.0.tgz#4cbb48fcf1f852daef2babcf9953b681ac463526"
integrity sha512-ukDEGOP8P7lCPyStuM3F2iD5w2QPgUu2xwCW2XNeqPjFKIlR2xMsWjy4raI/cLjN6W16GtlMFaZdK8tLj5PRog==
dependencies:
"@vue/compiler-core" "3.0.0-rc.12"
"@vue/shared" "3.0.0-rc.12"
"@vue/compiler-core" "3.0.0"
"@vue/shared" "3.0.0"
"@vue/compiler-sfc@^3.0.0-rc.12":
version "3.0.0-rc.12"
resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.0.0-rc.12.tgz#eff29e9688b8ed840506d88b94336689cf2970f2"
integrity sha512-lHy0LK33KjVBeu6aCX0oLUSZtatOIY/1w927Fh5nFrN1SNnqA31q2wg/IDmvNU6+Y6F3s0MZyN5H6dyZgO5r/g==
"@vue/compiler-sfc@^3.0.0":
version "3.0.0"
resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.0.0.tgz#efa38037984bd64aae315828aa5c1248c6eadca9"
integrity sha512-1Bn4L5jNRm6tlb79YwqYUGGe+Yc9PRoRSJi67NJX6icdhf84+tRMtESbx1zCLL9QixQXu2+7aLkXHxvh4RpqAA==
dependencies:
"@babel/parser" "^7.11.5"
"@babel/types" "^7.11.5"
"@vue/compiler-core" "3.0.0-rc.12"
"@vue/compiler-dom" "3.0.0-rc.12"
"@vue/compiler-ssr" "3.0.0-rc.12"
"@vue/shared" "3.0.0-rc.12"
"@vue/compiler-core" "3.0.0"
"@vue/compiler-dom" "3.0.0"
"@vue/compiler-ssr" "3.0.0"
"@vue/shared" "3.0.0"
consolidate "^0.16.0"
estree-walker "^2.0.1"
hash-sum "^2.0.0"
@@ -243,42 +243,42 @@
postcss-selector-parser "^6.0.2"
source-map "^0.6.1"
"@vue/compiler-ssr@3.0.0-rc.12":
version "3.0.0-rc.12"
resolved "https://registry.yarnpkg.com/@vue/compiler-ssr/-/compiler-ssr-3.0.0-rc.12.tgz#ea37bfb616d90c376a5ef40bc65c57514bb6fef3"
integrity sha512-mJkTLS91Ji7ahZT8tuYnXJ+C0dzpwq6uIILVx2e82jHzPQ2Yl0owK5wVGJR1Kuy5ZT+9AczyyBgvxGiZjsFzdw==
"@vue/compiler-ssr@3.0.0":
version "3.0.0"
resolved "https://registry.yarnpkg.com/@vue/compiler-ssr/-/compiler-ssr-3.0.0.tgz#d717abcd23a89fb38d1497228633a21bcf9a0e28"
integrity sha512-Er41F9ZFyKB3YnNbE6JSTIGCVWve3NAQimgDOk4uP42OnckxBYKGBTutDeFNeqUZBMu/9vRHYrxlGFC9Z5jBVQ==
dependencies:
"@vue/compiler-dom" "3.0.0-rc.12"
"@vue/shared" "3.0.0-rc.12"
"@vue/compiler-dom" "3.0.0"
"@vue/shared" "3.0.0"
"@vue/reactivity@3.0.0-rc.12":
version "3.0.0-rc.12"
resolved "https://registry.yarnpkg.com/@vue/reactivity/-/reactivity-3.0.0-rc.12.tgz#9f5c6da78729fe80cc47d23bc8b6c09b36998a29"
integrity sha512-Cz2wwwH7QpG2BDmmZ9Lia+soji9i3QjzMf1Mko3kIEHHGkeid6OxOaMXBEMCJjAyiRt+1VTHBZv6FgsUJeaDAQ==
"@vue/reactivity@3.0.0":
version "3.0.0"
resolved "https://registry.yarnpkg.com/@vue/reactivity/-/reactivity-3.0.0.tgz#fd15632a608650ce2a969c721787e27e2c80aa6b"
integrity sha512-mEGkztGQrAPZRhV7C6PorrpT3+NtuA4dY2QjMzzrW31noKhssWTajRZTwpLF39NBRrF5UU6cp9+1I0FfavMgEQ==
dependencies:
"@vue/shared" "3.0.0-rc.12"
"@vue/shared" "3.0.0"
"@vue/runtime-core@3.0.0-rc.12":
version "3.0.0-rc.12"
resolved "https://registry.yarnpkg.com/@vue/runtime-core/-/runtime-core-3.0.0-rc.12.tgz#021dbfabe5f50043790fb80d5235b6cedb3de4ac"
integrity sha512-RHt02volaaXwbkS3RJpLVSZm/qRQgqwB0ThWNlfb+FKcLwr1Bcyu08yrUXv2QI2mMbV4f/zInk6S44eUuuDcyg==
"@vue/runtime-core@3.0.0":
version "3.0.0"
resolved "https://registry.yarnpkg.com/@vue/runtime-core/-/runtime-core-3.0.0.tgz#480febf1bfe32798b6abbd71a88f8e8b473a51c2"
integrity sha512-3ABMLeA0ZbeVNLbGGLXr+pNUwqXILOqz8WCVGfDWwQb+jW114Cm8djOHVVDoqdvRETQvDf8yHSUmpKHZpQuTkA==
dependencies:
"@vue/reactivity" "3.0.0-rc.12"
"@vue/shared" "3.0.0-rc.12"
"@vue/reactivity" "3.0.0"
"@vue/shared" "3.0.0"
"@vue/runtime-dom@3.0.0-rc.12":
version "3.0.0-rc.12"
resolved "https://registry.yarnpkg.com/@vue/runtime-dom/-/runtime-dom-3.0.0-rc.12.tgz#cdc197736d6092bfcc39bdf50349a28f175d2103"
integrity sha512-CeJ+CxeE1nBIGd4OFiYHCyiXtnBZAvLCA+yq4IKnCn0IHwJVZJCpwXe8VvE7eU3eqNYatqN65kt6QgrYzu6m+Q==
"@vue/runtime-dom@3.0.0":
version "3.0.0"
resolved "https://registry.yarnpkg.com/@vue/runtime-dom/-/runtime-dom-3.0.0.tgz#e0d1f7c7e22e1318696014cc3501e06b288c2e11"
integrity sha512-f312n5w9gK6mVvkDSj6/Xnot1XjlKXzFBYybmoy6ahAVC8ExbQ+LOWti1IZM/adU8VMNdKaw7Q53Hxz3y5jX8g==
dependencies:
"@vue/runtime-core" "3.0.0-rc.12"
"@vue/shared" "3.0.0-rc.12"
"@vue/runtime-core" "3.0.0"
"@vue/shared" "3.0.0"
csstype "^2.6.8"
"@vue/shared@3.0.0-rc.12":
version "3.0.0-rc.12"
resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.0.0-rc.12.tgz#b114d999d6f51191f4ff6b284fa7bddf4c8589bc"
integrity sha512-UwkiTl7XVQ3vu22t7JgUGLNXSxvsr500W43V2I1N4B3vxBRGB1OLzCjGPtXMIXtWhZlaaZzivEU1zmr5sqmgaw==
"@vue/shared@3.0.0":
version "3.0.0"
resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.0.0.tgz#ec089236629ecc0f10346b92f101ff4339169f1a"
integrity sha512-4XWL/avABGxU2E2ZF1eZq3Tj7fvksCMssDZUHOykBIMmh5d+KcAnQMC5XHMhtnA0NAvktYsA2YpdsVwVmhWzvA==
"@webassemblyjs/ast@1.9.0":
version "1.9.0"
@@ -5697,14 +5697,14 @@ vue-loader@^16.0.0-beta.7:
merge-source-map "^1.1.0"
source-map "^0.6.1"
vue@^3.0.0-rc.12:
version "3.0.0-rc.12"
resolved "https://registry.yarnpkg.com/vue/-/vue-3.0.0-rc.12.tgz#08849531c9255f290b552912ae52802c5bc323d5"
integrity sha512-T/oWhPRPzIRzPvTjf9mI8oENYlAPr9ThB4JAJXJE3dlRAN7lYzH+eh4yBGR9EsyC+pIEAabP/cnM19dcJBNl3A==
vue@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/vue/-/vue-3.0.0.tgz#cfb5df5c34efce319b113a1667d12b74dcfd9c90"
integrity sha512-ZMrAARZ32sGIaYKr7Fk2GZEBh/VhulSrGxcGBiAvbN4fhjl3tuJyNFbbbLFqGjndbLoBW66I2ECq8ICdvkKdJw==
dependencies:
"@vue/compiler-dom" "3.0.0-rc.12"
"@vue/runtime-dom" "3.0.0-rc.12"
"@vue/shared" "3.0.0-rc.12"
"@vue/compiler-dom" "3.0.0"
"@vue/runtime-dom" "3.0.0"
"@vue/shared" "3.0.0"
watchpack-chokidar2@^2.0.0:
version "2.0.0"