feature: implement notify component

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

@@ -1,3 +1,4 @@
+import { isFunction } from 'lodash';
 import { computed, defineComponent, ref, SetupContext } from 'vue';
 import { NotifyContainerComponent } from './notify-container.component';
 import { NotifyData, NotifyProps, notifyProps } from './notify.props';
@@ -11,24 +12,64 @@ export default defineComponent({
             'farris-notify': true,
         }));
 
+        const defaultNotifyDistance = {
+            left: 12,
+            right: 12,
+            top: 136,
+            bottom: 12,
+        };
+
+        const toasts = ref(props.toasts || []);
+
         const notifyStyle = computed(() => ({
-            left: '',
+            left: props.position.indexOf('left') > -1 ? `${props.left ? props.left : defaultNotifyDistance.left}px` : '',
-            right: '',
+            right: props.position.indexOf('right') > -1 ? `${props.right ? props.right : defaultNotifyDistance.right}px` : '',
-            top: '',
+            top: props.position.indexOf('top') > -1 ? `${props.top ? props.top : defaultNotifyDistance.top}px` : '',
-            bottom: '',
+            bottom: props.position.indexOf('bottom') > -1 ? `${props.bottom ? props.bottom : defaultNotifyDistance.bottom}px` : '',
         }));
 
-        const toasts = computed(() => {
+        function onClose($event: Event) {}
-            return props.toasts ? props.toasts : [];
-        });
 
+        function onClick($event: Event) {}
 
+        function closeToast(toast: NotifyData) {}
+
+        function addToast(toast: NotifyData) {
+            if (toasts.value.length >= props.limit) {
+                toasts.value.shift();
+            }
+            toasts.value.push(toast);
+            // if (props.timeout) {
+            //     this._setTimeout(notify);
+            // }
+        }
+
+        function invokeToastOnRemoveCallback(toast: NotifyData) {
+            if (toast && toast.onRemove && isFunction(toast.onRemove)) {
+                toast.onRemove.call(this, toast);
+            }
+        }
+
+        function clear(id: number | string) {
+            const targetToastIndex = toasts.value.findIndex((toast: NotifyData) => toast.id === id);
+            if (targetToastIndex > -1) {
+                const targetToast = toasts.value[targetToastIndex];
+                invokeToastOnRemoveCallback(targetToast);
+                toasts.value.splice(targetToastIndex, 1);
+            }
+        }
+
+        function clearAll() {
+            toasts.value.forEach((toast: NotifyData) => invokeToastOnRemoveCallback(toast));
+            toasts.value.length = 0;
+            context.emit('empty');
+        }
 
         return () => {
             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={} onClick={}></f-toast>;
+                        return <f-toast v-model={toastData} animate={props.animate} onClose={onClose} onClick={onClick}></f-toast>;
                     })}
                 </div>
             );

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

@@ -13,6 +13,8 @@ export type ToastyAnimate =
     | 'bounceIn'
     | 'fadeIn';
 
+export type NotifyTheme = 'default' | 'material' | 'bootstrap';
+
 export interface NotifyButton {
     customClass?: string;
     text: string;
@@ -37,9 +39,18 @@ export interface NotifyData {
 // export interface NotifyData extends NotifyOptions {}
 
 export const notifyProps = {
+    limit:{type:Number,default:5},
+    showCloseButton:{type:Boolean,default:true},
+    position: { type: String as PropType<NotifyPosition>, default: 'top-center' },
+    timeout:{type:Number,default:3000},
+    theme:{type:String as PropType<NotifyTheme>,default:'bootstrap'},
+    left:{type:Number},
+    right:{type:Number},
+    top:{type:Number},
+    bottom:{type:Number},
     id: { type: String },
     animate: { type: String as PropType<ToastyAnimate>, default: 'fadeIn' },
-    position: { type: String as PropType<NotifyPosition>, default: 'toasty-position-top-center' },
     toasts: { type: Array<NotifyData> },
+    options: { type: Object as PropType<NotifyData> },
 };
 export type NotifyProps = ExtractPropTypes<typeof notifyProps>;