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

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

@@ -0,0 +1,148 @@
+/*
+ * @description: 下拉菜单类型定义
+ * @author: MC.Yang
+ */
+import {Placement} from "@floating-ui/vue";
+import {FloatingTrigger, PNode} from "@bin-ui/typings";
+import {PFloatingProps} from "@bin-ui/components/floating/src/type";
+
+/**
+ * 下拉选项
+ */
+export type DropdownOption = { children?: DropdownOption[] } & PDropdownItemProps & Record<string, any>;
+
+/**
+ * 下拉菜单项主题
+ */
+export type DropdownItemTheme = 'default' | 'success' | 'warning' | 'error';
+
+/**
+ * 下拉菜单 Props
+ */
+export interface PDropdownProps {
+    
+    /**
+     * @description 多层级操作时，子层级展开方向
+     * @default right
+     */
+    direction?: 'left' | 'right';
+    
+    /**
+     * @description 是否禁用组件
+     * @default false
+     */
+    disabled?: boolean;
+    
+    /**
+     * @description 点击选项后是否自动隐藏弹窗
+     * @default true
+     */
+    hideAfterItemClick?: boolean;
+    
+    /**
+     * @description 选项最大宽度，内容超出时，显示为省略号。值为字符串时，值就是最大宽度；值为数字时，单位：px
+     * @default 100
+     */
+    maxColumnWidth?: string | number;
+    
+    /**
+     * @description 弹窗最大高度，单位：px 。统一控制每一列的高度
+     * @default 300
+     */
+    maxHeight?: number;
+    
+    /**
+     * @description 选项最小宽度。值为字符串时，值就是最小宽度；值为数字时，单位：px
+     * @default 10
+     */
+    minColumnWidth?: string | number;
+    
+    /**
+     * @description 下拉操作项
+     * @default []
+     */
+    options?: Array<DropdownOption>;
+    
+    /**
+     * @description 面板内的底部内容
+     */
+    panelBottomContent?: string | PNode;
+    
+    /**
+     * @description 面板内的顶部内容
+     */
+    panelTopContent?: string | PNode;
+    
+    /**
+     * @description 弹窗定位方式，可选值同 Floating 组件
+     * @default bottom-left
+     */
+    placement?: Placement;
+    
+    /**
+     * @description 透传 Floating 组件属性，方便更加自由地控制
+     */
+    popupProps?: PFloatingProps;
+    
+    /**
+     * @description 触发下拉显示的方式
+     * @default hover
+     */
+    trigger?: FloatingTrigger;
+    
+    /**
+     * @description 下拉操作项点击时触发
+     */
+    onClick?: (dropdownItem: DropdownOption, context: { e: MouseEvent }) => void;
+}
+
+/**
+ * 下拉菜单项 Props
+ */
+export interface PDropdownItemProps {
+    
+    /**
+     * @description 是否高亮当前操作项
+     * @default false
+     */
+    active?: boolean;
+    
+    /**
+     * @description 下拉操作项内容
+     * @default ''
+     */
+    content?: string | PNode;
+    
+    /**
+     * @description 是否禁用操作项
+     * @default false
+     */
+    disabled?: boolean;
+    
+    /**
+     * @description 是否显示操作项之间的分隔线（分隔线默认在下方）
+     * @default false
+     */
+    divider?: boolean;
+    
+    /**
+     * @description 组件前置图标
+     */
+    prefixIcon?: PNode;
+    
+    /**
+     * @description 下拉菜单选项主题
+     * @default default
+     */
+    theme?: DropdownItemTheme;
+    
+    /**
+     * @description 下拉操作项唯一标识
+     */
+    value?: string | number | { [key: string]: any };
+    
+    /**
+     * @description 点击时触发
+     */
+    onClick?: (dropdownItem: DropdownOption, context: { e: MouseEvent }) => void;
+}

package/packages/components/floating/index.ts

@@ -0,0 +1,13 @@
+/*
+ * @description: 浮动（弹出层）
+ * @author: MC.Yang
+ */
+import _Floating from "./src/floating.vue";
+import {withInstall} from "@bin-ui/tools";
+
+const Floating = withInstall(_Floating);
+
+export type PFloatingInstance = InstanceType<typeof _Floating>;
+
+export default {Floating};
+export {Floating};

package/packages/components/floating/src/creat-floating-container.ts

@@ -0,0 +1,17 @@
+/*
+ * @description: 浮动（弹出层）
+ * @author: MC.Yang
+ */
+import {IndexManager} from "@bin-ui/tools";
+
+const _ = function () {
+    const floatingContainer: HTMLElement = document.createElement('div');
+    const appendTo = document.body;
+
+    floatingContainer.classList.add('___pixel-floating-container');
+    floatingContainer.style.zIndex = new IndexManager().nextIndex().toString();
+    appendTo.appendChild(floatingContainer);
+    return void 0;
+}
+
+export default _();

package/packages/components/floating/src/floating-props.ts

@@ -0,0 +1,127 @@
+/*
+ * @description: 浮动（弹出层）
+ * @author: MC.Yang
+ */
+import {PropType} from "vue";
+import {PFloatingProps} from "./type";
+
+/**
+ * 浮动 Props
+ */
+export default {
+
+    /**
+     * @description floating 元素的出现的触发方式
+     */
+    trigger: {
+        type: String as PropType<PFloatingProps['trigger']>,
+        default: "click" as PFloatingProps['trigger'],
+        validator(val: PFloatingProps['trigger']): boolean {
+            if (!val) return true;
+            return ['hover', 'click', 'focus', 'clickToOpen', 'unset'].includes(val);
+        },
+    },
+
+    /**
+     * @description floating 元素相对于 reference 元素的定位
+     */
+    placement: {
+        type: String as PropType<PFloatingProps['placement']>,
+        default: "bottom" as PFloatingProps['placement']
+    },
+
+    /**
+     * @description floating 元素相对于 reference 元素的偏移
+     */
+    offset: {
+        type: Number,
+        default: 5,
+    },
+
+    /**
+     * @description floating 元素出现时的过渡
+     */
+    transition: {
+        type: String as PropType<PFloatingProps['transition']>,
+        default: "p-transition-fade" as PFloatingProps['transition']
+    },
+
+    /**
+     * @description floating 元素出现前的延时
+     */
+    openDelay: {
+        type: Number,
+        default: 0
+    },
+
+    /**
+     * @description floating元素消失前的延时
+     */
+    closeDelay: {
+        type: Number,
+        default: 0
+    },
+
+    /**
+     * @description 是否禁止 floating 元素改变可视状态
+     */
+    disabled: Boolean,
+
+    /**
+     * @description 是否可以通过点击 body 来关闭 floating 元素
+     */
+    closeOnClickBody: Boolean,
+
+    /**
+     * @description 是否挂载后立即渲染 floating 元素
+     */
+    openOnMounted: Boolean,
+
+    /**
+     * @description 是否将 floating 元素瞬移到 body 下对应容器中, 当 floating 元素 z-index 层级出问题时开启此项
+     */
+    teleported: {
+        type: Boolean,
+        default: true,
+    },
+
+    /**
+     * @description 是否在 floating 元素上创建小箭头
+     */
+    showArrow: Boolean,
+
+    /**
+     * @description floating 元素容器的类
+     */
+    floatingClass: String,
+
+    /**
+     * @description 动态 reference 元素, 注意，此项优先级小于 slot.reference
+     */
+    reference: Object as PropType<PFloatingProps['reference']>,
+
+    /**
+     * @description 是否开启快速跟踪, 当 reference 元素是可以移动的且 floating 元素更不上移动时开启此项
+     */
+    quickTrack: Boolean,
+
+    /**
+     * @description 浮动元素打开时的回调
+     */
+    onOpen: Function as PropType<PFloatingProps['onOpen']>,
+
+    /**
+     * @description 浮动元素打开后的回调
+     */
+    onOpened: Function as PropType<PFloatingProps['onOpened']>,
+
+    /**
+     * @description 浮动元素关闭时的回调
+     */
+    onClose: Function as PropType<PFloatingProps['onClose']>,
+
+    /**
+     * @description 浮动元素关闭后的回调
+     */
+    onClosed: Function as PropType<PFloatingProps['onClosed']>,
+}

package/packages/components/floating/src/floating.vue

@@ -0,0 +1,216 @@
+<template>
+  <p-partial v-if="slots.reference" ref="reference">
+    <slot name="reference"></slot>
+  </p-partial>
+  <div ref="floating" v-bind="useAttrs('scopedOnly').value" :style="_floatingStyles" :class="props.floatingClass">
+    <transition
+        :name="props.transition"
+        @afterEnter="props.onOpened"
+        @afterLeave="props.onClosed"
+    >
+      <div
+          v-if="flag"
+          :class="ns.namespace"
+          v-bind="useAttrs('scoped').value"
+          :data-placement="placement"
+      >
+        <slot></slot>
+        <div v-if="props.showArrow" ref="_arrow" class="p-floating__arrow" :style="arrowStyle"></div>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {toRef} from "vue";
+import {computed, onBeforeUnmount, onMounted, ref, Ref, useSlots, watch} from "vue";
+import {arrow, autoUpdate, flip, offset, shift, useFloating} from "@floating-ui/vue";
+import {unrefElement, useEventListener, useMutationObserver} from "@vueuse/core";
+import PPartial from "../../abstract/src/partial.vue";
+import FloatingProps from "./floating-props";
+import {useAttrs, useFlag, useNS} from "@bin-ui/hooks";
+import {IndexManager} from "@bin-ui/tools";
+
+defineOptions({
+  name: 'PFloating',
+  inheritAttrs: false,
+})
+
+const props = defineProps({...FloatingProps});
+const slots = useSlots();
+
+// slot.reference 优先级高于 props.reference
+const reference: Ref<HTMLElement | null> = slots.reference ? ref(null) : toRef(props, 'reference')
+const floating = ref<HTMLElement | null>(null);
+const _arrow = ref<HTMLElement | null>(null);
+
+const {floatingStyles, placement, middlewareData, update} = useFloating(reference, floating, {
+  placement: props.placement,
+  whileElementsMounted: autoUpdate,
+  middleware: [offset(props.offset), flip(), shift(), arrow({element: _arrow})]
+});
+const {flag, setTrue, setFalse} = useFlag(false);
+
+// 在 floating 不可见时，阻止修改 css 样式
+let _: any;
+const _floatingStyles = computed(() => {
+  if (flag.value) {
+    _ = floatingStyles.value;
+    return floatingStyles.value;
+  } else {
+    return _;
+  }
+})
+
+let openTimer: any;
+let closeTimer: any;
+
+const open = (e?: Event) => {
+  clearTimeout(openTimer);
+  clearTimeout(closeTimer);
+
+  if (flag.value || props.disabled) return
+
+  openTimer = setTimeout(() => {
+    setTrue();
+    floating.value!.style.zIndex = new IndexManager().nextIndex().toString();
+    props.onOpen?.(e);
+  }, props.openDelay)
+}
+
+const close = (e?: Event) => {
+  clearTimeout(openTimer);
+  clearTimeout(closeTimer);
+
+  if (!flag.value) return
+
+  closeTimer = setTimeout(() => {
+    setFalse();
+    props.onClose?.(e);
+  }, props.closeDelay);
+}
+
+const toggle = (e?: Event) => {
+  if (flag.value) {
+    close(e);
+  } else {
+    open(e);
+  }
+}
+
+// 箭头相关
+const arrowStyle = ref<{
+  left: string | undefined
+  top: string | undefined
+  transform: string
+}>({
+  left: undefined,
+  top: undefined,
+  transform: 'translate3d(0,0,0)'
+})
+if (props.showArrow) {
+  watch(() => middlewareData.value.arrow, (val) => {
+    const arrowEl = _arrow.value as HTMLElement;
+    const {x, y} = val!;
+
+    if (!arrowEl) return;
+
+    arrowStyle.value.left = `${x}px`;
+    arrowStyle.value.top = `${y}px`;
+  })
+}
+
+// 当 reference 位置会发生变化且 floating 元素跟不上变化时，开启此项
+if (props.quickTrack) {
+  useMutationObserver(reference, () => {
+    update();
+  }, {
+    attributes: true
+  })
+}
+
+// 可以通过点击 body 关闭 floating
+if (props.closeOnClickBody) {
+  let trigger: Element | null;
+  useEventListener(document.body, 'mousedown', (evt: Event) => {
+    if (!flag.value) return;
+    evt.stopPropagation();
+    trigger = evt.target as Element;
+  })
+  useEventListener(document.body, 'mouseup', (evt: Event) => {
+    if (!flag.value) return;
+    evt.stopPropagation();
+    const floatingEl = unrefElement(floating) as HTMLElement;
+    const referenceEl = unrefElement(reference) as HTMLElement;
+    if (!(floatingEl.contains(trigger) || referenceEl.contains(trigger))) {
+      close(evt);
+    }
+  });
+}
+
+// trigger
+if (props.trigger === 'hover') {
+  useEventListener(reference, 'mouseenter', open);
+  useEventListener(reference, 'mouseleave', close);
+  useEventListener(floating, 'mouseenter', open);
+  useEventListener(floating, 'mouseleave', close);
+}
+
+if (props.trigger === 'click') {
+  useEventListener(reference, 'click', toggle);
+}
+
+if (props.trigger === 'clickToOpen') {
+  useEventListener(reference, 'click', open);
+}
+
+if (props.trigger === 'focus') {
+  useEventListener(reference, 'mousedown', open);
+  useEventListener(document.body, 'mouseup', close);
+}
+
+
+onMounted(() => {
+  // 避免在加载文件时操作dom, ssr友好
+  import("./creat-floating-container.ts").then(() => {
+    if (props.teleported) {
+      const container = document.body.querySelector('.___pixel-floating-container') as HTMLDivElement;
+      container.appendChild(unrefElement(floating)!);
+    }
+  });
+
+  // 是否在挂载后打开
+  if (props.openOnMounted) {
+    open();
+  }
+})
+onBeforeUnmount(() => {
+  if (props.teleported) {
+    const container = document.body.querySelector('.___pixel-floating-container') as HTMLDivElement;
+    container.removeChild(unrefElement(floating)!);
+  }
+})
+
+defineExpose({
+
+  /**
+   * @description 关闭 floating 元素
+   */
+  close,
+
+  /**
+   * @description 打开 floating 元素
+   */
+  open,
+
+  /**
+   * @description 打开/关闭 floating 元素轮循
+   */
+  toggle,
+})
+
+// 样式
+const ns = useNS('floating');
+
+</script>
+

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

@@ -0,0 +1,91 @@
+/*
+ * @description: 浮动（弹出层）类型定义
+ * @author: MC.Yang
+ */
+import {FloatingTrigger, Transition} from "@bin-ui/typings";
+import {Placement} from "@floating-ui/vue";
+
+/**
+ * 浮动 Props
+ */
+export interface PFloatingProps {
+    /**
+     * @description floating 元素的出现的触发方式
+     * @default click
+     */
+    trigger?: FloatingTrigger,
+    /**
+     * @description floating 元素相对于 reference 元素的定位
+     * @default bottom
+     */
+    placement?: Placement,
+    /**
+     * @description floating 元素相对于 reference 元素的偏移
+     * @default 5
+     */
+    offset?: Number,
+    /**
+     * @description floating 元素出现时的过渡
+     * @default p-transition-fade
+     */
+    transition?: Transition,
+    /**
+     * @description floating 元素出现前的延时
+     * @default 0
+     */
+    openDelay?: Number,
+    /**
+     * @description floating元素消失前的延时
+     * @default 0
+     */
+    closeDelay?: Number,
+    /**
+     * @description 是否禁止 floating 元素改变可视状态
+     */
+    disabled?: Boolean,
+    /**
+     * @description 是否可以通过点击 body 来关闭 floating 元素
+     */
+    closeOnClickBody?: Boolean,
+    /**
+     * @description 是否挂载后立即渲染 floating 元素
+     */
+    openOnMounted?: Boolean,
+    /**
+     * @description 是否将 floating 元素瞬移到 body 下对应容器中, 当 floating 元素 z-index 层级出问题时开启此项
+     * @default true
+     */
+    teleported?: Boolean,
+    /**
+     * @description 是否在 floating 元素上创建小箭头
+     */
+    showArrow?: Boolean,
+    /**
+     * @description floating 元素容器的类
+     */
+    floatingClass?: String,
+    /**
+     * @description 动态 reference 元素, 注意，此项优先级小于 slot.reference
+     */
+    reference?: any,
+    /**
+     * @description 是否开启快速跟踪, 当 reference 元素是可以移动的且 floating 元素更不上移动时开启此项
+     */
+    quickTrack?: Boolean,
+    /**
+     * @description 浮动元素打开时的回调
+     */
+    onOpen?: (e?: Event) => void;
+    /**
+     * @description 浮动元素打开后的回调
+     */
+    onOpened?: (e?: Event) => void;
+    /**
+     * @description 浮动元素关闭时的回调
+     */
+    onClose?: (e?: Event) => void;
+    /**
+     * @description 浮动元素关闭后的回调
+     */
+    onClosed?: (e?: Event) => void;
+}

package/packages/components/global.d.ts

@@ -0,0 +1,46 @@
+/*
+ * @description: UI 组件全局声明
+ * @author: MC.Yang
+ */
+
+declare module '@vue/runtime-core' {
+    export interface GlobalComponents {
+        // 抽象组件
+        PPartial: typeof import('./index')['Partial'],
+        // 基础组件
+        PButton: typeof import('./index')['Button'],
+        PIcon: typeof import('./index')['Icon'],
+        PLink: typeof import('./index')['Link'],
+        PFloating: typeof import('./index')['Floating'],
+        PScrollbar: typeof import('./index')['Scrollbar'],
+        // 布局组件
+        PRow: typeof import('./index')['Row'],
+        PCol: typeof import('./index')['Col'],
+        PDivider: typeof import('./index')['Divider'],
+        PLayout: typeof import('./index')['Layout'],
+        // 导航组件
+        PDropdown: typeof import('./index')['Dropdown'],
+        PMenu: typeof import('./index')['Menu'],
+        PTabs: typeof import('./index')['Tabs'],
+        // 消息提醒组件
+        PMessageBox: typeof import('./index')['MessageBox'],
+        PDialog: typeof import('./index')['Dialog'],
+        PDrawer: typeof import('./index')['Drawer'],
+        // 数据展示组件
+        PTooltip: typeof import('./index')['Tooltip'],
+        PBadge: typeof import('./index')['Badge'],
+        PTag: typeof import('./index')['Tag'],
+        // 数据输入组件
+        PInput: typeof import('./index')['Input'],
+        PSwitch: typeof import('./index')['Switch'],
+        PPopconfirm: typeof import('./index')['Popconfirm'],
+    }
+
+    interface ComponentCustomProperties {
+        $message: typeof import('bin-ui')['message'],
+        $notify: typeof import('bin-ui')['notify'],
+        $confirm: typeof import('bin-ui')['confirm'],
+    }
+}
+
+export {}

package/packages/components/grid/index.ts

@@ -0,0 +1,16 @@
+/*
+ * @description: 栅格
+ * @author: MC.Yang
+ */
+import _Row from "./src/row.vue";
+import _Col from "./src/col.vue";
+import {withInstall} from "@bin-ui/tools";
+
+const Row = withInstall(_Row);
+const Col = withInstall(_Col);
+
+export type PRowInstance = InstanceType<typeof _Row>;
+export type PColInstance = InstanceType<typeof _Col>;
+
+export default {Row, Col};
+export {Row, Col};