fix(drawer,dialog): handle persistent prop reactivity (#153)

IcetCode · jd-solanki · web-flow · commit 8d75d85157f4 · 2023-04-08T21:43:53.000+05:30
Co-authored-by: JD Solanki &lt;jdsolanki0001@gmail.com&gt;
diff --git a/packages/anu-vue/src/components/dialog/ADialog.vue b/packages/anu-vue/src/components/dialog/ADialog.vue
@@ -1,9 +1,9 @@
 <script lang="ts" setup>
-import type { Ref } from 'vue'
 import { ACard, cardProps } from '@/components/card'
 import { useDOMScrollLock } from '@/composables/useDOMScrollLock'
 import { defuProps } from '@/composables/useProps'
 import { useTeleport } from '@/composables/useTeleport'
+import type { Ref } from 'vue'
 
 const props = defineProps(defuProps({
   /**
@@ -30,15 +30,11 @@ const { teleportTarget } = useTeleport()
 const isMounted = useMounted()
 
 const refCard = ref()
-if (!props.persistent) {
-  onClickOutside(refCard, () => {
-    // If dialog is not open => Don't execute
-    if (!props.modelValue)
-      return
-
+onClickOutside(refCard, () => {
+  // If dialog is open & persistent prop is false => Close dialog
+  if (props.modelValue && !props.persistent)
     emit('update:modelValue', false)
-  })
-}
+})
 
 // Lock DOM scroll when modelValue is `true`
 // ℹ️ We need to use type assertion here because of this issue: https://github.com/johnsoncodehk/volar/issues/2219
diff --git a/packages/anu-vue/src/components/drawer/ADrawer.vue b/packages/anu-vue/src/components/drawer/ADrawer.vue
@@ -1,9 +1,9 @@
 <script lang="ts" setup>
-import { defu } from 'defu'
-import type { PropType, Ref } from 'vue'
 import { ACard, cardProps } from '@/components/card'
 import { useDOMScrollLock } from '@/composables/useDOMScrollLock'
 import { useTeleport } from '@/composables/useTeleport'
+import { defu } from 'defu'
+import type { PropType, Ref } from 'vue'
 
 const props = defineProps(defu({
   /**
@@ -38,15 +38,11 @@ const { teleportTarget } = useTeleport()
 const isMounted = useMounted()
 
 const refCard = ref()
-if (!props.persistent) {
-  onClickOutside(refCard, () => {
-    // If dialog is not open => Don't execute
-    if (!props.modelValue)
-      return
-
+onClickOutside(refCard, () => {
+  // If dialog is open & persistent prop is false => Close drawer
+  if (props.modelValue && !props.persistent)
     emit('update:modelValue', false)
-  })
-}
+})
 
 const transitionName = computed(() => {
   if (props.anchor === 'bottom')
