@v-c/menu 0.0.1

package/dist/MenuItemGroup.cjs

@@ -0,0 +1,120 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const vue = require("vue");
+const util = require("@v-c/util");
+const omit = require("@v-c/util/dist/omit.ts");
+const propsUtil = require("@v-c/util/dist/props-util");
+const MenuContext = require("./context/MenuContext.cjs");
+const PathContext = require("./context/PathContext.cjs");
+const commonUtil = require("./utils/commonUtil.cjs");
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !vue.isVNode(s);
+}
+const InternalMenuItemGroup = /* @__PURE__ */ vue.defineComponent((props, {
+  slots
+}) => {
+  const context = MenuContext.useMenuContext();
+  return () => {
+    const {
+      class: className,
+      title,
+      eventKey,
+      ...restProps
+    } = props;
+    const {
+      prefixCls,
+      classNames: menuClassNames,
+      styles
+    } = context?.value ?? {};
+    const groupPrefixCls = `${prefixCls}-item-group`;
+    return vue.createVNode("li", vue.mergeProps({
+      "role": "presentation"
+    }, restProps, {
+      "onClick": (e) => e.stopPropagation(),
+      "class": util.clsx(groupPrefixCls, className)
+    }), [vue.createVNode("div", {
+      "role": "presentation",
+      "class": util.clsx(`${groupPrefixCls}-title`, menuClassNames?.listTitle),
+      "style": styles?.listTitle,
+      "title": typeof title === "string" ? title : void 0
+    }, [title]), vue.createVNode("ul", {
+      "role": "group",
+      "class": util.clsx(`${groupPrefixCls}-list`, menuClassNames?.list),
+      "style": styles?.list
+    }, [slots?.default ? slots.default() : null])]);
+  };
+}, {
+  props: {
+    title: {
+      type: null,
+      required: false,
+      default: void 0
+    },
+    eventKey: {
+      type: String,
+      required: false,
+      default: void 0
+    },
+    warnKey: {
+      type: Boolean,
+      required: false,
+      default: void 0
+    },
+    style: {
+      type: null,
+      required: false,
+      default: void 0
+    },
+    class: {
+      type: String,
+      required: false,
+      default: void 0
+    }
+  }
+});
+const MenuItemGroup = /* @__PURE__ */ vue.defineComponent((props, ctx) => {
+  const connectedKeyPath = PathContext.useFullPath(vue.computed(() => props.eventKey));
+  const measure = PathContext.useMeasure();
+  return () => {
+    const slots = ctx.slots;
+    const children = propsUtil.filterEmpty(slots.default ? slots.default() : []);
+    const childList = commonUtil.parseChildren(children, connectedKeyPath.value);
+    if (measure) {
+      return childList;
+    }
+    return vue.createVNode(InternalMenuItemGroup, omit(props, ["warnKey"]), _isSlot(childList) ? childList : {
+      default: () => [childList]
+    });
+  };
+}, {
+  props: {
+    title: {
+      type: null,
+      required: false,
+      default: void 0
+    },
+    eventKey: {
+      type: String,
+      required: false,
+      default: void 0
+    },
+    warnKey: {
+      type: Boolean,
+      required: false,
+      default: void 0
+    },
+    style: {
+      type: null,
+      required: false,
+      default: void 0
+    },
+    class: {
+      type: String,
+      required: false,
+      default: void 0
+    }
+  },
+  name: "MenuItemGroup",
+  inheritAttrs: false
+});
+exports.default = MenuItemGroup;

package/dist/MenuItemGroup.d.ts

@@ -0,0 +1,16 @@
+import { VueNode } from '@v-c/util/dist/type';
+import { MenuItemGroupType } from './interface';
+export interface MenuItemGroupProps extends Omit<MenuItemGroupType, 'type' | 'children' | 'label'> {
+    title?: VueNode;
+    /**
+     *
+     * @private
+     */
+    eventKey?: string;
+    /**
+     *  @private
+     */
+    warnKey?: boolean;
+}
+declare const MenuItemGroup: import('vue').DefineSetupFnComponent<MenuItemGroupProps, {}, {}, MenuItemGroupProps & {}, import('vue').PublicProps>;
+export default MenuItemGroup;

package/dist/MenuItemGroup.js

@@ -0,0 +1,120 @@
+import { defineComponent, computed, createVNode, mergeProps, isVNode } from "vue";
+import { clsx } from "@v-c/util";
+import omit from "@v-c/util/dist/omit.ts";
+import { filterEmpty } from "@v-c/util/dist/props-util";
+import { useMenuContext } from "./context/MenuContext.js";
+import { useFullPath, useMeasure } from "./context/PathContext.js";
+import { parseChildren } from "./utils/commonUtil.js";
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+const InternalMenuItemGroup = /* @__PURE__ */ defineComponent((props, {
+  slots
+}) => {
+  const context = useMenuContext();
+  return () => {
+    const {
+      class: className,
+      title,
+      eventKey,
+      ...restProps
+    } = props;
+    const {
+      prefixCls,
+      classNames: menuClassNames,
+      styles
+    } = context?.value ?? {};
+    const groupPrefixCls = `${prefixCls}-item-group`;
+    return createVNode("li", mergeProps({
+      "role": "presentation"
+    }, restProps, {
+      "onClick": (e) => e.stopPropagation(),
+      "class": clsx(groupPrefixCls, className)
+    }), [createVNode("div", {
+      "role": "presentation",
+      "class": clsx(`${groupPrefixCls}-title`, menuClassNames?.listTitle),
+      "style": styles?.listTitle,
+      "title": typeof title === "string" ? title : void 0
+    }, [title]), createVNode("ul", {
+      "role": "group",
+      "class": clsx(`${groupPrefixCls}-list`, menuClassNames?.list),
+      "style": styles?.list
+    }, [slots?.default ? slots.default() : null])]);
+  };
+}, {
+  props: {
+    title: {
+      type: null,
+      required: false,
+      default: void 0
+    },
+    eventKey: {
+      type: String,
+      required: false,
+      default: void 0
+    },
+    warnKey: {
+      type: Boolean,
+      required: false,
+      default: void 0
+    },
+    style: {
+      type: null,
+      required: false,
+      default: void 0
+    },
+    class: {
+      type: String,
+      required: false,
+      default: void 0
+    }
+  }
+});
+const MenuItemGroup = /* @__PURE__ */ defineComponent((props, ctx) => {
+  const connectedKeyPath = useFullPath(computed(() => props.eventKey));
+  const measure = useMeasure();
+  return () => {
+    const slots = ctx.slots;
+    const children = filterEmpty(slots.default ? slots.default() : []);
+    const childList = parseChildren(children, connectedKeyPath.value);
+    if (measure) {
+      return childList;
+    }
+    return createVNode(InternalMenuItemGroup, omit(props, ["warnKey"]), _isSlot(childList) ? childList : {
+      default: () => [childList]
+    });
+  };
+}, {
+  props: {
+    title: {
+      type: null,
+      required: false,
+      default: void 0
+    },
+    eventKey: {
+      type: String,
+      required: false,
+      default: void 0
+    },
+    warnKey: {
+      type: Boolean,
+      required: false,
+      default: void 0
+    },
+    style: {
+      type: null,
+      required: false,
+      default: void 0
+    },
+    class: {
+      type: String,
+      required: false,
+      default: void 0
+    }
+  },
+  name: "MenuItemGroup",
+  inheritAttrs: false
+});
+export {
+  MenuItemGroup as default
+};

package/dist/SubMenu/InlineSubMenuList.cjs

@@ -0,0 +1,84 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const vue = require("vue");
+const transition = require("@v-c/util/dist/utils/transition");
+const MenuContext = require("../context/MenuContext.cjs");
+const motionUtil = require("../utils/motionUtil.cjs");
+const SubMenuList = require("./SubMenuList.cjs");
+const InlineSubMenuList = /* @__PURE__ */ vue.defineComponent((props, {
+  slots
+}) => {
+  const fixedMode = "inline";
+  const menuContext = MenuContext.useMenuContext();
+  const sameModeRef = vue.shallowRef(false);
+  vue.watchEffect(() => {
+    sameModeRef.value = menuContext?.value?.mode === fixedMode;
+  });
+  const destroy = vue.shallowRef(!sameModeRef.value);
+  vue.watch(() => menuContext?.value?.mode, () => {
+    if (sameModeRef.value) {
+      destroy.value = false;
+    }
+  }, {
+    immediate: true
+  });
+  const mergedOpen = vue.computed(() => sameModeRef.value ? props?.open : false);
+  const mergedMotion = vue.computed(() => {
+    const {
+      motion,
+      defaultMotions
+    } = menuContext?.value ?? {};
+    const motionData = {
+      ...motionUtil.getMotion(fixedMode, motion, defaultMotions)
+    };
+    if (props.keyPath && props.keyPath.length > 1) {
+      motionData.appear = false;
+    }
+    const _onAfterLeave = motionData.onAfterLeave;
+    motionData.onAfterLeave = (el) => {
+      if (!sameModeRef.value) {
+        destroy.value = true;
+      }
+      return _onAfterLeave?.(el);
+    };
+    return motionData;
+  });
+  return () => {
+    if (destroy.value) {
+      return null;
+    }
+    return vue.createVNode(MenuContext.default, {
+      "mode": fixedMode,
+      "locked": !sameModeRef.value
+    }, {
+      default: () => [vue.createVNode(vue.Transition, transition.getTransitionProps(mergedMotion.value?.name, mergedMotion.value), {
+        default: () => [mergedOpen.value && vue.createVNode(SubMenuList.default, {
+          "id": props.id
+        }, {
+          default: () => [slots?.default?.()]
+        })]
+      })]
+    });
+  };
+}, {
+  props: {
+    id: {
+      type: String,
+      required: false,
+      default: void 0
+    },
+    open: {
+      type: Boolean,
+      required: true,
+      default: void 0
+    },
+    keyPath: {
+      type: Array,
+      required: true,
+      default: void 0
+    }
+  },
+  name: "InlineSubMenuList",
+  inheritAttrs: false
+});
+exports.default = InlineSubMenuList;

package/dist/SubMenu/InlineSubMenuList.d.ts

@@ -0,0 +1,7 @@
+export interface InlineSubMenuListProps {
+    id?: string;
+    open: boolean;
+    keyPath: string[];
+}
+declare const InlineSubMenuList: import('vue').DefineSetupFnComponent<InlineSubMenuListProps, {}, {}, InlineSubMenuListProps & {}, import('vue').PublicProps>;
+export default InlineSubMenuList;

package/dist/SubMenu/InlineSubMenuList.js

@@ -0,0 +1,84 @@
+import { defineComponent, shallowRef, watchEffect, watch, computed, createVNode, Transition } from "vue";
+import { getTransitionProps } from "@v-c/util/dist/utils/transition";
+import InheritableContextProvider, { useMenuContext } from "../context/MenuContext.js";
+import { getMotion } from "../utils/motionUtil.js";
+import InternalSubMenuList from "./SubMenuList.js";
+const InlineSubMenuList = /* @__PURE__ */ defineComponent((props, {
+  slots
+}) => {
+  const fixedMode = "inline";
+  const menuContext = useMenuContext();
+  const sameModeRef = shallowRef(false);
+  watchEffect(() => {
+    sameModeRef.value = menuContext?.value?.mode === fixedMode;
+  });
+  const destroy = shallowRef(!sameModeRef.value);
+  watch(() => menuContext?.value?.mode, () => {
+    if (sameModeRef.value) {
+      destroy.value = false;
+    }
+  }, {
+    immediate: true
+  });
+  const mergedOpen = computed(() => sameModeRef.value ? props?.open : false);
+  const mergedMotion = computed(() => {
+    const {
+      motion,
+      defaultMotions
+    } = menuContext?.value ?? {};
+    const motionData = {
+      ...getMotion(fixedMode, motion, defaultMotions)
+    };
+    if (props.keyPath && props.keyPath.length > 1) {
+      motionData.appear = false;
+    }
+    const _onAfterLeave = motionData.onAfterLeave;
+    motionData.onAfterLeave = (el) => {
+      if (!sameModeRef.value) {
+        destroy.value = true;
+      }
+      return _onAfterLeave?.(el);
+    };
+    return motionData;
+  });
+  return () => {
+    if (destroy.value) {
+      return null;
+    }
+    return createVNode(InheritableContextProvider, {
+      "mode": fixedMode,
+      "locked": !sameModeRef.value
+    }, {
+      default: () => [createVNode(Transition, getTransitionProps(mergedMotion.value?.name, mergedMotion.value), {
+        default: () => [mergedOpen.value && createVNode(InternalSubMenuList, {
+          "id": props.id
+        }, {
+          default: () => [slots?.default?.()]
+        })]
+      })]
+    });
+  };
+}, {
+  props: {
+    id: {
+      type: String,
+      required: false,
+      default: void 0
+    },
+    open: {
+      type: Boolean,
+      required: true,
+      default: void 0
+    },
+    keyPath: {
+      type: Array,
+      required: true,
+      default: void 0
+    }
+  },
+  name: "InlineSubMenuList",
+  inheritAttrs: false
+});
+export {
+  InlineSubMenuList as default
+};

package/dist/SubMenu/PopupTrigger.cjs

@@ -0,0 +1,168 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const vue = require("vue");
+const Trigger = require("@v-c/trigger");
+const util = require("@v-c/util");
+const raf = require("@v-c/util/dist/raf.ts");
+const MenuContext = require("../context/MenuContext.cjs");
+const placements = require("../placements.cjs");
+const motionUtil = require("../utils/motionUtil.cjs");
+const popupPlacementMap = {
+  "horizontal": "bottomLeft",
+  "vertical": "rightTop",
+  "vertical-left": "rightTop",
+  "vertical-right": "leftTop"
+};
+const PopupTrigger = /* @__PURE__ */ vue.defineComponent((props, {
+  slots
+}) => {
+  const menuContext = MenuContext.useMenuContext();
+  const innerVisible = vue.shallowRef(props.visible ?? false);
+  const placement = vue.computed(() => {
+    const rtl = menuContext?.value?.rtl;
+    const builtinPlacements = menuContext?.value?.builtinPlacements;
+    return rtl ? {
+      ...placements.placementsRtl,
+      ...builtinPlacements
+    } : {
+      ...placements.placements,
+      ...builtinPlacements
+    };
+  });
+  const triggerMode = vue.computed(() => props.mode);
+  const popupPlacement = vue.computed(() => {
+    return popupPlacementMap[triggerMode.value];
+  });
+  const defaultMotions = vue.computed(() => menuContext?.value?.defaultMotions);
+  const motion = vue.computed(() => menuContext?.value?.motion);
+  const targetMotion = vue.computed(() => {
+    return {
+      ...motionUtil.getMotion(triggerMode.value, motion.value, defaultMotions.value)
+    };
+  });
+  const targetMotionRef = vue.shallowRef(targetMotion.value);
+  vue.watch(triggerMode, (mode) => {
+    if (mode !== "inline") {
+      targetMotionRef.value = targetMotion.value;
+    }
+  }, {
+    immediate: true
+  });
+  vue.watch([motion, defaultMotions], () => {
+    if (triggerMode.value !== "inline") {
+      targetMotionRef.value = targetMotion.value;
+    }
+  });
+  const mergedMotion = vue.computed(() => {
+    return {
+      ...targetMotionRef.value,
+      appear: true
+    };
+  });
+  const visibleRef = vue.shallowRef();
+  vue.watch(() => props.visible, (visible, _, onCleanup) => {
+    visibleRef.value = raf(() => {
+      innerVisible.value = visible;
+    });
+    onCleanup(() => {
+      if (visibleRef.value !== void 0) {
+        raf.cancel(visibleRef.value);
+      }
+    });
+  });
+  return () => {
+    const {
+      popupClassName,
+      popup,
+      popupStyle,
+      popupOffset,
+      disabled,
+      onVisibleChange,
+      prefixCls
+    } = props;
+    const {
+      rtl,
+      rootClassName,
+      mode,
+      getPopupContainer,
+      triggerSubMenuAction,
+      subMenuCloseDelay,
+      subMenuOpenDelay,
+      forceSubMenuRender
+    } = menuContext?.value ?? {};
+    return vue.createVNode(Trigger, {
+      "prefixCls": prefixCls,
+      "popupClassName": util.clsx(`${prefixCls}-popup`, {
+        [`${prefixCls}-rtl`]: rtl
+      }, popupClassName, rootClassName),
+      "stretch": mode === "horizontal" ? "minWidth" : void 0,
+      "getPopupContainer": getPopupContainer,
+      "builtinPlacements": placement.value,
+      "popupPlacement": popupPlacement.value,
+      "popupVisible": innerVisible.value,
+      "popup": popup,
+      "popupStyle": popupStyle,
+      "popupAlign": popupOffset && {
+        offset: popupOffset
+      },
+      "action": disabled ? [] : [triggerSubMenuAction],
+      "mouseEnterDelay": subMenuOpenDelay,
+      "mouseLeaveDelay": subMenuCloseDelay,
+      "onOpenChange": onVisibleChange,
+      "forceRender": forceSubMenuRender,
+      "popupMotion": mergedMotion.value,
+      "fresh": true
+    }, {
+      default: () => [slots?.default?.()]
+    });
+  };
+}, {
+  props: {
+    prefixCls: {
+      type: String,
+      required: true,
+      default: void 0
+    },
+    mode: {
+      type: String,
+      required: true,
+      default: void 0
+    },
+    visible: {
+      type: Boolean,
+      required: true,
+      default: void 0
+    },
+    popup: {
+      type: null,
+      required: true,
+      default: void 0
+    },
+    popupStyle: {
+      type: null,
+      required: false,
+      default: void 0
+    },
+    popupClassName: {
+      type: String,
+      required: false,
+      default: void 0
+    },
+    popupOffset: {
+      type: Array,
+      required: false,
+      default: void 0
+    },
+    disabled: {
+      type: Boolean,
+      required: true,
+      default: void 0
+    },
+    onVisibleChange: {
+      type: Function,
+      required: true,
+      default: void 0
+    }
+  }
+});
+exports.default = PopupTrigger;

package/dist/SubMenu/PopupTrigger.d.ts

@@ -0,0 +1,16 @@
+import { VueNode } from '@v-c/util/dist/type.ts';
+import { CSSProperties } from 'vue';
+import { MenuMode } from '../interface.ts';
+export interface PopupTriggerProps {
+    prefixCls: string;
+    mode: MenuMode;
+    visible: boolean;
+    popup: VueNode;
+    popupStyle?: CSSProperties;
+    popupClassName?: string;
+    popupOffset?: number[];
+    disabled: boolean;
+    onVisibleChange: (visible: boolean) => void;
+}
+declare const PopupTrigger: import('vue').DefineSetupFnComponent<PopupTriggerProps, {}, {}, PopupTriggerProps & {}, import('vue').PublicProps>;
+export default PopupTrigger;