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",
|
"typescript": "^4.1.3",
|
||||||
"vue": "^3.0.0",
|
"vue": "^3.0.0",
|
||||||
"vue-loader": "^16.0.0-beta.8",
|
"vue-loader": "^16.0.0-beta.8",
|
||||||
|
"vue-router": "4",
|
||||||
"webpack": "^4.44.1",
|
"webpack": "^4.44.1",
|
||||||
"webpack-bundle-analyzer": "^3.8.0",
|
"webpack-bundle-analyzer": "^3.8.0",
|
||||||
"webpack-cli": "^3.3.12",
|
"webpack-cli": "^3.3.12",
|
||||||
|
|||||||
+4
-354
@@ -1,359 +1,9 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<router-view></router-view>
|
||||||
<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>
|
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import {
|
import { defineComponent } from 'vue'
|
||||||
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,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
export default defineComponent({
|
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>
|
<template>
|
||||||
<button @click="count++">{{ count }}</button>
|
<div>
|
||||||
|
<button @click="count++">{{ count }}</button>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<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
|
// necessary for webpack
|
||||||
///<reference path="../src/global.d.ts"/>
|
///<reference path="../src/global.d.ts"/>
|
||||||
import { createApp } from 'vue'
|
import { createApp } from 'vue'
|
||||||
|
import { createRouter, createWebHistory } from 'vue-router'
|
||||||
import VueTippy from '../src'
|
import VueTippy from '../src'
|
||||||
|
import "tippy.js/dist/tippy.css";
|
||||||
import App from './App.vue'
|
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)
|
const app = createApp(App)
|
||||||
|
app.component('counter', Counter)
|
||||||
|
app.component("ui-icon", UiIcon);
|
||||||
|
|
||||||
|
app.use(router)
|
||||||
app.use(VueTippy, {
|
app.use(VueTippy, {
|
||||||
defaultProps: { placement: 'right' },
|
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 { TippyOptions } from '../types'
|
||||||
import { useTippy } from '../composables'
|
import { useTippy } from '../composables'
|
||||||
import tippy, { DefaultProps } from 'tippy.js'
|
import tippy, { DefaultProps } from 'tippy.js'
|
||||||
@@ -55,6 +55,7 @@ const TippyComponent = defineComponent({
|
|||||||
props,
|
props,
|
||||||
setup(props, { slots }) {
|
setup(props, { slots }) {
|
||||||
const elem = ref<Element>()
|
const elem = ref<Element>()
|
||||||
|
const contentElem = ref<Element>()
|
||||||
|
|
||||||
let options = { ...props } as TippyOptions & {
|
let options = { ...props } as TippyOptions & {
|
||||||
to: String | Element | null | undefined
|
to: String | Element | null | undefined
|
||||||
@@ -63,12 +64,6 @@ const TippyComponent = defineComponent({
|
|||||||
delete options.to
|
delete options.to
|
||||||
}
|
}
|
||||||
|
|
||||||
if (slots.content != null && typeof slots.content != 'undefined') {
|
|
||||||
options.content = {
|
|
||||||
render: () => slots.content!(),
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
let target: any = elem
|
let target: any = elem
|
||||||
|
|
||||||
if (props.to) {
|
if (props.to) {
|
||||||
@@ -80,12 +75,20 @@ const TippyComponent = defineComponent({
|
|||||||
}
|
}
|
||||||
|
|
||||||
const tippy = useTippy(target, options)
|
const tippy = useTippy(target, options)
|
||||||
return { elem, ...tippy }
|
|
||||||
|
onMounted(() => {
|
||||||
|
if(slots.content)
|
||||||
|
tippy.setContent(() => contentElem.value)
|
||||||
|
})
|
||||||
|
|
||||||
|
return { elem, contentElem, ...tippy }
|
||||||
},
|
},
|
||||||
render() {
|
render() {
|
||||||
let slot = this.$slots.default ? this.$slots.default() : []
|
let slot = this.$slots.default ? this.$slots.default() : []
|
||||||
|
return h('span', { ref: 'elem' }, this.$slots.content ?[
|
||||||
return h('span', { ref: 'elem' }, slot)
|
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"
|
hash-sum "^2.0.0"
|
||||||
loader-utils "^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:
|
vue@^3.0.0:
|
||||||
version "3.0.5"
|
version "3.0.5"
|
||||||
resolved "https://registry.yarnpkg.com/vue/-/vue-3.0.5.tgz#de1b82eba24abfe71e0970fc9b8d4b2babdc3fe1"
|
resolved "https://registry.yarnpkg.com/vue/-/vue-3.0.5.tgz#de1b82eba24abfe71e0970fc9b8d4b2babdc3fe1"
|
||||||
|
|||||||
Reference in New Issue
Block a user