feat: improve dialog

components/help/HelpPreview.vue

@@ -6,6 +6,10 @@ interface Team {
   mastodon: string
 }
 
+const emit = defineEmits<{
+  (event: 'close'): void
+}>()
+
 const teams: Team[] = [
   {
     github: 'antfu',
@@ -35,7 +39,11 @@ const teams: Team[] = [
 </script>
 
 <template>
-  <div p8 flex="~ col gap-4">
+  <div p8 flex="~ col gap-4" relative max-h-screen of-auto>
+    <button btn-action-icon absolute top-0 right-0 m1 @click="emit('close')">
+      <div i-ri:close-fill />
+    </button>
+
     <img src="/logo.svg" w-20 h-20 mxa alt="logo">
     <h1 mxa text-4xl mb4>
       Elk is in Preview!
@@ -53,7 +61,7 @@ const teams: Team[] = [
     </p>
     <p flex="~ gap-2 wrap" mxa>
       <template v-for="team of teams" :key="team.github">
-        <a :href="`https://github.com/sponsors/${team.github}`" target="_blank">
+        <a :href="`https://github.com/sponsors/${team.github}`" target="_blank" rounded-full>
           <img :src="`https://github.com/${team.github}.png`" :alt="team.display" rounded-full w-15 h-15>
         </a>
       </template>
@@ -61,5 +69,9 @@ const teams: Team[] = [
     <p italic text-2xl>
       <span text-lg font-script>The Elk Team</span>
     </p>
+
+    <button btn-solid mxa @click="emit('close')">
+      Enter App
+    </button>
   </div>
 </template>

components/modal/ModalContainer.vue

@@ -16,8 +16,8 @@ import {
   <ModalDialog v-model="isSigninDialogOpen">
     <UserSignIn m6 />
   </ModalDialog>
-  <ModalDialog v-model="isPreviewHelpOpen">
+  <ModalDialog v-model="isPreviewHelpOpen" :type="isSmallScreen ? 'bottom' : 'dialog'">
-    <HelpPreview />
+    <HelpPreview @close="closePreviewHelp()" />
   </ModalDialog>
   <ModalDialog v-model="isPublishDialogOpen">
     <PublishWidget draft-key="dialog" expanded min-w-180 />

components/modal/ModalDialog.vue

@@ -11,8 +11,12 @@ const {
 
 const { modelValue } = defineModel<{
   modelValue: boolean
+  closeButton?: boolean
 }>()
 
+let isVisible = $ref(modelValue.value)
+let isOut = $ref(!modelValue.value)
+
 const positionClass = computed(() => {
   switch (type) {
     case 'dialog':
@@ -30,24 +34,32 @@ const positionClass = computed(() => {
   }
 })
 
-const transform = computed(() => {
+const transformClass = computed(() => {
-  switch (type) {
+  if (isOut) {
-    case 'bottom':
+    switch (type) {
-      return 'translateY(100%)'
+      case 'dialog':
-    case 'top':
+        return 'op0'
-      return 'translateY(-100%)'
+      case 'bottom':
-    case 'left':
+        return 'translate-y-[100%]'
-      return 'translateX(-100%)'
+      case 'top':
-    case 'right':
+        return 'translate-y-[100%]'
-      return 'translateX(100%)'
+      case 'left':
-    default:
+        return 'translate-x-[-100%]'
-      return ''
+      case 'right':
+        return 'translate-x-[100%]'
+      default:
+        return ''
+    }
   }
 })
 
 const target = ref<HTMLElement | null>(null)
 const { activate, deactivate } = useFocusTrap(target)
 
+function close() {
+  modelValue.value = false
+}
+
 watchEffect(() => {
   if (modelValue)
     activate()
@@ -55,29 +67,52 @@ watchEffect(() => {
     deactivate()
 })
 
-let init = $ref(modelValue)
+useEventListener('keydown', (e: KeyboardEvent) => {
-watchOnce(modelValue, () => {
+  if (!modelValue.value)
-  init = true
+    return
+  if (e.key === 'Escape') {
+    close()
+    e.preventDefault()
+  }
 })
+
+watch(modelValue, async (v) => {
+  if (v) {
+    isOut = true
+    isVisible = true
+    setTimeout(() => {
+      isOut = false
+    }, 10)
+  }
+  else {
+    isOut = true
+  }
+})
+
+function onTransitionEnd() {
+  if (!modelValue.value)
+    isVisible = false
+}
 </script>
 
 <template>
   <div
+    v-if="isVisible"
     fixed top-0 bottom-0 left-0 right-0 z-40
     :class="modelValue ? '' : 'pointer-events-none'"
   >
     <div
       bg-base bottom-0 left-0 right-0 top-0 absolute transition-opacity duration-500 ease-out
-      :class="modelValue ? 'opacity-85' : 'opacity-0'"
+      :class="isOut ? 'opacity-0' : 'opacity-85'"
-      @click="modelValue = false"
+      @click="close"
     />
     <div
-      ref="target" bg-base border-base absolute transition-all duration-200
+      ref="target"
-      ease-out
+      bg-base border-base absolute transition-all duration-200 ease-out transform
-      :class="positionClass"
+      :class="`${positionClass} ${transformClass}`"
-      :style="modelValue ? {} : { transform }"
+      @transitionend="onTransitionEnd"
     >
-      <slot v-if="init" />
+      <slot />
     </div>
   </div>
 </template>

components/nav/NavBottom.vue

@@ -3,7 +3,7 @@
 </script>
 
 <template>
-  <nav h-14 fixed bottom-0 left-0 right-0 z-50 border="t base" bg-base flex flex-row>
+  <nav h-14 fixed bottom-0 left-0 right-0 z-10 border="t base" bg-base flex flex-row>
     <template v-if="currentUser">
       <NuxtLink to="/home" active-class="text-primary" flex flex-row items-center place-content-center h-full flex-1>
         <div i-ri:home-5-line />

components/nav/NavSide.vue

@@ -1,5 +1,5 @@
 <template>
-  <div px3 py4 flex="~ col gap2" text-lg>
+  <nav px3 py4 flex="~ col gap2" text-lg>
     <template v-if="currentUser">
       <NavSideItem text="Home" to="/home" icon="i-ri:home-5-line" />
       <NavSideItem text="Notifications" to="/notifications" icon="i-ri:notification-4-line" />
@@ -17,5 +17,5 @@
         </template>
       </NavSideItem>
     </template>
-  </div>
+  </nav>
 </template>

composables/dialog.ts

@@ -49,3 +49,7 @@ export function openEditHistoryDialog(edit: StatusEdit) {
 export function openPreviewHelp() {
   isPreviewHelpOpen.value = true
 }
+
+export function closePreviewHelp() {
+  isPreviewHelpOpen.value = false
+}

composables/screen.ts

@@ -0,0 +1,5 @@
+import { breakpointsTailwind } from '@vueuse/core'
+
+export const breakpoints = useBreakpoints(breakpointsTailwind)
+
+export const isSmallScreen = breakpoints.smallerOrEqual('md')

layouts/default.vue

@@ -13,7 +13,7 @@
           </slot>
         </div>
       </aside>
-      <NavBottom md:hidden />
+      <NavBottom v-if="isSmallScreen" md:hidden />
       <div class="w-full mb14 md:(w-2/4 mb0) min-h-screen" border="l r base">
         <slot />
       </div>