feature: add popover and tooltip

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

@@ -0,0 +1,59 @@
+import { computed, defineComponent, SetupContext } from 'vue';
+import { NotifyData } from '../notify.props';
+import { ToastProps, toastProps } from './toast.props';
+
+export default defineComponent({
+  name: 'Toast',
+  props: toastProps,
+  emits: [],
+  setup: (props: ToastProps, context: SetupContext) => {
+    const toastClass = computed(() => ({
+      toast: true,
+    }));
+
+    const toast = computed(() => {
+      return {} as NotifyData;
+    });
+
+    const toastIconClass = computed(() => ({
+      'f-icon': true,
+    }));
+
+    const shouldShowTips = computed(() => toast.value.title || toast.value.msg);
+
+    const shouldShowTitle = computed(() => toast.value.title && toast.value.msg);
+
+    const shouldShowCloseButton = computed(() => {
+      return true;
+    });
+
+    function onCloseToast($event: Event) {}
+
+    return () => {
+      return (
+        <div class={toastClass}>
+          {shouldShowCloseButton.value && (
+            <button class="toast-close f-btn-icon f-bare" onClick={onCloseToast}>
+              <span class="f-icon modal_close"></span>
+            </button>
+          )}
+          {shouldShowTips.value && (
+            <section class="modal-tips">
+              <div class="float-left modal-tips-iconwrap">
+                <span class={toastIconClass}></span>
+              </div>
+              <div class="modal-tips-content">
+                {shouldShowTitle.value && (
+                  <>
+                    <h5 class="toast-title modal-tips-title" v-html={toast.value.title}></h5>
+                    <p class="toast-msg" v-html={toast.value.msg}></p>
+                  </>
+                )}
+              </div>
+            </section>
+          )}
+        </div>
+      );
+    };
+  },
+});

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

@@ -0,0 +1,8 @@
+import { ExtractPropTypes, PropType } from 'vue';
+import { ToastyAnimate } from '../notify.props';
+
+export const toastProps = {
+  animate: { type: String as PropType<ToastyAnimate>, default: 'fadeIn' },
+};
+
+export type ToastProps = ExtractPropTypes<typeof toastProps>;

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

@@ -1,12 +1,35 @@
-import { defineComponent, SetupContext } from 'vue';
+import { computed, defineComponent, SetupContext } from 'vue';
+import { NotifyContainerComponent } from './notify-container.component';
+import { NotifyData, NotifyProps, notifyProps } from './notify.props';
 
 export default defineComponent({
   name: 'Notify',
-  props: {},
+  props: notifyProps,
   emits: [],
-  setup(props: any, context: SetupContext) {
+  setup(props: NotifyProps, context: SetupContext) {
+    const notifyClass = computed(() => ({
+      'farris-notify': true,
+    }));
+
+    const notifyStyle = computed(() => ({
+      left: '',
+      right: '',
+      top: '',
+      bottom: '',
+    }));
+
+    const toasts = computed(() => {
+      return props.toasts ? props.toasts : [];
+    });
+
     return () => {
-      return <div></div>;
+      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>;
+          })}
+        </div>
+      );
     };
   },
 });

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

@@ -1,4 +1,44 @@
-import { ExtractPropTypes } from 'vue';
+import { ExtractPropTypes, PropType } from 'vue';
 
-export const notifyProps = {};
+export type NotifyPosition = 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left' | 'top-center' | 'bottom-center' | 'center-center';
+
+export type ToastyAnimate =
+  | 'bounceInRight'
+  | 'bounceInLeft'
+  | 'bounceInRight'
+  | 'bounceInLeft'
+  | 'bounceInDown'
+  | 'bounceInUp'
+  | 'bounceIn'
+  | 'fadeIn';
+
+export interface NotifyButton {
+  customClass?: string;
+  text: string;
+  disable?: boolean;
+  onClick?: ($event: Event, component: any) => any;
+}
+
+export interface NotifyData {
+  type: string;
+  title?: string;
+  msg?: string;
+  /** 按钮列表模板 */
+  buttons?: Array<NotifyButton>;
+  showClose?: boolean;
+  theme?: string;
+  timeout?: number;
+  onAdd?: () => void;
+  onRemove?: () => void;
+  id?: number | string;
+}
+
+// export interface NotifyData extends NotifyOptions {}
+
+export const notifyProps = {
+  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> },
+};
 export type NotifyProps = ExtractPropTypes<typeof notifyProps>;