<script setup>
import { useNamespace } from "@yh-ui/hooks";
import { menuItemGroupProps } from "./menu";
defineOptions({
  name: "YhMenuItemGroup"
});
defineProps(menuItemGroupProps);
const ns = useNamespace("menu-item-group");
</script>

<template>
  <li :class="ns.b()" role="group">
    <div :class="ns.e('title')">
      <slot name="title">{{ title }}</slot>
    </div>
    <ul :class="ns.e('list')">
      <slot />
    </ul>
  </li>
</template>

<style>
@charset "UTF-8";
/**
 * YH-UI Sass Variables
 * 原具体的 CSS 变量输出规则 (:root, html.dark 等) 已移至 root.scss，以防止各组件样式编译时产生重复的全局变量 CSS 冗余。
 */
.yh-menu {
  --yh-menu-bg-color: var(--yh-bg-color);
  --yh-menu-text-color: var(--yh-text-color-primary);
  --yh-menu-active-text-color: var(--yh-color-primary);
  --yh-menu-hover-bg-color: var(--yh-color-primary-light-9);
  --yh-menu-active-bg-color: var(--yh-color-primary-light-9);
  --yh-menu-border-color: var(--yh-border-color-light);
  --yh-menu-item-height: 50px;
  --yh-menu-icon-size: 18px;
  --yh-menu-base-padding: 20px;
  --yh-menu-indicator-width: 3px;
  --yh-menu-indicator-color: var(--yh-menu-active-text-color);
  display: flex;
  flex-direction: column;
  background-color: var(--yh-menu-bg-color);
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  list-style: none;
  transition: width 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.yh-menu--horizontal {
  flex-direction: row;
  align-items: center;
  border-right: none;
  border-bottom: 1px solid var(--yh-menu-border-color);
  --yh-menu-hover-bg-color: transparent;
  --yh-menu-active-bg-color: transparent;
}

.yh-menu--collapse {
  width: 80px;
}
.yh-menu--collapse .yh-menu-item,
.yh-menu--collapse .yh-sub-menu__title {
  justify-content: center;
  padding: 0 16px;
}
.yh-menu--collapse .yh-menu-item .yh-menu-item__content,
.yh-menu--collapse .yh-menu-item .yh-sub-menu__title-content,
.yh-menu--collapse .yh-sub-menu__title .yh-menu-item__content,
.yh-menu--collapse .yh-sub-menu__title .yh-sub-menu__title-content {
  justify-content: center;
}
.yh-menu--collapse .yh-menu-item .yh-menu-item__label > span,
.yh-menu--collapse .yh-menu-item .yh-sub-menu__label > span,
.yh-menu--collapse .yh-menu-item .yh-sub-menu__icon-arrow,
.yh-menu--collapse .yh-sub-menu__title .yh-menu-item__label > span,
.yh-menu--collapse .yh-sub-menu__title .yh-sub-menu__label > span,
.yh-menu--collapse .yh-sub-menu__title .yh-sub-menu__icon-arrow {
  display: none;
}
.yh-menu--collapse .yh-menu-item .yh-icon,
.yh-menu--collapse .yh-sub-menu__title .yh-icon {
  margin-right: 0;
  font-size: 20px;
}

.yh-menu--inverted {
  --yh-menu-bg-color: #001529;
  --yh-menu-text-color: rgba(255, 255, 255, 0.7);
  --yh-menu-active-text-color: #ffffff;
  --yh-menu-hover-bg-color: rgba(255, 255, 255, 0.08);
  --yh-menu-active-bg-color: var(--yh-color-primary-light-9);
  --yh-menu-border-color: #000c17;
  --yh-menu-indicator-color: var(--yh-color-primary);
}

html.dark .yh-menu:not(.yh-menu--inverted) {
  --yh-menu-bg-color: var(--yh-bg-color);
  --yh-menu-text-color: var(--yh-text-color-primary);
  --yh-menu-border-color: var(--yh-border-color);
}

.yh-menu-item {
  display: flex;
  align-items: center;
  padding: 0 var(--yh-menu-base-padding);
  height: var(--yh-menu-item-height);
  font-size: 14px;
  color: var(--yh-menu-text-color);
  cursor: pointer;
  position: relative;
  transition: color 0.3s, background-color 0.3s;
  white-space: nowrap;
}
.yh-menu-item:hover:not(.is-disabled) {
  color: var(--yh-menu-active-text-color);
  background-color: var(--yh-menu-hover-bg-color);
}
.yh-menu-item.is-active {
  color: var(--yh-menu-active-text-color);
  background-color: var(--yh-menu-active-bg-color);
}
.yh-menu-item.is-active::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: var(--yh-menu-indicator-width);
  background-color: var(--yh-menu-indicator-color);
  border-radius: 3px 0 0 3px;
}
.yh-menu--horizontal .yh-menu-item.is-active {
  background-color: transparent;
}
.yh-menu--horizontal .yh-menu-item.is-active::after {
  top: auto;
  bottom: 0;
  left: var(--yh-menu-base-padding);
  right: var(--yh-menu-base-padding);
  width: auto;
  height: 3px;
  border-radius: 3px 3px 0 0;
}
.yh-menu--inverted .yh-menu-item.is-active::after, .yh-menu--collapse .yh-menu-item.is-active::after {
  left: 0;
  right: auto;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 0 4px 4px 0;
  background: linear-gradient(to bottom, var(--yh-color-primary), var(--yh-color-primary-light-3));
  box-shadow: 0 0 6px var(--yh-color-primary-light-5);
}

.yh-menu-item.is-disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.yh-menu-item.is-disabled:hover {
  color: var(--yh-menu-text-color);
  background-color: transparent;
}

.yh-menu-item__content {
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 0;
}

.yh-menu-item__label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.yh-sub-menu {
  position: relative;
}
.yh-sub-menu__title {
  display: flex;
  align-items: center;
  padding: 0 var(--yh-menu-base-padding);
  height: var(--yh-menu-item-height);
  width: 100%;
  box-sizing: border-box;
  font-size: 14px;
  color: var(--yh-menu-text-color);
  cursor: pointer;
  position: relative;
  transition: color 0.3s, background-color 0.3s;
  white-space: nowrap;
}
.yh-sub-menu__title .yh-tooltip {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}
.yh-sub-menu__title:hover:not(.is-disabled) {
  color: var(--yh-menu-active-text-color);
  background-color: var(--yh-menu-hover-bg-color);
}
.yh-menu--horizontal .yh-sub-menu__title:hover:not(.is-disabled) {
  background-color: transparent;
}

.yh-sub-menu__title-content {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
}

.yh-sub-menu__label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.yh-sub-menu__icon-arrow {
  margin-left: 8px;
  font-size: 12px;
  transition: transform 0.3s;
  flex-shrink: 0;
}

.yh-sub-menu.is-opened .yh-sub-menu__title .yh-sub-menu__icon-arrow {
  transform: rotate(180deg);
}

.yh-menu--collapse .yh-sub-menu.is-active {
  background-color: var(--yh-menu-active-bg-color);
}
.yh-sub-menu.is-active .yh-sub-menu__title {
  color: var(--yh-menu-active-text-color);
}
.yh-menu--horizontal .yh-sub-menu.is-active .yh-sub-menu__title {
  background-color: transparent;
}
.yh-sub-menu.is-active .yh-sub-menu__title .yh-sub-menu__icon-arrow {
  color: var(--yh-menu-active-text-color);
}

.yh-sub-menu > .yh-tooltip {
  width: 100%;
  display: block;
}
.yh-sub-menu.is-disabled > .yh-sub-menu__title {
  cursor: not-allowed;
  opacity: 0.5;
  color: var(--yh-menu-text-color);
}
.yh-sub-menu.is-disabled > .yh-sub-menu__title:hover {
  color: var(--yh-menu-text-color);
  background-color: transparent;
}

.yh-menu--horizontal .yh-sub-menu.is-active .yh-sub-menu__title::after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: var(--yh-menu-base-padding);
  right: var(--yh-menu-base-padding);
  height: 3px;
  background-color: var(--yh-menu-indicator-color);
  border-radius: 3px 3px 0 0;
  z-index: 1;
}

.yh-menu--horizontal .yh-sub-menu.is-active > .yh-sub-menu__title {
  color: var(--yh-menu-active-text-color);
}
.yh-menu--horizontal .yh-sub-menu.is-active > .yh-sub-menu__title .yh-sub-menu__icon-arrow {
  color: var(--yh-menu-active-text-color);
}

.yh-menu--horizontal .yh-sub-menu:hover:not(.is-disabled) .yh-sub-menu__icon-arrow,
.yh-menu--horizontal .yh-sub-menu.is-opened .yh-sub-menu__icon-arrow {
  transform: rotate(180deg);
}

.yh-menu--inverted .yh-menu-item.is-active::after,
.yh-menu--collapse .yh-menu-item.is-active::after,
.yh-menu--collapse .yh-sub-menu.is-active::after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  right: auto;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--yh-menu-indicator-color);
  z-index: 2;
}

.yh-sub-menu__list {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.yh-sub-menu__menu {
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0;
  padding: 0;
  background-color: transparent;
}
.yh-sub-menu__menu .yh-menu-item.is-active::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 3px;
  background-color: var(--yh-color-primary);
  border-radius: 3px 0 0 3px;
}

.yh-sub-menu__popper {
  background-color: var(--yh-bg-color-overlay);
  border-radius: var(--yh-radius-base);
  box-shadow: var(--yh-shadow-md);
  min-width: 160px;
  border: 1px solid var(--yh-border-color-light);
  padding: 0;
  z-index: var(--yh-z-index-popper);
}
.yh-sub-menu__popper.is-dark {
  background-color: var(--yh-text-color-primary);
  border: none;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}
.yh-sub-menu__popper.is-dark .yh-menu-item,
.yh-sub-menu__popper.is-dark .yh-sub-menu__title {
  color: rgba(255, 255, 255, 0.9);
}
.yh-sub-menu__popper.is-dark .yh-menu-item .yh-icon,
.yh-sub-menu__popper.is-dark .yh-sub-menu__title .yh-icon {
  color: rgba(255, 255, 255, 0.7);
}
.yh-sub-menu__popper.is-dark .yh-menu-item:hover:not(.is-disabled), .yh-sub-menu__popper.is-dark .yh-menu-item.is-active,
.yh-sub-menu__popper.is-dark .yh-sub-menu__title:hover:not(.is-disabled),
.yh-sub-menu__popper.is-dark .yh-sub-menu__title.is-active {
  color: var(--yh-color-primary);
  background-color: rgba(255, 255, 255, 0.1);
}
.yh-sub-menu__popper.is-dark .yh-menu-item:hover:not(.is-disabled) .yh-icon, .yh-sub-menu__popper.is-dark .yh-menu-item.is-active .yh-icon,
.yh-sub-menu__popper.is-dark .yh-sub-menu__title:hover:not(.is-disabled) .yh-icon,
.yh-sub-menu__popper.is-dark .yh-sub-menu__title.is-active .yh-icon {
  color: var(--yh-color-primary);
}
.yh-sub-menu__popper.is-dark .yh-sub-menu__icon-arrow {
  color: rgba(255, 255, 255, 0.5);
}

.yh-sub-menu__popper .yh-sub-menu__menu {
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0;
  padding: 6px 0;
  background-color: transparent;
  border: none;
  box-shadow: none;
}

.yh-tooltip.yh-sub-menu__popper,
.yh-tooltip__content:has(.yh-sub-menu__menu),
.yh-sub-menu__popper .yh-tooltip__content {
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.yh-sub-menu__popper .yh-menu-item,
.yh-sub-menu__popper .yh-sub-menu__title,
.yh-sub-menu__menu .yh-menu-item,
.yh-sub-menu__menu .yh-sub-menu__title {
  height: 38px;
  line-height: 38px;
  padding: 0 16px;
  font-size: 14px;
  margin: 0;
  color: var(--yh-menu-text-color);
  background-color: transparent;
  transition: all 0.3s;
}
.yh-sub-menu__popper .yh-menu-item .yh-icon,
.yh-sub-menu__popper .yh-sub-menu__title .yh-icon,
.yh-sub-menu__menu .yh-menu-item .yh-icon,
.yh-sub-menu__menu .yh-sub-menu__title .yh-icon {
  color: inherit;
}
.yh-sub-menu__popper .yh-menu-item:hover:not(.is-disabled),
.yh-sub-menu__popper .yh-sub-menu__title:hover:not(.is-disabled),
.yh-sub-menu__menu .yh-menu-item:hover:not(.is-disabled),
.yh-sub-menu__menu .yh-sub-menu__title:hover:not(.is-disabled) {
  color: var(--yh-menu-active-text-color);
  background-color: var(--yh-menu-hover-bg-color);
}
.yh-sub-menu__popper .yh-menu-item.is-active,
.yh-sub-menu__popper .yh-sub-menu__title.is-active,
.yh-sub-menu__menu .yh-menu-item.is-active,
.yh-sub-menu__menu .yh-sub-menu__title.is-active {
  color: var(--yh-menu-active-text-color);
  background-color: var(--yh-menu-active-bg-color);
}

.yh-menu .yh-icon {
  font-size: var(--yh-menu-icon-size);
  width: var(--yh-menu-icon-size);
  height: var(--yh-menu-icon-size);
  flex-shrink: 0;
  margin-right: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
</style>
