@v-c/menu 0.0.1

package/dist/MenuItem.cjs

@@ -0,0 +1,350 @@
+"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 KeyCode = require("@v-c/util/dist/KeyCode");
+const omit = require("@v-c/util/dist/omit");
+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 useActive = require("./hooks/useActive.cjs");
+const useDirectionStyle = require("./hooks/useDirectionStyle.cjs");
+const Icon = require("./Icon.cjs");
+const warnUtil = require("./utils/warnUtil.cjs");
+const LegacyMenuItem = /* @__PURE__ */ vue.defineComponent((props, {
+  slots,
+  attrs
+}) => {
+  return () => {
+    const {
+      title,
+      attribute,
+      ...restProps
+    } = attrs;
+    const {
+      elementRef
+    } = props;
+    const passedProps = omit(restProps, ["eventKey", "popupClassName", "popupOffset", "onTitleClick"]);
+    util.warning(!attribute, "`attribute` of Menu.Item is deprecated. Please pass attribute directly.");
+    return vue.createVNode(Overflow.Item, vue.mergeProps(attribute, {
+      "title": typeof title === "string" ? title : void 0
+    }, passedProps, {
+      "ref": elementRef
+    }), {
+      default: () => [slots?.default?.()]
+    });
+  };
+}, {
+  props: {
+    elementRef: {
+      type: null,
+      required: false,
+      default: void 0
+    }
+  },
+  name: "LegacyMenuItem",
+  inheritAttrs: false
+});
+const InternalMenuItem = /* @__PURE__ */ vue.defineComponent((props, {
+  slots,
+  attrs
+}) => {
+  const {
+    eventKey
+  } = propsUtil.toPropsRefs(props, "eventKey");
+  const domDataId = IdContext.useMenuId(eventKey);
+  const menuContext = MenuContext.useMenuContext();
+  const privateContext = PrivateContext.usePrivateContext();
+  const legacyMenuItemRef = vue.shallowRef();
+  const elementRef = vue.shallowRef();
+  const mergedDisabled = vue.computed(() => props.disabled ?? menuContext?.value?.disabled);
+  const connectedKeys = PathContext.useFullPath(eventKey);
+  if (process.env.NODE_ENV !== "production" && props.warnKey) {
+    util.warning(false, "MenuItem should not leave undefined `key`.");
+  }
+  const getEventInfo = (e) => {
+    return {
+      key: eventKey.value,
+      // Note: For legacy code is reversed which not like other antd component
+      keyPath: [...connectedKeys.value].reverse(),
+      item: legacyMenuItemRef.value,
+      domEvent: e
+    };
+  };
+  const ret = useActive.default(eventKey, mergedDisabled, props?.onMouseEnter, props?.onMouseLeave);
+  const active = ret.active;
+  const selected = vue.computed(() => !!menuContext?.value?.selectedKeys?.includes?.(eventKey.value));
+  const directionStyle = useDirectionStyle.default(vue.computed(() => connectedKeys.value.length));
+  const onInternalClick = (e) => {
+    if (mergedDisabled.value) {
+      return;
+    }
+    const info = getEventInfo(e);
+    props?.onClick?.(warnUtil.warnItemProp(info));
+    menuContext?.value?.onItemClick?.(info);
+  };
+  const onInternalKeyDown = (e) => {
+    props?.onKeyDown?.(e);
+    if (e.which === KeyCode.ENTER) {
+      const info = getEventInfo(e);
+      props?.onClick?.(warnUtil.warnItemProp(info));
+      menuContext?.value?.onItemClick?.(info);
+    }
+  };
+  const onInternalFocus = (e) => {
+    menuContext?.value?.onActive?.(eventKey.value);
+    props?.onFocus?.(e);
+  };
+  return () => {
+    const {
+      role,
+      disabled,
+      itemIcon,
+      ...restProps
+    } = props;
+    const optionRoleProps = {};
+    if (role === "option") {
+      optionRoleProps["aria-selected"] = selected.value;
+    }
+    const {
+      prefixCls,
+      overflowDisabled,
+      itemIcon: contextItemIcon
+    } = menuContext?.value ?? {};
+    const mergedItemIcon = itemIcon || contextItemIcon;
+    const itemCls = `${prefixCls}-item`;
+    const activeProps = {
+      onMouseenter: ret.onMouseEnter,
+      onMouseleave: ret.onMouseLeave
+    };
+    let renderNode = vue.createVNode(LegacyMenuItem, vue.mergeProps({
+      "ref": legacyMenuItemRef,
+      "elementRef": elementRef,
+      "role": role === null ? "none" : role || "menuitem",
+      "tabIndex": disabled ? null : -1,
+      "data-menu-id": overflowDisabled && domDataId.value ? null : domDataId.value
+    }, omit({
+      ...restProps,
+      ...attrs
+    }, ["extra"]), activeProps, optionRoleProps, {
+      "component": "li",
+      "aria-disabled": disabled,
+      "style": [directionStyle.value, props?.style],
+      "className": util.clsx(itemCls, {
+        [`${itemCls}-active`]: active.value,
+        [`${itemCls}-selected`]: selected.value,
+        [`${itemCls}-disabled`]: mergedDisabled.value
+      }, props.class),
+      "onClick": onInternalClick,
+      "onKeydown": onInternalKeyDown,
+      "onFocus": onInternalFocus
+    }), {
+      default: () => [slots?.default?.(), vue.createVNode(Icon.default, {
+        "props": {
+          ...props,
+          isSelected: selected.value
+        },
+        "icon": mergedItemIcon
+      }, null)]
+    });
+    if (privateContext._internalRenderMenuItem) {
+      renderNode = privateContext._internalRenderMenuItem(renderNode, props, {
+        selected: selected.value
+      });
+    }
+    return renderNode;
+  };
+}, {
+  props: {
+    eventKey: {
+      type: String,
+      required: false,
+      default: void 0
+    },
+    warnKey: {
+      type: Boolean,
+      required: false,
+      default: void 0
+    },
+    attribute: {
+      type: Object,
+      required: false,
+      default: void 0
+    },
+    onKeyDown: {
+      type: Function,
+      required: false,
+      default: void 0
+    },
+    onFocus: {
+      type: Function,
+      required: false,
+      default: void 0
+    },
+    role: {
+      type: String,
+      required: false,
+      default: void 0
+    },
+    type: {
+      type: String,
+      required: false,
+      default: void 0
+    },
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: void 0
+    },
+    itemIcon: {
+      type: [String, Number, null, Array, Function, Boolean],
+      required: false,
+      skipCheck: true,
+      default: void 0
+    },
+    extra: {
+      type: null,
+      required: false,
+      default: void 0
+    },
+    onMouseEnter: {
+      type: Function,
+      required: false,
+      default: void 0
+    },
+    onMouseLeave: {
+      type: Function,
+      required: false,
+      default: void 0
+    },
+    onClick: {
+      type: Function,
+      required: false,
+      default: void 0
+    },
+    style: {
+      type: null,
+      required: false,
+      default: void 0
+    },
+    class: {
+      type: String,
+      required: false,
+      default: void 0
+    }
+  },
+  name: "InternalMenuItem",
+  inheritAttrs: false
+});
+const MenuItem = /* @__PURE__ */ vue.defineComponent((props, {
+  slots,
+  attrs
+}) => {
+  const {
+    eventKey
+  } = propsUtil.toPropsRefs(props, "eventKey");
+  const measure = PathContext.useMeasure();
+  const connectedKeyPath = PathContext.useFullPath(eventKey);
+  vue.watch([connectedKeyPath], (_n, _o, onCleanup) => {
+    if (measure) {
+      measure.registerPath(eventKey.value, connectedKeyPath.value);
+    }
+    onCleanup(() => {
+      measure?.unregisterPath(eventKey.value, connectedKeyPath.value);
+    });
+  });
+  return () => {
+    if (measure) {
+      return null;
+    }
+    return vue.createVNode(InternalMenuItem, {
+      ...attrs,
+      ...props
+    }, slots);
+  };
+}, {
+  props: {
+    eventKey: {
+      type: String,
+      required: false,
+      default: void 0
+    },
+    warnKey: {
+      type: Boolean,
+      required: false,
+      default: void 0
+    },
+    attribute: {
+      type: Object,
+      required: false,
+      default: void 0
+    },
+    onKeyDown: {
+      type: Function,
+      required: false,
+      default: void 0
+    },
+    onFocus: {
+      type: Function,
+      required: false,
+      default: void 0
+    },
+    role: {
+      type: String,
+      required: false,
+      default: void 0
+    },
+    type: {
+      type: String,
+      required: false,
+      default: void 0
+    },
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: void 0
+    },
+    itemIcon: {
+      type: [String, Number, null, Array, Function, Boolean],
+      required: false,
+      skipCheck: true,
+      default: void 0
+    },
+    extra: {
+      type: null,
+      required: false,
+      default: void 0
+    },
+    onMouseEnter: {
+      type: Function,
+      required: false,
+      default: void 0
+    },
+    onMouseLeave: {
+      type: Function,
+      required: false,
+      default: void 0
+    },
+    onClick: {
+      type: Function,
+      required: false,
+      default: void 0
+    },
+    style: {
+      type: null,
+      required: false,
+      default: void 0
+    },
+    class: {
+      type: String,
+      required: false,
+      default: void 0
+    }
+  },
+  name: "MenuItem",
+  inheritAttrs: false
+});
+exports.default = MenuItem;

package/dist/MenuItem.d.ts

@@ -0,0 +1,14 @@
+import { MenuItemType } from './interface.ts';
+export interface MenuItemProps extends Omit<MenuItemType, 'label' | 'key'> {
+    /** @private Internal filled key. Do not set it directly */
+    eventKey?: string;
+    /** @private Do not use. Private warning empty usage */
+    warnKey?: boolean;
+    /** @deprecated No place to use this. Should remove */
+    attribute?: Record<string, string>;
+    onKeyDown?: (e: KeyboardEvent) => void;
+    onFocus?: (e: FocusEvent) => void;
+    role?: string;
+}
+declare const MenuItem: import('vue').DefineSetupFnComponent<MenuItemProps, {}, {}, MenuItemProps & {}, import('vue').PublicProps>;
+export default MenuItem;

package/dist/MenuItem.js

@@ -0,0 +1,350 @@
+import { defineComponent, watch, createVNode, shallowRef, computed, mergeProps } from "vue";
+import Overflow from "@v-c/overflow";
+import { warning, clsx } from "@v-c/util";
+import KeyCode from "@v-c/util/dist/KeyCode";
+import omit from "@v-c/util/dist/omit";
+import { toPropsRefs } from "@v-c/util/dist/props-util";
+import { useMenuId } from "./context/IdContext.js";
+import { useMenuContext } from "./context/MenuContext.js";
+import { useMeasure, useFullPath } 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 { warnItemProp } from "./utils/warnUtil.js";
+const LegacyMenuItem = /* @__PURE__ */ defineComponent((props, {
+  slots,
+  attrs
+}) => {
+  return () => {
+    const {
+      title,
+      attribute,
+      ...restProps
+    } = attrs;
+    const {
+      elementRef
+    } = props;
+    const passedProps = omit(restProps, ["eventKey", "popupClassName", "popupOffset", "onTitleClick"]);
+    warning(!attribute, "`attribute` of Menu.Item is deprecated. Please pass attribute directly.");
+    return createVNode(Overflow.Item, mergeProps(attribute, {
+      "title": typeof title === "string" ? title : void 0
+    }, passedProps, {
+      "ref": elementRef
+    }), {
+      default: () => [slots?.default?.()]
+    });
+  };
+}, {
+  props: {
+    elementRef: {
+      type: null,
+      required: false,
+      default: void 0
+    }
+  },
+  name: "LegacyMenuItem",
+  inheritAttrs: false
+});
+const InternalMenuItem = /* @__PURE__ */ defineComponent((props, {
+  slots,
+  attrs
+}) => {
+  const {
+    eventKey
+  } = toPropsRefs(props, "eventKey");
+  const domDataId = useMenuId(eventKey);
+  const menuContext = useMenuContext();
+  const privateContext = usePrivateContext();
+  const legacyMenuItemRef = shallowRef();
+  const elementRef = shallowRef();
+  const mergedDisabled = computed(() => props.disabled ?? menuContext?.value?.disabled);
+  const connectedKeys = useFullPath(eventKey);
+  if (process.env.NODE_ENV !== "production" && props.warnKey) {
+    warning(false, "MenuItem should not leave undefined `key`.");
+  }
+  const getEventInfo = (e) => {
+    return {
+      key: eventKey.value,
+      // Note: For legacy code is reversed which not like other antd component
+      keyPath: [...connectedKeys.value].reverse(),
+      item: legacyMenuItemRef.value,
+      domEvent: e
+    };
+  };
+  const ret = useActive(eventKey, mergedDisabled, props?.onMouseEnter, props?.onMouseLeave);
+  const active = ret.active;
+  const selected = computed(() => !!menuContext?.value?.selectedKeys?.includes?.(eventKey.value));
+  const directionStyle = useDirectionStyle(computed(() => connectedKeys.value.length));
+  const onInternalClick = (e) => {
+    if (mergedDisabled.value) {
+      return;
+    }
+    const info = getEventInfo(e);
+    props?.onClick?.(warnItemProp(info));
+    menuContext?.value?.onItemClick?.(info);
+  };
+  const onInternalKeyDown = (e) => {
+    props?.onKeyDown?.(e);
+    if (e.which === KeyCode.ENTER) {
+      const info = getEventInfo(e);
+      props?.onClick?.(warnItemProp(info));
+      menuContext?.value?.onItemClick?.(info);
+    }
+  };
+  const onInternalFocus = (e) => {
+    menuContext?.value?.onActive?.(eventKey.value);
+    props?.onFocus?.(e);
+  };
+  return () => {
+    const {
+      role,
+      disabled,
+      itemIcon,
+      ...restProps
+    } = props;
+    const optionRoleProps = {};
+    if (role === "option") {
+      optionRoleProps["aria-selected"] = selected.value;
+    }
+    const {
+      prefixCls,
+      overflowDisabled,
+      itemIcon: contextItemIcon
+    } = menuContext?.value ?? {};
+    const mergedItemIcon = itemIcon || contextItemIcon;
+    const itemCls = `${prefixCls}-item`;
+    const activeProps = {
+      onMouseenter: ret.onMouseEnter,
+      onMouseleave: ret.onMouseLeave
+    };
+    let renderNode = createVNode(LegacyMenuItem, mergeProps({
+      "ref": legacyMenuItemRef,
+      "elementRef": elementRef,
+      "role": role === null ? "none" : role || "menuitem",
+      "tabIndex": disabled ? null : -1,
+      "data-menu-id": overflowDisabled && domDataId.value ? null : domDataId.value
+    }, omit({
+      ...restProps,
+      ...attrs
+    }, ["extra"]), activeProps, optionRoleProps, {
+      "component": "li",
+      "aria-disabled": disabled,
+      "style": [directionStyle.value, props?.style],
+      "className": clsx(itemCls, {
+        [`${itemCls}-active`]: active.value,
+        [`${itemCls}-selected`]: selected.value,
+        [`${itemCls}-disabled`]: mergedDisabled.value
+      }, props.class),
+      "onClick": onInternalClick,
+      "onKeydown": onInternalKeyDown,
+      "onFocus": onInternalFocus
+    }), {
+      default: () => [slots?.default?.(), createVNode(Icon, {
+        "props": {
+          ...props,
+          isSelected: selected.value
+        },
+        "icon": mergedItemIcon
+      }, null)]
+    });
+    if (privateContext._internalRenderMenuItem) {
+      renderNode = privateContext._internalRenderMenuItem(renderNode, props, {
+        selected: selected.value
+      });
+    }
+    return renderNode;
+  };
+}, {
+  props: {
+    eventKey: {
+      type: String,
+      required: false,
+      default: void 0
+    },
+    warnKey: {
+      type: Boolean,
+      required: false,
+      default: void 0
+    },
+    attribute: {
+      type: Object,
+      required: false,
+      default: void 0
+    },
+    onKeyDown: {
+      type: Function,
+      required: false,
+      default: void 0
+    },
+    onFocus: {
+      type: Function,
+      required: false,
+      default: void 0
+    },
+    role: {
+      type: String,
+      required: false,
+      default: void 0
+    },
+    type: {
+      type: String,
+      required: false,
+      default: void 0
+    },
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: void 0
+    },
+    itemIcon: {
+      type: [String, Number, null, Array, Function, Boolean],
+      required: false,
+      skipCheck: true,
+      default: void 0
+    },
+    extra: {
+      type: null,
+      required: false,
+      default: void 0
+    },
+    onMouseEnter: {
+      type: Function,
+      required: false,
+      default: void 0
+    },
+    onMouseLeave: {
+      type: Function,
+      required: false,
+      default: void 0
+    },
+    onClick: {
+      type: Function,
+      required: false,
+      default: void 0
+    },
+    style: {
+      type: null,
+      required: false,
+      default: void 0
+    },
+    class: {
+      type: String,
+      required: false,
+      default: void 0
+    }
+  },
+  name: "InternalMenuItem",
+  inheritAttrs: false
+});
+const MenuItem = /* @__PURE__ */ defineComponent((props, {
+  slots,
+  attrs
+}) => {
+  const {
+    eventKey
+  } = toPropsRefs(props, "eventKey");
+  const measure = useMeasure();
+  const connectedKeyPath = useFullPath(eventKey);
+  watch([connectedKeyPath], (_n, _o, onCleanup) => {
+    if (measure) {
+      measure.registerPath(eventKey.value, connectedKeyPath.value);
+    }
+    onCleanup(() => {
+      measure?.unregisterPath(eventKey.value, connectedKeyPath.value);
+    });
+  });
+  return () => {
+    if (measure) {
+      return null;
+    }
+    return createVNode(InternalMenuItem, {
+      ...attrs,
+      ...props
+    }, slots);
+  };
+}, {
+  props: {
+    eventKey: {
+      type: String,
+      required: false,
+      default: void 0
+    },
+    warnKey: {
+      type: Boolean,
+      required: false,
+      default: void 0
+    },
+    attribute: {
+      type: Object,
+      required: false,
+      default: void 0
+    },
+    onKeyDown: {
+      type: Function,
+      required: false,
+      default: void 0
+    },
+    onFocus: {
+      type: Function,
+      required: false,
+      default: void 0
+    },
+    role: {
+      type: String,
+      required: false,
+      default: void 0
+    },
+    type: {
+      type: String,
+      required: false,
+      default: void 0
+    },
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: void 0
+    },
+    itemIcon: {
+      type: [String, Number, null, Array, Function, Boolean],
+      required: false,
+      skipCheck: true,
+      default: void 0
+    },
+    extra: {
+      type: null,
+      required: false,
+      default: void 0
+    },
+    onMouseEnter: {
+      type: Function,
+      required: false,
+      default: void 0
+    },
+    onMouseLeave: {
+      type: Function,
+      required: false,
+      default: void 0
+    },
+    onClick: {
+      type: Function,
+      required: false,
+      default: void 0
+    },
+    style: {
+      type: null,
+      required: false,
+      default: void 0
+    },
+    class: {
+      type: String,
+      required: false,
+      default: void 0
+    }
+  },
+  name: "MenuItem",
+  inheritAttrs: false
+});
+export {
+  MenuItem as default
+};