pmPaulis · Sep 20, 2024 · Sep 19, 2024 · Sep 20, 2024 · Sep 20, 2024 · Sep 20, 2024
diff --git a/resources/jscomposition/base/buttons/OutlineButton.vue b/resources/jscomposition/base/buttons/OutlineButton.vue
@@ -3,8 +3,7 @@
     type="button"
     :class="`tw-flex tw-rounded-lg tw-border tw-border-${color}-300 tw-text-${color}-500
         tw-space-x-2 tw-px-3 tw-py-3 hover:tw-bg-${color}-200 tw-justify-center tw-items-center`"
-    @click="onClick"
-  >
+    @click.prevent.stop="onClick">
     <slot />
   </button>
 </template>

diff --git a/resources/jscomposition/base/form/Dropdown.vue b/resources/jscomposition/base/form/Dropdown.vue
@@ -1,18 +1,16 @@
 <template>
-  <div class="tw-relative">
+  <div
+    class="tw-relative"
+    ref="inputRef">
     <slot
       v-bind="{
         toogleShow,
-        data
+        data,
       }"
-      name="input"
-    >
+      name="input">
       <button
-        class="tw-flex tw-w-full tw-justify-between tw-items-center
-          tw-py-2 tw-px-3 tw-ring-1 tw-ring-inset tw-ring-gray-300 tw-rounded-lg
-          focus:tw-ring-2 focus:tw-ring-inset focus:tw-ring-primary-400"
-        @click.prevent.stop="toogleShow"
-      >
+        class="tw-flex tw-w-full tw-justify-between tw-items-center tw-py-2 tw-px-3 tw-ring-1 tw-ring-inset tw-ring-gray-300 tw-rounded-lg focus:tw-ring-2 focus:tw-ring-inset focus:tw-ring-primary-400"
+        @click.prevent.stop="toogleShow">
         <span>{{ data?.label || data?.value }} </span>
 
         <i class="fas fa-chevron-down" />
@@ -22,36 +20,34 @@
     <transition :name="animation">
       <div
         v-if="show"
-        class="tw-block tw-mt-1 tw-rounded-lg tw-absolute tw-z-10 tw-shadow-lg tw-bg-white tw-ring-1 tw-ring-inset tw-ring-gray-300"
-      >
+        class="tw-fixed tw-mt-1 tw-rounded-lg tw-z-10 tw-shadow-lg tw-bg-white tw-ring-1 tw-ring-inset tw-ring-gray-300"
+        :style="{ width: `${widthContainer}px`, top: `${top}px` }">
         <ul class="tw-list-none tw-overflow-hidden tw-rounded">
           <slot
             name="options"
             v-bind="{
               options: optionsModel,
               data,
-              onClick
-            }"
-          >
+              onClick,
+            }">
             <li
-              v-for="(option, index ) in optionsModel"
+              v-for="(option, index) in optionsModel"
               :key="index"
               class="hover:tw-bg-gray-200"
-              @click.prevent.stop="onClick(option, index)"
-            >
+              @click.prevent.stop="onClick(option, index)">
               <slot
                 name="option"
                 v-bind="{
                   option,
-                  data
-                }"
-              >
+                  data,
+                }">
                 <span
                   :class="{
-                    'tw-bg-gray-300': option?.value === data?.value
+                    'tw-bg-gray-300': option?.value === data?.value,
                   }"
                   class="tw-flex tw-py-2 tw-px-4 transition duration-300"
-                >{{ option.label || option.value }}</span>
+                  >{{ option.label || option.value }}</span
+                >
               </slot>
             </li>
           </slot>
@@ -62,10 +58,7 @@
 </template>
 
 <script>
-import {
-  defineComponent, ref, computed, onMounted, onUnmounted,
-} from "vue";
-
+import { defineComponent, ref, computed, onMounted, onUnmounted, nextTick } from "vue";
 /**
  * <Dropdown
  *  animation="fade"
@@ -95,7 +88,10 @@ export default defineComponent({
   },
   emits: ["input", "change"],
   setup(props, { emit }) {
+    const inputRef = ref();
     const show = ref(false);
+    const widthContainer = ref(100);
+    const top = ref(0);
 
     const data = computed({
       get() {
@@ -122,12 +118,35 @@ export default defineComponent({
       emit("change", option);
     };
 
+    const calculatePosition = () => {
+      const rect = inputRef.value?.getBoundingClientRect();
+
+      widthContainer.value = rect.width || 100;
+
+      let container = inputRef.value.parentElement;
+      let topPosition = 0;
+
+      while (container && container !== document.body) {
+        // If the container has scroll, we add their offsets 
+        if (container.scrollTop || container.scrollLeft) {
+          topPosition = topPosition + container.scrollTop;
+        }
+        container = container.parentElement;
+      }
+
+      top.value = inputRef.value.offsetTop - topPosition;
+    };
+
     const addBodyListener = () => {
       show.value = false;
     };
 
-    const toogleShow = () => {
-      show.value = !show.value;
+    const toogleShow = ($event) => {
+      calculatePosition($event);
+
+      nextTick(() => {
+        show.value = !show.value;
+      });
     };
 
     onMounted(() => {
@@ -141,7 +160,10 @@ export default defineComponent({
     return {
       show,
       data,
+      inputRef,
       optionsModel,
+      top,
+      widthContainer,
       onClick,
       toogleShow,
     };
@@ -151,59 +173,71 @@ export default defineComponent({
 
 <style scoped>
 /* Animations */
-.fade-enter-active, .fade-leave-active {
-  transition: opacity .1s;
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.1s;
 }
-.fade-enter, .fade-leave-to {
+.fade-enter,
+.fade-leave-to {
   opacity: 0;
 }
 
 /* Slide-in-up animation*/
-.slide-in-up-enter-active, .slide-in-up-leave-active {
-  transition: all .5s;
+.slide-in-up-enter-active,
+.slide-in-up-leave-active {
+  transition: all 0.5s;
   transform: translateY(0);
 }
-.slide-in-up-enter, .slide-in-up-leave-to {
+.slide-in-up-enter,
+.slide-in-up-leave-to {
   opacity: 0;
   transform: translateY(20px);
 }
 
 /* Slide-in-right animation*/
-.slide-in-right-enter-active, .slide-in-right-leave-active {
-  transition: all .5s;
+.slide-in-right-enter-active,
+.slide-in-right-leave-active {
+  transition: all 0.5s;
   transform: translateX(0);
 }
-.slide-in-right-enter, .slide-in-right-leave-to {
+.slide-in-right-enter,
+.slide-in-right-leave-to {
   opacity: 0;
   transform: translateX(20px);
 }
 
 /* Slide-in-left animation*/
-.slide-in-left-enter-active, .slide-in-left-leave-active {
-  transition: all .5s;
+.slide-in-left-enter-active,
+.slide-in-left-leave-active {
+  transition: all 0.5s;
   transform: translateX(0);
 }
-.slide-in-left-enter, .slide-in-left-leave-to {
+.slide-in-left-enter,
+.slide-in-left-leave-to {
   opacity: 0;
   transform: translateX(-20px);
 }
 
 /* Scale animation*/
-.scale-enter-active, .scale-leave-active {
-  transition: all .5s;
+.scale-enter-active,
+.scale-leave-active {
+  transition: all 0.5s;
   transform: scale(1);
 }
-.scale-enter, .scale-leave-to {
+.scale-enter,
+.scale-leave-to {
   opacity: 0;
   transform: scale(0);
 }
 
 /* Rotate animation*/
-.rotate-enter-active, .rotate-leave-active {
-  transition: all .5s;
+.rotate-enter-active,
+.rotate-leave-active {
+  transition: all 0.5s;
   transform: scale(1) rotate(-360deg);
 }
-.rotate-enter, .rotate-leave-to {
+.rotate-enter,
+.rotate-leave-to {
   opacity: 0;
   transform: scale(0) rotate(360deg);
 }

diff --git a/resources/jscomposition/base/table/BaseTable.vue b/resources/jscomposition/base/table/BaseTable.vue
@@ -9,7 +9,10 @@
             :key="index"
             :columns="columns"
             :column="column">
-            <slot :name="`theader-${column.header}`"> </slot>
+            <slot :name="`theader-${column.field}`"> </slot>
+            <template #filter>
+              <slot :name="`theader-filter-${column.field}`"></slot>
+            </template>
           </THeader>
         </tr>
       </thead>

diff --git a/resources/jscomposition/base/table/THeader.vue b/resources/jscomposition/base/table/THeader.vue
@@ -1,17 +1,21 @@
 <template>
   <th>
-    <div class="tw-flex tw-justify-between">
+    <div class="tw-flex tw-relative tw-text-nowrap tw-whitespace-nowrap tw-justify-between">
       <div
-        class="tw-w-full tw-relative tw-py-4 tw-px-3 tw-text-left
-         tw-overflow-hidden tw-whitespace-nowrap tw-text-ellipsis"
+        class="tw-py-4 tw-px-3 tw-text-left tw-text-nowrap tw-whitespace-nowrap tw-overflow-hidden tw-text-ellipsis"
         :style="{ width: width + 'px' }">
         <slot>
-          {{ getValue() }}
+            {{ getValue() }}
         </slot>
       </div>
+
+      <div class="tw-h-auto tw-flex tw-items-center">
+        <slot name="filter"></slot>
+      </div>
+
       <div
         :class="{ '!tw-cursor-col-resize': column.resizable }"
-        class="tw-w-[10px] tw-cursor-default tw-border-r tw-border-gray-400"
+        class="tw-w-[5px] tw-cursor-default tw-border-r tw-border-gray-400"
         @mousedown="column.resizable ? columnResize.startResize($event) : null">
         &nbsp;
       </div>

diff --git a/resources/jscomposition/base/ui/AppPopover.vue b/resources/jscomposition/base/ui/AppPopover.vue
@@ -87,6 +87,13 @@ export default {
             calculatedPosition.value = "top";
             top = wrapperRect.top - tooltipRect.height - 10;
           }
+
+          const leftaux = wrapperRect.left - tooltipRect.width - 10;
+          // Verify space left
+          if (leftaux < 0) {
+            calculatedPosition.value = "right-bottom";
+            left = wrapperRect.right + 100;
+          }
           break;
         case "left":
           top = wrapperRect.top + wrapperRect.height / 2 - tooltipRect.height / 2;
@@ -126,6 +133,12 @@ export default {
       visible.value = false;
     };
 
+    const clickIntoPopover = (event) => {
+      if (!tooltipWrapper.value.contains(event.target)) {
+        hideTooltip();
+      }
+    };
+
     // Recalculated position when property visible changes
     const unwatch = watch(
       () => props.value,
@@ -143,11 +156,11 @@ export default {
         showTooltip();
       }
 
-      !props.hover && document.body.addEventListener("click", hideTooltip);
+      !props.hover && document.body.addEventListener("click", clickIntoPopover);
     });
 
     onUnmounted(() => {
-      !props.hover && document.body.removeEventListener("click", hideTooltip);
+      document.body.removeEventListener("click", clickIntoPopover);
       unwatch();
     });
 
@@ -190,4 +203,9 @@ export default {
 .tooltip-content.right {
   transform: translateY(-50%);
 }
+
+.tooltip-content.right-bottom {
+  transform: translateY(-50%);
+  transform: translateX(-50%);
+}
 </style>
diff --git a/resources/jscomposition/cases/casesDetail/config/columns.js b/resources/jscomposition/cases/casesDetail/config/columns.js
@@ -1,5 +1,8 @@
-import BadgeContainer from "../../casesMain/components/BadgeContainer.vue";
-import AvatarContainer from "../../casesMain/components/AvatarContainer.vue";
+import {
+  ParticipantsCell,
+  StatusCell,
+} from "../../../system/index";
+
 
 export default {};
 
@@ -29,8 +32,7 @@ const assignedColumn = () => ({
   field: "assigned",
   header: "Assigned",
   resizable: true,
-  width: 200,
-  cellRenderer: () => AvatarContainer,
+  width: 200
 });
 
 const dueDateColumn = () => ({
@@ -67,7 +69,7 @@ const statusColumn = () => ({
   header: "Status",
   resizable: true,
   width: 200,
-  cellRenderer: () => BadgeContainer,
+  cellRenderer: () => StatusCell,
 });
 
 const startedColumn = () => ({