venice-ui 2.0.19 → 2.0.21

package/dist/cjs/components/Table/Cell.js

@@ -10,16 +10,16 @@ const DropdownMenu_1 = require("../DropdownMenu");
 const Theme_1 = require("../../Theme");
 const date_fns_1 = require("date-fns");
 const tableHelper_1 = require("./tableHelper");
-const Cell = ({ header, theme = Theme_1.mainTheme, moreActions, item, }) => {
+const Cell = ({ header, theme = Theme_1.mainTheme, moreActions, item, marked = false, }) => {
     if (header.action) {
         return (react_1.default.createElement(Table_styles_1.OptionTableCell, null,
             react_1.default.createElement(Table_styles_1.OptionTableCellWrapper, { onClick: (e) => e.stopPropagation() },
                 react_1.default.createElement(DropdownMenu_1.DropdownMenu, { options: moreActions, targetID: item.id, iconName: "more_vert", iconColor: theme.tableMoreIconColor, iconHoverColor: theme.tableHoverMoreIconColor, iconBgHoverColor: "transparent", position: "right" }))));
     }
     if (header.scope) {
-        return (react_1.default.createElement(Table_styles_1.TableCell, null, (0, tableHelper_1.getValueFormScope)(item[header.valueSource], header.scope)));
+        return (react_1.default.createElement(Table_styles_1.TableCell, { marked: marked }, (0, tableHelper_1.getValueFormScope)(item[header.valueSource], header.scope)));
     }
-    return (react_1.default.createElement(Table_styles_1.TableCell, null, header.date
+    return (react_1.default.createElement(Table_styles_1.TableCell, { marked: marked }, header.date
         ? (0, date_fns_1.format)(item[header.valueSource], 'dd-MM-yyyy')
         : header.isCount
             ? item[header.valueSource].length

package/dist/cjs/components/Table/Table.js

@@ -78,8 +78,8 @@ const Table = ({ theme = Theme_1.mainTheme, headers, elements, hover = true, sel
         react_1.default.createElement(Table_styles_1.TableWrapper, { cellPadding: "0", cellSpacing: "0" },
             react_1.default.createElement(Table_styles_1.TableHead, null,
                 react_1.default.createElement(Table_styles_1.TableRow, { hover: false, selectable: false, active: false }, tableProps.headers.map((header) => (react_1.default.createElement(HeaderCell_1.HeaderCell, { key: `header_${header.name}`, header: header, sortable: sortable, handleSort: handleHeaderCellClick, sort: tableProps.sort }))))),
-            react_1.default.createElement("tbody", null, tableProps.elements.map((item) => (react_1.default.createElement(Table_styles_1.TableRow, { key: `table_row_${item.id}`, hover: hover, active: selectedRow === item.id, selectable: selectable, onClick: () => handleRowClick(item.id) }, tableProps.headers.map((header) => {
-                return (react_1.default.createElement(Cell_1.Cell, { key: `cell_${header.name}_${item.id}`, header: header, moreActions: moreActions, item: item, theme: theme }));
+            react_1.default.createElement("tbody", null, tableProps.elements.map((item) => (react_1.default.createElement(Table_styles_1.TableRow, { key: `table_row_${item.id}`, hover: hover, active: selectedRow === item.id, selectable: selectable, onClick: () => handleRowClick(item.id) }, tableProps.headers.map((header, index) => {
+                return (react_1.default.createElement(Cell_1.Cell, { key: `cell_${header.name}_${item.id}`, header: header, moreActions: moreActions, item: item, theme: theme, marked: item.marked && index === 0 }));
             }))))))));
 };
 exports.Table = Table;

package/dist/cjs/components/Table/Table.styles.js

@@ -12,7 +12,7 @@ exports.TableHead = styled_components_1.default.thead `
   tr:first-child {
     position: sticky;
     top: 0;
-    z-index:10;
+    z-index: 10;
   }
 `;
 exports.TableHeaderCell = styled_components_1.default.th `
@@ -21,11 +21,9 @@ exports.TableHeaderCell = styled_components_1.default.th `
   padding: 8px;
   transition: 300ms;
   font-size: 14px;
-  color:${(p) => p.isSorted
-    ? p.theme.tableHeaderActive
-    : p.theme.text};
-  border-bottom:  1px solid rgba(0, 0, 0, 0.14);
-  position:relative;
+  color: ${(p) => (p.isSorted ? p.theme.tableHeaderActive : p.theme.text)};
+  border-bottom: 1px solid rgba(0, 0, 0, 0.14);
+  position: relative;
 `;
 exports.OptionTableHeaderCell = styled_components_1.default.th `
   font-weight: bold;
@@ -34,7 +32,7 @@ exports.OptionTableHeaderCell = styled_components_1.default.th `
   transition: 300ms;
   font-size: 14px;
   background-color: ${(p) => p.theme.tableHeaderBackground};
-  border-bottom:  1px solid rgba(0, 0, 0, 0.14);
+  border-bottom: 1px solid rgba(0, 0, 0, 0.14);
 `;
 exports.TableRow = styled_components_1.default.tr `
   background-color: ${(p) => p.active
@@ -59,7 +57,11 @@ exports.TableRow = styled_components_1.default.tr `
 `;
 exports.TableCell = styled_components_1.default.td `
   padding: 8px;
-
+  ${(p) => p.marked &&
+    `
+    border-left:2px solid ${p.theme.action};
+    padding-left:6px;
+    `}
 `;
 exports.OptionTableCell = styled_components_1.default.td `
   text-align: center;

package/dist/esm/components/Table/Cell.js

@@ -4,16 +4,16 @@ import { DropdownMenu } from '../DropdownMenu';
 import { mainTheme } from '../../Theme';
 import { format } from 'date-fns';
 import { getValueFormScope } from './tableHelper';
-export const Cell = ({ header, theme = mainTheme, moreActions, item, }) => {
+export const Cell = ({ header, theme = mainTheme, moreActions, item, marked = false, }) => {
     if (header.action) {
         return (React.createElement(OptionTableCell, null,
             React.createElement(OptionTableCellWrapper, { onClick: (e) => e.stopPropagation() },
                 React.createElement(DropdownMenu, { options: moreActions, targetID: item.id, iconName: "more_vert", iconColor: theme.tableMoreIconColor, iconHoverColor: theme.tableHoverMoreIconColor, iconBgHoverColor: "transparent", position: "right" }))));
     }
     if (header.scope) {
-        return (React.createElement(TableCell, null, getValueFormScope(item[header.valueSource], header.scope)));
+        return (React.createElement(TableCell, { marked: marked }, getValueFormScope(item[header.valueSource], header.scope)));
     }
-    return (React.createElement(TableCell, null, header.date
+    return (React.createElement(TableCell, { marked: marked }, header.date
         ? format(item[header.valueSource], 'dd-MM-yyyy')
         : header.isCount
             ? item[header.valueSource].length

package/dist/esm/components/Table/Table.js

@@ -52,7 +52,7 @@ export const Table = ({ theme = mainTheme, headers, elements, hover = true, sele
         React.createElement(TableWrapper, { cellPadding: "0", cellSpacing: "0" },
             React.createElement(TableHead, null,
                 React.createElement(TableRow, { hover: false, selectable: false, active: false }, tableProps.headers.map((header) => (React.createElement(HeaderCell, { key: `header_${header.name}`, header: header, sortable: sortable, handleSort: handleHeaderCellClick, sort: tableProps.sort }))))),
-            React.createElement("tbody", null, tableProps.elements.map((item) => (React.createElement(TableRow, { key: `table_row_${item.id}`, hover: hover, active: selectedRow === item.id, selectable: selectable, onClick: () => handleRowClick(item.id) }, tableProps.headers.map((header) => {
-                return (React.createElement(Cell, { key: `cell_${header.name}_${item.id}`, header: header, moreActions: moreActions, item: item, theme: theme }));
+            React.createElement("tbody", null, tableProps.elements.map((item) => (React.createElement(TableRow, { key: `table_row_${item.id}`, hover: hover, active: selectedRow === item.id, selectable: selectable, onClick: () => handleRowClick(item.id) }, tableProps.headers.map((header, index) => {
+                return (React.createElement(Cell, { key: `cell_${header.name}_${item.id}`, header: header, moreActions: moreActions, item: item, theme: theme, marked: item.marked && index === 0 }));
             }))))))));
 };

package/dist/esm/components/Table/Table.styles.js

@@ -6,7 +6,7 @@ export const TableHead = styled.thead `
   tr:first-child {
     position: sticky;
     top: 0;
-    z-index:10;
+    z-index: 10;
   }
 `;
 export const TableHeaderCell = styled.th `
@@ -15,11 +15,9 @@ export const TableHeaderCell = styled.th `
   padding: 8px;
   transition: 300ms;
   font-size: 14px;
-  color:${(p) => p.isSorted
-    ? p.theme.tableHeaderActive
-    : p.theme.text};
-  border-bottom:  1px solid rgba(0, 0, 0, 0.14);
-  position:relative;
+  color: ${(p) => (p.isSorted ? p.theme.tableHeaderActive : p.theme.text)};
+  border-bottom: 1px solid rgba(0, 0, 0, 0.14);
+  position: relative;
 `;
 export const OptionTableHeaderCell = styled.th `
   font-weight: bold;
@@ -28,7 +26,7 @@ export const OptionTableHeaderCell = styled.th `
   transition: 300ms;
   font-size: 14px;
   background-color: ${(p) => p.theme.tableHeaderBackground};
-  border-bottom:  1px solid rgba(0, 0, 0, 0.14);
+  border-bottom: 1px solid rgba(0, 0, 0, 0.14);
 `;
 export const TableRow = styled.tr `
   background-color: ${(p) => p.active
@@ -53,7 +51,11 @@ export const TableRow = styled.tr `
 `;
 export const TableCell = styled.td `
   padding: 8px;
-
+  ${(p) => p.marked &&
+    `
+    border-left:2px solid ${p.theme.action};
+    padding-left:6px;
+    `}
 `;
 export const OptionTableCell = styled.td `
   text-align: center;

package/dist/types/components/Table/Cell.d.ts

@@ -6,6 +6,7 @@ interface ICell {
     theme?: any;
     moreActions: IAction[];
     item: any;
+    marked?: boolean;
 }
 export declare const Cell: FC<ICell>;
 export {};

package/dist/types/components/Table/Table.styles.d.ts

@@ -17,6 +17,7 @@ interface ITableRowProps {
 export declare const TableRow: import("styled-components").StyledComponent<"tr", any, ITableRowProps, never>;
 interface ITableCellProps {
     theme: any;
+    marked: boolean;
 }
 export declare const TableCell: import("styled-components").StyledComponent<"td", any, ITableCellProps, never>;
 export declare const OptionTableCell: import("styled-components").StyledComponent<"td", any, {}, never>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "venice-ui",
-  "version": "2.0.19",
+  "version": "2.0.21",
   "description": "Component library",
   "main": "index.js",
   "module": "./dist/esm/index.js",