feat: basic mutli-accounts support

components/modal/ModalDrawer.vue

@@ -0,0 +1,61 @@
+<script setup lang='ts'>
+const {
+  direction = 'bottom',
+} = defineProps<{
+  direction?: string
+}>()
+
+const { modelValue } = defineModel<{
+  modelValue: boolean
+}>()
+
+const positionClass = computed(() => {
+  switch (direction) {
+    case 'bottom':
+      return 'bottom-0 left-0 right-0 border-t'
+    case 'top':
+      return 'top-0 left-0 right-0 border-b'
+    case 'left':
+      return 'bottom-0 left-0 top-0 border-r'
+    case 'right':
+      return 'bottom-0 top-0 right-0 border-l'
+    default:
+      return ''
+  }
+})
+
+const transform = computed(() => {
+  switch (direction) {
+    case 'bottom':
+      return 'translateY(100%)'
+    case 'top':
+      return 'translateY(-100%)'
+    case 'left':
+      return 'translateX(-100%)'
+    case 'right':
+      return 'translateX(100%)'
+    default:
+      return ''
+  }
+})
+</script>
+
+<template>
+  <div
+    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'"
+      @click="modelValue = false"
+    />
+    <div
+      bg-base border border-base absolute transition-all duration-200 ease-out
+      :class="positionClass"
+      :style="modelValue ? {} : { transform }"
+    >
+      <slot />
+    </div>
+  </div>
+</template>