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

package/packages/components/message/src/message-box.ts

@@ -0,0 +1,168 @@
+/*
+ * @description: 消息盒子
+ * @author: MC.Yang
+ */
+import {PropType} from "vue";
+import {ElementSizes, ElementTypes, MessageTriggerTypes, Transition} from "@bin-ui/typings";
+
+/**
+ * 消息盒子 Props
+ */
+export const PMessageBoxProps = {
+
+    /**
+     * @description 消息框的类型
+     */
+    type: String as PropType<ElementTypes>,
+
+    /**
+     * @description 消息框图标
+     */
+    icon: String,
+
+    /**
+     * @description 消息框图标的颜色
+     */
+    iconColor: String,
+
+    /**
+     * @description 消息头的标题
+     */
+    title: {
+        type: String,
+        default: 'default title'
+    },
+
+    /**
+     * @description 消息体的文本
+     */
+    text: String,
+
+    /**
+     * @description 消息框的过渡动画
+     */
+    transition: {
+        type: String as PropType<Transition>,
+        default: 'p-transition-fadeDown'
+    },
+
+    /**
+     * @description 是否可以通过按下 ESC 来关闭消息框
+     */
+    closeOnPressEscape: {
+        type: Boolean,
+        default: true,
+    },
+
+    /**
+     * @description 消息框是否可以被拖动
+     */
+    draggable: Boolean,
+
+    /**
+     * @description 消息框距离浏览器视口顶部的距离
+     */
+    top: {
+        type: String,
+    },
+
+    /**
+     * @description 是否去除消息头
+     */
+    noHeader: Boolean,
+
+    /**
+     * @description 是否去除消息体
+     */
+    noBody: Boolean,
+
+    /**
+     * @description 是否去除消息尾
+     */
+    noFooter: Boolean,
+
+    /**
+     * @description 是否显示消息头中的关闭图标
+     */
+    showCloseIcon: Boolean,
+
+    /**
+     * @description 消息尾中取消按钮的文本
+     */
+    cancelBtnText: {
+        type: String,
+        default: '取消'
+    },
+
+    /**
+     * @description 消息尾中确认按钮的文本
+     */
+    confirmBtnText: {
+        type: String,
+        default: '确认',
+    },
+
+    /**
+     * @description 消息尾中按钮的大小
+     */
+    btnSize: {
+        type: String as PropType<ElementSizes>,
+        default: "small"
+    },
+
+    /**
+     * @description 消息框关闭事件前的回调函数，若设置此项, 需要手动调用done函数关闭消息框
+     */
+    beforeClose: Function as PropType<(done: () => void) => void>
+
+}
+
+/**
+ * 消息盒子事件
+ */
+export interface PMessageBoxEmits {
+
+    /**
+     * @description 消息框关闭时触发
+     * @param e close
+     * @param trigger 消息触发类型
+     */
+    (e: 'close', trigger: MessageTriggerTypes): void;
+
+    /**
+     * @description 消息框关闭后触发
+     * @param e closed
+     */
+    (e: 'closed'): void;
+
+    /**
+     * @description 消息框打开触发
+     * @param e open
+     */
+    (e: 'open'): void;
+
+    /**
+     * @description 消息框打开后触发
+     * @param e opened
+     */
+    (e: 'opened'): void;
+
+    /**
+     * @description 按下消息尾中的取消按钮后触发
+     * @param e cancel
+     */
+    (e: 'cancel'): void;
+
+    /**
+     * @description 按下消息尾中的确认按钮后触发
+     * @param e confirm
+     */
+    (e: 'confirm'): void;
+
+    /**
+     * (关闭，取消，确认)对话框时触发的事件
+     * @param e hidden
+     */
+    (e: 'hidden'): void;
+
+}

package/packages/components/message/src/message-box.vue

@@ -0,0 +1,204 @@
+<template>
+  <transition
+      :name="props.transition"
+      @afterEnter="emits('opened')"
+      @afterLeave="emits('closed')"
+  >
+    <div v-show="visFlag" ref="outer"
+         v-bind="useAttrs('scoped').value"
+         :class="classes"
+         :style="`top:${props.top}`"
+         tabindex="0"
+         @keydown.esc="close('esc')"
+    >
+      <p-icon :target="props.icon || props.type" :color="msgIconColor" :class="ns.e('icon')"></p-icon>
+      <div :class="[MessageNS.namespace, ns.e('inner')]">
+        <div v-if="!props.noHeader" ref="header"
+             :class="[
+						MessageNS.e('header'),
+						MessageNS.em('header', 'default', !$slots.header),
+					]"
+        >
+          <template v-if="!$slots.header">
+            <h1 :class="MessageNS.ee('header', 'title')">{{ props.title }}</h1>
+            <p-icon v-if="props.showCloseIcon" ref="closeIcon"
+                    :class="MessageNS.ee('header', 'icon')"
+                    target="close"
+                    tabindex="0"
+                    @click="close('icon')"
+            ></p-icon>
+          </template>
+          <slot name="header"/>
+        </div>
+        <div v-if="!props.noBody" ref="body" :class="MessageNS.e('body')">
+          <slot></slot>
+          <template v-if="props.text">
+            <div :class="MessageNS.e('text')">
+              {{ props.text }}
+            </div>
+          </template>
+        </div>
+        <div ref="footer" v-if="!props.noFooter"
+             :class="[
+						 MessageNS.e('footer'),
+						 MessageNS.em('footer', 'default', !$slots.footer),
+					]"
+        >
+          <template v-if="!$slots.footer">
+            <div :class="MessageNS.em('footer', 'default')">
+              <p-button :size="props.btnSize" type="cyan" variant="ghost" @click="cancel">
+                {{ props.cancelBtnText }}
+              </p-button>
+              <p-button :size="props.btnSize" type="primary" @click="confirm">{{ props.confirmBtnText }}
+              </p-button>
+            </div>
+          </template>
+          <slot name="footer"/>
+        </div>
+      </div>
+    </div>
+  </transition>
+  <!--	draggable container -->
+  <div ref="drag" :style="`top:${props.top}`" v-if="props.draggable" class="p-message-draggable-container">
+  </div>
+</template>
+
+<script setup lang="ts">
+import {PMessageBoxEmits, PMessageBoxProps} from "./message-box";
+import {computed, nextTick, Ref, ref} from "vue";
+import PIcon from "../../icon/src/icon.vue";
+import PButton from "../../button/src/button.vue";
+import {PIconInstance} from "../../icon";
+import {MessageTriggerTypes} from "@bin-ui/typings";
+import {useAttrs, useDraggable, useFlag, useNS} from "@bin-ui/hooks";
+import {fnUnion, getClrVar, throttle} from "@bin-ui/tools";
+
+defineOptions({
+  name: 'PMessageBox',
+  inheritAttrs: false
+})
+
+const MessageNS = useNS('message');
+const ns = useNS('message-box');
+const props = defineProps({...PMessageBoxProps});
+const emits = defineEmits<PMessageBoxEmits>();
+
+const classes = computed(() => {
+  return [
+    ns.namespace,
+    ns.m(props.type)
+  ]
+})
+
+const closeIcon: Ref<PIconInstance | null> = ref(null);
+const outer: Ref<HTMLElement | undefined> = ref(undefined);
+const header: Ref<HTMLElement | undefined> = ref(undefined);
+const drag: Ref<HTMLElement | undefined> = ref(undefined);
+
+const msgIconColor = computed(() => {
+  if (props.iconColor) return props.iconColor;
+  switch (props.type) {
+    case 'success':
+      return getClrVar("success");
+    case 'info':
+      return getClrVar("info");
+    case 'warning':
+      return getClrVar("warning");
+    case 'danger':
+      return getClrVar("danger");
+  }
+})
+
+let {flag: visFlag, setTrue, setFalse} = useFlag(false);
+useDraggable(drag, header, computed(() => {
+  return props.draggable
+}));
+
+// 打开消息框
+const open = fnUnion(setTrue, async () => {
+  emits("open");
+  if (props.draggable) drag.value!.appendChild(outer.value!);
+
+  await nextTick();
+
+  outer.value?.focus();
+  closeIcon.value?.$el.focus();
+});
+
+// 关闭消息框
+const close = throttle(function (trigger: MessageTriggerTypes = 'system') {
+  const done = function () {
+    hidden();
+    emits('close', trigger);
+  }
+
+  if (!props.closeOnPressEscape && trigger === 'esc') return;
+
+  props.beforeClose ? props.beforeClose(done) : done();
+
+}, 500);
+
+// 前两者轮换
+const toggle = function () {
+  if (visFlag.value) {
+    close('system');
+  } else {
+    open();
+  }
+}
+
+const hidden = fnUnion(setFalse, () => {
+  emits('hidden');
+})
+
+// 取消消息框
+const cancel = throttle(function () {
+  hidden();
+  emits("cancel");
+}, 500);
+
+// 确认消息框
+const confirm = throttle(function () {
+  hidden();
+  emits('confirm');
+}, 500);
+
+defineExpose({
+
+  /**
+   * @description func, 打开消息框, 会触发 open 事件
+   */
+  open,
+
+  /**
+   * @description func, 关闭消息框, 会触发 close 事件
+   */
+  close,
+
+  /**
+   * @description func, 关闭消息框, 无副作用
+   */
+  hidden,
+
+  /**
+   * @description func, 关闭/打开消息框, 会触发事件
+   */
+  toggle,
+
+  /**
+   * @description func, 关闭消息框, 触发 cancel 事件
+   */
+  cancel,
+
+  /**
+   * @description func, 关闭消息框, 触发 confirm 事件
+   */
+  confirm,
+
+})
+
+</script>
+
+
+
+

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

@@ -0,0 +1,111 @@
+/*
+ * @description: 消息
+ * @author: MC.Yang
+ */
+import {App, createApp} from "vue";
+import {delay, IndexManager, LayoutManager} from "@bin-ui/tools";
+import {ElementTypes} 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 消息的存活时间
+     */
+    timeout: number,
+
+    /**
+     * @description 距离上一个消息的间距
+     */
+    offset: number,
+
+    /**
+     * @description 显示关闭图标
+     */
+    showCloseIcon: Boolean,
+}
+
+// 管理 notify 的位移
+const autoLayoutDown = new LayoutManager('down');
+
+/**
+ * 异步消息
+ * @param options 选项
+ */
+export default async function (options: Partial<options>) {
+    const {timeout = 3000, offset = 10} = options;
+    const app: App<Element> = createApp(MessageBox, {
+        type: options.type,
+        icon: options.icon,
+        iconColor: options.color,
+        title: options.text,
+        noFooter: true,
+        noBody: true,
+        showCloseIcon: options.showCloseIcon,
+        transition: 'p-transition-messageOnly',
+        onClose() {
+            // 上一个节点聚焦
+            (autoLayoutDown.getEl(autoLayoutDown.getIndexOf(mountTo) - 1)?.firstElementChild as HTMLElement)?.focus();
+            autoLayoutDown.delete(mountTo);
+            delay(500).then(() => {
+                appendTo.removeChild(mountTo);
+                app.unmount();
+            })
+        }
+    });
+    const mountTo: HTMLElement = document.createElement('div');
+    const appendTo: HTMLElement = document.body;
+    const vm = app.mount(mountTo) as PMessageBoxInstance;
+
+    initMountTo(mountTo, offset);
+    appendTo.appendChild(mountTo);
+
+    vm.open();
+    autoLayoutDown.push(mountTo);
+
+    // 不会自动关闭
+    if (timeout === 0) {
+        return
+    }
+
+    await delay(timeout);
+    vm.close('system');
+}
+
+/**
+ * 初始化消息的容器元素
+ * @param el HTMLElement
+ * @param offset 距离上一个消息的间距
+ */
+const initMountTo = function (el: HTMLElement, offset: number) {
+    el.classList.add('pos-top-center');
+    el.classList.add('p-message-container')
+    el.setAttribute('data-space', offset.toString());
+    el.style.top = `${autoLayoutDown.nextPos()}px`;
+    el.style.zIndex = new IndexManager().nextIndex().toString();
+}
+
+

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

@@ -0,0 +1,179 @@
+/*
+ * @description: 消息通知
+ * @author: MC.Yang
+ */
+import {createApp} from "vue";
+import {delay, IndexManager, LayoutManager} from "@bin-ui/tools";
+import {ElementTypes} from "@bin-ui/typings";
+import {MessageBox, PMessageBoxInstance} from "../index.ts";
+
+/**
+ * 通知位置
+ */
+type positions = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
+
+/**
+ * 通知选项
+ */
+interface options {
+
+    /**
+     * @description 通知的类型
+     */
+    type: ElementTypes,
+
+    /**
+     * @description 自定义通知的图标
+     */
+    icon: string,
+
+    /**
+     * @description 自定义图标的颜色
+     */
+    color: string,
+
+    /**
+     * @description 通知的标题
+     */
+    title: string,
+
+    /**
+     * @description 通知的主体
+     */
+    text: string,
+
+    /**
+     * @description 通知的存活时间
+     */
+    timeout: number,
+
+    /**
+     * @description 距离上一个通知的间距
+     */
+    offset: number,
+
+    /**
+     * @description 通知的方位
+     */
+    placement: positions
+}
+
+// 管理 notify 的位移
+const autoLayoutDown = new LayoutManager('down');
+const autoLayoutDown2 = new LayoutManager('down');
+const autoLayoutUp = new LayoutManager('up');
+const autoLayoutUp2 = new LayoutManager('up');
+
+/**
+ * @description 向管理器中添加节点
+ * @param el HTMLElement
+ * @param placement 通知位置
+ */
+const push = function (el: HTMLElement, placement: positions) {
+    if (placement === 'top-right') {
+        autoLayoutDown.push(el);
+    } else if (placement === 'bottom-right') {
+        autoLayoutUp.push(el);
+    } else if (placement === 'top-left') {
+        autoLayoutDown2.push(el);
+    } else if (placement === 'bottom-left') {
+        autoLayoutUp2.push(el);
+    }
+}
+
+
+// el 的上一个元素聚焦
+const previousEleFocus = function (layout: LayoutManager, el: HTMLElement) {
+    const previousPos = layout.getIndexOf(el) - 1;
+    (layout.getEl(previousPos)?.firstElementChild as HTMLElement)?.focus()
+
+}
+
+/**
+ * @description 从管理器中删除节点
+ * @param mountTo HTMLElement
+ * @param placement 通知位置
+ */
+const del = function (mountTo: HTMLElement, placement: positions) {
+    if (placement === 'top-right') {
+        previousEleFocus(autoLayoutDown, mountTo);
+        autoLayoutDown.delete(mountTo);
+    } else if (placement === 'bottom-right') {
+        previousEleFocus(autoLayoutUp, mountTo);
+        autoLayoutUp.delete(mountTo);
+    } else if (placement === 'top-left') {
+        previousEleFocus(autoLayoutDown2, mountTo);
+        autoLayoutDown2.delete(mountTo);
+    } else if (placement === 'bottom-left') {
+        previousEleFocus(autoLayoutUp2, mountTo);
+        autoLayoutUp2.delete(mountTo);
+    }
+}
+
+/**
+ * 异步信息通知
+ * @param options 选项
+ */
+export default async function (options: Partial<options>) {
+    const {timeout = 3000, placement = 'top-right', offset = 10} = options;
+    const app = createApp(MessageBox, {
+        type: options.type,
+        icon: options.icon,
+        iconColor: options.color,
+        title: options.title,
+        text: options.text,
+        noFooter: true,
+        showCloseIcon: true,
+        transition: placement.includes('right') ? 'p-transition-fadeLeft--completely' : 'p-transition-fadeRight--completely',
+        onClose() {
+            del(mountTo, placement);
+            delay(500).then(() => {
+                appendTo.removeChild(mountTo);
+                app.unmount();
+            })
+        }
+    });
+    const mountTo = document.createElement('div');
+    const appendTo = document.body;
+
+    const vm = app.mount(mountTo) as PMessageBoxInstance;
+    initMountTo(mountTo, placement, offset);
+    appendTo.appendChild(mountTo);
+
+    vm.open();
+
+    push(mountTo, placement);
+
+    // 不会自动关闭
+    if (timeout === 0) {
+        return;
+    }
+
+    await delay(timeout);
+    vm.close('system');
+}
+
+
+/**
+ * @description 初始化消息的容器元素
+ * @param el HTMLElement
+ * @param placement 通知位置
+ * @param offset 距离上一个通知的间距
+ */
+const initMountTo = function (el: HTMLElement, placement: string, offset: number) {
+    el.classList.add(`pos-${placement}`);
+    el.setAttribute('data-space', offset.toString());
+
+    // 修改即将出现的 el 的位移
+    if (placement === 'top-right') {
+        el.style.top = `${autoLayoutDown.nextPos()}px`;
+    } else if (placement === 'top-left') {
+        el.style.top = `${autoLayoutDown2.nextPos()}px`;
+    } else if (placement === 'bottom-right') {
+        el.style.bottom = `${autoLayoutUp.nextPos()}px`;
+    } else if (placement === 'bottom-left') {
+        el.style.bottom = `${autoLayoutUp2.nextPos()}px`;
+    }
+    el.classList.add('p-notify-container');
+    el.style.zIndex = new IndexManager().nextIndex().toString();
+}

package/packages/components/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "@bin-ui/components",
+  "main": "index.ts",
+  "private": true,
+  "dependencies": {}
+}

package/packages/components/popconfirm/index.ts

@@ -0,0 +1,13 @@
+/*
+ * @description: 气泡确认框
+ * @author: MC.Yang
+ */
+import _Popconfirm from "./src/popconfirm.vue";
+import {withInstall} from "@bin-ui/tools";
+
+const Popconfirm = withInstall(_Popconfirm);
+
+export type PPopconfirmInstance = InstanceType<typeof _Popconfirm>;
+
+export default {Popconfirm};
+export {Popconfirm};