Nuxt Migration notifications (#265)

* Nuxt Migration notifications

* @input to @update:model-value

* change field type fixes

* @update:model-value

* Enable form-block-logic-editor

* vue-confetti migration

* PR request changes

* useAlert in setup

client/composables/useAlert.js

@@ -0,0 +1,51 @@
+const { notify } = useNotification()
+
+export const useAlert = () => {
+
+  function success(message, autoClose = 10000) {
+    notify({
+      title: 'Success',
+      text: message,
+      type: 'success',
+      duration: autoClose
+    })
+  }
+
+  function error(message, autoClose = 10000) {
+    notify({
+      title: 'Error',
+      text: message,
+      type: 'error',
+      duration: autoClose
+    })
+  }
+
+  function warning(message, autoClose = 10000) {
+    notify({
+      title: 'Warning',
+      text: message,
+      type: 'warning',
+      duration: autoClose
+    })
+  }
+
+  function confirm(message, success, failure = ()=>{}, autoClose = 10000) {
+    notify({
+      title: 'Confirm',
+      text: message,
+      type: 'confirm',
+      duration: autoClose,
+      data: {
+        success,
+        failure
+      }
+    })
+  }
+
+  return {
+    success,
+    error,
+    warning,
+    confirm
+  }
+}

client/composables/useConfetti.js

@@ -0,0 +1,22 @@
+import { ref, onUnmounted } from 'vue'
+
+export const useConfetti = () => {
+  let timeoutId = ref(null)
+  const nuxtApp = useNuxtApp()
+  const $confetti = nuxtApp.vueApp.config.globalProperties.$confetti
+  
+  function play(duration=3000) {
+    $confetti.start({ defaultSize: 6 })
+    timeoutId = setTimeout(() => {
+      $confetti.stop()
+    }, duration)
+  }
+
+  onUnmounted(() => {
+    if (timeoutId) clearTimeout(timeoutId)
+  })
+
+  return {
+    play
+  }
+}