mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-14 12:14:41 +01:00
473513c246
Co-authored-by: Jakub <jakub.michalek@freelo.io> Co-authored-by: Benjamin Canac <canacb1@gmail.com>
109 lines
3.0 KiB
Vue
109 lines
3.0 KiB
Vue
<script setup lang="ts">
|
|
const open = ref(false)
|
|
const openCustomAnchor = ref(false)
|
|
const loading = ref(false)
|
|
|
|
function send() {
|
|
loading.value = true
|
|
|
|
setTimeout(() => {
|
|
loading.value = false
|
|
open.value = false
|
|
}, 1000)
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="text-center">
|
|
<div>
|
|
<UPopover arrow :content="{ side: 'top' }">
|
|
<UButton label="Click me top" color="neutral" variant="outline" />
|
|
|
|
<template #content>
|
|
<div class="w-48 h-16" />
|
|
</template>
|
|
</UPopover>
|
|
|
|
<div class="flex items-center gap-2 my-2">
|
|
<UPopover arrow :content="{ side: 'left' }">
|
|
<UButton label="Click me left" color="neutral" variant="outline" />
|
|
|
|
<template #content>
|
|
<div class="w-48 h-16" />
|
|
</template>
|
|
</UPopover>
|
|
|
|
<UPopover arrow :content="{ side: 'right' }">
|
|
<UButton label="Click me right" color="neutral" variant="outline" />
|
|
|
|
<template #content>
|
|
<div class="w-48 h-16" />
|
|
</template>
|
|
</UPopover>
|
|
</div>
|
|
|
|
<UPopover v-model:open="open" arrow>
|
|
<UButton label="Click me bottom" color="neutral" variant="outline" />
|
|
|
|
<template #content>
|
|
<div class="flex justify-center gap-2 p-4 w-48">
|
|
<UButton label="Close" color="neutral" @click="open = false" />
|
|
<UButton label="Send" color="neutral" trailing-icon="i-lucide-send-horizontal" :loading="loading" @click="send" />
|
|
</div>
|
|
</template>
|
|
</UPopover>
|
|
|
|
<div class="mt-8 relative">
|
|
<UPopover
|
|
v-model:open="openCustomAnchor"
|
|
:dismissible="false"
|
|
>
|
|
<template #anchor>
|
|
<UInput placeholder="Search" class="w-56" @focus="openCustomAnchor = true" />
|
|
</template>
|
|
|
|
<template #content>
|
|
<Placeholder class="size-48 m-4 inline-flex" />
|
|
</template>
|
|
</UPopover>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-24">
|
|
<UPopover mode="hover" arrow :content="{ side: 'top' }">
|
|
<UButton label="Hover me top" color="neutral" variant="outline" />
|
|
|
|
<template #content>
|
|
<div class="w-48 h-16" />
|
|
</template>
|
|
</UPopover>
|
|
|
|
<div class="flex items-center gap-2 my-2">
|
|
<UPopover mode="hover" arrow :content="{ side: 'left' }">
|
|
<UButton label="Hover me left" color="neutral" variant="outline" />
|
|
|
|
<template #content>
|
|
<div class="w-48 h-16" />
|
|
</template>
|
|
</UPopover>
|
|
|
|
<UPopover mode="hover" arrow :content="{ side: 'right' }">
|
|
<UButton label="Hover me right" color="neutral" variant="outline" />
|
|
|
|
<template #content>
|
|
<div class="w-48 h-16" />
|
|
</template>
|
|
</UPopover>
|
|
</div>
|
|
|
|
<UPopover mode="hover" arrow>
|
|
<UButton label="Hover me bottom" color="neutral" variant="outline" />
|
|
|
|
<template #content>
|
|
<div class="w-48 h-16" />
|
|
</template>
|
|
</UPopover>
|
|
</div>
|
|
</div>
|
|
</template>
|