@koi-design/uxd-ui 14.0.19 → 14.0.20

package/es/components/Menu/Menu.mjs

@@ -191,7 +191,10 @@ var Menu = defineComponent({
       "role": this.role || "menu",
       "class": [`${this.computedPrefixCls}`, `${this.computedPrefixCls}-${this.computedMode}`, `${this.computedPrefixCls}-root`, {
         [`${this.computedPrefixCls}-inline-collapsed`]: this.inlineCollapsed || !!this.layoutSiderCollapsed
-      }]
+      }],
+      "style": {
+        "--menu-level": 0
+      }
     }, [this.renderChild()]);
   }
 });

package/es/components/Menu/Menu.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Menu.mjs","sources":["../../../../src/components/Menu/Menu.tsx"],"sourcesContent":["import { defineComponent, provide, inject, ref, toRefs, watch, computed } from 'vue';\nimport warn from '../../utils/warn';\nimport useGlobalConfig from '../base/hooks/useGlobalConfig';\nimport Render from '../base/Render';\nimport useWrapDom from './hooks/useWrapDom';\nimport type { DropdownContext } from '../Dropdown/Dropdown.type';\nimport type { LayoutSiderContext } from '../Layout/Layout.type';\nimport { menuProps, menuEmits, type MenuItemClickEvent, type MenuClickEvent, type MenuOpenEvent } from './Menu.type';\n\nexport default defineComponent({\n  name: 'UMenu',\n  components: { Render },\n  props: menuProps,\n  emits: menuEmits,\n  setup(props, { emit, slots }) {\n    const dropdownContext = inject<DropdownContext | undefined>('dropdownContext', undefined);\n    const layoutSiderContext = inject<LayoutSiderContext>('layoutSiderContext', {} as LayoutSiderContext);\n    const inDrop = dropdownContext !== undefined;\n    const { collapsed: layoutSiderCollapsed } = layoutSiderContext;\n    const { prefixCls: statePrefixCls } = useGlobalConfig(inDrop ? 'dropdown-menu' : 'menu');\n    const { mode, subMenuOpenDelay, subMenuCloseDelay, inlineCollapsed } = toRefs(props);\n\n    const computedPrefixCls = computed(() => props.prefixCls || statePrefixCls.value);\n    if (props.mode !== 'inline' && props.inlineCollapsed !== undefined) {\n      warn('inlineCollapsed only use in inline mode!');\n    }\n    const selectedKeys = ref(props.selectedKeys || []);\n    const openKeys = ref(!props.inlineCollapsed && props.openKeys ? props.openKeys : []);\n    const inlineOpenKeys = ref(props.inlineCollapsed ? props.openKeys : []);\n\n    const rootMenu = ref<any | null>(null);\n    let keypath: (string | number)[] = [];\n\n    // const computedMode = computed(() => {\n    //   if (props.mode === 'inline') {\n    //     return props.inlineCollapsed || layoutSiderCollapsed?.value ? 'vertical' : props.mode;\n    //   }\n    //   return props.mode;\n    // });\n    const computedMode = ref(props.mode);\n    const setInlineMode = () => {\n      if (props.mode === 'inline') {\n        computedMode.value = props.inlineCollapsed || layoutSiderCollapsed?.value ? 'vertical' : props.mode;\n      }\n    };\n    setInlineMode();\n    const collapsed = ref(false);\n    // const handleTransitionEnd = (e: any) => {\n    //   if (e.target !== rootMenu.value || e.propertyName !== 'width') {\n    //     return;\n    //   }\n    //   if (props.mode === 'inline') {\n    //     if (props.inlineCollapsed || layoutSiderCollapsed?.value) {\n    //       computedMode.value = 'vertical';\n    //       inlineOpenKeys.value = openKeys.value;\n    //       openKeys.value = [];\n    //       collapsed.value = true;\n    //     } else {\n    //       computedMode.value = 'inline';\n    //       openKeys.value = inlineOpenKeys.value;\n    //       inlineOpenKeys.value = [];\n    //       collapsed.value = false;\n    //     }\n    //   }\n    // };\n\n    // #region methods\n    const collapsedChange = (val: boolean) => {\n      setTimeout(() => {\n        setInlineMode();\n      }, 300);\n\n      if (val) {\n        inlineOpenKeys.value = openKeys.value;\n        openKeys.value = [];\n        collapsed.value = true;\n      } else {\n        openKeys.value = inlineOpenKeys.value;\n        inlineOpenKeys.value = [];\n        collapsed.value = false;\n      }\n    };\n\n    const updateKeyPath = (key: string | number, type: string) => {\n      if (type === 'item') {\n        keypath = [key];\n      } else if (type === 'sub') {\n        keypath.push(key);\n      }\n    };\n\n    const fireMenuClick = (event: MenuItemClickEvent) => {\n      const info: MenuClickEvent = {\n        ...event,\n        keypath\n      };\n      emit('click', info);\n      if (dropdownContext && dropdownContext.fireItemClick && info.key) {\n        dropdownContext.fireItemClick(info);\n      }\n    };\n\n    const selectable = computed(() => {\n      return !inDrop || !!props.selectable;\n    });\n\n    const fireMenuDeselect = (event: MenuItemClickEvent) => {\n      if (selectable.value && props.multiple) {\n        const _selectedKeys = selectedKeys.value.filter((x) => x !== event.key);\n\n        emit('deselect', {\n          key: event.key,\n          item: event.item,\n          selectedKeys: _selectedKeys\n        });\n        if (props.selectedKeys === undefined) {\n          selectedKeys.value = _selectedKeys;\n        }\n        emit('update:selectedKeys', _selectedKeys);\n      }\n    };\n\n    const fireMenuSelect = (event: MenuItemClickEvent) => {\n      if (selectable.value) {\n        let _selectedKeys = [] as (string | number)[];\n        if (props.multiple) {\n          _selectedKeys = [...selectedKeys.value, event.key];\n        } else {\n          _selectedKeys = [event.key];\n        }\n        emit('select', {\n          key: event.key,\n          item: event.item,\n          selectedKeys: _selectedKeys\n        });\n        if (props.selectedKeys === undefined) {\n          selectedKeys.value = _selectedKeys;\n        }\n\n        emit('update:selectedKeys', _selectedKeys);\n      }\n    };\n\n    const fireMenuOpenChange = (event: MenuOpenEvent) => {\n      const { open, key } = event;\n      let _openKeys = openKeys.value;\n      if (open) {\n        _openKeys = [..._openKeys, key];\n      } else {\n        _openKeys = _openKeys.filter((x) => x !== key);\n      }\n      emit('open-change', _openKeys, event);\n      openKeys.value = _openKeys;\n      emit('update:openKeys', _openKeys);\n    };\n    // #endregion\n\n    watch(\n      () => props.selectedKeys,\n      (val) => {\n        selectedKeys.value = val || [];\n      }\n    );\n\n    watch(\n      () => props.openKeys,\n      (val) => {\n        openKeys.value = val;\n      }\n    );\n    watch(\n      () => props.inlineCollapsed,\n      (val) => {\n        if (val !== undefined) {\n          collapsedChange(val);\n        }\n      }\n    );\n\n    if (layoutSiderContext && layoutSiderCollapsed) {\n      watch(layoutSiderCollapsed, (val) => {\n        collapsedChange(val);\n      });\n    }\n\n    // #region provides\n    // just children to use it\n    provide('parentMenu', {\n      isRootMenu: true,\n      getPopupContainer: () => {\n        if (dropdownContext) {\n          return rootMenu.value?.parentNode;\n        }\n        return document.body;\n      }\n    });\n    // rootMenu's props supply to descendants use\n    provide('menuStore', {\n      mode: computedMode,\n      originalMode: mode,\n      selectedKeys,\n      openKeys,\n      subMenuOpenDelay,\n      subMenuCloseDelay,\n      rootPrefixCls: computedPrefixCls,\n      updateKeyPath,\n      // inlineIndent,\n      inlineCollapsed,\n      collapsed\n    });\n    // descendants trigger rootMenu's events\n    provide('menuEvent', {\n      fireMenuClick,\n      fireMenuDeselect,\n      fireMenuSelect,\n      fireMenuOpenChange\n    });\n    // #endregion\n\n    const { renderChild } = useWrapDom(props.mode, rootMenu, slots);\n\n    return {\n      rootMenu,\n      computedPrefixCls,\n      computedMode,\n      layoutSiderCollapsed,\n      renderChild\n    };\n  },\n  render() {\n    return (\n      <ul\n        ref=\"rootMenu\"\n        role={this.role || 'menu'}\n        class={[\n          `${this.computedPrefixCls}`,\n          `${this.computedPrefixCls}-${this.computedMode}`,\n          `${this.computedPrefixCls}-root`,\n          {\n            [`${this.computedPrefixCls}-inline-collapsed`]: this.inlineCollapsed || !!this.layoutSiderCollapsed\n          }\n        ]}\n      >\n        {this.renderChild()}\n      </ul>\n    );\n  }\n});\n"],"names":["defineComponent","name","components","Render","props","menuProps","emits","menuEmits","setup","emit","slots","dropdownContext","inject","undefined","layoutSiderContext","inDrop","collapsed","layoutSiderCollapsed","prefixCls","statePrefixCls","useGlobalConfig","mode","subMenuOpenDelay","subMenuCloseDelay","inlineCollapsed","toRefs","computedPrefixCls","computed","value","warn","selectedKeys","ref","openKeys","inlineOpenKeys","rootMenu","keypath","computedMode","setInlineMode","collapsedChange","val","setTimeout","updateKeyPath","key","type","push","fireMenuClick","event","info","fireItemClick","selectable","fireMenuDeselect","multiple","_selectedKeys","filter","x","item","fireMenuSelect","fireMenuOpenChange","open","_openKeys","watch","provide","isRootMenu","getPopupContainer","parentNode","document","body","originalMode","rootPrefixCls","renderChild","useWrapDom","render","_createVNode","role"],"mappings":"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"}
+{"version":3,"file":"Menu.mjs","sources":["../../../../src/components/Menu/Menu.tsx"],"sourcesContent":["import { defineComponent, provide, inject, ref, toRefs, watch, computed } from 'vue';\nimport warn from '../../utils/warn';\nimport useGlobalConfig from '../base/hooks/useGlobalConfig';\nimport Render from '../base/Render';\nimport useWrapDom from './hooks/useWrapDom';\nimport type { DropdownContext } from '../Dropdown/Dropdown.type';\nimport type { LayoutSiderContext } from '../Layout/Layout.type';\nimport { menuProps, menuEmits, type MenuItemClickEvent, type MenuClickEvent, type MenuOpenEvent } from './Menu.type';\n\nexport default defineComponent({\n  name: 'UMenu',\n  components: { Render },\n  props: menuProps,\n  emits: menuEmits,\n  setup(props, { emit, slots }) {\n    const dropdownContext = inject<DropdownContext | undefined>('dropdownContext', undefined);\n    const layoutSiderContext = inject<LayoutSiderContext>('layoutSiderContext', {} as LayoutSiderContext);\n    const inDrop = dropdownContext !== undefined;\n    const { collapsed: layoutSiderCollapsed } = layoutSiderContext;\n    const { prefixCls: statePrefixCls } = useGlobalConfig(inDrop ? 'dropdown-menu' : 'menu');\n    const { mode, subMenuOpenDelay, subMenuCloseDelay, inlineCollapsed } = toRefs(props);\n\n    const computedPrefixCls = computed(() => props.prefixCls || statePrefixCls.value);\n    if (props.mode !== 'inline' && props.inlineCollapsed !== undefined) {\n      warn('inlineCollapsed only use in inline mode!');\n    }\n    const selectedKeys = ref(props.selectedKeys || []);\n    const openKeys = ref(!props.inlineCollapsed && props.openKeys ? props.openKeys : []);\n    const inlineOpenKeys = ref(props.inlineCollapsed ? props.openKeys : []);\n\n    const rootMenu = ref<any | null>(null);\n    let keypath: (string | number)[] = [];\n\n    // const computedMode = computed(() => {\n    //   if (props.mode === 'inline') {\n    //     return props.inlineCollapsed || layoutSiderCollapsed?.value ? 'vertical' : props.mode;\n    //   }\n    //   return props.mode;\n    // });\n    const computedMode = ref(props.mode);\n    const setInlineMode = () => {\n      if (props.mode === 'inline') {\n        computedMode.value = props.inlineCollapsed || layoutSiderCollapsed?.value ? 'vertical' : props.mode;\n      }\n    };\n    setInlineMode();\n    const collapsed = ref(false);\n    // const handleTransitionEnd = (e: any) => {\n    //   if (e.target !== rootMenu.value || e.propertyName !== 'width') {\n    //     return;\n    //   }\n    //   if (props.mode === 'inline') {\n    //     if (props.inlineCollapsed || layoutSiderCollapsed?.value) {\n    //       computedMode.value = 'vertical';\n    //       inlineOpenKeys.value = openKeys.value;\n    //       openKeys.value = [];\n    //       collapsed.value = true;\n    //     } else {\n    //       computedMode.value = 'inline';\n    //       openKeys.value = inlineOpenKeys.value;\n    //       inlineOpenKeys.value = [];\n    //       collapsed.value = false;\n    //     }\n    //   }\n    // };\n\n    // #region methods\n    const collapsedChange = (val: boolean) => {\n      setTimeout(() => {\n        setInlineMode();\n      }, 300);\n\n      if (val) {\n        inlineOpenKeys.value = openKeys.value;\n        openKeys.value = [];\n        collapsed.value = true;\n      } else {\n        openKeys.value = inlineOpenKeys.value;\n        inlineOpenKeys.value = [];\n        collapsed.value = false;\n      }\n    };\n\n    const updateKeyPath = (key: string | number, type: string) => {\n      if (type === 'item') {\n        keypath = [key];\n      } else if (type === 'sub') {\n        keypath.push(key);\n      }\n    };\n\n    const fireMenuClick = (event: MenuItemClickEvent) => {\n      const info: MenuClickEvent = {\n        ...event,\n        keypath\n      };\n      emit('click', info);\n      if (dropdownContext && dropdownContext.fireItemClick && info.key) {\n        dropdownContext.fireItemClick(info);\n      }\n    };\n\n    const selectable = computed(() => {\n      return !inDrop || !!props.selectable;\n    });\n\n    const fireMenuDeselect = (event: MenuItemClickEvent) => {\n      if (selectable.value && props.multiple) {\n        const _selectedKeys = selectedKeys.value.filter((x) => x !== event.key);\n\n        emit('deselect', {\n          key: event.key,\n          item: event.item,\n          selectedKeys: _selectedKeys\n        });\n        if (props.selectedKeys === undefined) {\n          selectedKeys.value = _selectedKeys;\n        }\n        emit('update:selectedKeys', _selectedKeys);\n      }\n    };\n\n    const fireMenuSelect = (event: MenuItemClickEvent) => {\n      if (selectable.value) {\n        let _selectedKeys = [] as (string | number)[];\n        if (props.multiple) {\n          _selectedKeys = [...selectedKeys.value, event.key];\n        } else {\n          _selectedKeys = [event.key];\n        }\n        emit('select', {\n          key: event.key,\n          item: event.item,\n          selectedKeys: _selectedKeys\n        });\n        if (props.selectedKeys === undefined) {\n          selectedKeys.value = _selectedKeys;\n        }\n\n        emit('update:selectedKeys', _selectedKeys);\n      }\n    };\n\n    const fireMenuOpenChange = (event: MenuOpenEvent) => {\n      const { open, key } = event;\n      let _openKeys = openKeys.value;\n      if (open) {\n        _openKeys = [..._openKeys, key];\n      } else {\n        _openKeys = _openKeys.filter((x) => x !== key);\n      }\n      emit('open-change', _openKeys, event);\n      openKeys.value = _openKeys;\n      emit('update:openKeys', _openKeys);\n    };\n    // #endregion\n\n    watch(\n      () => props.selectedKeys,\n      (val) => {\n        selectedKeys.value = val || [];\n      }\n    );\n\n    watch(\n      () => props.openKeys,\n      (val) => {\n        openKeys.value = val;\n      }\n    );\n    watch(\n      () => props.inlineCollapsed,\n      (val) => {\n        if (val !== undefined) {\n          collapsedChange(val);\n        }\n      }\n    );\n\n    if (layoutSiderContext && layoutSiderCollapsed) {\n      watch(layoutSiderCollapsed, (val) => {\n        collapsedChange(val);\n      });\n    }\n\n    // #region provides\n    // just children to use it\n    provide('parentMenu', {\n      isRootMenu: true,\n      getPopupContainer: () => {\n        if (dropdownContext) {\n          return rootMenu.value?.parentNode;\n        }\n        return document.body;\n      }\n    });\n    // rootMenu's props supply to descendants use\n    provide('menuStore', {\n      mode: computedMode,\n      originalMode: mode,\n      selectedKeys,\n      openKeys,\n      subMenuOpenDelay,\n      subMenuCloseDelay,\n      rootPrefixCls: computedPrefixCls,\n      updateKeyPath,\n      // inlineIndent,\n      inlineCollapsed,\n      collapsed\n    });\n    // descendants trigger rootMenu's events\n    provide('menuEvent', {\n      fireMenuClick,\n      fireMenuDeselect,\n      fireMenuSelect,\n      fireMenuOpenChange\n    });\n    // #endregion\n\n    const { renderChild } = useWrapDom(props.mode, rootMenu, slots);\n\n    return {\n      rootMenu,\n      computedPrefixCls,\n      computedMode,\n      layoutSiderCollapsed,\n      renderChild\n    };\n  },\n  render() {\n    return (\n      <ul\n        ref=\"rootMenu\"\n        role={this.role || 'menu'}\n        class={[\n          `${this.computedPrefixCls}`,\n          `${this.computedPrefixCls}-${this.computedMode}`,\n          `${this.computedPrefixCls}-root`,\n          {\n            [`${this.computedPrefixCls}-inline-collapsed`]: this.inlineCollapsed || !!this.layoutSiderCollapsed\n          }\n        ]}\n        style={{\n          '--menu-level': 0\n        }}\n      >\n        {this.renderChild()}\n      </ul>\n    );\n  }\n});\n"],"names":["defineComponent","name","components","Render","props","menuProps","emits","menuEmits","setup","emit","slots","dropdownContext","inject","undefined","layoutSiderContext","inDrop","collapsed","layoutSiderCollapsed","prefixCls","statePrefixCls","useGlobalConfig","mode","subMenuOpenDelay","subMenuCloseDelay","inlineCollapsed","toRefs","computedPrefixCls","computed","value","warn","selectedKeys","ref","openKeys","inlineOpenKeys","rootMenu","keypath","computedMode","setInlineMode","collapsedChange","val","setTimeout","updateKeyPath","key","type","push","fireMenuClick","event","info","fireItemClick","selectable","fireMenuDeselect","multiple","_selectedKeys","filter","x","item","fireMenuSelect","fireMenuOpenChange","open","_openKeys","watch","provide","isRootMenu","getPopupContainer","parentNode","document","body","originalMode","rootPrefixCls","renderChild","useWrapDom","render","_createVNode","role"],"mappings":"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"}

package/lib/components/Menu/Menu.js

@@ -195,7 +195,10 @@ var Menu = vue.defineComponent({
       "role": this.role || "menu",
       "class": [`${this.computedPrefixCls}`, `${this.computedPrefixCls}-${this.computedMode}`, `${this.computedPrefixCls}-root`, {
         [`${this.computedPrefixCls}-inline-collapsed`]: this.inlineCollapsed || !!this.layoutSiderCollapsed
-      }]
+      }],
+      "style": {
+        "--menu-level": 0
+      }
     }, [this.renderChild()]);
   }
 });

package/lib/components/Menu/Menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"Menu.js","sources":["../../../../src/components/Menu/Menu.tsx"],"sourcesContent":["import { defineComponent, provide, inject, ref, toRefs, watch, computed } from 'vue';\nimport warn from '../../utils/warn';\nimport useGlobalConfig from '../base/hooks/useGlobalConfig';\nimport Render from '../base/Render';\nimport useWrapDom from './hooks/useWrapDom';\nimport type { DropdownContext } from '../Dropdown/Dropdown.type';\nimport type { LayoutSiderContext } from '../Layout/Layout.type';\nimport { menuProps, menuEmits, type MenuItemClickEvent, type MenuClickEvent, type MenuOpenEvent } from './Menu.type';\n\nexport default defineComponent({\n  name: 'UMenu',\n  components: { Render },\n  props: menuProps,\n  emits: menuEmits,\n  setup(props, { emit, slots }) {\n    const dropdownContext = inject<DropdownContext | undefined>('dropdownContext', undefined);\n    const layoutSiderContext = inject<LayoutSiderContext>('layoutSiderContext', {} as LayoutSiderContext);\n    const inDrop = dropdownContext !== undefined;\n    const { collapsed: layoutSiderCollapsed } = layoutSiderContext;\n    const { prefixCls: statePrefixCls } = useGlobalConfig(inDrop ? 'dropdown-menu' : 'menu');\n    const { mode, subMenuOpenDelay, subMenuCloseDelay, inlineCollapsed } = toRefs(props);\n\n    const computedPrefixCls = computed(() => props.prefixCls || statePrefixCls.value);\n    if (props.mode !== 'inline' && props.inlineCollapsed !== undefined) {\n      warn('inlineCollapsed only use in inline mode!');\n    }\n    const selectedKeys = ref(props.selectedKeys || []);\n    const openKeys = ref(!props.inlineCollapsed && props.openKeys ? props.openKeys : []);\n    const inlineOpenKeys = ref(props.inlineCollapsed ? props.openKeys : []);\n\n    const rootMenu = ref<any | null>(null);\n    let keypath: (string | number)[] = [];\n\n    // const computedMode = computed(() => {\n    //   if (props.mode === 'inline') {\n    //     return props.inlineCollapsed || layoutSiderCollapsed?.value ? 'vertical' : props.mode;\n    //   }\n    //   return props.mode;\n    // });\n    const computedMode = ref(props.mode);\n    const setInlineMode = () => {\n      if (props.mode === 'inline') {\n        computedMode.value = props.inlineCollapsed || layoutSiderCollapsed?.value ? 'vertical' : props.mode;\n      }\n    };\n    setInlineMode();\n    const collapsed = ref(false);\n    // const handleTransitionEnd = (e: any) => {\n    //   if (e.target !== rootMenu.value || e.propertyName !== 'width') {\n    //     return;\n    //   }\n    //   if (props.mode === 'inline') {\n    //     if (props.inlineCollapsed || layoutSiderCollapsed?.value) {\n    //       computedMode.value = 'vertical';\n    //       inlineOpenKeys.value = openKeys.value;\n    //       openKeys.value = [];\n    //       collapsed.value = true;\n    //     } else {\n    //       computedMode.value = 'inline';\n    //       openKeys.value = inlineOpenKeys.value;\n    //       inlineOpenKeys.value = [];\n    //       collapsed.value = false;\n    //     }\n    //   }\n    // };\n\n    // #region methods\n    const collapsedChange = (val: boolean) => {\n      setTimeout(() => {\n        setInlineMode();\n      }, 300);\n\n      if (val) {\n        inlineOpenKeys.value = openKeys.value;\n        openKeys.value = [];\n        collapsed.value = true;\n      } else {\n        openKeys.value = inlineOpenKeys.value;\n        inlineOpenKeys.value = [];\n        collapsed.value = false;\n      }\n    };\n\n    const updateKeyPath = (key: string | number, type: string) => {\n      if (type === 'item') {\n        keypath = [key];\n      } else if (type === 'sub') {\n        keypath.push(key);\n      }\n    };\n\n    const fireMenuClick = (event: MenuItemClickEvent) => {\n      const info: MenuClickEvent = {\n        ...event,\n        keypath\n      };\n      emit('click', info);\n      if (dropdownContext && dropdownContext.fireItemClick && info.key) {\n        dropdownContext.fireItemClick(info);\n      }\n    };\n\n    const selectable = computed(() => {\n      return !inDrop || !!props.selectable;\n    });\n\n    const fireMenuDeselect = (event: MenuItemClickEvent) => {\n      if (selectable.value && props.multiple) {\n        const _selectedKeys = selectedKeys.value.filter((x) => x !== event.key);\n\n        emit('deselect', {\n          key: event.key,\n          item: event.item,\n          selectedKeys: _selectedKeys\n        });\n        if (props.selectedKeys === undefined) {\n          selectedKeys.value = _selectedKeys;\n        }\n        emit('update:selectedKeys', _selectedKeys);\n      }\n    };\n\n    const fireMenuSelect = (event: MenuItemClickEvent) => {\n      if (selectable.value) {\n        let _selectedKeys = [] as (string | number)[];\n        if (props.multiple) {\n          _selectedKeys = [...selectedKeys.value, event.key];\n        } else {\n          _selectedKeys = [event.key];\n        }\n        emit('select', {\n          key: event.key,\n          item: event.item,\n          selectedKeys: _selectedKeys\n        });\n        if (props.selectedKeys === undefined) {\n          selectedKeys.value = _selectedKeys;\n        }\n\n        emit('update:selectedKeys', _selectedKeys);\n      }\n    };\n\n    const fireMenuOpenChange = (event: MenuOpenEvent) => {\n      const { open, key } = event;\n      let _openKeys = openKeys.value;\n      if (open) {\n        _openKeys = [..._openKeys, key];\n      } else {\n        _openKeys = _openKeys.filter((x) => x !== key);\n      }\n      emit('open-change', _openKeys, event);\n      openKeys.value = _openKeys;\n      emit('update:openKeys', _openKeys);\n    };\n    // #endregion\n\n    watch(\n      () => props.selectedKeys,\n      (val) => {\n        selectedKeys.value = val || [];\n      }\n    );\n\n    watch(\n      () => props.openKeys,\n      (val) => {\n        openKeys.value = val;\n      }\n    );\n    watch(\n      () => props.inlineCollapsed,\n      (val) => {\n        if (val !== undefined) {\n          collapsedChange(val);\n        }\n      }\n    );\n\n    if (layoutSiderContext && layoutSiderCollapsed) {\n      watch(layoutSiderCollapsed, (val) => {\n        collapsedChange(val);\n      });\n    }\n\n    // #region provides\n    // just children to use it\n    provide('parentMenu', {\n      isRootMenu: true,\n      getPopupContainer: () => {\n        if (dropdownContext) {\n          return rootMenu.value?.parentNode;\n        }\n        return document.body;\n      }\n    });\n    // rootMenu's props supply to descendants use\n    provide('menuStore', {\n      mode: computedMode,\n      originalMode: mode,\n      selectedKeys,\n      openKeys,\n      subMenuOpenDelay,\n      subMenuCloseDelay,\n      rootPrefixCls: computedPrefixCls,\n      updateKeyPath,\n      // inlineIndent,\n      inlineCollapsed,\n      collapsed\n    });\n    // descendants trigger rootMenu's events\n    provide('menuEvent', {\n      fireMenuClick,\n      fireMenuDeselect,\n      fireMenuSelect,\n      fireMenuOpenChange\n    });\n    // #endregion\n\n    const { renderChild } = useWrapDom(props.mode, rootMenu, slots);\n\n    return {\n      rootMenu,\n      computedPrefixCls,\n      computedMode,\n      layoutSiderCollapsed,\n      renderChild\n    };\n  },\n  render() {\n    return (\n      <ul\n        ref=\"rootMenu\"\n        role={this.role || 'menu'}\n        class={[\n          `${this.computedPrefixCls}`,\n          `${this.computedPrefixCls}-${this.computedMode}`,\n          `${this.computedPrefixCls}-root`,\n          {\n            [`${this.computedPrefixCls}-inline-collapsed`]: this.inlineCollapsed || !!this.layoutSiderCollapsed\n          }\n        ]}\n      >\n        {this.renderChild()}\n      </ul>\n    );\n  }\n});\n"],"names":["defineComponent","name","components","Render","props","menuProps","emits","menuEmits","setup","emit","slots","dropdownContext","inject","undefined","layoutSiderContext","inDrop","collapsed","layoutSiderCollapsed","prefixCls","statePrefixCls","useGlobalConfig","mode","subMenuOpenDelay","subMenuCloseDelay","inlineCollapsed","toRefs","computedPrefixCls","computed","value","warn","selectedKeys","ref","openKeys","inlineOpenKeys","rootMenu","keypath","computedMode","setInlineMode","collapsedChange","val","setTimeout","updateKeyPath","key","type","push","fireMenuClick","event","info","fireItemClick","selectable","fireMenuDeselect","multiple","_selectedKeys","filter","x","item","fireMenuSelect","fireMenuOpenChange","open","_openKeys","watch","provide","isRootMenu","getPopupContainer","parentNode","document","body","originalMode","rootPrefixCls","renderChild","useWrapDom","render","_createVNode","role"],"mappings":"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"}
+{"version":3,"file":"Menu.js","sources":["../../../../src/components/Menu/Menu.tsx"],"sourcesContent":["import { defineComponent, provide, inject, ref, toRefs, watch, computed } from 'vue';\nimport warn from '../../utils/warn';\nimport useGlobalConfig from '../base/hooks/useGlobalConfig';\nimport Render from '../base/Render';\nimport useWrapDom from './hooks/useWrapDom';\nimport type { DropdownContext } from '../Dropdown/Dropdown.type';\nimport type { LayoutSiderContext } from '../Layout/Layout.type';\nimport { menuProps, menuEmits, type MenuItemClickEvent, type MenuClickEvent, type MenuOpenEvent } from './Menu.type';\n\nexport default defineComponent({\n  name: 'UMenu',\n  components: { Render },\n  props: menuProps,\n  emits: menuEmits,\n  setup(props, { emit, slots }) {\n    const dropdownContext = inject<DropdownContext | undefined>('dropdownContext', undefined);\n    const layoutSiderContext = inject<LayoutSiderContext>('layoutSiderContext', {} as LayoutSiderContext);\n    const inDrop = dropdownContext !== undefined;\n    const { collapsed: layoutSiderCollapsed } = layoutSiderContext;\n    const { prefixCls: statePrefixCls } = useGlobalConfig(inDrop ? 'dropdown-menu' : 'menu');\n    const { mode, subMenuOpenDelay, subMenuCloseDelay, inlineCollapsed } = toRefs(props);\n\n    const computedPrefixCls = computed(() => props.prefixCls || statePrefixCls.value);\n    if (props.mode !== 'inline' && props.inlineCollapsed !== undefined) {\n      warn('inlineCollapsed only use in inline mode!');\n    }\n    const selectedKeys = ref(props.selectedKeys || []);\n    const openKeys = ref(!props.inlineCollapsed && props.openKeys ? props.openKeys : []);\n    const inlineOpenKeys = ref(props.inlineCollapsed ? props.openKeys : []);\n\n    const rootMenu = ref<any | null>(null);\n    let keypath: (string | number)[] = [];\n\n    // const computedMode = computed(() => {\n    //   if (props.mode === 'inline') {\n    //     return props.inlineCollapsed || layoutSiderCollapsed?.value ? 'vertical' : props.mode;\n    //   }\n    //   return props.mode;\n    // });\n    const computedMode = ref(props.mode);\n    const setInlineMode = () => {\n      if (props.mode === 'inline') {\n        computedMode.value = props.inlineCollapsed || layoutSiderCollapsed?.value ? 'vertical' : props.mode;\n      }\n    };\n    setInlineMode();\n    const collapsed = ref(false);\n    // const handleTransitionEnd = (e: any) => {\n    //   if (e.target !== rootMenu.value || e.propertyName !== 'width') {\n    //     return;\n    //   }\n    //   if (props.mode === 'inline') {\n    //     if (props.inlineCollapsed || layoutSiderCollapsed?.value) {\n    //       computedMode.value = 'vertical';\n    //       inlineOpenKeys.value = openKeys.value;\n    //       openKeys.value = [];\n    //       collapsed.value = true;\n    //     } else {\n    //       computedMode.value = 'inline';\n    //       openKeys.value = inlineOpenKeys.value;\n    //       inlineOpenKeys.value = [];\n    //       collapsed.value = false;\n    //     }\n    //   }\n    // };\n\n    // #region methods\n    const collapsedChange = (val: boolean) => {\n      setTimeout(() => {\n        setInlineMode();\n      }, 300);\n\n      if (val) {\n        inlineOpenKeys.value = openKeys.value;\n        openKeys.value = [];\n        collapsed.value = true;\n      } else {\n        openKeys.value = inlineOpenKeys.value;\n        inlineOpenKeys.value = [];\n        collapsed.value = false;\n      }\n    };\n\n    const updateKeyPath = (key: string | number, type: string) => {\n      if (type === 'item') {\n        keypath = [key];\n      } else if (type === 'sub') {\n        keypath.push(key);\n      }\n    };\n\n    const fireMenuClick = (event: MenuItemClickEvent) => {\n      const info: MenuClickEvent = {\n        ...event,\n        keypath\n      };\n      emit('click', info);\n      if (dropdownContext && dropdownContext.fireItemClick && info.key) {\n        dropdownContext.fireItemClick(info);\n      }\n    };\n\n    const selectable = computed(() => {\n      return !inDrop || !!props.selectable;\n    });\n\n    const fireMenuDeselect = (event: MenuItemClickEvent) => {\n      if (selectable.value && props.multiple) {\n        const _selectedKeys = selectedKeys.value.filter((x) => x !== event.key);\n\n        emit('deselect', {\n          key: event.key,\n          item: event.item,\n          selectedKeys: _selectedKeys\n        });\n        if (props.selectedKeys === undefined) {\n          selectedKeys.value = _selectedKeys;\n        }\n        emit('update:selectedKeys', _selectedKeys);\n      }\n    };\n\n    const fireMenuSelect = (event: MenuItemClickEvent) => {\n      if (selectable.value) {\n        let _selectedKeys = [] as (string | number)[];\n        if (props.multiple) {\n          _selectedKeys = [...selectedKeys.value, event.key];\n        } else {\n          _selectedKeys = [event.key];\n        }\n        emit('select', {\n          key: event.key,\n          item: event.item,\n          selectedKeys: _selectedKeys\n        });\n        if (props.selectedKeys === undefined) {\n          selectedKeys.value = _selectedKeys;\n        }\n\n        emit('update:selectedKeys', _selectedKeys);\n      }\n    };\n\n    const fireMenuOpenChange = (event: MenuOpenEvent) => {\n      const { open, key } = event;\n      let _openKeys = openKeys.value;\n      if (open) {\n        _openKeys = [..._openKeys, key];\n      } else {\n        _openKeys = _openKeys.filter((x) => x !== key);\n      }\n      emit('open-change', _openKeys, event);\n      openKeys.value = _openKeys;\n      emit('update:openKeys', _openKeys);\n    };\n    // #endregion\n\n    watch(\n      () => props.selectedKeys,\n      (val) => {\n        selectedKeys.value = val || [];\n      }\n    );\n\n    watch(\n      () => props.openKeys,\n      (val) => {\n        openKeys.value = val;\n      }\n    );\n    watch(\n      () => props.inlineCollapsed,\n      (val) => {\n        if (val !== undefined) {\n          collapsedChange(val);\n        }\n      }\n    );\n\n    if (layoutSiderContext && layoutSiderCollapsed) {\n      watch(layoutSiderCollapsed, (val) => {\n        collapsedChange(val);\n      });\n    }\n\n    // #region provides\n    // just children to use it\n    provide('parentMenu', {\n      isRootMenu: true,\n      getPopupContainer: () => {\n        if (dropdownContext) {\n          return rootMenu.value?.parentNode;\n        }\n        return document.body;\n      }\n    });\n    // rootMenu's props supply to descendants use\n    provide('menuStore', {\n      mode: computedMode,\n      originalMode: mode,\n      selectedKeys,\n      openKeys,\n      subMenuOpenDelay,\n      subMenuCloseDelay,\n      rootPrefixCls: computedPrefixCls,\n      updateKeyPath,\n      // inlineIndent,\n      inlineCollapsed,\n      collapsed\n    });\n    // descendants trigger rootMenu's events\n    provide('menuEvent', {\n      fireMenuClick,\n      fireMenuDeselect,\n      fireMenuSelect,\n      fireMenuOpenChange\n    });\n    // #endregion\n\n    const { renderChild } = useWrapDom(props.mode, rootMenu, slots);\n\n    return {\n      rootMenu,\n      computedPrefixCls,\n      computedMode,\n      layoutSiderCollapsed,\n      renderChild\n    };\n  },\n  render() {\n    return (\n      <ul\n        ref=\"rootMenu\"\n        role={this.role || 'menu'}\n        class={[\n          `${this.computedPrefixCls}`,\n          `${this.computedPrefixCls}-${this.computedMode}`,\n          `${this.computedPrefixCls}-root`,\n          {\n            [`${this.computedPrefixCls}-inline-collapsed`]: this.inlineCollapsed || !!this.layoutSiderCollapsed\n          }\n        ]}\n        style={{\n          '--menu-level': 0\n        }}\n      >\n        {this.renderChild()}\n      </ul>\n    );\n  }\n});\n"],"names":["defineComponent","name","components","Render","props","menuProps","emits","menuEmits","setup","emit","slots","dropdownContext","inject","undefined","layoutSiderContext","inDrop","collapsed","layoutSiderCollapsed","prefixCls","statePrefixCls","useGlobalConfig","mode","subMenuOpenDelay","subMenuCloseDelay","inlineCollapsed","toRefs","computedPrefixCls","computed","value","warn","selectedKeys","ref","openKeys","inlineOpenKeys","rootMenu","keypath","computedMode","setInlineMode","collapsedChange","val","setTimeout","updateKeyPath","key","type","push","fireMenuClick","event","info","fireItemClick","selectable","fireMenuDeselect","multiple","_selectedKeys","filter","x","item","fireMenuSelect","fireMenuOpenChange","open","_openKeys","watch","provide","isRootMenu","getPopupContainer","parentNode","document","body","originalMode","rootPrefixCls","renderChild","useWrapDom","render","_createVNode","role"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@koi-design/uxd-ui",
-  "version": "14.0.19",
+  "version": "14.0.20",
   "description": "uxd ui component with vue3.0",
   "license": "MIT",
   "maintainers": [],

package/styles/components/menu/index.css

@@ -1 +1 @@
-:root,[data-theme-color]{--primary-color:var(--primary-9)}.uui-menu{--menu-width:100%;--menu-collapsed-width:80px;--menu-padding:0;--menu-background-color:transparent;--menu-item-height:var(--space-9);--menu-item-gap:var(--space-2);--menu-item-padding-horizontal:var(--space-2);--menu-item-font-color:var(--default-font-color);--menu-item-hover-background-color:var(--color-background-secondary);--menu-item-hover-color:var(--default-font-color);--menu-item-selected-color:var(--default-font-color);--menu-item-selected-background-color:var(--color-background-secondary);--menu-item-selected-font-weight:var(--font-weight-semibold);--menu-item-border-radius:var(--radius-lg);--menu-submenu-selected-color:var(--default-font-color);--menu-submenu-selected-background-color:var(--color-background-secondary);--menu-submenu-selected-font-weight:var(--font-weight-semibold);--menu-group-font-size:var(--font-size-xs);--menu-group-color:var(--secondary-font-color);--menu-group-height:var(--space-8);--horizontal-menu-height:var(--space-10);--horizontal-menu-column-gap:var(--space-1);--vertical-menu-row-gap:var(--space-1);--inline-menu-width:100%;--inline-menu-indent:var(--space-6);--inline-menu-sub-item-height:var(--space-8);--inline-collapse-menu-item-width:var(--space-8);--menu-popup-background-color:var(--color-background);--menu-popup-min-width:160px;--menu-popup-padding:var(--space-2)}.uui-menu{box-sizing:border-box;margin:0;padding:0;font-variant:var(--default-font-variant);line-height:var(--default-line-height);font-feature-settings:var(--default-font-feature-settings);margin-bottom:0;padding:var(--menu-padding);color:var(--default-font-color);list-style:none;background:var(--menu-background-color);outline:0;width:var(--menu-width);-webkit-user-select:none;user-select:none;transition:width var(--animation-time) cubic-bezier(.2,0,0,1);font-size:var(--default-font-size)}.uui-menu ol,.uui-menu ul{margin:0;padding:0;list-style:none}.uui-menu-hidden{display:none}.uui-menu-item-group-title{color:var(--menu-group-color);height:var(--menu-group-height);font-size:var(--menu-group-font-size);transition:all var(--animation-time);padding:0 var(--menu-item-padding-horizontal);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;column-gap:var(--menu-item-gap)}.uui-menu-submenu,.uui-menu-submenu-inline{transition:background var(--animation-time) var(--ease-in-out),padding var(--animation-time) var(--ease-in-out)}.uui-menu-submenu-popup{position:absolute;z-index:var(--zindex-dropdown)}.uui-menu-submenu-popup .uui-menu{background-color:var(--menu-popup-background-color);box-shadow:var(--dropdown-shadow);border-radius:var(--dropdown-border-radius);border:1px solid var(--color-border-split)}.uui-menu-submenu-inline>.uui-menu-submenu-title .uui-menu-submenu-arrow,.uui-menu-submenu-vertical-left>.uui-menu-submenu-title .uui-menu-submenu-arrow,.uui-menu-submenu-vertical-right>.uui-menu-submenu-title .uui-menu-submenu-arrow,.uui-menu-submenu-vertical>.uui-menu-submenu-title .uui-menu-submenu-arrow{margin-left:auto}.uui-menu-submenu.uui-menu-submenu-horizontal>.uui-menu-submenu-title .uui-menu-submenu-arrow{display:none}.uui-menu-submenu-open.uui-menu-submenu-inline>.uui-menu-submenu-title .uui-menu-submenu-arrow{transform:rotate(180deg)}.uui-menu-submenu-selected>.uui-menu-submenu-title{color:var(--menu-submenu-selected-color);background-color:var(--menu-submenu-selected-background-color);font-weight:var(--menu-submenu-selected-font-weight)}.uui-menu-submenu-selected>.uui-menu-submenu-title:hover{color:var(--menu-submenu-selected-color);background-color:var(--menu-submenu-selected-background-color)}.uui-menu-submenu>.uui-menu-submenu-title::after{transition:transform var(--animation-time) var(--ease-in-out)}.uui-menu-submenu .uui-menu-sub{cursor:initial;transition:background var(--animation-time),padding var(--animation-time)}.uui-menu-item,.uui-menu-submenu-title{position:relative;display:flex;align-items:center;justify-content:flex-start;column-gap:var(--menu-item-gap);white-space:nowrap;cursor:pointer;padding:0 var(--menu-item-padding-horizontal);transition:padding var(--animation-time) var(--ease-out);border-radius:var(--menu-item-border-radius);height:var(--menu-item-height)}.uui-menu-item .uui-icon:not(.uui-menu-submenu-arrow),.uui-menu-submenu-title .uui-icon:not(.uui-menu-submenu-arrow){width:var(--icon-font-size);font-size:var(--icon-font-size);transition:font-size var(--animation-time);flex:0}.uui-menu-item .uui-icon:not(.uui-menu-submenu-arrow)+span,.uui-menu-submenu-title .uui-icon:not(.uui-menu-submenu-arrow)+span{opacity:1;display:flex;transition:opacity var(--animation-time) var(--ease-in-out)}.uui-menu-item>a,.uui-menu-submenu-title>a{color:var(--menu-item-font-color)}.uui-menu-item>a:hover,.uui-menu-submenu-title>a:hover{color:var(--menu-item-hover-color);text-decoration:none}.uui-menu-item>span,.uui-menu-submenu-title>span{display:flex;align-items:center}.uui-menu-item>span:hover,.uui-menu-submenu-title>span:hover{text-decoration:none}.uui-menu-item:hover,.uui-menu-submenu-title:hover{color:var(--menu-item-hover-color);background-color:var(--menu-item-hover-background-color)}.uui-menu-item:hover>a,.uui-menu-submenu-title:hover>a{color:var(--menu-item-hover-color)}.uui-menu-item:active,.uui-menu-submenu-title:active{background-color:var(--menu-item-hover-background-color);color:var(--menu-item-hover-color)}.uui-menu-item-selected{color:var(--menu-item-selected-color);background-color:var(--menu-item-selected-background-color);font-weight:var(--menu-item-selected-font-weight)}.uui-menu-item-selected>a{color:var(--menu-item-selected-color)}.uui-menu-item-selected>a:hover{color:var(--menu-item-selected-color)}.uui-menu-item-selected:hover{color:var(--menu-item-selected-color);background-color:var(--menu-item-selected-background-color)}.uui-menu-submenu:not(.uui-menu-submenu-selected)>.uui-menu-submenu-title:hover{color:var(--menu-item-hover-color);background-color:var(--menu-item-hover-background-color)}.uui-menu-submenu:not(.uui-menu-submenu-selected)>.uui-menu-submenu-title:hover>a{color:var(--menu-item-hover-color)}.uui-menu-item>a::before{position:absolute;inset:0;content:' '}.uui-menu-item-divider{height:1px;overflow:hidden;line-height:0;background-color:var(--color-border-split)}.uui-menu>.uui-menu-item-divider{margin:1px 0}.uui-menu-horizontal{--menu-item-height:var(--horizontal-menu-height);--menu-item-padding-horizontal:var(--space-4);display:flex;flex-wrap:nowrap;border:none;column-gap:var(--horizontal-menu-column-gap);position:relative}.uui-menu-horizontal>.uui-menu-item,.uui-menu-horizontal>.uui-menu-submenu .uui-menu-submenu-title{flex:0;margin:0;padding:0 var(--menu-item-padding-horizontal)}.uui-menu-horizontal>.uui-menu-item>a{display:block}.uui-menu-inline,.uui-menu-vertical,.uui-menu-vertical-left,.uui-menu-vertical-right{--menu-padding:var(--space-2)}.uui-menu-inline .uui-menu-item,.uui-menu-inline .uui-menu-submenu-title,.uui-menu-vertical .uui-menu-item,.uui-menu-vertical .uui-menu-submenu-title,.uui-menu-vertical-left .uui-menu-item,.uui-menu-vertical-left .uui-menu-submenu-title,.uui-menu-vertical-right .uui-menu-item,.uui-menu-vertical-right .uui-menu-submenu-title{padding:0 var(--menu-item-padding-horizontal);border-radius:var(--menu-item-border-radius);font-size:var(--default-font-size);overflow:hidden;text-overflow:ellipsis}.uui-menu-inline .uui-menu-item .uui-icon,.uui-menu-inline .uui-menu-submenu-title .uui-icon,.uui-menu-vertical .uui-menu-item .uui-icon,.uui-menu-vertical .uui-menu-submenu-title .uui-icon,.uui-menu-vertical-left .uui-menu-item .uui-icon,.uui-menu-vertical-left .uui-menu-submenu-title .uui-icon,.uui-menu-vertical-right .uui-menu-item .uui-icon,.uui-menu-vertical-right .uui-menu-submenu-title .uui-icon{line-height:var(--vertical-menu-sub-item-height)}.uui-menu-inline .uui-menu-item,.uui-menu-vertical .uui-menu-item,.uui-menu-vertical-left .uui-menu-item,.uui-menu-vertical-right .uui-menu-item{position:relative}.uui-menu-inline .uui-menu-item-group-list,.uui-menu-inline .uui-menu-sub,.uui-menu-inline.uui-menu-root,.uui-menu-vertical .uui-menu-item-group-list,.uui-menu-vertical .uui-menu-sub,.uui-menu-vertical-left .uui-menu-item-group-list,.uui-menu-vertical-left .uui-menu-sub,.uui-menu-vertical-left.uui-menu-root,.uui-menu-vertical-right .uui-menu-item-group-list,.uui-menu-vertical-right .uui-menu-sub,.uui-menu-vertical-right.uui-menu-root,.uui-menu-vertical.uui-menu-root{display:flex;flex-direction:column;align-items:stretch;row-gap:var(--vertical-menu-row-gap)}.uui-menu-vertical-left.uui-menu-sub,.uui-menu-vertical-right.uui-menu-sub,.uui-menu-vertical.uui-menu-sub{min-width:var(--menu-popup-min-width);padding:var(--menu-popup-padding);transform-origin:0 0}.uui-menu-inline{width:var(--inline-menu-width)}.uui-menu-inline .uui-menu-item,.uui-menu-inline .uui-menu-submenu-title{padding-left:calc(var(--menu-item-padding-horizontal) + var(--menu-level,0) * var(--inline-menu-indent))}.uui-menu-inline .uui-menu-item-group-title{padding:0 var(--menu-item-padding-horizontal) 0 calc(var(--menu-item-padding-horizontal) + var(--menu-level) * var(--inline-menu-indent))}.uui-menu-inline .uui-menu-sub{--menu-item-height:var(--inline-menu-sub-item-height);padding:var(--space-1) 0}.uui-menu-inline-collapsed{width:var(--menu-collapsed-width)}.uui-menu-inline-collapsed>.uui-menu-item,.uui-menu-inline-collapsed>.uui-menu-item-group>.uui-menu-item-group-list>.uui-menu-item,.uui-menu-inline-collapsed>.uui-menu-item-group>.uui-menu-item-group-list>.uui-menu-submenu>.uui-menu-submenu-title,.uui-menu-inline-collapsed>.uui-menu-submenu>.uui-menu-submenu-title{left:0;padding-inline:calc(var(--menu-collapsed-width)/ 2 - var(--space-2) - var(--font-size-lg)/ 2);text-overflow:clip;column-gap:0}.uui-menu-inline-collapsed>.uui-menu-item .uui-menu-submenu-arrow,.uui-menu-inline-collapsed>.uui-menu-item-group>.uui-menu-item-group-list>.uui-menu-item .uui-menu-submenu-arrow,.uui-menu-inline-collapsed>.uui-menu-item-group>.uui-menu-item-group-list>.uui-menu-submenu>.uui-menu-submenu-title .uui-menu-submenu-arrow,.uui-menu-inline-collapsed>.uui-menu-submenu>.uui-menu-submenu-title .uui-menu-submenu-arrow{display:none}.uui-menu-inline-collapsed>.uui-menu-item .uui-icon,.uui-menu-inline-collapsed>.uui-menu-item-group>.uui-menu-item-group-list>.uui-menu-item .uui-icon,.uui-menu-inline-collapsed>.uui-menu-item-group>.uui-menu-item-group-list>.uui-menu-submenu>.uui-menu-submenu-title .uui-icon,.uui-menu-inline-collapsed>.uui-menu-submenu>.uui-menu-submenu-title .uui-icon{margin:0 auto;font-size:var(--font-size-lg)}.uui-menu-inline-collapsed>.uui-menu-item .uui-icon+span,.uui-menu-inline-collapsed>.uui-menu-item-group>.uui-menu-item-group-list>.uui-menu-item .uui-icon+span,.uui-menu-inline-collapsed>.uui-menu-item-group>.uui-menu-item-group-list>.uui-menu-submenu>.uui-menu-submenu-title .uui-icon+span,.uui-menu-inline-collapsed>.uui-menu-submenu>.uui-menu-submenu-title .uui-icon+span{opacity:0}.uui-menu-inline-collapsed .uui-menu-inline.uui-menu-sub{opacity:0}.uui-menu-inline-collapsed-tooltip{pointer-events:none}.uui-menu-inline-collapsed-tooltip .uui-icon{display:none}.uui-menu-inline-collapsed-tooltip a{color:#fff}.uui-menu-item-disabled,.uui-menu-submenu-disabled{color:var(--color-disabled-font)!important;background:0 0!important;border-color:transparent!important;cursor:not-allowed}.uui-menu-item-disabled>a,.uui-menu-submenu-disabled>a{color:var(--color-disabled-font)!important;pointer-events:none}.uui-menu-item-disabled>.uui-menu-submenu-title,.uui-menu-submenu-disabled>.uui-menu-submenu-title{color:var(--color-disabled-font)!important;cursor:not-allowed}.uui-menu-item-disabled .uui-icon,.uui-menu-submenu-disabled .uui-icon{background-color:transparent!important}.uui-menu-direction-rtl{box-shadow:var(--vertical-menu-border-width) 0 0 0 var(--vertical-menu-border-color) inset;direction:rtl}.uui-menu-direction-rtl .uui-menu-submenu-title .uui-menu-submenu-arrow{margin-right:auto;margin-left:0;transform:rotate(180deg)}
+:root,[data-theme-color]{--primary-color:var(--primary-9)}.uui-menu{--menu-width:100%;--menu-collapsed-width:80px;--menu-padding:0;--menu-background-color:transparent;--menu-item-height:var(--space-9);--menu-item-gap:var(--space-2);--menu-item-padding-horizontal:var(--space-2);--menu-item-font-color:var(--default-font-color);--menu-item-hover-background-color:var(--color-background-secondary);--menu-item-hover-color:var(--default-font-color);--menu-item-selected-color:var(--default-font-color);--menu-item-selected-background-color:var(--color-background-secondary);--menu-item-selected-font-weight:var(--font-weight-semibold);--menu-item-border-radius:var(--radius-lg);--menu-submenu-selected-color:var(--default-font-color);--menu-submenu-selected-background-color:var(--color-background-secondary);--menu-submenu-selected-font-weight:var(--font-weight-semibold);--menu-group-font-size:var(--font-size-xs);--menu-group-color:var(--secondary-font-color);--menu-group-height:var(--space-8);--horizontal-menu-height:var(--space-10);--horizontal-menu-column-gap:var(--space-1);--vertical-menu-row-gap:var(--space-1);--inline-menu-width:100%;--inline-menu-indent:var(--space-6);--inline-menu-sub-item-height:var(--space-8);--inline-collapse-menu-item-width:var(--space-8);--menu-popup-background-color:var(--color-background);--menu-popup-min-width:160px;--menu-popup-padding:var(--space-2)}.uui-menu{box-sizing:border-box;margin:0;padding:0;font-variant:var(--default-font-variant);line-height:var(--default-line-height);font-feature-settings:var(--default-font-feature-settings);margin-bottom:0;padding:var(--menu-padding);color:var(--default-font-color);list-style:none;background:var(--menu-background-color);outline:0;width:var(--menu-width);-webkit-user-select:none;user-select:none;transition:width var(--animation-time) cubic-bezier(.2,0,0,1);font-size:var(--default-font-size)}.uui-menu ol,.uui-menu ul{margin:0;padding:0;list-style:none}.uui-menu-hidden{display:none}.uui-menu-item-group-title{color:var(--menu-group-color);height:var(--menu-group-height);font-size:var(--menu-group-font-size);transition:all var(--animation-time);padding:0 var(--menu-item-padding-horizontal);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;column-gap:var(--menu-item-gap)}.uui-menu-submenu,.uui-menu-submenu-inline{transition:background var(--animation-time) var(--ease-in-out),padding var(--animation-time) var(--ease-in-out)}.uui-menu-submenu-popup{position:absolute;z-index:var(--zindex-dropdown)}.uui-menu-submenu-popup .uui-menu{background-color:var(--menu-popup-background-color);box-shadow:var(--dropdown-shadow);border-radius:var(--dropdown-border-radius);border:1px solid var(--color-border-split)}.uui-menu-submenu-inline>.uui-menu-submenu-title .uui-menu-submenu-arrow,.uui-menu-submenu-vertical-left>.uui-menu-submenu-title .uui-menu-submenu-arrow,.uui-menu-submenu-vertical-right>.uui-menu-submenu-title .uui-menu-submenu-arrow,.uui-menu-submenu-vertical>.uui-menu-submenu-title .uui-menu-submenu-arrow{margin-left:auto}.uui-menu-submenu.uui-menu-submenu-horizontal>.uui-menu-submenu-title .uui-menu-submenu-arrow{display:none}.uui-menu-submenu-open.uui-menu-submenu-inline>.uui-menu-submenu-title .uui-menu-submenu-arrow{transform:rotate(180deg)}.uui-menu-submenu-selected>.uui-menu-submenu-title{color:var(--menu-submenu-selected-color);background-color:var(--menu-submenu-selected-background-color);font-weight:var(--menu-submenu-selected-font-weight)}.uui-menu-submenu-selected>.uui-menu-submenu-title:hover{color:var(--menu-submenu-selected-color);background-color:var(--menu-submenu-selected-background-color)}.uui-menu-submenu>.uui-menu-submenu-title::after{transition:transform var(--animation-time) var(--ease-in-out)}.uui-menu-submenu .uui-menu-sub{cursor:initial;transition:background var(--animation-time),padding var(--animation-time)}.uui-menu-item,.uui-menu-submenu-title{position:relative;display:flex;align-items:center;justify-content:flex-start;column-gap:var(--menu-item-gap);white-space:nowrap;cursor:pointer;padding:0 var(--menu-item-padding-horizontal);transition:padding var(--animation-time) var(--ease-out);border-radius:var(--menu-item-border-radius);height:var(--menu-item-height)}.uui-menu-item .uui-icon:not(.uui-menu-submenu-arrow),.uui-menu-submenu-title .uui-icon:not(.uui-menu-submenu-arrow){width:var(--icon-font-size);font-size:var(--icon-font-size);transition:font-size var(--animation-time);flex:0}.uui-menu-item .uui-icon:not(.uui-menu-submenu-arrow)+span,.uui-menu-submenu-title .uui-icon:not(.uui-menu-submenu-arrow)+span{opacity:1;display:flex;transition:opacity var(--animation-time) var(--ease-in-out)}.uui-menu-item>a,.uui-menu-submenu-title>a{color:var(--menu-item-font-color)}.uui-menu-item>a:hover,.uui-menu-submenu-title>a:hover{color:var(--menu-item-hover-color);text-decoration:none}.uui-menu-item>span,.uui-menu-submenu-title>span{display:flex;align-items:center}.uui-menu-item>span:hover,.uui-menu-submenu-title>span:hover{text-decoration:none}.uui-menu-item:hover,.uui-menu-submenu-title:hover{color:var(--menu-item-hover-color);background-color:var(--menu-item-hover-background-color)}.uui-menu-item:hover>a,.uui-menu-submenu-title:hover>a{color:var(--menu-item-hover-color)}.uui-menu-item:active,.uui-menu-submenu-title:active{background-color:var(--menu-item-hover-background-color);color:var(--menu-item-hover-color)}.uui-menu-item-selected{color:var(--menu-item-selected-color);background-color:var(--menu-item-selected-background-color);font-weight:var(--menu-item-selected-font-weight)}.uui-menu-item-selected>a{color:var(--menu-item-selected-color)}.uui-menu-item-selected>a:hover{color:var(--menu-item-selected-color)}.uui-menu-item-selected:hover{color:var(--menu-item-selected-color);background-color:var(--menu-item-selected-background-color)}.uui-menu-submenu:not(.uui-menu-submenu-selected)>.uui-menu-submenu-title:hover{color:var(--menu-item-hover-color);background-color:var(--menu-item-hover-background-color)}.uui-menu-submenu:not(.uui-menu-submenu-selected)>.uui-menu-submenu-title:hover>a{color:var(--menu-item-hover-color)}.uui-menu-item>a::before{position:absolute;inset:0;content:' '}.uui-menu-item-divider{height:1px;overflow:hidden;line-height:0;background-color:var(--color-border-split)}.uui-menu>.uui-menu-item-divider{margin:1px 0}.uui-menu-horizontal{--menu-item-height:var(--horizontal-menu-height);--menu-item-padding-horizontal:var(--space-4);display:flex;flex-wrap:nowrap;border:none;column-gap:var(--horizontal-menu-column-gap);position:relative}.uui-menu-horizontal>.uui-menu-item,.uui-menu-horizontal>.uui-menu-submenu .uui-menu-submenu-title{flex:0;margin:0;padding:0 var(--menu-item-padding-horizontal)}.uui-menu-horizontal>.uui-menu-item>a{display:block}.uui-menu-inline,.uui-menu-vertical,.uui-menu-vertical-left,.uui-menu-vertical-right{--menu-padding:var(--space-2)}.uui-menu-inline .uui-menu-item,.uui-menu-inline .uui-menu-submenu-title,.uui-menu-vertical .uui-menu-item,.uui-menu-vertical .uui-menu-submenu-title,.uui-menu-vertical-left .uui-menu-item,.uui-menu-vertical-left .uui-menu-submenu-title,.uui-menu-vertical-right .uui-menu-item,.uui-menu-vertical-right .uui-menu-submenu-title{padding:0 var(--menu-item-padding-horizontal);border-radius:var(--menu-item-border-radius);font-size:var(--default-font-size);overflow:hidden;text-overflow:ellipsis}.uui-menu-inline .uui-menu-item .uui-icon,.uui-menu-inline .uui-menu-submenu-title .uui-icon,.uui-menu-vertical .uui-menu-item .uui-icon,.uui-menu-vertical .uui-menu-submenu-title .uui-icon,.uui-menu-vertical-left .uui-menu-item .uui-icon,.uui-menu-vertical-left .uui-menu-submenu-title .uui-icon,.uui-menu-vertical-right .uui-menu-item .uui-icon,.uui-menu-vertical-right .uui-menu-submenu-title .uui-icon{line-height:var(--vertical-menu-sub-item-height)}.uui-menu-inline .uui-menu-item,.uui-menu-vertical .uui-menu-item,.uui-menu-vertical-left .uui-menu-item,.uui-menu-vertical-right .uui-menu-item{position:relative}.uui-menu-inline .uui-menu-item-group-list,.uui-menu-inline .uui-menu-sub,.uui-menu-inline.uui-menu-root,.uui-menu-vertical .uui-menu-item-group-list,.uui-menu-vertical .uui-menu-sub,.uui-menu-vertical-left .uui-menu-item-group-list,.uui-menu-vertical-left .uui-menu-sub,.uui-menu-vertical-left.uui-menu-root,.uui-menu-vertical-right .uui-menu-item-group-list,.uui-menu-vertical-right .uui-menu-sub,.uui-menu-vertical-right.uui-menu-root,.uui-menu-vertical.uui-menu-root{display:flex;flex-direction:column;align-items:stretch;row-gap:var(--vertical-menu-row-gap)}.uui-menu-vertical-left.uui-menu-sub,.uui-menu-vertical-right.uui-menu-sub,.uui-menu-vertical.uui-menu-sub{min-width:var(--menu-popup-min-width);padding:var(--menu-popup-padding);transform-origin:0 0}.uui-menu-inline{width:var(--inline-menu-width)}.uui-menu-inline .uui-menu-item,.uui-menu-inline .uui-menu-submenu-title{padding-left:calc(var(--menu-item-padding-horizontal) + var(--menu-level,0) * var(--inline-menu-indent))}.uui-menu-inline .uui-menu-item-group-title{padding:0 var(--menu-item-padding-horizontal) 0 calc(var(--menu-item-padding-horizontal) + var(--menu-level,0) * var(--inline-menu-indent))}.uui-menu-inline .uui-menu-sub{--menu-item-height:var(--inline-menu-sub-item-height);padding:var(--space-1) 0}.uui-menu-inline-collapsed{width:var(--menu-collapsed-width)}.uui-menu-inline-collapsed>.uui-menu-item,.uui-menu-inline-collapsed>.uui-menu-item-group>.uui-menu-item-group-list>.uui-menu-item,.uui-menu-inline-collapsed>.uui-menu-item-group>.uui-menu-item-group-list>.uui-menu-submenu>.uui-menu-submenu-title,.uui-menu-inline-collapsed>.uui-menu-submenu>.uui-menu-submenu-title{left:0;padding-inline:calc(var(--menu-collapsed-width)/ 2 - var(--space-2) - var(--font-size-lg)/ 2);text-overflow:clip;column-gap:0}.uui-menu-inline-collapsed>.uui-menu-item .uui-menu-submenu-arrow,.uui-menu-inline-collapsed>.uui-menu-item-group>.uui-menu-item-group-list>.uui-menu-item .uui-menu-submenu-arrow,.uui-menu-inline-collapsed>.uui-menu-item-group>.uui-menu-item-group-list>.uui-menu-submenu>.uui-menu-submenu-title .uui-menu-submenu-arrow,.uui-menu-inline-collapsed>.uui-menu-submenu>.uui-menu-submenu-title .uui-menu-submenu-arrow{display:none}.uui-menu-inline-collapsed>.uui-menu-item .uui-icon,.uui-menu-inline-collapsed>.uui-menu-item-group>.uui-menu-item-group-list>.uui-menu-item .uui-icon,.uui-menu-inline-collapsed>.uui-menu-item-group>.uui-menu-item-group-list>.uui-menu-submenu>.uui-menu-submenu-title .uui-icon,.uui-menu-inline-collapsed>.uui-menu-submenu>.uui-menu-submenu-title .uui-icon{margin:0 auto;font-size:var(--font-size-lg)}.uui-menu-inline-collapsed>.uui-menu-item .uui-icon+span,.uui-menu-inline-collapsed>.uui-menu-item-group>.uui-menu-item-group-list>.uui-menu-item .uui-icon+span,.uui-menu-inline-collapsed>.uui-menu-item-group>.uui-menu-item-group-list>.uui-menu-submenu>.uui-menu-submenu-title .uui-icon+span,.uui-menu-inline-collapsed>.uui-menu-submenu>.uui-menu-submenu-title .uui-icon+span{opacity:0}.uui-menu-inline-collapsed .uui-menu-inline.uui-menu-sub{opacity:0}.uui-menu-inline-collapsed-tooltip{pointer-events:none}.uui-menu-inline-collapsed-tooltip .uui-icon{display:none}.uui-menu-inline-collapsed-tooltip a{color:#fff}.uui-menu-item-disabled,.uui-menu-submenu-disabled{color:var(--color-disabled-font)!important;background:0 0!important;border-color:transparent!important;cursor:not-allowed}.uui-menu-item-disabled>a,.uui-menu-submenu-disabled>a{color:var(--color-disabled-font)!important;pointer-events:none}.uui-menu-item-disabled>.uui-menu-submenu-title,.uui-menu-submenu-disabled>.uui-menu-submenu-title{color:var(--color-disabled-font)!important;cursor:not-allowed}.uui-menu-item-disabled .uui-icon,.uui-menu-submenu-disabled .uui-icon{background-color:transparent!important}.uui-menu-direction-rtl{box-shadow:var(--vertical-menu-border-width) 0 0 0 var(--vertical-menu-border-color) inset;direction:rtl}.uui-menu-direction-rtl .uui-menu-submenu-title .uui-menu-submenu-arrow{margin-right:auto;margin-left:0;transform:rotate(180deg)}

package/styles/components/menu/index.less

@@ -290,7 +290,7 @@
     }
 
     .@{menu-prefix-cls}-item-group-title {
-      padding: 0 var(--menu-item-padding-horizontal) 0 calc(var(--menu-item-padding-horizontal) + var(--menu-level) * var(--inline-menu-indent));
+      padding: 0 var(--menu-item-padding-horizontal) 0 calc(var(--menu-item-padding-horizontal) + var(--menu-level, 0) * var(--inline-menu-indent));
     }
 
     .@{menu-prefix-cls}-sub {