<script setup>
import { computed } from "vue";
import { useNamespace } from "@yh-ui/hooks";
import { useComponentTheme } from "@yh-ui/theme";
import { dropdownMenuProps } from "./dropdown";
defineOptions({
  name: "YhDropdownMenu"
});
const props = defineProps(dropdownMenuProps);
const ns = useNamespace("dropdown");
const { themeStyle } = useComponentTheme(
  "dropdown-menu",
  computed(() => props.themeOverrides)
);
</script>

<template>
  <div :class="ns.e('menu-wrapper')" :style="themeStyle">
    <slot />
  </div>
</template>

<style>
@charset "UTF-8";
/**
 * YH-UI Sass Variables
 * 原具体的 CSS 变量输出规则 (:root, html.dark 等) 已移至 root.scss，以防止各组件样式编译时产生重复的全局变量 CSS 冗余。
 */
.yh-dropdown {
  display: inline-flex;
  align-items: center;
  position: relative;
  color: var(--yh-text-color-primary);
}
.yh-dropdown.is-disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.yh-dropdown__trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  outline: none;
  color: var(--yh-color-primary);
  font-size: var(--yh-font-size-base);
}
.yh-dropdown__trigger:hover {
  color: var(--yh-color-primary-light-3);
}
.yh-dropdown__trigger:focus-visible {
  box-shadow: 0 0 0 2px var(--yh-color-primary-light-5);
  border-radius: var(--yh-radius-sm);
}

.yh-dropdown__icon {
  font-size: 12px;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
}
.yh-dropdown__icon.is-active {
  transform: rotate(180deg);
}

.yh-dropdown__icon.yh-icon {
  color: var(--yh-color-primary);
}

.yh-dropdown__trigger:hover .yh-dropdown__icon.yh-icon {
  color: var(--yh-color-primary-light-3);
}

.yh-dropdown .yh-button .yh-dropdown__icon.yh-icon {
  color: inherit;
}
.yh-dropdown > .yh-tooltip {
  display: inline-flex;
  align-items: stretch;
}
.yh-dropdown__caret-button {
  padding: 0 12px !important;
  min-width: auto !important;
  margin-left: 0 !important;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-left: 1px solid var(--yh-color-primary-light-5) !important;
}
.yh-dropdown__caret-button.yh-button--primary:not(.is-plain) {
  border-left-color: rgba(255, 255, 255, 0.5) !important;
}
.yh-dropdown__caret-button.is-plain {
  border-left-color: var(--yh-color-primary-light-5) !important;
}

.yh-dropdown > .yh-tooltip > .yh-button:first-child,
.yh-dropdown > .yh-button:first-child {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  margin-right: 0 !important;
  border-right: none !important;
}
.yh-dropdown__popper {
  background: var(--yh-bg-color-overlay);
  border-radius: var(--yh-radius-lg);
  box-shadow: var(--yh-shadow-lg);
  padding: 6px 0;
  min-width: 120px;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
}

.yh-dropdown__menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.yh-dropdown__menu-wrapper {
  list-style: none;
  padding: 0;
  margin: 0;
}

.yh-dropdown__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  margin: 2px 6px;
  border-radius: var(--yh-radius-md);
  font-size: var(--yh-font-size-base);
  line-height: 1.4;
  color: var(--yh-text-color-primary);
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.yh-dropdown__item > span {
  display: inline-flex;
  align-items: center;
}
.yh-dropdown__item:hover {
  background: var(--yh-color-primary-light-9);
  color: var(--yh-color-primary);
}
.yh-dropdown__item:active {
  background: var(--yh-color-primary-light-8);
}
.yh-dropdown__item.is-disabled {
  cursor: not-allowed;
  color: var(--yh-text-color-placeholder);
}
.yh-dropdown__item.is-disabled:hover {
  background: transparent;
  color: var(--yh-text-color-placeholder);
}

.yh-dropdown__item.is-danger {
  color: var(--yh-color-danger);
}
.yh-dropdown__item.is-danger:hover {
  background: var(--yh-color-danger-light-9);
  color: var(--yh-color-danger);
}
.yh-dropdown__item.is-danger:active {
  background: var(--yh-color-danger-light-8);
}

.yh-dropdown__item.is-checked {
  color: var(--yh-color-primary);
  font-weight: 500;
}

.yh-dropdown__item-icon {
  font-size: 16px;
  flex-shrink: 0;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
}

.yh-dropdown__check-icon {
  font-size: 14px;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--yh-color-primary);
  margin-right: 4px;
}

.yh-dropdown__divider {
  height: 1px;
  margin: 6px 12px;
  background: var(--yh-border-color-light);
}

.yh-dropdown__loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px 16px;
  color: var(--yh-text-color-secondary);
  font-size: var(--yh-font-size-base);
}
.yh-dropdown__loading .yh-icon {
  font-size: 16px;
  color: var(--yh-color-primary);
}

.yh-dropdown__empty {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  color: var(--yh-text-color-placeholder);
  font-size: var(--yh-font-size-base);
}

:root.dark .yh-dropdown,
html.dark .yh-dropdown,
body.dark .yh-dropdown {
  color: var(--yh-text-color-primary);
}
:root.dark .yh-dropdown .yh-dropdown__popper,
html.dark .yh-dropdown .yh-dropdown__popper,
body.dark .yh-dropdown .yh-dropdown__popper {
  background: var(--yh-bg-color-overlay);
  box-shadow: var(--yh-shadow-xl);
}
:root.dark .yh-dropdown .yh-dropdown__item,
html.dark .yh-dropdown .yh-dropdown__item,
body.dark .yh-dropdown .yh-dropdown__item {
  color: var(--yh-text-color-primary);
}
:root.dark .yh-dropdown .yh-dropdown__item:hover,
html.dark .yh-dropdown .yh-dropdown__item:hover,
body.dark .yh-dropdown .yh-dropdown__item:hover {
  background: var(--yh-color-primary-light-9);
}
:root.dark .yh-dropdown .yh-dropdown__item:active,
html.dark .yh-dropdown .yh-dropdown__item:active,
body.dark .yh-dropdown .yh-dropdown__item:active {
  background: var(--yh-color-primary-light-8);
}
:root.dark .yh-dropdown .yh-dropdown__divider,
html.dark .yh-dropdown .yh-dropdown__divider,
body.dark .yh-dropdown .yh-dropdown__divider {
  background: var(--yh-border-color);
}

.yh-dropdown-fade-enter-active,
.yh-dropdown-fade-leave-active {
  transition: opacity 0.2s cubic-bezier(0.23, 1, 0.32, 1), transform 0.2s cubic-bezier(0.23, 1, 0.32, 1);
}

.yh-dropdown-fade-enter-from,
.yh-dropdown-fade-leave-to {
  opacity: 0;
  transform: scaleY(0.9) translateY(-4px);
}
</style>
