@v-c/menu 0.0.1

package/dist/Menu.cjs

@@ -0,0 +1,580 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const vue = require("vue");
+const Overflow = require("@v-c/overflow");
+const util = require("@v-c/util");
+const useId = require("@v-c/util/dist/hooks/useId.ts");
+const isEqual = require("@v-c/util/dist/isEqual.ts");
+const propsUtil = require("@v-c/util/dist/props-util");
+const IdContext = require("./context/IdContext.cjs");
+const MenuContext = require("./context/MenuContext.cjs");
+const PathContext = require("./context/PathContext.cjs");
+const PrivateContext = require("./context/PrivateContext.cjs");
+const useAccessibility = require("./hooks/useAccessibility.cjs");
+const useKeyRecords = require("./hooks/useKeyRecords.cjs");
+const useMemoCallback = require("./hooks/useMemoCallback.cjs");
+const MenuItem = require("./MenuItem.cjs");
+const index = require("./SubMenu/index.cjs");
+const nodeUtil = require("./utils/nodeUtil.cjs");
+const warnUtil = require("./utils/warnUtil.cjs");
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !vue.isVNode(s);
+}
+const EMPTY_LIST = [];
+const defaults = {
+  prefixCls: "vc-menu",
+  mode: "vertical",
+  subMenuOpenDelay: 0.1,
+  subMenuCloseDelay: 0.1,
+  selectable: true,
+  multiple: false,
+  inlineIndent: 24,
+  triggerSubMenuAction: "hover",
+  overflowedIndicator: "..."
+};
+const Menu = /* @__PURE__ */ vue.defineComponent((props, {
+  slots,
+  expose,
+  attrs: _attrs
+}) => {
+  const containerRef = vue.shallowRef();
+  const uuid = useId(props?.id ? `rc-menu-uuid-${props.id}` : "rc-menu-uuid");
+  const isRtl = vue.computed(() => props?.direction === "rtl");
+  const childList = vue.shallowRef([]);
+  const mergedOverflowIndicator = vue.computed(() => props.overflowedIndicator ?? defaults.overflowedIndicator);
+  const overflowIndicatorVersion = vue.ref(0);
+  vue.watch(mergedOverflowIndicator, () => {
+    overflowIndicatorVersion.value += 1;
+  }, {
+    immediate: true
+  });
+  IdContext.useIdContextProvide(vue.computed(() => uuid));
+  const innerOpenKeys = vue.ref(props?.openKeys ?? props?.defaultOpenKeys);
+  vue.watch(() => props.openKeys, () => {
+    innerOpenKeys.value = props?.openKeys;
+  });
+  const mergedOpenKeys = vue.computed({
+    get() {
+      if (props.openKeys) {
+        return props.openKeys;
+      }
+      return innerOpenKeys.value ?? EMPTY_LIST;
+    },
+    set(value) {
+      innerOpenKeys.value = value;
+    }
+  });
+  const triggerOpenKeys = (keys, forceFlush = false) => {
+    function doUpdate() {
+      mergedOpenKeys.value = keys;
+      props?.onOpenChange?.(keys);
+    }
+    if (forceFlush) {
+      vue.nextTick(doUpdate);
+    } else {
+      doUpdate();
+    }
+  };
+  const inlineCacheOpenKeys = vue.shallowRef(mergedOpenKeys.value);
+  const mountRef = vue.shallowRef(false);
+  const modeMerged = vue.computed(() => {
+    const {
+      mode,
+      inlineCollapsed
+    } = props;
+    if ((mode === "inline" || mode === "vertical") && inlineCollapsed) {
+      return ["vertical", inlineCollapsed];
+    }
+    return [mode, false];
+  });
+  const mergedMode = vue.computed(() => modeMerged.value[0]);
+  const mergedInlineCollapsed = vue.computed(() => modeMerged.value[1]);
+  const isInlineMode = vue.computed(() => mergedMode.value === "inline");
+  const internalMode = vue.shallowRef(mergedMode.value);
+  const internalInlineCollapsed = vue.shallowRef(mergedInlineCollapsed.value);
+  vue.watch([mergedMode, mergedInlineCollapsed], () => {
+    internalMode.value = mergedMode.value;
+    internalInlineCollapsed.value = mergedInlineCollapsed.value;
+    if (!mountRef.value) {
+      return;
+    }
+    if (isInlineMode.value) {
+      mergedOpenKeys.value = inlineCacheOpenKeys.value;
+    } else {
+      triggerOpenKeys(EMPTY_LIST);
+    }
+  });
+  const lastVisibleIndex = vue.shallowRef(0);
+  vue.watch(mergedOpenKeys, () => {
+    if (isInlineMode.value) {
+      inlineCacheOpenKeys.value = mergedOpenKeys.value;
+    }
+  });
+  vue.onMounted(() => {
+    mountRef.value = true;
+  });
+  vue.onUnmounted(() => {
+    mountRef.value = false;
+  });
+  const {
+    registerPath,
+    unregisterPath,
+    refreshOverflowKeys,
+    isSubPathKey,
+    getKeyPath,
+    getKeys,
+    getSubPathKeys
+  } = useKeyRecords.default();
+  const registerPathContext = vue.computed(() => ({
+    registerPath,
+    unregisterPath
+  }));
+  const pathUserContext = vue.computed(() => ({
+    isSubPathKey
+  }));
+  const mergedActiveKey = vue.shallowRef(props?.activeKey);
+  vue.watch(() => props.activeKey, () => {
+    mergedActiveKey.value = props?.activeKey;
+  });
+  const onActive = useMemoCallback.default((key) => {
+    mergedActiveKey.value = key;
+  });
+  const onInactive = useMemoCallback.default(() => {
+    mergedActiveKey.value = void 0;
+  });
+  const innerSelectKeys = vue.ref(props?.selectedKeys ?? props?.defaultSelectedKeys ?? EMPTY_LIST);
+  vue.watch(() => props.selectedKeys, () => {
+    if (props.selectedKeys) {
+      innerSelectKeys.value = props.selectedKeys;
+    }
+  });
+  const mergedSelectKeys = vue.computed(() => {
+    const keys = innerSelectKeys.value;
+    if (Array.isArray(keys)) {
+      return keys;
+    }
+    if (keys === null || keys === void 0) {
+      return EMPTY_LIST;
+    }
+    return [keys];
+  });
+  const triggerSelection = (info) => {
+    if (props.selectable) {
+      const {
+        key: targetKey
+      } = info;
+      const exist = mergedSelectKeys.value.includes(targetKey);
+      let newSelectKeys;
+      if (props.multiple) {
+        if (exist) {
+          newSelectKeys = mergedSelectKeys.value.filter((key) => key !== targetKey);
+        } else {
+          newSelectKeys = [...mergedSelectKeys.value, targetKey];
+        }
+      } else {
+        newSelectKeys = [targetKey];
+      }
+      innerSelectKeys.value = newSelectKeys;
+      const selectInfo = {
+        ...info,
+        selectedKeys: newSelectKeys
+      };
+      if (exist) {
+        props.onDeselect?.(selectInfo);
+      } else {
+        props.onSelect?.(selectInfo);
+      }
+    }
+    if (!props.multiple && mergedOpenKeys.value.length && internalMode.value !== "inline") {
+      triggerOpenKeys(EMPTY_LIST);
+    }
+  };
+  const onInternalClick = useMemoCallback.default((info) => {
+    props.onClick?.(warnUtil.warnItemProp(info));
+    triggerSelection(info);
+  });
+  const onInternalOpenChange = useMemoCallback.default((key, open) => {
+    let newOpenKeys = mergedOpenKeys.value.filter((k) => k !== key);
+    if (open) {
+      newOpenKeys.push(key);
+    } else if (internalMode.value !== "inline") {
+      const subPathKeys = getSubPathKeys(key);
+      newOpenKeys = newOpenKeys.filter((k) => !subPathKeys.has(k));
+    }
+    if (!isEqual(mergedOpenKeys.value, newOpenKeys, true)) {
+      triggerOpenKeys(newOpenKeys, true);
+    }
+  });
+  const triggerAccessibilityOpen = (key, open) => {
+    const nextOpen = open ?? !mergedOpenKeys.value.includes(key);
+    onInternalOpenChange(key, nextOpen);
+  };
+  const setMergedActiveKey = (key) => {
+    mergedActiveKey.value = key;
+  };
+  const onInternalKeyDown = useAccessibility.default(internalMode, mergedActiveKey, isRtl, uuid, containerRef, getKeys, getKeyPath, setMergedActiveKey, triggerAccessibilityOpen, (...args) => {
+    _attrs?.onKeydown?.(...args);
+  });
+  vue.watch(() => [props.activeKey, () => props.defaultActiveFirst, childList.value], () => {
+    if (props.activeKey !== void 0) {
+      mergedActiveKey.value = props.activeKey;
+    } else if (props.defaultActiveFirst && childList.value[0]) {
+      mergedActiveKey.value = childList.value[0]?.key;
+    }
+  }, {
+    immediate: true
+  });
+  const allVisible = vue.computed(() => lastVisibleIndex.value >= childList.value.length - 1 || internalMode.value !== "horizontal" || props?.disabledOverflow);
+  vue.watch(allVisible, () => {
+    refreshOverflowKeys(allVisible.value ? EMPTY_LIST : childList.value.slice(lastVisibleIndex.value + 1).map((child) => child.key));
+  });
+  const privateContext = vue.computed(() => ({
+    _internalRenderMenuItem: props._internalRenderMenuItem,
+    _internalRenderSubMenuItem: props._internalRenderSubMenuItem
+  }));
+  const menuContext = vue.computed(() => {
+    return {
+      prefixCls: props.prefixCls || defaults.prefixCls,
+      rootClassName: props.rootClassName,
+      classNames: props.classNames,
+      styles: props.styles,
+      mode: internalMode.value,
+      openKeys: mergedOpenKeys.value,
+      rtl: isRtl.value,
+      // Disabled
+      disabled: props.disabled,
+      // Motion
+      motion: props.motion,
+      defaultMotions: props.defaultMotions,
+      // Active
+      activeKey: mergedActiveKey.value,
+      onActive,
+      onInactive,
+      // Selection
+      selectedKeys: mergedSelectKeys.value,
+      // Level
+      inlineIndent: props.inlineIndent || defaults.inlineIndent,
+      // Popup
+      subMenuOpenDelay: props.subMenuOpenDelay || defaults.subMenuOpenDelay,
+      subMenuCloseDelay: props.subMenuCloseDelay || defaults.subMenuCloseDelay,
+      forceSubMenuRender: props.forceSubMenuRender,
+      builtinPlacements: props.builtinPlacements,
+      triggerSubMenuAction: props.triggerSubMenuAction || defaults.triggerSubMenuAction,
+      getPopupContainer: props.getPopupContainer,
+      // Icon
+      itemIcon: props.itemIcon,
+      expandIcon: props.expandIcon,
+      // Events
+      onItemClick: onInternalClick,
+      onOpenChange: onInternalOpenChange,
+      popupRender: props.popupRender
+    };
+  });
+  MenuContext.useMenuContextProvider(menuContext);
+  expose({
+    list: containerRef,
+    focus: (options) => {
+      const keys = getKeys();
+      const {
+        elements,
+        key2element,
+        element2key
+      } = useAccessibility.refreshElements(keys, uuid);
+      const focusableElements = useAccessibility.getFocusableElements(containerRef.value, elements);
+      let shouldFocusKey;
+      if (mergedActiveKey.value && keys.includes(mergedActiveKey.value)) {
+        shouldFocusKey = mergedActiveKey.value;
+      } else {
+        shouldFocusKey = focusableElements[0] ? element2key.get(focusableElements[0]) : childList.value.find((node) => !node.props.disabled)?.key;
+      }
+      const elementToFocus = key2element.get(shouldFocusKey);
+      if (shouldFocusKey && elementToFocus) {
+        elementToFocus?.focus?.(options);
+      }
+    },
+    findItem: ({
+      key: itemKey
+    }) => {
+      const keys = getKeys();
+      const {
+        key2element
+      } = useAccessibility.refreshElements(keys, uuid);
+      return key2element.get(itemKey) || null;
+    }
+  });
+  return () => {
+    const children = propsUtil.filterEmpty(slots.default?.());
+    const parsedChildList = nodeUtil.parseItems(children, props?.items, EMPTY_LIST, props?._internalComponents || {}, props?.prefixCls || defaults.prefixCls);
+    const shouldUpdate = childList.value.length !== parsedChildList.length || !isEqual(childList.value.map((n) => n?.key), parsedChildList.map((n) => n?.key));
+    if (shouldUpdate) {
+      childList.value = parsedChildList;
+    }
+    const measureChildList = nodeUtil.parseItems(children, props?.items, EMPTY_LIST, {}, props?.prefixCls || defaults.prefixCls);
+    const wrappedChildList = internalMode.value !== "horizontal" || props?.disabledOverflow ? childList.value : childList.value.map((child, index2) => (
+      // Always wrap provider to avoid sub node re-mount
+      vue.createVNode(MenuContext.default, {
+        "key": child.key,
+        "overflowDisabled": index2 > lastVisibleIndex.value,
+        "classNames": props.classNames,
+        "styles": props.styles
+      }, _isSlot(child) ? child : {
+        default: () => [child]
+      })
+    ));
+    const container = vue.createVNode(Overflow, vue.mergeProps({
+      "ref": containerRef,
+      "prefixCls": `${props.prefixCls || defaults.prefixCls}-overflow`,
+      "component": "ul",
+      "itemComponent": MenuItem.default,
+      "class": util.classNames(props.prefixCls || defaults.prefixCls, `${props.prefixCls || defaults.prefixCls}-root`, `${props.prefixCls || defaults.prefixCls}-${internalMode.value}`, _attrs.class || "", {
+        [`${props.prefixCls || defaults.prefixCls}-inline-collapsed`]: internalInlineCollapsed.value,
+        [`${props.prefixCls || defaults.prefixCls}-rtl`]: isRtl.value
+      }, props.rootClassName),
+      "style": _attrs.style,
+      "data": wrappedChildList,
+      "renderRawItem": (node) => {
+        return node;
+      },
+      "renderRawRest": (omitItems) => {
+        const len = omitItems.length;
+        const originOmitItems = len ? childList.value.slice(-len) : null;
+        return vue.createVNode(index.default, {
+          "eventKey": useKeyRecords.OVERFLOW_KEY,
+          "title": mergedOverflowIndicator.value,
+          "disabled": allVisible.value,
+          "internalPopupClose": len === 0,
+          "popupClassName": props.overflowedIndicatorPopupClassName
+        }, _isSlot(originOmitItems) ? originOmitItems : {
+          default: () => [originOmitItems]
+        });
+      },
+      "maxCount": internalMode.value !== "horizontal" || props?.disabledOverflow ? Overflow.INVALIDATE : Overflow.RESPONSIVE,
+      "ssr": "full",
+      "data-menu-list": true,
+      "onVisibleChange": (newLastIndex) => {
+        lastVisibleIndex.value = newLastIndex;
+      }
+    }, {
+      onKeydown: onInternalKeyDown
+    }), null);
+    return vue.createVNode(PrivateContext.PrivateContextProvider, privateContext.value, {
+      default: () => [vue.createVNode(PathContext.PathUserProvider, pathUserContext.value, _isSlot(container) ? container : {
+        default: () => [container]
+      }), vue.createVNode("div", {
+        "style": {
+          display: "none"
+        },
+        "aria-hidden": true
+      }, [vue.createVNode(PathContext.MeasureProvider, registerPathContext.value, _isSlot(measureChildList) ? measureChildList : {
+        default: () => [measureChildList]
+      })])]
+    });
+  };
+}, {
+  props: /* @__PURE__ */ vue.mergeDefaults({
+    prefixCls: {
+      type: String,
+      required: false,
+      default: void 0
+    },
+    rootClassName: {
+      type: String,
+      required: false,
+      default: void 0
+    },
+    classNames: {
+      type: Object,
+      required: false,
+      default: void 0
+    },
+    styles: {
+      type: Object,
+      required: false,
+      default: void 0
+    },
+    items: {
+      type: Array,
+      required: false,
+      default: void 0
+    },
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: void 0
+    },
+    disabledOverflow: {
+      type: Boolean,
+      required: false,
+      default: void 0
+    },
+    direction: {
+      type: String,
+      required: false,
+      default: void 0
+    },
+    mode: {
+      type: String,
+      required: false,
+      default: void 0
+    },
+    inlineCollapsed: {
+      type: Boolean,
+      required: false,
+      default: void 0
+    },
+    defaultOpenKeys: {
+      type: Array,
+      required: false,
+      default: void 0
+    },
+    openKeys: {
+      type: Array,
+      required: false,
+      default: void 0
+    },
+    activeKey: {
+      type: String,
+      required: false,
+      default: void 0
+    },
+    defaultActiveFirst: {
+      type: Boolean,
+      required: false,
+      default: void 0
+    },
+    selectable: {
+      type: Boolean,
+      required: false,
+      default: void 0
+    },
+    multiple: {
+      type: Boolean,
+      required: false,
+      default: void 0
+    },
+    defaultSelectedKeys: {
+      type: Array,
+      required: false,
+      default: void 0
+    },
+    selectedKeys: {
+      type: Array,
+      required: false,
+      default: void 0
+    },
+    onSelect: {
+      type: Function,
+      required: false,
+      default: void 0
+    },
+    onDeselect: {
+      type: Function,
+      required: false,
+      default: void 0
+    },
+    inlineIndent: {
+      type: Number,
+      required: false,
+      default: void 0
+    },
+    motion: {
+      type: Object,
+      required: false,
+      default: void 0
+    },
+    defaultMotions: {
+      type: Object,
+      required: false,
+      default: void 0
+    },
+    subMenuOpenDelay: {
+      type: Number,
+      required: false,
+      default: void 0
+    },
+    subMenuCloseDelay: {
+      type: Number,
+      required: false,
+      default: void 0
+    },
+    forceSubMenuRender: {
+      type: Boolean,
+      required: false,
+      default: void 0
+    },
+    triggerSubMenuAction: {
+      type: String,
+      required: false,
+      default: void 0
+    },
+    builtinPlacements: {
+      type: Object,
+      required: false,
+      default: void 0
+    },
+    itemIcon: {
+      type: [String, Number, null, Array, Function, Boolean],
+      required: false,
+      skipCheck: true,
+      default: void 0
+    },
+    expandIcon: {
+      type: [String, Number, null, Array, Function, Boolean],
+      required: false,
+      skipCheck: true,
+      default: void 0
+    },
+    overflowedIndicator: {
+      type: null,
+      required: false,
+      default: void 0
+    },
+    overflowedIndicatorPopupClassName: {
+      type: String,
+      required: false,
+      default: void 0
+    },
+    getPopupContainer: {
+      type: Function,
+      required: false,
+      default: void 0
+    },
+    onClick: {
+      type: Function,
+      required: false,
+      default: void 0
+    },
+    onOpenChange: {
+      type: Function,
+      required: false,
+      default: void 0
+    },
+    _internalRenderMenuItem: {
+      type: Function,
+      required: false,
+      default: void 0
+    },
+    _internalRenderSubMenuItem: {
+      type: Function,
+      required: false,
+      default: void 0
+    },
+    _internalComponents: {
+      type: Object,
+      required: false,
+      default: void 0
+    },
+    popupRender: {
+      type: Function,
+      required: false,
+      default: void 0
+    },
+    id: {
+      type: String,
+      required: false,
+      default: void 0
+    }
+  }, defaults),
+  name: "VcMenu"
+});
+exports.default = Menu;

package/dist/Menu.d.ts

@@ -0,0 +1,77 @@
+import { VueNode } from '@v-c/util/dist/type';
+import { CSSMotionProps } from '@v-c/util/dist/utils/transition';
+import { CSSProperties } from 'vue';
+import { BuiltinPlacements, Components, ItemType, MenuClickEventHandler, MenuMode, PopupRender, RenderIconType, SelectEventHandler, TriggerSubMenuAction } from './interface.ts';
+import { SemanticName } from './SubMenu';
+export interface MenuProps {
+    prefixCls?: string;
+    rootClassName?: string;
+    classNames?: Partial<Record<SemanticName, string>>;
+    styles?: Partial<Record<SemanticName, CSSProperties>>;
+    items?: ItemType[];
+    disabled?: boolean;
+    /** @private Disable auto overflow. Pls note the prop name may refactor since we do not final decided. */
+    disabledOverflow?: boolean;
+    /** direction of menu */
+    direction?: 'ltr' | 'rtl';
+    mode?: MenuMode;
+    inlineCollapsed?: boolean;
+    defaultOpenKeys?: string[];
+    openKeys?: string[];
+    activeKey?: string;
+    defaultActiveFirst?: boolean;
+    selectable?: boolean;
+    multiple?: boolean;
+    defaultSelectedKeys?: string[];
+    selectedKeys?: string[];
+    onSelect?: SelectEventHandler;
+    onDeselect?: SelectEventHandler;
+    inlineIndent?: number;
+    /** Menu motion define. Use `defaultMotions` if you need config motion of each mode */
+    motion?: CSSMotionProps;
+    /** Default menu motion of each mode */
+    defaultMotions?: Partial<{
+        [key in MenuMode | 'other']: CSSMotionProps;
+    }>;
+    subMenuOpenDelay?: number;
+    subMenuCloseDelay?: number;
+    forceSubMenuRender?: boolean;
+    triggerSubMenuAction?: TriggerSubMenuAction;
+    builtinPlacements?: BuiltinPlacements;
+    itemIcon?: RenderIconType;
+    expandIcon?: RenderIconType;
+    overflowedIndicator?: VueNode;
+    /** @private Internal usage. Do not use in your production. */
+    overflowedIndicatorPopupClassName?: string;
+    getPopupContainer?: (node: HTMLElement) => HTMLElement;
+    onClick?: MenuClickEventHandler;
+    onOpenChange?: (openKeys: string[]) => void;
+    /***
+       * @private Only used for `pro-layout`. Do not use in your prod directly
+       * and we do not promise any compatibility for this.
+       */
+    _internalRenderMenuItem?: (originNode: any, menuItemProps: any, stateProps: {
+        selected: boolean;
+    }) => any;
+    /***
+       * @private Only used for `pro-layout`. Do not use in your prod directly
+       * and we do not promise any compatibility for this.
+       */
+    _internalRenderSubMenuItem?: (originNode: any, subMenuItemProps: any, stateProps: {
+        selected: boolean;
+        open: boolean;
+        active: boolean;
+        disabled: boolean;
+    }) => any;
+    /**
+     * @private NEVER! EVER! USE IN PRODUCTION!!!
+     * This is a hack API for `antd` to fix `findDOMNode` issue.
+     * Not use it! Not accept any PR try to make it as normal API.
+     * By zombieJ
+     */
+    _internalComponents?: Components;
+    popupRender?: PopupRender;
+    id?: string;
+}
+declare const Menu: import('vue').DefineSetupFnComponent<MenuProps, {}, {}, MenuProps & {}, import('vue').PublicProps>;
+export default Menu;