@v-c/menu 0.0.1

package/dist/hooks/useKeyRecords.js

@@ -0,0 +1,93 @@
+import { ref, shallowRef, onBeforeUnmount } from "vue";
+import { nextSlice } from "../utils/timeUtil.js";
+const PATH_SPLIT = "__VC_UTIL_PATH_SPLIT__";
+const getPathStr = (keyPath) => keyPath.join(PATH_SPLIT);
+const getPathKeys = (keyPathStr) => keyPathStr.split(PATH_SPLIT);
+const OVERFLOW_KEY = "vc-menu-more";
+function useKeyRecords() {
+  const forceUpdateCount = ref(0);
+  const key2pathRef = shallowRef(/* @__PURE__ */ new Map());
+  const path2keyRef = shallowRef(/* @__PURE__ */ new Map());
+  const overflowKeys = ref([]);
+  const updateRef = ref(0);
+  const destroyRef = ref(false);
+  const forceUpdate = () => {
+    if (!destroyRef.value) {
+      forceUpdateCount.value += 1;
+    }
+  };
+  const registerPath = (key, keyPath) => {
+    if (process.env.NODE_ENV !== "production") {
+      if (key2pathRef.value.has(key)) {
+        console.warn(
+          `Duplicated key '${key}' used in Menu by path [${keyPath.join(" > ")}]`
+        );
+      }
+    }
+    const connectedPath = getPathStr(keyPath);
+    path2keyRef.value.set(connectedPath, key);
+    key2pathRef.value.set(key, connectedPath);
+    updateRef.value += 1;
+    const id = updateRef.value;
+    nextSlice(() => {
+      if (id === updateRef.value) {
+        forceUpdate();
+      }
+    });
+  };
+  const unregisterPath = (key, keyPath) => {
+    const connectedPath = getPathStr(keyPath);
+    path2keyRef.value.delete(connectedPath);
+    key2pathRef.value.delete(key);
+  };
+  const refreshOverflowKeys = (keys) => {
+    overflowKeys.value = keys;
+  };
+  const getKeyPath = (eventKey, includeOverflow) => {
+    const fullPath = key2pathRef.value.get(eventKey) || "";
+    const keys = getPathKeys(fullPath);
+    if (includeOverflow && overflowKeys.value.includes(keys[0])) {
+      keys.unshift(OVERFLOW_KEY);
+    }
+    return keys;
+  };
+  const isSubPathKey = (pathKeys, eventKey) => pathKeys.filter((item) => item !== void 0).some((pathKey) => {
+    const pathKeyList = getKeyPath(pathKey, true);
+    return pathKeyList.includes(eventKey);
+  });
+  const getKeys = () => {
+    const keys = [...key2pathRef.value.keys()];
+    if (overflowKeys.value.length) {
+      keys.push(OVERFLOW_KEY);
+    }
+    return keys;
+  };
+  const getSubPathKeys = (key) => {
+    const connectedPath = `${key2pathRef.value.get(key)}${PATH_SPLIT}`;
+    const pathKeys = /* @__PURE__ */ new Set();
+    [...path2keyRef.value.keys()].forEach((pathKey) => {
+      if (pathKey.startsWith(connectedPath)) {
+        pathKeys.add(path2keyRef.value.get(pathKey));
+      }
+    });
+    return pathKeys;
+  };
+  onBeforeUnmount(() => {
+    destroyRef.value = true;
+  });
+  return {
+    // Register
+    registerPath,
+    unregisterPath,
+    refreshOverflowKeys,
+    // Util
+    isSubPathKey,
+    getKeyPath,
+    getKeys,
+    getSubPathKeys
+  };
+}
+export {
+  OVERFLOW_KEY,
+  useKeyRecords as default
+};

package/dist/hooks/useMemoCallback.cjs

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const vue = require("vue");
+function useMemoCallback(callback) {
+  const fnRef = vue.ref(callback);
+  fnRef.value = callback;
+  const memoFn = ((...args) => {
+    return fnRef.value(...args);
+  });
+  return memoFn;
+}
+exports.default = useMemoCallback;

package/dist/hooks/useMemoCallback.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Memoize a callback function to keep reference stable
+ */
+export default function useMemoCallback<T extends (...args: any[]) => any>(callback: T): T;

package/dist/hooks/useMemoCallback.js

@@ -0,0 +1,12 @@
+import { ref } from "vue";
+function useMemoCallback(callback) {
+  const fnRef = ref(callback);
+  fnRef.value = callback;
+  const memoFn = ((...args) => {
+    return fnRef.value(...args);
+  });
+  return memoFn;
+}
+export {
+  useMemoCallback as default
+};

package/dist/index.cjs

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const PathContext = require("./context/PathContext.cjs");
+const Divider = require("./Divider.cjs");
+const Menu = require("./Menu.cjs");
+const MenuItem = require("./MenuItem.cjs");
+const MenuItemGroup = require("./MenuItemGroup.cjs");
+const index = require("./SubMenu/index.cjs");
+const ExportMenu = Menu.default;
+ExportMenu.Item = MenuItem.default;
+ExportMenu.SubMenu = index.default;
+ExportMenu.ItemGroup = MenuItemGroup.default;
+ExportMenu.Divider = Divider.default;
+exports.useFullPath = PathContext.useFullPath;
+exports.Divider = Divider.default;
+exports.Item = MenuItem.default;
+exports.MenuItem = MenuItem.default;
+exports.ItemGroup = MenuItemGroup.default;
+exports.MenuItemGroup = MenuItemGroup.default;
+exports.SubMenu = index.default;
+exports.default = ExportMenu;

package/dist/index.d.ts

@@ -0,0 +1,19 @@
+import { MenuRef } from './interface';
+import { MenuProps, default as Menu } from './Menu';
+import { MenuItemProps, default as MenuItem } from './MenuItem';
+import { MenuItemGroupProps, default as MenuItemGroup } from './MenuItemGroup';
+import { SubMenuProps, default as SubMenu } from './SubMenu';
+import { useFullPath } from './context/PathContext';
+import { default as Divider } from './Divider';
+export { Divider, MenuItem as Item, MenuItemGroup as ItemGroup, MenuItem, MenuItemGroup, SubMenu, 
+/** @private Only used for antd internal. Do not use in your production. */
+useFullPath, };
+export type { MenuItemGroupProps, MenuItemProps, MenuProps, MenuRef, SubMenuProps, };
+type MenuType = typeof Menu & {
+    Item: typeof MenuItem;
+    SubMenu: typeof SubMenu;
+    ItemGroup: typeof MenuItemGroup;
+    Divider: typeof Divider;
+};
+declare const ExportMenu: MenuType;
+export default ExportMenu;

package/dist/index.js

@@ -0,0 +1,21 @@
+import { useFullPath } from "./context/PathContext.js";
+import Divider from "./Divider.js";
+import Menu from "./Menu.js";
+import MenuItem from "./MenuItem.js";
+import MenuItemGroup from "./MenuItemGroup.js";
+import SubMenu from "./SubMenu/index.js";
+const ExportMenu = Menu;
+ExportMenu.Item = MenuItem;
+ExportMenu.SubMenu = SubMenu;
+ExportMenu.ItemGroup = MenuItemGroup;
+ExportMenu.Divider = Divider;
+export {
+  Divider,
+  MenuItem as Item,
+  MenuItemGroup as ItemGroup,
+  MenuItem,
+  MenuItemGroup,
+  SubMenu,
+  ExportMenu as default,
+  useFullPath
+};

package/dist/interface.cjs

@@ -0,0 +1 @@
+"use strict";

package/dist/interface.d.ts

@@ -0,0 +1,94 @@
+import { Key, VueNode } from '@v-c/util/dist/type';
+import { CSSProperties } from 'vue';
+import { SubMenuProps } from './SubMenu';
+interface ItemSharedProps {
+    style?: CSSProperties;
+    class?: string;
+}
+export interface SubMenuType extends ItemSharedProps {
+    type?: 'submenu';
+    label?: VueNode;
+    children: ItemType[];
+    disabled?: boolean;
+    key: string;
+    rootClassName?: string;
+    itemIcon?: RenderIconType;
+    expandIcon?: RenderIconType;
+    onMouseEnter?: MenuHoverEventHandler;
+    onMouseLeave?: MenuHoverEventHandler;
+    popupClassName?: string;
+    popupOffset?: number[];
+    popupStyle?: CSSProperties;
+    onClick?: MenuClickEventHandler;
+    onTitleClick?: (info: MenuTitleInfo) => void;
+    onTitleMouseEnter?: MenuHoverEventHandler;
+    onTitleMouseLeave?: MenuHoverEventHandler;
+}
+export interface MenuItemType extends ItemSharedProps {
+    type?: 'item';
+    label?: VueNode;
+    disabled?: boolean;
+    itemIcon?: RenderIconType;
+    extra?: VueNode;
+    key: Key;
+    onMouseEnter?: MenuHoverEventHandler;
+    onMouseLeave?: MenuHoverEventHandler;
+    onClick?: MenuClickEventHandler;
+}
+export interface MenuItemGroupType extends ItemSharedProps {
+    type: 'group';
+    label?: VueNode;
+    children?: ItemType[];
+}
+export interface MenuDividerType extends ItemSharedProps {
+    type: 'divider';
+}
+export type ItemType = SubMenuType | MenuItemType | MenuItemGroupType | MenuDividerType | null;
+export type MenuMode = 'horizontal' | 'vertical' | 'inline';
+export type BuiltinPlacements = Record<string, any>;
+export type TriggerSubMenuAction = 'click' | 'hover';
+export interface RenderIconInfo {
+    isSelected?: boolean;
+    isOpen?: boolean;
+    isSubMenu?: boolean;
+    disabled?: boolean;
+}
+export type RenderIconType = VueNode | ((props: RenderIconInfo) => VueNode) | boolean;
+export interface MenuInfo {
+    key: string;
+    keyPath: string[];
+    /** @deprecated This will not support in future. You should avoid to use this */
+    item: VueNode;
+    domEvent: MouseEvent;
+}
+export interface MenuTitleInfo {
+    key: string;
+    domEvent: MouseEvent;
+}
+export type MenuHoverEventHandler = (info: {
+    key: string;
+    domEvent: MouseEvent;
+}) => void;
+export interface SelectInfo extends MenuInfo {
+    selectedKeys: string[];
+}
+export type SelectEventHandler = (info: SelectInfo) => void;
+export type MenuClickEventHandler = (info: MenuInfo) => void;
+export interface MenuRef {
+    /**
+     * Focus active child if any, or the first child which is not disabled will be focused.
+     * @param options
+     */
+    focus: (options?: FocusOptions) => void;
+    list: HTMLUListElement;
+    findItem: (params: {
+        key: string;
+    }) => HTMLElement | null;
+}
+export type ComponentType = 'submenu' | 'item' | 'group' | 'divider';
+export type Components = Partial<Record<ComponentType, any>>;
+export type PopupRender = (node: any, info: {
+    item: SubMenuProps;
+    keys: string[];
+}) => VueNode;
+export {};

package/dist/interface.js

@@ -0,0 +1 @@
+

package/dist/placements.cjs

@@ -0,0 +1,77 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const autoAdjustOverflow = {
+  adjustX: 1,
+  adjustY: 1
+};
+const placements = {
+  topLeft: {
+    points: ["bl", "tl"],
+    overflow: autoAdjustOverflow
+  },
+  topRight: {
+    points: ["br", "tr"],
+    overflow: autoAdjustOverflow
+  },
+  bottomLeft: {
+    points: ["tl", "bl"],
+    overflow: autoAdjustOverflow
+  },
+  bottomRight: {
+    points: ["tr", "br"],
+    overflow: autoAdjustOverflow
+  },
+  leftTop: {
+    points: ["tr", "tl"],
+    overflow: autoAdjustOverflow
+  },
+  leftBottom: {
+    points: ["br", "bl"],
+    overflow: autoAdjustOverflow
+  },
+  rightTop: {
+    points: ["tl", "tr"],
+    overflow: autoAdjustOverflow
+  },
+  rightBottom: {
+    points: ["bl", "br"],
+    overflow: autoAdjustOverflow
+  }
+};
+const placementsRtl = {
+  topLeft: {
+    points: ["bl", "tl"],
+    overflow: autoAdjustOverflow
+  },
+  topRight: {
+    points: ["br", "tr"],
+    overflow: autoAdjustOverflow
+  },
+  bottomLeft: {
+    points: ["tl", "bl"],
+    overflow: autoAdjustOverflow
+  },
+  bottomRight: {
+    points: ["tr", "br"],
+    overflow: autoAdjustOverflow
+  },
+  rightTop: {
+    points: ["tr", "tl"],
+    overflow: autoAdjustOverflow
+  },
+  rightBottom: {
+    points: ["br", "bl"],
+    overflow: autoAdjustOverflow
+  },
+  leftTop: {
+    points: ["tl", "tr"],
+    overflow: autoAdjustOverflow
+  },
+  leftBottom: {
+    points: ["bl", "br"],
+    overflow: autoAdjustOverflow
+  }
+};
+exports.default = placements;
+exports.placements = placements;
+exports.placementsRtl = placementsRtl;

package/dist/placements.d.ts

@@ -0,0 +1,117 @@
+export declare const placements: {
+    topLeft: {
+        points: string[];
+        overflow: {
+            adjustX: number;
+            adjustY: number;
+        };
+    };
+    topRight: {
+        points: string[];
+        overflow: {
+            adjustX: number;
+            adjustY: number;
+        };
+    };
+    bottomLeft: {
+        points: string[];
+        overflow: {
+            adjustX: number;
+            adjustY: number;
+        };
+    };
+    bottomRight: {
+        points: string[];
+        overflow: {
+            adjustX: number;
+            adjustY: number;
+        };
+    };
+    leftTop: {
+        points: string[];
+        overflow: {
+            adjustX: number;
+            adjustY: number;
+        };
+    };
+    leftBottom: {
+        points: string[];
+        overflow: {
+            adjustX: number;
+            adjustY: number;
+        };
+    };
+    rightTop: {
+        points: string[];
+        overflow: {
+            adjustX: number;
+            adjustY: number;
+        };
+    };
+    rightBottom: {
+        points: string[];
+        overflow: {
+            adjustX: number;
+            adjustY: number;
+        };
+    };
+};
+export declare const placementsRtl: {
+    topLeft: {
+        points: string[];
+        overflow: {
+            adjustX: number;
+            adjustY: number;
+        };
+    };
+    topRight: {
+        points: string[];
+        overflow: {
+            adjustX: number;
+            adjustY: number;
+        };
+    };
+    bottomLeft: {
+        points: string[];
+        overflow: {
+            adjustX: number;
+            adjustY: number;
+        };
+    };
+    bottomRight: {
+        points: string[];
+        overflow: {
+            adjustX: number;
+            adjustY: number;
+        };
+    };
+    rightTop: {
+        points: string[];
+        overflow: {
+            adjustX: number;
+            adjustY: number;
+        };
+    };
+    rightBottom: {
+        points: string[];
+        overflow: {
+            adjustX: number;
+            adjustY: number;
+        };
+    };
+    leftTop: {
+        points: string[];
+        overflow: {
+            adjustX: number;
+            adjustY: number;
+        };
+    };
+    leftBottom: {
+        points: string[];
+        overflow: {
+            adjustX: number;
+            adjustY: number;
+        };
+    };
+};
+export default placements;

package/dist/placements.js

@@ -0,0 +1,77 @@
+const autoAdjustOverflow = {
+  adjustX: 1,
+  adjustY: 1
+};
+const placements = {
+  topLeft: {
+    points: ["bl", "tl"],
+    overflow: autoAdjustOverflow
+  },
+  topRight: {
+    points: ["br", "tr"],
+    overflow: autoAdjustOverflow
+  },
+  bottomLeft: {
+    points: ["tl", "bl"],
+    overflow: autoAdjustOverflow
+  },
+  bottomRight: {
+    points: ["tr", "br"],
+    overflow: autoAdjustOverflow
+  },
+  leftTop: {
+    points: ["tr", "tl"],
+    overflow: autoAdjustOverflow
+  },
+  leftBottom: {
+    points: ["br", "bl"],
+    overflow: autoAdjustOverflow
+  },
+  rightTop: {
+    points: ["tl", "tr"],
+    overflow: autoAdjustOverflow
+  },
+  rightBottom: {
+    points: ["bl", "br"],
+    overflow: autoAdjustOverflow
+  }
+};
+const placementsRtl = {
+  topLeft: {
+    points: ["bl", "tl"],
+    overflow: autoAdjustOverflow
+  },
+  topRight: {
+    points: ["br", "tr"],
+    overflow: autoAdjustOverflow
+  },
+  bottomLeft: {
+    points: ["tl", "bl"],
+    overflow: autoAdjustOverflow
+  },
+  bottomRight: {
+    points: ["tr", "br"],
+    overflow: autoAdjustOverflow
+  },
+  rightTop: {
+    points: ["tr", "tl"],
+    overflow: autoAdjustOverflow
+  },
+  rightBottom: {
+    points: ["br", "bl"],
+    overflow: autoAdjustOverflow
+  },
+  leftTop: {
+    points: ["tl", "tr"],
+    overflow: autoAdjustOverflow
+  },
+  leftBottom: {
+    points: ["bl", "br"],
+    overflow: autoAdjustOverflow
+  }
+};
+export {
+  placements as default,
+  placements,
+  placementsRtl
+};

package/dist/utils/commonUtil.cjs

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const toArray = require("@v-c/util/dist/Children/toArray");
+const vue = require("vue");
+function parseChildren(children, keyPath) {
+  return toArray.toArray(children).map((child, index) => {
+    if (vue.isVNode(child)) {
+      const key = child.key;
+      let eventKey = child.props?.eventKey ?? key;
+      const emptyKey = eventKey === null || eventKey === void 0;
+      if (emptyKey) {
+        eventKey = `tmp_key-${[...keyPath, index].join("-")}`;
+      }
+      const cloneProps = { key: eventKey, eventKey };
+      if (process.env.NODE_ENV !== "production" && emptyKey) {
+        cloneProps.warnKey = true;
+      }
+      return {
+        ...child,
+        props: {
+          ...child.props,
+          ...cloneProps
+        }
+      };
+    }
+    return child;
+  });
+}
+exports.parseChildren = parseChildren;

package/dist/utils/commonUtil.d.ts

@@ -0,0 +1 @@
+export declare function parseChildren(children: any | undefined, keyPath: string[]): any[];

package/dist/utils/commonUtil.js

@@ -0,0 +1,29 @@
+import { toArray } from "@v-c/util/dist/Children/toArray";
+import { isVNode } from "vue";
+function parseChildren(children, keyPath) {
+  return toArray(children).map((child, index) => {
+    if (isVNode(child)) {
+      const key = child.key;
+      let eventKey = child.props?.eventKey ?? key;
+      const emptyKey = eventKey === null || eventKey === void 0;
+      if (emptyKey) {
+        eventKey = `tmp_key-${[...keyPath, index].join("-")}`;
+      }
+      const cloneProps = { key: eventKey, eventKey };
+      if (process.env.NODE_ENV !== "production" && emptyKey) {
+        cloneProps.warnKey = true;
+      }
+      return {
+        ...child,
+        props: {
+          ...child.props,
+          ...cloneProps
+        }
+      };
+    }
+    return child;
+  });
+}
+export {
+  parseChildren
+};

package/dist/utils/motionUtil.cjs

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+function getMotion(mode, motion, defaultMotions) {
+  if (motion) {
+    return motion;
+  }
+  if (defaultMotions) {
+    return defaultMotions?.[mode] || defaultMotions?.other;
+  }
+  return void 0;
+}
+exports.getMotion = getMotion;

package/dist/utils/motionUtil.d.ts

@@ -0,0 +1,2 @@
+import { CSSMotionProps } from '@v-c/util/dist/utils/transition';
+export declare function getMotion(mode: string, motion?: CSSMotionProps, defaultMotions?: Record<string, CSSMotionProps>): CSSMotionProps | undefined;

package/dist/utils/motionUtil.js

@@ -0,0 +1,12 @@
+function getMotion(mode, motion, defaultMotions) {
+  if (motion) {
+    return motion;
+  }
+  if (defaultMotions) {
+    return defaultMotions?.[mode] || defaultMotions?.other;
+  }
+  return void 0;
+}
+export {
+  getMotion
+};