<script lang="ts" setup>
import type {DropdownMenuProps} from '@easyflow-core/shadcn-ui';
import {EasyFlowDropdownMenu} from '@easyflow-core/shadcn-ui';

import {EllipsisVertical} from '@easyflow-core/icons';

defineProps<DropdownMenuProps>();
</script>

<template>
  <EasyFlowDropdownMenu
    :menus="menus"
    align="end"
    content-class="max-h-[min(70vh,420px)] min-w-56 overflow-y-auto"
    :modal="false"
    search-empty-text="无匹配标签"
    search-placeholder="搜索标签"
    searchable
    trigger-label="查看标签页"
  >
    <div
      class="flex-center hover:text-foreground mr-1 h-8 w-8 cursor-pointer rounded-2xl border border-transparent bg-[hsl(var(--glass-tint))/0.52] text-[hsl(var(--nav-item-muted-foreground))] shadow-[0_10px_24px_-24px_hsl(var(--foreground)/0.3)] backdrop-blur-xl transition-[background-color,color,transform] hover:-translate-y-0.5 hover:bg-[hsl(var(--surface-contrast-soft))/0.92] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/35"
    >
      <EllipsisVertical class="size-4" />
    </div>
  </EasyFlowDropdownMenu>
</template>
