Working on home page and modal

client/components/global/Modal.vue

@@ -49,129 +49,123 @@
   </Teleport>
 </template>
 
-<script>
+<script setup>
 import {useMotions} from '@vueuse/motion'
+import {watch} from "vue";
 
-export default {
-  name: 'Modal',
-
-  props: {
-    show: {
-      default: false
-    },
-    backdropBlur: {
-      type: Boolean,
-      default: false
-    },
-    iconColor: {
-      default: 'blue'
-    },
-    maxWidth: {
-      default: '2xl'
-    },
-    closeable: {
-      default: true
-    }
+const props = defineProps({
+  show: {
+    default: false
   },
-
-  setup(props) {
-    useHead({
-      bodyAttrs: {
-        class: {
-          'overflow-hidden': props.show
-        }
-      }
-    })
-
-    const closeOnEscape = (e) => {
-      if (e.key === 'Escape' && this.show) {
-        this.close()
-      }
-    }
-
-    onMounted(() => {
-      if (process.server) return
-      document.addEventListener('keydown', closeOnEscape)
-    })
-
-    onBeforeUnmount(() => {
-      if (process.server) return
-      document.removeEventListener('keydown', closeOnEscape)
-    })
-
-    return {
-      motions: useMotions(),
-    }
+  backdropBlur: {
+    type: Boolean,
+    default: false
   },
+  iconColor: {
+    default: 'blue'
+  },
+  maxWidth: {
+    default: '2xl'
+  },
+  closeable: {
+    default: true
+  }
+})
 
-  computed: {
-    maxWidthClass() {
-      return {
-        sm: 'sm:max-w-sm',
-        md: 'sm:max-w-md',
-        lg: 'sm:max-w-lg',
-        xl: 'sm:max-w-xl',
-        '2xl': 'sm:max-w-2xl'
-      }[this.maxWidth]
-    },
-    motionFadeIn() {
-      return {
-        initial: {
-          opacity: 0,
-          transition: {
-            delay: 100,
-            duration: 200,
-            ease: 'easeIn'
-          }
-        },
-        enter: {
-          opacity: 1,
-          transition: {
-            duration: 200
-          }
-        }
+const emits = defineEmits(['close'])
+
+useHead({
+  bodyAttrs: {
+    class: {
+      'overflow-hidden': props.show
+    }
+  }
+})
+
+const closeOnEscape = (e) => {
+  if (e.key === 'Escape' && this.show) {
+    this.close()
+  }
+}
+
+onMounted(() => {
+  if (process.server) return
+  document.addEventListener('keydown', closeOnEscape)
+})
+
+onBeforeUnmount(() => {
+  if (process.server) return
+  document.removeEventListener('keydown', closeOnEscape)
+})
+
+const motions = useMotions()
+
+const maxWidthClass = computed(() => {
+  return {
+    sm: 'sm:max-w-sm',
+    md: 'sm:max-w-md',
+    lg: 'sm:max-w-lg',
+    xl: 'sm:max-w-xl',
+    '2xl': 'sm:max-w-2xl'
+  }[props.maxWidth]
+})
+
+const motionFadeIn = computed(() => {
+  return {
+    initial: {
+      opacity: 0,
+      transition: {
+        delay: 100,
+        duration: 200,
+        ease: 'easeIn'
       }
     },
-    motionSlideBottom() {
-      return {
-        initial: {
-          y: 150,
-          opacity: 0,
-          transition: {
-            ease: 'easeIn',
-            duration: 200
-          }
-        },
-        enter: {
-          y: 0,
-          opacity: 1,
-          transition: {
-            duration: 250,
-            ease: 'easeOut',
-            delay: 100
-          }
-        }
-      }
-    }
-  },
-
-  watch: {
-    show(newVal, oldVal) {
-      if (newVal !== oldVal) {
-        if (!newVal) {
-          this.motions.body.apply('initial')
-          this.motions.backdrop.apply('initial')
-        }
-      }
-    }
-  },
-
-  methods: {
-    close() {
-      if (this.closeable) {
-        this.$emit('close')
+    enter: {
+      opacity: 1,
+      transition: {
+        duration: 200
       }
     }
   }
+})
+
+const motionSlideBottom = computed(() => {
+  return {
+    initial: {
+      y: 150,
+      opacity: 0,
+      transition: {
+        ease: 'easeIn',
+        duration: 200
+      }
+    },
+    enter: {
+      y: 0,
+      opacity: 1,
+      transition: {
+        duration: 250,
+        ease: 'easeOut',
+        delay: 100
+      }
+    }
+  }
+})
+
+watch(() => props.show, (newVal, oldVal) => {
+  if (newVal !== oldVal) {
+    if (newVal) {
+      motions.body.apply('enter')
+      motions.backdrop.apply('enter')
+    } else {
+      motions.body.apply('initial')
+      motions.backdrop.apply('initial')
+    }
+  }
+})
+
+const close = () => {
+  if (props.closeable) {
+    emits('close')
+  }
 }
 </script>