@qi-tian-da-sheng/bin-project-ui 1.0.0

package/packages/components/menu/src/type.ts

@@ -0,0 +1,346 @@
+/*
+ * @description: 导航菜单类型定义
+ * @author: MC.Yang
+ */
+import {Ref} from "vue";
+import VMenu from "./v-menv";
+import {PNode, TargetType} from "@bin-ui/typings";
+import {PFloatingProps} from "../../floating/src/type";
+
+/**
+ * 展开类型
+ */
+export type OpenType = 'add' | 'remove';
+
+/**
+ * 菜单值类型
+ */
+export type MenuValue = string | number;
+
+/**
+ * 菜单查询数据
+ */
+export type MenuQueryData = { [key: string]: string | string[] };
+
+/**
+ * 菜单 Props
+ */
+export interface PMenuProps {
+    /**
+     * @description 是否收起菜单
+     * @default false
+     */
+    collapsed?: boolean;
+    /**
+     * @description 子菜单展开的导航集合
+     */
+    expanded?: Array<MenuValue>;
+    /**
+     * @description 子菜单展开的导航集合，非受控属性
+     */
+    defaultExpanded?: Array<MenuValue>;
+    /**
+     * @description 同级别互斥展开
+     * @default false
+     */
+    expandMutex?: boolean;
+    /**
+     * @description 二级菜单展开方式，平铺展开和浮层展开
+     * @default normal
+     */
+    expandType?: 'normal' | 'popup';
+    /**
+     * @description 站点 LOGO
+     */
+    logo?: PNode;
+    /**
+     * @description 导航操作区域
+     */
+    operations?: PNode;
+    /**
+     * @description 菜单风格
+     * @default light
+     */
+    theme?: 'light' | 'dark';
+    /**
+     * @description 激活菜单项
+     */
+    value?: MenuValue;
+    /**
+     * @description 激活菜单项，非受控属性
+     */
+    defaultValue?: MenuValue;
+    /**
+     * @description 激活菜单项
+     */
+    modelValue?: MenuValue;
+    /**
+     * @description 菜单宽度。值类型为数组时，分别表示菜单展开和折叠的宽度。[ 展开时的宽度, 折叠时的宽度 ]，示例：['200px', '80px']
+     * @default '232px'
+     */
+    width?: string | number | Array<string | number>;
+    /**
+     * @description 激活菜单项发生变化时触发
+     */
+    onChange?: (value: MenuValue) => void;
+    /**
+     * @description 展开的菜单项发生变化时触发
+     */
+    onExpand?: (value: Array<MenuValue>) => void;
+}
+
+/**
+ * 头部菜单 Props
+ */
+export interface PHeadMenuProps {
+    /**
+     * @description 展开的子菜单集合
+     */
+    expanded?: Array<MenuValue>;
+    /**
+     * @description 展开的子菜单集合，非受控属性
+     */
+    defaultExpanded?: Array<MenuValue>;
+    /**
+     * @description 二级菜单展开方式，平铺展开和浮层展开
+     * @default normal
+     */
+    expandType?: 'normal' | 'popup';
+    /**
+     * @description 站点 LOGO
+     */
+    logo?: PNode;
+    /**
+     * @description 导航操作区域
+     */
+    operations?: PNode;
+    /**
+     * @description 主题
+     * @default light
+     */
+    theme?: 'light' | 'dark';
+    /**
+     * @description 激活菜单项
+     */
+    value?: MenuValue;
+    /**
+     * @description 激活菜单项
+     */
+    modelValue?: MenuValue;
+    /**
+     * @description 激活菜单项发生变化时触发
+     */
+    onChange?: (value: MenuValue) => void;
+    /**
+     * @description 展开的菜单项发生变化时触发
+     */
+    onExpand?: (value: Array<MenuValue>) => void;
+}
+
+/**
+ * 子菜单 Props
+ */
+export interface PSubmenuProps {
+    /**
+     * @description 菜单项内容
+     */
+    content?: string | PNode;
+    /**
+     * @description 菜单项内容，同 content
+     */
+    default?: string | PNode;
+    /**
+     * @description 是否禁用菜单项展开/收起/跳转等功能
+     */
+    disabled?: boolean;
+    /**
+     * @description 菜单项图标
+     */
+    icon?: PNode;
+    /**
+     * @description 透传 PFloatingProps 组件全部特性
+     */
+    popupProps?: PFloatingProps;
+    /**
+     * @description 二级菜单内容
+     */
+    title?: string | PNode;
+    /**
+     * @description 菜单项唯一标识
+     */
+    value?: MenuValue;
+}
+
+/**
+ * 菜单项 Props
+ */
+export interface PMenuItemProps {
+    /**
+     * @description 菜单项内容
+     */
+    content?: string | PNode;
+    /**
+     * @description 菜单项内容，同 content
+     */
+    default?: string | PNode;
+    /**
+     * @description 是否禁用菜单项展开/收起/跳转等功能
+     */
+    disabled?: boolean;
+    /**
+     * @description 跳转链接，菜单项渲染为a标签，当routerLink为true时将使用Router进行路由跳转
+     * @default ''
+     */
+    href?: string;
+    /**
+     * @description 图标
+     */
+    icon?: PNode;
+    /**
+     * @description 路由跳转是否采用覆盖的方式（覆盖后将没有浏览器历史记录）
+     * @default false
+     */
+    replace?: boolean;
+    /**
+     * @description 路由对象。如果项目存在 Router，则默认使用 Router。
+     */
+    router?: Record<string, any>;
+    /**
+     * @description 菜单项内容是否渲染为使用Router进行跳转的a标签，当且仅当 Router 存在时，该 API 有效
+     */
+    routerLink?: boolean;
+    /**
+     * @description 链接或路由跳转方式
+     */
+    target?: TargetType;
+    /**
+     * @description 路由跳转目标，当且仅当 Router 存在时，该 API 有效
+     */
+    to?: MenuRoute;
+    /**
+     * @description 菜单项唯一标识
+     */
+    value?: MenuValue;
+    /**
+     * @description 点击时触发
+     */
+    onClick?: (context: { e: MouseEvent; value: MenuValue }) => void;
+}
+
+/**
+ * 菜单项
+ */
+export interface PMenuItem {
+    /**
+     * @description 菜单值
+     */
+    value: MenuValue;
+    /**
+     * @description 菜单标签
+     */
+    label: PNode;
+}
+
+/**
+ * 导航菜单接口
+ */
+export interface PMenuInterface {
+    /**
+     * @description 激活菜单值
+     */
+    activeValue: Ref<MenuValue | undefined>;
+    /**
+     * @description 激活菜单值列表
+     */
+    activeValues: Ref<MenuValue[]>;
+    /**
+     * @description 展开菜单值列表
+     */
+    expandValues?: Ref<MenuValue[] | undefined>;
+    /**
+     * @description 模式
+     */
+    mode: Ref<string | undefined>;
+    /**
+     * @description 主题
+     */
+    theme?: Ref<string | undefined>;
+    /**
+     * @description 是头部菜单
+     */
+    isHead: boolean;
+    /**
+     * @description 菜单
+     */
+    vMenu?: VMenu;
+    /**
+     * @description 是否收起菜单
+     */
+    collapsed?: Ref<boolean>;
+    /**
+     * @description 选择菜单触发事件
+     * @param val 菜单值
+     */
+    select: (val: MenuValue) => void;
+    /**
+     * @description 展开菜单触发事件
+     * @param val 菜单值
+     * @param type 展开类型
+     */
+    open?: (val: MenuValue, type?: OpenType) => boolean | void;
+}
+
+/**
+ * 导航子菜单接口
+ */
+export interface PSubMenuInterface {
+    /**
+     * @description 菜单值
+     */
+    value?: MenuValue;
+    /**
+     * @description 是否有图标
+     */
+    hasIcon?: boolean;
+    /**
+     * @description 添加菜单项触发事件
+     * @param item
+     */
+    addMenuItem?: (item: PMenuItem) => void;
+    /**
+     * @description 设置子菜单窗口触发事件
+     * @param popupRef HTMLElement
+     */
+    setSubPopup?: (popupRef: HTMLElement) => void;
+    /**
+     * @description 关闭父窗口触发事件
+     * @param e 鼠标事件
+     */
+    closeParentPopup?: (e: MouseEvent) => void;
+}
+
+/**
+ * 菜单路径
+ */
+export interface MenuRoute {
+    /**
+     * @description 菜单路由路径
+     */
+    path?: string;
+    /**
+     * @description 菜单名称
+     */
+    name?: string;
+    /**
+     * @description 菜单哈希值
+     */
+    hash?: string;
+    /**
+     * @description 查询菜单
+     */
+    query?: MenuQueryData;
+    /**
+     * @description 查询菜单参数
+     */
+    params?: MenuQueryData;
+}

package/packages/components/menu/src/v-menu.ts

@@ -0,0 +1,142 @@
+/*
+ * @description: 导航菜单节点
+ * @author: MC.Yang
+ */
+import {ref, Slot} from 'vue';
+import type {MenuValue, PMenuItemProps} from './type';
+import {isEmpty} from "@bin-ui/tools";
+
+type MenuNode = MenuValue | VMenuData;
+
+export interface VMenuData {
+    value?: MenuValue;
+    parent?: MenuNode;
+    children: VMenuData[];
+    vNode?: Slot;
+}
+
+interface VMenuItem extends PMenuItemProps {
+    value?: MenuValue;
+    parent?: MenuValue;
+    vNode?: Slot;
+}
+
+class VMenu {
+    data: VMenuData = {
+        value: undefined,
+        parent: undefined,
+        children: [],
+    };
+
+    cache: Map<MenuValue, VMenuData> = new Map();
+
+    isMutex = ref(false);
+
+    expandValues: Set<MenuValue> = new Set();
+
+    constructor(options: { isMutex?: boolean; expandValues?: MenuValue[] } = {}) {
+        this.isMutex.value = options.isMutex ?? false;
+        this.expandValues = new Set(options.expandValues ?? []);
+    }
+
+    private findParentNode(value: MenuValue | undefined): VMenuData | undefined {
+        let node: VMenuData | undefined = this.data;
+        while (node) {
+            const child = node.children.find(child => child.value === value);
+            if (child) {
+                return node.value ? node : child;
+            }
+            if (node.value) {
+                node = this.cache.get(node.value) as VMenuData;
+            } else {
+                node = undefined;
+            }
+        }
+        return undefined;
+    }
+
+    add(item: VMenuItem): void {
+        const {value, parent, vNode} = item;
+        let parentNode = this.findParentNode(parent);
+        if (!parentNode) {
+            parentNode = this.data;
+        }
+        const newNode: VMenuData = {
+            value,
+            parent: parentNode.value,
+            children: [],
+            vNode,
+            ...item
+        };
+
+        if (!parentNode.children.some(child => child.value === value)) {
+            if (vNode instanceof Function) {
+                vNode().forEach((node) => {
+                    const subNode: VMenuData = {
+                        value: node.props?.value,
+                        parent: newNode.value,
+                        vNode: (node.children as any).default,
+                        children: [],
+                    };
+                    newNode.children.push(subNode);
+                })
+            }
+            parentNode.children.push(newNode);
+        }
+
+        if (value) {
+            this.cache.set(value, newNode);
+        }
+    }
+
+    select(val: MenuValue): MenuValue[] {
+        const result: MenuValue[] = [];
+        if (isEmpty(val)) {
+            return result;
+        }
+        const stack: VMenuData[] = [this.data];
+
+        while (stack.length) {
+            const node = stack.pop()!;
+            if (node.value === val) {
+                result.push(node.value);
+            }
+
+            stack.push(...node.children);
+        }
+        result.push(val)
+        return [...new Set(result.filter(Boolean))];
+    }
+
+    expand(val: MenuValue): MenuValue[] {
+        if (this.expandValues.has(val)) {
+            this.expandValues.delete(val);
+        } else {
+            this.expandValues.add(val);
+            if (this.isMutex.value) {
+                const parentNode = this.findParentNode(val);
+                if (parentNode) {
+                    const siblings = parentNode.children.filter(child => child.value !== val && child.children.length > 0);
+                    siblings.forEach(sibling => {
+                        if (sibling.value) {
+                            this.expandValues.delete(sibling.value);
+                        }
+                    });
+                }
+            }
+        }
+
+        return [...this.expandValues];
+    }
+
+    getChild(value: MenuValue): VMenuData[] {
+        const target = this.findParentNode(value);
+        if (target && target.children.length > 0) {
+            return target.children;
+        } else {
+            return target ? [target] : [];
+        }
+    }
+}
+
+export default VMenu;

package/packages/components/message/index.ts

@@ -0,0 +1,27 @@
+/*
+ * @description: 消息盒子
+ * @author: MC.Yang
+ */
+import _MessageBox from "./src/message-box.vue";
+import message from "./src/message";
+import notify from "./src/notify";
+import confirm from "./src/confirm";
+import {withInstall} from "@bin-ui/tools";
+
+const MessageBox = withInstall(_MessageBox);
+
+export type PMessageBoxInstance = InstanceType<typeof _MessageBox>;
+
+export default {
+    MessageBox,
+    message,
+    notify,
+    confirm
+}
+
+export {
+    MessageBox,
+    message,
+    notify,
+    confirm
+}

package/packages/components/message/src/confirm.ts

@@ -0,0 +1,136 @@
+/*
+ * @description: 消息确认
+ * @author: MC.Yang
+ */
+import {App, createApp} from "vue";
+import {IndexManager, Mark} from "@bin-ui/tools";
+import {ElementTypes, MessageTriggerTypes} from "@bin-ui/typings";
+import {MessageBox, PMessageBoxInstance} from "../index.ts";
+
+/**
+ * 消息确认选项
+ */
+interface options {
+
+    /**
+     * @description 消息的类型
+     */
+    type: ElementTypes,
+
+    /**
+     * @description 自定义消息的图标
+     */
+    icon: string,
+
+    /**
+     * @description 自定义图标的颜色
+     */
+    color: string,
+
+    /**
+     * @description 消息的主体
+     */
+    text: string,
+
+    /**
+     * @description 标题
+     */
+    title: string
+
+    /**
+     * @description 显示标记
+     */
+    showMark: Boolean,
+
+    /**
+     * @description 顶部
+     */
+    top: string,
+
+    /**
+     * @description 取消按钮文本
+     */
+    cancelBtnText: string,
+
+    /**
+     * @description 确认按钮文本
+     */
+    confirmBtnText: string,
+
+    /**
+     * @description 可拖动
+     */
+    draggable: Boolean,
+}
+
+/**
+ * 确认
+ * @param options 选项
+ */
+export default function (options: Partial<options>) {
+    return new Promise<string>((resolve, reject) => {
+        const {showMark: _showMark = true} = options;
+        const app: App<Element> = createApp(MessageBox, {
+            type: options.type,
+            icon: options.icon,
+            iconColor: options.color,
+            title: options.title,
+            text: options.text,
+            draggable: options.draggable,
+            showCloseIcon: true,
+            transition: 'p-transition-fadeDown',
+            confirmBtnText: options.confirmBtnText,
+            cancelBtnText: options.cancelBtnText,
+            top: options.top,
+            onClose(trigger: MessageTriggerTypes) {
+                reject(trigger)
+                if (_showMark) mark.close();
+            },
+            onCancel() {
+                reject('cancel')
+                if (_showMark) mark.close();
+            },
+            onConfirm() {
+                if (_showMark) mark.close();
+                resolve("confirm");
+            },
+            onOpen() {
+                if (_showMark) mark.open();
+            },
+            onClosed() {
+                mark.element.removeEventListener('click', handleClickMark);
+                appendTo.removeChild(mountTo);
+                app.unmount();
+            }
+        });
+
+        app.component('PIcon');
+
+        const mountTo: HTMLElement = document.createElement('div');
+        const appendTo: HTMLElement = document.body;
+        const mark = new Mark('cover');
+
+        const vm = app.mount(mountTo) as PMessageBoxInstance;
+        const handleClickMark = function () {
+            vm.close('mark');
+        }
+
+        mark.element.addEventListener("click", handleClickMark);
+        initMountTo(mountTo);
+        mountTo.appendChild(mark.element);
+        appendTo.appendChild(mountTo);
+
+        vm.open();
+    })
+}
+
+/**
+ * 初始化消息的容器元素
+ * @param el HTMLElement
+ */
+const initMountTo = function (el: HTMLElement) {
+    el.classList.add('p-confirm-container')
+    el.style.zIndex = new IndexManager().nextIndex().toString();
+}
+
+