edvoyui-component-library-test-flight 0.0.25 → 0.0.27

package/src/components/select/EUISelect.vue

@@ -1,5 +1,14 @@
 <template>
   <div :class="isUseCustomSelect ? 'isUseCustomSelect' : ''">
+    <label
+      v-if="!inputFilled && label"
+      :class="[
+        'text-xs w-full text-gray-500 cursor-pointer font-medium block mb-1',
+        required && `after:content-['*'] after:ml-0.5 after:text-red-500`,
+      ]"
+    >
+      {{ label }}
+    </label>
     <vSelect
       v-model="selected"
       :filter="isFussySeach ? fuseSearch : undefined"
@@ -18,7 +27,14 @@
       :loading="loading"
       :disabled="disabled"
       :selectable="selectedLimit"
-      :class="[ isUseCustomSelect ? 'customselect' : 'rounded-2xl border border-gray-200 focus-within:border-purple-600 focus-within:ring-inset focus-within:ring-1 focus-within:ring-purple-600 z-10 focus-within:rounded', disabled ? 'opacity-25' : '', 'group relative min-h-14 w-full bg-white cursor-pointer overflow-hidden' ]"
+      :class="[
+        isUseCustomSelect
+          ? 'customselect'
+          : 'border border-gray-200 focus-within:border-purple-600 focus-within:ring-inset focus-within:ring-1 focus-within:ring-purple-600 z-10 focus-within:rounded',
+        inputFilled ? 'rounded-2xl min-h-14' : 'rounded-md min-h-10',
+        'group relative w-full bg-white cursor-pointer overflow-hidden',
+        { 'opacity-25': disabled },
+      ]"
       :clearable="isUseCustomSelect ? clearable : undefined"
       :no-drop="nodropDown"
       @search="search($event)"
@@ -26,18 +42,18 @@
       @option:deselected="deselected($event)"
       @option:created="handleOptionCreate"
     >
-      <template #header>
+      <template v-if="inputFilled" #header>
         <div
           :class="[
             inputValue
               ? 'top-3.5 text-xs text-gray-400 cursor-default max-w-max'
-              : 'top-1/2 text-sm text-gray-700 cursor-pointer h-14 pt-5 pb-4 bg-transparent ring-0 ring-gray-200 group-hover:top-3.5 group-hover:py-0 group-hover:h-auto bg-white group-hover:text-xs group-hover:min-w-max w-11/12 group-hover:-translate-y-1/2 group-hover:text-gray-400',
+              : 'top-1/2 text-sm text-gray-700 cursor-pointer h-14 pt-5 pb-4 bg-transparent ring-0 ring-gray-200 group-hover:top-3.5 group-hover:py-0 group-hover:h-auto bg-white group-hover:text-xs group-hover:w-max w-11/12 group-hover:-translate-y-1/2 group-hover:text-gray-400',
             disabled ? ' cursor-not-allowed' : '',
             required && `after:content-['*'] after:ml-0.5 after:text-red-500`,
           ]"
           class="absolute text-left font-medium inset-x-0 px-4 z-10 -translate-y-1/2 duration-200 group-focus-within:top-3.5 group-focus-within:text-xs group-focus-within:text-gray-400 rounded-2xl group-focus-within:bg-transparent group-focus-within:-translate-y-1/2 group-focus-within:ring-transparent group-focus-within:h-auto group-focus-within:py-0 capitalize leading-[normal]"
         >
-          {{ startCaseText(label) }}
+          {{ startCaseText(label) || "Select" }}
         </div>
       </template>
       <template #selected-option="{ name: nameText, iconlink }">
@@ -90,6 +106,11 @@
           </button>
         </div>
       </template>
+      <template #open-indicator="{ attributes }">
+        <span v-bind="attributes as Record<string, any>"
+          ><ChevronBigDown class="text-current size-6"
+        /></span>
+      </template>
     </vSelect>
     <EUIErrorMessage :errors="errors" :name="name" class="mt-2" />
   </div>
@@ -111,8 +132,8 @@ import {
   toRefs,
   watch,
 } from "vue";
-import "./EUISelect.scss";
 import { ValidationErrors } from "../../utils/types";
+import ChevronBigDown from "../../assets/svg/ChevronBigDown.vue";
 
 type VirtualElement = {
   getBoundingClientRect: () => ClientRect | DOMRect;
@@ -146,7 +167,7 @@ const props = defineProps({
     default: "",
     required: false,
   },
-  customOffset:{
+  customOffset: {
     type: Array as PropType<any>,
     required: false,
   },
@@ -170,7 +191,7 @@ const props = defineProps({
   },
   label: {
     type: String,
-    default: "Select an option...",
+    default: "",
     required: false,
   },
   searchLabel: {
@@ -198,10 +219,10 @@ const props = defineProps({
     required: false,
     default: false,
   },
-  multipleLimit:{
+  multipleLimit: {
     type: Number,
     required: false,
-    default: false
+    default: false,
   },
   disabled: {
     type: Boolean as PropType<boolean>,
@@ -252,6 +273,10 @@ const props = defineProps({
     required: false,
     default: true,
   },
+  inputFilled: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const {
@@ -302,7 +327,7 @@ const deselected = (newValue: any) => {
   }
 };
 
-watch(modelValue, (newValue:any) => {
+watch(modelValue, (newValue: any) => {
   selected.value = newValue;
 });
 
@@ -311,8 +336,8 @@ const search = (x: string) => {
   emit("search", x);
 };
 
-const selectWidth = computed(() => props.customWidth)
-const offsetValue = computed(() => props.customOffset)
+const selectWidth = computed(() => props.customWidth);
+const offsetValue = computed(() => props.customOffset);
 
 const withPopper = (
   dropdownList: HTMLElement,
@@ -320,10 +345,10 @@ const withPopper = (
   { width }: any
 ) => {
   const newwidth = selectWidth.value || width; //setcustom width '400px'
-  const newOffset = offsetValue.value || [0,3]; //setcustom Offset '[123, -1]'
+  const newOffset = offsetValue.value || [0, 7]; //setcustom Offset '[123, -1]'
   const customWidth = isUseCustomSelect.value ? newwidth : width;
   dropdownList.style.width = customWidth;
-  const offsetValues = isUseCustomSelect.value ? newOffset : [0, 3];
+  const offsetValues = isUseCustomSelect.value ? newOffset : [0, 7];
   const popper = createPopper(component.$refs.toggle, dropdownList, {
     placement: "bottom",
     modifiers: [
@@ -360,7 +385,13 @@ onBeforeUnmount(() => {
 
 const slectedChipbg = computed(() => (props.multiple ? "#f3e8ff" : ""));
 const slectedChiptextColor = computed(() => (props.multiple ? "#7e22ce" : ""));
-const slectedChipHeight = computed(() => (props.multiple ? "fit-content" : ""));
+const slectedChipHeight = computed(() =>
+  props.multiple && props.inputFilled
+    ? "fit-content"
+    : props.inputFilled
+    ? ""
+    : "auto"
+);
 
 const dropDownIcon = computed(() => (props.clearable ? "flex" : "none"));
 
@@ -372,17 +403,17 @@ const selectBG = computed(() => {
 });
 const selectHeight = computed(() => {
   if (selected.value?.length === 0 || _.isEmpty(selected.value)) {
-    return "54px";
+    return props.inputFilled ? "54px" : "36px";
   }
 
   let heightValue;
 
   if (props.multiple) {
-    heightValue = "32px";
+    heightValue = props.inputFilled ? "32px" : "0px";
   } else if (isUseCustomSelect.value) {
     heightValue = "fit-content";
   } else {
-    heightValue = "54px";
+    heightValue = props.inputFilled ? "40px" : "30px";
   }
 
   return heightValue;
@@ -396,15 +427,28 @@ const selectedMultiple = computed(() => {
   let heightValue;
 
   if (isUseCustomSelect.value || props.multiple) {
-    heightValue = "24px";
+    heightValue = props.inputFilled ? "24px" : "4px";
   } else {
-    heightValue = "2px";
+    heightValue = props.inputFilled ? "12px" : "2px";
   }
 
   return heightValue;
 });
 
-const selectFocus = computed(() => (props.multiple ? "8px" : "8px"));
+const selectFocus = computed(() =>
+  props.multiple && props.inputFilled
+    ? "8px"
+    : props.inputFilled
+    ? "8px"
+    : "0px"
+);
+const searchMargin = computed(() =>
+  props.multiple && props.inputFilled
+    ? "10px"
+    : props.inputFilled
+    ? "10px"
+    : "0px"
+);
 
 const selectRequited = computed(() =>
   props.required
@@ -435,7 +479,8 @@ const inputValue = computed(() => {
   const selectedValue = selected.value;
   if (modelValue) return true;
   if (Array.isArray(selectedValue)) return !!selectedValue.length;
-  if (selectedValue && typeof selectedValue === 'object') return !!Object.keys(selectedValue).length;
+  if (selectedValue && typeof selectedValue === "object")
+    return !!Object.keys(selectedValue).length;
   return !!selectedValue;
 });
 
@@ -444,17 +489,18 @@ const handleOptionCreate = (e: any) => {
 };
 
 const isSelectable = computed(() => {
-  return !props.multipleLimit || (selected.value?.length ?? 0) < props.multipleLimit;
+  return (
+    !props.multipleLimit || (selected.value?.length ?? 0) < props.multipleLimit
+  );
 });
 
-const selectedLimit = () =>  {
-  if(!props.multipleLimit) return true
+const selectedLimit = () => {
+  if (!props.multipleLimit) return true;
 
-  if(props.multipleLimit) {
-    return isSelectable.value
+  if (props.multipleLimit) {
+    return isSelectable.value;
   }
-}
-
+};
 
 // const handlers = (e: Event) => {
 //   console.log("@e", e);
@@ -492,9 +538,6 @@ const selectedLimit = () =>  {
   }
 }
 
-.vs__search:focus {
-  padding-top: v-bind(selectFocus);
-}
 .vs--single.vs--open .vs__selected,
 .vs--single.vs--loading .vs__selected {
   @apply opacity-0;
@@ -551,9 +594,11 @@ const selectedLimit = () =>  {
 
 .vs {
   &__search {
-    @apply placeholder-gray-500 placeholder:text-sm placeholder:font-medium placeholder:leading-loose;
+    @apply px-2 placeholder:text-sm placeholder:font-medium placeholder:leading-loose appearance-none;
+    margin-top: v-bind(searchMargin);
     &:focus {
-      @apply text-sm font-medium;
+      @apply text-sm font-medium pl-2.5;
+      padding-top: v-bind(selectFocus);
     }
   }
   &__selected {

package/src/components/table/EUIDashboardTable.vue

@@ -22,12 +22,12 @@
                 </th>
               </template>
               <th
-                 v-for="(header, headerIndex) in headers"
+                v-for="(header, headerIndex) in headers"
                 :key="`item-${headerIndex}`"
                 scope="col"
                 :class="[
                   'px-3 py-2 text-gray-600 snap-start snap-always',
-                   isScrolled && headerIndex === 0 ? stickyClass.head : '',
+                  isScrolled && headerIndex === 0 ? stickyClass.head : '',
                   { 'cursor-pointer hover:text-gray-900': header?.sortable },
                 ]"
                 :style="
@@ -41,7 +41,7 @@
                   class="flex items-center gap-2 text-sm font-normal text-current"
                 >
                   <slot name="header" :header="header">
-                    {{ capitalizeText(header?.text ?? header.name ?? '') }}
+                    {{ capitalizeText(header?.text ?? header.name ?? "") }}
                   </slot>
                   <slot name="headerOptionalItem"></slot>
                   <SortArrow
@@ -59,27 +59,47 @@
             </tr>
           </thead>
           <tbody>
+            <template v-if="loading">
+              <tr class="norecords">
+                <td :colspan="headers.length">
+                  <div
+                    class="flex items-center justify-center text-xl font-medium text-gray-500 min-h-96"
+                  >
+                    <EUICircleLoader />
+                  </div>
+                </td>
+              </tr>
+            </template>
             <template
+              v-else-if="computedItems.length > 0"
               v-for="(row, rowIndex) in computedItems"
               :key="`table-row-${rowIndex}`"
             >
               <tr
-                @mouseenter="$attrs.mouseenter ? $emit('mouseenter', row, rowIndex) : null"
-                @mouseleave="$attrs.mouseleave ? $emit('mouseleave', row, rowIndex) : null"
+                @mouseenter="
+                  $attrs.mouseenter ? $emit('mouseenter', row, rowIndex) : null
+                "
+                @mouseleave="
+                  $attrs.mouseleave ? $emit('mouseleave', row, rowIndex) : null
+                "
               >
                 <template v-if="checkable">
                   <td class="checkable">
                     <EUITableCheckbox
                       :disabled="!isRowCheckable(row)"
                       :checked="isRowChecked(row)"
-                      @change.prevent.stop="($event) => checkRow(row, rowIndex, $event)"
+                      @change.prevent.stop="
+                        ($event) => checkRow(row, rowIndex, $event)
+                      "
                     />
                   </td>
                 </template>
-                 <td
+                <td
                   v-for="(header, headerIndex) in headers"
                   :key="headerIndex"
-                  :class="[isScrolled && headerIndex === 0 ? stickyClass.body : '']"
+                  :class="[
+                    isScrolled && headerIndex === 0 ? stickyClass.body : '',
+                  ]"
                 >
                   <slot
                     :name="`item.${header.value}`"
@@ -94,17 +114,18 @@
                 <slot name="expanded" :row="row" :rowIndex="rowIndex"></slot>
               </template>
             </template>
-          </tbody>
-          <tbody v-if="computedItems.length === 0">
-            <tr>
-              <td :colspan="headers.length">
-                <div
-                  class="flex items-center justify-center text-xl font-medium text-gray-500 min-h-96"
-                >
-                  No matching records found
-                </div>
-              </td>
-            </tr>
+
+            <template v-if="computedItems.length === 0">
+              <tr class="norecords">
+                <td :colspan="headers.length">
+                  <div
+                    class="flex items-center justify-center text-xl font-medium text-gray-500 min-h-96"
+                  >
+                    No matching records found
+                  </div>
+                </td>
+              </tr>
+            </template>
           </tbody>
         </table>
       </div>
@@ -144,12 +165,21 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, onUnmounted, PropType, ref, toRefs, watch } from "vue";
+import {
+  computed,
+  onMounted,
+  onUnmounted,
+  PropType,
+  ref,
+  toRefs,
+  watch,
+} from "vue";
 import EUIPagination from "./EUIPagination.vue";
 import EUITableCheckbox from "./EUITableCheckbox.vue";
 import SortArrow from "../../assets/svg/SortArrow.vue";
 import EUIPageLimit from "./EUIPageLimit.vue";
 import { capitalizeText } from "../../utils/lodash";
+import EUICircleLoader from "../loader/EUICircleLoader.vue";
 
 interface Header {
   value: string;
@@ -169,7 +199,11 @@ const props = defineProps({
   tableExpanded: { type: Boolean, default: false },
   backendPagination: { type: Boolean, default: false },
   checkedRows: { type: Array, default: () => ({}), required: true },
-  headers: { type: Array as PropType<Header[]>, default: () => ({}), required: true },
+  headers: {
+    type: Array as PropType<Header[]>,
+    default: () => ({}),
+    required: true,
+  },
   items: { type: Array, required: true, default: () => ({}) },
   defaultSort: { type: String, default: "" },
   defaultSortDirection: { type: String, default: "asc" },
@@ -182,6 +216,7 @@ const props = defineProps({
     default: () => () => false,
   },
   isRowCheckable: { type: Function, default: () => true },
+  tableLoading: { type: Boolean, default: true },
 });
 const {
   defaultSort,
@@ -206,6 +241,8 @@ const lastCheckedRowIndex = ref();
 
 const limit = ref(props.perPage);
 
+const loading = computed(() => props.tableLoading);
+
 // Computed Property
 const filteredItems = computed(() => {
   let filteredItems = items.value.slice();
@@ -227,18 +264,13 @@ const filteredItems = computed(() => {
 const computedItems = computed(() => {
   let items = filteredItems.value;
   // Sort items before slicing for pagination
-  items.sort((a:any, b:any) => {
+  items.sort((a: any, b: any) => {
     const modifier = currentSortDir.value === "desc" ? -1 : 1;
     if (a[currentSort.value] < b[currentSort.value]) return -1 * modifier;
     if (a[currentSort.value] > b[currentSort.value]) return 1 * modifier;
     return 0;
   });
-  return items
-
-  // Apply pagination
-  // const start = (newCurrentPage.value - 0) * limit.value;
-  // const end = start + limit.value;
-  // return items.slice(start, end);
+  return items;
 });
 
 const searchData = (data: number) => {
@@ -281,7 +313,7 @@ const isAllUncheckable = computed(() => {
 });
 
 // methods
-const defaultFilter = (value:any, search:any) => {
+const defaultFilter = (value: any, search: any) => {
   return value.toString().toLowerCase().includes(search);
 };
 
@@ -289,7 +321,7 @@ const indexOf = (
   array: any[],
   obj: any,
   fn: (item: any, obj: any) => boolean
-): number =>  {
+): number => {
   if (!array) return -1;
   if (!fn || typeof fn !== "function") return array?.indexOf(obj);
   for (let i = 0; i < array.length; i++) {
@@ -318,7 +350,7 @@ const emit = defineEmits([
   "update:checkedRows",
   "changeLimit",
   "mouseenter",
-  "mouseleave"
+  "mouseleave",
 ]);
 
 const changeLimit = (limitData: number) => {
@@ -354,20 +386,20 @@ const checkAll = () => {
   emit("update:checkedRows", newCheckedRows.value);
 };
 
-const removeCheckedRow = (row:any) => {
+const removeCheckedRow = (row: any) => {
   const index = indexOf(newCheckedRows.value, row, customIsChecked.value);
   if (index >= 0) {
     newCheckedRows.value.splice(index, 1);
   }
 };
 
-const isRowChecked = (row:any) => {
+const isRowChecked = (row: any) => {
   return indexOf(newCheckedRows.value, row, customIsChecked.value) >= 0;
 };
 
 const checkRow = (row: any, rowIndex: number, event: Event) => {
   if (!isRowCheckable.value(row)) return;
-  if(event) {
+  if (event) {
     lastCheckedRowIndex.value = rowIndex;
     if (!isRowChecked(row)) {
       newCheckedRows.value.push(row);
@@ -457,8 +489,8 @@ watch(() => tableContainer.value?.clientWidth, checkOverflow);
       }
     }
     tbody {
-     @apply snap-y snap-mandatory snap-always;
-      tr {
+      @apply snap-y snap-mandatory snap-always;
+      tr:not(.norecords) {
         @apply text-gray-500 transition-all duration-150 rounded-xl bg-white snap-start ease-in-out snap-x snap-mandatory;
         &:hover {
           @apply shadow-[1px_2px_40px_0px_#03022912] ring-1 ring-gray-100 ring-inset z-30;

package/src/components/table/EUITable.vue

@@ -125,7 +125,7 @@
             </template>
           </tbody>
           <tbody v-if="computedItems.length === 0">
-            <tr>
+            <tr class="norecords">
               <td :colspan="checkable === true ? headers.length + 1 : headers.length">
                 <div
                   class="flex items-center justify-center text-xl font-medium text-gray-500 min-h-96"
@@ -484,7 +484,7 @@ watch(() => tableContainer.value?.clientWidth, checkOverflow);
 
     tbody {
       @apply snap-y snap-mandatory snap-always;
-      tr {
+        tr:not(.norecords)  {
         @apply text-gray-600 transition-colors duration-100 bg-white snap-start ease-in-out snap-x snap-mandatory rounded-sm h-12;
         &:hover {
           @apply bg-purple-50 ring-1 ring-purple-100 ring-inset;