refactor: menu

components/menu/src/SubMenu.tsx

@@ -1,5 +1,5 @@
 import PropTypes from '../../_util/vue-types';
-import { computed, defineComponent } from 'vue';
+import { computed, defineComponent, getCurrentInstance, ref } from 'vue';
 import useProvideKeyPath, { useInjectKeyPath } from './hooks/useKeyPath';
 import { useInjectMenu, useProvideFirstLevel } from './hooks/useMenuContext';
 import { getPropsSlot, isValidElement } from 'ant-design-vue/es/_util/props-util';
@@ -20,18 +20,35 @@ export default defineComponent({
   setup(props, { slots, attrs }) {
     useProvideKeyPath();
     useProvideFirstLevel(false);
+    const instance = getCurrentInstance();
+    const key = instance.vnode.key;
     const keyPath = useInjectKeyPath();
     const {
       prefixCls,
       activeKeys,
-      disabled,
+      disabled: contextDisabled,
       changeActiveKeys,
       rtl,
       mode,
       inlineCollapsed,
       antdMenuTheme,
+      openKeys,
+      overflowDisabled,
     } = useInjectMenu();
 
+    const subMenuPrefixCls = computed(() => `${prefixCls}-submenu`);
+    const mergedDisabled = computed(() => contextDisabled.value || props.disabled);
+    const elementRef = ref();
+    const popupRef = ref();
+
+    // // ================================ Icon ================================
+    // const mergedItemIcon = itemIcon || contextItemIcon;
+    // const mergedExpandIcon = expandIcon || contextExpandIcon;
+
+    // ================================ Open ================================
+    const originOpen = computed(() => openKeys.value.includes(key));
+    const open = computed(() => !overflowDisabled.value && originOpen.value);
+
     const popupClassName = computed(() =>
       classNames(prefixCls, `${prefixCls.value}-${antdMenuTheme.value}`, props.popupClassName),
     );

components/vc-overflow/Item.tsx

@@ -0,0 +1,105 @@
+import {
+  computed,
+  CSSProperties,
+  defineComponent,
+  HTMLAttributes,
+  onUnmounted,
+  PropType,
+  ref,
+} from 'vue';
+import ResizeObserver from '../vc-resize-observer';
+import classNames from '../_util/classNames';
+import { Key, VueNode } from '../_util/type';
+import PropTypes from '../_util/vue-types';
+
+export default defineComponent({
+  name: 'InternalItem',
+  props: {
+    prefixCls: String,
+    item: PropTypes.any,
+    renderItem: Function as PropType<(item: any) => VueNode>,
+    responsive: Boolean,
+    itemKey: [String, Number],
+    registerSize: Function as PropType<(key: Key, width: number | null) => void>,
+    display: Boolean,
+    order: Number,
+    component: PropTypes.any,
+    invalidate: Boolean,
+  },
+  setup(props, { slots, expose }) {
+    const mergedHidden = computed(() => props.responsive && !props.display);
+    const itemNodeRef = ref();
+
+    expose({ itemNodeRef });
+
+    // ================================ Effect ================================
+    function internalRegisterSize(width: number | null) {
+      props.registerSize(props.itemKey!, width);
+    }
+
+    onUnmounted(() => {
+      internalRegisterSize(null);
+    });
+
+    return () => {
+      const {
+        prefixCls,
+        invalidate,
+        item,
+        renderItem,
+        responsive,
+        registerSize,
+        itemKey,
+        display,
+        order,
+        component: Component = 'div',
+        ...restProps
+      } = props;
+      const children = slots.default?.();
+      // ================================ Render ================================
+      const childNode = renderItem && item !== undefined ? renderItem(item) : children;
+
+      let overflowStyle: CSSProperties | undefined;
+      if (!invalidate) {
+        overflowStyle = {
+          opacity: mergedHidden.value ? 0 : 1,
+          height: mergedHidden.value ? 0 : undefined,
+          overflowY: mergedHidden.value ? 'hidden' : undefined,
+          order: responsive ? order : undefined,
+          pointerEvents: mergedHidden.value ? 'none' : undefined,
+        };
+      }
+
+      const overflowProps: HTMLAttributes = {};
+      if (mergedHidden.value) {
+        overflowProps['aria-hidden'] = true;
+      }
+
+      let itemNode = (
+        <Component
+          class={classNames(!invalidate && prefixCls)}
+          style={overflowStyle}
+          {...overflowProps}
+          {...restProps}
+          ref={itemNodeRef}
+        >
+          {childNode}
+        </Component>
+      );
+
+      if (responsive) {
+        itemNode = (
+          <ResizeObserver
+            onResize={({ offsetWidth }) => {
+              internalRegisterSize(offsetWidth);
+            }}
+          >
+            {itemNode}
+          </ResizeObserver>
+        );
+      }
+
+      return itemNode;
+    };
+  },
+});

components/vc-overflow/index.ts

@@ -0,0 +1,5 @@
+// import Overflow, { OverflowProps } from './Overflow';
+
+// export { OverflowProps };
+
+// export default Overflow;

v2-doc

@@ -1 +1 @@
-Subproject commit d197053285b81e77718621c0b5b94cb3b21831a2
+Subproject commit a7013ae87f69dcbcf547f4b023255b8a7a775557