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

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/dist/table/UCheckbox.vue.d.ts

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

package/dist/table/UCheckbox.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UCheckbox.vue.d.ts","sourceRoot":"","sources":["../../src/components/table/UCheckbox.vue"],"names":[],"mappings":"AACA,cAAc,4FAA4F,CAAC;AA6B3G,OAAO,qGAAqG,CAAC;;AAE7G,wBAAiF"}

package/dist/table/UTable.vue.d.ts

@@ -0,0 +1,4 @@
+import _sfc_main from "/Volumes/work/repos/edvoy-ui-v2/src/components/table/UTable.vue?vue&type=script&setup=true&lang.ts";
+export * from "/Volumes/work/repos/edvoy-ui-v2/src/components/table/UTable.vue?vue&type=script&setup=true&lang.ts";
+export default _sfc_main;
+//# sourceMappingURL=UTable.vue.d.ts.map

package/dist/table/UTable.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UTable.vue.d.ts","sourceRoot":"","sources":["../../src/components/table/UTable.vue"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,oGAAoG,CAAC;AAC3H,cAAc,oGAAoG,CAAC;AACnH,eAAe,SAAS,CAAC"}

package/package.json

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

package/src/components/index.ts

@@ -31,6 +31,7 @@ export { default as EUIPagination } from "./table/EUIPagination.vue";
 export { default as EUIPageLimit } from "./table/EUIPageLimit.vue";
 export { default as EUITableCheckbox } from "./table/EUITableCheckbox.vue";
 
+export { default as UTable } from "./table/UTable.vue";
 export { default as EUITable } from "./table/EUITable.vue";
 export { default as EUIStudentPagination } from "./table/EUIStudentPagination.vue";
 export { default as EUIMultiDropdown } from "./dropdown/EUIMultiDropdown.vue";

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.scss

@@ -0,0 +1,73 @@
+.ui-table {
+  @apply 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)),
+    linear-gradient(to left, rgba(223, 231, 242, 1), rgba(255, 255, 255, 0)),
+    linear-gradient(to top, white, rgba(255, 255, 255, 0)),
+    linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(223, 231, 242, 1));
+  background-position: left center, right center, left center, right center,
+    left bottom, left bottom;
+  background-size: 30px 100%, 30px 100%, 20px 100%, 20px 100%, 100% 100px,
+    100% 20px;
+  background-attachment: local, local, scroll, scroll, local, scroll;
+
+  .table {
+    @apply border-separate w-full border-0 border-spacing-0 border-gray-50 box-border;
+    border-spacing: 0;
+    thead {
+      @apply sticky top-0 left-0 z-20 before:-bottom-px before:left-0 before:absolute before:h-px before:w-full before:bg-gray-300 rounded-xl;
+      tr {
+        @apply flex flex-grow;
+        th {
+          @apply bg-gray-50 px-3 py-2 text-sm text-gray-600 text-left first-letter:uppercase border border-l-0 border-solid border-gray-200/50 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 font-medium snap-start snap-always h-12;
+          transition: all 0.15s ease-out;
+          &:first-of-type.checkable {
+          @apply min-h-11 flex items-center justify-center px-2 max-w-[45px] w-[45px] sticky left-0 top-0 z-20 bg-gray-100;
+        }
+          &:last-of-type {
+            max-width: unset !important;
+          }
+        }
+      }
+    }
+    tbody {
+      tr:not(.norecords) {
+        @apply flex flex-grow transition-all duration-100 ease-in-out last:mb-px;
+        &:hover {
+          transition: all 0.15s ease-out;
+          @apply bg-purple-50;
+          td {
+            @apply border-purple-500 border-t first:rounded-l-sm last:rounded-r-sm border-r-gray-200 last:border-r-purple-500 transition-colors duration-100 ease-in font-medium text-gray-900 bg-purple-50;
+             &:first-of-type.checkable {
+              @apply bg-purple-50;
+            }
+          }
+        }
+        td {
+          @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-100 py-1.5 px-3 h-12;
+           &:first-of-type.checkable {
+            @apply w-[45px] text-center sticky left-0 top-0 z-[11] bg-white;
+          }
+          &:last-of-type {
+            max-width: unset !important;
+          }
+        }
+      }
+    }
+  }
+}
+
+.search-icon {
+  span {
+    &::after {
+      @apply absolute m-auto;
+      content: "";
+      width: 18px;
+      height: 18px;
+      top: 10px;
+      right: 14px;
+      background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='iso-8859-1'%3F%3E%3C!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg version='1.1' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='18px' height='18px' fill='%2393a3b8' viewBox='0 0 28.931 28.932' style='enable-background:new 0 0 28.931 28.932;' xml:space='preserve'%3E%3Cg%3E%3Cpath d='M28.344,25.518l-6.114-6.115c1.486-2.067,2.303-4.537,2.303-7.137c0-3.275-1.275-6.355-3.594-8.672 C18.625,1.278,15.543,0,12.266,0C8.99,0,5.909,1.275,3.593,3.594C1.277,5.909,0.001,8.99,0.001,12.266 c0,3.276,1.275,6.356,3.592,8.674c2.316,2.316,5.396,3.594,8.673,3.594c2.599,0,5.067-0.813,7.136-2.303l6.114,6.115 c0.392,0.391,0.902,0.586,1.414,0.586c0.513,0,1.024-0.195,1.414-0.586C29.125,27.564,29.125,26.299,28.344,25.518z M6.422,18.111 c-1.562-1.562-2.421-3.639-2.421-5.846S4.86,7.983,6.422,6.421c1.561-1.562,3.636-2.422,5.844-2.422s4.284,0.86,5.845,2.422 c1.562,1.562,2.422,3.638,2.422,5.845s-0.859,4.283-2.422,5.846c-1.562,1.562-3.636,2.42-5.845,2.42S7.981,19.672,6.422,18.111z'/%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3C/svg%3E%0A");
+    }
+  }
+}