@v-c/menu 0.0.1

package/dist/SubMenu/index.cjs

@@ -0,0 +1,532 @@
+"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 warning = require("@v-c/util/dist/warning");
+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 useActive = require("../hooks/useActive.cjs");
+const useDirectionStyle = require("../hooks/useDirectionStyle.cjs");
+const Icon = require("../Icon.cjs");
+const commonUtil = require("../utils/commonUtil.cjs");
+const InlineSubMenuList = require("./InlineSubMenuList.cjs");
+const PopupTrigger = require("./PopupTrigger.cjs");
+const SubMenuList = require("./SubMenuList.cjs");
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !vue.isVNode(s);
+}
+const InternalSubMenu = /* @__PURE__ */ vue.defineComponent((props, {
+  slots,
+  attrs
+}) => {
+  const eventKeyRef = vue.computed(() => props?.eventKey || "");
+  const domDataId = IdContext.useMenuId(eventKeyRef);
+  const menuContext = MenuContext.useMenuContext();
+  const {
+    _internalRenderSubMenuItem
+  } = PrivateContext.usePrivateContext();
+  const pathUserContext = PathContext.usePathUserContext();
+  const connectedPath = PathContext.useFullPath();
+  const validConnectedPath = vue.computed(() => connectedPath.value.filter((k) => k !== void 0));
+  const prefixCls = vue.computed(() => menuContext?.value?.prefixCls || "vc-menu");
+  const mode = vue.computed(() => menuContext?.value?.mode || "vertical");
+  const openKeys = vue.computed(() => menuContext?.value?.openKeys || []);
+  const contextDisabled = vue.computed(() => menuContext?.value?.disabled);
+  const overflowDisabled = vue.computed(() => menuContext?.value?.overflowDisabled);
+  const activeKey = vue.computed(() => menuContext?.value?.activeKey);
+  const selectedKeys = vue.computed(() => menuContext?.value?.selectedKeys || []);
+  const contextExpandIcon = vue.computed(() => menuContext?.value?.expandIcon);
+  const contextPopupRender = vue.computed(() => menuContext?.value?.popupRender);
+  const onOpenChange = (key, open2) => {
+    menuContext?.value?.onOpenChange?.(key, open2);
+  };
+  const onActive = (key) => {
+    menuContext?.value?.onActive?.(key);
+  };
+  const subMenuPrefixCls = vue.computed(() => `${prefixCls.value}-submenu`);
+  const mergedDisabled = vue.computed(() => !!(contextDisabled.value || props?.disabled));
+  if (process.env.NODE_ENV !== "production" && props?.warnKey) {
+    warning(false, "SubMenu should not leave undefined `key`.");
+  }
+  const mergedExpandIcon = vue.computed(() => props?.expandIcon ?? contextExpandIcon.value);
+  const originOpen = vue.computed(() => {
+    const key = props?.eventKey;
+    return key ? openKeys.value.includes(key) : false;
+  });
+  const open = vue.computed(() => !overflowDisabled.value && originOpen.value);
+  const childrenSelected = vue.computed(() => {
+    const key = props?.eventKey;
+    return key ? pathUserContext.isSubPathKey(selectedKeys.value, key) : false;
+  });
+  const eventKeyForActive = vue.computed(() => props?.eventKey || "");
+  const {
+    active,
+    ...activeProps
+  } = useActive.default(eventKeyForActive, mergedDisabled, (e) => props?.onTitleMouseEnter?.(e), (e) => props?.onTitleMouseLeave?.(e));
+  const childrenActive = vue.ref(false);
+  const triggerChildrenActive = (newActive) => {
+    if (!mergedDisabled.value) {
+      childrenActive.value = newActive;
+    }
+  };
+  const onInternalMouseEnter = (domEvent) => {
+    triggerChildrenActive(true);
+    props?.onMouseEnter?.({
+      key: props.eventKey,
+      domEvent
+    });
+  };
+  const onInternalMouseLeave = (domEvent) => {
+    triggerChildrenActive(false);
+    props?.onMouseLeave?.({
+      key: props.eventKey,
+      domEvent
+    });
+  };
+  const mergedActive = vue.computed(() => {
+    if (active.value) {
+      return active.value;
+    }
+    if (mode.value !== "inline") {
+      const key = props?.eventKey;
+      const currentActiveKey = activeKey.value;
+      return childrenActive.value || (key && currentActiveKey ? pathUserContext.isSubPathKey([currentActiveKey], key) : false);
+    }
+    return false;
+  });
+  const pathLength = vue.computed(() => connectedPath.value.length);
+  const directionStyle = useDirectionStyle.default(pathLength);
+  const onInternalTitleClick = (e) => {
+    if (mergedDisabled.value) {
+      return;
+    }
+    const key = props?.eventKey;
+    props?.onTitleClick?.({
+      key,
+      domEvent: e
+    });
+    if (mode.value === "inline" && key) {
+      onOpenChange(key, !originOpen.value);
+    }
+  };
+  const onPopupVisibleChange = (newVisible) => {
+    const key = props?.eventKey;
+    if (mode.value !== "inline" && key) {
+      onOpenChange(key, newVisible);
+    }
+  };
+  const onInternalFocus = () => {
+    const key = props?.eventKey;
+    if (key) {
+      onActive(key);
+    }
+  };
+  const triggerModeRef = vue.ref(mode.value);
+  vue.watch(mode, () => {
+    if (mode.value !== "inline" && validConnectedPath.value.length > 1) {
+      triggerModeRef.value = "vertical";
+    } else {
+      triggerModeRef.value = mode.value;
+    }
+  }, {
+    immediate: true
+  });
+  return () => {
+    const {
+      style,
+      title,
+      class: className,
+      popupClassName,
+      popupOffset,
+      popupStyle,
+      ...restProps
+    } = props;
+    const children = slots.default?.();
+    const popupId = domDataId.value && `${domDataId.value}-popup`;
+    const expandIconProps = {
+      isOpen: open.value,
+      isSelected: childrenSelected.value,
+      isSubMenu: true,
+      disabled: mergedDisabled.value
+    };
+    const expandIconNode = vue.createVNode(Icon.default, {
+      "icon": mode.value !== "horizontal" ? mergedExpandIcon.value : void 0,
+      "props": {
+        ...props,
+        ...expandIconProps
+      }
+    }, {
+      default: () => [vue.createVNode("i", {
+        "class": `${subMenuPrefixCls.value}-arrow`
+      }, null)]
+    });
+    let titleNode = vue.createVNode("div", vue.mergeProps({
+      "role": "menuitem",
+      "style": directionStyle.value,
+      "class": `${subMenuPrefixCls.value}-title`,
+      "tabindex": mergedDisabled.value ? void 0 : -1,
+      "title": typeof title === "string" ? title : void 0,
+      "data-menu-id": overflowDisabled.value && domDataId.value ? void 0 : domDataId.value,
+      "aria-expanded": open.value,
+      "aria-haspopup": true,
+      "aria-controls": popupId,
+      "aria-disabled": mergedDisabled.value,
+      "onClick": onInternalTitleClick,
+      "onFocus": onInternalFocus
+    }, activeProps), [title, expandIconNode]);
+    const popupContentTriggerMode = triggerModeRef.value;
+    const renderPopupContent = () => {
+      const originNode = vue.createVNode(MenuContext.default, {
+        "classNames": props.classNames,
+        "styles": props.styles,
+        "mode": popupContentTriggerMode === "horizontal" ? "vertical" : popupContentTriggerMode
+      }, {
+        default: () => [vue.createVNode(SubMenuList.default, {
+          "id": popupId
+        }, _isSlot(children) ? children : {
+          default: () => [children]
+        })]
+      });
+      const mergedPopupRender = props?.popupRender || contextPopupRender.value;
+      if (mergedPopupRender) {
+        return mergedPopupRender(originNode, {
+          item: props,
+          keys: validConnectedPath.value
+        });
+      }
+      return originNode;
+    };
+    if (!overflowDisabled.value) {
+      const triggerMode = triggerModeRef.value;
+      const _titleNode = /* @__PURE__ */ (function() {
+        return titleNode;
+      })();
+      titleNode = vue.createVNode(PopupTrigger.default, {
+        "mode": triggerMode,
+        "prefixCls": subMenuPrefixCls.value,
+        "visible": !props?.internalPopupClose && open.value && mode.value !== "inline",
+        "popupClassName": popupClassName,
+        "popupOffset": popupOffset,
+        "popupStyle": popupStyle,
+        "popup": renderPopupContent(),
+        "disabled": mergedDisabled.value,
+        "onVisibleChange": onPopupVisibleChange
+      }, _isSlot(titleNode) ? titleNode : {
+        default: () => [_titleNode]
+      });
+    }
+    let listNode = vue.createVNode(Overflow.Item, vue.mergeProps({
+      "role": "none"
+    }, attrs, restProps, {
+      "component": "li",
+      "style": style,
+      "class": util.classNames(subMenuPrefixCls.value, `${subMenuPrefixCls.value}-${mode.value}`, className, {
+        [`${subMenuPrefixCls.value}-open`]: open.value,
+        [`${subMenuPrefixCls.value}-active`]: mergedActive.value,
+        [`${subMenuPrefixCls.value}-selected`]: childrenSelected.value,
+        [`${subMenuPrefixCls.value}-disabled`]: mergedDisabled.value
+      }),
+      "onMouseenter": onInternalMouseEnter,
+      "onMouseleave": onInternalMouseLeave
+    }), {
+      default: () => [titleNode, !overflowDisabled.value && vue.createVNode(InlineSubMenuList.default, {
+        "id": popupId,
+        "open": open.value,
+        "keyPath": validConnectedPath.value
+      }, _isSlot(children) ? children : {
+        default: () => [children]
+      })]
+    });
+    if (_internalRenderSubMenuItem) {
+      listNode = _internalRenderSubMenuItem(listNode, props, {
+        selected: childrenSelected.value,
+        active: mergedActive.value,
+        open: open.value,
+        disabled: mergedDisabled.value
+      });
+    }
+    return listNode;
+  };
+}, {
+  props: {
+    classNames: {
+      type: Object,
+      required: false,
+      default: void 0
+    },
+    styles: {
+      type: Object,
+      required: false,
+      default: void 0
+    },
+    title: {
+      type: null,
+      required: false,
+      default: void 0
+    },
+    internalPopupClose: {
+      type: Boolean,
+      required: false,
+      default: void 0
+    },
+    eventKey: {
+      type: String,
+      required: false,
+      default: void 0
+    },
+    warnKey: {
+      type: Boolean,
+      required: false,
+      default: void 0
+    },
+    popupRender: {
+      type: Function,
+      required: false,
+      default: void 0
+    },
+    type: {
+      type: String,
+      required: false,
+      default: void 0
+    },
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: void 0
+    },
+    rootClassName: {
+      type: String,
+      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
+    },
+    onMouseEnter: {
+      type: Function,
+      required: false,
+      default: void 0
+    },
+    onMouseLeave: {
+      type: Function,
+      required: false,
+      default: void 0
+    },
+    popupClassName: {
+      type: String,
+      required: false,
+      default: void 0
+    },
+    popupOffset: {
+      type: Array,
+      required: false,
+      default: void 0
+    },
+    popupStyle: {
+      type: null,
+      required: false,
+      default: void 0
+    },
+    onClick: {
+      type: Function,
+      required: false,
+      default: void 0
+    },
+    onTitleClick: {
+      type: Function,
+      required: false,
+      default: void 0
+    },
+    onTitleMouseEnter: {
+      type: Function,
+      required: false,
+      default: void 0
+    },
+    onTitleMouseLeave: {
+      type: Function,
+      required: false,
+      default: void 0
+    },
+    style: {
+      type: null,
+      required: false,
+      default: void 0
+    },
+    class: {
+      type: String,
+      required: false,
+      default: void 0
+    }
+  },
+  name: "InternalSubMenu",
+  inheritAttrs: false
+});
+const SubMenu = /* @__PURE__ */ vue.defineComponent((props, {
+  slots
+}) => {
+  const eventKeyRef = vue.computed(() => props?.eventKey);
+  const connectedKeyPath = PathContext.useFullPath(eventKeyRef);
+  const measure = PathContext.useMeasure();
+  const validKeyPath = vue.computed(() => connectedKeyPath.value.filter((k) => k !== void 0));
+  vue.watch(
+    [validKeyPath, () => props.eventKey],
+    () => {
+      if (measure && props.eventKey) {
+        measure.registerPath(props.eventKey, validKeyPath.value);
+      }
+    }
+    // { immediate: true, flush: 'post' },
+  );
+  return () => {
+    const children = slots.default?.();
+    const childList = commonUtil.parseChildren(children, validKeyPath.value);
+    let renderNode;
+    if (measure) {
+      renderNode = childList;
+    } else {
+      renderNode = vue.createVNode(InternalSubMenu, props, _isSlot(childList) ? childList : {
+        default: () => [childList]
+      });
+    }
+    return vue.createVNode(PathContext.PathTrackerContext.Provider, {
+      "value": validKeyPath.value
+    }, _isSlot(renderNode) ? renderNode : {
+      default: () => [renderNode]
+    });
+  };
+}, {
+  props: {
+    classNames: {
+      type: Object,
+      required: false,
+      default: void 0
+    },
+    styles: {
+      type: Object,
+      required: false,
+      default: void 0
+    },
+    title: {
+      type: null,
+      required: false,
+      default: void 0
+    },
+    internalPopupClose: {
+      type: Boolean,
+      required: false,
+      default: void 0
+    },
+    eventKey: {
+      type: String,
+      required: false,
+      default: void 0
+    },
+    warnKey: {
+      type: Boolean,
+      required: false,
+      default: void 0
+    },
+    popupRender: {
+      type: Function,
+      required: false,
+      default: void 0
+    },
+    type: {
+      type: String,
+      required: false,
+      default: void 0
+    },
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: void 0
+    },
+    rootClassName: {
+      type: String,
+      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
+    },
+    onMouseEnter: {
+      type: Function,
+      required: false,
+      default: void 0
+    },
+    onMouseLeave: {
+      type: Function,
+      required: false,
+      default: void 0
+    },
+    popupClassName: {
+      type: String,
+      required: false,
+      default: void 0
+    },
+    popupOffset: {
+      type: Array,
+      required: false,
+      default: void 0
+    },
+    popupStyle: {
+      type: null,
+      required: false,
+      default: void 0
+    },
+    onClick: {
+      type: Function,
+      required: false,
+      default: void 0
+    },
+    onTitleClick: {
+      type: Function,
+      required: false,
+      default: void 0
+    },
+    onTitleMouseEnter: {
+      type: Function,
+      required: false,
+      default: void 0
+    },
+    onTitleMouseLeave: {
+      type: Function,
+      required: false,
+      default: void 0
+    },
+    style: {
+      type: null,
+      required: false,
+      default: void 0
+    },
+    class: {
+      type: String,
+      required: false,
+      default: void 0
+    }
+  },
+  name: "SubMenu",
+  inheritAttrs: false
+});
+exports.default = SubMenu;

package/dist/SubMenu/index.d.ts

@@ -0,0 +1,18 @@
+import { VueNode } from '@v-c/util/dist/type';
+import { CSSProperties } from 'vue';
+import { PopupRender, SubMenuType } from '../interface';
+export type SemanticName = 'list' | 'listTitle';
+export interface SubMenuProps extends Omit<SubMenuType, 'key' | 'children' | 'label'> {
+    classNames?: Partial<Record<SemanticName, string>>;
+    styles?: Partial<Record<SemanticName, CSSProperties>>;
+    title?: VueNode;
+    /** @private Used for rest popup. Do not use in your prod */
+    internalPopupClose?: boolean;
+    /** @private Internal filled key. Do not set it directly */
+    eventKey?: string;
+    /** @private Do not use. Private warning empty usage */
+    warnKey?: boolean;
+    popupRender?: PopupRender;
+}
+declare const SubMenu: import('vue').DefineSetupFnComponent<SubMenuProps, {}, {}, SubMenuProps & {}, import('vue').PublicProps>;
+export default SubMenu;