sipo/Teren-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Dev branch

Browse Source
This commit is contained in:
Simon Pocrnjič
2025-11-02 12:31:01 +01:00
parent 5f879c9436
commit 63e0958b66
241 changed files with 17686 additions and 7327 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/Components/Dropdown.vue
+84 -98
View File
@@ -1,5 +1,10 @@
<script setup>
import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
import { computed, ref, watch, onMounted, onUnmounted } from 'vue';
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuTrigger,
} from '@/Components/ui/dropdown-menu';
const props = defineProps({
align: {
@@ -20,64 +25,64 @@ const props = defineProps({
},
});
let open = ref(false);
const triggerEl = ref(null);
const panelEl = ref(null);
const panelStyle = ref({ top: '0px', left: '0px' });
const open = ref(false);
const closeOnEscape = (e) => {
if (open.value && e.key === 'Escape') {
open.value = false;
}
// Expose close method for parent components
const close = () => {
open.value = false;
};
const updatePosition = () => {
const t = triggerEl.value;
const p = panelEl.value;
if (!t || !p) return;
const rect = t.getBoundingClientRect();
// Ensure we have updated width
const pw = p.offsetWidth || 0;
const ph = p.offsetHeight || 0;
const margin = 8; // small spacing from trigger
let left = rect.left;
if (props.align === 'right') {
left = rect.right - pw;
} else if (props.align === 'left') {
left = rect.left;
}
// Clamp within viewport
const maxLeft = Math.max(0, window.innerWidth - pw - margin);
left = Math.min(Math.max(margin, left), maxLeft);
let top = rect.bottom + margin;
// If not enough space below, place above the trigger
if (top + ph > window.innerHeight) {
top = Math.max(margin, rect.top - ph - margin);
}
panelStyle.value = { top: `${top}px`, left: `${left}px` };
};
const onWindowChange = () => {
updatePosition();
};
watch(open, async (val) => {
if (val) {
await nextTick();
updatePosition();
window.addEventListener('resize', onWindowChange);
window.addEventListener('scroll', onWindowChange, true);
} else {
window.removeEventListener('resize', onWindowChange);
window.removeEventListener('scroll', onWindowChange, true);
}
defineExpose({
close,
open,
});
// Close dropdown when dialog opens
const handleDialogOpen = () => {
if (open.value) {
open.value = false;
}
};
// Watch for dialog opens using MutationObserver
let observer = null;
onMounted(() => {
// Listen for custom dialog open events
window.addEventListener('dialog:open', handleDialogOpen);
// Watch for dialog state changes in the DOM
observer = new MutationObserver((mutations) => {
// Check if any dialog has data-state="open"
const openDialogs = document.querySelectorAll('[data-state="open"]');
const hasOpenDialog = Array.from(openDialogs).some((dialog) => {
// Check if it's a dialog element (has role="dialog" or is DialogContent)
const role = dialog.getAttribute('role');
const isDialogContent = dialog.classList?.contains('DialogContent') ||
dialog.querySelector('[role="dialog"]') ||
dialog.closest('[role="dialog"]');
return role === 'dialog' || isDialogContent;
});
if (hasOpenDialog && open.value) {
handleDialogOpen();
}
});
observer.observe(document.body, {
attributes: true,
attributeFilter: ['data-state'],
subtree: true,
childList: true,
});
});
onMounted(() => document.addEventListener('keydown', closeOnEscape));
onUnmounted(() => {
document.removeEventListener('keydown', closeOnEscape);
window.removeEventListener('resize', onWindowChange);
window.removeEventListener('scroll', onWindowChange, true);
window.removeEventListener('dialog:open', handleDialogOpen);
if (observer) {
observer.disconnect();
}
});
const widthClass = computed(() => {
@@ -90,57 +95,38 @@ const widthClass = computed(() => {
'wide': 'w-[34rem] max-w-[90vw]',
'auto': '',
};
return map[props.width.toString()] ?? '';
return map[props.width.toString()] || '';
});
const alignmentClasses = computed(() => {
if (props.align === 'left') {
return 'ltr:origin-top-left rtl:origin-top-right start-0';
}
if (props.align === 'right') {
return 'ltr:origin-top-right rtl:origin-top-left end-0';
}
return 'origin-top';
// Map align prop to shadcn-vue's align prop
// 'left' -> 'start', 'right' -> 'end'
const alignProp = computed(() => {
if (props.align === 'left') return 'start';
if (props.align === 'right') return 'end';
return 'start';
});
const onContentClick = () => {
if (props.closeOnContentClick) {
open.value = false;
const combinedContentClasses = computed(() => {
// Merge width class with custom content classes
// Note: shadcn-vue already provides base styling, so we append custom classes
const classes = [widthClass.value];
if (props.contentClasses && props.contentClasses.length) {
classes.push(...props.contentClasses);
}
};
return classes.filter(Boolean).join(' ');
});
</script>
<template>
<div class="relative" ref="triggerEl">
<div @click="open = ! open">
<DropdownMenu v-model:open="open">
<DropdownMenuTrigger as-child>
<slot name="trigger" />
</div>
<teleport to="body">
<!-- Full Screen Dropdown Overlay at body level -->
<div v-show="open" class="fixed inset-0 z-[2147483646]" @click="open = false" />
<transition
enter-active-class="transition ease-out duration-200"
enter-from-class="transform opacity-0 scale-95"
enter-to-class="transform opacity-100 scale-100"
leave-active-class="transition ease-in duration-75"
leave-from-class="transform opacity-100 scale-100"
leave-to-class="transform opacity-0 scale-95"
>
<div
v-show="open"
ref="panelEl"
class="fixed z-[2147483647] rounded-md shadow-lg"
:class="[widthClass]"
:style="[panelStyle]"
>
<div class="rounded-md ring-1 ring-black ring-opacity-5" :class="contentClasses" @click="onContentClick">
<slot name="content" />
</div>
</div>
</transition>
</teleport>
</div>
</DropdownMenuTrigger>
<DropdownMenuContent
:align="alignProp"
:class="combinedContentClasses"
>
<slot name="content" />
</DropdownMenuContent>
</DropdownMenu>
</template>