513 lines
11 KiB
Vue
513 lines
11 KiB
Vue
<script setup lang="ts">
|
|
import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
|
|
import { useRoute, useRouter } from 'vue-router';
|
|
import type { RouteLocationRaw } from 'vue-router';
|
|
import UiIcon from '@/components/UiIcon.vue';
|
|
|
|
const FAB_SIZE = 36;
|
|
const FAB_MARGIN_BOTTOM = 24;
|
|
const FAB_MARGIN_LEFT = 24;
|
|
const POS_KEY = 'mento.quickCreateFab_v2';
|
|
|
|
type FabPos = { left: number; top: number };
|
|
|
|
type ItemIcon = 'user' | 'building' | 'dollar' | 'calendar-plus' | 'document';
|
|
|
|
const items: Array<{
|
|
key: string;
|
|
title: string;
|
|
desc: string;
|
|
icon: ItemIcon;
|
|
tone: string;
|
|
to: RouteLocationRaw;
|
|
}> = [
|
|
{
|
|
key: 'person',
|
|
title: 'افزودن شخص',
|
|
desc: 'مخاطب جدید را ثبت کنید',
|
|
icon: 'user',
|
|
tone: 'person',
|
|
to: { name: 'person-new' },
|
|
},
|
|
{
|
|
key: 'company',
|
|
title: 'افزودن شرکت',
|
|
desc: 'شرکت یا سازمان جدید اضافه کنید',
|
|
icon: 'building',
|
|
tone: 'company',
|
|
to: { name: 'company-new' },
|
|
},
|
|
{
|
|
key: 'deal',
|
|
title: 'افزودن معامله',
|
|
desc: 'فرصت یا معامله جدید ایجاد کنید',
|
|
icon: 'dollar',
|
|
tone: 'deal',
|
|
to: { name: 'deal-new' },
|
|
},
|
|
{
|
|
key: 'activity',
|
|
title: 'افزودن فعالیت',
|
|
desc: 'تماس، جلسه، ایمیل و ... ثبت کنید',
|
|
icon: 'calendar-plus',
|
|
tone: 'activity',
|
|
to: { name: 'activity-new' },
|
|
},
|
|
{
|
|
key: 'note',
|
|
title: 'افزودن کارت (یادداشت)',
|
|
desc: 'یادداشت یا کارت جدید ایجاد کنید',
|
|
icon: 'document',
|
|
tone: 'note',
|
|
to: { name: 'notes' },
|
|
},
|
|
];
|
|
|
|
const route = useRoute();
|
|
const router = useRouter();
|
|
const hidden = computed(() => route.name === 'person-detail');
|
|
const isQuickCreateOpen = ref(false);
|
|
const ready = ref(false);
|
|
const fabPos = ref<FabPos>({
|
|
left: FAB_MARGIN_LEFT,
|
|
top: typeof window !== 'undefined' ? window.innerHeight - FAB_MARGIN_BOTTOM - FAB_SIZE : 600,
|
|
});
|
|
const viewport = ref({ w: 1280, h: 800 });
|
|
const dragging = ref(false);
|
|
let dragMoved = false;
|
|
let dragOffsetX = 0;
|
|
let dragOffsetY = 0;
|
|
|
|
function mobileTabbarPx(): number {
|
|
if (typeof window === 'undefined' || viewport.value.w > 900) return 0;
|
|
const bar = document.querySelector('.mobile-tabbar');
|
|
if (bar instanceof HTMLElement) {
|
|
const h = bar.getBoundingClientRect().height;
|
|
if (h > 0) return h;
|
|
}
|
|
return 64;
|
|
}
|
|
|
|
function defaultPos(): FabPos {
|
|
const extra = mobileTabbarPx();
|
|
return {
|
|
left: FAB_MARGIN_LEFT,
|
|
top: Math.max(8, viewport.value.h - FAB_MARGIN_BOTTOM - extra - FAB_SIZE),
|
|
};
|
|
}
|
|
|
|
function clampPos(pos: FabPos): FabPos {
|
|
const margin = 8;
|
|
const bottomGap = mobileTabbarPx();
|
|
return {
|
|
left: Math.min(Math.max(margin, pos.left), viewport.value.w - FAB_SIZE - margin),
|
|
top: Math.min(
|
|
Math.max(margin, pos.top),
|
|
viewport.value.h - FAB_SIZE - margin - bottomGap,
|
|
),
|
|
};
|
|
}
|
|
|
|
function loadPos() {
|
|
try {
|
|
const raw = localStorage.getItem(POS_KEY);
|
|
if (!raw) {
|
|
fabPos.value = defaultPos();
|
|
return;
|
|
}
|
|
const parsed = JSON.parse(raw) as FabPos;
|
|
if (typeof parsed.left !== 'number' || typeof parsed.top !== 'number') {
|
|
fabPos.value = defaultPos();
|
|
return;
|
|
}
|
|
fabPos.value = clampPos(parsed);
|
|
} catch {
|
|
fabPos.value = defaultPos();
|
|
}
|
|
}
|
|
|
|
function savePos() {
|
|
localStorage.setItem(POS_KEY, JSON.stringify(fabPos.value));
|
|
}
|
|
|
|
function onFabPointerDown(ev: PointerEvent) {
|
|
if (ev.button !== 0) return;
|
|
dragMoved = false;
|
|
dragOffsetX = ev.clientX - fabPos.value.left;
|
|
dragOffsetY = ev.clientY - fabPos.value.top;
|
|
(ev.currentTarget as HTMLElement).setPointerCapture(ev.pointerId);
|
|
}
|
|
|
|
function onFabPointerMove(ev: PointerEvent) {
|
|
if (!((ev.currentTarget as HTMLElement).hasPointerCapture?.(ev.pointerId))) return;
|
|
const next = clampPos({
|
|
left: ev.clientX - dragOffsetX,
|
|
top: ev.clientY - dragOffsetY,
|
|
});
|
|
if (
|
|
Math.abs(next.left - fabPos.value.left) > 4 ||
|
|
Math.abs(next.top - fabPos.value.top) > 4
|
|
) {
|
|
dragMoved = true;
|
|
dragging.value = true;
|
|
}
|
|
if (dragMoved) fabPos.value = next;
|
|
}
|
|
|
|
function onFabPointerUp(ev: PointerEvent) {
|
|
(ev.currentTarget as HTMLElement).releasePointerCapture?.(ev.pointerId);
|
|
if (dragMoved) {
|
|
fabPos.value = clampPos(fabPos.value);
|
|
savePos();
|
|
dragging.value = false;
|
|
return;
|
|
}
|
|
dragging.value = false;
|
|
toggle();
|
|
}
|
|
|
|
function syncViewport() {
|
|
viewport.value = { w: window.innerWidth, h: window.innerHeight };
|
|
}
|
|
|
|
function onResize() {
|
|
syncViewport();
|
|
fabPos.value = clampPos(fabPos.value);
|
|
}
|
|
|
|
const fabStyle = computed(() => ({
|
|
left: `${fabPos.value.left}px`,
|
|
top: `${fabPos.value.top}px`,
|
|
right: 'auto',
|
|
bottom: 'auto',
|
|
}));
|
|
|
|
const panelStyle = computed(() => {
|
|
const gap = 12;
|
|
const edge = 16;
|
|
const width = Math.min(300, viewport.value.w - 32);
|
|
let left = fabPos.value.left;
|
|
left = Math.min(left, viewport.value.w - width - edge);
|
|
left = Math.max(edge, left);
|
|
|
|
const spaceAbove = fabPos.value.top - edge;
|
|
const spaceBelow = viewport.value.h - (fabPos.value.top + FAB_SIZE) - edge;
|
|
const placeAbove = spaceAbove >= spaceBelow;
|
|
const maxHeight = Math.max(0, (placeAbove ? spaceAbove : spaceBelow) - gap);
|
|
|
|
if (placeAbove) {
|
|
return {
|
|
left: `${left}px`,
|
|
right: 'auto',
|
|
bottom: `${viewport.value.h - fabPos.value.top + gap}px`,
|
|
top: 'auto',
|
|
width: `${width}px`,
|
|
maxHeight: `${maxHeight}px`,
|
|
};
|
|
}
|
|
return {
|
|
left: `${left}px`,
|
|
right: 'auto',
|
|
top: `${fabPos.value.top + FAB_SIZE + gap}px`,
|
|
bottom: 'auto',
|
|
width: `${width}px`,
|
|
maxHeight: `${maxHeight}px`,
|
|
};
|
|
});
|
|
|
|
function close() {
|
|
isQuickCreateOpen.value = false;
|
|
}
|
|
|
|
function toggle() {
|
|
isQuickCreateOpen.value = !isQuickCreateOpen.value;
|
|
}
|
|
|
|
function go(to: RouteLocationRaw) {
|
|
close();
|
|
void router.push(to);
|
|
}
|
|
|
|
function onKeydown(ev: KeyboardEvent) {
|
|
if (ev.key === 'Escape' && isQuickCreateOpen.value) {
|
|
ev.preventDefault();
|
|
close();
|
|
}
|
|
}
|
|
|
|
watch(isQuickCreateOpen, (value) => {
|
|
document.body.style.overflow = value ? 'hidden' : '';
|
|
});
|
|
|
|
watch(hidden, (value) => {
|
|
if (value) close();
|
|
});
|
|
|
|
watch(
|
|
() => route.fullPath,
|
|
() => {
|
|
close();
|
|
},
|
|
);
|
|
|
|
onMounted(() => {
|
|
syncViewport();
|
|
loadPos();
|
|
ready.value = true;
|
|
window.addEventListener('resize', onResize);
|
|
window.addEventListener('keydown', onKeydown);
|
|
});
|
|
|
|
onBeforeUnmount(() => {
|
|
window.removeEventListener('resize', onResize);
|
|
window.removeEventListener('keydown', onKeydown);
|
|
document.body.style.overflow = '';
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<Teleport to="body">
|
|
<div v-if="!hidden" class="qc" dir="rtl">
|
|
<button
|
|
v-if="isQuickCreateOpen"
|
|
class="overlay"
|
|
type="button"
|
|
aria-label="بستن ایجاد سریع"
|
|
@click="close"
|
|
/>
|
|
|
|
<section
|
|
v-if="isQuickCreateOpen"
|
|
class="panel"
|
|
aria-labelledby="qc-title"
|
|
:style="panelStyle"
|
|
>
|
|
<h2 id="qc-title">ایجاد سریع</h2>
|
|
<div class="items">
|
|
<button
|
|
v-for="item in items"
|
|
:key="item.key"
|
|
class="item"
|
|
type="button"
|
|
@click="go(item.to)"
|
|
>
|
|
<span class="item-ico" :class="item.tone">
|
|
<UiIcon :name="item.icon" :size="18" />
|
|
</span>
|
|
<span class="copy">
|
|
<strong>{{ item.title }}</strong>
|
|
<small>{{ item.desc }}</small>
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</section>
|
|
|
|
<button
|
|
v-if="ready"
|
|
class="fab"
|
|
type="button"
|
|
:class="{ dragging, open: isQuickCreateOpen }"
|
|
:style="fabStyle"
|
|
:aria-expanded="isQuickCreateOpen"
|
|
:aria-label="isQuickCreateOpen ? 'بستن ایجاد سریع' : 'ایجاد سریع'"
|
|
title="ایجاد سریع"
|
|
@pointerdown="onFabPointerDown"
|
|
@pointermove="onFabPointerMove"
|
|
@pointerup="onFabPointerUp"
|
|
@pointercancel="onFabPointerUp"
|
|
>
|
|
<span class="fab-face" aria-hidden="true">
|
|
<UiIcon :name="isQuickCreateOpen ? 'x' : 'apps-plus'" :size="20" />
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</Teleport>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.qc {
|
|
direction: rtl;
|
|
}
|
|
|
|
.overlay {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 90;
|
|
border: 0;
|
|
padding: 0;
|
|
background: rgba(0, 0, 0, 0.68);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.panel {
|
|
position: fixed;
|
|
z-index: 92;
|
|
width: 300px;
|
|
max-height: min(480px, calc(100dvh - 80px));
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
flex-direction: column;
|
|
background: #fff;
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--radius);
|
|
padding: 12px 12px 10px;
|
|
box-shadow: var(--shadow-lg);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.panel h2 {
|
|
flex-shrink: 0;
|
|
margin: 0 0 10px;
|
|
text-align: right;
|
|
font-size: var(--fs-md);
|
|
font-weight: 700;
|
|
color: var(--ink);
|
|
}
|
|
|
|
.items {
|
|
min-height: 0;
|
|
overflow-y: auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
padding-left: 2px;
|
|
overscroll-behavior: contain;
|
|
}
|
|
|
|
.item {
|
|
width: 100%;
|
|
min-height: 46px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 6px 10px;
|
|
border: 1px solid var(--line-light);
|
|
border-radius: var(--radius);
|
|
background: #fff;
|
|
box-shadow: var(--shadow-xs);
|
|
font: inherit;
|
|
text-align: right;
|
|
cursor: pointer;
|
|
transition: background var(--transition-fast), border-color var(--transition-fast);
|
|
}
|
|
|
|
.item:hover {
|
|
background: var(--surface-hover);
|
|
border-color: var(--line-strong);
|
|
}
|
|
|
|
.item-ico {
|
|
width: 34px;
|
|
height: 34px;
|
|
border-radius: var(--radius);
|
|
display: grid;
|
|
place-items: center;
|
|
color: #fff;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.item-ico.person {
|
|
background: #0d9488;
|
|
}
|
|
|
|
.item-ico.company {
|
|
background: #0891b2;
|
|
}
|
|
|
|
.item-ico.deal {
|
|
background: #7c3aed;
|
|
}
|
|
|
|
.item-ico.activity {
|
|
background: #ea580c;
|
|
}
|
|
|
|
.item-ico.note {
|
|
background: #2563eb;
|
|
}
|
|
|
|
.copy {
|
|
display: grid;
|
|
gap: 2px;
|
|
min-width: 0;
|
|
text-align: right;
|
|
}
|
|
|
|
.copy strong {
|
|
font-size: var(--fs-sm);
|
|
font-weight: 600;
|
|
color: var(--ink);
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.copy small {
|
|
font-size: var(--fs-xs);
|
|
color: var(--muted);
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.fab {
|
|
position: fixed;
|
|
z-index: 93;
|
|
box-sizing: border-box;
|
|
width: var(--control-h);
|
|
height: var(--control-h);
|
|
padding: 0;
|
|
margin: 0;
|
|
border: 0;
|
|
border-radius: var(--radius);
|
|
overflow: hidden;
|
|
background: linear-gradient(145deg, #0f766e 0%, #14b8a6 100%);
|
|
color: #fff;
|
|
display: grid;
|
|
place-items: center;
|
|
line-height: 0;
|
|
direction: ltr;
|
|
box-shadow:
|
|
0 4px 14px rgba(13, 148, 136, 0.35),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.22);
|
|
cursor: grab;
|
|
touch-action: none;
|
|
user-select: none;
|
|
transition:
|
|
filter 0.15s ease,
|
|
box-shadow 0.15s ease,
|
|
transform 0.12s ease;
|
|
}
|
|
|
|
.fab-face {
|
|
display: grid;
|
|
place-items: center;
|
|
width: 100%;
|
|
height: 100%;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.fab :deep(.ico) {
|
|
display: block;
|
|
width: 20px;
|
|
height: 20px;
|
|
max-width: 20px;
|
|
max-height: 20px;
|
|
stroke-width: 1.7;
|
|
}
|
|
|
|
.fab:hover {
|
|
filter: brightness(1.06);
|
|
box-shadow:
|
|
0 6px 18px rgba(13, 148, 136, 0.42),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.25);
|
|
}
|
|
|
|
.fab.open {
|
|
background: linear-gradient(145deg, #115e59 0%, #0d9488 100%);
|
|
box-shadow: 0 6px 20px rgba(15, 23, 42, 0.25);
|
|
}
|
|
|
|
.fab.dragging {
|
|
cursor: grabbing;
|
|
transform: scale(1.05);
|
|
box-shadow: 0 8px 24px rgba(13, 148, 136, 0.45);
|
|
}
|
|
</style>
|