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

package/packages/tools/element/render-node.ts

@@ -0,0 +1,225 @@
+/*
+ * @description: 渲染 PNode
+ * @author: MC.Yang
+ */
+import {ComponentInternalInstance, Fragment, getCurrentInstance, h, isVNode, VNode} from 'vue';
+import {camelCase, ensureArray, isArray, isEmpty, isFunction, isObject, isString, kebabCase} from "../extra/types";
+
+/**
+ * 类型守卫函数，用于检查一个值是否是 RenderContext
+ * @param obj 选项参数
+ * @param stats 属性
+ */
+function isRenderContext(obj: any, stats: string = 'defaultNode'): obj is RenderContext {
+    return isObject(obj) && stats in obj;
+}
+
+/**
+ * 是否为空节点，需要过滤掉注释节点。注释节点也会被认为是空节点
+ * @param node 节点
+ */
+function isEmptyNode(node: any) {
+    if ([undefined, null, ''].includes(node)) return true;
+    const innerNodes = node instanceof Array ? node : [node];
+    const r = innerNodes.filter((node) => node?.type?.toString() !== 'Symbol(Comment)');
+    return !r.length;
+}
+
+/**
+ * 渲染上下文
+ */
+export interface RenderContext {
+    defaultNode?: VNode | string;
+    params?: Record<string, any>;
+    slotFirst?: boolean;
+    // 是否不打印 LOG
+    silent?: boolean;
+}
+
+/**
+ * 选项类型
+ */
+export type OptionsType = VNode | RenderContext | string;
+
+/**
+ * 得到默认的 Node
+ * @param options 选项
+ */
+export function getDefaultNode(options?: OptionsType) {
+    let defaultNode;
+    if (isRenderContext(options)) {
+        defaultNode = options.defaultNode;
+    } else if (isVNode(options) || isString(options)) {
+        defaultNode = options;
+    }
+
+    return defaultNode;
+}
+
+/**
+ * 得到子节点 Node
+ * @param content 内容
+ */
+export function getChildren(content: VNode[]) {
+    const childList: VNode[] = [];
+    const innerGetChildren = (content: VNode[]) => {
+        if (!isArray(content)) return;
+        content.forEach((item: VNode) => {
+            if (item.children && isArray(item.children)) {
+                if (item.type !== Fragment) return;
+                innerGetChildren(item.children as VNode[]);
+            } else {
+                childList.push(item);
+            }
+        });
+        return childList;
+    };
+
+    return innerGetChildren(content);
+}
+
+/**
+ * 得到参数
+ * @param options 选项
+ */
+export function getParams(options?: OptionsType) {
+    return isObject(options) && isRenderContext(options, 'params') ? options.params : {};
+}
+
+/**
+ * 得到第一个插槽
+ * @param options 选项
+ */
+export function getSlotFirst(options?: OptionsType) {
+    return isObject(options) && isRenderContext(options, 'slotFirst') ? options.slotFirst : {};
+}
+
+/**
+ * 同时支持驼峰命名和中划线命名的插槽，示例：value-display 和 valueDisplay
+ * @param instance 组件实例
+ * @param name 插槽和属性名称
+ * @param params 参数
+ */
+export function handleSlots(instance: ComponentInternalInstance, name: string, params: Record<string, any> | undefined) {
+    // 检查是否存在 驼峰命名 的插槽（过滤注释节点）
+    let node = instance.slots[camelCase(name)]?.(params);
+    if (node && node.filter((t) => t.type !== Symbol.for('v-cmt')).length) return node;
+    // 检查是否存在 中划线命名 的插槽（过滤注释节点）
+    node = instance.slots[kebabCase(name)]?.(params);
+    if (node && node.filter((t) => t.type !== Symbol.for('v-cmt')).length) return node;
+    return null;
+}
+
+/**
+ * 通过渲染 PNode，props 和 插槽同时处理，也能处理默认值为 true 则渲染默认节点的情况
+ * 优先级：Props 大于插槽
+ * 如果 props 值为 true ，则使用插槽渲染。如果也没有插槽的情况下，则使用 defaultNode 渲染
+ * @param instance 组件实例
+ * @param name 插槽和属性名称
+ * @param options 值可能为默认渲染节点，也可能是默认渲染节点和参数的集合
+ * @example renderPNode(instance, 'closeBtn')  优先级 props function 大于 插槽
+ * @example renderPNode(instance, 'closeBtn', <close-icon />)。 当属性值为 true 时则渲染 <close-icon />
+ * @example renderPNode(instance, 'closeBtn', { defaultNode: <close-icon />, params })。 params 为渲染节点时所需的参数
+ */
+export const renderPNode = (instance: ComponentInternalInstance, name: string, options?: OptionsType) => {
+    const params = getParams(options);
+    const defaultNode = getDefaultNode(options);
+    const slotFirst = getSlotFirst(options);
+
+    // 处理 props 类型的 Node
+    let propsNode;
+    if (Object.keys(instance.props).includes(name)) {
+        propsNode = instance.props[name];
+    }
+
+    // propsNode 为 false 不渲染
+    if (propsNode === false || propsNode === null) return;
+    if (propsNode === true) {
+        return handleSlots(instance, name, params) || defaultNode;
+    }
+
+    // 同名 props 和 slot 优先处理 props
+    if (isFunction(propsNode)) return propsNode(h, params);
+    const isPropsEmpty = [undefined, params, ''].includes(propsNode);
+    // Props 为空，但插槽存在
+    if ((isPropsEmpty || slotFirst) && (instance.slots[camelCase(name)] || instance.slots[kebabCase(name)])) {
+        return handleSlots(instance, name, params);
+    }
+    return ensureArray(propsNode);
+};
+
+/**
+ * 通过渲染 PNode，props 和 插槽同时处理，也能处理默认值为 true 则渲染默认节点的情况
+ * 优先级：Props 大于插槽
+ * 如果 props 值为 true ，则使用插槽渲染。如果也没有插槽的情况下，则使用 defaultNode 渲染
+ * @example renderPNode('closeBtn')  优先级 props function 大于 插槽
+ * @example renderPNode('closeBtn', <close-icon />)。 当属性值为 true 时则渲染 <close-icon />
+ * @example renderPNode('closeBtn', { defaultNode: <close-icon />, params })。 params 为渲染节点时所需的参数
+ */
+export const usePNode = () => {
+    return function (name: string, options?: OptionsType) {
+        const instance = getCurrentInstance();
+        if (instance == null) return undefined;
+        return renderPNode(instance, name, options);
+    };
+};
+
+/**
+ * 通过渲染 PNode，props 和 插槽同时处理。与 renderPNode 区别在于 属性值为 undefined 时会渲染默认节点
+ * @param instance 组件实例
+ * @param name 插槽和属性名称
+ * @param options 选项
+ * @example renderPNode(instance, 'closeBtn')
+ * @example renderPNode(instance, 'closeBtn', <close-icon />)。this.closeBtn 为空时，则兜底渲染 <close-icon />
+ * @example renderPNode(instance, 'closeBtn', { defaultNode: <close-icon />, params }) 。params 为渲染节点时所需的参数
+ */
+export const renderPNodeDefault = (instance: ComponentInternalInstance, name: string = 'default', options?: OptionsType) => {
+    return renderPNode(instance, name, options) || getDefaultNode(options);
+};
+
+/**
+ * 通过渲染 PNode，props 和 插槽同时处理。与 renderPNode 区别在于 属性值为 undefined 时会渲染默认节点
+ * @example renderPNode('closeBtn')
+ * @example renderPNode('closeBtn', <close-icon />)。this.closeBtn 为空时，则兜底渲染 <close-icon />
+ * @example renderPNode('closeBtn', { defaultNode: <close-icon />, params }) 。params 为渲染节点时所需的参数
+ */
+export const usePNodeDefault = () => {
+    return function (name: string = 'default', options?: OptionsType) {
+        const instance = getCurrentInstance();
+        if (instance == null) return undefined;
+        return renderPNodeDefault(instance, name, options);
+    };
+};
+
+/**
+ * 用于处理相同名称的 PNode 渲染
+ * @param instance 组件实例
+ * @param name1 第一个名称，优先级高于 name2
+ * @param name2 第二个名称
+ * @param options defaultNode 默认渲染内容：当 name1 和 name2 都为空时会启动默认内容渲染
+ * @example renderContent(instance, 'default', 'content')
+ * @example renderContent(instance, 'default', 'content', '我是默认内容')
+ * @example renderContent(instance, 'default', 'content', { defaultNode: '我是默认内容', params })
+ */
+export const renderContent = (instance: ComponentInternalInstance, name1: string, name2: string, options?: OptionsType) => {
+
+    const node1 = renderPNode(instance, name1, options);
+    const node2 = renderPNode(instance, name2, options);
+
+    const res = isEmptyNode(node1) ? node2 : node1;
+    return ensureArray(isEmpty(res) ? getDefaultNode(options) : res);
+};
+
+/**
+ * 用于处理相同名称的 PNode 渲染
+ * @example renderContent('default', 'content')
+ * @example renderContent('default', 'content', '我是默认内容')
+ * @example renderContent('default', 'content', { defaultNode: '我是默认内容', params })
+ */
+export const useContent = () => {
+    return function (name1: string, name2: string, options?: OptionsType) {
+        const instance = getCurrentInstance();
+        if (instance == null) return undefined;
+        return renderContent(instance, name1, name2, options);
+    };
+};

package/packages/tools/extra/css.ts

@@ -0,0 +1,40 @@
+/*
+ * @description: CSS 样式工具
+ * @author: MC.Yang
+ */
+import {isEmpty, isNumber, isString} from "./types";
+import {ElementTypes} from "@bin-ui/typings";
+
+type Des = 'fade' |'light' |'lighter' |'dark';
+type Clr = ElementTypes | 'primary' | 'cyan' | 'gray' | Des | undefined
+
+/**
+ * @description 拼接 css 颜色变量字符串
+ * @param args 参数
+ */
+export const getClrVar = function (...args: Array<Clr>): string {
+
+    // 各参数中有一个为空则返回空字符串
+    for (let item of args) {
+        if (!isString(item)) {
+            return '';
+        }
+    }
+
+    const strList = Array.from(args.map(item => item));
+    const str = strList.join('-');
+    return `var(--pixel-color-${str})`;
+}
+
+
+export const px = (num: number | undefined | string, dft?: number): string => {
+    if (isEmpty(num) && !isEmpty(dft)) {
+        return `${dft}px`
+
+    }
+    if (isNumber(Number(num))) {
+        return `${num}px`
+    }
+    return '0'
+}
+

package/packages/tools/extra/delay.ts

@@ -0,0 +1,16 @@
+/*
+ * @description: 延迟工具
+ * @author: MC.Yang
+ */
+
+/**
+ * @description 延时一段时间
+ * @param timeout 延时时间
+ */
+export const delay =  function (timeout:number = 0) {
+    return new Promise(resolve => {
+        setTimeout(() => {
+            resolve("ok");
+        },timeout);
+    })
+}

package/packages/tools/extra/fn-union.ts

@@ -0,0 +1,17 @@
+/*
+ * @description: 函数工具
+ * @author: MC.Yang
+ */
+
+/**
+ * @description 将函数聚合，不负责返回值
+ * @param args 函数体
+ */
+export const fnUnion = function (...args:Array<Function>) {
+    return function (){
+        for (let i = 0; i < args.length; i++) {
+            args[i]();
+        }
+    }
+}
+

package/packages/tools/extra/types.ts

@@ -0,0 +1,88 @@
+/*
+ * @description: 公共的工具
+ * @author: MC.Yang
+ */
+export const isString = (val: unknown): val is string => typeof val === 'string';
+export const isNumber = (val: unknown): val is number => typeof val === 'number';
+export const isBoolean = (val: unknown): val is boolean => typeof val === 'boolean';
+export const isUndefined = (val: unknown): val is undefined => val === undefined;
+export const isSymbol = (val: unknown): val is symbol => typeof val === 'symbol';
+export const isObject = (val: unknown): val is Object => typeof val === 'object' && val !== null;
+export const isFunction = (val: unknown): val is Function => typeof val === 'function';
+export const isPromise = <T = any>(val: any): val is Promise<T> => !!val && typeof val.then === 'function';
+
+export const isDate = (val: unknown): val is Date => val instanceof Date && !isNaN(val.getTime());
+export const isMap = (val: unknown): val is Map<any, any> => val instanceof Map;
+export const isSet = (val: unknown): val is Set<any> => val instanceof Set;
+export const isArray = (val: unknown): val is Array<any> => Array.isArray(val);
+export const isRegExp = (val: unknown): val is RegExp => val instanceof RegExp;
+
+export const isEmpty = (val: unknown) => {
+    if (val === null || val === undefined) {
+        return true;
+    }
+
+    if (typeof val === 'string') {
+        return !val.trim().length;
+    }
+
+    if (Array.isArray(val)) {
+        return !val.length;
+    }
+
+    if (typeof val === 'object') {
+        for (const key in val) {
+            if (val.hasOwnProperty(key)) {
+                return false;
+            }
+        }
+        return true;
+    }
+
+    return false;
+}
+
+/**
+ * 转换成数组
+ * @param value 值
+ */
+export function ensureArray<T>(value: T | T[]): T[] | null {
+    if (isEmpty(value)) {
+        return null;
+    }
+    if (isArray(value)) {
+        return value;
+    } else {
+        return [value];
+    }
+}
+
+/**
+ * 将字符串转换为驼峰格式
+ * @param str 要转换的字符串
+ * @returns 驼色大小写字符串
+ */
+export function camelCase(str: string): string {
+    return str
+        .replace(/[^\w\s-_]/g, '') // 移除所有非字母数字、空格、连字符或下划线的字符
+        .replace(/[-\s_]+(.)?/g, function (match, chr) { // 替换空格、连字符或下划线及其后的字符
+            // console.log(match);
+            return chr ? chr.toUpperCase() : ''; // 将字符转换为大写（如果存在）
+        })
+        .replace(/^./, function (match) { // 处理第一个字符，确保它是小写（如果原始字符串以小写字母开头）
+            return match.toLowerCase();
+        });
+}
+
+/**
+ * 将字符串转换为串格式
+ * @param str 要转换的字符串
+ * @returns 串格式字符串
+ */
+export function kebabCase(str: string): string {
+    return str
+        .match(/[A-Z]?[a-z]+|[0-9]+/g)! // 匹配大写字母开头的小写字母序列或数字序列
+        .map(word => word.toLowerCase()) // 将每个单词转换为小写
+        .join('-'); // 使用连字符连接单词
+}
+

package/packages/tools/index.ts

@@ -0,0 +1,27 @@
+/*
+ * @description: 工具类
+ * @author: MC.Yang
+ */
+
+// element
+export * from "./element/alert.ts";
+export * from "./element/badge.ts";
+export * from "./element/mark.ts";
+
+// decorator
+export * from "./decorator/debounce";
+export * from "./decorator/throttle";
+export * from "./decorator/single-ton";
+
+// vn
+export * from "./vn/with-install";
+
+// manager
+export * from "./managers/index-manager";
+export * from "./managers/layout-manager";
+
+// extra
+export * from "./extra/delay";
+export * from "./extra/fn-union";
+export * from "./extra/types";
+export * from "./extra/css";

package/packages/tools/managers/index-manager.ts

@@ -0,0 +1,25 @@
+/*
+ * @description: 元素层级管理器
+ * @author: MC.Yang
+ */
+import {singleTon} from "../decorator/single-ton";
+
+/**
+ * @description 元素层级管理器, 不断递增 z-index
+ */
+class IdxManager {
+    protected index: number
+
+    constructor(index: number = 2000) {
+        this.index = index;
+    }
+
+    nextIndex() {
+        return this.index++;
+    }
+}
+
+const IndexManager = singleTon(IdxManager);
+
+export {IndexManager}
+

package/packages/tools/managers/layout-manager.ts

@@ -0,0 +1,102 @@
+export type position = 'down' | 'up';
+
+/**
+ * @description 布局管理器, 放入其中的元素将会自动布局
+ */
+class LayoutManager {
+    protected position: position
+    protected appList: Array<HTMLElement>
+
+    constructor(position: position) {
+        this.position = position;
+        this.appList = [] as Array<HTMLElement>;
+    }
+
+    /**
+     * @description 在尾部添加一个元素
+     * @param el HTMLElement
+     */
+    push(el: HTMLElement) {
+        this.appList.push(el);
+        this.update();
+    }
+
+    /**
+     * @description 删除一个元素
+     * @param el HTMLElement
+     */
+    delete(el: HTMLElement) {
+        const pos = this.appList.indexOf(el);
+        this.appList.splice(pos, 1);
+        this.update();
+    }
+
+    /**
+     * @description 下一个元素的位置
+     */
+    nextPos() {
+        let res = 0;
+        this.appList.forEach(item => {
+            res += parseInt(item.getAttribute('data-space') as string) + item.offsetHeight;
+        })
+        return res;
+    }
+
+    /**
+     * @description 获取元素
+     * @param index 索引
+     */
+    getEl(index: number): HTMLElement | undefined {
+        return this.appList[index];
+    }
+
+    /**
+     * @description 获取的索引
+     * @param el HTMLElement
+     */
+    getIndexOf(el: HTMLElement): number {
+        return this.appList.indexOf(el);
+    }
+
+    /**
+     * @description 更新元素位置
+     * @protected
+     */
+    protected update() {
+        if (this.position === 'up') {
+            this._layoutUp();
+        }
+        if (this.position === 'down') {
+            this._layoutDown();
+        }
+    }
+
+    /**
+     * @description 向上布局
+     * @protected
+     */
+    protected _layoutUp() {
+        let bottom = 0;
+        this.appList.forEach(item => {
+            bottom += parseInt(item.getAttribute('data-space') as string);
+            item.style.bottom = `${bottom}px`;
+            bottom += item.offsetHeight;
+        })
+    }
+
+    /**
+     * @description 向下布局
+     * @protected
+     */
+    protected _layoutDown() {
+        let top = 0;
+        this.appList.forEach(item => {
+            top += parseInt(item.getAttribute('data-space') as string);
+            item.style.top = `${top}px`;
+            top += item.offsetHeight;
+        })
+    }
+
+}
+
+export {LayoutManager}

package/packages/tools/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@bin-ui/tools",
+  "main": "index.ts",
+  "private": true,
+  "sideEffects": false,
+  "dependencies": {}
+}

package/packages/tools/vn/with-install.ts

@@ -0,0 +1,32 @@
+/*
+ * @description: 安装注册
+ * @author: MC.Yang
+ */
+import {App, Component, Directive, Plugin} from "vue";
+import {DefineComponent} from "vue";
+
+/**
+ * 组件注册与安装
+ * @param comp 组件
+ * @param alias 别名
+ * @param directive 指令
+ */
+function withInstall<T extends Component | DefineComponent>(
+    comp: T,
+    alias?: string,
+    directive?: { name: string; comp: Directive<T & Plugin> },
+): T & Plugin {
+    const componentPlugin = comp as T & Component & Plugin;
+    componentPlugin.install = (app: App, name?: string) => {
+        const componentName = alias || name || componentPlugin.name;
+        if (componentName) {
+            app.component(componentName, comp);
+            directive && app.directive(directive.name, directive.comp);
+        }
+    };
+    return componentPlugin as T & Plugin;
+}
+
+export default {withInstall};
+
+export {withInstall};

package/packages/typings/base.ts

@@ -0,0 +1,69 @@
+/*
+ * @description: 基础类型定义
+ * @author: MC.Yang
+ */
+
+/**
+ * PNode
+ */
+type VNode = import('vue').VNode;
+export type SlotReturnValue = VNode | string | boolean | null | undefined | SlotReturnArray;
+export type SlotReturnArray = Array<SlotReturnValue>;
+export type PNodeReturnValue = SlotReturnValue;
+/**
+ * 严格执行是否有参数，不允许出现 props?:T
+ */
+export type PNode<T = undefined> = T extends undefined
+    ? (h: typeof import('vue').h) => PNodeReturnValue
+    : (h: typeof import('vue').h, props: T) => PNodeReturnValue;
+
+/**
+ * 链接的跳转方式，如：当前页面打开、新页面打开等，同 HTML 属性 target 含义相同
+ * "_self"：内容在当前页面显示。
+ * "_blank"：内容在新页面显示。
+ * “three”：内容在对应窗口显示
+ * "_top"：在当前窗体打开链接，并替换当前的整个窗体(框架页)，清除所有包含的框架
+ * "_parent"：在父窗体中打开链接，在窗口与顶级框架中，等同于_self
+ */
+export type TargetType = '_blank' | '_self' | '_parent' | '_top' | 'three';
+
+/**
+ * 消息触发器类型
+ */
+export type MessageTriggerTypes = 'system' | 'esc' | 'mark' | 'icon';
+
+/**
+ * 元素类型
+ */
+export type ElementTypes = 'success' | 'info' | 'warning' | 'danger';
+
+/**
+ * 元素大小
+ */
+export type ElementSizes = 'small' | 'normal' | 'large';
+
+/**
+ * 浮动触发类型
+ */
+export type FloatingTrigger = 'hover' | 'click' | 'focus' | 'clickToOpen' | 'unset';
+
+/**
+ * 样式类型
+ */
+type fade = 'fadeDown' | 'fadeRight' | 'fadeUp' | 'fadeLeft';
+type fadeModifier = 'half' | 'completely';
+type scale = 'scaleVertical' | 'scaleHorizontal'
+type scaleModifier = 'center' | 'start' | 'end';
+export type Transition =
+    `p-transition-${fade}`
+    | `p-transition-fade`
+    | `p-transition-${fade}--${fadeModifier}`
+    | 'p-transition-none'
+    | `p-transition-${scale}`
+    | `p-transition-${scale}--${scaleModifier}`
+    | `p-transition-scale`
+    | `p-transition-scale--${fadeModifier}`
+    | `p-transition-collapse--vertical`
+    | `p-transition-collapse--horizontal`
+    ;
+

package/packages/typings/index.ts

@@ -0,0 +1,7 @@
+/*
+ * @description: 选项
+ * @author: MC.Yang
+ */
+
+export * from "./base"
+export * from "./sui-options"

package/packages/typings/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@bin-ui/typings",
+  "main": "index.ts",
+  "private": true,
+  "sideEffects": false,
+  "dependencies": {}
+}

package/packages/typings/sui-options.ts

@@ -0,0 +1,8 @@
+/*
+ * @description: 选项
+ * @author: MC.Yang
+ */
+
+export declare interface SuiOptions {
+    zIndex:number
+}

package/pnpm-workspace.yaml

@@ -0,0 +1,2 @@
+packages:
+  - 'packages/*'