manage z-index list details with popovers

vuejs/client/input.css

@@ -1141,6 +1141,14 @@ body {
 .list-details-item {
   @apply z-0 px-3 py-2 min-h-12 h-fit relative flex justify-between items-center transition rounded;
  }
+
+.pending.list-details-item {
+  @apply z-20;
+}
+
+.up.list-details-item {
+  @apply z-10;
+}
  
 .enabled.list-details-item  {
   @apply bg-gray-100 hover:bg-gray-200 dark:bg-slate-700 dark:hover:bg-slate-800;

vuejs/client/src/components/List/Details.vue

@@ -53,11 +53,28 @@ const props = defineProps({
 const data = reactive({
   base: JSON.parse(JSON.stringify(props.details)),
   format: JSON.parse(JSON.stringify(props.details)),
+  upIndex: "",
+  pendingIndex: [],
 });
 
 const gridClass = computed(() => {
   return `col-span-${props.columns.mobile} md:col-span-${props.columns.tablet} lg:col-span-${props.columns.pc}`;
 });
+
+// When we focus or pointerover an item, we will add a higher z-index than others items in order to avoid to crop popovers
+// In case we leave the item, for few moments the item will get an higher z-index than this in order to get a smooth transition
+function indexUp(id) {
+  data.upIndex = id;
+}
+
+// This will add a higher z-index for 100ms when cursor is out of the item in order to avoid to crop popovers
+function indexPending(id) {
+  data.pendingIndex.push(id);
+  // Remove id from pendingIndex after a moment
+  setTimeout(() => {
+    data.pendingIndex = data.pendingIndex.filter((index) => index !== id);
+  }, 100);
+}
 </script>
 
 <template>
@@ -80,8 +97,17 @@ const gridClass = computed(() => {
           'list-details-item',
           gridClass,
           item.disabled ? 'disabled' : 'enabled',
+          data.upIndex === id
+            ? 'up'
+            : data.pendingIndex.includes(id)
+            ? 'pending'
+            : '',
         ]"
         v-bind="item.attrs || {}"
+        @focusin="indexUp(id)"
+        @pointerover="indexUp(id)"
+        @focusout="indexPending(id)"
+        @pointerleave="indexPending(id)"
       >
         <div class="list-details-item-wrap">
           <Text :tag="'p'" :text="item.text" />