tuix-webcomponents 0.93.0 → 0.95.0

package/dist/src/tuix-table/TuixTable.styles.js

@@ -1,11 +1,43 @@
-import { css } from 'lit';
+import { css, unsafeCSS } from 'lit';
 import { ScreenSizes } from '../utils/screenSizes.enum';
-export const tableStyles = css `
+import { Palette } from '../utils/colors';
+import { DarkPalette } from '../utils/darkColors';
+import { LINK_TEXT_COLOR_VAR_NAME } from '../tuix-link/TuixLink.styles';
+export const tableHostStyles = css `
   :host {
     display: block;
     width: 100%;
+
+    --t-table-header-bg: ${unsafeCSS(Palette.PRIMARY_100)};
+    --t-table-header-text-color: ${unsafeCSS(Palette.PRIMARY_700)};
+    --t-table-header-focus-color: ${unsafeCSS(Palette.MAIN)};
+    --t-table-cell-bg: ${unsafeCSS(Palette.WHITE)};
+    --t-table-cell-border-color: ${unsafeCSS(Palette.NEUTRAL_200)};
+    --t-table-entity-border-color: ${unsafeCSS(Palette.MAIN)};
+    --t-table-row-border-color: ${unsafeCSS(Palette.NEUTRAL_200)};
+    --t-table-mobile-header-bg: ${unsafeCSS(Palette.SECTION_BG)};
+    --t-table-footer-bg: ${unsafeCSS(Palette.WHITE)};
+    --t-table-dropdown-stroke: ${unsafeCSS(Palette.NEUTRAL_200)};
+    --t-table-dropdown-text-color: ${unsafeCSS(Palette.BLACK)};
+    --t-table-dropdown-option-bg: ${unsafeCSS(Palette.WHITE)};
   }
 
+  :host([dark]) {
+    --t-table-header-bg: ${unsafeCSS(DarkPalette.PRIMARY_800)};
+    --t-table-header-text-color: ${unsafeCSS(DarkPalette.WHITE)};
+    --t-table-header-focus-color: ${unsafeCSS(DarkPalette.PRIMARY_300)};
+    --t-table-cell-bg: ${unsafeCSS(DarkPalette.BLACK)};
+    --t-table-cell-border-color: ${unsafeCSS(DarkPalette.PRIMARY_800)};
+    --t-table-entity-border-color: ${unsafeCSS(DarkPalette.PRIMARY_800)};
+    --t-table-row-border-color: ${unsafeCSS(DarkPalette.ELEVATION_4)};
+    --t-table-mobile-header-bg: ${unsafeCSS(DarkPalette.PRIMARY_800)};
+    --t-table-footer-bg: ${unsafeCSS(DarkPalette.PRIMARY_900)};
+    --t-table-dropdown-stroke: ${unsafeCSS(DarkPalette.PRIMARY_800)};
+    --t-table-dropdown-text-color: ${unsafeCSS(DarkPalette.PRIMARY_50)};
+    --t-table-dropdown-option-bg: ${unsafeCSS(DarkPalette.ELEVATION_2)};
+  }
+`;
+export const tableStyles = css `
   .table_wrapper {
     width: 100%;
     overflow-x: auto;
@@ -18,23 +50,68 @@ export const tableStyles = css `
     border-collapse: collapse;
   }
 
+  thead {
+    background-color: var(--t-table-header-bg);
+  }
+
   thead th {
     box-sizing: border-box;
-    padding: 8px;
+    padding: 8px 16px;
     text-align: left;
     overflow: hidden;
+  }
+
+  thead th.sortable {
+    cursor: pointer;
+  }
+
+  thead th.sortable:focus-visible {
+    outline: 2px solid var(--t-table-header-focus-color);
+    outline-offset: -2px;
+  }
+
+  thead th .header-cell {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+
+    ${unsafeCSS(LINK_TEXT_COLOR_VAR_NAME)}: var(--t-table-header-text-color);
+  }
+
+  thead th .header-cell .header-name {
+    overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
 
+  thead th .sort-icons {
+    display: flex;
+    flex-direction: column;
+    flex-shrink: 0;
+  }
+
+  thead th .sort-icons tuix-icon {
+    height: 12px;
+    display: flex;
+    align-items: center;
+  }
+
   tbody tr td {
+    border-bottom: 1px solid var(--t-table-cell-border-color);
     box-sizing: border-box;
     height: 52px;
-    padding: 6px 8px;
+    padding: 6px 16px;
     text-align: left;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+    overflow-x: auto;
+    scrollbar-width: none;
+    background-color: var(--t-table-cell-bg);
+  }
+
+  tbody tr td::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+    display: none;
   }
 
   ::slotted(*) {
@@ -47,12 +124,15 @@ export const tableStyles = css `
   .dropdown_container {
     position: relative;
     border-radius: 4px;
+    outline: 1px solid var(--t-table-dropdown-stroke);
   }
 
   .dropdown_container .items-per-page-dropdown {
     width: 55px;
     border: none;
     background-color: transparent;
+    color: var(--t-table-dropdown-text-color);
+    font-family: 'Rubik', sans-serif;
     padding: 8px;
     cursor: pointer;
     -webkit-appearance: none;
@@ -60,6 +140,10 @@ export const tableStyles = css `
     appearance: none;
   }
 
+  .dropdown_container .items-per-page-dropdown option {
+    background-color: var(--t-table-dropdown-option-bg);
+  }
+
   .dropdown_container .items-per-page-dropdown:focus-visible {
     border: none;
     outline: none;
@@ -80,6 +164,7 @@ export const tableStyles = css `
     display: flex;
     justify-content: space-between;
     align-items: center;
+    background-color: var(--t-table-footer-bg);
     box-sizing: border-box;
   }
 
@@ -98,35 +183,61 @@ export const tableStyles = css `
   footer.table_footer .navigation .buttons {
     display: flex;
     gap: 8px;
+  }
+
+  footer.table_footer .navigation .buttons .arrow {
     cursor: pointer;
   }
 
-  .mobile_table {
-    display: none;
+  .mobile_table .table_entity {
+    border-bottom: 2px solid var(--t-table-entity-border-color);
+  }
+
+  .mobile_table .table_row {
+    display: flex;
+    border-bottom: 1px solid var(--t-table-row-border-color);
+    min-height: 40px;
+  }
+
+  .mobile_table .table_row > * {
+    padding: 0 16px;
+    width: 50%;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+  }
+
+  .mobile_table .table_row .content {
+    padding: 12px 16px;
+  }
+
+  .mobile_table .table_row .content > * {
+    min-width: 0;
+    max-width: 100%;
+  }
+
+  .mobile_table .table_row .header {
+    background-color: var(--t-table-mobile-header-bg);
+
+    ${unsafeCSS(LINK_TEXT_COLOR_VAR_NAME)}: var(--t-table-header-text-color);
   }
 
   @media only screen and (max-width: ${ScreenSizes.TABLET}px) {
-    .mobile_table {
-      display: block;
+    footer.table_footer.sticky {
+      position: sticky;
+      bottom: 0;
     }
+  }
 
+  @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {
     footer.table_footer {
-      align-items: flex-start;
-      gap: 8px;
-    }
-
-    .mobile_table .table_row {
-      display: flex;
-      min-height: 40px;
+      position: sticky;
+      bottom: 0;
     }
 
-    .mobile_table .table_row > * {
-      padding: 0 16px;
-      width: 50%;
-      text-overflow: ellipsis;
-      overflow: hidden;
-      display: flex;
-      align-items: center;
+    footer.table_footer .navigation .buttons {
+      gap: 4px;
     }
   }
 `;
@@ -186,12 +297,4 @@ export const threeDots = css `
     width: 1px;
     white-space: nowrap;
   }
-
-  .clientsLoader,
-  .mobileClientsLoader,
-  .tabletClientsLoader {
-    display: flex;
-    justify-content: center;
-    padding: 16px 0;
-  }
 `;

package/dist/src/tuix-table/interfaces/tuix-table.interface.d.ts

@@ -1,9 +1,12 @@
+export type SortDirection = 'asc' | 'desc';
 export interface IDataTableHeader<TRowData = Record<string, unknown>> {
     cellColor?: (rowData: TRowData) => string | undefined;
+    cellBackgroundColor?: (rowData: TRowData) => string | undefined;
     isSlot?: boolean;
     slotName?: string;
     name?: string;
     dataKey: Extract<keyof TRowData, string>;
+    sortKey?: Extract<keyof TRowData, string>;
     width: number;
 }
 export interface TablePaginationProps {
@@ -37,9 +40,17 @@ export interface TuixTableElement<TRowData = any> extends HTMLElement {
     disableMobileTable?: boolean;
     pageSizeOptions?: number[];
     loader?: ThreeDotsLoaderConfig;
+    dark?: boolean;
+    sortBy?: string;
+    sortDirection?: SortDirection;
 }
 export interface PaginationEventDetail {
     page: number;
     pageSize: number;
 }
+export interface SortEventDetail {
+    sortKey: string;
+    sortDirection: SortDirection;
+}
 export type TuixPaginationEvent = CustomEvent<PaginationEventDetail>;
+export type TuixSortEvent = CustomEvent<SortEventDetail>;

package/package.json

@@ -138,5 +138,5 @@
     "test": "echo \"No tests configured\""
   },
   "type": "module",
-  "version": "0.93.0"
+  "version": "0.95.0"
 }