pass tippy instance for the content slot and fix nested components
This commit is contained in:
Georges KABBOUCHI
@@ -46,6 +46,7 @@
|
||||
"typescript": "^4.1.3",
|
||||
"vue": "^3.0.0",
|
||||
"vue-loader": "^16.0.0-beta.8",
|
||||
"vue-router": "4",
|
||||
"webpack": "^4.44.1",
|
||||
"webpack-bundle-analyzer": "^3.8.0",
|
||||
"webpack-cli": "^3.3.12",
|
||||
|
||||
+4
-354
@@ -1,359 +1,9 @@
|
||||
<template>
|
||||
<div>
|
||||
<div>
|
||||
<span class="font-semibold mr-4">Tippy Component + custom element target:</span>
|
||||
|
||||
<tippy
|
||||
content="test"
|
||||
to="#btn123"
|
||||
></tippy>
|
||||
|
||||
<button
|
||||
id="btn123"
|
||||
class="text-sm py-2 px-3 bg-gray-900 text-white rounded-lg"
|
||||
>Hi</button>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<span class="font-semibold mr-4">Tippy Component:</span>
|
||||
|
||||
<tippy content="test">
|
||||
<button class="text-sm py-2 px-3 bg-gray-900 text-white rounded-lg">Hi</button>
|
||||
</tippy>
|
||||
</div>
|
||||
|
||||
<div class="mt-6">
|
||||
<span class="font-semibold mr-4">Tippy Component with content slot:</span>
|
||||
|
||||
<tippy interactive>
|
||||
<button class="text-sm py-2 px-3 bg-gray-900 text-white rounded-lg">Hi</button>
|
||||
|
||||
<template #content>
|
||||
<button
|
||||
class="text-sm py-2 px-3 bg-gray-100 text-black rounded-lg"
|
||||
@click="counter++"
|
||||
>
|
||||
Counter {{ counter }} (click to increase)
|
||||
</button>
|
||||
</template>
|
||||
</tippy>
|
||||
</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">
|
||||
<span
|
||||
ref="target7"
|
||||
class="font-semibold mr-4"
|
||||
>useTippy + triggerTarget:</span>
|
||||
<button
|
||||
class="text-sm py-2 px-3 bg-gray-900 text-white rounded-lg"
|
||||
ref="button7"
|
||||
>My Button 7</button>
|
||||
</div>
|
||||
|
||||
<div class="mt-6">
|
||||
<span class="font-semibold mr-4">Tippy component + change content and props realtime using component ref:</span>
|
||||
<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"
|
||||
@tippyMount="() => log('v-tippy mounted')"
|
||||
v-tippy="{ content: 'Hello ' + counter}"
|
||||
>Tippy directive</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 class="mt-6 space-x-2">
|
||||
<span class="font-semibold mr-4">Singleton v-tippy with a transition:</span>
|
||||
<button
|
||||
class="text-sm py-2 px-3 bg-gray-900 text-white rounded-lg"
|
||||
:ref="v => singletons.push(v)"
|
||||
v-tippy="{content : 'Tooltip 1'}"
|
||||
>singleton1</button>
|
||||
|
||||
<button
|
||||
class="text-sm py-2 px-3 bg-gray-900 text-white rounded-lg"
|
||||
:ref="v => singletons.push(v)"
|
||||
v-tippy="{content : 'Tooltip 2'}"
|
||||
>singleton2</button>
|
||||
|
||||
<button
|
||||
class="text-sm py-2 px-3 bg-gray-900 text-white rounded-lg"
|
||||
:ref="v => singletons.push(v)"
|
||||
v-tippy="{content : 'Tooltip 3'}"
|
||||
>singleton3</button>
|
||||
</div>
|
||||
</div>
|
||||
<router-view></router-view>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import {
|
||||
defineComponent,
|
||||
ref,
|
||||
h,
|
||||
computed,
|
||||
reactive,
|
||||
onMounted,
|
||||
onUnmounted,
|
||||
watch,
|
||||
} from 'vue'
|
||||
import { useSingleton, useTippy, TippyOptions, TippyComponent } from '../src'
|
||||
import Counter from './Counter.vue'
|
||||
|
||||
function useMousePosition() {
|
||||
const x = ref(0)
|
||||
const y = ref(0)
|
||||
|
||||
function handler(e: MouseEvent) {
|
||||
x.value = e.clientX
|
||||
y.value = e.clientY
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
window.addEventListener('mousemove', handler, false)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('mousemove', handler, false)
|
||||
})
|
||||
|
||||
return {
|
||||
x,
|
||||
y,
|
||||
}
|
||||
}
|
||||
import { defineComponent } from 'vue'
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
const counter = ref<number>(0)
|
||||
|
||||
setInterval(() => counter.value++, 1000)
|
||||
|
||||
const button = ref<HTMLButtonElement>()
|
||||
const button2 = ref<HTMLButtonElement>()
|
||||
const button3 = ref<HTMLButtonElement>()
|
||||
const button4 = ref<HTMLButtonElement>()
|
||||
const button5 = ref<HTMLButtonElement>()
|
||||
const button6 = ref<HTMLButtonElement>()
|
||||
const button7 = ref<HTMLButtonElement>()
|
||||
const target7 = ref<HTMLButtonElement>()
|
||||
|
||||
useTippy(button, {
|
||||
content: 'Test',
|
||||
onMount() {
|
||||
console.log('here')
|
||||
},
|
||||
})
|
||||
|
||||
useTippy(button2, {
|
||||
content: h('h1', 'hi'),
|
||||
})
|
||||
|
||||
useTippy(button3, {
|
||||
content: computed(() =>
|
||||
h(
|
||||
'button',
|
||||
{
|
||||
onClick: () => {
|
||||
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<TippyOptions>({
|
||||
content: '1',
|
||||
sticky: true,
|
||||
showOnCreate: true,
|
||||
hideOnClick: false,
|
||||
trigger: 'manual',
|
||||
})
|
||||
|
||||
useTippy(button6, options)
|
||||
|
||||
const button6Inc = () => {
|
||||
options.content = String(parseInt(options.content) + 1)
|
||||
}
|
||||
|
||||
useTippy(target7, {
|
||||
content: 'Triggered by button7',
|
||||
placement: 'bottom',
|
||||
triggerTarget: button7,
|
||||
})
|
||||
|
||||
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], () => tippy.value?.popperInstance?.update())
|
||||
|
||||
const tippyComponent1 = ref<TippyComponent>()
|
||||
|
||||
onMounted(() => {
|
||||
tippyComponent1.value?.setProps({
|
||||
interactive: true,
|
||||
offset: [0, 30],
|
||||
placement: 'top',
|
||||
})
|
||||
|
||||
tippyComponent1.value?.setContent(
|
||||
h(Counter, {
|
||||
initialValue: 42,
|
||||
})
|
||||
)
|
||||
})
|
||||
|
||||
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',
|
||||
})
|
||||
const singletons = ref([])
|
||||
|
||||
useSingleton(singletons, {
|
||||
placement: 'top',
|
||||
moveTransition: 'transform 0.2s ease-out',
|
||||
})
|
||||
|
||||
return {
|
||||
singleton1,
|
||||
singleton2,
|
||||
singleton3,
|
||||
singletons,
|
||||
counter,
|
||||
button,
|
||||
button2,
|
||||
button3,
|
||||
button4,
|
||||
button5,
|
||||
button6,
|
||||
button6Inc,
|
||||
button7,
|
||||
target7,
|
||||
tippyComponent1,
|
||||
log: console.log,
|
||||
}
|
||||
},
|
||||
|
||||
})
|
||||
</script>
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,12 @@
|
||||
<template>
|
||||
<button type="button" class="inline-flex text-sm py-2 px-3 bg-gray-900 text-white rounded-lg">
|
||||
<ui-icon class="mr-2"></ui-icon>
|
||||
<slot></slot>
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "UiButton",
|
||||
};
|
||||
</script>
|
||||
@@ -1,5 +1,7 @@
|
||||
<template>
|
||||
<button @click="count++">{{ count }}</button>
|
||||
<div>
|
||||
<button @click="count++">{{ count }}</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
@@ -0,0 +1,11 @@
|
||||
<template>
|
||||
<svg style="width:24px;height:24px" viewBox="0 0 24 24">
|
||||
<path fill="currentColor" d="M20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20A8,8 0 0,0 20,12M22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2A10,10 0 0,1 22,12M10,9.5C10,10.3 9.3,11 8.5,11C7.7,11 7,10.3 7,9.5C7,8.7 7.7,8 8.5,8C9.3,8 10,8.7 10,9.5M17,9.5C17,10.3 16.3,11 15.5,11C14.7,11 14,10.3 14,9.5C14,8.7 14.7,8 15.5,8C16.3,8 17,8.7 17,9.5M12,17.23C10.25,17.23 8.71,16.5 7.81,15.42L9.23,14C9.68,14.72 10.75,15.23 12,15.23C13.25,15.23 14.32,14.72 14.77,14L16.19,15.42C15.29,16.5 13.75,17.23 12,17.23Z" />
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'UiIcon',
|
||||
}
|
||||
</script>
|
||||
+20
-1
@@ -1,10 +1,29 @@
|
||||
// necessary for webpack
|
||||
///<reference path="../src/global.d.ts"/>
|
||||
import { createApp } from 'vue'
|
||||
import { createRouter, createWebHistory } from 'vue-router'
|
||||
import VueTippy from '../src'
|
||||
|
||||
import "tippy.js/dist/tippy.css";
|
||||
import App from './App.vue'
|
||||
import PageIndex from './pages/Index.vue'
|
||||
import PageNestedComponents from './pages/NestedComponents.vue'
|
||||
import Counter from './components/Counter.vue'
|
||||
import UiIcon from "./components/Icon.vue";
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHistory(),
|
||||
routes :[
|
||||
{ path: '/', component: PageIndex },
|
||||
{ path: '/nested-components', component: PageNestedComponents },
|
||||
]
|
||||
})
|
||||
|
||||
|
||||
const app = createApp(App)
|
||||
app.component('counter', Counter)
|
||||
app.component("ui-icon", UiIcon);
|
||||
|
||||
app.use(router)
|
||||
app.use(VueTippy, {
|
||||
defaultProps: { placement: 'right' },
|
||||
})
|
||||
|
||||
@@ -0,0 +1,383 @@
|
||||
<template>
|
||||
<div>
|
||||
<div>
|
||||
<span class="font-semibold mr-4">Tippy Component + custom element target:</span>
|
||||
|
||||
<tippy
|
||||
content="test"
|
||||
to="#btn123"
|
||||
></tippy>
|
||||
|
||||
<button
|
||||
id="btn123"
|
||||
class="text-sm py-2 px-3 bg-gray-900 text-white rounded-lg"
|
||||
>Hi</button>
|
||||
</div>
|
||||
|
||||
<div class="mt-6">
|
||||
<span class="font-semibold mr-4">Tippy Component:</span>
|
||||
|
||||
<tippy content="test">
|
||||
<button class="text-sm py-2 px-3 bg-gray-900 text-white rounded-lg">Hi</button>
|
||||
</tippy>
|
||||
</div>
|
||||
|
||||
<div class="mt-6">
|
||||
<span class="font-semibold mr-4">Tippy Component with content slot:</span>
|
||||
|
||||
<tippy interactive>
|
||||
<button class="text-sm py-2 px-3 bg-gray-900 text-white rounded-lg">Hi</button>
|
||||
|
||||
<template #content>
|
||||
<button
|
||||
class="text-sm py-2 px-3 bg-gray-100 text-black rounded-lg"
|
||||
@click="counter++"
|
||||
>
|
||||
Counter {{ counter }} (click to increase)
|
||||
</button>
|
||||
</template>
|
||||
</tippy>
|
||||
</div>
|
||||
|
||||
<div class="mt-6">
|
||||
<span class="font-semibold mr-4">Tippy Component with component content slot:</span>
|
||||
|
||||
<tippy interactive>
|
||||
<button class="text-sm py-2 px-3 bg-gray-900 text-white rounded-lg">Hi</button>
|
||||
|
||||
<template #content>
|
||||
<counter/>
|
||||
</template>
|
||||
</tippy>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="mt-6">
|
||||
<span class="font-semibold mr-4">Tippy component + content slot data</span>
|
||||
<tippy interactive :hideOnClick="false">
|
||||
<button class="text-sm py-2 px-3 bg-gray-900 text-white rounded-lg">Hi</button>
|
||||
<template #content="{ tippy }" class="relative">
|
||||
<button class="absolute top-0 right-0 m-2 w-6 h-6 bg-white text-black rounded" @click="tippy && tippy.hide()">×</button>
|
||||
<pre class="p-4">{{ tippy && tippy.state }}</pre>
|
||||
</template>
|
||||
</tippy>
|
||||
</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">
|
||||
<span
|
||||
ref="target7"
|
||||
class="font-semibold mr-4"
|
||||
>useTippy + triggerTarget:</span>
|
||||
<button
|
||||
class="text-sm py-2 px-3 bg-gray-900 text-white rounded-lg"
|
||||
ref="button7"
|
||||
>My Button 7</button>
|
||||
</div>
|
||||
|
||||
<div class="mt-6">
|
||||
<span class="font-semibold mr-4">Tippy component + change content and props realtime using component ref:</span>
|
||||
<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"
|
||||
@tippyMount="() => log('v-tippy mounted')"
|
||||
v-tippy="{ content: 'Hello ' + counter}"
|
||||
>Tippy directive</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 class="mt-6 space-x-2">
|
||||
<span class="font-semibold mr-4">Singleton v-tippy with a transition:</span>
|
||||
<button
|
||||
class="text-sm py-2 px-3 bg-gray-900 text-white rounded-lg"
|
||||
:ref="v => singletons.push(v)"
|
||||
v-tippy="{content : 'Tooltip 1'}"
|
||||
>singleton1</button>
|
||||
|
||||
<button
|
||||
class="text-sm py-2 px-3 bg-gray-900 text-white rounded-lg"
|
||||
:ref="v => singletons.push(v)"
|
||||
v-tippy="{content : 'Tooltip 2'}"
|
||||
>singleton2</button>
|
||||
|
||||
<button
|
||||
class="text-sm py-2 px-3 bg-gray-900 text-white rounded-lg"
|
||||
:ref="v => singletons.push(v)"
|
||||
v-tippy="{content : 'Tooltip 3'}"
|
||||
>singleton3</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import {
|
||||
defineComponent,
|
||||
ref,
|
||||
h,
|
||||
computed,
|
||||
reactive,
|
||||
onMounted,
|
||||
onUnmounted,
|
||||
watch,
|
||||
} from 'vue'
|
||||
import { useSingleton, useTippy, TippyOptions, TippyComponent } from '../../src'
|
||||
import Counter from '../components/Counter.vue'
|
||||
|
||||
function useMousePosition() {
|
||||
const x = ref(0)
|
||||
const y = ref(0)
|
||||
|
||||
function handler(e: MouseEvent) {
|
||||
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<number>(0)
|
||||
|
||||
setInterval(() => counter.value++, 1000)
|
||||
|
||||
const button = ref<HTMLButtonElement>()
|
||||
const button2 = ref<HTMLButtonElement>()
|
||||
const button3 = ref<HTMLButtonElement>()
|
||||
const button4 = ref<HTMLButtonElement>()
|
||||
const button5 = ref<HTMLButtonElement>()
|
||||
const button6 = ref<HTMLButtonElement>()
|
||||
const button7 = ref<HTMLButtonElement>()
|
||||
const target7 = ref<HTMLButtonElement>()
|
||||
|
||||
useTippy(button, {
|
||||
content: 'Test',
|
||||
onMount() {
|
||||
console.log('here')
|
||||
},
|
||||
})
|
||||
|
||||
useTippy(button2, {
|
||||
content: h('h1', 'hi'),
|
||||
})
|
||||
|
||||
useTippy(button3, {
|
||||
content: computed(() =>
|
||||
h(
|
||||
'button',
|
||||
{
|
||||
onClick: () => {
|
||||
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<TippyOptions>({
|
||||
content: '1',
|
||||
sticky: true,
|
||||
showOnCreate: true,
|
||||
hideOnClick: false,
|
||||
trigger: 'manual',
|
||||
})
|
||||
|
||||
useTippy(button6, options)
|
||||
|
||||
const button6Inc = () => {
|
||||
options.content = String(parseInt(options.content) + 1)
|
||||
}
|
||||
|
||||
useTippy(target7, {
|
||||
content: 'Triggered by button7',
|
||||
placement: 'bottom',
|
||||
triggerTarget: button7,
|
||||
})
|
||||
|
||||
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], () => tippy.value?.popperInstance?.update())
|
||||
|
||||
const tippyComponent1 = ref<TippyComponent>()
|
||||
|
||||
onMounted(() => {
|
||||
tippyComponent1.value?.setProps({
|
||||
interactive: true,
|
||||
offset: [0, 30],
|
||||
placement: 'top',
|
||||
})
|
||||
|
||||
tippyComponent1.value?.setContent(
|
||||
h(Counter, {
|
||||
initialValue: 42,
|
||||
})
|
||||
)
|
||||
})
|
||||
|
||||
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',
|
||||
})
|
||||
const singletons = ref([])
|
||||
|
||||
useSingleton(singletons, {
|
||||
placement: 'top',
|
||||
moveTransition: 'transform 0.2s ease-out',
|
||||
})
|
||||
|
||||
return {
|
||||
singleton1,
|
||||
singleton2,
|
||||
singleton3,
|
||||
singletons,
|
||||
counter,
|
||||
button,
|
||||
button2,
|
||||
button3,
|
||||
button4,
|
||||
button5,
|
||||
button6,
|
||||
button6Inc,
|
||||
button7,
|
||||
target7,
|
||||
tippyComponent1,
|
||||
log: console.log,
|
||||
}
|
||||
},
|
||||
})
|
||||
</script>
|
||||
@@ -0,0 +1,40 @@
|
||||
<template>
|
||||
<div>
|
||||
<div style="margin-bottom: 20px">
|
||||
<ui-button>Click me</ui-button>
|
||||
</div>
|
||||
|
||||
<div style="margin-bottom: 20px">
|
||||
<tippy>
|
||||
<button class="text-sm py-2 px-3 bg-gray-900 text-white rounded-lg" type="button">Trigger</button>
|
||||
<template #content> Working tooltip </template>
|
||||
</tippy>
|
||||
</div>
|
||||
|
||||
<div style="margin-bottom: 20px">
|
||||
<tippy>
|
||||
<ui-button>Trigger with icon</ui-button>
|
||||
<template #content> Working tooltip </template>
|
||||
</tippy>
|
||||
</div>
|
||||
|
||||
<div style="margin-bottom: 20px">
|
||||
<tippy interactive>
|
||||
<ui-button>Icon inside content</ui-button>
|
||||
<template #content>
|
||||
<ui-button>Button 1</ui-button>
|
||||
</template>
|
||||
</tippy>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import UiButton from "../components/Button.vue";
|
||||
export default {
|
||||
name: "App",
|
||||
components: {
|
||||
UiButton,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
+13
-10
@@ -1,4 +1,4 @@
|
||||
import { defineComponent, ref, h, ComponentObjectPropsOptions } from 'vue'
|
||||
import { defineComponent, ref, h, ComponentObjectPropsOptions, onMounted } from 'vue'
|
||||
import { TippyOptions } from '../types'
|
||||
import { useTippy } from '../composables'
|
||||
import tippy, { DefaultProps } from 'tippy.js'
|
||||
@@ -55,6 +55,7 @@ const TippyComponent = defineComponent({
|
||||
props,
|
||||
setup(props, { slots }) {
|
||||
const elem = ref<Element>()
|
||||
const contentElem = ref<Element>()
|
||||
|
||||
let options = { ...props } as TippyOptions & {
|
||||
to: String | Element | null | undefined
|
||||
@@ -63,12 +64,6 @@ const TippyComponent = defineComponent({
|
||||
delete options.to
|
||||
}
|
||||
|
||||
if (slots.content != null && typeof slots.content != 'undefined') {
|
||||
options.content = {
|
||||
render: () => slots.content!(),
|
||||
}
|
||||
}
|
||||
|
||||
let target: any = elem
|
||||
|
||||
if (props.to) {
|
||||
@@ -80,12 +75,20 @@ const TippyComponent = defineComponent({
|
||||
}
|
||||
|
||||
const tippy = useTippy(target, options)
|
||||
return { elem, ...tippy }
|
||||
|
||||
onMounted(() => {
|
||||
if(slots.content)
|
||||
tippy.setContent(() => contentElem.value)
|
||||
})
|
||||
|
||||
return { elem, contentElem, ...tippy }
|
||||
},
|
||||
render() {
|
||||
let slot = this.$slots.default ? this.$slots.default() : []
|
||||
|
||||
return h('span', { ref: 'elem' }, slot)
|
||||
return h('span', { ref: 'elem' }, this.$slots.content ?[
|
||||
slot,
|
||||
h('span', { ref : 'contentElem' }, this.$slots.content({ tippy : this.tippy}))
|
||||
] : slot)
|
||||
},
|
||||
})
|
||||
|
||||
|
||||
@@ -5820,6 +5820,11 @@ vue-loader@^16.0.0-beta.8:
|
||||
hash-sum "^2.0.0"
|
||||
loader-utils "^2.0.0"
|
||||
|
||||
vue-router@4:
|
||||
version "4.0.3"
|
||||
resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-4.0.3.tgz#8b26050c88b2dec7e27a88835f71046b365823ec"
|
||||
integrity sha512-AD1OjtVPyQHTSpoRsEGfPpxRQwhAhxcacOYO3zJ3KNkYP/r09mileSp6kdMQKhZWP2cFsPR3E2M3PZguSN5/ww==
|
||||
|
||||
vue@^3.0.0:
|
||||
version "3.0.5"
|
||||
resolved "https://registry.yarnpkg.com/vue/-/vue-3.0.5.tgz#de1b82eba24abfe71e0970fc9b8d4b2babdc3fe1"
|
||||
|
||||
Reference in New Issue
Block a user