@v-c/menu 0.0.1

package/dist/SubMenu/index.js

@@ -0,0 +1,532 @@
+import { defineComponent, computed, watch, createVNode, ref, mergeProps, isVNode } from "vue";
+import Overflow from "@v-c/overflow";
+import { classNames } from "@v-c/util";
+import warning from "@v-c/util/dist/warning";
+import { useMenuId } from "../context/IdContext.js";
+import InheritableContextProvider, { useMenuContext } from "../context/MenuContext.js";
+import { useFullPath, useMeasure, PathTrackerContext, usePathUserContext } from "../context/PathContext.js";
+import { usePrivateContext } from "../context/PrivateContext.js";
+import useActive from "../hooks/useActive.js";
+import useDirectionStyle from "../hooks/useDirectionStyle.js";
+import Icon from "../Icon.js";
+import { parseChildren } from "../utils/commonUtil.js";
+import InlineSubMenuList from "./InlineSubMenuList.js";
+import PopupTrigger from "./PopupTrigger.js";
+import InternalSubMenuList from "./SubMenuList.js";
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+const InternalSubMenu = /* @__PURE__ */ defineComponent((props, {
+  slots,
+  attrs
+}) => {
+  const eventKeyRef = computed(() => props?.eventKey || "");
+  const domDataId = useMenuId(eventKeyRef);
+  const menuContext = useMenuContext();
+  const {
+    _internalRenderSubMenuItem
+  } = usePrivateContext();
+  const pathUserContext = usePathUserContext();
+  const connectedPath = useFullPath();
+  const validConnectedPath = computed(() => connectedPath.value.filter((k) => k !== void 0));
+  const prefixCls = computed(() => menuContext?.value?.prefixCls || "vc-menu");
+  const mode = computed(() => menuContext?.value?.mode || "vertical");
+  const openKeys = computed(() => menuContext?.value?.openKeys || []);
+  const contextDisabled = computed(() => menuContext?.value?.disabled);
+  const overflowDisabled = computed(() => menuContext?.value?.overflowDisabled);
+  const activeKey = computed(() => menuContext?.value?.activeKey);
+  const selectedKeys = computed(() => menuContext?.value?.selectedKeys || []);
+  const contextExpandIcon = computed(() => menuContext?.value?.expandIcon);
+  const contextPopupRender = computed(() => menuContext?.value?.popupRender);
+  const onOpenChange = (key, open2) => {
+    menuContext?.value?.onOpenChange?.(key, open2);
+  };
+  const onActive = (key) => {
+    menuContext?.value?.onActive?.(key);
+  };
+  const subMenuPrefixCls = computed(() => `${prefixCls.value}-submenu`);
+  const mergedDisabled = computed(() => !!(contextDisabled.value || props?.disabled));
+  if (process.env.NODE_ENV !== "production" && props?.warnKey) {
+    warning(false, "SubMenu should not leave undefined `key`.");
+  }
+  const mergedExpandIcon = computed(() => props?.expandIcon ?? contextExpandIcon.value);
+  const originOpen = computed(() => {
+    const key = props?.eventKey;
+    return key ? openKeys.value.includes(key) : false;
+  });
+  const open = computed(() => !overflowDisabled.value && originOpen.value);
+  const childrenSelected = computed(() => {
+    const key = props?.eventKey;
+    return key ? pathUserContext.isSubPathKey(selectedKeys.value, key) : false;
+  });
+  const eventKeyForActive = computed(() => props?.eventKey || "");
+  const {
+    active,
+    ...activeProps
+  } = useActive(eventKeyForActive, mergedDisabled, (e) => props?.onTitleMouseEnter?.(e), (e) => props?.onTitleMouseLeave?.(e));
+  const childrenActive = 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 = 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 = computed(() => connectedPath.value.length);
+  const directionStyle = useDirectionStyle(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 = ref(mode.value);
+  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 = createVNode(Icon, {
+      "icon": mode.value !== "horizontal" ? mergedExpandIcon.value : void 0,
+      "props": {
+        ...props,
+        ...expandIconProps
+      }
+    }, {
+      default: () => [createVNode("i", {
+        "class": `${subMenuPrefixCls.value}-arrow`
+      }, null)]
+    });
+    let titleNode = createVNode("div", 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 = createVNode(InheritableContextProvider, {
+        "classNames": props.classNames,
+        "styles": props.styles,
+        "mode": popupContentTriggerMode === "horizontal" ? "vertical" : popupContentTriggerMode
+      }, {
+        default: () => [createVNode(InternalSubMenuList, {
+          "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 = createVNode(PopupTrigger, {
+        "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 = createVNode(Overflow.Item, mergeProps({
+      "role": "none"
+    }, attrs, restProps, {
+      "component": "li",
+      "style": style,
+      "class": 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 && createVNode(InlineSubMenuList, {
+        "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__ */ defineComponent((props, {
+  slots
+}) => {
+  const eventKeyRef = computed(() => props?.eventKey);
+  const connectedKeyPath = useFullPath(eventKeyRef);
+  const measure = useMeasure();
+  const validKeyPath = computed(() => connectedKeyPath.value.filter((k) => k !== void 0));
+  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 = parseChildren(children, validKeyPath.value);
+    let renderNode;
+    if (measure) {
+      renderNode = childList;
+    } else {
+      renderNode = createVNode(InternalSubMenu, props, _isSlot(childList) ? childList : {
+        default: () => [childList]
+      });
+    }
+    return createVNode(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
+});
+export {
+  SubMenu as default
+};

package/dist/context/IdContext.cjs

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const vue = require("vue");
+const IdContextKey = Symbol("IdContext");
+function useIdContextProvide(id) {
+  vue.provide(IdContextKey, id);
+}
+const IdContextProvider = /* @__PURE__ */ vue.defineComponent((props, {
+  slots
+}) => {
+  const id = vue.computed(() => props.id);
+  useIdContextProvide(id);
+  return () => slots?.default?.();
+}, {
+  props: {
+    id: {
+      type: String,
+      required: true,
+      default: void 0
+    }
+  }
+});
+function getMenuId(uuid, eventKey) {
+  return `${uuid}-${eventKey}`;
+}
+function useMenuId(eventKey) {
+  const id = vue.inject(IdContextKey, vue.ref(""));
+  return vue.computed(() => getMenuId(id.value, eventKey.value));
+}
+exports.IdContextProvider = IdContextProvider;
+exports.getMenuId = getMenuId;
+exports.useIdContextProvide = useIdContextProvide;
+exports.useMenuId = useMenuId;

package/dist/context/IdContext.d.ts

@@ -0,0 +1,12 @@
+import { Ref } from 'vue';
+export declare function useIdContextProvide(id: Ref<string>): void;
+export declare const IdContextProvider: import('vue').DefineSetupFnComponent<{
+    id: string;
+}, {}, {}, {
+    id: string;
+} & {}, import('vue').PublicProps>;
+export declare function getMenuId(uuid: string, eventKey: string): string;
+/**
+ * Get `data-menu-id`
+ */
+export declare function useMenuId(eventKey: Ref<string>): import('vue').ComputedRef<string>;

package/dist/context/IdContext.js

@@ -0,0 +1,33 @@
+import { provide, inject, ref, computed, defineComponent } from "vue";
+const IdContextKey = Symbol("IdContext");
+function useIdContextProvide(id) {
+  provide(IdContextKey, id);
+}
+const IdContextProvider = /* @__PURE__ */ defineComponent((props, {
+  slots
+}) => {
+  const id = computed(() => props.id);
+  useIdContextProvide(id);
+  return () => slots?.default?.();
+}, {
+  props: {
+    id: {
+      type: String,
+      required: true,
+      default: void 0
+    }
+  }
+});
+function getMenuId(uuid, eventKey) {
+  return `${uuid}-${eventKey}`;
+}
+function useMenuId(eventKey) {
+  const id = inject(IdContextKey, ref(""));
+  return computed(() => getMenuId(id.value, eventKey.value));
+}
+export {
+  IdContextProvider,
+  getMenuId,
+  useIdContextProvide,
+  useMenuId
+};