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

package/packages/components/dialog/src/dialog.vue

@@ -0,0 +1,193 @@
+<!-- 包裹额外一层 div 的原因是 mark 是 fixed, fixed 的父元素不能有 transform 属性-->
+<template>
+  <teleport to="body" :disabled="!props.appendToBody">
+    <div
+        v-show="visible"
+        ref="container"
+        :class="classes"
+    >
+      <p-message-box
+          ref="messageBox"
+          v-bind="useAttrs('scoped').value"
+          :class="ns.e('inner')"
+          :transition="props.transition || 'p-transition-fadeDown'"
+          :title="props.title"
+          :no-header="props.noHeader"
+          :no-body="props.noBody"
+          :no-footer="props.noFooter"
+          :show-close-icon="props.showCloseIcon"
+          :cancel-btn-text="props.cancelBtnText"
+          :confirm-btn-text="props.confirmBtnText"
+          :btn-size="props.btnSize"
+          :close-on-press-escape="props.closeOnPressEscape"
+          :draggable="props.draggable"
+          :top="props.top"
+          :before-close="props.beforeClose"
+          @cancel="onCancel"
+          @confirm="onConfirm"
+          @open="onOpen"
+          @opened="opened"
+          @close="onClose"
+          @closed="closed"
+          @hidden="onHidden"
+      >
+        <template #header v-if="$slots.header">
+          <slot name="header"/>
+        </template>
+        <template #default v-if="$slots.default">
+          <slot name="default"/>
+        </template>
+        <template #footer v-if="$slots.footer">
+          <slot name="footer"/>
+        </template>
+      </p-message-box>
+    </div>
+  </teleport>
+</template>
+
+<script setup lang="ts">
+import {computed, nextTick, onMounted, ref, watch} from "vue";
+import PMessageBox from "../../message/src/message-box.vue";
+import {unrefElement, useEventListener} from "@vueuse/core";
+import {PDialogEmits, PDialogProps} from "./dialog"
+import {PMessageBoxInstance} from "../../message";
+import {IndexManager} from "@bin-ui/tools";
+import {MessageTriggerTypes} from "@bin-ui/typings";
+import {useAttrs, useLockScroll, useMark, useNS} from "@bin-ui/hooks";
+
+defineOptions({
+  name: 'PDialog',
+  inheritAttrs: false,
+})
+
+const ns = useNS('dialog');
+const props = defineProps({...PDialogProps});
+const emits = defineEmits<PDialogEmits>();
+
+const classes = computed(() => {
+  return [
+    ns.namespace,
+    ns.is(props.part, 'part')
+  ]
+})
+
+const messageBox = ref<PMessageBoxInstance | null>(null);
+const container = ref<HTMLElement | null>(null);
+
+const {lockScroll, unLockScroll} = useLockScroll();
+const {mark, hiddenMark, showMark} = useMark(container, props.part ? "part" : 'cover');
+
+const indexManager = new IndexManager();
+const visible = ref<Boolean>(props.modelValue);
+// 标志 modelValue 是外部修改还是事件提交导致的修改
+let changedBySystem = true;
+
+// 打开时的回调,所有状态设置为true
+const onOpen = function () {
+  visible.value = true;
+  changedBySystem = true;
+  emits("update:modelValue", true);
+  emits('open');
+  unrefElement(container)!.style.zIndex = indexManager.nextIndex().toString();
+  if (props.lockScroll && !props.part) lockScroll();
+  if (props.modal) showMark();
+}
+
+const onClose = function (trigger: MessageTriggerTypes) {
+  emits('close', trigger);
+}
+
+/** （关闭, 取消， 确认）的回调，状态设置为 false
+ * visible 在打开后设置以， 确保过渡的话正常执行
+ * 解锁浏览器滚动在打开后设置， 确保消息框过渡时不会抖动
+ */
+const onHidden = function () {
+  changedBySystem = false;
+  emits('hidden');
+  emits('update:modelValue', false);
+  if (props.modal) hiddenMark();
+}
+
+const onCancel = function () {
+  emits('cancel');
+}
+
+const onConfirm = function () {
+  emits('confirm');
+}
+
+const opened = function () {
+  emits('opened');
+}
+
+const closed = function () {
+  if (props.lockScroll && !props.part) unLockScroll();
+  visible.value = false;
+  emits("closed");
+}
+
+const modelToTrue = async function () {
+  // 当 container 是 v-if 展示时，messageBox 要等待下一个 tick 才能获取到
+  await nextTick();
+  messageBox.value!.open();
+}
+
+const modelToFalse = function () {
+  if (changedBySystem) {
+    messageBox.value!.close('system');
+    changedBySystem = false;
+    return;
+  }
+  messageBox.value!.hidden();
+}
+
+
+// 不使用立即监听， 改成挂载后执行，挂载前 messageBox 不能访问
+watch(() => props.modelValue, newVal => newVal ? modelToTrue() : modelToFalse());
+onMounted(() => {
+  if (props.modelValue) modelToTrue();
+})
+
+// 是否点击遮罩关闭元素
+if (props.closeOnClickMark && props.modal) {
+  useEventListener(mark, 'click', () => {
+    messageBox.value!.close("mark")
+  })
+}
+
+defineExpose({
+
+  /**
+   * @description func, 打开消息框, 会触发 open 事件
+   */
+  open: () => messageBox.value!.open(),
+
+  /**
+   * @description func, 关闭消息框, 会触发 close 事件
+   */
+  close: (trigger: MessageTriggerTypes) => messageBox.value!.close(trigger),
+
+  /**
+   * @description func, 关闭消息框, 无副作用
+   */
+  hidden: () => messageBox.value!.hidden(),
+
+  /**
+   * @description func, 关闭/打开消息框, 无副作用
+   */
+  toggle: () => messageBox.value!.toggle(),
+
+  /**
+   * @description func, 关闭消息框, 触发 cancel 事件
+   */
+  cancel: () => messageBox.value!.cancel(),
+
+  /**
+   * @description func, 关闭消息框, 触发 confirm 事件
+   */
+  confirm: () => messageBox.value!.confirm(),
+
+})
+
+</script>
+

package/packages/components/divider/index.ts

@@ -0,0 +1,13 @@
+/*
+ * @description: 分割线
+ * @author: MC.Yang
+ */
+import _Divider from "./src/divider.vue";
+import {withInstall} from "@bin-ui/tools";
+
+const Divider = withInstall(_Divider);
+
+export type PDividerInstance = InstanceType<typeof _Divider>;
+
+export default {Divider};
+export {Divider};

package/packages/components/divider/src/divider.ts

@@ -0,0 +1,71 @@
+/*
+ * @description: 分割线
+ * @author: MC.Yang
+ */
+import {PropType} from "vue";
+
+/**
+ * 分割方向
+ */
+type Direction = 'vertical' | 'horizontal';
+/**
+ * 分割线类型
+ */
+type Type = 'dashed' | 'solid';
+/**
+ * 分割线文本所处位置
+ */
+type PDividerContentPosition = 'start' | 'center' | 'end' | string;
+
+/*
+ * 分割线 Props
+ */
+export const PDividerProps = {
+
+    /**
+     * @description 分割线的方向. 此项不具备响应式，请确保该值不会被改变
+     */
+    direction: {
+        type: String as PropType<Direction>,
+        default: 'horizontal'
+    },
+
+    /**
+     * @description 分割线的类型
+     */
+    status: {
+        type: String as PropType<Type>,
+        default: 'solid'
+    },
+
+    /**
+     * @description 分割线分割出来的宽度/高度
+     */
+    gap: {
+        type: Number,
+    },
+
+    /**
+     * @description 分割线的文本
+     */
+    text: String,
+
+    /**
+     * @description 分割线文本所处的位置. 此项不具备响应式，请确保该值不会被改变
+     */
+    placement: {
+        type: String as PropType<PDividerContentPosition>,
+        default: 'center'
+    },
+
+    /**
+     * @description 分割线文本的前缀图标
+     */
+    prefixIcon: String,
+
+    /**
+     * @description 分割线文本的后缀图标
+     */
+    suffixIcon: String,
+
+}

package/packages/components/divider/src/divider.vue

@@ -0,0 +1,56 @@
+<template>
+  <div
+      ref="divider"
+      :class="classes"
+      :style="style"
+  >
+		<span :class="ns.e('content')" ref="content">
+			<p-icon :target="props.prefixIcon"></p-icon>
+			<template v-if="slots.default">
+				<slot></slot>
+			</template>
+			<template v-else>{{ props.text }}</template>
+			<p-icon :target="props.suffixIcon"></p-icon>
+		</span>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {computed, ref, useSlots} from "vue";
+import PIcon from "../../icon/src/icon.vue";
+import {MaybeElement} from "@vueuse/core";
+import {PDividerProps} from "./divider";
+import {useNS} from "@bin-ui/hooks";
+import {px} from "@bin-ui/tools";
+
+defineOptions({
+  name: 'p-divider',
+  inheritAttrs: true
+})
+
+const ns = useNS('divider');
+const props = defineProps({...PDividerProps});
+const slots = useSlots();
+
+const classes = computed(() => {
+  return [
+    ns.namespace,
+    ns.m(props.status),
+    ns.m(props.direction),
+    ns.m(props.placement)
+  ]
+})
+
+const style = computed(() => {
+  return {
+    [ns.cssVar('gap')]: px(props.gap, 15),
+    [ns.cssVar('placement')]: props.placement,
+  }
+})
+
+const content = ref<HTMLElement | undefined>(undefined);
+const divider = ref<MaybeElement>(undefined);
+
+</script>
+
+

package/packages/components/drawer/index.ts

@@ -0,0 +1,13 @@
+/*
+ * @description: 抽屉
+ * @author: MC.Yang
+ */
+import _Drawer from "./src/drawer.vue";
+import {withInstall} from "@bin-ui/tools";
+
+const Drawer = withInstall(_Drawer);
+
+export type PDrawerInstance = InstanceType<typeof _Drawer>;
+
+export default {Drawer};
+export {Drawer};

package/packages/components/drawer/src/drawer.ts

@@ -0,0 +1,196 @@
+/*
+ * @description: 抽屉
+ * @author: MC.Yang
+ */
+import {PropType} from "vue";
+import {ElementSizes, MessageTriggerTypes, Transition} from "@bin-ui/typings";
+
+/**
+ * 抽屉的弹出方位
+ */
+type positions = 'top' | 'right' | 'bottom' | 'left';
+
+/**
+ * 抽屉 Props
+ */
+export const PDrawerProps = {
+
+    /**
+     * @description 对话框打开/关闭的绑定值
+     */
+    modelValue: {
+        type: Boolean,
+        default: false,
+    },
+
+    /**
+     * @description 抽屉的弹出方位
+     */
+    position: {
+        type: String as PropType<positions>,
+        default: 'top',
+    },
+
+    /**
+     * @description 抽屉的过渡动画, 默认适应 position
+     */
+    transition: {
+        type: String as PropType<Transition>,
+    },
+
+    /**
+     * @description 抽屉消息头的标题
+     */
+    title: {
+        type: String,
+        default: 'default title'
+    },
+
+    /**
+     * @description 是否可以通过按下ESC来关闭对话框
+     */
+    closeOnPressEscape: {
+        type: Boolean,
+        default: true,
+    },
+
+    /**
+     * @description 在显示遮罩的情况下, 是否可以通过点击遮罩关闭对话框
+     */
+    closeOnClickMark: {
+        type: Boolean,
+        default: true,
+    },
+
+    /**
+     * @description 是否去除消息头
+     */
+    noHeader: Boolean,
+
+    /**
+     * @description 是否去除消息体
+     */
+    noBody: Boolean,
+
+    /**
+     * @description 是否去除消息尾
+     */
+    noFooter: Boolean,
+
+    /**
+     * @description 是否显示消息头中的关闭图标
+     */
+    showCloseIcon: {
+        type: Boolean,
+        default: true,
+    },
+
+    /**
+     * @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>,
+
+    /**
+     * @description 是否显示遮罩
+     */
+    modal: {
+        type: Boolean,
+        default: true,
+    },
+
+    /**
+     * @description 对话框出现时, 是否禁止浏览器的滚动行为
+     */
+    lockScroll: {
+        type: Boolean,
+        default: true,
+    },
+
+    /**
+     * @description 是否挂载到 body 元素下面, 在层级混乱时开启此项
+     */
+    appendToBody: Boolean,
+    part: Boolean
+
+}
+
+/**
+ * 抽屉事件
+ */
+export interface PDrawerEmits {
+
+    /**
+     * @description 更新 modelValue
+     * @param e update:modelValue
+     * @param _ 值
+     */
+    (e: 'update:modelValue', _: boolean): void;
+
+    /**
+     * @description 打开抽屉时触发的事件
+     * @param e open
+     */
+    (e: 'open'): void;
+
+    /**
+     * @description 打开抽屉后触发的事件
+     * @param e opened
+     */
+    (e: 'opened'): void;
+
+    /**
+     * @description 关闭抽屉时触发的事件
+     * @param e close
+     * @param trigger 触发器
+     */
+    (e: 'close', trigger: MessageTriggerTypes): void;
+
+    /**
+     * @description 关闭抽屉后触发的事件
+     * @param e closed
+     */
+    (e: 'closed'): void;
+
+    /**
+     * @description 取消抽屉时触发的事件
+     * @param e cancel
+     */
+    (e: 'cancel'): void;
+
+    /**
+     * @description 确认抽屉时触发的事件
+     * @param e confirm
+     */
+    (e: 'confirm'): void;
+
+    /**
+     * @description (关闭，取消，确认)抽屉时触发的事件
+     * @param e hidden
+     */
+    (e: 'hidden'): void;
+
+}