@uzum-tech/ui 0.1.0 → 0.1.1

package/lib/menu/src/Submenu.js

@@ -0,0 +1,129 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.USubmenu = exports.submenuProps = void 0;
+const vue_1 = require("vue");
+const vooks_1 = require("vooks");
+const _internal_1 = require("../../_internal");
+const dropdown_1 = require("../../dropdown");
+const MenuOptionContent_1 = __importDefault(require("./MenuOptionContent"));
+// eslint-disable-next-line import/no-cycle
+const utils_1 = require("./utils");
+const use_menu_child_1 = require("./use-menu-child");
+const use_menu_child_props_1 = require("./use-menu-child-props");
+const context_1 = require("./context");
+exports.submenuProps = Object.assign(Object.assign({}, use_menu_child_props_1.useMenuChildProps), { rawNodes: {
+        type: Array,
+        default: () => []
+    }, tmNodes: {
+        type: Array,
+        default: () => []
+    }, tmNode: {
+        type: Object,
+        required: true
+    }, disabled: {
+        type: Boolean,
+        default: false
+    }, icon: Function, onClick: Function });
+exports.USubmenu = (0, vue_1.defineComponent)({
+    name: 'Submenu',
+    props: exports.submenuProps,
+    setup(props) {
+        const MenuChild = (0, use_menu_child_1.useMenuChild)(props);
+        const { UMenu, USubmenu } = MenuChild;
+        const { props: menuProps, mergedCollapsedRef, mergedThemeRef } = UMenu;
+        const mergedDisabledRef = (0, vue_1.computed)(() => {
+            const { disabled } = props;
+            if (USubmenu === null || USubmenu === void 0 ? void 0 : USubmenu.mergedDisabledRef.value)
+                return true;
+            if (menuProps.disabled)
+                return true;
+            return disabled;
+        });
+        const dropdownShowRef = (0, vue_1.ref)(false);
+        (0, vue_1.provide)(context_1.submenuInjectionKey, {
+            paddingLeftRef: MenuChild.paddingLeft,
+            mergedDisabledRef
+        });
+        (0, vue_1.provide)(context_1.menuItemGroupInjectionKey, null);
+        function doClick() {
+            const { onClick } = props;
+            if (onClick)
+                onClick();
+        }
+        function handleClick() {
+            if (!mergedDisabledRef.value) {
+                if (!mergedCollapsedRef.value) {
+                    UMenu.toggleExpand(props.internalKey);
+                }
+                doClick();
+            }
+        }
+        function handlePopoverShowChange(value) {
+            dropdownShowRef.value = value;
+        }
+        return {
+            menuProps,
+            mergedTheme: mergedThemeRef,
+            doSelect: UMenu.doSelect,
+            inverted: UMenu.invertedRef,
+            isHorizontal: UMenu.isHorizontalRef,
+            mergedClsPrefix: UMenu.mergedClsPrefixRef,
+            maxIconSize: MenuChild.maxIconSize,
+            activeIconSize: MenuChild.activeIconSize,
+            iconMarginRight: MenuChild.iconMarginRight,
+            dropdownPlacement: MenuChild.dropdownPlacement,
+            dropdownShow: dropdownShowRef,
+            paddingLeft: MenuChild.paddingLeft,
+            mergedDisabled: mergedDisabledRef,
+            mergedValue: UMenu.mergedValueRef,
+            childActive: (0, vooks_1.useMemo)(() => {
+                return UMenu.activePathRef.value.includes(props.internalKey);
+            }),
+            collapsed: (0, vue_1.computed)(() => {
+                if (menuProps.mode === 'horizontal')
+                    return false;
+                if (mergedCollapsedRef.value) {
+                    return true;
+                }
+                return !UMenu.mergedExpandedKeysRef.value.includes(props.internalKey);
+            }),
+            dropdownEnabled: (0, vue_1.computed)(() => {
+                return (!mergedDisabledRef.value &&
+                    (menuProps.mode === 'horizontal' || mergedCollapsedRef.value));
+            }),
+            handlePopoverShowChange,
+            handleClick
+        };
+    },
+    render() {
+        var _a;
+        const { mergedClsPrefix, menuProps: { renderIcon, renderLabel } } = this;
+        const createSubmenuItem = () => {
+            const { isHorizontal, paddingLeft, collapsed, mergedDisabled, maxIconSize, activeIconSize, title, childActive, icon, handleClick, menuProps: { nodeProps }, dropdownShow, iconMarginRight, tmNode, mergedClsPrefix } = this;
+            const attrs = nodeProps === null || nodeProps === void 0 ? void 0 : nodeProps(tmNode.rawNode);
+            return ((0, vue_1.h)("div", Object.assign({}, attrs, { class: [`${mergedClsPrefix}-menu-item`, attrs === null || attrs === void 0 ? void 0 : attrs.class], role: "menuitem" }),
+                (0, vue_1.h)(MenuOptionContent_1.default, { tmNode: tmNode, paddingLeft: paddingLeft, collapsed: collapsed, disabled: mergedDisabled, iconMarginRight: iconMarginRight, maxIconSize: maxIconSize, activeIconSize: activeIconSize, title: title, extra: this.extra, showArrow: !isHorizontal, childActive: childActive, clsPrefix: mergedClsPrefix, icon: icon, hover: dropdownShow, onClick: handleClick })));
+        };
+        const createSubmenuChildren = () => {
+            return ((0, vue_1.h)(_internal_1.UFadeInExpandTransition, null, {
+                default: () => {
+                    const { tmNodes, collapsed } = this;
+                    return !collapsed ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-submenu-children`, role: "menu" }, tmNodes.map((item) => (0, utils_1.itemRenderer)(item, this.menuProps)))) : null;
+                }
+            }));
+        };
+        return this.root ? ((0, vue_1.h)(dropdown_1.UDropdown, Object.assign({ size: "large", trigger: "hover" }, (_a = this.menuProps) === null || _a === void 0 ? void 0 : _a.dropdownProps, { themeOverrides: this.mergedTheme.peerOverrides.Dropdown, theme: this.mergedTheme.peers.Dropdown, builtinThemeOverrides: {
+                fontSizeLarge: '14px',
+                optionIconSizeLarge: '18px'
+            }, value: this.mergedValue, disabled: !this.dropdownEnabled, placement: this.dropdownPlacement, keyField: this.menuProps.keyField, labelField: this.menuProps.labelField, childrenField: this.menuProps.childrenField, onUpdateShow: this.handlePopoverShowChange, options: this.rawNodes, onSelect: this.doSelect, inverted: this.inverted, renderIcon: renderIcon, renderLabel: renderLabel }), {
+            default: () => ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-submenu`, role: "menuitem", "aria-expanded": !this.collapsed },
+                createSubmenuItem(),
+                this.isHorizontal ? null : createSubmenuChildren()))
+        })) : ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-submenu`, role: "menuitem", "aria-expanded": !this.collapsed },
+            createSubmenuItem(),
+            createSubmenuChildren()));
+    }
+});

package/lib/menu/src/context.d.ts

@@ -0,0 +1,4 @@
+import type { MenuInjection, MenuOptionGroupInjection, SubmenuInjection } from './use-menu-child';
+export declare const menuInjectionKey: import("vue").InjectionKey<MenuInjection>;
+export declare const submenuInjectionKey: import("vue").InjectionKey<SubmenuInjection | null>;
+export declare const menuItemGroupInjectionKey: import("vue").InjectionKey<MenuOptionGroupInjection | null>;

package/lib/menu/src/context.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.menuItemGroupInjectionKey = exports.submenuInjectionKey = exports.menuInjectionKey = void 0;
+const _utils_1 = require("../../_utils");
+exports.menuInjectionKey = (0, _utils_1.createInjectionKey)('u-menu');
+exports.submenuInjectionKey = (0, _utils_1.createInjectionKey)('u-submenu');
+exports.menuItemGroupInjectionKey = (0, _utils_1.createInjectionKey)('u-menu-item-group');

package/lib/menu/src/interface.d.ts

@@ -0,0 +1,58 @@
+import { type TreeNode } from 'treemate';
+import { type VNodeChild, type HTMLAttributes } from 'vue';
+export type Key = string | number;
+export interface MenuOptionSharedPart {
+    key?: Key;
+    disabled?: boolean;
+    icon?: () => VNodeChild;
+    children?: Array<MenuOption | MenuGroupOption | MenuDividerOption>;
+    extra?: string | (() => VNodeChild);
+    props?: HTMLAttributes;
+    show?: boolean;
+    [key: string]: unknown;
+    /** @deprecated */
+    titleExtra?: string | (() => VNodeChild);
+}
+/**
+ * @private
+ */
+export type MenuIgnoredOption = MenuDividerOption | MenuRenderOption;
+export interface MenuDividerOption {
+    type: 'divider';
+    key?: Key;
+    props?: HTMLAttributes;
+    [key: string]: unknown;
+}
+export interface MenuRenderOption {
+    type: 'render';
+    key?: Key;
+    props?: HTMLAttributes;
+    render?: () => VNodeChild;
+    [key: string]: unknown;
+}
+export interface MenuGroupOptionBase extends MenuOptionSharedPart {
+    type: 'group';
+    children: Array<MenuOption | MenuDividerOption>;
+}
+export type MenuOption = (MenuOptionSharedPart & {
+    /** @deprecated */
+    title?: string | (() => VNodeChild);
+}) | (MenuOptionSharedPart & {
+    label?: string | (() => VNodeChild);
+});
+export type MenuGroupOption = (MenuGroupOptionBase & {
+    /** @deprecated */
+    title?: string | (() => VNodeChild);
+}) | (MenuGroupOptionBase & {
+    label?: string | (() => VNodeChild);
+});
+export type MenuMixedOption = MenuDividerOption | MenuOption | MenuGroupOption;
+export type TmNode = TreeNode<MenuOption, MenuGroupOption, MenuIgnoredOption>;
+export type OnUpdateValue = (value: string & number & (string | number), item: MenuOption) => void;
+export type OnUpdateKeys = (keys: string[] & number[] & Array<string | number>) => void;
+export type OnUpdateValueImpl = (value: string | number | (string | number), item: MenuOption) => void;
+export type OnUpdateKeysImpl = (keys: string[] | number[] | Array<string | number>) => void;
+export type MenuNodeProps = (option: MenuOption | MenuGroupOption) => HTMLAttributes & Record<string, string | number | undefined>;
+export interface MenuInst {
+    showOption: (key?: Key) => void;
+}

package/lib/menu/src/interface.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/menu/src/styles/index.cssr.d.ts

@@ -0,0 +1,3 @@
+import type { CNode } from 'css-render';
+declare const _default: CNode;
+export default _default;

package/lib/menu/src/styles/index.cssr.js

@@ -0,0 +1,233 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+const fade_in_height_expand_cssr_1 = require("../../../_styles/transitions/fade-in-height-expand.cssr");
+const cssr_1 = require("../../../_utils/cssr");
+const hoverStyleChildren = [(0, cssr_1.c)('&::before', 'background-color: var(--u-item-color-hover);'), (0, cssr_1.cE)('arrow', `
+ color: var(--u-arrow-color-hover);
+ `), (0, cssr_1.cE)('icon', `
+ color: var(--u-item-icon-color-hover);
+ `), (0, cssr_1.cB)('menu-item-content-header', `
+ color: var(--u-item-text-color-hover);
+ `, [(0, cssr_1.c)('a', `
+ color: var(--u-item-text-color-hover);
+ `), (0, cssr_1.cE)('extra', `
+ color: var(--u-item-text-color-hover);
+ `)])];
+const horizontalHoverStyleChildren = [(0, cssr_1.cE)('icon', `
+ color: var(--u-item-icon-color-hover-horizontal);
+ `), (0, cssr_1.cB)('menu-item-content-header', `
+ color: var(--u-item-text-color-hover-horizontal);
+ `, [(0, cssr_1.c)('a', `
+ color: var(--u-item-text-color-hover-horizontal);
+ `), (0, cssr_1.cE)('extra', `
+ color: var(--u-item-text-color-hover-horizontal);
+ `)])];
+// vars:
+// --u-color
+// --u-group-text-color
+// --u-bezier
+// --u-font-size
+// --u-border-color-horizontal
+// --u-border-radius
+// --u-item-color-hover
+// --u-item-color-active
+// --u-item-color-active-hover
+// --u-item-color-active-collapsed
+// --u-arrow-color
+// --u-arrow-color-hover
+// --u-arrow-color-active
+// --u-arrow-color-active-hover
+// --u-arrow-color-child-active
+// --u-arrow-color-child-active-hover
+// --u-item-text-color
+// --u-item-text-color-hover
+// --u-item-text-color-active
+// --u-item-text-color-active-hover
+// --u-item-text-color-child-active
+// --u-item-text-color-child-active-hover
+// --u-item-text-color-horizontal
+// --u-item-text-color-hover-horizontal
+// --u-item-text-color-active-horizontal
+// --u-item-text-color-active-hover-horizontal
+// --u-item-text-color-child-active-horizontal
+// --u-item-text-color-child-active-hover-horizontal
+// --u-item-icon-color
+// --u-item-icon-color-hover
+// --u-item-icon-color-active
+// --u-item-icon-color-active-hover
+// --u-item-icon-color-child-active
+// --u-item-icon-color-child-active-hover
+// --u-item-icon-color-collapsed
+// --u-item-icon-color-horizontal
+// --u-item-icon-color-hover-horizontal
+// --u-item-icon-color-active-horizontal
+// --u-item-icon-color-active-hover-horizontal
+// --u-item-icon-color-child-active-horizontal
+// --u-item-icon-color-child-active-hover-horizontal
+// --u-item-height
+exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('menu', `
+ background-color: var(--u-color);
+ color: var(--u-item-text-color);
+ overflow: hidden;
+ transition: background-color .3s var(--u-bezier);
+ box-sizing: border-box;
+ font-size: var(--u-font-size);
+ padding-bottom: 6px;
+ `, [(0, cssr_1.cM)('horizontal', `
+ display: inline-flex;
+ padding-bottom: 0;
+ `, [(0, cssr_1.cB)('submenu', 'margin: 0;'), (0, cssr_1.cB)('menu-item', 'margin: 0;'), (0, cssr_1.cB)('menu-item-content', `
+ padding: 0 20px;
+ border-bottom: 2px solid #0000;
+ `, [(0, cssr_1.c)('&::before', 'display: none;'), (0, cssr_1.cM)('selected', 'border-bottom: 2px solid var(--u-border-color-horizontal)')]), (0, cssr_1.cB)('menu-item-content', [(0, cssr_1.cM)('selected', [(0, cssr_1.cE)('icon', 'color: var(--u-item-icon-color-active-horizontal);'), (0, cssr_1.cB)('menu-item-content-header', `
+ color: var(--u-item-text-color-active-horizontal);
+ `, [(0, cssr_1.c)('a', 'color: var(--u-item-text-color-active-horizontal);'), (0, cssr_1.cE)('extra', 'color: var(--u-item-text-color-active-horizontal);')])]), (0, cssr_1.cM)('child-active', `
+ border-bottom: 2px solid var(--u-border-color-horizontal);
+ `, [(0, cssr_1.cB)('menu-item-content-header', `
+ color: var(--u-item-text-color-child-active-horizontal);
+ `, [(0, cssr_1.c)('a', `
+ color: var(--u-item-text-color-child-active-horizontal);
+ `), (0, cssr_1.cE)('extra', `
+ color: var(--u-item-text-color-child-active-horizontal);
+ `)]), (0, cssr_1.cE)('icon', `
+ color: var(--u-item-icon-color-child-active-horizontal);
+ `)]), (0, cssr_1.cNotM)('disabled', [(0, cssr_1.cNotM)('selected, child-active', [(0, cssr_1.c)('&:focus-within', horizontalHoverStyleChildren)]), (0, cssr_1.cM)('selected', [hoverStyle(null, [(0, cssr_1.cE)('icon', 'color: var(--u-item-icon-color-active-hover-horizontal);'), (0, cssr_1.cB)('menu-item-content-header', `
+ color: var(--u-item-text-color-active-hover-horizontal);
+ `, [(0, cssr_1.c)('a', 'color: var(--u-item-text-color-active-hover-horizontal);'), (0, cssr_1.cE)('extra', 'color: var(--u-item-text-color-active-hover-horizontal);')])])]), (0, cssr_1.cM)('child-active', [hoverStyle(null, [(0, cssr_1.cE)('icon', 'color: var(--u-item-icon-color-child-active-hover-horizontal);'), (0, cssr_1.cB)('menu-item-content-header', `
+ color: var(--u-item-text-color-child-active-hover-horizontal);
+ `, [(0, cssr_1.c)('a', 'color: var(--u-item-text-color-child-active-hover-horizontal);'), (0, cssr_1.cE)('extra', 'color: var(--u-item-text-color-child-active-hover-horizontal);')])])]), hoverStyle('border-bottom: 2px solid var(--u-border-color-horizontal);', horizontalHoverStyleChildren)]), (0, cssr_1.cB)('menu-item-content-header', [(0, cssr_1.c)('a', 'color: var(--u-item-text-color-horizontal);')])])]), (0, cssr_1.cM)('collapsed', [(0, cssr_1.cB)('menu-item-content', [(0, cssr_1.cM)('selected', [(0, cssr_1.c)('&::before', `
+ background-color: var(--u-item-color-active-collapsed) !important;
+ `)]), (0, cssr_1.cB)('menu-item-content-header', 'opacity: 0;'), (0, cssr_1.cE)('arrow', 'opacity: 0;'), (0, cssr_1.cE)('icon', 'color: var(--u-item-icon-color-collapsed);')])]), (0, cssr_1.cB)('menu-item', `
+ height: var(--u-item-height);
+ margin-top: 6px;
+ position: relative;
+ `), (0, cssr_1.cB)('menu-item-content', `
+ box-sizing: border-box;
+ line-height: 1.75;
+ height: 100%;
+ display: grid;
+ grid-template-areas: "icon content arrow";
+ grid-template-columns: auto 1fr auto;
+ align-items: center;
+ cursor: pointer;
+ position: relative;
+ padding-right: 18px;
+ transition:
+ background-color .3s var(--u-bezier),
+ padding-left .3s var(--u-bezier),
+ border-color .3s var(--u-bezier);
+ `, [(0, cssr_1.c)('> *', 'z-index: 1;'), (0, cssr_1.c)('&::before', `
+ z-index: auto;
+ content: "";
+ background-color: #0000;
+ position: absolute;
+ left: 8px;
+ right: 8px;
+ top: 0;
+ bottom: 0;
+ pointer-events: none;
+ border-radius: var(--u-border-radius);
+ transition: background-color .3s var(--u-bezier);
+ `), (0, cssr_1.cM)('disabled', `
+ opacity: .45;
+ cursor: not-allowed;
+ `), (0, cssr_1.cM)('collapsed', [(0, cssr_1.cE)('arrow', 'transform: rotate(0);')]), (0, cssr_1.cM)('selected', [(0, cssr_1.c)('&::before', 'background-color: var(--u-item-color-active);'), (0, cssr_1.cE)('arrow', 'color: var(--u-arrow-color-active);'), (0, cssr_1.cE)('icon', 'color: var(--u-item-icon-color-active);'), (0, cssr_1.cB)('menu-item-content-header', `
+ color: var(--u-item-text-color-active);
+ `, [(0, cssr_1.c)('a', 'color: var(--u-item-text-color-active);'), (0, cssr_1.cE)('extra', 'color: var(--u-item-text-color-active);')])]), (0, cssr_1.cM)('child-active', [(0, cssr_1.cB)('menu-item-content-header', `
+ color: var(--u-item-text-color-child-active);
+ `, [(0, cssr_1.c)('a', `
+ color: var(--u-item-text-color-child-active);
+ `), (0, cssr_1.cE)('extra', `
+ color: var(--u-item-text-color-child-active);
+ `)]), (0, cssr_1.cE)('arrow', `
+ color: var(--u-arrow-color-child-active);
+ `), (0, cssr_1.cE)('icon', `
+ color: var(--u-item-icon-color-child-active);
+ `)]), (0, cssr_1.cNotM)('disabled', [(0, cssr_1.cNotM)('selected, child-active', [(0, cssr_1.c)('&:focus-within', hoverStyleChildren)]), (0, cssr_1.cM)('selected', [hoverStyle(null, [(0, cssr_1.cE)('arrow', 'color: var(--u-arrow-color-active-hover);'), (0, cssr_1.cE)('icon', 'color: var(--u-item-icon-color-active-hover);'), (0, cssr_1.cB)('menu-item-content-header', `
+ color: var(--u-item-text-color-active-hover);
+ `, [(0, cssr_1.c)('a', 'color: var(--u-item-text-color-active-hover);'), (0, cssr_1.cE)('extra', 'color: var(--u-item-text-color-active-hover);')])])]), (0, cssr_1.cM)('child-active', [hoverStyle(null, [(0, cssr_1.cE)('arrow', 'color: var(--u-arrow-color-child-active-hover);'), (0, cssr_1.cE)('icon', 'color: var(--u-item-icon-color-child-active-hover);'), (0, cssr_1.cB)('menu-item-content-header', `
+ color: var(--u-item-text-color-child-active-hover);
+ `, [(0, cssr_1.c)('a', 'color: var(--u-item-text-color-child-active-hover);'), (0, cssr_1.cE)('extra', 'color: var(--u-item-text-color-child-active-hover);')])])]), (0, cssr_1.cM)('selected', [hoverStyle(null, [(0, cssr_1.c)('&::before', 'background-color: var(--u-item-color-active-hover);')])]), hoverStyle(null, hoverStyleChildren)]), (0, cssr_1.cE)('icon', `
+ grid-area: icon;
+ color: var(--u-item-icon-color);
+ transition:
+ color .3s var(--u-bezier),
+ font-size .3s var(--u-bezier),
+ margin-right .3s var(--u-bezier);
+ box-sizing: content-box;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ `), (0, cssr_1.cE)('arrow', `
+ grid-area: arrow;
+ font-size: 16px;
+ color: var(--u-arrow-color);
+ transform: rotate(180deg);
+ opacity: 1;
+ transition:
+ color .3s var(--u-bezier),
+ transform 0.2s var(--u-bezier),
+ opacity 0.2s var(--u-bezier);
+ `), (0, cssr_1.cB)('menu-item-content-header', `
+ grid-area: content;
+ transition:
+ color .3s var(--u-bezier),
+ opacity .3s var(--u-bezier);
+ opacity: 1;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ color: var(--u-item-text-color);
+ `, [(0, cssr_1.c)('a', `
+ outline: none;
+ text-decoration: none;
+ transition: color .3s var(--u-bezier);
+ color: var(--u-item-text-color);
+ `, [(0, cssr_1.c)('&::before', `
+ content: "";
+ position: absolute;
+ left: 0;
+ right: 0;
+ top: 0;
+ bottom: 0;
+ `)]), (0, cssr_1.cE)('extra', `
+ font-size: .93em;
+ color: var(--u-group-text-color);
+ transition: color .3s var(--u-bezier);
+ `)])]), (0, cssr_1.cB)('submenu', `
+ cursor: pointer;
+ position: relative;
+ margin-top: 6px;
+ `, [(0, cssr_1.cB)('menu-item-content', `
+ height: var(--u-item-height);
+ `), (0, cssr_1.cB)('submenu-children', `
+ overflow: hidden;
+ padding: 0;
+ `, [(0, fade_in_height_expand_cssr_1.fadeInHeightExpandTransition)({
+  duration: '.2s'
+})])]), (0, cssr_1.cB)('menu-item-group', [(0, cssr_1.cB)('menu-item-group-title', `
+ margin-top: 6px;
+ color: var(--u-group-text-color);
+ cursor: default;
+ font-size: .93em;
+ height: 36px;
+ display: flex;
+ align-items: center;
+ transition:
+ padding-left .3s var(--u-bezier),
+ color .3s var(--u-bezier);
+ `)])]), (0, cssr_1.cB)('menu-tooltip', [(0, cssr_1.c)('a', `
+ color: inherit;
+ text-decoration: none;
+ `)]), (0, cssr_1.cB)('menu-divider', `
+ transition: background-color .3s var(--u-bezier);
+ background-color: var(--u-divider-color);
+ height: 1px;
+ margin: 6px 18px;
+ `)]);
+function hoverStyle(props, children) {
+  return [(0, cssr_1.cM)('hover', props, children), (0, cssr_1.c)('&:hover', props, children)];
+}

package/lib/menu/src/use-menu-child-props.d.ts

@@ -0,0 +1,17 @@
+import type { ExtractPropTypes, PropType, VNodeChild } from 'vue';
+import type { Key } from 'treemate';
+export declare const useMenuChildProps: {
+    readonly internalKey: {
+        readonly type: PropType<Key>;
+        readonly required: true;
+    };
+    readonly root: BooleanConstructor;
+    readonly isGroup: BooleanConstructor;
+    readonly level: {
+        readonly type: NumberConstructor;
+        readonly required: true;
+    };
+    readonly title: PropType<string | (() => VNodeChild)>;
+    readonly extra: PropType<string | (() => VNodeChild)>;
+};
+export type UseMenuChildProps = ExtractPropTypes<typeof useMenuChildProps>;

package/lib/menu/src/use-menu-child-props.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMenuChildProps = void 0;
+exports.useMenuChildProps = {
+    internalKey: {
+        type: [String, Number],
+        required: true
+    },
+    root: Boolean,
+    isGroup: Boolean,
+    level: {
+        type: Number,
+        required: true
+    },
+    title: [String, Function],
+    extra: [String, Function]
+};

package/lib/menu/src/use-menu-child.d.ts

@@ -0,0 +1,38 @@
+import type { Key } from 'treemate';
+import { type ComputedRef, type Ref } from 'vue';
+import type { FollowerPlacement } from 'vueuc';
+import type { MergedTheme } from '../../_mixins/use-theme';
+import type { MenuTheme } from '../styles';
+import type { OnUpdateValueImpl } from './interface';
+import type { MenuSetupProps } from './Menu';
+import type { UseMenuChildProps } from './use-menu-child-props';
+export interface MenuInjection {
+    props: MenuSetupProps;
+    mergedCollapsedRef: Ref<boolean>;
+    invertedRef: Ref<boolean>;
+    isHorizontalRef: Ref<boolean>;
+    mergedClsPrefixRef: Ref<string>;
+    mergedValueRef: Ref<Key | null>;
+    mergedExpandedKeysRef: Ref<Key[]>;
+    activePathRef: Ref<Key[]>;
+    mergedThemeRef: Ref<MergedTheme<MenuTheme>>;
+    doSelect: OnUpdateValueImpl;
+    toggleExpand: (key: Key) => void;
+}
+export interface SubmenuInjection {
+    paddingLeftRef: Ref<number | undefined>;
+    mergedDisabledRef: Ref<boolean>;
+}
+export interface MenuOptionGroupInjection {
+    paddingLeftRef: Ref<number | undefined>;
+}
+export interface UseMenuChild {
+    dropdownPlacement: ComputedRef<FollowerPlacement>;
+    activeIconSize: ComputedRef<number>;
+    maxIconSize: ComputedRef<number>;
+    paddingLeft: ComputedRef<number | undefined>;
+    iconMarginRight: ComputedRef<number>;
+    UMenu: MenuInjection;
+    USubmenu: SubmenuInjection | null;
+}
+export declare function useMenuChild(props: UseMenuChildProps): UseMenuChild;

package/lib/menu/src/use-menu-child.js

@@ -0,0 +1,84 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMenuChild = void 0;
+const vue_1 = require("vue");
+const context_1 = require("./context");
+const ICON_MARGIN_RIGHT = 8;
+function useMenuChild(props) {
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    const UMenu = (0, vue_1.inject)(context_1.menuInjectionKey);
+    const { props: menuProps, mergedCollapsedRef } = UMenu;
+    const USubmenu = (0, vue_1.inject)(context_1.submenuInjectionKey, null);
+    const UMenuOptionGroup = (0, vue_1.inject)(context_1.menuItemGroupInjectionKey, null);
+    const horizontalRef = (0, vue_1.computed)(() => {
+        return menuProps.mode === 'horizontal';
+    });
+    const dropdownPlacementRef = (0, vue_1.computed)(() => {
+        if (horizontalRef.value) {
+            return menuProps.dropdownPlacement;
+        }
+        if ('tmNodes' in props)
+            return 'right-start';
+        return 'right';
+    });
+    const maxIconSizeRef = (0, vue_1.computed)(() => {
+        var _a;
+        return Math.max((_a = menuProps.collapsedIconSize) !== null && _a !== void 0 ? _a : menuProps.iconSize, menuProps.iconSize);
+    });
+    const activeIconSizeRef = (0, vue_1.computed)(() => {
+        var _a;
+        if (!horizontalRef.value && props.root && mergedCollapsedRef.value) {
+            return (_a = menuProps.collapsedIconSize) !== null && _a !== void 0 ? _a : menuProps.iconSize;
+        }
+        else {
+            return menuProps.iconSize;
+        }
+    });
+    const paddingLeftRef = (0, vue_1.computed)(() => {
+        if (horizontalRef.value)
+            return undefined;
+        const { collapsedWidth, indent, rootIndent } = menuProps;
+        const { root, isGroup } = props;
+        const mergedRootIndent = rootIndent === undefined ? indent : rootIndent;
+        if (root) {
+            if (mergedCollapsedRef.value) {
+                return collapsedWidth / 2 - maxIconSizeRef.value / 2;
+            }
+            return mergedRootIndent;
+        }
+        if (UMenuOptionGroup) {
+            return indent / 2 + UMenuOptionGroup.paddingLeftRef.value;
+        }
+        if (USubmenu) {
+            return ((isGroup ? indent / 2 : indent) +
+                USubmenu.paddingLeftRef.value);
+        }
+        return undefined;
+    });
+    const iconMarginRightRef = (0, vue_1.computed)(() => {
+        const { collapsedWidth, indent, rootIndent } = menuProps;
+        const { value: maxIconSize } = maxIconSizeRef;
+        const { root } = props;
+        if (horizontalRef.value)
+            return ICON_MARGIN_RIGHT;
+        if (!root)
+            return ICON_MARGIN_RIGHT;
+        if (!mergedCollapsedRef.value)
+            return ICON_MARGIN_RIGHT;
+        const mergedRootIndent = rootIndent === undefined ? indent : rootIndent;
+        return (mergedRootIndent +
+            maxIconSize +
+            ICON_MARGIN_RIGHT -
+            (collapsedWidth + maxIconSize) / 2);
+    });
+    return {
+        dropdownPlacement: dropdownPlacementRef,
+        activeIconSize: activeIconSizeRef,
+        maxIconSize: maxIconSizeRef,
+        paddingLeft: paddingLeftRef,
+        iconMarginRight: iconMarginRightRef,
+        UMenu,
+        USubmenu
+    };
+}
+exports.useMenuChild = useMenuChild;

package/lib/menu/src/useCheckDeprecated.d.ts

@@ -0,0 +1,2 @@
+import type { MenuSetupProps } from './Menu';
+export declare function useCheckDeprecated(props: MenuSetupProps): void;

package/lib/menu/src/useCheckDeprecated.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCheckDeprecated = void 0;
+const vue_1 = require("vue");
+const _utils_1 = require("../../_utils");
+function useCheckDeprecated(props) {
+    (0, vue_1.watchEffect)(() => {
+        if (props.items) {
+            (0, _utils_1.warnOnce)('menu', '`items` is deprecated, please use `options` instead.');
+        }
+        if (props.onOpenNamesChange) {
+            (0, _utils_1.warnOnce)('menu', '`on-open-names-change` is deprecated, please use `on-update:expanded-keys` instead.');
+        }
+        if (props.onSelect) {
+            (0, _utils_1.warnOnce)('menu', '`on-select` is deprecated, please use `on-update:value` instead.');
+        }
+        if (props.onExpandedNamesChange) {
+            (0, _utils_1.warnOnce)('menu', '`on-expanded-names-change` is deprecated, please use `on-update:expanded-keys` instead.');
+        }
+        if (props.expandedNames) {
+            (0, _utils_1.warnOnce)('menu', '`expanded-names` is deprecated, please use `expanded-keys` instead.');
+        }
+        if (props.defaultExpandedNames) {
+            (0, _utils_1.warnOnce)('menu', '`default-expanded-names` is deprecated, please use `default-expanded-keys` instead.');
+        }
+    });
+}
+exports.useCheckDeprecated = useCheckDeprecated;

package/lib/menu/src/utils.d.ts

@@ -0,0 +1,7 @@
+import { type VNode } from 'vue';
+import type { TreeNode } from 'treemate';
+import type { MenuOption, MenuGroupOption, MenuIgnoredOption, MenuMixedOption } from './interface';
+import type { MenuSetupProps } from './Menu';
+export declare function isIgnoredNode(rawNode: MenuMixedOption): rawNode is MenuIgnoredOption;
+export declare function isDividerNode(rawNode: MenuMixedOption): rawNode is MenuIgnoredOption;
+export declare function itemRenderer(tmNode: TreeNode<MenuOption, MenuGroupOption, MenuIgnoredOption>, menuProps: MenuSetupProps): VNode | null;