ftt-ui-components/packages/message/src/message.ts

some components for vuetify3/element-plus/... with vue3.

import { definePropType } from '../../utils'
import type { ExtractPropTypes, VNode, AppContext } from 'vue'
import type { Mutable } from '../../utils'
import type MessageConstructor from './message.vue'

export const messageTypes = ['success', 'info', 'warning', 'error'] as const

export type messageType = typeof messageTypes[number]

export interface MessageConfigContext {
  max?: number
}

export function omitSnackbarProps(props) {
  const result = {}
  for (const prop in props) {
    if (Object.hasOwn(snackbarProps, prop)) {
      result[prop] = props[prop]
    }
  }
  return result
}

export const messageDefaults = {
  message: '',
  type: 'info',
  icon: '',
  duration: 5000,
  id: '',
  onClose: undefined,
  offset: 16,
  zIndex: 0,
  repeatNum: 1,
  showClose: false,

  // vuetify snackbar props
  contentClass: '',
  multiLine: undefined,
  timeout: -1,
  vertical: false,
  location: 'top',
  position: 'static',
  rounded: true,
  color: '',
  variant: 'elevated',
  transition: 'v-snackbar-transition',
} as const

export const snackbarProps = {
  contentClass: {
    // 内容区的样式
    type: String,
    default: messageDefaults.contentClass,
  },
  multiLine: Number, // 更大的最小调度
  timeout: {
    // 手动控制，默认是5秒
    type: [Number, String],
    default: messageDefaults.timeout,
  },
  vertical: {
    // 内容在动作按钮上方
    type: Boolean,
    default: messageDefaults.vertical,
  },
  location: {
    // top/bottom/left/right
    type: String,
    default: messageDefaults.location,
  },
  position: {
    type: String,
    default: messageDefaults.position,
  }, // static, relative, fixed, absolute, sticky
  rounded: {
    type: Boolean,
    default: messageDefaults.rounded,
  },
  color: String, // 设置着色
  variant: {
    type: String,
    default: messageDefaults.variant, // flat, tonal, outlined, text, plain, elevated
  },
  // https://next.vuetifyjs.com/en/styles/transitions/
  transition: {
    type: String,
    default: messageDefaults.transition, // ...
  },
} as const

export const messageProps = {
  message: {
    type: definePropType<string | VNode | (() => VNode)>([
      String,
      Object,
      Function,
    ]),
    default: messageDefaults.message,
  },
  type: {
    type: String,
    values: messageTypes,
    default: messageDefaults.type,
  },
  icon: {
    type: String,
    default: messageDefaults.icon,
  },
  duration: {
    type: Number,
    default: messageDefaults.duration, // vuetify default timeout
  },
  id: {
    type: String,
    default: messageDefaults.id,
  },
  onClose: {
    type: definePropType<() => void>(Function),
    required: false,
  },
  offset: {
    type: Number,
    default: messageDefaults.offset,
  },
  zIndex: {
    type: Number,
    default: messageDefaults.zIndex,
  },
  repeatNum: {
    type: Number,
    default: messageDefaults.repeatNum,
  },
  showClose: {
    type: Boolean,
    default: messageDefaults.showClose,
  },
  ...snackbarProps,
} as const

export type MessageProps = ExtractPropTypes<typeof messageProps>

export const messageEmits = {
  destroy: () => true,
}
export type MessageEmits = typeof messageEmits

export type MessageInstance = InstanceType<typeof MessageConstructor>

export type MessageOptions = Partial<
  Mutable<
    Omit<MessageProps, 'id'> & {
      appendTo?: HTMLElement | string
    }
  >
>

export type MessageParams = MessageOptions | MessageOptions['message']
export type MessageParamsNormalized = Omit<MessageProps, 'id'> & {
  appendTo: HTMLElement
}
export type MessageOptionsWithType = Omit<MessageOptions, 'type'>
export type MessageParamsWithType =
  | MessageOptionsWithType
  | MessageOptions['message']

export interface MessageHandler {
  close: () => void
}

export type MessageFn = {
  (options?: MessageParams, appContext?: null | AppContext): MessageHandler
  closeAll(type?: messageType): void
}

export type MessageTypedFn = (
  options?: MessageParamsWithType,
  appContext?: null | AppContext
) => MessageHandler

export interface Message extends MessageFn {
  success: MessageTypedFn
  warning: MessageTypedFn
  info: MessageTypedFn
  error: MessageTypedFn
}