refactor: toast (#241)

* refactor(badge): 位置和偏移量参数重命名

* refactor(Toast): 重构Toast组件，重命名为Notification

Author: xingyan95

packages/devui-vue/devui/notification/index.ts

@@ -0,0 +1,16 @@
+import type { App } from 'vue';
+import Notification from './src/notification';
+import NotificationService from './src/notification-service';
+export * from './src/notification-types';
+
+export { Notification, NotificationService };
+
+export default {
+  title: 'Notification 全局通知',
+  category: '反馈',
+  status: '100%',
+  install(app: App): void {
+    app.component(Notification.name, Notification);
+    app.config.globalProperties.$notificationService = NotificationService;
+  },
+};

packages/devui-vue/devui/notification/src/notification-icon-close.tsx

@@ -0,0 +1,13 @@
+import { defineComponent } from 'vue';
+import { Icon } from '../../icon';
+
+export default defineComponent({
+  emits: ['click'],
+  setup(props, { emit }) {
+    return () => (
+      <div class='devui-notification-icon-close' onClick={(e) => emit('click', e)}>
+        <Icon name='close' size='14px' />
+      </div>
+    );
+  },
+});

packages/devui-vue/devui/notification/src/notification-image.tsx

@@ -0,0 +1,28 @@
+import { computed, defineComponent, toRefs } from 'vue';
+import type { PropType } from 'vue';
+import { NotificationType } from './notification-types';
+import { Icon } from '../../icon';
+
+export default defineComponent({
+  props: {
+    type: {
+      type: String as PropType<NotificationType>,
+      default: 'normal',
+    },
+  },
+  setup(props) {
+    const { type } = toRefs(props);
+    const classes = computed(() => ({
+      'devui-notification-image': true,
+      [`devui-notification-image-${type.value}`]: true,
+    }));
+    const severityIconMap = {
+      info: 'info-o',
+      success: 'right-o',
+      warning: 'warning-o',
+      error: 'error-o',
+    };
+
+    return () => <span class={classes.value}>{type.value !== 'normal' && <Icon name={severityIconMap[type.value]} size='16px' />}</span>;
+  },
+});

packages/devui-vue/devui/notification/src/notification-service.tsx

@@ -0,0 +1,60 @@
+import { reactive, createApp, onUnmounted } from 'vue';
+import type { App } from 'vue';
+import { NotificationOption, VoidFn } from './notification-types';
+import Notification from './notification';
+
+const defaultOptions: NotificationOption = {
+  modelValue: false,
+  duration: 3000,
+  type: 'normal',
+};
+
+function initInstance(props: NotificationOption, content: string): App {
+  const container = document.createElement('div');
+  const app: App = createApp({
+    setup() {
+      onUnmounted(() => {
+        document.body.removeChild(container);
+      });
+
+      return () => (
+        <Notification {...props} onDestroy={app.unmount}>
+          {content}
+        </Notification>
+      );
+    },
+  });
+  document.body.appendChild(container);
+  app.mount(container);
+  return app;
+}
+
+function close(props: NotificationOption, originOnClose: VoidFn | null): void {
+  props.modelValue = false;
+  originOnClose?.();
+}
+
+export default class NotificationService {
+  static open(options: NotificationOption): void {
+    const originOnClose: VoidFn | null = options.onClose || null;
+    const content = options.content;
+    let timer;
+    delete options.content;
+
+    const props: NotificationOption = reactive({
+      ...defaultOptions,
+      ...options,
+      onClose: () => {
+        close(props, originOnClose);
+      },
+    });
+
+    initInstance(props, content);
+    props.modelValue = true;
+
+    clearTimeout(timer);
+    if (options.duration) {
+      timer = setTimeout(props.onClose, options.duration);
+    }
+  }
+}

packages/devui-vue/devui/notification/src/notification-types.ts

@@ -0,0 +1,40 @@
+import type { ExtractPropTypes, PropType, h } from 'vue';
+
+export type NotificationType = 'normal' | 'success' | 'error' | 'warning' | 'info';
+
+export interface Message {
+  type?: NotificationType;
+  title?: string;
+  content?: string | ((message: Message) => ReturnType<typeof h>);
+  duration?: number;
+}
+
+export const notificationProps = {
+  modelValue: {
+    type: Boolean,
+    default: false,
+  },
+  title: {
+    type: String,
+    default: '',
+  },
+  type: {
+    type: String as PropType<NotificationType>,
+    default: 'normal',
+  },
+  duration: {
+    type: Number,
+    default: 3000,
+  },
+  onClose: {
+    type: Function as PropType<() => void>,
+  },
+};
+
+export type EmitEventFn = (event: 'update:modelValue' | 'destroy', result?: unknown) => void;
+
+export type VoidFn = () => void;
+
+export type NotificationProps = ExtractPropTypes<typeof notificationProps>;
+
+export type NotificationOption = Partial<NotificationProps> & { content?: string };

packages/devui-vue/devui/toast/src/toast.scss renamed to packages/devui-vue/devui/notification/src/notification.scss

@@ -1,17 +1,13 @@
-@import '../../style/mixins/index';
-@import '../../style/theme/color';
-@import '../../style/theme/shadow';
-@import '../../style/theme/corner';
-@import '../../style/core/_font';
-@import '../../style/core/animation';
-
-.devui-toast {
+@import '../../styles-var/devui-var.scss';
+
+.devui-notification {
   position: fixed;
   top: 50px;
   right: 20px;
   width: 20em;
   word-break: normal;
   word-wrap: break-word;
+  z-index: 1060;
 
   a {
     &:link,
@@ -26,35 +22,24 @@
   }
 }
 
-.devui-toast-item-container {
+.devui-notification-item-container {
   position: relative;
-  transform: translateX(100%);
-  margin: 0 0 10px 0;
+  margin: 0 0 8px 0;
   opacity: 0.95;
   filter: alpha(opacity=95);
   box-shadow: $devui-shadow-length-feedback-overlay $devui-shadow;
   border-radius: $devui-border-radius-feedback;
   color: $devui-feedback-overlay-text;
-  transition: all $devui-animation-duration-slow $devui-animation-ease-in-out;
   background-color: $devui-feedback-overlay-bg;
-
-  &.slide-in {
-    transform: translateX(0);
-  }
 }
 
-.devui-toast-item {
+.devui-notification-item {
   position: relative;
   display: block;
   padding: 12px 16px;
 }
 
-.devui-toast-item p {
-  padding: 0;
-  margin: 0;
-}
-
-.devui-toast-icon-close {
+.devui-notification-icon-close {
   position: absolute;
   top: 7px;
   right: 10px;
@@ -65,14 +50,14 @@
   }
 }
 
-.devui-toast-title {
+.devui-notification-title {
   font-size: $devui-font-size-card-title;
   padding: 0 0 calc(0.5em - 2px) 0;
   display: block;
   font-weight: 700;
 }
 
-.devui-toast-image {
+.devui-notification-image {
   position: absolute;
   display: inline-block;
   width: 16px;
@@ -83,46 +68,55 @@
   padding: 0;
   line-height: 1;
 
-  &.devui-toast-image-warn i.icon {
+  &.devui-notification-image-warn i.icon {
     color: $devui-warning !important;
   }
 
-  &.devui-toast-image-info i.icon {
+  &.devui-notification-image-info i.icon {
     color: $devui-info !important;
   }
 
-  &.devui-toast-image-error i.icon {
+  &.devui-notification-image-error i.icon {
     color: $devui-danger !important;
   }
 
-  &.devui-toast-image-success i.icon {
+  &.devui-notification-image-success i.icon {
     color: $devui-success !important;
   }
 
-  .devui-toast-image-info-path,
-  .devui-toast-image-error-path,
-  .devui-toast-image-success-path {
+  .devui-notification-image-info-path,
+  .devui-notification-image-error-path,
+  .devui-notification-image-success-path {
     fill: $devui-light-text;
   }
 }
 
-.devui-toast-message {
+.devui-notification-message {
   margin-left: 20px;
 
-  p {
-    padding: 0 8px 0 4px;
-  }
-
-  span.devui-toast-title + p {
-    padding: 0;
+  .devui-notification-content {
+    font-size: $devui-font-size;
+    margin-top: 4px;
   }
 }
 
-.devui-toast-message-common .devui-toast-message {
+.devui-notification-message-common .devui-notification-message {
   margin-left: 0;
 }
 
-.devui-toast-message p {
+.devui-notification-message p {
   font-size: $devui-font-size;
-  margin-top: 2px;
+  margin-top: 4px;
+}
+
+.notification-fade {
+  &-enter-active,
+  &-leave-active {
+    transition: transform $devui-animation-duration-slow $devui-animation-ease-in-out;
+  }
+
+  &-enter-from,
+  &-leave-to {
+    transform: translateX(100%);
+  }
 }

packages/devui-vue/devui/notification/src/notification.tsx

@@ -0,0 +1,36 @@
+import { defineComponent, toRefs, Transition } from 'vue';
+import { notificationProps, NotificationProps } from './notification-types';
+import Close from './notification-icon-close';
+import TypeIcon from './notification-image';
+import { useNotification, useEvent } from './use-notification';
+import './notification.scss';
+
+export default defineComponent({
+  name: 'DNotification',
+  props: notificationProps,
+  emits: ['update:modelValue', 'destroy'],
+  setup(props: NotificationProps, { emit, slots }) {
+    const { modelValue, title, type } = toRefs(props);
+    const { classes } = useNotification(props);
+    const { interrupt, removeReset, close, handleDestroy } = useEvent(props, emit);
+
+    return () => (
+      <Transition name='notification-fade' onAfterLeave={handleDestroy}>
+        {modelValue.value && (
+          <div class='devui-notification'>
+            <div class={classes.value} onMouseenter={interrupt} onMouseleave={removeReset}>
+              <div class='devui-notification-item'>
+                <Close onClick={close} />
+                {title.value && <TypeIcon type={type.value} />}
+                <div class='devui-notification-message'>
+                  <span class='devui-notification-title'>{title.value}</span>
+                  <span class='devui-notification-content'>{slots.default?.()}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
+      </Transition>
+    );
+  },
+});