@will-ui/vue 1.0.0

package/dist/components/notice/types.d.ts

@@ -0,0 +1,98 @@
+import { App, CSSProperties, VNodeChild } from 'vue';
+import { CssVars } from '../../util';
+/** 通知出现位置 */
+export type NoticePlacementType = 'top' | 'bottom' | 'top-end' | 'bottom-end' | 'top-start' | 'bottom-start';
+/** 通知语义类型 */
+export type NoticeType = 'default' | 'info' | 'success' | 'warning' | 'error';
+/** 关闭方法 */
+export type NoticeClose = () => void;
+/** 通知内容：文本 / VNode / 渲染函数 */
+export type NoticeContent = VNodeChild | ((close: NoticeClose) => VNodeChild);
+/**
+ * 单次 open 的配置。
+ *
+ * 常用：
+ * - `open({ content: '消息' })`
+ * - `success('成功')` / `success({ title, content })`
+ * - 同 `key` 再次 open 会立刻替换旧通知（适合进度）
+ */
+export interface NoticeOptions {
+    content: NoticeContent;
+    /** 标题（可选） */
+    title?: VNodeChild;
+    /** 语义类型，影响默认图标与样式 */
+    type?: NoticeType;
+    /** 出现位置，默认 `top-end` */
+    placement?: NoticePlacementType;
+    /** 自动关闭时长(ms)；`0` 或不传且 `manual` 时不自动关闭。默认 4500 */
+    duration?: number;
+    /** 一直显示（等价于 duration <= 0） */
+    manual?: boolean;
+    /** 是否显示关闭按钮，默认 true */
+    showClose?: boolean;
+    /** 关闭动画结束后回调 */
+    afterClose?: () => void;
+    /** 开始关闭时回调（动画前） */
+    onClose?: () => void;
+    /**
+     * 自定义图标：
+     * - string：图标名
+     * - false：不显示图标
+     * - VNode / 函数：自定义节点
+     * - true / undefined：按 type 使用默认图标
+     */
+    icon?: string | boolean | VNodeChild | (() => VNodeChild);
+    /** 通知项 class */
+    class?: any;
+    /** 通知项 style / CSS 变量 */
+    style?: CSSProperties | Record<string, string>;
+    /** 容器 class */
+    wrapperClass?: any;
+    /** 容器 style / CSS 变量（如 --w-notice-offset） */
+    wrapperStyle?: CSSProperties | Record<string, string>;
+    /** 距边缘偏移，写入容器 CSS 变量 */
+    offset?: number | string;
+    /** 自定义 z-index */
+    zIndex?: number;
+    /** 同一 key 再次 open 时立刻替换已有通知 */
+    key?: string | number;
+    /** 鼠标悬停时暂停自动关闭，默认 true */
+    hoverKeep?: boolean;
+    /** 实例主色 → `--w-prop-notice-color` */
+    color?: string;
+    /** 实例尺度（px）→ `--w-prop-notice-size` */
+    size?: number;
+    /** 实例 CSS 变量（也可写在 style） */
+    cssVars?: CssVars;
+}
+/**
+ * 全局默认配置（可通过 app.use(UI, { components: { Notice } }) 或 config() 设置）
+ */
+export type NoticeGlobalConfig = Partial<Omit<NoticeOptions, 'content' | 'afterClose' | 'onClose' | 'key' | 'title'>> & {
+    /** 同位置最大同时展示数量，超出关闭最早的一条 */
+    maxCount?: number;
+};
+/**
+ * open 返回值。日常只用 `instance.close()`；
+ * 同时是 Vue App，便于高级场景访问上下文。
+ */
+export type NoticeInstance = App & {
+    close: () => void;
+};
+export interface NoticeApi {
+    open: (options: NoticeOptions) => NoticeInstance;
+    /** @deprecated 优先用 `instance.close()` */
+    close: (app: App) => void;
+    closeAll: () => void;
+    config: (options: NoticeGlobalConfig) => void;
+    success: NoticeShortcut;
+    info: NoticeShortcut;
+    warning: NoticeShortcut;
+    error: NoticeShortcut;
+}
+/**
+ * 语义快捷方法：`success('ok')` 或 `success({ title, content })`
+ */
+export type NoticeShortcut = (content: NoticeContent | (Omit<NoticeOptions, 'type'> & {
+    content?: NoticeContent;
+}), options?: Omit<NoticeOptions, 'content' | 'type'>) => NoticeInstance;