refactor(demos): update and create messages composable

Author: sfxcode

dev/App.vue

@@ -5,6 +5,7 @@ import AppTopBar from '@/components/app/AppTopbar.vue'
 
 <template>
   <main class="p-2">
+    <Toast position="bottom-right" />
     <div class="">
       <AppTopBar />
       <div class="pl-2">

dev/auto-import.d.ts

@@ -74,6 +74,6 @@ declare global {
 // for type re-export
 declare global {
   // @ts-ignore
-  export type { Component, ComponentPublicInstance, ComputedRef, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, VNode, WritableComputedRef } from 'vue'
+  export type { Component, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
   import('vue')
 }

dev/components.d.ts

@@ -9,6 +9,7 @@ declare module 'vue' {
   export interface GlobalComponents {
     AppFooter: typeof import('./components/app/AppFooter.vue')['default']
     AppTopbar: typeof import('./components/app/AppTopbar.vue')['default']
+    PrimeData: typeof import('./components/demo/PrimeData.vue')['default']
     PrimeInput: typeof import('./components/demo/PrimeInput.vue')['default']
     PrimeOutput: typeof import('./components/demo/PrimeOutput.vue')['default']
     PrimeSchemaEditor: typeof import('./components/demo/PrimeSchemaEditor.vue')['default']

dev/components/demo/PrimeInput.vue

@@ -1,10 +1,9 @@
 <script setup lang='ts'>
-import type { ToastMessageOptions } from 'primevue/toast'
 import { FormKit, FormKitSchema } from '@formkit/vue'
 import JsonEditorVue from 'json-editor-vue'
-import { useToast } from 'primevue/usetoast'
 import { ref } from 'vue'
 import FormKitDebug from '../../../src/components/FormKitDebug.vue'
+import { useMessages } from '../../composables/messages'
 
 const props = defineProps<{
   header: string
@@ -16,11 +15,7 @@ const props = defineProps<{
   hideTabs?: boolean
 }>()
 
-const toast = useToast()
-
-function showMessage(severity: ToastMessageOptions['severity'], summary: string, detail: string) {
-  toast.add({ severity, summary, detail, life: 1000 })
-}
+const { showSuccessMessage } = useMessages()
 
 const formSchema = ref(props.schema)
 const formData = ref(props.data)
@@ -29,13 +24,12 @@ const documentationLink = `https://primevue.org/${props.header.replace('Prime',
 const inputClass = 'p-button p-component p-formkit-button'
 
 async function submitHandler() {
-  showMessage('success', 'Form Submitted ...', `${props.header} submitted successfully`)
+  showSuccessMessage('Form Submitted ...', `${props.header} submitted successfully`)
 }
 </script>
 
 <template>
   <div>
-    <Toast position="bottom-right" />
     <h2 class="text-color-[var(--p-primary-color)] pb-2">
       {{ header }}
     </h2>

dev/components/demo/PrimeOutput.vue

@@ -18,7 +18,6 @@ const formData = ref(props.data)
 
 <template>
   <div>
-    <Toast position="bottom-right" />
     <h2 class="text-color-[var(--p-primary-color)] pb-2">
       {{ header }}
     </h2>

dev/components/demo/PrimeSchemaEditor.vue

@@ -1,11 +1,10 @@
 <script setup lang='ts'>
-import type { ToastMessageOptions } from 'primevue/toast'
 import { FormKitSchema } from '@formkit/vue'
 import { useClipboard } from '@vueuse/core'
 import { useInputEditor } from 'my-library'
-import { useToast } from 'primevue/usetoast'
 
 import { ref } from 'vue'
+import { useMessages } from '../../composables/messages'
 
 const props = defineProps<{
   header: string
@@ -18,27 +17,23 @@ const schemaResultFormKey = ref(0)
 
 const { editorDataToSchema, editorDataToJson, editorDataToCode } = useInputEditor()
 
-const toast = useToast()
-
-function showMessage(severity: ToastMessageOptions['severity'], summary: string, detail: string) {
-  toast.add({ severity, summary, detail, life: 2000 })
-}
+const { showSuccessMessage } = useMessages()
 
 const formSchema = ref(props.schema)
 const formData = reactive(props.data)
 
 const data = ref({})
 
 async function submitHandler() {
-  showMessage('success', `Form Input (${formData._dollar_formkit}) updated`, 'Input creation completed successfully ...')
+  showSuccessMessage(`Form Input (${formData._dollar_formkit}) updated`, 'Input creation completed successfully ...')
 
   data.value = { }
   schemaResultFormKey.value += 1
   Object.assign(formData, { ...formData, schemaResultFormKey: schemaResultFormKey.value })
 }
 
 async function submitHandler2() {
-  showMessage('success', `Data submitted`, data.value)
+  showSuccessMessage(`Data submitted`, data.value.toString())
 }
 
 const schemaResult = computed(() => editorDataToSchema(formData))
@@ -56,7 +51,6 @@ function copyObject() {
 
 <template>
   <div>
-    <Toast position="bottom-right" />
     <h2 class="text-color-[var(--p-primary-color)] pb-2">
       {{ header }}
     </h2>

dev/composables/messages.ts

@@ -0,0 +1,35 @@
+import type { ToastMessageOptions } from 'primevue/toast'
+import { useToast } from 'primevue/usetoast'
+
+export enum MessageSeverity {
+  SUCCESS = 'success',
+  INFO = 'info',
+  WARN = 'warn',
+  ERROR = 'error',
+}
+
+export function useMessages() {
+  const toast = useToast()
+
+  function showMessage(severity: ToastMessageOptions['severity'], summary: string, detail: string, life: number = 3000) {
+    toast.add({ severity, summary, detail, life })
+  }
+
+  function showSuccessMessage(summary: string, detail: string = summary, life: number = 3000) {
+    showMessage(MessageSeverity.SUCCESS, summary, detail, life)
+  }
+
+  function showInfoMessage(summary: string, detail: string = summary, life: number = 3000) {
+    showMessage(MessageSeverity.INFO, summary, detail, life)
+  }
+
+  function showWarnMessage(summary: string, detail: string = summary, life: number = 3000) {
+    showMessage(MessageSeverity.WARN, summary, detail, life)
+  }
+
+  function showErrorMessage(summary: string, detail: string = summary, life: number = 3000) {
+    showMessage(MessageSeverity.ERROR, summary, detail, life)
+  }
+
+  return { showSuccessMessage, showInfoMessage, showWarnMessage, showErrorMessage }
+}