FOU-19003 : Create a NEW VIEW for cases Part Filters

resources/jscomposition/base/buttons/OutlineButton.vue

@@ -2,9 +2,8 @@
  <button
  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"
- >
+ tw-space-x-2 tw-px-3 tw-py-3 hover:tw-bg-${color}-200 tw-justify-center tw-items-center`"
+ @click.prevent.stop="onClick">
  <slot />
  </button>
 </template>

resources/jscomposition/base/form/Dropdown.vue

@@ -1,18 +1,17 @@
 <template>
- <div class="tw-relative">
+ <div
+ ref="inputRef"
+ class="tw-relative">
  <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 +21,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>
+ class="tw-flex tw-py-2 tw-px-4 transition duration-300">
+ {{ option.label || option.value }}
+ </span>
  </slot>
  </li>
  </slot>
@@ -63,9 +60,8 @@
 
 <script>
 import {
- defineComponent, ref, computed, onMounted, onUnmounted,
+ defineComponent, ref, computed, onMounted, onUnmounted, nextTick,
 } from "vue";
-
 /**
  * <Dropdown
  * animation="fade"
@@ -95,7 +91,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() {
@@ -115,19 +114,42 @@ export default defineComponent({
  },
  });
 
- const onClick = (option, index) => {
+ const onClick = (option) => {
  show.value = false;
  data.value = option;
 
  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 += 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 +163,10 @@ export default defineComponent({
  return {
  show,
  data,
+ inputRef,
  optionsModel,
+ top,
+ widthContainer,
  onClick,
  toogleShow,
  };
@@ -151,59 +176,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);
 }

resources/jscomposition/base/table/BaseTable.vue

@@ -1,5 +1,6 @@
 <template>
- <div class="tw-w-full tw-relative tw-text-gray-600 tw-text-sm
+ <div
+ class="tw-w-full tw-relative tw-text-gray-600 tw-text-sm
  tw-border tw-rounded-xl tw-border-gray-300 tw-overflow-hidden tw-overflow-x-auto">
  <table class="tw-w-full tw-border-collapse">
  <thead class="tw-border-b tw-sticky tw-top-0 tw-z-10 tw-bg-gray-100">
@@ -9,19 +10,24 @@
  :key="index"
  :columns="columns"
  :column="column">
- <slot :name="`theader-${column.header}`"> </slot>
+ <slot :name="`theader-${column.field}`" />
+ <template #filter>
+ <slot :name="`theader-filter-${column.field}`" />
+ </template>
  </THeader>
  </tr>
  </thead>
  <tbody>
- <TRow v-for="(row, indexRow) in data" :key="indexRow">
+ <TRow
+ v-for="(row, indexRow) in data"
+ :key="indexRow">
  <TCell
  v-for="(column, indexColumn) in columns"
  :key="indexColumn"
  :columns="columns"
  :column="column"
  :row="row">
- <slot :name="`tcell-${indexRow}-${column.field}`"> </slot>
+ <slot :name="`tcell-${indexRow}-${column.field}`" />
  </TCell>
  </TRow>
  </tbody>
@@ -35,17 +41,6 @@ import THeader from "./THeader.vue";
 import TRow from "./TRow.vue";
 import TCell from "./TCell.vue";
 
-function generateUniqueId(length = 8) {
- const charset =
- "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
- let uniqueId = "";
- for (let i = 0; i < length; i++) {
- const randomIndex = Math.floor(Math.random() * charset.length);
- uniqueId += charset[randomIndex];
- }
- return uniqueId;
-}
-
 export default defineComponent({
  components: {
  THeader,
@@ -66,7 +61,7 @@ export default defineComponent({
  default: () => ({}),
  },
  },
- setup(props, { emit }) {
+ setup() {
  return {};
  },
 });

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() }}
  </slot>
  </div>
+
+ <div class="tw-h-auto tw-flex tw-items-center">
+ <slot name="filter" />
+ </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>
@@ -38,9 +42,7 @@ export default defineComponent({
  setup(props, { emit }) {
  const columnResize = columnResizeComposable(props.column);
 
- const width = computed(() => {
- return props.column.width || 200;
- });
+ const width = computed(() => props.column.width || 200);
 
  const getValue = () => {
  if (isFunction(props.column?.headerFormatter)) {

resources/jscomposition/base/buttons/OutlineButton.vue

@@ -2,9 +2,8 @@
  <button
  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"
- >
+ tw-space-x-2 tw-px-3 tw-py-3 hover:tw-bg-${color}-200 tw-justify-center tw-items-center`"
+ @click.prevent.stop="onClick">
  <slot />
  </button>
 </template>

resources/jscomposition/base/form/Dropdown.vue

@@ -1,18 +1,17 @@
 <template>
- <div class="tw-relative">
+ <div
+ ref="inputRef"
+ class="tw-relative">
  <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 +21,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>
+ class="tw-flex tw-py-2 tw-px-4 transition duration-300">
+ {{ option.label || option.value }}
+ </span>
  </slot>
  </li>
  </slot>
@@ -63,9 +60,8 @@
 
 <script>
 import {
- defineComponent, ref, computed, onMounted, onUnmounted,
+ defineComponent, ref, computed, onMounted, onUnmounted, nextTick,
 } from "vue";
-
 /**
  * <Dropdown
  * animation="fade"
@@ -95,7 +91,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() {
@@ -115,19 +114,42 @@ export default defineComponent({
  },
  });
 
- const onClick = (option, index) => {
+ const onClick = (option) => {
  show.value = false;
  data.value = option;
 
  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 += 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 +163,10 @@ export default defineComponent({
  return {
  show,
  data,
+ inputRef,
  optionsModel,
+ top,
+ widthContainer,
  onClick,
  toogleShow,
  };
@@ -151,59 +176,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);
 }

resources/jscomposition/base/table/BaseTable.vue

@@ -1,5 +1,6 @@
 <template>
- <div class="tw-w-full tw-relative tw-text-gray-600 tw-text-sm
+ <div
+ class="tw-w-full tw-relative tw-text-gray-600 tw-text-sm
  tw-border tw-rounded-xl tw-border-gray-300 tw-overflow-hidden tw-overflow-x-auto">
  <table class="tw-w-full tw-border-collapse">
  <thead class="tw-border-b tw-sticky tw-top-0 tw-z-10 tw-bg-gray-100">
@@ -9,19 +10,24 @@
  :key="index"
  :columns="columns"
  :column="column">
- <slot :name="`theader-${column.header}`"> </slot>
+ <slot :name="`theader-${column.field}`" />
+ <template #filter>
+ <slot :name="`theader-filter-${column.field}`" />
+ </template>
  </THeader>
  </tr>
  </thead>
  <tbody>
- <TRow v-for="(row, indexRow) in data" :key="indexRow">
+ <TRow
+ v-for="(row, indexRow) in data"
+ :key="indexRow">
  <TCell
  v-for="(column, indexColumn) in columns"
  :key="indexColumn"
  :columns="columns"
  :column="column"
  :row="row">
- <slot :name="`tcell-${indexRow}-${column.field}`"> </slot>
+ <slot :name="`tcell-${indexRow}-${column.field}`" />
  </TCell>
  </TRow>
  </tbody>
@@ -35,17 +41,6 @@ import THeader from "./THeader.vue";
 import TRow from "./TRow.vue";
 import TCell from "./TCell.vue";
 
-function generateUniqueId(length = 8) {
- const charset =
- "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
- let uniqueId = "";
- for (let i = 0; i < length; i++) {
- const randomIndex = Math.floor(Math.random() * charset.length);
- uniqueId += charset[randomIndex];
- }
- return uniqueId;
-}
-
 export default defineComponent({
  components: {
  THeader,
@@ -66,7 +61,7 @@ export default defineComponent({
  default: () => ({}),
  },
  },
- setup(props, { emit }) {
+ setup() {
  return {};
  },
 });

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() }}
  </slot>
  </div>
+
+ <div class="tw-h-auto tw-flex tw-items-center">
+ <slot name="filter" />
+ </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>
@@ -38,9 +42,7 @@ export default defineComponent({
  setup(props, { emit }) {
  const columnResize = columnResizeComposable(props.column);
 
- const width = computed(() => {
- return props.column.width || 200;
- });
+ const width = computed(() => props.column.width || 200);
 
  const getValue = () => {
  if (isFunction(props.column?.headerFormatter)) {

resources/jscomposition/base/buttons/OutlineButton.vue

@@ -2,9 +2,8 @@
  <button
  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"
- >
+ tw-space-x-2 tw-px-3 tw-py-3 hover:tw-bg-${color}-200 tw-justify-center tw-items-center`"
+ @click.prevent.stop="onClick">
  <slot />
  </button>
 </template>

resources/jscomposition/base/form/Dropdown.vue

@@ -1,18 +1,17 @@
 <template>
- <div class="tw-relative">
+ <div
+ ref="inputRef"
+ class="tw-relative">
  <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 +21,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>
+ class="tw-flex tw-py-2 tw-px-4 transition duration-300">
+ {{ option.label || option.value }}
+ </span>
  </slot>
  </li>
  </slot>
@@ -63,9 +60,8 @@
 
 <script>
 import {
- defineComponent, ref, computed, onMounted, onUnmounted,
+ defineComponent, ref, computed, onMounted, onUnmounted, nextTick,
 } from "vue";
-
 /**
  * <Dropdown
  * animation="fade"
@@ -95,7 +91,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() {
@@ -115,19 +114,42 @@ export default defineComponent({
  },
  });
 
- const onClick = (option, index) => {
+ const onClick = (option) => {
  show.value = false;
  data.value = option;
 
  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 += 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 +163,10 @@ export default defineComponent({
  return {
  show,
  data,
+ inputRef,
  optionsModel,
+ top,
+ widthContainer,
  onClick,
  toogleShow,
  };
@@ -151,59 +176,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);
 }

resources/jscomposition/base/table/BaseTable.vue

@@ -1,5 +1,6 @@
 <template>
- <div class="tw-w-full tw-relative tw-text-gray-600 tw-text-sm
+ <div
+ class="tw-w-full tw-relative tw-text-gray-600 tw-text-sm
  tw-border tw-rounded-xl tw-border-gray-300 tw-overflow-hidden tw-overflow-x-auto">
  <table class="tw-w-full tw-border-collapse">
  <thead class="tw-border-b tw-sticky tw-top-0 tw-z-10 tw-bg-gray-100">
@@ -9,19 +10,24 @@
  :key="index"
  :columns="columns"
  :column="column">
- <slot :name="`theader-${column.header}`"> </slot>
+ <slot :name="`theader-${column.field}`" />
+ <template #filter>
+ <slot :name="`theader-filter-${column.field}`" />
+ </template>
  </THeader>
  </tr>
  </thead>
  <tbody>
- <TRow v-for="(row, indexRow) in data" :key="indexRow">
+ <TRow
+ v-for="(row, indexRow) in data"
+ :key="indexRow">
  <TCell
  v-for="(column, indexColumn) in columns"
  :key="indexColumn"
  :columns="columns"
  :column="column"
  :row="row">
- <slot :name="`tcell-${indexRow}-${column.field}`"> </slot>
+ <slot :name="`tcell-${indexRow}-${column.field}`" />
  </TCell>
  </TRow>
  </tbody>
@@ -35,17 +41,6 @@ import THeader from "./THeader.vue";
 import TRow from "./TRow.vue";
 import TCell from "./TCell.vue";
 
-function generateUniqueId(length = 8) {
- const charset =
- "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
- let uniqueId = "";
- for (let i = 0; i < length; i++) {
- const randomIndex = Math.floor(Math.random() * charset.length);
- uniqueId += charset[randomIndex];
- }
- return uniqueId;
-}
-
 export default defineComponent({
  components: {
  THeader,
@@ -66,7 +61,7 @@ export default defineComponent({
  default: () => ({}),
  },
  },
- setup(props, { emit }) {
+ setup() {
  return {};
  },
 });

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() }}
  </slot>
  </div>
+
+ <div class="tw-h-auto tw-flex tw-items-center">
+ <slot name="filter" />
+ </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>
@@ -38,9 +42,7 @@ export default defineComponent({
  setup(props, { emit }) {
  const columnResize = columnResizeComposable(props.column);
 
- const width = computed(() => {
- return props.column.width || 200;
- });
+ const width = computed(() => props.column.width || 200);
 
  const getValue = () => {
  if (isFunction(props.column?.headerFormatter)) {

resources/jscomposition/base/buttons/OutlineButton.vue

@@ -2,9 +2,8 @@
  <button
  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"
- >
+ tw-space-x-2 tw-px-3 tw-py-3 hover:tw-bg-${color}-200 tw-justify-center tw-items-center`"
+ @click.prevent.stop="onClick">
  <slot />
  </button>
 </template>

resources/jscomposition/base/form/Dropdown.vue

@@ -1,18 +1,17 @@
 <template>
- <div class="tw-relative">
+ <div
+ ref="inputRef"
+ class="tw-relative">
  <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 +21,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>
+ class="tw-flex tw-py-2 tw-px-4 transition duration-300">
+ {{ option.label || option.value }}
+ </span>
  </slot>
  </li>
  </slot>
@@ -63,9 +60,8 @@
 
 <script>
 import {
- defineComponent, ref, computed, onMounted, onUnmounted,
+ defineComponent, ref, computed, onMounted, onUnmounted, nextTick,
 } from "vue";
-
 /**
  * <Dropdown
  * animation="fade"
@@ -95,7 +91,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() {
@@ -115,19 +114,42 @@ export default defineComponent({
  },
  });
 
- const onClick = (option, index) => {
+ const onClick = (option) => {
  show.value = false;
  data.value = option;
 
  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 += 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 +163,10 @@ export default defineComponent({
  return {
  show,
  data,
+ inputRef,
  optionsModel,
+ top,
+ widthContainer,
  onClick,
  toogleShow,
  };
@@ -151,59 +176,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);
 }

resources/jscomposition/base/table/BaseTable.vue

@@ -1,5 +1,6 @@
 <template>
- <div class="tw-w-full tw-relative tw-text-gray-600 tw-text-sm
+ <div
+ class="tw-w-full tw-relative tw-text-gray-600 tw-text-sm
  tw-border tw-rounded-xl tw-border-gray-300 tw-overflow-hidden tw-overflow-x-auto">
  <table class="tw-w-full tw-border-collapse">
  <thead class="tw-border-b tw-sticky tw-top-0 tw-z-10 tw-bg-gray-100">
@@ -9,19 +10,24 @@
  :key="index"
  :columns="columns"
  :column="column">
- <slot :name="`theader-${column.header}`"> </slot>
+ <slot :name="`theader-${column.field}`" />
+ <template #filter>
+ <slot :name="`theader-filter-${column.field}`" />
+ </template>
  </THeader>
  </tr>
  </thead>
  <tbody>
- <TRow v-for="(row, indexRow) in data" :key="indexRow">
+ <TRow
+ v-for="(row, indexRow) in data"
+ :key="indexRow">
  <TCell
  v-for="(column, indexColumn) in columns"
  :key="indexColumn"
  :columns="columns"
  :column="column"
  :row="row">
- <slot :name="`tcell-${indexRow}-${column.field}`"> </slot>
+ <slot :name="`tcell-${indexRow}-${column.field}`" />
  </TCell>
  </TRow>
  </tbody>
@@ -35,17 +41,6 @@ import THeader from "./THeader.vue";
 import TRow from "./TRow.vue";
 import TCell from "./TCell.vue";
 
-function generateUniqueId(length = 8) {
- const charset =
- "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
- let uniqueId = "";
- for (let i = 0; i < length; i++) {
- const randomIndex = Math.floor(Math.random() * charset.length);
- uniqueId += charset[randomIndex];
- }
- return uniqueId;
-}
-
 export default defineComponent({
  components: {
  THeader,
@@ -66,7 +61,7 @@ export default defineComponent({
  default: () => ({}),
  },
  },
- setup(props, { emit }) {
+ setup() {
  return {};
  },
 });

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() }}
  </slot>
  </div>
+
+ <div class="tw-h-auto tw-flex tw-items-center">
+ <slot name="filter" />
+ </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>
@@ -38,9 +42,7 @@ export default defineComponent({
  setup(props, { emit }) {
  const columnResize = columnResizeComposable(props.column);
 
- const width = computed(() => {
- return props.column.width || 200;
- });
+ const width = computed(() => props.column.width || 200);
 
  const getValue = () => {
  if (isFunction(props.column?.headerFormatter)) {

resources/jscomposition/base/buttons/OutlineButton.vue

@@ -2,9 +2,8 @@
  <button
  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"
- >
+ tw-space-x-2 tw-px-3 tw-py-3 hover:tw-bg-${color}-200 tw-justify-center tw-items-center`"
+ @click.prevent.stop="onClick">
  <slot />
  </button>
 </template>

resources/jscomposition/base/form/Dropdown.vue

@@ -1,18 +1,17 @@
 <template>
- <div class="tw-relative">
+ <div
+ ref="inputRef"
+ class="tw-relative">
  <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 +21,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>
+ class="tw-flex tw-py-2 tw-px-4 transition duration-300">
+ {{ option.label || option.value }}
+ </span>
  </slot>
  </li>
  </slot>
@@ -63,9 +60,8 @@
 
 <script>
 import {
- defineComponent, ref, computed, onMounted, onUnmounted,
+ defineComponent, ref, computed, onMounted, onUnmounted, nextTick,
 } from "vue";
-
 /**
  * <Dropdown
  * animation="fade"
@@ -95,7 +91,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() {
@@ -115,19 +114,42 @@ export default defineComponent({
  },
  });
 
- const onClick = (option, index) => {
+ const onClick = (option) => {
  show.value = false;
  data.value = option;
 
  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 += 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 +163,10 @@ export default defineComponent({
  return {
  show,
  data,
+ inputRef,
  optionsModel,
+ top,
+ widthContainer,
  onClick,
  toogleShow,
  };
@@ -151,59 +176,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);
 }

resources/jscomposition/base/table/BaseTable.vue

@@ -1,5 +1,6 @@
 <template>
- <div class="tw-w-full tw-relative tw-text-gray-600 tw-text-sm
+ <div
+ class="tw-w-full tw-relative tw-text-gray-600 tw-text-sm
  tw-border tw-rounded-xl tw-border-gray-300 tw-overflow-hidden tw-overflow-x-auto">
  <table class="tw-w-full tw-border-collapse">
  <thead class="tw-border-b tw-sticky tw-top-0 tw-z-10 tw-bg-gray-100">
@@ -9,19 +10,24 @@
  :key="index"
  :columns="columns"
  :column="column">
- <slot :name="`theader-${column.header}`"> </slot>
+ <slot :name="`theader-${column.field}`" />
+ <template #filter>
+ <slot :name="`theader-filter-${column.field}`" />
+ </template>
  </THeader>
  </tr>
  </thead>
  <tbody>
- <TRow v-for="(row, indexRow) in data" :key="indexRow">
+ <TRow
+ v-for="(row, indexRow) in data"
+ :key="indexRow">
  <TCell
  v-for="(column, indexColumn) in columns"
  :key="indexColumn"
  :columns="columns"
  :column="column"
  :row="row">
- <slot :name="`tcell-${indexRow}-${column.field}`"> </slot>
+ <slot :name="`tcell-${indexRow}-${column.field}`" />
  </TCell>
  </TRow>
  </tbody>
@@ -35,17 +41,6 @@ import THeader from "./THeader.vue";
 import TRow from "./TRow.vue";
 import TCell from "./TCell.vue";
 
-function generateUniqueId(length = 8) {
- const charset =
- "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
- let uniqueId = "";
- for (let i = 0; i < length; i++) {
- const randomIndex = Math.floor(Math.random() * charset.length);
- uniqueId += charset[randomIndex];
- }
- return uniqueId;
-}
-
 export default defineComponent({
  components: {
  THeader,
@@ -66,7 +61,7 @@ export default defineComponent({
  default: () => ({}),
  },
  },
- setup(props, { emit }) {
+ setup() {
  return {};
  },
 });

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() }}
  </slot>
  </div>
+
+ <div class="tw-h-auto tw-flex tw-items-center">
+ <slot name="filter" />
+ </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>
@@ -38,9 +42,7 @@ export default defineComponent({
  setup(props, { emit }) {
  const columnResize = columnResizeComposable(props.column);
 
- const width = computed(() => {
- return props.column.width || 200;
- });
+ const width = computed(() => props.column.width || 200);
 
  const getValue = () => {
  if (isFunction(props.column?.headerFormatter)) {

resources/jscomposition/base/buttons/OutlineButton.vue

@@ -2,9 +2,8 @@
  <button
  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"
- >
+ tw-space-x-2 tw-px-3 tw-py-3 hover:tw-bg-${color}-200 tw-justify-center tw-items-center`"
+ @click.prevent.stop="onClick">
  <slot />
  </button>
 </template>

resources/jscomposition/base/form/Dropdown.vue

@@ -1,18 +1,17 @@
 <template>
- <div class="tw-relative">
+ <div
+ ref="inputRef"
+ class="tw-relative">
  <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 +21,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>
+ class="tw-flex tw-py-2 tw-px-4 transition duration-300">
+ {{ option.label || option.value }}
+ </span>
  </slot>
  </li>
  </slot>
@@ -63,9 +60,8 @@
 
 <script>
 import {
- defineComponent, ref, computed, onMounted, onUnmounted,
+ defineComponent, ref, computed, onMounted, onUnmounted, nextTick,
 } from "vue";
-
 /**
  * <Dropdown
  * animation="fade"
@@ -95,7 +91,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() {
@@ -115,19 +114,42 @@ export default defineComponent({
  },
  });
 
- const onClick = (option, index) => {
+ const onClick = (option) => {
  show.value = false;
  data.value = option;
 
  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 += 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 +163,10 @@ export default defineComponent({
  return {
  show,
  data,
+ inputRef,
  optionsModel,
+ top,
+ widthContainer,
  onClick,
  toogleShow,
  };
@@ -151,59 +176,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);
 }

resources/jscomposition/base/table/BaseTable.vue

@@ -1,5 +1,6 @@
 <template>
- <div class="tw-w-full tw-relative tw-text-gray-600 tw-text-sm
+ <div
+ class="tw-w-full tw-relative tw-text-gray-600 tw-text-sm
  tw-border tw-rounded-xl tw-border-gray-300 tw-overflow-hidden tw-overflow-x-auto">
  <table class="tw-w-full tw-border-collapse">
  <thead class="tw-border-b tw-sticky tw-top-0 tw-z-10 tw-bg-gray-100">
@@ -9,19 +10,24 @@
  :key="index"
  :columns="columns"
  :column="column">
- <slot :name="`theader-${column.header}`"> </slot>
+ <slot :name="`theader-${column.field}`" />
+ <template #filter>
+ <slot :name="`theader-filter-${column.field}`" />
+ </template>
  </THeader>
  </tr>
  </thead>
  <tbody>
- <TRow v-for="(row, indexRow) in data" :key="indexRow">
+ <TRow
+ v-for="(row, indexRow) in data"
+ :key="indexRow">
  <TCell
  v-for="(column, indexColumn) in columns"
  :key="indexColumn"
  :columns="columns"
  :column="column"
  :row="row">
- <slot :name="`tcell-${indexRow}-${column.field}`"> </slot>
+ <slot :name="`tcell-${indexRow}-${column.field}`" />
  </TCell>
  </TRow>
  </tbody>
@@ -35,17 +41,6 @@ import THeader from "./THeader.vue";
 import TRow from "./TRow.vue";
 import TCell from "./TCell.vue";
 
-function generateUniqueId(length = 8) {
- const charset =
- "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
- let uniqueId = "";
- for (let i = 0; i < length; i++) {
- const randomIndex = Math.floor(Math.random() * charset.length);
- uniqueId += charset[randomIndex];
- }
- return uniqueId;
-}
-
 export default defineComponent({
  components: {
  THeader,
@@ -66,7 +61,7 @@ export default defineComponent({
  default: () => ({}),
  },
  },
- setup(props, { emit }) {
+ setup() {
  return {};
  },
 });

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() }}
  </slot>
  </div>
+
+ <div class="tw-h-auto tw-flex tw-items-center">
+ <slot name="filter" />
+ </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>
@@ -38,9 +42,7 @@ export default defineComponent({
  setup(props, { emit }) {
  const columnResize = columnResizeComposable(props.column);
 
- const width = computed(() => {
- return props.column.width || 200;
- });
+ const width = computed(() => props.column.width || 200);
 
  const getValue = () => {
  if (isFunction(props.column?.headerFormatter)) {

resources/jscomposition/base/buttons/OutlineButton.vue

@@ -2,9 +2,8 @@
  <button
  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"
- >
+ tw-space-x-2 tw-px-3 tw-py-3 hover:tw-bg-${color}-200 tw-justify-center tw-items-center`"
+ @click.prevent.stop="onClick">
  <slot />
  </button>
 </template>

resources/jscomposition/base/form/Dropdown.vue

@@ -1,18 +1,17 @@
 <template>
- <div class="tw-relative">
+ <div
+ ref="inputRef"
+ class="tw-relative">
  <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 +21,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>
+ class="tw-flex tw-py-2 tw-px-4 transition duration-300">
+ {{ option.label || option.value }}
+ </span>
  </slot>
  </li>
  </slot>
@@ -63,9 +60,8 @@
 
 <script>
 import {
- defineComponent, ref, computed, onMounted, onUnmounted,
+ defineComponent, ref, computed, onMounted, onUnmounted, nextTick,
 } from "vue";
-
 /**
  * <Dropdown
  * animation="fade"
@@ -95,7 +91,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() {
@@ -115,19 +114,42 @@ export default defineComponent({
  },
  });
 
- const onClick = (option, index) => {
+ const onClick = (option) => {
  show.value = false;
  data.value = option;
 
  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 += 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 +163,10 @@ export default defineComponent({
  return {
  show,
  data,
+ inputRef,
  optionsModel,
+ top,
+ widthContainer,
  onClick,
  toogleShow,
  };
@@ -151,59 +176,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);
 }

resources/jscomposition/base/table/BaseTable.vue

@@ -1,5 +1,6 @@
 <template>
- <div class="tw-w-full tw-relative tw-text-gray-600 tw-text-sm
+ <div
+ class="tw-w-full tw-relative tw-text-gray-600 tw-text-sm
  tw-border tw-rounded-xl tw-border-gray-300 tw-overflow-hidden tw-overflow-x-auto">
  <table class="tw-w-full tw-border-collapse">
  <thead class="tw-border-b tw-sticky tw-top-0 tw-z-10 tw-bg-gray-100">
@@ -9,19 +10,24 @@
  :key="index"
  :columns="columns"
  :column="column">
- <slot :name="`theader-${column.header}`"> </slot>
+ <slot :name="`theader-${column.field}`" />
+ <template #filter>
+ <slot :name="`theader-filter-${column.field}`" />
+ </template>
  </THeader>
  </tr>
  </thead>
  <tbody>
- <TRow v-for="(row, indexRow) in data" :key="indexRow">
+ <TRow
+ v-for="(row, indexRow) in data"
+ :key="indexRow">
  <TCell
  v-for="(column, indexColumn) in columns"
  :key="indexColumn"
  :columns="columns"
  :column="column"
  :row="row">
- <slot :name="`tcell-${indexRow}-${column.field}`"> </slot>
+ <slot :name="`tcell-${indexRow}-${column.field}`" />
  </TCell>
  </TRow>
  </tbody>
@@ -35,17 +41,6 @@ import THeader from "./THeader.vue";
 import TRow from "./TRow.vue";
 import TCell from "./TCell.vue";
 
-function generateUniqueId(length = 8) {
- const charset =
- "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
- let uniqueId = "";
- for (let i = 0; i < length; i++) {
- const randomIndex = Math.floor(Math.random() * charset.length);
- uniqueId += charset[randomIndex];
- }
- return uniqueId;
-}
-
 export default defineComponent({
  components: {
  THeader,
@@ -66,7 +61,7 @@ export default defineComponent({
  default: () => ({}),
  },
  },
- setup(props, { emit }) {
+ setup() {
  return {};
  },
 });

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() }}
  </slot>
  </div>
+
+ <div class="tw-h-auto tw-flex tw-items-center">
+ <slot name="filter" />
+ </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>
@@ -38,9 +42,7 @@ export default defineComponent({
  setup(props, { emit }) {
  const columnResize = columnResizeComposable(props.column);
 
- const width = computed(() => {
- return props.column.width || 200;
- });
+ const width = computed(() => props.column.width || 200);
 
  const getValue = () => {
  if (isFunction(props.column?.headerFormatter)) {

resources/jscomposition/base/buttons/OutlineButton.vue

@@ -2,9 +2,8 @@
  <button
  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"
- >
+ tw-space-x-2 tw-px-3 tw-py-3 hover:tw-bg-${color}-200 tw-justify-center tw-items-center`"
+ @click.prevent.stop="onClick">
  <slot />
  </button>
 </template>

resources/jscomposition/base/form/Dropdown.vue

@@ -1,18 +1,17 @@
 <template>
- <div class="tw-relative">
+ <div
+ ref="inputRef"
+ class="tw-relative">
  <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 +21,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>
+ class="tw-flex tw-py-2 tw-px-4 transition duration-300">
+ {{ option.label || option.value }}
+ </span>
  </slot>
  </li>
  </slot>
@@ -63,9 +60,8 @@
 
 <script>
 import {
- defineComponent, ref, computed, onMounted, onUnmounted,
+ defineComponent, ref, computed, onMounted, onUnmounted, nextTick,
 } from "vue";
-
 /**
  * <Dropdown
  * animation="fade"
@@ -95,7 +91,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() {
@@ -115,19 +114,42 @@ export default defineComponent({
  },
  });
 
- const onClick = (option, index) => {
+ const onClick = (option) => {
  show.value = false;
  data.value = option;
 
  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 += 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 +163,10 @@ export default defineComponent({
  return {
  show,
  data,
+ inputRef,
  optionsModel,
+ top,
+ widthContainer,
  onClick,
  toogleShow,
  };
@@ -151,59 +176,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);
 }

resources/jscomposition/base/table/BaseTable.vue

@@ -1,5 +1,6 @@
 <template>
- <div class="tw-w-full tw-relative tw-text-gray-600 tw-text-sm
+ <div
+ class="tw-w-full tw-relative tw-text-gray-600 tw-text-sm
  tw-border tw-rounded-xl tw-border-gray-300 tw-overflow-hidden tw-overflow-x-auto">
  <table class="tw-w-full tw-border-collapse">
  <thead class="tw-border-b tw-sticky tw-top-0 tw-z-10 tw-bg-gray-100">
@@ -9,19 +10,24 @@
  :key="index"
  :columns="columns"
  :column="column">
- <slot :name="`theader-${column.header}`"> </slot>
+ <slot :name="`theader-${column.field}`" />
+ <template #filter>
+ <slot :name="`theader-filter-${column.field}`" />
+ </template>
  </THeader>
  </tr>
  </thead>
  <tbody>
- <TRow v-for="(row, indexRow) in data" :key="indexRow">
+ <TRow
+ v-for="(row, indexRow) in data"
+ :key="indexRow">
  <TCell
  v-for="(column, indexColumn) in columns"
  :key="indexColumn"
  :columns="columns"
  :column="column"
  :row="row">
- <slot :name="`tcell-${indexRow}-${column.field}`"> </slot>
+ <slot :name="`tcell-${indexRow}-${column.field}`" />
  </TCell>
  </TRow>
  </tbody>
@@ -35,17 +41,6 @@ import THeader from "./THeader.vue";
 import TRow from "./TRow.vue";
 import TCell from "./TCell.vue";
 
-function generateUniqueId(length = 8) {
- const charset =
- "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
- let uniqueId = "";
- for (let i = 0; i < length; i++) {
- const randomIndex = Math.floor(Math.random() * charset.length);
- uniqueId += charset[randomIndex];
- }
- return uniqueId;
-}
-
 export default defineComponent({
  components: {
  THeader,
@@ -66,7 +61,7 @@ export default defineComponent({
  default: () => ({}),
  },
  },
- setup(props, { emit }) {
+ setup() {
  return {};
  },
 });

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() }}
  </slot>
  </div>
+
+ <div class="tw-h-auto tw-flex tw-items-center">
+ <slot name="filter" />
+ </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>
@@ -38,9 +42,7 @@ export default defineComponent({
  setup(props, { emit }) {
  const columnResize = columnResizeComposable(props.column);
 
- const width = computed(() => {
- return props.column.width || 200;
- });
+ const width = computed(() => props.column.width || 200);
 
  const getValue = () => {
  if (isFunction(props.column?.headerFormatter)) {