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

package/packages/components/drawer/src/drawer.vue

@@ -0,0 +1,205 @@
+<template>
+  <teleport to="body" :disabled="!props.appendToBody">
+    <div v-show="visible" ref="container"
+         :class="classes"
+    >
+      <p-message-box
+          ref="messageBox"
+          v-bind="attrs"
+          :class="ns.e('inner')"
+          :transition="props.transition ||defaultTransition"
+          :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"
+          :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>
+          <slot></slot>
+        </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, Ref, watch} from "vue";
+import PMessageBox from "../../message/src/message-box.vue";
+import {unrefElement, useEventListener} from "@vueuse/core";
+import {PDrawerEmits, PDrawerProps} from "./drawer"
+import {PMessageBoxInstance} from "../../message";
+import {useAttrs, useLockScroll, useMark, useNS} from "@bin-ui/hooks";
+import {MessageTriggerTypes} from "@bin-ui/typings";
+import {IndexManager} from "@bin-ui/tools";
+
+defineOptions({
+  name: "PDrawer",
+  inheritAttrs: false
+})
+
+const ns = useNS('drawer');
+const props = defineProps({...PDrawerProps});
+const emits = defineEmits<PDrawerEmits>();
+const attrs = useAttrs('scoped');
+
+const classes = computed(() => {
+  return [
+    ns.namespace,
+    ns.m(props.position),
+    ns.is('part', props.part),
+  ]
+})
+
+const messageBox: Ref<PMessageBoxInstance | null> = ref(null);
+const container: Ref<HTMLElement | null> = ref(null);
+
+const indexManager = new IndexManager();
+const visible: Ref<Boolean> = ref(props.modelValue);
+// 标志 modelValue 是外部修改还是事件提交导致的修改
+let changedBySystem = true;
+
+const {lockScroll, unLockScroll} = useLockScroll();
+const {mark, hiddenMark, showMark} = useMark(container, props.part ? 'part' : 'cover');
+
+// 默认过渡通过 position 计算
+const defaultTransition = computed(() => {
+  switch (props.position) {
+    case 'top':
+      return 'p-transition-fadeDown--completely'
+    case 'right':
+      return 'p-transition-fadeLeft--completely'
+    case 'bottom':
+      return 'p-transition-fadeUp--completely'
+    case 'left':
+      return 'p-transition-fadeRight--completely'
+  }
+})
+
+// 打开时的回调,所有状态设置为 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/dropdown/index.ts

@@ -0,0 +1,16 @@
+/*
+ * @description: 下拉菜单
+ * @author: MC.Yang
+ */
+import _Dropdown from "./src/dropdown.vue";
+import _DropdownItem from "./src/dropdown-item.vue";
+import {withInstall} from "@bin-ui/tools";
+
+const Dropdown = withInstall(_Dropdown);
+const DropdownItem = withInstall(_DropdownItem);
+
+export type PDropdownInstance = InstanceType<typeof _Dropdown>;
+export type PDropdownItemInstance = InstanceType<typeof _DropdownItem>;
+
+export default {Dropdown};
+export {Dropdown, DropdownItem};

package/packages/components/dropdown/src/dropdown-item.ts

@@ -0,0 +1,95 @@
+/*
+ * @description: 下拉菜单项
+ * @author: MC.Yang
+ */
+import {PropType} from "vue";
+import {TargetType} from "@bin-ui/typings";
+
+/**
+ * 下拉菜单项 Props
+ */
+export const PDropdownItemProps = {
+
+    /**
+     * @description 下拉框子项的前缀图标
+     */
+    suffixIcon: String,
+
+    /**
+     * @description 下拉框子项的后缀图标
+     */
+    prefixIcon: String,
+
+    /**
+     * @description 下拉框子项显示的文本
+     */
+    label: String,
+
+    /**
+     * @description 下拉框子项的 value
+     */
+    value: String,
+
+    /**
+     * @description 是否点击下拉框子项时关闭下拉框
+     */
+    closeOnClick: {
+        type: Boolean,
+        default: true,
+    },
+
+    /**
+     * @description 下拉框子项是否是活跃状态
+     */
+    active: Boolean,
+
+    /**
+     * @description 下拉框子项是否是禁用状态
+     */
+    disabled: Boolean,
+
+    /**
+     * @description 下拉框子项的自定义标签
+     */
+    tag: {
+        type: String as PropType<'span' | 'p-link'>,
+        default: 'span'
+    },
+
+    /**
+     * @description 下拉框子项标签为 p-link 时, 跳转的地址
+     */
+    href: String,
+
+    /**
+     * @description 下拉框子项标签为 p-link 时, 跳转的方式
+     */
+    target: {
+        type: String as PropType<TargetType>,
+        default: '_self',
+        validator(val: TargetType): boolean {
+            if (!val) return true;
+            return ['_blank', '_self', '_parent', '_top'].includes(val);
+        },
+    }
+}
+
+/**
+ * 下拉菜单项事件
+ */
+export interface PDropdownItemEmits {
+
+    /**
+     * @description 选中事件
+     * @param e select
+     * @param value props.value
+     */
+    (e: 'select', value: string | undefined): void;
+
+    /**
+     * @description 点击事件
+     * @param e click
+     */
+    (e: 'click'): void;
+
+}

package/packages/components/dropdown/src/dropdown-item.vue

@@ -0,0 +1,65 @@
+<template>
+  <li>
+    <component
+        v-bind="$attrs"
+        :class="classes"
+        :is="props.tag"
+        :data-center="isCenter"
+        :href="props.href"
+        :target="props.target"
+        @click="handleClick"
+    >
+      <p-icon :target="props.prefixIcon"></p-icon>
+      <span v-if="$slots?.default"><slot></slot></span>
+      <span v-else>{{ props.label }}</span>
+      <p-icon :target="props.suffixIcon"></p-icon>
+    </component>
+  </li>
+</template>
+
+<script setup lang="ts">
+import {computed, inject, Ref, warn} from "vue";
+import PIcon from "../../icon/src/icon.vue";
+import {PDropdownItemEmits, PDropdownItemProps} from "./dropdown-item";
+import {useNS} from "@bin-ui/hooks";
+
+defineOptions({
+  name: 'PDropdownItem',
+  inheritAttrs: false
+})
+
+const ns = useNS('dropdown-item');
+const props = defineProps({...PDropdownItemProps});
+const emits = defineEmits<PDropdownItemEmits>();
+
+const classes = computed(() => {
+  return [
+    ns.namespace,
+    ns.is('active', props.active),
+    ns.is('disabled', props.disabled),
+  ]
+})
+
+const inDropdown = inject('inDropdown') as Boolean | undefined;
+const isCenter = inject('isCenter') as Ref<Boolean | undefined>;
+const dropdownItemClick = inject('dropdownItemClick') as (val: string | undefined) => void;
+const close = inject('dropdownClose') as () => {}
+
+if (inDropdown === undefined) {
+  warn('[dropdown-item] 组件应该在下拉组件中');
+}
+
+const handleClick = () => {
+  dropdownItemClick(props.value);
+  emits("select", props.value);
+  emits('click');
+
+  if (props.closeOnClick && !props.disabled) {
+    close();
+  }
+}
+
+</script>
+
+
+

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

@@ -0,0 +1,172 @@
+/*
+ * @description: 下拉菜单
+ * @author: MC.Yang
+ */
+import {PropType} from "vue";
+import {Placement} from "@floating-ui/vue";
+import {FloatingTrigger, Transition} from "@bin-ui/typings";
+
+/*
+ * 下拉菜单 Props
+ */
+export const PDropdownProps = {
+    /*以下是 floating 属性*/
+    /**
+     * @description 下拉框触发方式
+     */
+    trigger: {
+        type: String as PropType<FloatingTrigger>,
+        default: "click"
+    },
+
+    /**
+     * @description 下拉框相对于引用元素的定位
+     */
+    placement: {
+        type: String as PropType<Placement>,
+        default: "bottom"
+    },
+
+    /**
+     * @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 下拉框相对于引用元素的偏移量
+     */
+    offset: {
+        type: Number,
+        default: 10,
+    },
+
+    /**
+     * @description 是否可以通过点击页面来关闭下拉框
+     */
+    closeOnClickBody: Boolean,
+
+    /**
+     * @description 是否在挂载后立即出现
+     */
+    openOnMounted: Boolean,
+
+    /**
+     * @description 是否瞬移到到 floating container 元素下面
+     */
+    teleported: {
+        type: Boolean,
+        default: true,
+    },
+
+    /**
+     * @description 是否展示小箭头
+     */
+    showArrow: {
+        type: Boolean,
+        default: true
+    },
+
+    /**
+     * @description 最外层元素的类
+     */
+    floatingClass: String,
+
+    /**
+     * @description 当没有传递 reference slot 时, 此项作用
+     */
+    reference: Object as PropType<any>,
+
+    /**
+     * @description 是否开启快速跟踪, 当 reference 元素可以移动且 floating 元素更不上时开启此项
+     */
+    quickTrack: Boolean,
+
+    /*以下是 scrollbar 属性*/
+    /**
+     * @description 下拉框的大小是否不会再改变, 开启此项优化部分性能
+     */
+    scrollbarNoResize: Boolean,
+
+    /**
+     * @description 滚动条定位在元素外面
+     */
+    scrollbarIsOutside: Boolean,
+
+    /*以下是 dropdown 属性*/
+    /**
+     * @description 所有 item 内元素居中显示
+     */
+    center: Boolean,
+    activeColor: String,
+
+    /**
+     * @description 是否在点击任意 Item 后关闭下拉框
+     */
+    closeOnClickItem: {
+        type: Boolean,
+        default: true,
+    },
+
+}
+
+/*
+ * 下拉菜单事件
+ */
+export interface PDropdownEmits {
+
+    /**
+     * @description 选中事件, 任意 dropdownItem 触发 select 事件都会触发此事件
+     * @param e select
+     * @param value dropdownItem 的 value
+     */
+    (e: 'select', value: string): void;
+
+    /**
+     * @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/dropdown/src/dropdown.vue

@@ -0,0 +1,109 @@
+<template>
+  <p-floating
+      ref="floating"
+      v-bind="useAttrs('scopedOnly').value"
+      :class="ns.namespace"
+      :style="style"
+      :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.reference">
+      <slot name="reference"></slot>
+    </template>
+
+    <template #default>
+      <p-scrollbar
+          v-bind="useAttrs('scoped').value"
+          :class="ns.e('wrapper')"
+          :no-resize="props.scrollbarNoResize"
+          :is-outside="props.scrollbarIsOutside"
+      >
+        <ul :class="ns.e('inner')">
+          <slot></slot>
+        </ul>
+      </p-scrollbar>
+    </template>
+  </p-floating>
+</template>
+
+<script setup lang="ts">
+import {computed, provide, ref, useSlots} from "vue";
+import PFloating from "../../floating/src/floating.vue";
+import PScrollbar from "../../scrollbar/src/scrollbar.vue";
+import {PDropdownEmits, PDropdownProps} from "./dropdown";
+import {PFloatingInstance} from "../../floating";
+import {useAttrs, useNS} from "@bin-ui/hooks";
+import {getClrVar} from "@bin-ui/tools";
+
+defineOptions({
+  name: 'PDropdown',
+  inheritAttrs: false
+})
+
+const ns = useNS('dropdown');
+const props = defineProps({...PDropdownProps});
+const emits = defineEmits<PDropdownEmits>();
+const slots = useSlots();
+
+const style = computed(() => {
+  return {
+    [ns.cssVar('active-color')]: props.activeColor ?? getClrVar('primary'),
+    [ns.cssVar('justify')]: props.center ? 'center' : 'start',
+  }
+})
+
+const floating = ref<PFloatingInstance | null>(null);
+
+const open = () => floating.value!.open();
+const close = () => floating.value!.close();
+const toggle = () => floating.value!.toggle();
+
+provide('inDropdown', true);
+provide('isCenter', props.center);
+provide('dropdownItemClick', (val: string) => {
+  emits("select", val);
+});
+provide('dropdownClose', () => {
+  if (props.closeOnClickItem) {
+    close();
+  }
+})
+
+defineExpose({
+
+  /**
+   * @description 关闭下拉框
+   */
+  close,
+
+  /**
+   * @description 打开下拉框
+   */
+  open,
+
+  /**
+   * @description 打开/关闭下拉框轮循
+   */
+  toggle,
+})
+
+</script>
+
+
+