edvoyui-component-library-test-flight 0.0.141 → 0.0.143

package/dist/tabs/EUITabs.vue.d.ts

@@ -1,5 +1,5 @@
 export * from "/Volumes/work/repos/edvoy-ui-v2/src/components/tabs/EUITabs.vue?vue&type=script&setup=true&lang.ts";
-import "/Volumes/work/repos/edvoy-ui-v2/src/components/tabs/EUITabs.vue?vue&type=style&index=0&scoped=5c1fa5b2&lang.css";
+import "/Volumes/work/repos/edvoy-ui-v2/src/components/tabs/EUITabs.vue?vue&type=style&index=0&scoped=4e9b0366&lang.css";
 declare const _default: any;
 export default _default;
 //# sourceMappingURL=EUITabs.vue.d.ts.map

package/dist/tooltip/EUITooltip.vue.d.ts

@@ -1,5 +1,5 @@
 export * from "/Volumes/work/repos/edvoy-ui-v2/src/components/tooltip/EUITooltip.vue?vue&type=script&setup=true&lang.ts";
-import "/Volumes/work/repos/edvoy-ui-v2/src/components/tooltip/EUITooltip.vue?vue&type=style&index=0&scoped=45d5b869&lang.scss";
+import "/Volumes/work/repos/edvoy-ui-v2/src/components/tooltip/EUITooltip.vue?vue&type=style&index=0&scoped=1916fad7&lang.scss";
 declare const _default: any;
 export default _default;
 //# sourceMappingURL=EUITooltip.vue.d.ts.map

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "edvoyui-component-library-test-flight",
   "private": false,
-  "version": "0.0.141",
+  "version": "0.0.143",
   "type": "module",
   "files": [
     "dist/",

package/src/components/HelloWorld.vue

@@ -13,7 +13,8 @@
 
 <!-- Development code here  -->
 
-<!-- <template>
+<!--
+<template>
   <div class="h-[clac(100svh-64px)] w-full px-10 py-8 max-w-screen-xl mx-auto">
     <h1 class="mb-2 font-semibold text-gray-900 tetx-lg">Edvoy UI Componnet</h1>
 
@@ -639,8 +640,18 @@
         >
       <code>&lt;EUISelect label="Firstname" placeholder="Enter your name" :items="datas" /&gt;</code>
     </pre>
-
         <div class="grid grid-cols-3 gap-4">
+          <EUISelect
+            v-model="checkboxData"
+            search-label="name"
+            placeholder="Placeholder"
+            :items="datas"
+            :selected-count="true"
+            selectedCountLabel="Checkbox"
+            :multiple="true"
+            :is-checkbox="true"
+          />
+
           <EUISelect
             search-label="name"
             label="Select Label"
@@ -1413,6 +1424,8 @@ import EUISearchExpand from "./searchexpand/EUISearchExpand.vue";
 import EUITabOutline from "./tabs/EUITabOutline.vue";
 import EUIPopover from "./popover/EUIPopover.vue";
 
+const checkboxData = ref([])
+
 // TODO: Popover
 const isLoading = ref(false);
 const popoverVisible = ref(false);
@@ -1551,25 +1564,55 @@ const handleActiveItem = (activeItems: number) => {
 //TODO: Select Data
 const datas = ref([
   {
+    value:'ShawnBurke',
     name: "Shawn Burke",
     age: 6,
   },
   {
+    value: 'EmeryNolan',
     name: "Emery Nolan",
     age: 4,
   },
   {
+    value: 'EmbryGrant',
     name: "Embry Grant",
     age: 3,
   },
   {
+    value: 'JesseAustin',
     name: "Jesse Austin",
     age: 9,
   },
   {
+    value: 'TandyChristensen',
     name: "Tandy Christensen",
     age: 7,
   },
+  {
+    value:'ShawnBurkeNew',
+    name: "Shawn Burke New",
+    age: 6,
+  },
+  {
+    value: 'EmeryNolanNew',
+    name: "Emery Nolan New",
+    age: 4,
+  },
+  {
+    value: 'EmbryGrantNew',
+    name: "Embry Grant New",
+    age: 3,
+  },
+  {
+    value: 'JesseAustinNew',
+    name: "Jesse Austin New",
+    age: 9,
+  },
+  {
+    value: 'TandyChristensenNew',
+    name: "Tandy Christensen New",
+    age: 7,
+  },
 ]);
 //TODO: Timeline
 
@@ -1741,4 +1784,4 @@ const accordionData = ref([
 ]);
 </script>
 
-<style lang="scss" scoped></style>-->
+<style lang="scss" scoped></style>  -->

package/src/components/input/EUIInput.vue

@@ -93,7 +93,9 @@
         @blur="hasFocus = false"
       />
     </div>
-    <EUIErrorMessage :errors="errors" :name="name" />
+    <template v-if="errors && errors.length">
+      <EUIErrorMessage :errors="errors" :name="name" />
+    </template>
   </div>
 </template>
 

package/src/components/select/EUISelect.vue

@@ -39,6 +39,7 @@
       ]"
       :clearable="clearable"
       :no-drop="nodropDown"
+      :components="customComponents"
       @search="search($event)"
       @option:selected="change($event)"
       @option:deselected="deselected($event)"
@@ -65,6 +66,14 @@
         </div>
       </template>
 
+      <!-- option, deselect, multiple, disabled  -->
+       <template
+          v-if="selectedCount && multiple"
+          #selected-option-container="{}"
+        >
+          <div class="vs__selected_count">{{ selectedCountLabel }} <span>{{ selected?.length }}</span></div>
+        </template>
+
 
       <!-- Allow parent to override selected-option slot -->
       <template v-if="$slots['selected-option']" #selected-option="slotProps">
@@ -100,14 +109,23 @@
         <slot name="option" v-bind="option  as Record<string, any>"></slot> <!-- Passing the 'option' data -->
       </template>
       <template v-else #option="item">
-        <div class="flex items-center">
+        <div class="flex items-center gap-2">
           <img
             v-if="(item as any).iconlink"
-            class="w-6 mr-2"
+            class="flex-shrink-0 size-6"
             :src="(item as any).iconlink"
             :alt="item[fieldName]"
           />
 
+          <span v-if="isCheckbox" class="flex-shrink-0">
+            <input
+              :id="`checkbox-${item[fieldName]}`"
+              type="checkbox"
+              :checked="isChecked(item)"
+              class="selectall__input"
+              @change="(e) => onCheckBoxChange(item, e)"
+            >
+          </span>
           {{
             isStartCaseText ? startCaseText(item[fieldName]) : item[fieldName]
           }}
@@ -131,15 +149,41 @@
         <slot name="list-header"></slot>
       </template>
 
-      <template v-else-if="isSelectAll" #list-header>
-        <div v-if="items.length !== selected?.length">
+      <template v-else-if="isSelectAll || isCheckbox" #list-header>
+        <div v-if="isCheckbox" class="flex flex-row items-center justify-between gap-2 px-3 py-2 border-b border-gray-200 border-solid">
+            <h3 class="text-sm font-semibold text-black">
+              All values
+            </h3>
+
+            <div class="flex items-center gap-1 whitespace-nowrap">
+              <button
+                class="w-full px-2 py-1 text-xs font-medium transition duration-75 text-start"
+                :class="[items?.length !== selected?.length ? 'text-gray-600 hover:text-gray-900': 'pointer-events-none opacity-50 cursor-default text-gray-400']"
+                :disabled="items?.length === selected?.length"
+                @click.prevent="isCheckedAll"
+              >
+                Select All
+              </button>
+              <button
+                class="w-full px-2 py-1 text-xs font-medium transition duration-75 text-start"
+                :class="[(selected?.length ?? 0) > 0 ? 'text-gray-600 hover:text-gray-900': 'pointer-events-none opacity-50 cursor-default text-gray-400']"
+                :disabled="(selected?.length ?? 0) === 0"
+                @click.prevent="clearAll"
+              >
+                Clear all
+              </button>
+            </div>
+        </div>
+
+        <template v-else>
           <button
+            v-if="items.length !== selected?.length"
             class="w-full px-6 py-2 text-sm font-medium text-gray-600 transition duration-75 hover:font-bold hover:text-gray-900 text-start"
             @click.prevent="selectAll"
           >
             Select All
           </button>
-        </div>
+        </template>
       </template>
 
       <!-- Allow parent to override open-indicator slot -->
@@ -148,12 +192,15 @@
       </template>
 
       <template v-else #open-indicator="{ attributes }">
-        <span v-bind="attributes as Record<string, any>"
-          ><ChevronBigDown class="text-current size-6"
-        /></span>
+        <span v-bind="attributes as Record<string, any>">
+          <ChevronDownSolid class="text-current size-6" />
+        </span>
       </template>
     </vSelect>
-    <EUIErrorMessage :errors="errors" :name="name" class="mt-2" />
+
+    <template v-if="errors && errors.length">
+      <EUIErrorMessage :errors="errors" :name="name" class="mt-2" />
+    </template>
   </div>
 </template>
 
@@ -172,9 +219,25 @@ import {
   ref,
   toRefs,
   watch,
+  h
 } from "vue";
 import { ValidationErrors } from "../../utils/types";
-import ChevronBigDown from "../../assets/svg/ChevronBigDown.vue";
+import { XMarkIcon } from "@heroicons/vue/20/solid";
+import ChevronDownSolid from "../../assets/svg/ChevronDownStroke.vue";
+
+
+const customComponents = {
+  Deselect: {
+    render () {
+      return h(XMarkIcon, { class: 'w-4 h-4 text-current' })
+    }
+  },
+  OpenIndicator: {
+    render () {
+      return h(ChevronDownSolid, { class: 'w-6 h-6 text-gray-800' })
+    }
+  }
+}
 
 type VirtualElement = {
   getBoundingClientRect: () => ClientRect | DOMRect;
@@ -191,7 +254,7 @@ const startCaseText = (x: string) => {
   return startCase(x);
 };
 
-const selected = ref<any>([]);
+const selected = ref<any[] | null>([]);
 const nodropDown = ref(false);
 const props = defineProps({
   clearable: {
@@ -263,12 +326,11 @@ const props = defineProps({
   multiple: {
     type: Boolean,
     required: false,
-    default: false,
+    default: true,
   },
   multipleLimit: {
     type: Number,
     required: false,
-    default: false,
   },
   disabled: {
     type: Boolean as PropType<boolean>,
@@ -297,7 +359,6 @@ const props = defineProps({
   },
   isSelectAll: {
     type: Boolean,
-    required: false,
     default: false,
   },
   taggable: {
@@ -327,6 +388,18 @@ const props = defineProps({
     type: String,
     default: "name",
   },
+  selectedCount: {
+    type: Boolean,
+    default: false
+  },
+  selectedCountLabel: {
+    type: String,
+    default: "Selected",
+  },
+  isCheckbox: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const {
@@ -353,6 +426,46 @@ const emit = defineEmits([
   "open",
 ]);
 
+const isCheckedAll =(e: Event) => {
+  if (e.target) {
+    selected.value = [...props.items]
+  }
+};
+
+const isChecked = (item: any) => {
+  const sel = selected.value
+  if (Array.isArray(sel)) {
+    return sel.some((s:any) => s?.value === item.value)
+  }
+  if (sel && typeof sel === 'object') {
+    return (sel as any).value === item.value;
+  }
+  return false
+}
+
+const clearAll = (e:Event) => {
+  if (e.target) {
+    selected.value = []
+    nodropDown.value = false;
+  }
+}
+
+const onCheckBoxChange = (item: any, event: Event) => {
+  const target = event.target as HTMLInputElement
+
+  if (!Array.isArray(selected.value)) {
+    selected.value = []
+  }
+
+  if (target.checked) {
+    if (!selected.value?.some(s => s?.value === item?.value)) {
+      selected.value?.push(item)
+    }
+  } else {
+    selected.value = selected.value?.filter(s => s?.value !== item?.value)
+  }
+}
+
 const selectAll = (e: Event) => {
   if (e.target) {
     selected.value = [{ _id: "6565d869eb1b7cf8745d6beb", name: "All" }];
@@ -432,13 +545,23 @@ const fuseSearch = (
 };
 
 onMounted(() => {
-  selected.value = props.value;
+  if (Array.isArray(props.value)) {
+    selected.value = props.value;
+  } else if (props.value) {
+    selected.value = [props.value];
+  } else {
+    selected.value = [];
+  }
 });
 
 onBeforeUnmount(() => {
   selected.value = null;
 });
 
+onBeforeUnmount(() => {
+  selected.value = [];
+});
+
 const slectedChipbg = computed(() => (props.multiple ? "#f3e8ff" : ""));
 const slectedChiptextColor = computed(() => (props.multiple ? "#7e22ce" : ""));
 const slectedChipHeight = computed(() =>
@@ -479,9 +602,7 @@ const selectedMultiple = computed(() => {
   if (selected.value?.length === 0 || _.isEmpty(selected.value)) {
     return "0px";
   }
-
   let heightValue;
-
   if (isUseCustomSelect.value || props.multiple) {
     heightValue = props.inputFilled ? "24px" : "4px";
   } else {
@@ -629,6 +750,18 @@ const open = () => {
   @apply py-3 font-medium text-base;
 }
 
+.vs__actions {
+  .vs__clear {
+    @apply mr-0.5 scale-95 transform transition-all duration-300 ease-out text-gray-400;
+    &:hover {
+      @apply scale-125 text-red-600;
+    }
+  }
+  .vs__open-indicator {
+    fill: var(--vs-controls-color);
+  }
+}
+
 .vs__selected-options {
   @apply group-focus:bg-transparent focus-within:bg-transparent border-transparent;
   background-color: v-bind(selectBG);
@@ -638,10 +771,10 @@ const open = () => {
     background: v-bind(slectedChipbg) !important;
     color: v-bind(slectedChiptextColor) !important;
     height: v-bind(slectedChipHeight) !important;
-    @apply rounded-sm pl-2 text-sm font-medium bg-gray-200 border-transparent;
+    @apply rounded-md pl-2 text-sm font-medium bg-gray-200 border-transparent;
 
     button.vs__deselect {
-      @apply p-1;
+      @apply p-1 text-gray-400;
     }
     &:hover button.vs__deselect svg {
       @apply fill-current text-red-600;
@@ -652,6 +785,9 @@ const open = () => {
 .v-select.vs--multiple {
   .vs__selected-options {
     margin-top: v-bind(selectedMultiple);
+    .vs__selected {
+      @apply mt-px;
+    }
   }
 }
 
@@ -695,6 +831,13 @@ const open = () => {
   @apply appearance-none;
 }
 
+.v-select .vs__selected-options .vs__selected_count {
+  @apply text-gray-600 first:flex items-center justify-start gap-2 hidden text-sm font-medium leading-snug px-2 py-1;
+  span {
+    @apply flex items-center justify-center h-5 text-xs text-gray-800 bg-gray-200 rounded-3xl shrink-0 min-w-5;
+  }
+}
+
 .isUseCustomSelect {
   .v-select.customselect {
     .vs__search:focus {
@@ -787,4 +930,45 @@ const open = () => {
     -webkit-text-fill-color: transparent;
   }
 }
+
+.selectall__input {
+    @apply size-4 flex-shrink-0 border border-solid border-gray-200 bg-white appearance-none inline-block select-none cursor-pointer align-middle rounded relative before:content-[''] before:transform before:translate-x-1/2 before:-translate-y-1/2 before:z-[-1] before:absolute before:top-1/2 before:right-1/2 before:block before:size-9 before:rounded-full before:bg-violet-100 before:opacity-0 before:transition-opacity hover:before:opacity-75;
+    &::after {
+      @apply absolute hidden border-solid inset-0 -ml-px -mt-px size-4 scale-90;
+      content: "";
+      background-image: url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%2012.7132L10.0168%2017.7247L10.4177%2017.0238C12.5668%2013.2658%2015.541%2010.0448%2019.1161%207.60354L20%207%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E);
+      background-size: contain;
+      transition: all 0.2s ease;
+    }
+    &:hover {
+      @apply bg-violet-100 border-violet-500;
+    }
+    &:checked {
+      transition: all 0.3s ease;
+      transform: translate3d(0, 1, 0);
+      @apply bg-violet-700 border-violet-700;
+      &::after {
+        @apply block border-white;
+      }
+      &:focus {
+        @apply bg-violet-700;
+      }
+    }
+    &:focus {
+      @apply outline-none border border-violet-700 bg-violet-200;
+    }
+    &:disabled {
+      @apply bg-gray-300 border-gray-100 cursor-not-allowed;
+      & ~ span {
+        @apply cursor-not-allowed;
+      }
+      &:checked {
+        @apply bg-white border-white;
+        &::after {
+          @apply block border-gray-100;
+        }
+      }
+    }
+}
+
 </style>

package/src/components/table/UTable.vue

@@ -71,7 +71,8 @@
                 >
                   <div class="relative z-0 w-full">
                     <div
-                      class="w-full text-sm font-bold text-current truncate font-inter"
+                      class="w-full text-sm font-bold text-current font-inter"
+                      :class="{'truncate':!header?.showHeaderInfoText}"
                     >
                       <slot name="header" :header="header">
                         {{ capitalizeText(header?.text ?? header?.name ?? "") }}
@@ -80,6 +81,14 @@
                         v-if="headerOptional"
                         name="headerOptionalItem"
                       ></slot>
+                      <EUITooltip v-if="header?.showInfoText" placement="top" class="inline-block ms-0.5">
+                          <template v-slot:default>
+                            <InformationCircleIcon class="inline-block text-gray-500 size-4" />
+                          </template>
+                          <template v-slot:tooltip>
+                            <div class="z-50 max-w-xs break-words whitespace-normal min-w-max">{{ header?.showHeaderInfoText }}</div>
+                          </template>
+                        </EUITooltip>
                     </div>
                     <div
                       v-if="header?.sortable"
@@ -182,7 +191,7 @@
                             <InformationCircleIcon class="inline-block text-gray-500 size-4" />
                           </template>
                           <template v-slot:tooltip>
-                            <div class="z-50 max-w-xs break-words whitespace-normal min-w-max">{{ header.showInfoText }}</div>
+                            <div class="z-50 max-w-xs break-words whitespace-normal min-w-max">{{ header?.showInfoText }}</div>
                           </template>
                         </EUITooltip>
                       </span>
@@ -297,6 +306,7 @@ interface Header {
   width?: number;
   color?: string;
   showInfoText?: string;
+  showHeaderInfoText?: string;
 }
 
 interface Item {

package/src/components/tabs/EUITabs.vue

@@ -1,10 +1,8 @@
 <template>
   <div>
-  
-    <div class=" overflow-hidden overflow-x-scroll">
       <div
       v-if="tabStyle === 'design'"
-      class="inline-flex flex-row items-center justify-start px-[0.25rem] min-h-[34px] mb-0.5 bg-gray-100 rounded-[0.625rem] ring-1 ring-gray-200/75 gap-2"
+      class="inline-flex flex-row items-center justify-start px-[0.25rem] min-h-[34px] mb-0.5 bg-gray-100 rounded-[0.625rem] ring-1 ring-gray-200/75 gap-2 overflow-x-auto scrollbar--hide whitespace-nowrap max-w-full w-full"
     >
     <template v-for="(tab, tabindex) in tabs" :key="tabindex">
       <button
@@ -163,9 +161,6 @@
         </slot>
       </button>
     </div>
-    </div>
-
-  
     <slot name="content" :active-tab="tabs[activeTabIndex]">
       <div
         :class="[

package/src/components/tooltip/EUITooltip.vue

@@ -1,5 +1,5 @@
 <template>
-  <div ref="tooltipContainer" class="relative cursor-default size-max">
+  <div ref="tooltipContainer" class="relative cursor-default">
     <div @mouseover="showTooltip" @mouseleave="hideTooltip">
       <slot>
         <InformationCircleIcon class="text-current size-5" />

package/src/data/table.ts

@@ -573,8 +573,8 @@ export const studentHeader = [
     name: "Country of Residence",
     width: 250,
     sortable: true,
-        showInfoText: "This is helper text for First Name",
-
+    showInfoText: "This is helper text for First Name",
+    showHeaderInfoText: "This is helper text for Header",
   },
   {
     value: "nationality.name",