edvoyui-component-library-test-flight 0.0.60 → 0.0.61

package/dist/searchexpand/EUISearchExpand.vue.d.ts

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

package/package.json

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

package/src/components/searchexpand/EUISearchExpand.vue

@@ -10,14 +10,14 @@
         <div class="relative max-w-80 z-[calc(infinity)]">
           <div
             :class="[
-              'relative flex items-center duration-300 ease-linear bg-gray-100 border border-gray-200 rounded-full pe-1 group-focus-within:ring-2 ring-purple-200 group-focus-within:border-gray-300 transition-all delay-100',
+              'relative flex items-center duration-300 ease-linear bg-gray-100 rounded-full pe-1 group-focus-within:ring-2 ring-purple-200 group-focus-within:border-gray-200 group-focus-within:border transition-all delay-75',
               isExpanded
                 ? 'group-focus-within:w-80 text-gray-300 h-10'
                 : 'size-10 text-gray-500',
             ]"
           >
             <SearchBigZoomIn
-              class="absolute text-current transition-colors size-6 top-2 left-2"
+              class="absolute text-current size-6 top-2 left-2"
             />
             <input
               v-if="isExpanded"

package/src/components/table/UCheckbox.vue

@@ -1,6 +1,5 @@
 <template>
   <label :class="classes">
-    <span class="text-[0.5rem] absolute z-20 top-0 text-gray-400">{{ selected }}</span>
     <input
       v-model="selected"
       data-test="checkbox-toggle"
@@ -100,31 +99,28 @@ export default {
 
 <style lang="scss">
 .ui-checkbox {
-  @apply inline-flex items-center mt-3 cursor-pointer;
+  @apply inline-flex items-center cursor-pointer;
   &__input {
-    @apply w-5 h-5 flex-shrink-0 border border-solid border-gray-50 bg-white appearance-none inline-block select-none cursor-pointer align-middle rounded relative;
+    @apply w-5 h-5 flex-shrink-0 border border-solid border-gray-200 bg-white appearance-none inline-block select-none cursor-pointer align-middle rounded relative;
     &::after {
-      @apply absolute hidden border-solid inset-x-0 top-0 m-auto;
+      @apply absolute hidden border-solid inset-x-0 top-0 m-auto w-1.5 h-2.5 bottom-0.5;
       content: "";
-      width: 6px;
-      height: 10px;
-      bottom: 2px;
       border-width: 0 3px 3px 0;
       -webkit-transform: rotate(45deg);
       -ms-transform: rotate(45deg);
       transform: rotate(45deg);
     }
     &:hover {
-      @apply bg-gray-300;
+      @apply bg-purple-100 border-purple-200;
     }
     &:checked {
-      @apply bg-white border-blue-600;
+      @apply bg-white border-purple-600;
       &::after {
-        @apply block border-blue-600;
+        @apply block border-purple-700;
       }
     }
     &:focus {
-      @apply outline-none border-2 border-blue-600 bg-gray-200;
+      @apply outline-none border-2 border-purple-700 bg-purple-100;
     }
     &:disabled {
       @apply bg-gray-300 border-gray-100 cursor-not-allowed;
@@ -134,7 +130,7 @@ export default {
       &:checked {
         @apply bg-white border-white;
         &::after {
-          @apply block border-gray-50;
+          @apply block border-gray-100;
         }
       }
     }
@@ -155,9 +151,9 @@ export default {
   }
   &--indeterminate & {
     &__input {
-      @apply border-blue-600;
+      @apply border-purple-700;
       &::after {
-        @apply block bg-blue-600 border-0 bottom-0 transform-none;
+        @apply block bg-purple-700 border-0 bottom-0 transform-none;
         width: 10px;
         height: 2px;
       }

package/src/components/table/UTable.vue

@@ -1,12 +1,12 @@
 <template>
-  <div class="max-w-screen-xl mx-auto border border-gray-100 border-solid h-[calc(100dvh-20rem)] overflow-hidden">
+  <div class="max-w-screen-xl mx-auto h-[calc(100dvh-20rem)] overflow-hidden">
     <div :class="tableClasses">
       <table class="table">
         <thead>
           <tr>
             <th
               v-if="checkable"
-              style="width: 45px; flex: 45 0 auto; max-width: 45px"
+              style="width: 45px; flex: 45 0 auto; max-width: 45px; background-color: rgb(243 244 246);"
             >
               <UCheckbox
                 :checked="isAllChecked"
@@ -39,7 +39,7 @@
           </tr>
         </thead>
         <tbody>
-          <tr v-for="(row, rowIndex) in computedItems" :key="rowIndex">
+          <tr v-for="(row, rowIndex) in computedItems" :key="rowIndex" class="group">
             <td v-if="checkable" style="width: 45px; flex: 45 0 auto; max-width: 45px">
               <UCheckbox
                 :disabled="!isRowCheckable(row)"
@@ -51,7 +51,7 @@
             <td
               v-for="(header, headerIndex) in headers"
               :key="headerIndex"
-              :style="headerStyle(header)"
+              :style="bodyStyle(header)"
             >
               <span class="ui-table__truncate">
                 <slot :name="`item.${header.value}`" :row="row" :rowIndex="rowIndex">
@@ -160,9 +160,16 @@ export default {
       width: `${header.width || 300}px`,
       flex: `${header.width || 300} 0 auto`,
       maxWidth: `${header.width || 300}px`,
-      backgroundColor: header.color || 'rgb(235 236 240)'
+      backgroundColor: header.color || 'rgb(243 244 246)'
     });
 
+    const bodyStyle = header => ({
+      width: `${header.width || 300}px`,
+      flex: `${header.width || 300} 0 auto`,
+      maxWidth: `${header.width || 300}px`,
+    });
+
+
     const pageChanged = page => {
       newCurrentPage.value = page;
       emit('update:currentPage', page);
@@ -257,6 +264,7 @@ export default {
       tableClasses,
       computedItems,
       headerStyle,
+      bodyStyle,
       pageChanged,
       checkRow,
       checkAll,
@@ -274,7 +282,7 @@ export default {
 
 <style lang="scss" scoped>
 .ui-table {
-  @apply overflow-auto bg-white bg-no-repeat border border-solid border-gray-50;
+  @apply overflow-auto bg-white bg-no-repeat;
   background-image: linear-gradient(to right, white, white),
     linear-gradient(to right, white, white),
     linear-gradient(to right, rgba(223, 231, 242, 1), rgba(255, 255, 255, 0)),
@@ -288,31 +296,22 @@ export default {
   background-attachment: local, local, scroll, scroll, local, scroll;
 
   .table {
-    @apply border-separate w-full;
+    @apply border-separate w-full border-0 border-spacing-0 border-gray-50 box-border;
     border-spacing: 0;
     thead {
       tr {
         @apply flex flex-grow;
         th {
-          @apply bg-gray-50 px-3 py-4 text-sm text-gray-600 text-left font-semibold uppercase border-r border-b border-solid border-gray-100 cursor-auto whitespace-nowrap flex items-center;
+          @apply bg-gray-50 px-3 py-4 text-sm text-gray-600 text-left font-semibold uppercase border border-l-0 border-solid border-neutral-200 cursor-auto whitespace-nowrap flex items-center last-of-type:rounded-tr-lg first-of-type:rounded-tl-lg first:border-l last:border-r;
           height: 45px;
           transition: all 0.15s ease-out;
-          &:hover {
-            @apply bg-blue-50;
-          }
-          &:first-child {
-            border-left-width: 0;
-          }
-          &:last-child {
-            border-right-width: 0;
-          }
           &:last-of-type {
             max-width: unset !important;
           }
           &__sortable {
             @apply cursor-pointer pr-12;
             &--active {
-              @apply bg-blue-50;
+              @apply bg-purple-50;
             }
             &::before,
             &::after {
@@ -332,12 +331,12 @@ export default {
             }
             &--asc {
               &::before {
-                border-bottom: 6px solid theme("colors.blue.300");
+                border-bottom: 6px solid theme("colors.purple.300");
               }
             }
             &--dsc {
               &::after {
-                border-top: 6px solid theme("colors.blue.300");
+                border-top: 6px solid theme("colors.purple.300");
               }
             }
           }
@@ -346,15 +345,16 @@ export default {
     }
     tbody {
       tr {
-        @apply flex flex-grow;
+        @apply flex flex-grow transition-all duration-100 ease-in-out;
         &:hover {
-          background-color: rgba(238, 243, 250, 0.8);
           transition: all 0.15s ease-out;
+          @apply bg-gray-50;
+          td {
+            @apply border-purple-500 border-t first:rounded-l last:rounded-r border-r-gray-200 last:border-r-purple-500;
+          }
         }
         td {
-          @apply relative text-sm text-gray-900 border-b border-solid border-gray-50 break-words flex items-center;
-          padding: 7px 12px;
-          height: 47px;
+          @apply relative text-sm text-gray-900 border-b border-solid break-words flex items-center border-0 first:border-l border-r border-gray-200 py-1.5 px-3 h-12;
           &:last-of-type {
             max-width: unset !important;
           }

package/src/data/table.ts

@@ -582,13 +582,13 @@ export const studentHeader = [
   {
     value: "lifecycleStage",
     name: "Lifecycle",
-    width: 100,
+    width: 120,
     sortable: true,
   },
   {
     value: "acquisition",
     name: "Acquisition",
-    width: 100,
+    width: 140,
     sortable: false,
   },
   {