CRM_Montzar/apps/web/src/components/person-profile/ProfileMoreMenu.vue

<script setup lang="ts">
import { nextTick, onBeforeUnmount, ref, watch } from 'vue';
import { RouterLink } from 'vue-router';
import type { RouteLocationRaw } from 'vue-router';
import UiIcon from '@/components/UiIcon.vue';

export type ProfileMoreItem = {
  key: string;
  label: string;
  to?: RouteLocationRaw;
  danger?: boolean;
};

const open = defineModel<boolean>({ default: false });
defineProps<{ items: ProfileMoreItem[] }>();
const emit = defineEmits<{ select: [key: string] }>();

const triggerRef = ref<HTMLButtonElement | null>(null);
const panelRef = ref<HTMLElement | null>(null);
const top = ref(0);
const left = ref(0);

function place() {
  const trigger = triggerRef.value;
  const panel = panelRef.value;
  if (!trigger) return;
  const rect = trigger.getBoundingClientRect();
  const width = panel?.offsetWidth || 220;
  const height = panel?.offsetHeight || 0;
  const rtl = getComputedStyle(document.documentElement).direction === 'rtl';
  let nextLeft = rtl ? rect.right - width : rect.left;
  nextLeft = Math.min(Math.max(8, nextLeft), window.innerWidth - width - 8);
  let nextTop = rect.bottom + 8;
  if (nextTop + height > window.innerHeight - 8) {
    nextTop = Math.max(8, rect.top - height - 8);
  }
  left.value = nextLeft;
  top.value = nextTop;
}

function onWindowChange() {
  if (open.value) place();
}

watch(open, async (value) => {
  if (!value) {
    window.removeEventListener('resize', onWindowChange);
    window.removeEventListener('scroll', onWindowChange, true);
    return;
  }
  await nextTick();
  place();
  await nextTick();
  place();
  window.addEventListener('resize', onWindowChange);
  window.addEventListener('scroll', onWindowChange, true);
});

onBeforeUnmount(() => {
  window.removeEventListener('resize', onWindowChange);
  window.removeEventListener('scroll', onWindowChange, true);
});

function toggle() {
  open.value = !open.value;
}

function close() {
  open.value = false;
}

function onSelect(key: string) {
  emit('select', key);
  nextTick(() => {
    close();
  });
}
</script>

<template>
  <div class="wrap" @click.stop>
    <button
      ref="triggerRef"
      class="icon-btn"
      type="button"
      aria-label="منوی بیشتر"
      :aria-expanded="open"
      @click="toggle"
    >
      <UiIcon name="dots-v" :size="18" />
    </button>

    <Teleport to="body">
      <div v-if="open" class="layer">
        <button class="backdrop" type="button" aria-label="بستن منو" @click="close" />
        <ul
          ref="panelRef"
          class="panel"
          role="menu"
          :style="{ top: `${top}px`, left: `${left}px` }"
          @click.stop
        >
          <li v-for="item in items" :key="item.key" role="none">
            <RouterLink
              v-if="item.to"
              class="item"
              :class="{ danger: item.danger }"
              role="menuitem"
              :to="item.to"
              @click.stop="close"
            >
              {{ item.label }}
            </RouterLink>
            <button
              v-else
              class="item"
              :class="{ danger: item.danger }"
              type="button"
              role="menuitem"
              @click.stop.prevent="onSelect(item.key)"
            >
              {{ item.label }}
            </button>
          </li>
        </ul>
      </div>
    </Teleport>
  </div>
</template>

<style scoped>
.wrap {
  position: relative;
  flex-shrink: 0;
}

.icon-btn {
  width: 38px;
  height: 38px;
  border: 0;
  background: #fff;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: #334155;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05);
  cursor: pointer;
}

.layer {
  position: fixed;
  inset: 0;
  z-index: 80;
}

.backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: transparent;
  cursor: default;
}

.panel {
  position: absolute;
  z-index: 1;
  margin: 0;
  padding: 0.4rem;
  list-style: none;
  width: 220px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.16);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.panel > li {
  display: block;
  width: 100%;
}

.item {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #0f172a;
  font: inherit;
  font-weight: 600;
  font-size: 0.9rem;
  line-height: 1.6;
  text-align: start;
  text-decoration: none;
  white-space: nowrap;
  padding: 0.7rem 0.85rem;
  cursor: pointer;
}

.item:hover {
  background: #f0fdfa;
}

.item.danger {
  color: #b91c1c;
}

.item.danger:hover {
  background: #fef2f2;
}
</style>