versia-pub/frontend
2
0
Fork 0
mirror of https://github.com/versia-pub/frontend.git synced 2026-03-13 03:29:16 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor: ♻️ Replace HeadlessUI with Ark UI, improve UI

Browse source
This commit is contained in:
Jesse Wierzbinski 2024-06-04 14:03:15 -10:00
parent d109e09a72
commit 3c68c2e788
No known key found for this signature in database
15 changed files with 231 additions and 242 deletions
Download patch file Download diff file Expand all files Collapse all files

49
components/dropdowns/AdaptiveDropdown.vue
View file

@ -1,29 +1,34 @@
<template>
<HeadlessMenu v-slot="{ close }" v-bind="$props">
<slot name="button"></slot>
<HeadlessMenuItems @click="close" class="fixed z-20 inset-0 z-5 bg-black/50">
</HeadlessMenuItems>
<transition enter-active-class="transition ease-in duration-100"
enter-from-class="transform opacity-0 translate-y-full sm:translate-y-0 scale-95"
enter-to-class="transform translate-y-0 opacity-100 scale-100"
leave-active-class="transition ease-out duration-75" leave-from-class="transform opacity-100 scale-100"
leave-to-class="transform opacity-0 scale-95">
<HeadlessMenuItems
:class="['z-20 mt-2 rounded overflow-hidden bg-dark-900 shadow-lg ring-1 ring-white/10 focus:outline-none',
isSmallScreen ? 'bottom-0 fixed inset-x-0 w-full origin-bottom' : 'absolute right-0 origin-top-right top-full min-w-56']">
<div v-if="isSmallScreen" class="w-full bg-white/10 py-2">
<div class="rounded-full h-1 bg-gray-400 w-12 mx-auto"></div>
</div>
<slot name="items"></slot>
</HeadlessMenuItems>
</transition>
</HeadlessMenu>
<Menu.Root :positioning="{
strategy: 'fixed',
}" @update:open="(o) => open = o" :open="open">
<Menu.Trigger>
<slot name="button"></slot>
</Menu.Trigger>
<div @mousedown="open = false" @touchstart="open = false" v-if="open" class="fixed inset-0 z-10 bg-black/50">
</div>
<Menu.Positioner :class="isSmallScreen && '!bottom-0 !top-[unset] fixed inset-x-0 w-full !translate-y-0'">
<transition enter-active-class="transition ease-in duration-100"
enter-from-class="transform opacity-0 translate-y-full sm:translate-y-0 scale-95"
enter-to-class="transform translate-y-0 opacity-100 scale-100"
leave-active-class="transition ease-out duration-75" leave-from-class="transform opacity-100 scale-100"
leave-to-class="transform opacity-0 scale-95">
<Menu.Content v-if="open"
:class="['z-20 mt-2 rounded overflow-hidden p-1 space-y-1 bg-dark-700 shadow-lg ring-1 ring-white/10 focus:outline-none min-w-56']">
<div v-if="isSmallScreen" class="w-full py-2">
<div class="rounded-full h-1 bg-gray-400 w-12 mx-auto"></div>
</div>
<slot name="items"></slot>
</Menu.Content>
</transition>
</Menu.Positioner>
</Menu.Root>
</template>
<script setup lang="ts">
import { Menu } from "@ark-ui/vue";
const { width } = useWindowSize();
const isSmallScreen = computed(() => width.value < 768);
const open = ref(false);
</script>