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

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

@@ -0,0 +1,85 @@
+<template>
+  <li
+      :class="classes"
+      @click="handleClick"
+  >
+    <component v-if="icons" :is="icons[0]"/>
+
+    <template v-if="props.routerLink">
+      <a
+          :href="props.href || (props.to ? props.router?.resolve(to).href : '')"
+          :target="props.target"
+          :class="ns.m('link')"
+          @click.prevent
+      >
+        <span :class="ns.m('contents')">
+          <component v-for="item in contents" :is="item"/>
+        </span>
+      </a>
+    </template>
+
+    <template v-else-if="props.href">
+      <a
+          :href="props.href"
+          :target="props.target"
+          :class="ns.m('link')"
+          @click="props.disabled && $event.preventDefault()"
+      >
+        <span :class="ns.m('contents')">
+          <component v-for="item in contents" :is="item"/>
+        </span>
+      </a>
+    </template>
+
+    <template v-else>
+      <span :class="ns.m('contents')">
+          <component v-for="item in contents" :is="item"/>
+      </span>
+    </template>
+  </li>
+</template>
+
+<script setup lang="ts">
+import {computed, inject} from "vue";
+import MenuItemProps from "./menu-item-props";
+import {PMenuInterface, PSubMenuInterface} from "./type";
+import {useNS} from "@bin-ui/hooks";
+import {useContent, usePNode} from "@bin-ui/tools/element/render-node";
+
+defineOptions({
+  name: "PMenuItem",
+  inheritAttrs: false
+})
+
+const props = defineProps({...MenuItemProps});
+
+const renderPNode = usePNode();
+const renderContent = useContent();
+const icons = renderPNode('icon');
+const contents = renderContent('default', 'content');
+
+const active = computed(() => menu?.activeValue.value === props.value);
+
+const menu = inject<PMenuInterface>('PMenu');
+const submenu = inject<PSubMenuInterface | null>('PSubmenu', null);
+
+// 处理点击事件
+function handleClick(e: MouseEvent) {
+  e.stopPropagation();
+  if (props.disabled) return;
+  if (props.value && menu?.activeValue.value !== props.value) {
+    menu?.select(props.value);
+    props.onClick?.({e: e, value: props.value});
+  }
+  submenu?.closeParentPopup?.(e);
+}
+
+// 样式
+const ns = useNS('menu__item');
+const classes = computed(() => [
+  ns.namespace,
+  ns.is(active.value, 'active'),
+  ns.is(props.disabled, 'disabled'),
+]);
+
+</script>

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

@@ -0,0 +1,98 @@
+/*
+ * @description: 导航菜单
+ * @author: MC.Yang
+ */
+import {PropType} from "vue";
+import {PMenuProps} from "./type";
+
+/*
+ * 导航菜单 Props
+ */
+export default {
+
+    /**
+     * @description 是否收起菜单
+     */
+    collapsed: Boolean,
+
+    /**
+     * @description 子菜单展开的导航集合
+     */
+    expanded: {
+        type: Array as PropType<PMenuProps['expanded']>,
+        default: undefined as PMenuProps['expanded'],
+    },
+
+    /**
+     * @description 同级别互斥展开
+     * */
+    expandMutex: Boolean,
+
+    /**
+     * @description 二级菜单展开方式，平铺展开和浮层展开
+     */
+    expandType: {
+        type: String as PropType<PMenuProps['expandType']>,
+        default: 'normal' as PMenuProps['expandType'],
+        validator(val: PMenuProps['expandType']): boolean {
+            if (!val) return true;
+            return ['normal', 'popup'].includes(val);
+        },
+    },
+
+    /**
+     * @description 站点 LOGO
+     */
+    logo: {
+        type: Function as PropType<PMenuProps['logo']>,
+    },
+
+    /**
+     * @description 导航操作区域
+     */
+    operations: {
+        type: Function as PropType<PMenuProps['operations']>,
+    },
+
+    /**
+     * @description 菜单风格
+     */
+    theme: {
+        type: String as PropType<PMenuProps['theme']>,
+        default: 'light' as PMenuProps['theme'],
+        validator(val: PMenuProps['theme']): boolean {
+            if (!val) return true;
+            return ['light', 'dark'].includes(val);
+        },
+    },
+
+    /**
+     * @description 激活菜单项
+     */
+    value: {
+        type: [String, Number] as PropType<PMenuProps['value']>,
+        default: undefined as PMenuProps['value'],
+    },
+    modelValue: {
+        type: [String, Number] as PropType<PMenuProps['value']>,
+        default: undefined as PMenuProps['value'],
+    },
+
+    /**
+     * @description 菜单宽度。值类型为数组时，分别表示菜单展开和折叠的宽度。[ 展开时的宽度, 折叠时的宽度 ]，示例：['200px', '80px']
+     */
+    width: {
+        type: [String, Number, Array] as PropType<PMenuProps['width']>,
+        default: '232px',
+    },
+
+    /**
+     * @description 激活菜单项发生变化时触发
+     */
+    onChange: Function as PropType<PMenuProps['onChange']>,
+
+    /**
+     * @description 展开的菜单项发生变化时触发
+     */
+    onExpand: Function as PropType<PMenuProps['onExpand']>,
+}

package/packages/components/menu/src/menu.vue

@@ -0,0 +1,110 @@
+<template>
+  <div :class="classes" :style="styles">
+    <div :class="ns.e('inner')">
+      <div v-if="logo" :class="ns.e('logo')">
+        <component :is="logo[0]"/>
+      </div>
+      <ul :class="urlClasses">
+        <slot></slot>
+      </ul>
+      <div v-if="operations" :class="ns.e('operations')">
+        <component v-for="item in operations" :is="item"/>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {computed, provide, ref} from "vue";
+import {toRefs} from "vue";
+import {useNS} from "@bin-ui/hooks";
+import MenuProps from "./menu-props";
+import VMenu from "./v-menu";
+import {MenuValue, PMenuInterface, OpenType} from "./type";
+import useVModel from "@bin-ui/hooks/useVModel";
+import useDefaultValue from "@bin-ui/hooks/useDefaultValue";
+import {isArray, isNumber, px} from "@bin-ui/tools";
+import {useContent, usePNode} from "@bin-ui/tools/element/render-node";
+
+defineOptions({
+  name: "PMenu",
+  inheritAttrs: false
+})
+
+const props = defineProps({...MenuProps});
+
+const renderPNode = usePNode();
+const renderContent = useContent();
+const operations = renderContent('operations', 'options');
+const logo = renderPNode('logo');
+
+const {value, modelValue, expanded} = toRefs(props);
+const [activeValue, setActiveValue] = useVModel(value, modelValue, undefined, props.onChange);
+const [expandValues, setExpanded] = useDefaultValue(expanded, undefined, props.onExpand, 'expanded');
+const activeValues = ref([]);
+const mode = ref(props.expandType);
+const theme = computed(() => props.theme);
+const isMutex = computed(() => props.expandMutex);
+const collapsed = computed(() => props.collapsed);
+
+const vMenu = new VMenu({isMutex: isMutex.value, expandValues: expandValues?.value});
+provide<PMenuInterface>('PMenu', {
+  activeValue,
+  activeValues,
+  expandValues,
+  mode,
+  theme,
+  isHead: false,
+  vMenu,
+  collapsed,
+  select: (value: MenuValue) => {
+    if (value !== activeValue.value) {
+      setActiveValue(value);
+    }
+  },
+  open: (value: MenuValue, type?: OpenType) => {
+    if (mode.value === 'normal') {
+      setExpanded(vMenu.expand(value));
+    } else if (type === 'add') {
+      if (expandValues?.value?.indexOf(value) === -1) {
+        // 可能初始 expanded 里包含了该 value
+        setExpanded([...expandValues.value, value]);
+      }
+    } else if (type === 'remove' && expandValues?.value) {
+      const index = expandValues.value.indexOf(value);
+      const tmp = [...expandValues.value];
+      tmp.splice(index, 1);
+      setExpanded(tmp);
+    }
+  },
+})
+
+// 样式
+const ns = useNS('menu');
+const classes = computed(() => {
+  return [
+    ns.namespace,
+    ns.m(props.theme),
+    ns.is(props.collapsed, 'collapsed'),
+  ]
+})
+const urlClasses = computed(() => {
+  return [
+    ns.namespace,
+    ns.m('scroll'),
+  ]
+})
+const styles = computed(() => ({
+  height: '100%',
+  width: props.collapsed ? expandWidth.value[1] : expandWidth.value[0],
+}));
+const expandWidth = computed(() => {
+  const {width} = props;
+  if (!width) return [px(64)];
+  const format = (val: string | number) => (isNumber(val) ? px(val) : val);
+  if (isArray(width)) return width.map((item) => format(item));
+
+  return [format(width), px(64)];
+});
+
+</script>

package/packages/components/menu/src/submenu-props.ts

@@ -0,0 +1,58 @@
+/*
+ * @description: 导航子菜单
+ * @author: MC.Yang
+ */
+import {PropType} from "vue";
+import {PSubmenuProps} from "./type";
+
+/*
+ * 导航子菜单 Props
+ */
+export default {
+    /**
+     * @description 菜单项内容
+     */
+    content: {
+        type: [String, Function] as PropType<PSubmenuProps['content']>,
+    },
+
+    /**
+     * @description 菜单项内容，同 content
+     */
+    default: {
+        type: [String, Function] as PropType<PSubmenuProps['default']>,
+    },
+
+    /**
+     * @description 是否禁用菜单项展开/收起/跳转等功能
+     */
+    disabled: Boolean,
+
+    /**
+     * @description 菜单项图标
+     */
+    icon: {
+        type: Function as PropType<PSubmenuProps['icon']>,
+    },
+
+    /**
+     * @description 透传 PFloatingProps 组件全部特性
+     */
+    popupProps: {
+        type: Object as PropType<PSubmenuProps['popupProps']>,
+    },
+
+    /**
+     * @description 二级菜单内容
+     */
+    title: {
+        type: [String, Function] as PropType<PSubmenuProps['title']>,
+    },
+
+    /**
+     * @description 菜单项唯一标识
+     */
+    value: {
+        type: [String, Number] as PropType<PSubmenuProps['value']>,
+    },
+};

package/packages/components/menu/src/submenu.vue

@@ -0,0 +1,270 @@
+<template>
+  <li :class="classes" v-on="events">
+    <template v-if="Object.keys(instance?.slots as any).length > 0">
+      <template v-if="menu?.isHead">
+        <template v-if="mode === 'normal'">
+          <div :class="submenuClass" ref="submenuRef" @click="handleSubmenuItemClick">
+            <component v-if="icons" :is="icons[0]"/>
+            <span :class="ns.e('content')">
+              <component v-if="isVNode(titles[0])" :is="titles[0]"/>
+              <template v-else>
+                {{ titles[0] }}
+              </template>
+            </span>
+          </div>
+          <ul style="opacity: 0; width: 0; height: 0; overflow: hidden">
+            <component v-for="item in contents" :is="item"/>
+          </ul>
+        </template>
+        <template v-else>
+          <!-- popup 待开发 -->
+        </template>
+      </template>
+      <template v-else>
+        <template v-if="mode === 'normal'">
+          <div :class="submenuClass" ref="submenuRef" @click="handleSubmenuItemClick">
+            <component v-if="icons" :is="icons[0]"/>
+            <span :class="ns.e('content')">
+              <component v-if="isVNode(titles[0])" :is="titles[0]"/>
+              <template v-else>
+                {{ titles[0] }}
+              </template>
+            </span>
+          </div>
+          <Transition
+              name="p-slide-down"
+              @onBeforeEnter="beforeEnter"
+              @onEnter="enter"
+              @onAfterEnter="afterEnter"
+              @onBeforeLeave="beforeLeave"
+              @onLeave="leave"
+              @onAfterLeave="afterLeave"
+          >
+            <ul v-show="isOpen" :class="subClass" style="padding-left:44px">
+              <component v-for="item in contents" :is="item"/>
+            </ul>
+          </Transition>
+        </template>
+        <template v-else>
+          <!-- popup 待开发 -->
+        </template>
+      </template>
+    </template>
+  </li>
+</template>
+
+<script setup lang="ts">
+import {computed, getCurrentInstance, inject, isVNode, nextTick, onMounted, provide, ref, watch} from "vue";
+import {reactive, toRefs} from "vue";
+import {useNS} from "@bin-ui/hooks";
+import SubmenuProps from "./submenu-props";
+import {MenuValue, PMenuInterface, PMenuItem, PSubMenuInterface} from "./type";
+import useCollapseAnimation from "@bin-ui/hooks/useCollapseAnimation";
+import {useContent, usePNode} from "@bin-ui/tools/element/render-node";
+
+defineOptions({
+  name: "PSubmenu",
+  inheritAttrs: false
+})
+
+const props = defineProps({...SubmenuProps});
+
+const instance = getCurrentInstance();
+const renderPNode = usePNode();
+const renderContent = useContent();
+const icons = renderPNode('icon');
+const titles = renderPNode('title');
+const contents = renderContent('default', 'content');
+
+const {value} = toRefs(props);
+const menu = inject<PMenuInterface>('PMenu');
+const submenu = inject<PSubMenuInterface>('PSubmenu', {});
+const {
+  beforeEnter, enter, afterEnter, beforeLeave, leave, afterLeave,
+} = useCollapseAnimation();
+const mode = computed(() => instance?.attrs.expandType || menu?.mode.value);
+
+const menuItems = ref<Array<PMenuItem>>([]);
+const popupWrapperRef = ref<HTMLElement>();
+const subPopupRef = ref<HTMLElement>();
+const submenuRef = ref<HTMLElement>();
+
+const isNested = ref(false);
+
+const popupVisible = ref(false);
+const isCursorInPopup = ref(false);
+
+const isActive = computed(() => {
+  if (menu?.activeValues && props.value) {
+    return menu.activeValues.value.indexOf(props.value) > -1;
+  }
+  return false
+});
+
+const isOpen = computed(() => {
+  if (menu?.mode.value === 'popup') {
+    return popupVisible.value;
+  }
+  if (menu?.expandValues?.value && props.value) {
+    return menu.expandValues.value.includes(props.value);
+  }
+  return false;
+});
+
+// 传递子元素给父节点
+const passSubPopupRefToParent = (val: HTMLElement | undefined) => {
+  if (val) {
+    submenu.setSubPopup?.(val);
+  }
+};
+
+// 处理鼠标移入
+const handleMouseEnter = () => {
+  if (props.disabled) return;
+  setTimeout(() => {
+    if (!popupVisible.value) {
+      menu?.open?.(props.value as MenuValue);
+      // popupVisible 设置为 TRUE 之后打开 popup，因此需要在 nextTick 中确保可以拿到 ref 值
+      nextTick(() => {
+        passSubPopupRefToParent(popupWrapperRef.value);
+      });
+    }
+    popupVisible.value = true;
+  }, 0);
+};
+
+// 处理鼠标移开
+const handleMouseLeave = (e: MouseEvent) => {
+  setTimeout(() => {
+    const inPopup = targetInPopup(e.relatedTarget as HTMLElement);
+    if (isCursorInPopup.value || inPopup) return;
+    popupVisible.value = false;
+  }, 0);
+};
+
+// 处理进入 Popup 逻辑
+const handleEnterPopup = () => {
+  isCursorInPopup.value = true;
+};
+
+// 处理离开 Popup 逻辑
+const handleMouseLeavePopup = (e: any) => {
+  const {toElement, relatedTarget} = e;
+  let target = toElement || relatedTarget;
+
+  if (target === subPopupRef.value) return;
+
+  const isSubmenu = (el: Element) => el === submenuRef.value;
+  while (target !== null && target !== document && !isSubmenu(target)) {
+    target = target.parentNode;
+  }
+
+  isCursorInPopup.value = false;
+
+  if (!isSubmenu(target)) {
+    popupVisible.value = false;
+  }
+
+  submenu.closeParentPopup?.(e);
+};
+
+// 处理点击子菜单
+const handleSubmenuItemClick = () => {
+  if (props.disabled) return;
+  menu?.open?.(props.value as MenuValue);
+};
+
+// 根据 mode 设置事件对象
+const events = computed(() => {
+  if (mode.value === 'popup') {
+    return {
+      mouseenter: handleMouseEnter,
+      mouseleave: handleMouseLeave,
+    };
+  }
+  return {};
+});
+
+const targetInPopup = (el: HTMLElement) => el?.classList.contains("p-menu__popup");
+
+const loopInPopup = (el: HTMLElement): boolean => {
+  if (!el || el.parentElement == null) return false;
+  return targetInPopup(el) || loopInPopup(el.parentElement);
+};
+
+provide<PSubMenuInterface>(
+    'PSubmenu',
+    reactive({
+      value,
+      addMenuItem: (item: PMenuItem) => {
+        menuItems.value.push(item);
+        if (submenu) {
+          submenu.addMenuItem?.(item);
+        }
+      },
+      setSubPopup: (ref: HTMLElement) => {
+        subPopupRef.value = ref;
+      },
+      closeParentPopup: (e: MouseEvent) => {
+        const related = e.relatedTarget as HTMLElement;
+        if (loopInPopup(related)) return;
+        handleMouseLeavePopup(e);
+      },
+    }),
+);
+
+watch(popupWrapperRef, () => {
+  passSubPopupRefToParent(popupWrapperRef.value);
+});
+
+onMounted(() => {
+  menu?.vMenu?.add({
+    value: props.value,
+    parent: submenu?.value,
+    vNode: instance?.slots.default,
+  });
+
+  let node = instance?.parent;
+
+  while (node?.type.name && !/^t(head)?menu/i.test(node.type.name)) {
+    if (/submenu/i.test(node.type.name)) {
+      isNested.value = true;
+      break;
+    }
+    node = node?.parent;
+  }
+});
+
+// 样式
+const ns = useNS('menu');
+const classes = computed(() => [
+  'p-submenu',
+  ns.is(props.disabled, 'disabled'),
+  ns.is(isOpen.value, 'opened'),
+]);
+const submenuClass = computed(() => [
+  ns.e('item'),
+  ns.eb('item', 'spacer'),
+  ns.eb('item', 'spacer') + `--${menu?.isHead && !isNested.value ? 'bottom' : 'right'}`,
+  ns.is(props.disabled, 'disabled'),
+  ns.is(isOpen.value, 'opened'),
+  ns.is(isActive.value, 'active'),
+]);
+const overlayInnerClassName = computed(() => [
+  ns.e('popup'),
+  ns.is(menu?.isHead ? menu.isHead : false, 'horizontal'),
+  ns.is(menu?.isHead ? !menu.isHead : false, 'vertical'),
+  ns.is(popupVisible.value, 'opened'),
+]);
+const overlayClassName = computed(() => [
+  ns.m(menu?.theme ? menu.theme.value : 'light'),
+  ns.is(menu ? menu.isHead : false, 'head-menu'),
+  ns.is(isNested.value, 'menu-nested'),
+  props.popupProps?.floatingClass,
+]);
+const subClass = computed(() => [
+  ns.e('sub'),
+  ns.is(isOpen.value, 'opened'),
+]);
+
+</script>