@kine-design/core 0.0.1-beta.1 → 0.0.1-beta.11

package/components/message/drawer/props.d.ts

@@ -0,0 +1,80 @@
+/**
+ * @description drawer api type
+ * @author 阿怪
+ * @date 2026/2/25
+ * @version v1.1.0
+ *
+ * @name m-drawer
+ * @docDescription Headless drawer component.
+ *                 无样式抽屉组件。
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+import type { ModelMask } from '../../../types/common/model.d.ts';
+import type { MTeleportProps } from '../../../types/common/common.d.ts';
+
+export declare type DrawerProps = {
+  /**
+   * @description drawer visible value
+   *              抽屉是否显示
+   * @type boolean
+   * @default false
+   */
+  visible?: boolean,
+  /**
+   * @description drawer mask option
+   *              抽屉背景配置
+   * @type ModelMask
+   * @default { show: true, clickClose: true }
+   */
+  mask?: ModelMask,
+  /**
+   * @description drawer class
+   *              抽屉扩展类名
+   * @type string[]
+   * @default []
+   */
+  drawerClass?: string[],
+  /**
+   * @description drawer direction
+   *              抽屉出现方向
+   * @type 'top' | 'right' | 'bottom' | 'left'
+   * @default 'right'
+   */
+  direction?: 'top' | 'right' | 'bottom' | 'left',
+  /**
+   * @description drawer teleport
+   *              抽屉传送配置
+   * @type MTeleportProps
+   * @default { to: 'body' }
+   */
+  teleport?: MTeleportProps,
+  /**
+   * @description drawer title
+   *              抽屉标题，传入时渲染标题栏
+   * @type string
+   * @default undefined
+   */
+  title?: string,
+  /**
+   * @description drawer width
+   *              抽屉宽度，适用于 left / right 方向
+   * @type string
+   * @default undefined
+   */
+  width?: string,
+  /**
+   * @description drawer height
+   *              抽屉高度，适用于 top / bottom 方向
+   * @type string
+   * @default undefined
+   */
+  height?: string,
+  /**
+   * @description callback before close, return false or Promise.reject to prevent close
+   *              关闭前的回调，返回 false 或 reject 的 Promise 可阻止关闭
+   * @type () => boolean | Promise<boolean>
+   * @default undefined
+   */
+  beforeClose?: () => boolean | Promise<boolean>,
+};

package/components/message/message/api.ts

@@ -0,0 +1,27 @@
+/**
+ * @description message runtime props 定义
+ * @author 阿怪
+ * @date 2026/2/25
+ * @version v1.0.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+import { MCOPO, MPropType } from '../../types/props';
+import { MessageProps, MessageListProps, MessageType, MessageDirectionType } from './props';
+
+/**
+ * 单条消息组件的运行时 props
+ */
+export const messageProps: MCOPO<MessageProps> = {
+  content: { type: String, required: true },
+  type: { type: String as MPropType<MessageType>, default: 'info' },
+  duration: { type: Number, default: 3000 },
+  direction: { type: String as MPropType<MessageDirectionType>, default: 'top-right' },
+};
+
+/**
+ * 消息列表容器的运行时 props
+ */
+export const messageListProps: MCOPO<MessageListProps> = {
+  direction: { type: String as MPropType<MessageDirectionType>, default: 'top-right' },
+};

package/components/message/message/index.ts

@@ -0,0 +1,20 @@
+/**
+ * @description message core 导出
+ * @author 阿怪
+ * @date 2026/2/25
+ * @version v1.0.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+import { messageProps, messageListProps } from './api';
+import { useMessageQueue } from './useMessage';
+
+export const MessageCore = {
+  messageProps,
+  messageListProps,
+  useMessageQueue,
+};
+
+export { useMessageQueue } from './useMessage';
+export type { MessageProps, MessageListProps, MessageType, MessageDirectionType } from './props';
+export type { MessageItem } from './useMessage';

package/components/message/message/props.d.ts

@@ -0,0 +1,54 @@
+/**
+ * @description message 组件 props 类型定义
+ * @author 阿怪
+ * @date 2026/2/25
+ * @version v1.0.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+
+/**
+ * 消息类型枚举
+ */
+export type MessageType = 'success' | 'warning' | 'info' | 'error';
+
+/**
+ * 消息出现方位枚举
+ */
+export type MessageDirectionType = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'top-center';
+
+/**
+ * 单条消息 props
+ */
+export declare type MessageProps = {
+  /**
+   * @description 消息类型
+   * @default 'info'
+   */
+  type?: MessageType;
+  /**
+   * @description 显示时长（毫秒），0 表示不自动关闭
+   * @default 3000
+   */
+  duration?: number;
+  /**
+   * @description 消息内容
+   */
+  content: string;
+  /**
+   * @description 消息出现的方位
+   * @default 'top-right'
+   */
+  direction?: MessageDirectionType;
+};
+
+/**
+ * 消息列表容器 props
+ */
+export declare type MessageListProps = {
+  /**
+   * @description 消息列表出现的方位
+   * @default 'top-right'
+   */
+  direction?: MessageDirectionType;
+};

package/components/message/message/useMessage.ts

@@ -0,0 +1,61 @@
+/**
+ * @description message 队列 composable
+ * @author 阿怪
+ * @date 2026/2/25
+ * @version v1.0.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+import { ref } from 'vue';
+import { MessageType } from './props';
+
+/**
+ * 消息队列中每一条消息的内部结构
+ */
+export interface MessageItem {
+  id: number;
+  type: MessageType;
+  content: string;
+  duration: number;
+}
+
+/**
+ * 消息队列 composable
+ * 管理消息的增删与自动关闭定时器
+ */
+export function useMessageQueue() {
+  const messages = ref<MessageItem[]>([]);
+  let nextId = 0;
+
+  /**
+   * 添加一条消息，duration > 0 时自动移除
+   */
+  const add = (props: { type?: MessageType; content: string; duration?: number }): number => {
+    const id = nextId++;
+    const item: MessageItem = {
+      id,
+      type: props.type ?? 'info',
+      content: props.content,
+      duration: props.duration ?? 3000,
+    };
+    messages.value.push(item);
+
+    if (item.duration > 0) {
+      setTimeout(() => remove(id), item.duration);
+    }
+
+    return id;
+  };
+
+  /**
+   * 按 id 移除一条消息
+   */
+  const remove = (id: number): void => {
+    const idx = messages.value.findIndex(m => m.id === id);
+    if (idx !== -1) {
+      messages.value.splice(idx, 1);
+    }
+  };
+
+  return { messages, add, remove };
+}

package/components/message/notification/__tests__/useNotification.test.ts

@@ -0,0 +1,129 @@
+/**
+ * @description useNotificationQueue 测试
+ * @author 阿怪
+ * @date 2026/3/23
+ * @version v1.0.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+import { describe, expect, it, vi, beforeEach, afterEach } from 'vitest';
+import { useNotificationQueue } from '../useNotification';
+
+beforeEach(() => { vi.useFakeTimers(); });
+afterEach(() => { vi.useRealTimers(); });
+
+describe('useNotificationQueue', () => {
+  it('初始通知列表为空', () => {
+    const { notifications } = useNotificationQueue();
+    expect(notifications.value).toHaveLength(0);
+  });
+
+  it('add 添加通知并返回 id', () => {
+    const { notifications, add } = useNotificationQueue();
+
+    const id = add({ title: '测试通知' });
+    expect(typeof id).toBe('number');
+    expect(notifications.value).toHaveLength(1);
+    expect(notifications.value[0].title).toBe('测试通知');
+  });
+
+  it('add 使用默认值', () => {
+    const { notifications, add } = useNotificationQueue();
+
+    add({ title: 'test' });
+    const item = notifications.value[0];
+
+    expect(item.message).toBe('');
+    expect(item.type).toBe('info');
+    expect(item.duration).toBe(4500);
+    expect(item.position).toBe('top-right');
+    expect(item.closable).toBe(true);
+  });
+
+  it('add 自定义所有字段', () => {
+    const { notifications, add } = useNotificationQueue();
+
+    add({
+      title: '错误',
+      message: '操作失败',
+      type: 'error',
+      duration: 3000,
+      position: 'bottom-left',
+      closable: false,
+    });
+
+    const item = notifications.value[0];
+    expect(item.type).toBe('error');
+    expect(item.message).toBe('操作失败');
+    expect(item.duration).toBe(3000);
+    expect(item.position).toBe('bottom-left');
+    expect(item.closable).toBe(false);
+  });
+
+  it('remove 按 id 移除通知', () => {
+    const { notifications, add, remove } = useNotificationQueue();
+
+    const id1 = add({ title: '通知1' });
+    const id2 = add({ title: '通知2' });
+
+    remove(id1);
+    expect(notifications.value).toHaveLength(1);
+    expect(notifications.value[0].id).toBe(id2);
+  });
+
+  it('remove 不存在的 id 不报错', () => {
+    const { notifications, add, remove } = useNotificationQueue();
+
+    add({ title: '通知' });
+    remove(999);
+    expect(notifications.value).toHaveLength(1);
+  });
+
+  it('duration > 0 时自动移除', () => {
+    const { notifications, add } = useNotificationQueue();
+
+    add({ title: '自动关闭', duration: 1000 });
+    expect(notifications.value).toHaveLength(1);
+
+    vi.advanceTimersByTime(1000);
+    expect(notifications.value).toHaveLength(0);
+  });
+
+  it('duration = 0 时不自动移除', () => {
+    const { notifications, add } = useNotificationQueue();
+
+    add({ title: '手动关闭', duration: 0 });
+
+    vi.advanceTimersByTime(10000);
+    expect(notifications.value).toHaveLength(1);
+  });
+
+  it('多条通知独立管理', () => {
+    const { notifications, add } = useNotificationQueue();
+
+    add({ title: '快速消失', duration: 1000 });
+    add({ title: '慢速消失', duration: 5000 });
+    add({ title: '不消失', duration: 0 });
+
+    expect(notifications.value).toHaveLength(3);
+
+    vi.advanceTimersByTime(1000);
+    expect(notifications.value).toHaveLength(2);
+
+    vi.advanceTimersByTime(4000);
+    expect(notifications.value).toHaveLength(1);
+    expect(notifications.value[0].title).toBe('不消失');
+  });
+
+  it('id 自增不重复', () => {
+    const { add } = useNotificationQueue();
+
+    const id1 = add({ title: '1' });
+    const id2 = add({ title: '2' });
+    const id3 = add({ title: '3' });
+
+    expect(id1).not.toBe(id2);
+    expect(id2).not.toBe(id3);
+    expect(id3 - id1).toBe(2);
+  });
+});

package/components/message/notification/api.ts

@@ -0,0 +1,23 @@
+/**
+ * @description notification runtime props 定义
+ * @author 阿怪
+ * @date 2026/2/26
+ * @version v1.0.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+import { MCOPO, MPropType } from '../../types/props';
+import { NotificationProps, NotificationType, NotificationPosition } from './props';
+
+/**
+ * 单条通知运行时 props
+ */
+export const notificationProps: MCOPO<NotificationProps> = {
+  title: { type: String, required: true },
+  message: { type: String, default: '' },
+  type: { type: String as MPropType<NotificationType>, default: 'info' },
+  duration: { type: Number, default: 4500 },
+  position: { type: String as MPropType<NotificationPosition>, default: 'top-right' },
+  closable: { type: Boolean, default: true },
+  offset: { type: Number, default: 16 },
+};

package/components/message/notification/index.ts

@@ -0,0 +1,19 @@
+/**
+ * @description notification core 导出
+ * @author 阿怪
+ * @date 2026/2/26
+ * @version v1.0.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+import { notificationProps } from './api';
+import { useNotificationQueue } from './useNotification';
+
+export const NotificationCore = {
+  notificationProps,
+  useNotificationQueue,
+};
+
+export { useNotificationQueue } from './useNotification';
+export type { NotificationProps, NotificationEvents, NotificationType, NotificationPosition } from './props';
+export type { NotificationItem, NotificationAddOptions } from './useNotification';

package/components/message/notification/props.d.ts

@@ -0,0 +1,64 @@
+/**
+ * @description notification 组件 props 类型定义
+ * @author 阿怪
+ * @date 2026/2/26
+ * @version v1.0.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+
+/**
+ * 通知类型
+ */
+export type NotificationType = 'success' | 'warning' | 'error' | 'info';
+
+/**
+ * 通知显示位置
+ */
+export type NotificationPosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
+
+/**
+ * 单条通知 props
+ */
+export declare type NotificationProps = {
+  /**
+   * @description 通知标题
+   */
+  title: string;
+  /**
+   * @description 通知正文内容
+   */
+  message?: string;
+  /**
+   * @description 通知类型
+   * @default 'info'
+   */
+  type?: NotificationType;
+  /**
+   * @description 显示时长（毫秒），0 表示不自动关闭
+   * @default 4500
+   */
+  duration?: number;
+  /**
+   * @description 通知显示位置
+   * @default 'top-right'
+   */
+  position?: NotificationPosition;
+  /**
+   * @description 是否显示关闭按钮
+   * @default true
+   */
+  closable?: boolean;
+  /**
+   * @description 与屏幕边缘的偏移量（像素）
+   * @default 16
+   */
+  offset?: number;
+};
+
+/**
+ * 通知事件类型
+ */
+export declare type NotificationEvents = {
+  onClose?: () => void;
+};

package/components/message/notification/useNotification.ts

@@ -0,0 +1,79 @@
+/**
+ * @description notification 队列 composable
+ * @author 阿怪
+ * @date 2026/2/26
+ * @version v1.0.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+import { ref } from 'vue';
+import { NotificationType, NotificationPosition } from './props';
+
+/**
+ * 通知队列中每一条通知的内部结构
+ */
+export interface NotificationItem {
+  id: number;
+  title: string;
+  message: string;
+  type: NotificationType;
+  duration: number;
+  position: NotificationPosition;
+  closable: boolean;
+}
+
+/**
+ * 创建通知时的配置参数
+ */
+export interface NotificationAddOptions {
+  title: string;
+  message?: string;
+  type?: NotificationType;
+  duration?: number;
+  position?: NotificationPosition;
+  closable?: boolean;
+}
+
+/**
+ * 通知队列 composable
+ * 管理通知的增删与自动关闭定时器
+ */
+export function useNotificationQueue() {
+  const notifications = ref<NotificationItem[]>([]);
+  let nextId = 0;
+
+  /**
+   * 添加一条通知，duration > 0 时自动移除
+   */
+  const add = (options: NotificationAddOptions): number => {
+    const id = nextId++;
+    const item: NotificationItem = {
+      id,
+      title: options.title,
+      message: options.message ?? '',
+      type: options.type ?? 'info',
+      duration: options.duration ?? 4500,
+      position: options.position ?? 'top-right',
+      closable: options.closable ?? true,
+    };
+    notifications.value.push(item);
+
+    if (item.duration > 0) {
+      setTimeout(() => remove(id), item.duration);
+    }
+
+    return id;
+  };
+
+  /**
+   * 按 id 移除一条通知
+   */
+  const remove = (id: number): void => {
+    const idx = notifications.value.findIndex(n => n.id === id);
+    if (idx !== -1) {
+      notifications.value.splice(idx, 1);
+    }
+  };
+
+  return { notifications, add, remove };
+}

package/components/message/popover/MPopover.tsx

@@ -0,0 +1,94 @@
+/**
+ * @description MPopover
+ * @author youus
+ * @date 2022/4/3 18:07
+ * @version v2.0.0-process
+ *
+ * Hello, humor
+ * v2.0.0-process 阿怪 准备重构，搭建模版
+ */
+import { defineComponent, ref, watch } from 'vue';
+import { props } from './api';
+import useTeleport from '../../../compositions/common/useTeleport';
+import { usePopover } from './usePopover';
+import './popover.css';
+import { PopoverProps } from './props';
+
+
+export default defineComponent((_props: PopoverProps, { slots, emit, expose }) => {
+  const props = _props as Required<PopoverProps>;
+
+  if (!slots.content) {
+    console.error('MPopover: content is required');
+    return () => (<></>);
+  }
+
+  if (!slots.default) {
+    console.error('MPopover: trigger is required');
+    return () => (<></>);
+  }
+
+
+  const placementRef = ref(props.placement);
+  const {
+    getContent,
+    popoverEnter,
+    popoverLeave,
+    popoverRef, contentRef, arrowRef,
+    popperInstance,
+    style, arrowStyle,
+  } = usePopover(
+    { props, value: { placement: placementRef } },
+    {
+      onShow: () => {
+        emit('update:show', true);
+      },
+      onHide: () => {
+        emit('update:show', false);
+      },
+    },
+  );
+
+  const show = async () => {
+    await popperInstance.value?.show();
+  };
+  const hide = () => {
+    popperInstance.value?.hide();
+  };
+
+  expose({ show, hide });
+
+  watch(() => props.show, () => {
+    if (props.show) {show();} else {hide();}
+  });
+
+  const handleClick = async () => {
+    if (props.hover) {return;}
+    await popperInstance.value?.toggle();
+  };
+
+
+  return () => {
+    return <div class="m-popover" data-popper-placement={placementRef.value}
+                onMouseleave={popoverLeave}>
+      <div class="m-popover-default-wrapper"
+           ref={popoverRef}
+           onMouseenter={popoverEnter}
+           onClick={handleClick}>
+        {slots.default?.()}
+      </div>
+      <div class="m-popover-content" ref={contentRef} style={style.value}>
+        {getContent(props, () => slots.content?.(), useTeleport)}
+        {
+          // todo when content not render arrow should not render
+          slots.arrow ?
+            <div class="m-popover-arrow" ref={arrowRef} style={arrowStyle.value}>{slots.arrow()}</div> : null
+        }
+      </div>
+    </div>;
+  };
+}, {
+  name: 'MPopover',
+  props,
+  emits: ['open:popper', 'close:popper', 'update:show'],
+});