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
2021-01-01 01:01:18 +02:00
parent dc6ca86544
commit e2f3528c10
12 changed files with 8716 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package.json
+1
View File
@@ -33,6 +33,7 @@
"@types/webpack": "^4.41.21",
"@types/webpack-env": "^1.15.2",
"@vue/compiler-sfc": "^3.0.0",
"@vue/composition-api": "^1.0.0-beta.22",
"css-loader": "^4.2.0",
"html-webpack-plugin": "^4.3.0",
"rollup": "^2.23.0",
playground-vue2/package.json
+54
View File
@@ -0,0 +1,54 @@
{
"name": "vue",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"@vue/cli-plugin-babel": "4.1.1",
"@vue/composition-api": "1.0.0-beta.22",
"vue": "2.6.12",
"vue-tippy": "../"
},
"devDependencies": {
"@vue/cli-plugin-eslint": "4.1.1",
"@vue/cli-service": "4.1.1",
"babel-eslint": "^10.0.3",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.0.1",
"vue-template-compiler": "^2.6.11"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"rules": {},
"parserOptions": {
"parser": "babel-eslint"
}
},
"postcss": {
"plugins": {
"autoprefixer": {}
}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
],
"keywords": [
"vue",
"vuejs",
"starter"
],
"description": "Vue.js example starter project"
}
playground-vue2/public/index.html
+16
View File
@@ -0,0 +1,16 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link
href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
rel="stylesheet"
/>
</head>
<body class="py-4 px-24">
<h1 class="font-bold text-2xl">Vue 2</h1>
<div id="app" class="mt-4 container mx-auto"></div>
</body>
</html>
playground-vue2/src/App.vue
+238
View File
@@ -0,0 +1,238 @@
<template>
<div>
<div class="mt-6">
<span class="font-semibold mr-4">useTippy + callbacks(console.log):</span>
<button
class="text-sm py-2 px-3 bg-gray-900 text-white rounded-lg"
ref="button"
>My Button</button>
</div>
<div class="mt-6">
<span class="font-semibold mr-4">useTippy + h(tag) content:</span>
<button
class="text-sm py-2 px-3 bg-gray-900 text-white rounded-lg"
ref="button2"
>My Button 2</button>
</div>
<div class="mt-6">
<span class="font-semibold mr-4">useTippy + h (reactive) content:</span>
<button
class="text-sm py-2 px-3 bg-gray-900 text-white rounded-lg"
ref="button3"
>My Button 3</button>
</div>
<div class="mt-6">
<span class="font-semibold mr-4">useTippy + h(SFC) content:</span>
<button
class="text-sm py-2 px-3 bg-gray-900 text-white rounded-lg"
ref="button4"
>My Button 4</button>
</div>
<div class="mt-6">
<span class="font-semibold mr-4">useTippy + SFC content:</span>
<button
class="text-sm py-2 px-3 bg-gray-900 text-white rounded-lg"
ref="button5"
>My Button 5</button>
</div>
<div class="mt-6">
<span class="font-semibold mr-4">useTippy + reactive options:</span>
<button
class="mr-4 text-sm py-2 px-3 bg-gray-900 text-white rounded-lg"
@click="button6Inc"
>My Button 6 - Inc & Refresh</button>
<button
class="text-sm py-2 px-3 bg-gray-900 text-white rounded-lg"
ref="button6"
>My Button 6</button>
</div>
<div class="mt-6 space-x-2">
<span class="font-semibold mr-4">Singleton tippy with a transition:</span>
<button
class="text-sm py-2 px-3 bg-gray-900 text-white rounded-lg"
ref="singleton1"
>singleton1</button>
<button
class="text-sm py-2 px-3 bg-gray-900 text-white rounded-lg"
ref="singleton2"
>singleton2</button>
<button
class="text-sm py-2 px-3 bg-gray-900 text-white rounded-lg"
ref="singleton3"
>singleton3</button>
</div>
</div>
</template>
<script>
import {
defineComponent,
ref,
h,
computed,
reactive,
onMounted,
onUnmounted,
watch,
} from '@vue/composition-api'
import { setDefaultProps, useSingleton, useTippy } from 'vue-tippy'
import Counter from './Counter.vue'
setDefaultProps({ placement: 'right' })
function useMousePosition() {
const x = ref(0)
const y = ref(0)
function handler(e) {
x.value = e.clientX
y.value = e.clientY
}
onMounted(() => {
window.addEventListener('mousemove', handler, false)
})
onUnmounted(() => {
window.removeEventListener('mousemove', handler, false)
})
return {
x,
y,
}
}
export default defineComponent({
setup() {
const counter = ref(0)
const button = ref()
const button2 = ref()
const button3 = ref()
const button4 = ref()
const button5 = ref()
const button6 = ref()
useTippy(button, {
content: 'Test',
onMount() {
console.log('here')
},
})
useTippy(button2, {
content: h('h1', 'hi'),
})
useTippy(button3, {
content: computed(() =>
h(
'button',
{
on: {
click: () => {
counter.value++
},
},
},
'Counter ' + counter.value
)
),
showOnCreate: true,
interactive: true,
})
useTippy(button4, {
content: h(Counter),
interactive: true,
showOnCreate: true,
})
useTippy(button5, {
content: defineComponent(() => {
return () => h('p', 'Hellooooo')
}),
interactive: true,
showOnCreate: true,
})
const options = reactive({
content: '1',
sticky: true,
showOnCreate: true,
hideOnClick: false,
trigger: 'manual',
})
useTippy(button6, options)
const button6Inc = () => {
options.content = String(parseInt(options.content) + 1)
}
const { x, y } = useMousePosition()
const { tippy } = useTippy(() => document.body, {
content: computed(() => `(${x.value},${y.value})`),
showOnCreate: true,
trigger: 'manual',
// sticky: true, // slow?
placement: 'top',
hideOnClick: false,
arrow: `<svg style="color: black;width:20px;height:20px" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-8.707l-3-3a1 1 0 00-1.414 0l-3 3a1 1 0 001.414 1.414L9 9.414V13a1 1 0 102 0V9.414l1.293 1.293a1 1 0 001.414-1.414z" clip-rule="evenodd"></path></svg>`,
getReferenceClientRect: function () {
return {
width: 0,
height: 0,
top: y.value,
right: x.value,
bottom: y.value,
left: x.value,
}
},
})
watch([x, y], () => {
if (tippy.value && tippy.value.popperInstance)
tippy.value.popperInstance.update()
})
const singleton1 = ref()
const singleton2 = ref()
const singleton3 = ref()
const { tippy: tippySingleton1 } = useTippy(singleton1, {
content: 'Singleton 1',
})
const { tippy: tippySingleton2 } = useTippy(singleton2, {
content: 'Singleton 2',
})
const { tippy: tippySingleton3 } = useTippy(singleton3, {
content: 'Singleton 3',
})
useSingleton([tippySingleton1, tippySingleton2, tippySingleton3], {
placement: 'top',
moveTransition: 'transform 0.2s ease-out',
})
return {
singleton1,
singleton2,
singleton3,
counter,
button,
button2,
button3,
button4,
button5,
button6,
button6Inc,
log: console.log,
}
},
})
</script>
playground-vue2/src/Counter.vue
+20
View File
@@ -0,0 +1,20 @@
<template>
<button @click="count++">{{ count }}</button>
</template>
<script>
import { defineComponent } from '@vue/composition-api'
export default defineComponent({
props: {
initialValue: {
default: 0,
},
},
data() {
return {
count: this.initialValue,
}
},
})
</script>
playground-vue2/src/main.js
+11
View File
@@ -0,0 +1,11 @@
import Vue from 'vue'
import App from './App.vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
playground-vue2/vue.config.js
+10
View File
@@ -0,0 +1,10 @@
module.exports = {
chainWebpack: config => {
config.module.rules.delete('eslint');
},
configureWebpack: {
resolve: {
symlinks: true,
},
}
}
playground-vue2/yarn.lock
+8326
View File
File diff suppressed because it is too large Load Diff
playground/index.html
+3 -2
View File
@@ -9,7 +9,8 @@
rel="stylesheet"
/>
</head>
<body class="py-8">
<div id="app" class="container mx-auto px-24"></div>
<body class="py-4 px-24">
<h1 class="font-bold text-2xl">Vue 3</h1>
<div id="app" class="mt-4 container mx-auto"></div>
</body>
</html>
src/composables/useTippy.ts
+23 -8
View File
@@ -23,6 +23,26 @@ tippy.setDefaultProps({
},
})
function isVue23Node(node: any) {
if (isVue2) {
return (
(typeof node === 'object' && !!node.tag) || typeof node === 'function'
)
} else {
return isVNode(node)
}
}
function renderVue23(vnode: any, target: Element) {
if (isVue2) {
//@ts-ignore
new Vue({
render: typeof vnode === 'function' ? vnode : () => vnode,
}).$mount(target)
} else {
render(vnode, target)
}
}
export function useTippy(
el: Element | (() => Element) | Ref<Element> | Ref<Element | undefined>,
opts: TippyOptions = {},
@@ -49,20 +69,15 @@ export function useTippy(
? content.value
: content
if (isVue2) {
//@ts-ignore
newContent = unwrappedContent
} else {
if (isVNode(unwrappedContent)) {
render(unwrappedContent, getContainer())
if (isVue23Node(unwrappedContent)) {
renderVue23(unwrappedContent, getContainer())
newContent = () => getContainer()
} else if (typeof unwrappedContent === 'object') {
render(h(unwrappedContent), getContainer())
renderVue23(h(unwrappedContent), getContainer())
newContent = () => getContainer()
} else {
newContent = unwrappedContent
}
}
return newContent
}
yarn.lock
+8 -1
View File
@@ -299,6 +299,13 @@
"@vue/compiler-dom" "3.0.4"
"@vue/shared" "3.0.4"
"@vue/composition-api@^1.0.0-beta.22":
version "1.0.0-beta.22"
resolved "https://registry.yarnpkg.com/@vue/composition-api/-/composition-api-1.0.0-beta.22.tgz#8b0046bda138820c6d79c91dc961839a52d853c7"
integrity sha512-KkTeHVWgsJbtoA5t6pUien/ARw7JhVM7QZh05ko/UdgzALYMGwJsBf4WlcvbpMKE5eAu4ONYJypQ+r8LwBIOhA==
dependencies:
tslib "^2.0.1"
"@vue/reactivity@3.0.4":
version "3.0.4"
resolved "https://registry.yarnpkg.com/@vue/reactivity/-/reactivity-3.0.4.tgz#b6599dd8271a745960a03f05744ccf7991ba5d8d"
@@ -5631,7 +5638,7 @@ tslib@^1.9.0:
resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
tslib@^2.0.3:
tslib@^2.0.1, tslib@^2.0.3:
version "2.0.3"
resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.0.3.tgz#8e0741ac45fc0c226e58a17bfc3e64b9bc6ca61c"
integrity sha512-uZtkfKblCEQtZKBF6EBXVZeQNl82yqtDQdv+eck8u7tdPxjLu2/lp5/uPW+um2tpuxINHWy3GhiccY7QgEaVHQ==