edvoyui-component-library-test-flight 0.0.145 → 0.0.147

package/package.json

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

package/src/components/select/EUISelect.vue

@@ -150,32 +150,32 @@
       </template>
 
       <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
+        <div v-if="isCheckbox && groupSelect" class="flex flex-row items-center justify-between gap-1 px-2 py-2 border-b border-gray-200 border-solid">
+            <h3 class="text-xs font-semibold text-black">
+             Options
             </h3>
 
-            <div class="flex items-center gap-1 whitespace-nowrap">
+            <div class="flex items-center gap-px 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']"
+                class="w-full p-1 font-medium transition duration-75 rounded text-xss text-start"
+                :class="[items?.length !== selected?.length ? 'text-gray-600 hover:bg-gray-50 hover:text-violet-600': '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']"
+                class="w-full p-1 font-medium transition duration-75 rounded text-xss text-start"
+                :class="[(selected?.length ?? 0) > 0 ? 'text-gray-600 hover:text-red-600 hover:bg-gray-50': 'pointer-events-none opacity-50 cursor-default text-gray-400']"
                 :disabled="(selected?.length ?? 0) === 0"
                 @click.prevent="clearAll"
               >
-                Clear all
+                Clear All
               </button>
             </div>
         </div>
 
-        <template v-else>
+        <template v-else-if="isSelectAll">
           <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"
@@ -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: {
@@ -400,6 +401,7 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  groupSelect: { type: Boolean, default: false }
 });
 
 const {
@@ -458,20 +460,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) {