feat: add self-managed open-state for ADialog component

src/components/generic/ADialog.vue

 <template>
   <dialog
-    v-if="modelValue"
+    v-if="isOpen"
     ref="dialogEl"
     class="tw-shadow-xl tw-border tw-border-gray-200 tw-rounded tw-p-0 tw-bg-white tw-z-30 tw-flex tw-flex-col"
     style="max-width: 95%"
@@ -34,17 +34,20 @@
 </template>
 
 <script lang="ts" setup>
-import { nextTick, ref, useSlots, watch } from 'vue'
+import { computed, nextTick, ref, useSlots, watch } from 'vue'
+
+defineOptions({ compatConfig: { MODE: 3 } })
 
 const titleClass = 'tw-text-lg tw-font-semibold tw-m-0'
 
 const props = withDefaults(
   defineProps<{
-    modelValue: boolean
+    modelValue?: boolean | undefined
     isModal?: boolean
     title?: string
   }>(),
   {
+    modelValue: undefined,
     title: '',
     isModal: false,
   },
@@ -53,15 +56,38 @@ const emit = defineEmits<{
   (e: 'update:modelValue', value: boolean): void
 }>()
 const slots = useSlots()
-
+const localIsOpen = ref(false)
 const dialogEl = ref<HTMLDialogElement>()
+const isOpen = computed({
+  get() {
+    return props.modelValue !== undefined ? props.modelValue : localIsOpen.value
+  },
+  set(value: boolean) {
+    if (props.modelValue !== undefined) {
+      emit('update:modelValue', value)
+    } else {
+      localIsOpen.value = value
+    }
+  },
+})
 
 function close() {
-  emit('update:modelValue', false)
+  isOpen.value = false
+}
+
+function open() {
+  isOpen.value = true
 }
 
+defineExpose({
+  close,
+  open,
+  hide: close,
+  show: open,
+})
+
 watch(
-  () => props.modelValue,
+  isOpen,
   async (isOpen) => {
     if (isOpen && !dialogEl.value) {
       await nextTick()
@@ -83,14 +109,6 @@ watch(
 )
 </script>
 
-<script lang="ts">
-export default {
-  compatConfig: {
-    MODE: 3,
-  },
-}
-</script>
-
 <style lang="postcss" scoped>
 dialog::backdrop {
   background: rgba(0, 0, 0, 0.5);