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

package/packages/components/tooltip/src/tooltip.ts

@@ -0,0 +1,150 @@
+/*
+ * @description: 文字提示
+ * @author: MC.Yang
+ */
+import {PropType} from "vue";
+import {Placement} from "@floating-ui/vue";
+import {FloatingTrigger, Transition} from "@bin-ui/typings";
+
+/**
+ * 文字提示 Props
+ */
+export const PTooltipProps = {
+
+    /**
+     * @description 文本提示框出现的触发方式
+     */
+    trigger: {
+        type: String as PropType<FloatingTrigger>,
+        default: "hover"
+    },
+
+    /**
+     * @description 文本提示框相对于引用元素的方位
+     */
+    placement: {
+        type: String as PropType<Placement>,
+        default: "bottom"
+    },
+
+    /**
+     * @description 文本提示框相对于引用元素的偏移
+     */
+    offset: {
+        type: Number,
+        default: 10,
+    },
+
+    /**
+     * @description 文本提示框出现时的过渡
+     */
+    transition: {
+        type: String as PropType<Transition>,
+        default: "p-transition-scale"
+    },
+
+    /**
+     * @description 文本提示框出现时前的延时
+     */
+    openDelay: {
+        type: Number,
+        default: 50
+    },
+
+    /**
+     * @description 文本提示框消失前的延时
+     */
+    closeDelay: {
+        type: Number,
+        default: 200
+    },
+
+    /**
+     * @description 气是否禁用文本提示框的状态切换
+     */
+    disabled: Boolean,
+
+    /**
+     * @description 是否可以通过点击 body 来关闭文本提示框
+     */
+    closeOnClickBody: Boolean,
+
+    /**
+     * @description 是否在挂载后打开文本提示框
+     */
+    openOnMounted: Boolean,
+
+    /**
+     * @description 是否瞬移
+     */
+    teleported: {
+        type: Boolean,
+        default: true,
+    },
+
+    /**
+     * @description 是否显示小箭头
+     */
+    showArrow: {
+        type: Boolean,
+        default: true
+    },
+
+    /**
+     * @description 文本提示框包裹标签的类
+     */
+    floatingClass: String,
+    /**
+     * @description 动态引用元素, 注意：slot.reference 优先级高于此项
+     */
+    reference: Object as PropType<any>,
+
+    /**
+     * @description 是否开启快速跟踪, 当引用元素是可以移动的且文本框更新跟不上移动时开启此项
+     */
+    quickTrack: Boolean,
+
+    /**
+     * @description 文本提示框显示的文本
+     */
+    content: String,
+
+    /**
+     * @description 文本提示框的主题
+     */
+    variant: {
+        type: String as PropType<'light' | 'dark'>,
+        default: 'dark'
+    },
+}
+
+/**
+ * 文字提示事件
+ */
+export interface PTooltipEmits {
+
+    /**
+     * @description 文本提示框打开触发
+     * @param e open
+     */
+    (e: 'open'): void;
+
+    /**
+     * @description 文本提示框打开后触发
+     * @param e opened
+     */
+    (e: 'opened'): void;
+
+    /**
+     * @description 文本提示框关闭时触发
+     * @param e close
+     */
+    (e: 'close'): void;
+
+    /**
+     * @description 文本提示框关闭后触发
+     * @param e closed
+     */
+    (e: 'closed'): void;
+
+}

package/packages/components/tooltip/src/tooltip.vue

@@ -0,0 +1,70 @@
+<template>
+  <p-floating
+      ref="floating"
+      v-bind="useAttrs('scoped').value"
+      :class="classes"
+      :trigger="props.trigger"
+      :placement="props.placement"
+      :transition="props.transition"
+      :open-delay="props.openDelay"
+      :close-delay="props.closeDelay"
+      :disabled="props.disabled"
+      :offset="props.offset"
+      :close-on-click-body="props.closeOnClickBody"
+      :open-on-mounted="props.openOnMounted"
+      :teleported="props.teleported"
+      :show-arrow="props.showArrow"
+      :floating-class="props.floatingClass"
+      :reference="props.reference"
+      :quick-track="props.quickTrack"
+      @open="emits('open')"
+      @opened="emits('opened')"
+      @close="emits('close')"
+      @closed="emits('closed')"
+  >
+    <template #reference v-if="slots.default">
+      <slot></slot>
+    </template>
+    <template #default>
+      <template v-if="slots.content">
+        <slot name="content"></slot>
+      </template>
+      <template v-else>
+        {{ props.content }}
+      </template>
+    </template>
+  </p-floating>
+</template>
+
+<script setup lang="ts">
+import {computed, ref, useSlots} from "vue";
+import PFloating from "../../floating/src/floating.vue";
+import {PTooltipEmits, PTooltipProps} from "./tooltip";
+import {useAttrs, useNS} from "@bin-ui/hooks";
+import {PFloatingInstance} from "../../floating";
+
+defineOptions({
+  name: "PTooltip",
+  inheritAttrs: false
+})
+
+const ns = useNS('tooltip');
+const props = defineProps({...PTooltipProps});
+const emits = defineEmits<PTooltipEmits>();
+const slots = useSlots();
+
+const classes = computed(() => {
+  return [
+    ns.namespace,
+    ns.m(props.variant),
+  ]
+})
+
+const floating = ref<PFloatingInstance | null>(null);
+
+defineExpose({
+  close: () => floating.value!.close(),
+  open: () => floating.value!.open(),
+  toggle: () => floating.value!.toggle()
+})
+</script>

package/packages/hooks/index.ts

@@ -0,0 +1,16 @@
+/*
+ * @description: 钩子
+ * @author: MC.Yang
+ */
+export * from "./useVModel";
+export * from "./useDefaultValue";
+export * from "./useNS";
+export * from "./useMark";
+export * from "./useLockScroll";
+export * from "./useAlert";
+export * from "./useAttrs";
+export * from "./useFlag";
+export * from "./useDraggable";
+export * from "./useDragSort";
+export * from "./useBadge";
+export * from "./useCollapseAnimation";

package/packages/hooks/package.json

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

package/packages/hooks/useAlert.ts

@@ -0,0 +1,93 @@
+/*
+ * @description: 警报钩子
+ * @author: MC.Yang
+ */
+import {isRef, onUnmounted, ref, Ref, watch} from "vue";
+import {Alert} from "@bin-ui/tools";
+import {noop, unrefElement} from "@vueuse/core";
+
+export default function (
+    target: Ref<HTMLElement | null | undefined>,
+    icon: string | Ref<string | undefined> = 'pixel-danger',
+    text: string | Ref<string | undefined> = 'data error!'
+) {
+    const refIcon = isRef(icon) ? icon : ref<string>(icon);
+    const refText = isRef(text) ? text : ref<string>(text);
+    const alert = new Alert(refText.value, refIcon.value);
+
+    let cleanup = noop;
+
+    const targetWatcher = watch(() => {
+            return unrefElement(target)
+        },
+        (el) => {
+            cleanup();
+            if (!el) return;
+
+            alert.mountTo(el);
+
+            cleanup = () => {
+                alert.unMount();
+                cleanup = noop;
+            }
+
+        })
+
+    const iconWatcher = watch(() => refIcon.value, (icon) => {
+        // 注意空字符串也会被排除
+        if (!icon) return;
+        if (!target.value) return;
+
+        alert.setIcon(icon);
+
+    })
+
+    const textWatcher = watch(() => refText.value, (text) => {
+        // 注意空字符串也会被排除
+        if (!text) return;
+        if (!target.value) return;
+
+        alert.setText(text);
+    })
+
+    let stop = () => {
+        cleanup();
+        targetWatcher();
+        iconWatcher();
+        textWatcher();
+        stop = noop
+    }
+
+    onUnmounted(() => {
+        stop();
+    })
+
+
+    return {
+        /**
+         * @description 响应式 icon
+         */
+        icon: refIcon,
+        /**
+         * @description 响应式 text
+         */
+        text: refText,
+        /**
+         * @description 显示 alert
+         */
+        show: () => alert.show(),
+        /**
+         * @description 隐藏 alert
+         */
+        hidden: () => alert.hidden(),
+        /**
+         * @description 显示/隐藏 alert
+         */
+        toggle: () => alert.toggle(),
+        /**
+         * @description 停止使用 alert
+         */
+        stop,
+    }
+
+}

package/packages/hooks/useAttrs.ts

@@ -0,0 +1,59 @@
+/*
+ * @description: 节点作用域 ID
+ * @author: MC.Yang
+ */
+import {computed, getCurrentInstance, useAttrs as _useAttrs} from "vue";
+
+type F = 'scoped' | 'scopedOnly' | undefined;
+
+
+/**
+ * 针对使用 fragment,teleport 类型的组件时, 不会为节点添加 scopeID 的 bug
+ * 在未来可能被移除
+ * @param flag
+ */
+export const useAttrs = function (flag?: F) {
+    switch (flag) {
+        case 'scoped':
+            return computed(() => {
+                const scopeID = getScopedID();
+                if (scopeID) {
+                    return {
+                        [scopeID]: '',
+                        ..._useAttrs(),
+                    }
+                }
+                return {
+                    ..._useAttrs(),
+                }
+            })
+        case 'scopedOnly':
+            return computed(() => {
+                const scopeID = getScopedID();
+                if (scopeID) {
+                    return {
+                        [scopeID]: '',
+                    }
+                }
+                return {}
+            })
+        default:
+            return computed(() => {
+                return {
+                    ..._useAttrs()
+                }
+            })
+    }
+}
+
+const getScopedID = () => {
+    const attrs = useAttrs();
+    let scopedID: string = getCurrentInstance()?.vnode.scopeId ?? '';
+
+    const scopedKey = Object.keys(attrs.value).find(key => key.startsWith('data-v-'));
+    if (scopedKey) {
+        scopedID = scopedKey;
+    }
+    return scopedID;
+}
+

package/packages/hooks/useBadge.ts

@@ -0,0 +1,103 @@
+/*
+ * @description: 徽章钩子
+ * @author: MC.Yang
+ */
+import {ComputedRef, onUnmounted, Ref, watch, watchEffect} from "vue";
+import {noop, unrefElement, VueInstance} from "@vueuse/core";
+import {Badge, BadgeType, BadgeVariant} from "@bin-ui/tools";
+
+type targetType = Ref<HTMLElement | undefined | null | VueInstance> | HTMLElement;
+
+interface BadgeOptions {
+    value: Ref<string | number> | ComputedRef<any>
+    type?: Ref<BadgeType | undefined>,
+    variant?: Ref<BadgeVariant | undefined>
+}
+
+/**
+ * @description 为某个元素使用 badge
+ * @param target 目标元素
+ * @param options 配置选项
+ */
+export const useBadge = function (target: targetType, options: BadgeOptions) {
+    const {value, type, variant} = options;
+    const badge = new Badge();
+    let cleanup = noop;
+
+
+    const watchEffect1 = watchEffect(() => {
+
+        type?.value && badge.tp(type.value);
+        variant?.value && badge.exp(variant.value);
+    })
+
+
+    const targetWatcher = watch(() => {
+        if (target instanceof HTMLElement) {
+            return target
+        }
+        if (!target.value) {
+            return void 0;
+        }
+        return unrefElement(target)
+    }, (el) => {
+        cleanup();
+        if (!el) {
+            return void 0;
+        }
+
+        badge.mountTo(el as HTMLElement);
+
+        cleanup = () => {
+            badge.unMount();
+            cleanup = noop;
+        }
+
+
+    }, {immediate: true})
+
+    const valueWatcher = watch(() => {
+        return value?.value;
+    }, (value) => {
+        if (value === undefined || value === null) {
+            return;
+        }
+        badge.setTxt(value);
+    }, {immediate: true})
+
+
+    const stop = () => {
+        cleanup();
+        watchEffect1();
+        targetWatcher();
+        valueWatcher();
+    }
+
+    onUnmounted(() => {
+        stop();
+    })
+
+
+    // notice: 返回的函数写成匿名函数或者bind函数避免丢失上下文
+    // egs: setTxt:badge.setTxt会丢失上下文
+    return {
+        /**
+         * @description 停止使用 badge
+         */
+        stop,
+        /**
+         * @description 显示 badge
+         */
+        show: badge.show.bind(badge),
+        /**
+         * @description 隐藏 badge
+         */
+        hidden: badge.hidden.bind(badge),
+        /**
+         * @description 设置 badge 内部文本
+         */
+        setTxt: badge.setTxt.bind(badge)
+    }
+
+
+}

package/packages/hooks/useCollapseAnimation.ts

@@ -0,0 +1,55 @@
+/*
+ * @description: 折叠动画
+ * @author: MC.Yang
+ */
+export default function useCollapseAnimation() {
+    const beforeEnter = (el: HTMLElement) => {
+        el.dataset.oldPaddingTop = el.style.paddingTop;
+        el.dataset.oldPaddingBottom = el.style.paddingBottom;
+
+        el.style.height = '0';
+        el.style.paddingTop = '0';
+        el.style.paddingBottom = '0';
+    };
+    const enter = (el: HTMLElement) => {
+        el.dataset.oldOverflow = el.style.overflow;
+        el.style.height = `${el.scrollHeight}px`;
+        el.style.paddingTop = <string>el.dataset.oldPaddingTop;
+        el.style.paddingBottom = <string>el.dataset.oldPaddingBottom;
+        el.style.overflow = 'hidden';
+    };
+    const afterEnter = (el: HTMLElement) => {
+        el.style.height = '';
+        el.style.overflow = <string>el.dataset.oldOverflow;
+    };
+    const beforeLeave = (el: HTMLElement) => {
+        el.dataset.oldPaddingTop = el.style.paddingTop;
+        el.dataset.oldPaddingBottom = el.style.paddingBottom;
+        el.dataset.oldOverflow = el.style.overflow;
+
+        el.style.height = `${el.scrollHeight}px`;
+        el.style.overflow = 'hidden';
+    };
+    const leave = (el: HTMLElement) => {
+        if (el.scrollHeight !== 0) {
+            el.style.height = '0';
+            el.style.paddingTop = '0';
+            el.style.paddingBottom = '0';
+        }
+    };
+    const afterLeave = (el: HTMLElement) => {
+        el.style.height = '';
+        el.style.overflow = <string>el.dataset.oldOverflow;
+        el.style.paddingTop = <string>el.dataset.oldPaddingTop;
+        el.style.paddingBottom = <string>el.dataset.oldPaddingBottom;
+    };
+
+    return {
+        beforeEnter,
+        enter,
+        afterEnter,
+        beforeLeave,
+        leave,
+        afterLeave,
+    };
+}

package/packages/hooks/useDefaultValue.ts

@@ -0,0 +1,41 @@
+/*
+ * @description: 默认值
+ * @author: MC.Yang
+ */
+import {getCurrentInstance, Ref, ref} from 'vue';
+import {ChangeHandler} from "./useVModel";
+import {kebabCase} from "@bin-ui/tools";
+
+export default function useDefaultValue<T, P extends any[]>(
+    value: Ref<T | undefined>,
+    defaultValue: T | undefined,
+    onChange: ChangeHandler<T, P> | undefined,
+    propsName: string,
+): [Ref<T | undefined>, ChangeHandler<T, P>] {
+    const currentInstance = getCurrentInstance();
+    const internalValue = ref();
+
+    const vProps = currentInstance?.vnode.props || {};
+    const isVMP =
+        Object.prototype.hasOwnProperty.call(vProps, propsName) ||
+        Object.prototype.hasOwnProperty.call(vProps, kebabCase(propsName));
+
+    if (isVMP) {
+        return [
+            value,
+            (newValue, ...args) => {
+                currentInstance?.emit(`update:${propsName}`, newValue);
+                onChange?.(newValue, ...args);
+            },
+        ];
+    }
+
+    internalValue.value = defaultValue;
+    return [
+        internalValue,
+        (newValue, ...args) => {
+            internalValue.value = newValue;
+            onChange?.(newValue, ...args);
+        },
+    ];
+}