feature(notify): add notify service and notify demo

packages/ui-vue/components/notify/src/components/toast.component.tsx

@@ -19,7 +19,7 @@ export default defineComponent({
         const toastClass = computed(() => {
             const classObject = {
                 animated: showingToast.value,
-                toast: true,
+                toast: true
             };
             classObject[props.animate] = false;
             classObject[animateEnd] = showingToast.value;
@@ -93,7 +93,7 @@ export default defineComponent({
 
         return () => {
             return (
-                <div class={toastClass}>
+                <div class={toastClass.value}>
                     {shouldShowCloseButton.value && (
                         <button class="toast-close f-btn-icon f-bare" onClick={onCloseToast}>
                             <span class="f-icon modal_close"></span>
@@ -127,5 +127,5 @@ export default defineComponent({
                 </div>
             );
         };
-    },
+    }
 });

packages/ui-vue/components/notify/src/notify.component.tsx

@@ -1,21 +1,22 @@
 import { isFunction } from 'lodash';
 import { computed, defineComponent, ref, SetupContext } from 'vue';
 import { NotifyData, NotifyProps, notifyProps } from './notify.props';
+import Toast from './components/toast.component';
 
 export default defineComponent({
     name: 'Notify',
     props: notifyProps,
-    emits: ['empty'],
+    emits: ['close', 'empty'],
     setup(props: NotifyProps, context: SetupContext) {
         const notifyClass = computed(() => ({
-            'farris-notify': true,
+            'farris-notify': true
         }));
 
         const defaultNotifyDistance = {
             left: 12,
             right: 12,
             top: 136,
-            bottom: 12,
+            bottom: 12
         };
 
         const toasts = ref(props.toasts || []);
@@ -24,10 +25,12 @@ export default defineComponent({
             left: props.position.indexOf('left') > -1 ? `${props.left ? props.left : defaultNotifyDistance.left}px` : '',
             right: props.position.indexOf('right') > -1 ? `${props.right ? props.right : defaultNotifyDistance.right}px` : '',
             top: props.position.indexOf('top') > -1 ? `${props.top ? props.top : defaultNotifyDistance.top}px` : '',
-            bottom: props.position.indexOf('bottom') > -1 ? `${props.bottom ? props.bottom : defaultNotifyDistance.bottom}px` : '',
+            bottom: props.position.indexOf('bottom') > -1 ? `${props.bottom ? props.bottom : defaultNotifyDistance.bottom}px` : ''
         }));
 
-        function closeToast(toast: NotifyData) {}
+        function closeToast(toast: NotifyData) {
+            context.emit('close');
+        }
 
         function addToast(toast: NotifyData) {
             if (toasts.value.length >= props.limit) {
@@ -71,16 +74,10 @@ export default defineComponent({
             return (
                 <div id={props.id} class={notifyClass.value} style={notifyStyle.value}>
                     {toasts.value.map((toastData: NotifyData) => {
-                        return (
-                            <f-toast
-                                v-model={toastData}
-                                animate={props.animate}
-                                onClose={($event: Event) => onClose($event, toastData)}
-                                onClick={onClick}></f-toast>
-                        );
+                        return <Toast options={toastData} animate={props.animate} onClose={($event) => onClose($event, toastData)}></Toast>;
                     })}
                 </div>
             );
         };
-    },
+    }
 });

packages/ui-vue/components/notify/src/notify.props.ts

@@ -50,6 +50,6 @@ export const notifyProps = {
     id: { type: String },
     animate: { type: String as PropType<ToastyAnimate>, default: 'fadeIn' },
     toasts: { type: Array<NotifyData> },
-    options: { type: Object as PropType<NotifyData> },
+    options: { type: Object as PropType<NotifyData> }
 };
 export type NotifyProps = ExtractPropTypes<typeof notifyProps>;

packages/ui-vue/components/notify/src/notify.service.tsx

@@ -0,0 +1,29 @@
+import { reactive, createApp, onUnmounted } from 'vue';
+import type { App } from 'vue';
+import { NotifyProps } from './notify.props';
+import Notify from './notify.component';
+
+function initInstance(props: NotifyProps, content?: string): App {
+    const container = document.createElement('div');
+    container.style.display = 'contents';
+    const app: App = createApp({
+        setup() {
+            onUnmounted(() => {
+                document.body.removeChild(container);
+            });
+            return () => <Notify {...props} onClose={app.unmount}></Notify>;
+        }
+    });
+    document.body.appendChild(container);
+    app.mount(container);
+    return app;
+}
+
+export default class NotifyService {
+    static show(options: NotifyProps): void {
+        const props: NotifyProps = reactive({
+            ...options
+        });
+        initInstance(props);
+    }
+}

packages/ui-vue/src/App.vue

@@ -8,6 +8,7 @@ import ButtonEdit from './components/button-edit.vue';
 import FButton from '../components/button/src/button.component';
 import Switch from './components/switch.vue';
 import Section from './components/section.vue';
+import Notify from './components/notify.vue';
 
 const canEdit = ref(true);
 const disable = ref(false);
@@ -36,6 +37,7 @@ const canAutoComplete = ref(false);
     <FButton :disable="disable"></FButton>
     <Switch></Switch>
     <Section></Section>
+    <Notify></Notify>
 </template>
 
 <style scoped>

packages/ui-vue/src/components/notify.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import NotifyService from '../../components/notify/src/notify.service';
+
+function showMessage() {
+    NotifyService.show({
+        limit: 5,
+        showCloseButton: false,
+        position: 'top-center',
+        timeout: 3000,
+        theme: 'bootstrap',
+        left: 0,
+        right: 0,
+        top: 0,
+        bottom: 0,
+        id: '1',
+        animate: 'fadeIn',
+        options: { type: 'string', title: 'string', msg: 'string' },
+        toasts: [{ type: 'string', title: 'string', msg: 'string' }]
+    });
+}
+</script>
+
+<template>
+    <button class="btn btn-primary" @click="showMessage">show notify</button>
+</template>