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

package/packages/hooks/useDragSort.ts

@@ -0,0 +1,125 @@
+/*
+ * @description: 拖拽排序
+ * @author: MC.Yang
+ */
+import {onUnmounted} from 'vue';
+
+const traversalTabNavs = (tabNavs: HTMLCollection, fn: { (itemNode: any): void; (tabNav: HTMLDivElement): void }) => {
+    for (const itemNode of tabNavs) {
+        if (itemNode.getAttribute('draggable')) {
+            fn(itemNode);
+        }
+    }
+};
+
+const handleTarget = (target: EventTarget | null, tabNavs: HTMLCollection): any => {
+    let resultTarget;
+    traversalTabNavs(tabNavs, (itemNode) => {
+        if (itemNode.contains(target)) {
+            resultTarget = itemNode;
+        }
+    });
+    return resultTarget;
+};
+
+export default function useDragSort(props: any) {
+    let navsWrap: HTMLDivElement;
+
+    // 获取当前正在拖动的tabNav节点
+    let dragged: HTMLDivElement;
+    const enterTargets: HTMLDivElement[] = [];
+
+    const dragstart = (event: DragEvent) => {
+        const target = event.target as HTMLDivElement;
+        // const { target } = event;
+        // 保存拖动元素的引用(ref.)
+        dragged = target;
+        // 使其半透明
+        target.style.opacity = '0.5';
+    };
+    const dragend = (event: DragEvent) => {
+        // 重置透明度
+        (event.target as HTMLDivElement).style.opacity = '';
+    };
+    /* 放置目标元素时触发事件 */
+    const dragover = (event: DragEvent) => {
+        // 阻止默认动作以启用drop
+        event.preventDefault();
+    };
+    // 当可拖动的元素进入可放置的目标时
+    const dragenter = (event: DragEvent) => {
+        // 高亮目标节点
+        const target = handleTarget(event.target, navsWrap.children);
+        if (target && target !== dragged && target.draggable) {
+            target.firstChild.style.outline = '1px dashed #0052d9';
+            // 进入的节点全部记录下来
+            if (!enterTargets.includes(target)) {
+                enterTargets.push(target);
+            }
+        }
+    };
+    // 当拖动元素离开可放置目标节点
+    const dragleave = (event: DragEvent) => {
+        const target = event.target as HTMLDivElement;
+        // 重置其边框
+        // const { target } = event;
+        for (const enterTarget of enterTargets) {
+            // 目标不在需要放入的节点内，则重置边框
+            if (!enterTarget.contains(target)) {
+                // 记录过的节点全部重置边框
+                (enterTarget.firstChild as HTMLDivElement).style.outline = 'none';
+            }
+        }
+    };
+    const drop = (event: DragEvent) => {
+        // 阻止默认动作（如打开一些元素的链接）
+        event.preventDefault();
+
+        traversalTabNavs(navsWrap.children, (tabNav) => {
+            tabNav.firstChild.style.outline = 'none';
+        });
+        // 将拖动的元素到所选择的放置目标节点中
+        let target = handleTarget(event.target, navsWrap.children);
+        if (target && target.parentNode !== dragged && target.draggable) {
+            // 获取拖拽元素 index
+            const dragIndex = [].indexOf.call(navsWrap.children, dragged as never);
+            // 获取放入元素 index
+            const targetIndex = [].indexOf.call(navsWrap.children, target as never);
+            if (targetIndex > dragIndex) {
+                target = navsWrap.children[targetIndex + 1];
+            }
+
+            // 当 props.theme === "normal" 会多出一个指示条为第一个 dom 节点，所以需要减1
+            const currentIndex = props.theme === 'card' ? dragIndex : dragIndex - 1;
+            const endIndex = props.theme === 'card' ? targetIndex : targetIndex - 1;
+            props.onDragSort?.({
+                currentIndex,
+                current: props.panels[currentIndex].value,
+                targetIndex: endIndex,
+                target: props.panels[endIndex].value,
+            });
+        }
+    };
+
+    function setNavsWrap(val: HTMLDivElement) {
+        navsWrap = val;
+        navsWrap.addEventListener('dragstart', dragstart, false);
+        navsWrap.addEventListener('dragend', dragend, false);
+        navsWrap.addEventListener('dragover', dragover, false);
+        navsWrap.addEventListener('dragenter', dragenter, false);
+        document.addEventListener('dragleave', dragleave, false);
+        document.addEventListener('mousemove', dragleave as EventListenerOrEventListenerObject, false);
+        navsWrap.addEventListener('drop', drop, false);
+    }
+
+    onUnmounted(() => {
+        navsWrap.removeEventListener('dragstart', dragstart);
+        navsWrap.removeEventListener('dragend', dragend);
+        navsWrap.removeEventListener('dragover', dragover);
+        navsWrap.removeEventListener('dragenter', dragenter);
+        document.removeEventListener('dragleave', dragleave);
+        document.removeEventListener('mousemove', dragleave as EventListenerOrEventListenerObject);
+        navsWrap.removeEventListener('drop', drop);
+    });
+    return {setNavsWrap};
+}

package/packages/hooks/useDraggable.ts

@@ -0,0 +1,97 @@
+/*
+ * @description: 拖拽钩子
+ * @author: MC.Yang
+ */
+import type {ComputedRef, Ref} from 'vue'
+import {onBeforeUnmount, onMounted, ref, watchEffect} from 'vue'
+
+/**
+ * @description 使用拖拽
+ * @param targetRef 目标元素
+ * @param triggerRef 触发器元素
+ * @param draggable 是否可以被拖拽
+ */
+export const useDraggable = (
+    targetRef: Ref<HTMLElement | undefined>,
+    triggerRef: Ref<HTMLElement | undefined>,
+    draggable: ComputedRef<boolean>
+) => {
+    let transform = {
+        offsetX: 0,
+        offsetY: 0,
+    }
+    if (targetRef instanceof HTMLElement) {
+        targetRef = ref<HTMLElement | undefined>(targetRef)
+    }
+
+    const onMousedown = (e: MouseEvent) => {
+        const downX = e.clientX
+        const downY = e.clientY
+        const {offsetX, offsetY} = transform
+
+        const targetRect = targetRef.value!.getBoundingClientRect()
+        const targetLeft = targetRect.left
+        const targetTop = targetRect.top
+        const targetWidth = targetRect.width
+        const targetHeight = targetRect.height
+
+        const clientWidth = document.documentElement.clientWidth
+        const clientHeight = document.documentElement.clientHeight
+
+        const minLeft = -targetLeft + offsetX
+        const minTop = -targetTop + offsetY
+        const maxLeft = clientWidth - targetLeft - targetWidth + offsetX
+        const maxTop = clientHeight - targetTop - targetHeight + offsetY
+
+        const onMousemove = (e: MouseEvent) => {
+            const moveX = Math.min(
+                Math.max(offsetX + e.clientX - downX, minLeft),
+                maxLeft
+            )
+            const moveY = Math.min(
+                Math.max(offsetY + e.clientY - downY, minTop),
+                maxTop
+            )
+
+            transform = {
+                offsetX: moveX,
+                offsetY: moveY,
+            }
+            targetRef.value!.style.transform = `translate(${moveX}px, ${moveY}px)`
+        }
+
+        const onMouseup = () => {
+            document.removeEventListener('mousemove', onMousemove)
+            document.removeEventListener('mouseup', onMouseup)
+        }
+
+        document.addEventListener('mousemove', onMousemove)
+        document.addEventListener('mouseup', onMouseup)
+    }
+
+    const onDraggable = () => {
+        if (triggerRef.value && targetRef.value) {
+            triggerRef.value.addEventListener('mousedown', onMousedown)
+        }
+    }
+
+    const offDraggable = () => {
+        if (triggerRef.value && targetRef.value) {
+            triggerRef.value.removeEventListener('mousedown', onMousedown)
+        }
+    }
+
+    onMounted(() => {
+        watchEffect(() => {
+            if (draggable.value) {
+                onDraggable()
+            } else {
+                offDraggable()
+            }
+        })
+    })
+
+    onBeforeUnmount(() => {
+        offDraggable()
+    })
+}

package/packages/hooks/useFlag.ts

@@ -0,0 +1,36 @@
+/*
+ * @description: 响应式 Boolean 变量
+ * @author: MC.Yang
+ */
+import {Ref, ref} from "vue";
+
+/**
+ * @description 纯粹是创建一个响应式布尔值
+ * @param f 默认值
+ */
+export const useFlag =  function (f:Boolean = false)  {
+    const flag:Ref<Boolean> = ref<Boolean>(f);
+    const setFalse = function () {
+        flag.value = false;
+    }
+    const setTrue = function () {
+        flag.value = true;
+    }
+
+    const toggle = function () {
+        if (flag.value){
+            setFalse();
+        }
+        else{
+            setTrue();
+        }
+    }
+
+    return {
+        flag,
+        setTrue,
+        setFalse,
+        toggle
+    }
+
+}

package/packages/hooks/useLockScroll.ts

@@ -0,0 +1,45 @@
+/*
+ * @description: 禁止浏览器滚动
+ * @author: MC.Yang
+ */
+
+// 全局计数器
+let count = 0;
+
+/**
+ * @description 使用禁止滚动
+ */
+export const useLockScroll = function () {
+
+    const body = document.body;
+
+    /**
+     * @description 锁定滚动
+     */
+    const lockScroll = function () {
+
+        if (count === 0) {
+            const a = body.offsetWidth;
+            body.style.overflowY = "hidden"
+            const b = body.offsetWidth;
+            body.style.width = `calc(100% - ${b - a}px)`;
+        }
+        count++;
+    }
+    /**
+     * @description 解锁滚动
+     */
+    const unLockScroll = function () {
+        count--;
+        if (count <= 0) count = 0;
+        if (count === 0) {
+            body.style.overflowY = "auto"
+            body.style.width = `100%`;
+        }
+    }
+
+    return {
+        lockScroll,
+        unLockScroll
+    }
+}

package/packages/hooks/useMark.ts

@@ -0,0 +1,53 @@
+/*
+ * @description: 创建mark(遮罩)元素钩子
+ * @author: MC.Yang
+ */
+import {onUnmounted, Ref, watch} from "vue";
+import {noop, unrefElement} from "@vueuse/core";
+import {Mark, MarkType} from "@bin-ui/tools"
+
+
+/**
+ * @description 遮罩的类型
+ */
+
+type targetType = Ref<HTMLElement | undefined | null> | HTMLElement
+
+/**
+ * @description 使用遮罩
+ * @param target 需要添加遮罩的元素, 可以是ref实例，也可以是一个html节点
+ * @param markType  cover将会覆盖整个视口，part只会覆盖元素本身
+ */
+export const useMark = function (target: targetType, markType?: MarkType) {
+    const mark = new Mark(markType);
+    let cleanup = noop;
+
+    const stop = watch(
+        () => {
+            if (target instanceof HTMLElement) return target;
+            else return unrefElement(target)
+        },
+        (el) => {
+            cleanup();
+            if (!el) return;
+            el.appendChild(mark.element);
+            cleanup = () => {
+                el.removeChild(mark.element);
+                cleanup = noop;
+            }
+        }
+    )
+
+    onUnmounted(() => {
+        stop();
+        cleanup();
+    })
+
+
+    return {
+        mark: mark.element,
+        showMark: () => mark.open(),
+        hiddenMark: () => mark.close()
+    }
+
+}

package/packages/hooks/useNS.ts

@@ -0,0 +1,328 @@
+/**
+ * @file useNS - BEM 命名空间工具
+ * @description 根据 BEM (Block Element Modifier) 规范完成 CSS 类名的拼接
+ * @author MC.Yang
+ * 
+ * @see {@link http://getbem.com/ BEM 官方文档}
+ * 
+ * @description BEM 命名约定：
+ * - **Block** (块)：代表了更高级别的抽象或组件
+ *   - 格式：`p-button`
+ * 
+ * - **Element** (元素)：代表 Block 的后代，用于形成一个完整的 Block 整体
+ *   - 格式：`p-button__icon`
+ *   - 使用两个下划线 `__` 连接
+ * 
+ * - **Modifier** (修饰符)：代表 Block 的不同状态或不同版本
+ *   - 格式：`p-button--primary`
+ *   - 使用两个连字符 `--` 连接
+ * 
+ * @example
+ * ```typescript
+ * const ns = useNS('button')
+ * 
+ * ns.namespace        // 'p-button'
+ * ns.b('group')       // 'p-button-group'
+ * ns.e('icon')        // 'p-button__icon'
+ * ns.m('primary')     // 'p-button--primary'
+ * ns.is('disabled')   // 'is-disabled'
+ * ```
+ */
+import { ElementSizes } from "@bin-ui/typings";
+
+/**
+ * 默认的命名空间前缀
+ * @constant {string}
+ * @default 'p'
+ * @description 所有组件的 CSS 类名都以 'p-' 开头，代表 Bin UI
+ */
+const defaultNS = 'p';
+
+/**
+ * 状态类名前缀
+ * @constant {string}
+ * @default 'is'
+ * @description 用于表示组件状态的类名前缀，如 'is-disabled', 'is-active'
+ */
+const statusPrefix = 'is';
+
+/**
+ * CSS 变量前缀
+ * @constant {string}
+ * @default 'pixel'
+ * @description CSS 变量的命名空间，如 '--pixel-button-color'
+ */
+const variablePrefix = 'pixel';
+
+/**
+ * 状态处理函数接口
+ * @interface IS
+ * @description 支持多种参数组合的重载函数
+ */
+interface IS {
+    /** 仅传入状态名 */
+    (status?: string): string,
+    /** 传入状态名和条件标志 */
+    (status?: string, f?: boolean): string,
+    /** 传入条件和状态名 */
+    (status: boolean, s: string): string
+}
+
+/**
+ * BEM 命名空间工具函数
+ * @param {string} name - 组件名称，如 'button', 'input'
+ * @returns 返回一个包含多个 BEM 命名函数的对象
+ * 
+ * @example
+ * ```typescript
+ * const ns = useNS('button')
+ * // 返回的 ns 对象包含：
+ * // - namespace: 'p-button'
+ * // - b, e, m, is 等函数
+ * ```
+ */
+export const useNS = function (name: string) {
+    /**
+     * 组件的基础命名空间
+     * @constant {string}
+     * @example 'p-button'
+     */
+    const namespace = `${defaultNS}-${name}`;
+
+    /**
+     * Block - 块级别的命名
+     * @param {string} [block] - 块名称
+     * @param {boolean} [flag] - 是否启用此块
+     * @returns {string} 返回 BEM 块类名
+     * 
+     * @example
+     * ns.b('group')           // 'p-button-group'
+     * ns.b('group', true)     // 'p-button-group'
+     * ns.b('group', false)    // ''
+     */
+    const b = (block?: string, flag?: boolean) => {
+        if (typeof flag === "boolean") {
+            return block && flag ? `${namespace}-${block}` : '';
+        }
+        return block ? `${namespace}-${block}` : '';
+    }
+
+    /**
+     * Element - 元素级别的命名
+     * @param {string} [element] - 元素名称
+     * @param {boolean} [flag] - 是否启用此元素
+     * @returns {string} 返回 BEM 元素类名
+     * 
+     * @example
+     * ns.e('icon')            // 'p-button__icon'
+     * ns.e('text')            // 'p-button__text'
+     * ns.e('icon', false)     // ''
+     */
+    const e = (element?: string, flag?: boolean) => {
+        if (typeof flag === "boolean") {
+            return element && flag ? `${namespace}__${element}` : '';
+        }
+        return element ? `${namespace}__${element}` : '';
+    }
+
+    /**
+     * Modifier - 修饰符级别的命名
+     * @param {string} [modifier] - 修饰符名称
+     * @param {boolean} [flag] - 是否启用此修饰符
+     * @returns {string} 返回 BEM 修饰符类名
+     * 
+     * @example
+     * ns.m('primary')         // 'p-button--primary'
+     * ns.m('large')           // 'p-button--large'
+     * ns.m('disabled', false) // ''
+     */
+    const m = (modifier?: string, flag?: boolean) => {
+        if (typeof flag === "boolean") {
+            return modifier && flag ? `${namespace}--${modifier}` : '';
+        }
+        return modifier ? `${namespace}--${modifier}` : '';
+    }
+
+    /**
+     * Element Element - 双元素嵌套命名
+     * @param {string} [ele1] - 第一个元素名称
+     * @param {string} [ele2] - 第二个元素名称
+     * @returns {string} 返回双元素类名
+     * 
+     * @example
+     * ns.ee('header', 'title')  // 'p-button__header__title'
+     */
+    const ee = (ele1?: string, ele2?: string) => {
+        return ele1 && ele2 ? `${namespace}__${ele1}__${ele2}` : '';
+    }
+
+    /**
+     * Block Block - 双块嵌套命名
+     * @param {string} [block1] - 第一个块名称
+     * @param {string} [block2] - 第二个块名称
+     * @returns {string} 返回双块类名
+     * 
+     * @example
+     * ns.bb('group', 'item')  // 'p-button-group-item'
+     */
+    const bb = (block1?: string, block2?: string) => {
+        return block1 && block2 ? `${namespace}-${block1}-${block2}` : '';
+    }
+
+    /**
+     * Block Element - 块元素组合命名
+     * @param {string} block - 块名称
+     * @param {string} element - 元素名称
+     * @param {boolean} [flag] - 是否启用
+     * @returns {string} 返回块-元素类名
+     * 
+     * @example
+     * ns.be('group', 'item')  // 'p-button-group__item'
+     */
+    const be = (block: string, element: string, flag?: boolean) => {
+        if (typeof flag === "boolean") {
+            return block && element && flag ? `${namespace}-${block}__${element}` : '';
+        }
+        return block && element ? `${namespace}-${block}__${element}` : '';
+    }
+
+    /**
+     * Element Block - 元素块组合命名
+     * @param {string} element - 元素名称
+     * @param {string} block - 块名称
+     * @param {boolean} [flag] - 是否启用
+     * @returns {string} 返回元素-块类名
+     * 
+     * @example
+     * ns.eb('icon', 'wrapper')  // 'p-button__icon-wrapper'
+     */
+    const eb = (element: string, block: string, flag?: boolean) => {
+        if (typeof flag === "boolean") {
+            return element && block && flag ? `${namespace}__${element}-${block}` : '';
+        }
+        return element && block ? `${namespace}__${element}-${block}` : '';
+    }
+
+    /**
+     * Block Modifier - 块修饰符组合命名
+     * @param {string} block - 块名称
+     * @param {string} modifier - 修饰符名称
+     * @param {boolean} [flag] - 是否启用
+     * @returns {string} 返回块-修饰符类名
+     * 
+     * @example
+     * ns.bm('group', 'vertical')  // 'p-button-group--vertical'
+     */
+    const bm = (block: string, modifier: string, flag?: boolean) => {
+        if (typeof flag === 'boolean') {
+            return block && modifier && flag ? `${namespace}-${block}--${modifier}` : '';
+        }
+        return block && modifier ? `${namespace}-${block}--${modifier}` : '';
+    }
+
+    /**
+     * Element Modifier - 元素修饰符组合命名
+     * @param {string} [element] - 元素名称
+     * @param {string} [modifier] - 修饰符名称
+     * @param {boolean} [flag] - 是否启用
+     * @returns {string} 返回元素-修饰符类名
+     * 
+     * @example
+     * ns.em('icon', 'large')  // 'p-button__icon--large'
+     */
+    const em = (element?: string, modifier?: string, flag?: boolean) => {
+        if (typeof flag === "boolean") {
+            return element && modifier && flag ? `${namespace}__${element}--${modifier}` : '';
+        }
+        return element && modifier ? `${namespace}__${element}--${modifier}` : '';
+    }
+
+    /**
+     * 状态类名生成函数
+     * @param {boolean|string} [status] - 状态名称或条件
+     * @param {string|boolean} [s] - 状态名称或标志
+     * @returns {string} 返回状态类名
+     * 
+     * @description 支持三种调用方式：
+     * 1. is(status: string) - 直接返回状态类名
+     * 2. is(status: string, flag: boolean) - 根据 flag 决定是否返回
+     * 3. is(flag: boolean, status: string) - 根据 flag 决定是否返回
+     * 
+     * @example
+     * ns.is('disabled')              // 'is-disabled'
+     * ns.is('active', true)          // 'is-active'
+     * ns.is('active', false)         // ''
+     * ns.is(true, 'loading')         // 'is-loading'
+     * ns.is(false, 'loading')        // ''
+     */
+    const is: IS = (status?: boolean | string, s?: string | boolean) => {
+        if (typeof status === "string") {
+            if (typeof s === 'boolean') {
+                return s ? `${statusPrefix}-${status}` : '';
+            }
+            return `${statusPrefix}-${status}`;
+        }
+        if (typeof status === 'boolean' && status) {
+            return `${statusPrefix}-${s}`;
+        }
+
+        return '';
+    }
+
+    /**
+     * 尺寸类名生成函数
+     * @param {ElementSizes} [size] - 尺寸值（small, large）
+     * @param {boolean} [isPrivate] - 是否使用私有命名空间
+     * @returns {string} 返回尺寸类名
+     * 
+     * @description
+     * - isPrivate=false: 返回全局尺寸类名，如 'p-size-large'
+     * - isPrivate=true: 返回私有尺寸类名，如 'p-button-size-large'
+     * 
+     * @example
+     * ns.size('large')        // 'p-size-large' (全局类名)
+     * ns.size('large', true)  // 'p-button-size-large' (私有类名)
+     */
+    const size = (size?: ElementSizes, isPrivate?: boolean) => {
+        if (typeof isPrivate === "boolean") {
+            return size ? `${namespace}-size-${size}` : '';
+        }
+        return size ? `${defaultNS}-size-${size}` : '';
+    }
+
+    /**
+     * CSS 变量名生成函数
+     * @param {string} [block] - 变量名称
+     * @returns {string} 返回 CSS 变量名
+     * 
+     * @description 用于生成 CSS 自定义属性的名称
+     * 
+     * @example
+     * ns.cssVar('color')          // '--pixel-button-color'
+     * ns.cssVar('font-size')      // '--pixel-button-font-size'
+     */
+    const cssVar = (block?: string) => {
+        return block ? `--${variablePrefix}-${name}-${block}` : '';
+    }
+
+    /**
+     * 返回 BEM 工具集合
+     * @returns 包含所有 BEM 命名函数的对象
+     */
+    return {
+        namespace,  // 基础命名空间
+        b,          // Block
+        e,          // Element
+        m,          // Modifier
+        bb,         // Block-Block
+        ee,         // Element-Element
+        be,         // Block-Element
+        eb,         // Element-Block
+        bm,         // Block-Modifier
+        em,         // Element-Modifier
+        is,         // Status
+        size,       // Size
+        cssVar      // CSS Variable
+    }
+
+}