@inceptionbg/iui 2.0.8 → 2.0.10

package/src/styles/components/_pullover.scss

@@ -1,37 +1,52 @@
+@use '../variables/bp';
+
+$viewportWidth: (25, 50, 75, 100);
+$fixedWidth: (500, 600);
+
 .pullover {
   position: fixed;
   inset: 0;
+  z-index: 1000;
   display: flex;
   justify-content: end;
-  z-index: 100;
   overflow: hidden;
-  background: rgba(0, 0, 0, 0.4);
-  backdrop-filter: blur(3px);
+  background: var(--neutral-t);
+  backdrop-filter: blur(4px);
   animation: fade-in 0.2s forwards;
   .container {
     transition: width, 0.2s;
-    box-sizing: border-box;
-    background: var(--white);
-    height: 100%;
+    background: var(--background);
     width: 0;
-    overflow: hidden;
     max-width: 100vw;
     .content {
-      padding: 24px;
+      display: flex;
+      flex-direction: column;
+      height: 100dvh;
+      overflow: auto;
+      overscroll-behavior: none;
     }
   }
   &.open .container {
-    &.s {
-      width: 25vw;
+    @media #{bp.$mobile} {
+      width: 100%;
     }
-    &.m {
-      width: 50vw;
-    }
-    &.l {
-      width: 75vw;
-    }
-    &.xl {
-      width: 100vw;
+    @media #{bp.$not-mobile} {
+      @each $key in $viewportWidth {
+        &.vw#{$key} {
+          width: #{$key}vw;
+          .content {
+            min-width: #{$key}vw;
+          }
+        }
+      }
+      @each $key in $fixedWidth {
+        &.w#{$key} {
+          width: #{$key}px;
+          .content {
+            min-width: #{$key}px;
+          }
+        }
+      }
     }
   }
   &.closing {
@@ -40,4 +55,45 @@
       width: 0px !important;
     }
   }
+
+  .pullover-form {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    overflow: auto;
+  }
+
+  .pullover-header,
+  .pullover-footer {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 16px;
+    padding: 16px 24px;
+    box-shadow: var(--container-shadow);
+    z-index: 2;
+  }
+  .pullover-header {
+    justify-content: space-between;
+    .search-input {
+      width: min(250px, 50vw);
+    }
+  }
+  .pullover-content {
+    flex: 1;
+    overflow: auto;
+    padding: 16px 24px;
+  }
+
+  @media #{bp.$mobile} {
+    .pullover-header,
+    .pullover-content,
+    .pullover-footer {
+      padding: 8px 16px;
+      gap: 8px;
+    }
+    .pullover-footer .main-actions {
+      gap: 8px;
+    }
+  }
 }

package/src/styles/components/_table.scss

@@ -1,7 +1,5 @@
 @use '../variables/bp';
 
-$pagination-color: rgba(0, 0, 0, 0.8);
-
 table {
   border-spacing: 0px;
   border-collapse: collapse;
@@ -10,32 +8,35 @@ table {
   //// Header ////
   thead {
     z-index: 2;
-    background-color: #f9fafb;
+    background-color: var(--primary-100);
   }
   th {
-    padding: 0;
+    padding: 4px 12px;
     border-left: var(--border);
     border-right: var(--border);
 
-    font-weight: 400;
+    font-weight: bold;
     p {
       font-size: 12px;
     }
   }
   .table-container {
     overflow: auto;
-    // scroll-snap-type: y mandatory;
+    scroll-snap-type: y proximity;
+    // box-shadow: var(--container-shadow);
+    &::-webkit-scrollbar {
+      width: 8px;
+    }
   }
   .sticky-header {
-    position: -webkit-sticky;
     position: sticky;
     top: 0;
+    z-index: 1;
   }
   .border-row {
+    background-color: var(--border-color);
     height: 1px;
-    background-color: #dfe1eb;
-    width: 100%;
-    box-sizing: border-box;
+    padding: 0;
   }
 
   //// Body ////
@@ -44,13 +45,16 @@ table {
   // }
   // Row
   tr {
-    // scroll-snap-align: start;
+    scroll-snap-align: start;
+  }
+  tbody tr {
+    // border-bottom: var(--border);
     &.clickable:hover,
     &.selected {
       background-color: rgba(0, 0, 0, 0.05);
     }
     &.focused {
-      background-color: var(--primary-o10);
+      background-color: var(--primary-100);
     }
     &.loading {
       opacity: 0.5;
@@ -69,78 +73,91 @@ table {
   }
   td {
     border: var(--border);
-    // border-bottom: var(--border);
+    border-top: none;
     font-size: 14px;
     box-sizing: border-box;
-    height: 52px;
-    padding: 7px 16px;
+    height: 48px;
+    padding: 6px 12px;
     &.s {
       height: 40px;
-      padding: 2px 16px;
+      padding: 2px 12px;
     }
     &.xs {
       height: 30px;
-      padding: 2px 16px;
+      padding: 2px 12px;
     }
   }
   .clickable-column:hover {
     background-color: var(--primary-o10) !important;
   }
+  // Item Actions
+  .table-item-actions {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0 4px;
+    // gap: 8px;
+  }
 
   //// Footer ////
-
   .table-footer {
     display: flex;
     align-items: center;
     width: 100%;
-    height: 52px;
     padding: 8px;
     font-size: var(--fs-m);
     box-sizing: border-box;
+    .pagination {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      color: var(--text);
+      p,
+      .offset-input {
+        font-size: 12px !important;
+      }
+      p {
+        white-space: nowrap;
+      }
+      .offset-input {
+        .iui-input-wrapper-field {
+          width: 40px;
+          min-height: 24px;
+          height: 24px;
+        }
+        input {
+          font-size: 12px !important;
+          text-align: center;
+          padding: 0 5px;
+        }
+      }
+
+      @media #{bp.$mobile} {
+        flex-direction: column;
+        align-items: end;
+      }
+    }
   }
-  .pagination {
+
+  //// Actions ////
+  .iui-table-header-actions {
     display: flex;
-    align-items: center;
-    gap: 16px;
-    color: $pagination-color;
-    p,
-    // select,
-    .offset-input {
-      font-size: 12px !important;
-    }
-    p {
-      white-space: nowrap;
-    }
-    .separator {
-      height: 16px;
-      width: 1px;
-      background-color: rgba(0, 0, 0, 0.6);
+    gap: 8px;
+    &:has(> *) {
+      padding: 8px 10px;
     }
-    select {
-      appearance: none;
-      color: $pagination-color;
-      background: none;
-      border: none;
-      text-align: right;
-      cursor: pointer;
-      padding: 0 8px;
-      user-select: none;
-      margin-left: 8px;
-      margin-right: 16px;
+  }
+
+  @media #{bp.$landscape} {
+    .select-col,
+    .actions-col {
+      padding: 0;
     }
-    .offset-input {
-      width: 40px;
-      input {
-        font-size: 12px !important;
-        height: 24px;
-        text-align: center;
-        padding: 0 5px;
-      }
+    .select-col {
+      width: 50px;
     }
-
-    @media #{bp.$mobile} {
-      flex-direction: column;
-      align-items: end;
+    .actions-col {
+      width: 70px;
     }
   }
 
@@ -150,13 +167,15 @@ table {
       display: block;
     }
     tr {
-      padding: 20px 0;
+      padding-bottom: 20px;
+      border-top: var(--border);
     }
     td {
       display: flex;
       align-items: center;
       height: unset !important;
       text-align: left;
+      width: unset !important;
     }
     thead {
       display: none;
@@ -172,99 +191,89 @@ table {
   }
 }
 
-.iui-table-filter {
-  .iui-dialog-content {
-    padding: 0;
-    margin: 8px 0;
-  }
-  .filters-search {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 8px;
-    .search-input {
-      max-width: 250px;
-    }
-  }
+.iui-filters-list {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
   .table-filter-item {
     display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 8px 16px;
-    // .label {
-    //   width: 150px;
-    // }
-    .field {
-      //   display: inline-flex;
-      //   margin: 0 8px;
-      // width: 100%;
-      flex: 1;
+    flex-direction: column;
+    width: 100%;
+    gap: 6px;
+    .filter-item-label {
+      font-weight: 500;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+      cursor: default;
     }
   }
 }
 
-.dual-list-container {
-  .dual-list-content {
-    display: grid;
-    grid-template-columns: 1fr auto 1fr;
-    gap: 12px;
-  }
-  .list-box {
-    border: var(--border);
-    border-radius: 16px;
-    padding: 10px;
-    user-select: none;
-    & > .item {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      padding: 8px;
-      font-size: 12px;
-      svg {
-        color: rgba(0, 0, 0, 0.6);
-        margin-left: 1rem;
-      }
-      &:hover {
-        background-color: var(--primary-o10);
-      }
-      &:active {
-        background-color: var(--primary-o25);
-      }
-    }
-  }
-  .exchange-icon {
-    display: flex;
-    align-items: center;
-    svg {
-      height: 20px;
-      width: 20px;
-    }
-  }
-}
+// .dual-list-container {
+//   .dual-list-content {
+//     display: grid;
+//     grid-template-columns: 1fr auto 1fr;
+//     gap: 12px;
+//   }
+//   .list-box {
+//     border: var(--border);
+//     border-radius: 16px;
+//     padding: 10px;
+//     user-select: none;
+//     & > .item {
+//       display: flex;
+//       justify-content: space-between;
+//       align-items: center;
+//       padding: 8px;
+//       font-size: 12px;
+//       svg {
+//         color: rgba(0, 0, 0, 0.6);
+//         margin-left: 1rem;
+//       }
+//       &:hover {
+//         background-color: var(--primary-o10);
+//       }
+//       &:active {
+//         background-color: var(--primary-o25);
+//       }
+//     }
+//   }
+//   .exchange-icon {
+//     display: flex;
+//     align-items: center;
+//     svg {
+//       height: 20px;
+//       width: 20px;
+//     }
+//   }
+// }
 
 .edit-row {
   background: var(--neutral-100);
   td {
-    padding: 4px !important;
-    // padding: 0 !important;
-  }
-  .iui-input-wrapper-field {
-    border: none;
-    border-radius: 0;
-    // height: 51px;
-    box-shadow: none !important;
+    padding: 4px;
+    .iui-input-wrapper-field {
+      // border: none;
+      // border-radius: 0;
+      box-shadow: none !important;
+    }
+    .select-wrapper {
+      min-width: 120px;
+    }
   }
 }
-.primary-row {
-  background-color: rgba(var(--primary-rgb), 0.15);
-}
-.secondary-row {
-  background-color: #f1f1f1;
-}
 
-.table-options {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 8px;
-}
+// .primary-row {
+//   background-color: var(--primary-100);
+// }
+// .secondary-row {
+//   background-color: #f1f1f1;
+// }
+
+// .table-options {
+//   display: flex;
+//   align-items: center;
+//   justify-content: space-between;
+//   padding: 8px;
+// }

package/src/styles/components/_widget.scss

@@ -33,7 +33,7 @@
 }
 
 .dashboard-widget {
-  background: var(--white);
+  background: var(--background);
   box-shadow: var(--container-shadow);
   padding: 30px;
   color: #000;

package/src/styles/variables/_bp.scss

@@ -3,3 +3,4 @@ $not-mobile: 'screen and (min-width: 501px)';
 $mobileTablet: 'screen and (max-width: 1023px)';
 $desktop: 'screen and (min-width: 1024px)';
 $portrait: 'screen and (orientation: portrait)';
+$landscape: 'screen and (orientation: landscape)';

package/src/styles/variables/_variables.scss

@@ -65,6 +65,7 @@
   --text: var(--neutral-700);
   --text-inverse: var(--white);
   --text-disabled: var(--neutral-400);
+  --background: var(--white);
   --background-disabled: var(--neutral-100);
   --neutral-hover: var(--neutral-200);
   --border-color: var(--neutral-300);
@@ -86,8 +87,9 @@
 
   --container-radius: 25px;
   --container-radius-bottom: 0 0 25px 25px;
-  --container-shadow: 0px 0px 5px rgba(180, 177, 177, 0.5);
-  --deep-shadow: 0px 5px 5px -3px rgb(0 0 0 / 20%), 0px 8px 10px 1px rgba(0, 0, 0, 0.14),
+  --container-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
+  --deep-shadow:
+    0px 5px 5px -3px rgb(0 0 0 / 20%), 0px 8px 10px 1px rgba(0, 0, 0, 0.14),
     0px 3px 14px 2px rgba(0, 0, 0, 0.12);
 }
 

package/src/types/IKeyboard.ts

@@ -1,9 +1,10 @@
 import { ITableDataItem } from './ITable';
 
 export interface IKeyboardAction {
-  key: string;
+  code: string;
   onAction: () => void;
   ctrl?: boolean;
+  shift?: boolean;
   normalizedKey?: boolean;
   onBulkAction?: (itemUuids: string[]) => void;
   disabled?: boolean;

package/src/types/IMenu.ts

@@ -10,6 +10,7 @@ export interface IMenuItem {
   onClick?: MouseEventHandler<HTMLDivElement>;
   to?: string;
   badge?: number;
+  active?: boolean;
   disabled?: boolean;
   hidden?: boolean;
   withDevider?: boolean;

package/src/types/ISelect.ts

@@ -18,6 +18,7 @@ interface BaseSelectProps {
   helperText?: string;
   errorText?: string;
   error?: boolean;
+  size?: 's' | 'm';
   className?: string;
   minWidth?: number;
   menuWidth?: 'fit-content' | 'max-content' | number;