arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-02-01 20:57:57 +01:00
Code Issues Packages Projects Releases Wiki Activity

chore: update components

Browse Source
This commit is contained in:
Benjamin Canac
2021-12-01 14:32:43 +01:00
parent f296faf772
commit e6aac244d7
2 changed files with 30 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/overlays/Popover.vue
View File

@@ -2,7 +2,7 @@
<Popover v-slot="{ open }" :class="wrapperClass"> <Popover v-slot="{ open }" :class="wrapperClass">
<PopoverButton ref="trigger" as="div"> <PopoverButton ref="trigger" as="div">
<slot :open="open"> <slot :open="open">
Open <button>Open</button>
</slot> </slot>
</PopoverButton> </PopoverButton>

72
src/components/overlays/Tooltip.vue
View File

@@ -1,77 +1,62 @@
<template> <template>
<div ref="container" @mouseover="mouseover" @mouseleave="mouseleave"> <div ref="trigger" :class="wrapperClass" @mouseover="open = true" @mouseleave="open = false">
<slot /> <slot :open="open">
Hover me
</slot>
<transition <div v-if="open" ref="container" :class="containerClass">
enter-class="transform scale-95 opacity-0" <transition
enter-active-class="transition duration-100 ease-out" appear
enter-to-class="transform scale-100 opacity-100" enter-active-class="transition ease-out duration-200"
leave-class="opacity-100" enter-from-class="opacity-0 translate-y-1"
leave-active-class="duration-100 ease-in" enter-to-class="opacity-100 translate-y-0"
leave-to-class="opacity-0" leave-active-class="transition ease-in duration-150"
> leave-from-class="opacity-100 translate-y-0"
<div leave-to-class="opacity-0 translate-y-1"
v-show="show && (text || shortcuts.length || $slots.text)"
ref="tooltip"
class="fixed z-30 flex bg-gray-800 items-center justify-center invisible w-auto h-6 max-w-xs px-2 space-x-1 truncate rounded shadow lg:visible"
> >
<span v-if="text || $slots.text" class="truncate text-gray-50 text-xxs"> <div :class="tooltipClass">
<slot name="text">{{ text }}</slot> <slot name="text">
</span> {{ text }}
<div v-if="shortcuts && shortcuts.length"> </slot>
<div class="flex items-center flex-shrink-0 h-6 space-x-1">
<span v-if="text" class="mb-2 text-center text-gray-500">.</span>
<div
v-for="(shortcut, index) of shortcuts"
:key="index"
class="flex items-center px-1 bg-gray-600 rounded"
>
<span
class="font-light text-center text-gray-200 text-xxs"
>{{ shortcut }}</span>
</div>
</div>
</div> </div>
</div> </transition>
</transition> </div>
</div> </div>
</template> </template>
<script> <script>
// import { Popover, PopoverButton, PopoverPanel } from '@headlessui/vue'
import { usePopper } from '../../utils' import { usePopper } from '../../utils'
export default { export default {
// components: {
// Popover,
// PopoverButton,
// PopoverPanel
// },
props: { props: {
text: {
type: String,
default: null
},
placement: { placement: {
type: String, type: String,
default: 'bottom' default: 'bottom'
}, },
strategy: { strategy: {
type: String, type: String,
default: 'absolute' default: 'fixed'
}, },
wrapperClass: { wrapperClass: {
type: String, type: String,
default: 'relative' default: 'relative'
}, },
tooltipClass: { containerClass: {
type: String, type: String,
default: 'z-10' default: 'z-10'
}, },
label: { tooltipClass: {
type: String, type: String,
default: '' default: 'flex items-center justify-center invisible w-auto h-6 max-w-xs px-2 space-x-1 truncate rounded shadow lg:visible u-bg-gray-800 truncate u-text-gray-50 text-xs'
} }
}, },
setup (props) { setup (props) {
const open = ref(false)
const [trigger, container] = usePopper({ const [trigger, container] = usePopper({
placement: props.placement, placement: props.placement,
strategy: props.strategy, strategy: props.strategy,
@@ -97,6 +82,7 @@ export default {
}) })
return { return {
open,
trigger, trigger,
container container
} }