Add activity detail, Jalali pickers, and customer/user profiles.

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-09-02 21:29:00 +03:30
parent 574feedfa5
commit f884c60cab
39 changed files with 8255 additions and 441 deletions
@@ -0,0 +1,215 @@
+<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>