edvoyui-component-library-test-flight 0.0.144 → 0.0.146

package/package.json

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

package/src/components/HelloWorld.vue

@@ -7,8 +7,7 @@
     </h1>
   </div>
 </template>
-<script setup lang="ts">
-</script>
+<script setup lang="ts"></script>
 <style lang="scss"></style>
 
 <!-- Development code here  -->
@@ -18,6 +17,41 @@
   <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>
 
+     <pre class="p-2 text-red-500 text-xxs">
+      {{ popoverSelect }}
+      {{ businessAreaSel }}
+    </pre>
+    <div class="grid max-w-2xl grid-cols-2 gap-6 mx-auto">
+              <EUISelect
+                v-model="businessAreaSel"
+                :value="businessAreaSel"
+                :items="businessArea"
+                search-label="name"
+                label="Select Label"
+                placeholder="Placeholder"
+                :multiple="true"
+                :isCheckbox="true"
+                :selectedCount="true"
+                selectedCountLabel="Business Area"
+                :inputFilled="true"
+                :searchable="true"
+              />
+
+              <EUISelect
+                v-model="popoverSelect"
+                :value="popoverSelect"
+                :items="datas"
+                search-label="name"
+                label="Select Label"
+                placeholder="Placeholder"
+                :searchable="true"
+                :multiple="true"
+                :isCheckbox="true"
+                :selectedCount="true"
+                :inputFilled="true"
+              />
+    </div>
+
 
   <div class="grid w-full h-48 grid-cols-4 gap-4 mb-20 isolate">
     <div
@@ -1425,6 +1459,15 @@ import EUITabOutline from "./tabs/EUITabOutline.vue";
 import EUIPopover from "./popover/EUIPopover.vue";
 
 const checkboxData = ref([])
+const businessAreaSel = ref()
+const popoverSelect = ref([]);
+
+const businessArea = ref([
+  "All",
+  "B2B",
+  "B2C",
+  "Accelerator"
+])
 
 // TODO: Popover
 const isLoading = ref(false);

package/src/components/select/EUISelect.vue

@@ -254,7 +254,8 @@ const startCaseText = (x: string) => {
   return startCase(x);
 };
 
-const selected = ref<any[] | null>([]);
+const selected = ref<string | string[] | Record<string, any> | Record<string, any>[] | null>(null)
+
 const nodropDown = ref(false);
 const props = defineProps({
   clearable: {
@@ -433,14 +434,21 @@ const isCheckedAll =(e: Event) => {
 };
 
 const isChecked = (item: any) => {
-  const sel = selected.value
+  const sel = selected.value;
+  const itemValue = item?.[fieldName.value];
   if (Array.isArray(sel)) {
-    return sel.some((s:any) => s?.value === item.value)
+    return sel.some((s: any) => {
+      if(s && typeof s === 'string'){
+         return s === itemValue
+      } else {
+        return s?.[fieldName.value] === itemValue
+      }
+    });
   }
   if (sel && typeof sel === 'object') {
-    return (sel as any).value === item.value;
+    return sel?.[fieldName.value] === itemValue;
   }
-  return false
+  return false;
 }
 
 const clearAll = (e:Event) => {
@@ -451,20 +459,31 @@ const clearAll = (e:Event) => {
 }
 
 const onCheckBoxChange = (item: any, event: Event) => {
-  const target = event.target as HTMLInputElement
+  const target = event.target as HTMLInputElement;
 
   if (!Array.isArray(selected.value)) {
-    selected.value = []
+    selected.value = [];
   }
 
+  const current = selected.value as any[];
+
   if (target.checked) {
-    if (!selected.value?.some(s => s?.value === item?.value)) {
-      selected.value?.push(item)
+    const exists = current.some((s) => {
+      if (typeof s === 'string') return s === item[fieldName.value];
+      return s?.[fieldName.value] === item[fieldName.value];
+    });
+
+    if (!exists) {
+      current.push(item);
     }
   } else {
-    selected.value = selected.value?.filter(s => s?.value !== item?.value)
+    selected.value = current.filter((s) => {
+      if (typeof s === 'string') return s !== item[fieldName.value];
+      return s?.[fieldName.value] !== item[fieldName.value];
+    });
   }
-}
+};
+
 
 const selectAll = (e: Event) => {
   if (e.target) {
@@ -685,7 +704,9 @@ const open = () => {
 </script>
 <style lang="scss">
 :root {
-  --vs-dropdown-color: theme('colors.gray.600')
+  --vs-dropdown-color: theme('colors.gray.600');
+  --vs-dropdown-option--active-color: theme('colors.white');
+  --vs-disabled-bg: theme('colors.white');
 }
 .scrollbar {
   &--hide {