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

package/packages/components/popconfirm/src/popconfirm.ts

@@ -0,0 +1,188 @@
+/*
+ * @description: 气泡确认框
+ * @author: MC.Yang
+ */
+import {PropType} from "vue";
+import {Placement} from "@floating-ui/vue";
+import {ElementTypes, FloatingTrigger, Transition} from "@bin-ui/typings";
+
+/*
+ * 气泡确认框 Props
+ */
+export const PPopconfirmProps = {
+
+    /**
+     * @description 气泡确认框出现的触发方式
+     */
+    trigger: {
+        type: String as PropType<FloatingTrigger>,
+        default: "clickToOpen"
+    },
+
+    /**
+     * @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: 0
+    },
+
+    /**
+     * @description 气泡确认框消失前的延时
+     */
+    closeDelay: {
+        type: Number,
+        default: 0
+    },
+
+    /**
+     * @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 气泡确认框显示的文本
+     */
+    text: String,
+
+
+    /**
+     * @description 气泡确认框的类型
+     */
+    type: String as PropType<ElementTypes>,
+
+    /**
+     * @description 气泡确认框取消按钮的文本
+     */
+    cancelBtnText: {
+        type: String,
+        default: '取消'
+    },
+
+    /**
+     * @description 气泡确认框确认按钮的文本
+     */
+    confirmBtnText: {
+        type: String,
+        default: '确认'
+    },
+
+    /**
+     * @description 自定义气泡确认框图标
+     */
+    icon: String,
+
+    /**
+     * @description 自定义图标颜色
+     */
+    iconColor: String
+
+}
+
+/**
+ * 气泡确认框事件
+ */
+export interface PPopconfirmEmits {
+
+    /**
+     * @description 消息框关闭时触发
+     * @param e close
+     */
+    (e: 'close'): 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;
+
+}

package/packages/components/popconfirm/src/popconfirm.vue

@@ -0,0 +1,98 @@
+<template>
+  <p-floating
+      ref="floating"
+      v-bind="useAttrs('scoped').value"
+      :class="ns.namespace"
+      :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="handleOpen"
+      @opened="emits('opened')"
+      @close="emits('close')"
+      @closed="emits('closed')"
+  >
+    <template #reference v-if="slots.default">
+      <slot></slot>
+    </template>
+
+    <template #default>
+      <p-message-box
+          ref="messageBox"
+          :class="ns.e('inner')"
+          :transition="props.transition"
+          :type="props.type"
+          :cancel-btn-text="props.cancelBtnText"
+          :confirm-btn-text="props.confirmBtnText"
+          :title="props.text"
+          :icon="props.icon"
+          :icon-color="props.iconColor"
+          @close="handleClose"
+          @cancel="handleCancel"
+          @confirm="handleConfirm"
+      >
+      </p-message-box>
+    </template>
+  </p-floating>
+</template>
+
+<script setup lang="ts">
+import {nextTick, ref, useSlots} from "vue";
+import PFloating from "../../floating/src/floating.vue";
+import PMessageBox from "../../message/src/message-box.vue";
+import {PPopconfirmEmits, PPopconfirmProps} from "./popconfirm";
+import {PMessageBoxInstance} from "../../message";
+import {PFloatingInstance} from "../../floating";
+import {useAttrs, useNS} from "@bin-ui/hooks";
+
+defineOptions({
+  name: 'p-popconfirm',
+  inheritAttrs: false
+})
+
+const ns = useNS('popconfirm');
+const props = defineProps({...PPopconfirmProps});
+const emits = defineEmits<PPopconfirmEmits>();
+const slots = useSlots();
+
+const messageBox = ref<PMessageBoxInstance | undefined>(undefined);
+const floating = ref<PFloatingInstance | undefined>(undefined);
+
+const handleOpen = () => {
+  emits('open');
+  nextTick().then(() => {
+    messageBox.value!.open();
+  })
+}
+
+const _ = () => {
+  messageBox.value!.open();
+  floating.value!.close();
+}
+
+const handleClose = () => {
+  _();
+  emits('close')
+}
+
+const handleCancel = () => {
+  _();
+  emits("cancel")
+}
+
+const handleConfirm = () => {
+  _();
+  emits("confirm")
+}
+
+</script>

package/packages/components/scrollbar/index.ts

@@ -0,0 +1,13 @@
+/*
+ * @description: 滚动条
+ * @author: MC.Yang
+ */
+import _Scrollbar from "./src/scrollbar.vue";
+import {withInstall} from "@bin-ui/tools";
+
+const Scrollbar = withInstall(_Scrollbar);
+
+export type PScrollbarInstance = InstanceType<typeof _Scrollbar>;
+
+export default {Scrollbar};
+export {Scrollbar};

package/packages/components/scrollbar/src/scrollbar.ts

@@ -0,0 +1,54 @@
+/*
+ * @description: 滚动条
+ * @author: MC.Yang
+ */
+
+/*
+ * 滚动条 Props
+ */
+export const PScrollbarProps = {
+
+    /**
+     * @description 视口大小是否不再改变
+     */
+    noResize: Boolean,
+
+    /**
+     * @description 滚动条是否始终显示
+     */
+    always: Boolean,
+
+    /**
+     * @description 是否使用原生滚动条
+     */
+    native: Boolean,
+
+    /**
+     * @description 滚动条是否显示在视口外面
+     */
+    isOutside: Boolean,
+
+    /**
+     * @description 是否开启跳转
+     */
+    quickJump: {
+        type: Boolean,
+        default: true,
+    },
+
+}
+
+/**
+ * 滚动条事件
+ */
+export interface PScrollbarEmits {
+
+    /**
+     * @description 当触发滚动事件时，返回滚动的距离
+     * @param e scroll
+     * @param scrollLeft 左右滚动
+     * @param scrollTop 上下滚动
+     */
+    (e: 'scroll', scrollLeft: number, scrollTop: number): void;
+
+}

package/packages/components/scrollbar/src/scrollbar.vue

@@ -0,0 +1,277 @@
+<template>
+  <div
+      :class="ns.namespace"
+      :data-always="props.always"
+      :data-native="props.native"
+  >
+    <div ref="wrap"
+         :class="ns.e('wrapper')"
+    >
+      <slot></slot>
+    </div>
+    <template v-if="!props.native">
+      <div ref="barY"
+           :class="[
+				 ns.e('bar'),
+				 ns.is('vertical'),
+				 ns.is(props.isOutside, 'outside'),
+				 ns.is(active === 1, 'active')
+			 ]"
+      >
+        <div ref="thumbY"
+             :class="[ns.e( 'thumb'),ns.is('round') ]"
+             :style="thumbYStyle">
+        </div>
+      </div>
+      <div ref="barX"
+           :class="[
+				 ns.e('bar'),
+				 ns.is('horizontal'),
+				 ns.is(props.isOutside, 'outside'),
+				 ns.is(active === 2, 'active')
+			 ]"
+      >
+        <div ref="thumbX"
+             :class="[ns.e( 'thumb'),ns.is('round') ]"
+             :style="thumbXStyle">
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {ref} from "vue";
+import {PScrollbarEmits, PScrollbarProps} from "./scrollbar";
+import {unrefElement, useEventListener, useMutationObserver, useResizeObserver} from "@vueuse/core";
+import {useNS} from "@bin-ui/hooks";
+
+defineOptions({
+  name: 'PScrollbar',
+  inheritAttrs: true,
+})
+
+const ns = useNS('scrollbar');
+const props = defineProps({...PScrollbarProps});
+const emits = defineEmits<PScrollbarEmits>();
+
+const wrap = ref<HTMLElement | undefined>(undefined);
+const thumbY = ref<HTMLElement | undefined>(undefined);
+const barY = ref<HTMLElement | undefined>(undefined);
+const thumbX = ref<HTMLElement | undefined>(undefined);
+const barX = ref<HTMLElement | undefined>(undefined);
+
+const active = ref(0);
+let flag: 'thumbX' | 'thumbY';
+
+// 垂直滑块的大小， 位置
+const thumbYStyle = ref({
+  top: '0',
+  right: '0',
+  height: '0',
+});
+
+// 水平滑块的大小，位置
+const thumbXStyle = ref({
+  bottom: '0',
+  left: '0',
+  width: '0',
+})
+
+// 记录滑块移动的偏移量
+const offset = {
+  x: 0,
+  y: 0
+};
+
+// 记录点击的坐标
+const down = {
+  x: 0,
+  y: 0
+};
+
+// 记录移动距离
+const move = {
+  x: 0,
+  y: 0
+};
+
+// 记录滑块原本位置
+const origin = {
+  x: 0,
+  y: 0
+}
+
+const handleMove = (evt: MouseEvent) => {
+  move.x = evt.clientX;
+  move.y = evt.clientY;
+
+  offset.x = move.x - down.x;
+  offset.y = move.y - down.y;
+
+  const wrapEl = unrefElement(wrap) as HTMLElement;
+  const barYEl = unrefElement(barY) as HTMLElement;
+  const barXEl = unrefElement(barX) as HTMLElement;
+  const wrapHeight = wrapEl!.scrollHeight;
+  const wrapWidth = wrapEl!.scrollWidth;
+  const barHeight = barYEl!.offsetHeight;
+  const barWidth = barXEl!.offsetWidth;
+
+  if (flag === 'thumbY') {
+    unrefElement(wrap)!.scrollTop = wrapHeight * offset.y / barHeight + origin.y;
+  } else if (flag === 'thumbX') {
+    unrefElement(wrap)!.scrollLeft = wrapWidth * offset.x / barWidth + origin.x;
+  }
+}
+
+const handleClick = (evt: MouseEvent) => {
+  if (evt.target !== evt.currentTarget) return;
+  evt.stopPropagation();
+
+  const wrapEl = unrefElement(wrap) as HTMLElement;
+  const barYEl = unrefElement(barY) as HTMLElement;
+  const thumbYEl = unrefElement(thumbY) as HTMLElement;
+  const thumbXEl = unrefElement(thumbX) as HTMLElement;
+  const barXEl = unrefElement(barX) as HTMLElement;
+  const wrapHeight = wrapEl!.scrollHeight;
+  const wrapWidth = wrapEl!.scrollWidth;
+  const barHeight = barYEl!.offsetHeight;
+  const barWidth = barXEl!.offsetWidth;
+
+  offset.y = evt.clientY - barYEl!.getBoundingClientRect().top - thumbYEl!.offsetHeight / 2;
+  offset.x = evt.clientX - barXEl!.getBoundingClientRect().left - thumbXEl!.offsetWidth / 2;
+
+  offset.y = Math.min(Math.max(0, offset.y), barYEl!.offsetHeight - thumbYEl!.offsetHeight);
+  offset.x = Math.min(Math.max(0, offset.x), barXEl!.offsetWidth - thumbXEl!.offsetWidth);
+
+  if (flag === 'thumbY') {
+    unrefElement(wrap)!.scrollTo({
+      top: wrapHeight * offset.y / barHeight,
+      behavior: 'smooth'
+    })
+  } else if (flag === 'thumbX') {
+    unrefElement(wrap)!.scrollTo({
+      left: wrapWidth * offset.x / barWidth,
+      behavior: 'smooth'
+    })
+  }
+}
+
+// 计算滑块大小
+const computedThumbSize = () => {
+  if (props.native) return
+
+  const wrapEl = unrefElement(wrap) as HTMLElement;
+  const barYEl = unrefElement(barY) as HTMLElement;
+  const barXEl = unrefElement(barX) as HTMLElement;
+  const {
+    scrollHeight: wrapHeight,
+    scrollWidth: wrapWidth,
+    offsetHeight: viewHeight,
+    offsetWidth: viewWidth
+  } = wrapEl!;
+
+  const barHeight = barYEl!.offsetHeight;
+  const barWidth = barXEl!.offsetWidth;
+
+  const thumbHeight = viewHeight * barHeight / wrapHeight;
+  const thumbWidth = viewWidth * barWidth / wrapWidth;
+
+  // 在不可滚动时，设置滚动条不可见
+  if (thumbHeight === barHeight) {
+    unrefElement(barY)!.style.opacity = '0';
+  } else {
+    unrefElement(barY)!.style.opacity = '';
+  }
+
+  if (thumbWidth === barWidth) {
+    unrefElement(barX)!.style.opacity = '0';
+  } else {
+    unrefElement(barX)!.style.opacity = '';
+  }
+
+  thumbYStyle.value.height = `${thumbHeight}px`;
+  thumbXStyle.value.width = `${thumbWidth}px`;
+}
+
+// 计算滑块位置
+const computedThumbPos = () => {
+  if (props.native) return
+
+  const wrapEl = unrefElement(wrap) as HTMLElement;
+  const barYEl = unrefElement(barY) as HTMLElement;
+  const barXEl = unrefElement(barX) as HTMLElement;
+
+  const {scrollHeight: wrapHeight, scrollWidth: wrapWidth, scrollTop: viewOffsetY, scrollLeft: viewOffsetX} = wrapEl!;
+
+  const barHeight = barYEl!.offsetHeight;
+  const barWidth = barXEl!.offsetWidth;
+
+  const thumbOffsetY = viewOffsetY * barHeight / wrapHeight;
+  const thumbOffsetX = viewOffsetX * barWidth / wrapWidth;
+
+  thumbYStyle.value.top = `${thumbOffsetY}px`;
+  thumbXStyle.value.left = `${thumbOffsetX}px`;
+
+}
+
+// 滑动
+useEventListener(wrap, 'scroll', () => {
+  const el = unrefElement(wrap) as HTMLElement
+  computedThumbPos();
+  emits('scroll', el.scrollLeft, el.scrollTop);
+})
+
+if (props.quickJump) {
+  useEventListener(barY, "click", (evt: MouseEvent) => {
+    flag = 'thumbY';
+    handleClick(evt);
+  });
+  useEventListener(barX, "click", (evt: MouseEvent) => {
+    flag = 'thumbX';
+    handleClick(evt);
+  });
+}
+
+if (!props.noResize) {
+  // 监听元素大小变化
+  useResizeObserver(wrap, () => {
+    computedThumbPos();
+    computedThumbSize();
+  })
+}
+
+// 监听元素子节点变化
+useMutationObserver(wrap, () => {
+  computedThumbPos();
+  computedThumbSize();
+}, {
+  attributes: true,
+  childList: true,
+  subtree: true,
+})
+
+useEventListener(thumbY, "mousedown", (evt: MouseEvent) => {
+  down.y = evt.clientY;
+  origin.y = unrefElement(wrap)!.scrollTop;
+  flag = 'thumbY';
+  active.value = 1;
+
+  unrefElement(document.body)!.addEventListener('mousemove', handleMove);
+})
+
+useEventListener(thumbX, "mousedown", (evt: MouseEvent) => {
+  down.x = evt.clientX;
+  origin.x = unrefElement(wrap)!.scrollLeft;
+  flag = 'thumbX';
+  active.value = 2;
+
+  unrefElement(document.body)!.addEventListener('mousemove', handleMove);
+})
+
+useEventListener(document.body, 'mouseup', () => {
+  active.value = 0;
+  unrefElement(document.body)!.removeEventListener('mousemove', handleMove);
+})
+
+</script>